Marmelator/common-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

RED-5875: Material upgrade - slide toggle

Browse Source
This commit is contained in:
Adina Țeudan 2023-05-30 16:01:29 +03:00
parent b50019b01c
commit b50bd54227
1 changed files with 48 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

80
src/assets/styles/common-toggle.scss
View File

@ -1,41 +1,57 @@
.mat-slide-toggle {
.mat-slide-toggle-bar {
height: 16px !important;
width: 30px !important;
border-radius: 16px !important;
background-color: var(--iqser-toggle-bg);
.mat-mdc-slide-toggle {
--mdc-switch-handle-elevation: none;
--mdc-switch-selected-track-color: var(--iqser-primary);
--mdc-switch-selected-hover-track-color: var(--iqser-primary);
--mdc-switch-selected-pressed-track-color: var(--iqser-primary);
--mdc-switch-selected-focus-track-color: var(--iqser-primary);
--mdc-switch-disabled-selected-track-color: var(--iqser-primary);
--mdc-switch-unselected-track-color: var(--iqser-toggle-bg);
--mdc-switch-unselected-hover-track-color: var(--iqser-toggle-bg);
--mdc-switch-unselected-pressed-track-color: var(--iqser-toggle-bg);
--mdc-switch-unselected-focus-track-color: var(--iqser-toggle-bg);
--mdc-switch-disabled-unselected-track-color: var(--iqser-toggle-bg);
--mdc-switch-selected-handle-color: var(--iqser-background);
--mdc-switch-selected-pressed-handle-color: var(--iqser-background);
--mdc-switch-selected-hover-handle-color: var(--iqser-background);
--mdc-switch-selected-focus-handle-color: var(--iqser-background);
--mdc-switch-disabled-selected-handle-color: var(--iqser-background);
--mdc-switch-unselected-handle-color: var(--iqser-alt-background);
--mdc-switch-unselected-pressed-handle-color: var(--iqser-alt-background);
--mdc-switch-unselected-hover-handle-color: var(--iqser-alt-background);
--mdc-switch-unselected-focus-handle-color: var(--iqser-alt-background);
--mdc-switch-disabled-unselected-handle-color: var(--iqser-alt-background);
--mdc-switch-disabled-track-opacity: 0.38;
--mdc-switch-track-width: 30px;
--mdc-switch-track-height: 16px;
--mdc-switch-track-shape: 8px;
--mdc-switch-handle-width: 12px;
--mdc-switch-handle-height: 12px;
--mdc-switch-handle-shape: 6px;
.mdc-form-field > label {
margin: 0;
padding-left: 0;
}
.mat-slide-toggle-thumb-container {
top: 2px !important;
left: 2px !important;
height: 12px !important;
width: 12px !important;
.mdc-switch__handle {
right: 8px;
left: unset;
}
.mat-slide-toggle-thumb {
height: 12px !important;
width: 12px !important;
box-shadow: none;
background-color: var(--iqser-alt-background);
.mdc-switch--unselected {
.mdc-switch__handle {
right: 4px;
}
}
.mat-ripple {
.mdc-switch__icons,
.mdc-switch__ripple {
display: none;
}
&.mat-primary.mat-checked {
.mat-slide-toggle-bar {
background-color: var(--iqser-primary);
border: 1px solid var(--iqser-background);
}
.mat-slide-toggle-thumb {
background-color: var(--iqser-background);
}
.mat-slide-toggle-thumb-container {
transform: translate3d(14px, 0, 0);
}
}
}