diff --git a/styles/components/_actions.scss b/styles/components/_actions.scss index 720aa33..49fad32 100644 --- a/styles/components/_actions.scss +++ b/styles/components/_actions.scss @@ -31,6 +31,7 @@ color: inherit; text-decoration: none; @include colors.card-shadow; + transition: motion.$subtle background-color, motion.$subtle transform; > h3 { margin: 0; @@ -44,7 +45,12 @@ } &:hover { - @extend %action-icon-hover; + background-color: colors.$gray-100; + transform: translateY(-0.5rem); + + > .action-icon { + @extend %action-icon-hover; + } } } @@ -66,7 +72,8 @@ margin: 0; &.first { - transform: translateY(#{-1 * layout.$huge-gap}); + position: relative; + bottom: layout.$huge-gap; } &:not(.first) { diff --git a/styles/components/_form-choices.scss b/styles/components/_form-choices.scss index dc845db..605093a 100644 --- a/styles/components/_form-choices.scss +++ b/styles/components/_form-choices.scss @@ -1,4 +1,5 @@ @use '../lib/colors'; +@use '../lib/motion'; @use '../lib/layout'; .form-choices { @@ -36,22 +37,47 @@ } > a { - padding: layout.$small-gap layout.$normal-gap; - display: inline-block; - line-height: 2.5; - text-decoration: none; - - &:hover { - background-color: colors.$yellow-600; - color: inherit; - @include colors.card-shadow; - } - - > em { - padding-block: layout.$small-gap; - font-style: inherit; - background-color: colors.$yellow-600; - } + @extend %form-choice-link; } } } + +%form-choice-link { + padding: layout.$small-gap layout.$normal-gap; + display: inline-block; + line-height: 2.5; + text-decoration: none; + transition: motion.$subtle background-color, motion.$subtle box-shadow; + + @keyframes form-choice-hover { + 0% { background-position: -100% 0; } + 100% { background-position: 200% 0; } + } + + &:hover { + background-color: colors.$yellow-600; + background-image: linear-gradient( + -45deg, + transparent 0%, + #{transparentize(colors.$yellow-500, 0.6)} 50%, + transparent 100% + ); + background-size: 200% 100%; + background-repeat: no-repeat; + color: inherit; + @include colors.card-shadow(colors.$yellow-500); + animation: + motion.$prominent 0s 1 normal both running form-choice-hover; + + > em { + background-color: transparent; + } + } + + > em { + padding-block: layout.$small-gap; + font-style: inherit; + background-color: colors.$yellow-600; + transition: motion.$subtle background-color; + } +} diff --git a/styles/components/_form-elements.scss b/styles/components/_form-elements.scss index 39c56f7..e8d36d7 100644 --- a/styles/components/_form-elements.scss +++ b/styles/components/_form-elements.scss @@ -1,5 +1,6 @@ @use '../lib/colors'; @use '../lib/layout'; +@use '../lib/motion'; @use '../lib/typography'; %form-item { @@ -22,6 +23,7 @@ @extend %base-form-input; padding: layout.$small-gap; font: inherit; + transition: motion.$subtle background-color; &:hover { background-color: colors.$gray-300; @@ -30,7 +32,7 @@ &:focus-visible, &:active { outline: none; - background-color: colors.$yellow-600; + background-color: colors.$yellow-500; } } diff --git a/styles/lib/_colors.scss b/styles/lib/_colors.scss index 5e9eb5a..d19bdec 100644 --- a/styles/lib/_colors.scss +++ b/styles/lib/_colors.scss @@ -2,6 +2,7 @@ $gray-900: #1d1d1d; $gray-800: #212121; $gray-600: #707070; $gray-300: #d6d6d6; +$gray-100: #f9f9f9; $gray-50: #ffffff; $teal-500: #4edcca; @@ -20,6 +21,7 @@ $main-background: $gray-50; box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15); } -@mixin card-shadow { - box-shadow: 0.4rem 0.5rem 1.5rem rgba(0, 0, 0, 0.15); +@mixin card-shadow($base-color: $gray-900) { + box-shadow: 0.1rem 0.4rem 0.4rem #{transparentize($base-color, 0.9)}, + 0.25rem 1rem 1rem #{transparentize($base-color, 0.9)}; }