lh-ui-next 0.2.0-beta.9 → 0.2.1-beta.1

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/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "lh-ui-next",
3
3
  "description": "a friendly ui for vue3",
4
- "version": "0.2.0-beta.9",
4
+ "version": "0.2.1-beta.1",
5
5
  "author": "Tinylj(lujin.pt@163.com)",
6
6
  "license": "MIT",
7
7
  "private": false,
@@ -0,0 +1,173 @@
1
+ .lh-input{
2
+ .lh-input-cornInput{
3
+ background: #1D2021;
4
+ }
5
+ }
6
+ .lh-popover-content{
7
+ background: #131414;
8
+ }
9
+ .lh-select-ul{
10
+ background: #131414;
11
+ ul{
12
+ li{
13
+ background: #131414;
14
+ }
15
+ }
16
+ }
17
+ .lh-select{
18
+ .lh-select-text{
19
+ background: #1D2021;
20
+ }
21
+ }
22
+ .lh-fuzzy-select-content{
23
+ ul{
24
+ background-color: #1D2021;
25
+ }
26
+ }
27
+ .lh-fuzzy-select-span{
28
+ background-color: #131414;
29
+ }
30
+ .lh-loading-mask{
31
+ background-color: @color_b4;
32
+ }
33
+ .lh-date{
34
+ background-color: #131414;
35
+ .lh-date-header{
36
+ .lh-date-header-label{
37
+ color: @color_b1;
38
+ &:hover{
39
+ color: @color_theme6;
40
+ }
41
+ }
42
+ }
43
+ .lh-date-content{
44
+ .lh-date-table{
45
+ background-color: #131414;
46
+ td{
47
+ &:hover{
48
+ span{
49
+ background-color: inherit;
50
+ border: 1px solid @color_theme6;
51
+ color: @color_theme6;
52
+ }
53
+ }
54
+ &.active{
55
+ span{
56
+ background-color: @color_theme6;
57
+ color: white;
58
+ box-shadow: 0 0 20px rgba(6, 105, 255, 0.4);
59
+ }
60
+ }
61
+ .cell{
62
+ color: @color_b2;
63
+ }
64
+ }
65
+ }
66
+ .lh-year-table{
67
+ background-color: #131414;
68
+ td{
69
+ &:hover{
70
+ span{
71
+ background-color: inherit;
72
+ border: 1px solid @color_theme6;
73
+ color: @color_theme6;
74
+ }
75
+ }
76
+ &.active{
77
+ span{
78
+ background-color: @color_theme6;
79
+ color: white;
80
+ box-shadow: 0 0 20px rgba(6, 105, 255, 0.4);
81
+ }
82
+ }
83
+ .cell{
84
+ color: @color_b2;
85
+ }
86
+ }
87
+ }
88
+ .lh-month-table{
89
+ background-color: #131414;
90
+ td{
91
+ &:hover{
92
+ span{
93
+ background-color: inherit;
94
+ border: 1px solid @color_theme6;
95
+ color: @color_theme6;
96
+ }
97
+ }
98
+ &.active{
99
+ span{
100
+ background-color: @color_theme6;
101
+ color: white;
102
+ box-shadow: 0 0 20px rgba(6, 105, 255, 0.4);
103
+ }
104
+ }
105
+ div{
106
+ .cell{
107
+ color: @color_b2;
108
+ }
109
+ }
110
+ }
111
+ }
112
+ }
113
+ }
114
+ .lh-checkbox{
115
+ .lh-checkbox-outbox{
116
+ .lh-checkbox-innerbox{
117
+ &.indeterminate{
118
+ background-color: #131414;
119
+ }
120
+ background-color: #131414;
121
+ }
122
+ }
123
+ }
124
+ .lh-tree{
125
+ .lh-tree-node{
126
+ .node-base{
127
+ .node-base-icon-wapper{
128
+ .icon_component_arrow{
129
+ color: @color_b1;
130
+ }
131
+ }
132
+ }
133
+ }
134
+ }
135
+ .lh-button-minor{
136
+ background-color: #131414;
137
+ }
138
+ .lh-pagination{
139
+ .lh-pagination__item--active{
140
+ background-color: inherit;
141
+ }
142
+ .lh-pagination__quickjump{
143
+ input{
144
+ background-color: inherit;
145
+ }
146
+ }
147
+ .lh-select-text{
148
+ .dropdown-icon{
149
+ color: @color_b1;
150
+ }
151
+ }
152
+ }
153
+ .lh-dialog{
154
+ background-color: #131414;
155
+ .lh-dialog-body{
156
+ color: @color_b1;
157
+ }
158
+ }
159
+ .lh-mb{
160
+ background-color: #131414;
161
+ .lh-mb-footer{
162
+ background-color: #131414;
163
+ }
164
+ }
165
+ .lh-message{
166
+ background-color: #1F1F1F;
167
+ }
168
+ .lh-popover-content{
169
+ color: @color_b1;
170
+ }
171
+ .lh-tree-special{
172
+ background-color: #131414;
173
+ }
@@ -1,4 +1,5 @@
1
1
  //通用颜色
