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

package/scss/components/scheduler/_layout.scss

@@ -62,16 +62,18 @@
             overflow: hidden;
             white-space: nowrap;
             border-style: solid;
-            border-width: 0 0 1px 1px;
+            border-width: 0;
+            border-inline-start-width: 1px;
+            border-block-end-width: 1px;
             vertical-align: top;
             box-sizing: content-box;
         }
         td:first-child,
         th:first-child {
-            border-left-width: 0;
+            border-inline-start-width: 0;
         }
         .k-middle-row td {
-            border-bottom-style: dotted;
+            border-block-end-style: dotted;
         }
 
         .k-link {
@@ -84,7 +86,7 @@
 
         .k-scheduler-head {
             position: sticky;
-            top: 0;
+            inset-block-start: 0;
             z-index: 3;
         }
         .k-scheduler-body {
@@ -143,8 +145,8 @@
 
 
         .k-more-events {
-            bottom: 2px;
-            left: 0;
+            inset-block-end: 2px;
+            inset-inline-start: 0;
             width: 100%;
         }
 
@@ -178,12 +180,12 @@
             }
 
             &.k-major-cell {
-                border-bottom-width: 0;
+                border-block-end-width: 0;
             }
         }
 
         .k-middle-row .k-scheduler-cell {
-            border-bottom-style: dotted;
+            border-block-end-style: dotted;
         }
 
         .k-resource-cell {
@@ -205,7 +207,7 @@
             flex-wrap: wrap;
             flex-basis: 0;
             position: sticky;
-            left: 0;
+            inset-inline-start: 0;
             z-index: 3;
         }
     }
