1 |
|
2 |
|
3 |
|
4 | @import "../../common/variables";
|
5 | @import "../../common/mixins";
|
6 |
|
7 |
|
8 |
|
9 |
|
10 |
|
11 |
|
12 |
|
13 |
|
14 |
|
15 |
|
16 |
|
17 |
|
18 |
|
19 |
|
20 |
|
21 |
|
22 |
|
23 |
|
24 |
|
25 |
|
26 |
|
27 | $tab-color-selected: $pt-link-color !default;
|
28 | $dark-tab-color-selected: $pt-dark-link-color !default;
|
29 |
|
30 | $tab-indicator-width: 3px !default;
|
31 |
|
32 | .#{$ns}-tabs.#{$ns}-vertical {
|
33 | display: flex;
|
34 |
|
35 |
|
36 |
|
37 |
|
38 | > .#{$ns}-tab-list {
|
39 | align-items: flex-start;
|
40 | flex-direction: column;
|
41 |
|
42 | .#{$ns}-tab {
|
43 | border-radius: $pt-border-radius;
|
44 | padding: 0 $pt-grid-size;
|
45 | width: 100%;
|
46 |
|
47 | &[aria-selected="true"] {
|
48 | background-color: rgba($pt-intent-primary, 0.2);
|
49 | box-shadow: none;
|
50 | }
|
51 | }
|
52 |
|
53 | .#{$ns}-tab-indicator-wrapper .#{$ns}-tab-indicator {
|
54 | background-color: rgba($pt-intent-primary, 0.2);
|
55 | border-radius: $pt-border-radius;
|
56 | bottom: 0;
|
57 | height: auto;
|
58 | left: 0;
|
59 | right: 0;
|
60 | top: 0;
|
61 | }
|
62 | }
|
63 |
|
64 |
|
65 |
|
66 |
|
67 | > .#{$ns}-tab-panel {
|
68 | margin-top: 0;
|
69 | padding-left: $pt-grid-size * 2;
|
70 | }
|
71 | }
|
72 |
|
73 | .#{$ns}-tab-list {
|
74 | align-items: flex-end;
|
75 | border: none;
|
76 | display: flex;
|
77 | flex: 0 0 auto;
|
78 | list-style: none;
|
79 | margin: 0;
|
80 | padding: 0;
|
81 | position: relative;
|
82 |
|
83 |
|
84 |
|
85 | > *:not(:last-child) {
|
86 | margin-right: $pt-grid-size * 2;
|
87 | }
|
88 | }
|
89 |
|
90 | .#{$ns}-tab {
|
91 | @include overflow-ellipsis();
|
92 | color: $pt-text-color;
|
93 | cursor: pointer;
|
94 | flex: 0 0 auto;
|
95 | font-size: $pt-font-size;
|
96 | line-height: $pt-button-height;
|
97 | max-width: 100%;
|
98 | position: relative;
|
99 | vertical-align: top;
|
100 |
|
101 |
|
102 | a {
|
103 | color: inherit;
|
104 | display: block;
|
105 | text-decoration: none;
|
106 | }
|
107 |
|
108 | .#{$ns}-tab-indicator-wrapper ~ & {
|
109 |
|
110 |
|
111 |
|
112 | background-color: transparent !important;
|
113 | box-shadow: none !important;
|
114 |
|
115 | }
|
116 |
|
117 | &[aria-disabled="true"] {
|
118 | color: $pt-text-color-disabled;
|
119 | cursor: not-allowed;
|
120 | }
|
121 |
|
122 | &[aria-selected="true"] {
|
123 | border-radius: 0;
|
124 | box-shadow: inset 0 (-$tab-indicator-width) 0 $tab-color-selected;
|
125 | }
|
126 |
|
127 | &[aria-selected="true"],
|
128 | &:not([aria-disabled="true"]):hover {
|
129 | color: $tab-color-selected;
|
130 | }
|
131 |
|
132 | &:focus {
|
133 | -moz-outline-radius: 0;
|
134 | }
|
135 |
|
136 | .#{$ns}-large > & {
|
137 | font-size: $pt-font-size-large;
|
138 | line-height: $pt-button-height-large;
|
139 | }
|
140 | }
|
141 |
|
142 | .#{$ns}-tab-panel {
|
143 | margin-top: $pt-grid-size * 2;
|
144 |
|
145 | &[aria-hidden="true"] {
|
146 | display: none;
|
147 | }
|
148 | }
|
149 |
|
150 | .#{$ns}-tab-indicator-wrapper {
|
151 | left: 0;
|
152 | pointer-events: none;
|
153 | position: absolute;
|
154 | top: 0;
|
155 | transform: translateX(0), translateY(0);
|
156 | transition: height, transform, width;
|
157 | transition-duration: $pt-transition-duration * 2;
|
158 | transition-timing-function: $pt-transition-ease;
|
159 |
|
160 | .#{$ns}-tab-indicator {
|
161 | background-color: $tab-color-selected;
|
162 | bottom: 0;
|
163 | height: $tab-indicator-width;
|
164 | left: 0;
|
165 | position: absolute;
|
166 | right: 0;
|
167 | }
|
168 |
|
169 | &.#{$ns}-no-animation {
|
170 | transition: none;
|
171 | }
|
172 | }
|
173 |
|
174 | .#{$ns}-dark {
|
175 | .#{$ns}-tab {
|
176 | color: $pt-dark-text-color;
|
177 |
|
178 | &[aria-disabled="true"] {
|
179 | color: $pt-dark-text-color-disabled;
|
180 | }
|
181 |
|
182 | &[aria-selected="true"] {
|
183 | box-shadow: inset 0 (-$tab-indicator-width) 0 $dark-tab-color-selected;
|
184 | }
|
185 |
|
186 | &[aria-selected="true"],
|
187 | &:not([aria-disabled="true"]):hover {
|
188 | color: $dark-tab-color-selected;
|
189 | }
|
190 | }
|
191 |
|
192 | .#{$ns}-tab-indicator {
|
193 | background-color: $dark-tab-color-selected;
|
194 | }
|
195 | }
|
196 |
|
197 | .#{$ns}-flex-expander {
|
198 | flex: 1 1;
|
199 | }
|