Experimentation

This commit is contained in:
James Barnsley
2017-06-16 20:05:32 +12:00
parent ffe790a33b
commit 5d0c365943
7 changed files with 32 additions and 52 deletions

View File

@ -2,20 +2,19 @@
main {
header {
padding: 14px 20px;
background: #EEEEEE;
line-height: 24px;
box-sizing: border-box;
h1 {
font-size: 22px;
font-weight: 100;
display: inline-block;
}
.icon {
display: inline-block;
padding-right: 14px;
height: 16px;
height: 2.5rem;
vertical-align: bottom;
margin-bottom: -5px;
}
.options {

View File

@ -13,8 +13,8 @@
display: block;
position: relative;
padding: 12px 10px 12px 20px;
border-top: 1px solid $faint_grey;
border-bottom: 1px solid $faint_grey;
border-top: 1px solid $light_grey;
border-bottom: 1px solid $light_grey;
margin-bottom: -1px;
cursor: pointer;

View File

@ -5,10 +5,10 @@
input {
background: transparent;
border-bottom: 1px solid #FFFFFF;
border-bottom: 1px solid $light_grey;
padding: 16px 0 8px;
width: 100%;
color: #FFFFFF;
color: $black;
&:focus,
&:active {

View File

@ -5,10 +5,9 @@ aside{
left: 0;
bottom: 0;
z-index: 96;
background: $darkest_grey;
width: 220px;
overflow: hidden;
box-shadow: inset -20px 0px 30px -20px rgba(0, 0, 0, 0.5);
border-right: 2px solid $light_grey;
.liner {
overflow-y: auto;
@ -45,25 +44,6 @@ aside{
bottom: 60px;
}
}
.thumbnail {
position: absolute;
top: -30px;
right: -30px;
bottom: -30px;
left: -30px;
height: auto;
width: auto;
max-width: none;
z-index: 1;
opacity: 0.2;
.image {
@include blur();
padding-bottom: 0;
height: 100%;
}
}
nav {
z-index: 2;
@ -72,10 +52,10 @@ aside{
a {
font-size: 16px;
color: #FFFFFF;
color: $black;
text-decoration: none;
display: block;
padding: 6px 18px 6px 14px;
padding: 6px 18px 6px 6px;
border-left: 4px solid transparent;
.icon {
@ -86,8 +66,7 @@ aside{
}
&.active {
border-color: $turquoise;
background: rgba( 0, 0, 0, 0.5 );
color: $turquoise;
}
&[disabled] {
@ -96,7 +75,7 @@ aside{
}
&:hover:not([disabled]) {
background: rgba( 255, 255, 255, 0.1 );
color: $secondary_grey;
}
}
@ -105,11 +84,11 @@ aside{
title {
display: block;
padding: 0 18px 2px;
padding: 0 18px 2px 6px;
font-size: 11px;
text-transform: uppercase;
opacity: 0.5;
color: #FFFFFF;
color: $mid_grey;
}
}