overleaf/services/web/frontend/stylesheets/bootstrap-5/pages/project-list-react.scss
ilkin-overleaf 920bbe4bac Merge pull request #18527 from overleaf/ii-bs5-projects-structure
[web] Create the sidebar and projects columns in dashboard page (BS5)

GitOrigin-RevId: 9096d6932980c10816411fc18570ad88df68a6d6
2024-05-30 08:04:44 +00:00

65 lines
1.4 KiB
SCSS

.project-list-react {
body > &.content {
padding-top: $header-height;
padding-bottom: 0;
min-height: calc(100vh - #{$header-height});
display: flex;
flex-direction: column;
}
.project-list-wrapper {
display: flex;
align-items: stretch;
width: 100%;
min-height: calc(100vh - #{$header-height});
}
.project-list-sidebar-wrapper-react {
position: relative;
background-color: var(--bg-dark-secondary);
flex: 0 0 15%;
min-height: calc(100vh - #{$header-height});
max-width: 320px;
min-width: 200px;
.project-list-sidebar-subwrapper {
display: flex;
flex-direction: column;
height: 100%;
.project-list-sidebar-react {
flex-grow: 1;
padding-left: var(--spacing-06);
padding-right: var(--spacing-06);
-ms-overflow-style: -ms-autohiding-scrollbar;
padding-top: var(--spacing-08);
padding-bottom: var(--spacing-08);
color: var(--neutral-40);
.small {
color: var(--neutral-40);
}
button {
white-space: normal;
word-wrap: anywhere;
// prevents buttons from expanding sidebar width
}
> .dropdown {
width: 100%;
.new-project-button {
width: 100%;
}
}
}
}
}
.project-list-main-react {
flex: 1;
overflow-x: hidden;
padding: var(--spacing-08) var(--spacing-06);
}
}