diff --git a/assets/css/bootstrap-style.css b/assets/css/bootstrap-style.css index f89412a..4a18978 100644 --- a/assets/css/bootstrap-style.css +++ b/assets/css/bootstrap-style.css @@ -14340,24 +14340,33 @@ h6, .h6 { $transition-duration-in: 200ms; /// this should be equal to the settle duration set on the body element, and is added so that the new page doesnt suddenly pop in while the images are rendering $transition-easing-out: ease-out; $transition-easing-in: ease-in; */ +body { + opacity: 1; +} +body.htmx-request { + opacity: 0.5; + transition: opacity 400ms ease-out; +} +body.htmx-settling { + opacity: 1; + transition: opacity 300ms ease-in; +} + /* @mixin fade-transition($duration, $easing) { transition: opacity $duration $easing; will-change: opacity; } */ -.fade-out { - opacity: 1; - transition: opacity 150ms ease-in-out; - /* Target when has 'htmx-swapping' */ - /* Target when has 'htmx-settling' */ -} -body.htmx-swapping .fade-out { +/* .fade-out.htmx-swapping { + opacity: 0; + transition: opacity 200ms ease-out; +} */ +/* #fade-in.htmx-swapping { opacity: 0; } -body.htmx-settling .fade-out { +#fade-in { opacity: 1; - /* transition-delay: 500ms; */ -} - + transition: opacity 1s ease-out; +} */ /* .fade-in { opacity: 1; diff --git a/assets/css/bootstrap-style.scss b/assets/css/bootstrap-style.scss index 910b578..37c0bbf 100644 --- a/assets/css/bootstrap-style.scss +++ b/assets/css/bootstrap-style.scss @@ -498,27 +498,43 @@ $transition-duration-in: 200ms; /// this should be equal to the settle duration $transition-easing-out: ease-out; $transition-easing-in: ease-in; */ + +body { + opacity: 1; + + &.htmx-request { + opacity: 0.5; + transition: opacity 400ms ease-out; + } + + &.htmx-settling { + opacity: 1; + transition: opacity 300ms ease-in; + } +} + + /* @mixin fade-transition($duration, $easing) { transition: opacity $duration $easing; will-change: opacity; } */ -.fade-out { - opacity: 1; - transition: opacity 150ms ease-in-out; +/* .fade-out.htmx-swapping { + opacity: 0; + transition: opacity 200ms ease-out; +} */ - /* Target when has 'htmx-swapping' */ - body.htmx-swapping & { - opacity: 0; - } - /* Target when has 'htmx-settling' */ - body.htmx-settling & { - opacity: 1; - /// the 50ms delay here essentially gives the page content time to load (images etc) - /* transition-delay: 500ms; */ - } + +/* #fade-in.htmx-swapping { + opacity: 0; } +#fade-in { + opacity: 1; + transition: opacity 1s ease-out; +} */ + + /* .fade-in { opacity: 1; diff --git a/assets/views/layout/default.jet.html b/assets/views/layout/default.jet.html index f813936..078262e 100644 --- a/assets/views/layout/default.jet.html +++ b/assets/views/layout/default.jet.html @@ -68,14 +68,15 @@ {* NOTE: hx-swap="show:window:top" isn't needed when we hx-boost the body *} {* NOTE: we need to specify swap and settle in hx-swap otherwise htmx won't apply the classes; durations set low for minimal impact *} -
+ {*
*}