cleans up signed in users navigation
This commit is contained in:
Galen Frechette
@@ -19,6 +19,26 @@ header.app {
|
||||
float: left;
|
||||
height: 100%;
|
||||
margin: 16px 15px 0px 0px;
|
||||
position: relative;
|
||||
|
||||
img {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
&::before {
|
||||
@include background-image(radial-gradient(50% 50%, circle closest-side, rgba(255,255,255, 0.8) 0%, rgba(255,255,255, 0) 100%));
|
||||
content: "";
|
||||
display: block;
|
||||
height: 90px;
|
||||
left: -20px;
|
||||
position: absolute;
|
||||
top: -32px;
|
||||
width: 90px;
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.divider {
|
||||
@@ -79,6 +99,8 @@ header.app {
|
||||
}
|
||||
|
||||
li.primary {
|
||||
position: relative;
|
||||
|
||||
a {
|
||||
border: 1px solid transparent;
|
||||
@include border-radius(3px);
|
||||
@@ -86,16 +108,16 @@ header.app {
|
||||
color: $base-font-color;
|
||||
display: block;
|
||||
font: normal 1.2rem/1.4rem $sans-serif;
|
||||
height: 30px;
|
||||
height: 38px;
|
||||
@include inline-block;
|
||||
margin: 5px;
|
||||
padding: 6px 8px;
|
||||
margin: 1px 5px;
|
||||
padding: 10px 8px;
|
||||
text-decoration: none;
|
||||
text-transform: uppercase;
|
||||
text-shadow: 0 1px rgba(255,255,255, 0.6);
|
||||
vertical-align: middle;
|
||||
|
||||
&:hover {
|
||||
&:hover, &.active {
|
||||
@include background-image(linear-gradient(-90deg, rgb(245,245,245) 0%, rgb(243,243,243) 50%, rgb(237,237,237) 50%, rgb(235,235,235) 100%));
|
||||
border-color: rgb(200,200,200);
|
||||
@include box-shadow(0 1px 0 0 rgba(255,255,255, 0.6));
|
||||
@@ -103,163 +125,126 @@ header.app {
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
nav.user {
|
||||
float: right;
|
||||
&.user {
|
||||
float: right;
|
||||
|
||||
ol {
|
||||
font-size: 0em;
|
||||
|
||||
li {
|
||||
border-right: 1px solid rgb(200,200,200);
|
||||
@include inline-block;
|
||||
margin-top: 10px;
|
||||
padding: 0px 5px;
|
||||
a.user-link {
|
||||
padding: 9px 8px 11px 40px;
|
||||
position: relative;
|
||||
vertical-align: bottom;
|
||||
text-transform: none;
|
||||
|
||||
a {
|
||||
@include border-radius(3px);
|
||||
color: $lighter-base-font-color;
|
||||
display: block;
|
||||
font: normal italic 1.2rem/1.2rem $serif;
|
||||
height: 15px;
|
||||
padding: 10px;
|
||||
text-decoration: none;
|
||||
text-transform: lowercase;
|
||||
text-shadow: 0 1px rgba(255,255,255, 0.4);
|
||||
|
||||
&:hover {
|
||||
background: rgb(220,220,220);
|
||||
color: $base-font-color;
|
||||
}
|
||||
|
||||
&.active {
|
||||
background: rgb(220,220,220);
|
||||
color: $base-font-color;
|
||||
}
|
||||
|
||||
&.options {
|
||||
font: normal 1.2rem/1.2rem $sans-serif;
|
||||
padding-right: 10px;
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
&.user-link {
|
||||
font: normal 1.2rem/1.2rem $sans-serif;
|
||||
padding: 10px 10px 10px 45px;
|
||||
text-transform: none;
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
font-size: 0em;
|
||||
padding: 10px 0px;
|
||||
width: 38px;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
background: rgb(220,220,220);
|
||||
@include border-radius(3px);
|
||||
border: 1px solid rgb(180,180,180);
|
||||
@include box-shadow(0 1px 0 0 rgba(255,255,255, 0.6));
|
||||
height: 22px;
|
||||
@include inline-block;
|
||||
left: 15px;
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
width: 22px;
|
||||
|
||||
&::after {
|
||||
@include background-image(linear-gradient((-60deg), rgba(0,0,0, 0) 0%, rgba(0,0,0, 0.1) 50%, rgba(0,0,0, 0.2) 50%, rgba(0,0,0, 0.3) 100%));
|
||||
content: "";
|
||||
display: block;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
right: 0px;
|
||||
top: 0px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
img {
|
||||
@include border-radius(4px);
|
||||
display: block;
|
||||
min-height: 100%;
|
||||
min-width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 768px) {
|
||||
font-size: 0em;
|
||||
padding: 10px 0px;
|
||||
width: 38px;
|
||||
}
|
||||
|
||||
ol.user-options {
|
||||
@include border-radius(4px);
|
||||
@include box-shadow(0 1px 6px 0 rgba(0,0,0, 0.3));
|
||||
border: 1px solid rgb(200,200,200);
|
||||
.avatar {
|
||||
background: rgb(220,220,220);
|
||||
display: none;
|
||||
right: 4px;
|
||||
padding: 5px 10px;
|
||||
@include border-radius(3px);
|
||||
border: 1px solid rgb(180,180,180);
|
||||
@include box-shadow(0 1px 0 0 rgba(255,255,255, 0.6));
|
||||
height: 22px;
|
||||
@include inline-block;
|
||||
left: 8px;
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
top: 50px;
|
||||
width: 170px;
|
||||
z-index: 3;
|
||||
top: 6px;
|
||||
width: 22px;
|
||||
|
||||
&.expanded {
|
||||
display: block;
|
||||
}
|
||||
|
||||
&::before {
|
||||
background: transparent;
|
||||
border: {
|
||||
top: 8px solid rgb(220,220,220);
|
||||
right: 8px solid rgb(220,220,220);
|
||||
bottom: 8px solid transparent;
|
||||
left: 8px solid transparent;
|
||||
}
|
||||
@include box-shadow(1px 0 0 0 rgb(200,200,200), 0 -1px 0 0 rgb(200,200,200));
|
||||
&::after {
|
||||
@include background-image(linear-gradient((-60deg), rgba(0,0,0, 0) 0%, rgba(0,0,0, 0.1) 50%, rgba(0,0,0, 0.2) 50%, rgba(0,0,0, 0.3) 100%));
|
||||
content: "";
|
||||
display: block;
|
||||
height: 0px;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
@include transform(rotate(-45deg));
|
||||
right: 10px;
|
||||
top: -7px;
|
||||
width: 0px;
|
||||
right: 0px;
|
||||
top: 0px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
li {
|
||||
border: {
|
||||
top: 1px solid rgb(200,200,200);
|
||||
right: none;
|
||||
bottom: none;
|
||||
left: none;
|
||||
}
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
img {
|
||||
@include border-radius(4px);
|
||||
display: block;
|
||||
min-height: 100%;
|
||||
min-width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
ol.user-options {
|
||||
@include border-radius(4px);
|
||||
@include box-shadow(0 1px 6px 0 rgba(0,0,0, 0.3));
|
||||
border: 1px solid rgb(0,0,0);
|
||||
@include background-image(linear-gradient(-90deg, rgba(0,0,0, 0.9) 0%,
|
||||
rgba(0,0,0, 0.7) 100%));
|
||||
display: none;
|
||||
right: 0px;
|
||||
padding: 5px 10px;
|
||||
position: absolute;
|
||||
top: 52px;
|
||||
width: 150px;
|
||||
z-index: 3;
|
||||
|
||||
&.expanded {
|
||||
display: block;
|
||||
}
|
||||
|
||||
&::before {
|
||||
background: transparent;
|
||||
border: {
|
||||
top: 6px solid rgba(0,0,0, 1);
|
||||
right: 6px solid rgba(0,0,0, 1);
|
||||
bottom: 6px solid transparent;
|
||||
left: 6px solid transparent;
|
||||
}
|
||||
@include box-shadow(1px 0 0 0 rgb(0,0,0), 0 -1px 0 0 rgb(0,0,0));
|
||||
content: "";
|
||||
display: block;
|
||||
height: 0px;
|
||||
position: absolute;
|
||||
@include transform(rotate(-45deg));
|
||||
right: 12px;
|
||||
top: -6px;
|
||||
width: 0px;
|
||||
}
|
||||
|
||||
li {
|
||||
display: block;
|
||||
border-top: 1px solid rgba(0,0,0, 0.4);
|
||||
@include box-shadow(inset 0 1px 0 0 rgba(255,255,255, 0.05));
|
||||
|
||||
&:first-child {
|
||||
border: none;
|
||||
@include box-shadow(none);
|
||||
}
|
||||
|
||||
> a {
|
||||
@include box-sizing(border-box);
|
||||
color: rgba(255,255,255, 0.9);
|
||||
display: block;
|
||||
font: normal italic 1.2rem/1.4rem $serif;
|
||||
height: auto;
|
||||
margin: 5px 0px;
|
||||
overflow: hidden;
|
||||
padding: 3px 5px 4px;
|
||||
text-shadow: none;
|
||||
text-overflow: ellipsis;
|
||||
text-transform: none;
|
||||
@include transition(padding, 0.1s, linear);
|
||||
white-space: nowrap;
|
||||
width: 100%;
|
||||
|
||||
&:first-child {
|
||||
border: none;
|
||||
}
|
||||
|
||||
a {
|
||||
@include box-sizing(border-box);
|
||||
display: block;
|
||||
font: normal 1rem/1.2rem $sans-serif;
|
||||
height: auto;
|
||||
margin: 5px 0px;
|
||||
overflow: hidden;
|
||||
padding: 5px;
|
||||
text-overflow: ellipsis;
|
||||
@include transition(padding, 0.1s, linear);
|
||||
white-space: nowrap;
|
||||
width: 100%;
|
||||
|
||||
&:hover {
|
||||
background: rgb(255,255,255);
|
||||
padding: 5px 8px;
|
||||
}
|
||||
&:hover {
|
||||
background: $blue;
|
||||
@include background-image(linear-gradient(-90deg, lighten($blue, 15%) 0%,
|
||||
rgba($blue, 1) 100%));
|
||||
border-color: rgba(0,0,0, 1);
|
||||
@include box-shadow(none);
|
||||
padding-left: 8px;
|
||||
text-shadow: 0 -1px rgba(0,0,0, 0.2);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1030,7 +1030,25 @@ header.app {
|
||||
display: block;
|
||||
float: left;
|
||||
height: 100%;
|
||||
margin: 16px 15px 0px 0px; }
|
||||
margin: 16px 15px 0px 0px;
|
||||
position: relative; }
|
||||
header.app a.logo img {
|
||||
position: relative;
|
||||
z-index: 2; }
|
||||
header.app a.logo:hover::before {
|
||||
background-image: -webkit-radial-gradient(50% 50%, circle closest-side, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0) 100%);
|
||||
background-image: -moz-radial-gradient(50% 50%, circle closest-side, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0) 100%);
|
||||
background-image: -ms-radial-gradient(50% 50%, circle closest-side, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0) 100%);
|
||||
background-image: -o-radial-gradient(50% 50%, circle closest-side, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0) 100%);
|
||||
background-image: radial-gradient(50% 50%, circle closest-side, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0) 100%);
|
||||
content: "";
|
||||
display: block;
|
||||
height: 90px;
|
||||
left: -20px;
|
||||
position: absolute;
|
||||
top: -32px;
|
||||
width: 90px;
|
||||
z-index: 1; }
|
||||
header.app .divider {
|
||||
display: inline-block;
|
||||
vertical-align: baseline;
|
||||
@@ -1044,7 +1062,7 @@ header.app {
|
||||
margin-top: 8px; }
|
||||
header.app nav.find-courses {
|
||||
float: left; }
|
||||
header.app nav.guest, header.app nav.user {
|
||||
header.app nav.guest {
|
||||
float: right; }
|
||||
header.app nav ol {
|
||||
font-size: 0em; }
|
||||
@@ -1084,196 +1102,181 @@ header.app {
|
||||
margin-right: 0px; }
|
||||
header.app nav ol li.secondary a:hover {
|
||||
color: #3c3c3c; }
|
||||
header.app nav ol li.primary a {
|
||||
border: 1px solid transparent;
|
||||
-webkit-border-radius: 3px;
|
||||
-moz-border-radius: 3px;
|
||||
border-radius: 3px;
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
color: #3c3c3c;
|
||||
display: block;
|
||||
font: normal 1.2rem/1.4rem "Open Sans", Verdana, Geneva, sans-serif;
|
||||
height: 30px;
|
||||
display: inline-block;
|
||||
vertical-align: baseline;
|
||||
zoom: 1;
|
||||
*display: inline;
|
||||
*vertical-align: auto;
|
||||
margin: 5px;
|
||||
padding: 6px 8px;
|
||||
text-decoration: none;
|
||||
text-transform: uppercase;
|
||||
text-shadow: 0 1px rgba(255, 255, 255, 0.6);
|
||||
vertical-align: middle; }
|
||||
header.app nav ol li.primary a:hover {
|
||||
background-image: -webkit-linear-gradient(-90deg, #f5f5f5 0%, #f3f3f3 50%, #ededed 50%, #ebebeb 100%);
|
||||
background-image: -moz-linear-gradient(-90deg, #f5f5f5 0%, #f3f3f3 50%, #ededed 50%, #ebebeb 100%);
|
||||
background-image: -ms-linear-gradient(-90deg, #f5f5f5 0%, #f3f3f3 50%, #ededed 50%, #ebebeb 100%);
|
||||
background-image: -o-linear-gradient(-90deg, #f5f5f5 0%, #f3f3f3 50%, #ededed 50%, #ebebeb 100%);
|
||||
background-image: linear-gradient(-90deg, #f5f5f5 0%, #f3f3f3 50%, #ededed 50%, #ebebeb 100%);
|
||||
border-color: #c8c8c8;
|
||||
-webkit-box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.6);
|
||||
-moz-box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.6);
|
||||
box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.6); }
|
||||
header.app nav.user {
|
||||
float: right; }
|
||||
header.app nav.user ol {
|
||||
font-size: 0em; }
|
||||
header.app nav.user ol li {
|
||||
border-right: 1px solid #c8c8c8;
|
||||
display: inline-block;
|
||||
vertical-align: baseline;
|
||||
zoom: 1;
|
||||
*display: inline;
|
||||
*vertical-align: auto;
|
||||
margin-top: 10px;
|
||||
padding: 0px 5px;
|
||||
position: relative;
|
||||
vertical-align: bottom; }
|
||||
header.app nav.user ol li a {
|
||||
header.app nav ol li.primary {
|
||||
position: relative; }
|
||||
header.app nav ol li.primary a {
|
||||
border: 1px solid transparent;
|
||||
-webkit-border-radius: 3px;
|
||||
-moz-border-radius: 3px;
|
||||
border-radius: 3px;
|
||||
color: #a0a0a0;
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
color: #3c3c3c;
|
||||
display: block;
|
||||
font: normal italic 1.2rem/1.2rem Georgia, Cambria, "Times New Roman", Times, serif;
|
||||
height: 15px;
|
||||
padding: 10px;
|
||||
font: normal 1.2rem/1.4rem "Open Sans", Verdana, Geneva, sans-serif;
|
||||
height: 38px;
|
||||
display: inline-block;
|
||||
vertical-align: baseline;
|
||||
zoom: 1;
|
||||
*display: inline;
|
||||
*vertical-align: auto;
|
||||
margin: 1px 5px;
|
||||
padding: 10px 8px;
|
||||
text-decoration: none;
|
||||
text-transform: lowercase;
|
||||
text-shadow: 0 1px rgba(255, 255, 255, 0.4); }
|
||||
header.app nav.user ol li a:hover {
|
||||
background: #dcdcdc;
|
||||
color: #3c3c3c; }
|
||||
header.app nav.user ol li a.active {
|
||||
background: #dcdcdc;
|
||||
color: #3c3c3c; }
|
||||
header.app nav.user ol li a.options {
|
||||
font: normal 1.2rem/1.2rem "Open Sans", Verdana, Geneva, sans-serif;
|
||||
padding-right: 10px;
|
||||
text-transform: none; }
|
||||
header.app nav.user ol li a.user-link {
|
||||
font: normal 1.2rem/1.2rem "Open Sans", Verdana, Geneva, sans-serif;
|
||||
padding: 10px 10px 10px 45px;
|
||||
text-transform: none; }
|
||||
@media screen and (max-width: 768px) {
|
||||
header.app nav.user ol li a.user-link {
|
||||
font-size: 0em;
|
||||
padding: 10px 0px;
|
||||
width: 38px; } }
|
||||
header.app nav.user ol li a.user-link .avatar {
|
||||
background: #dcdcdc;
|
||||
-webkit-border-radius: 3px;
|
||||
-moz-border-radius: 3px;
|
||||
border-radius: 3px;
|
||||
border: 1px solid #b4b4b4;
|
||||
-webkit-box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.6);
|
||||
-moz-box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.6);
|
||||
box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.6);
|
||||
height: 22px;
|
||||
display: inline-block;
|
||||
vertical-align: baseline;
|
||||
zoom: 1;
|
||||
*display: inline;
|
||||
*vertical-align: auto;
|
||||
left: 15px;
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
width: 22px; }
|
||||
header.app nav.user ol li a.user-link .avatar::after {
|
||||
background-image: -webkit-linear-gradient(-60deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0.2) 50%, rgba(0, 0, 0, 0.3) 100%);
|
||||
background-image: -moz-linear-gradient(-60deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0.2) 50%, rgba(0, 0, 0, 0.3) 100%);
|
||||
background-image: -ms-linear-gradient(-60deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0.2) 50%, rgba(0, 0, 0, 0.3) 100%);
|
||||
background-image: -o-linear-gradient(-60deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0.2) 50%, rgba(0, 0, 0, 0.3) 100%);
|
||||
background-image: linear-gradient(-60deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0.2) 50%, rgba(0, 0, 0, 0.3) 100%);
|
||||
content: "";
|
||||
display: block;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
right: 0px;
|
||||
top: 0px;
|
||||
width: 100%; }
|
||||
header.app nav.user ol li a.user-link .avatar img {
|
||||
-webkit-border-radius: 4px;
|
||||
-moz-border-radius: 4px;
|
||||
border-radius: 4px;
|
||||
display: block;
|
||||
min-height: 100%;
|
||||
min-width: 100%;
|
||||
height: 100%; }
|
||||
header.app nav.user ol li ol.user-options {
|
||||
-webkit-border-radius: 4px;
|
||||
-moz-border-radius: 4px;
|
||||
border-radius: 4px;
|
||||
-webkit-box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.3);
|
||||
-moz-box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.3);
|
||||
box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.3);
|
||||
border: 1px solid #c8c8c8;
|
||||
text-transform: uppercase;
|
||||
text-shadow: 0 1px rgba(255, 255, 255, 0.6);
|
||||
vertical-align: middle; }
|
||||
header.app nav ol li.primary a:hover, header.app nav ol li.primary a.active {
|
||||
background-image: -webkit-linear-gradient(-90deg, #f5f5f5 0%, #f3f3f3 50%, #ededed 50%, #ebebeb 100%);
|
||||
background-image: -moz-linear-gradient(-90deg, #f5f5f5 0%, #f3f3f3 50%, #ededed 50%, #ebebeb 100%);
|
||||
background-image: -ms-linear-gradient(-90deg, #f5f5f5 0%, #f3f3f3 50%, #ededed 50%, #ebebeb 100%);
|
||||
background-image: -o-linear-gradient(-90deg, #f5f5f5 0%, #f3f3f3 50%, #ededed 50%, #ebebeb 100%);
|
||||
background-image: linear-gradient(-90deg, #f5f5f5 0%, #f3f3f3 50%, #ededed 50%, #ebebeb 100%);
|
||||
border-color: #c8c8c8;
|
||||
-webkit-box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.6);
|
||||
-moz-box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.6);
|
||||
box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.6); }
|
||||
header.app nav.user {
|
||||
float: right; }
|
||||
header.app nav.user a.user-link {
|
||||
padding: 9px 8px 11px 40px;
|
||||
position: relative;
|
||||
text-transform: none; }
|
||||
@media screen and (max-width: 768px) {
|
||||
header.app nav.user a.user-link {
|
||||
font-size: 0em;
|
||||
padding: 10px 0px;
|
||||
width: 38px; } }
|
||||
header.app nav.user a.user-link .avatar {
|
||||
background: #dcdcdc;
|
||||
display: none;
|
||||
right: 4px;
|
||||
padding: 5px 10px;
|
||||
-webkit-border-radius: 3px;
|
||||
-moz-border-radius: 3px;
|
||||
border-radius: 3px;
|
||||
border: 1px solid #b4b4b4;
|
||||
-webkit-box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.6);
|
||||
-moz-box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.6);
|
||||
box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.6);
|
||||
height: 22px;
|
||||
display: inline-block;
|
||||
vertical-align: baseline;
|
||||
zoom: 1;
|
||||
*display: inline;
|
||||
*vertical-align: auto;
|
||||
left: 8px;
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
top: 50px;
|
||||
width: 170px;
|
||||
z-index: 3; }
|
||||
header.app nav.user ol li ol.user-options.expanded {
|
||||
display: block; }
|
||||
header.app nav.user ol li ol.user-options::before {
|
||||
background: transparent;
|
||||
border-top: 8px solid #dcdcdc;
|
||||
border-right: 8px solid #dcdcdc;
|
||||
border-bottom: 8px solid transparent;
|
||||
border-left: 8px solid transparent;
|
||||
-webkit-box-shadow: 1px 0 0 0 #c8c8c8, 0 -1px 0 0 #c8c8c8;
|
||||
-moz-box-shadow: 1px 0 0 0 #c8c8c8, 0 -1px 0 0 #c8c8c8;
|
||||
box-shadow: 1px 0 0 0 #c8c8c8, 0 -1px 0 0 #c8c8c8;
|
||||
top: 6px;
|
||||
width: 22px; }
|
||||
header.app nav.user a.user-link .avatar::after {
|
||||
background-image: -webkit-linear-gradient(-60deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0.2) 50%, rgba(0, 0, 0, 0.3) 100%);
|
||||
background-image: -moz-linear-gradient(-60deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0.2) 50%, rgba(0, 0, 0, 0.3) 100%);
|
||||
background-image: -ms-linear-gradient(-60deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0.2) 50%, rgba(0, 0, 0, 0.3) 100%);
|
||||
background-image: -o-linear-gradient(-60deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0.2) 50%, rgba(0, 0, 0, 0.3) 100%);
|
||||
background-image: linear-gradient(-60deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0.2) 50%, rgba(0, 0, 0, 0.3) 100%);
|
||||
content: "";
|
||||
display: block;
|
||||
height: 0px;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
-webkit-transform: rotate(-45deg);
|
||||
-moz-transform: rotate(-45deg);
|
||||
-ms-transform: rotate(-45deg);
|
||||
-o-transform: rotate(-45deg);
|
||||
transform: rotate(-45deg);
|
||||
right: 10px;
|
||||
top: -7px;
|
||||
width: 0px; }
|
||||
header.app nav.user ol li ol.user-options li {
|
||||
border-top: 1px solid #c8c8c8;
|
||||
border-right: none;
|
||||
border-bottom: none;
|
||||
border-left: none;
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
right: 0px;
|
||||
top: 0px;
|
||||
width: 100%; }
|
||||
header.app nav.user ol li ol.user-options li:first-child {
|
||||
border: none; }
|
||||
header.app nav.user ol li ol.user-options li a {
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
display: block;
|
||||
font: normal 1rem/1.2rem "Open Sans", Verdana, Geneva, sans-serif;
|
||||
height: auto;
|
||||
margin: 5px 0px;
|
||||
overflow: hidden;
|
||||
padding: 5px;
|
||||
text-overflow: ellipsis;
|
||||
-webkit-transition: padding, 0.1s, linear;
|
||||
-moz-transition: padding, 0.1s, linear;
|
||||
-ms-transition: padding, 0.1s, linear;
|
||||
-o-transition: padding, 0.1s, linear;
|
||||
transition: padding, 0.1s, linear;
|
||||
white-space: nowrap;
|
||||
width: 100%; }
|
||||
header.app nav.user ol li ol.user-options li a:hover {
|
||||
background: white;
|
||||
padding: 5px 8px; }
|
||||
header.app nav.user a.user-link .avatar img {
|
||||
-webkit-border-radius: 4px;
|
||||
-moz-border-radius: 4px;
|
||||
border-radius: 4px;
|
||||
display: block;
|
||||
min-height: 100%;
|
||||
min-width: 100%;
|
||||
height: 100%; }
|
||||
header.app nav.user ol.user-options {
|
||||
-webkit-border-radius: 4px;
|
||||
-moz-border-radius: 4px;
|
||||
border-radius: 4px;
|
||||
-webkit-box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.3);
|
||||
-moz-box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.3);
|
||||
box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.3);
|
||||
border: 1px solid black;
|
||||
background-image: -webkit-linear-gradient(-90deg, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.7) 100%);
|
||||
background-image: -moz-linear-gradient(-90deg, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.7) 100%);
|
||||
background-image: -ms-linear-gradient(-90deg, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.7) 100%);
|
||||
background-image: -o-linear-gradient(-90deg, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.7) 100%);
|
||||
background-image: linear-gradient(-90deg, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.7) 100%);
|
||||
display: none;
|
||||
right: 0px;
|
||||
padding: 5px 10px;
|
||||
position: absolute;
|
||||
top: 52px;
|
||||
width: 150px;
|
||||
z-index: 3; }
|
||||
header.app nav.user ol.user-options.expanded {
|
||||
display: block; }
|
||||
header.app nav.user ol.user-options::before {
|
||||
background: transparent;
|
||||
border-top: 6px solid black;
|
||||
border-right: 6px solid black;
|
||||
border-bottom: 6px solid transparent;
|
||||
border-left: 6px solid transparent;
|
||||
-webkit-box-shadow: 1px 0 0 0 black, 0 -1px 0 0 black;
|
||||
-moz-box-shadow: 1px 0 0 0 black, 0 -1px 0 0 black;
|
||||
box-shadow: 1px 0 0 0 black, 0 -1px 0 0 black;
|
||||
content: "";
|
||||
display: block;
|
||||
height: 0px;
|
||||
position: absolute;
|
||||
-webkit-transform: rotate(-45deg);
|
||||
-moz-transform: rotate(-45deg);
|
||||
-ms-transform: rotate(-45deg);
|
||||
-o-transform: rotate(-45deg);
|
||||
transform: rotate(-45deg);
|
||||
right: 12px;
|
||||
top: -6px;
|
||||
width: 0px; }
|
||||
header.app nav.user ol.user-options li {
|
||||
display: block;
|
||||
border-top: 1px solid rgba(0, 0, 0, 0.4);
|
||||
-webkit-box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.05);
|
||||
-moz-box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.05);
|
||||
box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.05); }
|
||||
header.app nav.user ol.user-options li:first-child {
|
||||
border: none;
|
||||
-webkit-box-shadow: none;
|
||||
-moz-box-shadow: none;
|
||||
box-shadow: none; }
|
||||
header.app nav.user ol.user-options li > a {
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
display: block;
|
||||
font: normal italic 1.2rem/1.4rem Georgia, Cambria, "Times New Roman", Times, serif;
|
||||
height: auto;
|
||||
margin: 5px 0px;
|
||||
overflow: hidden;
|
||||
padding: 3px 5px 4px;
|
||||
text-shadow: none;
|
||||
text-overflow: ellipsis;
|
||||
text-transform: none;
|
||||
-webkit-transition: padding, 0.1s, linear;
|
||||
-moz-transition: padding, 0.1s, linear;
|
||||
-ms-transition: padding, 0.1s, linear;
|
||||
-o-transition: padding, 0.1s, linear;
|
||||
transition: padding, 0.1s, linear;
|
||||
white-space: nowrap;
|
||||
width: 100%; }
|
||||
header.app nav.user ol.user-options li > a:hover {
|
||||
background: #1d9dd9;
|
||||
background-image: -webkit-linear-gradient(-90deg, #5abbe9 0%, #1d9dd9 100%);
|
||||
background-image: -moz-linear-gradient(-90deg, #5abbe9 0%, #1d9dd9 100%);
|
||||
background-image: -ms-linear-gradient(-90deg, #5abbe9 0%, #1d9dd9 100%);
|
||||
background-image: -o-linear-gradient(-90deg, #5abbe9 0%, #1d9dd9 100%);
|
||||
background-image: linear-gradient(-90deg, #5abbe9 0%, #1d9dd9 100%);
|
||||
border-color: black;
|
||||
-webkit-box-shadow: none;
|
||||
-moz-box-shadow: none;
|
||||
box-shadow: none;
|
||||
padding-left: 8px;
|
||||
text-shadow: 0 -1px rgba(0, 0, 0, 0.2); }
|
||||
|
||||
.courses {
|
||||
-webkit-box-sizing: border-box;
|
||||
|
||||
@@ -25,15 +25,17 @@
|
||||
%if user.is_authenticated():
|
||||
<nav class="user">
|
||||
<ol>
|
||||
<li>
|
||||
<li class="primary">
|
||||
<div class="divider"></div>
|
||||
<a href="/dashboard" class="user-link">
|
||||
<span class="avatar"><img src="${static.url('images/profile.jpg')}" /></span>
|
||||
Neil deGrasse Tyson
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<div class="divider"></div>
|
||||
<a href="#" class="options">▾</a>
|
||||
<div class="divider"></div>
|
||||
<ol class="user-options">
|
||||
<li><a href="#">Account Settings</a></li>
|
||||
<li><a href="#">Help</a></li>
|
||||
<li><a href="/logout">Log Out</a></li>
|
||||
</ol>
|
||||
|
||||
Reference in New Issue
Block a user