Skip to content

Commit

Permalink
Merge pull request #5747 from pat270/LPS-202286
Browse files Browse the repository at this point in the history 
feat(@clayui/css): Toggle Switch adds toggle-switch-sm modifier
  • Loading branch information
@matuzalemsteles
matuzalemsteles authored Jan 19, 2024
2 parents 2f0448a + 5942b01 commit 834d15a
Show file tree
Hide file tree
Showing 11 changed files with 417 additions and 89 deletions.
39 changes: 39 additions & 0 deletions packages/clay-css/src/scss/atlas/variables/_toggle-switch.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,3 +40,42 @@ $toggle-switch-button-on-bg: $white !default;
$toggle-switch-button-on-border-color: $white !default;
$toggle-switch-button-on-border-radius: $toggle-switch-button-border-radius !default;
$toggle-switch-button-on-icon-color: $primary !default;

// .toggle-switch-sm

$toggle-switch-sizes: () !default;
$toggle-switch-sizes: map-deep-merge(
(
toggle-switch-sm: (
toggle-switch-check: (
toggle-switch-bar: (
after: (
bottom: 0,
height: 12px,
left: 2px,
top: 2px,
width: 12px,
),
toggle-switch-icon: (
font-size: 0.5rem,
top: 0px,
),
toggle-switch-icon-off: (
left: 13px,
),
),
checked: (
toggle-switch-bar: (
after: (
left: 16px,
),
button-icon: (
left: 14px,
),
),
),
),
),
),
$toggle-switch-sizes
);
32 changes: 32 additions & 0 deletions packages/clay-css/src/scss/cadmin/components/_toggle-switch.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -51,3 +51,35 @@
.simple-toggle-switch-reverse {
@include clay-toggle-switch-variant($cadmin-simple-toggle-switch-reverse);
}

// Toggle Switch Sizes

@each $size, $value in $cadmin-toggle-switch-sizes {
@if not clay-is-map-unset($value) {
$selector: if(
starts-with($size, 'toggle-switch-'),
clay-str-replace($size, 'toggle-switch-', '.toggle-switch-'),
$size
);

@if (starts-with($size, '%') or map-get($value, extend)) {
#{$selector} {
@include clay-toggle-switch-variant($value);
}
} @else if (starts-with($size, 'toggle-switch-')) {
$placeholder: '%clay-#{$size}';

#{$placeholder} {
@include clay-toggle-switch-variant($value);
}

#{$selector} {
@extend #{$placeholder} !optional;
}
} @else {
#{$selector} {
@include clay-toggle-switch-variant($value);
}
}
}
}
68 changes: 67 additions & 1 deletion packages/clay-css/src/scss/cadmin/variables/_toggle-switch.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,8 @@ $cadmin-toggle-switch-cursor: $cadmin-link-cursor !default;
$cadmin-toggle-switch-font-weight: $cadmin-input-label-font-weight !default;
$cadmin-toggle-switch-transition: background-color 100ms ease-in,
border-color 100ms ease-in, box-shadow 150ms ease-in-out,
color 100ms ease-in, left 100ms ease-in, right 100ms ease-in !default;
color 100ms ease-in, left 100ms ease-in, opacity 100ms ease-in,
right 100ms ease-in !default;

// must all be same units--start
$cadmin-toggle-switch-bar-padding: 4px !default; // space between button and bar, can be negative value
Expand Down Expand Up @@ -469,3 +470,68 @@ $cadmin-simple-toggle-switch-reverse: map-deep-merge(
),
$cadmin-simple-toggle-switch-reverse
);

// .toggle-switch-sm

