diff --git a/README.md b/README.md index 6098e75..7205329 100644 --- a/README.md +++ b/README.md @@ -62,3 +62,5 @@ The following custom properties and mixins are available for styling: | `--paper-slider-pin-start-color` | The color of the pin at the far left | `--paper-grey-400` | | `--paper-slider-height` | Height of the progress bar | `2px` | | `--paper-slider-input` | Mixin applied to the input in editable mode | `{}` | +| `--paper-slider-container` | Mixin applied container of paper-slider | `{}` | +| `--paper-slider-knob-inner` | Mixin applied to slider knob inner | `{}` | diff --git a/paper-slider.html b/paper-slider.html index 457a4d5..c182a6c 100644 --- a/paper-slider.html +++ b/paper-slider.html @@ -55,9 +55,12 @@ `--paper-slider-disabled-secondary-color` | The disabled secondary progress bar color | `--paper-grey-400` `--paper-slider-knob-start-color` | The fill color of the knob at the far left | `transparent` `--paper-slider-knob-start-border-color` | The border color of the knob at the far left | `--paper-grey-400` +`--paper-slider-knob` | Mixin applied to the knob | `{}` `--paper-slider-pin-start-color` | The color of the pin at the far left | `--paper-grey-400` `--paper-slider-height` | Height of the progress bar | `2px` `--paper-slider-input` | Mixin applied to the input in editable mode | `{}` +`--paper-slider-container` | Mixin applied container of paper-slider | `{}` +`--paper-slider-knob-inner` | Mixin applied to slider knob inner | `{}` @group Paper Elements @element paper-slider @@ -97,6 +100,7 @@ height: calc(30px + var(--calculated-paper-slider-height)); margin-left: calc(15px + var(--calculated-paper-slider-height)/2); margin-right: calc(15px + var(--calculated-paper-slider-height)/2); + @apply(--paper-slider-container); } #sliderContainer:focus { @@ -170,6 +174,7 @@ margin-left: calc(-15px - var(--calculated-paper-slider-height)/2); width: calc(30px + var(--calculated-paper-slider-height)); height: calc(30px + var(--calculated-paper-slider-height)); + @apply(--paper-slider-knob); } .transiting > .slider-knob { @@ -204,6 +209,8 @@ transition-property: transform, background-color, border; transition-duration: 0.18s; transition-timing-function: ease; + + @apply(--paper-slider-knob-inner); } .expand:not(.pin) > .slider-knob > .slider-knob-inner {