@sb1/ffe-grid 15.1.5 → 16.0.1
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.
- package/README.md +8 -34
- package/css/ffe-grid.css +16 -211
- package/less/ffe-grid.less +13 -213
- package/package.json +4 -4
package/README.md
CHANGED
|
@@ -109,7 +109,7 @@ Text inside a grid column can be centered using the `.ffe-grid__col--center-text
|
|
|
109
109
|
The background color of rows can be changed using modifiers. This requires that the children of `.ffe-grid__row` are wrapped in `.ffe-grid__row-wrapper`.
|
|
110
110
|
|
|
111
111
|
```html
|
|
112
|
-
<div class="ffe-grid__row ffe-grid__row--bg-
|
|
112
|
+
<div class="ffe-grid__row ffe-grid__row--bg-primary">
|
|
113
113
|
<div class="ffe-grid__row-wrapper">
|
|
114
114
|
<div class="ffe-grid__col--md-6">
|
|
115
115
|
<!-- content -->
|
|
@@ -121,45 +121,19 @@ The background color of rows can be changed using modifiers. This requires that
|
|
|
121
121
|
</div>
|
|
122
122
|
```
|
|
123
123
|
|
|
124
|
-
|
|
124
|
+
Supported background colors are limited to `surface` colors in the semantic color palette. This means you can choose from the following backgrounds, which in turn adhere to which mode the parent element is set to (i.e. light mode, dark mode, accent mode).
|
|
125
125
|
|
|
126
|
-
|
|
126
|
+
#### `.ffe-grid__row--bg-primary`
|
|
127
127
|
|
|
128
|
-
|
|
128
|
+
Sets the row background color to `--ffe-color-surface-primary-default`
|
|
129
129
|
|
|
130
|
-
|
|
130
|
+
#### `.ffe-grid__row--bg-secondary`
|
|
131
131
|
|
|
132
|
-
|
|
132
|
+
Sets the row background color to `--ffe-color-surface-primary-secondary`
|
|
133
133
|
|
|
134
|
-
|
|
134
|
+
#### `.ffe-grid__row--bg-tertiary`
|
|
135
135
|
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
Sets the row background color to `@ffe-farge-sand-30`
|
|
139
|
-
|
|
140
|
-
#### `.ffe-grid__row--bg-syrin-70`
|
|
141
|
-
|
|
142
|
-
Sets the row background color to `@ffe-farge-syrin-70`
|
|
143
|
-
|
|
144
|
-
#### `.ffe-grid__row--bg-syrin-30`
|
|
145
|
-
|
|
146
|
-
Sets the row background color to `@ffe-farge-syrin-30`
|
|
147
|
-
|
|
148
|
-
#### `.ffe-grid__row--bg-vann`
|
|
149
|
-
|
|
150
|
-
Sets the row background color to `@ffe-farge-vann`
|
|
151
|
-
|
|
152
|
-
#### `.ffe-grid__row--bg-vann-30`
|
|
153
|
-
|
|
154
|
-
Sets the row background color to `@ffe-farge-vann-30`
|
|
155
|
-
|
|
156
|
-
#### `.ffe-grid__row--bg-fjell`
|
|
157
|
-
|
|
158
|
-
Sets the row background color to `@ffe-farge-fjell`
|
|
159
|
-
|
|
160
|
-
#### `.ffe-grid__row--bg-hvit`
|
|
161
|
-
|
|
162
|
-
Sets the row background color to `@ffe-farge-hvit`
|
|
136
|
+
Sets the row background color to `--ffe-color-surface-primary-tertiary`
|
|
163
137
|
|
|
164
138
|
## Development
|
|
165
139
|
|
package/css/ffe-grid.css
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
.ffe-grid__row {
|
|
2
2
|
padding-right: var(--ffe-spacing-sm);
|
|
3
3
|
padding-left: var(--ffe-spacing-sm);
|
|
4
|
+
color: var(--ffe-color-foreground-default);
|
|
4
5
|
}
|
|
5
6
|
.ffe-grid__row,
|
|
6
7
|
.ffe-grid__row-wrapper {
|
|
@@ -532,125 +533,17 @@
|
|
|
532
533
|
margin: var(--ffe-spacing-5xl) auto;
|
|
533
534
|
}
|
|
534
535
|
}
|
|
535
|
-
.ffe-grid__row--bg-
|
|
536
|
-
.ffe-grid__row-wrapper--bg-
|
|
537
|
-
background-color: var(--ffe-
|
|
536
|
+
.ffe-grid__row--bg-primary,
|
|
537
|
+
.ffe-grid__row-wrapper--bg-primary {
|
|
538
|
+
background-color: var(--ffe-color-surface-primary-default);
|
|
538
539
|
}
|
|
539
|
-
|
|
540
|
-
|
|
541
|
-
|
|
542
|
-
background-color: var(--ffe-farge-svart);
|
|
543
|
-
}
|
|
544
|
-
}
|
|
545
|
-
.ffe-grid__row--bg-sand,
|
|
546
|
-
.ffe-grid__row-wrapper--bg-sand {
|
|
547
|
-
background-color: var(--ffe-farge-sand);
|
|
548
|
-
}
|
|
549
|
-
@media (prefers-color-scheme: dark) {
|
|
550
|
-
.regard-color-scheme-preference .ffe-grid__row--bg-sand,
|
|
551
|
-
.regard-color-scheme-preference .ffe-grid__row-wrapper--bg-sand {
|
|
552
|
-
background-color: var(--ffe-farge-svart);
|
|
553
|
-
}
|
|
554
|
-
}
|
|
555
|
-
.ffe-grid__row--bg-sand-70,
|
|
556
|
-
.ffe-grid__row-wrapper--bg-sand-70 {
|
|
557
|
-
background-color: var(--ffe-farge-sand-70);
|
|
558
|
-
}
|
|
559
|
-
@media (prefers-color-scheme: dark) {
|
|
560
|
-
.regard-color-scheme-preference .ffe-grid__row--bg-sand-70,
|
|
561
|
-
.regard-color-scheme-preference .ffe-grid__row-wrapper--bg-sand-70 {
|
|
562
|
-
background-color: var(--ffe-farge-svart);
|
|
563
|
-
}
|
|
564
|
-
}
|
|
565
|
-
.ffe-grid__row--bg-sand-30,
|
|
566
|
-
.ffe-grid__row-wrapper--bg-sand-30 {
|
|
567
|
-
background-color: var(--ffe-farge-sand-30);
|
|
568
|
-
}
|
|
569
|
-
@media (prefers-color-scheme: dark) {
|
|
570
|
-
.regard-color-scheme-preference .ffe-grid__row--bg-sand-30,
|
|
571
|
-
.regard-color-scheme-preference .ffe-grid__row-wrapper--bg-sand-30 {
|
|
572
|
-
background-color: var(--ffe-farge-svart);
|
|
573
|
-
}
|
|
574
|
-
}
|
|
575
|
-
.ffe-grid__row--bg-syrin-70,
|
|
576
|
-
.ffe-grid__row-wrapper--bg-syrin-70 {
|
|
577
|
-
background-color: var(--ffe-farge-syrin-70);
|
|
578
|
-
}
|
|
579
|
-
@media (prefers-color-scheme: dark) {
|
|
580
|
-
.regard-color-scheme-preference .ffe-grid__row--bg-syrin-70,
|
|
581
|
-
.regard-color-scheme-preference .ffe-grid__row-wrapper--bg-syrin-70 {
|
|
582
|
-
background-color: var(--ffe-farge-svart);
|
|
583
|
-
}
|
|
584
|
-
}
|
|
585
|
-
.ffe-grid__row--bg-syrin-30,
|
|
586
|
-
.ffe-grid__row-wrapper--bg-syrin-30 {
|
|
587
|
-
background-color: var(--ffe-farge-syrin-30);
|
|
588
|
-
}
|
|
589
|
-
@media (prefers-color-scheme: dark) {
|
|
590
|
-
.regard-color-scheme-preference .ffe-grid__row--bg-syrin-30,
|
|
591
|
-
.regard-color-scheme-preference .ffe-grid__row-wrapper--bg-syrin-30 {
|
|
592
|
-
background-color: var(--ffe-farge-svart);
|
|
593
|
-
}
|
|
594
|
-
}
|
|
595
|
-
.ffe-grid__row--bg-vann,
|
|
596
|
-
.ffe-grid__row-wrapper--bg-vann {
|
|
597
|
-
background-color: var(--ffe-farge-vann);
|
|
598
|
-
color: var(--ffe-farge-hvit);
|
|
540
|
+
.ffe-grid__row--bg-secondary,
|
|
541
|
+
.ffe-grid__row-wrapper--bg-secondary {
|
|
542
|
+
background-color: var(--ffe-color-surface-secondary-default);
|
|
599
543
|
}
|
|
600
|
-
|
|
601
|
-
|
|
602
|
-
|
|
603
|
-
background-color: var(--ffe-farge-svart);
|
|
604
|
-
}
|
|
605
|
-
}
|
|
606
|
-
.ffe-grid__row--bg-vann-30,
|
|
607
|
-
.ffe-grid__row-wrapper--bg-vann-30 {
|
|
608
|
-
background-color: var(--ffe-farge-vann-30);
|
|
609
|
-
}
|
|
610
|
-
@media (prefers-color-scheme: dark) {
|
|
611
|
-
.regard-color-scheme-preference .ffe-grid__row--bg-vann-30,
|
|
612
|
-
.regard-color-scheme-preference .ffe-grid__row-wrapper--bg-vann-30 {
|
|
613
|
-
background-color: var(--ffe-farge-svart);
|
|
614
|
-
}
|
|
615
|
-
}
|
|
616
|
-
.ffe-grid__row--bg-fjell,
|
|
617
|
-
.ffe-grid__row-wrapper--bg-fjell {
|
|
618
|
-
background-color: var(--ffe-farge-fjell);
|
|
619
|
-
color: var(--ffe-farge-hvit);
|
|
620
|
-
}
|
|
621
|
-
@media (prefers-color-scheme: dark) {
|
|
622
|
-
.regard-color-scheme-preference .ffe-grid__row--bg-fjell,
|
|
623
|
-
.regard-color-scheme-preference .ffe-grid__row-wrapper--bg-fjell {
|
|
624
|
-
background-color: var(--ffe-farge-svart);
|
|
625
|
-
}
|
|
626
|
-
}
|
|
627
|
-
.ffe-grid__row--bg-hvit,
|
|
628
|
-
.ffe-grid__row-wrapper--bg-hvit {
|
|
629
|
-
background-color: var(--ffe-farge-hvit);
|
|
630
|
-
}
|
|
631
|
-
@media (prefers-color-scheme: dark) {
|
|
632
|
-
.regard-color-scheme-preference .ffe-grid__row--bg-hvit,
|
|
633
|
-
.regard-color-scheme-preference .ffe-grid__row-wrapper--bg-hvit {
|
|
634
|
-
background-color: var(--ffe-farge-svart);
|
|
635
|
-
}
|
|
636
|
-
}
|
|
637
|
-
@media (prefers-color-scheme: dark) {
|
|
638
|
-
.regard-color-scheme-preference .ffe-grid__row--bg-dark-svart,
|
|
639
|
-
.regard-color-scheme-preference .ffe-grid__row-wrapper--bg-dark-svart {
|
|
640
|
-
background-color: var(--ffe-farge-svart);
|
|
641
|
-
}
|
|
642
|
-
}
|
|
643
|
-
@media (prefers-color-scheme: dark) {
|
|
644
|
-
.regard-color-scheme-preference .ffe-grid__row--bg-dark-natt,
|
|
645
|
-
.regard-color-scheme-preference .ffe-grid__row-wrapper--bg-dark-natt {
|
|
646
|
-
background-color: var(--ffe-farge-natt);
|
|
647
|
-
}
|
|
648
|
-
}
|
|
649
|
-
@media (prefers-color-scheme: dark) {
|
|
650
|
-
.regard-color-scheme-preference .ffe-grid__row--bg-dark-koksgraa,
|
|
651
|
-
.regard-color-scheme-preference .ffe-grid__row-wrapper--bg-dark-koksgraa {
|
|
652
|
-
background-color: var(--ffe-farge-koksgraa);
|
|
653
|
-
}
|
|
544
|
+
.ffe-grid__row--bg-tertiary,
|
|
545
|
+
.ffe-grid__row-wrapper--bg-tertiary {
|
|
546
|
+
background-color: var(--ffe-color-surface-tertiary-default);
|
|
654
547
|
}
|
|
655
548
|
[class*='ffe-grid__row--bg-'] {
|
|
656
549
|
display: block;
|
|
@@ -659,102 +552,14 @@
|
|
|
659
552
|
.ffe-grid__col {
|
|
660
553
|
grid-column: auto / span 12;
|
|
661
554
|
}
|
|
662
|
-
.ffe-grid__col--bg-
|
|
663
|
-
background-color: var(--ffe-
|
|
555
|
+
.ffe-grid__col--bg-primary {
|
|
556
|
+
background-color: var(--ffe-color-surface-primary-default);
|
|
664
557
|
}
|
|
665
|
-
|
|
666
|
-
|
|
667
|
-
background-color: var(--ffe-farge-svart);
|
|
668
|
-
}
|
|
669
|
-
}
|
|
670
|
-
.ffe-grid__col--bg-sand {
|
|
671
|
-
background-color: var(--ffe-farge-sand);
|
|
672
|
-
}
|
|
673
|
-
@media (prefers-color-scheme: dark) {
|
|
674
|
-
.regard-color-scheme-preference .ffe-grid__col--bg-sand {
|
|
675
|
-
background-color: var(--ffe-farge-svart);
|
|
676
|
-
}
|
|
677
|
-
}
|
|
678
|
-
.ffe-grid__col--bg-sand-70 {
|
|
679
|
-
background-color: var(--ffe-farge-sand-70);
|
|
680
|
-
}
|
|
681
|
-
@media (prefers-color-scheme: dark) {
|
|
682
|
-
.regard-color-scheme-preference .ffe-grid__col--bg-sand-70 {
|
|
683
|
-
background-color: var(--ffe-farge-svart);
|
|
684
|
-
}
|
|
685
|
-
}
|
|
686
|
-
.ffe-grid__col--bg-sand-30 {
|
|
687
|
-
background-color: var(--ffe-farge-sand-30);
|
|
688
|
-
}
|
|
689
|
-
@media (prefers-color-scheme: dark) {
|
|
690
|
-
.regard-color-scheme-preference .ffe-grid__col--bg-sand-30 {
|
|
691
|
-
background-color: var(--ffe-farge-svart);
|
|
692
|
-
}
|
|
693
|
-
}
|
|
694
|
-
.ffe-grid__col--bg-syrin-70 {
|
|
695
|
-
background-color: var(--ffe-farge-syrin-70);
|
|
696
|
-
}
|
|
697
|
-
@media (prefers-color-scheme: dark) {
|
|
698
|
-
.regard-color-scheme-preference .ffe-grid__col--bg-syrin-70 {
|
|
699
|
-
background-color: var(--ffe-farge-svart);
|
|
700
|
-
}
|
|
701
|
-
}
|
|
702
|
-
.ffe-grid__col--bg-syrin-30 {
|
|
703
|
-
background-color: var(--ffe-farge-syrin-30);
|
|
704
|
-
}
|
|
705
|
-
@media (prefers-color-scheme: dark) {
|
|
706
|
-
.regard-color-scheme-preference .ffe-grid__col--bg-syrin-30 {
|
|
707
|
-
background-color: var(--ffe-farge-svart);
|
|
708
|
-
}
|
|
709
|
-
}
|
|
710
|
-
.ffe-grid__col--bg-vann {
|
|
711
|
-
background-color: var(--ffe-farge-vann);
|
|
712
|
-
color: var(--ffe-farge-hvit);
|
|
558
|
+
.ffe-grid__col--bg-secondary {
|
|
559
|
+
background-color: var(--ffe-color-surface-secondary-default);
|
|
713
560
|
}
|
|
714
|
-
|
|
715
|
-
|
|
716
|
-
background-color: var(--ffe-farge-svart);
|
|
717
|
-
}
|
|
718
|
-
}
|
|
719
|
-
.ffe-grid__col--bg-vann-30 {
|
|
720
|
-
background-color: var(--ffe-farge-vann-30);
|
|
721
|
-
}
|
|
722
|
-
@media (prefers-color-scheme: dark) {
|
|
723
|
-
.regard-color-scheme-preference .ffe-grid__col--bg-vann-30 {
|
|
724
|
-
background-color: var(--ffe-farge-svart);
|
|
725
|
-
}
|
|
726
|
-
}
|
|
727
|
-
.ffe-grid__col--bg-fjell {
|
|
728
|
-
background-color: var(--ffe-farge-fjell);
|
|
729
|
-
color: var(--ffe-farge-hvit);
|
|
730
|
-
}
|
|
731
|
-
@media (prefers-color-scheme: dark) {
|
|
732
|
-
.regard-color-scheme-preference .ffe-grid__col--bg-fjell {
|
|
733
|
-
background-color: var(--ffe-farge-svart);
|
|
734
|
-
}
|
|
735
|
-
}
|
|
736
|
-
.ffe-grid__col--bg-hvit {
|
|
737
|
-
background-color: var(--ffe-farge-hvit);
|
|
738
|
-
}
|
|
739
|
-
@media (prefers-color-scheme: dark) {
|
|
740
|
-
.regard-color-scheme-preference .ffe-grid__col--bg-hvit {
|
|
741
|
-
background-color: var(--ffe-farge-svart);
|
|
742
|
-
}
|
|
743
|
-
}
|
|
744
|
-
@media (prefers-color-scheme: dark) {
|
|
745
|
-
.regard-color-scheme-preference .ffe-grid__col--bg-dark-svart {
|
|
746
|
-
background-color: var(--ffe-farge-svart);
|
|
747
|
-
}
|
|
748
|
-
}
|
|
749
|
-
@media (prefers-color-scheme: dark) {
|
|
750
|
-
.regard-color-scheme-preference .ffe-grid__col--bg-dark-natt {
|
|
751
|
-
background-color: var(--ffe-farge-natt);
|
|
752
|
-
}
|
|
753
|
-
}
|
|
754
|
-
@media (prefers-color-scheme: dark) {
|
|
755
|
-
.regard-color-scheme-preference .ffe-grid__col--bg-dark-koksgraa {
|
|
756
|
-
background-color: var(--ffe-farge-koksgraa);
|
|
757
|
-
}
|
|
561
|
+
.ffe-grid__col--bg-tertiary {
|
|
562
|
+
background-color: var(--ffe-color-surface-tertiary-default);
|
|
758
563
|
}
|
|
759
564
|
.ffe-grid__col--center-text {
|
|
760
565
|
text-align: center;
|
package/less/ffe-grid.less
CHANGED
|
@@ -25,6 +25,7 @@
|
|
|
25
25
|
.ffe-grid__row {
|
|
26
26
|
padding-right: var(--ffe-spacing-sm);
|
|
27
27
|
padding-left: var(--ffe-spacing-sm);
|
|
28
|
+
color: var(--ffe-color-foreground-default);
|
|
28
29
|
}
|
|
29
30
|
|
|
30
31
|
.ffe-grid__row,
|
|
@@ -557,117 +558,16 @@
|
|
|
557
558
|
}
|
|
558
559
|
}
|
|
559
560
|
|
|
560
|
-
&--bg-
|
|
561
|
-
background-color: var(--ffe-
|
|
562
|
-
.regard-color-scheme-preference & {
|
|
563
|
-
@media (prefers-color-scheme: dark) {
|
|
564
|
-
background-color: var(--ffe-farge-svart);
|
|
565
|
-
}
|
|
566
|
-
}
|
|
567
|
-
}
|
|
568
|
-
|
|
569
|
-
&--bg-sand {
|
|
570
|
-
background-color: var(--ffe-farge-sand);
|
|
571
|
-
.regard-color-scheme-preference & {
|
|
572
|
-
@media (prefers-color-scheme: dark) {
|
|
573
|
-
background-color: var(--ffe-farge-svart);
|
|
574
|
-
}
|
|
575
|
-
}
|
|
576
|
-
}
|
|
577
|
-
|
|
578
|
-
&--bg-sand-70 {
|
|
579
|
-
background-color: var(--ffe-farge-sand-70);
|
|
580
|
-
.regard-color-scheme-preference & {
|
|
581
|
-
@media (prefers-color-scheme: dark) {
|
|
582
|
-
background-color: var(--ffe-farge-svart);
|
|
583
|
-
}
|
|
584
|
-
}
|
|
585
|
-
}
|
|
586
|
-
|
|
587
|
-
&--bg-sand-30 {
|
|
588
|
-
background-color: var(--ffe-farge-sand-30);
|
|
589
|
-
.regard-color-scheme-preference & {
|
|
590
|
-
@media (prefers-color-scheme: dark) {
|
|
591
|
-
background-color: var(--ffe-farge-svart);
|
|
592
|
-
}
|
|
593
|
-
}
|
|
594
|
-
}
|
|
595
|
-
&--bg-syrin-70 {
|
|
596
|
-
background-color: var(--ffe-farge-syrin-70);
|
|
597
|
-
.regard-color-scheme-preference & {
|
|
598
|
-
@media (prefers-color-scheme: dark) {
|
|
599
|
-
background-color: var(--ffe-farge-svart);
|
|
600
|
-
}
|
|
601
|
-
}
|
|
602
|
-
}
|
|
603
|
-
&--bg-syrin-30 {
|
|
604
|
-
background-color: var(--ffe-farge-syrin-30);
|
|
605
|
-
.regard-color-scheme-preference & {
|
|
606
|
-
@media (prefers-color-scheme: dark) {
|
|
607
|
-
background-color: var(--ffe-farge-svart);
|
|
608
|
-
}
|
|
609
|
-
}
|
|
610
|
-
}
|
|
611
|
-
|
|
612
|
-
&--bg-vann {
|
|
613
|
-
background-color: var(--ffe-farge-vann);
|
|
614
|
-
color: var(--ffe-farge-hvit);
|
|
615
|
-
.regard-color-scheme-preference & {
|
|
616
|
-
@media (prefers-color-scheme: dark) {
|
|
617
|
-
background-color: var(--ffe-farge-svart);
|
|
618
|
-
}
|
|
619
|
-
}
|
|
620
|
-
}
|
|
621
|
-
&--bg-vann-30 {
|
|
622
|
-
background-color: var(--ffe-farge-vann-30);
|
|
623
|
-
.regard-color-scheme-preference & {
|
|
624
|
-
@media (prefers-color-scheme: dark) {
|
|
625
|
-
background-color: var(--ffe-farge-svart);
|
|
626
|
-
}
|
|
627
|
-
}
|
|
561
|
+
&--bg-primary {
|
|
562
|
+
background-color: var(--ffe-color-surface-primary-default);
|
|
628
563
|
}
|
|
629
564
|
|
|
630
|
-
&--bg-
|
|
631
|
-
background-color: var(--ffe-
|
|
632
|
-
color: var(--ffe-farge-hvit);
|
|
633
|
-
.regard-color-scheme-preference & {
|
|
634
|
-
@media (prefers-color-scheme: dark) {
|
|
635
|
-
background-color: var(--ffe-farge-svart);
|
|
636
|
-
}
|
|
637
|
-
}
|
|
638
|
-
}
|
|
639
|
-
|
|
640
|
-
&--bg-hvit {
|
|
641
|
-
background-color: var(--ffe-farge-hvit);
|
|
642
|
-
.regard-color-scheme-preference & {
|
|
643
|
-
@media (prefers-color-scheme: dark) {
|
|
644
|
-
background-color: var(--ffe-farge-svart);
|
|
645
|
-
}
|
|
646
|
-
}
|
|
565
|
+
&--bg-secondary {
|
|
566
|
+
background-color: var(--ffe-color-surface-secondary-default);
|
|
647
567
|
}
|
|
648
568
|
|
|
649
|
-
&--bg-
|
|
650
|
-
|
|
651
|
-
@media (prefers-color-scheme: dark) {
|
|
652
|
-
background-color: var(--ffe-farge-svart);
|
|
653
|
-
}
|
|
654
|
-
}
|
|
655
|
-
}
|
|
656
|
-
|
|
657
|
-
&--bg-dark-natt {
|
|
658
|
-
.regard-color-scheme-preference & {
|
|
659
|
-
@media (prefers-color-scheme: dark) {
|
|
660
|
-
background-color: var(--ffe-farge-natt);
|
|
661
|
-
}
|
|
662
|
-
}
|
|
663
|
-
}
|
|
664
|
-
|
|
665
|
-
&--bg-dark-koksgraa {
|
|
666
|
-
.regard-color-scheme-preference & {
|
|
667
|
-
@media (prefers-color-scheme: dark) {
|
|
668
|
-
background-color: var(--ffe-farge-koksgraa);
|
|
669
|
-
}
|
|
670
|
-
}
|
|
569
|
+
&--bg-tertiary {
|
|
570
|
+
background-color: var(--ffe-color-surface-tertiary-default);
|
|
671
571
|
}
|
|
672
572
|
}
|
|
673
573
|
|
|
@@ -679,116 +579,16 @@
|
|
|
679
579
|
.ffe-grid__col {
|
|
680
580
|
grid-column: auto e('/') span 12;
|
|
681
581
|
|
|
682
|
-
&--bg-
|
|
683
|
-
background-color: var(--ffe-
|
|
684
|
-
.regard-color-scheme-preference & {
|
|
685
|
-
@media (prefers-color-scheme: dark) {
|
|
686
|
-
background-color: var(--ffe-farge-svart);
|
|
687
|
-
}
|
|
688
|
-
}
|
|
689
|
-
}
|
|
690
|
-
|
|
691
|
-
&--bg-sand {
|
|
692
|
-
background-color: var(--ffe-farge-sand);
|
|
693
|
-
.regard-color-scheme-preference & {
|
|
694
|
-
@media (prefers-color-scheme: dark) {
|
|
695
|
-
background-color: var(--ffe-farge-svart);
|
|
696
|
-
}
|
|
697
|
-
}
|
|
582
|
+
&--bg-primary {
|
|
583
|
+
background-color: var(--ffe-color-surface-primary-default);
|
|
698
584
|
}
|
|
699
585
|
|
|
700
|
-
&--bg-
|
|
701
|
-
background-color: var(--ffe-
|
|
702
|
-
.regard-color-scheme-preference & {
|
|
703
|
-
@media (prefers-color-scheme: dark) {
|
|
704
|
-
background-color: var(--ffe-farge-svart);
|
|
705
|
-
}
|
|
706
|
-
}
|
|
586
|
+
&--bg-secondary {
|
|
587
|
+
background-color: var(--ffe-color-surface-secondary-default);
|
|
707
588
|
}
|
|
708
589
|
|
|
709
|
-
&--bg-
|
|
710
|
-
background-color: var(--ffe-
|
|
711
|
-
.regard-color-scheme-preference & {
|
|
712
|
-
@media (prefers-color-scheme: dark) {
|
|
713
|
-
background-color: var(--ffe-farge-svart);
|
|
714
|
-
}
|
|
715
|
-
}
|
|
716
|
-
}
|
|
717
|
-
&--bg-syrin-70 {
|
|
718
|
-
background-color: var(--ffe-farge-syrin-70);
|
|
719
|
-
.regard-color-scheme-preference & {
|
|
720
|
-
@media (prefers-color-scheme: dark) {
|
|
721
|
-
background-color: var(--ffe-farge-svart);
|
|
722
|
-
}
|
|
723
|
-
}
|
|
724
|
-
}
|
|
725
|
-
&--bg-syrin-30 {
|
|
726
|
-
background-color: var(--ffe-farge-syrin-30);
|
|
727
|
-
.regard-color-scheme-preference & {
|
|
728
|
-
@media (prefers-color-scheme: dark) {
|
|
729
|
-
background-color: var(--ffe-farge-svart);
|
|
730
|
-
}
|
|
731
|
-
}
|
|
732
|
-
}
|
|
733
|
-
|
|
734
|
-
&--bg-vann {
|
|
735
|
-
background-color: var(--ffe-farge-vann);
|
|
736
|
-
color: var(--ffe-farge-hvit);
|
|
737
|
-
.regard-color-scheme-preference & {
|
|
738
|
-
@media (prefers-color-scheme: dark) {
|
|
739
|
-
background-color: var(--ffe-farge-svart);
|
|
740
|
-
}
|
|
741
|
-
}
|
|
742
|
-
}
|
|
743
|
-
&--bg-vann-30 {
|
|
744
|
-
background-color: var(--ffe-farge-vann-30);
|
|
745
|
-
.regard-color-scheme-preference & {
|
|
746
|
-
@media (prefers-color-scheme: dark) {
|
|
747
|
-
background-color: var(--ffe-farge-svart);
|
|
748
|
-
}
|
|
749
|
-
}
|
|
750
|
-
}
|
|
751
|
-
&--bg-fjell {
|
|
752
|
-
background-color: var(--ffe-farge-fjell);
|
|
753
|
-
color: var(--ffe-farge-hvit);
|
|
754
|
-
.regard-color-scheme-preference & {
|
|
755
|
-
@media (prefers-color-scheme: dark) {
|
|
756
|
-
background-color: var(--ffe-farge-svart);
|
|
757
|
-
}
|
|
758
|
-
}
|
|
759
|
-
}
|
|
760
|
-
|
|
761
|
-
&--bg-hvit {
|
|
762
|
-
background-color: var(--ffe-farge-hvit);
|
|
763
|
-
.regard-color-scheme-preference & {
|
|
764
|
-
@media (prefers-color-scheme: dark) {
|
|
765
|
-
background-color: var(--ffe-farge-svart);
|
|
766
|
-
}
|
|
767
|
-
}
|
|
768
|
-
}
|
|
769
|
-
|
|
770
|
-
&--bg-dark-svart {
|
|
771
|
-
.regard-color-scheme-preference & {
|
|
772
|
-
@media (prefers-color-scheme: dark) {
|
|
773
|
-
background-color: var(--ffe-farge-svart);
|
|
774
|
-
}
|
|
775
|
-
}
|
|
776
|
-
}
|
|
777
|
-
|
|
778
|
-
&--bg-dark-natt {
|
|
779
|
-
.regard-color-scheme-preference & {
|
|
780
|
-
@media (prefers-color-scheme: dark) {
|
|
781
|
-
background-color: var(--ffe-farge-natt);
|
|
782
|
-
}
|
|
783
|
-
}
|
|
784
|
-
}
|
|
785
|
-
|
|
786
|
-
&--bg-dark-koksgraa {
|
|
787
|
-
.regard-color-scheme-preference & {
|
|
788
|
-
@media (prefers-color-scheme: dark) {
|
|
789
|
-
background-color: var(--ffe-farge-koksgraa);
|
|
790
|
-
}
|
|
791
|
-
}
|
|
590
|
+
&--bg-tertiary {
|
|
591
|
+
background-color: var(--ffe-color-surface-tertiary-default);
|
|
792
592
|
}
|
|
793
593
|
|
|
794
594
|
&--center-text {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@sb1/ffe-grid",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "16.0.1",
|
|
4
4
|
"description": "A grid component for use within the FFE framework",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"ffe"
|
|
@@ -21,13 +21,13 @@
|
|
|
21
21
|
"build": "lessc less/ffe-grid.less css/ffe-grid.css --autoprefix"
|
|
22
22
|
},
|
|
23
23
|
"dependencies": {
|
|
24
|
-
"@sb1/ffe-core": "^
|
|
24
|
+
"@sb1/ffe-core": "^30.0.1"
|
|
25
25
|
},
|
|
26
26
|
"devDependencies": {
|
|
27
|
-
"@sb1/ffe-buildtool": "^0.
|
|
27
|
+
"@sb1/ffe-buildtool": "^0.10.0"
|
|
28
28
|
},
|
|
29
29
|
"publishConfig": {
|
|
30
30
|
"access": "public"
|
|
31
31
|
},
|
|
32
|
-
"gitHead": "
|
|
32
|
+
"gitHead": "abedc811686859a152f05182aeece4ac8667949a"
|
|
33
33
|
}
|