Merge pull request #5166 from umbraco/v8/bugfix/ui-umb-toggle-v8-look

Changed umb-toggle look to fit with v8

src/Umbraco.Web.UI.Client/src/less/components/buttons/umb-toggle.less

@@ -10,47 +10,105 @@
     }
 }
 
-.umb-toggle:focus .umb-toggle__toggle{
-    box-shadow: 0 1px 3px fade(@black, 12%), 0 1px 2px fade(@black, 24%);
-}
-
-.umb-toggle__handler {
-    position: absolute;
-    top: 0;
-    left: 0;
-    display: block;
-    width: 24px;
-    height: 24px;
-    background-color: @white;
-    border-radius: 50px;
-    transform: rotate(-45deg);
-}
-
 .umb-toggle__toggle {
     cursor: pointer;
     align-items: center;
     display: flex;
     width: 48px;
     height: 24px;
-    background: @gray-8;
-    border-radius: 90px;
+    border-radius: 3px;
+    border: 1px solid @inputBorder;
+    background-color: @inputBorder;
     position: relative;
-    transition: box-shadow .3s;
+    transition: background-color 120ms;
+    
+    .umb-toggle:hover &, 
+    .umb-toggle:focus & {
+        border-color: @inputBorderFocus;
+    }
+    
+    .umb-toggle.umb-toggle--checked & {
+        border-color: @ui-btn;
+        background-color: @ui-btn;
+        
+        &:hover {
+            background-color: @ui-btn-hover;
+        }
+    }
+    
+    .umb-toggle.umb-toggle--checked:focus & {
+        border-color: black;
+    }
 }
 
-.umb-toggle--checked .umb-toggle__toggle {
-    background-color: @green;
+
+
+
+.umb-toggle__handler {
+    position: absolute;
+    top: 1px;
+    left: 1px;
+    display: block;
+    width: 22px;
+    height: 22px;
+    background-color: @white;
+    border-radius: 2px;
+    transition: transform 120ms ease-in-out, background-color 120ms;
+    
+    .umb-toggle.umb-toggle--checked & {
+        transform: translateX(24px);
+        background-color: white;
+    }
+    
 }
 
-.umb-toggle--disabled .umb-toggle__toggle {
-    cursor: not-allowed;
-    opacity: 0.8;
+
+/* Icons */
+
+.umb-toggle__icon {
+    position: absolute;
+    line-height: 1em;
+    text-decoration: none;
+    transition: all 0.2s ease;
 }
 
-.umb-toggle--checked .umb-toggle__handler {
-    transform: translate3d(24px, 0, 0) rotate(0);
+.umb-toggle__icon--left {
+    left: 6px;
+    color: @ui-btn;
+    transition: color 120ms;
+    // .umb-toggle:hover & {
+    //     color: @ui-btn-hover;
+    // }
+    .umb-toggle--checked & {
+        color: white;
+    }
+    .umb-toggle.umb-toggle--checked:hover & {
+        color: white;
+    }
 }
 
+.umb-toggle__icon--right {
+    right: 5px;
+    color: @ui-btn;
+    .umb-toggle:hover & {
+        color: @ui-btn-hover;
+    }
+}
+
+
+
+
+.umb-toggle.umb-toggle--disabled {
+    .umb-toggle__toggle {
+        cursor: not-allowed;
+        border-color: @gray-5;
+    }
+    .umb-toggle__handler {
+        background-color: @gray-5;
+    }
+}
+
+
 /* Labels */
 
 .umb-toggle__label {
@@ -64,22 +122,3 @@
 .umb-toggle__label--right {
     margin-left: 8px;
 }
-
-/* Icons */
-
-.umb-toggle__icon {
-    position: absolute;
-    line-height: 1em;
-    text-decoration: none;
-    transition: all 0.2s ease;
-}
-
-.umb-toggle__icon--left {
-    left: 7px;
-    color: @white;
-}
-
-.umb-toggle__icon--right {
-    right: 7px;
-    color: @gray-5;
-}

src/Umbraco.Web.UI.Client/src/views/components/buttons/umb-toggle.html

@@ -6,9 +6,9 @@
     </span>
 
     <div class="umb-toggle__toggle">
-        <i ng-show="checked && hideIcons !== 'true'" class="umb-toggle__icon umb-toggle__icon--left icon-check"></i>
-        <div class="umb-toggle__handler shadow-depth-1"></div>
-        <i ng-show="!checked && hideIcons !== 'true'" class="umb-toggle__icon umb-toggle__icon--right icon-wrong"></i>
+        <i ng-show="hideIcons !== 'true'" class="umb-toggle__icon umb-toggle__icon--left icon-check"></i>
+        <i ng-show="hideIcons !== 'true'" class="umb-toggle__icon umb-toggle__icon--right icon-wrong"></i>
+        <div class="umb-toggle__handler"></div>
     </div>
 
     <span ng-if="labelPosition === 'right' && showLabels === 'true'">