From 1f0c3fbea9260aee02f4793049d46fd2cb36b8ca Mon Sep 17 00:00:00 2001 From: Stephanie Hobson Date: Thu, 20 Mar 2025 15:59:02 -0700 Subject: [PATCH 1/2] 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. - Affected 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` --- CHANGELOG.md | 25 ++- .../sass/protocol/base/elements/_forms.scss | 4 +- .../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 | 10 +- assets/sass/protocol/components/_menu.scss | 18 +-- assets/sass/protocol/components/_modal.scss | 10 +- .../sass/protocol/components/_navigation.scss | 17 +- .../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 | 2 +- .../sass/protocol/includes/forms/_index.scss | 4 +- .../sass/protocol/includes/mixins/_utils.scss | 153 +----------------- 21 files changed, 89 insertions(+), 215 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index f0b1f1a86..dda0cd8bd 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,6 +1,27 @@ # HEAD -* **assets:** Update @mozilla-protocol/assets to 6.1.1 +* **css:** (breaking) Remove support for vendor prefixing (#957) + +## Migration Tips + +* 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` ## Features @@ -16,6 +37,7 @@ * **assets:** (breaking) Update @mozilla-protocol/assets to 6.0.1 * **css:** Update navigation and footer with Mozilla logo lockup. +* **css:** Apply hover cursor from Details component to Details element (#948) ## Bug Fixes @@ -42,6 +64,7 @@ * **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 53fac6b0d..40597cda8 100644 --- a/assets/sass/protocol/base/elements/_forms.scss +++ b/assets/sass/protocol/base/elements/_forms.scss @@ -295,8 +295,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/components/_billboard.scss b/assets/sass/protocol/components/_billboard.scss index c33f0cdfa..fed130a3a 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 5272c1b2f..19e0a2cb5 100644 --- a/assets/sass/protocol/components/_button.scss +++ b/assets/sass/protocol/components/_button.scss @@ -78,9 +78,9 @@ .mzp-c-button, /* stylelint-disable-line no-duplicate-selectors */ a.mzp-c-button { - @include border-box; + box-sizing: border-box; @include font-size(16px); - @include transition(background-color 100ms, box-shadow 100ms, color 100ms); + transition: background-color 100ms, box-shadow 100ms, color 100ms; border-radius: $border-radius-sm; border: 2px solid transparent; cursor: pointer; diff --git a/assets/sass/protocol/components/_callout.scss b/assets/sass/protocol/components/_callout.scss index 2d099dcc1..9b12d5839 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 3a369a202..b73dd265d 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; } @@ -107,12 +107,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 30a7b5ace..551cce68f 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 fc89a337e..5379f7730 100644 --- a/assets/sass/protocol/components/_footer.scss +++ b/assets/sass/protocol/components/_footer.scss @@ -39,7 +39,7 @@ .mzp-c-footer-primary { @include text-body-md; - @include border-box; + box-sizing: border-box; @include clearfix; margin: 0 auto $layout-sm; @@ -60,7 +60,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; @@ -173,10 +173,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; @@ -186,7 +185,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 4921c8c90..76220a7d4 100644 --- a/assets/sass/protocol/components/_menu-item.scss +++ b/assets/sass/protocol/components/_menu-item.scss @@ -27,7 +27,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; } @@ -118,7 +118,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 02daf8681..42258ef2e 100644 --- a/assets/sass/protocol/components/_menu-list.scss +++ b/assets/sass/protocol/components/_menu-list.scss @@ -38,7 +38,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: ''; @@ -87,21 +87,19 @@ width: 100%; &::after { - @include background-size(20px, 20px); @include bidi(((right, 0, left, auto),)); - background: $url-image-arrow-down-link center bottom no-repeat; + background: $url-image-arrow-down-link center bottom / 20px, 20px no-repeat; bottom: 1px; content: ''; display: inline-block; 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 f1120e764..10b681a7f 100644 --- a/assets/sass/protocol/components/_menu.scss +++ b/assets/sass/protocol/components/_menu.scss @@ -74,11 +74,9 @@ text-decoration: none; &::before { - background: $url-image-expand-black top left no-repeat; - - @include background-size(20px, 20px); + background: $url-image-expand-black top left / 20px, 20px no-repeat; @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 +166,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 +179,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; } } @@ -204,7 +202,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 +211,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 no-repeat; border: none; cursor: pointer; @@ -227,7 +225,7 @@ &:hover, &:focus { - @include transform(scale(1.2)); + transform: scale(1.2); } @media #{$mq-md} { @@ -250,7 +248,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 43fbb47dd..a5506632e 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; background: $color-black; background: rgba(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 0b1bf9020..aa457f6f9 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; @@ -98,6 +98,13 @@ @media #{$mq-lg} { @include bidi(((margin, $spacing-lg ($spacing-md * 2) $spacing-lg 0, $spacing-lg 0 $spacing-lg ($spacing-md * 2)),)); + + a { + background-size: 112px, 32px; + height: 32px; + margin-top: $spacing-xs; + width: 112px; + } } @media #{$mq-xl} { @@ -106,7 +113,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 +127,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 209618168..78e46bfe7 100644 --- a/assets/sass/protocol/components/_notification-bar.scss +++ b/assets/sass/protocol/components/_notification-bar.scss @@ -5,7 +5,7 @@ @use '../includes/lib' as *; .mzp-c-notification-bar { - @include border-box; + box-sizing: border-box; @include clearfix; @include text-body-sm; background-color: $color-marketing-gray-20; diff --git a/assets/sass/protocol/components/_picto.scss b/assets/sass/protocol/components/_picto.scss index 6e117c5c6..2e2780d83 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 ccdfda401..def570c1c 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 bcb3a18b3..0507d3029 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; } @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..58dba43d6 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; diff --git a/assets/sass/protocol/includes/forms/_index.scss b/assets/sass/protocol/includes/forms/_index.scss index 5b955cc6d..c35b6d43b 100644 --- a/assets/sass/protocol/includes/forms/_index.scss +++ b/assets/sass/protocol/includes/forms/_index.scss @@ -84,7 +84,7 @@ $line-height-shim: 0.15em; // two elements with text appear to have more space b } @mixin form-input() { - @include border-box; + box-sizing: border-box; @include text-body-md; background-color: $color-white; border-radius: $field-border-radius; @@ -96,7 +96,7 @@ $line-height-shim: 0.15em; // two elements with text appear to have more space b @mixin form-msg() { @include text-body-xs; - @include border-box; + box-sizing: border-box; background-color: $field-border-color-error-hover; border-radius: $border-radius-sm; box-shadow: $box-shadow-sm; diff --git a/assets/sass/protocol/includes/mixins/_utils.scss b/assets/sass/protocol/includes/mixins/_utils.scss index 71390bfa1..385ecf5ce 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%) { @@ -280,20 +148,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; -} From a5835940208e5680726721a78af16b46d165a496 Mon Sep 17 00:00:00 2001 From: Stephanie Hobson Date: Wed, 14 May 2025 21:17:23 -0700 Subject: [PATCH 2/2] Disable no-unknown-animation rule on global animations --- assets/sass/protocol/components/_menu.scss | 2 +- assets/sass/protocol/components/_modal.scss | 2 +- assets/sass/protocol/components/_sticky-promo.scss | 2 +- assets/sass/protocol/includes/mixins/_details.scss | 7 +++---- assets/sass/protocol/includes/mixins/_grid.scss | 13 ++++++------- 5 files changed, 12 insertions(+), 14 deletions(-) diff --git a/assets/sass/protocol/components/_menu.scss b/assets/sass/protocol/components/_menu.scss index 10b681a7f..7306dc9d8 100644 --- a/assets/sass/protocol/components/_menu.scss +++ b/assets/sass/protocol/components/_menu.scss @@ -179,7 +179,7 @@ &.mzp-is-animated { .mzp-c-menu-panel, .mzp-c-menu-title::after { - 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 */ } } diff --git a/assets/sass/protocol/components/_modal.scss b/assets/sass/protocol/components/_modal.scss index a5506632e..bf4734acd 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 { - 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: rgba(0, 0, 0, 0.85); bottom: 0; diff --git a/assets/sass/protocol/components/_sticky-promo.scss b/assets/sass/protocol/components/_sticky-promo.scss index 0507d3029..4736d4969 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 { - 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} { 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%; }