feat: add animated dot styles + todo comment to enable

boltdesignsystem · Sep 24, 2019 · 4bdbed4 · 4bdbed4
1 parent 7c68d1f
commit 4bdbed4
Showing 1 changed file with 40 additions and 0 deletions.
diff --git a/packages/micro-journeys/src/nav-shared.scss b/packages/micro-journeys/src/nav-shared.scss
@@ -1,5 +1,6 @@
 $header-text-size: 1rem;
 $header-text-line-height: 1.65;
+// @todo: switch to 20px when enabling consolidated / animated dot styles
 $nav-circle-size: 12px;
 $nav-circle-size--active: 14px;
 $nav-circle-border-size: 2px;
@@ -46,6 +47,45 @@ $nav-circle-border-size: 2px;
     border-radius: 50%;
     background-color: bolt-theme(primary);
   }
+
+  // @todo: enable animated dot + more consolidated styles
+  // @if $active {
+  //   transform: translateX(-50%) scale(0.85);
+  //   border: $nav-circle-border-size solid;
+  //   border-color: bolt-theme(
+  //     (
+  //       xdark: secondary,
+  //       dark: secondary,
+  //       light: primary,
+  //       xlight: primary,
+  //     )
+  //   );
+  //   background-color: bolt-theme(
+  //     (
+  //       xdark: primary,
+  //       dark: primary,
+  //       light: secondary,
+  //       xlight: secondary,
+  //     )
+  //   );
+  // }
+
+  // @else {
+  //   content: '';
+  //   display: inline-block;
+  //   box-sizing: content-box;
+  //   transform: translateX(-50%) scale(0.5);
+  //   z-index: 1;
+  //   width: $nav-circle-size;
+  //   height: $nav-circle-size;
+  //   margin-right: bolt-spacing(small);
+  //   border-radius: 50%;
+  //   border-width: 2px;
+  //   border-style: solid;
+  //   border-color: transparent;
+  //   background-color: bolt-theme(primary);
+  //   transition: all 0.2s ease;
+  // }
 }
 
 @mixin bolt-micro-journeys-nav-line() {