@progress/kendo-theme-classic 4.41.2-dev.2 → 5.0.0-next.2

package/modules/@progress/kendo-theme-default/scss/common/_base.scss

@@ -1,274 +0,0 @@
-@include exports( "common/layout" ) {
-
-    // Layout
-    .k-reset {
-        margin: 0;
-        padding: 0;
-        border-width: 0;
-        outline: 0;
-        text-decoration: none;
-        font: inherit;
-        list-style: none;
-    }
-
-    kendo-sortable {
-        display: block;
-    }
-
-
-    // Links
-    .k-link,
-    .k-link:hover {
-        color: inherit;
-        text-decoration: none;
-        outline: 0;
-        cursor: pointer;
-    }
-
-    // Outline
-    .k-content {
-        outline: 0;
-    }
-
-
-    // Centering
-    .k-centered {
-        position: absolute;
-        top: 50%;
-        left: 50%;
-        transform: translate(-50%, -50%);
-    }
-
-
-    // Disable mouse events
-    .k-no-click {
-        pointer-events: none;
-    }
-
-
-    // Off-screen container used during PDF export
-    .k-pdf-export-shadow {
-        position: absolute;
-        overflow: hidden;
-        left: -15000px;
-        width: 14400px;
-    }
-
-    // PDF export icons fix
-    .kendo-pdf-hide-pseudo-elements::before,
-    .kendo-pdf-hide-pseudo-elements::after {
-        // sass-lint:disable-block no-important
-        display: none !important;
-    }
-}
-
-
-@include exports( "common/theme" ) {
-
-    // Text selection
-    .k-text-selection {
-        ::selection {
-            background-color: $primary;
-            color: $primary-contrast;
-        }
-    }
-
-    // Panels
-    .k-block,
-    .k-panel {
-        @include border-radius( $border-radius );
-        @include fill(
-            $panel-text,
-            $panel-bg,
-            $panel-border
-        );
-        padding: $panel-padding-y $panel-padding-x;
-        border-width: 1px;
-        border-style: solid;
-        box-sizing: border-box;
-
-        > .k-header {
-            @include border-top-radius( $border-radius );
-            @include fill(
-                $header-text,
-                $header-bg,
-                $header-border,
-                $header-gradient
-            );
-            margin: #{-$panel-padding-y} #{-$panel-padding-x} $panel-padding-y;
-            padding: $header-padding-y $header-padding-x;
-        }
-    }
-    .k-content {
-        @include fill(
-            $panel-text,
-            $panel-bg,
-            $panel-border
-        );
-    }
-
-}
-
-
-@include exports( "common/disabled" ) {
-
-    // Disabled state
-    .k-state-disabled,
-    .k-widget[disabled],
-    .k-disabled {
-        @include disabled( $disabled-styling );
-
-
-        .k-link,
-        .k-button {
-            cursor: default;
-            outline: 0;
-        }
-
-
-        // Nested disabled
-        [disabled],
-        .k-state-disabled {
-            opacity: 1;
-            filter: grayscale(0);
-        }
-    }
-
-}
-
-
-@include exports( "common/misc/hr" ) {
-
-    .k-hr {
-        margin: $spacer-y auto;
-        padding: 0;
-        height: 0;
-        border-width: 1px 0 0;
-        border-style: solid;
-        border-color: $panel-border;
-        display: block;
-        float: none;
-        clear: both;
-    }
-
-    // Horizontal rule
-    .k-d-flex-row > .k-hr {
-        margin: 0;
-        width: 0;
-        height: auto;
-        border-width: 0 0 0 1px;
-        flex: 0 0 auto;
-    }
-
-    // Vertical rule
-    .k-d-flex-col > .k-hr {
-        margin: 0;
-        flex: 0 0 auto;
-    }
-
-}
-
-
-@include exports( "common/misc/dirty" ) {
-
-    // Dirty indicator
-    .k-dirty {
-        margin: 0;
-        padding: 0;
-        width: 0;
-        height: 0;
-        border-width: 3px;
-        border-style: solid;
-        border-color: $error $error transparent transparent;
-        position: absolute;
-        top: 0;
-        right: 0;
-    }
-
-    [dir = "rtl"],
-    .k-rtl {
-        .k-dirty {
-            border-color: transparent transparent $error $error;
-            right: auto;
-            left: 0;
-        }
-    }
-
-}
-
-@include exports( "common/placeholder" ) {
-
-    .k-placeholder-line {
-        width: $placeholder-line-width;
-        height: $placeholder-line-height;
-        background-color: $placeholder-bg;
-        display: inline-block;
-    }
-}
-
-@include exports( "common/drop-hint" ) {
-
-    .k-drop-hint {
-        display: flex;
-        gap: $drop-hint-arrow-spacing;
-        justify-content: space-between;
-        align-items: center;
-        position: absolute;
-        z-index: 1000;
-        transform: translate(-50%, -50%);
-    }
-
-    .k-drop-hint-start,
-    .k-drop-hint-end {
-        flex-shrink: 0;
-        border-width: ($drop-hint-arrow-size / 2);
-        border-style: solid;
-        border-color: transparent;
-    }
-
-    .k-drop-hint-line {
-        flex-grow: 1;
-        background-color: $drop-hint-bg;
-    }
-
-    .k-drop-hint-h {
-        .k-drop-hint-start {
-            border-left-width: (($drop-hint-arrow-size / 2) * $equilateral-index);
-            border-left-color: $drop-hint-bg;
-            border-right-width: 0;
-        }
-
-        .k-drop-hint-line {
-            width: $drop-hint-line-h-width;
-            height: $drop-hint-line-h-height;
-        }
-
-        .k-drop-hint-end {
-            border-right-width: (($drop-hint-arrow-size / 2) * $equilateral-index);
-            border-right-color: $drop-hint-bg;
-            border-left-width: 0;
-        }
-    }
-
-    .k-drop-hint-v {
-        flex-direction: column;
-
-        .k-drop-hint-start {
-            border-top-width: (($drop-hint-arrow-size / 2) * $equilateral-index);
-            border-top-color: $drop-hint-bg;
-            border-bottom-width: 0;
-        }
-
-        .k-drop-hint-line {
-            width: $drop-hint-line-v-width;
-            height: $drop-hint-line-v-height;
-        }
-
-        .k-drop-hint-end {
-            border-bottom-width: (($drop-hint-arrow-size / 2) * $equilateral-index);
-            border-bottom-color: $drop-hint-bg;
-            border-top-width: 0;
-        }
-    }
-
-}

