Agile611/the-example-app-nodejs
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(breadcrumb): proper styling and separator

Browse Source
This commit is contained in:
Benedikt Rötsch
2017-10-06 16:44:43 +02:00
committed by Benedikt Rötsch
parent 1ca400234e
commit f5a276581a
3 changed files with 29 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
assets/stylesheets/global/breadcrumb.css
View File

@@ -1,6 +1,8 @@
@block breadcrumb { @block breadcrumb {
margin-bottom: calc(var(--grid-gutter) * 0.25); margin-bottom: calc(var(--grid-gutter) * 0.25);
font-size: 0.875em;
& ul { & ul {
display: flex; display: flex;
list-style: none; list-style: none;
@@ -9,27 +11,31 @@
padding: 0; padding: 0;
& li { & li {
margin: 0; margin: 0;
& + li { &:after{
margin-left: calc(var(--grid-gutter) / 4); content: '';
display: inline-block;
background: url('/images/icon-breadcrumb.svg');
background-size: contain;
background-position: center center;
background-repeat: no-repeat;
width: 4px;
height: 8px;
padding: 0 calc(var(--grid-gutter) / 4);
} }
&:after{
content: ' >';
}
&:last-child:after{ &:last-child:after{
content: ''; display: none;
} }
& a { & a {
display: inline-block; display: inline-block;
text-transform: capitalize; text-transform: capitalize;
&:hover { &:hover {
color: var(--color-link-content-hover); color: var(--color-link-content-hover);
} }
} }
} }
} }

3
public/images/icon-breadcrumb.svg Normal file
View File

@@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="5" height="8" viewBox="0 0 5 8">
<path fill="none" fill-rule="evenodd" stroke="#8091A5" stroke-width="1.5" d="M1 7l3-2.89L1 1"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 187 B

18
public/stylesheets/style.css
View File

@@ -1486,6 +1486,8 @@ display: flex;
.breadcrumb { .breadcrumb {
margin-bottom: 5.5px; margin-bottom: 5.5px;
font-size: 0.875em;
} }
.breadcrumb ul { .breadcrumb ul {
@@ -1503,16 +1505,20 @@ display: flex;
margin: 0; margin: 0;
} }
.breadcrumb ul li + li {
margin-left: 5.5px;
}
.breadcrumb ul li:after { .breadcrumb ul li:after {
content: ' >'; content: '';
display: inline-block;
background: url('/images/icon-breadcrumb.svg');
background-size: contain;
background-position: center center;
background-repeat: no-repeat;
width: 4px;
height: 8px;
padding: 0 5.5px;
} }
.breadcrumb ul li:last-child:after { .breadcrumb ul li:last-child:after {
content: ''; display: none;
} }
.breadcrumb ul li a { .breadcrumb ul li a {