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

package/scss/components/editor/_theme.scss

@@ -0,0 +1,109 @@
+@use "../../mixins/index.import.scss" as *;
+@use "../../color-system/_swatch-legacy.scss" as *;
+@use "./variables.scss" as *;
+
+@mixin kendo-editor--theme-base() {
+
+    .k-editor {
+        @include fill(
+            $kendo-component-text,
+            $kendo-component-bg,
+            $kendo-component-border
+        );
+
+        &.k-readonly {
+            .k-editor-content.k-focus {
+                outline-color: $kendo-body-text;
+            }
+        }
+    }
+
+    // Inline Editor
+    .k-editor-inline {
+
+        .k-table {
+            &,
+            & td {
+                border-color: #cccccc;
+            }
+        }
+
+        .k-element-resize-handle-wrapper {
+            background-color: #ffffff;
+            border-color: #000000;
+        }
+
+        .k-column-resize-handle-wrapper {
+            .k-column-resize-handle {
+                .k-column-resize-marker {
+                    background-color: #00b0ff;
+                }
+            }
+        }
+
+        .k-row-resize-handle-wrapper {
+            .k-row-resize-marker {
+                background-color: #00b0ff;
+            }
+        }
+
+        // Hover & Active state
+        &:hover,
+        &.k-hover,
+        &.k-active {
+            border-color: $kendo-component-border;
+        }
+    }
+
+    // Resizable images
+    .k-editor-resize-handle {
+        background-color: $kendo-editor-resize-handle-bg;
+        border-color: $kendo-editor-resize-handle-border;
+    }
+    .ProseMirror-selectednode { // stylelint-disable-line
+        outline-color: $kendo-editor-selectednode-outline-color;
+    }
+
+
+    // Insert table
+    .k-ct-popup {
+        .k-selected {
+            @include fill( $kendo-selected-text, $kendo-selected-bg, $kendo-selected-border, none );
+        }
+    }
+
+    // Content
+    .k-editor-content {
+
+        // Selection
+        .k-text-selected,
+        &::selection {
+            @include fill (
+                $color: $kendo-editor-selected-text,
+                $bg: $kendo-editor-selected-bg
+            );
+        }
+
+        .k-text-highlighted {
+            @include fill (
+                $bg: $kendo-editor-highlighted-bg
+            );
+        }
+
+        // Table styles
+        td,
+        th {
+            border-color: #dddddd;
+        }
+
+        .selectedCell::after { // stylelint-disable-line
+            background-color: rgba(200, 200, 255, .4);
+        }
+    }
+
+}
+
+
+@mixin kendo-editor--theme() {
+    @include kendo-editor--theme-base();
+}

package/scss/components/editor/_variables.scss

@@ -0,0 +1,32 @@
+// Editor
+
+$kendo-editor-border-width: null !default;
+$kendo-editor-font-family: null !default;
+$kendo-editor-font-size: null !default;
+$kendo-editor-line-height: null !default;
+
+$kendo-editor-placeholder-text: null !default;
+$kendo-editor-placeholder-opacity: null !default;
+
+$kendo-editor-selected-text: null !default;
+$kendo-editor-selected-bg: null !default;
+
+$kendo-editor-highlighted-bg: null !default;
+
+$kendo-editor-export-tool-icon-margin-x: null !default;
+
+$kendo-editor-resize-handle-size: null !default;
+$kendo-editor-resize-handle-border-width: null !default;
+$kendo-editor-resize-handle-border: null !default;
+$kendo-editor-resize-handle-bg: null !default;
+
+$kendo-editor-selectednode-outline-width: null !default;
+$kendo-editor-selectednode-outline-color: null !default;
+
+$kendo-editor-inline-padding-x: null !default;
+$kendo-editor-inline-padding-y: null !default;
+
+$kendo-editor-filebrowser-tiles-padding-x: null !default;
+$kendo-editor-filebrowser-tiles-padding-y: null !default;
+
+$kendo-editor-content-padding: null !default;

package/scss/components/expansion-panel/_index.scss

