From 00431f2a4f7d0e5dd093d805db52d3473230c2fa Mon Sep 17 00:00:00 2001 From: ValentinNelu <105430234+ValentinNelu@users.noreply.github.com> Date: Fri, 26 Jan 2024 15:05:18 +0100 Subject: [PATCH] feat(style): add prefix + customization + sizing (#412) --- style-bootstrap/scss/_slider.scss | 112 ++++++++++++++++----------- style-bootstrap/scss/_variables.scss | 98 +++++++++++++---------- 2 files changed, 120 insertions(+), 90 deletions(-) diff --git a/style-bootstrap/scss/_slider.scss b/style-bootstrap/scss/_slider.scss index 9a0d9158c4..b50c9f2626 100644 --- a/style-bootstrap/scss/_slider.scss +++ b/style-bootstrap/scss/_slider.scss @@ -19,53 +19,55 @@ } .au-slider { - --#{$prefix}slider-background-color: #{$slider-color-background}; - --#{$prefix}slider-font-size: #{$slider-font-size}; - --#{$prefix}slider-border-radius: #{$slider-border-radius}; - --#{$prefix}slider-line-height: #{$slider-line-height}; - - --#{$prefix}slider-primary-size: #{$slider-primary-size}; - --#{$prefix}slider-secondary-size: #{$slider-secondary-size}; - --#{$prefix}slider-margin-block-start: #{$slider-margin-block-start}; - --#{$prefix}slider-margin-block-end: #{$slider-margin-block-end}; - --#{$prefix}slider-vertical-margin-inline-start: #{$slider-vertical-margin-inline-start}; - --#{$prefix}slider-vertical-margin-inline-end: #{$slider-vertical-margin-inline-end}; - --#{$prefix}slider-translate-vertical: #{$slider-translate-vertical}; - --#{$prefix}slider-translate-horizontal: #{$slider-translate-horizontal}; - - --#{$prefix}slider-handle-color: #{$slider-handle-color}; - --#{$prefix}slider-handle-size: #{$slider-handle-size}; - --#{$prefix}slider-handle-border: #{$slider-handle-border}; - --#{$prefix}slider-handle-border-radius: #{$slider-handle-border-radius}; - --#{$prefix}slider-handle-outline: #{$slider-handle-outline}; - --#{$prefix}slider-handle-focus-box-shadow: #{$slider-handle-focus-box-shadow}; - - --#{$prefix}slider-progress-color: #{$slider-progress-color}; - --#{$prefix}slider-progress-height: #{$slider-progress-height}; - --#{$prefix}slider-progress-vertical-transform: #{$slider-progress-vertical-transform}; - - --#{$prefix}slider-label-margin-block-start: #{$slider-label-margin-block-start}; - - --#{$prefix}slider-label-min-position: #{$slider-label-min-position}; - --#{$prefix}slider-label-max-position: #{$slider-label-max-position}; - --#{$prefix}slider-label-now-transform: #{$slider-label-now-transform}; - - --#{$prefix}slider-label-vertical-margin-inline-start: #{$slider-label-vertical-margin-inline-start}; - --#{$prefix}slider-label-vertical-min-transform: #{$slider-label-vertical-min-transform}; - --#{$prefix}slider-label-vertical-max-transform: #{$slider-label-vertical-max-transform}; - --#{$prefix}slider-label-vertical-white-space: #{$slider-label-vertical-white-space}; - --#{$prefix}slider-label-vertical-min-top: #{$slider-label-vertical-min-top}; - --#{$prefix}slider-label-vertical-max-top: #{$slider-label-vertical-max-top}; - --#{$prefix}slider-label-vertical-now-transform: #{$slider-label-vertical-now-transform}; - - --#{$prefix}slider-clickable-area-main-size: #{$slider-clickable-area-main-size}; - --#{$prefix}slider-clickable-area-secondary-size: #{$slider-clickable-area-secondary-size}; - --#{$prefix}slider-clickable-area-translate: #{$slider-clickable-area-translateY}; - --#{$prefix}slider-clickable-area-vertical-translate: #{$slider-clickable-area-translateX}; - --#{$prefix}slider-clickable-area-vertical-flex-shrink: #{$slider-clickable-area-vertical-flex-shrink}; - - --#{$prefix}slider-disabled-color: #{$slider-disabled-color}; - --#{$prefix}slider-disabled-cursor: #{$slider-disabled-cursor}; + --#{$prefix}slider-background-color: #{$au-slider-color-background}; + --#{$prefix}slider-font-size: #{$au-slider-font-size}; + --#{$prefix}slider-border-radius: #{$au-slider-border-radius}; + --#{$prefix}slider-line-height: #{$au-slider-line-height}; + + --#{$prefix}slider-primary-size: #{$au-slider-primary-size}; + --#{$prefix}slider-secondary-size: #{$au-slider-secondary-size}; + --#{$prefix}slider-margin-block-start: #{$au-slider-margin-block-start}; + --#{$prefix}slider-margin-block-end: #{$au-slider-margin-block-end}; + --#{$prefix}slider-vertical-margin-inline-start: #{$au-slider-vertical-margin-inline-start}; + --#{$prefix}slider-vertical-margin-inline-end: #{$au-slider-vertical-margin-inline-end}; + --#{$prefix}slider-translate-vertical: #{$au-slider-translate-vertical}; + --#{$prefix}slider-translate-horizontal: #{$au-slider-translate-horizontal}; + + --#{$prefix}slider-handle-color: #{$au-slider-handle-color}; + --#{$prefix}slider-handle-size: #{$au-slider-handle-size}; + --#{$prefix}slider-handle-border: #{$au-slider-handle-border}; + --#{$prefix}slider-handle-border-hover: #{$au-slider-handle-border-hover}; + --#{$prefix}slider-handle-border-radius: #{$au-slider-handle-border-radius}; + --#{$prefix}slider-handle-outline: #{$au-slider-handle-outline}; + --#{$prefix}slider-handle-focus-box-shadow: #{$au-slider-handle-focus-box-shadow}; + + --#{$prefix}slider-progress-color: #{$au-slider-progress-color}; + --#{$prefix}slider-progress-height: #{$au-slider-progress-height}; + --#{$prefix}slider-progress-vertical-transform: #{$au-slider-progress-vertical-transform}; + + --#{$prefix}slider-label-margin-block-start: #{$au-slider-label-margin-block-start}; + --#{$prefix}slider-label-now-font-weight: #{$au-slider-label-now-font-weight}; + + --#{$prefix}slider-label-min-position: #{$au-slider-label-min-position}; + --#{$prefix}slider-label-max-position: #{$au-slider-label-max-position}; + --#{$prefix}slider-label-now-transform: #{$au-slider-label-now-transform}; + + --#{$prefix}slider-label-vertical-margin-inline-start: #{$au-slider-label-vertical-margin-inline-start}; + --#{$prefix}slider-label-vertical-min-transform: #{$au-slider-label-vertical-min-transform}; + --#{$prefix}slider-label-vertical-max-transform: #{$au-slider-label-vertical-max-transform}; + --#{$prefix}slider-label-vertical-white-space: #{$au-slider-label-vertical-white-space}; + --#{$prefix}slider-label-vertical-min-top: #{$au-slider-label-vertical-min-top}; + --#{$prefix}slider-label-vertical-max-top: #{$au-slider-label-vertical-max-top}; + --#{$prefix}slider-label-vertical-now-transform: #{$au-slider-label-vertical-now-transform}; + + --#{$prefix}slider-clickable-area-main-size: #{$au-slider-clickable-area-main-size}; + --#{$prefix}slider-clickable-area-secondary-size: #{$au-slider-clickable-area-secondary-size}; + --#{$prefix}slider-clickable-area-translate: #{$au-slider-clickable-area-translateY}; + --#{$prefix}slider-clickable-area-vertical-translate: #{$au-slider-clickable-area-translateX}; + --#{$prefix}slider-clickable-area-vertical-flex-shrink: #{$au-slider-clickable-area-vertical-flex-shrink}; + + --#{$prefix}slider-disabled-color: #{$au-slider-disabled-color}; + --#{$prefix}slider-disabled-cursor: #{$au-slider-disabled-cursor}; display: flex; background-color: var(--#{$prefix}slider-background-color); @@ -74,6 +76,14 @@ line-height: var(--#{$prefix}slider-line-height); position: relative; + &.au-slider-lg { + @include setSliderSize($au-slider-bar-size-lg, $au-slider-handle-size-lg, $au-slider-font-size-lg, $au-slider-offset-lg); + } + + &.au-slider-sm { + @include setSliderSize($au-slider-bar-size-sm, $au-slider-handle-size-sm, $au-slider-font-size-sm, $au-slider-offset-sm); + } + &.au-slider-horizontal { width: var(--#{$prefix}slider-primary-size); height: var(--#{$prefix}slider-secondary-size); @@ -96,6 +106,11 @@ } } + &.au-slider-handle-horizontal.au-slider-label-now, + &.au-slider-handle-vertical.au-slider-label-now { + font-weight: (--#{$prefix}slider-label-now-font-weight); + } + .au-slider-handle { background-color: var(--#{$prefix}slider-handle-color); border: var(--#{$prefix}slider-handle-border); @@ -105,6 +120,9 @@ width: var(--#{$prefix}slider-handle-size); height: var(--#{$prefix}slider-handle-size); + &:not([disabled]):hover { + border: var(--#{$prefix}slider-handle-border-hover); + } &:focus { box-shadow: var(--#{$prefix}slider-handle-focus-box-shadow); } diff --git a/style-bootstrap/scss/_variables.scss b/style-bootstrap/scss/_variables.scss index 246f10f2a8..fdc8379b42 100644 --- a/style-bootstrap/scss/_variables.scss +++ b/style-bootstrap/scss/_variables.scss @@ -2,47 +2,59 @@ $prefix: bs- !default; //slider variables -$slider-color-background: var(--#{$prefix}secondary-bg) !default; -$slider-font-size: 1rem !default; -$slider-line-height: 1.5 !default; -$slider-primary-size: 100% !default; -$slider-secondary-size: 0.25rem !default; -$slider-border-radius: 0.125rem !default; -$slider-margin-block-start: 2rem !default; // calc -$slider-margin-block-end: 1rem !default; // calc -$slider-vertical-margin-inline-start: 1rem !default; -$slider-vertical-margin-inline-end: 3rem !default; -$slider-translate-vertical: translateY(-50%) !default; -$slider-translate-horizontal: translateX(-50%) !default; -$focus-ring-opacity: 0.25 !default; -$focus-ring-width: 0.25rem !default; -$focus-ring-color: rgba(#0d6efd, $focus-ring-opacity) !default; -$slider-handle-color: var(--#{$prefix}primary) !default; -$slider-handle-size: 1.25rem !default; -$slider-handle-border: none !default; -$slider-handle-border-radius: 50% !default; -$slider-handle-outline: none !default; -$slider-handle-focus-box-shadow: 0 0 0 $focus-ring-width $focus-ring-color !default; -$slider-progress-color: var(--#{$prefix}primary) !default; -$slider-progress-height: 0.25rem !default; -$slider-progress-vertical-transform: rotate(90deg) !default; -$slider-label-margin-block-start: calc( - -1 * (#{$slider-font-size} * #{$slider-line-height} + (#{$slider-handle-size} - #{$slider-secondary-size}) / 2) +$au-slider-color-background: var(--#{$prefix}secondary-bg) !default; +$au-slider-font-size: 1rem !default; +$au-slider-line-height: 1.5 !default; +$au-slider-primary-size: 100% !default; +$au-slider-secondary-size: 0.25rem !default; +$au-slider-border-radius: 0.125rem !default; +$au-slider-margin-block-start: 2rem !default; // calc +$au-slider-margin-block-end: 1rem !default; // calc +$au-slider-vertical-margin-inline-start: 1rem !default; +$au-slider-vertical-margin-inline-end: 3rem !default; +$au-slider-translate-vertical: translateY(-50%) !default; +$au-slider-translate-horizontal: translateX(-50%) !default; +$au-focus-ring-opacity: 0.25 !default; +$au-focus-ring-width: 0.25rem !default; +$au-focus-ring-color: rgba(#0d6efd, $au-focus-ring-opacity) !default; +$au-slider-handle-color: var(--#{$prefix}primary) !default; +$au-slider-handle-size: 1.25rem !default; +$au-slider-handle-border: none !default; +$au-slider-handle-border-hover: none !default; +$au-slider-handle-border-radius: 50% !default; +$au-slider-handle-outline: none !default; +$au-slider-handle-focus-box-shadow: 0 0 0 $au-focus-ring-width $au-focus-ring-color !default; +$au-slider-progress-color: var(--#{$prefix}primary) !default; +$au-slider-progress-height: 0.25rem !default; +$au-slider-progress-vertical-transform: rotate(90deg) !default; +$au-slider-label-now-font-weight: normal !default; +$au-slider-label-margin-block-start: calc( + -1 * (#{$au-slider-font-size} * #{$au-slider-line-height} + (#{$au-slider-handle-size} - #{$au-slider-secondary-size}) / 2) ) !default; -$slider-label-min-position: 0 !default; -$slider-label-max-position: 0 !default; -$slider-label-now-transform: translateX(-50%) !default; -$slider-label-vertical-margin-inline-start: 1rem !default; -$slider-label-vertical-min-transform: translateY(-75%) !default; -$slider-label-vertical-max-transform: translateY(-25%) !default; -$slider-label-vertical-white-space: nowrap !default; -$slider-label-vertical-min-top: 100% !default; -$slider-label-vertical-max-top: 0% !default; -$slider-label-vertical-now-transform: translateY(-50%) !default; -$slider-clickable-area-translateY: translateY(-50%) !default; -$slider-clickable-area-translateX: translateX(-50%) !default; -$slider-clickable-area-main-size: 1.5rem !default; -$slider-clickable-area-secondary-size: 100% !default; -$slider-clickable-area-vertical-flex-shrink: 0 !default; -$slider-disabled-color: var(--#{$prefix}dark-bg-subtle) !default; -$slider-disabled-cursor: not-allowed !default; +$au-slider-label-min-position: 0 !default; +$au-slider-label-max-position: 0 !default; +$au-slider-label-now-transform: translateX(-50%) !default; +$au-slider-label-vertical-margin-inline-start: 1rem !default; +$au-slider-label-vertical-min-transform: translateY(-75%) !default; +$au-slider-label-vertical-max-transform: translateY(-25%) !default; +$au-slider-label-vertical-white-space: nowrap !default; +$au-slider-label-vertical-min-top: 100% !default; +$au-slider-label-vertical-max-top: 0% !default; +$au-slider-label-vertical-now-transform: translateY(-50%) !default; +$au-slider-clickable-area-translateY: translateY(-50%) !default; +$au-slider-clickable-area-translateX: translateX(-50%) !default; +$au-slider-clickable-area-main-size: 1.5rem !default; +$au-slider-clickable-area-secondary-size: 100% !default; +$au-slider-clickable-area-vertical-flex-shrink: 0 !default; +$au-slider-disabled-color: var(--#{$prefix}dark-bg-subtle) !default; +$au-slider-disabled-cursor: not-allowed !default; + +$au-slider-bar-size-sm: 0.2rem !default; +$au-slider-handle-size-sm: 1rem !default; +$au-slider-font-size-sm: 0.875rem !default; +$au-slider-offset-sm: 0rem !default; + +$au-slider-bar-size-lg: 0.3125rem !default; +$au-slider-handle-size-lg: 1.5rem !default; +$au-slider-font-size-lg: 1.125rem !default; +$au-slider-offset-lg: 0rem !default;