From 71835a41829353789561362485c750619a6d8005 Mon Sep 17 00:00:00 2001
From: Chris Hill-Scott <me@quis.cc>
Date: Tue, 30 Apr 2019 10:49:33 +0100
Subject: [PATCH] Style radio select controls as buttons
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

For the upcoming user permissions enhancements we want to differentiate
between actions that take the user to a new page (eg changing a user’s
phone number or email address) and actions that reveal extra controls in
the current page (which will be changing the folders a team member can
see).

This change will be inconsistent with the interaction for scheduling a
job, which uses links to reveal other controls in the page.

This commit changes the scheduling interaction to use grey ‘secondary’
buttons for revealing extra controls in the page, for consistency with
the upcoming folder permissions work.
---
 app/assets/stylesheets/components/radios.scss | 29 ++++++++-----------
 1 file changed, 12 insertions(+), 17 deletions(-)

diff --git a/app/assets/stylesheets/components/radios.scss b/app/assets/stylesheets/components/radios.scss
index bd0de4268..d719ab85e 100644
--- a/app/assets/stylesheets/components/radios.scss
+++ b/app/assets/stylesheets/components/radios.scss
@@ -18,28 +18,23 @@
   .js-reset-button,
   .js-category-button {
 
-    background: none;
-    text-decoration: underline;
-    color: $link-colour;
-    border: none;
-    display: inline-block;
-    vertical-align: top;
-    width: auto;
-    padding: 7px 20px 7px 10px;
-    margin-right: 5px;
-    cursor: pointer;
-
-    &:hover {
-      color: $link-hover-colour;
-    }
+    @include button($grey-3);
+    margin-right: $gutter-half;
 
   }
 
   .js-reset-button-block {
+
     display: block;
-    width: 100%;
-    text-align: left;
-    padding: 20px 20px $gutter 57px;
+    clear: both;
+    margin: 0 0 $gutter 0;
+    position: relative;
+    top: $gutter-half;
+
+    &:active {
+      top: $gutter-half + 2px;
+    }
+
   }
 
   .js-enabled & {