@progress/kendo-theme-default 5.5.0 → 5.5.1-dev.0

package/scss/grid/_theme.scss

@@ -73,9 +73,9 @@
         }
 
         // Hover state
-        tbody tr:not(.k-detail-row):hover,
-        tbody tr:not(.k-detail-row).k-state-hover ,
-        tbody tr:not(.k-detail-row).k-hover {
+        tbody>tr:not(.k-detail-row):hover,
+        tbody>tr:not(.k-detail-row).k-state-hover,
+        tbody>tr:not(.k-detail-row).k-hover {
             color: $grid-hovered-text;
             background-color: $grid-hovered-bg;
         }
@@ -83,7 +83,7 @@
         // Selected state
         td.k-state-selected,
         td.k-selected,
-        tr.k-state-selected > td ,
+        tr.k-state-selected > td,
         tr.k-selected > td {
             color: $grid-selected-text;
             background-color: $grid-selected-bg;
@@ -99,7 +99,7 @@
         .k-grouping-row > td:focus,
         .k-detail-row > td:focus,
         .k-group-footer > td:focus,
-        .k-grid-pager.k-state-focused ,
+        .k-grid-pager.k-state-focused,
         .k-grid-pager.k-focus {
             box-shadow: $grid-focused-shadow;
         }
@@ -142,12 +142,12 @@
             }
 
             // Selected state
-            .k-state-selected td ,
+            .k-state-selected td,
             .k-selected td {
                 @include fill( $bg: $grid-sticky-selected-bg );
             }
 
-            .k-state-selected.k-alt td ,
+            .k-state-selected.k-alt td,
             .k-selected.k-alt td {
                 @include fill( $bg: $grid-sticky-selected-alt-bg );
             }
@@ -155,7 +155,7 @@
             // Selected hover
             .k-state-selected:hover td,
             .k-selected:hover td,
-            .k-state-selected.k-state-hover td ,
+            .k-state-selected.k-state-hover td,
             .k-selected.k-hover td {
                 @include fill( $bg: $grid-sticky-selected-hovered-bg );
             }
@@ -201,7 +201,7 @@
             &.k-state-border-down {
                 box-shadow: inset 0 0 0 2px rgba( 0, 0, 0, .1 );
             }
-            &.k-state-active ,
+            &.k-state-active,
             &.k-active {
                 color: $selected-text;
                 background-color: $selected-bg;
@@ -261,7 +261,7 @@
         &.k-selected .k-grid-content-sticky,
         &.k-state-selected .k-grid-row-sticky,
         &.k-selected .k-grid-row-sticky,
-        td.k-grid-content-sticky.k-state-selected ,
+        td.k-grid-content-sticky.k-state-selected,
         td.k-grid-content-sticky.k-selected {
             @include fill( $bg: $grid-sticky-selected-bg );
         }
@@ -270,7 +270,7 @@
         &.k-selected.k-alt .k-grid-content-sticky,
         &.k-state-selected.k-alt .k-grid-row-sticky,
         &.k-selected.k-alt .k-grid-row-sticky,
-        &.k-alt td.k-grid-content-sticky.k-state-selected ,
+        &.k-alt td.k-grid-content-sticky.k-state-selected,
         &.k-alt td.k-grid-content-sticky.k-selected {
             @include fill( $bg: $grid-sticky-selected-alt-bg );
         }
@@ -281,7 +281,7 @@
         &:hover .k-grid-row-sticky,
         &.k-state-hover .k-grid-content-sticky,
         &.k-hover .k-grid-content-sticky,
-        &.k-state-hover .k-grid-row-sticky ,
+        &.k-state-hover .k-grid-row-sticky,
         &.k-hover .k-grid-row-sticky {
             background-color: $grid-sticky-hovered-bg;
         }
@@ -298,7 +298,7 @@
         &.k-selected.k-hover .k-grid-row-sticky,
         &:hover td.k-grid-content-sticky.k-state-selected,
         &:hover td.k-grid-content-sticky.k-selected,
-        &.k-state-hover td.k-grid-content-sticky.k-state-selected ,
+        &.k-state-hover td.k-grid-content-sticky.k-state-selected,
         &.k-hover td.k-grid-content-sticky.k-selected {
             background-color: $grid-sticky-selected-hovered-bg;
         }
@@ -312,7 +312,7 @@
             background-color: $grid-sticky-bg;
 
             &:hover,
-            &.k-state-hover ,
+            &.k-state-hover,
             &.k-hover {
                 background-color: $grid-sticky-hovered-bg;
             }
@@ -326,7 +326,7 @@
             }
 
             &:hover td,
-            &.k-state-hover td ,
+            &.k-state-hover td,
             &.k-hover td {
                 background-color: $grid-sticky-hovered-bg;
             }
@@ -344,7 +344,7 @@
         .k-selected.k-grid-row-sticky td,
         .k-grid-row-sticky td.k-state-selected,
         .k-grid-row-sticky td.k-selected,
-        .k-state-selected.k-grid-content-sticky ,
+        .k-state-selected.k-grid-content-sticky,
         .k-selected.k-grid-content-sticky {
             @include fill( $bg: $grid-sticky-selected-bg );
         }
@@ -353,7 +353,7 @@
         tr.k-selected.k-alt .k-grid-content-sticky,
         .k-state-selected.k-alt.k-grid-row-sticky td,
         .k-selected.k-alt.k-grid-row-sticky td,
-        .k-alt .k-state-selected.k-grid-content-sticky ,
+        .k-alt .k-state-selected.k-grid-content-sticky,
         .k-alt .k-selected.k-grid-content-sticky {
             @include fill( $bg: $grid-sticky-selected-alt-bg );
         }
@@ -369,7 +369,7 @@
         .k-grid-row-sticky.k-alt.k-state-hover td,
         .k-grid-row-sticky.k-alt.k-hover td,
         .k-alt:hover .k-grid-content-sticky,
-        .k-alt.k-state-hover .k-grid-content-sticky ,
+        .k-alt.k-state-hover .k-grid-content-sticky,
         .k-alt.k-hover .k-grid-content-sticky {
             background-color: $grid-sticky-hovered-bg;
         }
@@ -397,7 +397,7 @@
         .k-grid-row-sticky.k-hover td.k-selected,
         tr:hover .k-grid-content-sticky.k-state-selected,
         tr:hover .k-grid-content-sticky.k-selected,
-        tr.k-state-hover .k-grid-content-sticky.k-state-selected ,
+        tr.k-state-hover .k-grid-content-sticky.k-state-selected,
         tr.k-hover .k-grid-content-sticky.k-selected {
             background-color: $grid-sticky-selected-hovered-bg;
         }
@@ -409,7 +409,7 @@
         }
 
         &:hover .k-grid-content-sticky,
