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

fix flash messages

Browse source
This commit is contained in:
Florian Staudacher 2012-07-15 19:33:32 +02:00
parent ec7ae5c2c9
commit 6efcac48b5
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 'ui.css.sass'
@import '_mixins.css.scss' @import '_mixins.css.scss'
@import '_flash_messages.scss'
@import 'new_styles/_spinner' @import 'new_styles/_spinner'
/* ====== media ====== */ /* ====== media ====== */
@ -84,49 +85,6 @@ ul > li
:border 1px solid #ccc :border 1px solid #ccc
:height 100% :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_error,
.login_alert .login_alert
:color rgb(208,49,43) :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); } 0% { @include opacity(1); -ms-transform : scale(1); }
100% { @include opacity(0); -ms-transform : scale(1.3); } 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 */ @import '../_flash_messages';
#flash_alert,
#flash_notice, #flash_notice,
#flash_alert { #flash_alert,
position : fixed; #flash_error {
top : -100px;
left : 0;
width : 100%;
text-align : center;
&.expose {
@include animation(expose, 4s)
}
.message { .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; margin-top : 10px;
padding : 10px 20px 8px;
background-color : rgba(0,0,0,0.8); background-color : rgba(0,0,0,0.8);
color : #fff;
border : 1px solid rgba(255,255,255,0.7); border : 1px solid rgba(255,255,255,0.7);
} }
} }