Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-02-24 23:48:13 -05:00
Code Issues Activity

Refined sidebar view icons

Browse source 
no refs.
- replaced icons for custom views for circles so it's more scannable
This commit is contained in:
Peter Zimon 2020-02-03 14:45:18 +01:00
parent 1adae0d041
commit 2c137f0b38
2 changed files with 41 additions and 62 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

95
ghost/admin/app/styles/layouts/main.css
View file

@ -480,85 +480,58 @@
text-overflow: ellipsis;
}
.gh-nav-view-list a .svg-blue svg {
fill: var(--blue);
.gh-nav-view-list .circle {
display: block;
border-radius: 999px;
border: 3px solid var(--midgrey);
width: 12px;
height: 12px;
margin: 0 10px 0 2px;
}
.gh-nav-view-list a:hover .svg-blue svg,
.gh-nav-view-list .active .svg-blue svg {
fill: color-mod(var(--blue) l(-8%));
.gh-nav-view-list .svg-midgrey .circle {
border-color: var(--midgrey);
background: var(--midgrey);
}
.gh-nav-view-list a .svg-green svg {
fill: var(--green);
.gh-nav-view-list .svg-blue .circle {
border-color: var(--blue);
background: var(--blue);
}
.gh-nav-view-list a:hover .svg-green svg,
.gh-nav-view-list .active .svg-green svg {
fill: color-mod(var(--green) l(-8%));
.gh-nav-view-list .svg-green .circle {
border-color: var(--green);
background: var(--green);
}
.gh-nav-view-list a .svg-purple svg {
fill: var(--purple);
.gh-nav-view-list .svg-red .circle {
border-color: var(--red);
background: var(--red);
}
.gh-nav-view-list a:hover .svg-purple svg,
.gh-nav-view-list .active .svg-purple svg {
fill: color-mod(var(--purple) l(-8%));
.gh-nav-view-list .svg-teal .circle {
border-color: #4dcddc;
background: #4dcddc;
}
.gh-nav-view-list a .svg-yellow svg {
fill: color-mod(var(--yellow) l(-5%));
.gh-nav-view-list .svg-purple .circle {
border-color: var(--purple);
background: var(--purple);
}
.gh-nav-view-list a:hover .svg-yellow svg,
.gh-nav-view-list .active .svg-yellow svg {
fill: color-mod(var(--yellow) l(-12%));
.gh-nav-view-list .svg-yellow .circle {
border-color: var(--yellow);
background: var(--yellow);
}
.gh-nav-view-list a .svg-red svg {
fill: var(--red);
.gh-nav-view-list .svg-orange .circle {
border-color: #fe8b05;
background: #fe8b05;
}
.gh-nav-view-list a:hover .svg-red svg,
.gh-nav-view-list .active .svg-red svg {
fill: color-mod(var(--red) l(-8%));
}
.gh-nav-view-list a .svg-pink svg {
fill: var(--pink);
}
.gh-nav-view-list a:hover .svg-pink svg,
.gh-nav-view-list .active .svg-pink svg {
fill: color-mod(var(--pink) l(-8%));
}
.gh-nav-view-list a .svg-midgrey svg {
fill: var(--midgrey);
}
.gh-nav-view-list a:hover .svg-midgrey svg,
.gh-nav-view-list .active .svg-midgrey svg {
fill: var(--darkgrey);
}
.gh-nav-view-list a .svg-teal svg {
fill: #4dcddc;
}
.gh-nav-view-list a:hover .svg-teal svg,
.gh-nav-view-list .active .svg-teal svg {
fill: color-mod(#4dcddc l(-8%));
}
.gh-nav-view-list a .svg-orange svg {
fill: #fe8b05;
}
.gh-nav-view-list a:hover .svg-orange svg,
.gh-nav-view-list .active .svg-orange svg {
fill: color-mod(#fe8b05 l(-8%));
.gh-nav-view-list .svg-pink .circle {
border-color: var(--pink);
background: var(--pink);
}
/* Mobile Nav Menu (Slides out)

8
ghost/admin/app/templates/components/gh-nav-menu.hbs
View file

@ -43,7 +43,13 @@
<li>
<LinkTo @route="posts" @query={{reset-posts-query view.filter}} data-test-nav-custom="{{view.route}}-{{view.name}}" title="{{view.name}}">
{{!-- <div class="dib w4 h4 mr2 bg-{{view.color}} br-100"></div> --}}
<span class="flex items-center svg-{{view.color}}">{{svg-jar (or view.icon "post")}}</span>
<span class="flex items-center svg-{{view.color}}">
{{#if view.icon}}
{{svg-jar (or view.icon "post")}}
{{else}}
<span class="circle"></span>
{{/if}}
</span>
<span class="gh-nav-viewname">{{view.name}}</span>
</LinkTo>
</li>