Your IP : 216.73.216.79
@import '../../../styles/mixins'
// @import '../../../styles/colors'
.notification-enter-active
transition: all .3s ease .05s, transform .3s ease, margin .25s ease, clip-path 8s ease .8s
// .notification-leave-active
// transition: all .25s ease !important
.notification-leave-to
max-height: 0px !important
// height: 0px !important
padding-top: 0px !important
padding-bottom: 0px !important
margin-top: 0px !important
margin-bottom: 0px !important
box-shadow: 0px 0px 0px 0px rgba(0,0,0,0)
opacity: 0 !important
clip-path: circle(0% at 80% 35%) !important
// transform: translate(0,10px) !important
.notification-enter
transform: translate(25%)
clip-path: circle(0% at 80% 35%) !important
.vs-notification__content
opacity: 0
transform: translate(10%)
// .notification-enter-to
// margin-top: 0px !important
// .vs-notification__effect
// width: 0%
// padding-bottom: 0%
.vs-notification-parent
position: fixed
right: 0px
bottom: 0px
z-index: 200000
transition: all 25s ease
padding: 10px 0px
display: flex
flex-direction: column
align-items: flex-end
justify-content: flex-end
&--top-right
bottom: auto
top: 0px
display: flex
flex-direction: column-reverse
&--top-center
bottom: auto
top: 0px
display: flex
flex-direction: column-reverse
left: 50%
right: auto
transform: translate(-50%)
.vs-notification--sticky
margin: 3px 20px
border-radius: 20px
&:last-child
border-radius: 0px 0px 20px 20px
margin-top: -10px
.vs-notification
clip-path: circle(120% at 50% 0%)
transition: all .25s ease, transform .3s ease, max-height .25s ease, clip-path .5s ease .1s
&.vs-notification--border
border: 3px solid transparent
border-top: 3px solid -color('border')
.notification-enter
transform: translate(0,-25%)
clip-path: circle(0% at 50% 0%) !important
.vs-notification__content
opacity: 0
transform: translate(0,-10%)
&--bottom-center
left: 50%
right: auto
transform: translate(-50%)
.vs-notification--sticky
margin: 3px 20px
border-radius: 20px
&:last-child
border-radius: 20px 20px 0px 0px
margin-bottom: -10px
.vs-notification
clip-path: circle(120% at 50% 100%)
transition: all .25s ease, transform .3s ease, max-height .25s ease, clip-path .5s ease .1s
&.vs-notification--border
border: 3px solid transparent
border-bottom: 3px solid -color('border')
.notification-enter
transform: translate(0,25%)
clip-path: circle(0% at 50% 100%) !important
.vs-notification__content
opacity: 0
transform: translate(0,10%)
&--top-left
bottom: auto
top: 0px
left: 0px
right: auto
display: flex
flex-direction: column-reverse
align-items: flex-start
justify-content: flex-end
.vs-notification--sticky
margin-left: 0px
border-radius: 0px 20px 20px 0px
.vs-notification
clip-path: circle(145% at 0% 50%)
&.vs-notification--border
border: 3px solid transparent
border-left: 3px solid -color('border')
.notification-enter
transform: translate(-25%)
clip-path: circle(0% at 20% 35%) !important
.vs-notification__content
opacity: 0
transform: translate(-10%)
&--bottom-left
left: 0px
right: auto
.vs-notification--sticky
margin-left: 0px
border-radius: 0px 20px 20px 0px
.vs-notification
clip-path: circle(145% at 0% 50%)
&.vs-notification--border
border: 3px solid transparent
border-left: 3px solid -color('border')
.notification-enter
transform: translate(-25%)
clip-path: circle(0% at 20% 35%) !important
.vs-notification__content
opacity: 0
transform: translate(-10%)
.vs-notification
--vs-color: var(--vs-background)
--vs-border: var(--vs-background)
--vs-opacity: .6
position: relative
max-width: 340px
width: 100%
height: auto
border-radius: 20px
box-shadow: 0px 10px 30px -5px rgba(0,0,0, -var('shadow-opacity'))
overflow: hidden
clip-path: circle(145% at 100% 50%)
background: -color('color')
color: -color('text')
margin: 3px 10px
transition: all .25s ease, transform .3s ease .1s, max-height .25s ease, clip-path .5s ease .1s
&:hover:not(&--flat)
box-shadow: 0px 0px 0px 0px rgba(0,0,0, -var('shadow-opacity'))
transform: translate(0,3px)
&--notPadding
padding: 0px !important
&.vs-notification--icon
padding-left: 50px !important
&.vs-notification--loading
width: 100px !important
max-height: 100px !important
min-height: 100px !important
padding: 0px !important
padding-left: 0px !important
display: flex
align-items: center
justify-content: center
&--width-auto
width: auto
max-width: none
&--width-all
max-width: calc(100vw - 50px)
width: calc(100vw - 50px)
&--square
border-radius: 0px !important
&--sticky
margin-right: 0px
margin-bottom: 0px
border-radius: 20px 0px 0px 20px
&--flat
box-shadow: 0px 0px 0px 0px rgba(0,0,0, -var('shadow-opacity'))
background: -color('background')
color: -color('color') !important
&:hover
&::after
background: -color('color', .15)
.vs-notification__progress
background: -color('color')
.vs-notification__close
--vs-color: inherit
.vs-notification__content
color: -color('color') !important
&.vs-notification--border
border: 0px solid transparent !important
border-right: 3px solid -color('border') !important
&:after
content: ''
background: -color('color', .1)
width: 100%
height: 100%
border-radius: inherit
position: absolute
top: 0px
left: 0px
z-index: -1
transition: all .25s ease
&.vs-notification--onClick
cursor: pointer
&.vs-notification--color:not(.vs-notification--flat)
color: #fff
.vs-notification__progress
background: #fff
.vs-notification__close
--vs-color: 255,255,255
.vs-notification__loading
&:after
border: 2px solid #fff
border-top: 2px solid transparent
border-left: 2px solid transparent
border-right: 2px solid transparent
&:before
border: 2px dashed #fff
border-top: 2px solid transparent
border-left: 2px solid transparent
border-right: 2px solid transparent
&.vs-notification--border
border: 3px solid transparent
border-right: 3px solid -color('border')
&__progress
width: 0%
height: 3px
background: -color('text')
position: absolute
bottom: 0px
left: 0px
transition: all .25s ease
&__loading
width: 50px
height: 50px
border-radius: 50%
position: absolute
&:after
box-sizing: border-box
position: absolute
width: 100%
height: 100%
border: 2px solid -color('text')
border-radius: inherit
border-top: 2px solid transparent
border-left: 2px solid transparent
border-right: 2px solid transparent
animation: loadingNoti .8s ease infinite
top: 0px
content: ''
&:before
box-sizing: border-box
top: 0px
position: absolute
width: 100%
height: 100%
border: 2px dashed -color('text')
border-radius: inherit
border-top: 2px solid transparent
border-left: 2px solid transparent
border-right: 2px solid transparent
animation: loadingNoti .8s linear infinite
opacity: .2
content: ''
&__close
--vs-color: var(--vs-text)
position: absolute
border: 0px
background: transparent
top: 2px
right: 2px
transform: scale(.75)
padding: 0px
&__icon
position: absolute
top: calc(50% - 22px)
background: transparent
width: 45px
height: 45px
left: 2px
border-radius: 0px 35% 35% 0px
// box-shadow: inherit
display: flex
align-items: center
justify-content: center
i
font-size: 1.2rem
&__content
position: relative
width: auto
height: auto
transition: all .25s ease .2s
opacity: 1
&__text
width: 100%
p
margin: 0px
padding: 0px
font-size: .75rem
line-height: 1rem
&__header
width: 100%
margin: 0px
padding: 0px
padding-bottom: 6px
h4
width: 100%
margin: 0px
padding: 0px
font-size: .9rem
.darken
.vs-notification--dark
color: #fff !important
.vs-notification__close
--vs-color: 255,255,255 !important
h4
color: #fff !important
p
color: #fff !important
@keyframes loadingNoti
0%
transform: rotate(0deg)
100%
transform: rotate(360deg)
@keyframes progressNoti
0%
width: 0%
100%
width: 100%
@media (max-width: 600px)
.vs-notification
margin: 3px 0px !important
border-radius: 0px !important
width: 100% !important
max-width: 100% !important
min-width: 100% !important
&:hover
transform: translate(0) !important
&:last-child
margin-bottom: 0px !important
.vs-notification-parent
padding: 0px
width: 100% !important
max-width: 100% !important
.vs-notification--sticky
margin-bottom: 0px !important
&.vs-notification-parent--top-center
.vs-notification:last-child
margin-bottom: 3px
margin-top: 0px !important