@covalent/core 4.1.0-develop.2 → 4.1.0-develop.4

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 (33) hide show
  1. package/common/styles/_elevation.scss +285 -0
  2. package/common/styles/_layout.scss +605 -0
  3. package/common/styles/_palette-dark.scss +326 -0
  4. package/common/styles/_palette-light.scss +637 -0
  5. package/common/styles/_rtl.scss +31 -0
  6. package/common/styles/_styles.scss +10 -0
  7. package/common/styles/_theme-functions.scss +25 -0
  8. package/common/styles/_typography-functions.scss +43 -0
  9. package/common/styles/_variables.scss +99 -0
  10. package/common/styles/colors/_colors-dark.scss +1399 -0
  11. package/common/styles/colors/_colors-light.scss +3235 -0
  12. package/common/styles/colors/_colors.scss +7 -0
  13. package/common/styles/core/_button.scss +90 -0
  14. package/common/styles/core/_card.scss +189 -0
  15. package/common/styles/core/_content.scss +43 -0
  16. package/common/styles/core/_core.scss +23 -0
  17. package/common/styles/core/_divider.scss +16 -0
  18. package/common/styles/core/_icons.scss +22 -0
  19. package/common/styles/core/_list.scss +8 -0
  20. package/common/styles/core/_sidenav.scss +22 -0
  21. package/common/styles/core/_structure.scss +127 -0
  22. package/common/styles/core/_toolbar.scss +53 -0
  23. package/common/styles/core/_whiteframe.scss +138 -0
  24. package/common/styles/font/MaterialIcons-Regular-v48.woff2 +0 -0
  25. package/common/styles/font/_font.scss +99 -0
  26. package/common/styles/utilities/_general.scss +65 -0
  27. package/common/styles/utilities/_pad.scss +36 -0
  28. package/common/styles/utilities/_pull.scss +36 -0
  29. package/common/styles/utilities/_push.scss +36 -0
  30. package/common/styles/utilities/_size.scss +24 -0
  31. package/common/styles/utilities/_text.scss +105 -0
  32. package/common/styles/utilities/_utilities.scss +15 -0
  33. package/package.json +2 -2
