diff --git a/projects/components/src/toggle-switch/toggle-switch.component.scss b/projects/components/src/toggle-switch/toggle-switch.component.scss index f26f307d4..f37dc1c12 100644 --- a/projects/components/src/toggle-switch/toggle-switch.component.scss +++ b/projects/components/src/toggle-switch/toggle-switch.component.scss @@ -3,8 +3,14 @@ :host { ::ng-deep { + .mat-slide-toggle { + height: 20px; + line-height: 20px; + } + .mat-checked { .mat-slide-toggle-thumb-container { + transform: translate3d(7px, 0, 0) !important; margin-left: 1px; } @@ -19,14 +25,27 @@ .mat-slide-toggle-thumb-container { margin-left: -1px; + width: 12px; + height: 12px; + + .mat-slide-toggle-ripple { + top: calc(50% - 7px); + left: calc(50% - 7px); + height: 20px; + width: 20px; + } } .mat-slide-toggle-thumb { background-color: $gray-2; + height: 12px; + width: 12px; } .mat-slide-toggle-bar { background-color: $gray-5; + width: 18px; + height: 6px; } } }