spectre_scss 0.4.2.0 → 0.4.3.0

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.
@@ -1,656 +1,5 @@
1
1
  // CSS Icons
2
- $icon-border-width: $border-width-lg;
3
-
4
- .icon {
5
- box-sizing: border-box;
6
- display: inline-block;
7
- font-size: inherit;
8
- font-style: normal;
9
- height: 1em;
10
- position: relative;
11
- text-indent: -9999px;
12
- vertical-align: middle;
13
- width: 1em;
14
- &::before,
15
- &::after {
16
- display: block;
17
- left: 50%;
18
- position: absolute;
19
- top: 50%;
20
- transform: translate(-50%, -50%);
21
- }
22
- }
23
-
24
- // Icon arrows
25
- .icon-arrow-down,
26
- .icon-arrow-left,
27
- .icon-arrow-right,
28
- .icon-arrow-up,
29
- .icon-downward,
30
- .icon-back,
31
- .icon-forward,
32
- .icon-upward {
33
- &::before {
34
- border: $icon-border-width solid currentColor;
35
- border-bottom: 0;
36
- border-right: 0;
37
- content: "";
38
- height: .65em;
39
- width: .65em;
40
- }
41
- }
42
-
43
- .icon-arrow-down {
44
- &::before {
45
- transform: translate(-50%, -75%) rotate(225deg);
46
- }
47
- }
48
-
49
- .icon-arrow-left {
50
- &::before {
51
- transform: translate(-25%, -50%) rotate(-45deg);
52
- }
53
- }
54
-
55
- .icon-arrow-right {
56
- &::before {
57
- transform: translate(-75%, -50%) rotate(135deg);
58
- }
59
- }
60
-
61
- .icon-arrow-up {
62
- &::before {
63
- transform: translate(-50%, -25%) rotate(45deg);
64
- }
65
- }
66
-
67
- .icon-back,
68
- .icon-forward {
69
- &::after {
70
- background: currentColor;
71
- content: "";
72
- height: $icon-border-width;
73
- width: .8em;
74
- }
75
- }
76
-
77
- .icon-downward,
78
- .icon-upward {
79
- &::after {
80
- background: currentColor;
81
- content: "";
82
- height: .8em;
83
- width: $icon-border-width;
84
- }
85
- }
86
-
87
- .icon-back {
88
- &::after {
89
- left: 55%;
90
- }
91
- &::before {
92
- transform: translate(-50%, -50%) rotate(-45deg);
93
- }
94
- }
95
-
96
- .icon-downward {
97
- &::after {
98
- top: 45%;
99
- }
100
- &::before {
101
- transform: translate(-50%, -50%) rotate(-135deg);
102
- }
103
- }
104
-
105
- .icon-forward {
106
- &::after {
107
- left: 45%;
108
- }
109
- &::before {
110
- transform: translate(-50%, -50%) rotate(135deg);
111
- }
112
- }
113
-
114
- .icon-upward {
115
- &::after {
116
- top: 55%;
117
- }
118
- &::before {
119
- transform: translate(-50%, -50%) rotate(45deg);
120
- }
121
- }
122
-
123
- // Icon caret
124
- .icon-caret {
125
- &::before {
126
- border-top: .3em solid currentColor;
127
- border-right: .3em solid transparent;
128
- border-left: .3em solid transparent;
129
- content: "";
130
- height: 0;
131
- width: 0;
132
- transform: translate(-50%, -25%);
133
- }
134
- }
135
-
136
- // Icon menu
137
- .icon-menu {
138
- &::before {
139
- background: currentColor;
140
- box-shadow: 0 -.35em, 0 .35em;
141
- content: "";
142
- height: $icon-border-width;
143
- width: 100%;
144
- }
145
- }
146
-
147
- // Icon apps
148
- .icon-apps {
149
- &::before {
150
- background: currentColor;
151
- box-shadow: -.35em -.35em, -.35em 0, -.35em .35em, 0 -.35em, 0 .35em, .35em -.35em, .35em 0, .35em .35em;
152
- content: "";
153
- height: 3px;
154
- width: 3px;
155
- }
156
- }
157
-
158
- // Icon resize
159
- .icon-resize-horiz,
160
- .icon-resize-vert {
161
- &::before,
162
- &::after {
163
- border: $icon-border-width solid currentColor;
164
- border-bottom: 0;
165
- border-right: 0;
166
- content: "";
167
- height: .45em;
168
- width: .45em;
169
- }
170
- &::before {
171
- transform: translate(-50%, -90%) rotate(45deg);
172
- }
173
- &::after {
174
- transform: translate(-50%, -10%) rotate(225deg);
175
- }
176
- }
177
-
178
- .icon-resize-horiz {
179
- &::before {
180
- transform: translate(-90%, -50%) rotate(-45deg);
181
- }
182
- &::after {
183
- transform: translate(-10%, -50%) rotate(135deg);
184
- }
185
- }
186
-
187
- // Icon more
188
- .icon-more-horiz,
189
- .icon-more-vert {
190
- &::before {
191
- background: currentColor;
192
- box-shadow: -.4em 0, .4em 0;
193
- border-radius: 50%;
194
- content: "";
195
- height: 3px;
196
- width: 3px;
197
- }
198
- }
199
- .icon-more-vert {
200
- &::before {
201
- box-shadow: 0 -.4em, 0 .4em;
202
- }
203
- }
204
-
205
- // Icon plus, minus, cross
206
- .icon-plus,
207
- .icon-minus,
208
- .icon-cross {
209
- &::before {
210
- background: currentColor;
211
- content: "";
212
- height: $icon-border-width;
213
- width: 100%;
214
- }
215
- }
216
- .icon-plus,
217
- .icon-cross {
218
- &::after {
219
- background: currentColor;
220
- content: "";
221
- height: 100%;
222
- width: $icon-border-width;
223
- }
224
- }
225
- .icon-cross {
226
- &::before {
227
- width: 100%;
228
- }
229
- &::after {
230
- height: 100%;
231
- }
232
- &::before,
233
- &::after {
234
- transform: translate(-50%, -50%) rotate(45deg);
235
- }
236
- }
237
-
238
- // Icon check
239
- .icon-check {
240
- &::before {
241
- border: $icon-border-width solid currentColor;
242
- border-right: 0;
243
- border-top: 0;
244
- content: "";
245
- height: .5em;
246
- width: .9em;
247
- transform: translate(-50%, -75%) rotate(-45deg);
248
- }
249
- }
250
-
251
- // Icon stop
252
- .icon-stop {
253
- border: $icon-border-width solid currentColor;
254
- border-radius: 50%;
255
- &::before {
256
- background: currentColor;
257
- content: "";
258
- height: $icon-border-width;
259
- transform: translate(-50%, -50%) rotate(45deg);
260
- width: 1em;
261
- }
262
- }
263
-
264
- // Icon shutdown
265
- .icon-shutdown {
266
- border: $icon-border-width solid currentColor;
267
- border-radius: 50%;
268
- border-top-color: transparent;
269
- &::before {
270
- background: currentColor;
271
- content: "";
272
- height: .5em;
273
- top: .1em;
274
- width: $icon-border-width;
275
- }
276
- }
277
-
278
- // Icon refresh
279
- .icon-refresh {
280
- &::before {
281
- border: $icon-border-width solid currentColor;
282
- border-radius: 50%;
283
- border-right-color: transparent;
284
- content: "";
285
- height: 1em;
286
- width: 1em;
287
- }
288
- &::after {
289
- border: .2em solid currentColor;
290
- border-top-color: transparent;
291
- border-left-color: transparent;
292
- content: "";
293
- height: 0;
294
- left: 80%;
295
- top: 20%;
296
- width: 0;
297
- }
298
- }
299
-
300
- // Icon search
301
- .icon-search {
302
- &::before {
303
- border: $icon-border-width solid currentColor;
304
- border-radius: 50%;
305
- content: "";
306
- height: .75em;
307
- left: 5%;
308
- top: 5%;
309
- transform: translate(0, 0) rotate(45deg);
310
- width: .75em;
311
- }
312
- &::after {
313
- background: currentColor;
314
- content: "";
315
- height: $icon-border-width;
316
- left: 80%;
317
- top: 80%;
318
- transform: translate(-50%, -50%) rotate(45deg);
319
- width: .4em;
320
- }
321
- }
322
-
323
- // Icon edit
324
- .icon-edit {
325
- &::before {
326
- border: $icon-border-width solid currentColor;
327
- content: "";
328
- height: .4em;
329
- transform: translate(-40%, -60%) rotate(-45deg);
330
- width: .85em;
331
- }
332
- &::after {
333
- border: .15em solid currentColor;
334
- border-top-color: transparent;
335
- border-right-color: transparent;
336
- content: "";
337
- height: 0;
338
- left: 5%;
339
- top: 95%;
340
- transform: translate(0, -100%);
341
- width: 0;
342
- }
343
- }
344
-
345
- // Icon delete
346
- .icon-delete {
347
- &::before {
348
- border: $icon-border-width solid currentColor;
349
- border-bottom-left-radius: $border-radius;
350
- border-bottom-right-radius: $border-radius;
351
- border-top: 0;
352
- content: "";
353
- height: .75em;
354
- top: 60%;
355
- width: .75em;
356
- }
357
- &::after {
358
- background: currentColor;
359
- box-shadow: -.25em .2em, .25em .2em;
360
- content: "";
361
- height: $icon-border-width;
362
- top: $icon-border-width/2;
363
- width: .5em;
364
- }
365
- }
366
-
367
- // Icon share
368
- .icon-share {
369
- border: $icon-border-width solid currentColor;
370
- border-radius: $border-radius;
371
- border-right: 0;
372
- border-top: 0;
373
- &::before {
374
- border: $icon-border-width solid currentColor;
375
- border-left: 0;
376
- border-top: 0;
377
- content: "";
378
- height: .4em;
379
- left: 100%;
380
- top: .25em;
381
- transform: translate(-125%, -50%) rotate(-45deg);
382
- width: .4em;
383
- }
384
- &::after {
385
- border: $icon-border-width solid currentColor;
386
- border-bottom: 0;
387
- border-right: 0;
388
- border-radius: 75% 0;
389
- content: "";
390
- height: .5em;
391
- width: .6em;
392
- }
393
- }
394
-
395
- // Icon flag
396
- .icon-flag {
397
- &::before {
398
- background: currentColor;
399
- content: "";
400
- height: 1em;
401
- left: 15%;
402
- width: $icon-border-width;
403
- }
404
- &::after {
405
- border: $icon-border-width solid currentColor;
406
- border-bottom-right-radius: $border-radius;
407
- border-left: 0;
408
- border-top-right-radius: $border-radius;
409
- content: "";
410
- height: .65em;
411
- top: 35%;
412
- left: 60%;
413
- width: .8em;
414
- }
415
- }
416
-
417
- // Icon bookmark
418
- .icon-bookmark {
419
- &::before {
420
- border: $icon-border-width solid currentColor;
421
- border-bottom: 0;
422
- border-top-left-radius: $border-radius;
423
- border-top-right-radius: $border-radius;
424
- content: "";
425
- height: .9em;
426
- width: .8em;
427
- }
428
- &::after {
429
- border: $icon-border-width solid currentColor;
430
- border-bottom: 0;
431
- border-left: 0;
432
- border-radius: $border-radius;
433
- content: "";
434
- height: .5em;
435
- transform: translate(-50%, 35%) rotate(-45deg) skew(15deg, 15deg);
436
- width: .5em;
437
- }
438
- }
439
-
440
- // Icon download & upload
441
- .icon-download,
442
- .icon-upload {
443
- border-bottom: $icon-border-width solid currentColor;
444
- &::before {
445
- border: $icon-border-width solid currentColor;
446
- border-bottom: 0;
447
- border-right: 0;
448
- content: "";
449
- height: .5em;
450
- width: .5em;
451
- transform: translate(-50%, -60%) rotate(-135deg);
452
- }
453
- &::after {
454
- background: currentColor;
455
- content: "";
456
- height: .6em;
457
- top: 40%;
458
- width: $icon-border-width;
459
- }
460
- }
461
-
462
- .icon-upload {
463
- &::before {
464
- transform: translate(-50%, -60%) rotate(45deg);
465
- }
466
- &::after {
467
- top: 50%;
468
- }
469
- }
470
-
471
- // Icon time
472
- .icon-time {
473
- border: $icon-border-width solid currentColor;
474
- border-radius: 50%;
475
- &::before {
476
- background: currentColor;
477
- content: "";
478
- height: .4em;
479
- transform: translate(-50%, -75%);
480
- width: $icon-border-width;
481
- }
482
- &::after {
483
- background: currentColor;
484
- content: "";
485
- height: .3em;
486
- transform: translate(-50%, -75%) rotate(90deg);
487
- transform-origin: 50% 90%;
488
- width: $icon-border-width;
489
- }
490
- }
491
-
492
- // Icon mail
493
- .icon-mail {
494
- &::before {
495
- border: $icon-border-width solid currentColor;
496
- border-radius: $border-radius;
497
- content: "";
498
- height: .8em;
499
- width: 1em;
500
- }
501
- &::after {
502
- border: $icon-border-width solid currentColor;
503
- border-right: 0;
504
- border-top: 0;
505
- content: "";
506
- height: .5em;
507
- transform: translate(-50%, -90%) rotate(-45deg) skew(10deg, 10deg);
508
- width: .5em;
509
- }
510
- }
511
-
512
- // Icon people
513
- .icon-people {
514
- &::before {
515
- border: $icon-border-width solid currentColor;
516
- border-radius: 50%;
517
- content: "";
518
- height: .45em;
519
- top: 25%;
520
- width: .45em;
521
- }
522
- &::after {
523
- border: $icon-border-width solid currentColor;
524
- border-radius: 50% 50% 0 0;
525
- content: "";
526
- height: .4em;
527
- top: 75%;
528
- width: .9em;
529
- }
530
- }
531
-
532
- // Icon message
533
- .icon-message {
534
- border: $icon-border-width solid currentColor;
535
- border-bottom: 0;
536
- border-radius: $border-radius;
537
- border-right: 0;
538
- &::before {
539
- border: $icon-border-width solid currentColor;
540
- border-left: 0;
541
- border-bottom-right-radius: $border-radius;
542
- border-top: 0;
543
- content: "";
544
- height: .8em;
545
- left: 65%;
546
- top: 40%;
547
- width: .7em;
548
- }
549
- &::after {
550
- background: currentColor;
551
- border-radius: $border-radius;
552
- content: "";
553
- height: .3em;
554
- left: 10%;
555
- top: 100%;
556
- transform: translate(0, -90%) rotate(45deg);
557
- width: $icon-border-width;
558
- }
559
- }
560
-
561
- // Icon photo
562
- .icon-photo {
563
- border: $icon-border-width solid currentColor;
564
- border-radius: $border-radius;
565
- &::before {
566
- border: $icon-border-width solid currentColor;
567
- border-radius: 50%;
568
- content: "";
569
- height: .25em;
570
- left: 35%;
571
- top: 35%;
572
- width: .25em;
573
- }
574
- &::after {
575
- border: $icon-border-width solid currentColor;
576
- border-bottom: 0;
577
- border-left: 0;
578
- content: "";
579
- height: .5em;
580
- left: 60%;
581
- transform: translate(-50%, 25%) rotate(-45deg);
582
- width: .5em;
583
- }
584
- }
585
-
586
- // Icon link
587
- .icon-link {
588
- &::before,
589
- &::after {
590
- border: $icon-border-width solid currentColor;
591
- border-radius: 5em 0 0 5em;
592
- border-right: 0;
593
- content: "";
594
- height: .5em;
595
- width: .75em;
596
- }
597
- &::before {
598
- transform: translate(-70%, -45%) rotate(-45deg);
599
- }
600
- &::after {
601
- transform: translate(-30%, -55%) rotate(135deg);
602
- }
603
- }
604
-
605
- // Icon location
606
- .icon-location {
607
- &::before {
608
- border: $icon-border-width solid currentColor;
609
- border-radius: 50% 50% 50% 0;
610
- content: "";
611
- height: .8em;
612
- transform: translate(-50%, -60%) rotate(-45deg);
613
- width: .8em;
614
- }
615
- &::after {
616
- border: $icon-border-width solid currentColor;
617
- border-radius: 50%;
618
- content: "";
619
- height: .2em;
620
- transform: translate(-50%, -80%);
621
- width: .2em;
622
- }
623
- }
624
-
625
- // Icon emoji
626
- .icon-emoji {
627
- border: $icon-border-width solid currentColor;
628
- border-radius: 50%;
629
- &::before {
630
- border-radius: 50%;
631
- box-shadow: -.17em -.15em, .17em -.15em;
632
- content: "";
633
- height: .1em;
634
- width: .1em;
635
- }
636
- &::after {
637
- border: $icon-border-width solid currentColor;
638
- border-bottom-color: transparent;
639
- border-radius: 50%;
640
- border-right-color: transparent;
641
- content: "";
642
- height: .5em;
643
- transform: translate(-50%, -40%) rotate(-135deg);
644
- width: .5em;
645
- }
646
- }
647
-
648
- // Component icon support
649
- .accordion,
650
- .btn,
651
- .toast,
652
- .menu {
653
- .icon {
654
- vertical-align: -10%;
655
- }
656
- }
2
+ @import "icons/icons-core";
3
+ @import "icons/icons-navigation";
4
+ @import "icons/icons-action";
5
+ @import "icons/icons-object";
@@ -1,15 +1,17 @@
1
1
  // Labels
