diff --git a/assets/postcode_modal.css b/assets/postcode_modal.css index bc7aa0a..77e835c 100644 --- a/assets/postcode_modal.css +++ b/assets/postcode_modal.css @@ -15,6 +15,9 @@ transition: opacity 0.3s ease, display 0.3s allow-discrete; + @starting-style { + opacity: 0; + } } h2 { @@ -40,6 +43,7 @@ caret-color: var(--wp--preset--color--vivid-red); background: hsl(0 1 80); border: none; + text-transform: uppercase; &:focus, &:valid, @@ -50,14 +54,17 @@ } } - button { + #postcode_modal_submit { + display: grid; + grid-template-columns: 1fr; + grid-template-rows: 1fr; + place-items: center; font-size: 1.2rem; font-weight: 700; color: hsl(233 100 100); padding: 0.4rem 1rem; background: var(--wp--preset--color--vivid-red); border: 1px var(--wp--preset--color--vivid-red) solid; - margin: 0 0 0 0.3rem; transition: 0.2s all linear; padding: 0.2em 2.5em; &:hover { @@ -65,16 +72,23 @@ background: hsl(344 98 100); cursor: pointer; } - } + &:hover > .btn_loader > svg > circle { + fill: var(--wp--preset--color--vivid-red); + } + + .btn_loader, + .btn_text { + transition: 0.2s opacity linear; + grid-row: 1 / -1; + grid-column: 1 / -1; + } + } .form_fields { display: flex; - justify-content: space-between; + justify-content: center; align-items: center; - div { - display: flex; - gap: 1.5rem; - } + gap: 0.5rem; } &::backdrop { @@ -87,3 +101,27 @@ color: var(--wp--preset--color--vivid-red); } /* HTML:
*/ } + +/* HTML:
*/ +.btn_loader { + opacity: 0; + svg { + height: 0.4rem; + } + circle { + fill: white; + transition: 0.2s fill linear; + animation: loader-pulse 1.5s ease-in-out infinite; + animation-delay: calc((var(--i, 0)) * 0.2s); + } +} + +@keyframes loader-pulse { + 0%, + 100% { + opacity: 0.3; /* Dim state */ + } + 50% { + opacity: 1; /* Bright state */ + } +}