diff --git a/src/App.scss b/src/App.scss
index d388512e05..71bc413aad 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -1,2 +1 @@
// not empty
-
diff --git a/src/Components/Footer/Footer.scss b/src/Components/Footer/Footer.scss
index 4e76e480e2..abb947aa78 100644
--- a/src/Components/Footer/Footer.scss
+++ b/src/Components/Footer/Footer.scss
@@ -11,84 +11,68 @@ html {
.footer {
height: 96px;
- box-shadow: 0px -1px 0px 0px #E2E6E9;
- background: #FFFFFF;
+ box-shadow: 0 -1px 0 0 #e2e6e9;
+ background: #fff;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 90px;
+}
+
+.footer__FirstChild {
+ display: flex;
+ align-items: center;
+ gap: 64px;
+}
+
+.footer__FirstChild-nav-list {
+ margin: 0;
+ padding: 0;
+ display: flex;
+ list-style: none;
+ font-size: 12px;
+ font-family: "Mont-Regular", sans-serif;
+ font-weight: 700;
+ text-transform: uppercase;
+ line-height: 1.5;
+ letter-spacing: 0.48;
+ word-wrap: break-word;
+ overflow: hidden;
+}
+
+.footer__FirstChild-nav-link {
+ display: flex;
+ position: relative;
+ text-decoration: none;
+ color: #89939a;
+ transition: 0.3s;
+}
+
+.footer__FirstChild-nav-link:hover {
+ color: #313237;
+}
- &__FirstChild {
- display: flex;
- align-items: center;
- gap: 64px;
-
- }
-
- &__FirstChild-nav {
- &-list {
- margin: 0;
- padding: 0;
- display: flex;
- list-style: none;
- font-size: 12px;
- font-family: "Mont-Regular", sans-serif;
- font-weight: 700;
- text-transform: uppercase;
- line-height: 5.5;
- letter-spacing: 0.48;
- word-wrap: break-word;
- overflow: hidden;
- }
-
- &-link {
- display: flex;
- position: relative;
- text-decoration: none;
- color: #89939A;
- transition: .3s;
-
- &:hover {
- color: #313237;
- }
- }
- }
-
- &__FirstChild-nav-item:not(:last-child) {
-
- margin-right: 64px;
- }
-
- &__LastChild-arrow {
- display: flex;
- justify-content: center;
- align-items: center;
- width: 32px;
- height: 32px;
- flex-shrink: 0;
- background: #FFF;
- border: 1px solid #B4BDC3;
- transition: .3s;
-
- &:hover {
- box-shadow: 1px 0px 0px 0px #b7bcc0;
- box-shadow: -1px 0px 0px 0px #b7bcc0;
- }
-
- &:focus {
- box-shadow: 1px 0px 0px 0px #747779;
- box-shadow: -1px 0px 0px 0px #747779;
-
- }
-
- &:active {
- box-shadow: 1px 0px 0px 0px #000000;
- box-shadow: -1px 0px 0px 0px #000000;
-
-
- }
-
- }
+.footer__FirstChild-nav-item:not(:last-child) {
+ margin-right: 64px;
+}
+
+.footer__LastChild-arrow {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ width: 32px;
+ height: 32px;
+ flex-shrink: 0;
+ background: #fff;
+ border: 1px solid #b4bdc3;
+ transition: 0.3s;
+}
+
+.footer__LastChild-arrow:hover,
+.footer__LastChild-arrow:focus,
+.footer__LastChild-arrow:active {
+ box-shadow: 1px 0 0 0 #747779;
+ box-shadow: -1px 0 0 0 #747779;
}
.arrow-svg {
@@ -110,33 +94,34 @@ html {
height: 24px;
width: 40px;
background-repeat: no-repeat;
- transition: .3s;
+ transition: 0.3s;
+}
- &:hover {
- height: 32px;
- width: 48px;
- cursor: pointer;
- }
+.logoImage:hover {
+ height: 32px;
+ width: 48px;
+ cursor: pointer;
}
.footer__ThridChild {
- display: flex;
align-items: center;
gap: 16px;
}
.footer-p {
- color: #89939A;
+ color: #89939a;
text-align: right;
font-size: 12px;
font-family: "Mont-Regular", sans-serif;
font-weight: 600;
}
-.is-activ {
+.is-active {
display: flex;
position: relative;
text-decoration: none;
color: #313237;
- transition: .3s;
-}
\ No newline at end of file
+ transition: 0.3s;
+}
+
+$variable: 10px;
diff --git a/src/Components/Footer/Footer.tsx b/src/Components/Footer/Footer.tsx
index 6ecde9131e..b801fd0b21 100644
--- a/src/Components/Footer/Footer.tsx
+++ b/src/Components/Footer/Footer.tsx
@@ -42,7 +42,7 @@ export const Footer: FC = () => {
Contacts
@@ -50,7 +50,7 @@ export const Footer: FC = () => {
rights
diff --git a/src/Components/Header/Header.scss b/src/Components/Header/Header.scss
index 785ad26177..fc48c419ca 100644
--- a/src/Components/Header/Header.scss
+++ b/src/Components/Header/Header.scss
@@ -4,8 +4,8 @@
left: 0;
right: 0;
max-height: 65px;
- box-shadow: 0px 1px 0px 0px #E2E6E9;
- background: #FFFFFF;
+ box-shadow: 0px 1px 0px 0px #e2e6e9;
+ background: #ffffff;
display: flex;
justify-content: space-between;
align-items: center;
@@ -39,8 +39,8 @@
display: flex;
position: relative;
text-decoration: none;
- color: #89939A;
- transition: .3s;
+ color: #89939a;
+ transition: 0.3s;
}
&-item:not(:last-child) {
@@ -77,11 +77,11 @@
width: 64px;
height: 64px;
flex-shrink: 0;
- background: #FFF;
- box-shadow: -1px 0px 0px 0px #E2E6E9;
+ background: #fff;
+ box-shadow: -1px 0px 0px 0px #e2e6e9;
min-width: 64px;
min-height: 64px;
- transition: .3s;
+ transition: 0.3s;
&:hover {
box-shadow: -1px 0px 0px 0px #b7bcc0;
@@ -99,7 +99,7 @@
right: 0;
background: #313237;
height: 3px;
- box-shadow: -1px 0px 0px 0px #000000;
+ box-shadow: -1px 0px 0px 0px #000;
}
}
@@ -119,21 +119,21 @@
width: 64px;
height: 64px;
flex-shrink: 0;
- background: #FFF;
- box-shadow: -1px 0px 0px 0px #E2E6E9;
+ background: #fff;
+ box-shadow: -1px 0px 0px 0px #e2e6e9;
&:hover {
box-shadow: -1px 0px 0px 0px #b7bcc0;
}
&:focus,
- .is-activ {
+ .is-active {
box-shadow: -1px 0px 0px 0px #747779;
}
}
}
-.is-activ::after {
+.is-active::after {
content: "";
position: absolute;
bottom: 0;
@@ -141,7 +141,7 @@
right: 0;
background: #313237;
height: 3px;
- box-shadow: -1px 0px 0px 0px #000000;
+ box-shadow: -1px 0px 0px 0px #000;
}
.heart-svg {
@@ -157,7 +157,7 @@
}
.circle-for-header {
- border: 1px solid #FFF;
+ border: 1px solid #fff;
position: absolute;
top: 12px;
left: 35px;
@@ -171,7 +171,7 @@
}
.counter-for-header {
- color: #FFF;
+ color: #fff;
text-align: center;
font-family: "Mont-Regular", sans-serif;
font-size: 9px;
@@ -182,7 +182,6 @@
text-decoration: none;
}
-
.basket-svg {
background-size: cover;
background-repeat: no-repeat;
@@ -198,7 +197,7 @@
height: 24px;
width: 40px;
background-repeat: no-repeat;
- transition: .3s;
+ transition: 0.3s;
&:hover {
height: 32px;
@@ -209,7 +208,6 @@
.color-toggle {
background-color: blue;
- /* Цвет по умолчанию */
color: white;
padding: 10px;
border: none;
@@ -218,7 +216,6 @@
.color-toggle.gray {
background-color: gray;
- /* Цвет при выбранном состоянии */
}
.search-input {
@@ -227,7 +224,7 @@
font-style: normal;
font-weight: 600;
line-height: normal;
- color: var(--gray-icons-placeholders, #B4BDC3);
+ color: var(--gray-icons-placeholders, #b4bdc3);
}
.search-input:focus,
@@ -236,22 +233,15 @@
}
@keyframes bounce {
-
- 0%,
- 20%,
- 60%,
- 100% {
- transform: translateY(0);
+ 0%, 20%, 60%, 100% {
transform: translateY(0);
}
40% {
transform: translateY(-10px);
- transform: translateY(-10px);
}
80% {
transform: translateY(-5px);
- transform: translateY(-5px);
}
-}
\ No newline at end of file
+}
diff --git a/src/Components/Header/Header.tsx b/src/Components/Header/Header.tsx
index 83da114b32..d6c4c82577 100644
--- a/src/Components/Header/Header.tsx
+++ b/src/Components/Header/Header.tsx
@@ -51,7 +51,10 @@ export const Header = ({ searchValue, setSearchValue }: HeaderProps) => {
-