@times-stories/progress-indicator - npm Package Compare versions

Comparing version 1.2.2 to 1.3.1

lib/style.scss

 @import "~@times-stories/style-guide";
 
 .progressIndicator {
-  list-style-type: none;
-  max-width: 68rem;
-  margin: 0 auto;
+  position: relative;
   display: flex;
   flex-direction: row;
   justify-content: center;
-  padding: 2rem;
-  position: relative;
-  z-index: 1000;
+  align-items: center;
+  max-width: 68rem;
+  height: 6rem;
+  margin: 0 auto;
+  padding: 0 3rem;
+  list-style-type: none;
+  z-index: 20;
   transition: opacity 0.2s ease;
+  pointer-events: none;
 
-  @media screen and (min-width: $breakpoint-tablet) {
-    padding: 6rem 0;
+  @media screen and (orientation: landscape) {
+    height: 5rem;
   }
 
-  &.light {
-    li {
-      button {
-        background-color: #000;
-      }
-    }
+  @media screen and (min-width: $breakpoint-mobile) {
+    height: 6rem;
+    padding: 0;
   }
 
-  &.endPage {
-    opacity: 0;
+  @media screen and (min-width: $breakpoint-tablet) {
+    height: 8rem;
+  }
 
-    li {
-      button {
-        pointer-events: none;
-      }
-    }
+  @media screen and (min-width: $breakpoint-desktop) {
+    height: 10rem;
   }
 
   li {
+    position: relative;
     width: 3rem;
-    height: 0.3rem;
-    margin: 0 0.1rem;
-    position: relative;
+    height: 3rem;
 
+    @media screen and (min-width: $breakpoint-mobile) {
+      margin: 0 0.1rem 0 0;
+    }
+
+    button {
+      display: block;
+      width: 100%;
+      height: 100%;
+      background-color: transparent;
+      border: 0;
+      cursor: pointer;
+      pointer-events: initial;
+
+      &:after {
+        display: block;
+        content: " ";
+        height: 0.3rem;
+        background-color: white;
+        opacity: 0.4;
+      }
+    }
+
     &.chapter {
       p {
+        display: none;
         position: absolute;
-        top: 3px;
-        left: -1.5px;
-        transform: translateY(-100%);
-        font-size: 0.8rem;
+        top: 0;
+        padding-left: 0.3rem;
+        color: white;
+        font-size: 1.3rem;
         line-height: 1.2em;
+        font-family: "GillSansMTStd-Medium";
         letter-spacing: 0.2px;
-        font-family: "GillSansMTStd-Medium";
-        color: rgba(255, 255, 255, 0);
+        border-left: 1px solid white;
         white-space: pre;
         opacity: 0.4;
-        border-left: 1px solid #fff;
+        pointer-events: none;
 
         @media screen and (min-width: $breakpoint-mobile) {
-          top: 0;
-          left: 0px;
-          font-size: 1.3rem;
-          color: rgba(255, 255, 255, 1);
-          border-left: none;
+          display: block;
         }
@@ -69,22 +85,37 @@ }
     &.isActive {
+      &.chapter {
+        p {
+          opacity: 1;
+        }
+      }
+
       button {
-        opacity: 1;
+        &:after {
+          opacity: 1;
+        }
       }
+    }
+  }
 
+  &.light {
+    li {
       &.chapter {
         p {
-          opacity: 1;
+          color: black;
+          border-left: 1px solid black;
         }
       }
-    }
 
-    button {
-      display: block;
-      width: 100%;
-      height: 0.3rem;
-      border: 0;
-      background-color: #fff;
-      opacity: 0.4;
+      button {
+        &:after {
+          background-color: white;
+        }
+      }
     }
   }
+
+  &.endPage {
+    opacity: 0;
+    pointer-events: none;
+  }
 }

package.json

 {
   "name": "@times-stories/progress-indicator",
-  "version": "1.2.2",
+  "version": "1.3.1",
   "main": "lib/index.js",
@@ -16,3 +16,3 @@ "module": "lib/index.js",
     "@times-stories/context": "^1.0.6",
-    "@times-stories/style-guide": "^1.1.2",
+    "@times-stories/style-guide": "^1.2.1",
     "react": "^16.6.1",
@@ -27,3 +27,3 @@ "react-dom": "^16.6.1"
   },
-  "gitHead": "d1195f1cee387d13cd2b877da9d918d9718c15c4"
+  "gitHead": "fd618792a4280aa84fe3160c0558a9f36783a723"
 }

No alert changes

Improved metrics

Total package byte prevSize

5246

12.48%

Dependency changes

• Updated

  @times-stories/style-guide@^1.2.1