Skip to content

Commit e535cd3

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 e535cd3

21 files changed

+75
-216
lines changed

‎CHANGELOG.md

+17-1
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

+2-2
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

+5-5
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

+2-2
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

+2-2
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

+4-4
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

+3-3
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

+5-7
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

+2-2
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

+4-6
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,

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

+8-10
Original file line numberDiff line numberDiff line change
@@ -74,11 +74,9 @@
7474
text-decoration: none;
7575

7676
&::before {
77-
background: $url-image-expand-black top left no-repeat;
78-
79-
@include background-size(20px, 20px);
77+
background: $url-image-expand-black top left / 20px, 20px no-repeat;
8078
@include bidi(((right, 8px, left, auto),));
81-
@include transition(transform 100ms ease-in-out);
79+
transition: transform 100ms ease-in-out;
8280
content: '';
8381
height: 20px;
8482
margin-top: -8px;
@@ -168,7 +166,7 @@
168166
.mzp-c-menu.mzp-is-enhanced .mzp-c-menu-category {
169167
&.mzp-is-selected {
170168
.mzp-c-menu-title::before {
171-
@include transform(rotate(45deg));
169+
transform: rotate(45deg);
172170
}
173171

174172
.mzp-c-menu-panel {
@@ -181,7 +179,7 @@
181179
&.mzp-is-animated {
182180
.mzp-c-menu-panel,
183181
.mzp-c-menu-title::after {
184-
@include animation(mzp-a-fade-in 80ms ease-in 0ms 1 normal both);
182+
animation: mzp-a-fade-in 80ms ease-in 0ms 1 normal both;
185183
}
186184
}
187185

@@ -204,7 +202,7 @@
204202
// Menu panel
205203

206204
.mzp-c-menu-panel {
207-
@include border-box;
205+
box-sizing: border-box;
208206
background: $color-white;
209207
display: none;
210208
padding-top: $spacing-lg;
@@ -213,7 +211,7 @@
213211
// Close button is only visible for large screens.
214212
.mzp-c-menu-button-close {
215213
@include image-replaced;
216-
@include transition(transform 100ms ease-in-out);
214+
transition: transform 100ms ease-in-out;
217215
background: transparent url('#{$image-path}/icons/close.svg') center center no-repeat;
218216
border: none;
219217
cursor: pointer;
@@ -227,7 +225,7 @@
227225

228226
&:hover,
229227
&:focus {
230-
@include transform(scale(1.2));
228+
transform: scale(1.2);
231229
}
232230

233231
@media #{$mq-md} {
@@ -250,7 +248,7 @@
250248
}
251249

252250
.mzp-c-menu-panel-container {
253-
@include border-box;
251+
box-sizing: border-box;
254252
margin: 0 auto;
255253
max-width: $content-max;
256254
padding: 0;

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

+4-6
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ html.mzp-is-noscroll {
3131
}
3232

3333
.mzp-c-modal {
34-
@include animation(mzp-a-fade-in 300ms ease-in 0ms 1 normal both);
34+
animation: mzp-a-fade-in 300ms ease-in 0ms 1 normal both;
3535
background: $color-black;
3636
background: rgba(0, 0, 0, 0.85);
3737
bottom: 0;
@@ -79,9 +79,7 @@ html.mzp-is-noscroll {
7979

8080
.mzp-c-modal-button-close {
8181
@include image-replaced;
82-
background: transparent url('#{$image-path}/icons/close-white.svg') center center no-repeat;
83-
84-
@include background-size(20px 20px);
82+
background: transparent url('#{$image-path}/icons/close-white.svg') center center / 20px, 20px no-repeat;
8583
border: none;
8684
height: 42px;
8785
min-width: 0;
@@ -91,8 +89,8 @@ html.mzp-is-noscroll {
9189

9290
&:hover,
9391
&:focus {
94-
@include transition(transform 0.1s ease-in-out);
95-
@include transform(scale(1.1));
92+
transition: transform 0.1s ease-in-out;
93+
transform: scale(1.1);
9694
}
9795

9896
&:focus {

0 commit comments

Comments
 (0)