metro4/less/slider.less

The front-end framework for Build responsive, mobile-first projects on the web with the first front-end component library in Metro Style

@import (once) "include/vars";
@import (once) "include/mixins";

.slider {
    display: block;
    position: relative;
    height: 2.125rem;
    background: transparent;
    cursor: default;
    width: 100%;
}

.slider {
    input {
        width: 1px;
        height: 1px;
        position: absolute;
        top: 0;
        left: 0;
        opacity: 0;
    }
}

.slider {
    .backside, .complete, .buffer, .marker {
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
    }

    .backside {
        background-color: @gray;
        width: 100%;
        z-index: 1;
        height: .6rem;
    }

    .buffer {
        z-index: 2;
        height: .3rem;
        background-color: @white;
    }

    .complete {
        z-index: 3;
        height: .6rem;
        background-color: @green;
    }

    .marker {
        .square(1, rem);
        background-color: @dark;
        z-index: 4;
        outline: none;
        border: 1px solid transparent;
        cursor: pointer;

        &:focus {
            .focus-show(@lightGray);
        }

        &:active {
            .halo();
        }
    }

    .hint {
        display: none;
        position: absolute;
        z-index: 5;
        width: auto!important;
        height: auto!important;
        padding: .25rem .5rem;
        background-color: @darkGray;
        color: @white;
        white-space: nowrap;

        &::before {
            display: block;
            position: absolute;
            content: "";
            width: 6px;
            height: 6px;
            background-color: inherit;
        }

        &.top-side {
            top: 0;
            left: 50%;
            transform: translateY(-100%) translateX(-50%);
            margin-top: -8px;

            &::before {
                top: 100%;
                left: 50%;
                transform: rotate(45deg) translateX(-50%);
                margin-top: -1px;
            }
        }

        &.bottom-side {
            left: 50%;
            transform: translateX(-50%);
            top: 100%;
            margin-top: 8px;

            &::before {
                top: 0;
                left: 50%;
                transform: rotate(45deg) translateX(-50%);
                margin-top: -1px;
            }
        }

        &.left-side {
            left: 0;
            top: 50%;
            transform: translateY(-50%) translateX(-100%) ;
            margin-left: -8px;

            &::before {
                top: 50%;
                right: 0;
                transform: translateY(-50%) rotate(45deg);
                margin-right: -3px;
            }
        }

        &.right-side {
            left: 100%;
            transform: translateY(-50%) ;
            top: 50%;
            margin-left: 8px;

            &::before {
                top: 50%;
                left: 0;
                transform: translateX(-50%) translateY(-50%) rotate(45deg);
            }
        }
    }

    .marker {
        &.left-knob {
            left: 0;
        }

        &.right-knob {
            left: auto;
            right: 0;
        }
    }

    &.range {
        .complete {
            width: 100%;
        }
    }

    &.thin {
        .backside, .complete, .buffer {
            height: 6px;
        }
    }
    &.ultra-thin {
        .backside, .complete, .buffer {
            height: 4px;
        }
    }
    &.cycle-marker {
        .marker {
            border-radius: 50%;
        }
    }
}

.slider {
    &.vertical-slider {
        width: 2.125rem;
        height: 100px;

        .backside, .complete, .buffer, .marker {
            top: auto;
            left: 50%;
            transform: translateY(0) translateX(-50%);
        }

        .backside, .complete, .buffer {
            width: .5rem;
            bottom: 0;
        }

        .backside {
            height: 100%;
        }

        .buffer {
            width: .3rem;
        }

        .marker {
            top: 100%;
            transform: translateY(-100%) translateX(-50%);
        }

        &.hint {
            &.top-side {

            }
        }
    }
}

.slider {
    &.rounded {
        .backside, .complete, .buffer, .marker {
            border-radius: @borderRadius;
        }
    }
}

.slider {
    &.disabled {
        .marker {
            display: none;
        }
    }
}