@@ -214,7 +216,7 @@
     // Header and footer
     .k-scheduler-toolbar {
         border-width: 0;
-        border-bottom-width: $kendo-toolbar-border-width;
+        border-block-end-width: $kendo-toolbar-border-width;
         white-space: nowrap;
         flex-shrink: 0;
         position: relative;
@@ -257,7 +259,7 @@
     .k-scheduler-footer {
         @include box-shadow( none );
         border-width: 0;
-        border-top-width: $kendo-toolbar-border-width;
+        border-block-start-width: $kendo-toolbar-border-width;
         white-space: nowrap;
         flex-shrink: 0;
         position: relative;
@@ -288,13 +290,13 @@
         .k-scheduler-pane + .k-scheduler-pane {
             .k-scheduler-times tr {
                 th {
-                    border-bottom-color: transparent;
+                    border-block-end-color: transparent;
                 }
 
                 .k-slot-cell,
                 .k-scheduler-times-all-day,
                 &:last-child th {
-                    border-bottom-color: inherit;
+                    border-block-end-color: inherit;
                 }
             }
         }
@@ -340,21 +342,23 @@
         .k-scheduler-table { table-layout: auto; }
 
         th {
-            border-width: 0 1px 1px 0;
+            border-width: 0;
+            border-inline-end-width: 1px;
+            border-block-end-width: 1px;
             text-align: end;
         }
 
         .k-slot-cell,
         .k-scheduler-times-all-day {
-            border-bottom-color: inherit;
+            border-block-end-color: inherit;
         }
 
         .k-slot-cell.k-last-resource {
-            border-right: 0;
+            border-inline-end: 0;
         }
         .k-slot-cell.k-empty-slot {
-            padding-left: 0;
-            padding-right: 0;
+            padding-inline-start: 0;
+            padding-inline-end: 0;
         }
     }
 
@@ -406,10 +410,10 @@
             padding-block: $kendo-scheduler-event-template-padding-y;
             padding-inline: $kendo-scheduler-event-template-padding-x;
             // TODO: incompatible units
-            // padding-right: k-spacing(1) + k-spacing(4);
+            // padding-inline-end: k-spacing(1) + k-spacing(4);
         }
         .k-event-time {
-            padding-bottom: 0;
+            padding-block-end: 0;
             font-size: .875em;
             white-space: nowrap;
             display: none;
@@ -420,9 +424,9 @@
         .k-event-actions {
             white-space: nowrap;
             position: absolute;
-            top: 0;
-            bottom: 0;
-            right: $kendo-scheduler-event-actions-inset-x;
+            inset-block-start: 0;
+            inset-block-end: 0;
+            inset-inline-end: $kendo-scheduler-event-actions-inset-x;
             z-index: 2;
 
             .k-event-delete {
@@ -444,9 +448,9 @@
         // Indicators
         .k-event-actions:first-child {
             margin: $kendo-scheduler-indicators-margin;
-            top: 0;
-            right: 0;
-            float: left;
+            inset-block-start: 0;
+            inset-inline-end: 0;
+            float: inline-start;
             position: relative;
             opacity: 1;
             visibility: visible;
@@ -463,29 +467,29 @@
         .k-resize-handle::before { border-color: currentColor; }
         .k-resize-n {
             height: .5em;
-            top: 0;
+            inset-block-start: 0;
         }
         .k-resize-s {
             height: .5em;
-            bottom: 0;
+            inset-block-end: 0;
         }
         .k-resize-n::before,
         .k-resize-s::before {
             width: k-spacing(8);
-            border-bottom-width: 1px;
+            border-block-end-width: 1px;
         }
         .k-resize-w {
             width: .5em;
-            left: 0;
+            inset-inline-start: 0;
         }
         .k-resize-e {
             width: .5em;
-            right: 0;
+            inset-inline-end: 0;
         }
         .k-resize-w::before,
         .k-resize-e::before {
             height: k-spacing(8);
-            border-left-width: 1px;
+            border-inline-start-width: 1px;
         }
 
 
@@ -505,15 +509,15 @@
         .k-event-top-actions,
         .k-event-bottom-actions {
             position: absolute;
-            top: 0;
-            left: 0;
+            inset-block-start: 0;
+            inset-inline-start: 0;
             width: 100%;
             text-align: center;
         }
 
         .k-event-bottom-actions {
-            top: auto;
-            bottom: 0;
+            inset-block-start: auto;
+            inset-block-end: 0;
         }
     }
 
@@ -539,8 +543,8 @@
 
         > .k-icon {
             position: absolute;
-            top: 50%;
-            left: 50%;
+            inset-block-start: 50%;
+            inset-inline-start: 50%;
             transform: translate(-50%, -50%);
         }
     }
@@ -575,12 +579,12 @@
             position: absolute;
         }
         .k-label-top {
-            left: $kendo-scheduler-marquee-label-inset-x;
-            top: $kendo-scheduler-marquee-label-inset-y;
+            inset-inline-start: $kendo-scheduler-marquee-label-inset-x;
+            inset-block-start: $kendo-scheduler-marquee-label-inset-y;
         }
         .k-label-bottom {
-            right: $kendo-scheduler-marquee-label-inset-x;
-            bottom: $kendo-scheduler-marquee-label-inset-y;
+            inset-inline-end: $kendo-scheduler-marquee-label-inset-x;
+            inset-block-end: $kendo-scheduler-marquee-label-inset-y;
         }
 
         // Angle tingie
@@ -594,16 +598,16 @@
             height: 0;
         }
         &.k-first::before {
-            top: 0;
-            left: 0;
-            border-right-color: transparent;
-            border-bottom-color: transparent;
+            inset-block-start: 0;
+            inset-inline-start: 0;
+            border-inline-end-color: transparent;
+            border-block-end-color: transparent;
         }
         &.k-last::after {
-            bottom: 0;
-            right: 0;
-            border-left-color: transparent;
-            border-top-color: transparent;
+            inset-block-end: 0;
+            inset-inline-end: 0;
+            border-inline-start-color: transparent;
+            border-block-start-color: transparent;
         }
     }
 
@@ -674,9 +678,9 @@
 
         // hidden cells must have no layout
         .k-hidden {
-            padding-left: 0 !important; // stylelint-disable-line declaration-no-important
-            padding-right: 0 !important; // stylelint-disable-line declaration-no-important
-            border-right-width: 0 !important; // stylelint-disable-line declaration-no-important
+            padding-inline-start: 0 !important; // stylelint-disable-line declaration-no-important
+            padding-inline-end: 0 !important; // stylelint-disable-line declaration-no-important
+            border-inline-end-width: 0 !important; // stylelint-disable-line declaration-no-important
         }
 
         .k-scheduler-table-auto,