2
2
  .label {
3
3
  @include label-base();
4
- @include label-variant(lighten($body-font-color, 5%), $bg-color);
4
+ @include label-variant(lighten($body-font-color, 5%), $bg-color-dark);
5
5
  display: inline-block;
6
6
 
7
+ // Label rounded
7
8
  &.label-rounded {
8
9
  border-radius: 5rem;
9
10
  padding-left: .4rem;
10
11
  padding-right: .4rem;
11
12
  }
12
13
 
14
+ // Label colors
13
15
  &.label-primary {
14
16
  @include label-variant($light-color, $primary-color);
15
17
  }
@@ -32,13 +32,25 @@
32
32
  .modal-container {
33
33
  animation: slide-down .2s ease 1;
34
34
  max-width: 640px;
35
+ width: 100%;
35
36
  z-index: $zindex-0;
36
37
  }
37
38
  }
38
39
 
39
40
  &.modal-sm {
40
41
  .modal-container {
41
- max-width: $control-max-width;
42
+ max-width: 320px;
43
+ }
44
+ }
45
+
46
+ &.modal-lg {
47
+ .modal-overlay {
48
+ background: $bg-color-light;
49
+ }
50
+
51
+ .modal-container {
52
+ box-shadow: none;
53
+ max-width: 960px;
42
54
  }
43
55
  }
44
56
  }
@@ -52,7 +64,7 @@
52
64
  text-align: left;
53
65
 
54
66
  .modal-header {
55
- padding: $layout-spacing-lg;
67
+ padding: $unit-4 $unit-6;
56
68
 
57
69
  .modal-title {
58
70
  margin: 0;
@@ -62,12 +74,12 @@
62
74
  .modal-body {
63
75
  max-height: 50vh;
64
76
  overflow-y: auto;
65
- padding: $layout-spacing-lg;
77
+ padding: $unit-4 $unit-6;
66
78
  position: relative;
67
79
  }
68
80
 
69
81
  .modal-footer {
70
- padding: $layout-spacing-lg;
82
+ padding: $unit-4 $unit-6;
71
83
  text-align: right;
72
84
  }
73
85
  }
@@ -19,7 +19,7 @@
19
19
  text-overflow: ellipsis;
20
20
  transform: translate(-50%, $unit-2);
21
21
  transition: all .2s ease;
22
- white-space: nowrap;
22
+ white-space: pre;
23
23
  z-index: $zindex-3;
24
24
  }
25
25
  &:focus,