Convert steps to flexbox

9 years ago · 3ef8c728a1
5 changed files with 148 additions and 97 deletions
--- a/RELEASE-NOTES.md
+++ b/RELEASE-NOTES.md
@ -20,6 +20,7 @@
 - **Item** - Item now uses `flexbox` for layout
 - **Message** - `icon message` now uses `flexbox`
 - **Input** - All `input` types use `flexbox`
+- **Steps** - Steps now use `flexbox`, the default horizontal theme has the active element point downward now instead of to the right. Steps no longer need `item count` and will automatically divide evenly

 **Enhancements**
 - **Build Tools** - Adjusting `site.variables` will now rebuild all UI, instead of just `site.less`
@ -105,6 +106,7 @@
 - **Reveal** - Removed `masked` reveal, all reveals are masked by default
 - **Search** - Fixed `onSelect` returning the first term that matches the beginining of the selected value not the exact value.
 - **Search** - Search API calls now use the same level debug settings as search
+- **Steps** - Fixed bug where `stackable steps` were not working correctly
 - **Tab** - Tab name is no longer case sensitive
 - **Table** - Fixes `ascending` and `descending` icons were reversed in table
 - **Table** - `very basic table` now works together with `padded table`
--- a/src/definitions/elements/step.less
+++ b/src/definitions/elements/step.less
@ -23,17 +23,55 @@

@import (multiple) '../../theme.config';

+/*******************************
+            Plural
+*******************************/
+
+.ui.steps {
+  display: inline-flex;
+  flex-direction: row;
+  align-items: stretch;
+  background: @stepsBackground;
+  box-shadow: @stepsBoxShadow;
+  line-height: @lineHeight;
+  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;
+}
+
 /*******************************
           Singular
 *******************************/

 .ui.steps .step {
  position: relative;
-  display: table-cell;
+  display: flex;
+  flex: 1 0 auto;
+  flex-wrap: wrap;
+  flex-direction: row;
  vertical-align: middle;
+  align-items: center;

  margin: @verticalMargin @horizontalMargin;
-  padding: @verticalPadding @horizontalPadding @verticalPadding @leftPadding;
+  padding: @verticalPadding @horizontalPadding;
  background: @background;
  color: @textColor;
  box-shadow: @boxShadow;
@ -51,8 +89,11 @@
  background-color: @arrowBackgroundColor;
  width: @arrowSize;
  height: @arrowSize;
-  border-bottom: 1px solid @arrowBorderColor;
-  border-right: 1px solid @arrowBorderColor;
+
+  border-style: solid;
+  border-color: @borderColor;
+  border-width: @arrowBorderWidth;
+
  transform: translateY(-50%) translateX(50%) rotate(-45deg);
 }

@ -61,42 +102,6 @@
  transition: @transition;
 }

-/*******************************
-            Plural
-*******************************/
-
-.ui.steps {
-  display: table;
-  table-layout: fixed;
-  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;
-}
-
-
 /*******************************
            Content
 *******************************/
@ -107,6 +112,9 @@
  font-size: @titleFontSize;
  font-weight: @titleFontWeight;
 }
+.ui.steps .step > .title {
+  width: 100%;
+}

 /* Description */
 .ui.steps .step .description {
@ -114,20 +122,31 @@
  font-size: @descriptionFontSize;
  color: @descriptionColor;
 }
+.ui.steps .step > .description {
+  width: 100%;
+}
 .ui.steps .step .title ~ .description {
  margin-top: @descriptionDistance;
 }

 /* Icon */
+.ui.steps .step > .icon {
+  font-size: @iconSize;
+  margin: 0em @iconDistance 0em 0em;
+}
 .ui.steps .step > .icon,
 .ui.steps .step > .icon ~ .content {
-  display: table-cell;
-  vertical-align: @iconVerticalAlign;
+  display: block;
+  flex: 0 1 auto;
+  align-self: @iconAlign;
 }
-.ui.steps .step > .icon {
-  font-size: @iconSize;
-  margin: 0em;
-  padding-right: @iconDistance;
+.ui.steps .step > .icon ~ .content {
+  flex-grow: 1 0 auto;
+}
+
+/* Horizontal Icon */
+.ui.steps:not(.vertical) .step > .icon {
+  width: auto;
 }

 /* Link */
@ -148,19 +167,21 @@
  counter-reset: ordered;
 }
 .ui.ordered.steps .step:before {
-  display: table-cell;
+  display: block;
  position: static;
  text-align: center;
  content: counters(ordered, ".");
-  vertical-align: @iconVerticalAlign;
-  padding-right: @iconDistance;
+  align-self: @iconAlign;
+  margin-right: @iconDistance;
  font-size: @iconSize;
  counter-increment: ordered;
+  font-family: @orderedFontFamily;
+  font-weight: @orderedFontWeight;
 }

 .ui.ordered.steps .step > * {
-  display: table-cell;
-  vertical-align: @iconVerticalAlign;
+  display: block;
+  align-self: @iconAlign;
 }


@ -169,11 +190,11 @@
 ---------------*/

 .ui.vertical.steps {
-  display: inline-block;
+  display: inline-flex;
+  flex-direction: column;
  overflow: visible;
 }
 .ui.vertical.steps .step {
-  display: block;
  border-radius: @borderRadius;
  padding: @verticalPadding @horizontalPadding;
 }
