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

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 (56) 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_c240cee2b23dc4a14fc6.js +1 -0
  3. package/dist/index-internal-beta.d.ts +3 -0
  4. package/dist/index-internal-public.d.ts +3 -0
  5. package/dist/index-internal.d.ts +3 -0
  6. package/dist/{sp-component-base_en-us_ee18de6e19b14eb89178.js → sp-component-base_default_6641f4d95d4250ba4161.js} +1 -1
  7. package/dist/sp-component-base_en-us_6641f4d95d4250ba4161.js +1 -0
  8. package/dist/sp-component-base_qps-ploc_6641f4d95d4250ba4161.js +1 -0
  9. package/dist/sp-component-base_qps-ploca_6641f4d95d4250ba4161.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/chunks/legacy-third-party-fabric-core/fabric-core-sass/Fabric.LocalFont.scss.css +9247 -0
  14. package/lib-commonjs/chunks/legacy-third-party-fabric-core/fabric-core-sass/Fabric.LocalFontKillSwitchActivated.scss.css +11267 -0
  15. package/lib-commonjs/chunks/legacy-third-party-fabric-core/fabric-core-shim.scss.css +2063 -0
  16. package/lib-commonjs/chunks/legacy-third-party-fabric-core/{fabric-core-shimKillSwitchActivated.scss → fabric-core-shimKillSwitchActivated.scss.css} +222 -534
  17. package/lib-commonjs/chunks/legacy-third-party-fabric-core/iconDefinitions.css +2 -7
  18. package/lib-commonjs/common/KillSwitches.js +6 -10
  19. package/lib-commonjs/styles/{shimmer.module.scss → shimmer.module.scss.css} +2 -4
  20. package/package.json +16 -13
  21. package/dist/chunk.legacy-third-party-fabric-core-localfont_none_e3d3ee858da922ec12dd.js +0 -1
  22. package/dist/sp-component-base_default_ee18de6e19b14eb89178.js +0 -1
  23. package/dist/sp-component-base_qps-ploc_ee18de6e19b14eb89178.js +0 -1
  24. package/dist/sp-component-base_qps-ploca_ee18de6e19b14eb89178.js +0 -1
  25. package/lib-commonjs/chunks/legacy-third-party-fabric-core/fabric-core-sass/Fabric.LocalFont.scss +0 -29
  26. package/lib-commonjs/chunks/legacy-third-party-fabric-core/fabric-core-sass/Fabric.LocalFontKillSwitchActivated.scss +0 -21
  27. package/lib-commonjs/chunks/legacy-third-party-fabric-core/fabric-core-sass/_Animation.scss +0 -173
  28. package/lib-commonjs/chunks/legacy-third-party-fabric-core/fabric-core-sass/_BrandIcon.scss +0 -19
  29. package/lib-commonjs/chunks/legacy-third-party-fabric-core/fabric-core-sass/_Color.scss +0 -483
  30. package/lib-commonjs/chunks/legacy-third-party-fabric-core/fabric-core-sass/_Font.scss +0 -397
  31. package/lib-commonjs/chunks/legacy-third-party-fabric-core/fabric-core-sass/_Grid.scss +0 -24
  32. package/lib-commonjs/chunks/legacy-third-party-fabric-core/fabric-core-sass/_Icon.Definitions.scss +0 -32
  33. package/lib-commonjs/chunks/legacy-third-party-fabric-core/fabric-core-sass/_Icon.scss +0 -36
  34. package/lib-commonjs/chunks/legacy-third-party-fabric-core/fabric-core-sass/_References.scss +0 -27
  35. package/lib-commonjs/chunks/legacy-third-party-fabric-core/fabric-core-sass/_Responsive.scss +0 -1009
  36. package/lib-commonjs/chunks/legacy-third-party-fabric-core/fabric-core-sass/_Utility.scss +0 -56
  37. package/lib-commonjs/chunks/legacy-third-party-fabric-core/fabric-core-sass/_Wrapper.scss +0 -42
  38. package/lib-commonjs/chunks/legacy-third-party-fabric-core/fabric-core-sass/mixins/_Animation.Mixins.scss +0 -549
  39. package/lib-commonjs/chunks/legacy-third-party-fabric-core/fabric-core-sass/mixins/_BrandIcon.Mixins.scss +0 -36
  40. package/lib-commonjs/chunks/legacy-third-party-fabric-core/fabric-core-sass/mixins/_Color.Mixins.scss +0 -407
  41. package/lib-commonjs/chunks/legacy-third-party-fabric-core/fabric-core-sass/mixins/_Directionality.Mixins.scss +0 -334
  42. package/lib-commonjs/chunks/legacy-third-party-fabric-core/fabric-core-sass/mixins/_Font.Mixins.scss +0 -403
  43. package/lib-commonjs/chunks/legacy-third-party-fabric-core/fabric-core-sass/mixins/_General.Mixins.scss +0 -228
  44. package/lib-commonjs/chunks/legacy-third-party-fabric-core/fabric-core-sass/mixins/_Grid.Mixins.scss +0 -39
  45. package/lib-commonjs/chunks/legacy-third-party-fabric-core/fabric-core-sass/mixins/_Icon.Mixins.scss +0 -4116
  46. package/lib-commonjs/chunks/legacy-third-party-fabric-core/fabric-core-sass/mixins/_Responsive.Mixins.scss +0 -1487
  47. package/lib-commonjs/chunks/legacy-third-party-fabric-core/fabric-core-sass/mixins/_ScopedStyles.Mixins.scss +0 -21
  48. package/lib-commonjs/chunks/legacy-third-party-fabric-core/fabric-core-sass/variables/_Animation.Variables.scss +0 -11
  49. package/lib-commonjs/chunks/legacy-third-party-fabric-core/fabric-core-sass/variables/_BrandIcon.Variables.scss +0 -14
  50. package/lib-commonjs/chunks/legacy-third-party-fabric-core/fabric-core-sass/variables/_Color.Variables.scss +0 -73
  51. package/lib-commonjs/chunks/legacy-third-party-fabric-core/fabric-core-sass/variables/_Font.Variables.scss +0 -45
  52. package/lib-commonjs/chunks/legacy-third-party-fabric-core/fabric-core-sass/variables/_General.Variables.scss +0 -6
  53. package/lib-commonjs/chunks/legacy-third-party-fabric-core/fabric-core-sass/variables/_Icon.Variables.scss +0 -2672
  54. package/lib-commonjs/chunks/legacy-third-party-fabric-core/fabric-core-sass/variables/_Responsive.Variables.scss +0 -16
  55. package/lib-commonjs/chunks/legacy-third-party-fabric-core/fabric-core-sass/variables/_ZIndex.Variables.scss +0 -14
  56. package/lib-commonjs/chunks/legacy-third-party-fabric-core/fabric-core-shim.scss +0 -2478
