@progress/kendo-theme-core 10.2.0-dev.1 → 10.2.0-dev.2

package/scss/components/pivotgrid/_theme.scss

@@ -0,0 +1,251 @@
+@use "../../mixins/index.import.scss" as *;
+@use "../../color-system/_swatch-legacy.scss" as *;
+@use "./variables.scss" as *;
+@use "../popup/_variables.scss" as *;
+
+@mixin kendo-pivotgrid--theme-base() {
+
+    // PivotGrid
+    .k-pivotgrid {
+        @include fill (
+            $kendo-pivotgrid-text,
+            $kendo-pivotgrid-bg,
+            $kendo-pivotgrid-border
+        );
+    }
+
+    .k-pivotgrid-column-headers,
+    .k-pivotgrid-row-headers,
+    .k-pivotgrid-empty-cell {
+        @include fill (
+            $kendo-pivotgrid-headers-text,
+            $kendo-pivotgrid-headers-bg,
+            $kendo-pivotgrid-headers-border
+        );
+    }
+
+    .k-pivotgrid-empty-cell {
+        @include fill (
+            $border: $kendo-pivotgrid-alt-border
+        );
+    }
+
+    .k-pivotgrid-row-headers .k-pivotgrid-row .k-pivotgrid-cell:last-child {
+        border-right-color: $kendo-pivotgrid-alt-border;
+    }
+
+    .k-pivotgrid-column-headers .k-pivotgrid-column-total:nth-last-of-type(2) .k-pivotgrid-cell:not(.k-pivotgrid-expanded),
+    .k-pivotgrid-column-headers .k-pivotgrid-row:last-child {
+        border-bottom-color: $kendo-pivotgrid-alt-border;
+    }
+
+
+    .k-pivotgrid-header-total,
+    .k-pivotgrid-total {
+        @include fill (
+            $kendo-pivotgrid-total-text,
+            $kendo-pivotgrid-total-bg,
+            $kendo-pivotgrid-total-border
+        );
+    }
+
+
+    // Hover state
+    .k-pivotgrid-row-headers tbody > .k-pivotgrid-row:hover,
+    .k-pivotgrid-row-headers tbody > .k-pivotgrid-row.k-hover,
+    .k-pivotgrid-column-headers tbody > .k-pivotgrid-row:hover,
+    .k-pivotgrid-column-headers tbody > .k-pivotgrid-row.k-hover,
+    .k-pivotgrid-values tbody > .k-pivotgrid-row:hover,
+    .k-pivotgrid-values tbody > .k-pivotgrid-row.k-hover {
+        @include fill (
+            $kendo-pivotgrid-hover-text,
+            $kendo-pivotgrid-hover-bg,
+            $kendo-pivotgrid-hover-border
+        );
+    }
+
+    // Focus state
+    .k-pivotgrid-cell:focus,
+    .k-pivotgrid-cell.k-focus,
+    .k-pivotgrid-empty-cell:focus,
+    .k-pivotgrid-empty-cell.k-focus,
+    .k-master-row > .k-pivotgrid-cell:focus,
+    .k-grouping-row > .k-pivotgrid-cell:focus,
+    .k-detail-row > .k-pivotgrid-cell:focus,
+    .k-group-footer > .k-pivotgrid-cell:focus {
+        @include focus-indicator( $kendo-pivotgrid-focus-shadow, true );
+    }
+
+    // Selected state
+    .k-pivotgrid-cell.k-selected,
+    .k-pivotgrid-row.k-selected > .k-pivotgrid-cell {
+        @include fill (
+            $kendo-pivotgrid-selected-text,
+            $kendo-pivotgrid-selected-bg,
+            $kendo-pivotgrid-selected-border
+        );
+    }
+
+
+    // Pivotgrid configurator
+    .k-pivotgrid-configurator-button,
+    .k-pivotgrid-configurator-panel {
+        @include fill (
+            $kendo-pivotgrid-configurator-text,
+            $kendo-pivotgrid-configurator-bg,
+            $kendo-pivotgrid-configurator-border
+        );
+    }
+
+    .k-pivotgrid-configurator-header {
+        @include fill(
+            $kendo-pivotgrid-configurator-header-text,
+            $kendo-pivotgrid-configurator-header-bg,
+            $kendo-pivotgrid-configurator-header-border
+        );
+    }
+
+    .k-pivotgrid-configurator-content .k-fields-list-wrapper {
+        @include fill(
+            $border: $kendo-pivotgrid-configurator-border
+        );
+    }
+
+
+    // Calculated field
+    .k-calculated-field {
+        @include fill (
+            $kendo-pivotgrid-calculated-field-text,
+            $kendo-pivotgrid-calculated-field-bg,
+            $kendo-pivotgrid-calculated-field-border
+        );
+    }
+
+    .k-calculated-field-header {
+        @include fill(
+            $kendo-pivotgrid-calculated-field-header-text,
+            $kendo-pivotgrid-calculated-field-header-bg,
+            $kendo-pivotgrid-calculated-field-header-border
+        );
+    }
+
+    .k-filter-menu .k-calculated-item {
+        @include fill( $border: $kendo-popup-border );
+    }
+
+    .k-pivotgrid-configurator-content .k-form-field-wrapper {
+        @include fill( $border: $kendo-component-border );
+    }
+
+
+    // Overlay mode
+    .k-flex-row {
+        .k-pivotgrid-configurator-overlay {
+            @include box-shadow( $kendo-pivotgrid-configurator-end-shadow );
+        }
+
+        &-reverse .k-pivotgrid-configurator-overlay {
+            @include box-shadow( $kendo-pivotgrid-configurator-start-shadow );
+        }
+    }
+
+    .k-flex-col {
+        .k-pivotgrid-configurator-overlay {
+            @include box-shadow( $kendo-pivotgrid-configurator-top-shadow );
+        }
+
+        &-reverse .k-pivotgrid-configurator-overlay {
+            @include box-shadow( $kendo-pivotgrid-configurator-bottom-shadow );
+        }
+    }
+
+    // Legacy pivotgrid
+    // TODO: remove
+    .k-pivot {
+        @include fill (
+            $kendo-pivotgrid-text,
+            $kendo-pivotgrid-bg,
+            $kendo-pivotgrid-border
+        );
+    }
+    .k-pivot-table {
+        border-color: $kendo-pivotgrid-border;
+    }
+
+    // Pivotgrid header
+    .k-pivot-rowheaders {
+        @include fill(
+            $kendo-pivotgrid-headers-text,
+            $kendo-pivotgrid-headers-bg,
+            $kendo-pivotgrid-headers-border
+        );
+    }
+
+
+    // Pivotgrid toolbar
+    .k-pivot-toolbar {
+        @include fill(
+            $kendo-pivotgrid-headers-text,
+            $kendo-pivotgrid-headers-bg,
+            $kendo-pivotgrid-headers-border
+        );
+
+        .k-empty {
+            color: $kendo-subtle-text;
+        }
+    }
+
+    .k-pivot .k-alt {
+        background-color: $kendo-pivotgrid-alt-bg;
+    }
+
+    .k-pivot-toolbar,
+    .k-pivot-table,
+    .k-pivot-rowheaders > .k-grid td:first-child,
+    .k-pivot-table .k-grid-header .k-header.k-first {
+        border-color: $kendo-pivotgrid-chrome-border;
+    }
+
+    .k-header.k-alt {
+        background-color: $kendo-pivotgrid-row-headers-bg;
+    }
+
+    .k-pivot-layout .k-grid-footer {
+        color: $kendo-pivotgrid-alt-text;
+        background-color: $kendo-pivotgrid-alt-bg;
+    }
+
+    // KPI icons
+    .k-i-kpi-trend-increase,
+    .k-i-kpi-trend-decrease,
+    .k-i-kpi-trend-equal {
+        color: inherit;
+    }
+
+    .k-i-kpi-status-hold {
+        color: $kendo-color-warning;
+    }
+
+    .k-i-kpi-status-deny {
+        color: $kendo-color-error;
+    }
+
+    .k-i-kpi-status-open {
+        color: $kendo-color-success;
+    }
+
+
+    // Configurator
+    .k-pivotgrid-configurator-panel.kendo-jquery {
+
+        .k-column-fields {
+            border-color: $kendo-component-border;
+        }
+    }
+
+}
+
+
+@mixin kendo-pivotgrid--theme() {
+    @include kendo-pivotgrid--theme-base();
+}

