hrm_ui_lib 3.1.14 → 3.1.16

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 (4) hide show
  1. package/assets/styles/helpers/_mixin.scss +326 -464
  2. package/assets/styles/styles.css +1 -1
  3. package/components/Table/Table.js +1 -1
  4. package/package.json +1 -1
package/assets/styles/helpers/_mixin.scss CHANGED
@@ -3,302 +3,150 @@
3
3
  @use "sass:list";
4
4
  @use "sass:string";
5
5
 
6
-
7
- $fontFamilyMap: (
8
- );
9
-
10
- $fontSizeMap: (
11
- --font-size-10: 10px,
12
- --font-size-12: 12px,
13
- --font-size-14: 14px,
14
- --font-size-16: 16px,
15
- --font-size-20: 20px,
16
- --font-size-24: 24px,
17
- --font-size-32: 32px,
18
- --font-size-36: 36px,
19
- --font-size-40: 40px,
20
- --font-size-48: 48px,
21
- --font-size-64: 64px,
22
- );
23
-
24
- $fontWeightsMap: (
25
- --font-weight-400: 400,
26
- --font-weight-500: 500,
27
- --font-weight-600: 600,
28
- --font-weight-700: 700,
29
- );
30
-
31
- $spaceMap: (
32
- --space-4: 4px,
33
- --space-8: 8px,
34
- --space-12: 12px,
35
- --space-16: 16px,
36
- --space-20: 20px,
37
- --space-24: 24px,
38
- --space-32: 32px,
39
- );
40
-
41
-
42
- $colorMap: (
43
- brand: (
44
- base: #72BF44,
45
- --color-900: #31531C,
46
- --color-800: #416E26,
47
- --color-700: #518A2F,
48
- --color-600: #61A539,
49
- --color-500: #72BF44,
50
- --color-400: #80C557,
51
- --color-300: #8ECC69,
52
- --color-200: #9CD27C,
53
- --color-100: #AAD98F,
54
- --color-50: #B8DFA2,
55
- --color-40: #CAE7B9,
56
- --color-30: #DBEFD1,
57
- --color-20: #EDF7E8,
58
- ),
59
- green: (
60
- base: #4DAA5B,
61
- --color-900: #265B25,
62
- --color-800: #357939,
63
- --color-700: #3D8B46,
64
- --color-600: #469D52,
65
- --color-500: #4DAA5B,
66
- --color-400: #5DB773,
67
- --color-300: #7AC48B,
68
- --color-200: #9FD4AC,
69
- --color-100: #C5E5CC,
70
- --color-50: #E6F4EA,
71
- ),
72
- blue: (
73
- base: #3C88F7,
74
- --color-900: #2443B8,
75
- --color-800: #2E63D6,
76
- --color-700: #3475E8,
77
- --color-600: #3C88F7,
78
- --color-500: #4396F7,
79
- --color-400: #54A6F8,
80
- --color-300: #71B6F9,
81
- --color-200: #9ACAFA,
82
- --color-100: #9ACAFA,
83
- --color-50: #E6F2FE,
84
- ),
85
- purple: (
86
- base: #8377D7,
87
- --color-900: #081FA6,
88
- --color-800: #0E2AB2,
89
- --color-700: #2431B9,
90
- --color-600: #3838C1,
91
- --color-500: #453DC7,
92
- --color-400: #6559D0,
93
- --color-300: #8377D7,
94
- --color-200: #A89DE2,
95
- --color-100: #CBC4ED,
96
- --color-50: #EAE7F7,
97
- ),
98
- pink: (
99
- base: #CA024F,
100
- --color-900: #4A0A20,
101
- --color-800: #79012F,
102
- --color-700: #A2023F,
103
- --color-600: #AD0244,
104
- --color-500: #CA024F,
105
- --color-400: #F50260,
106
- --color-300: #FD2779,
107
- --color-200: #FE7DAF,
108
- --color-100: #FEA8C9,
109
- --color-50: #FFD4E4,
110
- ),
111
- red: (
112
- base: #E61B00,
113
- --color-900: #A41300,
114
- --color-800: #E61B00,
115
- --color-700: #FF2103,
116
- --color-600: #FF391F,
117
- --color-500: #FF523B,
118
- --color-400: #FF6B57,
119
- --color-300: #FF8373,
120
- --color-200: #FF9C8F,
121
- --color-100: #FFB5AB,
122
- --color-50: #FFE2DE,
123
- ),
124
- yellow: (
125
- base: #F0B134,
126
- --color-900: #EB7520,
127
- --color-800: #ED912A,
128
- --color-700: #EEA02F,
129
- --color-600: #F0B134,
130
- --color-500: #F1BE39,
131
- --color-400: #F1BE39,
132
- --color-300: #F4D264,
133
- --color-200: #F7DE8E,
134
- --color-100: #FAEBB9,
135
- --color-50: #FDF7E4,
136
- ),
137
- grey: (
138
- base: #222222,
139
- --color-900: #222222,
140
- --color-800: #333333,
141
- --color-700: #555555,
142
- --color-600: #666666,
143
- --color-500: #888888,
144
- --color-400: #AAAAAA,
145
- --color-300: #BBBBBB,
146
- --color-200: #BBBBBB,
147
- --color-100: #DDDDDD,
148
- --color-50: #ECECEC,
149
- --color-40: #F4F5F4,
150
- --color-30: #F7F8F7,
151
- --color-20: #fafafa,
152
- ),
153
- white: (
154
- base: #fcfcfc
155
- )
156
- );
157
-
158
- $tokens: (
159
- color: $colorMap,
160
- space: $spaceMap,
161
- fontSize: $fontSizeMap,
162
- fontWeight: $fontWeightsMap,
163
- fontFamily: $fontFamilyMap
164
- );
165
-
166
-
167
6
  //fonts
