From 27f344fbb3065adf986898c563db78531907f798 Mon Sep 17 00:00:00 2001 From: Stephanie Hobson Date: Thu, 20 Mar 2025 15:59:02 -0700 Subject: [PATCH] Remove all mixins supporting vendor prefixes (Fix #957) This version removes mixins which added vendor-prefixes. Browser support for these is now excellent. - One migration path is to edit your code to use the unprefixed versions. - Another option is to move these utility mixins into your own code base (though, be aware they are no longer used in Protocol and this will not give you backwards compatible Protocol components). - If you need that level of vendor prefix support consider adding a tool such as [autoprefixer](https://github.com/postcss/autoprefixer) to your code base. - Effected mixins are: - `animation` - `appearance` - `background-size` - `box-decoration-break` - `box-sizing` - `flexbox`, `flex`, `flex-direction`, `flex-wrap`, `align-itmes`, `justify-content,` - `transform`, `transform-origin`, `transform-style` - `transition`, `transition-property`, `transition-duration`, `transition-delay` - Disable no-unknown-animation rule on animations --- CHANGELOG.md | 22 +++ .../sass/protocol/base/elements/_forms.scss | 4 +- .../sass/protocol/base/elements/_reset.scss | 1 - .../sass/protocol/components/_billboard.scss | 10 +- assets/sass/protocol/components/_button.scss | 4 +- assets/sass/protocol/components/_callout.scss | 4 +- assets/sass/protocol/components/_card.scss | 8 +- .../protocol/components/_feature-card.scss | 6 +- assets/sass/protocol/components/_footer.scss | 11 +- .../sass/protocol/components/_menu-item.scss | 4 +- .../sass/protocol/components/_menu-list.scss | 8 +- assets/sass/protocol/components/_menu.scss | 17 +- assets/sass/protocol/components/_modal.scss | 10 +- .../sass/protocol/components/_navigation.scss | 10 +- .../components/_notification-bar.scss | 2 +- assets/sass/protocol/components/_picto.scss | 2 +- .../protocol/components/_sidebar-menu.scss | 2 +- assets/sass/protocol/components/_split.scss | 4 +- .../protocol/components/_sticky-promo.scss | 4 +- .../protocol/components/forms/_choice.scss | 4 +- .../sass/protocol/includes/forms/_index.scss | 4 +- .../protocol/includes/mixins/_details.scss | 7 +- .../sass/protocol/includes/mixins/_grid.scss | 13 +- .../sass/protocol/includes/mixins/_utils.scss | 153 +----------------- 24 files changed, 89 insertions(+), 225 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 6b24e5f54..f83644173 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -6,6 +6,9 @@ The good news is we don't expect any visible changes in modern browsers and you Introducing theme variables! CSS variables beginning with `--theme-` will adjust based on media queries. +## Browser Support + +* **css:** (breaking) Remove support for vendor prefixing (#957) ## Typography @@ -65,6 +68,24 @@ See the [Migration Guide](https://protocol.mozilla.org/docs/usage/migration) for * `type-scale()` function and associated lookup tables * `text-body-cta` mixin (use `text-body-md` instead) * You can remove `@supports (--css: variables)` blocks that only contain font declarations, as CSS custom properties are now required. +* This version removes mixins which added vendor-prefixes. Browser support for these is now excellent. + - One migration path is to edit your code to use the unprefixed versions. + - Another option is to move these utility mixins into your own code base (though, be aware they are + no longer used in Protocol and this will not give you backwards compatible Protocol components). + - If you need that level of vendor prefix support consider adding a tool such as + [autoprefixer](https://github.com/postcss/autoprefixer) to your code base. + - Affected mixins are: + - `animation` + - `appearance` + - `background-size` + - `box-decoration-break` + - `box-sizing` + - `flexbox`, `flex`, `flex-direction`, `flex-wrap`, `align-items`, `justify-content` + - `grid*-gap` + - `inline-block` + - `multi-column*` + - `transform`, `transform-origin`, `transform-style` + - `transition`, `transition-property`, `transition-duration`, `transition-delay` # 22.0.0 @@ -152,6 +173,7 @@ See the [Migration Guide](https://protocol.mozilla.org/docs/usage/migration) for * **fonts:** Any use of `font-mozilla` mixin should be replaced with `font-mozilla-headline`. NOTE: we recommend `font-mozilla-headline` only for text over 24px (below should be `font-mozilla-text`) * Headings are now [balanced](https://developer.mozilla.org/docs/Web/CSS/text-wrap-style#balanced_text), which can impact other wrapping rules. Make sure any changes to `h1`–`h6` rendering end up styled as expected, especially if you apply any `white-space`, `word-break` or `hyphens` customizations. + * See notes for [Protocol Assets 5.4.0](https://github.com/mozilla/protocol-assets/blob/main/CHANGELOG.md#540) # 19.3.0 diff --git a/assets/sass/protocol/base/elements/_forms.scss b/assets/sass/protocol/base/elements/_forms.scss index 5d74dd477..f1bd343ac 100644 --- a/assets/sass/protocol/base/elements/_forms.scss +++ b/assets/sass/protocol/base/elements/_forms.scss @@ -298,8 +298,8 @@ input[type='file'] { // with thanks to https://www.filamentgroup.com/lab/select-css.html select { - @include appearance(none); - @include border-box; + appearance: none; + box-sizing: border-box; @include bidi(( (background-position, right 8px top 50%, left 8px top 50%), (padding, forms.$field-padding forms.$symbol-spacing forms.$field-padding forms.$field-padding, forms.$field-padding forms.$field-padding forms.$field-padding forms.$symbol-spacing), diff --git a/assets/sass/protocol/base/elements/_reset.scss b/assets/sass/protocol/base/elements/_reset.scss index 429651a03..9d88c1db6 100644 --- a/assets/sass/protocol/base/elements/_reset.scss +++ b/assets/sass/protocol/base/elements/_reset.scss @@ -75,7 +75,6 @@ img, video, object, embed { - -ms-interpolation-mode: bicubic; height: auto; max-width: 100%; } diff --git a/assets/sass/protocol/components/_billboard.scss b/assets/sass/protocol/components/_billboard.scss index a4acb43ec..342b56796 100644 --- a/assets/sass/protocol/components/_billboard.scss +++ b/assets/sass/protocol/components/_billboard.scss @@ -13,7 +13,7 @@ $billboard-content-width-lg: 374px + $spacing-md; // content width + spacing med position: relative; .mzp-c-billboard-content { - @include border-box; + box-sizing: border-box; margin: 0 auto; max-width: 346px; text-align: center; @@ -51,9 +51,9 @@ $billboard-content-width-lg: 374px + $spacing-md; // content width + spacing med } .mzp-c-billboard-content-container { - @include align-items(center); - @include flexbox; - @include justify-content(center); + align-items: center; + display: flex; + justify-content: center; } .mzp-c-billboard-image-container { @@ -98,7 +98,7 @@ $billboard-content-width-lg: 374px + $spacing-md; // content width + spacing med margin: $layout-xl 0; .mzp-c-billboard-content { - @include border-box; + box-sizing: border-box; max-width: 374px; } diff --git a/assets/sass/protocol/components/_button.scss b/assets/sass/protocol/components/_button.scss index b30ece294..7c4d424ac 100644 --- a/assets/sass/protocol/components/_button.scss +++ b/assets/sass/protocol/components/_button.scss @@ -10,9 +10,9 @@ // Button shape and size .mzp-c-button { - @include border-box; + box-sizing: border-box; @include font-size(16px); - @include transition(background-color 100ms, border-color 100ms, color 100ms); + transition: background-color 100ms, border-color 100ms, color 100ms; border: 2px solid transparent; cursor: pointer; display: inline-block; diff --git a/assets/sass/protocol/components/_callout.scss b/assets/sass/protocol/components/_callout.scss index f8fb94ffd..1d20e16b5 100644 --- a/assets/sass/protocol/components/_callout.scss +++ b/assets/sass/protocol/components/_callout.scss @@ -71,7 +71,7 @@ @supports (display: grid) { @media #{$mq-md} { .mzp-l-content { - @include grid-column-gap($spacing-xl); + grid-column-gap: $spacing-xl; display: grid; grid-template-columns: 2fr 1fr; } @@ -82,7 +82,7 @@ } .mzp-c-callout-cta { - @include flexbox; + display: flex; align-items: center; justify-content: flex-end; width: auto; diff --git a/assets/sass/protocol/components/_card.scss b/assets/sass/protocol/components/_card.scss index 307fcb3df..bf356789a 100644 --- a/assets/sass/protocol/components/_card.scss +++ b/assets/sass/protocol/components/_card.scss @@ -8,7 +8,7 @@ // Base card class .mzp-c-card { - @include border-box; + box-sizing: border-box; background: $color-white; margin-bottom: $spacing-lg; @@ -40,7 +40,7 @@ } .mzp-c-card-content { - @include border-box; + box-sizing: border-box; padding: $spacing-sm; } @@ -103,12 +103,12 @@ &:hover, &:active, &:focus { - @include transition(box-shadow 0.1s ease-in-out); + transition: box-shadow 0.1s ease-in-out; box-shadow: 0 0 0 4px $color-marketing-gray-20; .mzp-c-card-title, .mzp-c-card-cta-text { - @include transition(border-bottom-color 100ms ease-in-out); + transition: border-bottom-color 100ms ease-in-out; border-bottom: 2px solid; } } diff --git a/assets/sass/protocol/components/_feature-card.scss b/assets/sass/protocol/components/_feature-card.scss index 60577f300..114c19d6a 100644 --- a/assets/sass/protocol/components/_feature-card.scss +++ b/assets/sass/protocol/components/_feature-card.scss @@ -159,11 +159,11 @@ &.mzp-l-card-feature-right-half, &.mzp-l-card-feature-left-third, &.mzp-l-card-feature-right-third { - @include grid-column-gap($spacing-xl); + grid-column-gap: $spacing-xl; display: grid; .mzp-c-card-feature-content { - @include flexbox; + display: flex; align-items: center; } } @@ -220,7 +220,7 @@ &.mzp-l-card-feature-right-half, &.mzp-l-card-feature-left-third, &.mzp-l-card-feature-right-third { - @include grid-column-gap($spacing-2xl); + grid-column-gap: $spacing-2xl; } } } diff --git a/assets/sass/protocol/components/_footer.scss b/assets/sass/protocol/components/_footer.scss index 4d99126ea..cce6d0573 100644 --- a/assets/sass/protocol/components/_footer.scss +++ b/assets/sass/protocol/components/_footer.scss @@ -37,8 +37,8 @@ // Footer primary section, contains logo and sections with links .mzp-c-footer-primary { + box-sizing: border-box; margin: 0 auto $layout-sm; - @include border-box; @include clearfix; @include text-body-md; @@ -59,7 +59,7 @@ a { background: url('#{$image-path}/logos/mozilla/logo-lockup-hor-white.svg') no-repeat; - @include background-size(134px, 32px); + background-size: 134px, 32px; @include image-replaced; display: inline-block; height: 32px; @@ -176,10 +176,9 @@ button::before { background: $url-image-expand-white top left no-repeat; - - @include background-size(24px, 24px); + background-size: 24px, 24px; @include bidi(((right, 8px, left, auto),)); - @include transition(transform 100ms ease-in-out); + transition: transform 100ms ease-in-out; content: ''; height: 24px; margin-top: -12px; @@ -189,7 +188,7 @@ } button[aria-expanded='true']::before { - @include transform(rotate(45deg)); + transform: rotate(45deg); } } diff --git a/assets/sass/protocol/components/_menu-item.scss b/assets/sass/protocol/components/_menu-item.scss index fc3cd3cac..243ff4327 100644 --- a/assets/sass/protocol/components/_menu-item.scss +++ b/assets/sass/protocol/components/_menu-item.scss @@ -19,7 +19,7 @@ $icon-size: 24px; &:active, &:focus { .mzp-c-menu-item-title { - @include transition(border-bottom-color 100ms ease-in-out); + transition: border-bottom-color 100ms ease-in-out; border-bottom: 2px solid $color-black; color: $color-black; } @@ -114,7 +114,7 @@ $icon-size: 24px; @media #{$mq-md} { &:hover { - @include transition(box-shadow 0.1s ease-in-out); + transition: box-shadow 0.1s ease-in-out; box-shadow: 0 0 0 4px $color-marketing-gray-20; } diff --git a/assets/sass/protocol/components/_menu-list.scss b/assets/sass/protocol/components/_menu-list.scss index 47110a7c5..949f4114b 100644 --- a/assets/sass/protocol/components/_menu-list.scss +++ b/assets/sass/protocol/components/_menu-list.scss @@ -34,7 +34,7 @@ @include bidi(((padding-right, $spacing-sm * 2 + 14px, padding-left, $spacing-sm),)); &::after { - @include background-size(20px, 20px); + background-size: 20px, 20px; @include bidi(((right, $spacing-sm, left, auto),)); bottom: $spacing-sm; content: ''; @@ -83,7 +83,6 @@ width: 100%; &::after { - @include background-size(20px, 20px); @include bidi(((right, 0, left, auto),)); background: $url-image-caret-down-link center bottom no-repeat; bottom: 1px; @@ -92,12 +91,11 @@ position: absolute; top: 0; width: 16px; - - @include transition(transform 200ms ease-in-out); + transition: transform 200ms ease-in-out; } &[aria-expanded='true']::after { - @include transform(scaleY(-1)); + transform: scaleY(-1); } &:hover, diff --git a/assets/sass/protocol/components/_menu.scss b/assets/sass/protocol/components/_menu.scss index 1e5ab5493..2b85673e2 100644 --- a/assets/sass/protocol/components/_menu.scss +++ b/assets/sass/protocol/components/_menu.scss @@ -75,10 +75,9 @@ &::before { background: $url-image-expand-black top left no-repeat; - - @include background-size(20px, 20px); + background-size: 20px 20px; @include bidi(((right, 8px, left, auto),)); - @include transition(transform 100ms ease-in-out); + transition: transform 100ms ease-in-out; content: ''; height: 20px; margin-top: -8px; @@ -168,7 +167,7 @@ .mzp-c-menu.mzp-is-enhanced .mzp-c-menu-category { &.mzp-is-selected { .mzp-c-menu-title::before { - @include transform(rotate(45deg)); + transform: rotate(45deg); } .mzp-c-menu-panel { @@ -181,7 +180,7 @@ &.mzp-is-animated { .mzp-c-menu-panel, .mzp-c-menu-title::after { - @include animation(mzp-a-fade-in 80ms ease-in 0ms 1 normal both); + animation: mzp-a-fade-in 80ms ease-in 0ms 1 normal both; /* stylelint-disable-line no-unknown-animations */ } } @@ -204,7 +203,7 @@ // Menu panel .mzp-c-menu-panel { - @include border-box; + box-sizing: border-box; background: $color-white; display: none; padding-top: $spacing-lg; @@ -213,7 +212,7 @@ // Close button is only visible for large screens. .mzp-c-menu-button-close { @include image-replaced; - @include transition(transform 100ms ease-in-out); + transition: transform 100ms ease-in-out; background: transparent url('#{$image-path}/icons/close.svg') center center / 125% no-repeat; border: none; cursor: pointer; @@ -227,7 +226,7 @@ &:hover, &:focus { - @include transform(scale(1.2)); + transform: scale(1.2); } @media #{$mq-md} { @@ -250,7 +249,7 @@ } .mzp-c-menu-panel-container { - @include border-box; + box-sizing: border-box; margin: 0 auto; max-width: $content-max; padding: 0; diff --git a/assets/sass/protocol/components/_modal.scss b/assets/sass/protocol/components/_modal.scss index 077e2ced0..7b562cb4d 100644 --- a/assets/sass/protocol/components/_modal.scss +++ b/assets/sass/protocol/components/_modal.scss @@ -31,7 +31,7 @@ html.mzp-is-noscroll { } .mzp-c-modal { - @include animation(mzp-a-fade-in 300ms ease-in 0ms 1 normal both); + animation: mzp-a-fade-in 300ms ease-in 0ms 1 normal both; /* stylelint-disable-line no-unknown-animations */ background: $color-black; background: rgb(0, 0, 0, 0.85); bottom: 0; @@ -79,9 +79,7 @@ html.mzp-is-noscroll { .mzp-c-modal-button-close { @include image-replaced; - background: transparent url('#{$image-path}/icons/close-white.svg') center center no-repeat; - - @include background-size(20px 20px); + background: transparent url('#{$image-path}/icons/close-white.svg') center center / 20px 20px no-repeat; border: none; height: 42px; min-width: 0; @@ -91,8 +89,8 @@ html.mzp-is-noscroll { &:hover, &:focus { - @include transition(transform 0.1s ease-in-out); - @include transform(scale(1.1)); + transition: transform 0.1s ease-in-out; + transform: scale(1.1); } &:focus { diff --git a/assets/sass/protocol/components/_navigation.scss b/assets/sass/protocol/components/_navigation.scss index 045dbb35e..c1f02155d 100644 --- a/assets/sass/protocol/components/_navigation.scss +++ b/assets/sass/protocol/components/_navigation.scss @@ -48,7 +48,7 @@ @supports (position: sticky) { html.mzp-has-sticky-navigation { .mzp-c-navigation.mzp-is-sticky { - @include transition(transform 300ms ease-in-out); + transition: transform 300ms ease-in-out; left: 0; position: sticky; top: 0; @@ -60,7 +60,7 @@ } &.mzp-is-hidden { - @include transform(translate(0, -110%)); + transform: translate(0, -110%); } } @@ -78,7 +78,7 @@ @include bidi(((float, left, right),)); a { - @include background-size(101px, 24px); + background-size: 101px, 24px; @include image-replaced; background-image: url('#{$image-path}/logos/mozilla/logo-lockup-hor.svg'); background-repeat: no-repeat; @@ -106,7 +106,7 @@ .mzp-t-firefox & { a { - @include background-size(81px, 27px); + background-size: 81px, 27px; background-image: url('#{$image-path}/logos/firefox/logo-word-hor.svg'); height: 27px; width: 81px; @@ -120,7 +120,7 @@ @media #{$mq-lg} { a { - @include background-size(109px, 36px); + background-size: 109px, 36px; background-image: url('#{$image-path}/logos/firefox/logo-word-hor.svg'); height: 36px; margin-top: 1px; diff --git a/assets/sass/protocol/components/_notification-bar.scss b/assets/sass/protocol/components/_notification-bar.scss index 4666f5dbe..7a4742b9d 100644 --- a/assets/sass/protocol/components/_notification-bar.scss +++ b/assets/sass/protocol/components/_notification-bar.scss @@ -9,13 +9,13 @@ border-radius: $border-radius-sm; border: 1px; box-shadow: $box-shadow-md; + box-sizing: border-box; color: $color-black; font-weight: normal; margin: $layout-xs $spacing-md 0; padding: $spacing-md $spacing-2xl; position: relative; text-align: center; - @include border-box; @include clearfix; @include text-body-sm; diff --git a/assets/sass/protocol/components/_picto.scss b/assets/sass/protocol/components/_picto.scss index a12f5c34d..d24523e62 100644 --- a/assets/sass/protocol/components/_picto.scss +++ b/assets/sass/protocol/components/_picto.scss @@ -8,7 +8,7 @@ // A small content block with a small image, usually an icon or spot illustration. .mzp-c-picto { - @include border-box; + box-sizing: border-box; margin: 0 auto $layout-md; max-width: $content-md; } diff --git a/assets/sass/protocol/components/_sidebar-menu.scss b/assets/sass/protocol/components/_sidebar-menu.scss index 71484e839..140a1351a 100644 --- a/assets/sass/protocol/components/_sidebar-menu.scss +++ b/assets/sass/protocol/components/_sidebar-menu.scss @@ -89,7 +89,7 @@ @include bidi(( (right, 0, left, auto), )); - @include transform(rotate(90deg)); + transform: rotate(90deg); color: $color-marketing-gray-80; content: none; font-size: 1.5em; diff --git a/assets/sass/protocol/components/_split.scss b/assets/sass/protocol/components/_split.scss index 609455dd8..a8780a3c0 100644 --- a/assets/sass/protocol/components/_split.scss +++ b/assets/sass/protocol/components/_split.scss @@ -174,7 +174,7 @@ @media #{$mq-md} { .mzp-c-split-body { - @include border-box; + box-sizing: border-box; @include bidi(((float, left, right),)); padding: 0 calc($h-grid-lg * 0.5); width: 50%; @@ -185,7 +185,7 @@ } .mzp-c-split-media { - @include border-box; + box-sizing: border-box; @include bidi(((float, right, left),)); padding: 0 ($h-grid-lg * 0.5); width: 50%; diff --git a/assets/sass/protocol/components/_sticky-promo.scss b/assets/sass/protocol/components/_sticky-promo.scss index 154894553..635a8d322 100644 --- a/assets/sass/protocol/components/_sticky-promo.scss +++ b/assets/sass/protocol/components/_sticky-promo.scss @@ -53,7 +53,7 @@ $logos: ( } &.mzp-a-fade-out { - @include animation(mzp-a-fade-out 100ms ease 5ms both); + animation: mzp-a-fade-out 100ms ease 5ms both; /* stylelint-disable-line no-unknown-animations */ } @media #{$mq-sm} { @@ -83,7 +83,7 @@ $logos: ( &.mzp-t-product-nightly { .mzp-c-sticky-promo-title { @include bidi(((background-position, top left, top right),)); - @include background-size(auto 40px); + background-size: auto 40px; background-position: top left; background-repeat: no-repeat; padding: (40px + $spacing-lg) 0 0; diff --git a/assets/sass/protocol/components/forms/_choice.scss b/assets/sass/protocol/components/forms/_choice.scss index 9cdd842c7..0f38a4c25 100644 --- a/assets/sass/protocol/components/forms/_choice.scss +++ b/assets/sass/protocol/components/forms/_choice.scss @@ -86,7 +86,7 @@ &[type='checkbox'] + label::before, &[type='radio'] + label::before { @include bidi(((left, 0, right, auto),)); - @include border-box; + box-sizing: border-box; background: $color-white; border-radius: 2px; border: forms.$field-border; @@ -234,7 +234,7 @@ } // high contrast mode - @media screen and (-ms-high-contrast: active) { + @media (forced-colors: active) { // use the built in form controls &[type='checkbox'], &[type='radio'] { diff --git a/assets/sass/protocol/includes/forms/_index.scss b/assets/sass/protocol/includes/forms/_index.scss index d81aad2c5..96a99e149 100644 --- a/assets/sass/protocol/includes/forms/_index.scss +++ b/assets/sass/protocol/includes/forms/_index.scss @@ -82,9 +82,9 @@ $line-height-shim: 0.15em; // two elements with text appear to have more space b background-color: $color-white; border-radius: $field-border-radius; border: $field-border; + box-sizing: border-box; margin: 0 0 $field-v-spacing; padding: $field-padding; - @include border-box; @include text-body-md; @include font-base; @@ -97,6 +97,7 @@ $line-height-shim: 0.15em; // two elements with text appear to have more space b background-color: $field-border-color-error-hover; border-radius: $border-radius-sm; box-shadow: $box-shadow-sm; + box-sizing: border-box; color: $color-white; display: table; // make it behave like inline-block but still get a new line margin: 2px 0 0; @@ -104,7 +105,6 @@ $line-height-shim: 0.15em; // two elements with text appear to have more space b padding: $spacing-xs #{$spacing-sm + 2px}; position: relative; @include text-body-xs; - @include border-box; } @mixin form-msg-pointer() { diff --git a/assets/sass/protocol/includes/mixins/_details.scss b/assets/sass/protocol/includes/mixins/_details.scss index d1a9f8fbe..de14d150b 100644 --- a/assets/sass/protocol/includes/mixins/_details.scss +++ b/assets/sass/protocol/includes/mixins/_details.scss @@ -5,7 +5,6 @@ @use '../tokens'; @use 'bidi'; @use 'images'; -@use 'utils'; @mixin details { .is-summary { @@ -34,9 +33,9 @@ &::before { background: images.$url-image-expand-black top left no-repeat; - @include utils.background-size(20px, 20px); + background-size: 20px, 20px; @include bidi.bidi(((right, 8px, left, auto),)); - @include utils.transition(transform 100ms ease-in-out); + transition: transform 100ms ease-in-out; content: ''; height: 20px; margin-top: -8px; @@ -47,5 +46,5 @@ } @mixin summary-open { - @include utils.transform(rotate(45deg)); + transform: rotate(45deg); } diff --git a/assets/sass/protocol/includes/mixins/_grid.scss b/assets/sass/protocol/includes/mixins/_grid.scss index 7a1dafdfc..db1651c8c 100644 --- a/assets/sass/protocol/includes/mixins/_grid.scss +++ b/assets/sass/protocol/includes/mixins/_grid.scss @@ -3,7 +3,6 @@ // file, You can obtain one at http://mozilla.org/MPL/2.0/. @use '../tokens'; -@use 'utils'; // Grid columns $column-width: 8.333%; // 100% / 12 columns @@ -13,7 +12,7 @@ $gutter-width: tokens.$layout-sm; // Usage: // .foo { @include colspan(4); } @mixin colspan($columns) { - @include utils.border-box; + box-sizing: border-box; width: $column-width * $columns; padding-left: $gutter-width * 0.5; padding-right: $gutter-width * 0.5; @@ -25,26 +24,26 @@ $gutter-width: tokens.$layout-sm; } @mixin grid-quarter { - @include utils.border-box; + box-sizing: border-box; width: 25%; } @mixin grid-third { - @include utils.border-box; + box-sizing: border-box; width: 33.333%; } @mixin grid-half { - @include utils.border-box; + box-sizing: border-box; width: 50%; } @mixin grid-two-thirds { - @include utils.border-box; + box-sizing: border-box; width: 66.666%; } @mixin grid-three-quarters { - @include utils.border-box; + box-sizing: border-box; width: 75%; } diff --git a/assets/sass/protocol/includes/mixins/_utils.scss b/assets/sass/protocol/includes/mixins/_utils.scss index 26fbb37ee..91b1aa751 100644 --- a/assets/sass/protocol/includes/mixins/_utils.scss +++ b/assets/sass/protocol/includes/mixins/_utils.scss @@ -20,110 +20,6 @@ } } -// Mixins for CSS3 properties that still need prefixes in some browsers. -@mixin transition($transition...) { - -webkit-transition: $transition; - transition: $transition; -} - -@mixin transform($transform...) { - -webkit-transform: $transform; - transform: $transform; -} - -@mixin transform-origin($transform-origin...) { - -webkit-transform-origin: $transform-origin; - transform-origin: $transform-origin; -} - -@mixin transform-style($transform-style...) { - -webkit-transform-style: $transform-style; - transform-style: $transform-style; -} - -// Extra mixins for fine-tuned transitions -@mixin transition-property($transition-property...) { - -webkit-transition-property: $transition-property; - transition-property: $transition-property; -} - -@mixin transition-duration($transition-duration...) { - -webkit-transition-duration: $transition-duration; - transition-duration: $transition-duration; -} - -@mixin transition-timing-function($transition-timing-function...) { - -webkit-transition-timing-function: $transition-timing-function; - transition-timing-function: $transition-timing-function; -} - -@mixin transition-delay($transition-delay...) { - -webkit-transition-delay: $transition-delay; - transition-delay: $transition-delay; -} - -@mixin animation($parameters...) { - -webkit-animation: $parameters; - animation: $parameters; -} - -@mixin border-box { - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; -} - -@mixin flexbox { - display: -webkit-box; - display: -moz-box; - display: -ms-flexbox; - display: -webkit-flex; - display: flex; -} - -@mixin flex($values: auto) { - -webkit-box-flex: $values; - -moz-box-flex: $values; - -webkit-flex: $values; - flex: $values; -} - -@mixin flex-direction($value: column) { - -webkit-box-direction: $value; - flex-direction: $value; -} - -@mixin flex-wrap($value: wrap) { - -ms-flex-wrap: $value; - flex-wrap: $value; -} - -@mixin align-items($align: stretch) { - -webkit-box-align: $align; - align-items: $align; -} - -@mixin justify-content($justify: flex-start) { - -webkit-box-pack: $justify; - justify-content: $justify; -} - -@mixin background-size($sizes...) { - -webkit-background-size: $sizes; - background-size: $sizes; -} - -@mixin box-decoration-break($value: slice) { - -webkit-box-decoration-break: $value; - box-decoration-break: $value; -} - -@mixin appearance($value) { - -webkit-appearance: $value; - -moz-appearance: $value; - appearance: $value; -} - // Hide an element visually, but not from screen readers @mixin visually-hidden { border: 0; @@ -143,13 +39,6 @@ display: none; } -// Inline block hack for pages that still need to support old IE. -@mixin inline-block { - display: inline-block; - *display: inline; - *zoom: 1; -} - // not the most up to date method, but works in IE7 @mixin image-replaced { direction: ltr; @@ -162,7 +51,7 @@ // Flip an element horizontally for RTL locales such as Arabic and Hebrew. // Usually applied to pseudo-elements with a background-image, not for text. @mixin flip-horizontally { - @include transform(scale(-1, 1)); + transform: scale(-1, 1); } // Adds a right-pointing arrow after @@ -178,31 +67,10 @@ &::before { content: '\25B8\00A0'; // triangle+space white-space: nowrap; - @include transform(rotate(180deg)); + transform: rotate(180deg); } } -// Multiple columns -@mixin multi-column($width: auto, $count: auto, $gap: normal) { - -webkit-columns: $width $count; - -moz-columns: $width $count; - columns: $width $count; - -webkit-column-gap: $gap; - -moz-column-gap: $gap; - column-gap: $gap; -} - -@mixin multi-column-clear { - @include multi-column(auto, auto, normal); -} - -@mixin multi-column-avoid-break { - page-break-inside: avoid; - -webkit-column-break-inside: avoid; - -moz-column-break-inside: avoid; - break-inside: avoid; -} - // Preserve aspect ratio to prevent content jumping when media loads. // Apply to a direct parent element of an image or video. @mixin aspect-ratio($width, $height, $width-wrapper: 100%) { @@ -266,20 +134,3 @@ } } } - -// Mixins for CSS grid legacy prefixed properties -// https://bugzilla.mozilla.org/show_bug.cgi?id=1398482 -@mixin grid-gap($value: inherit) { - grid-gap: $value; - gap: $value; -} - -@mixin grid-row-gap($value: inherit) { - grid-row-gap: $value; - row-gap: $value; -} - -@mixin grid-column-gap($value: inherit) { - grid-column-gap: $value; - column-gap: $value; -}