smart-webcomponents-react 25.0.1 → 25.0.3

package/source/styles/default/scss/smart.grid.scss

@@ -174,27 +174,28 @@ input[type=number] {
   }
 
   &:not(.smart-grid-column-border) {
-    &:after {
-      height: var(--smart-border-width);
-      width: 100%;
+    position: relative;
+
+    &::after {
       content: '';
       position: absolute;
-      bottom: 0px;
+      bottom: 0;
+      width: 100%;
+      height: var(--smart-border-width);
       background: var(--smart-grid-column-horizontal-border, var(--smart-border));
+    }
 
-      &:not(.smart-grid-column-border-collapse) {
-        &:before {
-          width: var(--smart-border-width);
-          height: 100%;
-          content: '';
-          position: absolute;
-          top: 0px;
-          left: 0px;
-          background: var(--smart-grid-column-vertical-border, var(--smart-border));
-        }
-      }
+    &:not(.smart-grid-column-border-collapse)::before {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: var(--smart-border-width);
+      height: 100%;
+      background: var(--smart-grid-column-vertical-border, var(--smart-border));
     }
   }
+
 }
 
 .smart-grid-column-menu {
@@ -402,11 +403,11 @@ input[type=number] {
     content: var(--smart-icon-resize-small);
   }
 
-    &.smart-icon-window-restore:before {
+  &.smart-icon-window-restore:before {
     content: var(--smart-icon-window-restore);
   }
 
-    &.smart-icon-window-maximize:before {
+  &.smart-icon-window-maximize:before {
     content: var(--smart-icon-window-maximize);
   }
 
@@ -529,30 +530,39 @@ input[type=number] {
   &.smart-icon-table-alt:before {
     content: var(--smart-icon-table-alt);
   }
+
   &.smart-icon-grid-alt:before {
     content: var(--smart-icon-grid-alt);
   }
+
   &.smart-icon-kanban:before {
     content: var(--smart-icon-kanban);
   }
+
   &.smart-icon-timeline:before {
     content: var(--smart-icon-timeline);
   }
+
   &.smart-icon-scheduler:before {
     content: var(--smart-icon-scheduler);
   }
+
   &.smart-icon-like:before {
     content: var(--smart-icon-like);
   }
+
   &.smart-icon-heart:before {
     content: var(--smart-icon-heart);
   }
+
   &.smart-icon-flag:before {
     content: var(--smart-icon-flag);
   }
+
   &.smart-icon-card:before {
     content: var(--smart-icon-card);
   }
+
   &.smart-icon-kanban-alt:before {
     content: var(--smart-icon-kanban-alt);
   }
@@ -642,7 +652,7 @@ input[type=number] {
     content: var(--smart-icon-contains);
   }
 
-  
+
   &.smart-icon-copy-record:before {
     content: var(--smart-icon-copy-record);
   }
@@ -755,9 +765,11 @@ input[type=number] {
   &.smart-icon-circle:before {
     content: var(--smart-icon-circle);
   }
+
   &.smart-icon-circle-empty:before {
     content: var(--smart-icon-circle-empty);
   }
+
   &.smart-icon-toggle-on:before {
     content: var(--smart-icon-toggle-on);
   }
@@ -772,7 +784,7 @@ input[type=number] {
 
   &.smart-icon-down:before {
     content: var(--smart-icon-up);
-    transform:rotate(180deg);
+    transform: rotate(180deg);
   }
 
   &.smart-icon-right:before {
@@ -922,7 +934,8 @@ input[type=number] {
 }
 
 smart-grid-row[edit] {
-    .smart-grid-cell-container {
+  .smart-grid-cell-container {
+
     &.near,
     &.far {
       z-index: 99;
@@ -1305,6 +1318,7 @@ smart-grid-row[edit] {
 
     &:focus {
       outline: none;
+
       .smart-input {
         background: var(--smart-ui-state-hover);
         color: var(--smart-ui-state-color-hover);
@@ -1733,6 +1747,7 @@ smart-grid-row[edit] {
   height: auto;
   z-index: 99;
 }
+
 .smart-grid-validation-error {
   position: absolute;
   background: var(--smart-error);
@@ -1820,7 +1835,7 @@ smart-grid-row[edit] {
     border-bottom-right-radius: 0px;
     border-top-right-radius: 0px;
     border-top-left-radius: 0px;
-  
+
     &.open {
       transform: scale(1) !important;
       opacity: 1;
@@ -1849,22 +1864,26 @@ smart-grid-row[edit] {
       margin-bottom: 10px;
       align-items: center;
       grid-template-columns: 1fr auto 1fr;
+
       .toggle-button {
         margin-left: 10px;
         margin-right: 10px;
         cursor: pointer;
+
         &:hover {
-          color:var(--smart-primary);
+          color: var(--smart-primary);
         }
       }
-        span:first-child {
-          border-bottom: 1px solid var(--smart-border);
-        }
-        span:last-child {
-          border-top: 1px solid var(--smart-border);
-        }
+
+      span:first-child {
+        border-bottom: 1px solid var(--smart-border);
+      }
+
+      span:last-child {
+        border-top: 1px solid var(--smart-border);
+      }
     }
-    
+
     &[mobile] {
       left: 0px !important;
       top: 0px !important;
@@ -1911,7 +1930,7 @@ smart-grid-row[edit] {
     &.smart-grid-side-panel {
       transform-origin: top right !important;
       transform: scaleX(0) !important;
-      
+
       &.open {
         transform: scaleX(1) !important;
       }
@@ -1920,7 +1939,7 @@ smart-grid-row[edit] {
     &.smart-grid-dialog-expand-row {
       width: 750px !important;
       height: 500px !important;
-   
+
       @media screen and (min-width: 1128px) {
         width: 1100px !important;
         height: 750px !important;
@@ -1929,11 +1948,11 @@ smart-grid-row[edit] {
       &.smart-grid-side-panel {
         transform-origin: top right !important;
         transform: scaleX(0) !important;
-        
+
         &.collapsed {
           width: 450px !important;
         }
-        
+
         &.open {
           transform: scaleX(1) !important;
         }
@@ -2139,6 +2158,7 @@ smart-grid-row[edit] {
           overflow: auto;
           grid-area: content;
           display: grid;
+
           &.many {
             display: grid;
             grid-template-columns: 1fr 1fr;
@@ -2161,7 +2181,7 @@ smart-grid-row[edit] {
             display: grid;
             grid-template-rows: 40px 40px 40px 40px 40px 1fr;
           }
-          
+
           .smart-user {
             position: relative;
             top: 10px;
@@ -2268,7 +2288,7 @@ smart-grid-row[edit] {
                     color: var(--smart-background-color);
                     border: none;
                   }
-              
+
                   box-shadow: none;
                 }
               }
@@ -2356,6 +2376,7 @@ smart-grid-row[edit] {
                 width: 150px !important;
               }
             }
+
             &.font-group {
               grid-column-gap: 10px;
 
@@ -2479,6 +2500,7 @@ smart-grid-row[edit] {
 
       &:focus {
         outline: none;
+
         .smart-grid-check-box-cell-editor {
           background: var(--smart-ui-state-hover);
           color: var(--smart-ui-state-color-hover);
@@ -2550,8 +2572,9 @@ smart-grid {
     height: 28px;
 
     &.insert {
-        transition: background 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+      transition: background 0.2s cubic-bezier(0.4, 0, 0.2, 1);
     }
+
     &.float {
       height: 24px;
       width: 24px;
@@ -2606,7 +2629,7 @@ smart-grid {
   }
 
   &[appearance_allow-hover] {
-  
+
     smart-grid-cell:not([focus]) {
       &:hover {
         &:not(.smart-add-new-column) {
@@ -2656,7 +2679,7 @@ smart-grid {
     &[focus] {
       &[appearance_show-selection-on-top] {
         smart-grid-row[focus] {
-          
+
           smart-grid-cell:not([editor]):not([header]),
           smart-grid-cell:not([editor]):not([header]) .smart-label {
             background: rgba(var(--smart-primary-rgb), 0.7) !important;
@@ -2667,7 +2690,8 @@ smart-grid {
       }
 
       smart-grid-row[focus] {
-        > .smart-grid-cell-container {
+        >.smart-grid-cell-container {
+
           smart-grid-cell:not([editor]):not([header]),
           smart-grid-cell:not([editor]):not([header]) .smart-label:not([style]) {
             background: rgba(var(--smart-primary-rgb), 0.7) !important;
@@ -2680,7 +2704,7 @@ smart-grid {
               background: var(--smart-primary);
             }
           }
-      }
+        }
       }
     }
   }
@@ -3256,9 +3280,9 @@ smart-grid {
           color: var(--smart-ui-state-color-hover);
           cursor: default;
         }
+      }
     }
   }
-  }
 
   &[appearance_show-column-header-drag-icon] {
     &[behavior_allow-column-reorder] {
@@ -3405,12 +3429,15 @@ smart-grid {
         smart-grid-cell[header]:not([detail]):not([group]):not(.smart-add-new-row) {
           width: 25px !important;
         }
+
         smart-grid-cell[detail][has-toggle-button] {
           &[selected] {
-            background:var(--smart-ui-state-hover) !important;
+            background: var(--smart-ui-state-hover) !important;
           }
+
           button.row-detail {
             visibility: inherit !important;
+
             &:after {
               content: var(--smart-icon-resize-full);
               font-size: 13px;
@@ -3951,8 +3978,9 @@ smart-grid-row {
   smart-grid-cell[header] {
     &.smart-decorate {
       >.smart-label {
-        padding-right: 5px; 
+        padding-right: 5px;
       }
+
       &.row-number:not(.smart-add-new-row) {
         &::before {
           border-radius: 5px;
@@ -3966,7 +3994,7 @@ smart-grid-row {
         }
       }
     }
-   
+
     &[freeze] {
       background: var(--smart-surface);
       color: var(--smart-surface-color);
@@ -4526,15 +4554,16 @@ smart-grid-cell {
     margin-top: -8px;
 
     @keyframes rotation {
-        0% {
-            transform: rotate(0deg);
-        }
-        100% {
-            transform: rotate(360deg);
-        }
-      } 
+      0% {
+        transform: rotate(0deg);
+      }
+
+      100% {
+        transform: rotate(360deg);
+      }
+    }
   }
-  
+
   &[role="rowheader"] {
     .smart-label {
       padding-left: 0px;
@@ -4542,7 +4571,7 @@ smart-grid-cell {
     }
   }
 
-  
+
   &.row-comments {
     .smart-label::after {
       content: var(--smart-icon-comment);
@@ -4552,9 +4581,7 @@ smart-grid-cell {
     }
   }
 
-  &.smart-readonly {
-    
-  }
+  &.smart-readonly {}
 
   smart-color-input {
     .smart-color-box {
@@ -4568,9 +4595,9 @@ smart-grid-cell {
     }
   }
 
-  line[highlight]  {
+  line[highlight] {
     stroke: var(--smart-secondary);
-  } 
+  }
 
   path[highlight],
   rect[highlight] {
@@ -4581,10 +4608,13 @@ smart-grid-cell {
     line {
       stroke: var(--smart-primary-color);
     }
-    path, rect {
+
+    path,
+    rect {
       fill: var(--smart-primary-color);
     }
   }
+
   .wrap {
     white-space: normal;
     display: flex;
@@ -4599,12 +4629,18 @@ smart-grid-cell {
     text-overflow: ellipsis;
     white-space: normal;
     word-break: break-word;
-    line-height: 1.5; 
+    line-height: 1.5;
 
-    p, h1, h2, h3, h4, h5, h6 {
+    p,
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6 {
       margin-top: 3px;
       margin-bottom: 3px;
-    
+
       &:first-child {
         margin-top: 0px;
       }
@@ -4664,14 +4700,14 @@ smart-grid-cell {
     font-style: italic;
     --smart-ui-state-hover: var(--smart-surface);
     --smart-ui-state-color-hover: var(--smart-surface-color);
-    cursor:pointer;
+    cursor: pointer;
 
     >div {
       display: block !important;
       background-color: var(--smart-surface);
     }
 
-   
+
     &[selected] {
       background: var(--smart-background) !important;
       color: var(--smart-background-color) !important;
@@ -4942,14 +4978,16 @@ smart-grid-cell {
       border: 1px solid transparent;
 
       &[disabled] {
-        .nav{
+        .nav {
           pointer-events: none;
           visibility: hidden;
         }
+
         .smart-filter-input-type {
           pointer-events: none;
           visibility: hidden;
         }
+
         .smart-grid-icon {
           visibility: hidden;
           pointer-events: none;
@@ -5276,9 +5314,10 @@ smart-grid-cell {
     }
 
     &[template="richText"] {
+
       &[focus] .smart-label,
       .smart-label:hover {
-      
+
         &:after {
           color: var(--smart-background-color) !important;
           font-family: var(--smart-font-family-icon);
@@ -5286,7 +5325,7 @@ smart-grid-cell {
           background: inherit;
           color: var(--smart-primary);
           position: absolute;
-          font-size:12px;
+          font-size: 12px;
           right: 5px;
           line-height: 1;
           top: calc(50% - 6px);
@@ -5376,6 +5415,7 @@ smart-grid-cell {
       .smart-icon-reload {
         visibility: hidden !important;
       }
+
       &:hover {
         .smart-icon-reload {
           visibility: visible !important;
@@ -5383,7 +5423,7 @@ smart-grid-cell {
       }
     }
 
-    
+
     &[template="url"],
     &[template="email"],
     &[template="modifiedTime"],
@@ -5399,31 +5439,32 @@ smart-grid-cell {
   }
 
   &[template="checkBox"] {
- 
+
     &:hover {
+
       .smart-input[icon],
       .smart-input[color] {
         background: var(--smart-background) !important;
         border: 1px solid var(--smart-border) !important;
-        color: transparent;    
+        color: transparent;
       }
     }
 
     .smart-input[color] {
       color: transparent;
 
-       &[checked] {
+      &[checked] {
         color: var(--smart-check-template-color);
-       }
-       
+      }
 
-       &:not([icon]) {
+
+      &:not([icon]) {
         &[checked] {
           background: var(--smart-check-template-color) !important;
           border-color: var(--smart-check-template-color) !important;
           color: var(--smart-check-template-forecolor) !important;
-         }
-       }
+        }
+      }
     }
 
     .smart-input[icon] {
@@ -5436,36 +5477,43 @@ smart-grid-cell {
           content: var(--smart-icon-heart);
         }
       }
+
       &[icon="cancel"] {
         &:after {
           content: var(--smart-icon-cancel);
         }
       }
+
       &[icon="flag"] {
         &:after {
           content: var(--smart-icon-flag);
         }
       }
+
       &[icon="star"] {
         &:after {
           content: var(--smart-icon-star);
         }
       }
+
       &[icon="circle"] {
         &:after {
           content: var(--smart-icon-circle);
         }
       }
+
       &[icon="bell"] {
         &:after {
           content: var(--smart-icon-bell);
         }
       }
+
       &[icon="like"] {
         &:after {
           content: var(--smart-icon-like);
         }
       }
+
       &[icon="check"] {
         &:after {
           content: var(--smart-icon-check);
@@ -5478,6 +5526,7 @@ smart-grid-cell {
       justify-content: center;
       align-items: center;
       cursor: default;
+
       .smart-input {
         cursor: pointer;
       }
@@ -5650,7 +5699,7 @@ smart-grid-cell {
   >.smart-label:not(.smart-input) {
     width: 100%;
     height: 100%;
-  
+
     &.comments::after {
       content: '';
       width: 10px;
@@ -5811,11 +5860,11 @@ smart-grid-cell {
     background: var(--smart-grid-view-bar-background);
     --smart-background: var(--smart-grid-view-bar-background);
     border-right: 1px solid var(--smart-border);
-  
+
     &.smart-mobile {
       z-index: 99;
       box-shadow: var(--smart-elevation-4);
-    }  
+    }
   }
 
   smart-list-item[checked] {
@@ -5840,16 +5889,17 @@ smart-grid-cell {
     .view-label {
       display: flex;
       padding: 10px;
-      padding-left:20px;
+      padding-left: 20px;
       width: 100%;
       font-weight: bold;
       justify-content: space-between;
       padding-right: 16px;
       cursor: pointer;
-     
+
       .smart-icon-sort-down {
         font-weight: bold;
       }
+
       &.collapsed {
         .smart-icon-sort-down {
           transform: rotate(180deg);
@@ -5905,7 +5955,7 @@ smart-grid-cell {
 
     .smart-grid-view-storage {
       overflow: hidden;
-   
+
       smart-list-box .smart-list-item-label-element {
         width: 100%;
 
@@ -6026,11 +6076,12 @@ smart-menu {
   &.smart-grid-column-filter-menu.filter-excel {
     smart-menu-item[level="1"] {
       .smart-menu-item-label-container {
-      padding: 0px !important;
-      margin: 0px !important;
-    }
+        padding: 0px !important;
+        margin: 0px !important;
+      }
     }
   }
+
   &.smart-grid-views-menu[checkboxes][checkable],
   &.smart-grid-column-chooser-menu[checkboxes][checkable] {
     &[disable-auto-check] {
@@ -6146,6 +6197,7 @@ smart-menu {
   --smart-input-drop-down-menu-width {
     width: 98px;
   }
+
   .default-samples-container {
     display: flex;
   }
@@ -6177,9 +6229,9 @@ smart-menu {
   flex: 1 1 auto;
   margin-left: 8px;
   margin-right: 8px;
-  height:  30px;
+  height: 30px;
   cursor: pointer;
-  
+
   .smart-votes-bar,
   .smart-votes-bar-frame {
     background: var(--smart-check-template-color) !important;
@@ -6190,6 +6242,7 @@ smart-menu {
     bottom: 5px;
   }
 }
+
 .smart-votes-cell-component {
   height: 100%;
   cursor: pointer;
@@ -6200,6 +6253,7 @@ smart-menu {
     display: flex;
     align-items: center;
   }
+
   .smart-vote-button {
     margin-left: 8px;
     flex: 0 0 20px;
@@ -6209,36 +6263,39 @@ smart-menu {
     border-radius: 50%;
     color: var(--smart-check-template-forecolor) !important;
     border: 1px solid var(--smart-check-template-color) !important;
+
     &.voted {
       background: var(--smart-check-template-color) !important;
     }
   }
 }
 
-.smart-votes-bar-animate .smart-votes-bar, 
+.smart-votes-bar-animate .smart-votes-bar,
 .smart-votes-bar-animate .smart-votes-bar-frame {
   transition: all .2s ease-in-out;
 }
 
 .smart-reaction-tooltip {
-    display: flex;
-    gap: 4px;
-    position: absolute;
-    visibility: hidden;
-    opacity: 0;
-    transition: opacity 0.3s ease, transform 0.3s ease;
-    background: var(--smart-surface);
-    color: var(--smart-surface-color);
-    z-index: 10;
-    padding: 5px;
-    pointer-events: none;
+  display: flex;
+  gap: 4px;
+  position: absolute;
+  visibility: hidden;
+  opacity: 0;
+  transition: opacity 0.3s ease, transform 0.3s ease;
+  background: var(--smart-surface);
+  color: var(--smart-surface-color);
+  z-index: 10;
+  padding: 5px;
+  pointer-events: none;
 }
 
 .smart-reaction-tooltip.show {
   visibility: visible;
   opacity: 1;
-  pointer-events: auto; /* Allows interaction when visible */
-  transform: translateY(0); /* Smoother appearance */
+  pointer-events: auto;
+  /* Allows interaction when visible */
+  transform: translateY(0);
+  /* Smoother appearance */
 }
 
 .smart-reaction-tooltip span {
@@ -6250,7 +6307,8 @@ smart-menu {
 
 /* Pulsing effect on hover */
 .smart-reaction-tooltip span:hover {
-  animation: pulse .7s infinite ease-in-out; /* Pulsing effect on hover */
+  animation: pulse .7s infinite ease-in-out;
+  /* Pulsing effect on hover */
 }
 
 /* Pulsing keyframes */
@@ -6258,9 +6316,11 @@ smart-menu {
   0% {
     transform: scale(1);
   }
+
   50% {
     transform: scale(1.2);
   }
+
   100% {
     transform: scale(1);
   }
@@ -6270,7 +6330,7 @@ smart-menu {
   padding: 3px 5px;
   font-size: 14px;
   display: flex;
-  font-size:var(--smart-font-size);
+  font-size: var(--smart-font-size);
   align-items: center;
   gap: 5px;
   margin-top: 5px;
@@ -6290,13 +6350,14 @@ smart-menu {
 
 smart-grid[editing_enabled][selection_allow-cell-selection][selection_enabled] {
   smart-grid-cell[data-type="string"][template="tags"]:not([editor]):not(.smart-grid-summary-row-cell):not(.smart-add-new-row):not([readonly]):not(.smart-readonly) {
+
     &:hover,
     &[focus] {
       .smart-label {
         padding-right: 30px;
       }
 
-        .smart-label:after {
+      .smart-label:after {
         content: var(--smart-icon-arrow-down);
         position: absolute;
         right: 7px;
@@ -6307,12 +6368,13 @@ smart-grid[editing_enabled][selection_allow-cell-selection][selection_enabled] {
         cursor: pointer;
       }
     }
-    
+
   }
 }
 
 smart-grid[editing_enabled][editing_allow-dynamic-buttons][selection_allow-cell-selection][selection_enabled] {
   smart-grid-cell[data-type="date"]:not([editor]):not(.smart-grid-summary-row-cell):not(.smart-add-new-row):not([readonly]):not(.smart-readonly) {
+
     &:hover,
     &[focus] {
       .smart-label.align-right {
@@ -6335,11 +6397,13 @@ smart-grid[editing_enabled][editing_allow-dynamic-buttons][selection_allow-cell-
 
 smart-grid[editing_enabled][selection_allow-cell-selection][selection_enabled][editing_allow-dynamic-buttons] {
   smart-grid-cell[data-type="number"]:not([editor]):not([template]):not(.smart-grid-summary-row-cell):not(.smart-add-new-row):not([readonly]):not(.smart-readonly) {
+
     &:hover,
     &[focus] {
       .smart-label.align-right {
         padding-right: 30px;
       }
+
       .smart-label:after {
         content: var(--smart-icon-arrow-down);
         position: absolute;
@@ -6351,7 +6415,8 @@ smart-grid[editing_enabled][selection_allow-cell-selection][selection_enabled][e
         font-size: 14px;
         cursor: pointer;
       }
-        .smart-label:before {
+
+      .smart-label:before {
         content: var(--smart-icon-arrow-up);
         position: absolute;
         right: 7px;
@@ -6365,9 +6430,8 @@ smart-grid[editing_enabled][selection_allow-cell-selection][selection_enabled][e
     }
   }
 }
-.marching-ants {
 
-}
+.marching-ants {}
 
 .marching-ants::after {
   content: "";
@@ -6377,7 +6441,7 @@ smart-grid[editing_enabled][selection_allow-cell-selection][selection_enabled][e
   right: -3px;
   bottom: -3px;
   pointer-events: none;
-  background-image: linear-gradient(90deg, rgba(255, 255, 255, 0.0) 50%, rgba(255,255,255, 0.0) 50%), linear-gradient(175deg, rgba(255, 255, 255, 0.6) 50%, rgba(var(--smart-primary-rgb), 0.6) 50%), linear-gradient(175deg, rgba(255, 255, 255, 0.6) 50%, rgba(var(--smart-primary-rgb), 0.6) 50%), linear-gradient(90deg, rgba(255, 255, 255, 0.0) 50%, rgba(255,255,255, 0) 50%);
+  background-image: linear-gradient(90deg, rgba(255, 255, 255, 0.0) 50%, rgba(255, 255, 255, 0.0) 50%), linear-gradient(175deg, rgba(255, 255, 255, 0.6) 50%, rgba(var(--smart-primary-rgb), 0.6) 50%), linear-gradient(175deg, rgba(255, 255, 255, 0.6) 50%, rgba(var(--smart-primary-rgb), 0.6) 50%), linear-gradient(90deg, rgba(255, 255, 255, 0.0) 50%, rgba(255, 255, 255, 0) 50%);
   background-position: top, left, right, bottom;
   background-repeat: repeat-x, repeat-y, repeat-y, repeat-x;
   background-size: 10px 2px, 2px 10px, 2px 10px, 10px 2px;
@@ -6396,11 +6460,11 @@ smart-grid[editing_enabled][selection_allow-cell-selection][selection_enabled][e
   right: -3px;
   bottom: -3px;
   pointer-events: none;
-  background-image: linear-gradient(90deg, rgba(255, 255, 255, 0.6) 50%, rgba(var(--smart-primary-rgb), 0.6) 50%), linear-gradient(175deg, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0) 50%), linear-gradient(175deg, rgba(255, 255, 255, 0) 50%, rgba(255,255,255, 0) 50%), linear-gradient(90deg, rgba(255, 255, 255, 0.6) 50%, rgba(var(--smart-primary-rgb), 0.6) 50%);
+  background-image: linear-gradient(90deg, rgba(255, 255, 255, 0.6) 50%, rgba(var(--smart-primary-rgb), 0.6) 50%), linear-gradient(175deg, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0) 50%), linear-gradient(175deg, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0) 50%), linear-gradient(90deg, rgba(255, 255, 255, 0.6) 50%, rgba(var(--smart-primary-rgb), 0.6) 50%);
   background-position: top, left, right, bottom;
   background-repeat: repeat-x, repeat-y, repeat-y, repeat-x;
   background-size: 10px 2px, 2px 10px, 2px 10px, 10px 2px;
-  animation: marqueeAnimate  var(--alt-duration, 12s) linear infinite;
+  animation: marqueeAnimate var(--alt-duration, 12s) linear infinite;
   mask-composite: exclude;
   -webkit-mask-composite: destination-out;
   box-sizing: border-box;
@@ -6412,12 +6476,23 @@ smart-grid[editing_enabled][selection_allow-cell-selection][selection_enabled][e
 }
 
 @keyframes marqueeAnimate {
-  0% {background-position: 0 0, 0 0, 100% 0, 0 100%;}
-100% {background-position: 100% 0, 0 -100%, 100% 100%, -100% 100%;}
+  0% {
+    background-position: 0 0, 0 0, 100% 0, 0 100%;
+  }
+
+  100% {
+    background-position: 100% 0, 0 -100%, 100% 100%, -100% 100%;
+  }
 }
+
 @keyframes ants {
-  0% { background-position: 0 0; }
-  100% { background-position: 4px 0; }
+  0% {
+    background-position: 0 0;
+  }
+
+  100% {
+    background-position: 4px 0;
+  }
 }