@@ -0,0 +1,22 @@
+// Dependencies
+@use "../core/_index.scss" as *;
+@use "../icons/_index.scss" as *;
+@use "../utils/_index.scss" as *;
+@use "../list/_index.scss" as *;
+
+// Component
+@forward "./_variables.scss";
+@use "./_layout.scss" as *;
+@use "./_theme.scss" as *;
+
+// Expose
+@mixin kendo-expander--styles() {
+    @include import-once( "expander" ) {
+        @include core-styles();
+        @include kendo-icon--styles();
+        @include kendo-list--styles();
+        @include kendo-expander--layout();
+        @include kendo-expander--theme();
+        @include kendo-utils--layout--display();
+    }
+}

package/scss/components/expansion-panel/_layout.scss

@@ -0,0 +1,87 @@
+@use "../../color-system/_constants.scss" as *;
+@use "./variables.scss" as *;
+
+@mixin kendo-expander--layout-base() {
+
+    // Base
+    .k-expander {
+        border-width: $kendo-expander-border-width;
+        border-style: solid;
+        box-sizing: border-box;
+        overflow: hidden;
+        outline: 0;
+        font-family: $kendo-expander-font-family;
+        font-size: $kendo-expander-font-size;
+        line-height: $kendo-expander-line-height;
+        display: flex;
+        flex-direction: column;
+        -webkit-touch-callout: none;
+        -webkit-tap-highlight-color: $kendo-color-rgba-transparent;
+
+        *,
+        *::before,
+        *::after {
+            box-sizing: border-box;
+        }
+    }
+
+    .k-rtl .k-expander,
+    .k-expander.k-rtl,
+    .k-expander[dir="rtl"] {
+        // Expand / collapse icon
+        .k-expander-indicator {
+            margin-left: 0;
+            margin-right: $kendo-expander-indicator-margin-x;
+        }
+    }
+
+    // Header
+    .k-expander-header {
+        padding-block: $kendo-expander-header-padding-y;
+        padding-inline: $kendo-expander-header-padding-x;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        cursor: pointer;
+    }
+
+    // Expander spacer
+    .k-expander-spacer {
+        flex: 1 1 auto;
+    }
+
+    // Title
+    .k-expander-title {
+        text-transform: uppercase;
+        font-weight: 500;
+    }
+
+    // Expand / collapse icon
+    .k-expander-indicator {
+        margin-left: $kendo-expander-indicator-margin-x;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    }
+
+    // Expander content
+    .k-expander-content {
+        padding-block: $kendo-expander-content-padding-y;
+        padding-inline: $kendo-expander-content-padding-x;
+    }
+
+    // Multiple expanders
+    .k-expander + .k-expander.k-expanded,
+    .k-expander.k-expanded + .k-expander {
+        margin-top: $kendo-expander-spacing-y;
+    }
+
+    .k-expander:not(.k-expanded) + .k-expander:not(.k-expanded) {
+        border-top-width: 0;
+    }
+}
+
+
+@mixin kendo-expander--layout() {
+    @include kendo-expander--layout-base();
+}

package/scss/components/expansion-panel/_theme.scss

@@ -0,0 +1,49 @@
+@use "../../mixins/index.import.scss" as *;
+@use "./variables.scss" as *;
+
+@mixin kendo-expander--theme-base() {
+
+    .k-expander {
+        @include fill(
+            $kendo-expander-text,
+            $kendo-expander-bg,
+            $kendo-expander-border
+        );
+
+        &.k-focus {
+            @include focus-indicator( $kendo-expander-focus-shadow, true );
+        }
+    }
+
+    .k-expander-header {
+        @include fill(
+            $kendo-expander-header-text,
+            $kendo-expander-header-bg,
+            $kendo-expander-header-border
+        );
+        outline: none;
+
+        &:hover,
+        &.k-hover {
+            background-color: $kendo-expander-header-hover-bg;
+        }
+
+        &.k-focus {
+            @include focus-indicator( $kendo-expander-header-focus-shadow, true );
+            background-color: $kendo-expander-header-focus-bg;
+        }
+    }
+
+    .k-expander-title {
+        color: $kendo-expander-title-text;
+    }
+
+    .k-expander-sub-title {
+        color: $kendo-expander-header-sub-title-text;
+    }
+}
+
+
+@mixin kendo-expander--theme() {
+    @include kendo-expander--theme-base();
+}