package/scss/components/pivotgrid/_variables.scss

@@ -0,0 +1,117 @@
+// Pivot grid
+$kendo-pivotgrid-spacer: null !default;
+$kendo-pivotgrid-padding-x: null !default;
+$kendo-pivotgrid-padding-y: null !default;
+$kendo-pivotgrid-font-family: null !default;
+$kendo-pivotgrid-font-size: null !default;
+$kendo-pivotgrid-line-height: null !default;
+$kendo-pivotgrid-border-width: null !default;
+$kendo-pivotgrid-icon-spacing: null !default;
+
+$kendo-pivotgrid-row-header-width: null !default;
+$kendo-pivotgrid-column-header-height: null !default;
+
+$kendo-pivotgrid-cell-padding-x: null !default;
+$kendo-pivotgrid-cell-padding-y: null !default;
+$kendo-pivotgrid-cell-border-width: null !default;
+
+$kendo-pivotgrid-bg: null !default;
+$kendo-pivotgrid-text: null !default;
+$kendo-pivotgrid-border: null !default;
+
+$kendo-pivotgrid-alt-border: null !default;
+
+$kendo-pivotgrid-headers-bg: null !default;
+$kendo-pivotgrid-headers-text: null !default;
+$kendo-pivotgrid-headers-border: null !default;
+
+$kendo-pivotgrid-total-bg: null !default;
+$kendo-pivotgrid-total-text: null !default;
+$kendo-pivotgrid-total-border: null !default;
+
+$kendo-pivotgrid-hover-bg: null !default;
+$kendo-pivotgrid-hover-text: null !default;
+$kendo-pivotgrid-hover-border: null !default;
+
+$kendo-pivotgrid-selected-bg: null !default;
+$kendo-pivotgrid-selected-text: null !default;
+$kendo-pivotgrid-selected-border: null !default;
+
+$kendo-pivotgrid-focus-shadow: null !default;
+
+
+// Pivotgrid Configurator
+$kendo-pivotgrid-configurator-padding-x: null !default;
+$kendo-pivotgrid-configurator-padding-y: null !default;
+$kendo-pivotgrid-configurator-border-width: null !default;
+
+$kendo-pivotgrid-configurator-header-padding-x: null !default;
+$kendo-pivotgrid-configurator-header-padding-y: null !default;
+$kendo-pivotgrid-configurator-header-font-size: null !default;
+$kendo-pivotgrid-configurator-header-font-weight: null !default;
+
+$kendo-pivotgrid-configurator-content-padding-x: null !default;
+$kendo-pivotgrid-configurator-content-padding-y: null !default;
+
+$kendo-pivotgrid-configurator-fields-margin-x: null !default;
+$kendo-pivotgrid-configurator-fields-margin-y: null !default;
+
+$kendo-pivotgrid-configurator-vertical-width: null !default;
+$kendo-pivotgrid-configurator-horizontal-height: null !default;
+
+$kendo-pivotgrid-configurator-bg: null !default;
+$kendo-pivotgrid-configurator-text: null !default;
+$kendo-pivotgrid-configurator-border: null !default;
+
+$kendo-pivotgrid-configurator-header-bg: null !default;
+$kendo-pivotgrid-configurator-header-text: null !default;
+$kendo-pivotgrid-configurator-header-border: null !default;
+
+$kendo-pivotgrid-configurator-shadow: null !default;
+$kendo-pivotgrid-configurator-end-shadow: null !default; // -3px 0px 6px rgba(0, 0, 0, .16)
+$kendo-pivotgrid-configurator-start-shadow: null !default; // 3px 0px 6px rgba(0, 0, 0, .16)
+$kendo-pivotgrid-configurator-top-shadow: null !default; // 0px -3px 6px rgba(0, 0, 0, .16)
+$kendo-pivotgrid-configurator-bottom-shadow: null !default; // 0px 3px 6px rgba(0, 0, 0, .16)
+
+$kendo-pivotgrid-configurator-button-padding-x: null !default;
+$kendo-pivotgrid-configurator-button-padding-y: null !default;
+$kendo-pivotgrid-configurator-button-border-width: null !default;
+$kendo-pivotgrid-configurator-button-size: null !default;
+
+
+// Calculated fields
+$kendo-pivotgrid-calculated-field-padding-x: null !default;
+$kendo-pivotgrid-calculated-field-padding-y: null !default;
+$kendo-pivotgrid-calculated-field-border-width: null !default;
+$kendo-pivotgrid-calculated-field-border-radius: null !default;
+$kendo-pivotgrid-calculated-field-gap: null !default;
+
+$kendo-pivotgrid-calculated-field-bg: null !default;
+$kendo-pivotgrid-calculated-field-text: null !default;
+$kendo-pivotgrid-calculated-field-border: null !default;
+
+$kendo-pivotgrid-calculated-field-header-bg: null !default;
+$kendo-pivotgrid-calculated-field-header-text: null !default;
+$kendo-pivotgrid-calculated-field-header-border: null !default;
+
+
+$kendo-pivotgrid-treeview-padding-x: null !default;
+$kendo-pivotgrid-treeview-padding-y: null !default;
+
+// Legacy variables
+$kendo-pivotgrid-alt-bg: null !default;
+$kendo-pivotgrid-alt-text: null !default;
+$kendo-pivotgrid-chrome-border: null !default;
+
+$kendo-pivotgrid-container-bg: null !default;
+$kendo-pivotgrid-row-headers-bg: null !default;
+
+$kendo-pivotgrid-button-bg: null !default;
+$kendo-pivotgrid-button-text: null !default;
+$kendo-pivotgrid-button-hover-bg: null !default;
+$kendo-pivotgrid-button-hover-text: null !default;
+$kendo-pivotgrid-button-active-bg: null !default;
+$kendo-pivotgrid-button-active-text: null !default;
+
+$kendo-pivotgrid-remove-bg: null !default;
+$kendo-pivotgrid-remove-text: null !default;

