From 35efdebdd48f58e1583a71e36ac7e4142f8e9fc9 Mon Sep 17 00:00:00 2001 From: Marco Vockner Date: Sat, 20 Apr 2024 22:06:44 +0200 Subject: [PATCH] feat: add additional animations & shadows --- src/assets/styles/_animations.css | 1 + src/assets/styles/_animations.scss | 33 +++++++++++++++++++++ src/components/IconGrid/IconGrid.vue | 41 ++++++++++++++++++++++---- src/components/MainHeader.vue | 43 ++++++++++++++++++++++++++++ 4 files changed, 113 insertions(+), 5 deletions(-) create mode 100644 src/assets/styles/_animations.css diff --git a/src/assets/styles/_animations.css b/src/assets/styles/_animations.css new file mode 100644 index 0000000..fb808bb --- /dev/null +++ b/src/assets/styles/_animations.css @@ -0,0 +1 @@ +.slide-fade-left-enter-active{transition:all .3s ease-out}.slide-fade-left-leave-active{transition:all .8s cubic-bezier(1, 0.5, 0.8, 1)}.slide-fade-left-enter-from,.slide-fade-left-leave-to{transform:translateX(20px);opacity:0}.fade-enter-active,.fade-leave-active{transition:opacity .3s ease}.fade-enter-from,.fade-leave-to{opacity:0}@keyframes popover-slide-down{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}@keyframes popover-slideup{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes gradient-animation-button{0%{border-color:#e73c7e;background:#e73c7e}20%{border-color:#23a6d5;background:#23a6d5}35%{border-color:#23d5ab;background:#23d5ab}50%{border-color:#23a6d5;background:#23a6d5}65%{border-color:#e73c7e;background:#e73c7e}80%{border-color:#ee7752;background:#ee7752}100%{border-color:#e73c7e;background:#e73c7e}}@keyframes gradient-animation-install{0%{border-color:#e73c7e}20%{border-color:#23a6d5}35%{border-color:#23d5ab}50%{border-color:#23a6d5}65%{border-color:#e73c7e}80%{border-color:#ee7752}100%{border-color:#e73c7e}}@keyframes gradient-animation-install-bg{0%{background:#e73c7e}20%{background:#23a6d5}35%{background:#23d5ab}50%{background:#23a6d5}65%{background:#e73c7e}80%{background:#ee7752}100%{background:#e73c7e}}@keyframes gradient-animation-install-shadow{0%{box-shadow:0 0 30px 2px #e73c7e}20%{box-shadow:0 0 30px 2px #23a6d5}35%{box-shadow:0 0 30px 2px #23d5ab}50%{box-shadow:0 0 30px 2px #23a6d5}65%{box-shadow:0 0 30px 2px #e73c7e}80%{box-shadow:0 0 30px 2px #ee7752}100%{box-shadow:0 0 30px 2px #e73c7e}} \ No newline at end of file diff --git a/src/assets/styles/_animations.scss b/src/assets/styles/_animations.scss index aae2bea..7c90f89 100644 --- a/src/assets/styles/_animations.scss +++ b/src/assets/styles/_animations.scss @@ -145,3 +145,36 @@ background: colors.$gradient-step-2; } } + +@keyframes gradient-animation-install-shadow { + $blur-radius: 30px; + $spread-radius: 2px; + + 0% { + box-shadow: 0 0 $blur-radius $spread-radius colors.$gradient-step-2; + } + + 20% { + box-shadow: 0 0 $blur-radius $spread-radius colors.$gradient-step-3; + } + + 35% { + box-shadow: 0 0 $blur-radius $spread-radius colors.$gradient-step-4; + } + + 50% { + box-shadow: 0 0 $blur-radius $spread-radius colors.$gradient-step-3; + } + + 65% { + box-shadow: 0 0 $blur-radius $spread-radius colors.$gradient-step-2; + } + + 80% { + box-shadow: 0 0 $blur-radius $spread-radius colors.$gradient-step-1; + } + + 100% { + box-shadow: 0 0 $blur-radius $spread-radius colors.$gradient-step-2; + } +} diff --git a/src/components/IconGrid/IconGrid.vue b/src/components/IconGrid/IconGrid.vue index 65ef0f7..73184e2 100644 --- a/src/components/IconGrid/IconGrid.vue +++ b/src/components/IconGrid/IconGrid.vue @@ -282,11 +282,14 @@ const filteredItems = computed(() => { transition: all 0.3s ease; &:hover { + border: 1px solid rgba(colors.$white, 0.2); background-color: color.mix(colors.$white, colors.$body-bg, 10%); + box-shadow: 0 0 20px 2px rgba(colors.$white, 0.05); } &:focus-within { - border: 1px solid rgba(colors.$white, 0.3); + border: 1px solid rgba(colors.$white, 0.4); + box-shadow: 0 0 20px 2px rgba(colors.$white, 0.05); } .icongrid-search-icon { @@ -378,11 +381,14 @@ const filteredItems = computed(() => { } &:hover { - background-color: color.mix(colors.$white, colors.$body-bg, 15%); + border: 1px solid rgba(colors.$white, 0.2); + background-color: color.mix(colors.$white, colors.$body-bg, 10%); + box-shadow: 0 0 20px 2px rgba(colors.$white, 0.05); } &:focus-within { - border: 1px solid rgba(colors.$white, 0.1); + border: 1px solid rgba(colors.$white, 0.4); + box-shadow: 0 0 20px 2px rgba(colors.$white, 0.05); } .multiselect-multiple-label, @@ -446,10 +452,19 @@ const filteredItems = computed(() => { transition: all 0.3s ease; } - &:hover, - &:focus { + &:hover { + border: 1px solid rgba(colors.$white, 0.2); background-color: color.mix(colors.$white, colors.$body-bg, 10%); + box-shadow: 0 0 20px 2px rgba(colors.$white, 0.05); + } + &.focus { + border: 1px solid rgba(colors.$white, 0.4); + box-shadow: 0 0 20px 2px rgba(colors.$white, 0.05); + } + + &:hover, + &.focus { /* stylelint-disable-next-line no-descending-specificity */ svg { transform: scale(1.1); @@ -463,6 +478,7 @@ const filteredItems = computed(() => { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-top: 1.5rem; + transition: all 0.3s ease; @include mixins.breakpoint("sm") { grid-template-columns: repeat(3, minmax(0, 1fr)); @@ -493,6 +509,21 @@ const filteredItems = computed(() => { transition: all 0.3s ease; grid-column: 1 / -1; } + + .icongrid-tile { + &:hover, + &:focus { + opacity: 1 !important; + box-shadow: 0 0 20px 2px rgba(colors.$white, 0.1); + } + } + + &:hover, + &:focus { + .icongrid-tile { + opacity: 0.6; + } + } } .icongrid-search-tags { diff --git a/src/components/MainHeader.vue b/src/components/MainHeader.vue index 0f90d6a..3e4df96 100644 --- a/src/components/MainHeader.vue +++ b/src/components/MainHeader.vue @@ -138,11 +138,32 @@ import LogoSVG from "@assets/logo.svg?component" opacity: 0.2; } + &::after { + content: ""; + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + border: none; + border-radius: $border-radius; + background-color: transparent; + box-shadow: 0 0 40px 4px rgba(colors.$gradient-step-2, 0.6); + animation: gradient-animation-install-shadow 15s ease infinite; + transition: opacity 0.3s ease; + z-index: -2; + opacity: 0.3; + } + &:hover, &:focus { &::before { opacity: 0.4; } + + &::after { + opacity: 0.8; + } } } @@ -164,6 +185,7 @@ import LogoSVG from "@assets/logo.svg?component" justify-content: center; a { + position: relative; display: flex; align-items: center; padding: 0.5rem 1.75rem; @@ -175,9 +197,30 @@ import LogoSVG from "@assets/logo.svg?component" white-space: nowrap; animation: gradient-animation-button 15s ease infinite; + &::after { + content: ""; + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + border: none; + border-radius: $border-radius; + background-color: transparent; + box-shadow: 0 0 40px 4px rgba(colors.$gradient-step-2, 0.6); + animation: gradient-animation-install-shadow 15s ease infinite; + transition: opacity 0.3s ease; + z-index: -2; + opacity: 0.3; + } + &:hover, &:focus { transform: scale(1.1); + + &::after { + opacity: 0.8; + } } }