diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/components/section/section-sidebar-context-menu/section-sidebar-context-menu.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/components/section/section-sidebar-context-menu/section-sidebar-context-menu.element.ts index da011111ce..d4152b6e47 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/components/section/section-sidebar-context-menu/section-sidebar-context-menu.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/components/section/section-sidebar-context-menu/section-sidebar-context-menu.element.ts @@ -101,16 +101,25 @@ export class UmbSectionSidebarContextMenuElement extends UmbLitElement { } #action-modal { position: absolute; - left: 300px; + left: var(--umb-section-sidebar-layout-width); height: 100%; z-index: 1; top: 0; - width: 300px; + width: var(--umb-section-sidebar-layout-width); border: none; border-left: 1px solid var(--uui-color-border); border-right: 1px solid var(--uui-color-border); background-color: var(--uui-color-surface); } + + #action-modal h3 { + padding: var(--uui-size-4) var(--uui-size-8); + margin: 0; + min-height: var(--umb-header-layout-height); + box-sizing: border-box; + display: flex; + align-items: center; + } `, ]; } diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/components/section/section-sidebar/section-sidebar.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/components/section/section-sidebar/section-sidebar.element.ts index 3b4795cc0c..2fabe4b4d6 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/components/section/section-sidebar/section-sidebar.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/components/section/section-sidebar/section-sidebar.element.ts @@ -30,7 +30,7 @@ export class UmbSectionSidebarElement extends UmbLitElement { UUITextStyles, css` :host { - flex: 0 0 300px; + flex: 0 0 var(--umb-section-sidebar-layout-width); background-color: var(--uui-color-surface); height: 100%; border-right: 1px solid var(--uui-color-border); diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/components/tree/context-menu/tree-context-menu.service.ts b/src/Umbraco.Web.UI.Client/src/packages/core/components/tree/context-menu/tree-context-menu.service.ts index 610bb96094..544677d45b 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/components/tree/context-menu/tree-context-menu.service.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/components/tree/context-menu/tree-context-menu.service.ts @@ -78,16 +78,25 @@ export class UmbTreeContextMenuServiceElement extends UmbLitElement { } #action-modal { position: absolute; - left: 300px; + left: var(--umb-section-sidebar-layout-width); height: 100%; z-index: 1; top: 0; - width: 300px; + width: var(--umb-section-sidebar-layout-width); border: none; border-left: 1px solid var(--uui-color-border); border-right: 1px solid var(--uui-color-border); background-color: var(--uui-color-surface); } + + #action-modal h3 { + padding: var(--uui-size-4) var(--uui-size-8); + margin: 0; + min-height: var(--umb-header-layout-height); + box-sizing: border-box; + display: flex; + align-items: center; + } `, ]; } diff --git a/src/Umbraco.Web.UI.Client/src/packages/settings/languages/app-language-select/app-language-select.element.ts b/src/Umbraco.Web.UI.Client/src/packages/settings/languages/app-language-select/app-language-select.element.ts index e3be06b599..3fecc591d6 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/settings/languages/app-language-select/app-language-select.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/settings/languages/app-language-select/app-language-select.element.ts @@ -120,12 +120,11 @@ export class UmbAppLanguageSelectElement extends UmbLitElement { } #toggle { - display: block; - width: 100%; + width: var(--umb-section-sidebar-layout-width); text-align: left; background: none; border: none; - height: 70px; + height: var(--umb-header-layout-height); padding: 0 var(--uui-size-8); border-bottom: 1px solid var(--uui-color-border); font-size: 14px; @@ -138,6 +137,10 @@ export class UmbAppLanguageSelectElement extends UmbLitElement { #toggle:hover { background-color: var(--uui-color-surface-emphasis); } + + [open] uui-symbol-expand { + transform: rotate(90deg); + } `, ]; } diff --git a/src/Umbraco.Web.UI.Client/src/shared/css/custom-properties.css b/src/Umbraco.Web.UI.Client/src/shared/css/custom-properties.css index f33b370e2d..1a3da8c527 100644 --- a/src/Umbraco.Web.UI.Client/src/shared/css/custom-properties.css +++ b/src/Umbraco.Web.UI.Client/src/shared/css/custom-properties.css @@ -2,4 +2,5 @@ --uui-color-positive: #1c874c; --umb-footer-layout-height: 54px; --umb-header-layout-height: 70px; + --umb-section-sidebar-layout-width: 300px; }