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

package/scss/icons/_layout.scss

@@ -1,83 +1,4 @@
-@use "./_variables.scss" as *;
-
-@use "@progress/kendo-svg-icons/scss/index.scss" as * with (
-    $ki-icon-size: $kendo-icon-size
-);
-
-@mixin kendo-icon--layout-base() {
-
-    @include kendo-svg-icon-styles();
-
-    // Icon wrap
-    .k-icon-wrap {
-        flex: none;
-        display: inline-flex;
-        flex-flow: row nowrap;
-        gap: 0;
-        align-items: center;
-        align-self: flex-start;
-        vertical-align: middle;
-        position: relative;
-
-        &::before {
-            content: "\200b";
-            width: 0;
-            overflow: hidden;
-            flex: none;
-            display: inline-block;
-            vertical-align: top;
-        }
-    }
-
-    // kendo-icon-wrapper component
-    .k-icon-wrapper-host {
-        display: contents;
-    }
-
-    .k-icon-with-modifier {
-        position: relative;
-        margin: .25em;
-    }
-
-    .k-icon.k-icon-modifier {
-        width: 1em;
-        height: 1em;
-        position: absolute;
-        font-size: .5em;
-        bottom: 0;
-        right: 0;
-        margin: 0 -.5em -.5em 0;
-    }
-
-    .k-i-none::before {
-        content: "";
-        display: none;
-    }
-
-    .k-icon-action {
-        display: inline-flex;
-        padding: $kendo-icon-padding;
-        line-height: 1;
-        align-items: center;
-        vertical-align: middle;
-        cursor: pointer;
-    }
-
-    .k-sprite {
-        display: inline-block;
-        width: 16px;
-        height: 16px;
-        overflow: hidden;
-        background-repeat: no-repeat;
-        font-size: 0;
-        line-height: 0;
-        text-align: center;
-    }
-
-    .k-image {
-        display: inline-block;
-    }
-}
+@use "@progress/kendo-theme-core/scss/components/icons/_layout.scss" as *;
 
 
 @mixin kendo-icon--layout() {

package/scss/icons/_theme.scss

@@ -1,4 +1,4 @@
-@mixin kendo-icon--theme-base() {}
+@use "@progress/kendo-theme-core/scss/components/icons/_theme.scss" as *;
 
 
 @mixin kendo-icon--theme() {

package/scss/icons/_variables.scss

@@ -30,3 +30,16 @@ $kendo-icon-spacing: k-spacing(1) !default;
 /// The default icon padding.
 /// @group icon
 $kendo-icon-padding: k-spacing(1) !default;
+
+@forward "@progress/kendo-theme-core/scss/components/icons/_variables.scss" with (
+    $kendo-icon-size: $kendo-icon-size,
+    $kendo-icon-size-xs: $kendo-icon-size-xs,
+    $kendo-icon-size-sm: $kendo-icon-size-sm,
+    $kendo-icon-size-md: $kendo-icon-size-md,
+    $kendo-icon-size-lg: $kendo-icon-size-lg,
+    $kendo-icon-size-xl: $kendo-icon-size-xl,
+    $kendo-icon-size-xxl: $kendo-icon-size-xxl,
+    $kendo-icon-size-xxxl: $kendo-icon-size-xxxl,
+    $kendo-icon-spacing: $kendo-icon-spacing,
+    $kendo-icon-padding: $kendo-icon-padding
+);

package/scss/imageeditor/_layout.scss

@@ -1,163 +1,4 @@
-@use "sass:math";
-@use "../core/_index.scss" as *;
-@use "./variables.scss" as *;
-@use "../toolbar/_variables.scss" as *;
-
-@mixin kendo-image-editor--layout-base() {
-
-    // Image Editor
-    .k-imageeditor {
-        margin-block: $kendo-image-editor-margin-y;
-        margin-inline: $kendo-image-editor-margin-x;
-        padding-block: $kendo-image-editor-padding-y;
-        padding-inline: $kendo-image-editor-padding-x;
-        border-width: $kendo-image-editor-border-width;
-        border-style: solid;
-        box-sizing: border-box;
-        outline: 0;
-        font-family: $kendo-image-editor-font-family;
-        font-size: $kendo-image-editor-font-size;
-        line-height: $kendo-image-editor-line-height;
-        -webkit-touch-callout: none;
-        -webkit-tap-highlight-color: $kendo-color-rgba-transparent;
-
-        *,
-        *::before,
-        *::after {
-            box-sizing: border-box;
-        }
-    }
-
-
-    // Image editor toolbar
-    .k-imageeditor-toolbar {
-        border-width: 0;
-        border-bottom-width: $kendo-toolbar-border-width;
-    }
-
-
-    // Content
-    .k-imageeditor-content {
-        border-width: 0;
-        border-style: solid;
-        border-color: inherit;
-        display: flex;
-        flex-flow: row nowrap;
-    }
-
-
-    // Canvas
-    .k-imageeditor-canvas-container {
-        flex: 1 1 100%;
-        display: flex;
-        flex-flow: row nowrap;
-        overflow: auto;
-    }
-    .k-imageeditor-canvas {
-        margin: auto;
-        display: flex;
-        flex-direction: column;
-        position: relative;
-    }
-
-
-    // Action Pane
-    .k-imageeditor-action-pane {
-        padding-block: $kendo-image-editor-action-pane-padding-y;
-        padding-inline: $kendo-image-editor-action-pane-padding-x;
-        width: $kendo-image-editor-action-pane-width;
-        border-width: 0;
-        border-left-width: $kendo-image-editor-content-border-width;
-        border-style: solid;
-        border-color: inherit;
-        box-sizing: border-box;
-        flex: none;
-        overflow-y: auto;
-
-        .k-input-inner,
-        .k-input-value-text {
-            text-overflow: clip;
-        }
-    }
-
-
-    // Crop Tool
-    .k-imageeditor-crop-overlay {
-        width: 100%;
-        height: 100%;
-        position: absolute;
-        top: 0;
-        left: 0;
-    }
-
-    .k-imageeditor-crop {
-        width: 100%;
-        height: 100%;
-        border-width: $kendo-image-editor-crop-border-width;
-        border-style: $kendo-image-editor-crop-border-style;
-        box-sizing: border-box;
-        position: absolute;
-
-        .k-resize-handle {
-            margin-block: $kendo-image-editor-resize-handle-margin-y;
-            margin-inline: $kendo-image-editor-resize-handle-margin-x;
-            border-style: solid;
-            border-width: $kendo-image-editor-resize-handle-border-width;
-        }
-
-        .k-resize-sw,
-        .k-resize-se,
-        .k-resize-nw,
-        .k-resize-ne {
-            width: $kendo-image-editor-resize-handle-size;
-            height: $kendo-image-editor-resize-handle-size;
-        }
-
-        .k-resize-n,
-        .k-resize-s {
-            left: calc( 50% - (#{math.div( $kendo-image-editor-resize-handle-size, 2 )}) );
-            width: $kendo-image-editor-resize-handle-size;
-            height: 0;
-        }
-
-        .k-resize-w,
-        .k-resize-e {
-            top: calc( 50% - (#{math.div( $kendo-image-editor-resize-handle-size, 2 )}) );
-            width: 0;
-            height: $kendo-image-editor-resize-handle-size;
-        }
-
-        .k-resize-ne {
-            transform: rotate(-90deg);
-        }
-
-        .k-resize-nw {
-            transform: rotate(-180deg);
-        }
-
-
-        .k-resize-sw {
-            transform: rotate(90deg);
-        }
-
-        .k-resize-n {
-            top: 0;
-        }
-
-        .k-resize-s {
-            bottom: 0;
-        }
-
-        .k-resize-w {
-            left: 0;
-        }
-
-        .k-resize-e {
-            right: 0;
-        }
-    }
-
-}
+@use "@progress/kendo-theme-core/scss/components/imageeditor/_layout.scss" as *;
 
 
 @mixin kendo-image-editor--layout() {

package/scss/imageeditor/_theme.scss

@@ -1,57 +1,4 @@
-@use "../core/_index.scss" as *;
-@use "./variables.scss" as *;
-
-@mixin kendo-image-editor--theme-base() {
-
-    // Image Editor
-    .k-imageeditor {
-        @include fill(
-            $kendo-image-editor-text,
-            $kendo-image-editor-bg,
-            $kendo-image-editor-border
-        );
-    }
-
-    // Content
-    .k-imageeditor-content {
-        @include fill(
-            $kendo-image-editor-content-text,
-            $kendo-image-editor-content-bg,
-            $kendo-image-editor-content-border
-        );
-    }
-
-    // Canvas
-    .k-imageeditor-canvas {
-        @include checkerboard-gradient();
-    }
-
-    // Action Pane
-    .k-imageeditor-action-pane {
-        @include fill(
-            $kendo-image-editor-action-pane-text,
-            $kendo-image-editor-action-pane-bg,
-            $kendo-image-editor-action-pane-border
-        );
-    }
-
-    // Crop Tool
-    .k-imageeditor-crop {
-        @include fill(
-            $kendo-image-editor-crop-text,
-            $kendo-image-editor-crop-bg,
-            $kendo-image-editor-crop-border
-        );
-    }
-
-    // Crop Overlay
-    .k-imageeditor-crop-overlay {
-        @include fill (
-            $bg: $kendo-image-editor-crop-overlay-bg
-        );
-    }
-
-}
+@use "@progress/kendo-theme-core/scss/components/imageeditor/_theme.scss" as *;
 
 
 @mixin kendo-image-editor--theme() {

package/scss/imageeditor/_variables.scss

@@ -42,3 +42,37 @@ $kendo-image-editor-crop-text: null !default;
 $kendo-image-editor-crop-border: white !default;
 
 $kendo-image-editor-crop-overlay-bg: rgba(black, .3) !default;
+
+@forward "@progress/kendo-theme-core/scss/components/imageeditor/_variables.scss" with (
+    $kendo-image-editor-margin-y: $kendo-image-editor-margin-y,
+    $kendo-image-editor-margin-x: $kendo-image-editor-margin-x,
+    $kendo-image-editor-padding-y: $kendo-image-editor-padding-y,
+    $kendo-image-editor-padding-x: $kendo-image-editor-padding-x,
+    $kendo-image-editor-border-width: $kendo-image-editor-border-width,
+    $kendo-image-editor-font-size: $kendo-image-editor-font-size,
+    $kendo-image-editor-line-height: $kendo-image-editor-line-height,
+    $kendo-image-editor-font-family: $kendo-image-editor-font-family,
+    $kendo-image-editor-content-border-width: $kendo-image-editor-content-border-width,
+    $kendo-image-editor-action-pane-padding-y: $kendo-image-editor-action-pane-padding-y,
+    $kendo-image-editor-action-pane-padding-x: $kendo-image-editor-action-pane-padding-x,
+    $kendo-image-editor-action-pane-width: $kendo-image-editor-action-pane-width,
+    $kendo-image-editor-crop-border-width: $kendo-image-editor-crop-border-width,
+    $kendo-image-editor-crop-border-style: $kendo-image-editor-crop-border-style,
+    $kendo-image-editor-resize-handle-margin-x: $kendo-image-editor-resize-handle-margin-x,
+    $kendo-image-editor-resize-handle-margin-y: $kendo-image-editor-resize-handle-margin-y,
+    $kendo-image-editor-resize-handle-border-width: $kendo-image-editor-resize-handle-border-width,
+    $kendo-image-editor-resize-handle-size: $kendo-image-editor-resize-handle-size,
+    $kendo-image-editor-bg: $kendo-image-editor-bg,
+    $kendo-image-editor-text: $kendo-image-editor-text,
+    $kendo-image-editor-border: $kendo-image-editor-border,
+    $kendo-image-editor-content-bg: $kendo-image-editor-content-bg,
+    $kendo-image-editor-content-text: $kendo-image-editor-content-text,
+    $kendo-image-editor-content-border: $kendo-image-editor-content-border,
+    $kendo-image-editor-action-pane-bg: $kendo-image-editor-action-pane-bg,
+    $kendo-image-editor-action-pane-text: $kendo-image-editor-action-pane-text,
+    $kendo-image-editor-action-pane-border: $kendo-image-editor-action-pane-border,
+    $kendo-image-editor-crop-bg: $kendo-image-editor-crop-bg,
+    $kendo-image-editor-crop-text: $kendo-image-editor-crop-text,
+    $kendo-image-editor-crop-border: $kendo-image-editor-crop-border,
+    $kendo-image-editor-crop-overlay-bg: $kendo-image-editor-crop-overlay-bg
+);