@nutui/nutui 3.1.3 → 3.1.6

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.
@@ -1,189 +1,182 @@
1
1
  .nutui-tab {
2
- .tab-title-scroll {
3
- width: 100%;
4
- height: 46px;
5
- overflow-x: scroll;
6
- display: flex;
7
- flex-wrap: nowrap;
8
- scroll-behavior: smooth;
9
- background: #f5f5f5;
10
- }
11
- .tab-title {
12
- width: 100%;
13
- height: 46px;
14
- display: flex;
15
- flex-direction: row;
16
- flex-wrap: nowrap;
17
- scroll-behavior: smooth;
18
- background: #f5f5f5;
19
- position: relative;
20
- &::-webkit-scrollbar {
21
- display: none;
22
- }
23
- .underline {
24
- position: absolute;
25
- }
26
- .tab-title-box {
27
- height: 100%;
2
+ .horizontal-tab {
3
+ .tab-title-scroll {
4
+ width: 100%;
5
+ height: 46px;
6
+ overflow-x: scroll;
28
7
  display: flex;
29
- flex: 1;
30
- justify-content: center;
31
- align-items: center;
32
- box-sizing: border-box;
33
- text-align: center;
34
- font-size: 14px;
8
+ flex-wrap: nowrap;
9
+ scroll-behavior: smooth;
10
+ background: #f5f5f5;
35
11
  }
36
- .tab-title-box-scroll {
37
- min-width: 75px;
38
- }
39
- .nut-tab-active {
40
- color: #1a1a1a;
41
- font-weight: bold;
42
- font-size: 16px;
12
+ .tab-title {
13
+ width: 100%;
14
+ height: 46px;
15
+ display: flex;
16
+ flex-direction: row;
17
+ flex-wrap: nowrap;
18
+ scroll-behavior: smooth;
19
+ background: #f5f5f5;
43
20
  position: relative;
44
- &::after {
45
- content: '';
21
+ &::-webkit-scrollbar {
22
+ display: none;
23
+ }
24
+ .underline {
46
25
  position: absolute;
47
- bottom: 5px;
48
- left: 50%;
49
- transform: translateX(-50%);
50
- width: 12px;
51
- height: 4px;
52
- background-image: url('https://img12.360buyimg.com/imagetools/jfs/t1/127200/40/18747/536/5fb36b5aE61cac2d8/638032e8da9b93f4.png');
53
- background-size: 100% 100%;
54
26
  }
55
- }
56
- }
57
- .tab-title-scroll {
58
- overflow-x: scroll;
59
- }
60
- .half {
61
- .nut-tab-active {
62
- color: #1a1a1a;
63
- font-weight: bold;
64
- font-size: 16px;
65
- position: relative;
66
- &::after {
67
- content: '';
68
- display: none;
27
+ .tab-title-box {
28
+ height: 100%;
29
+ display: flex;
30
+ flex: 1;
31
+ justify-content: center;
32
+ align-items: center;
33
+ box-sizing: border-box;
34
+ text-align: center;
35
+ font-size: 14px;
36
+ }
37
+ .tab-title-box-scroll {
38
+ min-width: 75px;
69
39
  }
70
- .world {
40
+ .nut-tab-active {
41
+ color: #1a1a1a;
42
+ font-weight: bold;
43
+ font-size: 16px;
71
44
  position: relative;
72
45
  &::after {
73
46
  content: '';
74
47
  position: absolute;
75
- right: -8px;
76
- bottom: -5px;
77
- width: 11px;
78
- height: 10px;
79
- background-image: url('https://img12.360buyimg.com/imagetools/jfs/t1/197875/38/105/620/60ffcd30E34877e77/54c3dd9fe0a5ab76.png');
48
+ bottom: 5px;
49
+ left: 50%;
50
+ transform: translateX(-50%);
51
+ width: 12px;
52
+ height: 4px;
53
+ background-image: url('https://img12.360buyimg.com/imagetools/jfs/t1/127200/40/18747/536/5fb36b5aE61cac2d8/638032e8da9b93f4.png');
80
54
  background-size: 100% 100%;
81
55
  }
82
56
  }
83
57
  }
84
- }
85
- .tab-swiper {
86
- overflow: hidden;
87
- display: block;
88
- width: 100%;
89
- height: 200px;
90
- background: #fff;
91
- box-sizing: border-box;
92
- }
93
- }
94
- .vertical-tab {
95
- display: flex;
96
- height: 175px;
97
- .tab-title-scroll {
98
- width: 100px;
99
- height: 175px;
100
- display: flex;
101
- flex-wrap: nowrap;
102
- scroll-behavior: smooth;
103
- background: #f5f5f5;
104
- }
105
- .tab-title {
106
- width: 100px;
107
- height: 100%;
108
- display: flex;
109
- flex-direction: column;
110
- &::-webkit-scrollbar {
111
- display: none;
112
- }
113
- .tab-title-box {
114
- width: 100%;
115
- flex: 1;
116
- display: flex;
117
- justify-content: center;
118
- align-items: center;
119
- background-color: #f5f5f5;
120
- }
121
- .tab-title-box-scroll {
122
- min-height: 50px;
58
+ .tab-title-scroll {
59
+ overflow-x: scroll;
123
60
  }
124
- .nut-tab-active {
125
- color: #1a1a1a;
126
- font-weight: bold;
127
- font-size: 16px;
128
- position: relative;
129
- background-color: #fff;
130
- &::after {
131
- content: '';
132
- position: absolute;
133
- right: -4px;
134
- top: 50%;
135
- left: auto;
136
- transform: translateY(-50%) rotate(270deg);
137
- width: 12px;
138
- height: 4px;
139
- background-image: url('https://img12.360buyimg.com/imagetools/jfs/t1/127200/40/18747/536/5fb36b5aE61cac2d8/638032e8da9b93f4.png');
140
- background-size: 100% 100%;
61
+ .half {
62
+ .nut-tab-active {
63
+ color: #1a1a1a;
64
+ font-weight: bold;
65
+ font-size: 16px;
66
+ position: relative;
67
+ &::after {
68
+ content: '';
69
+ display: none;
70
+ }
71
+ .world {
72
+ position: relative;
73
+ &::after {
74
+ content: '';
75
+ position: absolute;
76
+ right: -8px;
77
+ bottom: -5px;
78
+ width: 11px;
79
+ height: 10px;
80
+ background-image: url('https://img12.360buyimg.com/imagetools/jfs/t1/197875/38/105/620/60ffcd30E34877e77/54c3dd9fe0a5ab76.png');
81
+ background-size: 100% 100%;
82
+ }
83
+ }
141
84
  }
142
85
  }
86
+ .tab-swiper {
87
+ overflow: hidden;
88
+ display: block;
89
+ width: 100%;
90
+ height: 200px;
91
+ background: #fff;
92
+ box-sizing: border-box;
93
+ }
143
94
  }
144
- .tab-title-scroll {
145
- overflow-y: scroll;
146
- }
147
- .half {
148
- .nut-tab-active {
149
- color: #1a1a1a;
150
- font-weight: bold;
151
- font-size: 16px;
152
- position: relative;
153
- &::after {
154
- content: '';
95
+ .vertical-tab {
96
+ display: flex;
97
+ height: 175px;
98
+ .tab-title-scroll {
99
+ width: 100px;
100
+ height: 175px;
101
+ display: flex;
102
+ flex-wrap: nowrap;
103
+ scroll-behavior: smooth;
104
+ background: #f5f5f5;
105
+ }
106
+ .tab-title {
107
+ width: 100px;
108
+ height: 100%;
109
+ display: flex;
110
+ flex-direction: column;
111
+ &::-webkit-scrollbar {
155
112
  display: none;
156
113
  }
157
- .world {
114
+ .tab-title-box {
115
+ width: 100%;
116
+ flex: 1;
117
+ display: flex;
118
+ justify-content: center;
119
+ align-items: center;
120
+ background-color: #f5f5f5;
121
+ }
122
+ .tab-title-box-scroll {
123
+ min-height: 50px;
124
+ }
125
+ .nut-tab-active {
126
+ color: #1a1a1a;
127
+ font-weight: bold;
128
+ font-size: 16px;
158
129
  position: relative;
130
+ background-color: #fff;
159
131
  &::after {
160
132
  content: '';
161
133
  position: absolute;
162
- right: -15px;
163
- bottom: -5px;
164
- width: 11px;
165
- height: 10px;
166
- background-image: url('https://img12.360buyimg.com/imagetools/jfs/t1/197875/38/105/620/60ffcd30E34877e77/54c3dd9fe0a5ab76.png');
134
+ right: -4px;
135
+ top: 50%;
136
+ left: auto;
137
+ transform: translateY(-50%) rotate(270deg);
138
+ width: 12px;
139
+ height: 4px;
140
+ background-image: url('https://img12.360buyimg.com/imagetools/jfs/t1/127200/40/18747/536/5fb36b5aE61cac2d8/638032e8da9b93f4.png');
167
141
  background-size: 100% 100%;
168
142
  }
169
143
  }
170
144
  }
145
+ .tab-title-scroll {
146
+ overflow-y: scroll;
147
+ }
148
+ .half {
149
+ .nut-tab-active {
150
+ color: #1a1a1a;
151
+ font-weight: bold;
152
+ font-size: 16px;
153
+ position: relative;
154
+ &::after {
155
+ content: '';
156
+ display: none;
157
+ }
158
+ .world {
159
+ position: relative;
160
+ &::after {
161
+ content: '';
162
+ position: absolute;
163
+ right: -15px;
164
+ bottom: -5px;
165
+ width: 11px;
166
+ height: 10px;
167
+ background-image: url('https://img12.360buyimg.com/imagetools/jfs/t1/197875/38/105/620/60ffcd30E34877e77/54c3dd9fe0a5ab76.png');
168
+ background-size: 100% 100%;
169
+ }
170
+ }
171
+ }
172
+ }
173
+ .tab-swiper {
174
+ overflow: hidden;
175
+ display: block;
176
+ flex: 1;
177
+ height: 100%;
178
+ background: #fff;
179
+ box-sizing: border-box;
180
+ }
171
181
  }
172
- .tab-swiper {
173
- overflow: hidden;
174
- display: block;
175
- flex: 1;
176
- height: 100%;
177
- background: #fff;
178
- box-sizing: border-box;
179
- }
180
- }
181
-
182
- .horize {
183
- display: flex;
184
- flex-direction: row;
185
- flex-wrap: nowrap;
186
- }
187
- .content {
188
- padding: 10px;
189
182
  }