diff --git a/src/lib/core/style/_vendor-prefixes.scss b/src/lib/core/style/_vendor-prefixes.scss index cd4b127802e3..d49e9af4f485 100644 --- a/src/lib/core/style/_vendor-prefixes.scss +++ b/src/lib/core/style/_vendor-prefixes.scss @@ -28,4 +28,9 @@ cursor: -webkit-grab; cursor: grab; } + +@mixin cursor-grabbing { + cursor: -webkit-grabbing; + cursor: grabbing; +} /* stylelint-enable */ diff --git a/src/lib/slide-toggle/slide-toggle.scss b/src/lib/slide-toggle/slide-toggle.scss index 9114a259c0bb..a8afd226ba86 100644 --- a/src/lib/slide-toggle/slide-toggle.scss +++ b/src/lib/slide-toggle/slide-toggle.scss @@ -105,7 +105,9 @@ $mat-slide-toggle-bar-track-width: $mat-slide-toggle-bar-width - $mat-slide-togg // Once the thumb container is being dragged around, we remove the transition duration to // make the drag feeling fast and not delayed. - &.mat-dragging { + &.mat-dragging, &:active { + @include cursor-grabbing; + transition-duration: 0ms; } } diff --git a/src/lib/slider/slider.scss b/src/lib/slider/slider.scss index 14af8dee7e42..5ce5a9b6ea55 100644 --- a/src/lib/slider/slider.scss +++ b/src/lib/slider/slider.scss @@ -1,4 +1,5 @@ @import '../core/style/variables'; +@import '../core/style/vendor-prefixes'; // This refers to the thickness of the slider. On a horizontal slider this is the height, on a @@ -97,7 +98,19 @@ $mat-slider-focus-ring-size: 30px !default; } } +%_mat-slider-cursor { + .mat-slider:not(.mat-slider-disabled) & { + @include cursor-grab; + } + + .mat-slider:not(.mat-slider-disabled) &:active { + @include cursor-grabbing; + } +} + .mat-slider-thumb { + @extend %_mat-slider-cursor; + position: absolute; right: -$mat-slider-thumb-size / 2; bottom: -$mat-slider-thumb-size / 2; @@ -113,6 +126,8 @@ $mat-slider-focus-ring-size: 30px !default; } .mat-slider-thumb-label { + @extend %_mat-slider-cursor; + display: none; align-items: center; justify-content: center;