.ui.steps { display: inline-block; font-size: 0px; -moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.15); -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.15); box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.15); -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; } .ui.steps .step { display: inline-block; position: relative; padding: 13px 23px 13px 40px; background-color: #F3F3F3; background: -webkit-linear-gradient(top, #ffffff 0%, #efefef 100%); background: -moz-linear-gradient(top, #ffffff 0%, #efefef 100%); background: -o-linear-gradient(top, #ffffff 0%, #efefef 100%); background: -ms-linear-gradient(top, #ffffff 0%, #efefef 100%); background: linear-gradient(top, #ffffff 0%, #efefef 100%); color: #555555; text-shadow: 0px -1px 0px rgba(255, 255, 255, 0.8); } .ui.steps .step:after { position: absolute; content: ''; z-index: 2; top: 7px; right: -16px; width: 32px; height: 31px; background-color: #F3F3F3; background: -webkit-linear-gradient(left top, #ffffff 0%, #efefef 100%); background: -moz-linear-gradient(left top, #ffffff 0%, #efefef 100%); background: -o-linear-gradient(left top, #ffffff 0%, #efefef 100%); background: -ms-linear-gradient(left top, #ffffff 0%, #efefef 100%); background: linear-gradient(left top, #ffffff 0%, #efefef 100%); -moz-box-shadow: 1px -1px 1px rgba(0, 0, 0, 0.1), 1px -1px 1px rgba(255, 255, 255, 0.6); -webkit-box-shadow: 1px -1px 1px rgba(0, 0, 0, 0.1), 1px -1px 1px rgba(255, 255, 255, 0.6); box-shadow: 1px -1px 1px rgba(0, 0, 0, 0.1), 1px -1px 1px rgba(255, 255, 255, 0.6); -moz-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg); } .ui.steps .step:first-child { padding-left: 20px; -webkit-border-radius: 5px 0px 0px 5px; -moz-border-radius: 5px 0px 0px 5px; border-radius: 5px 0px 0px 5px; } .ui.steps .step:last-child { -webkit-border-radius: 0px 5px 5px 0px; -moz-border-radius: 0px 5px 5px 0px; border-radius: 0px 5px 5px 0px; } .ui.steps .step:last-child { margin-right: 0px; } .ui.steps .step:last-child:after { width: 0px !important; height: 0px !important; } /******************************* Variations *******************************/ /* Attached */ .attached.ui.steps { margin: 0px; -webkit-border-radius: 4px 4px 0px 0px; -moz-border-radius: 4px 4px 0px 0px; border-radius: 4px 4px 0px 0px; } .attached.ui.steps .step:first-child { -webkit-border-radius: 4px 0px 0px 0px; -moz-border-radius: 4px 0px 0px 0px; border-radius: 4px 0px 0px 0px; } .attached.ui.steps .step:last-child { -webkit-border-radius: 0px 4px 0px 0px; -moz-border-radius: 0px 4px 0px 0px; border-radius: 0px 4px 0px 0px; } /* Bottom Side */ .bottom.attached.ui.steps { margin-top: -1px; -webkit-border-radius: 0px 0px 4px 4px; -moz-border-radius: 0px 0px 4px 4px; border-radius: 0px 0px 4px 4px; } .bottom.attached.ui.steps .step:first-child { -webkit-border-radius: 0px 0px 0px 4px; -moz-border-radius: 0px 0px 0px 4px; border-radius: 0px 0px 0px 4px; } .bottom.attached.ui.steps .step:last-child { -webkit-border-radius: 0px 0px 4px 0px; -moz-border-radius: 0px 0px 4px 0px; border-radius: 0px 0px 4px 0px; } /* Fluid */ .ui.steps.fluid, .ui.steps.fluid > .step { width: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; } .ui.steps.two.fluid > .step { width: 50%; } .ui.steps.three.fluid > .step { width: 33.333%; } .ui.steps.four.fluid > .step { width: 25%; } .ui.steps.five.fluid > .step { width: 20%; } .ui.steps.six.fluid > .step { width: 16.666%; } .ui.steps.seven.fluid > .step { width: 14.285%; } .ui.steps.eight.fluid > .step { width: 12.500%; } /******************************* Sizes *******************************/ .ui.steps .step { font-size: 13px; font-weight: bold; } /******************************* States *******************************/ /* Hover */ .ui.steps .hover.step { cursor: pointer; background: -webkit-linear-gradient(top, #ffffff 0%, #f0f0f0 100%); background: -moz-linear-gradient(top, #ffffff 0%, #f0f0f0 100%); background: -o-linear-gradient(top, #ffffff 0%, #f0f0f0 100%); background: -ms-linear-gradient(top, #ffffff 0%, #f0f0f0 100%); background: linear-gradient(top, #ffffff 0%, #f0f0f0 100%); -moz-box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2); -webkit-box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2); box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2); } .ui.steps .hover.step:after { cursor: pointer; background: -webkit-linear-gradient(top left, #ffffff 0%, #f0f0f0 100%); background: -moz-linear-gradient(top left, #ffffff 0%, #f0f0f0 100%); background: -o-linear-gradient(top left, #ffffff 0%, #f0f0f0 100%); background: -ms-linear-gradient(top left, #ffffff 0%, #f0f0f0 100%); background: linear-gradient(top left, #ffffff 0%, #f0f0f0 100%); -moz-box-shadow: 2px -2px 1px rgba(0, 0, 0, 0.2); -webkit-box-shadow: 2px -2px 1px rgba(0, 0, 0, 0.2); box-shadow: 2px -2px 1px rgba(0, 0, 0, 0.2); } .ui.steps .hover.step:before { position: absolute; top: 7px; left: -15px; width: 32px; height: 31px; content: ''; background-color: transparent; background-image: none; -moz-box-shadow: -1px 1px 1px 0px rgba(0, 0, 0, 0.1) inset; -webkit-box-shadow: -1px 1px 1px 0px rgba(0, 0, 0, 0.1) inset; box-shadow: -1px 1px 1px 0px rgba(0, 0, 0, 0.1) inset; -moz-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg); z-index: 2; } .ui.steps .hover:first-child:before { width: 0px; height: 0px; } /* Down */ .ui.steps .down.step { background: -webkit-linear-gradient(top, #f0f0f0 0%, #ffffff 100%); background: -moz-linear-gradient(top, #f0f0f0 0%, #ffffff 100%); background: -o-linear-gradient(top, #f0f0f0 0%, #ffffff 100%); background: -ms-linear-gradient(top, #f0f0f0 0%, #ffffff 100%); background: linear-gradient(top, #f0f0f0 0%, #ffffff 100%); } .ui.steps .down.step:after { background: -webkit-linear-gradient(top left, #f0f0f0 0%, #ffffff 100%); background: -moz-linear-gradient(top left, #f0f0f0 0%, #ffffff 100%); background: -o-linear-gradient(top left, #f0f0f0 0%, #ffffff 100%); background: -ms-linear-gradient(top left, #f0f0f0 0%, #ffffff 100%); background: linear-gradient(top left, #f0f0f0 0%, #ffffff 100%); } /* Active */ .ui.steps .active.step { cursor: auto; background-color: #009FDA; background: -webkit-linear-gradient(top, #009fda 0%, #00b3f5 100%); background: -moz-linear-gradient(top, #009fda 0%, #00b3f5 100%); background: -o-linear-gradient(top, #009fda 0%, #00b3f5 100%); background: -ms-linear-gradient(top, #009fda 0%, #00b3f5 100%); background: linear-gradient(top, #009fda 0%, #00b3f5 100%); color: #FFFFFF; text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.3); -moz-box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.35) inset; -webkit-box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.35) inset; box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.35) inset; } .ui.steps .active.step:before { position: absolute; top: 7px; left: -16px; content: ''; width: 32px; height: 31px; background-color: transparent; background-image: none; -moz-box-shadow: 2px -2px 1px rgba(0, 0, 0, 0.25); -webkit-box-shadow: 2px -2px 1px rgba(0, 0, 0, 0.25); box-shadow: 2px -2px 1px rgba(0, 0, 0, 0.25); -moz-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg); } .ui.steps .active.step:first-child:before { width: 0px; height: 0px; } .ui.steps .active.step:after { background-color: #009FDA; background: -webkit-linear-gradient(left top, #009fda 0%, #00b3f5 100%); background: -moz-linear-gradient(left top, #009fda 0%, #00b3f5 100%); background: -o-linear-gradient(left top, #009fda 0%, #00b3f5 100%); background: -ms-linear-gradient(left top, #009fda 0%, #00b3f5 100%); background: linear-gradient(left top, #009fda 0%, #00b3f5 100%); -moz-box-shadow: -2px 2px 2px rgba(0, 0, 0, 0.15) inset; -webkit-box-shadow: -2px 2px 2px rgba(0, 0, 0, 0.15) inset; box-shadow: -2px 2px 2px rgba(0, 0, 0, 0.15) inset; } /* Disabled */ .ui.steps .disabled.step { color: #BBBBBB; }