tianheng-ui 0.1.73 → 0.1.75

Sign up to get free protection for your applications and to get access to all the features.
@@ -20,10 +20,10 @@
20
20
  }
21
21
 
22
22
  .always-shadow {
23
- box-shadow: $box-shadow;
23
+ box-shadow: $box-shadow-light;
24
24
  }
25
25
  .hover-shadow:hover {
26
- box-shadow: $box-shadow;
26
+ box-shadow: $box-shadow-light;
27
27
  }
28
28
  .never-shadow {
29
29
  }
@@ -1,59 +1,99 @@
1
- .th-is_border {
1
+ /*
2
+ 边框
3
+ */
4
+ .th-border {
2
5
  border: 1px solid $border-color-base;
3
6
  }
4
- .th-is_border_top {
7
+ .th-border_top {
5
8
  border-top: 1px solid $border-color-base;
6
9
  }
7
- .th-is_border_bottom {
10
+ .th-border_bottom {
8
11
  border-bottom: 1px solid $border-color-base;
9
12
  }
10
- .th-is_border_left {
13
+ .th-border_left {
11
14
  border-left: 1px solid $border-color-base;
12
15
  }
13
- .th-is_border_right {
16
+ .th-border_right {
14
17
  border-right: 1px solid $border-color-base;
15
18
  }
16
19
 
17
- .th-is_active {
18
- background-color: $background-color-active;
20
+ /*
21
+ 阴影
22
+ */
23
+ .th-boxShadow_base {
24
+ box-shadow: $box-shadow-base;
25
+ }
26
+ .th-boxShadow_light {
27
+ box-shadow: $box-shadow-light;
19
28
  }
20
29
 
21
- .th-is_hover:hover {
22
- background-color: $background-color-hover;
30
+ /*
31
+ 选中
32
+ */
33
+ .th-active {
34
+ background-color: $background-color-active;
23
35
  }
24
36
 
25
- .th-is_alignItems_center {
26
- align-items: center;
37
+ /*
38
+ 激活
39
+ */
40
+ .th-hover:hover {
41
+ background-color: $background-color-hover;
27
42
  }
28
43
 
29
- .th-is_disabled {
30
- color: #c0c4cc;
31
- cursor: not-allowed;
44
+ /*
45
+ 禁用
46
+ */
47
+ .th-disabled {
48
+ color: $color-info-disabled;
32
49
  background-image: none;
33
- background-color: #fff;
34
- border-color: #ebeef5;
50
+ background-color: $background-color-white;
51
+ border-color: $border-color-lighter;
52
+ cursor: not-allowed;
35
53
  }
36
54
 
37
- .th-is_loading {
55
+ /*
56
+ 加载中
57
+ */
58
+ .th-loading {
38
59
  position: relative;
39
60
  pointer-events: none;
40
61
  }
41
62
 
42
- .th-is_plain {
63
+ /*
64
+ 垂直居中
65
+ */
66
+ .th-alignItems_center {
67
+ align-items: center;
68
+ }
69
+
70
+ /*
71
+ 朴素
72
+ */
73
+ .th-plain {
43
74
  background: $background-color-white;
44
75
  border-color: $color-parimary;
45
76
  color: $color-parimary;
46
77
  }
47
78
 
48
- .th-is_round {
79
+ /*
80
+ 圆角
81
+ */
82
+ .th-round {
49
83
  border-radius: $border-radius-xl;
50
84
  overflow: hidden;
51
85
  }
52
86
 
53
- .th-is_circle {
87
+ /*
88
+ 圆形
89
+ */
90
+ .th-circle {
54
91
  border-radius: 50%;
55
92
  }
56
93
 
94
+ /*
95
+ flex布局
96
+ */
57
97
  .th-flex_box {
58
98
  display: flex;
59
99
  height: 100%;
@@ -69,6 +109,9 @@
69
109
  overflow-y: overlay;
70
110
  }
71
111
 
112
+ /*
113
+ 吸顶
114
+ */
72
115
  .th-sticky_top {
73
116
  position: sticky;
74
117
  top: 0;
@@ -76,13 +119,19 @@
76
119
  border-bottom: solid 1px #e4e7ed;
77
120
  }
78
121
 
122
+ /*
123
+ 动画按钮激活后旋转180度效果
124
+ */
79
125
  .th-animation_button__hover:hover {
80
126
  background-color: $background-color-active;
81
127
  border-radius: 50%;
82
- box-shadow: $box-shadow;
128
+ box-shadow: $box-shadow-light;
83
129
  transform: rotate(180deg);
84
130
  }
85
131
 
132
+ /*
133
+ 无数据项隐藏
134
+ */
86
135
  [v-cloak] {
87
136
  display: none;
88
137
  }
@@ -41,10 +41,10 @@
41
41
  }
42
42
 
43
43
  .always-shadow {
44
- box-shadow: $box-shadow;
44
+ box-shadow: $box-shadow-light;
45
45
  }
46
46
  .hover-shadow:hover {
47
- box-shadow: $box-shadow;
47
+ box-shadow: $box-shadow-light;
48
48
  }
49
49
  .never-shadow {
50
50
  }
@@ -76,7 +76,8 @@ $background-color-active: #ebf9ff;
76
76
  $background-color-hover: #ebf9ff;
77
77
 
78
78
  // 阴影效果
79
- $box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
79
+ $box-shadow-base: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
80
+ $box-shadow-light: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
80
81
 
81
82
  // 过场时长
82
83
  $transition: 0.3s;