@progress/kendo-theme-classic 4.42.1-dev.4 → 5.0.0-alpha.3

package/modules/@progress/kendo-theme-default/scss/_variables.scss

@@ -1,407 +0,0 @@
-@import "core/functions/_index.scss";
-@import "core/_color-system.scss";
-
-
-// Options
-$enable-rounded: true !default;
-$enable-shadows: true !default;
-$enable-gradients: true !default;
-$enable-transitions: true !default;
-$enable-flex-classes: true !default;
-$enable-grid-classes: true !default;
-
-$use-calc-badge-size: true !default;
-$use-picker-select-width: true !default;
-
-
-// Spacing
-$spacer: 1em !default;
-$spacer-x: $spacer !default;
-$spacer-y: $spacer !default;
-
-$spacing: (
-    0: 0,
-    1: 4px,
-    2: 8px,
-    3: 12px,
-    4: 16px,
-    5: 20px,
-    6: 24px,
-    7: 28px,
-    8: 32px,
-    9: 36px,
-    10: 40px,
-    11: 44px,
-    12: 48px,
-    13: 52px,
-    14: 56px,
-    15: 60px,
-    16: 64px,
-    17: 68px,
-    18: 72px,
-    19: 76px,
-    20: 80px,
-    21: 84px,
-    22: 88px,
-    23: 92px,
-    24: 96px,
-    xs: 4px,
-    sm: 8px,
-    md: 12px,
-    lg: 16px,
-    xl: 24px,
-    thin: 2px,
-    hair: 1px
-) !default;
-
-$default-scrollbar-width: 17px !default;
-
-
-// Icons
-$icon-size: 16px !default;
-$icon-size-lg: 32px !default;
-$icon-spacing: map-get( $spacing, 1 ) !default;
-
-/// The URL to the icon font that will be used by the theme
-/// The default value of `null` embeds the package font with a `data:` URL
-/// @group icons
-$icon-font-url: null !default;
-
-
-// Metrics
-$padding-x: 8px !default;
-$padding-y: 4px !default;
-$padding-x-sm: $padding-x / 2 !default;
-$padding-y-sm: $padding-y / 2 !default;
-$padding-x-lg: $padding-x * 1.5 !default;
-$padding-y-lg: $padding-y * 1.5 !default;
-
-/// Border radius for all components.
-$border-radius: 2px !default;
-$border-radius-sm: $border-radius / 2 !default;
-$border-radius-lg: $border-radius * 2 !default;
-
-$panel-padding-x: $padding-x !default;
-$panel-padding-y: $padding-y !default;
-
-$header-padding-x: $padding-x !default;
-$header-padding-y: $padding-y * 2 !default;
-
-$nav-item-margin: 0px !default;
-$nav-item-padding-x: $padding-x-lg !default;
-$nav-item-padding-y: $padding-y-lg !default;
-
-$table-cell-padding-x: 12px !default;
-$table-cell-padding-y: 8px !default;
-$header-cell-padding-x: 12px !default;
-$header-cell-padding-y: 8px !default;
-
-$zindex-popup: 1 !default;
-$zindex-window: 2 !default;
-
-
-// Color settings
-$dark-theme: false !default;
-
-
-// Deprecated
-/// The color that focuses the user attention.
-/// @deprecated Will be removed in v5. Use `$primary` variable instead.
-/// @group color-system
-/// @type Color
-$accent: #ff6358 !default;
-/// The color used along with the accent color denoted by $primary.
-/// @deprecated Will be removed in v5. Use `$primary-contrast` variable instead.
-/// @group color-system
-/// @type Color
-$accent-contrast: contrast-wcag( $accent ) !default;
-
-
-// Theme colors
-/// The color that focuses the user attention.
-/// Used for primary buttons and for elements of primary importance across the theme.
-/// @group color-system
-/// @type Color
-$primary: #ff6358 !default;
-$primary-lighter: tint( $primary, 2 ) !default;
-$primary-darker: shade( $primary, 2 ) !default;
-
-/// The color used along with the accent color denoted by $primary.
-/// Used to provide contrast between the background and foreground colors.
-/// @group color-system
-/// @type Color
-$primary-contrast: contrast-wcag( $primary ) !default;
-
-/// The secondary color of the theme.
-/// @group color-system
-/// @type Color
-$secondary: #666666 !default;
-$secondary-lighter: tint( $secondary, 2 ) !default;
-$secondary-darker: shade( $secondary, 2 ) !default;
-
-/// The color used along with the secondary color denoted by $secondary.
-/// Used to provide contrast between the background and foreground colors.
-/// @group color-system
-/// @type Color
-$secondary-contrast: contrast-wcag( $secondary ) !default;
-
-/// The tertiary color of the theme.
-/// @group color-system
-/// @type Color
-$tertiary: #03a9f4 !default;
-$tertiary-lighter: tint( $tertiary, 2 ) !default;
-$tertiary-darker: shade( $tertiary, 2 ) !default;
-
-/// The color used along with the tertiary color denoted by $tertiary.
-/// Used to provide contrast between the background and foreground colors.
-/// @group color-system
-/// @type Color
-$tertiary-contrast: contrast-wcag( $tertiary ) !default;
-
-/// The color for informational messages and states.
-/// @group color-system
-/// @type Color
-$info: #0058e9 !default;
-$info-lighter: tint( $info, 2 ) !default;
-$info-darker: shade( $info, 2 ) !default;
-
-/// The color for success messages and states.
-/// @group color-system
-/// @type Color
-$success: #37b400 !default;
-$success-lighter: tint( $success, 2 ) !default;
-$success-darker: shade( $success, 2 ) !default;
-
-/// The color for warning messages and states.
-/// @group color-system
-/// @type Color
-$warning: #ffc000 !default;
-$warning-lighter: tint( $warning, 2 ) !default;
-$warning-darker: shade( $warning, 2 ) !default;
-
-/// The color for error messages and states.
-/// @group color-system
-/// @type Color
-$error: #f31700 !default;
-$error-lighter: tint( $error, 2 ) !default;
-$error-darker: shade( $error, 2 ) !default;
-
-/// The dark color of the theme.
-/// @group color-system
-/// @type Color
-$dark: #424242 !default;
-
-/// The light color of the theme.
-/// @group color-system
-/// @type Color
-$light: #ebebeb !default;
-
-/// Inverse color of the theme. Depending on the theme luminance dark or light, it will be light or dark
-/// @group color-system
-$inverse: if( $dark-theme, $light, $dark ) !default;
-
-
-$theme-colors: (
-    "primary": $primary,
-    "secondary": $secondary,
-    "tertiary": $tertiary,
-    "info": $info,
-    "success": $success,
-    "warning": $warning,
-    "error": $error,
-    "dark": $dark,
-    "light": $light,
-    "inverse": $inverse
-) !default;
-
-// Cursor utility classes
-$cursors: ( auto, default, none, context-menu, help, pointer, progress, wait, cell, crosshair, text,
-    vertical-text, alias, copy, move, no-drop, not-allowed, e-resize, n-resize, ne-resize, nw-resize,
-    s-resize, se-resize, sw-resize, w-resize, ew-resize, ns-resize, nesw-resize, nwse-resize, col-resize,
-    row-resize, all-scroll, zoom-in, zoom-out, grab, grabbing ) !default;
-
-
-// Root styles
-$body-bg: $white !default;
-$body-text: #424242 !default;
-
-$heading-text: #292929 !default;
-$subtle-text: #666666 !default;
-$disabled-text: #8f8f8f !default;
-
-$app-bg: try-shade( $body-bg, .25 ) !default;
-$app-text: $body-text !default;
-$app-border: rgba( $black, .08 ) !default;
-
-
-// Components
-
-// Component
-/// Background color of a component.
-/// Note: do not use this variable directly. Instead derive it as `$component-name-bg` e.g. `$grid-bg: $component-bg !defualt;`.
-/// @group component
-$component-bg: $body-bg !default;
-/// Text color of a component.
-/// Note: do not use this variable directly. Instead derive it as `$component-name-text` e.g. `$grid-text: component-text !default;`.
-/// @group component
-$component-text: $body-text !default;
-/// Border color of a component.
-/// Note: do not use this variable directly. Instead derive it as `$component-name-border` e.g. `$grid-border: component-border !default;`.
-/// @group component
-$component-border: rgba( if( $dark-theme, $white, $black ), .08 ) !default;
-
-
-/// The background of the components' chrome area.
-$base-bg: #fafafa !default;
-/// The text color of the components' chrome area.
-$base-text: $body-text !default;
-/// The border color of the components' chrome area.
-$base-border: rgba( black, .08 ) !default;
-/// The gradient background of the components' chrome area.
-$base-gradient: rgba( black, 0 ), rgba( black, .02 ) !default;
-
-/// The background of hovered items.
-$hovered-bg: try-shade( $base-bg, .5 ) !default;
-/// The text color of hovered items.
-$hovered-text: $base-text !default;
-/// The border color of hovered items.
-$hovered-border: $base-border !default;
-/// The gradient background of hovered items.
-$hovered-gradient: $base-gradient !default;
-
-/// The background of selected items.
-$selected-bg: $primary !default;
-/// The text color of selected items.
-$selected-text: contrast-wcag( $selected-bg ) !default;
-/// The border color of selected items.
-$selected-border: $base-border !default;
-/// The gradient background of selected items.
-$selected-gradient: $base-gradient !default;
-
-$selected-hover-bg: try-shade( $selected-bg, .5 ) !default;
-$selected-hover-text: $selected-text !default;
-$selected-hover-border: $base-border !default;
-$selected-hover-gradient: $base-gradient !default;
-
-// TODO: refactor
-$focused-shadow: inset 0 0 0 2px rgba(0, 0, 0, .13) !default;
-$primary-focused-shadow: inset 0 0 0 2px rgba($primary, .3) !default;
-
-$transition: color .2s ease-in-out, background-color .2s ease-in-out, border-color .2s ease-in-out, box-shadow .2s ease-in-out !default;
-
-
-// Disabled mixin variables
-$disabled-filter: grayscale(.1) !default;
-$disabled-opacity: .6 !default;
-
-
-// Generic styles
-
-// TODO: refactor once we extract drag drop as separate module
-$font-size: 14px !default;
-$font-family: inherit !default;
-$line-height: ( 20 / 14 ) !default;
-
-
-// Drop Hint
-$equilateral-index: 1.7320508076 !default;
-$equilateral-height: .8660254038 !default;
-
-$drop-hint-arrow-size: 8px !default;
-$drop-hint-arrow-spacing: ($drop-hint-arrow-size / 2) !default;
-$drop-hint-line-h-width: 20px !default;
-$drop-hint-line-h-height: 1px !default;
-$drop-hint-line-v-width: $drop-hint-line-h-height !default;
-$drop-hint-line-v-height: $drop-hint-line-h-width !default;
-
-$drop-hint-bg: $primary !default;
-
-
-// Panel
-$panel-bg: $component-bg !default;
-$panel-text: $component-text !default;
-$panel-border: $component-border !default;
-
-
-// Grouping
-$grouping-header-bg: $body-text !default;
-$grouping-header-text: $body-bg !default;
-$grouping-header-border: $component-border !default;
-$frozen-grouping-header-text: null !default;
-$frozen-grouping-header-border-width: null !default;
-
-
-// Header
-$header-bg: $base-bg !default;
-$header-text: $base-text !default;
-$header-border: $base-border !default;
-$header-gradient: null !default;
-
-
-// List
-$list-item-padding-x: $padding-x !default;
-$list-item-padding-y: $padding-y !default;
-
-$list-item-bg: null !default;
-$list-item-text: $component-text !default;
-
-$list-item-hovered-bg: $hovered-bg !default;
-$list-item-hovered-text: $hovered-text !default;
-
-$list-item-selected-bg: $selected-bg !default;
-$list-item-selected-text: $selected-text !default;
-
-$list-item-focused-shadow: inset 0 0 0 2px rgba(0, 0, 0, .12) !default;
-
-$list-container-shadow: 0 5px 10px 0 rgba(0, 0, 0, .06) !default;
-$list-container-no-data-text: rgba( $component-text, .5 ) !default;
-
-
-// Loading
-
-
-// Placeholder
-$placeholder-line-width: 100% !default;
-$placeholder-line-height: 10px !default;
-$placeholder-bg: rgba(0, 0, 0, .1) !default;
-
-
-// Table
-
-
-// Validator
-$invalid-bg: null !default;
-$invalid-text: $error !default;
-$invalid-border: rgba( $error, .5 ) !default;
-$invalid-shadow: null !default;
-
-
-// Drag clue
-$drag-clue-padding-x: $padding-x !default;
-$drag-clue-padding-y: $padding-y !default;
-$drag-clue-border-width: 1px !default;
-$drag-clue-border-radius: $border-radius !default;
-$drag-clue-font-size: $font-size !default;
-$drag-clue-font-family: $font-family !default;
-$drag-clue-line-height: $line-height !default;
-
-$drag-clue-bg: $base-bg !default;
-$drag-clue-text: $base-text !default;
-$drag-clue-border: $base-border !default;
-$drag-clue-gradient: null !default;
-$drag-clue-shadow: null !default;
-
-$drag-clue-opacity: null !default;
-
-
-// Layout
-$grid-cols: 12 !default;
-$grid-rows: 10 !default;
-$grid-gap: 10px !default;
-
-
-// Disabled Styling maps
-$disabled-styling: (
-    opacity: $disabled-opacity,
-    filter: $disabled-filter
-) !default;

