@progress/kendo-theme-default 4.42.1-dev.4 → 5.0.0-alpha.3

package/scss/pager/_layout.scss

@@ -31,11 +31,6 @@
             }
         }
 
-        .k-widget,
-        select.k-dropdown {
-            font-size: inherit;
-        }
-
         .k-rtl &,
         &[dir="rtl"],
         [dir="rtl"] & {
@@ -68,8 +63,8 @@
 
     // Base pager item
     %base-pager-item {
-        min-width: $button-calc-size;
-        height: $button-calc-size;
+        min-width: $kendo-button-calc-size;
+        height: $kendo-button-calc-size;
         box-sizing: border-box;
         color: inherit;
         text-align: center;
@@ -103,7 +98,7 @@
         flex-direction: row;
         position: relative;
 
-        select.k-dropdown {
+        select.k-dropdown-list {
             cursor: pointer;
             display: none;
         }
@@ -171,7 +166,7 @@
     .k-pager-sizes {
         @extend %base-pager-section;
 
-        .k-dropdown,
+        .k-dropdown-list,
         > select {
             margin-right: 1ex;
             width: $pager-dropdown-width;
@@ -179,7 +174,7 @@
 
         .k-rtl &,
         [dir="rtl"] & {
-            .k-dropdown,
+            .k-dropdown-list,
             > select {
                 margin-left: 1ex;
                 margin-right: 0;
@@ -217,7 +212,7 @@
 
         // Show native select
         .k-pager-numbers-wrap {
-            select.k-dropdown {
+            select.k-dropdown-list {
                 width: $pager-dropdown-width;
                 display: flex;
             }
@@ -229,7 +224,7 @@
                 margin-right: $pager-section-spacing;
             }
 
-            height: $button-calc-size;
+            height: $kendo-button-calc-size;
             box-sizing: border-box;
             border-color: inherit;
         }

package/scss/pager/_variables.scss

@@ -16,7 +16,7 @@ $pager-focus-shadow: $focused-shadow !default;
 
 $pager-section-spacing: $spacer-x !default;
 
-$pager-item-padding-x: $button-padding-y !default;
+$pager-item-padding-x: $kendo-button-padding-y !default;
 $pager-item-padding-y: $pager-item-padding-x !default;
 $pager-item-border-width: 0px !default;
 $pager-item-border-radius: null !default;

package/scss/pdf-viewer/_layout.scss

@@ -94,22 +94,6 @@
             justify-content: flex-start;
             align-items: center;
 
-            .k-textbox {
-                display: inline-flex;
-                padding-right: $pdf-viewer-search-dialog-textbox-padding-x;
-                margin: 0 $pdf-viewer-search-dialog-spacing;
-                align-items: center;
-                background: none;
-            }
-            .k-textbox .k-icon {
-                position: absolute;
-                font-size: inherit;
-
-                .k-ie & {
-                    position: relative;
-                }
-            }
-
             .k-match-case-button {
                 display: inline-flex;
                 height: $pdf-viewer-search-dialog-input-button-height;

package/scss/pdf-viewer/_variables.scss

@@ -26,7 +26,7 @@ $pdf-viewer-page-shadow: 0 0 ($pdf-viewer-page-spacing / 2) $pdf-viewer-page-bor
 
 $pdf-viewer-search-dialog-spacing: $toolbar-padding-x !default;
 $pdf-viewer-search-dialog-button-spacing: $pdf-viewer-search-dialog-spacing !default;
-$pdf-viewer-search-dialog-textbox-padding-x: $input-padding-y !default;
+$pdf-viewer-search-dialog-textbox-padding-x: $kendo-input-padding-y !default;
 $pdf-viewer-search-dialog-input-button-height: $line-height-em !default;
 $pdf-viewer-search-dialog-matches-width: 4.5em !default;
 

package/scss/pivotgrid/_layout.scss

@@ -247,7 +247,7 @@
                 font-weight: 500;
                 align-items: flex-start;
             }
-            .k-dropdown {
+            .k-dropdown-list {
                 max-width: 90px;
             }
             .k-textbox {
@@ -356,7 +356,7 @@
         .k-icon {
             margin-right: map-get( $spacing, 2 );
         }
-        .k-dropdown {
+        .k-dropdown-list {
             max-width: 100px;
         }
     }
@@ -510,11 +510,11 @@
     .k-pivot-toolbar .k-button,
     .k-fieldselector .k-list li.k-item {
         @include border-radius( $border-radius );
-        padding: $button-padding-y $button-padding-x;
-        padding-right: calc( #{$button-padding-x} + #{$icon-size * 3} );
+        padding: $kendo-button-padding-y $kendo-button-padding-x;
+        padding-right: calc( #{$kendo-button-padding-x} + #{$icon-size * 3} );
         min-height: auto;
         font-size: $font-size;
-        line-height: $button-line-height;
+        line-height: $kendo-button-line-height;
         text-align: left;
         white-space: normal;
         word-break: break-word;
@@ -528,8 +528,8 @@
 
     .k-field-actions {
         position: absolute;
-        right: $button-padding-y;
-        top: $button-padding-y;
+        right: $kendo-button-padding-y;
+        top: $kendo-button-padding-y;
         line-height: 1;
         cursor: pointer;
     }

package/scss/pivotgrid/_theme.scss

@@ -193,19 +193,19 @@
     .k-pivot-toolbar .k-button,
     .k-fieldselector .k-list li.k-item {
         @include fill(
-            $button-text,
-            $button-bg,
-            $button-border,
-            $button-gradient
+            $kendo-button-text,
+            $kendo-button-bg,
+            $kendo-button-border,
+            $kendo-button-gradient
         );
 
         &:hover,
         &.k-state-hover {
             @include fill(
-                $button-hovered-text,
-                $button-hovered-bg,
-                $button-hovered-border,
-                $button-hovered-gradient
+                $kendo-button-hover-text,
+                $kendo-button-hover-bg,
+                $kendo-button-hover-border,
+                $kendo-button-hover-gradient
             );
         }
 
@@ -213,10 +213,10 @@
         &:active,
         &.k-state-active {
             @include fill(
-                $button-active-text,
-                $button-active-bg,
-                $button-active-border,
-                $button-active-gradient
+                $kendo-button-active-text,
+                $kendo-button-active-bg,
+                $kendo-button-active-border,
+                $kendo-button-active-gradient
             );
         }
 
@@ -224,7 +224,7 @@
         &:focus,
         &.k-state-focus,
         &.k-state-focused {
-            box-shadow: $button-focused-shadow;
+            box-shadow: $kendo-button-focus-shadow;
         }
 
         &.k-empty {

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 {

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;
         }
     }