codecombat/app/styles/game-menu/game-menu-modal.sass

88 lines
1.7 KiB
Sass

@import "app/styles/mixins"
#game-menu-modal
.close
// We have to style this indendently because it's not in the header (we don't have a header).
position: absolute
top: -5px
right: 0
padding: 15px
font-size: 28px
background-color: transparent
z-index: 1
@include opacity(0.60)
&:hover
@include opacity(1)
// Make room for an overlaid close button in the lower right (we don't have a footer).
.overlaid-close-button
position: absolute
right: 35px
bottom: 20px
#inventory-modal #available-equipment
bottom: 60px
.modal-dialog
margin-top: 0
width: 963px
.nav-tabs
h2
margin: 0
.auth-tab
a
h2, em
pointer-events: none
.tab-pane
h3:first-child
margin-top: 0
// http://stackoverflow.com/questions/18432577/stacked-tabs-in-bootstrap-3
.tabs-left
> .nav-tabs
float: left
width: 185px
border-bottom: 0
> .tab-content
padding: 0px 15px
margin-left: 185px
.tab-content > .tab-pane, .pill-content > .pill-pane
display: none
.tab-content > .active, .pill-content > .active
display: block
.tabs-left
> .nav-tabs > li
float: none
> a
min-width: 74px
margin-right: 0
margin-bottom: 0
.tabs-left > .nav-tabs
border-right: 1px solid #ddd
> li > a
margin-right: -1px
-webkit-border-radius: 4px 0 0 4px
-moz-border-radius: 4px 0 0 4px
border-radius: 4px 0 0 4px
&:hover, &:focus
border-color: #eee #ddd #eee #eee
> .active a
&, &:hover, &:focus
border-color: #ddd transparent #ddd #ddd
*border-right-color: #fff