@asd20/ui 3.2.727 → 3.2.729

package/package.json

@@ -5,7 +5,7 @@
     "*.scss",
     "*.vue"
   ],
-  "version": "3.2.727",
+  "version": "3.2.729",
   "private": false,
   "license": "MIT",
   "repository": {

package/src/components/molecules/Asd20Swiper/index.vue

@@ -5,7 +5,7 @@
       tabindex="-1"
       ref="prev"
       title="Previous"
-      class="asd20-swiper__prev"
+      class="asd20-swiper__prev circle -left"
     >
       <span>Previous Tile</span>
     </button>
@@ -23,7 +23,7 @@
       tabindex="-1"
       ref="next"
       title="Next"
-      class="asd20-swiper__next"
+      class="asd20-swiper__next circle -right"
     >
       <span>Next Tile</span>
     </button>
@@ -143,6 +143,46 @@ export default {
 @import '../../../design/_mixins.scss';
 @import '../../../design/_variables.scss';
 
+// Use even-numbered diameters for smooth rendering
+@mixin icon-circle-with-triangle(
+  $diameter: 2rem,
+  $arrow-width: 0.8rem,
+  $color: var(--color__primary),
+  $background: #ffffff
+) {
+  // display: inline-block;
+  vertical-align: middle;
+  // position: relative;
+  width: $diameter;
+  height: $diameter;
+  background: $background;
+  border-radius: 3rem;
+  transform: rotate(90deg);
+  &:after {
+    position: absolute;
+    content: '';
+    top: 50%;
+    left: 50%;
+    border: $arrow-width solid transparent;
+    border-bottom: $arrow-width solid $color;
+    transform: translateX(-50%) translateY(-85%);
+  }
+}
+
+.circle {
+  &.-right {
+    transform: translateY(-50%) rotate(90deg);
+  }
+  &.-bottom {
+    transform: translateY(-50%) rotate(180deg);
+  }
+  &.-left {
+    transform: translateY(-50%) rotate(270deg);
+  }
+}
+.circle {
+  @include icon-circle-with-triangle();
+}
 .asd20-swiper {
   --fade-stop: 100%;
   position: relative;
@@ -154,27 +194,12 @@ export default {
   &__prev,
   &__next {
     cursor: pointer;
-    position: relative;
     appearance: none;
-    border: none;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    padding: 0;
-    margin: 0;
-    background-image: linear-gradient(
-      90deg,
-      var(--color__fade-overlay-left, var(--website-page__background-color)) 25%,
-      transparent var(--fade-stop)
-    );
-    background-color: transparent;
     position: absolute;
-    top: space(1);
+    top: 50%;
     left: 0;
     bottom: space(1);
-    width: space(2);
     z-index: 2;
-    border-radius: var(--website-shape__radius);
 
     &.swiper-button-disabled {
       display: none;
@@ -184,58 +209,19 @@ export default {
       display: none;
     }
 
-    &::after {
-      content: '>';
-      display: block;
-      border: 5px solid transparent;
-      line-height: 2.0625rem;
-      font-size: 1.5rem;
-      font-weight: 700;
-      width: 2rem;
-      height: 2rem;
-      // border-top-color: var(--color__on-bg-default);
-      // border-right-color: var(--color__on-bg-default);
-      border: 2px solid #000000;
-      border-radius: 2rem;
-      transform: rotate(180deg);
-      // opacity: 0.5;
-      transition: opacity 0.1s ease-out;
-      background: #ffffff;
-    }
-
     &:hover {
       --fade-stop: 150%;
-      // background-color: var(--color__fade-overlay);
-      &::after {
-        opacity: 1;
-        border: 3px solid #000000;
-      }
     }
 
     &:focus,
     &:active {
-      // outline: none;
       box-shadow: none;
       outline: none;
     }
   }
-  &__prev {
-    border-top-left-radius: 0;
-    border-bottom-left-radius: 0;
-  }
   &__next {
-    background-image: linear-gradient(
-      -90deg,
-      var(--color__fade-overlay-right, var(--website-page__background-color)) 0%,
-      transparent var(--fade-stop)
-    );
     left: auto;
     right: 0;
-    border-top-right-radius: 0;
-    border-bottom-right-radius: 0;
-    &::after {
-      transform: rotate(0deg);
-    }
   }
   .swiper-container {
     overflow: visible;
@@ -258,20 +244,19 @@ export default {
     z-index: 2;
   }
 }
+
+@media (min-width: 768px) {
+  .circle {
+    @include icon-circle-with-triangle($diameter: 3rem, $arrow-width: 1rem);
+  }
+}
 @media (min-width: 1024px) {
+  .circle {
+    @include icon-circle-with-triangle($diameter: 4rem, $arrow-width: 1.2rem);
+  }
   .asd20-swiper {
     padding: space(1) space(2);
     width: calc(100% - #{space(4)});
-    &__prev,
-    &__next {
-      width: space(3);
-      &::after {
-        width: 3rem;
-        height: 3rem;
-        line-height: 3.1rem;
-        font-size: 3rem;
-      }
-    }
   }
 }
 </style>