amis2/scss/components/_wizard.scss

265 lines
7.2 KiB
SCSS
Raw Normal View History

2019-04-30 11:11:25 +08:00
.#{$ns}Wizard {
@include clearfix();
position: relative;
2019-04-30 11:11:25 +08:00
&,
&-tabs {
padding: 0;
2019-04-30 11:11:25 +08:00
.Badge {
2019-08-12 21:14:33 +08:00
display: inline-block;
2019-04-30 11:11:25 +08:00
width: $Wizard-badge-size;
height: $Wizard-badge-size;
font-size: $Wizard-badge-fontSize;
line-height: $Wizard-badge-size;
2019-08-12 21:14:33 +08:00
color: $Wizard-badge-color;
2019-04-30 11:11:25 +08:00
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);
2019-04-30 11:11:25 +08:00
margin-right: $Wizard-badge-marginRight;
2019-08-12 21:14:33 +08:00
border: $Wizard-badge-border;
box-sizing: content-box;
2019-08-12 21:14:33 +08:00
// &--primary {
// background-color: $primary;
// }
2019-08-12 21:14:33 +08:00
// &--secondary {
// background-color: $secondary;
// }
2019-08-12 21:14:33 +08:00
// &--success {
// background-color: $success;
// }
2019-08-12 21:14:33 +08:00
// &--info {
// background-color: $info;
// }
2019-08-12 21:14:33 +08:00
// &--warning {
// background-color: $warning;
// }
2019-08-12 21:14:33 +08:00
// &--danger {
// background-color: $danger;
// }
2019-08-12 21:14:33 +08:00
// &--light {
// background-color: $light;
// }
2019-08-12 21:14:33 +08:00
// &--dark {
// background-color: $dark;
// }
&.is-active {
color: $white;
background-color: $Wizard-badge-onActive-backgroundColor;
2019-04-30 11:11:25 +08:00
}
}
2019-04-30 11:11:25 +08:00
ul li.active {
color: $info;
}
2019-09-09 00:53:39 +08:00
.#{$ns}Panel-footer > .#{$ns}Form-group,
.#{$ns}Panel-footer > .btn {
2019-04-30 11:11:25 +08:00
margin-left: px2rem(5px);
}
2019-09-09 00:53:39 +08:00
> ul.nav {
2019-04-30 11:11:25 +08:00
padding: 0;
margin: 0;
border: $borderWidth solid $borderColor;
2019-04-30 11:11:25 +08:00
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;
2019-04-30 11:11:25 +08:00
a {
border: 0 none !important;
background: transparent !important;
color: inherit;
display: inline;
padding: 0;
2019-04-30 11:11:25 +08:00
div {
display: inline;
}
}
2019-04-30 11:11:25 +08:00
&:first-child {
padding-left: px2rem(15px);
border-radius: px2rem(4px) 0 0 0;
}
2019-04-30 11:11:25 +08:00
&:before,
&:after {
2019-09-09 00:53:39 +08:00
content: '';
2019-04-30 11:11:25 +08:00
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;
}
2019-04-30 11:11:25 +08:00
&:after {
right: px2rem(-9px);
border-left-color: $Wizard-steps-bg;
z-index: 2;
}
2019-04-30 11:11:25 +08:00
&.is-active {
2019-08-12 21:14:33 +08:00
color: $Wizard-steps-li-onActive-color;
2019-04-30 11:11:25 +08:00
background: #fff;
}
2019-04-30 11:11:25 +08:00
&.is-active:after {
border-left-color: #fff;
}
}
// .Badge {
2019-04-30 11:11:25 +08:00
// margin-right: px2rem(4px);
// }
}
}
2019-04-30 11:11:25 +08:00
&-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;
2019-09-16 10:40:58 +08:00
@include clearfix();
2019-04-30 11:11:25 +08:00
ul {
display: $Wizard-steps-ulDisplay;
padding: 0;
margin: 0;
list-style: none outside none;
2019-04-30 11:11:25 +08:00
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;
2019-04-30 11:11:25 +08:00
&:first-child {
padding-left: px2rem(15px);
border-radius: px2rem(4px) 0 0 0;
}
2019-04-30 11:11:25 +08:00
&: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;
}
2019-04-30 11:11:25 +08:00
&:after {
right: px2rem(-9px);
border-left-color: $Wizard-steps-bg;
z-index: 2;
}
2019-04-30 11:11:25 +08:00
&.is-active {
2019-08-12 21:14:33 +08:00
color: $Wizard-steps-li-onActive-color;
2019-09-09 00:53:39 +08:00
background: $Wizard-steps-li-onActive-bg;
2019-04-30 11:11:25 +08:00
}
2019-04-30 11:11:25 +08:00
&.is-active:after {
2019-09-09 00:53:39 +08:00
border-left-color: $Wizard-steps-li-onActive-arrow-bg;
2019-04-30 11:11:25 +08:00
}
2019-04-30 11:11:25 +08:00
&.is-complete,
&.is-complete:hover {
2019-08-12 21:14:33 +08:00
color: $Wizard-steps-li-onActive-color;
2019-04-30 11:11:25 +08:00
cursor: pointer;
background: $Wizard-steps-bg--isComplete;
}
2019-04-30 11:11:25 +08:00
&.is-complete:after {
border-left-color: #f1f5f9;
}
}
// .Badge {
2019-04-30 11:11:25 +08:00
// margin-right: px2rem(4px);
// }
}
}
2019-04-30 11:11:25 +08:00
&-stepContent {
padding: $Wizard-stepsContent-padding;
2019-04-30 11:11:25 +08:00
& .Step-pane {
display: none;
2019-04-30 11:11:25 +08:00
&.is-active {
display: inherit;
}
}
}
2019-04-30 11:11:25 +08:00
&--vertical {
float: left;
border-bottom: none;
margin-bottom: px2rem(30px); // padding: 0;
2019-04-30 11:11:25 +08:00
&.#{$ns}Wizard-steps {
height: auto;
}
2019-09-09 00:53:39 +08:00
& + .#{$ns}Wizard-stepContent {
2019-04-30 11:11:25 +08:00
zoom: 1;
overflow: hidden;
padding-left: px2rem(40px);
}
2019-04-30 11:11:25 +08:00
& li {
background-color: $Wizard-steps-bg;
}
2019-04-30 11:11:25 +08:00
& 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: '';
// }
}
2019-09-09 00:53:39 +08:00
& + .#{$ns}Wizard-stepContent + .#{$ns}Panel-footer {
2019-04-30 11:11:25 +08:00
clear: both;
}
}
2019-09-09 00:53:39 +08:00
}