From ff7aedd78ade40465168cfe1cf26838cefb540a2 Mon Sep 17 00:00:00 2001
From: Vaibhav <vrongmeal@gmail.com>
Date: Tue, 28 May 2019 01:34:10 +0530
Subject: [PATCH] css: Use SCSS nesting in app_components.scss for
 `.clear_search_button`.

---
 static/styles/app_components.scss | 58 ++++++++++++++++---------------
 1 file changed, 30 insertions(+), 28 deletions(-)

diff --git a/static/styles/app_components.scss b/static/styles/app_components.scss
index c0979df2b9..7c28363770 100644
--- a/static/styles/app_components.scss
+++ b/static/styles/app_components.scss
@@ -297,37 +297,39 @@
     margin: 0px;
 }
 
-.clear_search_button:hover {
-    color: hsl(0, 0%, 0%);
-}
+.clear_search_button {
+    &:hover {
+        color: hsl(0, 0%, 0%);
+    }
 
-.clear_search_button[disabled] {
-    visibility: hidden;
-}
+    &[disabled] {
+        visibility: hidden;
+    }
 
-.clear_search_button,
-.clear_search_button:focus,
-.clear_search_button:active,
-.clear_search_button[disabled]:hover {
-    position: relative;
-    right: 20px;
-    background: none;
-    border: none;
-    text-align: center;
-    padding-top: 8px;
-    padding-left: 4px;
-    color: hsl(0, 0%, 80%);
-    text-shadow: none;
-    outline: none !important;
-    box-shadow: none;
-    -webkit-box-shadow: none;
-    -moz-box-shadow: none;
-    z-index: 5;
+    &,
+    &:focus,
+    &:active,
+    &[disabled]:hover {
+        position: relative;
+        right: 20px;
+        background: none;
+        border: none;
+        text-align: center;
+        padding-top: 8px;
+        padding-left: 4px;
+        color: hsl(0, 0%, 80%);
+        text-shadow: none;
+        outline: none !important;
+        box-shadow: none;
+        -webkit-box-shadow: none;
+        -moz-box-shadow: none;
+        z-index: 5;
 
-    .user_status_overlay & {
-        margin-left: -26px;
-        right: 0;
-        padding-top: 6px;
+        .user_status_overlay & {
+            margin-left: -26px;
+            right: 0;
+            padding-top: 6px;
+        }
     }
 }