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

package/scss/map/_layout.scss

@@ -1,141 +1,4 @@
-@use "../core/_index.scss" as *;
-@use "./variables.scss" as *;
-
-@mixin kendo-map--layout-base() {
-
-    // Map
-    .k-map {
-        height: 600px;
-        box-sizing: border-box;
-        border-width: $kendo-map-border-width;
-        border-style: solid;
-        font-size: $kendo-map-font-size;
-        line-height: $kendo-map-line-height;
-        font-family: $kendo-map-font-family;
-
-        *,
-        *::before,
-        *::after {
-            box-sizing: border-box;
-        }
-
-
-        // 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%);
-            cursor: pointer;
-            position: absolute;
-            overflow: visible;
-        }
-
-
-        // Attribution
-        .k-attribution {
-            padding-block: $kendo-map-attribution-padding-y;
-            padding-inline: $kendo-map-attribution-padding-x;
-            border-width: 0;
-            font-size: $kendo-map-attribution-font-size;
-            z-index: 1000;
-        }
-
-
-    }
-
-
-    // Controls
-    .k-map-controls {
-        position: absolute;
-        display: flex;
-        align-items: center;
-    }
-
-
-    // Navigator
-    .k-navigator {
-        margin: $kendo-map-navigator-margin;
-        width: $kendo-map-navigator-width;
-        height: $kendo-map-navigator-width;
-        border-width: $kendo-map-navigator-border-width;
-        border-style: solid;
-        box-sizing: border-box;
-        border-radius: 50%;
-        position: relative;
-
-
-        // Buttons
-        .k-button {
-            padding: 0;
-            width: auto;
-            height: auto;
-            line-height: 1;
-            box-shadow: none;
-            position: absolute;
-
-            .k-icon {
-                min-width: 0;
-                min-height: 0;
-            }
-        }
-        .k-navigator-n,
-        .k-navigator-up {
-            transform: translateX(-50%);
-            top: $kendo-map-navigator-padding;
-            left: 50%;
-        }
-        .k-navigator-e,
-        .k-navigator-right {
-            transform: translateY(-50%);
-            right: $kendo-map-navigator-padding;
-            top: 50%;
-        }
-        .k-navigator-s,
-        .k-navigator-down {
-            transform: translateX(-50%);
-            bottom: $kendo-map-navigator-padding;
-            left: 50%;
-        }
-        .k-navigator-w,
-        .k-navigator-left {
-            transform: translateY(-50%);
-            left: $kendo-map-navigator-padding;
-            top: 50%;
-        }
-    }
-
-
-    // Zoom control
-    .k-zoom-control {
-        margin: k-spacing(4);
-        border: 0;
-        background: none;
-        display: flex;
-    }
-
-
-    .k-pdf-export {
-        .k-navigator,
-        .k-zoom-control {
-            display: none;
-        }
-    }
-}
+@use "@progress/kendo-theme-core/scss/components/map/_layout.scss" as *;
 
 
 @mixin kendo-map--layout() {

package/scss/map/_theme.scss

@@ -1,37 +1,4 @@
-@use "../core/_index.scss" as *;
-@use "./variables.scss" as *;
-@use "../button/_variables.scss" as *;
-
-@mixin kendo-map--theme-base() {
-
-    // Map theme
-    .k-map {
-        @include fill(
-            $kendo-map-text,
-            $kendo-map-bg,
-            $kendo-map-border
-        );
-
-        .k-navigator {
-            @include fill(
-                $kendo-button-text,
-                $kendo-button-bg,
-                $kendo-button-border,
-                $kendo-button-gradient
-            );
-            @include box-shadow( $kendo-button-shadow );
-        }
-
-        .k-marker {
-            color: $kendo-map-marker-fill;
-        }
-
-        .k-attribution {
-            background-color: $kendo-map-attribution-bg;
-        }
-    }
-
-}
+@use "@progress/kendo-theme-core/scss/components/map/_theme.scss" as *;
 
 
 @mixin kendo-map--theme() {

package/scss/map/_variables.scss

@@ -71,3 +71,27 @@ $kendo-map-attribution-bg: if($kendo-enable-color-system, color-mix(in srgb, k-c
 $kendo-map-marker-fill: $kendo-color-primary !default;
 
 $kendo-map-marker-images: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAABQCAYAAAAKlxWDAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA35JREFUeNrsWF1IVEEUPu7amhKUmqUUkhEYYn9PamgbROKTEERB1HNP0pMvJUVhZQhCEEQPQiAIkiQIQShEZmg99SdLgiRJpbGmGIu/aZ2zzJXrvWf2zty7PgTzwQd3Z86Z796z58wMJ+PruXxQwCHkGeRpZDbyqBh/j1xA9iN7kJ+8FsrwECSRu8hSUMMosgnZLTMIScaLkUPIpxpiIGyfCN9iVcEo8h2yCvyjSqwR9RIkgz5kHgRHnlhrg2im7blEhCPCeW89fBJyKuohsv8IRPaV46uGYfnLhyTn3/bC4seXnFtErFmBHHcmzSCy2umRWVgC+ZfvQ1bZ8ZSfsxQbgl+PrsCfqXFu+jWyxh7Ss5xY1sFKKLzd5ymWtEWbpC36MKgWGuuCzdyXFTR2QGhbrvKfRrbkQ74Mmi3BKJf6FEYdMbso+UpKJkpJU+dKkPIaNoyrM5Mw23Edlj6/WQ957qVbEM4rcoWX1lgcGXQuURfi6o2y0YmVH2Mw2XgC5od6ksJEeqaxlW+joLIGaZFgGVcCTsx13YG1xKxrnMZoTmUN0iLB7c7R8M49LktJnSWxwMxxa5AWu5f+XV6EzQIJznHJwSWSDNlM+Fanv3OmcyQY43YNVyzOX2XLhMZoTvEviJHgsHOU9kYntuwthaLWV5BTWQ/hHbuSpGcaozmVNUiL9lIqfNfr7L7Rq7SlyfbVnzfZsjhFXzggTuoNoI14bf63thj5kK/kNvDCytIm5yzt+vF7F9jak4qhbbz1ouzEaLJv3t3iCNkYGtzCpq7Vrm9lKcNo2TIJJ/Kk23keHhB3kQLPAxhJUDiACXEkJcMYd2uzrhiRNNX5MrJW5Al7pxkQBjNpEJtxislubWRwjKtPDQyLNQZU76UTIu4NPsQahO+EzkXYwgNu60uBmPAB3Zu3HS0agp62KoJdsvAwf0NXOgQptdsU7NqEbWBBQrso4FQl0K56AKsggXzokVyJdAqmWjThlZl+BeOSsD32CLdvQSsxVu1XF2Sr7iVKB5T6nbbfnYol41vQWdwtus6ZPgRp+3pme950QV9fpito+jSmT2P6NKZP479PE9Lp06jC6tMwUO/T6CJwn0YXgfs0uvj/+jS6CNyn0UXgPo0uZH0aEnzueruRwUBfSb5Mr5TQb/o0pk9j+jSmT2P6NKZPY/o0pk9j+jQ+8E+AAQDpbNHEyW7DTAAAAABJRU5ErkJggg==" !default;
+
+@forward "@progress/kendo-theme-core/scss/components/map/_variables.scss" with (
+    $kendo-map-border-width: $kendo-map-border-width,
+    $kendo-map-font-size: $kendo-map-font-size,
+    $kendo-map-line-height: $kendo-map-line-height,
+    $kendo-map-font-family: $kendo-map-font-family,
+    $kendo-map-bg: $kendo-map-bg,
+    $kendo-map-text: $kendo-map-text,
+    $kendo-map-border: $kendo-map-border,
+    $kendo-map-navigator-margin: $kendo-map-navigator-margin,
+    $kendo-map-navigator-padding: $kendo-map-navigator-padding,
+    $kendo-map-navigator-width: $kendo-map-navigator-width,
+    $kendo-map-navigator-height: $kendo-map-navigator-height,
+    $kendo-map-navigator-border-width: $kendo-map-navigator-border-width,
+    $kendo-map-zoom-control-margin: $kendo-map-zoom-control-margin,
+    $kendo-map-zoom-control-button-padding-x: $kendo-map-zoom-control-button-padding-x,
+    $kendo-map-zoom-control-button-padding-y: $kendo-map-zoom-control-button-padding-y,
+    $kendo-map-attribution-padding-x: $kendo-map-attribution-padding-x,
+    $kendo-map-attribution-padding-y: $kendo-map-attribution-padding-y,
+    $kendo-map-attribution-font-size: $kendo-map-attribution-font-size,
+    $kendo-map-attribution-bg: $kendo-map-attribution-bg,
+    $kendo-map-marker-fill: $kendo-map-marker-fill,
+    $kendo-map-marker-images: $kendo-map-marker-images
+);

package/scss/maskedtextbox/_layout.scss

@@ -1,9 +1,4 @@
-@mixin kendo-masked-textbox--layout-base() {
-
-    // Masked textbox
-    .k-maskedtextbox {}
-
-}
+@use "@progress/kendo-theme-core/scss/components/maskedtextbox/_layout.scss" as *;
 
 
 @mixin kendo-masked-textbox--layout() {

package/scss/maskedtextbox/_theme.scss

@@ -1,9 +1,4 @@
-@mixin kendo-masked-textbox--theme-base() {
-
-    // Masked textbox
-    .k-maskedtextbox {}
-
-}
+@use "@progress/kendo-theme-core/scss/components/maskedtextbox/_theme.scss" as *;
 
 
 @mixin kendo-masked-textbox--theme() {

package/scss/mediaplayer/_layout.scss

@@ -1,108 +1,4 @@
-@use "sass:math";
-@use "../core/_index.scss" as *;
-@use "./variables.scss" as *;
-
-@mixin kendo-media-player--layout-base() {
-
-    // Base
-    .k-mediaplayer {
-        border-width: $kendo-media-player-border-width;
-        border-style: solid;
-        box-sizing: border-box;
-        outline: 0;
-        font-family: $kendo-media-player-font-family;
-        font-size: $kendo-media-player-font-size;
-        line-height: $kendo-media-player-line-height;
-        display: block;
-        position: relative;
-        -webkit-touch-callout: none;
-        -webkit-tap-highlight-color: $kendo-color-rgba-transparent;
-
-        *,
-        *::before,
-        *::after {
-            box-sizing: border-box;
-        }
-
-        > iframe {
-            width: 100%;
-            height: 100%;
-            border: 0;
-            vertical-align: top;
-        }
-    }
-
-
-    // Title bar
-    .k-mediaplayer-titlebar {
-        padding-block: $kendo-media-player-titlebar-padding-y;
-        padding-inline: $kendo-media-player-titlebar-padding-x;
-        position: absolute;
-        z-index: 2;
-        top: 0;
-        left: 0;
-        right: 0;
-    }
-
-
-    // Toolbar
-    .k-mediaplayer-toolbar-wrap {
-        position: absolute;
-        z-index: 2;
-        bottom: 0;
-        left: 0;
-        right: 0;
-    }
-    .k-mediaplayer-toolbar {
-        border-width: 0;
-        width: 100% !important; // stylelint-disable-line declaration-no-important
-        box-shadow: none;
-
-
-        .k-dropdown-list {
-            width: auto;
-        }
-    }
-    .k-mediaplayer-time-wrap {
-        flex: 1;
-    }
-    .k-mediaplayer-volume-wrap {
-        // TODO: When slider draghandle size is exposed, use it instead
-        padding: 0 math.div( 14px, 2 );
-        align-items: center;
-    }
-    .k-mediaplayer-volume {
-        width: 100px;
-    }
-
-
-    // Seekbar
-    .k-slider.k-mediaplayer-seekbar {
-        width: 100%;
-        position: absolute;
-        z-index: 3;
-        top: 0;
-        left: 0;
-        transform: translateY( -50% );
-    }
-    .k-mediaplayer-seekbar .k-slider-track {
-        width: 100% !important; // stylelint-disable-line declaration-no-important
-        border-radius: 0;
-    }
-    .k-mediaplayer-seekbar .k-slider-selection {
-        border-radius: 0;
-    }
-
-    .k-mediaplayer-fullscreen {
-        z-index: 10000;
-        position: fixed;
-        top: 0;
-        left: 0;
-        width: 100% !important; // stylelint-disable-line declaration-no-important
-        height: 100% !important; // stylelint-disable-line declaration-no-important
-    }
-
-}
+@use "@progress/kendo-theme-core/scss/components/mediaplayer/_layout.scss" as *;
 
 
 @mixin kendo-media-player--layout() {

package/scss/mediaplayer/_theme.scss

@@ -1,26 +1,4 @@
-@use "../core/_index.scss" as *;
-@use "./variables.scss" as *;
-
-@mixin kendo-media-player--theme-base() {
-
-    // Theme
-    .k-mediaplayer {
-        @include fill(
-            $kendo-media-player-text,
-            $kendo-media-player-bg,
-            $kendo-media-player-border
-        );
-    }
-
-
-    // Title bar
-    .k-mediaplayer-titlebar {
-        color: $kendo-media-player-titlebar-text;
-        background-image: linear-gradient( $kendo-media-player-titlebar-gradient );
-        text-shadow: 0 0 2px if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 50%, transparent), rgba( $kendo-media-player-text, .5 ));
-    }
-
-}
+@use "@progress/kendo-theme-core/scss/components/mediaplayer/_theme.scss" as *;
 
 
 @mixin kendo-media-player--theme() {

package/scss/mediaplayer/_variables.scss

@@ -44,3 +44,19 @@ $kendo-media-player-titlebar-border: null !default;
 /// The gradient of the MediaPlayer title.
 /// @group mediaplayer
 $kendo-media-player-titlebar-gradient: if($kendo-enable-color-system, ( color-mix(in srgb, k-color( on-app-surface ) 70%, transparent), color-mix(in srgb, k-color( on-app-surface ) 0%, transparent) ), ( rgba( $kendo-media-player-text, .7 ), rgba( $kendo-media-player-text, 0 ) )) !default;
+
+@forward "@progress/kendo-theme-core/scss/components/mediaplayer/_variables.scss" with (
+    $kendo-media-player-border-width: $kendo-media-player-border-width,
+    $kendo-media-player-font-family: $kendo-media-player-font-family,
+    $kendo-media-player-font-size: $kendo-media-player-font-size,
+    $kendo-media-player-line-height: $kendo-media-player-line-height,
+    $kendo-media-player-bg: $kendo-media-player-bg,
+    $kendo-media-player-text: $kendo-media-player-text,
+    $kendo-media-player-border: $kendo-media-player-border,
+    $kendo-media-player-titlebar-padding-x: $kendo-media-player-titlebar-padding-x,
+    $kendo-media-player-titlebar-padding-y: $kendo-media-player-titlebar-padding-y,
+    $kendo-media-player-titlebar-bg: $kendo-media-player-titlebar-bg,
+    $kendo-media-player-titlebar-text: $kendo-media-player-titlebar-text,
+    $kendo-media-player-titlebar-border: $kendo-media-player-titlebar-border,
+    $kendo-media-player-titlebar-gradient: $kendo-media-player-titlebar-gradient
+);