package/scss/components/popover/_index.scss

@@ -0,0 +1,20 @@
+// Dependencies
+@use "../core/_index.scss" as *;
+@use "../card/_index.scss" as *;
+@use "../popup/_index.scss" as *;
+
+// Component
+@forward "./_variables.scss";
+@use "./_layout.scss" as *;
+@use "./_theme.scss" as *;
+
+// Expose
+@mixin kendo-popover--styles() {
+    @include import-once( "popover" ) {
+        @include core-styles();
+        @include kendo-card--styles();
+        @include kendo-popup--styles();
+        @include kendo-popover--layout();
+        @include kendo-popover--theme();
+    }
+}

package/scss/components/popover/_layout.scss

@@ -0,0 +1,99 @@
+@use "../../mixins/index.import.scss" as *;
+@use "../../color-system/_constants.scss" as *;
+@use "./variables.scss" as *;
+
+@mixin kendo-popover--layout-base() {
+
+    // Popover
+    .k-popover {
+        @include border-radius( $kendo-popover-border-radius );
+        padding: 0;
+        border-width: $kendo-popover-border-width;
+        border-style: $kendo-popover-border-style;
+        box-sizing: border-box;
+        outline: 0;
+        font-size: $kendo-popover-font-size;
+        font-family: $kendo-popover-font-family;
+        line-height: $kendo-popover-line-height;
+        display: flex;
+        flex-flow: column nowrap;
+        z-index: 12000;
+        -webkit-touch-callout: none;
+        -webkit-tap-highlight-color: $kendo-color-rgba-transparent;
+
+        *,
+        *::before,
+        *::after {
+            box-sizing: border-box;
+        }
+    }
+
+    .k-popover-inner {
+        height: inherit;
+        position: relative;
+        border-radius: inherit;
+        border-color: inherit;
+    }
+
+    // Header
+    .k-popover-header {
+        @include border-top-radius( $kendo-popover-border-radius );
+        padding-block: $kendo-popover-header-padding-y;
+        padding-inline: $kendo-popover-header-padding-x;
+        border-width: 0 0 $kendo-popover-header-border-width;
+        border-style: $kendo-popover-header-border-style;
+        border-color: inherit;
+    }
+
+    // Body
+    .k-popover-body {
+        padding-block: $kendo-popover-body-padding-y;
+        padding-inline: $kendo-popover-body-padding-x;
+    }
+
+    // Actions
+    .k-popover-actions {
+        border-width: $kendo-popover-actions-border-width 0 0;
+    }
+
+
+    // Popover callout
+    .k-popover-callout {
+        margin: 0;
+        width: $kendo-popover-callout-width;
+        height: $kendo-popover-callout-height;
+        border-width: $kendo-popover-callout-border-width;
+        border-style: $kendo-popover-callout-border-style;
+        position: absolute;
+
+        &.k-callout-n {
+            top: 0;
+            left: 50%;
+            transform: translate(-50%, -50%) rotate(45deg);
+        }
+
+        &.k-callout-e {
+            top: 50%;
+            right: 0;
+            transform: translate(50%, -50%) rotate(-45deg);
+        }
+
+        &.k-callout-s {
+            bottom: 0;
+            left: 50%;
+            transform: translate(-50%, 50%) rotate(45deg);
+        }
+
+        &.k-callout-w {
+            top: 50%;
+            left: 0;
+            transform: translate(-50%, -50%) rotate(45deg);
+        }
+    }
+
+}
+
+
+@mixin kendo-popover--layout() {
+    @include kendo-popover--layout-base();
+}

