nocebo/diaspora
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge pull request #3453 from Raven24/flash-fix

Browse source 
fix flash messages
This commit is contained in:
Maxwell Salzberg 2012-07-15 11:08:01 -07:00
commit bc478efe7a
4 changed files with 76 additions and 83 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

50
app/assets/stylesheets/_flash_messages.scss Normal file
View file

@ -0,0 +1,50 @@
@import 'new_styles/animations';
#flash_notice,
#flash_alert,
#flash_error {
position : fixed;
z-index: 999;
top : -100px;
left : 0;
width : 100%;
text-align : center;
font-weight: bold;
color: #666;
&.expose {
@include animation(expose, 5s)
}
.message {
@include border-radius(6px);
@include box-shadow(0, 1px, 4px, rgba(0,0,0,0.8));
display : inline-block;
padding: 45px 12px 8px;
min-width: 400px;
max-width: 800px;
color : #fff;
background-color : rgba(0,0,0,0.8);
border : 1px solid rgba(255,255,255,0.7);
}
}
#flash_notice {
.message {
color: #666;
background-color: #F4F899;
border-color: darken(#F4F899, 40%);
}
}
#flash_error,
#flash_alert {
.message {
background-color: #CA410B;
border-color: darken(#CA410B, 10%);
}
}

44
app/assets/stylesheets/application.css.sass
View file

@ -1,5 +1,6 @@
@import 'ui.css.sass'
@import '_mixins.css.scss'
@import '_flash_messages.scss'
@import 'new_styles/_spinner'
/* ====== media ====== */
@ -84,49 +85,6 @@ ul > li
:border 1px solid #ccc
:height 100%
#flash_notice,
#flash_error,
#flash_alert
:z-index 999
:position fixed
:color #666
:top -100px
:left 0
:width 100%
:font
:weight bold
:text
:align center
.message
@include border-radius(6px)
@include box-shadow(0, 1px, 5px, rgba(0,0,0,0.4))
:display inline-block
:min-width 400px
:max-width 800px
:padding
:top 45px
:bottom 8px
:left 12px
:right 12px
#flash_notice
.message
:background
:color #F4F899
:border 1px solid darken(#F4F899, 40%)
#flash_error,
#flash_alert
.message
:color #fff
:background
:color #CA410B
:border 1px solid darken(#CA410B, 10%)
.login_error,
.login_alert
:color rgb(208,49,43)

20
app/assets/stylesheets/new_styles/_animations.scss
View file

@ -40,3 +40,23 @@
0% { @include opacity(1); -ms-transform : scale(1); }
100% { @include opacity(0); -ms-transform : scale(1.3); }
}
/* flash message animations */
@-webkit-keyframes expose {
0% { top : -100px; }
15% { top : 0; }
85% { top : 0; }
100% { top : -100px; }
}
@-moz-keyframes expose {
0% { top : -100px; }
15% { top : 0; }
85% { top : 0; }
100% { top : -100px; }
}
@-ms-keyframes expose {
0% { top : -100px; }
15% { top : 0; }
85% { top : 0; }
100% { top : -100px; }
}

45
app/assets/stylesheets/new_styles/_flash_messages.scss
View file

@ -1,48 +1,13 @@
/* animations */
@-webkit-keyframes expose {
0% { top : -100px; }
15% { top : 0; }
85% { top : 0; }
100% { top : -100px; }
}
@-moz-keyframes expose {
0% { top : -100px; }
15% { top : 0; }
85% { top : 0; }
100% { top : -100px; }
}
@-ms-keyframes expose {
0% { top : -100px; }
15% { top : 0; }
85% { top : 0; }
100% { top : -100px; }
}
/* styles */
#flash_alert,
@import '../_flash_messages';
#flash_notice,
#flash_alert {
position : fixed;
top : -100px;
left : 0;
width : 100%;
text-align : center;
&.expose {
@include animation(expose, 4s)
}
#flash_alert,
#flash_error {
.message {
@include border-radius(6px);
@include box-shadow(0, 1px, 4px, rgba(0,0,0,0.8));
display : inline-block;
padding : 10px 20px 8px 20px;
margin-top : 10px;
padding : 10px 20px 8px;
background-color : rgba(0,0,0,0.8);
color : #fff;
border : 1px solid rgba(255,255,255,0.7);
}
}