/*

* # Semantic - Steps
* http://github.com/jlukic/semantic-ui/
*
*
* Copyright 2014 Contributor
* Released under the MIT license
* http://opensource.org/licenses/MIT
*
*/

/*******************************

Theme

*******************************/

@type : ‘element’; @element : ‘step’;

@import ‘../../theme.config’;

/*******************************

Step

*******************************/

.ui.steps .step {

display: inline-block;
position: relative;

margin: @verticalMargin @horizontalMargin;
padding: @verticalPadding @horizontalPadding @verticalPadding @leftPadding;
vertical-align: top;
background: @background;
color: @textColor;
box-shadow: @boxShadow;
border-radius: @borderRadius;

} .ui.steps .step:after {

position: absolute;
z-index: 2;
content: '';
top: @arrowTopOffset;
right: @arrowRightOffset;
border: medium none;
background-color: @arrowBackgroundColor;
width: @arrowSize;
height: @arrowSize;
border-bottom: 1px solid @arrowBorderColor;
border-right: 1px solid @arrowBorderColor;
transform: translateY(-50%) translateX(50%) rotate(-45deg);

}

.ui.steps .step, .ui.steps .step:after {

transition: @transition;

}

/*******************************

Content

*******************************/

/* Title */ .ui.steps .step .title {

font-family: @titleFontFamily;
font-size: @titleFontSize;
font-weight: @titleFontWeight;

}

/* Description */ .ui.steps .step .description {

font-weight: @descriptionFontWeight;
font-size: @descriptionFontSize;
color: @descriptionColor;

} .ui.steps .step .title ~ .description {

margin-top: @descriptionDistance;

}

/* Icon */ .ui.steps .step > .icon, .ui.steps .step > .icon ~ .content {

display: table-cell;
vertical-align: @iconVerticalAlign;

} .ui.steps .step > .icon {

font-size: @iconSize;
margin: 0em;
padding-right: @iconDistance;

}

/* 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;
text-align: center;
content: counters(ordered, ".");
vertical-align: @iconVerticalAlign;
padding-right: @iconDistance;
font-size: @iconSize;
counter-increment: ordered;

}

.ui.ordered.steps .step > * {

display: table-cell;
vertical-align: @iconVerticalAlign;

}

/*————–

Vertical

—————*/

.ui.vertical.steps {

overflow: visible;

} .ui.vertical.steps .step {

display: block;
border-radius: @borderRadius;
padding: @verticalPadding @horizontalPadding;

} .ui.vertical.steps .step:first-child {

padding: @verticalPadding @horizontalPadding;
border-radius: @stepsBorderRadius @stepsBorderRadius 0em 0em;

} .ui.vertical.steps .step:last-child {

border-radius: 0em 0em @stepsBorderRadius @stepsBorderRadius;

}

/* Arrow */ .ui.vertical.steps .step:after {

display: none;

}

/* Active Arrow */ .ui.vertical.steps .active.step:after {

display: block;

}

/*—————

Responsive

—————-*/

/* Mobile (Default) */ @media only screen and (max-width: (@largestMobileScreen)) {

.ui.steps {

overflow: visible;

} .ui.steps .step {

display: block;
border-radius: @borderRadius;
padding: @verticalPadding @horizontalPadding;

} .ui.steps .step:first-child {

padding: @verticalPadding @horizontalPadding;
border-radius: @stepsBorderRadius @stepsBorderRadius 0em 0em;

} .ui.steps .step:last-child {

border-radius: 0em 0em @stepsBorderRadius @stepsBorderRadius;

}

/* Arrow */ .ui.steps .step:after {

display: none;

}

}

/*******************************

Group

*******************************/

.ui.steps {

display: inline-block;
font-size: 0em;

background: @stepsBackground;
box-shadow: @stepsBoxShadow;

line-height: @lineHeight;
box-sizing: border-box;
border-radius: @stepsBorderRadius;

}

.ui.steps .step:first-child {

padding-left: @horizontalPadding;
border-radius: @stepsBorderRadius 0em 0em @stepsBorderRadius;

} .ui.steps .step:last-child {

border-radius: 0em @stepsBorderRadius @stepsBorderRadius 0em;

} .ui.steps .step:only-child {

-webkit-border-radius: @stepsBorderRadius;
-moz-border-radius: @stepsBorderRadius;
border-radius: @stepsBorderRadius;

}

.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: @hoverBackground;
color: @hoverColor;

}

/* 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: @downBackground;
color: @downColor;

}

/* Active */ .ui.steps .step.active {

cursor: auto;
background: @activeBackground;

} .ui.steps .step.active:after {

background: @activeBackground;

} .ui.steps .step.active .title {

color: @activeColor;

} .ui.ordered.steps .step.active:before, .ui.steps .active.step .icon {

color: @activeIconColor;

}

/* 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: @activeHoverBackground;
color: @activeHoverColor;

}

/* Completed */ .ui.steps .step.completed > .icon:before, .ui.ordered.steps .step.completed:before {

color: @completedColor;

}

/* Disabled */ .ui.steps .disabled.step {

cursor: auto;
background: @disabledBackground;
pointer-events: none;

} .ui.steps .disabled.step, .ui.steps .disabled.step .title, .ui.steps .disabled.step .description {

color: @disabledColor;

} .ui.steps .disabled.step:after {

background: @disabledBackground;

}

/*******************************

Variations

*******************************/

/*————–

Stackable

—————*/

/* Tablet Or Below */ @media only screen and (min-width: @computerBreakpoint) {

.ui[class*=“tablet stackable”].steps {

overflow: visible;

} .ui[class*=“tablet stackable”].steps .step {

display: block;
border-radius: @borderRadius;
padding: @verticalPadding @horizontalPadding;

} .ui[class*=“tablet stackable”].steps .step:first-child {

padding: @verticalPadding @horizontalPadding;
border-radius: @stepsBorderRadius @stepsBorderRadius 0em 0em;

} .ui[class*=“tablet stackable”].steps .step:last-child {

border-radius: 0em 0em @stepsBorderRadius @stepsBorderRadius;

} /* Arrow */ .ui[class*=“tablet stackable”].steps .step:after {

display: none;

}

}

/*————–

Fluid

—————*/

/* Fluid */ .ui.fluid.steps {

width: 100%;

}

/*————–

Attached

—————*/

/* Top */ .attached.ui.steps {

margin: @attachedTopMargin;
border-radius: @stepsBorderRadius @stepsBorderRadius 0em 0em;

} .attached.ui.steps .step:first-child {

border-radius: @stepsBorderRadius 0em 0em 0em;

} .attached.ui.steps .step:last-child {

border-radius: 0em @stepsBorderRadius 0em 0em;

}

/* Bottom */ .bottom.attached.ui.steps {

margin: @attachedBottomMargin;
border-radius: 0em 0em @stepsBorderRadius @stepsBorderRadius;

} .bottom.attached.ui.steps .step:first-child {

border-radius: 0em 0em 0em @stepsBorderRadius;

} .bottom.attached.ui.steps .step:last-child {

border-radius: 0em 0em @stepsBorderRadius 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: @small;

} .ui.step, .ui.steps .step {

font-size: @medium;

} .ui.large.step, .ui.large.steps .step {

font-size: @large;

}

.loadUIOverrides();