aboutsummaryrefslogtreecommitdiff
path: root/semantic/src/definitions/elements/step.less
diff options
context:
space:
mode:
Diffstat (limited to 'semantic/src/definitions/elements/step.less')
-rw-r--r--semantic/src/definitions/elements/step.less630
1 files changed, 0 insertions, 630 deletions
diff --git a/semantic/src/definitions/elements/step.less b/semantic/src/definitions/elements/step.less
deleted file mode 100644
index fa339e8..0000000
--- a/semantic/src/definitions/elements/step.less
+++ /dev/null
@@ -1,630 +0,0 @@
-/*!
- * # Fomantic-UI - Step
- * http://github.com/fomantic/Fomantic-UI/
- *
- *
- * Released under the MIT license
- * http://opensource.org/licenses/MIT
- *
- */
-
-
-/*******************************
- Step
-*******************************/
-
-/*--------------
- Load Theme
----------------*/
-
-@type : 'element';
-@element : 'step';
-
-@import (multiple) '../../theme.config';
-
-/*******************************
- Plural
-*******************************/
-
-.ui.steps {
- display: inline-flex;
- flex-direction: row;
- align-items: stretch;
- margin: @stepMargin;
- background: @stepsBackground;
- box-shadow: @stepsBoxShadow;
- line-height: @lineHeight;
- border-radius: @stepsBorderRadius;
- border: @stepsBorder;
-}
-.ui.steps:not(.unstackable) {
- flex-wrap: wrap;
-}
-
-/* First Steps */
-.ui.steps:first-child {
- margin-top: 0;
-}
-
-/* Last Steps */
-.ui.steps:last-child {
- margin-bottom: 0;
-}
-
-
-/*******************************
- Singular
-*******************************/
-
-.ui.steps .step {
- position: relative;
- display: flex;
- flex: 1 0 auto;
- flex-wrap: wrap;
- flex-direction: row;
- vertical-align: middle;
- align-items: center;
- justify-content: @justifyContent;
-
- margin: @verticalMargin @horizontalMargin;
- padding: @verticalPadding @horizontalPadding;
- background: @background;
- color: @textColor;
- box-shadow: @boxShadow;
- border-radius: @borderRadius;
- border: @border;
- border-right: @divider;
- transition: @transition;
-}
-
-/* Arrow */
-.ui.steps .step:after {
- display: none;
- position: absolute;
- z-index: 2;
- content: '';
- top: @arrowTopOffset;
- right: @arrowRightOffset;
- background-color: @arrowBackgroundColor;
- width: @arrowSize;
- height: @arrowSize;
-
- border-style: solid;
- border-color: @borderColor;
- border-width: @arrowBorderWidth;
-
- transition: @transition;
- transform: translateY(-50%) translateX(50%) rotate(-45deg);
-}
-
-/* First Step */
-.ui.steps .step:first-child {
- padding-left: @horizontalPadding;
- border-radius: @stepsBorderRadius 0 0 @stepsBorderRadius;
-}
-
-/* Last Step */
-.ui.steps .step:last-child {
- border-radius: 0 @stepsBorderRadius @stepsBorderRadius 0;
- border-right: none;
- margin-right: 0;
-}
-
-/* Only Step */
-.ui.steps .step:only-child {
- border-radius: @stepsBorderRadius;
-}
-
-
-/*******************************
- Content
-*******************************/
-
-/* Title */
-.ui.steps .step .title {
- font-family: @titleFontFamily;
- font-size: @titleFontSize;
- font-weight: @titleFontWeight;
-}
-.ui.steps .step > .title {
- width: 100%;
-}
-
-/* Description */
-.ui.steps .step .description {
- font-weight: @descriptionFontWeight;
- font-size: @descriptionFontSize;
- color: @descriptionColor;
-}
-.ui.steps .step > .description {
- width: 100%;
-}
-.ui.steps .step .title ~ .description {
- margin-top: @descriptionDistance;
-}
-
-/* Icon */
-.ui.steps .step > i.icon {
- line-height: 1;
- font-size: @iconSize;
- margin: 0 @iconDistance 0 0;
-}
-.ui.steps .step > i.icon,
-.ui.steps .step > i.icon ~ .content {
- display: block;
- flex: 0 1 auto;
- align-self: @iconAlign;
-}
-
-/* Horizontal Icon */
-.ui.steps:not(.vertical) .step > i.icon {
- width: auto;
-}
-
-/* Link */
-.ui.steps .link.step,
-.ui.steps a.step {
- cursor: pointer;
-}
-
-/*******************************
- Types
-*******************************/
-
-& when (@variationStepOrdered) {
- /*--------------
- Ordered
- ---------------*/
-
- .ui.ordered.steps {
- 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 .step > * {
- display: block;
- align-self: @iconAlign;
- }
-}
-
-& when (@variationStepVertical) {
- /*--------------
- Vertical
- ---------------*/
-
- .ui.vertical.steps {
- display: inline-flex;
- flex-direction: column;
- overflow: visible;
- }
- .ui.vertical.steps .step {
- justify-content: flex-start;
- border-radius: @borderRadius;
- padding: @verticalPadding @horizontalPadding;
- border-right: none;
- border-bottom: @verticalDivider;
- }
- .ui.vertical.steps .step:first-child {
- padding: @verticalPadding @horizontalPadding;
- border-radius: @stepsBorderRadius @stepsBorderRadius 0 0;
- }
- .ui.vertical.steps .step:last-child {
- border-bottom: none;
- border-radius: 0 0 @stepsBorderRadius @stepsBorderRadius;
- }
- .ui.vertical.steps .step:only-child {
- border-radius: @stepsBorderRadius;
- }
-
-
- /* Arrow */
- .ui.vertical.steps .step:after {
- top: @verticalArrowTopOffset;
- right: @verticalArrowRightOffset;
- border-width: @verticalArrowBorderWidth;
- display: @verticalArrowDisplay;
- }
- .ui.right.vertical.steps .step:after {
- border-width: @verticalLeftArrowBorderWidth;
- left: @verticalLeftArrowLeftOffset;
- right: @verticalLeftArrowRightOffset;
- transform: translateY(-50%) translateX(-50%) rotate(-45deg);
- }
-
- .ui.vertical.steps .active.step:after {
- display: @verticalActiveArrowDisplay;
- }
- .ui.vertical.steps .step:last-child:after {
- display: @verticalLastArrowDisplay;
- }
- .ui.vertical.steps .active.step:last-child:after {
- display: @verticalActiveLastArrowDisplay;
- }
-}
-
-
-/*---------------
- Responsive
-----------------*/
-
-/* Mobile (Default) */
-@media only screen and (max-width: (@largestMobileScreen)) {
-
- .ui.steps:not(.unstackable) {
- display: inline-flex;
- overflow: visible;
- flex-direction: column;
- }
- .ui.steps:not(.unstackable) .step {
- width: 100% !important;
- flex-direction: column;
- border-radius: @borderRadius;
- padding: @verticalPadding @horizontalPadding;
- border-right: none;
- border-bottom: @stepsBorder;
- }
- .ui.steps:not(.unstackable) .step:first-child {
- padding: @verticalPadding @horizontalPadding;
- border-radius: @stepsBorderRadius @stepsBorderRadius 0 0;
- }
- .ui.steps:not(.unstackable) .step:last-child {
- border-radius: 0 0 @stepsBorderRadius @stepsBorderRadius;
- border-bottom: none;
- }
-
- /* Arrow */
- .ui.steps:not(.unstackable) .step:after {
- top: unset;
- bottom: -@arrowSize;
- right: 50%;
- transform: translateY(-50%) translateX(50%) rotate(45deg);
- }
- .ui.vertical.steps .active.step:last-child:after {
- display: none;
- }
- /* Content */
- .ui.steps:not(.unstackable) .step .content {
- text-align: center;
- }
-
- /* Icon */
- .ui.steps:not(.unstackable) .step > i.icon,
- .ui.ordered.steps:not(.unstackable) .step:before {
- margin: 0 0 @mobileIconDistance 0;
- }
-
-}
-
-/*******************************
- 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 i.icon {
- color: @activeIconColor;
-}
-
-/* Active Arrow */
-.ui.steps .step:after {
- display: @arrowDisplay;
-}
-.ui.steps .active.step:after {
- display: @activeArrowDisplay;
-}
-.ui.steps .step:last-child:after {
- display: @lastArrowDisplay;
-}
-.ui.steps .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 {
- cursor: pointer;
- background: @activeHoverBackground;
- color: @activeHoverColor;
-}
-
-/* Completed */
-.ui.steps .step.completed > i.icon:before,
-.ui.ordered.steps .step.completed:before {
- color: @completedColor;
-}
-
-& when (@variationStepDisabled) {
- /* 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
-*******************************/
-
-& when (@variationStepStackable) {
- /*--------------
- Stackable
- ---------------*/
-
- /* Tablet Or Below */
- @media only screen and (max-width: @largestTabletScreen) {
-
- .ui[class*="tablet stackable"].steps {
- display: inline-flex;
- overflow: visible;
- flex-direction: column;
- }
-
- /* Steps */
- .ui[class*="tablet stackable"].steps .step {
- flex-direction: column;
- border-radius: @borderRadius;
- padding: @verticalPadding @horizontalPadding;
- border-right: none;
- border-bottom: @stepsBorder;
- }
- .ui[class*="tablet stackable"].steps .step:first-child {
- padding: @verticalPadding @horizontalPadding;
- border-radius: @stepsBorderRadius @stepsBorderRadius 0 0;
- }
- .ui[class*="tablet stackable"].steps .step:last-child {
- border-radius: 0 0 @stepsBorderRadius @stepsBorderRadius;
- border-bottom: none;
- }
-
- /* Arrow */
- .ui[class*="tablet stackable"].steps .step:after {
- top: unset;
- bottom: -@arrowSize;
- right: 50%;
- transform: translateY(-50%) translateX(50%) rotate(45deg);
- }
-
- /* Content */
- .ui[class*="tablet stackable"].steps .step .content {
- text-align: center;
- }
-
- /* Icon */
- .ui[class*="tablet stackable"].steps .step > i.icon,
- .ui[class*="tablet stackable"].ordered.steps .step:before {
- margin: 0 0 @mobileIconDistance 0;
- }
-
- }
-}
-
-& when (@variationStepFluid) {
- /*--------------
- Fluid
- ---------------*/
-
- /* Fluid */
- .ui.fluid.steps {
- display: flex;
- width: 100%;
- }
-}
-
-& when (@variationStepAttached) {
- /*--------------
- Attached
- ---------------*/
-
- /* Top */
- .ui.attached.steps {
- width: @attachedWidth !important;
- margin: 0 @attachedHorizontalOffset @attachedVerticalOffset;
- max-width: @attachedWidth;
- border-radius: @stepsBorderRadius @stepsBorderRadius 0 0;
- }
- .ui.attached.steps .step:first-child {
- border-radius: @stepsBorderRadius 0 0 0;
- }
- .ui.attached.steps .step:last-child {
- border-radius: 0 @stepsBorderRadius 0 0;
- }
-
- /* Bottom */
- .ui.bottom.attached.steps {
- margin: @attachedVerticalOffset @attachedHorizontalOffset 0;
- border-radius: 0 0 @stepsBorderRadius @stepsBorderRadius;
- }
- .ui.bottom.attached.steps .step:first-child {
- border-radius: 0 0 0 @stepsBorderRadius;
- }
- .ui.bottom.attached.steps .step:last-child {
- border-radius: 0 0 @stepsBorderRadius 0;
- }
-}
-
-/*-------------------
- 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 {
- width: 100%;
-}
-.ui.one.steps > .step,
-.ui.two.steps > .step,
-.ui.three.steps > .step,
-.ui.four.steps > .step,
-.ui.five.steps > .step,
-.ui.six.steps > .step,
-.ui.seven.steps > .step,
-.ui.eight.steps > .step {
- 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.500%;
-}
-
-/*-------------------
- Sizes
---------------------*/
-
-.ui.steps .step,
-.ui.step {
- font-size: @medium;
-}
-& when not (@variationStepSizes = false) {
- each(@variationStepSizes, {
- @s: @@value;
- .ui.@{value}.steps .step,
- .ui.@{value}.step {
- font-size: @s;
- }
- })
-}
-
-& when (@variationStepInverted) {
- /*--------------
- Inverted
- ---------------*/
-
- .ui.inverted.steps {
- border: 1px solid @solidWhiteBorderColor;
- }
-
- .ui.inverted.steps .step {
- color: @invertedTextColor;
- background: @black;
- border-color: @solidWhiteBorderColor;
- }
-
- .ui.inverted.steps .step:after {
- background-color: @black;
- border-color: @solidWhiteBorderColor;
- }
-
- .ui.inverted.steps .step .description {
- color: @invertedTextColor;
- }
-
- /* Active */
- .ui.inverted.steps .step.active,
- .ui.inverted.steps .step.active:after {
- background: @invertedActiveBackground;
- }
- .ui.inverted.ordered.steps .step.active:before,
- .ui.inverted.steps .active.step i.icon {
- color: @invertedSelectedTextColor;
- }
-
- & when (@variationStepDisabled) {
- /* Disabled */
- .ui.inverted.steps .disabled.step,
- .ui.inverted.steps .disabled.step:after {
- background: @invertedDisabledBackground;
- }
- .ui.inverted.steps .disabled.step,
- .ui.inverted.steps .disabled.step .title,
- .ui.inverted.steps .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 {
- 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 {
- background: @invertedActiveHoverBackground;
- color: @invertedPressedTextColor;
- }
-}
-
-
-.loadUIOverrides();