@microsoft/sp-component-base 1.16.1 → 1.17.0-beta.3

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.
Files changed (57) hide show
  1. package/dist/467dc675-7cc5-4709-8aac-78e3b71bd2f6.manifest.json +72 -72
  2. package/dist/chunk.legacy-third-party-fabric-core-localfont_none_f116e3020ea59afe9c30.js +1 -0
  3. package/dist/index-internal-beta.d.ts +5 -0
  4. package/dist/index-internal-public.d.ts +5 -0
  5. package/dist/index-internal.d.ts +5 -0
  6. package/dist/{sp-component-base_en-us_ee18de6e19b14eb89178.js → sp-component-base_default_e6c42e836798d1199613.js} +1 -1
  7. package/dist/sp-component-base_en-us_e6c42e836798d1199613.js +1 -0
  8. package/dist/sp-component-base_qps-ploc_e6c42e836798d1199613.js +1 -0
  9. package/dist/sp-component-base_qps-ploca_e6c42e836798d1199613.js +1 -0
  10. package/dist/tsdoc-metadata.json +1 -1
  11. package/lib-commonjs/BaseComponent.js +22 -0
  12. package/lib-commonjs/DynamicDataSourceManager.js +11 -7
  13. package/lib-commonjs/IComponentPosition.js +3 -0
  14. package/lib-commonjs/chunks/legacy-third-party-fabric-core/fabric-core-sass/Fabric.LocalFont.scss.css +9247 -0
  15. package/lib-commonjs/chunks/legacy-third-party-fabric-core/fabric-core-sass/Fabric.LocalFontKillSwitchActivated.scss.css +11267 -0
  16. package/lib-commonjs/chunks/legacy-third-party-fabric-core/fabric-core-shim.scss.css +2063 -0
  17. package/lib-commonjs/chunks/legacy-third-party-fabric-core/{fabric-core-shimKillSwitchActivated.scss → fabric-core-shimKillSwitchActivated.scss.css} +222 -534
  18. package/lib-commonjs/chunks/legacy-third-party-fabric-core/iconDefinitions.css +2 -7
  19. package/lib-commonjs/common/KillSwitches.js +6 -10
  20. package/lib-commonjs/styles/{shimmer.module.scss → shimmer.module.scss.css} +2 -4
  21. package/package.json +17 -14
  22. package/dist/chunk.legacy-third-party-fabric-core-localfont_none_e3d3ee858da922ec12dd.js +0 -1
  23. package/dist/sp-component-base_default_ee18de6e19b14eb89178.js +0 -1
  24. package/dist/sp-component-base_qps-ploc_ee18de6e19b14eb89178.js +0 -1
  25. package/dist/sp-component-base_qps-ploca_ee18de6e19b14eb89178.js +0 -1
  26. package/lib-commonjs/chunks/legacy-third-party-fabric-core/fabric-core-sass/Fabric.LocalFont.scss +0 -29
  27. package/lib-commonjs/chunks/legacy-third-party-fabric-core/fabric-core-sass/Fabric.LocalFontKillSwitchActivated.scss +0 -21
  28. package/lib-commonjs/chunks/legacy-third-party-fabric-core/fabric-core-sass/_Animation.scss +0 -173
  29. package/lib-commonjs/chunks/legacy-third-party-fabric-core/fabric-core-sass/_BrandIcon.scss +0 -19
  30. package/lib-commonjs/chunks/legacy-third-party-fabric-core/fabric-core-sass/_Color.scss +0 -483
  31. package/lib-commonjs/chunks/legacy-third-party-fabric-core/fabric-core-sass/_Font.scss +0 -397
  32. package/lib-commonjs/chunks/legacy-third-party-fabric-core/fabric-core-sass/_Grid.scss +0 -24
  33. package/lib-commonjs/chunks/legacy-third-party-fabric-core/fabric-core-sass/_Icon.Definitions.scss +0 -32
  34. package/lib-commonjs/chunks/legacy-third-party-fabric-core/fabric-core-sass/_Icon.scss +0 -36
  35. package/lib-commonjs/chunks/legacy-third-party-fabric-core/fabric-core-sass/_References.scss +0 -27
  36. package/lib-commonjs/chunks/legacy-third-party-fabric-core/fabric-core-sass/_Responsive.scss +0 -1009
  37. package/lib-commonjs/chunks/legacy-third-party-fabric-core/fabric-core-sass/_Utility.scss +0 -56
  38. package/lib-commonjs/chunks/legacy-third-party-fabric-core/fabric-core-sass/_Wrapper.scss +0 -42
  39. package/lib-commonjs/chunks/legacy-third-party-fabric-core/fabric-core-sass/mixins/_Animation.Mixins.scss +0 -549
  40. package/lib-commonjs/chunks/legacy-third-party-fabric-core/fabric-core-sass/mixins/_BrandIcon.Mixins.scss +0 -36
  41. package/lib-commonjs/chunks/legacy-third-party-fabric-core/fabric-core-sass/mixins/_Color.Mixins.scss +0 -407
  42. package/lib-commonjs/chunks/legacy-third-party-fabric-core/fabric-core-sass/mixins/_Directionality.Mixins.scss +0 -334
  43. package/lib-commonjs/chunks/legacy-third-party-fabric-core/fabric-core-sass/mixins/_Font.Mixins.scss +0 -403
  44. package/lib-commonjs/chunks/legacy-third-party-fabric-core/fabric-core-sass/mixins/_General.Mixins.scss +0 -228
  45. package/lib-commonjs/chunks/legacy-third-party-fabric-core/fabric-core-sass/mixins/_Grid.Mixins.scss +0 -39
  46. package/lib-commonjs/chunks/legacy-third-party-fabric-core/fabric-core-sass/mixins/_Icon.Mixins.scss +0 -4116
  47. package/lib-commonjs/chunks/legacy-third-party-fabric-core/fabric-core-sass/mixins/_Responsive.Mixins.scss +0 -1487
  48. package/lib-commonjs/chunks/legacy-third-party-fabric-core/fabric-core-sass/mixins/_ScopedStyles.Mixins.scss +0 -21
  49. package/lib-commonjs/chunks/legacy-third-party-fabric-core/fabric-core-sass/variables/_Animation.Variables.scss +0 -11
  50. package/lib-commonjs/chunks/legacy-third-party-fabric-core/fabric-core-sass/variables/_BrandIcon.Variables.scss +0 -14
  51. package/lib-commonjs/chunks/legacy-third-party-fabric-core/fabric-core-sass/variables/_Color.Variables.scss +0 -73
  52. package/lib-commonjs/chunks/legacy-third-party-fabric-core/fabric-core-sass/variables/_Font.Variables.scss +0 -45
  53. package/lib-commonjs/chunks/legacy-third-party-fabric-core/fabric-core-sass/variables/_General.Variables.scss +0 -6
  54. package/lib-commonjs/chunks/legacy-third-party-fabric-core/fabric-core-sass/variables/_Icon.Variables.scss +0 -2672
  55. package/lib-commonjs/chunks/legacy-third-party-fabric-core/fabric-core-sass/variables/_Responsive.Variables.scss +0 -16
  56. package/lib-commonjs/chunks/legacy-third-party-fabric-core/fabric-core-sass/variables/_ZIndex.Variables.scss +0 -14
  57. package/lib-commonjs/chunks/legacy-third-party-fabric-core/fabric-core-shim.scss +0 -2478
