@trilogy-ds/styles 4.4.0 → 4.4.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.
|
@@ -1,3 +1,7 @@
|
|
|
1
|
+
$height-tab-default: 64px;
|
|
2
|
+
$height-arrow-default:48px;
|
|
3
|
+
$height-arrow-small:30px;
|
|
4
|
+
|
|
1
5
|
.tabs {
|
|
2
6
|
@include overflow-touch;
|
|
3
7
|
@include unselectable;
|
|
@@ -7,11 +11,28 @@
|
|
|
7
11
|
font-weight: $weight-normal;
|
|
8
12
|
width: 100%;
|
|
9
13
|
text-align: center;
|
|
10
|
-
overflow:
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
14
|
+
overflow: hidden;
|
|
15
|
+
position: relative;
|
|
16
|
+
|
|
17
|
+
|
|
18
|
+
.arrow-prev, .arrow-next {
|
|
19
|
+
position: absolute;
|
|
20
|
+
top: calc(($height-tab-default / 2) - calc($height-arrow-default / 2) ) !important ;
|
|
21
|
+
transition: opacity 0.3s ease;
|
|
22
|
+
opacity: 1;
|
|
23
|
+
&.hidden {
|
|
24
|
+
opacity: 0;
|
|
25
|
+
}
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
.arrow-prev {
|
|
29
|
+
left: 0px;
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
.arrow-next {
|
|
33
|
+
right: 0px;
|
|
34
|
+
}
|
|
35
|
+
|
|
15
36
|
|
|
16
37
|
&::-webkit-scrollbar {
|
|
17
38
|
width: 0 !important;
|
|
@@ -50,18 +71,23 @@
|
|
|
50
71
|
}
|
|
51
72
|
|
|
52
73
|
.tab-list {
|
|
53
|
-
&::-webkit-scrollbar {
|
|
54
|
-
width: 0 !important;
|
|
55
|
-
height: 0 !important;
|
|
56
|
-
scrollbar-width: none !important;
|
|
57
|
-
}
|
|
58
|
-
|
|
59
74
|
background-color: transparent;
|
|
60
75
|
height: 48px;
|
|
61
76
|
overflow-x: auto;
|
|
62
77
|
white-space: nowrap;
|
|
63
|
-
display: inline-flex;
|
|
64
78
|
overflow-y: hidden;
|
|
79
|
+
max-width: 100%;
|
|
80
|
+
|
|
81
|
+
&.is-arrows{
|
|
82
|
+
margin-left: $spacing-7;
|
|
83
|
+
margin-right: $spacing-7;
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
&::-webkit-scrollbar {
|
|
87
|
+
width: 0 !important;
|
|
88
|
+
height: 0 !important;
|
|
89
|
+
scrollbar-width: none !important;
|
|
90
|
+
}
|
|
65
91
|
|
|
66
92
|
&.is-fullwidth {
|
|
67
93
|
@include desktop {
|
|
@@ -93,13 +119,10 @@
|
|
|
93
119
|
color: getColor('font');
|
|
94
120
|
text-decoration: none;
|
|
95
121
|
outline: none;
|
|
96
|
-
padding:
|
|
97
|
-
font-size: $text-
|
|
98
|
-
@include desktop {
|
|
99
|
-
font-size: $text-16;
|
|
100
|
-
}
|
|
122
|
+
padding: 12px 24px;
|
|
123
|
+
font-size: $text-16;
|
|
101
124
|
border: 0px solid transparent;
|
|
102
|
-
border-bottom:
|
|
125
|
+
border-bottom: 1px solid getColor('neutral');
|
|
103
126
|
|
|
104
127
|
.tab-icon {
|
|
105
128
|
margin-top: 2px;
|
|
@@ -111,21 +134,19 @@
|
|
|
111
134
|
}
|
|
112
135
|
}
|
|
113
136
|
|
|
114
|
-
@include mobile {
|
|
115
|
-
font-size: $text-14;
|
|
116
|
-
}
|
|
117
|
-
|
|
118
137
|
&.is-active {
|
|
119
138
|
color: getColor('main');
|
|
120
139
|
position: relative;
|
|
121
140
|
border-bottom-color: getColor('main');
|
|
122
|
-
font-weight: $weight-
|
|
141
|
+
font-weight: $weight-bold;
|
|
142
|
+
border-bottom-width: 2px;
|
|
123
143
|
}
|
|
124
144
|
|
|
125
|
-
&:hover:not(
|
|
145
|
+
&:hover:not([disabled]) {
|
|
126
146
|
color: getColor('main');
|
|
127
147
|
border-bottom-color: currentColor;
|
|
128
148
|
cursor: pointer;
|
|
149
|
+
border-bottom-width: 2px;
|
|
129
150
|
|
|
130
151
|
.icon.is-small [class^=tri-]::before, .icon.is-small [class*=" tri-"]::before {
|
|
131
152
|
font-size: 22px !important;
|
|
@@ -148,14 +169,33 @@
|
|
|
148
169
|
|
|
149
170
|
&[disabled], &[aria-disabled=true] {
|
|
150
171
|
background-color: transparent !important;
|
|
151
|
-
border-bottom-color:
|
|
172
|
+
border-bottom-color: getColor('neutral') !important;
|
|
152
173
|
&.is-active{
|
|
153
174
|
border-bottom-color: currentColor !important;
|
|
154
175
|
}
|
|
155
176
|
}
|
|
156
|
-
|
|
157
177
|
}
|
|
158
178
|
}
|
|
179
|
+
|
|
180
|
+
|
|
181
|
+
&.is-small{
|
|
182
|
+
.arrow-prev, .arrow-next {
|
|
183
|
+
top: calc(($height-tab-default / 2) - calc($height-arrow-small / 2) ) !important;
|
|
184
|
+
}
|
|
185
|
+
|
|
186
|
+
.tab-list {
|
|
187
|
+
& > .tab {
|
|
188
|
+
font-size: $text-14 ;
|
|
189
|
+
padding: 12px 16px;
|
|
190
|
+
}
|
|
191
|
+
|
|
192
|
+
&.is-arrows{
|
|
193
|
+
margin-left: $spacing-6;
|
|
194
|
+
margin-right: $spacing-6;
|
|
195
|
+
}
|
|
196
|
+
}
|
|
197
|
+
}
|
|
198
|
+
|
|
159
199
|
|
|
160
200
|
.tab-panels {
|
|
161
201
|
padding-top: $spacing-3;
|