package/modules/@progress/kendo-theme-default/scss/action-buttons/_index.scss

@@ -1,12 +0,0 @@
-@import "../core/_index.scss";
-
-
-// Dependencies
-@import "../common/_index.scss";
-@import "../button/_index.scss";
-
-
-// Component
-@import "_variables.scss";
-@import "_layout.scss";
-@import "_theme.scss";

package/modules/@progress/kendo-theme-default/scss/action-buttons/_layout.scss

@@ -1,69 +0,0 @@
-@include exports("action-buttons/layout") {
-
-    .k-actions {
-        padding: $actions-padding-y $actions-padding-x;
-        border-width: $actions-border-width 0 0 0;
-        border-style: solid;
-        border-color: inherit;
-        flex-shrink: 0;
-        display: flex;
-        flex-flow: row nowrap;
-        align-items: center;
-        gap: $actions-button-spacing;
-        overflow: hidden;
-        // TODO: remove
-        clear: both;
-    }
-
-
-    // Actions in popup
-    .k-popup .k-actions {
-        margin-top: $actions-margin-top;
-    }
-
-
-    // Aliases
-    .k-action-buttons,
-    .k-columnmenu-actions {
-        @extend .k-actions;
-    }
-
-
-    // Legacy spacing
-    .k-ie {
-        .k-actions .k-button ~ .k-button {
-            margin-left: $actions-button-spacing;
-            flex-shrink: 0;
-
-            .k-rtl &,
-            [dir="rtl"] & {
-                margin-left: 0;
-                margin-right: $actions-button-spacing;
-            }
-        }
-    }
-
-    // Actions align
-    .k-actions-start {
-        justify-content: flex-start;
-    }
-    .k-actions-center {
-        justify-content: center;
-    }
-    .k-actions-end {
-        justify-content: flex-end;
-    }
-    .k-actions-stretched > * {
-        flex: 1 0 0%;
-    }
-
-    // Actions orientation
-    .k-actions-horizontal {
-        width: 100%;
-        flex-flow: row nowrap;
-    }
-    .k-actions-vertical {
-        flex-flow: column nowrap;
-    }
-
-}

