Skip to content

Commit

Permalink
fix(toggle): use rem instead of px values (#3858)
Browse files Browse the repository at this point in the history 
* fix(toggle): positioning for diff base font size

* fix(toggle): margin for text

* fix(toggle): responsive size of small checkmark

* fix(toggle): use carbon--rem function
  • Loading branch information
@timrbula @tw15egan
timrbula authored and tw15egan committed Aug 29, 2019
1 parent 8297350 commit d2990fd
Showing 1 changed file with 46 additions and 44 deletions.
90 changes: 46 additions & 44 deletions packages/components/src/components/toggle/_toggle.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,8 +39,8 @@

.#{$prefix}--toggle__appearance {
position: relative;
width: rem(48px);
height: rem(24px);
width: carbon--rem(48px);
height: carbon--rem(24px);

// Toggle background oval
&:before {
Expand All @@ -50,9 +50,9 @@
background-color: $ui-04;
cursor: pointer;
box-sizing: border-box;
height: rem(24px);
width: rem(48px);
border-radius: rem(15px);
height: carbon--rem(24px);
width: carbon--rem(48px);
border-radius: carbon--rem(15px);
top: 0;
will-change: box-shadow;
box-shadow: 0 0 0 2px transparent;
Expand All @@ -66,10 +66,10 @@
position: absolute;
display: block;
cursor: pointer;
left: 3px;
top: 3px;
width: rem(18px);
height: rem(18px);
left: carbon--rem(3px);
top: carbon--rem(3px);
width: carbon--rem(18px);
height: carbon--rem(18px);
background-color: $ui-03;
border-radius: 50%;
content: '';
Expand All @@ -80,8 +80,10 @@
.#{$prefix}--toggle__check {
fill: $ui-03;
position: absolute;
left: 6px;
top: 6px;
left: carbon--rem(6px);
top: carbon--rem(6px);
width: carbon--rem(6px);
height: carbon--rem(5px);
z-index: 1;
transition: $duration--fast-01 motion(exit, productive);
transform: scale(0.2);
Expand All @@ -96,7 +98,7 @@

.#{$prefix}--toggle__text--left {
position: absolute;
left: rem(48px);
left: carbon--rem(48px);
}

.#{$prefix}--toggle:checked
Expand Down Expand Up @@ -126,7 +128,7 @@

&:after {
background-color: $icon-03;
transform: translateX(24px);
transform: translateX(carbon--rem(24px));
}
}

Expand Down Expand Up @@ -199,44 +201,44 @@
.#{$prefix}--toggle--small
+ .#{$prefix}--toggle__label
.#{$prefix}--toggle__appearance {
width: rem(32px);
height: rem(16px);
width: carbon--rem(32px);
height: carbon--rem(16px);

&:before {
box-sizing: border-box;
height: rem(16px);
width: rem(32px);
height: carbon--rem(16px);
width: carbon--rem(32px);
border-radius: 0.9375rem;
top: 0;
}

&:after {
width: rem(10px);
height: rem(10px);
top: 3px;
left: 3px;
width: carbon--rem(10px);
height: carbon--rem(10px);
top: carbon--rem(3px);
left: carbon--rem(3px);
}
}

.#{$prefix}--toggle--small:checked
+ .#{$prefix}--toggle__label
.#{$prefix}--toggle__check {
fill: $support-02;
transform: scale(1) translateX(16px);
transform: scale(1) translateX(carbon--rem(16px));
}

.#{$prefix}--toggle--small
+ .#{$prefix}--toggle__label
.#{$prefix}--toggle__text--left {
left: rem(32px);
left: carbon--rem(32px);
}

.#{$prefix}--toggle--small:checked
+ .#{$prefix}--toggle__label
.#{$prefix}--toggle__appearance {
&:after {
margin-left: 0px;
transform: translateX(17px);
transform: translateX(carbon--rem(17px));
}
}

Expand Down Expand Up @@ -266,8 +268,8 @@
position: relative;
display: flex;
align-items: center;
width: rem(48px);
height: rem(24px);
width: carbon--rem(48px);
height: carbon--rem(24px);
margin: $carbon--spacing-03 0;
cursor: pointer;

Expand All @@ -277,9 +279,9 @@
position: absolute;
top: 0;
display: block;
width: rem(48px);
height: rem(24px);
border-radius: rem(15px);
width: carbon--rem(48px);
height: carbon--rem(24px);
border-radius: carbon--rem(15px);
content: '';
background-color: $ui-04;
will-change: box-shadow;
Expand All @@ -292,11 +294,11 @@
&::after {
box-sizing: border-box;
position: absolute;
top: 3px;
left: 3px;
top: carbon--rem(3px);
left: carbon--rem(3px);
display: block;
width: rem(18px);
height: rem(18px);
width: carbon--rem(18px);
height: carbon--rem(18px);
border-radius: 50%;
background-color: $ui-03;
content: '';
Expand All @@ -307,7 +309,7 @@
.#{$prefix}--toggle__text--off,
.#{$prefix}--toggle__text--on {
position: absolute;
margin-left: carbon--mini-units(7);
margin-left: carbon--rem(56px);
@include type-style('body-short-01');
user-select: none;
}
Expand Down Expand Up @@ -335,7 +337,7 @@

&::after {
background-color: $icon-03;
transform: translateX(24px);
transform: translateX(carbon--rem(24px));
}
}

Expand Down Expand Up @@ -393,35 +395,35 @@
// ---------------------------------------------
.#{$prefix}--toggle-input--small + .#{$prefix}--toggle-input__label {
> .#{$prefix}--toggle__switch {
width: rem(32px);
height: rem(16px);
width: carbon--rem(32px);
height: carbon--rem(16px);

&::before {
width: rem(32px);
height: rem(16px);
width: carbon--rem(32px);
height: carbon--rem(16px);
border-radius: 0.9375rem;
}

&::after {
width: rem(10px);
height: rem(10px);
width: carbon--rem(10px);
height: carbon--rem(10px);
}
}

.#{$prefix}--toggle__text--off,
.#{$prefix}--toggle__text--on {
margin-left: $carbon--spacing-08;
margin-left: carbon--rem(40px);
}
}

.#{$prefix}--toggle-input--small:checked + .#{$prefix}--toggle-input__label {
> .#{$prefix}--toggle__switch::after {
transform: translateX(17px);
transform: translateX(carbon--rem(17px));
}

.#{$prefix}--toggle__check {
fill: $support-02;
transform: scale(1) translateX(16px);
transform: scale(1) translateX(carbon--rem(16px));
}
}

Expand Down

0 comments on commit d2990fd

Please sign in to comment.