office-ui-fabric-core-rails 6.0.1.0 → 7.0.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +4 -4
- data/.travis.yml +1 -1
- data/Rakefile +1 -1
- data/lib/office-ui-fabric-core-rails/version.rb +2 -2
- data/package.json +2 -2
- data/vendor/assets/css/{fabric-6.0.1.scoped.css → fabric-7.0.0.scoped.css} +2663 -1993
- data/vendor/assets/css/fabric-7.0.0.scoped.min.css +6 -0
- data/vendor/assets/css/fabric.css +764 -94
- data/vendor/assets/css/fabric.min.css +2 -2
- data/vendor/assets/css/fabric.rtl.css +786 -108
- data/vendor/assets/css/fabric.rtl.min.css +2 -2
- data/vendor/assets/scss/Fabric.Scoped.scss +1 -1
- data/vendor/assets/scss/_Font.scss +10 -0
- data/vendor/assets/scss/_Icon.Definitions.scss +5 -4
- data/vendor/assets/scss/_Icon.RTL.scss +3 -0
- data/vendor/assets/scss/_Icon.scss +183 -21
- data/vendor/assets/scss/mixins/_Animation.Mixins.scss +34 -34
- data/vendor/assets/scss/mixins/_Font.Mixins.scss +14 -4
- data/vendor/assets/scss/mixins/_General.Mixins.scss +36 -198
- data/vendor/assets/scss/mixins/_Icon.Mixins.scss +176 -14
- data/vendor/assets/scss/variables/_Font.Variables.scss +25 -24
- data/yarn.lock +7 -0
- metadata +6 -5
- data/vendor/assets/css/fabric-6.0.1.scoped.min.css +0 -6
@@ -180,160 +180,160 @@
|
|
180
180
|
|
181
181
|
// Slide
|
182
182
|
@mixin ms-slideRightIn10 {
|
183
|
-
@include ms-animation((fadeIn, slideRightIn10), $ms-animation-duration-3, $ms-animation-ease-1);
|
183
|
+
@include ms-animation((ms-fadeIn, ms-slideRightIn10), $ms-animation-duration-3, $ms-animation-ease-1);
|
184
184
|
}
|
185
185
|
|
186
186
|
@mixin ms-slideRightIn20 {
|
187
|
-
@include ms-animation((fadeIn, slideRightIn20), $ms-animation-duration-3, $ms-animation-ease-1);
|
187
|
+
@include ms-animation((ms-fadeIn, ms-slideRightIn20), $ms-animation-duration-3, $ms-animation-ease-1);
|
188
188
|
}
|
189
189
|
|
190
190
|
@mixin ms-slideRightIn40 {
|
191
|
-
@include ms-animation((fadeIn, slideRightIn40), $ms-animation-duration-3, $ms-animation-ease-1);
|
191
|
+
@include ms-animation((ms-fadeIn, ms-slideRightIn40), $ms-animation-duration-3, $ms-animation-ease-1);
|
192
192
|
}
|
193
193
|
|
194
194
|
@mixin ms-slideRightIn400 {
|
195
|
-
@include ms-animation((fadeIn, slideRightIn400), $ms-animation-duration-3, $ms-animation-ease-1);
|
195
|
+
@include ms-animation((ms-fadeIn, ms-slideRightIn400), $ms-animation-duration-3, $ms-animation-ease-1);
|
196
196
|
}
|
197
197
|
|
198
198
|
@mixin ms-slideRightOut40 {
|
199
|
-
@include ms-animation((fadeOut, slideRightOut40), $ms-animation-duration-1, $ms-animation-ease-2);
|
199
|
+
@include ms-animation((ms-fadeOut, ms-slideRightOut40), $ms-animation-duration-1, $ms-animation-ease-2);
|
200
200
|
}
|
201
201
|
|
202
202
|
@mixin ms-slideRightOut400 {
|
203
|
-
@include ms-animation((fadeOut, slideRightOut400), $ms-animation-duration-1, $ms-animation-ease-2);
|
203
|
+
@include ms-animation((ms-fadeOut, ms-slideRightOut400), $ms-animation-duration-1, $ms-animation-ease-2);
|
204
204
|
}
|
205
205
|
|
206
206
|
@mixin ms-slideLeftIn10 {
|
207
|
-
@include ms-animation((fadeIn, slideLeftIn10), $ms-animation-duration-3, $ms-animation-ease-1);
|
207
|
+
@include ms-animation((ms-fadeIn, ms-slideLeftIn10), $ms-animation-duration-3, $ms-animation-ease-1);
|
208
208
|
}
|
209
209
|
|
210
210
|
@mixin ms-slideLeftIn20 {
|
211
|
-
@include ms-animation((fadeIn, slideLeftIn20), $ms-animation-duration-3, $ms-animation-ease-1);
|
211
|
+
@include ms-animation((ms-fadeIn, ms-slideLeftIn20), $ms-animation-duration-3, $ms-animation-ease-1);
|
212
212
|
}
|
213
213
|
|
214
214
|
@mixin ms-slideLeftIn40 {
|
215
|
-
@include ms-animation((fadeIn, slideLeftIn40), $ms-animation-duration-3, $ms-animation-ease-1);
|
215
|
+
@include ms-animation((ms-fadeIn, ms-slideLeftIn40), $ms-animation-duration-3, $ms-animation-ease-1);
|
216
216
|
}
|
217
217
|
|
218
218
|
@mixin ms-slideLeftIn400 {
|
219
|
-
@include ms-animation((fadeIn, slideLeftIn400), $ms-animation-duration-3, $ms-animation-ease-1);
|
219
|
+
@include ms-animation((ms-fadeIn, ms-slideLeftIn400), $ms-animation-duration-3, $ms-animation-ease-1);
|
220
220
|
}
|
221
221
|
|
222
222
|
@mixin ms-slideLeftOut40 {
|
223
|
-
@include ms-animation((fadeOut, slideLeftOut40), $ms-animation-duration-1, $ms-animation-ease-2);
|
223
|
+
@include ms-animation((ms-fadeOut, ms-slideLeftOut40), $ms-animation-duration-1, $ms-animation-ease-2);
|
224
224
|
}
|
225
225
|
|
226
226
|
@mixin ms-slideLeftOut400 {
|
227
|
-
@include ms-animation((fadeOut, slideLeftOut400), $ms-animation-duration-1, $ms-animation-ease-2);
|
227
|
+
@include ms-animation((ms-fadeOut, ms-slideLeftOut400), $ms-animation-duration-1, $ms-animation-ease-2);
|
228
228
|
}
|
229
229
|
|
230
230
|
@mixin ms-slideUpIn10 {
|
231
|
-
@include ms-animation((fadeIn, slideUpIn10), $ms-animation-duration-1, $ms-animation-ease-2);
|
231
|
+
@include ms-animation((ms-fadeIn, ms-slideUpIn10), $ms-animation-duration-1, $ms-animation-ease-2);
|
232
232
|
}
|
233
233
|
|
234
234
|
@mixin ms-slideUpIn20 {
|
235
|
-
@include ms-animation((fadeIn, slideUpIn20), $ms-animation-duration-3, $ms-animation-ease-1);
|
235
|
+
@include ms-animation((ms-fadeIn, ms-slideUpIn20), $ms-animation-duration-3, $ms-animation-ease-1);
|
236
236
|
}
|
237
237
|
|
238
238
|
@mixin ms-slideDownIn10 {
|
239
|
-
@include ms-animation((fadeIn, slideDownIn10), $ms-animation-duration-1, $ms-animation-ease-2);
|
239
|
+
@include ms-animation((ms-fadeIn, ms-slideDownIn10), $ms-animation-duration-1, $ms-animation-ease-2);
|
240
240
|
}
|
241
241
|
|
242
242
|
@mixin ms-slideDownIn20 {
|
243
|
-
@include ms-animation((fadeIn, slideDownIn20), $ms-animation-duration-3, $ms-animation-ease-1);
|
243
|
+
@include ms-animation((ms-fadeIn, ms-slideDownIn20), $ms-animation-duration-3, $ms-animation-ease-1);
|
244
244
|
}
|
245
245
|
|
246
246
|
@mixin ms-slideUpOut10 {
|
247
|
-
@include ms-animation((fadeOut, slideUpOut10), $ms-animation-duration-1, $ms-animation-ease-2);
|
247
|
+
@include ms-animation((ms-fadeOut, ms-slideUpOut10), $ms-animation-duration-1, $ms-animation-ease-2);
|
248
248
|
}
|
249
249
|
|
250
250
|
@mixin ms-slideUpOut20 {
|
251
|
-
@include ms-animation((fadeOut, slideUpOut20), $ms-animation-duration-1, $ms-animation-ease-2);
|
251
|
+
@include ms-animation((ms-fadeOut, ms-slideUpOut20), $ms-animation-duration-1, $ms-animation-ease-2);
|
252
252
|
}
|
253
253
|
|
254
254
|
@mixin ms-slideDownOut10 {
|
255
|
-
@include ms-animation((fadeOut, slideDownOut10), $ms-animation-duration-1, $ms-animation-ease-2);
|
255
|
+
@include ms-animation((ms-fadeOut, ms-slideDownOut10), $ms-animation-duration-1, $ms-animation-ease-2);
|
256
256
|
}
|
257
257
|
|
258
258
|
@mixin ms-slideDownOut20 {
|
259
|
-
@include ms-animation((fadeOut, slideDownOut20), $ms-animation-duration-1, $ms-animation-ease-2);
|
259
|
+
@include ms-animation((ms-fadeOut, ms-slideDownOut20), $ms-animation-duration-1, $ms-animation-ease-2);
|
260
260
|
}
|
261
261
|
|
262
262
|
// Scale
|
263
263
|
@mixin ms-scaleUpIn100 {
|
264
|
-
@include ms-animation((fadeIn, scaleUp100), $ms-animation-duration-3, $ms-animation-ease-1);
|
264
|
+
@include ms-animation((ms-fadeIn, ms-scaleUp100), $ms-animation-duration-3, $ms-animation-ease-1);
|
265
265
|
}
|
266
266
|
|
267
267
|
@mixin ms-scaleUpOut103 {
|
268
|
-
@include ms-animation((fadeOut, scaleUp103), $ms-animation-duration-1, $ms-animation-ease-2);
|
268
|
+
@include ms-animation((ms-fadeOut, ms-scaleUp103), $ms-animation-duration-1, $ms-animation-ease-2);
|
269
269
|
}
|
270
270
|
|
271
271
|
@mixin ms-scaleDownOut98 {
|
272
|
-
@include ms-animation((fadeOut, scaleDown98), $ms-animation-duration-1, $ms-animation-ease-2);
|
272
|
+
@include ms-animation((ms-fadeOut, ms-scaleDown98), $ms-animation-duration-1, $ms-animation-ease-2);
|
273
273
|
}
|
274
274
|
|
275
275
|
@mixin ms-scaleDownIn100 {
|
276
|
-
@include ms-animation((fadeIn, scaleDown100), $ms-animation-duration-3, $ms-animation-ease-1);
|
276
|
+
@include ms-animation((ms-fadeIn, ms-scaleDown100), $ms-animation-duration-3, $ms-animation-ease-1);
|
277
277
|
}
|
278
278
|
|
279
279
|
// Rotate
|
280
280
|
@mixin ms-rotate90deg {
|
281
281
|
// @todo: The duration should use a variable, likely $ms-animation-duration-1
|
282
|
-
@include ms-animation(rotate90, 0.1s, $ms-animation-ease-2);
|
282
|
+
@include ms-animation(ms-rotate90, 0.1s, $ms-animation-ease-2);
|
283
283
|
}
|
284
284
|
|
285
285
|
@mixin ms-rotateN90deg {
|
286
286
|
// @todo: The duration should use a variable, likely $ms-animation-duration-1
|
287
|
-
@include ms-animation(rotateN90, 0.1s, $ms-animation-ease-2);
|
287
|
+
@include ms-animation(ms-rotateN90, 0.1s, $ms-animation-ease-2);
|
288
288
|
}
|
289
289
|
|
290
290
|
|
291
291
|
// Fade
|
292
292
|
@mixin ms-fadeIn100 {
|
293
293
|
animation-duration: $ms-animation-duration-1; // @todo: Based on class name, likely intended to be 0.1s
|
294
|
-
animation-name: fadeIn;
|
294
|
+
animation-name: ms-fadeIn;
|
295
295
|
animation-fill-mode: both;
|
296
296
|
}
|
297
297
|
|
298
298
|
@mixin ms-fadeIn200 {
|
299
299
|
animation-duration: $ms-animation-duration-2; // @todo: Based on class name, likely intended to be 0.2s
|
300
|
-
animation-name: fadeIn;
|
300
|
+
animation-name: ms-fadeIn;
|
301
301
|
animation-fill-mode: both;
|
302
302
|
}
|
303
303
|
|
304
304
|
@mixin ms-fadeIn400 {
|
305
305
|
animation-duration: $ms-animation-duration-3; // @todo: Based on class name, likely intended to be 0.4s
|
306
|
-
animation-name: fadeIn;
|
306
|
+
animation-name: ms-fadeIn;
|
307
307
|
animation-fill-mode: both;
|
308
308
|
}
|
309
309
|
|
310
310
|
@mixin ms-fadeIn500 {
|
311
311
|
animation-duration: $ms-animation-duration-4; // @todo: Based on class name, likely intended to be 0.5s
|
312
|
-
animation-name: fadeIn;
|
312
|
+
animation-name: ms-fadeIn;
|
313
313
|
animation-fill-mode: both;
|
314
314
|
}
|
315
315
|
|
316
316
|
@mixin ms-fadeOut100 {
|
317
317
|
animation-duration: 0.1s; // @todo: This is the only duration that matches the class name
|
318
|
-
animation-name: fadeOut;
|
318
|
+
animation-name: ms-fadeOut;
|
319
319
|
animation-fill-mode: both;
|
320
320
|
}
|
321
321
|
|
322
322
|
@mixin ms-fadeOut200 {
|
323
323
|
animation-duration: $ms-animation-duration-1; // @todo: Based on class name, likely intended to be 0.2s
|
324
|
-
animation-name: fadeOut;
|
324
|
+
animation-name: ms-fadeOut;
|
325
325
|
animation-fill-mode: both;
|
326
326
|
}
|
327
327
|
|
328
328
|
@mixin ms-fadeOut400 {
|
329
329
|
animation-duration: $ms-animation-duration-3; // @todo: Based on class name, likely intended to be 0.4s
|
330
|
-
animation-name: fadeOut;
|
330
|
+
animation-name: ms-fadeOut;
|
331
331
|
animation-fill-mode: both;
|
332
332
|
}
|
333
333
|
|
334
334
|
@mixin ms-fadeOut500 {
|
335
335
|
animation-duration: $ms-animation-duration-4; // @todo: Based on class name, likely intended to be 0.5s
|
336
|
-
animation-name: fadeOut;
|
336
|
+
animation-name: ms-fadeOut;
|
337
337
|
animation-fill-mode: both;
|
338
338
|
}
|
339
339
|
|
@@ -15,7 +15,7 @@
|
|
15
15
|
font-family: $font-family-name;
|
16
16
|
src: url('#{$ms-font-cdn-path}/#{$cdn-folder}/#{$cdn-font-name}-light.woff2') format('woff2'),
|
17
17
|
url('#{$ms-font-cdn-path}/#{$cdn-folder}/#{$cdn-font-name}-light.woff') format('woff');
|
18
|
-
font-weight:
|
18
|
+
font-weight: $ms-font-weight-light;
|
19
19
|
font-style: normal;
|
20
20
|
}
|
21
21
|
|
@@ -23,7 +23,7 @@
|
|
23
23
|
font-family: $font-family-name;
|
24
24
|
src: url('#{$ms-font-cdn-path}/#{$cdn-folder}/#{$cdn-font-name}-semilight.woff2') format('woff2'),
|
25
25
|
url('#{$ms-font-cdn-path}/#{$cdn-folder}/#{$cdn-font-name}-semilight.woff') format('woff');
|
26
|
-
font-weight:
|
26
|
+
font-weight: $ms-font-weight-semilight;
|
27
27
|
font-style: normal;
|
28
28
|
}
|
29
29
|
|
@@ -31,7 +31,7 @@
|
|
31
31
|
font-family: $font-family-name;
|
32
32
|
src: url('#{$ms-font-cdn-path}/#{$cdn-folder}/#{$cdn-font-name}-regular.woff2') format('woff2'),
|
33
33
|
url('#{$ms-font-cdn-path}/#{$cdn-folder}/#{$cdn-font-name}-regular.woff') format('woff');
|
34
|
-
font-weight:
|
34
|
+
font-weight: $ms-font-weight-regular;
|
35
35
|
font-style: normal;
|
36
36
|
}
|
37
37
|
|
@@ -39,7 +39,7 @@
|
|
39
39
|
font-family: $font-family-name;
|
40
40
|
src: url('#{$ms-font-cdn-path}/#{$cdn-folder}/#{$cdn-font-name}-semibold.woff2') format('woff2'),
|
41
41
|
url('#{$ms-font-cdn-path}/#{$cdn-folder}/#{$cdn-font-name}-semibold.woff') format('woff');
|
42
|
-
font-weight:
|
42
|
+
font-weight: $ms-font-weight-semibold;
|
43
43
|
font-style: normal;
|
44
44
|
}
|
45
45
|
}
|
@@ -65,6 +65,12 @@
|
|
65
65
|
font-weight: $ms-font-weight-light;
|
66
66
|
}
|
67
67
|
|
68
|
+
// Extra-Large Styles
|
69
|
+
@mixin ms-font-xl-plus {
|
70
|
+
font-size: $ms-font-size-xl-plus;
|
71
|
+
font-weight: $ms-font-weight-light;
|
72
|
+
}
|
73
|
+
|
68
74
|
// Extra-Large Styles
|
69
75
|
@mixin ms-font-xl {
|
70
76
|
font-size: $ms-font-size-xl;
|
@@ -143,6 +149,10 @@
|
|
143
149
|
font-size: $ms-font-size-xxl;
|
144
150
|
}
|
145
151
|
|
152
|
+
@mixin ms-fontSize-xlPlus {
|
153
|
+
font-size: $ms-font-size-xl-plus;
|
154
|
+
}
|
155
|
+
|
146
156
|
@mixin ms-fontSize-xl {
|
147
157
|
font-size: $ms-font-size-xl;
|
148
158
|
}
|
@@ -6,205 +6,42 @@
|
|
6
6
|
// Vendor-prefixed mixins
|
7
7
|
|
8
8
|
// Border radius.
|
9
|
-
@mixin ms-border-radius($
|
10
|
-
border-radius: $
|
9
|
+
@mixin ms-border-radius($radius: 5px) {
|
10
|
+
border-radius: $radius;
|
11
11
|
background-clip: padding-box;
|
12
12
|
}
|
13
13
|
|
14
14
|
// Drop shadow.
|
15
|
-
@mixin ms-drop-shadow($
|
16
|
-
box-shadow: $
|
15
|
+
@mixin ms-drop-shadow($x-offset: 0, $y-offset: 0, $blur: 5px, $spread: 0, $alpha: 0.4) {
|
16
|
+
box-shadow: $x-offset $y-offset $blur $spread rgba(0, 0, 0, $alpha);
|
17
17
|
}
|
18
18
|
|
19
19
|
// Background gradient.
|
20
|
-
@mixin ms-background-gradient($
|
21
|
-
background-color: $ms-start;
|
22
|
-
background-image: linear-gradient($ms-origin, $ms-start $ms-start-location, $ms-stop $ms-stop-location);
|
23
|
-
}
|
24
|
-
|
25
|
-
// Rotation.
|
26
|
-
@mixin ms-rotate($ms-deg) {
|
27
|
-
transform: rotate($ms-deg);
|
28
|
-
}
|
29
|
-
|
30
|
-
// Reset button styles.
|
31
|
-
@mixin ms-button-reset() {
|
32
|
-
background: none;
|
33
|
-
border: 0;
|
34
|
-
cursor: pointer;
|
35
|
-
}
|
36
|
-
|
37
|
-
@mixin ms-reset-animation() {
|
38
|
-
-webkit-animation: none;
|
39
|
-
-moz-animation: none;
|
40
|
-
-ms-animation: none;
|
41
|
-
-o-animation: none;
|
42
|
-
animation: none;
|
43
|
-
}
|
44
|
-
|
45
|
-
@mixin ms-reset-backface() {
|
46
|
-
backface-visibility: visible;
|
47
|
-
}
|
48
|
-
|
49
|
-
@mixin ms-reset-background() {
|
50
|
-
background: 0;
|
51
|
-
background-clip: border-box;
|
52
|
-
background-origin: padding-box;
|
53
|
-
}
|
54
|
-
|
55
|
-
@mixin ms-reset-border() {
|
56
|
-
border: 0;
|
57
|
-
border-collapse: separate;
|
58
|
-
border-image: none;
|
59
|
-
border-radius: 0;
|
60
|
-
border-spacing: 0;
|
61
|
-
}
|
62
|
-
|
63
|
-
@mixin ms-reset-box-shadow() {
|
64
|
-
-webkit-box-shadow: none;
|
65
|
-
-moz-box-shadow: none;
|
66
|
-
box-shadow: none;
|
67
|
-
}
|
68
|
-
|
69
|
-
@mixin ms-reset-box-sizing() {
|
70
|
-
box-sizing: content-box;
|
71
|
-
}
|
72
|
-
|
73
|
-
@mixin ms-reset-columns() {
|
74
|
-
columns: auto;
|
75
|
-
column-count: auto;
|
76
|
-
column-fill: balance;
|
77
|
-
column-gap: normal;
|
78
|
-
column-rule: medium none currentColor;
|
79
|
-
column-rule-color: currentColor;
|
80
|
-
column-rule-style: none;
|
81
|
-
column-rule-width: none;
|
82
|
-
column-span: 1;
|
83
|
-
column-width: auto;
|
84
|
-
}
|
85
|
-
|
86
|
-
|
87
|
-
// Fonts and Typography Resets
|
88
|
-
@mixin ms-reset-font() {
|
89
|
-
font: normal;
|
90
|
-
font-family: inherit;
|
91
|
-
font-size: normal;
|
92
|
-
font-style: normal;
|
93
|
-
font-variant: normal;
|
94
|
-
font-weight: normal;
|
95
|
-
}
|
96
|
-
|
97
|
-
@mixin ms-reset-text-styling() {
|
98
|
-
text-align: inherit;
|
99
|
-
text-align-last: auto;
|
100
|
-
text-decoration: none;
|
101
|
-
text-decoration-color: inherit;
|
102
|
-
text-decoration-line: none;
|
103
|
-
text-decoration-style: solid;
|
104
|
-
text-indent: 0;
|
105
|
-
text-shadow: none;
|
106
|
-
text-transform: none;
|
107
|
-
line-height: normal;
|
108
|
-
letter-spacing: normal;
|
109
|
-
word-spacing: normal;
|
110
|
-
}
|
111
|
-
|
112
|
-
|
113
|
-
// Box Model Resets
|
114
|
-
@mixin ms-reset-padding() {
|
115
|
-
padding: 0;
|
116
|
-
}
|
117
|
-
|
118
|
-
@mixin ms-reset-margins() {
|
119
|
-
margin: 0;
|
120
|
-
}
|
121
|
-
|
122
|
-
@mixin ms-reset-overflow() {
|
123
|
-
overflow: visible;
|
124
|
-
}
|
20
|
+
@mixin ms-background-gradient($origin: left, $start: #000, $start-location: 0%, $stop: #FFF, $stop-location: 100%) {
|
125
21
|
|
126
|
-
|
127
|
-
|
128
|
-
|
129
|
-
|
130
|
-
|
131
|
-
|
132
|
-
|
133
|
-
|
134
|
-
}
|
135
|
-
|
136
|
-
|
137
|
-
|
138
|
-
left
|
139
|
-
|
140
|
-
|
141
|
-
}
|
142
|
-
|
143
|
-
@mixin ms-reset-float() {
|
144
|
-
float: none;
|
145
|
-
}
|
146
|
-
|
147
|
-
@mixin ms-reset-height($ms-useMaxMin: false) {
|
148
|
-
height: auto;
|
149
|
-
@if $ms-useMaxMin == true {
|
150
|
-
min-height: 0;
|
151
|
-
max-height: 0;
|
152
|
-
}
|
153
|
-
}
|
154
|
-
|
155
|
-
@mixin ms-reset-width($ms-useMaxMin: false) {
|
156
|
-
width: auto;
|
157
|
-
@if $ms-useMaxMin == true {
|
158
|
-
min-width: 0;
|
159
|
-
max-width: 0;
|
160
|
-
}
|
161
|
-
}
|
162
|
-
|
163
|
-
@mixin ms-reset-position() {
|
164
|
-
position: static;
|
165
|
-
}
|
166
|
-
|
167
|
-
@mixin ms-reset-perspective() {
|
168
|
-
-webkit-perspective: none;
|
169
|
-
-webkit-perspective-origin: 50% 50%;
|
170
|
-
perspective: none;
|
171
|
-
perspective-origin: 50% 50%;
|
172
|
-
|
173
|
-
}
|
174
|
-
|
175
|
-
@mixin ms-reset-transition() {
|
176
|
-
-webkit-transition: none;
|
177
|
-
transition: none;
|
178
|
-
}
|
179
|
-
|
180
|
-
@mixin ms-reset-list-style() {
|
181
|
-
list-style: none;
|
182
|
-
}
|
183
|
-
|
184
|
-
@mixin ms-reset-transform() {
|
185
|
-
-ms-transform: none;
|
186
|
-
-webkit-transform: none;
|
187
|
-
-webkit-transform-style: flat;
|
188
|
-
transform: none;
|
189
|
-
transform-style: flat;
|
190
|
-
}
|
191
|
-
|
192
|
-
@mixin ms-reset-outline() {
|
193
|
-
outline: 0;
|
194
|
-
}
|
195
|
-
|
196
|
-
@mixin ms-reset-page-break() {
|
197
|
-
page-break-after: auto;
|
198
|
-
page-break-before: auto;
|
199
|
-
page-break-inside: auto;
|
200
|
-
}
|
22
|
+
// To maintain compatibility with the old arguments, reverse
|
23
|
+
// the $origin direction and set it as $destination.
|
24
|
+
$destination: null;
|
25
|
+
@if $origin == top {
|
26
|
+
$destination: bottom;
|
27
|
+
}
|
28
|
+
@if $origin == right {
|
29
|
+
$destination: left;
|
30
|
+
}
|
31
|
+
@if $origin == bottom {
|
32
|
+
$destination: top;
|
33
|
+
}
|
34
|
+
@if $origin == left {
|
35
|
+
$destination: right;
|
36
|
+
}
|
201
37
|
|
202
|
-
|
203
|
-
|
38
|
+
background-color: $start;
|
39
|
+
background-image: linear-gradient(to $destination, $start $start-location, $stop $stop-location);
|
204
40
|
}
|
205
41
|
|
206
|
-
|
207
|
-
|
42
|
+
// Rotation.
|
43
|
+
@mixin ms-rotate($deg) {
|
44
|
+
transform: rotate($deg);
|
208
45
|
}
|
209
46
|
|
210
47
|
// Prevents user selection of text elements.
|
@@ -232,12 +69,12 @@
|
|
232
69
|
display: flex;
|
233
70
|
}
|
234
71
|
|
235
|
-
@mixin ms-alignItems($
|
236
|
-
-webkit-box-align: $
|
237
|
-
-moz-box-align: $
|
238
|
-
-ms-flex-align: $
|
239
|
-
-webkit-align-items: $
|
240
|
-
align-items: $
|
72
|
+
@mixin ms-alignItems($mode) {
|
73
|
+
-webkit-box-align: $mode;
|
74
|
+
-moz-box-align: $mode;
|
75
|
+
-ms-flex-align: $mode;
|
76
|
+
-webkit-align-items: $mode;
|
77
|
+
align-items: $mode;
|
241
78
|
}
|
242
79
|
|
243
80
|
// Base/wrapper component to set typography throughout the app.
|
@@ -248,6 +85,7 @@
|
|
248
85
|
@include ms-inherit-font-family();
|
249
86
|
color: $ms-color-neutralPrimary;
|
250
87
|
font-family: $ms-font-family-west-european;
|
88
|
+
font-size: $ms-font-size-m;
|
251
89
|
}
|
252
90
|
|
253
91
|
// Set the font-family to 'inherit' for elements where the browser
|
@@ -329,12 +167,12 @@
|
|
329
167
|
// Basic border-box, margin, and padding reset.
|
330
168
|
@mixin ms-normalize {
|
331
169
|
@include ms-borderBox;
|
332
|
-
|
333
|
-
|
334
|
-
|
170
|
+
box-shadow: none;
|
171
|
+
margin: 0;
|
172
|
+
padding: 0;
|
335
173
|
}
|
336
174
|
|
337
|
-
//
|
175
|
+
// Generate text alignment classes, such as .ms-textAlignLeft
|
338
176
|
// @param [variable list] $alignments
|
339
177
|
@mixin ms-textAlign($alignments...) {
|
340
178
|
@each $align in $alignments {
|