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

package/scss/scheduler/_theme.scss

@@ -1,239 +1,4 @@
-@use "../core/_index.scss" as *;
-@use "../core/functions/index.import.scss" as *;
-@use "./variables.scss" as *;
-
-@mixin kendo-scheduler--theme-base() {
-
-    // Appearance
-    .k-scheduler {
-        @include fill(
-            $kendo-scheduler-text,
-            $kendo-scheduler-bg,
-            $kendo-scheduler-border
-        );
-    }
-
-    // Header and footer
-    .k-scheduler-toolbar {
-        @include fill(
-            $kendo-scheduler-toolbar-text,
-            $kendo-scheduler-toolbar-bg,
-            $kendo-scheduler-toolbar-border,
-            $kendo-scheduler-toolbar-gradient
-        );
-    }
-    .k-scheduler-footer {
-        @include fill(
-            $kendo-scheduler-footer-text,
-            $kendo-scheduler-footer-bg,
-            $kendo-scheduler-footer-border,
-            $kendo-scheduler-footer-gradient
-        );
-    }
-
-    .k-scheduler-header {
-        background-color: $kendo-base-bg;
-    }
-
-    .k-scheduler-header-wrap {
-        background-color: $kendo-scheduler-bg;
-    }
-
-
-    // Scheduler navigation
-    .k-scheduler-navigation {}
-
-
-    // View switcher
-    .k-scheduler-views {}
-
-
-    // Scheduler footer
-    .k-scheduler-footer {}
-
-
-    // Scheduler content
-    .k-scheduler-content {}
-    .k-scheduler-nonwork,
-    .k-scheduler .k-nonwork-hour {
-        @include fill(
-            $kendo-scheduler-nonwork-text,
-            $kendo-scheduler-nonwork-bg
-        );
-    }
-    .k-scheduler-other-month,
-    .k-scheduler .k-other-month {
-        @include fill(
-            $kendo-scheduler-othermonth-text,
-            $kendo-scheduler-othermonth-bg
-        );
-    }
-
-    .k-scheduler-layout td.k-selected,
-    .k-scheduler-layout .k-scheduler-cell.k-selected {
-        background-color: if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 25%, transparent), rgba($kendo-selected-bg, .25));
-    }
-
-    .k-scheduler-layout-flex {
-        .k-scheduler-head,
-        .k-sticky-cell {
-            background-color: $kendo-scheduler-bg;
-        }
-    }
-
-
-    // Events
-    .k-event {
-        @include fill(
-            $kendo-scheduler-event-text,
-            $kendo-scheduler-event-bg,
-            $kendo-scheduler-event-border,
-            $kendo-scheduler-event-gradient
-        );
-        @include box-shadow( $kendo-scheduler-event-shadow );
-
-        &:hover,
-        &.k-hover {
-            @include fill(
-                $kendo-scheduler-event-hover-text,
-                $kendo-scheduler-event-hover-bg,
-                $kendo-scheduler-event-hover-border,
-                $kendo-scheduler-event-hover-gradient
-            );
-            @include box-shadow( $kendo-scheduler-event-hover-shadow );
-        }
-
-        &.k-selected {
-            @include fill(
-                $kendo-scheduler-event-selected-text,
-                $kendo-scheduler-event-selected-bg,
-                $kendo-scheduler-event-selected-border,
-                $kendo-scheduler-event-selected-gradient
-            );
-            @include box-shadow( $kendo-scheduler-event-selected-shadow );
-        }
-
-        &.k-event-inverse {
-            color: if($kendo-enable-color-system, if($kendo-enable-focus-contrast, black, k-color( on-app-surface )), k-contrast-legacy( $kendo-scheduler-event-text ));
-        }
-
-        &.k-event-ongoing {
-            @include box-shadow( $kendo-scheduler-event-ongoing-shadow );
-        }
-    }
-
-
-    // Drag hint
-    .k-event-drag-hint {}
-
-
-    // Resizing
-    .k-scheduler-marquee {}
-    .k-scheduler-marquee::before,
-    .k-scheduler-marquee::after {
-        border-color: $kendo-color-primary;
-    }
-
-    // Edit dialog
-    .k-scheduler-edit-dialog {
-        .k-dialog-actions {
-            border-color: $kendo-scheduler-border;
-        }
-    }
-
-
-
-    // Day view
-    .k-scheduler-dayview {}
-
-
-    // Workweek view
-    .k-scheduler-workWeekview {} // stylelint-disable-line
-
-
-    // Week view
-    .k-scheduler-weekview {}
-
-
-    // Month view
-    .k-scheduler-monthview {}
-
-
-    // Agenda view
-    .k-scheduler-agendaview {
-
-        // Hover
-        .k-scheduler-content tr:hover,
-        .k-scheduler-content tr.k-hover,
-        .k-scheduler-content .k-scheduler-row:hover,
-        .k-scheduler-content .k-scheduler-row.k-hover {
-            @include fill(
-                $kendo-hover-text,
-                $kendo-hover-bg,
-                $kendo-hover-border,
-                $kendo-hover-gradient
-            );
-        }
-
-        .k-scheduler-content tr:hover .k-scheduler-datecolumn,
-        .k-scheduler-content tr:hover .k-scheduler-groupcolumn,
-        .k-scheduler-content tr.k-hover .k-scheduler-datecolumn,
-        .k-scheduler-content tr.k-hover .k-scheduler-groupcolumn {
-            @include fill(
-                $kendo-scheduler-text,
-                $kendo-scheduler-bg,
-                $kendo-scheduler-border
-            );
-        }
-
-        // Selected
-        .k-scheduler-content tr.k-selected {
-            background-color: if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 25%, transparent), rgba($kendo-selected-bg, .25));
-        }
-        .k-scheduler-content tr.k-selected .k-scheduler-datecolumn,
-        .k-scheduler-content tr.k-selected .k-scheduler-groupcolumn {
-            background-color: $kendo-scheduler-bg;
-        }
-    }
-
-
-    // Timeline view
-    .k-scheduler-timelineview {}
-
-
-    // Year view
-    .k-scheduler-yearview {
-
-        .k-day-indicator {
-            @include fill( $bg: $kendo-scheduler-yearview-indicator-bg );
-        }
-
-        .k-selected .k-day-indicator {
-            @include fill( $bg: $kendo-scheduler-yearview-indicator-selected-bg );
-        }
-    }
-
-
-
-    // Scheduler tooltip
-    .k-tooltip.k-scheduler-tooltip {
-        @include fill(
-            $kendo-scheduler-tooltip-text,
-            $kendo-scheduler-tooltip-bg,
-            $kendo-scheduler-tooltip-border
-        );
-        @include box-shadow( $kendo-scheduler-tooltip-shadow );
-
-        .k-callout {
-            @include fill( $color: $kendo-scheduler-tooltip-callout-text );
-        }
-    }
-
-
-    // Scheduler edit form
-    .k-scheduler-edit-form {}
-
-}
+@use "@progress/kendo-theme-core/scss/components/scheduler/_theme.scss" as *;
 
 
 @mixin kendo-scheduler--theme() {

package/scss/scheduler/_variables.scss

@@ -268,3 +268,85 @@ $kendo-scheduler-marquee-label-inset-x: k-spacing(1) !default;
 /// The block inset of the Scheduler marquee labels.
 /// @group scheduler
 $kendo-scheduler-marquee-label-inset-y: k-spacing(0.5) !default;
+
+@forward "@progress/kendo-theme-core/scss/components/scheduler/_variables.scss" with (
+    $kendo-scheduler-border-width: $kendo-scheduler-border-width,
+    $kendo-scheduler-font-family: $kendo-scheduler-font-family,
+    $kendo-scheduler-font-size: $kendo-scheduler-font-size,
+    $kendo-scheduler-line-height: $kendo-scheduler-line-height,
+    $kendo-scheduler-bg: $kendo-scheduler-bg,
+    $kendo-scheduler-text: $kendo-scheduler-text,
+    $kendo-scheduler-border: $kendo-scheduler-border,
+    $kendo-scheduler-toolbar-bg: $kendo-scheduler-toolbar-bg,
+    $kendo-scheduler-toolbar-text: $kendo-scheduler-toolbar-text,
+    $kendo-scheduler-toolbar-border: $kendo-scheduler-toolbar-border,
+    $kendo-scheduler-toolbar-gradient: $kendo-scheduler-toolbar-gradient,
+    $kendo-scheduler-footer-bg: $kendo-scheduler-footer-bg,
+    $kendo-scheduler-footer-text: $kendo-scheduler-footer-text,
+    $kendo-scheduler-footer-border: $kendo-scheduler-footer-border,
+    $kendo-scheduler-footer-gradient: $kendo-scheduler-footer-gradient,
+    $kendo-scheduler-event-min-height: $kendo-scheduler-event-min-height,
+    $kendo-scheduler-event-border-radius: $kendo-scheduler-event-border-radius,
+    $kendo-scheduler-event-line-height: $kendo-scheduler-event-line-height,
+    $kendo-scheduler-event-bg: $kendo-scheduler-event-bg,
+    $kendo-scheduler-event-text: $kendo-scheduler-event-text,
+    $kendo-scheduler-event-border: $kendo-scheduler-event-border,
+    $kendo-scheduler-event-gradient: $kendo-scheduler-event-gradient,
+    $kendo-scheduler-event-shadow: $kendo-scheduler-event-shadow,
+    $kendo-scheduler-event-hover-bg: $kendo-scheduler-event-hover-bg,
+    $kendo-scheduler-event-hover-text: $kendo-scheduler-event-hover-text,
+    $kendo-scheduler-event-hover-border: $kendo-scheduler-event-hover-border,
+    $kendo-scheduler-event-hover-gradient: $kendo-scheduler-event-hover-gradient,
+    $kendo-scheduler-event-hover-shadow: $kendo-scheduler-event-hover-shadow,
+    $kendo-scheduler-event-selected-bg: $kendo-scheduler-event-selected-bg,
+    $kendo-scheduler-event-selected-text: $kendo-scheduler-event-selected-text,
+    $kendo-scheduler-event-selected-border: $kendo-scheduler-event-selected-border,
+    $kendo-scheduler-event-selected-gradient: $kendo-scheduler-event-selected-gradient,
+    $kendo-scheduler-event-selected-shadow: $kendo-scheduler-event-selected-shadow,
+    $kendo-scheduler-event-ongoing-shadow: $kendo-scheduler-event-ongoing-shadow,
+    $kendo-scheduler-cell-padding-x: $kendo-scheduler-cell-padding-x,
+    $kendo-scheduler-cell-padding-y: $kendo-scheduler-cell-padding-y,
+    $kendo-scheduler-cell-height: $kendo-scheduler-cell-height,
+    $kendo-scheduler-datecolumn-width: $kendo-scheduler-datecolumn-width,
+    $kendo-scheduler-timecolumn-width: $kendo-scheduler-timecolumn-width,
+    $kendo-scheduler-nonwork-bg: $kendo-scheduler-nonwork-bg,
+    $kendo-scheduler-nonwork-text: $kendo-scheduler-nonwork-text,
+    $kendo-scheduler-weekend-bg: $kendo-scheduler-weekend-bg,
+    $kendo-scheduler-weekend-text: $kendo-scheduler-weekend-text,
+    $kendo-scheduler-othermonth-bg: $kendo-scheduler-othermonth-bg,
+    $kendo-scheduler-othermonth-text: $kendo-scheduler-othermonth-text,
+    $kendo-scheduler-yearview-padding-x: $kendo-scheduler-yearview-padding-x,
+    $kendo-scheduler-yearview-padding-y: $kendo-scheduler-yearview-padding-y,
+    $kendo-scheduler-yearview-calendar-gap: $kendo-scheduler-yearview-calendar-gap,
+    $kendo-scheduler-yearview-indicator-size: $kendo-scheduler-yearview-indicator-size,
+    $kendo-scheduler-yearview-indicator-calc-offset-top: $kendo-scheduler-yearview-indicator-calc-offset-top,
+    $kendo-scheduler-yearview-indicator-calc-offset-left: $kendo-scheduler-yearview-indicator-calc-offset-left,
+    $kendo-scheduler-yearview-indicator-border-radius: $kendo-scheduler-yearview-indicator-border-radius,
+    $kendo-scheduler-yearview-indicator-bg: $kendo-scheduler-yearview-indicator-bg,
+    $kendo-scheduler-yearview-indicator-selected-bg: $kendo-scheduler-yearview-indicator-selected-bg,
+    $kendo-scheduler-tooltip-padding-x: $kendo-scheduler-tooltip-padding-x,
+    $kendo-scheduler-tooltip-padding-y: $kendo-scheduler-tooltip-padding-y,
+    $kendo-scheduler-tooltip-border-width: $kendo-scheduler-tooltip-border-width,
+    $kendo-scheduler-tooltip-bg: $kendo-scheduler-tooltip-bg,
+    $kendo-scheduler-tooltip-text: $kendo-scheduler-tooltip-text,
+    $kendo-scheduler-tooltip-border: $kendo-scheduler-tooltip-border,
+    $kendo-scheduler-tooltip-shadow: $kendo-scheduler-tooltip-shadow,
+    $kendo-scheduler-tooltip-title-margin-y: $kendo-scheduler-tooltip-title-margin-y,
+    $kendo-scheduler-tooltip-month-font-size: $kendo-scheduler-tooltip-month-font-size,
+    $kendo-scheduler-tooltip-day-font-size: $kendo-scheduler-tooltip-day-font-size,
+    $kendo-scheduler-tooltip-events-max-height: $kendo-scheduler-tooltip-events-max-height,
+    $kendo-scheduler-tooltip-events-gap: $kendo-scheduler-tooltip-events-gap,
+    $kendo-scheduler-tooltip-event-padding-x: $kendo-scheduler-tooltip-event-padding-x,
+    $kendo-scheduler-tooltip-event-padding-y: $kendo-scheduler-tooltip-event-padding-y,
+    $kendo-scheduler-tooltip-event-border-radius: $kendo-scheduler-tooltip-event-border-radius,
+    $kendo-scheduler-tooltip-event-gap: $kendo-scheduler-tooltip-event-gap,
+    $kendo-scheduler-tooltip-callout-text: $kendo-scheduler-tooltip-callout-text,
+    $kendo-scheduler-appointments-padding: $kendo-scheduler-appointments-padding,
+    $kendo-scheduler-event-template-padding-x: $kendo-scheduler-event-template-padding-x,
+    $kendo-scheduler-event-template-padding-y: $kendo-scheduler-event-template-padding-y,
+    $kendo-scheduler-event-actions-inset-x: $kendo-scheduler-event-actions-inset-x,
+    $kendo-scheduler-indicators-margin: $kendo-scheduler-indicators-margin,
+    $kendo-scheduler-rtl-indicators-margin: $kendo-scheduler-rtl-indicators-margin,
+    $kendo-scheduler-marquee-label-inset-x: $kendo-scheduler-marquee-label-inset-x,
+    $kendo-scheduler-marquee-label-inset-y: $kendo-scheduler-marquee-label-inset-y
+);

package/scss/scroller/_layout.scss

@@ -1,88 +1,4 @@
-@mixin kendo-scroller--layout-base() {
-
-    // Layout
-    .km-scrollview,
-    .km-scroll-container {
-        user-select: none;
-        border-collapse: separate;
-    }
-    .km-scroll-wrapper {
-        position: relative;
-    }
-    .km-scroll-header {
-        position: absolute;
-        z-index: 1001;
-        width: 100%;
-        top: 0;
-        left: 0;
-    }
-
-
-    // Pull to refresh
-    .km-scroller-pull {
-        width: 100%;
-        display: block;
-        position: absolute;
-        line-height: 3em;
-        font-size: 1.4em;
-        text-align: center;
-        transform: translate3d(0, -3em, 0);
-    }
-    .km-scroller-pull .km-template {
-        display: inline-block;
-        min-width: 200px;
-        text-align: start;
-    }
-    .km-load-more .km-icon,
-    .km-widget .km-scroller-pull .km-icon {
-        display: inline-block;
-        height: 2rem;
-        margin-right: 1rem;
-        vertical-align: middle;
-        width: 2rem;
-        font-size: 2rem;
-        transform: rotate(0deg);
-        transition: transform 300ms linear;
-    }
-    .km-widget .km-scroller-release .km-icon {
-        transform: rotate(180deg);
-    }
-    .km-widget .km-scroller-refresh .km-icon {
-        transition: none;
-    }
-
-
-    // Scrollbar
-    .km-touch-scrollbar {
-        position: absolute;
-        visibility: hidden;
-        z-index: 200000;
-        height: .4em;
-        width: .4em;
-        opacity: 0;
-        transform-origin: 0 0;
-        transition: opacity .3s linear;
-    }
-
-    .k-map,
-    .k-diagram {
-        .km-touch-scrollbar {
-            display: none;
-        }
-    }
-
-    .km-vertical-scrollbar {
-        height: 100%;
-        right: 2px;
-        top: 0;
-    }
-    .km-horizontal-scrollbar {
-        width: 100%;
-        left: 0;
-        bottom: 2px;
-    }
-
-}
+@use "@progress/kendo-theme-core/scss/components/scroller/_layout.scss" as *;
 
 
 @mixin kendo-scroller--layout() {

package/scss/scroller/_theme.scss

@@ -1,10 +1,4 @@
-@mixin kendo-scroller--theme-base() {
-
-    .km-touch-scrollbar {
-        background-color: #333333;
-    }
-
-}
+@use "@progress/kendo-theme-core/scss/components/scroller/_theme.scss" as *;
 
 
 @mixin kendo-scroller--theme() {

package/scss/scrollview/_layout.scss

@@ -1,168 +1,4 @@
-@use "../core/_index.scss" as *;
-@use "./variables.scss" as *;
-
-@mixin kendo-scrollview--layout-base() {
-
-    .k-scrollview {
-        border-width: $kendo-scrollview-border-width;
-        border-style: solid;
-        box-sizing: border-box;
-        outline: 0;
-        font-family: $kendo-scrollview-font-family;
-        font-size: $kendo-scrollview-font-size;
-        line-height: $kendo-scrollview-line-height;
-        position: relative;
-        overflow: hidden;
-        display: block;
-        -webkit-touch-callout: none;
-        -webkit-tap-highlight-color: $kendo-color-rgba-transparent;
-    }
-
-    .k-scrollview-wrap {
-        position: absolute;
-        margin: 0;
-        padding: 0;
-        height: 100%;
-        width: 100%;
-        display: flex;
-        flex-flow: row nowrap;
-        cursor: default;
-        white-space: nowrap;
-
-        > .k-scrollview-view {
-            display: inline-block;
-            overflow: hidden;
-            flex-shrink: 0;
-        }
-
-        img {
-            user-select: none;
-        }
-
-    }
-
-    .k-scrollview-wrap.k-scrollview-animate {
-        width: calc( var(--kendo-scrollview-views, 1) * 100% );
-        transition-duration: $kendo-scrollview-transition-duration;
-        transition-timing-function: $kendo-scrollview-transition-timing-function;
-        transform: translateX( calc( -100% / var(--kendo-scrollview-views, 1) * ( var(--kendo-scrollview-current, 1) - 1) ) );
-
-        .k-scrollview-view {
-            width: calc( 100% / var(--kendo-scrollview-views, 1) );
-            flex: 0 0 calc( 100% / var(--kendo-scrollview-views, 1) );
-        }
-
-    }
-
-    :is([dir="rtl"], .k-rtl) .k-scrollview-wrap.k-scrollview-animate {
-        transform: translateX( calc( 100% / var(--kendo-scrollview-views, 1) * ( var(--kendo-scrollview-current, 1) - 1) ) );
-    }
-
-    .k-scrollview-nav-wrap {
-        padding: 0;
-        margin: 0;
-        position: absolute;
-        left: 0;
-        right: 0;
-        bottom: $kendo-scrollview-pager-offset;
-        height: $kendo-scrollview-pager-height;
-        text-align: center;
-    }
-
-    kendo-scrollview.k-scrollview kendo-scrollview-pager {
-        pointer-events: none;
-    }
-
-    kendo-scrollview.k-scrollview .k-scrollview-nav {
-        pointer-events: initial;
-    }
-
-    .k-scrollview-nav {
-        margin: 0;
-        padding: $kendo-scrollview-pager-item-spacing;
-        max-width: 100%;
-        box-sizing: border-box;
-        line-height: 0;
-        text-align: center;
-        white-space: nowrap;
-        list-style: none;
-        display: inline-flex;
-        align-items: center;
-        overflow-x: scroll;
-        overflow-y: hidden;
-        pointer-events: initial;
-
-        &:focus {
-            outline: none;
-        }
-    }
-
-    .k-scrollview-nav > .k-link {
-        margin-block: 0;
-        margin-inline: calc( #{$kendo-scrollview-pager-item-spacing} / 2 );
-        padding: 0;
-        width: $kendo-scrollview-pagebutton-size;
-        height: $kendo-scrollview-pagebutton-size;
-        border-width: $kendo-scrollview-pager-item-border-width;
-        border-style: solid;
-        border-radius: 50%;
-        box-sizing: content-box;
-        display: inline-block;
-        position: relative;
-        flex: 0 0 auto;
-        cursor: pointer;
-        pointer-events: all;
-        vertical-align: top;
-
-        &::before {
-            content: "";
-            width: calc( #{$kendo-scrollview-pagebutton-size} + #{$kendo-scrollview-pager-item-spacing} );
-            height: calc( #{$kendo-scrollview-pagebutton-size} + #{$kendo-scrollview-pager-item-spacing} );
-            display: block;
-            position: absolute;
-            top: 50%;
-            left: 50%;
-            transform: translate(-50%, -50%);
-            pointer-events: initial;
-            border-radius: 0;
-        }
-    }
-
-    .k-scrollview-next,
-    .k-scrollview-prev {
-        display: table;
-        position: absolute;
-        padding: 0;
-        height: 60%;
-        top: 20%;
-        text-decoration: none;
-        user-select: none;
-        cursor: pointer;
-
-        .k-icon {
-            display: table-cell;
-            overflow: visible;
-            margin: 0;
-            padding: 0;
-            vertical-align: middle;
-            font-weight: normal;
-        }
-    }
-
-    .k-scrollview-prev {
-        inset-inline-start: 0;
-    }
-
-    .k-scrollview-next {
-        inset-inline-end: 0;
-    }
-
-
-    .k-scrollview-animation {
-        transition-duration: .3s;
-        transition-timing-function: ease-in-out;
-    }
-}
+@use "@progress/kendo-theme-core/scss/components/scrollview/_layout.scss" as *;
 
 
 @mixin kendo-scrollview--layout() {

package/scss/scrollview/_theme.scss

@@ -1,94 +1,4 @@
-@use "../core/_index.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;
-        }
-    }
-
-}
+@use "@progress/kendo-theme-core/scss/components/scrollview/_theme.scss" as *;
 
 
 @mixin kendo-scrollview--theme() {