Galleries/PythonGallery
1
0
Fork 0
mirror of https://github.com/Derpy-Leggies/OnlyLegs.git synced 2025-06-29 11:36:16 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Fix new styling errors

Browse source 
Fix error page
Update Notification styling
This commit is contained in:
Michał Gdula 2023-03-25 20:24:38 +00:00
parent 824c849eaa
commit cdb3836dab
16 changed files with 154 additions and 96 deletions
Download patch file Download diff file Expand all files Collapse all files

49
gallery/themes/default/components/elements/notification.sass
View file

@ -33,7 +33,7 @@
position: relative
background-color: RGB($bg-100)
background-color: RGB($bg-300)
border-radius: $rad-inner
color: RGB($fg-white)
opacity: 0
@ -44,6 +44,28 @@
transition: all 0.25s ease-in-out, opacity 0.2s ease-in-out, transform 0.2s cubic-bezier(.68,-0.55,.27,1.55)
&.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
@ -93,34 +115,17 @@
animation: notificationTimeout 5.1s linear
@each $name, $colour in (success: $success, error: $critical, warning: $warning, info: $info)
.sniffle__notification--#{$name}
@include notification($colour)
.sniffle__notification-show
opacity: 1
transform: scale(1)
.sniffle__notification--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
@media (max-width: $breakpoint)
.notifications
width: calc(100vw - 0.6rem)
height: auto
&.hide
opacity: 0
transform: translateY(-5rem)
.sniffle__notification
width: 100%
.sniffle__notification-time
width: 100%
.sniffle__notification--hide
opacity: 0
transform: translateY(-5rem)