@qsxy/element-plus-react 1.0.2 → 2.0.0

package/theme-chalk/mixins/utils.scss

@@ -1,39 +1,39 @@
-@mixin utils-clearfix {
-  $selector: &;
-
-  @at-root {
-    #{$selector}::before,
-    #{$selector}::after {
-      display: table;
-      content: '';
-    }
-    #{$selector}::after {
-      clear: both;
-    }
-  }
-}
-
-@mixin utils-vertical-center {
-  $selector: &;
-
-  @at-root {
-    #{$selector}::after {
-      display: inline-block;
-      content: '';
-      height: 100%;
-      vertical-align: middle;
-    }
-  }
-}
-
-@mixin utils-ellipsis {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-@mixin utils-inline-flex-center {
-  display: inline-flex;
-  justify-content: center;
-  align-items: center;
-}
+@mixin utils-clearfix {
+  $selector: &;
+
+  @at-root {
+    #{$selector}::before,
+    #{$selector}::after {
+      display: table;
+      content: '';
+    }
+    #{$selector}::after {
+      clear: both;
+    }
+  }
+}
+
+@mixin utils-vertical-center {
+  $selector: &;
+
+  @at-root {
+    #{$selector}::after {
+      display: inline-block;
+      content: '';
+      height: 100%;
+      vertical-align: middle;
+    }
+  }
+}
+
+@mixin utils-ellipsis {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+@mixin utils-inline-flex-center {
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+}

package/theme-chalk/notification.scss

@@ -1,156 +1,109 @@
-@use './mixins/config' as *;
-@use './common/var' as *;
+@use 'mixins/mixins' as *;
+@use 'mixins/var' as *;
+@use 'common/var' as *;
 
-.#{$namespace}-notification {
-    --#{$namespace}-notification-shadow: var(--#{$namespace}-box-shadow-light);
-    --#{$namespace}-notification-border-color: var(--#{$namespace}-border-color);
-    --#{$namespace}-notification-content-font-size: var(--#{$namespace}-font-size-base);
-    --#{$namespace}-notification-content-color: var(--#{$namespace}-text-color-regular);
-    --#{$namespace}-notification-title-color: var(--#{$namespace}-text-color-primary);
-    --#{$namespace}-notification-close-color: var(--#{$namespace}-text-color-secondary);
-    --#{$namespace}-notification-close-hover-color: var(--#{$namespace}-text-color-regular);
+@include b(notification) {
+  @include set-component-css-var('notification', $notification);
 }
 
-.#{$namespace}-notification {
-    display: flex;
-    width: 330px;
-    padding: 14px 26px 14px 13px;
-    border-radius: 8px;
-    box-sizing: border-box;
-    border: 1px solid var(--#{$namespace}-notification-border-color);
-    position: fixed;
-    background-color: var(--#{$namespace}-bg-color-overlay);
-    box-shadow: var(--#{$namespace}-notification-shadow);
-    transition: opacity 0.3s, transform 0.3s, left 0.3s, right 0.3s, top 0.4s, bottom 0.3s;
-    overflow-wrap: anywhere;
-    overflow: hidden;
-    z-index: 9999;
-
-    &.right {
-        right: 16px;
-    }
-
-    &.left {
-        left: 16px;
-    }
-
-    &__group {
-        margin-left: 13px;
-        margin-right: 8px;
-    }
-
-    &__title {
-        font-weight: bold;
-        font-size: 16px;
-        line-height: 24px;
-        color: var(--#{$namespace}-notification-title-color);
-        margin: 0;
-    }
-
-    &__content {
-        font-size: var(--#{$namespace}-notification-content-font-size);
-        line-height: 24px;
-        margin: 6px 0 0 0;
-        color: var(--#{$namespace}-notification-content-color);
-        text-align: justify;
-
-        p {
-            margin: 0;
-        }
-    }
-
-    &__icon {
-        height: 24px;
-        width: 24px;
-        font-size: 24px;
-    }
-
-    &__closeBtn {
-        position: absolute;
-        top: 18px;
-        right: 15px;
-        cursor: pointer;
-        color: var(--#{$namespace}-notification-close-color);
-        font-size: 16px;
-
-        &::before {
-            font-family: $fa-font-family;
-            content: '\f00d';
-            font-weight: 400;
-        }
-
-        &:hover {
-            color: var(--#{$namespace}-notification-close-hover-color);
-        }
-    }
-
-    .#{$namespace}-icon-success {
-        --#{$namespace}-notification-icon-color: var(--#{$namespace}-color-success);
-        color: var(--#{$namespace}-notification-icon-color);
-        margin-top: -4px;
-
-        &::before {
-            font-family: $fa-font-family;
-            content: '\f058';
-            font-style: normal;
-            font-weight: bold;
-        }
+@include b(notification) {
+  display: flex;
+  width: getCssVar('notification-width');
+  padding: getCssVar('notification-padding');
+  border-radius: getCssVar('notification-radius');
+  box-sizing: border-box;
+  border: 1px solid getCssVar('notification-border-color');
+  position: fixed;
+  background-color: getCssVar('bg-color', 'overlay');
+  box-shadow: getCssVar('notification-shadow');
+  transition:
+    opacity getCssVar('transition-duration'),
+    transform getCssVar('transition-duration'),
+    left getCssVar('transition-duration'),
+    right getCssVar('transition-duration'),
+    top 0.4s,
+    bottom getCssVar('transition-duration');
+  overflow-wrap: break-word;
+  overflow: hidden;
+  z-index: 9999;
+
+  &.right {
+    right: 16px;
+  }
+
+  &.left {
+    left: 16px;
+  }
+
+  @include e(group) {
+    flex: 1;
+    min-width: 0;
+    margin-left: getCssVar('notification-group-margin-left');
+    margin-right: getCssVar('notification-group-margin-right');
+  }
+
+  @include e(title) {
+    font-weight: bold;
+    font-size: getCssVar('notification-title-font-size');
+    line-height: getCssVar('notification-icon-size');
+    color: getCssVar('notification-title-color');
+    margin: 0;
+  }
+
+  @include e(content) {
+    font-size: getCssVar('notification-content-font-size');
+    line-height: 24px;
+    margin: 6px 0 0;
+    color: getCssVar('notification-content-color');
+
+    p {
+      margin: 0;
     }
-
-    .#{$namespace}-icon-error {
-        --#{$namespace}-notification-icon-color: var(--#{$namespace}-color-error);
-        color: var(--#{$namespace}-notification-icon-color);
-        margin-top: -4px;
-
-        &::before {
-            font-family: $fa-font-family;
-            content: '\f057';
-            font-style: normal;
-            font-weight: bold;
-        }
+  }
+
+  & .#{$namespace}-notification__icon {
+    flex-shrink: 0;
+    height: getCssVar('notification-icon-size');
+    width: getCssVar('notification-icon-size');
+    font-size: getCssVar('notification-icon-size');
+  }
+
+  & .#{$namespace}-notification__closeBtn {
+    position: absolute;
+    top: 18px;
+    right: 15px;
+    cursor: pointer;
+    color: getCssVar('notification-close-color');
+    font-size: getCssVar('notification-close-font-size');
+
+    &:hover {
+      color: getCssVar('notification-close-hover-color');
     }
-
-    .#{$namespace}-icon-info {
-        --#{$namespace}-notification-icon-color: var(--#{$namespace}-color-info);
-        color: var(--#{$namespace}-notification-icon-color);
-        margin-top: -4px;
-
-        &::before {
-            font-family: $fa-font-family;
-            content: '\f05a';
-            font-style: normal;
-            font-weight: bold;
-        }
-    }
-
-    .#{$namespace}-icon-warning {
-        --#{$namespace}-notification-icon-color: var(--#{$namespace}-color-warning);
-        color: var(--#{$namespace}-notification-icon-color);
-        margin-top: -4px;
-
-        &::before {
-            font-family: $fa-font-family;
-            content: '\f06a';
-            font-style: normal;
-            font-weight: bold;
-        }
+  }
+
+  @each $type in (primary, success, info, warning, error) {
+    & .#{$namespace}-notification--#{$type} {
+      @include css-var-from-global(
+        ('notification', 'icon-color'),
+        ('color', $type)
+      );
+      color: getCssVar('notification-icon-color');
     }
+  }
 }
 
 .#{$namespace}-notification-fade-enter-from {
-    opacity: 0;
-
-    &.right {
-        right: 0;
-        transform: translateX(100%);
-    }
-
-    &.left {
-        left: 0;
-        transform: translateX(-100%);
-    }
+  &.right {
+    right: 0;
+    transform: translateX(100%);
+  }
+
+  &.left {
+    left: 0;
+    transform: translateX(-100%);
+  }
 }
 
 .#{$namespace}-notification-fade-leave-to {
-    opacity: 0;
+  opacity: 0;
 }

package/theme-chalk/overlay.scss

@@ -0,0 +1,17 @@
+@use 'mixins/mixins' as *;
+@use 'common/var' as *;
+
+@include b(overlay) {
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    z-index: 2000;
+    height: 100%;
+    background-color: getCssVar('overlay-color', 'lighter');
+    overflow: auto;
+    #{& + '-root'} {
+        height: 0;
+    }
+}

package/theme-chalk/page-header.scss

@@ -0,0 +1,60 @@
+@use 'mixins/mixins' as *;
+@use 'common/var' as *;
+
+@include b(page-header) {
+    @include when(contentful) {
+        @include e('main') {
+            border-top: 1px solid getCssVar('border-color', 'light');
+            margin-top: 16px;
+        }
+    }
+
+    @include e(header) {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        line-height: 24px;
+
+        @include e(left) {
+            display: flex;
+            align-items: center;
+            margin-right: 40px;
+            position: relative;
+
+            @include e('back') {
+                display: flex;
+                align-items: center;
+                cursor: pointer;
+            }
+
+            .#{$namespace}-divider--vertical {
+                margin: 0 16px;
+            }
+
+            @include e(icon) {
+                font-size: 16px;
+                margin-right: 10px;
+                display: flex;
+                align-items: center;
+
+                .#{$namespace}-icon {
+                    font-size: inherit;
+                }
+            }
+
+            @include e(title) {
+                font-size: 14px;
+                font-weight: 500;
+            }
+        }
+    }
+
+    @include e(content) {
+        font-size: 18px;
+        color: getCssVar('text-color', 'primary');
+    }
+
+    @include e(breadcrumb) {
+        margin-bottom: 16px;
+    }
+}

package/theme-chalk/popper.scss

@@ -1,104 +1,104 @@
-@use 'mixins/mixins' as *;
-@use 'mixins/var' as *;
-@use 'common/var' as *;
-
-@include b(popper) {
-    @include set-component-css-var('popper', $popper);
-}
-
-@include b(popper) {
-    position: absolute;
-    border-radius: getCssVar('popper', 'border-radius');
-    // padding: 5px 11px;
-    z-index: 2000;
-    font-size: 12px;
-    line-height: 20px;
-    min-width: 10px;
-    overflow-wrap: break-word;
-    word-break: break-all;
-    visibility: visible;
-
-    $arrow-selector: #{& + '__arrow'};
-
-    @include when(dark) {
-        color: getCssVar('bg-color');
-        background: getCssVar('text-color', 'primary');
-        border: 1px solid getCssVar('text-color', 'primary');
-
-        > #{$arrow-selector}::before {
-            border: 1px solid getCssVar('text-color', 'primary');
-            background: getCssVar('text-color', 'primary');
-            right: 0;
-        }
-    }
-
-    @include when(light) {
-        background: getCssVar('bg-color', 'overlay');
-        border: 1px solid getCssVar('border-color', 'light');
-
-        > #{$arrow-selector}::before {
-            border: 1px solid getCssVar('border-color', 'light');
-            background: getCssVar('bg-color', 'overlay');
-            right: 0;
-        }
-    }
-
-    @include when(pure) {
-        padding: 0;
-    }
-
-    @include e(arrow) {
-        position: absolute;
-        width: 10px;
-        height: 10px;
-        z-index: -1;
-
-        &::before {
-            position: absolute;
-            width: 10px;
-            height: 10px;
-            z-index: -1;
-            content: ' ';
-            transform: rotate(45deg);
-            background: getCssVar('text-color', 'primary');
-            box-sizing: border-box;
-        }
-    }
-
-    $placements: (
-        'top': 'bottom',
-        'bottom': 'top',
-        'left': 'right',
-        'right': 'left',
-    );
-
-    @each $placement, $opposite in $placements {
-        &[data-popper-placement^='#{$placement}'] > #{$arrow-selector} {
-            #{$opposite}: -5px;
-
-            &::before {
-                @if $placement == top {
-                    border-bottom-right-radius: 2px;
-                }
-                @if $placement == bottom {
-                    border-top-left-radius: 2px;
-                }
-                @if $placement == left {
-                    border-top-right-radius: 2px;
-                }
-                @if $placement == right {
-                    border-bottom-left-radius: 2px;
-                }
-            }
-        }
-    }
-
-    @each $placement, $adjacency in ('top': 'left', 'bottom': 'right', 'left': 'bottom', 'right': 'top') {
-        &[data-popper-placement^='#{$placement}'] > {
-            #{$arrow-selector}::before {
-                border-#{$placement}-color: transparent !important;
-                border-#{$adjacency}-color: transparent !important;
-            }
-        }
-    }
-}
+@use 'mixins/mixins' as *;
+@use 'mixins/var' as *;
+@use 'common/var' as *;
+
+@include b(popper) {
+    @include set-component-css-var('popper', $popper);
+}
+
+@include b(popper) {
+    position: absolute;
+    border-radius: getCssVar('popper', 'border-radius');
+    padding: 5px 11px;
+    z-index: 2000;
+    font-size: 12px;
+    line-height: 20px;
+    min-width: 10px;
+    overflow-wrap: break-word;
+    word-break: break-all;
+    visibility: visible;
+
+    $arrow-selector: #{& + '__arrow'};
+
+    @include when(dark) {
+        color: getCssVar('bg-color');
+        background: getCssVar('text-color', 'primary');
+        border: 1px solid getCssVar('text-color', 'primary');
+
+        > #{$arrow-selector}::before {
+            border: 1px solid getCssVar('text-color', 'primary');
+            background: getCssVar('text-color', 'primary');
+            right: 0;
+        }
+    }
+
+    @include when(light) {
+        background: getCssVar('bg-color', 'overlay');
+        border: 1px solid getCssVar('border-color', 'light');
+
+        > #{$arrow-selector}::before {
+            border: 1px solid getCssVar('border-color', 'light');
+            background: getCssVar('bg-color', 'overlay');
+            right: 0;
+        }
+    }
+
+    @include when(pure) {
+        padding: 0;
+    }
+
+    @include e(arrow) {
+        position: absolute;
+        width: 10px;
+        height: 10px;
+        z-index: -1;
+
+        &::before {
+            position: absolute;
+            width: 10px;
+            height: 10px;
+            z-index: -1;
+            content: ' ';
+            transform: rotate(45deg);
+            background: getCssVar('text-color', 'primary');
+            box-sizing: border-box;
+        }
+    }
+
+    $placements: (
+        'top': 'bottom',
+        'bottom': 'top',
+        'left': 'right',
+        'right': 'left',
+    );
+
+    @each $placement, $opposite in $placements {
+        &[data-popper-placement^='#{$placement}'] > #{$arrow-selector} {
+            #{$opposite}: -5px;
+
+            &::before {
+                @if $placement == top {
+                    border-bottom-right-radius: 2px;
+                }
+                @if $placement == bottom {
+                    border-top-left-radius: 2px;
+                }
+                @if $placement == left {
+                    border-top-right-radius: 2px;
+                }
+                @if $placement == right {
+                    border-bottom-left-radius: 2px;
+                }
+            }
+        }
+    }
+
+    @each $placement, $adjacency in ('top': 'left', 'bottom': 'right', 'left': 'bottom', 'right': 'top') {
+        &[data-popper-placement^='#{$placement}'] > {
+            #{$arrow-selector}::before {
+                border-#{$placement}-color: transparent !important;
+                border-#{$adjacency}-color: transparent !important;
+            }
+        }
+    }
+}