@progress/kendo-theme-default 5.0.0-next.4 → 5.0.2-dev.0

package/scss/list/_variables.scss

@@ -0,0 +1,248 @@
+// List
+
+/// Font size of the list component, if no size is set.
+/// @group list
+$kendo-list-font-size: null !default;
+$kendo-list-font-size-sm: $font-size-md !default;
+$kendo-list-font-size-md: $font-size-md !default;
+$kendo-list-font-size-lg: $font-size-md !default;
+
+/// Line height of the list component, if no size is set.
+/// @group list
+$kendo-list-line-height: null !default;
+$kendo-list-line-height-sm: null !default;
+$kendo-list-line-height-md: null !default;
+$kendo-list-line-height-lg: null !default;
+
+/// Horizontal padding of list header, if no size is set.
+/// @group list
+$kendo-list-header-padding-x: null !default;
+$kendo-list-header-padding-x-base: map-get( $spacing, 2 ) !default;
+$kendo-list-header-padding-x-sm: map-get( $spacing, 2 ) !default;
+$kendo-list-header-padding-x-md: map-get( $spacing, 2 ) !default;
+$kendo-list-header-padding-x-lg: map-get( $spacing, 2 ) !default;
+
+/// Vertical padding of list header, if no size is set.
+/// @group list
+$kendo-list-header-padding-y: null !default;
+$kendo-list-header-padding-y-base: map-get( $spacing, 1 ) !default;
+$kendo-list-header-padding-y-sm: map-get( $spacing, 1 ) - map-get( $spacing, thin ) !default;
+$kendo-list-header-padding-y-md: map-get( $spacing, 1 ) !default;
+$kendo-list-header-padding-y-lg: map-get( $spacing, 1 ) + map-get( $spacing, thin ) !default;
+
+/// Border width of list header.
+/// @group list
+$kendo-list-header-border-width: 0 0 1px !default;
+
+/// Font size of list header, if no size is set.
+/// @group list
+$kendo-list-header-font-size: null !default;
+$kendo-list-header-font-size-sm: null !default;
+$kendo-list-header-font-size-md: null !default;
+$kendo-list-header-font-size-lg: null !default;
+
+/// Line height of list header, if no size is set.
+/// @group list
+$kendo-list-header-line-height: null !default;
+$kendo-list-header-line-height-sm: null !default;
+$kendo-list-header-line-height-md: null !default;
+$kendo-list-header-line-height-lg: null !default;
+
+/// Font weight of list header.
+/// @group list
+$kendo-list-header-font-weight: null !default;
+
+/// Horizontal padding of list items, when no size is set.
+/// @group list
+$kendo-list-item-padding-x: null !default;
+$kendo-list-item-padding-x-base: map-get( $spacing, 2 ) !default;
+$kendo-list-item-padding-x-sm: map-get( $spacing, 2 ) !default;
+$kendo-list-item-padding-x-md: map-get( $spacing, 2 ) !default;
+$kendo-list-item-padding-x-lg: map-get( $spacing, 2 ) !default;
+
+/// Vertical padding of list items, when no size is set.
+/// @group list
+$kendo-list-item-padding-y: null !default;
+$kendo-list-item-padding-y-base: map-get( $spacing, 1 ) !default;
+$kendo-list-item-padding-y-sm: map-get( $spacing, 1 ) - map-get( $spacing, thin ) !default;
+$kendo-list-item-padding-y-md: map-get( $spacing, 1 ) !default;
+$kendo-list-item-padding-y-lg: map-get( $spacing, 1 ) + map-get( $spacing, thin ) !default;
+
+/// Font size of list items, if no size is set.
+/// @group list
+$kendo-list-item-font-size: null !default;
+$kendo-list-item-font-size-sm: null !default;
+$kendo-list-item-font-size-md: null !default;
+$kendo-list-item-font-size-lg: null !default;
+
+/// Line height of list items, if no size is set.
+/// @group list
+$kendo-list-item-line-height: null !default;
+$kendo-list-item-line-height-sm: null !default;
+$kendo-list-item-line-height-md: null !default;
+$kendo-list-item-line-height-lg: null !default;
+
+/// Horizontal padding of list group items, when no size is set.
+/// @group list
+$kendo-list-group-item-padding-x: null !default;
+$kendo-list-group-item-padding-x-base: map-get( $spacing, 2 ) !default;
+$kendo-list-group-item-padding-x-sm: map-get( $spacing, 2 ) !default;
+$kendo-list-group-item-padding-x-md: map-get( $spacing, 2 ) !default;
+$kendo-list-group-item-padding-x-lg: map-get( $spacing, 2 ) !default;
+
+/// Vertical padding of list group items, when no size is set.
+/// @group list
+$kendo-list-group-item-padding-y: null !default;
+$kendo-list-group-item-padding-y-base: map-get( $spacing, 1 ) !default;
+$kendo-list-group-item-padding-y-sm: map-get( $spacing, 1 ) - map-get( $spacing, thin ) !default;
+$kendo-list-group-item-padding-y-md: map-get( $spacing, 1 ) !default;
+$kendo-list-group-item-padding-y-lg: map-get( $spacing, 1 ) + map-get( $spacing, thin ) !default;
+
+/// Border width of list group items.
+/// @group list
+$kendo-list-group-item-border-width: 1px 0 0 !default;
+
+/// Font size of list group items, if no size is set.
+/// @group list
+$kendo-list-group-item-font-size: null !default;
+$kendo-list-group-item-font-size-sm: null !default;
+$kendo-list-group-item-font-size-md: null !default;
+$kendo-list-group-item-font-size-lg: null !default;
+
+/// Line height of list group items, if no size is set.
+/// @group list
+$kendo-list-group-item-line-height: null !default;
+$kendo-list-group-item-line-height-sm: null !default;
+$kendo-list-group-item-line-height-md: null !default;
+$kendo-list-group-item-line-height-lg: null !default;
+
+/// Font weight of list group item.
+/// @group list
+$kendo-list-group-item-font-weight: null !default;
+
+
+// Kendo list sizes
+$kendo-list-sizes: (
+    sm: (
+        font-size: $kendo-list-font-size-sm,
+        line-height: $kendo-list-line-height-sm,
+        header-padding-x: $kendo-list-header-padding-x-sm,
+        header-padding-y: $kendo-list-header-padding-y-sm,
+        header-font-size: null,
+        header-line-height: null,
+        item-padding-x: $kendo-list-item-padding-x-sm,
+        item-padding-y: $kendo-list-item-padding-y-sm,
+        item-font-size: null,
+        item-line-height: null,
+        group-item-padding-x: $kendo-list-group-item-padding-x-sm,
+        group-item-padding-y: $kendo-list-group-item-padding-y-sm,
+        group-item-font-size: null,
+        group-item-line-height: null
+    ),
+    md: (
+        font-size: $kendo-list-font-size-md,
+        line-height: $kendo-list-line-height-md,
+        header-padding-x: $kendo-list-header-padding-x-md,
+        header-padding-y: $kendo-list-header-padding-y-md,
+        header-font-size: null,
+        header-line-height: null,
+        item-padding-x: $kendo-list-item-padding-x-md,
+        item-padding-y: $kendo-list-item-padding-y-md,
+        item-font-size: null,
+        item-line-height: null,
+        group-item-padding-x: $kendo-list-group-item-padding-x-md,
+        group-item-padding-y: $kendo-list-group-item-padding-y-md,
+        group-item-font-size: null,
+        group-item-line-height: null
+    ),
+    lg: (
+        font-size: $kendo-list-font-size-lg,
+        line-height: $kendo-list-line-height-lg,
+        header-padding-x: $kendo-list-header-padding-x-lg,
+        header-padding-y: $kendo-list-header-padding-y-lg,
+        header-font-size: null,
+        header-line-height: null,
+        item-padding-x: $kendo-list-item-padding-x-lg,
+        item-padding-y: $kendo-list-item-padding-y-lg,
+        item-font-size: null,
+        item-line-height: null,
+        group-item-padding-x: $kendo-list-group-item-padding-x-lg,
+        group-item-padding-y: $kendo-list-group-item-padding-y-lg,
+        group-item-font-size: null,
+        group-item-line-height: null
+    )
+) !default;
+
+
+/// Background color of the list component.
+/// @group list
+$kendo-list-bg: $component-bg !default;
+/// Text color of the list component.
+/// @group list
+$kendo-list-text: $component-text !default;
+/// Border color of the list component.
+/// @group list
+$kendo-list-border: $component-border !default;
+
+
+/// Background color of list header.
+/// @group list
+$kendo-list-header-bg: null !default;
+/// Text color of list header.
+/// @group list
+$kendo-list-header-text: null !default;
+/// Border color of list header.
+/// @group list
+$kendo-list-header-border: inherit !default;
+/// Box shadow of list header.
+/// @group list
+$kendo-list-header-shadow: 0 5px 10px 0 rgba(0, 0, 0, .06) !default;
+
+
+/// Background color of list items.
+/// @group list
+$kendo-list-item-bg: null !default;
+/// Text color of list items.
+/// @group list
+$kendo-list-item-text: null !default;
+
+/// Background color of hovered list items.
+/// @group list
+$kendo-list-item-hover-bg: $hovered-bg !default;
+/// Text color of hovered list items.
+/// @group list
+$kendo-list-item-hover-text: $hovered-text !default;
+
+/// Background color of focused list items.
+/// @group list
+$kendo-list-item-focus-bg: null !default;
+/// Text color of focused list items.
+/// @group list
+$kendo-list-item-focus-text: null !default;
+/// Box shadow of focused list items.
+/// @group list
+$kendo-list-item-focus-shadow: inset 0 0 0 2px rgba(0, 0, 0, .12) !default;
+
+/// Background color of selected list items.
+/// @group list
+$kendo-list-item-selected-bg: $selected-bg !default;
+/// Text color of selected list items.
+/// @group list
+$kendo-list-item-selected-text: $selected-text !default;
+
+/// Background color of list group items.
+/// @group list
+$kendo-list-group-item-bg: null !default;
+/// Text color of list group items.
+/// @group list
+$kendo-list-group-item-text: null !default;
+/// The border color of list group items.
+/// @group list
+$kendo-list-group-item-border: inherit !default;
+/// The base shadow of list group items.
+/// @group list
+$kendo-list-group-item-shadow: null !default;
+
+/// Text color of the 'No Data' text.
+/// @group list
+$kendo-list-no-data-text: $subtle-text !default;

