office-ui-fabric-rails 2.5.0.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (59) hide show
  1. checksums.yaml +7 -0
  2. data/.gitignore +11 -0
  3. data/.rspec +2 -0
  4. data/.travis.yml +5 -0
  5. data/Gemfile +4 -0
  6. data/LICENSE +21 -0
  7. data/README.md +69 -0
  8. data/Rakefile +24 -0
  9. data/bin/console +14 -0
  10. data/bin/setup +8 -0
  11. data/bower.json +7 -0
  12. data/lib/office-ui-fabric-rails.rb +2 -0
  13. data/lib/office-ui-fabric-rails/engine.rb +6 -0
  14. data/lib/office-ui-fabric-rails/version.rb +6 -0
  15. data/office-ui-fabric-rails.gemspec +35 -0
  16. data/vendor/assets/css/fabric.components.css +6553 -0
  17. data/vendor/assets/css/fabric.components.min.css +6 -0
  18. data/vendor/assets/css/fabric.components.rtl.css +6355 -0
  19. data/vendor/assets/css/fabric.components.rtl.min.css +6 -0
  20. data/vendor/assets/css/fabric.css +5991 -0
  21. data/vendor/assets/css/fabric.min.css +6 -0
  22. data/vendor/assets/css/fabric.rtl.css +6280 -0
  23. data/vendor/assets/css/fabric.rtl.min.css +6 -0
  24. data/vendor/assets/js/jquery.fabric.js +2451 -0
  25. data/vendor/assets/js/jquery.fabric.min.js +2 -0
  26. data/vendor/assets/scss/Fabric.Animations.Output.scss +419 -0
  27. data/vendor/assets/scss/Fabric.Animations.RTL.Output.scss +80 -0
  28. data/vendor/assets/scss/Fabric.Color.Mixins.Output.scss +458 -0
  29. data/vendor/assets/scss/Fabric.Components.scss +31 -0
  30. data/vendor/assets/scss/Fabric.Grid.Output.scss +32 -0
  31. data/vendor/assets/scss/Fabric.Icons.Font.Output.scss +23 -0
  32. data/vendor/assets/scss/Fabric.Icons.Output.scss +771 -0
  33. data/vendor/assets/scss/Fabric.Icons.RTL.Output.scss +114 -0
  34. data/vendor/assets/scss/Fabric.RTL.scss +39 -0
  35. data/vendor/assets/scss/Fabric.Responsive.Utilities.Output.scss +1022 -0
  36. data/vendor/assets/scss/Fabric.Typography.Fonts.Output.scss +76 -0
  37. data/vendor/assets/scss/Fabric.Typography.Language.Overrides.Output.scss +56 -0
  38. data/vendor/assets/scss/Fabric.Typography.Output.scss +379 -0
  39. data/vendor/assets/scss/Fabric.Utilities.Output.scss +23 -0
  40. data/vendor/assets/scss/Fabric.scss +40 -0
  41. data/vendor/assets/scss/_Fabric.Animations.RTL.scss +79 -0
  42. data/vendor/assets/scss/_Fabric.Animations.scss +237 -0
  43. data/vendor/assets/scss/_Fabric.Color.Mixins.scss +414 -0
  44. data/vendor/assets/scss/_Fabric.Color.Variables.scss +90 -0
  45. data/vendor/assets/scss/_Fabric.Common.scss +15 -0
  46. data/vendor/assets/scss/_Fabric.Grid.scss +34 -0
  47. data/vendor/assets/scss/_Fabric.Icons.scss +397 -0
  48. data/vendor/assets/scss/_Fabric.Mixins.RTL.scss +315 -0
  49. data/vendor/assets/scss/_Fabric.Mixins.scss +274 -0
  50. data/vendor/assets/scss/_Fabric.Responsive.Utilities.Variables.scss +697 -0
  51. data/vendor/assets/scss/_Fabric.Responsive.Variables.scss +35 -0
  52. data/vendor/assets/scss/_Fabric.Typography.Fonts.scss +170 -0
  53. data/vendor/assets/scss/_Fabric.Typography.Language.Overrides.scss +118 -0
  54. data/vendor/assets/scss/_Fabric.Typography.Variables.scss +27 -0
  55. data/vendor/assets/scss/_Fabric.Typography.scss +357 -0
  56. data/vendor/assets/scss/_Fabric.Utilities.scss +36 -0
  57. data/vendor/assets/scss/_Fabric.ZIndex.Variables.scss +32 -0
  58. data/vendor/assets/scss/_Office.Color.Variables.scss +34 -0
  59. metadata +172 -0
