@progress/kendo-theme-default 3.4.0-dev.d0adf13e → 3.4.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@progress/kendo-theme-default",
   "description": "SASS resources for the default Kendo UI theme",
-  "version": "3.4.0-dev.d0adf13e",
+  "version": "3.4.0",
   "author": "Progress",
   "license": "Apache-2.0",
   "keywords": [
@@ -30,8 +30,8 @@
     "prepublishOnly": "npm run build && npm run swatches"
   },
   "devDependencies": {
-    "@progress/kendo-theme-tasks": "^0.2.0-dev.d0adf13e",
-    "bootstrap": "^4.1.3",
+    "@progress/kendo-theme-tasks": "^0.1.4",
+    "bootstrap": "^4.3.1",
     "handlebars": "^4.0.10"
   }
 }

package/scss/_variables.scss

@@ -180,6 +180,14 @@ $toolbar-button-line-height: $button-line-height !default;
 $toolbar-button-calc-size: #{$toolbar-button-line-height * 1em} + #{$toolbar-button-padding-y * 2} + #{$toolbar-button-border-width * 2} !default;
 $toolbar-inner-calc-size: #{$toolbar-button-calc-size} + #{$toolbar-padding-y * 2} !default;
 
+$toolbar-button-expanded-bg: null !default;
+$toolbar-button-expanded-shadow: none !default;
+
+$toolbar-shadow: none !default;
+$toolbar-separator-padding-y: $toolbar-button-padding-y !default;
+$toolbar-separator-border: inherit !default;
+
+
 $list-item-padding-x: $padding-x !default;
 $list-item-padding-y: $padding-y !default;
 
@@ -1154,9 +1162,10 @@ $editor-overlay-background: #000 !default;
 // Scheduler
 $scheduler-event-border-radius: $border-radius !default;
 
-$scheduler-event-border: $accent !default;
 $scheduler-event-bg: $selected-bg !default;
 $scheduler-event-text: $selected-text !default;
+$scheduler-event-min-height: 25px !default;
+$scheduler-event-line-height: calc(#{$scheduler-event-min-height} - (2 * #{$padding-y})) !default;
 
 $scheduler-event-selected-box-shadow: null !default;
 

package/scss/button/_theme.scss

@@ -248,6 +248,8 @@
 
         // Explicitly exclude flat button from button group styling
         &,
+        &:hover,
+        &.k-state-hover,
         .k-button-group & {
             color: $accent;
             background: none;

package/scss/calendar/_layout.scss

@@ -111,6 +111,10 @@
         }
         &:not(.k-calendar-infinite) .k-calendar-header {
             line-height: inherit;
+
+            .k-calendar-nav {
+                white-space: nowrap;
+            }
         }
 
 
@@ -341,6 +345,7 @@
         box-sizing: content-box;
         overflow-x: hidden;
         overflow-y: auto;
+        display: block;
 
         @include hide-scrollbar('right');
     }
@@ -485,7 +490,12 @@
         // jQuery
         &:not(.k-calendar-infinite) {
             .k-calendar-view {
+                display: flex;
                 flex-direction: row;
+
+                .k-animation-container-sm & {
+                    flex-direction: column;
+                }
             }
         }
 

package/scss/chat/_layout.scss

