rangetouch/docs/src/less/components/buttons.less

A super tiny library to make input type='range' sliders work better on touch devices

// ==========================================================================
// Buttons
// ==========================================================================

// Shared
.btn,
.btn__count {
    display: inline-block;
    vertical-align: middle;
    border-radius: @border-radius-base;
    font-weight: @font-weight-bold;
    user-select: none;
}

// Buttons
.btn {
    padding: (@padding-base / 2);
    background: #fff;
    border: 0;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
    transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;

    .font-size();
    color: @gray;
    text-shadow: none;
    white-space: nowrap;

    &:hover,
    &:focus {
        background: fade(#fff, 95%);
        color: @gray-dark;
    }
    &:focus {
        .tab-focus();
    }
    &:active {
        transform: scale(0.97);
    }
}
.btn--twitter .icon {
    color: @color-twitter;
}

// Count bubble
.btn__count {
    position: relative;
    margin-left: (@padding-base / 3);
    padding: (@padding-base / 2) (@padding-base * 0.4);
    min-width: (@padding-base * 1.75);
    background: #fff;
    text-shadow: none;
    color: @gray;
    font-weight: @font-weight-medium;

    &::before {
        content: '';
        position: absolute;
        display: block;
        width: @arrow-size;
        height: @arrow-size;
        left: 2px;
        top: 50%;
        margin-top: -(@arrow-size / 2);

        background: inherit;
        transform: rotate(-45deg) translate(-50%, -50%);
    }
}

.action {
    display: flex;

    .btn {
        flex: 1;
    }
    .btn__count {
        flex-shrink: 0;
    }
}