From 17864fdb4eeebc451ee4c2f6017fdaf9bfd09797 Mon Sep 17 00:00:00 2001 From: Margarita Golubeva Date: Mon, 3 Jun 2024 21:24:40 +0300 Subject: [PATCH] feat: add mixin for repeated links --- src/app/styles/mixins.scss | 64 +++++++++++++++++-- .../view/navigationView.module.scss | 51 ++------------- .../view/breadcrumbsView.module.scss | 40 ++---------- .../LoginPage/view/loginPageView.module.scss | 35 +++------- .../view/registrationPageView.module.scss | 35 +++------- .../view/userProfilePageView.module.scss | 50 ++------------- .../view/scrollToTopView.module.scss | 2 +- 7 files changed, 91 insertions(+), 186 deletions(-) diff --git a/src/app/styles/mixins.scss b/src/app/styles/mixins.scss index b92ae30f..be64c27c 100644 --- a/src/app/styles/mixins.scss +++ b/src/app/styles/mixins.scss @@ -3,6 +3,60 @@ $transform-scale: 0.9; $transform-scale-active: 0.9; $filter-opacity: 0.5; $filter-brightness: 1.3; +$basic-font: var(--regular-font); +$one: var(--one); +$two: var(--two); +$active-color: var(--steam-green-800); + +@mixin link($padding: 0 calc(var(--extra-small-offset) / 2), $color: var(--noble-gray-800)) { + position: relative; + display: flex; + align-items: center; + padding: $padding; + height: 100%; + font: $basic-font; + letter-spacing: $one; + text-transform: uppercase; + color: $color; + transition: color $transition-duration; + + &::after { + content: ''; + position: absolute; + left: 0; + bottom: calc($one * -1); + width: 100%; + height: $two; + background-color: currentcolor; + opacity: 0; + transform: scaleX(0); + transform-origin: center; + transition: + transform $transition-duration, + opacity $transition-duration; + } + + @media (hover: hover) { + &:hover { + color: $active-color; + + &::after { + opacity: 1; + transform: scaleX(1); + } + } + } +} + +@mixin active { + color: $active-color; + opacity: 1; + + &::after { + opacity: 1; + transform: scaleX(1); + } +} @mixin green-btn { display: flex; @@ -12,10 +66,10 @@ $filter-brightness: 1.3; border-radius: var(--medium-br); padding: calc(var(--small-offset) / 3) var(--small-offset); width: max-content; - font: var(--regular-font); - letter-spacing: var(--one); + font: $basic-font; + letter-spacing: $one; color: var(--button-white); - background-color: var(--steam-green-800); + background-color: $active-color; transition: filter $transition-duration, color $transition-duration, @@ -56,8 +110,8 @@ $filter-brightness: 1.3; $btn-padding: calc(var(--tiny-offset) * 1.5), $btn-bg: var(--noble-white-100), $btn-hover-bg: var(--white-tr), - $btn-fill: var(--steam-green-800), - $btn-stroke: var(--steam-green-800) + $btn-fill: $active-color, + $btn-stroke: $active-color ) { display: flex; align-items: center; diff --git a/src/entities/Navigation/view/navigationView.module.scss b/src/entities/Navigation/view/navigationView.module.scss index 4d9b8b65..e16ac383 100644 --- a/src/entities/Navigation/view/navigationView.module.scss +++ b/src/entities/Navigation/view/navigationView.module.scss @@ -1,3 +1,5 @@ +@import 'src/app/styles/mixins'; + .navigation { display: flex; align-items: center; @@ -14,52 +16,13 @@ } } -.link { - position: relative; - display: flex; - align-items: center; - padding: 0 calc(var(--extra-small-offset) / 2); - height: 100%; - font: var(--regular-font); - letter-spacing: 1px; - text-transform: uppercase; - color: var(--noble-gray-1100); - transition: color 0.2s; - - &::after { - content: ''; - position: absolute; - left: 0; - bottom: calc(var(--one) * -1); - width: 100%; - height: var(--two); - background-color: currentcolor; - opacity: 0; - transform: scaleX(0); - transform-origin: center; - transition: - transform 0.2s, - opacity 0.2s; - } +$color: var(--noble-gray-1100); +$padding: 0 calc(var(--extra-small-offset) / 2); - @media (hover: hover) { - &:hover { - color: var(--steam-green-800); - - &::after { - opacity: 1; - transform: scaleX(1); - } - } - } +.link { + @include link($padding, $color); } .active { - color: var(--steam-green-800); - opacity: 1; - - &::after { - opacity: 1; - transform: scaleX(1); - } + @include active; } diff --git a/src/features/Breadcrumbs/view/breadcrumbsView.module.scss b/src/features/Breadcrumbs/view/breadcrumbsView.module.scss index af4de312..89200a9a 100644 --- a/src/features/Breadcrumbs/view/breadcrumbsView.module.scss +++ b/src/features/Breadcrumbs/view/breadcrumbsView.module.scss @@ -1,3 +1,5 @@ +@import 'src/app/styles/mixins'; + .breadcrumbs { display: flex; align-items: center; @@ -10,44 +12,10 @@ } .link { - position: relative; - display: flex; - align-items: center; + @include link; + padding: var(--tiny-offset) calc(var(--tiny-offset) / 2); - height: 100%; - font: var(--regular-font); font-weight: 100; - letter-spacing: var(--one); - text-transform: uppercase; - color: var(--noble-gray-800); - transition: color 0.2s; - - &::after { - content: ''; - position: absolute; - left: 0; - bottom: calc(var(--one) * -1); - width: 100%; - height: var(--two); - background-color: currentcolor; - opacity: 0; - transform: scaleX(0); - transform-origin: center; - transition: - transform 0.2s, - opacity 0.2s; - } - - @media (hover: hover) { - &:hover { - color: var(--steam-green-800); - - &::after { - opacity: 1; - transform: scaleX(1); - } - } - } } .active { diff --git a/src/pages/LoginPage/view/loginPageView.module.scss b/src/pages/LoginPage/view/loginPageView.module.scss index 60b7f54e..9584150c 100644 --- a/src/pages/LoginPage/view/loginPageView.module.scss +++ b/src/pages/LoginPage/view/loginPageView.module.scss @@ -1,3 +1,5 @@ +@import 'src/app/styles/mixins'; + .loginPage { position: relative; display: block; @@ -58,35 +60,14 @@ } .registerLink { - position: relative; - color: var(--noble-gray-800); - transition: color 0.2s; - - &::after { - content: ''; - position: absolute; - left: 0; - bottom: -4px; - width: 100%; - height: var(--two); - background-color: currentcolor; - opacity: 0; - transform: scaleX(0); - transform-origin: center; - transition: - transform 0.2s, - opacity 0.2s; - } + @include link; - @media (hover: hover) { - &:hover { - color: var(--steam-green-800); + padding: 0; + font: var(--medium-font); + text-transform: none; - &::after { - opacity: 1; - transform: scaleX(1); - } - } + &::after { + bottom: calc(var(--one) * -4); } } diff --git a/src/pages/RegistrationPage/view/registrationPageView.module.scss b/src/pages/RegistrationPage/view/registrationPageView.module.scss index 40e08977..2dceaca9 100644 --- a/src/pages/RegistrationPage/view/registrationPageView.module.scss +++ b/src/pages/RegistrationPage/view/registrationPageView.module.scss @@ -1,3 +1,5 @@ +@import 'src/app/styles/mixins'; + .registrationPage { position: relative; display: block; @@ -63,35 +65,14 @@ } .loginLink { - position: relative; - color: var(--noble-gray-800); - transition: color 0.2s; - - &::after { - content: ''; - position: absolute; - left: 0; - bottom: -4px; - width: 100%; - height: var(--two); - background-color: currentcolor; - opacity: 0; - transform: scaleX(0); - transform-origin: center; - transition: - transform 0.2s, - opacity 0.2s; - } + @include link; - @media (hover: hover) { - &:hover { - color: var(--steam-green-800); + padding: 0; + font: var(--medium-font); + text-transform: none; - &::after { - opacity: 1; - transform: scaleX(1); - } - } + &::after { + bottom: calc(var(--one) * -4); } } diff --git a/src/pages/UserProfilePage/view/userProfilePageView.module.scss b/src/pages/UserProfilePage/view/userProfilePageView.module.scss index 4e1346de..906ac94b 100644 --- a/src/pages/UserProfilePage/view/userProfilePageView.module.scss +++ b/src/pages/UserProfilePage/view/userProfilePageView.module.scss @@ -71,56 +71,14 @@ } .link { - position: relative; - display: flex; - align-items: center; - align-self: center; - width: 100%; - height: 4rem; - font: var(--regular-font); - letter-spacing: var(--one); - text-align: center; - text-transform: uppercase; - color: var(--noble-gray-800); - transition: color 0.2s; - - &::after { - content: ''; - position: absolute; - left: 0; - bottom: 1rem; - width: 100%; - height: var(--two); - background-color: currentcolor; - opacity: 0; - transform: scaleX(0); - transform-origin: center; - transition: - transform 0.2s, - opacity 0.2s, - background-color 0.2s; - } + @include link; - @media (hover: hover) { - &:hover { - color: var(--steam-green-800); - - &::after { - opacity: 1; - transform: scaleX(1); - } - } - } + align-self: center; + height: calc(var(--large-offset) * 0.8); } .active { - color: var(--steam-green-800); - opacity: 1; - - &::after { - opacity: 1; - transform: scaleX(1); - } + @include active; } @keyframes show { diff --git a/src/shared/ScrollToTop/view/scrollToTopView.module.scss b/src/shared/ScrollToTop/view/scrollToTopView.module.scss index 81f27f1d..8504c231 100644 --- a/src/shared/ScrollToTop/view/scrollToTopView.module.scss +++ b/src/shared/ScrollToTop/view/scrollToTopView.module.scss @@ -25,7 +25,7 @@ $btn-vars: ( z-index: 1; width: calc(map-get($btn-vars, offset) * 1.5); height: calc(map-get($btn-vars, offset) * 1.5); - fill: map-get($btn-vars, fill); + fill: none; stroke: map-get($btn-vars, stroke); transition: transform 0.2s,