168
-
169
-
170
7
  @mixin font-face($font-name, $file-name, $weight: normal, $style: normal) {
171
- @font-face {
172
- font-family: string.quote($font-name);
173
- src: url($file-name + '.ttf') format('truetype');
174
- font-weight: $weight;
175
- font-style: $style;
176
- }
8
+ @font-face {
9
+ font-family: string.quote($font-name);
10
+ src: url($file-name + '.ttf') format('truetype');
11
+ font-weight: $weight;
12
+ font-style: $style;
13
+ }
177
14
  }
178
15
 
179
-
180
16
  /*******************/
181
17
  /********SPACE******/
182
18
  /*******************/
183
19
  @function getSize($size) {
184
- $spaceTokens: map.get($tokens, 'space');
185
- @return map.get($spaceTokens, $size);
20
+ @return var(--size-#{$size});
186
21
  }
187
22
 
188
23
  /**padding**/
189
24
  @mixin padding($size) {
190
- padding: getSize($size);
25
+ padding: getSize($size);
191
26
  }
27
+
192
28
  @mixin padding-top($size) {
193
- padding-top: getSize($size);
29
+ padding-top: getSize($size);
194
30
  }
31
+
195
32
  @mixin padding-bottom($size) {
196
- padding-bottom: getSize($size);
33
+ padding-bottom: getSize($size);
197
34
  }
35
+
198
36
  @mixin padding-left($size) {
199
- padding-left: getSize($size);
37
+ padding-left: getSize($size);
200
38
  }
39
+
201
40
  @mixin padding-right($size) {
202
- padding-right: getSize($size);
41
+ padding-right: getSize($size);
203
42
  }
43
+
204
44
  @mixin padding-horizontal($size) {
205
- padding-left: getSize($size);
206
- padding-right: getSize($size);
45
+ padding-left: getSize($size);
46
+ padding-right: getSize($size);
207
47
  }
48
+
208
49
  @mixin padding-vertical($size) {
209
- padding-top: getSize($size);
210
- padding-bottom: getSize($size);
50
+ padding-top: getSize($size);
51
+ padding-bottom: getSize($size);
211
52
  }
53
+
212
54
  /**margin**/
213
55
  @mixin margin($size) {
214
- margin: getSize($size);
56
+ margin: getSize($size);
215
57
  }
58
+
216
59
  @mixin margin-top($size) {
217
- margin-top: getSize($size);
60
+ margin-top: getSize($size);
218
61
  }
62
+
219
63
  @mixin margin-bottom($size) {
220
- margin-bottom: getSize($size);
64
+ margin-bottom: getSize($size);
221
65
  }
66
+
222
67
  @mixin margin-left($size) {
223
- margin-left: getSize($size);
68
+ margin-left: getSize($size);
224
69
  }
70
+
225
71
  @mixin margin-right($size) {
226
- margin-right: getSize($size);
72
+ margin-right: getSize($size);
227
73
  }
74
+
228
75
  @mixin margin-horizontal($size) {
229
- margin-left: getSize($size);
230
- margin-right: getSize($size);
76
+ margin-left: getSize($size);
77
+ margin-right: getSize($size);
231
78
  }
79
+
232
80
  @mixin margin-vertical($size) {
233
- margin-top: getSize($size);
234
- margin-bottom: getSize($size);
81
+ margin-top: getSize($size);
82
+ margin-bottom: getSize($size);
235
83
  }
236
84
 
237
85
  /*******************/
238
86
  /********COLOR******/
239
87
  /*******************/
240
- @function getColor($color, $size: 'base') {
241
- $colorTokens: map.get($tokens, 'color');
242
- $selected: map.get($colorTokens, $color);
243
- @return map.get($selected, $size)
88
+ @function getColor($color, $size) {
89
+ @return var(--#{$color}-#{$size});
244
90
  }
245
91
 
246
92
  /**color**/
247
- @mixin color($color, $size: 'base') {
248
- color: getColor($color, $size);
93
+ @mixin color($color, $size) {
94
+ color: getColor($color, $size);
249
95
  }
96
+
250
97
  /**background-color**/
251
- @mixin background-color($color, $size: 'base') {
252
- background-color: getColor($color, $size);
98
+ @mixin background-color($color, $size) {
99
+ background-color: getColor($color, $size);
253
100
  }
254
101
 
255
-
256
102
  /*******************/
257
103
  /*****Typography****/
258
104
  /*******************/
259
105
 
260
106
  /**font-size**/
261
107
  @function getFontSize($size) {
262
- $fontSizeTokens: map.get($tokens, 'fontSize');
263
- @return map.get($fontSizeTokens, $size);
108
+ @return var(--font-size-#{$size});
264
109
  }
110
+
265
111
  @mixin font($size) {
266
- font-size: getFontSize($size);
112
+ font-size: getFontSize($size);
267
113
  }
114
+
268
115
  /**font-weight**/
269
116
  @function getFontWeight($size) {
270
- $fontWeightTokens: map.get($tokens, 'fontWeight');
271
- @return map.get($fontWeightTokens, $size);
117
+ @return var(--font-weight-#{$size});
272
118
  }
119
+
273
120
  @mixin font-weight($size) {
274
- font-weight: getFontWeight($size);
121
+ font-weight: getFontWeight($size);
275
122
  }
276
123
 
277
124
  //animation
278
125
 
279
126
  @mixin keyframes($animation-name) {
280
- @-webkit-keyframes #{$animation-name} {
281
- @content;
282
- }
283
- @-moz-keyframes #{$animation-name} {
284
- @content;
285
- }
286
- @-ms-keyframes #{$animation-name} {
287
- @content;
288
- }
289
- @-o-keyframes #{$animation-name} {
290
- @content;
291
- }
292
- @keyframes #{$animation-name} {
293
- @content;
294
- }
127
+ @-webkit-keyframes #{$animation-name} {
128
+ @content;
129
+ }
130
+ @-moz-keyframes #{$animation-name} {
131
+ @content;
132
+ }
133
+ @-ms-keyframes #{$animation-name} {
134
+ @content;
135
+ }
136
+ @-o-keyframes #{$animation-name} {
137
+ @content;
138
+ }
139
+ @keyframes #{$animation-name} {
140
+ @content;
141
+ }
295
142
  }
