feat: gradient-text with color

demo/components/gradientTextDemo.vue

@@ -12,7 +12,47 @@
       轻轻闭上眼睛，此刻我觉得清醒。
     </n-gradient-text>
     <br>
-    <textarea rows="5"><n-gradient-text font-size="24">轻轻闭上眼睛，此刻我觉得清醒。</n-gradient-text></textarea>
+    <textarea rows="2"><n-gradient-text font-size="24">轻轻闭上眼睛，此刻我觉得清醒。</n-gradient-text></textarea>
+    <hr>
+    <h2>调整颜色</h2>
+    <n-gradient-text
+      font-size="24"
+      type="danger"
+    >
+      type="danger"
+    </n-gradient-text>
+    <n-gradient-text
+      font-size="24"
+      type="warning"
+    >
+      type="warning"
+    </n-gradient-text>
+    <n-gradient-text
+      font-size="24"
+      type="success"
+    >
+      type="success"
+    </n-gradient-text>
+    <br>
+    <textarea rows="20">
+<n-gradient-text
+  font-size="24"
+  type="danger"
+>
+  type="danger"
+</n-gradient-text>
+<n-gradient-text
+  font-size="24"
+  type="warning"
+>
+  type="warning"
+</n-gradient-text>
+<n-gradient-text
+  font-size="24"
+  type="success"
+>
+  type="success"
+</n-gradient-text></textarea>
     <hr>
   </div>
 </template>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "naive-ui",
-  "version": "0.1.28",
+  "version": "0.1.29",
   "description": "",
   "main": "index.js",
   "scripts": {

packages/common/GradientText/src/main.vue

@@ -1,12 +1,15 @@
 <template>
-  <div class="n-gradient-header">
+  <div
+    class="n-gradient-text"
+    :style="style"
+  >
     <div
-      class="header"
-      :style="style"
+      class="n-gradient-text__content"
+      :class="{
+        [`is-${type}`]: true
+      }"
     >
-      <div class="content">
-        <slot />
-      </div>
+      <slot />
     </div>
   </div>
 </template>
@@ -18,6 +21,10 @@ export default {
     'fontSize': {
       type: Number,
       default: 16
+    },
+    type: {
+      type: String,
+      default: 'default'
     }
   },
   computed: {

packages/common/Select/src/main.vue

@@ -1,34 +1,38 @@
 <template>
   <div
     class="n-select"
-    :class="{ active: active }"
+    :class="{ 'is-active': active }"
     @click="toggleSelect"
   >
     <div
       v-if="multiple"
-      class="link"
+      class="n-select-link"
     >
       <div
         v-if="selected"
-        class="tags"
+        class="n-select-link__tags"
       >
         <span
           v-for="item in selectedItems"
           :key="item.value"
         >
-          {{ item.value }}
+          {{ item.label }}
         </span>
       </div><div
         v-else
-        class="tags placeholder"
+        class="n-select__tags n-select__placeholder"
       >
         {{ placeholder }}
       </div>
-      <div class="menu">
+      <div class="n-select-menu">
         <div
           v-for="item in items"
           :key="item.value"
-          class="item"
+          class="n-select-menu__item"
+          :class="{
+            'is-selected':
+              selectedItemValues.has(item.value)
+          }"
           @click="toggle(item)"
         >
           {{ item.label }}
@@ -37,24 +41,30 @@
     </div>
     <div
       v-else
-      class="link"
+      class="n-select-link"
     >
       <div
         v-if="selected"
-        class="label"
+        class="n-select-link__label"
       >
         {{ selectedValue }}
-      </div><div
+      </div>
+      <div
         v-else
-        class="label placeholder"
+        class="n-select__label n-select__placeholder"
       >
         {{ placeholder }}
       </div>
-      <div class="menu">
+      <div class="n-select-menu">
         <div
           v-for="item in items"
           :key="item.value"
-          class="item"
+          class="n-select-menu__item"
+          :class="{
+            'is-selected':
+              selectedValue ===
+              item.value
+          }"
           @click="select(item)"
         >
           {{ item.label }}
@@ -96,6 +106,9 @@ export default {
       selectedItems: [],
       selectedItemValues: new Set()
     }
+  },
+  created () {
+
   },
   methods: {
     toggleSelect () {
@@ -119,7 +132,7 @@ export default {
       } else {
         this.selected = false
       }
-      this.$emit('change', this.selectedItems)
+      this.$emit('change', this.selectedItems.map(item => item.value))
     }
   }
 }

