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

refonte des variables, première couche

Browse source
This commit is contained in:
Raphael Goetter 2017-10-17 17:06:15 +02:00
parent 1a05e71249
commit d23ef90a0c
9 changed files with 100 additions and 187 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
changelog.md
View file

@ -44,7 +44,7 @@
- application de `$link-color-hover` uniquement si différent de `$link-color` - application de `$link-color-hover` uniquement si différent de `$link-color`
# changelog v6.0.7 (7 décembre 2016) # changelog v6.0.7 (7 décembre 2016)
- application de `$font-stack-headings` uniquement si différent de `$font-stack-common` - application de `$font-family-headings` uniquement si différent de `$font-stack-base`
# changelog v6.0.6 (2 décembre 2016) # changelog v6.0.6 (2 décembre 2016)
- Grillade : redéfinition du périmètre de `-small` : passe de `(min-width: ($tiny + 1)) and (max-width: $small)` à `(min-width: ($tiny + 1)) and (max-width: $medium)` (de 544px à 991px par défaut) - Grillade : redéfinition du périmètre de `-small` : passe de `(min-width: ($tiny + 1)) and (max-width: $small)` à `(min-width: ($tiny + 1)) and (max-width: $medium)` (de 544px à 991px par défaut)

104
css/knacss-unminified.css
View file