package/modules/@progress/kendo-theme-default/scss/action-buttons/_theme.scss

@@ -1,12 +0,0 @@
-@include exports("action-buttons/theme") {
-
-    .k-actions {
-        @include fill(
-            $actions-text,
-            $actions-bg,
-            $actions-border,
-            $actions-gradient
-        );
-    }
-
-}

package/modules/@progress/kendo-theme-default/scss/action-buttons/_variables.scss

@@ -1,11 +0,0 @@
-// Actions
-$actions-margin-top: map-get( $spacing, 4 ) !default;
-$actions-padding-x: map-get( $spacing, 2 ) !default;
-$actions-padding-y: map-get( $spacing, 2 ) !default;
-$actions-border-width: 0px !default;
-$actions-button-spacing: map-get( $spacing, 2 ) !default;
-
-$actions-bg: null !default;
-$actions-text: null !default;
-$actions-border: null !default;
-$actions-gradient: null !default;

package/modules/@progress/kendo-theme-default/scss/action-sheet/_index.scss

@@ -1,15 +0,0 @@
-@import "../core/_index.scss";
-
-
-// Dependencies
-@import "../common/_index.scss";
-@import "../styling/_index.scss";
-@import "../icons/_index.scss";
-@import "../listgroup/_index.scss";
-@import "../popup/_index.scss";
-
-
-// Component
-@import "_variables.scss";
-@import "_layout.scss";
-@import "_theme.scss";

