playbook_ui 12.39.0 → 13.0.0.pre.alpha.PLAY966collapsiblenav41126

data/app/pb_kits/playbook/pb_nav/_collapsible_nav.scss

@@ -3,74 +3,43 @@
 @import "../tokens/border_radius";
 @import "../tokens/titles";
 @import "../tokens/typography";
-@import "./mixins";
+@import "./collapsible_trail_mixin";
 
-[class^="pb_nav_list"] {
-  .font_size_small {
-    .pb_nav_list_item_text,
-    .pb_nav_list_item_text_collapsible {
-      font-size: $font_small !important;
-    }
-  }
-
-  .font_bolder {
-    .pb_nav_list_item_text {
-      @include pb_title_4;
-    }
-    .pb_collapsible_main_kit {
-      .pb_nav_list_item_text_collapsible {
-        @include pb_title_4;
-        font-weight: $bolder !important;
-      }
-    }
-  }
-
-  .font_bold {
-    .pb_nav_list_item_text {
-      font-weight: $bold;
-    }
-    .pb_collapsible_main_kit {
-      .pb_nav_list_item_text_collapsible {
-        font-weight: $bold !important;
-      }
-    }
-  }
-
-  .font_regular {
-    .pb_nav_list_item_text {
-      font-weight: $regular;
-    }
-    .pb_collapsible_main_kit {
-      .pb_nav_list_item_text_collapsible {
-        font-weight: $regular !important;
-      }
-    }
+[class^="pb_nav_list"][class*="_vertical"] {
+  .pb_collapsible_main_kit,
+  .pb_collapsible_content_kit,
+  .pb_collapsible_kit {
+    padding: 0 !important;
   }
 
   //styling for default variant with collapsible
   &[class*="_normal"] {
-    [class*="pb_collapsible_nav_item"] {
+    .pb_collapsible_kit {
+      &[class*="_active"] {
+        background-color: unset;
+      }
+      &[class*="_collapsible_trail"] {
+        .pb_collapsible_content_kit {
+          &::after {
+            left: 0px !important;
+          }
+        }
+      }
       .pb_collapsible_content_kit {
         margin-left: $space_lg + 3;
       }
       .pb_collapsible_main_kit {
         border-radius: unset;
+        margin: 0;
       }
       &[class*="_active"] {
         .pb_collapsible_main_kit {
           background-color: $active_light;
         }
-        .pb_nav_list_item_link {
-          border-color: transparent !important;
-          .pb_nav_list_item_text {
-            color: unset !important;
-            font-weight: $regular !important;
-          }
-        }
       }
-
-      &.dark {
-        border-color: $border_dark;
+    }
+    &.dark {
+      .pb_collapsible_kit {
         .pb_collapsible_main_kit:hover {
           .pb_nav_list_item_text_collapsible {
             color: $white !important;
@@ -91,16 +60,17 @@
 
   //styling bold variant to work with collapsible
   &[class*="_bold"] {
-    [class*="pb_collapsible_nav_item"] {
+    .pb_collapsible_kit {
       &[class*="_active"] {
+        background-color: unset;
         .pb_collapsible_main_kit {
-          background-color: $primary !important;
+          background-color: $primary;
           border-radius: $border_rad_heavier;
           .pb_nav_list_item_text_collapsible,
           .pb_nav_list_item_icon_collapsible,
           .icon_wrapper,
           .pb_icon_kit {
-            color: $white !important;
+            color: $white;
           }
         }
         .pb_nav_list_item_link {
@@ -109,11 +79,28 @@
           &:hover {
             background-color: rgba($primary, 0.03) !important;
             .pb_nav_list_item_text {
-              color: $primary !important;
+              color: $primary;
             }
           }
           .pb_nav_list_item_text {
-            font-weight: $regular !important;
+            font-weight: $regular;
+          }
+        }
+        .icon_wrapper:hover {
+          background-color: mix($primary, $card_light, 40%);
+        }
+      }
+    }
+    &.dark {
+      .pb_collapsible_kit {
+        &[class*="_active"] {
+          .pb_collapsible_main_kit {
+            background-color: $primary;
+          }
+          .pb_nav_list_item_link {
+            &:hover {
+              background-color: rgba($white, $opacity_1) !important;
+            }
           }
         }
       }
@@ -122,33 +109,30 @@
 
   //styling for subtle variant with collapsible
   &[class*="_subtle"] {
-    [class*="pb_collapsible_nav_item"] {
+    .pb_collapsible_kit {
       &[class*="_active"] {
+        background-color: unset;
         .pb_collapsible_main_kit {
-          background-color: $primary !important;
+          background-color: $active_light;
           border-radius: $border_rad_heavier;
           .pb_nav_list_item_text_collapsible,
-          .pb_nav_list_item_icon_collapsible,
-          .icon_wrapper,
-          .pb_icon_kit {
-            color: $white !important;
+          .pb_nav_list_item_icon_collapsible {
+            color: $primary;
           }
         }
-
         &:hover {
           background-color: unset;
         }
-        .pb_collapsible_main_kit:hover {
-          .pb_nav_list_item_text_collapsible {
-            color: $white !important;
-          }
-        }
-
-        .icon_wrapper {
-          &:hover {
-            background-color: mix($primary, $card_light, 40%);
-            .pb_icon_kit {
-              color: $primary !important;
+      }
+    }
+    &.dark {
+      .pb_collapsible_kit {
+        &[class*="_active"] {
+          .pb_collapsible_main_kit {
+            background-color: mix($white, $card_dark, 20%) !important;
+            .pb_nav_list_item_text_collapsible,
+            svg {
+              color: $white !important;
             }
           }
         }
@@ -156,16 +140,20 @@
     }
   }
 
-  [class*="pb_collapsible_nav_item"] {
-    .pb_nav_list_kit_item {
-      margin-right: 0px !important;
+  .pb_collapsible_kit {
+    [class*="pb_collapsible_nav_item"][class*="pb_nav_list_item_link_collapsible"][class*="pb_nav_list_kit_item"] {
+      margin: 0px;
+      &[class*="_active"] {
+        background-color: unset;
+        box-shadow: unset;
+        .pb_nav_list_item_text_collapsible {
+          color: unset;
+        }
+      }
     }
 
-    &[class*="_active"] {
-      background-color: unset !important;
-      .pb_nav_list_item_link {
-        color: unset !important;
-      }
+    &[class*="_collapsible_trail"] {
+      @include collapsible_trail_class;
     }
 
     .pb_nav_list_item_link_collapsible {
@@ -175,6 +163,7 @@
     }
 
     .pb_collapsible_main_kit {
+      margin: $space_xs ($space_sm - 2px);
       &:focus-visible {
         box-shadow: 0px 0px 0px 2px $primary_action;
         border-radius: $border_rad_heavier;
@@ -194,10 +183,9 @@
       }
     }
 
-    // vertical line on left of collapsible content
+    // indention on left of collapsible content
     .pb_collapsible_content_kit {
-      margin-left: $space_sm + 2;
-      border-left: 1px solid transparent;
+      margin-left: $space_lg - 2;
     }
 
     .pb_collapsible_main_kit {
@@ -209,21 +197,11 @@
         background-color: mix($primary, $card_light, 10%);
         .pb_nav_list_item_text_collapsible,
         svg {
-          color: $primary !important;
+          color: $primary;
         }
       }
     }
 
-    .pb_collapsible_main_kit,
-    .pb_collapsible_content_kit,
-    .pb_collapsible_kit {
-      padding: 0 !important;
-    }
-
-    &[class*="_collapsible_trail"] {
-      @include collapsible_trail_class;
-    }
-
     .icon_wrapper {
       border-radius: $border_radius_rounded;
       width: $space_sm + 3;
@@ -236,22 +214,18 @@
         background-color: mix($primary, $card_light, 40%);
       }
     }
-
-    &.dark {
-      .pb_nav_list_kit_item {
-        border-color: $border_dark;
-        .pb_nav_list_item_text {
-          color: $text_dk_light !important;
-        }
-      }
+  }
+  &.dark {
+    .pb_collapsible_kit {
       &[class*="pb_nav_list_kit_item"] [class*="_link"]:hover {
         .pb_nav_list_item_text {
           color: $white !important;
         }
       }
-
-      .pb_nav_list_item_text_collapsible {
-        color: $white !important;
+      [class*="pb_collapsible_nav_item"][class*="pb_nav_list_item_link_collapsible"][class*="pb_nav_list_kit_item"] {
+        .pb_nav_list_item_text_collapsible {
+          color: $white !important;
+        }
       }
       .pb_nav_list_item_text {
         color: $text_dk_light;
@@ -274,15 +248,12 @@
       .icon_wrapper:hover {
         background-color: mix($white, $card_dark, 40%);
       }
-      &[class*="_active"] {
-        .icon_wrapper:hover {
-          background-color: mix($primary, $card_light, 40%);
-        }
-      }
 
-      &[class*="pb_collapsible_nav_item"][class*="_collapsible_trail"] {
+      &[class*="_collapsible_trail"] {
         .pb_collapsible_content_kit {
-          border-color: $border_dark;
+          &::after {
+            background-color: $border_dark;
+          }
         }
       }
     }

data/app/pb_kits/playbook/pb_nav/_collapsible_trail_mixin.scss

@@ -0,0 +1,14 @@
+@mixin collapsible_trail_class {
+    .pb_collapsible_content_kit {
+      position: relative;
+      &::after {
+        content: "";
+        position: absolute;
+        top: 4px;
+        bottom: 4px;
+        left: 5px;
+        width: 1px; 
+        background-color: $border_light;
+      }
+    }
+  }

data/app/pb_kits/playbook/pb_nav/_horizontal_nav.scss

@@ -8,8 +8,8 @@
 
 $selector: ".pb_nav_list";
 
-[class^=pb_nav_list][class*=_horizontal] {
-  ul {
+[class^="pb_nav_list"][class*="_horizontal"] {
+  .pb_nav_wrapper {
     display: flex;
     align-items: center;
     padding: 0;
@@ -17,13 +17,13 @@ $selector: ".pb_nav_list";
     list-style: none;
   }
 
-  [class*=pb_nav_list_kit_item] {
+  [class*="pb_nav_list_kit_item"][class*="pb_nav_list_item"] {
     transition-property: border-color;
     transition-duration: 0.15s;
     transition-timing-function: $bezier;
     padding: 0;
 
-    [class*=_link] {
+    &[class*="_link"] {
       text-decoration: none;
       display: flex;
       align-items: center;
@@ -36,19 +36,19 @@ $selector: ".pb_nav_list";
       transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
       color: $text_lt_default;
 
-      [class*=_icon_left] {
+      [class*="_icon_left"] {
         font-size: $font_large;
         margin-right: $space_sm;
         color: $text_lt_lighter;
       }
 
-      [class*=_text] {
+      [class*="_text"] {
         font-size: $font_base;
-        font-weight: $bold;
         color: $text_lt_default;
+        font-weight: $bold;
       }
 
-      @media (hover:hover) {
+      @media (hover: hover) {
         &:hover {
           color: $primary;
           #{$selector}_item_icon,
@@ -57,84 +57,85 @@ $selector: ".pb_nav_list";
           }
         }
       }
-    }
-  }
-
-  [class*=_active] {
-    #{$selector}_item_link {
-      border-color: $primary;
-
-      [class*=_item_icon] {
-        color: $text_lt_default;
-      }
-
-      [class*=_item_text] {
-        color: $text_lt_default;
-        font-weight: $bold;
+      &[class*="_active"] {
+        border-color: $primary;
+        [class*="_item_icon"] {
+          color: $text_lt_default;
+        }
+        [class*="_item_text"] {
+          color: $text_lt_default;
+          font-weight: $bold;
+        }
+        &:hover {
+          #{$selector}_item_icon,
+          #{$selector}_item_text {
+            color: $primary;
+          }
+        }
       }
     }
   }
 
   // Subtle Variant
-  &[class*=_subtle] {
+  &[class*="_subtle"] {
     @include subtle;
     // Horizontal Overrides
-    [class*=pb_nav_list_kit_item] {
+    [class*="pb_nav_list_kit_item"][class*="pb_nav_list_item"] {
       margin: 0;
-      [class*=_item_text]{
-        font-weight: $regular;
-      }
-    }
-    [class*=_active] {
-      background-color: $active_light;
-      &[class*=dark] {
-        background-color: rgba($white, $opacity_1);
+      [class*="_item_text"] {
+        font-weight: $regular !important;
       }
-      [class*=_item_link] {
-        [class*=_item_text]{
-          color: $primary;
+      &[class*="_active"] {
+        background-color: $active_light;
+        &[class*="dark"] {
+          background-color: rgba($white, $opacity_1);
+          [class*="_item_text"] {
+            color: $white !important;
+          }
+        }
+        [class*="_item_text"] {
+          color: $primary !important;
         }
       }
     }
   }
 
   // Bold Variant
-  &[class*=_bold] {
+  &[class*="_bold"] {
     @include bold;
     // Horizontal Overrides
-    [class*=pb_nav_list_kit_item] {
+    [class*="pb_nav_list_kit_item"][class*="pb_nav_list_item"] {
       margin: 0;
-      [class*=_item_text]{
+      [class*="_item_text"] {
         font-weight: $regular;
       }
     }
-    [class*=_active] {
-      [class*=_text] {
-        color: $white;
+    [class*="_active"] {
+      [class*="_text"] {
+        color: $white !important;
       }
     }
   }
 
-  &[class*=dark]{
-    [class*=pb_nav_list_kit_item]{
-      [class*=_link]{
-        border-color: rgba($white, $opacity_3);
-      }
-      &[class*=_active] [class*=_link]{
+  &[class*="dark"] {
+    [class*="pb_nav_list_kit_item"][class*="pb_nav_list_item"] {
+      border-color: rgba($white, $opacity_3);
+      &[class*="_active"] {
         border-color: $active_dark;
-        [class*=_text],[class*=_icon]{
+        [class*="_text"],
+        [class*="_icon"] {
           color: $text_dk_default;
         }
       }
-      [class*=_link] {
-        [class*=_text],[class*=_icon]{
-          color: $text_dk_lighter;
-        }
-        &:hover{
-          background-color: rgba($white, $opacity_1);
-          [class*=_icon],[class*=_text] {
-            color: $white;
-          }
+      [class*="_text"],
+      [class*="_icon"] {
+        color: $text_dk_lighter;
+      }
+      &:hover {
+        background-color: rgba($white, $opacity_1);
+        [class*="_icon"],
+        [class*="_text"] {
+          color: $white !important;
         }
       }
     }