@sb1/ffe-grid 12.1.13 → 13.0.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.
- package/README.md +42 -90
- package/less/ffe-grid.less +131 -364
- package/package.json +3 -3
package/README.md
CHANGED
|
@@ -38,11 +38,13 @@ It's easier to explain with an example:
|
|
|
38
38
|
```html
|
|
39
39
|
<div class="ffe-grid">
|
|
40
40
|
<div class="ffe-grid__row">
|
|
41
|
-
<div
|
|
41
|
+
<div
|
|
42
|
+
class="
|
|
42
43
|
ffe-grid__col--sm-12
|
|
43
44
|
ffe-grid__col--md-6
|
|
44
45
|
ffe-grid__col--lg-3
|
|
45
|
-
"
|
|
46
|
+
"
|
|
47
|
+
>
|
|
46
48
|
<!-- content -->
|
|
47
49
|
</div>
|
|
48
50
|
</div>
|
|
@@ -56,131 +58,81 @@ You only have to specify one of these if you want - each column defaults to a 10
|
|
|
56
58
|
for viewports that are not specified (i.e. `.ffe-grid__col--md-6` will be 100 % wide on small
|
|
57
59
|
devices, and 50 % on medium and large screens).
|
|
58
60
|
|
|
59
|
-
You can set the colum size to 0, e.g. `ffe-grid__col--md-0`. This enabled you to remove/add columns for specific screen-sizes.
|
|
60
|
-
See the "Disappearing columns example" in the example html for more details.
|
|
61
|
-
|
|
62
61
|
### Offset
|
|
63
62
|
|
|
64
|
-
The pattern is like so:
|
|
63
|
+
The pattern is like so: `.ffe-grid__col--{size}-offset-{num-of-cols}`
|
|
65
64
|
|
|
66
65
|
The offsets work in a similar fashion to the width specification modifiers. Each breakpoint
|
|
67
66
|
can have its own offset if needed.
|
|
68
67
|
|
|
69
|
-
###
|
|
70
|
-
|
|
71
|
-
#### `.ffe-grid--condensed`
|
|
68
|
+
### Margin and padding
|
|
72
69
|
|
|
73
|
-
|
|
70
|
+
Margin and padding in the top and bottom of grid rows can be applied using the margin and padding modifiers:
|
|
74
71
|
|
|
75
|
-
|
|
72
|
+
`.ffe-grid__row--padding-{size}`
|
|
73
|
+
`.ffe-grid__row--margin-{size}`
|
|
76
74
|
|
|
77
|
-
|
|
75
|
+
Available sizes correspond to the [ffe spacing variables](https://design.sparebank1.no/profil/spacing/). For example, the required modifier to add a `4xl` (80px) margin to a row is `ffe-grid__row-padding-4xl`.
|
|
78
76
|
|
|
79
|
-
|
|
77
|
+
By default, rows have no padding or margin.
|
|
80
78
|
|
|
81
|
-
|
|
79
|
+
### Gap
|
|
82
80
|
|
|
83
|
-
|
|
81
|
+
The gutter/gap between columns can be controlled using the `.ffe-grid--gap-{size}` modifier. Available sizes correspond to the [ffe spacing variables](https://design.sparebank1.no/profil/spacing/), however the largest available size is `lg`.
|
|
84
82
|
|
|
85
|
-
|
|
83
|
+
The default gap is 16px, equivalent to `.ffe-grid--gap-sm`.
|
|
86
84
|
|
|
87
|
-
|
|
85
|
+
### Background colors
|
|
88
86
|
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
Use a background colour on the rows. This requires that the children is wrapped in `.ffe-grid__row-wrapper`
|
|
87
|
+
The background color of rows can be changed using modifiers
|
|
92
88
|
|
|
93
89
|
```html
|
|
94
|
-
<div class="ffe-grid__row ffe-grid__row--bg-sand
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
</div>
|
|
102
|
-
</div>
|
|
90
|
+
<div class="ffe-grid__row ffe-grid__row--bg-sand">
|
|
91
|
+
<div class="ffe-grid__col--md-6">
|
|
92
|
+
<!-- content -->
|
|
93
|
+
</div>
|
|
94
|
+
<div class="ffe-grid__col--md-6">
|
|
95
|
+
<!-- content -->
|
|
96
|
+
</div>
|
|
103
97
|
</div>
|
|
104
98
|
```
|
|
105
99
|
|
|
106
|
-
#### `.ffe-grid__row--bg-
|
|
107
|
-
|
|
108
|
-
Adds the `@ffe-blue-pale` colour as a background for the row
|
|
109
|
-
|
|
110
|
-
#### `.ffe-grid__row--bg-blue-cobalt`
|
|
111
|
-
|
|
112
|
-
Adds the `@ffe-blue-cobalt` colour as a background for the row
|
|
113
|
-
|
|
114
|
-
#### `.ffe-grid__row--bg-blue-ice`
|
|
115
|
-
|
|
116
|
-
Adds the `@ffe-blue-ice` colour as a background for the row
|
|
117
|
-
|
|
118
|
-
#### `.ffe-grid__row--bg-purple-magenta`
|
|
119
|
-
|
|
120
|
-
Adds the `@ffe-purple-magenta` colour as a background for the row
|
|
121
|
-
|
|
122
|
-
#### `.ffe-grid__row--bg-green-mint`
|
|
100
|
+
#### `.ffe-grid__row--bg-frost-30`
|
|
123
101
|
|
|
124
|
-
|
|
102
|
+
Sets the row background color to `@ffe-farge-frost-30`
|
|
125
103
|
|
|
126
104
|
#### `.ffe-grid__row--bg-sand`
|
|
127
105
|
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
#### `.ffe-grid__row--bg-grey-cloud`
|
|
131
|
-
|
|
132
|
-
Adds the `@ffe-grey-cloud` colour as a background for the row
|
|
133
|
-
|
|
134
|
-
### Flexbox
|
|
135
|
-
|
|
136
|
-
Since the grid is based on the flexbox layout model, there's a few extra modifiers that's available
|
|
137
|
-
to you.
|
|
138
|
-
|
|
139
|
-
#### Rows
|
|
140
|
-
|
|
141
|
-
##### `.ffe-grid__row--reverse`
|
|
142
|
-
|
|
143
|
-
Reverses the grid columns so that they're laid out right to left instead
|
|
144
|
-
|
|
145
|
-
#### Columns
|
|
146
|
-
|
|
147
|
-
##### `.ffe-grid__col--horizontal`
|
|
148
|
-
|
|
149
|
-
Aligns the content of a cell horizontally
|
|
150
|
-
|
|
151
|
-
##### `.ffe-grid__col--reverse`
|
|
152
|
-
|
|
153
|
-
Aligns the content of a cell in the reverse order
|
|
154
|
-
(Can be used with `--horizontal` for a reversed horizontal order)
|
|
106
|
+
Sets the row background color to `@ffe-farge-sand`
|
|
155
107
|
|
|
156
|
-
|
|
108
|
+
#### `.ffe-grid__row--bg-sand-70`
|
|
157
109
|
|
|
158
|
-
|
|
110
|
+
Sets the row background color to `@ffe-farge-sand-70`
|
|
159
111
|
|
|
160
|
-
|
|
112
|
+
#### `.ffe-grid__row--bg-sand-30`
|
|
161
113
|
|
|
162
|
-
|
|
114
|
+
Sets the row background color to `@ffe-farge-sand-30`
|
|
163
115
|
|
|
164
|
-
|
|
116
|
+
#### `.ffe-grid__row--bg-syrin-70`
|
|
165
117
|
|
|
166
|
-
|
|
118
|
+
Sets the row background color to `@ffe-farge-syrin-70`
|
|
167
119
|
|
|
168
|
-
|
|
120
|
+
#### `.ffe-grid__row--bg-syrin-30`
|
|
169
121
|
|
|
170
|
-
|
|
122
|
+
Sets the row background color to `@ffe-farge-syrin-30`
|
|
171
123
|
|
|
172
|
-
|
|
124
|
+
#### `.ffe-grid__row--bg-vann`
|
|
173
125
|
|
|
174
|
-
|
|
126
|
+
Sets the row background color to `@ffe-farge-vann`
|
|
175
127
|
|
|
176
|
-
|
|
128
|
+
#### `.ffe-grid__row--bg-vann-30`
|
|
177
129
|
|
|
178
|
-
|
|
130
|
+
Sets the row background color to `@ffe-farge-vann-30`
|
|
179
131
|
|
|
180
|
-
|
|
132
|
+
#### `.ffe-grid__row--bg-fjell`
|
|
181
133
|
|
|
182
|
-
|
|
134
|
+
Sets the row background color to `@ffe-farge-fjell`
|
|
183
135
|
|
|
184
|
-
|
|
136
|
+
#### `.ffe-grid__row--bg-hvit`
|
|
185
137
|
|
|
186
|
-
|
|
138
|
+
Sets the row background color to `@ffe-farge-hvit`
|
package/less/ffe-grid.less
CHANGED
|
@@ -1,186 +1,134 @@
|
|
|
1
|
-
// Grid
|
|
2
|
-
//
|
|
3
|
-
// Markup:
|
|
4
|
-
// <div class="ffe-grid">
|
|
5
|
-
// <div class="ffe-grid__row">
|
|
6
|
-
// <div class="ffe-grid__col--lg-3 ffe-grid__col--md-4 ffe-grid__col--sm-6">
|
|
7
|
-
// 3 kolonner bred på store skjermer
|
|
8
|
-
// </div>
|
|
9
|
-
// <div class="ffe-grid__col--lg-3 ffe-grid__col--md-4 ffe-grid__col--sm-6">
|
|
10
|
-
// 4 kolonner bred på medium skjermer (tablet)
|
|
11
|
-
// </div>
|
|
12
|
-
// <div class="ffe-grid__col--lg-3 ffe-grid__col--md-4 ffe-grid__col--sm-6">
|
|
13
|
-
// 6 kolonner bred på små skjermer (mobil)
|
|
14
|
-
// </div>
|
|
15
|
-
// <div class="ffe-grid__col--lg-3 ffe-grid__col--md-4 ffe-grid__col--sm-6">
|
|
16
|
-
// Litt innhold
|
|
17
|
-
// </div>
|
|
18
|
-
// </div>
|
|
19
|
-
// </div>
|
|
20
|
-
//
|
|
21
|
-
// --condensed - Grid with less internal spacing
|
|
22
|
-
// --inline - Grid with no internal spacing
|
|
23
|
-
//
|
|
24
|
-
// Styleguide ffe-grid.grid.1
|
|
25
|
-
|
|
26
|
-
// Grid row
|
|
27
|
-
//
|
|
28
|
-
// Markup:
|
|
29
|
-
// <div class="ffe-grid">
|
|
30
|
-
// <div class="ffe-grid__row ffe-grid__row{{modifier_class}}">
|
|
31
|
-
// <div class="ffe-grid__col--lg-6 ffe-grid__col--md-6 ffe-grid__col--sm-12">
|
|
32
|
-
// 6 kolonner bred på store og medium skjermer
|
|
33
|
-
// </div>
|
|
34
|
-
// <div class="ffe-grid__col--lg-6 ffe-grid__col--md-6 ffe-grid__col--sm-12">
|
|
35
|
-
// 12 kolonner bred på små skjermer
|
|
36
|
-
// </div>
|
|
37
|
-
// </div>
|
|
38
|
-
// </div>
|
|
39
|
-
//
|
|
40
|
-
// --reverse - Reverse order
|
|
41
|
-
// --top-padding - Add top padding
|
|
42
|
-
//
|
|
43
|
-
// Styleguide ffe-grid.grid.2
|
|
44
|
-
|
|
45
|
-
// Grid row with background color
|
|
46
|
-
//
|
|
47
|
-
// Markup:
|
|
48
|
-
// <div class="ffe-grid">
|
|
49
|
-
// <div class="ffe-grid__row ffe-grid__row{{modifier_class}}">
|
|
50
|
-
// <div class="ffe-grid__row-wrapper">
|
|
51
|
-
// <div class="ffe-grid__col--lg-6 ffe-grid__col--md-6 ffe-grid__col--sm-12">
|
|
52
|
-
// 6 kolonner bred på store og medium skjermer
|
|
53
|
-
// </div>
|
|
54
|
-
// <div class="ffe-grid__col--lg-6 ffe-grid__col--md-6 ffe-grid__col--sm-12">
|
|
55
|
-
// 12 kolonner bred på små skjermer
|
|
56
|
-
// </div>
|
|
57
|
-
// </div>
|
|
58
|
-
// </div>
|
|
59
|
-
// </div>
|
|
60
|
-
//
|
|
61
|
-
// --bg-blue-ice - Blue ice background
|
|
62
|
-
// --bg-blue-pale - Blue pale background
|
|
63
|
-
// --bg-green-mint - Green mint background
|
|
64
|
-
// --bg-sand - Sand background
|
|
65
|
-
// --bg-grey-cloud - Grey cloud background
|
|
66
|
-
// --bg-grey-warm - Grey warm background
|
|
67
|
-
// --bg-orange-salmon - Orange salmon background
|
|
68
|
-
// --bg-red - Red background
|
|
69
|
-
// --bg-blue-sky - Blue sky background
|
|
70
|
-
// --bg-white - White background
|
|
71
|
-
//
|
|
72
|
-
// Styleguide ffe-grid.grid.3
|
|
73
|
-
|
|
74
|
-
// Grid column
|
|
75
|
-
//
|
|
76
|
-
// Markup:
|
|
77
|
-
// <div class="ffe-grid">
|
|
78
|
-
// <div class="ffe-grid__row ffe-grid__row">
|
|
79
|
-
// <div class="ffe-grid__col--lg-6 ffe-grid__col--md-6 ffe-grid__col--sm-12 ffe-grid__col{{modifier_class}}">
|
|
80
|
-
// 6 kolonner bred på store og medium skjermer
|
|
81
|
-
// </div>
|
|
82
|
-
// <div class="ffe-grid__col--lg-6 ffe-grid__col--md-6 ffe-grid__col--sm-12 ffe-grid__col{{modifier_class}}">
|
|
83
|
-
// 12 kolonner bred på små skjermer
|
|
84
|
-
// </div>
|
|
85
|
-
// </div>
|
|
86
|
-
// </div>
|
|
87
|
-
//
|
|
88
|
-
// --bg-blue-ice - Blue ice background
|
|
89
|
-
// --bg-blue-pale - Blue pale background
|
|
90
|
-
// --bg-green-mint - Green mint background
|
|
91
|
-
// --bg-sand - Sand background
|
|
92
|
-
// --bg-grey-cloud - Grey cloud background
|
|
93
|
-
// --bg-grey-warm - Grey warm background
|
|
94
|
-
// --bg-orange-salmon - Orange salmon background
|
|
95
|
-
// --bg-red - Red background
|
|
96
|
-
// --bg-blue-sky - Blue sky background
|
|
97
|
-
// --bg-white - White background
|
|
98
|
-
// --horizontal - Set column direction to horizontal
|
|
99
|
-
// --start - Align content to start
|
|
100
|
-
// --center - Center contents
|
|
101
|
-
// --end - Align contents to end
|
|
102
|
-
// --top - Align contents to top
|
|
103
|
-
// --middle - Align contents to middle
|
|
104
|
-
// --bottom - Align contents to bottom
|
|
105
|
-
// --reverse - Reverse order
|
|
106
|
-
// --around - Space around
|
|
107
|
-
// --between - Space between
|
|
108
|
-
// --center-text - Aligns text to center
|
|
109
|
-
// --no-bottom-padding - Removes bottom padding
|
|
110
|
-
//
|
|
111
|
-
// Styleguide ffe-grid.grid.4
|
|
112
|
-
|
|
113
|
-
// Variables
|
|
114
|
-
@ffe-grid-columns: 12;
|
|
115
|
-
@ffe-grid-width: 1280px;
|
|
116
|
-
@ffe-grid-gutter-sm: @ffe-spacing-sm;
|
|
117
|
-
@ffe-grid-gutter-lg: @ffe-spacing-xl;
|
|
118
|
-
@ffe-condensed-grid-gutter-sm: @ffe-spacing-xs;
|
|
119
|
-
@ffe-condensed-grid-gutter-lg: @ffe-spacing-sm;
|
|
120
|
-
|
|
121
1
|
// Mixins
|
|
122
|
-
.create-column(@size, @total, @current:
|
|
2
|
+
.create-column(@size, @total, @current: 1) when (@current <= @total) {
|
|
123
3
|
.ffe-grid__col--@{size}-@{current} {
|
|
124
|
-
|
|
125
|
-
max-width: ((@current * 100%) / @total);
|
|
126
|
-
|
|
127
|
-
& when (@current = 0) {
|
|
128
|
-
display: none;
|
|
129
|
-
}
|
|
130
|
-
& when (@current > 0) {
|
|
131
|
-
display: flex;
|
|
132
|
-
}
|
|
4
|
+
grid-column: auto / span (@current);
|
|
133
5
|
}
|
|
134
6
|
|
|
7
|
+
.create-column(@size, @total, @current + 1);
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
.create-column-offset(@size, @total, @current: 1) when (@current <= @total) {
|
|
135
11
|
.ffe-grid__col--@{size}-offset-@{current} {
|
|
136
|
-
|
|
12
|
+
grid-column-start: ((@current) + 1);
|
|
137
13
|
}
|
|
138
14
|
|
|
139
|
-
.create-column(@size, @total, @current + 1);
|
|
15
|
+
.create-column-offset(@size, @total, @current + 1);
|
|
140
16
|
}
|
|
141
17
|
|
|
142
|
-
.ffe-
|
|
143
|
-
display:
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
margin: 0;
|
|
147
|
-
padding: @ffe-grid-gutter-sm 0 0;
|
|
148
|
-
width: 100%;
|
|
18
|
+
.ffe-grid__row {
|
|
19
|
+
display: grid;
|
|
20
|
+
gap: @ffe-spacing-sm;
|
|
21
|
+
grid-template-columns: repeat(12, 1fr);
|
|
149
22
|
|
|
150
|
-
|
|
151
|
-
|
|
23
|
+
.ffe-grid--gap-none & {
|
|
24
|
+
gap: 0;
|
|
152
25
|
}
|
|
153
26
|
|
|
154
|
-
|
|
155
|
-
|
|
27
|
+
.ffe-grid--gap-2xs & {
|
|
28
|
+
gap: @ffe-spacing-2xs;
|
|
29
|
+
}
|
|
156
30
|
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
}
|
|
31
|
+
.ffe-grid--gap-xs & {
|
|
32
|
+
gap: @ffe-spacing-xs;
|
|
160
33
|
}
|
|
161
34
|
|
|
162
|
-
|
|
163
|
-
|
|
35
|
+
.ffe-grid--gap-sm & {
|
|
36
|
+
gap: @ffe-spacing-sm;
|
|
164
37
|
}
|
|
165
|
-
}
|
|
166
38
|
|
|
167
|
-
.ffe-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
39
|
+
.ffe-grid--gap-md & {
|
|
40
|
+
gap: @ffe-spacing-md;
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
.ffe-grid--gap-lg & {
|
|
44
|
+
gap: @ffe-spacing-lg;
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
&--padding-2xs {
|
|
48
|
+
padding: @ffe-spacing-2xs 0;
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
&--padding-xs {
|
|
52
|
+
padding: @ffe-spacing-xs 0;
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
&--padding-sm {
|
|
56
|
+
padding: @ffe-spacing-sm 0;
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
&--padding-md {
|
|
60
|
+
padding: @ffe-spacing-md 0;
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
&--padding-lg {
|
|
64
|
+
padding: @ffe-spacing-lg 0;
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
&--padding-xl {
|
|
68
|
+
padding: @ffe-spacing-xl 0;
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
&--padding-2xl {
|
|
72
|
+
padding: @ffe-spacing-2xl 0;
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
&--padding-3xl {
|
|
76
|
+
padding: @ffe-spacing-3xl 0;
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
&--padding-4xl {
|
|
80
|
+
padding: @ffe-spacing-4xl 0;
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
&--padding-5xl {
|
|
84
|
+
padding: @ffe-spacing-5xl 0;
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
&--margin-2xs {
|
|
88
|
+
margin: @ffe-spacing-2xs 0;
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
&--margin-xs {
|
|
92
|
+
margin: @ffe-spacing-xs 0;
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
&--margin-sm {
|
|
96
|
+
margin: @ffe-spacing-sm 0;
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
&--margin-md {
|
|
100
|
+
margin: @ffe-spacing-md 0;
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
&--margin-lg {
|
|
104
|
+
margin: @ffe-spacing-lg 0;
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
&--margin-xl {
|
|
108
|
+
margin: @ffe-spacing-xl 0;
|
|
109
|
+
}
|
|
110
|
+
|
|
111
|
+
&--margin-2xl {
|
|
112
|
+
margin: @ffe-spacing-2xl 0;
|
|
113
|
+
}
|
|
174
114
|
|
|
175
|
-
|
|
176
|
-
margin
|
|
177
|
-
margin-right: (@ffe-grid-gutter-lg / 2 * -1);
|
|
115
|
+
&--margin-3xl {
|
|
116
|
+
margin: @ffe-spacing-3xl 0;
|
|
178
117
|
}
|
|
118
|
+
|
|
119
|
+
&--margin-4xl {
|
|
120
|
+
margin: @ffe-spacing-4xl 0;
|
|
121
|
+
}
|
|
122
|
+
|
|
123
|
+
&--margin-5xl {
|
|
124
|
+
margin: @ffe-spacing-5xl 0;
|
|
125
|
+
}
|
|
126
|
+
|
|
179
127
|
&--bg-frost-30 {
|
|
180
128
|
background-color: @ffe-farge-frost-30;
|
|
181
129
|
.native & {
|
|
182
130
|
@media (prefers-color-scheme: dark) {
|
|
183
|
-
background-color: @ffe-
|
|
131
|
+
background-color: @ffe-farge-svart;
|
|
184
132
|
}
|
|
185
133
|
}
|
|
186
134
|
}
|
|
@@ -189,7 +137,7 @@
|
|
|
189
137
|
background-color: @ffe-farge-sand;
|
|
190
138
|
.native & {
|
|
191
139
|
@media (prefers-color-scheme: dark) {
|
|
192
|
-
background-color: @ffe-
|
|
140
|
+
background-color: @ffe-farge-svart;
|
|
193
141
|
}
|
|
194
142
|
}
|
|
195
143
|
}
|
|
@@ -198,7 +146,7 @@
|
|
|
198
146
|
background-color: @ffe-farge-sand-70;
|
|
199
147
|
.native & {
|
|
200
148
|
@media (prefers-color-scheme: dark) {
|
|
201
|
-
background-color: @ffe-
|
|
149
|
+
background-color: @ffe-farge-svart;
|
|
202
150
|
}
|
|
203
151
|
}
|
|
204
152
|
}
|
|
@@ -207,7 +155,7 @@
|
|
|
207
155
|
background-color: @ffe-farge-sand-30;
|
|
208
156
|
.native & {
|
|
209
157
|
@media (prefers-color-scheme: dark) {
|
|
210
|
-
background-color: @ffe-
|
|
158
|
+
background-color: @ffe-farge-svart;
|
|
211
159
|
}
|
|
212
160
|
}
|
|
213
161
|
}
|
|
@@ -215,7 +163,7 @@
|
|
|
215
163
|
background-color: @ffe-farge-syrin-70;
|
|
216
164
|
.native & {
|
|
217
165
|
@media (prefers-color-scheme: dark) {
|
|
218
|
-
background-color: @ffe-
|
|
166
|
+
background-color: @ffe-farge-svart;
|
|
219
167
|
}
|
|
220
168
|
}
|
|
221
169
|
}
|
|
@@ -223,7 +171,7 @@
|
|
|
223
171
|
background-color: @ffe-farge-syrin-30;
|
|
224
172
|
.native & {
|
|
225
173
|
@media (prefers-color-scheme: dark) {
|
|
226
|
-
background-color: @ffe-
|
|
174
|
+
background-color: @ffe-farge-svart;
|
|
227
175
|
}
|
|
228
176
|
}
|
|
229
177
|
}
|
|
@@ -233,7 +181,7 @@
|
|
|
233
181
|
color: @ffe-farge-hvit;
|
|
234
182
|
.native & {
|
|
235
183
|
@media (prefers-color-scheme: dark) {
|
|
236
|
-
background-color: @ffe-
|
|
184
|
+
background-color: @ffe-farge-svart;
|
|
237
185
|
}
|
|
238
186
|
}
|
|
239
187
|
}
|
|
@@ -241,7 +189,7 @@
|
|
|
241
189
|
background-color: @ffe-farge-vann-30;
|
|
242
190
|
.native & {
|
|
243
191
|
@media (prefers-color-scheme: dark) {
|
|
244
|
-
background-color: @ffe-
|
|
192
|
+
background-color: @ffe-farge-svart;
|
|
245
193
|
}
|
|
246
194
|
}
|
|
247
195
|
}
|
|
@@ -251,7 +199,7 @@
|
|
|
251
199
|
color: @ffe-farge-hvit;
|
|
252
200
|
.native & {
|
|
253
201
|
@media (prefers-color-scheme: dark) {
|
|
254
|
-
background-color: @ffe-
|
|
202
|
+
background-color: @ffe-farge-svart;
|
|
255
203
|
}
|
|
256
204
|
}
|
|
257
205
|
}
|
|
@@ -260,102 +208,7 @@
|
|
|
260
208
|
background-color: @ffe-farge-hvit;
|
|
261
209
|
.native & {
|
|
262
210
|
@media (prefers-color-scheme: dark) {
|
|
263
|
-
background-color: @ffe-
|
|
264
|
-
}
|
|
265
|
-
}
|
|
266
|
-
}
|
|
267
|
-
|
|
268
|
-
&--reverse,
|
|
269
|
-
&--reverse > &-wrapper {
|
|
270
|
-
flex-direction: row-reverse;
|
|
271
|
-
flex-wrap: wrap-reverse;
|
|
272
|
-
}
|
|
273
|
-
|
|
274
|
-
&--top-padding {
|
|
275
|
-
padding-top: @ffe-grid-gutter-sm;
|
|
276
|
-
|
|
277
|
-
@media (min-width: @breakpoint-lg) {
|
|
278
|
-
padding-top: @ffe-grid-gutter-lg;
|
|
279
|
-
}
|
|
280
|
-
}
|
|
281
|
-
}
|
|
282
|
-
|
|
283
|
-
[class*='ffe-grid__row--bg-'] {
|
|
284
|
-
max-width: 100%;
|
|
285
|
-
}
|
|
286
|
-
|
|
287
|
-
[class^='ffe-grid__col'] > * {
|
|
288
|
-
max-width: 100%;
|
|
289
|
-
}
|
|
290
|
-
|
|
291
|
-
.ffe-grid__row-wrapper {
|
|
292
|
-
&:extend(.ffe-grid__row);
|
|
293
|
-
|
|
294
|
-
margin: 0 auto;
|
|
295
|
-
}
|
|
296
|
-
|
|
297
|
-
[class*='ffe-grid__col'] {
|
|
298
|
-
flex: 1 1;
|
|
299
|
-
flex-direction: column;
|
|
300
|
-
max-width: 100%;
|
|
301
|
-
padding: 0 (@ffe-grid-gutter-sm / 2) @ffe-grid-gutter-sm;
|
|
302
|
-
|
|
303
|
-
@media (min-width: @breakpoint-lg) {
|
|
304
|
-
padding: 0 (@ffe-grid-gutter-lg / 2) @ffe-grid-gutter-lg;
|
|
305
|
-
}
|
|
306
|
-
|
|
307
|
-
.ffe-grid--condensed & {
|
|
308
|
-
padding: 0 (@ffe-condensed-grid-gutter-sm / 2)
|
|
309
|
-
@ffe-condensed-grid-gutter-sm;
|
|
310
|
-
|
|
311
|
-
@media (min-width: @breakpoint-lg) {
|
|
312
|
-
padding: 0 (@ffe-condensed-grid-gutter-lg / 2)
|
|
313
|
-
@ffe-condensed-grid-gutter-lg;
|
|
314
|
-
}
|
|
315
|
-
}
|
|
316
|
-
|
|
317
|
-
.ffe-grid--inline & {
|
|
318
|
-
padding: 0;
|
|
319
|
-
}
|
|
320
|
-
}
|
|
321
|
-
[class*='ffe-grid__col--bg-'] {
|
|
322
|
-
@media (min-width: @breakpoint-lg) {
|
|
323
|
-
position: relative;
|
|
324
|
-
|
|
325
|
-
&::before,
|
|
326
|
-
&::after {
|
|
327
|
-
background-color: inherit;
|
|
328
|
-
bottom: 0;
|
|
329
|
-
content: '';
|
|
330
|
-
position: absolute;
|
|
331
|
-
top: 0;
|
|
332
|
-
width: (@ffe-grid-gutter-lg / 2);
|
|
333
|
-
}
|
|
334
|
-
&::before {
|
|
335
|
-
left: -(@ffe-grid-gutter-lg / 2);
|
|
336
|
-
}
|
|
337
|
-
&::after {
|
|
338
|
-
right: -(@ffe-grid-gutter-lg / 2);
|
|
339
|
-
}
|
|
340
|
-
.ffe-grid--condensed & {
|
|
341
|
-
&::before,
|
|
342
|
-
&::after {
|
|
343
|
-
bottom: 0;
|
|
344
|
-
position: absolute;
|
|
345
|
-
top: 0;
|
|
346
|
-
width: (@ffe-condensed-grid-gutter-lg / 2);
|
|
347
|
-
}
|
|
348
|
-
&::before {
|
|
349
|
-
left: -(@ffe-condensed-grid-gutter-lg / 2);
|
|
350
|
-
}
|
|
351
|
-
&::after {
|
|
352
|
-
right: -(@ffe-condensed-grid-gutter-lg / 2);
|
|
353
|
-
}
|
|
354
|
-
}
|
|
355
|
-
.ffe-grid--inline & {
|
|
356
|
-
&::before,
|
|
357
|
-
&::after {
|
|
358
|
-
display: none;
|
|
211
|
+
background-color: @ffe-farge-svart;
|
|
359
212
|
}
|
|
360
213
|
}
|
|
361
214
|
}
|
|
@@ -366,7 +219,7 @@
|
|
|
366
219
|
background-color: @ffe-farge-frost-30;
|
|
367
220
|
.native & {
|
|
368
221
|
@media (prefers-color-scheme: dark) {
|
|
369
|
-
background-color: @ffe-
|
|
222
|
+
background-color: @ffe-farge-svart;
|
|
370
223
|
}
|
|
371
224
|
}
|
|
372
225
|
}
|
|
@@ -375,7 +228,7 @@
|
|
|
375
228
|
background-color: @ffe-farge-sand;
|
|
376
229
|
.native & {
|
|
377
230
|
@media (prefers-color-scheme: dark) {
|
|
378
|
-
background-color: @ffe-
|
|
231
|
+
background-color: @ffe-farge-svart;
|
|
379
232
|
}
|
|
380
233
|
}
|
|
381
234
|
}
|
|
@@ -384,7 +237,7 @@
|
|
|
384
237
|
background-color: @ffe-farge-sand-70;
|
|
385
238
|
.native & {
|
|
386
239
|
@media (prefers-color-scheme: dark) {
|
|
387
|
-
background-color: @ffe-
|
|
240
|
+
background-color: @ffe-farge-svart;
|
|
388
241
|
}
|
|
389
242
|
}
|
|
390
243
|
}
|
|
@@ -393,7 +246,7 @@
|
|
|
393
246
|
background-color: @ffe-farge-sand-30;
|
|
394
247
|
.native & {
|
|
395
248
|
@media (prefers-color-scheme: dark) {
|
|
396
|
-
background-color: @ffe-
|
|
249
|
+
background-color: @ffe-farge-svart;
|
|
397
250
|
}
|
|
398
251
|
}
|
|
399
252
|
}
|
|
@@ -401,7 +254,7 @@
|
|
|
401
254
|
background-color: @ffe-farge-syrin-70;
|
|
402
255
|
.native & {
|
|
403
256
|
@media (prefers-color-scheme: dark) {
|
|
404
|
-
background-color: @ffe-
|
|
257
|
+
background-color: @ffe-farge-svart;
|
|
405
258
|
}
|
|
406
259
|
}
|
|
407
260
|
}
|
|
@@ -409,7 +262,7 @@
|
|
|
409
262
|
background-color: @ffe-farge-syrin-30;
|
|
410
263
|
.native & {
|
|
411
264
|
@media (prefers-color-scheme: dark) {
|
|
412
|
-
background-color: @ffe-
|
|
265
|
+
background-color: @ffe-farge-svart;
|
|
413
266
|
}
|
|
414
267
|
}
|
|
415
268
|
}
|
|
@@ -419,7 +272,7 @@
|
|
|
419
272
|
color: @ffe-farge-hvit;
|
|
420
273
|
.native & {
|
|
421
274
|
@media (prefers-color-scheme: dark) {
|
|
422
|
-
background-color: @ffe-
|
|
275
|
+
background-color: @ffe-farge-svart;
|
|
423
276
|
}
|
|
424
277
|
}
|
|
425
278
|
}
|
|
@@ -427,7 +280,7 @@
|
|
|
427
280
|
background-color: @ffe-farge-vann-30;
|
|
428
281
|
.native & {
|
|
429
282
|
@media (prefers-color-scheme: dark) {
|
|
430
|
-
background-color: @ffe-
|
|
283
|
+
background-color: @ffe-farge-svart;
|
|
431
284
|
}
|
|
432
285
|
}
|
|
433
286
|
}
|
|
@@ -436,7 +289,7 @@
|
|
|
436
289
|
color: @ffe-farge-hvit;
|
|
437
290
|
.native & {
|
|
438
291
|
@media (prefers-color-scheme: dark) {
|
|
439
|
-
background-color: @ffe-
|
|
292
|
+
background-color: @ffe-farge-svart;
|
|
440
293
|
}
|
|
441
294
|
}
|
|
442
295
|
}
|
|
@@ -445,116 +298,30 @@
|
|
|
445
298
|
background-color: @ffe-farge-hvit;
|
|
446
299
|
.native & {
|
|
447
300
|
@media (prefers-color-scheme: dark) {
|
|
448
|
-
background-color: @ffe-
|
|
301
|
+
background-color: @ffe-farge-svart;
|
|
449
302
|
}
|
|
450
303
|
}
|
|
451
304
|
}
|
|
452
305
|
|
|
453
|
-
&--reverse {
|
|
454
|
-
flex-direction: column-reverse;
|
|
455
|
-
}
|
|
456
|
-
|
|
457
|
-
&--horizontal {
|
|
458
|
-
flex-direction: row;
|
|
459
|
-
}
|
|
460
|
-
|
|
461
|
-
&--horizontal&--start {
|
|
462
|
-
justify-content: flex-start;
|
|
463
|
-
}
|
|
464
|
-
|
|
465
|
-
&--horizontal&--center {
|
|
466
|
-
align-items: normal;
|
|
467
|
-
justify-content: center;
|
|
468
|
-
}
|
|
469
|
-
|
|
470
|
-
&--horizontal&--end {
|
|
471
|
-
align-items: normal;
|
|
472
|
-
justify-content: flex-end;
|
|
473
|
-
}
|
|
474
|
-
|
|
475
|
-
&--horizontal&--top {
|
|
476
|
-
justify-content: normal;
|
|
477
|
-
align-items: flex-start;
|
|
478
|
-
}
|
|
479
|
-
|
|
480
|
-
&--horizontal&--middle {
|
|
481
|
-
justify-content: normal;
|
|
482
|
-
align-items: center;
|
|
483
|
-
}
|
|
484
|
-
|
|
485
|
-
&--horizontal&--bottom {
|
|
486
|
-
justify-content: normal;
|
|
487
|
-
align-items: flex-end;
|
|
488
|
-
}
|
|
489
|
-
|
|
490
|
-
&--horizontal&--reverse {
|
|
491
|
-
flex-direction: row-reverse;
|
|
492
|
-
}
|
|
493
|
-
|
|
494
|
-
&--start {
|
|
495
|
-
align-items: flex-start;
|
|
496
|
-
}
|
|
497
|
-
|
|
498
|
-
&--center {
|
|
499
|
-
align-items: center;
|
|
500
|
-
}
|
|
501
|
-
|
|
502
|
-
&--end {
|
|
503
|
-
align-items: flex-end;
|
|
504
|
-
}
|
|
505
|
-
|
|
506
|
-
&--top {
|
|
507
|
-
justify-content: flex-start;
|
|
508
|
-
}
|
|
509
|
-
|
|
510
|
-
&--middle {
|
|
511
|
-
justify-content: center;
|
|
512
|
-
}
|
|
513
|
-
|
|
514
|
-
&--bottom {
|
|
515
|
-
justify-content: flex-end;
|
|
516
|
-
}
|
|
517
|
-
|
|
518
|
-
&--around {
|
|
519
|
-
justify-content: space-around;
|
|
520
|
-
}
|
|
521
|
-
|
|
522
|
-
&--between {
|
|
523
|
-
justify-content: space-between;
|
|
524
|
-
}
|
|
525
|
-
|
|
526
306
|
&--center-text {
|
|
527
307
|
text-align: center;
|
|
528
308
|
}
|
|
529
|
-
|
|
530
|
-
&--no-bottom-padding,
|
|
531
|
-
.ffe-grid--condensed &--no-bottom-padding {
|
|
532
|
-
padding-bottom: 0;
|
|
533
|
-
}
|
|
534
309
|
}
|
|
535
310
|
|
|
536
311
|
.create-column(sm, 12);
|
|
312
|
+
.create-column-offset(sm, 12);
|
|
537
313
|
|
|
538
314
|
@media (min-width: @breakpoint-md) {
|
|
539
315
|
.create-column(md, 12);
|
|
540
|
-
|
|
541
|
-
.ffe-grid__col--md-offset-0 {
|
|
542
|
-
margin-left: 0;
|
|
543
|
-
}
|
|
316
|
+
.create-column-offset(md, 12);
|
|
544
317
|
}
|
|
545
318
|
|
|
546
319
|
@media (min-width: @breakpoint-lg) {
|
|
547
320
|
.create-column(lg, 12);
|
|
548
|
-
|
|
549
|
-
.ffe-grid__col--lg-offset-0 {
|
|
550
|
-
margin-left: 0;
|
|
551
|
-
}
|
|
321
|
+
.create-column-offset(lg, 12);
|
|
552
322
|
}
|
|
553
323
|
|
|
554
324
|
@media (min-width: @breakpoint-xl) {
|
|
555
325
|
.create-column(xl, 12);
|
|
556
|
-
|
|
557
|
-
.ffe-grid__col--xl-offset-0 {
|
|
558
|
-
margin-left: 0;
|
|
559
|
-
}
|
|
326
|
+
.create-column-offset(xl, 12);
|
|
560
327
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@sb1/ffe-grid",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "13.0.0",
|
|
4
4
|
"description": "A grid component for use within the FFE framework",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"ffe"
|
|
@@ -19,7 +19,7 @@
|
|
|
19
19
|
"test": "npm run lint"
|
|
20
20
|
},
|
|
21
21
|
"devDependencies": {
|
|
22
|
-
"@sb1/ffe-core": "^23.0.
|
|
22
|
+
"@sb1/ffe-core": "^23.0.1",
|
|
23
23
|
"stylelint": "^13.0.0"
|
|
24
24
|
},
|
|
25
25
|
"peerDependencies": {
|
|
@@ -28,5 +28,5 @@
|
|
|
28
28
|
"publishConfig": {
|
|
29
29
|
"access": "public"
|
|
30
30
|
},
|
|
31
|
-
"gitHead": "
|
|
31
|
+
"gitHead": "4e1226ba50e091c930cd6aa4bdc72b2f4c0f524f"
|
|
32
32
|
}
|