@progress/kendo-theme-default 5.0.0-next.5 → 5.0.0

package/scss/switch/_layout.scss

@@ -1,17 +1,32 @@
 @include exports("switch/layout") {
 
     .k-switch {
+        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;
+        line-height: 1;
         position: relative;
         cursor: pointer;
         user-select: none;
         -webkit-touch-callout: none;
         -webkit-tap-highlight-color: $rgba-transparent;
+
+        *,
+        *::before,
+        *::after {
+            box-sizing: border-box;
+        }
+
+        [type="checkbox"] {
+            display: none;
+        }
+
+        &[aria-readonly="true"] {
+            pointer-events: none;
+        }
     }
 
 
@@ -26,6 +41,8 @@
         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;
         transition: background-color 200ms ease-in-out;
@@ -39,13 +56,13 @@
         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: inline-block;
-        vertical-align: middle;
-        position: relative;
+        display: block;
+        position: absolute;
         transform: translate( -50%, -50% );
     }
 
@@ -53,8 +70,8 @@
     // Switch label
     .k-switch-label-on,
     .k-switch-label-off {
-        display: $kendo-switch-label-display;
         text-transform: $kendo-switch-label-text-transform;
+        display: $kendo-switch-label-display;
         position: absolute;
         top: 50%;
         transform: translateY( -50% );
@@ -63,46 +80,60 @@
 
 
     // Switch sizes
-    @each $name, $size in $kendo-switch-sizes {
-        .k-switch-#{$name} {
-            width: map-get( $kendo-switch-sizes, $name );
-            font-size: map-get( $kendo-switch-font-sizes, $name );
+    @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 {
-                padding: map-get( $kendo-switch-track-padding-y-sizes, $name ) map-get( $kendo-switch-track-padding-x-sizes, $name );
-                width: map-get( $kendo-switch-sizes, $name );
-
-                @if $kendo-switch-track-border-width {
-                    height: calc( (#{map-get( $kendo-switch-sizes, $name )} / 2) + (#{$kendo-switch-track-border-width} * 2) + #{map-get( $kendo-switch-track-diff-sizes, $name )});
-                } @else {
-                    height: calc( (#{map-get( $kendo-switch-sizes, $name )} / 2) + #{map-get( $kendo-switch-track-diff-sizes, $name )});
-                }
+                width: $_track-width;
+                height: $_track-height;
             }
 
-            .k-switch-label-on,
-            .k-switch-label-off {
-                max-width: map-get( $kendo-switch-label-width-sizes, $name );
-                line-height: map-get( $kendo-switch-thumb-sizes, $name );
-            }
+            .k-switch-label-on { left: $_label-offset; }
+            .k-switch-label-off { right: $_label-offset; }
 
-            .k-switch-label-on {
-                left: map-get( $kendo-switch-label-offset-sizes, $name );
+            .k-switch-thumb {
+                width: $_thumb-width;
+                height: $_thumb-height;
             }
 
-            .k-switch-label-off {
-                right: map-get( $kendo-switch-label-offset-sizes, $name );
+            &.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-thumb {
-                width: map-get( $kendo-switch-thumb-sizes, $name );
-                height: map-get( $kendo-switch-thumb-sizes, $name );
+        .k-switch-#{$size}[dir="rtl"],
+        [dir="rtl"] .k-switch-#{$size},
+        .k-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( 100% - ((#{map-get( $kendo-switch-thumb-sizes, $name )} / 2) + #{map-get( $kendo-switch-thumb-offset-sizes, $name )}));
+                left: calc( #{$_thumb-width / 2} + #{$_thumb-offset} );
             }
             &.k-switch-off .k-switch-thumb-wrap {
-                left: calc( (#{map-get( $kendo-switch-thumb-sizes, $name )} / 2) + #{map-get( $kendo-switch-thumb-offset-sizes, $name )});
+                left: calc( 100% - #{$_thumb-width / 2} - #{$_thumb-offset} );
             }
         }
     }
@@ -110,33 +141,13 @@
 
     // RTL
     .k-switch[dir="rtl"],
-    [dir="rtl"] .k-switch {
+    [dir="rtl"] .k-switch,
+    .k-rtl .k-switch {
 
         .k-switch-thumb {
             transform: translate( 50%, -50% );
         }
 
-        @each $name, $size in $kendo-switch-sizes {
-            &.k-switch-#{$name} {
-                &.k-switch-on .k-switch-thumb-wrap {
-                    left: calc( (#{map-get( $kendo-switch-thumb-sizes, $name )} / 2) + #{map-get( $kendo-switch-thumb-offset-sizes, $name )});
-                }
-
-                &.k-switch-off .k-switch-thumb-wrap {
-                    left: calc( 100% - ((#{map-get( $kendo-switch-thumb-sizes, $name )} / 2) + #{map-get( $kendo-switch-thumb-offset-sizes, $name )}));
-                }
-
-                .k-switch-label-on {
-                    left: auto;
-                    right: map-get( $kendo-switch-label-offset-sizes, $name );
-                }
-                .k-switch-label-off {
-                    left: map-get( $kendo-switch-label-offset-sizes, $name );
-                    right: auto;
-                }
-            }
-        }
-
     }
 
 }

package/scss/switch/_theme.scss

@@ -1,53 +1,28 @@
 @include exports("switch/theme") {
 
     // Switch
-    .k-switch {
-
-        &:hover,
-        &.k-hover {
-
-            .k-switch-track {
-                @include box-shadow( $kendo-switch-track-hover-shadow );
-            }
-        }
-
-        &:focus,
-        &.k-focus {
-
-            .k-switch-track {
-                outline: none;
-                @include box-shadow( $kendo-switch-track-focus-shadow );
-            }
-        }
-    }
-
-
-    // Switch track
-    .k-switch-track {
-        @include box-shadow( $kendo-switch-track-shadow );
-    }
+    .k-switch {}
 
 
-    // Switch ON
-    .k-switch-on {
+    // Switch OFF
+    .k-switch-off {
 
         // Normal state
         .k-switch-track {
             @include fill(
-                $kendo-switch-on-text,
-                $kendo-switch-on-bg,
-                $kendo-switch-on-border,
-                $kendo-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-thumb {
             @include fill(
-                $kendo-switch-on-thumb-text,
-                $kendo-switch-on-thumb-bg,
-                $kendo-switch-on-thumb-border,
-                $kendo-switch-on-thumb-gradient
+                $kendo-switch-off-thumb-text,
+                $kendo-switch-off-thumb-bg,
+                $kendo-switch-off-thumb-border,
+                $kendo-switch-off-thumb-gradient
             );
-            @include box-shadow( $kendo-switch-on-thumb-shadow );
         }
 
         // Hover
@@ -55,19 +30,19 @@
         &.k-hover {
             .k-switch-track {
                 @include fill(
-                    $kendo-switch-on-hover-text,
-                    $kendo-switch-on-hover-bg,
-                    $kendo-switch-on-hover-border,
-                    $kendo-switch-on-hover-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-thumb {
                 @include fill(
-                    $kendo-switch-on-thumb-hover-text,
-                    $kendo-switch-on-thumb-hover-bg,
-                    $kendo-switch-on-thumb-hover-border,
-                    $kendo-switch-on-thumb-hover-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
                 );
             }
         }
@@ -75,44 +50,55 @@
         // Focus
         &:focus,
         &.k-focus {
-            @include box-shadow( $kendo-switch-on-focus-shadow );
+            .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;
+            }
+        }
 
+        // Disabled
+        &:disabled,
+        &.k-disabled {
             .k-switch-track {
                 @include fill(
-                    $kendo-switch-on-focus-text,
-                    $kendo-switch-on-focus-bg,
-                    $kendo-switch-on-focus-border,
-                    $kendo-switch-on-focus-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-track {
             @include fill(
-                $kendo-switch-off-text,
-                $kendo-switch-off-bg,
-                $kendo-switch-off-border,
-                $kendo-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-thumb {
             @include fill(
-                $kendo-switch-off-thumb-text,
-                $kendo-switch-off-thumb-bg,
-                $kendo-switch-off-thumb-border,
-                $kendo-switch-off-thumb-gradient
+                $kendo-switch-on-thumb-text,
+                $kendo-switch-on-thumb-bg,
+                $kendo-switch-on-thumb-border,
+                $kendo-switch-on-thumb-gradient
             );
-            @include box-shadow( $kendo-switch-off-thumb-shadow );
         }
 
         // Hover
@@ -120,19 +106,19 @@
         &.k-hover {
             .k-switch-track {
                 @include fill(
-                    $kendo-switch-off-hover-text,
-                    $kendo-switch-off-hover-bg,
-                    $kendo-switch-off-hover-border,
-                    $kendo-switch-off-hover-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-thumb {
                 @include fill(
-                    $kendo-switch-off-thumb-hover-text,
-                    $kendo-switch-off-thumb-hover-bg,
-                    $kendo-switch-off-thumb-hover-border,
-                    $kendo-switch-off-thumb-hover-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
                 );
             }
         }
@@ -140,19 +126,31 @@
         // Focus
         &:focus,
         &.k-focus {
-            @include box-shadow( $kendo-switch-off-focus-shadow );
+            .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;
+            }
+        }
 
+        // Disabled
+        &:disabled,
+        &.k-disabled {
             .k-switch-track {
                 @include fill(
-                    $kendo-switch-off-focus-text,
-                    $kendo-switch-off-focus-bg,
-                    $kendo-switch-off-focus-border,
-                    $kendo-switch-off-focus-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;
         }
     }