#128 add isSubmitting class and simplify .btn[disabled] style
This commit is contained in:
parent
0d7d8e3f59
commit
b54eef74e8
1 changed files with 13 additions and 4 deletions
|
|
@ -30,14 +30,12 @@
|
|||
|
||||
.btn[disabled] {
|
||||
cursor: not-allowed;
|
||||
--btn-background: var(--color-black-10);
|
||||
--btn-color: var(--color-black-20) !important;
|
||||
--icon-color: var(--color-black-20) !important;
|
||||
opacity: .6;
|
||||
}
|
||||
.btn--white[disabled] {
|
||||
--btn-background: var(--color-white);
|
||||
--btn-color: var(--color-grey-700) !important;
|
||||
opacity: .5;
|
||||
opacity: .6;
|
||||
}
|
||||
|
||||
.btn.active,
|
||||
|
|
@ -213,3 +211,14 @@ input[type="checkbox"]:checked + .btn--primary {
|
|||
--btn-background: var(--color-dtl-15);
|
||||
--btn-color: var(--color-dtl);
|
||||
}
|
||||
|
||||
.btn.isSubmitting {
|
||||
mask-image: linear-gradient(to right, rgba(0, 0, 0, 1) 25%, rgba(0, 0, 0, .75), rgba(0, 0, 0, 1) 50%);
|
||||
mask-size: 400% 100%;
|
||||
animation: clip-slide 2s infinite cubic-bezier(0.25, 1, 0.5, 1) both;
|
||||
}
|
||||
|
||||
@keyframes clip-slide {
|
||||
from { mask-position: right }
|
||||
to { mask-position: left }
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue