mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-17 19:06:40 +02:00
Code Issues Releases Wiki Activity

Move sidebar icon to CSS

Browse Source
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
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"> <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 }}"> <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> <div>{{- $group.title -}}</div>
</a> </a>
@@ -38,7 +37,9 @@
<li class="my-3 mx-4 border-top"></li> <li class="my-3 mx-4 border-top"></li>
<li class="bd-sidenav-group pl-3"> <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> </li>
</ul> </ul>
</nav> </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); color: rgba(0, 0, 0, .65);
@include border-radius(.25rem); @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; } > * { pointer-events: none; }
&:hover { &:hover {
@@ -52,15 +64,9 @@
} }
} }
.bd-sidenav-group-link-icon {
width: .875rem;
margin-right: .25rem;
opacity: .5;
}
.bd-sidenav-group { .bd-sidenav-group {
&.active { &.active {
.bd-sidenav-group-link-icon { .bd-sidenav-group-link::before {
transform: rotate(90deg); 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 // All levels of nav
.bd-sidebar .nav { .bd-sidebar .nav {
padding-left: 1.25rem; padding-left: 1.25rem;