add umb-toggle component

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

@@ -0,0 +1,56 @@
+(function () {
+    'use strict';
+
+    function ToggleDirective() {
+
+        function link(scope, el, attr, ctrl) {
+
+            function onInit() {
+                setLabelText();
+            }
+
+            function setLabelText() {
+
+                if (!scope.labelOn) {
+                    scope.labelOn = "On";
+                }
+
+                if (!scope.labelOff) {
+                    scope.labelOff = "Off";
+                }
+
+            }
+
+            scope.click = function() {
+                if(scope.onClick) {
+                    scope.onClick();
+                }
+            };
+
+            onInit();
+
+        }
+
+        var directive = {
+            restrict: 'E',
+            replace: true,
+            templateUrl: 'views/components/buttons/umb-toggle.html',
+            link: link,
+            scope: {
+                checked: "=",
+                labelOn: "@?",
+                labelOff: "@?",
+                onClick: "&"
+            }
+        };
+
+        return directive;
+
+    }
+
+    angular.module('umbraco.directives').directive('umbToggle', ToggleDirective);
+
+})();
+
+
+

src/Umbraco.Web.UI.Client/src/less/belle.less

@@ -127,6 +127,7 @@
 @import "components/buttons/umb-button.less";
 @import "components/buttons/umb-button-group.less";
 @import "components/buttons/umb-era-button.less";
+@import "components/buttons/umb-toggle.less";
 
 @import "components/notifications/umb-notifications.less";
 @import "components/umb-file-dropzone.less";

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

@@ -0,0 +1,49 @@
+.umb-toggle {
+	display: flex;
+	align-items: center;
+}
+
+.umb-toggle__label {
+    font-size: 14px;
+    font-weight: 600;
+    color: @gray-2;
+}
+
+.umb-toggle__label--left {
+    margin-right: 8px;
+}
+
+.umb-toggle__label--right {
+    margin-left: 8px;
+}
+
+.umb-toggle__label--active {
+    color: @gray-1;
+}
+
+.umb-toggle__handler {
+    display: inline-block;
+    width: 20px;
+    height: 20px;
+    background-color: @white;
+    border-radius: 50px;
+    transform: rotate(-45deg);
+}
+
+.umb-toggle__toggle {
+    cursor: pointer;
+    display: inline-block;
+    width: 40px;
+    height: 20px;
+    background: @gray-8;
+    border-radius: 90px;
+    transition: background-color 0.2s ease;
+}
+
+.umb-toggle--checked .umb-toggle__toggle {
+    background-color: @green;
+}
+
+.umb-toggle--checked .umb-toggle__handler {
+    transform: translate3d(21px, 0, 0) rotate(0);
+}

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

@@ -0,0 +1,11 @@
+<a href="" ng-click="click()" class="umb-toggle" ng-class="{'umb-toggle--checked': checked}">
+
+    <span class="umb-toggle__label umb-toggle__label--left" ng-class="{'umb-toggle__label--active': checked}">{{ labelOff }}</span>
+
+    <div class="umb-toggle__toggle">
+        <div class="umb-toggle__handler shadow-depth-1"></div>
+    </div>
+
+    <span class="umb-toggle__label umb-toggle__label--right" ng-class="{'umb-toggle__label--active': checked}">{{ labelOn }}</span>
+
+</a>