playbook_ui 14.18.0.pre.alpha.revert4567revert4553PLAY2056ATcolbordercolors7469 → 14.18.0.pre.rc.0

data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.scss

@@ -8,31 +8,10 @@
 @import "../tokens/screen_sizes";
 @import "../tokens/shadows";
 @import "../tokens/positioning";
-@import "./scss_partials/advanced_table_sticky_mixin";
 
 .pb_advanced_table {
   $border-color: 1px solid $border_light;
 
-  // Base vertical border color variable setup
-  --column-border-color: #{$border_light};
-
-  // Define color tokens once
-  $border_color_options: (
-    "text_lt_default": $text_lt_default,
-    "text_lt_light": $text_lt_light,
-    "text_lt_lighter": $text_lt_lighter,
-    "text_dk_default": $text_dk_default,
-    "text_dk_light": $text_dk_light,
-    "text_dk_lighter": $text_dk_lighter
-  );
-
-  // Generate classes for each color option
-  @each $color_name, $color_value in $border_color_options {
-    &.column-group-border-#{$color_name} {
-      --column-border-color: #{$color_value};
-    }
-  }
-
   [id$="-span"] {
     word-wrap: normal;
   }
@@ -114,8 +93,8 @@
       border-right: 1px solid $border_light !important;
     }
     .table-header-cells-custom {
-      text-align: center;
-      [class^="pb_checkbox_kit"] .pb_checkbox_label {
+      text-align:center;
+      [class^=pb_checkbox_kit] .pb_checkbox_label {
         padding-left: 0px;
       }
     }
@@ -125,7 +104,7 @@
     }
     // Right align header content of first data column in selectable row no subrow setup
     &.selectable-rows-enabled {
-      tr {
+      tr { 
         th:nth-child(2),
         .pb_flex_kit_orientation_row_justify_content_start_align_items_center_spacing_none.gap_none {
           justify-content: flex-end;
@@ -143,20 +122,13 @@
       }
 
       // Set fixed width for checkbox column
-      &.table-header-cells-custom,
+      &.table-header-cells-custom, 
       &.checkbox-cell.checkbox-cell-header {
         width: 40px !important;
         min-width: 40px !important;
         box-sizing: border-box !important;
       }
     }
-    .expand-by-depth-dropdown-wrapper {
-      position: unset !important;
-    }
-    .expand-by-depth-dropdown {
-      width: unset !important;
-      text-align: left;
-    }
   }
 
   .pb_advanced_table_body {
@@ -173,7 +145,7 @@
     .checkbox-cell {
       display: flex;
       justify-content: center;
-      [class^="pb_checkbox_kit"] .pb_checkbox_label {
+      [class^=pb_checkbox_kit] .pb_checkbox_label {
         padding-left: 0px;
       }
     }
@@ -201,7 +173,7 @@
       }
     }
     td {
-      [class^="pb_text_input_kit"] .text_input_wrapper input {
+      [class^=pb_text_input_kit] .text_input_wrapper input {
         padding: 0 $space_xxs;
         font-size: 14px;
         text-align: right;
@@ -258,12 +230,12 @@
     max-height: 1920px;
     overflow-y: auto;
   }
-
+  
   // Fullscreen
   &.advanced-table-allow-fullscreen {
     transition: all 0.3s ease;
   }
-
+  
   &.advanced-table-fullscreen {
     background-color: $bg_light;
     box-sizing: border-box;
@@ -276,10 +248,7 @@
     z-index: $z_10;
 
     .pb_table {
-      th,
-      td,
-      div,
-      button {
+      th, td, div, button {
         font-size: calc(100%);
       }
       box-sizing: border-box;
@@ -297,7 +266,7 @@
       }
     }
   }
-
+  
   .advanced-table-fullscreen-header {
     background-color: $white;
     height: 44px;
@@ -366,133 +335,13 @@
     }
   }
 
-  // First column separator/border
+  // Vertical separator
   .table-header-cells:first-child,
   .table-header-cells-custom:first-child,
   td:first-child,
   .pb_table_td:first-child,
   .checkbox-cell.checkbox-cell-header:first-child {
-    box-shadow: 1px 0px 0px 0px var(--column-border-color) !important;
-  }
-
-  // Color for collapsible trail
-  .collapsible-trail {
-    background-color: $border_light !important;
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    width: 2px;
-  }
-
-  // Make sure all horizontal borders use the default border color
-  tr, th, td {
-    border-top-color: $border_light !important;
-    border-bottom-color: $border_light !important;
-  }
-
-  // Apply border colors when columnGroupBorderColor is set
-  &[class*="column-group-border-"] {
-    // For top-level column groups
-    .pb_advanced_table_header {
-      // The main column group headers
-      > tr:first-child {
-        th[colspan]:not([colspan="1"]):not(:last-child) {
-          border-right: 1px solid var(--column-border-color) !important;
-        }
-      }
-
-      // Subgroup headers
-      > tr:nth-child(2) {
-        th[colspan]:not([colspan="1"]):not(:last-child) {
-          border-right: 1px solid var(--column-border-color) !important;
-        }
-
-        // Last cell in each subgroup
-        th.last-header-cell:not(:last-child) {
-          border-right: 1px solid var(--column-border-color) !important;
-        }
-      }
-
-      // Individual column headers at subgroup boundaries
-      > tr:last-child {
-        // Last cell in each subgroup
-        th.last-header-cell:not(:last-child) {
-          border-right: 1px solid var(--column-border-color) !important;
-        }
-      }
-    }
-
-    // For data cells at column group boundaries
-    .pb_advanced_table_body {
-      // Apply to cells that are at column group boundaries
-      td.last-cell:not(:last-child),
-      .pb_table_td.last-cell:not(:last-child) {
-        border-right: 1px solid var(--column-border-color) !important;
-      }
-
-      // Virtualized row cells at column group boundaries
-      tr.virtualized-table-row {
-        td.last-cell:not(:last-child) {
-          border-right: 1px solid var(--column-border-color) !important;
-        }
-      }
-    }
-
-    // Sub-row headers
-    .toggle-content {
-      td {
-        border-bottom: 1px solid $border_light !important;
-      }
-    }
-  }
-
-  // Restore vertical border styling when verticalBorder is true
-  .pb_table[data-vertical-border="true"] {
-    .pb_advanced_table_header {
-      > tr:not(:first-child) {
-        th:not(:last-child) {
-          border-right: 1px solid $border_light !important;
-        }
-      }
-    }
-
-    .pb_advanced_table_body {
-      td:not(:last-child),
-      .pb_table_td:not(:last-child) {
-        border-right: 1px solid $border_light !important;
-      }
-    }
-
-    tr.virtualized-table-row {
-      td:not(:last-child) {
-        border-right: 1px solid $border_light !important;
-      }
-    }
-
-    // When both verticalBorder AND columnGroupBorderColor are set,
-    // override the default border-light with the custom color
-    &.pb_advanced_table[class*="column-group-border-"] {
-      .pb_advanced_table_header {
-        > tr:not(:first-child) {
-          th:not(:last-child) {
-            border-right: 1px solid var(--column-border-color) !important;
-          }
-        }
-      }
-
-      .pb_advanced_table_body {
-        td:not(:last-child),
-        .pb_table_td:not(:last-child) {
-          border-right: 1px solid var(--column-border-color) !important;
-        }
-      }
-
-      tr.virtualized-table-row {
-        td:not(:last-child) {
-          border-right: 1px solid var(--column-border-color) !important;
-        }
-      }
-    }
+    box-shadow: 1px 0px 0px 0px $border_light !important;
   }
 
   @include chrome_styles($border-color);
@@ -515,74 +364,88 @@
     height: auto;
   }
 
-  // Mixin to apply sticky column styles for different color modes and themes
-  @mixin apply-sticky-colors($theme) {
-    @each $color_name, $color_value in $border_color_options {
-      &.column-group-border-#{$color_name} {
-        @if $theme == "light" {
-          @include advanced-table-sticky-mixin(
-            $color_value,
-            $white,
-            lighten($silver, $opacity_7)
-          );
-        } @else if $theme == "dark" {
-          @include advanced-table-sticky-mixin(
-            $color_value,
-            $bg_dark_card,
-            $bg_dark
-          );
-        }
-      }
-    }
-  }
-
-  // Sticky Left Columns Styling
-  &[class*="advanced-table-sticky-left-columns"] {
-    overflow-x: scroll;
-    .sticky-left {
-      position: sticky !important;
-      z-index: 2;
-      background-color: $white;
-      box-shadow: $shadow_deep;
-    }
-    @include advanced-table-sticky-mixin(
-      $border_light,
-      $white,
-      lighten($silver, $opacity_7)
-    );
-
-    // Apply border colors for sticky columns
-    @include apply-sticky-colors("light");
+  .collapsible-trail {
+    background-color: $border_light;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    width: 2px;
   }
 
   // Responsive Styles
   @media only screen and (max-width: $screen-xl-min) {
     &[class*="advanced-table-responsive-scroll"] {
+      border-radius: 4px;
+      box-shadow: 1px 0 0 0px $border_light,
+                  -1px 0 0 0px $border_light;
+      display: block;
       overflow-x: auto;
       width: 100%;
+      [class^=pb_table].table-sm.table-card thead tr th:first-child,
+      [class^=pb_table].table-sm:not(.no-hover).table-card tbody tr td:first-child {
+        border-left-width: 0px !important;
+      }
+      [class^=pb_table].table-sm.table-card thead tr th:last-child,
+      [class^=pb_table].table-sm:not(.no-hover).table-card tbody tr td:last-child {
+        border-right-width: 0px;
+      }
+      [class^=pb_table].table-sm.table-card tbody tr:last-child td:first-child,
+      [class^=pb_table].table-sm.table-card tbody tr:last-child td:last-child {
+          border-radius: 0 0 0 0;
+        }
+      .table-header-cells:first-child,
+      td:first-child,
+      .pb_table_td:first-child,
+      .checkbox-cell.checkbox-cell-header:first-child,
+      [class*="pinned-left"] {
+          background-color: $white;
+          box-shadow: $shadow_deep !important;
+          position: sticky !important;
+          left: 0;
+          z-index: 2;
+      }
+      .bg-silver td:first-child {
+        background-color: lighten($silver, $opacity_7);
+      }
+      .bg-white td:first-child {
+          background-color: $white;
+      }
 
-      // These are the responsive borders that should NOT inherit the custom color
-      @include advanced-table-sticky-mixin(
-        $border_light,
-        $white,
-        lighten($silver, $opacity_7)
-      );
-
-      // Override any columnGroupBorderColor inheritance for responsive borders
-      .sticky-left {
-        box-shadow: $shadow_deep !important;
+      .virtualized-table-row {
+        &.bg-silver td:first-child {
+          background-color: lighten($silver, $opacity_7);
+        }
+        &.bg-white td:first-child {
+          background-color: $white;
+        }
+        &.bg-row-selection td:first-child {
+          background-color: $info_subtle;
+        }
       }
 
-      .pb_advanced_table_header,
-      .pb_advanced_table_body {
-        th.sticky-left,
-        td.sticky-left {
-          border-right: 1px solid $border_light !important;
+      .row-selection-actions-card {
+        border-right-width: 0px;
+        border-left-width: 0px;
+        position: sticky;
+        top: 0;
+        left: 0;
+        border-radius: unset;
+      }
+      .checkbox-cell {
+        display: table-cell !important;
+      }
+      .sticky-header {
+        thead {
+          th:first-child {
+            box-shadow: 1px 0 10px -2px $border_light !important;
+          }
+        }
+        .pb_advanced_table_header {
+          box-shadow: none !important;
         }
       }
     }
   }
-
   @media only screen and (min-width: $screen-xl-min) {
     &[class*="advanced-table-responsive-scroll"] {
       overflow-x: visible;
@@ -590,20 +453,6 @@
   }
 
   &.dark {
-    // Override default border color for dark mode
-    --column-border-color: #{$border_dark};
-
-    // Dark mode default border colors for trails and horizontal borders
-    .collapsible-trail {
-      background-color: $border_dark !important;
-    }
-
-    // Make sure all horizontal borders use the default border color in dark mode
-    tr, th, td {
-      border-top-color: $border_dark !important;
-      border-bottom-color: $border_dark !important;
-    }
-
     .bg-white {
       background: $bg_dark_card;
     }
@@ -631,115 +480,20 @@
       }
     }
 
-    .table-header-cells:first-child,
-    .table-header-cells-custom:first-child,
-    td:first-child,
-    .pb_table_td:first-child,
-    .checkbox-cell.checkbox-cell-header:first-child {
-      box-shadow: 1px 0px 0px 0px var(--column-border-color) !important;
+    .table-header-cells:first-child, td:first-child, .pb_table_td:first-child {
+      box-shadow: 1px 0px 0px 0px $border_dark !important;
     }
 
-    // Apply border colors in dark mode
-    &[class*="column-group-border-"] {
-      // For top-level column groups (ENROLLMENT DATA, PERFORMANCE DATA)
-      .pb_advanced_table_header {
-        // The main column group headers - NOT the last column
-        > tr:first-child {
-          th[colspan]:not([colspan="1"]):not(:last-child) {
-            border-right: 1px solid var(--column-border-color) !important;
-          }
-        }
-
-        // Subgroup headers
-        > tr:nth-child(2) {
-          th[colspan]:not([colspan="1"]):not(:last-child) {
-            border-right: 1px solid var(--column-border-color) !important;
-          }
-
-          // Last cell in each subgroup
-          th.last-header-cell:not(:last-child) {
-            border-right: 1px solid var(--column-border-color) !important;
-          }
-        }
-
-        // Individual column headers at subgroup boundaries
-        > tr:last-child {
-          // Last cell in each subgroup
-          th.last-header-cell:not(:last-child) {
-            border-right: 1px solid var(--column-border-color) !important;
-          }
-        }
-      }
-
-      // For data cells at column group boundaries in dark mode
-      .pb_advanced_table_body {
-        // Apply to cells that are at column group boundaries
-        td.last-cell:not(:last-child),
-        .pb_table_td.last-cell:not(:last-child) {
-          border-right: 1px solid var(--column-border-color) !important;
-        }
-
-        // Virtualized row cells at column group boundaries
-        tr.virtualized-table-row {
-          td.last-cell:not(:last-child) {
-            border-right: 1px solid var(--column-border-color) !important;
-          }
-        }
-      }
-
-      // Sub-row headers
-      .toggle-content {
-        td {
-          border-bottom: 1px solid $border_dark !important;
-        }
-      }
-    }
-
-    // Restore vertical border styling in dark mode when verticalBorder is true
-    .pb_table[data-vertical-border="true"] {
-      .pb_advanced_table_header {
-        > tr:not(:first-child) {
-          th:not(:last-child) {
-            border-right: 1px solid $border_dark !important;
-          }
-        }
-      }
-
-      .pb_advanced_table_body {
-        td:not(:last-child),
-        .pb_table_td:not(:last-child) {
-          border-right: 1px solid $border_dark !important;
-        }
-      }
-
-      // When both verticalBorder AND columnGroupBorderColor are set in dark mode,
-      // override the default border-dark with the custom color
-      &.pb_advanced_table[class*="column-group-border-"] {
-        .pb_advanced_table_header {
-          > tr:not(:first-child) {
-            th:not(:last-child) {
-              border-right: 1px solid var(--column-border-color) !important;
-            }
-          }
-        }
-
-        .pb_advanced_table_body {
-          td:not(:last-child),
-          .pb_table_td:not(:last-child) {
-            border-right: 1px solid var(--column-border-color) !important;
-          }
-        }
-      }
+    .collapsible-trail {
+      background-color: $border_dark !important;
     }
 
-    .sort-button-icon,
-    .header-sort-button > div,
-    .pb_th_link {
+    .sort-button-icon, .header-sort-button > div, .pb_th_link {
       color: $white !important;
     }
 
     .gray-icon {
-      color: $text_dk_light !important;
+      color:  $text_dk_light !important;
     }
 
     .sticky-header {
@@ -761,6 +515,15 @@
       }
     }
 
+    // Vertical separator
+    .table-header-cells:first-child,
+    .table-header-cells-custom:first-child,
+    td:first-child,
+    .pb_table_td:first-child,
+    .checkbox-cell.checkbox-cell-header:first-child {
+      box-shadow: 1px 0px 0px 0px $border_dark !important;
+    }
+
     // Fullscreen
     &.advanced-table-fullscreen {
       background: $bg_dark;
@@ -773,48 +536,63 @@
       z-index: $z_10;
     }
 
-    &[class*="advanced-table-sticky-left-columns"] {
-      .sticky-left {
-        background-color: $bg_dark;
-      }
-      @include advanced-table-sticky-mixin(
-        $border_dark,
-        $bg_dark_card,
-        $bg_dark
-      );
-    }
-
     // Dark Mode Responsive Styles
     @media only screen and (max-width: $screen-xl-min) {
       &[class*="advanced-table-responsive-scroll"] {
-        .sticky-header {
-          thead {
-            th:first-child {
-              background: $bg_dark_card;
-            }
-          }
+        border-radius: 4px;
+        box-shadow: 1px 0 0 0px $border_dark,
+                    -1px 0 0 0px $border_dark;
+        display: block;
+        overflow-x: scroll;
+        width: 100%;
+        [class^=pb_table].table-sm.table-card thead tr th:first-child,
+        [class^=pb_table].table-sm:not(.no-hover).table-card tbody tr td:first-child {
+          border-left-width: 0px;
         }
-
-        // These are the responsive borders that should NOT inherit the custom color
-        @include advanced-table-sticky-mixin(
-          $border_dark,
-          $bg_dark_card,
-          $bg_dark
-        );
-
-        // Override any columnGroupBorderColor inheritance for responsive borders in dark mode
-        .sticky-left {
+        [class^=pb_table].table-sm.table-card thead tr th:last-child,
+        [class^=pb_table].table-sm:not(.no-hover).table-card tbody tr td:last-child {
+          border-right-width: 0px;
+        }
+        [class^=pb_table].table-sm.table-card tbody tr:last-child td:first-child,
+        [class^=pb_table].table-sm.table-card tbody tr:last-child td:last-child {
+            border-radius: 0 0 0 0;
+        }
+        .table-header-cells:first-child,
+        td:first-child,
+        .pb_table_td:first-child,
+        .checkbox-cell.checkbox-cell-header:first-child,
+        [class*="pinned-left"] {
+          background: $bg_dark_card;
+          border-right: $border_dark;
           box-shadow: $shadow_deep !important;
+          position: sticky !important;
+        }
+        .bg-silver td:first-child {
+          background-color: $bg_dark;
+        }
+        .bg-white td:first-child {
+          background-color: $bg_dark_card;
         }
 
-        .pb_advanced_table_header,
-        .pb_advanced_table_body {
-          th.sticky-left,
-          td.sticky-left {
-            border-right: 1px solid $border_dark !important;
+        // Dark mode virtualized rows
+        .virtualized-table-row {
+          &.bg-silver td:first-child {
+            background-color: $bg_dark;
+          }
+          &.bg-white td:first-child {
+            background-color: $bg_dark_card;
+          }
+        }
+
+        .sticky-header {
+          thead {
+            th:first-child {
+              background: $bg_dark;
+              box-shadow: 1px 0 10px -2px $border_dark !important;
+            }
           }
         }
       }
     }
   }
-}
+}