@syncfusion/ej2-fabric-theme 34.2.8 → 35.1.37

package/styles/grid/_layout.scss

@@ -310,6 +310,10 @@
       & .e-cc-searchdiv span.e-ccsearch-icon.e-icons {
         float: left;
       }
+
+      &:not(.sf-grid) .e-draganddrop.e-dragclone {
+        transform: translateX(-100%);
+      }
     }
 
     .e-searchclear {
@@ -1399,7 +1403,15 @@
       white-space: nowrap;
       width: auto;
     }
- 
+
+    &:not(.e-rtl) .e-rowcell {
+      text-align: left;
+    }
+
+    &:not(.e-rtl) td.e-summarycell {
+      text-align: left;
+    }
+
     th.e-detailcell td.e-rowcell.e-rightalign,
     td.e-rowcell.e-rightalign,
     th.e-headercell.e-rightalign .e-headercelldiv,
@@ -1483,6 +1495,9 @@
       .e-gridfooter tr.e-summaryrow .e-summarycell:empty {
         height: $grid-rowcell-line-height + $grid-content-padding + $grid-content-padding;
       }
+      .e-gridcontent .e-empty-overlay-mode tr.e-emptyrow td:not(.e-indentcell):first-child:empty {
+        height: 1px;
+      }
     }
 
     @if $grid-skin == 'fluent2' or $grid-skin == 'tailwind3' {
@@ -1637,6 +1652,36 @@
       @include grid-line-height-padding-styles($grid-rowcell-line-height, .7em);
     }
 
+    .e-empty-row-sticky-content {
+      position: sticky;
+      inset: 0;
+      display: grid;
+      place-items: center;
+      pointer-events: none;
+      z-index: 1;
+      justify-content: center;
+      min-height: calc(100% - 1px);
+    }
+
+    .e-empty-row-sticky {
+      text-align: center;
+      padding: .7em;
+    }
+
+    .e-empty-overlay-mode .e-emptyrow,
+    .e-empty-overlay-mode .e-lastrowcell {
+      height: 1px;
+    }
+
+    .e-empty-overlay-mode .e-emptyrow td {
+      padding: 0;
+      border: none;
+    }
+
+    .e-empty-overlay-mode .e-emptyrow .e-focused {
+      box-shadow: unset;
+    }
+
     &.e-responsive {
       .e-rowcell,
       .e-headercelldiv {
@@ -2866,6 +2911,10 @@
       width: auto;
     }
 
+    &:not(.e-rtl) .e-groupcaption {
+      text-align: left;
+    }
+
     .e-virtualtable .e-groupcaption {
       @include grid-line-height-padding-styles($grid-rowcell-line-height, $grid-content-padding $grid-content-right-padding);
     }
@@ -2987,7 +3036,8 @@
 
     .e-row {
       .e-input-group .e-input.e-field,
-      .e-input-focus .e-input.e-field {
+      .e-input-focus .e-input.e-field,
+      .e-field.e-formula-edit {
         @include grid-edit-input-styles($grid-font-size, $grid-edit-input-padding-bottom, $grid-edit-input-padding-top);
       }
   
@@ -4220,6 +4270,221 @@
           }
         }
       }
+
+      /* Find and Highlight Feature Styles */
+
+      .e-find-highlight {
+        background-color: $grid-find-highlight-bg;
+        color: $grid-find-highlight-color;
+        font-weight: 500;
+        border-radius: 2px;
+      }
+
+      /* stylelint-disable */
+      mark.e-find-highlight {
+        padding: 0 !important;
+      }
+
+      /* stylelint-enable */
+
+      .e-find-input-container {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        padding: 8px 12px;
+        background-color: transparent;
+      }
+
+      .e-find-input-container,
+      .e-find-bar-wrapper {
+        width: 100%;
+        max-width: 100%;
+      }
+
+      .e-find-bar-wrapper {
+        display: flex;
+        align-items: center;
+        gap: 0;
+        border: 1px solid $grid-find-bar-border-color;
+        border-radius: 4px;
+        padding: 0;
+        background-color: $grid-find-bg;
+        height: 28px;
+        flex: 1;
+        max-width: 300px;
+      }
+
+      .e-find-bar-wrapper:focus-within,
+      .e-find-bar-wrapper.e-input-focus {
+        border-color: $grid-find-bar-focus-color;
+        box-shadow: 0 0 0 1px $grid-find-bar-focus-color;
+      }
+
+      .e-find-bar-wrapper:focus-within .e-find-input,
+      .e-find-bar-wrapper.e-input-focus .e-find-input {
+        background-color: transparent;
+      }
+
+      .e-find-input {
+        flex: 1;
+        border: none;
+        outline: none;
+        padding: 4px 8px;
+        font-size: 13px;
+        font-family: inherit;
+        background-color: $grid-find-bg;
+        color: $grid-find-input-color;
+        min-width: 80px;
+        height: 100%;
+      }
+
+      .e-find-input::placeholder {
+        color: $grid-find-color;
+      }
+
+      .e-find-counter {
+        white-space: nowrap;
+        font-size: 12px;
+        color: $grid-find-text-color;
+        font-weight: 500;
+        padding: 0 8px;
+        min-width: 40px;
+        text-align: center;
+        border-left: 1px solid $grid-find-button-hover-bg;
+        height: 100%;
+        display: flex;
+        align-items: center;
+      }
+
+      .e-find-nav-buttons {
+        display: flex;
+        align-items: center;
+        gap: 0;
+        height: 100%;
+        border-left: 1px solid $grid-find-button-hover-bg;
+        flex: 0 0 auto;
+      }
+
+      .e-find-nav-btn {
+        min-width: 22px;
+        width: 22px;
+        height: 100%;
+        padding: 0;
+        border: none;
+        background-color: transparent;
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        color: $grid-find-text-color;
+        outline: none;
+        transition: background-color .15s ease;
+        font-size: 12px;
+      }
+
+      .e-find-nav-btn:hover:not(:disabled) {
+        background-color: $grid-find-button-hover-bg;
+      }
+
+      .e-find-nav-btn:active:not(:disabled) {
+        background-color: $grid-find-button-hover-bg;
+      }
+
+      .e-find-nav-btn:disabled {
+        cursor: not-allowed;
+        opacity: .4;
+        color: $grid-find-color;
+      }
+
+      .e-find-nav-btn:focus {
+        background-color: $grid-find-button-hover-bg;
+      }
+
+      .e-find-nav-btn .e-icons {
+        font-size: 10px;
+        line-height: 1;
+        display: inline-block;
+        font-style: normal;
+        font-weight: normal;
+        font-family: 'e-icons';
+      }
+
+      .e-find-clear-btn {
+        min-width: 22px;
+        width: 22px;
+        height: 100%;
+        padding: 0;
+        border: none;
+        background-color: transparent;
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        color: $grid-find-text-color;
+        outline: none;
+        transition: background-color .15s ease;
+        font-size: 14px;
+      }
+
+      .e-find-clear-btn:hover {
+        background-color: $grid-find-button-hover-bg;
+        color: $grid-find-clear-hover-color;
+      }
+
+      .e-find-clear-btn:active {
+        background-color: $grid-find-button-hover-bg;
+      }
+
+      .e-find-clear-btn:disabled {
+        cursor: not-allowed;
+        opacity: .5;
+        color: $grid-find-color;
+      }
+
+      .e-find-highlight-active {
+        background-color: $grid-find-highlight-active-bg;
+        padding: 0 2px;
+        font-weight: 600;
+        border-radius: 2px;
+        box-shadow: 0 0 4px $grid-find-highlight-active-shadow;
+      }
+
+      /* stylelint-disable */
+      mark.e-find-highlight-active {
+        padding: 0 !important;
+      }
+      /* stylelint-enable */
+
+      .e-find-input[disabled] {
+        background-color: $grid-find-button-hover-bg;
+        color: $grid-find-input-color;
+        cursor: not-allowed;
+      }
+
+      /* Responsive adjustments */
+      @media (max-width: 768px) {
+        .e-find-input-container {
+          gap: 4px;
+          padding: 0 4px;
+        }
+
+        .e-find-wrapper {
+          min-width: 150px;
+        }
+
+        .e-find-input-group {
+          padding: 3px 6px;
+        }
+
+        .e-find-input {
+          font-size: 12px;
+        }
+
+        .e-find-counter {
+          font-size: 11px;
+          padding: 0 2px;
+        }
+      }
     }
   }
 }
@@ -4391,3 +4656,159 @@
   }
 }
 /* stylelint-enable function-url-quotes */
+
+/* Formula Editor Mixins */
+@mixin formula-border-styles($border, $bg) {
+  background: $bg;
+  &.e-formula-range-top {
+    border-top: 1px solid $border;
+  }
+  &.e-formula-range-bottom {
+    border-bottom: 1px solid $border;
+  }
+  &.e-formula-range-left {
+    border-left: 1px solid $border;
+  }
+  &.e-formula-range-right {
+    border-right: 1px solid $border;
+  }
+}
+
+@mixin formula-cell-styles($border, $bg) {
+  background: $bg;
+  box-shadow: $border;
+}
+
+/* Formula Editor Styles */
+.e-grid tr.e-row td.e-rowcell {
+  .e-formula-edit.e-field.e-input.e-input-group {
+    display: block;
+    height: $formula-edit-normal-height;
+    padding-left: $formula-edit-padding-left;
+    width: 100%;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    padding-top: $formula-edit-padding-top;
+
+    &.e-ralign {
+      padding-right: $formula-edit-padding-right;
+    }
+  }
+  &.e-formula-error {
+    position: relative;
+  }
+  &.e-formula-error::after {
+    content: '';
+    position: absolute;
+    top: -6px;
+    right: -6px;
+    width: 12px;
+    height: 12px;
+    background: $formula-error-background;
+    transform: rotate(45deg);
+    pointer-events: none;
+    z-index: 1;
+  }
+}
+
+.e-col-hidden {
+  display: none;
+}
+
+.e-header-col-ref {
+  color: var(--color-sf-icon-color);
+  margin-right: 6px;
+  font-weight: 500;
+}
+
+/* Formula Range Border Styles */
+.e-grid tr.e-row td.e-rowcell.e-formula-range {
+  &.e-formula-border-range-1 {
+    @include formula-border-styles($formula-cell-border-1, $formula-cell-background-1);
+  }
+
+  &.e-formula-border-range-2 {
+    @include formula-border-styles($formula-cell-border-2, $formula-cell-background-2);
+  }
+
+  &.e-formula-border-range-3 {
+    @include formula-border-styles($formula-cell-border-3, $formula-cell-background-3);
+  }
+
+  &.e-formula-border-range-4 {
+    @include formula-border-styles($formula-cell-border-4, $formula-cell-background-4);
+  }
+
+  &.e-formula-border-range-5 {
+    @include formula-border-styles($formula-cell-border-5, $formula-cell-background-5);
+  }
+
+  &.e-formula-border-range-6 {
+    @include formula-border-styles($formula-cell-border-6, $formula-cell-background-6);
+  }
+
+  &.e-formula-border-range-7 {
+    @include formula-border-styles($formula-cell-border-7, $formula-cell-background-7);
+  }
+}
+
+/* Formula Token Styles */
+.e-formula-token-1 {
+  color: $formula-cell-border-1;
+}
+
+.e-formula-token-2 {
+  color: $formula-cell-border-2;
+}
+
+.e-formula-token-3 {
+  color: $formula-cell-border-3;
+}
+
+.e-formula-token-4 {
+  color: $formula-cell-border-4;
+}
+
+.e-formula-token-5 {
+  color: $formula-cell-border-5;
+}
+
+.e-formula-token-6 {
+  color: $formula-cell-border-6;
+}
+
+.e-formula-token-7 {
+  color: $formula-cell-border-7;
+}
+
+/* Formula Cell Styles */
+.e-grid tr.e-row td.e-rowcell {
+  &.e-formula-cell-1:not(.e-formula-range) {
+    @include formula-cell-styles($grid-formula-cell-border-1, $formula-cell-background-1);
+  }
+
+  &.e-formula-cell-2:not(.e-formula-range) {
+    @include formula-cell-styles($grid-formula-cell-border-2, $formula-cell-background-2);
+  }
+
+  &.e-formula-cell-3:not(.e-formula-range) {
+    @include formula-cell-styles($grid-formula-cell-border-3, $formula-cell-background-3);
+  }
+
+  &.e-formula-cell-4:not(.e-formula-range) {
+    @include formula-cell-styles($grid-formula-cell-border-4, $formula-cell-background-4);
+  }
+
+  &.e-formula-cell-5:not(.e-formula-range) {
+    @include formula-cell-styles($grid-formula-cell-border-5, $formula-cell-background-5);
+  }
+
+  &.e-formula-cell-6:not(.e-formula-range) {
+    @include formula-cell-styles($grid-formula-cell-border-6, $formula-cell-background-6);
+  }
+
+  &.e-formula-cell-7:not(.e-formula-range) {
+    @include formula-cell-styles($grid-formula-cell-border-7, $formula-cell-background-7);
+  }
+}

package/styles/grid/_theme.scss

@@ -433,6 +433,8 @@
         td.e-active.e-rowcell:not(.e-updatedtd),
         td.e-rowdragdropcell.e-active:not(.e-updatedtd),
         td.e-pindentcell.e-active:not(.e-updatedtd),
+        td.e-detailrowexpand.e-active:not(.e-updated),
+        td.e-detailrowcollapse.e-active:not(.e-updated),
         td.e-rowcell:not(.e-cellselectionbackground):not(.e-active):not(.e-updatedtd):not(.e-indentcell).e-columnselection:hover,
         td.e-rowcell:not(.e-updatedtd):not(.e-indentcell).e-columnselection:hover {
           background: $grid-row-selection-hover-bg-color;
@@ -902,7 +904,8 @@
     .e-content td.e-detailrowcollapse:not(.e-menu-item):not(.e-editedbatchcell),
     .e-content td.e-detailrowexpand:not(.e-menu-item):not(.e-editedbatchcell),
     .e-content th.e-detailcell:not(.e-menu-item):not(.e-editedbatchcell),
-    tr.e-emptyrow td:not(.e-menu-item):not(.e-editedbatchcell)):is(:focus, :focus-visible) {
+    tr.e-emptyrow td:not(.e-menu-item):not(.e-editedbatchcell),
+    .e-find-counter, .e-find-clear-btn, .e-find-next-btn, .e-find-prev-btn):is(:focus, :focus-visible) {
         box-shadow: $grid-cell-focus-shadow;
       }