@progress/kendo-theme-default 5.0.0-alpha.2 → 5.0.0-beta.2

package/scss/popup/_layout.scss

@@ -3,7 +3,8 @@
     .k-popup {
         @include border-radius( $popup-border-radius );
         margin: 0;
-        padding: $popup-padding-y $popup-padding-x;
+        padding: 0;
+        // padding: $popup-padding-y $popup-padding-x;
         border-width: $popup-border-width;
         border-style: solid;
         box-sizing: border-box;
@@ -20,13 +21,6 @@
         .k-item {
             outline: none;
         }
-
-        .k-rtl,
-        [dir="rtl"] & {
-            .k-list-optionlabel {
-                text-align: right;
-            }
-        }
     }
     .k-animation-container {
         @include border-bottom-radius-only( $border-radius );
@@ -38,92 +32,10 @@
         overflow: visible;
     }
 
-    .k-popup > kendo-list > .k-first {
-        border-bottom-width: 1px;
-        border-bottom-style: solid;
-    }
-
-    // Virtual list -> K1 - virtuallist.less
-    .k-popup .k-item.k-first {
-        position: relative;
-    }
-
-    .k-popup > .k-group-header,
-    .k-popup > .k-virtual-wrap > .k-group-header {
-        padding: $popup-header-padding;
-        min-height: $line-height-em;
-        font-size: $popup-header-font-size;
-        white-space: normal;
-        transition: $transition;
-        border-bottom-width: 1px;
-        border-bottom-style: solid;
-    }
-    .k-popup > .k-group-header {
-        margin-top: -$popup-padding-y;
-    }
-
-    .k-popup .k-outer-group-header {
-        padding: $popup-header-padding;
-        min-height: $line-height-em;
-        font-size: $popup-header-font-size;
-        white-space: normal;
-
-        &.k-virtual-item {
-            white-space: nowrap;
-            text-overflow: ellipsis;
-        }
-    }
-
     .k-popup > .k-colorpalette {
         padding: $popup-content-padding-y $popup-content-padding-x;
     }
 
-    .k-popup .k-list .k-item > .k-group {
-        padding: 0 .5em;
-        font-size: ($font-size * .714);
-        line-height: $font-size;
-        text-transform: uppercase;
-        position: absolute;
-        top: 0;
-        right: 0;
-    }
-    .k-popup .k-list .k-item > .k-group::before {
-        content: "";
-        width: $font-size;
-        height: $font-size;
-        border-width: ($font-size / 2);
-        border-style: solid;
-        box-sizing: border-box;
-        display: block;
-        position: absolute;
-        left: -$font-size;
-        bottom: 0;
-    }
-    .k-rtl.k-popup .k-list .k-item > .k-group,
-    [dir="rtl"] .k-popup .k-list .k-item > .k-group {
-        right: auto;
-        left: 0;
-
-        &::before {
-            right: -14px;
-            left: auto;
-        }
-    }
-    .k-group-header + div > .k-list > .k-item.k-first::before {
-        content: " ";
-        display: block;
-        border-top-width: 1px;
-        border-top-style: solid;
-        position: absolute;
-        top: -1px;
-        left: 0;
-        right: 0;
-    }
-
-    .k-popup .k-list > .k-outer-group-header {
-        border-top-width: 1px;
-        border-top-style: solid;
-    }
     // Transparent popup
     .k-popup.k-popup-transparent {
         border-width: 0;
@@ -137,158 +49,6 @@
 }
 
 
