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

changelog.md

@@ -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 :

sass/_config/_variables.scss

@@ -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;

sass/_library/_layout.scss

@@ -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 */

sass/_library/_utilities.scss

@@ -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;
 }

sass/components/_alerts.scss

@@ -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;

sass/components/_badges.scss

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

sass/components/_buttons.scss

@@ -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;
   }
 

sass/components/_forms.scss

@@ -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;

sass/components/_tables.scss

@@ -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;

sass/components/_tabs.scss

@@ -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;

sass/components/_tags.scss

@@ -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;