yv01p/Umbraco-CMS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

language toggle is full-width

Browse Source 
variable for sidebar width
header styling in tree context menu
This commit is contained in:
Nathan Woulfe
2023-05-19 15:29:37 +10:00
parent 2bf5846e28
commit 490f75ed3c
5 changed files with 30 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
src/Umbraco.Web.UI.Client/src/packages/core/components/section/section-sidebar-context-menu/section-sidebar-context-menu.element.ts
View File

@@ -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;
}
`,
];
}

2
src/Umbraco.Web.UI.Client/src/packages/core/components/section/section-sidebar/section-sidebar.element.ts
View File

@@ -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);

13
src/Umbraco.Web.UI.Client/src/packages/core/components/tree/context-menu/tree-context-menu.service.ts
View File

@@ -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;
}
`,
];
}

9
src/Umbraco.Web.UI.Client/src/packages/settings/languages/app-language-select/app-language-select.element.ts
View File

@@ -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);
}
`,
];
}

1
src/Umbraco.Web.UI.Client/src/shared/css/custom-properties.css
View File

@@ -2,4 +2,5 @@
--uui-color-positive: #1c874c;
--umb-footer-layout-height: 54px;
--umb-header-layout-height: 70px;
--umb-section-sidebar-layout-width: 300px;
}