package/modules/@progress/kendo-theme-default/scss/action-sheet/_layout.scss

@@ -1,141 +0,0 @@
-@include exports("action-sheet/layout") {
-
-    .k-actionsheet-container {
-        width: 100vw;
-        height: 100vh;
-        position: fixed;
-        top: 0;
-        left: 0;
-        z-index: 9999;
-        overflow: hidden;
-    }
-
-    // Actionsheet
-    .k-actionsheet {
-        padding: $actionsheet-padding-y $actionsheet-padding-y;
-        width: $actionsheet-width;
-        max-width: $actionsheet-max-width;
-        max-height: $actionsheet-max-height;
-        border-width: 0;
-        border-style: solid;
-        border-color: transparent;
-        box-sizing: border-box;
-        font-size: $actionsheet-font-size;
-        font-family: $actionsheet-font-family;
-        line-height: $actionsheet-line-height;
-        overflow-x: hidden;
-        overflow-y: auto;
-        position: fixed;
-        z-index: 10002;
-    }
-
-
-    // Actionsheet header
-    .k-actionsheet-header {
-        padding: $actionsheet-header-padding-y $actionsheet-header-padding-x;
-        border-width: 0;
-        border-bottom-width: if( $actionsheet-header-border-width, $actionsheet-header-border-width, null );
-        border-style: solid;
-        border-color: transparent;
-        box-sizing: border-box;
-        font-size: $actionsheet-header-font-size;
-        font-family: $actionsheet-header-font-family;
-        line-height: $actionsheet-header-line-height;
-    }
-
-
-    // Actionsheet items
-    .k-actionsheet-items {
-        margin: 0;
-        padding: 0;
-        list-style: none;
-    }
-
-
-    // Actionsheet item
-    .k-actionsheet-item {
-        padding: 0;
-        box-sizing: border-box;
-    }
-    .k-actionsheet-action {
-        margin: 0;
-        padding: $actionsheet-item-padding-y $actionsheet-item-padding-x;
-        min-height: $actionsheet-item-min-height;
-        box-sizing: border-box;
-        color: inherit;
-        text-decoration: none;
-        outline: 0;
-        display: flex;
-        flex-flow: row nowrap;
-        align-items: center;
-        gap: $actionsheet-item-spacing;
-    }
-    .k-actionsheet-item-icon {
-        font-size: $actionsheet-item-icon-size;
-    }
-    .k-actionsheet-item-text {
-        display: flex;
-        flex-flow: column nowrap;
-    }
-    .k-actionsheet-item-title {
-        font-weight: $actionsheet-item-title-font-weight;
-        text-transform: $actionsheet-item-title-text-transform;
-    }
-    .k-actionsheet-item-description {
-        font-size: $actionsheet-item-description-font-size;
-        opacity: $actionsheet-item-description-opacity;
-    }
-
-
-    // Actionsheet separator
-    .k-actionsheet > .k-hr {
-        margin: 0;
-        border-color: inherit;
-    }
-
-
-    // Action sheet position
-    .k-actionsheet-top {
-        @include border-bottom-radius( $actionsheet-border-radius );
-        border-width: if( $actionsheet-border-width, $actionsheet-border-width, null );
-        border-top-width: if( $actionsheet-border-width, 0, null );
-        top: 0;
-        left: 50%;
-        transform: translateX( -50% );
-    }
-    .k-actionsheet-bottom {
-        @include border-top-radius( $actionsheet-border-radius );
-        border-width: if( $actionsheet-border-width, $actionsheet-border-width, null );
-        border-bottom-width: if( $actionsheet-border-width, 0, null );
-        bottom: 0;
-        left: 50%;
-        transform: translateX( -50% );
-    }
-    .k-actionsheet-left {
-        @include border-right-radius( $actionsheet-border-radius );
-        border-width: if( $actionsheet-border-width, $actionsheet-border-width, null );
-        border-left-width: if( $actionsheet-border-width, 0, null );
-        left: 0;
-        top: 50%;
-        transform: translateY( -50% );
-    }
-    .k-actionsheet-right {
-        @include border-left-radius( $actionsheet-border-radius );
-        border-width: if( $actionsheet-border-width, $actionsheet-border-width, null );
-        border-right-width: if( $actionsheet-border-width, 0, null );
-        right: 0;
-        top: 50%;
-        transform: translateY( -50% );
-    }
-
-
-    // Action sheet in popup
-    .k-animation-container > .k-actionsheet {
-        top: auto;
-        right: auto;
-        bottom: auto;
-        left: auto;
-        transform: none;
-    }
-
-}