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
Split 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;
}
nav a.active {
background-color: #ff2e88;
background-color: $anchor;
color: #fff;
}
a[itemprop="url"] {

95
sass/_vendor.scss
Unescape View File

@ -1,3 +1,5 @@
@import "colors"
html {
font-size: 12px
}
@ -11,7 +13,7 @@ body {
font-size: 1rem;
line-height: 1.5rem;
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
}
@ -28,8 +30,8 @@ fieldset {
pre {
padding: 2rem;
margin: 1.75rem 0;
background-color: #fff;
border: 1px solid #ccc;
background-color: $pre-background;
border: 1px solid $pre-border;
overflow: auto
}
@ -41,14 +43,14 @@ code[class*=language-], pre[class*=language-], pre code {
a {
cursor: pointer;
color: #ff2e88;
color: $anchor;
text-decoration: none;
border-bottom: 1px solid #ff2e88
border-bottom: 1px solid $anchor
}
a:hover {
background-color: #ff2e88;
color: #fff
background-color: $anchor;
color: $anchor-hover;
}
.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 {
font-size: 1rem;
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 {
@ -367,7 +369,7 @@ p {
.progress-bar {
height: 8px;
opacity: .8;
background-color: #ccc;
background-color: $progressbar-color;
margin-top: 12px
}
@ -376,7 +378,7 @@ p {
}
.progress-bar-filled {
background-color: gray;
background-color: $progressbar-color-filled;
height: 100%;
transition: width .3s ease;
position: relative;
@ -386,14 +388,14 @@ p {
.progress-bar-filled:before {
content: '';
border: 6px solid transparent;
border-top-color: gray;
border-top-color: $progressbar-color-filled;
position: absolute;
top: -12px;
right: -6px
}
.progress-bar-filled:after {
color: gray;
color: $progressbar-color-filled;
content: attr(data-filled);
display: block;
font-size: 12px;
@ -410,12 +412,12 @@ table {
width: 100%;
border-collapse: collapse;
margin: 1.75rem 0;
color: #778087
color: $table-color;
}
table td, table th {
vertical-align: top;
border: 1px solid #ccc;
border: 1px solid $table-color;
line-height: 15px;
padding: 10px
}
@ -426,7 +428,7 @@ table thead th {
table tbody td:first-child {
font-weight: 700;
color: #333
color: $table-first-child;
}
.form {
@ -439,8 +441,8 @@ table tbody td:first-child {
}
.form-group label {
border-bottom: 2px solid #ccc;
color: #333;
border-bottom: 2px solid $form-label-border;
color: $form-label-color;
width: 10rem;
display: inline-block;
height: 38px;
@ -451,24 +453,24 @@ table tbody td:first-child {
}
.form-group.form-success label {
color: #4caf50 !important;
border-color: #4caf50 !important
color: $form-success-color !important;
border-color: $form-success-border !important
}
.form-group.form-warning label {
color: #ff9800 !important;
border-color: #ff9800 !important
color: $form-warning-color !important;
border-color: $form-warning-border !important
}
.form-group.form-error label {
color: #f44336 !important;
border-color: #f44336 !important
color: $form-error-color !important;
border-color: $form-error-border !important
}
.form-control {
outline: none;
border: none;
border-bottom: 2px solid #ccc;
border-bottom: 2px solid $form-control-border;
padding: .5rem 0;
width: 20rem;
height: 38px;
@ -476,14 +478,14 @@ table tbody td:first-child {
}
.form-control:focus {
border-color: #555
border-color: $form-control-focus;
}
.form-group.form-textarea label:after {
position: absolute;
content: '';
width: 2px;
background-color: #fff;
background-color: $form-textarea-background;
right: -2px;
top: 0;
bottom: 0
@ -493,8 +495,8 @@ textarea.form-control {
height: auto;
resize: none;
padding: 1rem 0;
border-bottom: 2px solid #ccc;
border-left: 2px solid #ccc;
border-bottom: 2px solid $form-textarea-border;
border-left: 2px solid $form-textarea-border;
padding: .5rem
}
@ -507,7 +509,7 @@ select.form-control {
}
.help-block {
color: #999;
color: $help-block;
margin-top: .5rem
}
@ -535,18 +537,18 @@ select.form-control {
}
.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 {
border-color: #757575;
color: #757575;
border-color: $button-ghost-border;
color: $button-ghost-color;
background-color: transparent
}
.btn.btn-ghost:focus, .btn.btn-ghost:hover {
border-color: #424242;
color: #424242;
border-color: $button-ghost-focus-border;
color: $button-ghost-focus-color;
z-index: 2
}
@ -561,31 +563,30 @@ select.form-control {
}
.btn-default {
color: #fff;
background-color: #e0e0e0;
border: 1px solid #e0e0e0;
color: #333
background-color: $button-default-background;
border: 1px solid $button-default-border;
color: $button-default-color;
}
.btn-default:focus:not(.btn-ghost), .btn-default:hover {
background-color: #dcdcdc;
border-color: #dcdcdc
background-color: $button-default-focus-background;
border-color: $button-default-focus-border
}
.btn-success {
color: #fff;
background-color: #4caf50;
border: 1px solid #4caf50
color: $button-success-color;
background-color: $button-success-background;
border: 1px solid $button-success-border;
}
.btn-success:focus:not(.btn-ghost), .btn-success:hover {
background-color: #43a047;
border-color: #43a047
background-color: $button-success-focus-background;
border-color: $button-success-focus-border
}
.btn-success.btn-ghost {
border-color: #4caf50;
color: #4caf50
border-color: $button-success-ghost-border;
color: $button-success-ghost-color;
}
.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