playbook_ui 12.19.0.pre.alpha.movemarkdown639 → 12.20.0.pre.alpha.movemarkdown668

data/app/pb_kits/playbook/pb_table/styles/_mobile.scss

@@ -0,0 +1,125 @@
+@import "../../tokens/border_radius";
+@import "../../tokens/positioning";
+@import "../../pb_caption/caption_mixin";
+
+@media only screen and (max-width: $screen-xs-max) {
+  [class^=pb_table] {
+    &.table-sm.table-responsive-collapse,
+    &.table-md.table-responsive-collapse,
+    &.table-lg.table-responsive-collapse {
+      width: 100%;
+      background: none !important;
+
+      thead {
+        tr {
+          left: $offscreen;
+          position: absolute;
+          top: $offscreen;
+
+          th {
+            display: block;
+            visibility: visible;
+          }
+        }
+      }
+      tbody {
+        tr {
+          td {
+            display: block;
+            visibility: visible;
+            border-left-width: 1px !important;
+            border-right-width: 1px !important;
+            border-bottom-width: 0 !important;
+            border-color: $border_light !important;
+            min-height: 2.2em;
+            position: relative;
+            text-align:left;
+            white-space: normal;
+            &:before {
+              content: attr(data-title);
+              @include caption;
+              width: 100% !important;
+              white-space: nowrap !important;
+              text-overflow: ellipsis !important;
+              position: relative !important;
+              top: 0 !important;
+              left: 0 !important;
+              height: 100% !important;
+              padding-left: 0 !important;
+              display: block !important;
+            }
+
+            &:first-child {
+              margin-top: $space_md !important;
+              border-top-width: 1px !important;
+              border-top-color: $border_light !important;
+              border-radius: $border_rad_light $border_rad_light 0 0;
+            }
+
+            &:last-child {
+              border-radius: 0 0 $border_rad_light $border_rad_light;
+              border-bottom-width: 1px !important;
+            }
+          }
+
+          &:first-child {
+            td {
+              &:first-child {
+                margin-top: $space-xs !important;
+              }
+            }
+          }
+        }
+      }
+      &.table-card {
+        background: none !important;
+
+        tbody {
+          tr {
+            td {
+              background: $white !important;
+              border-left-width: 1px !important;
+              border-right-width: 1px !important;
+              border-top-width: 1px !important;
+              &:after {
+                height: 0;
+                background-color: transparent;
+              }
+
+              &:first-child {
+                border-radius: $border_rad_light $border_rad_light 0 0 !important;
+              }
+              &:last-child {
+                border-radius: 0 0 $border_rad_light $border_rad_light !important;
+              }
+            }
+          }
+        }
+      }
+      @media (hover:hover) {
+        &:hover {
+          tbody {
+            tr {
+              box-shadow: 0 0 0 $white !important;
+            }
+          }
+        }
+      }
+      // reset the first and last to normalize
+      @each $name, $value in $cell-pad-list {
+        &.#{$name} {
+          tbody {
+            tr {
+              td {
+                &:first-child,
+                &:last-child {
+                  padding: $value $cell-gutter !important;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}

data/app/pb_kits/playbook/pb_table/styles/_mobile_collapse.scss

@@ -0,0 +1,125 @@
+@import "../../tokens/border_radius";
+@import "../../tokens/positioning";
+@import "../../pb_caption/caption_mixin";
+
+@media only screen and (max-width: $screen-xs-max) {
+  [class^=pb_table] {
+    &.table-sm.table-collapse-sm,
+    &.table-md.table-collapse-sm,
+    &.table-lg.table-collapse-sm {
+      width: 100%;
+      background: none !important;
+
+      thead {
+        tr {
+          left: $offscreen;
+          position: absolute;
+          top: $offscreen;
+
+          th {
+            display: block;
+            visibility: visible;
+          }
+        }
+      }
+      tbody {
+        tr {
+          td {
+            display: block;
+            visibility: visible;
+            border-left-width: 1px !important;
+            border-right-width: 1px !important;
+            border-bottom-width: 0 !important;
+            border-color: $border_light !important;
+            min-height: 2.2em;
+            position: relative;
+            text-align:left;
+            white-space: normal;
+            &:before {
+              content: attr(data-title);
+              @include caption;
+              width: 100% !important;
+              white-space: nowrap !important;
+              text-overflow: ellipsis !important;
+              position: relative !important;
+              top: 0 !important;
+              left: 0 !important;
+              height: 100% !important;
+              padding-left: 0 !important;
+              display: block !important;
+            }
+
+            &:first-child {
+              margin-top: $space_md !important;
+              border-top-width: 1px !important;
+              border-top-color: $border_light !important;
+              border-radius: $border_rad_light $border_rad_light 0 0;
+            }
+
+            &:last-child {
+              border-radius: 0 0 $border_rad_light $border_rad_light;
+              border-bottom-width: 1px !important;
+            }
+          }
+
+          &:first-child {
+            td {
+              &:first-child {
+                margin-top: $space-xs !important;
+              }
+            }
+          }
+        }
+      }
+      &.table-card {
+        background: none !important;
+
+        tbody {
+          tr {
+            td {
+              background: $white !important;
+              border-left-width: 1px !important;
+              border-right-width: 1px !important;
+              border-top-width: 1px !important;
+              &:after {
+                height: 0;
+                background-color: transparent;
+              }
+
+              &:first-child {
+                border-radius: $border_rad_light $border_rad_light 0 0 !important;
+              }
+              &:last-child {
+                border-radius: 0 0 $border_rad_light $border_rad_light !important;
+              }
+            }
+          }
+        }
+      }
+      @media (hover:hover) {
+        &:hover {
+          tbody {
+            tr {
+              box-shadow: 0 0 0 $white !important;
+            }
+          }
+        }
+      }
+      // reset the first and last to normalize
+      @each $name, $value in $cell-pad-list {
+        &.#{$name} {
+          tbody {
+            tr {
+              td {
+                &:first-child,
+                &:last-child {
+                  padding: $value $cell-gutter !important;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}

data/app/pb_kits/playbook/pb_table/styles/_reset.scss

@@ -0,0 +1,17 @@
+[class^=pb_table] {
+  &.table-sm,
+  &.table-md,
+  &.table-lg {
+    border-collapse: collapse;
+    background-color: unset;
+    background: unset;
+
+    thead {
+      tr {
+        th {
+          text-align: left;
+        }
+      }
+    }
+  }
+}

data/app/pb_kits/playbook/pb_table/styles/_side_highlight.scss

@@ -0,0 +1,24 @@
+@import "../../tokens/colors";
+
+$pb_table_row_kit_side_highlight_colors: map-merge(map-merge($status_colors, $product_colors), $category_colors);
+
+@mixin pb_table_row_kit_side_highlight($background) {
+  box-shadow: inset 4px 0 0 0 $background;
+  border-top: 0px;
+}
+
+[class^=pb_table] {
+  tbody {
+    [class^=pb_table_row_kit] {
+      @each $color_name, $color_value in $pb_table_row_kit_side_highlight_colors {
+        &[class*=_side_highlight_#{$color_name}] {
+          td {
+            &:first-child {
+              @include pb_table_row_kit_side_highlight($color_value);
+            }
+          }
+        }
+      }
+    }
+  }
+}

data/app/pb_kits/playbook/pb_table/styles/_single-line.scss

@@ -0,0 +1,34 @@
+[class^=pb_table] {
+  &.single-line {
+    width: 100%;
+    max-width: 100vw;
+    table-layout: fixed;
+
+    tbody {
+      tr {
+        td {
+          white-space: nowrap;
+          text-overflow: ellipsis;
+
+          & > * {
+            &:not(.btn, br) {
+              display: inline-block !important;
+            }
+          }
+
+          .btn {
+            display: block !important;
+          }
+
+          br {
+            content:' ' !important;
+
+            &::after {
+              content:' ';
+            }
+          }
+        }
+      }
+    }
+  }
+}

data/app/pb_kits/playbook/pb_table/styles/_sticky_header.scss

@@ -0,0 +1,23 @@
+@import "../../tokens/colors";
+
+[class^="pb_table"] {
+  &.sticky-header {
+    thead {
+      background: $white;
+      position: sticky;
+      top: 0;
+      z-index: 1;
+    }
+  }
+
+  &.dark {
+    &.sticky-header {
+      thead {
+        background: $bg_dark;
+        position: sticky;
+        top: 0;
+        z-index: 1;
+      }
+    }
+  }
+}

data/app/pb_kits/playbook/pb_table/styles/_structure.scss

@@ -0,0 +1,50 @@
+@import "../../tokens/colors";
+
+[class^=pb_table] {
+  @each $name, $value in $cell-pad-list {
+    &.#{$name} {
+      width: 100%;
+      thead {
+        tr {
+          th {
+            padding: $cell-pad-md $cell-gutter;
+
+            &:first-child {
+              padding-left: $cell-pad-endcap;
+            }
+            &:last-child {
+              padding-right: $cell-pad-endcap;
+            }
+          }
+        }
+      }
+      tbody {
+        tr {
+          td {
+            border-color: $border_light;
+            border-style: solid;
+            border-width: 0 0 1px;
+            padding: $value $cell-gutter;
+
+            &:first-child {
+              padding-left: $cell-pad-endcap;
+            }
+            &:last-child {
+              padding-right: $cell-pad-endcap;
+            }
+          }
+        }
+      }
+      &.data_table {
+        thead tr th {
+          padding-top: $cell-pad-sm;
+          padding-bottom: $cell-pad-sm;
+        }
+        tbody tr td {
+          padding-top: $cell-pad-sm;
+          padding-bottom: $cell-pad-sm;
+        }
+      }
+    }
+  }
+}

data/app/pb_kits/playbook/pb_table/styles/_table-card.scss

@@ -0,0 +1,62 @@
+[class^=pb_table] {
+  &.table-sm,
+  &.table-md,
+  &.table-lg {
+    &.table-card {
+      border-collapse: separate;
+      border-spacing: 0;
+      background: $white;
+
+      thead {
+        tr {
+          th {
+            border-color: $border_light;
+            border-style: solid;
+            border-width: 1px 0 1px 0;
+
+            &:first-child {
+              border-radius: 4px 0 0 0;
+              border-width: 1px 0 1px 1px;
+            }
+            &:last-child {
+              border-radius: 0 4px 0 0;
+              border-width: 1px 1px 1px 0;
+            }
+          }
+        }
+      }
+
+      tbody {
+        tr {
+          td {
+            border-color: $border_light;
+            border-style: solid;
+            border-width: 0 0 1px 0;
+
+            &:first-child {
+              border-width: 0 0 1px 1px;
+            }
+            &:last-child {
+              border-width: 0 1px 1px 0;
+            }
+          }
+
+          &:last-child {
+            td {
+              border-width: 0 0 1px 0;
+
+              &:first-child {
+                border-radius: 0 0 0 4px;
+                border-width: 0 0 1px 1px;
+              }
+              &:last-child {
+                border-radius: 0 0 4px 0;
+                border-width: 0 1px 1px 0;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}

data/app/pb_kits/playbook/pb_table/styles/_table-dark.scss

@@ -0,0 +1,100 @@
+@import "../../tokens/screen_sizes";
+
+$table-dark-card-bg: $bg_dark;
+
+[class^=pb_table] {
+  &.table-sm,
+  &.table-md,
+  &.table-lg {
+    &.table-dark {
+      thead {
+        tr {
+          border-color: $border_dark !important;
+
+          th {
+            border-color: $border_dark !important;
+            color: $text_dk_light;
+          }
+        }
+      }
+      tbody {
+        tr {
+          border-color: $border_dark;
+          transition: none !important;
+
+          td {
+            border-color: $border_dark !important;
+            border-bottom-width: 0 !important;
+            color: $white;
+
+            &:before {
+              color: $text_lt_light !important;
+            }
+          }
+          &:first-child {
+            td {
+              border-top-width: 0 !important;
+            }
+          }
+        }
+      }
+
+      &:not(.no-hover) {
+        tbody {
+          tr {
+            @media (hover:hover) {
+              &:hover {
+                td {
+                  border-color: $border_dark !important;
+                  background: $bg_dark;
+                }
+              }
+            }
+          }
+        }
+      }
+
+      &.table-card {
+        background: $table-dark-card-bg !important;
+      }
+    }
+  }
+}
+
+@media only screen and (max-width: $screen-xs-max) {
+  [class^=pb_table] {
+    &.table-sm,
+    &.table-md,
+    &.table-lg {
+      &.table-card {
+        &.table-dark {
+          background: none !important;
+
+          tbody {
+            tr {
+              td {
+                background: $table-dark-card-bg !important;
+              }
+            }
+          }
+        }
+      }
+      &.table-dark {
+        tbody {
+          tr {
+            td {
+              &:first-child {
+                border-top-color: $border_dark !important;
+              }
+            }
+            &:first-child {
+              td {
+                border-top-width: 1px !important;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}

data/app/pb_kits/playbook/pb_table/styles/_tablet_collapse.scss

@@ -0,0 +1,125 @@
+@import "../../tokens/border_radius";
+@import "../../tokens/positioning";
+@import "../../pb_caption/caption_mixin";
+
+@media only screen and (max-width: $screen-lg-min) {
+  [class^=pb_table] {
+    &.table-sm.table-collapse-md,
+    &.table-md.table-collapse-md,
+    &.table-lg.table-collapse-md {
+      width: 100%;
+      background: none !important;
+
+      thead {
+        tr {
+          left: $offscreen;
+          position: absolute;
+          top: $offscreen;
+
+          th {
+            display: block;
+            visibility: visible;
+          }
+        }
+      }
+      tbody {
+        tr {
+          td {
+            display: block;
+            visibility: visible;
+            border-left-width: 1px !important;
+            border-right-width: 1px !important;
+            border-bottom-width: 0 !important;
+            border-color: $border_light !important;
+            min-height: 2.2em;
+            position: relative;
+            text-align:left;
+            white-space: normal;
+            &:before {
+              content: attr(data-title);
+              @include caption;
+              width: 100% !important;
+              white-space: nowrap !important;
+              text-overflow: ellipsis !important;
+              position: relative !important;
+              top: 0 !important;
+              left: 0 !important;
+              height: 100% !important;
+              padding-left: 0 !important;
+              display: block !important;
+            }
+
+            &:first-child {
+              margin-top: $space_md !important;
+              border-top-width: 1px !important;
+              border-top-color: $border_light !important;
+              border-radius: $border_rad_light $border_rad_light 0 0;
+            }
+
+            &:last-child {
+              border-radius: 0 0 $border_rad_light $border_rad_light;
+              border-bottom-width: 1px !important;
+            }
+          }
+
+          &:first-child {
+            td {
+              &:first-child {
+                margin-top: $space-xs !important;
+              }
+            }
+          }
+        }
+      }
+      &.table-card {
+        background: none !important;
+
+        tbody {
+          tr {
+            td {
+              background: $white !important;
+              border-left-width: 1px !important;
+              border-right-width: 1px !important;
+              border-top-width: 1px !important;
+              &:after {
+                height: 0;
+                background-color: transparent;
+              }
+
+              &:first-child {
+                border-radius: $border_rad_light $border_rad_light 0 0 !important;
+              }
+              &:last-child {
+                border-radius: 0 0 $border_rad_light $border_rad_light !important;
+              }
+            }
+          }
+        }
+      }
+      @media (hover:hover) {
+        &:hover {
+          tbody {
+            tr {
+              box-shadow: 0 0 0 $white !important;
+            }
+          }
+        }
+      }
+      // reset the first and last to normalize
+      @each $name, $value in $cell-pad-list {
+        &.#{$name} {
+          tbody {
+            tr {
+              td {
+                &:first-child,
+                &:last-child {
+                  padding: $value $cell-gutter !important;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}