@@ -1,56 +0,0 @@
1
- // Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
2
-
3
- //
4
- // Office UI Fabric
5
- // --------------------------------------------------
6
- // Some mixins are output to CSS classes as utilities.
7
-
8
- // The best box is a border box.
9
- .ms-borderBox,
10
- .ms-borderBox::before,
11
- .ms-borderBox::after {
12
- @include ms-borderBox;
13
- }
14
-
15
- // To apply border base settings
16
- .ms-borderBase {
17
- @include ms-borderBase;
18
- }
19
-
20
- // Ensures the block expands to the full height to enclose its floated childen.
21
- .ms-clearfix {
22
- @include ms-clearfix;
23
- }
24
-
25
- // Basic border-box, margin, and padding reset.
26
- .ms-normalize {
27
- @include ms-normalize;
28
- }
29
-
30
- // Text alignments.
31
- .ms-textAlignLeft {
32
- @include ms-text-align(left);
33
- }
34
-
35
- .ms-textAlignRight {
36
- @include ms-text-align(right);
37
- }
38
-
39
- .ms-textAlignCenter {
40
- text-align: center;
41
- }
42
-
43
- // Use to hide content while still making it readable by screen reader (Accessibility)
44
- .ms-screenReaderOnly {
45
- @include ms-screenReaderOnly;
46
- }
47
-
48
- // Use to add truncation with ellipsis
49
- .ms-textTruncate {
50
- @include ms-textTruncate;
51
- }
52
-
53
- // Use to disable text wrapping
54
- .ms-noWrap {
55
- @include ms-noWrap;
56
- }
@@ -1,42 +0,0 @@
1
- // Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
2
-
3
- //
4
- // Office UI Fabric
5
- // --------------------------------------------------
6
- // Wrapper component to set base typography.
7
-
8
- .ms-Fabric {
9
- @include ms-Fabric;
10
- }
11
-
12
- // Create overrides for each language that has an alternate font-family.
13
- @include ms-font-family-language-override('ar', $ms-font-family-arabic);
14
- @include ms-font-family-language-override('bg', $ms-font-family-cyrillic);
15
- @include ms-font-family-language-override('cs', $ms-font-family-east-european);
16
- @include ms-font-family-language-override('el', $ms-font-family-greek);
17
- @include ms-font-family-language-override('et', $ms-font-family-east-european);
18
- @include ms-font-family-language-override('he', $ms-font-family-hebrew);
19
- @include ms-font-family-language-override('hi', $ms-font-family-hindi);
20
- @include ms-font-family-language-override('hr', $ms-font-family-east-european);
21
- @include ms-font-family-language-override('hu', $ms-font-family-east-european);
22
- @include ms-font-family-language-override('ja', $ms-font-family-japanese);
23
- @include ms-font-family-language-override('kk', $ms-font-family-east-european);
24
- @include ms-font-family-language-override('ko', $ms-font-family-korean);
25
- @include ms-font-family-language-override('lo', $ms-font-family-lao);
26
- @include ms-font-family-language-override('lt', $ms-font-family-east-european);
27
- @include ms-font-family-language-override('lv', $ms-font-family-east-european);
28
- @include ms-font-family-language-override('pl', $ms-font-family-east-european);
29
- @include ms-font-family-language-override('ru', $ms-font-family-cyrillic);
30
- @include ms-font-family-language-override('sk', $ms-font-family-east-european);
31
- @include ms-font-family-language-override('sr-latn', $ms-font-family-east-european);
32
- @include ms-font-family-language-override('th', $ms-font-family-thai);
33
- @include ms-font-family-language-override('tr', $ms-font-family-east-european);
34
- @include ms-font-family-language-override('uk', $ms-font-family-cyrillic);
35
- @include ms-font-family-language-override('vi', $ms-font-family-vietnamese);
36
- @include ms-font-family-language-override('zh-hans', $ms-font-family-chinese-simplified);
37
- @include ms-font-family-language-override('zh-hant', $ms-font-family-chinese-traditional);
38
-
39
- // Modifier: Use Selawik as an open source alternative to Segoe UI.
40
- .ms-Fabric--selawik {
41
- font-family: $ms-font-family-selawik;
42
- }
@@ -1,549 +0,0 @@
1
- // Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
2
-
3
- //
4
- // Office UI Fabric
5
- // --------------------------------------------------
6
- // Fabric Animations
7
-
8
- // Outputs the keyframes used by the animation classes
9
- @mixin ms-animation-keyframes() {
10
- // Set a default value for the version-scoped variable if it isn't assigned
11
- $ms-fabric-version-suffix: '' !default;
12
-
13
- @keyframes ms-slideRightIn10#{$ms-fabric-version-suffix} {
14
- from {
15
- transform: translate3d(-10px, 0px, 0px);
16
- }
17
- to {
18
- transform: translate3d(0px, 0px, 0px);
19
- }
20
- }
21
-
22
- @keyframes ms-slideRightIn20#{$ms-fabric-version-suffix} {
23
- from {
24
- transform: translate3d(-20px, 0px, 0px);
25
- }
26
- to {
27
- transform: translate3d(0px, 0px, 0px);
28
- }
29
- }
30
-
31
- @keyframes ms-slideRightIn40#{$ms-fabric-version-suffix} {
32
- from {
33
- transform: translate3d(-40px, 0px, 0px);
34
- }
35
- to {
36
- transform: translate3d(0px, 0px, 0px);
37
- }
38
- }
39
-
40
- @keyframes ms-slideRightIn400#{$ms-fabric-version-suffix} {
41
- from {
42
- transform: translate3d(-400px, 0px, 0px);
43
- }
44
- to {
45
- transform: translate3d(0px, 0px, 0px);
46
- }
47
- }
48
-
49
- @keyframes ms-slideRightOut40#{$ms-fabric-version-suffix} {
50
- from {
51
- transform: translate3d(0px, 0px, 0px);
52
- }
53
- to {
54
- transform: translate3d(40px, 0px, 0px);
55
- }
56
- }
57
-
58
- @keyframes ms-slideRightOut400#{$ms-fabric-version-suffix} {
59
- from {
60
- transform: translate3d(0, 0px, 0px);
61
- }
62
- to {
63
- transform: translate3d(400px, 0px, 0px);
64
- }
65
- }
66
-
67
- @keyframes ms-slideLeftIn10#{$ms-fabric-version-suffix} {
68
- from {
69
- transform: translate3d(10px, 0px, 0px);
70
- }
71
- to {
72
- transform: translate3d(0px, 0px, 0px);
73
- }
74
- }
75
-
76
- @keyframes ms-slideLeftIn20#{$ms-fabric-version-suffix} {
77
- from {
78
- transform: translate3d(20px, 0px, 0px);
79
- }
80
- to {
81
- transform: translate3d(0px, 0px, 0px);
82
- }
83
- }
84
-
85
- @keyframes ms-slideLeftIn40#{$ms-fabric-version-suffix} {
86
- from {
87
- transform: translate3d(40px, 0px, 0px);
88
- }
89
- to {
90
- transform: translate3d(0px, 0px, 0px);
91
- }
92
- }
93
-
94
- @keyframes ms-slideLeftIn400#{$ms-fabric-version-suffix} {
95
- from {
96
- transform: translate3d(400px, 0px, 0px);
97
- }
98
- to {
99
- transform: translate3d(0px, 0px, 0px);
100
- }
101
- }
102
-
103
- @keyframes ms-slideLeftOut40#{$ms-fabric-version-suffix} {
104
- from {
105
- transform: translate3d(0, 0px, 0px);
106
- }
107
- to {
108
- transform: translate3d(-40px, 0px, 0px);
109
- }
110
- }
111
-
112
- @keyframes ms-slideLeftOut400#{$ms-fabric-version-suffix} {
113
- from {
114
- transform: translate3d(0, 0px, 0px);
115
- }
116
- to {
117
- transform: translate3d(-400px, 0px, 0px);
118
- }
119
- }
120
-
121
- @keyframes ms-slideUpIn10#{$ms-fabric-version-suffix} {
122
- from {
123
- transform: translate3d(0px, 10px, 0px);
124
- }
125
- to {
126
- transform: translate3d(0px, 0px, 0px);
127
- }
128
- }
129
-
130
- @keyframes ms-slideUpIn20#{$ms-fabric-version-suffix} {
131
- from {
132
- transform: translate3d(0px, 20px, 0px);
133
- }
134
- to {
135
- transform: translate3d(0px, 0px, 0px);
136
- }
137
- }
138
-
139
- @keyframes ms-slideDownIn10#{$ms-fabric-version-suffix} {
140
- from {
141
- transform: translate3d(0px, -10px, 0px);
142
- }
143
- to {
144
- transform: translate3d(0px, 0px, 0px);
145
- }
146
- }
147
-
148
- @keyframes ms-slideDownIn20#{$ms-fabric-version-suffix} {
149
- from {
150
- transform: translate3d(0px, -20px, 0px);
151
- }
152
- to {
153
- transform: translate3d(0px, 0px, 0px);
154
- }
155
- }
156
-
157
- @keyframes ms-slideUpOut10#{$ms-fabric-version-suffix} {
158
- from {
159
- transform: translate3d(0px, 0, 0px);
160
- }
161
- to {
162
- transform: translate3d(0px, -10px, 0px);
163
- }
164
- }
165
-
166
- @keyframes ms-slideUpOut20#{$ms-fabric-version-suffix} {
167
- from {
168
- transform: translate3d(0px, 0, 0px);
169
- }
170
- to {
171
- transform: translate3d(0px, -20px, 0px);
172
- }
173
- }
174
-
175
- @keyframes ms-slideDownOut10#{$ms-fabric-version-suffix} {
176
- from {
177
- transform: translate3d(0px, 0, 0px);
178
- }
179
- to {
180
- transform: translate3d(0px, 10px, 0px);
181
- }
182
- }
183
-
184
- @keyframes ms-slideDownOut20#{$ms-fabric-version-suffix} {
185
- from {
186
- transform: translate3d(0px, 0, 0px);
187
- }
188
- to {
189
- transform: translate3d(0px, 20px, 0px);
190
- }
191
- }
192
-
193
- @keyframes ms-scaleUp100#{$ms-fabric-version-suffix} {
194
- from {
195
- transform: scale3d(0.98, 0.98, 1);
196
- }
197
- to {
198
- transform: scale3d(1, 1, 1);
199
- }
200
- }
201
-
202
- @keyframes ms-scaleUp103#{$ms-fabric-version-suffix} {
203
- from {
204
- transform: scale3d(1, 1, 1);
205
- }
206
- to {
207
- transform: scale3d(1.03, 1.03, 1);
208
- }
209
- }
210
-
211
- @keyframes ms-scaleDown98#{$ms-fabric-version-suffix} {
212
- from {
213
- transform: scale3d(1, 1, 1);
214
- }
215
- to {
216
- transform: scale3d(0.98, 0.98, 1);
217
- }
218
- }
219
-
220
- @keyframes ms-scaleDown100#{$ms-fabric-version-suffix} {
221
- from {
222
- transform: scale3d(1.03, 1.03, 1);
223
- }
224
- to {
225
- transform: scale3d(1, 1, 1);
226
- }
227
- }
228
-
229
- @keyframes ms-fadeIn#{$ms-fabric-version-suffix} {
230
- from {
231
- opacity: 0;
232
- animation-timing-function: $ms-animation-ease-2;
233
- }
234
- to {
235
- opacity: 1;
236
- }
237
- }
238
-
239
- @keyframes ms-fadeOut#{$ms-fabric-version-suffix} {
240
- from {
241
- opacity: 1;
242
- animation-timing-function: $ms-animation-ease-2;
243
- }
244
- to {
245
- opacity: 0;
246
- }
247
- }
248
-
249
- @keyframes ms-rotate90#{$ms-fabric-version-suffix} {
250
- from {
251
- transform: rotateZ(0deg);
252
- }
253
- to {
254
- transform: rotateZ(90deg);
255
- }
256
- }
257
-
258
- @keyframes ms-rotateN90#{$ms-fabric-version-suffix} {
259
- from {
260
- transform: rotateZ(90deg);
261
- }
262
- to {
263
- transform: rotateZ(0deg);
264
- }
265
- }
266
- }
267
-
268
- // Generate an animation
269
- @mixin ms-animation($names, $duration, $timing: $ms-animation-ease-1, $fillMode: both) {
270
- // Set a default value for the version-scoped variable if it isn't assigned
271
- $ms-fabric-version-suffix: '' !default;
272
-
273
- // Append the scoping suffix to each animation name
274
- $namelist: ();
275
-
276
- @each $name in $names {
277
- $newname: $name#{$ms-fabric-version-suffix};
278
-
279
- $namelist: append($namelist, $newname, 'comma');
280
- }
281
-
282
- animation-name: $namelist;
283
- animation-duration: $duration;
284
- animation-timing-function: $timing;
285
- animation-fill-mode: $fillMode;
286
- }
287
-
288
- // Slide
289
- @mixin ms-slideRightIn10 {
290
- @include ms-LTR {
291
- @include ms-animation((ms-fadeIn, ms-slideRightIn10), $ms-animation-duration-3, $ms-animation-ease-1);
292
- }
293
-
294
- @include ms-RTL {
295
- @include ms-animation((ms-fadeIn, ms-slideLeftIn10), $ms-animation-duration-3, $ms-animation-ease-1);
296
- }
297
- }
298
-
299
- @mixin ms-slideRightIn20 {
300
- @include ms-LTR {
301
- @include ms-animation((ms-fadeIn, ms-slideRightIn20), $ms-animation-duration-3, $ms-animation-ease-1);
302
- }
303
-
304
- @include ms-RTL {
305
- @include ms-animation((ms-fadeIn, ms-slideLeftIn20), $ms-animation-duration-3, $ms-animation-ease-1);
306
- }
307
- }
308
-
309
- @mixin ms-slideRightIn40 {
310
- @include ms-LTR {
311
- @include ms-animation((ms-fadeIn, ms-slideRightIn40), $ms-animation-duration-3, $ms-animation-ease-1);
312
- }
313
-
314
- @include ms-RTL {
315
- @include ms-animation((ms-fadeIn, ms-slideLeftIn40), $ms-animation-duration-3, $ms-animation-ease-1);
316
- }
317
- }
318
-
319
- @mixin ms-slideRightIn400 {
320
- @include ms-LTR {
321
- @include ms-animation((ms-fadeIn, ms-slideRightIn400), $ms-animation-duration-3, $ms-animation-ease-1);
322
- }
323
-
324
- @include ms-RTL {
325
- @include ms-animation((ms-fadeIn, ms-slideLeftIn400), $ms-animation-duration-3, $ms-animation-ease-1);
326
- }
327
- }
328
-
329
- @mixin ms-slideRightOut40 {
330
- @include ms-LTR {
331
- @include ms-animation((ms-fadeOut, ms-slideRightOut40), $ms-animation-duration-1, $ms-animation-ease-2);
332
- }
333
-
334
- @include ms-RTL {
335
- @include ms-animation((ms-fadeOut, ms-slideLeftOut40), $ms-animation-duration-1, $ms-animation-ease-2);
336
- }
337
- }
338
-
339
- @mixin ms-slideRightOut400 {
340
- @include ms-LTR {
341
- @include ms-animation((ms-fadeOut, ms-slideRightOut400), $ms-animation-duration-1, $ms-animation-ease-2);
342
- }
343
-
344
- @include ms-RTL {
345
- @include ms-animation((ms-fadeOut, ms-slideLeftOut400), $ms-animation-duration-1, $ms-animation-ease-2);
346
- }
347
- }
348
-
349
- @mixin ms-slideLeftIn10 {
350
- @include ms-LTR {
351
- @include ms-animation((ms-fadeIn, ms-slideLeftIn10), $ms-animation-duration-3, $ms-animation-ease-1);
352
- }
353
-
354
- @include ms-RTL {
355
- @include ms-animation((ms-fadeIn, ms-slideRightIn10), $ms-animation-duration-3, $ms-animation-ease-1);
356
- }
357
- }
358
-
359
- @mixin ms-slideLeftIn20 {
360
- @include ms-LTR {
361
- @include ms-animation((ms-fadeIn, ms-slideLeftIn20), $ms-animation-duration-3, $ms-animation-ease-1);
362
- }
363
-
364
- @include ms-RTL {
365
- @include ms-animation((ms-fadeIn, ms-slideRightIn20), $ms-animation-duration-3, $ms-animation-ease-1);
366
- }
367
- }
368
-
369
- @mixin ms-slideLeftIn40 {
370
- @include ms-LTR {
371
- @include ms-animation((ms-fadeIn, ms-slideLeftIn40), $ms-animation-duration-3, $ms-animation-ease-1);
372
- }
373
-
374
- @include ms-RTL {
375
- @include ms-animation((ms-fadeIn, ms-slideRightIn40), $ms-animation-duration-3, $ms-animation-ease-1);
376
- }
377
- }
378
-
379
- @mixin ms-slideLeftIn400 {
380
- @include ms-LTR {
381
- @include ms-animation((ms-fadeIn, ms-slideLeftIn400), $ms-animation-duration-3, $ms-animation-ease-1);
382
- }
383
-
384
- @include ms-RTL {
385
- @include ms-animation((ms-fadeIn, ms-slideRightIn400), $ms-animation-duration-3, $ms-animation-ease-1);
386
- }
387
- }
388
-
389
- @mixin ms-slideLeftOut40 {
390
- @include ms-LTR {
391
- @include ms-animation((ms-fadeOut, ms-slideLeftOut40), $ms-animation-duration-1, $ms-animation-ease-2);
392
- }
393
-
394
- @include ms-RTL {
395
- @include ms-animation((ms-fadeOut, ms-slideRightOut40), $ms-animation-duration-1, $ms-animation-ease-2);
396
- }
397
- }
398
-
399
- @mixin ms-slideLeftOut400 {
400
- @include ms-LTR {
401
- @include ms-animation((ms-fadeOut, ms-slideLeftOut400), $ms-animation-duration-1, $ms-animation-ease-2);
402
- }
403
-
404
- @include ms-RTL {
405
- @include ms-animation((ms-fadeOut, ms-slideRightOut400), $ms-animation-duration-1, $ms-animation-ease-2);
406
- }
407
- }
408
-
409
- @mixin ms-slideUpIn10 {
410
- @include ms-animation((ms-fadeIn, ms-slideUpIn10), $ms-animation-duration-1, $ms-animation-ease-2);
411
- }
412
-
413
- @mixin ms-slideUpIn20 {
414
- @include ms-animation((ms-fadeIn, ms-slideUpIn20), $ms-animation-duration-3, $ms-animation-ease-1);
415
- }
416
-
417
- @mixin ms-slideDownIn10 {
418
- @include ms-animation((ms-fadeIn, ms-slideDownIn10), $ms-animation-duration-1, $ms-animation-ease-2);
419
- }
420
-
421
- @mixin ms-slideDownIn20 {
422
- @include ms-animation((ms-fadeIn, ms-slideDownIn20), $ms-animation-duration-3, $ms-animation-ease-1);
423
- }
424
-
425
- @mixin ms-slideUpOut10 {
426
- @include ms-animation((ms-fadeOut, ms-slideUpOut10), $ms-animation-duration-1, $ms-animation-ease-2);
427
- }
428
-
429
- @mixin ms-slideUpOut20 {
430
- @include ms-animation((ms-fadeOut, ms-slideUpOut20), $ms-animation-duration-1, $ms-animation-ease-2);
431
- }
432
-
433
- @mixin ms-slideDownOut10 {
434
- @include ms-animation((ms-fadeOut, ms-slideDownOut10), $ms-animation-duration-1, $ms-animation-ease-2);
435
- }
436
-
437
- @mixin ms-slideDownOut20 {
438
- @include ms-animation((ms-fadeOut, ms-slideDownOut20), $ms-animation-duration-1, $ms-animation-ease-2);
439
- }
440
-
441
- // Scale
442
- @mixin ms-scaleUpIn100 {
443
- @include ms-animation((ms-fadeIn, ms-scaleUp100), $ms-animation-duration-3, $ms-animation-ease-1);
444
- }
445
-
446
- @mixin ms-scaleUpOut103 {
447
- @include ms-animation((ms-fadeOut, ms-scaleUp103), $ms-animation-duration-1, $ms-animation-ease-2);
448
- }
449
-
450
- @mixin ms-scaleDownOut98 {
451
- @include ms-animation((ms-fadeOut, ms-scaleDown98), $ms-animation-duration-1, $ms-animation-ease-2);
452
- }
453
-
454
- @mixin ms-scaleDownIn100 {
455
- @include ms-animation((ms-fadeIn, ms-scaleDown100), $ms-animation-duration-3, $ms-animation-ease-1);
456
- }
457
-
458
- // Rotate
459
- // @todo: These durations should use a variable, likely $ms-animation-duration-1
460
- @mixin ms-rotate90deg {
461
- @include ms-LTR {
462
- @include ms-animation(ms-rotate90, 0.1s, $ms-animation-ease-2);
463
- }
464
-
465
- @include ms-RTL {
466
- @include ms-animation(ms-rotateN90, 0.1s, $ms-animation-ease-2);
467
- }
468
- }
469
-
470
- @mixin ms-rotateN90deg {
471
- @include ms-LTR {
472
- @include ms-animation(ms-rotateN90, 0.1s, $ms-animation-ease-2);
473
- }
474
-
475
- @include ms-RTL {
476
- @include ms-animation(ms-rotate90, 0.1s, $ms-animation-ease-2);
477
- }
478
- }
479
-
480
- // Fade
481
- @mixin ms-fadeIn100 {
482
- animation-duration: $ms-animation-duration-1; // @todo: Based on class name, likely intended to be 0.1s
483
- animation-name: ms-fadeIn;
484
- animation-fill-mode: both;
485
- }
486
-
487
- @mixin ms-fadeIn200 {
488
- animation-duration: $ms-animation-duration-2; // @todo: Based on class name, likely intended to be 0.2s
489
- animation-name: ms-fadeIn;
490
- animation-fill-mode: both;
491
- }
492
-
493
- @mixin ms-fadeIn400 {
494
- animation-duration: $ms-animation-duration-3; // @todo: Based on class name, likely intended to be 0.4s
495
- animation-name: ms-fadeIn;
496
- animation-fill-mode: both;
497
- }
498
-
499
- @mixin ms-fadeIn500 {
500
- animation-duration: $ms-animation-duration-4; // @todo: Based on class name, likely intended to be 0.5s
501
- animation-name: ms-fadeIn;
502
- animation-fill-mode: both;
503
- }
504
-
505
- @mixin ms-fadeOut100 {
506
- animation-duration: 0.1s; // @todo: This is the only duration that matches the class name
507
- animation-name: ms-fadeOut;
508
- animation-fill-mode: both;
509
- }
510
-
511
- @mixin ms-fadeOut200 {
512
- animation-duration: $ms-animation-duration-1; // @todo: Based on class name, likely intended to be 0.2s
513
- animation-name: ms-fadeOut;
514
- animation-fill-mode: both;
515
- }
516
-
517
- @mixin ms-fadeOut400 {
518
- animation-duration: $ms-animation-duration-3; // @todo: Based on class name, likely intended to be 0.4s
519
- animation-name: ms-fadeOut;
520
- animation-fill-mode: both;
521
- }
522
-
523
- @mixin ms-fadeOut500 {
524
- animation-duration: $ms-animation-duration-4; // @todo: Based on class name, likely intended to be 0.5s
525
- animation-name: ms-fadeOut;
526
- animation-fill-mode: both;
527
- }
528
-
529
- // Expand-collapse
530
- @mixin ms-expandCollapse100 {
531
- transition: height 0.1s $ms-animation-ease-2; // @todo: This is the only duration that matches the class name
532
- }
533
-
534
- @mixin ms-expandCollapse200 {
535
- transition: height $ms-animation-duration-1 $ms-animation-ease-2; // @todo: Based on class name, likely intended to be 0.2s
536
- }
537
-
538
- @mixin ms-expandCollapse400 {
539
- transition: height $ms-animation-duration-3 $ms-animation-ease-2; // @todo: Based on class name, likely intended to be 0.4s
540
- }
541
-
542
- // Delay
543
- @mixin ms-delay100 {
544
- animation-delay: $ms-animation-duration-1; // @todo: Based on class name, likely intended to be 0.1s
545
- }
546
-
547
- @mixin ms-delay200 {
548
- animation-delay: $ms-animation-duration-2; // @todo: Based on class name, likely intended to be 0.2s
549
- }
@@ -1,36 +0,0 @@
1
- // Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
2
-
3
- // Generate classes for product and document icons
4
- @mixin ms-brand-icon-classes($retina) {
5
- @each $icon in $ms-brand-icon-product-icons {
6
- .ms-BrandIcon--#{$icon} {
7
- @include ms-brand-icon-sizes($icon, $retina, $ms-brand-icon-product-images-path);
8
- }
9
- }
10
-
11
- @each $icon in $ms-brand-icon-document-icons {
12
- .ms-BrandIcon--#{$icon} {
13
- @include ms-brand-icon-sizes($icon, $retina, $ms-brand-icon-document-images-path);
14
- }
15
- }
16
- }
17
-
18
- // Generate size classes for each icon
19
- @mixin ms-brand-icon-sizes($icon, $retina, $images-path) {
20
- @each $size in $ms-brand-icon-sizes {
21
- &.ms-BrandIcon--icon#{$size} {
22
- background-image: url(#{$images-path}/#{$icon}_#{$size}x#{$retina}.png);
23
- }
24
- }
25
- }
26
-
27
- // Generate generic icon size classes
28
- @mixin ms-brand-icon-size-classes() {
29
- @each $size in $ms-brand-icon-sizes {
30
- .ms-BrandIcon--icon#{$size} {
31
- background-size: 100% 100%;
32
- width: #{$size}px;
33
- height: #{$size}px;
34
- }
35
- }
36
- }