Skip to content

Commit 559b65b

Browse files
author
Stephanie Hobson
committed
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`
1 parent d650b24 commit 559b65b

21 files changed

+75
-214
lines changed

‎CHANGELOG.md

Lines changed: 17 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22

33
## Features
44

5+
* **css:** (breaking) Remove support for vendor prefixing (#957)
56
* **css:** Apply hover cursor from Details component to Details element (#948)
67

78
## Bug Fixes
@@ -10,6 +11,21 @@
1011

1112
## Migration Tips
1213

14+
* This version removes mixins which added vendor-prefixes. Browser support for these is now excellent.
15+
- One migration path is to edit your code to use the unprefixed versions.
16+
- Another option is to move these utility mixins into your own code base (though, be aware they are
17+
no longer used in Protocol and this will not give you backwards compatible Protocol components).
18+
- If you need that level of vendor prefix support consider adding a tool such as
19+
[autoprefixer](https://github.com/postcss/autoprefixer) to your code base.
20+
- Affected mixins are:
21+
- `animation`
22+
- `appearance`
23+
- `background-size`
24+
- `box-decoration-break`
25+
- `box-sizing`
26+
- `flexbox`, `flex`, `flex-direction`, `flex-wrap`, `align-itmes`, `justify-content,`
27+
- `transform`, `transform-origin`, `transform-style`
28+
- `transition`, `transition-property`, `transition-duration`, `transition-delay`
1329
* See notes for [Protocol Assets 5.4.0](https://github.com/mozilla/protocol-assets/blob/main/CHANGELOG.md#540)
1430

1531
# 19.3.0
@@ -58,7 +74,7 @@
5874
* Update references to the `call-out` SCSS file to `callout` in any `@import` or `@use` rules.
5975
** e.g. `@use 'components/call-out';` should change to `@use 'components/callout';`
6076
* The rebuilt Callout doesn't feature integrated brand logos. Use Logo and Wordmark components instead.
61-
* The rebuilt Compact Callout lacks an integrated logo, so it no longer positions the logo at one end of the component. A Logo or Wordmark component should appear in the body instead.
77+
* The rebuilt Compact Callout lacks an integrated logo`, `so it no longer positions the logo at one end of the component. A Logo or Wordmark component should appear in the body instead.
6278
* Convert any instances of the Hero component to either Split or Callout.
6379
* Convert any instances of the Picto Card component to Picto.
6480

‎assets/sass/protocol/base/elements/_forms.scss

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -295,8 +295,8 @@ input[type='file'] {
295295
// with thanks to https://www.filamentgroup.com/lab/select-css.html
296296

297297
select {
298-
@include appearance(none);
299-
@include border-box;
298+
appearance: none;
299+
box-sizing: border-box;
300300
@include bidi((
301301
(background-position, right 8px top 50%, left 8px top 50%),
302302
(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),

‎assets/sass/protocol/components/_billboard.scss

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ $billboard-content-width-lg: 374px + $spacing-md; // content width + spacing med
1313
position: relative;
1414

1515
.mzp-c-billboard-content {
16-
@include border-box;
16+
box-sizing: border-box;
1717
margin: 0 auto;
1818
max-width: 346px;
1919
text-align: center;
@@ -51,9 +51,9 @@ $billboard-content-width-lg: 374px + $spacing-md; // content width + spacing med
5151
}
5252

5353
.mzp-c-billboard-content-container {
54-
@include align-items(center);
55-
@include flexbox;
56-
@include justify-content(center);
54+
align-items: center;
55+
display: flex;
56+
justify-content: center;
5757
}
5858

5959
.mzp-c-billboard-image-container {
@@ -98,7 +98,7 @@ $billboard-content-width-lg: 374px + $spacing-md; // content width + spacing med
9898
margin: $layout-xl 0;
9999

100100
.mzp-c-billboard-content {
101-
@include border-box;
101+
box-sizing: border-box;
102102
max-width: 374px;
103103
}
104104

‎assets/sass/protocol/components/_button.scss

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -78,9 +78,9 @@
7878

7979
.mzp-c-button, /* stylelint-disable-line no-duplicate-selectors */
8080
a.mzp-c-button {
81-
@include border-box;
81+
box-sizing: border-box;
8282
@include font-size(16px);
83-
@include transition(background-color 100ms, box-shadow 100ms, color 100ms);
83+
transition: background-color 100ms, box-shadow 100ms, color 100ms;
8484
border-radius: $border-radius-sm;
8585
border: 2px solid transparent;
8686
cursor: pointer;

‎assets/sass/protocol/components/_callout.scss

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -71,7 +71,7 @@
7171
@supports (display: grid) {
7272
@media #{$mq-md} {
7373
.mzp-l-content {
74-
@include grid-column-gap($spacing-xl);
74+
grid-column-gap: $spacing-xl;
7575
display: grid;
7676
grid-template-columns: 2fr 1fr;
7777
}
@@ -82,7 +82,7 @@
8282
}
8383

8484
.mzp-c-callout-cta {
85-
@include flexbox;
85+
display: flex;
8686
align-items: center;
8787
justify-content: flex-end;
8888
width: auto;

‎assets/sass/protocol/components/_card.scss

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
// Base card class
99

1010
.mzp-c-card {
11-
@include border-box;
11+
box-sizing: border-box;
1212
background: $color-white;
1313
margin-bottom: $spacing-lg;
1414

@@ -40,7 +40,7 @@
4040
}
4141

4242
.mzp-c-card-content {
43-
@include border-box;
43+
box-sizing: border-box;
4444
padding: $spacing-sm;
4545
}
4646

@@ -107,12 +107,12 @@
107107
&:hover,
108108
&:active,
109109
&:focus {
110-
@include transition(box-shadow 0.1s ease-in-out);
110+
transition: box-shadow 0.1s ease-in-out;
111111
box-shadow: 0 0 0 4px $color-marketing-gray-20;
112112

113113
.mzp-c-card-title,
114114
.mzp-c-card-cta-text {
115-
@include transition(border-bottom-color 100ms ease-in-out);
115+
transition: border-bottom-color 100ms ease-in-out;
116116
border-bottom: 2px solid;
117117
}
118118
}

‎assets/sass/protocol/components/_feature-card.scss

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -159,11 +159,11 @@
159159
&.mzp-l-card-feature-right-half,
160160
&.mzp-l-card-feature-left-third,
161161
&.mzp-l-card-feature-right-third {
162-
@include grid-column-gap($spacing-xl);
162+
grid-column-gap: $spacing-xl;
163163
display: grid;
164164

165165
.mzp-c-card-feature-content {
166-
@include flexbox;
166+
display: flex;
167167
align-items: center;
168168
}
169169
}
@@ -220,7 +220,7 @@
220220
&.mzp-l-card-feature-right-half,
221221
&.mzp-l-card-feature-left-third,
222222
&.mzp-l-card-feature-right-third {
223-
@include grid-column-gap($spacing-2xl);
223+
grid-column-gap: $spacing-2xl;
224224
}
225225
}
226226
}

‎assets/sass/protocol/components/_footer.scss

Lines changed: 5 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@
3636

3737
.mzp-c-footer-primary {
3838
@include text-body-md;
39-
@include border-box;
39+
box-sizing: border-box;
4040
@include clearfix;
4141
margin: 0 auto $spacing-2xl;
4242

@@ -53,8 +53,7 @@
5353

5454
a {
5555
background: url('#{$image-path}/logos/mozilla/logo-word-hor-white.svg') no-repeat;
56-
57-
@include background-size(100px, 32px);
56+
background-size: 100px, 32px;
5857
@include image-replaced;
5958
display: inline-block;
6059
height: 32px;
@@ -159,10 +158,9 @@
159158

160159
button::before {
161160
background: $url-image-expand-white top left no-repeat;
162-
163-
@include background-size(24px, 24px);
161+
background-size: 24px, 24px;
164162
@include bidi(((right, 8px, left, auto),));
165-
@include transition(transform 100ms ease-in-out);
163+
transition: transform 100ms ease-in-out;
166164
content: '';
167165
height: 24px;
168166
margin-top: -12px;
@@ -172,7 +170,7 @@
172170
}
173171

174172
button[aria-expanded='true']::before {
175-
@include transform(rotate(45deg));
173+
transform: rotate(45deg);
176174
}
177175
}
178176

‎assets/sass/protocol/components/_menu-item.scss

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ $icon-size: 24px;
2727
&:active,
2828
&:focus {
2929
.mzp-c-menu-item-title {
30-
@include transition(border-bottom-color 100ms ease-in-out);
30+
transition: border-bottom-color 100ms ease-in-out;
3131
border-bottom: 2px solid $color-black;
3232
color: $color-black;
3333
}
@@ -118,7 +118,7 @@ $icon-size: 24px;
118118

119119
@media #{$mq-md} {
120120
&:hover {
121-
@include transition(box-shadow 0.1s ease-in-out);
121+
transition: box-shadow 0.1s ease-in-out;
122122
box-shadow: 0 0 0 4px $color-marketing-gray-20;
123123
}
124124

‎assets/sass/protocol/components/_menu-list.scss

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@
3838
@include bidi(((padding-right, $spacing-sm * 2 + 14px, padding-left, $spacing-sm),));
3939

4040
&::after {
41-
@include background-size(20px, 20px);
41+
background-size: 20px, 20px;
4242
@include bidi(((right, $spacing-sm, left, auto),));
4343
bottom: $spacing-sm;
4444
content: '';
@@ -87,21 +87,19 @@
8787
width: 100%;
8888

8989
&::after {
90-
@include background-size(20px, 20px);
9190
@include bidi(((right, 0, left, auto),));
92-
background: $url-image-arrow-down-link center bottom no-repeat;
91+
background: $url-image-arrow-down-link center bottom / 20px, 20px no-repeat;
9392
bottom: 1px;
9493
content: '';
9594
display: inline-block;
9695
position: absolute;
9796
top: 0;
9897
width: 16px;
99-
100-
@include transition(transform 200ms ease-in-out);
98+
transition: transform 200ms ease-in-out;
10199
}
102100

103101
&[aria-expanded='true']::after {
104-
@include transform(scaleY(-1));
102+
transform: scaleY(-1);
105103
}
106104

107105
&:hover,

0 commit comments

Comments
 (0)