fomantic-ui 2.9.4-beta.1 → 2.9.4-beta.100

package/src/definitions/elements/step.less

@@ -21,11 +21,15 @@
 
 @import (multiple) "../../theme.config";
 
+@notCircular: if(@variationStepCircular, e(":not(.circular)"));
+@notVertical: if(@variationStepVertical, e(":not(.vertical)"));
+@notUnstackable: if(@variationStepUnstackable, e(":not(.unstackable)"));
+
 /*******************************
             Plural
 *******************************/
 
-.ui.steps {
+.ui.steps@{notCircular} {
     display: inline-flex;
     flex-direction: row;
     align-items: stretch;
@@ -36,7 +40,7 @@
     border-radius: @stepsBorderRadius;
     border: @stepsBorder;
 }
-.ui.steps:not(.unstackable) {
+.ui.steps@{notUnstackable} {
     flex-wrap: wrap;
 }
 
@@ -54,7 +58,7 @@
            Singular
 *******************************/
 
-.ui.steps .step {
+.ui.steps@{notCircular} .step {
     position: relative;
     display: flex;
     flex: 1 0 auto;
@@ -74,7 +78,7 @@
 }
 
 /* Arrow */
-.ui.steps .step::after {
+.ui.steps@{notCircular} .step::after {
     display: none;
     position: absolute;
     z-index: 2;
@@ -92,20 +96,20 @@
 }
 
 /* First Step */
-.ui.steps .step:first-child {
+.ui.steps@{notCircular} .step:first-child {
     padding-left: @horizontalPadding;
     border-radius: @stepsBorderRadius 0 0 @stepsBorderRadius;
 }
 
 /* Last Step */
-.ui.steps .step:last-child {
+.ui.steps@{notCircular} .step:last-child {
     border-radius: 0 @stepsBorderRadius @stepsBorderRadius 0;
     border-right: none;
     margin-right: 0;
 }
 
 /* Only Step */
-.ui.steps .step:only-child {
+.ui.steps@{notCircular} .step:only-child {
     border-radius: @stepsBorderRadius;
 }
 
@@ -118,6 +122,7 @@
     font-family: @titleFontFamily;
     font-size: @titleFontSize;
     font-weight: @titleFontWeight;
+    line-height: @lineHeight;
 }
 .ui.steps .step > .title {
     width: 100%;
@@ -128,6 +133,7 @@
     font-weight: @descriptionFontWeight;
     font-size: @descriptionFontSize;
     color: @descriptionColor;
+    line-height: @lineHeight;
 }
 .ui.steps .step > .description {
     width: 100%;
@@ -150,7 +156,7 @@
 }
 
 /* Horizontal Icon */
-.ui.steps:not(.vertical) .step > i.icon {
+.ui.steps@{notVertical} .step > i.icon {
     width: auto;
 }
 
@@ -164,6 +170,133 @@
             Types
 *******************************/
 
+& when (@variationStepCircular) {
+    .ui.circular.steps {
+        border: 0;
+        border-radius: 0;
+        box-shadow: none;
+
+        &@{notVertical} {
+            background: transparent;
+            border: 0;
+            border-radius: 0;
+            box-shadow: none;
+            position: relative;
+            display: flex;
+            padding: @circularStepsMargin;
+            margin: @circularStepsPadding;
+
+            & .step {
+                background: @circularStepColor;
+                cursor: default;
+                height: @circularStepBorderWidth;
+                display: flex;
+                flex-wrap: wrap;
+                align-items: center;
+                flex: 1;
+                position: relative;
+                margin-left: @circularStepRingSize;
+
+                &::before {
+                    left: -@circularStepRingSize;
+                }
+                &::after {
+                    left: @circularStepIconDistance;
+                }
+
+                &.link::before,
+                &.link::after {
+                    cursor: pointer;
+                }
+                &.completed {
+                    background: @circularStepCompletedBackground;
+                }
+                &.completed::after {
+                    left: @circularStepCompletedIconDistance;
+                }
+                &:last-child {
+                    flex: 0;
+                }
+                & .content {
+                    margin-top: @circularStepContentMarginTop;
+                    padding: @circularStepContentPadding;
+                    &.center.aligned {
+                        margin-top: @circularStepContentCenterAlignedMarginTop;
+                        & .title {
+                            padding: @circularStepContentPadding;
+                            margin-left: @circularStepContentCenterAlignedMarginLeft;
+                            background: @circularStepContentCenterAlignedBackground;
+                        }
+                    }
+                    &.bottom.aligned {
+                        margin-top: @circularStepContentBottomAlignedMarginTop;
+                    }
+                    &:not(.aligned) .title + .description {
+                        margin-top: @circularStepContentDescriptionDistance;
+                    }
+                }
+            }
+        }
+
+        & .step {
+            color: inherit;
+
+            &::before {
+                content: "";
+                border-radius: 50%;
+                border: @circularStepBorder;
+                height: @circularStepRingSize;
+                width: @circularStepRingSize;
+                line-height: @circularStepRingSize;
+                position: absolute;
+            }
+            &::after {
+                content: "";
+                display: block;
+                position: absolute;
+                border-radius: 50%;
+                background: @circularStepColor;
+                height: @circularStepIconSize;
+                width: @circularStepIconSize;
+            }
+            &.active {
+                &::before {
+                    border-color: @circularStepActiveColor;
+                }
+
+                &::after {
+                    background: @circularStepActiveColor;
+                }
+                & .title {
+                    color: @circularStepActiveColor;
+                }
+            }
+            &.completed {
+                &::before {
+                    background: @circularStepCompletedBackground;
+                    border-color: @circularStepCompletedBackground;
+                }
+                &::after {
+                    background: transparent;
+                    content: "\e800";
+                    font-family: Step;
+                    color: @circularStepCompletedColor;
+                    height: auto;
+                    line-height: @circularStepCompletedIconLineHeight;
+                }
+            }
+        }
+    }
+    @supports selector(:has(.f)) {
+        .ui.circular.steps@{notVertical} .step:last-child:has(.content) {
+            flex: 1;
+        }
+        .ui.circular.steps@{notVertical} .step:last-child:has(.center.aligned.content) {
+            background: none;
+        }
+    }
+}
+
 & when (@variationStepOrdered) {
     /* --------------
          Ordered
@@ -173,17 +306,36 @@
         counter-reset: ordered;
     }
     .ui.ordered.steps .step::before {
-        display: block;
-        position: static;
         text-align: center;
         content: counter(ordered);
         align-self: @iconAlign;
-        margin-right: @iconDistance;
-        font-size: @iconSize;
         counter-increment: ordered;
         font-family: @orderedFontFamily;
         font-weight: @orderedFontWeight;
     }
+    .ui.ordered.steps@{notCircular} .step::before {
+        display: block;
+        position: static;
+        font-size: @iconSize;
+        margin-right: @iconDistance;
+    }
+
+    & when (@variationStepCircular) {
+        .ui.circular.ordered.steps .step {
+            &::before {
+                line-height: calc(@circularStepRingSize - @circularStepBorderWidth);
+            }
+            &.completed::before {
+                content: "";
+            }
+            &::after {
+                background: transparent;
+            }
+            &.active::before {
+                color: @circularStepActiveColor;
+            }
+        }
+    }
 
     .ui.ordered.steps .step > * {
         display: block;
@@ -196,53 +348,106 @@
         Vertical
     --------------- */
 
-    .ui.vertical.steps {
+    .ui.vertical.steps@{notCircular} {
         display: inline-flex;
         flex-direction: column;
         overflow: visible;
     }
-    .ui.vertical.steps .step {
+    .ui.vertical.steps@{notCircular} .step {
         justify-content: flex-start;
         border-radius: @borderRadius;
         padding: @verticalPadding @horizontalPadding;
         border-right: none;
         border-bottom: @verticalDivider;
     }
-    .ui.vertical.steps .step:first-child {
+    .ui.vertical.steps@{notCircular} .step:first-child {
         padding: @verticalPadding @horizontalPadding;
         border-radius: @stepsBorderRadius @stepsBorderRadius 0 0;
     }
-    .ui.vertical.steps .step:last-child {
+    .ui.vertical.steps@{notCircular} .step:last-child {
         border-bottom: none;
         border-radius: 0 0 @stepsBorderRadius @stepsBorderRadius;
     }
-    .ui.vertical.steps .step:only-child {
+    .ui.vertical.steps@{notCircular} .step:only-child {
         border-radius: @stepsBorderRadius;
     }
 
     /* Arrow */
-    .ui.vertical.steps .step::after {
+    .ui.vertical.steps@{notCircular} .step::after {
         top: @verticalArrowTopOffset;
         right: @verticalArrowRightOffset;
         border-width: @verticalArrowBorderWidth;
         display: @verticalArrowDisplay;
     }
-    .ui.right.vertical.steps .step::after {
+    .ui.right.vertical.steps@{notCircular} .step::after {
         border-width: @verticalLeftArrowBorderWidth;
         left: @verticalLeftArrowLeftOffset;
         right: @verticalLeftArrowRightOffset;
         transform: translateY(-50%) translateX(-50%) rotate(-45deg);
     }
 
-    .ui.vertical.steps .active.step::after {
+    .ui.vertical.steps@{notCircular} .active.step::after {
         display: @verticalActiveArrowDisplay;
     }
-    .ui.vertical.steps .step:last-child::after {
+    .ui.vertical.steps@{notCircular} .step:last-child::after {
         display: @verticalLastArrowDisplay;
     }
-    .ui.vertical.steps .active.step:last-child::after {
+    .ui.vertical.steps@{notCircular} .active.step:last-child::after {
         display: @verticalActiveLastArrowDisplay;
     }
+
+    /* Circular Step */
+    & when (@variationStepCircular) {
+        .ui.circular.vertical.steps {
+            display: inline-flex;
+            flex-flow: column wrap;
+            align-items: flex-start;
+
+            & .step {
+                position: relative;
+                width: 100%;
+
+                &::before {
+                    left: 0;
+                    top: 0;
+                }
+
+                &::after {
+                    left: @verticalCircularStepIconDistance;
+                    top: @verticalCircularStepIconDistance;
+                }
+
+                & .content {
+                    padding-left: @verticalCircularStepContentPadding;
+                }
+
+                &:not(:last-child) {
+                    padding-bottom: @verticalCircularStepPadding;
+
+                    & .content::before {
+                        content: "";
+                        position: absolute;
+                        border-left: @circularStepBorder;
+                        top: @circularStepRingSize;
+                        bottom: 0;
+                        left: @verticalCircularStepLineDistance;
+                    }
+                }
+
+                &.completed .content::before {
+                    border-color: @circularStepCompletedBackground;
+                }
+
+                &.completed::before {
+                    background: @circularStepCompletedBackground;
+                    border-color: @circularStepCompletedBackground;
+                }
+                &.completed::after {
+                    top: @verticalCircularStepCompletedIconDistance;
+                }
+            }
+        }
+    }
 }
 
 /* ---------------
@@ -251,12 +456,12 @@
 
 /* Mobile (Default) */
 @media only screen and (max-width: (@largestMobileScreen)) {
-    .ui.steps:not(.unstackable) {
+    .ui.steps@{notUnstackable}@{notCircular} {
         display: inline-flex;
         overflow: visible;
         flex-direction: column;
     }
-    .ui.steps:not(.unstackable) .step {
+    .ui.steps@{notUnstackable}@{notCircular} .step {
         width: 100% !important;
         flex-direction: column;
         border-radius: @borderRadius;
@@ -264,36 +469,36 @@
         border-right: none;
         border-bottom: @stepsBorder;
     }
-    .ui.steps:not(.unstackable) .step:first-child {
+    .ui.steps@{notUnstackable}@{notCircular} .step:first-child {
         padding: @verticalPadding @horizontalPadding;
         border-radius: @stepsBorderRadius @stepsBorderRadius 0 0;
     }
-    .ui.steps:not(.unstackable) .step:last-child {
+    .ui.steps@{notUnstackable}@{notCircular} .step:last-child {
         border-radius: 0 0 @stepsBorderRadius @stepsBorderRadius;
         border-bottom: none;
     }
 
     /* Arrow */
-    .ui.steps:not(.unstackable) .step::after {
+    .ui.steps@{notUnstackable}@{notCircular} .step::after {
         top: unset;
         bottom: -@arrowSize;
         right: 50%;
         transform: translateY(-50%) translateX(50%) rotate(45deg);
     }
     & when (@variationStepVertical) {
-        .ui.vertical.steps .active.step:last-child::after {
+        .ui.vertical.steps@{notCircular} .active.step:last-child::after {
             display: none;
         }
     }
 
     /* Content */
-    .ui.steps:not(.unstackable) .step .content {
+    .ui.steps@{notUnstackable}@{notCircular} .step .content {
         text-align: center;
     }
 
     /* Icon */
-    .ui.steps:not(.unstackable) .step > i.icon,
-    .ui.ordered.steps:not(.unstackable) .step::before {
+    .ui.steps@{notUnstackable}@{notCircular} .step > i.icon,
+    .ui.ordered.steps@{notUnstackable}@{notCircular} .step::before {
         margin: 0 0 @mobileIconDistance 0;
     }
 }
@@ -303,32 +508,32 @@
 *******************************/
 
 /* Link Hover */
-.ui.steps .link.step:hover::after,
-.ui.steps .link.step:hover,
-.ui.steps a.step:hover::after,
-.ui.steps a.step:hover {
+.ui.steps@{notCircular} .link.step:hover::after,
+.ui.steps@{notCircular} .link.step:hover,
+.ui.steps@{notCircular} a.step:hover::after,
+.ui.steps@{notCircular} 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 {
+.ui.steps@{notCircular} .link.step:active::after,
+.ui.steps@{notCircular} .link.step:active,
+.ui.steps@{notCircular} a.step:active::after,
+.ui.steps@{notCircular} a.step:active {
     background: @downBackground;
     color: @downColor;
 }
 
 /* Active */
-.ui.steps .step.active {
+.ui.steps@{notCircular} .step.active {
     cursor: auto;
     background: @activeBackground;
 }
-.ui.steps .step.active::after {
+.ui.steps@{notCircular} .step.active::after {
     background: @activeBackground;
 }
-.ui.steps .step.active .title {
+.ui.steps@{notCircular} .step.active .title {
     color: @activeColor;
 }
 .ui.ordered.steps .step.active::before,
@@ -337,24 +542,24 @@
 }
 
 /* Active Arrow */
-.ui.steps .step::after {
+.ui.steps@{notCircular} .step::after {
     display: @arrowDisplay;
 }
-.ui.steps .active.step::after {
+.ui.steps@{notCircular} .active.step::after {
     display: @activeArrowDisplay;
 }
-.ui.steps .step:last-child::after {
+.ui.steps@{notCircular} .step:last-child::after {
     display: @lastArrowDisplay;
 }
-.ui.steps .active.step:last-child::after {
+.ui.steps@{notCircular} .active.step:last-child::after {
     display: @activeLastArrowDisplay;
 }
 
 /* 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 {
+.ui.steps@{notCircular} .link.active.step:hover::after,
+.ui.steps@{notCircular} .link.active.step:hover,
+.ui.steps@{notCircular} a.active.step:hover::after,
+.ui.steps@{notCircular} a.active.step:hover {
     cursor: pointer;
     background: @activeHoverBackground;
     color: @activeHoverColor;
@@ -368,19 +573,30 @@
 
 & when (@variationStepDisabled) {
     /* Disabled */
-    .ui.steps .disabled.step {
+    .ui.steps@{notCircular} .disabled.step {
         cursor: auto;
         background: @disabledBackground;
         pointer-events: none;
     }
-    .ui.steps .disabled.step,
-    .ui.steps .disabled.step .title,
-    .ui.steps .disabled.step .description {
+    .ui.steps@{notCircular} .disabled.step,
+    .ui.steps@{notCircular} .disabled.step .title,
+    .ui.steps@{notCircular} .disabled.step .description {
         color: @disabledColor;
     }
-    .ui.steps .disabled.step::after {
+    .ui.steps@{notCircular} .disabled.step::after {
         background: @disabledBackground;
     }
+    & when (@variationStepCircular) {
+        .ui.circular.steps .disabled.step {
+            cursor: auto;
+            opacity: @circularStepDisabledItemOpacity;
+
+            &::before,
+            &::after {
+                cursor: auto;
+            }
+        }
+    }
 }
 
 /*******************************
@@ -394,31 +610,31 @@
 
     /* Tablet Or Below */
     @media only screen and (max-width: @largestTabletScreen) {
-        .ui[class*="tablet stackable"].steps {
+        .ui[class*="tablet stackable"].steps@{notCircular} {
             display: inline-flex;
             overflow: visible;
             flex-direction: column;
         }
 
         /* Steps */
-        .ui[class*="tablet stackable"].steps .step {
+        .ui[class*="tablet stackable"].steps@{notCircular} .step {
             flex-direction: column;
             border-radius: @borderRadius;
             padding: @verticalPadding @horizontalPadding;
             border-right: none;
             border-bottom: @stepsBorder;
         }
-        .ui[class*="tablet stackable"].steps .step:first-child {
+        .ui[class*="tablet stackable"].steps@{notCircular} .step:first-child {
             padding: @verticalPadding @horizontalPadding;
             border-radius: @stepsBorderRadius @stepsBorderRadius 0 0;
         }
-        .ui[class*="tablet stackable"].steps .step:last-child {
+        .ui[class*="tablet stackable"].steps@{notCircular} .step:last-child {
             border-radius: 0 0 @stepsBorderRadius @stepsBorderRadius;
             border-bottom: none;
         }
 
         /* Arrow */
-        .ui[class*="tablet stackable"].steps .step::after {
+        .ui[class*="tablet stackable"].steps@{notCircular} .step::after {
             top: unset;
             bottom: -@arrowSize;
             right: 50%;
@@ -426,7 +642,7 @@
         }
 
         /* Content */
-        .ui[class*="tablet stackable"].steps .step .content {
+        .ui[class*="tablet stackable"].steps@{notCircular} .step .content {
             text-align: center;
         }
 
@@ -456,28 +672,28 @@
     --------------- */
 
     /* Top */
-    .ui.attached.steps {
+    .ui.attached.steps@{notCircular} {
         width: @attachedWidth !important;
         margin: 0 @attachedHorizontalOffset @attachedVerticalOffset;
         max-width: @attachedWidth;
         border-radius: @stepsBorderRadius @stepsBorderRadius 0 0;
     }
-    .ui.attached.steps .step:first-child {
+    .ui.attached.steps@{notCircular} .step:first-child {
         border-radius: @stepsBorderRadius 0 0 0;
     }
-    .ui.attached.steps .step:last-child {
+    .ui.attached.steps@{notCircular} .step:last-child {
         border-radius: 0 @stepsBorderRadius 0 0;
     }
 
     /* Bottom */
-    .ui.bottom.attached.steps {
+    .ui.bottom.attached.steps@{notCircular} {
         margin: @attachedVerticalOffset @attachedHorizontalOffset 0;
         border-radius: 0 0 @stepsBorderRadius @stepsBorderRadius;
     }
-    .ui.bottom.attached.steps .step:first-child {
+    .ui.bottom.attached.steps@{notCircular} .step:first-child {
         border-radius: 0 0 0 @stepsBorderRadius;
     }
-    .ui.bottom.attached.steps .step:last-child {
+    .ui.bottom.attached.steps@{notCircular} .step:last-child {
         border-radius: 0 0 @stepsBorderRadius 0;
     }
 }
@@ -548,6 +764,12 @@
         .ui.@{value}.step {
             font-size: @s;
         }
+        & when (@variationStepCircular) {
+            .ui.@{value}.circular.steps@{notVertical} {
+                margin: @s 0;
+                padding: @s 0;
+            }
+        }
     });
 }
 
@@ -556,17 +778,17 @@
         Inverted
     --------------- */
 
-    .ui.inverted.steps {
+    .ui.inverted.steps@{notCircular} {
         border: 1px solid @solidWhiteBorderColor;
     }
 
-    .ui.inverted.steps .step {
+    .ui.inverted.steps@{notCircular} .step {
         color: @invertedTextColor;
         background: @black;
         border-color: @solidWhiteBorderColor;
     }
 
-    .ui.inverted.steps .step::after {
+    .ui.inverted.steps@{notCircular} .step::after {
         background-color: @black;
         border-color: @solidWhiteBorderColor;
     }
@@ -576,45 +798,141 @@
     }
 
     /* Active */
-    .ui.inverted.steps .step.active,
-    .ui.inverted.steps .step.active::after {
+    .ui.inverted.steps@{notCircular} .step.active,
+    .ui.inverted.steps@{notCircular} .step.active::after {
         background: @invertedActiveBackground;
     }
-    .ui.inverted.ordered.steps .step.active::before,
-    .ui.inverted.steps .active.step i.icon {
+    .ui.inverted.ordered.steps@{notCircular} .step.active::before,
+    .ui.inverted.steps@{notCircular} .active.step i.icon {
         color: @invertedSelectedTextColor;
     }
 
     & when (@variationStepDisabled) {
         /* Disabled */
-        .ui.inverted.steps .disabled.step,
-        .ui.inverted.steps .disabled.step::after {
+        .ui.inverted.steps@{notCircular} .disabled.step,
+        .ui.inverted.steps@{notCircular} .disabled.step::after {
             background: @invertedDisabledBackground;
         }
-        .ui.inverted.steps .disabled.step,
-        .ui.inverted.steps .disabled.step .title,
-        .ui.inverted.steps .disabled.step .description {
+        .ui.inverted.steps@{notCircular} .disabled.step,
+        .ui.inverted.steps@{notCircular} .disabled.step .title,
+        .ui.inverted.steps@{notCircular} .disabled.step .description {
             color: @invertedDisabledTextColor;
         }
     }
 
     /* Link Hover */
-    .ui.inverted.steps .link.step:hover::after,
-    .ui.inverted.steps .link.step:hover,
-    .ui.inverted.steps a.step:hover::after,
-    .ui.inverted.steps a.step:hover {
+    .ui.inverted.steps@{notCircular} .link.step:hover::after,
+    .ui.inverted.steps@{notCircular} .link.step:hover,
+    .ui.inverted.steps@{notCircular} a.step:hover::after,
+    .ui.inverted.steps@{notCircular} a.step:hover {
         background: @invertedHoverBackground;
         color: @invertedHoveredTextColor;
     }
 
     /* Link Down */
-    .ui.inverted.steps .link.step:active::after,
-    .ui.inverted.steps .link.step:active,
-    .ui.inverted.steps a.step:active::after,
-    .ui.inverted.steps a.step:active {
+    .ui.inverted.steps@{notCircular} .link.step:active::after,
+    .ui.inverted.steps@{notCircular} .link.step:active,
+    .ui.inverted.steps@{notCircular} a.step:active::after,
+    .ui.inverted.steps@{notCircular} a.step:active {
         background: @invertedActiveHoverBackground;
         color: @invertedPressedTextColor;
     }
+    & when (@variationStepCircular) {
+        /* Circular Step */
+        .ui.inverted.circular.steps {
+            & .step .content {
+                color: @invertedTextColor;
+            }
+
+            &@{notVertical} {
+                & .step:not(.completed) {
+                    background: @invertedTextColor;
+                }
+                & .step:not(.active):not(.completed)::before {
+                    border-color: @invertedTextColor;
+                }
+                & .step .center.aligned.content .title {
+                    background: @invertedCircularStepContentCenterAlignedBackground;
+                }
+            }
+            &:not(.ordered) .step:not(.active):not(.completed)::after {
+                background: @invertedTextColor;
+            }
+
+            & when (@variationStepVertical) {
+                &.vertical {
+                    & .step:not(.active):not(.completed)::before {
+                        border-color: @invertedTextColor;
+                    }
+                    & .step:not(.completed) .content::before {
+                        background: @invertedTextColor;
+                    }
+                }
+            }
+        }
+    }
+}
+
+& when (@variationStepCircular) and not (@variationStepColors = false) {
+    each(@variationStepColors, {
+        @variation: @value;
+        @color: @colors[@@variation][color];
+
+        .ui.ui.circular.steps .step.@{variation} {
+            &::before {
+                border-color: @color;
+            }
+            &::after {
+                background: @color;
+            }
+        }
+        .ui.ui.@{variation}.circular.steps .step, .ui.ui.ui.circular.steps .step.@{variation} {
+            &.active::before {
+                border-color: @color;
+            }
+            &.active::after {
+                background: @color;
+            }
+            &.completed::before {
+                background: @color;
+                border-color: @color;
+            }
+        }
+        .ui.ui.@{variation}.circular.steps@{notVertical} .step, .ui.ui.ui.circular.steps@{notVertical} .step.@{variation} {
+            &.completed {
+                background: @color;
+            }
+        }
+        .ui.ui.circular.steps@{notVertical} .step.@{variation} {
+            background: @color;
+        }
+        .ui.ui.@{variation}.circular.steps .step, .ui.ui.ui.circular.steps .step.@{variation} {
+            &.active .content .title {
+                color: @color;
+            }
+        }
+        & when (@variationStepVertical) {
+            .ui.ui.vertical.circular.steps .step.completed.@{variation} .content::before {
+                border-color: @color;
+            }
+            .ui.ui.@{variation}.vertical.circular.steps .step, .ui.ui.vertical.circular.steps .step.@{variation} {
+                &.completed .content::before {
+                    border-color: @color;
+                }
+            }
+        }
+
+        & when (@variationStepOrdered) {
+            .ui.ui.@{variation}.circular.ordered.steps .step, .ui.ui.circular.ordered.steps .step.@{variation} {
+                &::after {
+                    background: transparent;
+                }
+                &.active::before {
+                    color: @color;
+                }
+            }
+        }
+    });
 }
 
 // stylelint-disable no-invalid-position-at-import-rule