diff --git a/projects/components/src/toggle-switch/toggle-switch.component.scss b/projects/components/src/toggle-switch/toggle-switch.component.scss index df83c849b..6990e107b 100644 --- a/projects/components/src/toggle-switch/toggle-switch.component.scss +++ b/projects/components/src/toggle-switch/toggle-switch.component.scss @@ -4,7 +4,17 @@ :host { ::ng-deep { .mat-slide-toggle { - &.small-slide-toogle { + &.disabled { + .mat-slide-toggle-thumb { + background: $gray-7; + } + + .mat-slide-toggle-bar { + background: $gray-3; + } + } + + &.small-slide-toggle { height: 20px; line-height: 20px; diff --git a/projects/components/src/toggle-switch/toggle-switch.component.test.ts b/projects/components/src/toggle-switch/toggle-switch.component.test.ts index 6fa641873..563ccabfa 100644 --- a/projects/components/src/toggle-switch/toggle-switch.component.test.ts +++ b/projects/components/src/toggle-switch/toggle-switch.component.test.ts @@ -36,7 +36,7 @@ describe('Toggle Switch Component', () => { expect(matToggleComponent?.checked).toBeTruthy(); expect(matToggleComponent?.disabled).toBeFalsy(); expect(spectator.query('.label')).toHaveText('label'); - expect(spectator.query('mat-slide-toggle')).toHaveClass('small-slide-toogle'); + expect(spectator.query('mat-slide-toggle')).toHaveClass('small-slide-toggle'); spectator.triggerEventHandler(MatSlideToggle, 'change', new MatSlideToggleChange(matToggleComponent!, false)); expect(onCheckedChangeSpy).toHaveBeenCalledWith(false); diff --git a/projects/components/src/toggle-switch/toggle-switch.component.ts b/projects/components/src/toggle-switch/toggle-switch.component.ts index 72c95cc9c..3c4340abf 100644 --- a/projects/components/src/toggle-switch/toggle-switch.component.ts +++ b/projects/components/src/toggle-switch/toggle-switch.component.ts @@ -10,7 +10,7 @@ import { ToggleSwitchSize } from './toggle-switch-size';