package/scss/components/expansion-panel/_variables.scss

@@ -0,0 +1,33 @@
+// ExpansionPanel
+
+$kendo-expander-spacing-y: null !default;
+$kendo-expander-border-width: null !default;
+$kendo-expander-font-family: null !default;
+$kendo-expander-font-size: null !default;
+$kendo-expander-line-height: null !default;
+
+$kendo-expander-text: null !default;
+$kendo-expander-bg: null !default;
+$kendo-expander-border: null !default;
+
+$kendo-expander-focus-shadow: null !default;
+
+$kendo-expander-header-padding-x: null !default;
+$kendo-expander-header-padding-y: null !default;
+
+$kendo-expander-header-text: null !default;
+$kendo-expander-header-bg: null !default;
+$kendo-expander-header-border: null !default;
+
+$kendo-expander-header-hover-bg: null !default;
+$kendo-expander-header-focus-bg: null !default;
+$kendo-expander-header-focus-shadow: null !default;
+
+$kendo-expander-title-text: null !default;
+
+$kendo-expander-header-sub-title-text: null !default;
+
+$kendo-expander-indicator-margin-x: null !default;
+
+$kendo-expander-content-padding-x: null !default;
+$kendo-expander-content-padding-y: null !default;

package/scss/components/fab/_index.scss

@@ -0,0 +1,26 @@
+// Dependencies
+@use "../core/_index.scss" as *;
+@use "../icons/_index.scss" as *;
+@use "../utils/_index.scss" as *;
+@use "../button/_index.scss" as *;
+@use "../badge/_index.scss" as *;
+
+// Component
+@forward "./_variables.scss";
+@use "./_layout.scss" as *;
+@use "./_theme.scss" as *;
+
+// Expose
+@mixin kendo-fab--styles() {
+    @include import-once( "fab" ) {
+        @include core-styles();
+        @include kendo-icon--styles();
+        @include kendo-button--styles();
+        @include kendo-badge--styles();
+        @include kendo-fab--layout();
+        @include kendo-fab--theme();
+        @include kendo-utils--layout--position();
+        @include kendo-utils--typography--text-align();
+        @include kendo-utils--layout--overflow();
+    }
+}

package/scss/components/fab/_layout.scss

