@bakung-ui/bakung.css
Version:
A modern, lightweight, zero-JS composable HTML-UI library designed for those who build on desktop and aim for mobile
2,496 lines (1,909 loc) • 93.8 kB
CSS
/*************************
Sizes
(--size-lg: ≥ 1600px)
--size-md: ≥ 1280px
816px
--size-sm: ≥ 768px
--size-xs: ≥ 640px
576px
######################
>>> TABLE OF CONTENTS:
######################
## Import styles
## Overrides and set up new styles
## Component (Widget) & Element
### A (Link)
### Avatar
### Badge
└ Chip
### Button
### Checkbox & Radio button
* Removeable
* Switchable
* Toggle
### Divider
### Media
* Image (+ Picture)
* Video
//TODO: Make popover menu can open from right to left when it's stacked vertically. (Try, change flex to grid)
### Navbar
└ Breadcrumb
### Steps
### Tabs
### Tooltip
### Dialog
### Notice (info)
└ Notify (toast)
### Popper (Popover)
### Panel
### Floater
### Appear
└ Off canvas
### Accordions
### Cards
├ Scrollable
└ Slide
//TODO: slide__item.card card__body Set a maximum height to prevent the element from expanding indefinitely when the text content is long
### Slide (Carousel)
// └ Gallery // desain lain carousel ❗
### Group
### Form
//└ Compact/Normal/Spacious ❗
### Container
### Row, Column
//### Description List
//### File
//### Image Comparison ❗
//### List group
//### Progress
//### Slider (Range)
### Table ❗
### @Container
### @Media screen
*************************/
/*
## Import styles
*/
/* INFO: Comment out this line during development if you are manually linking the file in the HTML <head>. */
@import "@bakung-ui/minimax.css/css/_styles.css";
/*
## Overrides and set up new styles
*/
/* INFO: Uncomment this line to overrides and apply new styles */
/* @layer base {} */
@layer ui {
/*
## Component (Widget) & Element
*/
/*
### Link
*/
a {
:where(&.ignore-visited):visited {
color: currentColor;
}
}
/*
### Avatar
*/
.avatar {
font: 300 var(--avatar--font-size, .75rem) var(--font-family);
background: var(--background-color-text);
border-radius: .125em;
height: var(--avatar--height, 2em);
width: var(--avatar--width, 2em);
position: relative;
display: inline-block;
text-align: center;
}
[data-avatar-name]::before {
content: attr(data-avatar-name);
font-size: .5em;
width: 80%;
position: absolute;
inset: 50% auto auto 50%;
translate: -50% -50%;
overflow: hidden;
}
.avatar__img {
border-radius: inherit;
height: 100%;
width: 100%;
position: absolute;
inset: 0 auto auto 0;
z-index: 1;
}
.avatar__figure:not(img) {
border-radius: inherit;
position: absolute;
inset: 50% auto auto 50%;
display: block;
translate: -50% -50%;
z-index: 1;
}
.avatar__indicator {
background: var(--background-color-off);
border-radius: 50%;
box-shadow: 0 0 0 1px var(--color-base-5);
height: var(--avatar__indicator--height, .65em);
width: var(--avatar__indicator--width, .65em);
position: absolute;
inset: 0 -.25em auto auto;
text-align: center;
z-index: 1;
}
.avatar--circle {
border-radius: 50%;
.avatar__indicator {
inset: 0 0 auto auto;
translate: 0;
}
}
/*
### Badge
*/
.badge {
user-select: none;
font: normal normal var(--badge--font-size, .9rem) / 1 var(--font-family);
color: var(--badge--color);
background: var(--badge--background);
border: 0 var(--badge--border-style, solid) var(--badge--border-color);
border-width: var(--badge--border-width, 1px);
border-radius: var(--badge--border-radius, 1rem);
white-space: nowrap;
min-height: var(--badge--min-height, .75rem);
min-width: var(--badge--min-width, .75rem);
display: inline-block;
margin: 0; /*reset fieldset > label margin*/
padding: .125rem .5rem .25rem;
display: inline-flex;
align-items: baseline;
a& {
text-decoration: none;
}
}
.badge--accent {
color: white;
background: var(--accent-color);
border-color: var(--accent-color);
}
.badge--low {
background: var(--color-low-10);
border-color: var(--color-low-20);
}
.badge--normal {
background: var(--color-normal-10);
border-color: var(--color-normal-20);
}
.badge--important {
background: var(--color-important-10);
border-color: var(--color-important-20);
}
.badge--critical {
background: var(--color-critical-10);
border-color: var(--color-critical-20);
}
.badge--success {
background: var(--color-success-10);
border-color: var(--color-success-20);
}
.badge--info {
background: var(--color-info-10);
border-color: var(--color-info-20);
}
.badge--caution {
background: var(--color-caution-10);
border-color: var(--color-caution-20);
}
.badge--warning {
background: var(--color-warning-10);
border-color: var(--color-warning-20);
}
.badge--error {
background: var(--color-error-10);
border-color: var(--color-error-20);
}
.badge--danger {
color: var(--color-danger-70);
background: var(--color-danger-10);
border-color: var(--color-danger-20);
}
/**************** Chip ****************/
.badge--chip {
background: var(--background-color);
border: 1px solid currentColor;
border-radius: .25rem;
transition: color 200ms ease-out, background 200ms ease-out, border 200ms ease-out;
:where(&) .btn--icon {
color: inherit;
}
&:where(.badge--accent) {
color: var(--accent-color);
}
&:where(.badge--low) {
color: var(--color-low-50);
}
&:where(.badge--normal) {
color: var(--color-normal-50);
}
&:where(.badge--important) {
color: var(--color-important-50);
}
&:where(.badge--critical) {
color: var(--color-critical-50);
}
&:where(.badge--success) {
color: var(--color-success-50);
}
&:where(.badge--info) {
color: var(--color-info-50);
}
&:where(.badge--caution) {
color: var(--color-caution-50);
}
&:where(.badge--warning) {
color: var(--color-warning-50);
}
&:where(.badge--error) {
color: var(--color-error-50);
}
&:where(.badge--danger) {
color: var(--color-danger-50);
}
}
/*
### Button
*/
.btn {
font-size: var(--btn--font-size);
transition: color 500ms ease-out, background 500ms ease-out, border 500ms ease-out;
}
.btn:not(:where(button, [type="button"], [type="reset"], [type="submit"])) {
padding: var(--as-btn--padding);
}
.btn--icon {
font-size: var(--btn--icon-font-size);
background: none;
border: none;
border-radius: 50%;
line-height: 1;
min-height: auto;
margin: 0;
padding: 0;
box-shadow: none;
&:focus,
&:hover {
scale: 1.1;
/* filter: invert(.4); */
}
&:hover {
box-shadow: none;
}
.badge & {
translate: 0 .125em;
}
}
.btn--accent {
color: white;
background: var(--accent-color);
border-color: var(--accent-color);
}
.btn--low {
background: var(--color-low-30);
border-color: var(--color-low-40);
}
.btn--normal {
background: var(--color-normal-30);
border-color: var(--color-normal-40);
}
.btn--important {
background: var(--color-important-30);
border-color: var(--color-important-40);
}
.btn--critical {
background: var(--color-critical-30);
border-color: var(--color-critical-40);
}
.btn--success {
background: var(--color-success-30);
border-color: var(--color-success-40);
}
.btn--info {
background: var(--color-info-30);
border-color: var(--color-info-40);
}
.btn--caution {
background: var(--color-caution-30);
border-color: var(--color-caution-40);
}
.btn--warning {
background: var(--color-warning-30);
border-color: var(--color-warning-40);
}
.btn--error {
background: var(--color-error-30);
border-color: var(--color-error-40);
}
.btn--danger {
background: var(--color-danger-30);
border-color: var(--color-danger-40);
}
.btn--ghost {
background: oklch(from var(--accent-color) l c h / .05);
border: 0;
box-shadow: none;
text-decoration: underline 2px dotted var(--color-base-9);
&:focus {
text-decoration-style: solid;
}
&:active {
background: oklch(from var(--accent-color) l c h / .25);
}
}
.btn--bordered {
background: revert-layer;
border-color: currentColor;
:where(&).btn--accent {
color: var(--accent-color);
}
:where(&).btn--low {
color: var(--color-low-50);
}
:where(&).btn--normal {
color: var(--color-normal-50);
}
:where(&).btn--important {
color: var(--color-important-50);
}
:where(&).btn--critical {
color: var(--color-critical-50);
}
:where(&).btn--success {
color: var(--color-success-50);
}
:where(&).btn--info {
color: var(--color-info-50);
}
:where(&).btn--caution {
color: var(--color-caution-50);
}
:where(&).btn--warning {
color: var(--color-warning-50);
}
:where(&).btn--error {
color: var(--color-error-50);
}
:where(&).btn--danger {
color: var(--color-danger-50);
}
}
/*
### Checkbox & Radio button
*/
/**************** Removeable ****************/
[be-removeable] {
user-select: none;
display: inline-flex;
align-items: flex-end; /*INFO: align sub items*/
opacity: 1;
transition: opacity 350ms linear, display 350ms allow-discrete, scale 200ms linear;
:where(&) > .btn {
margin: auto auto auto .75em;
}
&:has([data-state-handler]:not(:checked)) {
scale: 85%;
opacity: 0;
display: none;
}
&:has([data-state-handler]:focus-visible) {
outline: var(--focus-outline);
}
}
/**************** Switchable ****************/
[be-switchable] {
user-select: none;
cursor: pointer;
color: var(--font-color-alt-2);
border-color: var(--border-color-control);
:where(&) > .visual-indicator {
margin: 0 .5em 0 0;
overflow: clip;
transition: opacity 350ms ease-out, width 200ms ease-out, margin 200ms ease-out;
}
&:has([data-state-handler]:focus-visible) {
outline: var(--focus-outline);
}
}
[selected], :has(> [data-state-handler]:checked) {
[be-switchable]:not(&) {
.active-visible {
opacity: 0;
width: 0;
margin: 0;
}
}
[be-switchable]:is(&) {
color: white;
background: var(--accent-color);
border-color: var(--accent-color);
.active-invisible {
opacity: 0;
width: 0;
margin: 0;
}
}
}
/**************** Toggle ****************/
.toggle {
display: inline-flex;
align-items: baseline;
&:has(:where([data-toggle-handler-on], [data-toggle-handler-off-on]):not(:checked)) .active-visible,
&:has([data-toggle-handler-off]:not(:checked), [data-toggle-handler-off-on]:checked) .active-invisible {
display: none;
}
}
.toggle__control {
align-self: center;
border: none;
height: calc(.75em * var(--toggle-size));
width: calc(1.5em * var(--toggle-size));
position: relative;
display: flex;
margin: 0 .5em;
padding: 0;
align-items: center;
& > label {
cursor: pointer;
height: inherit;
width: inherit;
position: absolute;
display: block;
z-index: 1;
&:has(:is([data-toggle-handler-off], [data-toggle-handler-on]):checked) {
opacity: 0;
height: 0;
width: 0;
z-index: -1;
}
}
&:has([data-toggle-handler-off]:focus-visible, [data-toggle-handler-on]:focus-visible, [data-toggle-handler-off-on]:focus-visible)::after {
outline: var(--focus-outline);
}
&:has(:is([data-toggle-handler-on], [data-toggle-handler-off-on]):checked) {
.toggle__indicator,
&::after {
inset: 0 0 auto auto;
}
}
&:has(:is([data-toggle-handler-off], [data-toggle-handler-on], [data-toggle-handler-off-on]):disabled) > label {
cursor: not-allowed;
}
&::before,
&::after {
content:"";
position: absolute;
display: block;
}
/* path */
&::before {
background: var(--background-color-off);
border: 0 var(--controls--border-style) var(--controls--border-color);
border-width: var(--controls--border-width);
border-radius: calc(1em * var(--toggle-size));
height: calc(var(--toggle-path-size, .5em) * var(--toggle-size));
width: 100%;
transition: background 200ms ease-in-out;
}
/* indicator */
&:has(> .toggle__indicator) {
&::after {
display: none;
}
&:has([data-toggle-handler-off]:focus-visible, [data-toggle-handler-on]:focus-visible, [data-toggle-handler-off-on]:focus-visible)::before {
outline: var(--focus-outline);
}
}
}
/* indicator */
.toggle__indicator {
display: flex;
align-items: center;
justify-content: center;
}
.toggle__control::after, .toggle__indicator {
background: var(--background-color-clickable);
border: 0 var(--controls--border-style) var(--controls--border-color);
border-width: var(--controls--border-width);
border-radius: 50%;
box-shadow: none;
height: calc(.75em * var(--toggle-size));
width: calc(.75em * var(--toggle-size));
position: absolute;
inset: 0 calc(100% - calc(.75em * var(--toggle-size))) auto auto;
transition: inset 200ms ease-in-out;
}
.toggle__control:has(:is([data-toggle-handler-on], [data-toggle-handler-off-on]):checked),
.toggle:is(.toggle--mutual) .toggle__control {
&::before {
background: var(--color-base-5);
}
.toggle__indicator,
&::after {
background: var(--accent-color);
}
}
.toggle--vertical {
display: inline-flex;
flex-flow: column-reverse;
.toggle__control {
margin: .5em 0;
transform: rotate(270deg);
}
.toggle__control > * {
align-self: normal;
}
.toggle__control::before {
align-self: normal;
translate: 0 25%;
}
.toggle__control:has(.toggle__indicator)::before {
translate: unset;
}
.toggle__control::after {
}
}
/*
### Divider
*/
.divider {
align-self: stretch;
border-color: var(--boundary--border-color);
margin: .75rem .5rem;
position: relative;
inset: 0;
height: auto;
}
[be-divider-caption]::after {
content: attr(be-divider-caption, 'or');
font-size: .8rem;
color: var(--font-color-alt-2);
background: var(--divider--background);
position: absolute;
inset: auto auto auto 50%;
padding: 0;
translate: -50% -50%;
padding: .125rem .5rem;
}
.divider--vertical {
border-width: 0 1px 0 0;
margin: .5rem 1rem;
:where(&)[be-divider-caption]::after {
inset: 50% auto auto;
}
}
/*
### Media
*/
/**************** Figure ****************/
/**************** Image (+ Picture) ****************/
.img--fluid {
height: auto;
width: 100%;
max-width: 100%;
max-width: -webkit-fill-available;
display: block;
}
.img--thumbnail {
background: var(--background-color);
border: 0 var(--boundary--border-style) var(--boundary--border-color);
border-width: var(--boundary--border-width);
border-radius: 0.375rem;
height: auto;
width: 100%;
max-width: 100%;
max-width: -webkit-fill-available;
display: block;
padding: 0.25em;
}
.img--fit-cover {
object-fit: cover;
}
.img--fit-contain {
object-fit: contain;
}
.img--fit-fill {
display: block;
object-fit: fill;
height: 100%;
width: 100%;
}
/**************** Video ****************/
.video--fluid {
height: auto;
width: 100%;
max-width: 100%;
position: relative;
display: block;
padding: 0;
overflow: hidden;
}
.video--fluid::before {
content: none;
}
.video--scale-4-3::before {
padding-bottom: 75%;
}
.video--scale-1-1::before {
padding-bottom: 100%;
}
/*
### Navbar
*/
.navbar {
background: var(--navbar--background);
display: flex;
flex-flow: row wrap;
align-items: center;
& a {
text-decoration: none;
}
> .nav > .nav__item > .nav {
filter: var(--shadow-float-alt-1);
}
/*# .navbar--*compact #*/
&:where([data-navbar-active]) {
&:is([data-navbar-active="true" i]) .active-invisible {
display: none;
}
&:not([data-navbar-active="true" i]) .active-visible {
display: none;
}
}
&:has([data-toggle-navbar-handler]:checked) .active-invisible {
display: none;
}
&:has([data-toggle-navbar-handler]:not(:checked)) .active-visible {
display: none;
}
}
.navbar__brand {
position: relative;
display: inline-block;
padding: .5rem 1rem;
}
.navbar__toggle {
position: absolute;
opacity: 0;
overflow: clip;
visibility: hidden;
&:is(:focus, :focus-within) {
outline: var(--focus-outline);
}
}
.nav {
background: var(--nav--background, inherit);
width: max-content;
display: inline-flex;
flex-flow: row wrap;
padding: 0;
list-style: none;
.nav {
background: var(--nav__nav--background);
position: absolute;
inset: 100% auto auto 0;
display: none;
flex-flow: column nowrap;
margin: 0;
padding: 0;
transform: translateY(-.25rem);
z-index: var(--z-index-popover);
transition: display 200ms allow-discrete, transform 200ms ease-in-out;
.nav {
inset: 0 auto auto 100%;
}
}
}
.nav__item-line::before {
content: "";
border: 0 var(--boundary--border-style) var(--boundary--border-color);
border-width: 0 0 1px;
height: 0;
display: block;
padding: 0;
}
.nav__item {
flex: 0 0 auto;
position: relative;
padding: .5rem 1rem;
&:has(.nav) > a::after {
content: "";
position: relative;
display: inline-block;
margin: auto auto auto 1em;
border-right: .25em solid transparent;
border-bottom: .25em solid currentColor;
border-left: .25em solid transparent;
inset: auto auto .25em auto;
transition: transform 350ms ease-in-out;
}
&:hover {
background: var(--background-color-active);
& > a::after {
transform: scaleY(-1);
transform-origin: center;
}
}
> .visual-indicator,
> * > .visual-indicator {
margin: 0 0 0 1em;
padding: 0;
transform: rotate(90deg) scaleX(-1);
transition: transform 350ms ease-in-out;
}
&:is(:hover, :focus, :focus-within) {
> .visual-indicator,
> * > .visual-indicator {
transform: rotate(90deg) scaleX(1);
}
> .nav {
display: inline-flex;
transform: translateY(0);
@starting-style {
transform: translateY(-.25rem);
}
}
}
}
.navbar--no-indicator .nav__item > a::after {
display: none;
}
.navbar--vertical {
flex-flow: column;
align-items: initial;
.navbar__brand {
padding: .5rem 1rem;
}
.nav {
inset: 0 auto auto 100%;
flex-flow: column;
}
}
.navbar--compact {
justify-content: space-between;
:where(.navbar__toggle) {
position: static;
opacity: 1;
overflow: initial;
visibility: visible;
}
> .nav {
display: none;
overflow: hidden;
transition: display 200ms allow-discrete, margin-top 200ms ease-in-out;
> .nav__item > .nav {
filter: none;
}
> .nav__item:first-child {
margin-top: -110%; /* INFO: for animation */
transition: margin-top 350ms ease-in-out;
}
}
.nav {
background: transparent;
position: static;
width: 100%;
.nav {
width: calc(100% + 2rem);
display: none;
margin: .5rem -1rem -.5rem -1rem;
padding: 0 0 0 1rem;
transition: none;
}
}
.nav__item {
.nav__item:first-child {
margin: 0;
}
.nav__item:last-child {
padding: .5rem 1rem;
}
&:hover {
filter: brightness(98%);
}
}
.nav__item:is(:focus, :focus-within),
&:not(.navbar--no-hover) .nav__item:hover {
> .nav {
display: block;
}
}
:where(&)[data-navbar-active="true" i],
&:has([data-toggle-navbar-handler]:checked) {
> .nav {
display: block;
> .nav__item:first-child {
margin-top: 0;
@starting-style {
margin-top: -110%;
}
}
}
}
}
/**************** Breadcrumb ****************/
.navbar--breadcrumb {
/* INFO: Dont delete or move */
--breadcrumb-divider: attr(be-breadcrumb-divider, '/');
background: var(--navbar--breadcrumb--background, unset);
gap: var(--navbar--breadcrumb-gap, 0 1.5rem);
.navbar__brand {
padding: 0;
}
> .nav {
background: unset;
gap: var(--navbar--breadcrumb-gap, 0 1.5rem);
}
.navbar__brand::after,
> .nav > .nav__item:not(:last-child)::after {
content: var(--breadcrumb-divider);
color: var(--font-color-alt-2);
position: absolute;
right: -1rem;
}
> .nav > .nav__item {
padding: 0;
&:hover {
background: inherit;
}
}
}
/*
### Steps
*/
.steps {
display: grid;
grid: max-content min-content / auto-flow 200px;
gap: 1rem;
list-style: none;
}
.step {
grid-area: span 2 / auto;
grid: subgrid [row-1-start] [row-1-end row-2-start] [row-2end] / subgrid [col];
display:grid;
text-align: center;
z-index: 1;
}
.step__header {
display: flex;
margin: .5rem;
}
.step__trail {
position: relative;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
&::before,
&::after {
content: "";
background: var(--background-color-off);
position: absolute;
z-index: -1;
}
:where(.step:not(:last-child)) &::after {
height: 1px;
width: calc(100% + 2rem);
transform: translate(50%, 0);
}
}
.step__indicator {
background: var(--background-color-off);
border: 0 var(--step__indicator--border-style, solid) var(--step__indicator--border-color);
border-width: var(--step__indicator--border-width, 0);
border-radius: 50%;
min-height: .5rem;
min-width: .5rem;
display: inline-flex;
margin: initial;
padding: initial;
/* INFO: reset button */
&:active, &:focus {
transform: unset;
filter: unset;
}
&:has(.visual-aside, .visual-indicator) {
padding: .25rem;
}
.visual-aside,
.visual-indicator {
translate: 0;
}
}
.step__body {
color: var(--step__body--color);
padding: .5rem;
}
.steps--vertical {
grid: auto-flow min-content / min-content minmax(auto, 1fr);
.step {
grid-area: auto / span 2;
text-align: left;
}
.step__header {
justify-content: center;
}
.step__trail {
margin-top: .25lh;
align-items: baseline;
justify-content: center;
.step:not(:last-child) &::after {
height: calc(100% + 2.5rem);
width: 1px;
transform: none;
}
}
}
.step--active {
.step:has(~ &) {
.step__trail {
&::before, &::after {
background: var(--accent-color);
}
}
.step__indicator {
background: var(--accent-color);
min-height: .75rem;
min-width: .75rem;
}
.step__body {
color: revert-layer;
}
}
.step__trail::before {
background: var(--accent-color);
}
.step__indicator {
background: var(--background-color);
border: 0 var(--step--active_-step__indicator--border-style, solid) var(--accent-color);
border-width: var(--step--active_-step__indicator--border-width, .125rem);
min-height: .75rem;
min-width: .75rem;
}
.step__body {
color: revert-layer;
}
}
.steps--done {
.step__trail {
&::before, &::after {
background: var(--accent-color);
}
}
.step__indicator {
background: var(--accent-color);
min-height: .75rem;
min-width: .75rem;
}
.step__body {
color: revert-layer;
}
}
/*
### Tabs
*/
.tabs {
display: flex;
flex-flow: column nowrap;
filter: var(--shadow-border);
margin: auto auto 1rem;
}
.tabs__nav {
border: 0 var(--tabs__nav--border-style, solid) var(--tabs__nav--border-color);
border-width: 0;
display: flex;
}
.tab__nav {
cursor: pointer;
background: var(--background-color-clickable);
border: 0 var(--boundary--border-style) var(--boundary--border-color);
border-width: 1px 1px 0;
border-radius: .125rem .125rem 0 0;
position: relative;
padding: .25rem .75rem;
box-shadow: none;
&:is(&:focus, &:focus-within) {
text-decoration: underline 2px dashed var(--color-base-9);
/* INFO: when using button as trigger */
box-shadow: none;
outline: none;
scale: none;
}
}
.tab__nav[data-tab-active="true" i],
.tab__nav:has([data-tab-select-handler]:checked) {
background: var(--tab__nav--active--background);
z-index: 100;
}
.tabs__content {
background: var(--tabs__content--background);
border: 0 var(--boundary--border-style) var(--boundary--border-color);
border-width: 1px;
position: relative;
margin: -1px 0 0;
padding: 1rem;
z-index: 99;
}
.tab__content {
border: 0 solid var(--boundary--border-color);
display: none;
}
.tab__content[data-tab-active="true" i],
.tabs:has(.tab__nav:nth-child(1) [data-tab-select-handler]:checked)
.tab__content:nth-child(1),
.tabs:has(.tab__nav:nth-child(2) [data-tab-select-handler]:checked)
.tab__content:nth-child(2),
.tabs:has(.tab__nav:nth-child(3) [data-tab-select-handler]:checked)
.tab__content:nth-child(3),
.tabs:has(.tab__nav:nth-child(4) [data-tab-select-handler]:checked)
.tab__content:nth-child(4),
.tabs:has(.tab__nav:nth-child(5) [data-tab-select-handler]:checked)
.tab__content:nth-child(5),
.tabs:has(.tab__nav:nth-child(6) [data-tab-select-handler]:checked)
.tab__content:nth-child(6),
.tabs:has(.tab__nav:nth-child(7) [data-tab-select-handler]:checked)
.tab__content:nth-child(7),
.tabs:has(.tab__nav:nth-child(8) [data-tab-select-handler]:checked)
.tab__content:nth-child(8),
.tabs:has(.tab__nav:nth-child(9) [data-tab-select-handler]:checked)
.tab__content:nth-child(9),
.tabs:has(.tab__nav:nth-child(10) [data-tab-select-handler]:checked)
.tab__content:nth-child(10),
.tabs:has(.tab__nav:nth-child(11) [data-tab-select-handler]:checked)
.tab__content:nth-child(11),
.tabs:has(.tab__nav:nth-child(12) [data-tab-select-handler]:checked)
.tab__content:nth-child(12),
.tabs:has(.tab__nav:nth-child(13) [data-tab-select-handler]:checked)
.tab__content:nth-child(13),
.tabs:has(.tab__nav:nth-child(14) [data-tab-select-handler]:checked)
.tab__content:nth-child(14),
.tabs:has(.tab__nav:nth-child(15) [data-tab-select-handler]:checked)
.tab__content:nth-child(15) {
display: block;
}
.tabs--right {
flex-flow: row-reverse nowrap;
.tabs__nav {
flex: 0 0 auto;
flex-flow: column;
}
.tab__nav {
border-width: 1px 1px 0 0;
border-radius: 0 .125rem .125rem 0;
&:last-child {
border-width: 1px 1px 1px 0;
}
}
.tabs__content {
flex: 1 0 auto;
margin: 0 -1px 0 0;
}
}
.tabs--bottom {
flex-flow: column-reverse nowrap;
.tabs__nav {
flex: 0 0 auto;
flex-flow: row;
}
.tab__nav {
border-width: 0 0 1px 1px;
border-radius: 0 0 .125rem .125rem;
&:last-child {
border-width: 0 1px 1px 1px;
}
}
.tabs__content {
flex: 1 0 auto;
margin: 0 0 -1px 0;
}
}
.tabs--left {
flex-flow: row nowrap;
.tabs__nav {
flex: 0 0 auto;
flex-flow: column;
}
.tab__nav {
border-width: 1px 0 0 1px;
border-radius: .125rem 0 0 .125rem;
&:last-child {
border-width: 1px 0 1px 1px;
}
}
.tabs__content {
flex: 1 0 auto;
margin: 0 0 0 -1px;
}
}
/*
### Tooltip
*/
[be-tooltip] {
&::before {
content: "";
border-left: .4rem solid transparent;
border-right: .4rem solid transparent;
border-bottom: .4rem solid var(--background-color-text);
position: absolute;
inset: 0 auto auto 50%;
opacity: 0;
transform: scaleY(-1) translateX(-50%);
z-index: 1;
transition: opacity 200ms ease-in-out, inset 200ms ease-in-out;
}
&:is([data-tooltip-active="true" i])::before,
&:is(.tooltip--focus):focus::before,
&:hover::before {
inset: -.5rem auto auto 50%;
opacity: 1;
}
&::after {
pointer-events: none;
font-size: .7rem;
color: revert-layer;
background: var(--background-color-text);
border-radius: .125rem;
opacity: 0;
max-width: clamp(200px, 100vw - 1.5rem, 50rem);
position: absolute;
inset: auto auto 100% 50%;
display: block;
overflow: hidden;
padding: .25rem .5rem;
content: attr(be-tooltip);
white-space: pre;
text-overflow: ellipsis;
transform: translateX(-50%);
z-index: var(--z-index-tooltip);
transition: opacity 200ms ease-in-out, inset 200ms ease-in-out;
}
&:is([data-tooltip-active="true" i])::after,
&:is(.tooltip--focus):focus::after,
&:hover::after {
inset: auto auto calc(100% + .5rem) 50%;
opacity: 1;
}
&:disabled {
pointer-events: auto;
}
}
.tooltip--right {
&::before {
inset: 50% auto auto calc(100% - .5rem);
transform: rotate(-90deg);
translate: 0 -50%;
}
&:is([data-tooltip-active="true" i])::before,
&:is(.tooltip--focus):focus::before,
&:hover::before {
inset: 50% auto auto 100%;
}
&::after {
inset: 50% auto auto 100%;
transform: translateY(-50%);
}
&:is([data-tooltip-active="true" i])::after,
&:is(.tooltip--focus):focus::after,
&:hover::after {
inset: 50% auto auto calc(100% + .55rem);
}
}
.tooltip--bottom {
&::before {
inset: auto auto 0 50%;
transform: rotate(0deg) translateX(-50%);
}
&:is([data-tooltip-active="true" i])::before,
&:is(.tooltip--focus):focus::before,
&:hover::before {
inset: auto auto -.5rem 50%;
}
&::after {
inset: 100% auto auto 50%;
transform: translateX(-50%);
}
&:is([data-tooltip-active="true" i])::after,
&:is(.tooltip--focus):focus::after,
&:hover::after {
inset: calc(100% + .5rem) auto auto 50%;
}
}
.tooltip--left {
&::before {
inset: 50% calc(100% - .5rem) auto auto;
transform: rotate(90deg);
translate: 0 -50%;
}
&:is([data-tooltip-active="true" i])::before,
&:is(.tooltip--focus):focus::before,
&:hover::before {
inset: 50% 100% auto auto;
}
&::after {
inset: 50% 100% auto auto;
transform: translateY(-50%);
}
&:is([data-tooltip-active="true" i])::after,
&:is(.tooltip--focus):focus::after,
&:hover::after {
inset: 50% calc(100% + .55rem) auto auto;
}
}
.tooltip--no-pointer {
&::before {
display: none;
}
&:hover::after {
translate: 0 .25rem;
}
&:is(.tooltip--right):hover::after {
translate: -.25rem;
}
&:is(.tooltip--bottom):hover::after {
translate: 0 -.25rem;
}
&:is(.tooltip--left):hover::after {
translate: .25rem;
}
}
/*
### Dialog
*/
.dialog {
display: grid;
gap: .5rem 0;
grid: "top-start top-middle top-end" auto
"middle-start center middle-end" 1fr
"bottom-start bottom-middle bottom-end" min-content / min-content;
z-index: var(--z-index-modal);
&:not([open], [popover]:popover-open) {
display: none;
}
}
.dialog__header {
grid-area: auto / top-middle / auto / top-end;
display: flex;
justify-content: space-between;
align-items: center;
gap: var(--dialog__header--gap, .5rem);
& > :where(h1, h2, h3, h4, h5, h6) {
margin: 0;
}
}
.dialog__aside {
grid-area: top-start / auto / bottom-start / auto;
align-content: flex-start;
text-align: center;
padding: .25rem;
}
.dialog__content {
grid-area: auto / center / auto / bottom-end;
overflow: auto;
}
.dialog__footer {
grid-area: auto / bottom-middle / auto / bottom-end;
}
.dialog--md {
height: clamp(13rem, 100vh - 2rem, 458px);
width: clamp(280px, 100vw - 4rem, 590px);
}
.dialog--lg {
height: clamp(13rem, 100vh - 4rem, 796px);
width: clamp(280px, 100vw - 4rem, 1024px);
}
/*
### Notice (info)
*/
.notice {
color: var(--notice--color, revert-layer);
background: var(--notice--background-color);
border: 0 var(--notice--border-style, solid) var(--notice--border-color);
border-width: var(--notice--border-width, 1px);
border-radius: var(--notice--border-radius, .125rem);
box-shadow: var(--notice--box-shadow, );
position: relative;
display: flex;
gap: .5rem;
flex-flow: var(--notice--flex-flow, row wrap);
text-align: initial;
margin: auto auto 1rem;
padding: 1rem;
}
.notice__header {
flex: 1 1 100%;
font-size: 1.25rem;
display: block;
}
.notice__aside {
}
.notice__content {
flex: 1 1 0;
align-content: space-evenly;
overflow-y: auto;
}
.notice__footer {
}
.notice--accent {
background: var(--accent-color);
border-color: var(--accent-color);
color: white;
.notice__aside {
color: var(--accent-color);
}
}
.notice--low {
background: var(--color-low-10);
border-color: var(--color-low-20);
.notice__aside {
color: var(--color-low-80);
}
}
.notice--normal {
background: var(--color-normal-10);
border-color: var(--color-normal-20);
.notice__aside {
color: var(--color-normal-80);
}
}
.notice--important {
background: var(--color-important-10);
border-color: var(--color-important-20);
.notice__aside {
color: var(--color-important-80);
}
}
.notice--critical {
background: var(--color-critical-10);
border-color: var(--color-critical-20);
.notice__aside {
color: var(--color-critical-80);
}
}
.notice--success {
background: var(--color-success-10);
border-color: var(--color-success-20);
.notice__aside {
color: var(--color-success-80);
}
}
.notice--info {
background: var(--color-info-10);
border-color: var(--color-info-20);
.notice__aside {
color: var(--color-info-80);
}
}
.notice--caution {
background: var(--color-caution-10);
border-color: var(--color-caution-20);
.notice__aside {
color: var(--color-caution-80);
}
}
.notice--warning {
background: var(--color-warning-10);
border-color: var(--color-warning-20);
.notice__aside {
color: var(--color-warning-80);
}
}
.notice--error {
background: var(--color-error-10);
border-color: var(--color-error-20);
.notice__aside {
color: var(--color-error-80);
}
}
.notice--danger {
background: var(--color-danger-10);
border-color: var(--color-danger-20);
.notice__aside {
color: var(--color-danger-80);
}
}
/**************** Notify (toast) ****************/
.notice--notify {
background: var(--color-base-5);
border: 0 var(--notice--notify--border-style, solid) var(--notice--border-color);
border-width: var(--notice--notify--border-width, 0);
border-radius: var(--notice--notify--border-radius, .125rem);
box-shadow: var(--shadow-float);
height: auto;
max-height: 40vh;
min-width: 250px;
width: max-content;
max-width: clamp(250px, 100vw - 3rem, 992px);
position: fixed;
inset: auto auto 0 50%;
display: none;
flex-flow: row nowrap;
padding: .25rem 1rem;
padding: 0 1rem;
padding: 0 .5rem;
z-index: var(--z-index-popover);
/* Start fade in, end fade out. */
opacity: 0;
transform: translate(-50%, 0) scale(0.85);
transition:
opacity 350ms ease-in-out,
transform 350ms ease-in-out,
overlay 350ms allow-discrete,
display 350ms allow-discrete;
/* End fade in; start fade out. */
&[data-notify-active] {
display: flex;
opacity: 1;
transform: translate(-50%, 0) scale(1);
@starting-style {
/* Start values vor fade in. */
opacity: 0;
transform: translate(-50%, 0) scale(0.85);
}
}
.notice__aside {
align-content: center;
}
.notice__content {
margin: .5rem 0;
}
.notice__footer {
margin: .5rem 0;
}
&.notice--accent {
background: var(--accent-color);
}
&.notice--low {
background: var(--color-low-5);
border-color: var(--color-low-10);
}
&.notice--normal {
background: var(--color-normal-5);
border-color: var(--color-normal-10);
}
&.notice--important {
background: var(--color-important-5);
border-color: var(--color-important-10);
}
&.notice--critical {
background: var(--color-critical-5);
border-color: var(--color-critical-10);
}
&.notice--success {
background: var(--color-success-5);
border-color: var(--color-success-10);
}
&.notice--info {
background: var(--color-info-5);
border-color: var(--color-info-10);
}
&.notice--caution {
background: var(--color-caution-5);
border-color: var(--color-caution-10);
}
&.notice--warning {
background: var(--color-warning-5);
border-color: var(--color-warning-10);
}
&.notice--error {
background: var(--color-error-5);
border-color: var(--color-error-10);
}
&.notice--danger {
background: var(--color-danger-5);
border-color: var(--color-danger-10);
}
}
/*
### Popper (Popover)
*/
.popper-container {
position: relative;
display: inline-flex;
}
.popper {
background: var(--popper--background);
border: 0 var(--popper--border-style, solid) var(--popper--border-color);
border-width: var(--popper--border-width, 1px);
border-radius: var(--popper--border-radius, .125rem);
position: absolute;
inset: auto auto calc(100% + (.25rem * var(--popper-space))) 50%;
max-height: 75vh;
min-width: 5rem;
width: max-content;
max-width: clamp(200px, 100vw - 5rem, 816px);
padding: 1rem;
translate: -50%;
z-index: var(--z-index-popover);
filter: var(--shadow-float-alt-1);
&::before {
content: "";
height: calc(100% + (1rem * var(--popper-space)));
width: calc(100% + (1rem * var(--popper-space)));
position: absolute;
inset: calc(-.5rem * var(--popper-space)) auto auto calc(-.5rem * var(--popper-space));
z-index: -1;
}
@media screen and (max-height: 576px) {
& {
max-height: calc(100vh - 5rem);
}
}
}
.popper--list {
.popper__content {
display: flex;
flex-flow: column nowrap;
margin: -1rem;
padding: .25rem;
}
}
.popper__content {
height: 100%;
max-height: inherit;
overflow-y: auto;
overflow-x: hidden;
}
.popper__item {
width: 100%;
border: none;
border-radius: unset;
box-shadow: none;
margin: 0;
padding: .25rem 1rem;
outline: none;
text-align: left;
:where(&) {
background: inherit;
}
&:focus {
box-shadow: none;
text-decoration: underline 2px dashed var(--color-base-9);
}
&:focus,
&:hover {
scale: none;
}
&:is(a, button, .btn):hover {
filter: brightness(103%);
}
}
.popper__line {
z-index: 1;
&::before {
content: "";
border: 0 var(--boundary--border-style) var(--boundary--border-color);
border-width: 0 0 1px;
height: 0;
display: block;
padding: 0;
}
}
.popper--tl {
inset: auto auto calc(100% + (.25rem * var(--popper-space))) 0;
translate: 0;
}
.popper--tr {
inset: auto 0 calc(100% + (.25rem * var(--popper-space))) auto;
translate: 0;
}
.popper--bl {
inset: calc(100% + (.25rem * var(--popper-space))) auto auto 0;
translate: 0;
}
.popper--bm {
inset: calc(100% + (.25rem * var(--popper-space))) auto auto 50%;
}
.popper--br {
inset: calc(100% + (.25rem * var(--popper-space))) 0 auto auto;
translate: 0;
}
.popper--lt {
inset: 0 calc(100% + (.25rem * var(--popper-space))) auto auto;
translate: 0;
}
.popper--lm {
inset: 50% calc(100% + (.25rem * var(--popper-space))) auto auto;
translate: 0 -50%;
}
.popper--lb {
inset: auto calc(100% + (.25rem * var(--popper-space))) 0 auto;
translate: 0;
}
.popper--rt {
inset: 0 auto auto calc(100% + (.25rem * var(--popper-space)));
translate: 0;
}
.popper--rm {
inset: 50% auto auto calc(100% + (.25rem * var(--popper-space)));
translate: 0 -50%;
}
.popper--rb {
inset: auto auto 0 calc(100% + (.25rem * var(--popper-space)));
translate: 0;
}
.popper--pointer {
&::after {
content: "";
position: absolute;
inset: auto auto -.375rem 50%;
border-left: .5rem solid transparent;
border-right: .5rem solid transparent;
border-bottom: .5rem solid var(--background-color);
opacity: 1;
transform: rotate(180deg);
translate: -50%;
}
&:is(.popper--tl)::after {
inset: auto auto -.375rem .8rem;
translate: 0;
}
&:is(.popper--tr)::after {
inset: auto .8rem -.375rem auto;
translate: 0;
}
&:is(.popper--bl)::after {
inset: -.375rem auto auto .8rem;
translate: 0;
transform: rotate(0deg);
}
&:is(.popper--bm)::after {
inset: -.375rem auto auto 50%;
translate: -50%;
transform: rotate(0deg);
}
&:is(.popper--br)::after {
inset: -.375rem .8rem auto auto;
translate: 0;
transform: rotate(0deg);
}
&:is(.popper--lt)::after {
inset: .8rem -.65rem auto auto;
translate: 0;
transform: rotate(90deg);
}
&:is(.popper--lm)::after {
inset: 50% -.65rem auto auto;
translate: 0 -50%;
transform: rotate(90deg);
}
&:is(.popper--lb)::after {
inset: auto -.65rem .8rem auto;
translate: 0;
transform: rotate(90deg);
}
&:is(.popper--rt)::after {
inset: .8rem auto auto -.65rem;
translate: 0;
transform: rotate(-90deg);
}
&:is(.popper--rm)::after {
inset: 50% auto auto -.65rem;
translate: 0 -50%;
transform: rotate(-90deg);
}
&:is(.popper--rb)::after {
inset: auto auto .8rem -.65rem;
translate: 0;
transform: rotate(-90deg);
}
}
.popper {
transition: display 200ms allow-discrete, opacity 200ms ease-in-out, transform 200ms ease-in-out;
/* exit styles */
display: none;
opacity: 0;
transform: translateY(calc(.25rem * var(--popper-space)));
&:is(.popper--bl, .popper--bm, .popper--br) {
transform: translateY(calc(-.25rem * var(--popper-space)));
}
&:is(.popper--lt, .popper--lm, .popper--lb) {
transform: translateX(calc(.25rem * var(--popper-space)));
}
&:is(.popper--rt, .popper--rm, .popper--rb) {
transform: translateX(calc(-.25rem * var(--popper-space)));
}
&[data-popper-active="true" i],
&:hover,
&:focus,
&:focus-within,
*:has(+ .popper--hover):hover + &,
*:has(+ .popper--focus):focus + & {
/* after-change styles */
display: block;
opacity: 1;
transform: translateY(0);
/* before-change styles */
@starting-style {
opacity: 0;
transform: translateY(calc(.25rem * var(--popper-space)));
&:is(.popper--bl, .popper--bm, .popper--br) {
transform: translateY(calc(-.25rem * var(--popper-space)));
}
&:is(.popper--lt, .popper--lm, .popper--lb) {
transform: translateX(calc(.25rem * var(--popper-space)));
}
&:is(.popper--rt, .popper--rm, .popper--rb) {
transform: translateX(calc(-.25rem * var(--popper-space)));
}
}
}
}
/*
### Panel
*/
.panel {
display: flex;
flex-flow: column nowrap;
/*
gap: 1rem;
padding: 1rem;
*/
gap: .5rem;
padding: .5rem;
}
.panel__header {
padding: .5rem;
}
.panel__body {
padding: .5rem;
overflow: auto;
}
:where(.panel__header, .panel__body) > * {
margin: unset
}
/*
### Floater
*/
.floater {
position: fixed;
height: auto;
min-width: 280px;
width: max-content;
max-width: clamp(280px, calc(100% - 2rem), 640px);
z-index: var(--z-index-fixed);
@media screen and (max-height: 576px) {
& {
max-height: calc(100% - 2rem);
}
}
@media screen and (min-height: 576px) {
& {
max-height: 80vh;
}
}
@media screen and (max-width: 576px) {
& {
max-width: 100%;
}
}
}
.floater--top {
inset: 0 50% auto;
transform: translate(-50%, 0);
}
.floater--top-left {
inset: 0 auto auto 0;
transform: none;
}
.floater--top-right {
inset: 0 0 auto auto;
transform: none;
}
.floater--bottom {
inset: auto 50% 0;
transform: translate(-50%, 0);
}
.floater--bottom-right {
inset: auto 0 0 auto;
transform: none;
}
.floater--bottom-left {
inset: auto auto 0 0;
transform: none;
}
@media screen and (max-width: 816px) {
.floater--top, .floater--top-left, .floater--top-right {
inset: 0 50% auto;
transform: translate(-50%, 0);
}
.floater--bottom, .floater--bottom-right, .floater--bottom-left {
inset: auto 50% 0;
transform: translate(-50%, 0);
}
}
.floater--md {
height: clamp(13rem, 100vh - 2rem, 474px);
max-height: revert-layer;
width: clamp(280px, 100vw - 2rem, 610px);
max-width: revert-layer;
}
.floater--lg {
height: clamp(13rem, 100vh - 2rem, 902px);
max-height: revert-layer;
width: clamp(280px, 100vw - 2rem, 1160px);
max-width: revert-layer;
}
.floater--fluid {
max-height: calc(100vh - 2rem);
max-width: calc(100vw - 2rem);
max-width: revert-layer;
}
.floater:where([popover]) {
pointer-events: initial;
opacity: 1;
position: fixed;
inset: 0;
min-width: initial;
display: block;
z-index: 1;
transition:
transform 350ms ease-in-out,
display 350ms allow-discrete;
&:not([popover]:popover-open) {
box-shadow: none;
position: relative;
height: 100%;
max-height: unset;
width: initial;
max-width: unset;
overflow: clip;
translate: 50% 50%;
transform: translate(-50%, -50%);
.active-visible {
position: absolute;
opacity: 0;
overflow: clip;
}
}
}
.floater[popover]:popover-open {
position: fixed;
inset: 50% auto auto 50%;
transform: translate(-50%, -50%) scale(1.01);
.active-invisible {
position: absolute;
opacity: 0;
overflow: clip;
}
}
/*
### Appear
*/
.appear {
display: grid;
grid: 0fr / 100%;
/* INFO: If you are certain the container's dimensions won't change, use fixed sizes to ensure a smoother expansion animation. Uncomment the next line */
/* grid: 0 / 100%;*/
max-height: 40vh;
visibility: collapse;
transition: grid 350ms ease-in-out, visibility 350ms ease-in-out;
&:where([data-appear-active="true" i]),
&:has(> :where([data-appear-handler]:checked)) {
grid: 1fr / 100%;
/* INFO: If you are certain the container's dimensions won't change, use fixed sizes to ensure a smoother expansion animation. Uncomment the next line */
/* grid: 300px / 100%; */
visibility: visible;
.appear__content {
overflow: auto;
scrollbar-width: auto;
}
}
}
.appear-aside {
flex: 1 1 auto;
}
.appear__overflow {
overflow: hidden;
}
.appear__content {
height: 100%;
/* INFO: Dont show scrollbar