2014-09-30 19:17:54 -04:00
|
|
|
@import "app/styles/mixins"
|
|
|
|
|
@import "app/styles/bootstrap/variables"
|
2014-01-03 13:32:13 -05:00
|
|
|
|
2014-11-07 00:43:39 -05:00
|
|
|
|
|
|
|
|
#problem-alert-view.problem-alert
|
2014-01-03 13:32:13 -05:00
|
|
|
z-index: 10
|
|
|
|
|
position: absolute
|
2014-10-16 15:08:21 -04:00
|
|
|
// Position these at the end of the spell editor, right above the spell toolbar.
|
2014-11-07 00:43:39 -05:00
|
|
|
top: 45px
|
|
|
|
|
right: 500px
|
2014-07-09 16:41:42 -04:00
|
|
|
background: transparent
|
2014-10-21 00:20:30 -04:00
|
|
|
border: 1px solid transparent
|
2014-08-04 23:16:12 -04:00
|
|
|
padding: 0
|
2014-11-07 00:43:39 -05:00
|
|
|
font-size: 18px
|
2014-01-03 13:32:13 -05:00
|
|
|
text-shadow: none
|
|
|
|
|
color: white
|
|
|
|
|
word-wrap: break-word
|
2014-12-07 18:51:32 -05:00
|
|
|
border-style: solid
|
2014-07-09 16:41:42 -04:00
|
|
|
border-image: url(/images/level/code_editor_error_background.png) 16 20 fill round
|
|
|
|
|
border-width: 16px 20px
|
2014-01-03 13:32:13 -05:00
|
|
|
|
2014-11-08 01:46:12 -05:00
|
|
|
// Jiggle animation
|
2014-11-08 14:59:39 -05:00
|
|
|
+keyframes(jiggle)
|
2014-11-08 01:46:12 -05:00
|
|
|
0%
|
|
|
|
|
transform: rotate(0deg)
|
|
|
|
|
25%
|
|
|
|
|
transform: rotate(1deg)
|
|
|
|
|
50%
|
|
|
|
|
transform: rotate(0deg)
|
|
|
|
|
75%
|
|
|
|
|
transform: rotate(-1deg)
|
|
|
|
|
100%
|
|
|
|
|
transform: rotate(0deg)
|
2014-11-08 14:59:39 -05:00
|
|
|
|
|
|
|
|
&.jiggling
|
2014-11-09 00:51:54 -05:00
|
|
|
@include animation(jiggle .3s infinite)
|
2014-11-08 01:46:12 -05:00
|
|
|
|
2014-08-04 23:16:12 -04:00
|
|
|
&.no-hint
|
|
|
|
|
// Since it's probably only one line, let's make it not look weird by being tiny.
|
|
|
|
|
padding: 7px
|
|
|
|
|
|
2014-11-09 00:51:54 -05:00
|
|
|
.problem-alert-title
|
|
|
|
|
color: white
|
|
|
|
|
border-bottom: 1px solid white
|
|
|
|
|
|
2014-01-03 13:32:13 -05:00
|
|
|
.close
|
2014-01-29 15:18:37 -05:00
|
|
|
@include opacity(0.80)
|
2014-01-03 13:32:13 -05:00
|
|
|
text-shadow: none
|
|
|
|
|
cursor: pointer
|
|
|
|
|
color: white
|
|
|
|
|
float: right
|
|
|
|
|
|
|
|
|
|
&:hover, &:focus
|
2014-01-29 15:18:37 -05:00
|
|
|
@include opacity(1)
|
2014-02-03 16:58:25 -05:00
|
|
|
|
2014-10-21 00:20:30 -04:00
|
|
|
.problem-subtitle
|
2014-02-03 16:58:25 -05:00
|
|
|
font-size: 80%
|
2014-10-21 00:20:30 -04:00
|
|
|
|
2014-01-03 13:32:13 -05:00
|
|
|
//&.alert-error
|
|
|
|
|
|
|
|
|
|
&.alert-warning
|
2014-07-09 16:41:42 -04:00
|
|
|
border-image-source: url(/images/level/code_editor_warning_background.png)
|
2014-10-21 00:20:30 -04:00
|
|
|
|
2014-01-03 13:32:13 -05:00
|
|
|
&.alert-info
|
2014-07-09 16:41:42 -04:00
|
|
|
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%
|
2014-07-23 08:38:12 -04:00
|
|
|
padding: 18px 35px 18px 14px
|
|
|
|
|
|
2014-07-09 16:41:42 -04:00
|
|
|
&.alert-warning
|
|
|
|
|
background-image: url(/images/level/code_editor_warning_background.png)
|
|
|
|
|
|
|
|
|
|
&.alert-info
|
|
|
|
|
background-image: url(/images/level/code_editor_info_background.png)
|
