$default-border: e6e6e6;
.btn {
outline: 0; background-color: #fff; display: inline-flex; justify-content: center; align-items: center; border: 1px solid $default-border; padding: 6px 12px 7px; border-radius: 3px; font-size: 14px; font-weight: 700; transition: all .3s; &:focus, &:hover:focus { @include focus-outline; } &.hover, &:hover { transform: translateY(-1px); } &.active, &:active { transform: translateY(0); box-shadow: none; border: 1px solid darken($default-border, 20%); } &.disabled, &:disabled { transform: translateY(0); cursor: not-allowed; } &.btn-sm { &, .icon:before { font-size: 12px; } padding: 2px 6px; .btn-loader { padding: 8px 8px 9px; .ring-loader { @include size($ring-loader-size-sm); div { @include size($ring-loader-size-sm); } } } } .btn-loader { padding: 10px; } &.btn-lg { font-size: 16px; .icon:before { font-size: 20px; } padding: 8px 20px; .btn-loader { padding: 11px; .ring-loader { @include size($ring-loader-size-lg); div { @include size($ring-loader-size-lg); } } } } .icon { margin-right: .4em; }
} .btn-loader {
position: relative;
} .btn-block {
display: block; width: 100%;
} .btn.btn-icon {
outline: 0; border-radius: 100%; @include size(48px); background-color: transparent; border: 0; position: relative; padding: 0; box-shadow: none; &:focus { @include focus-outline; } .icon { margin: 0; vertical-align: middle; transform: translateY(0); } @include ripple(48px, 0, 0);
}
.btn .badge {
margin-left: .5rem; font-weight: 400;
}
@each $classname, $bg, $color, $bg-ex, $bg-disabled, $badge-bg, $badge-color in $btns {
.btn.#{$classname} { background-color: $bg; color: $color; @if $classname == 'btn-secondary' { border: 1px solid $default-border; box-shadow: none; } @else { border: 0; box-shadow: 0 4px 6px 0 rgba(50, 50, 93, .05), 0 1px 3px 0 rgba(0, 0, 0, .08); &.hover, &:hover { box-shadow: 0 7px 12px 0 rgba(50, 50, 93, .05), 0 3px 6px 0 rgba(0, 0, 0, .08); } } &.hover, &:hover, &.active, &:active { background-color: $bg-ex; } &.active, &:active { border: 1px solid darken($bg-ex, 20%); } &.disabled, &:disabled { background-color: $bg-disabled; } .badge { background-color: $badge-bg; color: $badge-color; } }
}
.btn.btn-link {
background-color: transparent; color: nth($btn-link, 3); cursor: pointer; box-shadow: none; &.hover, &:hover, &.active, &:active { color: nth($btn-link, 4); } &.disabled, &:disabled { color: nth($btn-link, 5); }
}
button.close {
padding: 0; background-color: transparent; border: 0;
}
.btn-line {
background-color: #7ec163; &, &:hover { color: #fff; }
}
.btn-fb {
background-color: #4a9cff; &, &:hover { color: #fff; }
}
.btn-file {
position: relative; input[type="file"] { position: absolute; top: 0; right: 0; left: 0; bottom: 0; width: 100%; padding: 0; margin: 0; opacity: 0; }
}