Skip to content

Commit

Permalink
snackbar scss returned to the previous version
Browse files Browse the repository at this point in the history
  • Loading branch information
@steal4life
steal4life committed Oct 18, 2023
1 parent 1ffbf61 commit 472cfff
Show file tree
Hide file tree
Showing 3 changed files with 70 additions and 21 deletions.
44 changes: 34 additions & 10 deletions Source/Extensions/Blazorise.Snackbar/Styles/blazorise.snackbar.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -281,6 +281,10 @@ $snackbar-padding-y-multi: 1.25rem !default;
position: relative;
flex-direction: row;
margin-bottom: 0;

&.snackbar-show {
transform: translate(-50%);
}
}

.snackbar:not(:last-child) {
Expand All @@ -293,67 +297,93 @@ $snackbar-padding-y-multi: 1.25rem !default;
.snackbar-stack-top-end .snackbar.snackbar-show {
transition: all var(--stack-transition-duration, 1000);
animation: showTop var(--stack-animation-duration, 500) forwards;
opacity: 1;
}

.snackbar-stack-top .snackbar-hide,
.snackbar-stack-top-start .snackbar-hide,
.snackbar-stack-top-end .snackbar-hide {
transition: all var(--stack-transition-duration, 1000);
animation: hideTop var(--stack-animation-duration, 500) backwards;
animation: hideTop var(--stack-animation-duration, 500) forwards;
opacity: 0;
}

.snackbar-stack-bottom .snackbar.snackbar-show,
.snackbar-stack-bottom-start .snackbar.snackbar-show,
.snackbar-stack-bottom-end .snackbar.snackbar-show {
transition: all var(--stack-transition-duration, 1000);
animation: showBottom var(--stack-animation-duration, 500) forwards;
opacity: 1;
}

.snackbar-stack-bottom .snackbar-hide,
.snackbar-stack-bottom-start .snackbar-hide,
.snackbar-stack-bottom-end .snackbar-hide {
transition: all var(--stack-transition-duration, 1000);
animation: hideBottom var(--stack-animation-duration, 500) backwards;
animation: hideBottom var(--stack-animation-duration, 500) forwards;
opacity: 0;
}

@keyframes showTop {
0% {
max-height: 0;
padding: 0;
transform: translate(-50%) translateY(-50px);
opacity: 0;
}

100% {
max-height: 150px;
padding: $spacer-sm $spacer;
transform: translate(-50%) translateY(0);
opacity: 1;
}
}

@keyframes hideTop {
0% {
max-height: 150px;
padding: $spacer-sm $spacer;
transform: translate(-50%) translateY(0);
opacity: 1;
top: 0;
}

100% {
max-height: 0;
padding: 0;
transform: translate(-50%) translateY(-50px);
opacity: 0;
top: -100px;
}
}

@keyframes showBottom {
0% {
max-height: 0;
padding: 0;
opacity: 0;
transform: translate(-50%) translateY(50px);
}

100% {
max-height: 150px;
padding: $spacer-sm $spacer;
opacity: 1;
transform: translate(-50%) translateY(0);
}
}

@keyframes hideBottom {
0% {
max-height: 150px;
transform: translate(-50%) translateY(0);
padding: $spacer-sm $spacer;
opacity: 1;
}

100% {
max-height: 0;
padding: 0;
transform: translate(-50%) translateY(50px);
opacity: 0;
}
}
Expand Down Expand Up @@ -392,10 +422,4 @@ $snackbar-padding-y-multi: 1.25rem !default;
}
}

@media (max-width: $mobile) {
.snackbar-stack{
right: 0;
left: 0;
}
}

45 changes: 35 additions & 10 deletions Source/Extensions/Blazorise.Snackbar/wwwroot/blazorise.snackbar.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -367,6 +367,11 @@
flex-direction: row;
margin-bottom: 0;
}
.snackbar-stack-top-end .snackbar.snackbar-show,
.snackbar-stack-top-start .snackbar.snackbar-show,
.snackbar-stack-top .snackbar.snackbar-show {
transform: translate(-50%);
}
.snackbar-stack-top-end .snackbar:not(:last-child),
.snackbar-stack-top-start .snackbar:not(:last-child),
.snackbar-stack-top .snackbar:not(:last-child) {
Expand All @@ -378,60 +383,86 @@
.snackbar-stack-top-end .snackbar.snackbar-show {
transition: all var(--stack-transition-duration, 1000);
animation: showTop var(--stack-animation-duration, 500) forwards;
opacity: 1;
}

.snackbar-stack-top .snackbar-hide,
.snackbar-stack-top-start .snackbar-hide,
.snackbar-stack-top-end .snackbar-hide {
transition: all var(--stack-transition-duration, 1000);
animation: hideTop var(--stack-animation-duration, 500) backwards;
animation: hideTop var(--stack-animation-duration, 500) forwards;
opacity: 0;
}

.snackbar-stack-bottom .snackbar.snackbar-show,
.snackbar-stack-bottom-start .snackbar.snackbar-show,
.snackbar-stack-bottom-end .snackbar.snackbar-show {
transition: all var(--stack-transition-duration, 1000);
animation: showBottom var(--stack-animation-duration, 500) forwards;
opacity: 1;
}

.snackbar-stack-bottom .snackbar-hide,
.snackbar-stack-bottom-start .snackbar-hide,
.snackbar-stack-bottom-end .snackbar-hide {
transition: all var(--stack-transition-duration, 1000);
animation: hideBottom var(--stack-animation-duration, 500) backwards;
animation: hideBottom var(--stack-animation-duration, 500) forwards;
opacity: 0;
}

@keyframes showTop {
0% {
max-height: 0;
padding: 0;
transform: translate(-50%) translateY(-50px);
opacity: 0;
}
100% {
max-height: 150px;
padding: 0.5rem 1rem;
transform: translate(-50%) translateY(0);
opacity: 1;
}
}
@keyframes hideTop {
0% {
max-height: 150px;
padding: 0.5rem 1rem;
transform: translate(-50%) translateY(0);
opacity: 1;
top: 0;
}
100% {
max-height: 0;
padding: 0;
transform: translate(-50%) translateY(-50px);
opacity: 0;
top: -100px;
}
}
@keyframes showBottom {
0% {
max-height: 0;
padding: 0;
opacity: 0;
transform: translate(-50%) translateY(50px);
}
100% {
max-height: 150px;
padding: 0.5rem 1rem;
opacity: 1;
transform: translate(-50%) translateY(0);
}
}
@keyframes hideBottom {
0% {
max-height: 150px;
transform: translate(-50%) translateY(0);
padding: 0.5rem 1rem;
opacity: 1;
}
100% {
max-height: 0;
padding: 0;
transform: translate(-50%) translateY(50px);
opacity: 0;
}
}
Expand Down Expand Up @@ -463,9 +494,3 @@
top: 1.5rem;
}
}
@media (max-width: 576px) {
.snackbar-stack {
right: 0;
left: 0;
}
}
Loading

0 comments on commit 472cfff

Please sign in to comment.