このリポジトリは2023-09-09にアーカイブされています。 ファイルの閲覧とクローンは可能ですが、プッシュ、イシューの作成、プルリクエストはできません。
076server/resources/sass/conponent/_button.scss

190 行
4.7 KiB
SCSS

.btn, btn:hover {
margin: 0 2px;
border: 2px solid;
}
.btn {
border-left-color: $white1;
border-top-color: $white1;
}
.btn:hover {
border-left-color: $grey3;
border-top-color: $grey3;
}
.btn-cwgames, .btn-cwgames.disabled, .btn-cwgames:disabled {
background: radial-gradient(ellipse at top, $black3, transparent),
radial-gradient(ellipse at bottom, $black1, transparent);
color: $white1;
border-bottom-color: $grey2;
border-right-color: $grey2;
}
.btn-cwgames:hover {
color: $white1;
background-color: $grey4;
border-color: transparent;
border-bottom-color: $black2;
border-right-color: $black2;
}
.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;
}