studio-variable/designtopack
4
0
Fork 0
Code Issues 7 Pull requests Projects Releases Packages Wiki Activity Actions

#128 add isSubmitting class and simplify .btn[disabled] style

Browse source
This commit is contained in:
Timothée Goguely 2025-02-19 11:02:41 +01:00
parent 0d7d8e3f59
commit b54eef74e8
1 changed files with 13 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

17
src/assets/css/src/2.blocks.button.css
View file

@ -30,14 +30,12 @@
.btn[disabled] { .btn[disabled] {
cursor: not-allowed; cursor: not-allowed;
--btn-background: var(--color-black-10); opacity: .6;
--btn-color: var(--color-black-20) !important;
--icon-color: var(--color-black-20) !important;
} }
.btn--white[disabled] { .btn--white[disabled] {
--btn-background: var(--color-white); --btn-background: var(--color-white);
--btn-color: var(--color-grey-700) !important; --btn-color: var(--color-grey-700) !important;
opacity: .5; opacity: .6;
} }
.btn.active, .btn.active,
@ -213,3 +211,14 @@ input[type="checkbox"]:checked + .btn--primary {
--btn-background: var(--color-dtl-15); --btn-background: var(--color-dtl-15);
--btn-color: var(--color-dtl); --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 }
}