@ -492,97 +492,55 @@ html {
} }
body { body {
font-size: 1.4rem;
background-color: #fff;
color: #000;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
line-height: 1.3;
}
@media (min-width: 480px) {
body {
font-size: 1.6rem; font-size: 1.6rem;
} background-color: #fff;
} color: #212529;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
@media (min-width: 480px) {
body {
line-height: 1.5; line-height: 1.5;
}
} }
/* Links */ /* Links */
a { a {
color: #333; color: #333;
text-decoration: none;
}
a:focus, a:hover, a:active {
color: #0d0d0d;
text-decoration: underline;
} }
/* Headings */ /* Headings */
h1, .h1-like { h1, .h1-like {
font-size: 2.8rem;
font-family: sans-serif;
font-weight: bold;
}
@media (min-width: 480px) {
h1, .h1-like {
font-size: 3.2rem; font-size: 3.2rem;
} font-family: sans-serif;
font-weight: 500;
} }
h2, .h2-like { h2, .h2-like {
font-size: 2.4rem;
font-family: sans-serif;
font-weight: bold;
}
@media (min-width: 480px) {
h2, .h2-like {
font-size: 2.8rem; font-size: 2.8rem;
} font-family: sans-serif;
font-weight: 500;
} }
h3, .h3-like { h3, .h3-like {
font-size: 2rem;
font-weight: bold;
}
@media (min-width: 480px) {
h3, .h3-like {
font-size: 2.4rem; font-size: 2.4rem;
} font-weight: 500;
} }
h4, .h4-like { h4, .h4-like {
font-size: 1.8rem;
font-weight: bold;
}
@media (min-width: 480px) {
h4, .h4-like {
font-size: 2rem; font-size: 2rem;
} font-weight: 500;
} }
h5, .h5-like { h5, .h5-like {
font-size: 1.6rem;
font-weight: bold;
}
@media (min-width: 480px) {
h5, .h5-like {
font-size: 1.8rem; font-size: 1.8rem;
} font-weight: 500;
} }
h6, .h6-like { h6, .h6-like {
font-size: 1.4rem;
font-weight: bold;
}
@media (min-width: 480px) {
h6, .h6-like {
font-size: 1.6rem; font-size: 1.6rem;
} font-weight: 500;
} }
/* Vertical rythm for blocks */ /* Vertical rythm for blocks */
@ -602,7 +560,7 @@ details,
figure { figure {
margin-top: 0.75em; margin-top: 0.75em;
margin-bottom: 0; margin-bottom: 0;
line-height: 1.3; line-height: 1.5;
} }
/* Avoid top margins on first content element */ /* Avoid top margins on first content element */
@ -1880,7 +1838,7 @@ table,
} }
.table thead { .table thead {
color: #000; color: #212529;
background: transparent; background: transparent;
} }
@ -1935,7 +1893,7 @@ textarea {
border: 0; border: 0;
-webkit-box-shadow: 0 0 0 1px #333 inset; -webkit-box-shadow: 0 0 0 1px #333 inset;
box-shadow: 0 0 0 1px #333 inset; box-shadow: 0 0 0 1px #333 inset;
color: #000; color: #212529;
vertical-align: middle; vertical-align: middle;
padding: 0.5rem 1rem; padding: 0.5rem 1rem;
margin: 0; margin: 0;
@ -2033,7 +1991,7 @@ button, .btn--primary,
vertical-align: middle; vertical-align: middle;
white-space: nowrap; white-space: nowrap;
text-decoration: none; text-decoration: none;
color: #000; color: #212529;
border: none; border: none;
border-radius: 0; border-radius: 0;
background-color: #e7e9ed; background-color: #e7e9ed;
@ -2394,7 +2352,7 @@ button:focus {
margin-bottom: -2px; margin-bottom: -2px;
padding: 0.5rem 3rem; padding: 0.5rem 3rem;
border-bottom: 4px solid transparent; border-bottom: 4px solid transparent;
color: #000; color: #212529;
background: transparent; background: transparent;
text-decoration: none; text-decoration: none;
border-radius: 0 0 0 0; border-radius: 0 0 0 0;
@ -2480,7 +2438,7 @@ button:focus {
padding: 3px 0.5rem; padding: 3px 0.5rem;
vertical-align: baseline; vertical-align: baseline;
white-space: nowrap; white-space: nowrap;
color: #000; color: #212529;
border-radius: 0; border-radius: 0;
background-color: #e7e9ed; background-color: #e7e9ed;
line-height: 1; line-height: 1;
@ -2536,11 +2494,11 @@ button:focus {
} }
.tag--small { .tag--small {
font-size: 1rem; font-size: 1.2rem;
} }
.tag--big { .tag--big {
font-size: 1.8rem; font-size: 2rem;
} }
.tag--block { .tag--block {
@ -2565,7 +2523,7 @@ button:focus {
display: inline-block; display: inline-block;
padding: 0.5rem; padding: 0.5rem;
border-radius: 50%; border-radius: 50%;
color: #000; color: #212529;
background-color: #e7e9ed; background-color: #e7e9ed;
line-height: 1; line-height: 1;
} }
@ -2613,11 +2571,11 @@ button:focus {
} }
.badge--small { .badge--small {
font-size: 1rem; font-size: 1.2rem;
} }
.badge--big { .badge--big {
font-size: 1.8rem; font-size: 2rem;
} }
.badge.disabled, .disabled.badge--primary, .disabled.badge--success, .disabled.badge--info, .disabled.badge--warning, .disabled.badge--danger, .disabled.badge--inverse, .disabled.badge--ghost, .badge--disabled { .badge.disabled, .disabled.badge--primary, .disabled.badge--success, .disabled.badge--info, .disabled.badge--warning, .disabled.badge--danger, .disabled.badge--inverse, .disabled.badge--ghost, .badge--disabled {
@ -2637,7 +2595,7 @@ button:focus {
padding: 1rem 1rem; padding: 1rem 1rem;
margin-top: 0.75em; margin-top: 0.75em;
margin-bottom: 0; margin-bottom: 0;
color: #000; color: #212529;
border-radius: 0; border-radius: 0;
background-color: #e7e9ed; background-color: #e7e9ed;
} }
@ -2697,11 +2655,11 @@ button:focus {
} }
.alert--small { .alert--small {
font-size: 1rem; font-size: 1.2rem;
} }
.alert--big { .alert--big {
font-size: 1.8rem; font-size: 2rem;
} }
.alert--block { .alert--block {

2
css/knacss.css
View file

File diff suppressed because one or more lines are too long

57
sass/_config/_variables.scss
View file

@ -9,33 +9,24 @@ $medium : 768px !default;
$large : 992px !default; $large : 992px !default;
$extra-large : 1200px !default; $extra-large : 1200px !default;
// tiny font sizes (mobile first) // font sizes
$base-font-size : 1.4rem; // ex. 1.4rem would be "14px" equivalent $font-size-base : 1.6rem; // ex. 1.6rem would be "16px" equivalent
$h1-size : 2.8rem; // equiv "28px" $h1-size : 3.2rem; // equiv "32px"
$h2-size : 2.4rem; // equiv "24px" $h2-size : 2.8rem; // equiv "28px"
$h3-size : 2.0rem; // equiv "20px" $h3-size : 2.4rem; // equiv "24px"
$h4-size : 1.8rem; // equiv "18px" $h4-size : 2.0rem; // equiv "20px"
$h5-size : 1.6rem; // equiv "16px" $h5-size : 1.8rem; // equiv "18px"
$h6-size : 1.4rem; // equiv "14px" $h6-size : 1.6rem; // equiv "16px"
// large font sizes // font families
$base-font-size-l : 1.6rem; // ex. 1.6rem would be "16px" equivalent $font-family-base : -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; // system font stack
$h1-size-l : 3.2rem; // equiv "32px" $font-family-headings : sans-serif; // font for h1, h2.. h6
$h2-size-l : 2.8rem; // equiv "28px" $font-family-monospace : consolas, courier, monospace; // font for code and samples
$h3-size-l : 2.4rem; // equiv "24px"
$h4-size-l : 2.0rem; // equiv "20px"
$h5-size-l : 1.8rem; // equiv "18px"
$h6-size-l : 1.6rem; // equiv "16px"
// font stacks
$font-stack-common : -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif; // system font stack
$font-stack-headings : sans-serif; // font for h1, h2.. h6
$font-stack-monospace : consolas, courier, monospace; // font for code and samples
// line heights // line heights
$line-height-s : 1.1; $line-height-s : 1.3;
$line-height : 1.3; $line-height-base : 1.5;
$line-height-l : 1.5; $line-height-l : 1.7;
// font weights // font weights
$weight-light : 200; $weight-light : 200;
@ -103,10 +94,14 @@ $color-inverse : $gray-800;
$color-ghost : transparent; $color-ghost : transparent;
$color-muted : $gray-200; $color-muted : $gray-200;
$color-base : $black; $color-base : $gray-900;
$background-base : $white; $background-base : $white;
$link-color : $gray-800; $link-color : $gray-800;
$link-color-hover: $black; $link-color-hover : darken($link-color, 15%);
$link-decoration : none;
$link-decoration-hover : underline;
$forms-color : $gray-800; $forms-color : $gray-800;
// component: quotes // component: quotes
@ -115,11 +110,13 @@ $quote-color : $gray-200;
// component: arrows // component: arrows
$arrow-color : $black; $arrow-color : $black;
// component: checkboxes, radios // component: checkboxes, radios, switches
$checkbox-color : $gray-800; $checkbox-color : $gray-800;
$checkbox-size: 2rem; $checkbox-size : 2rem;
$checkbox-border-radius: 4px; $checkbox-border-radius : 4px;
$switch-border-radius: 3em; $switch-color : $gray-800;
$switch-size : 2rem;
$switch-border-radius : 3em;
// component: tables // component: tables
$table-border : $gray-500; $table-border : $gray-500;

76
sass/_library/_base.scss
View file

@ -22,103 +22,61 @@ html {
} }
body { body {
font-size: $base-font-size; font-size: $font-size-base;
@if variable_exists(base-font-size-l) and $base-font-size-l != $base-font-size {
@include respond-to("tiny-up") {
font-size: $base-font-size-l;
}
}
background-color: $background-base; background-color: $background-base;
color: $color-base; color: $color-base;
font-family: $font-stack-common; font-family: $font-family-base;
line-height: $line-height; line-height: $line-height-base;
@if variable_exists(line-height-l) and $line-height-l != $line-height {
@include respond-to("tiny-up") {
line-height: $line-height-l;
}
}
} }
/* Links */ /* Links */
a { a {
color: $link-color; color: $link-color;
text-decoration: $link-decoration;
// No styling on focus/hover if there's no effect.
@if variable_exists(color-link-hover) and
( null == index( ($link-color, null, false), $link-color-hover) ) {
&:focus, &:focus,
&:hover, &:hover,
&:active { &:active {
color: $link-color-hover; color: $link-color-hover;
} text-decoration: $link-decoration-hover;
} }
} }
/* Headings */ /* Headings */
h1, .h1-like { h1, .h1-like {
font-size: $h1-size; font-size: $h1-size;
@if variable_exists(h1-size-l) and $h1-size-l != $h1-size { @if variable_exists(font-family-headings) and $font-family-headings != $font-family-base{
@include respond-to("tiny-up") { font-family: $font-family-headings;
font-size: $h1-size-l;
} }
} font-weight: $weight-medium;
@if variable_exists(font-stack-headings) and $font-stack-headings != $font-stack-common {
font-family: $font-stack-headings;
}
font-weight: bold;
} }
h2, .h2-like { h2, .h2-like {
font-size: $h2-size; font-size: $h2-size;
@if variable_exists(h2-size-l) and $h2-size-l != $h2-size { @if variable_exists(font-family-headings) and $font-family-headings != $font-family-base{
@include respond-to("tiny-up") { font-family: $font-family-headings;
font-size: $h2-size-l;
} }
} font-weight: $weight-medium;
@if variable_exists(font-stack-headings) and $font-stack-headings != $font-stack-common {
font-family: $font-stack-headings;
}
font-weight: bold;
} }
h3, .h3-like { h3, .h3-like {
font-size: $h3-size; font-size: $h3-size;
@if variable_exists(h3-size-l) and $h3-size-l != $h3-size { font-weight: $weight-medium;
@include respond-to("tiny-up") {
font-size: $h3-size-l;
}
}
font-weight: bold;
} }
h4, .h4-like { h4, .h4-like {
font-size: $h4-size; font-size: $h4-size;
@if variable_exists(h4-size-l) and $h4-size-l != $h4-size { font-weight: $weight-medium;
@include respond-to("tiny-up") {
font-size: $h4-size-l;
}
}
font-weight: bold;
} }
h5, .h5-like { h5, .h5-like {
font-size: $h5-size; font-size: $h5-size;
@if variable_exists(h5-size-l) and $h5-size-l != $h5-size { font-weight: $weight-medium;
@include respond-to("tiny-up") {
font-size: $h5-size-l;
}
}
font-weight: bold;
} }
h6, .h6-like { h6, .h6-like {
font-size: $h6-size; font-size: $h6-size;
@if variable_exists(h6-size-l) and $h6-size-l != $h6-size { font-weight: $weight-medium;
@include respond-to("tiny-up") {
font-size: $h6-size-l;
}
}
font-weight: bold;
} }
/* Vertical rythm for blocks */ /* Vertical rythm for blocks */
@ -138,7 +96,7 @@ details,
figure { figure {
margin-top: 0.75em; margin-top: 0.75em;
margin-bottom: 0; margin-bottom: 0;
line-height: $line-height; line-height: $line-height-base;
} }
/* Avoid top margins on first content element */ /* Avoid top margins on first content element */
@ -343,6 +301,6 @@ pre,
samp, samp,
kbd { kbd {
white-space: pre-wrap; white-space: pre-wrap;
font-family: $font-stack-monospace; font-family: $font-family-monospace;
line-height: normal; line-height: normal;
} }

4
sass/components/_alerts.scss
View file

@ -31,11 +31,11 @@
// alert state variants // alert state variants
.alert { .alert {
&--small { &--small {
font-size: $base-font-size - 0.4rem; font-size: $font-size-base - 0.4rem;
} }
&--big { &--big {
font-size: $base-font-size + 0.4rem; font-size: $font-size-base + 0.4rem;
} }
&--block { &--block {

4
sass/components/_badges.scss
View file

@ -32,11 +32,11 @@
// badge state variants // badge state variants
.badge { .badge {
&--small { &--small {
font-size: $base-font-size - 0.4rem; font-size: $font-size-base - 0.4rem;
} }
&--big { &--big {
font-size: $base-font-size + 0.4rem; font-size: $font-size-base + 0.4rem;
} }
&.disabled, &.disabled,

14
sass/components/_checkbox.scss
View file

@ -42,13 +42,13 @@
// switch styling // switch styling
.switch { .switch {
width: $checkbox-size *2; width: $switch-size *2;
height: $checkbox-size; height: $switch-size;
line-height: $checkbox-size; line-height: $switch-size;
padding-left: $checkbox-size /3; padding-left: $switch-size /3;
padding-right: $checkbox-size /3; padding-right: $switch-size /3;
font-size: 60%; font-size: 60%;
box-shadow: inset -#{$checkbox-size} 0 0 $checkbox-color, inset 0 0 0 1px $checkbox-color; box-shadow: inset -#{$switch-size} 0 0 $switch-color, inset 0 0 0 1px $switch-color;
transition: box-shadow .15s; transition: box-shadow .15s;
&::before, &::after { &::before, &::after {
font-weight: bold; font-weight: bold;
@ -59,7 +59,7 @@
float: right; float: right;
} }
&:checked { &:checked {
box-shadow: inset #{$checkbox-size} 0 0 $color-success, inset 0 0 0 1px $color-success; box-shadow: inset #{$switch-size} 0 0 $color-success, inset 0 0 0 1px $color-success;
&::before { &::before {
content: "✓"; content: "✓";
float: left; float: left;

4
sass/components/_tags.scss
View file

@ -28,11 +28,11 @@
// tag state variants // tag state variants
.tag { .tag {
&--small { &--small {
font-size: $base-font-size - 0.4rem; font-size: $font-size-base - 0.4rem;
} }
&--big { &--big {
font-size: $base-font-size + 0.4rem; font-size: $font-size-base + 0.4rem;
} }
&--block { &--block {