-@include exports( "list/layout" ) {
-
-    // Layout
-    .k-list-scroller {
-        position: relative;
-        overflow: auto;
-    }
-    .k-list {
-        height: auto;
-
-        > .k-item {
-            display: flex;
-            align-items: center;
-            align-content: center;
-            cursor: pointer;
-
-            > .k-icon {
-                align-self: center;
-                margin-right: $padding-x;
-            }
-        }
-
-        > .k-custom-item {
-            font-style: italic;
-
-            > .k-i-plus {
-                margin-left: auto;
-                margin-right: 0;
-            }
-        }
-
-        [dir="rtl"] & {
-            > .k-item {
-                > .k-icon {
-                    margin-right: 0;
-                    margin-left: $padding-x;
-                }
-            }
-        }
-    }
-
-    .k-list .k-item,
-    .k-list-optionlabel {
-        padding: $list-item-padding-y $list-item-padding-x;
-        min-height: $line-height-em;
-        line-height: $line-height-em;
-        white-space: normal;
-        transition-property: color, background-color, outline-color, box-shadow;
-        transition-duration: 200ms;
-        transition-timing-function: ease;
-    }
-    .k-list-optionlabel {
-        cursor: pointer;
-        outline: none;
-    }
-
-
-    // Filter
-    .k-list-filter {
-        display: block;
-        position: relative;
-        padding: $padding-x;
-        box-sizing: border-box;
-        flex: 0 0 auto;
-    }
-
-    .k-dropdown-button .k-popup {
-        .k-item {
-            cursor: pointer;
-        }
-    }
-
-    // SplitButton
-    // TODO: Wait for final design + revise
-    .k-split-button,
-    .k-dropdown-button {
-        .k-list .k-item:focus {
-            outline: none;
-        }
-    }
-
-}
-
-
-
-
-@include exports( "listcontainer/layout" ) {
-
-    .k-list-container {
-
-        .k-button {
-            @include border-radius( 0 );
-            padding: $list-item-padding-y $list-item-padding-x;
-            border-width: 0;
-            color: inherit;
-            background-color: transparent;
-            background-image: none;
-            line-height: inherit;
-            display: flex;
-            justify-content: flex-start;
-
-            .k-ie11 & {
-                display: flex;
-
-                .k-icon {
-                    margin: 0 $icon-spacing 0 0;
-                }
-            }
-        }
-
-        // Button disabled state
-        .k-button.k-state-disabled {
-            pointer-events: none;
-        }
-
-        .k-nodata {
-            min-height: 138px;
-            width: 100%;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            text-transform: uppercase;
-            font-weight: lighter;
-            text-align: center;
-            white-space: normal;
-
-            .k-button {
-                display: inline-flex;
-                border-width: 1px;
-            }
-        }
-    }
-
-    .k-virtual-content {
-        overflow-y: scroll;
-        -webkit-overflow-scrolling: touch;
-        position: relative;
-
-        > .k-virtual-list > .k-virtual-item {
-            position: absolute;
-            width: 100%;
-            box-sizing: border-box;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            display: block;
-            white-space: nowrap;
-        }
-    }
-
-}
-
-
 
 @include exports( "common/decoration/shadow/legacy" ) {
 

package/scss/popup/_theme.scss

@@ -1,4 +1,4 @@
-@include exports("popup/theme") {
+@include exports( "popup/theme" ) {
 
     .k-popup {
         @include fill(
@@ -6,168 +6,11 @@
             $popup-bg,
             $popup-border
         );
-    }
-
-    .k-popup > kendo-list > .k-first {
-        border-bottom-color: $component-border;
-    }
-
-    .k-popup > .k-group-header,
-    .k-popup > .k-virtual-wrap > .k-group-header {
-        color: $popup-header-text;
-    }
-
-    .k-popup > .k-group-header,
-    .k-popup .k-outer-group-header.k-first,
-    .k-popup > .k-virtual-wrap > .k-group-header {
-        border-bottom-color: $component-border;
-        box-shadow: $list-container-shadow;
-    }
-    .k-popup .k-outer-group-header {
-        color: $popup-header-text;
-        border-bottom-color: $component-border;
-    }
-    .k-popup .k-list .k-item > .k-group {
-        color: $grouping-header-text;
-        background: $grouping-header-bg;
-    }
-    .k-popup .k-list .k-item > .k-group::before {
-        border-color: $grouping-header-bg $grouping-header-bg transparent transparent;
-    }
-    .k-rtl.k-popup .k-list .k-item > .k-group::before,
-    [dir="rtl"] .k-popup .k-list .k-item > .k-group::before {
-        border-color: $grouping-header-bg transparent transparent $grouping-header-bg;
-    }
-    .k-group-header + div > .k-list > .k-item.k-first::before {
-        border-color: $grouping-header-border;
-    }
-    .k-list > .k-outer-group-header {
-        border-color: $grouping-header-border;
-    }
-    .k-popup > .k-colorpalette,
-    .k-popup > .k-flatcolorpicker {
-        background: transparent;
-    }
-}
-
-@include exports( "list/theme" ) {
-
-    .k-list {}
-
-    .k-list .k-item:hover,
-    .k-list .k-item.k-state-hover,
-    .k-list-optionlabel:hover,
-    .k-list-optionlabel.k-state-hover {
-        @include fill(
-            $list-item-hovered-text,
-            $list-item-hovered-bg
-        );
-
-        &.k-state-selected {
-            color: $list-item-selected-text;
-            background-color: shade( $list-item-selected-bg );
-        }
-    }
-
-    .k-list .k-item:focus,
-    .k-list .k-item.k-state-focused,
-    .k-list-optionlabel:focus,
-    .k-list-optionlabel.k-state-focused {
-        @include box-shadow( $list-item-focused-shadow );
-    }
-
-    .k-list .k-item.k-state-selected,
-    .k-list-optionlabel.k-state-selected {
-        @include fill(
-            $list-item-selected-text,
-            $list-item-selected-bg
-        );
+        @include box-shadow( $popup-shadow );
     }
 
     .k-animation-container {
         @include border-bottom-radius-only( $border-radius );
     }
 
-    .k-animation-container-shown,
-    .k-animation-container > .k-popup {
-        @include box-shadow( $popup-shadow );
-    }
-
-    .k-animation-container-fixed > .k-popup {
-        @include box-shadow( none );
-    }
-}
-
-
-
-
-@include exports( "listcontainer/theme" ) {
-
-
-    .k-list-container {
-
-        // Button normal state
-        .k-button {
-            @include box-shadow( none );
-        }
-
-
-        // Button hover state
-        .k-button:hover,
-        .k-button.k-state-hover {
-            @include fill(
-                $list-item-hovered-text,
-                $list-item-hovered-bg
-            );
-        }
-
-
-        // Button active state
-        .k-button:active,
-        .k-button.k-state-active {
-            @include fill(
-                inherit,
-                inherit
-            );
-        }
-
-
-        // Button selected state
-        .k-button.k-state-selected {
-            @include fill(
-                $list-item-selected-text,
-                $list-item-selected-bg
-            );
-        }
-
-
-        // Button focus state
-        .k-button:focus,
-        .k-button.k-state-focus,
-        .k-button.k-state-focused {
-            box-shadow: $list-item-focused-shadow;
-        }
-
-
-        // Button disabled state
-        .k-button.k-state-disabled {
-            background: transparent;
-        }
-
-
-        .k-nodata {
-            color: $list-container-no-data-text;
-
-            .k-button {
-                @include fill(
-                    $kendo-button-text,
-                    $kendo-button-bg,
-                    $kendo-button-border,
-                    $kendo-button-gradient
-                );
-            }
-        }
-
-    }
-
 }

package/scss/popup/_variables.scss

@@ -1,17 +1,12 @@
 // Popup
-$popup-padding-x: 0px !default;
-$popup-padding-y: 0px !default;
+$popup-padding-x: null !default;
+$popup-padding-y: null !default;
 $popup-border-width: 1px !default;
 $popup-border-radius: null !default;
 
 $popup-font-size: $font-size !default;
 $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: $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/_index.scss

@@ -2,6 +2,8 @@
 
 
 // Dependencies
+@import "../common/_index.scss";
+@import "../list/_variables.scss";
 @import "../checkbox/_variables.scss";
 
 

package/scss/radio/_variables.scss

@@ -143,7 +143,7 @@ $kendo-radio-list-padding: 0px !default;
 $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;
+$kendo-radio-list-item-padding-y: $kendo-list-item-padding-y-md !default;
 /// The horizontal list item margin of radio button.
 /// @group radio
 $kendo-radio-list-horizontal-item-margin-x: 32px !default;

package/scss/rating/_layout.scss

@@ -71,14 +71,6 @@
         margin: $rating-label-margin-y $rating-label-margin-x;
     }
 
-    .k-ie9 {
-        .k-rating-label,
-        .k-rating-container,
-        .k-rating-item {
-            display: inline-block;
-        }
-    }
-
     .k-rtl,
     [dir="rtl"] {
         .k-rating-precision-part {

package/scss/scheduler/_index.scss

@@ -6,7 +6,7 @@
 @import "../icons/_index.scss";
 @import "../adaptive/_index.scss";
 @import "../button/_index.scss";
-@import "../datetime/_index.scss";
+@import "../datetimepicker/_index.scss";
 @import "../dropdownlist/_index.scss";
 @import "../dialog/_index.scss";
 @import "../tooltip/_index.scss";

package/scss/scrollview/_layout.scss

@@ -2,7 +2,7 @@
 
     kendo-scrollview.k-scrollview-wrap,
     kendo-scrollview.k-scrollview,
-    .k-widget.k-scrollview {
+    .k-scrollview {
         border-width: $scrollview-border-width;
         border-style: solid;
         box-sizing: border-box;
@@ -61,6 +61,11 @@
             width: calc( 100% / var(--kendo-scrollview-views, 1) );
             flex: 0 0 calc( 100% / var(--kendo-scrollview-views, 1) );
         }
+
+        [dir="rtl"] &,
+        .k-rtl & {
+            transform: translateX( calc( 100% / var(--kendo-scrollview-views, 1) * ( var(--kendo-scrollview-current, 1) - 1) ) );
+        }
     }
 
 

package/scss/slider/_layout.scss

@@ -16,11 +16,13 @@
         -webkit-tap-highlight-color: $rgba-transparent;
 
         .k-button-increase {
+            position: absolute;
             right: 0;
             top: 0;
         }
 
         .k-button-decrease {
+            position: absolute;
             left: 0;
             top: 0;
         }
@@ -487,21 +489,3 @@
         }
     }
 }
