office-ui-fabric-core-rails 5.1.0.0 → 6.0.0.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (70) hide show
  1. checksums.yaml +4 -4
  2. data/.travis.yml +1 -1
  3. data/lib/office-ui-fabric-core-rails/version.rb +2 -2
  4. data/package.json +2 -2
  5. data/vendor/assets/css/fabric-6.0.0.scoped.css +8251 -0
  6. data/vendor/assets/css/fabric-6.0.0.scoped.min.css +6 -0
  7. data/vendor/assets/css/fabric.css +4597 -4324
  8. data/vendor/assets/css/fabric.min.css +2 -2
  9. data/vendor/assets/css/fabric.rtl.css +5630 -4137
  10. data/vendor/assets/css/fabric.rtl.min.css +2 -2
  11. data/vendor/assets/scss/Fabric.RTL.scss +13 -39
  12. data/vendor/assets/scss/Fabric.Scoped.scss +33 -0
  13. data/vendor/assets/scss/Fabric.scss +22 -43
  14. data/vendor/assets/scss/_Animation.RTL.scss +58 -0
  15. data/vendor/assets/scss/_Animation.scss +173 -0
  16. data/vendor/assets/scss/_BrandIcon.scss +19 -0
  17. data/vendor/assets/scss/{Fabric.Color.Mixins.Output.scss → _Color.scss} +441 -443
  18. data/vendor/assets/scss/_Font.Definitions.scss +33 -0
  19. data/vendor/assets/scss/{Fabric.Typography.Output.scss → _Font.scss} +387 -389
  20. data/vendor/assets/scss/{Fabric.Grid.Output.scss → _Grid.scss} +24 -32
  21. data/vendor/assets/scss/{Fabric.Icons.Font.Output.scss → _Icon.Definitions.scss} +28 -21
  22. data/vendor/assets/scss/{Fabric.Icons.RTL.Output.scss → _Icon.RTL.scss} +146 -149
  23. data/vendor/assets/scss/{Fabric.Icons.Output.scss → _Icon.scss} +754 -751
  24. data/vendor/assets/scss/_References.scss +26 -0
  25. data/vendor/assets/scss/_Responsive.scss +1010 -0
  26. data/vendor/assets/scss/{Fabric.Utilities.Output.scss → _Utility.scss} +44 -46
  27. data/vendor/assets/scss/_Wrapper.scss +41 -0
  28. data/vendor/assets/scss/mixins/_Animation.Mixins.scss +360 -0
  29. data/vendor/assets/scss/mixins/_BrandIcon.Mixins.scss +36 -0
  30. data/vendor/assets/scss/{_Fabric.Color.Mixins.scss → mixins/_Color.Mixins.scss} +418 -418
  31. data/vendor/assets/scss/{_Fabric.Mixins.RTL.scss → mixins/_Directionality.Mixins.scss} +325 -325
  32. data/vendor/assets/scss/{_Fabric.Typography.scss → mixins/_Font.Mixins.scss} +381 -345
  33. data/vendor/assets/scss/mixins/_General.Mixins.scss +371 -0
  34. data/vendor/assets/scss/{_Fabric.Grid.scss → mixins/_Grid.Mixins.scss} +39 -34
  35. data/vendor/assets/scss/mixins/_Icon.Mixins.scss +777 -0
  36. data/vendor/assets/scss/mixins/_Responsive.Mixins.scss +1425 -0
  37. data/vendor/assets/scss/mixins/_ScopedStyles.Mixins.scss +20 -0
  38. data/vendor/assets/scss/variables/_Animation.Variables.scss +11 -0
  39. data/vendor/assets/scss/variables/_BrandIcon.Variables.scss +12 -0
  40. data/vendor/assets/scss/{_Fabric.Color.Variables.scss → variables/_Color.Variables.scss} +77 -93
  41. data/vendor/assets/scss/variables/_Font.Variables.scss +41 -0
  42. data/vendor/assets/scss/variables/_General.Variables.scss +6 -0
  43. data/vendor/assets/scss/variables/_Icon.Variables.scss +7 -0
  44. data/vendor/assets/scss/variables/_Responsive.Variables.scss +16 -0
  45. data/vendor/assets/scss/variables/_ZIndex.Variables.scss +14 -0
  46. metadata +38 -39
  47. data/vendor/assets/scss/Fabric.Animations.Output.scss +0 -419
  48. data/vendor/assets/scss/Fabric.Animations.RTL.Output.scss +0 -80
  49. data/vendor/assets/scss/Fabric.Base.Output.scss +0 -14
  50. data/vendor/assets/scss/Fabric.Brand.Icons.Output.scss +0 -19
  51. data/vendor/assets/scss/Fabric.Responsive.Utilities.Output.scss +0 -1012
  52. data/vendor/assets/scss/Fabric.Typography.Fonts.Extended.Output.scss +0 -67
  53. data/vendor/assets/scss/Fabric.Typography.Fonts.Output.scss +0 -13
  54. data/vendor/assets/scss/Fabric.Typography.Language.Overrides.Output.scss +0 -53
  55. data/vendor/assets/scss/_Fabric.Animations.RTL.scss +0 -79
  56. data/vendor/assets/scss/_Fabric.Animations.scss +0 -237
  57. data/vendor/assets/scss/_Fabric.Base.scss +0 -13
  58. data/vendor/assets/scss/_Fabric.Brand.Icons.scss +0 -51
  59. data/vendor/assets/scss/_Fabric.Common.scss +0 -16
  60. data/vendor/assets/scss/_Fabric.Icons.scss +0 -779
  61. data/vendor/assets/scss/_Fabric.Mixins.scss +0 -282
  62. data/vendor/assets/scss/_Fabric.Responsive.Utilities.Variables.scss +0 -1423
  63. data/vendor/assets/scss/_Fabric.Responsive.Variables.scss +0 -35
  64. data/vendor/assets/scss/_Fabric.Typography.Fonts.scss +0 -167
  65. data/vendor/assets/scss/_Fabric.Typography.Language.Overrides.scss +0 -50
  66. data/vendor/assets/scss/_Fabric.Typography.Mixins.scss +0 -11
  67. data/vendor/assets/scss/_Fabric.Typography.Variables.scss +0 -29
  68. data/vendor/assets/scss/_Fabric.Utilities.scss +0 -76
  69. data/vendor/assets/scss/_Fabric.ZIndex.Variables.scss +0 -32
  70. data/vendor/assets/scss/_Fabric.i18n.scss +0 -316
