codecombat/app/styles/common/top_nav.sass

128 lines
2.6 KiB
Sass
Raw Normal View History

@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-user-name
max-width: 125px
overflow: hidden
text-overflow: ellipsis
white-space: nowrap
display: inline-block
padding: 0 5px 0 0
margin: 0
height: 18px
.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
2014-04-03 18:10:24 -04:00
#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