@navikt/ds-css 2.9.8 → 3.0.0
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/accordion.css +126 -29
- package/alert.css +0 -1
- package/button.css +5 -6
- package/chips.css +11 -6
- package/date.css +2 -1
- package/dist/component/accordion.css +131 -29
- package/dist/component/accordion.min.css +1 -1
- package/dist/component/alert.css +0 -1
- package/dist/component/alert.min.css +1 -1
- package/dist/component/button.css +5 -6
- package/dist/component/button.min.css +1 -1
- package/dist/component/chips.css +11 -6
- package/dist/component/chips.min.css +1 -1
- package/dist/component/date.css +2 -1
- package/dist/component/date.min.css +1 -1
- package/dist/component/expansioncard.css +2 -2
- package/dist/component/expansioncard.min.css +1 -1
- package/dist/component/form.css +8 -5
- package/dist/component/form.min.css +1 -1
- package/dist/component/index.css +184 -68
- package/dist/component/index.min.css +2 -2
- package/dist/component/readmore.css +17 -13
- package/dist/component/readmore.min.css +1 -1
- package/dist/component/stepper.css +27 -0
- package/dist/component/stepper.min.css +1 -1
- package/dist/component/table.css +6 -7
- package/dist/component/table.min.css +1 -1
- package/dist/component/tabs.css +1 -1
- package/dist/component/tabs.min.css +1 -1
- package/dist/components.css +183 -67
- package/dist/components.min.css +2 -2
- package/dist/global/tokens.css +1 -1
- package/dist/index.css +184 -68
- package/dist/index.min.css +2 -2
- package/expansioncard.css +2 -2
- package/form/search.css +1 -1
- package/form/select.css +6 -2
- package/form/switch.css +2 -2
- package/package.json +2 -2
- package/read-more.css +17 -13
- package/stepper.css +27 -0
- package/table.css +6 -7
- package/tabs.css +1 -1
- package/tokens.json +14 -17
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,31 @@
|
|
|
1
1
|
# @navikt/ds-css
|
|
2
2
|
|
|
3
|
+
## 3.0.0
|
|
4
|
+
|
|
5
|
+
### Major Changes
|
|
6
|
+
|
|
7
|
+
- [#1964](https://github.com/navikt/aksel/pull/1964) [`166ee5feb`](https://github.com/navikt/aksel/commit/166ee5feb3c987c4e633eb449812116bfd865d3f) Thanks [@KenAJoh](https://github.com/KenAJoh)! - **Accordion**
|
|
8
|
+
|
|
9
|
+
- Accordion oppdatet til å ha chevron left-aligned.
|
|
10
|
+
- Neutral-variant lagt til
|
|
11
|
+
- Diverse nye size-options for heading og paddinger.
|
|
12
|
+
- Deler av Accordion-CSS er refaktorert. Dette vil kunne brekke overskrevne stiler.
|
|
13
|
+
|
|
14
|
+
- [#1964](https://github.com/navikt/aksel/pull/1964) [`166ee5feb`](https://github.com/navikt/aksel/commit/166ee5feb3c987c4e633eb449812116bfd865d3f) Thanks [@KenAJoh](https://github.com/KenAJoh)! - Aksels løsninger bruker nå `@navikt/aksel-icons`
|
|
15
|
+
|
|
16
|
+
**Sideeffects av ikonendringer**
|
|
17
|
+
|
|
18
|
+
- Komponenter som tidligere brukte Expand-ikon har fått oppdatert animasjon (table, readmore og accordion)
|
|
19
|
+
- Alert bruker samme ikonstørrelse for alle størrelser
|
|
20
|
+
- Chips har justert padding/ikonstørrelser
|
|
21
|
+
- Datepicker hover-bug på knapper er fikset
|
|
22
|
+
- Helptekst bruker nå et custom-ikon.
|
|
23
|
+
- Select har fått justert padding rundt ikon
|
|
24
|
+
- Switch bruker samme checkmark som checkbox, er nå avrundet
|
|
25
|
+
- ReadMore har justert margin for alignment med ikon, fjernet content-animasjon
|
|
26
|
+
- Tabs bruker default text-default nå
|
|
27
|
+
- Stepper har endret hvordan den styler checkmark-ikon.
|
|
28
|
+
|
|
3
29
|
## 2.9.8
|
|
4
30
|
|
|
5
31
|
## 2.9.7
|
package/accordion.css
CHANGED
|
@@ -2,30 +2,78 @@
|
|
|
2
2
|
position: relative;
|
|
3
3
|
}
|
|
4
4
|
|
|
5
|
+
/*************************
|
|
6
|
+
* Header *
|
|
7
|
+
*************************/
|
|
5
8
|
.navds-accordion__header {
|
|
9
|
+
--__ac-accordion-header-shadow-color: var(--ac-accordion-header-border, var(--a-border-divider));
|
|
10
|
+
--__ac-accordion-header-shadow: inset 2px 0 0 0 var(--a-transparent), inset -2px 0 0 0 var(--a-transparent),
|
|
11
|
+
inset 0 2px 0 0 var(--__ac-accordion-header-shadow-color);
|
|
12
|
+
|
|
6
13
|
width: 100%;
|
|
7
14
|
display: flex;
|
|
8
|
-
justify-content:
|
|
15
|
+
justify-content: flex-start;
|
|
9
16
|
align-items: flex-start;
|
|
10
17
|
gap: var(--a-spacing-2);
|
|
11
|
-
padding:
|
|
18
|
+
padding: var(--a-spacing-3);
|
|
12
19
|
margin: 0;
|
|
13
20
|
text-align: left;
|
|
14
21
|
background: var(--ac-accordion-header-bg, var(--a-surface-transparent));
|
|
15
22
|
cursor: pointer;
|
|
16
23
|
border: none;
|
|
17
|
-
|
|
24
|
+
position: relative;
|
|
25
|
+
box-shadow: var(--__ac-accordion-header-shadow);
|
|
26
|
+
z-index: 1;
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
.navds-accordion__header:hover {
|
|
30
|
+
background-color: var(--ac-accordion-header-bg-hover, var(--a-surface-hover));
|
|
31
|
+
text-decoration: underline;
|
|
32
|
+
color: var(--ac-accordion-header-text-hover, inherit);
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
.navds-accordion--small .navds-accordion__header {
|
|
36
|
+
padding: var(--a-spacing-2) var(--a-spacing-3);
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
.navds-accordion--medium .navds-accordion__header {
|
|
40
|
+
padding: var(--a-spacing-3);
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
.navds-accordion--large .navds-accordion__header {
|
|
44
|
+
padding: var(--a-spacing-4) var(--a-spacing-3);
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
.navds-accordion__item:last-child > :where(.navds-accordion__header) {
|
|
48
|
+
box-shadow: var(--__ac-accordion-header-shadow), inset 0 -2px 0 0 var(--__ac-accordion-header-shadow-color);
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
.navds-accordion__item:last-child:where(.navds-accordion__item--open) :where(.navds-accordion__header) {
|
|
52
|
+
box-shadow: inset 2px 0 0 0 var(--a-transparent), inset -2px 0 0 0 var(--a-transparent), inset 0 2px 0 0 var(--a-transparent),
|
|
53
|
+
inset 0 2px 0 0 var(--__ac-accordion-header-shadow-color);
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
.navds-accordion__item:last-child:where(.navds-accordion__item--open) {
|
|
57
|
+
box-shadow: inset 2px 0 0 0 var(--a-transparent), inset -2px 0 0 0 var(--a-transparent), inset 0 2px 0 0 var(--a-transparent),
|
|
58
|
+
inset 0 -2px 0 0 var(--__ac-accordion-header-shadow-color);
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
.navds-accordion__item--open > :where(.navds-accordion__header) {
|
|
62
|
+
box-shadow: var(--__ac-accordion-header-shadow);
|
|
18
63
|
}
|
|
19
64
|
|
|
20
|
-
.navds-accordion__header:focus {
|
|
65
|
+
.navds-accordion__header:focus-visible {
|
|
21
66
|
outline: none;
|
|
22
67
|
box-shadow: var(--a-shadow-focus);
|
|
68
|
+
border-radius: var(--a-border-radius-large);
|
|
23
69
|
}
|
|
24
70
|
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
71
|
+
@supports not selector(:focus-visible) {
|
|
72
|
+
.navds-accordion__header:focus {
|
|
73
|
+
outline: none;
|
|
74
|
+
box-shadow: var(--a-shadow-focus);
|
|
75
|
+
border-radius: var(--a-border-radius-large);
|
|
76
|
+
}
|
|
29
77
|
}
|
|
30
78
|
|
|
31
79
|
.navds-accordion__header-content {
|
|
@@ -33,42 +81,91 @@
|
|
|
33
81
|
text-overflow: ellipsis;
|
|
34
82
|
}
|
|
35
83
|
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
84
|
+
/*************************
|
|
85
|
+
* Icon *
|
|
86
|
+
*************************/
|
|
87
|
+
.navds-accordion__icon-wrapper {
|
|
88
|
+
display: grid;
|
|
89
|
+
place-content: center;
|
|
90
|
+
border-radius: var(--a-border-radius-medium);
|
|
91
|
+
height: var(--a-spacing-6);
|
|
92
|
+
width: var(--a-spacing-6);
|
|
93
|
+
align-self: center;
|
|
39
94
|
}
|
|
40
95
|
|
|
41
|
-
.navds-
|
|
42
|
-
background-color: var(--ac-accordion-header-bg-
|
|
96
|
+
.navds-accordion__header:hover > .navds-accordion__icon-wrapper {
|
|
97
|
+
background-color: var(--ac-accordion-header-icon-bg-hover, var(--a-surface-neutral-subtle-hover));
|
|
43
98
|
}
|
|
44
99
|
|
|
45
|
-
.navds-
|
|
46
|
-
|
|
47
|
-
|
|
100
|
+
.navds-accordion__header-chevron {
|
|
101
|
+
border-radius: var(--a-border-radius-medium);
|
|
102
|
+
font-size: 1.5rem;
|
|
103
|
+
height: 1.75rem;
|
|
104
|
+
flex-shrink: 0;
|
|
105
|
+
transition: transform 150ms ease-in-out;
|
|
106
|
+
align-self: center;
|
|
48
107
|
}
|
|
49
108
|
|
|
50
|
-
.navds-
|
|
51
|
-
|
|
109
|
+
:where(.navds-accordion__header):hover > :where(.navds-accordion__icon-wrapper) > :where(.navds-accordion__header-chevron) {
|
|
110
|
+
transform: translateY(1px);
|
|
52
111
|
}
|
|
53
112
|
|
|
54
|
-
.navds-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
113
|
+
.navds-accordion__item--open
|
|
114
|
+
> :where(.navds-accordion__header)
|
|
115
|
+
> :where(.navds-accordion__icon-wrapper)
|
|
116
|
+
> :where(.navds-accordion__header-chevron) {
|
|
117
|
+
transform: translateY(0) rotate(-180deg);
|
|
58
118
|
}
|
|
59
119
|
|
|
60
|
-
.navds-accordion__item--open
|
|
61
|
-
|
|
120
|
+
.navds-accordion__item--open
|
|
121
|
+
> :where(.navds-accordion__header):hover
|
|
122
|
+
> :where(.navds-accordion__icon-wrapper)
|
|
123
|
+
> :where(.navds-accordion__header-chevron) {
|
|
124
|
+
transform: translateY(-1px) rotate(-180deg);
|
|
62
125
|
}
|
|
63
126
|
|
|
64
|
-
|
|
65
|
-
|
|
127
|
+
/*************************
|
|
128
|
+
* Variant/Default *
|
|
129
|
+
*************************/
|
|
130
|
+
.navds-accordion__item--open {
|
|
131
|
+
background-color: var(--ac-accordion-item-bg-open, var(--a-transparent));
|
|
66
132
|
}
|
|
67
133
|
|
|
68
|
-
|
|
69
|
-
|
|
134
|
+
/*************************
|
|
135
|
+
* Variant/Neutral *
|
|
136
|
+
*************************/
|
|
137
|
+
.navds-accordion__item--open.navds-accordion__item--neutral {
|
|
138
|
+
background-color: var(--ac-accordion-neutral-item-bg-open, var(--a-surface-neutral-subtle));
|
|
70
139
|
}
|
|
71
140
|
|
|
72
|
-
|
|
141
|
+
/*************************
|
|
142
|
+
* Content *
|
|
143
|
+
*************************/
|
|
144
|
+
.navds-accordion__content {
|
|
145
|
+
padding: 0 var(--a-spacing-3) var(--a-spacing-5) var(--a-spacing-11);
|
|
146
|
+
animation: fadeAccordionContent 250ms ease;
|
|
147
|
+
}
|
|
148
|
+
|
|
149
|
+
.navds-accordion__content--closed {
|
|
73
150
|
display: none;
|
|
74
151
|
}
|
|
152
|
+
|
|
153
|
+
.navds-accordion__item--no-animation :where(.navds-accordion__content) {
|
|
154
|
+
animation: none;
|
|
155
|
+
}
|
|
156
|
+
|
|
157
|
+
@keyframes fadeAccordionContent {
|
|
158
|
+
0% {
|
|
159
|
+
opacity: 0.25;
|
|
160
|
+
transform: translateY(-8px);
|
|
161
|
+
}
|
|
162
|
+
|
|
163
|
+
40% {
|
|
164
|
+
opacity: 0.7;
|
|
165
|
+
}
|
|
166
|
+
|
|
167
|
+
100% {
|
|
168
|
+
opacity: 1;
|
|
169
|
+
transform: translateY(0);
|
|
170
|
+
}
|
|
171
|
+
}
|
package/alert.css
CHANGED
package/button.css
CHANGED
|
@@ -32,9 +32,10 @@
|
|
|
32
32
|
}
|
|
33
33
|
|
|
34
34
|
.navds-button--small {
|
|
35
|
-
--__ac-button-padding:
|
|
35
|
+
--__ac-button-padding: var(--a-spacing-1) var(--a-spacing-3);
|
|
36
36
|
|
|
37
37
|
padding: var(--ac-button-padding-small, var(--__ac-button-padding));
|
|
38
|
+
min-height: 2rem;
|
|
38
39
|
}
|
|
39
40
|
|
|
40
41
|
.navds-button--xsmall {
|
|
@@ -51,13 +52,13 @@
|
|
|
51
52
|
}
|
|
52
53
|
|
|
53
54
|
.navds-button--small.navds-button--icon-only {
|
|
54
|
-
--__ac-button-padding:
|
|
55
|
+
--__ac-button-padding: var(--a-spacing-1);
|
|
55
56
|
|
|
56
57
|
padding: var(--ac-button-padding-icon-only-small, var(--__ac-button-padding));
|
|
57
58
|
}
|
|
58
59
|
|
|
59
60
|
.navds-button--xsmall.navds-button--icon-only {
|
|
60
|
-
--__ac-button-padding: var(--a-spacing-
|
|
61
|
+
--__ac-button-padding: var(--a-spacing-05);
|
|
61
62
|
|
|
62
63
|
padding: var(--ac-button-padding-icon-only-xsmall, var(--__ac-button-padding));
|
|
63
64
|
}
|
|
@@ -88,14 +89,12 @@
|
|
|
88
89
|
|
|
89
90
|
.navds-button--small .navds-button__icon {
|
|
90
91
|
--ac-button-icon-margin: -2px;
|
|
91
|
-
|
|
92
|
-
font-size: 1.25rem;
|
|
93
92
|
}
|
|
94
93
|
|
|
95
94
|
.navds-button--xsmall .navds-button__icon {
|
|
96
95
|
--ac-button-icon-margin: -2px;
|
|
97
96
|
|
|
98
|
-
font-size:
|
|
97
|
+
font-size: 1.25rem;
|
|
99
98
|
}
|
|
100
99
|
|
|
101
100
|
/*************************
|
package/chips.css
CHANGED
|
@@ -63,6 +63,10 @@
|
|
|
63
63
|
box-shadow: inset 0 0 0 1px var(--a-surface-default), 0 0 0 2px var(--ac-chip-toggle-focus, var(--a-border-focus));
|
|
64
64
|
}
|
|
65
65
|
|
|
66
|
+
.navds-chips__removable {
|
|
67
|
+
gap: 0;
|
|
68
|
+
}
|
|
69
|
+
|
|
66
70
|
.navds-chips__removable--action {
|
|
67
71
|
background-color: var(--ac-chip-removable-action-bg, var(--a-surface-action-selected));
|
|
68
72
|
color: var(--ac-chip-removable-action-text, var(--a-text-on-action));
|
|
@@ -77,22 +81,23 @@
|
|
|
77
81
|
.navds-chips__removable-icon {
|
|
78
82
|
width: 1.5rem;
|
|
79
83
|
height: 1.5rem;
|
|
84
|
+
font-size: 1.25rem;
|
|
80
85
|
display: grid;
|
|
81
86
|
place-items: center;
|
|
82
87
|
border-radius: var(--a-border-radius-full);
|
|
83
88
|
}
|
|
84
89
|
|
|
85
90
|
.navds-chips__toggle-icon {
|
|
86
|
-
width: 1.
|
|
87
|
-
height: 1.
|
|
91
|
+
width: 1.5rem;
|
|
92
|
+
height: 1.5rem;
|
|
88
93
|
display: grid;
|
|
89
94
|
place-items: center;
|
|
90
95
|
border-radius: var(--a-border-radius-full);
|
|
91
96
|
}
|
|
92
97
|
|
|
93
98
|
.navds-chips--small .navds-chips__toggle-icon {
|
|
94
|
-
width:
|
|
95
|
-
height:
|
|
99
|
+
width: 1.25rem;
|
|
100
|
+
height: 1.25rem;
|
|
96
101
|
}
|
|
97
102
|
|
|
98
103
|
.navds-chips--small .navds-chips__removable-icon {
|
|
@@ -101,7 +106,7 @@
|
|
|
101
106
|
}
|
|
102
107
|
|
|
103
108
|
.navds-chips--small .navds-chips__removable-icon > svg {
|
|
104
|
-
width:
|
|
109
|
+
width: 1rem;
|
|
105
110
|
}
|
|
106
111
|
|
|
107
112
|
.navds-chips__removable--action:focus-visible {
|
|
@@ -126,7 +131,7 @@
|
|
|
126
131
|
}
|
|
127
132
|
|
|
128
133
|
.navds-chips--icon-right {
|
|
129
|
-
padding-right:
|
|
134
|
+
padding-right: 0.375rem;
|
|
130
135
|
}
|
|
131
136
|
|
|
132
137
|
.navds-chips--small .navds-chips--icon-right {
|
package/date.css
CHANGED
|
@@ -2,30 +2,79 @@
|
|
|
2
2
|
position: relative;
|
|
3
3
|
}
|
|
4
4
|
|
|
5
|
+
/*************************
|
|
6
|
+
* Header *
|
|
7
|
+
*************************/
|
|
8
|
+
|
|
5
9
|
.navds-accordion__header {
|
|
10
|
+
--__ac-accordion-header-shadow-color: var(--ac-accordion-header-border, var(--a-border-divider));
|
|
11
|
+
--__ac-accordion-header-shadow: inset 2px 0 0 0 var(--a-transparent), inset -2px 0 0 0 var(--a-transparent),
|
|
12
|
+
inset 0 2px 0 0 var(--__ac-accordion-header-shadow-color);
|
|
13
|
+
|
|
6
14
|
width: 100%;
|
|
7
15
|
display: flex;
|
|
8
|
-
justify-content:
|
|
16
|
+
justify-content: flex-start;
|
|
9
17
|
align-items: flex-start;
|
|
10
18
|
gap: var(--a-spacing-2);
|
|
11
|
-
padding:
|
|
19
|
+
padding: var(--a-spacing-3);
|
|
12
20
|
margin: 0;
|
|
13
21
|
text-align: left;
|
|
14
22
|
background: var(--ac-accordion-header-bg, var(--a-surface-transparent));
|
|
15
23
|
cursor: pointer;
|
|
16
24
|
border: none;
|
|
17
|
-
|
|
25
|
+
position: relative;
|
|
26
|
+
box-shadow: var(--__ac-accordion-header-shadow);
|
|
27
|
+
z-index: 1;
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
.navds-accordion__header:hover {
|
|
31
|
+
background-color: var(--ac-accordion-header-bg-hover, var(--a-surface-hover));
|
|
32
|
+
text-decoration: underline;
|
|
33
|
+
color: var(--ac-accordion-header-text-hover, inherit);
|
|
18
34
|
}
|
|
19
35
|
|
|
20
|
-
.navds-accordion__header
|
|
36
|
+
.navds-accordion--small .navds-accordion__header {
|
|
37
|
+
padding: var(--a-spacing-2) var(--a-spacing-3);
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
.navds-accordion--medium .navds-accordion__header {
|
|
41
|
+
padding: var(--a-spacing-3);
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
.navds-accordion--large .navds-accordion__header {
|
|
45
|
+
padding: var(--a-spacing-4) var(--a-spacing-3);
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
.navds-accordion__item:last-child > :where(.navds-accordion__header) {
|
|
49
|
+
box-shadow: var(--__ac-accordion-header-shadow), inset 0 -2px 0 0 var(--__ac-accordion-header-shadow-color);
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
.navds-accordion__item:last-child:where(.navds-accordion__item--open) :where(.navds-accordion__header) {
|
|
53
|
+
box-shadow: inset 2px 0 0 0 var(--a-transparent), inset -2px 0 0 0 var(--a-transparent), inset 0 2px 0 0 var(--a-transparent),
|
|
54
|
+
inset 0 2px 0 0 var(--__ac-accordion-header-shadow-color);
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
.navds-accordion__item:last-child:where(.navds-accordion__item--open) {
|
|
58
|
+
box-shadow: inset 2px 0 0 0 var(--a-transparent), inset -2px 0 0 0 var(--a-transparent), inset 0 2px 0 0 var(--a-transparent),
|
|
59
|
+
inset 0 -2px 0 0 var(--__ac-accordion-header-shadow-color);
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
.navds-accordion__item--open > :where(.navds-accordion__header) {
|
|
63
|
+
box-shadow: var(--__ac-accordion-header-shadow);
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
.navds-accordion__header:focus-visible {
|
|
21
67
|
outline: none;
|
|
22
68
|
box-shadow: var(--a-shadow-focus);
|
|
69
|
+
border-radius: var(--a-border-radius-large);
|
|
23
70
|
}
|
|
24
71
|
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
72
|
+
@supports not selector(:focus-visible) {
|
|
73
|
+
.navds-accordion__header:focus {
|
|
74
|
+
outline: none;
|
|
75
|
+
box-shadow: var(--a-shadow-focus);
|
|
76
|
+
border-radius: var(--a-border-radius-large);
|
|
77
|
+
}
|
|
29
78
|
}
|
|
30
79
|
|
|
31
80
|
.navds-accordion__header-content {
|
|
@@ -33,42 +82,95 @@
|
|
|
33
82
|
text-overflow: ellipsis;
|
|
34
83
|
}
|
|
35
84
|
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
}
|
|
40
|
-
|
|
41
|
-
.navds-accordion__item--open > :where(.navds-accordion__header:hover) {
|
|
42
|
-
background-color: var(--ac-accordion-header-bg-open-hover, var(--a-surface-action-subtle));
|
|
43
|
-
}
|
|
85
|
+
/*************************
|
|
86
|
+
* Icon *
|
|
87
|
+
*************************/
|
|
44
88
|
|
|
45
|
-
.navds-
|
|
46
|
-
|
|
47
|
-
|
|
89
|
+
.navds-accordion__icon-wrapper {
|
|
90
|
+
display: grid;
|
|
91
|
+
place-content: center;
|
|
92
|
+
border-radius: var(--a-border-radius-medium);
|
|
93
|
+
height: var(--a-spacing-6);
|
|
94
|
+
width: var(--a-spacing-6);
|
|
95
|
+
align-self: center;
|
|
48
96
|
}
|
|
49
97
|
|
|
50
|
-
.navds-
|
|
51
|
-
|
|
98
|
+
.navds-accordion__header:hover > .navds-accordion__icon-wrapper {
|
|
99
|
+
background-color: var(--ac-accordion-header-icon-bg-hover, var(--a-surface-neutral-subtle-hover));
|
|
52
100
|
}
|
|
53
101
|
|
|
54
|
-
.navds-
|
|
102
|
+
.navds-accordion__header-chevron {
|
|
103
|
+
border-radius: var(--a-border-radius-medium);
|
|
55
104
|
font-size: 1.5rem;
|
|
56
105
|
height: 1.75rem;
|
|
57
106
|
flex-shrink: 0;
|
|
107
|
+
transition: transform 150ms ease-in-out;
|
|
108
|
+
align-self: center;
|
|
58
109
|
}
|
|
59
110
|
|
|
60
|
-
.navds-
|
|
61
|
-
transform:
|
|
111
|
+
:where(.navds-accordion__header):hover > :where(.navds-accordion__icon-wrapper) > :where(.navds-accordion__header-chevron) {
|
|
112
|
+
transform: translateY(1px);
|
|
62
113
|
}
|
|
63
114
|
|
|
64
|
-
.navds-
|
|
65
|
-
|
|
115
|
+
.navds-accordion__item--open
|
|
116
|
+
> :where(.navds-accordion__header)
|
|
117
|
+
> :where(.navds-accordion__icon-wrapper)
|
|
118
|
+
> :where(.navds-accordion__header-chevron) {
|
|
119
|
+
transform: translateY(0) rotate(-180deg);
|
|
66
120
|
}
|
|
67
121
|
|
|
68
|
-
.navds-
|
|
69
|
-
|
|
122
|
+
.navds-accordion__item--open
|
|
123
|
+
> :where(.navds-accordion__header):hover
|
|
124
|
+
> :where(.navds-accordion__icon-wrapper)
|
|
125
|
+
> :where(.navds-accordion__header-chevron) {
|
|
126
|
+
transform: translateY(-1px) rotate(-180deg);
|
|
127
|
+
}
|
|
128
|
+
|
|
129
|
+
/*************************
|
|
130
|
+
* Variant/Default *
|
|
131
|
+
*************************/
|
|
132
|
+
|
|
133
|
+
.navds-accordion__item--open {
|
|
134
|
+
background-color: var(--ac-accordion-item-bg-open, var(--a-transparent));
|
|
135
|
+
}
|
|
136
|
+
|
|
137
|
+
/*************************
|
|
138
|
+
* Variant/Neutral *
|
|
139
|
+
*************************/
|
|
140
|
+
|
|
141
|
+
.navds-accordion__item--open.navds-accordion__item--neutral {
|
|
142
|
+
background-color: var(--ac-accordion-neutral-item-bg-open, var(--a-surface-neutral-subtle));
|
|
70
143
|
}
|
|
71
144
|
|
|
72
|
-
|
|
145
|
+
/*************************
|
|
146
|
+
* Content *
|
|
147
|
+
*************************/
|
|
148
|
+
|
|
149
|
+
.navds-accordion__content {
|
|
150
|
+
padding: 0 var(--a-spacing-3) var(--a-spacing-5) var(--a-spacing-11);
|
|
151
|
+
animation: fadeAccordionContent 250ms ease;
|
|
152
|
+
}
|
|
153
|
+
|
|
154
|
+
.navds-accordion__content--closed {
|
|
73
155
|
display: none;
|
|
74
156
|
}
|
|
157
|
+
|
|
158
|
+
.navds-accordion__item--no-animation :where(.navds-accordion__content) {
|
|
159
|
+
animation: none;
|
|
160
|
+
}
|
|
161
|
+
|
|
162
|
+
@keyframes fadeAccordionContent {
|
|
163
|
+
0% {
|
|
164
|
+
opacity: 0.25;
|
|
165
|
+
transform: translateY(-8px);
|
|
166
|
+
}
|
|
167
|
+
|
|
168
|
+
40% {
|
|
169
|
+
opacity: 0.7;
|
|
170
|
+
}
|
|
171
|
+
|
|
172
|
+
100% {
|
|
173
|
+
opacity: 1;
|
|
174
|
+
transform: translateY(0);
|
|
175
|
+
}
|
|
176
|
+
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.navds-accordion__item:focus-within{position:relative}.navds-accordion__header{align-items:flex-start;background:var(--ac-accordion-header-bg,var(--a-surface-transparent));border:none;
|
|
1
|
+
.navds-accordion__item:focus-within{position:relative}.navds-accordion__header{--__ac-accordion-header-shadow-color:var(--ac-accordion-header-border,var(--a-border-divider));--__ac-accordion-header-shadow:inset 2px 0 0 0 var(--a-transparent),inset -2px 0 0 0 var(--a-transparent),inset 0 2px 0 0 var(--__ac-accordion-header-shadow-color);align-items:flex-start;background:var(--ac-accordion-header-bg,var(--a-surface-transparent));border:none;box-shadow:var(--__ac-accordion-header-shadow);cursor:pointer;display:flex;gap:var(--a-spacing-2);justify-content:flex-start;margin:0;padding:var(--a-spacing-3);position:relative;text-align:left;width:100%;z-index:1}.navds-accordion__header:hover{background-color:var(--ac-accordion-header-bg-hover,var(--a-surface-hover));color:var(--ac-accordion-header-text-hover,inherit);text-decoration:underline}.navds-accordion--small .navds-accordion__header{padding:var(--a-spacing-2) var(--a-spacing-3)}.navds-accordion--medium .navds-accordion__header{padding:var(--a-spacing-3)}.navds-accordion--large .navds-accordion__header{padding:var(--a-spacing-4) var(--a-spacing-3)}.navds-accordion__item:last-child>:where(.navds-accordion__header){box-shadow:var(--__ac-accordion-header-shadow),inset 0 -2px 0 0 var(--__ac-accordion-header-shadow-color)}.navds-accordion__item:last-child:where(.navds-accordion__item--open) :where(.navds-accordion__header){box-shadow:inset 2px 0 0 0 var(--a-transparent),inset -2px 0 0 0 var(--a-transparent),inset 0 2px 0 0 var(--a-transparent),inset 0 2px 0 0 var(--__ac-accordion-header-shadow-color)}.navds-accordion__item:last-child:where(.navds-accordion__item--open){box-shadow:inset 2px 0 0 0 var(--a-transparent),inset -2px 0 0 0 var(--a-transparent),inset 0 2px 0 0 var(--a-transparent),inset 0 -2px 0 0 var(--__ac-accordion-header-shadow-color)}.navds-accordion__item--open>:where(.navds-accordion__header){box-shadow:var(--__ac-accordion-header-shadow)}.navds-accordion__header:focus-visible{border-radius:var(--a-border-radius-large);box-shadow:var(--a-shadow-focus);outline:none}@supports not selector(:focus-visible){.navds-accordion__header:focus{border-radius:var(--a-border-radius-large);box-shadow:var(--a-shadow-focus);outline:none}}.navds-accordion__header-content{overflow:hidden;text-overflow:ellipsis}.navds-accordion__icon-wrapper{align-self:center;border-radius:var(--a-border-radius-medium);display:grid;height:var(--a-spacing-6);place-content:center;width:var(--a-spacing-6)}.navds-accordion__header:hover>.navds-accordion__icon-wrapper{background-color:var(--ac-accordion-header-icon-bg-hover,var(--a-surface-neutral-subtle-hover))}.navds-accordion__header-chevron{align-self:center;border-radius:var(--a-border-radius-medium);flex-shrink:0;font-size:1.5rem;height:1.75rem;transition:-webkit-transform .15s ease-in-out;transition:transform .15s ease-in-out;transition:transform .15s ease-in-out,-webkit-transform .15s ease-in-out}:where(.navds-accordion__header):hover>:where(.navds-accordion__icon-wrapper)>:where(.navds-accordion__header-chevron){-webkit-transform:translateY(1px);transform:translateY(1px)}.navds-accordion__item--open>:where(.navds-accordion__header)>:where(.navds-accordion__icon-wrapper)>:where(.navds-accordion__header-chevron){-webkit-transform:translateY(0) rotate(-180deg);transform:translateY(0) rotate(-180deg)}.navds-accordion__item--open>:where(.navds-accordion__header):hover>:where(.navds-accordion__icon-wrapper)>:where(.navds-accordion__header-chevron){-webkit-transform:translateY(-1px) rotate(-180deg);transform:translateY(-1px) rotate(-180deg)}.navds-accordion__item--open{background-color:var(--ac-accordion-item-bg-open,var(--a-transparent))}.navds-accordion__item--open.navds-accordion__item--neutral{background-color:var(--ac-accordion-neutral-item-bg-open,var(--a-surface-neutral-subtle))}.navds-accordion__content{-webkit-animation:fadeAccordionContent .25s ease;animation:fadeAccordionContent .25s ease;padding:0 var(--a-spacing-3) var(--a-spacing-5) var(--a-spacing-11)}.navds-accordion__content--closed{display:none}.navds-accordion__item--no-animation :where(.navds-accordion__content){-webkit-animation:none;animation:none}@-webkit-keyframes fadeAccordionContent{0%{opacity:.25;-webkit-transform:translateY(-8px);transform:translateY(-8px)}40%{opacity:.7}to{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}@keyframes fadeAccordionContent{0%{opacity:.25;-webkit-transform:translateY(-8px);transform:translateY(-8px)}40%{opacity:.7}to{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}
|
package/dist/component/alert.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.navds-alert{align-items:center;border:1px solid;border-radius:var(--a-border-radius-medium);display:flex;gap:var(--a-spacing-3);padding:var(--a-spacing-4)}.navds-alert__wrapper{max-width:43.5rem}.navds-alert--small{padding:var(--a-spacing-2) var(--a-spacing-4)}.navds-alert--full-width{border-radius:0}.navds-alert>.navds-alert__icon{align-self:flex-start;background:radial-gradient(circle,var(--a-surface-default) 50%,0,transparent);flex-shrink:0;font-size:1.5rem;height:var(--a-font-line-height-xlarge)}.navds-alert--small>.navds-alert__icon{
|
|
1
|
+
.navds-alert{align-items:center;border:1px solid;border-radius:var(--a-border-radius-medium);display:flex;gap:var(--a-spacing-3);padding:var(--a-spacing-4)}.navds-alert__wrapper{max-width:43.5rem}.navds-alert--small{padding:var(--a-spacing-2) var(--a-spacing-4)}.navds-alert--full-width{border-radius:0}.navds-alert>.navds-alert__icon{align-self:flex-start;background:radial-gradient(circle,var(--a-surface-default) 50%,0,transparent);flex-shrink:0;font-size:1.5rem;height:var(--a-font-line-height-xlarge)}.navds-alert--small>.navds-alert__icon{height:var(--a-font-line-height-large)}.navds-alert--error{background-color:var(--ac-alert-error-bg,var(--a-surface-danger-subtle));border-color:var(--ac-alert-error-border,var(--a-border-danger))}.navds-alert--error>.navds-alert__icon{color:var(--ac-alert-icon-error-color,var(--a-icon-danger))}.navds-alert--warning{background-color:var(--ac-alert-warning-bg,var(--a-surface-warning-subtle));border-color:var(--ac-alert-warning-border,var(--a-border-warning))}.navds-alert--warning>.navds-alert__icon{background:radial-gradient(circle at 50% 57%,var(--a-surface-default) 32%,0,transparent);color:var(--ac-alert-icon-warning-color,var(--a-icon-warning))}.navds-alert--info{background-color:var(--ac-alert-info-bg,var(--a-surface-info-subtle));border-color:var(--ac-alert-info-border,var(--a-border-info))}.navds-alert--info>.navds-alert__icon{color:var(--ac-alert-icon-info-color,var(--a-icon-info))}.navds-alert--success{background-color:var(--ac-alert-success-bg,var(--a-surface-success-subtle));border-color:var(--ac-alert-success-border,var(--a-border-success))}.navds-alert--success>.navds-alert__icon{color:var(--ac-alert-icon-success-color,var(--a-icon-success))}.navds-alert--inline{background-color:transparent;border:none;padding:0}
|
|
@@ -32,9 +32,10 @@
|
|
|
32
32
|
}
|
|
33
33
|
|
|
34
34
|
.navds-button--small {
|
|
35
|
-
--__ac-button-padding:
|
|
35
|
+
--__ac-button-padding: var(--a-spacing-1) var(--a-spacing-3);
|
|
36
36
|
|
|
37
37
|
padding: var(--ac-button-padding-small, var(--__ac-button-padding));
|
|
38
|
+
min-height: 2rem;
|
|
38
39
|
}
|
|
39
40
|
|
|
40
41
|
.navds-button--xsmall {
|
|
@@ -51,13 +52,13 @@
|
|
|
51
52
|
}
|
|
52
53
|
|
|
53
54
|
.navds-button--small.navds-button--icon-only {
|
|
54
|
-
--__ac-button-padding:
|
|
55
|
+
--__ac-button-padding: var(--a-spacing-1);
|
|
55
56
|
|
|
56
57
|
padding: var(--ac-button-padding-icon-only-small, var(--__ac-button-padding));
|
|
57
58
|
}
|
|
58
59
|
|
|
59
60
|
.navds-button--xsmall.navds-button--icon-only {
|
|
60
|
-
--__ac-button-padding: var(--a-spacing-
|
|
61
|
+
--__ac-button-padding: var(--a-spacing-05);
|
|
61
62
|
|
|
62
63
|
padding: var(--ac-button-padding-icon-only-xsmall, var(--__ac-button-padding));
|
|
63
64
|
}
|
|
@@ -88,14 +89,12 @@
|
|
|
88
89
|
|
|
89
90
|
.navds-button--small .navds-button__icon {
|
|
90
91
|
--ac-button-icon-margin: -2px;
|
|
91
|
-
|
|
92
|
-
font-size: 1.25rem;
|
|
93
92
|
}
|
|
94
93
|
|
|
95
94
|
.navds-button--xsmall .navds-button__icon {
|
|
96
95
|
--ac-button-icon-margin: -2px;
|
|
97
96
|
|
|
98
|
-
font-size:
|
|
97
|
+
font-size: 1.25rem;
|
|
99
98
|
}
|
|
100
99
|
|
|
101
100
|
/*************************
|