Skip to content

Commit

Permalink
feat(style): add prefix + customization + sizing (#412)
Browse files Browse the repository at this point in the history
  • Loading branch information
@ValentinNelu
ValentinNelu authored Jan 26, 2024
1 parent 48a7c13 commit 00431f2
Show file tree
Hide file tree
Showing 2 changed files with 120 additions and 90 deletions.
112 changes: 65 additions & 47 deletions style-bootstrap/scss/_slider.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand All @@ -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);
Expand All @@ -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);
Expand All @@ -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);
}
Expand Down
98 changes: 55 additions & 43 deletions style-bootstrap/scss/_variables.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;

0 comments on commit 00431f2

Please sign in to comment.