118 lines
2.4 KiB
SCSS
Executable File
118 lines
2.4 KiB
SCSS
Executable File
@use "../variables" as *;
|
|
|
|
html .customizerNav {
|
|
border-radius: 0px !important;
|
|
width: 100%;
|
|
}
|
|
|
|
.customizer-button-group {
|
|
&.two-row {
|
|
display: inline-block;
|
|
|
|
&.theme-colors {
|
|
.mat-button-toggle-appearance-standard {
|
|
margin-left: 16px;
|
|
|
|
&:first-child {
|
|
margin-left: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
.mat-button-toggle-appearance-standard {
|
|
width: 80px;
|
|
height: 65px;
|
|
float: left;
|
|
display: flex;
|
|
align-items: center;
|
|
margin-bottom: 16px;
|
|
|
|
.mat-button-toggle-button {
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
|
|
&:nth-child(4) {
|
|
margin-left: 0;
|
|
}
|
|
|
|
&.mat-button-toggle-checked {
|
|
.theme-circle {
|
|
.theme-icon {
|
|
display: flex;
|
|
color: $white;
|
|
}
|
|
}
|
|
}
|
|
|
|
.theme-circle {
|
|
width: 25px;
|
|
height: 25px;
|
|
border-radius: var(--mat-sys-corner-full);
|
|
color: $white;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
.theme-icon {
|
|
display: none;
|
|
}
|
|
|
|
&.orange_theme {
|
|
background-color: rgb(250, 137, 107);
|
|
}
|
|
|
|
&.blue_theme {
|
|
background-color: rgb(93, 135, 255);
|
|
}
|
|
|
|
&.aqua_theme {
|
|
background-color: rgb(0, 116, 186);
|
|
}
|
|
|
|
&.purple_theme {
|
|
background-color: rgb(118, 62, 189);
|
|
}
|
|
|
|
&.green_theme {
|
|
background-color: rgb(10, 126, 164);
|
|
}
|
|
|
|
&.cyan_theme {
|
|
background-color: rgb(1, 192, 200);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.mat-button-toggle-appearance-standard {
|
|
padding: 9px;
|
|
border: 1px solid var(--mat-sys-outline-variant) !important;
|
|
box-shadow: none;
|
|
border-radius: $border-radius;
|
|
transition: all 0.1s ease-in 0s;
|
|
|
|
&:hover {
|
|
transform: scale(1.05);
|
|
}
|
|
|
|
&.mat-button-toggle-checked {
|
|
background-color: var(--mat-sys-primary-fixed-dim);
|
|
|
|
i-tabler.fill-icon {
|
|
color: var(--mat-sys-primary);
|
|
fill: var(--mat-sys-on-primary);
|
|
}
|
|
}
|
|
}
|
|
|
|
&.mat-button-toggle-group {
|
|
overflow: unset;
|
|
border-radius: 0;
|
|
}
|
|
|
|
.mat-button-toggle-standalone.mat-button-toggle-appearance-standard,
|
|
&.mat-button-toggle-group-appearance-standard {
|
|
border: 0 !important;
|
|
}
|
|
} |