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.
@@ -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: 100;
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: 200;
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: 400;
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: 600;
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($ms-radius: 5px) {
10
- border-radius: $ms-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($ms-x-offset: 0, $ms-y-offset: 0, $ms-blur: 5px, $ms-spread: 0, $ms-alpha: 0.4) {
16
- box-shadow: $ms-x-offset $ms-y-offset $ms-blur $ms-spread rgba(0, 0, 0, $ms-alpha);
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($ms-origin: left, $ms-start: #000, $ms-start-location: 0%, $ms-stop: #FFF, $ms-stop-location: 100%) {
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
- @mixin ms-reset-max() {
127
- max-height: none;
128
- max-width: none;
129
- }
130
-
131
- @mixin ms-reset-min() {
132
- min-height: 0;
133
- min-width: 0;
134
- }
135
-
136
- @mixin ms-reset-positioning() {
137
- bottom: auto;
138
- left: auto;
139
- top: auto;
140
- left: auto;
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
- @mixin ms-reset-display() {
203
- display: block;
38
+ background-color: $start;
39
+ background-image: linear-gradient(to $destination, $start $start-location, $stop $stop-location);
204
40
  }
205
41
 
206
- @mixin ms-reset-vertical-align() {
207
- vertical-align: baseline;
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($ms-mode) {
236
- -webkit-box-align: $ms-mode;
237
- -moz-box-align: $ms-mode;
238
- -ms-flex-align: $ms-mode;
239
- -webkit-align-items: $ms-mode;
240
- align-items: $ms-mode;
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
- @include ms-reset-margins;
333
- @include ms-reset-padding;
334
- @include ms-reset-box-shadow;
170
+ box-shadow: none;
171
+ margin: 0;
172
+ padding: 0;
335
173
  }
336
174
 
337
- // To set various text alignment styles
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 {