codecombat/app/styles/play/level/tome/problem_alert.sass
Matt Lott 56c15116a7 Swap problem alert error message and hint lines
Also fixing problem alert border on Firefox.
2014-10-20 21:20:33 -07:00

57 lines
1.4 KiB
Sass

@import "app/styles/mixins"
@import "app/styles/bootstrap/variables"
.problem-alert
z-index: 10
position: absolute
// Position these at the end of the spell editor, right above the spell toolbar.
bottom: -20px
left: 10px
right: 10px
background: transparent
border: 1px solid transparent
padding: 0
text-shadow: none
color: white
word-wrap: break-word
border-image: url(/images/level/code_editor_error_background.png) 16 20 fill round
border-width: 16px 20px
&.no-hint
// Since it's probably only one line, let's make it not look weird by being tiny.
padding: 7px
.close
@include opacity(0.80)
text-shadow: none
cursor: pointer
color: white
float: right
&:hover, &:focus
@include opacity(1)
.problem-subtitle
font-size: 80%
//&.alert-error
&.alert-warning
border-image-source: url(/images/level/code_editor_warning_background.png)
&.alert-info
border-image-source: url(/images/level/code_editor_info_background.png)
html.no-borderimage
.problem-alert
border-width: 0
border-image: none
background: transparent url(/images/level/code_editor_error_background.png) no-repeat
background-size: 100% 100%
padding: 18px 35px 18px 14px
&.alert-warning
background-image: url(/images/level/code_editor_warning_background.png)
&.alert-info
background-image: url(/images/level/code_editor_info_background.png)