1 |
|
2 |
|
3 |
|
4 |
|
5 |
|
6 |
|
7 |
|
8 | @import '../../globals/scss/functions';
|
9 | @import '../../globals/scss/vars';
|
10 | @import '../../globals/scss/typography';
|
11 | @import 'theme';
|
12 | @import 'functions';
|
13 |
|
14 | @mixin product-switcher {
|
15 |
|
16 |
|
17 |
|
18 | .#{$prefix}--panel--overlay {
|
19 | position: fixed;
|
20 | top: mini-units(6);
|
21 | right: 0;
|
22 | bottom: 0;
|
23 | width: mini-units(32);
|
24 | will-change: transform;
|
25 | transform: translate3d(100%, 0, 0);
|
26 | padding: 1rem 0;
|
27 | overflow-y: auto;
|
28 | z-index: 1000;
|
29 | background-color: $shell-header-bg-02;
|
30 | height: 100%;
|
31 | overflow-x: hidden;
|
32 | transition: transform 0.11s cubic-bezier(0.2, 0, 0.38, 0.9);
|
33 | }
|
34 |
|
35 | .#{$prefix}--panel--expanded {
|
36 | box-shadow: 0 8px 16px 0 rgba($shell-ui-03, 0.25);
|
37 | transform: translate3d(0, 0, 0);
|
38 | }
|
39 |
|
40 |
|
41 |
|
42 |
|
43 | .#{$prefix}--product-switcher__search {
|
44 | padding: 0 mini-units(2);
|
45 | margin-bottom: mini-units(3);
|
46 | }
|
47 |
|
48 | .#{$prefix}--search--shell input {
|
49 | background-color: $shell-header-bg-05;
|
50 | }
|
51 |
|
52 |
|
53 |
|
54 |
|
55 | .#{$prefix}--product-switcher__subheader,
|
56 | .#{$prefix}--product-switcher__all-btn {
|
57 | @include type-style('body-short-01');
|
58 | padding: mini-units(1);
|
59 | color: $shell-header-text-03;
|
60 | }
|
61 |
|
62 | .#{$prefix}--product-switcher__subheader {
|
63 | padding-left: mini-units(7);
|
64 | }
|
65 |
|
66 | .#{$prefix}--product-switcher__all-btn {
|
67 | padding-left: mini-units(7);
|
68 | }
|
69 |
|
70 | .#{$prefix}--product-switcher__all-btn,
|
71 | .#{$prefix}--product-switcher__back-btn {
|
72 | display: inline-block;
|
73 | background: transparent;
|
74 | width: 100%;
|
75 | border: none;
|
76 | color: $shell-header-link;
|
77 | cursor: pointer;
|
78 | text-align: left;
|
79 | }
|
80 |
|
81 | .#{$prefix}--product-switcher__all-btn:hover,
|
82 | .#{$prefix}--product-switcher__back-btn:hover {
|
83 | text-decoration: underline;
|
84 | }
|
85 |
|
86 | .#{$prefix}--product-switcher__all-btn:focus,
|
87 | .#{$prefix}--product-switcher__back-btn:focus {
|
88 | outline: none;
|
89 | box-shadow: inset 0 0 0 3px $shell-header-link;
|
90 | }
|
91 |
|
92 | .#{$prefix}--product-switcher__back-btn {
|
93 | display: flex;
|
94 | align-items: center;
|
95 | @include type-style('body-short-01');
|
96 | padding: mini-units(1) mini-units(2);
|
97 | }
|
98 |
|
99 | .#{$prefix}--product-switcher__back-arrow {
|
100 | fill: $shell-header-link;
|
101 | margin-right: mini-units(2);
|
102 | }
|
103 |
|
104 |
|
105 |
|
106 |
|
107 | .#{$prefix}--product-list__item {
|
108 | cursor: pointer;
|
109 | display: flex;
|
110 | justify-content: space-between;
|
111 | align-items: center;
|
112 | }
|
113 |
|
114 | .#{$prefix}--product-list__item:hover {
|
115 | background: $shell-header-bg-03;
|
116 | }
|
117 |
|
118 | .#{$prefix}--product-link {
|
119 | display: flex;
|
120 | flex-direction: row;
|
121 | align-items: center;
|
122 | width: 100%;
|
123 | padding: mini-units(1) mini-units(2);
|
124 | text-decoration: none;
|
125 | }
|
126 |
|
127 | .#{$prefix}--product-link:focus {
|
128 | outline: none;
|
129 | box-shadow: inset 0 0 0 3px $shell-header-link;
|
130 | }
|
131 |
|
132 | .#{$prefix}--product-switcher__icon {
|
133 | margin-right: mini-units(2);
|
134 | }
|
135 |
|
136 | .#{$prefix}--product-link__name {
|
137 | @include type-style('body-short-01');
|
138 | margin-left: 0.25rem;
|
139 | font-weight: 400;
|
140 | color: $shell-header-text-02;
|
141 | }
|
142 |
|
143 | .#{$prefix}--product-switcher__product-list .#{$prefix}--overflow-menu {
|
144 | display: none;
|
145 | justify-content: center;
|
146 | align-items: center;
|
147 | width: mini-units(5);
|
148 |
|
149 | &.#{$prefix}--overflow-menu--open {
|
150 | display: flex;
|
151 | }
|
152 | }
|
153 |
|
154 | .#{$prefix}--product-switcher__product-list .#{$prefix}--overflow-menu > svg {
|
155 | fill: $shell-header-text-02;
|
156 | }
|
157 |
|
158 | .#{$prefix}--product-switcher__product-list .#{$prefix}--overflow-menu:hover {
|
159 | background: $shell-header-bg-04;
|
160 | }
|
161 |
|
162 | .#{$prefix}--product-switcher__product-list .#{$prefix}--overflow-menu:hover > svg {
|
163 | fill: $shell-header-text-02;
|
164 | }
|
165 |
|
166 | .#{$prefix}--product-switcher__product-list .#{$prefix}--overflow-menu:focus {
|
167 | display: flex;
|
168 | outline: none;
|
169 | box-shadow: inset 0 0 0 3px $shell-header-link;
|
170 | }
|
171 |
|
172 | .#{$prefix}--product-switcher__product-list .#{$prefix}--overflow-menu-options__option:hover {
|
173 | background: $shell-header-bg-03;
|
174 | }
|
175 |
|
176 | .#{$prefix}--product-list__item:hover .#{$prefix}--overflow-menu {
|
177 | display: flex;
|
178 | }
|
179 | }
|
180 |
|
181 | @include exports('product-switcher') {
|
182 | @if feature-flag-enabled('ui-shell') {
|
183 | @include product-switcher;
|
184 | }
|
185 | }
|