diff --git a/app/styles/common/top_nav.sass b/app/styles/common/top_nav.sass index 7bb29374f..6f4c2b95e 100644 --- a/app/styles/common/top_nav.sass +++ b/app/styles/common/top_nav.sass @@ -1,5 +1,39 @@ @import "../bootstrap/variables" +// This is still very blocky. Browser reflows? Investigate why. +//.open > .dropdown-menu + animation-name: fadeAnimation + animation-duration: .7s + animation-iteration-count: 1 + animation-timing-function: ease + animation-fill-mode: forwards + -webkit-animation-name: fadeAnimation + -webkit-animation-duration: 2s + -webkit-animation-iteration-count: 1 + -webkit-animation-timing-function: ease + -webkit-animation-fill-mode: backwards + -moz-animation-name: fadeAnimation + -moz-animation-duration: .7s + -moz-animation-iteration-count: 1 + -moz-animation-timing-function: ease + -moz-animation-fill-mode: forwards + +@keyframes fadeAnimation + from + opacity: 0 + top: 120% + to + opacity: 1 + top: 100% + +@-webkit-keyframes fadeAnimation + from + opacity: 0 + top: 120% + to + opacity: 1 + top: 100% + #top-nav a.navbar-brand padding: 4px 20px 0px 20px @@ -32,24 +66,28 @@ left: auto width: 280px padding: 0px + border-radius: 0px + font-family: Bangers li.user-dropdown-header background: #E4CF8C - height: 175px + height: 160px padding: 10px text-align: center color: black - border: #32281E 1px solid - + border-bottom: #32281E 1px solid img border: #e3be7a 8px solid - p + height: 98px // Includes the border + h3 margin-top: 10px text-shadow: 2px 2px 3px white + color: #31281E li.user-dropdown-body color: black padding: 15px + font: 15px 'Helvetica Neue', Helvetica, Arial, sans-serif &:after display: table @@ -59,6 +97,7 @@ li.user-dropdown-footer padding: 10px margin-left: 0px + font-size: 14px &:after display: table diff --git a/app/templates/base.jade b/app/templates/base.jade index 1a3e71734..f8c7dff31 100644 --- a/app/templates/base.jade +++ b/app/templates/base.jade @@ -58,7 +58,7 @@ body ul.dropdown-menu(role="menu") li.user-dropdown-header img.img-circle(src="#{me.getPhotoURL()}" alt="") - p=me.get('name') || 'Anoner' + h3=me.get('name') || 'Anoner' li.user-dropdown-body .col-xs-4.text-center a(href="#") Profile