From ed08047f9e15a38d0a18b9759cd5f43f3271f2f3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Isabelle=20L=C3=B6fgren?= <104595550+IsabelleLof@users.noreply.github.com> Date: Thu, 19 Dec 2024 16:44:06 +0100 Subject: [PATCH 1/4] Transitions WIP --- apps/docs/utils/consent/consent.css | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/apps/docs/utils/consent/consent.css b/apps/docs/utils/consent/consent.css index 95638188a5..c7496d527b 100644 --- a/apps/docs/utils/consent/consent.css +++ b/apps/docs/utils/consent/consent.css @@ -13,6 +13,10 @@ bottom: var(--gds-space-l); padding: var(--gds-space-xl); inset: 35% 8px auto; + transition: translate 0.3s ease; + @starting-style { + translate: 0 -40px; + } } @@ -21,9 +25,10 @@ background-color: rgba(0, 0, 0, 0.5); z-index: 9999; /* Ensure it's above other elements */ inset: 0; - /* @starting-style { - background-color: ; - } */ + transition: opacity 0.3s ease; + @starting-style { + opacity: 0; + } } .cm__btn-group { From e8e6daff15cfc9506dac551027a66b1c923399d9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Isabelle=20L=C3=B6fgren?= <104595550+IsabelleLof@users.noreply.github.com> Date: Mon, 30 Dec 2024 15:33:16 +0100 Subject: [PATCH 2/4] Update on the fade out, using aria-hidden, WIP. --- apps/docs/utils/consent/consent.css | 53 +++++++++++++++++++++++++++-- 1 file changed, 51 insertions(+), 2 deletions(-) diff --git a/apps/docs/utils/consent/consent.css b/apps/docs/utils/consent/consent.css index c7496d527b..bc2d6358ea 100644 --- a/apps/docs/utils/consent/consent.css +++ b/apps/docs/utils/consent/consent.css @@ -26,8 +26,11 @@ z-index: 9999; /* Ensure it's above other elements */ inset: 0; transition: opacity 0.3s ease; + /* transition: all 1s ease; + rotate: 0deg; */ @starting-style { opacity: 0; + /* rotate: 180deg; */ } } @@ -78,13 +81,59 @@ /* When aria-hidden="true" is set, hide the entire modal and the buttons */ .cm[aria-hidden="true"] { - display: none; /* Hides the modal visually */ + visibility: hidden; } .cm[aria-hidden="true"] .cm__btns { - display: none; /* Hides the buttons */ + visibility: hidden; } +/* ============ ADDED LINES FOR FADE ============ */ + +/* 1) Lägg till transition på opacity på samma .cm-element + (kompletterar den redan befintliga "translate 0.3s ease") */ + #cc-main .cm { + transition: + translate 0.3s ease, /* oförändrad från ursprunglig */ + opacity 1.3s ease; /* ny: fade in/out */ + + /* Grundvärden för fade-lösning */ + opacity: 1; + visibility: visible; + } + + /* 2) Vid aria-hidden="true" => fade out (opacity 0) */ + #cc-main .cm[aria-hidden="true"] { + opacity: 0; /* fade out */ + /* pointer-events: none; valfritt */ + /* visibility: hidden; valfritt */ + /* + Om du vill att elementet ska bli helt otillgängligt när + opaciteten nått 0, lägg till visibility: hidden; + samt ev. transition på visibility, t.ex.: + transition: opacity 0.3s ease, visibility 0s linear 0.3s; + */ + } + +/* Utgångsläge: overlay synlig */ +.cm .cm-wrapper { + transition: + translate 0.3s ease, /* oförändrad från ursprunglig */ + opacity 1.3s ease; /* ny: fade in/out */ + +/* Grundvärden för fade-lösning */ +opacity: 1; +visibility: visible; +} + +/* Om .cm har aria-hidden="true", sätt overlay -> opacity: 0 */ +.cm[aria-hidden="true"] .cm-wrapper { + opacity: 0; +} + + + + @media screen and (min-width: 640px) { #cc-main .cm { max-width: 500px; From ec48c8e1531780ac87c699396e6941183221b85f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Isabelle=20L=C3=B6fgren?= <104595550+IsabelleLof@users.noreply.github.com> Date: Tue, 31 Dec 2024 04:21:49 +0100 Subject: [PATCH 3/4] Update on the fade out, works. --- apps/docs/utils/consent/consent.css | 37 +++++++++++++++++++---------- 1 file changed, 24 insertions(+), 13 deletions(-) diff --git a/apps/docs/utils/consent/consent.css b/apps/docs/utils/consent/consent.css index bc2d6358ea..81729b101f 100644 --- a/apps/docs/utils/consent/consent.css +++ b/apps/docs/utils/consent/consent.css @@ -34,6 +34,7 @@ } } + .cm__btn-group { flex-direction: column; gap: var(--gds-space-m); @@ -115,21 +116,31 @@ */ } -/* Utgångsläge: overlay synlig */ -.cm .cm-wrapper { - transition: - translate 0.3s ease, /* oförändrad från ursprunglig */ - opacity 1.3s ease; /* ny: fade in/out */ + +/* =================== + 2) Fade on the background .cm-wrapper + =================== */ + .cm-wrapper { + position: fixed; + inset: 0; + background-color: rgba(0, 0, 0, 0.5); + z-index: 9999; + + /* Synlig från början */ + opacity: 1; + visibility: visible; + + /* Transition för fade */ + transition: opacity 1.3s ease, visibility 0s linear 0.3s; + } -/* Grundvärden för fade-lösning */ -opacity: 1; -visibility: visible; -} + /* Fade out the background overlay + when the modal .cm is aria-hidden */ + .cm-wrapper:has(.cm[aria-hidden="true"]) { + opacity: 0; + visibility: hidden; /* fully hidden after 0.3s */ + } -/* Om .cm har aria-hidden="true", sätt overlay -> opacity: 0 */ -.cm[aria-hidden="true"] .cm-wrapper { - opacity: 0; -} From e5407eb999c525840d1036e83229a216c414e98d Mon Sep 17 00:00:00 2001 From: Joacim Magnusson Date: Wed, 15 Jan 2025 17:10:01 +0100 Subject: [PATCH 4/4] Clean up some code --- apps/docs/utils/consent/consent.css | 140 ++++++++++++---------------- 1 file changed, 61 insertions(+), 79 deletions(-) diff --git a/apps/docs/utils/consent/consent.css b/apps/docs/utils/consent/consent.css index 81729b101f..bddaebb883 100644 --- a/apps/docs/utils/consent/consent.css +++ b/apps/docs/utils/consent/consent.css @@ -13,43 +13,31 @@ bottom: var(--gds-space-l); padding: var(--gds-space-xl); inset: 35% 8px auto; - transition: translate 0.3s ease; - @starting-style { - translate: 0 -40px; - } - } -.show--consent .cm-wrapper { +.cm-wrapper { position: fixed; background-color: rgba(0, 0, 0, 0.5); z-index: 9999; /* Ensure it's above other elements */ inset: 0; - transition: opacity 0.3s ease; - /* transition: all 1s ease; - rotate: 0deg; */ - @starting-style { - opacity: 0; - /* rotate: 180deg; */ - } + opacity: 1; + visibility: visible; } - .cm__btn-group { flex-direction: column; gap: var(--gds-space-m); display: flex; - } -#cc-main .cm__title { +.cm__title { color: var(--gds-color-l2-content-secondary); font-size: 1.25rem; font-weight: 450; margin: 0; } -#cc-main .cm__desc { +.cm__desc { color: var(--gds-color-l2-content-secondary); font-size: 1rem; line-height: 1.5; @@ -58,11 +46,7 @@ margin-bottom: var(--gds-space-l); } -#cm__desc { - margin: 0; -} - -#cc-main .cm__btn { +.cm__btn { background-color: var(--gds-color-l3-background-primary); border-radius: var(--gds-space-max); color: var(--gds-color-l3-content-primary); @@ -73,91 +57,89 @@ margin-top: 0; font-weight: 450; font-size: var(--gds-text-size-detail-m); - } -#cc-main .cm__btn:hover { - background-color: color-mix(in srgb, var(--gds-color-l3-background-primary), var(--gds-color-l3-states-dark-hover)); +.cm__btn:hover { + background-color: color-mix( + in srgb, + var(--gds-color-l3-background-primary), + var(--gds-color-l3-states-dark-hover) + ); } /* When aria-hidden="true" is set, hide the entire modal and the buttons */ -.cm[aria-hidden="true"] { +.cm[aria-hidden='true'] { visibility: hidden; } -.cm[aria-hidden="true"] .cm__btns { - visibility: hidden; +.cm[aria-hidden='true'] .cm__btns { + pointer-events: none; } /* ============ ADDED LINES FOR FADE ============ */ -/* 1) Lägg till transition på opacity på samma .cm-element - (kompletterar den redan befintliga "translate 0.3s ease") */ - #cc-main .cm { - transition: - translate 0.3s ease, /* oförändrad från ursprunglig */ - opacity 1.3s ease; /* ny: fade in/out */ - - /* Grundvärden för fade-lösning */ - opacity: 1; - visibility: visible; - } - - /* 2) Vid aria-hidden="true" => fade out (opacity 0) */ - #cc-main .cm[aria-hidden="true"] { - opacity: 0; /* fade out */ - /* pointer-events: none; valfritt */ - /* visibility: hidden; valfritt */ - /* - Om du vill att elementet ska bli helt otillgängligt när - opaciteten nått 0, lägg till visibility: hidden; - samt ev. transition på visibility, t.ex.: - transition: opacity 0.3s ease, visibility 0s linear 0.3s; - */ - } +/* Default state for backdrop */ +.cm-wrapper { + --duration: 0.3s; + transition: + opacity var(--duration) ease, + visibility var(--duration) ease; + visibility: hidden; + opacity: 0; +} -/* =================== - 2) Fade on the background .cm-wrapper - =================== */ - .cm-wrapper { - position: fixed; - inset: 0; - background-color: rgba(0, 0, 0, 0.5); - z-index: 9999; - - /* Synlig från början */ - opacity: 1; - visibility: visible; - - /* Transition för fade */ - transition: opacity 1.3s ease, visibility 0s linear 0.3s; - } - - /* Fade out the background overlay - when the modal .cm is aria-hidden */ - .cm-wrapper:has(.cm[aria-hidden="true"]) { +/* Visible state for backdrop */ +.show--consent .cm-wrapper { + opacity: 1; + visibility: visible; + + @starting-style { opacity: 0; - visibility: hidden; /* fully hidden after 0.3s */ } +} +/* Default state for modal */ +.cm { + transition: + translate var(--duration) ease, + opacity var(--duration) ease, + visibility var(--duration) ease; - + opacity: 0; + visibility: hidden; + translate: 0 -40px; +} +/* Visible state for modal */ +.show--consent .cm { + opacity: 1; + visibility: visible; + translate: 0 0; + + @starting-style { + translate: 0 -40px; + opacity: 0; + } +} + +@media (prefers-reduced-motion) { + .cm-wrapper { + --duration: 0s; + } +} @media screen and (min-width: 640px) { - #cc-main .cm { + .cm { max-width: 500px; border-radius: var(--gds-space-s); inset: 0; margin: auto; max-height: fit-content; - } - #cc-main .cm__btn-group { + .cm__btn-group { justify-content: flex-start; flex-direction: row; - } -} \ No newline at end of file +}