diff options
| -rw-r--r-- | htdocs/src/scss/layout/_nav.scss | 67 |
1 files changed, 31 insertions, 36 deletions
diff --git a/htdocs/src/scss/layout/_nav.scss b/htdocs/src/scss/layout/_nav.scss index f4508d0..9f80a65 100644 --- a/htdocs/src/scss/layout/_nav.scss +++ b/htdocs/src/scss/layout/_nav.scss @@ -16,45 +16,40 @@ } } - &__link { - &--back { - display: inline-block; - margin: fun.get-var(spacing-sm) 0; - - &::before { - content: "\1F810"; - display: inline-block; - text-decoration: none; - } - } - - &--app { - background: fun.get-var(color-bg); - border: fun.convert-px(1) solid fun.get-var(color-border); - display: block; - padding: fun.get-var(spacing-2xs); - position: relative; - text-decoration: none; - transition: all 0.3s ease-in-out 0s; - width: 100%; - - &:hover, - &:focus { - background: fun.get-var(color-primary); - color: fun.get-var(color-fg-inverted); - } + &__item { + margin: fun.get-var(spacing-2xs) 0; + } - &:active { - background: fun.get-var(color-bg); - color: fun.get-var(color-primary-dark); - text-decoration: fun.convert-px(1) solid underline; - } + &__link { + background-image: linear-gradient( + to left, + #{fun.get-var(color-bg)} 0, + #{fun.get-var(color-bg)} 50%, + #{fun.get-var(color-primary)} 50% + ); + background-position: 100% 0; + background-size: 200% 100%; + border: fun.convert-px(3) solid fun.get-var(color-border); + border-radius: fun.convert-px(50); + display: block; + font-weight: 600; + margin: auto; + padding: fun.get-var(spacing-3xs); + position: relative; + text-decoration: none; + transition: all 0.4s ease-in-out 0s; + width: 75%; + + &:hover, + &:focus { + background-position: 0 0; + color: fun.get-var(color-fg-inverted); } - } - &__item:not(:first-child) & { - &__link { - border-top: 0; + &:active { + background-position: 100% 0; + color: fun.get-var(color-primary-dark); + text-decoration: fun.convert-px(1) solid underline; } } |