From ae47ddc16ed5bdb60a26c717d9e452d114078551 Mon Sep 17 00:00:00 2001 From: Vaibhav Date: Mon, 20 May 2019 19:32:46 +0530 Subject: [PATCH] css: Use SCSS nesting in reactions.scss for `.reaction_button`. --- static/styles/reactions.scss | 56 +++++++++++++++++++----------------- 1 file changed, 29 insertions(+), 27 deletions(-) diff --git a/static/styles/reactions.scss b/static/styles/reactions.scss index 651b7d4bfb..3bede81882 100644 --- a/static/styles/reactions.scss +++ b/static/styles/reactions.scss @@ -62,39 +62,41 @@ background-color: hsl(0, 0%, 98%); } - .reaction_button i { - font-size: 1em; - margin-right: 3px; - } + .reaction_button { + i { + font-size: 1em; + margin-right: 3px; + } - .reaction_button:hover i { - color: hsl(200, 100%, 40%); - } + &:hover i { + color: hsl(200, 100%, 40%); + } - .reaction_button:only-child { - display: none; - } + &:only-child { + display: none; + } - .reaction_button:hover { - border: 1px solid hsl(200, 100%, 40%); - background-color: hsl(195, 50%, 95%); - cursor: pointer; - opacity: 1.0; - color: hsl(200, 100%, 40%); - } + &:hover { + border: 1px solid hsl(200, 100%, 40%); + background-color: hsl(195, 50%, 95%); + cursor: pointer; + opacity: 1.0; + color: hsl(200, 100%, 40%); + } - .reaction_button .message_reaction_count { - font-size: 1.1em; - color: hsl(0, 0%, 33%); - margin-left: 3px; - } + .message_reaction_count { + font-size: 1.1em; + color: hsl(0, 0%, 33%); + margin-left: 3px; + } - .reaction_button .message_reaction_count { - top: 0.5px; - } + .message_reaction_count { + top: 0.5px; + } - .reaction_button:hover .message_reaction_count { - color: hsl(200, 100%, 40%); + &:hover .message_reaction_count { + color: hsl(200, 100%, 40%); + } } }