190 行
5.4 KiB
SCSS
190 行
5.4 KiB
SCSS
.btn, btn:hover {
|
|
margin: 0 2px;
|
|
border: 2px solid;
|
|
}
|
|
|
|
.btn {
|
|
display: inline-block;
|
|
font-weight: 400;
|
|
color: $black1;
|
|
text-align: center;
|
|
vertical-align: middle;
|
|
-webkit-user-select: none;
|
|
-moz-user-select: none;
|
|
user-select: none;
|
|
background-color: transparent;
|
|
padding: 0.375rem 0.75rem;
|
|
font-size: 1rem;
|
|
line-height: 1.5;
|
|
border-radius: 0.25rem;
|
|
border-left-color: $white1;
|
|
border-top-color: $white1;
|
|
transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
|
|
}
|
|
|
|
.btn:hover {
|
|
color: $black1;
|
|
text-decoration: none;
|
|
border-left-color: $grey3;
|
|
border-top-color: $grey3;
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) { .btn { transition: none; } }
|
|
.btn.disabled, .btn:disabled { opacity: 0.65; }
|
|
.btn:not(:disabled):not(.disabled) { cursor: pointer; }
|
|
a.btn.disabled, fieldset:disabled a.btn { pointer-events: none; }
|
|
.btn-lg, .btn-group-lg > .btn { padding: 0.5rem 1rem; font-size: 1.25rem; line-height: 1.5; border-radius: 0.3rem; }
|
|
.btn-sm, .btn-group-sm > .btn { padding: 0.25rem 0.5rem; font-size: 0.875rem; line-height: 1.5; border-radius: 0.2rem; }
|
|
.btn-block { display: block; width: 100%; }
|
|
.btn-block + .btn-block { margin-top: 0.5rem; }
|
|
input[type="submit"].btn-block, input[type="reset"].btn-block, input[type="button"].btn-block { width: 100%; }
|
|
|
|
.btn-fumei, .btn-fumei.disabled, .btn-fumei:disabled {
|
|
background: radial-gradient(ellipse at top, $kawaii3, transparent), radial-gradient(ellipse at bottom, $black1, transparent);
|
|
color: $white1;
|
|
background-color: $kawaii2;
|
|
border-bottom-color: $kawaii1;
|
|
border-right-color: $kawaii1;
|
|
}
|
|
|
|
.btn-fumei:hover {
|
|
color: $white1;
|
|
background-color: $kawaii3;
|
|
border-color: transparent;
|
|
border-bottom-color: $kawaii2;
|
|
border-right-color: $kawaii2;
|
|
}
|
|
|
|
.btn-fumei-check {
|
|
color: $white1;
|
|
background-color: $kawaii3;
|
|
border-color: transparent;
|
|
border-bottom-color: $kawaii2;
|
|
border-right-color: $kawaii2;
|
|
box-shadow: 0px 0px 7px 3px $kawaii2;
|
|
}
|
|
|
|
.btn-danshi, .btn-danshi.disabled, .btn-danshi:disabled {
|
|
background: radial-gradient(ellipse at top, $dan2, transparent), radial-gradient(ellipse at bottom, $black1, transparent);
|
|
color: $white1;
|
|
background-color: $white1;
|
|
border-bottom-color: $dan1;
|
|
border-right-color: $dan1;
|
|
}
|
|
|
|
.btn-danshi:hover {
|
|
color: $white1;
|
|
background-color: $dan4;
|
|
border-color: transparent;
|
|
border-bottom-color: $dan3;
|
|
border-right-color: $dan3;
|
|
}
|
|
|
|
.btn-danshi-check {
|
|
color: $white1;
|
|
background-color: $dan4;
|
|
border-color: transparent;
|
|
border-bottom-color: $dan3;
|
|
border-right-color: $dan3;
|
|
box-shadow: 0px 0px 7px 3px $dan3;
|
|
}
|
|
|
|
.btn-joshi, .btn-joshi.disabled, .btn-joshi:disabled {
|
|
background: radial-gradient(ellipse at top, $jo2, transparent), radial-gradient(ellipse at bottom, $black1, transparent);
|
|
color: $white1;
|
|
background-color: $white1;
|
|
border-bottom-color: $jo1;
|
|
border-right-color: $jo1;
|
|
}
|
|
|
|
.btn-joshi:hover {
|
|
color: $white1;
|
|
background-color: $jo4;
|
|
border-color: transparent;
|
|
border-bottom-color: $jo3;
|
|
border-right-color: $jo3;
|
|
}
|
|
|
|
.btn-joshi-check {
|
|
color: $white1;
|
|
background-color: $jo4;
|
|
border-color: transparent;
|
|
border-bottom-color: $jo3;
|
|
border-right-color: $jo3;
|
|
box-shadow: 0px 0px 7px 3px $jo3;
|
|
}
|
|
|
|
.btn-primary, .btn-primary.disabled, .btn-primary:disabled {
|
|
background: radial-gradient(ellipse at top, $suwa03, transparent), radial-gradient(ellipse at bottom, $black1, transparent);
|
|
color: $white1;
|
|
border-bottom-color: $suwa00;
|
|
border-right-color: $suwa00;
|
|
}
|
|
|
|
.btn-primary:hover {
|
|
color: $white1;
|
|
background-color: $suwa08;
|
|
border-color: transparent;
|
|
border-bottom-color: $suwa04;
|
|
border-right-color: $suwa04;
|
|
}
|
|
|
|
.btn-secondary, .btn-secondary.disabled, .btn-secondary:disabled {
|
|
background: radial-gradient(ellipse at top, $grey3, transparent), radial-gradient(ellipse at bottom, $black1, transparent);
|
|
color: $white1;
|
|
border-bottom-color: $grey1;
|
|
border-right-color: $grey1;
|
|
}
|
|
|
|
.btn-secondary:hover {
|
|
color: $white1;
|
|
background-color: $grey5;
|
|
border-color: transparent;
|
|
border-bottom-color: $grey2;
|
|
border-right-color: $grey2;
|
|
}
|
|
|
|
.btn-success, .btn-success.disabled, .btn-success:disabled, .alert-success {
|
|
background: radial-gradient(ellipse at top, $ok2, transparent), radial-gradient(ellipse at bottom, $black1, transparent);
|
|
color: $white1;
|
|
border-bottom-color: $ok1;
|
|
border-right-color: $ok1;
|
|
}
|
|
|
|
.btn-success:hover {
|
|
color: $white1;
|
|
background-color: $ok5;
|
|
border-color: transparent;
|
|
border-bottom-color: $ok4;
|
|
border-right-color: $ok4;
|
|
}
|
|
|
|
.btn-danger, .btn-danger.disabled, .btn-danger:disabled, .alert-danger {
|
|
background: radial-gradient(ellipse at top, $ng3, transparent), radial-gradient(ellipse at bottom, $black1, transparent);
|
|
color: $white1;
|
|
border-bottom-color: $ng1;
|
|
border-right-color: $ng1;
|
|
}
|
|
|
|
.btn-danger:hover {
|
|
color: $white1;
|
|
background-color: $ng7;
|
|
border-color: transparent;
|
|
border-bottom-color: $ng3;
|
|
border-right-color: $ng3;
|
|
}
|
|
|
|
.btn-warning, .btn-warning.disabled, .btn-warning:disabled, .alert-warning {
|
|
background: radial-gradient(ellipse at top, $yellow3, transparent), radial-gradient(ellipse at bottom, $black1, transparent);
|
|
color: $white1;
|
|
border-bottom-color: $yellow1;
|
|
border-right-color: $yellow1;
|
|
}
|
|
|
|
.btn-warning:hover {
|
|
color: $white1;
|
|
background-color: $yellow5;
|
|
border-color: transparent;
|
|
border-bottom-color: $yellow3;
|
|
border-right-color: $yellow3;
|
|
} |