Skip to content

Commit

Permalink
feat: add mixin for repeated links
Browse files Browse the repository at this point in the history
  • Loading branch information
@stardustmeg
stardustmeg committed Jun 3, 2024
1 parent ce214f1 commit 17864fd
Show file tree
Hide file tree
Showing 7 changed files with 91 additions and 186 deletions.
64 changes: 59 additions & 5 deletions src/app/styles/mixins.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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,
Expand Down Expand Up @@ -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;
Expand Down
51 changes: 7 additions & 44 deletions src/entities/Navigation/view/navigationView.module.scss
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
@import 'src/app/styles/mixins';

.navigation {
display: flex;
align-items: center;
Expand All @@ -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;
}
40 changes: 4 additions & 36 deletions src/features/Breadcrumbs/view/breadcrumbsView.module.scss
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
@import 'src/app/styles/mixins';

.breadcrumbs {
display: flex;
align-items: center;
Expand All @@ -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 {
Expand Down
35 changes: 8 additions & 27 deletions src/pages/LoginPage/view/loginPageView.module.scss
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
@import 'src/app/styles/mixins';

.loginPage {
position: relative;
display: block;
Expand Down Expand Up @@ -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);
}
}

Expand Down
35 changes: 8 additions & 27 deletions src/pages/RegistrationPage/view/registrationPageView.module.scss
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
@import 'src/app/styles/mixins';

.registrationPage {
position: relative;
display: block;
Expand Down Expand Up @@ -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);
}
}

Expand Down
50 changes: 4 additions & 46 deletions src/pages/UserProfilePage/view/userProfilePageView.module.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down
2 changes: 1 addition & 1 deletion src/shared/ScrollToTop/view/scrollToTopView.module.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down

1 comment on commit 17864fd

@stardustmeg
Copy link
Owner Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Add a mixin for links

Please sign in to comment.