vue-color-ui 0.0.37 → 0.0.39
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +25 -1
- package/lib/css/main.css +269 -0
- package/lib/style.css +1 -1
- package/lib/temp-color-ui.js +152 -153
- package/lib/temp-color-ui.umd.cjs +2 -2
- package/package.json +1 -1
- package/type/color.d.ts +25 -1
- package/types/pkg/tools.d.ts +5 -0
package/README.md
CHANGED
|
@@ -79,7 +79,31 @@ type ColorName =
|
|
|
79
79
|
| "grey"
|
|
80
80
|
| "gray"
|
|
81
81
|
| "black"
|
|
82
|
-
| "white"
|
|
82
|
+
| "white"
|
|
83
|
+
| "gradual-red"
|
|
84
|
+
| "gradual-orange"
|
|
85
|
+
| "gradual-green"
|
|
86
|
+
| "gradual-purple"
|
|
87
|
+
| "gradual-pink"
|
|
88
|
+
| "gradual-blue"
|
|
89
|
+
| "gradual-teal"
|
|
90
|
+
| "gradual-sunset"
|
|
91
|
+
| "gradual-dream"
|
|
92
|
+
| "gradual-vibrant-orange"
|
|
93
|
+
| "gradual-purple-blue"
|
|
94
|
+
| "gradual-soft-pink-blue"
|
|
95
|
+
| "gradual-rainbow"
|
|
96
|
+
| "gradual-blue-purple"
|
|
97
|
+
| "gradual-tropical"
|
|
98
|
+
| "gradual-dreamy"
|
|
99
|
+
| "gradual-golden"
|
|
100
|
+
| "gradual-gray"
|
|
101
|
+
| "gradual-brown"
|
|
102
|
+
| "gradual-metal"
|
|
103
|
+
| "gradual-lake-blue"
|
|
104
|
+
| "gradual-rose-gold"
|
|
105
|
+
| "gradual-ocean";
|
|
106
|
+
|
|
83
107
|
|
|
84
108
|
type GradientColorName =
|
|
85
109
|
| "gradual-red"
|
package/lib/css/main.css
CHANGED
|
@@ -3611,6 +3611,275 @@ scroll-view.cu-steps .cu-item {
|
|
|
3611
3611
|
color: #ffffff;
|
|
3612
3612
|
}
|
|
3613
3613
|
|
|
3614
|
+
.bg-gradual-teal {
|
|
3615
|
+
background-image: linear-gradient(45deg, #00c6ff, #0072ff);
|
|
3616
|
+
color: #ffffff;
|
|
3617
|
+
}
|
|
3618
|
+
|
|
3619
|
+
.bg-gradual-sunset {
|
|
3620
|
+
background-image: linear-gradient(45deg, #ff6e7f, #bfe9ff);
|
|
3621
|
+
color: #ffffff;
|
|
3622
|
+
}
|
|
3623
|
+
|
|
3624
|
+
.bg-gradual-dream {
|
|
3625
|
+
background-image: linear-gradient(45deg, #a18cd1, #fbc2eb);
|
|
3626
|
+
color: #ffffff;
|
|
3627
|
+
}
|
|
3628
|
+
|
|
3629
|
+
.bg-gradual-vibrant-orange {
|
|
3630
|
+
background-image: linear-gradient(45deg, #ff9a00, #ff6f00);
|
|
3631
|
+
color: #ffffff;
|
|
3632
|
+
}
|
|
3633
|
+
|
|
3634
|
+
.bg-gradual-purple-blue {
|
|
3635
|
+
background-image: linear-gradient(45deg, #6a11cb, #2575fc);
|
|
3636
|
+
color: #ffffff;
|
|
3637
|
+
}
|
|
3638
|
+
|
|
3639
|
+
.bg-gradual-soft-pink-blue {
|
|
3640
|
+
background-image: linear-gradient(45deg, #f8cdda, #1d2b64);
|
|
3641
|
+
color: #ffffff;
|
|
3642
|
+
}
|
|
3643
|
+
|
|
3644
|
+
.bg-gradual-rainbow {
|
|
3645
|
+
background-image: linear-gradient(45deg, #ff5f6d, #ffc371);
|
|
3646
|
+
color: #ffffff;
|
|
3647
|
+
}
|
|
3648
|
+
|
|
3649
|
+
.bg-gradual-blue-purple {
|
|
3650
|
+
background-image: linear-gradient(45deg, #00c6ff, #f0f0f0, #6a11cb);
|
|
3651
|
+
color: #ffffff;
|
|
3652
|
+
}
|
|
3653
|
+
|
|
3654
|
+
.bg-gradual-tropical {
|
|
3655
|
+
background-image: linear-gradient(45deg, #ff758c, #ff7eb3, #ff6a00);
|
|
3656
|
+
color: #ffffff;
|
|
3657
|
+
}
|
|
3658
|
+
|
|
3659
|
+
.bg-gradual-dreamy {
|
|
3660
|
+
background-image: linear-gradient(45deg, #4facfe, #00f2fe, #1d2b64);
|
|
3661
|
+
color: #ffffff;
|
|
3662
|
+
}
|
|
3663
|
+
|
|
3664
|
+
.bg-gradual-golden {
|
|
3665
|
+
background-image: linear-gradient(45deg, #ff7e5f, #feb47b, #ff6a00);
|
|
3666
|
+
color: #ffffff;
|
|
3667
|
+
}
|
|
3668
|
+
|
|
3669
|
+
.bg-gradual-gray {
|
|
3670
|
+
background-image: linear-gradient(45deg, #555, #bbb);
|
|
3671
|
+
color: #ffffff;
|
|
3672
|
+
}
|
|
3673
|
+
|
|
3674
|
+
.bg-gradual-brown {
|
|
3675
|
+
background-image: linear-gradient(45deg, #8B4513, #D2691E);
|
|
3676
|
+
color: #ffffff;
|
|
3677
|
+
}
|
|
3678
|
+
|
|
3679
|
+
.bg-gradual-metal {
|
|
3680
|
+
background-image: linear-gradient(45deg, #A9A9A9, #808080);
|
|
3681
|
+
color: #ffffff;
|
|
3682
|
+
}
|
|
3683
|
+
|
|
3684
|
+
.bg-gradual-lake-blue {
|
|
3685
|
+
background-image: linear-gradient(45deg, #7F7FD5, #86A8E7, #91EAE4);
|
|
3686
|
+
color: #ffffff;
|
|
3687
|
+
}
|
|
3688
|
+
|
|
3689
|
+
.bg-gradual-rose-gold {
|
|
3690
|
+
background-image: linear-gradient(45deg, #E8CBC0, #636FA4);
|
|
3691
|
+
color: #ffffff;
|
|
3692
|
+
}
|
|
3693
|
+
|
|
3694
|
+
.bg-gradual-ocean {
|
|
3695
|
+
background-image: linear-gradient(45deg, #00B4DB, #0083B0);
|
|
3696
|
+
color: #ffffff;
|
|
3697
|
+
}
|
|
3698
|
+
|
|
3699
|
+
.text-gradual-red {
|
|
3700
|
+
background-image: linear-gradient(45deg, #f43f3b, #ec008c);
|
|
3701
|
+
-webkit-background-clip: text;
|
|
3702
|
+
background-clip: text;
|
|
3703
|
+
color: transparent;
|
|
3704
|
+
display: inline-block;
|
|
3705
|
+
}
|
|
3706
|
+
|
|
3707
|
+
.text-gradual-orange {
|
|
3708
|
+
background-image: linear-gradient(45deg, #ff9700, #ed1c24);
|
|
3709
|
+
-webkit-background-clip: text;
|
|
3710
|
+
background-clip: text;
|
|
3711
|
+
color: transparent;
|
|
3712
|
+
display: inline-block;
|
|
3713
|
+
}
|
|
3714
|
+
|
|
3715
|
+
.text-gradual-green {
|
|
3716
|
+
background-image: linear-gradient(45deg, #39b54a, #8dc63f);
|
|
3717
|
+
-webkit-background-clip: text;
|
|
3718
|
+
background-clip: text;
|
|
3719
|
+
color: transparent;
|
|
3720
|
+
display: inline-block;
|
|
3721
|
+
}
|
|
3722
|
+
|
|
3723
|
+
.text-gradual-purple {
|
|
3724
|
+
background-image: linear-gradient(45deg, #9000ff, #5e00ff);
|
|
3725
|
+
-webkit-background-clip: text;
|
|
3726
|
+
background-clip: text;
|
|
3727
|
+
color: transparent;
|
|
3728
|
+
display: inline-block;
|
|
3729
|
+
}
|
|
3730
|
+
|
|
3731
|
+
.text-gradual-pink {
|
|
3732
|
+
background-image: linear-gradient(45deg, #ec008c, #6739b6);
|
|
3733
|
+
-webkit-background-clip: text;
|
|
3734
|
+
background-clip: text;
|
|
3735
|
+
color: transparent;
|
|
3736
|
+
display: inline-block;
|
|
3737
|
+
}
|
|
3738
|
+
|
|
3739
|
+
.text-gradual-blue {
|
|
3740
|
+
background-image: linear-gradient(45deg, #0081ff, #1cbbb4);
|
|
3741
|
+
-webkit-background-clip: text;
|
|
3742
|
+
background-clip: text;
|
|
3743
|
+
color: transparent;
|
|
3744
|
+
display: inline-block;
|
|
3745
|
+
}
|
|
3746
|
+
|
|
3747
|
+
.text-gradual-teal {
|
|
3748
|
+
background-image: linear-gradient(45deg, #00c6ff, #0072ff);
|
|
3749
|
+
-webkit-background-clip: text;
|
|
3750
|
+
background-clip: text;
|
|
3751
|
+
color: transparent;
|
|
3752
|
+
display: inline-block;
|
|
3753
|
+
}
|
|
3754
|
+
|
|
3755
|
+
.text-gradual-sunset {
|
|
3756
|
+
background-image: linear-gradient(45deg, #ff6e7f, #bfe9ff);
|
|
3757
|
+
-webkit-background-clip: text;
|
|
3758
|
+
background-clip: text;
|
|
3759
|
+
color: transparent;
|
|
3760
|
+
display: inline-block;
|
|
3761
|
+
}
|
|
3762
|
+
|
|
3763
|
+
.text-gradual-dream {
|
|
3764
|
+
background-image: linear-gradient(45deg, #a18cd1, #fbc2eb);
|
|
3765
|
+
-webkit-background-clip: text;
|
|
3766
|
+
background-clip: text;
|
|
3767
|
+
color: transparent;
|
|
3768
|
+
display: inline-block;
|
|
3769
|
+
}
|
|
3770
|
+
|
|
3771
|
+
.text-gradual-vibrant-orange {
|
|
3772
|
+
background-image: linear-gradient(45deg, #ff9a00, #ff6f00);
|
|
3773
|
+
-webkit-background-clip: text;
|
|
3774
|
+
background-clip: text;
|
|
3775
|
+
color: transparent;
|
|
3776
|
+
display: inline-block;
|
|
3777
|
+
}
|
|
3778
|
+
|
|
3779
|
+
.text-gradual-purple-blue {
|
|
3780
|
+
background-image: linear-gradient(45deg, #6a11cb, #2575fc);
|
|
3781
|
+
-webkit-background-clip: text;
|
|
3782
|
+
background-clip: text;
|
|
3783
|
+
color: transparent;
|
|
3784
|
+
display: inline-block;
|
|
3785
|
+
}
|
|
3786
|
+
|
|
3787
|
+
.text-gradual-soft-pink-blue {
|
|
3788
|
+
background-image: linear-gradient(45deg, #f8cdda, #1d2b64);
|
|
3789
|
+
-webkit-background-clip: text;
|
|
3790
|
+
background-clip: text;
|
|
3791
|
+
color: transparent;
|
|
3792
|
+
display: inline-block;
|
|
3793
|
+
}
|
|
3794
|
+
|
|
3795
|
+
.text-gradual-rainbow {
|
|
3796
|
+
background-image: linear-gradient(45deg, #ff5f6d, #ffc371);
|
|
3797
|
+
-webkit-background-clip: text;
|
|
3798
|
+
background-clip: text;
|
|
3799
|
+
color: transparent;
|
|
3800
|
+
display: inline-block;
|
|
3801
|
+
}
|
|
3802
|
+
|
|
3803
|
+
.text-gradual-blue-purple {
|
|
3804
|
+
background-image: linear-gradient(45deg, #00c6ff, #f0f0f0, #6a11cb);
|
|
3805
|
+
-webkit-background-clip: text;
|
|
3806
|
+
background-clip: text;
|
|
3807
|
+
color: transparent;
|
|
3808
|
+
display: inline-block;
|
|
3809
|
+
}
|
|
3810
|
+
|
|
3811
|
+
.text-gradual-tropical {
|
|
3812
|
+
background-image: linear-gradient(45deg, #ff758c, #ff7eb3, #ff6a00);
|
|
3813
|
+
-webkit-background-clip: text;
|
|
3814
|
+
background-clip: text;
|
|
3815
|
+
color: transparent;
|
|
3816
|
+
display: inline-block;
|
|
3817
|
+
}
|
|
3818
|
+
|
|
3819
|
+
.text-gradual-dreamy {
|
|
3820
|
+
background-image: linear-gradient(45deg, #4facfe, #00f2fe, #1d2b64);
|
|
3821
|
+
-webkit-background-clip: text;
|
|
3822
|
+
background-clip: text;
|
|
3823
|
+
color: transparent;
|
|
3824
|
+
display: inline-block;
|
|
3825
|
+
}
|
|
3826
|
+
|
|
3827
|
+
.text-gradual-golden {
|
|
3828
|
+
background-image: linear-gradient(45deg, #ff7e5f, #feb47b, #ff6a00);
|
|
3829
|
+
-webkit-background-clip: text;
|
|
3830
|
+
background-clip: text;
|
|
3831
|
+
color: transparent;
|
|
3832
|
+
display: inline-block;
|
|
3833
|
+
}
|
|
3834
|
+
|
|
3835
|
+
.text-gradual-gray {
|
|
3836
|
+
background-image: linear-gradient(45deg, #bdc3c7, #2c3e50);
|
|
3837
|
+
-webkit-background-clip: text;
|
|
3838
|
+
background-clip: text;
|
|
3839
|
+
color: transparent;
|
|
3840
|
+
display: inline-block;
|
|
3841
|
+
}
|
|
3842
|
+
|
|
3843
|
+
.text-gradual-brown {
|
|
3844
|
+
background-image: linear-gradient(45deg, #8e2e2e, #4e342e);
|
|
3845
|
+
-webkit-background-clip: text;
|
|
3846
|
+
background-clip: text;
|
|
3847
|
+
color: transparent;
|
|
3848
|
+
display: inline-block;
|
|
3849
|
+
}
|
|
3850
|
+
|
|
3851
|
+
.text-gradual-metal {
|
|
3852
|
+
background-image: linear-gradient(45deg, #d7d2cc, #304352);
|
|
3853
|
+
-webkit-background-clip: text;
|
|
3854
|
+
background-clip: text;
|
|
3855
|
+
color: transparent;
|
|
3856
|
+
display: inline-block;
|
|
3857
|
+
}
|
|
3858
|
+
|
|
3859
|
+
.text-gradual-lake-blue {
|
|
3860
|
+
background-image: linear-gradient(45deg, #6dd5ed, #2193b0);
|
|
3861
|
+
-webkit-background-clip: text;
|
|
3862
|
+
background-clip: text;
|
|
3863
|
+
color: transparent;
|
|
3864
|
+
display: inline-block;
|
|
3865
|
+
}
|
|
3866
|
+
|
|
3867
|
+
.text-gradual-rose-gold {
|
|
3868
|
+
background-image: linear-gradient(45deg, #e8cbc0, #636fa4);
|
|
3869
|
+
-webkit-background-clip: text;
|
|
3870
|
+
background-clip: text;
|
|
3871
|
+
color: transparent;
|
|
3872
|
+
display: inline-block;
|
|
3873
|
+
}
|
|
3874
|
+
|
|
3875
|
+
.text-gradual-ocean {
|
|
3876
|
+
background-image: linear-gradient(45deg, #2e3192, #1bffff);
|
|
3877
|
+
-webkit-background-clip: text;
|
|
3878
|
+
background-clip: text;
|
|
3879
|
+
color: transparent;
|
|
3880
|
+
display: inline-block;
|
|
3881
|
+
}
|
|
3882
|
+
|
|
3614
3883
|
.shadow[class*="-red"] {
|
|
3615
3884
|
box-shadow: 3px 3px 4px rgba(204, 69, 59, 0.2);
|
|
3616
3885
|
}
|
package/lib/style.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.nav-list{display:flex;flex-wrap:wrap;padding:0 20px;justify-content:space-between}.nav-li{padding:15px;border-radius:6px;width:45%;margin:0 2.5% 20px;background-size:cover;background-position:center;position:relative;z-index:1;cursor:pointer}.nav-li:after{content:"";position:absolute;z-index:-1;background-color:inherit;width:100%;height:100%;left:0;bottom:-10%;border-radius:5px;opacity:.2;transform:scale(.9)}.nav-li.cur{color:#fff;background:#5eb95e;box-shadow:2px 2px 3px #5eb95e66}.nav-title{font-size:16px;font-weight:300}.nav-title:first-letter{font-size:20px;margin-right:2px}.nav-name{font-size:14px;text-transform:Capitalize;margin-top:10px;position:relative}.nav-name:before{content:"";position:absolute;display:block;width:20px;height:3px;background:#fff;bottom:0;right:0;opacity:.5}.nav-name:after{content:"";position:absolute;display:block;width:50px;height:1px;background:#fff;bottom:0;right:20px;opacity:.3}.nav-name:first-letter{font-weight:700;font-size:18px;margin-right:1px}.nav-li text{position:absolute;right:15px;top:15px;font-size:26px;width:30px;height:30px;text-align:center;line-height:30px}.text-light{font-weight:300}@keyframes show{0%{transform:translateY(-50px)}60%{transform:translateY(20px)}to{transform:translateY(0)}}@-webkit-keyframes show{0%{transform:translateY(-50px)}60%{transform:translateY(20px)}to{transform:translateY(0)}}.cu-card-cover[data-v-bbdb83ff]{width:100%}.cu-card .content img[data-v-bbdb83ff]{width:33%;object-fit:cover}.cu-card-cover{width:100%}.cu-card .content img{width:33%;object-fit:cover}.string-list[data-v-c7a21a1c]{width:100%;display:block;list-style:none;background-color:#fff;padding:2px 5px;margin:0;box-shadow:0 4px 8px #0000001a}.string-list li[data-v-c7a21a1c]{line-height:1.5rem;padding:8px 12px;border-bottom:1px solid #eee;transition:background-color .3s,color .3s}.string-list li[data-v-c7a21a1c]:last-child{border-bottom:none}.string-list li[data-v-c7a21a1c]:hover{background-color:#f0f0f0;color:#333;cursor:pointer;border-radius:4px}.emoji-panel[data-v-e9a4aa4d]{background-color:#fff;border:1px solid #ccc;padding:10px;display:flex;flex-wrap:wrap;z-index:1000;height:280px;overflow-y:auto}.emoji-panel span[data-v-e9a4aa4d]{cursor:pointer;font-size:24px;margin:5px}.function-panel-container[data-v-1fefca20]{background-color:#fff;box-sizing:border-box;width:100vw;border-top:1px solid #66666631}.function-panel[data-v-1fefca20]{display:flex;flex-wrap:wrap;background-color:#fff;padding:10px;z-index:1000;max-width:360px;gap:18px;margin:0 auto}.function-item[data-v-1fefca20]{display:flex;flex-direction:column;align-items:center;margin:10px 0;cursor:pointer;width:70px;height:70px;background-color:#f9f9f9;border-radius:10px;justify-content:center;transition:background-color .3s}.function-item[data-v-1fefca20]:hover{background-color:#e6e6e6}.function-item span[data-v-1fefca20]{margin-top:5px;font-size:14px;color:#333;text-align:center}input[data-v-7b4ca731]:focus{outline:none}.tab-content{padding:10px 16px;background:#fff}canvas[data-v-022c82bd]{margin:0 auto}.slide-wrapper[data-v-
|
|
1
|
+
.nav-list{display:flex;flex-wrap:wrap;padding:0 20px;justify-content:space-between}.nav-li{padding:15px;border-radius:6px;width:45%;margin:0 2.5% 20px;background-size:cover;background-position:center;position:relative;z-index:1;cursor:pointer}.nav-li:after{content:"";position:absolute;z-index:-1;background-color:inherit;width:100%;height:100%;left:0;bottom:-10%;border-radius:5px;opacity:.2;transform:scale(.9)}.nav-li.cur{color:#fff;background:#5eb95e;box-shadow:2px 2px 3px #5eb95e66}.nav-title{font-size:16px;font-weight:300}.nav-title:first-letter{font-size:20px;margin-right:2px}.nav-name{font-size:14px;text-transform:Capitalize;margin-top:10px;position:relative}.nav-name:before{content:"";position:absolute;display:block;width:20px;height:3px;background:#fff;bottom:0;right:0;opacity:.5}.nav-name:after{content:"";position:absolute;display:block;width:50px;height:1px;background:#fff;bottom:0;right:20px;opacity:.3}.nav-name:first-letter{font-weight:700;font-size:18px;margin-right:1px}.nav-li text{position:absolute;right:15px;top:15px;font-size:26px;width:30px;height:30px;text-align:center;line-height:30px}.text-light{font-weight:300}@keyframes show{0%{transform:translateY(-50px)}60%{transform:translateY(20px)}to{transform:translateY(0)}}@-webkit-keyframes show{0%{transform:translateY(-50px)}60%{transform:translateY(20px)}to{transform:translateY(0)}}.cu-card-cover[data-v-bbdb83ff]{width:100%}.cu-card .content img[data-v-bbdb83ff]{width:33%;object-fit:cover}.cu-card-cover{width:100%}.cu-card .content img{width:33%;object-fit:cover}.string-list[data-v-c7a21a1c]{width:100%;display:block;list-style:none;background-color:#fff;padding:2px 5px;margin:0;box-shadow:0 4px 8px #0000001a}.string-list li[data-v-c7a21a1c]{line-height:1.5rem;padding:8px 12px;border-bottom:1px solid #eee;transition:background-color .3s,color .3s}.string-list li[data-v-c7a21a1c]:last-child{border-bottom:none}.string-list li[data-v-c7a21a1c]:hover{background-color:#f0f0f0;color:#333;cursor:pointer;border-radius:4px}.emoji-panel[data-v-e9a4aa4d]{background-color:#fff;border:1px solid #ccc;padding:10px;display:flex;flex-wrap:wrap;z-index:1000;height:280px;overflow-y:auto}.emoji-panel span[data-v-e9a4aa4d]{cursor:pointer;font-size:24px;margin:5px}.function-panel-container[data-v-1fefca20]{background-color:#fff;box-sizing:border-box;width:100vw;border-top:1px solid #66666631}.function-panel[data-v-1fefca20]{display:flex;flex-wrap:wrap;background-color:#fff;padding:10px;z-index:1000;max-width:360px;gap:18px;margin:0 auto}.function-item[data-v-1fefca20]{display:flex;flex-direction:column;align-items:center;margin:10px 0;cursor:pointer;width:70px;height:70px;background-color:#f9f9f9;border-radius:10px;justify-content:center;transition:background-color .3s}.function-item[data-v-1fefca20]:hover{background-color:#e6e6e6}.function-item span[data-v-1fefca20]{margin-top:5px;font-size:14px;color:#333;text-align:center}input[data-v-7b4ca731]:focus{outline:none}.tab-content{padding:10px 16px;background:#fff}canvas[data-v-022c82bd]{margin:0 auto}.slide-wrapper[data-v-8600af8d]{overflow:hidden;position:relative;width:100vw;height:100vh}.slide-list[data-v-8600af8d]{position:absolute;width:100%;transition:transform .3s ease}.slide-item[data-v-8600af8d]{position:absolute;width:100%}
|