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

package/scss/popup/_layout.scss

@@ -201,36 +201,6 @@
         padding: $padding-x;
         box-sizing: border-box;
         flex: 0 0 auto;
-
-        > .k-textbox {
-            // remove the !important declaration when https://github.com/telerik/kendo-ui-core/issues/2617 is fixed
-            width: 100% !important; // sass-lint:disable-block no-important
-            box-sizing: border-box;
-            padding-left: $popup-filter-padding-x;
-            padding-right: calc( #{$icon-size} + #{$padding-x} );
-        }
-
-        > .k-icon {
-            position: absolute;
-            right: calc( #{$input-padding-x} + #{$padding-x} );
-            top: 50%;
-            transform: translateY(-50%);
-        }
-
-
-        .k-rtl &,
-        [dir="rtl"] & {
-
-            > .k-textbox {
-                padding-right: $popup-filter-padding-x;
-                padding-left: calc( #{$icon-size} + #{$padding-x} );
-            }
-            > .k-icon {
-                left: calc( #{$input-padding-x} + #{$padding-x} );
-                right: auto;
-            }
-
-        }
     }
 
     .k-dropdown-button .k-popup {
@@ -298,10 +268,6 @@
                 border-width: 1px;
             }
         }
-
-        .k-separator {
-            height: 0;
-        }
     }
 
     .k-virtual-content {

package/scss/popup/_theme.scss

@@ -160,10 +160,10 @@
 
             .k-button {
                 @include fill(
-                    $button-text,
-                    $button-bg,
-                    $button-border,
-                    $button-gradient
+                    $kendo-button-text,
+                    $kendo-button-bg,
+                    $kendo-button-border,
+                    $kendo-button-gradient
                 );
             }
         }

package/scss/popup/_variables.scss

@@ -10,7 +10,7 @@ $popup-line-height: $line-height !default;
 $popup-header-padding: $list-item-padding-y $list-item-padding-x !default;
 $popup-header-font-size: null !default;
 $popup-header-text: null !default;
-$popup-filter-padding-x: $input-padding-x !default;
+$popup-filter-padding-x: $kendo-input-padding-x !default;
 
 $popup-content-padding-x: map-get( $spacing, 2 ) !default;
 $popup-content-padding-y: map-get( $spacing, 2 ) !default;

package/scss/radio/_layout.scss

@@ -2,13 +2,11 @@
 
     // Radio
     .k-radio {
-        @include border-radius( $radio-radius );
+        @include border-radius( $kendo-radio-radius );
         margin: 0;
         padding: 0;
-        width: $radio-size;
-        height: $radio-size;
         line-height: initial;
-        border-width: $radio-border-width;
+        border-width: $kendo-radio-border-width;
         border-style: solid;
         outline: 0;
         box-sizing: border-box;
@@ -22,50 +20,69 @@
         -webkit-appearance: none;
     }
 
-    // Radio indicator
-    .k-radio::before {
-        @if $radio-icon-type == "glyph" {
-            content: $radio-checked-glyph;
-            width: $radio-glyph-size;
-            height: $radio-glyph-size;
-            font-size: $radio-glyph-size;
-            font-family: $radio-glyph-font-family;
-            line-height: 1;
-            transform: scale(0) translate(-50%, -50%);
-            overflow: hidden;
-            position: absolute;
-            top: 50%;
-            left: 50%;
-        }
-
-        @if $radio-icon-type == "marker" {
-            content: "";
-            width: $radio-marker-checked-width;
-            height: $radio-marker-checked-width;
-            border-radius: 50%;
-            background-color: currentColor;
-            transform: scale(0) translate(-50%, -50%);
-            overflow: hidden;
-            position: absolute;
-            top: 50%;
-            left: 50%;
+    // Radio size
+
+    @each $name, $size in $kendo-radio-sizes {
+        .k-radio-#{$name} {
+            width: $size;
+            height: $size;
+
+            + .k-radio-label {
+
+                .k-ripple {
+                    top: ($size / 2);
+                    left: ($size / 2);
+                    width: ($size * 5 / 2);
+                    height: ($size * 5 / 2);
+                }
+            }
+        }
+
+        // Radio indicator
+        .k-radio-#{$name}::before {
+            @if $kendo-radio-icon-type == "glyph" {
+                content: $kendo-radio-checked-glyph;
+                width: $kendo-radio-glyph-size;
+                height: $kendo-radio-glyph-size;
+                font-size: $kendo-radio-glyph-size;
+                font-family: $kendo-radio-glyph-font-family;
+                line-height: 1;
+                transform: scale(0) translate(-50%, -50%);
+                overflow: hidden;
+                position: absolute;
+                top: 50%;
+                left: 50%;
+            }
+
+            @if $kendo-radio-icon-type == "marker" {
+                content: "";
+                width: ($size / 2);
+                height: ($size / 2);
+                border-radius: 50%;
+                background-color: currentColor;
+                transform: scale(0) translate(-50%, -50%);
+                overflow: hidden;
+                position: absolute;
+                top: 50%;
+                left: 50%;
+            }
         }
     }
 
     // Checked state
     .k-radio:checked,
     .k-radio.k-checked {
-        @if $radio-icon-type == "image" {
-            background-image: $radio-checked-image;
+        @if $kendo-radio-icon-type == "image" {
+            background-image: $kendo-radio-checked-image;
         }
 
-        @if $radio-icon-type == "glyph" {
+        @if $kendo-radio-icon-type == "glyph" {
             &::before {
                 transform: scale(1) translate(-50%, -50%);
             }
         }
 
-        @if $radio-icon-type == "marker" {
+        @if $kendo-radio-icon-type == "marker" {
             &::before {
                 transform: scale(1) translate(-50%, -50%);
             }
@@ -88,7 +105,7 @@
     .k-radio-label {
         margin: 0;
         padding: 0;
-        line-height: $radio-line-height;
+        line-height: $kendo-radio-line-height;
         display: inline-flex;
         align-items: flex-start;
         vertical-align: middle;
@@ -105,12 +122,8 @@
         }
 
         .k-ripple {
-            top: $radio-size / 2;
-            left: $radio-size / 2;
             right: auto;
             bottom: auto;
-            width: $radio-size * 5 / 2;
-            height: $radio-size * 5 / 2;
             transform: translate(-50%, -50%);
             border-radius: 50%;
 
@@ -131,10 +144,10 @@
     .k-radio + .k-radio-label,
     .k-radio-label + .k-radio,
     .k-label + .k-radio {
-        margin-left: $radio-label-margin-x;
+        margin-left: $kendo-radio-label-margin-x;
     }
     .k-radio-label > .k-radio {
-        margin-right: $radio-label-margin-x;
+        margin-right: $kendo-radio-label-margin-x;
         flex-shrink: 0;
     }
     kendo-label.k-radio-label > .k-label {
@@ -143,19 +156,19 @@
 
     // Radio list
     .k-radio-list {
-        margin: $radio-list-margin;
-        padding: $radio-list-padding;
+        margin: $kendo-radio-list-margin;
+        padding: $kendo-radio-list-padding;
         list-style: none;
 
         .k-radio-item {
-            padding: $radio-list-item-padding-y $radio-list-item-padding-x;
+            padding: $kendo-radio-list-item-padding-y $kendo-radio-list-item-padding-x;
         }
     }
 
     .k-list-horizontal {
         .k-radio-item {
             display: inline-block;
-            margin: 0 $radio-list-horizontal-item-margin-x 0 0;
+            margin: 0 $kendo-radio-list-horizontal-item-margin-x 0 0;
 
             &:last-child {
                 margin-right: 0;
@@ -170,24 +183,24 @@
         .k-radio-label + .k-radio,
         .k-label + .k-radio {
             margin-left: 0;
-            margin-right: $radio-label-margin-x;
+            margin-right: $kendo-radio-label-margin-x;
         }
         .k-radio-label > .k-radio {
             margin-right: 0;
-            margin-left: $radio-label-margin-x;
+            margin-left: $kendo-radio-label-margin-x;
         }
         kendo-label.k-radio-label > .k-radio:last-child {
             margin-left: 0;
         }
         kendo-label.k-radio-label > .k-label:first-child {
             margin-right: 0;
-            margin-left: $radio-label-margin-x;
+            margin-left: $kendo-radio-label-margin-x;
         }
 
         .k-list-horizontal {
             .k-radio-item {
                 margin-right: 0;
-                margin-left: $radio-list-horizontal-item-margin-x;
+                margin-left: $kendo-radio-list-horizontal-item-margin-x;
 
                 &:last-child {
                     margin-left: 0;
@@ -197,19 +210,21 @@
     }
 
     .k-ripple-container {
-        .k-radio::after {
-            content: "";
-            display: block;
-            position: absolute;
-            left: 0;
-            top: 0;
-            width: $radio-ripple-size;
-            height: $radio-ripple-size;
-            margin-left: $radio-ripple-margin;
-            margin-top: $radio-ripple-margin;
-            border-radius: 100%;
-            z-index: 1;
-            transform: scale(0);
+        @each $name, $size in $kendo-radio-sizes {
+            .k-radio-#{$name}::after {
+                content: "";
+                display: block;
+                position: absolute;
+                left: 0;
+                top: 0;
+                width: map-get($kendo-radio-ripple-size, $name);
+                height: map-get($kendo-radio-ripple-size, $name);
+                margin-left: map-get($kendo-radio-ripple-margin, $name);
+                margin-top: map-get($kendo-radio-ripple-margin, $name);
+                border-radius: 100%;
+                z-index: 1;
+                transform: scale(0);
+            }
         }
 
         .k-radio:disabled::after,

package/scss/radio/_theme.scss

@@ -3,9 +3,9 @@
     // Radio
     .k-radio {
         @include fill(
-            $radio-text,
-            $radio-bg,
-            $radio-border
+            $kendo-radio-text,
+            $kendo-radio-bg,
+            $kendo-radio-border
         );
     }
 
@@ -14,9 +14,9 @@
     .k-radio:hover,
     .k-radio.k-state-hover {
         @include fill(
-            $radio-hovered-text,
-            $radio-hovered-bg,
-            $radio-hovered-border
+            $kendo-radio-hover-text,
+            $kendo-radio-hover-bg,
+            $kendo-radio-hover-border
         );
     }
 
@@ -24,8 +24,8 @@
     // Focus state
     .k-radio:focus,
     .k-radio.k-state-focus {
-        @include fill( $border: $radio-focused-border );
-        @include box-shadow( $radio-focused-shadow );
+        @include fill( $border: $kendo-radio-focus-border );
+        @include box-shadow( $kendo-radio-focus-shadow );
     }
 
 
@@ -34,13 +34,13 @@
     .k-radio.k-state-invalid,
     .k-radio.ng-invalid.ng-touched,
     .k-radio.ng-invalid.ng-dirty {
-        @include fill( $border: $radio-invalid-border );
+        @include fill( $border: $kendo-radio-invalid-border );
     }
     .k-radio.k-invalid + .k-radio-label,
     .k-radio.k-state-invalid + .k-radio-label,
     .k-radio.ng-invalid.ng-touched + .k-radio-label,
     .k-radio.ng-invalid.ng-dirty + .k-radio-label {
-        @include fill( $color: $radio-invalid-text );
+        @include fill( $color: $kendo-radio-invalid-text );
     }
 
 
@@ -48,16 +48,16 @@
     .k-radio:checked,
     .k-radio.k-checked {
         @include fill(
-            $radio-checked-text,
-            $radio-checked-bg,
-            $radio-checked-border
+            $kendo-radio-checked-text,
+            $kendo-radio-checked-bg,
+            $kendo-radio-checked-border
         );
     }
 
     .k-radio:checked:focus,
     .k-radio.k-checked.k-state-focus {
-        @include fill( $border: $radio-focused-checked-border );
-        @include box-shadow( $radio-focused-checked-shadow );
+        @include fill( $border: $kendo-radio-focus-checked-border );
+        @include box-shadow( $kendo-radio-focus-checked-shadow );
     }
 
 
@@ -65,25 +65,25 @@
     .k-radio:disabled,
     .k-radio.k-disabled {
         @include fill(
-            $radio-disabled-text,
-            $radio-disabled-bg,
-            $radio-disabled-border
+            $kendo-radio-disabled-text,
+            $kendo-radio-disabled-bg,
+            $kendo-radio-disabled-border
         );
     }
     .k-radio:checked:disabled,
     .k-radio.k-checked.k-disabled {
         @include fill(
-            $radio-disabled-checked-text,
-            $radio-disabled-checked-bg,
-            $radio-disabled-checked-border
+            $kendo-radio-disabled-checked-text,
+            $kendo-radio-disabled-checked-bg,
+            $kendo-radio-disabled-checked-border
         );
     }
 
     // Ripple
     .k-ripple-container {
         .k-radio::after {
-            background: $checkbox-checked-bg;
-            opacity: $checkbox-ripple-opacity;
+            background: $kendo-checkbox-checked-bg;
+            opacity: $kendo-checkbox-ripple-opacity;
         }
     }
 

package/scss/radio/_variables.scss

@@ -1,69 +1,172 @@
 // Radio button
-$radio-size: map-get( $spacing, 4 ) !default;
-$radio-radius: 50% !default;
-$radio-border-width: 1px !default;
-$radio-line-height: calc(#{$radio-size} + #{$radio-border-width}) !default;
 
-$radio-bg: $checkbox-bg !default;
-$radio-text: $checkbox-text !default;
-$radio-border: $checkbox-border !default;
+/// The Sizes of the radio button.
+/// @group radio
+$kendo-radio-sizes: (
+    sm: map-get( $spacing, 3),
+    md: map-get( $spacing, 4),
+    lg: map-get( $spacing, 6)
+) !default;
+
+/// The Border radius of the radio button.
+/// @group radio
+$kendo-radio-radius: 50% !default;
+/// The Border width of the radio button.
+/// @group radio
+$kendo-radio-border-width: 1px !default;
+/// The Line height of the radio button.
+/// @group radio
+$kendo-radio-line-height: calc( #{map-get( $kendo-radio-sizes, "md" )} + #{$kendo-radio-border-width} ) !default;
+
+/// The Background of the radio button.
+/// @group radio
+$kendo-radio-bg: $kendo-checkbox-bg !default;
+/// The Text of the radio button.
+/// @group radio
+$kendo-radio-text: $kendo-checkbox-text !default;
+/// The Border of the radio button.
+/// @group radio
+$kendo-radio-border: $kendo-checkbox-border !default;
+
+/// The background of hovered radio button.
+/// @group radio
+$kendo-radio-hover-bg: $kendo-checkbox-hover-bg !default;
+/// The text of hovered radio button.
+/// @group radio
+$kendo-radio-hover-text: $kendo-checkbox-hover-text !default;
+/// The border of hovered radio button.
+/// @group radio
+$kendo-radio-hover-border: $kendo-checkbox-hover-border !default;
+
+/// The background of checked radio button.
+/// @group radio
+$kendo-radio-checked-bg: $kendo-checkbox-checked-bg !default;
+/// The text of checked radio button.
+/// @group radio
+$kendo-radio-checked-text: $kendo-checkbox-checked-text !default;
+/// The border of checked radio button.
+/// @group radio
+$kendo-radio-checked-border: $kendo-checkbox-checked-border !default;
+
+/// The background of indeterminate radio button.
+/// @group radio
+$kendo-radio-indeterminate-bg: $kendo-radio-checked-bg !default;
+/// The text of indeterminate radio button
+/// @group radio
+$kendo-radio-indeterminate-text: $kendo-radio-checked-text !default;
+/// The border of indeterminate radio button.
+/// @group radio
+$kendo-radio-indeterminate-border: $kendo-radio-checked-border !default;
+
+/// The border of focused radio button.
+/// @group radio
+$kendo-radio-focus-border: $kendo-checkbox-hover-border !default;
+/// The shadow of focused radio button.
+/// @group radio
+$kendo-radio-focus-shadow: $kendo-checkbox-focus-shadow !default;
+/// The border of focused and checked radio button.
+/// @group radio
+$kendo-radio-focus-checked-border: $kendo-checkbox-checked-border !default;
+/// The shadow of focused and checked radio button.
+/// @group radio
+$kendo-radio-focus-checked-shadow: $kendo-checkbox-focus-checked-shadow !default;
+
+/// The background of disabled radio button.
+/// @group radio
+$kendo-radio-disabled-bg: null !default;
+/// The text of disabled radio button.
+/// @group radio
+$kendo-radio-disabled-text: null !default;
+/// The border of disabled radio button.
+/// @group radio
+$kendo-radio-disabled-border: null !default;
+
+/// The background of diasbled and checked radio button.
+/// @group radio
+$kendo-radio-disabled-checked-bg: null !default;
+/// The text of disabled and checked radio button.
+/// @group radio
+$kendo-radio-disabled-checked-text: null !default;
+/// The border of disabled and checked radio button.
+/// @group radio
+$kendo-radio-disabled-checked-border: null !default;
+
+/// The background of invalid radio button.
+/// @group radio
+$kendo-radio-invalid-bg: null !default;
+/// The text of invalid radio button.
+/// @group radio
+$kendo-radio-invalid-text: $invalid-text !default;
+/// The border of invalid radio button.
+/// @group radio
+$kendo-radio-invalid-border: $invalid-border !default;
 
-$radio-hovered-bg: $checkbox-hovered-bg !default;
-$radio-hovered-text: $checkbox-hovered-text !default;
-$radio-hovered-border: $checkbox-hovered-border !default;
 
-$radio-checked-bg: $checkbox-checked-bg !default;
-$radio-checked-text: $checkbox-checked-text !default;
-$radio-checked-border: $checkbox-checked-border !default;
-
-$radio-indeterminate-bg: $radio-checked-bg !default;
-$radio-indeterminate-text: $radio-checked-text !default;
-$radio-indeterminate-border: $radio-checked-border !default;
-
-$radio-focused-border: $checkbox-hovered-border !default;
-$radio-focused-shadow: $checkbox-focused-shadow !default;
-$radio-focused-checked-border: $checkbox-checked-border !default;
-$radio-focused-checked-shadow: $checkbox-focused-checked-shadow !default;
+// Radio indicator
 
-$radio-disabled-bg: null !default;
-$radio-disabled-text: null !default;
-$radio-disabled-border: null !default;
+/// The icon type of radio button.
+/// @group radio
+$kendo-radio-icon-type: marker !default;
 
-$radio-disabled-checked-bg: null !default;
-$radio-disabled-checked-text: null !default;
-$radio-disabled-checked-border: null !default;
+/// The glyph font family of radio button.
+/// @group radio
+$kendo-radio-glyph-font-family: "WebComponentsIcons", monospace !default;
+/// The glyph size of radio button.
+/// @group radio
+$kendo-radio-glyph-size: 12px !default;
+/// The checked glyph of radio button.
+/// @group radio
+$kendo-radio-checked-glyph: "\e308" !default;
 
-$radio-invalid-bg: null !default;
-$radio-invalid-text: $invalid-text !default;
-$radio-invalid-border: $invalid-border !default;
+/// The checked image of radio button.
+/// @group radio
+$kendo-radio-checked-image: null !default;
 
 
-// Radio indicator
-$radio-icon-type: marker !default;
+// Radio label
 
-$radio-glyph-font-family: "WebComponentsIcons", monospace !default;
-$radio-glyph-size: 12px !default;
-$radio-checked-glyph: "\e308" !default;
+/// The horizontal margin of the radio button inside of a label.
+/// @group radio
+$kendo-radio-label-margin-x: map-get( $spacing, 1 ) !default;
 
-$radio-checked-image: null !default;
 
-$radio-marker-checked-width: ( $radio-size / 2 ) !default;
-$radio-marker-checked-height: ( $radio-size / 2 ) !default;
+// Radio list
 
+/// The list margin of radio button.
+/// @group radio
+$kendo-radio-list-margin: 0px !default;
+/// The list padding of radio button.
+/// @group radio
+$kendo-radio-list-padding: 0px !default;
+/// The horizontal list item padding of radio button.
+/// @group radio
+$kendo-radio-list-item-padding-x: 0px !default;
+/// The vertical list item padding of radio button.
+/// @group radio
+$kendo-radio-list-item-padding-y: $list-item-padding-y !default;
+/// The horizontal list item margin of radio button.
+/// @group radio
+$kendo-radio-list-horizontal-item-margin-x: 32px !default;
 
-// Radio label
-$radio-label-margin-x: map-get( $spacing, 1 ) !default;
 
+// Radio ripple
 
-// Radio list
-$radio-list-margin: 0px !default;
-$radio-list-padding: 0px !default;
-$radio-list-item-padding-x: 0px !default;
-$radio-list-item-padding-y: $list-item-padding-y !default;
-$radio-list-horizontal-item-margin-x: 32px !default;
+/// The ripple size of radio.
+/// @group radio
+$kendo-radio-ripple-size: (
+    sm: (map-get( $kendo-radio-sizes, "sm" ) * 3),
+    md: (map-get( $kendo-radio-sizes, "md" ) * 3),
+    lg: (map-get( $kendo-radio-sizes, "lg" ) * 3)
+) !default;
+/// The ripple margin of radio button.
+/// @group radio
+$kendo-radio-ripple-margin: (
+    sm: calc(-1 * (#{map-get( $kendo-radio-sizes, "sm" )} + 2 * #{$kendo-radio-border-width})),
+    md: calc(-1 * (#{map-get( $kendo-radio-sizes, "md" )} + 2 * #{$kendo-radio-border-width})),
+    lg: calc(-1 * (#{map-get( $kendo-radio-sizes, "lg" )} + 2 * #{$kendo-radio-border-width}))
+) !default;
+/// The ripple opacity of radio button.
+/// @group radio
+$kendo-radio-ripple-opacity: .3 !default;
 
 
-// Radio ripple
-$radio-ripple-size: $radio-size * 3 !default;
-$radio-ripple-margin: calc(-1 * (#{$radio-size} + 2 * #{$radio-border-width})) !default;
-$radio-ripple-opacity: .3 !default;