@sb1/ffe-grid 13.0.2 → 13.0.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.
- package/README.md +8 -6
- package/less/ffe-grid.less +19 -16
- package/package.json +3 -3
package/README.md
CHANGED
|
@@ -96,15 +96,17 @@ Text inside a grid column can be centered using the `.ffe-grid__col--center-text
|
|
|
96
96
|
|
|
97
97
|
### Background colors
|
|
98
98
|
|
|
99
|
-
The background color of rows can be changed using modifiers
|
|
99
|
+
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`.
|
|
100
100
|
|
|
101
101
|
```html
|
|
102
102
|
<div class="ffe-grid__row ffe-grid__row--bg-sand">
|
|
103
|
-
<div class="ffe-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
103
|
+
<div class="ffe-grid__row-wrapper">
|
|
104
|
+
<div class="ffe-grid__col--md-6">
|
|
105
|
+
<!-- content -->
|
|
106
|
+
</div>
|
|
107
|
+
<div class="ffe-grid__col--md-6">
|
|
108
|
+
<!-- content -->
|
|
109
|
+
</div>
|
|
108
110
|
</div>
|
|
109
111
|
</div>
|
|
110
112
|
```
|
package/less/ffe-grid.less
CHANGED
|
@@ -20,16 +20,14 @@
|
|
|
20
20
|
.create-column-offset(@size, @total, @current + 1);
|
|
21
21
|
}
|
|
22
22
|
|
|
23
|
-
.ffe-
|
|
24
|
-
|
|
25
|
-
max-width: @app-width;
|
|
26
|
-
}
|
|
27
|
-
|
|
28
|
-
.ffe-grid__row {
|
|
23
|
+
.ffe-grid__row,
|
|
24
|
+
.ffe-grid__row-wrapper {
|
|
29
25
|
display: grid;
|
|
30
26
|
gap: @ffe-spacing-sm;
|
|
31
27
|
padding-right: @ffe-spacing-sm;
|
|
32
28
|
padding-left: @ffe-spacing-sm;
|
|
29
|
+
margin: 0 auto;
|
|
30
|
+
max-width: @app-width;
|
|
33
31
|
grid-template-columns: repeat(12, 1fr);
|
|
34
32
|
|
|
35
33
|
.ffe-grid--gap-none & {
|
|
@@ -108,43 +106,43 @@
|
|
|
108
106
|
}
|
|
109
107
|
|
|
110
108
|
&--margin-2xs {
|
|
111
|
-
margin: @ffe-spacing-2xs
|
|
109
|
+
margin: @ffe-spacing-2xs auto;
|
|
112
110
|
}
|
|
113
111
|
|
|
114
112
|
&--margin-xs {
|
|
115
|
-
margin: @ffe-spacing-xs
|
|
113
|
+
margin: @ffe-spacing-xs auto;
|
|
116
114
|
}
|
|
117
115
|
|
|
118
116
|
&--margin-sm {
|
|
119
|
-
margin: @ffe-spacing-sm
|
|
117
|
+
margin: @ffe-spacing-sm auto;
|
|
120
118
|
}
|
|
121
119
|
|
|
122
120
|
&--margin-md {
|
|
123
|
-
margin: @ffe-spacing-md
|
|
121
|
+
margin: @ffe-spacing-md auto;
|
|
124
122
|
}
|
|
125
123
|
|
|
126
124
|
&--margin-lg {
|
|
127
|
-
margin: @ffe-spacing-lg
|
|
125
|
+
margin: @ffe-spacing-lg auto;
|
|
128
126
|
}
|
|
129
127
|
|
|
130
128
|
&--margin-xl {
|
|
131
|
-
margin: @ffe-spacing-xl
|
|
129
|
+
margin: @ffe-spacing-xl auto;
|
|
132
130
|
}
|
|
133
131
|
|
|
134
132
|
&--margin-2xl {
|
|
135
|
-
margin: @ffe-spacing-2xl
|
|
133
|
+
margin: @ffe-spacing-2xl auto;
|
|
136
134
|
}
|
|
137
135
|
|
|
138
136
|
&--margin-3xl {
|
|
139
|
-
margin: @ffe-spacing-3xl
|
|
137
|
+
margin: @ffe-spacing-3xl auto;
|
|
140
138
|
}
|
|
141
139
|
|
|
142
140
|
&--margin-4xl {
|
|
143
|
-
margin: @ffe-spacing-4xl
|
|
141
|
+
margin: @ffe-spacing-4xl auto;
|
|
144
142
|
}
|
|
145
143
|
|
|
146
144
|
&--margin-5xl {
|
|
147
|
-
margin: @ffe-spacing-5xl
|
|
145
|
+
margin: @ffe-spacing-5xl auto;
|
|
148
146
|
}
|
|
149
147
|
|
|
150
148
|
&--bg-frost-30 {
|
|
@@ -237,6 +235,11 @@
|
|
|
237
235
|
}
|
|
238
236
|
}
|
|
239
237
|
|
|
238
|
+
[class*='ffe-grid__row--bg-'] {
|
|
239
|
+
display: block;
|
|
240
|
+
max-width: none;
|
|
241
|
+
}
|
|
242
|
+
|
|
240
243
|
.ffe-grid__col {
|
|
241
244
|
grid-column: auto / span 12;
|
|
242
245
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@sb1/ffe-grid",
|
|
3
|
-
"version": "13.0.
|
|
3
|
+
"version": "13.0.4",
|
|
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": "^
|
|
22
|
+
"@sb1/ffe-core": "^25.0.0",
|
|
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": "3878d43f98432f838d8f2f2da396f8fc40d0d311"
|
|
32
32
|
}
|