package/scss/components/popover/_theme.scss

@@ -0,0 +1,46 @@
+@use "../../mixins/index.import.scss" as *;
+@use "./variables.scss" as *;
+
+@mixin kendo-popover--theme-base() {
+
+    // Popover
+    .k-popover {
+        @include box-shadow( $kendo-popover-shadow );
+
+        @include fill(
+            $kendo-popover-text,
+            $kendo-popover-bg,
+            $kendo-popover-border
+        );
+    }
+
+    .k-popover-inner {
+        background-color: inherit;
+        border-color: inherit;
+    }
+
+    // Header
+    .k-popover-header {
+        @include fill(
+            $kendo-popover-header-text,
+            $kendo-popover-header-bg,
+            $kendo-popover-header-border
+        );
+    }
+
+    // Callout
+    .k-popover-callout {
+        @include fill(
+            $bg: inherit,
+            $border: inherit
+        );
+
+        @include box-shadow( inherit )
+    }
+
+}
+
+
+@mixin kendo-popover--theme() {
+    @include kendo-popover--theme-base();
+}

package/scss/components/popover/_variables.scss

@@ -0,0 +1,33 @@
+// Popover
+
+$kendo-popover-border-width: null !default;
+$kendo-popover-border-style: null !default;
+$kendo-popover-border-radius: null !default;
+$kendo-popover-font-family: null !default;
+$kendo-popover-font-size: null !default;
+$kendo-popover-line-height: null !default;
+
+$kendo-popover-text: null !default;
+$kendo-popover-bg: null !default;
+$kendo-popover-border: null !default;
+$kendo-popover-shadow: null !default;
+
+$kendo-popover-header-padding-x: null !default;
+$kendo-popover-header-padding-y: null !default;
+$kendo-popover-header-border-width: null !default;
+$kendo-popover-header-border-style: null !default;
+$kendo-popover-header-text: null !default;
+$kendo-popover-header-bg: null !default;
+$kendo-popover-header-border: null !default;
+
+$kendo-popover-body-padding-x: null !default;
+$kendo-popover-body-padding-y: null !default;
+
+$kendo-popover-actions-border-width: null !default;
+
+$kendo-popover-callout-width: null !default;
+$kendo-popover-callout-height: null !default;
+$kendo-popover-callout-border-width: null !default;
+$kendo-popover-callout-border-style: null !default;
+$kendo-popover-callout-bg: null !default;
+$kendo-popover-callout-border: null !default;

