This commit is contained in:
2026-01-05 12:47:14 +08:00
commit 1fc846fae3
1614 changed files with 162035 additions and 0 deletions

View File

@@ -0,0 +1,292 @@
.nut-theme-dark {
.nut-button {
&--default {
color: $dark-color3;
background: $dark-background2;
border: $button-border-width solid $dark-background2;
}
&--plain {
background: $dark-background2;
}
&:not(.nut-button--hovercls) {
.nut-button--plain:not([disabled]):active {
background: $dark-background2;
}
.nut-button--default:not([disabled]):active {
color: $dark-color3;
background: $dark-background2;
border: $button-border-width solid $dark-background2;
}
}
}
}
.nut-button {
position: relative;
box-sizing: border-box;
display: inline-block;
flex-shrink: 0;
width: auto;
height: $button-default-height;
padding: 0;
margin: 0;
font-size: $button-default-font-size;
line-height: $button-default-line-height;
text-align: center;
vertical-align: bottom;
appearance: none;
touch-action: manipulation;
cursor: pointer;
user-select: none;
transition: opacity 0.2s;
-webkit-tap-highlight-color: rgb(0 0 0 / 0%);
-webkit-tap-highlight-color: transparent;
.nut-button__text {
margin-left: 5px;
}
&::before {
position: absolute;
top: 50%;
left: 50%;
width: 100%;
height: 100%;
content: "";
background-color: $black;
border: inherit;
border-color: $black;
border-radius: inherit;
opacity: 0;
transform: translate(-50%, -50%);
}
&::after {
display: none;
}
&:not(.nut-button--hovercls) {
&:active::before {
opacity: 0.1;
}
}
&__wrap {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
}
&--loading,
&--disabled {
&::before {
display: none;
}
}
&--default {
color: $button-default-color;
background: $button-default-bg-color;
background-origin: border-box;
border: $button-border-width solid $button-default-border-color;
}
&--primary {
color: $button-primary-color;
background: $button-primary-background-color;
background-origin: border-box;
border: $button-border-width solid transparent;
}
&--info {
color: $button-info-color;
background: $button-info-background-color;
background-origin: border-box;
border: $button-border-width solid transparent;
}
&--success {
color: $button-success-color;
background: $button-success-background-color;
background-origin: border-box;
border: $button-border-width solid transparent;
}
&--danger {
color: $button-danger-color;
background: $button-danger-background-color;
background-origin: border-box;
border: $button-border-width solid transparent;
}
&--warning {
color: $button-warning-color;
background: $button-warning-background-color;
background-origin: border-box;
border: $button-border-width solid transparent;
}
&--plain {
background: $button-plain-background-color;
background-origin: border-box;
&.nut-button--primary {
color: $button-primary-border-color;
border-color: $button-primary-border-color;
}
&.nut-button--info {
color: $button-info-border-color;
border-color: $button-info-border-color;
}
&.nut-button--success {
color: $button-success-border-color;
border-color: $button-success-border-color;
}
&.nut-button--danger {
color: $button-danger-border-color;
border-color: $button-danger-border-color;
}
&.nut-button--warning {
color: $button-warning-border-color;
border-color: $button-warning-border-color;
}
&:not(.nut-button--hovercls) {
&.nut-button--primary:not([disabled]):active {
color: $button-primary-border-color;
border-color: $button-primary-border-color;
}
&.nut-button--info:not([disabled]):active {
color: $button-info-border-color;
border-color: $button-info-border-color;
}
&.nut-button--success:not([disabled]):active {
color: $button-success-border-color;
border-color: $button-success-border-color;
}
&.nut-button--danger:not([disabled]):active {
color: $button-danger-border-color;
border-color: $button-danger-border-color;
}
&.nut-button--warning:not([disabled]):active {
color: $button-warning-border-color;
border-color: $button-warning-border-color;
}
}
}
&--large {
width: 100%;
height: $button-large-height;
font-size: $button-large-font-size;
line-height: $button-large-line-height;
}
&--normal {
padding: $button-default-padding;
font-size: $button-default-font-size;
}
&--small {
height: $button-small-height;
padding: $button-small-padding;
font-size: $button-small-font-size;
line-height: $button-small-line-height;
&.nut-button--round {
border-radius: $button-small-round-border-radius;
}
}
&--mini {
height: $button-mini-height;
padding: $button-mini-padding;
font-size: $button-mini-font-size;
line-height: $button-mini-line-height;
}
&--block {
display: block;
width: 100%;
}
&--disabled {
cursor: not-allowed;
opacity: $button-disabled-opacity;
}
&--loading {
cursor: default;
opacity: 0.9;
}
&--round {
border-radius: $button-border-radius;
}
&--square {
border-radius: 0;
}
&:not(.nut-button--hovercls) {
.nut-button--default:not([disabled]):active {
color: $button-default-color;
background: $button-default-bg-color;
background-origin: border-box;
border: $button-border-width solid $button-default-border-color;
}
.nut-button--primary:not([disabled]):active {
color: $button-primary-color;
background: $button-primary-background-color;
background-origin: border-box;
border: $button-border-width solid transparent;
}
.nut-button--info:not([disabled]):active {
color: $button-info-color;
background: $button-info-background-color;
background-origin: border-box;
border: $button-border-width solid transparent;
}
.nut-button--success:not([disabled]):active {
color: $button-success-color;
background: $button-success-background-color;
background-origin: border-box;
border: $button-border-width solid transparent;
}
.nut-button--danger:not([disabled]):active {
color: $button-danger-color;
background: $button-danger-background-color;
background-origin: border-box;
border: $button-border-width solid transparent;
}
.nut-button--warning:not([disabled]):active {
color: $button-warning-color;
background: $button-warning-background-color;
background-origin: border-box;
border: $button-border-width solid transparent;
}
.nut-button--plain:not([disabled]):active {
background: $button-plain-background-color;
background-origin: border-box;
}
}
}