playbook_ui 14.25.0.pre.alpha.PLAY2361datepickerarrownav9708 → 14.25.0.pre.alpha.testingcss9713

data/app/pb_kits/playbook/pb_progress_simple/_progress_simple.scss

@@ -4,49 +4,49 @@
 
 $pb_progress_simple_height: 4px;
 
-[class^=pb_progress_simple_wrapper] {
+.pb_progress_simple_wrapper {
   display: flex;
   justify-content: flex-start;
   align-items: center;
 
-  &[class*=_center] {
+  &._center {
     justify-content: center;
   }
 
-  &[class*=_right] {
+  &._right {
     justify-content: flex-end;
   }
 }
 
-[class^=pb_progress_simple_kit] {
+.pb_progress_simple_kit {
   width: 100%;
   height: $pb_progress_simple_height;
   border-radius: $pb_progress_simple_height/2;
   background: rgba($primary, $opacity-1);
-    &[class*=_positive] {
+    &._positive {
       .progress_simple_value {
         background: $success;
       }
     }
-    &[class*=_negative] {
+    &._negative {
       .progress_simple_value {
         background: $error;
       }
     }
-    &[class*=_warning] {
+    &._warning {
       .progress_simple_value {
         background: $warning;
       }
     }
 
-  [class^=progress_simple_value] {
+  .progress_simple_value {
     width: 0%;
     height: 100%;
     border-radius: $pb_progress_simple_height/2;
     background: $primary;
   }
 
-  &[class*=_muted] {
+  &._muted {
     background: rgba($slate, $opacity-2);
 
     .progress_simple_value {
@@ -54,7 +54,7 @@ $pb_progress_simple_height: 4px;
     }
   }
 
-  &[class*=_right] {
+  &._right {
     display: flex;
     align-self: flex-end;
   }

data/app/pb_kits/playbook/pb_progress_step/_progress_step.scss

@@ -6,10 +6,10 @@
 
 
 
-[class^=pb_progress_step_kit]{
+.pb_progress_step_kit{
     list-style:none;
     display: flex;
-  [class*=pb_progress_step_item] {
+  .pb_progress_step_item {
     display:flex;
     flex-direction:column;
     position: relative;
@@ -46,13 +46,13 @@
         display:none;
     }
 
-    &[class*=_inactive]{
+    &._inactive{
         .circle{
             background-color: $border_light;
             color: $border_light;
         }
     }
-    &[class*=_active]{
+    &._active{
         .circle{
             background-color: $white;
             border: solid 2px $primary;
@@ -62,7 +62,7 @@
             background-color: $primary;
         }
     }
-    &[class*=_complete]{
+    &._complete{
         .circle{
             background-color: $primary;
             color:$white;
@@ -73,14 +73,14 @@
     }
   }
 // Start of Horizontal
-  &[class*=horizontal]{
+  &.horizontal{
     flex-direction: row;
-    [class*=pb_progress_step_item]{
+    .pb_progress_step_item{
         align-items: flex-end;
         &::before{
             width: calc(100% + .04em);
         }
-        [class*=box]{
+        .box{
            display: flex;
            flex-direction: column;
            align-items: center;
@@ -107,12 +107,12 @@
         }
     }
     // Start of Tracker
-    &[class*=tracker] {
+    &.tracker {
         background-color: $border_light;
         border-radius: 1rem;
         height:24px;
         align-items: center;
-        [class*=box]{
+        .box{
             .circle{
                 box-shadow: none;
                 height: 24px;
@@ -124,7 +124,7 @@
                 position: absolute;  
             }
         }
-        li[class*=pb_progress_step_item]{
+        li.pb_progress_step_item{
             &::before{
                 background-color: $border_light;
                 height: 24px;
@@ -147,7 +147,7 @@
                 }
             }
         }
-        li[class*=_active]{
+        li._active{
             .circle{
                 height: 24px;
                 width: 24px;
@@ -161,7 +161,7 @@
                 background-color: $primary;
             }
         }
-        li[class*=_inactive]{
+        li._inactive{
             &::before {
                 display: none;
                 background-color: $border_light;
@@ -172,7 +172,7 @@
             }
             
         }
-        li[class*=_complete]{
+        li._complete{
             &::before {
                 background-color: $primary;
             }
@@ -180,38 +180,38 @@
                 background-color: darken($primary,25%);
             }
         }
-        li[class*=_hidden]{
+        li._hidden{
             &::before, .circle {
                 display: none;
             }
         }
-        li[class*=_hidden] ~ li[class*=_active],
-        li[class*=_hidden] ~ li[class*=_complete] {
+        li._hidden ~ li._active,
+        li._hidden ~ li._complete {
             &::before {
                 width: calc(200% + 1.5em);
             }
         }
-        &[class*=dark]{
+        &.dark{
             background-color: tint($bg_dark,20%);
-            [class*=_inactive]{
+            ._inactive{
                 .circle{
                     border-color: tint($bg_dark,20%);
                 }
             }
         }
-        &[class*=info]{
-            li[class*=inactive] .circle{
+        &.info{
+            li.inactive .circle{
                 border-color: $border_light;
             }
-            .box .circle , li[class*=_active] .circle{
+            .box .circle , li._active .circle{
                 border-color: $teal;
             }
-            li[class*=_complete],li[class*=_active]{
+            li._complete,li._active{
                 &::before {
                     background-color: $teal;
                 }
             }
-            li[class*=_complete] .circle{
+            li._complete .circle{
                 background-color: darken($teal,25%);
             }
         }
@@ -222,10 +222,10 @@
 // End of Horizontal
 
 // Start of Vertical
-  &[class*=vertical]{
+  &.vertical{
     flex-direction: column; 
-    [class*=pb_progress_step_item]{
-        [class*=box]{
+    .pb_progress_step_item{
+        .box{
         display:flex;
         flex-direction: row;
         align-items: flex-start;
@@ -252,10 +252,10 @@
     }
   }
 //End of Vertical
-  &[class*=icon]{
-    [class*=progress_step_item][class*=_complete],
-    [class*=progress_step_item][class*=_active] {
-        [class*=box] .circle svg {
+  &.icon{
+    .progress_step_item._complete,
+    .progress_step_item._active {
+        .box .circle svg {
             opacity: 1;
             
         }
@@ -263,8 +263,8 @@
     }
 
 
-  &[class*=dark] {
-    [class*=progress_step_item]{
+  &.dark {
+    .progress_step_item{
         &::before{
             background-color: tint($bg_dark,20%);
         }
@@ -272,7 +272,7 @@
     .circle{
         box-shadow: 0 0 0 2px tint($bg_dark,10%);
     }
-    [class*=active]{
+    .active{
         .circle{
             background-color: tint($bg_dark,10%);
         }
@@ -280,12 +280,12 @@
             background-color: $primary;
         }
     }
-    [class*=inactive]{
+    .inactive{
         .circle, &::before{
            background-color: tint($bg_dark,20%);
         }
     }
-    [class*=complete]{
+    .complete{
         .circle, &::before{
            background-color: $primary;
         }

data/app/pb_kits/playbook/pb_rich_text_editor/_rich_text_editor.scss

@@ -10,7 +10,7 @@
 @import "./trix_styles";
 @import "./tiptap_styles";
 
-[class^=pb_rich_text_editor_kit] {
+.pb_rich_text_editor_kit {
   // Disables File Attatchment Button in Toolbar
   trix-toolbar [data-trix-button-group="file-tools"] {
     display: none;
@@ -126,7 +126,7 @@
   }
   // Trix doesn't provide customization to their icons.
   // https://github.com/basecamp/trix/issues/464#issuecomment-564683997
-  &[class*=dark] {
+  &.dark {
     // Dark SVG Icon Styles
     .trix-button--icon-bold::before {
       background-image: url("data:image/svg+xml,%3Csvg width='11px' height='14px' viewBox='0 0 11 14' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cg id='Symbols' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd' fill-opacity='0.6'%3E%3Cg id='Rich-Text/Dark/Field-Only/Empty' transform='translate(-19.000000, -17.000000)' fill='%23FFFFFF' fill-rule='nonzero'%3E%3Cg id='Styling1' transform='translate(7.000000, 7.000000)'%3E%3Cpath d='M20.6,16.79 C21.565,16.115 22.25,15.025 22.25,14 C22.25,11.745 20.505,10 18.25,10 L12,10 L12,24 L19.04,24 C21.135,24 22.75,22.3 22.75,20.21 C22.75,18.69 21.885,17.395 20.6,16.79 Z M15,12.5 L18,12.5 C18.83,12.5 19.5,13.17 19.5,14 C19.5,14.83 18.83,15.5 18,15.5 L15,15.5 L15,12.5 L15,12.5 Z M18.5,21.5 L15,21.5 L15,18.5 L18.5,18.5 C19.33,18.5 20,19.17 20,20 C20,20.83 19.33,21.5 18.5,21.5 Z' id='Shape'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
@@ -291,14 +291,14 @@
         background-color: $focus_input_light;
       }
     }
-    &[class*=dark]:hover {
+    &.dark:hover {
       .trix-button-row,
       trix-editor {
         background-color: rgba($white, 0.1);
         border-color: rgba($white, 0.15);
       }
     }
-    &[class*=dark]:focus-within {
+    &.dark:focus-within {
       .trix-button-row,
       trix-editor {
         background-color: rgba($white, 0.03);

data/app/pb_kits/playbook/pb_section_separator/_section_separator.scss

@@ -18,7 +18,7 @@ $section_colors_dark: (
   card:         tint($bg_dark,10),
 );
 
-[class^=pb_section_separator_kit] {
+.pb_section_separator_kit {
   display: flex;
   justify-content: center;
   align-items: center;
@@ -48,16 +48,16 @@ $section_colors_dark: (
         background: $color_value;
       }
 
-      &[class*=_vertical] {
+      &._vertical {
         &::after {
           background: $color_value;
         }
       }
-      &[class*=_dashed] {
+      &._dashed {
         &::before, &::after {
           border: 1px dashed $color_value;
         }
-        &[class*=_vertical] {
+        &._vertical {
           &::after {
             border: 1px dashed $color_value;
             background: none;
@@ -67,10 +67,10 @@ $section_colors_dark: (
     }
   }
 
-  &[class*=_horizontal] {
+  &._horizontal {
     justify-content: center;
   }
-  &[class*=_vertical] {
+  &._vertical {
     margin-left: $space_xs;
     margin-right: $space_xs;
     &::before {
@@ -81,7 +81,7 @@ $section_colors_dark: (
     }
   }
 
-  &[class*=_dashed] {
+  &._dashed {
     &::before, &::after {
       @include section_separator_dashed(false);
     }
@@ -96,19 +96,19 @@ $section_colors_dark: (
           background: $color_value;
         }
 
-        &[class*=_vertical] {
+        &._vertical {
           &::after {
             @include section_separator_vertical(false);
             background: $color_value;
           }
         }
 
-        &[class*=_dashed] {
+        &._dashed {
           &::before, &::after {
             border: 1px dashed $color_value;
             background: none;
           }
-          &[class*=_vertical] {
+          &._vertical {
             &::after {
               border: 1px dashed $color_value;
               background: none;
@@ -123,12 +123,12 @@ $section_colors_dark: (
     &::after {
       @include section_separator_horizontal(true);
     }
-    &[class*=_vertical] {
+    &._vertical {
       &::after {
         @include section_separator_vertical(true);
       }
     }
-    &[class*=_dashed] {
+    &._dashed {
       &::before, &::after {
         @include section_separator_dashed(true);
       }

data/app/pb_kits/playbook/pb_select/_select.scss

@@ -4,7 +4,7 @@
 @import "../tokens/colors";
 @import "../tokens/spacing";
 
-[class^=pb_select] {
+.pb_select {
   select {
     @include pb_textarea_light;
     @include pb_body_light;
@@ -80,7 +80,7 @@
     position: relative;
     display: block;
     &.error {
-      [class*=pb_body_kit] {
+      .pb_body_kit {
         margin-top: $space_xs / 2;
       }
       > select:first-child {
@@ -157,7 +157,7 @@
   }
 }
 
-[class^=pb_select].dark {
+.pb_select.dark {
   select {
     @include pb_textarea_dark;
     @include pb_body_light_dark;

data/app/pb_kits/playbook/pb_selectable_card/_selectable_card.scss

@@ -28,7 +28,7 @@ $pb_selectable_paddings: (
   py: ("padding-top", "padding-bottom")
 );
 
-[class^=pb_selectable_card_kit] {
+.pb_selectable_card_kit {
   display: block;
   margin-bottom: 0;
 

data/app/pb_kits/playbook/pb_selectable_card_icon/_selectable_card_icon.scss

@@ -1,9 +1,9 @@
-[class^=pb_selectable_card_icon_kit] {
+.pb_selectable_card_icon_kit {
 
 	text-align: center;
 	user-select: none;
 
-  .buffer > [class*=pb_selectable_icon_kit]::before {
+  .buffer > .pb_selectable_icon_kit::before {
     content: '';
     position: absolute;
     width: 100%;
@@ -12,7 +12,7 @@
     left: 0;
   }
 
-  .buffer > [class*=pb_selectable_icon_kit] {
+  .buffer > .pb_selectable_icon_kit {
     @media (hover:hover) {
       &:hover * {
             transition: transform $transition_short ease;
@@ -42,7 +42,7 @@
       }
     }
 
-    &[class*=_disabled] {
+    &._disabled {
       opacity: $opacity_6;
       cursor: not-allowed;
 
@@ -79,15 +79,15 @@
     }
   }
 
-  [class^=pb_selectable_icon_kit] {
+  .pb_selectable_icon_kit {
     margin-bottom: 0px;
   }
 
-  [class^=pb_body_kit_light] {
+  .pb_body_kit_light {
     margin-top: $space_xs;
   }
 
-  [class^=pb_selectable_card_kit] {
+  .pb_selectable_card_kit {
     margin-bottom: 0px !important;
   }
 }

data/app/pb_kits/playbook/pb_selectable_icon/_selectable_icon.scss

@@ -1,6 +1,6 @@
 @import "../tokens/transition";
 
-[class^=pb_selectable_icon] {
+.pb_selectable_icon {
 
 	text-align: center;
 	cursor: pointer;
@@ -27,7 +27,7 @@
 		transition: color $transition_short ease;
 	}
 
-	&[class*=_disabled] {
+	&._disabled {
 		opacity: $opacity_6;
 		cursor: not-allowed;
 		* {

data/app/pb_kits/playbook/pb_selectable_list/_selectable_list.scss

@@ -1,20 +1,20 @@
 @import "../tokens/colors";
 @import "../tokens/spacing";
 
-[class^=pb_selectable_list]{
+.pb_selectable_list{
   margin-bottom: 0px;
-  [class^=pb_item_kit] {
+  .pb_item_kit {
     &:hover {
       background-color: $bg_light;
     }
-    &[class*=checked_item] {
+    &.checked_item {
       background-color: $active_light;
     }
   }
-  [class^=pb_radio_kit] {
+  .pb_radio_kit {
     margin-left: $space_xs;
   }
-  [class^=pb_checkbox_kit] {
+  .pb_checkbox_kit {
     margin-left: $space_xs;
   }
 }

data/app/pb_kits/playbook/pb_source/_source.scss

@@ -1,27 +1,27 @@
 @import "../tokens/spacing";
 
-[class^=pb_source] {
-  [class^=pb__source_layout] {
+.pb_source {
+  .pb__source_layout {
     display: flex;
     justify-content: flex-start;
     align-items: flex-start;
   }
 
-  [class^=pb_icon_circle],
-  [class^=pb_avatar] {
+  .pb_icon_circle,
+  .pb_avatar {
     margin-right: $space-sm;
   }
 
-  [class^=pb__source_content] {
+  .pb__source_content {
     display: block;
     flex-grow: 1;
 
-    [class^=pb__source_value] {
+    .pb__source_value {
       display: flex;
       justify-content: flex-start;
       align-items: baseline;
 
-      [class^=pb_body] {
+      .pb_body {
         margin-right: $space-xs;
       }
     }

data/app/pb_kits/playbook/pb_star_rating/_star_rating.scss

@@ -3,7 +3,7 @@
 @import "../tokens/spacing";
 
 
-[class*=pb_star_rating_kit] {
+.pb_star_rating_kit {
   display: flex;
   align-items: flex-end;
   justify-content: flex-start;

data/app/pb_kits/playbook/pb_stat_value/_stat_value.scss

@@ -1,7 +1,7 @@
 @import "../pb_title/title";
 
-[class^=pb_stat_value_kit]{
-  [class^=pb_stat_value_wrapper] {
+.pb_stat_value_kit{
+  .pb_stat_value_wrapper {
     display: flex;
     justify-content: flex-start;
     align-items: baseline;

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

@@ -1,4 +1,4 @@
-[class^=pb_table] {
+.pb_table {
     tr {
         vertical-align: top;
     }

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

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

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

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

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

@@ -1,6 +1,6 @@
 @import "../../pb_caption/caption_mixin";
 
-[class^=pb_table] {
+.pb_table {
   &.table-sm,
   &.table-md,
   &.table-lg {

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

@@ -3,7 +3,7 @@
 $transition-speed: 0.2s;
 $border_hover_color_dark: lighten($border_dark, 5%);
 
-[class^=pb_table] {
+.pb_table {
   &.table-sm,
   &.table-md,
   &.table-lg {

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

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

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

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

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

@@ -1,6 +1,6 @@
 @import "../../tokens/spacing";
 
-[class^=pb_table] {
+.pb_table {
   @each $name, $value in $spaces {
     &.outer_padding_#{$name} {
       td:first-child,

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

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