diff --git a/RELEASE-NOTES.md b/RELEASE-NOTES.md index c2a8a0399..45d953cde 100644 --- a/RELEASE-NOTES.md +++ b/RELEASE-NOTES.md @@ -10,6 +10,7 @@ - **Loader** - `inline loader` now has a `centered` variation **Bugs** +- **Input** - Fix bug with vertical centering of `ui action input` inside `menu` due to `flexbox` changes - **Menu** - Fix vertical pointing menu, sub menu arrow color - **Item ** - `img` inside of `ui item content` now do not receive formatting by default diff --git a/src/definitions/collections/menu.less b/src/definitions/collections/menu.less index 80d629e61..48bdf056e 100755 --- a/src/definitions/collections/menu.less +++ b/src/definitions/collections/menu.less @@ -28,9 +28,9 @@ ---------------*/ .ui.menu { + display: flex; margin: @margin; background: @background; - font-size: 0em; font-weight: @fontWeight; box-shadow: @boxShadow; border-radius: @borderRadius; @@ -54,8 +54,14 @@ .ui.menu .menu { margin: 0em; } -.ui.menu:not(.vertical) .menu { - font-size: 0em; + + +.ui.menu:not(.vertical) > .menu { + display: flex; +} +.ui.menu:not(.vertical) .item { + display: flex; + align-items: center; } /*-------------- @@ -83,7 +89,6 @@ .ui.menu .item { position: relative; - display: inline-block; padding: @verticalPadding @horizontalPadding; border-top: @borderSize solid transparent; @@ -105,11 +110,13 @@ } .ui.menu:not(.vertical) .item.left, .ui.menu:not(.vertical) .menu.left { - float: left; + display: flex; + margin-right: auto; } .ui.menu:not(.vertical) .item.right, .ui.menu:not(.vertical) .menu.right { - float: right; + display: flex; + margin-left: auto; } @@ -126,7 +133,7 @@ height: 100%; background: @dividerBackground; } -.ui.menu > .right.menu:first-child { +.ui.menu > .right.menu:first-child:before { display: none; } .ui.menu .menu.right .item:before, @@ -168,6 +175,7 @@ margin-left: @dropdownIconDistance; } + /*-------------- Button ---------------*/ @@ -175,7 +183,7 @@ .ui.menu:not(.vertical) .item > .button { position: relative; top: @buttonOffset; - margin: -@buttonVerticalPadding 0; + margin: @buttonMargin; padding-bottom: @buttonVerticalPadding; padding-top: @buttonVerticalPadding; font-size: @buttonSize; @@ -205,27 +213,6 @@ padding-bottom: @inputVerticalPadding; } -/* Resizes */ -.ui.small.menu .item > .input input { - top: @smallInputOffset; - padding-top: @smallInputVerticalPadding; - padding-bottom: @smallInputVerticalPadding; -} -.ui.small.menu .item > .input .button, -.ui.small.menu .item > .input .label { - padding-top: @smallInputVerticalPadding; - padding-bottom: @smallInputVerticalPadding; -} -.ui.large.menu .item > .input input { - top: @largeInputOffset; - padding-bottom: @largeInputVerticalPadding; - padding-top: @largeInputVerticalPadding; -} -.ui.large.menu .item > .input .button, -.ui.large.menu .item > .input .label { - padding-top: @largeInputVerticalPadding; - padding-bottom: @largeInputVerticalPadding; -} /*-------------- @@ -412,14 +399,15 @@ ---------------*/ .ui.vertical.menu { + display: block; background: @verticalBackground; } + /*--- Item ---*/ .ui.vertical.menu .item { - background: @verticalItemBackground; display: block; - height: auto !important; + background: @verticalItemBackground; border-top: none; border-left: @borderSize solid transparent; border-right: none; @@ -482,9 +470,6 @@ box-shadow: @dropdownVerticalBoxShadow; border-radius: 0em @borderRadius @borderRadius @borderRadius; } -.ui.vertical.menu .dropdown.item .menu .item { - font-size: 1rem; -} .ui.vertical.menu .dropdown.item .menu .item i.icon { margin-right: 0em; } @@ -510,6 +495,12 @@ Tiered ---------------*/ +.ui.tiered.menu { + flex-wrap: wrap; +} +.ui.tiered.menu > .menu { + width: 100%; +} .ui.tiered.menu > .menu > .item:hover { color: @tieredSubMenuActiveColor; } @@ -665,7 +656,7 @@ .ui.pagination.menu { margin: 0em; - display: inline-block; + display: inline-flex; vertical-align: middle; } @@ -922,14 +913,17 @@ ---------------*/ .ui.text.menu { - display: inline-block; + display: inline-flex; background: none transparent; - margin: 1rem -1rem; + margin: 1em -1em; border-radius: 0px; box-shadow: none; } +.ui.vertical.text.menu { + display: inline-block; +} .ui.text.menu > .item { opacity: 0.8; @@ -968,7 +962,7 @@ /*--- vertical text ---*/ .ui.vertical.text.menu { - margin: 1rem 0em; + margin: 1em 0em; } .ui.vertical.text.menu:first-child { margin-top: 0rem; @@ -1005,6 +999,11 @@ box-shadow: none; } +/*--- active hover ---*/ +.ui.text.menu .active.item:hover { + background-color: transparent; +} + /* disable variations */ .ui.text.pointing.menu .active.item:after { box-shadow: none; @@ -1033,10 +1032,13 @@ .ui.icon.menu, .ui.vertical.icon.menu { + display: inline-flex; width: auto; - display: inline-block; height: auto; } +.ui.vertical.icon.menu { + display: inline-block; +} .ui.icon.menu > .item { height: auto; text-align: @iconMenuTextAlign; @@ -1394,7 +1396,6 @@ .ui.menu.fluid, .ui.vertical.menu.fluid { - display: block; width: 100% !important; } @@ -1604,12 +1605,6 @@ .ui.large.menu .item { font-size: @large; } -.ui.large.menu .item .item { - font-size: @largeSubMenu; -} -.ui.large.menu .dropdown .item { - font-size: @largeDropdown; -} .ui.large.vertical.menu { width: @largeWidth; } diff --git a/src/definitions/elements/input.less b/src/definitions/elements/input.less index 85f994f80..81c379e70 100755 --- a/src/definitions/elements/input.less +++ b/src/definitions/elements/input.less @@ -344,7 +344,10 @@ .ui.action.input > .button, .ui.action.input > .buttons { + display: flex; + align-items: center; flex: 1 0 auto; + align-items: center; } .ui.action.input > .button, .ui.action.input > .buttons > .button { diff --git a/src/themes/default/collections/menu.variables b/src/themes/default/collections/menu.variables index 9632cfd11..d8d644943 100644 --- a/src/themes/default/collections/menu.variables +++ b/src/themes/default/collections/menu.variables @@ -15,7 +15,7 @@ Collection --------------------*/ -@margin: 1rem 0rem; +@margin: 1em 0rem; @verticalPadding: 0.78571em; @horizontalPadding: 0.95em; @@ -59,11 +59,11 @@ /* Sub Menu */ @subMenuMargin: 0.5em; -@subMenuFontSize: 0.875rem; +@subMenuFontSize: 0.875em; @subMenuTextColor: rgba(0, 0, 0, 0.5); -@subMenuHorizontalPadding: 0.5rem; -@subMenuVerticalPadding: 1.5rem; +@subMenuHorizontalPadding: 0.5em; +@subMenuVerticalPadding: 1.5em; /*-------------- Elements @@ -90,15 +90,16 @@ ---------------*/ /* Button */ -@buttonOffset: -0.05em; -@buttonVerticalPadding: 0.55em; -@buttonSize: 0.875em; +@buttonSize: @medium; +@buttonOffset: 0em; +@buttonMargin: -0.2em 0em; +@buttonVerticalPadding: 0.7em; /* Input */ -@inputSize: 1em; -@inputVerticalMargin: -0.6em; +@inputSize: @medium; +@inputVerticalMargin: -0.5em; @inputOffset: 0em; -@inputVerticalPadding: 0.4em; +@inputVerticalPadding: 0.5em; @smallInputOffset: 0em; @smallInputVerticalPadding: 0.4em; @@ -319,7 +320,6 @@ @attachedBoxShadow: 0px 0px 0px 1px #DDDDDD; /* Sizes */ -@small: 0.875rem; @smallSubMenu: 0.875rem; @smallWidth: 13rem; @@ -327,6 +327,4 @@ @mediumWidth: 15rem; @large: 1.125rem; -@largeSubMenu: 0.875rem; -@largeDropdown: 1rem; @largeWidth: 18rem; \ No newline at end of file