You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
10 lines
9.5 KiB
10 lines
9.5 KiB
/*!
|
|
* # Semantic UI 2.1.6 - Step
|
|
* http://github.com/semantic-org/semantic-ui/
|
|
*
|
|
*
|
|
* Copyright 2015 Contributors
|
|
* Released under the MIT license
|
|
* http://opensource.org/licenses/MIT
|
|
*
|
|
*/.ui.steps{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-box-align:stretch;-webkit-align-items:stretch;-ms-flex-align:stretch;align-items:stretch;margin:1em 0;background:#FFF;box-shadow:0 0 1px 0 rgba(0,0,0,.15);line-height:1.15384615em;border-radius:.2307em;border:1px solid rgba(0,0,0,.13)}.ui.steps:first-child{margin-top:0}.ui.steps:last-child{margin-bottom:0}.ui.steps .step{position:relative;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-flex:1;-webkit-flex:1 0 auto;-ms-flex:1 0 auto;flex:1 0 auto;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;vertical-align:middle;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;margin:0;padding:1em 2em;background:-webkit-linear-gradient(transparent,rgba(0,0,0,.07));background:linear-gradient(transparent,rgba(0,0,0,.07));color:rgba(0,0,0,.87);box-shadow:none;border-radius:0;border:none;border-right:1px solid rgba(0,0,0,.13);-webkit-transition:background-color .1s ease,opacity .1s ease,color .1s ease,box-shadow .1s ease;transition:background-color .1s ease,opacity .1s ease,color .1s ease,box-shadow .1s ease}.ui.steps .step:after{position:absolute;z-index:2;content:'';top:100%;right:50%;border:solid;background-color:#FFF;width:1.15384615em;height:1.15384615em;border-color:rgba(0,0,0,.13);border-width:0 0 1px 1px;-webkit-transition:background-color .1s ease,opacity .1s ease,color .1s ease,box-shadow .1s ease;transition:background-color .1s ease,opacity .1s ease,color .1s ease,box-shadow .1s ease;-webkit-transform:translateY(-50%) translateX(50%) rotate(-45deg);transform:translateY(-50%) translateX(50%) rotate(-45deg)}.ui.steps .step:first-child{padding-left:2em;border-radius:.2307em 0 0 .2307em}.ui.steps .step:last-child{border-radius:0 .2307em .2307em 0;border-right:none;margin-right:0}.ui.steps .step:only-child{border-radius:.2307em}.ui.steps .step .title{font-family:Arial,'Helvetica Neue',Arial,Helvetica,sans-serif;font-size:1.15384615em;font-weight:700}.ui.steps .step>.title{width:100%}.ui.steps .step .description{font-weight:400;font-size:.92307692em;color:rgba(0,0,0,.87)}.ui.steps .step>.description{width:100%}.ui.steps .step .title~.description{margin-top:.25em}.ui.steps .step>.icon{line-height:1;font-size:2.5em;margin:0 1rem 0 0}.ui.steps .step>.icon,.ui.steps .step>.icon~.content{display:block;-webkit-box-flex:0;-webkit-flex:0 1 auto;-ms-flex:0 1 auto;flex:0 1 auto;-webkit-align-self:middle;-ms-flex-item-align:middle;align-self:middle}.ui.steps .step>.icon~.content{-webkit-box-flex:1 0 auto;-webkit-flex-grow:1 0 auto;-ms-flex-positive:1 0 auto;flex-grow:1 0 auto}.ui.steps:not(.vertical) .step>.icon{width:auto}.ui.steps .link.step,.ui.steps a.step{cursor:pointer}.ui.ordered.steps{counter-reset:ordered}.ui.ordered.steps .step:before{display:block;position:static;text-align:center;content:counters(ordered,".");-webkit-align-self:middle;-ms-flex-item-align:middle;align-self:middle;margin-right:1rem;font-size:2.5em;counter-increment:ordered;font-family:inherit;font-weight:700}.ui.ordered.steps .step>*{display:block;-webkit-align-self:middle;-ms-flex-item-align:middle;align-self:middle}.ui.vertical.steps{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;overflow:visible}.ui.vertical.steps .step{-webkit-box-pack:start;-webkit-justify-content:flex-start;-ms-flex-pack:start;justify-content:flex-start;border-radius:0;padding:1em 2em;border-right:none;border-bottom:1px solid rgba(0,0,0,.13)}.ui.vertical.steps .step:first-child{padding:1em 2em;border-radius:.2307em .2307em 0 0}.ui.vertical.steps .step:last-child{border-bottom:none;border-radius:0 0 .2307em .2307em}.ui.vertical.steps .step:only-child{border-radius:.2307em}.ui.vertical.steps .step:after{top:50%;right:0;border-width:0 1px 1px 0;display:none}.ui.vertical.steps .active.step:after{display:block}.ui.vertical.steps .step:last-child:after{display:none}.ui.vertical.steps .active.step:last-child:after{display:block}@media only screen and (max-width:687px){.ui.steps{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;overflow:visible;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column}.ui.steps .step{width:100%!important;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;border-radius:0;padding:1em 2em}.ui.steps .step:first-child{padding:1em 2em;border-radius:.2307em .2307em 0 0}.ui.steps .step:last-child{border-radius:0 0 .2307em .2307em}.ui.steps .step:after{display:none!important}.ui.steps .step .content{text-align:center}.ui.ordered.steps .step:before,.ui.steps .step>.icon{margin:0 0 1rem}}.ui.steps .link.step:hover,.ui.steps .link.step:hover::after,.ui.steps a.step:hover,.ui.steps a.step:hover::after{background:#F9FAFB;color:rgba(0,0,0,.8)}.ui.steps .link.step:active,.ui.steps .link.step:active::after,.ui.steps a.step:active,.ui.steps a.step:active::after{background:#F3F4F5;color:rgba(0,0,0,.9)}.ui.steps .step.active{cursor:auto;background:#FFF}.ui.steps .step.active:after{background:#FFF}.ui.steps .step.active .title{color:#4078C0}.ui.ordered.steps .step.active:before,.ui.steps .active.step .icon{color:rgba(0,0,0,.85)}.ui.steps .active.step:after{display:block}.ui.steps .step:last-child:after{display:none}.ui.steps .active.step:last-child:after{display:block}.ui.steps .link.active.step:hover,.ui.steps .link.active.step:hover::after,.ui.steps a.active.step:hover,.ui.steps a.active.step:hover::after{cursor:pointer;background:#DCDDDE;color:rgba(0,0,0,.87)}.ui.ordered.steps .step.completed:before,.ui.steps .step.completed>.icon:before{color:#78CB5B}.ui.steps .disabled.step{cursor:auto;background:-webkit-linear-gradient(transparent,rgba(0,0,0,.07));background:linear-gradient(transparent,rgba(0,0,0,.07));pointer-events:none}.ui.steps .disabled.step,.ui.steps .disabled.step .description,.ui.steps .disabled.step .title{color:rgba(40,40,40,.3)}.ui.steps .disabled.step:after{background:-webkit-linear-gradient(transparent,rgba(0,0,0,.07));background:linear-gradient(transparent,rgba(0,0,0,.07))}@media only screen and (max-width:687px){.ui[class*="tablet stackable"].steps{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;overflow:visible;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column}.ui[class*="tablet stackable"].steps .step{-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;border-radius:0;padding:1em 2em}.ui[class*="tablet stackable"].steps .step:first-child{padding:1em 2em;border-radius:.2307em .2307em 0 0}.ui[class*="tablet stackable"].steps .step:last-child{border-radius:0 0 .2307em .2307em}.ui[class*="tablet stackable"].steps .step:after{display:none!important}.ui[class*="tablet stackable"].steps .step .content{text-align:center}.ui[class*="tablet stackable"].ordered.steps .step:before,.ui[class*="tablet stackable"].steps .step>.icon{margin:0 0 1rem}}.ui.fluid.steps{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;width:100%}.ui.attached.steps{width:calc(100% + 2px)!important;margin:0 -1px -1px;max-width:calc(100% + 2px);border-radius:.2307em .2307em 0 0}.ui.attached.steps .step:first-child{border-radius:.2307em 0 0}.ui.attached.steps .step:last-child{border-radius:0 .2307em 0 0}.ui.bottom.attached.steps{margin:-1px -1px 0;border-radius:0 0 .2307em .2307em}.ui.bottom.attached.steps .step:first-child{border-radius:0 0 0 .2307em}.ui.bottom.attached.steps .step:last-child{border-radius:0 0 .2307em}.ui.eight.steps,.ui.five.steps,.ui.four.steps,.ui.one.steps,.ui.seven.steps,.ui.six.steps,.ui.three.steps,.ui.two.steps{width:100%}.ui.eight.steps>.step,.ui.five.steps>.step,.ui.four.steps>.step,.ui.one.steps>.step,.ui.seven.steps>.step,.ui.six.steps>.step,.ui.three.steps>.step,.ui.two.steps>.step{-webkit-flex-wrap:nowrap;-ms-flex-wrap:nowrap;flex-wrap:nowrap}.ui.one.steps>.step{width:100%}.ui.two.steps>.step{width:50%}.ui.three.steps>.step{width:33.333%}.ui.four.steps>.step{width:25%}.ui.five.steps>.step{width:20%}.ui.six.steps>.step{width:16.666%}.ui.seven.steps>.step{width:14.285%}.ui.eight.steps>.step{width:12.5%}.ui.small.step,.ui.small.steps .step{font-size:.92307692rem}.ui.step,.ui.steps .step{font-size:1rem}.ui.large.step,.ui.large.steps .step{font-size:1.15384615rem}.ui.steps .step:after{display:none}.ui.steps .completed.step:before{opacity:.5}.ui.steps .step.active:after{display:block;border:none;border-bottom:1px solid rgba(0,0,0,.2);border-left:1px solid rgba(0,0,0,.2)}.ui.vertical.steps .step.active:after{display:block;border:none;top:50%;right:0;border-left:none;border-bottom:1px solid rgba(0,0,0,.2);border-right:1px solid rgba(0,0,0,.2)}
|