mirror of
https://github.com/Derpy-Leggies/OnlyLegs.git
synced 2025-06-29 11:36:16 +00:00
Fluffy-Bean
7eb4355b52
Compress JS and Sass files remove useless Span for notifications and switch to after Go back to 400x400px thumbnails Add link for group creator
145 lines
2.5 KiB
Sass
145 lines
2.5 KiB
Sass
@keyframes notificationTimeout
|
|
0%
|
|
left: -100%
|
|
height: 3px
|
|
90%
|
|
left: 0%
|
|
height: 3px
|
|
95%
|
|
left: 0%
|
|
height: 0
|
|
100%
|
|
left: 0%
|
|
height: 0
|
|
|
|
@mixin notification($color)
|
|
color: RGB($color)
|
|
|
|
&::after
|
|
background-color: RGB($color)
|
|
|
|
.notifications
|
|
margin: 0
|
|
padding: 0
|
|
|
|
width: 450px
|
|
height: auto
|
|
|
|
position: fixed
|
|
top: 0.3rem
|
|
right: 0.3rem
|
|
|
|
display: flex
|
|
flex-direction: column
|
|
|
|
z-index: 621
|
|
|
|
.sniffle__notification
|
|
margin: 0 0 0.3rem 0
|
|
padding: 0
|
|
|
|
width: 450px
|
|
height: auto
|
|
max-height: 100px
|
|
|
|
display: flex
|
|
flex-direction: row
|
|
|
|
position: relative
|
|
|
|
background-color: RGB($bg-300)
|
|
border-radius: $rad-inner
|
|
color: RGB($fg-white)
|
|
opacity: 0
|
|
transform: scale(0.8)
|
|
|
|
box-sizing: border-box
|
|
overflow: hidden
|
|
|
|
transition: all 0.25s ease-in-out, opacity 0.2s ease-in-out, transform 0.2s cubic-bezier(.68,-0.55,.27,1.55)
|
|
|
|
&::after
|
|
content: ""
|
|
|
|
width: 450px
|
|
height: 3px
|
|
|
|
position: absolute
|
|
bottom: 0px
|
|
left: 0px
|
|
|
|
background-color: RGB($fg-white)
|
|
|
|
z-index: +2
|
|
animation: notificationTimeout 5.1s linear
|
|
|
|
&.success
|
|
@include notification($success)
|
|
&.warning
|
|
@include notification($warning)
|
|
&.critical
|
|
@include notification($critical)
|
|
&.info
|
|
@include notification($info)
|
|
|
|
&.show
|
|
opacity: 1
|
|
transform: scale(1)
|
|
|
|
&.hide
|
|
margin: 0
|
|
max-height: 0
|
|
|
|
opacity: 0
|
|
transform: translateX(100%)
|
|
|
|
transition: all 0.4s ease-in-out, max-height 0.2s ease-in-out
|
|
|
|
.sniffle__notification-icon
|
|
margin: 0
|
|
padding: 1rem
|
|
|
|
width: auto
|
|
height: auto
|
|
|
|
display: flex
|
|
justify-content: center
|
|
align-items: center
|
|
|
|
background-color: RGB($bg-200)
|
|
|
|
svg
|
|
width: 1.25rem
|
|
height: 1.25rem
|
|
|
|
.sniffle__notification-text
|
|
margin: 0
|
|
padding: 1rem
|
|
|
|
width: auto
|
|
height: auto
|
|
|
|
display: flex
|
|
flex-direction: column
|
|
justify-self: center
|
|
align-self: center
|
|
|
|
font-size: 1rem
|
|
font-weight: 600
|
|
line-height: 1
|
|
text-align: left
|
|
|
|
@media (max-width: $breakpoint)
|
|
.notifications
|
|
width: calc(100vw - 0.6rem)
|
|
height: auto
|
|
|
|
.sniffle__notification
|
|
width: 100%
|
|
|
|
&.hide
|
|
opacity: 0
|
|
transform: translateY(-5rem)
|
|
|
|
.sniffle__notification-time
|
|
width: 100%
|