dbroqua/KNACSS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

color naming convention

This commit is contained in:
Raphael Goetter 2017-10-13 10:59:40 +02:00
parent 21755f2c58
commit 513851c5c8
6 changed files with 96 additions and 86 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
css/knacss-unminified.css
View File

@ -1856,7 +1856,7 @@ table,
.table caption { .table caption {
caption-side: bottom; caption-side: bottom;
padding: 1rem; padding: 1rem;
color: #727e96; color: #333;
font-style: italic; font-style: italic;
text-align: right; text-align: right;
} }
@ -1925,8 +1925,8 @@ textarea {
font-family: inherit; font-family: inherit;
font-size: inherit; font-size: inherit;
border: 0; border: 0;
-webkit-box-shadow: 0 0 0 1px #727e96 inset; -webkit-box-shadow: 0 0 0 1px #333 inset;
box-shadow: 0 0 0 1px #727e96 inset; box-shadow: 0 0 0 1px #333 inset;
color: #000; color: #000;
vertical-align: middle; vertical-align: middle;
padding: 0.5rem 1rem; padding: 0.5rem 1rem;
@ -1943,13 +1943,13 @@ textarea {
} }
[type="submit"] { [type="submit"] {
background-color: #727e96; background-color: #333;
color: #fff; color: #fff;
cursor: pointer; cursor: pointer;
} }
input[readonly] { input[readonly] {
background-color: #F7F7F7; background-color: #e7e9ed;
} }
select { select {
@ -2028,7 +2028,7 @@ button, .btn--primary,
color: #000; color: #000;
border: none; border: none;
border-radius: 0; border-radius: 0;
background-color: #F7F7F7; background-color: #e7e9ed;
font-family: inherit; font-family: inherit;
font-size: inherit; font-size: inherit;
line-height: 1; line-height: 1;
@ -2118,7 +2118,7 @@ button:focus {
.btn--inverse, .btn--inverse,
.button--inverse { .button--inverse {
background-color: #292B2C; background-color: #333;
color: #fff; color: #fff;
-webkit-box-shadow: none; -webkit-box-shadow: none;
box-shadow: none; box-shadow: none;
@ -2128,7 +2128,7 @@ button:focus {
.button--inverse:active, .button--inverse:active,
.button--inverse:focus, .button--inverse:focus,
.button--inverse:hover { .button--inverse:hover {
background-color: #101112; background-color: #1a1a1a;
} }
.btn--ghost, .btn--ghost,
@ -2278,8 +2278,8 @@ button:focus {
vertical-align: text-bottom; vertical-align: text-bottom;
outline: 0; outline: 0;
cursor: pointer; cursor: pointer;
-webkit-box-shadow: inset 0 0 0 1px #727e96; -webkit-box-shadow: inset 0 0 0 1px #333;
box-shadow: inset 0 0 0 1px #727e96; box-shadow: inset 0 0 0 1px #333;
border-radius: 3em; border-radius: 3em;
background: #fff; background: #fff;
} }
@ -2303,8 +2303,8 @@ button:focus {
padding-left: 0.5rem; padding-left: 0.5rem;
padding-right: 0.5rem; padding-right: 0.5rem;
font-size: 60%; font-size: 60%;
-webkit-box-shadow: inset -2rem 0 0 #727e96, inset 0 0 0 1px #727e96; -webkit-box-shadow: inset -2rem 0 0 #333, inset 0 0 0 1px #333;
box-shadow: inset -2rem 0 0 #727e96, inset 0 0 0 1px #727e96; box-shadow: inset -2rem 0 0 #333, inset 0 0 0 1px #333;
-webkit-transition: -webkit-box-shadow .15s; -webkit-transition: -webkit-box-shadow .15s;
transition: -webkit-box-shadow .15s; transition: -webkit-box-shadow .15s;
transition: box-shadow .15s; transition: box-shadow .15s;
@ -2342,7 +2342,7 @@ button:focus {
background-size: 60% 60%; background-size: 60% 60%;
background-position: center; background-position: center;
background-repeat: no-repeat; background-repeat: no-repeat;
background-color: #727e96; background-color: #333;
} }
.radio { .radio {
@ -2357,7 +2357,7 @@ button:focus {
background-size: 80% 80%; background-size: 80% 80%;
background-position: center; background-position: center;
background-repeat: no-repeat; background-repeat: no-repeat;
background-color: #727e96; background-color: #333;
} }
/* ----------------------------- */ /* ----------------------------- */
@ -2385,15 +2385,15 @@ button:focus {
} }
.tabs-menu-link.is-active { .tabs-menu-link.is-active {
border-bottom-color: #727e96; border-bottom-color: #333;
color: #727e96; color: #333;
background: transparent; background: transparent;
outline: 0; outline: 0;
} }
.tabs-menu-link:focus { .tabs-menu-link:focus {
border-bottom-color: #727e96; border-bottom-color: #333;
color: #727e96; color: #333;
outline: 0; outline: 0;
} }
@ -2462,7 +2462,7 @@ button:focus {
white-space: nowrap; white-space: nowrap;
color: #000; color: #000;
border-radius: 0; border-radius: 0;
background-color: #F7F7F7; background-color: #e7e9ed;
line-height: 1; line-height: 1;
} }
@ -2502,7 +2502,7 @@ button:focus {
} }
.tag--inverse { .tag--inverse {
background-color: #292B2C; background-color: #333;
color: #fff; color: #fff;
-webkit-box-shadow: none; -webkit-box-shadow: none;
box-shadow: none; box-shadow: none;
@ -2546,7 +2546,7 @@ button:focus {
padding: 0.5rem; padding: 0.5rem;
border-radius: 50%; border-radius: 50%;
color: #000; color: #000;
background-color: #F7F7F7; background-color: #e7e9ed;
line-height: 1; line-height: 1;
} }
@ -2583,7 +2583,7 @@ button:focus {
} }
.badge--inverse { .badge--inverse {
background-color: #292B2C; background-color: #333;
color: #fff; color: #fff;
} }
@ -2619,7 +2619,7 @@ button:focus {
margin-bottom: 0; margin-bottom: 0;
color: #000; color: #000;
border-radius: 0; border-radius: 0;
background-color: #F7F7F7; background-color: #e7e9ed;
} }
.alert a, .alert--primary a, .alert--success a, .alert--info a, .alert--warning a, .alert--danger a, .alert--inverse a, .alert--ghost a { .alert a, .alert--primary a, .alert--success a, .alert--info a, .alert--warning a, .alert--danger a, .alert--inverse a, .alert--ghost a {
@ -2663,7 +2663,7 @@ button:focus {
} }
.alert--inverse { .alert--inverse {
background-color: #292B2C; background-color: #333;
color: #fff; color: #fff;
-webkit-box-shadow: none; -webkit-box-shadow: none;
box-shadow: none; box-shadow: none;

2
css/knacss.css
View File

File diff suppressed because one or more lines are too long

126
sass/_config/_variables.scss
View File

@ -25,73 +25,83 @@ $font-stack-common : -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxyge
$font-stack-headings : sans-serif; // headings font $font-stack-headings : sans-serif; // headings font
$font-stack-monospace : consolas, courier, monospace; // monospace font $font-stack-monospace : consolas, courier, monospace; // monospace font
// color scheme // color names
$color-light : #fff; $white : #fff !default;
$color-dark : #000; $gray-100 : #f8f9fa !default;
$color-gray1 : #333; $gray-200 : #e7e9ed !default;
$color-gray2 : #454d5d; $gray-300 : #dee2e6 !default;
$color-gray3 : #727e96; $gray-400 : #ced4da !default;
$color-gray4 : #acb3c2; $gray-500 : #acb3c2 !default;
$color-gray5 : #e7e9ed; $gray-600 : #727e96 !default;
$gray-700 : #454d5d !default;
$gray-800 : #333 !default;
$gray-900 : #212529 !default;
$black : #000 !default;
$color-brand : #6FA939; $blue-300 : #5BC0DE !default;
$color-primary : #0275D8; $blue-500 : #0275D8 !default;
$color-success : #5CB85C; $green-500 : #5CB85C !default;
$color-info : #5BC0DE; $orange-500 : #F0AD4E !default;
$color-warning : #F0AD4E; $red-500 : #D9534F !default;
$color-danger : #D9534F;
$color-inverse : #292B2C; // semantic color scheme
$color-brand : $green-500;
$color-primary : $blue-500;
$color-success : $green-500;
$color-info : $blue-300;
$color-warning : $orange-500;
$color-danger : $red-500;
$color-inverse : $gray-800;
$color-ghost : transparent; $color-ghost : transparent;
$color-muted : #F7F7F7; $color-muted : $gray-200;
// colors used in project $color-base : $black;
$color-base : $color-dark; $background-base : $white;
$background-base : $color-light; $link-color : $gray-800;
$link-color : $color-gray1; $link-color-hover: $black;
$link-color-hover: $color-dark; $forms-color : $gray-800;
$forms-color : $color-gray3;
// quotes // component: quotes
$quote-color : $color-gray5; $quote-color : $gray-200;
// arrows // component: arrows
$arrow-color : $color-dark; $arrow-color : $black;
// checkboxes, radios // component: checkboxes, radios
$checkbox-color : $color-gray3; $checkbox-color : $gray-800;
$checkbox-size: 2rem; $checkbox-size: 2rem;
$checkbox-border-radius: 3em; $checkbox-border-radius: 3em;
// tables // component: tables
$table-border : $color-gray4; $table-border : $gray-500;
$table-caption-color : $color-gray3; $table-caption-color : $gray-800;
$table-head-color : $color-base; $table-head-color : $color-base;
$table-background : transparent; $table-background : transparent;
$table-head-background : transparent; $table-head-background : transparent;
// buttons, badges, alerts color variants list // component: buttons, badges, alerts color variants list
// name - background-color - color - border // name - background-color - color - border
$variants-list: ( $variants-list: (
(primary, $color-primary, $color-light, none), (primary, $color-primary, $white, none),
(success, $color-success, $color-light, none), (success, $color-success, $white, none),
(info, $color-info, $color-light, none), (info, $color-info, $white, none),
(warning, $color-warning, $color-light, none), (warning, $color-warning, $white, none),
(danger, $color-danger, $color-light, none), (danger, $color-danger, $white, none),
(inverse, $color-inverse, $color-light, none), (inverse, $color-inverse, $white, none),
(ghost, $color-ghost, $color-light, 0 0 0 1px $color-light inset) (ghost, $color-ghost, $white, 0 0 0 1px $white inset)
); );
// tabs // component: tabs
$tabs-border : $color-gray5; $tabs-border : $gray-200;
$tabs-active-border : $color-gray3; $tabs-active-border : $gray-800;
$tabs-color : $color-base; $tabs-color : $color-base;
$tabs-active-color : $color-gray3; $tabs-active-color : $gray-800;
$tabs-background : transparent; $tabs-background : transparent;
$tabs-active-background : transparent; $tabs-active-background : transparent;
$tabs-border-radius : 0; $tabs-border-radius : 0;
// nav burger button // component: nav burger button
$burger-color : $color-gray1; $burger-color : $gray-800;
$burger-background : transparent; $burger-background : transparent;
$burger-hover-background : transparent; $burger-hover-background : transparent;
$burger-size : 2.6rem; $burger-size : 2.6rem;
@ -99,24 +109,24 @@ $burger-weight : 5px; // size of stripes
$burger-padding : 0; $burger-padding : 0;
// spacings (choose unit you prefer) // spacings (choose unit you prefer)
$tiny-value : .5rem ; // tiny value for margins / paddings $tiny-value : .5rem !default; // tiny value for margins / paddings
$tiny-plus-value : .7rem ; // tiny+ value for margins / paddings $tiny-plus-value : .7rem !default ; // tiny+ value for margins / paddings
$small-value : 1rem ; // small value for margins / paddings $small-value : 1rem !default ; // small value for margins / paddings
$small-plus-value : 1.5rem ; // small+ value for margins / paddings $small-plus-value : 1.5rem !default ; // small+ value for margins / paddings
$medium-value : 2rem ; // medium value for margins / paddings $medium-value : 2rem !default ; // medium value for margins / paddings
$medium-plus-value : 3rem ; // medium+ value for margins / paddings $medium-plus-value : 3rem !default ; // medium+ value for margins / paddings
$large-value : 4rem ; // large value for margins / paddings $large-value : 4rem !default ; // large value for margins / paddings
$large-plus-value : 6rem ; // large value for margins / paddings $large-plus-value : 6rem !default ; // large value for margins / paddings
$extra-large-value : 8rem ; // extra large value for margins / paddings $extra-large-value : 8rem !default ; // extra large value for margins / paddings
$extra-large-plus-value : 12rem ; // extra large value for margins / paddings $extra-large-plus-value : 12rem !default ; // extra large value for margins / paddings
$ultra-large-value : 16rem ; // ultra large value for margins / paddings $ultra-large-value : 16rem !default ; // ultra large value for margins / paddings
$ultra-large-plus-value : 20rem ; // ultra large value for margins / paddings $ultra-large-plus-value : 20rem !default ; // ultra large value for margins / paddings
// grid gutters (for .has-gutter-* classes) // grid gutters (for .has-gutter-* classes)
$grid-gutters: ( '': 1rem, '-l': 2rem, '-xl': 4rem ); $grid-gutters: ( '': 1rem, '-l': 2rem, '-xl': 4rem );
// global border-radius // global border-radius
$border-radius: 0; $border-radius: 0 !default;
// Responsive breakpoints variables // Responsive breakpoints variables
// Warning : you should use your own values, regardless of the devices // Warning : you should use your own values, regardless of the devices

2
sass/_library/_utilities.scss
View File

@ -42,7 +42,7 @@ ul {
} }
.color--inverse { .color--inverse {
color: $color-light; color: $white;
} }
/* Width Helpers */ /* Width Helpers */

2
sass/components/_forms.scss
View File

@ -56,7 +56,7 @@ textarea {
[type="submit"] { [type="submit"] {
background-color: $forms-color; background-color: $forms-color;
color: $color-light; color: $white;
cursor: pointer; cursor: pointer;
} }

2
sass/components/_tables.scss
View File

@ -19,7 +19,7 @@ table,
&--zebra { &--zebra {
& tbody tr:nth-child(odd) { & tbody tr:nth-child(odd) {
background: $color-gray5; background: $gray-200;
} }
} }