@graupl/graupl 1.0.0-beta.5 → 1.0.0-beta.6
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/CHANGELOG.md +26 -0
- package/dist/css/base/button.css +1 -1
- package/dist/css/base/button.css.map +1 -1
- package/dist/css/base/link.css +1 -1
- package/dist/css/base/link.css.map +1 -1
- package/dist/css/base.css +1 -1
- package/dist/css/base.css.map +1 -1
- package/dist/css/component/menu.css +1 -1
- package/dist/css/component/menu.css.map +1 -1
- package/dist/css/component/navigation.css +1 -1
- package/dist/css/component/navigation.css.map +1 -1
- package/dist/css/component.css +1 -1
- package/dist/css/component.css.map +1 -1
- package/dist/css/graupl.css +1 -1
- package/dist/css/graupl.css.map +1 -1
- package/dist/css/layout/container.css +1 -1
- package/dist/css/layout/container.css.map +1 -1
- package/dist/css/layout.css +1 -1
- package/dist/css/layout.css.map +1 -1
- package/dist/css/utilities/background.css +1 -1
- package/dist/css/utilities/background.css.map +1 -1
- package/dist/css/utilities/height.css +1 -1
- package/dist/css/utilities/height.css.map +1 -1
- package/dist/css/utilities/position.css +2 -0
- package/dist/css/utilities/position.css.map +1 -0
- package/dist/css/utilities/spacing.css +1 -1
- package/dist/css/utilities/spacing.css.map +1 -1
- package/dist/css/utilities/visually-hidden.css +1 -1
- package/dist/css/utilities/visually-hidden.css.map +1 -1
- package/dist/css/utilities/width.css +1 -1
- package/dist/css/utilities/width.css.map +1 -1
- package/dist/css/utilities/z-index.css +2 -0
- package/dist/css/utilities/z-index.css.map +1 -0
- package/dist/css/utilities.css +1 -1
- package/dist/css/utilities.css.map +1 -1
- package/docs/.vitepress/config.js +30 -1
- package/docs/.vitepress/theme/custom.scss +14 -15
- package/docs/compiling-graupl.md +6 -5
- package/docs/utilities/alignment.md +405 -0
- package/docs/utilities/background.md +186 -0
- package/docs/utilities/border.md +262 -0
- package/docs/utilities/color.md +342 -0
- package/docs/utilities/display.md +3 -0
- package/docs/utilities/flex.md +3 -0
- package/docs/utilities/gradient.md +3 -0
- package/docs/utilities/height.md +3 -0
- package/docs/utilities/inset.md +3 -0
- package/docs/utilities/justification.md +3 -0
- package/docs/utilities/list.md +3 -0
- package/docs/utilities/order.md +3 -0
- package/docs/utilities/position.md +3 -0
- package/docs/utilities/ratio.md +3 -0
- package/docs/utilities/responsive-classes.md +3 -0
- package/docs/utilities/spacing.md +3 -0
- package/docs/utilities/typography.md +3 -0
- package/docs/utilities/visibility.md +3 -0
- package/docs/utilities/visually-hidden.md +3 -0
- package/docs/utilities/width.md +3 -0
- package/docs/utilities/z-index.md +3 -0
- package/index.html +82 -0
- package/package.json +1 -1
- package/scss/utilities/z-index.scss +3 -0
- package/src/scss/_defaults.scss +6 -0
- package/src/scss/layout/container/_defaults.scss +10 -0
- package/src/scss/layout/container/_index.scss +472 -1
- package/src/scss/layout/container/_variables.scss +22 -0
- package/src/scss/utilities/_index.scss +1 -0
- package/src/scss/utilities/background/_defaults.scss +0 -35
- package/src/scss/utilities/background/_index.scss +0 -35
- package/src/scss/utilities/z-index/_defaults.scss +34 -0
- package/src/scss/utilities/z-index/_index.scss +140 -0
- package/src/scss/utilities/z-index/_variables.scss +6 -0
- package/dist/css/utilities/postion.css +0 -2
- package/dist/css/utilities/postion.css.map +0 -1
- /package/scss/utilities/{postion.scss → position.scss} +0 -0
package/index.html
CHANGED
|
@@ -6,6 +6,25 @@
|
|
|
6
6
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
7
7
|
<title>Document</title>
|
|
8
8
|
<link rel="stylesheet" href="dist/css/graupl.css">
|
|
9
|
+
<style>
|
|
10
|
+
@media screen and (width > 72ch) {
|
|
11
|
+
.sidebar-left {
|
|
12
|
+
z-index: 1;
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
.inner-content {
|
|
16
|
+
.breakout,
|
|
17
|
+
.full-width,
|
|
18
|
+
.feature {
|
|
19
|
+
z-index: 0;
|
|
20
|
+
}
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
.sidebar-right {
|
|
24
|
+
z-index: 1;
|
|
25
|
+
}
|
|
26
|
+
}
|
|
27
|
+
</style>
|
|
9
28
|
</head>
|
|
10
29
|
|
|
11
30
|
<body>
|
|
@@ -894,6 +913,69 @@
|
|
|
894
913
|
</li>
|
|
895
914
|
</ul>
|
|
896
915
|
</div>
|
|
916
|
+
<div class="py-10 my-10 container sidebars">
|
|
917
|
+
<div class="sidebar-left z-1">
|
|
918
|
+
<div class="bg-primary-500 py-10">
|
|
919
|
+
<h2>Sidebar content (left)</h2>
|
|
920
|
+
<p>This is sidebar content.</p>
|
|
921
|
+
</div>
|
|
922
|
+
</div>
|
|
923
|
+
<div class="inner-content container z-0">
|
|
924
|
+
<div class="bg-secondary-500 py-10">
|
|
925
|
+
<h2>Inner content 1</h2>
|
|
926
|
+
<p>This is the inner content section where additional information can be placed.</p>
|
|
927
|
+
</div>
|
|
928
|
+
<div class="bg-tertiary-500 full-width contain">
|
|
929
|
+
<div class="bg-tertiary-700 feature contain">
|
|
930
|
+
<div class="bg-tertiary-800 breakout contain">
|
|
931
|
+
<div class="bg-secondary-500 py-10">
|
|
932
|
+
<h2>Inner content 2</h2>
|
|
933
|
+
<p>This is the inner content section where additional information can be placed.</p>
|
|
934
|
+
</div>
|
|
935
|
+
</div>
|
|
936
|
+
</div>
|
|
937
|
+
</div>
|
|
938
|
+
<div class="bg-secondary-500 py-10">
|
|
939
|
+
<h2>Inner content 3</h2>
|
|
940
|
+
<p>This is the inner content section where additional information can be placed.</p>
|
|
941
|
+
</div>
|
|
942
|
+
</div>
|
|
943
|
+
<div class="sidebar-right z-1">
|
|
944
|
+
<div class="bg-primary-500 py-10">
|
|
945
|
+
<h2>Sidebar content (right)</h2>
|
|
946
|
+
<p>This is sidebar content.</p>
|
|
947
|
+
</div>
|
|
948
|
+
</div>
|
|
949
|
+
</div>
|
|
950
|
+
<div class="py-10 my-10 container sidebars">
|
|
951
|
+
<div class="sidebar-left bg-primary-700 z-1">
|
|
952
|
+
<div class="bg-primary-500 py-10">
|
|
953
|
+
<h2>Sidebar content (left)</h2>
|
|
954
|
+
<p>This is sidebar content.</p>
|
|
955
|
+
</div>
|
|
956
|
+
</div>
|
|
957
|
+
<div class="content-right bg-secondary-700 z-0">
|
|
958
|
+
<div class="bg-secondary-500 py-10">
|
|
959
|
+
<h2>Inner content 1</h2>
|
|
960
|
+
<p>This is the inner content section where additional information can be placed.</p>
|
|
961
|
+
</div>
|
|
962
|
+
</div>
|
|
963
|
+
</div>
|
|
964
|
+
<div class="py-10 my-10 container sidebars">
|
|
965
|
+
<div class="content-left bg-secondary-700 z-0">
|
|
966
|
+
<div class="bg-secondary-500 py-10">
|
|
967
|
+
<h2>Inner content 1</h2>
|
|
968
|
+
<p>This is the inner content section where additional information can be placed.</p>
|
|
969
|
+
</div>
|
|
970
|
+
</div>
|
|
971
|
+
<div class="sidebar-right bg-primary-700 z-1">
|
|
972
|
+
<div class="bg-primary-500 py-10">
|
|
973
|
+
<h2>Sidebar content (right)</h2>
|
|
974
|
+
<p>This is sidebar content.</p>
|
|
975
|
+
</div>
|
|
976
|
+
</div>
|
|
977
|
+
</div>
|
|
978
|
+
|
|
897
979
|
</main>
|
|
898
980
|
<script src="https://cdn.jsdelivr.net/npm/accessible-menu/dist/disclosure-menu.iife.js"></script>
|
|
899
981
|
<script type="module" src="src/js/alert/index.js"></script>
|
package/package.json
CHANGED
package/src/scss/_defaults.scss
CHANGED
|
@@ -19,7 +19,17 @@ $container-full-width-selector-base: $container-selector-base !default;
|
|
|
19
19
|
$container-full-width-selector: "full-width" !default;
|
|
20
20
|
$container-contain-selector-base: $container-selector-base !default;
|
|
21
21
|
$container-contain-selector: "contain" !default;
|
|
22
|
+
$container-sidebars-selector-base: $container-selector-base !default;
|
|
23
|
+
$container-sidebars-selector: "sidebars" !default;
|
|
24
|
+
$container-content-selector-base: $container-selector-base !default;
|
|
25
|
+
$container-content-selector: "content" !default;
|
|
26
|
+
$container-sidebar-selector-base: $container-selector-base !default;
|
|
27
|
+
$container-sidebar-selector: "sidebar" !default;
|
|
28
|
+
$container-left-selector-suffix: "-left" !default;
|
|
29
|
+
$container-right-selector-suffix: "-right" !default;
|
|
30
|
+
$container-inner-selector-prefix: "inner-" !default;
|
|
22
31
|
|
|
23
32
|
// Container properties.
|
|
24
33
|
$container-breakout-width: 15ch !default;
|
|
25
34
|
$container-feature-width: 20ch !default;
|
|
35
|
+
$container-sidebar-width: 20ch !default;
|
|
@@ -9,6 +9,13 @@
|
|
|
9
9
|
// - Breakout: A breakout section that is used for breakout content.
|
|
10
10
|
// - Content: The main content section that contains all other content.
|
|
11
11
|
//
|
|
12
|
+
// Optionally, the container component can have sidebars, which divides the content section into five sections:
|
|
13
|
+
// - Sidebar-left: A left sidebar section that is used for sidebar content.
|
|
14
|
+
// - Sidebar-right: A right sidebar section that is used for sidebar content.
|
|
15
|
+
// - Inner-content: A section that contains the main content of the page.
|
|
16
|
+
// - Content-left: A section that contains the sidebar-left and inner-content sections.
|
|
17
|
+
// - Content-right: A section that contains the inner-content and sidebar-right sections.
|
|
18
|
+
//
|
|
12
19
|
// The container layout is as follows:
|
|
13
20
|
// | full-width | feature | breakout | content | breakout | feature | full-width |
|
|
14
21
|
//
|
|
@@ -21,10 +28,17 @@
|
|
|
21
28
|
// - `.feature`: A feature container component.
|
|
22
29
|
// - `.breakout`: A breakout container component.
|
|
23
30
|
// - `.contain`: A utility class to contain child elements to the content section of the container grid.
|
|
31
|
+
// - `.sidebars`: A utility class to enable sidebars in the container.
|
|
32
|
+
// - `.sidebar-left`: A left sidebar container component.
|
|
33
|
+
// - `.sidebar-right`: A right sidebar container component.
|
|
34
|
+
// - `.content-left`: A left content container component.
|
|
35
|
+
// - `.content-right`: A right content container component.
|
|
36
|
+
// - `.inner-content`: A utility class to contain child elements to the inner content section of the container grid.
|
|
24
37
|
//
|
|
25
38
|
// The following custom properties control the generated classes:
|
|
26
39
|
// - `--graupl-container-gap`: The gap between the container sections.
|
|
27
40
|
// - `--graupl-container-content-max-width`: The maximum width of the content section.
|
|
41
|
+
// - `--graupl-container-sidebar-width`: The width of the sidebar sections.
|
|
28
42
|
// - `--graupl-container-breakout-max-width`: The maximum width of the breakout section.
|
|
29
43
|
// - `--graupl-container-feature-max-width`: The maximum width of the feature section.
|
|
30
44
|
// - `--graupl-container-full-width-section-min-width`: The minimum width of one side of the full-width section.
|
|
@@ -39,6 +53,9 @@
|
|
|
39
53
|
// - `--graupl-container-feature-section-width`: The calculated minmax width of the feature section.
|
|
40
54
|
// - `--graupl-container-breakout-section-width`: The calculated minmax width of the breakout section.
|
|
41
55
|
// - `--graupl-container-content-section-width`: The calculated minmax width of the content section.
|
|
56
|
+
// - `--graupl-container-sidebar-left-section-width`: The width of the left sidebar section.
|
|
57
|
+
// - `--graupl-container-sidebar-right-section-width`: The width of the right sidebar section.
|
|
58
|
+
// - `--graupl-container-inner-content-section-width`: The calculated minmax width of the inner content section.
|
|
42
59
|
//
|
|
43
60
|
// The following variables control the generated classes:
|
|
44
61
|
// - `$container-selector-base`: The base selector for the container component.
|
|
@@ -51,8 +68,18 @@
|
|
|
51
68
|
// - `$container-full-width-selector`: The selector for the full-width container component.
|
|
52
69
|
// - `$container-contain-selector-base`: The base selector for the contain utility class.
|
|
53
70
|
// - `$container-contain-selector`: The selector for the contain utility class.
|
|
71
|
+
// - `$container-sidebars-selector-base`: The base selector for the sidebars utility class.
|
|
72
|
+
// - `$container-sidebars-selector`: The selector for the sidebars utility class.
|
|
73
|
+
// - `$container-content-selector-base`: The base selector for the content container component.
|
|
74
|
+
// - `$container-content-selector`: The selector for the content container component.
|
|
75
|
+
// - `$container-sidebar-selector-base`: The base selector for the sidebar container component.
|
|
76
|
+
// - `$container-sidebar-selector`: The selector for the sidebar container component.
|
|
77
|
+
// - `$container-left-selector-suffix`: The suffix for the left sidebar selector.
|
|
78
|
+
// - `$container-right-selector-suffix`: The suffix for the right sidebar selector.
|
|
79
|
+
// - `$container-inner-selector-prefix`: The prefix for the inner content selector.
|
|
54
80
|
// - `$container-breakout-width`: The width of the breakout section will extend from the content section.
|
|
55
81
|
// - `$container-feature-width`: The width of the feature section will extend from the breakout section.
|
|
82
|
+
// - `$container-sidebar-width`: The width of the sidebar sections.
|
|
56
83
|
//
|
|
57
84
|
// @example
|
|
58
85
|
// <div class="container">
|
|
@@ -75,10 +102,44 @@
|
|
|
75
102
|
// Contained feature content
|
|
76
103
|
// </div>
|
|
77
104
|
// </div>
|
|
105
|
+
//
|
|
106
|
+
// @example
|
|
107
|
+
// <div class="container sidebars">
|
|
108
|
+
// <div class="sidebar-left">
|
|
109
|
+
// Left sidebar content
|
|
110
|
+
// </div>
|
|
111
|
+
// <div class="content-right">
|
|
112
|
+
// Content right content
|
|
113
|
+
// </div>
|
|
114
|
+
// </div>
|
|
115
|
+
//
|
|
116
|
+
// @example
|
|
117
|
+
// <div class="container sidebars">
|
|
118
|
+
// <div class="content-left">
|
|
119
|
+
// Content left content
|
|
120
|
+
// </div>
|
|
121
|
+
// <div class="sidebar-right">
|
|
122
|
+
// Right sidebar content
|
|
123
|
+
// </div>
|
|
124
|
+
// </div>
|
|
125
|
+
//
|
|
126
|
+
// @example
|
|
127
|
+
// <div class="container sidebars">
|
|
128
|
+
// <div class="sidebar-left">
|
|
129
|
+
// Left sidebar content
|
|
130
|
+
// </div>
|
|
131
|
+
// <div class="inner-content">
|
|
132
|
+
// Inner content content
|
|
133
|
+
// </div>
|
|
134
|
+
// <div class="sidebar-right">
|
|
135
|
+
// Right sidebar content
|
|
136
|
+
// </div>
|
|
137
|
+
// </div>
|
|
78
138
|
|
|
79
139
|
@use "defaults";
|
|
80
140
|
@use "variables" as *;
|
|
81
141
|
@use "../../mixins/layer" as *;
|
|
142
|
+
@use "../../mixins/screen";
|
|
82
143
|
|
|
83
144
|
@include layer(layout) {
|
|
84
145
|
// .container
|
|
@@ -120,7 +181,7 @@
|
|
|
120
181
|
// force all children to be in the content section.
|
|
121
182
|
//
|
|
122
183
|
// > .contain
|
|
123
|
-
|
|
184
|
+
#{defaults.$container-contain-selector-base}#{defaults.$container-contain-selector} {
|
|
124
185
|
display: grid;
|
|
125
186
|
grid-template-columns: subgrid;
|
|
126
187
|
|
|
@@ -151,5 +212,415 @@
|
|
|
151
212
|
#{defaults.$container-full-width-selector-base}#{defaults.$container-full-width-selector} {
|
|
152
213
|
grid-column: full-width;
|
|
153
214
|
}
|
|
215
|
+
|
|
216
|
+
// &.sidebars
|
|
217
|
+
&#{defaults.$container-sidebars-selector-base}#{defaults.$container-sidebars-selector} {
|
|
218
|
+
// .sidebar-left
|
|
219
|
+
#{defaults.$container-sidebar-selector-base}#{defaults.$container-sidebar-selector}#{defaults.$container-left-selector-suffix} {
|
|
220
|
+
display: grid;
|
|
221
|
+
grid-column: 1 / -1;
|
|
222
|
+
grid-template-columns: subgrid;
|
|
223
|
+
|
|
224
|
+
// > :not(.container, .breakout, .feature, .full-width, .sidebar-left)
|
|
225
|
+
> :not(
|
|
226
|
+
#{defaults.$container-selector-base}#{defaults.$container-selector},
|
|
227
|
+
#{defaults.$container-breakout-selector-base}#{defaults.$container-breakout-selector},
|
|
228
|
+
#{defaults.$container-full-width-selector-base}#{defaults.$container-full-width-selector},
|
|
229
|
+
#{defaults.$container-feature-selector-base}#{defaults.$container-feature-selector},
|
|
230
|
+
#{defaults.$container-sidebar-selector-base}#{defaults.$container-sidebar-selector}#{defaults.$container-left-selector-suffix}
|
|
231
|
+
) {
|
|
232
|
+
grid-column: content;
|
|
233
|
+
}
|
|
234
|
+
}
|
|
235
|
+
|
|
236
|
+
// .sidebar-right
|
|
237
|
+
#{defaults.$container-sidebar-selector-base}#{defaults.$container-sidebar-selector}#{defaults.$container-right-selector-suffix} {
|
|
238
|
+
display: grid;
|
|
239
|
+
grid-column: 1 / -1;
|
|
240
|
+
grid-template-columns: subgrid;
|
|
241
|
+
|
|
242
|
+
// > :not(.container, .breakout, .feature, .full-width, .sidebar-right)
|
|
243
|
+
> :not(
|
|
244
|
+
#{defaults.$container-selector-base}#{defaults.$container-selector},
|
|
245
|
+
#{defaults.$container-breakout-selector-base}#{defaults.$container-breakout-selector},
|
|
246
|
+
#{defaults.$container-full-width-selector-base}#{defaults.$container-full-width-selector},
|
|
247
|
+
#{defaults.$container-feature-selector-base}#{defaults.$container-feature-selector},
|
|
248
|
+
#{defaults.$container-sidebar-selector-base}#{defaults.$container-sidebar-selector}#{defaults.$container-right-selector-suffix}
|
|
249
|
+
) {
|
|
250
|
+
grid-column: content;
|
|
251
|
+
}
|
|
252
|
+
}
|
|
253
|
+
|
|
254
|
+
// .content-right
|
|
255
|
+
#{defaults.$container-content-selector-base}#{defaults.$container-content-selector}#{defaults.$container-right-selector-suffix} {
|
|
256
|
+
display: grid;
|
|
257
|
+
grid-column: 1 / -1;
|
|
258
|
+
grid-template-columns: subgrid;
|
|
259
|
+
|
|
260
|
+
// > :not(.container, .breakout, .feature, .full-width, .sidebar-right)
|
|
261
|
+
> :not(
|
|
262
|
+
#{defaults.$container-selector-base}#{defaults.$container-selector},
|
|
263
|
+
#{defaults.$container-breakout-selector-base}#{defaults.$container-breakout-selector},
|
|
264
|
+
#{defaults.$container-full-width-selector-base}#{defaults.$container-full-width-selector},
|
|
265
|
+
#{defaults.$container-feature-selector-base}#{defaults.$container-feature-selector},
|
|
266
|
+
#{defaults.$container-sidebar-selector-base}#{defaults.$container-sidebar-selector}#{defaults.$container-right-selector-suffix}
|
|
267
|
+
) {
|
|
268
|
+
grid-column: content;
|
|
269
|
+
}
|
|
270
|
+
|
|
271
|
+
// Contain components should inherit the container's grid columns and
|
|
272
|
+
// force all children to be in the content section.
|
|
273
|
+
//
|
|
274
|
+
// > .contain
|
|
275
|
+
#{defaults.$container-contain-selector-base}#{defaults.$container-contain-selector} {
|
|
276
|
+
// > :not(.container, .breakout, .feature, .full-width)
|
|
277
|
+
> :not(
|
|
278
|
+
#{defaults.$container-selector-base}#{defaults.$container-selector},
|
|
279
|
+
#{defaults.$container-breakout-selector-base}#{defaults.$container-breakout-selector},
|
|
280
|
+
#{defaults.$container-full-width-selector-base}#{defaults.$container-full-width-selector},
|
|
281
|
+
#{defaults.$container-feature-selector-base}#{defaults.$container-feature-selector},
|
|
282
|
+
#{defaults.$container-sidebar-selector-base}#{defaults.$container-sidebar-selector}#{defaults.$container-right-selector-suffix}
|
|
283
|
+
) {
|
|
284
|
+
grid-column: content;
|
|
285
|
+
}
|
|
286
|
+
}
|
|
287
|
+
}
|
|
288
|
+
|
|
289
|
+
// .content-left
|
|
290
|
+
#{defaults.$container-content-selector-base}#{defaults.$container-content-selector}#{defaults.$container-left-selector-suffix} {
|
|
291
|
+
display: grid;
|
|
292
|
+
grid-column: 1 / -1;
|
|
293
|
+
grid-template-columns: subgrid;
|
|
294
|
+
|
|
295
|
+
// > :not(.container, .breakout, .feature, .full-width, .sidebar-left, .sidebar-right)
|
|
296
|
+
> :not(
|
|
297
|
+
#{defaults.$container-selector-base}#{defaults.$container-selector},
|
|
298
|
+
#{defaults.$container-breakout-selector-base}#{defaults.$container-breakout-selector},
|
|
299
|
+
#{defaults.$container-full-width-selector-base}#{defaults.$container-full-width-selector},
|
|
300
|
+
#{defaults.$container-feature-selector-base}#{defaults.$container-feature-selector},
|
|
301
|
+
#{defaults.$container-sidebar-selector-base}#{defaults.$container-sidebar-selector}#{defaults.$container-left-selector-suffix},
|
|
302
|
+
#{defaults.$container-sidebar-selector-base}#{defaults.$container-sidebar-selector}#{defaults.$container-right-selector-suffix}
|
|
303
|
+
) {
|
|
304
|
+
grid-column: content;
|
|
305
|
+
}
|
|
306
|
+
|
|
307
|
+
// Contain components should inherit the container's grid columns and
|
|
308
|
+
// force all children to be in the content section.
|
|
309
|
+
//
|
|
310
|
+
// > .contain
|
|
311
|
+
#{defaults.$container-contain-selector-base}#{defaults.$container-contain-selector} {
|
|
312
|
+
// > :not(.container, .breakout, .feature, .full-width, .sidebar-left, .sidebar-right)
|
|
313
|
+
> :not(
|
|
314
|
+
#{defaults.$container-selector-base}#{defaults.$container-selector},
|
|
315
|
+
#{defaults.$container-breakout-selector-base}#{defaults.$container-breakout-selector},
|
|
316
|
+
#{defaults.$container-full-width-selector-base}#{defaults.$container-full-width-selector},
|
|
317
|
+
#{defaults.$container-feature-selector-base}#{defaults.$container-feature-selector},
|
|
318
|
+
#{defaults.$container-sidebar-selector-base}#{defaults.$container-sidebar-selector}#{defaults.$container-left-selector-suffix},
|
|
319
|
+
#{defaults.$container-sidebar-selector-base}#{defaults.$container-sidebar-selector}#{defaults.$container-right-selector-suffix}
|
|
320
|
+
) {
|
|
321
|
+
grid-column: content;
|
|
322
|
+
}
|
|
323
|
+
}
|
|
324
|
+
}
|
|
325
|
+
|
|
326
|
+
// .inner-content
|
|
327
|
+
#{defaults.$container-content-selector-base}#{defaults.$container-inner-selector-prefix}#{defaults.$container-content-selector} {
|
|
328
|
+
display: grid;
|
|
329
|
+
grid-column: 1 / -1;
|
|
330
|
+
grid-template-columns: subgrid;
|
|
331
|
+
|
|
332
|
+
// > :not(.container, .breakout, .feature, .full-width, .sidebar-left, .sidebar-right)
|
|
333
|
+
> :not(
|
|
334
|
+
#{defaults.$container-selector-base}#{defaults.$container-selector},
|
|
335
|
+
#{defaults.$container-breakout-selector-base}#{defaults.$container-breakout-selector},
|
|
336
|
+
#{defaults.$container-full-width-selector-base}#{defaults.$container-full-width-selector},
|
|
337
|
+
#{defaults.$container-feature-selector-base}#{defaults.$container-feature-selector},
|
|
338
|
+
#{defaults.$container-sidebar-selector-base}#{defaults.$container-sidebar-selector}#{defaults.$container-left-selector-suffix},
|
|
339
|
+
#{defaults.$container-sidebar-selector-base}#{defaults.$container-sidebar-selector}#{defaults.$container-right-selector-suffix}
|
|
340
|
+
) {
|
|
341
|
+
grid-column: content;
|
|
342
|
+
}
|
|
343
|
+
|
|
344
|
+
// Contain components should inherit the container's grid columns and
|
|
345
|
+
// force all children to be in the content section.
|
|
346
|
+
//
|
|
347
|
+
// > .contain
|
|
348
|
+
#{defaults.$container-contain-selector-base}#{defaults.$container-contain-selector} {
|
|
349
|
+
// > :not(.container, .breakout, .feature, .full-width, .sidebar-left, .sidebar-right)
|
|
350
|
+
> :not(
|
|
351
|
+
#{defaults.$container-selector-base}#{defaults.$container-selector},
|
|
352
|
+
#{defaults.$container-breakout-selector-base}#{defaults.$container-breakout-selector},
|
|
353
|
+
#{defaults.$container-full-width-selector-base}#{defaults.$container-full-width-selector},
|
|
354
|
+
#{defaults.$container-feature-selector-base}#{defaults.$container-feature-selector},
|
|
355
|
+
#{defaults.$container-sidebar-selector-base}#{defaults.$container-sidebar-selector}#{defaults.$container-left-selector-suffix},
|
|
356
|
+
#{defaults.$container-sidebar-selector-base}#{defaults.$container-sidebar-selector}#{defaults.$container-right-selector-suffix}
|
|
357
|
+
) {
|
|
358
|
+
grid-column: content;
|
|
359
|
+
}
|
|
360
|
+
}
|
|
361
|
+
}
|
|
362
|
+
}
|
|
363
|
+
|
|
364
|
+
@include screen.trigger(allow-sidebars) {
|
|
365
|
+
// &.sidebars
|
|
366
|
+
&#{defaults.$container-sidebars-selector-base}#{defaults.$container-sidebars-selector} {
|
|
367
|
+
grid-template-columns:
|
|
368
|
+
[full-width-start] $container-full-width-section-width
|
|
369
|
+
[feature-start] $container-feature-section-width
|
|
370
|
+
[breakout-start] $container-breakout-section-width
|
|
371
|
+
[content-start sidebar-left-start content-left-start] $container-sidebar-left-section-width
|
|
372
|
+
[sidebar-left-end inner-content-start content-right-start] $container-inner-content-section-width
|
|
373
|
+
[content-left-end inner-content-end sidebar-right-start] $container-sidebar-right-section-width
|
|
374
|
+
[content-right-end sidebar-right-end content-end]
|
|
375
|
+
$container-breakout-section-width [breakout-end]
|
|
376
|
+
$container-feature-section-width [feature-end]
|
|
377
|
+
$container-full-width-section-width [full-width-end];
|
|
378
|
+
|
|
379
|
+
// .sidebar-left
|
|
380
|
+
#{defaults.$container-sidebar-selector-base}#{defaults.$container-sidebar-selector}#{defaults.$container-left-selector-suffix} {
|
|
381
|
+
grid-row: 1;
|
|
382
|
+
|
|
383
|
+
// Make sure other container classes do not break the layout inside of the sidebar.
|
|
384
|
+
//
|
|
385
|
+
// &:not(.container)
|
|
386
|
+
&:not(
|
|
387
|
+
#{defaults.$container-selector-base}#{defaults.$container-selector}
|
|
388
|
+
) {
|
|
389
|
+
// &, .container, .breakout, .feature, .full-width
|
|
390
|
+
&,
|
|
391
|
+
#{defaults.$container-selector-base}#{defaults.$container-selector},
|
|
392
|
+
#{defaults.$container-breakout-selector-base}#{defaults.$container-breakout-selector},
|
|
393
|
+
#{defaults.$container-full-width-selector-base}#{defaults.$container-full-width-selector},
|
|
394
|
+
#{defaults.$container-feature-selector-base}#{defaults.$container-feature-selector} {
|
|
395
|
+
grid-column-end: sidebar-left-end;
|
|
396
|
+
}
|
|
397
|
+
}
|
|
398
|
+
|
|
399
|
+
// Lock content to the sidebar-left section.
|
|
400
|
+
//
|
|
401
|
+
// > :not(.container, .breakout, .feature, .full-width)
|
|
402
|
+
> :not(
|
|
403
|
+
#{defaults.$container-selector-base}#{defaults.$container-selector},
|
|
404
|
+
#{defaults.$container-breakout-selector-base}#{defaults.$container-breakout-selector},
|
|
405
|
+
#{defaults.$container-full-width-selector-base}#{defaults.$container-full-width-selector},
|
|
406
|
+
#{defaults.$container-feature-selector-base}#{defaults.$container-feature-selector}
|
|
407
|
+
) {
|
|
408
|
+
grid-column: sidebar-left;
|
|
409
|
+
}
|
|
410
|
+
|
|
411
|
+
// Contain components should inherit the container's grid columns and
|
|
412
|
+
// force all children to be in the sidebar-left section.
|
|
413
|
+
//
|
|
414
|
+
// > .contain
|
|
415
|
+
#{defaults.$container-contain-selector-base}#{defaults.$container-contain-selector} {
|
|
416
|
+
// > :not(.container, .breakout, .feature, .full-width)
|
|
417
|
+
> :not(
|
|
418
|
+
#{defaults.$container-selector-base}#{defaults.$container-selector},
|
|
419
|
+
#{defaults.$container-breakout-selector-base}#{defaults.$container-breakout-selector},
|
|
420
|
+
#{defaults.$container-full-width-selector-base}#{defaults.$container-full-width-selector},
|
|
421
|
+
#{defaults.$container-feature-selector-base}#{defaults.$container-feature-selector}
|
|
422
|
+
) {
|
|
423
|
+
grid-column: sidebar-left;
|
|
424
|
+
}
|
|
425
|
+
}
|
|
426
|
+
}
|
|
427
|
+
|
|
428
|
+
// .sidebar-right
|
|
429
|
+
#{defaults.$container-sidebar-selector-base}#{defaults.$container-sidebar-selector}#{defaults.$container-right-selector-suffix} {
|
|
430
|
+
grid-row: 1;
|
|
431
|
+
|
|
432
|
+
// Make sure other container classes do not break the layout inside of the sidebar.
|
|
433
|
+
//
|
|
434
|
+
// &:not(.container)
|
|
435
|
+
&:not(
|
|
436
|
+
#{defaults.$container-selector-base}#{defaults.$container-selector}
|
|
437
|
+
) {
|
|
438
|
+
// &, .container, .breakout, .feature, .full-width
|
|
439
|
+
&,
|
|
440
|
+
#{defaults.$container-selector-base}#{defaults.$container-selector},
|
|
441
|
+
#{defaults.$container-breakout-selector-base}#{defaults.$container-breakout-selector},
|
|
442
|
+
#{defaults.$container-full-width-selector-base}#{defaults.$container-full-width-selector},
|
|
443
|
+
#{defaults.$container-feature-selector-base}#{defaults.$container-feature-selector} {
|
|
444
|
+
grid-column-start: sidebar-right-start;
|
|
445
|
+
}
|
|
446
|
+
}
|
|
447
|
+
|
|
448
|
+
// Lock content to the sidebar-right section.
|
|
449
|
+
//
|
|
450
|
+
// > :not(.container, .breakout, .feature, .full-width)
|
|
451
|
+
> :not(
|
|
452
|
+
#{defaults.$container-selector-base}#{defaults.$container-selector},
|
|
453
|
+
#{defaults.$container-breakout-selector-base}#{defaults.$container-breakout-selector},
|
|
454
|
+
#{defaults.$container-full-width-selector-base}#{defaults.$container-full-width-selector},
|
|
455
|
+
#{defaults.$container-feature-selector-base}#{defaults.$container-feature-selector}
|
|
456
|
+
) {
|
|
457
|
+
grid-column: sidebar-right;
|
|
458
|
+
}
|
|
459
|
+
|
|
460
|
+
// Contain components should inherit the container's grid columns and
|
|
461
|
+
// force all children to be in the sidebar-right section.
|
|
462
|
+
//
|
|
463
|
+
// > .contain
|
|
464
|
+
#{defaults.$container-contain-selector-base}#{defaults.$container-contain-selector} {
|
|
465
|
+
// > :not(.container, .breakout, .feature, .full-width)
|
|
466
|
+
> :not(
|
|
467
|
+
#{defaults.$container-selector-base}#{defaults.$container-selector},
|
|
468
|
+
#{defaults.$container-breakout-selector-base}#{defaults.$container-breakout-selector},
|
|
469
|
+
#{defaults.$container-full-width-selector-base}#{defaults.$container-full-width-selector},
|
|
470
|
+
#{defaults.$container-feature-selector-base}#{defaults.$container-feature-selector}
|
|
471
|
+
) {
|
|
472
|
+
grid-column: sidebar-right;
|
|
473
|
+
}
|
|
474
|
+
}
|
|
475
|
+
}
|
|
476
|
+
|
|
477
|
+
// .content-right
|
|
478
|
+
#{defaults.$container-content-selector-base}#{defaults.$container-content-selector}#{defaults.$container-right-selector-suffix} {
|
|
479
|
+
grid-row: 1;
|
|
480
|
+
|
|
481
|
+
// Make sure other container classes do not break the layout inside of the content.
|
|
482
|
+
//
|
|
483
|
+
// &:not(.container)
|
|
484
|
+
&:not(
|
|
485
|
+
#{defaults.$container-selector-base}#{defaults.$container-selector}
|
|
486
|
+
) {
|
|
487
|
+
// &, .container, .breakout, .feature, .full-width
|
|
488
|
+
&,
|
|
489
|
+
#{defaults.$container-selector-base}#{defaults.$container-selector},
|
|
490
|
+
#{defaults.$container-breakout-selector-base}#{defaults.$container-breakout-selector},
|
|
491
|
+
#{defaults.$container-full-width-selector-base}#{defaults.$container-full-width-selector},
|
|
492
|
+
#{defaults.$container-feature-selector-base}#{defaults.$container-feature-selector} {
|
|
493
|
+
grid-column-start: content-right-start;
|
|
494
|
+
}
|
|
495
|
+
}
|
|
496
|
+
|
|
497
|
+
// Lock content to the content-right section.
|
|
498
|
+
//
|
|
499
|
+
// > :not(.container, .breakout, .feature, .full-width)
|
|
500
|
+
> :not(
|
|
501
|
+
#{defaults.$container-selector-base}#{defaults.$container-selector},
|
|
502
|
+
#{defaults.$container-breakout-selector-base}#{defaults.$container-breakout-selector},
|
|
503
|
+
#{defaults.$container-full-width-selector-base}#{defaults.$container-full-width-selector},
|
|
504
|
+
#{defaults.$container-feature-selector-base}#{defaults.$container-feature-selector}
|
|
505
|
+
) {
|
|
506
|
+
grid-column: content-right;
|
|
507
|
+
}
|
|
508
|
+
|
|
509
|
+
// Contain components should inherit the container's grid columns and
|
|
510
|
+
// force all children to be in the content-right section.
|
|
511
|
+
//
|
|
512
|
+
// > .contain
|
|
513
|
+
#{defaults.$container-contain-selector-base}#{defaults.$container-contain-selector} {
|
|
514
|
+
// > :not(.container, .breakout, .feature, .full-width)
|
|
515
|
+
> :not(
|
|
516
|
+
#{defaults.$container-selector-base}#{defaults.$container-selector},
|
|
517
|
+
#{defaults.$container-breakout-selector-base}#{defaults.$container-breakout-selector},
|
|
518
|
+
#{defaults.$container-full-width-selector-base}#{defaults.$container-full-width-selector},
|
|
519
|
+
#{defaults.$container-feature-selector-base}#{defaults.$container-feature-selector}
|
|
520
|
+
) {
|
|
521
|
+
grid-column: content-right;
|
|
522
|
+
}
|
|
523
|
+
}
|
|
524
|
+
}
|
|
525
|
+
|
|
526
|
+
// .content-left
|
|
527
|
+
#{defaults.$container-content-selector-base}#{defaults.$container-content-selector}#{defaults.$container-left-selector-suffix} {
|
|
528
|
+
grid-row: 1;
|
|
529
|
+
|
|
530
|
+
// Make sure other container classes do not break the layout inside of the content.
|
|
531
|
+
//
|
|
532
|
+
// &:not(.container)
|
|
533
|
+
&:not(
|
|
534
|
+
#{defaults.$container-selector-base}#{defaults.$container-selector}
|
|
535
|
+
) {
|
|
536
|
+
// &, .container, .breakout, .feature, .full-width
|
|
537
|
+
&,
|
|
538
|
+
#{defaults.$container-selector-base}#{defaults.$container-selector},
|
|
539
|
+
#{defaults.$container-breakout-selector-base}#{defaults.$container-breakout-selector},
|
|
540
|
+
#{defaults.$container-full-width-selector-base}#{defaults.$container-full-width-selector},
|
|
541
|
+
#{defaults.$container-feature-selector-base}#{defaults.$container-feature-selector} {
|
|
542
|
+
grid-column-end: content-left-end;
|
|
543
|
+
}
|
|
544
|
+
}
|
|
545
|
+
|
|
546
|
+
// Lock content to the content-left section.
|
|
547
|
+
//
|
|
548
|
+
// > :not(.container, .breakout, .feature, .full-width)
|
|
549
|
+
> :not(
|
|
550
|
+
#{defaults.$container-selector-base}#{defaults.$container-selector},
|
|
551
|
+
#{defaults.$container-breakout-selector-base}#{defaults.$container-breakout-selector},
|
|
552
|
+
#{defaults.$container-full-width-selector-base}#{defaults.$container-full-width-selector},
|
|
553
|
+
#{defaults.$container-feature-selector-base}#{defaults.$container-feature-selector}
|
|
554
|
+
) {
|
|
555
|
+
grid-column: content-left;
|
|
556
|
+
}
|
|
557
|
+
|
|
558
|
+
// Contain components should inherit the container's grid columns and
|
|
559
|
+
// force all children to be in the content-left section.
|
|
560
|
+
//
|
|
561
|
+
// > .contain
|
|
562
|
+
#{defaults.$container-contain-selector-base}#{defaults.$container-contain-selector} {
|
|
563
|
+
// > :not(.container, .breakout, .feature, .full-width)
|
|
564
|
+
> :not(
|
|
565
|
+
#{defaults.$container-selector-base}#{defaults.$container-selector},
|
|
566
|
+
#{defaults.$container-breakout-selector-base}#{defaults.$container-breakout-selector},
|
|
567
|
+
#{defaults.$container-full-width-selector-base}#{defaults.$container-full-width-selector},
|
|
568
|
+
#{defaults.$container-feature-selector-base}#{defaults.$container-feature-selector}
|
|
569
|
+
) {
|
|
570
|
+
grid-column: content-left;
|
|
571
|
+
}
|
|
572
|
+
}
|
|
573
|
+
}
|
|
574
|
+
|
|
575
|
+
// .inner-content
|
|
576
|
+
#{defaults.$container-content-selector-base}#{defaults.$container-inner-selector-prefix}#{defaults.$container-content-selector} {
|
|
577
|
+
grid-row: 1;
|
|
578
|
+
|
|
579
|
+
// Make sure other container classes do not break the layout inside of the content.
|
|
580
|
+
//
|
|
581
|
+
// &:not(.container)
|
|
582
|
+
&:not(
|
|
583
|
+
#{defaults.$container-selector-base}#{defaults.$container-selector}
|
|
584
|
+
) {
|
|
585
|
+
// &, .container, .breakout, .feature, .full-width
|
|
586
|
+
&,
|
|
587
|
+
#{defaults.$container-selector-base}#{defaults.$container-selector},
|
|
588
|
+
#{defaults.$container-breakout-selector-base}#{defaults.$container-breakout-selector},
|
|
589
|
+
#{defaults.$container-full-width-selector-base}#{defaults.$container-full-width-selector},
|
|
590
|
+
#{defaults.$container-feature-selector-base}#{defaults.$container-feature-selector} {
|
|
591
|
+
grid-column: inner-content;
|
|
592
|
+
}
|
|
593
|
+
}
|
|
594
|
+
|
|
595
|
+
// Lock content to the inner-content section.
|
|
596
|
+
//
|
|
597
|
+
// > :not(.container, .breakout, .feature, .full-width)
|
|
598
|
+
> :not(
|
|
599
|
+
#{defaults.$container-selector-base}#{defaults.$container-selector},
|
|
600
|
+
#{defaults.$container-breakout-selector-base}#{defaults.$container-breakout-selector},
|
|
601
|
+
#{defaults.$container-full-width-selector-base}#{defaults.$container-full-width-selector},
|
|
602
|
+
#{defaults.$container-feature-selector-base}#{defaults.$container-feature-selector}
|
|
603
|
+
) {
|
|
604
|
+
grid-column: inner-content;
|
|
605
|
+
}
|
|
606
|
+
|
|
607
|
+
// Contain components should inherit the container's grid columns and
|
|
608
|
+
// force all children to be in the inner-content section.
|
|
609
|
+
//
|
|
610
|
+
// > .contain
|
|
611
|
+
#{defaults.$container-contain-selector-base}#{defaults.$container-contain-selector} {
|
|
612
|
+
// > :not(.container, .breakout, .feature, .full-width)
|
|
613
|
+
> :not(
|
|
614
|
+
#{defaults.$container-selector-base}#{defaults.$container-selector},
|
|
615
|
+
#{defaults.$container-breakout-selector-base}#{defaults.$container-breakout-selector},
|
|
616
|
+
#{defaults.$container-full-width-selector-base}#{defaults.$container-full-width-selector},
|
|
617
|
+
#{defaults.$container-feature-selector-base}#{defaults.$container-feature-selector}
|
|
618
|
+
) {
|
|
619
|
+
grid-column: inner-content;
|
|
620
|
+
}
|
|
621
|
+
}
|
|
622
|
+
}
|
|
623
|
+
}
|
|
624
|
+
}
|
|
154
625
|
}
|
|
155
626
|
}
|