@asd20/ui 3.2.794 → 3.2.795

package/package.json

@@ -5,7 +5,7 @@
     "*.scss",
     "*.vue"
   ],
-  "version": "3.2.794",
+  "version": "3.2.795",
   "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 circle -left"
+      class="asd20-swiper__arrows__button-prev"
     >
       <span>Previous Tile</span>
     </button>
@@ -23,7 +23,7 @@
       tabindex="-1"
       ref="next"
       title="Next"
-      class="asd20-swiper__next circle -right"
+      class="asd20-swiper__arrows__button-next"
     >
       <span>Next Tile</span>
     </button>
@@ -169,20 +169,20 @@ export default {
   }
 }
 
-.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();
-}
+// .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;
@@ -191,40 +191,123 @@ export default {
   padding: space(1) space(1);
   margin: space(0) space(0) space(0) space(0);
 
-  &__prev,
-  &__next {
-    cursor: pointer;
-    appearance: none;
-    position: absolute;
-    top: 50%;
-    left: 0;
-    bottom: space(1);
-    z-index: 2;
-    border: 2px solid var(--color__primary);
-    animation: fade-in 0.5s ease-in-out 0.25s both;
+  // &__prev,
+  // &__next {
+  //   cursor: pointer;
+  //   appearance: none;
+  //   position: absolute;
+  //   top: 50%;
+  //   left: 0;
+  //   bottom: space(1);
+  //   z-index: 2;
+  //   border: 2px solid var(--color__primary);
+  //   animation: fade-in 0.5s ease-in-out 0.25s both;
 
-    &.swiper-button-disabled {
-      display: none;
-    }
+  //   &.swiper-button-disabled {
+  //     display: none;
+  //   }
 
-    span {
-      display: none;
-    }
+  //   span {
+  //     display: none;
+  //   }
 
-    &:hover {
-      --fade-stop: 150%;
-    }
+  //   &:hover {
+  //     --fade-stop: 150%;
+  //   }
 
-    &:focus,
-    &:active {
-      box-shadow: none;
-      outline: none;
-    }
-  }
-  &__next {
-    left: auto;
+  //   &:focus,
+  //   &:active {
+  //     box-shadow: none;
+  //     outline: none;
+  //   }
+  // }
+  // &__next {
+  //   left: auto;
+  //   right: 0;
+  // }
+
+  &__arrows {
+    position: absolute;
+    left: 0;
+    top: 0;
+    bottom: 0;
     right: 0;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    &__button-prev,
+    &__button-next {
+      position: relative;
+      background: none;
+      border: 0;
+      width: 3rem;
+      height: 3rem;
+      background: rgba(255, 255, 255, 0.85);
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      cursor: pointer;
+      border-radius: 50%;
+      transition: background 0.1s ease-in;
+      position: absolute;
+      top: 50%;
+      left: 0;
+      bottom: space(1);
+      z-index: 2;
+      border: 2px solid var(--color__primary);
+      animation: fade-in 0.5s ease-in-out 0.25s both;
+      &:hover {
+        background: rgba(255, 255, 255, 1);
+      }
+      &.swiper-button-disabled {
+        display: none;
+      }
+      &:focus,
+      &:active {
+        box-shadow: none;
+        outline: none;
+      }
+      &::before {
+        content: '';
+        position: absolute;
+        display: block;
+        top: 50%;
+        left: 50%;
+        width: 1rem;
+        height: 1rem;
+        margin-left: -0.5rem;
+        margin-top: -0.5rem;
+        border: 2px solid transparent;
+        border-left-color: black;
+        border-top-color: black;
+        transform-origin: 50% 50%;
+      }
+      span {
+        display: none;
+      }
+    }
+    &__button-prev {
+      transform: translateY(-50%);
+      &::before {
+        transform: translate(15%, -10%) rotate(-45deg);
+      }
+      &:last-child {
+        margin-right: auto;
+      }
+    }
+    &__button-next {
+      left: auto;
+      right: 0;
+      transform: translateY(-50%);
+      &::before {
+        transform: translate(-35%, -10%) rotate(135deg);
+      }
+      &:first-child {
+        margin-left: auto;
+      }
+    }
   }
+
   .swiper-container {
     overflow: visible;
     --swiper-theme-color: var(--color__accent);
@@ -267,7 +350,6 @@ export default {
   .asd20-swiper {
     padding: space(1) space(2);
     width: calc(100% - #{space(4)});
-
   }
 }
 </style>