@@ -0,0 +1,150 @@
+@use "../../spacing/index.import.scss" as *;
+@use "sass:map";
+@use "./variables.scss" as *;
+
+@mixin kendo-fab--layout-base() {
+
+    // Floating Action Button (FAB)
+    .k-fab {
+        padding: 0;
+        border-width: 0;
+        border-style: solid;
+        border-color: transparent;
+        box-sizing: border-box;
+        color: inherit;
+        background-color: transparent;
+        font-size: $kendo-fab-font-size;
+        line-height: $kendo-fab-line-height;
+        font-family: $kendo-fab-font-family;
+        text-align: center;
+        white-space: nowrap;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        vertical-align: middle;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        cursor: pointer;
+        outline: none;
+
+        *,
+        *::before,
+        *::after {
+            box-sizing: border-box;
+        }
+
+        &:focus {
+            outline: none;
+        }
+    }
+
+    // FAB Icon
+    .k-fab-icon {
+        padding-inline: $kendo-fab-icon-padding-x;
+        padding-block: $kendo-fab-icon-padding-y;
+        box-sizing: content-box;
+    }
+
+    .k-icon-wrapper-host:not(:only-child) .k-fab-icon,
+    .k-fab-icon:not(:only-child) {
+        margin-inline-end: $kendo-fab-icon-spacing;
+        margin-inline-start: calc( #{$kendo-fab-icon-spacing} * -1 );
+    }
+
+    // Sizes
+    @each $size, $size-props in $kendo-fab-sizes {
+        $_padding-x: map.get( $size-props, padding-x );
+        $_padding-y: map.get( $size-props, padding-y );
+
+        .k-fab-#{$size} {
+            padding: $_padding-y $_padding-x;
+        }
+
+    }
+
+    // Items
+    .k-fab-items {
+        margin: 0;
+        padding-block: $kendo-fab-items-padding-y;
+        padding-inline: $kendo-fab-items-padding-x;
+        display: flex;
+    }
+
+    .k-fab-items-bottom {
+        flex-direction: column;
+    }
+    .k-fab-items-bottom .k-fab-item:last-child {
+        margin-block-end: 0;
+    }
+
+    .k-fab-items-top {
+        flex-direction: column-reverse;
+    }
+    .k-fab-items-top .k-fab-item:first-child {
+        margin-block-end: 0;
+    }
+
+    .k-fab-item {
+        list-style-type: none;
+        margin-block-end: k-spacing(2);
+        outline: none;
+        white-space: nowrap;
+        display: flex;
+        align-items: center;
+        justify-content: flex-end;
+        cursor: pointer;
+
+        &.k-text-right {
+            flex-direction: row;
+
+            .k-fab-item-text {
+                // Needed for fab item positioning in RTL
+                margin-right: k-spacing(2);
+            }
+        }
+        &.k-text-left {
+            flex-direction: row-reverse;
+
+            .k-fab-item-text {
+                // Needed for fab item positioning in RTL
+                margin-left: k-spacing(2);
+            }
+        }
+    }
+
+    .k-fab-item-text {
+        padding-block: $kendo-fab-item-text-padding-y;
+        padding-inline: $kendo-fab-item-text-padding-x;
+        border-width: $kendo-fab-item-text-border-width;
+        border-radius: $kendo-fab-item-text-border-radius;
+        font-size: $kendo-fab-item-text-font-size;
+        line-height: $kendo-fab-item-text-line-height;
+    }
+
+    .k-fab-item-icon {
+        padding-block: $kendo-fab-item-icon-padding-y;
+        padding-inline: $kendo-fab-item-icon-padding-x;
+        border-width: $kendo-fab-item-icon-border-width;
+        border-radius: $kendo-fab-item-icon-border-radius;
+        box-sizing: content-box;
+        outline: none;
+    }
+
+
+
+    .k-rtl .k-fab-popup,
+    [dir="rtl"] .k-fab-popup {
+        .k-fab-item.k-text-left {
+            flex-direction: row;
+        }
+
+        .k-fab-item.k-text-right {
+            flex-direction: row-reverse;
+        }
+    }
+}
+
+
+@mixin kendo-fab--layout() {
+    @include kendo-fab--layout-base();
+}

package/scss/components/fab/_theme.scss

