playbook_ui 14.25.0.pre.alpha.testingcss9700 → 14.25.0.pre.alpha.testingcss9713

data/app/pb_kits/playbook/pb_date_stacked/_date_stacked.scss

@@ -3,32 +3,32 @@
 @import "../tokens/colors";
 
 
-[class^=pb_date_stacked_kit]{
-  &[class*=_center]  {
-    & > * [class^=pb_title_kit],
-    & > * [class^=pb_caption_kit],
-    & > [class^=pb_date_stacked_year_kit] {
+.pb_date_stacked_kit{
+  &._center  {
+    & > * .pb_title_kit,
+    & > * .pb_caption_kit,
+    & > .pb_date_stacked_year_kit {
       text-align: center;
     }
   }
-  &[class*=_right]  {
-    & > * [class^=pb_title_kit],
-    & > * [class^=pb_caption_kit],
-    & > [class^=pb_date_stacked_year] {
+  &._right  {
+    & > * .pb_title_kit,
+    & > * .pb_caption_kit,
+    & > .pb_date_stacked_year {
       text-align: right;
     }
   }
-  &[class*=_reverse] {
+  &._reverse {
     .pb_date_stacked_day_month {
       display: flex;
       flex-direction: column-reverse;
     }
   }
-  &[class*=_dark] {
-    & > * [class^=pb_title_kit] {
+  &._dark {
+    & > * .pb_title_kit {
       color: $text_dk_default;
     }
-    & > * [class^=pb_caption_kit] {
+    & > * .pb_caption_kit {
       color: $text_dk_light;
     }
   }

data/app/pb_kits/playbook/pb_date_time/_date_time.scss

@@ -1,19 +1,19 @@
-[class^=pb_date_time] {
-  [class*=pb_date_kit] > div:last-child {
+.pb_date_time {
+  .pb_date_kit > div:last-child {
     margin-right: 0 !important;
   }
-  &[class*=_center] {
+  &._center {
     display: flex;
     justify-content: center;
     text-align: center;
   }
-  &[class*=_right]  {
+  &._right  {
     display: flex;
     justify-content: flex-end;
     text-align: right;
   }
-  &[class*=dark] {
-    [class^=pb_title_kit] {
+  &.dark {
+    .pb_title_kit {
         color: $text_dk_default !important;
     }
     & * {

data/app/pb_kits/playbook/pb_date_time_stacked/_date_time_stacked.scss

@@ -1,18 +1,18 @@
-[class^=pb_date_time_stacked] {
+.pb_date_time_stacked {
 
-  [class^=padding_month] {
+  .padding_month {
     padding-bottom: $space_xs + 2px !important;
     }
 
-  [class^=padding_day] {
+  .padding_day {
     padding-bottom: $space_xs + 2px !important;
   }
 
-  &[class*=_dark] {
-    & > * [class^=pb_title_kit] {
+  &._dark {
+    & > * .pb_title_kit {
       color: $text_dk_default;
     }
-    & > * [class^=pb_caption_kit] {
+    & > * .pb_caption_kit {
       color: $text_dk_light;
     }
   }

data/app/pb_kits/playbook/pb_date_year_stacked/_date_year_stacked.scss

@@ -1,16 +1,16 @@
-[class^=pb_date_year_stacked] {
-  &[class*=_left] {
-    & > [class^=pb_title], & > [class^=pb_body] {
+.pb_date_year_stacked {
+  &._left {
+    & > .pb_title, & > .pb_body {
       text-align: left;
     }
   }
-  &[class*=_center] {
-    & > [class^=pb_title], & > [class^=pb_body] {
+  &._center {
+    & > .pb_title, & > .pb_body {
       text-align: center;
     }
   }
-  &[class*=_right]  {
-    & > [class^=pb_title], & > [class^=pb_body] {
+  &._right  {
+    & > .pb_title, & > .pb_body {
       text-align: right;
     }
   }

data/app/pb_kits/playbook/pb_detail/_detail.scss

@@ -2,7 +2,7 @@
 @import "../tokens/titles";
 @import "../tokens/typography";
 
-[class^=pb_detail_kit]{
+.pb_detail_kit{
   @include pb_detail;
 
   @each $color_name, $color_value in $pb_detail_colors {
@@ -12,7 +12,7 @@
   }
 
   @each $dark_color_name, $dark_color_value in $pb_dark_detail_colors{
-    &[class*=color_#{$dark_color_name}][class*=dark]{
+    &[class*=color_#{$dark_color_name}].dark{
       @include pb_detail($dark_color_value)
     }
   }

data/app/pb_kits/playbook/pb_dialog/_dialog.scss

@@ -5,103 +5,49 @@
 @import "../tokens/border_radius";
 @import "../tokens/spacing";
 @import "../tokens/animation-curves";
-@import "../tokens/positioning";
 
 // Dialog animations
-// Dialog animations for fading in and out from the center
 @keyframes modalFadeIn {
-  from {
-    transform: translate3d(0, -100%, 0);
-    opacity: 0;
-  }
-  to {
-    transform: translate3d(0, 0, 0);
-    opacity: 1;
-  }
+  from { transform: translate3d(0, -100%, 0); opacity: 0; }
+  to { transform: translate3d(0, 0, 0); opacity: 1; }
 }
 
 @keyframes modalFadeOut {
-  from {
-    transform: translate3d(0, 0, 0);
-    opacity: 1;
-  }
-  to {
-    transform: translate3d(0, -50%, 0);
-    opacity: 0;
-  }
+  from { transform: translate3d(0, 0, 0); opacity: 1; }
+  to { transform: translate3d(0, -50%, 0); opacity: 0; }
 }
 
-// Dialog animations for fading in and out from the left side
 @keyframes modalFadeInLeft {
-  from {
-    transform: translate3d(-100%, 0, 0);
-    opacity: 0;
-  }
-  to {
-    transform: translate3d(0, 0, 0);
-    opacity: 1;
-  }
+  from { transform: translate3d(-100%, 0, 0); opacity: 0; }
+  to { transform: translate3d(0, 0, 0); opacity: 1; }
 }
 
 @keyframes modalFadeOutLeft {
-  from {
-    transform: translate3d(0, 0, 0);
-    opacity: 1;
-  }
-  to {
-    transform: translate3d(-50%, 0, 0);
-    opacity: 0;
-  }
+  from { transform: translate3d(0, 0, 0); opacity: 1; }
+  to { transform: translate3d(-50%, 0, 0); opacity: 0; }
 }
 
-
-// Dialog animations for fading in and out from the right side
 @keyframes modalFadeInRight {
-  from {
-    transform: translate3d(100%, 0, 0);
-    opacity: 0;
-  }
-  to {
-    transform: translate3d(0, 0, 0);
-    opacity: 1;
-  }
+  from { transform: translate3d(100%, 0, 0); opacity: 0; }
+  to { transform: translate3d(0, 0, 0); opacity: 1; }
 }
 
 @keyframes modalFadeOutRight {
-  from {
-    transform: translate3d(0, 0, 0);
-    opacity: 1;
-  }
-  to {
-    transform: translate3d(50%, 0, 0);
-    opacity: 0;
-  }
+  from { transform: translate3d(0, 0, 0); opacity: 1; }
+  to { transform: translate3d(50%, 0, 0); opacity: 0; }
 }
 
 @keyframes overlayFade {
-  from {
-    opacity: 0;
-    transform: translateY(0);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
+  from { opacity: 0; transform: translateY(0); }
+  to { opacity: 1; transform: translateY(0); }
 }
 
 @keyframes overlayFadeOut {
-  from {
-    opacity: 1;
-  }
-  to {
-    opacity: 0;
-  }
+  from { opacity: 1; }
+  to { opacity: 0; }
 }
 
-// Dialog Styles
 .pb_dialog {
-
-  // Local Variables
   $gutter: $space_lg;
   $small: 300px;
   $status_size: 375px;
@@ -113,18 +59,6 @@
   $opacity_visible: 1;
   $opacity_hidden: 0;
 
-  .dialog_sticky_header {
-    position: sticky;
-    top: 0;
-    background-color: $white;
-    z-index: $z_8;
-  }
-
-  .dialog_status_text_align {
-    text-align: center;
-  }
-
-  // @include pb_card;
   background-color: $white;
   box-shadow: $shadow_deepest;
   border: 0;
@@ -137,224 +71,100 @@
   outline: none;
   animation-timing-function: $easeInOutQuint;
 
-  &[class*="_left"] {
-    animation-name: modalFadeInLeft;
-    &[class*="_before_close"] {
-      animation-name: modalFadeOutLeft;
-      animation-duration: $animation-duration;
-      opacity: $opacity_hidden;
-    }
-  }
-
-  &[class*="_right"] {
-    animation-name: modalFadeInRight;
-    &[class*="_before_close"] {
-      animation-name: modalFadeOutRight;
-      animation-duration: $animation-duration;
-      opacity: $opacity_hidden;
-    }
-  }
-
-  &[class*="_status_size"] {
-    width: $status_size;
-  }
-
-  &[class*="_sm"] {
-    width: $small;
-  }
-
-  &[class*="_md"] {
-    width: $medium;
-  }
-
-  &[class*="_lg"] {
-    width: $large;
-  }
+  &.pb_dialog_left { animation-name: modalFadeInLeft; }
+  &.pb_dialog_left.pb_dialog_before_close { animation-name: modalFadeOutLeft; opacity: $opacity_hidden; }
 
-  &_body_open {
-    overflow: hidden;
-  }
+  &.pb_dialog_right { animation-name: modalFadeInRight; }
+  &.pb_dialog_right.pb_dialog_before_close { animation-name: modalFadeOutRight; opacity: $opacity_hidden; }
 
-  &_after_open {
-    opacity: $opacity_visible;
-  }
+  &.pb_dialog_status_size { width: $status_size; }
+  &.pb_dialog_sm { width: $small; }
+  &.pb_dialog_md { width: $medium; }
+  &.pb_dialog_lg { width: $large; }
 
-  &[class*="_before_close"] {
-    animation-name: modalFadeOut;
-    animation-duration: $animation-duration;
-    opacity: $opacity_hidden;
-  }
+  &.pb_dialog_body_open { overflow: hidden; }
+  &.pb_dialog_after_open { opacity: $opacity_visible; }
+  &.pb_dialog_before_close { animation-name: modalFadeOut; opacity: $opacity_hidden; }
 
-  &_close_icon {
-    cursor: pointer;
-    font-size: $font_base;
-    line-height: $lh_normal;
-  }
+  &_close_icon { cursor: pointer; font-size: $font_base; line-height: $lh_normal; }
 
   &_overlay {
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    display: flex;
-    align-items: center;
-    justify-content: center;
+    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
+    display: flex; align-items: center; justify-content: center;
     background-color: rgba($bg_dark, $opacity_4);
     z-index: $z-index;
     animation-name: overlayFade;
     animation-duration: $animation-duration;
 
-    &_after_open {
-      opacity: $opacity_visible;
-    }
-    &_before_close {
-      animation-name: overlayFadeOut;
-      animation-duration: $animation-duration;
-      opacity: $opacity_hidden;
-    }
-    &[class*="full_height"] {
-      &[class*="_left"]{
-        justify-content: flex-start;
-      }
-
-      &[class*="_center"]{
-        justify-content: center;
-      }
+    &.pb_dialog_overlay_after_open { opacity: $opacity_visible; }
+    &.pb_dialog_overlay_before_close { animation-name: overlayFadeOut; opacity: $opacity_hidden; }
 
-      &[class*="_right"]{
-        justify-content: flex-end;
-      }
+    &.full_height {
+      &.pb_dialog_left { justify-content: flex-start; }
+      &.pb_dialog_center { justify-content: center; }
+      &.pb_dialog_right { justify-content: flex-end; }
 
       .pb_dialog {
         border-radius: 0;
-        height: 100%;
-        max-height: 100%;
-        max-width: none;
-        // This empty div only has height when dialog is full height
-        // Fix for dialog body content disappearing behind sticky footer
-        .dialog-pseudo-footer {
-          height: $space_xl * 2;
-        }
+        height: 100%; max-height: 100%; max-width: none;
+
+        .dialog-pseudo-footer { height: $space_xl * 2; }
+
         .dialog_footer {
-          position: fixed;
-          bottom: 0;
-          background-color: $white;
-          max-width: 100%;
-        }
-        &[class*="_sm"] {
-          width: $medium;
-          .dialog_footer {
-            width: $medium;
-          }
-        }
-        &[class*="_md"] {
-          width: $large;
-          .dialog_footer {
-            width: $large;
-          }
-        }
-        &[class*="_lg"] {
-          width: $xlarge;
-          .dialog_footer {
-            width: $xlarge;
-          }
+          position: fixed; bottom: 0;
+          background-color: $white; max-width: 100%;
         }
+
+        &.pb_dialog_sm .dialog_footer { width: $medium; }
+        &.pb_dialog_md .dialog_footer { width: $large; }
+        &.pb_dialog_lg .dialog_footer { width: $xlarge; }
       }
     }
   }
 }
 
-[class*="dialog_body"] {
-  padding: $space_sm;
-}
-
-[class*="dialog_header"] {
-  padding: $space_sm;
-}
-
-[class*="dialog_footer"] {
+.dialog_body, .dialog_header, .dialog_footer {
   padding: $space_sm;
 }
 
-//styles specific to rails version of kit
-// rails version has own wrapper because of the way the overlay functions for the HTML dialog used to create this
 .pb_dialog_wrapper_rails {
-  $medium: 500px;
-  $large: 800px;
-  $xlarge: 1150px;
-
-  .dialog_status_text_align {
-    text-align: center;
-  }
-
-  &[class*="full_height"] {
-    &[class*="_left"]{
-      .pb_dialog_rails {
-        margin: unset !important;
-        margin-right: auto !important;
-      }
-    }
+  $medium: 500px; $large: 800px; $xlarge: 1150px;
 
-    &[class*="_center"]{
-      justify-content: center;
-    }
+  .dialog_status_text_align { text-align: center; }
 
-    &[class*="_right"]{
-      .pb_dialog_rails {
-        margin: unset !important;
-        margin-left: auto !important;
-      }
-    }
+  &.full_height {
+    &.pb_dialog_left .pb_dialog_rails { margin-right: auto !important; }
+    &.pb_dialog_center { justify-content: center; }
+    &.pb_dialog_right .pb_dialog_rails { margin-left: auto !important; }
 
     .pb_dialog {
       border-radius: 0;
       height: 100% !important;
       max-height: 100% !important;
       max-width: 100%;
-      // This empty div only has height when dialog is full height.
-      // Fix for dialog body content disappearing behind sticky footer
-      .dialog-pseudo-footer {
-        height: $space_xl * 2;
-      }
+
+      .dialog-pseudo-footer { height: $space_xl * 2; }
+
       .dialog_footer {
-        position:fixed;
+        position: fixed;
         bottom: 0;
         background-color: $white;
         max-width: 100%;
       }
-      &[class*="_sm"] {
-        width: $medium;
-        .dialog_footer {
-          width: $medium;
-        }
-      }
-      &[class*="_md"] {
-        width: $large;
-        .dialog_footer {
-          width: $large;
-        }
-      }
-      &[class*="_lg"] {
-        width: $xlarge;
-        .dialog_footer {
-          width: $xlarge;
-        }
-      }
+
+      &.pb_dialog_sm .dialog_footer { width: $medium; }
+      &.pb_dialog_md .dialog_footer { width: $large; }
+      &.pb_dialog_lg .dialog_footer { width: $xlarge; }
     }
   }
 
-  // Fixes for stylesheets in nitro that were conflicting with our kit. DO NOT REMOVE.
-  // Conflicts were only apparent in nitro, not in playbook local env
   .pb_dialog_rails {
     position: fixed !important;
     top: 0 !important;
     padding: unset !important;
     margin: auto;
-
   }
 
-  // Overlay for rails kit
   dialog::backdrop {
     position: fixed;
     top: 0;
@@ -375,4 +185,3 @@
     cursor: pointer;
   }
 }
-

data/app/pb_kits/playbook/pb_distribution_bar/_distribution_bar.scss

@@ -1,6 +1,6 @@
 @import "../tokens/colors";
 
-[class^=pb_distribution_bar] {
+.pb_distribution_bar {
   $bar_colors: map-merge($data_colors, $status_colors);
   $small_bar: 8px;
   $large_bar: 36px;
@@ -27,10 +27,10 @@
       border-bottom-right-radius: $large_bar;
     }
   }
-  &[class*=_sm] {
+  &._sm {
     height: $small_bar;
   }
-  &[class*=_lg] {
+  &._lg {
     height: $large_bar;
   }
 }

data/app/pb_kits/playbook/pb_dropdown/_dropdown.scss

@@ -141,7 +141,7 @@
     }
 
     &.error {
-      [class*=pb_body_kit] {
+      .pb_body_kit {
         margin-top: $space_xs / 2;
       }
 

data/app/pb_kits/playbook/pb_filter/_filter.scss

@@ -6,7 +6,7 @@
     padding: 0 $space_sm !important;
   }
 
-  [class^=pb_button_kit][class*=_link] {
+  .pb_button_kit._link {
     flex-shrink:0;
     padding: 0 $space_xs !important;
     [id^="sort"] {
@@ -14,19 +14,19 @@
     }
   }
 
-  [class^=pb_card_body_kit][class*=_md] {
+  .pb_card_body_kit._md {
     padding: 0 !important;
   }
 }
 
-[class^=pb_filter_kit] {
-  [class^=pb_circle_icon_button_kit] {
+.pb_filter_kit {
+  .pb_circle_icon_button_kit {
     padding-left: $space_sm !important;
     padding-top: $space_sm !important;
     padding-bottom: $space_sm !important;
   }
 
-  [class^=pb-form] {
+  .pb-form {
     padding: $space_sm ;
   }
 
@@ -88,11 +88,11 @@
     z-index: 1;
   }
 
-  [class^=pb_collapsible_kit] .toggle-content.filter_section_collapsible {
+  .pb_collapsible_kit .toggle-content.filter_section_collapsible {
     padding-top: $space_xs !important;
   }
 
-  &[class*=dark] {
+  &.dark {
     .filters .filter {
     border-right: 1px solid $border_dark !important;
     }

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/_fixed_confirmation_toast.scss

@@ -13,7 +13,7 @@ $confirmation_toast_colors: (
   tip:          transparent,
 );
 
-[class^=pb_fixed_confirmation_toast_kit] {
+.pb_fixed_confirmation_toast_kit {
   display: inline-flex;
   justify-content: center;
   align-items: center;
@@ -82,7 +82,7 @@ $confirmation_toast_colors: (
         color: $white;
       }
 
-      &[class*=_multi_line] .pb_fixed_confirmation_toast_text {
+      &._multi_line .pb_fixed_confirmation_toast_text {
         color: $white;
         overflow: hidden;
         display: -webkit-box;