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

package/scss/components/listgroup/_layout.scss

@@ -0,0 +1,196 @@
+@use "../../mixins/index.import.scss" as *;
+@use "./_variables.scss" as *;
+
+
+@mixin kendo-listgroup--layout-base() {
+
+    .k-listgroup {
+        @include border-radius( $kendo-listgroup-border-radius );
+        margin: 0;
+        padding: 0;
+        border-width: $kendo-listgroup-border-width;
+        border-style: solid;
+        font-size: $kendo-listgroup-font-size;
+        line-height: $kendo-listgroup-line-height;
+        list-style: none;
+        display: flex;
+        flex-direction: column;
+        position: relative;
+        overflow: hidden;
+
+        > ul {
+            margin: 0;
+            padding: 0;
+            list-style: none;
+            display: flex;
+            flex-direction: column;
+        }
+
+        // Borders of items
+        .k-listgroup-item + .k-listgroup-item {
+            border-top-width: $kendo-listgroup-item-border-width;
+        }
+    }
+    .k-listgroup-flush {
+        @include border-radius( 0 );
+        border-left-width: 0;
+        border-right-width: 0;
+    }
+
+
+    .k-listgroup-item {
+        padding-block: $kendo-listgroup-item-padding-y;
+        padding-inline: $kendo-listgroup-item-padding-x;
+        border-width: 0;
+        border-style: solid;
+        border-color: inherit;
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: flex-start;
+        flex: 0 0 auto;
+        position: relative;
+
+        > .k-link {
+            margin-block: calc( #{$kendo-listgroup-item-padding-y} * -1 );
+            margin-inline: calc( #{$kendo-listgroup-item-padding-x} * -1 );
+            padding-block: $kendo-listgroup-item-padding-y;
+            padding-inline: $kendo-listgroup-item-padding-x;
+            color: inherit;
+            text-decoration: none;
+            outline: 0;
+            display: flex;
+            flex-direction: row;
+            align-items: center;
+            justify-content: flex-start;
+            flex: 1 1 auto;
+            position: relative;
+
+            > .k-select {
+                padding: $kendo-listgroup-item-padding-y;
+                display: flex;
+                align-items: center;
+                flex: 0 0 auto;
+                position: absolute;
+                top: 50%;
+                inset-inline-end: 0;
+                transform: translateY(-50%);
+            }
+        }
+    }
+    .k-listgroup-item-segmented {
+        align-items: stretch;
+
+        > .k-link {
+            margin-right: 0;
+        }
+
+        > .k-select {
+            margin: calc( #{$kendo-listgroup-item-padding-y} * -1 ) calc( #{$kendo-listgroup-item-padding-x} * -1 ) calc( #{$kendo-listgroup-item-padding-y} * -1 ) 0;
+            padding: $kendo-listgroup-item-padding-y;
+            border-width: 0 0 0 1px;
+            border-style: solid;
+            border-color: inherit;
+            cursor: pointer;
+        }
+    }
+
+
+    // Forms in listgroup
+    .k-listgroup-form-row {
+        margin-block: calc( #{$kendo-listgroup-item-padding-y} * -1 );
+        margin-inline: calc( #{$kendo-listgroup-item-padding-x} * -1 );
+        padding-block: $kendo-listgroup-item-padding-y;
+        padding-inline: $kendo-listgroup-item-padding-x;
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: space-between;
+        flex: 1 1 auto;
+        position: relative;
+
+        .k-listgroup-form-field-label {
+            width: 40%;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+        }
+
+        .k-listgroup-form-field-wrapper {
+            width: 50%;
+            display: flex;
+            flex-direction: row;
+            align-items: center;
+            justify-content: flex-end;
+            text-align: end;
+            position: relative;
+
+            select,
+            input[type="text"],
+            input[type="password"],
+            input[type="date"],
+            input[type="time"],
+            input[type="datetime-local"],
+            input[type="number"],
+            textarea {
+                width: 100%;
+                box-sizing: border-box;
+                flex: 1 1 100%;
+            }
+
+            textarea {
+                min-height: 4em;
+                resize: vertical;
+            }
+        }
+    }
+    .k-listgroup-item.k-listgroup-form-row {
+        margin: 0;
+    }
+
+
+    [dir="rtl"] {
+
+        .k-listgroup-item {
+
+            > .k-link {
+
+                > .k-select {
+                    right: auto;
+                    left: 0;
+                }
+            }
+        }
+        .k-listgroup-item-segmented {
+
+            > .k-link {
+                margin-right: calc( #{$kendo-listgroup-item-padding-x} * -1 );
+                margin-left: 0;
+            }
+
+            > .k-select {
+                margin-right: 0;
+                margin-left: calc( #{$kendo-listgroup-item-padding-x} * -1 );
+                border-right-width: 1px;
+                border-left-width: 0;
+            }
+        }
+    }
+
+
+    // No flexbox fix
+    .k-noflexbox {
+        .k-listgroup,
+        .k-listgroup > ul
+        .k-listgroup-item,
+        .k-listgroup-item > .k-link {
+            display: block;
+        }
+    }
+
+}
+
+
+@mixin kendo-listgroup--layout() {
+    @include kendo-listgroup--layout-base();
+}

package/scss/components/listgroup/_theme.scss

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

package/scss/components/listgroup/_variables.scss

@@ -0,0 +1,14 @@
+// Listgroup
+$kendo-listgroup-border-width: null !default;
+$kendo-listgroup-border-radius: null !default;
+
+$kendo-listgroup-font-size: null !default;
+$kendo-listgroup-line-height: null !default;
+
+$kendo-listgroup-bg: null !default;
+$kendo-listgroup-text: null !default;
+$kendo-listgroup-border: null !default;
+
+$kendo-listgroup-item-padding-x: null !default;
+$kendo-listgroup-item-padding-y: null !default;
+$kendo-listgroup-item-border-width: null !default;

package/scss/components/listview/_index.scss

@@ -0,0 +1,25 @@
+// Dependencies
+@use "../core/_index.scss" as *;
+@use "../icons/_index.scss" as *;
+@use "../utils/_index.scss" as *;
+@use "../pager/_index.scss" as *;
+
+// Component
+@forward "./_variables.scss";
+@use "./_layout.scss" as *;
+@use "./_theme.scss" as *;
+
+// Expose
+@mixin kendo-listview--styles() {
+    @include import-once( "listview" ) {
+        @include core-styles();
+        @include kendo-pager--styles();
+        @include kendo-icon--styles();
+        @include kendo-listview--layout();
+        @include kendo-listview--theme();
+        @include kendo-utils--layout--display();
+        @include kendo-utils--flex-grid--flex-direction();
+        @include kendo-utils--flex-grid--grid-template-columns();
+        @include kendo-utils--flex-grid--flex-wrap();
+    }
+}

package/scss/components/listview/_layout.scss

@@ -0,0 +1,146 @@
+@use "./variables.scss" as *;
+
+@mixin kendo-listview--layout-base() {
+
+    // Listview
+    .k-listview {
+        margin: 0;
+        padding: 0;
+        border-width: 0;
+        border-style: solid;
+        box-sizing: border-box;
+        outline: 0;
+        font-family: $kendo-listview-font-family;
+        font-size: $kendo-listview-font-size;
+        line-height: $kendo-listview-line-height;
+        display: flex;
+        flex-flow: column nowrap;
+        position: relative;
+        -webkit-touch-callout: none;
+        -webkit-tap-highlight-color: transparent;
+    }
+    .k-listview-bordered {
+        border-width: $kendo-listview-border-width;
+    }
+
+
+    // Header
+    .k-listview-header {
+        border-width: 0;
+        border-style: solid;
+        border-color: inherit;
+    }
+    .k-listview-bordered > .k-listview-header {
+        border-bottom-width: $kendo-listview-border-width;
+    }
+
+
+    // Listview content
+    .k-listview-content {
+        margin: 0;
+        padding: 0;
+        outline: 0;
+        flex-grow: 1;
+        position: relative;
+        overflow: auto;
+
+        &::after {
+            height: 0;
+            clear: both;
+            display: block;
+        }
+    }
+    .k-listview-content.k-d-flex,
+    .k-listview-content.k-d-grid {
+        &::after { display: none; }
+    }
+    .k-listview-content-padding-rectangle {
+        padding-block: $kendo-listview-padding-y;
+        padding-inline: $kendo-listview-padding-x;
+    }
+    .k-listview-content-padding-square {
+        padding: $kendo-listview-padding-y;
+    }
+
+
+    // Listview item
+    .k-listview-item {
+        padding: 0;
+        border-width: 0;
+        outline: 0;
+        border-style: solid;
+        box-sizing: border-box;
+        flex-shrink: 0;
+    }
+    .k-listview-item-padding-rectangle {
+        padding-block: $kendo-listview-item-padding-y;
+        padding-inline: $kendo-listview-item-padding-x;
+    }
+    .k-listview-item-padding-rectangle .k-listview-link {
+        margin-block: (-$kendo-listview-item-padding-y);
+        margin-inline: (-$kendo-listview-item-padding-x);
+        padding-block: $kendo-listview-item-padding-y;
+        padding-inline: $kendo-listview-item-padding-x;
+    }
+    .k-listview-item-padding-square {
+        padding: $kendo-listview-item-padding-y;
+    }
+    .k-listview-item-padding-square .k-listview-link {
+        margin: (-$kendo-listview-item-padding-y);
+        padding: $kendo-listview-item-padding-y;
+    }
+
+
+    // Listview footer
+    .k-listview-footer {
+        border-width: 0;
+        border-style: solid;
+        border-color: inherit;
+    }
+    .k-listview-bordered > .k-listview-footer {
+        border-top-width: $kendo-listview-border-width;
+    }
+
+
+    // Listview pager
+    .k-listview-pager {
+        border-width: 0;
+        border-color: inherit;
+    }
+    .k-listview-bordered > .k-listview-pager-top {
+        border-block-end-width: var( --kendo-listview-border-width, #{$kendo-listview-border-width} );
+    }
+    .k-listview-bordered > .k-listview-pager-bottom {
+        border-block-start-width: var( --kendo-listview-border-width, #{$kendo-listview-border-width} );
+    }
+
+
+    // Borders
+    .k-listview-borders-all {
+        .k-listview-item {
+            border-width: 1px;
+        }
+    }
+    .k-listview-borders-horizontal {
+        .k-listview-item {
+            border-top-width: 1px;
+        }
+        .k-listview-item:first-child {
+            border-top-width: 0;
+        }
+    }
+    .k-listview-borders-vertical {
+        .k-listview-item {
+            border-left-width: 1px;
+        }
+        .k-listview-item:first-child {
+            border-left-width: 0;
+        }
+    }
+
+}
+
+
+@mixin kendo-listview--layout() {
+    @include kendo-listview--layout-base();
+}

package/scss/components/listview/_theme.scss

@@ -0,0 +1,48 @@
+@use "../../mixins/index.import.scss" as *;
+@use "./variables.scss" as *;
+
+@mixin kendo-listview--theme-base() {
+
+    // Listview
+    .k-listview {
+        @include fill(
+            $kendo-listview-text,
+            $kendo-listview-bg,
+            $kendo-listview-border
+        );
+    }
+
+
+    // Listview content
+    .k-listview-content {
+
+        > .k-focus {
+            @include fill(
+                $kendo-listview-item-focus-text,
+                $kendo-listview-item-focus-bg,
+                $kendo-listview-item-focus-border
+            );
+            @include focus-indicator( $kendo-listview-item-focus-shadow, true );
+        }
+
+        > .k-selected {
+            @include fill(
+                $kendo-listview-item-selected-text,
+                $kendo-listview-item-selected-bg,
+                $kendo-listview-item-selected-border
+            );
+        }
+
+    }
+
+    // List item
+    .k-listview-item {
+        border-color: $kendo-listview-border;
+    }
+
+}
+
+
+@mixin kendo-listview--theme() {
+    @include kendo-listview--theme-base();
+}

package/scss/components/listview/_variables.scss

@@ -0,0 +1,24 @@
+// ListView
+
+$kendo-listview-padding-x: null !default;
+$kendo-listview-padding-y: null !default;
+$kendo-listview-border-width: null !default;
+$kendo-listview-font-family: null !default;
+$kendo-listview-font-size: null !default;
+$kendo-listview-line-height: null !default;
+
+$kendo-listview-text: null !default;
+$kendo-listview-bg: null !default;
+$kendo-listview-border: null !default;
+
+$kendo-listview-item-padding-x: null !default;
+$kendo-listview-item-padding-y: null !default;
+
+$kendo-listview-item-selected-text: null !default;
+$kendo-listview-item-selected-bg: null !default;
+$kendo-listview-item-selected-border: null !default;
+
+$kendo-listview-item-focus-text: null !default;
+$kendo-listview-item-focus-bg: null !default;
+$kendo-listview-item-focus-border: null !default;
+$kendo-listview-item-focus-shadow: null !default;

package/scss/components/loader/_index.scss

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