143
+
296
144
  @mixin animation($str) {
297
- -webkit-animation: #{$str};
298
- -moz-animation: #{$str};
299
- -ms-animation: #{$str};
300
- -o-animation: #{$str};
301
- animation: #{$str};
145
+ -webkit-animation: #{$str};
146
+ -moz-animation: #{$str};
147
+ -ms-animation: #{$str};
148
+ -o-animation: #{$str};
149
+ animation: #{$str};
302
150
  }
303
151
 
304
152
  /*animation mixin usage
@@ -316,14 +164,14 @@ $tokens: (
316
164
 
317
165
  //retina images
318
166
  @mixin image-2x($image, $width, $height) {
319
- @media (min--moz-device-pixel-ratio: 1.3),
320
- (-o-min-device-pixel-ratio: 2.6/2),
321
- (-webkit-min-device-pixel-ratio: 1.3),
322
- (min-device-pixel-ratio: 1.3),
323
- (min-resolution: 1.3dppx) {
324
- background-image: url($image);
325
- background-size: $width $height;
326
- }
167
+ @media (min--moz-device-pixel-ratio: 1.3),
168
+ (-o-min-device-pixel-ratio: 2.6/2),
169
+ (-webkit-min-device-pixel-ratio: 1.3),
170
+ (min-device-pixel-ratio: 1.3),
171
+ (min-resolution: 1.3dppx) {
172
+ background-image: url($image);
173
+ background-size: $width $height;
174
+ }
327
175
  }
328
176
 
329
177
  /*retina images mixin usage
@@ -337,18 +185,18 @@ div.logo {
337
185
 
338
186
  //gradients
339
187
  @mixin background-gradient($start-color, $end-color, $orientation) {
340
- background: $start-color;
188
+ background: $start-color;
341
189
 
342
- @if $orientation == 'vertical' {
343
- background: -webkit-linear-gradient(top, $start-color, $end-color);
344
- background: linear-gradient(to bottom, $start-color, $end-color);
345
- } @else if $orientation == 'horizontal' {
346
- background: -webkit-linear-gradient(left, $start-color, $end-color);
347
- background: linear-gradient(to right, $start-color, $end-color);
348
- } @else {
349
- background: -webkit-radial-gradient(center, ellipse cover, $start-color, $end-color);
350
- background: radial-gradient(ellipse at center, $start-color, $end-color);
351
- }
190
+ @if $orientation == 'vertical' {
191
+ background: -webkit-linear-gradient(top, $start-color, $end-color);
192
+ background: linear-gradient(to bottom, $start-color, $end-color);
193
+ } @else if $orientation == 'horizontal' {
194
+ background: -webkit-linear-gradient(left, $start-color, $end-color);
195
+ background: linear-gradient(to right, $start-color, $end-color);
196
+ } @else {
197
+ background: -webkit-radial-gradient(center, ellipse cover, $start-color, $end-color);
198
+ background: radial-gradient(ellipse at center, $start-color, $end-color);
199
+ }
352
200
  }
353
201
 
354
202
  /*gradient mixin usage
@@ -358,49 +206,62 @@ div.logo {
358
206
  */
