diff --git a/scss/components/_accordion.scss b/scss/components/_accordion.scss index 75632b09..48487d9d 100644 --- a/scss/components/_accordion.scss +++ b/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); diff --git a/scss/components/_card.scss b/scss/components/_card.scss index 2a9aec17..d4fe4712 100644 --- a/scss/components/_card.scss +++ b/scss/components/_card.scss @@ -1,3 +1,5 @@ +@use "sass:math"; + /** * Card (
) */ @@ -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); } diff --git a/scss/components/_nav.scss b/scss/components/_nav.scss index ea6fe6a6..4c880e5c 100644 --- a/scss/components/_nav.scss +++ b/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); } } } diff --git a/scss/components/_progress.scss b/scss/components/_progress.scss index 751ce24d..121fa156 100644 --- a/scss/components/_progress.scss +++ b/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 diff --git a/scss/content/_form-alt-input-types.scss b/scss/content/_form-alt-input-types.scss index 8446c6ec..6043ebd9 100644 --- a/scss/content/_form-alt-input-types.scss +++ b/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); diff --git a/scss/content/_form-checkbox-radio.scss b/scss/content/_form-checkbox-radio.scss index 7e74a6c2..5e56915f 100644 --- a/scss/content/_form-checkbox-radio.scss +++ b/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)); } } } diff --git a/scss/content/_form.scss b/scss/content/_form.scss index ee0fb226..4956f7e9 100644 --- a/scss/content/_form.scss +++ b/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); } } diff --git a/scss/content/_typography.scss b/scss/content/_typography.scss index 73f8748c..dbda6af6 100644 --- a/scss/content/_typography.scss +++ b/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); } } diff --git a/scss/layout/_scroller.scss b/scss/layout/_scroller.scss index b3f6ef9a..cad78c6a 100644 --- a/scss/layout/_scroller.scss +++ b/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); } } diff --git a/scss/utilities/_loading.scss b/scss/utilities/_loading.scss index ba2ec171..3923c53c 100644 --- a/scss/utilities/_loading.scss +++ b/scss/utilities/_loading.scss @@ -27,7 +27,7 @@ &:not(:empty) { &::before { - margin-right: calc(var(--spacing) / 2); + margin-right: calc(var(--spacing) * 0.5); } }