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

renommage des variables d'espacement ($tiny-value -> $spacer-tiny)

This commit is contained in:
Raphael Goetter 2017-11-02 16:07:27 +01:00
parent 3003f4a62f
commit 21a5996ee3
11 changed files with 60 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
changelog.md
View File

@ -7,6 +7,7 @@
- regroupement des styles des tableaux - regroupement des styles des tableaux
- renommage des variables couleur de projets - renommage des variables couleur de projets
- renommage des variables de composants - renommage des variables de composants
- renommage des variables d'espacement (`$tiny-value` -> `$spacer-tiny`)
- automatisation des classes utilitaires via Sass - automatisation des classes utilitaires via Sass
- suppression du namespace "kna-" - suppression du namespace "kna-"
- refonte : - refonte :

24
sass/_config/_variables.scss
View File

@ -84,18 +84,18 @@ $grid-gutters: (
) !default; ) !default;
// spacings // spacings
$tiny-value : .5rem !default; $spacer-tiny : .5rem !default;
$tiny-plus-value : .7rem !default; $spacer-tiny-plus : .7rem !default;
$small-value : 1rem !default; $spacer-small : 1rem !default;
$small-plus-value : 1.5rem !default; $spacer-small-plus : 1.5rem !default;
$medium-value : 2rem !default; $spacer-medium : 2rem !default;
$medium-plus-value : 3rem !default; $spacer-medium-plus : 3rem !default;
$large-value : 4rem !default; $spacer-large : 4rem !default;
$large-plus-value : 6rem !default; $spacer-large-plus : 6rem !default;
$extra-large-value : 8rem !default; $spacer-extra-large : 8rem !default;
$extra-large-plus-value : 12rem !default; $spacer-extra-large-plus : 12rem !default;
$ultra-large-value : 16rem !default; $spacer-ultra-large : 16rem !default;
$ultra-large-plus-value : 20rem !default; $spacer-ultra-large-plus : 20rem !default;
// z-indexes // z-indexes
$zindex-navigation: 1000 !default; $zindex-navigation: 1000 !default;

6
sass/_library/_layout.scss
View File

@ -56,7 +56,7 @@
} }
img.fl { img.fl {
margin-right: $small-value; margin-right: $spacer-small;
} }
.fr { .fr {
@ -64,12 +64,12 @@ img.fl {
} }
img.fr { img.fr {
margin-left: $small-value; margin-left: $spacer-small;
} }
img.fl, img.fl,
img.fr { img.fr {
margin-bottom: $tiny-value; margin-bottom: $spacer-tiny;
} }
/* inline-block */ /* inline-block */

60
sass/_library/_utilities.scss
View File

@ -107,27 +107,27 @@ $i: 1000;
} }
.mas { .mas {
margin: $small-value; margin: $spacer-small;
} }
.mam { .mam {
margin: $medium-value; margin: $spacer-medium;
} }
.mal { .mal {
margin: $large-value; margin: $spacer-large;
} }
.pas { .pas {
padding: $small-value; padding: $spacer-small;
} }
.pam { .pam {
padding: $medium-value; padding: $spacer-medium;
} }
.pal { .pal {
padding: $large-value; padding: $spacer-large;
} }
.mtn, .mtn,
@ -136,15 +136,15 @@ $i: 1000;
} }
.mts { .mts {
margin-top: $small-value; margin-top: $spacer-small;
} }
.mtm { .mtm {
margin-top: $medium-value; margin-top: $spacer-medium;
} }
.mtl { .mtl {
margin-top: $large-value; margin-top: $spacer-large;
} }
.mrn, .mrn,
@ -153,15 +153,15 @@ $i: 1000;
} }
.mrs { .mrs {
margin-right: $small-value; margin-right: $spacer-small;
} }
.mrm { .mrm {
margin-right: $medium-value; margin-right: $spacer-medium;
} }
.mrl { .mrl {
margin-right: $large-value; margin-right: $spacer-large;
} }
.mbn, .mbn,
@ -170,15 +170,15 @@ $i: 1000;
} }
.mbs { .mbs {
margin-bottom: $small-value; margin-bottom: $spacer-small;
} }
.mbm { .mbm {
margin-bottom: $medium-value; margin-bottom: $spacer-medium;
} }
.mbl { .mbl {
margin-bottom: $large-value; margin-bottom: $spacer-large;
} }
.mln, .mln,
@ -187,15 +187,15 @@ $i: 1000;
} }
.mls { .mls {
margin-left: $small-value; margin-left: $spacer-small;
} }
.mlm { .mlm {
margin-left: $medium-value; margin-left: $spacer-medium;
} }
.mll { .mll {
margin-left: $large-value; margin-left: $spacer-large;
} }
.mauto { .mauto {
@ -224,15 +224,15 @@ $i: 1000;
} }
.pts { .pts {
padding-top: $small-value; padding-top: $spacer-small;
} }
.ptm { .ptm {
padding-top: $medium-value; padding-top: $spacer-medium;
} }
.ptl { .ptl {
padding-top: $large-value; padding-top: $spacer-large;
} }
.prn, .prn,
@ -241,15 +241,15 @@ $i: 1000;
} }
.prs { .prs {
padding-right: $small-value; padding-right: $spacer-small;
} }
.prm { .prm {
padding-right: $medium-value; padding-right: $spacer-medium;
} }
.prl { .prl {
padding-right: $large-value; padding-right: $spacer-large;
} }
.pbn, .pbn,
@ -258,15 +258,15 @@ $i: 1000;
} }
.pbs { .pbs {
padding-bottom: $small-value; padding-bottom: $spacer-small;
} }
.pbm { .pbm {
padding-bottom: $medium-value; padding-bottom: $spacer-medium;
} }
.pbl { .pbl {
padding-bottom: $large-value; padding-bottom: $spacer-large;
} }
.pln, .pln,
@ -275,13 +275,13 @@ $i: 1000;
} }
.pls { .pls {
padding-left: $small-value; padding-left: $spacer-small;
} }
.plm { .plm {
padding-left: $medium-value; padding-left: $spacer-medium;
} }
.pll { .pll {
padding-left: $large-value; padding-left: $spacer-large;
} }

