Carousel: Use the counter as a component

- Add animation when changing photos - Reusable and scalable to more than XX photos
2020-03-10 21:22:53 +01:00
parent a60a67a892
commit cc0d6c1dcd
5 changed files with 77 additions and 23 deletions
--- a/src/style/atoms/_counter.scss
+++ b/src/style/atoms/_counter.scss
@@ -0,0 +1,22 @@
+// Counter
+.counter {
+    display: inline-flex;
+    justify-content: center;
+    font-family: $font-serif-extra;
+    font-size: pxVW(672);
+    color: rgba($color-tertiary, 0.4);
+    text-align: center;
+    // pointer-events: none;
+    // user-select: none;
+
+    // Column
+    &__column {
+        display: flex;
+        flex-direction: column;
+        line-height: 0.85;
+        text-align: right;
+        margin: 0 -16px;
+        transition: transform 0.6s $ease-quart;
+        will-change: transform;
+    }
+}