/************************* 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 . */ @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 till expanding stop */ overflow: clip; scrollbar-width: none; transition: scrollbar-width 1500ms allow-discrete; } .appear__toggle { position: absolute; inset: 0; z-index: -1; } .appear--right { grid: 100% / auto 0fr; max-height: initial; max-width: 40vw; [data-appear-handler] { position: static; } &:where([data-appear-active="true" i]), &:has(> [data-appear-handler]:checked) { grid: 100% / auto 1fr; } } .appear--bottom { grid: auto 0fr / 100%; [data-appear-handler] { position: static; } &:where([data-appear-active="true" i]), &:has(> [data-appear-handler]:checked) { grid: auto 1fr / 100%; } } .appear--left { grid: 100% / 0fr; max-height: initial; max-width: 40vw; &:where([data-appear-active="true" i]), &:has(> [data-appear-handler]:checked) { grid: 100% / 1fr; } } .appear--fix { grid: 0 / 100%; max-height: initial; .appear__content { } &:where([data-appear-active="true" i]), &:has(> [data-appear-handler]:checked) { grid: var(--appear-size) / 100%; } &:is(.appear--right) { grid: 100% / auto 0; max-width: initial; .appear__content { height: 100%; width: var(--appear-size); } &:where([data-appear-active="true" i]), &:has(> [data-appear-handler]:checked) { grid: 100% / auto var(--appear-size); } } &:is(.appear--bottom) { grid: auto 0 / 100%; &:where([data-appear-active="true" i]), &:has(> [data-appear-handler]:checked) { grid: auto var(--appear-size) / 100%; } } &:is(.appear--left) { grid: 100% / 0; max-width: initial; .appear__content { height: 100%; width: var(--appear-size); } &:where([data-appear-active="true" i]), &:has(> [data-appear-handler]:checked) { grid: 100% / var(--appear-size); } } } /**************** Off canvas ****************/ .appear--offcanvas { /* --appear-size: 300px; */ background: var(--backdrop--background); backdrop-filter: blur(.125rem); max-height: initial; max-width: initial; position: fixed; inset: 0; display: initial; z-index: var(--z-index-offcanvas); transition: visibility 350ms ease-in-out; .appear__content { background: var(--appear--offcanvas_-appear__content--background); min-height: 50px; height: auto; max-height: 40vh; width: 100%; position: absolute; box-shadow: var(--shadow-float); translate: 0 -10%; transition: translate 350ms ease-in-out; } &:where([data-appear-active="true" i]), &:has(> [data-appear-handler]:checked) { visibility: visible; .appear__content { translate: 0; } } &:is(.appear--right) .appear__content { height: 100%; max-height: 100%; min-width: 275px; width: auto; max-width: 40vw; inset: 0 0 0 auto; translate: 100%; } &:is(.appear--bottom) .appear__content { inset: auto 0 0 0; translate: 0 100%; } &:is(.appear--left) .appear__content { height: 100%; max-height: 100%; min-width: 275px; width: auto; max-width: 40vw; inset: 0 auto 0 0; translate: -10%; } &:is(.appear--fix) { .appear__content { min-height: initial; height: var(--appear-size); max-height: initial; min-width: initial; max-width: initial; } &:is(.appear--right) .appear__content { height: 100%; width: var(--appear-size); } &:is(.appear--bottom) .appear__content { height: var(--appear-size); } &:is(.appear--left) .appear__content { height: 100%; width: var(--appear-size); } } } .appear--no-backdrop { inset: 0 0 auto 0; &:is(.appear--right) { inset: 0 0 0 auto; } &:is(.appear--bottom) { inset: auto 0 0 0; } &:is(.appear--left) { inset: 0 auto 0 0; } } html:has(:where(.appear--offcanvas, .appear--offcanvas-vsm, .appear--offcanvas-vmd, .appear--offcanvas-vlg):not(.appear--no-backdrop) > [data-appear-handler]:checked, .appear:where([data-appear-active="true" i]):not(.appear--no-backdrop)) { overflow: hidden; } /* ### Accordions */ .accordions { background: var(--accordions--background); border-radius: .125rem; height: var(--accordions--height); display: flex; margin: 0 0 1rem; } .accordion { border: 0 var(--accordion--border-style, solid) var(--accordion--border-color); min-width: min-content; display: flex; flex: 0; transition: flex-basis 350ms ease-in-out; &:first-child { border-width: var(--accordion-first-child--border-width, 1px 0 1px 1px); border-top-left-radius: inherit; border-bottom-left-radius: inherit; } &:last-child { border-width: var(--accordion-last-child--border-width, 1px 1px 1px 0); border-top-right-radius: inherit; border-bottom-right-radius: inherit; } &:not(:first-child, :last-child) { border-width: var(--accordion--border-width, 1px 1px 1px 1px); } &:where([data-accordion-active="true" i]), &:has(> .accordion__header [data-accordion-select-handler]:checked) { flex: 1 1 100%; .accordion__content { overflow: auto; scrollbar-width: auto; } } &:has(> .accordion__header [type="checkbox"]) { /*for smooth animation*/ transition: flex-grow 350ms ease-in-out, flex-basis 350ms ease-in-out; } } .accordion__header { cursor: pointer; color: var(--accordion__header--color, revert-layer); background: var(--accordion__header--background); border: 0 var(--accordion__header--border-style, solid) var(--accordion__header--border-color); border-width: 0 1px 0 0; position: relative; display: flex; justify-content: space-between; align-items: baseline; padding: 1rem .5em; margin: 0 -1px 0 0; writing-mode: tb; :where(&:focus, &:focus-within) { text-decoration: underline 2px dashed var(--color-base-9); } > .visual-indicator { transition: transform 350ms ease-in-out; } &:has([data-accordion-select-handler]:checked) > .visual-indicator { transform: scaleX(-1); } } .accordion__body { color: var(--accordion__body--color, revert-layer); background: var(--accordion__body--background, initial); display: flex; flex: 1 1 100%; } .accordion__overflow { width: 100%; position: relative; overflow: hidden; } .accordion__content { position: absolute; inset: 0; padding: 1rem; /* INFO: Dont show scrollbar till expanding stop */ overflow: clip; overscroll-behavior: contain; scrollbar-width: none; transition: scrollbar-width 1500ms allow-discrete; } .accordions--vertical { flex-flow: column nowrap; > .accordion { min-width: auto; flex-flow: column nowrap; transition: none; &:first-child { border-width: var(--accordion-first-child--border-width, 1px 1px 0 1px); border-radius: unset; border-top-left-radius: inherit; border-bottom-left-radius: inherit; } &:last-child { border-width: var(--accordion-last-child--border-width, 0 1px 1px 1px); border-radius: unset; border-top-right-radius: inherit; border-bottom-right-radius: inherit; } &:not(:first-child, :last-child) { border-width: var(--accordion--border-width, 1px 1px 1px 1px); } } .accordion__header { border-width: 0 0 1px 0; padding: .5rem 1em; margin: 0 0 -1px 0; writing-mode: initial; .visual-indicator { transform: rotate(90deg); } &:has([data-accordion-select-handler]:checked) .visual-indicator { transform: rotate(90deg) scaleX(-1); } } .accordion__body { display: grid; grid: 0fr / auto; visibility: hidden; transition: grid 350ms ease-in-out, visibility 350ms ease-in-out; .accordion:has(> .accordion__header [data-accordion-select-handler]:checked) > & { grid: 1fr / auto; visibility: visible; } } &.accordions--vertical-height-auto { height: auto !important; .accordion__content { position: static; } } } /* ### Cards */ .card { background: var(--card--background); filter: var(--shadow-border); display: grid; grid: [row-1] minmax(1rem, max-content) [row-2] auto [row-3] min-content / auto; gap: 1rem; margin: auto auto 1rem; padding: 1rem; } .card__content { grid-area: 1 / 1 / -1 / -1; display: grid; grid: subgrid [row-1-start] [row-1-end row-2-start] [row-2end row-3-start] [row-3-end] / subgrid [col]; grid-auto-flow: inherit; } .card__media { & > img { height: 100%; width: 100%; display: block; object-fit: cover; } } .card__header { grid-area: 2 / auto; } .card__body { grid-area: 3 / auto; } :where(.card, .card__media, .card__header, .card__body) > * { margin-right: unset; margin-left: unset; &:first-child { margin-top: unset; } &:last-child { margin-bottom: unset; } } .cards { display: grid; grid: auto-flow minmax(auto, 300px) min-content min-content / repeat(auto-fit, minmax(auto, 350px)); gap: 1.25rem; justify-content: center; > .card { grid-area: span 3 / auto; grid: subgrid [row-1-start] [row-1-end row-2-start] [row-2end row-3-start] [row-3-end] / subgrid [col]; margin: unset; } } .cards--media-sticks-to-border { .card__media:first-child { margin: calc(1rem * -1) calc(1rem * -1) 0; } .card__media:last-child { margin: 0 calc(1rem * -1) calc(1rem * -1); } } .cards--cover { grid: auto-flow minmax(min-content, 150px) min-content min-content / repeat(auto-fit, minmax(auto, 300px)); .card__media { grid-area: 1 / 1 / -1 / -1; margin: calc(1rem * -1); } } .cards--horizontal { grid: auto-flow minmax(min-content, auto) / repeat(auto-fill, minmax(auto, 280px) minmax(auto, 280px)); justify-content: center; > .card { grid-area: span 3 / span 2; grid: subgrid / subgrid; grid-auto-flow: column; } .card__content:is(:first-child):not(:last-child) { grid-area: 1 / auto / -1; } .card__content:is(:last-child):not(:first-child) { grid-area: 1 / 2 / -1; } .card__header { grid-area: 1 / auto; } .card__body { grid-area: span 2 / auto; } .card__media:first-child { grid-area: 1 / auto / -1; } .card__media:last-child { grid-area: 1 / 2 / -1; } .cards--media-sticks-to-border:is(&) { .card__media { &:first-child { margin: calc(1rem * -1) -.5rem calc(1rem * -1) calc(1rem * -1); } & ~ * { margin: 0 0 0 .5rem; } &:last-child { margin: calc(1rem * -1) calc(1rem * -1) calc(1rem * -1) -.5rem; } *:has(~ &) { margin: 0 .5rem 0 0; } } } } .cards--auto-fit { &:has(> :nth-child(3)) { grid: auto-flow minmax(auto, 300px) min-content min-content / repeat(auto-fit, minmax(280px, 1fr)); } &:where(.cards--cover):has(> :nth-child(3)) { grid: auto-flow minmax(auto, 150px) min-content min-content / repeat(auto-fit, minmax(300px, 1fr)); } } /**************** Scrollable ****************/ .cards--scrollable, .cards--slide { padding: .5rem; grid: minmax(min-content, auto) minmax(min-content, 1fr) minmax(min-content, auto) / auto-flow minmax(280px, 1fr); justify-content: normal; overflow: auto; -ms-scroll-snap-type: x mandatory; scroll-snap-type: x mandatory; scroll-behavior: smooth; > .card { grid: subgrid / subgrid; position: relative; scroll-snap-align: start; scroll-margin: .5rem; } } /**************** Slide ****************/ .cards--slide { height: var(--cards--slide--height); grid: 60vh minmax(min-content, auto) minmax(min-content, auto) / auto-flow minmax(50%, 1fr) minmax(50%, 1fr); grid: 40vh minmax(min-content, auto) minmax(min-content, auto) / auto-flow minmax(40%, 1fr) minmax(40%, 1fr); scrollbar-width: none; /*INFO: When active, slide position will be in center of viewport */ [data-slide-select-handler] { position: absolute; inset: 0 50%; } &:has([data-slide-select-handler]:focus) { box-shadow: 0 0 0 .125rem var(--transparent-color); } .card { box-shadow: unset; margin: 0 .5rem; grid-area: span 3 / span 2; grid: subgrid / subgrid; scroll-snap-align: center; scroll-margin: initial; } .card__content { background: var(--background-color-text); height: fit-content; min-width: 280px; min-width: fit-content; max-width: clamp(280px, 100% - 2rem, 65rem); grid-area: 2 / 1 / -1 / -1; grid: auto / auto; margin: 0 auto; padding: 1rem; .card__header { grid-area: 1 / 1 / 1 / -1; } .card__body { grid-area: 2 / 1 / 2 / -1; } } .card__media { /* INFO: If spans the whole area, give property -- high value here or in the first row of the .card grid */ grid-area: 1 / 1 / 1 / -1; img { object-fit: contain; } } .card__header { grid-area: 2 / 1 / 2 / -1; } .card__body { grid-area: 3 / 1 / 3 / -1; } } .cards--horizontal-nav { &::scroll-button(*) { cursor: pointer; line-height: 1; background: var(--background-color-clickable); color: var(--controls--color); border: 0 var(--slide__navigators--border-style, solid) var(--slide__navigators--border-color, var(--border-color-control)); border-width: var(--slide__navigators--border-width, 1px); border-radius: var(--slide__navigators--border-radius, .25rem); box-shadow: var(--btn--shadow); margin: 1rem 0 1rem; padding: .5rem .75rem; z-index: 1; } &::scroll-button(left) { content: var(--slide-prev-nav); } &::scroll-button(right) { content: var(--slide-next-nav); margin-left: .5rem; } &::scroll-button(*):not(:disabled):active { transform: translateY(1px); box-shadow: none; } &::scroll-button(*):focus-visible { box-shadow: none; outline: var(--focus-outline); } &::scroll-button(*):not(:disabled):hover { } &::scroll-button(*):disabled { cursor: not-allowed; filter: contrast(.5); } } /* ### Slide (Carousel) */ .slide { position: relative; :where(&) .cards--horizontal-nav { &::scroll-button(*) { position: absolute; margin: initial; translate: 0 -50%; z-index: 1; } &::scroll-button(left) { inset: 50% auto auto .5rem; } &::scroll-button(right) { inset: 50% .5rem auto auto; } } } .slide__items { } .slide__item { } .slide__navigator-prev, .slide__navigator-next { cursor: pointer; line-height: 1; background: var(--background-color-clickable); border: 0 var(--slide__navigators--border-style, solid) var(--slide__navigators--border-color, var(--border-color-control)); border-width: var(--slide__navigators--border-width, 1px); border-radius: var(--slide__navigators--border-radius, .25rem); position: absolute; padding: .5rem; } .slide__navigator-prev { inset: 40% auto auto .5rem; } .slide__navigator-next { inset: 40% .5rem auto auto; } .slide__indicators { display: flex; gap: .5rem .5rem; justify-content: center; margin: 1rem; } .slide__indicator-item { cursor: pointer; background: var(--slide__indicator-item--background, var(--background-color-clickable)); border: 0 var(--slide__indicator-item--border-style, solid) var(--slide__indicator-item--border-color); border-width: var(--slide__indicator-item--border-width, 1px); border-radius: var(--slide__indicator-item--border-radius, .25rem); height: .375rem; width: 1.75rem; &:focus, &:hover { box-shadow: revert-layer; } } .slide__indicator-item:where([data-slide-active="true" i]), .slide:has(.slide__item:nth-child(1) [data-slide-select-handler]:checked) .slide__indicator-item:nth-child(1), .slide:has(.slide__item:nth-child(2) [data-slide-select-handler]:checked) .slide__indicator-item:nth-child(2), .slide:has(.slide__item:nth-child(3) [data-slide-select-handler]:checked) .slide__indicator-item:nth-child(3), .slide:has(.slide__item:nth-child(4) [data-slide-select-handler]:checked) .slide__indicator-item:nth-child(4), .slide:has(.slide__item:nth-child(5) [data-slide-select-handler]:checked) .slide__indicator-item:nth-child(5), .slide:has(.slide__item:nth-child(6) [data-slide-select-handler]:checked) .slide__indicator-item:nth-child(6), .slide:has(.slide__item:nth-child(7) [data-slide-select-handler]:checked) .slide__indicator-item:nth-child(7), .slide:has(.slide__item:nth-child(8) [data-slide-select-handler]:checked) .slide__indicator-item:nth-child(8), .slide:has(.slide__item:nth-child(9) [data-slide-select-handler]:checked) .slide__indicator-item:nth-child(9), .slide:has(.slide__item:nth-child(10) [data-slide-select-handler]:checked) .slide__indicator-item:nth-child(10), .slide:has(.slide__item:nth-child(11) [data-slide-select-handler]:checked) .slide__indicator-item:nth-child(11), .slide:has(.slide__item:nth-child(12) [data-slide-select-handler]:checked) .slide__indicator-item:nth-child(12), .slide:has(.slide__item:nth-child(13) [data-slide-select-handler]:checked) .slide__indicator-item:nth-child(13), .slide:has(.slide__item:nth-child(14) [data-slide-select-handler]:checked) .slide__indicator-item:nth-child(14), .slide:has(.slide__item:nth-child(15) [data-slide-select-handler]:checked) .slide__indicator-item:nth-child(15) { background: var(--slide__indicator-item--active--background, var(--background-color-off)); border: 0 var(--slide__indicator-item--active--border-style, solid) var(--slide__indicator-item--active--border-color); border-width: var(--slide__indicator-item--active--border-width, 0px); } /* ### Group */ .group, .group-vertical { display: flex; align-items: baseline; /* or stretch */ } .group-vertical { flex-flow: column; align-items: stretch; } .group__label, .group__input, .group__action { flex: 0 0 auto; border-width: 0; border-radius: unset; min-height: var(--controls--min-height); margin: 0; box-shadow: none; &:focus { z-index: 1; } } .group__label { border-color: var(--border-color-control); border-style: solid; padding: .125em .5em .25em; } .group__input { flex: 1 1 auto; :where(&:not([type=radio], [type=checkbox], [type=select])) { width: 100%; display: block; } } .group__action { padding: var(--btn--padding); :where(.group, .group-vertical):has(> .group__label, > .group__input) > & { padding: .125em 1em .25em; } } .group__input, .group__action { &:focus, &:focus-within { box-shadow: revert-layer; } } .group--border-radius { & > *:first-child { border-top-left-radius: inherit; border-bottom-left-radius: inherit; } & > *:last-child { border-top-right-radius: inherit; border-bottom-right-radius: inherit; } :where(& > .popper-container) .group__action { border-radius: inherit; } } :where(.group--border) { & > :is(.group__label, .group__input, .group__action), > .popper-container > .group__action { border-width: 1px; } &:not(.group-vertical) > *:not(:last-child) { border-right-width: 0px; } &:is(.group-vertical) > *:not(:last-child) { border-bottom-width: 0px; } } /* ### Form */ .form__group { border: none; margin: auto auto var(--elements-block-level-space, 1rem); padding: 0; } .form__label { color: var(--font-color-alt-1); font-size: 1rem; display: inline-block; margin: 0 0 var(--elements-block-level-space, .5rem); } .form__description { color: var(--font-color-alt-2); font-size: .8em; display: block; margin: -.5em auto .25rem; } .form__control { color: var(--font-color); border: 0 var(--controls--border-style) var(--controls--border-color); border-width: var(--controls--border-width); width: 100%; margin: auto auto var(--elements-block-level-space, .5rem); :where(&) .group__label { color: var(--font-color-alt-1); background: var(--background-color); } & > :is(:first-child):is(:last-child) { width: 100%; margin: 0; } & > *:not([type="checkbox"], [type="radio"]) { border-width: 0; } &:not(.group-vertical) > :not([type="checkbox"], [type="radio"], :last-child) { border-right-width: 1px; } &:is(.group-vertical) > :not([type="checkbox"], [type="radio"], :last-child) { border-bottom-width: 1px; } :where(&):focus, :where(&):focus-within { box-shadow: var(--focus--box-shadow); } & [type="file"]:focus-visible::-webkit-file-upload-button { text-decoration: underline 2px dashed var(--color-base-9); } & :is(input:not([type="checkbox"], [type="radio"]), textarea):focus, &:is(input:not([type="checkbox"], [type="radio"]), textarea):focus { outline: none; } } /** * You can rewrite [data-is-valid] into .data-is-valid, and * [data-is-invalid] into .data-is-invalid */ .feedback, .valid-feedback, .invalid-feedback { font-size: .9em; display: none; margin-bottom: .25rem; /* INFO: Show all */ /* Alt: .form__control[data-is-valid] */ :where(form[data-was-validated]) &, :where(.form__group:is([data-is-valid], [data-is-invalid]), .form__group:has([data-is-valid], [data-is-invalid])) & { display: block; } } .valid-feedback, :where(.form__group:is([data-is-valid]), .form__group:has([data-is-valid])) .feedback { color: var(--color-success-80); } .invalid-feedback, :where(.form__group:is([data-is-invalid]), .form__group:has([data-is-invalid])) .feedback { color: var(--color-caution-80); } form:not([novalidate]) .form__group:not(:has(.form__control[novalidate])) { &:has(:user-valid:not(:is(:placeholder-shown))) { .feedback, .valid-feedback { display: block; } } &:has(:user-invalid) { .feedback, .invalid-feedback { display: block; } } } form:not([novalidate]) .form__control:not([novalidate]):where(:has(:user-valid:not(:is(:placeholder-shown))), :is(:user-valid:not(:is(:placeholder-shown)))), form[data-was-validated] .form__group:has(.valid-feedback) .form__control, .form__group:has([data-is-valid]) .form__control { &:not(.form__control--validation-icon) { border-color: var(--color-success-60); } &:not(.form__control--validation-border) { background: var(--input--background) url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='oklch(0.58 0.19 135.24)' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e") right .5em center/1.2em no-repeat; padding-right: 2.25em; > :last-child { border-width: 0 1px 0 0; } } } form:not([novalidate]) .form__control:not([novalidate]):where(:has(:user-invalid), :is(:user-invalid)), form[data-was-validated] .form__group:has(.invalid-feedback) .form__control, .form__group:has([data-is-invalid]) .form__control { &:not(.form__control--validation-icon) { border-color: var(--color-caution-60); } &:not(.form__control--validation-border) { background: var(--input--background) url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='oklch(0.58 0.15 108.19)'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='oklch(0.58 0.15 108.19)' stroke='none'/%3e%3c/svg%3e") right .5em center/1.25em no-repeat; padding-right: 2.25em; > :last-child { border-width: 0 1px 0 0; } } } /* ### Container */ .container, .container-xs, .container-sm, .container-md, .container-lg, .container-xl { --gutter-x: 1.5rem; --gutter-y: 0; container-type: inline-size; width: 100%; margin: 0 auto; padding: 0 calc(var(--gutter-x) * 0.5); } .container-xl { max-width: 1600px; } .container-lg { max-width: 1600px; } .container-md { max-width: 1200px; } .container-sm { max-width: 816px; } .container-xs { max-width: 576px; } /* ### Row, Column */ .row { --gutter-x: 1.5rem; --gutter-y: 0; container-type: inline-size; display: flex; flex-flow: row wrap; align-items: baseline; margin-top: calc(-1 * var(--gutter-y)); margin-right: calc(-0.5 * var(--gutter-x)); margin-bottom: 1rem; margin-left: calc(-0.5 * var(--gutter-x)); /* INFO: Cant do complex margin: calc(var(--gutter-y) * -1) calc(var(--gutter-x) * -0.5) 1rem calc(var(--gutter-x) * -0.5); */ & > * { flex-shrink: 0; width: 100%; max-width: 100%; margin-top: var(--gutter-y); padding-right: calc(var(--gutter-x) * 0.5); padding-left: calc(var(--gutter-x) * 0.5); } } .col { flex: 1 0 0%; } .col-auto { flex: 0 0 auto; width: auto; } .col-1 { flex: 0 0 auto; width: 8.33333333%; } .col-2 { flex: 0 0 auto; width: 16.66666667%; } .col-3 { flex: 0 0 auto; width: 25%; } .col-4 { flex: 0 0 auto; width: 33.33333333%; } .col-5 { flex: 0 0 auto; width: 41.66666667%; } .col-6 { flex: 0 0 auto; width: 50%; } .col-7 { flex: 0 0 auto; width: 58.33333333%; } .col-8 { flex: 0 0 auto; width: 66.66666667%; } .col-9 { flex: 0 0 auto; width: 75%; } .col-10 { flex: 0 0 auto; width: 83.33333333%; } .col-11 { flex: 0 0 auto; width: 91.66666667%; } .col-12 { flex: 0 0 auto; width: 100% } /* ### @Container */ @container (max-width: 1280px) { /**************** Accordions ****************/ .accordions--md-vertical { flex-flow: column nowrap; > .accordion { min-width: auto; flex-flow: column nowrap; transition: none; &:first-child { border-width: var(--accordion-first-child--border-width, 1px 1px 0 1px); border-radius: unset; border-top-left-radius: inherit; border-bottom-left-radius: inherit; } &:last-child { border-width: var(--accordion-last-child--border-width, 0 1px 1px 1px); border-radius: unset; border-top-right-radius: inherit; border-bottom-right-radius: inherit; } &:not(:first-child, :last-child) { border-width: var(--accordion--border-width, 1px 1px 1px 1px); } } .accordion__header { border-width: 0 0 1px 0; padding: .5rem 1em; margin: 0 0 -1px 0; writing-mode: initial; .visual-indicator { transform: rotate(90deg); } &:has([data-accordion-select-handler]:checked) .visual-indicator { transform: rotate(90deg) scaleX(-1); } } .accordion__body { display: grid; grid: 0fr / auto; visibility: hidden; transition: grid 350ms ease-in-out, visibility 350ms ease-in-out; .accordion:has(> .accordion__header > [data-accordion-select-handler]:checked) > & { grid: 1fr / auto; visibility: visible; } } &.accordions--vertical-height-auto { height: auto !important; .accordion__content { position: static; } } } /**************** Row + Column ****************/ .col-md { flex: 1 0 0%; } .col-md-auto { flex: 0 0 auto; width: auto; } .col-md-1 { flex: 0 0 auto; width: 8.33333333%; } .col-md-2 { flex: 0 0 auto; width: 16.66666667%; } .col-md-3 { flex: 0 0 auto; width: 25%; } .col-md-4 { flex: 0 0 auto; width: 33.33333333%; } .col-md-5 { flex: 0 0 auto; width: 41.66666667%; } .col-md-6 { flex: 0 0 auto; width: 50%; } .col-md-7 { flex: 0 0 auto; width: 58.33333333%; } .col-md-8 { flex: 0 0 auto; width: 66.66666667%; } .col-md-9 { flex: 0 0 auto; width: 75%; } .col-md-10 { flex: 0 0 auto; width: 83.33333333%; } .col-md-11 { flex: 0 0 auto; width: 91.66666667%; } .col-md-12 { flex: 0 0 auto; width: 100% } } @container (max-width: 768px) { /**************** Accordions ****************/ .accordions--sm-vertical { flex-flow: column nowrap; > .accordion { min-width: auto; flex-flow: column nowrap; transition: none; &:first-child { border-width: var(--accordion-first-child--border-width, 1px 1px 0 1px); border-radius: unset; border-top-left-radius: inherit; border-bottom-left-radius: inherit; } &:last-child { border-width: var(--accordion-last-child--border-width, 0 1px 1px 1px); border-radius: unset; border-top-right-radius: inherit; border-bottom-right-radius: inherit; } &:not(:first-child, :last-child) { border-width: var(--accordion--border-width, 1px 1px 1px 1px); } } .accordion__header { border-width: 0 0 1px 0; padding: .5rem 1em; margin: 0 0 -1px 0; writing-mode: initial; .visual-indicator { transform: rotate(90deg); } &:has([data-accordion-select-handler]:checked) .visual-indicator { transform: rotate(90deg) scaleX(-1); } } .accordion__body { display: grid; grid: 0fr / auto; visibility: hidden; transition: grid 350ms ease-in-out, visibility 350ms ease-in-out; .accordion:has(> .accordion__header > [data-accordion-select-handler]:checked) > & { grid: 1fr / auto; visibility: visible; } } &.accordions--vertical-height-auto { height: auto !important; .accordion__content { position: static; } } } /**************** Row + Column ****************/ .col-sm { flex: 1 0 0%; } .col-sm-auto { flex: 0 0 auto; width: auto; } .col-sm-1 { flex: 0 0 auto; width: 8.33333333%; } .col-sm-2 { flex: 0 0 auto; width: 16.66666667%; } .col-sm-3 { flex: 0 0 auto; width: 25%; } .col-sm-4 { flex: 0 0 auto; width: 33.33333333%; } .col-sm-5 { flex: 0 0 auto; width: 41.66666667%; } .col-sm-6 { flex: 0 0 auto; width: 50%; } .col-sm-7 { flex: 0 0 auto; width: 58.33333333%; } .col-sm-8 { flex: 0 0 auto; width: 66.66666667%; } .col-sm-9 { flex: 0 0 auto; width: 75%; } .col-sm-10 { flex: 0 0 auto; width: 83.33333333%; } .col-sm-11 { flex: 0 0 auto; width: 91.66666667%; } .col-sm-12 { flex: 0 0 auto; width: 100% } } @container (max-width: 640px) { /**************** Accordions ****************/ .accordions--xs-vertical { flex-flow: column nowrap; > .accordion { min-width: auto; flex-flow: column nowrap; transition: none; &:first-child { border-width: var(--accordion-first-child--border-width, 1px 1px 0 1px); border-radius: unset; border-top-left-radius: inherit; border-bottom-left-radius: inherit; } &:last-child { border-width: var(--accordion-last-child--border-width, 0 1px 1px 1px); border-radius: unset; border-top-right-radius: inherit; border-bottom-right-radius: inherit; } &:not(:first-child, :last-child) { border-width: var(--accordion--border-width, 1px 1px 1px 1px); } } .accordion__header { border-width: 0 0 1px 0; padding: .5rem 1em; margin: 0 0 -1px 0; writing-mode: initial; .visual-indicator { transform: rotate(90deg); } &:has([data-accordion-select-handler]:checked) .visual-indicator { transform: rotate(90deg) scaleX(-1); } } .accordion__body { display: grid; grid: 0fr / auto; visibility: hidden; transition: grid 350ms ease-in-out, visibility 350ms ease-in-out; .accordion:has(> .accordion__header > [data-accordion-select-handler]:checked) > & { grid: 1fr / auto; visibility: visible; } } &.accordions--vertical-height-auto { height: auto !important; .accordion__content { position: static; } } } /**************** Row + Column ****************/ .col-xs { flex: 1 0 0%; } .col-xs-auto { flex: 0 0 auto; width: auto; } .col-xs-1 { flex: 0 0 auto; width: 8.33333333%; } .col-xs-2 { flex: 0 0 auto; width: 16.66666667%; } .col-xs-3 { flex: 0 0 auto; width: 25%; } .col-xs-4 { flex: 0 0 auto; width: 33.33333333%; } .col-xs-5 { flex: 0 0 auto; width: 41.66666667%; } .col-xs-6 { flex: 0 0 auto; width: 50%; } .col-xs-7 { flex: 0 0 auto; width: 58.33333333%; } .col-xs-8 { flex: 0 0 auto; width: 66.66666667%; } .col-xs-9 { flex: 0 0 auto; width: 75%; } .col-xs-10 { flex: 0 0 auto; width: 83.33333333%; } .col-xs-11 { flex: 0 0 auto; width: 91.66666667%; } .col-xs-12 { flex: 0 0 auto; width: 100% } } @container (max-width: 430px) {} @container (max-width: 200px) {} /* ### @Media screen */ /** * INFO: medium breakpoint. */ @media screen and (max-width: 1280px) { /**************** Navbar ****************/ .navbar--vmd-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(96%); } } .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%; } } } } } /**************** Appear ****************/ .appear--vmd-offcanvas { /* --appear-size: 300px; */ background: var(--backdrop--background); backdrop-filter: blur(.125rem); max-height: initial; max-width: initial; position: fixed; inset: 0; display: initial; z-index: var(--z-index-offcanvas); transition: visibility 350ms ease-in-out; .appear__content { background: var(--appear--offcanvas_-appear__content--background); min-height: 50px; height: auto; max-height: 40vh; width: 100%; position: absolute; box-shadow: var(--shadow-float); translate: 0 -10%; transition: translate 350ms ease-in-out; } &:where([data-appear-active="true" i]), &:has(> [data-appear-handler]:checked) { visibility: visible; .appear__content { translate: 0; } } &:is(.appear--right) .appear__content { height: 100%; max-height: 100%; min-width: 275px; width: auto; max-width: 40vw; inset: 0 0 0 auto; translate: 100%; } &:is(.appear--bottom) .appear__content { inset: auto 0 0 0; translate: 0 100%; } &:is(.appear--left) .appear__content { height: 100%; max-height: 100%; min-width: 275px; width: auto; max-width: 40vw; inset: 0 auto 0 0; translate: -10%; } &:is(.appear--fix) { .appear__content { min-height: initial; height: var(--appear-size); max-height: initial; min-width: initial; max-width: initial; } &:is(.appear--right) .appear__content { height: 100%; width: var(--appear-size); } &:is(.appear--bottom) .appear__content { height: var(--appear-size); } &:is(.appear--left) .appear__content { height: 100%; width: var(--appear-size); } } } } /** * INFO: small breakpoint. */ @media screen and (max-width: 768px) { /**************** Navbar ****************/ .navbar--vsm-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%; } } } } } /**************** Appear ****************/ .appear--vsm-offcanvas { /* --appear-size: 300px; */ background: var(--backdrop--background); backdrop-filter: blur(.125rem); max-height: initial; max-width: initial; position: fixed; inset: 0; display: initial; z-index: var(--z-index-offcanvas); transition: visibility 350ms ease-in-out; .appear__content { background: var(--appear--offcanvas_-appear__content--background); min-height: 50px; height: auto; max-height: 40vh; width: 100%; position: absolute; box-shadow: var(--shadow-float); translate: 0 -10%; transition: translate 350ms ease-in-out; } &:where([data-appear-active="true" i]), &:has(> [data-appear-handler]:checked) { visibility: visible; .appear__content { translate: 0; } } &:is(.appear--right) .appear__content { height: 100%; max-height: 100%; min-width: 275px; width: auto; max-width: 40vw; inset: 0 0 0 auto; translate: 100%; } &:is(.appear--bottom) .appear__content { inset: auto 0 0 0; translate: 0 100%; } &:is(.appear--left) .appear__content { height: 100%; max-height: 100%; min-width: 275px; width: auto; max-width: 40vw; inset: 0 auto 0 0; translate: -10%; } &:is(.appear--fix) { .appear__content { min-height: initial; height: var(--appear-size); max-height: initial; min-width: initial; max-width: initial; } &:is(.appear--right) .appear__content { height: 100%; width: var(--appear-size); } &:is(.appear--bottom) .appear__content { height: var(--appear-size); } &:is(.appear--left) .appear__content { height: 100%; width: var(--appear-size); } } } } /** * INFO: xsmall breakpoint. */ @media screen and (max-width: 640px) {} }