2
sass/components/_alerts.scss
View File

@ -4,7 +4,7 @@
/* use .alert-- classes for variants */ /* use .alert-- classes for variants */
.alert { .alert {
padding: $small-value $small-value; padding: $spacer-small $spacer-small;
margin-top: 0.75em; margin-top: 0.75em;
margin-bottom: 0; margin-bottom: 0;
color: $color-base; color: $color-base;

2
sass/components/_badges.scss
View File

@ -5,7 +5,7 @@
.badge { .badge {
display: inline-block; display: inline-block;
padding: $tiny-value; padding: $spacer-tiny;
border-radius: 50%; border-radius: 50%;
color: $color-base; color: $color-base;
background-color: $color-muted; background-color: $color-muted;

6
sass/components/_buttons.scss
View File

@ -6,7 +6,7 @@
%btn { %btn {
display: inline-block; display: inline-block;
padding: $small-value $small-plus-value; padding: $spacer-small $spacer-small-plus;
cursor: pointer; cursor: pointer;
user-select: none; user-select: none;
transition: 0.25s; transition: 0.25s;
@ -57,12 +57,12 @@ button {
.btn, .btn,
.button { .button {
&--small { &--small {
padding: $tiny-plus-value $small-value; padding: $spacer-tiny-plus $spacer-small;
font-size: .8em; font-size: .8em;
} }
&--big { &--big {
padding: $small-plus-value $medium-value; padding: $spacer-small-plus $spacer-medium;
font-size: 1.4em; font-size: 1.4em;
} }

6
sass/components/_forms.scss
View File

@ -10,10 +10,10 @@ fieldset {
} }
fieldset { fieldset {
padding: $medium-value; padding: $spacer-medium;
& legend { & legend {
padding: 0 $tiny-value; padding: 0 $spacer-tiny;
border: 0; border: 0;
white-space: normal; white-space: normal;
} }
@ -47,7 +47,7 @@ textarea {
box-shadow: 0 0 0 1px $forms-color inset; box-shadow: 0 0 0 1px $forms-color inset;
color: $color-base; color: $color-base;
vertical-align: middle; vertical-align: middle;
padding: $tiny-value $small-value; padding: $spacer-tiny $spacer-small;
margin: 0; margin: 0;
transition: 0.25s; transition: 0.25s;
transition-property: box-shadow, background-color, color, border; transition-property: box-shadow, background-color, color, border;

6
sass/components/_tables.scss
View File

@ -9,7 +9,7 @@ table,
table-layout: fixed; table-layout: fixed;
border-collapse: collapse; border-collapse: collapse;
vertical-align: top; vertical-align: top;
margin-bottom: $medium-value; margin-bottom: $spacer-medium;
} }
.table { .table {
@ -25,7 +25,7 @@ table,
& caption { & caption {
caption-side: bottom; caption-side: bottom;
padding: $small-value; padding: $spacer-small;
color: $table-caption-color; color: $table-caption-color;
font-style: italic; font-style: italic;
text-align: right; text-align: right;
@ -34,7 +34,7 @@ table,
& td, & td,
& th { & th {
padding: 0.3rem 0.6rem; padding: 0.3rem 0.6rem;
min-width: $medium-value; min-width: $spacer-medium;
vertical-align: top; vertical-align: top;
border: 1px $table-border dotted; border: 1px $table-border dotted;
text-align: left; text-align: left;

4
sass/components/_tabs.scss
View File

@ -11,7 +11,7 @@
&-link { &-link {
display: block; display: block;
margin-bottom: -2px; margin-bottom: -2px;
padding: $tiny-value $medium-plus-value; padding: $spacer-tiny $spacer-medium-plus;
border-bottom: 4px solid transparent; border-bottom: 4px solid transparent;
color: $tabs-color; color: $tabs-color;
background: $tabs-background; background: $tabs-background;
@ -40,7 +40,7 @@
} }
.tabs-content-item { .tabs-content-item {
padding-top: $small-value; padding-top: $spacer-small;
&[aria-hidden="true"] { &[aria-hidden="true"] {
visibility: hidden; visibility: hidden;

2
sass/components/_tags.scss
View File

@ -5,7 +5,7 @@
.tag { .tag {
display: inline-block; display: inline-block;
padding: 3px $tiny-value; padding: 3px $spacer-tiny;
vertical-align: baseline; vertical-align: baseline;
white-space: nowrap; white-space: nowrap;
color: $color-base; color: $color-base;