slider-pips.less

/* ------------------------------------------------------------------------------
*
*  # jQuery UI slider pips
*
*  Styles for jQuery UI slider pips extension
*
*  Version: 1.1
*  Latest update: Nov 15, 2015
*
* ---------------------------------------------------------------------------- */


/* # Pips
-------------------------------------------------- */

.ui-slider-pips {


    // Horizontal
    // ------------------------------

    // Increase bottom margin to fit the pips
    &.ui-slider-horizontal {
        margin-bottom: 32px;
        margin-left: 10px;
        margin-right: 10px;
    }

    // Default hide the labels and pips that arnt visible
    .ui-slider-label,
    .ui-slider-pip-hide {
        display: none;
    }

    // Now we show any labels that we've set to show in the options
    .ui-slider-pip-label .ui-slider-label {
        display: block;
    }

    // Pip and label wrapper
    .ui-slider-pip {
        height: 10px;
        line-height: 10px;
        font-size: 85%;
        width: 20px;
        margin-left: -11px;
        position: absolute;
        overflow: visible;
        text-align: center;
        top: 20px;
        left: 20px;
        cursor: pointer;
        -webkit-touch-callout: none;
        .user-select(none);

        &:hover .ui-slider-label {
            font-weight: 500;
        }
    }

    // Little pip/line position & size
    .ui-slider-line {
        background-color: #999;
        width: 1px;
        height: 3px;
        position: absolute;
        left: 50%;
    }

    // Text label postion & size
    .ui-slider-label {
        position: absolute;
        top: 8px;
        left: 50%;
        width: 20px;
        margin-left: -10px;
    }


    // Vertical
    // ------------------------------

    // Vertical slider needs right-margin, not bottom
    &.ui-slider-vertical {
        margin: 10px 40px 10px 10px;

        // Align vertical pips left and to right of the slider
        .ui-slider-pip {
            text-align: left;
            top: auto;
            left: 18px;
            margin-left: 0;
            margin-bottom: -4px;
        }

        // Vertical line/pip should be horizontal instead
        .ui-slider-line {
            width: 3px;
            height: 1px;
            position: absolute;
            top: 50%;
            left: 0;
        }

        // Text label
        .ui-slider-label {
            top: 50%;
            margin-left: 0;
            margin-top: -5px;
            width: 20px;
            left: 5px;
        }
    }
}


/* # Tooltips
-------------------------------------------------- */

.ui-slider-float {


    // Core and horizontal
    // ------------------------------

    // Remove the godawful looking focus outline on handle and float
    .ui-slider-handle:focus {
        &,
        .ui-slider-tip,
        .ui-slider-tip-label {
            outline: 0;
        }
    }

    // Style tooltips on handles and on labels 
    .ui-slider-tip,
    .ui-slider-tip-label {
        position: absolute;
        visibility: hidden;
        top: -45px;
        display: block;
        width: 34px;
        margin-left: -16px;
        left: 50%;
        height: 30px;
        line-height: 32px;
        background: @gray-dark;
        border-radius: @border-radius-base;
        text-align: center;
        font-size: @font-size-small;
        color: #fff;
        .opacity(0);
        .transition(all ease-in-out 0.2s 0.2s);
    }

    // Show the tooltip on hover or focus
    .ui-slider-handle:hover .ui-slider-tip,
    .ui-slider-handle:focus .ui-slider-tip {
        top: -40px;
        visibility: visible;
        .opacity(1);
        .transition-delay(0.2s);
    }

    // Put label tooltips below slider
    .ui-slider-pip {
        .ui-slider-tip-label {
            top: 42px;
        }

        &:hover .ui-slider-tip-label {
            top: 32px;
            font-weight: normal;
        }
    }

    // Give the tooltip a css triangle arrow
    .ui-slider-tip:after,
    .ui-slider-pip .ui-slider-tip-label:after {
        content: '';
        width: 0;
        height: 0;
        border: 5px solid transparent;
        border-top-color: @gray-dark;
        position: absolute;
        bottom: -10px;
        left: 50%;
        margin-left: -5px;
    }


    // Floating vertical tooltips
    // ------------------------------

    // Tooltip floats to left of handle
    &.ui-slider-vertical {
        .ui-slider-tip,
        .ui-slider-tip-label {
            top: 50%;
            margin-top: -16px;
            width: 34px;
            margin-left: 0px;
            left: -50px;
            .transition(all ease-in-out 0.2s 0.2s);
        }

        .ui-slider-handle:hover .ui-slider-tip,
        .ui-slider-handle:focus .ui-slider-tip,
        .ui-slider-pip:hover .ui-slider-tip-label,
        .ui-slider-pip:focus .ui-slider-tip-label {
            top: 50%;
            margin-top: -16px;
            left: -45px;
        }

        // Put label tooltips to right of slider
        .ui-slider-pip {
            .ui-slider-tip-label {
                left: 47px;
            }

            &:hover .ui-slider-tip-label {
                left: 37px;
            }
        }

        // Give the tooltip a css triangle arrow
        .ui-slider-tip:after,
        .ui-slider-pip .ui-slider-tip-label:after {
            border-left-color: @gray-dark;
            bottom: 9px;
            left: auto;
            margin-right: -9px;
            border-top-color: transparent;
            right: 0;
            margin-left: 0;
        }
    }
}