@qsxy/element-plus-react 1.0.0-next.4 → 1.0.0-next.5

package/dist/theme-chalk/carousel/index.scss

@@ -0,0 +1,237 @@
+@use '../common/var';
+
+.#{$namespace}-carousel__item {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    display: inline-block;
+    overflow: hidden;
+    z-index: calc(var(--#{$namespace}-index-normal) - 1);
+
+    &.is-active {
+        z-index: calc(var(--#{$namespace}-index-normal) - 1);
+    }
+
+    &.is-animating {
+        transition: transform 0.4s ease-in-out;
+    }
+}
+
+.#{$namespace}-carousel__item--card {
+    width: 50%;
+    transition: transform 0.4s ease-in-out;
+
+    &.is-in-stage {
+        cursor: pointer;
+        z-index: var(--#{$namespace}-index-normal);
+    }
+
+    &.is-in-stage:hover .#{$namespace}-carousel__mask,
+    &.is-in-stage.is-hover .#{$namespace}-carousel__mask {
+        opacity: 0.12;
+    }
+
+    &.is-active {
+        z-index: calc(var(--#{$namespace}-index-normal) + 1);
+    }
+}
+
+.#{$namespace}-carousel__item--card-vertical {
+    width: 100%;
+    height: 50%;
+}
+
+.#{$namespace}-carousel__mask {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    background-color: var(--#{$namespace}-color-white);
+    opacity: 0.24;
+    transition: var(--#{$namespace}-transition-duration-fast);
+}
+
+.#{$namespace}-carousel {
+    --#{$namespace}-carousel-arrow-font-size: 12px;
+    --#{$namespace}-carousel-arrow-size: 36px;
+    --#{$namespace}-carousel-arrow-background: rgba(31, 45, 61, 0.11);
+    --#{$namespace}-carousel-arrow-hover-background: rgba(31, 45, 61, 0.23);
+    --#{$namespace}-carousel-indicator-width: 30px;
+    --#{$namespace}-carousel-indicator-height: 2px;
+    --#{$namespace}-carousel-indicator-padding-horizontal: 4px;
+    --#{$namespace}-carousel-indicator-padding-vertical: 12px;
+    --#{$namespace}-carousel-indicator-out-color: var(--#{$namespace}-border-color-hover);
+    position: relative;
+}
+
+.#{$namespace}-carousel--horizontal,
+.#{$namespace}-carousel--vertical {
+    overflow: hidden;
+}
+
+.#{$namespace}-carousel__container {
+    position: relative;
+    height: 300px;
+}
+
+.#{$namespace}-carousel__arrow {
+    border: none;
+    outline: none;
+    padding: 0;
+    margin: 0;
+    height: var(--#{$namespace}-carousel-arrow-size);
+    width: var(--#{$namespace}-carousel-arrow-size);
+    cursor: pointer;
+    transition: var(--#{$namespace}-transition-duration);
+    border-radius: 50%;
+    background-color: var(--#{$namespace}-carousel-arrow-background);
+    color: #fff;
+    position: absolute;
+    top: 50%;
+    z-index: 10;
+    transform: translateY(-50%);
+    text-align: center;
+    font-size: var(--#{$namespace}-carousel-arrow-font-size);
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+
+    &:hover {
+        background-color: var(--#{$namespace}-carousel-arrow-hover-background);
+    }
+
+    & i {
+        cursor: pointer;
+    }
+}
+
+.#{$namespace}-carousel__arrow--left {
+    left: 16px;
+}
+
+.#{$namespace}-carousel__arrow--right {
+    right: 16px;
+}
+
+.#{$namespace}-carousel__indicators {
+    position: absolute;
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    z-index: calc(var(--#{$namespace}-index-normal) + 1);
+}
+
+.#{$namespace}-carousel__indicators--horizontal {
+    bottom: 0;
+    left: 50%;
+    transform: translate(-50%);
+}
+
+.#{$namespace}-carousel__indicators--vertical {
+    right: 0;
+    top: 50%;
+    transform: translateY(-50%);
+}
+
+.#{$namespace}-carousel__indicators--outside {
+    bottom: calc(var(--#{$namespace}-carousel-indicator-height) + var(--#{$namespace}-carousel-indicator-padding-vertical) * 2);
+    text-align: center;
+    position: static;
+    transform: none;
+
+    .#{$namespace}-carousel__indicator:hover button {
+        opacity: 0.64;
+    }
+
+    button {
+        background-color: var(--#{$namespace}-carousel-indicator-out-color);
+        opacity: 0.24;
+    }
+}
+
+.#{$namespace}-carousel__indicators--right {
+    right: 0;
+}
+
+.#{$namespace}-carousel__indicators--labels {
+    left: 0;
+    right: 0;
+    transform: none;
+    text-align: center;
+
+    .#{$namespace}-carousel__button {
+        height: auto;
+        width: auto;
+        padding: 2px 18px;
+        font-size: 12px;
+        color: #000;
+    }
+
+    .#{$namespace}-carousel__indicator {
+        padding: 6px 4px;
+    }
+}
+
+.#{$namespace}-carousel__indicator {
+    background-color: transparent;
+    cursor: pointer;
+
+    &:hover button {
+        opacity: 0.72;
+    }
+}
+
+.#{$namespace}-carousel__indicator--horizontal {
+    display: inline-block;
+    padding: var(--#{$namespace}-carousel-indicator-padding-vertical) var(--#{$namespace}-carousel-indicator-padding-horizontal);
+}
+
+.#{$namespace}-carousel__indicator--vertical {
+    padding: var(--#{$namespace}-carousel-indicator-padding-horizontal) var(--#{$namespace}-carousel-indicator-padding-vertical);
+
+    .#{$namespace}-carousel__button {
+        width: var(--#{$namespace}-carousel-indicator-height);
+        height: calc(var(--#{$namespace}-carousel-indicator-width) / 2);
+    }
+}
+
+.#{$namespace}-carousel__indicator.is-active button {
+    opacity: 1;
+}
+
+.#{$namespace}-carousel__button {
+    display: block;
+    opacity: 0.48;
+    width: var(--#{$namespace}-carousel-indicator-width);
+    height: var(--#{$namespace}-carousel-indicator-height);
+    background-color: #fff;
+    border: none;
+    outline: none;
+    padding: 0;
+    margin: 0;
+    cursor: pointer;
+    transition: var(--#{$namespace}-transition-duration);
+}
+
+.carousel-arrow-left-enter-from,
+.carousel-arrow-left-leave-active {
+    transform: translateY(-50%) translate(-10px);
+    opacity: 0;
+}
+
+.carousel-arrow-right-enter-from,
+.carousel-arrow-right-leave-active {
+    transform: translateY(-50%) translate(10px);
+    opacity: 0;
+}
+
+.#{$namespace}-transitioning {
+    filter: url(#elCarouselHorizontal);
+}
+
+.#{$namespace}-transitioning-vertical {
+    filter: url(#elCarouselVertical);
+}

package/dist/theme-chalk/dev.scss

@@ -0,0 +1,2 @@
+@import './index.scss';
+@import './icon/fonts';

package/dist/theme-chalk/index.scss

@@ -2,7 +2,6 @@
 @import './common';
 @import './link';
 @import './button';
-@import './icon/fonts';
 @import './icon';
 @import './row';
 @import './col';
@@ -12,6 +11,7 @@
 
 /* Form 表单组件 */
 @import './cascader';
+@import './carousel/';
 @import './checkbox';
 @import './checkbox-button';
 @import './checkbox-group';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@qsxy/element-plus-react",
-  "version": "1.0.0-next.4",
+  "version": "1.0.0-next.5",
   "description": "element-plus-react",
   "module": "dist/index.js",
   "types": "dist/index.d.ts",

package/dist/theme-chalk/build.scss

@@ -1,64 +0,0 @@
-/* Basic 基础组件 */
-@import './common';
-@import './link';
-@import './button';
-@import './icon';
-@import './row';
-@import './col';
-@import './scrollbar';
-@import './popper';
-@import './transition';
-
-/* Form 表单组件 */
-@import './cascader';
-@import './checkbox';
-@import './checkbox-button';
-@import './checkbox-group';
-@import './color-picker';
-@import './radio';
-@import './radio-group';
-@import './input';
-@import './input-number';
-@import './select';
-@import './calendar';
-@import './date-picker';
-@import './date-time-picker';
-@import './time-picker';
-@import './switch';
-@import './transfer';
-@import './form';
-@import './upload';
-
-/* Data 数据展示 */
-@import './badge';
-@import './card';
-@import './collapse';
-@import './descriptions';
-@import './pagination';
-@import './progress';
-@import './table';
-@import './time-line';
-@import './tree';
-@import './tree-select';
-@import './tag';
-
-// /* Navigation 导航 */
-@import './breadcrumb';
-@import './dropdown';
-@import './tabs';
-@import './empty';
-@import './placeholder';
-
-/* Feedback 反馈组件 */
-@import './dialog';
-@import './drawer';
-@import './loading';
-@import './message';
-@import './message-box';
-@import './notification';
-@import './tooltip';
-@import './popconfirm';
-@import './popover';
-
-/* Others 其他 */
-@import './divider';