Adjust toggle styling when checked and disabled (#8445)

src/Umbraco.Web.UI.Client/src/common/directives/components/buttons/umbtoggle.directive.js

@@ -78,6 +78,7 @@
                 scope.inputId = scope.inputId || "umb-toggle_" + String.CreateGuid();
 
                 setLabelText();
+
                 // must wait until the current digest cycle is finished before we emit this event on init, 
                 // otherwise other property editors might not yet be ready to receive the event
                 $timeout(function () {
@@ -115,7 +116,6 @@
             };
 
             onInit();
-
         }
 
         var directive = {

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

@@ -41,9 +41,6 @@
     }
 }
 
-
-
-
 .umb-toggle__handler {
     position: absolute;
     top: 1px;
@@ -59,10 +56,8 @@
         transform: translateX(20px);
         background-color: @white;
     }
-
 }
 
-
 /* Icons */
 
 .umb-toggle__icon {
@@ -78,9 +73,7 @@
     color:@white;
     transition: opacity 120ms;
     opacity: 0;
-    // .umb-toggle:hover & {
-    //     color: @ui-btn-hover;
-    // }
+
     .umb-toggle--checked & {
         opacity: 1;
     }
@@ -93,6 +86,7 @@
     right: 5px;
     color: @ui-btn;
     transition: opacity 120ms;
+
     .umb-toggle--checked & {
         opacity: 0;
     }
@@ -101,23 +95,41 @@
     }
 }
 
-
-
-.umb-toggle.umb-toggle--disabled.umb-toggle--checked,
 .umb-toggle.umb-toggle--disabled {
     .umb-toggle__toggle {
         cursor: not-allowed;
-        background-color: @gray-9;
-        border-color: @gray-9;
     }
-    .umb-toggle__icon--left {
-        color: @gray-6;
+
+    &, &.umb-toggle--checked {
+
+        .umb-toggle__toggle {
+            .umb-toggle__handler {
+                background-color: @gray-10;
+            }
+        }
     }
-    .umb-toggle__icon--right {
-        color: @gray-6;
+
+    &:not(.umb-toggle--checked) {
+        .umb-toggle__toggle {
+            background-color: @gray-8;
+            border-color: @gray-8;
+        }
+
+        .umb-toggle__icon--left,
+        .umb-toggle__icon--right {
+            color: @gray-6;
+        }
     }
-    .umb-toggle__handler {
-        background-color: @gray-10;
+
+    &.umb-toggle--checked {
+        .umb-toggle__toggle {
+            background-color: lighten(@ui-btn, 50%);
+            border-color: lighten(@ui-btn, 50%);
+        }
+        .umb-toggle__icon--left,
+        .umb-toggle__icon--right {
+            color: @gray-9;
+        }
     }
 }
 

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

@@ -1,8 +1,7 @@
 <button role="checkbox" aria-checked="{{checked}}" ng-click="click()" type="button" class="umb-toggle" ng-disabled="disabled" ng-class="{'umb-toggle--checked': checked, 'umb-toggle--disabled': disabled}" id="{{inputId}}">
-
+    
     <span ng-if="!labelPosition && showLabels === 'true' || labelPosition === 'left' && showLabels === 'true'">
-        <span ng-if="!checked" class="umb-toggle__label umb-toggle__label--left">{{ displayLabelOff }}</span>
-        <span ng-if="checked" class="umb-toggle__label umb-toggle__label--left">{{ displayLabelOn }}</span>
+        <span class="umb-toggle__label umb-toggle__label--left">{{ checked ? displayLabelOn : displayLabelOff }}</span>
     </span>
 
     <div class="umb-toggle__toggle">
@@ -12,8 +11,7 @@
     </div>
 
     <span ng-if="labelPosition === 'right' && showLabels === 'true'">
-        <span ng-if="!checked" class="umb-toggle__label umb-toggle__label--right">{{ displayLabelOff }}</span>
-        <span ng-if="checked" class="umb-toggle__label umb-toggle__label--right">{{ displayLabelOn }}</span>
+        <span class="umb-toggle__label umb-toggle__label--right">{{ checked ? displayLabelOn : displayLabelOff }}</span>
     </span>
 
 </button>