56 lines
1 KiB
SCSS
56 lines
1 KiB
SCSS
.language-selector {
|
|
display: inline-block;
|
|
margin: 10px;
|
|
|
|
&__button {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 8px 12px;
|
|
background-color: #f0f0f0;
|
|
border: 1px solid #ccc;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
transition: all 0.2s ease;
|
|
|
|
&:hover {
|
|
background-color: #e0e0e0;
|
|
}
|
|
|
|
&:active {
|
|
transform: translateY(1px);
|
|
}
|
|
}
|
|
|
|
&__current-lang {
|
|
margin-right: 8px;
|
|
text-transform: capitalize;
|
|
}
|
|
|
|
&__icon {
|
|
font-size: 1.2em;
|
|
}
|
|
}
|
|
|
|
// Language-specific styles that will be applied when the body has the corresponding class
|
|
:host-context(body.app-theme-light) {
|
|
.language-selector__button {
|
|
background-color: #f8f8f8;
|
|
color: #333;
|
|
}
|
|
}
|
|
|
|
:host-context(body.app-theme-dark) {
|
|
.language-selector__button {
|
|
background-color: #333;
|
|
color: #f8f8f8;
|
|
border-color: #555;
|
|
}
|
|
}
|
|
|
|
:host-context(body.app-theme-funky) {
|
|
.language-selector__button {
|
|
background-color: #ff00ff;
|
|
color: #00ffff;
|
|
border-color: #ffff00;
|
|
}
|
|
}
|