@progress/kendo-theme-default 5.12.0 → 5.12.1-dev.1

package/scss/window/_variables.scss

@@ -1,44 +1,52 @@
 // Window
-$window-border-width: 0px !default;
-$window-border-radius: 0px !default;
-$window-font-family: $font-family !default;
-$window-font-size: $font-size !default;
-$window-line-height: 1.25 !default;
+$kendo-window-border-width: 0px !default;
+$kendo-window-border-radius: 0px !default;
+$kendo-window-font-family: $font-family !default;
+$kendo-window-font-size: $font-size !default;
+$kendo-window-line-height: 1.25 !default;
 
-$window-titlebar-padding-x: 16px !default;
-$window-titlebar-padding-y: 12px !default;
-$window-titlebar-border-width: 0 0 1px !default;
-$window-titlebar-border-style: solid !default;
+$kendo-window-titlebar-padding-x: 16px !default;
+$kendo-window-titlebar-padding-y: 12px !default;
+$kendo-window-titlebar-border-width: 0 0 1px !default;
+$kendo-window-titlebar-border-style: solid !default;
 
-$window-title-font-size: $font-size-lg !default;
-$window-title-line-height: 1.25 !default;
+$kendo-window-title-font-size: $font-size-lg !default;
+$kendo-window-title-line-height: 1.25 !default;
 
-$window-actions-gap: null !default;
+$kendo-window-actions-gap: null !default;
 
-$window-action-opacity: null !default;
-$window-action-hover-opacity: null !default;
+$kendo-window-action-opacity: null !default;
+$kendo-window-action-hover-opacity: null !default;
 
-$window-inner-padding-x: 16px !default;
-$window-inner-padding-y: 16px !default;
+$kendo-window-inner-padding-x: 16px !default;
+$kendo-window-inner-padding-y: 16px !default;
 
-$window-buttongroup-padding-x: $actions-padding-x !default;
-$window-buttongroup-padding-y: $actions-padding-y !default;
-$window-buttongroup-border-width: 1px !default;
+$kendo-window-buttongroup-padding-x: $actions-padding-x !default;
+$kendo-window-buttongroup-padding-y: $actions-padding-y !default;
+$kendo-window-buttongroup-border-width: 1px !default;
 
-$window-bg: $component-bg !default;
-$window-text: $component-text !default;
-$window-border: $component-border !default;
+$kendo-window-bg: $kendo-component-bg !default;
+$kendo-window-text: $kendo-component-text !default;
+$kendo-window-border: $kendo-component-border !default;
 
-$window-titlebar-bg: $header-bg !default;
-$window-titlebar-text: $header-text !default;
-$window-titlebar-border: inherit !default;
-$window-titlebar-gradient: null !default;
+$kendo-window-titlebar-bg: $kendo-component-header-bg !default;
+$kendo-window-titlebar-text: $kendo-component-header-text !default;
+$kendo-window-titlebar-border: inherit !default;
+$kendo-window-titlebar-gradient: null !default;
 
-$window-shadow: 0 3px 3px 0 rgba(0, 0, 0, .06) !default;
-$window-focused-shadow: 1px 1px 7px 1px rgba(0, 0, 0, .3) !default;
+$kendo-window-shadow: 0 3px 3px 0 rgba(0, 0, 0, .06) !default;
+$kendo-window-focus-shadow: 1px 1px 7px 1px rgba(0, 0, 0, .3) !default;
 
