Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(ui5-bar): provide responsive paddings support #9820

Merged
merged 10 commits into from
Sep 27, 2024
Merged

fix(ui5-bar): provide responsive paddings support #9820

Show file tree
Hide file tree
Changes from 7 commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
69fda89
fix(ui5-bar): provide support for responsive paddings
unazko Sep 5, 2024
195ce98
fix: add CSS variables for the padding
unazko Sep 5, 2024
64e054c
fix: adjust paddings in a dialog
unazko Sep 5, 2024
6a75688
Merge branch 'main' into bar_responsive_padding_concept
unazko Sep 10, 2024
63b5ceb
fix: adjust left padding on large screen
unazko Sep 10, 2024
dcbae29
fix: remove redundant selector
unazko Sep 10, 2024
75a485d
fix: chaning to container queries usage
unazko Sep 10, 2024
ea35d3a
fix: retrieve removed selector
unazko Sep 25, 2024
7793d0f
fix: extract changing parameters to variables
unazko Sep 27, 2024
22bec78
fix: set default paddings for middle sized screens
unazko Sep 27, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
38 changes: 29 additions & 9 deletions packages/main/src/themes/Bar.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@
}

.ui5-bar-root {
container-type: size;
display: flex;
align-items: center;
justify-content: space-between;
Expand All @@ -18,27 +19,19 @@
}

.ui5-bar-root .ui5-bar-startcontent-container {
padding-inline-start: var(--_ui5_bar-start-container-padding-start);
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
}

.ui5-bar-root .ui5-bar-content-container {
min-width: calc(30% - calc(var(--_ui5_bar-start-container-padding-start)
+ var(--_ui5_bar-end-container-padding-end)
+ (2*var(--_ui5_bar-mid-container-padding-start-end))));
}

.ui5-bar-root.ui5-bar-root-shrinked .ui5-bar-content-container {
min-width: 0px;
overflow: hidden;
height: 100%;
}

.ui5-bar-root .ui5-bar-endcontent-container {
padding-inline-end: var(--_ui5_bar-end-container-padding-end);
display: flex;
flex-direction: row;
align-items: center;
Expand Down Expand Up @@ -72,4 +65,31 @@

::slotted(*) {
margin: 0 0.25rem;
}
}

@container (width < 600px) {
.ui5-bar-startcontent-container {
padding-inline-start: var(--_ui5_bar-start-container-padding-start_S);
}
.ui5-bar-endcontent-container {
padding-inline-end: var(--_ui5_bar-end-container-padding-end_S);
}
}

@container (width > 599px) and (width < 1440px) {
.ui5-bar-startcontent-container {
padding-inline-start: var(--_ui5_bar-start-container-padding-start_M_L);
}
.ui5-bar-endcontent-container {
padding-inline-end: var(--_ui5_bar-end-container-padding-end_M_L);
}
}

@container (width > 1439px) {
.ui5-bar-startcontent-container {
padding-inline-start: var(--_ui5_bar-start-container-padding-start_XL);
}
.ui5-bar-endcontent-container {
padding-inline-end: var(--_ui5_bar-end-container-padding-end_XL);
}
}
8 changes: 6 additions & 2 deletions packages/main/src/themes/base/Bar-parameters.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,12 @@
:root {
--_ui5_bar_base_height: 2.75rem;
--_ui5_bar_subheader_height: 3rem;
--_ui5_bar-start-container-padding-start: 0.75rem;
--_ui5_bar-start-container-padding-start_S: 1rem;
--_ui5_bar-start-container-padding-start_M_L: 2rem;
--_ui5_bar-start-container-padding-start_XL: 3rem;
--_ui5_bar-mid-container-padding-start-end: 0.5rem;
--_ui5_bar-end-container-padding-end: 0.75rem;
--_ui5_bar-end-container-padding-end_S: 1rem;
--_ui5_bar-end-container-padding-end_M_L: 2rem;
--_ui5_bar-end-container-padding-end_XL: 3rem;
--_ui5_bar_subheader_margin-top: -0.0625rem;
}