139 lines
3.4 KiB
SCSS
139 lines
3.4 KiB
SCSS
/**
|
|
* Copyright since 2025 Mifos Initiative
|
|
*
|
|
* This Source Code Form is subject to the terms of the Mozilla Public
|
|
* License, v. 2.0. If a copy of the MPL was not distributed with this
|
|
* file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
|
*/
|
|
// ===== Base Language Selector Styles =====
|
|
#language-selector {
|
|
&.mat-mdc-form-field {
|
|
// Default styles (fill variant)
|
|
&:not(.outlined-variant) {
|
|
margin-left: 10px;
|
|
|
|
.mat-mdc-text-field-wrapper {
|
|
padding-bottom: 0;
|
|
}
|
|
}
|
|
|
|
// Outlined variant styles (used in login)
|
|
&.outlined-variant {
|
|
.mat-mdc-text-field-wrapper {
|
|
padding: 0;
|
|
}
|
|
|
|
.mat-mdc-form-field-flex {
|
|
align-items: center;
|
|
}
|
|
|
|
.mat-mdc-form-field-infix {
|
|
padding: 12px 0;
|
|
min-height: 48px;
|
|
}
|
|
|
|
// Outlined border styles with Material Design 3
|
|
.mdc-notched-outline {
|
|
.mdc-notched-outline__leading,
|
|
.mdc-notched-outline__notch,
|
|
.mdc-notched-outline__trailing {
|
|
border-color: var(--md-sys-color-outline, #79747e);
|
|
border-width: 1px;
|
|
}
|
|
}
|
|
|
|
// Hover state
|
|
&:hover:not(.mat-form-field-disabled) {
|
|
.mdc-notched-outline {
|
|
.mdc-notched-outline__leading,
|
|
.mdc-notched-outline__notch,
|
|
.mdc-notched-outline__trailing {
|
|
border-color: var(--md-sys-color-on-surface, #1a1c1e);
|
|
}
|
|
}
|
|
}
|
|
|
|
// Focused state
|
|
&.mat-focused {
|
|
.mdc-notched-outline {
|
|
.mdc-notched-outline__leading,
|
|
.mdc-notched-outline__notch,
|
|
.mdc-notched-outline__trailing {
|
|
border-color: var(--md-sys-color-primary, #1074b9);
|
|
border-width: 2px;
|
|
}
|
|
}
|
|
|
|
.mat-mdc-floating-label {
|
|
color: var(--md-sys-color-primary, #1074b9);
|
|
}
|
|
}
|
|
|
|
// Select styling
|
|
.mat-mdc-select {
|
|
font-size: 0.875rem;
|
|
color: var(--md-sys-color-on-surface, #1a1c1e);
|
|
}
|
|
|
|
.mat-mdc-select-arrow {
|
|
color: var(--md-sys-color-on-surface-variant, #44474e);
|
|
}
|
|
|
|
// Label styling
|
|
.mat-mdc-floating-label {
|
|
font-size: 0.875rem;
|
|
color: var(--md-sys-color-on-surface-variant, #44474e);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// Dark theme support for outlined variant
|
|
.dark-theme {
|
|
#language-selector.outlined-variant {
|
|
.mdc-notched-outline {
|
|
.mdc-notched-outline__leading,
|
|
.mdc-notched-outline__notch,
|
|
.mdc-notched-outline__trailing {
|
|
border-color: var(--md-sys-color-outline, #938f99);
|
|
}
|
|
}
|
|
|
|
&:hover:not(.mat-form-field-disabled) {
|
|
.mdc-notched-outline {
|
|
.mdc-notched-outline__leading,
|
|
.mdc-notched-outline__notch,
|
|
.mdc-notched-outline__trailing {
|
|
border-color: var(--md-sys-color-on-surface, #e2e2e5);
|
|
}
|
|
}
|
|
}
|
|
|
|
&.mat-focused {
|
|
.mdc-notched-outline {
|
|
.mdc-notched-outline__leading,
|
|
.mdc-notched-outline__notch,
|
|
.mdc-notched-outline__trailing {
|
|
border-color: var(--md-sys-color-primary, #5ba2ec);
|
|
}
|
|
}
|
|
|
|
.mat-mdc-floating-label {
|
|
color: var(--md-sys-color-primary, #5ba2ec);
|
|
}
|
|
}
|
|
|
|
.mat-mdc-select {
|
|
color: var(--md-sys-color-on-surface, #e2e2e5);
|
|
}
|
|
|
|
.mat-mdc-select-arrow {
|
|
color: var(--md-sys-color-on-surface-variant, #c4c6d0);
|
|
}
|
|
|
|
.mat-mdc-floating-label {
|
|
color: var(--md-sys-color-on-surface-variant, #c4c6d0);
|
|
}
|
|
}
|
|
}
|