@sbb-esta/lyne-elements-dev 5.7.0-dev.1788770150 → 5.7.0-dev.1788796277
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/alert.pure.js +1 -1
- package/badge/_badge.global.scss +1 -1
- package/breadcrumb.pure.js +1 -1
- package/button.pure.js +2 -2
- package/calendar.pure.js +2 -2
- package/card.pure.js +1 -1
- package/checkbox-panel.pure.js +1 -1
- package/checkbox.pure.js +1 -1
- package/chip-label.pure.js +1 -1
- package/chip.pure.js +1 -1
- package/core/styles/_theme.scss +9 -1
- package/core/styles/features/image.scss +1 -1
- package/core/styles/lean-off-brand-theme.scss +2 -1
- package/core/styles/mixins/_lists.scss +2 -2
- package/core/styles/mixins/_typo.scss +3 -3
- package/core/styles/off-brand-theme.scss +2 -1
- package/custom-elements.json +1 -25
- package/datepicker.pure.js +1 -1
- package/development/alert.pure.js +1 -1
- package/development/breadcrumb.pure.js +1 -1
- package/development/button.pure.js +2 -2
- package/development/calendar.pure.js +2 -2
- package/development/card.pure.js +1 -1
- package/development/checkbox-panel.pure.js +1 -1
- package/development/checkbox.pure.js +1 -1
- package/development/chip-label.pure.js +1 -1
- package/development/chip.pure.js +1 -1
- package/development/datepicker.pure.js +1 -1
- package/development/download.pure.js +1 -1
- package/development/expansion-panel.pure.js +1 -1
- package/development/file-selector.pure.js +2 -2
- package/development/footer.pure.js +1 -1
- package/development/form-field.pure.js +3 -3
- package/development/header.pure.js +2 -2
- package/development/link.pure.js +1 -1
- package/development/menu.pure.js +1 -1
- package/development/message.pure.js +1 -1
- package/development/mini-calendar.pure.js +1 -1
- package/development/navigation.pure.js +4 -4
- package/development/notification.pure.js +1 -1
- package/development/option.pure.js +3 -3
- package/development/paginator.pure.js +2 -2
- package/development/radio-button-panel.pure.js +1 -1
- package/development/radio-button.pure.js +1 -1
- package/development/status.pure.js +1 -1
- package/development/stepper.pure.js +1 -1
- package/development/tabs.pure.js +1 -1
- package/development/tag.pure.js +1 -1
- package/development/teaser-panel.pure.js +1 -1
- package/development/teaser-product.pure.js +1 -1
- package/development/teaser.pure.js +7 -3
- package/development/timetable-occupancy.pure.js +1 -1
- package/development/title.pure.js +1 -1
- package/development/toast.pure.js +1 -1
- package/development/toggle-check.pure.js +1 -1
- package/development/toggle.pure.js +2 -2
- package/development/tooltip.pure.js +1 -1
- package/development/train.pure.js +3 -3
- package/download.pure.js +1 -1
- package/expansion-panel.pure.js +1 -1
- package/file-selector.pure.js +2 -2
- package/footer.pure.js +1 -1
- package/form-field/_form-field.global.scss +1 -1
- package/form-field.pure.js +3 -3
- package/header/_header.global.scss +2 -2
- package/header.pure.js +2 -2
- package/lean-off-brand-theme.css +16 -34
- package/lean-safety-theme.css +18 -16
- package/lean-theme.css +18 -16
- package/link.pure.js +1 -1
- package/menu.pure.js +1 -1
- package/message.pure.js +1 -1
- package/mini-calendar.pure.js +1 -1
- package/navigation/_navigation.global.scss +2 -2
- package/navigation.pure.js +4 -4
- package/notification.pure.js +1 -1
- package/off-brand-theme.css +16 -34
- package/option.pure.js +3 -3
- package/package.json +2 -2
- package/paginator.pure.js +2 -2
- package/radio-button-panel.pure.js +1 -1
- package/radio-button.pure.js +1 -1
- package/safety-theme.css +18 -16
- package/standard-theme.css +18 -16
- package/status.pure.js +1 -1
- package/stepper.pure.js +1 -1
- package/table/_table.global.scss +4 -4
- package/tabs.pure.js +1 -1
- package/tag.pure.js +1 -1
- package/teaser-panel.pure.js +1 -1
- package/teaser-product.pure.js +1 -1
- package/teaser.pure.js +2 -2
- package/timetable-occupancy.pure.js +1 -1
- package/title.pure.js +1 -1
- package/toast.pure.js +1 -1
- package/toggle-check.pure.js +1 -1
- package/toggle.pure.js +2 -2
- package/tooltip.pure.js +1 -1
- package/train.pure.js +3 -3
|
@@ -10,7 +10,7 @@ var accent_button_default = ":host {\n --sbb-button-color-active-background: va
|
|
|
10
10
|
|
|
11
11
|
//#endregion
|
|
12
12
|
//#region src/elements/button/common/button-common.scss?inline
|
|
13
|
-
var button_common_default = ":host {\n display: inline-block;\n outline: none !important;\n --sbb-button-transition-duration: var(\n --sbb-disable-animation-duration,\n var(--sbb-animation-duration-2x)\n );\n --sbb-button-box-shadow-definition:\n var(--sbb-shadow-elevation-level-3-shadow-2-offset-x) var(--sbb-button-shadow-2-offset-y)\n var(--sbb-button-shadow-2-blur) var(--sbb-shadow-elevation-level-3-shadow-2-spread)\n var(--sbb-button-shadow-2-color),\n var(--sbb-shadow-elevation-level-3-shadow-1-offset-x) var(--sbb-button-shadow-1-offset-y)\n var(--sbb-button-shadow-1-blur) var(--sbb-shadow-elevation-level-3-shadow-1-spread)\n var(--sbb-button-shadow-1-color);\n --_width: unset;\n --_min-height-modifier: 0rem;\n --_border-color: var(--sbb-button-color-default-border);\n --_background-color: var(--sbb-button-color-default-background);\n --_color: var(--sbb-button-color-default-text);\n --_button-inset: 0;\n --_border: calc(var(--sbb-button-border-width) + var(--sbb-button-border-overlap-fix, 1px)) solid\n var(--_border-color);\n}\n@media (forced-colors: active) {\n :host {\n --sbb-button-color-default-border: CanvasText !important;\n --sbb-button-color-active-border: Highlight !important;\n --sbb-button-color-default-background: Canvas !important;\n --sbb-button-color-hover-background: Canvas !important;\n --sbb-button-color-active-background: Canvas !important;\n --sbb-button-color-disabled-background: Canvas !important;\n --sbb-button-color-disabled-text: GrayText !important;\n --sbb-button-color-loading-border: Highlight !important;\n --sbb-button-color-default-text: CanvasText !important;\n --sbb-button-color-hover-text: CanvasText !important;\n --sbb-button-color-active-text: CanvasText !important;\n --sbb-button-border-overlap-fix: 0rem;\n }\n}\n\n@media (forced-colors: active) {\n :host(:is(:state(button),[state--button])) {\n --sbb-button-color-default-text: ButtonText !important;\n --sbb-button-color-hover-text: ButtonText !important;\n --sbb-button-color-active-text: ButtonText !important;\n }\n}\n\n@media (forced-colors: active) {\n :host(:is(:state(link),[state--link])) {\n --sbb-button-color-default-text: LinkText !important;\n --sbb-button-color-hover-text: LinkText !important;\n --sbb-button-color-active-text: LinkText !important;\n }\n}\n\n:host([negative]) {\n --sbb-button-color-disabled-background: var(--sbb-background-color-3-negative);\n --sbb-button-color-disabled-text: var(--sbb-color-aluminium);\n}\n\n:host([size=l]) {\n --sbb-button-min-height: var(--sbb-button-min-height-size-l);\n --sbb-button-padding-inline: var(--sbb-button-padding-inline-size-l);\n}\n\n:host([size=m]) {\n --sbb-button-min-height: var(--sbb-button-min-height-size-m);\n --sbb-button-padding-inline: var(--sbb-button-padding-inline-size-m);\n}\n\n:host([size=s]) {\n --sbb-button-min-height: var(--sbb-button-min-height-size-s);\n --sbb-button-padding-inline: var(--sbb-button-padding-inline-size-s);\n --sbb-button-gap: var(--sbb-spacing-fixed-1x);\n}\n\n:host(:where(:is(:state(slotted-icon),[state--slotted-icon]), :is(:state(has-icon-name),[state--has-icon-name])):not(:is(:state(slotted),[state--slotted]))) {\n --sbb-button-padding-inline: 0;\n --_width: calc(var(--sbb-button-min-height) + var(--_min-height-modifier));\n}\n\n@media (any-hover: hover) {\n :host(:not([disabled], :disabled, [disabled-interactive], :active, :is(:state(active),[state--active]), [loading]):is(:hover, :is(:state(force-hover),[state--force-hover]))) {\n --sbb-button-translate-y-content-hover: -0.0625rem;\n --sbb-button-shadow-1-offset-y: calc(\n 0.5 * var(--sbb-shadow-elevation-level-3-shadow-1-offset-y)\n );\n --sbb-button-shadow-1-blur: calc(0.5 * var(--sbb-shadow-elevation-level-3-shadow-1-blur));\n --sbb-button-shadow-2-blur: calc(0.5 * var(--sbb-shadow-elevation-level-3-shadow-2-blur));\n --sbb-button-cursor: var(--sbb-cursor-pointer);\n --_border-color: var(--sbb-button-color-hover-border);\n --_color: var(--sbb-button-color-hover-text);\n --_background-color: var(--sbb-button-color-hover-background);\n --_button-inset: calc(var(--sbb-button-border-width) * -1);\n }\n}\n@media (forced-colors: active) {\n :host(:not([disabled], :disabled, [disabled-interactive], :active, :is(:state(active),[state--active]), [loading]):is(:hover, :is(:state(force-hover),[state--force-hover]))) {\n --sbb-button-color-hover-border: Highlight !important;\n }\n}\n\n:host(:is([disabled], :disabled, [disabled-interactive])) {\n --sbb-button-cursor: var(--sbb-cursor-default);\n --_color: var(--sbb-button-color-disabled-text);\n --_background-color: var(--sbb-button-color-disabled-background);\n --_border-color: var(--sbb-button-color-disabled-border);\n --_border: var(--sbb-button-border-disabled-width) var(--sbb-button-border-disabled-style)\n var(--_border-color);\n}\n\n:host(:not([disabled], :disabled, [disabled-interactive]):is(:active, :is(:state(active),[state--active]), [loading])) {\n --_color: var(--sbb-button-color-active-text);\n --_background-color: var(--sbb-button-color-active-background);\n --_border-color: var(--sbb-button-color-active-border);\n}\n\n:host([loading]:not([disabled], :disabled, [disabled-interactive])) {\n --_min-height-modifier: calc(-2 * var(--sbb-button-loading-border-width));\n --sbb-button-focus-outline-offset-override: calc(\n var(--sbb-focus-outline-offset) + var(--sbb-button-loading-border-width)\n );\n --_border: none;\n --_transform-style: preserve-3d;\n}\n\n.sbb-action-base {\n display: flex;\n gap: var(--sbb-button-gap);\n align-items: center;\n justify-content: center;\n font-size: var(--sbb-text-font-size-xs);\n font-weight: bold;\n letter-spacing: var(--sbb-
|
|
13
|
+
var button_common_default = ":host {\n display: inline-block;\n outline: none !important;\n --sbb-button-transition-duration: var(\n --sbb-disable-animation-duration,\n var(--sbb-animation-duration-2x)\n );\n --sbb-button-box-shadow-definition:\n var(--sbb-shadow-elevation-level-3-shadow-2-offset-x) var(--sbb-button-shadow-2-offset-y)\n var(--sbb-button-shadow-2-blur) var(--sbb-shadow-elevation-level-3-shadow-2-spread)\n var(--sbb-button-shadow-2-color),\n var(--sbb-shadow-elevation-level-3-shadow-1-offset-x) var(--sbb-button-shadow-1-offset-y)\n var(--sbb-button-shadow-1-blur) var(--sbb-shadow-elevation-level-3-shadow-1-spread)\n var(--sbb-button-shadow-1-color);\n --_width: unset;\n --_min-height-modifier: 0rem;\n --_border-color: var(--sbb-button-color-default-border);\n --_background-color: var(--sbb-button-color-default-background);\n --_color: var(--sbb-button-color-default-text);\n --_button-inset: 0;\n --_border: calc(var(--sbb-button-border-width) + var(--sbb-button-border-overlap-fix, 1px)) solid\n var(--_border-color);\n}\n@media (forced-colors: active) {\n :host {\n --sbb-button-color-default-border: CanvasText !important;\n --sbb-button-color-active-border: Highlight !important;\n --sbb-button-color-default-background: Canvas !important;\n --sbb-button-color-hover-background: Canvas !important;\n --sbb-button-color-active-background: Canvas !important;\n --sbb-button-color-disabled-background: Canvas !important;\n --sbb-button-color-disabled-text: GrayText !important;\n --sbb-button-color-loading-border: Highlight !important;\n --sbb-button-color-default-text: CanvasText !important;\n --sbb-button-color-hover-text: CanvasText !important;\n --sbb-button-color-active-text: CanvasText !important;\n --sbb-button-border-overlap-fix: 0rem;\n }\n}\n\n@media (forced-colors: active) {\n :host(:is(:state(button),[state--button])) {\n --sbb-button-color-default-text: ButtonText !important;\n --sbb-button-color-hover-text: ButtonText !important;\n --sbb-button-color-active-text: ButtonText !important;\n }\n}\n\n@media (forced-colors: active) {\n :host(:is(:state(link),[state--link])) {\n --sbb-button-color-default-text: LinkText !important;\n --sbb-button-color-hover-text: LinkText !important;\n --sbb-button-color-active-text: LinkText !important;\n }\n}\n\n:host([negative]) {\n --sbb-button-color-disabled-background: var(--sbb-background-color-3-negative);\n --sbb-button-color-disabled-text: var(--sbb-color-aluminium);\n}\n\n:host([size=l]) {\n --sbb-button-min-height: var(--sbb-button-min-height-size-l);\n --sbb-button-padding-inline: var(--sbb-button-padding-inline-size-l);\n}\n\n:host([size=m]) {\n --sbb-button-min-height: var(--sbb-button-min-height-size-m);\n --sbb-button-padding-inline: var(--sbb-button-padding-inline-size-m);\n}\n\n:host([size=s]) {\n --sbb-button-min-height: var(--sbb-button-min-height-size-s);\n --sbb-button-padding-inline: var(--sbb-button-padding-inline-size-s);\n --sbb-button-gap: var(--sbb-spacing-fixed-1x);\n}\n\n:host(:where(:is(:state(slotted-icon),[state--slotted-icon]), :is(:state(has-icon-name),[state--has-icon-name])):not(:is(:state(slotted),[state--slotted]))) {\n --sbb-button-padding-inline: 0;\n --_width: calc(var(--sbb-button-min-height) + var(--_min-height-modifier));\n}\n\n@media (any-hover: hover) {\n :host(:not([disabled], :disabled, [disabled-interactive], :active, :is(:state(active),[state--active]), [loading]):is(:hover, :is(:state(force-hover),[state--force-hover]))) {\n --sbb-button-translate-y-content-hover: -0.0625rem;\n --sbb-button-shadow-1-offset-y: calc(\n 0.5 * var(--sbb-shadow-elevation-level-3-shadow-1-offset-y)\n );\n --sbb-button-shadow-1-blur: calc(0.5 * var(--sbb-shadow-elevation-level-3-shadow-1-blur));\n --sbb-button-shadow-2-blur: calc(0.5 * var(--sbb-shadow-elevation-level-3-shadow-2-blur));\n --sbb-button-cursor: var(--sbb-cursor-pointer);\n --_border-color: var(--sbb-button-color-hover-border);\n --_color: var(--sbb-button-color-hover-text);\n --_background-color: var(--sbb-button-color-hover-background);\n --_button-inset: calc(var(--sbb-button-border-width) * -1);\n }\n}\n@media (forced-colors: active) {\n :host(:not([disabled], :disabled, [disabled-interactive], :active, :is(:state(active),[state--active]), [loading]):is(:hover, :is(:state(force-hover),[state--force-hover]))) {\n --sbb-button-color-hover-border: Highlight !important;\n }\n}\n\n:host(:is([disabled], :disabled, [disabled-interactive])) {\n --sbb-button-cursor: var(--sbb-cursor-default);\n --_color: var(--sbb-button-color-disabled-text);\n --_background-color: var(--sbb-button-color-disabled-background);\n --_border-color: var(--sbb-button-color-disabled-border);\n --_border: var(--sbb-button-border-disabled-width) var(--sbb-button-border-disabled-style)\n var(--_border-color);\n}\n\n:host(:not([disabled], :disabled, [disabled-interactive]):is(:active, :is(:state(active),[state--active]), [loading])) {\n --_color: var(--sbb-button-color-active-text);\n --_background-color: var(--sbb-button-color-active-background);\n --_border-color: var(--sbb-button-color-active-border);\n}\n\n:host([loading]:not([disabled], :disabled, [disabled-interactive])) {\n --_min-height-modifier: calc(-2 * var(--sbb-button-loading-border-width));\n --sbb-button-focus-outline-offset-override: calc(\n var(--sbb-focus-outline-offset) + var(--sbb-button-loading-border-width)\n );\n --_border: none;\n --_transform-style: preserve-3d;\n}\n\n.sbb-action-base {\n display: flex;\n gap: var(--sbb-button-gap);\n align-items: center;\n justify-content: center;\n font-size: var(--sbb-text-font-size-xs);\n font-weight: bold;\n letter-spacing: var(--sbb-letter-spacing-text);\n line-height: var(--sbb-typo-line-height-text);\n text-align: left;\n white-space: nowrap;\n text-decoration: none;\n min-height: calc(var(--sbb-button-min-height) + var(--_min-height-modifier));\n outline: none;\n width: var(--_width);\n border-radius: var(--sbb-button-border-radius);\n color: var(--_color);\n cursor: var(--sbb-button-cursor);\n user-select: none;\n background-color: var(--_background-color);\n transition-duration: var(--sbb-button-transition-duration);\n transition-timing-function: var(--sbb-button-transition-easing-function);\n transition-property: color, background-color;\n transform-style: var(--_transform-style, flat);\n padding-block: var(--sbb-button-padding-block-min);\n padding-inline: var(--sbb-button-padding-inline);\n position: relative;\n}\n.sbb-action-base::before {\n content: \"\";\n position: absolute;\n inset: var(--_button-inset);\n border: var(--_border);\n border-radius: var(--sbb-button-border-radius);\n pointer-events: none;\n box-shadow: var(--sbb-button-box-shadow);\n transition-duration: var(--sbb-button-transition-duration);\n transition-timing-function: var(--sbb-button-transition-easing-function);\n transition-property: inset, border, box-shadow;\n}\n:host([loading]:not([disabled], :disabled, [disabled-interactive])) .sbb-action-base {\n margin: var(--sbb-button-loading-border-width);\n padding-inline: calc(var(--sbb-button-padding-inline) - var(--sbb-button-loading-border-width));\n transition-property: none;\n}\n:host(:is(:state(focus-visible),[state--focus-visible])) .sbb-action-base::before, :host(:focus-visible) .sbb-action-base::before, .sbb-action-base:focus-visible::before {\n outline-offset: var(--sbb-focus-outline-offset);\n outline: var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width);\n outline-offset: var(--sbb-button-focus-outline-offset-override, var(--sbb-focus-outline-offset));\n}\n\n.sbb-button__label {\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n}\n:host(:where(:is(:state(slotted-icon),[state--slotted-icon]), :is(:state(has-icon-name),[state--has-icon-name])):not(:is(:state(slotted),[state--slotted]))) .sbb-button__label {\n display: none;\n}\n\n.sbb-button__label,\n::slotted([slot=icon]),\nsbb-icon {\n transition: translate var(--sbb-button-transition-duration) var(--sbb-button-transition-easing-function);\n translate: 0 var(--sbb-button-translate-y-content-hover, 0);\n}\n\n.sbb-button-loading-border {\n position: absolute;\n inset: calc(-1 * var(--sbb-button-loading-border-width));\n clip-path: border-box;\n border-radius: var(--sbb-button-border-radius);\n background: var(--_background-color);\n transform: translateZ(-1px);\n z-index: -1;\n container-type: inline-size;\n contain: paint;\n animation: background-fade-in var(--sbb-disable-animation-duration, var(--sbb-animation-duration-6x)) var(--sbb-disable-animation-duration, var(--sbb-button-loading-delay)) linear;\n animation-fill-mode: forwards;\n}\n.sbb-button-loading-border::before {\n content: \"\";\n display: block;\n width: 64cqmin;\n max-height: var(--sbb-button-min-height);\n aspect-ratio: 2/1;\n position: absolute;\n background: radial-gradient(100% 100% at right, var(--sbb-button-color-active-text), transparent 50%);\n offset-path: border-box;\n offset-anchor: 100% 50%;\n opacity: 0;\n animation: snake-fade-in var(--sbb-disable-animation-duration, calc(var(--sbb-animation-duration-12x) * 2)) var(--sbb-disable-animation-duration, calc(var(--sbb-button-loading-delay) + var(--sbb-animation-duration-5x))) var(--sbb-animation-easing), snake-position var(--sbb-disable-animation-duration, calc(max(tan(atan2(var(--sbb-button-width), 1px)) / 136, 0.5) * 3s)) infinite linear;\n animation-fill-mode: forwards;\n transform-style: preserve-3d;\n}\n\n@keyframes snake-position {\n to {\n offset-distance: 100%;\n }\n}\n@keyframes snake-fade-in {\n to {\n opacity: 1;\n }\n}\n@keyframes background-fade-in {\n to {\n background: var(--sbb-button-color-loading-border);\n }\n}\n";
|
|
14
14
|
|
|
15
15
|
//#endregion
|
|
16
16
|
//#region src/elements/button/common/mini-button-common.scss?inline
|
|
@@ -18,7 +18,7 @@ var mini_button_common_default = ":host {\n display: inline-block;\n -webkit-t
|
|
|
18
18
|
|
|
19
19
|
//#endregion
|
|
20
20
|
//#region src/elements/button/common/mini-button-label-common.scss?inline
|
|
21
|
-
var mini_button_label_common_default = ":host {\n --sbb-mini-button-gap: 0.125rem;\n --sbb-mini-button-padding-inline: var(--sbb-spacing-fixed-2x);\n --sbb-mini-button-label-display: block;\n --sbb-mini-button-label-height: var(--sbb-size-icon-ui-small);\n}\n\n:host(:where(:is(:state(slotted-icon),[state--slotted-icon]), :is(:state(has-icon-name),[state--has-icon-name])):not(:is(:state(slotted),[state--slotted]))) {\n --sbb-mini-button-padding-inline: 0;\n --sbb-mini-button-label-display: none;\n --sbb-mini-button-label-height: unset;\n}\n\n.sbb-action-base {\n height: var(--sbb-mini-button-label-height);\n gap: var(--sbb-mini-button-gap);\n align-items: center;\n justify-content: center;\n padding-inline: var(--sbb-mini-button-padding-inline);\n}\n\n.sbb-mini-button__label {\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n font-size: var(--sbb-text-font-size-xxs);\n letter-spacing: var(--sbb-
|
|
21
|
+
var mini_button_label_common_default = ":host {\n --sbb-mini-button-gap: 0.125rem;\n --sbb-mini-button-padding-inline: var(--sbb-spacing-fixed-2x);\n --sbb-mini-button-label-display: block;\n --sbb-mini-button-label-height: var(--sbb-size-icon-ui-small);\n}\n\n:host(:where(:is(:state(slotted-icon),[state--slotted-icon]), :is(:state(has-icon-name),[state--has-icon-name])):not(:is(:state(slotted),[state--slotted]))) {\n --sbb-mini-button-padding-inline: 0;\n --sbb-mini-button-label-display: none;\n --sbb-mini-button-label-height: unset;\n}\n\n.sbb-action-base {\n height: var(--sbb-mini-button-label-height);\n gap: var(--sbb-mini-button-gap);\n align-items: center;\n justify-content: center;\n padding-inline: var(--sbb-mini-button-padding-inline);\n}\n\n.sbb-mini-button__label {\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n font-size: var(--sbb-text-font-size-xxs);\n letter-spacing: var(--sbb-letter-spacing-text);\n line-height: var(--sbb-typo-line-height-text);\n display: var(--sbb-mini-button-label-display);\n transition: translate var(--sbb-mini-button-transition-duration) var(--sbb-mini-button-transition-easing-function);\n translate: 0 var(--sbb-mini-button-translate-y-content-hover, 0);\n}\n";
|
|
22
22
|
|
|
23
23
|
//#endregion
|
|
24
24
|
//#region src/elements/button/common/primary-button.scss?inline
|
|
@@ -6,7 +6,7 @@ import { SbbSecondaryButtonElement } from "./button.pure.js";
|
|
|
6
6
|
import { SbbIconElement } from "./icon.pure.js";
|
|
7
7
|
|
|
8
8
|
//#region src/elements/calendar/common/calendar-cell-base-element.scss?inline
|
|
9
|
-
var calendar_cell_base_element_default = ":host {\n --sbb-focus-outline-offset: 0.125rem;\n --sbb-calendar-cell-transition-duration: var(\n --sbb-disable-animation-duration,\n var(--sbb-animation-duration-2x)\n );\n display: block;\n font-size: var(--sbb-calendar-cell-font-size);\n letter-spacing: var(--sbb-
|
|
9
|
+
var calendar_cell_base_element_default = ":host {\n --sbb-focus-outline-offset: 0.125rem;\n --sbb-calendar-cell-transition-duration: var(\n --sbb-disable-animation-duration,\n var(--sbb-animation-duration-2x)\n );\n display: block;\n font-size: var(--sbb-calendar-cell-font-size);\n letter-spacing: var(--sbb-letter-spacing-text);\n cursor: var(--sbb-calendar-cell-cursor);\n color: var(--sbb-calendar-cell-color);\n border-radius: calc(var(--sbb-border-radius-4x) + var(--sbb-calendar-cell-border-width));\n margin: var(--sbb-calendar-cell-margin);\n padding: var(--sbb-calendar-cell-border-width);\n background-clip: content-box;\n transition-duration: var(--sbb-calendar-cell-transition-duration);\n transition-timing-function: var(--sbb-calendar-cell-transition-easing-function);\n transition-property: background-color;\n}\n\n:host(:is(sbb-calendar-weekday, sbb-calendar-weeknumber)) {\n --sbb-calendar-cell-font-size: var(--sbb-text-font-size-xs);\n --sbb-calendar-day-height: var(--sbb-calendar-day-size);\n color: var(--sbb-calendar-header-color);\n margin-inline: auto;\n}\n\n:host(:is(sbb-calendar-day, sbb-calendar-weekday, sbb-calendar-weeknumber)) {\n height: var(--sbb-calendar-day-height);\n width: var(--sbb-calendar-day-width);\n}\n\n:host(:is(:state(current),[state--current])) {\n font-weight: bold;\n}\n\n:host(:is(:state(selected),[state--selected])) {\n border: var(--sbb-calendar-cell-border-width) solid var(--sbb-calendar-cell-border-color-selected);\n padding: 0;\n}\n\n:host(:disabled) {\n --sbb-calendar-cell-color: var(--sbb-calendar-cell-disabled-color);\n --sbb-calendar-cell-cursor: default;\n}\n\n:host(:disabled:is(:state(crossed-out),[state--crossed-out])) {\n --sbb-calendar-cell-color: var(--sbb-calendar-cell-disabled-crossed-out-color);\n}\n\n:host(:focus-visible) {\n outline-offset: var(--sbb-focus-outline-offset);\n outline: var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width);\n}\n\n@media (any-hover: hover) {\n :host(:not(:disabled, :where(:is(:state(active),[state--active]), :active)):hover) {\n background-color: var(--sbb-calendar-cell-background-color-hover);\n }\n}\n\n@media (any-hover: hover) and (forced-colors: active) {\n :host(:not(:disabled):hover) {\n outline-offset: var(--sbb-focus-outline-offset);\n outline: var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width);\n --sbb-focus-outline-style: initial;\n }\n}\n\n:host(:not(:disabled):where(:is(:state(active),[state--active]), :active)) {\n background-color: var(--sbb-calendar-cell-background-color-active);\n}\n\n.sbb-action-base {\n display: flex;\n flex-direction: column;\n justify-content: center;\n height: 100%;\n width: 100%;\n}\n\n.sbb-calendar-year,\n.sbb-calendar-month {\n justify-content: center;\n height: var(--sbb-calendar-cell-year-month-height);\n min-width: var(--sbb-calendar-cell-year-month-width);\n width: 100%;\n}\n\n:host(:is(:state(crossed-out),[state--crossed-out])) :is(.sbb-calendar-year, .sbb-calendar-month, .sbb-calendar-day__value)::after {\n position: absolute;\n top: 50%;\n left: 50%;\n translate: -50% -50%;\n content: \"\";\n height: var(--sbb-calendar-cell-disabled-height);\n width: var(--sbb-calendar-cell-disabled-width);\n background-color: var(--sbb-calendar-cell-disabled-crossed-out-color);\n rotate: -45deg;\n}\n";
|
|
10
10
|
|
|
11
11
|
//#endregion
|
|
12
12
|
//#region src/elements/calendar/common/calendar-cell-base-element.ts
|
|
@@ -485,7 +485,7 @@ let SbbCalendarWeeknumberElement = (() => {
|
|
|
485
485
|
|
|
486
486
|
//#endregion
|
|
487
487
|
//#region src/elements/calendar/calendar/calendar.scss?inline
|
|
488
|
-
var calendar_default = ":host {\n display: block;\n width: max-content;\n max-width: 100%;\n line-height: var(--sbb-typo-line-height-text);\n}\n\n:host(:is(:state(enhanced),[state--enhanced])) {\n --sbb-calendar-cell-padding-block-end: var(--sbb-spacing-fixed-3x);\n}\n\n.sbb-calendar__wrapper {\n width: 100%;\n display: flex;\n flex-wrap: wrap;\n gap: var(--sbb-calendar-tables-gap);\n position: relative;\n}\n\n:host(:is(:state(single-month),[state--single-month])) .sbb-calendar__table-wrapper {\n width: 100%;\n min-width: fit-content;\n}\n\n.sbb-calendar__table-data > slot {\n display: flex;\n justify-content: center;\n}\n\n:is(.sbb-calendar__year-view, .sbb-calendar__month-view) {\n position: absolute;\n inset-block-start: 0;\n inset-inline-start: 0;\n}\n\n:host(:not(:is(:state(view-day),[state--view-day]))) .sbb-calendar__day-view {\n visibility: hidden;\n}\n\n.sbb-calendar__table-header {\n display: flex;\n align-items: center;\n gap: var(--sbb-calendar-control-gap);\n height: var(--sbb-size-element-xs);\n margin-block-end: var(--sbb-spacing-fixed-4x);\n}\n\n.sbb-calendar__table-header span {\n flex: 1 1 auto;\n padding-inline-start: var(--sbb-spacing-fixed-3x);\n color: var(--sbb-calendar-control-view-change-color);\n}\n\n.sbb-calendar__control {\n -webkit-tap-highlight-color: transparent;\n}\n\n.sbb-calendar__table {\n width: 100%;\n border-collapse: collapse;\n height: max-content;\n flex: 0 0;\n}\n\n.sbb-calendar__table :is(thead, tbody) {\n text-align: center;\n}\n\n.sbb-calendar__table-header-cell,\n.sbb-calendar__table-header-cell-vertical {\n width: var(--sbb-calendar-cell-size);\n min-width: var(--sbb-calendar-cell-size);\n color: var(--sbb-calendar-header-color);\n padding: 0;\n font-size: var(--sbb-text-font-size-xs);\n font-weight: normal;\n letter-spacing: var(--sbb-
|
|
488
|
+
var calendar_default = ":host {\n display: block;\n width: max-content;\n max-width: 100%;\n line-height: var(--sbb-typo-line-height-text);\n}\n\n:host(:is(:state(enhanced),[state--enhanced])) {\n --sbb-calendar-cell-padding-block-end: var(--sbb-spacing-fixed-3x);\n}\n\n.sbb-calendar__wrapper {\n width: 100%;\n display: flex;\n flex-wrap: wrap;\n gap: var(--sbb-calendar-tables-gap);\n position: relative;\n}\n\n:host(:is(:state(single-month),[state--single-month])) .sbb-calendar__table-wrapper {\n width: 100%;\n min-width: fit-content;\n}\n\n.sbb-calendar__table-data > slot {\n display: flex;\n justify-content: center;\n}\n\n:is(.sbb-calendar__year-view, .sbb-calendar__month-view) {\n position: absolute;\n inset-block-start: 0;\n inset-inline-start: 0;\n}\n\n:host(:not(:is(:state(view-day),[state--view-day]))) .sbb-calendar__day-view {\n visibility: hidden;\n}\n\n.sbb-calendar__table-header {\n display: flex;\n align-items: center;\n gap: var(--sbb-calendar-control-gap);\n height: var(--sbb-size-element-xs);\n margin-block-end: var(--sbb-spacing-fixed-4x);\n}\n\n.sbb-calendar__table-header span {\n flex: 1 1 auto;\n padding-inline-start: var(--sbb-spacing-fixed-3x);\n color: var(--sbb-calendar-control-view-change-color);\n}\n\n.sbb-calendar__control {\n -webkit-tap-highlight-color: transparent;\n}\n\n.sbb-calendar__table {\n width: 100%;\n border-collapse: collapse;\n height: max-content;\n flex: 0 0;\n}\n\n.sbb-calendar__table :is(thead, tbody) {\n text-align: center;\n}\n\n.sbb-calendar__table-header-cell,\n.sbb-calendar__table-header-cell-vertical {\n width: var(--sbb-calendar-cell-size);\n min-width: var(--sbb-calendar-cell-size);\n color: var(--sbb-calendar-header-color);\n padding: 0;\n font-size: var(--sbb-text-font-size-xs);\n font-weight: normal;\n letter-spacing: var(--sbb-letter-spacing-text);\n justify-content: center;\n}\n:host(:not([multiple])) .sbb-calendar__table-header-cell,\n:host(:not([multiple])) .sbb-calendar__table-header-cell-vertical {\n height: var(--sbb-calendar-cell-size);\n}\n\n.sbb-calendar__table-header-cell-vertical {\n padding-block-end: var(--sbb-calendar-cell-padding-block-end);\n}\n\n.sbb-calendar__table-data {\n position: relative;\n padding: 0;\n text-align: center;\n}\n\n.sbb-calendar__day-cell {\n padding-block-end: var(--sbb-calendar-cell-padding-block-end);\n}\n\n:host(:not(:is(:state(enhanced),[state--enhanced]))) sbb-calendar-day {\n --sbb-calendar-day-justify-content: center;\n --sbb-calendar-day-height: var(--sbb-calendar-day-size);\n --sbb-calendar-day-extra-display: none;\n --sbb-calendar-day-value-height: unset;\n}\n";
|
|
489
489
|
|
|
490
490
|
//#endregion
|
|
491
491
|
//#region src/elements/calendar/calendar/calendar.component.ts
|
package/development/card.pure.js
CHANGED
|
@@ -6,7 +6,7 @@ import { MutationController } from "@lit-labs/observers/mutation-controller.js";
|
|
|
6
6
|
import { html as html$1 } from "lit/static-html.js";
|
|
7
7
|
|
|
8
8
|
//#region src/elements/card/card-badge/card-badge.scss?inline
|
|
9
|
-
var card_badge_default = ":host {\n display: flex;\n position: relative;\n height: fit-content;\n width: fit-content;\n margin-inline-start: auto;\n}\n:host::after {\n content: \"\";\n display: var(--sbb-card-badge-border-display, none);\n position: absolute;\n inset: 0;\n border: var(--sbb-border-width-1x) solid CanvasText;\n}\n:host {\n inset-block-start: 0;\n inset-inline-end: 0;\n padding-inline: var(--sbb-card-badge-padding-inline);\n}\n\n:host([color=white]) {\n --sbb-card-badge-color: var(--sbb-color-3);\n --sbb-card-badge-background-color: var(--sbb-background-color-1);\n --sbb-card-badge-border-color: var(--sbb-color-aluminium);\n --sbb-card-badge-border-color: light-dark(\n var(--sbb-color-aluminium),\n var(--sbb-color-anthracite)\n );\n}\n\n:host(:dir(rtl)) {\n --sbb-card-badge-skew: skew(-16deg, 0deg);\n}\n\n.sbb-card-badge-content {\n font-size: var(--sbb-text-font-size-xxs);\n letter-spacing: var(--sbb-
|
|
9
|
+
var card_badge_default = ":host {\n display: flex;\n position: relative;\n height: fit-content;\n width: fit-content;\n margin-inline-start: auto;\n}\n:host::after {\n content: \"\";\n display: var(--sbb-card-badge-border-display, none);\n position: absolute;\n inset: 0;\n border: var(--sbb-border-width-1x) solid CanvasText;\n}\n:host {\n inset-block-start: 0;\n inset-inline-end: 0;\n padding-inline: var(--sbb-card-badge-padding-inline);\n}\n\n:host([color=white]) {\n --sbb-card-badge-color: var(--sbb-color-3);\n --sbb-card-badge-background-color: var(--sbb-background-color-1);\n --sbb-card-badge-border-color: var(--sbb-color-aluminium);\n --sbb-card-badge-border-color: light-dark(\n var(--sbb-color-aluminium),\n var(--sbb-color-anthracite)\n );\n}\n\n:host(:dir(rtl)) {\n --sbb-card-badge-skew: skew(-16deg, 0deg);\n}\n\n.sbb-card-badge-content {\n font-size: var(--sbb-text-font-size-xxs);\n letter-spacing: var(--sbb-letter-spacing-text);\n line-height: var(--sbb-typo-line-height-text);\n font-weight: bold;\n position: relative;\n display: flex;\n align-items: center;\n gap: var(--sbb-card-badge-gap);\n color: var(--sbb-card-badge-color);\n}\n\n.sbb-card-badge-background {\n display: block;\n position: absolute;\n inset: 0;\n background-color: var(--sbb-card-badge-background-color);\n border-end-start-radius: var(--sbb-card-badge-border-radius);\n margin-inline-end: calc(var(--sbb-spacing-fixed-3x) * -1);\n transform: var(--sbb-card-badge-skew);\n}\n.sbb-card-badge-background::before {\n content: \"\";\n display: var(--sbb-card-badge-inline-border-display, block);\n position: absolute;\n inset: 0;\n border-block-end: var(--sbb-card-badge-border-width) solid var(--sbb-card-badge-border-color);\n border-inline-start: var(--sbb-card-badge-border-width) solid var(--sbb-card-badge-border-color);\n border-end-start-radius: var(--sbb-card-badge-border-radius);\n}\n";
|
|
10
10
|
|
|
11
11
|
//#endregion
|
|
12
12
|
//#region src/elements/card/card-badge/card-badge.component.ts
|
|
@@ -5,7 +5,7 @@ import { SbbElement, SbbFormAssociatedCheckboxMixin, SbbPanelMixin, SbbPropertyW
|
|
|
5
5
|
import { SbbVisualCheckboxElement } from "./visual-checkbox.pure.js";
|
|
6
6
|
|
|
7
7
|
//#region src/elements/checkbox/common/checkbox-common.scss?inline
|
|
8
|
-
var checkbox_common_default = "@charset \"UTF-8\";\n:host([size=xs]) {\n --sbb-checkbox-font-size: var(--sbb-text-font-size-xs);\n --sbb-checkbox-dimension: var(--sbb-checkbox-dimension-xs);\n}\n\n:host([size=s]) {\n --sbb-checkbox-font-size: var(--sbb-text-font-size-s);\n --sbb-checkbox-dimension: var(--sbb-checkbox-dimension-s);\n}\n\n:host([size=m]) {\n --sbb-checkbox-font-size: var(--sbb-text-font-size-m);\n --sbb-checkbox-dimension: var(--sbb-checkbox-dimension-m);\n}\n\n:host(:disabled) {\n --sbb-checkbox-cursor: var(--sbb-cursor-default);\n --sbb-checkbox-label-color: var(--sbb-color-granite);\n --sbb-checkbox-label-color: light-dark(var(--sbb-color-granite), var(--sbb-color-aluminium));\n}\n\n.sbb-checkbox-wrapper {\n display: flex;\n}\n.sbb-checkbox-wrapper::before {\n content: \"\";\n user-select: none;\n width: 0;\n height: 0;\n}\n\n.sbb-checkbox {\n position: relative;\n display: block;\n width: 100%;\n cursor: var(--sbb-checkbox-cursor);\n user-select: none;\n -webkit-tap-highlight-color: transparent;\n font-size: var(--sbb-checkbox-font-size);\n letter-spacing: var(--sbb-
|
|
8
|
+
var checkbox_common_default = "@charset \"UTF-8\";\n:host([size=xs]) {\n --sbb-checkbox-font-size: var(--sbb-text-font-size-xs);\n --sbb-checkbox-dimension: var(--sbb-checkbox-dimension-xs);\n}\n\n:host([size=s]) {\n --sbb-checkbox-font-size: var(--sbb-text-font-size-s);\n --sbb-checkbox-dimension: var(--sbb-checkbox-dimension-s);\n}\n\n:host([size=m]) {\n --sbb-checkbox-font-size: var(--sbb-text-font-size-m);\n --sbb-checkbox-dimension: var(--sbb-checkbox-dimension-m);\n}\n\n:host(:disabled) {\n --sbb-checkbox-cursor: var(--sbb-cursor-default);\n --sbb-checkbox-label-color: var(--sbb-color-granite);\n --sbb-checkbox-label-color: light-dark(var(--sbb-color-granite), var(--sbb-color-aluminium));\n}\n\n.sbb-checkbox-wrapper {\n display: flex;\n}\n.sbb-checkbox-wrapper::before {\n content: \"\";\n user-select: none;\n width: 0;\n height: 0;\n}\n\n.sbb-checkbox {\n position: relative;\n display: block;\n width: 100%;\n cursor: var(--sbb-checkbox-cursor);\n user-select: none;\n -webkit-tap-highlight-color: transparent;\n font-size: var(--sbb-checkbox-font-size);\n letter-spacing: var(--sbb-letter-spacing-text);\n line-height: var(--sbb-typo-line-height-text);\n}\n\n.sbb-checkbox__inner {\n display: flex;\n align-items: start;\n gap: var(--sbb-spacing-fixed-2x);\n}\n\n.sbb-checkbox__label {\n display: flex;\n flex-grow: 1;\n color: var(--sbb-checkbox-label-color);\n line-height: max(1em * var(--sbb-typo-line-height-text), var(--sbb-checkbox-dimension));\n}\n\n.sbb-checkbox__aligner {\n display: flex;\n align-items: center;\n height: calc(1em * var(--sbb-typo-line-height-text));\n}\n";
|
|
9
9
|
|
|
10
10
|
//#endregion
|
|
11
11
|
//#region src/elements/checkbox/common/checkbox-common.ts
|
|
@@ -10,7 +10,7 @@ var checkbox_default = ":host {\n outline: none !important;\n display: inline-
|
|
|
10
10
|
|
|
11
11
|
//#endregion
|
|
12
12
|
//#region src/elements/checkbox/common/checkbox-common.scss?inline
|
|
13
|
-
var checkbox_common_default = "@charset \"UTF-8\";\n:host([size=xs]) {\n --sbb-checkbox-font-size: var(--sbb-text-font-size-xs);\n --sbb-checkbox-dimension: var(--sbb-checkbox-dimension-xs);\n}\n\n:host([size=s]) {\n --sbb-checkbox-font-size: var(--sbb-text-font-size-s);\n --sbb-checkbox-dimension: var(--sbb-checkbox-dimension-s);\n}\n\n:host([size=m]) {\n --sbb-checkbox-font-size: var(--sbb-text-font-size-m);\n --sbb-checkbox-dimension: var(--sbb-checkbox-dimension-m);\n}\n\n:host(:disabled) {\n --sbb-checkbox-cursor: var(--sbb-cursor-default);\n --sbb-checkbox-label-color: var(--sbb-color-granite);\n --sbb-checkbox-label-color: light-dark(var(--sbb-color-granite), var(--sbb-color-aluminium));\n}\n\n.sbb-checkbox-wrapper {\n display: flex;\n}\n.sbb-checkbox-wrapper::before {\n content: \"\";\n user-select: none;\n width: 0;\n height: 0;\n}\n\n.sbb-checkbox {\n position: relative;\n display: block;\n width: 100%;\n cursor: var(--sbb-checkbox-cursor);\n user-select: none;\n -webkit-tap-highlight-color: transparent;\n font-size: var(--sbb-checkbox-font-size);\n letter-spacing: var(--sbb-
|
|
13
|
+
var checkbox_common_default = "@charset \"UTF-8\";\n:host([size=xs]) {\n --sbb-checkbox-font-size: var(--sbb-text-font-size-xs);\n --sbb-checkbox-dimension: var(--sbb-checkbox-dimension-xs);\n}\n\n:host([size=s]) {\n --sbb-checkbox-font-size: var(--sbb-text-font-size-s);\n --sbb-checkbox-dimension: var(--sbb-checkbox-dimension-s);\n}\n\n:host([size=m]) {\n --sbb-checkbox-font-size: var(--sbb-text-font-size-m);\n --sbb-checkbox-dimension: var(--sbb-checkbox-dimension-m);\n}\n\n:host(:disabled) {\n --sbb-checkbox-cursor: var(--sbb-cursor-default);\n --sbb-checkbox-label-color: var(--sbb-color-granite);\n --sbb-checkbox-label-color: light-dark(var(--sbb-color-granite), var(--sbb-color-aluminium));\n}\n\n.sbb-checkbox-wrapper {\n display: flex;\n}\n.sbb-checkbox-wrapper::before {\n content: \"\";\n user-select: none;\n width: 0;\n height: 0;\n}\n\n.sbb-checkbox {\n position: relative;\n display: block;\n width: 100%;\n cursor: var(--sbb-checkbox-cursor);\n user-select: none;\n -webkit-tap-highlight-color: transparent;\n font-size: var(--sbb-checkbox-font-size);\n letter-spacing: var(--sbb-letter-spacing-text);\n line-height: var(--sbb-typo-line-height-text);\n}\n\n.sbb-checkbox__inner {\n display: flex;\n align-items: start;\n gap: var(--sbb-spacing-fixed-2x);\n}\n\n.sbb-checkbox__label {\n display: flex;\n flex-grow: 1;\n color: var(--sbb-checkbox-label-color);\n line-height: max(1em * var(--sbb-typo-line-height-text), var(--sbb-checkbox-dimension));\n}\n\n.sbb-checkbox__aligner {\n display: flex;\n align-items: center;\n height: calc(1em * var(--sbb-typo-line-height-text));\n}\n";
|
|
14
14
|
|
|
15
15
|
//#endregion
|
|
16
16
|
//#region src/elements/checkbox/common/checkbox-common.ts
|
|
@@ -4,7 +4,7 @@ import { property } from "lit/decorators.js";
|
|
|
4
4
|
import { SbbElement } from "./core.js";
|
|
5
5
|
|
|
6
6
|
//#region src/elements/chip-label/chip-label.scss?inline
|
|
7
|
-
var chip_label_default = ":host {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n height: var(--sbb-chip-label-fixed-height, calc(var(--sbb-typo-line-height-text) * var(--sbb-chip-label-font-size) + var(--sbb-chip-label-padding-block) * 2));\n background-color: var(--sbb-chip-label-background-color);\n padding-inline: var(--sbb-chip-label-padding-inline);\n border-radius: var(--sbb-border-radius-infinity);\n color: var(--sbb-chip-label-color);\n font-size: var(--sbb-chip-label-font-size);\n letter-spacing: var(--sbb-
|
|
7
|
+
var chip_label_default = ":host {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n height: var(--sbb-chip-label-fixed-height, calc(var(--sbb-typo-line-height-text) * var(--sbb-chip-label-font-size) + var(--sbb-chip-label-padding-block) * 2));\n background-color: var(--sbb-chip-label-background-color);\n padding-inline: var(--sbb-chip-label-padding-inline);\n border-radius: var(--sbb-border-radius-infinity);\n color: var(--sbb-chip-label-color);\n font-size: var(--sbb-chip-label-font-size);\n letter-spacing: var(--sbb-letter-spacing-text);\n}\n@media (forced-colors: active) {\n :host {\n outline: var(--sbb-border-width-1x) solid CanvasText;\n outline-offset: calc(-1 * var(--sbb-border-width-1x));\n }\n}\n\n:host([color=charcoal]) {\n --sbb-chip-label-color: var(--sbb-color-2-inverted);\n --sbb-chip-label-background-color: var(--sbb-background-color-2-inverted);\n}\n\n:host([color=white]) {\n --sbb-chip-label-color: var(--sbb-color-granite);\n --sbb-chip-label-color: light-dark(var(--sbb-color-granite), var(--sbb-color-cloud));\n --sbb-chip-label-background-color: var(--sbb-background-color-1);\n}\n\n:host([color=granite]) {\n --sbb-chip-label-color: var(--sbb-color-2-inverted);\n --sbb-chip-label-background-color: var(--sbb-color-granite);\n --sbb-chip-label-background-color: light-dark(var(--sbb-color-granite), var(--sbb-color-storm));\n}\n\n:host([size=xxxs]) {\n --sbb-chip-label-fixed-height: 1rem;\n}\n\n:host([size=xs]) {\n --sbb-chip-label-padding-block: var(--sbb-spacing-fixed-1x);\n --sbb-chip-label-padding-inline: var(--sbb-spacing-fixed-3x);\n --sbb-chip-label-font-size: var(--sbb-text-font-size-xs);\n}\n\n:host([size=s]) {\n --sbb-chip-label-padding-block: var(--sbb-spacing-fixed-1x);\n --sbb-chip-label-padding-inline: var(--sbb-spacing-fixed-4x);\n --sbb-chip-label-font-size: var(--sbb-text-font-size-s);\n}\n\n.sbb-chip__text-wrapper {\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n display: inline-block;\n line-height: calc(var(--sbb-typo-line-height-text) * var(--sbb-chip-label-font-size));\n line-height: round(down, var(--sbb-typo-line-height-text) * var(--sbb-chip-label-font-size), 2px);\n}\n";
|
|
8
8
|
|
|
9
9
|
//#endregion
|
|
10
10
|
//#region src/elements/chip-label/chip-label.component.ts
|
package/development/chip.pure.js
CHANGED
|
@@ -5,7 +5,7 @@ import { SbbDisabledMixin, SbbElement, SbbFormAssociatedMixin, SbbLanguageContro
|
|
|
5
5
|
import { SbbMiniButtonElement } from "./button.pure.js";
|
|
6
6
|
|
|
7
7
|
//#region src/elements/chip/chip/chip.scss?inline
|
|
8
|
-
var chip_default = ":host {\n --sbb-chip-border: var(--sbb-border-width-1x) solid var(--sbb-chip-border-color);\n --sbb-chip-transition-duration: var(\n --sbb-disable-animation-duration,\n var(--sbb-animation-duration-2x)\n );\n display: inline-flex;\n align-items: stretch;\n background-color: var(--sbb-chip-background-color);\n border-radius: var(--sbb-chip-border-radius);\n color: var(--sbb-chip-color);\n height: var(--sbb-chip-height);\n}\n\n:host(:focus) {\n outline-offset: var(--sbb-focus-outline-offset);\n outline: var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width);\n --sbb-focus-outline-offset: -0.0625rem;\n --sbb-focus-outline-style: initial;\n}\n\n:host([negative]) {\n --sbb-chip-border-color: var(--sbb-border-color-4-negative-inverted);\n --sbb-chip-background-color: var(--sbb-background-color-3-negative);\n --sbb-chip-color: var(--sbb-color-4-negative);\n --sbb-chip-color-hover: var(--sbb-color-2-negative);\n --sbb-chip-background-color-active: var(--sbb-background-color-1-negative);\n --sbb-chip-background-color-hover: var(--sbb-background-color-1-negative);\n --sbb-focus-outline-color: var(--sbb-focus-outline-color-dark);\n}\n\n.sbb-chip__label-wrapper {\n border: var(--sbb-chip-border);\n border-inline-end: none;\n border-radius: var(--sbb-chip-border-radius) 0 0 var(--sbb-chip-border-radius);\n display: flex;\n align-items: center;\n padding-inline: var(--sbb-chip-label-padding-inline);\n outline: none;\n overflow: hidden;\n}\n:host(:is([disabled], [readonly])) .sbb-chip__label-wrapper {\n border: var(--sbb-chip-border);\n border-radius: var(--sbb-chip-border-radius);\n}\n\n.sbb-chip__label {\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n display: inline-block;\n font-size: var(--sbb-chip-font-size);\n letter-spacing: var(--sbb-
|
|
8
|
+
var chip_default = ":host {\n --sbb-chip-border: var(--sbb-border-width-1x) solid var(--sbb-chip-border-color);\n --sbb-chip-transition-duration: var(\n --sbb-disable-animation-duration,\n var(--sbb-animation-duration-2x)\n );\n display: inline-flex;\n align-items: stretch;\n background-color: var(--sbb-chip-background-color);\n border-radius: var(--sbb-chip-border-radius);\n color: var(--sbb-chip-color);\n height: var(--sbb-chip-height);\n}\n\n:host(:focus) {\n outline-offset: var(--sbb-focus-outline-offset);\n outline: var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width);\n --sbb-focus-outline-offset: -0.0625rem;\n --sbb-focus-outline-style: initial;\n}\n\n:host([negative]) {\n --sbb-chip-border-color: var(--sbb-border-color-4-negative-inverted);\n --sbb-chip-background-color: var(--sbb-background-color-3-negative);\n --sbb-chip-color: var(--sbb-color-4-negative);\n --sbb-chip-color-hover: var(--sbb-color-2-negative);\n --sbb-chip-background-color-active: var(--sbb-background-color-1-negative);\n --sbb-chip-background-color-hover: var(--sbb-background-color-1-negative);\n --sbb-focus-outline-color: var(--sbb-focus-outline-color-dark);\n}\n\n.sbb-chip__label-wrapper {\n border: var(--sbb-chip-border);\n border-inline-end: none;\n border-radius: var(--sbb-chip-border-radius) 0 0 var(--sbb-chip-border-radius);\n display: flex;\n align-items: center;\n padding-inline: var(--sbb-chip-label-padding-inline);\n outline: none;\n overflow: hidden;\n}\n:host(:is([disabled], [readonly])) .sbb-chip__label-wrapper {\n border: var(--sbb-chip-border);\n border-radius: var(--sbb-chip-border-radius);\n}\n\n.sbb-chip__label {\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n display: inline-block;\n font-size: var(--sbb-chip-font-size);\n letter-spacing: var(--sbb-letter-spacing-text);\n transition: transform var(--sbb-chip-transition-duration) var(--sbb-animation-easing);\n}\n\n.sbb-chip__delete {\n --sbb-mini-button-border-radius: 0 var(--sbb-chip-border-radius) var(--sbb-chip-border-radius) 0;\n --sbb-mini-button-color-text: var(--sbb-chip-color);\n --sbb-mini-button-color-active-background: var(--sbb-chip-background-color-active);\n --sbb-mini-button-color-hover-background: var(--sbb-chip-background-color-hover);\n --sbb-icon-svg-width: calc(var(--sbb-size-icon-ui-small) - var(--sbb-border-width-1x) * 2);\n --sbb-icon-svg-height: calc(var(--sbb-size-icon-ui-small) - var(--sbb-border-width-1x) * 2);\n --_sbb-mini-button-image-size: ;\n border: var(--sbb-chip-border);\n border-radius: 0 var(--sbb-chip-border-radius) var(--sbb-chip-border-radius) 0;\n}\n:host(:is([disabled], [readonly])) .sbb-chip__delete {\n display: none;\n}\n@media (any-hover: hover) {\n :host(:not([disabled])) .sbb-chip__delete:hover {\n --sbb-mini-button-color-text: var(--sbb-chip-color-hover);\n }\n}\n";
|
|
9
9
|
|
|
10
10
|
//#endregion
|
|
11
11
|
//#region src/elements/chip/chip/chip.component.ts
|
|
@@ -17,7 +17,7 @@ var mini_button_common_default = ":host {\n display: inline-block;\n -webkit-t
|
|
|
17
17
|
|
|
18
18
|
//#endregion
|
|
19
19
|
//#region src/elements/button/common/mini-button-label-common.scss?inline
|
|
20
|
-
var mini_button_label_common_default = ":host {\n --sbb-mini-button-gap: 0.125rem;\n --sbb-mini-button-padding-inline: var(--sbb-spacing-fixed-2x);\n --sbb-mini-button-label-display: block;\n --sbb-mini-button-label-height: var(--sbb-size-icon-ui-small);\n}\n\n:host(:where(:is(:state(slotted-icon),[state--slotted-icon]), :is(:state(has-icon-name),[state--has-icon-name])):not(:is(:state(slotted),[state--slotted]))) {\n --sbb-mini-button-padding-inline: 0;\n --sbb-mini-button-label-display: none;\n --sbb-mini-button-label-height: unset;\n}\n\n.sbb-action-base {\n height: var(--sbb-mini-button-label-height);\n gap: var(--sbb-mini-button-gap);\n align-items: center;\n justify-content: center;\n padding-inline: var(--sbb-mini-button-padding-inline);\n}\n\n.sbb-mini-button__label {\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n font-size: var(--sbb-text-font-size-xxs);\n letter-spacing: var(--sbb-
|
|
20
|
+
var mini_button_label_common_default = ":host {\n --sbb-mini-button-gap: 0.125rem;\n --sbb-mini-button-padding-inline: var(--sbb-spacing-fixed-2x);\n --sbb-mini-button-label-display: block;\n --sbb-mini-button-label-height: var(--sbb-size-icon-ui-small);\n}\n\n:host(:where(:is(:state(slotted-icon),[state--slotted-icon]), :is(:state(has-icon-name),[state--has-icon-name])):not(:is(:state(slotted),[state--slotted]))) {\n --sbb-mini-button-padding-inline: 0;\n --sbb-mini-button-label-display: none;\n --sbb-mini-button-label-height: unset;\n}\n\n.sbb-action-base {\n height: var(--sbb-mini-button-label-height);\n gap: var(--sbb-mini-button-gap);\n align-items: center;\n justify-content: center;\n padding-inline: var(--sbb-mini-button-padding-inline);\n}\n\n.sbb-mini-button__label {\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n font-size: var(--sbb-text-font-size-xxs);\n letter-spacing: var(--sbb-letter-spacing-text);\n line-height: var(--sbb-typo-line-height-text);\n display: var(--sbb-mini-button-label-display);\n transition: translate var(--sbb-mini-button-transition-duration) var(--sbb-mini-button-transition-easing-function);\n translate: 0 var(--sbb-mini-button-translate-y-content-hover, 0);\n}\n";
|
|
21
21
|
|
|
22
22
|
//#endregion
|
|
23
23
|
//#region src/elements/button/common/primary-button.scss?inline
|
|
@@ -6,7 +6,7 @@ import { SbbElement, SbbLanguageController, SbbLinkBaseElement, SbbPropertyWatch
|
|
|
6
6
|
import { SbbIconNameMixin } from "./icon.pure.js";
|
|
7
7
|
|
|
8
8
|
//#region src/elements/download/download/download.scss?inline
|
|
9
|
-
var download_default = ":host {\n --sbb-card-background-color: var(--sbb-background-color-1);\n --sbb-card-border-color: transparent;\n --sbb-card-border-radius: var(--sbb-border-radius-4x);\n --sbb-card-animation-easing: var(--sbb-animation-easing);\n --sbb-card-border-style: solid;\n --sbb-card-padding-inline-default: var(--sbb-spacing-responsive-s);\n --sbb-card-padding-block-default: var(--sbb-spacing-responsive-xxxs);\n --sbb-card-with-badge-padding-block-default: var(--sbb-spacing-fixed-6x) var(--sbb-spacing-responsive-xxxs);\n --sbb-card-padding-block: var(--sbb-card-padding-block-default);\n --sbb-card-with-badge-padding-block: var(--sbb-card-with-badge-padding-block-default);\n --sbb-card-padding-inline: var(--sbb-card-padding-inline-default);\n display: block;\n}\n\n:host(:where([color=white])) {\n --sbb-card-background-color: var(--sbb-background-color-1);\n --sbb-card-border-color: transparent;\n}\n\n:host(:where([color=milk])) {\n --sbb-card-background-color: var(--sbb-background-color-3);\n --sbb-card-border-color: transparent;\n}\n\n.sbb-download {\n --sbb-focus-outline-color: var(--sbb-focus-outline-color-default);\n --sbb-focus-outline-color: light-dark(\n var(--sbb-focus-outline-color-default),\n var(--sbb-focus-outline-color-dark)\n );\n --sbb-card-animation-duration: var(\n --sbb-disable-animation-duration,\n var(--sbb-animation-duration-1x)\n );\n display: block;\n position: relative;\n padding-inline: var(--sbb-card-padding-inline);\n padding-block: var(--sbb-card-padding-block);\n border-radius: var(--sbb-card-border-radius);\n background-color: var(--sbb-card-background-color);\n box-shadow: none;\n transition: box-shadow var(--sbb-card-animation-duration) var(--sbb-card-animation-easing);\n color: var(--sbb-card-color);\n}\n.sbb-download::after {\n content: \"\";\n position: absolute;\n inset: 0;\n background-color: transparent;\n border: var(--sbb-card-border-width) var(--sbb-card-border-style) var(--sbb-card-border-color);\n border-radius: var(--sbb-card-border-radius);\n pointer-events: none;\n}\n@media (forced-colors: active) {\n .sbb-download {\n --sbb-title-color: var(--sbb-card-color);\n }\n}\n.sbb-download {\n display: flex;\n align-items: center;\n gap: var(--sbb-download-gap);\n text-decoration: none;\n translate: 0 var(--sbb-card-hover-shift, 0);\n transition: box-shadow var(--sbb-card-animation-duration) var(--sbb-card-animation-easing), translate var(--sbb-card-animation-duration) var(--sbb-card-animation-easing);\n}\n\n.sbb-download:focus-visible {\n outline-offset: var(--sbb-focus-outline-offset);\n outline: var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width);\n}\n\n@media (any-hover: hover) {\n :host(:hover) .sbb-download {\n --sbb-card-hover-shift: -0.125rem;\n box-shadow: var(--sbb-box-shadow-level-9-hard);\n }\n}\n@media (any-hover: hover) and (forced-colors: active) {\n :host(:hover) .sbb-download {\n --sbb-card-border-color: Highlight;\n }\n}\n\n.sbb-download__icon {\n flex: 0 0 auto;\n}\n\n.sbb-download__content {\n display: flex;\n flex-direction: column;\n flex: 1 1 auto;\n min-width: 0;\n}\n\n.sbb-download__label {\n overflow-wrap: break-word;\n font-weight: bold;\n color: var(--sbb-download-label-color);\n}\n\n.sbb-download__custom-content,\n.sbb-download__info {\n line-height: var(--sbb-typo-line-height-text);\n letter-spacing: var(--sbb-
|
|
9
|
+
var download_default = ":host {\n --sbb-card-background-color: var(--sbb-background-color-1);\n --sbb-card-border-color: transparent;\n --sbb-card-border-radius: var(--sbb-border-radius-4x);\n --sbb-card-animation-easing: var(--sbb-animation-easing);\n --sbb-card-border-style: solid;\n --sbb-card-padding-inline-default: var(--sbb-spacing-responsive-s);\n --sbb-card-padding-block-default: var(--sbb-spacing-responsive-xxxs);\n --sbb-card-with-badge-padding-block-default: var(--sbb-spacing-fixed-6x) var(--sbb-spacing-responsive-xxxs);\n --sbb-card-padding-block: var(--sbb-card-padding-block-default);\n --sbb-card-with-badge-padding-block: var(--sbb-card-with-badge-padding-block-default);\n --sbb-card-padding-inline: var(--sbb-card-padding-inline-default);\n display: block;\n}\n\n:host(:where([color=white])) {\n --sbb-card-background-color: var(--sbb-background-color-1);\n --sbb-card-border-color: transparent;\n}\n\n:host(:where([color=milk])) {\n --sbb-card-background-color: var(--sbb-background-color-3);\n --sbb-card-border-color: transparent;\n}\n\n.sbb-download {\n --sbb-focus-outline-color: var(--sbb-focus-outline-color-default);\n --sbb-focus-outline-color: light-dark(\n var(--sbb-focus-outline-color-default),\n var(--sbb-focus-outline-color-dark)\n );\n --sbb-card-animation-duration: var(\n --sbb-disable-animation-duration,\n var(--sbb-animation-duration-1x)\n );\n display: block;\n position: relative;\n padding-inline: var(--sbb-card-padding-inline);\n padding-block: var(--sbb-card-padding-block);\n border-radius: var(--sbb-card-border-radius);\n background-color: var(--sbb-card-background-color);\n box-shadow: none;\n transition: box-shadow var(--sbb-card-animation-duration) var(--sbb-card-animation-easing);\n color: var(--sbb-card-color);\n}\n.sbb-download::after {\n content: \"\";\n position: absolute;\n inset: 0;\n background-color: transparent;\n border: var(--sbb-card-border-width) var(--sbb-card-border-style) var(--sbb-card-border-color);\n border-radius: var(--sbb-card-border-radius);\n pointer-events: none;\n}\n@media (forced-colors: active) {\n .sbb-download {\n --sbb-title-color: var(--sbb-card-color);\n }\n}\n.sbb-download {\n display: flex;\n align-items: center;\n gap: var(--sbb-download-gap);\n text-decoration: none;\n translate: 0 var(--sbb-card-hover-shift, 0);\n transition: box-shadow var(--sbb-card-animation-duration) var(--sbb-card-animation-easing), translate var(--sbb-card-animation-duration) var(--sbb-card-animation-easing);\n}\n\n.sbb-download:focus-visible {\n outline-offset: var(--sbb-focus-outline-offset);\n outline: var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width);\n}\n\n@media (any-hover: hover) {\n :host(:hover) .sbb-download {\n --sbb-card-hover-shift: -0.125rem;\n box-shadow: var(--sbb-box-shadow-level-9-hard);\n }\n}\n@media (any-hover: hover) and (forced-colors: active) {\n :host(:hover) .sbb-download {\n --sbb-card-border-color: Highlight;\n }\n}\n\n.sbb-download__icon {\n flex: 0 0 auto;\n}\n\n.sbb-download__content {\n display: flex;\n flex-direction: column;\n flex: 1 1 auto;\n min-width: 0;\n}\n\n.sbb-download__label {\n overflow-wrap: break-word;\n font-weight: bold;\n color: var(--sbb-download-label-color);\n}\n\n.sbb-download__custom-content,\n.sbb-download__info {\n line-height: var(--sbb-typo-line-height-text);\n letter-spacing: var(--sbb-letter-spacing-text);\n font-size: var(--sbb-text-font-size-xxs);\n color: var(--sbb-download-info-color);\n}\n\n.sbb-download__button {\n flex: 0 0 auto;\n margin-inline-start: auto;\n}\n";
|
|
10
10
|
|
|
11
11
|
//#endregion
|
|
12
12
|
//#region src/elements/download/download/download.component.ts
|
|
@@ -44,7 +44,7 @@ var SbbExpansionPanelContentElement = class extends SbbElement {
|
|
|
44
44
|
|
|
45
45
|
//#endregion
|
|
46
46
|
//#region src/elements/expansion-panel/expansion-panel-header/expansion-panel-header.scss?inline
|
|
47
|
-
var expansion_panel_header_default = ":host {\n display: block;\n}\n\n:host(:is(:state(size-s),[state--size-s])) {\n --sbb-expansion-panel-header-gap: var(--sbb-expansion-panel-header-gap-s);\n --sbb-expansion-panel-header-padding-block: var(--sbb-expansion-panel-header-padding-block-s);\n --sbb-expansion-panel-header-padding-inline: var(--sbb-expansion-panel-header-padding-inline-s);\n}\n\n:host(:is(:state(size-l),[state--size-l])) {\n --sbb-expansion-panel-header-gap: var(--sbb-expansion-panel-header-gap-l);\n --sbb-expansion-panel-header-padding-block: var(--sbb-expansion-panel-header-padding-block-l);\n --sbb-expansion-panel-header-padding-inline: var(--sbb-expansion-panel-header-padding-inline-l);\n}\n\n:host(:not(:is(:state(size-s),[state--size-s]), :is(:state(size-l),[state--size-l]))) {\n --sbb-expansion-panel-header-gap: var(--sbb-expansion-panel-header-gap-default);\n --sbb-expansion-panel-header-padding-block: var(\n --sbb-expansion-panel-header-padding-block-default\n );\n --sbb-expansion-panel-header-padding-inline: var(\n --sbb-expansion-panel-header-padding-inline-default\n );\n}\n\n:host(:is(:disabled, [disabled-interactive])) {\n --sbb-expansion-panel-header-cursor: var(--sbb-cursor-default);\n --sbb-expansion-panel-header-text-color: var(--sbb-color-granite);\n --sbb-expansion-panel-header-text-color: light-dark(\n var(--sbb-color-granite),\n var(--sbb-color-storm)\n );\n}\n@media (forced-colors: active) {\n :host(:is(:disabled, [disabled-interactive])) {\n --sbb-expansion-panel-header-text-color: GrayText;\n }\n}\n\n:host(:focus-visible) {\n outline-offset: var(--sbb-focus-outline-offset);\n outline: var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width);\n outline-offset: var(--sbb-spacing-fixed-1x);\n border-radius: var(--sbb-expansion-panel-border-radius);\n}\n\n.sbb-expansion-panel-header {\n display: flex;\n justify-content: var(--sbb-expansion-panel-header-justify-content);\n align-items: center;\n gap: var(--sbb-expansion-panel-header-gap);\n width: 100%;\n padding: var(--sbb-expansion-panel-header-padding-block) var(--sbb-expansion-panel-header-padding-inline);\n text-align: start;\n cursor: var(--sbb-expansion-panel-header-cursor);\n color: var(--sbb-expansion-panel-header-text-color);\n font-size: var(--sbb-expansion-panel-header-font-size);\n font-weight: normal;\n letter-spacing: var(--sbb-
|
|
47
|
+
var expansion_panel_header_default = ":host {\n display: block;\n}\n\n:host(:is(:state(size-s),[state--size-s])) {\n --sbb-expansion-panel-header-gap: var(--sbb-expansion-panel-header-gap-s);\n --sbb-expansion-panel-header-padding-block: var(--sbb-expansion-panel-header-padding-block-s);\n --sbb-expansion-panel-header-padding-inline: var(--sbb-expansion-panel-header-padding-inline-s);\n}\n\n:host(:is(:state(size-l),[state--size-l])) {\n --sbb-expansion-panel-header-gap: var(--sbb-expansion-panel-header-gap-l);\n --sbb-expansion-panel-header-padding-block: var(--sbb-expansion-panel-header-padding-block-l);\n --sbb-expansion-panel-header-padding-inline: var(--sbb-expansion-panel-header-padding-inline-l);\n}\n\n:host(:not(:is(:state(size-s),[state--size-s]), :is(:state(size-l),[state--size-l]))) {\n --sbb-expansion-panel-header-gap: var(--sbb-expansion-panel-header-gap-default);\n --sbb-expansion-panel-header-padding-block: var(\n --sbb-expansion-panel-header-padding-block-default\n );\n --sbb-expansion-panel-header-padding-inline: var(\n --sbb-expansion-panel-header-padding-inline-default\n );\n}\n\n:host(:is(:disabled, [disabled-interactive])) {\n --sbb-expansion-panel-header-cursor: var(--sbb-cursor-default);\n --sbb-expansion-panel-header-text-color: var(--sbb-color-granite);\n --sbb-expansion-panel-header-text-color: light-dark(\n var(--sbb-color-granite),\n var(--sbb-color-storm)\n );\n}\n@media (forced-colors: active) {\n :host(:is(:disabled, [disabled-interactive])) {\n --sbb-expansion-panel-header-text-color: GrayText;\n }\n}\n\n:host(:focus-visible) {\n outline-offset: var(--sbb-focus-outline-offset);\n outline: var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width);\n outline-offset: var(--sbb-spacing-fixed-1x);\n border-radius: var(--sbb-expansion-panel-border-radius);\n}\n\n.sbb-expansion-panel-header {\n display: flex;\n justify-content: var(--sbb-expansion-panel-header-justify-content);\n align-items: center;\n gap: var(--sbb-expansion-panel-header-gap);\n width: 100%;\n padding: var(--sbb-expansion-panel-header-padding-block) var(--sbb-expansion-panel-header-padding-inline);\n text-align: start;\n cursor: var(--sbb-expansion-panel-header-cursor);\n color: var(--sbb-expansion-panel-header-text-color);\n font-size: var(--sbb-expansion-panel-header-font-size);\n font-weight: normal;\n letter-spacing: var(--sbb-letter-spacing-text);\n line-height: var(--sbb-typo-line-height-text);\n -webkit-tap-highlight-color: transparent;\n}\n\n.sbb-expansion-panel-header__title,\n.sbb-expansion-panel-header__toggle,\n.sbb-expansion-panel-header__icon {\n display: flex;\n}\n\n.sbb-expansion-panel-header__icon {\n width: var(--sbb-expansion-panel-icon-size);\n --sbb-icon-svg-width: var(--sbb-expansion-panel-icon-size);\n --sbb-icon-svg-height: var(--sbb-expansion-panel-icon-size);\n}\n:host(:not(:is(:state(slotted-icon),[state--slotted-icon]), :is(:state(has-icon-name),[state--has-icon-name]))) .sbb-expansion-panel-header__icon {\n display: none;\n}\n\n.sbb-expansion-panel-header__title {\n align-items: center;\n gap: var(--sbb-expansion-panel-title-gap);\n overflow: hidden;\n min-height: var(--sbb-size-icon-ui-medium);\n}\n\n.sbb-expansion-panel-header__toggle-icon {\n transition: transform var(--sbb-disable-animation-duration, var(--sbb-animation-duration-4x));\n}\n:host([aria-expanded]:not([aria-expanded=false])) .sbb-expansion-panel-header__toggle-icon {\n transform: rotate(-180deg);\n}\n";
|
|
48
48
|
|
|
49
49
|
//#endregion
|
|
50
50
|
//#region src/elements/expansion-panel/expansion-panel-header/expansion-panel-header.component.ts
|
|
@@ -8,7 +8,7 @@ import { SbbDisabledMixin, SbbElement, SbbFormAssociatedMixin, SbbLanguageContro
|
|
|
8
8
|
import { SbbIconElement } from "./icon.pure.js";
|
|
9
9
|
|
|
10
10
|
//#region src/elements/file-selector/common/file-selector-common.scss?inline
|
|
11
|
-
var file_selector_common_default = ":host {\n --sbb-file-selector-transition-duration: var(\n --sbb-disable-animation-duration,\n var(--sbb-animation-duration-2x)\n );\n display: block;\n width: 20rem;\n}\n\n@media (forced-colors: active) {\n :host(:disabled) {\n --sbb-file-selector-color: GrayText;\n --sbb-file-selector-subtitle-color: GrayText;\n --sbb-file-selector-border-color: GrayText;\n }\n}\n\n:host(:is(:state(active),[state--active])) {\n --sbb-file-selector-background-color: var(--sbb-background-color-3);\n --sbb-file-selector-border-color: var(--sbb-color-storm);\n --sbb-file-selector-border-color: light-dark(var(--sbb-color-storm), var(--sbb-color-anthracite));\n}\n@media (forced-colors: active) {\n :host(:is(:state(active),[state--active])) {\n --sbb-file-selector-border-color: Highlight;\n }\n}\n\n.sbb-file-selector__input-container {\n -webkit-tap-highlight-color: transparent;\n display: flex;\n flex-direction: column;\n}\n\n.sbb-file-selector__file-list {\n display: flex;\n flex-direction: column;\n row-gap: var(--sbb-spacing-fixed-3x);\n margin-block: 0;\n padding-inline: 0;\n padding-block: var(--sbb-spacing-fixed-6x) var(--sbb-spacing-fixed-1x);\n}\n\n.sbb-file-selector__file {\n display: flex;\n gap: var(--sbb-spacing-fixed-4x);\n align-items: center;\n justify-content: space-between;\n line-height: var(--sbb-typo-line-height-text);\n letter-spacing: var(--sbb-
|
|
11
|
+
var file_selector_common_default = ":host {\n --sbb-file-selector-transition-duration: var(\n --sbb-disable-animation-duration,\n var(--sbb-animation-duration-2x)\n );\n display: block;\n width: 20rem;\n}\n\n@media (forced-colors: active) {\n :host(:disabled) {\n --sbb-file-selector-color: GrayText;\n --sbb-file-selector-subtitle-color: GrayText;\n --sbb-file-selector-border-color: GrayText;\n }\n}\n\n:host(:is(:state(active),[state--active])) {\n --sbb-file-selector-background-color: var(--sbb-background-color-3);\n --sbb-file-selector-border-color: var(--sbb-color-storm);\n --sbb-file-selector-border-color: light-dark(var(--sbb-color-storm), var(--sbb-color-anthracite));\n}\n@media (forced-colors: active) {\n :host(:is(:state(active),[state--active])) {\n --sbb-file-selector-border-color: Highlight;\n }\n}\n\n.sbb-file-selector__input-container {\n -webkit-tap-highlight-color: transparent;\n display: flex;\n flex-direction: column;\n}\n\n.sbb-file-selector__file-list {\n display: flex;\n flex-direction: column;\n row-gap: var(--sbb-spacing-fixed-3x);\n margin-block: 0;\n padding-inline: 0;\n padding-block: var(--sbb-spacing-fixed-6x) var(--sbb-spacing-fixed-1x);\n}\n\n.sbb-file-selector__file {\n display: flex;\n gap: var(--sbb-spacing-fixed-4x);\n align-items: center;\n justify-content: space-between;\n line-height: var(--sbb-typo-line-height-text);\n letter-spacing: var(--sbb-letter-spacing-text);\n font-size: var(--sbb-text-font-size-s);\n}\n\n.sbb-file-selector__file-details {\n display: flex;\n flex: 1;\n justify-content: space-between;\n gap: var(--sbb-spacing-fixed-4x);\n overflow: auto;\n}\n\n.sbb-file-selector__file-name {\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n}\n\n.sbb-file-selector__file-size {\n white-space: nowrap;\n color: var(--sbb-color-metal);\n color: light-dark(var(--sbb-color-metal), var(--sbb-color-smoke));\n}\n\n:host(:not(:is(:state(slotted-error),[state--slotted-error]))) .sbb-file-selector__error {\n display: none;\n}\n";
|
|
12
12
|
|
|
13
13
|
//#endregion
|
|
14
14
|
//#region src/elements/file-selector/common/file-selector-common.ts
|
|
@@ -425,7 +425,7 @@ const SbbFileSelectorCommonElementMixin = (superclass) => {
|
|
|
425
425
|
|
|
426
426
|
//#endregion
|
|
427
427
|
//#region src/elements/file-selector/file-selector-dropzone/file-selector-dropzone.scss?inline
|
|
428
|
-
var file_selector_dropzone_default = ":host([size=m]) {\n --_sbb-file-selector-dropzone-icon-medium-display: block;\n --_sbb-file-selector-dropzone-icon-small-display: none;\n}\n\n:host([size=s]) {\n --_sbb-file-selector-dropzone-icon-medium-display: none;\n --_sbb-file-selector-dropzone-icon-small-display: block;\n}\n\n.sbb-file-selector__dropzone-area {\n display: flex;\n flex-direction: column;\n align-items: center;\n padding: var(--sbb-spacing-responsive-s);\n background-color: var(--sbb-file-selector-background-color);\n border: var(--sbb-border-width-1x) dashed var(--sbb-file-selector-border-color);\n border-radius: var(--sbb-border-radius-4x);\n transition-duration: var(--sbb-file-selector-transition-duration);\n transition-timing-function: var(--sbb-file-selector-transition-easing-function);\n transition-property: background-color, border-color;\n}\n\n.sbb-file-selector__dropzone-area--icon {\n color: var(--sbb-file-selector-color);\n line-height: 0;\n}\n\nsbb-icon[name=folder-open-medium] {\n display: var(--_sbb-file-selector-dropzone-icon-medium-display);\n}\n\nsbb-icon[name=folder-open-small] {\n display: var(--_sbb-file-selector-dropzone-icon-small-display);\n}\n\n.sbb-file-selector__dropzone-area--title {\n font-weight: bold;\n font-size: var(--sbb-heading-font-size-6);\n letter-spacing: var(--sbb-
|
|
428
|
+
var file_selector_dropzone_default = ":host([size=m]) {\n --_sbb-file-selector-dropzone-icon-medium-display: block;\n --_sbb-file-selector-dropzone-icon-small-display: none;\n}\n\n:host([size=s]) {\n --_sbb-file-selector-dropzone-icon-medium-display: none;\n --_sbb-file-selector-dropzone-icon-small-display: block;\n}\n\n.sbb-file-selector__dropzone-area {\n display: flex;\n flex-direction: column;\n align-items: center;\n padding: var(--sbb-spacing-responsive-s);\n background-color: var(--sbb-file-selector-background-color);\n border: var(--sbb-border-width-1x) dashed var(--sbb-file-selector-border-color);\n border-radius: var(--sbb-border-radius-4x);\n transition-duration: var(--sbb-file-selector-transition-duration);\n transition-timing-function: var(--sbb-file-selector-transition-easing-function);\n transition-property: background-color, border-color;\n}\n\n.sbb-file-selector__dropzone-area--icon {\n color: var(--sbb-file-selector-color);\n line-height: 0;\n}\n\nsbb-icon[name=folder-open-medium] {\n display: var(--_sbb-file-selector-dropzone-icon-medium-display);\n}\n\nsbb-icon[name=folder-open-small] {\n display: var(--_sbb-file-selector-dropzone-icon-small-display);\n}\n\n.sbb-file-selector__dropzone-area--title {\n font-weight: bold;\n font-size: var(--sbb-heading-font-size-6);\n letter-spacing: var(--sbb-letter-spacing-heading);\n text-align: center;\n color: var(--sbb-file-selector-color);\n}\n\n.sbb-file-selector__dropzone-area--subtitle {\n text-align: center;\n color: var(--sbb-file-selector-subtitle-color);\n margin-block-end: var(--sbb-spacing-fixed-4x);\n line-height: var(--sbb-typo-line-height-text);\n letter-spacing: var(--sbb-letter-spacing-text);\n font-size: var(--sbb-text-font-size-xs);\n}\n";
|
|
429
429
|
|
|
430
430
|
//#endregion
|
|
431
431
|
//#region src/elements/file-selector/file-selector-dropzone/file-selector-dropzone.component.ts
|
|
@@ -5,7 +5,7 @@ import { html, unsafeStatic } from "lit/static-html.js";
|
|
|
5
5
|
import { SbbElement, SbbNegativeMixin, forceType, screenReaderOnlyStyles } from "./core.js";
|
|
6
6
|
|
|
7
7
|
//#region src/elements/footer/footer.scss?inline
|
|
8
|
-
var footer_default = ":host {\n --sbb-link-text-decoration-line: none;\n display: block;\n}\n\n:host([negative]) {\n --sbb-footer-background-color: var(--sbb-background-color-2-negative);\n --sbb-footer-color: var(--sbb-color-1-negative);\n --sbb-focus-outline-color: var(--sbb-focus-outline-color-dark);\n}\n\n.sbb-footer {\n font-size: var(--sbb-footer-font-size);\n letter-spacing: var(--sbb-
|
|
8
|
+
var footer_default = ":host {\n --sbb-link-text-decoration-line: none;\n display: block;\n}\n\n:host([negative]) {\n --sbb-footer-background-color: var(--sbb-background-color-2-negative);\n --sbb-footer-color: var(--sbb-color-1-negative);\n --sbb-focus-outline-color: var(--sbb-focus-outline-color-dark);\n}\n\n.sbb-footer {\n font-size: var(--sbb-footer-font-size);\n letter-spacing: var(--sbb-letter-spacing-text);\n line-height: var(--sbb-typo-line-height-text);\n color: var(--sbb-footer-color);\n padding-block: var(--sbb-footer-padding-block);\n background-color: var(--sbb-footer-background-color);\n}\n@media (forced-colors: active) {\n .sbb-footer {\n border-block-start: var(--sbb-border-width-1x) solid CanvasText;\n }\n}\n\n:host(:not([expanded])) .sbb-footer-wrapper {\n padding-inline: var(--sbb-page-spacing-padding, var(--sbb-layout-base-offset-responsive));\n margin-inline: auto;\n width: 100%;\n}\n@media (min-width: calc(90rem)) {\n :host(:not([expanded])) .sbb-footer-wrapper {\n max-width: var(--sbb-spacing-max-width, calc(var(--sbb-layout-base-page-max-width) + 2 * var(--sbb-layout-base-offset-responsive)));\n }\n}\n:host([expanded]) .sbb-footer-wrapper {\n padding-inline: var(--sbb-page-spacing-padding, var(--sbb-spacing-responsive-xxs));\n}\n\n::slotted(.sbb-link-list-button-group) {\n display: flex;\n flex-direction: column;\n gap: var(--sbb-spacing-fixed-6x);\n align-items: flex-start;\n}\n\n:host([variant=clock-columns]) slot {\n display: grid;\n grid-template-columns: auto;\n grid-template-rows: auto;\n column-gap: var(--sbb-footer-gap-horizontal);\n}\n@media (min-width: calc(37.5rem)) {\n :host([variant=clock-columns]) slot {\n grid-template-columns: calc(50% - var(--sbb-footer-gap-horizontal) / 2);\n }\n}\n@media (min-width: calc(90rem)) {\n :host([variant=clock-columns]) slot {\n max-width: var(--sbb-footer-content-max-width);\n margin-inline: auto;\n grid-template-columns: repeat(4, 1fr);\n }\n}\n:host([variant=clock-columns]) ::slotted(*:not(:last-child, sbb-divider)) {\n margin-block-end: var(--sbb-footer-gap-vertical);\n}\n:host([variant=clock-columns]) ::slotted(sbb-clock) {\n width: var(--sbb-footer-clock-width);\n grid-row: 1;\n}\n@media (min-width: calc(37.5rem)) {\n :host([variant=clock-columns]) ::slotted(sbb-clock) {\n align-self: start;\n grid-row: 2;\n }\n}\n@media (min-width: calc(90rem)) {\n :host([variant=clock-columns]) ::slotted(sbb-clock) {\n grid-row: 1;\n grid-column: 4/5;\n justify-self: end;\n }\n}\n:host([variant=clock-columns]) ::slotted(sbb-divider) {\n margin-block: calc(var(--sbb-spacing-responsive-xl) - var(--sbb-footer-gap-vertical)) var(--sbb-spacing-responsive-s);\n}\n@media (min-width: calc(37.5rem)) {\n :host([variant=clock-columns]) ::slotted(sbb-divider) {\n grid-row: 3;\n grid-column: 1/4;\n width: 100%;\n }\n}\n@media (min-width: calc(90rem)) {\n :host([variant=clock-columns]) ::slotted(sbb-divider) {\n grid-row: 2;\n }\n}\n@media (min-width: calc(37.5rem)) {\n :host([variant=clock-columns]) ::slotted(:nth-child(-n+2)) {\n grid-row: 1;\n }\n :host([variant=clock-columns]) ::slotted(:nth-child(3)),\n :host([variant=clock-columns]) ::slotted(:nth-child(4)) {\n grid-row: 2;\n }\n :host([variant=clock-columns]) ::slotted(*:last-child) {\n grid-row: 4;\n }\n}\n@media (min-width: calc(64rem)) {\n :host([variant=clock-columns]) ::slotted(*:last-child) {\n grid-column: 1/4;\n }\n}\n@media (min-width: calc(90rem)) {\n :host([variant=clock-columns]) ::slotted(:nth-child(-n+4)) {\n grid-row: 1;\n }\n :host([variant=clock-columns]) ::slotted(*:last-child) {\n grid-row: 3;\n }\n :host([variant=clock-columns]) ::slotted(sbb-divider),\n :host([variant=clock-columns]) ::slotted(*:last-child) {\n grid-column: 1/5;\n }\n}\n";
|
|
9
9
|
|
|
10
10
|
//#endregion
|
|
11
11
|
//#region src/elements/footer/footer.component.ts
|
|
@@ -6,7 +6,7 @@ import { SbbIconElement } from "./icon.pure.js";
|
|
|
6
6
|
import { miniButtonStyle } from "./button.pure.js";
|
|
7
7
|
|
|
8
8
|
//#region src/elements/form-field/error/error.scss?inline
|
|
9
|
-
var error_default = ":host {\n --_sbb-error-height: calc(var(--sbb-typo-line-height-text) * 1em);\n --sbb-icon-svg-width: var(--sbb-error-icon-size);\n --sbb-icon-svg-height: var(--sbb-error-icon-size);\n display: flex;\n align-items: flex-start;\n color: var(--sbb-error-color);\n min-height: var(--_sbb-error-height);\n font-size: var(--sbb-error-font-size);\n line-height: var(--sbb-typo-line-height-text);\n letter-spacing: var(--sbb-
|
|
9
|
+
var error_default = ":host {\n --_sbb-error-height: calc(var(--sbb-typo-line-height-text) * 1em);\n --sbb-icon-svg-width: var(--sbb-error-icon-size);\n --sbb-icon-svg-height: var(--sbb-error-icon-size);\n display: flex;\n align-items: flex-start;\n color: var(--sbb-error-color);\n min-height: var(--_sbb-error-height);\n font-size: var(--sbb-error-font-size);\n line-height: var(--sbb-typo-line-height-text);\n letter-spacing: var(--sbb-letter-spacing-text);\n}\n@media (forced-colors: active) {\n :host {\n --sbb-error-color: LinkText !important;\n }\n}\n\n:host([negative]) {\n --sbb-error-color: var(--sbb-color-red85);\n}\n\n.error__icon {\n display: flex;\n align-items: center;\n height: var(--_sbb-error-height);\n margin-inline-end: var(--sbb-spacing-fixed-1x);\n}\n\n.error-content {\n line-height: var(--sbb-typo-line-height-text);\n vertical-align: text-top;\n}\n\n.error__icon-svg {\n stroke: currentcolor;\n height: var(--_sbb-error-height);\n}\n";
|
|
10
10
|
|
|
11
11
|
//#endregion
|
|
12
12
|
//#region src/elements/form-field/error/error.component.ts
|
|
@@ -56,7 +56,7 @@ var SbbErrorElement = class extends SbbNegativeMixin(SbbElement) {
|
|
|
56
56
|
|
|
57
57
|
//#endregion
|
|
58
58
|
//#region src/elements/form-field/form-field/form-field.scss?inline
|
|
59
|
-
var form_field_default = "@charset \"UTF-8\";\n:host {\n --sbb-form-field-hint-divider-width: var(--sbb-spacing-fixed-1x);\n --sbb-form-field-hint-padding-block-start: var(--sbb-form-field-hint-divider-width);\n --sbb-form-field-select-inline-padding-end: calc(\n var(--sbb-icon-svg-width) + var(--sbb-form-field-gap)\n );\n --sbb-form-field-label-size: calc(\n var(--sbb-form-field-label-text-size) * var(--sbb-typo-line-height-text)\n );\n --sbb-form-field-text-line-height: calc(\n var(--sbb-form-field-input-text-size) * var(--sbb-typo-line-height-text)\n );\n --sbb-form-field-margin-block-start: calc(\n (\n var(--sbb-form-field-min-height) - var(--sbb-form-field-label-size) - var(\n --sbb-form-field-text-line-height\n ) +\n var(--_sbb-form-field-label-to-input-overlapping)\n ) /\n 2\n );\n --sbb-icon-svg-width: var(--sbb-form-field-icon-size);\n --sbb-icon-svg-height: var(--sbb-form-field-icon-size);\n --sbb-focus-outline-color: var(--sbb-focus-outline-color-default);\n --sbb-focus-outline-color: light-dark(\n var(--sbb-focus-outline-color-default),\n var(--sbb-focus-outline-color-dark)\n );\n display: inline-block;\n color: var(--sbb-form-field-color);\n font-weight: normal;\n line-height: var(--sbb-typo-line-height-text);\n}\n\n:host(:where(:not([width=collapse]))) {\n min-width: 9.375rem;\n width: min(18.75rem, 100%);\n}\n\n:host([negative]) {\n color: var(--sbb-color-3-negative);\n --sbb-form-field-background-color: var(--sbb-background-color-1-negative);\n --sbb-form-field-border-color: var(--sbb-border-color-5);\n --sbb-form-field-label-color: var(--sbb-color-5);\n --sbb-form-field-prefix-color: var(--sbb-color-5);\n --sbb-form-field-text-color: var(--sbb-color-3-negative);\n --sbb-focus-outline-color: var(--sbb-focus-outline-color-dark);\n --sbb-form-field-arrow-color: var(--sbb-color-3-negative);\n}\n@media (forced-colors: active) {\n :host([negative]) {\n --sbb-form-field-border-color: ButtonBorder;\n }\n}\n\n:host([size=s]) {\n --sbb-form-field-min-height: var(--sbb-size-element-xs);\n --sbb-form-field-padding-inline: var(--sbb-spacing-fixed-2x);\n --sbb-form-field-input-text-size: var(--sbb-text-font-size-s);\n --sbb-form-field-label-text-size: var(--sbb-text-font-size-xxs);\n --_sbb-form-field-input-margin-block-end: -0.125rem;\n --_sbb-form-field-label-to-input-overlapping: 0.625rem;\n --_sbb-form-field-floating-label-transform: 0.34375rem;\n --_sbb-form-field-spacer-margin-block-end: -0.53125rem;\n}\n@media (min-width: calc(64rem)) {\n :host([size=s]) {\n --_sbb-form-field-label-to-input-overlapping: 0.6875rem;\n --_sbb-form-field-floating-label-transform: 0.3125rem;\n --_sbb-form-field-spacer-margin-block-end: -0.5rem;\n }\n}\n\n:host([size=m]) {\n --sbb-form-field-min-height: var(--sbb-size-element-m);\n --sbb-form-field-padding-inline: var(--sbb-spacing-fixed-3x);\n}\n\n:host([size=l]) {\n --sbb-form-field-min-height: var(--sbb-size-element-l);\n --sbb-form-field-padding-inline: var(--sbb-spacing-responsive-xxxs);\n}\n\n:host(:is([size=m], [size=l])) {\n --sbb-form-field-input-text-size: var(--sbb-text-font-size-m);\n --sbb-form-field-label-text-size: var(--sbb-text-font-size-xs);\n --_sbb-form-field-input-margin-block-end: 0;\n --_sbb-form-field-label-to-input-overlapping: var(--sbb-spacing-fixed-1x);\n --_sbb-form-field-floating-label-transform: 0.53125rem;\n --_sbb-form-field-spacer-margin-block-end: calc(\n -1 * var(--_sbb-form-field-label-to-input-overlapping)\n );\n}\n@media (min-width: calc(64rem)) {\n :host(:is([size=m], [size=l])) {\n --_sbb-form-field-floating-label-transform: 0.65625rem;\n }\n}\n\n:host([error-space=reserve]) {\n --sbb-form-field-hint-min-height: calc(\n var(--sbb-typo-line-height-text) * var(--sbb-text-font-size-xs)\n );\n --sbb-form-field-hint-padding-block-start-override: var(--sbb-form-field-hint-divider-width);\n}\n\n:host(:where(:is(:state(readonly),[state--readonly]), :is(:state(disabled),[state--disabled]))) {\n --sbb-form-field-background-color: var(--sbb-background-color-3);\n --sbb-form-field-border-color: var(--sbb-color-graphite);\n --sbb-form-field-border-color: light-dark(var(--sbb-color-graphite), var(--sbb-color-smoke));\n --sbb-form-field-arrow-color: var(--sbb-color-granite);\n --sbb-form-field-arrow-color: light-dark(var(--sbb-color-granite), var(--sbb-color-storm));\n}\n@media (forced-colors: active) {\n :host(:where(:is(:state(readonly),[state--readonly]), :is(:state(disabled),[state--disabled]))) {\n --sbb-form-field-border-color: ButtonBorder;\n }\n}\n\n:host(:where(:is(:state(readonly),[state--readonly]), :is(:state(disabled),[state--disabled]))[negative]) {\n --sbb-form-field-background-color: var(--sbb-background-color-3-negative);\n --sbb-form-field-border-color: var(--sbb-border-color-5);\n --sbb-form-field-arrow-color: var(--sbb-border-color-5);\n}\n\n:host(:where(:is(:state(disabled),[state--disabled]))) {\n --sbb-form-field-label-color: var(--sbb-color-granite);\n --sbb-form-field-label-color: light-dark(var(--sbb-color-granite), var(--sbb-color-smoke));\n --sbb-form-field-prefix-color: var(--sbb-color-granite);\n --sbb-form-field-prefix-color: light-dark(var(--sbb-color-granite), var(--sbb-color-storm));\n --sbb-form-field-border-style: dashed;\n}\n@media (forced-colors: active) {\n :host(:where(:is(:state(disabled),[state--disabled]))) {\n --sbb-form-field-label-color: GrayText !important;\n --sbb-form-field-prefix-color: GrayText !important;\n --sbb-form-field-text-color: GrayText !important;\n --sbb-form-field-border-color: GrayText !important;\n }\n}\n\n:host(:where(:is(:state(disabled),[state--disabled]))[negative]) {\n --sbb-form-field-text-color: var(--sbb-color-5);\n --sbb-form-field-label-color: var(--sbb-color-5);\n --sbb-form-field-prefix-color: var(--sbb-color-5);\n}\n\n:host(:where(:is(:state(readonly),[state--readonly])):not([negative])) {\n --sbb-form-field-label-color: var(--sbb-color-granite);\n --sbb-form-field-label-color: light-dark(var(--sbb-color-granite), var(--sbb-color-smoke));\n --sbb-form-field-prefix-color: var(--sbb-color-granite);\n --sbb-form-field-prefix-color: light-dark(var(--sbb-color-granite), var(--sbb-color-storm));\n}\n\n:host(:where(:is(:state(focus),[state--focus]))) {\n --sbb-form-field-border-color: var(--sbb-border-color-3);\n --sbb-form-field-prefix-color: var(--sbb-color-3);\n --sbb-form-field-border-width: var(--sbb-border-width-2x);\n}\n\n:host(:where(:is(:state(focus),[state--focus]))[negative]) {\n --sbb-form-field-border-color: var(--sbb-border-color-3-negative);\n --sbb-form-field-prefix-color: var(--sbb-color-3-negative);\n}\n\n@media (forced-colors: active) {\n :host(:is(:state(focus),[state--focus])) {\n --sbb-form-field-border-color: Highlight;\n --sbb-form-field-prefix-color: Highlight;\n }\n}\n\n:host(:not(:where(:is(:state(has-error),[state--has-error]), :is(:state(has-hint),[state--has-hint])))) {\n --sbb-form-field-hint-padding-block-start: 0;\n}\n\n:host([floating-label]) {\n --sbb-select-placeholder-color: transparent;\n}\n@media (forced-colors: active) {\n :host([floating-label]) {\n --sbb-select-placeholder-color: Canvas;\n }\n}\n\n:host(:is(:not(:is(:state(slotted-label),[state--slotted-label])), [hidden-label])) {\n --sbb-form-field-label-size: 0rem;\n --_sbb-form-field-label-to-input-overlapping: 0rem;\n}\n\n:host(:where(:is(:state(input-element-sbb-slider),[state--input-element-sbb-slider]))) {\n --sbb-form-field-overflow: visible;\n}\n\n.sbb-form-field__space-wrapper {\n display: flex;\n flex-direction: column;\n height: 100%;\n}\n.sbb-form-field__space-wrapper::before {\n content: \"\";\n user-select: none;\n width: 0;\n height: 0;\n}\n\n.sbb-form-field__wrapper {\n display: flex;\n flex: 1;\n gap: var(--sbb-form-field-gap);\n padding-inline: var(--sbb-form-field-padding-inline);\n border-radius: var(--sbb-form-field-border-radius);\n min-height: var(--sbb-form-field-min-height);\n max-height: var(--sbb-form-field-max-height);\n background-color: var(--sbb-form-field-background-color);\n position: relative;\n}\n.sbb-form-field__wrapper::before {\n content: \"\";\n display: block;\n position: absolute;\n inset: 0;\n border: var(--sbb-form-field-border-width) var(--sbb-form-field-border-style) var(--sbb-form-field-border-color);\n border-radius: var(--sbb-form-field-border-radius);\n pointer-events: none;\n}\n:host(:where(:is(:state(focus),[state--focus]):is(:state(focus-origin-keyboard),[state--focus-origin-keyboard]))) .sbb-form-field__wrapper {\n outline-offset: var(--sbb-focus-outline-offset);\n outline: var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width);\n outline-offset: var(--sbb-form-field-outline-offset, var(--sbb-focus-outline-offset));\n}\n@media (forced-colors: none) {\n :host(:is([borderless], :is(:state(input-element-sbb-slider),[state--input-element-sbb-slider]))) .sbb-form-field__wrapper::before {\n border-color: transparent;\n }\n .sbb-form-field__wrapper::after {\n position: absolute;\n border-block-end: var(--sbb-border-width-1x) var(--sbb-form-field-border-style) var(--sbb-form-field-border-color);\n inset-inline: var(--sbb-form-field-border-block-end-inset-inline, var(--sbb-form-field-padding-inline));\n inset-block-end: 0;\n z-index: var(--sbb-form-field-focus-underline-z-index, initial);\n }\n :host(:where(:is(:state(focus),[state--focus]), :is(:state(disabled),[state--disabled]))[borderless]) .sbb-form-field__wrapper::after {\n content: \"\";\n }\n}\n\n::slotted(*[slot=prefix]) {\n color: var(--sbb-form-field-prefix-color);\n}\n\n::slotted(*[slot=prefix]),\n::slotted(*[slot=suffix]) {\n display: flex;\n min-width: var(--sbb-icon-svg-width);\n margin-block-start: calc((var(--sbb-form-field-min-height) - var(--sbb-size-icon-ui-small)) / 2);\n}\n\n:host(:where(:is(:state(empty),[state--empty]), :is(:state(disabled),[state--disabled]), :is(:state(readonly),[state--readonly]))) ::slotted(sbb-form-field-clear) {\n display: none;\n}\n\n:host(:is(:state(has-error),[state--has-error])) slot[name=hint] {\n display: none;\n}\n\n:host(:where(:is(:state(disabled),[state--disabled]), :is(:state(readonly),[state--readonly]))) ::slotted(sbb-form-field-text-counter) {\n display: none;\n}\n\n::slotted(sbb-datepicker-toggle) {\n padding-block-end: calc((var(--sbb-form-field-min-height) - var(--sbb-size-icon-ui-small)) / 2);\n}\n\n@media (forced-colors: active) {\n ::slotted(*[slot=suffix]) {\n color: var(--sbb-form-field-prefix-color);\n }\n}\n.sbb-form-field__select-input-icon {\n position: absolute;\n top: 50%;\n translate: 0 -50%;\n display: none;\n position: absolute;\n inset-inline-end: 0;\n margin-block-start: calc(-1 * var(--sbb-form-field-margin-block-start) / 2);\n pointer-events: none;\n color: var(--sbb-form-field-arrow-color);\n}\n:host(:is(:is(:state(input-element-select),[state--input-element-select]),\n:is(:state(input-element-sbb-select),[state--input-element-sbb-select]),\n:is(:state(explicit-input-element-select),[state--explicit-input-element-select]))) .sbb-form-field__select-input-icon {\n display: inline-block;\n}\n\n.sbb-form-field__input-container {\n display: flex;\n flex-direction: column;\n flex: 1 1 auto;\n position: relative;\n margin-block-start: var(--sbb-form-field-margin-block-start);\n min-width: 0;\n}\n\n.sbb-form-field__label-spacer {\n display: flex;\n height: calc(var(--sbb-form-field-label-text-size) * var(--sbb-typo-line-height-text));\n margin-block-end: var(--_sbb-form-field-spacer-margin-block-end);\n}\n\n:host(:not(:is(:state(slotted-label),[state--slotted-label]))) :is(.sbb-form-field__label, .sbb-form-field__label-spacer) {\n display: none;\n}\n:host([hidden-label]) :is(.sbb-form-field__label, .sbb-form-field__label-spacer) {\n border: 0;\n clip-path: rect(0 0 0 0);\n height: 1px;\n margin: -1px;\n overflow: hidden;\n padding: 0;\n position: absolute;\n white-space: nowrap;\n width: 1px;\n}\n\n.sbb-form-field__label {\n display: flex;\n max-width: 100%;\n cursor: var(--sbb-cursor-default);\n position: absolute;\n inset-block-start: 0;\n color: var(--sbb-form-field-label-color);\n font-size: var(--sbb-form-field-label-text-size);\n letter-spacing: var(--sbb-typo-letter-spacing-text);\n}\n:host(:where(:is(:state(input-element-select),[state--input-element-select]), :is(:state(input-element-sbb-select),[state--input-element-sbb-select]))) .sbb-form-field__label {\n padding-inline-end: var(--sbb-form-field-select-inline-padding-end);\n}\n:host([floating-label]) .sbb-form-field__label {\n transform-origin: 0 0;\n pointer-events: none;\n backface-visibility: hidden;\n will-change: transform, font-size;\n transition-duration: var(--sbb-disable-animation-duration, var(--sbb-animation-duration-2x));\n transition-timing-function: var(--sbb-animation-easing);\n transition-property: transform, font-size;\n}\n:host([floating-label]:is(:not(:where(:is(:state(focus),[state--focus])):not(:where(:is(:state(input-element-sbb-select),[state--input-element-sbb-select]))),\n:where(:is(:state(has-popup-open),[state--has-popup-open]))),\n:where(:is(:state(readonly),[state--readonly]))):where(:is(:state(empty),[state--empty]))) .sbb-form-field__label {\n font-size: var(--sbb-form-field-input-text-size);\n transform: translateY(var(--_sbb-form-field-floating-label-transform));\n}\n@media (forced-colors: active) {\n :host(:where(:is(:state(input-element-textarea),[state--input-element-textarea]))) .sbb-form-field__label {\n z-index: 1;\n }\n}\n\n.sbb-form-field__label-ellipsis {\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n}\n\n.sbb-form-field__input {\n display: flex;\n flex: 1;\n align-items: start;\n}\n:host(:is(:is(:state(input-element-input),[state--input-element-input]),\n:is(:state(input-element-select),[state--input-element-select]),\n:is(:state(input-element-sbb-select),[state--input-element-sbb-select]),\n:is(:state(input-element-sbb-date-input),[state--input-element-sbb-date-input]),\n:is(:state(input-element-sbb-time-input),[state--input-element-sbb-time-input]))) .sbb-form-field__input {\n margin-block-end: var(--_sbb-form-field-input-margin-block-end);\n}\n\n.sbb-form-field__hint {\n display: flex;\n min-height: var(--sbb-form-field-hint-min-height);\n flex-direction: column;\n margin-inline-start: var(--sbb-form-field-padding-inline);\n margin-block-start: var(--sbb-form-field-hint-padding-block-start-override, var(--sbb-form-field-hint-padding-block-start));\n}\n";
|
|
59
|
+
var form_field_default = "@charset \"UTF-8\";\n:host {\n --sbb-form-field-hint-divider-width: var(--sbb-spacing-fixed-1x);\n --sbb-form-field-hint-padding-block-start: var(--sbb-form-field-hint-divider-width);\n --sbb-form-field-select-inline-padding-end: calc(\n var(--sbb-icon-svg-width) + var(--sbb-form-field-gap)\n );\n --sbb-form-field-label-size: calc(\n var(--sbb-form-field-label-text-size) * var(--sbb-typo-line-height-text)\n );\n --sbb-form-field-text-line-height: calc(\n var(--sbb-form-field-input-text-size) * var(--sbb-typo-line-height-text)\n );\n --sbb-form-field-margin-block-start: calc(\n (\n var(--sbb-form-field-min-height) - var(--sbb-form-field-label-size) - var(\n --sbb-form-field-text-line-height\n ) +\n var(--_sbb-form-field-label-to-input-overlapping)\n ) /\n 2\n );\n --sbb-icon-svg-width: var(--sbb-form-field-icon-size);\n --sbb-icon-svg-height: var(--sbb-form-field-icon-size);\n --sbb-focus-outline-color: var(--sbb-focus-outline-color-default);\n --sbb-focus-outline-color: light-dark(\n var(--sbb-focus-outline-color-default),\n var(--sbb-focus-outline-color-dark)\n );\n display: inline-block;\n color: var(--sbb-form-field-color);\n font-weight: normal;\n line-height: var(--sbb-typo-line-height-text);\n}\n\n:host(:where(:not([width=collapse]))) {\n min-width: 9.375rem;\n width: min(18.75rem, 100%);\n}\n\n:host([negative]) {\n color: var(--sbb-color-3-negative);\n --sbb-form-field-background-color: var(--sbb-background-color-1-negative);\n --sbb-form-field-border-color: var(--sbb-border-color-5);\n --sbb-form-field-label-color: var(--sbb-color-5);\n --sbb-form-field-prefix-color: var(--sbb-color-5);\n --sbb-form-field-text-color: var(--sbb-color-3-negative);\n --sbb-focus-outline-color: var(--sbb-focus-outline-color-dark);\n --sbb-form-field-arrow-color: var(--sbb-color-3-negative);\n}\n@media (forced-colors: active) {\n :host([negative]) {\n --sbb-form-field-border-color: ButtonBorder;\n }\n}\n\n:host([size=s]) {\n --sbb-form-field-min-height: var(--sbb-size-element-xs);\n --sbb-form-field-padding-inline: var(--sbb-spacing-fixed-2x);\n --sbb-form-field-input-text-size: var(--sbb-text-font-size-s);\n --sbb-form-field-label-text-size: var(--sbb-text-font-size-xxs);\n --_sbb-form-field-input-margin-block-end: -0.125rem;\n --_sbb-form-field-label-to-input-overlapping: 0.625rem;\n --_sbb-form-field-floating-label-transform: 0.34375rem;\n --_sbb-form-field-spacer-margin-block-end: -0.53125rem;\n}\n@media (min-width: calc(64rem)) {\n :host([size=s]) {\n --_sbb-form-field-label-to-input-overlapping: 0.6875rem;\n --_sbb-form-field-floating-label-transform: 0.3125rem;\n --_sbb-form-field-spacer-margin-block-end: -0.5rem;\n }\n}\n\n:host([size=m]) {\n --sbb-form-field-min-height: var(--sbb-size-element-m);\n --sbb-form-field-padding-inline: var(--sbb-spacing-fixed-3x);\n}\n\n:host([size=l]) {\n --sbb-form-field-min-height: var(--sbb-size-element-l);\n --sbb-form-field-padding-inline: var(--sbb-spacing-responsive-xxxs);\n}\n\n:host(:is([size=m], [size=l])) {\n --sbb-form-field-input-text-size: var(--sbb-text-font-size-m);\n --sbb-form-field-label-text-size: var(--sbb-text-font-size-xs);\n --_sbb-form-field-input-margin-block-end: 0;\n --_sbb-form-field-label-to-input-overlapping: var(--sbb-spacing-fixed-1x);\n --_sbb-form-field-floating-label-transform: 0.53125rem;\n --_sbb-form-field-spacer-margin-block-end: calc(\n -1 * var(--_sbb-form-field-label-to-input-overlapping)\n );\n}\n@media (min-width: calc(64rem)) {\n :host(:is([size=m], [size=l])) {\n --_sbb-form-field-floating-label-transform: 0.65625rem;\n }\n}\n\n:host([error-space=reserve]) {\n --sbb-form-field-hint-min-height: calc(\n var(--sbb-typo-line-height-text) * var(--sbb-text-font-size-xs)\n );\n --sbb-form-field-hint-padding-block-start-override: var(--sbb-form-field-hint-divider-width);\n}\n\n:host(:where(:is(:state(readonly),[state--readonly]), :is(:state(disabled),[state--disabled]))) {\n --sbb-form-field-background-color: var(--sbb-background-color-3);\n --sbb-form-field-border-color: var(--sbb-color-graphite);\n --sbb-form-field-border-color: light-dark(var(--sbb-color-graphite), var(--sbb-color-smoke));\n --sbb-form-field-arrow-color: var(--sbb-color-granite);\n --sbb-form-field-arrow-color: light-dark(var(--sbb-color-granite), var(--sbb-color-storm));\n}\n@media (forced-colors: active) {\n :host(:where(:is(:state(readonly),[state--readonly]), :is(:state(disabled),[state--disabled]))) {\n --sbb-form-field-border-color: ButtonBorder;\n }\n}\n\n:host(:where(:is(:state(readonly),[state--readonly]), :is(:state(disabled),[state--disabled]))[negative]) {\n --sbb-form-field-background-color: var(--sbb-background-color-3-negative);\n --sbb-form-field-border-color: var(--sbb-border-color-5);\n --sbb-form-field-arrow-color: var(--sbb-border-color-5);\n}\n\n:host(:where(:is(:state(disabled),[state--disabled]))) {\n --sbb-form-field-label-color: var(--sbb-color-granite);\n --sbb-form-field-label-color: light-dark(var(--sbb-color-granite), var(--sbb-color-smoke));\n --sbb-form-field-prefix-color: var(--sbb-color-granite);\n --sbb-form-field-prefix-color: light-dark(var(--sbb-color-granite), var(--sbb-color-storm));\n --sbb-form-field-border-style: dashed;\n}\n@media (forced-colors: active) {\n :host(:where(:is(:state(disabled),[state--disabled]))) {\n --sbb-form-field-label-color: GrayText !important;\n --sbb-form-field-prefix-color: GrayText !important;\n --sbb-form-field-text-color: GrayText !important;\n --sbb-form-field-border-color: GrayText !important;\n }\n}\n\n:host(:where(:is(:state(disabled),[state--disabled]))[negative]) {\n --sbb-form-field-text-color: var(--sbb-color-5);\n --sbb-form-field-label-color: var(--sbb-color-5);\n --sbb-form-field-prefix-color: var(--sbb-color-5);\n}\n\n:host(:where(:is(:state(readonly),[state--readonly])):not([negative])) {\n --sbb-form-field-label-color: var(--sbb-color-granite);\n --sbb-form-field-label-color: light-dark(var(--sbb-color-granite), var(--sbb-color-smoke));\n --sbb-form-field-prefix-color: var(--sbb-color-granite);\n --sbb-form-field-prefix-color: light-dark(var(--sbb-color-granite), var(--sbb-color-storm));\n}\n\n:host(:where(:is(:state(focus),[state--focus]))) {\n --sbb-form-field-border-color: var(--sbb-border-color-3);\n --sbb-form-field-prefix-color: var(--sbb-color-3);\n --sbb-form-field-border-width: var(--sbb-border-width-2x);\n}\n\n:host(:where(:is(:state(focus),[state--focus]))[negative]) {\n --sbb-form-field-border-color: var(--sbb-border-color-3-negative);\n --sbb-form-field-prefix-color: var(--sbb-color-3-negative);\n}\n\n@media (forced-colors: active) {\n :host(:is(:state(focus),[state--focus])) {\n --sbb-form-field-border-color: Highlight;\n --sbb-form-field-prefix-color: Highlight;\n }\n}\n\n:host(:not(:where(:is(:state(has-error),[state--has-error]), :is(:state(has-hint),[state--has-hint])))) {\n --sbb-form-field-hint-padding-block-start: 0;\n}\n\n:host([floating-label]) {\n --sbb-select-placeholder-color: transparent;\n}\n@media (forced-colors: active) {\n :host([floating-label]) {\n --sbb-select-placeholder-color: Canvas;\n }\n}\n\n:host(:is(:not(:is(:state(slotted-label),[state--slotted-label])), [hidden-label])) {\n --sbb-form-field-label-size: 0rem;\n --_sbb-form-field-label-to-input-overlapping: 0rem;\n}\n\n:host(:where(:is(:state(input-element-sbb-slider),[state--input-element-sbb-slider]))) {\n --sbb-form-field-overflow: visible;\n}\n\n.sbb-form-field__space-wrapper {\n display: flex;\n flex-direction: column;\n height: 100%;\n}\n.sbb-form-field__space-wrapper::before {\n content: \"\";\n user-select: none;\n width: 0;\n height: 0;\n}\n\n.sbb-form-field__wrapper {\n display: flex;\n flex: 1;\n gap: var(--sbb-form-field-gap);\n padding-inline: var(--sbb-form-field-padding-inline);\n border-radius: var(--sbb-form-field-border-radius);\n min-height: var(--sbb-form-field-min-height);\n max-height: var(--sbb-form-field-max-height);\n background-color: var(--sbb-form-field-background-color);\n position: relative;\n}\n.sbb-form-field__wrapper::before {\n content: \"\";\n display: block;\n position: absolute;\n inset: 0;\n border: var(--sbb-form-field-border-width) var(--sbb-form-field-border-style) var(--sbb-form-field-border-color);\n border-radius: var(--sbb-form-field-border-radius);\n pointer-events: none;\n}\n:host(:where(:is(:state(focus),[state--focus]):is(:state(focus-origin-keyboard),[state--focus-origin-keyboard]))) .sbb-form-field__wrapper {\n outline-offset: var(--sbb-focus-outline-offset);\n outline: var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width);\n outline-offset: var(--sbb-form-field-outline-offset, var(--sbb-focus-outline-offset));\n}\n@media (forced-colors: none) {\n :host(:is([borderless], :is(:state(input-element-sbb-slider),[state--input-element-sbb-slider]))) .sbb-form-field__wrapper::before {\n border-color: transparent;\n }\n .sbb-form-field__wrapper::after {\n position: absolute;\n border-block-end: var(--sbb-border-width-1x) var(--sbb-form-field-border-style) var(--sbb-form-field-border-color);\n inset-inline: var(--sbb-form-field-border-block-end-inset-inline, var(--sbb-form-field-padding-inline));\n inset-block-end: 0;\n z-index: var(--sbb-form-field-focus-underline-z-index, initial);\n }\n :host(:where(:is(:state(focus),[state--focus]), :is(:state(disabled),[state--disabled]))[borderless]) .sbb-form-field__wrapper::after {\n content: \"\";\n }\n}\n\n::slotted(*[slot=prefix]) {\n color: var(--sbb-form-field-prefix-color);\n}\n\n::slotted(*[slot=prefix]),\n::slotted(*[slot=suffix]) {\n display: flex;\n min-width: var(--sbb-icon-svg-width);\n margin-block-start: calc((var(--sbb-form-field-min-height) - var(--sbb-size-icon-ui-small)) / 2);\n}\n\n:host(:where(:is(:state(empty),[state--empty]), :is(:state(disabled),[state--disabled]), :is(:state(readonly),[state--readonly]))) ::slotted(sbb-form-field-clear) {\n display: none;\n}\n\n:host(:is(:state(has-error),[state--has-error])) slot[name=hint] {\n display: none;\n}\n\n:host(:where(:is(:state(disabled),[state--disabled]), :is(:state(readonly),[state--readonly]))) ::slotted(sbb-form-field-text-counter) {\n display: none;\n}\n\n::slotted(sbb-datepicker-toggle) {\n padding-block-end: calc((var(--sbb-form-field-min-height) - var(--sbb-size-icon-ui-small)) / 2);\n}\n\n@media (forced-colors: active) {\n ::slotted(*[slot=suffix]) {\n color: var(--sbb-form-field-prefix-color);\n }\n}\n.sbb-form-field__select-input-icon {\n position: absolute;\n top: 50%;\n translate: 0 -50%;\n display: none;\n position: absolute;\n inset-inline-end: 0;\n margin-block-start: calc(-1 * var(--sbb-form-field-margin-block-start) / 2);\n pointer-events: none;\n color: var(--sbb-form-field-arrow-color);\n}\n:host(:is(:is(:state(input-element-select),[state--input-element-select]),\n:is(:state(input-element-sbb-select),[state--input-element-sbb-select]),\n:is(:state(explicit-input-element-select),[state--explicit-input-element-select]))) .sbb-form-field__select-input-icon {\n display: inline-block;\n}\n\n.sbb-form-field__input-container {\n display: flex;\n flex-direction: column;\n flex: 1 1 auto;\n position: relative;\n margin-block-start: var(--sbb-form-field-margin-block-start);\n min-width: 0;\n}\n\n.sbb-form-field__label-spacer {\n display: flex;\n height: calc(var(--sbb-form-field-label-text-size) * var(--sbb-typo-line-height-text));\n margin-block-end: var(--_sbb-form-field-spacer-margin-block-end);\n}\n\n:host(:not(:is(:state(slotted-label),[state--slotted-label]))) :is(.sbb-form-field__label, .sbb-form-field__label-spacer) {\n display: none;\n}\n:host([hidden-label]) :is(.sbb-form-field__label, .sbb-form-field__label-spacer) {\n border: 0;\n clip-path: rect(0 0 0 0);\n height: 1px;\n margin: -1px;\n overflow: hidden;\n padding: 0;\n position: absolute;\n white-space: nowrap;\n width: 1px;\n}\n\n.sbb-form-field__label {\n display: flex;\n max-width: 100%;\n cursor: var(--sbb-cursor-default);\n position: absolute;\n inset-block-start: 0;\n color: var(--sbb-form-field-label-color);\n font-size: var(--sbb-form-field-label-text-size);\n letter-spacing: var(--sbb-letter-spacing-text);\n}\n:host(:where(:is(:state(input-element-select),[state--input-element-select]), :is(:state(input-element-sbb-select),[state--input-element-sbb-select]))) .sbb-form-field__label {\n padding-inline-end: var(--sbb-form-field-select-inline-padding-end);\n}\n:host([floating-label]) .sbb-form-field__label {\n transform-origin: 0 0;\n pointer-events: none;\n backface-visibility: hidden;\n will-change: transform, font-size;\n transition-duration: var(--sbb-disable-animation-duration, var(--sbb-animation-duration-2x));\n transition-timing-function: var(--sbb-animation-easing);\n transition-property: transform, font-size;\n}\n:host([floating-label]:is(:not(:where(:is(:state(focus),[state--focus])):not(:where(:is(:state(input-element-sbb-select),[state--input-element-sbb-select]))),\n:where(:is(:state(has-popup-open),[state--has-popup-open]))),\n:where(:is(:state(readonly),[state--readonly]))):where(:is(:state(empty),[state--empty]))) .sbb-form-field__label {\n font-size: var(--sbb-form-field-input-text-size);\n transform: translateY(var(--_sbb-form-field-floating-label-transform));\n}\n@media (forced-colors: active) {\n :host(:where(:is(:state(input-element-textarea),[state--input-element-textarea]))) .sbb-form-field__label {\n z-index: 1;\n }\n}\n\n.sbb-form-field__label-ellipsis {\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n}\n\n.sbb-form-field__input {\n display: flex;\n flex: 1;\n align-items: start;\n}\n:host(:is(:is(:state(input-element-input),[state--input-element-input]),\n:is(:state(input-element-select),[state--input-element-select]),\n:is(:state(input-element-sbb-select),[state--input-element-sbb-select]),\n:is(:state(input-element-sbb-date-input),[state--input-element-sbb-date-input]),\n:is(:state(input-element-sbb-time-input),[state--input-element-sbb-time-input]))) .sbb-form-field__input {\n margin-block-end: var(--_sbb-form-field-input-margin-block-end);\n}\n\n.sbb-form-field__hint {\n display: flex;\n min-height: var(--sbb-form-field-hint-min-height);\n flex-direction: column;\n margin-inline-start: var(--sbb-form-field-padding-inline);\n margin-block-start: var(--sbb-form-field-hint-padding-block-start-override, var(--sbb-form-field-hint-padding-block-start));\n}\n";
|
|
60
60
|
|
|
61
61
|
//#endregion
|
|
62
62
|
//#region src/elements/form-field/form-field/form-field.component.ts
|
|
@@ -775,7 +775,7 @@ var SbbFormFieldClearElement = class extends SbbNegativeMixin(SbbButtonBaseEleme
|
|
|
775
775
|
|
|
776
776
|
//#endregion
|
|
777
777
|
//#region src/elements/form-field/hint/hint.scss?inline
|
|
778
|
-
var hint_default = ":host {\n --sbb-form-field-hint-font-size: var(--sbb-text-font-size-xxs);\n display: inline-block;\n color: var(--sbb-form-field-label-color);\n font-size: var(--sbb-form-field-hint-font-size);\n letter-spacing: var(--sbb-
|
|
778
|
+
var hint_default = ":host {\n --sbb-form-field-hint-font-size: var(--sbb-text-font-size-xxs);\n display: inline-block;\n color: var(--sbb-form-field-label-color);\n font-size: var(--sbb-form-field-hint-font-size);\n letter-spacing: var(--sbb-letter-spacing-text);\n line-height: var(--sbb-typo-line-height-texts);\n}\n\n:host([negative]) {\n --sbb-form-field-label-color: var(--sbb-color-5);\n}\n";
|
|
779
779
|
|
|
780
780
|
//#endregion
|
|
781
781
|
//#region src/elements/form-field/hint/hint.component.ts
|
|
@@ -7,7 +7,7 @@ import { SbbIconNameMixin } from "./icon.pure.js";
|
|
|
7
7
|
import { MutationController } from "@lit-labs/observers/mutation-controller.js";
|
|
8
8
|
|
|
9
9
|
//#region src/elements/header/common/header-action.scss?inline
|
|
10
|
-
var header_action_default = ":host {\n --sbb-header-action-active-border-margin-inline: var(--sbb-header-action-padding-inline);\n --sbb-header-action-min-width: var(--sbb-header-action-min-height);\n --sbb-header-action-transition-duration: var(\n --sbb-disable-animation-duration,\n var(--sbb-animation-duration-2x)\n );\n --_sbb-header-first-item-padding-shift: calc(-1 * var(--sbb-header-action-padding-inline));\n --sbb-header-first-item-margin-inline-start: calc(\n var(--_sbb-header-first-item-padding-shift) - var(--sbb-header-first-item-icon-shift)\n );\n display: inline-block;\n outline: none !important;\n}\n\n@media (any-hover: hover) {\n :host(:hover:not(:active, :is(:state(active),[state--active]))) {\n --sbb-header-action-background-color: var(--sbb-background-color-3);\n --sbb-header-action-translate-y: -0.0625rem;\n --sbb-header-action-background-inset: calc(var(--sbb-border-width-2x) * -1);\n }\n}\n@media (any-hover: hover) and (forced-colors: active) {\n :host(:hover:not(:active, :is(:state(active),[state--active]))) {\n --sbb-header-action-border-color: Highlight;\n }\n}\n:host(:is(:state(size-s),[state--size-s])) {\n --sbb-header-action-min-height: var(--sbb-header-action-min-height-s);\n --sbb-header-action-padding-inline: var(--sbb-header-action-padding-inline-s);\n}\n\n:host(:is(:state(size-m),[state--size-m])) {\n --sbb-header-action-min-height: var(--sbb-header-action-min-height-m);\n --sbb-header-action-padding-inline: var(--sbb-header-action-padding-inline-m);\n}\n\n:host(:is(:active, :is(:state(active),[state--active]))) {\n --sbb-header-action-background-color: var(--sbb-background-color-4);\n}\n@media (forced-colors: active) {\n :host(:is(:active, :is(:state(active),[state--active]))) {\n --sbb-header-action-border-color: Highlight;\n }\n}\n\n:host(.sbb-active) {\n --sbb-header-action-active-border-scale: 1;\n}\n@media (forced-colors: active) {\n :host(.sbb-active) {\n --sbb-header-action-border-color: Highlight;\n }\n}\n\n@media (forced-colors: active) {\n :host(:is(:state(button),[state--button])) {\n --sbb-header-action-color: ButtonText;\n }\n}\n\n:host(:not(:is(:state(slotted-icon),[state--slotted-icon]), :is(:state(has-icon-name),[state--has-icon-name]))) {\n --sbb-header-first-item-margin-inline-start: var(--_sbb-header-first-item-padding-shift);\n}\n\n.sbb-action-base {\n display: flex;\n position: relative;\n align-items: center;\n justify-content: center;\n color: var(--sbb-header-action-color);\n text-decoration: none;\n min-height: var(--sbb-header-action-min-height);\n min-width: var(--sbb-header-action-min-width);\n padding-inline: var(--sbb-header-action-padding-inline-zero, var(--sbb-header-action-padding-inline));\n cursor: var(--sbb-cursor-pointer);\n user-select: none;\n outline: none;\n}\n.sbb-action-base::before {\n position: absolute;\n content: \"\";\n inset: var(--sbb-header-action-background-inset, 0);\n border-radius: var(--sbb-border-radius-infinity);\n background-color: var(--sbb-header-action-background-color);\n transition-duration: var(--sbb-header-action-transition-duration);\n transition-timing-function: var(--sbb-header-action-transition-easing);\n transition-property: inset, background-color;\n border: var(--sbb-border-width-1x) solid var(--sbb-header-action-border-color);\n}\n@media (forced-colors: active) {\n .sbb-action-base::before {\n border-width: var(--sbb-border-width-2x);\n }\n}\n:host(:focus-visible) .sbb-action-base::before, .sbb-action-base:focus-visible::before {\n outline-offset: var(--sbb-focus-outline-offset);\n outline: var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width);\n}\n.sbb-action-base::after {\n content: \"\";\n position: absolute;\n border-block-end: var(--sbb-header-action-active-border-width) solid var(--sbb-header-action-active-border-color);\n inset: auto 0 calc(-1 * var(--sbb-header-action-active-border-width));\n margin-inline: var(--sbb-header-action-active-border-margin-inline);\n scale: var(--sbb-header-action-active-border-scale, 0);\n transition: scale var(--sbb-header-action-transition-easing) var(--sbb-header-action-transition-duration);\n}\n\n.sbb-header-action__wrapper {\n display: flex;\n align-items: center;\n gap: var(--sbb-header-action-gap);\n white-space: nowrap;\n transform: translateY(var(--sbb-header-action-translate-y, 0));\n transition: transform var(--sbb-header-action-transition-duration) var(--sbb-header-action-transition-easing);\n will-change: transform;\n max-width: 100%;\n}\n\n.sbb-header-action__icon {\n --sbb-icon-svg-stroke-color: currentcolor;\n --sbb-icon-svg-stroke-width: 1px;\n min-width: var(--sbb-header-action-icon-dimension);\n min-height: var(--sbb-header-action-icon-dimension);\n line-height: 0;\n}\n:host(:not(:is(:state(slotted-icon),[state--slotted-icon]), :is(:state(has-icon-name),[state--has-icon-name]))) .sbb-header-action__icon {\n display: none;\n}\n\n.sbb-header-action__text {\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n display: block;\n font-weight: bold;\n line-height: var(--sbb-typo-line-height-text);\n letter-spacing: var(--sbb-typo-letter-spacing-text);\n font-size: var(--sbb-text-font-size-xs);\n}\n:host(:not(:is(:state(slotted),[state--slotted]))) .sbb-header-action__text {\n display: none;\n}\n\n:host(:is(:is(:state(slotted-icon),[state--slotted-icon]), :is(:state(has-icon-name),[state--has-icon-name])):not(:is(:state(slotted),[state--slotted]))) {\n --_sbb-header-first-item-padding-shift: calc(\n -0.5 * (var(--sbb-header-action-min-width) - var(--sbb-header-action-icon-dimension))\n );\n --sbb-header-action-padding-inline-zero: 0;\n --sbb-header-action-active-border-margin-inline: calc(\n 0.5 * (100% - var(--sbb-size-icon-ui-small))\n );\n}\n:host(:is(:is(:state(slotted-icon),[state--slotted-icon]), :is(:state(has-icon-name),[state--has-icon-name])):not(:is(:state(slotted),[state--slotted]))) .sbb-header-action__text {\n border: 0;\n clip-path: rect(0 0 0 0);\n height: 1px;\n margin: -1px;\n overflow: hidden;\n padding: 0;\n position: absolute;\n white-space: nowrap;\n width: 1px;\n display: flex;\n}\n\n@media (max-width: calc(37.4375rem)) {\n :host([hide-label-below=small]:is(:is(:state(slotted-icon),[state--slotted-icon]), :is(:state(has-icon-name),[state--has-icon-name])):is(:state(slotted),[state--slotted])) {\n --_sbb-header-first-item-padding-shift: calc(\n -0.5 * (var(--sbb-header-action-min-width) - var(--sbb-header-action-icon-dimension))\n );\n --sbb-header-action-padding-inline-zero: 0;\n --sbb-header-action-active-border-margin-inline: calc(\n 0.5 * (100% - var(--sbb-size-icon-ui-small))\n );\n }\n :host([hide-label-below=small]:is(:is(:state(slotted-icon),[state--slotted-icon]), :is(:state(has-icon-name),[state--has-icon-name])):is(:state(slotted),[state--slotted])) .sbb-header-action__text {\n border: 0;\n clip-path: rect(0 0 0 0);\n height: 1px;\n margin: -1px;\n overflow: hidden;\n padding: 0;\n position: absolute;\n white-space: nowrap;\n width: 1px;\n display: flex;\n }\n}\n\n@media (max-width: calc(63.9375rem)) {\n :host([hide-label-below=large]:is(:is(:state(slotted-icon),[state--slotted-icon]), :is(:state(has-icon-name),[state--has-icon-name])):is(:state(slotted),[state--slotted])) {\n --_sbb-header-first-item-padding-shift: calc(\n -0.5 * (var(--sbb-header-action-min-width) - var(--sbb-header-action-icon-dimension))\n );\n --sbb-header-action-padding-inline-zero: 0;\n --sbb-header-action-active-border-margin-inline: calc(\n 0.5 * (100% - var(--sbb-size-icon-ui-small))\n );\n }\n :host([hide-label-below=large]:is(:is(:state(slotted-icon),[state--slotted-icon]), :is(:state(has-icon-name),[state--has-icon-name])):is(:state(slotted),[state--slotted])) .sbb-header-action__text {\n border: 0;\n clip-path: rect(0 0 0 0);\n height: 1px;\n margin: -1px;\n overflow: hidden;\n padding: 0;\n position: absolute;\n white-space: nowrap;\n width: 1px;\n display: flex;\n }\n}\n\n@media (max-width: calc(89.9375rem)) {\n :host([hide-label-below=ultra]:is(:is(:state(slotted-icon),[state--slotted-icon]), :is(:state(has-icon-name),[state--has-icon-name])):is(:state(slotted),[state--slotted])) {\n --_sbb-header-first-item-padding-shift: calc(\n -0.5 * (var(--sbb-header-action-min-width) - var(--sbb-header-action-icon-dimension))\n );\n --sbb-header-action-padding-inline-zero: 0;\n --sbb-header-action-active-border-margin-inline: calc(\n 0.5 * (100% - var(--sbb-size-icon-ui-small))\n );\n }\n :host([hide-label-below=ultra]:is(:is(:state(slotted-icon),[state--slotted-icon]), :is(:state(has-icon-name),[state--has-icon-name])):is(:state(slotted),[state--slotted])) .sbb-header-action__text {\n border: 0;\n clip-path: rect(0 0 0 0);\n height: 1px;\n margin: -1px;\n overflow: hidden;\n padding: 0;\n position: absolute;\n white-space: nowrap;\n width: 1px;\n display: flex;\n }\n}\n\n@media (max-width: calc(98.9375rem)) {\n :host([hide-label-below=ultra--max-content]:is(:is(:state(slotted-icon),[state--slotted-icon]), :is(:state(has-icon-name),[state--has-icon-name])):is(:state(slotted),[state--slotted])) {\n --_sbb-header-first-item-padding-shift: calc(\n -0.5 * (var(--sbb-header-action-min-width) - var(--sbb-header-action-icon-dimension))\n );\n --sbb-header-action-padding-inline-zero: 0;\n --sbb-header-action-active-border-margin-inline: calc(\n 0.5 * (100% - var(--sbb-size-icon-ui-small))\n );\n }\n :host([hide-label-below=ultra--max-content]:is(:is(:state(slotted-icon),[state--slotted-icon]), :is(:state(has-icon-name),[state--has-icon-name])):is(:state(slotted),[state--slotted])) .sbb-header-action__text {\n border: 0;\n clip-path: rect(0 0 0 0);\n height: 1px;\n margin: -1px;\n overflow: hidden;\n padding: 0;\n position: absolute;\n white-space: nowrap;\n width: 1px;\n display: flex;\n }\n}\n\n::slotted([slot=icon]:is(sbb-image, img)) {\n width: var(--sbb-header-action-icon-dimension);\n height: var(--sbb-header-action-icon-dimension);\n border-radius: var(--sbb-border-radius-infinity);\n}\n";
|
|
10
|
+
var header_action_default = ":host {\n --sbb-header-action-active-border-margin-inline: var(--sbb-header-action-padding-inline);\n --sbb-header-action-min-width: var(--sbb-header-action-min-height);\n --sbb-header-action-transition-duration: var(\n --sbb-disable-animation-duration,\n var(--sbb-animation-duration-2x)\n );\n --_sbb-header-first-item-padding-shift: calc(-1 * var(--sbb-header-action-padding-inline));\n --sbb-header-first-item-margin-inline-start: calc(\n var(--_sbb-header-first-item-padding-shift) - var(--sbb-header-first-item-icon-shift)\n );\n display: inline-block;\n outline: none !important;\n}\n\n@media (any-hover: hover) {\n :host(:hover:not(:active, :is(:state(active),[state--active]))) {\n --sbb-header-action-background-color: var(--sbb-background-color-3);\n --sbb-header-action-translate-y: -0.0625rem;\n --sbb-header-action-background-inset: calc(var(--sbb-border-width-2x) * -1);\n }\n}\n@media (any-hover: hover) and (forced-colors: active) {\n :host(:hover:not(:active, :is(:state(active),[state--active]))) {\n --sbb-header-action-border-color: Highlight;\n }\n}\n:host(:is(:state(size-s),[state--size-s])) {\n --sbb-header-action-min-height: var(--sbb-header-action-min-height-s);\n --sbb-header-action-padding-inline: var(--sbb-header-action-padding-inline-s);\n}\n\n:host(:is(:state(size-m),[state--size-m])) {\n --sbb-header-action-min-height: var(--sbb-header-action-min-height-m);\n --sbb-header-action-padding-inline: var(--sbb-header-action-padding-inline-m);\n}\n\n:host(:is(:active, :is(:state(active),[state--active]))) {\n --sbb-header-action-background-color: var(--sbb-background-color-4);\n}\n@media (forced-colors: active) {\n :host(:is(:active, :is(:state(active),[state--active]))) {\n --sbb-header-action-border-color: Highlight;\n }\n}\n\n:host(.sbb-active) {\n --sbb-header-action-active-border-scale: 1;\n}\n@media (forced-colors: active) {\n :host(.sbb-active) {\n --sbb-header-action-border-color: Highlight;\n }\n}\n\n@media (forced-colors: active) {\n :host(:is(:state(button),[state--button])) {\n --sbb-header-action-color: ButtonText;\n }\n}\n\n:host(:not(:is(:state(slotted-icon),[state--slotted-icon]), :is(:state(has-icon-name),[state--has-icon-name]))) {\n --sbb-header-first-item-margin-inline-start: var(--_sbb-header-first-item-padding-shift);\n}\n\n.sbb-action-base {\n display: flex;\n position: relative;\n align-items: center;\n justify-content: center;\n color: var(--sbb-header-action-color);\n text-decoration: none;\n min-height: var(--sbb-header-action-min-height);\n min-width: var(--sbb-header-action-min-width);\n padding-inline: var(--sbb-header-action-padding-inline-zero, var(--sbb-header-action-padding-inline));\n cursor: var(--sbb-cursor-pointer);\n user-select: none;\n outline: none;\n}\n.sbb-action-base::before {\n position: absolute;\n content: \"\";\n inset: var(--sbb-header-action-background-inset, 0);\n border-radius: var(--sbb-border-radius-infinity);\n background-color: var(--sbb-header-action-background-color);\n transition-duration: var(--sbb-header-action-transition-duration);\n transition-timing-function: var(--sbb-header-action-transition-easing);\n transition-property: inset, background-color;\n border: var(--sbb-border-width-1x) solid var(--sbb-header-action-border-color);\n}\n@media (forced-colors: active) {\n .sbb-action-base::before {\n border-width: var(--sbb-border-width-2x);\n }\n}\n:host(:focus-visible) .sbb-action-base::before, .sbb-action-base:focus-visible::before {\n outline-offset: var(--sbb-focus-outline-offset);\n outline: var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width);\n}\n.sbb-action-base::after {\n content: \"\";\n position: absolute;\n border-block-end: var(--sbb-header-action-active-border-width) solid var(--sbb-header-action-active-border-color);\n inset: auto 0 calc(-1 * var(--sbb-header-action-active-border-width));\n margin-inline: var(--sbb-header-action-active-border-margin-inline);\n scale: var(--sbb-header-action-active-border-scale, 0);\n transition: scale var(--sbb-header-action-transition-easing) var(--sbb-header-action-transition-duration);\n}\n\n.sbb-header-action__wrapper {\n display: flex;\n align-items: center;\n gap: var(--sbb-header-action-gap);\n white-space: nowrap;\n transform: translateY(var(--sbb-header-action-translate-y, 0));\n transition: transform var(--sbb-header-action-transition-duration) var(--sbb-header-action-transition-easing);\n will-change: transform;\n max-width: 100%;\n}\n\n.sbb-header-action__icon {\n --sbb-icon-svg-stroke-color: currentcolor;\n --sbb-icon-svg-stroke-width: 1px;\n min-width: var(--sbb-header-action-icon-dimension);\n min-height: var(--sbb-header-action-icon-dimension);\n line-height: 0;\n}\n:host(:not(:is(:state(slotted-icon),[state--slotted-icon]), :is(:state(has-icon-name),[state--has-icon-name]))) .sbb-header-action__icon {\n display: none;\n}\n\n.sbb-header-action__text {\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n display: block;\n font-weight: bold;\n line-height: var(--sbb-typo-line-height-text);\n letter-spacing: var(--sbb-letter-spacing-text);\n font-size: var(--sbb-text-font-size-xs);\n}\n:host(:not(:is(:state(slotted),[state--slotted]))) .sbb-header-action__text {\n display: none;\n}\n\n:host(:is(:is(:state(slotted-icon),[state--slotted-icon]), :is(:state(has-icon-name),[state--has-icon-name])):not(:is(:state(slotted),[state--slotted]))) {\n --_sbb-header-first-item-padding-shift: calc(\n -0.5 * (var(--sbb-header-action-min-width) - var(--sbb-header-action-icon-dimension))\n );\n --sbb-header-action-padding-inline-zero: 0;\n --sbb-header-action-active-border-margin-inline: calc(\n 0.5 * (100% - var(--sbb-size-icon-ui-small))\n );\n}\n:host(:is(:is(:state(slotted-icon),[state--slotted-icon]), :is(:state(has-icon-name),[state--has-icon-name])):not(:is(:state(slotted),[state--slotted]))) .sbb-header-action__text {\n border: 0;\n clip-path: rect(0 0 0 0);\n height: 1px;\n margin: -1px;\n overflow: hidden;\n padding: 0;\n position: absolute;\n white-space: nowrap;\n width: 1px;\n display: flex;\n}\n\n@media (max-width: calc(37.4375rem)) {\n :host([hide-label-below=small]:is(:is(:state(slotted-icon),[state--slotted-icon]), :is(:state(has-icon-name),[state--has-icon-name])):is(:state(slotted),[state--slotted])) {\n --_sbb-header-first-item-padding-shift: calc(\n -0.5 * (var(--sbb-header-action-min-width) - var(--sbb-header-action-icon-dimension))\n );\n --sbb-header-action-padding-inline-zero: 0;\n --sbb-header-action-active-border-margin-inline: calc(\n 0.5 * (100% - var(--sbb-size-icon-ui-small))\n );\n }\n :host([hide-label-below=small]:is(:is(:state(slotted-icon),[state--slotted-icon]), :is(:state(has-icon-name),[state--has-icon-name])):is(:state(slotted),[state--slotted])) .sbb-header-action__text {\n border: 0;\n clip-path: rect(0 0 0 0);\n height: 1px;\n margin: -1px;\n overflow: hidden;\n padding: 0;\n position: absolute;\n white-space: nowrap;\n width: 1px;\n display: flex;\n }\n}\n\n@media (max-width: calc(63.9375rem)) {\n :host([hide-label-below=large]:is(:is(:state(slotted-icon),[state--slotted-icon]), :is(:state(has-icon-name),[state--has-icon-name])):is(:state(slotted),[state--slotted])) {\n --_sbb-header-first-item-padding-shift: calc(\n -0.5 * (var(--sbb-header-action-min-width) - var(--sbb-header-action-icon-dimension))\n );\n --sbb-header-action-padding-inline-zero: 0;\n --sbb-header-action-active-border-margin-inline: calc(\n 0.5 * (100% - var(--sbb-size-icon-ui-small))\n );\n }\n :host([hide-label-below=large]:is(:is(:state(slotted-icon),[state--slotted-icon]), :is(:state(has-icon-name),[state--has-icon-name])):is(:state(slotted),[state--slotted])) .sbb-header-action__text {\n border: 0;\n clip-path: rect(0 0 0 0);\n height: 1px;\n margin: -1px;\n overflow: hidden;\n padding: 0;\n position: absolute;\n white-space: nowrap;\n width: 1px;\n display: flex;\n }\n}\n\n@media (max-width: calc(89.9375rem)) {\n :host([hide-label-below=ultra]:is(:is(:state(slotted-icon),[state--slotted-icon]), :is(:state(has-icon-name),[state--has-icon-name])):is(:state(slotted),[state--slotted])) {\n --_sbb-header-first-item-padding-shift: calc(\n -0.5 * (var(--sbb-header-action-min-width) - var(--sbb-header-action-icon-dimension))\n );\n --sbb-header-action-padding-inline-zero: 0;\n --sbb-header-action-active-border-margin-inline: calc(\n 0.5 * (100% - var(--sbb-size-icon-ui-small))\n );\n }\n :host([hide-label-below=ultra]:is(:is(:state(slotted-icon),[state--slotted-icon]), :is(:state(has-icon-name),[state--has-icon-name])):is(:state(slotted),[state--slotted])) .sbb-header-action__text {\n border: 0;\n clip-path: rect(0 0 0 0);\n height: 1px;\n margin: -1px;\n overflow: hidden;\n padding: 0;\n position: absolute;\n white-space: nowrap;\n width: 1px;\n display: flex;\n }\n}\n\n@media (max-width: calc(98.9375rem)) {\n :host([hide-label-below=ultra--max-content]:is(:is(:state(slotted-icon),[state--slotted-icon]), :is(:state(has-icon-name),[state--has-icon-name])):is(:state(slotted),[state--slotted])) {\n --_sbb-header-first-item-padding-shift: calc(\n -0.5 * (var(--sbb-header-action-min-width) - var(--sbb-header-action-icon-dimension))\n );\n --sbb-header-action-padding-inline-zero: 0;\n --sbb-header-action-active-border-margin-inline: calc(\n 0.5 * (100% - var(--sbb-size-icon-ui-small))\n );\n }\n :host([hide-label-below=ultra--max-content]:is(:is(:state(slotted-icon),[state--slotted-icon]), :is(:state(has-icon-name),[state--has-icon-name])):is(:state(slotted),[state--slotted])) .sbb-header-action__text {\n border: 0;\n clip-path: rect(0 0 0 0);\n height: 1px;\n margin: -1px;\n overflow: hidden;\n padding: 0;\n position: absolute;\n white-space: nowrap;\n width: 1px;\n display: flex;\n }\n}\n\n::slotted([slot=icon]:is(sbb-image, img)) {\n width: var(--sbb-header-action-icon-dimension);\n height: var(--sbb-header-action-icon-dimension);\n border-radius: var(--sbb-border-radius-infinity);\n}\n";
|
|
11
11
|
|
|
12
12
|
//#endregion
|
|
13
13
|
//#region src/elements/header/common/header-action-common.ts
|
|
@@ -100,7 +100,7 @@ var SbbHeaderButtonElement = class extends SbbHeaderActionCommonElementMixin(Sbb
|
|
|
100
100
|
|
|
101
101
|
//#endregion
|
|
102
102
|
//#region src/elements/header/header-environment/header-environment.scss?inline
|
|
103
|
-
var header_environment_default = ":host {\n position: absolute;\n inset-inline-end: 0;\n inset-block-start: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: var(--sbb-text-font-size-xxs);\n font-weight: bold;\n letter-spacing: var(--sbb-
|
|
103
|
+
var header_environment_default = ":host {\n position: absolute;\n inset-inline-end: 0;\n inset-block-start: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: var(--sbb-text-font-size-xxs);\n font-weight: bold;\n letter-spacing: var(--sbb-letter-spacing-text);\n}\n\n:host(:dir(rtl)) {\n --sbb-header-environment-rotate: -45deg;\n}\n\n:host(:is(:state(env-dev),[state--env-dev])) {\n --sbb-header-environment-background-color: var(--sbb-color-orange);\n}\n\n:host(:is(:state(env-edu),[state--env-edu])) {\n --sbb-header-environment-background-color: var(--sbb-color-green);\n}\n\n:host(:is(:state(env-int),[state--env-int])),\n:host(:is(:state(env-inte),[state--env-inte])) {\n --sbb-header-environment-background-color: var(--sbb-color-granite);\n}\n\n:host(:is(:state(env-loc),[state--env-loc])) {\n --sbb-header-environment-background-color: var(--sbb-color-pink);\n}\n\n:host(:is(:state(env-test),[state--env-test])) {\n --sbb-header-environment-background-color: var(--sbb-color-sky);\n}\n\n:host::before {\n content: \"\";\n border-block-start: var(--sbb-header-environment-size) solid var(--sbb-header-environment-background-color);\n border-inline-start: var(--sbb-header-environment-size) solid transparent;\n}\n\n.sbb-header-environment__text {\n position: absolute;\n color: var(--sbb-header-environment-color);\n rotate: var(--sbb-header-environment-rotate);\n padding-block-end: var(--sbb-spacing-fixed-4x);\n}\n";
|
|
104
104
|
|
|
105
105
|
//#endregion
|
|
106
106
|
//#region src/elements/header/header-environment/header-environment.component.ts
|
package/development/link.pure.js
CHANGED
|
@@ -28,7 +28,7 @@ const SbbLinkCommonElementMixin = (superClass) => {
|
|
|
28
28
|
|
|
29
29
|
//#endregion
|
|
30
30
|
//#region src/elements/link/common/block-link.scss?inline
|
|
31
|
-
var block_link_default = ":host {\n --sbb-link-color-hover: var(--sbb-color-primary125);\n --sbb-link-color-hover: light-dark(var(--sbb-color-primary125), var(--sbb-color-graphite));\n --sbb-link-color-active: var(--sbb-color-primary150);\n --sbb-link-color-active: light-dark(var(--sbb-color-primary150), var(--sbb-color-metal));\n --sbb-link-color-normal: var(--sbb-color-granite);\n --sbb-link-color-normal: light-dark(var(--sbb-color-granite), var(--sbb-color-white));\n --sbb-link-color-hover: var(--sbb-color-primary125);\n --sbb-link-color-hover: light-dark(var(--sbb-color-primary125), var(--sbb-color-cloud));\n --sbb-link-color-active: var(--sbb-color-primary150);\n --sbb-link-color-active: light-dark(var(--sbb-color-primary150), var(--sbb-color-silver));\n display: block;\n}\n\n:host([negative]) {\n --sbb-focus-outline-color: var(--sbb-focus-outline-color-dark);\n --sbb-link-color-normal: var(--sbb-color-1-negative);\n --sbb-link-color-hover: var(--sbb-color-4-negative);\n --sbb-link-color-active: var(--sbb-color-silver);\n}\n\n:host(.sbb-active) {\n --sbb-link-color-normal: var(--sbb-color-black);\n --sbb-link-color-normal: light-dark(var(--sbb-color-black), var(--sbb-color-cement));\n --sbb-link-text-decoration-line: underline;\n}\n\n:host(.sbb-active[negative]) {\n --sbb-link-color-normal: var(--sbb-color-cement);\n --sbb-link-text-decoration-line: underline;\n}\n\n:host([size=xs]) {\n --sbb-block-link-font-size: var(--sbb-text-font-size-xs);\n}\n\n:host([size=s]) {\n --sbb-block-link-font-size: var(--sbb-text-font-size-s);\n}\n\n:host([size=m]) {\n --sbb-block-link-font-size: var(--sbb-text-font-size-m);\n}\n\n.sbb-action-base {\n gap: var(--sbb-block-link-gap);\n font-size: var(--sbb-block-link-font-size);\n letter-spacing: var(--sbb-
|
|
31
|
+
var block_link_default = ":host {\n --sbb-link-color-hover: var(--sbb-color-primary125);\n --sbb-link-color-hover: light-dark(var(--sbb-color-primary125), var(--sbb-color-graphite));\n --sbb-link-color-active: var(--sbb-color-primary150);\n --sbb-link-color-active: light-dark(var(--sbb-color-primary150), var(--sbb-color-metal));\n --sbb-link-color-normal: var(--sbb-color-granite);\n --sbb-link-color-normal: light-dark(var(--sbb-color-granite), var(--sbb-color-white));\n --sbb-link-color-hover: var(--sbb-color-primary125);\n --sbb-link-color-hover: light-dark(var(--sbb-color-primary125), var(--sbb-color-cloud));\n --sbb-link-color-active: var(--sbb-color-primary150);\n --sbb-link-color-active: light-dark(var(--sbb-color-primary150), var(--sbb-color-silver));\n display: block;\n}\n\n:host([negative]) {\n --sbb-focus-outline-color: var(--sbb-focus-outline-color-dark);\n --sbb-link-color-normal: var(--sbb-color-1-negative);\n --sbb-link-color-hover: var(--sbb-color-4-negative);\n --sbb-link-color-active: var(--sbb-color-silver);\n}\n\n:host(.sbb-active) {\n --sbb-link-color-normal: var(--sbb-color-black);\n --sbb-link-color-normal: light-dark(var(--sbb-color-black), var(--sbb-color-cement));\n --sbb-link-text-decoration-line: underline;\n}\n\n:host(.sbb-active[negative]) {\n --sbb-link-color-normal: var(--sbb-color-cement);\n --sbb-link-text-decoration-line: underline;\n}\n\n:host([size=xs]) {\n --sbb-block-link-font-size: var(--sbb-text-font-size-xs);\n}\n\n:host([size=s]) {\n --sbb-block-link-font-size: var(--sbb-text-font-size-s);\n}\n\n:host([size=m]) {\n --sbb-block-link-font-size: var(--sbb-text-font-size-m);\n}\n\n.sbb-action-base {\n gap: var(--sbb-block-link-gap);\n font-size: var(--sbb-block-link-font-size);\n letter-spacing: var(--sbb-letter-spacing-text);\n line-height: var(--sbb-typo-line-height-text);\n}\n\n.sbb-link__icon {\n position: relative;\n height: calc(var(--sbb-typo-line-height-text) * 1em);\n width: var(--sbb-block-link-icon-size);\n flex: 0 0 auto;\n align-self: start;\n}\n:host(:not(:is(:state(slotted-icon),[state--slotted-icon]), :is(:state(has-icon-name),[state--has-icon-name]))) .sbb-link__icon {\n display: none;\n}\n:host([icon-placement=end]) .sbb-link__icon {\n order: 2;\n}\n.sbb-link__icon ::slotted([slot=icon]),\n.sbb-link__icon sbb-icon {\n --sbb-icon-svg-display: block;\n position: absolute;\n top: 50%;\n translate: 0 -50%;\n}\n";
|
|
32
32
|
|
|
33
33
|
//#endregion
|
|
34
34
|
//#region src/elements/link/common/block-link-common.ts
|
package/development/menu.pure.js
CHANGED
|
@@ -7,7 +7,7 @@ import { ref } from "lit/directives/ref.js";
|
|
|
7
7
|
import { SbbDividerElement } from "./divider.pure.js";
|
|
8
8
|
|
|
9
9
|
//#region src/elements/menu/common/menu-action.scss?inline
|
|
10
|
-
var menu_action_default = ":host {\n --sbb-menu-action-cursor: var(--sbb-cursor-pointer);\n outline: none !important;\n display: block;\n}\n\n@media (any-hover: hover) {\n :host(:is(:hover:not([disabled], :disabled, [disabled-interactive]), [aria-expanded=true])) {\n --sbb-menu-background-color: var(--sbb-color-iron);\n --sbb-menu-background-color: light-dark(var(--sbb-color-iron), var(--sbb-color-milk));\n --sbb-menu-action-forced-color-border-color: Highlight;\n }\n}\n\n:host(:is([disabled], :disabled, [disabled-interactive])) {\n --sbb-menu-action-cursor: var(--sbb-cursor-default);\n --sbb-menu-action-color: var(--sbb-color-graphite);\n --sbb-menu-action-color: light-dark(var(--sbb-color-graphite), var(--sbb-color-granite));\n --sbb-menu-action-forced-color-border-color: GrayText;\n pointer-events: none;\n cursor: var(--sbb-cursor-default);\n}\n@media (forced-colors: active) {\n :host(:is([disabled], :disabled, [disabled-interactive])) {\n --sbb-menu-action-color: GrayText;\n }\n}\n\n:host(:is(:state(sbb-menu-trigger),[state--sbb-menu-trigger])) {\n --sbb-menu-action-cursor: var(--sbb-cursor-default);\n}\n\n@media (forced-colors: active) {\n :host(:is(:state(button),[state--button])) {\n --sbb-menu-action-color: ButtonText;\n }\n}\n\n:host([sbb-badge]:not(:is(:state(has-icon-name),[state--has-icon-name]), :is(:state(slotted-icon),[state--slotted-icon])))::after {\n inset: 50% calc(100% - var(--sbb-menu-action-outer-horizontal-padding) - var(--sbb-menu-action-content-padding-inline) - 0.5 * var(--sbb-size-icon-ui-small)) auto auto !important;\n translate: 50% -50%;\n}\n\n:host([sbb-badge]:is(:is(:state(has-icon-name),[state--has-icon-name]), :is(:state(slotted-icon),[state--slotted-icon])))::after {\n inset: calc(var(--sbb-menu-action-outer-vertical-padding) + var(--sbb-menu-action-content-padding-block) + var(--sbb-badge-position-offset)) calc(100% - var(--sbb-menu-action-outer-horizontal-padding) - var(--sbb-menu-action-content-padding-inline) - var(--sbb-size-icon-ui-small) + var(--sbb-badge-position-offset)) auto auto !important;\n}\n\n:host([aria-controls]) {\n --sbb-menu-action-submenu-icon-display: flex;\n}\n\n:is(.sbb-menu-button, .sbb-menu-link) {\n text-decoration: none;\n display: block;\n width: 100%;\n color: var(--sbb-menu-action-color);\n padding: var(--sbb-menu-action-outer-vertical-padding) var(--sbb-menu-action-outer-horizontal-padding);\n cursor: var(--sbb-menu-action-cursor);\n outline: none;\n}\n\n.sbb-menu-action__content {\n display: flex;\n align-items: center;\n gap: var(--sbb-menu-action-gap);\n padding: var(--sbb-menu-action-content-padding-block) var(--sbb-menu-action-content-padding-inline);\n border-radius: var(--sbb-menu-action-border-radius);\n user-select: none;\n -webkit-tap-highlight-color: transparent;\n background-color: var(--sbb-menu-background-color);\n line-height: var(--sbb-typo-line-height-text);\n letter-spacing: var(--sbb-
|
|
10
|
+
var menu_action_default = ":host {\n --sbb-menu-action-cursor: var(--sbb-cursor-pointer);\n outline: none !important;\n display: block;\n}\n\n@media (any-hover: hover) {\n :host(:is(:hover:not([disabled], :disabled, [disabled-interactive]), [aria-expanded=true])) {\n --sbb-menu-background-color: var(--sbb-color-iron);\n --sbb-menu-background-color: light-dark(var(--sbb-color-iron), var(--sbb-color-milk));\n --sbb-menu-action-forced-color-border-color: Highlight;\n }\n}\n\n:host(:is([disabled], :disabled, [disabled-interactive])) {\n --sbb-menu-action-cursor: var(--sbb-cursor-default);\n --sbb-menu-action-color: var(--sbb-color-graphite);\n --sbb-menu-action-color: light-dark(var(--sbb-color-graphite), var(--sbb-color-granite));\n --sbb-menu-action-forced-color-border-color: GrayText;\n pointer-events: none;\n cursor: var(--sbb-cursor-default);\n}\n@media (forced-colors: active) {\n :host(:is([disabled], :disabled, [disabled-interactive])) {\n --sbb-menu-action-color: GrayText;\n }\n}\n\n:host(:is(:state(sbb-menu-trigger),[state--sbb-menu-trigger])) {\n --sbb-menu-action-cursor: var(--sbb-cursor-default);\n}\n\n@media (forced-colors: active) {\n :host(:is(:state(button),[state--button])) {\n --sbb-menu-action-color: ButtonText;\n }\n}\n\n:host([sbb-badge]:not(:is(:state(has-icon-name),[state--has-icon-name]), :is(:state(slotted-icon),[state--slotted-icon])))::after {\n inset: 50% calc(100% - var(--sbb-menu-action-outer-horizontal-padding) - var(--sbb-menu-action-content-padding-inline) - 0.5 * var(--sbb-size-icon-ui-small)) auto auto !important;\n translate: 50% -50%;\n}\n\n:host([sbb-badge]:is(:is(:state(has-icon-name),[state--has-icon-name]), :is(:state(slotted-icon),[state--slotted-icon])))::after {\n inset: calc(var(--sbb-menu-action-outer-vertical-padding) + var(--sbb-menu-action-content-padding-block) + var(--sbb-badge-position-offset)) calc(100% - var(--sbb-menu-action-outer-horizontal-padding) - var(--sbb-menu-action-content-padding-inline) - var(--sbb-size-icon-ui-small) + var(--sbb-badge-position-offset)) auto auto !important;\n}\n\n:host([aria-controls]) {\n --sbb-menu-action-submenu-icon-display: flex;\n}\n\n:is(.sbb-menu-button, .sbb-menu-link) {\n text-decoration: none;\n display: block;\n width: 100%;\n color: var(--sbb-menu-action-color);\n padding: var(--sbb-menu-action-outer-vertical-padding) var(--sbb-menu-action-outer-horizontal-padding);\n cursor: var(--sbb-menu-action-cursor);\n outline: none;\n}\n\n.sbb-menu-action__content {\n display: flex;\n align-items: center;\n gap: var(--sbb-menu-action-gap);\n padding: var(--sbb-menu-action-content-padding-block) var(--sbb-menu-action-content-padding-inline);\n border-radius: var(--sbb-menu-action-border-radius);\n user-select: none;\n -webkit-tap-highlight-color: transparent;\n background-color: var(--sbb-menu-background-color);\n line-height: var(--sbb-typo-line-height-text);\n letter-spacing: var(--sbb-letter-spacing-text);\n font-size: var(--sbb-text-font-size-xs);\n}\n:host(:focus-visible) .sbb-menu-action__content, :focus-visible .sbb-menu-action__content {\n outline-offset: var(--sbb-focus-outline-offset);\n outline: var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width);\n}\n@media (forced-colors: active) {\n .sbb-menu-action__content {\n border: var(--sbb-border-width-2x) solid var(--sbb-menu-action-forced-color-border-color);\n }\n}\n\n.sbb-menu-action__icon,\n.sbb-menu-submenu__icon {\n display: flex;\n min-width: var(--sbb-size-icon-ui-small);\n min-height: var(--sbb-size-icon-ui-small);\n}\n\n.sbb-menu-submenu__icon {\n display: var(--sbb-menu-action-submenu-icon-display, none);\n margin-inline-start: auto;\n}\n\n.sbb-menu-action__label {\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n}\n:host(:is([disabled], :disabled, [disabled-interactive])) .sbb-menu-action__label {\n text-decoration: line-through;\n}\n";
|
|
11
11
|
|
|
12
12
|
//#endregion
|
|
13
13
|
//#region src/elements/menu/common/menu-action-common.ts
|
|
@@ -2,7 +2,7 @@ import { html, unsafeCSS } from "lit";
|
|
|
2
2
|
import { SbbElement } from "./core.js";
|
|
3
3
|
|
|
4
4
|
//#region src/elements/message/message.scss?inline
|
|
5
|
-
var message_default = ":host {\n display: block;\n text-align: center;\n line-height: var(--sbb-typo-line-height-text);\n}\n\n::slotted(sbb-title[slot=title]) {\n margin: 0;\n}\n\n::slotted([slot=image]) {\n display: block;\n margin-inline: auto !important;\n margin-block: var(--sbb-message-image-margin-block) !important;\n width: 100%;\n}\n\n::slotted([slot=subtitle]) {\n color: var(--sbb-message-subtitle-color);\n font-size: var(--sbb-text-font-size-s);\n letter-spacing: var(--sbb-
|
|
5
|
+
var message_default = ":host {\n display: block;\n text-align: center;\n line-height: var(--sbb-typo-line-height-text);\n}\n\n::slotted(sbb-title[slot=title]) {\n margin: 0;\n}\n\n::slotted([slot=image]) {\n display: block;\n margin-inline: auto !important;\n margin-block: var(--sbb-message-image-margin-block) !important;\n width: 100%;\n}\n\n::slotted([slot=subtitle]) {\n color: var(--sbb-message-subtitle-color);\n font-size: var(--sbb-text-font-size-s);\n letter-spacing: var(--sbb-letter-spacing-text);\n margin: 0;\n}\n\n::slotted([slot=legend]) {\n line-height: var(--sbb-typo-line-height-text);\n letter-spacing: var(--sbb-letter-spacing-text);\n font-size: var(--sbb-text-font-size-xs);\n padding: 0;\n color: var(--sbb-color-granite);\n color: light-dark(var(--sbb-color-granite), var(--sbb-color-cement));\n margin-block: var(--sbb-message-legend-margin-block);\n}\n\n::slotted([slot=action]) {\n margin-block: var(--sbb-message-action-margin-block);\n}\n";
|
|
6
6
|
|
|
7
7
|
//#endregion
|
|
8
8
|
//#region src/elements/message/message.component.ts
|
|
@@ -134,7 +134,7 @@ let SbbMiniCalendarDayElement = (() => {
|
|
|
134
134
|
|
|
135
135
|
//#endregion
|
|
136
136
|
//#region src/elements/mini-calendar/mini-calendar-month/mini-calendar-month.scss?inline
|
|
137
|
-
var mini_calendar_month_default = ":host {\n display: inline-block;\n}\n\n:host(:is(:state(show-year),[state--show-year])) {\n --sbb-mini-calendar-month-visibilty-year: visible;\n}\n\n:host(:is(:state(orientation-horizontal),[state--orientation-horizontal])) {\n --sbb-mini-calendar-month-grid-auto-flow: row;\n --sbb-mini-calendar-month-height: 3rem;\n --sbb-mini-calendar-month-grid-template-rows: none;\n --sbb-mini-calendar-month-grid-template-columns: repeat(7, 1fr);\n}\n:host(:is(:state(orientation-horizontal),[state--orientation-horizontal])) ::slotted(sbb-mini-calendar-day:first-child) {\n grid-column-start: var(--sbb-mini-calendar-month-offset);\n}\n\n:host(:is(:state(orientation-vertical),[state--orientation-vertical])) {\n --sbb-mini-calendar-month-grid-auto-flow: column;\n --sbb-mini-calendar-month-height: auto;\n --sbb-mini-calendar-month-grid-template-rows: repeat(7, 1fr);\n --sbb-mini-calendar-month-grid-template-columns: none;\n}\n:host(:is(:state(orientation-vertical),[state--orientation-vertical])) ::slotted(sbb-mini-calendar-day:first-child) {\n grid-row-start: var(--sbb-mini-calendar-month-offset);\n}\n\n.sbb-mini-calendar-month-wrapper {\n display: grid;\n height: var(--sbb-mini-calendar-month-height);\n grid-auto-flow: var(--sbb-mini-calendar-month-grid-auto-flow);\n grid-auto-rows: 0.5rem;\n grid-template-columns: var(--sbb-mini-calendar-month-grid-template-columns);\n grid-template-rows: var(--sbb-mini-calendar-month-grid-template-rows);\n}\n\n.sbb-mini-calendar-month-label-year,\n.sbb-mini-calendar-month-label-month {\n font-size: var(--sbb-text-font-size-xxs);\n letter-spacing: var(--sbb-
|
|
137
|
+
var mini_calendar_month_default = ":host {\n display: inline-block;\n}\n\n:host(:is(:state(show-year),[state--show-year])) {\n --sbb-mini-calendar-month-visibilty-year: visible;\n}\n\n:host(:is(:state(orientation-horizontal),[state--orientation-horizontal])) {\n --sbb-mini-calendar-month-grid-auto-flow: row;\n --sbb-mini-calendar-month-height: 3rem;\n --sbb-mini-calendar-month-grid-template-rows: none;\n --sbb-mini-calendar-month-grid-template-columns: repeat(7, 1fr);\n}\n:host(:is(:state(orientation-horizontal),[state--orientation-horizontal])) ::slotted(sbb-mini-calendar-day:first-child) {\n grid-column-start: var(--sbb-mini-calendar-month-offset);\n}\n\n:host(:is(:state(orientation-vertical),[state--orientation-vertical])) {\n --sbb-mini-calendar-month-grid-auto-flow: column;\n --sbb-mini-calendar-month-height: auto;\n --sbb-mini-calendar-month-grid-template-rows: repeat(7, 1fr);\n --sbb-mini-calendar-month-grid-template-columns: none;\n}\n:host(:is(:state(orientation-vertical),[state--orientation-vertical])) ::slotted(sbb-mini-calendar-day:first-child) {\n grid-row-start: var(--sbb-mini-calendar-month-offset);\n}\n\n.sbb-mini-calendar-month-wrapper {\n display: grid;\n height: var(--sbb-mini-calendar-month-height);\n grid-auto-flow: var(--sbb-mini-calendar-month-grid-auto-flow);\n grid-auto-rows: 0.5rem;\n grid-template-columns: var(--sbb-mini-calendar-month-grid-template-columns);\n grid-template-rows: var(--sbb-mini-calendar-month-grid-template-rows);\n}\n\n.sbb-mini-calendar-month-label-year,\n.sbb-mini-calendar-month-label-month {\n font-size: var(--sbb-text-font-size-xxs);\n letter-spacing: var(--sbb-letter-spacing-text);\n color: var(--sbb-mini-calendar-month-label-color);\n}\n\n.sbb-mini-calendar-month-label-year {\n visibility: var(--sbb-mini-calendar-month-visibilty-year);\n}\n";
|
|
138
138
|
|
|
139
139
|
//#endregion
|
|
140
140
|
//#region src/elements/mini-calendar/mini-calendar-month/mini-calendar-month.component.ts
|