@@ -699,7 +703,7 @@
     .k-scheduler-agendaview {
 
         .k-scheduler-mark {
-            margin-right: .5em;
+            margin-inline-end: .5em;
             width: 1em;
             height: 1em;
             display: inline-block;
@@ -709,19 +713,19 @@
         .k-scheduler-table {
             th:first-child,
             td:first-child {
-                border-left-width: 1px;
+                border-inline-start-width: 1px;
             }
 
             td.k-first {
-                border-left-width: 0;
+                border-inline-start-width: 0;
             }
         }
 
         .k-task > .k-event-delete {
             color: inherit;
             position: absolute;
-            top: $kendo-scheduler-marquee-label-inset-y;
-            right: $kendo-scheduler-marquee-label-inset-y;
+            inset-block-start: $kendo-scheduler-marquee-label-inset-y;
+            inset-inline-end: $kendo-scheduler-marquee-label-inset-y;
             opacity: .5;
             visibility: hidden;
         }
@@ -733,11 +737,12 @@
         }
     }
     .k-scheduler-agendaday {
-        margin: 0 .2em 0 0;
+        margin: 0;
+        margin-inline-end: .2em;
         font-size: 3em;
         line-height: 1;
         font-weight: 400;
-        float: left;
+        float: inline-start;
     }
     .k-scheduler-agendaweek {
         display: block;
@@ -808,12 +813,12 @@
         }
 
         .k-day-indicator {
-            margin-top: $kendo-scheduler-yearview-indicator-calc-offset-top;
+            margin-block-start: $kendo-scheduler-yearview-indicator-calc-offset-top;
             width: $kendo-scheduler-yearview-indicator-size;
             height: $kendo-scheduler-yearview-indicator-size;
             border-radius: $kendo-scheduler-yearview-indicator-border-radius;
             position: absolute;
-            left: $kendo-scheduler-yearview-indicator-calc-offset-left;
+            inset-inline-start: $kendo-scheduler-yearview-indicator-calc-offset-left;
         }
     }
 
@@ -827,7 +832,7 @@
         color: inherit;
 
         .k-tooltip-title {
-            margin-bottom: $kendo-scheduler-tooltip-title-margin-y;
+            margin-block-end: $kendo-scheduler-tooltip-title-margin-y;
 
             .k-month {
                 font-size: $kendo-scheduler-tooltip-month-font-size;
@@ -922,116 +927,9 @@
 
     }
 
-
-
-    // Scheduler rtl
-    .k-rtl {
-        .k-scheduler-header th,
-        .k-scheduler-table td {
-            border-width: 0 1px 1px 0;
-        }
-
-        .k-scheduler-table {
-            td,
-            th {
-                &:first-child {
-                    border-right-width: 0;
-                }
-            }
-        }
-
-        .k-scheduler-times th {
-            border-width: 0 0 1px 1px;
-        }
-
-        .k-scheduler .k-scrollbar-v .k-scheduler-header-wrap {
-            border-right-width: 0;
-            border-left-width: 1px;
-        }
-
-        .k-event {
-            padding-right: 0;
-            padding-left: $kendo-scheduler-tooltip-event-padding-x;
-
-            .k-resize-w {
-                left: auto;
-                right: 0;
-            }
-
-            .k-resize-e {
-                right: auto;
-                left: 0;
-            }
-
-            .k-event-actions {
-                right: auto;
-                left: 2px;
-            }
-
-            .k-event-actions:first-child {
-                margin: $kendo-scheduler-rtl-indicators-margin;
-                float: right;
-            }
-        }
-        .k-scheduler-agendaview .k-task {
-
-            > .k-event-delete {
-                left: 2px;
-                right: auto;
-            }
-
-            .k-scheduler-mark {
-                margin-left: .5em;
-                margin-right: 0;
-            }
-
-        }
-
-        .k-scheduler-marquee .k-label-top {
-            left: auto;
-            right: 4px;
-        }
-
-        .k-scheduler-marquee .k-label-bottom {
-            left: 4px;
-            right: auto;
-        }
-
-        .k-scheduler-edit-form .k-scheduler-delete {
-            float: right;
-        }
-
-        .k-scheduler,
-        &.k-scheduler {
-
-            .k-scheduler-header-wrap {
-                border-right-width: 0;
-            }
-
-            .k-scheduler-agendaday {
-                float: right;
-                margin: 0 0 0 .2em;
-            }
-
-            .k-scheduler-agendaview .k-scheduler-table {
-                td:first-child,
-                th:first-child {
-                    border-left-width: 0;
-                }
-
-                tr + tr {
-                    td:first-child,
-                    th:first-child {
-                        border-right-width: 1px;
-                    }
-                }
-            }
-        }
-    }
-
     .k-safari {
         .k-scheduler-tooltip .k-tooltip-event:not(:last-child) {
-            margin-bottom: $kendo-scheduler-tooltip-event-gap;
+            margin-block-end: $kendo-scheduler-tooltip-event-gap;
         }
 
         .k-scheduler-yearview .k-calendar-view .k-month {

package/scss/components/scheduler/_variables.scss

@@ -97,7 +97,6 @@ $kendo-scheduler-event-template-padding-y: null !default;
 $kendo-scheduler-event-actions-inset-x: null !default;
 
 $kendo-scheduler-indicators-margin: null !default;
-$kendo-scheduler-rtl-indicators-margin: null !default;
 
 $kendo-scheduler-marquee-label-inset-x: null !default;
 $kendo-scheduler-marquee-label-inset-y: null !default;

package/scss/components/scroller/_layout.scss

@@ -13,8 +13,8 @@
         position: absolute;
         z-index: 1001;
         width: 100%;
-        top: 0;
-        left: 0;
+        inset-block-start: 0;
+        inset-inline-start: 0;
     }
 
 
@@ -37,7 +37,7 @@
     .km-widget .km-scroller-pull .km-icon {
         display: inline-block;
         height: 2rem;
-        margin-right: 1rem;
+        margin-inline-end: 1rem;
         vertical-align: middle;
         width: 2rem;
         font-size: 2rem;
@@ -73,13 +73,13 @@
 
     .km-vertical-scrollbar {
         height: 100%;
-        right: 2px;
-        top: 0;
+        inset-inline-end: 2px;
+        inset-block-start: 0;
     }
     .km-horizontal-scrollbar {
         width: 100%;
-        left: 0;
-        bottom: 2px;
+        inset-inline-start: 0;
+        inset-block-end: 2px;
     }
 
 }

package/scss/components/scrollview/_layout.scss

@@ -62,9 +62,9 @@
         padding: 0;
         margin: 0;
         position: absolute;
-        left: 0;
-        right: 0;
-        bottom: $kendo-scrollview-pager-offset;
+        inset-inline-start: 0;
+        inset-inline-end: 0;
+        inset-block-end: $kendo-scrollview-pager-offset;
         height: $kendo-scrollview-pager-height;
         text-align: center;
     }
@@ -120,8 +120,8 @@
             height: calc( #{$kendo-scrollview-pagebutton-size} + #{$kendo-scrollview-pager-item-spacing} );
             display: block;
             position: absolute;
-            top: 50%;
-            left: 50%;
+            inset-block-start: 50%;
+            inset-inline-start: 50%;
             transform: translate(-50%, -50%);
             pointer-events: initial;
             border-radius: 0;
@@ -134,7 +134,7 @@
         position: absolute;
         padding: 0;
         height: 60%;
-        top: 20%;
+        inset-block-start: 20%;
         text-decoration: none;
         user-select: none;
         cursor: pointer;

package/scss/components/signature/_layout.scss

@@ -17,7 +17,7 @@
             height: $kendo-signature-maximized-height;
 
             > .k-signature-line {
-                border-bottom-width: $kendo-signature-maximized-line-width;
+                border-block-end-width: $kendo-signature-maximized-line-width;
             }
         }
     }
