change active/hover display on advanced options

7 years ago · aee64b996c
parent 0c71c0ccc8
commit aee64b996c
1 changed files with 9 additions and 2 deletions
--- a/app/javascript/styles/components.scss
+++ b/app/javascript/styles/components.scss
@ -2897,11 +2897,18 @@ button.icon-button.active i.fa-retweet {
  padding: 10px;
  cursor: pointer;
  display: flex;
+  border-style: solid;
+  border-color: $simple-background-color;
+  border-width: 5px;
+
+  &:hover {
+    border-color: $ui-highlight-color;
+  }

-  &:hover,
  &.active {
    background: $ui-highlight-color;
    color: $primary-text-color;
+    border-color: $ui-highlight-color;

    .advanced-options-dropdown__option__content {
      color: $primary-text-color;
@ -2913,7 +2920,7 @@ button.icon-button.active i.fa-retweet {
  }

  &.active:hover {
-    background: lighten($ui-highlight-color, 4%);
+    border-color: $simple-background-color;
  }
 }