angestoepselt/homepage
5
0
Fork 0
mirror of https://codeberg.org/angestoepselt/homepage.git synced 2025-05-24 14:46:16 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Add more animations

Browse source
This commit is contained in:
Yannik Rödel 2021-09-21 13:40:38 +02:00
parent 319fed0af3
commit 346efc1db1
4 changed files with 58 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
styles/components/_actions.scss
View file

@ -31,6 +31,7 @@
color: inherit; color: inherit;
text-decoration: none; text-decoration: none;
@include colors.card-shadow; @include colors.card-shadow;
transition: motion.$subtle background-color, motion.$subtle transform;
> h3 { > h3 {
margin: 0; margin: 0;
@ -44,7 +45,12 @@
} }
&:hover { &: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; margin: 0;
&.first { &.first {
transform: translateY(#{-1 * layout.$huge-gap}); position: relative;
bottom: layout.$huge-gap;
} }
&:not(.first) { &:not(.first) {

58
styles/components/_form-choices.scss
View file

@ -1,4 +1,5 @@
@use '../lib/colors'; @use '../lib/colors';
@use '../lib/motion';
@use '../lib/layout'; @use '../lib/layout';
.form-choices { .form-choices {
@ -36,22 +37,47 @@
} }
> a { > a {
padding: layout.$small-gap layout.$normal-gap; @extend %form-choice-link;
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;
}
} }
} }
} }
%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;
}
}

4
styles/components/_form-elements.scss
View file

@ -1,5 +1,6 @@
@use '../lib/colors'; @use '../lib/colors';
@use '../lib/layout'; @use '../lib/layout';
@use '../lib/motion';
@use '../lib/typography'; @use '../lib/typography';
%form-item { %form-item {
@ -22,6 +23,7 @@
@extend %base-form-input; @extend %base-form-input;
padding: layout.$small-gap; padding: layout.$small-gap;
font: inherit; font: inherit;
transition: motion.$subtle background-color;
&:hover { &:hover {
background-color: colors.$gray-300; background-color: colors.$gray-300;
@ -30,7 +32,7 @@
&:focus-visible, &:focus-visible,
&:active { &:active {
outline: none; outline: none;
background-color: colors.$yellow-600; background-color: colors.$yellow-500;
} }
} }

6
styles/lib/_colors.scss
View file

@ -2,6 +2,7 @@ $gray-900: #1d1d1d;
$gray-800: #212121; $gray-800: #212121;
$gray-600: #707070; $gray-600: #707070;
$gray-300: #d6d6d6; $gray-300: #d6d6d6;
$gray-100: #f9f9f9;
$gray-50: #ffffff; $gray-50: #ffffff;
$teal-500: #4edcca; $teal-500: #4edcca;
@ -20,6 +21,7 @@ $main-background: $gray-50;
box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15); box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
} }
@mixin card-shadow { @mixin card-shadow($base-color: $gray-900) {
box-shadow: 0.4rem 0.5rem 1.5rem rgba(0, 0, 0, 0.15); box-shadow: 0.1rem 0.4rem 0.4rem #{transparentize($base-color, 0.9)},
0.25rem 1rem 1rem #{transparentize($base-color, 0.9)};
} }