diff --git a/.stylelintrc.json b/.stylelintrc.json index 589884aae7..045dbeff4e 100644 --- a/.stylelintrc.json +++ b/.stylelintrc.json @@ -13,7 +13,6 @@ "outline": "none" }, "function-disallowed-list": [ - "calc", "lighten", "darken" ], diff --git a/scss/_accordion.scss b/scss/_accordion.scss index 6a1a5ceb04..0707036bce 100644 --- a/scss/_accordion.scss +++ b/scss/_accordion.scss @@ -81,8 +81,8 @@ &:focus-visible { // OUDS mod z-index: $focus-visible-zindex; // Make sure the focused accordion button is displayed over its next sibling - outline-offset: add($focus-visible-outer-offset, var(--#{$prefix}accordion-border-width)); - box-shadow: 0 0 0 add(var(--#{$prefix}accordion-border-width), $focus-visible-inner-width) var(--#{$prefix}color-border-focus-inset); + outline-offset: calc($focus-visible-outer-offset + var(--#{$prefix}accordion-border-width)); + box-shadow: 0 0 0 calc(var(--#{$prefix}accordion-border-width) + $focus-visible-inner-width) var(--#{$prefix}color-border-focus-inset); // End mod } } diff --git a/scss/_alert.scss b/scss/_alert.scss index 7fb76cfbfc..2a5f5deeb7 100644 --- a/scss/_alert.scss +++ b/scss/_alert.scss @@ -118,7 +118,7 @@ .alert-icon { flex-shrink: 0; width: var(--#{$prefix}alert-icon-size); - margin: calc(-.5 * var(--#{$prefix}alert-icon-margin-y)) 0; // stylelint-disable-line function-disallowed-list + margin: calc(-.5 * var(--#{$prefix}alert-icon-margin-y)) 0; + * { margin: var(--#{$prefix}alert-icon-margin-y) 0 0; diff --git a/scss/_badges.scss b/scss/_badges.scss index 9d7f79e7cb..66612ac618 100644 --- a/scss/_badges.scss +++ b/scss/_badges.scss @@ -35,7 +35,7 @@ display: flex; flex: 1 0 0; aspect-ratio: 1/1; - font-size: calc(var(--#{$prefix}badge-size) - (2 * var(--#{$prefix}badge-count-padding-x))); // stylelint-disable-line function-disallowed-list + font-size: calc(var(--#{$prefix}badge-size) - (2 * var(--#{$prefix}badge-count-padding-x))); } .badge-status-icon { diff --git a/scss/_bullet-list.scss b/scss/_bullet-list.scss index dcbf1e54a7..d9a941f56c 100644 --- a/scss/_bullet-list.scss +++ b/scss/_bullet-list.scss @@ -3,7 +3,7 @@ --#{$prefix}bullet-list-padding-block: #{$ouds-bullet-list-space-padding-block-body-large}; --#{$prefix}bullet-list-icon-container-width: var(--#{$prefix}icon-medium-with-body-large); --#{$prefix}bullet-list-icon-size: var(--#{$prefix}icon-small-with-body-large); - --#{$prefix}bullet-list-fixed-left-padding: calc(var(--#{$prefix}bullet-list-icon-container-width) + #{$ouds-bullet-list-space-column-gap-body-large}); // stylelint-disable-line function-disallowed-list + --#{$prefix}bullet-list-fixed-left-padding: calc(var(--#{$prefix}bullet-list-icon-container-width) + #{$ouds-bullet-list-space-column-gap-body-large}); --#{$prefix}bullet-list-marker-left: #{$ouds-bullet-list-space-padding-inline-level-0}; padding-left: 0; @@ -17,7 +17,7 @@ --#{$prefix}bullet-list-padding-block: #{$ouds-bullet-list-space-padding-block-body-medium}; --#{$prefix}bullet-list-icon-container-width: var(--#{$prefix}icon-medium-with-body-medium); --#{$prefix}bullet-list-icon-size: var(--#{$prefix}icon-small-with-body-medium); - --#{$prefix}bullet-list-fixed-left-padding: calc(var(--#{$prefix}bullet-list-icon-container-width) + #{$ouds-bullet-list-space-column-gap-body-medium}); // stylelint-disable-line function-disallowed-list + --#{$prefix}bullet-list-fixed-left-padding: calc(var(--#{$prefix}bullet-list-icon-container-width) + #{$ouds-bullet-list-space-column-gap-body-medium}); @include get-font-size("body-medium"); } @@ -30,7 +30,7 @@ li { position: relative; padding: var(--#{$prefix}bullet-list-padding-block) 0; - padding-left: calc(var(--#{$prefix}bullet-list-fixed-left-padding) + #{$ouds-bullet-list-space-padding-inline-level-0}); // stylelint-disable-line function-disallowed-list + padding-left: calc(var(--#{$prefix}bullet-list-fixed-left-padding) + #{$ouds-bullet-list-space-padding-inline-level-0}); &:has(ul, ol) { padding-bottom: 0; // remove duplicate padding when we have nested lists @@ -54,12 +54,12 @@ } li { - --#{$prefix}bullet-list-marker-left: calc(#{$ouds-bullet-list-space-padding-inline-level-1} - (var(--#{$prefix}bullet-list-fixed-left-padding) + #{$ouds-bullet-list-space-padding-inline-level-0})); // stylelint-disable-line function-disallowed-list - padding-left: calc($ouds-bullet-list-space-padding-inline-level-1 - $ouds-bullet-list-space-padding-inline-level-0); // stylelint-disable-line function-disallowed-list + --#{$prefix}bullet-list-marker-left: calc(#{$ouds-bullet-list-space-padding-inline-level-1} - (var(--#{$prefix}bullet-list-fixed-left-padding) + #{$ouds-bullet-list-space-padding-inline-level-0})); + padding-left: calc($ouds-bullet-list-space-padding-inline-level-1 - $ouds-bullet-list-space-padding-inline-level-0); li { - --#{$prefix}bullet-list-marker-left: calc(#{$ouds-bullet-list-space-padding-inline-level-2} - (var(--#{$prefix}bullet-list-fixed-left-padding) + #{$ouds-bullet-list-space-padding-inline-level-1})); // stylelint-disable-line function-disallowed-list - padding-left: calc($ouds-bullet-list-space-padding-inline-level-2 - $ouds-bullet-list-space-padding-inline-level-1); // stylelint-disable-line function-disallowed-list + --#{$prefix}bullet-list-marker-left: calc(#{$ouds-bullet-list-space-padding-inline-level-2} - (var(--#{$prefix}bullet-list-fixed-left-padding) + #{$ouds-bullet-list-space-padding-inline-level-1})); + padding-left: calc($ouds-bullet-list-space-padding-inline-level-2 - $ouds-bullet-list-space-padding-inline-level-1); } } } diff --git a/scss/_button-group.scss b/scss/_button-group.scss index d35baaf690..eca13adb70 100644 --- a/scss/_button-group.scss +++ b/scss/_button-group.scss @@ -46,7 +46,7 @@ // Prevent double borders when buttons are next to each other > :not(.btn-check:first-child) + .btn:not(.btn-toggle), > .btn-group:not(:first-child) { - margin-left: calc(-1 * #{$btn-border-width}); // stylelint-disable-line function-disallowed-list + margin-left: calc(-1 * #{$btn-border-width}); } // End mod @@ -104,10 +104,9 @@ // .dropdown-toggle-split { - // stylelint-disable-next-line function-disallowed-list - min-width: add($dropdown-padding-x * 2, calc(#{$caret-width} * 2)); // OUDS mod - padding-right: subtract($dropdown-padding-x, $btn-border-width); // OUDS mod - padding-left: subtract($dropdown-padding-x, $btn-border-width); // OUDS mod + min-width: calc($dropdown-padding-x * 2 + calc(#{$caret-width} * 2)); // OUDS mod + padding-right: calc($dropdown-padding-x - $btn-border-width); // OUDS mod + padding-left: calc($dropdown-padding-x - $btn-border-width); // OUDS mod // OUDS mod .btn-group:not(.dropstart) &, @@ -117,9 +116,9 @@ &::before { position: absolute; - top: calc(-1 * #{$btn-border-width}); // stylelint-disable-line function-disallowed-list - bottom: calc(-1 * #{$btn-border-width}); // stylelint-disable-line function-disallowed-list - left: calc(-1 * #{$btn-border-width}); // stylelint-disable-line function-disallowed-list + top: calc(-1 * #{$btn-border-width}); + bottom: calc(-1 * #{$btn-border-width}); + left: calc(-1 * #{$btn-border-width}); width: $btn-border-width; color: inherit; content: ""; @@ -128,9 +127,9 @@ transparent $btn-border-width, transparent map-get($spacers, 1), currentcolor map-get($spacers, 1), - currentcolor subtract(100%, map-get($spacers, 1)), - transparent subtract(100%, map-get($spacers, 1)), - transparent subtract(100%, $btn-border-width) + currentcolor calc(100% - map-get($spacers, 1)), + transparent calc(100% - map-get($spacers, 1)), + transparent calc(100% - $btn-border-width) ); } } @@ -190,7 +189,7 @@ > .btn:not(:first-child), > .btn-group:not(:first-child) { - margin-top: calc(-1 * #{$btn-border-width}); // stylelint-disable-line function-disallowed-list + margin-top: calc(-1 * #{$btn-border-width}); } // Reset rounded corners diff --git a/scss/_buttons.scss b/scss/_buttons.scss index 741ba3095c..1e3bf86b55 100644 --- a/scss/_buttons.scss +++ b/scss/_buttons.scss @@ -63,7 +63,7 @@ justify-content: center; // OUDS mod min-width: var(--#{$prefix}btn-min-width); // OUDS mod min-height: var(--#{$prefix}btn-min-height); // OUDS mod - padding: subtract(var(--#{$prefix}btn-padding-y), var(--#{$prefix}btn-border-width)) subtract(var(--#{$prefix}btn-padding-end), var(--#{$prefix}btn-border-width)) subtract(var(--#{$prefix}btn-padding-y), var(--#{$prefix}btn-border-width)) subtract(var(--#{$prefix}btn-padding-start), var(--#{$prefix}btn-border-width)); // OUDS mod: instead of `var(--#{$prefix}btn-padding-y) var(--#{$prefix}btn-padding-x)` + padding: calc(var(--#{$prefix}btn-padding-y) - var(--#{$prefix}btn-border-width)) calc(var(--#{$prefix}btn-padding-end) - var(--#{$prefix}btn-border-width)) calc(var(--#{$prefix}btn-padding-y) - var(--#{$prefix}btn-border-width)) calc(var(--#{$prefix}btn-padding-start) - var(--#{$prefix}btn-border-width)); // OUDS mod: instead of `var(--#{$prefix}btn-padding-y) var(--#{$prefix}btn-padding-x)` // OUDS mod: no font-family @include get-font-size("label-large"); // OUDS mod font-weight: var(--#{$prefix}btn-font-weight); @@ -88,7 +88,7 @@ &.loading-determinate, &:active, &.active { - padding: subtract(var(--#{$prefix}btn-padding-y), var(--#{$prefix}btn-interaction-border-width)) subtract(var(--#{$prefix}btn-padding-end), var(--#{$prefix}btn-interaction-border-width)) subtract(var(--#{$prefix}btn-padding-y), var(--#{$prefix}btn-interaction-border-width)) subtract(var(--#{$prefix}btn-padding-start), var(--#{$prefix}btn-interaction-border-width)); + padding: calc(var(--#{$prefix}btn-padding-y) - var(--#{$prefix}btn-interaction-border-width)) calc(var(--#{$prefix}btn-padding-end) - var(--#{$prefix}btn-interaction-border-width)) calc(var(--#{$prefix}btn-padding-y) - var(--#{$prefix}btn-interaction-border-width)) calc(var(--#{$prefix}btn-padding-start) - var(--#{$prefix}btn-interaction-border-width)); border-width: var(--#{$prefix}btn-interaction-border-width); } // End mod diff --git a/scss/_card.scss b/scss/_card.scss index 8bbd0293a3..226d737ff9 100644 --- a/scss/_card.scss +++ b/scss/_card.scss @@ -91,8 +91,8 @@ .card-subtitle { @extend .h6; // OUDS mod - margin-top: 0; // OUDS mod - margin-bottom: var(--#{$prefix}card-title-spacer-y); // OUDS mod + margin-top: 0; // OUDS mod: instead of `calc(-.5 * var(--#{$prefix}card-title-spacer-y))` + margin-bottom: var(--#{$prefix}card-title-spacer-y); // OUDS mod: instead of 0 color: var(--#{$prefix}card-subtitle-color); } @@ -146,9 +146,9 @@ // .card-header-tabs { - margin-right: calc(-.5 * var(--#{$prefix}card-cap-padding-x)); // stylelint-disable-line function-disallowed-list - margin-bottom: calc(-1 * var(--#{$prefix}card-cap-padding-y)); // stylelint-disable-line function-disallowed-list - margin-left: calc(-.5 * var(--#{$prefix}card-cap-padding-x)); // stylelint-disable-line function-disallowed-list + margin-right: calc(-.5 * var(--#{$prefix}card-cap-padding-x)); + margin-bottom: calc(-1 * var(--#{$prefix}card-cap-padding-y)); + margin-left: calc(-.5 * var(--#{$prefix}card-cap-padding-x)); border-bottom: 0; .nav-link.active { @@ -158,8 +158,8 @@ } .card-header-pills { - margin-right: calc(-.5 * var(--#{$prefix}card-cap-padding-x)); // stylelint-disable-line function-disallowed-list - margin-left: calc(-.5 * var(--#{$prefix}card-cap-padding-x)); // stylelint-disable-line function-disallowed-list + margin-right: calc(-.5 * var(--#{$prefix}card-cap-padding-x)); + margin-left: calc(-.5 * var(--#{$prefix}card-cap-padding-x)); } // Card image diff --git a/scss/_carousel.scss b/scss/_carousel.scss index bbb9eac370..db748bf4fb 100644 --- a/scss/_carousel.scss +++ b/scss/_carousel.scss @@ -152,7 +152,7 @@ display: inline-block; background-color: var(--#{$prefix}control-bg); // OUDS mod @include border-radius(50%, 50%); - @include button-icon($carousel-control-icon-bg, $carousel-control-icon-width, $size: $carousel-control-icon-size, $position: subtract(50%, $spacer * .1) 50%); // OUDS mod + @include button-icon($carousel-control-icon-bg, $carousel-control-icon-width, $size: $carousel-control-icon-size, $position: calc(50% - $spacer * .1) 50%); // OUDS mod } // OUDS mod @@ -240,7 +240,7 @@ background-image: linear-gradient(to right, transparent 50%, color-contrast($carousel-indicator-active-bg) 0); // No need to feature test mask-* // See https://caniuse.com/mdn-css_properties_mask-image - mask-image: radial-gradient(circle at 50%, transparent 33%, $white add(33%, 1px)); + mask-image: radial-gradient(circle at 50%, transparent 33%, $white calc(33% + 1px)); transform: scale($carousel-indicator-hover-scale); &:hover, @@ -261,7 +261,6 @@ content: ""; background-color: inherit; transform-origin: left; - // stylelint-disable-next-line function-disallowed-list animation: carousel-progress calc(#{$carousel-indicator-animation-interval} / 2) linear infinite, carousel-progress-half $carousel-indicator-animation-interval step-end infinite; @include border-radius(inspect($carousel-indicator-active-radius), $carousel-indicator-active-radius); } diff --git a/scss/_chips.scss b/scss/_chips.scss index f29e6d4411..10bc588afe 100644 --- a/scss/_chips.scss +++ b/scss/_chips.scss @@ -40,7 +40,7 @@ justify-content: center; min-width: $ouds-chip-size-min-width; min-height: $ouds-chip-size-min-height; - padding: subtract(var(--#{$prefix}chip-padding-block), var(--#{$prefix}chip-border-width)) subtract(var(--#{$prefix}chip-padding-end), var(--#{$prefix}chip-border-width)) subtract(var(--#{$prefix}chip-padding-block), var(--#{$prefix}chip-border-width)) subtract(var(--#{$prefix}chip-padding-start), var(--#{$prefix}chip-border-width)); + padding: calc(var(--#{$prefix}chip-padding-block) - var(--#{$prefix}chip-border-width)) calc(var(--#{$prefix}chip-padding-end) - var(--#{$prefix}chip-border-width)) calc(var(--#{$prefix}chip-padding-block) - var(--#{$prefix}chip-border-width)) calc(var(--#{$prefix}chip-padding-start) - var(--#{$prefix}chip-border-width)); @include get-font-size("label-medium"); font-weight: 700; color: var(--#{$prefix}chip-color); diff --git a/scss/_dropdown.scss b/scss/_dropdown.scss index 525a75334a..8785059561 100644 --- a/scss/_dropdown.scss +++ b/scss/_dropdown.scss @@ -173,7 +173,7 @@ .dropdown-item { display: block; width: 100%; // For `