@@ -417,7 +417,6 @@ $message-group-spacing: calc( #{$chat-avatar-size} + #{$chat-avatar-spacing} );
 @include exports( "chat/toolbar/layout" ) {
 
     .k-chat .k-toolbar-box {
-        padding: $chat-toolbar-padding-y $chat-toolbar-padding-x;
         width: 100%;
         box-sizing: border-box;
         overflow: hidden;
@@ -434,6 +433,13 @@ $message-group-spacing: calc( #{$chat-avatar-size} + #{$chat-avatar-spacing} );
             overflow: hidden;
             // overflow-x: auto;
             scroll-behavior: smooth;
+            padding: $chat-toolbar-padding-y $chat-toolbar-padding-x;
+
+            // fix for flex container disregarding the right padding
+            &:after {
+                content: '';
+                padding-right: $chat-toolbar-padding-x;
+            }
 
             .k-button + .k-button {
                 margin-left: $chat-toolbar-spacing;

package/scss/colorpicker/_layout.scss

@@ -216,6 +216,7 @@
             height: 14px;
             overflow: hidden;
             -ms-high-contrast-adjust: none;
+            cursor: pointer;
         }
         // TODO: consider extrangting variables
         // sass-lint:disable no-color-literals no-color-keywords

package/scss/colorpicker/_theme.scss

@@ -20,6 +20,7 @@
         }
 
         // Hovered state
+        .k-picker-wrap:hover,
         .k-state-hover {
             @include appearance( hovered-button );
         }

package/scss/common/_base.scss

@@ -84,6 +84,12 @@ $widget-border-width: 1px !default;
     }
 
 
+    // Disable mouse events
+    .k-no-click {
+        pointer-events: none;
+    }
+
+
     // Off-screen container used during PDF export
     .k-pdf-export-shadow {
         position: absolute;

package/scss/common/_icons.scss

@@ -712,6 +712,8 @@
     .k-i-volume-low::before { @extend .k-i-volume-down; }
     .k-i-volume-high::before { @extend .k-i-volume-up; }
     .k-i-volume-mute::before { @extend .k-i-volume-off; }
+    .k-i-tick::before { @extend .k-i-check; }
+    .k-i-note::before { @extend .k-i-info; }
 
 
     // RTL icons

package/scss/grid/_layout.scss

@@ -385,6 +385,7 @@
     .k-grouping-header {
         display: block;
         position: relative;
+        white-space: normal;
         padding: $grid-grouping-header-padding-y $grid-grouping-header-padding-x;
         border-width: 0 0 1px;
         border-style: solid;

package/scss/grid/_theme.scss

@@ -154,17 +154,20 @@
             color: $grid-sorting-indicator-text;
         }
 
-        .k-grid-filter {}
-        .k-grid-filter:hover {
-            color: $button-hovered-text;
-            background-color: $button-hovered-bg;
-        }
-        .k-grid-filter:focus {
-            box-shadow: inset 0 0 0 2px rgba( 0, 0, 0, .1 );
-        }
-        .k-grid-filter.k-state-active {
-            color: $selected-text;
-            background-color: $selected-bg;
+        .k-grid-filter,
+        .k-header-column-menu,
+        .k-hierarchy-cell .k-icon {
+            &:hover {
+                color: $button-hovered-text;
+                background-color: $button-hovered-bg;
+            }
+            &:focus {
+                box-shadow: inset 0 0 0 2px rgba( 0, 0, 0, .1 );
+            }
+            &.k-state-active {
+                color: $selected-text;
+                background-color: $selected-bg;
+            }
         }
     }
 

package/scss/input/_layout.scss

@@ -430,7 +430,7 @@ $checkbox-size: $icon-size !default;
     .k-form {
         input,
         label:not(.k-checkbox-label):not(.k-radio-label),
-        .k-widget:not(.k-calendar) {
+        .k-widget:not(.k-calendar):not(.k-switch) {
             display: block;
         }
 

package/scss/popup/_theme.scss

@@ -41,7 +41,9 @@
 
     .k-list .k-item,
     .k-list-optionlabel {
-        transition: all .2s ease; // sass-lint:disable-block no-transition-all
+        transition-property: color, background-color, outline-color, box-shadow;
+        transition-duration: 200ms;
+        transition-timing-function: ease;
     }
 
     .k-list .k-item:hover,

package/scss/scheduler/_layout.scss

@@ -147,13 +147,6 @@
         }
         .k-nav-today { @include border-left-radius-only(); }
         .k-nav-next { @include border-right-radius-only(); }
-
-        .k-rtl & {
-            .k-i-arrow-60-left,
-            .k-i-arrow-60-right {
-                transform: scaleX(-1);
-            }
-        }
     }
 
     .k-scheduler-tools {
@@ -231,6 +224,11 @@
             &.k-state-expanded {
                 li { display: block; }
             }
+
+            .k-rtl & {
+                left: $toolbar-padding-x;
+                right: auto;
+            }
         }
     }
 
@@ -261,13 +259,6 @@
         display: flex;
         flex-direction: column;
 
-        &.k-scheduler-timeline-view,
-        &.k-scheduler-timeline-week-view,
-        &.k-scheduler-timeline-month-view {
-
-            .k-scheduler-header-wrap { border-width: 0; }
-        }
-
         &.k-scheduler-weekview,
         &.k-scheduler-dayview {
             .k-scheduler-pane:first-child .k-scheduler-table {
@@ -342,7 +333,7 @@
     kendo-scheduler .k-event,
     .k-event {
         @include border-radius();
-        min-height: $line-height-em;
+        min-height: $scheduler-event-min-height;
         box-sizing: border-box;
         border-width: 0;
         border-style: solid;
@@ -371,6 +362,7 @@
 
         // Template
         .k-event-template {
+            line-height: $scheduler-event-line-height;
             padding: $padding-y $padding-x;
             // TODO: incompatible units
             // padding-right: $padding-x-sm + $spacer;
@@ -387,7 +379,8 @@
         .k-event-actions {
             white-space: nowrap;
             position: absolute;
-            top: $padding-y-sm;
+            top: 0;
+            bottom: 0;
             right: $padding-x;
             opacity: .5;
             visibility: hidden;
@@ -398,6 +391,11 @@
                 opacity: 1;
             }
 
+            .k-icon {
+                line-height: normal;
+                font-size: inherit;
+            }
+
             a { color: inherit; }
         }
 
@@ -411,6 +409,7 @@
             position: relative;
             opacity: 1;
             visibility: visible;
+            line-height: normal;
         }
 
 
@@ -752,6 +751,8 @@
 
         .k-event {
             text-align: right;
+            padding-right: 0;
+            padding-left: $padding-x;
 
             .k-resize-w {
                 left: auto;
@@ -769,6 +770,7 @@
             }
 
             .k-event-actions:first-child {
+                margin: $padding-y-sm $padding-x-sm 0 .4ex;
                 float: right;
             }
         }
@@ -780,6 +782,10 @@
         .k-scheduler-views {
             li:first-child + li { @include border-right-radius-only(); }
             li:last-child { @include border-left-radius-only(); }
+
+            .k-current-view .k-link::after {
+                margin: 0 1ex 0 0;
+            }
         }
 
         .k-scheduler-navigation  {
@@ -824,6 +830,27 @@
         .k-scheduler-edit-form .k-scheduler-delete {
             float: right;
         }
-    }
 
+        .k-scheduler,
+        &.k-scheduler
+        {
+            .k-i-arrow-60-left,
+            .k-i-arrow-60-right,
+            .k-current-time-arrow-right
+            {
+                transform: scaleX(-1);
+            }
+
+            .k-scheduler-header-wrap {
+                border-right-width: 0;
+                border-left-width: 1px;
+            }
+
+            .k-scheduler-agendaday {
+                float: right;
+                margin: 0 0 0 .2em;
+            }
+        }
+    }
 }
+

package/scss/scheduler/_theme.scss

@@ -136,6 +136,11 @@
             left: 3px;
             opacity: 0.35;
             background-color: $scheduler-event-text;
+
+            .k-rtl & {
+                left: 0;
+                right: 3px;
+            }
         }
 
         &.k-state-selected {

package/scss/tabstrip/_layout.scss

@@ -182,6 +182,17 @@
             @include border-top-radius( $tabstrip-item-border-radius );
             border-bottom-width: 0;
         }
+
+        &.k-tabstrip-scrollable {
+            .k-tabstrip-prev,
+            .k-tabstrip-next {
+                bottom: 0;
+
+                .k-ie11 & {
+                    top: auto;
+                }
+            }
+        }
     }
     .k-tabstrip-left {
         flex-direction: row;
@@ -294,16 +305,27 @@
 
 
 @include exports("tabstrip/layout/rtl") {
+    .k-rtl .k-tabstrip,
+    .k-tabstrip[dir="rtl"] {
 
-    .k-tabstrip-left,
-    .k-tabstrip-right {
-
-        .k-rtl &,
-        &[dir="rtl"] {
+        &.k-tabstrip-left,
+        &.k-tabstrip-right {
             > .k-tabstrip-items { order: 1; }
             > .k-content { order: 0; }
         }
 
+        .k-tabstrip-prev {
+            left: auto;
+            right: 0;
+            transform: scaleX(-1);
+        }
+
+        .k-tabstrip-next {
+            left: 0;
+            right: auto;
+            transform: scaleX(-1);
+        }
+
     }
 
 }

package/scss/toolbar/_layout.scss

@@ -1,6 +1,3 @@
-$toolbar-shadow: none !default;
-$toolbar-separator-padding-y: $toolbar-button-padding-y !default;
-
 @include exports("toolbar/layout") {
 
     // Base
@@ -17,6 +14,11 @@ $toolbar-separator-padding-y: $toolbar-button-padding-y !default;
         overflow: hidden;
         box-shadow: $toolbar-shadow;
 
+        &:before {
+            content: '';
+            height: calc(#{$toolbar-button-calc-size});
+        }
+
         &.k-toolbar-resizable {
             flex-wrap: nowrap;
         }
@@ -126,8 +128,8 @@ $toolbar-separator-padding-y: $toolbar-button-padding-y !default;
         // Separator
         .k-separator {
             @extend %hr-vertical;
-            padding: $toolbar-separator-padding-y 0;
             margin: 0 $toolbar-spacing;
+            height: $line-height-em;
 
             & + * {
                 margin-left: 0;

package/scss/toolbar/_theme.scss

@@ -1,8 +1,3 @@
-$toolbar-separator-border: inherit !default;
-
-$toolbar-button-expanded-bg: null !default;
-$toolbar-button-expanded-shadow: none !default;
-
 // Toolbar button types
 // null - default buttons type
 // thin - flat buttons appearance in the normal state and normal buttons appearance in other states