Replace additional tokens

mozilla · Aug 4, 2021 · a6e1be6 · a6e1be6
1 parent e1eb6d7
commit a6e1be6
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 21 deletions.
diff --git a/static/scss/components/banners.scss b/static/scss/components/banners.scss
@@ -1,34 +1,34 @@
 .mpp-choose-subdomain {
     background: $color-white;
-    border-radius: 7px;
-    padding: 2em 1.25em;
+    border-radius: $border-radius-md;
+    padding: $spacing-xl $spacing-lg;
     width: 100%;
     img {
         display: none;
         height: auto;
         align-self: center;
         max-width: 280px;
-        padding: 0 2rem;    
+        padding: 0 $spacing-xl;    
     }
     h2 {
         font-size: 1.25rem;
-        margin: 0 0 .5rem;
+        margin: 0 0 $spacing-sm;
         padding: 0;
         color: $color-black;
     }
     p {
-        margin: 0 0 1rem;
+        margin: 0 0 $spacing-md;
         padding: 0;
     }
     form {
-        margin-bottom: 1rem;
+        margin-bottom: $spacing-md;
     }
     input {
         width: 100%;
         display: block;
-        border-radius: 4px;
-        padding: .5rem 1rem;
-        margin-bottom: .5rem;
+        border-radius: $border-radius-sm;
+        padding: $spacing-sm $spacing-md;
+        margin-bottom: $spacing-sm;
         &[type='text'] {
             border: 1px solid #CCCCCC;
             width: 100%;
@@ -52,7 +52,7 @@
         input {
             width: auto;
             &[type='submit'] {
-                margin-left: 1rem;
+                margin-left: $spacing-md;
             }
         }
     }
@@ -68,8 +68,7 @@
             display: block;
         }
         .mpp-choose-subdomain-form {
-            padding-left: 2rem;
+            padding-left: $spacing-xl;
         }
     }
-
 }
diff --git a/static/scss/partials/header.scss b/static/scss/partials/header.scss
@@ -32,7 +32,7 @@ header {
 }
 
 .sign-in {
-    padding: .75rem 1.25rem;
+    padding: $spacing-md $spacing-lg;
     font-weight: 400;
     display: flex;
     margin: auto;
@@ -57,7 +57,7 @@ header {
     height: 100%;
     min-width: 42px;
     display: inline-block;
-    margin-right: 12px;
+    margin-right: $spacing-md;
 }
 
 .fx-private-relay-logotype {
@@ -84,7 +84,7 @@ header {
     background: var(--fxGradient);
     opacity: 0;
     margin-bottom: -6px;
-    margin-top: 4px;
+    margin-top: $spacing-xs;
 }
 
 .active-header-link::after {
@@ -158,16 +158,17 @@ header {
 .mobile-menu-label::after {
     content: "";
     width: 18px;
-    height: 18px;
+    height: 100%;
     position: absolute;
     display: flex;
+    align-items: center;
     background-image: url(/static/images/arrowhead-white.svg);
     background-repeat: no-repeat;
     background-position: center;
     top: 0;
     bottom: 0;
-    margin: auto auto 1px auto;
-    right: -26px;
+    margin: auto auto 0 auto;
+    right: -$spacing-lg;
     background-size: contain;
     opacity: .9;
     transition: all .4s ease;
@@ -320,8 +321,6 @@ header {
         }
     }
 
-
-
 }
 
 
@@ -378,7 +377,6 @@ header {
     .header-top {
         padding: $spacing-md;
     }
-
 }
 
 @media screen and (max-width: 400px) {