@@ -0,0 +1,135 @@
+@use "../../color-system/_functions.import.scss" as *;
+@use "../../mixins/index.import.scss" as *;
+@use "../../functions/index.import.scss" as *;
+@use "../../_variables.scss" as *;
+@use "./variables.scss" as *;
+
+@mixin kendo-fab--theme-base() {
+
+    // Normal state
+    @each $name, $color in $kendo-fab-theme-colors {
+        .k-fab-solid-#{$name} {
+            @include box-shadow($kendo-fab-shadow);
+            outline: $kendo-fab-border-width $kendo-fab-outline-style $color;
+            outline-offset: -$kendo-fab-border-width;
+            border-color: $color;
+            color: if($kendo-enable-color-system, k-color( on-#{$name} ), k-contrast-legacy( $color ));
+            background-color: $color;
+        }
+    }
+
+    // Hover state
+    @each $name, $color in $kendo-fab-theme-colors {
+        .k-hover.k-fab-solid-#{$name},
+        .k-fab-solid-#{$name}:hover {
+            border-color: if($kendo-enable-color-system, k-color( #{$name}-hover ), k-try-shade( $color, .5 ));
+            background-color: if($kendo-enable-color-system, k-color( #{$name}-hover ), k-try-shade( $color, .5 ));
+        }
+    }
+
+    // Focus state
+    @each $name, $color in $kendo-fab-theme-colors {
+        .k-fab-solid-#{$name}.k-focus,
+        .k-fab-solid-#{$name}:focus {
+            @if $kendo-enable-focus-contrast {
+                @include box-shadow( inset 0 0 0 2px currentColor );
+            } @else {
+                outline: $kendo-fab-outline-style $kendo-fab-outline-width if($kendo-enable-color-system, color-mix(in srgb, k-color( $name ) 30%, transparent), rgba( $color, .3 ));
+            }
+        }
+    }
+
+    // Active state
+    @each $name, $color in $kendo-fab-theme-colors {
+        .k-active.k-fab-solid-#{$name},
+        .k-selected.k-fab-solid-#{$name},
+        .k-fab-solid-#{$name}:active {
+            @include box-shadow($kendo-fab-active-shadow);
+            border-color: if($kendo-enable-color-system, k-color( #{$name}-active ), k-try-shade( $color, 1.5));
+            background-color: if($kendo-enable-color-system, k-color( #{$name}-active ), k-try-shade( $color, 1.5));
+        }
+    }
+
+    // Disabled state
+    @each $name, $color in $kendo-fab-theme-colors {
+        .k-disabled.k-fab-solid-#{$name},
+        .k-fab-solid-#{$name}:disabled {
+            @include box-shadow($kendo-fab-disabled-shadow);
+            background-color: if($kendo-enable-color-system, color-mix(in srgb, k-color( $name ) 60%, transparent), k-try-tint( $color, 5 ));
+            color: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-#{$name} ) 60%, transparent), k-try-tint( k-contrast-legacy( $color ), 5 ));
+            opacity: 1;
+        }
+    }
+
+    // Items
+    .k-fab-item-text {
+        @include fill(
+            $kendo-fab-item-text,
+            $kendo-fab-item-bg,
+            $kendo-fab-item-border
+        );
+        @include box-shadow($kendo-fab-item-shadow);
+
+    }
+    .k-fab-item-icon {
+        @include fill(
+            $kendo-fab-item-icon-text,
+            $kendo-fab-item-icon-bg,
+            $kendo-fab-item-icon-border
+        );
+        @include box-shadow($kendo-fab-item-shadow);
+        outline: $kendo-fab-border-width $kendo-fab-item-outline-style $kendo-fab-item-outline-color;
+        outline-offset: -$kendo-fab-border-width;
+    }
+
+    // Hover state
+    .k-fab-item.k-hover .k-fab-item-icon,
+    .k-fab-item:hover .k-fab-item-icon {
+        border-color: if($kendo-enable-color-system, k-color( border ), k-try-shade( $kendo-fab-item-icon-border, .5 ));
+        background-color: if($kendo-enable-color-system, k-color( base-hover ), k-try-shade( $kendo-fab-item-icon-bg, .5 ));
+    }
+
+    // Focus state
+    .k-fab-item:focus .k-fab-item-text,
+    .k-fab-item:focus .k-fab-item-icon,
+    .k-fab-item.k-focus .k-fab-item-text,
+    .k-fab-item.k-focus .k-fab-item-icon {
+        @if $kendo-enable-focus-contrast {
+            @include box-shadow( inset 0 0 0 2px if($kendo-enable-color-system, k-color( on-app-surface ), if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black )) );
+        } @else {
+            outline: $kendo-fab-item-outline-style $kendo-fab-item-outline-width $kendo-fab-item-outline-color;
+        }
+    }
+
+    // Active state
+    .k-fab-item.k-active .k-fab-item-icon,
+    .k-fab-item:active .k-fab-item-icon {
+        @include box-shadow($kendo-fab-item-active-shadow);
+        border-color: if($kendo-enable-color-system, k-color( border-alt ), k-try-shade( $kendo-fab-item-icon-border, 1 ));
+        background-color: if($kendo-enable-color-system, k-color( base-active ), k-try-shade( $kendo-fab-item-icon-bg, 1 ));
+    }
+
+    // Disabled state
+    .k-fab-item.k-disabled,
+    .k-fab-item:disabled {
+        opacity: 1;
+
+        .k-fab-item-text,
+        .k-fab-item-icon {
+            @include box-shadow($kendo-fab-item-disabled-shadow);
+            background-color: if($kendo-enable-color-system, color-mix(in srgb, k-color( base ) 60%, transparent), k-try-tint( $kendo-fab-item-bg, 5 ));
+            color: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-base ) 60%, transparent), k-try-tint( $kendo-fab-item-text, 5 ));
+        }
+    }
+
+    // Popup
+    .k-fab-popup {
+        @include box-shadow( none );
+    }
+
+}
+
+
+@mixin kendo-fab--theme() {
+    @include kendo-fab--theme-base();
+}