83 lines
1.7 KiB
SCSS
83 lines
1.7 KiB
SCSS
@import '../common/abstracts/variable';
|
|
@import '../common/abstracts/mixin';
|
|
|
|
@include b(slide-verify) {
|
|
position: relative;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
overflow: hidden;
|
|
user-select: none;
|
|
|
|
@include when(disabled) {
|
|
cursor: not-allowed;
|
|
|
|
& {
|
|
opacity: 0.8;
|
|
|
|
@include e(button) {
|
|
color: $-slide-verify-disabled-color;
|
|
cursor: not-allowed;
|
|
}
|
|
}
|
|
}
|
|
|
|
@include e(text-inner) {
|
|
color: $-slide-verify-text-color;
|
|
font-size: $-slide-verify-text-size;
|
|
transition: color 0.3s ease;
|
|
}
|
|
|
|
@include e(track) {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
width: 0;
|
|
height: 100%;
|
|
transition: background 0.2s ease;
|
|
overflow: hidden;
|
|
}
|
|
|
|
@include e(track-text) {
|
|
position: absolute;
|
|
left: 0;
|
|
height: 100%;
|
|
min-width: $-slide-verify-track-width;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
user-select: none;
|
|
pointer-events: none;
|
|
|
|
@include m(success) {
|
|
color: $-slide-verify-success-text-color;
|
|
}
|
|
}
|
|
|
|
@include e(button) {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: $-slide-verify-button-bg;
|
|
box-shadow: 0 2px 8px $-slide-verify-button-shadow;
|
|
color: $-slide-verify-button-color;
|
|
cursor: grab;
|
|
will-change: transform;
|
|
}
|
|
|
|
// 按钮图标
|
|
@include e(button-icon) {
|
|
@include m(success) {
|
|
width: calc($-slide-verify-button-size * 0.5);
|
|
height: calc($-slide-verify-button-size * 0.5);
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
}
|
|
}
|