srcdev-nuxt-components 9.1.53 → 9.1.54
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.
|
@@ -46,7 +46,15 @@ const { headingId, ariaLabelledby } = useAriaLabelledById(props.tag);
|
|
|
46
46
|
--_content-max-width: var(--page-row-content-max-width, 1064px);
|
|
47
47
|
--_inset-content-max-width: var(--page-row-inset-content-max-width, 840px);
|
|
48
48
|
|
|
49
|
-
|
|
49
|
+
/* Minimum gutter for the outer (full) track: 1rem on narrow viewports, dissolves to 0
|
|
50
|
+
once the viewport exceeds --_content-max-width + 2 × --_minimum-content-padding,
|
|
51
|
+
at which point 1fr already provides centering space with no forced floor needed. */
|
|
52
|
+
--_full-track-min: min(
|
|
53
|
+
var(--_minimum-content-padding),
|
|
54
|
+
max(0px, calc((var(--_content-max-width) + var(--_minimum-content-padding) * 2 - 100%) / 2))
|
|
55
|
+
);
|
|
56
|
+
|
|
57
|
+
--full: minmax(var(--_full-track-min), 1fr);
|
|
50
58
|
--popout: minmax(0, calc((var(--_popout-max-width) - var(--_content-max-width)) * 0.5));
|
|
51
59
|
--content: clamp(
|
|
52
60
|
0px,
|
|
@@ -87,16 +95,30 @@ const { headingId, ariaLabelledby } = useAriaLabelledById(props.tag);
|
|
|
87
95
|
* its own children span full width, not just control placement when nested.
|
|
88
96
|
* Specificity (0,2,0) — nested .page-row variant overrides below win at (0,3,0).
|
|
89
97
|
*/
|
|
90
|
-
.page-row.full > *
|
|
91
|
-
|
|
92
|
-
|
|
98
|
+
.page-row.full > * {
|
|
99
|
+
grid-column: full;
|
|
100
|
+
}
|
|
101
|
+
.page-row.popout > * {
|
|
102
|
+
grid-column: popout;
|
|
103
|
+
}
|
|
104
|
+
.page-row.inset-content > * {
|
|
105
|
+
grid-column: inset-content;
|
|
106
|
+
}
|
|
93
107
|
|
|
94
108
|
/* Nested page-rows: symmetric placement by variant class */
|
|
95
109
|
.page-row > .page-row {
|
|
96
|
-
&.full
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
&.
|
|
110
|
+
&.full {
|
|
111
|
+
grid-column: full;
|
|
112
|
+
}
|
|
113
|
+
&.popout {
|
|
114
|
+
grid-column: popout;
|
|
115
|
+
}
|
|
116
|
+
&.content {
|
|
117
|
+
grid-column: content;
|
|
118
|
+
}
|
|
119
|
+
&.inset-content {
|
|
120
|
+
grid-column: inset-content;
|
|
121
|
+
}
|
|
100
122
|
}
|
|
101
123
|
|
|
102
124
|
/*
|
|
@@ -105,15 +127,27 @@ const { headingId, ariaLabelledby } = useAriaLabelledById(props.tag);
|
|
|
105
127
|
* Specificity (0,4,0) beats the symmetric rules above at (0,3,0).
|
|
106
128
|
*/
|
|
107
129
|
.page-row > .page-row[data-align="start"] {
|
|
108
|
-
&.popout
|
|
109
|
-
|
|
110
|
-
|
|
130
|
+
&.popout {
|
|
131
|
+
grid-column: full-start / popout-end;
|
|
132
|
+
}
|
|
133
|
+
&.content {
|
|
134
|
+
grid-column: full-start / content-end;
|
|
135
|
+
}
|
|
136
|
+
&.inset-content {
|
|
137
|
+
grid-column: full-start / inset-content-end;
|
|
138
|
+
}
|
|
111
139
|
}
|
|
112
140
|
|
|
113
141
|
.page-row > .page-row[data-align="end"] {
|
|
114
|
-
&.popout
|
|
115
|
-
|
|
116
|
-
|
|
142
|
+
&.popout {
|
|
143
|
+
grid-column: popout-start / full-end;
|
|
144
|
+
}
|
|
145
|
+
&.content {
|
|
146
|
+
grid-column: content-start / full-end;
|
|
147
|
+
}
|
|
148
|
+
&.inset-content {
|
|
149
|
+
grid-column: inset-content-start / full-end;
|
|
150
|
+
}
|
|
117
151
|
}
|
|
118
152
|
}
|
|
119
153
|
</style>
|