package/modules/@progress/kendo-theme-default/scss/common/_decoration.scss

@@ -1,84 +0,0 @@
-@include exports( "common/decoration/color" ) {
-
-    // sass-lint:disable-block no-important
-
-    .k-text-primary     { color: $primary !important; }
-    .k-text-info        { color: $info !important; }
-    .k-text-success     { color: $success !important; }
-    .k-text-warning     { color: $warning !important; }
-    .k-text-error       { color: $error !important; }
-
-    .k-text-base        { color: $base-text; }
-
-    .k-color-inherit    { color: inherit; }
-
-    @each $name, $color in $theme-colors {
-        .k-text-#{$name},
-        .k-color-#{$name} {
-            color: $color !important;
-        }
-    }
-
-}
-
-
-@include exports( "common/decoration/background" ) {
-
-    // sass-lint:disable-block no-important
-
-    .k-bg-primary       { background-color: $primary !important; }
-    .k-bg-info          { background-color: $info !important; }
-    .k-bg-success       { background-color: $success !important; }
-    .k-bg-warning       { background-color: $warning !important; }
-    .k-bg-error         { background-color: $error !important; }
-
-}
-
-
-@mixin variant( $base ) {
-    background-color: tint($base, 10);
-    color: shade($base, 6);
-    border-color: tint($base, 9);
-}
-
-@include exports( "common/decoration/variant" ) {
-
-    .k-state-primary    { @include variant( $primary ); }
-    .k-state-info       { @include variant( $info ); }
-    .k-state-success    { @include variant( $success ); }
-    .k-state-warning    { @include variant( $warning ); }
-    .k-state-error      { @include variant( $error ); }
-
-}
-
-
-@include exports( "common/decoration/legacy" ) {
-
-    .k-info-colored {
-        color: #50607f;
-        border-color: #d0d9df;
-        background-color: #f0f9ff;
-    }
-
-    .k-success-colored {
-        color: #507f50;
-        border-color: #d0dfd0;
-        background-color: #f0fff0;
-    }
-
-    .k-error-colored {
-        color: #7f5050;
-        border-color: #dfd0d0;
-        background-color: #fff0f0;
-    }
-
-    .k-shadow {
-        // Shadow moved to popup/_layout.scss due to variable flow
-        // box-shadow: $popup-shadow;
-    }
-
-    .k-inset {
-        box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, .03), inset 0 4px 5px 0 rgba(0, 0, 0, .04);
-    }
-
-}

