Add scroll shadow to drawer

This commit is contained in:
squidfunk 2016-12-29 12:10:51 +01:00
parent a1105b81f1
commit 9f8ef33545
3 changed files with 28 additions and 5 deletions

View File

@ -36,7 +36,7 @@
{% include "partials/fonts.html" %}
{% endblock %}
{% block styles %}
<link rel="stylesheet" href="{{ base_url }}/assets/stylesheets/application-4791f8c70f.css">
<link rel="stylesheet" href="{{ base_url }}/assets/stylesheets/application-aa20c49e63.css">
{% if config.extra.palette %}
<link rel="stylesheet" href="{{ base_url }}/assets/stylesheets/application-0352baa348.palette.css">
{% endif %}

View File

@ -196,9 +196,32 @@
color: $md-color-black--light;
}
// Remove border for first list item
~ .md-nav__list > .md-nav__item:first-child {
border-top: 0;
// Main lists
~ .md-nav__list {
// Pure CSS scrolling shadows, taken from
// http://lea.verou.me/2012/04/background-attachment-local/
background:
linear-gradient(
to bottom,
$md-color-white 10%,
$md-color-white--transparent),
linear-gradient(
to bottom,
$md-color-black--lighter,
$md-color-black--lightest 35%,
$md-color-black--transparent 60%);
background-attachment: local, scroll;
background-color: $md-color-white;
background-repeat: no-repeat;
background-size: 100% 2.0rem, 100% 1.0rem;
box-shadow: 0 0.1rem 0 $md-color-black--lightest inset;
// Remove border for first list item
& > .md-nav__item:first-child {
border-top: 0;
}
}
// Site title in main navigation