-        &.k-state-hover .k-grid-content-sticky ,
+        &.k-state-hover .k-grid-content-sticky,
         &.k-hover .k-grid-content-sticky {
             @include fill( $bg: $grid-sticky-hovered-bg );
         }
@@ -423,13 +423,13 @@
         );
     }
     .k-columnmenu-item:focus,
-    .k-columnmenu-item.k-state-focus ,
+    .k-columnmenu-item.k-state-focus,
     .k-columnmenu-item.k-focus {
         @include box-shadow( $kendo-list-item-focus-shadow );
     }
 
     .k-columnmenu-item {
-        &.k-state-selected ,
+        &.k-state-selected,
         &.k-selected {
             @include fill(
                 $kendo-list-item-selected-text,
@@ -455,7 +455,7 @@
                 );
 
                 &:hover,
-                &.k-state-hover ,
+                &.k-state-hover,
                 &.k-hover {
                     @include fill(
                         $kendo-list-item-hover-text,
@@ -463,7 +463,7 @@
                     );
                 }
 
-                &.k-state-selected ,
+                &.k-state-selected,
                 &.k-selected {
                     @include fill(
                         $kendo-list-item-selected-text,
@@ -472,7 +472,7 @@
                 }
 
                 &:focus,
-                &.k-state-focused ,
+                &.k-state-focused,
                 &.k-focus {
                     @include box-shadow( $kendo-list-item-focus-shadow );
                 }

package/scss/index.scss

@@ -157,3 +157,4 @@
 @import "dataviz/_index.scss";
 @import "map/_index.scss";
 @import "orgchart/_index.scss";
+@import "signature/_index.scss";

package/scss/listview/_theme.scss

@@ -13,7 +13,7 @@
     // Listview content
     .k-listview-content {
 
-        > .k-state-focused ,
+        > .k-state-focused,
         > .k-focus {
             @include fill(
                 $listview-item-focus-text,
@@ -23,7 +23,7 @@
             @include box-shadow( $listview-item-focus-shadow );
         }
 
-        > .k-state-selected ,
+        > .k-state-selected,
         > .k-selected {
             @include fill(
                 $listview-item-selected-text,

package/scss/orgchart/_theme.scss

@@ -35,7 +35,7 @@
     .k-orgchart-node-group-container:focus,
     .k-orgchart-node-group-container.k-focus,
     .k-orgchart-node-group-container.k-state-focus,
-    .k-orgchart-node-group-container.k-state-focused ,
+    .k-orgchart-node-group-container.k-state-focused,
     .k-orgchart-node-group-container.k-focus {
         @include box-shadow( $orgchart-node-group-focus-shadow );
         @include fill ( $border: $orgchart-node-group-focus-border );

package/scss/pager/_layout.scss

@@ -33,7 +33,7 @@
 
             // Focused state
             &:focus,
-            &.k-state-focus ,
+            &.k-state-focus,
             &.k-focus {
                 z-index: 3;
             }
@@ -83,7 +83,7 @@
         &:hover {
             z-index: 2;
         }
-        &.k-state-disabled ,
+        &.k-state-disabled,
         &.k-disabled {
             color: inherit;
         }
@@ -133,7 +133,7 @@
         }
 
         // Selected state
-        .k-state-selected ,
+        .k-state-selected,
         .k-selected {
             cursor: inherit;
             z-index: 2;

package/scss/pager/_theme.scss

@@ -10,7 +10,7 @@
         &:focus,
         &.k-focus,
         &.k-state-focus,
-        &.k-state-focused ,
+        &.k-state-focused,
         &.k-focus {
             @include fill( $bg: $pager-focus-bg );
             @include box-shadow( $pager-focus-shadow );
@@ -26,7 +26,7 @@
         );
 
         &:hover,
-        &.k-state-hover ,
+        &.k-state-hover,
         &.k-hover {
             @include fill(
                 $pager-item-hover-text,
@@ -35,7 +35,7 @@
             );
         }
 
-        &.k-state-selected ,
+        &.k-state-selected,
         &.k-selected {
             @include fill(
                 $pager-item-selected-text,
@@ -45,7 +45,7 @@
         }
 
         &:focus,
-        &.k-state-focus ,
+        &.k-state-focus,
         &.k-focus {
             background-color: $pager-item-focus-bg;
             @include box-shadow( $pager-item-focus-shadow );
@@ -69,7 +69,7 @@
             );
 
             &:hover,
-            &.k-state-hover ,
+            &.k-state-hover,
             &.k-hover {
                 @include fill(
                     $pager-number-hover-text,
@@ -79,13 +79,13 @@
             }
 
             &:focus,
-            &.k-state-focus ,
+            &.k-state-focus,
             &.k-focus {
                 background-color: $pager-number-focus-bg;
                 @include box-shadow( $pager-number-focus-shadow );
             }
 
-            &.k-state-selected ,
+            &.k-state-selected,
             &.k-selected {
                 @include fill(
                     $pager-number-selected-text,
@@ -118,7 +118,7 @@
                 );
 
                 &:hover,
-                &.k-state-hover ,
+                &.k-state-hover,
                 &.k-hover {
                     @include fill(
                         $dropdownlist-hovered-text,
@@ -139,7 +139,7 @@
                 .k-link {
 
                     &:hover,
-                    &.k-state-hover ,
+                    &.k-state-hover,
                     &.k-hover {
                         @include fill(
                             $kendo-list-item-hover-text,
@@ -147,7 +147,7 @@
                         );
                     }
 
-                    &.k-state-selected ,
+                    &.k-state-selected,
                     &.k-selected {
                         @include fill(
                             $kendo-list-item-selected-text,

package/scss/panelbar/_theme.scss

@@ -38,7 +38,7 @@
 
             // Hover
             > .k-link:hover,
-            > .k-link.k-state-hover ,
+            > .k-link.k-state-hover,
             > .k-link.k-hover {
                 @include fill(
                     $panelbar-header-hovered-text,
@@ -52,7 +52,7 @@
             > .k-link:focus,
             > .k-link.k-state-focus,
             > .k-link.k-focus,
-            > .k-link.k-state-focused ,
+            > .k-link.k-state-focused,
             > .k-link.k-focus {
                 @include fill(
                     $panelbar-header-focused-text,
@@ -65,7 +65,7 @@
 
             // Focus & Hover
             > .k-link:focus:hover,
-            > .k-link.k-state-focus.k-state-hover ,
+            > .k-link.k-state-focus.k-state-hover,
             > .k-link.k-focus.k-hover {
                 @include fill(
                     $panelbar-header-hovered-focused-text,
@@ -76,7 +76,7 @@
             }
 
             // Selected
-            > .k-link.k-state-selected ,
+            > .k-link.k-state-selected,
             > .k-link.k-selected {
                 @include fill(
                     $panelbar-header-selected-text,
@@ -94,7 +94,7 @@
             // Selected Hover
             > .k-link.k-state-selected:hover,
             > .k-link.k-selected:hover,
-            > .k-link.k-state-selected.k-state-hover ,
+            > .k-link.k-state-selected.k-state-hover,
             > .k-link.k-selected.k-hover {
                 @include fill(
                     $panelbar-header-selected-hovered-text,
@@ -109,7 +109,7 @@
             > .k-link.k-selected:focus,
             > .k-link.k-state-selected.k-state-focus,
             > .k-link.k-selected.k-focus,
-            > .k-link.k-state-selected.k-state-focused ,
+            > .k-link.k-state-selected.k-state-focused,
             > .k-link.k-selected.k-focused {
                 @include fill(
                     $panelbar-header-selected-focused-text,
@@ -124,7 +124,7 @@
             > .k-link.k-selected:hover:focus,
             > .k-link.k-state-selected.k-state-hover.k-state-focus,
             > .k-link.k-selected.k-hover.k-state-focus,
-            > .k-link.k-state-selected.k-state-hover.k-state-focused ,
+            > .k-link.k-state-selected.k-state-hover.k-state-focused,
             > .k-link.k-selected.k-hover.k-state-focused {
                 @include fill(
                     $panelbar-header-selected-hovered-focused-text,
@@ -145,7 +145,7 @@
             > .k-item > .k-link.k-state-hover,
             > .k-item > .k-link.k-hover,
             > .k-panelbar-item > .k-link:hover,
-            > .k-panelbar-item > .k-link.k-state-hover ,
+            > .k-panelbar-item > .k-link.k-state-hover,
             > .k-panelbar-item > .k-link.k-hover {
                 @include fill(
                     $panelbar-item-hovered-text,
@@ -164,7 +164,7 @@
             > .k-panelbar-item > .k-link:focus,
             > .k-panelbar-item > .k-link.k-state-focus,
             > .k-panelbar-item > .k-link.k-focus,
-            > .k-panelbar-item > .k-link.k-state-focused ,
+            > .k-panelbar-item > .k-link.k-state-focused,
             > .k-panelbar-item > .k-link.k-focus {
                 @include fill(
                     $panelbar-item-focused-text,
@@ -180,7 +180,7 @@
             > .k-item > .k-link.k-state-focus.k-state-hover,
             > .k-item > .k-link.k-focus.k-hover,
             > .k-panelbar-item > .k-link:focus:hover,
-            > .k-panelbar-item > .k-link.k-state-focus.k-state-hover ,
+            > .k-panelbar-item > .k-link.k-state-focus.k-state-hover,
             > .k-panelbar-item > .k-link.k-focus.k-hover {
                 @include fill(
                     $panelbar-item-hovered-focused-text,
@@ -193,7 +193,7 @@
             // Selected
             > .k-item > .k-link.k-state-selected,
             > .k-item > .k-link.k-selected,
-            > .k-panelbar-item > .k-link.k-state-selected ,
+            > .k-panelbar-item > .k-link.k-state-selected,
             > .k-panelbar-item > .k-link.k-selected {
                 @include fill(
                     $panelbar-item-selected-text,
@@ -210,7 +210,7 @@
             > .k-item > .k-link.k-selected.k-hover,
             > .k-panelbar-item > .k-link.k-state-selected:hover,
             > .k-panelbar-item > .k-link.k-selected:hover,
-            > .k-panelbar-item > .k-link.k-state-selected.k-state-hover ,
+            > .k-panelbar-item > .k-link.k-state-selected.k-state-hover,
             > .k-panelbar-item > .k-link.k-selected.k-hover {
                 @include fill(
                     $panelbar-item-selected-hovered-text,
@@ -231,7 +231,7 @@
             > .k-panelbar-item > .k-link.k-selected:focus,
             > .k-panelbar-item > .k-link.k-state-selected.k-state-focus,
             > .k-panelbar-item > .k-link.k-selected.k-focus,
-            > .k-item > .k-link.k-state-selected.k-state-focused ,
+            > .k-item > .k-link.k-state-selected.k-state-focused,
             > .k-item > .k-link.k-selected.k-focused {
                 @include fill(
                     $panelbar-item-selected-focused-text,
@@ -252,7 +252,7 @@
             > .k-panelbar-item > .k-link.k-selected:focus:hover,
             > .k-panelbar-item > .k-link.k-state-selected.k-state-focus.k-state-hover,
             > .k-panelbar-item > .k-link.k-selected.k-focus.k-state-hover,
-            > .k-item > .k-link.k-state-selected.k-state-focused.k-state-hover ,
+            > .k-item > .k-link.k-state-selected.k-state-focused.k-state-hover,
             > .k-item > .k-link.k-selected.k-focused.k-state-hover {
                 @include fill(
                     $panelbar-item-selected-hovered-focused-text,

package/scss/pivotgrid/_theme.scss

@@ -75,7 +75,7 @@
     // Selected state
     .k-pivotgrid-cell.k-state-selected,
     .k-pivotgrid-cell.k-selected,
-    .k-pivotgrid-row.k-state-selected > .k-pivotgrid-cell ,
+    .k-pivotgrid-row.k-state-selected > .k-pivotgrid-cell,
     .k-pivotgrid-row.k-selected > .k-pivotgrid-cell {
         @include fill (
             $pivotgrid-selected-text,

package/scss/progressbar/_layout.scss

@@ -26,7 +26,7 @@
 
 
         // Selection
-        > .k-state-selected ,
+        > .k-state-selected,
         > .k-selected {
             border-width: 0;
             border-style: solid;
@@ -87,7 +87,7 @@
 
     // Horizontal
     .k-progressbar-horizontal {
-        width: 27em;
+        width: $progressbar-horizontal-width;
         height: $progressbar-height;
         grid-template-columns: 1fr;
         grid-template-rows: 100%;
@@ -97,7 +97,7 @@
             flex-direction: row;
         }
 
-        > .k-state-selected ,
+        > .k-state-selected,
         > .k-selected {
             width: 0;
             width: calc( var( --kendo-progressbar-progress, 0 ) * 1% ); // sass-lint:disable-line no-duplicate-properties
@@ -124,7 +124,7 @@
         // Horizontal reverse
         &.k-progressbar-reverse {
 
-            > .k-state-selected ,
+            > .k-state-selected,
             > .k-selected {
                 flex-direction: row-reverse;
                 justify-self: flex-end;
@@ -149,7 +149,7 @@
             writing-mode: vertical-lr;
         }
 
-        > .k-state-selected ,
+        > .k-state-selected,
         > .k-selected {
             height: 0;
             height: calc( var( --kendo-progressbar-progress, 0 ) * 1% ); // sass-lint:disable-line no-duplicate-properties
@@ -179,7 +179,7 @@
         &.k-progressbar-reverse {
             flex-direction: column;
 
-            > .k-state-selected ,
+            > .k-state-selected,
             > .k-selected {
                 flex-direction: column;
                 align-self: flex-start;
@@ -204,7 +204,7 @@
 
         > .k-state-selected,
         > .k-selected,
-        > .k-state-selected > .k-progress-status-wrap ,
+        > .k-state-selected > .k-progress-status-wrap,
         > .k-selected > .k-progress-status-wrap {
             transition: width .1s ease-in-out;
         }
@@ -233,7 +233,7 @@
         display: -ms-inline-grid;
 
         > .k-progress-status-wrap,
-        > .k-state-selected ,
+        > .k-state-selected,
         > .k-selected {
             -ms-grid-column: 1;
             -ms-grid-row: 1;
@@ -243,7 +243,7 @@
         -ms-grid-columns: 1fr;
         -ms-grid-rows: $progressbar-height;
 
-        &.k-progressbar-reverse > .k-state-selected ,
+        &.k-progressbar-reverse > .k-state-selected,
         &.k-progressbar-reverse > .k-selected {
             -ms-grid-column-align: end;
         }
@@ -252,12 +252,12 @@
         -ms-grid-columns: $progressbar-height;
         -ms-grid-rows: 1fr;
 
-        > .k-state-selected ,
+        > .k-state-selected,
         > .k-selected {
             -ms-grid-row-align: end;
         }
 
-        &.k-progressbar-reverse > .k-state-selected ,
+        &.k-progressbar-reverse > .k-state-selected,
         &.k-progressbar-reverse > .k-selected {
             -ms-grid-row-align: start;
         }

package/scss/progressbar/_theme.scss

@@ -8,7 +8,7 @@
     .k-progressbar {
         @include fill( $progressbar-text, $progressbar-bg, $progressbar-border, $progressbar-gradient );
 
-        .k-state-selected ,
+        .k-state-selected,
         .k-selected {
             @include fill( $progressbar-fill-text, $progressbar-fill-bg, $progressbar-fill-border, $progressbar-fill-gradient );
         }

package/scss/progressbar/_variables.scss

@@ -1,5 +1,6 @@
 // Progressbar
 $progressbar-height: 22px !default;
+$progressbar-horizontal-width: 100% !default;
 $progressbar-animation-timing: 1s linear infinite !default;
 $progressbar-border-width: 0px !default;
 $progressbar-font-family: $font-family !default;

package/scss/radio/_layout.scss

@@ -169,7 +169,7 @@
         }
 
         .k-radio:focus,
-        .k-radio.k-state-focus ,
+        .k-radio.k-state-focus,
         .k-radio.k-focus {
             box-shadow: none !important; // sass-lint:disable-line no-important
 

package/scss/radio/_theme.scss

@@ -12,7 +12,7 @@
 
     // Hover state
     .k-radio:hover,
-    .k-radio.k-state-hover ,
+    .k-radio.k-state-hover,
     .k-radio.k-hover {
         @include fill(
             $kendo-radio-hover-text,
@@ -24,7 +24,7 @@
 
     // Focus state
     .k-radio:focus,
-    .k-radio.k-state-focus ,
+    .k-radio.k-state-focus,
     .k-radio.k-focus {
         @include fill( $border: $kendo-radio-focus-border );
         @include box-shadow( $kendo-radio-focus-shadow );
@@ -56,7 +56,7 @@
         );
     }
     .k-radio:checked:focus,
-    .k-radio.k-checked.k-state-focus ,
+    .k-radio.k-checked.k-state-focus,
     .k-radio.k-checked.k-focus {
         @include fill( $border: $kendo-radio-focus-checked-border );
         @include box-shadow( $kendo-radio-focus-checked-shadow );

package/scss/rating/_theme.scss

@@ -4,7 +4,7 @@
         color: $component-text;
 
         &:focus,
-        &.k-state-focused ,
+        &.k-state-focused,
         &.k-focus {
 
             .k-rating-item {
@@ -12,7 +12,7 @@
                     text-shadow: $rating-icon-focused-shadow;
                 }
 
-                &.k-state-selected > .k-icon ,
+                &.k-state-selected > .k-icon,
                 &.k-selected > .k-icon {
                     text-shadow: $rating-icon-focused-selected-shadow;
                 }
@@ -23,19 +23,19 @@
     .k-rating-item {
         color: $rating-icon-text;
 
-        &.k-state-selected ,
+        &.k-state-selected,
         &.k-selected {
             color: $rating-icon-selected-text;
 
             &:focus,
-            &.k-state-focused ,
+            &.k-state-focused,
             &.k-focus {
                 color: $rating-icon-focused-text;
             }
         }
 
         &:hover,
-        &.k-state-hover ,
+        &.k-state-hover,
         &.k-hover {
             color: $rating-icon-hover-text;
             cursor: pointer;