@dnb/eufemia
Version:
DNB Eufemia Design System UI Library
113 lines • 4.45 kB
CSS
/*
* Accordion theme
*
*/
/*
* Utilities
*/
.dnb-accordion {
--accordion-border-width: 0;
--accordion-border-radius: 0;
--accordion-header-margin-vertical: 1rem;
--accordion-header-margin-vertical--description: 0.5rem;
--accordion-header-wrapper-margin--icon-right: calc(
1.5rem - var(--sb-accordion-frame-width)
);
--sb-accordion-header-border-radius--expanded: 0.125rem 0.125rem 0 0;
--sb-accordion-header-border-radius--hover: 0.125rem;
--sb-accordion-header-border-radius--hover-expanded: 0.125rem 0.125rem 0
0;
--accordion-header-icon-gutter: 0.5rem;
--accordion-header-icon-margin: calc(
1.5rem - var(--sb-accordion-frame-width)
);
--sb-accordion-frame-color: transparent;
--sb-accordion-frame-width: 0.1875rem;
--sb-accordion-frame-width--active: 0rem;
--sb-accordion-content-padding-left: calc(
3.5rem - var(--sb-accordion-frame-width)
);
--sb-accordion-content-border-radius: 0 0 0.125rem 0.125rem;
--accordion-content-margin: 0;
--accordion-content-padding: 0 1rem 1rem
var(--sb-accordion-content-padding-left);
color: var(--sb-color-text);
}
.dnb-accordion__header, .dnb-accordion__content {
background-color: var(--sb-accordion-background, transparent);
border-left: var(--sb-accordion-frame-width) solid var(--sb-accordion-frame-color);
}
html:not([data-whatintent=touch]) .dnb-accordion__header:focus-visible[disabled] {
cursor: not-allowed;
}
html:not([data-whatintent=touch]) .dnb-accordion__header:focus-visible:not([disabled]) {
outline: none;
--border-color: var(--focus-ring-color);
--border-width: var(--focus-ring-width);
box-shadow: 0 0 0 var(--border-width) var(--border-color);
border-color: transparent;
z-index: 1;
border-radius: 0.125rem;
background-color: var(--sb-color-blue-light-3);
color: var(--border-color);
}
html:not([data-whatintent=touch]) .dnb-accordion__header:focus-visible:not([disabled]) .dnb-accordion__header__icon {
color: var(--border-color);
}
html:not([data-whatintent=touch]) .dnb-accordion__header:hover[disabled] {
cursor: not-allowed;
}
html:not([data-whatintent=touch]) .dnb-accordion__header:hover:not([disabled]) {
background-color: var(--sb-color-violet-light-2);
border-radius: var(--sb-accordion-header-border-radius--hover);
}
.dnb-accordion__header:active[disabled], html:not([data-whatintent=touch]) .dnb-accordion__header:active[disabled] {
cursor: not-allowed;
}
.dnb-accordion__header:active:not([disabled]), html:not([data-whatintent=touch]) .dnb-accordion__header:active:not([disabled]) {
background-color: var(--sb-color-white);
--border-color: ;
--border-width: 0.0625rem;
box-shadow: inset 0 0 0 var(--border-width) var(--border-color);
--border-color: var(--sb-color-violet);
border-left-width: var(--sb-accordion-frame-width--active);
padding-left: calc(var(--sb-accordion-frame-width) - var(--sb-accordion-frame-width--active));
}
.dnb-accordion__header__icon, .dnb-accordion__header__container {
color: var(--sb-color-violet);
}
.dnb-accordion__header--icon-right {
--accordion-header-icon-margin: 1.5rem;
}
.dnb-accordion__header--icon-right + .dnb-accordion__content {
--sb-accordion-content-padding-left: calc(
1.5rem - var(--sb-accordion-frame-width)
);
--accordion-content-padding: 0 1rem 1rem
var(--sb-accordion-content-padding-left);
}
.dnb-accordion__header[disabled] * {
color: var(--sb-color-gray-dark-2);
}
.dnb-accordion--expanded {
--sb-accordion-background: var(--sb-color-violet-light-4);
--sb-accordion-frame-color: var(--sb-color-violet);
--sb-accordion-frame-width--active: 0.125rem;
}
html:not([data-whatintent=touch]) .dnb-accordion--expanded > .dnb-accordion__header:hover[disabled] {
cursor: not-allowed;
}
html:not([data-whatintent=touch]) .dnb-accordion--expanded > .dnb-accordion__header:hover:not([disabled]) {
border-radius: var(--sb-accordion-header-border-radius--hover-expanded);
}
.dnb-accordion--expanded > .dnb-accordion__header--expanded {
border-radius: var(--sb-accordion-header-border-radius--expanded);
}
.dnb-accordion--expanded > .dnb-accordion__content {
border-radius: var(--sb-accordion-content-border-radius);
}
.dnb-accordion--expanded > .dnb-accordion__header[disabled],
.dnb-accordion--expanded > .dnb-accordion__header[disabled] + .dnb-accordion__content {
--sb-accordion-background: var(--sb-color-gray-light-2);
--sb-accordion-frame-color: var(--sb-color-gray-dark-2);
}