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

package/scss/components/map/_layout.scss

@@ -0,0 +1,143 @@
+@use "../../spacing/index.import.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;
+        }
+    }
+}
+
+
+@mixin kendo-map--layout() {
+    @include kendo-map--layout-base();
+}

package/scss/components/map/_theme.scss

@@ -0,0 +1,39 @@
+@use "../../mixins/index.import.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;
+        }
+    }
+
+}
+
+
+@mixin kendo-map--theme() {
+    @include kendo-map--theme-base();
+}

package/scss/components/map/_variables.scss

@@ -0,0 +1,29 @@
+// Map
+$kendo-map-border-width: null !default;
+
+$kendo-map-font-size: null !default;
+$kendo-map-line-height: null !default;
+$kendo-map-font-family: null !default;
+
+$kendo-map-bg: null !default;
+$kendo-map-text: null !default;
+$kendo-map-border: null !default;
+
+$kendo-map-navigator-margin: null !default;
+$kendo-map-navigator-padding: null !default;
+$kendo-map-navigator-width: null !default;
+$kendo-map-navigator-height: null !default;
+$kendo-map-navigator-border-width: null !default;
+
+$kendo-map-zoom-control-margin: null !default;
+$kendo-map-zoom-control-button-padding-x: null !default;
+$kendo-map-zoom-control-button-padding-y: null !default;
+
+$kendo-map-attribution-padding-x: null !default;
+$kendo-map-attribution-padding-y: null !default;
+$kendo-map-attribution-font-size: null !default;
+$kendo-map-attribution-bg: null !default;
+
+$kendo-map-marker-fill: null !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;

package/scss/components/maskedtextbox/_index.scss

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

package/scss/components/maskedtextbox/_layout.scss

@@ -0,0 +1,11 @@
+@mixin kendo-masked-textbox--layout-base() {
+
+    // Masked textbox
+    .k-maskedtextbox {}
+
+}
+
+
+@mixin kendo-masked-textbox--layout() {
+    @include kendo-masked-textbox--layout-base();
+}

package/scss/components/maskedtextbox/_theme.scss

@@ -0,0 +1,11 @@
+@mixin kendo-masked-textbox--theme-base() {
+
+    // Masked textbox
+    .k-maskedtextbox {}
+
+}
+
+
+@mixin kendo-masked-textbox--theme() {
+    @include kendo-masked-textbox--theme-base();
+}

package/scss/components/maskedtextbox/_variables.scss

@@ -0,0 +1 @@
+// Masked textbox

package/scss/components/mediaplayer/_index.scss

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

package/scss/components/mediaplayer/_layout.scss

@@ -0,0 +1,110 @@
+@use "sass:math";
+@use "../../color-system/_constants.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
+    }
+
+}
+
+
+@mixin kendo-media-player--layout() {
+    @include kendo-media-player--layout-base();
+}

package/scss/components/mediaplayer/_theme.scss

@@ -0,0 +1,30 @@
+@use "../../mixins/index.import.scss" as *;
+@use "../../_variables.scss" as *;
+@use "../../color-system/_functions.import.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 ));
+    }
+
+}
+
+
+@mixin kendo-media-player--theme() {
+    @include kendo-media-player--theme-base();
+}

package/scss/components/mediaplayer/_variables.scss

@@ -0,0 +1,17 @@
+// Media player
+
+$kendo-media-player-border-width: null !default;
+$kendo-media-player-font-family: null !default;
+$kendo-media-player-font-size: null !default;
+$kendo-media-player-line-height: null !default;
+
+$kendo-media-player-bg: null !default;
+$kendo-media-player-text: null !default;
+$kendo-media-player-border: null !default;
+
+$kendo-media-player-titlebar-padding-x: null !default;
+$kendo-media-player-titlebar-padding-y: null !default;
+$kendo-media-player-titlebar-bg: null !default;
+$kendo-media-player-titlebar-text: null !default;
+$kendo-media-player-titlebar-border: null !default;
+$kendo-media-player-titlebar-gradient: null !default;

package/scss/components/menu/_index.scss

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