vue-color-ui 0.0.38 → 0.0.40

package/README.md

@@ -79,7 +79,31 @@ type ColorName =
   | "grey"
   | "gray"
   | "black"
-  | "white";
+  | "white"
+  | "gradual-red"
+  | "gradual-orange"
+  | "gradual-green"
+  | "gradual-purple"
+  | "gradual-pink"
+  | "gradual-blue"
+  | "gradual-teal"
+  | "gradual-sunset"
+  | "gradual-dream"
+  | "gradual-vibrant-orange"
+  | "gradual-purple-blue"
+  | "gradual-soft-pink-blue"
+  | "gradual-rainbow"
+  | "gradual-blue-purple"
+  | "gradual-tropical"
+  | "gradual-dreamy"
+  | "gradual-golden"
+  | "gradual-gray"
+  | "gradual-brown"
+  | "gradual-metal"
+  | "gradual-lake-blue"
+  | "gradual-rose-gold"
+  | "gradual-ocean";
+
 
 type GradientColorName =
   | "gradual-red"

package/lib/css/main.css

@@ -3611,6 +3611,275 @@ scroll-view.cu-steps .cu-item {
     color: #ffffff;
 }
 
+.bg-gradual-teal {
+    background-image: linear-gradient(45deg, #00c6ff, #0072ff);
+    color: #ffffff;
+}
+
+.bg-gradual-sunset {
+    background-image: linear-gradient(45deg, #ff6e7f, #bfe9ff);
+    color: #ffffff;
+}
+
+.bg-gradual-dream {
+    background-image: linear-gradient(45deg, #a18cd1, #fbc2eb);
+    color: #ffffff;
+}
+
+.bg-gradual-vibrant-orange {
+    background-image: linear-gradient(45deg, #ff9a00, #ff6f00);
+    color: #ffffff;
+}
+
+.bg-gradual-purple-blue {
+    background-image: linear-gradient(45deg, #6a11cb, #2575fc);
+    color: #ffffff;
+}
+
+.bg-gradual-soft-pink-blue {
+    background-image: linear-gradient(45deg, #f8cdda, #1d2b64);
+    color: #ffffff;
+}
+
+.bg-gradual-rainbow {
+    background-image: linear-gradient(45deg, #ff5f6d, #ffc371);
+    color: #ffffff;
+}
+
+.bg-gradual-blue-purple {
+    background-image: linear-gradient(45deg, #00c6ff, #f0f0f0, #6a11cb);
+    color: #ffffff;
+}
+
+.bg-gradual-tropical {
+    background-image: linear-gradient(45deg, #ff758c, #ff7eb3, #ff6a00);
+    color: #ffffff;
+}
+
+.bg-gradual-dreamy {
+    background-image: linear-gradient(45deg, #4facfe, #00f2fe, #1d2b64);
+    color: #ffffff;
+}
+
+.bg-gradual-golden {
+    background-image: linear-gradient(45deg, #ff7e5f, #feb47b, #ff6a00);
+    color: #ffffff;
+}
+
+.bg-gradual-gray {
+    background-image: linear-gradient(45deg, #555, #bbb);
+    color: #ffffff;
+}
+
+.bg-gradual-brown {
+    background-image: linear-gradient(45deg, #8B4513, #D2691E);
+    color: #ffffff;
+}
+
+.bg-gradual-metal {
+    background-image: linear-gradient(45deg, #A9A9A9, #808080);
+    color: #ffffff;
+}
+
+.bg-gradual-lake-blue {
+    background-image: linear-gradient(45deg, #7F7FD5, #86A8E7, #91EAE4);
+    color: #ffffff;
+}
+
+.bg-gradual-rose-gold {
+    background-image: linear-gradient(45deg, #E8CBC0, #636FA4);
+    color: #ffffff;
+}
+
+.bg-gradual-ocean {
+    background-image: linear-gradient(45deg, #00B4DB, #0083B0);
+    color: #ffffff;
+}
+
+.text-gradual-red {
+    background-image: linear-gradient(45deg, #f43f3b, #ec008c);
+    -webkit-background-clip: text;
+    background-clip: text;
+    color: transparent;
+    display: inline-block;
+}
+
+.text-gradual-orange {
+    background-image: linear-gradient(45deg, #ff9700, #ed1c24);
+    -webkit-background-clip: text;
+    background-clip: text;
+    color: transparent;
+    display: inline-block;
+}
+
+.text-gradual-green {
+    background-image: linear-gradient(45deg, #39b54a, #8dc63f);
+    -webkit-background-clip: text;
+    background-clip: text;
+    color: transparent;
+    display: inline-block;
+}
+
+.text-gradual-purple {
+    background-image: linear-gradient(45deg, #9000ff, #5e00ff);
+    -webkit-background-clip: text;
+    background-clip: text;
+    color: transparent;
+    display: inline-block;
+}
+
+.text-gradual-pink {
+    background-image: linear-gradient(45deg, #ec008c, #6739b6);
+    -webkit-background-clip: text;
+    background-clip: text;
+    color: transparent;
+    display: inline-block;
+}
+
+.text-gradual-blue {
+    background-image: linear-gradient(45deg, #0081ff, #1cbbb4);
+    -webkit-background-clip: text;
+    background-clip: text;
+    color: transparent;
+    display: inline-block;
+}
+
+.text-gradual-teal {
+    background-image: linear-gradient(45deg, #00c6ff, #0072ff);
+    -webkit-background-clip: text;
+    background-clip: text;
+    color: transparent;
+    display: inline-block;
+}
+
+.text-gradual-sunset {
+    background-image: linear-gradient(45deg, #ff6e7f, #bfe9ff);
+    -webkit-background-clip: text;
+    background-clip: text;
+    color: transparent;
+    display: inline-block;
+}
+
+.text-gradual-dream {
+    background-image: linear-gradient(45deg, #a18cd1, #fbc2eb);
+    -webkit-background-clip: text;
+    background-clip: text;
+    color: transparent;
+    display: inline-block;
+}
+
+.text-gradual-vibrant-orange {
+    background-image: linear-gradient(45deg, #ff9a00, #ff6f00);
+    -webkit-background-clip: text;
+    background-clip: text;
+    color: transparent;
+    display: inline-block;
+}
+
+.text-gradual-purple-blue {
+    background-image: linear-gradient(45deg, #6a11cb, #2575fc);
+    -webkit-background-clip: text;
+    background-clip: text;
+    color: transparent;
+    display: inline-block;
+}
+
+.text-gradual-soft-pink-blue {
+    background-image: linear-gradient(45deg, #f8cdda, #1d2b64);
+    -webkit-background-clip: text;
+    background-clip: text;
+    color: transparent;
+    display: inline-block;
+}
+
+.text-gradual-rainbow {
+    background-image: linear-gradient(45deg, #ff5f6d, #ffc371);
+    -webkit-background-clip: text;
+    background-clip: text;
+    color: transparent;
+    display: inline-block;
+}
+
+.text-gradual-blue-purple {
+    background-image: linear-gradient(45deg, #00c6ff, #f0f0f0, #6a11cb);
+    -webkit-background-clip: text;
+    background-clip: text;
+    color: transparent;
+    display: inline-block;
+}
+
+.text-gradual-tropical {
+    background-image: linear-gradient(45deg, #ff758c, #ff7eb3, #ff6a00);
+    -webkit-background-clip: text;
+    background-clip: text;
+    color: transparent;
+    display: inline-block;
+}
+
+.text-gradual-dreamy {
+    background-image: linear-gradient(45deg, #4facfe, #00f2fe, #1d2b64);
+    -webkit-background-clip: text;
+    background-clip: text;
+    color: transparent;
+    display: inline-block;
+}
+
+.text-gradual-golden {
+    background-image: linear-gradient(45deg, #ff7e5f, #feb47b, #ff6a00);
+    -webkit-background-clip: text;
+    background-clip: text;
+    color: transparent;
+    display: inline-block;
+}
+
+.text-gradual-gray {
+    background-image: linear-gradient(45deg, #bdc3c7, #2c3e50);
+    -webkit-background-clip: text;
+    background-clip: text;
+    color: transparent;
+    display: inline-block;
+}
+
+.text-gradual-brown {
+    background-image: linear-gradient(45deg, #8e2e2e, #4e342e);
+    -webkit-background-clip: text;
+    background-clip: text;
+    color: transparent;
+    display: inline-block;
+}
+
+.text-gradual-metal {
+    background-image: linear-gradient(45deg, #d7d2cc, #304352);
+    -webkit-background-clip: text;
+    background-clip: text;
+    color: transparent;
+    display: inline-block;
+}
+
+.text-gradual-lake-blue {
+    background-image: linear-gradient(45deg, #6dd5ed, #2193b0);
+    -webkit-background-clip: text;
+    background-clip: text;
+    color: transparent;
+    display: inline-block;
+}
+
+.text-gradual-rose-gold {
+    background-image: linear-gradient(45deg, #e8cbc0, #636fa4);
+    -webkit-background-clip: text;
+    background-clip: text;
+    color: transparent;
+    display: inline-block;
+}
+
+.text-gradual-ocean {
+    background-image: linear-gradient(45deg, #2e3192, #1bffff);
+    -webkit-background-clip: text;
+    background-clip: text;
+    color: transparent;
+    display: inline-block;
+}
+
 .shadow[class*="-red"] {
     box-shadow: 3px 3px 4px rgba(204, 69, 59, 0.2);
 }