@@ -1,35 +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 responsive variables
7
-
8
-
9
- //== Variables for responsive breakpoints
10
- //
11
-
12
- // Small screen / phone (320px - 479px)
13
- $ms-screen-sm-min: 320px !default;
14
-
15
- // Medium screen / tablet (480px - 639px)
16
- $ms-screen-md-min: 480px !default;
17
-
18
- // Large screen / tablet (640px - 1023px)
19
- $ms-screen-lg-min: 640px !default;
20
-
21
- // Extra large screen / tablet (1024px - 1365px)
22
- $ms-screen-xl-min: 1024px !default;
23
-
24
- // Extra extra large screen / desktop (1366px - 1919px)
25
- $ms-screen-xxl-min: 1366px !default;
26
-
27
- // Extra extra extra large screen / desktop (1920px and up)
28
- $ms-screen-xxxl-min: 1920px !default;
29
-
30
- // Set all maxes since order matters in SASS
31
- $ms-screen-sm-max: ($ms-screen-md-min - 1);
32
- $ms-screen-md-max: ($ms-screen-lg-min - 1);
33
- $ms-screen-lg-max: ($ms-screen-xl-min - 1);
34
- $ms-screen-xl-max: ($ms-screen-xxl-min - 1);
35
- $ms-screen-xxl-max: ($ms-screen-xxxl-min - 1);
@@ -1,167 +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
- // Font definitions
7
-
8
-
9
- // Font weights.
10
- $ms-font-name: "Segoe UI" !default;
11
-
12
-
13
- // Font paths.
14
- $ms-font-directory: "https://static2.sharepointonline.com/files/fabric/assets/fonts/" !default;
15
- $ms-font-path-arabic: "segoeui-arabic" !default;
16
- $ms-font-path-cyrillic: "segoeui-cyrillic" !default;
17
- $ms-font-path-easteuropean: "segoeui-easteuropean" !default;
18
- $ms-font-path-greek: "segoeui-greek" !default;
19
- $ms-font-path-hebrew: "segoeui-hebrew" !default;
20
- $ms-font-path-vietnamese: "segoeui-vietnamese" !default;
21
- $ms-font-path-westeuropean: "segoeui-westeuropean" !default;
22
-
23
-
24
- /*
25
- Your use of the content in the files referenced here are subject to the terms of the license at http://aka.ms/fabric-font-license
26
- */
27
-
28
- // Mixins to generate @font-face rules for unique languages.
29
- @mixin SegoeUILight($ms-font-language, $ms-font-path) {
30
- @font-face {
31
- font-family: "#{$ms-font-name} #{$ms-font-language}";
32
- src: local("Segoe UI Light"),
33
- url('#{$ms-font-directory}/#{$ms-font-path}/segoeui-light.woff2') format('woff2'),
34
- url('#{$ms-font-directory}/#{$ms-font-path}/segoeui-light.woff') format('woff'),
35
- url('#{$ms-font-directory}/#{$ms-font-path}/segoeui-light.ttf') format('truetype');
36
- font-weight: 100;
37
- font-style: normal;
38
- }
39
- }
40
-
41
- @mixin SegoeUISemilight($ms-font-language, $ms-font-path) {
42
- @font-face {
43
- font-family: "#{$ms-font-name} #{$ms-font-language}";
44
- src: local("Segoe UI Semilight"),
45
- url('#{$ms-font-directory}/#{$ms-font-path}/segoeui-semilight.woff2') format('woff2'),
46
- url('#{$ms-font-directory}/#{$ms-font-path}/segoeui-semilight.woff') format('woff'),
47
- url('#{$ms-font-directory}/#{$ms-font-path}/segoeui-semilight.ttf') format('truetype');
48
- font-weight: 200;
49
- font-style: normal;
50
- }
51
- }
52
-
53
- @mixin SegoeUIRegular($ms-font-language, $ms-font-path) {
54
- @font-face {
55
- font-family: "#{$ms-font-name} #{$ms-font-language}";
56
- src: local("Segoe UI"),
57
- url('#{$ms-font-directory}/#{$ms-font-path}/segoeui-regular.woff2') format('woff2'),
58
- url('#{$ms-font-directory}/#{$ms-font-path}/segoeui-regular.woff') format('woff'),
59
- url('#{$ms-font-directory}/#{$ms-font-path}/segoeui-regular.ttf') format('truetype');
60
- font-weight: 400;
61
- font-style: normal;
62
- }
63
- }
64
-
65
- @mixin SegoeUISemibold($ms-font-language, $ms-font-path) {
66
- @font-face {
67
- font-family: "#{$ms-font-name} #{$ms-font-language}";
68
- src: local("Segoe UI Semibold"),
69
- url('#{$ms-font-directory}/#{$ms-font-path}/segoeui-semibold.woff2') format('woff2'),
70
- url('#{$ms-font-directory}/#{$ms-font-path}/segoeui-semibold.woff') format('woff'),
71
- url('#{$ms-font-directory}/#{$ms-font-path}/segoeui-semibold.ttf') format('truetype');
72
- font-weight: 600;
73
- font-style: normal;
74
- }
75
- }
76
-
77
- // Mixins to generate language-specific font faces.
78
- @mixin SegoeUIArabicLight {
79
- @include SegoeUILight("Arabic", $ms-font-path-arabic);
80
- }
81
- @mixin SegoeUIArabicRegular {
82
- @include SegoeUIRegular("Arabic", $ms-font-path-arabic);
83
- }
84
- @mixin SegoeUIArabicSemibold {
85
- @include SegoeUISemibold("Arabic", $ms-font-path-arabic);
86
- }
87
- @mixin SegoeUIArabicSemilight {
88
- @include SegoeUISemilight("Arabic", $ms-font-path-arabic);
89
- }
90
-
91
- @mixin SegoeUICyrillicLight {
92
- @include SegoeUILight("Cyrillic", $ms-font-path-cyrillic);
93
- }
94
- @mixin SegoeUICyrillicRegular {
95
- @include SegoeUIRegular("Cyrillic", $ms-font-path-cyrillic);
96
- }
97
- @mixin SegoeUICyrillicSemibold {
98
- @include SegoeUISemibold("Cyrillic", $ms-font-path-cyrillic);
99
- }
100
- @mixin SegoeUICyrillicSemilight {
101
- @include SegoeUISemilight("Cyrillic", $ms-font-path-cyrillic);
102
- }
103
-
104
- @mixin SegoeUIEastEuropeanLight {
105
- @include SegoeUILight("EastEuropean", $ms-font-path-easteuropean);
106
- }
107
- @mixin SegoeUIEastEuropeanRegular {
108
- @include SegoeUIRegular("EastEuropean", $ms-font-path-easteuropean);
109
- }
110
- @mixin SegoeUIEastEuropeanSemibold {
111
- @include SegoeUISemibold("EastEuropean", $ms-font-path-easteuropean);
112
- }
113
- @mixin SegoeUIEastEuropeanSemilight {
114
- @include SegoeUISemilight("EastEuropean", $ms-font-path-easteuropean);
115
- }
116
-
117
- @mixin SegoeUIGreekLight {
118
- @include SegoeUILight("Greek", $ms-font-path-greek);
119
- }
120
- @mixin SegoeUIGreekRegular {
121
- @include SegoeUIRegular("Greek", $ms-font-path-greek);
122
- }
123
- @mixin SegoeUIGreekSemibold {
124
- @include SegoeUISemibold("Greek", $ms-font-path-greek);
125
- }
126
- @mixin SegoeUIGreekSemilight {
127
- @include SegoeUISemilight("Greek", $ms-font-path-greek);
128
- }
129
-
130
- @mixin SegoeUIHebrewLight {
131
- @include SegoeUILight("Hebrew", $ms-font-path-hebrew);
132
- }
133
- @mixin SegoeUIHebrewRegular {
134
- @include SegoeUIRegular("Hebrew", $ms-font-path-hebrew);
135
- }
136
- @mixin SegoeUIHebrewSemibold {
137
- @include SegoeUISemibold("Hebrew", $ms-font-path-hebrew);
138
- }
139
- @mixin SegoeUIHebrewSemilight {
140
- @include SegoeUISemilight("Hebrew", $ms-font-path-hebrew);
141
- }
142
-
143
- @mixin SegoeUIVietnameseLight {
144
- @include SegoeUILight("Vietnamese", $ms-font-path-vietnamese);
145
- }
146
- @mixin SegoeUIVietnameseRegular {
147
- @include SegoeUIRegular("Vietnamese", $ms-font-path-vietnamese);
148
- }
149
- @mixin SegoeUIVietnameseSemibold {
150
- @include SegoeUISemibold("Vietnamese", $ms-font-path-vietnamese);
151
- }
152
- @mixin SegoeUIVietnameseSemilight {
153
- @include SegoeUISemilight("Vietnamese", $ms-font-path-vietnamese);
154
- }
155
-
156
- @mixin SegoeUIWestEuropeanLight {
157
- @include SegoeUILight("WestEuropean", $ms-font-path-westeuropean);
158
- }
159
- @mixin SegoeUIWestEuropeanRegular {
160
- @include SegoeUIRegular("WestEuropean", $ms-font-path-westeuropean);
161
- }
162
- @mixin SegoeUIWestEuropeanSemibold {
163
- @include SegoeUISemibold("WestEuropean", $ms-font-path-westeuropean);
164
- }
165
- @mixin SegoeUIWestEuropeanSemilight {
166
- @include SegoeUISemilight("WestEuropean", $ms-font-path-westeuropean);
167
- }
@@ -1,50 +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
- // Language override definitions
7
-
8
-
9
- // A mixin that overrides all of the font classes for languages that
10
- // use system fonts. A single font-family is used for all weights.
11
- @mixin language-override-system-fonts($lang-code, $font-family) {
12
- *[lang="#{$lang-code}"] {
13
- .ms-font-mi,
14
- .ms-font-xs,
15
- .ms-font-s,
16
- .ms-font-s-plus,
17
- .ms-font-m,
18
- .ms-font-m-plus,
19
- .ms-font-l,
20
- .ms-font-xl,
21
- .ms-font-xxl,
22
- .ms-font-su,
23
- .ms-fontWeight-light,
24
- .ms-fontWeight-light-hover:hover,
25
- .ms-fontWeight-semilight,
26
- .ms-fontWeight-semilight-hover:hover,
27
- .ms-fontWeight-regular,
28
- .ms-fontWeight-regular-hover:hover,
29
- .ms-fontWeight-semibold,
30
- .ms-fontWeight-semibold-hover:hover {
31
- font-family: $font-family;
32
- }
33
- }
34
- }
35
-
36
- // Variables for each of the non-distributed (native) font stacks.
37
- $ms-font-stack-japanese: 'Yu Gothic', 'Meiryo UI', Meiryo, 'MS Pgothic', Osaka, $ms-font-system-base !default;
38
- $ms-font-stack-korean: 'Malgun Gothic', Gulim, $ms-font-system-base !default;
39
- $ms-font-stack-chinese-simplified: 'Microsoft Yahei', Verdana, Simsun, $ms-font-system-base !default;
40
- $ms-font-stack-chinese-traditional: 'Microsoft Jhenghei', Pmingliu, $ms-font-system-base !default;
41
- $ms-font-stack-hindi: 'Nirmala UI', $ms-font-system-base !default;
42
-
43
- // Variables for each of the web font stacks.
44
- $ms-font-stack-arabic: 'Segoe UI Arabic', $ms-font-family-base !default;
45
- $ms-font-stack-cyrillic: 'Segoe UI Cyrillic', $ms-font-family-base !default;
46
- $ms-font-stack-eastEuropean: 'Segoe UI EastEuropean', $ms-font-family-base !default;
47
- $ms-font-stack-greek: 'Segoe UI Greek', $ms-font-family-base !default;
48
- $ms-font-stack-hebrew: 'Segoe UI Hebrew', $ms-font-family-base !default;
49
- $ms-font-stack-vietnamese: 'Segoe UI Vietnamese', $ms-font-family-base !default;
50
- $ms-font-stack-leelawadee: 'Leelawadee UI', 'Kmer UI', $ms-font-family-base !default;
@@ -1,11 +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 Typography mixins
7
-
8
- @mixin ms-baseFont {
9
- font-family: $ms-font-family-base;
10
- -webkit-font-smoothing: antialiased;
11
- }
@@ -1,29 +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 Typography variables
7
-
8
- $ms-font-system-base: 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif !default;
9
- $ms-font-family-base: 'Segoe UI WestEuropean', $ms-font-system-base !default;
10
-
11
- $ms-font-weight-light: 100 !default;
12
- $ms-font-weight-regular: 400 !default;
13
- $ms-font-weight-semilight: 300 !default;
14
- $ms-font-weight-semibold: 600 !default;
15
-
16
-
17
- //== Type sizes
18
- //
19
-
20
- $ms-font-size-su: 42px !default;
21
- $ms-font-size-xxl: 28px !default;
22
- $ms-font-size-xl: 21px !default;
23
- $ms-font-size-l: 17px !default;
24
- $ms-font-size-m-plus: 15px !default;
25
- $ms-font-size-m: 14px !default;
26
- $ms-font-size-s-plus: 13px !default;
27
- $ms-font-size-s: 12px !default;
28
- $ms-font-size-xs: 11px !default;
29
- $ms-font-size-mi: 10px !default;
@@ -1,76 +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
- // Utility classes and mixins used throughout Fabric.
7
-
8
- @import "Fabric.Mixins";
9
-
10
- // The best box is a border box.
11
- @mixin ms-u-borderBox {
12
- box-sizing: border-box;
13
- }
14
-
15
- // For setting the border base width
16
- @mixin ms-u-borderBase {
17
- border: 1px solid;
18
- }
19
-
20
- // Ensures the block expands to the full height to enclose its floated childen.
21
- @mixin ms-u-clearfix {
22
- *zoom: 1;
23
- &::before,
24
- &::after {
25
- display: table;
26
- content: "";
27
- line-height: 0;
28
- }
29
- &::after {
30
- clear: both;
31
- }
32
- }
33
-
34
- // Basic border-box, margin, and padding reset.
35
- @mixin ms-u-normalize {
36
- @include ms-u-borderBox;
37
- @include resetMargins;
38
- @include resetPadding;
39
- @include resetBoxShadow;
40
- }
41
-
42
- // To set various text alignment styles
43
- // @param [variable list] $alignments
44
- @mixin ms-u-textAlign($alignments...) {
45
- @each $align in $alignments {
46
- $alignStr: inspect($align);
47
- .ms-u-textAlign#{to-upper-case(str-slice($alignStr, 1, 1)) + str-slice($alignStr, 2)} {
48
- text-align: $align;
49
- }
50
- }
51
- }
52
-
53
- // To hide content while still making it readable by screen readers (Accessibility)
54
- @mixin ms-u-screenReaderOnly {
55
- position: absolute;
56
- width: 1px;
57
- height: 1px;
58
- padding: 0;
59
- margin: -1px;
60
- overflow: hidden;
61
- clip: rect(0,0,0,0);
62
- border: 0;
63
- }
64
-
65
- // To add truncation with ellipsis
66
- @mixin ms-u-textTruncate {
67
- overflow: hidden;
68
- text-overflow: ellipsis;
69
- white-space: nowrap;
70
- word-wrap: normal; // Fix for IE 8/9 in case 'word-wrap: break-word' is set on parent nodes
71
- }
72
-
73
- // To disable text wrapping
74
- @mixin ms-u-noWrap {
75
- white-space: nowrap;
76
- }
@@ -1,32 +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
- // Z-Index Layeringz
7
-
8
-
9
- // Base Layer Variables
10
- $ms-zIndex-0: 0 !default;
11
- $ms-zIndex-1: 100 !default;
12
- $ms-zIndex-2: 200 !default;
13
- $ms-zIndex-3: 300 !default;
14
- $ms-zIndex-4: 400 !default;
15
- $ms-zIndex-5: 500 !default;
16
-
17
- // Base Layer Modifier Variables
18
- $ms-zIndex-back: 0 !default;
19
- $ms-zIndex-middle: 5 !default;
20
- $ms-zIndex-front: 10 !default;
21
-
22
-
23
- // Fabric Component Base Layer Assignments
24
-
25
- $ms-zIndex-Callout: $ms-zIndex-1 !default;
26
- $ms-zIndex-ContextualMenu: $ms-zIndex-1 !default;
27
- $ms-zIndex-Overlay: $ms-zIndex-2 !default;
28
- $ms-zIndex-Panel: $ms-zIndex-3 !default;
29
- $ms-zIndex-DatePicker: $ms-zIndex-3 !default;
30
- $ms-zIndex-Dialog: $ms-zIndex-3 !default;
31
- $ms-zIndex-PeoplePicker: $ms-zIndex-3 !default;
32
- $ms-zIndex-Dropdown: $ms-zIndex-4 !default;
@@ -1,316 +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
- // Internationalization mixins
7
-
8
-
9
-
10
- // Base left-to-right mixin definition.
11
- @mixin LTR {
12
- html[dir='ltr'] & {
13
- @content;
14
- }
15
- }
16
-
17
- // Base right-to-left mixin definition.
18
- @mixin RTL {
19
- html[dir='rtl'] & {
20
- @content;
21
- }
22
- }
23
-
24
- // Use baseRTL on a root element (e.g. page or region) that needs RTL support.
25
- @mixin baseRtl {
26
- @include RTL {
27
- direction: rtl;
28
- unicode-bidi: bidi-override;
29
- }
30
- }
31
-
32
-
33
- // Common CSS property mixins with support for RTL.
34
- // Use to automatically create RTL versions of your properties.
35
-
36
- // Border styles.
37
- @mixin border-color($top, $right, $bottom, $left) {
38
- border-color: $top $right $bottom $left;
39
-
40
- @include RTL {
41
- border-color: $top $left $bottom $right;
42
- }
43
- }
44
-
45
- @mixin border-left($width, $style, $color) {
46
- @include LTR {
47
- border-left: $width $style $color;
48
- }
49
-
50
- @include RTL {
51
- border-right: $width $style $color;
52
- }
53
- }
54
-
55
- @mixin border-left-color($color) {
56
- @include LTR {
57
- border-left-color: $color;
58
- }
59
-
60
- @include RTL {
61
- border-right-color: $color;
62
- }
63
- }
64
-
65
- @mixin border-left-style($style) {
66
- @include LTR {
67
- border-left-style: $style;
68
- }
69
-
70
- @include RTL {
71
- border-right-style: $style;
72
- }
73
- }
74
-
75
- @mixin border-left-width($width) {
76
- @include LTR {
77
- border-left-width: $width;
78
- }
79
-
80
- @include RTL {
81
- border-right-width: $width;
82
- }
83
- }
84
-
85
- @mixin border-radius($topLeft, $topRight, $bottomRight, $bottomLeft) {
86
- border-radius: $topLeft $topRight $bottomRight $bottomLeft;
87
-
88
- @include RTL {
89
- border-radius: $topRight $topLeft $bottomLeft $bottomRight;
90
- }
91
- }
92
-
93
- @mixin border-right($width, $style, $color) {
94
- @include LTR {
95
- border-right: $width $style $color;
96
- }
97
-
98
- @include RTL {
99
- border-left: $width $style $color;
100
- }
101
- }
102
-
103
- @mixin border-right-color($color) {
104
- @include LTR {
105
- border-right-color: $color;
106
- }
107
-
108
- @include RTL {
109
- border-left-color: $color;
110
- }
111
- }
112
-
113
- @mixin border-right-style($style) {
114
- @include LTR {
115
- border-right-style: $style;
116
- }
117
-
118
- @include RTL {
119
- border-left-style: $style;
120
- }
121
- }
122
-
123
- @mixin border-right-width($width) {
124
- @include LTR {
125
- border-right-width: $width;
126
- }
127
-
128
- @include RTL {
129
- border-left-width: $width;
130
- }
131
- }
132
-
133
- // Floats.
134
- @mixin clear($side) {
135
- @if $side == left {
136
- @include LTR {
137
- clear: $side;
138
- }
139
-
140
- @include RTL {
141
- clear: right;
142
- }
143
- } @else if $side == right {
144
- @include LTR {
145
- clear: $side;
146
- }
147
-
148
- @include RTL {
149
- clear: left;
150
- }
151
- } @else {
152
- clear: $side;
153
- }
154
- }
155
-
156
- @mixin float($direction) {
157
- @if $direction == left {
158
- @include LTR {
159
- float: left;
160
- }
161
-
162
- @include RTL {
163
- float: right;
164
- }
165
- } @else {
166
- @include LTR {
167
- float: right;
168
- }
169
-
170
- @include RTL {
171
- float: left;
172
- }
173
- }
174
- }
175
-
176
- // Positioning.
177
- @mixin left($distance) {
178
- @include LTR {
179
- left: $distance;
180
- }
181
-
182
- @include RTL {
183
- right: $distance;
184
- }
185
- }
186
-
187
- @mixin right($distance) {
188
- @include LTR {
189
- right: $distance;
190
- }
191
-
192
- @include RTL {
193
- left: $distance;
194
- }
195
- }
196
-
197
- // Margins.
198
- @mixin margin($top, $right, $bottom, $left) {
199
- margin: $top $right $bottom $left;
200
-
201
- @include RTL {
202
- margin: $top $left $bottom $right;
203
- }
204
- }
205
-
206
- @mixin margin-left($distance) {
207
- @include LTR {
208
- margin-left: $distance;
209
- }
210
-
211
- @include RTL {
212
- margin-right: $distance;
213
- }
214
- }
215
-
216
- @mixin margin-right($distance) {
217
- @include LTR {
218
- margin-right: $distance;
219
- }
220
- @include RTL {
221
- margin-left: $distance;
222
- }
223
- }
224
-
225
- // Padding.
226
- @mixin padding($top, $right, $bottom, $left) {
227
- padding: $top $right $bottom $left;
228
-
229
- @include RTL {
230
- padding: $top $left $bottom $right;
231
- }
232
- }
233
-
234
- @mixin padding-left($distance) {
235
- @include LTR {
236
- padding-left: $distance;
237
- }
238
-
239
- @include RTL {
240
- padding-right: $distance;
241
- }
242
- }
243
-
244
- @mixin padding-right($distance) {
245
- @include LTR {
246
- padding-right: $distance;
247
- }
248
-
249
- @include RTL {
250
- padding-left: $distance;
251
- }
252
- }
253
-
254
- // Text-alignment.
255
- @mixin text-align($direction) {
256
- @if $direction == left {
257
- @include LTR {
258
- text-align: left;
259
- }
260
-
261
- @include RTL {
262
- text-align: right;
263
- }
264
- } @else {
265
- @include LTR {
266
- text-align: right;
267
- }
268
-
269
- @include RTL {
270
- text-align: left;
271
- }
272
- }
273
- }
274
-
275
- // Box-shadow.
276
- @mixin box-shadow($left, $etc) {
277
- @include LTR {
278
- box-shadow: $left $etc;
279
- }
280
-
281
- @include RTL {
282
- box-shadow: -$left $etc;
283
- }
284
- }
285
-
286
- // Transforms.
287
- @mixin transform-rtl() {
288
- @include LTR {
289
- transform: scaleX(1);
290
- }
291
-
292
- @include RTL {
293
- transform: scaleX(-1);
294
- }
295
- }
296
-
297
- // Transitions. Only supported when ONLY left/right are declared
298
- @mixin transition-property($direction) {
299
- @if $direction == left {
300
- @include LTR {
301
- transition-property: left;
302
- }
303
-
304
- @include RTL {
305
- transition-property: right;
306
- }
307
- } @else {
308
- @include LTR {
309
- transition-property: right;
310
- }
311
-
312
- @include RTL {
313
- transition-property: left;
314
- }
315
- }
316
- }