package/modules/@progress/kendo-theme-default/scss/common/_dragdrop.scss

@@ -1,73 +0,0 @@
-@include exports( "common/dragdrop/dragclue" ) {
-
-    // Layout
-    .k-drag-clue {
-        @include border-radius( $drag-clue-border-radius );
-        padding: $drag-clue-padding-y $drag-clue-padding-x;
-        border-width: $drag-clue-border-width;
-        border-style: if( $drag-clue-border-width == null, null, solid );
-        box-sizing: border-box;
-        font-size: $drag-clue-font-size;
-        font-family: $drag-clue-font-family;
-        line-height: $drag-clue-line-height;
-        display: inline-flex;
-        flex-flow: row nowrap;
-        align-items: center;
-        align-content: center;
-        white-space: nowrap;
-        opacity: $drag-clue-opacity;
-        overflow: hidden;
-        position: absolute;
-        z-index: 20000;
-        cursor: move;
-    }
-    .k-drag-status,
-    .k-drag-clue .k-drag-status {
-        margin: 0;
-        margin-right: .4ex;
-    }
-
-
-    // Theme
-    .k-drag-clue {
-        @include fill(
-            $drag-clue-text,
-            $drag-clue-bg,
-            $drag-clue-border,
-            $drag-clue-gradient
-        );
-        @include box-shadow( $drag-clue-shadow );
-    }
-
-}
-
-
-@include exports( "common/dragdrop/reordercue" ) {
-
-    // Layout
-    .k-reorder-cue {
-        position: absolute;
-
-        &::before,
-        &::after {
-            content: "";
-            width: 0;
-            height: 0;
-            border: 3px solid transparent;
-            position: absolute;
-            transform: translateX(-50%);
-        }
-
-        &::before {
-            border-bottom-width: 0;
-            border-top-color: currentColor;
-            top: -4px;
-        }
-        &::after {
-            border-top-width: 0;
-            border-bottom-color: currentColor;
-            bottom: -4px;
-        }
-    }
-
-}

package/modules/@progress/kendo-theme-default/scss/common/_index.scss

@@ -1,9 +0,0 @@
-@import "../typography/_variables.scss";
-
-@import "_base.scss";
-@import "_animations.scss";
-@import "_dragdrop.scss";
-@import "_loading.scss";
-@import "_resizing.scss";
-@import "_scrollbar.scss";
-@import "_selection.scss";

package/modules/@progress/kendo-theme-default/scss/common/_loading.scss

