Mirrors/tabler
1
0
Fork 0
mirror of https://github.com/tabler/tabler.git synced 2026-08-29 21:31:28 +04:00
Code Issues Projects Releases Wiki Activity

Extract hardcoded rem values into SCSS variables (#2745)

Browse Source 
Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
This commit is contained in:
Bartosz-Do
2026-08-01 19:06:39 +02:00
committed by GitHub
co-authored by StarDev
parent 832470183c
commit a508bb6c3e
42 changed files with 714 additions and 270 deletions
Download Patch File Download Diff File Expand all files Collapse all files
core/scss/_variables.scss
+240
View File
@@ -394,6 +394,11 @@ $font-family-code: var(--#{$prefix}font-monospace) !default;
// Icons
$icon-stroke-width: 1.5 !default;
$icon-size: 1.25rem !default;
$icon-inline-size: 1rem !default;
$icon-inline-vertical-align: -0.2rem !default;
$icon-sm-size: 1rem !default;
$icon-md-size: 2.5rem !default;
$icon-lg-size: 3.5rem !default;
$font-size-75: 0.75rem !default;
$font-size-100: 0.875rem !default;
@@ -829,6 +834,10 @@ $avatar-status-size: 0.75rem !default;
$avatar-font-size: 1rem !default;
$avatar-icon-size: 1.5rem !default;
$avatar-brand-size: 1.25rem !default;
$avatar-upload-icon-size: 1.5rem !default;
$avatar-upload-text-margin-top: 0.25rem !default;
$avatar-cover-ring-width: 0.25rem !default;
$avatar-brand-offset: -2px !default;
$avatar-bg: var(--#{$prefix}bg-surface-secondary) !default;
$avatar-sizes: (
'xxs': (
@@ -1065,6 +1074,10 @@ $alert-shadow: rgba($dark, 0.04) 0 2px 4px 0 !default;
$alert-bg-scale: -80% !default; // Deprecated in v5.2.0, to be removed in v6
$alert-border-scale: -70% !default; // Deprecated in v5.2.0, to be removed in v6
$alert-color-scale: 40% !default; // Deprecated in v5.2.0, to be removed in v6
$alert-heading-margin-bottom: 0.25rem !default;
$alert-icon-size: 1.25rem !default;
$alert-padding-inline-end: 3rem !default;
$alert-gap: 1rem !default;
// Breadcrumb
$breadcrumb-font-size: null !default;
@@ -1100,6 +1113,10 @@ $badge-border-radius: var(--#{$prefix}border-radius) !default;
$badge-empty-size: 0.5rem !default;
$badge-color: var(--#{$prefix}secondary) !default;
$badge-bg-color: var(--#{$prefix}bg-surface-secondary) !default;
$badge-gap: 0.25rem !default;
$badge-padding-x-sm: 0.25rem !default;
$badge-padding-y-lg: 0.25rem !default;
$badge-padding-x-lg: 0.5rem !default;
// Buttons + Forms
$input-btn-border-width: var(--#{$prefix}border-width) !default;
@@ -1151,6 +1168,9 @@ $btn-link-focus-shadow-rgb: to-rgb(color.mix(color-contrast($link-color), $link-
$btn-border-radius: var(--#{$prefix}border-radius) !default;
$btn-border-radius-sm: var(--#{$prefix}border-radius-sm) !default;
$btn-border-radius-lg: var(--#{$prefix}border-radius-lg) !default;
$btn-floating-offset: 1rem !default;
$btn-pill-icon-padding-y: 0.375rem !default;
$btn-pill-icon-padding-x: 15px !default;
$btn-transition:
color 0.15s ease-in-out,
@@ -1267,11 +1287,39 @@ $card-stamp-opacity: 0.2 !default;
$card-ribbon-margin: 0.25rem !default;
$card-ribbon-border-radius: var(--#{$prefix}border-radius) !default;
$card-ribbon-font-size: $h6-font-size !default;
$card-ribbon-icon-size: $icon-size !default;
$card-header-tabs-bg: var(--#{$prefix}bg-surface-tertiary) !default;
$cards-grid-gap: var(--#{$prefix}page-padding) !default;
$cards-grid-breakpoint: lg !default;
$card-stamp-size: 7rem !default;
$card-stamp-size-lg: 13rem !default;
$card-stacked-offset: 0.25rem !default;
$card-actions-gutter: 0.5rem !default;
$card-header-pills-margin: 0.5rem !default;
$card-progress-height: 0.25rem !default;
$card-title-margin-bottom: 1rem !default;
$card-title-line-height: 1.5rem !default;
$card-subtitle-margin-start: 0.25rem !default;
$card-body-padding-sm: 1rem !default;
$card-body-padding-md: 2.5rem !default;
$card-body-padding-lg: 2rem !default;
$card-body-padding-lg-up: 4rem !default;
$card-options-top: 1.5rem !default;
$card-options-inset: 0.75rem !default;
$card-options-link-min-width: 1rem !default;
$card-options-link-margin-start: 0.25rem !default;
$card-avatar-height: 3.5rem !default;
$card-avatar-ring-width: 0.25rem !default;
$ribbon-offset: 0.75rem !default;
$ribbon-padding-y: 0.25rem !default;
$ribbon-padding-x: 0.75rem !default;
$ribbon-min-size: 2rem !default;
$ribbon-top-width: 2rem !default;
$ribbon-top-padding-y: 0.5rem !default;
$ribbon-bookmark-border-size: 1rem !default;
$ribbon-bookmark-notch-width: 0.5rem !default;
// Accordion
$accordion-padding-y: 1rem !default;
@@ -1282,6 +1330,7 @@ $accordion-border-width: var(--#{$prefix}border-width) !default;
$accordion-border-color: var(--#{$prefix}border-color-translucent) !default;
$accordion-border-radius: var(--#{$prefix}border-radius) !default;
$accordion-inner-border-radius: subtract($accordion-border-radius, $accordion-border-width) !default;
$accordion-btn-toggle-width: $icon-size !default;
$accordion-body-padding-y: $accordion-padding-y !default;
$accordion-body-padding-x: $accordion-padding-x !default;
@@ -1306,6 +1355,9 @@ $accordion-icon-transform: rotate(-180deg) !default;
$accordion-button-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='#{$accordion-icon-color}' stroke-linecap='round' stroke-linejoin='round'><path d='m2 5 6 6 6-6'/></svg>") !default;
$accordion-button-active-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='#{$accordion-icon-active-color}' stroke-linecap='round' stroke-linejoin='round'><path d='m2 5 6 6 6-6'/></svg>") !default;
$accordion-btn-gap: 0.75rem !default;
$accordion-header-gap: 1rem !default;
$accordion-tabs-gap: 0.75rem !default;
// Carousel
@@ -1342,6 +1394,7 @@ $carousel-transition: transform $carousel-transition-duration ease-in-out !defau
$carousel-dark-indicator-active-bg: $black !default; // Deprecated in v5.3.4
$carousel-dark-caption-color: $black !default; // Deprecated in v5.3.4
$carousel-dark-control-icon-filter: invert(1) grayscale(100) !default; // Deprecated in v5.3.4
$carousel-indicators-vertical-margin-inline-end: 1rem !default;
// Close
$btn-close-width: 1em !default;
@@ -1361,6 +1414,18 @@ $btn-close-white-filter: invert(1) grayscale(100%) brightness(200%) !default; //
// Datagrid
$datagrid-padding: 1.5rem !default;
$datagrid-item-width: 15rem !default;
$datagrid-title-margin-bottom: 0.25rem !default;
// Empty
$empty-padding: 1rem !default;
$empty-padding-md: 3rem !default;
$empty-icon-size: 3rem !default;
$empty-icon-margin-bottom: 1rem !default;
$empty-img-margin-bottom: 2rem !default;
$empty-header-margin-bottom: 1rem !default;
$empty-header-font-size: 4rem !default;
$empty-title-margin-bottom: 0.5rem !default;
$empty-action-margin-top: 1.5rem !default;
// Dropdown
$dropdown-min-width: 11rem !default;
@@ -1395,6 +1460,13 @@ $dropdown-header-padding: $dropdown-header-padding-y $dropdown-header-padding-x
$dropdown-max-width: 25rem !default;
$dropdown-scrollable-height: 13rem !default;
$dropdown-item-gap: 0.5rem !default;
$dropdown-header-padding-bottom: 0.25rem !default;
$dropdown-menu-columns-gap: 0.25rem !default;
$dropdown-arrow-offset: 0.25rem !default;
$dropdown-arrow-inset: 0.75rem !default;
$dropdown-dropend-offset: 0.25rem !default;
$dropdown-menu-card-min-width: 20rem !default;
// Dropdown dark
$dropdown-dark-color: $gray-300 !default;
@@ -1475,6 +1547,8 @@ $modal-fade-transform: translate(0, -1rem) !default;
$modal-show-transform: none !default;
$modal-transition: transform 0.3s ease-out !default;
$modal-scale-transform: scale(1.02) !default;
$modal-body-title-margin-bottom: 1rem !default;
$modal-footer-padding-y: 0.75rem !default;
$modal-status-size: $border-width-wide !default;
@@ -1519,6 +1593,10 @@ $nav-tabs-bg: var(--#{$prefix}bg-surface-tertiary) !default;
$nav-underline-gap: 1rem !default;
$nav-underline-border-width: 0.125rem !default;
$nav-underline-link-active-color: var(--#{$prefix}emphasis-color) !default;
$nav-vertical-nested-margin-start: 1.25rem !default;
$nav-vertical-nested-padding-start: 0.5rem !default;
$nav-link-toggle-padding-x: 0.25rem !default;
$nav-link-icon-margin-end: 0.5rem !default;
// Navbar
$navbar-height: 3.5rem !default;
@@ -1656,16 +1734,35 @@ $pagination-transition:
$pagination-border-radius-sm: var(--#{$prefix}border-radius-sm) !default;
$pagination-border-radius-lg: var(--#{$prefix}border-radius-lg) !default;
$pagination-gap: 0.25rem !default;
$pagination-link-min-width: 2rem !default;
$page-text-padding-x: 0.5rem !default;
$page-item-subtitle-margin-bottom: 2px !default;
$page-item-subtitle-font-size: 12px !default;
// Statuses
$status-dot-size: 0.5rem !default;
$status-height: 1.5rem !default;
$status-icon-size: $icon-size !default;
$status-padding-y: 0.25rem !default;
$status-padding-x: 0.75rem !default;
$status-gap: 0.5rem !default;
$status-indicator-size: 2.5rem !default;
$status-circle-size: 0.75rem !default;
// Steps
$steps-border-width: 2px !default;
$steps-color: var(--#{$prefix}primary) !default;
$steps-inactive-color: var(--#{$prefix}border-color) !default;
$steps-margin: 2rem 0 !default;
$steps-dot-size: 0.5rem !default;
$step-item-min-height: 1rem !default;
$steps-counter-dot-size: 1.5rem !default;
$steps-vertical-padding-start: 1rem !default;
$steps-vertical-item-gap: 1rem !default;
$steps-vertical-connector-gap: 1rem !default;
$steps-dot-offset: 6px !default;
$steps-dot-offset-counter: -2px !default;
// Spinner
$spinner-width: 1.5rem !default;
@@ -1735,6 +1832,8 @@ $table-variants: (
$table-sort-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' width='16' height='16' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1'><path d='M5 7l3 -3l3 3'/><path d='M5 10l3 3l3 -3'/></svg>") !default;
$table-sort-asc-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' width='16' height='16'><path fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1' d='M5 7l3 3l3 -3'/></svg>") !default;
$table-sort-desc-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' width='16' height='16'><path fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1' d='M5 10l3 -3l3 3'/></svg>") !default;
$table-sort-icon-size: 1rem !default;
$table-sort-icon-margin-start: 0.25rem !default;
// Toasts
$toast-max-width: 350px !default;
@@ -1757,6 +1856,7 @@ $toast-header-border-color: $toast-border-color !default;
$tracking-height: 1.5rem !default;
$tracking-gap-width: 0.125rem !default;
$tracking-border-radius: var(--#{$prefix}border-radius) !default;
$tracking-block-min-width: 0.25rem !default;
// Progress
$progress-height: 0.5rem !default;
@@ -1768,6 +1868,15 @@ $progress-bar-color: $white !default;
$progress-bar-bg: var(--#{$prefix}primary) !default;
$progress-bar-animation-timing: 1s linear infinite !default;
$progress-bar-transition: width 0.6s ease !default;
$progress-height-sm: 0.25rem !default;
$progress-height-lg: 0.75rem !default;
$progress-height-xl: 1rem !default;
$progressbg-padding-y: 0.25rem !default;
$progressbg-padding-x: 0.5rem !default;
$progressbg-value-padding-start: 2rem !default;
$progress-separated-ring-width: 2px !default;
$progress-steps-gap: 0.25rem !default;
$progress-steps-item-height: 0.25rem !default;
// List Group
$list-group-color: var(--#{$prefix}body-color) !default;
@@ -1793,6 +1902,7 @@ $list-group-action-color: inherit !default;
$list-group-action-hover-color: var(--#{$prefix}emphasis-color) !default;
$list-group-action-active-color: var(--#{$prefix}body-color) !default;
$list-group-action-active-bg: var(--#{$prefix}secondary-bg) !default;
$list-group-header-padding-y: 0.5rem !default;
// Forms
$input-disabled-bg: var(--#{$prefix}bg-forms-disabled) !default;
@@ -2034,6 +2144,136 @@ $offcanvas-box-shadow: $modal-content-box-shadow-xs !default;
$offcanvas-backdrop-bg: $backdrop-bg !default;
$offcanvas-backdrop-opacity: $modal-backdrop-opacity !default;
$offcanvas-border-color: var(--#{$prefix}border-color) !default;
$offcanvas-narrow-width: 20rem !default;
// Chat
$chat-bubbles-gap: 1rem !default;
$chat-bubble-padding: 1rem !default;
$chat-bubble-title-margin-bottom: 0.25rem !default;
// Toolbar
$toolbar-gutter: 0.5rem !default;
// Stars
$stars-gap: 0.25rem !default;
// Tags
$tag-height: 1.5rem !default;
$tag-padding-x: 0.5rem !default;
$tag-gap: 0.5rem !default;
$tag-close-margin-end: -0.25rem !default;
$tag-close-margin-start: -0.125rem !default;
$tag-close-size: 1rem !default;
$tag-close-font-size: 0.5rem !default;
$tag-badge-padding-y: 0.125rem !default;
$tag-badge-padding-x: 0.25rem !default;
$tag-badge-margin-end: -0.25rem !default;
$tag-addon-margin-start: -0.25rem !default;
$tag-icon-margin-end: -0.125rem !default;
$tag-icon-size: 1rem !default;
$tag-check-size: 1rem !default;
// Segmented nav
$nav-segmented-height: 2.5rem !default;
$nav-segmented-padding: 2px !default;
$nav-segmented-radius: 6px !default;
$nav-segmented-gap: 0.25rem !default;
$nav-segmented-link-gap: 0.25rem !default;
$nav-segmented-link-padding-x: 0.75rem !default;
$nav-segmented-link-icon-size: 1.25rem !default;
$nav-segmented-icon-margin: -0.25rem !default;
$nav-segmented-height-sm: 2rem !default;
$nav-segmented-radius-sm: 4px !default;
$nav-segmented-link-padding-x-sm: 0.5rem !default;
$nav-segmented-link-gap-sm: 0.25rem !default;
$nav-segmented-link-icon-size-sm: 1rem !default;
$nav-segmented-height-lg: 3rem !default;
$nav-segmented-radius-lg: 8px !default;
$nav-segmented-link-padding-x-lg: 1rem !default;
$nav-segmented-link-gap-lg: 0.5rem !default;
$nav-segmented-link-icon-size-lg: 1.5rem !default;
// Charts
$chart-min-height: 10rem !default;
$chart-height-sm: 2.5rem !default;
$chart-height-lg: 15rem !default;
$chart-height-square: 5.75rem !default;
$chart-sparkline-width: 4rem !default;
$chart-sparkline-height: 2.5rem !default;
$chart-sparkline-height-sm: 1.5rem !default;
$chart-sparkline-width-square: 2.5rem !default;
$chart-sparkline-width-wide: 6rem !default;
$chart-sparkline-label-icon-size: 1rem !default;
// Patterns
$pattern-size: 0.5rem !default;
$pattern-size-sm: 0.25rem !default;
$pattern-size-md: 0.5rem !default;
$pattern-size-lg: 0.75rem !default;
$pattern-size-xl: 1rem !default;
// Markdown
$markdown-heading-margin-top: 2.5rem !default;
$markdown-blockquote-margin-y: 1.5rem !default;
$markdown-blockquote-padding-y: 0.5rem !default;
$markdown-blockquote-padding-x: 1.5rem !default;
$markdown-pre-max-height: 20rem !default;
// Calendar
$calendar-padding-y: 0.5rem !default;
$calendar-date-padding: 0.2rem !default;
$calendar-date-size: 1.4rem !default;
// HR text
$hr-text-gap: 0.5rem !default;
$hr-text-spaceless-margin-y: -0.5rem !default;
// Grid row gutters
$grid-row-gutter-sm: 0.375rem !default;
$grid-row-gutter-md: 1.5rem !default;
$grid-row-gutter-lg: 3rem !default;
// Type / callout
$blockquote-padding: 1rem !default;
$blockquote-paragraph-margin-bottom: 1rem !default;
$list-padding-start: 1.5rem !default;
$steps-padding: 2rem !default;
$steps-item-size: 1.5rem !default;
$steps-margin-start: 1rem !default;
$steps-margin-bottom: 2rem !default;
$steps-heading-margin-top: 2.5rem !default;
$callout-margin-bottom: 1.5rem !default;
$callout-padding-y: 0.5rem !default;
$callout-padding-x: 1rem !default;
// Form layout
$form-label-required-gap: 0.25rem !default;
$form-hint-margin-top: 0.25rem !default;
$form-hint-label-offset: -0.25rem !default;
$form-hint-control-margin-top: 0.5rem !default;
$form-footer-margin-top: 2rem !default;
$form-fieldset-padding: 1rem !default;
$form-fieldset-margin-bottom: 1rem !default;
$form-help-size: 1.125rem !default;
$form-help-font-size: 0.75rem !default;
$form-control-mobile-font-size: 1rem !default;
$form-check-label-required-gap: 0.25rem !default;
$form-check-description-margin-top: 0.25rem !default;
$form-switch-lg-padding-start: 3.5rem !default;
$form-switch-lg-min-height: 1.5rem !default;
$form-switch-lg-height: 1.5rem !default;
$form-switch-lg-width: 2.75rem !default;
$form-switch-lg-bg-size: 1.5rem !default;
$form-switch-lg-input-offset: -3.5rem !default;
$form-switch-lg-label-padding-top: 0.125rem !default;
$input-icon-padding-end: 2.5rem !default;
$input-icon-padding-start: 2.5rem !default;
$input-icon-addon-width: 2.5rem !default;
$form-colorinput-size: 1.5rem !default;
$form-imagecheck-check-offset: 0.25rem !default;
$form-imagecheck-caption-padding: 0.25rem !default;
$form-selectgroup-gap: 0.5rem !default;
$form-selectgroup-icon-margin-x: -0.25rem !default;
// Placeholders
$placeholder-opacity-min: 0.1 !default;
core/scss/ui/_accordion.scss
+6 -4
View File
@@ -10,12 +10,14 @@
--#{$prefix}accordion-active-color: #{$accordion-button-active-color};
--#{$prefix}accordion-btn-color: var(--#{$prefix}accordion-color);
--#{$prefix}accordion-btn-bg: #{$accordion-button-bg};
--#{$prefix}accordion-btn-toggle-width: 1.25rem;
--#{$prefix}accordion-btn-toggle-width: #{$accordion-btn-toggle-width};
--#{$prefix}accordion-btn-padding-x: var(--#{$prefix}accordion-padding-x);
--#{$prefix}accordion-btn-padding-y: #{$accordion-button-padding-y};
--#{$prefix}accordion-btn-font-weight: var(--#{$prefix}font-weight-medium);
--#{$prefix}accordion-body-padding-x: var(--#{$prefix}accordion-padding-x);
--#{$prefix}accordion-body-padding-y: #{$accordion-body-padding-y};
--#{$prefix}accordion-btn-gap: #{$accordion-btn-gap};
--#{$prefix}accordion-header-gap: #{$accordion-header-gap};
display: flex;
flex-direction: column;
@@ -34,7 +36,7 @@
border: 0;
font-size: inherit;
font-weight: var(--#{$prefix}accordion-btn-font-weight);
gap: 0.75rem;
gap: var(--#{$prefix}accordion-btn-gap);
&:not(.collapsed) {
border-bottom-color: transparent;
@@ -47,7 +49,7 @@
margin: 0;
position: relative;
display: flex;
gap: 1rem;
gap: var(--#{$prefix}accordion-header-gap);
align-items: center;
width: 100%;
color: var(--#{$prefix}accordion-btn-color);
@@ -163,7 +165,7 @@
}
.accordion-tabs {
--#{$prefix}accordion-gap: 0.75rem;
--#{$prefix}accordion-gap: #{$accordion-tabs-gap};
> .accordion-item {
border: var(--#{$prefix}border-width) solid var(--#{$prefix}accordion-border-color);
core/scss/ui/_alerts.scss
+9 -5
View File
@@ -13,6 +13,10 @@
--#{$prefix}alert-border-radius: var(--#{$prefix}border-radius);
--#{$prefix}alert-link-color: inherit;
--#{$prefix}alert-heading-font-weight: var(--#{$prefix}font-weight-medium);
--#{$prefix}alert-heading-margin-bottom: #{$alert-heading-margin-bottom};
--#{$prefix}alert-icon-size: #{$alert-icon-size};
--#{$prefix}alert-padding-inline-end: #{$alert-padding-inline-end};
--#{$prefix}alert-gap: #{$alert-gap};
position: relative;
padding: var(--#{$prefix}alert-padding-y) var(--#{$prefix}alert-padding-x);
@@ -24,12 +28,12 @@
color: var(--#{$prefix}alert-color);
display: flex;
flex-direction: row;
gap: 1rem;
gap: var(--#{$prefix}alert-gap);
}
.alert-heading {
color: inherit;
margin-bottom: 0.25rem; // todo: use variable
margin-bottom: var(--#{$prefix}alert-heading-margin-bottom);
font-weight: var(--#{$prefix}alert-heading-font-weight);
}
@@ -39,8 +43,8 @@
.alert-icon {
color: var(--#{$prefix}alert-color);
width: 1.25rem !important; // todo: use variable
height: 1.25rem !important;
width: var(--#{$prefix}alert-icon-size) !important;
height: var(--#{$prefix}alert-icon-size) !important;
}
.alert-action {
@@ -67,7 +71,7 @@
}
.alert-dismissible {
padding-inline-end: 3rem; //todo: use variable
padding-inline-end: var(--#{$prefix}alert-padding-inline-end);
.btn-close {
position: absolute;
core/scss/ui/_avatars.scss
+12 -6
View File
@@ -123,6 +123,9 @@
// Avatar upload
//
.avatar-upload {
--#{$prefix}avatar-upload-icon-size: #{$avatar-upload-icon-size};
--#{$prefix}avatar-upload-text-margin-top: #{$avatar-upload-text-margin-top};
border: var(--#{$prefix}border-width) dashed var(--#{$prefix}border-color);
background: $form-check-input-bg;
box-shadow: none;
@@ -130,8 +133,8 @@
@include transition(color $transition-time, background-color $transition-time);
svg {
width: 1.5rem;
height: 1.5rem;
width: var(--#{$prefix}avatar-upload-icon-size);
height: var(--#{$prefix}avatar-upload-icon-size);
stroke-width: 1;
}
@@ -145,20 +148,23 @@
.avatar-upload-text {
font-size: $h6-font-size;
line-height: 1;
margin-top: 0.25rem;
margin-top: var(--#{$prefix}avatar-upload-text-margin-top);
}
.avatar-cover {
--#{$prefix}avatar-cover-ring-width: #{$avatar-cover-ring-width};
margin-top: calc(-0.5 * var(--#{$prefix}avatar-size));
box-shadow: 0 0 0 0.25rem var(--#{$prefix}card-bg, var(--#{$prefix}body-bg));
box-shadow: 0 0 0 var(--#{$prefix}avatar-cover-ring-width) var(--#{$prefix}card-bg, var(--#{$prefix}body-bg));
}
.avatar-brand {
--#{$prefix}avatar-brand-offset: #{$avatar-brand-offset};
width: var(--#{$prefix}avatar-brand-size);
height: var(--#{$prefix}avatar-brand-size);
position: absolute;
inset-inline-end: -2px;
bottom: -2px;
inset-inline-end: var(--#{$prefix}avatar-brand-offset);
bottom: var(--#{$prefix}avatar-brand-offset);
z-index: 1000;
background: var(--#{$prefix}bg-surface);
@include border-radius(var(--#{$prefix}border-radius));
core/scss/ui/_badges.scss
+5 -4
View File
@@ -9,6 +9,7 @@
--#{$prefix}badge-border-radius: #{$badge-border-radius};
--#{$prefix}badge-icon-size: 1em;
--#{$prefix}badge-line-height: 1;
--#{$prefix}badge-gap: #{$badge-gap};
display: inline-flex;
padding: var(--#{$prefix}badge-padding-y) var(--#{$prefix}badge-padding-x);
font-weight: var(--#{$prefix}badge-font-weight);
@@ -18,7 +19,7 @@
white-space: nowrap;
justify-content: center;
align-items: center;
gap: 0.25rem;
gap: var(--#{$prefix}badge-gap);
background: $badge-bg-color;
overflow: hidden;
user-select: none;
@@ -97,14 +98,14 @@
--#{$prefix}badge-font-size: #{$badge-font-size-sm};
--#{$prefix}badge-icon-size: 1em;
--#{$prefix}badge-padding-y: 2px;
--#{$prefix}badge-padding-x: 0.25rem;
--#{$prefix}badge-padding-x: #{$badge-padding-x-sm};
}
.badge-lg {
--#{$prefix}badge-font-size: #{$badge-font-size-lg};
--#{$prefix}badge-icon-size: 1em;
--#{$prefix}badge-padding-y: 0.25rem;
--#{$prefix}badge-padding-x: 0.5rem;
--#{$prefix}badge-padding-y: #{$badge-padding-y-lg};
--#{$prefix}badge-padding-x: #{$badge-padding-x-lg};
}
//
core/scss/ui/_buttons.scss
+6 -3
View File
@@ -180,7 +180,9 @@
@include border-radius(var(--#{$prefix}border-radius-pill));
&[class*='btn-icon'] {
padding: 0.375rem 15px;
--#{$prefix}btn-pill-icon-padding-y: #{$btn-pill-icon-padding-y};
--#{$prefix}btn-pill-icon-padding-x: #{$btn-pill-icon-padding-x};
padding: var(--#{$prefix}btn-pill-icon-padding-y) var(--#{$prefix}btn-pill-icon-padding-x);
}
}
@@ -220,10 +222,11 @@
// Button floating
//
.btn-floating {
--#{$prefix}btn-floating-offset: #{$btn-floating-offset};
position: fixed;
z-index: $zindex-fixed;
bottom: 1rem;
inset-inline-start: 1rem;
bottom: var(--#{$prefix}btn-floating-offset);
inset-inline-start: var(--#{$prefix}btn-floating-offset);
box-shadow: var(--#{$prefix}shadow-dropdown);
@include media-print {
core/scss/ui/_calendars.scss
+9 -6
View File
@@ -1,6 +1,9 @@
@use '../config' as *;
.calendar {
--#{$prefix}calendar-padding-y: #{$calendar-padding-y};
--#{$prefix}calendar-date-padding: #{$calendar-date-padding};
--#{$prefix}calendar-date-size: #{$calendar-date-size};
display: block;
font-size: $font-size-sm;
border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color);
@@ -22,7 +25,7 @@
display: flex;
flex-wrap: wrap;
justify-content: start;
padding: 0.5rem 0;
padding: var(--#{$prefix}calendar-padding-y) 0;
}
.calendar-header {
@@ -32,7 +35,7 @@
.calendar-date {
flex: 0 0 calc(100% / 7);
max-width: calc(100% / 7);
padding: 0.2rem;
padding: var(--#{$prefix}calendar-date-padding);
text-align: center;
border: 0;
@@ -44,9 +47,9 @@
.date-item {
position: relative;
display: inline-block;
width: 1.4rem;
height: 1.4rem;
line-height: 1.4rem;
width: var(--#{$prefix}calendar-date-size);
height: var(--#{$prefix}calendar-date-size);
line-height: var(--#{$prefix}calendar-date-size);
color: #66758c;
text-align: center;
text-decoration: none;
@@ -81,7 +84,7 @@
top: 50%;
inset-inline-end: 0;
inset-inline-start: 0;
height: 1.4rem;
height: var(--#{$prefix}calendar-date-size);
content: '';
background: color-transparent(var(--#{$prefix}primary), 0.1);
transform: translateY(-50%);
core/scss/ui/_cards.scss
+37 -21
View File
@@ -63,7 +63,7 @@
// Card stamp
.card-stamp {
--#{$prefix}stamp-size: 7rem;
--#{$prefix}stamp-size: #{$card-stamp-size};
position: absolute;
top: 0;
inset-inline-end: 0;
@@ -77,7 +77,7 @@
}
.card-stamp-lg {
--#{$prefix}stamp-size: 13rem;
--#{$prefix}stamp-size: #{$card-stamp-size-lg};
}
.card-stamp-icon {
@@ -163,7 +163,7 @@
Stacked card
*/
.card-stacked {
--#{$prefix}card-stacked-offset: 0.25rem;
--#{$prefix}card-stacked-offset: #{$card-stacked-offset};
position: relative;
&:after {
@@ -207,8 +207,9 @@ Stacked card
}
.card-actions {
margin: -0.5rem -0.5rem -0.5rem auto;
padding-inline-start: 0.5rem;
--#{$prefix}card-actions-gutter: #{$card-actions-gutter};
margin: calc(-1 * var(--#{$prefix}card-actions-gutter)) calc(-1 * var(--#{$prefix}card-actions-gutter)) calc(-1 * var(--#{$prefix}card-actions-gutter)) auto;
padding-inline-start: var(--#{$prefix}card-actions-gutter);
a {
text-decoration: none;
@@ -241,9 +242,10 @@ Stacked card
}
.card-header-pills {
--#{$prefix}card-header-pills-margin: #{$card-header-pills-margin};
flex: 1;
margin-top: -0.5rem;
margin-bottom: -0.5rem;
margin-top: calc(-1 * var(--#{$prefix}card-header-pills-margin));
margin-bottom: calc(-1 * var(--#{$prefix}card-header-pills-margin));
}
// Card rotate
@@ -299,7 +301,8 @@ Stacked card
// Card progress
.card-progress {
height: 0.25rem;
--#{$prefix}card-progress-height: #{$card-progress-height};
height: var(--#{$prefix}card-progress-height);
&:last-child {
@include border-radius(0 0 2px 2px);
@@ -315,12 +318,14 @@ Stacked card
}
.card-title {
--#{$prefix}card-title-margin-bottom: #{$card-title-margin-bottom};
--#{$prefix}card-title-line-height: #{$card-title-line-height};
display: block;
margin: 0 0 1rem;
margin: 0 0 var(--#{$prefix}card-title-margin-bottom);
font-size: $h3-font-size;
font-weight: var(--#{$prefix}font-weight-medium);
color: var(--#{$prefix}heading-color);
line-height: 1.5rem;
line-height: var(--#{$prefix}card-title-line-height);
@at-root a#{&}:hover {
color: inherit;
@@ -332,6 +337,7 @@ Stacked card
}
.card-subtitle {
--#{$prefix}card-subtitle-margin-start: #{$card-subtitle-margin-start};
margin-bottom: $card-title-spacer-y;
color: var(--#{$prefix}secondary);
font-weight: normal;
@@ -341,12 +347,16 @@ Stacked card
}
.card-title & {
margin: 0 0 0 0.25rem;
margin: 0 0 0 var(--#{$prefix}card-subtitle-margin-start);
font-size: $h4-font-size;
}
}
.card-body {
--#{$prefix}card-body-padding-sm: #{$card-body-padding-sm};
--#{$prefix}card-body-padding-md: #{$card-body-padding-md};
--#{$prefix}card-body-padding-lg: #{$card-body-padding-lg};
--#{$prefix}card-body-padding-lg-up: #{$card-body-padding-lg-up};
position: relative;
> :last-child {
@@ -354,22 +364,22 @@ Stacked card
}
.card-sm > & {
padding: 1rem;
padding: var(--#{$prefix}card-body-padding-sm);
}
.card-md > & {
@include media-breakpoint-up(md) {
padding: 2.5rem;
padding: var(--#{$prefix}card-body-padding-md);
}
}
.card-lg > & {
@include media-breakpoint-up(md) {
padding: 2rem;
padding: var(--#{$prefix}card-body-padding-lg);
}
@include media-breakpoint-up(lg) {
padding: 4rem;
padding: var(--#{$prefix}card-body-padding-lg-up);
}
}
@@ -390,16 +400,20 @@ Stacked card
Card optinos
*/
.card-options {
top: 1.5rem;
inset-inline-end: 0.75rem;
--#{$prefix}card-options-top: #{$card-options-top};
--#{$prefix}card-options-inset: #{$card-options-inset};
top: var(--#{$prefix}card-options-top);
inset-inline-end: var(--#{$prefix}card-options-inset);
display: flex;
margin-inline-start: auto;
}
.card-options-link {
--#{$prefix}card-options-link-min-width: #{$card-options-link-min-width};
--#{$prefix}card-options-link-margin-start: #{$card-options-link-margin-start};
display: inline-block;
min-width: 1rem;
margin-inline-start: 0.25rem;
min-width: var(--#{$prefix}card-options-link-min-width);
margin-inline-start: var(--#{$prefix}card-options-link-margin-start);
color: var(--#{$prefix}secondary);
}
@@ -534,18 +548,20 @@ Card code
Card chart
*/
.card-chart {
--#{$prefix}card-avatar-height: #{$card-avatar-height};
position: relative;
z-index: 1;
height: 3.5rem;
height: var(--#{$prefix}card-avatar-height);
}
/**
Card avatar
*/
.card-avatar {
--#{$prefix}card-avatar-ring-width: #{$card-avatar-ring-width};
margin-inline-start: auto;
margin-inline-end: auto;
box-shadow: 0 0 0 0.25rem var(--#{$prefix}card-bg, var(--#{$prefix}bg-surface));
box-shadow: 0 0 0 var(--#{$prefix}card-avatar-ring-width) var(--#{$prefix}card-bg, var(--#{$prefix}bg-surface));
margin-top: calc(-1 * calc(var(--#{$prefix}avatar-size) * 0.5));
}
core/scss/ui/_carousel.scss
+3 -1
View File
@@ -4,9 +4,11 @@
}
.carousel-indicators-vertical {
--#{$prefix}carousel-indicators-vertical-margin-inline-end: #{$carousel-indicators-vertical-margin-inline-end};
inset-inline-start: auto;
top: 0;
margin: 0 1rem 0 0;
margin: 0 var(--#{$prefix}carousel-indicators-vertical-margin-inline-end) 0 0;
flex-direction: column;
[data-bs-target],
core/scss/ui/_charts.scss
+31 -12
View File
@@ -1,8 +1,10 @@
@use '../config' as *;
.chart {
--#{$prefix}chart-min-height: #{$chart-min-height};
display: block;
min-height: 10rem;
min-height: var(--#{$prefix}chart-min-height);
text {
font-family: inherit;
@@ -10,41 +12,58 @@
}
.chart-sm {
height: 2.5rem;
--#{$prefix}chart-height-sm: #{$chart-height-sm};
height: var(--#{$prefix}chart-height-sm);
}
.chart-lg {
height: 15rem;
--#{$prefix}chart-height-lg: #{$chart-height-lg};
height: var(--#{$prefix}chart-height-lg);
}
.chart-square {
height: 5.75rem;
--#{$prefix}chart-height-square: #{$chart-height-square};
height: var(--#{$prefix}chart-height-square);
}
/**
Chart sparkline
*/
.chart-sparkline {
--#{$prefix}chart-sparkline-width: #{$chart-sparkline-width};
--#{$prefix}chart-sparkline-height: #{$chart-sparkline-height};
position: relative;
width: 4rem;
height: 2.5rem;
width: var(--#{$prefix}chart-sparkline-width);
height: var(--#{$prefix}chart-sparkline-height);
line-height: 1;
min-height: 0 !important;
}
.chart-sparkline-sm {
height: 1.5rem;
--#{$prefix}chart-sparkline-height-sm: #{$chart-sparkline-height-sm};
height: var(--#{$prefix}chart-sparkline-height-sm);
}
.chart-sparkline-square {
width: 2.5rem;
--#{$prefix}chart-sparkline-width-square: #{$chart-sparkline-width-square};
width: var(--#{$prefix}chart-sparkline-width-square);
}
.chart-sparkline-wide {
width: 6rem;
--#{$prefix}chart-sparkline-width-wide: #{$chart-sparkline-width-wide};
width: var(--#{$prefix}chart-sparkline-width-wide);
}
.chart-sparkline-label {
--#{$prefix}chart-sparkline-label-icon-size: #{$chart-sparkline-label-icon-size};
position: absolute;
top: 0;
inset-inline-end: 0;
@@ -56,8 +75,8 @@ Chart sparkline
font-size: $h6-font-size;
.icon {
width: 1rem;
height: 1rem;
font-size: 1rem;
width: var(--#{$prefix}chart-sparkline-label-icon-size);
height: var(--#{$prefix}chart-sparkline-label-icon-size);
font-size: var(--#{$prefix}chart-sparkline-label-icon-size);
}
}
core/scss/ui/_chat.scss
+6 -3
View File
@@ -1,18 +1,21 @@
@use '../config' as *;
.chat {
--#{$prefix}chat-bubbles-gap: #{$chat-bubbles-gap};
--#{$prefix}chat-bubble-padding: #{$chat-bubble-padding};
--#{$prefix}chat-bubble-title-margin-bottom: #{$chat-bubble-title-margin-bottom};
}
.chat-bubbles {
display: flex;
flex-direction: column;
gap: 1rem;
gap: var(--#{$prefix}chat-bubbles-gap);
}
.chat-bubble {
background: var(--#{$prefix}bg-surface-secondary);
@include border-radius(var(--#{$prefix}border-radius-lg));
padding: 1rem;
padding: var(--#{$prefix}chat-bubble-padding);
position: relative;
}
@@ -22,7 +25,7 @@
}
.chat-bubble-title {
margin-bottom: 0.25rem;
margin-bottom: var(--#{$prefix}chat-bubble-title-margin-bottom);
}
.chat-bubble-author {
core/scss/ui/_datagrid.scss
+2 -1
View File
@@ -7,6 +7,7 @@
.datagrid {
--#{$prefix}datagrid-padding: #{$datagrid-padding};
--#{$prefix}datagrid-item-width: #{$datagrid-item-width};
--#{$prefix}datagrid-title-margin-bottom: #{$datagrid-title-margin-bottom};
display: grid;
grid-gap: var(--#{$prefix}datagrid-padding);
@@ -15,5 +16,5 @@
.datagrid-title {
@include subheader;
margin-bottom: 0.25rem;
margin-bottom: var(--#{$prefix}datagrid-title-margin-bottom);
}
core/scss/ui/_dropdowns.scss
+15 -9
View File
@@ -1,9 +1,15 @@
@use '../config' as *;
.dropdown-menu {
--#{$prefix}dropdown-item-gap: 0.5rem;
--#{$prefix}dropdown-item-gap: #{$dropdown-item-gap};
--#{$prefix}dropdown-item-icon-size: #{$icon-size};
--#{$prefix}dropdown-item-icon-color: var(--#{$prefix}tertiary);
--#{$prefix}dropdown-header-padding-bottom: #{$dropdown-header-padding-bottom};
--#{$prefix}dropdown-menu-columns-gap: #{$dropdown-menu-columns-gap};
--#{$prefix}dropdown-arrow-offset: #{$dropdown-arrow-offset};
--#{$prefix}dropdown-arrow-inset: #{$dropdown-arrow-inset};
--#{$prefix}dropdown-dropend-offset: #{$dropdown-dropend-offset};
--#{$prefix}dropdown-menu-card-min-width: #{$dropdown-menu-card-min-width};
user-select: none;
background-clip: border-box;
@@ -39,7 +45,7 @@
}
.dropdown-item-indicator {
height: 1.25rem;
height: var(--#{$prefix}dropdown-item-icon-size);
display: inline-flex;
line-height: 1;
vertical-align: bottom;
@@ -48,7 +54,7 @@
.dropdown-header {
@include subheader;
padding-bottom: 0.25rem;
padding-bottom: var(--#{$prefix}dropdown-header-padding-bottom);
pointer-events: none;
}
@@ -68,15 +74,15 @@
.dropdown-menu-columns {
display: flex;
flex: 0 0.25rem;
flex: 0 var(--#{$prefix}dropdown-menu-columns-gap);
}
.dropdown-menu-arrow {
&:before {
content: '';
position: absolute;
top: -0.25rem;
inset-inline-start: 0.75rem;
top: calc(-1 * var(--#{$prefix}dropdown-arrow-offset));
inset-inline-start: var(--#{$prefix}dropdown-arrow-inset);
display: block;
background: inherit;
width: 14px;
@@ -92,7 +98,7 @@
&.dropdown-menu-end {
&:before {
inset-inline-end: 0.75rem;
inset-inline-end: var(--#{$prefix}dropdown-arrow-inset);
inset-inline-start: auto;
}
}
@@ -101,7 +107,7 @@
.dropend {
> .dropdown-menu {
margin-top: subtract(calc(-1 * $dropdown-padding-y), 1px);
margin-inline-start: -0.25rem;
margin-inline-start: calc(-1 * var(--#{$prefix}dropdown-dropend-offset));
}
.dropdown-toggle {
@@ -113,7 +119,7 @@
.dropdown-menu-card {
padding: 0;
min-width: 20rem;
min-width: var(--#{$prefix}dropdown-menu-card-min-width);
> .card {
margin: 0;
core/scss/ui/_empty.scss
+20 -10
View File
@@ -1,23 +1,33 @@
@use '../config' as *;
.empty {
--#{$prefix}empty-padding: #{$empty-padding};
--#{$prefix}empty-padding-md: #{$empty-padding-md};
--#{$prefix}empty-icon-size: #{$empty-icon-size};
--#{$prefix}empty-icon-margin-bottom: #{$empty-icon-margin-bottom};
--#{$prefix}empty-img-margin-bottom: #{$empty-img-margin-bottom};
--#{$prefix}empty-header-margin-bottom: #{$empty-header-margin-bottom};
--#{$prefix}empty-header-font-size: #{$empty-header-font-size};
--#{$prefix}empty-title-margin-bottom: #{$empty-title-margin-bottom};
--#{$prefix}empty-action-margin-top: #{$empty-action-margin-top};
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100%;
padding: 1rem;
padding: var(--#{$prefix}empty-padding);
text-align: center;
@include media-breakpoint-up(md) {
padding: 3rem;
padding: var(--#{$prefix}empty-padding-md);
}
}
.empty-icon {
margin: 0 0 1rem;
width: 3rem;
height: 3rem;
margin: 0 0 var(--#{$prefix}empty-icon-margin-bottom);
width: var(--#{$prefix}empty-icon-size);
height: var(--#{$prefix}empty-icon-size);
line-height: 1;
color: var(--#{$prefix}secondary);
@@ -28,13 +38,13 @@
}
.empty-img {
margin: 0 0 2rem;
margin: 0 0 var(--#{$prefix}empty-img-margin-bottom);
line-height: 1;
}
.empty-header {
margin: 0 0 1rem;
font-size: 4rem;
margin: 0 0 var(--#{$prefix}empty-header-margin-bottom);
font-size: var(--#{$prefix}empty-header-font-size);
font-weight: var(--#{$prefix}font-weight-light);
line-height: 1;
color: var(--#{$prefix}secondary);
@@ -48,11 +58,11 @@
.empty-title,
.empty-subtitle {
margin: 0 0 0.5rem;
margin: 0 0 var(--#{$prefix}empty-title-margin-bottom);
}
.empty-action {
margin-top: 1.5rem;
margin-top: var(--#{$prefix}empty-action-margin-top);
}
.empty-bordered {
core/scss/ui/_forms.scss
+27 -11
View File
@@ -11,13 +11,15 @@ Form label
*/
.col-form-label,
.form-label {
--#{$prefix}form-label-required-gap: #{$form-label-required-gap};
display: block;
font-weight: var(--#{$prefix}font-weight-medium);
&.required {
&:after {
content: '*';
margin-inline-start: 0.25rem;
margin-inline-start: var(--#{$prefix}form-label-required-gap);
color: $red;
}
}
@@ -33,6 +35,10 @@ Form label
Form hint
*/
.form-hint {
--#{$prefix}form-hint-margin-top: #{$form-hint-margin-top};
--#{$prefix}form-hint-label-offset: #{$form-hint-label-offset};
--#{$prefix}form-hint-control-margin-top: #{$form-hint-control-margin-top};
display: block;
color: $form-secondary-color;
@@ -41,17 +47,17 @@ Form hint
}
& + .form-control {
margin-top: 0.25rem;
margin-top: var(--#{$prefix}form-hint-margin-top);
}
.form-label + & {
margin-top: -0.25rem;
margin-top: var(--#{$prefix}form-hint-label-offset);
}
.input-group + &,
.form-control + &,
.form-select + & {
margin-top: 0.5rem;
margin-top: var(--#{$prefix}form-hint-control-margin-top);
color: $form-secondary-color;
}
}
@@ -121,12 +127,17 @@ Form control
}
.form-footer {
margin-top: 2rem;
--#{$prefix}form-footer-margin-top: #{$form-footer-margin-top};
margin-top: var(--#{$prefix}form-footer-margin-top);
}
.form-fieldset {
padding: 1rem;
margin-bottom: 1rem;
--#{$prefix}form-fieldset-padding: #{$form-fieldset-padding};
--#{$prefix}form-fieldset-margin-bottom: #{$form-fieldset-margin-bottom};
padding: var(--#{$prefix}form-fieldset-padding);
margin-bottom: var(--#{$prefix}form-fieldset-margin-bottom);
background: var(--#{$prefix}bg-surface-secondary);
border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color);
@include border-radius(var(--#{$prefix}border-radius));
@@ -140,13 +151,16 @@ fieldset:empty {
Form help
*/
.form-help {
--#{$prefix}form-help-size: #{$form-help-size};
--#{$prefix}form-help-font-size: #{$form-help-font-size};
display: inline-flex;
font-weight: var(--#{$prefix}font-weight-semibold);
align-items: center;
justify-content: center;
width: 1.125rem;
height: 1.125rem;
font-size: 0.75rem;
width: var(--#{$prefix}form-help-size);
height: var(--#{$prefix}form-help-size);
font-size: var(--#{$prefix}form-help-font-size);
color: $form-secondary-color;
text-align: center;
text-decoration: none;
@@ -248,7 +262,9 @@ Forms on mobile devices
*/
.form-control,
.form-select {
--#{$prefix}form-control-mobile-font-size: #{$form-control-mobile-font-size};
@include media-breakpoint-down(sm) {
font-size: 1rem;
font-size: var(--#{$prefix}form-control-mobile-font-size);
}
}
core/scss/ui/_grid.scss
+7 -6
View File
@@ -19,19 +19,20 @@
}
}
@each $name, $value in (0: 0, sm: 0.375rem, md: 1.5rem, lg: 3rem) {
@each $name, $value in (0: 0, sm: $grid-row-gutter-sm, md: $grid-row-gutter-md, lg: $grid-row-gutter-lg) {
.row-#{$name} {
margin-inline-end: calc(-1 * $value);
margin-inline-start: calc(-1 * $value);
--#{$prefix}grid-row-gutter: #{$value};
margin-inline-end: calc(-1 * var(--#{$prefix}grid-row-gutter));
margin-inline-start: calc(-1 * var(--#{$prefix}grid-row-gutter));
> .col,
> [class*='col-'] {
padding-inline-end: $value;
padding-inline-start: $value;
padding-inline-end: var(--#{$prefix}grid-row-gutter);
padding-inline-start: var(--#{$prefix}grid-row-gutter);
}
.card {
margin-bottom: 2 * $value;
margin-bottom: calc(2 * var(--#{$prefix}grid-row-gutter));
}
}
}
core/scss/ui/_icons.scss
+6 -5
View File
@@ -25,8 +25,9 @@
// Inline icon
//
.icon-inline {
--#{$prefix}icon-size: 1rem;
vertical-align: -0.2rem;
--#{$prefix}icon-size: #{$icon-inline-size};
--#{$prefix}icon-inline-vertical-align: #{$icon-inline-vertical-align};
vertical-align: var(--#{$prefix}icon-inline-vertical-align);
}
//
@@ -40,17 +41,17 @@
// Icon size
//
.icon-sm {
--#{$prefix}icon-size: 1rem;
--#{$prefix}icon-size: #{$icon-sm-size};
stroke-width: 1.5;
}
.icon-md {
--#{$prefix}icon-size: 2.5rem;
--#{$prefix}icon-size: #{$icon-md-size};
stroke-width: 1;
}
.icon-lg {
--#{$prefix}icon-size: 3.5rem;
--#{$prefix}icon-size: #{$icon-lg-size};
stroke-width: 1;
}
core/scss/ui/_lists.scss
+3 -1
View File
@@ -1,13 +1,15 @@
@use '../config' as *;
.list-group {
--#{$prefix}list-group-header-padding-y: #{$list-group-header-padding-y};
margin-inline-start: 0;
margin-inline-end: 0;
}
.list-group-header {
background: $list-group-header-bg;
padding: 0.5rem $list-group-item-padding-x;
padding: var(--#{$prefix}list-group-header-padding-y) $list-group-item-padding-x;
font-size: $h5-font-size;
font-weight: var(--#{$prefix}font-weight-medium);
line-height: 1;
core/scss/ui/_markdown.scss
+9 -4
View File
@@ -8,6 +8,11 @@ Prose (formerly markdown)
*/
.prose,
.markdown {
--#{$prefix}markdown-heading-margin-top: #{$markdown-heading-margin-top};
--#{$prefix}markdown-blockquote-margin-y: #{$markdown-blockquote-margin-y};
--#{$prefix}markdown-blockquote-padding-y: #{$markdown-blockquote-padding-y};
--#{$prefix}markdown-blockquote-padding-x: #{$markdown-blockquote-padding-x};
--#{$prefix}markdown-pre-max-height: #{$markdown-pre-max-height};
line-height: $markdown-line-height;
font-size: $markdown-font-size;
@@ -42,7 +47,7 @@ Prose (formerly markdown)
h4,
h5,
h6 {
margin-top: 2.5rem;
margin-top: var(--#{$prefix}markdown-heading-margin-top);
}
}
@@ -54,8 +59,8 @@ Prose (formerly markdown)
> blockquote {
font-size: $h3-font-size;
margin: 1.5rem 0;
padding: 0.5rem 1.5rem;
margin: var(--#{$prefix}markdown-blockquote-margin-y) 0;
padding: var(--#{$prefix}markdown-blockquote-padding-y) var(--#{$prefix}markdown-blockquote-padding-x);
}
> img,
@@ -65,6 +70,6 @@ Prose (formerly markdown)
}
pre {
max-height: 20rem;
max-height: var(--#{$prefix}markdown-pre-max-height);
}
}
core/scss/ui/_modals.scss
+6 -3
View File
@@ -18,7 +18,7 @@
@include scrollbar;
.modal-title {
margin-bottom: 1rem;
margin-bottom: var(--#{$prefix}modal-body-title-margin-bottom);
}
& + & {
@@ -54,10 +54,10 @@
@if $modal-footer-border-width == 0 {
padding-top: 0;
} @else {
padding-top: 0.75rem;
padding-top: var(--#{$prefix}modal-footer-padding-y);
}
padding-bottom: 0.75rem;
padding-bottom: var(--#{$prefix}modal-footer-padding-y);
}
.modal-blur {
@@ -70,6 +70,9 @@
}
.modal {
--#{$prefix}modal-body-title-margin-bottom: #{$modal-body-title-margin-bottom};
--#{$prefix}modal-footer-padding-y: #{$modal-footer-padding-y};
@include media-print {
display: none !important;
}
core/scss/ui/_nav.scss
+8 -4
View File
@@ -2,6 +2,10 @@
.nav {
--#{$prefix}nav-link-hover-bg: #{color-transparent(var(--#{$prefix}nav-link-color), 0.04)};
--#{$prefix}nav-vertical-nested-margin-start: #{$nav-vertical-nested-margin-start};
--#{$prefix}nav-vertical-nested-padding-start: #{$nav-vertical-nested-padding-start};
--#{$prefix}nav-link-toggle-padding-x: #{$nav-link-toggle-padding-x};
--#{$prefix}nav-link-icon-margin-end: #{$nav-link-icon-margin-end};
}
.nav-vertical {
@@ -12,9 +16,9 @@
}
.nav {
margin-inline-start: 1.25rem;
margin-inline-start: var(--#{$prefix}nav-vertical-nested-margin-start);
border-inline-start: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color);
padding-inline-start: 0.5rem;
padding-inline-start: var(--#{$prefix}nav-vertical-nested-padding-start);
}
.nav-link.active,
@@ -78,7 +82,7 @@
.nav-link-toggle {
margin-inline-start: auto;
padding: 0 0.25rem;
padding: 0 var(--#{$prefix}nav-link-toggle-padding-x);
@include transition(transform $transition-time);
@include caret();
@@ -94,7 +98,7 @@
.nav-link-icon {
width: $nav-link-icon-size;
height: $nav-link-icon-size;
margin-inline-end: 0.5rem;
margin-inline-end: var(--#{$prefix}nav-link-icon-margin-end);
color: $nav-link-icon-color;
svg {
core/scss/ui/_offcanvas.scss
+6 -2
View File
@@ -15,11 +15,15 @@
}
.offcanvas-title {
--#{$prefix}offcanvas-title-line-height: #{$offcanvas-title-line-height};
font-size: $h3-font-size;
font-weight: var(--#{$prefix}font-weight-medium);
line-height: 1.5rem;
line-height: var(--#{$prefix}offcanvas-title-line-height);
}
.offcanvas-narrow {
width: 20rem;
--#{$prefix}offcanvas-narrow-width: #{$offcanvas-narrow-width};
width: var(--#{$prefix}offcanvas-narrow-width);
}
core/scss/ui/_pagination.scss
+10 -6
View File
@@ -2,7 +2,9 @@
.pagination {
margin: 0;
--#{$prefix}pagination-gap: 0.25rem;
--#{$prefix}pagination-gap: #{$pagination-gap};
--#{$prefix}pagination-link-min-width: #{$pagination-link-min-width};
--#{$prefix}page-text-padding-x: #{$page-text-padding-x};
user-select: none;
gap: var(--#{$prefix}pagination-gap);
line-height: var(--#{$prefix}body-line-height);
@@ -13,7 +15,7 @@
}
.page-link {
min-width: 2rem;
min-width: var(--#{$prefix}pagination-link-min-width);
@include border-radius(var(--#{$prefix}pagination-border-radius));
}
@@ -22,8 +24,8 @@
}
.page-text {
padding-inline-start: 0.5rem;
padding-inline-end: 0.5rem;
padding-inline-start: var(--#{$prefix}page-text-padding-x);
padding-inline-end: var(--#{$prefix}page-text-padding-x);
}
.page-item {
@@ -42,8 +44,10 @@
}
.page-item-subtitle {
margin-bottom: 2px;
font-size: 12px;
--#{$prefix}page-item-subtitle-margin-bottom: #{$page-item-subtitle-margin-bottom};
--#{$prefix}page-item-subtitle-font-size: #{$page-item-subtitle-font-size};
margin-bottom: var(--#{$prefix}page-item-subtitle-margin-bottom);
font-size: var(--#{$prefix}page-item-subtitle-font-size);
color: var(--#{$prefix}secondary);
text-transform: uppercase;
core/scss/ui/_patterns.scss
+19 -19
View File
@@ -2,7 +2,7 @@
.bg-pattern-diagonal {
--#{$prefix}pattern-color: var(--#{$prefix}body-color);
--#{$prefix}pattern-size: 0.5rem;
--#{$prefix}pattern-size: #{$pattern-size};
--#{$prefix}pattern-fill: color-mix(in oklch, var(--#{$prefix}pattern-color) 10%, transparent);
--#{$prefix}pattern-border: color-mix(in oklch, var(--#{$prefix}pattern-color) 10%, transparent);
background-image: repeating-linear-gradient(-45deg, var(--#{$prefix}pattern-fill) 0 1px, transparent 0 50%);
@@ -13,7 +13,7 @@
.bg-pattern-diagonal-2 {
--#{$prefix}pattern-color: var(--#{$prefix}body-color);
--#{$prefix}pattern-size: 0.5rem;
--#{$prefix}pattern-size: #{$pattern-size};
--#{$prefix}pattern-fill: color-mix(in oklch, var(--#{$prefix}pattern-color) 10%, transparent);
--#{$prefix}pattern-border: color-mix(in oklch, var(--#{$prefix}pattern-color) 10%, transparent);
background-image: repeating-linear-gradient(45deg, var(--#{$prefix}pattern-fill) 0 1px, transparent 0 50%);
@@ -41,7 +41,7 @@
--#{$prefix}pattern-color: var(--#{$prefix}body-color);
--#{$prefix}pattern-fill: color-mix(in oklch, var(--#{$prefix}pattern-color) 3%, transparent);
--#{$prefix}pattern-border: color-mix(in oklch, var(--#{$prefix}pattern-color) 10%, transparent);
--#{$prefix}pattern-size: 0.5rem;
--#{$prefix}pattern-size: #{$pattern-size};
background-image:
repeating-linear-gradient(45deg, var(--#{$prefix}pattern-fill) 25%, transparent 25%, transparent 75%, var(--#{$prefix}pattern-fill) 75%, var(--#{$prefix}pattern-fill)),
repeating-linear-gradient(45deg, var(--#{$prefix}pattern-fill) 25%, transparent 25%, transparent 75%, var(--#{$prefix}pattern-fill) 75%, var(--#{$prefix}pattern-fill));
@@ -57,7 +57,7 @@
--#{$prefix}pattern-color: var(--#{$prefix}body-color);
--#{$prefix}pattern-fill: color-mix(in oklch, var(--#{$prefix}pattern-color) 6%, transparent);
--#{$prefix}pattern-border: color-mix(in oklch, var(--#{$prefix}pattern-color) 10%, transparent);
--#{$prefix}pattern-size: 0.5rem;
--#{$prefix}pattern-size: #{$pattern-size};
background-size: var(--#{$prefix}pattern-size) var(--#{$prefix}pattern-size);
background-image: repeating-linear-gradient(0deg, var(--#{$prefix}pattern-fill), var(--#{$prefix}pattern-fill) 1px, transparent 1px, transparent);
background-position: -1px -1px;
@@ -69,7 +69,7 @@
--#{$prefix}pattern-color: var(--#{$prefix}body-color);
--#{$prefix}pattern-fill: color-mix(in oklch, var(--#{$prefix}pattern-color) 6%, transparent);
--#{$prefix}pattern-border: color-mix(in oklch, var(--#{$prefix}pattern-color) 10%, transparent);
--#{$prefix}pattern-size: 0.5rem;
--#{$prefix}pattern-size: #{$pattern-size};
background-size: var(--#{$prefix}pattern-size) var(--#{$prefix}pattern-size);
background-image: repeating-linear-gradient(90deg, var(--#{$prefix}pattern-fill), var(--#{$prefix}pattern-fill) 1px, transparent 1px, transparent);
background-position: -1px -1px;
@@ -81,7 +81,7 @@
--#{$prefix}pattern-color: var(--#{$prefix}body-color);
--#{$prefix}pattern-fill: color-mix(in oklch, var(--#{$prefix}pattern-color) 6%, transparent);
--#{$prefix}pattern-border: color-mix(in oklch, var(--#{$prefix}pattern-color) 10%, transparent);
--#{$prefix}pattern-size: 0.5rem;
--#{$prefix}pattern-size: #{$pattern-size};
background-image: linear-gradient(to right, var(--#{$prefix}pattern-fill) 1px, transparent 1px), linear-gradient(to bottom, var(--#{$prefix}pattern-fill) 1px, transparent 1px);
background-size: calc(var(--#{$prefix}pattern-size) * 2) calc(var(--#{$prefix}pattern-size) * 2);
background-position:
@@ -95,7 +95,7 @@
--#{$prefix}pattern-color: var(--#{$prefix}body-color);
--#{$prefix}pattern-fill: color-mix(in oklch, var(--#{$prefix}pattern-color) 10%, transparent);
--#{$prefix}pattern-border: color-mix(in oklch, var(--#{$prefix}pattern-color) 10%, transparent);
--#{$prefix}pattern-size: 0.5rem;
--#{$prefix}pattern-size: #{$pattern-size};
background-image: linear-gradient(45deg, transparent 49%, var(--#{$prefix}pattern-fill) 49%, var(--#{$prefix}pattern-fill) 51%, transparent 51%), linear-gradient(-45deg, transparent 49%, var(--#{$prefix}pattern-fill) 49%, var(--#{$prefix}pattern-fill) 51%, transparent 51%);
background-size: calc(var(--#{$prefix}pattern-size) * 2) calc(var(--#{$prefix}pattern-size) * 2);
background-position: center center;
@@ -105,7 +105,7 @@
.bg-pattern-blueprint {
--#{$prefix}pattern-color: var(--#{$prefix}body-color);
--#{$prefix}pattern-size: 0.5rem;
--#{$prefix}pattern-size: #{$pattern-size};
--#{$prefix}pattern-line: color-mix(in oklch, var(--#{$prefix}pattern-color) 6%, transparent);
--#{$prefix}pattern-border: color-mix(in oklch, var(--#{$prefix}pattern-color) 10%, transparent);
background-image: linear-gradient(var(--#{$prefix}pattern-line) 2px, transparent 2px), linear-gradient(90deg, var(--#{$prefix}pattern-line) 2px, transparent 2px), linear-gradient(var(--#{$prefix}pattern-line) 1px, transparent 1px), linear-gradient(90deg, var(--#{$prefix}pattern-line) 1px, transparent 1px);
@@ -125,7 +125,7 @@
.bg-pattern-cross-dots {
--#{$prefix}pattern-color: var(--#{$prefix}body-color);
--#{$prefix}pattern-size: 0.5rem;
--#{$prefix}pattern-size: #{$pattern-size};
--#{$prefix}pattern-fill: color-mix(in oklch, var(--#{$prefix}pattern-color) 10%, transparent);
--#{$prefix}pattern-border: color-mix(in oklch, var(--#{$prefix}pattern-color) 10%, transparent);
background-image: radial-gradient(var(--#{$prefix}pattern-fill) 1px, transparent 1px), radial-gradient(var(--#{$prefix}pattern-fill) 1px, transparent 1px);
@@ -139,7 +139,7 @@
.bg-pattern-circles {
--#{$prefix}pattern-color: var(--#{$prefix}body-color);
--#{$prefix}pattern-size: 0.5rem;
--#{$prefix}pattern-size: #{$pattern-size};
--#{$prefix}pattern-fill: color-mix(in oklch, var(--#{$prefix}pattern-color) 10%, transparent);
--#{$prefix}pattern-border: color-mix(in oklch, var(--#{$prefix}pattern-color) 10%, transparent);
background-image:
@@ -152,7 +152,7 @@
.bg-pattern-diagonal-stripes {
--#{$prefix}pattern-color: var(--#{$prefix}body-color);
--#{$prefix}pattern-size: 0.5rem;
--#{$prefix}pattern-size: #{$pattern-size};
--#{$prefix}pattern-fill: color-mix(in oklch, var(--#{$prefix}pattern-color) 5%, transparent);
--#{$prefix}pattern-border: color-mix(in oklch, var(--#{$prefix}pattern-color) 10%, transparent);
background-image: repeating-linear-gradient(45deg, transparent, transparent var(--#{$prefix}pattern-size), var(--#{$prefix}pattern-fill) var(--#{$prefix}pattern-size), var(--#{$prefix}pattern-fill) calc(2 * var(--#{$prefix}pattern-size)));
@@ -163,7 +163,7 @@
.bg-pattern-diagonal-stripes-2 {
--#{$prefix}pattern-color: var(--#{$prefix}body-color);
--#{$prefix}pattern-size: 0.5rem;
--#{$prefix}pattern-size: #{$pattern-size};
--#{$prefix}pattern-fill: color-mix(in oklch, var(--#{$prefix}pattern-color) 5%, transparent);
--#{$prefix}pattern-border: color-mix(in oklch, var(--#{$prefix}pattern-color) 10%, transparent);
background-image: repeating-linear-gradient(-45deg, transparent, transparent var(--#{$prefix}pattern-size), var(--#{$prefix}pattern-fill) var(--#{$prefix}pattern-size), var(--#{$prefix}pattern-fill) calc(2 * var(--#{$prefix}pattern-size)));
@@ -174,7 +174,7 @@
.bg-pattern-zigzag {
--#{$prefix}pattern-color: var(--#{$prefix}body-color);
--#{$prefix}pattern-size: 0.5rem;
--#{$prefix}pattern-size: #{$pattern-size};
--#{$prefix}pattern-fill: color-mix(in oklch, var(--#{$prefix}pattern-color) 5%, transparent);
--#{$prefix}pattern-border: color-mix(in oklch, var(--#{$prefix}pattern-color) 10%, transparent);
background:
@@ -189,7 +189,7 @@
.bg-pattern-vertical-stripes {
--#{$prefix}pattern-color: var(--#{$prefix}body-color);
--#{$prefix}pattern-size: 0.5rem;
--#{$prefix}pattern-size: #{$pattern-size};
--#{$prefix}pattern-fill: color-mix(in oklch, var(--#{$prefix}pattern-color) 5%, transparent);
--#{$prefix}pattern-border: color-mix(in oklch, var(--#{$prefix}pattern-color) 10%, transparent);
background-image: repeating-linear-gradient(90deg, transparent, transparent var(--#{$prefix}pattern-size), var(--#{$prefix}pattern-fill) var(--#{$prefix}pattern-size), var(--#{$prefix}pattern-fill) calc(2 * var(--#{$prefix}pattern-size)));
@@ -199,7 +199,7 @@
.bg-pattern-horizontal-stripes {
--#{$prefix}pattern-color: var(--#{$prefix}body-color);
--#{$prefix}pattern-size: 0.5rem;
--#{$prefix}pattern-size: #{$pattern-size};
--#{$prefix}pattern-fill: color-mix(in oklch, var(--#{$prefix}pattern-color) 5%, transparent);
--#{$prefix}pattern-border: color-mix(in oklch, var(--#{$prefix}pattern-color) 10%, transparent);
background-image: repeating-linear-gradient(0deg, transparent, transparent var(--#{$prefix}pattern-size), var(--#{$prefix}pattern-fill) var(--#{$prefix}pattern-size), var(--#{$prefix}pattern-fill) calc(2 * var(--#{$prefix}pattern-size)));
@@ -217,10 +217,10 @@
// Sizes
$sizes: (
'sm': 0.25rem,
'md': 0.5rem,
'lg': 0.75rem,
'xl': 1rem,
'sm': $pattern-size-sm,
'md': $pattern-size-md,
'lg': $pattern-size-lg,
'xl': $pattern-size-xl,
);
@each $size, $value in $sizes {
core/scss/ui/_progress.scss
+15 -8
View File
@@ -41,15 +41,15 @@ Progress
}
.progress-sm {
height: 0.25rem;
--#{$prefix}progress-height: #{$progress-height-sm};
}
.progress-lg {
height: 0.75rem;
--#{$prefix}progress-height: #{$progress-height-lg};
}
.progress-xl {
height: 1rem;
--#{$prefix}progress-height: #{$progress-height-xl};
}
/**
@@ -78,8 +78,10 @@ Progress bar
}
.progress-separated {
--#{$prefix}progress-separated-ring-width: #{$progress-separated-ring-width};
.progress-bar {
box-shadow: 0 0 0 2px var(--#{$prefix}card-bg, var(--#{$prefix}bg-surface));
box-shadow: 0 0 0 var(--#{$prefix}progress-separated-ring-width) var(--#{$prefix}card-bg, var(--#{$prefix}bg-surface));
}
}
@@ -87,8 +89,10 @@ Progress bar
Progressbg
*/
.progressbg {
--#{$prefix}progressbg-padding-y: #{$progressbg-padding-y};
--#{$prefix}progressbg-padding-x: #{$progressbg-padding-x};
position: relative;
padding: 0.25rem 0.5rem;
padding: var(--#{$prefix}progressbg-padding-y) var(--#{$prefix}progressbg-padding-x);
display: flex;
}
@@ -113,27 +117,30 @@ Progressbg
}
.progressbg-value {
--#{$prefix}progressbg-value-padding-start: #{$progressbg-value-padding-start};
font-weight: var(--#{$prefix}font-weight-medium);
margin-inline-start: auto;
padding-inline-start: 2rem;
padding-inline-start: var(--#{$prefix}progressbg-value-padding-start);
}
/**
Progress steps
*/
.progress-steps {
--#{$prefix}progress-steps-gap: #{$progress-steps-gap};
display: flex;
flex-wrap: nowrap;
width: 100%;
padding: 0;
margin: 0;
list-style: none;
gap: 0.25rem;
gap: var(--#{$prefix}progress-steps-gap);
}
.progress-steps-item {
--#{$prefix}progress-steps-item-height: #{$progress-steps-item-height};
flex: 1 1 0;
min-height: 0.25rem;
min-height: var(--#{$prefix}progress-steps-item-height);
margin-top: 0;
color: inherit;
text-align: center;
core/scss/ui/_ribbons.scss
+32 -21
View File
@@ -5,12 +5,23 @@
.ribbon {
--#{$prefix}ribbon-margin: #{$card-ribbon-margin};
--#{$prefix}ribbon-border-radius: #{$card-ribbon-border-radius};
--#{$prefix}ribbon-font-size: #{$card-ribbon-font-size};
--#{$prefix}ribbon-icon-size: #{$card-ribbon-icon-size};
--#{$prefix}ribbon-offset: #{$ribbon-offset};
--#{$prefix}ribbon-padding-y: #{$ribbon-padding-y};
--#{$prefix}ribbon-padding-x: #{$ribbon-padding-x};
--#{$prefix}ribbon-min-size: #{$ribbon-min-size};
--#{$prefix}ribbon-top-width: #{$ribbon-top-width};
--#{$prefix}ribbon-top-padding-y: #{$ribbon-top-padding-y};
--#{$prefix}ribbon-bookmark-border-size: #{$ribbon-bookmark-border-size};
--#{$prefix}ribbon-bookmark-notch-width: #{$ribbon-bookmark-notch-width};
position: absolute;
top: 0.75rem;
top: var(--#{$prefix}ribbon-offset);
inset-inline-end: calc(-1 * var(--#{$prefix}ribbon-margin));
z-index: 1;
padding: 0.25rem 0.75rem;
font-size: $card-ribbon-font-size;
padding: var(--#{$prefix}ribbon-padding-y) var(--#{$prefix}ribbon-padding-x);
font-size: var(--#{$prefix}ribbon-font-size);
font-weight: var(--#{$prefix}font-weight-semibold);
line-height: 1;
color: $white;
@@ -22,8 +33,8 @@
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 2rem;
min-width: 2rem;
min-height: var(--#{$prefix}ribbon-min-size);
min-width: var(--#{$prefix}ribbon-min-size);
&:before {
position: absolute;
@@ -52,17 +63,17 @@
}
.icon {
width: 1.25rem;
height: 1.25rem;
font-size: 1.25rem;
width: var(--#{$prefix}ribbon-icon-size);
height: var(--#{$prefix}ribbon-icon-size);
font-size: var(--#{$prefix}ribbon-icon-size);
}
}
.ribbon-top {
top: calc(-1 * var(--#{$prefix}ribbon-margin));
inset-inline-end: 0.75rem;
width: 2rem;
padding: 0.5rem 0;
inset-inline-end: var(--#{$prefix}ribbon-offset);
width: var(--#{$prefix}ribbon-top-width);
padding: var(--#{$prefix}ribbon-top-padding-y) 0;
@include border-radius(0 var(--#{$prefix}ribbon-border-radius) var(--#{$prefix}ribbon-border-radius) var(--#{$prefix}ribbon-border-radius));
&:before {
@@ -76,7 +87,7 @@
&.ribbon-start {
inset-inline-end: auto;
inset-inline-start: 0.75rem;
inset-inline-start: var(--#{$prefix}ribbon-offset);
&:before {
top: 0;
@@ -103,11 +114,11 @@
.ribbon-bottom {
top: auto;
bottom: 0.75rem;
bottom: var(--#{$prefix}ribbon-offset);
}
.ribbon-bookmark {
padding-inline-start: 0.25rem;
padding-inline-start: var(--#{$prefix}ribbon-padding-y);
@include border-radius(0 0 var(--#{$prefix}ribbon-border-radius) 0);
&:after {
@@ -118,29 +129,29 @@
width: 0;
height: 0;
content: '';
border: 1rem var(--#{$prefix}border-style);
border: var(--#{$prefix}ribbon-bookmark-border-size) var(--#{$prefix}border-style);
border-color: inherit;
border-inline-end-width: 0;
border-inline-start-color: transparent;
border-inline-start-width: 0.5rem;
border-inline-start-width: var(--#{$prefix}ribbon-bookmark-notch-width);
}
&.ribbon-left {
padding-inline-end: 0.5rem;
padding-inline-end: var(--#{$prefix}ribbon-bookmark-notch-width);
&:after {
inset-inline-end: auto;
inset-inline-start: 100%;
border-inline-end-color: transparent;
border-inline-end-width: 0.5rem;
border-inline-end-width: var(--#{$prefix}ribbon-bookmark-notch-width);
border-inline-start-width: 0;
}
}
&.ribbon-top {
padding-inline-end: 0;
padding-bottom: 0.25rem;
padding-bottom: var(--#{$prefix}ribbon-padding-y);
padding-inline-start: 0;
@include border-radius(0 var(--#{$prefix}ribbon-border-radius) 0 0);
@@ -149,10 +160,10 @@
inset-inline-end: 0;
inset-inline-start: 0;
border-color: inherit;
border-width: 1rem;
border-width: var(--#{$prefix}ribbon-bookmark-border-size);
border-top-width: 0;
border-bottom-color: transparent;
border-bottom-width: 0.5rem;
border-bottom-width: var(--#{$prefix}ribbon-bookmark-notch-width);
}
}
}
core/scss/ui/_segmented.scss
+20 -19
View File
@@ -2,17 +2,18 @@
.nav-segmented {
--#{$prefix}nav-bg: var(--#{$prefix}bg-surface-tertiary);
--#{$prefix}nav-padding: 2px;
--#{$prefix}nav-height: 2.5rem;
--#{$prefix}nav-gap: 0.25rem;
--#{$prefix}nav-padding: #{$nav-segmented-padding};
--#{$prefix}nav-height: #{$nav-segmented-height};
--#{$prefix}nav-gap: #{$nav-segmented-gap};
--#{$prefix}nav-active-bg: var(--#{$prefix}bg-surface);
--#{$prefix}nav-font-size: inherit;
--#{$prefix}nav-radius: 6px;
--#{$prefix}nav-radius: #{$nav-segmented-radius};
--#{$prefix}nav-link-disabled-color: var(--#{$prefix}disabled-color);
--#{$prefix}nav-link-gap: 0.25rem;
--#{$prefix}nav-link-padding-x: 0.75rem;
--#{$prefix}nav-link-icon-size: 1.25rem;
--#{$prefix}nav-link-gap: #{$nav-segmented-link-gap};
--#{$prefix}nav-link-padding-x: #{$nav-segmented-link-padding-x};
--#{$prefix}nav-link-icon-size: #{$nav-segmented-link-icon-size};
--#{$prefix}nav-link-icon-margin: #{$nav-segmented-icon-margin};
display: inline-flex;
flex-wrap: wrap;
gap: var(--#{$prefix}nav-gap);
@@ -24,7 +25,7 @@
.nav-link {
display: inline-flex;
gap: calc(0.25rem + var(--#{$prefix}nav-link-gap));
gap: calc(#{$nav-segmented-link-gap} + var(--#{$prefix}nav-link-gap));
align-items: center;
margin: 0;
font-size: var(--#{$prefix}nav-font-size);
@@ -72,7 +73,7 @@
.nav-link-icon {
width: var(--#{$prefix}nav-link-icon-size);
height: var(--#{$prefix}nav-link-icon-size);
margin: 0 -0.25rem;
margin: 0 var(--#{$prefix}nav-link-icon-margin);
color: inherit;
}
}
@@ -86,19 +87,19 @@
}
.nav-sm {
--#{$prefix}nav-height: 2rem;
--#{$prefix}nav-height: #{$nav-segmented-height-sm};
--#{$prefix}nav-font-size: var(--tblr-font-size-h5);
--#{$prefix}nav-radius: 4px;
--#{$prefix}nav-link-padding-x: 0.5rem;
--#{$prefix}nav-link-gap: 0.25rem;
--#{$prefix}nav-link-icon-size: 1rem;
--#{$prefix}nav-radius: #{$nav-segmented-radius-sm};
--#{$prefix}nav-link-padding-x: #{$nav-segmented-link-padding-x-sm};
--#{$prefix}nav-link-gap: #{$nav-segmented-link-gap-sm};
--#{$prefix}nav-link-icon-size: #{$nav-segmented-link-icon-size-sm};
}
.nav-lg {
--#{$prefix}nav-height: 3rem;
--#{$prefix}nav-height: #{$nav-segmented-height-lg};
--#{$prefix}nav-font-size: var(--tblr-font-size-h3);
--#{$prefix}nav-radius: 8px;
--#{$prefix}nav-link-padding-x: 1rem;
--#{$prefix}nav-link-gap: 0.5rem;
--#{$prefix}nav-link-icon-size: 1.5rem;
--#{$prefix}nav-radius: #{$nav-segmented-radius-lg};
--#{$prefix}nav-link-padding-x: #{$nav-segmented-link-padding-x-lg};
--#{$prefix}nav-link-gap: #{$nav-segmented-link-gap-lg};
--#{$prefix}nav-link-icon-size: #{$nav-segmented-link-icon-size-lg};
}
core/scss/ui/_stars.scss
+3 -1
View File
@@ -1,11 +1,13 @@
@use '../config' as *;
.stars {
--#{$prefix}stars-gap: #{$stars-gap};
display: inline-flex;
color: $gray-400;
font-size: $h5-font-size;
.star:not(:first-child) {
margin-inline-start: 0.25rem;
margin-inline-start: var(--#{$prefix}stars-gap);
}
}
core/scss/ui/_status.scss
+8 -5
View File
@@ -47,12 +47,15 @@
--#{$prefix}status-height: #{$status-height};
--#{$prefix}status-color: #{$text-secondary};
--#{$prefix}status-color-rgb: #{to-rgb($text-secondary)};
--#{$prefix}status-padding-y: #{$status-padding-y};
--#{$prefix}status-padding-x: #{$status-padding-x};
--#{$prefix}status-gap: #{$status-gap};
display: inline-flex;
align-items: center;
height: var(--#{$prefix}status-height);
padding: 0.25rem 0.75rem;
gap: 0.5rem;
padding: var(--#{$prefix}status-padding-y) var(--#{$prefix}status-padding-x);
gap: var(--#{$prefix}status-gap);
color: var(--#{$prefix}status-color);
background: color-transparent(var(--#{$prefix}status-color), 0.1);
font-size: $font-size-base;
@@ -68,7 +71,7 @@
}
.icon {
font-size: 1.25rem;
font-size: $status-icon-size;
}
}
@@ -116,7 +119,7 @@
// Status indicator
//
.status-indicator {
--#{$prefix}status-indicator-size: 2.5rem;
--#{$prefix}status-indicator-size: #{$status-indicator-size};
--#{$prefix}status-indicator-color: var(--#{$prefix}status-color, #{$text-secondary});
display: block;
position: relative;
@@ -125,7 +128,7 @@
}
.status-indicator-circle {
--#{$prefix}status-circle-size: 0.75rem;
--#{$prefix}status-circle-size: #{$status-circle-size};
position: absolute;
inset-inline-start: 50%;
top: 50%;
core/scss/ui/_steps.scss
+12 -8
View File
@@ -6,7 +6,7 @@
.steps {
--#{$prefix}steps-color: #{$steps-color};
--#{$prefix}steps-inactive-color: #{$steps-inactive-color};
--#{$prefix}steps-dot-size: 0.5rem;
--#{$prefix}steps-dot-size: #{$steps-dot-size};
--#{$prefix}steps-border-width: #{$steps-border-width};
display: flex;
flex-wrap: nowrap;
@@ -36,9 +36,10 @@
// Step item
//
.step-item {
--#{$prefix}step-item-min-height: #{$step-item-min-height};
position: relative;
flex: 1 1 0;
min-height: 1rem;
min-height: var(--#{$prefix}step-item-min-height);
margin-top: 0;
color: inherit;
text-align: center;
@@ -110,7 +111,7 @@
// Steps counter
//
.steps-counter {
--#{$prefix}steps-dot-size: 1.5rem;
--#{$prefix}steps-dot-size: #{$steps-counter-dot-size};
counter-reset: steps;
.step-item {
@@ -126,21 +127,24 @@
// Steps vertical
//
.steps-vertical {
--#{$prefix}steps-dot-offset: 6px;
--#{$prefix}steps-dot-offset: #{$steps-dot-offset};
--#{$prefix}steps-vertical-padding-start: #{$steps-vertical-padding-start};
--#{$prefix}steps-vertical-item-gap: #{$steps-vertical-item-gap};
--#{$prefix}steps-vertical-connector-gap: #{$steps-vertical-connector-gap};
flex-direction: column;
&.steps-counter {
--#{$prefix}steps-dot-offset: -2px;
--#{$prefix}steps-dot-offset: #{$steps-dot-offset-counter};
}
.step-item {
text-align: start;
padding-top: 0;
padding-inline-start: calc(var(--#{$prefix}steps-dot-size) + 1rem);
padding-inline-start: calc(var(--#{$prefix}steps-dot-size) + var(--#{$prefix}steps-vertical-padding-start));
min-height: auto;
&:not(:first-child) {
margin-top: 1rem;
margin-top: var(--#{$prefix}steps-vertical-item-gap);
}
&:before {
@@ -157,7 +161,7 @@
top: var(--#{$prefix}steps-dot-offset);
inset-inline-start: calc(var(--#{$prefix}steps-dot-size) * 0.5);
width: var(--#{$prefix}steps-border-width);
height: calc(100% + 1rem);
height: calc(100% + var(--#{$prefix}steps-vertical-connector-gap));
}
}
}
core/scss/ui/_tables.scss
+6 -3
View File
@@ -102,6 +102,9 @@
Table sort
*/
.table-sort {
--#{$prefix}table-sort-icon-size: #{$table-sort-icon-size};
--#{$prefix}table-sort-icon-margin-start: #{$table-sort-icon-margin-start};
font: inherit;
color: inherit;
text-transform: inherit;
@@ -124,12 +127,12 @@ Table sort
&:after {
content: '';
display: inline-flex;
width: 1rem;
height: 1rem;
width: var(--#{$prefix}table-sort-icon-size);
height: var(--#{$prefix}table-sort-icon-size);
vertical-align: bottom;
mask-image: $table-sort-bg-image;
background: currentColor;
margin-inline-start: 0.25rem;
margin-inline-start: var(--#{$prefix}table-sort-icon-margin-start);
}
&.asc:after {
core/scss/ui/_tags.scss
+33 -18
View File
@@ -1,32 +1,47 @@
@use '../config' as *;
.tag {
--#{$prefix}tag-height: 1.5rem;
--#{$prefix}tag-height: #{$tag-height};
--#{$prefix}tag-padding-x: #{$tag-padding-x};
--#{$prefix}tag-gap: #{$tag-gap};
--#{$prefix}tag-close-margin-end: #{$tag-close-margin-end};
--#{$prefix}tag-close-margin-start: #{$tag-close-margin-start};
--#{$prefix}tag-close-size: #{$tag-close-size};
--#{$prefix}tag-close-font-size: #{$tag-close-font-size};
--#{$prefix}tag-addon-margin-start: #{$tag-addon-margin-start};
--#{$prefix}tag-icon-margin-end: #{$tag-icon-margin-end};
--#{$prefix}tag-icon-size: #{$tag-icon-size};
--#{$prefix}tag-check-size: #{$tag-check-size};
border: $border-width solid var(--#{$prefix}border-color);
display: inline-flex;
align-items: center;
height: var(--#{$prefix}tag-height);
@include border-radius(var(--#{$prefix}border-radius));
padding: 0 0.5rem;
padding: 0 var(--#{$prefix}tag-padding-x);
background: var(--#{$prefix}bg-surface);
box-shadow: var(--#{$prefix}shadow-input);
gap: 0.5rem;
gap: var(--#{$prefix}tag-gap);
.btn-close {
margin-inline-end: -0.25rem;
margin-inline-start: -0.125rem;
margin-inline-end: var(--#{$prefix}tag-close-margin-end);
margin-inline-start: var(--#{$prefix}tag-close-margin-start);
padding: 0;
width: 1rem;
height: 1rem;
font-size: 0.5rem;
width: var(--#{$prefix}tag-close-size);
height: var(--#{$prefix}tag-close-size);
font-size: var(--#{$prefix}tag-close-font-size);
}
}
.tag-badge {
--#{$prefix}tag-badge-padding-y: #{$tag-badge-padding-y};
--#{$prefix}tag-badge-padding-x: #{$tag-badge-padding-x};
--#{$prefix}tag-badge-margin-end: #{$tag-badge-margin-end};
--#{$prefix}badge-font-size: #{$h6-font-size};
--#{$prefix}badge-padding-x: 0.25rem;
--#{$prefix}badge-padding-y: 0.125rem;
margin-inline-end: -0.25rem;
--#{$prefix}badge-padding-x: var(--#{$prefix}tag-badge-padding-x);
--#{$prefix}badge-padding-y: var(--#{$prefix}tag-badge-padding-y);
margin-inline-end: var(--#{$prefix}tag-badge-margin-end);
}
.tag-avatar,
@@ -34,20 +49,20 @@
.tag-payment,
.tag-icon,
.tag-check {
margin-inline-start: -0.25rem;
margin-inline-start: var(--#{$prefix}tag-addon-margin-start);
}
.tag-icon {
color: var(--#{$prefix}secondary);
margin-inline-end: -0.125rem;
width: 1rem;
height: 1rem;
margin-inline-end: var(--#{$prefix}tag-icon-margin-end);
width: var(--#{$prefix}tag-icon-size);
height: var(--#{$prefix}tag-icon-size);
}
.tag-check {
width: 1rem;
height: 1rem;
background-size: 1rem;
width: var(--#{$prefix}tag-check-size);
height: var(--#{$prefix}tag-check-size);
background-size: var(--#{$prefix}tag-check-size);
}
//
core/scss/ui/_toolbar.scss
+4 -2
View File
@@ -1,13 +1,15 @@
@use '../config' as *;
.toolbar {
--#{$prefix}toolbar-gutter: #{$toolbar-gutter};
display: flex;
flex-wrap: nowrap;
flex-shrink: 0;
margin: 0 -0.5rem;
margin: 0 calc(-1 * var(--#{$prefix}toolbar-gutter));
> * {
margin: 0 0.5rem;
margin: 0 var(--#{$prefix}toolbar-gutter);
}
@include media-print {
core/scss/ui/_tracking.scss
+2 -1
View File
@@ -4,6 +4,7 @@
--#{$prefix}tracking-height: #{$tracking-height};
--#{$prefix}tracking-gap-width: #{$tracking-gap-width};
--#{$prefix}tracking-block-border-radius: #{$tracking-border-radius};
--#{$prefix}tracking-block-min-width: #{$tracking-block-min-width};
display: flex;
gap: var(--#{$prefix}tracking-gap-width);
}
@@ -26,6 +27,6 @@
flex: 1;
@include border-radius(var(--#{$prefix}tracking-block-border-radius));
height: var(--#{$prefix}tracking-height);
min-width: 0.25rem;
min-width: var(--#{$prefix}tracking-block-min-width);
background: var(--#{$prefix}border-color);
}
core/scss/ui/_type.scss
+21 -11
View File
@@ -84,11 +84,13 @@ b {
}
blockquote {
padding: 1rem 1rem 1rem;
--#{$prefix}blockquote-padding: #{$blockquote-padding};
--#{$prefix}blockquote-paragraph-margin-bottom: #{$blockquote-paragraph-margin-bottom};
padding: var(--#{$prefix}blockquote-padding) var(--#{$prefix}blockquote-padding) var(--#{$prefix}blockquote-padding);
border-inline-start: 2px var(--#{$prefix}border-style) var(--#{$prefix}border-color);
p {
margin-bottom: 1rem;
margin-bottom: var(--#{$prefix}blockquote-paragraph-margin-bottom);
}
cite {
@@ -103,11 +105,13 @@ blockquote {
ul,
ol {
padding-inline-start: 1.5rem;
--#{$prefix}list-padding-start: #{$list-padding-start};
padding-inline-start: var(--#{$prefix}list-padding-start);
}
hr {
margin: 2rem 0;
--#{$prefix}hr-margin-y: #{$hr-margin-y};
margin: var(--#{$prefix}hr-margin-y) 0;
}
dl {
@@ -279,19 +283,22 @@ $text-variants: (
}
.steps {
--#{$prefix}steps-padding: 2rem;
--#{$prefix}steps-item-size: 1.5rem;
margin-inline-start: 1rem;
--#{$prefix}steps-padding: #{$steps-padding};
--#{$prefix}steps-item-size: #{$steps-item-size};
--#{$prefix}steps-margin-start: #{$steps-margin-start};
--#{$prefix}steps-margin-bottom: #{$steps-margin-bottom};
--#{$prefix}steps-heading-margin-top: #{$steps-heading-margin-top};
margin-inline-start: var(--#{$prefix}steps-margin-start);
padding-inline-start: var(--#{$prefix}steps-padding);
counter-reset: step;
border-inline-start: 1px solid var(--#{$prefix}border-color);
margin-bottom: 2rem;
margin-bottom: var(--#{$prefix}steps-margin-bottom);
h3 {
counter-increment: step;
&:not(:first-child) {
margin-top: 2.5rem !important;
margin-top: var(--#{$prefix}steps-heading-margin-top) !important;
}
&:before {
@@ -319,10 +326,13 @@ $text-variants: (
}
.callout {
margin-bottom: 1.5rem;
--#{$prefix}callout-margin-bottom: #{$callout-margin-bottom};
--#{$prefix}callout-padding-y: #{$callout-padding-y};
--#{$prefix}callout-padding-x: #{$callout-padding-x};
margin-bottom: var(--#{$prefix}callout-margin-bottom);
border: 1px solid var(--#{$prefix}primary-200);
@include border-radius(var(--#{$prefix}border-radius));
padding: 0.5rem 1rem;
padding: var(--#{$prefix}callout-padding-y) var(--#{$prefix}callout-padding-x);
background: var(--#{$prefix}primary-lt);
& > :last-child {
core/scss/ui/forms/_form-check.scss
+24 -10
View File
@@ -24,7 +24,9 @@ Form check
}
.form-check-input {
background-size: $form-check-input-width;
--#{$prefix}form-check-input-width: #{$form-check-input-width};
background-size: var(--#{$prefix}form-check-input-width);
margin-top: ($form-check-min-height - $form-check-input-width) * 0.5;
box-shadow: $form-check-input-box-shadow;
@@ -34,22 +36,26 @@ Form check
}
.form-check-label {
--#{$prefix}form-check-label-required-gap: #{$form-check-label-required-gap};
display: block;
&.required {
&:after {
content: '*';
margin-inline-start: 0.25rem;
margin-inline-start: var(--#{$prefix}form-check-label-required-gap);
color: $red;
}
}
}
.form-check-description {
--#{$prefix}form-check-description-margin-top: #{$form-check-description-margin-top};
display: block;
color: var(--#{$prefix}secondary);
font-size: $h5-font-size;
margin-top: 0.25rem;
margin-top: var(--#{$prefix}form-check-description-margin-top);
}
.form-check-single {
@@ -71,17 +77,25 @@ Form switch
}
.form-switch-lg {
padding-inline-start: 3.5rem;
min-height: 1.5rem;
--#{$prefix}form-switch-lg-padding-start: #{$form-switch-lg-padding-start};
--#{$prefix}form-switch-lg-min-height: #{$form-switch-lg-min-height};
--#{$prefix}form-switch-lg-height: #{$form-switch-lg-height};
--#{$prefix}form-switch-lg-width: #{$form-switch-lg-width};
--#{$prefix}form-switch-lg-bg-size: #{$form-switch-lg-bg-size};
--#{$prefix}form-switch-lg-input-offset: #{$form-switch-lg-input-offset};
--#{$prefix}form-switch-lg-label-padding-top: #{$form-switch-lg-label-padding-top};
padding-inline-start: var(--#{$prefix}form-switch-lg-padding-start);
min-height: var(--#{$prefix}form-switch-lg-min-height);
.form-check-input {
height: 1.5rem;
width: 2.75rem;
background-size: 1.5rem;
margin-inline-start: -3.5rem;
height: var(--#{$prefix}form-switch-lg-height);
width: var(--#{$prefix}form-switch-lg-width);
background-size: var(--#{$prefix}form-switch-lg-bg-size);
margin-inline-start: var(--#{$prefix}form-switch-lg-input-offset);
}
.form-check-label {
padding-top: 0.125rem;
padding-top: var(--#{$prefix}form-switch-lg-label-padding-top);
}
}
core/scss/ui/forms/_form-colorinput.scss
+3 -2
View File
@@ -4,6 +4,7 @@ Color Input
@use '../../config' as *;
.form-colorinput {
--#{$prefix}form-colorinput-size: #{$form-colorinput-size};
position: relative;
display: inline-block;
margin: 0;
@@ -19,8 +20,8 @@ Color Input
.form-colorinput-color {
display: block;
width: 1.5rem;
height: 1.5rem;
width: var(--#{$prefix}form-colorinput-size);
height: var(--#{$prefix}form-colorinput-size);
color: $white;
border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) $input-border-color-translucent;
@include border-radius(var(--#{$prefix}border-radius));
core/scss/ui/forms/_form-icon.scss
+6 -3
View File
@@ -4,20 +4,23 @@ Icon input
@use '../../config' as *;
.input-icon {
--#{$prefix}input-icon-padding-end: #{$input-icon-padding-end};
--#{$prefix}input-icon-padding-start: #{$input-icon-padding-start};
position: relative;
.form-control:not(:last-child),
.form-select:not(:last-child) {
padding-inline-end: 2.5rem;
padding-inline-end: var(--#{$prefix}input-icon-padding-end);
}
.form-control:not(:first-child),
.form-select:not(:first-child) {
padding-inline-start: 2.5rem;
padding-inline-start: var(--#{$prefix}input-icon-padding-start);
}
}
.input-icon-addon {
--#{$prefix}input-icon-addon-width: #{$input-icon-addon-width};
position: absolute;
top: 0;
bottom: 0;
@@ -26,7 +29,7 @@ Icon input
display: flex;
align-items: center;
justify-content: center;
min-width: 2.5rem;
min-width: var(--#{$prefix}input-icon-addon-width);
height: $input-height;
color: var(--#{$prefix}icon-color);
pointer-events: none;
core/scss/ui/forms/_form-imagecheck.scss
+5 -3
View File
@@ -5,6 +5,8 @@ Image check
.form-imagecheck {
--#{$prefix}form-imagecheck-radius: var(--#{$prefix}border-radius);
--#{$prefix}form-imagecheck-check-offset: #{$form-imagecheck-check-offset};
--#{$prefix}form-imagecheck-caption-padding: #{$form-imagecheck-caption-padding};
position: relative;
margin: 0;
cursor: pointer;
@@ -35,8 +37,8 @@ Image check
&:before {
position: absolute;
top: 0.25rem;
inset-inline-start: 0.25rem;
top: var(--#{$prefix}form-imagecheck-check-offset);
inset-inline-start: var(--#{$prefix}form-imagecheck-check-offset);
z-index: 1;
display: block;
width: $form-check-input-width;
@@ -93,7 +95,7 @@ Image check
}
.form-imagecheck-caption {
padding: 0.25rem;
padding: var(--#{$prefix}form-imagecheck-caption-padding);
font-size: $font-size-sm;
color: var(--#{$prefix}secondary);
text-align: center;
core/scss/ui/forms/_form-selectgroup.scss
+4 -2
View File
@@ -4,10 +4,12 @@ Select group
@use '../../config' as *;
.form-selectgroup {
--#{$prefix}form-selectgroup-gap: #{$form-selectgroup-gap};
--#{$prefix}form-selectgroup-icon-margin-x: #{$form-selectgroup-icon-margin-x};
display: inline-flex;
margin: 0;
flex-wrap: wrap;
gap: 0.5rem;
gap: var(--#{$prefix}form-selectgroup-gap);
.form-selectgroup-item {
margin: 0;
@@ -50,7 +52,7 @@ Select group
@include transition(border-color $transition-time, background $transition-time, color $transition-time);
.icon:only-child {
margin: 0 -0.25rem;
margin: 0 var(--#{$prefix}form-selectgroup-icon-margin-x);
}
&:hover {
core/scss/ui/typo/_hr.scss
+9 -7
View File
@@ -11,6 +11,7 @@ Horizontal rules
Hr text
*/
.hr-text {
--#{$prefix}hr-text-gap: #{$hr-text-gap};
display: flex;
align-items: center;
margin: $hr-margin-y 0;
@@ -26,16 +27,16 @@ Hr text
&:before {
content: '';
margin-inline-end: 0.5rem;
margin-inline-end: var(--#{$prefix}hr-text-gap);
}
&:after {
content: '';
margin-inline-start: 0.5rem;
margin-inline-start: var(--#{$prefix}hr-text-gap);
}
> *:first-child {
padding-inline-end: 0.5rem;
padding-inline-end: var(--#{$prefix}hr-text-gap);
padding-inline-start: 0;
color: var(--#{$prefix}secondary);
}
@@ -47,8 +48,8 @@ Hr text
}
& > *:first-child {
padding-inline-end: 0.5rem;
padding-inline-start: 0.5rem;
padding-inline-end: var(--#{$prefix}hr-text-gap);
padding-inline-start: var(--#{$prefix}hr-text-gap);
}
}
@@ -64,7 +65,7 @@ Hr text
& > *:first-child {
padding-inline-end: 0;
padding-inline-start: 0.5rem;
padding-inline-start: var(--#{$prefix}hr-text-gap);
}
}
@@ -74,5 +75,6 @@ Hr text
}
.hr-text-spaceless {
margin: -0.5rem 0;
--#{$prefix}hr-text-spaceless-margin-y: #{$hr-text-spaceless-margin-y};
margin: var(--#{$prefix}hr-text-spaceless-margin-y) 0;
}