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

package/scss/components/treeview/_variables.scss

@@ -0,0 +1,64 @@
+// TreeView
+
+$kendo-treeview-font-family: null !default;
+$kendo-treeview-font-size: null !default;
+$kendo-treeview-sm-font-size: null !default;
+$kendo-treeview-md-font-size: null !default;
+$kendo-treeview-lg-font-size: null !default;
+$kendo-treeview-line-height: null !default;
+$kendo-treeview-sm-line-height: null !default;
+$kendo-treeview-md-line-height: null !default;
+$kendo-treeview-lg-line-height: null !default;
+$kendo-treeview-indent: null !default;
+
+$kendo-treeview-item-padding-x: null !default;
+$kendo-treeview-sm-item-padding-x: null !default;
+$kendo-treeview-md-item-padding-x: null !default;
+$kendo-treeview-lg-item-padding-x: null !default;
+$kendo-treeview-item-padding-y: null !default;
+$kendo-treeview-sm-item-padding-y: null !default;
+$kendo-treeview-md-item-padding-y: null !default;
+$kendo-treeview-lg-item-padding-y: null !default;
+$kendo-treeview-item-border-width: null !default;
+$kendo-treeview-item-border-radius: null !default;
+
+$kendo-treeview-sm-checkbox-padding-x: null !default;
+$kendo-treeview-md-checkbox-padding-x: null !default;
+$kendo-treeview-lg-checkbox-padding-x: null !default;
+$kendo-treeview-sm-checkbox-padding-y: null !default;
+$kendo-treeview-md-checkbox-padding-y: null !default;
+$kendo-treeview-lg-checkbox-padding-y: null !default;
+
+
+$kendo-treeview-sizes: null !default;
+
+
+$kendo-treeview-bg: null !default;
+$kendo-treeview-text: null !default;
+$kendo-treeview-border: null !default;
+
+$kendo-treeview-item-hover-bg: null !default;
+$kendo-treeview-item-hover-text: null !default;
+$kendo-treeview-item-hover-border: null !default;
+$kendo-treeview-item-hover-gradient: null !default;
+
+$kendo-treeview-item-selected-bg: null !default;
+$kendo-treeview-item-selected-text: null !default;
+$kendo-treeview-item-selected-border: null !default;
+$kendo-treeview-item-selected-gradient: null !default;
+
+$kendo-treeview-item-focus-shadow: null !default;
+
+$kendo-treeview-loadmore-bg: null !default;
+$kendo-treeview-loadmore-text: null !default;
+$kendo-treeview-loadmore-border: null !default;
+
+$kendo-treeview-loadmore-hover-bg: null !default;
+$kendo-treeview-loadmore-hover-text: null !default;
+$kendo-treeview-loadmore-hover-border: null !default;
+
+$kendo-treeview-loadmore-focus-bg: null !default;
+$kendo-treeview-loadmore-focus-text: null !default;
+$kendo-treeview-loadmore-focus-border: null !default;
+$kendo-treeview-loadmore-focus-shadow: null !default;
+

package/scss/components/typography/_index.scss

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

package/scss/components/typography/_layout.scss

