mirror of
https://github.com/Derpy-Leggies/OnlyLegs.git
synced 2025-01-18 04:18:35 +00:00
Michał
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
146 lines
2.5 KiB
Sass
146 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%
|