-
-
-
-
-@include exports( "slider/layout/legacy" ) {
-
-    .k-no-flexbox .k-slider {
-
-        &-horizontal {
-            display: inline-block;
-        }
-        &-vertical {
-            display: inline-block;
-        }
-
-    }
-
-}

package/scss/spreadsheet/_index.scss

@@ -8,7 +8,7 @@
 @import "../radio/_index.scss";
 @import "../colorpicker/_index.scss";
 @import "../combobox/_index.scss";
-@import "../datetime/_index.scss";
+@import "../datetimepicker/_index.scss";
 @import "../dropdownlist/_index.scss";
 @import "../toolbar/_index.scss";
 @import "../upload/_index.scss";
@@ -17,6 +17,7 @@
 @import "../tabstrip/_index.scss";
 @import "../treeview/_index.scss";
 @import "../icons/_index.scss";
+@import "../list/_index.scss";
 
 
 // Component

package/scss/spreadsheet/_layout.scss

@@ -65,7 +65,8 @@
     .k-spreadsheet-tabstrip .k-loading {
         display: none;
     }
-    .k-spreadsheet-tabstrip .k-content {
+    .k-spreadsheet-tabstrip .k-content,
+    .k-spreadsheet-tabstrip .k-tabstrip-content {
         @include border-radius( 0 );
         padding: 0;
         border-width: 0;
@@ -180,7 +181,7 @@
         min-width: 100px;
 
         .k-item {
-            padding: $list-item-padding-y $list-item-padding-x;
+            padding: $kendo-list-item-padding-y-md $kendo-list-item-padding-x-md;
         }
     }
     .k-syntax-func,
@@ -668,9 +669,6 @@
         }
         .k-reset-color { border-bottom-width: 1px; }
         .k-custom-color { border-top-width: 1px; }