@ -189,6 +210,12 @@
 .ui.vertical.steps .step:after {
  display: none;
 }
+.ui.vertical.steps .step:after {
+  top: @verticalArrowTopOffset;
+  right: @verticalArrowRightOffset;
+  border-width: @verticalArrowBorderWidth;
+}
+

 /* Active Arrow */
 .ui.vertical.steps .active.step:after {
@ -307,27 +334,27 @@


 /* 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;
-}
+@media only screen and (max-width: @computerBreakpoint) {
+
+  .ui[class*="tablet stackable"].steps {
+    overflow: visible;
+    flex-direction: column;
+  }
+  .ui[class*="tablet stackable"].steps .step {
+    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;
+  }

 }

@ -338,6 +365,7 @@

 /* Fluid */
 .ui.fluid.steps {
+  display: flex;
  width: 100%;
 }

@ -383,6 +411,16 @@
 .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%;
 }
--- a/src/themes/default/elements/button.variables
+++ b/src/themes/default/elements/button.variables
@ -124,7 +124,7 @@

 /* Loading */
@loadingOpacity: 1;
-@loadingPointerEvents: none;
+@loadingPointerEvents: auto;
@loadingTransition:
  all 0s linear,
  opacity @transitionDuration @defaultEasing
--- a/src/themes/default/elements/step.variables
+++ b/src/themes/default/elements/step.variables
@ -9,10 +9,9 @@
@verticalMargin: 0em;
@horizontalMargin: 0em;

-@arrowSize: 1.5em;
-@verticalPadding: 0.9285em;
-@horizontalPadding: 1.5em;
-@leftPadding: @horizontalPadding + (@arrowSize / 2);
+@arrowSize: @relativeLarge;
+@verticalPadding: @relativeLarge;
+@horizontalPadding: @relativeHuge;

@transition:
  background-color @transitionDuration @transitionEasing,
@ -21,37 +20,46 @@
  box-shadow @transitionDuration @transitionEasing
 ;
@borderRadius: @defaultBorderRadius;
-@lineHeight: 1.142rem;
+@lineHeight: @relativeLarge;
+@alignItems: center;

-@backgroundColor: #FFFFFF;
+@backgroundColor: @white;
@background: @backgroundColor;
@borderRadius: 0em;
-@boxShadow: 0px 0px 0px 1px @solidBorderColor;
+@borderWidth: 1px;
+@boxShadow: 0px 0px 0px @borderWidth @solidBorderColor;

 /* Icon */
-@iconDistance: 0.6em;
-@iconSize: 2em;
-@iconVerticalAlign: middle;
+@iconDistance: 1rem;
+@iconSize: 2.75em;
+@iconAlign: middle;

 /* Title */
@titleFontFamily: @headerFont;
@titleFontWeight: bold;
-@titleFontSize: 1.0714em;
+@titleFontSize: @relativeLarge;
@titleColor: @darkTextColor;

 /* Description */
-@descriptionDistance: 0.1em;
-@descriptionFontSize: 0.9285em;
+@descriptionDistance: 0.25em;
+@descriptionFontSize: @relativeSmall;
@descriptionFontWeight: normal;
@descriptionColor: @textColor;


 /* Arrow */
@arrowBackgroundColor: @backgroundColor;
-@arrowTopOffset: 50%;
-@arrowRightOffset: 0em;
-@arrowBorderColor: @borderColor;
+@arrowTopOffset: 100%;
+@arrowRightOffset: 50%;
+@arrowBorderWidth: 0px 0px @borderWidth @borderWidth;

+/*-------------------
+       Types
+--------------------*/
+
+@verticalArrowTopOffset: 50%;
+@verticalArrowRightOffset: 0%;
+@verticalArrowBorderWidth: 0px @borderWidth @borderWidth 0px;

 /*-------------------
       Group
@ -68,6 +76,9 @@
@attachedTopMargin: 0em;
@attachedBottomMargin: -1px 0em 0em;

+@orderedFontFamily: inherit;
+@orderedFontWeight: bold;
+
 /*-------------------
       States
 --------------------*/
@ -76,20 +87,20 @@
@completedColor: @positiveColor;

 /* Hover */
-@hoverBackground: #FAFAFA;
+@hoverBackground: @offWhite;
@hoverColor: @hoveredTextColor;

 /* Down */
-@downBackground: #F0F0F0;
+@downBackground: @darkWhite;
@downColor: @pressedTextColor;

 /* Active */
-@activeBackground: #F0F0F0;
+@activeBackground: @darkWhite;
@activeColor: @linkColor;
@activeIconColor: @darkTextColor;

 /* Active + Hover */
-@activeHoverBackground: #ECECEC;
+@activeHoverBackground: @lightGrey;
@activeHoverColor: @textColor;


--- a/src/themes/github/elements/step.variables
+++ b/src/themes/github/elements/step.variables
@ -3,12 +3,12 @@
 --------------------*/

 /* Step */
-@background: linear-gradient(transparent, rgba(0, 0, 0, 0.07));
+@background: transparent linear-gradient(transparent, rgba(0, 0, 0, 0.07));
@verticalPadding: 1em;

 /* Group */
@stepsBackground: #FFFFFF;
-@stepsBoxShadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.15);
+@stepsBoxShadow: 0px 0px 1px 0px rgba(0, 0, 0, 0.15);

 /* States */
@activeBackground: #FFFFFF;