@qsxy/element-plus-react 1.0.0-next.7 → 1.0.1

package/theme-chalk/menu.scss

@@ -0,0 +1,353 @@
+@use 'mixins/mixins' as *;
+@use 'mixins/var' as *;
+@use 'mixins/utils' as *;
+@use 'common/var' as *;
+@use 'common/transition';
+
+@mixin menu-item {
+    display: flex;
+    align-items: center;
+    height: getCssVar('menu-item-height');
+    line-height: getCssVar('menu-item-height');
+    font-size: getCssVar('menu-item-font-size');
+    color: getCssVar('menu-text-color');
+    padding: 0 getCssVar('menu-base-level-padding');
+    list-style: none;
+    cursor: pointer;
+    position: relative;
+    transition: border-color getCssVar('transition-duration'), background-color getCssVar('transition-duration'), color getCssVar('transition-duration');
+    box-sizing: border-box;
+    white-space: nowrap;
+
+    * {
+        vertical-align: bottom;
+    }
+
+    i {
+        color: inherit;
+    }
+
+    &:hover,
+    &:focus {
+        outline: none;
+    }
+
+    &:hover {
+        background-color: getCssVar('menu-hover-bg-color');
+        color: getCssVar('menu-hover-text-color');
+    }
+
+    @include when(disabled) {
+        opacity: 0.25;
+        cursor: not-allowed;
+        background: none !important;
+    }
+}
+
+:root {
+    // They are defined on :root so they can be inherited by sub-menu instead of overwritten
+    @include set-component-css-var('menu', $menu);
+}
+
+@include b(menu) {
+    border-right: solid 1px getCssVar('menu-border-color');
+    list-style: none;
+    position: relative;
+    margin: 0;
+    padding-left: 0;
+    background-color: getCssVar('menu-bg-color');
+    box-sizing: border-box;
+
+    @include m(vertical) {
+        &:not(.#{$namespace}-menu--collapse):not(.#{$namespace}-menu--popup-container) {
+            & .#{$namespace}-menu-item,
+            & .#{$namespace}-sub-menu__title,
+            & .#{$namespace}-menu-item-group__title {
+                white-space: nowrap;
+                padding-left: calc(#{getCssVar('menu-base-level-padding')} + #{getCssVar('menu-level')} * #{getCssVar('menu-level-padding')});
+            }
+        }
+    }
+
+    &:not(.#{$namespace}-menu--collapse) .#{$namespace}-sub-menu__title {
+        padding-right: calc(#{getCssVar('menu-base-level-padding')} + #{getCssVar('menu-icon-width')});
+    }
+
+    @include m(horizontal) {
+        display: flex;
+        flex-wrap: nowrap;
+        border-right: none;
+
+        height: getCssVar('menu-horizontal-height');
+
+        // reset menu-item popup height
+        &.#{$namespace}-menu--popup-container {
+            height: unset;
+        }
+
+        &.#{$namespace}-menu {
+            border-bottom: solid 1px getCssVar('menu-border-color');
+        }
+
+        & > .#{$namespace}-menu-item {
+            display: inline-flex;
+            justify-content: center;
+            align-items: center;
+
+            height: 100%;
+            margin: 0;
+            border-bottom: 2px solid transparent;
+            color: getCssVar('menu-text-color');
+
+            a,
+            a:hover {
+                color: inherit;
+            }
+        }
+
+        & > .#{$namespace}-sub-menu {
+            &:focus,
+            &:hover {
+                outline: none;
+            }
+
+            &:hover {
+                .#{$namespace}-sub-menu__title {
+                    color: getCssVar('menu-hover-text-color');
+                }
+            }
+
+            &.is-active {
+                .#{$namespace}-sub-menu__title {
+                    border-bottom: 2px solid getCssVar('menu-active-color');
+                    color: getCssVar('menu-active-color');
+                }
+            }
+
+            & .#{$namespace}-sub-menu__title {
+                height: 100%;
+                border-bottom: 2px solid transparent;
+                color: getCssVar('menu-text-color');
+
+                &:hover {
+                    background-color: getCssVar('menu-bg-color');
+                }
+            }
+        }
+
+        & .#{$namespace}-menu {
+            & .#{$namespace}-menu-item,
+            & .#{$namespace}-sub-menu__title {
+                background-color: getCssVar('menu-bg-color');
+                display: flex;
+                align-items: center;
+                height: getCssVar('menu-horizontal-sub-item-height');
+                line-height: getCssVar('menu-horizontal-sub-item-height');
+                padding: 0 10px;
+                color: getCssVar('menu-text-color');
+            }
+
+            & .#{$namespace}-sub-menu__title {
+                padding-right: 40px;
+            }
+
+            & .#{$namespace}-menu-item.is-active,
+            & .#{$namespace}-menu-item.is-active:hover,
+            & .#{$namespace}-sub-menu.is-active > .#{$namespace}-sub-menu__title,
+            & .#{$namespace}-sub-menu.is-active > .#{$namespace}-sub-menu__title:hover {
+                color: getCssVar('menu-active-color');
+            }
+        }
+
+        & .#{$namespace}-menu-item:not(.is-disabled):hover,
+        & .#{$namespace}-menu-item:not(.is-disabled):focus {
+            outline: none;
+            color: getCssVarWithDefault('menu-active-color', getCssVar('menu-hover-text-color'));
+            background-color: getCssVar('menu-hover-bg-color');
+        }
+
+        & > .#{$namespace}-menu-item.is-active {
+            border-bottom: 2px solid getCssVar('menu-active-color');
+            color: getCssVar('menu-active-color') !important;
+        }
+    }
+
+    @include m(collapse) {
+        width: calc(#{getCssVar('menu-icon-width')} + #{getCssVar('menu-base-level-padding')} * 2);
+
+        > .#{$namespace}-menu-item,
+        > .#{$namespace}-sub-menu > .#{$namespace}-sub-menu__title,
+        > .#{$namespace}-menu-item-group > ul > .#{$namespace}-sub-menu > .#{$namespace}-sub-menu__title {
+            [class^='#{$namespace}-icon'] {
+                margin: 0;
+                vertical-align: middle;
+                width: getCssVar('menu-icon-width');
+                text-align: center;
+            }
+
+            .#{$namespace}-sub-menu__icon-arrow {
+                display: none;
+            }
+
+            > span {
+                height: 0;
+                width: 0;
+                overflow: hidden;
+                visibility: hidden;
+                display: inline-block;
+            }
+        }
+
+        > .#{$namespace}-menu-item.is-active i {
+            color: inherit;
+        }
+
+        .#{$namespace}-menu .#{$namespace}-sub-menu {
+            min-width: 200px;
+        }
+
+        .#{$namespace}-sub-menu {
+            &.is-active .#{$namespace}-sub-menu__title {
+                color: getCssVar('menu-active-color');
+            }
+        }
+    }
+
+    @include m(popup) {
+        z-index: 100;
+        min-width: 200px;
+        border: none;
+        padding: 5px 0;
+        border-radius: getCssVar('border-radius-small');
+        box-shadow: getCssVar('box-shadow-light');
+    }
+
+    @include m(inline) {
+        display: none;
+    }
+
+    .#{$namespace}-icon {
+        flex-shrink: 0;
+    }
+}
+
+@include b(menu-item) {
+    @include menu-item;
+
+    & [class^='#{$namespace}-icon'] {
+        margin-right: 5px;
+        width: getCssVar('menu-icon-width');
+        text-align: center;
+        font-size: 18px;
+        vertical-align: middle;
+    }
+
+    @include when(active) {
+        color: getCssVar('menu-active-color');
+
+        i {
+            color: inherit;
+        }
+    }
+
+    .#{$namespace}-menu-tooltip__trigger {
+        position: absolute;
+        left: 0;
+        top: 0;
+        height: 100%;
+        width: 100%;
+        display: inline-flex;
+        align-items: center;
+        box-sizing: border-box;
+        padding: 0 getCssVar('menu-base-level-padding');
+    }
+}
+
+@include b(sub-menu) {
+    list-style: none;
+    margin: 0;
+    padding-left: 0;
+
+    @include e(title) {
+        @include menu-item;
+
+        &:hover {
+            background-color: getCssVar('menu-hover-bg-color');
+        }
+    }
+
+    &.#{$namespace}-sub-menu__hide-arrow .el-sub-menu__title {
+        padding-right: var(--el-menu-base-level-padding);
+    }
+
+    & .#{$namespace}-menu {
+        border: none;
+    }
+
+    & .#{$namespace}-menu-item {
+        height: getCssVar('menu-sub-item-height');
+        line-height: getCssVar('menu-sub-item-height');
+    }
+
+    @include e(hide-arrow) {
+        .#{$namespace}-sub-menu__icon-arrow {
+            display: none !important;
+        }
+    }
+
+    @include when(active) {
+        .#{$namespace}-sub-menu__title {
+            border-bottom-color: getCssVar('menu-active-color');
+        }
+    }
+
+    @include when(disabled) {
+        .#{$namespace}-sub-menu__title,
+        .#{$namespace}-menu-item {
+            opacity: 0.25;
+            cursor: not-allowed;
+            background: none !important;
+        }
+    }
+
+    .#{$namespace}-icon {
+        vertical-align: middle;
+        margin-right: 5px;
+        width: getCssVar('menu-icon-width');
+        text-align: center;
+        font-size: 18px;
+
+        &.#{$namespace}-sub-menu__icon-more {
+            margin-right: 0 !important;
+        }
+    }
+
+    .#{$namespace}-sub-menu__icon-arrow {
+        position: absolute;
+        top: 50%;
+        right: getCssVar('menu-base-level-padding');
+        margin-top: -6px;
+        transition: transform getCssVar('transition-duration');
+        font-size: 12px;
+        margin-right: 0;
+        width: inherit;
+    }
+}
+
+@include b(menu-item-group) {
+    > ul {
+        padding: 0;
+    }
+
+    @include e(title) {
+        padding: 7px 0 7px getCssVar('menu-base-level-padding');
+        line-height: normal;
+        font-size: 12px;
+        color: getCssVar('text-color', 'secondary');
+    }
+}
+
+.horizontal-collapse-transition .#{$namespace}-sub-menu__title .#{$namespace}-sub-menu__icon-arrow {
+    transition: getCssVar('transition-duration-fast');
+    opacity: 0;
+}

