root
/
bootstrap
mirror of https://github.com/twbs/bootstrap.git
1
0
Fork 0
Code Issues Actions 3 Packages Projects Releases Wiki Activity

Move sidebar icon to CSS

This commit is contained in:
Mark Otto 2019-07-16 16:00:46 -07:00 committed by XhmikosR
parent 8bc6692082
commit ebcc3ff9af
3 changed files with 21 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
site/layouts/partials/docs-sidebar.html
View File

@ -17,7 +17,6 @@
<li class="bd-sidenav-group my-1{{ if $active_group }} active{{ end }} js-sidenav-group">
<a class="d-inline-flex align-items-center bd-sidenav-group-link" href="/docs/{{ $.Site.Params.docs_version }}/{{ $group_slug }}/{{ if $group.pages }}{{ $link_slug }}/{{ end }}">
{{- partial "icons/arrow.svg" (dict "class" "bd-sidenav-group-link-icon" "width" "16" "height" "16") -}}
<div>{{- $group.title -}}</div>
</a>
@ -38,7 +37,9 @@
<li class="my-3 mx-4 border-top"></li>
<li class="bd-sidenav-group pl-3">
<a class="d-inline-flex bd-sidenav-group-link" href="/docs/{{ $.Site.Params.docs_version }}/migration/">Migration</a>
<a class="d-inline-flex align-items-center bd-sidenav-group-link" href="/docs/{{ $.Site.Params.docs_version }}/migration/">
<div>Migration</div>
</a>
</li>
</ul>
</nav>

1
site/layouts/partials/icons/arrow.svg
View File

@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg"{{ with .width }} width="{{ . }}"{{ end }}{{ with .height }} height="{{ . }}"{{ end }}{{ with .class }} class="{{ . }}"{{ end }} viewBox="0 0 16 16"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 14l6-6-6-6"/></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 318 B

25
site/static/docs/4.3/assets/scss/_sidebar.scss
View File

@ -43,6 +43,18 @@
color: rgba(0, 0, 0, .65);
@include border-radius(.25rem);
&::before {
display: inline-block;
width: .875rem;
height: .875rem;
margin-right: .25rem;
content: "";
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" role="img"><path stroke="currentColor" stroke-width="2" d="M5 14l6-6-6-6" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"/></svg>');
background-repeat: no-repeat;
background-position: center center;
opacity: .5;
}
> * { pointer-events: none; }
&:hover {
@ -52,15 +64,9 @@
}
}
.bd-sidenav-group-link-icon {
width: .875rem;
margin-right: .25rem;
opacity: .5;
}
.bd-sidenav-group {
&.active {
.bd-sidenav-group-link-icon {
.bd-sidenav-group-link::before {
transform: rotate(90deg);
}
@ -74,6 +80,11 @@
}
}
// Hide icon on last item
.bd-sidenav-group:last-child .bd-sidenav-group-link::before {
display: none;
}
// All levels of nav
.bd-sidebar .nav {
padding-left: 1.25rem;