@digdir/designsystemet-css/dist/src/tabs.css

CSS for Designsystemet

.ds-tabs{--dsc-tabs-tab-padding:var(--ds-size-3) var(--ds-size-5);--dsc-tabs-tab-color:var(--ds-color-neutral-text-subtle);--dsc-tabs-tab-color--hover:var(--ds-color-neutral-text-default);--dsc-tabs-tab-color--selected:var(--ds-color-text-subtle);--dsc-tabs-content-padding:var(--ds-size-4) var(--ds-size-5);--dsc-tabs-list-border-color:var(--ds-color-neutral-border-subtle);--dsc-tabs-list-border-bottom-width:var(--ds-border-width-default);--dsc-tabs-list-border-bottom-style:solid}.ds-tabs [role=tabpanel],.ds-tabs u-tabpanel{padding:var(--dsc-tabs-content-padding)}:is(.ds-tabs [role=tabpanel],.ds-tabs u-tabpanel):focus-visible{box-shadow:var(--_ds--focus,var(--dsc-focus-boxShadow));outline:var(--_ds--focus,var(--dsc-focus-outline));outline-offset:var(--_ds--focus,var(--ds-border-width-focus))}:is(.ds-tabs [role=tabpanel],.ds-tabs u-tabpanel):focus-visible *{--_ds--focus: }.ds-tabs [role=tablist],.ds-tabs u-tablist{border-bottom-style:var(--dsc-tabs-list-border-bottom-style);border-bottom-width:var(--dsc-tabs-list-border-bottom-width);border-color:var(--dsc-tabs-list-border-color);flex-direction:row;overflow-x:auto;position:relative}:is(.ds-tabs [role=tablist],.ds-tabs u-tablist):not([hidden]){display:flex}:is(.ds-tabs [role=tablist],.ds-tabs u-tablist)>[role=tab],:is(.ds-tabs [role=tablist],.ds-tabs u-tablist)>u-tab{align-items:center;background:none;border:0;box-sizing:border-box;color:var(--dsc-tabs-tab-color);cursor:pointer;flex-direction:row;font-family:inherit;font-size:inherit;gap:var(--ds-size-1);justify-content:center;line-height:var(--ds-line-height-sm);margin:0;padding:var(--dsc-tabs-tab-padding);position:relative;text-align:center;white-space:nowrap}:is(:is(.ds-tabs [role=tablist],.ds-tabs u-tablist)>[role=tab],:is(.ds-tabs [role=tablist],.ds-tabs u-tablist)>u-tab):focus-visible{box-shadow:var(--_ds--focus,var(--dsc-focus-boxShadow-inset));outline:var(--_ds--focus,var(--dsc-focus-outline));outline-offset:calc(var(--_ds--focus, var(--ds-border-width-focus))*-1)}:is(:is(.ds-tabs [role=tablist],.ds-tabs u-tablist)>[role=tab],:is(.ds-tabs [role=tablist],.ds-tabs u-tablist)>u-tab):focus-visible *{--_ds--focus: }:is(:is(.ds-tabs [role=tablist],.ds-tabs u-tablist)>[role=tab],:is(.ds-tabs [role=tablist],.ds-tabs u-tablist)>u-tab):not([hidden]){display:flex}:is(:is(.ds-tabs [role=tablist],.ds-tabs u-tablist)>[role=tab],:is(.ds-tabs [role=tablist],.ds-tabs u-tablist)>u-tab):not([data-size]){font-size:inherit}:is(:is(.ds-tabs [role=tablist],.ds-tabs u-tablist)>[role=tab],:is(.ds-tabs [role=tablist],.ds-tabs u-tablist)>u-tab) :where(img,svg){flex-shrink:0;font-size:1.25em}:is(:is(.ds-tabs [role=tablist],.ds-tabs u-tablist)>[role=tab],:is(.ds-tabs [role=tablist],.ds-tabs u-tablist)>u-tab):after{bottom:0;content:"";display:block;height:.15em;left:0;position:absolute;width:100%}[aria-selected=true]:is(:is(.ds-tabs [role=tablist],.ds-tabs u-tablist)>[role=tab],:is(.ds-tabs [role=tablist],.ds-tabs u-tablist)>u-tab){color:var(--dsc-tabs-tab-color--selected)}[aria-selected=true]:is(:is(.ds-tabs [role=tablist],.ds-tabs u-tablist)>[role=tab],:is(.ds-tabs [role=tablist],.ds-tabs u-tablist)>u-tab):after{background:var(--dsc-tabs-tab-color--selected)}[aria-selected=true]:is(:is(.ds-tabs [role=tablist],.ds-tabs u-tablist)>[role=tab],:is(.ds-tabs [role=tablist],.ds-tabs u-tablist)>u-tab):focus-visible:after{z-index:-1}@media (forced-colors:active){[aria-selected=true]:is(:is(.ds-tabs [role=tablist],.ds-tabs u-tablist)>[role=tab],:is(.ds-tabs [role=tablist],.ds-tabs u-tablist)>u-tab){border-bottom:2px solid CanvasText;color:CanvasText}}:is(:is(.ds-tabs [role=tablist],.ds-tabs u-tablist)>[role=tab],:is(.ds-tabs [role=tablist],.ds-tabs u-tablist)>u-tab):focus-visible{z-index:2}@media (hover:hover) and (pointer:fine){:is(:is(.ds-tabs [role=tablist],.ds-tabs u-tablist)>[role=tab],:is(.ds-tabs [role=tablist],.ds-tabs u-tablist)>u-tab):hover:not([aria-selected=true]){color:var(--dsc-tabs-tab-color--hover)}:is(:is(.ds-tabs [role=tablist],.ds-tabs u-tablist)>[role=tab],:is(.ds-tabs [role=tablist],.ds-tabs u-tablist)>u-tab):hover:not([aria-selected=true]):after{background:var(--dsc-tabs-list-border-color)}}