@@ -1,407 +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 Core Color Mixins
7
-
8
- //== Background colors
9
- //
10
- // Theme colors
11
- @mixin ms-bgColor-themeDark {
12
- background-color: $ms-color-themeDark;
13
- }
14
-
15
- @mixin ms-bgColor-themeDarkAlt {
16
- background-color: $ms-color-themeDarkAlt;
17
- }
18
-
19
- @mixin ms-bgColor-themeDarker {
20
- background-color: $ms-color-themeDarker;
21
- }
22
-
23
- @mixin ms-bgColor-themePrimary {
24
- background-color: $ms-color-themePrimary;
25
- }
26
-
27
- @mixin ms-bgColor-themeSecondary {
28
- background-color: $ms-color-themeSecondary;
29
- }
30
-
31
- @mixin ms-bgColor-themeTertiary {
32
- background-color: $ms-color-themeTertiary;
33
- }
34
-
35
- @mixin ms-bgColor-themeLight {
36
- background-color: $ms-color-themeLight;
37
- }
38
-
39
- @mixin ms-bgColor-themeLighter {
40
- background-color: $ms-color-themeLighter;
41
- }
42
-
43
- @mixin ms-bgColor-themeLighterAlt {
44
- background-color: $ms-color-themeLighterAlt;
45
- }
46
-
47
- // Neutral colors
48
- @mixin ms-bgColor-black {
49
- background-color: $ms-color-black;
50
- }
51
-
52
- @mixin ms-bgColor-neutralDark {
53
- background-color: $ms-color-neutralDark;
54
- }
55
-
56
- @mixin ms-bgColor-neutralPrimary {
57
- background-color: $ms-color-neutralPrimary;
58
- }
59
-
60
- @mixin ms-bgColor-neutralPrimaryAlt {
61
- background-color: $ms-color-neutralPrimaryAlt;
62
- }
63
-
64
- @mixin ms-bgColor-neutralSecondary {
65
- background-color: $ms-color-neutralSecondary;
66
- }
67
-
68
- @mixin ms-bgColor-neutralSecondaryAlt {
69
- background-color: $ms-color-neutralSecondaryAlt;
70
- }
71
-
72
- @mixin ms-bgColor-neutralTertiary {
73
- background-color: $ms-color-neutralTertiary;
74
- }
75
-
76
- @mixin ms-bgColor-neutralTertiaryAlt {
77
- background-color: $ms-color-neutralTertiaryAlt;
78
- }
79
-
80
- @mixin ms-bgColor-neutralLight {
81
- background-color: $ms-color-neutralLight;
82
- }
83
-
84
- @mixin ms-bgColor-neutralLighter {
85
- background-color: $ms-color-neutralLighter;
86
- }
87
-
88
- @mixin ms-bgColor-neutralLighterAlt {
89
- background-color: $ms-color-neutralLighterAlt;
90
- }
91
-
92
- @mixin ms-bgColor-white {
93
- background-color: $ms-color-white;
94
- }
95
-
96
- // Brand and accent colors
97
- @mixin ms-bgColor-yellow {
98
- background-color: $ms-color-yellow;
99
- }
100
-
101
- @mixin ms-bgColor-yellowLight {
102
- background-color: $ms-color-yellowLight;
103
- }
104
-
105
- @mixin ms-bgColor-orange {
106
- background-color: $ms-color-orange;
107
- }
108
-
109
- @mixin ms-bgColor-orangeLight {
110
- background-color: $ms-color-orangeLight;
111
- }
112
-
113
- @mixin ms-bgColor-orangeLighter {
114
- background-color: $ms-color-orangeLighter;
115
- }
116
-
117
- @mixin ms-bgColor-redDark {
118
- background-color: $ms-color-redDark;
119
- }
120
-
121
- @mixin ms-bgColor-red {
122
- background-color: $ms-color-red;
123
- }
124
-
125
- @mixin ms-bgColor-magentaDark {
126
- background-color: $ms-color-magentaDark;
127
- }
128
-
129
- @mixin ms-bgColor-magenta {
130
- background-color: $ms-color-magenta;
131
- }
132
-
133
- @mixin ms-bgColor-magentaLight {
134
- background-color: $ms-color-magentaLight;
135
- }
136
-
137
- @mixin ms-bgColor-purpleDark {
138
- background-color: $ms-color-purpleDark;
139
- }
140
-
141
- @mixin ms-bgColor-purple {
142
- background-color: $ms-color-purple;
143
- }
144
-
145
- @mixin ms-bgColor-purpleLight {
146
- background-color: $ms-color-purpleLight;
147
- }
148
-
149
- @mixin ms-bgColor-blueDark {
150
- background-color: $ms-color-blueDark;
151
- }
152
-
153
- @mixin ms-bgColor-blueMid {
154
- background-color: $ms-color-blueMid;
155
- }
156
-
157
- @mixin ms-bgColor-blue {
158
- background-color: $ms-color-blue;
159
- }
160
-
161
- @mixin ms-bgColor-blueLight {
162
- background-color: $ms-color-blueLight;
163
- }
164
-
165
- @mixin ms-bgColor-tealDark {
166
- background-color: $ms-color-tealDark;
167
- }
168
-
169
- @mixin ms-bgColor-teal {
170
- background-color: $ms-color-teal;
171
- }
172
-
173
- @mixin ms-bgColor-tealLight {
174
- background-color: $ms-color-tealLight;
175
- }
176
-
177
- @mixin ms-bgColor-greenDark {
178
- background-color: $ms-color-greenDark;
179
- }
180
-
181
- @mixin ms-bgColor-green {
182
- background-color: $ms-color-green;
183
- }
184
-
185
- @mixin ms-bgColor-greenLight {
186
- background-color: $ms-color-greenLight;
187
- }
188
-
189
- // Message colors
190
- @mixin ms-bgColor-info {
191
- background-color: $ms-color-infoBackground;
192
- }
193
-
194
- @mixin ms-bgColor-success {
195
- background-color: $ms-color-successBackground;
196
- }
197
-
198
- @mixin ms-bgColor-severeWarning {
199
- background-color: $ms-color-severeWarningBackground;
200
- }
201
-
202
- @mixin ms-bgColor-warning {
203
- background-color: $ms-color-warningBackground;
204
- }
205
-
206
- @mixin ms-bgColor-error {
207
- background-color: $ms-color-errorBackground;
208
- }
209
-
210
- //== Border colors
211
- //
212
-
213
- // Theme colors
214
- @mixin ms-borderColor-themeDark {
215
- border-color: $ms-color-themeDark;
216
- }
217
-
218
- @mixin ms-borderColor-themeDarkAlt {
219
- border-color: $ms-color-themeDarkAlt;
220
- }
221
-
222
- @mixin ms-borderColor-themeDarker {
223
- border-color: $ms-color-themeDarker;
224
- }
225
-
226
- @mixin ms-borderColor-themePrimary {
227
- border-color: $ms-color-themePrimary;
228
- }
229
-
230
- @mixin ms-borderColor-themeSecondary {
231
- border-color: $ms-color-themeSecondary;
232
- }
233
-
234
- @mixin ms-borderColor-themeTertiary {
235
- border-color: $ms-color-themeTertiary;
236
- }
237
-
238
- @mixin ms-borderColor-themeLight {
239
- border-color: $ms-color-themeLight;
240
- }
241
-
242
- @mixin ms-borderColor-themeLighter {
243
- border-color: $ms-color-themeLighter;
244
- }
245
-
246
- @mixin ms-borderColor-themeLighterAlt {
247
- border-color: $ms-color-themeLighterAlt;
248
- }
249
-
250
- // Neutral colors
251
- @mixin ms-borderColor-black {
252
- border-color: $ms-color-black;
253
- }
254
-
255
- @mixin ms-borderColor-neutralDark {
256
- border-color: $ms-color-neutralDark;
257
- }
258
-
259
- @mixin ms-borderColor-neutralPrimary {
260
- border-color: $ms-color-neutralPrimary;
261
- }
262
-
263
- @mixin ms-borderColor-neutralPrimaryAlt {
264
- border-color: $ms-color-neutralPrimaryAlt;
265
- }
266
-
267
- @mixin ms-borderColor-neutralSecondary {
268
- border-color: $ms-color-neutralSecondary;
269
- }
270
-
271
- @mixin ms-borderColor-neutralSecondaryAlt {
272
- border-color: $ms-color-neutralSecondaryAlt;
273
- }
274
-
275
- @mixin ms-borderColor-neutralTertiary {
276
- border-color: $ms-color-neutralTertiary;
277
- }
278
-
279
- @mixin ms-borderColor-neutralTertiaryAlt {
280
- border-color: $ms-color-neutralTertiaryAlt;
281
- }
282
-
283
- @mixin ms-borderColor-neutralLight {
284
- border-color: $ms-color-neutralLight;
285
- }
286
-
287
- @mixin ms-borderColor-neutralLighter {
288
- border-color: $ms-color-neutralLighter;
289
- }
290
-
291
- @mixin ms-borderColor-neutralLighterAlt {
292
- border-color: $ms-color-neutralLighterAlt;
293
- }
294
-
295
- @mixin ms-borderColor-white {
296
- border-color: $ms-color-white;
297
- }
298
-
299
- // Brand and accent colors
300
- @mixin ms-borderColor-yellow {
301
- border-color: $ms-color-yellow;
302
- }
303
-
304
- @mixin ms-borderColor-yellowLight {
305
- border-color: $ms-color-yellowLight;
306
- }
307
-
308
- @mixin ms-borderColor-orange {
309
- border-color: $ms-color-orange;
310
- }
311
-
312
- @mixin ms-borderColor-orangeLight {
313
- border-color: $ms-color-orangeLight;
314
- }
315
-
316
- @mixin ms-borderColor-orangeLighter {
317
- border-color: $ms-color-orangeLighter;
318
- }
319
-
320
- @mixin ms-borderColor-redDark {
321
- border-color: $ms-color-redDark;
322
- }
323
-
324
- @mixin ms-borderColor-red {
325
- border-color: $ms-color-red;
326
- }
327
-
328
- @mixin ms-borderColor-magentaDark {
329
- border-color: $ms-color-magentaDark;
330
- }
331
-
332
- @mixin ms-borderColor-magenta {
333
- border-color: $ms-color-magenta;
334
- }
335
-
336
- @mixin ms-borderColor-magentaLight {
337
- border-color: $ms-color-magentaLight;
338
- }
339
-
340
- @mixin ms-borderColor-purpleDark {
341
- border-color: $ms-color-purpleDark;
342
- }
343
-
344
- @mixin ms-borderColor-purple {
345
- border-color: $ms-color-purple;
346
- }
347
-
348
- @mixin ms-borderColor-purpleLight {
349
- border-color: $ms-color-purpleLight;
350
- }
351
-
352
- @mixin ms-borderColor-blueDark {
353
- border-color: $ms-color-blueDark;
354
- }
355
-
356
- @mixin ms-borderColor-blueMid {
357
- border-color: $ms-color-blueMid;
358
- }
359
-
360
- @mixin ms-borderColor-blue {
361
- border-color: $ms-color-blue;
362
- }
363
-
364
- @mixin ms-borderColor-blueLight {
365
- border-color: $ms-color-blueLight;
366
- }
367
-
368
- @mixin ms-borderColor-tealDark {
369
- border-color: $ms-color-tealDark;
370
- }
371
-
372
- @mixin ms-borderColor-teal {
373
- border-color: $ms-color-teal;
374
- }
375
-
376
- @mixin ms-borderColor-tealLight {
377
- border-color: $ms-color-tealLight;
378
- }
379
-
380
- @mixin ms-borderColor-greenDark {
381
- border-color: $ms-color-greenDark;
382
- }
383
-
384
- @mixin ms-borderColor-green {
385
- border-color: $ms-color-green;
386
- }
387
-
388
- @mixin ms-borderColor-greenLight {
389
- border-color: $ms-color-greenLight;
390
- }
391
-
392
- // Message colors
393
- @mixin ms-borderColor-info {
394
- border-color: $ms-color-info;
395
- }
396
-
397
- @mixin ms-borderColor-success {
398
- border-color: $ms-color-success;
399
- }
400
-
401
- @mixin ms-borderColor-alert {
402
- border-color: $ms-color-alert;
403
- }
404
-
405
- @mixin ms-borderColor-error {
406
- border-color: $ms-color-error;
407
- }
@@ -1,334 +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
- // Directionality mixins to generate LTR and RTL-specific styles
7
-
8
- // Base left-to-right mixin definition.
9
- @mixin ms-LTR {
10
- [dir='ltr'] & {
11
- @content;
12
- }
13
- }
14
-
15
- // Base right-to-left mixin definition.
16
- @mixin ms-RTL {
17
- [dir='rtl'] & {
18
- @content;
19
- }
20
- }
21
-
22
- // Use baseRTL to set the default direction to right-to-left on
23
- // a root element (e.g. page or region) that needs RTL support.
24
- @mixin ms-base-RTL {
25
- @include ms-RTL {
26
- direction: rtl;
27
- unicode-bidi: bidi-override;
28
- }
29
- }
30
-
31
- // Common CSS property mixins with support for RTL.
32
- // Use to automatically create RTL versions of your properties.
33
-
34
- // Border styles.
35
- @mixin ms-border-color($top, $right, $bottom, $left) {
36
- border-color: $top $right $bottom $left;
37
-
38
- @include ms-RTL {
39
- border-color: $top $left $bottom $right;
40
- }
41
- }
42
-
43
- @mixin ms-border-left($width, $style, $color) {
44
- @include ms-LTR {
45
- border-left: $width $style $color;
46
- }
47
-
48
- @include ms-RTL {
49
- border-right: $width $style $color;
50
- }
51
- }
52
-
53
- @mixin ms-border-left-color($color) {
54
- @include ms-LTR {
55
- border-left-color: $color;
56
- }
57
-
58
- @include ms-RTL {
59
- border-right-color: $color;
60
- }
61
- }
62
-
63
- @mixin ms-border-left-style($style) {
64
- @include ms-LTR {
65
- border-left-style: $style;
66
- }
67
-
68
- @include ms-RTL {
69
- border-right-style: $style;
70
- }
71
- }
72
-
73
- @mixin ms-border-left-width($width) {
74
- @include ms-LTR {
75
- border-left-width: $width;
76
- }
77
-
78
- @include ms-RTL {
79
- border-right-width: $width;
80
- }
81
- }
82
-
83
- @mixin ms-border-radius($topLeft, $topRight, $bottomRight, $bottomLeft) {
84
- border-radius: $topLeft $topRight $bottomRight $bottomLeft;
85
-
86
- @include ms-RTL {
87
- border-radius: $topRight $topLeft $bottomLeft $bottomRight;
88
- }
89
- }
90
-
91
- @mixin ms-border-right($width, $style, $color) {
92
- @include ms-LTR {
93
- border-right: $width $style $color;
94
- }
95
-
96
- @include ms-RTL {
97
- border-left: $width $style $color;
98
- }
99
- }
100
-
101
- @mixin ms-border-right-color($color) {
102
- @include ms-LTR {
103
- border-right-color: $color;
104
- }
105
-
106
- @include ms-RTL {
107
- border-left-color: $color;
108
- }
109
- }
110
-
111
- @mixin ms-border-right-style($style) {
112
- @include ms-LTR {
113
- border-right-style: $style;
114
- }
115
-
116
- @include ms-RTL {
117
- border-left-style: $style;
118
- }
119
- }
120
-
121
- @mixin ms-border-right-width($width) {
122
- @include ms-LTR {
123
- border-right-width: $width;
124
- }
125
-
126
- @include ms-RTL {
127
- border-left-width: $width;
128
- }
129
- }
130
-
131
- // Floats.
132
- @mixin ms-clear($side) {
133
- @if $side == left {
134
- @include ms-LTR {
135
- clear: $side;
136
- }
137
-
138
- @include ms-RTL {
139
- clear: right;
140
- }
141
- } @else if $side == right {
142
- @include ms-LTR {
143
- clear: $side;
144
- }
145
-
146
- @include ms-RTL {
147
- clear: left;
148
- }
149
- } @else {
150
- clear: $side;
151
- }
152
- }
153
-
154
- @mixin ms-float($direction) {
155
- @if $direction == left {
156
- @include ms-LTR {
157
- float: left;
158
- }
159
-
160
- @include ms-RTL {
161
- float: right;
162
- }
163
- } @else {
164
- @include ms-LTR {
165
- float: right;
166
- }
167
-
168
- @include ms-RTL {
169
- float: left;
170
- }
171
- }
172
- }
173
-
174
- // Positioning.
175
- @mixin ms-left($distance) {
176
- @include ms-LTR {
177
- left: $distance;
178
- }
179
-
180
- @include ms-RTL {
181
- right: $distance;
182
- }
183
- }
184
-
185
- @mixin ms-right($distance) {
186
- @include ms-LTR {
187
- right: $distance;
188
- }
189
-
190
- @include ms-RTL {
191
- left: $distance;
192
- }
193
- }
194
-
195
- // Margins.
196
- @mixin ms-margin($top, $right, $bottom, $left) {
197
- margin: $top $right $bottom $left;
198
-
199
- @include ms-RTL {
200
- margin: $top $left $bottom $right;
201
- }
202
- }
203
-
204
- @mixin ms-margin-left($distance) {
205
- @include ms-LTR {
206
- margin-left: $distance;
207
- }
208
-
209
- @include ms-RTL {
210
- margin-right: $distance;
211
- }
212
- }
213
-
214
- @mixin ms-margin-right($distance) {
215
- @include ms-LTR {
216
- margin-right: $distance;
217
- }
218
- @include ms-RTL {
219
- margin-left: $distance;
220
- }
221
- }
222
-
223
- // Padding.
224
- @mixin ms-padding($top, $right, $bottom, $left) {
225
- padding: $top $right $bottom $left;
226
-
227
- @include ms-RTL {
228
- padding: $top $left $bottom $right;
229
- }
230
- }
231
-
232
- @mixin ms-padding-left($distance) {
233
- @include ms-LTR {
234
- padding-left: $distance;
235
- }
236
-
237
- @include ms-RTL {
238
- padding-right: $distance;
239
- }
240
- }
241
-
242
- @mixin ms-padding-right($distance) {
243
- @include ms-LTR {
244
- padding-right: $distance;
245
- }
246
-
247
- @include ms-RTL {
248
- padding-left: $distance;
249
- }
250
- }
251
-
252
- // Text-alignment.
253
- @mixin ms-text-align($direction) {
254
- @if $direction == left {
255
- @include ms-LTR {
256
- text-align: left;
257
- }
258
-
259
- @include ms-RTL {
260
- text-align: right;
261
- }
262
- } @else {
263
- @include ms-LTR {
264
- text-align: right;
265
- }
266
-
267
- @include ms-RTL {
268
- text-align: left;
269
- }
270
- }
271
- }
272
-
273
- // Box-shadow.
274
- @mixin ms-box-shadow($left, $etc) {
275
- @include ms-LTR {
276
- box-shadow: $left $etc;
277
- }
278
-
279
- @include ms-RTL {
280
- box-shadow: -$left $etc;
281
- }
282
- }
283
-
284
- // Transforms.
285
- @mixin ms-transform-scaleX($scaleX: 1) {
286
- @include ms-LTR {
287
- transform: scaleX($scaleX);
288
- }
289
-
290
- @include ms-RTL {
291
- transform: scaleX(-$scaleX);
292
- }
293
- }
294
-
295
- @mixin ms-transform-translateX($distance) {
296
- @include ms-LTR {
297
- transform: translateX($distance);
298
- }
299
-
300
- @include ms-RTL {
301
- transform: translateX(-$distance);
302
- }
303
- }
304
-
305
- @mixin ms-transform-rotate($degrees) {
306
- @include ms-LTR {
307
- transform: rotate($degrees);
308
- }
309
-
310
- @include ms-RTL {
311
- transform: rotate(-$degrees);
312
- }
313
- }
314
-
315
- // Transitions. Only supported when ONLY left/right are declared
316
- @mixin ms-transition-property($direction) {
317
- @if $direction == left {
318
- @include ms-LTR {
319
- transition-property: left;
320
- }
321
-
322
- @include ms-RTL {
323
- transition-property: right;
324
- }
325
- } @else {
326
- @include ms-LTR {
327
- transition-property: right;
328
- }
329
-
330
- @include ms-RTL {
331
- transition-property: left;
332
- }
333
- }
334
- }