359
207
 
360
208
  //positioning
361
- @function parseDirections($directions){
362
- $top: 0; $bottom: 0; $left: 0; $right: 0;
363
-
364
- @if list.length($directions) > 0{
365
- $d1: list.nth($directions,1);
366
- $top: $d1; $bottom: $d1; $left: $d1; $right: $d1;
367
- }@if list.length($directions) > 1 {
368
- $d2: list.nth($directions,2);
369
- $left: $d2; $right: $d2;
370
- }@if list.length($directions) > 2 {
371
- $d3: list.nth($directions,3);
372
- $bottom: $d3;
373
- }@if list.length($directions) > 3 {
374
- $d4: list.nth($directions,4);
375
- $left: $d4
376
- }
377
-
378
- @return (
379
- top: $top,
380
- bottom: $bottom,
381
- left: $left,
382
- right: $right
383
- );
384
- }
385
-
386
- @mixin position($positions...){
387
- $positions: parseDirections($positions);
388
- top: map.get($positions,'top');
389
- right: map.get($positions,'right');
390
- bottom: map.get($positions,'bottom');
391
- left: map.get($positions,'left');
392
- }
393
- @mixin absolute($positions...){
394
- position: absolute;
395
- @include position($positions...);
396
- }
397
- @mixin fixed($positions...){
398
- position: fixed;
399
- @include position($positions...);
400
- }
401
- @mixin sticky($positions...){
402
- position: sticky;
403
- @include position($positions...);
209
+ @function parseDirections($directions) {
210
+ $top: 0;
211
+ $bottom: 0;
212
+ $left: 0;
213
+ $right: 0;
214
+
215
+ @if list.length($directions) > 0 {
216
+ $d1: list.nth($directions, 1);
217
+ $top: $d1;
218
+ $bottom: $d1;
219
+ $left: $d1;
220
+ $right: $d1;
221
+ }
222
+ @if list.length($directions) > 1 {
223
+ $d2: list.nth($directions, 2);
224
+ $left: $d2;
225
+ $right: $d2;
226
+ }
227
+ @if list.length($directions) > 2 {
228
+ $d3: list.nth($directions, 3);
229
+ $bottom: $d3;
230
+ }
231
+ @if list.length($directions) > 3 {
232
+ $d4: list.nth($directions, 4);
233
+ $left: $d4
234
+ }
235
+
236
+ @return (
237
+ top: $top,
238
+ bottom: $bottom,
239
+ left: $left,
240
+ right: $right
241
+ );
242
+ }
243
+
244
+ @mixin position($positions...) {
245
+ $positions: parseDirections($positions);
246
+ top: map.get($positions, 'top');
247
+ right: map.get($positions, 'right');
248
+ bottom: map.get($positions, 'bottom');
249
+ left: map.get($positions, 'left');
250
+ }
251
+
252
+ @mixin absolute($positions...) {
253
+ position: absolute;
254
+ @include position($positions...);
255
+ }
256
+
257
+ @mixin fixed($positions...) {
258
+ position: fixed;
259
+ @include position($positions...);
260
+ }
261
+
262
+ @mixin sticky($positions...) {
263
+ position: sticky;
264
+ @include position($positions...);
404
265
  }
405
266
 
406
267
  /*positioning element mixin usage
@@ -411,27 +272,25 @@ div.logo {
411
272
 
412
273
  //centering element
413
274
  @mixin center($position) {
414
- position: absolute;
415
-
416
- @if $position == 'vertical' {
417
- top: 50%;
418
- -webkit-transform: translateY(-50%);
419
- -ms-transform: translateY(-50%);
420
- transform: translateY(-50%);
421
- }
422
- @else if $position == 'horizontal' {
423
- left: 50%;
424
- -webkit-transform: translateX(-50%);
425
- -ms-transform: translateX(-50%);
426
- transform: translate(-50%);
427
- }
428
- @else if $position == 'both' {
429
- top: 50%;
430
- left: 50%;
431
- -webkit-transform: translate(-50%, -50%);
432
- -ms-transform: translate(-50%, -50%);
433
- transform: translate(-50%, -50%);
434
- }
275
+ position: absolute;
276
+
277
+ @if $position == 'vertical' {
278
+ top: 50%;
279
+ -webkit-transform: translateY(-50%);
280
+ -ms-transform: translateY(-50%);
281
+ transform: translateY(-50%);
282
+ } @else if $position == 'horizontal' {
283
+ left: 50%;
284
+ -webkit-transform: translateX(-50%);
285
+ -ms-transform: translateX(-50%);
286
+ transform: translate(-50%);
287
+ } @else if $position == 'both' {
288
+ top: 50%;
289
+ left: 50%;
290
+ -webkit-transform: translate(-50%, -50%);
291
+ -ms-transform: translate(-50%, -50%);
292
+ transform: translate(-50%, -50%);
293
+ }
435
294
  }
436
295
 
437
296
  /*centering element mixin usage
@@ -442,14 +301,16 @@ div.logo {
442
301
 
443
302
  //clearfix
444
303
  %clearfix {
445
- *zoom: 1;
446
- &:before, &:after {
447
- content: " ";
448
- display: table;
449
- }
450
- &:after {
451
- clear: both;
452
- }
304
+ *zoom: 1;
305
+
306
+ &:before, &:after {
307
+ content: " ";
308
+ display: table;
309
+ }
310
+
311
+ &:after {
312
+ clear: both;
313
+ }
453
314
  }
454
315
 
455
316
  /*clearfix mixin usage
@@ -461,26 +322,27 @@ div.logo {
461
322
 
462
323
  //media query
463
324
  $breakpoints: (
464
- "phone": 400px,
465
- "phone-wide": 480px,
466
- "phablet": 576px,
325
+ "phone": 400px,
326
+ "phone-wide": 480px,
327
+ "phablet": 576px,
467
328
  "tablet-small": 640px,
468
- "tablet": 768px,
469
- "tablet-wide": 1024px,
470
- "desktop": 1248px,
329
+ "tablet": 768px,
330
+ "tablet-wide": 1024px,
331
+ "desktop": 1248px,
471
332
  "desktop-wide": 1440px
472
333
  );
473
334
  @mixin screen($width, $type: min) {
474
- @if map.has-key($breakpoints, $width) {
475
- $width: map.get($breakpoints, $width);
476
- @if $type == max {
477
- $width: $width - 1px;
478
- }
479
- @media only screen and (#{$type}-width: $width) {
480
- @content;
481
- }
482
- }
335
+ @if map.has-key($breakpoints, $width) {
336
+ $width: map.get($breakpoints, $width);
337
+ @if $type == max {
338
+ $width: $width - 1px;
339
+ }
340
+ @media only screen and (#{$type}-width: $width) {
341
+ @content;
342
+ }
343
+ }
483
344
  }
345
+
484
346
  /*media queries usage
485
347
 
486
348
  .site-header {
@@ -494,10 +356,10 @@ $breakpoints: (
494
356
 
495
357
  //truncation
496
358
  @mixin truncate($truncation-boundary) {
497
- max-width: $truncation-boundary;
498
- white-space: nowrap;
499
- overflow: hidden;
500
- text-overflow: ellipsis;
359
+ max-width: $truncation-boundary;
360
+ white-space: nowrap;
361
+ overflow: hidden;
362
+ text-overflow: ellipsis;
501
363
  }
502
364
 
503
365
  // --------------------------------------------------
@@ -507,19 +369,19 @@ $breakpoints: (
507
369
 
508
370
  // Flexbox display
509
371
  @mixin flexbox {
510
- display: -webkit-box;
511
- display: -moz-box;
512
- display: -ms-flexbox;
513
- display: -webkit-flex;
514
- display: flex;
372
+ display: -webkit-box;
373
+ display: -moz-box;
374
+ display: -ms-flexbox;
375
+ display: -webkit-flex;
376
+ display: flex;
515
377
  }
516
378
 
517
379
  // Inline flex display
518
380
  @mixin inline-flex {
519
- display: -moz-inline-box;
520
- display: -webkit-inline-flex;
521
- display: -ms-inline-flexbox;
522
- display: inline-flex;
381
+ display: -moz-inline-box;
382
+ display: -webkit-inline-flex;
383
+ display: -ms-inline-flexbox;
384
+ display: inline-flex;
523
385
  }
524
386
 
525
387
  // The 'flex' shorthand
@@ -527,106 +389,106 @@ $breakpoints: (
527
389
  // <positive-number>, initial, auto, or none
528
390
  @mixin flex($fg: 1, $fs: 0, $fb: auto) {
529
391
 
530
- // Set a variable to be used by box-flex properties
531
- $fg-boxflex: $fg;
392
+ // Set a variable to be used by box-flex properties
393
+ $fg-boxflex: $fg;
532
394
 
533
- // Box-Flex only supports a flex-grow value so lets grab the
534
- // first item in the list and just return that.
535
- @if meta.type-of($fg) == 'list' {
536
- $fg-boxflex: list.nth($fg, 1);
537
- }
395
+ // Box-Flex only supports a flex-grow value so lets grab the
396
+ // first item in the list and just return that.
397
+ @if meta.type-of($fg) == 'list' {
398
+ $fg-boxflex: list.nth($fg, 1);
399
+ }
538
400
 
539
- -webkit-box: $fg-boxflex;
540
- -moz-box: $fg-boxflex;
541
- -webkit-flex: $fg $fs $fb;
542
- -ms-flex: $fg $fs $fb;
543
- flex: $fg $fs $fb;
401
+ -webkit-box: $fg-boxflex;
402
+ -moz-box: $fg-boxflex;
403
+ -webkit-flex: $fg $fs $fb;
404
+ -ms-flex: $fg $fs $fb;
405
+ flex: $fg $fs $fb;
544
406
  }
545
407
 
546
408
  // Flex Flow Direction
547
409
  // - applies to: flex containers
548
410
  // row (default) | row-reverse | column | column-reverse
549
411
  @mixin flex-direction($direction: row) {
550
- @if $direction == row-reverse {
551
- -webkit-box-direction: reverse;
552
- -webkit-box-orient: horizontal;
553
- -moz-box-direction: reverse;
554
- -moz-box-orient: horizontal;
555
- } @else if $direction == column {
556
- -webkit-box-direction: normal;
557
- -webkit-box-orient: vertical;
558
- -moz-box-direction: normal;
559
- -moz-box-orient: vertical;
560
- } @else if $direction == column-reverse {
561
- -webkit-box-direction: reverse;
562
- -webkit-box-orient: vertical;
563
- -moz-box-direction: reverse;
564
- -moz-box-orient: vertical;
565
- } @else {
566
- -webkit-box-direction: normal;
567
- -webkit-box-orient: horizontal;
568
- -moz-box-direction: normal;
569
- -moz-box-orient: horizontal;
570
- }
571
- -webkit-flex-direction: $direction;
572
- -ms-flex-direction: $direction;
573
- flex-direction: $direction;
412
+ @if $direction == row-reverse {
413
+ -webkit-box-direction: reverse;
414
+ -webkit-box-orient: horizontal;
415
+ -moz-box-direction: reverse;
416
+ -moz-box-orient: horizontal;
417
+ } @else if $direction == column {
418
+ -webkit-box-direction: normal;
419
+ -webkit-box-orient: vertical;
420
+ -moz-box-direction: normal;
421
+ -moz-box-orient: vertical;
422
+ } @else if $direction == column-reverse {
423
+ -webkit-box-direction: reverse;
424
+ -webkit-box-orient: vertical;
425
+ -moz-box-direction: reverse;
426
+ -moz-box-orient: vertical;
427
+ } @else {
428
+ -webkit-box-direction: normal;
429
+ -webkit-box-orient: horizontal;
430
+ -moz-box-direction: normal;
431
+ -moz-box-orient: horizontal;
432
+ }
433
+ -webkit-flex-direction: $direction;
434
+ -ms-flex-direction: $direction;
435
+ flex-direction: $direction;
574
436
  }
575
437
 
576
438
  // Flex Line Wrapping
577
439
  // - applies to: flex containers
578
440
  // nowrap | wrap | wrap-reverse
579
441
  @mixin flex-wrap($value: nowrap) {
580
- // No Webkit/FF Box fallback.
581
- -webkit-flex-wrap: $value;
582
- @if $value == nowrap {
583
- -ms-flex-wrap: nowrap;
584
- } @else {
585
- -ms-flex-wrap: $value;
586
- }
587
- flex-wrap: $value;
442
+ // No Webkit/FF Box fallback.
443
+ -webkit-flex-wrap: $value;
444
+ @if $value == nowrap {
445
+ -ms-flex-wrap: nowrap;
446
+ } @else {
447
+ -ms-flex-wrap: $value;
448
+ }
449
+ flex-wrap: $value;
588
450
  }
589
451
 
590
452
  // Flex Direction and Wrap
591
453
  // - applies to: flex containers
592
454
  // <flex-direction> || <flex-wrap>
593
455
  @mixin flex-flow($values: (row nowrap)) {
594
- // No Webkit/FF Box fallback.
595
- -webkit-flex-flow: $values;
596
- -ms-flex-flow: $values;
597
- flex-flow: $values;
456
+ // No Webkit/FF Box fallback.
457
+ -webkit-flex-flow: $values;
458
+ -ms-flex-flow: $values;
459
+ flex-flow: $values;
598
460
  }
599
461
 
600
462
  // Display Order
601
463
  // - applies to: flex items
602
464
  // <integer>
603
465
  @mixin order($int: 0) {
604
- -webkit-box-ordinal-group: $int + 1;
605
- -moz-box-ordinal-group: $int + 1;
606
- -webkit-order: $int;
607
- -ms-flex-order: $int;
608
- order: $int;
466
+ -webkit-box-ordinal-group: $int + 1;
467
+ -moz-box-ordinal-group: $int + 1;
468
+ -webkit-order: $int;
469
+ -ms-flex-order: $int;
470
+ order: $int;
609
471
  }
610
472
 
611
473
  // Flex grow factor
612
474
  // - applies to: flex items
613
475
  // <number>
614
476
  @mixin flex-grow($int: 1) {
615
- -webkit-box-flex: $int;
616
- -moz-box-flex: $int;
617
- -webkit-flex-grow: $int;
618
- -ms-flex: $int;
619
- flex-grow: $int;
477
+ -webkit-box-flex: $int;
478
+ -moz-box-flex: $int;
479
+ -webkit-flex-grow: $int;
480
+ -ms-flex: $int;
481
+ flex-grow: $int;
620
482
  }
621
483
 
622
484
  // Flex shrink
623
485
  // - applies to: flex item shrink factor
624
486
  // <number>
625
487
  @mixin flex-shrink($int: 0) {
626
- -webkit-flex-shrink: $int;
627
- -moz-flex-shrink: $int;
628
- -ms-flex: $int;
629
- flex-shrink: $int;
488
+ -webkit-flex-shrink: $int;
489
+ -moz-flex-shrink: $int;
490
+ -ms-flex: $int;
491
+ flex-shrink: $int;
630
492
  }
631
493
 
632
494
  // Flex basis
@@ -634,86 +496,86 @@ $breakpoints: (
634
496
  // - applies to: flex itemsnitial main size of the flex item
635
497
  // <width>
636
498
  @mixin flex-basis($value: auto) {
637
- -webkit-flex-basis: $value;
638
- flex-basis: $value;
499
+ -webkit-flex-basis: $value;
500
+ flex-basis: $value;
639
501
  }
640
502
 
641
503
  // Axis Alignment
642
504
  // - applies to: flex containers
643
505
  // flex-start | flex-end | center | space-between | space-around
644
506
  @mixin justify-content($value: flex-start) {
645
- @if $value == flex-start {
646
- -webkit-box-pack: start;
647
- -moz-box-pack: start;
648
- -ms-flex-pack: start;
649
- } @else if $value == flex-end {
650
- -webkit-box-pack: end;
651
- -moz-box-pack: end;
652
- -ms-flex-pack: end;
653
- } @else if $value == space-between {
654
- -webkit-box-pack: justify;
655
- -moz-box-pack: justify;
656
- -ms-flex-pack: justify;
657
- } @else if $value == space-around {
658
- -ms-flex-pack: distribute;
659
- } @else {
660
- -webkit-box-pack: $value;
661
- -moz-box-pack: $value;
662
- -ms-flex-pack: $value;
663
- }
664
- -webkit-justify-content: $value;
665
- justify-content: $value;
507
+ @if $value == flex-start {
508
+ -webkit-box-pack: start;
509
+ -moz-box-pack: start;
510
+ -ms-flex-pack: start;
511
+ } @else if $value == flex-end {
512
+ -webkit-box-pack: end;
513
+ -moz-box-pack: end;
514
+ -ms-flex-pack: end;
515
+ } @else if $value == space-between {
516
+ -webkit-box-pack: justify;
517
+ -moz-box-pack: justify;
518
+ -ms-flex-pack: justify;
519
+ } @else if $value == space-around {
520
+ -ms-flex-pack: distribute;
521
+ } @else {
522
+ -webkit-box-pack: $value;
523
+ -moz-box-pack: $value;
524
+ -ms-flex-pack: $value;
525
+ }
526
+ -webkit-justify-content: $value;
527
+ justify-content: $value;
666
528
  }
667
529
 
668
530
  // Packing Flex Lines
669
531
  // - applies to: multi-line flex containers
670
532
  // flex-start | flex-end | center | space-between | space-around | stretch
671
533
  @mixin align-content($value: stretch) {
672
- // No Webkit Box Fallback.
673
- -webkit-align-content: $value;
674
- @if $value == flex-start {
675
- -ms-flex-line-pack: start;
676
- } @else if $value == flex-end {
677
- -ms-flex-line-pack: end;
678
- } @else {
679
- -ms-flex-line-pack: $value;
680
- }
681
- align-content: $value;
534
+ // No Webkit Box Fallback.
535
+ -webkit-align-content: $value;
536
+ @if $value == flex-start {
537
+ -ms-flex-line-pack: start;
538
+ } @else if $value == flex-end {
539
+ -ms-flex-line-pack: end;
540
+ } @else {
541
+ -ms-flex-line-pack: $value;
542
+ }
543
+ align-content: $value;
682
544
  }
683
545
 
684
546
  // Cross-axis Alignment
685
547
  // - applies to: flex containers
686
548
  // flex-start | flex-end | center | baseline | stretch
687
549
  @mixin align-items($value: stretch) {
688
- @if $value == flex-start {
689
- -webkit-box-align: start;
690
- -moz-box-align: start;
691
- -ms-flex-align: start;
692
- } @else if $value == flex-end {
693
- -webkit-box-align: end;
694
- -moz-box-align: end;
695
- -ms-flex-align: end;
696
- } @else {
697
- -webkit-box-align: $value;
698
- -moz-box-align: $value;
699
- -ms-flex-align: $value;
700
- }
701
- -webkit-align-items: $value;
702
- align-items: $value;
550
+ @if $value == flex-start {
551
+ -webkit-box-align: start;
552
+ -moz-box-align: start;
553
+ -ms-flex-align: start;
554
+ } @else if $value == flex-end {
555
+ -webkit-box-align: end;
556
+ -moz-box-align: end;
557
+ -ms-flex-align: end;
558
+ } @else {
559
+ -webkit-box-align: $value;
560
+ -moz-box-align: $value;
561
+ -ms-flex-align: $value;
562
+ }
563
+ -webkit-align-items: $value;
564
+ align-items: $value;
703
565
  }
704
566
 
705
567
  // Cross-axis Alignment
706
568
  // - applies to: flex items
707
569
  // auto | flex-start | flex-end | center | baseline | stretch
708
570
  @mixin align-self($value: auto) {
709
- // No Webkit Box Fallback.
710
- -webkit-align-self: $value;
711
- @if $value == flex-start {
712
- -ms-flex-item-align: start;
713
- } @else if $value == flex-end {
714
- -ms-flex-item-align: end;
715
- } @else {
716
- -ms-flex-item-align: $value;
717
- }
718
- align-self: $value;
571
+ // No Webkit Box Fallback.
572
+ -webkit-align-self: $value;
573
+ @if $value == flex-start {
574
+ -ms-flex-item-align: start;
575
+ } @else if $value == flex-end {
576
+ -ms-flex-item-align: end;
577
+ } @else {
578
+ -ms-flex-item-align: $value;
579
+ }
580
+ align-self: $value;
719
581
  }