diff --git a/packages/uui-box/lib/uui-box.element.ts b/packages/uui-box/lib/uui-box.element.ts index 44c4b4fd9..4041ec1a5 100644 --- a/packages/uui-box/lib/uui-box.element.ts +++ b/packages/uui-box/lib/uui-box.element.ts @@ -131,6 +131,7 @@ export class UUIBoxElement extends LitElement { #header { display: flex; + align-items: center; column-gap: var(--uui-size-space-5); border-bottom: 1px solid var(--uui-color-divider-standalone); padding: var( diff --git a/packages/uui-button/lib/uui-button.element.ts b/packages/uui-button/lib/uui-button.element.ts index b2879c0cd..54abf4ae7 100644 --- a/packages/uui-button/lib/uui-button.element.ts +++ b/packages/uui-button/lib/uui-button.element.ts @@ -293,9 +293,12 @@ export class UUIButtonElement extends UUIFormControlMixin( .label { line-height: normal; /** needed to reset 'a > span' */ - display: block; transition: opacity 120ms; + display: flex; + gap: var(--uui-size-1); + align-items: center; } + :host([state]:not([state=''])) .label { opacity: 0; } diff --git a/packages/uui-icon/lib/uui-icon.element.ts b/packages/uui-icon/lib/uui-icon.element.ts index 36f4c4836..d04d66988 100644 --- a/packages/uui-icon/lib/uui-icon.element.ts +++ b/packages/uui-icon/lib/uui-icon.element.ts @@ -139,8 +139,9 @@ export class UUIIconElement extends LitElement { static styles = [ css` :host { - display: inline-block; - vertical-align: bottom; + display: inline-flex; + align-items: center; + justify-content: center; width: 1.125em; height: 1.125em; } diff --git a/packages/uui-ref-node/lib/uui-ref-node.element.ts b/packages/uui-ref-node/lib/uui-ref-node.element.ts index f8e12b8f5..9798651d9 100644 --- a/packages/uui-ref-node/lib/uui-ref-node.element.ts +++ b/packages/uui-ref-node/lib/uui-ref-node.element.ts @@ -178,18 +178,16 @@ export class UUIRefNodeElement extends UUIRefElement { } #content { - align-self: stretch; - line-height: normal; display: flex; - position: relative; align-items: center; + justify-content: center; + line-height: 1.2em; } #open-part { color: inherit; text-decoration: none; cursor: pointer; - align-self: stretch; display: flex; flex-grow: 1; padding: calc(var(--uui-size-2)); @@ -199,6 +197,9 @@ export class UUIRefNodeElement extends UUIRefElement { font-size: 1.2em; margin-left: var(--uui-size-2); margin-right: var(--uui-size-1); + display: flex; + align-items: center; + justify-content: center; } #info {