@navikt/ds-css 8.6.0 → 8.7.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 +12 -0
- package/dist/component/date.css +25 -4
- package/dist/component/date.min.css +1 -1
- package/dist/component/inlinemessage.css +2 -1
- package/dist/component/inlinemessage.min.css +1 -1
- package/dist/components.css +27 -5
- package/dist/components.min.css +1 -1
- package/dist/global/tokens.css +1 -1
- package/dist/global/tokens.min.css +1 -1
- package/dist/index.css +28 -6
- package/dist/index.min.css +1 -1
- package/package.json +2 -2
- package/src/data-table.css +136 -1
- package/src/data-token-filter.css +36 -0
- package/src/date.css +24 -3
- package/src/inline-message.css +2 -1
- package/src/listbox.css +14 -0
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,17 @@
|
|
|
1
1
|
# @navikt/ds-css
|
|
2
2
|
|
|
3
|
+
## 8.7.0
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- Datepicker, MonthPicker: Opening popover now auto-focuses it. ([#4676](https://github.com/navikt/aksel/pull/4676))
|
|
8
|
+
|
|
9
|
+
### Patch Changes
|
|
10
|
+
|
|
11
|
+
- Datepicker: Fixed issue where using `fixedWeeks` still caused layout-changes in some edgecases. ([#4701](https://github.com/navikt/aksel/pull/4701))
|
|
12
|
+
|
|
13
|
+
- InlineMessage: Now uses BodyLong instead of BodyShort. Icon has some small adjustments to align with new typo. ([#4683](https://github.com/navikt/aksel/pull/4683))
|
|
14
|
+
|
|
3
15
|
## 8.6.0
|
|
4
16
|
|
|
5
17
|
## 8.5.2
|
package/dist/component/date.css
CHANGED
|
@@ -2,6 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
@layer aksel.components.modules {
|
|
4
4
|
.aksel-date {
|
|
5
|
+
--__axc-date-button-size: 2.5rem;
|
|
5
6
|
padding: var(--ax-space-16);
|
|
6
7
|
}
|
|
7
8
|
|
|
@@ -13,6 +14,16 @@
|
|
|
13
14
|
padding: 1px;
|
|
14
15
|
}
|
|
15
16
|
|
|
17
|
+
.aksel-date .rdp-cell[data-outside="true"] {
|
|
18
|
+
width: var(--__axc-date-button-size);
|
|
19
|
+
height: var(--__axc-date-button-size);
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
.aksel-date .rdp-cell[data-outside="true"]:empty {
|
|
23
|
+
width: calc(var(--__axc-date-button-size) + 2px);
|
|
24
|
+
height: calc(var(--__axc-date-button-size) + 2px);
|
|
25
|
+
}
|
|
26
|
+
|
|
16
27
|
.aksel-date .rdp-day_range_middle.rdp-day_disabled {
|
|
17
28
|
color: var(--ax-text-neutral);
|
|
18
29
|
background: var(--ax-bg-neutral-moderateA);
|
|
@@ -45,10 +56,10 @@
|
|
|
45
56
|
|
|
46
57
|
.aksel-date .rdp-button {
|
|
47
58
|
all: unset;
|
|
59
|
+
width: var(--__axc-date-button-size);
|
|
60
|
+
height: var(--__axc-date-button-size);
|
|
48
61
|
text-align: center;
|
|
49
62
|
border-radius: var(--ax-radius-8);
|
|
50
|
-
width: 2.5rem;
|
|
51
|
-
height: 2.5rem;
|
|
52
63
|
display: block;
|
|
53
64
|
}
|
|
54
65
|
|
|
@@ -145,6 +156,11 @@
|
|
|
145
156
|
}
|
|
146
157
|
}
|
|
147
158
|
|
|
159
|
+
.aksel-date__popover:focus-visible {
|
|
160
|
+
outline: 3px solid var(--ax-border-focus);
|
|
161
|
+
outline-offset: 3px;
|
|
162
|
+
}
|
|
163
|
+
|
|
148
164
|
.aksel-date__caption {
|
|
149
165
|
justify-content: space-between;
|
|
150
166
|
align-items: center;
|
|
@@ -305,7 +321,12 @@
|
|
|
305
321
|
}
|
|
306
322
|
|
|
307
323
|
@media (min-width: 480px) {
|
|
308
|
-
.aksel-date
|
|
324
|
+
.aksel-date {
|
|
325
|
+
--__axc-date-button-size: 3rem;
|
|
326
|
+
padding: var(--ax-space-20);
|
|
327
|
+
}
|
|
328
|
+
|
|
329
|
+
.aksel-date__modal-body {
|
|
309
330
|
padding: var(--ax-space-20);
|
|
310
331
|
}
|
|
311
332
|
|
|
@@ -313,7 +334,7 @@
|
|
|
313
334
|
gap: var(--ax-space-8);
|
|
314
335
|
}
|
|
315
336
|
|
|
316
|
-
.aksel-
|
|
337
|
+
.aksel-date__caption-button {
|
|
317
338
|
width: 3rem;
|
|
318
339
|
height: 3rem;
|
|
319
340
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer aksel.reset,aksel.theming,aksel.baseline,aksel.print,aksel.typography,aksel.components.core,aksel.components.core.loader,aksel.components.core.button,aksel.components.form;@layer aksel.components.modules{.aksel-date{padding:var(--ax-space-16)}.aksel-date .rdp-table{border-collapse:separate}.aksel-date .rdp-cell{padding:1px}.aksel-date .rdp-day_range_middle.rdp-day_disabled{color:var(--ax-text-neutral);background:var(--ax-bg-neutral-moderateA)}.aksel-date .rdp-day_range_middle.rdp-day_selected{background-color:var(--ax-bg-moderate-pressedA);box-shadow:inset 0 0 0 1px var(--ax-border-subtleA);color:var(--ax-text-neutral)}.aksel-date .rdp-month,.aksel-date.rdp-month{gap:var(--ax-space-20);display:grid}.aksel-date .aksel-date__caption-label{text-transform:capitalize}.aksel-date .rdp-head_cell{text-transform:capitalize;font-size:var(--ax-font-size-small)}.aksel-date .rdp-button{all:unset;text-align:center;border-radius:var(--ax-radius-8);
|
|
1
|
+
@layer aksel.reset,aksel.theming,aksel.baseline,aksel.print,aksel.typography,aksel.components.core,aksel.components.core.loader,aksel.components.core.button,aksel.components.form;@layer aksel.components.modules{.aksel-date{--__axc-date-button-size: 2.5rem;padding:var(--ax-space-16)}.aksel-date .rdp-table{border-collapse:separate}.aksel-date .rdp-cell{padding:1px}.aksel-date .rdp-cell[data-outside=true]{width:var(--__axc-date-button-size);height:var(--__axc-date-button-size)}.aksel-date .rdp-cell[data-outside=true]:empty{width:calc(var(--__axc-date-button-size) + 2px);height:calc(var(--__axc-date-button-size) + 2px)}.aksel-date .rdp-day_range_middle.rdp-day_disabled{color:var(--ax-text-neutral);background:var(--ax-bg-neutral-moderateA)}.aksel-date .rdp-day_range_middle.rdp-day_selected{background-color:var(--ax-bg-moderate-pressedA);box-shadow:inset 0 0 0 1px var(--ax-border-subtleA);color:var(--ax-text-neutral)}.aksel-date .rdp-month,.aksel-date.rdp-month{gap:var(--ax-space-20);display:grid}.aksel-date .aksel-date__caption-label{text-transform:capitalize}.aksel-date .rdp-head_cell{text-transform:capitalize;font-size:var(--ax-font-size-small)}.aksel-date .rdp-button{all:unset;width:var(--__axc-date-button-size);height:var(--__axc-date-button-size);text-align:center;border-radius:var(--ax-radius-8);display:block}.aksel-date .rdp-day_range_start{border-radius:100% var(--ax-radius-12) var(--ax-radius-12) 100%}.aksel-date .rdp-day_range_end:not(.rdp-day_range_start){border-radius:var(--ax-radius-8) 100% 100% var(--ax-radius-8)}.aksel-date .rdp-day_range_start.rdp-day_range_end{border-radius:var(--ax-radius-8)}.aksel-date .aksel-date__field{flex-direction:column;width:100%;display:flex;position:relative}.aksel-date .rdp-day_selected,.aksel-date .aksel-monthpicker__month--selected{color:var(--ax-text-contrast);background:var(--ax-bg-strong-pressed);cursor:pointer}.aksel-date .rdp-day_disabled{cursor:not-allowed;background-color:var(--ax-bg-neutral-moderateA);color:var(--ax-text-neutral-subtle);text-decoration:line-through}.aksel-date .rdp-button:where(:not(.rdp-day_selected,[disabled])):hover{background:var(--ax-bg-moderate-hoverA);cursor:pointer}.aksel-date .aksel-date__month-button:where(:not(.rdp-day_selected,[disabled])):hover{background:var(--ax-bg-moderate-hoverA);cursor:pointer}.aksel-date .rdp-day_today{position:relative}.aksel-date .rdp-day_today:before{background-color:var(--ax-text-subtle);border-radius:var(--ax-radius-full);content:"";width:6px;height:6px;display:block;position:absolute;bottom:5px;left:50%;transform:translate(-50%)}.aksel-date .rdp-day_today.rdp-day_selected:not(.rdp-day_range_middle):before{background-color:var(--ax-text-contrast)}.aksel-date .rdp-day_today:active:before{background-color:var(--ax-text-contrast)}.aksel-date .rdp-day_outside{visibility:hidden;pointer-events:none}.aksel-date__modal .aksel-date{padding:0}.aksel-date__modal-body>.aksel-date{padding:0}@media(max-width:360px){.aksel-date__modal-body>.aksel-date{margin-left:-12px;margin-right:-12px}}.aksel-date__popover:focus-visible{outline:3px solid var(--ax-border-focus);outline-offset:3px}.aksel-date__caption{justify-content:space-between;align-items:center;gap:var(--ax-space-4);padding-inline:var(--ax-space-4);display:flex}.aksel-date__caption-button{width:2rem;height:2rem;color:var(--ax-text-neutral)}.aksel-date__caption__month .aksel-select__container select{text-transform:capitalize}.aksel-date__month-button{all:unset;text-align:center;text-transform:capitalize;border-radius:var(--ax-radius-8);cursor:pointer;width:3rem;height:3rem}.aksel-date__year-label{align-items:center;display:flex}.aksel-date__wrapper,.aksel-date__standalone-wrapper{width:-webkit-fit-content;width:fit-content;height:-webkit-fit-content;height:fit-content}:is(.aksel-date__wrapper,.aksel-date__standalone-wrapper) .rdp-cell>button.rdp-day:focus-visible{outline:3px solid var(--ax-border-focus);outline-offset:3px}:is(.aksel-date__wrapper,.aksel-date__standalone-wrapper) .rdp-cell>button.rdp-day:active:not(:disabled){color:var(--ax-text-contrast);background-color:var(--ax-bg-strong-pressed)}:is(.aksel-date__wrapper,.aksel-date__standalone-wrapper) button.aksel-date__month-button:focus-visible{outline:3px solid var(--ax-border-focus);outline-offset:3px}:is(.aksel-date__wrapper,.aksel-date__standalone-wrapper) button.aksel-date__month-button:active:not(:disabled){color:var(--ax-text-contrast);background-color:var(--ax-bg-strong-pressed)}.aksel-date__field-input.aksel-text-field__input{padding-right:var(--ax-space-48)}.aksel-form-field--small .aksel-date__field-input{padding-right:var(--ax-space-32)}.aksel-date__field-button{color:var(--ax-text-neutral);cursor:pointer;border-radius:calc(var(--ax-radius-8) - 1px);padding:var(--ax-space-12);background:none;border:none;justify-content:center;align-items:center;height:calc(100% - .125rem);margin:0;font-size:1.5rem;text-decoration:none;display:inline-flex;position:absolute;top:50%;right:.0625rem;transform:translateY(-50%)}.aksel-date__field-button:not(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){border-top-left-radius:0;border-bottom-left-radius:0}.aksel-date__field-button:-webkit-any(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){border-top-right-radius:0;border-bottom-right-radius:0}.aksel-date__field-button:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){border-top-right-radius:0;border-bottom-right-radius:0}.aksel-form-field--small .aksel-date__field-button{padding:var(--ax-space-4)}.aksel-form-field--disabled .aksel-date__field-button{opacity:1;cursor:not-allowed}.aksel-date__field--readonly .aksel-date__field-button{cursor:default}.aksel-date__field-button:focus-visible{outline-color:var(--ax-border-focus)}.aksel-date__field-wrapper{align-items:center;width:-webkit-fit-content;width:fit-content;display:inline-flex;position:relative}.aksel-date__week-row{align-items:center;gap:var(--ax-space-2);display:flex}.aksel-date__weeknumber{--__axc-button-border-width: 1px}.aksel-date__weeknumber-number{color:var(--ax-text-neutral-subtle);font-size:.875rem}.aksel-date__week-wrapper{justify-content:center;align-items:center;width:2.5rem;margin:0;display:flex}.aksel-date__modal-body{padding:var(--ax-space-16);align-items:flex-end;gap:var(--ax-space-8);flex-direction:column;display:flex}@media(min-width:480px){.aksel-date{--__axc-date-button-size: 3rem;padding:var(--ax-space-20)}.aksel-date__modal-body{padding:var(--ax-space-20)}.aksel-date__caption{gap:var(--ax-space-8)}.aksel-date__caption-button{width:3rem;height:3rem}}}@layer aksel.layout;
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
@layer aksel.components.modules {
|
|
4
4
|
.aksel-inline-message {
|
|
5
|
-
gap: var(--ax-space-
|
|
5
|
+
gap: var(--ax-space-8);
|
|
6
6
|
color: var(--ax-text-default);
|
|
7
7
|
display: flex;
|
|
8
8
|
}
|
|
@@ -10,6 +10,7 @@
|
|
|
10
10
|
.aksel-inline-message__icon {
|
|
11
11
|
color: var(--ax-text-subtle);
|
|
12
12
|
flex: none;
|
|
13
|
+
margin-top: var(--ax-space-2);
|
|
13
14
|
font-size: 1.5rem;
|
|
14
15
|
}
|
|
15
16
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer aksel.reset,aksel.theming,aksel.baseline,aksel.print,aksel.typography,aksel.components.core,aksel.components.core.loader,aksel.components.core.button,aksel.components.form;@layer aksel.components.modules{.aksel-inline-message{gap:var(--ax-space-
|
|
1
|
+
@layer aksel.reset,aksel.theming,aksel.baseline,aksel.print,aksel.typography,aksel.components.core,aksel.components.core.loader,aksel.components.core.button,aksel.components.form;@layer aksel.components.modules{.aksel-inline-message{gap:var(--ax-space-8);color:var(--ax-text-default);display:flex}.aksel-inline-message__icon{color:var(--ax-text-subtle);flex:none;margin-top:var(--ax-space-2);font-size:1.5rem}.aksel-inline-message[data-size=small] .aksel-inline-message__icon{font-size:1.25rem}}@layer aksel.layout;
|
package/dist/components.css
CHANGED
|
@@ -3362,6 +3362,7 @@
|
|
|
3362
3362
|
}
|
|
3363
3363
|
|
|
3364
3364
|
.aksel-date {
|
|
3365
|
+
--__axc-date-button-size: 2.5rem;
|
|
3365
3366
|
padding: var(--ax-space-16);
|
|
3366
3367
|
}
|
|
3367
3368
|
|
|
@@ -3373,6 +3374,16 @@
|
|
|
3373
3374
|
padding: 1px;
|
|
3374
3375
|
}
|
|
3375
3376
|
|
|
3377
|
+
.aksel-date .rdp-cell[data-outside="true"] {
|
|
3378
|
+
width: var(--__axc-date-button-size);
|
|
3379
|
+
height: var(--__axc-date-button-size);
|
|
3380
|
+
}
|
|
3381
|
+
|
|
3382
|
+
.aksel-date .rdp-cell[data-outside="true"]:empty {
|
|
3383
|
+
width: calc(var(--__axc-date-button-size) + 2px);
|
|
3384
|
+
height: calc(var(--__axc-date-button-size) + 2px);
|
|
3385
|
+
}
|
|
3386
|
+
|
|
3376
3387
|
.aksel-date .rdp-day_range_middle.rdp-day_disabled {
|
|
3377
3388
|
color: var(--ax-text-neutral);
|
|
3378
3389
|
background: var(--ax-bg-neutral-moderateA);
|
|
@@ -3405,10 +3416,10 @@
|
|
|
3405
3416
|
|
|
3406
3417
|
.aksel-date .rdp-button {
|
|
3407
3418
|
all: unset;
|
|
3419
|
+
width: var(--__axc-date-button-size);
|
|
3420
|
+
height: var(--__axc-date-button-size);
|
|
3408
3421
|
text-align: center;
|
|
3409
3422
|
border-radius: var(--ax-radius-8);
|
|
3410
|
-
width: 2.5rem;
|
|
3411
|
-
height: 2.5rem;
|
|
3412
3423
|
display: block;
|
|
3413
3424
|
}
|
|
3414
3425
|
|
|
@@ -3505,6 +3516,11 @@
|
|
|
3505
3516
|
}
|
|
3506
3517
|
}
|
|
3507
3518
|
|
|
3519
|
+
.aksel-date__popover:focus-visible {
|
|
3520
|
+
outline: 3px solid var(--ax-border-focus);
|
|
3521
|
+
outline-offset: 3px;
|
|
3522
|
+
}
|
|
3523
|
+
|
|
3508
3524
|
.aksel-date__caption {
|
|
3509
3525
|
justify-content: space-between;
|
|
3510
3526
|
align-items: center;
|
|
@@ -3665,7 +3681,12 @@
|
|
|
3665
3681
|
}
|
|
3666
3682
|
|
|
3667
3683
|
@media (min-width: 480px) {
|
|
3668
|
-
.aksel-date
|
|
3684
|
+
.aksel-date {
|
|
3685
|
+
--__axc-date-button-size: 3rem;
|
|
3686
|
+
padding: var(--ax-space-20);
|
|
3687
|
+
}
|
|
3688
|
+
|
|
3689
|
+
.aksel-date__modal-body {
|
|
3669
3690
|
padding: var(--ax-space-20);
|
|
3670
3691
|
}
|
|
3671
3692
|
|
|
@@ -3673,7 +3694,7 @@
|
|
|
3673
3694
|
gap: var(--ax-space-8);
|
|
3674
3695
|
}
|
|
3675
3696
|
|
|
3676
|
-
.aksel-
|
|
3697
|
+
.aksel-date__caption-button {
|
|
3677
3698
|
width: 3rem;
|
|
3678
3699
|
height: 3rem;
|
|
3679
3700
|
}
|
|
@@ -4592,7 +4613,7 @@
|
|
|
4592
4613
|
}
|
|
4593
4614
|
|
|
4594
4615
|
.aksel-inline-message {
|
|
4595
|
-
gap: var(--ax-space-
|
|
4616
|
+
gap: var(--ax-space-8);
|
|
4596
4617
|
color: var(--ax-text-default);
|
|
4597
4618
|
display: flex;
|
|
4598
4619
|
}
|
|
@@ -4600,6 +4621,7 @@
|
|
|
4600
4621
|
.aksel-inline-message__icon {
|
|
4601
4622
|
color: var(--ax-text-subtle);
|
|
4602
4623
|
flex: none;
|
|
4624
|
+
margin-top: var(--ax-space-2);
|
|
4603
4625
|
font-size: 1.5rem;
|
|
4604
4626
|
}
|
|
4605
4627
|
|