Related to #1188 - removed all hardcoded colorsss & fixed a few styli…

…ng bugs
MozillaFoundation · Apr 5, 2018 · bc05243 · bc05243
1 parent ed9a0df
commit bc05243
Show file tree

Hide file tree

Showing 19 changed files with 56 additions and 58 deletions.
diff --git a/source/js/components/fellow-list/fellow-list.scss b/source/js/components/fellow-list/fellow-list.scss
@@ -1,7 +1,7 @@
 .fellowships-directory-filter {
   display: flex;
   flex-wrap: wrap;
-  background: $off-white;
+  background: $subtle-gray;
 
   @media (min-width: $bp-md) {
     flex-wrap: nowrap;

diff --git a/source/js/components/highlights/highlights.scss b/source/js/components/highlights/highlights.scss
@@ -2,6 +2,6 @@
   .placeholder {
     height: 0;
     padding-top: 57%;
-    background: linear-gradient(to right, #3dfefd, #b7d43f);
+    background: $neon-blue-green-gradient;
   }
 }
diff --git a/source/js/components/join/join.scss b/source/js/components/join/join.scss
@@ -1,5 +1,5 @@
 .wrapper-join-us {
-  background: #f1eee9;
+  background: $subtle-gray;
 }
 
 .join-us {
@@ -36,7 +36,7 @@
   }
 
   &.half-width {
-    background: $off-white;
+    background: $subtle-gray;
 
     .join-graphic {
       @include make-col(12);
@@ -50,7 +50,7 @@
   }
 
   &.full-width {
-    background: $off-white;
+    background: $subtle-gray;
 
     .join-graphic {
       @include make-col(12);

diff --git a/source/js/components/loading-indicator/loading-indicator.scss b/source/js/components/loading-indicator/loading-indicator.scss
@@ -2,7 +2,7 @@
   $circle-radius: 30px;
   $dot-radius: 5px;
   $dot-count: 3;
-  $icon-color: rgba(183, 212, 63, 1);
+  $icon-color: $green;
 
   @keyframes rotate-circle {
     0% {

diff --git a/source/js/components/member-notice/member-notice.scss b/source/js/components/member-notice/member-notice.scss
@@ -1,5 +1,5 @@
 #member-notice {
-  background: rgba(255, 255, 224, 1);
+  background: $subtle-gray;
 
   & > div {
     padding: 0.75em 1.5rem;
@@ -26,15 +26,15 @@
     background: none;
     font-size: 35px;
     font-weight: 900;
-    color: #999;
+    color: $medium-gray;
     padding: 0;
     line-height: 1;
 
     &:active,
     &:focus,
     &:hover {
       box-shadow: none;
-      color: #000;
+      color: $black;
     }
 
     &.btn-expanded {

diff --git a/source/js/components/multipage-nav/multipage-nav.scss b/source/js/components/multipage-nav/multipage-nav.scss
@@ -43,7 +43,7 @@
   }
 
   .col-12 {
-    background: #f2f2f2;
+    background: $subtle-gray;
   }
 }
 

diff --git a/source/js/components/nav/nav.scss b/source/js/components/nav/nav.scss
@@ -1,13 +1,13 @@
 #primary-nav header {
-  background: rgba(0, 0, 0, 0.9);
+  background: transparentize($black, 0.1);
   position: fixed;
   height: 100%;
   width: 100%;
   z-index: 99999;
   overflow: auto;
 
   a {
-    color: rgba(255, 255, 255, 0.75);
+    color: transparentize($white, 0.25);
   }
 
   .btn-close {
@@ -50,10 +50,8 @@
 
       &:hover,
       &:focus {
-        color: rgba(255, 237, 0, 100);
+        color: $white;
         outline: 0;
-        text-decoration: none;
-        border-bottom: 5px solid $black;
       }
     }
   }
@@ -68,7 +66,7 @@
     #view-about .about {
       color: $white;
       font-weight: 900;
-      border-bottom: 2px solid $white;
+      text-decoration: underline;
     }
   }
 

diff --git a/source/js/components/people/people.scss b/source/js/components/people/people.scss
@@ -10,11 +10,11 @@
 
   .person-card-featured {
     .more-details {
-      background-color: $mobile-blue;
+      background-color: $blue;
       color: white;
 
       &:hover {
-        background-color: #0081ad;
+        background-color: $dark-blue;
       }
     }
   }
@@ -75,7 +75,7 @@
     &::before {
       content: '\201C';
       font-size: 15em;
-      color: $off-white;
+      color: $subtle-gray;
       z-index: -1;
       position: absolute;
       font-weight: bold;

diff --git a/source/js/components/petition/petition.scss b/source/js/components/petition/petition.scss
@@ -1,5 +1,5 @@
 .wrapper-sign-petition {
-  background: #f1eee9;
+  background: $subtle-gray;
 }
 
 .sign-petition {
@@ -36,7 +36,7 @@
   }
 
   &.half-width {
-    background: $off-white;
+    background: $subtle-gray;
 
     .petition-graphic {
       @include make-col(12);
@@ -50,7 +50,7 @@
   }
 
   &.full-width {
-    background: $off-white;
+    background: $subtle-gray;
 
     .petition-graphic {
       @include make-col(12);

diff --git a/source/js/components/takeover/takeover.scss b/source/js/components/takeover/takeover.scss
@@ -11,7 +11,7 @@
   }
 
   .bar {
-    background: #b6d806;
+    background: $bright-green;
   }
 
   .button-group {
@@ -20,7 +20,7 @@
     left: 0;
     background: $white;
     width: 100vw;
-    border-top: 1px solid #ccc;
+    border-top: 1px solid $light-gray;
 
     .container {
       align-items: stretch;

diff --git a/source/sass/buttons.scss b/source/sass/buttons.scss
@@ -9,7 +9,7 @@
 }
 
 .btn-pop {
-  background: #ffed00;
+  background: $yellow;
   color: black;
   box-shadow: 4px 4px black;
   transition: all 0.25s ease;
@@ -20,7 +20,7 @@
     box-shadow: 8px 8px black;
     transform: translate(-4px, -4px);
     color: black;
-    background: #e7c121;
+    background: $dark-yellow;
 
     &::after {
       content: '';
@@ -36,21 +36,21 @@
 .btn-ghost {
   color: $black;
   background: transparent;
-  border: 2px solid #3bb7ef;
+  border: 2px solid $blue;
 
   &:hover {
     color: $white;
-    background-color: #3bb7ef;
+    background-color: $blue;
   }
 }
 
 .btn-normal {
   color: $black;
-  background: #ffed00;
+  background: $yellow;
 
   &:hover {
     color: $black;
-    background: #e7c121;
+    background: $dark-yellow;
   }
 }
 

diff --git a/source/sass/components/hr-gradient.scss b/source/sass/components/hr-gradient.scss
@@ -1,6 +1,6 @@
 .hr-gradient {
   height: 4px;
-  background: linear-gradient(to right, #3dfefd, #b7d43f);
+  background: $neon-blue-green-gradient;
   border: 0;
   margin: 30px 0;
 }
diff --git a/source/sass/components/jump-bar.scss b/source/sass/components/jump-bar.scss
@@ -3,14 +3,14 @@
     display: inline-block;
     margin-right: 15px;
     font-size: 16px;
-    color: #909090;
+    color: $medium-gray;
     letter-spacing: 0.5px;
     line-height: 16px;
     text-transform: uppercase;
     padding: 5px;
 
     &.no-link {
-      background: #ffed00;
+      background: $yellow;
       color: $black;
       font-weight: 700;
     }

diff --git a/source/sass/global.scss b/source/sass/global.scss
@@ -9,14 +9,14 @@ body {
   .wrapper-2 {
     background:
       url(../_images/bg-white-lines.png) center top / auto 335px repeat,
-      linear-gradient(to left, rgba(61, 254, 253, 1) 0%, rgba(183, 212, 63, 1) 100%);
+      linear-gradient(to right, $neon-blue, $green);
     background-blend-mode: normal, normal;
   }
 
   // Homepage
   // &#view-home .wrapper-2 {
   //   background:
-  //     linear-gradient(to left, rgba(61, 254, 253, 1) 0%, rgba(183, 212, 63, 1) 100%),
+  //     linear-gradient(to right, $neon-blue, $green),
   //     url(../_images/hero-image-crop@2x.jpg) center top / auto 100% no-repeat,
   //     url(../_images/bg-repeat-crop@2x.jpg) center top / 2px 100% repeat-x;
   //   background-blend-mode: overlay, normal, normal;
@@ -28,7 +28,7 @@ body {
       background-blend-mode: hard-light;
       background-image:
         url(../_images/fellowships/hero-image@2x.png),
-        linear-gradient(to left, rgba(61, 254, 253, 1) 0%, rgba(183, 212, 63, 1) 100%);
+        linear-gradient(to right, $neon-blue, $green);
       background-repeat: repeat-x;
       background-size: auto 100%;
       background-position: 50% top;
@@ -48,22 +48,22 @@ button:hover {
   p a {
     color: $black;
     font-weight: 400;
-    text-decoration: underline solid #3bb7ef;
+    text-decoration: underline solid $blue;
 
     &:hover,
     &:focus {
-      text-decoration: underline solid #4383bf;
-      color: #4383bf;
+      text-decoration: underline solid $dark-blue;
+      color: $dark-blue;
     }
   }
 }
 
 .wrapper-burger {
-  background: rgba(0, 0, 0, 0);
+  background: none;
   transition: background 200ms ease-in-out;
 
   &.scrolled {
-    background: rgba(0, 0, 0, 0.9);
+    background: transparentize($black, 0.1);
 
     #burger,
     .logo {
@@ -79,7 +79,7 @@ button:hover {
     text-transform: uppercase;
     margin: 0;
     padding: 0;
-    color: #000;
+    color: $black;
     letter-spacing: 1px;
     line-height: 24px;
   }
@@ -145,7 +145,7 @@ button:hover {
   letter-spacing: 0.02rem;
 
   p {
-    color: rgba(255, 255, 255, 0.5);
+    color: transparentize($white, 0.5);
   }
 }
 

diff --git a/source/sass/share-progress.scss b/source/sass/share-progress.scss
@@ -11,7 +11,7 @@
 .share-progress-em {
   height: 38px;
   border: none;
-  color: #fff;
+  color: $white;
   width: 100%;
   max-width: 142px;
   display: flex;
@@ -21,7 +21,7 @@
   font-size: 0.9rem;
 
   svg {
-    color: #fff;
+    color: $white;
     height: 15px;
     margin-right: 4px;
   }