Merge pull request #28 from zgoda/sass_division

Sass division

scss/components/_accordion.scss

@@ -6,7 +6,7 @@
 details {
   display: block;
   margin-bottom: var(--spacing);
-  padding-bottom: calc(var(--spacing) / 2);
+  padding-bottom: calc(var(--spacing) * 0.5);
   border-bottom: var(--border-width) solid var(--accordion-border-color);
 
   summary {
@@ -57,7 +57,7 @@ details {
     }
 
     ~ * {
-      margin-top: calc(var(--spacing) / 2);
+      margin-top: calc(var(--spacing) * 0.5);
 
       ~ * {
         margin-top: 0;
@@ -69,7 +69,7 @@ details {
   &[open] {
 
     > summary {
-      margin-bottom: calc(var(--spacing) / 4);
+      margin-bottom: calc(var(--spacing) * 0.25);
 
       &:not(:focus) {
         color: var(--accordion-open-summary-color);

scss/components/_card.scss

@@ -1,3 +1,5 @@
+@use "sass:math";
+
 /**
  * Card (<article>)
  */
@@ -15,7 +17,7 @@ article {
   > pre {
     margin-right: calc(var(--block-spacing-horizontal) * -1);
     margin-left: calc(var(--block-spacing-horizontal) * -1);
-    padding: calc(var(--block-spacing-vertical) / 1.5) var(--block-spacing-horizontal);
+    padding: calc(math.div(var(--block-spacing-vertical), 1.5)) var(--block-spacing-horizontal);
     background-color: var(--card-sectionning-background-color);
   }
 

scss/components/_nav.scss

@@ -29,7 +29,7 @@ nav {
   li {
     display: inline-block;
     margin: 0;
-    padding: var(--spacing) calc(var(--spacing) / 2);
+    padding: var(--spacing) calc(var(--spacing) * 0.5);
 
     // HACK: Input & Button inside Nav
     > *,
@@ -41,7 +41,7 @@ nav {
   a {
     display: block;
     margin: calc(var(--spacing) * -1) calc(var(--spacing) * -0.5);
-    padding: var(--spacing) calc(var(--spacing) / 2);
+    padding: var(--spacing) calc(var(--spacing) * 0.5);
     border-radius: var(--border-radius);
     text-decoration: none;
 
@@ -64,11 +64,11 @@ aside {
   }
 
   li {
-    padding: calc(var(--spacing) / 2);
+    padding: calc(var(--spacing) * 0.5);
 
     a {
       margin: calc(var(--spacing) * -0.5);
-      padding: calc(var(--spacing) / 2);
+      padding: calc(var(--spacing) * 0.5);
     }
   }
 }

scss/components/_progress.scss

@@ -30,7 +30,7 @@ progress {
   display: inline-block;
   width: 100%;
   height: .5rem;
-  margin-bottom: calc(var(--spacing) / 2);
+  margin-bottom: calc(var(--spacing) * 0.5);
   overflow: hidden;
 
   // Remove Firefox and Opera border

scss/content/_form-alt-input-types.scss

@@ -18,12 +18,12 @@
   // Swatch
   &::-webkit-color-swatch {
     border: none;
-    border-radius: calc(var(--border-radius) / 2);
+    border-radius: calc(var(--border-radius) * 0.5);
   }
 
   &::-moz-color-swatch {
     border: none;
-    border-radius: calc(var(--border-radius) / 2);
+    border-radius: calc(var(--border-radius) * 0.5);
   }
 }
 
@@ -51,7 +51,7 @@
 // File
 [type="file"] {
   --color: var(--muted-color);
-  padding: calc(var(--form-element-spacing-vertical)/2) 0;
+  padding: calc(var(--form-element-spacing-vertical) * 0.5) 0;
   border: none;
   border-radius: 0;
   background: none;
@@ -61,7 +61,7 @@
     --border-color: var(--secondary);
     --color: var(--secondary-inverse);
     margin-right: calc(var(--spacing) / 2);
-    padding: calc(var(--form-element-spacing-vertical) / 2) calc(var(--form-element-spacing-horizontal) / 2);
+    padding: calc(var(--form-element-spacing-vertical) * 0.5) calc(var(--form-element-spacing-horizontal) * 0.5);
     border: var(--border-width) solid var(--border-color);
     border-radius: var(--border-radius);
     outline: none;
@@ -162,7 +162,7 @@
     -webkit-appearance: none;
     width: $height-thumb;
     height: $height-thumb;
-    margin-top: #{(-($height-thumb/2) + ($height-track/2))};
+    margin-top: #{(-($height-thumb * 0.5) + ($height-track * 0.5))};
     border: $border-thumb solid var(--range-thumb-border-color);
     border-radius: 50%;
     background-color: var(--range-thumb-color);
@@ -179,7 +179,7 @@
     -webkit-appearance: none;
     width: $height-thumb;
     height: $height-thumb;
-    margin-top: #{(-($height-thumb/2) + ($height-track/2))};
+    margin-top: #{(-($height-thumb * 0.5) + ($height-track * 0.5))};
     border: $border-thumb solid var(--range-thumb-border-color);
     border-radius: 50%;
     background-color: var(--range-thumb-color);
@@ -196,7 +196,7 @@
     -webkit-appearance: none;
     width: $height-thumb;
     height: $height-thumb;
-    margin-top: #{(-($height-thumb/2) + ($height-track/2))};
+    margin-top: #{(-($height-thumb * 0.5) + ($height-track * 0.5))};
     border: $border-thumb solid var(--range-thumb-border-color);
     border-radius: 50%;
     background-color: var(--range-thumb-color);

scss/content/_form-checkbox-radio.scss

@@ -112,7 +112,7 @@
 
     &::before {
       margin-right: 0;
-      margin-left: calc(#{$switch-width / 2} - var(--border-width));
+      margin-left: calc(#{$switch-width * 0.5} - var(--border-width));
     }
   }
 }

scss/content/_form.scss

@@ -131,7 +131,7 @@ fieldset {
 label,
 fieldset legend {
   display: block;
-  margin-bottom: calc(var(--spacing) / 4);
+  margin-bottom: calc(var(--spacing) * 0.25);
   vertical-align: middle;
 }
 
@@ -315,6 +315,6 @@ label {
   & > input,
   & > select,
   & > textarea {
-    margin-top: calc(var(--spacing) / 4);
+    margin-top: calc(var(--spacing) * 0.25);
   }
 }

scss/content/_typography.scss

@@ -218,7 +218,7 @@ ol {
   padding-left: var(--spacing);
 
   li {
-    margin-bottom: calc(var(--typography-spacing-vertical) / 4);
+    margin-bottom: calc(var(--typography-spacing-vertical) * 0.25);
   }
 }
 
@@ -242,7 +242,7 @@ blockquote {
   border-left: .25rem solid var(--blockquote-border-color);
 
   footer {
-    margin-top: calc(var(--typography-spacing-vertical) / 2);
+    margin-top: calc(var(--typography-spacing-vertical) * 0.5);
     color: var(--blockquote-footer-color);
   }
 }

scss/layout/_scroller.scss

@@ -10,7 +10,7 @@ figure {
   overflow-x: auto;
 
   figcaption {
-    padding: calc(var(--spacing) / 2) 0;
+    padding: calc(var(--spacing) * 0.5) 0;
     color: var(--muted-color);
   }
 }

scss/utilities/_loading.scss

@@ -27,7 +27,7 @@
 
   &:not(:empty) {
     &::before {
-      margin-right: calc(var(--spacing) / 2);
+      margin-right: calc(var(--spacing) * 0.5);
     }
   }