pk/atst
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix side nav to match designs and delete unused html and css

Browse Source
This commit is contained in:
leigh-mil 2019-12-18 16:49:58 -05:00
parent d84e1d58f3
commit 8fbb0e99ae
3 changed files with 12 additions and 117 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

91
styles/elements/_sidenav.scss
View File

@ -72,7 +72,7 @@
&.sidenav__list--padded {
margin-top: 3 * $gap;
margin-bottom: $footer-height;
padding: 0 $gap ($gap * 2);
padding-bottom: ($gap * 2);
position: fixed;
overflow-y: scroll;
top: $topbar-height + $usa-banner-height + 4rem;
@ -109,100 +109,19 @@
&__link {
display: block;
padding: $gap ($gap * 2);
color: $color-black;
text-decoration: none;
white-space: nowrap;
overflow: hidden;
color: $color-black-light;
text-decoration: none;
text-overflow: ellipsis;
&-icon {
margin-left: -($gap * 0.5);
}
&--disabled {
color: $color-shadow;
pointer-events: none;
}
&--add {
color: $color-blue;
font-size: $small-font-size;
.icon {
@include icon-color($color-blue);
@include icon-size(14);
}
}
&--active {
@include h4;
color: $color-primary;
background-color: $color-aqua-lightest;
box-shadow: inset ($gap / 2) 0 0 0 $color-primary;
.sidenav__link-icon {
@include icon-style-active;
}
box-shadow: inset ($gap / 2) 0 0 0 $color-primary-darker;
position: relative;
&_indicator .icon {
@include icon-color($color-primary);
position: absolute;
right: 0;
}
+ ul {
background-color: $color-primary;
.sidenav__link {
color: $color-white;
background-color: $color-primary;
&:hover {
background-color: $color-blue-darker;
}
&--active {
@include h5;
color: $color-white;
background-color: $color-primary;
box-shadow: none;
}
.icon {
@include icon-color($color-white);
}
}
}
}
+ ul {
li {
.sidenav__link {
@include h5;
padding: $gap * 0.75;
padding-left: 4.5rem;
border: 0;
font-weight: normal;
.sidenav__link-icon {
@include icon-size(12);
flex-shrink: 0;
margin-right: 1.5rem;
margin-left: -3rem;
}
.sidenav__link-label {
padding-left: 0;
}
}
}
color: $color-primary-darker;
}
&:hover {

34
templates/components/sidenav_item.html
View File

@ -1,35 +1,11 @@
{% from "components/icon.html" import Icon %}
{% macro SidenavItem(label, href, active=False, icon=None, subnav=None) -%}
{% macro SidenavItem(label, href, active=False) -%}
<li>
<a class="sidenav__link {% if active %}sidenav__link--active{% endif %}" href="{{href}}" title="{{label}}">
{% if icon %}
{{ Icon(icon, classes="sidenav__link-icon") }}
{% endif %}
<span class="sidenav__link-label">
{{label}}
</span>
{% if active %}
<span class="sidenav__link-active_indicator">
{{ Icon("caret_right") }}
<a class="sidenav__link {% if active %}sidenav__link--active{% endif %}" href="{{href}}" title="{{label}}">
<span class="sidenav__link-label">
{{label}}
</span>
{% endif %}
</a>
{% if subnav and active %}
<ul>
{% for item in subnav %}
<li>
<a class="sidenav__link {% if item["active"] %}sidenav__link--active{% endif %}" href="{{item["href"]}}" title="{{item["label"]}}">
{% if "icon" in item %}
{{ Icon(item["icon"], classes="sidenav__link-icon") }}
{% endif %}
<span class="sidenav__link-label">{{item["label"]}}</span>
</a>
</li>
{% endfor %}
</ul>
{% endif %}
</a>
</li>
{%- endmacro %}