Skip to content

E
edx-platform
Commit cd8051fb by Galen Frechette
Options

cleans up signed in users navigation

parent 9bcdcec6
Showing with 315 additions and 325 deletions
lms/static/sass/_shared_header.scss
...@@ -19,6 +19,26 @@ header.app { ...@@ -19,6 +19,26 @@ header.app {
float: left; float: left;
height: 100%; height: 100%;
margin: 16px 15px 0px 0px; 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 { .divider {
...@@ -79,6 +99,8 @@ header.app { ...@@ -79,6 +99,8 @@ header.app {
} }
li.primary { li.primary {
position: relative;
a { a {
border: 1px solid transparent; border: 1px solid transparent;
@include border-radius(3px); @include border-radius(3px);
...@@ -86,16 +108,16 @@ header.app { ...@@ -86,16 +108,16 @@ header.app {
color: $base-font-color; color: $base-font-color;
display: block; display: block;
font: normal 1.2rem/1.4rem $sans-serif; font: normal 1.2rem/1.4rem $sans-serif;
height: 30px; height: 38px;
@include inline-block; @include inline-block;
margin: 5px; margin: 1px 5px;
padding: 6px 8px; padding: 10px 8px;
text-decoration: none; text-decoration: none;
text-transform: uppercase; text-transform: uppercase;
text-shadow: 0 1px rgba(255,255,255, 0.6); text-shadow: 0 1px rgba(255,255,255, 0.6);
vertical-align: middle; 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%)); @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); border-color: rgb(200,200,200);
@include box-shadow(0 1px 0 0 rgba(255,255,255, 0.6)); @include box-shadow(0 1px 0 0 rgba(255,255,255, 0.6));
...@@ -103,163 +125,126 @@ header.app { ...@@ -103,163 +125,126 @@ header.app {
} }
} }
} }
}
nav.user { &.user {
float: right; float: right;
ol {
font-size: 0em;
li { a.user-link {
border-right: 1px solid rgb(200,200,200); padding: 9px 8px 11px 40px;
@include inline-block;
margin-top: 10px;
padding: 0px 5px;
position: relative; position: relative;
vertical-align: bottom; text-transform: none;
a { @media screen and (max-width: 768px) {
@include border-radius(3px); font-size: 0em;
color: $lighter-base-font-color; padding: 10px 0px;
display: block; width: 38px;
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 { .avatar {
background: rgb(220,220,220); background: rgb(220,220,220);
color: $base-font-color; @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: 6px;
width: 22px;
&.active { &::after {
background: rgb(220,220,220); @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%));
color: $base-font-color; content: "";
display: block;
height: 100%;
position: absolute;
right: 0px;
top: 0px;
width: 100%;
} }
&.options { img {
font: normal 1.2rem/1.2rem $sans-serif; @include border-radius(4px);
padding-right: 10px; display: block;
text-transform: none; min-height: 100%;
min-width: 100%;
height: 100%;
} }
}
}
&.user-link { ol.user-options {
font: normal 1.2rem/1.2rem $sans-serif; @include border-radius(4px);
padding: 10px 10px 10px 45px; @include box-shadow(0 1px 6px 0 rgba(0,0,0, 0.3));
text-transform: none; border: 1px solid rgb(0,0,0);
@include background-image(linear-gradient(-90deg, rgba(0,0,0, 0.9) 0%,
@media screen and (max-width: 768px) { rgba(0,0,0, 0.7) 100%));
font-size: 0em; display: none;
padding: 10px 0px; right: 0px;
width: 38px; padding: 5px 10px;
} position: absolute;
top: 52px;
.avatar { width: 150px;
background: rgb(220,220,220); z-index: 3;
@include border-radius(3px);
border: 1px solid rgb(180,180,180); &.expanded {
@include box-shadow(0 1px 0 0 rgba(255,255,255, 0.6)); display: block;
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 { &::before {
@include border-radius(4px); background: transparent;
display: block; border: {
min-height: 100%; top: 6px solid rgba(0,0,0, 1);
min-width: 100%; right: 6px solid rgba(0,0,0, 1);
height: 100%; 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;
} }
ol.user-options { li {
@include border-radius(4px); display: block;
@include box-shadow(0 1px 6px 0 rgba(0,0,0, 0.3)); border-top: 1px solid rgba(0,0,0, 0.4);
border: 1px solid rgb(200,200,200); @include box-shadow(inset 0 1px 0 0 rgba(255,255,255, 0.05));
background: rgb(220,220,220);
display: none;
right: 4px;
padding: 5px 10px;
position: absolute;
top: 50px;
width: 170px;
z-index: 3;
&.expanded { &:first-child {
display: block; border: none;
@include box-shadow(none);
} }
&::before { > a {
background: transparent; @include box-sizing(border-box);
border: { color: rgba(255,255,255, 0.9);
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));
content: "";
display: block; display: block;
height: 0px; font: normal italic 1.2rem/1.4rem $serif;
position: absolute; height: auto;
@include transform(rotate(-45deg)); margin: 5px 0px;
right: 10px; overflow: hidden;
top: -7px; padding: 3px 5px 4px;
width: 0px; text-shadow: none;
} text-overflow: ellipsis;
text-transform: none;
li { @include transition(padding, 0.1s, linear);
border: { white-space: nowrap;
top: 1px solid rgb(200,200,200);
right: none;
bottom: none;
left: none;
}
margin: 0px;
padding: 0px;
width: 100%; width: 100%;
&:first-child { &:hover {
border: none; background: $blue;
} @include background-image(linear-gradient(-90deg, lighten($blue, 15%) 0%,
rgba($blue, 1) 100%));
a { border-color: rgba(0,0,0, 1);
@include box-sizing(border-box); @include box-shadow(none);
display: block; padding-left: 8px;
font: normal 1rem/1.2rem $sans-serif; text-shadow: 0 -1px rgba(0,0,0, 0.2);
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;
}
} }
} }
} }
......
lms/static/sass/application.css
...@@ -1030,7 +1030,25 @@ header.app { ...@@ -1030,7 +1030,25 @@ header.app {
display: block; display: block;
float: left; float: left;
height: 100%; 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 { header.app .divider {
display: inline-block; display: inline-block;
vertical-align: baseline; vertical-align: baseline;
...@@ -1044,7 +1062,7 @@ header.app { ...@@ -1044,7 +1062,7 @@ header.app {
margin-top: 8px; } margin-top: 8px; }
header.app nav.find-courses { header.app nav.find-courses {
float: left; } float: left; }
header.app nav.guest, header.app nav.user { header.app nav.guest {
float: right; } float: right; }
header.app nav ol { header.app nav ol {
font-size: 0em; } font-size: 0em; }
...@@ -1084,196 +1102,181 @@ header.app { ...@@ -1084,196 +1102,181 @@ header.app {
margin-right: 0px; } margin-right: 0px; }
header.app nav ol li.secondary a:hover { header.app nav ol li.secondary a:hover {
color: #3c3c3c; } color: #3c3c3c; }
header.app nav ol li.primary a { header.app nav ol li.primary {
border: 1px solid transparent; position: relative; }
-webkit-border-radius: 3px; header.app nav ol li.primary a {
-moz-border-radius: 3px; border: 1px solid transparent;
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 {
-webkit-border-radius: 3px; -webkit-border-radius: 3px;
-moz-border-radius: 3px; -moz-border-radius: 3px;
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; display: block;
font: normal italic 1.2rem/1.2rem Georgia, Cambria, "Times New Roman", Times, serif; font: normal 1.2rem/1.4rem "Open Sans", Verdana, Geneva, sans-serif;
height: 15px; height: 38px;
padding: 10px; display: inline-block;
vertical-align: baseline;
zoom: 1;
*display: inline;
*vertical-align: auto;
margin: 1px 5px;
padding: 10px 8px;
text-decoration: none; text-decoration: none;
text-transform: lowercase; text-transform: uppercase;
text-shadow: 0 1px rgba(255, 255, 255, 0.4); } text-shadow: 0 1px rgba(255, 255, 255, 0.6);
header.app nav.user ol li a:hover { vertical-align: middle; }
background: #dcdcdc; header.app nav ol li.primary a:hover, header.app nav ol li.primary a.active {
color: #3c3c3c; } background-image: -webkit-linear-gradient(-90deg, #f5f5f5 0%, #f3f3f3 50%, #ededed 50%, #ebebeb 100%);
header.app nav.user ol li a.active { background-image: -moz-linear-gradient(-90deg, #f5f5f5 0%, #f3f3f3 50%, #ededed 50%, #ebebeb 100%);
background: #dcdcdc; background-image: -ms-linear-gradient(-90deg, #f5f5f5 0%, #f3f3f3 50%, #ededed 50%, #ebebeb 100%);
color: #3c3c3c; } background-image: -o-linear-gradient(-90deg, #f5f5f5 0%, #f3f3f3 50%, #ededed 50%, #ebebeb 100%);
header.app nav.user ol li a.options { background-image: linear-gradient(-90deg, #f5f5f5 0%, #f3f3f3 50%, #ededed 50%, #ebebeb 100%);
font: normal 1.2rem/1.2rem "Open Sans", Verdana, Geneva, sans-serif; border-color: #c8c8c8;
padding-right: 10px; -webkit-box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.6);
text-transform: none; } -moz-box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.6);
header.app nav.user ol li a.user-link { box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.6); }
font: normal 1.2rem/1.2rem "Open Sans", Verdana, Geneva, sans-serif; header.app nav.user {
padding: 10px 10px 10px 45px; float: right; }
text-transform: none; } header.app nav.user a.user-link {
@media screen and (max-width: 768px) { padding: 9px 8px 11px 40px;
header.app nav.user ol li a.user-link { position: relative;
font-size: 0em; text-transform: none; }
padding: 10px 0px; @media screen and (max-width: 768px) {
width: 38px; } } header.app nav.user a.user-link {
header.app nav.user ol li a.user-link .avatar { font-size: 0em;
background: #dcdcdc; padding: 10px 0px;
-webkit-border-radius: 3px; width: 38px; } }
-moz-border-radius: 3px; header.app nav.user a.user-link .avatar {
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;
background: #dcdcdc; background: #dcdcdc;
display: none; -webkit-border-radius: 3px;
right: 4px; -moz-border-radius: 3px;
padding: 5px 10px; 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; position: absolute;
top: 50px; top: 6px;
width: 170px; width: 22px; }
z-index: 3; } header.app nav.user a.user-link .avatar::after {
header.app nav.user ol li ol.user-options.expanded { 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%);
display: block; } 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%);
header.app nav.user ol li ol.user-options::before { 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: transparent; 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%);
border-top: 8px solid #dcdcdc; 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%);
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;
content: ""; content: "";
display: block; display: block;
height: 0px; height: 100%;
position: absolute; position: absolute;
-webkit-transform: rotate(-45deg); right: 0px;
-moz-transform: rotate(-45deg); top: 0px;
-ms-transform: rotate(-45deg); width: 100%; }
-o-transform: rotate(-45deg); header.app nav.user a.user-link .avatar img {
transform: rotate(-45deg); -webkit-border-radius: 4px;
right: 10px; -moz-border-radius: 4px;
top: -7px; border-radius: 4px;
width: 0px; } display: block;
header.app nav.user ol li ol.user-options li { min-height: 100%;
border-top: 1px solid #c8c8c8; min-width: 100%;
border-right: none; height: 100%; }
border-bottom: none; header.app nav.user ol.user-options {
border-left: none; -webkit-border-radius: 4px;
margin: 0px; -moz-border-radius: 4px;
padding: 0px; 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%; } width: 100%; }
header.app nav.user ol li ol.user-options li:first-child { header.app nav.user ol.user-options li > a:hover {
border: none; } background: #1d9dd9;
header.app nav.user ol li ol.user-options li a { background-image: -webkit-linear-gradient(-90deg, #5abbe9 0%, #1d9dd9 100%);
-webkit-box-sizing: border-box; background-image: -moz-linear-gradient(-90deg, #5abbe9 0%, #1d9dd9 100%);
-moz-box-sizing: border-box; background-image: -ms-linear-gradient(-90deg, #5abbe9 0%, #1d9dd9 100%);
box-sizing: border-box; background-image: -o-linear-gradient(-90deg, #5abbe9 0%, #1d9dd9 100%);
display: block; background-image: linear-gradient(-90deg, #5abbe9 0%, #1d9dd9 100%);
font: normal 1rem/1.2rem "Open Sans", Verdana, Geneva, sans-serif; border-color: black;
height: auto; -webkit-box-shadow: none;
margin: 5px 0px; -moz-box-shadow: none;
overflow: hidden; box-shadow: none;
padding: 5px; padding-left: 8px;
text-overflow: ellipsis; text-shadow: 0 -1px rgba(0, 0, 0, 0.2); }
-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; }
.courses { .courses {
-webkit-box-sizing: border-box; -webkit-box-sizing: border-box;
......
lms/templates/navigation.html
...@@ -25,15 +25,17 @@ ...@@ -25,15 +25,17 @@
%if user.is_authenticated(): %if user.is_authenticated():
<nav class="user"> <nav class="user">
<ol> <ol>
<li> <li class="primary">
<div class="divider"></div>
<a href="/dashboard" class="user-link"> <a href="/dashboard" class="user-link">
<span class="avatar"><img src="${static.url('images/profile.jpg')}" /></span> <span class="avatar"><img src="${static.url('images/profile.jpg')}" /></span>
Neil deGrasse Tyson Neil deGrasse Tyson
</a> </a>
</li> <div class="divider"></div>
<li>
<a href="#" class="options">&#9662</a> <a href="#" class="options">&#9662</a>
<div class="divider"></div>
<ol class="user-options"> <ol class="user-options">
<li><a href="#">Account Settings</a></li>
<li><a href="#">Help</a></li> <li><a href="#">Help</a></li>
<li><a href="/logout">Log Out</a></li> <li><a href="/logout">Log Out</a></li>
</ol> </ol>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment