devextreme-themebuilder 23.1.2-beta → 23.1.3

package/data/scss/widgets/base/calendar/_mixins.scss

@@ -11,20 +11,16 @@
 ) {
   .dx-calendar {
     width: $calendar-width;
-    min-width: $calendar-width;
     height: $calendar-height;
-    min-height: $calendar-height;
     background-color: $calendar-bg;
     gap: $calendar-element-padding;
 
     &.dx-calendar-with-footer {
       height: $calendar-height + $calendar-element-padding + $footer-button-height;
-      min-height: $calendar-height + $calendar-element-padding + $footer-button-height;
     }
 
     &.dx-calendar-multiview {
       width: $calendar-width * 2;
-      min-width: $calendar-width * 2;
     }
 
     &.dx-invalid {
@@ -46,24 +42,6 @@
   $header-color,
 ) {
   .dx-calendar-body {
-    table {
-      .dx-week-number-header {
-        font-size: $cell-font-size;
-        width: 2.5em;
-      }
-
-      .dx-calendar-week-number-cell {
-        color: $week-number-cell-color;
-        background-color: $week-number-cell-bg;
-        width: 2em;
-        margin-right: 0.5em;
-
-        .dx-rtl & {
-          margin-left: 0.5em;
-        }
-      }
-    }
-
     thead {
       tr {
         height: 2em;
@@ -78,22 +56,41 @@
       tr {
         &:first-of-type {
           .dx-calendar-week-number-cell {
-            border-top-left-radius: $week-number-cell-border-radius;
-            border-top-right-radius: $week-number-cell-border-radius;
+            span {
+              border-start-start-radius: $week-number-cell-border-radius;
+              border-start-end-radius: $week-number-cell-border-radius;
+            }
           }
         }
 
         &:last-of-type {
           .dx-calendar-week-number-cell {
-            border-bottom-left-radius: $week-number-cell-border-radius;
-            border-bottom-right-radius: $week-number-cell-border-radius;
+            span {
+              border-end-start-radius: $week-number-cell-border-radius;
+              border-end-end-radius: $week-number-cell-border-radius;
+            }
           }
         }
       }
     }
 
-    td {
+    .dx-week-number-header {
       font-size: $cell-font-size;
+      width: 2.5em;
+    }
+  }
+
+  .dx-calendar-cell {
+    font-size: $cell-font-size;
+  }
+
+  .dx-calendar-week-number-cell {
+    color: $week-number-cell-color;
+    width: 2em;
+
+    span {
+      background-color: $week-number-cell-bg;
+      inset-inline-start: 0;
     }
   }
 }
@@ -103,7 +100,7 @@
   $cell-text-color,
   $base-border-radius,
   $base-accent,
-  $cell-hover-bg-color,
+  $cell-hover-bg,
   $cell-hover-color,
   $cell-active-bg,
   $cell-selected-bg,
@@ -111,6 +108,8 @@
   $cell-contoured-border-color,
   $calendar-cell-other-color,
   $calendar-cell-other-hover-color,
+  $calendar-cell-hover-border-color,
+  $calendar-cell-range-border-radius,
 ) {
   .dx-calendar-cell {
     color: $cell-text-color;
@@ -141,7 +140,7 @@
 
     &.dx-state-hover {
       span {
-        background-color: $cell-hover-bg-color;
+        background-color: $cell-hover-bg;
         color: $cell-hover-color;
       }
     }
@@ -165,82 +164,6 @@
       }
     }
 
-    &.dx-calendar-cell-in-range,
-    &.dx-calendar-cell-in-range.dx-state-hover,
-    &.dx-calendar-cell-in-range.dx-state-active {
-      &::before {
-        width: 100%;
-        border-radius: 0;
-      }
-    }
-
-    &.dx-calendar-range-start-date,
-    &.dx-calendar-range-start-date.dx-state-hover,
-    &.dx-calendar-range-start-date.dx-state-active {
-      &::before {
-        width: 50%;
-        inset-inline-start: 50%;
-        inset-inline-end: 0;
-      }
-    }
-
-    &.dx-calendar-range-end-date,
-    &.dx-calendar-range-end-date.dx-state-hover,
-    &.dx-calendar-range-end-date.dx-state-active {
-      &::before {
-        width: 50%;
-      }
-    }
-
-    &.dx-state-hover,
-    &.dx-state-active {
-      &::before {
-        width: calc(50% + 1em);
-        border-top-right-radius: 50%;
-        border-bottom-right-radius: 50%;
-      }
-    }
-
-    &.dx-calendar-cell-in-range {
-      &::before {
-        height: 2em;
-        inset-inline-start: 0;
-        inset-inline-end: 0;
-        width: 100%;
-        background-color: $cell-hover-bg-color;
-      }
-
-      &.dx-calendar-cell-range-hover-start {
-        &::before {
-          width: calc(50% + 1em);
-          inset-inline-start: auto;
-          inset-inline-end: 0;
-          border-top-left-radius: $cell-border-radius;
-          border-bottom-left-radius: $cell-border-radius;
-          border-top-right-radius: 0;
-          border-bottom-right-radius: 0;
-        }
-      }
-
-      &.dx-calendar-cell-range-hover-end {
-        &::before {
-          width: calc(50% + 1em);
-          inset-inline-start: 0;
-          inset-inline-end: 0;
-          border-top-left-radius: 0;
-          border-bottom-left-radius: 0;
-          border-top-right-radius: $cell-border-radius;
-          border-bottom-right-radius: $cell-border-radius;
-        }
-      }
-
-      &.dx-calendar-cell-range-hover-start.dx-calendar-cell-range-hover-end {
-        &::before {
-          content: none;
-        }
-      }
-    }
-
     &.dx-calendar-other-view,
     &.dx-calendar-empty-cell {
       color: $calendar-cell-other-color;
@@ -260,11 +183,32 @@
     }
 
     &.dx-calendar-other-view {
+      &::before,
+      &::after {
+        content: none;
+      }
+
       &.dx-calendar-range-start-date,
       &.dx-calendar-range-end-date,
-      &.dx-calendar-cell-in-range {
-        &::before {
-          content: none;
+      &.dx-calendar-cell-in-range,
+      &.dx-calendar-cell-range-hover {
+        &.dx-state-hover,
+        &.dx-state-active {
+          span {
+            color: $calendar-cell-other-hover-color;
+          }
+        }
+
+        &.dx-state-hover {
+          span {
+            background-color: $cell-hover-bg;
+          }
+        }
+
+        &.dx-state-active {
+          span {
+            background-color: $cell-active-bg;
+          }
         }
 
         span {
@@ -294,3 +238,141 @@
   }
 }
 
+@mixin dx-calendar-cell-in-range-mixin(
+  $pseudo: "::before",
+  $cell-hover-bg,
+  $calendar-cell-hover-border-color,
+  $calendar-cell-range-border-radius,
+  $calendar-range-cell-border-width,
+  $cell: '.dx-calendar-cell-in-range',
+  $startCell: '.dx-calendar-range-start-date',
+  $endCell: '.dx-calendar-range-end-date',
+) {
+  #{$cell} {
+    &#{$pseudo} {
+      content: "";
+      position: absolute;
+      z-index: 1;
+      height: 2em;
+      inset-inline-start: 0;
+      inset-inline-end: 0;
+      width: 100%;
+      background-color: $cell-hover-bg;
+      border-width: $calendar-range-cell-border-width;
+      border-style: dashed;
+      border-color: $calendar-cell-hover-border-color transparent;
+    }
+
+    &#{$startCell},
+    &#{$endCell},
+    &.dx-calendar-cell-start,
+    &.dx-calendar-cell-end,
+    &.dx-calendar-cell-start-in-row,
+    &.dx-calendar-cell-end-in-row {
+      &#{$pseudo} {
+        width: calc(50% + 1em);
+      }
+    }
+
+    &#{$startCell} {
+      &#{$pseudo} {
+        inset-inline-start: auto;
+        border-start-start-radius: $calendar-cell-range-border-radius;
+        border-end-start-radius: $calendar-cell-range-border-radius;
+        border-inline-start-color: $calendar-cell-hover-border-color;
+      }
+
+      &#{$endCell} {
+        &#{$pseudo} {
+          content: none;
+        }
+      }
+    }
+
+    &#{$endCell} {
+      &#{$pseudo} {
+        border-start-end-radius: $calendar-cell-range-border-radius;
+        border-end-end-radius: $calendar-cell-range-border-radius;
+        border-inline-end-color: $calendar-cell-hover-border-color;
+      }
+    }
+
+    &.dx-calendar-cell-start-in-row {
+      &#{$pseudo} {
+        inset-inline-start: auto;
+        border-start-start-radius: $calendar-cell-range-border-radius;
+        border-end-start-radius: $calendar-cell-range-border-radius;
+        border-inline-start-color: $calendar-cell-hover-border-color;
+      }
+
+      &#{$endCell},
+      &.dx-calendar-cell-end {
+        &#{$pseudo} {
+          width: 2em;
+          inset-inline-start: calc(50% - 1em);
+          inset-inline-end: auto;
+        }
+      }
+    }
+
+    &.dx-calendar-cell-end-in-row {
+      &#{$pseudo} {
+        border-start-end-radius: $calendar-cell-range-border-radius;
+        border-end-end-radius: $calendar-cell-range-border-radius;
+        border-inline-end-color: $calendar-cell-hover-border-color;
+      }
+
+      &#{$startCell} {
+        &#{$pseudo} {
+          width: 2em;
+          inset-inline-start: calc(50% - 1em);
+          inset-inline-end: auto;
+        }
+      }
+    }
+
+    &.dx-calendar-cell-start {
+      &#{$pseudo} {
+        inset-inline-start: auto;
+        border-start-start-radius: $calendar-cell-range-border-radius;
+        border-end-start-radius: $calendar-cell-range-border-radius;
+        border-inline-start-color: $calendar-cell-hover-border-color;
+      }
+
+      &#{$endCell} {
+        &#{$pseudo} {
+          width: 2em;
+          inset-inline-start: calc(50% - 1em);
+          inset-inline-end: auto;
+          border-start-end-radius: $calendar-cell-range-border-radius;
+          border-end-end-radius: $calendar-cell-range-border-radius;
+          border-inline-end-color: $calendar-cell-hover-border-color;
+        }
+      }
+
+      &.dx-calendar-cell-end-in-row {
+        &#{$pseudo} {
+          width: 2em;
+          inset-inline-start: calc(50% - 1em);
+          inset-inline-end: auto;
+        }
+      }
+    }
+
+    &.dx-calendar-cell-end {
+      &#{$pseudo} {
+        border-start-end-radius: $calendar-cell-range-border-radius;
+        border-end-end-radius: $calendar-cell-range-border-radius;
+        border-inline-end-color: $calendar-cell-hover-border-color;
+      }
+
+      &#{$startCell} {
+        &#{$pseudo} {
+          width: 2em;
+          inset-inline-start: calc(50% - 1em);
+          inset-inline-end: auto;
+        }
+      }
+    }
+  }
+}

