stylus style

.styl

@import 'nib'

/* =======================
   ------- iSlider -------
   ======================= */
   
b = '.islider'

{b}
    position relative
    border-radius 35px

    & *
        margin 0
        padding 0

    &__box
        position relative

    &__path
        position absolute
        border-radius 35px

    &_has_anim &__path
        transition: left .2s ease, width .2s ease, height .2s ease, top .2s ease

    &__slider
        position absolute
        z-index 1
        width 26px
        height 26px

    &_has_anim &__slider
        transition: left .2s ease, top .2s ease

    &__slider:before
        content ''
        display block
        background none
        position absolute
        border 1px solid #939393
        width 24px
        height 24px
        background #fafafa
        border-radius 50%

    &__slider:after
        content ''
        display block
        left 50%
        top 50%
        margin-left -5px
        margin-top -5px
        position absolute
        width 10px
        height 10px
        border-radius 50%

    &__path-box
        background none !important
        overflow hidden

    &__path-orig
        border-radius 35px

    &_range-max &__path-orig
        position absolute
        right 0
        width 100%

    &_range-max &__path-orig
        position absolute
        bottom 0
        height 100%

.vertical
    height 180px
    width 20px
    box-shadow inset 0 0 5px 1px rgba(95, 95, 95, 0.3)

    {b}__slider
        left -3px

    {b}__path
        width 100%

    {b}__path-orig
        height 100%
        min-height 40px

/* horizontal layout */

{b}_horizontal
    width 250px
    height 20px
    box-shadow inset 0 2px 5px 1px rgba(95, 95, 95, 0.3)

    {b}__slider
        top -3px

    {b}__path
        height 100%

    {b}__path-orig
        height 100%
        min-width 40px

    {b}__left
        margin-left -26px

    {b}__box
        height 100%

    &{b}_range {b}__box
        margin 0 26px

    &{b}_min {b}__box
        margin-left 26px

    &{b}_max {b}__box
        margin-left 26px

    &{b}_range {b}__path
        margin-left -13px
        padding-left 26px

    &{b}_min {b}__path
        margin-left -26px

    &{b}_max {b}__path
        margin-left -26px
        padding-left 13px

/* end */

/* vertical layout */

{b}_vertical

    {b}__left
        margin-top -26px

    &{b}_range {b}__box
        top 26px

    &{b}_min {b}__box
        top 26px

    &{b}_max {b}__box
        top 26px

    &{b}_range {b}__path
        margin-top -13px
        padding-top 26px

    &{b}_min {b}__path
        margin-top -26px

    &{b}_max {b}__path
        margin-top -26px
        padding-top 13px

/* end */