2
+ @color_b0:black;//一级文字:主要的、基本的色值
2
3
  @color_b1:rgba(0,0,0,0.85);//一级文字:主要的、基本的色值
3
4
  @color_b2:rgba(0,0,0,0.65);//二级文字:次要的文字色值
4
5
  @color_b3:rgba(0,0,0,0.45);//三级文字:次要的文字色值
@@ -19,4 +20,4 @@
19
20
 
20
21
  .no-meaning {
21
22
 
22
- }
23
+ }
@@ -51,7 +51,7 @@
51
51
  left: 0;
52
52
  overflow: auto;
53
53
  margin: 0;
54
- background:@color_b4;
54
+ background:@color_b3;
55
55
  z-index:3001;
56
56
  }
57
57
 
@@ -1,19 +1,19 @@
1
1
  .lh-slider{
2
2
  .lh-slider-runway {
3
3
  width: 100%;
4
- height: 6px;
4
+ height: 4px;
5
5
  margin: 16px 0;
6
- background-color: #e4e7ed;
6
+ background-color: @color_b6;
7
7
  border-radius: 3px;
8
8
  position: relative;
9
9
  cursor: pointer;
10
10
  vertical-align: middle;
11
11
  }
12
12
  .lh-slider-bar {
13
- height: 6px;
13
+ height: 4px;
14
14
  //width: 0;
15
15
  left: 0;
16
- background-color: #409eff;
16
+ background-color: @color_theme6;
17
17
  border-top-left-radius: 3px;
18
18
  border-bottom-left-radius: 3px;
19
19
  position: absolute;
@@ -28,6 +28,24 @@
28
28
  transform: translateX(-50%);
29
29
  background-color: transparent;
30
30
  text-align: center;
31
+ &-wrapper {
32
+ display: inline-block;
33
+ width: 12px;
34
+ height: 12px;
35
+ border: 2px solid @color_theme6;
36
+ background-color: #fff;
37
+ border-radius: 50%;
38
+ transition: .2s;
39
+ user-select: none;
40
+ margin-top: 33.3%;
41
+ &:hover {
42
+ cursor: grab;
43
+ cursor: -moz-grab;
44
+ cursor: -webkit-grab;
45
+ transform: scale(1.2);
46
+ }
47
+ }
48
+
31
49
  &:hover {
32
50
  height: 58px;
33
51
  top: -38px;
@@ -56,23 +74,7 @@
56
74
  display: inline-block;
57
75
  }
58
76
  }
59
- &-wrapper {
60
- display: inline-block;
61
- width: 20px;
62
- height: 20px;
63
- border: 2px solid #409eff;
64
- background-color: #fff;
65
- border-radius: 50%;
66
- transition: .2s;
67
- user-select: none;
68
- margin-top: 25%;
69
- &:hover {
70
- cursor: grab;
71
- cursor: -moz-grab;
72
- cursor: -webkit-grab;
73
- transform: scale(1.2);
74
- }
75
- }
77
+
76
78
  }
77
79
  //关闭提示框
78
80
  .lh-slider-untooltip {
@@ -90,7 +92,7 @@
90
92
  //提示框
91
93
  .lh-slider-tooltip {
92
94
  display: none;
93
- background-color: #3b3b3b;
95
+ background-color:@color_b1;
94
96
  color: #fff;
95
97
  padding: 3px 5px;
96
98
  border-radius: 3px;
@@ -99,7 +101,7 @@
99
101
  width: 0;
100
102
  height: 0;
101
103
  border: 5px solid;
102
- border-color: #000 transparent transparent transparent;
104
+ border-color: @color_b0 transparent transparent transparent;
103
105
  position: absolute;
104
106
  left: calc(~"50% - 5px");
105
107
  left: -moz-calc(~"50% - 5px");
@@ -111,7 +113,7 @@
111
113
  .lh-slider-disabled {
112
114
  cursor: not-allowed;
113
115
  .lh-slider-bar {
114
- background-color: #c0c4cc;
116
+ background-color: @color_b4;
115
117
  }
116
118
  .lh-slider-button {
117
119
  &:hover {
@@ -132,7 +134,7 @@
132
134
  }
133
135
  }
134
136
  .lh-slider-button-wrapper {
135
- border-color: #c0c4cc;
137
+ border-color: @color_b4;
136
138
  &:hover {
137
139
  cursor: not-allowed;
138
140
  transform: none;
@@ -157,7 +159,7 @@
157
159
  position: absolute;
158
160
  top: 15px;
159
161
  transform: translateX(-50%);
160
- color: #909399;
162
+ color: @color_b3;
161
163
  }
162
164
  }
163
165
  &.is-vertical {