portico: Refactor button selectors to use SCSS nesting.

matt- · Jul 18, 2019 · 7bb5162 · 7bb5162
1 parent 0f44608
commit 7bb5162
Showing 1 changed file with 25 additions and 25 deletions.
diff --git a/static/styles/portico/landing-page.scss b/static/styles/portico/landing-page.scss
@@ -158,37 +158,37 @@ button {
     border-radius: 4px;
     border: 1px solid hsl(0, 0%, 80%);
     outline: none;
-}
 
-button.green {
-    color: hsl(0, 0%, 100%);
-    background-color: hsl(170, 47%, 53%);
+    &.green {
+        color: hsl(0, 0%, 100%);
+        background-color: hsl(170, 47%, 53%);
 
-    border: 1px solid hsl(169, 45%, 43%);
-}
+        border: 1px solid hsl(169, 45%, 43%);
 
-button.green:hover {
-    -webkit-filter: brightness(1.05);
-    -moz-filter: brightness(1.05);
-    filter: brightness(1.05);
-}
+        &:hover {
+            -webkit-filter: brightness(1.05);
+            -moz-filter: brightness(1.05);
+            filter: brightness(1.05);
+        }
 
-button.green:active {
-    -webkit-filter: brightness(0.95);
-    -moz-filter: brightness(0.95);
-    filter: brightness(0.95);
-}
+        &:active {
+            -webkit-filter: brightness(0.95);
+            -moz-filter: brightness(0.95);
+            filter: brightness(0.95);
+        }
+    }
 
-button.black-disabled {
-    cursor: default;
-    color: hsl(0, 0%, 20%);
-    background-color: transparent;
-    border: 1px solid hsl(0, 0%, 53%);
-}
+    &.black-disabled {
+        cursor: default;
+        color: hsl(0, 0%, 20%);
+        background-color: transparent;
+        border: 1px solid hsl(0, 0%, 53%);
+    }
 
-button:active {
-    background-color: hsl(0, 0%, 98%);
-    border: 1px solid hsl(0, 0%, 73%);
+    &:active {
+        background-color: hsl(0, 0%, 98%);
+        border: 1px solid hsl(0, 0%, 73%);
+    }
 }
 
 /* -- navbar styling -- */