packages/nimbus/FormCard/src/main.vue

@@ -60,6 +60,7 @@ export default {
       line-height: 19px;
       font-size: 16px;
       font-weight: 700;
+      color: #ffffff;
     }
     .n-nimbus-form-card__right-header {
       display: flex;

styles/GradientText.scss

@@ -1,17 +1,31 @@
 @import './mixins/mixins.scss';
 @import './theme/default.scss';
 
-@include b(gradient-header) {
-  & > .header {
-    display: inline-block;
-    position: relative;
-    font-weight: 700;
-    font-size: 16px;
-    & > .content {
-      background: $default-header-gradient;
-      background-clip: text;
+@include b(gradient-text) {
+  display: inline-block;
+  position: relative;
+  font-weight: 700;
+  font-size: 16px;
+  .n-gradient-text__content {
+    background: $default-text-gradient;
+    background-clip: text;
+    -webkit-background-clip: text;
+    color: transparent;
+    &.is-default {
+      background: $default-text-gradient;
+      -webkit-background-clip: text;
+    }
+    &.is-warning {
+      background: $default-text-gradient-warning;
+      -webkit-background-clip: text;
+    }
+    &.is-danger {
+      background: $default-text-gradient-danger;
+      -webkit-background-clip: text;
+    }
+    &.is-success {
+      background: $default-text-gradient-success;
       -webkit-background-clip: text;
-      color: transparent;
     }
   }
 }

styles/Select.scss

@@ -15,19 +15,20 @@
   color: #fff;
   font-family: $default-font-family;
   cursor: pointer;
-  &.active {
+  &.is-active {
+    box-shadow:0px 0px 10px 1px rgba(54,101,85,1);
     border: 1px solid #63E2B7;
     margin: -1px;
-    .link {
+    .n-select-link {
       &::after {
         transform: rotate(135deg);
       }
-      .menu {
+      .n-select-menu {
         visibility: visible;
       }
     }
   }
-  .link {
+  .n-select-link {
     position: relative;
     &::after {
       position: absolute;
@@ -41,17 +42,17 @@
       transform: rotate(-45deg);
       transform-origin: 25% 75%;
     }
-    .label {
-      &.placeholder {
+    .n-select-link__label {
+      &.n-select__placeholder {
         color: rgba(255, 255, 255, .4);
       }
     }
-    .tags {
-      &.placeholder {
+    .n-select-link__tags {
+      &.n-select__placeholder {
         color: rgba(255, 255, 255, .4);
       }
     }
-    .menu {
+    .n-select-menu {
       overflow: hidden;
       position: absolute;
       visibility: hidden;
@@ -61,12 +62,11 @@
       border-radius: 9px;
       background-color: rgba(75, 81, 106, 1);
       box-shadow: 0px 2px 20px 0px rgba(0,0,0,0.16);
-      .item {
+      .n-select-menu__item {
         padding: 8px 14px;
         color: rgba(255, 255, 255, .7);
-        &:hover {
+        &:hover, &.is-selected {
           background-color: rgba(96, 220, 178, 0.3);
-          color: #63E2B7;
         }
       }
     }

styles/theme/default.scss

@@ -17,7 +17,10 @@ $table-body-background-color: #1f263e;
 $table-box-shadow: 0 3px 20px 6px rgba(0, 0, 0, .2);
 
 $default-button-gradient: linear-gradient(14deg, rgba(120,205,104,1) 0%, rgba(20,166,165,1) 100%);
-$default-header-gradient: linear-gradient(14deg, rgba(120,205,104,1) 0%, rgba(20,166,165,1) 100%);
+$default-text-gradient: linear-gradient(14deg, rgba(120,205,104,1) 0%, rgba(20,166,165,1) 100%);
+$default-text-gradient-warning: linear-gradient(252deg, rgba(247,181,0,1) 0%, rgba(237,255,0,1) 100%);
+$default-text-gradient-success: linear-gradient(14deg, rgba(120,205,104,1) 0%, rgba(20,166,165,1) 100%);
+$default-text-gradient-danger: linear-gradient(214deg, rgba(224,32,32,1) 0%, rgba(250,100,0,1) 100%);
 $default-button-border-color: #63E2B7;
 $default-button-text-color: #63E2B7;
 $default-button-hover-text-color: #1F263E;