_scss/buttons.scss

/*
 * Licensed to the Apache Software Foundation (ASF) under one or more
 * contributor license agreements.  See the NOTICE file distributed with
 * this work for additional information regarding copyright ownership.
 * The ASF licenses this file to You under the Apache License, Version 2.0
 * (the "License"); you may not use this file except in compliance with
 * the License.  You may obtain a copy of the License at
 *
 *      http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

@mixin custom-button($fg, $bg) {
    border-color: $bg !important;
    background-color: $bg !important;
    color: $fg !important;
    font-weight: 400;

    &:focus {
        border-color: $bg !important;
        background-color: $bg !important;
        color: $fg !important;
    }

    &:hover {
        color: $fg !important;
        border-color: $bg !important;
        background-color: darken($bg, 3%) !important;
    }
}

.btn {
    letter-spacing: 0.02em;
}

.btn-default:hover, .btn-default:active, .btn-default:visited {
    background-color: #efefef !important;
    border-color: #ddd !important;
}

.btn-creme { @include custom-button(#8a6d3b, #fcf8e3) }
.btn-beta { @include custom-button(#fff, $color-beta) }
.btn-black { @include custom-button(#fff, #555) }
.btn-white { @include custom-button(#333, #fff) }
.btn-milk { @include custom-button(#333, #f9f9f3) }
.btn-turquoise { @include custom-button(#fff, $color-turquoise) }
.btn-emerald { @include custom-button(#fff, $color-emerald) }
.btn-river { @include custom-button(#fff, $color-river) }
.btn-amethyst { @include custom-button(#fff, $color-amethyst) }
.btn-asphalt { @include custom-button(#fff, $color-asphalt) }
.btn-sea { @include custom-button(#fff, $color-sea) }
.btn-nephritis { @include custom-button(#fff, $color-nephritis) }
.btn-belize { @include custom-button(#fff, $color-belize) }
.btn-wisteria { @include custom-button(#fff, $color-wisteria) }
.btn-midnight { @include custom-button(#fff, $color-midnight) }
.btn-orange { @include custom-button(#fff, $color-orange) }
.btn-carrot { @include custom-button(#fff, $color-carrot) }
.btn-pumpkin { @include custom-button(#fff, $color-pumpkin) }
.btn-alizarin { @include custom-button(#fff, $color-alizarin) }
.btn-pomegranate { @include custom-button(#fff, $color-pomegranate) }
.btn-cloud { @include custom-button($color-grey-blue, $color-cloud) }
.btn-white-river { @include custom-button($color-river, #fff) }
.btn-silver { @include custom-button(#fff, $color-silver) }
.btn-concrete { @include custom-button(#fff, $color-concrete) }
.btn-asbestos { @include custom-button(#fff, $color-asbestos) }
.btn-pink { @include custom-button(#fff, $color-pink) }
.btn-mustard { @include custom-button(#000, $color-mustard) }
.btn-mustard2 { @include custom-button(#fff, $color-mustard) }
.btn-blue { @include custom-button(#fff, $color-blue) }
.btn-slack { @include custom-button(#fff, $color-slack) }
.btn-slack2 { @include custom-button(#fff, $color-slack2) }
.btn-slack3 { @include custom-button(#fff, $color-slack3) }
.btn-slack4 { @include custom-button(#fff, $color-slack4) }
.btn-slack5 { @include custom-button(#fff, $color-slack5) }
.btn-primary { @include custom-button(#fff, $brand-primary) }
.btn-danger { @include custom-button(#fff, $brand-danger) }
.btn-beta { @include custom-button(#fff, $color-beta) }
.btn-success { @include custom-button(#fff, $brand-success) }
.btn-beige { @include custom-button(#fff, $color-beige) }
.btn-sunflower { @include custom-button($color-slack, $color-sunflower) }
.btn-peach { @include custom-button(#fff, $color-peach) }
.btn-sunflower2 { @include custom-button($color-slack2, $color-sunflower) }

.one-letter-btn-xs {
    padding: 1px 7px;
}