Files
erp_naurua/docs/styleguide/styles/29-patterns-left-navigation.css
T

83 lines
1.7 KiB
CSS

/* ========================================================= */
/* Patterns: Left Navigation */
/* ========================================================= */
.sg-left-navigation-pattern {
display: flex;
flex-direction: column;
gap: var(--spacing-small);
}
.sg-left-navigation-pattern__layout {
display: flex;
align-items: stretch;
gap: 0;
width: 100%;
min-width: 0;
}
.sg-left-navigation-pattern__header-row {
display: none;
}
.sg-left-navigation-pattern__toggle {
display: none;
}
.sg-left-navigation-pattern__menu--collapsed {
display: none;
}
.sg-left-navigation-pattern__group-card {
min-width: 0;
}
.sg-left-navigation-pattern__group-card--navigation {
flex: 0 0 15vw;
width: 15vw;
max-width: 15vw;
padding: var(--spacing-small);
margin: 0 var(--spacing-small) var(--spacing-small) 0;
}
.sg-left-navigation-pattern__group-card--content {
flex: 1 1 auto;
}
@media (min-width: 768px) {
.sg-left-navigation-pattern__group-card--navigation .sg-tab-button-group[data-component-variant="linksmenu-items"] {
height: 100%;
justify-content: flex-start;
}
}
@media (max-width: 767px) {
.sg-left-navigation-pattern__layout {
flex-direction: column;
}
.sg-left-navigation-pattern__header-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--spacing-small);
margin-bottom: 0;
}
.sg-left-navigation-pattern__toggle {
display: inline-flex;
flex: 0 0 auto;
}
.sg-left-navigation-pattern__group-card--navigation {
flex: 0 0 auto;
width: 100%;
max-width: none;
margin: 0;
}
.sg-left-navigation-pattern__group-card--content {
margin-top: var(--spacing-small);
}
}