tightened up notifciations display
This commit is contained in:
parent
8bdc7cbfe9
commit
54c7690e26
3 changed files with 42 additions and 8 deletions
|
@ -5,8 +5,8 @@ html(xmlns='http://www.w3.org/1999/xhtml', lang='en', xml:lang="en")
|
|||
meta(content="text/html;charset=utf-8", http-equiv="Content-Type")
|
||||
meta(meta content="utf-8", http-equiv="encoding")
|
||||
meta(name='viewport', content='width=device-width, initial-scale=1.0')
|
||||
meta(name="keywords" content="creative technoglogist, graphic design, web development, designer developer, social thought, political discussion, music producer, creative culture, black creative, black geek")
|
||||
meta(name="description" content="The home site of Creative Technologist, music maker, and social philoshoper, Ro. Ha, I know. Me too.")
|
||||
meta(name="keywords" content="")
|
||||
meta(name="description" content="")
|
||||
meta(http-equiv="content-type", content="text/html; charset=utf-8")
|
||||
//meta(property="og:image" content="https://thetwelfth.house/base-assets/images/current.png")
|
||||
//meta(name="twitter:image" content="https://thetwelfth.house/base-assets/images/current.png")
|
||||
|
@ -14,6 +14,9 @@ html(xmlns='http://www.w3.org/1999/xhtml', lang='en', xml:lang="en")
|
|||
body
|
||||
#notifications.notifications
|
||||
#notifyMessage.notifyMessage
|
||||
.notify-icon
|
||||
svg(viewBox="0 0 20 20" class="icons")
|
||||
use#submit-update(xlink:href='/assets/images/global/sprite.svg#entypo-bell')
|
||||
p#message-text This is a message
|
||||
.main-container#main-content
|
||||
section#dash-index-content
|
||||
|
|
|
@ -16,10 +16,25 @@ export default class Notfications {
|
|||
notifcation.style.display = 'flex';
|
||||
var color = '';
|
||||
status ? (color = '#32cd32') : (color = '#F64747');
|
||||
anime({
|
||||
targets: messageText,
|
||||
backgroundColor: color,
|
||||
easing: 'easeInOutQuint',
|
||||
duration: 500,
|
||||
complete: () => {
|
||||
setTimeout(() => {
|
||||
anime({
|
||||
targets: messageText,
|
||||
backgroundColor: '#374857',
|
||||
easing: 'easeOutQuint',
|
||||
duration: 500
|
||||
});
|
||||
}, 1000);
|
||||
}
|
||||
});
|
||||
anime({
|
||||
targets: message,
|
||||
marginTop: '-20px',
|
||||
backgroundColor: color,
|
||||
easing: 'easeInOutQuint',
|
||||
duration: 500,
|
||||
opacity: 1,
|
||||
|
@ -28,7 +43,6 @@ export default class Notfications {
|
|||
anime({
|
||||
targets: message,
|
||||
marginTop: '-125px',
|
||||
backgroundColor: '#374857',
|
||||
easing: 'easeOutQuint',
|
||||
duration: 500,
|
||||
opacity: 0,
|
||||
|
|
|
@ -21,23 +21,40 @@ svg.icons
|
|||
z-index 2000
|
||||
height 10%
|
||||
width 100%
|
||||
display none
|
||||
display block
|
||||
align-items center
|
||||
justify-content center
|
||||
padding 0
|
||||
margin 0
|
||||
#notifyMessage
|
||||
background-color: $highlight
|
||||
margin-top: -125px;
|
||||
padding-top 0
|
||||
margin-top: 0px;
|
||||
padding-top -125px
|
||||
height 50px;
|
||||
width 500px
|
||||
display: flex;
|
||||
align-items center
|
||||
justify-content center
|
||||
opacity: 0
|
||||
.notify-icon
|
||||
background $black
|
||||
padding 8px 5px 5px 5px
|
||||
border-radius 5px 0 0 5px
|
||||
height 30px
|
||||
width 30px
|
||||
text-align center
|
||||
border 2px solid $white
|
||||
p
|
||||
color $white
|
||||
background $highlight
|
||||
width 400px
|
||||
height 28px
|
||||
padding 15px 0 0 5px
|
||||
border-radius 0 5px 5px 0
|
||||
border 2px solid $white
|
||||
text-align center
|
||||
|
||||
.icons
|
||||
fill $white
|
||||
|
||||
.blog-container
|
||||
width 100%
|
||||
|
|
Loading…
Reference in a new issue