diff --git a/tgui/docs/component-reference.md b/tgui/docs/component-reference.md index d3352c4ccb8..4e74b9de335 100644 --- a/tgui/docs/component-reference.md +++ b/tgui/docs/component-reference.md @@ -229,10 +229,6 @@ the baseline alignment. over the button. - `children: any` - Content to render inside the button. - `onClick: function` - Called when element is clicked. -- `verticalAlign: string` - Align content vertically. - - `top` - align content to the ceiling of the button box. - - `middle` - align content on the middle of the button box. - - `bottom` - align content on the ground of the button box. ### `Button.Checkbox` diff --git a/tgui/packages/tgui/components/Button.js b/tgui/packages/tgui/components/Button.js index dc7538a98cd..b4b9b905b18 100644 --- a/tgui/packages/tgui/components/Button.js +++ b/tgui/packages/tgui/components/Button.js @@ -35,7 +35,6 @@ export const Button = props => { children, onclick, onClick, - verticalAlign, ...rest } = props; const hasContent = !!(content || children); @@ -68,7 +67,6 @@ export const Button = props => { circular && 'Button--circular', compact && 'Button--compact', iconPosition && 'Button--iconPosition--' + iconPosition, - verticalAlign && 'Button--verticalAlign--' + verticalAlign, (color && typeof color === 'string') ? 'Button--color--' + color : 'Button--color--default', @@ -96,26 +94,22 @@ export const Button = props => { } }} {...computeBoxProps(rest)}> -
- {icon && iconPosition !== 'right' && ( - - )} - {content} - {children} - {icon && iconPosition === 'right' && ( - - )} -
+ {(icon && iconPosition !== 'right') && ( + + )} + {content} + {children} + {(icon && iconPosition === 'right') && ( + + )} ); diff --git a/tgui/packages/tgui/styles/components/Button.scss b/tgui/packages/tgui/styles/components/Button.scss index d777e551ba1..ac2974f9ff8 100644 --- a/tgui/packages/tgui/styles/components/Button.scss +++ b/tgui/packages/tgui/styles/components/Button.scss @@ -45,7 +45,6 @@ $bg-map: colors.$bg-map !default; .Button { position: relative; display: inline-block; - display: inline-flex; line-height: 1.667em; padding: 0 0.5em; margin-right: base.em(2px); @@ -91,7 +90,6 @@ $bg-map: colors.$bg-map !default; .Button--fluid { display: block; - display: flex; margin-left: 0; margin-right: 0; } @@ -136,19 +134,3 @@ $bg-map: colors.$bg-map !default; .Button--selected { @include button-color($color-selected); } - -.Button--verticalAlign--top { - align-items: flex-start; -} - -.Button--verticalAlign--middle { - align-items: center; -} - -.Button--verticalAlign--bottom { - align-items: flex-end; -} - -.Button__content--fluid { - flex: 1; -}