Bootstrap 4 的按鈕配色個人覺得比較硬,想改回 Bootstrap 3 的按鈕配色於是就用覆蓋樣式的方式依照 Boostrap 4 的樣式設定調整顏色。
( LESS 格式,因為 WordPress bug 把 & 給 escape 了,複製後得把 & 改回 & )
#bundle() {
.btnStyle {
color: @color;
background-color: @background-color;
border-color: @border-color;
&:hover {
color: @color;
background-color: @background-color-hover;
border-color: @border-color-hover;
}
&.focus, &:focus {
box-shadow: @box-shadow;
}
&.disabled, &:disabled {
color: @color;
background-color: @background-color;
border-color: @border-color;
}
&:not(:disabled):not(.disabled).active
, &:not(:disabled):not(.disabled):active
, .show > &.dropdown-toggle {
color: @color;
background-color: @background-color-hover;
border-color: @border-color-hover;
}
&:not(:disabled):not(.disabled):active:focus
, &:not(:disabled):not(.disabled).active:focus
, .show > &.dropdown-toggle:focus {
box-shadow: @box-shadow;
}
}
}
.btn-primary {
@color: #fff;
@background-color: #0275d8;
@border-color: #0275d8;
@background-color-hover: #025aa5;
@border-color-hover: #01549b;
@box-shadow: 0 0 0 .2rem rgba(2, 117, 216, .5);
#bundle.btnStyle();
}
.btn-secondary {
@color: #292b2c;
@background-color: #fff;
@border-color: #ccc;
@background-color-hover: #e6e6e6;
@border-color-hover: #adadad;
@box-shadow: 0 0 0 .2rem rgba(204, 204, 204, .5);
#bundle.btnStyle();
}
.btn-info {
@color: #fff;
@background-color: #5bc0de;
@border-color: #5bc0de;
@background-color-hover: #31b0d5;
@border-color-hover: #2aabd2;
@box-shadow: 0 0 0 .2rem rgba(91, 192, 222, .5);
#bundle.btnStyle();
}
.btn-success {
@color: #fff;
@background-color: #5cb85c;
@border-color: #5cb85c;
@background-color-hover: #449d44;
@border-color-hover: #449d44;
@box-shadow: 0 0 0 .2rem rgba(92, 184, 92, .5);
#bundle.btnStyle();
}
.btn-warning {
@color: #fff;
@background-color: #f0ad4e;
@border-color: #f0ad4e;
@background-color-hover: #ec971f;
@border-color-hover: #eb9316;
@box-shadow: 0 0 0 .2rem rgba(240, 173, 78, .5);
#bundle.btnStyle();
}
.btn-danger {
@color: #fff;
@background-color: #d9534f;
@border-color: #d9534f;
@background-color-hover: #c9302c;
@border-color-hover: #c12e2a;
@box-shadow: 0 0 0 .2rem rgba(217, 83, 79, .5);
#bundle.btnStyle();
}
.btn-light {
@color: #212529;
@background-color: #eceeec;
@border-color: #eceeec;
@background-color-hover: #d8dcd8;
@border-color-hover: #d1d6d1;
@box-shadow: 0 0 0 .2rem rgba(206, 208, 207, 0.5);
#bundle.btnStyle();
}
.btn-dark {
@color: #fff;
@background-color: #343a40;
@border-color: #343a40;
@background-color-hover: #23272b;
@border-color-hover: #1d2124;
@box-shadow: 0 0 0 .2rem rgba(82, 88, 93, 0.5);
#bundle.btnStyle();
}