$cadmin-toggle-switch-sizes: () !default;
$cadmin-toggle-switch-sizes: map-deep-merge(
(
toggle-switch-sm: (
simple-toggle-switch: (
toggle-switch-label: (
max-width: calc(100% - 38px),
),
),
toggle-switch-check: (
height: 16px,
width: 30px,
toggle-switch-bar: (
height: 16px,
line-height: 16px,
before: (
width: 30px,
),
after: (
bottom: 0,
height: 12px,
left: 2px,
top: 2px,
width: 12px,
),
toggle-switch-handle: (
min-width: 30px,
after: (
margin-left: 38px,
),
),
toggle-switch-icon: (
font-size: 8px,
height: 16px,
left: 0,
line-height: 16px,
top: 0px,
width: 16px,
),
toggle-switch-icon-off: (
left: 13px,
),
),
checked: (
toggle-switch-bar: (
after: (
left: 16px,
),
button-icon: (
left: 14px,
),
),
),
),
toggle-switch-label: (
font-size: 12px,
max-width: calc(100% - 38px),
),
),
),
$cadmin-toggle-switch-sizes
);
32 changes: 32 additions & 0 deletions packages/clay-css/src/scss/components/_toggle-switch.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -69,3 +69,35 @@
.simple-toggle-switch-reverse.simple-toggle-switch {
@include clay-toggle-switch-variant($simple-toggle-switch-reverse);
}

// Toggle Switch Sizes

@each $size, $value in $toggle-switch-sizes {
@if not clay-is-map-unset($value) {
$selector: if(
starts-with($size, 'toggle-switch-'),
clay-str-replace($size, 'toggle-switch-', '.toggle-switch-'),
$size
);

@if (starts-with($size, '%') or map-get($value, extend)) {
#{$selector} {
@include clay-toggle-switch-variant($value);
}
} @else if (starts-with($size, 'toggle-switch-')) {
$placeholder: '%clay-#{$size}';

#{$placeholder} {
@include clay-toggle-switch-variant($value);
}

#{$selector} {
@extend #{$placeholder} !optional;
}
} @else {
#{$selector} {
@include clay-toggle-switch-variant($value);
}
}
}
}
7 changes: 7 additions & 0 deletions packages/clay-css/src/scss/mixins/_toggle-switch.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1051,6 +1051,13 @@

@include clay-css($map);

.simple-toggle-switch,
&.simple-toggle-switch {
@include clay-toggle-switch-variant(
map-get($map, simple-toggle-switch)
);
}

.toggle-switch-check-bar {
@include clay-css(map-get($map, toggle-switch-check-bar));

Expand Down
64 changes: 63 additions & 1 deletion packages/clay-css/src/scss/variables/_toggle-switch.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,8 @@ $toggle-switch-font-weight: if(
) !default;
$toggle-switch-transition: background-color 100ms ease-in,
border-color 100ms ease-in, box-shadow 150ms ease-in-out,
color 100ms ease-in, left 100ms ease-in, right 100ms ease-in !default;
color 100ms ease-in, left 100ms ease-in, opacity 100ms ease-in,
right 100ms ease-in !default;

// must all be same units--start
$toggle-switch-bar-padding: 0 !default; // space between button and bar, can be negative value
Expand Down Expand Up @@ -487,3 +488,64 @@ $simple-toggle-switch-reverse: map-deep-merge(
),
$simple-toggle-switch-reverse
);

// .toggle-switch-sm

$toggle-switch-sizes: () !default;
$toggle-switch-sizes: map-deep-merge(
(
toggle-switch-sm: (
simple-toggle-switch: (
toggle-switch-label: (
max-width: calc(100% - 38px),
),
),
toggle-switch-check: (
height: 16px,
width: 30px,
toggle-switch-bar: (
height: 16px,
line-height: 16px,
before: (
width: 30px,
),
after: (
height: 16px,
width: 16px,
),
toggle-switch-handle: (
min-width: 30px,
after: (
margin-left: 38px,
),
),
toggle-switch-icon: (
font-size: 0.6875rem,
height: 16px,
left: 0,
line-height: 16px,
width: 16px,
),
toggle-switch-icon-off: (
left: 14px,
),
),
checked: (
toggle-switch-bar: (
after: (
left: 14px,
),
button-icon: (
left: 14px,
),
),
),
),
toggle-switch-label: (
font-size: 0.75rem,
max-width: calc(100% - 38px),
),
),
),
$toggle-switch-sizes
);
Loading

0 comments on commit 834d15a

Please sign in to comment.