@graupl/core 1.0.0-beta.41 → 1.0.0-beta.42
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/css/graupl.css +1 -1
- package/dist/css/graupl.css.map +1 -1
- package/dist/css/layout/columns.css +1 -1
- package/dist/css/layout/columns.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/flex-columns.css +1 -1
- package/dist/css/layout/flex-columns.css.map +1 -1
- package/dist/css/layout.css +1 -1
- package/dist/css/layout.css.map +1 -1
- package/package.json +1 -1
- package/src/scss/layout/columns/_index.scss +1 -1
- package/src/scss/layout/columns/_variables.scss +4 -7
- package/src/scss/layout/container/_index.scss +1 -1
- package/src/scss/layout/container/_variables.scss +4 -10
- package/src/scss/layout/flex-columns/_index.scss +1 -1
- package/src/scss/layout/flex-columns/_variables.scss +11 -15
package/package.json
CHANGED
|
@@ -157,7 +157,7 @@
|
|
|
157
157
|
@include layer(theme) {
|
|
158
158
|
// .columns
|
|
159
159
|
#{defaults.$columns-selector-base}#{defaults.$columns-selector} {
|
|
160
|
-
background
|
|
160
|
+
background: $columns-background;
|
|
161
161
|
color: $columns-color;
|
|
162
162
|
|
|
163
163
|
@if root-defaults.$themeable-components and defaults.$themeable {
|
|
@@ -14,8 +14,8 @@
|
|
|
14
14
|
// | --graupl-columns-max-width | 1fr |
|
|
15
15
|
// | --graupl-columns-grid-template-columns | repeat(auto-fit, minmax(var(--graupl-columns-min-width), var(--graupl-columns-max-width))) |
|
|
16
16
|
// | --graupl-columns-span | 1 |
|
|
17
|
-
// | --graupl-columns-background |
|
|
18
|
-
// | --graupl-columns-color |
|
|
17
|
+
// | --graupl-columns-background | null |
|
|
18
|
+
// | --graupl-columns-color | null |
|
|
19
19
|
|
|
20
20
|
@use "defaults";
|
|
21
21
|
@use "../../variables" as root-variables;
|
|
@@ -83,10 +83,7 @@ $columns-span: var(
|
|
|
83
83
|
);
|
|
84
84
|
|
|
85
85
|
// --graupl-columns-background
|
|
86
|
-
$columns-background: var(
|
|
87
|
-
--#{root-defaults.$prefix}columns-background,
|
|
88
|
-
#{color.$background}
|
|
89
|
-
);
|
|
86
|
+
$columns-background: var(--#{root-defaults.$prefix}columns-background);
|
|
90
87
|
|
|
91
88
|
// --graupl-columns-color
|
|
92
|
-
$columns-color: var(--#{root-defaults.$prefix}columns-color
|
|
89
|
+
$columns-color: var(--#{root-defaults.$prefix}columns-color);
|
|
@@ -790,7 +790,7 @@
|
|
|
790
790
|
@include layer(theme) {
|
|
791
791
|
// .container
|
|
792
792
|
#{defaults.$container-selector-base}#{defaults.$container-selector} {
|
|
793
|
-
background
|
|
793
|
+
background: $container-background;
|
|
794
794
|
color: $container-color;
|
|
795
795
|
|
|
796
796
|
@if root-defaults.$themeable-components and defaults.$themeable {
|
|
@@ -36,8 +36,8 @@
|
|
|
36
36
|
// | --graupl-container-sidebars-left-content-section-min-width | calc(100% - (var(--graupl-container-full-width-section-min-width) * 2) - (var(--graupl-container-feature-section-min-width) * 2) - var(--graupl-container-breakout-section-min-width) - var(--graupl-container-sidebars-breakout-section-width) - var(--graupl-container-sidebar-left-section-width)) |
|
|
37
37
|
// | --graupl-container-sidebars-left-content-section-max-width | calc(var(--graupl-container-content-section-max-width) - var(--graupl-container-sidebar-left-section-width) + min(var(--graupl-container-sidebar-width), var(--graupl-container-feature-section-max-width))) |
|
|
38
38
|
// | --graupl-container-sidebars-left-content-section-width | min(var(--graupl-container-sidebars-left-content-section-min-width), var(--graupl-container-sidebars-left-content-section-max-width)) |
|
|
39
|
-
// | --graupl-container-background |
|
|
40
|
-
// | --graupl-container-color |
|
|
39
|
+
// | --graupl-container-background | null |
|
|
40
|
+
// | --graupl-container-color | null |
|
|
41
41
|
|
|
42
42
|
@use "defaults";
|
|
43
43
|
@use "../../variables" as root-variables;
|
|
@@ -283,14 +283,8 @@ $container-sidebars-left-content-section-width: var(
|
|
|
283
283
|
);
|
|
284
284
|
|
|
285
285
|
// --graupl-container-background
|
|
286
|
-
$container-background: var(
|
|
287
|
-
--#{root-defaults.$prefix}container-background,
|
|
288
|
-
#{color.$background}
|
|
289
|
-
);
|
|
286
|
+
$container-background: var(--#{root-defaults.$prefix}container-background);
|
|
290
287
|
|
|
291
288
|
// --graupl-container-color
|
|
292
|
-
$container-color: var(
|
|
293
|
-
--#{root-defaults.$prefix}container-color,
|
|
294
|
-
#{color.$color}
|
|
295
|
-
);
|
|
289
|
+
$container-color: var(--#{root-defaults.$prefix}container-color);
|
|
296
290
|
/* stylelint-enable scss/operator-no-newline-after */
|
|
@@ -203,7 +203,7 @@
|
|
|
203
203
|
@include layer(theme) {
|
|
204
204
|
// `.flex-columns`
|
|
205
205
|
#{defaults.$flex-columns-selector-base}#{defaults.$flex-columns-selector} {
|
|
206
|
-
background
|
|
206
|
+
background: $flex-columns-background;
|
|
207
207
|
color: $flex-columns-color;
|
|
208
208
|
|
|
209
209
|
@if root-defaults.$themeable-components and defaults.$themeable {
|
|
@@ -4,15 +4,15 @@
|
|
|
4
4
|
// cleaner way to reference custom properties.
|
|
5
5
|
//
|
|
6
6
|
// Custom property defaults:
|
|
7
|
-
// | Custom property | Default
|
|
8
|
-
// | ------------------------------------ |
|
|
9
|
-
// | --graupl-flex-columns-row-gap | var(--graupl-spacer-5)
|
|
10
|
-
// | --graupl-flex-columns-column-gap | var(--graupl-spacer-5)
|
|
11
|
-
// | --graupl-flex-columns-size | auto
|
|
12
|
-
// | --graupl-flex-columns-max-width | unset
|
|
13
|
-
// | --graupl-flex-columns-container-type | inline-size
|
|
14
|
-
// | --graupl-flex-columns-background |
|
|
15
|
-
// | --graupl-flex-columns-color |
|
|
7
|
+
// | Custom property | Default |
|
|
8
|
+
// | ------------------------------------ | ---------------------- |
|
|
9
|
+
// | --graupl-flex-columns-row-gap | var(--graupl-spacer-5) |
|
|
10
|
+
// | --graupl-flex-columns-column-gap | var(--graupl-spacer-5) |
|
|
11
|
+
// | --graupl-flex-columns-size | auto |
|
|
12
|
+
// | --graupl-flex-columns-max-width | unset |
|
|
13
|
+
// | --graupl-flex-columns-container-type | inline-size |
|
|
14
|
+
// | --graupl-flex-columns-background | null |
|
|
15
|
+
// | --graupl-flex-columns-color | null |
|
|
16
16
|
|
|
17
17
|
@use "defaults";
|
|
18
18
|
@use "../../defaults" as root-defaults;
|
|
@@ -52,12 +52,8 @@ $flex-columns-container-type: var(
|
|
|
52
52
|
|
|
53
53
|
// --graupl-flex-columns-background
|
|
54
54
|
$flex-columns-background: var(
|
|
55
|
-
--#{root-defaults.$prefix}flex-columns-background
|
|
56
|
-
#{color.$background}
|
|
55
|
+
--#{root-defaults.$prefix}flex-columns-background
|
|
57
56
|
);
|
|
58
57
|
|
|
59
58
|
// --graupl-flex-columns-color
|
|
60
|
-
$flex-columns-color: var(
|
|
61
|
-
--#{root-defaults.$prefix}flex-columns-color,
|
|
62
|
-
#{color.$color}
|
|
63
|
-
);
|
|
59
|
+
$flex-columns-color: var(--#{root-defaults.$prefix}flex-columns-color);
|