energy-foundations 2.5.0-beta.1 → 2.5.0-beta.2
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/dist/foundations/_grid.scss +1 -22
- package/dist/generated/icon-layers.js +1 -1
- package/dist/generated/icon-layers.ts +1 -1
- package/dist/generated/icon-names.js +1 -1
- package/dist/generated/icon-names.ts +1 -1
- package/dist/mixins/_layout.scss +29 -0
- package/llms/03-sass-variables-and-mixins.md +1 -0
- package/llms/04-layouts.md +18 -0
- package/package.json +1 -1
- package/src/foundations/_grid.scss +1 -22
- package/src/generated/icon-layers.js +1 -1
- package/src/generated/icon-layers.ts +1 -1
- package/src/generated/icon-names.js +1 -1
- package/src/generated/icon-names.ts +1 -1
- package/src/mixins/_layout.scss +29 -0
|
@@ -13,28 +13,7 @@
|
|
|
13
13
|
}
|
|
14
14
|
|
|
15
15
|
.rds-grid {
|
|
16
|
-
|
|
17
|
-
margin-left: auto;
|
|
18
|
-
margin-right: auto;
|
|
19
|
-
width: 100%;
|
|
20
|
-
|
|
21
|
-
@each $breakpoint, $config in $grid-config {
|
|
22
|
-
:where(body:not([data-rds-layout='b'])) & {
|
|
23
|
-
@include fixed-breakpoint($breakpoint) {
|
|
24
|
-
gap: map.get($config, gap);
|
|
25
|
-
grid-template-columns: repeat(map.get($config, max-columns), 1fr);
|
|
26
|
-
}
|
|
27
|
-
}
|
|
28
|
-
}
|
|
29
|
-
|
|
30
|
-
@each $breakpoint, $config in $grid-config-b {
|
|
31
|
-
:where(body[data-rds-layout='b']) & {
|
|
32
|
-
@include fixed-breakpoint($breakpoint) {
|
|
33
|
-
gap: map.get($config, gap);
|
|
34
|
-
grid-template-columns: repeat(map.get($config, max-columns), 1fr);
|
|
35
|
-
}
|
|
36
|
-
}
|
|
37
|
-
}
|
|
16
|
+
@include grid;
|
|
38
17
|
}
|
|
39
18
|
|
|
40
19
|
// Map of breakpoint names to abbreviations
|
package/dist/mixins/_layout.scss
CHANGED
|
@@ -142,6 +142,35 @@ $_active-layout: null;
|
|
|
142
142
|
}
|
|
143
143
|
}
|
|
144
144
|
|
|
145
|
+
@mixin grid {
|
|
146
|
+
@if not & {
|
|
147
|
+
@error 'grid must be included inside a selector, e.g. `.portal-grid { @include grid; }`.';
|
|
148
|
+
}
|
|
149
|
+
|
|
150
|
+
display: grid;
|
|
151
|
+
margin-left: auto;
|
|
152
|
+
margin-right: auto;
|
|
153
|
+
width: 100%;
|
|
154
|
+
|
|
155
|
+
@each $breakpoint, $config in $grid-config {
|
|
156
|
+
:where(body:not([data-rds-layout='b'])) & {
|
|
157
|
+
@include fixed-breakpoint($breakpoint) {
|
|
158
|
+
gap: map.get($config, gap);
|
|
159
|
+
grid-template-columns: repeat(map.get($config, max-columns), 1fr);
|
|
160
|
+
}
|
|
161
|
+
}
|
|
162
|
+
}
|
|
163
|
+
|
|
164
|
+
@each $breakpoint, $config in $grid-config-b {
|
|
165
|
+
:where(body[data-rds-layout='b']) & {
|
|
166
|
+
@include fixed-breakpoint($breakpoint) {
|
|
167
|
+
gap: map.get($config, gap);
|
|
168
|
+
grid-template-columns: repeat(map.get($config, max-columns), 1fr);
|
|
169
|
+
}
|
|
170
|
+
}
|
|
171
|
+
}
|
|
172
|
+
}
|
|
173
|
+
|
|
145
174
|
// The condition is checked on the selected element itself, so other conditions such as `.dark` or `[dir='rtl']`
|
|
146
175
|
// keep working when they live on body or html. It is inserted at the start of the last compound (after a type
|
|
147
176
|
// selector), so `&--modifier`, `&__element` and pseudo-elements can still be appended by the content.
|
package/llms/04-layouts.md
CHANGED
|
@@ -216,6 +216,24 @@ No existe una escala tipográfica específica para tablet. El breakpoint `deskto
|
|
|
216
216
|
|
|
217
217
|
## Grid: columnas, offsets y perfil editorial
|
|
218
218
|
|
|
219
|
+
### Mixin Sass de grid
|
|
220
|
+
|
|
221
|
+
El mixin público `grid` aplica el mismo comportamiento que `.rds-grid` a un selector propio, sin añadir esa clase al HTML:
|
|
222
|
+
|
|
223
|
+
```scss
|
|
224
|
+
@use 'energy-foundations/src/rds-variables' as rds;
|
|
225
|
+
|
|
226
|
+
.mi-grid {
|
|
227
|
+
@include rds.grid;
|
|
228
|
+
}
|
|
229
|
+
```
|
|
230
|
+
|
|
231
|
+
También está disponible desde `energy-foundations/src/mixins/layout`. Con `@use 'energy-foundations/src/rds-variables' as *`, se incluye mediante `@include grid`.
|
|
232
|
+
|
|
233
|
+
La clase `.rds-grid` consume ese mismo mixin. Ambos conservan display, ancho completo, centrado, columnas y gaps según los mapas `$grid-config` y `$grid-config-b` y el layout global del `body`. Inclúyelo dentro de un selector de un elemento descendiente del `body`; invocarlo en la raíz de la hoja Sass produce un error explícito.
|
|
234
|
+
|
|
235
|
+
El mixin solo configura el contenedor: no incorpora `layout-max`, no genera utilidades de columnas y no cambia `rds-col-*` ni sus offsets.
|
|
236
|
+
|
|
219
237
|
### Columnas y offsets · Layout A
|
|
220
238
|
|
|
221
239
|
El perfil A usa 4 columnas con gap de 16px hasta 719px, 8 columnas con gap de 16px desde 720px y 12 columnas con gap de 24px desde 1280px.
|
package/package.json
CHANGED
|
@@ -13,28 +13,7 @@
|
|
|
13
13
|
}
|
|
14
14
|
|
|
15
15
|
.rds-grid {
|
|
16
|
-
|
|
17
|
-
margin-left: auto;
|
|
18
|
-
margin-right: auto;
|
|
19
|
-
width: 100%;
|
|
20
|
-
|
|
21
|
-
@each $breakpoint, $config in $grid-config {
|
|
22
|
-
:where(body:not([data-rds-layout='b'])) & {
|
|
23
|
-
@include fixed-breakpoint($breakpoint) {
|
|
24
|
-
gap: map.get($config, gap);
|
|
25
|
-
grid-template-columns: repeat(map.get($config, max-columns), 1fr);
|
|
26
|
-
}
|
|
27
|
-
}
|
|
28
|
-
}
|
|
29
|
-
|
|
30
|
-
@each $breakpoint, $config in $grid-config-b {
|
|
31
|
-
:where(body[data-rds-layout='b']) & {
|
|
32
|
-
@include fixed-breakpoint($breakpoint) {
|
|
33
|
-
gap: map.get($config, gap);
|
|
34
|
-
grid-template-columns: repeat(map.get($config, max-columns), 1fr);
|
|
35
|
-
}
|
|
36
|
-
}
|
|
37
|
-
}
|
|
16
|
+
@include grid;
|
|
38
17
|
}
|
|
39
18
|
|
|
40
19
|
// Map of breakpoint names to abbreviations
|
package/src/mixins/_layout.scss
CHANGED
|
@@ -142,6 +142,35 @@ $_active-layout: null;
|
|
|
142
142
|
}
|
|
143
143
|
}
|
|
144
144
|
|
|
145
|
+
@mixin grid {
|
|
146
|
+
@if not & {
|
|
147
|
+
@error 'grid must be included inside a selector, e.g. `.portal-grid { @include grid; }`.';
|
|
148
|
+
}
|
|
149
|
+
|
|
150
|
+
display: grid;
|
|
151
|
+
margin-left: auto;
|
|
152
|
+
margin-right: auto;
|
|
153
|
+
width: 100%;
|
|
154
|
+
|
|
155
|
+
@each $breakpoint, $config in $grid-config {
|
|
156
|
+
:where(body:not([data-rds-layout='b'])) & {
|
|
157
|
+
@include fixed-breakpoint($breakpoint) {
|
|
158
|
+
gap: map.get($config, gap);
|
|
159
|
+
grid-template-columns: repeat(map.get($config, max-columns), 1fr);
|
|
160
|
+
}
|
|
161
|
+
}
|
|
162
|
+
}
|
|
163
|
+
|
|
164
|
+
@each $breakpoint, $config in $grid-config-b {
|
|
165
|
+
:where(body[data-rds-layout='b']) & {
|
|
166
|
+
@include fixed-breakpoint($breakpoint) {
|
|
167
|
+
gap: map.get($config, gap);
|
|
168
|
+
grid-template-columns: repeat(map.get($config, max-columns), 1fr);
|
|
169
|
+
}
|
|
170
|
+
}
|
|
171
|
+
}
|
|
172
|
+
}
|
|
173
|
+
|
|
145
174
|
// The condition is checked on the selected element itself, so other conditions such as `.dark` or `[dir='rtl']`
|
|
146
175
|
// keep working when they live on body or html. It is inserted at the start of the last compound (after a type
|
|
147
176
|
// selector), so `&--modifier`, `&__element` and pseudo-elements can still be appended by the content.
|