mirror of
https://github.com/codeninjasllc/codecombat.git
synced 2024-11-28 10:06:08 -05:00
230 lines
4.9 KiB
Sass
230 lines
4.9 KiB
Sass
@import "../bootstrap/variables"
|
|
@import "../bootstrap/mixins"
|
|
|
|
// 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: .7s
|
|
-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%
|
|
|
|
a.disabled
|
|
color: #5b5855
|
|
text-decoration: none
|
|
cursor: default
|
|
|
|
#top-nav
|
|
a.navbar-brand
|
|
padding: 4px 20px 0px 20px
|
|
margin-left: -20px
|
|
|
|
.navbar-nav
|
|
float: right
|
|
|
|
.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
|
|
margin-right: 5px
|
|
|
|
.glyphicon-user
|
|
font-size: 16px
|
|
margin-right: 5px
|
|
|
|
.dropdown
|
|
.dropdown-menu
|
|
left: auto
|
|
width: 280px
|
|
padding: 0px
|
|
border-radius: 0px
|
|
font-family: Bangers
|
|
|
|
> .user-dropdown-header
|
|
position: relative
|
|
background: #E4CF8C
|
|
height: 160px
|
|
padding: 10px
|
|
text-align: center
|
|
color: black
|
|
border-bottom: #32281e 1px solid
|
|
> a:hover
|
|
background-color: transparent
|
|
img
|
|
border: #e3be7a 8px solid
|
|
height: 98px // Includes the border
|
|
&:hover
|
|
box-shadow: 0 0 20px #e3be7a
|
|
> h3
|
|
margin-top: 10px
|
|
text-shadow: 2px 2px 3px white
|
|
color: #31281E
|
|
.user-level
|
|
position: absolute
|
|
top: 73px
|
|
right: 86px
|
|
color: gold
|
|
text-shadow: 1px 1px black, -1px -1px 0 black, 1px -1px 0 black, -1px 1px 0 black
|
|
|
|
.user-dropdown-body
|
|
color: black
|
|
padding: 15px
|
|
letter-spacing: 1px
|
|
font: 15px 'Helvetica Neue', Helvetica, Arial, sans-serif
|
|
+clearfix()
|
|
|
|
.user-dropdown-footer
|
|
padding: 10px
|
|
margin-left: 0px
|
|
font-size: 14px
|
|
+clearfix()
|
|
|
|
.btn-flat
|
|
border: #ddd 1px solid
|
|
border-radius: 0px
|
|
margin: 0px
|
|
|
|
.nav.navbar-link-text > li > a
|
|
font-weight: normal
|
|
font-size: 25px
|
|
letter-spacing: 2px
|
|
color: $white
|
|
&:hover
|
|
color: #f8e413
|
|
|
|
.navbar-link-text > li > 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
|
|
|
|
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
|
|
|
|
.navbar-toggle
|
|
display: none
|
|
|
|
@media only screen and (max-width: 768px)
|
|
#top-nav
|
|
display: inline
|
|
button.navbar-toggle
|
|
background: #483a2d
|
|
border: 2px solid #2f261d
|
|
display: inline-block
|
|
|
|
span.icon-bar
|
|
background: #F9E612
|
|
|
|
a.navbar-brand
|
|
padding: 4px 20px 0px 20px
|
|
margin-left: 0
|
|
|
|
.navbar-nav
|
|
float: none
|
|
margin: 0 0 20px 0
|
|
overflow: visible
|
|
|
|
.dropdown-menu
|
|
background-color: white
|
|
position: absolute
|
|
|
|
.btn, .fancy-select
|
|
margin-bottom: 10px
|
|
|
|
.btn, .fancy-select
|
|
float: none
|
|
|
|
.fancy-select .options
|
|
right: auto
|