package/{dist/theme-chalk/message-box/index.scss → theme-chalk/message-box.scss}

@@ -1,4 +1,4 @@
-@use '../common/var';
+@use './mixins/config' as *;
 
 .#{$namespace}-message-box {
     --#{$namespace}-messagebox-title-color: var(--#{$namespace}-text-color-primary);

package/{dist/theme-chalk/message/index.scss → theme-chalk/message.scss}

@@ -1,4 +1,5 @@
-@use '../common/var';
+@use './common/var' as *;
+@use './mixins/config' as *;
 
 .#{$namespace}-message {
     --#{$namespace}-message-bg-color: var(--#{$namespace}-color-info-light-9);
@@ -9,6 +10,8 @@
 
 .#{$namespace}-message {
     min-width: 380px;
+    width: fit-content;
+    max-width: calc(100% - 32px);
     box-sizing: border-box;
     border-radius: 4px;
     border-width: 1px;
@@ -21,8 +24,8 @@
     background-color: var(--#{$namespace}-message-bg-color);
     color: var(--#{$namespace}-message-text-color);
     transition: opacity 0.3s, transform 0.4s, top 0.4s;
-    overflow: hidden;
-    padding: 15px 15px 15px 20px;
+    // overflow: hidden;
+    padding: 15px 19px;
     display: flex;
     align-items: center;
 
@@ -32,7 +35,7 @@
 
     &.is-closable {
         .#{$namespace}-message__content {
-            padding-right: 16px;
+            padding-right: 31px;
         }
     }
 
@@ -103,7 +106,7 @@
         font-size: 16px;
 
         &::before {
-            font-family: 'R Icons';
+            font-family: $fa-font-family;
             content: '\f00d';
             font-weight: 400;
         }
@@ -120,7 +123,7 @@
         color: var(--#{$namespace}-message-text-color);
 
         &::before {
-            font-family: 'R Icons';
+            font-family: $fa-font-family;
             content: '\f058';
             font-style: normal;
             font-weight: bold;
@@ -131,7 +134,7 @@
         color: var(--#{$namespace}-message-text-color);
 
         &::before {
-            font-family: 'R Icons';
+            font-family: $fa-font-family;
             content: '\f057';
             font-style: normal;
             font-weight: bold;
@@ -142,7 +145,7 @@
         color: var(--#{$namespace}-message-text-color);
 
         &::before {
-            font-family: 'R Icons';
+            font-family: $fa-font-family;
             content: '\f05a';
             font-style: normal;
             font-weight: bold;
@@ -153,12 +156,18 @@
         color: var(--#{$namespace}-message-text-color);
 
         &::before {
-            font-family: 'R Icons';
+            font-family: $fa-font-family;
             content: '\f06a';
             font-style: normal;
             font-weight: bold;
         }
     }
+
+    .#{$namespace}-message__badge {
+        position: absolute;
+        top: -8px;
+        right: -8px;
+    }
 }
 
 .#{$namespace}-fade-enter-from,

package/theme-chalk/mixins/_button.scss

@@ -0,0 +1,224 @@
+@use '../mixins/var' as *;
+@use '../mixins/function' as *;
+@use '../common/var' as *;
+
+@mixin button-plain($type) {
+    $button-color-types: (
+        '': (
+            'text-color': (
+                'color',
+                $type,
+            ),
+            'bg-color': (
+                'color',
+                $type,
+                'light-9',
+            ),
+            'border-color': (
+                'color',
+                $type,
+                'light-5',
+            ),
+        ),
+        'hover': (
+            'text-color': (
+                'color',
+                'white',
+            ),
+            'bg-color': (
+                'color',
+                $type,
+            ),
+            'border-color': (
+                'color',
+                $type,
+            ),
+        ),
+        'active': (
+            'text-color': (
+                'color',
+                'white',
+            ),
+        ),
+    );
+
+    @each $type, $typeMap in $button-color-types {
+        @each $typeColor, $list in $typeMap {
+            @include css-var-from-global(('button', $type, $typeColor), $list);
+        }
+    }
+
+    &.is-disabled {
+        &,
+        &:hover,
+        &:focus,
+        &:active {
+            color: getCssVar('color', $type, 'light-5');
+            background-color: getCssVar('color', $type, 'light-9');
+            border-color: getCssVar('color', $type, 'light-8');
+        }
+    }
+}
+
+@mixin button-dashed($type) {
+    $button-color-types: (
+        '': (
+            'text-color': (
+                'color',
+                $type,
+            ),
+            'bg-color': (
+                'fill-color-blank',
+            ),
+            'border-color': (
+                'color',
+                $type,
+            ),
+        ),
+        'hover': (
+            'text-color': (
+                'color',
+                $type,
+                'light-3',
+            ),
+            'bg-color': (
+                'fill-color-blank',
+            ),
+            'border-color': (
+                'color',
+                $type,
+                'light-3',
+            ),
+        ),
+        'active': (
+            'text-color': (
+                'color',
+                $type,
+            ),
+            'border-color': (
+                'color',
+                $type,
+            ),
+        ),
+    );
+
+    @each $type, $typeMap in $button-color-types {
+        @each $typeColor, $list in $typeMap {
+            @include css-var-from-global(('button', $type, $typeColor), $list);
+        }
+    }
+
+    &.is-disabled {
+        &,
+        &:hover,
+        &:focus,
+        &:active {
+            color: getCssVar('color', $type, 'light-5');
+            background-color: getCssVar('fill-color-blank');
+            border-color: getCssVar('color', $type, 'light-8');
+        }
+    }
+}
+
+@mixin button-variant($type) {
+    $button-color-types: (
+        '': (
+            'text-color': (
+                'color',
+                'white',
+            ),
+            'bg-color': (
+                'color',
+                $type,
+            ),
+            'border-color': (
+                'color',
+                $type,
+            ),
+            'outline-color': (
+                'color',
+                $type,
+                'light-5',
+            ),
+            'active-color': (
+                'color',
+                $type,
+                'dark-2',
+            ),
+        ),
+        'hover': (
+            'text-color': (
+                'color',
+                'white',
+            ),
+            'link-text-color': (
+                'color',
+                $type,
+                'light-5',
+            ),
+            'bg-color': (
+                'color',
+                $type,
+                'light-3',
+            ),
+            'border-color': (
+                'color',
+                $type,
+                'light-3',
+            ),
+        ),
+        'active': (
+            'bg-color': (
+                'color',
+                $type,
+                'dark-2',
+            ),
+            'border-color': (
+                'color',
+                $type,
+                'dark-2',
+            ),
+        ),
+        'disabled': (
+            'text-color': (
+                'color',
+                'white',
+            ),
+            'bg-color': (
+                'color',
+                $type,
+                'light-5',
+            ),
+            'border-color': (
+                'color',
+                $type,
+                'light-5',
+            ),
+        ),
+    );
+
+    @each $type, $typeMap in $button-color-types {
+        @each $typeColor, $list in $typeMap {
+            @include css-var-from-global(('button', $type, $typeColor), $list);
+        }
+    }
+
+    &.is-plain,
+    &.is-text,
+    &.is-link {
+        @include button-plain($type);
+    }
+
+    &.is-dashed {
+        @include button-dashed($type);
+    }
+}
+
+@mixin button-size($padding-vertical, $padding-horizontal, $font-size, $border-radius) {
+    padding: $padding-vertical $padding-horizontal;
+    font-size: $font-size;
+    border-radius: $border-radius;
+    &.is-round {
+        padding: $padding-vertical $padding-horizontal;
+    }
+}

package/theme-chalk/mixins/_col.scss

@@ -0,0 +1,33 @@
+@use 'sass:math';
+
+@use '../common/var' as *;
+@use './mixins' as *;
+
+@mixin col-size($size) {
+  @include res($size) {
+    @for $i from 0 through 24 {
+      .#{$namespace}-col-#{$size}-#{$i} {
+        display: if($i == 0, none, block);
+        max-width: (math.div(1, 24) * $i * 100) * 1%;
+        flex: 0 0 (math.div(1, 24) * $i * 100) * 1%;
+        @include when(guttered) {
+          display: if($i == 0, none, block);
+        }
+      }
+
+      .#{$namespace}-col-#{$size}-offset-#{$i} {
+        margin-left: (math.div(1, 24) * $i * 100) * 1%;
+      }
+
+      .#{$namespace}-col-#{$size}-pull-#{$i} {
+        position: relative;
+        right: (math.div(1, 24) * $i * 100) * 1%;
+      }
+
+      .#{$namespace}-col-#{$size}-push-#{$i} {
+        position: relative;
+        left: (math.div(1, 24) * $i * 100) * 1%;
+      }
+    }
+  }
+}