Skip to content

Remove all mixins supporting vendor prefixes (Fix #957) #1043

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
wants to merge 2 commits into
base: main
Choose a base branch
from
Draft
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
25 changes: 24 additions & 1 deletion CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -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

Expand All @@ -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

Expand All @@ -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
Expand Down
4 changes: 2 additions & 2 deletions assets/sass/protocol/base/elements/_forms.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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),
Expand Down
10 changes: 5 additions & 5 deletions assets/sass/protocol/components/_billboard.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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 {
Expand Down Expand Up @@ -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;
}

Expand Down
4 changes: 2 additions & 2 deletions assets/sass/protocol/components/_button.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
4 changes: 2 additions & 2 deletions assets/sass/protocol/components/_callout.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Expand All @@ -82,7 +82,7 @@
}

.mzp-c-callout-cta {
@include flexbox;
display: flex;
align-items: center;
justify-content: flex-end;
width: auto;
Expand Down
8 changes: 4 additions & 4 deletions assets/sass/protocol/components/_card.scss
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
// Base card class

.mzp-c-card {
@include border-box;
box-sizing: border-box;
background: $color-white;
margin-bottom: $spacing-lg;

Expand Down Expand Up @@ -40,7 +40,7 @@
}

.mzp-c-card-content {
@include border-box;
box-sizing: border-box;
padding: $spacing-sm;
}

Expand Down Expand Up @@ -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;
}
}
Expand Down
6 changes: 3 additions & 3 deletions assets/sass/protocol/components/_feature-card.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
}
Expand Down Expand Up @@ -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;
}
}
}
Expand Down
11 changes: 5 additions & 6 deletions assets/sass/protocol/components/_footer.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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;

Expand All @@ -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;
Expand Down Expand Up @@ -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;
Expand All @@ -186,7 +185,7 @@
}

button[aria-expanded='true']::before {
@include transform(rotate(45deg));
transform: rotate(45deg);
}
}

Expand Down
4 changes: 2 additions & 2 deletions assets/sass/protocol/components/_menu-item.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Expand Down Expand Up @@ -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;
}

Expand Down
10 changes: 4 additions & 6 deletions assets/sass/protocol/components/_menu-list.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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: '';
Expand Down Expand Up @@ -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,
Expand Down
18 changes: 8 additions & 10 deletions assets/sass/protocol/components/_menu.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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 {
Expand All @@ -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; /* stylelint-disable-line no-unknown-animations */
}
}

Expand All @@ -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;
Expand All @@ -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;
Expand All @@ -227,7 +225,7 @@

&:hover,
&:focus {
@include transform(scale(1.2));
transform: scale(1.2);
}

@media #{$mq-md} {
Expand All @@ -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;
Expand Down
10 changes: 4 additions & 6 deletions assets/sass/protocol/components/_modal.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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: rgba(0, 0, 0, 0.85);
bottom: 0;
Expand Down Expand Up @@ -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;
Expand All @@ -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 {
Expand Down
Loading