playbook_ui 14.25.0.pre.alpha.testingcss9713 → 14.25.0.pre.alpha.testingcss9751

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

@@ -1,4 +1,4 @@
-.pb_table {
+[class^=pb_table] {
   &.table-sm,
   &.table-md,
   &.table-lg {

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

@@ -33,33 +33,33 @@
                         -1px 0 0 0px $border_light
                 }
             }
-        &.pb_table.table-sm.table-card thead tr th:first-child,
-        &.pb_table.table-sm:not(.no-hover).table-card tbody tr td:first-child {
+        &[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;
         }
 
-        &.pb_table.table-md.table-card thead tr th:first-child,
-        &.pb_table.table-md:not(.no-hover).table-card tbody tr td:first-child {
+        &[class^=pb_table].table-md.table-card thead tr th:first-child,
+        &[class^=pb_table].table-md:not(.no-hover).table-card tbody tr td:first-child {
             border-left-width: 0px;
         }
 
-        &.pb_table.table-lg.table-card thead tr th:first-child,
-        &.pb_table.table-lg:not(.no-hover).table-card tbody tr td:first-child {
+        &[class^=pb_table].table-lg.table-card thead tr th:first-child,
+        &[class^=pb_table].table-lg:not(.no-hover).table-card tbody tr td:first-child {
             border-left-width: 0px;
         }
 
-        &.pb_table.table-sm.table-card thead tr th:last-child,
-        &.pb_table.table-sm:not(.no-hover).table-card tbody tr td:last-child {
+        &[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;
         }
 
-        &.pb_table.table-md.table-card thead tr th:last-child,
-        &.pb_table.table-md:not(.no-hover).table-card tbody tr td:last-child {
+        &[class^=pb_table].table-md.table-card thead tr th:last-child,
+        &[class^=pb_table].table-md:not(.no-hover).table-card tbody tr td:last-child {
             border-right-width: 0px;
         }
 
-        &.pb_table.table-lg.table-card thead tr th:last-child,
-        &.pb_table.table-lg:not(.no-hover).table-card tbody tr td:last-child {
+        &[class^=pb_table].table-lg.table-card thead tr th:last-child,
+        &[class^=pb_table].table-lg:not(.no-hover).table-card tbody tr td:last-child {
             border-right-width: 0px;
         }
     }

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

@@ -7,9 +7,9 @@ $pb_table_row_kit_side_highlight_colors: map-merge(map-merge($status_colors, $pr
   border-top: 0px;
 }
 
-.pb_table {
+[class^=pb_table] {
   tbody, .pb_table_tbody {
-    .pb_table_row_kit {
+    [class^=pb_table_row_kit] {
       @each $color_name, $color_value in $pb_table_row_kit_side_highlight_colors {
         &[class*=_side_highlight_#{$color_name}] {
           td, .pb_table_td {

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

@@ -1,4 +1,4 @@
-.pb_table {
+[class^=pb_table] {
   &.single-line {
     width: 100%;
     max-width: 100vw;

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

@@ -1,4 +1,4 @@
-.pb_table:not(:has(colgroup)) {
+[class^=pb_table]:not(:has(colgroup)) {
   &.striped {
     tbody, .pb_table_tbody {
       tr:nth-child(odd):not(.pb_background_kit), .pb_table_tr:nth-child(odd):not(.pb_background_kit) {

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

@@ -1,6 +1,6 @@
 @import "../../tokens/colors";
 
-.pb_table {
+[class^=pb_table] {
   display: table;
 
   @each $name, $value in $cell-pad-list {

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

@@ -1,4 +1,4 @@
-.pb_table {
+[class^=pb_table] {
   &.table-sm,
   &.table-md,
   &.table-lg {

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

@@ -2,7 +2,7 @@
 
 $table-dark-card-bg: $card_dark;
 
-.pb_table {
+[class^=pb_table] {
   &.table-sm,
   &.table-md,
   &.table-lg {
@@ -46,7 +46,7 @@ $table-dark-card-bg: $card_dark;
 }
 
 @media only screen and (max-width: $screen-xs-max) {
-  .pb_table {
+  [class^=pb_table] {
     &.table-sm,
     &.table-md,
     &.table-lg {

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

@@ -9,9 +9,9 @@ $text_align_values: (
   match-parent: match-parent,
 );
 
-.pb_table {
+[class^=pb_table] {
   thead, .pb_table_thead {
-    .pb_table_header_kit {
+    [class^=pb_table_header_kit] {
       @each $align_name, $align_value in $text_align_values {
         &[class*=_align_#{$align_name}] {
           text-align: $align_value;
@@ -31,9 +31,9 @@ $text_align_values: (
   padding: $space_xxs;
 }
 
-.pb_table {
+[class^=pb_table] {
   thead, .pb_table_thead {
-    .pb_th_active {
+    [class^=pb_th_active] {
       color: $primary !important;
     }
   }

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

@@ -3,7 +3,7 @@
 @import "../../pb_caption/caption_mixin";
 
 @media only screen and (max-width: $screen-lg-min) {
-  .pb_table {
+  [class^=pb_table] {
     &.table-sm.table-collapse-md,
     &.table-md.table-collapse-md,
     &.table-lg.table-collapse-md {

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

@@ -1,4 +1,4 @@
-.pb_table {
+[class^=pb_table] {
   &.vertical-border {
     td, th, .pb_table_td, .pb_table_th {
       border-right: 1px solid $border_light !important;

data/app/pb_kits/playbook/pb_text_input/_text_input.scss

@@ -2,7 +2,7 @@
 @import "../tokens/titles";
 @import "../tokens/colors";
 
-[class^="pb_text_input_kit"] {
+.pb_text_input_kit {
   .pb_text_input_kit_label {
     margin-bottom: $space_xs;
     display: block;
@@ -100,7 +100,7 @@
   }
   &.error {
     .text_input_wrapper {
-      [class*="pb_body_kit"] {
+      .pb_body_kit_negative {
         margin-top: $space_xs / 2;
       }
       // The `:not` here prevents error styling from affecting the country search input in the Phone Number Input Kit.
@@ -174,9 +174,9 @@
   }
 
   .text_input_wrapper_add_on {
-    & > [class^="pb_text_input_kit"]:not(:last-child) {
+    & > .pb_text_input_kit:not(:last-child) {
       .text_input_wrapper_add_on input,
-      [class^="pb_text_input_kit"] .text_input_wrapper_add_on .text_input {
+      .pb_text_input_kit .text_input_wrapper_add_on .text_input {
         border-bottom-right-radius: 0;
         border-top-right-radius: 0;
         border-right-width: 0;

data/app/pb_kits/playbook/pb_textarea/_textarea.scss

@@ -6,8 +6,8 @@
 .pb_textarea_kit {
   margin-bottom: $space_sm;
 
-  .pb_caption_kit {
-    margin-bottom: $space_xs;
+  .pb_caption_kit_md {
+    margin-bottom: $space_xs !important;
     display: block;
   }
   textarea::placeholder,
@@ -59,8 +59,8 @@
   }
 
   &.error {
-    .pb_body_kit {
-      margin-top: $space_xs / 2;
+    .pb_body_kit_negative {
+      margin-top: $space_xs / 2 !important;
     }
     textarea {
       border-color: $error;
@@ -81,4 +81,4 @@
   .pb_caption_kit_xs {
     text-align: right;
   }
-}
+}

data/app/pb_kits/playbook/pb_time/_time.scss

@@ -4,14 +4,18 @@
 @import "../pb_body/body";
 @import "../pb_caption/caption";
 
-.pb_time_kit {
-  &._center  {
-    text-align: center;
-  }
-
-  &._right  {
-    text-align: right;
-  }
+.pb_time_kit,
+.pb_time_kit_left,
+.pb_time_kit_center,
+.pb_time_kit_right,
+.pb_time_kit_sm,
+.pb_time_kit_md,
+.pb_time_kit_left_sm,
+.pb_time_kit_left_md,
+.pb_time_kit_center_sm,
+.pb_time_kit_center_md,
+.pb_time_kit_right_sm,
+.pb_time_kit_right_md {
 
   .pb_time_timezone {
     color: $text_lt_light;
@@ -21,13 +25,36 @@
       content: " ";
     }
   }
+}
 
-  &.dark {
-    & * {
-      @include caption_dark;
-    }
-    .pb_time {
-      color: $text_dk_default;
-    }
-  }
+.pb_time_kit_center,
+.pb_time_kit_center_sm,
+.pb_time_kit_center_md {
+  text-align: center;
+}
+
+.pb_time_kit_right,
+.pb_time_kit_right_sm,
+.pb_time_kit_right_md {
+  text-align: right;
 }
+
+.pb_time_kit.dark,
+.pb_time_kit_left.dark,
+.pb_time_kit_center.dark,
+.pb_time_kit_right.dark,
+.pb_time_kit_sm.dark,
+.pb_time_kit_md.dark,
+.pb_time_kit_left_sm.dark,
+.pb_time_kit_left_md.dark,
+.pb_time_kit_center_sm.dark,
+.pb_time_kit_center_md.dark,
+.pb_time_kit_right_sm.dark,
+.pb_time_kit_right_md.dark {
+  & * {
+    @include caption_dark;
+  }
+  .pb_time {
+    color: $text_dk_default;
+  }
+}

data/app/pb_kits/playbook/pb_time_range_inline/_time_range_inline.scss

@@ -1,35 +1,35 @@
 
-.pb_time_range_inline_kit {
-  &._center  {
-    & > .pb_caption,
-    & > .pb_body {
+[class^=pb_time_range_inline_kit] {
+  &[class*=_center]  {
+    & > [class^=pb_caption],
+    & > [class^=pb_body] {
       text-align: center;
     }
-    & > .pb_time_range_inline_wrapper {
+    & > [class*=pb_time_range_inline_wrapper] {
       justify-content: center;
     }
   }
-  &._right {
-    & > .pb_caption,
-    & > .pb_body {
+  &[class*=_right] {
+    & > [class^=pb_caption],
+    & > [class^=pb_body] {
       text-align: right;
     }
-    & > .pb_time_range_inline_wrapper {
+    & > [class*=pb_time_range_inline_wrapper] {
       justify-content: flex-end;
     }
   }
-  .pb_time_range_inline_wrapper {
+  [class^=pb_time_range_inline_wrapper] {
     display: flex;
     align-items: center;
-    .pb_time_range_inline_arrow {
+    [class*=pb_time_range_inline_arrow] {
       margin-left: $space_xs/2;
       margin-right: $space_xs/2;
     }
-    .pb_time_range_inline_timezone {
+    [class*=pb_time_range_inline_timezone] {
       margin-left: $space_xs/2;
     }
-    .pb_time_range_inline_icon {
+    [class*=pb_time_range_inline_icon] {
       margin-right: $space_xs/2;
     }
   }
-}
+}

data/app/pb_kits/playbook/pb_time_stacked/_time_stacked.scss

@@ -2,15 +2,12 @@
 @import "../pb_caption/caption";
 @import "../tokens/colors";
 
-.pb_time_stacked_kit {
- &._center  {
-   text-align: center;
- }
-
- &._right  {
-   text-align: right;
- }
+.pb_time_stacked_kit_center {
+  text-align: center;
+}
 
+.pb_time_stacked_kit_right {
+  text-align: right;
 }
 
 .time-spacing {

data/app/pb_kits/playbook/pb_timeline/_timeline.scss

@@ -43,14 +43,14 @@ $gap_lg: $height_from_top + $space_lg;
     flex-direction: $flex_direction;
 }
 
-.pb_timeline_kit {
-    &._horizontal {
+[class^=pb_timeline_kit] {
+    &[class*=_horizontal] {
         @include flex_wrapper(row);
         width: 100%;
         >div {
             &:last-child {
                 flex-basis: auto !important;
-                .pb_timeline_item_step {
+                [class^=pb_timeline_item_step] {
                     [class=pb_timeline_item_connector] {
                         opacity: 0;
                     }
@@ -63,10 +63,10 @@ $gap_lg: $height_from_top + $space_lg;
                 }
             }
         }
-        .pb_timeline_item_kit {
-            &._solid {
+        [class*=pb_timeline_item_kit] {
+            &[class*=_solid] {
                 flex-basis: 100%;
-                .pb_timeline_item_step {
+                [class^=pb_timeline_item_step] {
                     @include flex_wrapper(row);
                     align-items: center;
                     margin-top: $space_xs;
@@ -76,9 +76,9 @@ $gap_lg: $height_from_top + $space_lg;
                     }
                 }
             }
-            &._dotted {
+            &[class*=_dotted] {
                 flex-basis: 100%;
-                .pb_timeline_item_step {
+                [class^=pb_timeline_item_step] {
                     @include flex_wrapper(row);
                     align-items: center;
                     margin-top: $space_xs;
@@ -89,13 +89,13 @@ $gap_lg: $height_from_top + $space_lg;
                 }
             }
         }
-        &._with_date {
+        &[class*=_with_date] {
             @include flex_wrapper(row);
             width: 100%;
             >div {
                 &:last-child {
                     flex-basis: auto !important;
-                    .pb_timeline_item_step {
+                    [class^=pb_timeline_item_step] {
                         [class=pb_timeline_item_connector] {
                             opacity: 0;
                         }
@@ -108,8 +108,8 @@ $gap_lg: $height_from_top + $space_lg;
                     }
                 }
             }
-            .pb_timeline_item_kit {
-                &._solid {
+            [class*=pb_timeline_item_kit] {
+                &[class*=_solid] {
                     flex-basis: 100%;
                     [class=pb_timeline_item_left_block] {
                         display: flex;
@@ -125,7 +125,7 @@ $gap_lg: $height_from_top + $space_lg;
                             }
                         }
                     }
-                    .pb_timeline_item_step {
+                    [class^=pb_timeline_item_step] {
                         @include flex_wrapper(row);
                         margin-top: $space_xs;
                         margin-bottom: $space_xs;
@@ -134,7 +134,7 @@ $gap_lg: $height_from_top + $space_lg;
                         }
                     }
                 }
-                &._dotted {
+                &[class*=_dotted] {
                     flex-basis: 100%;
                     [class=pb_timeline_item_left_block] {
                         height: 55px;
@@ -149,7 +149,7 @@ $gap_lg: $height_from_top + $space_lg;
                             }
                         }
                     }
-                    .pb_timeline_item_step {
+                    [class^=pb_timeline_item_step] {
                         @include flex_wrapper(row);
                         margin-top: $space_xs;
                         margin-bottom: $space_xs;
@@ -161,22 +161,22 @@ $gap_lg: $height_from_top + $space_lg;
             }
         }
     }
-    &._vertical {
+    &[class*=_vertical] {
         @include flex_wrapper(column);
         align-items: flex-start;
         align-self: auto;
         >div:last-child {
-            .pb_timeline_item_step {
+            [class^=pb_timeline_item_step] {
                 [class=pb_timeline_item_connector] {
                     opacity: 0;
                 }
             }
         }
-        .pb_timeline_item_kit {
+        [class*=pb_timeline_item_kit] {
             @include flex_wrapper(row);
-            &._solid {
+            &[class*=_solid] {
                 flex-basis: 100%;
-                .pb_timeline_item_step {
+                [class^=pb_timeline_item_step] {
                     @include flex_wrapper(column);
                     align-items: center;
                     align-content: flex-start;
@@ -195,9 +195,9 @@ $gap_lg: $height_from_top + $space_lg;
                     margin-bottom: $space_lg;
                 }
             }
-            &._dotted {
+            &[class*=_dotted] {
                 flex-basis: 100%;
-                .pb_timeline_item_step {
+                [class^=pb_timeline_item_step] {
                     @include flex_wrapper(column);
                     align-items: center;
                     margin-right: $space_sm;
@@ -216,22 +216,22 @@ $gap_lg: $height_from_top + $space_lg;
                 }
             }
         }
-        &._with_date {
+        &[class*=_with_date] {
             @include flex_wrapper(column);
             align-items: flex-start;
             align-self: auto;
             >div:last-child {
-                .pb_timeline_item_step {
+                [class^=pb_timeline_item_step] {
                     [class=pb_timeline_item_connector] {
                         opacity: 0;
                     }
                 }
             }
-            .pb_timeline_item_kit {
+            [class*=pb_timeline_item_kit] {
                 @include flex_wrapper(row);
-                &._solid {
+                &[class*=_solid] {
                     flex-basis: 100%;
-                    .pb_timeline_item_step {
+                    [class^=pb_timeline_item_step] {
                         @include flex_wrapper(column);
                         align-items: center;
                         align-content: flex-start;
@@ -250,9 +250,9 @@ $gap_lg: $height_from_top + $space_lg;
                         margin-bottom: $space_lg;
                     }
                 }
-                &._dotted {
+                &[class*=_dotted] {
                     flex-basis: 100%;
-                    .pb_timeline_item_step {
+                    [class^=pb_timeline_item_step] {
                         @include flex_wrapper(column);
                         align-items: center;
                         margin-right: $space_sm;
@@ -272,36 +272,36 @@ $gap_lg: $height_from_top + $space_lg;
                 }
             }
         }
-        &._gap_xs {
-            .pb_timeline_item_kit {
-                .pb_timeline_item_step {
+        &[class*=_gap_xs] {
+            [class*=pb_timeline_item_kit] {
+                [class^=pb_timeline_item_step] {
                     [class=pb_timeline_item_connector] {
                         height: $gap_xs !important;
                     }
                 }
             }
         }
-        &._gap_sm {
-            .pb_timeline_item_kit {
-                .pb_timeline_item_step {
+        &[class*=_gap_sm] {
+            [class*=pb_timeline_item_kit] {
+                [class^=pb_timeline_item_step] {
                     [class=pb_timeline_item_connector] {
                         height: $gap_sm !important;
                     }
                 }
             }
         }
-        &._gap_md {
-            .pb_timeline_item_kit {
-                .pb_timeline_item_step {
+        &[class*=_gap_md] {
+            [class*=pb_timeline_item_kit] {
+                [class^=pb_timeline_item_step] {
                     [class=pb_timeline_item_connector] {
                         height: $gap_md !important;
                     }
                 }
             }
         }
-        &._gap_lg {
-            .pb_timeline_item_kit {
-                .pb_timeline_item_step {
+        &[class*=_gap_lg] {
+            [class*=pb_timeline_item_kit] {
+                [class^=pb_timeline_item_step] {
                     [class=pb_timeline_item_connector] {
                         height: $gap_lg !important;
                     }

data/app/pb_kits/playbook/pb_timestamp/_timestamp.scss

@@ -1,16 +1,16 @@
 @import "timestamp-mixins";
 @import "../tokens/colors";
 
-.pb_timestamp_kit{
+[class^=pb_timestamp_kit]{
   @include pb_timestamp;
 
-  &._center  {
+  &[class*=_center]  {
     text-align: center;
   }
-  &._right  {
+  &[class*=_right]  {
     text-align: right;
   }
-  &._dark {
+  &[class*=_dark] {
     color: $text_dk_default;
   }
 }