@progress/kendo-theme-classic 4.42.1-dev.4 → 5.0.0-alpha.3

package/modules/@progress/kendo-theme-default/scss/loader/_layout.scss

@@ -1,460 +0,0 @@
-@include exports( "loader/layout" ) {
-
-    .k-loader {
-        position: relative;
-        display: inline-block;
-        vertical-align: middle;
-        box-sizing: border-box;
-
-        // Prevents the inline elements from being displaced.
-        // A good example is the 'pulsing' loader inside a button.
-        line-height: 0;
-    }
-
-    .k-loader-canvas {
-        display: flex;
-        position: relative;
-    }
-
-    // Loader segment
-    .k-loader-segment {
-        border-radius: $loader-segment-border-radius;
-        background-color: currentColor;
-        position: absolute;
-    }
-
-    // Loader sizes
-    .k-loader-sm {
-        padding: $loader-padding-sm;
-
-        .k-loader-segment {
-            width: $loader-segment-size-sm;
-            height: $loader-segment-size-sm;
-        }
-    }
-    .k-loader-md {
-        padding: $loader-padding-md;
-
-        .k-loader-segment {
-            width: $loader-segment-size-md;
-            height: $loader-segment-size-md;
-        }
-    }
-    .k-loader-lg {
-        padding: $loader-padding-lg;
-
-        .k-loader-segment {
-            width: $loader-segment-size-lg;
-            height: $loader-segment-size-lg;
-        }
-    }
-
-}
-
-
-
-
-@include exports( "loader/pulsing/2" ) {
-
-    // Animation
-    @keyframes pulsing-2-segment {
-        0% { transform: scale(1); }
-        50% { transform: scale(1.5); }
-        100% { transform: scale(1); }
-    }
-
-
-    // Component
-    .k-loader-pulsing-2 {
-
-        .k-loader-canvas {
-            align-items: center;
-        }
-
-        .k-loader-segment:nth-child(1) {
-            left: 0;
-            transform: scale( 1.5 );
-            transform-origin: 0 50%;
-            animation: pulsing-2-segment 1s ease infinite;
-            animation-delay: -.5s;
-        }
-        .k-loader-segment:nth-child(2) {
-            right: 0;
-            transform-origin: 100% 50%;
-            animation: pulsing-2-segment 1s ease infinite;
-        }
-
-        &.k-loader-sm {
-            .k-loader-canvas {
-                width: ( $loader-segment-size-sm * 3 );
-                height: ( $loader-segment-size-sm * 1.5 );
-            }
-        }
-
-        &.k-loader-md {
-            .k-loader-canvas {
-                width: ( $loader-segment-size-md * 3 );
-                height: ( $loader-segment-size-md * 1.5 );
-            }
-        }
-
-        &.k-loader-lg {
-            .k-loader-canvas {
-                width: ( $loader-segment-size-lg * 3 );
-                height: ( $loader-segment-size-lg * 1.5 );
-            }
-        }
-    }
-
-}
-
-
-
-
-@include exports( "loader/spinner/3" ) {
-
-    // Animation
-    @keyframes spinner-3-segment {
-        0% {
-            top: 0;
-            left: 50%;
-        }
-
-        33.3333% {
-            top: 100%;
-            left: 0;
-        }
-
-        66.6666% {
-            top: 100%;
-            left: 100%;
-        }
-
-        100% {
-            top: 0;
-            left: 50%;
-        }
-    }
-
-
-    // Component
-    .k-loader-spinner-3 {
-
-        // Note: Until we can provide a css variables solution, or something better:
-        // * the dot center is on the exact point of angle
-        // * offset dots by artifically reduce dimentions by 1 dot size
-        // * compensate by setting margin on all sides half a dot size
-
-        .k-loader-segment {
-            transform: translate( -50%, -50% );
-        }
-        .k-loader-segment:nth-child(1) {
-            top: 0;
-            left: 50%;
-            animation: spinner-3-segment 2s ease infinite;
-        }
-        .k-loader-segment:nth-child(2) {
-            top: 100%;
-            left: 0;
-            animation: spinner-3-segment 2s ease infinite;
-            animation-delay: calc( -2s / 3 );
-        }
-        .k-loader-segment:nth-child(3) {
-            top: 100%;
-            left: 100%;
-            animation: spinner-3-segment 2s ease infinite;
-            animation-delay: calc( -4s / 3 );
-        }
-
-
-        &.k-loader-sm {
-            .k-loader-canvas {
-                margin: ( $loader-segment-size-sm / 2 );
-                width: calc( #{$loader-spinner-3-width-sm} - #{$loader-segment-size-sm} );
-                height: calc( #{$loader-spinner-3-height-sm} - #{$loader-segment-size-sm} );
-            }
-        }
-
-        &.k-loader-md {
-            .k-loader-canvas {
-                margin: ( $loader-segment-size-md / 2 );
-                width: calc( #{$loader-spinner-3-width-md} - #{$loader-segment-size-md} );
-                height: calc( #{$loader-spinner-3-height-md} - #{$loader-segment-size-md} );
-            }
-        }
-
-        &.k-loader-lg {
-            .k-loader-canvas {
-                margin: ( $loader-segment-size-lg / 2 );
-                width: calc( #{$loader-spinner-3-width-lg} - #{$loader-segment-size-lg} );
-                height: calc( #{$loader-spinner-3-height-lg} - #{$loader-segment-size-lg} );
-            }
-        }
-    }
-
-}
-
-
-
-
-@include exports( "loader/spinner/4" ) {
-
-    // Animation
-    @keyframes spinner-4-segment-1 {
-        0% {
-            top: 50%;
-            left: 50%;
-            transform: translateX(-50%) translateY(-50%);
-        }
-
-        33.3% {
-            top: 0;
-            left: 0;
-            transform: translateX(0) translateY(0);
-        }
-
-        66.6% {
-            top: 0;
-            left: 0;
-            transform: translateX(0) translateY(0);
-        }
-
-        100% {
-            top: 50%;
-            left: 50%;
-            transform: translateX(-50%) translateY(-50%);
-        }
-    }
-    @keyframes spinner-4-segment-2 {
-        0% {
-            top: 50%;
-            left: 50%;
-            transform: translateX(-50%) translateY(-50%);
-        }
-
-        33.3% {
-            top: 0;
-            left: 100%;
-            transform: translateX(-100%) translateY(0);
-        }
-
-        66.6% {
-            top: 0;
-            left: 100%;
-            transform: translateX(-100%) translateY(0);
-        }
-
-        100% {
-            top: 50%;
-            left: 50%;
-            transform: translateX(-50%) translateY(-50%);
-        }
-    }
-    @keyframes spinner-4-segment-3 {
-        0% {
-            top: 50%;
-            left: 50%;
-            transform: translateX(-50%) translateY(-50%);
-        }
-
-        33.3% {
-            top: 100%;
-            left: 100%;
-            transform: translateX(-100%) translateY(-100%);
-        }
-
-        66.6% {
-            top: 100%;
-            left: 100%;
-            transform: translateX(-100%) translateY(-100%);
-        }
-
-        100% {
-            top: 50%;
-            left: 50%;
-            transform: translateX(-50%) translateY(-50%);
-        }
-    }
-    @keyframes spinner-4-segment-4 {
-        0% {
-            top: 50%;
-            left: 50%;
-            transform: translateX(-50%) translateY(-50%);
-        }
-
-        33.3% {
-            top: 100%;
-            left: 0;
-            transform: translateX(0) translateY(-100%);
-        }
-
-        66.6% {
-            top: 100%;
-            left: 0;
-            transform: translateX(0) translateY(-100%);
-        }
-
-        100% {
-            top: 50%;
-            left: 50%;
-            transform: translateX(-50%) translateY(-50%);
-        }
-    }
-    @keyframes spinner-4 {
-        0% {
-            transform: rotate(0);
-        }
-
-        33.3% {
-            transform: rotate(0);
-        }
-
-        66.6% {
-            transform: rotate(180deg);
-        }
-
-        100% {
-            transform: rotate(180deg);
-        }
-    }
-
-    .k-loader-spinner-4 {
-        .k-loader-canvas {
-            animation: spinner-4 1.833s ease infinite;
-        }
-
-        .k-loader-segment {
-            top: 50%;
-            left: 50%;
-            transform: translateX(-50%) translateY(-50%);
-
-            &:nth-child(1) {
-                animation: spinner-4-segment-1 1.833s ease infinite;
-            }
-
-            &:nth-child(2) {
-                animation: spinner-4-segment-2 1.833s ease infinite;
-            }
-
-            &:nth-child(3) {
-                animation: spinner-4-segment-3 1.833s ease infinite;
-            }
-
-            &:nth-child(4) {
-                animation: spinner-4-segment-4 1.833s ease infinite;
-            }
-        }
-
-        &.k-loader-sm {
-            .k-loader-canvas {
-                width: $loader-spinner-4-width-sm;
-                height: $loader-spinner-4-height-sm;
-            }
-        }
-
-        &.k-loader-md {
-            .k-loader-canvas {
-                width: $loader-spinner-4-width-md;
-                height: $loader-spinner-4-height-md;
-            }
-        }
-
-        &.k-loader-lg {
-            .k-loader-canvas {
-                width: $loader-spinner-4-width-lg;
-                height: $loader-spinner-4-height-lg;
-            }
-        }
-    }
-}
-
-
-
-@include exports( "loader-container/layout" ) {
-
-    .k-loader-container {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        z-index: 2001;
-
-        .k-loader {
-            padding: 0;
-        }
-    }
-
-    .k-loader-container,
-    .k-loader-container-overlay {
-        width: 100%;
-        height: 100%;
-        position: absolute;
-        top: 0;
-        right: 0;
-        bottom: 0;
-        left: 0;
-    }
-
-    // TODO: use k-overlay as a base class in rendering
-    .k-loader-container-overlay {
-        opacity: $overlay-opacity;
-    }
-
-    .k-loader-container-inner {
-        display: flex;
-        align-items: center;
-        position: relative;
-        z-index: 2;
-    }
-
-    .k-loader-container-panel {
-        border-width: $loader-container-panel-border-width;
-        border-style: $loader-container-panel-border-style;
-        border-radius: $loader-container-panel-border-radius;
-    }
-
-    // Loader Container Sizes
-    .k-loader-container-sm {
-        .k-loader-container-inner {
-            padding: $loader-container-padding-sm;
-            gap: $loader-container-gap-sm;
-        }
-
-        .k-loader-container-label {
-            font-size: $loader-container-font-size-sm;
-        }
-    }
-    .k-loader-container-md {
-        .k-loader-container-inner {
-            padding: $loader-container-padding-md;
-            gap: $loader-container-gap-md;
-        }
-
-        .k-loader-container-label {
-            font-size: $loader-container-font-size-md;
-        }
-    }
-    .k-loader-container-lg {
-        .k-loader-container-inner {
-            padding: $loader-container-padding-lg;
-            gap: $loader-container-gap-lg;
-        }
-
-        .k-loader-container-label {
-            font-size: $loader-container-font-size-lg;
-        }
-    }
-
-    // Loader Position
-    .k-loader-top {
-        .k-loader-container-inner {
-            flex-direction: column;
-            text-align: center;
-        }
-    }
-    .k-loader-end {
-        .k-loader-container-label {
-            order: -1;
-        }
-    }
-
-}

package/modules/@progress/kendo-theme-default/scss/loader/_theme.scss

@@ -1,24 +0,0 @@
-@include exports( "loader/theme" ) {
-
-    @each $name, $color in $theme-colors {
-        .k-loader-#{$name} {
-            @if $name == "secondary" {
-                color: $loader-secondary-bg;
-            } @else {
-                color: $color;
-            }
-        }
-    }
-
-    .k-loader-container-panel {
-        background-color: $loader-container-panel-bg;
-        border-color: $loader-container-panel-border-color;
-    }
-
-    .k-loader-container-inner {
-        .k-text-secondary {
-            color: $loader-secondary-bg !important; // sass-lint:disable-line no-important
-        }
-    }
-
-}

package/modules/@progress/kendo-theme-default/scss/loader/_variables.scss

@@ -1,43 +0,0 @@
-// Loader
-$loader-segment-border-radius: 50% !default;
-$loader-segment-size-sm: map-get( $spacing, 1 ) !default;
-$loader-segment-size-md: map-get( $spacing, 2 ) !default;
-$loader-segment-size-lg: map-get( $spacing, 4 ) !default;
-
-$loader-padding-sm: ( $loader-segment-size-sm / 2 ) !default;
-$loader-padding-md: ( $loader-segment-size-md / 2 ) !default;
-$loader-padding-lg: ( $loader-segment-size-lg / 2 ) !default;
-
-$loader-spinner-3-width-sm: ( $loader-segment-size-sm * 4 ) !default;
-$loader-spinner-3-height-sm: ( $loader-spinner-3-width-sm * $equilateral-height ) !default;
-$loader-spinner-3-width-md: ( $loader-segment-size-md * 4 ) !default;
-$loader-spinner-3-height-md: ( $loader-spinner-3-width-md * $equilateral-height ) !default;
-$loader-spinner-3-width-lg: ( $loader-segment-size-lg * 4 ) !default;
-$loader-spinner-3-height-lg: ( $loader-spinner-3-width-lg * $equilateral-height ) !default;
-
-$loader-spinner-4-width-sm: $loader-segment-size-sm * 4 !default;
-$loader-spinner-4-height-sm: $loader-spinner-4-width-sm !default;
-$loader-spinner-4-width-md: $loader-segment-size-md * 4 !default;
-$loader-spinner-4-height-md: $loader-spinner-4-width-md !default;
-$loader-spinner-4-width-lg: $loader-segment-size-lg * 4 !default;
-$loader-spinner-4-height-lg: $loader-spinner-4-width-lg !default;
-
-$loader-secondary-bg: #656565 !default;
-
-$loader-container-panel-border-width: 1px !default;
-$loader-container-panel-border-style: solid !default;
-$loader-container-panel-border-color: $component-border !default;
-$loader-container-panel-border-radius: $border-radius !default;
-$loader-container-panel-bg: $white !default;
-
-$loader-container-padding-sm: map-get( $spacing, 4 ) !default;
-$loader-container-gap-sm: map-get( $spacing, 1 ) !default;
-$loader-container-font-size-sm: $font-size-sm !default;
-
-$loader-container-padding-md: map-get( $spacing, 5 ) !default;
-$loader-container-gap-md: map-get( $spacing, 2 ) !default;
-$loader-container-font-size-md: $font-size-md !default;
-
-$loader-container-padding-lg: map-get( $spacing, 6 ) !default;
-$loader-container-gap-lg: map-get( $spacing, 3 ) !default;
-$loader-container-font-size-lg: $font-size-lg !default;

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

@@ -1,16 +0,0 @@
-@import "../core/_index.scss";
-
-
-// Dependencies
-@import "../common/_index.scss";
-@import "../utils/_position.scss";
-@import "../button/_index.scss";
-@import "../scroller/_index.scss";
-@import "../icons/_index.scss";
-
-
-// Component
-@import "_variables.scss";
-@import "images/markers.scss";
-@import "_layout.scss";
-@import "_theme.scss";

package/modules/@progress/kendo-theme-default/scss/map/_layout.scss

@@ -1,129 +0,0 @@
-@include exports("map/layout") {
-
-    // Layout
-    .k-map {
-        height: 600px;
-        border-width: $map-border-width;
-        border-style: solid;
-        font-size: $map-font-size;
-        line-height: $map-line-height;
-        font-family: $map-font-family;
-
-
-        // Scroll
-        .km-scroll-wrapper {
-            width: 100%;
-            height: 100%;
-            user-select: none;
-            position: absolute;
-        }
-        .km-scroll-container { height: 100%; }
-        .k-touch-scrollbar { display: none; }
-
-        // Layers
-        .k-layer {
-            position: absolute;
-            left: 0;
-            top: 0;
-        }
-
-        // Marker
-        .k-marker {
-            transform: translate(-50%, -100%);
-            font-size: $map-marker-size;
-            cursor: pointer;
-            position: absolute;
-            overflow: visible;
-        }
-
-
-        // Attribution
-        .k-attribution {
-            padding: $map-attribution-padding-y $map-attribution-padding-x;
-            border-width: 0;
-            font-size: $map-attribution-font-size;
-            z-index: 1000;
-        }
-
-
-    }
-
-
-    // Controls
-    .k-map-controls {
-        position: absolute;
-        display: flex;
-        align-items: center;
-    }
-
-
-    // Navigator
-    .k-navigator {
-        margin: $map-navigator-margin;
-        width: $map-navigator-width;
-        height: $map-navigator-width;
-        border-width: $map-navigator-border-width;
-        border-style: solid;
-        box-sizing: border-box;
-        border-radius: 50%;
-        position: relative;
-
-        .k-pdf-export & { display: none; }
-
-
-        // Buttons
-        .k-button {
-            margin: 0;
-            padding: 0;
-            width: auto;
-            height: auto;
-            border-radius: 100%;
-            line-height: 1;
-            box-shadow: none;
-            position: absolute;
-
-            &:not(:hover) {
-                border-color: transparent;
-                background: none;
-            }
-        }
-        .k-navigator-up {
-            transform: translateX(-50%);
-            top: $map-navigator-padding;
-            left: 50%;
-        }
-        .k-navigator-right {
-            transform: translateY(-50%);
-            right: $map-navigator-padding;
-            top: 50%;
-        }
-        .k-navigator-down {
-            transform: translateX(-50%);
-            bottom: $map-navigator-padding;
-            left: 50%;
-        }
-        .k-navigator-left {
-            transform: translateY(-50%);
-            left: $map-navigator-padding;
-            top: 50%;
-        }
-    }
-
-
-    // Zoom control
-    .k-zoom-control {
-        margin: $spacer-x;
-        border: 0;
-        background: none;
-        display: flex;
-
-        .k-pdf-export & { display: none; }
-
-
-        // Buttons
-        .k-button {
-            padding: $button-padding-y;
-        }
-    }
-
-}

package/modules/@progress/kendo-theme-default/scss/map/_theme.scss

@@ -1,29 +0,0 @@
-@include exports("map/theme") {
-
-    .k-map {
-        @include fill(
-            $map-text,
-            $map-bg,
-            $map-border
-        );
-
-        .k-navigator {
-            @include fill(
-                $button-text,
-                $button-bg,
-                $button-border,
-                $button-gradient
-            );
-            @include box-shadow( $button-shadow );
-        }
-
-        .k-marker {
-            color: $map-marker-fill;
-        }
-
-        .k-attribution {
-            background-color: $map-attribution-bg;
-        }
-    }
-
-}