Contents

@mixin button($background, $highlight) {
    display: inline-block;
    padding: 10px 25px;
    border-radius: 5px;
    transition: all .25s ease;
    justify-content: center;
    text-align: center;
    border: 2px solid $background;
    background-color: $background;
    color: $highlight;
    font-weight: bold;
    font-size: 1rem;
    &:hover, &:focus {
        background-color: $highlight;
        color: $background;
    }
}

.button-dark {
    @include button(white, $sidebar-colour)
}

.button-dark-primary {
    @include button($primary-highlight, $sidebar-colour)
}

.button-dark-secondary {
    @include button($secondary-highlight, $sidebar-colour)
}

.button-dark-tertiary {
    @include button($tertiary-highlight, $sidebar-colour)
}

.button-light {
    @include button($sidebar-colour, white)
}

.button-light-primary {
    @include button($primary-highlight, white)
}

.button-light-secondary {
    @include button($secondary-highlight, white)
}

.button-light-tertiary {
    @include button($tertiary-highlight, white)
}

Version data entries

4 entries across 4 versions & 1 rubygems

Version	Path
arco-0.8.2	_sass/buttons.scss
arco-0.8.1	_sass/buttons.scss
arco-0.8.0	_sass/buttons.scss
arco-0.7.0	_sass/buttons.scss