package/data/scss/widgets/base/dateRangeBox/_index.scss

@@ -3,8 +3,39 @@
 .dx-daterangebox {
   display: flex;
 
+  .dx-texteditor-with-label,
+  .dx-texteditor-with-floating-label {
+    margin-top: 0;
+  }
+
+  &.dx-editor-outlined {
+    .dx-datebox {
+      &.dx-start-datebox,
+      &.dx-end-datebox {
+        &.dx-editor-outlined {
+          border: 0;
+          box-shadow: none;
+
+          &.dx-texteditor-with-label,
+          &.dx-texteditor-with-floating-label {
+            .dx-texteditor-label {
+              .dx-label,
+              .dx-label-before,
+              .dx-label-after {
+                margin: 0;
+                border: 0;
+                clip-path: none;
+                box-shadow: none;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+
   .dx-datebox {
-    flex-grow: 1;
+    width: 100%;
 
     &.dx-editor-underlined {
       border-bottom: 0;
@@ -22,45 +53,6 @@
       }
     }
 
-    &.dx-editor-outlined {
-      border: 0;
-      box-shadow: none;
-
-      .dx-texteditor-label {
-        .dx-label-before,
-        .dx-label,
-        .dx-label-after {
-          border: 0 !important; // stylelint-disable-line declaration-no-important
-          margin: 0 !important; // stylelint-disable-line declaration-no-important
-          box-shadow: none !important; // stylelint-disable-line declaration-no-important
-          clip-path: none;
-        }
-      }
-
-      &.dx-state-focused,
-      &.dx-state-hover,
-      &.dx-state-focused.dx-state-hover {
-        .dx-texteditor-label {
-          .dx-label-before,
-          .dx-label,
-          .dx-label-after {
-            clip-path: none;
-          }
-        }
-      }
-
-      &.dx-texteditor-with-floating-label,
-      &.dx-texteditor-with-label {
-        margin-top: 0;
-      }
-
-      &.dx-state-readonly {
-        &.dx-state-hover {
-          box-shadow: none;
-        }
-      }
-    }
-
     &.dx-editor-filled {
       background-color: transparent;
       border: 0;
@@ -74,6 +66,11 @@
       }
     }
   }
+
+  &.dx-texteditor-empty .dx-clear-button-area {
+    display: block;
+    visibility: hidden;
+  }
 }
 
 .dx-daterangebox-separator {

package/data/scss/widgets/base/dateRangeBox/_mixins.scss

@@ -1,6 +1,15 @@
 @use "sass:math";
 
-@mixin dx-outlined-mixin($base-bg, $horizontal-padding, $texteditor-label-font-size, $label-offset-y, $label-height) {
+@mixin dx-outlined-mixin(
+  $base-bg,
+  $horizontal-padding,
+  $texteditor-label-font-size,
+  $label-offset-y,
+  $label-height,
+  $label-line-height,
+  $label-background-height,
+  $label-background-top,
+) {
   .dx-daterangebox-with-label,
   .dx-daterangebox-with-floating-label {
     &.dx-editor-outlined {
@@ -8,60 +17,59 @@
 
       .dx-texteditor-label {
         .dx-label {
-          span {
+          position: relative;
+
+          &::before {
+            content: '';
             background-color: $base-bg;
-            box-shadow: $horizontal-padding 0 $base-bg, -$horizontal-padding 0 $base-bg !important; // stylelint-disable-line declaration-no-important
-            height: $label-height;
+            width: 100%;
+            position: absolute;
+            height: $label-background-height;
+            top: $label-background-top;
+            margin-left: -$horizontal-padding;
+            margin-right: -$horizontal-padding;
           }
         }
       }
+    }
+  }
 
-      &.dx-state-hover {
-        .dx-texteditor-label {
-          .dx-label {
-            padding: 0 $horizontal-padding;
+  .dx-daterangebox {
+    &.dx-daterangebox-with-floating-label {
+      &.dx-editor-outlined {
+        &.dx-dropdowneditor-active,
+        &.dx-state-focused,
+        &.dx-invalid {
+          .dx-datebox.dx-editor-outlined {
+            .dx-texteditor-label {
+              .dx-label {
+                padding: 0 $horizontal-padding;
 
-            span {
-              height: $label-height;
-            }
-          }
-        }
-      }
-
-      &.dx-dropdowneditor-active,
-      &.dx-dropdowneditor-active.dx-state-focused,
-      &.dx-dropdowneditor-active.dx-state-focused.dx-state-hover,
-      &.dx-state-focused,
-      &.dx-state-focused.dx-state-hover {
-        .dx-texteditor-label {
-          .dx-label {
-            padding: 0 $horizontal-padding;
+                &::before {
+                  background-color: $base-bg;
+                }
 
-            span {
-              transform: translate(0, -$label-offset-y);
-              font-size: $texteditor-label-font-size;
-              margin-top: 0;
-              top: 0;
-              height: $label-height;
-              line-height: $texteditor-label-font-size;
+                span {
+                  transform: translate(0, -$label-offset-y);
+                  font-size: $texteditor-label-font-size;
+                  margin-top: 0;
+                  top: 0;
+                  height: $label-height;
+                  line-height: $label-line-height;
+                }
+              }
             }
           }
         }
-      }
-
-      .dx-datebox {
-        &.dx-invalid,
-        &.dx-invalid.dx-state-hover,
-        &.dx-invalid.dx-state-focused,
-        &.dx-state-disabled,
-        &.dx-state-readonly,
-        &.dx-state-readonly.dx-state-hover,
-        &.dx-state-readonly.dx-state-focused {
-          .dx-label {
-            padding: 0 $horizontal-padding;
 
-            span {
-              height: $label-height;
+        .dx-datebox {
+          &.dx-texteditor-empty {
+            .dx-texteditor-label {
+              .dx-label {
+                &::before {
+                  background-color: transparent;
+                }
+              }
             }
           }
         }
@@ -82,14 +90,17 @@
       }
 
       &.dx-dropdowneditor-active,
-      &.dx-state-focused {
-        .dx-texteditor-label {
-          transform: $label-transform;
-          font-size: $texteditor-label-font-size;
-          height: $label-height;
-          line-height: $line-height;
-          top: 0;
-          margin-top: 0;
+      &.dx-state-focused,
+      &.dx-invalid {
+        .dx-datebox {
+          .dx-texteditor-label {
+            transform: $label-transform;
+            font-size: $texteditor-label-font-size;
+            height: $label-height;
+            line-height: $line-height;
+            top: 0;
+            margin-top: 0;
+          }
         }
       }
     }
@@ -105,34 +116,15 @@
       }
 
       &.dx-dropdowneditor-active,
-      &.dx-state-focused {
-        .dx-texteditor-label {
-          font-size: $texteditor-label-font-size;
-          height: $label-height;
-          line-height: $line-height;
-          top: $label-position-top;
-          margin-top: 0;
-        }
-      }
-    }
-  }
-}
-
-@mixin dx-invalid-mixin($texteditor-invalid-faded-border-color, $texteditor-invalid-focused-border-color) {
-  &.dx-editor-outlined,
-  &.dx-editor-filled,
-  &.dx-editor-underlined {
-    &.dx-invalid {
-      .dx-datebox {
-        &.dx-state-hover {
-          &::before {
-            border-color: $texteditor-invalid-faded-border-color;
-          }
-        }
-
-        &.dx-state-focused {
-          &::before {
-            border-color: $texteditor-invalid-focused-border-color;
+      &.dx-state-focused,
+      &.dx-invalid {
+        .dx-datebox {
+          .dx-texteditor-label {
+            font-size: $texteditor-label-font-size;
+            height: $label-height;
+            line-height: $line-height;
+            top: $label-position-top;
+            margin-top: 0;
           }
         }
       }