/* * # Semantic UI * https://github.com/Semantic-Org/Semantic-UI * http://beta.semantic-ui.com/ * * Copyright 2014 Contributors * Released under the MIT license * http://opensource.org/licenses/MIT * */ /******************************* Step *******************************/ .ui.steps .step { display: inline-block; position: relative; margin: 0em 0em; padding: 0.8em 1.5em 0.8em 2.25em; vertical-align: top; background: #ffffff; color: rgba(0, 0, 0, 0.8); box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.15); border-radius: 0em; } .ui.steps .step:after { position: absolute; z-index: 2; content: ''; top: 50%; right: 0em; border: medium none; background-color: #ffffff; width: 1.5em; height: 1.5em; border-bottom: 1px solid rgba(0, 0, 0, 0.1); border-right: 1px solid rgba(0, 0, 0, 0.1); -webkit-transform: translateY(-50%) translateX(50%) rotate(-45deg); -ms-transform: translateY(-50%) translateX(50%) rotate(-45deg); transform: translateY(-50%) translateX(50%) rotate(-45deg); } .ui.steps .step, .ui.steps .step:after { -webkit-transition: background-color 0.1s ease, opacity 0.1s ease, color 0.1s ease, box-shadow 0.1s ease; transition: background-color 0.1s ease, opacity 0.1s ease, color 0.1s ease, box-shadow 0.1s ease; } /******************************* Content *******************************/ /* Title */ .ui.steps .step .title { font-family: 'Lato', 'Helvetica Neue', Arial, Helvetica, sans-serif; font-size: 1.1em; font-weight: bold; } /* Description */ .ui.steps .step .description { font-weight: normal; font-size: 0.9em; color: rgba(0, 0, 0, 0.8); } .ui.steps .step .title ~ .description { margin-top: 0.1em; } /* Icon */ .ui.steps .step > .icon, .ui.steps .step > .icon ~ .content { display: table-cell; vertical-align: middle; } .ui.steps .step > .icon { font-size: 2em; margin: 0em; padding-right: 0.6em; } /* Link */ .ui.steps .link.step, .ui.steps a.step { cursor: pointer; } /******************************* Types *******************************/ /*-------------- Ordered ---------------*/ .ui.ordered.steps { counter-reset: ordered; } .ui.ordered.steps .step:before { display: table-cell; position: static; padding-right: 0.6em; font-size: 2em; counter-increment: ordered; content: counters(ordered, "."); } .ui.ordered.steps .step > * { display: table-cell; vertical-align: middle; } /*-------------- Vertical ---------------*/ .ui.vertical.steps { overflow: visible; } .ui.vertical.steps .step { display: block; border-radius: 0em; padding: 0.8em 1.5em; } .ui.vertical.steps .step:first-child { padding: 0.8em 1.5em; border-radius: 0.2857rem 0.2857rem 0em 0em; } .ui.vertical.steps .step:last-child { border-radius: 0em 0em 0.2857rem 0.2857rem; } /* Arrow */ .ui.vertical.steps .step:after { display: none; } /* Active Arrow */ .ui.vertical.steps .active.step:after { display: block; } /******************************* Group *******************************/ .ui.steps { display: inline-block; font-size: 0em; background: ''; box-shadow: ''; line-height: 1.2; box-sizing: border-box; border-radius: 0.2857rem; } .ui.steps .step:first-child { padding-left: 1.5em; border-radius: 0.2857rem 0em 0em 0.2857rem; } .ui.steps .step:last-child { border-radius: 0em 0.2857rem 0.2857rem 0em; } .ui.steps .step:only-child { border-radius: 0.2857rem; } .ui.steps .step:last-child { margin-right: 0em; } .ui.steps .step:last-child:after { display: none; } /******************************* States *******************************/ /* Link Hover */ .ui.steps .link.step:hover::after, .ui.steps .link.step:hover, .ui.steps a.step:hover::after, .ui.steps a.step:hover { background: #fafafa; color: rgba(0, 0, 0, 0.8); } /* Link Down */ .ui.steps .link.step:active::after, .ui.steps .link.step:active, .ui.steps a.step:active::after, .ui.steps a.step:active { background: #f0f0f0; color: rgba(0, 0, 0, 0.8); } /* Active */ .ui.steps .step.active { cursor: auto; background: #f0f0f0; } .ui.steps .step.active:after { background: #f0f0f0; } .ui.steps .step.active .title { color: #009fda; } .ui.ordered.steps .step.active:before, .ui.steps .active.step .icon { color: rgba(0, 0, 0, 0.85); } /* Active Hover */ .ui.steps .link.active.step:hover::after, .ui.steps .link.active.step:hover, .ui.steps a.active.step:hover::after, .ui.steps a.active.step:hover { cursor: pointer; background: #ececec; color: rgba(0, 0, 0, 0.8); } /* Completed */ .ui.steps .step.completed > .icon:before, .ui.ordered.steps .step.completed:before { color: #5bbd72; } /* Disabled */ .ui.steps .disabled.step { cursor: auto; background: #ffffff; pointer-events: none; } .ui.steps .disabled.step, .ui.steps .disabled.step .title, .ui.steps .disabled.step .description { color: rgba(40, 40, 40, 0.3); } .ui.steps .disabled.step:after { background: #ffffff; } /******************************* Variations *******************************/ /* Fluid */ .ui.fluid.steps { width: 100%; } /* Attached */ .attached.ui.steps { margin: 0em; border-radius: 0.2857rem 0.2857rem 0em 0em; } .attached.ui.steps .step:first-child { border-radius: 0.2857rem 0em 0em 0em; } .attached.ui.steps .step:last-child { border-radius: 0em 0.2857rem 0em 0em; } /* Bottom Side */ .bottom.attached.ui.steps { margin-top: -1px; border-radius: 0em 0em 0.2857rem 0.2857rem; } .bottom.attached.ui.steps .step:first-child { border-radius: 0em 0em 0em 0.2857rem; } .bottom.attached.ui.steps .step:last-child { border-radius: 0em 0em 0.2857rem 0em; } /* Evenly divided */ .ui.one.steps, .ui.two.steps, .ui.three.steps, .ui.four.steps, .ui.five.steps, .ui.six.steps, .ui.seven.steps, .ui.eight.steps { display: block; } .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.500%; } /******************************* Sizes *******************************/ .ui.small.step, .ui.small.steps .step { font-size: 0.9rem; } .ui.step, .ui.steps .step { font-size: 1rem; } .ui.large.step, .ui.large.steps .step { font-size: 1.1rem; } /******************************* Theme Overrides *******************************/