u

code/base-project/base-vue/packages/ao-design/src/message/index.scss

@@ -0,0 +1,128 @@
+@use '../_styles/_variables.scss' as *;
+@use 'sass:color';
+
+$message-prefix: #{$prefix}-message;
+
+.#{$message-prefix} {
+  &-wrapper {
+    position: fixed;
+    z-index: 6000;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+  &-item {
+    display: inline-flex;
+    align-items: center;
+    outline: 0;
+    width: fit-content;
+    vertical-align: middle;
+    border-radius: $border-radius;
+    padding: 6px 12px;
+    background-color: $bg-color-container;
+    color: $text-color-base;
+    box-shadow: $shadow-overlay;
+    box-sizing: border-box;
+    font-family: 'PingFang SC', 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  }
+  &-content {
+    font-size: 14px;
+    line-height: 1;
+  }
+  &-icon {
+    flex-shrink: 0;
+    margin-right: 8px;
+  }
+
+  &-close {
+    flex-shrink: 0;
+    margin-left: 6px;
+    color: $text-color-assist;
+    cursor: pointer;
+    border-radius: 50%;
+    width: 16px;
+    height: 16px;
+    &:hover {
+      background-color: $default-color-hover;
+    }
+  }
+
+  &-info {
+    color: $primary-color;
+  }
+  &-success {
+    color: $success-color;
+  }
+  &-warning {
+    color: $warning-color;
+  }
+  &-error {
+    color: $danger-color;
+  }
+  &-loading {
+    color: $primary-color;
+  }
+  &-placement {
+    &-top {
+      top: 20px;
+      left: 50%;
+      transform: translateX(-50%);
+      flex-direction: column;
+      align-items: center;
+    }
+    &-bottom {
+      bottom: 20px;
+      left: 50%;
+      transform: translateX(-50%);
+      flex-direction: column-reverse;
+      align-items: center;
+    }
+    &-left {
+      top: 50%;
+      left: 20px;
+      transform: translateY(-50%);
+      flex-direction: column;
+      align-items: flex-start;
+    }
+    &-right {
+      top: 50%;
+      right: 20px;
+      transform: translateY(-50%);
+      flex-direction: column;
+      align-items: flex-end;
+    }
+
+    // 组合方向
+    &-top-start {
+      top: 20px;
+      left: 20px;
+      flex-direction: column;
+      align-items: flex-start;
+    }
+    &-top-end {
+      top: 20px;
+      right: 20px;
+      flex-direction: column;
+      align-items: flex-end;
+    }
+    &-bottom-start {
+      bottom: 20px;
+      left: 20px;
+      flex-direction: column-reverse;
+      align-items: flex-start;
+    }
+    &-bottom-end {
+      bottom: 20px;
+      right: 20px;
+      flex-direction: column-reverse;
+      align-items: flex-end;
+    }
+    &-center {
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      flex-direction: column;
+      align-items: center;
+    }
+  }
+}