refonte des variables, première couche
This commit is contained in:
Raphael Goetter
parent
1a05e71249
commit
d23ef90a0c
|
|
@ -44,7 +44,7 @@
|
|||
- application de `$link-color-hover` uniquement si différent de `$link-color`
|
||||
|
||||
# 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)
|
||||
- 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)
|
||||
|
|
|
|||
|
|
@ -492,97 +492,55 @@ html {
|
|||
}
|
||||
|
||||
body {
|
||||
font-size: 1.4rem;
|
||||
font-size: 1.6rem;
|
||||
background-color: #fff;
|
||||
color: #000;
|
||||
color: #212529;
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 480px) {
|
||||
body {
|
||||
line-height: 1.5;
|
||||
}
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
/* Links */
|
||||
a {
|
||||
color: #333;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:focus, a:hover, a:active {
|
||||
color: #0d0d0d;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* Headings */
|
||||
h1, .h1-like {
|
||||
font-size: 2.8rem;
|
||||
font-size: 3.2rem;
|
||||
font-family: sans-serif;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
@media (min-width: 480px) {
|
||||
h1, .h1-like {
|
||||
font-size: 3.2rem;
|
||||
}
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
h2, .h2-like {
|
||||
font-size: 2.4rem;
|
||||
font-size: 2.8rem;
|
||||
font-family: sans-serif;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
@media (min-width: 480px) {
|
||||
h2, .h2-like {
|
||||
font-size: 2.8rem;
|
||||
}
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
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 {
|
||||
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 {
|
||||
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 {
|
||||
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 */
|
||||
|
|
@ -602,7 +560,7 @@ details,
|
|||
figure {
|
||||
margin-top: 0.75em;
|
||||
margin-bottom: 0;
|
||||
line-height: 1.3;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
/* Avoid top margins on first content element */
|
||||
|
|
@ -1880,7 +1838,7 @@ table,
|
|||
}
|
||||
|
||||
.table thead {
|
||||
color: #000;
|
||||
color: #212529;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
|
|
@ -1935,7 +1893,7 @@ textarea {
|
|||
border: 0;
|
||||
-webkit-box-shadow: 0 0 0 1px #333 inset;
|
||||
box-shadow: 0 0 0 1px #333 inset;
|
||||
color: #000;
|
||||
color: #212529;
|
||||
vertical-align: middle;
|
||||
padding: 0.5rem 1rem;
|
||||
margin: 0;
|
||||
|
|
@ -2033,7 +1991,7 @@ button, .btn--primary,
|
|||
vertical-align: middle;
|
||||
white-space: nowrap;
|
||||
text-decoration: none;
|
||||
color: #000;
|
||||
color: #212529;
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
background-color: #e7e9ed;
|
||||
|
|
@ -2394,7 +2352,7 @@ button:focus {
|
|||
margin-bottom: -2px;
|
||||
padding: 0.5rem 3rem;
|
||||
border-bottom: 4px solid transparent;
|
||||
color: #000;
|
||||
color: #212529;
|
||||
background: transparent;
|
||||
text-decoration: none;
|
||||
border-radius: 0 0 0 0;
|
||||
|
|
@ -2480,7 +2438,7 @@ button:focus {
|
|||
padding: 3px 0.5rem;
|
||||
vertical-align: baseline;
|
||||
white-space: nowrap;
|
||||
color: #000;
|
||||
color: #212529;
|
||||
border-radius: 0;
|
||||
background-color: #e7e9ed;
|
||||
line-height: 1;
|
||||
|
|
@ -2536,11 +2494,11 @@ button:focus {
|
|||
}
|
||||
|
||||
.tag--small {
|
||||
font-size: 1rem;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.tag--big {
|
||||
font-size: 1.8rem;
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.tag--block {
|
||||
|
|
@ -2565,7 +2523,7 @@ button:focus {
|
|||
display: inline-block;
|
||||
padding: 0.5rem;
|
||||
border-radius: 50%;
|
||||
color: #000;
|
||||
color: #212529;
|
||||
background-color: #e7e9ed;
|
||||
line-height: 1;
|
||||
}
|
||||
|
|
@ -2613,11 +2571,11 @@ button:focus {
|
|||
}
|
||||
|
||||
.badge--small {
|
||||
font-size: 1rem;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.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 {
|
||||
|
|
@ -2637,7 +2595,7 @@ button:focus {
|
|||
padding: 1rem 1rem;
|
||||
margin-top: 0.75em;
|
||||
margin-bottom: 0;
|
||||
color: #000;
|
||||
color: #212529;
|
||||
border-radius: 0;
|
||||
background-color: #e7e9ed;
|
||||
}
|
||||
|
|
@ -2697,11 +2655,11 @@ button:focus {
|
|||
}
|
||||
|
||||
.alert--small {
|
||||
font-size: 1rem;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.alert--big {
|
||||
font-size: 1.8rem;
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.alert--block {
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -9,33 +9,24 @@ $medium : 768px !default;
|
|||
$large : 992px !default;
|
||||
$extra-large : 1200px !default;
|
||||
|
||||
// tiny font sizes (mobile first)
|
||||
$base-font-size : 1.4rem; // ex. 1.4rem would be "14px" equivalent
|
||||
$h1-size : 2.8rem; // equiv "28px"
|
||||
$h2-size : 2.4rem; // equiv "24px"
|
||||
$h3-size : 2.0rem; // equiv "20px"
|
||||
$h4-size : 1.8rem; // equiv "18px"
|
||||
$h5-size : 1.6rem; // equiv "16px"
|
||||
$h6-size : 1.4rem; // equiv "14px"
|
||||
// font sizes
|
||||
$font-size-base : 1.6rem; // ex. 1.6rem would be "16px" equivalent
|
||||
$h1-size : 3.2rem; // equiv "32px"
|
||||
$h2-size : 2.8rem; // equiv "28px"
|
||||
$h3-size : 2.4rem; // equiv "24px"
|
||||
$h4-size : 2.0rem; // equiv "20px"
|
||||
$h5-size : 1.8rem; // equiv "18px"
|
||||
$h6-size : 1.6rem; // equiv "16px"
|
||||
|
||||
// large font sizes
|
||||
$base-font-size-l : 1.6rem; // ex. 1.6rem would be "16px" equivalent
|
||||
$h1-size-l : 3.2rem; // equiv "32px"
|
||||
$h2-size-l : 2.8rem; // equiv "28px"
|
||||
$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
|
||||
// font families
|
||||
$font-family-base : -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; // system font stack
|
||||
$font-family-headings : sans-serif; // font for h1, h2.. h6
|
||||
$font-family-monospace : consolas, courier, monospace; // font for code and samples
|
||||
|
||||
// line heights
|
||||
$line-height-s : 1.1;
|
||||
$line-height : 1.3;
|
||||
$line-height-l : 1.5;
|
||||
$line-height-s : 1.3;
|
||||
$line-height-base : 1.5;
|
||||
$line-height-l : 1.7;
|
||||
|
||||
// font weights
|
||||
$weight-light : 200;
|
||||
|
|
@ -103,10 +94,14 @@ $color-inverse : $gray-800;
|
|||
$color-ghost : transparent;
|
||||
$color-muted : $gray-200;
|
||||
|
||||
$color-base : $black;
|
||||
$color-base : $gray-900;
|
||||
$background-base : $white;
|
||||
$link-color : $gray-800;
|
||||
$link-color-hover: $black;
|
||||
|
||||
$link-color : $gray-800;
|
||||
$link-color-hover : darken($link-color, 15%);
|
||||
$link-decoration : none;
|
||||
$link-decoration-hover : underline;
|
||||
|
||||
$forms-color : $gray-800;
|
||||
|
||||
// component: quotes
|
||||
|
|
@ -115,11 +110,13 @@ $quote-color : $gray-200;
|
|||
// component: arrows
|
||||
$arrow-color : $black;
|
||||
|
||||
// component: checkboxes, radios
|
||||
$checkbox-color : $gray-800;
|
||||
$checkbox-size: 2rem;
|
||||
$checkbox-border-radius: 4px;
|
||||
$switch-border-radius: 3em;
|
||||
// component: checkboxes, radios, switches
|
||||
$checkbox-color : $gray-800;
|
||||
$checkbox-size : 2rem;
|
||||
$checkbox-border-radius : 4px;
|
||||
$switch-color : $gray-800;
|
||||
$switch-size : 2rem;
|
||||
$switch-border-radius : 3em;
|
||||
|
||||
// component: tables
|
||||
$table-border : $gray-500;
|
||||
|
|
|
|||
|
|
@ -22,103 +22,61 @@ html {
|
|||
}
|
||||
|
||||
body {
|
||||
font-size: $base-font-size;
|
||||
@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;
|
||||
}
|
||||
}
|
||||
font-size: $font-size-base;
|
||||
background-color: $background-base;
|
||||
color: $color-base;
|
||||
font-family: $font-stack-common;
|
||||
line-height: $line-height;
|
||||
@if variable_exists(line-height-l) and $line-height-l != $line-height {
|
||||
@include respond-to("tiny-up") {
|
||||
line-height: $line-height-l;
|
||||
}
|
||||
}
|
||||
font-family: $font-family-base;
|
||||
line-height: $line-height-base;
|
||||
}
|
||||
|
||||
/* Links */
|
||||
a {
|
||||
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,
|
||||
&:hover,
|
||||
&:active {
|
||||
color: $link-color-hover;
|
||||
}
|
||||
&:focus,
|
||||
&:hover,
|
||||
&:active {
|
||||
color: $link-color-hover;
|
||||
text-decoration: $link-decoration-hover;
|
||||
}
|
||||
}
|
||||
|
||||
/* Headings */
|
||||
h1, .h1-like {
|
||||
font-size: $h1-size;
|
||||
@if variable_exists(h1-size-l) and $h1-size-l != $h1-size {
|
||||
@include respond-to("tiny-up") {
|
||||
font-size: $h1-size-l;
|
||||
}
|
||||
@if variable_exists(font-family-headings) and $font-family-headings != $font-family-base{
|
||||
font-family: $font-family-headings;
|
||||
}
|
||||
@if variable_exists(font-stack-headings) and $font-stack-headings != $font-stack-common {
|
||||
font-family: $font-stack-headings;
|
||||
}
|
||||
font-weight: bold;
|
||||
font-weight: $weight-medium;
|
||||
}
|
||||
|
||||
h2, .h2-like {
|
||||
font-size: $h2-size;
|
||||
@if variable_exists(h2-size-l) and $h2-size-l != $h2-size {
|
||||
@include respond-to("tiny-up") {
|
||||
font-size: $h2-size-l;
|
||||
}
|
||||
@if variable_exists(font-family-headings) and $font-family-headings != $font-family-base{
|
||||
font-family: $font-family-headings;
|
||||
}
|
||||
@if variable_exists(font-stack-headings) and $font-stack-headings != $font-stack-common {
|
||||
font-family: $font-stack-headings;
|
||||
}
|
||||
font-weight: bold;
|
||||
font-weight: $weight-medium;
|
||||
}
|
||||
|
||||
h3, .h3-like {
|
||||
font-size: $h3-size;
|
||||
@if variable_exists(h3-size-l) and $h3-size-l != $h3-size {
|
||||
@include respond-to("tiny-up") {
|
||||
font-size: $h3-size-l;
|
||||
}
|
||||
}
|
||||
font-weight: bold;
|
||||
font-weight: $weight-medium;
|
||||
}
|
||||
|
||||
h4, .h4-like {
|
||||
font-size: $h4-size;
|
||||
@if variable_exists(h4-size-l) and $h4-size-l != $h4-size {
|
||||
@include respond-to("tiny-up") {
|
||||
font-size: $h4-size-l;
|
||||
}
|
||||
}
|
||||
font-weight: bold;
|
||||
font-weight: $weight-medium;
|
||||
}
|
||||
|
||||
h5, .h5-like {
|
||||
font-size: $h5-size;
|
||||
@if variable_exists(h5-size-l) and $h5-size-l != $h5-size {
|
||||
@include respond-to("tiny-up") {
|
||||
font-size: $h5-size-l;
|
||||
}
|
||||
}
|
||||
font-weight: bold;
|
||||
font-weight: $weight-medium;
|
||||
}
|
||||
|
||||
h6, .h6-like {
|
||||
font-size: $h6-size;
|
||||
@if variable_exists(h6-size-l) and $h6-size-l != $h6-size {
|
||||
@include respond-to("tiny-up") {
|
||||
font-size: $h6-size-l;
|
||||
}
|
||||
}
|
||||
font-weight: bold;
|
||||
font-weight: $weight-medium;
|
||||
}
|
||||
|
||||
/* Vertical rythm for blocks */
|
||||
|
|
@ -138,7 +96,7 @@ details,
|
|||
figure {
|
||||
margin-top: 0.75em;
|
||||
margin-bottom: 0;
|
||||
line-height: $line-height;
|
||||
line-height: $line-height-base;
|
||||
}
|
||||
|
||||
/* Avoid top margins on first content element */
|
||||
|
|
@ -343,6 +301,6 @@ pre,
|
|||
samp,
|
||||
kbd {
|
||||
white-space: pre-wrap;
|
||||
font-family: $font-stack-monospace;
|
||||
font-family: $font-family-monospace;
|
||||
line-height: normal;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -31,11 +31,11 @@
|
|||
// alert state variants
|
||||
.alert {
|
||||
&--small {
|
||||
font-size: $base-font-size - 0.4rem;
|
||||
font-size: $font-size-base - 0.4rem;
|
||||
}
|
||||
|
||||
&--big {
|
||||
font-size: $base-font-size + 0.4rem;
|
||||
font-size: $font-size-base + 0.4rem;
|
||||
}
|
||||
|
||||
&--block {
|
||||
|
|
|
|||
|
|
@ -32,11 +32,11 @@
|
|||
// badge state variants
|
||||
.badge {
|
||||
&--small {
|
||||
font-size: $base-font-size - 0.4rem;
|
||||
font-size: $font-size-base - 0.4rem;
|
||||
}
|
||||
|
||||
&--big {
|
||||
font-size: $base-font-size + 0.4rem;
|
||||
font-size: $font-size-base + 0.4rem;
|
||||
}
|
||||
|
||||
&.disabled,
|
||||
|
|
|
|||
|
|
@ -42,13 +42,13 @@
|
|||
|
||||
// switch styling
|
||||
.switch {
|
||||
width: $checkbox-size *2;
|
||||
height: $checkbox-size;
|
||||
line-height: $checkbox-size;
|
||||
padding-left: $checkbox-size /3;
|
||||
padding-right: $checkbox-size /3;
|
||||
width: $switch-size *2;
|
||||
height: $switch-size;
|
||||
line-height: $switch-size;
|
||||
padding-left: $switch-size /3;
|
||||
padding-right: $switch-size /3;
|
||||
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;
|
||||
&::before, &::after {
|
||||
font-weight: bold;
|
||||
|
|
@ -59,7 +59,7 @@
|
|||
float: right;
|
||||
}
|
||||
&: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 {
|
||||
content: "✓";
|
||||
float: left;
|
||||
|
|
|
|||
|
|
@ -28,11 +28,11 @@
|
|||
// tag state variants
|
||||
.tag {
|
||||
&--small {
|
||||
font-size: $base-font-size - 0.4rem;
|
||||
font-size: $font-size-base - 0.4rem;
|
||||
}
|
||||
|
||||
&--big {
|
||||
font-size: $base-font-size + 0.4rem;
|
||||
font-size: $font-size-base + 0.4rem;
|
||||
}
|
||||
|
||||
&--block {
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user