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

package/scss/components/scrollview/_theme.scss

@@ -0,0 +1,96 @@
+@use "../../mixins/index.import.scss" as *;
+@use "./variables.scss" as *;
+
+@mixin kendo-scrollview--theme-base() {
+
+   .k-scrollview {
+        @include fill(
+            $kendo-scrollview-text,
+            $kendo-scrollview-bg,
+            $kendo-scrollview-border
+        );
+
+        &.k-scrollview-dark {
+            kendo-scrollview-pager,
+            .k-scrollview-nav-wrap {
+                background-color: $kendo-scrollview-dark-bg;
+            }
+            .k-scrollview-next,
+            .k-scrollview-prev {
+                color: $kendo-scrollview-dark-bg;
+
+            }
+        }
+
+        &.k-scrollview-light {
+            kendo-scrollview-pager,
+            .k-scrollview-nav-wrap {
+                background-color: $kendo-scrollview-light-bg;
+            }
+
+        }
+    }
+
+    .k-scrollview:focus,
+    .k-scrollview-wrap:focus {
+        outline: none;
+
+    }
+    .k-scrollview-elements {
+        color: $kendo-scrollview-navigation-color;
+    }
+
+    .k-scrollview-next,
+    .k-scrollview-prev {
+        color: $kendo-scrollview-navigation-color;
+        background-color: $kendo-scrollview-navigation-bg;
+        text-shadow: $kendo-scrollview-navigation-icon-shadow;
+        opacity: $kendo-scrollview-navigation-default-opacity;
+        outline-width: 0;
+        -webkit-tap-highlight-color: $kendo-scrollview-arrow-tap-highlight-color;
+
+        &:focus,
+        &.k-focus {
+            color: $kendo-scrollview-navigation-color;
+            opacity: $kendo-scrollview-navigation-hover-opacity;
+
+            .k-icon::before {
+                @include focus-indicator( $kendo-scrollview-pagebutton-shadow );
+            }
+        }
+
+        &:hover,
+        &.k-hover {
+            color: $kendo-scrollview-navigation-color;
+            opacity: $kendo-scrollview-navigation-hover-opacity;
+
+        }
+    }
+
+    // refactor when https://github.com/telerik/kendo-angular-scrollview/issues/130 is done
+    .k-scrollview-nav > .k-link {
+        background: $kendo-scrollview-pagebutton-bg;
+        border: $kendo-scrollview-pagebutton-border;
+
+        &.k-primary {
+            background: $kendo-scrollview-pagebutton-primary-bg;
+            border: $kendo-scrollview-pagebutton-primary-border;
+        }
+
+        &:focus,
+        &.k-focus {
+            @include focus-indicator( $kendo-scrollview-pagebutton-shadow );
+        }
+
+        &:hover,
+        &.k-hover {
+            box-shadow: $kendo-scrollview-pagebutton-shadow;
+        }
+    }
+
+}
+
+
+@mixin kendo-scrollview--theme() {
+    @include kendo-scrollview--theme-base();
+}

package/scss/components/scrollview/_variables.scss

@@ -0,0 +1,36 @@
+// ScrollView
+
+$kendo-scrollview-border-width: null !default;
+$kendo-scrollview-font-family: null !default;
+$kendo-scrollview-font-size: null !default;
+$kendo-scrollview-line-height: null !default;
+
+$kendo-scrollview-text: null !default;
+$kendo-scrollview-bg: null !default;
+$kendo-scrollview-border: null !default;
+
+$kendo-scrollview-pagebutton-size: null !default;
+$kendo-scrollview-pagebutton-bg: null !default;
+$kendo-scrollview-pagebutton-border: null !default;
+$kendo-scrollview-pagebutton-primary-bg: null !default;
+$kendo-scrollview-pagebutton-primary-border: null !default;
+$kendo-scrollview-pagebutton-shadow: null !default;
+
+$kendo-scrollview-pager-offset: null !default;
+$kendo-scrollview-pager-item-spacing: null !default;
+$kendo-scrollview-pager-item-border-width: null !default;
+$kendo-scrollview-pager-height: null !default;
+
+$kendo-scrollview-arrow-tap-highlight-color: null !default;
+$kendo-scrollview-navigation-color: null !default;
+$kendo-scrollview-navigation-icon-shadow: null !default;
+$kendo-scrollview-navigation-bg: null !default;
+$kendo-scrollview-navigation-default-opacity: null !default;
+$kendo-scrollview-navigation-hover-opacity: null !default;
+$kendo-scrollview-navigation-hover-span-bg: null !default;
+
+$kendo-scrollview-light-bg: null !default;
+$kendo-scrollview-dark-bg: null !default;
+
+$kendo-scrollview-transition-duration: null !default;
+$kendo-scrollview-transition-timing-function: null !default;