-        .k-spreadsheet-color-palette {
-            padding: $popup-padding-y;
-        }
         .k-spreadsheet-border-type-palette {
             width: 12.5rem;
             height: 5rem;

package/scss/spreadsheet/_theme.scss

@@ -161,8 +161,8 @@
 
             .k-item.k-state-hover {
                 @include fill(
-                    $list-item-hovered-text,
-                    $list-item-hovered-bg
+                    $kendo-list-item-hover-text,
+                    $kendo-list-item-hover-bg
                 );
             }
         }
@@ -191,16 +191,16 @@
         .k-button:hover,
         .k-button.k-state-hover {
             @include fill(
-                $list-item-hovered-text,
-                $list-item-hovered-bg
+                $kendo-list-item-hover-text,
+                $kendo-list-item-hover-bg
             );
         }
         .k-button:active,
         .k-button.k-state-active,
         .k-button.k-state-selected {
             @include fill(
-                $list-item-selected-text,
-                $list-item-selected-bg
+                $kendo-list-item-selected-text,
+                $kendo-list-item-selected-bg
             );
         }
 

package/scss/switch/_layout.scss

@@ -102,7 +102,8 @@
         }
 
         .k-switch-#{$size}[dir="rtl"],
-        [dir="rtl"] .k-switch-#{$size} {
+        [dir="rtl"] .k-switch-#{$size},
+        .k-rtl .k-switch-#{$size} {
 
             .k-switch-label-on {
                 left: auto;
@@ -125,7 +126,8 @@
 
     // RTL
     .k-switch[dir="rtl"],
-    [dir="rtl"] .k-switch {
+    [dir="rtl"] .k-switch,
+    .k-rtl .k-switch {
 
         .k-switch-thumb {
             transform: translate( 50%, -50% );

package/scss/{datetime → table}/_index.scss

@@ -3,14 +3,17 @@
 
 // Dependencies
 @import "../common/_index.scss";
-@import "../action-buttons/_index.scss";
 @import "../input/_index.scss";
 @import "../floating-label/_index.scss";
-@import "../calendar/_index.scss";
+@import "../combobox/_index.scss";
 @import "../popup/_index.scss";
+@import "../toolbar/_variables.scss";
+@import "../menu/_variables.scss";
+@import "../grid/_variables.scss";
 
 
 // Component
 @import "_variables.scss";
 @import "_layout.scss";
 @import "_theme.scss";
+