@navikt/ds-css 6.4.1 → 6.5.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 +2 -0
- package/dist/component/index.css +11 -2
- package/dist/component/index.min.css +1 -1
- package/dist/component/tabs.css +9 -1
- package/dist/component/tabs.min.css +1 -1
- package/dist/component/togglegroup.css +4 -0
- package/dist/component/togglegroup.min.css +1 -1
- package/dist/components.css +13 -1
- package/dist/components.min.css +1 -1
- package/dist/global/tokens.css +1 -1
- package/dist/index.css +11 -2
- package/dist/index.min.css +1 -1
- package/package.json +2 -2
- package/tabs.css +9 -1
- package/toggle-group.css +4 -0
package/dist/component/tabs.css
CHANGED
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
.navds-tabs__tablist {
|
|
8
8
|
display: flex;
|
|
9
9
|
max-width: 100%;
|
|
10
|
-
width:
|
|
10
|
+
width: 100%;
|
|
11
11
|
scroll-behavior: smooth;
|
|
12
12
|
-ms-overflow-style: none; /* for Internet Explorer, Edge */
|
|
13
13
|
scrollbar-width: none; /* for Firefox */
|
|
@@ -83,6 +83,10 @@
|
|
|
83
83
|
gap: var(--a-spacing-1);
|
|
84
84
|
}
|
|
85
85
|
|
|
86
|
+
.navds-tabs__tab-inner > * {
|
|
87
|
+
display: inline-flex;
|
|
88
|
+
}
|
|
89
|
+
|
|
86
90
|
.navds-tabs__tab-inner svg {
|
|
87
91
|
flex-shrink: 0;
|
|
88
92
|
}
|
|
@@ -117,6 +121,10 @@
|
|
|
117
121
|
font-size: 1.5rem;
|
|
118
122
|
}
|
|
119
123
|
|
|
124
|
+
.navds-tabs__tab--fill {
|
|
125
|
+
flex: 1 1 100%;
|
|
126
|
+
}
|
|
127
|
+
|
|
120
128
|
.navds-tabs__tabpanel:focus-visible {
|
|
121
129
|
outline: 2px solid transparent;
|
|
122
130
|
box-shadow: inset 0 0 0 2px var(--a-border-focus);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.navds-tabs__tablist-wrapper{box-shadow:inset 0 -1px 0 0 var(--ac-tabs-border,var(--a-border-divider));display:flex;width:100%}.navds-tabs__tablist{display:flex;max-width:100%;scroll-behavior:smooth;width:
|
|
1
|
+
.navds-tabs__tablist-wrapper{box-shadow:inset 0 -1px 0 0 var(--ac-tabs-border,var(--a-border-divider));display:flex;width:100%}.navds-tabs__tablist{display:flex;max-width:100%;scroll-behavior:smooth;width:100%;-ms-overflow-style:none;overflow-x:scroll;scrollbar-width:none}.navds-tabs__tablist::-webkit-scrollbar{display:none}.navds-tabs__scroll-button{align-items:center;cursor:pointer;display:flex;justify-content:center;padding:var(--a-spacing-3) var(--a-spacing-4);width:2.75rem}.navds-tabs__scroll-button--hidden{visibility:hidden}.navds-tabs__scroll-button svg{flex-shrink:0;font-size:1.25rem}.navds-tabs--small .navds-tabs__scroll-button{padding:var(--a-spacing-1-alt) var(--a-spacing-4);width:2rem}.navds-tabs__tab{align-items:center;background:none;border:none;color:var(--ac-tabs-text,var(--a-text-default));cursor:pointer;display:inline-flex;justify-content:center;min-height:3rem;padding:var(--a-spacing-3) var(--a-spacing-4)}.navds-tabs__tab:hover{box-shadow:inset 0 -3px 0 0 var(--ac-tabs-hover-border,var(--a-border-subtle-hover))}.navds-tabs__tab[aria-selected=true]{box-shadow:inset 0 -3px 0 0 var(--ac-tabs-selected-border,var(--a-border-action-selected));color:var(--ac-tabs-selected-text,var(--a-text-default))}.navds-tabs__tab:focus-visible{box-shadow:inset var(--a-shadow-focus);color:var(--ac-tabs-focus-text,var(--a-text-default));outline:2px solid #0000;outline-offset:-2px}@supports not selector(:focus-visible){.navds-tabs__tab:focus{box-shadow:inset var(--a-shadow-focus);color:var(--ac-tabs-focus-text,var(--a-text-default));outline:2px solid #0000}}.navds-tabs__tab-inner{align-items:center;display:flex;gap:var(--a-spacing-1)}.navds-tabs__tab-inner>*{display:inline-flex}.navds-tabs__tab-inner svg{flex-shrink:0}.navds-tabs__tab-icon--top>.navds-tabs__tab-inner{flex-direction:column;gap:0}.navds-tabs__tab--small{min-height:2rem;padding:var(--a-spacing-1-alt) var(--a-spacing-4)}.navds-tabs__tab--small.navds-tabs__tab-icon--top,.navds-tabs__tab-icon--top{padding:var(--a-spacing-1) var(--a-spacing-4)}.navds-tabs__tab svg,.navds-tabs__tab--small.navds-tabs__tab--icon-only svg,.navds-tabs__tab--small.navds-tabs__tab-icon--top svg{font-size:1.25rem}.navds-tabs__tab--small svg{font-size:1rem}.navds-tabs__tab--icon-only svg,.navds-tabs__tab-icon--top svg{font-size:1.5rem}.navds-tabs__tab--fill{flex:1 1 100%}.navds-tabs__tabpanel:focus-visible{box-shadow:inset 0 0 0 2px var(--a-border-focus);outline:2px solid #0000}@supports not selector(:focus-visible){.navds-tabs__tabpanel:focus{box-shadow:inset 0 0 0 2px var(--a-border-focus);outline:2px solid #0000}}@media (forced-colors:active){.navds-tabs__tab[aria-selected=true]{border-bottom:3px solid canvastext;padding-block-end:calc(var(--a-spacing-3) - 3px)}.navds-tabs__tab--small[aria-selected=true]{padding-block-end:calc(var(--a-spacing-1-alt) - 3px)}.navds-tabs__tab--small.navds-tabs__tab-icon--top[aria-selected=true],.navds-tabs__tab-icon--top[aria-selected=true]{padding-block-end:calc(var(--a-spacing-1) - 3px)}}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.navds-toggle-group__wrapper{display:grid;gap:var(--a-spacing-2);justify-items:start}.navds-toggle-group{background-color:var(--ac-toggle-group-bg,var(--a-surface-transparent));border-radius:var(--a-border-radius-medium);box-shadow:inset 0 0 0 1px var(--ac-toggle-group-border,var(--a-border-default));display:inline-grid;gap:var(--a-spacing-1);grid-auto-columns:1fr;grid-auto-flow:column;padding:calc(var(--a-spacing-1) + .0625rem)}.navds-toggle-group--small{padding:calc(var(--a-spacing-05) + .0625rem)}.navds-toggle-group--neutral{background-color:var(--ac-toggle-group-neutral-bg,var(--a-surface-transparent));box-shadow:inset 0 0 0 1px var(--ac-toggle-group-neutral-border,var(--a-border-default))}.navds-toggle-group__button{align-items:center;background-color:var(--ac-toggle-group-button-bg,var(--a-surface-transparent));border:none;border-radius:var(--a-border-radius-small);color:var(--ac-toggle-group-button-text,var(--a-text-default));cursor:pointer;display:inline-flex;font-weight:var(--a-font-weight-regular);justify-content:center;min-height:2.375rem;min-width:-webkit-fit-content;min-width:-moz-fit-content;min-width:fit-content;padding:var(--a-spacing-1) var(--a-spacing-3)}.navds-toggle-group--medium>:where(.navds-toggle-group__button:first-of-type:focus-visible){border-end-start-radius:1px;border-start-start-radius:1px}.navds-toggle-group--medium>:where(.navds-toggle-group__button:last-of-type:focus-visible){border-end-end-radius:1px;border-start-end-radius:1px}.navds-toggle-group--neutral>.navds-toggle-group__button{background-color:var(--ac-toggle-group-button-neutral-bg,var(--a-surface-transparent));color:var(--ac-toggle-group-button-neutral-text,var(--a-text-default))}.navds-toggle-group__button:hover{background-color:var(--ac-toggle-group-button-hover-bg,var(--a-surface-action-subtle));color:var(--ac-toggle-group-button-hover-text,var(--a-text-default))}.navds-toggle-group--neutral>.navds-toggle-group__button:hover{background-color:var(--ac-toggle-group-button-neutral-hover-bg,var(--a-surface-neutral-subtle-hover));color:var(--ac-toggle-group-button-neutral-hover-text,var(--a-text-default))}.navds-toggle-group__button:focus-visible{box-shadow:0 0 0 1px var(--a-surface-default),0 0 0 4px var(--a-border-focus);outline:2px solid #0000;outline-offset:1px}@supports not selector(:focus-visible){.navds-toggle-group__button:focus{box-shadow:0 0 0 1px var(--a-surface-default),0 0 0 4px var(--a-border-focus);outline:2px solid #0000;outline-offset:1px}}.navds-toggle-group__button:focus-visible:hover[aria-pressed=false]{box-shadow:0 0 0 1px var(--ac-toggle-group-button-hover-bg,var(--a-surface-action-subtle)),0 0 0 4px var(--a-border-focus)}@supports not selector(:focus-visible){.navds-toggle-group__button:focus:hover[aria-pressed=false]{box-shadow:0 0 0 1px var(--ac-toggle-group-button-hover-bg,var(--a-surface-action-subtle)),0 0 0 4px var(--a-border-focus)}}.navds-toggle-group--neutral>.navds-toggle-group__button:focus:hover[aria-pressed=false]{box-shadow:0 0 0 1px var(--ac-toggle-group-button-neutral-hover-bg,var(--a-surface-neutral-subtle-hover)),0 0 0 4px var(--a-border-focus)}@supports not selector(:focus-visible){.navds-toggle-group--neutral>.navds-toggle-group__button:focus-visible:hover[aria-pressed=false]{box-shadow:0 0 0 1px var(--ac-toggle-group-button-neutral-hover-bg,var(--a-surface-neutral-subtle-hover)),0 0 0 4px var(--a-border-focus)}}.navds-toggle-group__button-inner{align-items:center;display:flex;font-weight:inherit;gap:var(--a-spacing-2)}.navds-toggle-group__button-inner>*{flex-shrink:0}.navds-toggle-group__button[aria-checked=true],.navds-toggle-group__button[aria-pressed=true]{background-color:var(--ac-toggle-group-selected-bg,var(--a-surface-action-selected));color:var(--ac-toggle-group-selected-text,var(--a-text-on-action))}.navds-toggle-group--neutral>.navds-toggle-group__button[aria-checked=true],.navds-toggle-group--neutral>.navds-toggle-group__button[aria-pressed=true]{background-color:var(--ac-toggle-group-neutral-selected-bg,var(--a-surface-neutral-selected));color:var(--ac-toggle-group-neutral-selected-text,var(--a-text-on-neutral))}.navds-toggle-group--small>.navds-toggle-group__button{min-height:1.625rem;min-width:-webkit-fit-content;min-width:-moz-fit-content;min-width:fit-content;padding:var(--a-spacing-05) var(--a-spacing-3)}.navds-toggle-group__button>.navds-toggle-group__button-inner>svg{font-size:1.5rem}.navds-toggle-group--small>.navds-toggle-group__button>.navds-toggle-group__button-inner>svg{font-size:1.125rem}@media (forced-colors:active){.navds-toggle-group{border:2px solid #0000}.navds-toggle-group__button:hover{color:highlight}.navds-toggle-group__button[aria-checked=true],.navds-toggle-group__button[aria-pressed=true]{background-color:selecteditem;color:selecteditemtext}.navds-toggle-group__button[aria-checked=true]>*,.navds-toggle-group__button[aria-pressed=true]>*{forced-color-adjust:none}.navds-toggle-group__button:active{background-color:none!important}.navds-toggle-group__button:focus-visible{outline-color:highlight}}
|
|
1
|
+
.navds-toggle-group__wrapper{display:grid;gap:var(--a-spacing-2);justify-items:start}.navds-toggle-group__wrapper--fill{justify-items:legacy}.navds-toggle-group{background-color:var(--ac-toggle-group-bg,var(--a-surface-transparent));border-radius:var(--a-border-radius-medium);box-shadow:inset 0 0 0 1px var(--ac-toggle-group-border,var(--a-border-default));display:inline-grid;gap:var(--a-spacing-1);grid-auto-columns:1fr;grid-auto-flow:column;padding:calc(var(--a-spacing-1) + .0625rem)}.navds-toggle-group--small{padding:calc(var(--a-spacing-05) + .0625rem)}.navds-toggle-group--neutral{background-color:var(--ac-toggle-group-neutral-bg,var(--a-surface-transparent));box-shadow:inset 0 0 0 1px var(--ac-toggle-group-neutral-border,var(--a-border-default))}.navds-toggle-group__button{align-items:center;background-color:var(--ac-toggle-group-button-bg,var(--a-surface-transparent));border:none;border-radius:var(--a-border-radius-small);color:var(--ac-toggle-group-button-text,var(--a-text-default));cursor:pointer;display:inline-flex;font-weight:var(--a-font-weight-regular);justify-content:center;min-height:2.375rem;min-width:-webkit-fit-content;min-width:-moz-fit-content;min-width:fit-content;padding:var(--a-spacing-1) var(--a-spacing-3)}.navds-toggle-group--medium>:where(.navds-toggle-group__button:first-of-type:focus-visible){border-end-start-radius:1px;border-start-start-radius:1px}.navds-toggle-group--medium>:where(.navds-toggle-group__button:last-of-type:focus-visible){border-end-end-radius:1px;border-start-end-radius:1px}.navds-toggle-group--neutral>.navds-toggle-group__button{background-color:var(--ac-toggle-group-button-neutral-bg,var(--a-surface-transparent));color:var(--ac-toggle-group-button-neutral-text,var(--a-text-default))}.navds-toggle-group__button:hover{background-color:var(--ac-toggle-group-button-hover-bg,var(--a-surface-action-subtle));color:var(--ac-toggle-group-button-hover-text,var(--a-text-default))}.navds-toggle-group--neutral>.navds-toggle-group__button:hover{background-color:var(--ac-toggle-group-button-neutral-hover-bg,var(--a-surface-neutral-subtle-hover));color:var(--ac-toggle-group-button-neutral-hover-text,var(--a-text-default))}.navds-toggle-group__button:focus-visible{box-shadow:0 0 0 1px var(--a-surface-default),0 0 0 4px var(--a-border-focus);outline:2px solid #0000;outline-offset:1px}@supports not selector(:focus-visible){.navds-toggle-group__button:focus{box-shadow:0 0 0 1px var(--a-surface-default),0 0 0 4px var(--a-border-focus);outline:2px solid #0000;outline-offset:1px}}.navds-toggle-group__button:focus-visible:hover[aria-pressed=false]{box-shadow:0 0 0 1px var(--ac-toggle-group-button-hover-bg,var(--a-surface-action-subtle)),0 0 0 4px var(--a-border-focus)}@supports not selector(:focus-visible){.navds-toggle-group__button:focus:hover[aria-pressed=false]{box-shadow:0 0 0 1px var(--ac-toggle-group-button-hover-bg,var(--a-surface-action-subtle)),0 0 0 4px var(--a-border-focus)}}.navds-toggle-group--neutral>.navds-toggle-group__button:focus:hover[aria-pressed=false]{box-shadow:0 0 0 1px var(--ac-toggle-group-button-neutral-hover-bg,var(--a-surface-neutral-subtle-hover)),0 0 0 4px var(--a-border-focus)}@supports not selector(:focus-visible){.navds-toggle-group--neutral>.navds-toggle-group__button:focus-visible:hover[aria-pressed=false]{box-shadow:0 0 0 1px var(--ac-toggle-group-button-neutral-hover-bg,var(--a-surface-neutral-subtle-hover)),0 0 0 4px var(--a-border-focus)}}.navds-toggle-group__button-inner{align-items:center;display:flex;font-weight:inherit;gap:var(--a-spacing-2)}.navds-toggle-group__button-inner>*{flex-shrink:0}.navds-toggle-group__button[aria-checked=true],.navds-toggle-group__button[aria-pressed=true]{background-color:var(--ac-toggle-group-selected-bg,var(--a-surface-action-selected));color:var(--ac-toggle-group-selected-text,var(--a-text-on-action))}.navds-toggle-group--neutral>.navds-toggle-group__button[aria-checked=true],.navds-toggle-group--neutral>.navds-toggle-group__button[aria-pressed=true]{background-color:var(--ac-toggle-group-neutral-selected-bg,var(--a-surface-neutral-selected));color:var(--ac-toggle-group-neutral-selected-text,var(--a-text-on-neutral))}.navds-toggle-group--small>.navds-toggle-group__button{min-height:1.625rem;min-width:-webkit-fit-content;min-width:-moz-fit-content;min-width:fit-content;padding:var(--a-spacing-05) var(--a-spacing-3)}.navds-toggle-group__button>.navds-toggle-group__button-inner>svg{font-size:1.5rem}.navds-toggle-group--small>.navds-toggle-group__button>.navds-toggle-group__button-inner>svg{font-size:1.125rem}@media (forced-colors:active){.navds-toggle-group{border:2px solid #0000}.navds-toggle-group__button:hover{color:highlight}.navds-toggle-group__button[aria-checked=true],.navds-toggle-group__button[aria-pressed=true]{background-color:selecteditem;color:selecteditemtext}.navds-toggle-group__button[aria-checked=true]>*,.navds-toggle-group__button[aria-pressed=true]>*{forced-color-adjust:none}.navds-toggle-group__button:active{background-color:none!important}.navds-toggle-group__button:focus-visible{outline-color:highlight}}
|
package/dist/components.css
CHANGED
|
@@ -6099,6 +6099,10 @@ button.navds-internalheader__title:active,
|
|
|
6099
6099
|
gap: var(--a-spacing-2);
|
|
6100
6100
|
}
|
|
6101
6101
|
|
|
6102
|
+
.navds-toggle-group__wrapper--fill {
|
|
6103
|
+
justify-items: initial;
|
|
6104
|
+
}
|
|
6105
|
+
|
|
6102
6106
|
.navds-toggle-group {
|
|
6103
6107
|
border-radius: var(--a-border-radius-medium);
|
|
6104
6108
|
background-color: var(--ac-toggle-group-bg, var(--a-surface-transparent));
|
|
@@ -7101,7 +7105,7 @@ button.navds-stepper__step {
|
|
|
7101
7105
|
.navds-tabs__tablist {
|
|
7102
7106
|
display: flex;
|
|
7103
7107
|
max-width: 100%;
|
|
7104
|
-
width:
|
|
7108
|
+
width: 100%;
|
|
7105
7109
|
scroll-behavior: smooth;
|
|
7106
7110
|
-ms-overflow-style: none; /* for Internet Explorer, Edge */
|
|
7107
7111
|
scrollbar-width: none; /* for Firefox */
|
|
@@ -7177,6 +7181,10 @@ button.navds-stepper__step {
|
|
|
7177
7181
|
gap: var(--a-spacing-1);
|
|
7178
7182
|
}
|
|
7179
7183
|
|
|
7184
|
+
.navds-tabs__tab-inner > * {
|
|
7185
|
+
display: inline-flex;
|
|
7186
|
+
}
|
|
7187
|
+
|
|
7180
7188
|
.navds-tabs__tab-inner svg {
|
|
7181
7189
|
flex-shrink: 0;
|
|
7182
7190
|
}
|
|
@@ -7211,6 +7219,10 @@ button.navds-stepper__step {
|
|
|
7211
7219
|
font-size: 1.5rem;
|
|
7212
7220
|
}
|
|
7213
7221
|
|
|
7222
|
+
.navds-tabs__tab--fill {
|
|
7223
|
+
flex: 1 1 100%;
|
|
7224
|
+
}
|
|
7225
|
+
|
|
7214
7226
|
.navds-tabs__tabpanel:focus-visible {
|
|
7215
7227
|
outline: 2px solid transparent;
|
|
7216
7228
|
box-shadow: inset 0 0 0 2px var(--a-border-focus);
|