plain-design 1.0.0-beta.4 → 1.0.0-beta.41

package/src/packages/components/Carousel/carousel.scss

@@ -0,0 +1,391 @@
+@include comp(carousel) {
+
+  @include comp(carousel-item) {
+    //transition: transform 10000ms ease;
+    transition: transform 300ms ease;
+    display: flex;
+    .carousel-item-inner {
+      flex: 1;
+    }
+    .previewer-loading {
+      position: absolute;
+      inset: 0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 100%;
+      height: 100%;
+      color: white;
+      font-size: 36px;
+    }
+  }
+
+  &.carousel-horizontal {
+    width: 100%;
+    overflow: hidden;
+    position: relative;
+
+    .carousel-container {
+      width: 100%;
+      display: flex;
+      align-items: stretch;
+      overflow: visible;
+      transition: transform ease 300ms;
+      position: relative;
+      z-index: 1;
+    }
+
+    @include comp(carousel-item) {
+      flex-shrink: 0;
+      flex-grow: 0;
+      width: 100%;
+      position: relative;
+
+      .carousel-item-inner {
+        transition: linear transform 300ms;
+      }
+    }
+
+    &.carousel-card {
+      overflow: visible;
+
+      .carousel-active {
+        z-index: 2;
+      }
+
+      .carousel-prev {
+        .carousel-item-inner {
+          transform: translateX(12%) scale(0.75);
+          transform-origin: right center;
+        }
+      }
+
+      .carousel-next {
+        .carousel-item-inner {
+          transform: translateX(-12%) scale(0.75);
+          transform-origin: left center;
+        }
+      }
+    }
+
+    .carousel-indicator {
+      position: absolute;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      pointer-events: none;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: 16px;
+      z-index: 2;
+      opacity: 1;
+      transition: all linear 99s;
+
+      & > div {
+        pointer-events: auto;
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+
+      &.carousel-indicator-style-line {
+        & > div {
+          height: 16px;
+          width: 20px;
+          transition: all ease 300ms;
+
+          &:before {
+            background-color: rgba(#CECECE, 0.75);
+            width: 100%;
+            height: 2px;
+            content: '';
+            transform: skew(30deg);
+          }
+
+          & + div {
+            margin-left: 8px;
+          }
+
+          &.carousel-indicator-item-active {
+            width: 30px;
+
+            &:before {
+              background-color: #CECECE;
+              height: 4px;
+            }
+          }
+        }
+      }
+
+      &.carousel-indicator-style-dot {
+        & > div {
+          height: 16px;
+          width: 16px;
+
+          &:before {
+            background-color: rgba(#CECECE, 0.75);
+            transition: all ease 300ms;
+            border-radius: 5px;
+            height: 5px;
+            width: 5px;
+            content: '';
+          }
+
+          & + div {
+            margin-left: 8px;
+          }
+
+          &.carousel-indicator-item-active {
+            &:before {
+              background-color: #CECECE;
+              border-radius: 10px;
+              height: 10px;
+              width: 10px;
+            }
+          }
+        }
+      }
+
+      &.carousel-indicator-style-text {
+        left: auto;
+        background-color: rgba(black, 0.15);
+        color: white;
+        border-radius: 100px;
+        padding: 0;
+        min-width: 44px;
+        height: 28px;
+        text-align: center;
+        margin-right: 16px;
+        margin-bottom: 16px;
+        font-size: 12px;
+        line-height: 20px;
+      }
+    }
+
+    .carousel-switch-button {
+      pointer-events: none;
+      opacity: 1;
+      transition: all linear 99s;
+      z-index: 3;
+      position: absolute;
+      inset: 0;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 0 16px;
+
+      .carousel-switch-button-prev,
+      .carousel-switch-button-next {
+        height: 32px;
+        width: 32px;
+        border-radius: 32px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        color: #f1f1f1;
+        pointer-events: auto;
+        background-color: rgba(0, 0, 0, 0.3);
+        cursor: pointer;
+
+        &:hover {
+          background-color: rgba(0, 0, 0, 0.2);
+        }
+      }
+    }
+
+    &.carousel-touching {
+      .carousel-switch-button, .carousel-indicator {
+        opacity: 0.99;
+      }
+    }
+  }
+
+  &.carousel-vertical {
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    position: relative;
+
+    .carousel-container {
+      width: 100%;
+      height: 100%;
+
+      display: flex;
+      align-items: stretch;
+      flex-direction: column;
+
+      overflow: visible;
+      transition: transform ease 300ms;
+
+      @include comp(carousel-item) {
+        flex-shrink: 0;
+        flex-grow: 0;
+        height: 100%;
+        width: 100%;
+        position: relative;
+        z-index: 1;
+
+        .carousel-item-inner {
+          height: 100%;
+          transition: linear transform 300ms;
+        }
+      }
+    }
+
+    .carousel-indicator {
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      pointer-events: none;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex-direction: column;
+      padding: 8px;
+      z-index: 2;
+
+      & > div {
+        pointer-events: auto;
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+
+      &.carousel-indicator-style-line {
+        & > div {
+          height: 20px;
+          width: 16px;
+          transition: all ease 300ms;
+
+          &:before {
+            background-color: rgba(#CECECE, 0.75);
+            height: 100%;
+            width: 2px;
+            content: '';
+            transform: skewY(30deg);
+            transition: all ease 300ms;
+          }
+
+          & + div {
+            margin-top: 16px;
+          }
+
+          &.carousel-indicator-item-active {
+            &:before {
+              background-color: white;
+              width: 4px;
+              height: 30px;
+            }
+          }
+        }
+      }
+
+      &.carousel-indicator-style-dot {
+        & > div {
+          height: 4px;
+          width: 4px;
+          background-color: rgba(white, 0.45);
+          transition: all ease 300ms;
+          border-radius: 4px;
+
+          & + div {
+            margin-top: 8px;
+          }
+
+          &.carousel-indicator-item-active {
+            background-color: white;
+            height: 4px;
+            width: 4px;
+          }
+        }
+      }
+    }
+
+    .carousel-switch-button {
+      pointer-events: none;
+      opacity: 1;
+      transition: all linear 99s;
+      z-index: 3;
+      position: absolute;
+      inset: 0;
+      display: flex;
+      flex-direction: column;
+      align-items: flex-end;
+      justify-content: space-between;
+      padding: 4px;
+
+      .carousel-switch-button-prev,
+      .carousel-switch-button-next {
+        height: 24px;
+        width: 24px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        color: #f1f1f1;
+        pointer-events: auto;
+        background-color: rgba(0, 0, 0, 0.3);
+        cursor: pointer;
+
+        &:hover {
+          background-color: rgba(0, 0, 0, 0.2);
+        }
+      }
+    }
+  }
+
+  &:not(.carousel-disable-swiper) {
+    @include comp(carousel-item) {
+      user-select: none;
+    }
+  }
+
+  .carousel-cover {
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+    z-index: 4;
+
+    & > * {
+      pointer-events: auto;
+    }
+  }
+
+  &.carousel-full-height {
+    height: 100%;
+  }
+
+  &.carousel-full-height,
+  &.carousel-fixed-height {
+    .carousel-container {
+      height: 100%;
+    }
+
+    @include comp(carousel-item) {
+      height: 100%;
+      .carousel-item-inner {
+        height: 100%;
+      }
+    }
+  }
+
+  &.carousel-large-switch-button {
+    .carousel-switch-button {
+      .carousel-switch-button-prev, .carousel-switch-button-next {
+        font-size: 28px;
+        height: auto !important;
+        width: auto !important;
+        padding: 20px 5px;
+        border-radius: 0;
+        background-color: rgba(black, 0.1);
+
+        &:hover {
+          background-color: rgba(black, 0.2);
+        }
+      }
+    }
+  }
+}