jbiason
/
Daytime
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

Moving colors to their own sass

master
Julio Biason 5 years ago
parent
3b53a15acf
commit
140ad15ccb
3 changed files with 111 additions and 48 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      sass/_theme.scss
  2. 95
      sass/_vendor.scss
  3. 62
      sass/colors.scss

2
sass/_theme.scss
Unescape View File

@ -59,7 +59,7 @@ blockquote cite::before {
padding: 20px 10px; padding: 20px 10px;
} }
nav a.active { nav a.active {
background-color: #ff2e88; background-color: $anchor;
color: #fff; color: #fff;
} }
a[itemprop="url"] { a[itemprop="url"] {

95
sass/_vendor.scss
Unescape View File

@ -1,3 +1,5 @@
@import "colors"
html { html {
font-size: 12px font-size: 12px
} }
@ -11,7 +13,7 @@ body {
font-size: 1rem; font-size: 1rem;
line-height: 1.5rem; line-height: 1.5rem;
margin: 0; margin: 0;
font-family: Anonymous Pro, Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace, serif; font-family: $font
word-wrap: break-word word-wrap: break-word
} }
@ -28,8 +30,8 @@ fieldset {
pre { pre {
padding: 2rem; padding: 2rem;
margin: 1.75rem 0; margin: 1.75rem 0;
background-color: #fff; background-color: $pre-background;
border: 1px solid #ccc; border: 1px solid $pre-border;
overflow: auto overflow: auto
} }
@ -41,14 +43,14 @@ code[class*=language-], pre[class*=language-], pre code {
a { a {
cursor: pointer; cursor: pointer;
color: #ff2e88; color: $anchor;
text-decoration: none; text-decoration: none;
border-bottom: 1px solid #ff2e88 border-bottom: 1px solid $anchor
} }
a:hover { a:hover {
background-color: #ff2e88; background-color: $anchor;
color: #fff color: $anchor-hover;
} }
.grid { .grid {
@ -180,7 +182,7 @@ a:hover {
.hack, .hack blockquote, .hack code, .hack em, .hack h1, .hack h2, .hack h3, .hack h4, .hack h5, .hack h6, .hack strong { .hack, .hack blockquote, .hack code, .hack em, .hack h1, .hack h2, .hack h3, .hack h4, .hack h5, .hack h6, .hack strong {
font-size: 1rem; font-size: 1rem;
font-style: normal; font-style: normal;
font-family: Anonymous Pro, Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace, serif font-family: $font;
} }
.hack blockquote, .hack code, .hack em, .hack strong { .hack blockquote, .hack code, .hack em, .hack strong {
@ -367,7 +369,7 @@ p {
.progress-bar { .progress-bar {
height: 8px; height: 8px;
opacity: .8; opacity: .8;
background-color: #ccc; background-color: $progressbar-color;
margin-top: 12px margin-top: 12px
} }
@ -376,7 +378,7 @@ p {
} }
.progress-bar-filled { .progress-bar-filled {
background-color: gray; background-color: $progressbar-color-filled;
height: 100%; height: 100%;
transition: width .3s ease; transition: width .3s ease;
position: relative; position: relative;
@ -386,14 +388,14 @@ p {
.progress-bar-filled:before { .progress-bar-filled:before {
content: ''; content: '';
border: 6px solid transparent; border: 6px solid transparent;
border-top-color: gray; border-top-color: $progressbar-color-filled;
position: absolute; position: absolute;
top: -12px; top: -12px;
right: -6px right: -6px
} }
.progress-bar-filled:after { .progress-bar-filled:after {
color: gray; color: $progressbar-color-filled;
content: attr(data-filled); content: attr(data-filled);
display: block; display: block;
font-size: 12px; font-size: 12px;
@ -410,12 +412,12 @@ table {
width: 100%; width: 100%;
border-collapse: collapse; border-collapse: collapse;
margin: 1.75rem 0; margin: 1.75rem 0;
color: #778087 color: $table-color;
} }
table td, table th { table td, table th {
vertical-align: top; vertical-align: top;
border: 1px solid #ccc; border: 1px solid $table-color;
line-height: 15px; line-height: 15px;
padding: 10px padding: 10px
} }
@ -426,7 +428,7 @@ table thead th {
table tbody td:first-child { table tbody td:first-child {
font-weight: 700; font-weight: 700;
color: #333 color: $table-first-child;
} }
.form { .form {
@ -439,8 +441,8 @@ table tbody td:first-child {
} }
.form-group label { .form-group label {
border-bottom: 2px solid #ccc; border-bottom: 2px solid $form-label-border;
color: #333; color: $form-label-color;
width: 10rem; width: 10rem;
display: inline-block; display: inline-block;
height: 38px; height: 38px;
@ -451,24 +453,24 @@ table tbody td:first-child {
} }
.form-group.form-success label { .form-group.form-success label {
color: #4caf50 !important; color: $form-success-color !important;
border-color: #4caf50 !important border-color: $form-success-border !important
} }
.form-group.form-warning label { .form-group.form-warning label {
color: #ff9800 !important; color: $form-warning-color !important;
border-color: #ff9800 !important border-color: $form-warning-border !important
} }
.form-group.form-error label { .form-group.form-error label {
color: #f44336 !important; color: $form-error-color !important;
border-color: #f44336 !important border-color: $form-error-border !important
} }
.form-control { .form-control {
outline: none; outline: none;
border: none; border: none;
border-bottom: 2px solid #ccc; border-bottom: 2px solid $form-control-border;
padding: .5rem 0; padding: .5rem 0;
width: 20rem; width: 20rem;
height: 38px; height: 38px;
@ -476,14 +478,14 @@ table tbody td:first-child {
} }
.form-control:focus { .form-control:focus {
border-color: #555 border-color: $form-control-focus;
} }
.form-group.form-textarea label:after { .form-group.form-textarea label:after {
position: absolute; position: absolute;
content: ''; content: '';
width: 2px; width: 2px;
background-color: #fff; background-color: $form-textarea-background;
right: -2px; right: -2px;
top: 0; top: 0;
bottom: 0 bottom: 0
@ -493,8 +495,8 @@ textarea.form-control {
height: auto; height: auto;
resize: none; resize: none;
padding: 1rem 0; padding: 1rem 0;
border-bottom: 2px solid #ccc; border-bottom: 2px solid $form-textarea-border;
border-left: 2px solid #ccc; border-left: 2px solid $form-textarea-border;
padding: .5rem padding: .5rem
} }
@ -507,7 +509,7 @@ select.form-control {
} }
.help-block { .help-block {
color: #999; color: $help-block;
margin-top: .5rem margin-top: .5rem
} }
@ -535,18 +537,18 @@ select.form-control {
} }
.btn:active { .btn:active {
box-shadow: inset 0 1px 3px rgba(0, 0, 0, .12) box-shadow: inset 0 1px 3px $button-active-shadow;
} }
.btn.btn-ghost { .btn.btn-ghost {
border-color: #757575; border-color: $button-ghost-border;
color: #757575; color: $button-ghost-color;
background-color: transparent background-color: transparent
} }
.btn.btn-ghost:focus, .btn.btn-ghost:hover { .btn.btn-ghost:focus, .btn.btn-ghost:hover {
border-color: #424242; border-color: $button-ghost-focus-border;
color: #424242; color: $button-ghost-focus-color;
z-index: 2 z-index: 2
} }
@ -561,31 +563,30 @@ select.form-control {
} }
.btn-default { .btn-default {
color: #fff; background-color: $button-default-background;
background-color: #e0e0e0; border: 1px solid $button-default-border;
border: 1px solid #e0e0e0; color: $button-default-color;
color: #333
} }
.btn-default:focus:not(.btn-ghost), .btn-default:hover { .btn-default:focus:not(.btn-ghost), .btn-default:hover {
background-color: #dcdcdc; background-color: $button-default-focus-background;
border-color: #dcdcdc border-color: $button-default-focus-border
} }
.btn-success { .btn-success {
color: #fff; color: $button-success-color;
background-color: #4caf50; background-color: $button-success-background;
border: 1px solid #4caf50 border: 1px solid $button-success-border;
} }
.btn-success:focus:not(.btn-ghost), .btn-success:hover { .btn-success:focus:not(.btn-ghost), .btn-success:hover {
background-color: #43a047; background-color: $button-success-focus-background;
border-color: #43a047 border-color: $button-success-focus-border
} }
.btn-success.btn-ghost { .btn-success.btn-ghost {
border-color: #4caf50; border-color: $button-success-ghost-border;
color: #4caf50 color: $button-success-ghost-color;
} }
.btn-success.btn-ghost:focus, .btn-success.btn-ghost:hover { .btn-success.btn-ghost:focus, .btn-success.btn-ghost:hover {

62
sass/colors.scss
Unescape View File

@ -0,0 +1,62 @@
$font: Inconsolata, Courier;
$pre-background: #fff;
$pre-border: #ccc;
$success: #4caf50;
$anchor: #ff2e88;
$anchor-hover: #fff;
$progressbar-color: #ccc;
$progressbar-color-filled: gray;
$table-color: #778087;
$table-border: #ccc;
$table-first-child: #333;
$form-label-border: #ccc;
$form-label-color: #333;
$form-control-border: $form-label-border;
$form-control-focus: #555;
$form-textarea-background: #fff;
$form-textarea-border: #ccc;
$form-success-color: $success;
$form-success-border: $form-success-color;
$form-warning-color: #ff9800;
$form-warning-border: $form-warning-color;
$form-error-color: #f44336;
$form-error-border: $form-error-color;
$help-block: #999;
$button-active-shadow: rgba(0, 0, 0, .12);
$button-ghost-color: #757575;
$button-ghost-border: $button-ghost-color;
$button-ghost-focus-border: #424242;
$button-ghost-focus-color: $button-ghost-focus-border;
$button-ghost-hover-border: $button-ghost-focus-border;
$button-ghost-hover-color: $button-ghost-focus-border;
$button-default-color: #333;
$button-default-background: #e0e0e0;
$button-default-border: #e0e0e0;
$button-default-focus-background: #dcdcdc;
$button-default-focus-border: #dcdcdc;
$button-success-color: #fff;
$button-success-background: $success;
$button-success-border: $success;
$button-success-focus-background: $success;
$button-success-focus-border: $success;
$button-success-ghost-border: $success;
$button-success-ghost-color: $success;
$button-success-ghost-focus-border: #388e3c;
$button-success-ghost-focus-color: $button-success-ghost-focus-border;
Write Preview
Loading…
Cancel
Save