@@ -0,0 +1,605 @@
1
+ /* stylelint-disable function-url-quotes, no-duplicate-selectors */
2
+
3
+ /*
4
+ *
5
+ * Responsive attributes
6
+ *
7
+ * References:
8
+ * 1) https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-properties#flex
9
+ * 2) https://css-tricks.com/almanac/properties/f/flex/
10
+ * 3) https://css-tricks.com/snippets/css/a-guide-to-flexbox/
11
+ * 4) https://github.com/philipwalton/flexbugs#3-min-height-on-a-flex-container-wont-apply-to-its-flex-items
12
+ * 5) http://godban.com.ua/projects/flexgrid
13
+ *
14
+ */
15
+
16
+ // Layout
17
+ // ------------------------------
18
+
19
+ $baseline-grid: 8px !default;
20
+ $layout-gutter-width: ($baseline-grid * 2) !default;
21
+
22
+ $layout-breakpoint-xs: 600px !default;
23
+ $layout-breakpoint-sm: 960px !default;
24
+ $layout-breakpoint-md: 1280px !default;
25
+ $layout-breakpoint-lg: 1920px !default;
26
+
27
+ @-moz-document url-prefix() {
28
+ [layout-fill] {
29
+ margin: 0;
30
+ width: 100%;
31
+ min-height: 100%;
32
+ height: 100%;
33
+ }
34
+ }
35
+
36
+ @mixin flex-order-for-name($sizes: null) {
37
+ @if $sizes == null {
38
+ $sizes: '';
39
+
40
+ [flex-order] {
41
+ order: 0;
42
+ }
43
+ }
44
+
45
+ @for $i from -20 through 20 {
46
+ $order: '';
47
+ $suffix: '';
48
+
49
+ @each $s in $sizes {
50
+ @if $s != '' {
51
+ $suffix: '-#{$s}="#{$i}"';
52
+ } @else {
53
+ $suffix: '="#{$i}"';
54
+ }
55
+
56
+ $order: '[flex-order#{$suffix}]';
57
+ }
58
+
59
+ #{$order} {
60
+ order: #{$i};
61
+ }
62
+ }
63
+ }
64
+
65
+ @mixin offset-for-name($sizes: null) {
66
+ @if $sizes == null {
67
+ $sizes: '';
68
+ }
69
+
70
+ @for $i from 0 through 19 {
71
+ $offsets: '';
72
+ $suffix: '';
73
+
74
+ @each $s in $sizes {
75
+ @if $s != '' {
76
+ $suffix: '-#{$s}="#{$i * 5}"';
77
+ } @else {
78
+ $suffix: '="#{$i * 5}"';
79
+ }
80
+
81
+ $offsets: $offsets + '[flex-offset#{$suffix}], ';
82
+ }
83
+
84
+ #{$offsets} {
85
+ margin-left: #{$i * 5 + '%'};
86
+ }
87
+ }
88
+
89
+ @each $i in 33 {
90
+ $offsets: '';
91
+ $suffix: '';
92
+
93
+ @each $s in $sizes {
94
+ @if $s != '' {
95
+ $suffix: '-#{$s}="#{$i}"';
96
+ } @else {
97
+ $suffix: '="#{$i}"';
98
+ }
99
+
100
+ $offsets: '[flex-offset#{$suffix}], ';
101
+ }
102
+
103
+ #{$offsets} {
104
+ margin-left: calc(100% / 3);
105
+ }
106
+ }
107
+
108
+ @each $i in 66 {
109
+ $offsets: '';
110
+ $suffix: '';
111
+
112
+ @each $s in $sizes {
113
+ @if $s != '' {
114
+ $suffix: '-#{$s}="#{$i}"';
115
+ } @else {
116
+ $suffix: '="#{$i}"';
117
+ }
118
+
119
+ $offsets: '[flex-offset#{$suffix}]';
120
+ }
121
+
122
+ #{$offsets} {
123
+ margin-left: calc(200% / 3);
124
+ }
125
+ }
126
+ }
127
+
128
+ @mixin layout-for-name($name: null) {
129
+ @if $name == null {
130
+ $name: '';
131
+ }
132
+ @if $name != '' {
133
+ $name: '-#{$name}';
134
+ }
135
+
136
+ [layout#{$name}],
137
+ [layout#{$name}='column'],
138
+ [layout#{$name}='row'] {
139
+ box-sizing: border-box;
140
+ display: flex;
141
+ }
142
+ [layout#{$name}='column'] {
143
+ flex-direction: column;
144
+ }
145
+ [layout#{$name}='row'] {
146
+ flex-direction: row;
147
+ }
148
+ }
149
+
150
+ @mixin flex-properties-for-name($name: null) {
151
+ $flexName: 'flex';
152
+ @if $name != null {
153
+ $flexName: 'flex-#{$name}';
154
+ $name: '-#{$name}';
155
+ } @else {
156
+ $name: '';
157
+ }
158
+
159
+ [#{$flexName}] {
160
+ flex: 1;
161
+ box-sizing: border-box;
162
+ }
163
+ // === flex: 1 1 0%;
164
+
165
+ // IE mediaQuery hack for 8,9,10 to set the flex-basis properly for 'flex' values
166
+ // Details:
167
+ // Do not use unitless flex-basis values in the flex shorthand because IE 10-11 will error.
168
+ // Also use 0% instead of 0px since minifiers will often convert 0px to 0 (which is unitless and will have the same problem).
169
+ // Safari, however, fails with flex-basis : 0% and requires flex-basis : 0px
170
+ @media screen\0 {
171
+ [#{$flexName}] {
172
+ flex: 1 1 0%;
173
+ }
174
+ }
175
+
176
+ [#{$flexName}='grow'],
177
+ [#{$flexName}-grow] {
178
+ flex: 1 1 100%;
179
+ box-sizing: border-box;
180
+ }
181
+ [#{$flexName}='initial'],
182
+ [#{$flexName}-initial] {
183
+ flex: 0 1 auto;
184
+ box-sizing: border-box;
185
+ }
186
+ [#{$flexName}='auto'],
187
+ [#{$flexName}-auto] {
188
+ flex: 1 1 auto;
189
+ box-sizing: border-box;
190
+ }
191
+ [#{$flexName}='none'],
192
+ [#{$flexName}-none] {
193
+ flex: 0 0 auto;
194
+ box-sizing: border-box;
195
+ }
196
+ [#{$flexName}='noshrink'],
197
+ [#{$flexName}-noshrink] {
198
+ flex: 1 0 auto;
199
+ box-sizing: border-box;
200
+ }
201
+ [#{$flexName}='nogrow'],
202
+ [#{$flexName}-nogrow] {
203
+ flex: 0 1 auto;
204
+ box-sizing: border-box;
205
+ }
206
+
207
+ // (1-20) * 5 = 0-100%
208
+ @for $i from 0 through 20 {
209
+ $value: #{$i * 5 + '%'};
210
+
211
+ [#{$flexName}='#{$i * 5}'] {
212
+ flex: 1 1 #{$value};
213
+ max-width: #{$value};
214
+ max-height: 100%;
215
+ box-sizing: border-box;
216
+ }
217
+
218
+ [layout='row'] > [#{$flexName}='#{$i * 5}'],
219
+ [layout#{$name}='row'] > [#{$flexName}='#{$i * 5}'] {
220
+ flex: 1 1 #{$value};
221
+ max-width: #{$value};
222
+ max-height: 100%;
223
+ box-sizing: border-box;
224
+ }
225
+
226
+ [layout='column'] > [#{$flexName}='#{$i * 5}'],
227
+ [layout#{$name}='column'] > [#{$flexName}='#{$i * 5}'] {
228
+ flex: 1 1 #{$value};
229
+ max-width: 100%;
230
+ max-height: #{$value};
231
+ box-sizing: border-box;
232
+ }
233
+ }
234
+
235
+ [layout='row'],
236
+ [layout#{$name}='row'] {
237
+ > [#{$flexName}='33'],
238
+ > [#{$flexName}='33'] {
239
+ flex: 1 1 33%;
240
+ max-width: calc(100% / 3);
241
+ max-height: 100%;
242
+ box-sizing: border-box;
243
+ }
244
+ > [#{$flexName}='34'],
245
+ > [#{$flexName}='34'] {
246
+ flex: 1 1 34%;
247
+ max-width: 34%;
248
+ max-height: 100%;
249
+ box-sizing: border-box;
250
+ }
251
+ > [#{$flexName}='66'],
252
+ > [#{$flexName}='66'] {
253
+ flex: 1 1 66%;
254
+ max-width: calc(200% / 3);
255
+ max-height: 100%;
256
+ box-sizing: border-box;
257
+ }
258
+ > [#{$flexName}='67'],
259
+ > [#{$flexName}='67'] {
260
+ flex: 1 1 67%;
261
+ max-width: 67%;
262
+ max-height: 100%;
263
+ box-sizing: border-box;
264
+ }
265
+ }
266
+ [layout='column'],
267
+ [layout#{$name}='column'] {
268
+ > [#{$flexName}='33'],
269
+ > [#{$flexName}='33'] {
270
+ flex: 1 1 33%;
271
+ max-width: 100%;
272
+ max-height: calc(100% / 3);
273
+ box-sizing: border-box;
274
+ }
275
+ > [#{$flexName}='34'],
276
+ > [#{$flexName}='34'] {
277
+ flex: 1 1 34%;
278
+ max-width: 100%;
279
+ max-height: 34%;
280
+ box-sizing: border-box;
281
+ }
282
+ > [#{$flexName}='66'],
283
+ > [#{$flexName}='66'] {
284
+ flex: 1 1 66%;
285
+ max-width: 100%;
286
+ max-height: calc(200% / 3);
287
+ box-sizing: border-box;
288
+ }
289
+ > [#{$flexName}='67'],
290
+ > [#{$flexName}='67'] {
291
+ flex: 1 1 67%;
292
+ max-width: 100%;
293
+ max-height: 67%;
294
+ box-sizing: border-box;
295
+ }
296
+ }
297
+ }
298
+
299
+ @mixin layout-align-for-name($suffix: null) {
300
+ // Alignment attributes for layout containers' children
301
+ // Arrange on the Main Axis
302
+ // center, start, end, space-between, space-around
303
+ // flex-start is the default for justify-content
304
+ // ------------------------------
305
+
306
+ $name: 'layout-align';
307
+ @if $suffix != null {
308
+ $name: 'layout-align-#{$suffix}';
309
+ }
310
+
311
+ [#{$name}],
312
+ [#{$name}="start stretch"] // defaults
313
+ {
314
+ justify-content: flex-start;
315
+ align-content: stretch;
316
+ align-items: stretch;
317
+ }
318
+ // Main Axis Center
319
+ [#{$name}='start'],
320
+ [#{$name}='start start'],
321
+ [#{$name}='start center'],
322
+ [#{$name}='start end'],
323
+ [#{$name}='start stretch'] {
324
+ justify-content: flex-start;
325
+ }
326
+
327
+ // Main Axis Center
328
+ [#{$name}='center'],
329
+ [#{$name}='center start'],
330
+ [#{$name}='center center'],
331
+ [#{$name}='center end'],
332
+ [#{$name}='center stretch'] {
333
+ justify-content: center;
334
+ }
335
+
336
+ // Main Axis End
337
+ [#{$name}="end"], //stretch
338
+ [#{$name}="end center"],
339
+ [#{$name}="end start"],
340
+ [#{$name}="end end"],
341
+ [#{$name}="end stretch"] {
342
+ justify-content: flex-end;
343
+ }
344
+
345
+ // Main Axis Space Around
346
+ [#{$name}="space-around"], //stretch
347
+ [#{$name}="space-around center"],
348
+ [#{$name}="space-around start"],
349
+ [#{$name}="space-around end"],
350
+ [#{$name}="space-around stretch"] {
351
+ justify-content: space-around;
352
+ }
353
+
354
+ // Main Axis Space Between
355
+ [#{$name}="space-between"], //stretch
356
+ [#{$name}="space-between center"],
357
+ [#{$name}="space-between start"],
358
+ [#{$name}="space-between end"],
359
+ [#{$name}="space-between stretch"] {
360
+ justify-content: space-between;
361
+ }
362
+
363
+ // Arrange on the Cross Axis
364
+ // center, start, end
365
+ // stretch is the default for align-items
366
+ // ------------------------------
367
+
368
+ // Cross Axis Start
369
+ [#{$name}='start start'],
370
+ [#{$name}='center start'],
371
+ [#{$name}='end start'],
372
+ [#{$name}='space-between start'],
373
+ [#{$name}='space-around start'] {
374
+ align-items: flex-start;
375
+ align-content: flex-start;
376
+ }
377
+
378
+ // Cross Axis Center
379
+ [#{$name}='start center'],
380
+ [#{$name}='center center'],
381
+ [#{$name}='end center'],
382
+ [#{$name}='space-between center'],
383
+ [#{$name}='space-around center'] {
384
+ align-items: center;
385
+ align-content: center;
386
+ max-width: 100%;
387
+
388
+ // IE11 overflow https://github.com/philipwalton/flexbugs#2-column-flex-items-set-to-align-itemscenter-overflow-their-container
389
+ & > * {
390
+ max-width: 100%;
391
+ box-sizing: border-box;
392
+ }
393
+ }
394
+
395
+ // Cross Axis Center IE overflow fix
396
+ [#{$name}='start center'] > *,
397
+ [#{$name}='center center'] > *,
398
+ [#{$name}='end center'] > *,
399
+ [#{$name}='space-between center'] > *,
400
+ [#{$name}='space-around center'] > * {
401
+ max-width: 100%;
402
+ box-sizing: border-box;
403
+ }
404
+
405
+ // Cross Axis End
406
+ [#{$name}='start end'],
407
+ [#{$name}='center end'],
408
+ [#{$name}='end end'],
409
+ [#{$name}='space-between end'],
410
+ [#{$name}='space-around end'] {
411
+ align-items: flex-end;
412
+ align-content: flex-end;
413
+ }
414
+
415
+ // Cross Axis stretch
416
+ [#{$name}='start stretch'],
417
+ [#{$name}='center stretch'],
418
+ [#{$name}='end stretch'],
419
+ [#{$name}='space-between stretch'],
420
+ [#{$name}='space-around stretch'] {
421
+ align-items: stretch;
422
+ align-content: stretch;
423
+ }
424
+ }
425
+
426
+ @mixin layout-padding-margin() {
427
+ [layout-padding] > [flex-sm],
428
+ [layout-padding] > [flex-lt-md] {
429
+ padding: calc($layout-gutter-width / 4);
430
+ }
431
+
432
+ [layout-padding],
433
+ [layout-padding] > [flex],
434
+ [layout-padding] > [flex-gt-sm],
435
+ [layout-padding] > [flex-md],
436
+ [layout-padding] > [flex-lt-lg] {
437
+ padding: calc($layout-gutter-width / 2);
438
+ }
439
+
440
+ [layout-padding] > [flex-gt-md],
441
+ [layout-padding] > [flex-lg] {
442
+ padding: calc($layout-gutter-width / 1);
443
+ }
444
+
445
+ [layout-margin] > [flex-sm],
446
+ [layout-margin] > [flex-lt-md] {
447
+ margin: calc($layout-gutter-width / 4);
448
+ }
449
+
450
+ [layout-margin],
451
+ [layout-margin] > [flex],
452
+ [layout-margin] > [flex-gt-sm],
453
+ [layout-margin] > [flex-md],
454
+ [layout-margin] > [flex-lt-lg] {
455
+ margin: calc($layout-gutter-width / 2);
456
+ }
457
+
458
+ [layout-margin] > [flex-gt-md],
459
+ [layout-margin] > [flex-lg] {
460
+ margin: calc($layout-gutter-width / 1);
461
+ }
462
+
463
+ [layout-wrap] {
464
+ flex-wrap: wrap;
465
+ }
466
+
467
+ [layout-nowrap] {
468
+ flex-wrap: nowrap;
469
+ }
470
+
471
+ [layout-fill] {
472
+ margin: 0;
473
+ width: 100%;
474
+ min-height: 100%;
475
+ height: 100%;
476
+ }
477
+ }
478
+
479
+ @mixin layouts_for_breakpoint($name: null) {
480
+ @include flex-order-for-name($name);
481
+ @include offset-for-name($name);
482
+ @include layout-align-for-name($name);
483
+
484
+ @include flex-properties-for-name($name);
485
+ @include layout-for-name($name);
486
+ }
487
+
488
+ @mixin covalent-layout() {
489
+ /*
490
+ * Apply Mixins to create Layout/Flexbox styles
491
+ *
492
+ */
493
+
494
+ @include layouts_for_breakpoint();
495
+ @include layout-padding-margin();
496
+
497
+ /**
498
+ * `hide-gt-sm show-gt-lg` should hide from 600px to 1200px
499
+ * `show-md hide-gt-sm` should show from 0px to 960px and hide at >960px
500
+ * `hide-gt-md show-gt-sm` should show everywhere (show overrides hide)`
501
+ *
502
+ * hide means hide everywhere
503
+ * Sizes:
504
+ * $layout-breakpoint-xs: 600px !default;
505
+ * $layout-breakpoint-sm: 960px !default;
506
+ * $layout-breakpoint-md: 1280px !default;
507
+ * $layout-breakpoint-lg: 1920px !default;
508
+ */
509
+
510
+ @media (max-width: $layout-breakpoint-xs - 1) {
511
+ // Xtra-SMALL SCREEN
512
+ [hide-xs],
513
+ [hide] {
514
+ &:not([show-xs]):not([show]) {
515
+ display: none;
516
+ }
517
+ }
518
+ @include layouts_for_breakpoint(xs);
519
+ }
520
+
521
+ @media (min-width: $layout-breakpoint-xs) {
522
+ // BIGGER THAN Xtra-SMALL SCREEN
523
+ @include layouts_for_breakpoint(gt-xs);
524
+ }
525
+
526
+ @media (min-width: $layout-breakpoint-xs) and (max-width: $layout-breakpoint-sm - 1) {
527
+ // SMALL SCREEN
528
+ [hide-sm],
529
+ [hide-gt-xs] {
530
+ &:not([show-gt-xs]):not([show-sm]):not([show]) {
531
+ display: none;
532
+ }
533
+ }
534
+
535
+ [hide-sm]:not([show-sm]):not([show]) {
536
+ display: none;
537
+ }
538
+ @include layouts_for_breakpoint(sm);
539
+ }
540
+
541
+ @media (min-width: $layout-breakpoint-sm) {
542
+ // BIGGER THAN SMALL SCREEN
543
+ @include layouts_for_breakpoint(gt-sm);
544
+ }
545
+
546
+ @media (min-width: $layout-breakpoint-sm) and (max-width: $layout-breakpoint-md - 1) {
547
+ // MEDIUM SCREEN
548
+ [hide],
549
+ [hide-gt-xs],
550
+ [hide-gt-sm] {
551
+ &:not([show-gt-xs]):not([show-gt-sm]):not([show-md]):not([show]) {
552
+ display: none;
553
+ }
554
+ }
555
+
556
+ [hide-md]:not([show-md]):not([show]) {
557
+ display: none;
558
+ }
559
+ @include layouts_for_breakpoint(md);
560
+ }
561
+
562
+ @media (min-width: $layout-breakpoint-md) {
563
+ // BIGGER THAN MEDIUM SCREEN
564
+ @include layouts_for_breakpoint(gt-md);
565
+ }
566
+
567
+ @media (min-width: $layout-breakpoint-md) and (max-width: $layout-breakpoint-lg - 1) {
568
+ // LARGE SCREEN
569
+ [hide],
570
+ [hide-gt-xs],
571
+ [hide-gt-sm],
572
+ [hide-gt-md] {
573
+ &:not([show-gt-xs]):not([show-gt-sm]):not([show-gt-md]):not([show-lg]):not([show]) {
574
+ display: none;
575
+ }
576
+ }
577
+
578
+ [hide-lg]:not([show-lg]):not([show]) {
579
+ display: none;
580
+ }
581
+
582
+ @include layouts_for_breakpoint(lg);
583
+ }
584
+
585
+ @media (min-width: $layout-breakpoint-lg) {
586
+ // BIGGER THAN LARGE SCREEN
587
+ @include layouts_for_breakpoint(gt-lg);
588
+ @include layouts_for_breakpoint(xl);
589
+
590
+ // BIGGER THAN LARGE SCREEN
591
+ [hide],
592
+ [hide-gt-xs],
593
+ [hide-gt-sm],
594
+ [hide-gt-md],
595
+ [hide-gt-lg] {
596
+ &:not([show-gt-xs]):not([show-gt-sm]):not([show-gt-md]):not([show-gt-lg]):not([show-xl]):not([show]) {
597
+ display: none;
598
+ }
599
+ }
600
+
601
+ [hide-xl]:not([show-xl]):not([show-gt-lg]):not([show]) {
602
+ display: none;
603
+ }
604
+ }
605
+ }