@@ -0,0 +1,315 @@
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
+ // Base left-to-right mixin definition.
10
+ @mixin LTR {
11
+ [dir='ltr'] & {
12
+ @content;
13
+ }
14
+ }
15
+
16
+ // Base right-to-left mixin definition.
17
+ @mixin RTL {
18
+ [dir='rtl'] & {
19
+ @content;
20
+ }
21
+ }
22
+
23
+ // Use baseRTL on a root element (e.g. page or region) that needs RTL support.
24
+ @mixin baseRtl {
25
+ @include RTL {
26
+ direction: rtl;
27
+ unicode-bidi: bidi-override;
28
+ }
29
+ }
30
+
31
+
32
+ // Common CSS property mixins with support for RTL.
33
+ // Use to automatically create RTL versions of your properties.
34
+
35
+ // Border styles.
36
+ @mixin border-color($top, $right, $bottom, $left) {
37
+ border-color: $top $right $bottom $left;
38
+
39
+ @include RTL {
40
+ border-color: $top $left $bottom $right;
41
+ }
42
+ }
43
+
44
+ @mixin border-left($width, $style, $color) {
45
+ @include LTR {
46
+ border-left: $width $style $color;
47
+ }
48
+
49
+ @include RTL {
50
+ border-right: $width $style $color;
51
+ }
52
+ }
53
+
54
+ @mixin border-left-color($color) {
55
+ @include LTR {
56
+ border-left-color: $color;
57
+ }
58
+
59
+ @include RTL {
60
+ border-right-color: $color;
61
+ }
62
+ }
63
+
64
+ @mixin border-left-style($style) {
65
+ @include LTR {
66
+ border-left-style: $style;
67
+ }
68
+
69
+ @include RTL {
70
+ border-right-style: $style;
71
+ }
72
+ }
73
+
74
+ @mixin border-left-width($width) {
75
+ @include LTR {
76
+ border-left-width: $width;
77
+ }
78
+
79
+ @include RTL {
80
+ border-right-width: $width;
81
+ }
82
+ }
83
+
84
+ @mixin border-radius($topLeft, $topRight, $bottomRight, $bottomLeft) {
85
+ border-radius: $topLeft $topRight $bottomRight $bottomLeft;
86
+
87
+ @include RTL {
88
+ border-radius: $topRight $topLeft $bottomLeft $bottomRight;
89
+ }
90
+ }
91
+
92
+ @mixin border-right($width, $style, $color) {
93
+ @include LTR {
94
+ border-right: $width $style $color;
95
+ }
96
+
97
+ @include RTL {
98
+ border-left: $width $style $color;
99
+ }
100
+ }
101
+
102
+ @mixin border-right-color($color) {
103
+ @include LTR {
104
+ border-right-color: $color;
105
+ }
106
+
107
+ @include RTL {
108
+ border-left-color: $color;
109
+ }
110
+ }
111
+
112
+ @mixin border-right-style($style) {
113
+ @include LTR {
114
+ border-right-style: $style;
115
+ }
116
+
117
+ @include RTL {
118
+ border-left-style: $style;
119
+ }
120
+ }
121
+
122
+ @mixin border-right-width($width) {
123
+ @include LTR {
124
+ border-right-width: $width;
125
+ }
126
+
127
+ @include RTL {
128
+ border-left-width: $width;
129
+ }
130
+ }
131
+
132
+ // Floats.
133
+ @mixin clear($side) {
134
+ @if $side == left {
135
+ @include LTR {
136
+ clear: $side;
137
+ }
138
+
139
+ @include RTL {
140
+ clear: right;
141
+ }
142
+ } @else if $side == right {
143
+ @include LTR {
144
+ clear: $side;
145
+ }
146
+
147
+ @include RTL {
148
+ clear: left;
149
+ }
150
+ } @else {
151
+ clear: $side;
152
+ }
153
+ }
154
+
155
+ @mixin float($direction) {
156
+ @if $direction == left {
157
+ @include LTR {
158
+ float: left;
159
+ }
160
+
161
+ @include RTL {
162
+ float: right;
163
+ }
164
+ } @else {
165
+ @include LTR {
166
+ float: right;
167
+ }
168
+
169
+ @include RTL {
170
+ float: left;
171
+ }
172
+ }
173
+ }
174
+
175
+ // Positioning.
176
+ @mixin left($distance) {
177
+ @include LTR {
178
+ left: $distance;
179
+ }
180
+
181
+ @include RTL {
182
+ right: $distance;
183
+ }
184
+ }
185
+
186
+ @mixin right($distance) {
187
+ @include LTR {
188
+ right: $distance;
189
+ }
190
+
191
+ @include RTL {
192
+ left: $distance;
193
+ }
194
+ }
195
+
196
+ // Margins.
197
+ @mixin margin($top, $right, $bottom, $left) {
198
+ margin: $top $right $bottom $left;
199
+
200
+ @include RTL {
201
+ margin: $top $left $bottom $right;
202
+ }
203
+ }
204
+
205
+ @mixin margin-left($distance) {
206
+ @include LTR {
207
+ margin-left: $distance;
208
+ }
209
+
210
+ @include RTL {
211
+ margin-right: $distance;
212
+ }
213
+ }
214
+
215
+ @mixin margin-right($distance) {
216
+ @include LTR {
217
+ margin-right: $distance;
218
+ }
219
+ @include RTL {
220
+ margin-left: $distance;
221
+ }
222
+ }
223
+
224
+ // Padding.
225
+ @mixin padding($top, $right, $bottom, $left) {
226
+ padding: $top $right $bottom $left;
227
+
228
+ @include RTL {
229
+ padding: $top $left $bottom $right;
230
+ }
231
+ }
232
+
233
+ @mixin padding-left($distance) {
234
+ @include LTR {
235
+ padding-left: $distance;
236
+ }
237
+
238
+ @include RTL {
239
+ padding-right: $distance;
240
+ }
241
+ }
242
+
243
+ @mixin padding-right($distance) {
244
+ @include LTR {
245
+ padding-right: $distance;
246
+ }
247
+
248
+ @include RTL {
249
+ padding-left: $distance;
250
+ }
251
+ }
252
+
253
+ // Text-alignment.
254
+ @mixin text-align($direction) {
255
+ @if $direction == left {
256
+ @include LTR {
257
+ text-align: left;
258
+ }
259
+
260
+ @include RTL {
261
+ text-align: right;
262
+ }
263
+ } @else {
264
+ @include LTR {
265
+ text-align: right;
266
+ }
267
+
268
+ @include RTL {
269
+ text-align: left;
270
+ }
271
+ }
272
+ }
273
+
274
+ // Box-shadow.
275
+ @mixin box-shadow($left, $etc) {
276
+ @include LTR {
277
+ box-shadow: $left $etc;
278
+ }
279
+
280
+ @include RTL {
281
+ box-shadow: -$left $etc;
282
+ }
283
+ }
284
+
285
+ // Transforms.
286
+ @mixin transform-rtl() {
287
+ @include LTR {
288
+ transform: scaleX(1);
289
+ }
290
+
291
+ @include RTL {
292
+ transform: scaleX(-1);
293
+ }
294
+ }
295
+
296
+ // Transitions. Only supported when ONLY left/right are declared
297
+ @mixin transition-property($direction) {
298
+ @if $direction == left {
299
+ @include LTR {
300
+ transition-property: left;
301
+ }
302
+
303
+ @include RTL {
304
+ transition-property: right;
305
+ }
306
+ } @else {
307
+ @include LTR {
308
+ transition-property: right;
309
+ }
310
+
311
+ @include RTL {
312
+ transition-property: left;
313
+ }
314
+ }
315
+ }
@@ -0,0 +1,274 @@
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
+ // Vendor-prefixed mixins
7
+
8
+
9
+ // Border radius.
10
+ @mixin border-radius($ms-radius: 5px) {
11
+ border-radius: $ms-radius;
12
+ background-clip: padding-box;
13
+ }
14
+
15
+ // Drop shadow.
16
+ @mixin drop-shadow($ms-x-offset: 0, $ms-y-offset: 0, $ms-blur: 5px, $ms-spread: 0, $ms-alpha: 0.4) {
17
+ box-shadow: $ms-x-offset $ms-y-offset $ms-blur $ms-spread rgba(0, 0, 0, $ms-alpha);
18
+ }
19
+
20
+ // Background gradient.
21
+ @mixin background-gradient($ms-origin: left, $ms-start: #000, $ms-start-location: 0%, $ms-stop: #FFF, $ms-stop-location: 100%) {
22
+ background-color: $ms-start;
23
+ background-image: linear-gradient($ms-origin, $ms-start $ms-start-location, $ms-stop $ms-stop-location);
24
+ }
25
+
26
+ // Rotation.
27
+ @mixin rotate($ms-deg) {
28
+ transform: rotate($ms-deg);
29
+ }
30
+
31
+ // Reset button styles.
32
+ @mixin button-reset() {
33
+ background: none;
34
+ border: 0;
35
+ cursor: pointer;
36
+ }
37
+
38
+ @mixin resetAnimation() {
39
+ -webkit-animation: none;
40
+ -moz-animation: none;
41
+ -ms-animation: none;
42
+ -o-animation: none;
43
+ animation: none;
44
+ }
45
+
46
+ @mixin resetBackface() {
47
+ backface-visibility: visible;
48
+ }
49
+
50
+ @mixin resetBackground() {
51
+ background: 0;
52
+ background-clip: border-box;
53
+ background-origin: padding-box;
54
+ }
55
+
56
+ @mixin resetBorder() {
57
+ border: 0;
58
+ border-collapse: separate;
59
+ border-image: none;
60
+ border-radius: 0;
61
+ border-spacing: 0;
62
+ }
63
+
64
+ @mixin resetBoxShadow() {
65
+ -webkit-box-shadow: none;
66
+ -moz-box-shadow: none;
67
+ box-shadow: none;
68
+ }
69
+
70
+ @mixin resetBoxSizing() {
71
+ box-sizing: content-box;
72
+ }
73
+
74
+ @mixin resetColumns() {
75
+ columns: auto;
76
+ column-count: auto;
77
+ column-fill: balance;
78
+ column-gap: normal;
79
+ column-rule: medium none currentColor;
80
+ column-rule-color: currentColor;
81
+ column-rule-style: none;
82
+ column-rule-width: none;
83
+ column-span: 1;
84
+ column-width: auto;
85
+ }
86
+
87
+
88
+ // Fonts and Typography Resets
89
+ @mixin resetFont() {
90
+ font: normal;
91
+ font-family: inherit;
92
+ font-size: normal;
93
+ font-style: normal;
94
+ font-variant: normal;
95
+ font-weight: normal;
96
+ }
97
+
98
+ @mixin resetTextStyling() {
99
+ text-align: inherit;
100
+ text-align-last: auto;
101
+ text-decoration: none;
102
+ text-decoration-color: inherit;
103
+ text-decoration-line: none;
104
+ text-decoration-style: solid;
105
+ text-indent: 0;
106
+ text-shadow: none;
107
+ text-transform: none;
108
+ line-height: normal;
109
+ letter-spacing: normal;
110
+ word-spacing: normal;
111
+ }
112
+
113
+
114
+ // Box Model Resets
115
+ @mixin resetPadding() {
116
+ padding: 0;
117
+ }
118
+
119
+ @mixin resetMargins() {
120
+ margin: 0;
121
+ }
122
+
123
+ @mixin resetOverflow() {
124
+ overflow: visible;
125
+ }
126
+
127
+ @mixin resetMax() {
128
+ max-height: none;
129
+ max-width: none;
130
+ }
131
+
132
+ @mixin resetMin() {
133
+ min-height: 0;
134
+ min-width: 0;
135
+ }
136
+
137
+ @mixin resetPositioning() {
138
+ bottom: auto;
139
+ left: auto;
140
+ top: auto;
141
+ left: auto;
142
+ }
143
+
144
+ @mixin resetFloat() {
145
+ float: none;
146
+ }
147
+
148
+ @mixin resetHeight($ms-useMaxMin: false) {
149
+ height: auto;
150
+ @if $ms-useMaxMin == true {
151
+ min-height: 0;
152
+ max-height: 0;
153
+ }
154
+ }
155
+
156
+ @mixin resetWidth($ms-useMaxMin: false) {
157
+ width: auto;
158
+ @if $ms-useMaxMin == true {
159
+ min-width: 0;
160
+ max-width: 0;
161
+ }
162
+ }
163
+
164
+ @mixin resetPosition() {
165
+ position: static;
166
+ }
167
+
168
+ @mixin resetPerspective() {
169
+ -webkit-perspective: none;
170
+ -webkit-perspective-origin: 50% 50%;
171
+ perspective: none;
172
+ perspective-origin: 50% 50%;
173
+
174
+ }
175
+
176
+ @mixin resetTransition() {
177
+ -webkit-transition: none;
178
+ transition: none;
179
+ }
180
+
181
+ @mixin resetListStyle() {
182
+ list-style: none;
183
+ }
184
+
185
+ @mixin resetTransform() {
186
+ -ms-transform: none;
187
+ -webkit-transform: none;
188
+ -webkit-transform-style: flat;
189
+ transform: none;
190
+ transform-style: flat;
191
+ }
192
+
193
+ @mixin resetOutline() {
194
+ outline: 0;
195
+ }
196
+
197
+ @mixin resetPageBreak() {
198
+ page-break-after: auto;
199
+ page-break-before: auto;
200
+ page-break-inside: auto;
201
+ }
202
+
203
+ @mixin resetDisplay() {
204
+ display: block;
205
+ }
206
+
207
+ @mixin resetVerticalAlign() {
208
+ vertical-align: baseline;
209
+ }
210
+
211
+ // Prevents the text within a block element from wrapping to second line.
212
+ @mixin noWrap() {
213
+ display: block;
214
+ overflow: hidden;
215
+ text-overflow: ellipsis;
216
+ white-space: nowrap;
217
+ }
218
+
219
+ // Input placehoder
220
+ @mixin input-placeholder {
221
+ &::-webkit-input-placeholder,
222
+ &::-moz-placeholder,
223
+ &:-moz-placeholder,
224
+ &:-ms-input-placeholder {
225
+ @content;
226
+ }
227
+ }
228
+
229
+ // Animations
230
+ @mixin animationName($ms-name) {
231
+ -webkit-animation-name: $ms-name;
232
+ -moz-animation-name: $ms-name;
233
+ -ms-animation-name: $ms-name;
234
+ -o-animation-name: $ms-name;
235
+ animation-name: $ms-name;
236
+ }
237
+
238
+ @mixin animationDuration($ms-duration) {
239
+ -webkit-animation-duration: $ms-duration;
240
+ -moz-animation-duration: $ms-duration;
241
+ -ms-animation-duration: $ms-duration;
242
+ -o-animation-duration: $ms-duration;
243
+ }
244
+
245
+ @mixin animationTiming($ms-function) {
246
+ -webkit-animation-timing-function: $ms-function;
247
+ -moz-animation-timing-function: $ms-function;
248
+ -ms-animation-timing-function: $ms-function;
249
+ -o-animation-timing-function: $ms-function;
250
+ animation-timing-function: $ms-function;
251
+ }
252
+
253
+ @mixin animationFillMode($ms-mode) {
254
+ -webkit-animation-fill-mode: $ms-mode;
255
+ -moz-animation-fill-mode: $ms-mode;
256
+ -ms-animation-fill-mode: $ms-mode;
257
+ -o-animation-fill-mode: $ms-mode;
258
+ animation-fill-mode: $ms-mode;
259
+ }
260
+
261
+ // Flexbox
262
+ @mixin flexBox() {
263
+ display: -ms-flexbox;
264
+ display: -webkit-flex;
265
+ display: flex;
266
+ }
267
+
268
+ @mixin alignItems($ms-mode) {
269
+ -webkit-box-align: $ms-mode;
270
+ -moz-box-align: $ms-mode;
271
+ -ms-flex-align: $ms-mode;
272
+ -webkit-align-items: $ms-mode;
273
+ align-items: $ms-mode;
274
+ }