Merge branch 'master' into 3811-icon-tooltip-sync

carbon-design-system · Aug 29, 2019 · 8dff5f1 · 8dff5f1
2 parents b73b14f + 4d14322
commit 8dff5f1
Show file tree

Hide file tree

Showing 2 changed files with 94 additions and 92 deletions.
diff --git a/packages/components/docs/sass.md b/packages/components/docs/sass.md
@@ -2295,6 +2295,7 @@ Convert a given px unit to a rem unit
   - [carbon--base-font-size [variable]](#carbon--base-font-size-variable)
 - **Used by**:
   - [carbon--mini-units [function]](#carbon--mini-units-function)
+  - [toggle [mixin]](#toggle-mixin)
 
 ### ✅carbon--em [function]
 
@@ -2501,7 +2502,6 @@ Get the value of the corresponding number of units
   - [listbox [mixin]](#listbox-mixin)
   - [multiselect [mixin]](#multiselect-mixin)
   - [pagination [mixin]](#pagination-mixin)
-  - [toggle [mixin]](#toggle-mixin)
   - [carbon-header-panel [mixin]](#carbon-header-panel-mixin)
 
 ### ✅carbon--spacing-01 [variable]
@@ -2734,7 +2734,6 @@ $carbon--spacing-08: carbon--mini-units(5);
   - [search [mixin]](#search-mixin)
   - [text-area [mixin]](#text-area-mixin)
   - [text-input [mixin]](#text-input-mixin)
-  - [toggle [mixin]](#toggle-mixin)
 
 ### ✅carbon--spacing-09 [variable]
 
@@ -18007,8 +18006,8 @@ Toggle styles
 
   .#{$prefix}--toggle__appearance {
     position: relative;
-    width: rem(48px);
-    height: rem(24px);
+    width: carbon--rem(48px);
+    height: carbon--rem(24px);
 
     // Toggle background oval
     &:before {
@@ -18018,9 +18017,9 @@ Toggle styles
       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;
@@ -18034,10 +18033,10 @@ Toggle styles
       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: '';
@@ -18048,8 +18047,10 @@ Toggle styles
   .#{$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);
@@ -18064,7 +18065,7 @@ Toggle styles
 
   .#{$prefix}--toggle__text--left {
     position: absolute;
-    left: rem(48px);
+    left: carbon--rem(48px);
   }
 
   .#{$prefix}--toggle:checked
@@ -18094,7 +18095,7 @@ Toggle styles
 
     &:after {
       background-color: $icon-03;
-      transform: translateX(24px);
+      transform: translateX(carbon--rem(24px));
     }
   }
 
@@ -18167,44 +18168,44 @@ Toggle styles
   .#{$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));
     }
   }
 
@@ -18234,8 +18235,8 @@ Toggle styles
     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;
 
@@ -18245,9 +18246,9 @@ Toggle styles
       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;
@@ -18260,11 +18261,11 @@ Toggle styles
     &::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: '';
@@ -18275,7 +18276,7 @@ Toggle styles
   .#{$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;
   }
@@ -18303,7 +18304,7 @@ Toggle styles
 
     &::after {
       background-color: $icon-03;
-      transform: translateX(24px);
+      transform: translateX(carbon--rem(24px));
     }
   }
 
@@ -18361,35 +18362,35 @@ Toggle styles
   // ---------------------------------------------
   .#{$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));
     }
   }
 
@@ -18405,7 +18406,7 @@ Toggle styles
 
 - **Group**: [toggle](#toggle)
 - **Requires**:
-  - [carbon--mini-units [function]](#carbon--mini-units-function)
+  - [carbon--rem [function]](#carbon--rem-function)
   - [prefix [variable]](#prefix-variable)
   - [carbon--spacing-03 [variable]](#carbon--spacing-03-variable)
   - [ui-04 [variable]](#ui-04-variable)
@@ -18416,7 +18417,6 @@ Toggle styles
   - [disabled-01 [variable]](#disabled-01-variable)
   - [disabled-02 [variable]](#disabled-02-variable)
   - [text-02 [variable]](#text-02-variable)
-  - [carbon--spacing-08 [variable]](#carbon--spacing-08-variable)
 
 ## toolbar