@trilogy-ds/styles 4.5.0 → 4.5.1-beta-2
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.
|
@@ -16,13 +16,13 @@ $height-arrow-small:30px;
|
|
|
16
16
|
|
|
17
17
|
|
|
18
18
|
.arrow-prev, .arrow-next {
|
|
19
|
+
z-index: 1;
|
|
20
|
+
height: 44px;
|
|
19
21
|
position: absolute;
|
|
20
|
-
top:
|
|
21
|
-
transition: opacity 0.3s ease;
|
|
22
|
+
top: 0px;
|
|
23
|
+
transition: opacity 0.3s ease;
|
|
22
24
|
opacity: 1;
|
|
23
|
-
|
|
24
|
-
opacity: 0;
|
|
25
|
-
}
|
|
25
|
+
background-color: getColor('background');
|
|
26
26
|
}
|
|
27
27
|
|
|
28
28
|
.arrow-prev {
|
|
@@ -60,6 +60,11 @@ $height-arrow-small:30px;
|
|
|
60
60
|
}
|
|
61
61
|
|
|
62
62
|
}
|
|
63
|
+
|
|
64
|
+
.arrow-prev, .arrow-next {
|
|
65
|
+
background-color: getColor('font');
|
|
66
|
+
}
|
|
67
|
+
|
|
63
68
|
}
|
|
64
69
|
|
|
65
70
|
&:has(.tab-list.is-aligned-start) {
|
|
@@ -77,11 +82,6 @@ $height-arrow-small:30px;
|
|
|
77
82
|
white-space: nowrap;
|
|
78
83
|
overflow-y: hidden;
|
|
79
84
|
max-width: 100%;
|
|
80
|
-
|
|
81
|
-
&.is-arrows{
|
|
82
|
-
margin-left: $spacing-7;
|
|
83
|
-
margin-right: $spacing-7;
|
|
84
|
-
}
|
|
85
85
|
|
|
86
86
|
&::-webkit-scrollbar {
|
|
87
87
|
width: 0 !important;
|
|
@@ -104,16 +104,19 @@ $height-arrow-small:30px;
|
|
|
104
104
|
|
|
105
105
|
@include mobile {
|
|
106
106
|
justify-content: flex-start;
|
|
107
|
-
> .tab:first-child {
|
|
108
|
-
margin-left: 24px;
|
|
109
|
-
}
|
|
110
107
|
}
|
|
111
108
|
|
|
112
109
|
&:has(.tab .icon) {
|
|
113
110
|
height: 64px;
|
|
111
|
+
.arrow-prev, .arrow-next {
|
|
112
|
+
height: 60px;
|
|
113
|
+
}
|
|
114
114
|
}
|
|
115
115
|
|
|
116
116
|
> .tab {
|
|
117
|
+
display: inline-block;
|
|
118
|
+
line-height: normal;
|
|
119
|
+
font-family: $body-family;
|
|
117
120
|
height: calc(100% - 4px);
|
|
118
121
|
background-color: transparent;
|
|
119
122
|
color: getColor('font');
|
|
@@ -128,12 +131,6 @@ $height-arrow-small:30px;
|
|
|
128
131
|
margin-top: 2px;
|
|
129
132
|
}
|
|
130
133
|
|
|
131
|
-
&:not(button) {
|
|
132
|
-
.tab-icon {
|
|
133
|
-
margin-top: 4px;
|
|
134
|
-
}
|
|
135
|
-
}
|
|
136
|
-
|
|
137
134
|
&.is-active {
|
|
138
135
|
color: getColor('main');
|
|
139
136
|
position: relative;
|
|
@@ -176,25 +173,17 @@ $height-arrow-small:30px;
|
|
|
176
173
|
}
|
|
177
174
|
}
|
|
178
175
|
}
|
|
179
|
-
|
|
176
|
+
|
|
180
177
|
|
|
181
178
|
&.is-small{
|
|
182
|
-
|
|
183
|
-
top: calc(($height-tab-default / 2) - calc($height-arrow-small / 2) ) !important;
|
|
184
|
-
}
|
|
185
|
-
|
|
179
|
+
|
|
186
180
|
.tab-list {
|
|
187
181
|
& > .tab {
|
|
188
182
|
font-size: $text-14 ;
|
|
189
183
|
padding: 12px 16px;
|
|
190
184
|
}
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
margin-left: $spacing-6;
|
|
194
|
-
margin-right: $spacing-6;
|
|
195
|
-
}
|
|
196
|
-
}
|
|
197
|
-
}
|
|
185
|
+
}
|
|
186
|
+
}
|
|
198
187
|
|
|
199
188
|
|
|
200
189
|
.tab-panels {
|