Skip to content

Commit 5e4500a

Browse files
committed
fix: entrance animation not applied
1 parent 958dd8f commit 5e4500a

File tree

3 files changed

+5
-5
lines changed

3 files changed

+5
-5
lines changed

assets/css/styles.css

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -241,7 +241,7 @@ button.gttCloseBtn:focus {
241241
/* ------------------------------------------------------------------------- */
242242
/* ANIMATION LOGIC */
243243
/* ------------------------------------------------------------------------- */
244-
.gttAnimated {
244+
.gttToast[data-animation='true'] {
245245
animation-duration: var(--_gtt-anim-duration-in);
246246
animation-direction: var(--_gtt-anim-direction-in);
247247
animation-timing-function: var(--_gtt-anim-timing-in);
@@ -255,11 +255,11 @@ button.gttCloseBtn:focus {
255255
animation-direction: var(--_gtt-anim-direction-out);
256256
}
257257

258-
.gttShowFromTop {
258+
.gttToast[data-animation='true'].gttShowFromTop {
259259
animation-name: var(--_gtt-anim-name-in-top);
260260
}
261261

262-
.gttShowFromBottom {
262+
.gttToast[data-animation='true'].gttShowFromBottom {
263263
animation-name: var(--_gtt-anim-name-in-bottom);
264264
}
265265

components/css/styles.templ

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ templ GoasterCSS(variant string) {
1212
@cssHandle.Once() {
1313
<style type="text/css">
1414
/* [tempo] BEGIN - Do not edit! This section is auto-generated. */
15-
*{box-sizing:border-box;border-width:0;border-style:solid}:root{--_gtt-px: var(--gtt-px, .75em);--_gtt-py: var(--gtt-py, 0);--_gtt-border-width: var(--gtt-border-width, 1px);--_gtt-border-style: var(--gtt-border-style, solid);--_gtt-border-radius: var(--gtt-border-radius, .375rem);--_gtt-border-color: var(--gtt-border-color, var(--gtt-default-border-color));--_gtt-font-family: var(--gtt-font-family, inherit);--_gtt-font-size: var(--gtt-font-size, 1rem);--_gtt-line-height: var(--gtt-line-height, 1rem);--_gtt-color: var(--gtt-color, var(--gtt-default-color));--_gtt-bg: var(--gtt-bg, var(--gtt-default-bg));--_gtt-progress-color: var( --gtt-progress-color, var(--gtt-default-progress-bar-color) );--gtt-default-bg: var(--gtt-color-default-lightest);--gtt-default-color: var(--gtt-color-default-dark);--gtt-default-border-color: var(--gtt-color-default-lighter);--gtt-default-progress-bar-color: var(--gtt-color-default-light);--gtt-success-bg: var(--gtt-color-success-lightest);--gtt-success-color: var(--gtt-color-success-dark);--gtt-success-border-color: var(--gtt-color-success-lighter);--gtt-success-progress-bar-color: var(--gtt-color-success-light);--gtt-error-bg: var(--gtt-color-error-lightest);--gtt-error-color: var(--gtt-color-error-dark);--gtt-error-border-color: var(--gtt-color-error-lighter);--gtt-error-progress-bar-color: var(--gtt-color-error-light);--gtt-warning-bg: var(--gtt-color-warning-lightest);--gtt-warning-color: var(--gtt-color-warning-dark);--gtt-warning-border-color: var(--gtt-color-warning-lighter);--gtt-warning-progress-bar-color: var(--gtt-color-warning-light);--gtt-info-bg: var(--gtt-color-info-lightest);--gtt-info-color: var(--gtt-color-info-dark);--gtt-info-border-color: var(--gtt-color-info-lighter);--gtt-info-progress-bar-color: var(--gtt-color-info-light);--_gtt-anim-name-in-top: var(--gtt-anim-name-in-top, gttFadeInDown);--_gtt-anim-name-in-bottom: var(--gtt-anim-name-in-bottom, gttFadeInUp);--_gtt-anim-delay-in: var(--gtt-anim-delay-in, 0s);--_gtt-anim-duration-in: var(--gtt-anim-duration-in, .5s);--_gtt-anim-direction-in: var(--gtt-anim-direction-in, normal);--_gtt-anim-timing-in: var(--gtt-anim-timing-in, ease);--_gtt-anim-name-out-top: var(--gtt-anim-name-out-top, gttFadeOutUp);--_gtt-anim-name-out-bottom: var(--gtt-anim-name-out-bottom, gttFadeOutDown);--_gtt-anim-delay-out: var(--gtt-anim-delay-out, 0s);--_gtt-anim-duration-out: var(--gtt-anim-duration-out, .5s);--_gtt-anim-direction-out: (--gtt-anim-direction-out, normal);--_gtt-anim-timing-out: var(--gtt-anim-timing-out, ease)}.gttContainer{position:fixed;z-index:1000;display:flex;flex-direction:column-reverse;align-items:flex-end;max-height:90%;overflow-y:auto;font-family:var(--_gtt-font-family);font-size:var(--_gtt-font-size);line-height:var(--_gtt-line-height)}.gttContainer[data-position=bottom-right]{right:15px;bottom:15px;align-items:flex-end}.gttContainer[data-position=bottom-left]{left:15px;bottom:15px;align-items:flex-start}.gttContainer[data-position=bottom-center]{left:50%;bottom:15px;transform:translate(-50%);align-items:center}.gttContainer[data-position=top-right]{right:15px;top:15px;align-items:flex-end}.gttContainer[data-position=top-left]{left:15px;top:15px;align-items:flex-start}.gttContainer[data-position=top-center]{left:50%;top:15px;transform:translate(-50%);align-items:center}.gttToast{position:relative;min-width:250px;margin-top:.5rem;padding:var(--_gtt-py) var(--_gtt-px);display:flex;align-items:center;justify-content:space-between;background-color:var(--_gtt-bg);color:var(--_gtt-color);border-color:var(--_gtt-border-color)}.gttToast[role=alert][data-level=default]{--_gtt-color: var(--gtt-default-color);--_gtt-bg: var(--gtt-default-bg);--_gtt-border-color: var(--gtt-default-border-color);--_gtt-progress-color: var(--gtt-default-progress-bar-color)}.gttToast[role=alert][data-level=success]{--_gtt-color: var(--gtt-success-color);--_gtt-bg: var(--gtt-success-bg);--_gtt-border-color: var(--gtt-success-border-color);--_gtt-progress-color: var(--gtt-success-progress-bar-color)}.gttToast[role=alert][data-level=error]{--_gtt-color: var(--gtt-error-color);--_gtt-bg: var(--gtt-error-bg);--_gtt-border-color: var(--gtt-error-border-color);--_gtt-progress-color: var(--gtt-error-progress-bar-color)}.gttToast[role=alert][data-level=warning]{--_gtt-color: var(--gtt-warning-color);--_gtt-bg: var(--gtt-warning-bg);--_gtt-border-color: var(--gtt-warning-border-color);--_gtt-progress-color: var(--gtt-warning-progress-bar-color)}.gttToast[role=alert][data-level=info]{--_gtt-color: var(--gtt-info-color);--_gtt-bg: var(--gtt-info-bg);--_gtt-border-color: var(--gtt-info-border-color);--_gtt-progress-color: var(--gtt-info-progress-bar-color)}.gttToast[role=alert][data-rounded=true]{border-radius:var(--_gtt-border-radius)}.gttToast[role=alert][data-bordered=true]{border-style:var(--_gtt-border-style);border-width:var(--_gtt-border-width)}button.gttCloseBtn{margin-left:auto;display:inline-flex;align-items:center;background-color:transparent;border:none;border-radius:1e5px;aspect-ratio:1;color:inherit;cursor:pointer;transition:background .3s cubic-bezier(.4,0,.2,1)}button.gttCloseBtn:hover,button.gttCloseBtn:focus{background-color:var(--_gtt-border-color)}.gttProgressBar{position:absolute;overflow:hidden;top:0;left:0;height:4px;background-color:var(--_gtt-progress-color);width:100%;transition:width linear}.gttIcon{display:inline-flex;align-items:center;flex-shrink:0;width:1.125rem;height:1.125rem}.gttMessage{margin:1em 0 1em .75em}.gttAnimated{animation-duration:var(--_gtt-anim-duration-in);animation-direction:var(--_gtt-anim-direction-in);animation-timing-function:var(--_gtt-anim-timing-in);animation-delay:var(--_gtt-anim-delay-in)}.gttClose{animation-duration:var(--_gtt-anim-duration-out);animation-timing-function:var(--_gtt-anim-timing-out);animation-delay:var(--_gtt-anim-delay-out);animation-direction:var(--_gtt-anim-direction-out)}.gttShowFromTop{animation-name:var(--_gtt-anim-name-in-top)}.gttShowFromBottom{animation-name:var(--_gtt-anim-name-in-bottom)}.gttCloseFromTop{animation-name:var(--_gtt-anim-name-out-top)}.gttCloseFromBottom{animation-name:var(--_gtt-anim-name-out-bottom)}.gttShow{visibility:visible}.gttSrOnly{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}@keyframes gttFadeInUp{0%{transform:translate3d(0,100%,0);opacity:0}to{transform:translateZ(0);opacity:1}}@keyframes gttFadeInDown{0%{transform:translate3d(0,-100%,0);opacity:0}to{transform:translateZ(0);opacity:1}}@keyframes gttFadeOutUp{0%{opacity:1}to{transform:translate3d(0,-100%,0);opacity:0}}@keyframes gttFadeOutDown{0%{opacity:1}to{transform:translate3d(0,100%,0);opacity:0}}
15+
*{box-sizing:border-box;border-width:0;border-style:solid}:root{--_gtt-px: var(--gtt-px, .75em);--_gtt-py: var(--gtt-py, 0);--_gtt-border-width: var(--gtt-border-width, 1px);--_gtt-border-style: var(--gtt-border-style, solid);--_gtt-border-radius: var(--gtt-border-radius, .375rem);--_gtt-border-color: var(--gtt-border-color, var(--gtt-default-border-color));--_gtt-font-family: var(--gtt-font-family, inherit);--_gtt-font-size: var(--gtt-font-size, 1rem);--_gtt-line-height: var(--gtt-line-height, 1rem);--_gtt-color: var(--gtt-color, var(--gtt-default-color));--_gtt-bg: var(--gtt-bg, var(--gtt-default-bg));--_gtt-progress-color: var( --gtt-progress-color, var(--gtt-default-progress-bar-color) );--gtt-default-bg: var(--gtt-color-default-lightest);--gtt-default-color: var(--gtt-color-default-dark);--gtt-default-border-color: var(--gtt-color-default-lighter);--gtt-default-progress-bar-color: var(--gtt-color-default-light);--gtt-success-bg: var(--gtt-color-success-lightest);--gtt-success-color: var(--gtt-color-success-dark);--gtt-success-border-color: var(--gtt-color-success-lighter);--gtt-success-progress-bar-color: var(--gtt-color-success-light);--gtt-error-bg: var(--gtt-color-error-lightest);--gtt-error-color: var(--gtt-color-error-dark);--gtt-error-border-color: var(--gtt-color-error-lighter);--gtt-error-progress-bar-color: var(--gtt-color-error-light);--gtt-warning-bg: var(--gtt-color-warning-lightest);--gtt-warning-color: var(--gtt-color-warning-dark);--gtt-warning-border-color: var(--gtt-color-warning-lighter);--gtt-warning-progress-bar-color: var(--gtt-color-warning-light);--gtt-info-bg: var(--gtt-color-info-lightest);--gtt-info-color: var(--gtt-color-info-dark);--gtt-info-border-color: var(--gtt-color-info-lighter);--gtt-info-progress-bar-color: var(--gtt-color-info-light);--_gtt-anim-name-in-top: var(--gtt-anim-name-in-top, gttFadeInDown);--_gtt-anim-name-in-bottom: var(--gtt-anim-name-in-bottom, gttFadeInUp);--_gtt-anim-delay-in: var(--gtt-anim-delay-in, 0s);--_gtt-anim-duration-in: var(--gtt-anim-duration-in, .5s);--_gtt-anim-direction-in: var(--gtt-anim-direction-in, normal);--_gtt-anim-timing-in: var(--gtt-anim-timing-in, ease);--_gtt-anim-name-out-top: var(--gtt-anim-name-out-top, gttFadeOutUp);--_gtt-anim-name-out-bottom: var(--gtt-anim-name-out-bottom, gttFadeOutDown);--_gtt-anim-delay-out: var(--gtt-anim-delay-out, 0s);--_gtt-anim-duration-out: var(--gtt-anim-duration-out, .5s);--_gtt-anim-direction-out: (--gtt-anim-direction-out, normal);--_gtt-anim-timing-out: var(--gtt-anim-timing-out, ease)}.gttContainer{position:fixed;z-index:1000;display:flex;flex-direction:column-reverse;align-items:flex-end;max-height:90%;overflow-y:auto;font-family:var(--_gtt-font-family);font-size:var(--_gtt-font-size);line-height:var(--_gtt-line-height)}.gttContainer[data-position=bottom-right]{right:15px;bottom:15px;align-items:flex-end}.gttContainer[data-position=bottom-left]{left:15px;bottom:15px;align-items:flex-start}.gttContainer[data-position=bottom-center]{left:50%;bottom:15px;transform:translate(-50%);align-items:center}.gttContainer[data-position=top-right]{right:15px;top:15px;align-items:flex-end}.gttContainer[data-position=top-left]{left:15px;top:15px;align-items:flex-start}.gttContainer[data-position=top-center]{left:50%;top:15px;transform:translate(-50%);align-items:center}.gttToast{position:relative;min-width:250px;margin-top:.5rem;padding:var(--_gtt-py) var(--_gtt-px);display:flex;align-items:center;justify-content:space-between;background-color:var(--_gtt-bg);color:var(--_gtt-color);border-color:var(--_gtt-border-color)}.gttToast[role=alert][data-level=default]{--_gtt-color: var(--gtt-default-color);--_gtt-bg: var(--gtt-default-bg);--_gtt-border-color: var(--gtt-default-border-color);--_gtt-progress-color: var(--gtt-default-progress-bar-color)}.gttToast[role=alert][data-level=success]{--_gtt-color: var(--gtt-success-color);--_gtt-bg: var(--gtt-success-bg);--_gtt-border-color: var(--gtt-success-border-color);--_gtt-progress-color: var(--gtt-success-progress-bar-color)}.gttToast[role=alert][data-level=error]{--_gtt-color: var(--gtt-error-color);--_gtt-bg: var(--gtt-error-bg);--_gtt-border-color: var(--gtt-error-border-color);--_gtt-progress-color: var(--gtt-error-progress-bar-color)}.gttToast[role=alert][data-level=warning]{--_gtt-color: var(--gtt-warning-color);--_gtt-bg: var(--gtt-warning-bg);--_gtt-border-color: var(--gtt-warning-border-color);--_gtt-progress-color: var(--gtt-warning-progress-bar-color)}.gttToast[role=alert][data-level=info]{--_gtt-color: var(--gtt-info-color);--_gtt-bg: var(--gtt-info-bg);--_gtt-border-color: var(--gtt-info-border-color);--_gtt-progress-color: var(--gtt-info-progress-bar-color)}.gttToast[role=alert][data-rounded=true]{border-radius:var(--_gtt-border-radius)}.gttToast[role=alert][data-bordered=true]{border-style:var(--_gtt-border-style);border-width:var(--_gtt-border-width)}button.gttCloseBtn{margin-left:auto;display:inline-flex;align-items:center;background-color:transparent;border:none;border-radius:1e5px;aspect-ratio:1;color:inherit;cursor:pointer;transition:background .3s cubic-bezier(.4,0,.2,1)}button.gttCloseBtn:hover,button.gttCloseBtn:focus{background-color:var(--_gtt-border-color)}.gttProgressBar{position:absolute;overflow:hidden;top:0;left:0;height:4px;background-color:var(--_gtt-progress-color);width:100%;transition:width linear}.gttIcon{display:inline-flex;align-items:center;flex-shrink:0;width:1.125rem;height:1.125rem}.gttMessage{margin:1em 0 1em .75em}.gttToast[data-animation=true]{animation-duration:var(--_gtt-anim-duration-in);animation-direction:var(--_gtt-anim-direction-in);animation-timing-function:var(--_gtt-anim-timing-in);animation-delay:var(--_gtt-anim-delay-in)}.gttClose{animation-duration:var(--_gtt-anim-duration-out);animation-timing-function:var(--_gtt-anim-timing-out);animation-delay:var(--_gtt-anim-delay-out);animation-direction:var(--_gtt-anim-direction-out)}.gttToast[data-animation=true].gttShowFromTop{animation-name:var(--_gtt-anim-name-in-top)}.gttToast[data-animation=true].gttShowFromBottom{animation-name:var(--_gtt-anim-name-in-bottom)}.gttCloseFromTop{animation-name:var(--_gtt-anim-name-out-top)}.gttCloseFromBottom{animation-name:var(--_gtt-anim-name-out-bottom)}.gttShow{visibility:visible}.gttSrOnly{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}@keyframes gttFadeInUp{0%{transform:translate3d(0,100%,0);opacity:0}to{transform:translateZ(0);opacity:1}}@keyframes gttFadeInDown{0%{transform:translate3d(0,-100%,0);opacity:0}to{transform:translateZ(0);opacity:1}}@keyframes gttFadeOutUp{0%{opacity:1}to{transform:translate3d(0,-100%,0);opacity:0}}@keyframes gttFadeOutDown{0%{opacity:1}to{transform:translate3d(0,100%,0);opacity:0}}
1616

1717
/* [tempo] END */
1818
</style>

0 commit comments

Comments
 (0)