codecombat/app/styles/common/top_nav.sass
2014-07-14 14:56:44 +02:00

179 lines
3.5 KiB
Sass

@import "../bootstrap/variables"
#top-nav
a.navbar-brand
padding: 4px 20px 0px 20px
margin-left: -20px
.navbuttontext, .fancy-select .trigger
font-size: 20px
font-weight: 400
letter-spacing: 1px
.navbuttontext-account
display: inline-block
padding: 0 5px 0 0
margin: 0 5px 0 0
height: 18px
.account-settings-image
width: 18px
height: 18px
.glyphicon-user
font-size: 16px
margin-right: 5px
//#9F915B
//#E4CF8C
.dropdown
.dropdown-menu
right: 0
left: auto
width: 280px
padding: 0px
li.user-dropdown-header
background: #E4CF8C
height: 175px
padding: 10px
text-align: center
color: black
border: #32281E 1px solid
img
border: #e3be7a 8px solid
p
margin-top: 10px
text-shadow: 2px 2px 3px white
li.user-dropdown-body
color: black
padding: 15px
&:after
display: table
content: " "
clear: both
li.user-dropdown-footer
padding: 10px
margin-left: 0px
&:after
display: table
content: " "
clear: both
.btn
margin: 0px
.btn-flat
border: #ddd 1px solid
border-radius: 0px
.nav.navbar-link-text, .nav.navbar-link-text > li > a
font-weight: normal
font-size: 25px
letter-spacing: 2px
color: $white
&:hover
color: #f8e413
.navbar-link-text > a:hover
background: darken($body-bg, 3%)
.btn, .btn-group, .fancy-select
margin-top: 13px
.nav-tabs > .active > a, .nav-tabs > .active > a:hover, .nav-tabs > .active > a:focus
background-color: #eee
.nav-tabs > li
cursor: pointer
font-size: 25px
a:not(.btn)
line-height: 25px
.btn
font-size: 20px
padding: 4px 12px
.btn, .fancy-select
float: right
margin-left: 10px
line-height: 20px
select
opacity: 0
.fancy-select
.trigger
padding: 5px 25px 3px 10px
width: auto
&:after
top: 13px
max-width: 140px
.nav
margin-bottom: 0
div.fancy-select
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25)
div.trigger
background-color: #9d8f5a
background-image: linear-gradient(to bottom, #a4955e, #948754)
background-repeat: repeat-x
border: 1px solid #cccccc
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25)
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05)
color: white
&:after
border-top-color: white
&.open
background-color: #8B7F51
color: #ebebeb
&:after
border-top-color: #ebebeb
ul.options
max-height: 415px
background-color: #9d8f5a
right: 0
left: auto
overflow-x: hidden
&.open
top: 36px
li
color: #ebebeb
padding: 8px 20px
#mobile-nav
display: none
@media only screen and (max-width: 800px)
#top-nav
display: none
#mobile-nav
display: inline
a.navbar-brand
padding: 4px 20px 0px 20px
button.navbar-toggle
background: #483a2d
border: 2px solid #2f261d
span.icon-bar
background: #F9E612
ul li
font-family: 'Bangers', cursive
font-weight: normal
color: #fff
font-size: 25px
margin-top: 5px
margin-bottom: 5px
.header-font
color: #fff
.footer-link-text
width: 100%
display: ineline