mail/src/sass/components/_buttons.scss

// Regular buttons with disabled support
// -------------------------------------------

.btn {
    position: relative;
    display: inline-block;
    padding: $btn-padding-vertical $btn-padding-horizontal;
    font-size: $btn-font-size;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    border: 1px solid transparent;
    border-radius: 0;
    white-space: nowrap;
    user-select: none;
    background-image: none; // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214
    background-color: $btn-back-color;
    color: $btn-color;
    transition: background-color 0.3s;
    text-decoration: none;
    font-weight: normal;
    outline: 0;

    &:hover,
    &:focus {
        background-color: lighten($btn-back-color, 10%);
    }

    &:active,
    &.active {
        background-image: none;
        box-shadow: none;
        top: 1px;
        right: -1px;
    }

    &.disabled,
    &[disabled],
    &[aria-disabled="true"] {
        cursor: not-allowed;
        pointer-events: none; // Future-proof disabling of clicks
        color: $btn-disabled-color;
        background-color: $btn-disabled-back-color;
        background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAGCAYAAADgzO9IAAAAJUlEQVQIW2NkQABJIPM5lCvJCGMgC4LYIAkUlTAFMB0gjRQaBQCw8go5lVnl5wAAAABJRU5ErkJggg==);

        @include respond-to(retina) {
            background-size: 3px 3px;
        }
    }

    &[data-icon]:before {
        padding-right: 0.5em
    }
    &[data-icon-append]:after {
        padding-left: 0.5em
    }
}

.btn-primary {
    background-color: $label-primary-back-color;
    color: $label-primary-color;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAGCAYAAADgzO9IAAAAJUlEQVQIW2NkQABJIPM5lCvJCGMgC4LYIAkUlTAFMB0gjRQaBQCw8go5lVnl5wAAAABJRU5ErkJggg==);

    @include respond-to(retina) {
        background-size: 3px 3px;
    }

    &:hover,
    &:focus {
        background-color: lighten($label-primary-back-color, 5%);
    }
}

.btn-alt {
    background-color: $color-grey-input;

    &:hover,
    &:focus {
        background-color: lighten($color-grey-input, 10%);
    }
}

// Icon Buttons
// -------------------------------------------

.btn-icon {
    padding: 0;
    position: relative;
    display: inline-block;
    @include hide-text();
    margin: 2px;
    box-shadow: 0 0 0 2px $btn-icon-color;
    border-radius: 50%;
    color: $btn-icon-color;
    vertical-align: middle;
    cursor: pointer;
    white-space: nowrap;
    user-select: none;
    background-image: none; // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214
    color: $btn-icon-color;
    text-decoration: none;
    font-weight: normal;
    font-size: $font-size-base;
    font-family: $font-family-icons;
    line-height: 1;
    height: 2em;
    width: 2em;
    text-align: center;
    -webkit-font-smoothing: antialiased;
    transition: color 0.3s;
    transform: translate3d(0,0,0); // to prevent flickering
    outline: none;

    &.disabled,
    &[disabled],
    &[aria-disabled="true"] {
        cursor: not-allowed;
        pointer-events: none; // Future-proof disabling of clicks
        color: $btn-icon-disabled-color;
        box-shadow: 0 0 0 2px $btn-icon-disabled-color;
    }

    &:active,
    &.active {
        outline: 0;
        top: 1px;
        left: 1px;
    }

    &:after {
        pointer-events: none;
        position: absolute;
        width: 100%;
        height: 100%;
        border-radius: 50%;
        content: '';
        box-sizing: content-box;
        top: -2px;
        left: -2px;
        padding: 2px;
        z-index: -1;
        background: $btn-icon-color;
        transition: transform 0.3s, opacity 0.4s;
        transform: scale(1.2);
        opacity: 0;
    }
    &:hover {
        color: $color-white;
        &:after {
            transform: scale(0.8);
            opacity: 1;
        }
    }
}