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
- renommage des variables couleur de projets
- renommage des variables de composants
- renommage des variables d'espacement (`$tiny-value` -> `$spacer-tiny`)
- automatisation des classes utilitaires via Sass
- suppression du namespace "kna-"
- refonte :

24
sass/_config/_variables.scss
View File

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

6
sass/_library/_layout.scss
View File

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

60
sass/_library/_utilities.scss
View File

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

2
sass/components/_badges.scss
View File

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

6
sass/components/_buttons.scss
View File

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

6
sass/components/_forms.scss
View File

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

6
sass/components/_tables.scss
View File

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

4
sass/components/_tabs.scss
View File

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

2
sass/components/_tags.scss
View File

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