122 lines
2.3 KiB
SCSS
122 lines
2.3 KiB
SCSS
.language-select {
|
|
@apply relative flex flex-wrap gap-4 cursor--pointer;
|
|
@apply bg-transparent;
|
|
background-image: url("../../../img/shapes-background/language-selector-background.svg");
|
|
background-size: 100% 100%;
|
|
background-repeat: no-repeat;
|
|
box-sizing: border-box;
|
|
|
|
&__toggle,
|
|
&__country-list {
|
|
@apply border-none w-full;
|
|
}
|
|
|
|
&__label {
|
|
@apply bg-construction font-bold text-4xl py-3 px-6 block text-zuume;
|
|
line-height: 1;
|
|
}
|
|
|
|
&__toggle {
|
|
@apply flex
|
|
bg-transparent
|
|
text-neutral-800
|
|
capitalize
|
|
text-sm
|
|
md:text-base
|
|
py-2
|
|
md:py-3
|
|
px-5
|
|
|
|
my-0
|
|
w-fit
|
|
w-full
|
|
cursor--pointer
|
|
justify-end
|
|
items-center;
|
|
transform: skew(-2deg);
|
|
|
|
width: 100%;
|
|
|
|
.flag {
|
|
@apply bg-slate-200 rounded-full w-6 h-6 md:w-8 md:h-8 flex justify-center items-center border-2 border-solid border-black overflow-hidden;
|
|
|
|
img {
|
|
@apply w-full h-full object-cover;
|
|
}
|
|
}
|
|
|
|
.language {
|
|
@apply font-bold ml-1 text-2xl text-zuume text-black mr-4;
|
|
}
|
|
|
|
&:after {
|
|
@apply block w-4 h-4 right-5
|
|
bg-center bg-no-repeat bg-contain ml-auto;
|
|
// absolute
|
|
content: "";
|
|
background-image: url("../../../img/ui-elements/select_deploy_icon.svg");
|
|
}
|
|
&:hover {
|
|
&:after {
|
|
transition: all 0.3s ease-in-out;
|
|
filter: invert(27%) sepia(40%) saturate(1344%) hue-rotate(156deg) brightness(97%)
|
|
contrast(102%);
|
|
}
|
|
}
|
|
}
|
|
|
|
&__country-list {
|
|
@apply cursor--pointer;
|
|
&[aria-hidden="true"] {
|
|
@apply hidden;
|
|
}
|
|
|
|
@apply my-0
|
|
bg-white
|
|
py-2
|
|
|
|
absolute
|
|
top-0
|
|
z-30
|
|
list-none
|
|
pl-0
|
|
overflow-y-auto w-full;
|
|
max-height: 286px;
|
|
box-sizing: border-box;
|
|
overflow-y: scroll;
|
|
top: 100%;
|
|
transform: translate(0, -10px);
|
|
}
|
|
|
|
li {
|
|
@apply flex items-center text-neutral-800 pl-8 py-2 cursor--pointer;
|
|
span {
|
|
@apply font-bold text-slate-800;
|
|
}
|
|
|
|
.flag {
|
|
@apply pr-4 w-6 h-auto;
|
|
}
|
|
&:hover {
|
|
@apply bg-slate-200;
|
|
}
|
|
}
|
|
}
|
|
|
|
.language-select:has(.language-select__country-list[aria-hidden="false"]) {
|
|
.language-select__toggle::after {
|
|
transform: rotate(180deg);
|
|
}
|
|
}
|
|
|
|
.page-container--welcome {
|
|
.language-select {
|
|
isolation: isolate;
|
|
&__country-list {
|
|
top: 0;
|
|
transform: translate(0, calc(-100% + 10px));
|
|
z-index: -2;
|
|
}
|
|
}
|
|
}
|