codecombat/app/styles/play/modal/buy-gems-modal.sass
2016-05-04 16:02:15 +02:00

89 lines
1.5 KiB
Sass

@import "app/styles/mixins"
#buy-gems-modal
//- Header
h1
position: absolute
left: 200px
top: -70px
margin: 0
width: 612px
text-align: center
color: rgb(254,188,68)
font-size: 38px
text-shadow: black 4px 4px 0, black -4px -4px 0, black 4px -4px 0, black -4px 4px 0, black 4px 0px 0, black 0px -4px 0, black -4px 0px 0, black 0px 4px 0
//- Clear modal defaults
.modal-dialog
margin: 150px auto 0 auto
padding: 0
width: 1060px
height: 460px
background: none
//- Background
#buy-gems-background
position: absolute
top: -157px
left: -2px
//- Close modal button
#close-modal
position: absolute
left: 770px
top: -80px
width: 60px
height: 60px
color: white
text-align: center
font-size: 30px
padding-top: 15px
cursor: pointer
@include rotate(-3deg)
&:hover
color: yellow
//- Products
#products
position: absolute
left: 55px
top: 242px
width: 960px
height: 140px
.product
width: 228px
height: 136px
float: left
text-align: center
margin-right: 12px
position: relative
h4
font-size: 20px
color: rgb(22,16,5)
h3
margin-top: 10px
text-transform: uppercase
color: rgb(22,16,5)
button
position: absolute
width: 80%
left: 10%
bottom: -30px
//- Errors
.alert
position: absolute
left: 10%
width: 80%
top: 20px
border: 5px solid gray