@@ -0,0 +1,129 @@
+@use "sass:map";
+@use "../../typography/index.import.scss" as *;
+@use "./_variables.scss" as *;
+@use "../../_variables.scss" as *;
+
+@mixin kendo-typography--layout-base() {
+
+    @if $kendo-enable-typography {
+        body { @extend .k-body !optional; }
+        h1 { @extend .k-h1 !optional; }
+        h2 { @extend .k-h2 !optional; }
+        h3 { @extend .k-h3 !optional; }
+        h4 { @extend .k-h4 !optional; }
+        h5 { @extend .k-h5 !optional; }
+        h6 { @extend .k-h6 !optional; }
+        p { @extend .k-paragraph !optional; }
+        pre { @extend .k-pre !optional; }
+        code { @extend .k-code !optional; }
+    }
+
+    // TODO delete k-typography class for R1 2022
+    .k-body,
+    .k-typography {
+        @include typography(
+            var( --kendo-font-size, inherit ),
+            var( --kendo-font-family, inherit ),
+            var( --kendo-line-height, normal ),
+            var( --kendo-font-weight-normal, normal ),
+            var( --kendo-letter-spacing, normal )
+        );
+        margin: 0;
+
+        p {
+            margin: $kendo-paragraph-margin;
+        }
+    }
+
+    // Headings
+    @each $heading, $heading-props in $kendo-headings {
+        $_font-size: map.get( $heading-props, font-size );
+        $_font-family: map.get( $heading-props, font-family );
+        $_line-height: map.get( $heading-props, line-height );
+        $_font-weight: map.get( $heading-props, font-weight );
+        $_letter-spacing: map.get( $heading-props, letter-spacing );
+        $_margin: map.get( $heading-props, margin );
+
+        .k-#{$heading} {
+            @include typography(
+                var( --kendo-#{$heading}-font-size, #{$_font-size} ),
+                var( --kendo-#{$heading}-font-family, #{$_font-family} ),
+                var( --kendo-#{$heading}-line-height, #{$_line-height} ),
+                var( --kendo-#{$heading}-font-weight, #{$_font-weight} ),
+                var( --kendo-#{$heading}-letter-spacing, #{$_letter-spacing} ),
+            );
+            margin: var( --kendo-#{$heading}-margin, #{$_margin} );
+        }
+    }
+
+    // Paragraph
+    .k-paragraph {
+        @include typography(
+            var( --kendo-paragraph-font-size, #{$kendo-paragraph-font-size}),
+            var( --kendo-paragraph-font-family, #{$kendo-paragraph-font-family}),
+            var( --kendo-paragraph-line-height, #{$kendo-paragraph-line-height}),
+            var( --kendo-paragraph-font-weight, #{$kendo-paragraph-font-weight}),
+            var( --kendo-paragraph-letter-spacing, #{$kendo-paragraph-letter-spacing})
+        );
+        margin: var( --kendo-paragraph-margin, #{$kendo-paragraph-margin});
+    }
+
+    // Code snippet
+    .k-pre,
+    .k-code {
+        @include typography(
+            var( --kendo-code-font-size, #{$kendo-code-font-size}),
+            var( --kendo-code-font-family, #{$kendo-code-font-family}),
+            var( --kendo-code-line-height, #{$kendo-code-line-height}),
+            var( --kendo-code-font-weight, #{$kendo-code-font-weight}),
+            var( --kendo-code-letter-spacing, #{$kendo-code-letter-spacing})
+        );
+        border-style: solid;
+        border-width: $kendo-code-border-width;
+    }
+
+    .k-pre {
+        padding-block: $kendo-pre-padding-y;
+        padding-inline: $kendo-pre-padding-x;
+        overflow: auto;
+    }
+
+    .k-pre > .k-code {
+        padding: 0;
+        border-width: 0;
+        border-color: transparent;
+        background-color: transparent;
+        font-family: inherit;
+        font-size: inherit;
+    }
+
+    .k-code {
+        padding-block: $kendo-code-padding-y;
+        padding-inline: $kendo-code-padding-x;
+    }
+
+    // Display
+    @each $display, $kendo-display-props in $kendo-display {
+        $_font-size: map.get( $kendo-display-props, font-size );
+        $_font-family: map.get( $kendo-display-props, font-family );
+        $_line-height: map.get( $kendo-display-props, line-height );
+        $_font-weight: map.get( $kendo-display-props, font-weight );
+        $_letter-spacing: map.get( $kendo-display-props, letter-spacing );
+        $_margin: map.get( $kendo-display-props, margin );
+
+        .k-display-#{$display} {
+            @include typography(
+                var( --kendo-display#{$display}-font-size, #{$_font-size} ),
+                var( --kendo-display#{$display}-font-family, #{$_font-family} ),
+                var( --kendo-display#{$display}-line-height, #{$_line-height} ),
+                var( --kendo-display#{$display}-font-weight, #{$_font-weight} ),
+                var( --kendo-display#{$display}-letter-spacing, #{$_letter-spacing} ),
+            );
+        }
+    }
+}
+
+
+@mixin kendo-typography--layout() {
+    @include kendo-typography--layout-base();
+}

package/scss/components/typography/_theme.scss

@@ -0,0 +1,29 @@
+@use "../../mixins/index.import.scss" as *;
+@use "../../color-system/_swatch-legacy.scss" as *;
+@use "./_variables.scss" as *;
+
+@mixin kendo-typography--theme-base() {
+
+    .k-body {
+        @include fill(
+            $kendo-body-text,
+            $kendo-body-bg
+        );
+    }
+
+    // Code snippet
+    .k-pre,
+    .k-code {
+        @include fill(
+            $kendo-code-text,
+            $kendo-code-bg,
+            $kendo-code-border
+        );
+    }
+
+}
+
+
+@mixin kendo-typography--theme() {
+    @include kendo-typography--theme-base();
+}

package/scss/components/typography/_variables.scss

@@ -0,0 +1,106 @@
+// Typography
+
+
+// Headings
+
+$kendo-h1-font-size: null !default;
+$kendo-h2-font-size: null !default;
+$kendo-h3-font-size: null !default;
+$kendo-h4-font-size: null !default;
+$kendo-h5-font-size: null !default;
+$kendo-h6-font-size: null !default;
+
+$kendo-h1-font-family: null !default;
+$kendo-h2-font-family: null !default;
+$kendo-h3-font-family: null !default;
+$kendo-h4-font-family: null !default;
+$kendo-h5-font-family: null !default;
+$kendo-h6-font-family: null !default;
+
+$kendo-h1-line-height: null !default;
+$kendo-h2-line-height: null !default;
+$kendo-h3-line-height: null !default;
+$kendo-h4-line-height: null !default;
+$kendo-h5-line-height: null !default;
+$kendo-h6-line-height: null !default;
+
+$kendo-h1-font-weight: null !default;
+$kendo-h2-font-weight: null !default;
+$kendo-h3-font-weight: null !default;
+$kendo-h4-font-weight: null !default;
+$kendo-h5-font-weight: null !default;
+$kendo-h6-font-weight: null !default;
+
+$kendo-h1-letter-spacing: null !default;
+$kendo-h2-letter-spacing: null !default;
+$kendo-h3-letter-spacing: null !default;
+$kendo-h4-letter-spacing: null !default;
+$kendo-h5-letter-spacing: null !default;
+$kendo-h6-letter-spacing: null !default;
+
+$kendo-h1-margin: null !default;
+$kendo-h2-margin: null !default;
+$kendo-h3-margin: null !default;
+$kendo-h4-margin: null !default;
+$kendo-h5-margin: null !default;
+$kendo-h6-margin: null !default;
+
+$kendo-headings: null !default;
+
+
+// Paragraph
+
+$kendo-paragraph-margin: null !default;
+$kendo-paragraph-font-size: null !default;
+$kendo-paragraph-font-family: null !default;
+$kendo-paragraph-line-height: null !default;
+$kendo-paragraph-font-weight: null !default;
+$kendo-paragraph-letter-spacing: null !default;
+
+
+// Code
+
+$kendo-code-font-size: null !default;
+$kendo-code-font-family: null !default;
+$kendo-code-line-height: null !default;
+$kendo-code-font-weight: null !default;
+$kendo-code-letter-spacing: null !default;
+
+$kendo-code-padding-x: null !default;
+$kendo-code-padding-y: null !default;
+$kendo-pre-padding-x: null !default;
+$kendo-pre-padding-y: null !default;
+$kendo-code-border-width: null !default;
+
+$kendo-code-bg: null !default;
+$kendo-code-text: null !default;
+$kendo-code-border: null !default;
+
+// Display
+
+$kendo-display1-font-size: null !default;
+$kendo-display2-font-size: null !default;
+$kendo-display3-font-size: null !default;
+$kendo-display4-font-size: null !default;
+
+$kendo-display1-font-family: null !default;
+$kendo-display2-font-family: null !default;
+$kendo-display3-font-family: null !default;
+$kendo-display4-font-family: null !default;
+
+$kendo-display1-line-height: null !default;
+$kendo-display2-line-height: null !default;
+$kendo-display3-line-height: null !default;
+$kendo-display4-line-height: null !default;
+
+$kendo-display1-font-weight: null !default;
+$kendo-display2-font-weight: null !default;
+$kendo-display3-font-weight: null !default;
+$kendo-display4-font-weight: null !default;
+
+$kendo-display1-letter-spacing: null !default;
+$kendo-display2-letter-spacing: null !default;
+$kendo-display3-letter-spacing: null !default;
+$kendo-display4-letter-spacing: null !default;
+
+$kendo-display: null !default;

package/scss/components/upload/_index.scss

@@ -0,0 +1,28 @@
+// Dependencies
+@use "../core/_index.scss" as *;
+@use "../icons/_index.scss" as *;
+@use "../button/_index.scss" as *;
+@use "../action-buttons/_index.scss" as *;
+@use "../dropzone/_index.scss" as *;
+
+// Component
+@forward "./_variables.scss";
+@use "./_layout.scss" as *;
+@use "./_theme.scss" as *;
+
+
+// Dependencies
+
+
+// Expose
+@mixin kendo-upload--styles() {
+    @include import-once( "upload" ) {
+        @include core-styles();
+        @include kendo-button--styles();
+        @include kendo-action-buttons--styles();
+        @include kendo-icon--styles();
+        @include kendo-dropzone--styles();
+        @include kendo-upload--layout();
+        @include kendo-upload--theme();
+    }
+}

package/scss/components/upload/_layout.scss

@@ -0,0 +1,254 @@
+@use "../../color-system/_constants.scss" as *;
+@use "../../spacing/index.import.scss" as *;
+@use "./variables.scss" as *;
+@use "../icons/_variables.scss" as *;
+
+@mixin kendo-upload--layout-base() {
+
+    .k-upload {
+        border-width: $kendo-upload-border-width;
+        border-style: solid;
+        box-sizing: border-box;
+        outline: 0;
+        font-family: $kendo-upload-font-family;
+        font-size: $kendo-upload-font-size;
+        line-height: $kendo-upload-line-height;
+        position: relative;
+        display: block;
+        -webkit-touch-callout: none;
+        -webkit-tap-highlight-color: $kendo-color-rgba-transparent;
+
+        *,
+        *::before,
+        *::after {
+            box-sizing: border-box;
+        }
+
+        .k-upload-button {
+            min-width: 7em;
+        }
+
+        // Drop zone
+        .k-dropzone,
+        .k-upload-dropzone {
+            padding-block: $kendo-upload-dropzone-padding-y;
+            padding-inline: $kendo-upload-dropzone-padding-x;
+            border-width: 0;
+            text-align: end;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            position: relative;
+            background-color: transparent;
+
+            .k-dropzone-hint {
+                font-style: normal;
+                font-weight: normal;
+                white-space: nowrap;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                position: relative;
+                flex: 1;
+            }
+
+            .k-upload-status {
+                font-weight: normal;
+                display: flex;
+                align-items: center;
+                position: relative;
+
+                > .k-icon {
+                    margin-inline-end: $kendo-upload-icon-spacing;
+                }
+            }
+
+            .k-upload-status + .k-dropzone-hint {
+                display: none;
+            }
+        }
+
+        .k-dropzone-active {
+            .k-upload-status {
+                display: none;
+            }
+
+            .k-upload-status + .k-dropzone-hint {
+                display: block;
+            }
+        }
+
+        // Upload files list
+        .k-upload-files {
+            max-height: $kendo-upload-max-height;
+            overflow-y: auto;
+            margin: 0;
+            padding: 0;
+            border-width: 1px 0 0;
+            border-style: solid;
+            border-color: inherit;
+            list-style: none;
+
+            .k-file-multiple,
+            .k-file-single {
+                width: 100%;
+                display: flex;
+                justify-content: space-between;
+            }
+
+            .k-file-single {
+                align-items: center;
+            }
+
+            .k-file-multiple {
+                align-items: flex-start;
+            }
+
+            .k-file {
+                padding: $kendo-upload-item-padding-y $kendo-upload-item-padding-x calc(#{$kendo-upload-item-padding-y} + #{$kendo-upload-progress-thickness});
+                border-width: 0 0 1px;
+                border-style: solid;
+                outline: none;
+                display: flex;
+                align-items: flex-start;
+                position: relative;
+            }
+
+            .k-file:last-child {
+                border-width: 0;
+            }
+
+            .k-filename {
+                margin-left: k-spacing(4);
+                flex: 1;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+                position: relative;
+            }
+
+            .k-upload-pct {
+                margin-block: 0;
+                margin-inline: $kendo-upload-icon-spacing;
+                font-weight: normal;
+                vertical-align: middle;
+            }
+
+            ~ .k-clear-selected,
+            ~ .k-upload-selected {
+                margin-top: $kendo-upload-files-list-margin;
+                border-width: 0;
+            }
+
+            ~ .k-upload-selected {
+                border-left-width: 1px;
+                border-left-style: solid;
+                margin-left: -1px;
+            }
+
+            .k-file-name,
+            .k-file-size,
+            .k-file-validation-message,
+            .k-file-summary {
+                display: block;
+            }
+
+            .k-file-name {
+                overflow: hidden;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+                position: relative;
+            }
+
+            .k-file-size,
+            .k-file-summary,
+            .k-file-validation-message {
+                font-size: $kendo-upload-validation-font-size;
+                line-height: $kendo-upload-validation-line-height;
+            }
+
+
+            .k-file-icon-wrapper {
+
+                .k-file-state {
+                    position: absolute;
+                }
+            }
+
+            .k-file-state {
+                visibility: hidden;
+            }
+        }
+
+        .k-upload-files .k-file-info {
+            min-height: $kendo-icon-size-xxl;
+            display: block;
+            overflow: hidden;
+            flex: 1 0 0;
+        }
+
+        .k-multiple-files-wrapper,
+        .k-file-single > .k-file-info {
+            margin-inline-start: $kendo-upload-file-info-margin;
+            min-height: $kendo-icon-size-xxl;
+            display: block;
+            overflow: hidden;
+            flex: 1 0 0;
+        }
+
+        .k-multiple-files-wrapper {
+            .k-file-info {
+                margin-bottom: $kendo-upload-multiple-items-spacing;
+                display: block;
+            }
+
+            .k-file-summary {
+                margin-top: calc( calc( #{$kendo-upload-multiple-items-spacing} / 3) * -1 );
+            }
+        }
+
+        .k-progressbar {
+            --kendo-progressbar-height: #{$kendo-upload-progress-thickness};
+            position: absolute;
+            left: $kendo-upload-item-padding-x;
+            right: $kendo-upload-item-padding-x;
+            bottom: calc( #{$kendo-upload-item-padding-y} / 2 );
+            width: auto;
+        }
+
+        // Action buttons
+        .k-actions {
+            border-top-width: 1px;
+        }
+
+    }
+
+    .k-upload-button-wrap {
+        position: relative;
+        direction: ltr;
+
+        input {
+            // font should not depend on outside styles, otherwise upload may break
+            font: 170px monospace !important; // stylelint-disable-line declaration-no-important
+            margin: 0;
+            padding: 0;
+            width: 100%;
+            height: 100%;
+            opacity: 0;
+            cursor: pointer;
+            position: absolute;
+            bottom: 0;
+            right: 0;
+            z-index: 1;
+        }
+        input[disabled],
+        input.k-disabled {
+            visibility: hidden;
+        }
+    }
+
+}
+
+
+@mixin kendo-upload--layout() {
+    @include kendo-upload--layout-base();
+}