Реализация пульсации на слайдере MDC - PullRequest
Новая
       28

Реализация пульсации на слайдере MDC

0 голосов
/ 24 октября 2018

Я работаю с MDC и пытаюсь применить волновой эффект к моему ползунку.Я следовал за документацией и добавил sass mixins, но стили будут применяться, только если я выберу весь слайдер, а не только большой палец.Я пробовал несколько различных комбинаций Sass для выбора большого пальца / контейнера, но ни одна из них не сработала.Я также попытался переместить стили в глобальный файл sass вместо стилей компонентов, но это также оказалось неудачным.

Документация MDC 

//These styles apply 
.mdc-slider{
    @include mdc-ripple-surface;
    @include mdc-ripple-radius-unbounded(100%);
    @include mdc-states($action-blue, true);
    @include mdc-states-base-color($action-blue);
    @include mdc-states-hover-opacity(.1);
    @include mdc-states-focus-opacity(.26);
    @include mdc-states-press-opacity(.26);
}

//These do not
.mdc-slider__thumb{
    @include mdc-ripple-surface;
    @include mdc-ripple-radius-unbounded(100%);
    @include mdc-states($action-blue, true);
    @include mdc-states-base-color($action-blue);
    @include mdc-states-hover-opacity(.1);
    @include mdc-states-focus-opacity(.26);
    @include mdc-states-press-opacity(.26);
}

.mdc-slider__thumb-container{
    @include mdc-ripple-surface;
    @include mdc-ripple-radius-unbounded(100%);
    @include mdc-states($action-blue, true);
    @include mdc-states-base-color($action-blue);
    @include mdc-states-hover-opacity(.1);
    @include mdc-states-focus-opacity(.26);
    @include mdc-states-press-opacity(.26);   
}
<mdc-slider min="0" max="50" value="35"></mdc-slider>
...