@@ -32,8 +32,8 @@
 
     .k-signature-canvas {
         position: absolute;
-        top: 0;
-        left: 0;
+        inset-block-start: 0;
+        inset-inline-start: 0;
         width: 100%;
         height: 100%;
         display: block;
@@ -43,11 +43,11 @@
 
     .k-signature-line {
         position: absolute;
-        bottom: $kendo-signature-line-bottom-offset;
+        inset-block-end: $kendo-signature-line-bottom-offset;
         z-index: 2;
         pointer-events: none;
-        border-bottom-width: $kendo-signature-line-width;
-        border-bottom-style: $kendo-signature-line-style;
+        border-block-end-width: $kendo-signature-line-width;
+        border-block-end-style: $kendo-signature-line-style;
     }
 
     // Sizes

package/scss/components/signature/_theme.scss

@@ -6,7 +6,7 @@
     .k-signature {
 
         .k-signature-line {
-            border-bottom-color: $kendo-signature-line-color;
+            border-block-end-color: $kendo-signature-line-color;
         }
     }
 

package/scss/components/skeleton/_layout.scss

@@ -55,10 +55,10 @@
             &::after {
                 content: "";
                 position: absolute;
-                top: 0;
-                right: 0;
-                bottom: 0;
-                left: 0;
+                inset-block-start: 0;
+                inset-inline-end: 0;
+                inset-block-end: 0;
+                inset-inline-start: 0;
                 transform: translateX(-100%);
                 animation: k-skeleton-wave 1.6s linear .5s infinite;
             }