The latest version before fixing the counts in the shopping cart

mate-academy · Jul 25, 2023 · 959e1a5 · 959e1a5
1 parent 91f5e9c
commit 959e1a5
Show file tree

Hide file tree

Showing 7 changed files with 151 additions and 189 deletions.
diff --git 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
@@ -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;
-}
+  transition: 0.3s;
+}
+
+$variable: 10px;
diff --git a/src/Components/Footer/Footer.tsx b/src/Components/Footer/Footer.tsx
@@ -42,15 +42,15 @@ export const Footer: FC = () => {
               <li className="footer__FirstChild-nav-item">
                 <Link
                   to="/contacts"
-                  className={`footer__FirstChild-nav-link ${location.pathname === '/contacts' ? 'is-activ' : ''}`}
+                  className={`footer__FirstChild-nav-link ${location.pathname === '/contacts' ? 'is-activee' : ''}`}
                 >
                   Contacts
                 </Link>
               </li>
               <li className="footer__FirstChild-nav-item">
                 <Link
                   to="/rights"
-                  className={`footer__FirstChild-nav-link ${location.pathname === '/rights' ? 'is-activ' : ''}`}
+                  className={`footer__FirstChild-nav-link ${location.pathname === '/rights' ? 'is-activee' : ''}`}
                 >
                   rights
                 </Link>

diff --git 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,29 +119,29 @@
     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;
   left: 0;
   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);
   }
-}
+}