tianheng-ui 0.1.72 → 0.1.74

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.
@@ -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;