Browse code

Moving colors to their own sass

Julio Biason authored on 20/05/2019 08:14:07
Showing 3 changed files

... ...
@@ -59,7 +59,7 @@ blockquote cite::before {
59 59
   padding: 20px 10px;
60 60
 }
61 61
 nav a.active {
62
-  background-color: #ff2e88;
62
+  background-color: $anchor;
63 63
   color: #fff;
64 64
 }
65 65
 a[itemprop="url"] {
... ...
@@ -1,3 +1,5 @@
1
+@import "colors"
2
+
1 3
 html {
2 4
   font-size: 12px
3 5
 }
... ...
@@ -11,7 +13,7 @@ body {
11 13
   font-size: 1rem;
12 14
   line-height: 1.5rem;
13 15
   margin: 0;
14
-  font-family: Anonymous Pro, Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace, serif;
16
+  font-family: $font
15 17
   word-wrap: break-word
16 18
 }
17 19
 
... ...
@@ -28,8 +30,8 @@ fieldset {
28 30
 pre {
29 31
   padding: 2rem;
30 32
   margin: 1.75rem 0;
31
-  background-color: #fff;
32
-  border: 1px solid #ccc;
33
+  background-color: $pre-background;
34
+  border: 1px solid $pre-border;
33 35
   overflow: auto
34 36
 }
35 37
 
... ...
@@ -41,14 +43,14 @@ code[class*=language-], pre[class*=language-], pre code {
41 43
 
42 44
 a {
43 45
   cursor: pointer;
44
-  color: #ff2e88;
46
+  color: $anchor;
45 47
   text-decoration: none;
46
-  border-bottom: 1px solid #ff2e88
48
+  border-bottom: 1px solid $anchor
47 49
 }
48 50
 
49 51
 a:hover {
50
-  background-color: #ff2e88;
51
-  color: #fff
52
+  background-color: $anchor;
53
+  color: $anchor-hover;
52 54
 }
53 55
 
54 56
 .grid {
... ...
@@ -180,7 +182,7 @@ a:hover {
180 182
 .hack, .hack blockquote, .hack code, .hack em, .hack h1, .hack h2, .hack h3, .hack h4, .hack h5, .hack h6, .hack strong {
181 183
   font-size: 1rem;
182 184
   font-style: normal;
183
-  font-family: Anonymous Pro, Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace, serif
185
+  font-family: $font;
184 186
 }
185 187
 
186 188
 .hack blockquote, .hack code, .hack em, .hack strong {
... ...
@@ -367,7 +369,7 @@ p {
367 369
 .progress-bar {
368 370
   height: 8px;
369 371
   opacity: .8;
370
-  background-color: #ccc;
372
+  background-color: $progressbar-color;
371 373
   margin-top: 12px
372 374
 }
373 375
 
... ...
@@ -376,7 +378,7 @@ p {
376 378
 }
377 379
 
378 380
 .progress-bar-filled {
379
-  background-color: gray;
381
+  background-color: $progressbar-color-filled;
380 382
   height: 100%;
381 383
   transition: width .3s ease;
382 384
   position: relative;
... ...
@@ -386,14 +388,14 @@ p {
386 388
 .progress-bar-filled:before {
387 389
   content: '';
388 390
   border: 6px solid transparent;
389
-  border-top-color: gray;
391
+  border-top-color: $progressbar-color-filled;
390 392
   position: absolute;
391 393
   top: -12px;
392 394
   right: -6px
393 395
 }
394 396
 
395 397
 .progress-bar-filled:after {
396
-  color: gray;
398
+  color: $progressbar-color-filled;
397 399
   content: attr(data-filled);
398 400
   display: block;
399 401
   font-size: 12px;
... ...
@@ -410,12 +412,12 @@ table {
410 412
   width: 100%;
411 413
   border-collapse: collapse;
412 414
   margin: 1.75rem 0;
413
-  color: #778087
415
+  color: $table-color;
414 416
 }
415 417
 
416 418
 table td, table th {
417 419
   vertical-align: top;
418
-  border: 1px solid #ccc;
420
+  border: 1px solid $table-color;
419 421
   line-height: 15px;
420 422
   padding: 10px
421 423
 }
... ...
@@ -426,7 +428,7 @@ table thead th {
426 428
 
427 429
 table tbody td:first-child {
428 430
   font-weight: 700;
429
-  color: #333
431
+  color: $table-first-child;
430 432
 }
431 433
 
432 434
 .form {
... ...
@@ -439,8 +441,8 @@ table tbody td:first-child {
439 441
 }
440 442
 
441 443
 .form-group label {
442
-  border-bottom: 2px solid #ccc;
443
-  color: #333;
444
+  border-bottom: 2px solid $form-label-border;
445
+  color: $form-label-color;
444 446
   width: 10rem;
445 447
   display: inline-block;
446 448
   height: 38px;
... ...
@@ -451,24 +453,24 @@ table tbody td:first-child {
451 453
 }
452 454
 
453 455
 .form-group.form-success label {
454
-  color: #4caf50 !important;
455
-  border-color: #4caf50 !important
456
+  color: $form-success-color !important;
457
+  border-color: $form-success-border !important
456 458
 }
457 459
 
458 460
 .form-group.form-warning label {
459
-  color: #ff9800 !important;
460
-  border-color: #ff9800 !important
461
+  color: $form-warning-color !important;
462
+  border-color: $form-warning-border !important
461 463
 }
462 464
 
463 465
 .form-group.form-error label {
464
-  color: #f44336 !important;
465
-  border-color: #f44336 !important
466
+  color: $form-error-color !important;
467
+  border-color: $form-error-border !important
466 468
 }
467 469
 
468 470
 .form-control {
469 471
   outline: none;
470 472
   border: none;
471
-  border-bottom: 2px solid #ccc;
473
+  border-bottom: 2px solid $form-control-border;
472 474
   padding: .5rem 0;
473 475
   width: 20rem;
474 476
   height: 38px;
... ...
@@ -476,14 +478,14 @@ table tbody td:first-child {
476 478
 }
477 479
 
478 480
 .form-control:focus {
479
-  border-color: #555
481
+  border-color: $form-control-focus;
480 482
 }
481 483
 
482 484
 .form-group.form-textarea label:after {
483 485
   position: absolute;
484 486
   content: '';
485 487
   width: 2px;
486
-  background-color: #fff;
488
+  background-color: $form-textarea-background;
487 489
   right: -2px;
488 490
   top: 0;
489 491
   bottom: 0
... ...
@@ -493,8 +495,8 @@ textarea.form-control {
493 495
   height: auto;
494 496
   resize: none;
495 497
   padding: 1rem 0;
496
-  border-bottom: 2px solid #ccc;
497
-  border-left: 2px solid #ccc;
498
+  border-bottom: 2px solid $form-textarea-border;
499
+  border-left: 2px solid $form-textarea-border;
498 500
   padding: .5rem
499 501
 }
500 502
 
... ...
@@ -507,7 +509,7 @@ select.form-control {
507 509
 }
508 510
 
509 511
 .help-block {
510
-  color: #999;
512
+  color: $help-block;
511 513
   margin-top: .5rem
512 514
 }
513 515
 
... ...
@@ -535,18 +537,18 @@ select.form-control {
535 537
 }
536 538
 
537 539
 .btn:active {
538
-  box-shadow: inset 0 1px 3px rgba(0, 0, 0, .12)
540
+  box-shadow: inset 0 1px 3px $button-active-shadow;
539 541
 }
540 542
 
541 543
 .btn.btn-ghost {
542
-  border-color: #757575;
543
-  color: #757575;
544
+  border-color: $button-ghost-border;
545
+  color: $button-ghost-color;
544 546
   background-color: transparent
545 547
 }
546 548
 
547 549
 .btn.btn-ghost:focus, .btn.btn-ghost:hover {
548
-  border-color: #424242;
549
-  color: #424242;
550
+  border-color: $button-ghost-focus-border;
551
+  color: $button-ghost-focus-color;
550 552
   z-index: 2
551 553
 }
552 554
 
... ...
@@ -561,31 +563,30 @@ select.form-control {
561 563
 }
562 564
 
563 565
 .btn-default {
564
-  color: #fff;
565
-  background-color: #e0e0e0;
566
-  border: 1px solid #e0e0e0;
567
-  color: #333
566
+  background-color: $button-default-background;
567
+  border: 1px solid $button-default-border;
568
+  color: $button-default-color;
568 569
 }
569 570
 
570 571
 .btn-default:focus:not(.btn-ghost), .btn-default:hover {
571
-  background-color: #dcdcdc;
572
-  border-color: #dcdcdc
572
+  background-color: $button-default-focus-background;
573
+  border-color: $button-default-focus-border
573 574
 }
574 575
 
575 576
 .btn-success {
576
-  color: #fff;
577
-  background-color: #4caf50;
578
-  border: 1px solid #4caf50
577
+  color: $button-success-color;
578
+  background-color: $button-success-background;
579
+  border: 1px solid $button-success-border;
579 580
 }
580 581
 
581 582
 .btn-success:focus:not(.btn-ghost), .btn-success:hover {
582
-  background-color: #43a047;
583
-  border-color: #43a047
583
+  background-color: $button-success-focus-background;
584
+  border-color: $button-success-focus-border
584 585
 }
585 586
 
586 587
 .btn-success.btn-ghost {
587
-  border-color: #4caf50;
588
-  color: #4caf50
588
+  border-color: $button-success-ghost-border;
589
+  color: $button-success-ghost-color;
589 590
 }
590 591
 
591 592
 .btn-success.btn-ghost:focus, .btn-success.btn-ghost:hover {
592 593
new file mode 100644
... ...
@@ -0,0 +1,62 @@
1
+$font: Inconsolata, Courier;
2
+$pre-background: #fff;
3
+$pre-border: #ccc;
4
+
5
+$success: #4caf50;
6
+
7
+$anchor: #ff2e88;
8
+$anchor-hover: #fff;
9
+
10
+$progressbar-color: #ccc;
11
+$progressbar-color-filled: gray;
12
+
13
+$table-color: #778087;
14
+$table-border: #ccc;
15
+$table-first-child: #333;
16
+
17
+$form-label-border: #ccc;
18
+$form-label-color: #333;
19
+
20
+$form-control-border: $form-label-border;
21
+$form-control-focus: #555;
22
+
23
+$form-textarea-background: #fff;
24
+$form-textarea-border: #ccc;
25
+
26
+$form-success-color: $success;
27
+$form-success-border: $form-success-color;
28
+
29
+$form-warning-color: #ff9800;
30
+$form-warning-border: $form-warning-color;
31
+
32
+$form-error-color: #f44336;
33
+$form-error-border: $form-error-color;
34
+
35
+$help-block: #999;
36
+
37
+$button-active-shadow: rgba(0, 0, 0, .12);
38
+
39
+$button-ghost-color: #757575;
40
+$button-ghost-border: $button-ghost-color;
41
+
42
+$button-ghost-focus-border: #424242;
43
+$button-ghost-focus-color: $button-ghost-focus-border;
44
+$button-ghost-hover-border: $button-ghost-focus-border;
45
+$button-ghost-hover-color: $button-ghost-focus-border;
46
+
47
+$button-default-color: #333;
48
+$button-default-background: #e0e0e0;
49
+$button-default-border: #e0e0e0;
50
+
51
+$button-default-focus-background: #dcdcdc;
52
+$button-default-focus-border: #dcdcdc;
53
+
54
+$button-success-color: #fff;
55
+$button-success-background: $success;
56
+$button-success-border: $success;
57
+$button-success-focus-background: $success;
58
+$button-success-focus-border: $success;
59
+$button-success-ghost-border: $success;
60
+$button-success-ghost-color: $success;
61
+$button-success-ghost-focus-border: #388e3c;
62
+$button-success-ghost-focus-color: $button-success-ghost-focus-border;