@rijkshuisstijl-community/components-css 1.0.0-alpha.43 → 1.0.0-alpha.45
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/footer/index.scss +17 -7
- package/form/index.scss +5 -1
- package/form-field-radio-option/index.scss +9 -1
- package/navbar/index.scss +39 -4
- package/package.json +2 -2
package/footer/index.scss
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
* @license EUPL-1.2
|
|
3
3
|
* Copyright (c) 2021 Community for NL Design System
|
|
4
4
|
*/
|
|
5
|
-
.rhc-footer {
|
|
5
|
+
.rhc-page-footer {
|
|
6
6
|
--utrecht-space-around: 1;
|
|
7
7
|
--utrecht-link-hover-text-decoration: underline;
|
|
8
8
|
--_utrecht-link-state-text-decoration-color: currentColor;
|
|
@@ -15,20 +15,20 @@
|
|
|
15
15
|
--utrecht-heading-5-color: currentColor;
|
|
16
16
|
--utrecht-heading-6-color: currentColor;
|
|
17
17
|
|
|
18
|
-
column-gap: var(--rhc-page-footer-column-gap);
|
|
19
18
|
display: flex;
|
|
20
19
|
flex-direction: var(--rhc-page-footer-flex-direction);
|
|
20
|
+
justify-content: center;
|
|
21
21
|
|
|
22
22
|
:is(h1, h2, h3, h4, h5, h6) {
|
|
23
23
|
margin-block-end: var(--utrecht-rich-text-friend-margin-block-end);
|
|
24
24
|
}
|
|
25
25
|
}
|
|
26
26
|
|
|
27
|
-
.rhc-footer--primary-filled {
|
|
27
|
+
.rhc-page-footer--primary-filled {
|
|
28
28
|
--utrecht-page-footer-background-color: var(--rhc-color-primary-500);
|
|
29
29
|
}
|
|
30
30
|
|
|
31
|
-
.rhc-footer--primary-outlined {
|
|
31
|
+
.rhc-page-footer--primary-outlined {
|
|
32
32
|
--utrecht-page-footer-background-color: var(--rhc-color-wit);
|
|
33
33
|
--utrecht-page-footer-color: var(--rhc-color-primary-500);
|
|
34
34
|
|
|
@@ -37,24 +37,34 @@
|
|
|
37
37
|
border-block-start-width: var(--rhc-page-footer-border-block-start-width);
|
|
38
38
|
}
|
|
39
39
|
|
|
40
|
+
.rhc-page-footer__content {
|
|
41
|
+
column-gap: var(--rhc-page-footer-column-gap);
|
|
42
|
+
display: flex;
|
|
43
|
+
flex: 1;
|
|
44
|
+
flex-direction: var(--rhc-page-footer-flex-direction);
|
|
45
|
+
max-inline-size: var(--rhc-page-footer-content-max-inline-size);
|
|
46
|
+
padding-inline-end: var(--rhc-page-footer-content-padding-inline-end);
|
|
47
|
+
padding-inline-start: var(--rhc-page-footer-content-padding-inline-start);
|
|
48
|
+
}
|
|
49
|
+
|
|
40
50
|
.rhc-page-footer__section,
|
|
41
51
|
.rhc-page-footer__title {
|
|
42
52
|
break-inside: avoid;
|
|
43
53
|
padding-block-end: var(--rhc-page-footer-padding-block-end);
|
|
44
54
|
}
|
|
45
55
|
|
|
46
|
-
.rhc-
|
|
56
|
+
.rhc-page-footer__content > * {
|
|
47
57
|
flex: 1;
|
|
48
58
|
}
|
|
49
59
|
|
|
50
60
|
@media (width <= 1024px) {
|
|
51
|
-
.rhc-footer {
|
|
61
|
+
.rhc-page-footer {
|
|
52
62
|
--rhc-page-footer-flex-direction: column;
|
|
53
63
|
}
|
|
54
64
|
}
|
|
55
65
|
|
|
56
66
|
@media (width <= 320px) {
|
|
57
|
-
.rhc-footer {
|
|
67
|
+
.rhc-page-footer {
|
|
58
68
|
--utrecht-page-footer-padding-inline-start: var(--rhc-page-footer-padding-inline-start);
|
|
59
69
|
--utrecht-page-footer-padding-block-start: var(--rhc-page-footer-padding-block-start);
|
|
60
70
|
}
|
package/form/index.scss
CHANGED
|
@@ -1,5 +1,9 @@
|
|
|
1
|
-
.rhc-form-label--checkbox {
|
|
1
|
+
.rhc-form-label--checkbox .utrecht-form-field__label--checkbox {
|
|
2
2
|
--utrecht-form-label-font-weight: var(--rhc-font-weight-regular, 400);
|
|
3
|
+
|
|
4
|
+
align-items: flex-start;
|
|
5
|
+
display: flex;
|
|
6
|
+
margin-block-end: var(--rhc-form-field-checkbox-option-margin-block-end, inherit);
|
|
3
7
|
}
|
|
4
8
|
|
|
5
9
|
.utrecht-form-field__status {
|
|
@@ -4,10 +4,18 @@
|
|
|
4
4
|
*/
|
|
5
5
|
|
|
6
6
|
.utrecht-form-field--radio {
|
|
7
|
-
--utrecht-form-field-label-margin-block-end: var(--rhc-form-field-radio-option-
|
|
7
|
+
--utrecht-form-field-label-margin-block-end: var(--rhc-form-field-radio-option-label-margin-block-end, inherit);
|
|
8
8
|
--utrecht-radio-button-margin-inline-end: var(--rhc-form-field-radio-option-column-gap, inherit);
|
|
9
9
|
}
|
|
10
10
|
|
|
11
|
+
.rhc-form-field-radio-option__input {
|
|
12
|
+
align-items: flex-start;
|
|
13
|
+
display: flex;
|
|
14
|
+
margin-block-start: var(--rhc-form-field-radio-option-input-margin-block-start, inherit);
|
|
15
|
+
}
|
|
16
|
+
|
|
11
17
|
.utrecht-form-field--radio .utrecht-form-field__label {
|
|
12
18
|
--utrecht-form-label-font-weight: var(--rhc-form-field-radio-option-font-weight, inherit);
|
|
19
|
+
|
|
20
|
+
display: inline-flex;
|
|
13
21
|
}
|
package/navbar/index.scss
CHANGED
|
@@ -1,3 +1,11 @@
|
|
|
1
|
+
.rhc-nav-bar__container {
|
|
2
|
+
align-items: center;
|
|
3
|
+
background-color: var(--rhc-nav-bar-background-color);
|
|
4
|
+
display: flex;
|
|
5
|
+
inline-size: var(--rhc-nav-bar-container-inline-size);
|
|
6
|
+
justify-content: center;
|
|
7
|
+
}
|
|
8
|
+
|
|
1
9
|
.rhc-nav-bar {
|
|
2
10
|
align-items: center;
|
|
3
11
|
background-color: var(--rhc-nav-bar-background-color);
|
|
@@ -5,8 +13,10 @@
|
|
|
5
13
|
color: var(--rhc-nav-bar-color);
|
|
6
14
|
column-gap: var(--rhc-nav-bar-content-column-gap);
|
|
7
15
|
display: flex;
|
|
16
|
+
flex: 1;
|
|
8
17
|
font-family: var(--rhc-font-family-primary, inherit);
|
|
9
18
|
justify-content: space-between;
|
|
19
|
+
max-inline-size: var(--rhc-nav-bar-max-inline-size);
|
|
10
20
|
row-gap: var(--rhc-nav-bar-content-row-gap);
|
|
11
21
|
}
|
|
12
22
|
|
|
@@ -39,6 +49,11 @@
|
|
|
39
49
|
padding-inline-start: var(--rhc-nav-bar-link-padding-inline-start);
|
|
40
50
|
text-decoration: none;
|
|
41
51
|
|
|
52
|
+
&:active {
|
|
53
|
+
background-color: var(--rhc-nav-bar-link-active-background-color);
|
|
54
|
+
color: var(--rhc-nav-bar-link-active-color);
|
|
55
|
+
}
|
|
56
|
+
|
|
42
57
|
&:hover {
|
|
43
58
|
background-color: var(--rhc-nav-bar-link-hover-background-color);
|
|
44
59
|
}
|
|
@@ -47,9 +62,29 @@
|
|
|
47
62
|
background-color: var(--rhc-nav-bar-link-focus-background-color);
|
|
48
63
|
color: var(--rhc-nav-bar-link-focus-color);
|
|
49
64
|
}
|
|
65
|
+
}
|
|
50
66
|
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
67
|
+
.rhc-sub-nav-bar {
|
|
68
|
+
--utrecht-column-layout-gap: var(--rhc-sub-nav-bar-column-gap);
|
|
69
|
+
--utrecht-column-layout-column-width: var(--rhc-sub-nav-bar-column-width);
|
|
70
|
+
|
|
71
|
+
background-color: var(--rhc-sub-nav-bar-background-color);
|
|
72
|
+
inline-size: var(--rhc-sub-nav-bar-inline-size);
|
|
73
|
+
padding-block-end: calc(var(--rhc-sub-nav-bar-padding-block-end) - var(--rhc-sub-nav-bar-content-list-row-gap));
|
|
74
|
+
padding-block-start: var(--rhc-sub-nav-bar-padding-block-start);
|
|
75
|
+
text-align: center;
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
.rhc-sub-nav-bar__content {
|
|
79
|
+
margin-inline-end: auto;
|
|
80
|
+
margin-inline-start: auto;
|
|
81
|
+
max-inline-size: var(--rhc-sub-nav-bar-content-max-inline-size);
|
|
82
|
+
padding-inline-end: var(--rhc-sub-nav-bar-content-padding-inline-end);
|
|
83
|
+
padding-inline-start: var(--rhc-sub-nav-bar-content-padding-inline-start);
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
.rhc-sub-nav-bar__list {
|
|
87
|
+
break-inside: avoid;
|
|
88
|
+
margin-block-end: var(--rhc-sub-nav-bar-content-list-row-gap);
|
|
89
|
+
text-align: initial;
|
|
55
90
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@rijkshuisstijl-community/components-css",
|
|
3
|
-
"version": "1.0.0-alpha.
|
|
3
|
+
"version": "1.0.0-alpha.45",
|
|
4
4
|
"author": "Community for NL Design System",
|
|
5
5
|
"description": "CSS Components for a design system based on the NL Design System architecture",
|
|
6
6
|
"license": "EUPL-1.2",
|
|
@@ -17,5 +17,5 @@
|
|
|
17
17
|
"url": "git@github.com:nl-design-system/rijkshuisstijl-community.git",
|
|
18
18
|
"directory": "packages/components-css"
|
|
19
19
|
},
|
|
20
|
-
"gitHead": "
|
|
20
|
+
"gitHead": "6f8e17fb54e27ab8ef27111ecaaf3aebaafba4c1"
|
|
21
21
|
}
|