codecombat/app/styles/play/modal/buy-gems-modal.sass

100 lines
1.7 KiB
Sass
Raw Normal View History

@import "app/styles/mixins"
2014-11-12 12:40:55 -05:00
#buy-gems-modal
2014-11-12 20:16:34 -05:00
//- Header
h1
position: absolute
left: 164px
top: -70px
margin: 0
width: 450px
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
2014-11-12 20:16:34 -05:00
//- Clear modal defaults
.modal-dialog
margin: 150px auto 0 auto
2014-11-12 20:16:34 -05:00
padding: 0
width: 820px
height: 460px
background: none
//- Background
#buy-gems-background
position: absolute
top: -157px
left: -2px
//- Close modal button
#close-modal
position: absolute
left: 612px
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
2014-11-12 20:16:34 -05:00
//- Products
#products
position: absolute
left: 55px
top: 242px
width: 720px
height: 140px
2014-11-12 12:40:55 -05:00
2014-11-12 20:16:34 -05:00
.product
width: 228px
2014-12-08 09:24:46 -05:00
height: 136px
2014-11-12 20:16:34 -05:00
float: left
text-align: center
margin-right: 12px
2014-12-08 09:24:46 -05:00
position: relative
2014-11-12 20:16:34 -05:00
h4
font-size: 20px
color: rgb(22,16,5)
h3
margin-top: 10px
text-transform: uppercase
color: rgb(22,16,5)
button
2014-12-08 09:24:46 -05:00
position: absolute
2014-11-12 20:16:34 -05:00
width: 80%
2014-12-08 09:24:46 -05:00
left: 10%
bottom: -30px
//- Errors
.alert
position: absolute
left: 10%
width: 80%
top: 20px
border: 5px solid gray
#or-subscribe
position: absolute
right: 30px
top: 420px
font-size: 16px
color: #eee
button
min-width: 182px