srcdev-nuxt-components 9.1.53 → 9.1.55
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,35 @@ 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
|
+
}
|
|
107
|
+
|
|
108
|
+
/* Nested page-rows: no additional viewport gutter — the outermost page-row already handles edge padding */
|
|
109
|
+
.page-row > .page-row {
|
|
110
|
+
--_minimum-content-padding: var(--page-row-minimum-content-padding, 0px);
|
|
111
|
+
}
|
|
93
112
|
|
|
94
113
|
/* Nested page-rows: symmetric placement by variant class */
|
|
95
114
|
.page-row > .page-row {
|
|
96
|
-
&.full
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
&.
|
|
115
|
+
&.full {
|
|
116
|
+
grid-column: full;
|
|
117
|
+
}
|
|
118
|
+
&.popout {
|
|
119
|
+
grid-column: popout;
|
|
120
|
+
}
|
|
121
|
+
&.content {
|
|
122
|
+
grid-column: content;
|
|
123
|
+
}
|
|
124
|
+
&.inset-content {
|
|
125
|
+
grid-column: inset-content;
|
|
126
|
+
}
|
|
100
127
|
}
|
|
101
128
|
|
|
102
129
|
/*
|
|
@@ -105,15 +132,27 @@ const { headingId, ariaLabelledby } = useAriaLabelledById(props.tag);
|
|
|
105
132
|
* Specificity (0,4,0) beats the symmetric rules above at (0,3,0).
|
|
106
133
|
*/
|
|
107
134
|
.page-row > .page-row[data-align="start"] {
|
|
108
|
-
&.popout
|
|
109
|
-
|
|
110
|
-
|
|
135
|
+
&.popout {
|
|
136
|
+
grid-column: full-start / popout-end;
|
|
137
|
+
}
|
|
138
|
+
&.content {
|
|
139
|
+
grid-column: full-start / content-end;
|
|
140
|
+
}
|
|
141
|
+
&.inset-content {
|
|
142
|
+
grid-column: full-start / inset-content-end;
|
|
143
|
+
}
|
|
111
144
|
}
|
|
112
145
|
|
|
113
146
|
.page-row > .page-row[data-align="end"] {
|
|
114
|
-
&.popout
|
|
115
|
-
|
|
116
|
-
|
|
147
|
+
&.popout {
|
|
148
|
+
grid-column: popout-start / full-end;
|
|
149
|
+
}
|
|
150
|
+
&.content {
|
|
151
|
+
grid-column: content-start / full-end;
|
|
152
|
+
}
|
|
153
|
+
&.inset-content {
|
|
154
|
+
grid-column: inset-content-start / full-end;
|
|
155
|
+
}
|
|
117
156
|
}
|
|
118
157
|
}
|
|
119
158
|
</style>
|