edit colors scss

EuJinnLucaShow · Dec 12, 2022 · ca22c50 · ca22c50
1 parent 8b9edeb
commit ca22c50
Show file tree

Hide file tree

Showing 13 changed files with 88 additions and 96 deletions.
diff --git a/css/main.css b/css/main.css
@@ -1,11 +1,4 @@
 @charset "UTF-8";
-:root {
-  --primary-text-color: #212121;
-  --second-text-color: #757575;
-  --primary-white-color: #fff;
-  --second-blue-color: #2196f3;
-}
-
 p,
 h1,
 h2,
@@ -20,8 +13,8 @@ body {
   font-size: 14px;
   font-family: "Roboto", sans-serif;
   letter-spacing: 0.03em;
-  color: var(--primary-text-color);
-  background-color: var(--primary-white-color);
+  color: #212121;
+  background-color: #fff;
 }
 
 a {
@@ -45,7 +38,7 @@ section {
 
 footer {
   background: #2f303a;
-  color: var(--primary-white-color);
+  color: #fff;
 }
 
 .container {
@@ -79,7 +72,7 @@ header .container {
   font-weight: 700;
   font-size: 26px;
   line-height: 1.19;
-  color: var(--second-blue-color);
+  color: #2196f3;
 }
 
 .page-header__logo {
@@ -89,11 +82,11 @@ header .container {
 }
 
 .page-header__span {
-  color: var(--primary-text-color);
+  color: #212121;
 }
 
 .page-footer__span {
-  color: var(--primary-white-color);
+  color: #fff;
 }
 
 /* Header nav */
@@ -106,12 +99,12 @@ header .container {
   font-size: 14px;
   line-height: 1.14;
   letter-spacing: 0.02em;
-  color: var(--primary-text-color);
+  color: #212121;
 }
 
 .page-header__link:hover,
 .page-header__link:focus {
-  color: var(--second-blue-color);
+  color: #2196f3;
   transition-duration: 250ms;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
 }
@@ -130,15 +123,15 @@ header .container {
   bottom: 0;
   width: 100%;
   height: 4px;
-  background: var(--second-blue-color);
+  background: #2196f3;
   border-radius: 2px;
   opacity: 0;
   transform: scaleX(0);
   transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1);
 }
 
 .page-header__current {
-  color: var(--second-blue-color);
+  color: #2196f3;
 }
 
 .page-header__current.page-header__link::after {
@@ -159,26 +152,26 @@ header .container {
   font-size: 14px;
   line-height: 1.14;
   letter-spacing: 0.02em;
-  color: var(--second-text-color);
+  color: #757575;
   border: none;
 }
 
 .page-header__icon {
   margin-right: 10px;
   padding: 0;
-  fill: var(--second-text-color);
+  fill: #757575;
 }
 
 .page-header__contact:hover,
 .page-header__contact:focus {
-  color: var(--second-blue-color);
+  color: #2196f3;
   transition-duration: 250ms;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
 }
 
 .page-header__contact:hover .page-header__icon,
 .page-header__contact:focus .page-header__icon {
-  fill: var(--second-blue-color);
+  fill: #2196f3;
   transition-duration: 250ms;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
 }
@@ -205,12 +198,12 @@ header .container {
   letter-spacing: 0.06em;
   text-transform: uppercase;
   max-width: 696px;
-  color: var(--primary-white-color);
+  color: #fff;
 }
 
 .button {
-  background: var(--second-blue-color);
-  color: var(--primary-white-color);
+  background: #2196f3;
+  color: #fff;
   border-radius: 4px;
   border: none;
   padding: 10px 32px 10px 32px;
@@ -226,7 +219,7 @@ header .container {
 .button:focus {
   background: #188ce8;
   box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.15);
-  color: white;
+  color: #fff;
   transition-duration: 250ms;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
 }
@@ -327,7 +320,7 @@ header .container {
   text-align: center;
   letter-spacing: 0.03em;
   text-transform: uppercase;
-  color: var(--primary-white-color);
+  color: #fff;
   background-color: rgba(47, 48, 58, 0.8);
 }
 
@@ -355,7 +348,7 @@ header .container {
 }
 
 .team__item {
-  background: var(--primary-white-color);
+  background: #fff;
   box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.12), 0px 1px 1px rgba(0, 0, 0, 0.14), 0px 2px 1px rgba(0, 0, 0, 0.2);
   border-radius: 0px 0px 4px 4px;
   text-align: center;
@@ -403,22 +396,22 @@ header .container {
   width: 100%;
   height: 100%;
   display: flex;
-  background-color: var(--primary-white-color);
+  background-color: #fff;
   border-radius: 50%;
   justify-content: center;
   align-items: center;
 }
 
 .team__soclink:hover,
 .team__soclink:focus {
-  background-color: var(--second-blue-color);
+  background-color: #2196f3;
   transition-duration: 250ms;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
 }
 
 .team__soclink:hover .team__soc-icon,
 .team__soclink:focus .team__soc-icon {
-  fill: var(--primary-white-color);
+  fill: #fff;
   transition-duration: 250ms;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
 }
@@ -478,7 +471,7 @@ header .container {
 
 .clients__link:hover .clients__icon,
 .clients__link:focus .clients__icon {
-  fill: var(--second-blue-color);
+  fill: #2196f3;
   transition-duration: 250ms;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
 }
@@ -509,9 +502,9 @@ header .container {
 
 .filters__btn:hover,
 .filters__btn:focus {
-  background: var(--second-blue-color);
+  background: #2196f3;
   box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.15);
-  color: var(--primary-white-color);
+  color: #fff;
   transition-duration: 250ms;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
 }
@@ -557,7 +550,7 @@ header .container {
 
 .grid__style {
   padding: 20px 24px 20px 24px;
-  background: var(--primary-white-color);
+  background: #fff;
   border: 1px solid #eeeeee;
   border-top-style: none;
 }
@@ -607,7 +600,7 @@ header .container {
   font-size: 14px;
   line-height: 24px;
   letter-spacing: 0.03em;
-  color: var(--primary-white-color);
+  color: #fff;
 }
 
 .page-footer__tel {
@@ -642,7 +635,7 @@ header .container {
   line-height: 16px;
   letter-spacing: 0.03em;
   text-transform: uppercase;
-  color: var(--primary-white-color);
+  color: #fff;
 }
 
 .page-footer__title {
@@ -670,15 +663,15 @@ header .container {
   height: 100%;
   display: flex;
   background-color: rgba(255, 255, 255, 0.1);
-  fill: var(--primary-white-color);
+  fill: #fff;
   border-radius: 50%;
   justify-content: center;
   align-items: center;
 }
 
 .page-footer__soclink:hover,
 .page-footer__soclink:focus {
-  background-color: var(--second-blue-color);
+  background-color: #2196f3;
   transition-duration: 250ms;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
 }
@@ -715,7 +708,7 @@ header .container {
   line-height: 1.14;
   letter-spacing: 0.03em;
   text-transform: uppercase;
-  color: #ffffff;
+  color: #fff;
 }
 
 .page-footer__mailing-btn {
@@ -727,7 +720,7 @@ header .container {
   width: 200px;
   height: 50px;
   border: none;
-  color: var(--primary-white-color);
+  color: #fff;
   background: #2196f3;
   box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.15);
   border-radius: 4px;
@@ -768,7 +761,7 @@ header .container {
   width: 528px;
   min-height: 581px;
   padding: 40px;
-  background: var(--primary-white-color);
+  background: #fff;
   box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.12), 0px 1px 1px rgba(0, 0, 0, 0.14), 0px 2px 1px rgba(0, 0, 0, 0.2);
   border-radius: 4px;
   transition: 250ms;
@@ -799,7 +792,7 @@ header .container {
 
 .modal__input:hover,
 .modal__input:focus {
-  border-color: var(--second-blue-color);
+  border-color: #2196f3;
   outline: none;
   transition: 250ms;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
@@ -816,13 +809,13 @@ header .container {
 }
 
 .modal__input-group:focus-within {
-  fill: var(--second-blue-color);
+  fill: #2196f3;
   transition: 250ms;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
 }
 
 .modal__input-group:hover {
-  fill: var(--second-blue-color);
+  fill: #2196f3;
   transition: 250ms;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
 }
@@ -941,7 +934,7 @@ header .container {
 
 .checkbox__input:hover + span::before,
 .checkbox__input:focus + span::before {
-  border-color: var(--second-blue-color);
+  border-color: #2196f3;
   transition: 250ms;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
 }

diff --git a/css/main.css.map b/css/main.css.map
diff --git a/sass/components/_about.scss b/sass/components/_about.scss
@@ -36,6 +36,6 @@
     text-align: center;
     letter-spacing: 0.03em;
     text-transform: uppercase;
-    color: var(--primary-white-color);
+    color: $primary-white-color;
     background-color: rgba(47, 48, 58, 0.8);
 }
diff --git a/sass/components/_clients.scss b/sass/components/_clients.scss
@@ -49,7 +49,7 @@
 
 .clients__link:hover .clients__icon,
 .clients__link:focus .clients__icon {
-    fill: var(--second-blue-color);
+    fill: $second-blue-color;
     transition-duration: 250ms;
     transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
 }
diff --git a/sass/components/_grid.scss b/sass/components/_grid.scss
@@ -39,7 +39,7 @@
 
 .grid__style {
     padding: 20px 24px 20px 24px;
-    background: var(--primary-white-color);
+    background: $primary-white-color;
     border: 1px solid #eeeeee;
     border-top-style: none;
 }

diff --git a/sass/components/_hero.scss b/sass/components/_hero.scss
@@ -21,12 +21,12 @@
     letter-spacing: 0.06em;
     text-transform: uppercase;
     max-width: 696px;
-    color: var(--primary-white-color);
+    color: $primary-white-color;
 }
 
 .button {
-    background: var(--second-blue-color);
-    color: var(--primary-white-color);
+    background: $second-blue-color;
+    color: $primary-white-color;
     border-radius: 4px;
     border: none;
     padding: 10px 32px 10px 32px;
@@ -42,7 +42,7 @@
 .button:focus {
     background: #188ce8;
     box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.15);
-    color: white;
+    color: $primary-white-color;
     transition-duration: 250ms;
     transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
 }