package/scss/components/popup/_index.scss

@@ -0,0 +1,16 @@
+// Dependencies
+@use "../core/_index.scss" as *;
+
+// Component
+@forward "./_variables.scss";
+@use "./_layout.scss" as *;
+@use "./_theme.scss" as *;
+
+// Expose
+@mixin kendo-popup--styles() {
+    @include import-once( "popup" ) {
+        @include core-styles();
+        @include kendo-popup--layout();
+        @include kendo-popup--theme();
+    }
+}

package/scss/components/popup/_layout.scss

@@ -0,0 +1,85 @@
+@use "../../mixins/index.import.scss" as *;
+@use "../../border-radii/index.import.scss" as *;
+@use "./_variables.scss" as *;
+
+@mixin kendo-popup--layout-base() {
+
+    // Animation Container
+    .k-animation-container {
+        position: absolute;
+        overflow: hidden;
+        z-index: 100;
+
+        &-fixed {
+            position: fixed;
+        }
+
+        &-relative {
+            position: relative;
+            display: inline-block;
+        }
+    }
+
+    .k-animation-container {
+        @include border-bottom-radius-only( $kendo-border-radius-md );
+    }
+
+    .k-animation-container-shown {
+        overflow: visible;
+    }
+
+    // Popup
+    .k-popup {
+        @include border-radius( $kendo-popup-border-radius );
+        margin: 0;
+        padding: 0;
+        // padding-block: $kendo-popup-padding-y;
+        // padding-inline: $kendo-popup-padding-x;
+        border-width: $kendo-popup-border-width;
+        border-style: solid;
+        box-sizing: border-box;
+        font-size: $kendo-popup-font-size;
+        line-height: $kendo-popup-line-height;
+        display: flex;
+        flex-direction: column;
+        align-items: stretch;
+
+        .k-item {
+            outline: none;
+        }
+    }
+
+    .k-popup > .k-colorpalette {
+        padding-block: $kendo-popup-content-padding-y;
+        padding-inline: $kendo-popup-content-padding-x;
+    }
+
+    // Transparent popup
+    .k-popup.k-popup-transparent {
+        border-width: 0;
+        background-color: transparent;
+        box-shadow: none;
+    }
+
+    // Flush popup
+    .k-popup.k-popup-flush {
+        padding: 0;
+    }
+
+    // Child components
+    .k-popup > .k-widget,
+    .k-popup > .k-coloreditor {
+        border-width: 0;
+    }
+
+    // Legacy shadow
+    .k-shadow {
+        box-shadow: $kendo-popup-shadow;
+    }
+
+}
+
+
+@mixin kendo-popup--layout() {
+    @include kendo-popup--layout-base();
+}

package/scss/components/popup/_theme.scss

@@ -0,0 +1,20 @@
+@use "../../mixins/index.import.scss" as *;
+@use "./_variables.scss" as *;
+
+@mixin kendo-popup--theme-base() {
+
+    .k-popup {
+        @include fill(
+            $kendo-popup-text,
+            $kendo-popup-bg,
+            $kendo-popup-border
+        );
+        @include box-shadow( $kendo-popup-shadow );
+    }
+
+}
+
+
+@mixin kendo-popup--theme() {
+    @include kendo-popup--theme-base();
+}

package/scss/components/popup/_variables.scss

@@ -0,0 +1,15 @@
+$kendo-popup-padding-x: null !default;
+$kendo-popup-padding-y: null !default;
+$kendo-popup-border-width: null !default;
+$kendo-popup-border-radius: null !default;
+
+$kendo-popup-font-size: null !default;
+$kendo-popup-line-height: null !default;
+
+$kendo-popup-content-padding-x: null !default;
+$kendo-popup-content-padding-y: null !default;
+
+$kendo-popup-bg: null !default;
+$kendo-popup-text: null !default;
+$kendo-popup-border: null !default;
+$kendo-popup-shadow: null !default;