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

Jump to bottom

chore(NcAppSidebar): correctly define and document exposed CSS variables #5861

Open
wants to merge 4 commits into
base: master
Choose a base branch
from
+30 −20
Open

chore(NcAppSidebar): correctly define and document exposed CSS variables #5861

Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
8f09b7f
refactor(NcAppNavigation): do not rely on $app-navigation-padding
ShGKme Jul 24, 2024
2047167
chore(NcAppSidebar): fix css vars doc
ShGKme Jul 24, 2024
38a9884
docs(NcAppSidebar): add exposed CSS variables docs section
ShGKme Jul 24, 2024
77b2f6f
fixup! refactor(NcAppNavigation): do not rely on $app-navigation-padding
ShGKme Jul 24, 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
50 changes: 30 additions & 20 deletions src/components/NcAppSidebar/NcAppSidebar.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,13 @@
-->

<docs>
### Exposed CSS Variables

| Variable | Description |
|-------------------------|-------------------------------------------------------------------------------------------------------------------------------------------|
| `--app-sidebar-padding` | The padding between the toggle button and the page border. |
| `--app-sidebar-offset` | The minimal offset width required to be reserved for the toggle button. <br /> Automatically changes to 0 when there is no toggle button. |

### General description

This component provides a way to include the standardised sidebar.
Expand Down Expand Up @@ -1243,23 +1250,28 @@ export default {
inherits: true;
}

.content {
ShGKme marked this conversation as resolved.
Show resolved Hide resolved
// A padding between the toggle button and the page border
--app-sidebar-padding: #{$app-navigation-padding};
// A padding between the toggle button and the page border
body {
/**
* The padding between the toggle button and the page border
*/
--app-sidebar-padding: calc(var(--default-grid-baseline, 4px) * 2);
/**
* The minimal offset width required to be reserved for the toggle button.
* Automatically changes to 0 when there is no toggle button.
*/
--app-sidebar-offset: 0;
// Explicitly disable transition by default to enable it only when sidebar animation is active
// !important to override styles from an older version, because it's global non-scoped styles
transition: --app-sidebar-offset 0ms !important;
}

// When AppSidebar is animation is active - also apply transition for the toggle button offset
.content:has(.app-sidebar.slide-right-enter-active),
.content:has(.app-sidebar.slide-right-leave-active) {
body:has(.app-sidebar.slide-right-enter-active),
body:has(.app-sidebar.slide-right-leave-active) {
transition: --app-sidebar-offset var(--animation-quick);
}

.content:has(.app-sidebar__toggle) {
body:has(.app-sidebar__toggle) {
--app-sidebar-offset: calc(var(--app-sidebar-padding) + var(--default-clickable-area));
}
</style>
Expand All @@ -1272,8 +1284,6 @@ $desc-name-height: 30px;
$desc-subname-height: 22px;
$desc-height: $desc-name-height + $desc-subname-height;

$top-buttons-spacing: $app-navigation-padding; // align with app navigation

/*
Sidebar: to be used within #content
app-content will be shrinked properly
Expand Down Expand Up @@ -1308,8 +1318,8 @@ $top-buttons-spacing: $app-navigation-padding; // align with app navigation
> .app-sidebar__close {
position: absolute;
z-index: 100;
top: $top-buttons-spacing;
right: $top-buttons-spacing;
top: var(--app-sidebar-padding);
right: var(--app-sidebar-padding);
width: var(--default-clickable-area);
height: var(--default-clickable-area);
opacity: $opacity_normal;
Expand Down Expand Up @@ -1340,11 +1350,11 @@ $top-buttons-spacing: $app-navigation-padding; // align with app navigation
padding-left: 0;
flex: 1 1 auto;
min-width: 0;
padding-right: calc(2 * var(--default-clickable-area) + $top-buttons-spacing);
padding-right: calc(2 * var(--default-clickable-area) + var(--app-sidebar-padding));
padding-top: var(--app-sidebar-padding);

&.app-sidebar-header__desc--without-actions {
padding-right: calc(var(--default-clickable-area) + $top-buttons-spacing);
padding-right: calc(var(--default-clickable-area) + var(--app-sidebar-padding));
}

.app-sidebar-header__tertiary-actions {
Expand All @@ -1355,8 +1365,8 @@ $top-buttons-spacing: $app-navigation-padding; // align with app navigation
gap: 0; // override gap
}
.app-sidebar-header__menu {
top: $top-buttons-spacing;
right: calc(var(--default-clickable-area) + $top-buttons-spacing); // left of the close button
top: var(--app-sidebar-padding);
right: calc(var(--default-clickable-area) + var(--app-sidebar-padding)); // left of the close button
position: absolute;
}
}
Expand All @@ -1368,15 +1378,15 @@ $top-buttons-spacing: $app-navigation-padding; // align with app navigation
// align the menu with the close button
.app-sidebar-header__menu {
position: absolute;
top: $top-buttons-spacing;
right: calc($top-buttons-spacing + var(--default-clickable-area));
top: var(--app-sidebar-padding);
right: calc(var(--app-sidebar-padding) + var(--default-clickable-area));
}
// increase the padding to not overlap the menu
.app-sidebar-header__desc {
padding-right: calc(var(--default-clickable-area) * 2 + $top-buttons-spacing);
padding-right: calc(var(--default-clickable-area) * 2 + var(--app-sidebar-padding));

&.app-sidebar-header__desc--without-actions {
padding-right: calc(var(--default-clickable-area) + $top-buttons-spacing);
padding-right: calc(var(--default-clickable-area) + var(--app-sidebar-padding));
}
}
}
Expand Down Expand Up @@ -1408,7 +1418,7 @@ $top-buttons-spacing: $app-navigation-padding; // align with app navigation
justify-content: center;
align-items: center;
padding-inline: var(--app-sidebar-padding);
padding-block: #{$top-buttons-spacing} calc(var(--app-sidebar-padding) / 2);
padding-block: var(--app-sidebar-padding) calc(var(--app-sidebar-padding) / 2);
gap: 0 4px;

// custom overrides
Expand Down
Loading