From 80e5495d27d90fda9e25b30fbab868cd36bc85f5 Mon Sep 17 00:00:00 2001 From: jlukic Date: Wed, 7 Jan 2015 11:37:42 -0500 Subject: [PATCH] Steps will appear correctly even if each step is a different height #1579 --- src/definitions/elements/step.less | 81 +++++++++++++++--------------- 1 file changed, 41 insertions(+), 40 deletions(-) diff --git a/src/definitions/elements/step.less b/src/definitions/elements/step.less index 61f4a4588..8606fe998 100755 --- a/src/definitions/elements/step.less +++ b/src/definitions/elements/step.less @@ -20,21 +20,23 @@ /******************************* - Step + Singular *******************************/ .ui.steps .step { - display: inline-block; position: relative; + display: table-cell; + vertical-align: middle; 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; @@ -55,6 +57,41 @@ 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 @@ -128,6 +165,7 @@ ---------------*/ .ui.vertical.steps { + display: inline-block; overflow: visible; } .ui.vertical.steps .step { @@ -184,43 +222,6 @@ } -/******************************* - 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 *******************************/