package/scss/components/searchbox/_index.scss

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

package/scss/components/searchbox/_layout.scss

@@ -0,0 +1,11 @@
+@mixin kendo-searchbox--layout-base() {
+
+    // Searchbox
+    .k-searchbox {}
+
+}
+
+
+@mixin kendo-searchbox--layout() {
+    @include kendo-searchbox--layout-base();
+}

package/scss/components/searchbox/_theme.scss

@@ -0,0 +1,11 @@
+@mixin kendo-searchbox--theme-base() {
+
+    // Searchbox
+    .k-searchbox {}
+
+}
+
+
+@mixin kendo-searchbox--theme() {
+    @include kendo-searchbox--theme-base();
+}

package/scss/components/searchbox/_variables.scss

@@ -0,0 +1 @@
+// Searchbox

package/scss/components/signature/_index.scss

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

package/scss/components/signature/_layout.scss

@@ -0,0 +1,79 @@
+@use "sass:map";
+@use "./variables.scss" as *;
+
+@mixin kendo-signature--layout-base() {
+
+    .k-signature {
+        width: $kendo-signature-width;
+        min-height: $kendo-signature-height;
+        position: relative;
+        box-sizing: border-box;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+
+        &.k-signature-maximized {
+            width: $kendo-signature-maximized-width;
+            height: $kendo-signature-maximized-height;
+
+            > .k-signature-line {
+                border-bottom-width: $kendo-signature-maximized-line-width;
+            }
+        }
+    }
+
+    .k-signature-actions {
+        display: flex;
+        width: min-content;
+        margin-inline-start: auto;
+        gap: $kendo-signature-actions-gap;
+        z-index: 2;
+    }
+
+    .k-signature-canvas {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        display: block;
+        z-index: 1;
+        outline: none;
+    }
+
+    .k-signature-line {
+        position: absolute;
+        bottom: $kendo-signature-line-bottom-offset;
+        z-index: 2;
+        pointer-events: none;
+        border-bottom-width: $kendo-signature-line-width;
+        border-bottom-style: $kendo-signature-line-style;
+    }
+
+    // Sizes
+    @each $size, $size-props in $kendo-signature-sizes {
+        $_padding-x: map.get($size-props, padding-x);
+        $_padding-y: map.get($size-props, padding-y);
+        $_line-size: map.get($size-props, line-size);
+        $_line-offset: map.get($size-props, line-offset);
+
+        .k-signature-#{$size} {
+            padding-inline: $_padding-x;
+            padding-block: $_padding-y;
+
+            .k-signature-line {
+                width: $_line-size;
+            }
+        }
+    }
+
+    .k-signature-lg {
+        min-height: $kendo-signature-lg-min-height;
+    }
+
+}
+
+
+@mixin kendo-signature--layout() {
+    @include kendo-signature--layout-base();
+}

package/scss/components/signature/_theme.scss

@@ -0,0 +1,18 @@
+@use "./variables.scss" as *;
+
+@mixin kendo-signature--theme-base() {
+
+    // Solid signature
+    .k-signature {
+
+        .k-signature-line {
+            border-bottom-color: $kendo-signature-line-color;
+        }
+    }
+
+}
+
+
+@mixin kendo-signature--theme() {
+    @include kendo-signature--theme-base();
+}

package/scss/components/signature/_variables.scss

