@progress/kendo-theme-default 5.12.1-dev.2 → 5.12.1-dev.3

package/scss/spreadsheet/_layout.scss

@@ -4,13 +4,13 @@
     .k-spreadsheet {
         width: 800px;
         height: 600px;
-        border-width: $spreadsheet-border-width;
+        border-width: $kendo-spreadsheet-border-width;
         border-style: solid;
         box-sizing: border-box;
         outline: 0;
-        font-family: $spreadsheet-font-family;
-        font-size: $spreadsheet-font-size;
-        line-height: $spreadsheet-line-height;
+        font-family: $kendo-spreadsheet-font-family;
+        font-size: $kendo-spreadsheet-font-size;
+        line-height: $kendo-spreadsheet-line-height;
         display: flex;
         flex-direction: column;
         cursor: default;
@@ -43,7 +43,7 @@
 
     // Quick access toolbar
     .k-spreadsheet-quick-access-toolbar {
-        padding: $kendo-toolbar-padding-y-md;
+        padding: $kendo-toolbar-md-padding-y;
         display: inline-flex;
         flex-direction: row;
         position: absolute;
@@ -55,7 +55,7 @@
 
     // Tabstrip
     .k-spreadsheet-tabstrip {
-        padding-top: $kendo-toolbar-padding-y-md;
+        padding-top: $kendo-toolbar-md-padding-y;
         position: relative;
         z-index: 1;
     }
@@ -177,7 +177,7 @@
         min-width: 100px;
 
         .k-item {
-            padding: $kendo-list-item-padding-y-md $kendo-list-item-padding-x-md;
+            padding: $kendo-list-md-item-padding-y $kendo-list-md-item-padding-x;
         }
     }
     .k-syntax-func,
@@ -551,7 +551,7 @@
 
 @include exports( "spreadsheet/filter/layout" ) {
 
-    $filter-menu-padding-left: calc( #{$kendo-icon-size} + #{2 * $kendo-padding-md-y} );
+    $kendo-filter-menu-padding-left: calc( #{$kendo-icon-size} + #{2 * $kendo-padding-md-y} );
 
     // Filter button
     .k-spreadsheet .k-filter-wrapper {
@@ -590,7 +590,7 @@
                 color: inherit;
             }
             .k-link {
-                padding-left: $filter-menu-padding-left;
+                padding-left: $kendo-filter-menu-padding-left;
             }
             .k-icon {
                 margin-left: calc(-1 * ( #{$kendo-icon-size} + #{$kendo-padding-md-y} ) );
@@ -786,17 +786,17 @@
 
     // Insert image dialog
     .k-spreadsheet-insert-image-dialog {
-        @include border-radius( $spreadsheet-insert-image-dialog-preview-border-radius );
-        border-style: $spreadsheet-insert-image-dialog-border-style;
-        border-width: $spreadsheet-insert-image-dialog-border-width;
+        @include border-radius( $kendo-spreadsheet-insert-image-dialog-preview-border-radius );
+        border-style: $kendo-spreadsheet-insert-image-dialog-border-style;
+        border-width: $kendo-spreadsheet-insert-image-dialog-border-width;
 
         label {
             display: flex;
             justify-content: center;
             min-width: 100%;
-            width: $spreadsheet-insert-image-dialog-preview-width;
-            height: $spreadsheet-insert-image-dialog-preview-height;
-            background-image: url(k-map-get($data-uris, $spreadsheet-insert-image-dialog-preview-img));
+            width: $kendo-spreadsheet-insert-image-dialog-preview-width;
+            height: $kendo-spreadsheet-insert-image-dialog-preview-height;
+            background-image: url(k-map-get($_kendo-data-uris, $kendo-spreadsheet-insert-image-dialog-preview-img));
             background-size: auto 70%;
             background-position: 50% 30%;
             background-repeat: no-repeat;
@@ -804,7 +804,7 @@
             div {
                 display: flex;
                 align-self: flex-end;
-                margin-bottom: $spreadsheet-insert-image-dialog-text-margin-bottom;
+                margin-bottom: $kendo-spreadsheet-insert-image-dialog-text-margin-bottom;
                 pointer-events: none;
             }
 
@@ -843,8 +843,8 @@
         z-index: 101;
 
         &.k-spreadsheet-active-drawing {
-            outline-style: $spreadsheet-drawing-outline-style;
-            outline-width: $spreadsheet-drawing-outline-width;
+            outline-style: $kendo-spreadsheet-drawing-outline-style;
+            outline-width: $kendo-spreadsheet-drawing-outline-width;
         }
 
         .k-spreadsheet-drawing-image {
@@ -860,11 +860,11 @@
         }
 
         .k-spreadsheet-drawing-handle {
-            width: $spreadsheet-drawing-handle-width;
-            height: $spreadsheet-drawing-handle-height;
-            border-style: $spreadsheet-drawing-handle-border-style;
-            border-width: $spreadsheet-drawing-handle-border-width;
-            border-radius: $spreadsheet-drawing-handle-border-radius;
+            width: $kendo-spreadsheet-drawing-handle-width;
+            height: $kendo-spreadsheet-drawing-handle-height;
+            border-style: $kendo-spreadsheet-drawing-handle-border-style;
+            border-width: $kendo-spreadsheet-drawing-handle-border-width;
+            border-radius: $kendo-spreadsheet-drawing-handle-border-radius;
             position: absolute;
             transform: translate(-50%, -50%);
 
@@ -884,7 +884,7 @@
             .k-spreadsheet-has-image {
                 &:hover,
                 &.k-hover {
-                    border-radius: $spreadsheet-insert-image-dialog-preview-overlay-border-radius;
+                    border-radius: $kendo-spreadsheet-insert-image-dialog-preview-overlay-border-radius;
                 }
             }
         }

package/scss/spreadsheet/_theme.scss

@@ -3,9 +3,9 @@
     // Spreadsheet
     .k-spreadsheet {
         @include fill(
-            $spreadsheet-text,
-            $spreadsheet-bg,
-            $spreadsheet-border
+            $kendo-spreadsheet-text,
+            $kendo-spreadsheet-bg,
+            $kendo-spreadsheet-border
         );
     }
 
@@ -43,17 +43,17 @@
 
     // Cell editor
     .k-spreadsheet-cell-editor {
-        color: $spreadsheet-text;
-        background-color: $spreadsheet-bg;
+        color: $kendo-spreadsheet-text;
+        background-color: $kendo-spreadsheet-bg;
     }
 
 
     // Cells
     .k-spreadsheet-merged-cell {
-        background-color: $spreadsheet-bg;
+        background-color: $kendo-spreadsheet-bg;
     }
     .k-spreadsheet-disabled-mask {
-        background-color: $spreadsheet-bg;
+        background-color: $kendo-spreadsheet-bg;
     }
 
     // Selection
@@ -68,12 +68,12 @@
         box-shadow: inset 0 0 0 1px $kendo-selected-bg;
     }
     .k-spreadsheet .k-single-selection::after {
-        border-color: $spreadsheet-bg;
+        border-color: $kendo-spreadsheet-bg;
         background-color: $kendo-selected-bg;
     }
     .k-spreadsheet-active-cell {
         box-shadow: inset 0 0 0 1px $kendo-selected-bg;
-        background-color: $spreadsheet-bg;
+        background-color: $kendo-spreadsheet-bg;
 
         &.k-right {
             box-shadow: inset 0 0 0 1px $kendo-selected-bg, inset -1px 0 0 1px $kendo-selected-bg;
@@ -94,7 +94,7 @@
         box-shadow: inset 0 0 0 1px $kendo-selected-bg;
     }
     .k-spreadsheet .k-auto-fill-punch {
-        background-color: rgba( $spreadsheet-bg, .5 );
+        background-color: rgba( $kendo-spreadsheet-bg, .5 );
     }
 
 
@@ -172,9 +172,9 @@
 
         .k-spreadsheet-value-treeview-wrapper {
             @include fill(
-                $spreadsheet-text,
-                $spreadsheet-bg,
-                $spreadsheet-border
+                $kendo-spreadsheet-text,
+                $kendo-spreadsheet-bg,
+                $kendo-spreadsheet-border
             );
         }
     }
@@ -217,34 +217,34 @@
 @include exports( "spreadsheet/drawing/theme" ) {
 
     .k-spreadsheet-insert-image-dialog {
-        border-color: $spreadsheet-insert-image-dialog-preview-border;
+        border-color: $kendo-spreadsheet-insert-image-dialog-preview-border;
 
         .k-spreadsheet-has-image {
             &:hover,
             &.k-hover {
-                box-shadow: $spreadsheet-insert-image-dialog-preview-overlay-shadow;
+                box-shadow: $kendo-spreadsheet-insert-image-dialog-preview-overlay-shadow;
             }
 
             &:hover div,
             &.k-hover div {
-                color: $spreadsheet-insert-image-dialog-overlay-hover-text;
+                color: $kendo-spreadsheet-insert-image-dialog-overlay-hover-text;
             }
         }
     }
 
     .k-spreadsheet-drawing {
         &.k-spreadsheet-active-drawing {
-            outline-color: $spreadsheet-drawing-handle-outline-color;
+            outline-color: $kendo-spreadsheet-drawing-handle-outline-color;
         }
 
         .k-spreadsheet-drawing-handle {
-            border-color: $spreadsheet-drawing-handle-border-color;
-            background-color: $spreadsheet-drawing-handle-bg;
+            border-color: $kendo-spreadsheet-drawing-handle-border-color;
+            background-color: $kendo-spreadsheet-drawing-handle-bg;
         }
     }
 
     .k-spreadsheet-drawing-anchor-cell {
-        background: $spreadsheet-drawing-anchor-bg;
+        background: $kendo-spreadsheet-drawing-anchor-bg;
     }
 
 }

package/scss/spreadsheet/_variables.scss

@@ -1,35 +1,35 @@
 // Spreadsheet
-$spreadsheet-border-width: 1px !default;
-$spreadsheet-font-family: $font-family !default;
-$spreadsheet-font-size: $font-size !default;
-$spreadsheet-line-height: $line-height !default;
+$kendo-spreadsheet-border-width: 1px !default;
+$kendo-spreadsheet-font-family: $kendo-font-family !default;
+$kendo-spreadsheet-font-size: $kendo-font-size-md !default;
+$kendo-spreadsheet-line-height: $kendo-line-height-md !default;
 
-$spreadsheet-bg: $kendo-component-bg !default;
-$spreadsheet-text: $kendo-component-text !default;
-$spreadsheet-border: $kendo-component-border !default;
+$kendo-spreadsheet-bg: $kendo-component-bg !default;
+$kendo-spreadsheet-text: $kendo-component-text !default;
+$kendo-spreadsheet-border: $kendo-component-border !default;
 
-$spreadsheet-insert-image-dialog-border-style: dashed !default;
-$spreadsheet-insert-image-dialog-border-width: 2px !default;
-$spreadsheet-insert-image-dialog-text-margin-bottom: 30px !default;
-$spreadsheet-insert-image-dialog-preview-width: 355px !default;
-$spreadsheet-insert-image-dialog-preview-height: 230px !default;
-$spreadsheet-insert-image-dialog-preview-img: "image-default.png" !default;
-$spreadsheet-insert-image-dialog-preview-border: $kendo-component-border !default;
-$spreadsheet-insert-image-dialog-preview-border-radius: $kendo-border-radius-md !default;
-$spreadsheet-insert-image-dialog-preview-overlay-shadow: inset 0 0 0 2000px rgba(0, 0, 0, .5) !default;
-$spreadsheet-insert-image-dialog-preview-overlay-border-radius: $kendo-border-radius-md !default;
-$spreadsheet-insert-image-dialog-overlay-hover-text: $kendo-component-bg !default;
+$kendo-spreadsheet-insert-image-dialog-border-style: dashed !default;
+$kendo-spreadsheet-insert-image-dialog-border-width: 2px !default;
+$kendo-spreadsheet-insert-image-dialog-text-margin-bottom: 30px !default;
+$kendo-spreadsheet-insert-image-dialog-preview-width: 355px !default;
+$kendo-spreadsheet-insert-image-dialog-preview-height: 230px !default;
+$kendo-spreadsheet-insert-image-dialog-preview-img: "image-default.png" !default;
+$kendo-spreadsheet-insert-image-dialog-preview-border: $kendo-component-border !default;
+$kendo-spreadsheet-insert-image-dialog-preview-border-radius: $kendo-border-radius-md !default;
+$kendo-spreadsheet-insert-image-dialog-preview-overlay-shadow: inset 0 0 0 2000px rgba(0, 0, 0, .5) !default;
+$kendo-spreadsheet-insert-image-dialog-preview-overlay-border-radius: $kendo-border-radius-md !default;
+$kendo-spreadsheet-insert-image-dialog-overlay-hover-text: $kendo-component-bg !default;
 
-$spreadsheet-drawing-handle-width: 6px !default;
-$spreadsheet-drawing-handle-height: 6px !default;
-$spreadsheet-drawing-handle-border-style: solid !default;
-$spreadsheet-drawing-handle-border-width: 1px !default;
-$spreadsheet-drawing-handle-outline-color: $kendo-color-primary !default;
-$spreadsheet-drawing-handle-border-color: $kendo-selected-bg !default;
-$spreadsheet-drawing-handle-bg: $kendo-color-primary !default;
-$spreadsheet-drawing-handle-border-radius: $kendo-border-radius-lg !default;
+$kendo-spreadsheet-drawing-handle-width: 6px !default;
+$kendo-spreadsheet-drawing-handle-height: 6px !default;
+$kendo-spreadsheet-drawing-handle-border-style: solid !default;
+$kendo-spreadsheet-drawing-handle-border-width: 1px !default;
+$kendo-spreadsheet-drawing-handle-outline-color: $kendo-color-primary !default;
+$kendo-spreadsheet-drawing-handle-border-color: $kendo-selected-bg !default;
+$kendo-spreadsheet-drawing-handle-bg: $kendo-color-primary !default;
+$kendo-spreadsheet-drawing-handle-border-radius: $kendo-border-radius-lg !default;
 
-$spreadsheet-drawing-outline-style: solid !default;
-$spreadsheet-drawing-outline-width: 2px !default;
+$kendo-spreadsheet-drawing-outline-style: solid !default;
+$kendo-spreadsheet-drawing-outline-width: 2px !default;
 
-$spreadsheet-drawing-anchor-bg: rgba( $kendo-selected-bg, .25 ) !default;
+$kendo-spreadsheet-drawing-anchor-bg: rgba( $kendo-selected-bg, .25 ) !default;

package/scss/stepper/_layout.scss

@@ -2,15 +2,15 @@
 
     // Base
     .k-stepper {
-        margin: $stepper-margin-y $stepper-margin-x;
-        padding: $stepper-padding-y $stepper-padding-x;
-        border-width: $stepper-border-width;
+        margin: $kendo-stepper-margin-y $kendo-stepper-margin-x;
+        padding: $kendo-stepper-padding-y $kendo-stepper-padding-x;
+        border-width: $kendo-stepper-border-width;
         border-style: solid;
         box-sizing: border-box;
         outline: 0;
-        font-size: $stepper-font-size;
-        line-height: $stepper-line-height;
-        font-family: $stepper-font-family;
+        font-size: $kendo-stepper-font-size;
+        line-height: $kendo-stepper-line-height;
+        font-family: $kendo-stepper-font-family;
         display: block;
         position: relative;
         -webkit-touch-callout: none;
@@ -53,11 +53,11 @@
 
         // Step indicator
         .k-step-indicator {
-            @include border-radius( $stepper-indicator-border-radius );
-            margin: if($stepper-indicator-focus-offset > 0, $stepper-indicator-focus-offset, null);
-            width: $stepper-indicator-width;
-            height: $stepper-indicator-height;
-            border-width: $stepper-indicator-border-width;
+            @include border-radius( $kendo-stepper-indicator-border-radius );
+            margin: if($kendo-stepper-indicator-focus-offset > 0, $kendo-stepper-indicator-focus-offset, null);
+            width: $kendo-stepper-indicator-width;
+            height: $kendo-stepper-indicator-height;
+            border-width: $kendo-stepper-indicator-border-width;
             border-style: solid;
             display: flex;
             align-items: center;
@@ -73,16 +73,16 @@
             &::after {
                 @include border-radius( 100% );
                 content: "";
-                border-width: $stepper-indicator-focus-border-width;
+                border-width: $kendo-stepper-indicator-focus-border-width;
                 border-style: solid;
                 border-color: inherit;
                 pointer-events: none;
                 display: none;
                 position: absolute;
-                top: calc( -1 * #{$stepper-indicator-focus-calc-offset} );
-                right: calc( -1 * #{$stepper-indicator-focus-calc-offset} );
-                bottom: calc( -1 * #{$stepper-indicator-focus-calc-offset} );
-                left: calc( -1 * #{$stepper-indicator-focus-calc-offset} );
+                top: calc( -1 * #{$kendo-stepper-indicator-focus-calc-offset} );
+                right: calc( -1 * #{$kendo-stepper-indicator-focus-calc-offset} );
+                bottom: calc( -1 * #{$kendo-stepper-indicator-focus-calc-offset} );
+                left: calc( -1 * #{$kendo-stepper-indicator-focus-calc-offset} );
                 z-index: 2;
             }
         }
@@ -105,8 +105,8 @@
             z-index: 1;
         }
         .k-step-label:only-child {
-            @include border-radius( k-math-div( ( $stepper-indicator-height + 2 * $stepper-indicator-border-width ), 2 ) );
-            padding: $stepper-label-padding-y $stepper-label-padding-x;
+            @include border-radius( k-math-div( ( $kendo-stepper-indicator-height + 2 * $kendo-stepper-indicator-border-width ), 2 ) );
+            padding: $kendo-stepper-label-padding-y $kendo-stepper-label-padding-x;
             border-width: 0;
         }
         .k-step-label .k-step-text {
@@ -126,9 +126,9 @@
         // Optional label
         .k-step-label-optional {
             flex-basis: 100%;
-            font-size: $stepper-optional-label-font-size;
-            font-style: $stepper-optional-label-font-style;
-            opacity: $stepper-optional-label-opacity;
+            font-size: $kendo-stepper-optional-label-font-size;
+            font-style: $kendo-stepper-optional-label-font-style;
+            opacity: $kendo-stepper-optional-label-opacity;
         }
 
 
@@ -183,14 +183,14 @@
             text-align: center;
         }
         .k-step-indicator + .k-step-label {
-            margin-top: if($stepper-indicator-focus-offset > 0, calc(8px - #{$stepper-indicator-focus-offset}), 8px);
+            margin-top: if($kendo-stepper-indicator-focus-offset > 0, calc(8px - #{$kendo-stepper-indicator-focus-offset}), 8px);
         }
 
         // Progressbar
         & ~ .k-progressbar {
             width: 100%;
-            height: $stepper-progressbar-size;
-            top: calc(((#{$stepper-indicator-height} + 2 * #{$stepper-indicator-focus-size}) / 2) + #{$stepper-indicator-focus-size} / 2);
+            height: $kendo-stepper-progressbar-size;
+            top: calc(((#{$kendo-stepper-indicator-height} + 2 * #{$kendo-stepper-indicator-focus-size}) / 2) + #{$kendo-stepper-indicator-focus-size} / 2);
         }
     }
 
@@ -199,7 +199,7 @@
         flex-direction: column;
 
         .k-step {
-            min-height: calc((#{$stepper-indicator-width} + 2 * #{$stepper-indicator-border-width} + 2 * #{$stepper-indicator-focus-size}) + 20px);
+            min-height: calc((#{$kendo-stepper-indicator-width} + 2 * #{$kendo-stepper-indicator-border-width} + 2 * #{$kendo-stepper-indicator-focus-size}) + 20px);
         }
 
         // Label
@@ -207,23 +207,23 @@
             justify-content: flex-start;
         }
         .k-step-indicator + .k-step-label {
-            margin-left: $stepper-label-margin-x;
+            margin-left: $kendo-stepper-label-margin-x;
         }
 
 
         // Progressbar
         & ~ .k-progressbar {
-            width: $stepper-progressbar-size;
+            width: $kendo-stepper-progressbar-size;
             height: 100%;
             min-height: 20px;
-            left: calc((#{$stepper-indicator-width} + 2 * #{$stepper-indicator-border-width} + 2 * #{$stepper-indicator-focus-size}) / 2);
+            left: calc((#{$kendo-stepper-indicator-width} + 2 * #{$kendo-stepper-indicator-border-width} + 2 * #{$kendo-stepper-indicator-focus-size}) / 2);
         }
 
         // Inline content
         .k-step-content {
             height: 0;
             overflow: hidden;
-            transition: $stepper-content-transition-property $stepper-content-transition-duration $stepper-content-transition-timing-function;
+            transition: $kendo-stepper-content-transition-property $kendo-stepper-content-transition-duration $kendo-stepper-content-transition-timing-function;
         }
 
         .k-step-current .k-step-content {
@@ -232,8 +232,8 @@
             display: flex;
             flex-direction: column;
             justify-content: space-between;
-            margin-left: $stepper-indicator-width + 2 * $stepper-indicator-border-width;
-            padding: $stepper-inline-content-padding-x $stepper-inline-content-padding-y;
+            margin-left: $kendo-stepper-indicator-width + 2 * $kendo-stepper-indicator-border-width;
+            padding: $kendo-stepper-inline-content-padding-x $kendo-stepper-inline-content-padding-y;
         }
     }
 }
@@ -258,12 +258,12 @@
         .k-step-list-vertical {
             .k-step-indicator + .k-step-label {
                 margin-left: 0;
-                margin-right: $stepper-label-margin-x;
+                margin-right: $kendo-stepper-label-margin-x;
             }
 
             & ~ .k-progressbar {
                 left: auto;
-                right: calc((#{$stepper-indicator-width} + 2 * #{$stepper-indicator-border-width} + 2 * #{$stepper-indicator-focus-size}) / 2);
+                right: calc((#{$kendo-stepper-indicator-width} + 2 * #{$kendo-stepper-indicator-border-width} + 2 * #{$kendo-stepper-indicator-focus-size}) / 2);
             }
         }
     }