@navikt/ds-css 8.10.4 → 8.10.5
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/component/button.css +19 -4
- package/dist/component/button.min.css +1 -1
- package/dist/components.css +19 -4
- 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 +20 -5
- package/dist/index.min.css +1 -1
- package/package.json +2 -2
- package/src/button.css +31 -6
- package/src/data-table.css +14 -3
|
@@ -43,14 +43,17 @@
|
|
|
43
43
|
|
|
44
44
|
.aksel-button[data-variant="secondary"] {
|
|
45
45
|
--__axc-button-border-color: var(--ax-border-default);
|
|
46
|
-
color: var(--ax-text-subtle);
|
|
47
46
|
background-color: rgba(0, 0, 0, 0);
|
|
48
47
|
}
|
|
49
48
|
|
|
50
|
-
.aksel-button[data-variant="secondary"][data-color="neutral"], [data-color="neutral"]
|
|
49
|
+
.aksel-button[data-variant="secondary"][data-color="neutral"], [data-color="neutral"] .aksel-button[data-variant="secondary"]:not([data-color]) {
|
|
51
50
|
color: var(--ax-text-default);
|
|
52
51
|
}
|
|
53
52
|
|
|
53
|
+
.aksel-button[data-variant="secondary"], [data-color="neutral"] [data-color]:not([data-color="neutral"]) .aksel-button[data-variant="secondary"] {
|
|
54
|
+
color: var(--ax-text-subtle);
|
|
55
|
+
}
|
|
56
|
+
|
|
54
57
|
.aksel-button[data-variant="secondary"]:hover {
|
|
55
58
|
--__axc-button-border-color: var(--ax-border-strong);
|
|
56
59
|
background-color: var(--ax-bg-moderate-hoverA);
|
|
@@ -70,14 +73,17 @@
|
|
|
70
73
|
}
|
|
71
74
|
|
|
72
75
|
.aksel-button[data-variant="tertiary"] {
|
|
73
|
-
color: var(--ax-text-subtle);
|
|
74
76
|
background-color: rgba(0, 0, 0, 0);
|
|
75
77
|
}
|
|
76
78
|
|
|
77
|
-
.aksel-button[data-variant="tertiary"][data-color="neutral"], [data-color="neutral"]
|
|
79
|
+
.aksel-button[data-variant="tertiary"][data-color="neutral"], [data-color="neutral"] .aksel-button[data-variant="tertiary"]:not([data-color], [data-pressed="true"]) {
|
|
78
80
|
color: var(--ax-text-default);
|
|
79
81
|
}
|
|
80
82
|
|
|
83
|
+
.aksel-button[data-variant="tertiary"], [data-color="neutral"] [data-color]:not([data-color="neutral"]) .aksel-button[data-variant="tertiary"]:not([data-pressed="true"]) {
|
|
84
|
+
color: var(--ax-text-subtle);
|
|
85
|
+
}
|
|
86
|
+
|
|
81
87
|
.aksel-button[data-variant="tertiary"]:hover {
|
|
82
88
|
background-color: var(--ax-bg-moderate-hoverA);
|
|
83
89
|
}
|
|
@@ -219,6 +225,15 @@
|
|
|
219
225
|
border-color: highlight;
|
|
220
226
|
}
|
|
221
227
|
|
|
228
|
+
.aksel-button[data-variant="tertiary"][data-pressed="true"] {
|
|
229
|
+
color: selecteditemtext;
|
|
230
|
+
background-color: selecteditem;
|
|
231
|
+
}
|
|
232
|
+
|
|
233
|
+
.aksel-button[data-variant="tertiary"][data-pressed="true"] span {
|
|
234
|
+
forced-color-adjust: none;
|
|
235
|
+
}
|
|
236
|
+
|
|
222
237
|
.aksel-button:not(:disabled):hover span {
|
|
223
238
|
forced-color-adjust: none;
|
|
224
239
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer aksel.reset,aksel.theming,aksel.baseline,aksel.print,aksel.typography,aksel.components.core,aksel.components.core.loader;@layer aksel.components.core.button{.aksel-button{--__axc-button-icon-size: 1.5rem;--__axc-button-icon-margin: -4px;--__axc-button-border-color: transparent;--__axc-button-border-width: 2px;padding:var(--ax-space-12) var(--ax-space-20);border-radius:var(--ax-radius-8);cursor:pointer;justify-content:center;align-items:center;gap:var(--ax-space-8);box-shadow:inset 0 0 0 var(--__axc-button-border-width) var(--__axc-button-border-color);background:none;border:none;text-decoration:none;display:inline-flex}.aksel-button:focus-visible{outline:3px solid var(--ax-border-focus);outline-offset:3px}.aksel-button[data-variant=primary]{background-color:var(--ax-bg-strong);color:var(--ax-text-contrast)}.aksel-button[data-variant=primary]:hover{background-color:var(--ax-bg-strong-hover)}.aksel-button[data-variant=primary]:active{background-color:var(--ax-bg-strong-pressed)}.aksel-button[data-variant=primary]:is(:disabled,.aksel-button--disabled){background-color:var(--ax-bg-strong)}.aksel-button[data-variant=secondary]{--__axc-button-border-color: var(--ax-border-default);
|
|
1
|
+
@layer aksel.reset,aksel.theming,aksel.baseline,aksel.print,aksel.typography,aksel.components.core,aksel.components.core.loader;@layer aksel.components.core.button{.aksel-button{--__axc-button-icon-size: 1.5rem;--__axc-button-icon-margin: -4px;--__axc-button-border-color: transparent;--__axc-button-border-width: 2px;padding:var(--ax-space-12) var(--ax-space-20);border-radius:var(--ax-radius-8);cursor:pointer;justify-content:center;align-items:center;gap:var(--ax-space-8);box-shadow:inset 0 0 0 var(--__axc-button-border-width) var(--__axc-button-border-color);background:none;border:none;text-decoration:none;display:inline-flex}.aksel-button:focus-visible{outline:3px solid var(--ax-border-focus);outline-offset:3px}.aksel-button[data-variant=primary]{background-color:var(--ax-bg-strong);color:var(--ax-text-contrast)}.aksel-button[data-variant=primary]:hover{background-color:var(--ax-bg-strong-hover)}.aksel-button[data-variant=primary]:active{background-color:var(--ax-bg-strong-pressed)}.aksel-button[data-variant=primary]:is(:disabled,.aksel-button--disabled){background-color:var(--ax-bg-strong)}.aksel-button[data-variant=secondary]{--__axc-button-border-color: var(--ax-border-default);background-color:#0000}.aksel-button[data-variant=secondary][data-color=neutral],[data-color=neutral] .aksel-button[data-variant=secondary]:not([data-color]){color:var(--ax-text-default)}.aksel-button[data-variant=secondary],[data-color=neutral] [data-color]:not([data-color=neutral]) .aksel-button[data-variant=secondary]{color:var(--ax-text-subtle)}.aksel-button[data-variant=secondary]:hover{--__axc-button-border-color: var(--ax-border-strong);background-color:var(--ax-bg-moderate-hoverA)}.aksel-button[data-variant=secondary]:active{background-color:var(--ax-bg-moderate-pressedA)}.aksel-button[data-variant=secondary]:is(:disabled,.aksel-button--disabled){color:var(--ax-text-subtle);background-color:#0000}.aksel-button[data-variant=secondary]:is(:disabled,.aksel-button--disabled)[data-color=neutral],[data-color=neutral]>.aksel-button[data-variant=secondary]:is(:disabled,.aksel-button--disabled):not([data-color]){color:var(--ax-text-default)}.aksel-button[data-variant=tertiary]{background-color:#0000}.aksel-button[data-variant=tertiary][data-color=neutral],[data-color=neutral] .aksel-button[data-variant=tertiary]:not([data-color],[data-pressed=true]){color:var(--ax-text-default)}.aksel-button[data-variant=tertiary],[data-color=neutral] [data-color]:not([data-color=neutral]) .aksel-button[data-variant=tertiary]:not([data-pressed=true]){color:var(--ax-text-subtle)}.aksel-button[data-variant=tertiary]:hover{background-color:var(--ax-bg-moderate-hoverA)}.aksel-button[data-variant=tertiary]:active{background-color:var(--ax-bg-moderate-pressedA)}.aksel-button[data-variant=tertiary][data-pressed=true]{background-color:var(--ax-bg-strong-pressed);color:var(--ax-text-contrast)}.aksel-button[data-variant=tertiary]:is(:disabled,.aksel-button--disabled){color:var(--ax-text-subtle);background-color:#0000}.aksel-button[data-variant=tertiary]:is(:disabled,.aksel-button--disabled)[data-color=neutral],[data-color=neutral]>.aksel-button[data-variant=tertiary]:is(:disabled,.aksel-button--disabled):not([data-color]){color:var(--ax-text-default)}.aksel-button--small,.aksel-button--xsmall{--__axc-button-icon-margin: -2px}.aksel-button--small{padding:var(--ax-space-4) var(--ax-space-12);gap:var(--ax-space-6);min-width:2rem;min-height:2rem}.aksel-button--xsmall{padding:var(--ax-space-2) var(--ax-space-8);gap:var(--ax-space-4);--__axc-button-icon-size: 1.25rem}@supports not selector(:focus-visible){.aksel-button:focus{outline:3px solid var(--ax-border-focus)}}.aksel-button__icon{font-size:var(--__axc-button-icon-size);display:flex}.aksel-button__icon:first-child{margin-left:var(--__axc-button-icon-margin)}.aksel-button__icon:last-child{margin-right:var(--__axc-button-icon-margin)}.aksel-button--icon-only .aksel-button__icon{margin:0}.aksel-button--icon-only{padding:var(--ax-space-12)}.aksel-button--icon-only.aksel-button--small{padding:var(--ax-space-4)}.aksel-button--icon-only.aksel-button--xsmall{padding:var(--ax-space-2)}.aksel-button:where(:disabled,.aksel-button--disabled){cursor:not-allowed}.aksel-button:not(.aksel-button--loading):where(:disabled,.aksel-button--disabled){opacity:var(--ax-opacity-disabled)}.aksel-button>.aksel-loader{position:absolute}.aksel-button .aksel-loader .aksel-loader__foreground{stroke:currentColor}.aksel-button[data-variant=primary] .aksel-loader .aksel-loader__background{stroke:#ffffff4d}.aksel-button--loading>:not(.aksel-loader){visibility:hidden}@media(forced-colors:active){.aksel-button:not(.aksel-button--loading):where(:disabled,.aksel-button--disabled){opacity:1;color:graytext}.aksel-button{color:buttontext;background-color:buttonface;border:1px solid rgba(0,0,0,0)}.aksel-button[data-variant=primary]:not(:disabled){color:highlighttext;background-color:highlight}.aksel-button[data-variant=primary]:not(:disabled) span{forced-color-adjust:none}.aksel-button[data-variant=primary]:not(:disabled):where(a){color:highlighttext;background-color:linktext}.aksel-button[data-variant=primary]:not(:disabled):where(a) span{forced-color-adjust:none}.aksel-button[data-variant=primary]:not(:disabled):hover{color:highlight;background-color:highlighttext;border-color:highlight}.aksel-button:hover:not(:disabled),.aksel-button[data-variant=primary]:where(a):hover:not(:disabled){color:highlight;box-shadow:none;background-color:highlighttext;border-color:highlight}.aksel-button[data-variant=tertiary][data-pressed=true]{color:selecteditemtext;background-color:selecteditem}.aksel-button[data-variant=tertiary][data-pressed=true] span{forced-color-adjust:none}.aksel-button:not(:disabled):hover span{forced-color-adjust:none}.aksel-button .aksel-loader .aksel-loader__foreground{stroke:canvas}.aksel-button[data-variant=primary] .aksel-loader .aksel-loader__background{stroke:canvastext}}}@layer aksel.components.form,aksel.components.modules,aksel.layout;
|
package/dist/components.css
CHANGED
|
@@ -585,14 +585,17 @@
|
|
|
585
585
|
|
|
586
586
|
.aksel-button[data-variant="secondary"] {
|
|
587
587
|
--__axc-button-border-color: var(--ax-border-default);
|
|
588
|
-
color: var(--ax-text-subtle);
|
|
589
588
|
background-color: rgba(0, 0, 0, 0);
|
|
590
589
|
}
|
|
591
590
|
|
|
592
|
-
.aksel-button[data-variant="secondary"][data-color="neutral"], [data-color="neutral"]
|
|
591
|
+
.aksel-button[data-variant="secondary"][data-color="neutral"], [data-color="neutral"] .aksel-button[data-variant="secondary"]:not([data-color]) {
|
|
593
592
|
color: var(--ax-text-default);
|
|
594
593
|
}
|
|
595
594
|
|
|
595
|
+
.aksel-button[data-variant="secondary"], [data-color="neutral"] [data-color]:not([data-color="neutral"]) .aksel-button[data-variant="secondary"] {
|
|
596
|
+
color: var(--ax-text-subtle);
|
|
597
|
+
}
|
|
598
|
+
|
|
596
599
|
.aksel-button[data-variant="secondary"]:hover {
|
|
597
600
|
--__axc-button-border-color: var(--ax-border-strong);
|
|
598
601
|
background-color: var(--ax-bg-moderate-hoverA);
|
|
@@ -612,14 +615,17 @@
|
|
|
612
615
|
}
|
|
613
616
|
|
|
614
617
|
.aksel-button[data-variant="tertiary"] {
|
|
615
|
-
color: var(--ax-text-subtle);
|
|
616
618
|
background-color: rgba(0, 0, 0, 0);
|
|
617
619
|
}
|
|
618
620
|
|
|
619
|
-
.aksel-button[data-variant="tertiary"][data-color="neutral"], [data-color="neutral"]
|
|
621
|
+
.aksel-button[data-variant="tertiary"][data-color="neutral"], [data-color="neutral"] .aksel-button[data-variant="tertiary"]:not([data-color], [data-pressed="true"]) {
|
|
620
622
|
color: var(--ax-text-default);
|
|
621
623
|
}
|
|
622
624
|
|
|
625
|
+
.aksel-button[data-variant="tertiary"], [data-color="neutral"] [data-color]:not([data-color="neutral"]) .aksel-button[data-variant="tertiary"]:not([data-pressed="true"]) {
|
|
626
|
+
color: var(--ax-text-subtle);
|
|
627
|
+
}
|
|
628
|
+
|
|
623
629
|
.aksel-button[data-variant="tertiary"]:hover {
|
|
624
630
|
background-color: var(--ax-bg-moderate-hoverA);
|
|
625
631
|
}
|
|
@@ -761,6 +767,15 @@
|
|
|
761
767
|
border-color: highlight;
|
|
762
768
|
}
|
|
763
769
|
|
|
770
|
+
.aksel-button[data-variant="tertiary"][data-pressed="true"] {
|
|
771
|
+
color: selecteditemtext;
|
|
772
|
+
background-color: selecteditem;
|
|
773
|
+
}
|
|
774
|
+
|
|
775
|
+
.aksel-button[data-variant="tertiary"][data-pressed="true"] span {
|
|
776
|
+
forced-color-adjust: none;
|
|
777
|
+
}
|
|
778
|
+
|
|
764
779
|
.aksel-button:not(:disabled):hover span {
|
|
765
780
|
forced-color-adjust: none;
|
|
766
781
|
}
|