mirror of
https://gitee.com/baidu/amis.git
synced 2024-12-09 23:52:22 +08:00
265 lines
7.2 KiB
SCSS
265 lines
7.2 KiB
SCSS
.#{$ns}Wizard {
|
|
@include clearfix();
|
|
|
|
position: relative;
|
|
|
|
&,
|
|
&-tabs {
|
|
padding: 0;
|
|
|
|
.Badge {
|
|
display: inline-block;
|
|
width: $Wizard-badge-size;
|
|
height: $Wizard-badge-size;
|
|
font-size: $Wizard-badge-fontSize;
|
|
line-height: $Wizard-badge-size;
|
|
color: $Wizard-badge-color;
|
|
text-align: center;
|
|
white-space: nowrap;
|
|
vertical-align: middle;
|
|
background-color: $Wizard-badge-bg;
|
|
border-radius: $Wizard-badge-borderRadius; // font-weight: 700;
|
|
text-shadow: 0 px2rem(1px) 0 rgba(0, 0, 0, 0.2);
|
|
margin-right: $Wizard-badge-marginRight;
|
|
border: $Wizard-badge-border;
|
|
box-sizing: content-box;
|
|
|
|
// &--primary {
|
|
// background-color: $primary;
|
|
// }
|
|
|
|
// &--secondary {
|
|
// background-color: $secondary;
|
|
// }
|
|
|
|
// &--success {
|
|
// background-color: $success;
|
|
// }
|
|
|
|
// &--info {
|
|
// background-color: $info;
|
|
// }
|
|
|
|
// &--warning {
|
|
// background-color: $warning;
|
|
// }
|
|
|
|
// &--danger {
|
|
// background-color: $danger;
|
|
// }
|
|
|
|
// &--light {
|
|
// background-color: $light;
|
|
// }
|
|
|
|
// &--dark {
|
|
// background-color: $dark;
|
|
// }
|
|
&.is-active {
|
|
color: $white;
|
|
background-color: $Wizard-badge-onActive-backgroundColor;
|
|
}
|
|
}
|
|
|
|
ul li.active {
|
|
color: $info;
|
|
}
|
|
|
|
.#{$ns}Panel-footer > .#{$ns}Form-group,
|
|
.#{$ns}Panel-footer > .btn {
|
|
margin-left: px2rem(5px);
|
|
}
|
|
|
|
> ul.nav {
|
|
padding: 0;
|
|
margin: 0;
|
|
border: $borderWidth solid $borderColor;
|
|
|
|
li {
|
|
position: relative;
|
|
float: left;
|
|
padding: 0 px2rem(15px) 0 px2rem(25px);
|
|
margin: 0;
|
|
color: #999999;
|
|
cursor: pointer;
|
|
height: $Wizard-steps-height;
|
|
line-height: $Wizard-steps-height;
|
|
|
|
a {
|
|
border: 0 none !important;
|
|
background: transparent !important;
|
|
color: inherit;
|
|
display: inline;
|
|
padding: 0;
|
|
|
|
div {
|
|
display: inline;
|
|
}
|
|
}
|
|
|
|
&:first-child {
|
|
padding-left: px2rem(15px);
|
|
border-radius: px2rem(4px) 0 0 0;
|
|
}
|
|
|
|
&:before,
|
|
&:after {
|
|
content: '';
|
|
position: absolute;
|
|
right: px2rem(-10px);
|
|
border: px2rem(20px) solid transparent;
|
|
border-right: 0;
|
|
border-left: px2rem(10px) solid $borderColor;
|
|
border-left-color: rgba(0, 0, 0, 0.05);
|
|
z-index: 1;
|
|
bottom: 0;
|
|
}
|
|
|
|
&:after {
|
|
right: px2rem(-9px);
|
|
border-left-color: $Wizard-steps-bg;
|
|
z-index: 2;
|
|
}
|
|
|
|
&.is-active {
|
|
color: $Wizard-steps-li-onActive-color;
|
|
background: #fff;
|
|
}
|
|
|
|
&.is-active:after {
|
|
border-left-color: #fff;
|
|
}
|
|
}
|
|
|
|
// .Badge {
|
|
// margin-right: px2rem(4px);
|
|
// }
|
|
}
|
|
}
|
|
|
|
&-steps {
|
|
font-size: $fontSizeBase;
|
|
padding: $Wizard-steps-padding;
|
|
background-color: $Wizard-steps-bg;
|
|
border-bottom: $Wizard-steps-borderWidth solid $borderColor;
|
|
text-align: $Wizard-steps-textAlign;
|
|
@include clearfix();
|
|
|
|
ul {
|
|
display: $Wizard-steps-ulDisplay;
|
|
padding: 0;
|
|
margin: 0;
|
|
list-style: none outside none;
|
|
|
|
li {
|
|
position: relative;
|
|
float: left;
|
|
padding: 0 px2rem(15px) 0 px2rem(25px);
|
|
margin: 0;
|
|
color: #999999;
|
|
cursor: default;
|
|
height: $Wizard-steps-height;
|
|
line-height: $Wizard-steps-height;
|
|
|
|
&:first-child {
|
|
padding-left: px2rem(15px);
|
|
border-radius: px2rem(4px) 0 0 0;
|
|
}
|
|
|
|
&:before,
|
|
&:after {
|
|
font-family: $Wizard-steps-liVender;
|
|
content: $Wizard-steps-liAfterContent;
|
|
position: absolute;
|
|
bottom: 0;
|
|
right: px2rem(-10px);
|
|
border: $Wizard-steps-liAfterBorder;
|
|
border-right: 0;
|
|
border-left: px2rem(10px) solid $borderColor;
|
|
border-left-color: rgba(0, 0, 0, 0.05);
|
|
z-index: 2;
|
|
}
|
|
|
|
&:after {
|
|
right: px2rem(-9px);
|
|
border-left-color: $Wizard-steps-bg;
|
|
z-index: 2;
|
|
}
|
|
|
|
&.is-active {
|
|
color: $Wizard-steps-li-onActive-color;
|
|
background: $Wizard-steps-li-onActive-bg;
|
|
}
|
|
|
|
&.is-active:after {
|
|
border-left-color: $Wizard-steps-li-onActive-arrow-bg;
|
|
}
|
|
|
|
&.is-complete,
|
|
&.is-complete:hover {
|
|
color: $Wizard-steps-li-onActive-color;
|
|
cursor: pointer;
|
|
background: $Wizard-steps-bg--isComplete;
|
|
}
|
|
|
|
&.is-complete:after {
|
|
border-left-color: #f1f5f9;
|
|
}
|
|
}
|
|
|
|
// .Badge {
|
|
// margin-right: px2rem(4px);
|
|
// }
|
|
}
|
|
}
|
|
|
|
&-stepContent {
|
|
padding: $Wizard-stepsContent-padding;
|
|
|
|
& .Step-pane {
|
|
display: none;
|
|
|
|
&.is-active {
|
|
display: inherit;
|
|
}
|
|
}
|
|
}
|
|
|
|
&--vertical {
|
|
float: left;
|
|
border-bottom: none;
|
|
margin-bottom: px2rem(30px); // padding: 0;
|
|
|
|
&.#{$ns}Wizard-steps {
|
|
height: auto;
|
|
}
|
|
|
|
& + .#{$ns}Wizard-stepContent {
|
|
zoom: 1;
|
|
overflow: hidden;
|
|
padding-left: px2rem(40px);
|
|
}
|
|
|
|
& li {
|
|
background-color: $Wizard-steps-bg;
|
|
}
|
|
|
|
& ul li {
|
|
height: px2rem(40px);
|
|
line-height: px2rem(40px);
|
|
position: relative;
|
|
float: none;
|
|
border-bottom: $borderWidth solid $borderColor;
|
|
padding-left: px2rem(15px); // &:before,
|
|
// &:after {
|
|
// border: px2rem(20px) solid transparent;
|
|
// content: '';
|
|
// }
|
|
}
|
|
|
|
& + .#{$ns}Wizard-stepContent + .#{$ns}Panel-footer {
|
|
clear: both;
|
|
}
|
|
}
|
|
}
|