amis-rpc-design/libs/amis/packages/amis-ui/scss/components/_wizard.scss
2023-10-07 19:42:30 +08:00

288 lines
6.5 KiB
SCSS

.#{$ns}Wizard {
@include clearfix();
position: relative;
&,
&-tabs {
padding: 0;
.#{$ns}Badge {
display: inline-block;
width: var(--Wizard-badge-size);
height: var(--Wizard-badge-size);
font-size: var(--Wizard-badge-fontSize);
line-height: var(--Wizard-badge-size);
color: var(--Wizard-badge-color);
text-align: center;
white-space: nowrap;
vertical-align: middle;
background: var(--Wizard-badge-bg);
border-radius: var(--Wizard-badge-borderRadius); // font-weight: 700;
text-shadow: 0 px2rem(1px) 0 rgba(0, 0, 0, 0.2);
margin-right: var(--Wizard-badge-marginRight);
border: var(--Wizard-badge-border);
box-sizing: content-box;
// &--primary {
// background: var(--primary);
// }
// &--secondary {
// background: var(--secondary);
// }
// &--success {
// background: var(--success);
// }
// &--info {
// background: var(--info);
// }
// &--warning {
// background: var(--warning);
// }
// &--danger {
// background: var(--danger);
// }
// &--light {
// background: var(--light);
// }
// &--dark {
// background: var(--dark);
// }
&.is-active {
color: var(--Wizard-badge-onActive-color);
background: var(--Wizard-badge-onActive-backgroundColor);
}
&.is-complete {
color: var(--Wizard-badge-onComplete-color);
background: var(--Wizard-badge-onComplete-backgroundColor);
}
}
ul li.active {
color: var(--info);
}
.#{$ns}Panel-footer > .#{$ns}Form-group,
.#{$ns}Panel-footer > .btn {
margin-left: var(--gap-xs);
}
> ul.nav {
padding: 0;
margin: 0;
border: var(--borderWidth) solid var(--borderColor);
li {
position: relative;
float: left;
padding: 0 var(--gap-md) 0 px2rem(25px);
margin: 0;
color: var(--Wizard-step-color);
cursor: pointer;
height: var(--Wizard-steps-height);
line-height: var(--Wizard-steps-height);
a {
border: 0 none !important;
background: transparent !important;
color: inherit;
display: inline;
padding: 0;
div {
display: inline;
}
}
&:first-child {
padding-left: var(--gap-md);
border-radius: px2rem(4px) 0 0 0;
}
&:before,
&:after {
content: '';
position: absolute;
right: px2rem(-10px);
border: var(--gap-md) solid transparent;
border-right: 0;
border-left: px2rem(10px) solid var(--borderColor);
border-left-color: rgba(0, 0, 0, 0.05);
z-index: 1;
bottom: 0;
}
&:after {
right: px2rem(-9px);
border-left-color: var(--Wizard-steps-bg);
z-index: 2;
}
&.is-active {
color: var(--Wizard-steps-li-onActive-color);
background: var(--Wizard-steps-li-onActive-bg);
}
&.is-active:after {
border-left-color: #fff;
}
}
// .Badge {
// margin-right: px2rem(4px);
// }
}
}
&-steps {
font-size: var(--fontSizeBase);
padding: var(--Wizard-steps-padding);
background: var(--Wizard-steps-bg);
border-bottom: var(--Wizard-steps-borderWidth) solid var(--borderColor);
text-align: var(--Wizard-steps-textAlign);
@include clearfix();
ul {
display: var(--Wizard-steps-ulDisplay);
padding: 0;
margin: 0;
list-style: none outside none;
li {
position: relative;
float: left;
padding: 0 var(--gap-md) 0 px2rem(25px);
margin: 0;
font-size: var(--Wizard-step-fontSize);
color: var(--Wizard-step-color);
cursor: default;
height: var(--Wizard-steps-height);
line-height: var(--Wizard-steps-height);
&:first-child {
padding-left: var(--gap-md);
border-radius: px2rem(4px) 0 0 0;
}
&:before,
&:after {
font-family: var(--Wizard-steps-liVender);
content: var(--Wizard-steps-liAfterContent);
position: absolute;
bottom: 0;
right: px2rem(-10px);
z-index: 2;
color: var(--Wizard-after-color);
}
&:after {
right: px2rem(-9px);
border-left-color: var(--Wizard-steps-bg);
z-index: 2;
}
&.is-active {
color: var(--Wizard-steps-li-onActive-color);
background: var(--Wizard-steps-li-onActive-bg);
}
&.is-active:after,
&.is-complete:after,
&.is-active:before,
&.is-complete:before {
color: var(--Wizard-after-onActive-color);
border-left-color: var(--Wizard-steps-li-onActive-arrow-bg);
}
&.is-complete,
&.is-complete:hover {
color: var(--Wizard-steps-li-onActive-color);
cursor: pointer;
}
}
// .Badge {
// margin-right: px2rem(4px);
// }
}
}
&-stepContent {
padding: var(--Wizard-stepsContent-padding);
& .Step-pane {
display: none;
&.is-active {
display: inherit;
}
}
}
&-footer {
padding: var(--sizes-size-5) var(--sizes-size-7);
.#{$ns}Button {
&+.#{$ns}Button {
margin-left: var(--Panel-footerButtonMarginLeft)
}
}
}
&-fixedButtom {
position: absolute;
bottom: 0;
width: 100%;
}
&--vertical {
> .#{$ns}Wizard-step {
display: flex;
flex-direction: row;
flex-wrap: wrap;
border-bottom: none;
> .#{$ns}Wizard-steps {
height: auto;
min-width: 40px;
margin-right: 30px;
margin-bottom: px2rem(30px); // padding: 0;
background: none;
border-bottom: none;
li {
background: var(--Wizard-steps-bg);
}
ul li {
height: px2rem(40px);
line-height: px2rem(40px);
position: relative;
float: none;
border-bottom: var(--borderWidth) solid var(--borderColor);
padding-left: var(--gap-md);
&.is-active {
background: var(--Wizard-steps-li-onActive-bg);
}
}
}
> .#{$ns}Wizard-stepContent {
flex-grow: 1;
width: 0;
}
> .#{$ns}Wizard-footer {
width: 100%;
}
}
}
}