@@ -0,0 +1,33 @@
+$kendo-signature-width: null !default;
+$kendo-signature-height: null !default;
+
+$kendo-signature-lg-min-height: null !default;
+
+$kendo-signature-maximized-width: null !default;
+$kendo-signature-maximized-height: null !default;
+
+$kendo-signature-padding-x: null !default;
+$kendo-signature-sm-padding-x: null !default;
+$kendo-signature-md-padding-x: null !default;
+$kendo-signature-lg-padding-x: null !default;
+
+$kendo-signature-padding-y: null !default;
+$kendo-signature-sm-padding-y: null !default;
+$kendo-signature-md-padding-y: null !default;
+$kendo-signature-lg-padding-y: null !default;
+
+$kendo-signature-line-width: null !default;
+$kendo-signature-line-style: null !default;
+$kendo-signature-line-color: null !default;
+
+$kendo-signature-line-size: null !default;
+$kendo-signature-sm-line-size: null !default;
+$kendo-signature-md-line-size: null !default;
+$kendo-signature-lg-line-size: null !default;
+
+$kendo-signature-line-bottom-offset: null !default;
+
+$kendo-signature-sizes: null !default;
+
+$kendo-signature-actions-gap: null !default;
+$kendo-signature-maximized-line-width: null !default;

package/scss/components/skeleton/_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-skeleton--styles() {
+    @include import-once( "skeleton" ) {
+        @include core-styles();
+        @include kendo-skeleton--layout();
+        @include kendo-skeleton--theme();
+    }
+}

package/scss/components/skeleton/_layout.scss

@@ -0,0 +1,97 @@
+
+@use "./_variables.scss" as *;
+
+@mixin kendo-skeleton--layout-base() {
+
+    .k-skeleton {
+        display: block;
+    }
+
+    .k-skeleton-text {
+        border-radius: $kendo-skeleton-text-border-radius;
+        transform: $kendo-skeleton-text-transform;
+
+        &:empty::before {
+            content: "\200b";
+        }
+    }
+
+    .k-skeleton-rect {
+        border-radius: $kendo-skeleton-rect-border-radius;
+    }
+
+    .k-skeleton-circle {
+        border-radius: $kendo-skeleton-circle-border-radius;
+    }
+
+
+    // Legacy alias
+    .k-placeholder-line {
+        @extend .k-skeleton !optional;
+        @extend .k-skeleton-text !optional;
+    }
+
+
+    // Skeleton wave
+    @keyframes k-skeleton-wave {
+        0% {
+            transform: translateX(-100%);
+        }
+        60% {
+            transform: translateX(100%);
+        }
+        100% {
+            transform: translateX(100%);
+        }
+    }
+
+    .k-skeleton-wave {
+
+        .k-skeleton,
+        &.k-skeleton {
+            position: relative;
+            overflow: hidden;
+
+            &::after {
+                content: "";
+                position: absolute;
+                top: 0;
+                right: 0;
+                bottom: 0;
+                left: 0;
+                transform: translateX(-100%);
+                animation: k-skeleton-wave 1.6s linear .5s infinite;
+            }
+        }
+
+    }
+
+
+    // Skeleton pulse
+    @keyframes k-skeleton-pulse {
+        0% {
+            opacity: 1;
+        }
+        50% {
+            opacity: .4;
+        }
+        100% {
+            opacity: 1;
+        }
+    }
+
+    .k-skeleton-pulse {
+
+        .k-skeleton,
+        &.k-skeleton {
+            animation: k-skeleton-pulse 1.5s ease-in-out .5s infinite;
+        }
+
+    }
+
+}
+
+
+@mixin kendo-skeleton--layout() {
+    @include kendo-skeleton--layout-base();
+}

package/scss/components/skeleton/_theme.scss

@@ -0,0 +1,31 @@
+@use "../../mixins/index.import.scss" as *;
+@use "./_variables.scss" as *;
+
+@mixin kendo-skeleton--theme-base() {
+
+    .k-skeleton {
+        @include fill( $bg: $kendo-skeleton-item-bg );
+    }
+
+
+    // Skeleton wave
+    .k-skeleton-wave {
+
+        .k-skeleton::after,
+        &.k-skeleton::after {
+            background-image: linear-gradient(
+                to right,
+                transparent,
+                $kendo-skeleton-wave-bg,
+                transparent
+            );
+        }
+
+    }
+
+}
+
+
+@mixin kendo-skeleton--theme() {
+    @include kendo-skeleton--theme-base();
+}

package/scss/components/skeleton/_variables.scss

@@ -0,0 +1,12 @@
+// Skeleton
+
+$kendo-skeleton-text-transform: null !default;
+$kendo-skeleton-text-border-radius: null !default;
+
+$kendo-skeleton-rect-border-radius: null !default;
+
+$kendo-skeleton-circle-border-radius: null !default;
+
+$kendo-skeleton-item-bg: null !default;
+
+$kendo-skeleton-wave-bg: null !default;

package/scss/components/slider/_index.scss

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