mirror of
https://github.com/twbs/bootstrap.git
synced 2025-08-27 07:14:36 +02:00
Simplify sidebar styles
This commit is contained in:
committed by
XhmikosR
parent
9efaeba35e
commit
4448856038
@@ -1,73 +1,64 @@
|
||||
// stylelint-disable declaration-no-important
|
||||
|
||||
.bd-links {
|
||||
@include media-breakpoint-up(md) {
|
||||
@supports (position: sticky) {
|
||||
position: sticky;
|
||||
top: 5rem;
|
||||
height: subtract(100vh, 7rem);
|
||||
overflow-y: auto;
|
||||
}
|
||||
}
|
||||
|
||||
// Override collapse behaviors
|
||||
@include media-breakpoint-up(md) {
|
||||
display: block !important;
|
||||
}
|
||||
}
|
||||
|
||||
.bd-sidenav-group-link {
|
||||
padding: .25rem .625rem .25rem .5rem;
|
||||
font-weight: 600;
|
||||
color: rgba($black, .65);
|
||||
text-decoration: none;
|
||||
@include border-radius(.25rem);
|
||||
|
||||
> * { pointer-events: none; }
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: rgba($black, .85);
|
||||
background-color: rgba($bd-purple-bright, .1);
|
||||
@include media-breakpoint-up(md) {
|
||||
position: sticky;
|
||||
top: 5rem;
|
||||
// Override collapse behaviors
|
||||
// stylelint-disable-next-line declaration-no-important
|
||||
display: block !important;
|
||||
height: subtract(100vh, 7rem);
|
||||
// Prevent focus styles to be cut off:
|
||||
padding-left: .25rem;
|
||||
margin-left: -.25rem;
|
||||
overflow-y: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.bd-sidenav-group {
|
||||
&.has-children .bd-sidenav-group-link::before {
|
||||
display: inline-block;
|
||||
margin-right: .25rem;
|
||||
line-height: 0; // Align in the middle
|
||||
content: escape-svg($sidebar-collapse-icon);
|
||||
@include transition(transform .35s ease);
|
||||
}
|
||||
|
||||
[aria-expanded="true"] {
|
||||
color: rgba($black, .85);
|
||||
|
||||
&::before {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// All levels of nav
|
||||
.bd-sidebar .nav {
|
||||
flex-flow: column nowrap;
|
||||
padding-left: 1.25rem;
|
||||
|
||||
a {
|
||||
display: inline-block;
|
||||
padding: .25rem .5rem;
|
||||
@include font-size(.875rem);
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: .1875rem .5rem;
|
||||
margin-top: .125rem;
|
||||
color: rgba($black, .65);
|
||||
text-decoration: none;
|
||||
text-decoration: if($link-decoration == none, null, none);
|
||||
@include border-radius(.25rem);
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: rgba($black, .85);
|
||||
text-decoration: if($link-hover-decoration == underline, none, null);
|
||||
background-color: rgba($bd-purple-bright, .1);
|
||||
}
|
||||
|
||||
// Indent if there's no submenu
|
||||
&:only-child {
|
||||
margin-left: 1.25rem;
|
||||
}
|
||||
|
||||
// Add chevron if there's a submenu
|
||||
&:not(:only-child) {
|
||||
&::before {
|
||||
width: 1.25em;
|
||||
line-height: 0; // Align in the middle
|
||||
content: escape-svg($sidebar-collapse-icon);
|
||||
@include transition(transform .35s ease);
|
||||
transform-origin: .5em 50%;
|
||||
}
|
||||
|
||||
&:not(.collapsed) {
|
||||
color: rgba($black, .85);
|
||||
|
||||
&::before {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Adjust font size and font weights in submenu
|
||||
+ ul {
|
||||
@include font-size(.875rem);
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
|
||||
.active {
|
||||
|
Reference in New Issue
Block a user