-$window-sizes: (
+$kendo-window-sizes: (
     sm: 300px,
     md: 800px,
     lg: 1200px
 ) !default;
+
+/// Theme colors map for the window.
+/// @group window
+$kendo-window-theme-colors: (
+    "primary": k-map-get($kendo-theme-colors, "primary"),
+    "light": k-map-get($kendo-theme-colors, "light"),
+    "dark": k-map-get($kendo-theme-colors, "dark")
+) !default;

package/scss/wizard/_index.scss

@@ -10,6 +10,6 @@
 
 
 // Component
-@import "_variables.scss";
-@import "_layout.scss";
-@import "_theme.scss";
+@import "./_variables.scss";
+@import "./_layout.scss";
+@import "./_theme.scss";

package/scss/wizard/_layout.scss

@@ -23,7 +23,7 @@
 
         .k-wizard-step {
             box-sizing: border-box;
-            padding: calc(#{$wizard-content-padding-x / 4} + 2px);
+            padding: calc(#{k-math-div( $wizard-content-padding-x, 4 )} + 2px);
             width: 100%;
             display: flex;
             flex-direction: column;

package/scss/wizard/_theme.scss

@@ -3,13 +3,7 @@
     .k-wizard-step {
         &:focus,
         &.k-focus {
-            outline-color: $wizard-step-border-focused;
-        }
-
-        .k-ie &:focus,
-        .k-ie &.k-focus {
-            @include box-shadow($wizard-focused-shadow);
-            outline: none;
+            outline-color: $wizard-step-focus-border;
         }
     }
 

package/scss/wizard/_variables.scss

@@ -1,8 +1,8 @@
 // Wizard
-$wizard-padding-x: $padding-x * 2.5 !default;
+$wizard-padding-x: $kendo-padding-md-x * 2.5 !default;
 $wizard-padding-y: $wizard-padding-x !default;
-$wizard-content-padding-x: $padding-x * 4 !default;
-$wizard-content-padding-y: $padding-y * 8 !default;
+$wizard-content-padding-x: $kendo-padding-md-x * 4 !default;
+$wizard-content-padding-y: $kendo-padding-md-y * 8 !default;
 $wizard-buttons-margin-x: 10px !default;
 
 $wizard-border-width: 0px !default;
@@ -10,5 +10,4 @@ $wizard-font-size: $font-size !default;
 $wizard-line-height: $line-height !default;
 $wizard-font-family: $font-family !default;
 
-$wizard-step-border-focused: #656565 !default;
-$wizard-focused-shadow: inset 0 0 0 2px rgba(0, 0, 0, .13) !default;
+$wizard-step-focus-border: #656565 !default;

package/scss/common/_loading.scss

@@ -1,140 +0,0 @@
-@include exports( "common/loading" ) {
-
-    // Loading mask
-    .k-loading-mask,
-    .k-loading-image,
-    .k-loading-color {
-        width: 100%;
-        height: 100%;
-        box-sizing: border-box;
-        position: absolute;
-        top: 0;
-        left: 0;
-
-        *,
-        *::before,
-        *::after,
-        &::before,
-        &::after {
-            box-sizing: border-box;
-        }
-    }
-
-    .k-loading-mask {
-        z-index: $zindex-loading;
-
-        &.k-opaque {
-            .k-loading-color {
-                opacity: 1;
-            }
-        }
-    }
-    .k-loading-text {
-        text-indent: -4000px;
-        text-align: center;
-        position: absolute;
-        color: $loading-text;
-    }
-    .k-loading-image {
-        z-index: 2;
-        color: $loading-text;
-    }
-    .k-loading-color {
-        background-color: $loading-bg;
-        opacity: $loading-opacity;
-    }
-
-    // Loading indicator
-    .k-i-loading {
-        position: relative;
-        background-color: transparent;
-        box-sizing: border-box;
-        color: $loading-text;
-
-        &::before,
-        &::after {
-            box-sizing: border-box;
-        }
-    }
-
-    .k-i-loading::before,
-    .k-i-loading::after,
-    .k-loading-image::before,
-    .k-loading-image::after {
-        position: absolute;
-        top: 50%;
-        left: 50%;
-        display: inline-block;
-        content: "";
-        box-sizing: inherit;
-        border-radius: 50%;
-        border-width: .05em;
-        border-style: solid;
-        border-color: currentColor;
-        border-top-color: transparent;
-        border-bottom-color: transparent;
-        background-color: transparent;
-    }
-
-    .k-icon.k-i-loading::before,
-    .k-icon.k-i-loading::after {
-        content: "";
-    }
-
-    .k-i-loading::before,
-    .k-loading-image::before {
-        margin-top: -.5em;
-        margin-left: -.5em;
-        width: 1em;
-        height: 1em;
-        animation: k-loading-animation .7s linear infinite;
-    }
-
-    .k-i-loading::after,
-    .k-loading-image::after {
-        margin-top: -.25em;
-        margin-left: -.25em;
-        width: .5em;
-        height: .5em;
-        animation: k-loading-animation reverse 1.4s linear infinite;
-    }
-
-    .k-loading-image::before,
-    .k-loading-image::after {
-        content: "";
-        // See https://github.com/telerik/kendo-themes/issues/1925
-        border-width: 1px; // TODO: Remove once we drop IE support
-        border-width: clamp( .015em, 1px, 1px ); // sass-lint:disable-line no-duplicate-properties
-        font-size: 4em;
-    }
-}
-
-
-@include exports("common/loading/animations") {
-
-    @keyframes loading {
-        0% {
-            stroke-dasharray: 0 251;
-            stroke-dashoffset: 502;
-        }
-
-        50% {
-            stroke-dasharray: 250 1;
-        }
-
-        100% {
-            stroke-dasharray: 0 251;
-            stroke-dashoffset: 0;
-        }
-    }
-
-    @keyframes k-loading-animation {
-        0% {
-            transform: rotate(0deg);
-        }
-        100% {
-            transform: rotate(360deg);
-        }
-    }
-
-}

package/scss/core/_asp-fallback.scss

@@ -1,8 +0,0 @@
-@include exports( "core/asp-fallback" ) {
-
-    .k-theme-test-class,
-    .k-common-test-class {
-        opacity: 0;
-    }
-
-}

package/scss/core/_color-system.scss

@@ -1,56 +0,0 @@
-// Color constants
-$black: #000000; // stylelint-disable-line scss/dollar-variable-default
-$white: #ffffff; // stylelint-disable-line scss/dollar-variable-default
-
-$rgba-transparent: rgba( 0, 0, 0, 0 ); // stylelint-disable-line scss/dollar-variable-default
-
-$gradient-transparent-to-black: rgba( black, 0), black; // stylelint-disable-line scss/dollar-variable-default
-$gradient-transparent-to-white: rgba( white, 0), white; // stylelint-disable-line scss/dollar-variable-default
-$gradient-black-to-transparent: black, rgba( black, 0); // stylelint-disable-line scss/dollar-variable-default
-$gradient-white-to-transparent: white, rgba( white, 0); // stylelint-disable-line scss/dollar-variable-default
-
-$gradient-rainbow: #ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000; // stylelint-disable-line scss/dollar-variable-default
-
-
-$palettes: (
-
-    gray: (
-        50:  #fafafa, // rgba( black, .02 )
-        100: #f5f5f5, // rgba( black, .04 )
-        200: #ebebeb, // rgba( black, .08 )
-        300: #e0e0e0, // rgba( black, .12 )
-        400: #d6d6d6, // rgba( black, .16 )
-        500: #cccccc, // rgba( black, .20 )
-        600: #8f8f8f, // rgba( black, .44 )
-        700: #666666, // rgba( black, .60 )
-        800: #424242, // rgba( black, .74 )
-        900: #292929  // rgba( black, .84 )
-    )
-
-) !default;
-
-
-// Text colors for light themes
-$primary-text-on-light: #424242 !default;
-$secondary-text-on-light: #666666 !default;
-$tertiary-text-on-light: "" !default;
-$placeholder-text-on-light: #666666 !default;
-$disabled-text-on-light: #8f8f8f !default;
-
-
-// Text colors for dark themes
-$primary-text-on-dark: "" !default;
-$secondary-text-on-dark: "" !default;
-$tertiary-text-on-dark: "" !default;
-$placeholder-text-on-dark: "" !default;
-$disabled-text-on-dark: "" !default;
-
-
-// Color system functions
-@function get-base-palette($name) {
-    @return map-get( $palettes, $name );
-}
-
-@function get-base-hue($palette, $hue) {
-    @return map-get( get-base-palette( $palette ), $hue );
-}

package/scss/core/_extra.scss

@@ -1,26 +0,0 @@
-@include exports( "core/extra" ) {
-
-    // Hidden
-    .k-hidden {
-        display: none !important; // sass-lint:disable-line no-important
-    }
-
-
-    // RTL
-    .k-rtl {
-        direction: rtl;
-    }
-
-
-    /// @name k-sr-only
-    /// @description This class could be assigned to elements which should be visually hidden, but remain accessible for screen readers.
-    /// @group extra
-    .k-sr-only {
-        position: absolute;
-        left: -1px;
-        width: 1px;
-        height: 1px;
-        overflow: hidden;
-    }
-
-}

package/scss/core/_layout.scss

@@ -1,68 +0,0 @@
-@include exports( "core/layout" ) {
-
-    // Basic layout
-    .k-hbox,
-    .k-hstack {
-        display: flex;
-        flex-flow: row nowrap;
-    }
-
-    .k-vbox,
-    .k-vstack {
-        display: flex;
-        flex-flow: column nowrap;
-    }
-
-    .k-flex,
-    .k-spacer {
-        flex: 1 0 0%;
-    }
-
-
-    // Stack layout
-    .k-stack-layout {}
-
-
-    // Flex layout
-    .k-flex-layout {
-        display: flex;
-    }
-
-
-    // Grid layout
-    .k-grid-layout {
-        display: grid;
-    }
-
-
-    // Separator
-    .k-separator {
-        width: auto;
-        height: 0;
-        border-width: 1px 0 0;
-        border-style: solid;
-        border-color: inherit;
-        display: block;
-        flex-grow: 0 !important; // sass-lint:disable-line no-important
-        flex-shrink: 0 !important; // sass-lint:disable-line no-important
-        align-self: stretch;
-    }
-    .k-separator-horizontal,
-    .k-vstack > .k-separator {
-        width: auto;
-        height: 0;
-        border-width: 1px 0 0;
-    }
-    .k-separator-vertical,
-    .k-hstack > .k-separator {
-        width: 0;
-        height: auto;
-        border-width: 0 0 0 1px;
-    }
-
-    hr.k-separator {
-        margin: 0;
-        padding: 0;
-    }
-
-}

package/scss/core/_normalize.scss

@@ -1,15 +0,0 @@
-@include exports( "core/normalize" ) {
-
-    // Hidden attribute
-    [hidden] {
-        display: none !important; // sass-lint:disable-line no-important
-    }
-
-
-    // Hide script tags
-    // see https://github.com/telerik/kendo-themes/issues/2360
-    script {
-        display: none !important; // sass-lint:disable-line no-important
-    }
-
-}