package/scss/listbox/_index.scss

@@ -5,7 +5,9 @@
 @import "../common/_index.scss";
 @import "../button/_index.scss";
 @import "../popup/_index.scss";
+@import "../list/_index.scss";
 @import "../icons/_index.scss";
+@import "../list/_index.scss";
 
 
 // Component

package/scss/listbox/_layout.scss

@@ -72,9 +72,19 @@
 
         .k-list-scroller {
             width: 100%;
+            height: inherit;
             border-width: $listbox-border-width;
             border-style: solid;
             box-sizing: border-box;
+
+            .k-list-scroller {
+                border-width: 0;
+            }
+
+            .k-list {
+                height: inherit;
+                background: transparent;
+            }
         }
 
         .k-drop-hint {

package/scss/listbox/_variables.scss

@@ -1,7 +1,7 @@
 // Listbox
 $listbox-margin: $padding-x !default;
 $listbox-button-margin: $padding-x !default;
-$listbox-width: 12.4em !default;
+$listbox-width: 10em !default;
 $listbox-default-height: 200px !default;
 
 $listbox-border-width: 1px !default;

package/scss/listview/_layout.scss

@@ -3,7 +3,7 @@
     .k-listview {
         margin: 0;
         padding: 0;
-        border-width: $listview-border-width;
+        border-width: 0;
         border-style: solid;
         box-sizing: border-box;
         outline: 0;
@@ -23,7 +23,6 @@
     // Header
     .k-listview-header {
         border-width: 0;
-        border-bottom-width: $listview-border-width;
         border-style: solid;
         border-color: inherit;
     }
@@ -32,7 +31,7 @@
     }
 
 
-    // Listview contnet
+    // Listview content
     .k-listview-content {
         margin: 0;
         padding: 0;
@@ -87,7 +86,6 @@
     // Listview footer
     .k-listview-footer {
         border-width: 0;
-        border-top-width: $listview-border-width;
         border-style: solid;
         border-color: inherit;
     }
@@ -99,14 +97,9 @@
     // Listview pager
     .k-listview-pager {
         border-width: 0;
-        border-top-width: $listview-border-width;
         border-color: inherit;
         font: inherit;
     }
-    .k-listview-pager-top {
-        border-top-width: 0;
-        border-bottom-width: $listview-border-width;
-    }
     .k-listview-bordered > .k-listview-pager-top {
         border-bottom-width: $listview-border-width;
     }

package/scss/map/_layout.scss

@@ -3,12 +3,19 @@
     // Layout
     .k-map {
         height: 600px;
+        box-sizing: border-box;
         border-width: $map-border-width;
         border-style: solid;
         font-size: $map-font-size;
         line-height: $map-line-height;
         font-family: $map-font-family;
 
+        *,
+        *::before,
+        *::after {
+            box-sizing: border-box;
+        }
+
 
         // Scroll
         .km-scroll-wrapper {
@@ -73,33 +80,37 @@
 
         // Buttons
         .k-button {
-            margin: 0;
             padding: 0;
-            border-radius: 100%;
+            width: auto;
+            height: auto;
             line-height: 1;
             box-shadow: none;
             position: absolute;
 
-            &:not(:hover) {
-                border-color: transparent;
-                background: none;
+            .k-icon {
+                min-width: 0;
+                min-height: 0;
             }
         }
+        .k-navigator-n,
         .k-navigator-up {
             transform: translateX(-50%);
             top: $map-navigator-padding;
             left: 50%;
         }
+        .k-navigator-e,
         .k-navigator-right {
             transform: translateY(-50%);
             right: $map-navigator-padding;
             top: 50%;
         }
+        .k-navigator-s,
         .k-navigator-down {
             transform: translateX(-50%);
             bottom: $map-navigator-padding;
             left: 50%;
         }
+        .k-navigator-w,
         .k-navigator-left {
             transform: translateY(-50%);
             left: $map-navigator-padding;
@@ -116,12 +127,6 @@
         display: flex;
 
         .k-pdf-export & { display: none; }
-
-
-        // Buttons
-        .k-button {
-            padding: $button-padding-y;
-        }
     }
 
 }

package/scss/map/_theme.scss

@@ -9,12 +9,12 @@
 
         .k-navigator {
             @include fill(
-                $button-text,
-                $button-bg,
-                $button-border,
-                $button-gradient
+                $kendo-button-text,
+                $kendo-button-bg,
+                $kendo-button-border,
+                $kendo-button-gradient
             );
-            @include box-shadow( $button-shadow );
+            @include box-shadow( $kendo-button-shadow );
         }
 
         .k-marker {

package/scss/map/_variables.scss

@@ -16,7 +16,7 @@ $map-navigator-height: $map-navigator-width !default;
 $map-navigator-border-width: 1px !default;
 
 $map-zoom-control-margin: $spacer-x !default;
-$map-zoom-control-button-padding-x: $button-padding-y !default;
+$map-zoom-control-button-padding-x: $kendo-button-padding-y !default;
 $map-zoom-control-button-padding-y: $map-zoom-control-button-padding-x !default;
 
 $map-attribution-padding-x: $padding-x-sm !default;

package/scss/maskedtextbox/_layout.scss

@@ -1,50 +1,6 @@
-@include exports("maskedtextbox/layout") {
+@include exports( "maskedtextbox/layout" ) {
 
-    .k-maskedtextbox {
-        width: $input-default-width;
-        font-family: $input-font-family;
-        font-size: $input-font-size;
-        line-height: $input-line-height;
-        border-width: 0;
-        box-sizing: border-box;
-        outline: 0;
-        background: none;
-        text-align: left;
-        white-space: nowrap;
-        display: inline-flex;
-        vertical-align: middle;
-        position: relative;
-        -webkit-touch-callout: none;
-        -webkit-tap-highlight-color: $rgba-transparent;
+    // Masked textbox
+    .k-maskedtextbox {}
 
-        > .k-textbox {
-            flex: 1 0 0%;
-            min-width: 0;
-
-            &.k-state-invalid {
-                transition: none;
-            }
-        }
-
-        .k-i-warning {
-            position: absolute;
-            top: 50%;
-            transform: translateY(-50%);
-            right: $padding-x;
-        }
-
-        &[dir="rtl"],
-        .k-rtl & {
-            text-align: right;
-
-            .k-i-warning {
-                right: auto;
-                left: $padding-x;
-            }
-        }
-
-        ::-ms-clear {
-            display: none;
-        }
-    }
 }

package/scss/maskedtextbox/_theme.scss

@@ -1,24 +1,6 @@
-@include exports("maskedtextbox/theme") {
+@include exports( "maskedtextbox/theme" ) {
 
-    .k-maskedtextbox {
+    // Masked textbox
+    .k-maskedtextbox {}
 
-        .k-i-warning {
-            color: $error;
-        }
-
-        &.k-state-invalid,
-        &.ng-invalid.ng-touched,
-        &.ng-invalid.ng-dirty {
-            .k-textbox {
-                border-color: $invalid-border;
-            }
-
-            &:focus,
-            &.k-state-focused {
-                .k-textbox {
-                    @include box-shadow($invalid-shadow);
-                }
-            }
-        }
-    }
 }

package/scss/mediaplayer/_layout.scss

@@ -14,6 +14,12 @@
         -webkit-touch-callout: none;
         -webkit-tap-highlight-color: $rgba-transparent;
 
+        *,
+        *::before,
+        *::after {
+            box-sizing: border-box;
+        }
+
         > iframe {
             width: 100%;
             height: 100%;
@@ -48,6 +54,11 @@
         width: 100% !important;
         // sass-lint:enable no-important
         box-shadow: none;
+
+
+        .k-dropdown-list {
+            width: auto;
+        }
     }
     .k-mediaplayer-time-wrap {
         flex: 1;
@@ -57,6 +68,9 @@
         padding: 0 (14px / 2);
         align-items: center;
     }
+    .k-mediaplayer-volume {
+        width: 100px;
+    }
 
 
     // Seekbar
@@ -64,8 +78,9 @@
         width: 100%;
         position: absolute;
         z-index: 3;
-        top: -17px;
+        top: 0;
         left: 0;
+        transform: translateY( -50% );
     }
     .k-mediaplayer-seekbar .k-slider-track {
         // sass-lint:disable no-important
@@ -73,6 +88,9 @@
         // sass-lint:enable no-important
         border-radius: 0;
     }
+    .k-mediaplayer-seekbar .k-slider-selection {
+        border-radius: 0;
+    }
 
     .k-mediaplayer-fullscreen {
         z-index: 10000;

package/scss/menu/_index.scss

@@ -4,7 +4,9 @@
 // Dependencies
 @import "../common/_index.scss";
 @import "../popup/_index.scss";
+@import "../list/_index.scss";
 @import "../icons/_index.scss";
+@import "../list/_index.scss";
 
 
 // Component