@progress/kendo-theme-default 5.6.1-dev.5 → 5.7.0

package/lib/swatches/default-blue.json

@@ -3,7 +3,7 @@
     "name": "Default Blue",
     "product": "kendo",
     "base": "@progress/kendo-theme-default",
-    "version": "5.6.1-dev.5",
+    "version": "5.7.0",
     "previewColors": [
         "#ffffff",
         "#f5f5f5",

package/lib/swatches/default-dataviz-v4.json

@@ -3,7 +3,7 @@
     "name": "Default Dataviz v4",
     "product": "kendo",
     "base": "@progress/kendo-theme-default",
-    "version": "5.6.1-dev.5",
+    "version": "5.7.0",
     "previewColors": [
         "#ff6358",
         "#ffd246",

package/lib/swatches/default-green.json

@@ -3,7 +3,7 @@
     "name": "Default Green",
     "product": "kendo",
     "base": "@progress/kendo-theme-default",
-    "version": "5.6.1-dev.5",
+    "version": "5.7.0",
     "previewColors": [
         "#ffffff",
         "#f5f5f5",

package/lib/swatches/default-main-dark.json

@@ -3,7 +3,7 @@
     "name": "Default Main Dark",
     "product": "kendo",
     "base": "@progress/kendo-theme-default",
-    "version": "5.6.1-dev.5",
+    "version": "5.7.0",
     "previewColors": [
         "#000000",
         "#151515",

package/lib/swatches/default-main.json

@@ -3,7 +3,7 @@
     "name": "Default Main",
     "product": "kendo",
     "base": "@progress/kendo-theme-default",
-    "version": "5.6.1-dev.5",
+    "version": "5.7.0",
     "previewColors": [
         "#ffffff",
         "#f5f5f5",

package/lib/swatches/default-nordic.json

@@ -3,7 +3,7 @@
     "name": "Default Nordic",
     "product": "kendo",
     "base": "@progress/kendo-theme-default",
-    "version": "5.6.1-dev.5",
+    "version": "5.7.0",
     "previewColors": [
         "#ffffff",
         "#50686e",

package/lib/swatches/default-ocean-blue.json

@@ -3,7 +3,7 @@
     "name": "Default Ocean Blue",
     "product": "kendo",
     "base": "@progress/kendo-theme-default",
-    "version": "5.6.1-dev.5",
+    "version": "5.7.0",
     "previewColors": [
         "#ffffff",
         "#f5f5f5",

package/lib/swatches/default-orange.json

@@ -3,7 +3,7 @@
     "name": "Default Orange",
     "product": "kendo",
     "base": "@progress/kendo-theme-default",
-    "version": "5.6.1-dev.5",
+    "version": "5.7.0",
     "previewColors": [
         "#ffffff",
         "#f5f5f5",

package/lib/swatches/default-purple.json

@@ -3,7 +3,7 @@
     "name": "Default Purple",
     "product": "kendo",
     "base": "@progress/kendo-theme-default",
-    "version": "5.6.1-dev.5",
+    "version": "5.7.0",
     "previewColors": [
         "#ffffff",
         "#f5f5f5",

package/lib/swatches/default-turquoise.json

@@ -3,7 +3,7 @@
     "name": "Default Turquoise",
     "product": "kendo",
     "base": "@progress/kendo-theme-default",
-    "version": "5.6.1-dev.5",
+    "version": "5.7.0",
     "previewColors": [
         "#ffffff",
         "#f5f5f5",

package/lib/swatches/default-urban.json

@@ -3,7 +3,7 @@
     "name": "Default Urban",
     "product": "kendo",
     "base": "@progress/kendo-theme-default",
-    "version": "5.6.1-dev.5",
+    "version": "5.7.0",
     "previewColors": [
         "#ffffff",
         "#e3eef4",

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@progress/kendo-theme-default",
   "description": "SASS resources for the default Kendo UI theme",
-  "version": "5.6.1-dev.5",
+  "version": "5.7.0",
   "author": "Progress",
   "license": "Apache-2.0",
   "keywords": [
@@ -42,7 +42,7 @@
     "postpublish": "echo 'no postpublish for default theme'"
   },
   "devDependencies": {
-    "sass-build": "^0.0.1"
+    "sass-build": "^1.0.0"
   },
-  "gitHead": "511f6ad841f206d54703d5b33a96d7348ac411ba"
+  "gitHead": "5e316441f8406d4e3ef94f189ae71304cf7f6a15"
 }

package/scss/action-sheet/_theme.scss

@@ -43,7 +43,6 @@
 
         // Hover state
         &:hover,
-        &.k-state-hover,
         &.k-hover {
             @include fill(
                 $actionsheet-item-hover-text,
@@ -57,7 +56,6 @@
 
         // Focus state
         &:focus,
-        &.k-state-focus,
         &.k-focus {
             @include fill(
                 $actionsheet-item-focus-text,
@@ -71,7 +69,6 @@
 
         // Disabed state
         &:disabled,
-        &.k-state-disabled,
         &.k-disabled {
             @include fill(
                 $actionsheet-item-disabled-text,

package/scss/adaptive/_layout.scss

@@ -322,7 +322,8 @@
                 border-radius: 50%;
             }
 
-            .k-i-reload {
+            .k-i-reload,
+            .k-i-arrow-rotate-cw {
                 font-size: 1em;
                 margin-right: .5em;
             }

package/scss/adaptive/_theme.scss

@@ -82,12 +82,10 @@
 
         .k-column-menu {
 
-            .k-listgroup-item.k-state-selected,
             .k-listgroup-item.k-selected {
                 color: $adaptive-grid-sort-text;
                 background: none;
             }
-            .k-listgroup-item.k-state-selected .k-link,
             .k-listgroup-item.k-selected .k-link {
                 color: inherit;
             }

package/scss/badge/_layout.scss

@@ -2,7 +2,7 @@
 
     .k-badge {
         padding: 0;
-        border-width: 0;
+        border-width: $kendo-badge-border-width;
         border-style: solid;
         border-color: transparent;
         box-sizing: border-box;
@@ -52,74 +52,23 @@
 
 
     // Badge sizes
-    .k-badge-sm {
-        padding: $badge-padding-y-sm $badge-padding-x-sm;
-        border-width: $badge-border-width-sm;
-        font-size: $badge-font-size-sm;
-        line-height: $badge-line-height-sm;
-
-        &:empty { padding: $badge-padding-y-sm; }
-    }
-    .k-badge-md {
-        padding: $badge-padding-y $badge-padding-x;
-        border-width: $badge-border-width;
-        font-size: $badge-font-size;
-        line-height: $badge-line-height;
-
-        &:empty { padding: $badge-padding-y; }
-    }
-    .k-badge-lg {
-        padding: $badge-padding-y-lg $badge-padding-x-lg;
-        border-width: $badge-border-width-lg;
-        font-size: $badge-font-size-lg;
-        line-height: $badge-line-height-lg;
-
-        &:empty { padding: $badge-padding-y-lg; }
-    }
-
-
-    // Badge shapes
-    .k-badge-rounded {
-        &.k-badge-sm { @include border-radius( $badge-border-radius-sm ); }
-        &.k-badge-md { @include border-radius( $badge-border-radius ); }
-        &.k-badge-lg { @include border-radius( $badge-border-radius-lg ); }
-    }
-    .k-badge-pill {
-        border-radius: 5rem;
-    }
-    .k-badge-circle {
-        padding: 0 !important; // sass-lint:disable-line no-important
-        border-radius: 100%;
-
-        &.k-badge-sm {
-            width: $badge-size-sm;
-            height: $badge-size-sm;
-        }
-        &.k-badge-md {
-            width: $badge-size;
-            height: $badge-size;
-        }
-        &.k-badge-lg {
-            width: $badge-size-lg;
-            height: $badge-size-lg;
-        }
-    }
-    .k-badge-dot {
-        padding: 0 !important;  // sass-lint:disable-line no-important
-        border-radius: 100%;
-        font-size: 0;
-
-        &.k-badge-sm {
-            width: $badge-dot-size-sm;
-            height: $badge-dot-size-sm;
-        }
-        &.k-badge-md {
-            width: $badge-dot-size;
-            height: $badge-dot-size;
-        }
-        &.k-badge-lg {
-            width: $badge-dot-size-lg;
-            height: $badge-dot-size-lg;
+    @each $size, $size-props in $kendo-badge-sizes {
+        $_padding-x: map-get( $size-props, padding-x );
+        $_padding-y: map-get( $size-props, padding-y );
+        $_font-size: map-get( $size-props, font-size );
+        $_line-height: map-get( $size-props, line-height );
+        $_min-width: map-get( $size-props, min-width );
+
+        .k-badge-#{$size} {
+            padding: $_padding-y $_padding-x;
+            font-size: $_font-size;
+            line-height: $_line-height;
+            min-width: $_min-width;
+
+            &:empty {
+                padding: $_padding-y;
+                min-width: auto;
+             }
         }
     }
 

package/scss/badge/_theme.scss

@@ -2,7 +2,7 @@
 
     // Solid badges
     @each $name, $color in $kendo-theme-colors {
-        .k-badge-solid.k-badge-#{$name} {
+        .k-badge-solid-#{$name} {
             border-color: $color;
             color: contrast-wcag( $color );
             background-color: $color;
@@ -16,7 +16,7 @@
     }
 
     @each $name, $color in $kendo-theme-colors {
-        .k-badge-outline.k-badge-#{$name} {
+        .k-badge-outline-#{$name} {
             color: $color;
         }
     }

package/scss/badge/_variables.scss

@@ -1,36 +1,71 @@
 // Badge
-$badge-padding-x: $padding-x-sm !default;
-$badge-padding-y: $badge-padding-x !default;
-$badge-border-width: 1px !default;
-$badge-border-radius: $kendo-border-radius-md !default;
-$badge-font-size: $font-size-xs !default;
-$badge-line-height: 1 !default;
-
-$badge-padding-x-sm: ( $badge-padding-x / 2 ) !default;
-$badge-padding-y-sm: ( $badge-padding-y / 2 ) !default;
-$badge-border-width-sm: $badge-border-width !default;
-$badge-border-radius-sm: $kendo-border-radius-sm !default;
-$badge-font-size-sm: $font-size-xs !default;
-$badge-line-height-sm: 1 !default;
-
-$badge-padding-x-lg: ( $badge-padding-x * 1.5 ) !default;
-$badge-padding-y-lg: ( $badge-padding-y * 1.5 ) !default;
-$badge-border-width-lg: $badge-border-width !default;
-$badge-border-radius-lg: $kendo-border-radius-lg !default;
-$badge-font-size-lg: $font-size-sm !default;
-$badge-line-height-lg: 1 !default;
-
-$badge-fixed-size: 20px !default;
-$badge-calc-size: calc( #{$badge-line-height * 1em} + #{$badge-padding-y * 2} + #{$badge-border-width * 2} ) !default;
-$badge-size: if( $use-calc-badge-size, $badge-calc-size, $badge-fixed-size ) !default;
-$badge-dot-size: 10px !default;
-
-$badge-fixed-size-sm: 16px !default;
-$badge-calc-size-sm: calc( #{$badge-line-height-sm * 1em} + #{$badge-padding-y-sm * 2} + #{$badge-border-width-sm * 2} ) !default;
-$badge-size-sm: if( $use-calc-badge-size, $badge-calc-size-sm, $badge-fixed-size-sm ) !default;
-$badge-dot-size-sm: 6px !default;
-
-$badge-fixed-size-lg: 26px !default;
-$badge-calc-size-lg: calc( #{$badge-line-height-lg * 1em} + #{$badge-padding-y-lg * 2} + #{$badge-border-width-lg * 2} ) !default;
-$badge-size-lg: if( $use-calc-badge-size, $badge-calc-size-lg, $badge-fixed-size-lg ) !default;
-$badge-dot-size-lg: 12px !default;
+
+/// Width of the border around the badge.
+/// @group badge
+$kendo-badge-border-width: 1px !default;
+
+/// Border radius of the badge.
+/// @group badge
+$kendo-badge-border-radius: $kendo-border-radius-md !default;
+
+
+/// Horizontal padding of the badge.
+/// @group badge
+$kendo-badge-padding-x: map-get( $spacing, 1 ) !default;
+$kendo-badge-padding-x-sm: map-get( $spacing, 1 ) - map-get( $spacing, thin ) !default;
+$kendo-badge-padding-x-md: map-get( $spacing, 1 ) !default;
+$kendo-badge-padding-x-lg: map-get( $spacing, 1 ) + map-get( $spacing, thin ) !default;
+
+/// Vertical padding of the badge.
+/// @group badge
+$kendo-badge-padding-y: map-get( $spacing, 1 ) !default;
+$kendo-badge-padding-y-sm: map-get( $spacing, 1 ) - map-get( $spacing, thin )  !default;
+$kendo-badge-padding-y-md: map-get( $spacing, 1 ) !default;
+$kendo-badge-padding-y-lg: map-get( $spacing, 1 ) + map-get( $spacing, thin ) !default;
+
+/// Font sizes of the badge.
+/// @group badge
+$kendo-badge-font-size: $font-size-xs !default;
+$kendo-badge-font-size-sm: $font-size-xs !default;
+$kendo-badge-font-size-md: $font-size-xs !default;
+$kendo-badge-font-size-lg: $font-size-xs !default;
+
+/// Line heights used along with $font-size.
+/// @group badge
+$kendo-badge-line-height: 1 !default;
+$kendo-badge-line-height-sm: $kendo-badge-line-height !default;
+$kendo-badge-line-height-md: $kendo-badge-line-height !default;
+$kendo-badge-line-height-lg: $kendo-badge-line-height !default;
+
+/// Badge min width used for circle badge.
+/// @group badge
+$kendo-badge-min-width: calc( #{$kendo-badge-line-height * 1em} + #{$kendo-badge-padding-y * 2} + #{$kendo-badge-border-width * 2}) !default;
+$kendo-badge-min-width-sm: calc( #{$kendo-badge-line-height-sm * 1em} + #{$kendo-badge-padding-y-sm * 2} + #{$kendo-badge-border-width * 2} ) !default;
+$kendo-badge-min-width-md: calc( #{$kendo-badge-line-height-md * 1em} + #{$kendo-badge-padding-y-md * 2} + #{$kendo-badge-border-width * 2} ) !default;
+$kendo-badge-min-width-lg: calc( #{$kendo-badge-line-height-lg * 1em} + #{$kendo-badge-padding-y-lg * 2} + #{$kendo-badge-border-width * 2} ) !default;
+
+/// Sizes map for the badge.
+/// @group badge
+$kendo-badge-sizes: (
+    sm: (
+        padding-x: $kendo-badge-padding-x-sm,
+        padding-y: $kendo-badge-padding-y-sm,
+        font-size: $kendo-badge-font-size-sm,
+        line-height: $kendo-badge-line-height-sm,
+        min-width: $kendo-badge-min-width-sm
+    ),
+    md: (
+        padding-x: $kendo-badge-padding-x-md,
+        padding-y: $kendo-badge-padding-y-md,
+        font-size: $kendo-badge-font-size-md,
+        line-height: $kendo-badge-line-height-md,
+        min-width: $kendo-badge-min-width-md
+    ),
+    lg: (
+        padding-x: $kendo-badge-padding-x-lg,
+        padding-y: $kendo-badge-padding-y-lg,
+        font-size: $kendo-badge-font-size-lg,
+        line-height: $kendo-badge-line-height-lg,
+        min-width: $kendo-badge-min-width-lg
+    )
+) !default;

package/scss/bottom-navigation/_layout.scss

@@ -80,7 +80,6 @@
             outline: 0;
         }
     }
-    .k-bottom-nav-item.k-state-disabled,
     .k-bottom-nav-item.k-disabled {
         background-color: initial;
     }

package/scss/bottom-navigation/_theme.scss

@@ -8,15 +8,11 @@
                 $bg: $color
             );
 
-            .k-bottom-nav-item.k-state-focus,
-            .k-bottom-nav-item.k-focus,
-            .k-bottom-nav-item.k-state-focused,
             .k-bottom-nav-item.k-focus,
             .k-bottom-nav-item:focus {
                 @include fill( $bg: rgba(true-mix( $color, contrast-wcag( $color ), 35%), .2));
             }
 
-            .k-bottom-nav-item.k-state-selected,
             .k-bottom-nav-item.k-selected {
                 @include fill( $color: contrast-wcag( $color ) );
             }
@@ -31,16 +27,12 @@
             $bottom-nav-flat-border
         );
 
-        .k-bottom-nav-item.k-state-focus,
-        .k-bottom-nav-item.k-focus,
-        .k-bottom-nav-item.k-state-focused,
         .k-bottom-nav-item.k-focus,
         .k-bottom-nav-item:focus {
             @include fill( $bg: rgba($bottom-nav-flat-text, .05) );
         }
 
         @each $name, $color in $kendo-theme-colors {
-            &.k-bottom-nav-#{$name} .k-bottom-nav-item.k-state-selected,
             &.k-bottom-nav-#{$name} .k-bottom-nav-item.k-selected {
                 @if $name == "secondary" or $name == "light" {
                     @include fill( $color: try-shade($color, 3) );

package/scss/breadcrumb/_theme.scss

@@ -9,7 +9,6 @@
         );
 
         &:focus,
-        &.k-state-focused,
         &.k-focus {
             @include box-shadow( $breadcrumb-focused-shadow );
         }
@@ -26,7 +25,6 @@
 
         // Hovered state
         &:hover,
-        &.k-state-hover,
         &.k-hover {
             @include fill(
                 $breadcrumb-link-hovered-text,
@@ -37,7 +35,6 @@
 
         // Focused state
         &:focus,
-        &.k-state-focused,
         &.k-focus {
             @include fill(
                 $breadcrumb-link-focused-text,
@@ -59,7 +56,6 @@
 
         // Hovered state
         &:hover,
-        &.k-state-hover,
         &.k-hover {
             @include fill(
                 $breadcrumb-root-link-hovered-text,
@@ -70,7 +66,6 @@
 
         // Focused state
         &:focus,
-        &.k-state-focused,
         &.k-focus {
             @include fill(
                 $breadcrumb-root-link-focused-text,

package/scss/button/_variables.scss

@@ -35,7 +35,7 @@ $kendo-button-font-size-md: $font-size-md !default;
 $kendo-button-line-height-md: $line-height-md !default;
 
 $kendo-button-padding-x-lg: map-get( $spacing, 3 ) !default;
-$kendo-button-padding-y-lg: map-get( $spacing, 2 );
+$kendo-button-padding-y-lg: map-get( $spacing, 2 ) !default;
 $kendo-button-font-size-lg: $font-size-lg !default;
 $kendo-button-line-height-lg: $line-height-lg !default;
 

package/scss/calendar/_layout.scss

@@ -445,7 +445,6 @@
         }
 
         // // styles are applied to the k-link element inside
-        // .k-state-selected,
         // .k-selected {
         //     color: inherit;
         //     background: transparent;

package/scss/calendar/_theme.scss

@@ -31,10 +31,8 @@
 
             &:hover,
             &.k-hover,
-            &.k-state-hover,
             &:focus,
-            &.k-focus,
-            &.k-state-focus {
+            &.k-focus {
                 color: $calendar-today-nav-hover-text;
             }
         }
@@ -55,8 +53,7 @@
                 .k-calendar-cell-inner {
                     box-shadow: inset 0 0 0 1px $calendar-today-color;
                 }
-                &.k-focus .k-calendar-cell-inner,
-                &.k-state-focused .k-calendar-cell-inner {
+                &.k-focus .k-calendar-cell-inner {
                     box-shadow: inset 0 0 0 1px $calendar-today-color, $calendar-cell-focused-shadow;
                 }
             } @else if $calendar-today-style == color {
@@ -90,8 +87,7 @@
 
         // Interactive states
         .k-calendar-td:hover .k-calendar-cell-inner,
-        .k-calendar-td.k-hover .k-calendar-cell-inner,
-        .k-calendar-td.k-state-hover .k-calendar-cell-inner {
+        .k-calendar-td.k-hover .k-calendar-cell-inner {
             @include fill(
                 $calendar-cell-hover-text,
                 $calendar-cell-hover-bg,
@@ -99,8 +95,7 @@
                 $calendar-cell-hover-gradient
             );
         }
-        .k-calendar-td.k-selected .k-calendar-cell-inner,
-        .k-calendar-td.k-state-selected .k-calendar-cell-inner {
+        .k-calendar-td.k-selected .k-calendar-cell-inner {
             @include fill(
                 $calendar-cell-selected-text,
                 $calendar-cell-selected-bg,
@@ -109,8 +104,7 @@
             );
         }
         .k-calendar-td.k-selected:hover .k-calendar-cell-inner,
-        .k-calendar-td.k-selected.k-hover .k-calendar-cell-inner,
-        .k-calendar-td.k-state-selected:hover .k-calendar-cell-inner {
+        .k-calendar-td.k-selected.k-hover .k-calendar-cell-inner {
             @include fill(
                 $calendar-cell-selected-hover-text,
                 $calendar-cell-selected-hover-bg,
@@ -119,14 +113,11 @@
             );
         }
         .k-calendar-td:focus .k-calendar-cell-inner,
-        .k-calendar-td.k-focus .k-calendar-cell-inner,
-        .k-calendar-td.k-state-focus .k-calendar-cell-inner,
-        .k-calendar-td.k-state-focused .k-calendar-cell-inner {
+        .k-calendar-td.k-focus .k-calendar-cell-inner {
             box-shadow: $calendar-cell-focused-shadow;
         }
         .k-calendar-td.k-selected:focus .k-calendar-cell-inner,
-        .k-calendar-td.k-selected.k-focus .k-calendar-cell-inner,
-        .k-calendar-td.k-state-selected.k-state-focus .k-calendar-cell-inner {
+        .k-calendar-td.k-selected.k-focus .k-calendar-cell-inner {
             box-shadow: $calendar-cell-selected-focus-shadow;
         }
 
@@ -140,8 +131,7 @@
             box-shadow: inset -1px 0 $calendar-navigation-border;
 
             li:hover,
-            li.k-hover,
-            li.k-state-hover {
+            li.k-hover {
                 color: $calendar-today-nav-hover-text;
             }
         }
@@ -164,7 +154,6 @@
         // Invalid
         &.k-invalid,
         &.k-invalid:hover,
-        &.k-state-invalid,
         &.ng-invalid.ng-touched,
         &.ng-invalid.ng-dirty {
             border-color: $invalid-border;
@@ -212,9 +201,7 @@
         }
 
         .k-range-start.k-active,
-        .k-range-start.k-state-active,
-        .k-range-end.k-active,
-        .k-range-end.k-state-active {
+        .k-range-end.k-active {
             .k-calendar-cell-inner {
                 box-shadow: inset 0 0 2px 2px rgba(0, 0, 0, .2);
             }

package/scss/card/_layout.scss

@@ -39,6 +39,7 @@
         display: flex;
         flex-direction: inherit;
         overflow: hidden;
+        position: relative;
     }
 
 
@@ -329,7 +330,7 @@
         margin: 0;
         width: $card-callout-width;
         height: $card-callout-height;
-        border-width: $card-border-width $card-border-width 0 0;
+        border-width: $card-border-width;
         border-style: solid;
         box-sizing: border-box;
         position: absolute;
@@ -338,22 +339,22 @@
     .k-card-callout.k-callout-n {
         top: 0;
         left: 50%;
-        transform: translate(-50%, -50%) rotate(-45deg);
+        transform: translate(-50%, -50%) rotate(45deg);
     }
     .k-card-callout.k-callout-e {
         top: 50%;
         right: 0;
-        transform: translate(50%, -50%) rotate(135deg) scaleX(-1);
+        transform: translate(50%, -50%) rotate(-45deg);
     }
     .k-card-callout.k-callout-s {
         bottom: 0;
         left: 50%;
-        transform: translate(-50%, 50%) rotate(135deg);
+        transform: translate(-50%, 50%) rotate(45deg);
     }
     .k-card-callout.k-callout-w {
         top: 50%;
         left: 0;
-        transform: translate(-50%, -50%) rotate(-135deg);
+        transform: translate(-50%, -50%) rotate(45deg);
     }
 
 }