@navikt/ds-css 5.4.1 → 5.6.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 +32 -0
- package/accordion.css +2 -2
- package/baseline/_utilities.css +2 -0
- package/config/_mappings.js +29 -25
- package/date.css +59 -21
- package/dist/component/accordion.css +2 -2
- package/dist/component/accordion.min.css +1 -1
- package/dist/component/date.css +59 -21
- package/dist/component/date.min.css +1 -1
- package/dist/component/form.css +1 -0
- package/dist/component/form.min.css +1 -1
- package/dist/component/index.css +348 -138
- package/dist/component/index.min.css +4 -6
- package/dist/component/primitives.css +218 -37
- package/dist/component/primitives.min.css +2 -4
- package/dist/component/skeleton.css +4 -0
- package/dist/component/skeleton.min.css +1 -1
- package/dist/component/timeline.css +2 -5
- package/dist/component/timeline.min.css +1 -1
- package/dist/components.css +286 -65
- package/dist/components.min.css +3 -5
- package/dist/global/baseline.css +2 -0
- package/dist/global/baseline.min.css +1 -1
- package/dist/global/tokens.css +76 -76
- package/dist/global/tokens.min.css +1 -1
- package/dist/index.css +348 -138
- package/dist/index.min.css +4 -6
- package/form/select.css +1 -0
- package/package.json +2 -2
- package/primitives/bleed.css +87 -0
- package/primitives/box.css +75 -0
- package/primitives/index.css +2 -0
- package/primitives/responsive.css +16 -20
- package/primitives/stack.css +38 -17
- package/skeleton.css +4 -0
- package/timeline.css +2 -5
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,37 @@
|
|
|
1
1
|
# @navikt/ds-css
|
|
2
2
|
|
|
3
|
+
## 5.6.0
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- Primitives: ny komponent Bleed ([#2278](https://github.com/navikt/aksel/pull/2278))
|
|
8
|
+
|
|
9
|
+
### Patch Changes
|
|
10
|
+
|
|
11
|
+
- :recycle: Box: Forenkling av CSS-variabler ([#2279](https://github.com/navikt/aksel/pull/2279))
|
|
12
|
+
|
|
13
|
+
- Accordion: Har nå 0.25rem padding-top mellom innhold og heading. ([#2310](https://github.com/navikt/aksel/pull/2310))
|
|
14
|
+
|
|
15
|
+
- Added cursor:pointer to Select component ([#2293](https://github.com/navikt/aksel/pull/2293))
|
|
16
|
+
|
|
17
|
+
- :bug: Box: sett border-radius riktig ([#2329](https://github.com/navikt/aksel/pull/2329))
|
|
18
|
+
|
|
19
|
+
- Stack: Kan nå endre direction, justify og align ved brekkpunkt. `Stack` er også nå en egen komponent sammen med `HStack` og `VStack`. ([#2286](https://github.com/navikt/aksel/pull/2286))
|
|
20
|
+
|
|
21
|
+
- Datepicker: Tilpasset padding og sizing på mobil. ([#2311](https://github.com/navikt/aksel/pull/2311))
|
|
22
|
+
|
|
23
|
+
- MonthPicker: Tilpasset padding og sizing på mobil. ([#2311](https://github.com/navikt/aksel/pull/2311))
|
|
24
|
+
|
|
25
|
+
## 5.5.0
|
|
26
|
+
|
|
27
|
+
### Minor Changes
|
|
28
|
+
|
|
29
|
+
- Box: Ny primitive, erstatter dagens `Panel` ([#2195](https://github.com/navikt/aksel/pull/2195))
|
|
30
|
+
|
|
31
|
+
### Patch Changes
|
|
32
|
+
|
|
33
|
+
- Skeleton: Width fungerer nå med inline-variant av Skeleton ([#2273](https://github.com/navikt/aksel/pull/2273))
|
|
34
|
+
|
|
3
35
|
## 5.4.1
|
|
4
36
|
|
|
5
37
|
## 5.4.0
|
package/accordion.css
CHANGED
|
@@ -146,12 +146,12 @@
|
|
|
146
146
|
*************************/
|
|
147
147
|
|
|
148
148
|
.navds-accordion__content {
|
|
149
|
-
padding:
|
|
149
|
+
padding: var(--a-spacing-1) var(--a-spacing-3) var(--a-spacing-5);
|
|
150
150
|
animation: fadeAccordionContent 250ms ease;
|
|
151
151
|
}
|
|
152
152
|
|
|
153
153
|
.navds-accordion--indent > :where(.navds-accordion__item) > :where(.navds-accordion__content) {
|
|
154
|
-
padding:
|
|
154
|
+
padding: var(--a-spacing-1) var(--a-spacing-3) var(--a-spacing-5) var(--a-spacing-11);
|
|
155
155
|
}
|
|
156
156
|
|
|
157
157
|
.navds-accordion__content--closed {
|
package/baseline/_utilities.css
CHANGED
|
@@ -28,6 +28,7 @@
|
|
|
28
28
|
.navds-sr-only {
|
|
29
29
|
border: 0;
|
|
30
30
|
clip: rect(0, 0, 0, 0);
|
|
31
|
+
clip-path: inset(50%);
|
|
31
32
|
height: 1px;
|
|
32
33
|
margin: -1px;
|
|
33
34
|
overflow: hidden;
|
|
@@ -50,6 +51,7 @@
|
|
|
50
51
|
.navds-sr-only.focusable:active,
|
|
51
52
|
.navds-sr-only.focusable:focus {
|
|
52
53
|
clip: auto;
|
|
54
|
+
clip-path: none;
|
|
53
55
|
height: auto;
|
|
54
56
|
margin: 0;
|
|
55
57
|
overflow: visible;
|
package/config/_mappings.js
CHANGED
|
@@ -31,6 +31,34 @@ const StyleMappings = {
|
|
|
31
31
|
},
|
|
32
32
|
],
|
|
33
33
|
components: [
|
|
34
|
+
{
|
|
35
|
+
component: "Box",
|
|
36
|
+
main: primitivesCss,
|
|
37
|
+
},
|
|
38
|
+
{
|
|
39
|
+
component: "HGrid",
|
|
40
|
+
main: primitivesCss,
|
|
41
|
+
},
|
|
42
|
+
{
|
|
43
|
+
component: "HStack",
|
|
44
|
+
main: primitivesCss,
|
|
45
|
+
},
|
|
46
|
+
{
|
|
47
|
+
component: "VStack",
|
|
48
|
+
main: primitivesCss,
|
|
49
|
+
},
|
|
50
|
+
{
|
|
51
|
+
component: "Spacer",
|
|
52
|
+
main: primitivesCss,
|
|
53
|
+
},
|
|
54
|
+
{
|
|
55
|
+
component: "Show",
|
|
56
|
+
main: primitivesCss,
|
|
57
|
+
},
|
|
58
|
+
{
|
|
59
|
+
component: "Hide",
|
|
60
|
+
main: primitivesCss,
|
|
61
|
+
},
|
|
34
62
|
{
|
|
35
63
|
component: "Accordion",
|
|
36
64
|
main: "accordion.css",
|
|
@@ -100,10 +128,6 @@ const StyleMappings = {
|
|
|
100
128
|
main: "help-text.css",
|
|
101
129
|
dependencies: ["popover.css"],
|
|
102
130
|
},
|
|
103
|
-
{
|
|
104
|
-
component: "HGrid",
|
|
105
|
-
main: primitivesCss,
|
|
106
|
-
},
|
|
107
131
|
{ component: "Ingress", main: typoCss },
|
|
108
132
|
{
|
|
109
133
|
component: "InternalHeader",
|
|
@@ -139,26 +163,6 @@ const StyleMappings = {
|
|
|
139
163
|
{ component: "Select", main: formCss, dependencies: [typoCss] },
|
|
140
164
|
{ component: "Skeleton", main: "skeleton.css", dependencies: [] },
|
|
141
165
|
{ component: "Stepper", main: "stepper.css", dependencies: [typoCss] },
|
|
142
|
-
{
|
|
143
|
-
component: "HStack",
|
|
144
|
-
main: primitivesCss,
|
|
145
|
-
},
|
|
146
|
-
{
|
|
147
|
-
component: "VStack",
|
|
148
|
-
main: primitivesCss,
|
|
149
|
-
},
|
|
150
|
-
{
|
|
151
|
-
component: "Spacer",
|
|
152
|
-
main: primitivesCss,
|
|
153
|
-
},
|
|
154
|
-
{
|
|
155
|
-
component: "Show",
|
|
156
|
-
main: primitivesCss,
|
|
157
|
-
},
|
|
158
|
-
{
|
|
159
|
-
component: "Hide",
|
|
160
|
-
main: primitivesCss,
|
|
161
|
-
},
|
|
162
166
|
{ component: "Switch", main: formCss, dependencies: [typoCss] },
|
|
163
167
|
{ component: "Table", main: "table.css", dependencies: [typoCss] },
|
|
164
168
|
{ component: "Tabs", main: "tabs.css", dependencies: [typoCss] },
|
|
@@ -179,7 +183,7 @@ const StyleMappings = {
|
|
|
179
183
|
{
|
|
180
184
|
component: "DatePicker",
|
|
181
185
|
main: "date.css",
|
|
182
|
-
dependencies: [typoCss, "button.css", "popover.css"],
|
|
186
|
+
dependencies: [typoCss, primitivesCss, "button.css", "popover.css"],
|
|
183
187
|
},
|
|
184
188
|
{
|
|
185
189
|
component: "MonthPicker",
|
package/date.css
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
.navds-date {
|
|
2
|
-
padding: var(--a-spacing-3);
|
|
2
|
+
padding: var(--a-spacing-4) var(--a-spacing-3);
|
|
3
3
|
}
|
|
4
4
|
|
|
5
5
|
.navds-date .rdp-day_range_middle.rdp-day_disabled {
|
|
@@ -23,28 +23,29 @@
|
|
|
23
23
|
}
|
|
24
24
|
|
|
25
25
|
.navds-date .rdp-weeknumber {
|
|
26
|
-
color: var(--ac-date-week-text, var(--a-text-on-neutral));
|
|
27
|
-
background: var(--ac-date-week-bg, var(--a-surface-neutral));
|
|
28
26
|
font-size: var(--a-font-size-small);
|
|
29
27
|
display: flex;
|
|
30
|
-
justify-content: center;
|
|
31
28
|
align-items: center;
|
|
32
|
-
|
|
33
|
-
|
|
29
|
+
justify-content: center;
|
|
30
|
+
width: 2rem;
|
|
31
|
+
height: 2rem;
|
|
32
|
+
border-radius: var(--a-border-radius-medium);
|
|
33
|
+
margin: var(--a-spacing-2);
|
|
34
|
+
color: var(--a-text-subtle);
|
|
34
35
|
}
|
|
35
36
|
|
|
36
|
-
.navds-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
37
|
+
.navds-date .rdp-weeknumber.rdp-button {
|
|
38
|
+
width: 2rem;
|
|
39
|
+
height: 2rem;
|
|
40
|
+
box-shadow: 0 0 0 1px var(--a-border-default);
|
|
41
|
+
color: var(--a-text-subtle);
|
|
42
|
+
font-size: var(--a-font-size-small);
|
|
41
43
|
}
|
|
42
44
|
|
|
43
|
-
.navds-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
align-items: center;
|
|
45
|
+
.navds-date .rdp-weeknumber.rdp-button:active {
|
|
46
|
+
background-color: var(--a-surface-action-active);
|
|
47
|
+
color: var(--a-text-on-action);
|
|
48
|
+
box-shadow: none;
|
|
48
49
|
}
|
|
49
50
|
|
|
50
51
|
.navds-date__caption__month .navds-select__container select {
|
|
@@ -53,6 +54,7 @@
|
|
|
53
54
|
|
|
54
55
|
.navds-date .rdp-button {
|
|
55
56
|
all: unset;
|
|
57
|
+
display: block;
|
|
56
58
|
width: 2.5rem;
|
|
57
59
|
height: 2.5rem;
|
|
58
60
|
text-align: center;
|
|
@@ -60,13 +62,13 @@
|
|
|
60
62
|
}
|
|
61
63
|
|
|
62
64
|
.navds-date .rdp-day_range_start {
|
|
63
|
-
border-radius: var(--a-border-radius-xlarge) var(--a-border-radius-
|
|
65
|
+
border-radius: var(--a-border-radius-xlarge) var(--a-border-radius-medium) var(--a-border-radius-medium)
|
|
64
66
|
var(--a-border-radius-xlarge);
|
|
65
67
|
}
|
|
66
68
|
|
|
67
69
|
.navds-date .rdp-day_range_end:not(.rdp-day_range_start) {
|
|
68
|
-
border-radius: var(--a-border-radius-
|
|
69
|
-
var(--a-border-radius-
|
|
70
|
+
border-radius: var(--a-border-radius-medium) var(--a-border-radius-xlarge) var(--a-border-radius-xlarge)
|
|
71
|
+
var(--a-border-radius-medium);
|
|
70
72
|
}
|
|
71
73
|
|
|
72
74
|
.navds-date .rdp-day_range_start.rdp-day_range_end {
|
|
@@ -102,7 +104,7 @@
|
|
|
102
104
|
all: unset;
|
|
103
105
|
text-align: center;
|
|
104
106
|
width: 3rem;
|
|
105
|
-
height:
|
|
107
|
+
height: 3rem;
|
|
106
108
|
text-transform: capitalize;
|
|
107
109
|
border-radius: var(--a-border-radius-medium);
|
|
108
110
|
cursor: pointer;
|
|
@@ -188,7 +190,8 @@
|
|
|
188
190
|
display: flex;
|
|
189
191
|
justify-content: space-between;
|
|
190
192
|
align-items: center;
|
|
191
|
-
gap: var(--a-spacing-
|
|
193
|
+
gap: var(--a-spacing-1);
|
|
194
|
+
padding-inline: var(--a-spacing-1);
|
|
192
195
|
}
|
|
193
196
|
|
|
194
197
|
.navds-date__caption-button,
|
|
@@ -287,3 +290,38 @@
|
|
|
287
290
|
.navds-date__field--readonly .navds-date__field-button {
|
|
288
291
|
cursor: default;
|
|
289
292
|
}
|
|
293
|
+
|
|
294
|
+
.navds-date__caption-button {
|
|
295
|
+
width: 2rem;
|
|
296
|
+
height: 2rem;
|
|
297
|
+
}
|
|
298
|
+
|
|
299
|
+
.navds-date__week-row {
|
|
300
|
+
display: flex;
|
|
301
|
+
align-items: center;
|
|
302
|
+
gap: var(--a-spacing-05);
|
|
303
|
+
}
|
|
304
|
+
|
|
305
|
+
.navds-date__week-wrapper {
|
|
306
|
+
width: 2.5rem;
|
|
307
|
+
display: flex;
|
|
308
|
+
align-items: center;
|
|
309
|
+
justify-content: center;
|
|
310
|
+
margin: 0;
|
|
311
|
+
}
|
|
312
|
+
|
|
313
|
+
@media (min-width: 480px) {
|
|
314
|
+
.navds-date {
|
|
315
|
+
padding: var(--a-spacing-5) var(--a-spacing-4);
|
|
316
|
+
}
|
|
317
|
+
|
|
318
|
+
.navds-date__caption {
|
|
319
|
+
gap: var(--a-spacing-2);
|
|
320
|
+
}
|
|
321
|
+
|
|
322
|
+
.navds-date .rdp-button,
|
|
323
|
+
.navds-date__caption-button {
|
|
324
|
+
width: 3rem;
|
|
325
|
+
height: 3rem;
|
|
326
|
+
}
|
|
327
|
+
}
|
|
@@ -150,12 +150,12 @@
|
|
|
150
150
|
*************************/
|
|
151
151
|
|
|
152
152
|
.navds-accordion__content {
|
|
153
|
-
padding:
|
|
153
|
+
padding: var(--a-spacing-1) var(--a-spacing-3) var(--a-spacing-5);
|
|
154
154
|
animation: fadeAccordionContent 250ms ease;
|
|
155
155
|
}
|
|
156
156
|
|
|
157
157
|
.navds-accordion--indent > :where(.navds-accordion__item) > :where(.navds-accordion__content) {
|
|
158
|
-
padding:
|
|
158
|
+
padding: var(--a-spacing-1) var(--a-spacing-3) var(--a-spacing-5) var(--a-spacing-11);
|
|
159
159
|
}
|
|
160
160
|
|
|
161
161
|
.navds-accordion__content--closed {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.navds-accordion{--__ac-accordion-header-shadow-color:var(--ac-accordion-header-border,var(--a-border-divider))}.navds-accordion__item:focus-within{position:relative}.navds-accordion__header{--__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:
|
|
1
|
+
.navds-accordion{--__ac-accordion-header-shadow-color:var(--ac-accordion-header-border,var(--a-border-divider))}.navds-accordion__item:focus-within{position:relative}.navds-accordion__header{--__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:var(--a-spacing-1) var(--a-spacing-3) var(--a-spacing-5)}.navds-accordion--indent>:where(.navds-accordion__item)>:where(.navds-accordion__content){padding:var(--a-spacing-1) 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/date.css
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
.navds-date {
|
|
2
|
-
padding: var(--a-spacing-3);
|
|
2
|
+
padding: var(--a-spacing-4) var(--a-spacing-3);
|
|
3
3
|
}
|
|
4
4
|
|
|
5
5
|
.navds-date .rdp-day_range_middle.rdp-day_disabled {
|
|
@@ -23,28 +23,29 @@
|
|
|
23
23
|
}
|
|
24
24
|
|
|
25
25
|
.navds-date .rdp-weeknumber {
|
|
26
|
-
color: var(--ac-date-week-text, var(--a-text-on-neutral));
|
|
27
|
-
background: var(--ac-date-week-bg, var(--a-surface-neutral));
|
|
28
26
|
font-size: var(--a-font-size-small);
|
|
29
27
|
display: flex;
|
|
30
|
-
justify-content: center;
|
|
31
28
|
align-items: center;
|
|
32
|
-
|
|
33
|
-
|
|
29
|
+
justify-content: center;
|
|
30
|
+
width: 2rem;
|
|
31
|
+
height: 2rem;
|
|
32
|
+
border-radius: var(--a-border-radius-medium);
|
|
33
|
+
margin: var(--a-spacing-2);
|
|
34
|
+
color: var(--a-text-subtle);
|
|
34
35
|
}
|
|
35
36
|
|
|
36
|
-
.navds-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
37
|
+
.navds-date .rdp-weeknumber.rdp-button {
|
|
38
|
+
width: 2rem;
|
|
39
|
+
height: 2rem;
|
|
40
|
+
box-shadow: 0 0 0 1px var(--a-border-default);
|
|
41
|
+
color: var(--a-text-subtle);
|
|
42
|
+
font-size: var(--a-font-size-small);
|
|
41
43
|
}
|
|
42
44
|
|
|
43
|
-
.navds-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
align-items: center;
|
|
45
|
+
.navds-date .rdp-weeknumber.rdp-button:active {
|
|
46
|
+
background-color: var(--a-surface-action-active);
|
|
47
|
+
color: var(--a-text-on-action);
|
|
48
|
+
box-shadow: none;
|
|
48
49
|
}
|
|
49
50
|
|
|
50
51
|
.navds-date__caption__month .navds-select__container select {
|
|
@@ -53,6 +54,7 @@
|
|
|
53
54
|
|
|
54
55
|
.navds-date .rdp-button {
|
|
55
56
|
all: unset;
|
|
57
|
+
display: block;
|
|
56
58
|
width: 2.5rem;
|
|
57
59
|
height: 2.5rem;
|
|
58
60
|
text-align: center;
|
|
@@ -60,13 +62,13 @@
|
|
|
60
62
|
}
|
|
61
63
|
|
|
62
64
|
.navds-date .rdp-day_range_start {
|
|
63
|
-
border-radius: var(--a-border-radius-xlarge) var(--a-border-radius-
|
|
65
|
+
border-radius: var(--a-border-radius-xlarge) var(--a-border-radius-medium) var(--a-border-radius-medium)
|
|
64
66
|
var(--a-border-radius-xlarge);
|
|
65
67
|
}
|
|
66
68
|
|
|
67
69
|
.navds-date .rdp-day_range_end:not(.rdp-day_range_start) {
|
|
68
|
-
border-radius: var(--a-border-radius-
|
|
69
|
-
var(--a-border-radius-
|
|
70
|
+
border-radius: var(--a-border-radius-medium) var(--a-border-radius-xlarge) var(--a-border-radius-xlarge)
|
|
71
|
+
var(--a-border-radius-medium);
|
|
70
72
|
}
|
|
71
73
|
|
|
72
74
|
.navds-date .rdp-day_range_start.rdp-day_range_end {
|
|
@@ -103,7 +105,7 @@
|
|
|
103
105
|
all: unset;
|
|
104
106
|
text-align: center;
|
|
105
107
|
width: 3rem;
|
|
106
|
-
height:
|
|
108
|
+
height: 3rem;
|
|
107
109
|
text-transform: capitalize;
|
|
108
110
|
border-radius: var(--a-border-radius-medium);
|
|
109
111
|
cursor: pointer;
|
|
@@ -190,7 +192,8 @@
|
|
|
190
192
|
display: flex;
|
|
191
193
|
justify-content: space-between;
|
|
192
194
|
align-items: center;
|
|
193
|
-
gap: var(--a-spacing-
|
|
195
|
+
gap: var(--a-spacing-1);
|
|
196
|
+
padding-inline: var(--a-spacing-1);
|
|
194
197
|
}
|
|
195
198
|
|
|
196
199
|
.navds-date__caption-button,
|
|
@@ -291,3 +294,38 @@
|
|
|
291
294
|
.navds-date__field--readonly .navds-date__field-button {
|
|
292
295
|
cursor: default;
|
|
293
296
|
}
|
|
297
|
+
|
|
298
|
+
.navds-date__caption-button {
|
|
299
|
+
width: 2rem;
|
|
300
|
+
height: 2rem;
|
|
301
|
+
}
|
|
302
|
+
|
|
303
|
+
.navds-date__week-row {
|
|
304
|
+
display: flex;
|
|
305
|
+
align-items: center;
|
|
306
|
+
gap: var(--a-spacing-05);
|
|
307
|
+
}
|
|
308
|
+
|
|
309
|
+
.navds-date__week-wrapper {
|
|
310
|
+
width: 2.5rem;
|
|
311
|
+
display: flex;
|
|
312
|
+
align-items: center;
|
|
313
|
+
justify-content: center;
|
|
314
|
+
margin: 0;
|
|
315
|
+
}
|
|
316
|
+
|
|
317
|
+
@media (min-width: 480px) {
|
|
318
|
+
.navds-date {
|
|
319
|
+
padding: var(--a-spacing-5) var(--a-spacing-4);
|
|
320
|
+
}
|
|
321
|
+
|
|
322
|
+
.navds-date__caption {
|
|
323
|
+
gap: var(--a-spacing-2);
|
|
324
|
+
}
|
|
325
|
+
|
|
326
|
+
.navds-date .rdp-button,
|
|
327
|
+
.navds-date__caption-button {
|
|
328
|
+
width: 3rem;
|
|
329
|
+
height: 3rem;
|
|
330
|
+
}
|
|
331
|
+
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.navds-date{padding:var(--a-spacing-3)}.navds-date .rdp-day_range_middle.rdp-day_disabled{background:var(--ac-date-middle-bg,var(--a-surface-action-selected));color:var(--ac-date-middle-text,var(--a-text-on-action))}.navds-date .rdp-month,.navds-date.rdp-month{display:grid;gap:var(--a-spacing-5)}.navds-date__caption-label{text-transform:capitalize}.navds-date .rdp-head_cell{font-size:var(--a-font-size-small);text-transform:capitalize}.navds-date .rdp-weeknumber{align-items:center;
|
|
1
|
+
.navds-date{padding:var(--a-spacing-4) var(--a-spacing-3)}.navds-date .rdp-day_range_middle.rdp-day_disabled{background:var(--ac-date-middle-bg,var(--a-surface-action-selected));color:var(--ac-date-middle-text,var(--a-text-on-action))}.navds-date .rdp-month,.navds-date.rdp-month{display:grid;gap:var(--a-spacing-5)}.navds-date__caption-label{text-transform:capitalize}.navds-date .rdp-head_cell{font-size:var(--a-font-size-small);text-transform:capitalize}.navds-date .rdp-weeknumber{align-items:center;border-radius:var(--a-border-radius-medium);display:flex;justify-content:center;margin:var(--a-spacing-2)}.navds-date .rdp-weeknumber,.navds-date .rdp-weeknumber.rdp-button{color:var(--a-text-subtle);font-size:var(--a-font-size-small);height:2rem;width:2rem}.navds-date .rdp-weeknumber.rdp-button{box-shadow:0 0 0 1px var(--a-border-default)}.navds-date .rdp-weeknumber.rdp-button:active{background-color:var(--a-surface-action-active);box-shadow:none;color:var(--a-text-on-action)}.navds-date__caption__month .navds-select__container select{text-transform:capitalize}.navds-date .rdp-button{all:unset;border-radius:var(--a-border-radius-medium);display:block;height:2.5rem;text-align:center;width:2.5rem}.navds-date .rdp-day_range_start{border-radius:var(--a-border-radius-xlarge) var(--a-border-radius-medium) var(--a-border-radius-medium) var(--a-border-radius-xlarge)}.navds-date .rdp-day_range_end:not(.rdp-day_range_start){border-radius:var(--a-border-radius-medium) var(--a-border-radius-xlarge) var(--a-border-radius-xlarge) var(--a-border-radius-medium)}.navds-date .rdp-day_range_start.rdp-day_range_end{border-radius:var(--a-border-radius-xlarge)}.navds-date .navds-date__month-button:not(.rdp-day_selected):not([disabled]):focus-visible,.navds-date .rdp-button:not(.rdp-day_selected):not([disabled]):focus-visible{box-shadow:var(--a-shadow-focus)}@supports not selector(:focus-visible){.navds-date .navds-date__month-button:not(.rdp-day_selected):not([disabled]):focus,.navds-date .rdp-button:not(.rdp-day_selected):not([disabled]):focus{box-shadow:var(--a-shadow-focus)}}.navds-date .navds-date__month-button.rdp-day_selected:not([disabled]):focus-visible,.navds-date .rdp-button.rdp-day_selected:not([disabled]):focus-visible{box-shadow:inset 0 0 0 1px var(--a-surface-default),var(--a-shadow-focus)}@supports not selector(:focus-visible){.navds-date .navds-date__month-button.rdp-day_selected:not([disabled]):focus,.navds-date .rdp-button.rdp-day_selected:not([disabled]):focus{box-shadow:inset 0 0 0 1px var(--a-surface-default),var(--a-shadow-focus)}}.navds-date__month-button{all:unset;border-radius:var(--a-border-radius-medium);cursor:pointer;height:3rem;text-align:center;text-transform:capitalize;width:3rem}.navds-date__month-button:focus-visible,.navds-monthpicker__caption-button:focus-visible{box-shadow:var(--a-shadow-focus);z-index:1}@supports not selector(:focus-visible){.navds-date__month-button:focus,.navds-monthpicker__caption-button:focus{box-shadow:var(--a-shadow-focus);z-index:1}}.navds-date__year-label{align-items:center;display:flex}.navds-date__standalone-wrapper,.navds-date__wrapper{height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.navds-date .navds-date__field{display:flex;flex-direction:column;position:relative;width:100%}.navds-date__field-wrapper{align-items:center;display:inline-flex;position:relative;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.navds-date__field-button,.navds-date__field-input:focus-visible{z-index:1}@supports not selector(:focus-visible){.navds-date__field-input:focus{z-index:1}}.navds-date .rdp-day_selected,.navds-monthpicker__month--selected{background:var(--ac-date-selected-bg,var(--a-surface-action-selected));color:var(--ac-date-selected-text,var(--a-text-on-action));cursor:pointer}.navds-date .rdp-day_disabled{background-color:var(--ac-date-disabled-bg,var(--a-surface-neutral-subtle));color:var(--ac-date-disabled-text,var(--a-text-subtle));cursor:not-allowed;text-decoration:line-through}.navds-date .rdp-button:where(:not(.rdp-day_selected):not([disabled])):hover,.navds-date__month-button:where(:not(.rdp-day_selected):not([disabled])):hover{background:var(--ac-date-hover-bg,var(--a-surface-action-subtle-hover));cursor:pointer}.navds-date .rdp-day_today{box-shadow:0 0 0 1px var(--ac-date-today-border,var(--a-border-action-selected));text-decoration:underline}.navds-date__caption{align-items:center;display:flex;gap:var(--a-spacing-1);justify-content:space-between;padding-inline:var(--a-spacing-1)}.navds-date__caption-button,.navds-date__caption-button:disabled,.navds-date__caption-button:disabled:hover{color:var(--ac-date-caption-text,var(--a-text-default))}.navds-date__field-input{padding-right:var(--a-spacing-14)}.navds-form-field--small .navds-date__field-input{padding-right:var(--a-spacing-10)}.navds-date__field--error .navds-date__field-input:not(:hover):not(:disabled){border-color:var(--ac-date-input-error-border,var(--a-border-danger));box-shadow:inset 0 0 0 1px var(--ac-date-input-error-border,var(--a-border-danger))}.navds-date__field--error .navds-date__field-input:focus-visible:not(:hover):not(:disabled){box-shadow:inset 0 0 0 1px var(--ac-date-input-error-border,var(--a-border-danger)),var(--a-shadow-focus)}@supports not selector(:focus-visible){.navds-date__field--error .navds-date__field-input:focus:not(:hover):not(:disabled){box-shadow:inset 0 0 0 1px var(--ac-date-input-error-border,var(--a-border-danger)),var(--a-shadow-focus)}}.navds-date__field-button{align-items:center;background:none;border:none;border-end-start-radius:0;border-radius:calc(var(--a-border-radius-medium) - 1px);border-start-start-radius:0;color:var(--ac-date-input-button-text,var(--a-text-default));cursor:pointer;display:inline-flex;font-size:1.5rem;height:calc(100% - .125rem);justify-content:center;margin:0;padding:var(--a-spacing-3);position:absolute;right:.0625rem;text-decoration:none;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.navds-form-field--small .navds-date__field-button{padding:var(--a-spacing-1)}.navds-date__field-button:hover:where(:not([disabled])){background-color:var(--ac-date-input-button-hover-bg,var(--a-surface-action-subtle-hover));color:var(--ac-date-input-button-hover-text,var(--a-text-action-on-action-subtle))}.navds-form-field--disabled .navds-date__field-button{cursor:not-allowed;opacity:1}.navds-date__field-button:focus-visible{border-radius:var(--a-border-radius-medium);box-shadow:var(--a-shadow-focus);outline:none}@supports not selector(:focus-visible){.navds-date__field-button:focus{box-shadow:var(--a-shadow-focus);outline:none}}.navds-date__caption__year{width:5rem}.navds-date .rdp-day_outside{pointer-events:none;visibility:hidden}.navds-date__popover:where(.navds-popover){border:none}.navds-date__field--readonly .navds-date__field-button{cursor:default}.navds-date__caption-button{height:2rem;width:2rem}.navds-date__week-row{align-items:center;display:flex;gap:var(--a-spacing-05)}.navds-date__week-wrapper{align-items:center;display:flex;justify-content:center;margin:0;width:2.5rem}@media (min-width:480px){.navds-date{padding:var(--a-spacing-5) var(--a-spacing-4)}.navds-date__caption{gap:var(--a-spacing-2)}.navds-date .rdp-button,.navds-date__caption-button{height:3rem;width:3rem}}
|