@@ -1,136 +0,0 @@
-@include exports( "common/loading" ) {
-
-    // Loading indicator
-    .k-loading {
-        width: 64px;
-        height: 64px;
-        display: block;
-
-        .animate {
-            animation: loading 2s infinite linear;
-        }
-    }
-
-
-    // Loading mask
-    .k-loading-mask,
-    .k-loading-image,
-    .k-loading-color {
-        width: 100%;
-        height: 100%;
-        position: absolute;
-        top: 0;
-        left: 0;
-    }
-
-    .k-loading-mask {
-        z-index: 100;
-
-        &.k-opaque {
-            .k-loading-color {
-                opacity: 1;
-            }
-        }
-    }
-    .k-loading-text {
-        text-indent: -4000px;
-        text-align: center;
-        position: absolute;
-    }
-    .k-loading-image {
-        z-index: 2;
-    }
-    .k-loading-color {
-        background-color: $component-bg;
-        opacity: .3;
-    }
-
-    // Loading indicator
-    .k-i-loading {
-        position: relative;
-        background-color: transparent;
-        box-sizing: border-box;
-        color: currentColor;
-    }
-
-    .k-i-loading::before,
-    .k-i-loading::after,
-    .k-loading-image::before,
-    .k-loading-image::after {
-        position: absolute;
-        top: 50%;
-        left: 50%;
-        display: inline-block;
-        content: "";
-        box-sizing: inherit;
-        border-radius: 50%;
-        border-width: .05em;
-        border-style: solid;
-        border-color: currentColor;
-        border-top-color: transparent;
-        border-bottom-color: transparent;
-        background-color: transparent;
-    }
-
-    .k-icon.k-i-loading::before,
-    .k-icon.k-i-loading::after {
-        content: "";
-    }
-
-    .k-i-loading::before,
-    .k-loading-image::before {
-        margin-top: -.5em;
-        margin-left: -.5em;
-        width: 1em;
-        height: 1em;
-        animation: k-loading-animation .7s linear infinite;
-    }
-
-    .k-i-loading::after,
-    .k-loading-image::after {
-        margin-top: -.25em;
-        margin-left: -.25em;
-        width: .5em;
-        height: .5em;
-        animation: k-loading-animation reverse 1.4s linear infinite;
-    }
-
-    .k-loading-image::before,
-    .k-loading-image::after {
-        content: "";
-        // See https://github.com/telerik/kendo-themes/issues/1925
-        border-width: 1px; // TODO: Remove once we drop IE support
-        border-width: #{"max( 1px, .015em )"}; // sass-lint:disable-line no-duplicate-properties
-        font-size: 4em;
-    }
-}
-
-
-@include exports("common/loading/animations") {
-
-    @keyframes loading {
-        0% {
-            stroke-dasharray: 0 251;
-            stroke-dashoffset: 502;
-        }
-
-        50% {
-            stroke-dasharray: 250 1;
-        }
-
-        100% {
-            stroke-dasharray: 0 251;
-            stroke-dashoffset: 0;
-        }
-    }
-
-    @keyframes k-loading-animation  {
-        0% {
-            transform: rotate(0deg);
-        }
-        100% {
-            transform: rotate(360deg);
-        }
-    }
-
-}

package/modules/@progress/kendo-theme-default/scss/common/_resizing.scss

@@ -1,124 +0,0 @@
-@include exports( "common/resizing" ) {
-
-    // Resize handle
-    .k-resize-handle,
-    .k-resize-hint {
-        position: absolute;
-        border-color: inherit;
-        z-index: 200;
-    }
-    .k-resize-handle {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-    }
-    .k-resize-handle::before {
-        content: "";
-        border: 0 solid;
-        border-color: inherit;
-    }
-    .k-resize-n {
-        width: 100%;
-        height: 6px;
-        flex-direction: row;
-        left: 0;
-        top: -3px;
-        cursor: n-resize;
-    }
-    .k-resize-s {
-        width: 100%;
-        height: 6px;
-        flex-direction: row;
-        left: 0;
-        bottom: -3px;
-        cursor: s-resize;
-    }
-    .k-resize-w {
-        width: 6px;
-        height: 100%;
-        flex-direction: column;
-        top: 0;
-        left: -3px;
-        cursor: w-resize;
-    }
-    .k-resize-e {
-        width: 6px;
-        height: 100%;
-        flex-direction: column;
-        top: 0;
-        right: -3px;
-        cursor: e-resize;
-    }
-
-    .k-resize-sw,
-    .k-resize-se,
-    .k-resize-nw,
-    .k-resize-ne {
-        width: 5px;
-        height: 5px;
-    }
-
-    .k-resize-sw {
-        cursor: sw-resize;
-        bottom: 0;
-        left: 0;
-    }
-    .k-resize-se {
-        cursor: se-resize;
-        bottom: 0;
-        right: 0;
-    }
-    .k-resize-nw {
-        cursor: nw-resize;
-        top: 0;
-        left: 0;
-    }
-    .k-resize-ne {
-        cursor: ne-resize;
-        top: 0;
-        right: 0;
-    }
-
-    .k-vertical-resize {
-        cursor: row-resize;
-    }
-    .k-horizontal-resize {
-        cursor: col-resize;
-    }
-
-
-    .k-resize-hint {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-
-        .k-resize-hint-handle {
-            width: auto;
-            height: 20px;
-            align-self: stretch;
-        }
-        .k-resize-hint-marker {
-            width: 2px;
-            height: auto;
-            flex: 1 1 auto;
-        }
-    }
-    .k-resize-hint-vertical {
-        display: flex;
-        flex-direction: row;
-        align-items: center;
-
-        .k-resize-hint-handle {
-            width: 20px;
-            height: auto;
-            align-self: stretch;
-        }
-
-        .k-resize-hint-marker {
-            width: auto;
-            height: 2px;
-            flex: 1 1 auto;
-        }
-    }
-
-}