@progress/kendo-theme-default 4.42.0 → 5.0.0-alpha.1

package/scss/switch/_index.scss

@@ -3,8 +3,6 @@
 
 // Dependencies
 @import "../common/_index.scss";
-@import "../button/_variables.scss";
-@import "../input/_variables.scss";
 
 
 // Component

package/scss/switch/_layout.scss

@@ -1,138 +1,137 @@
 @include exports("switch/layout") {
 
     .k-switch {
-        @include border-radius( $switch-border-radius );
-        cursor: pointer;
-        width: $switch-size;
-        box-sizing: border-box;
+        font-family: $kendo-switch-font-family;
+        line-height: $kendo-switch-line-height;
         outline: 0;
         display: inline-flex;
         align-items: center;
         vertical-align: middle;
-        font-family: $font-family;
-        font-size: $font-size-xs;
-        line-height: $line-height;
+        position: relative;
+        cursor: pointer;
         user-select: none;
-        text-align: left;
         -webkit-touch-callout: none;
         -webkit-tap-highlight-color: $rgba-transparent;
-
-        [type="checkbox"] {
-            display: none;
-        }
-
-        &[aria-readonly="true"] {
-            pointer-events: none;
-        }
     }
 
-    .k-switch,
-    .k-switch-container,
-    .k-switch-handle {
-        box-sizing: border-box;
+
+    // Readonly
+    .k-switch.k-readonly {
+        pointer-events: none;
     }
 
 
     // Switch track
-    .k-switch-container {
-        @include border-radius( $switch-border-radius );
-        padding: $switch-container-padding-y $switch-container-padding-x;
-        width: $switch-size;
-        height: $switch-track-size;
-        border-width: $switch-container-border-width;
-        border-style: if( $switch-container-border-width == null, null, solid );
+    .k-switch-track {
+        border-width: $kendo-switch-track-border-width;
+        border-style: if( $kendo-switch-track-border-width == null, null, solid );
+        outline: 0;
+        display: flex;
+        flex-flow: row nowrap;
         flex: 1 0 auto;
         position: relative;
-        outline: 0;
-        transition: background-color 200ms ease-out 0s;
+        transition: background-color 200ms ease-in-out;
     }
 
 
     // Switch thumb
-    .k-switch-handle {
-        @include border-radius( $switch-handle-border-radius );
-        width: $switch-handle-size;
-        height: $switch-handle-size;
-        border-width: $switch-handle-border-width;
-        border-style: if( $switch-handle-border-width == null, null, solid );
-        display: inline-block;
-        vertical-align: middle;
-        position: relative;
-        left: 0;
-        transition: left 200ms ease-out 0s;
-
-        @if $switch-track-size {
-            position: absolute;
-            top: 50%;
-            transform: translateY( -50% );
-        }
-
+    .k-switch-thumb-wrap {
+        width: 0;
+        height: 0;
+        overflow: visible;
+        position: absolute;
+        transition: left 200ms ease-in-out;
+        top: 50%;
+    }
+    .k-switch-thumb {
+        border-width: $kendo-switch-thumb-border-width;
+        border-style: if( $kendo-switch-thumb-border-width == null, null, solid );
+        display: block;
+        position: absolute;
+        transform: translate( -50%, -50% );
     }
-    .k-switch-on .k-switch-handle { left: $switch-thumb-end-x; }
-    .k-switch-off .k-switch-handle { left: $switch-thumb-start-x; }
 
 
     // Switch label
     .k-switch-label-on,
     .k-switch-label-off {
-        display: $switch-label-display;
-        max-width: $switch-label-width;
-        text-transform: $switch-label-text-transform;
-        line-height: $switch-handle-size;
+        text-transform: $kendo-switch-label-text-transform;
+        display: $kendo-switch-label-display;
         position: absolute;
         top: 50%;
-        transform: translateY(-50%);
+        transform: translateY( -50% );
         overflow: hidden;
     }
-    .k-switch-label-on { left: $switch-label-offset; }
-    .k-switch-label-off { right: $switch-label-offset; }
-
 
-    // RTL
-    .k-rtl .k-switch,
-    .k-switch[dir = "rtl"] {
-        &.k-switch-on .k-switch-handle {
-            left: $switch-thumb-start-x;
-        }
 
-        &.k-switch-off .k-switch-handle {
-            left: $switch-thumb-end-x;
+    // Switch sizes
+    @each $size, $size-props in $kendo-switch-sizes {
+
+        $_font-size: map-get( $size-props, font-size );
+        $_track-width: map-get( $size-props, track-width );
+        $_track-height: map-get( $size-props, track-height );
+        $_thumb-width: map-get( $size-props, thumb-width );
+        $_thumb-height: map-get( $size-props, thumb-height );
+        $_thumb-offset: map-get( $size-props, thumb-offset );
+        $_label-offset: map-get( $size-props, label-offset );
+
+        .k-switch-#{$size} {
+            width: $_track-width;
+            height: $_track-height;
+            font-size: $_font-size;
+
+            .k-switch-track {
+                width: $_track-width;
+                height: $_track-height;
+            }
+
+            .k-switch-label-on { left: $_label-offset; }
+            .k-switch-label-off { right: $_label-offset; }
+
+            .k-switch-thumb {
+                width: $_thumb-width;
+                height: $_thumb-height;
+            }
+
+            &.k-switch-on .k-switch-thumb-wrap {
+                left: calc( 100% - #{$_thumb-width / 2} - #{$_thumb-offset} );
+            }
+            &.k-switch-off .k-switch-thumb-wrap {
+                left: calc( #{$_thumb-width / 2} + #{$_thumb-offset} );
+            }
         }
 
-        .k-switch-label-on {
-            left: initial;
-            right: $switch-label-offset;
-        }
-        .k-switch-label-off {
-            left: $switch-label-offset;
-            right: initial;
+        .k-switch-#{$size}[dir="rtl"],
+        [dir="rtl"] .k-switch-#{$size} {
+
+            .k-switch-label-on {
+                left: auto;
+                right: $_label-offset;
+            }
+            .k-switch-label-off {
+                right: auto;
+                left: $_label-offset;
+            }
+
+            &.k-switch-on .k-switch-thumb-wrap {
+                left: calc( #{$_thumb-width / 2} + #{$_thumb-offset} );
+            }
+            &.k-switch-off .k-switch-thumb-wrap {
+                left: calc( 100% - #{$_thumb-width / 2} - #{$_thumb-offset} );
+            }
         }
     }
 
-}
-
-
 
+    // RTL
+    .k-switch[dir="rtl"],
+    [dir="rtl"] .k-switch {
 
-@include exports( "switch/layout/legacy" ) {
-
-    .k-ie9 {
-
-        // Switch
-        .k-switch {
-            display: inline-block;
-        }
-
-        // Switch track
-        .k-switch-container {
-            display: block;
-        }
-
-        // Switch thumb
-        .k-switch-handle {
-            display: block;
+        .k-switch-thumb {
+            transform: translate( 50%, -50% );
         }
 
     }
 
 }
+

package/scss/switch/_theme.scss

@@ -1,158 +1,156 @@
 @include exports("switch/theme") {
 
     // Switch
-    .k-switch {
+    .k-switch {}
 
-        &:hover,
-        &.k-state-hover {
 
-            .k-switch-container {
-                @include box-shadow( $switch-container-hovered-shadow );
-            }
-        }
-
-        &:focus,
-        &.k-state-focused {
-
-            .k-switch-container {
-                outline: none;
-                @include box-shadow( $switch-container-focused-shadow );
-            }
-        }
-    }
-
-
-    // Switch track
-    .k-switch-container {
-        @include box-shadow( $switch-container-shadow );
-    }
-
-
-    // Switch ON
-    .k-switch-on {
+    // Switch OFF
+    .k-switch-off {
 
         // Normal state
-        .k-switch-container {
+        .k-switch-track {
             @include fill(
-                $switch-on-text,
-                $switch-on-bg,
-                $switch-on-border,
-                $switch-on-gradient
+                $kendo-switch-off-track-text,
+                $kendo-switch-off-track-bg,
+                $kendo-switch-off-track-border,
+                $kendo-switch-off-track-gradient
             );
         }
-        .k-switch-handle {
+        .k-switch-thumb {
             @include fill(
-                $switch-on-handle-text,
-                $switch-on-handle-bg,
-                $switch-on-handle-border,
-                $switch-on-handle-gradient
+                $kendo-switch-off-thumb-text,
+                $kendo-switch-off-thumb-bg,
+                $kendo-switch-off-thumb-border,
+                $kendo-switch-off-thumb-gradient
             );
-            @include box-shadow( $switch-on-handle-shadow );
         }
 
-        // Hover state
+        // Hover
         &:hover,
-        &.k-state-hover {
-            .k-switch-container {
+        &.k-hover {
+            .k-switch-track {
                 @include fill(
-                    $switch-on-hovered-text,
-                    $switch-on-hovered-bg,
-                    $switch-on-hovered-border,
-                    $switch-on-hovered-gradient
+                    $kendo-switch-off-track-hover-text,
+                    $kendo-switch-off-track-hover-bg,
+                    $kendo-switch-off-track-hover-border,
+                    $kendo-switch-off-track-hover-gradient
                 );
             }
 
-            .k-switch-handle {
+            .k-switch-thumb {
                 @include fill(
-                    $switch-on-handle-hovered-text,
-                    $switch-on-handle-hovered-bg,
-                    $switch-on-handle-hovered-border,
-                    $switch-on-handle-hovered-gradient
+                    $kendo-switch-off-thumb-hover-text,
+                    $kendo-switch-off-thumb-hover-bg,
+                    $kendo-switch-off-thumb-hover-border,
+                    $kendo-switch-off-thumb-hover-gradient
                 );
             }
         }
 
-        // Focus state
+        // Focus
         &:focus,
-        &.k-state-focused {
-            @include box-shadow( $switch-on-focused-shadow );
+        &.k-focus {
+            .k-switch-track {
+                @include fill(
+                    $kendo-switch-off-track-focus-text,
+                    $kendo-switch-off-track-focus-bg,
+                    $kendo-switch-off-track-focus-border,
+                    $kendo-switch-off-track-focus-gradient
+                );
+                outline: $kendo-switch-off-track-focus-ring;
+            }
+        }
 
-            .k-switch-container {
+        // Disabled
+        &:disabled,
+        &.k-disabled {
+            .k-switch-track {
                 @include fill(
-                    $switch-on-focused-text,
-                    $switch-on-focused-bg,
-                    $switch-on-focused-border,
-                    $switch-on-focused-gradient
+                    $kendo-switch-off-track-disabled-text,
+                    $kendo-switch-off-track-disabled-bg,
+                    $kendo-switch-off-track-disabled-border,
+                    $kendo-switch-off-track-disabled-gradient
                 );
             }
         }
 
-        .k-switch-label-off {
+        .k-switch-label-on {
             color: transparent;
         }
     }
 
 
-    // Switch OFF
-    .k-switch-off {
+    // Switch ON
+    .k-switch-on {
 
         // Normal state
-        .k-switch-container {
+        .k-switch-track {
             @include fill(
-                $switch-off-text,
-                $switch-off-bg,
-                $switch-off-border,
-                $switch-off-gradient
+                $kendo-switch-on-track-text,
+                $kendo-switch-on-track-bg,
+                $kendo-switch-on-track-border,
+                $kendo-switch-on-track-gradient
             );
         }
-        .k-switch-handle {
+        .k-switch-thumb {
             @include fill(
-                $switch-off-handle-text,
-                $switch-off-handle-bg,
-                $switch-off-handle-border,
-                $switch-off-handle-gradient
+                $kendo-switch-on-thumb-text,
+                $kendo-switch-on-thumb-bg,
+                $kendo-switch-on-thumb-border,
+                $kendo-switch-on-thumb-gradient
             );
-            @include box-shadow( $switch-off-handle-shadow );
         }
 
-        // Hover state
+        // Hover
         &:hover,
-        &.k-state-hover {
-            .k-switch-container {
+        &.k-hover {
+            .k-switch-track {
                 @include fill(
-                    $switch-off-hovered-text,
-                    $switch-off-hovered-bg,
-                    $switch-off-hovered-border,
-                    $switch-off-hovered-gradient
+                    $kendo-switch-on-track-hover-text,
+                    $kendo-switch-on-track-hover-bg,
+                    $kendo-switch-on-track-hover-border,
+                    $kendo-switch-on-track-hover-gradient
                 );
             }
 
-            .k-switch-handle {
+            .k-switch-thumb {
                 @include fill(
-                    $switch-off-handle-hovered-text,
-                    $switch-off-handle-hovered-bg,
-                    $switch-off-handle-hovered-border,
-                    $switch-off-handle-hovered-gradient
+                    $kendo-switch-on-thumb-hover-text,
+                    $kendo-switch-on-thumb-hover-bg,
+                    $kendo-switch-on-thumb-hover-border,
+                    $kendo-switch-on-thumb-hover-gradient
                 );
             }
         }
 
-        // Focus state
+        // Focus
         &:focus,
-        &.k-state-focused {
-            @include box-shadow( $switch-off-focused-shadow );
+        &.k-focus {
+            .k-switch-track {
+                @include fill(
+                    $kendo-switch-on-track-focus-text,
+                    $kendo-switch-on-track-focus-bg,
+                    $kendo-switch-on-track-focus-border,
+                    $kendo-switch-on-track-focus-gradient
+                );
+                outline: $kendo-switch-on-track-focus-ring;
+            }
+        }
 
-            .k-switch-container {
+        // Disabled
+        &:disabled,
+        &.k-disabled {
+            .k-switch-track {
                 @include fill(
-                    $switch-off-focused-text,
-                    $switch-off-focused-bg,
-                    $switch-off-focused-border,
-                    $switch-off-focused-gradient
+                    $kendo-switch-on-track-disabled-text,
+                    $kendo-switch-on-track-disabled-bg,
+                    $kendo-switch-on-track-disabled-border,
+                    $kendo-switch-on-track-disabled-gradient
                 );
             }
         }
 
-        .k-switch-label-on {
+        .k-switch-label-off {
             color: transparent;
         }
     }