Improve edit tray button colour contrast

knolleary · knolleary · commit cc02b07ff06a · 2016-06-14T14:28:25.000+01:00
diff --git a/editor/sass/colors.scss b/editor/sass/colors.scss
@@ -55,7 +55,10 @@ $typedInput-button-background: #efefef;
 $typedInput-button-background-hover: #ddd;
 $typedInput-button-background-active: #e3e3e3;
 
-$editor-button-color-primary: #666;
-$editor-button-color-secondary: #999;
+$editor-button-color-primary: #eee;
+$editor-button-background-primary: #AD1625;
+$editor-button-background-primary-hover: #6E0A1E;
+$editor-button-color: #999;
+$editor-button-background: #fff;
 
 $shade-color: rgba(220,220,220,0.5);
diff --git a/editor/sass/editor.scss b/editor/sass/editor.scss
@@ -76,20 +76,40 @@
         font-size: 14px;
         padding: 6px 14px;
         margin-right: 8px;
-        color: $editor-button-color-primary;
+        color: $editor-button-color;
+        background: $editor-button-background;
+
+        &.primary {
+            border-color: $editor-button-background-primary;
+            color: $editor-button-color-primary;
+            background: $editor-button-background-primary;
+
+            &:hover {
+                border-color: $editor-button-background-primary-hover;
+                background: $editor-button-background-primary-hover;
+                color: $editor-button-color-primary !important;
+            }
+        }
+        &:not(.disabled):hover {
+            //color: $editor-button-color;
+        }
+        &.disabled {
+            background: none;
+        }
+        &.disabled:focus {
+            outline: none;
+        }
+
+
+
+
         &.leftButton {
             float: left;
             margin-top: 1px;
         }
         &:not(.leftButton):not(:last-child) {
             margin-right: 16px;
         }
-        &:not(.primary) {
-            background: none;
-            &:not(.disabled):hover {
-                color: $editor-button-color-primary;
-            }
-        }
     }
 }
 
@@ -108,7 +128,7 @@
         margin:0;
 
         &:not(:last-child) {
-            color: $editor-button-color-secondary;
+            color: $editor-button-color;
             font-weight: normal;
 
             &:after {
diff --git a/editor/sass/jquery.scss b/editor/sass/jquery.scss
@@ -79,21 +79,36 @@
     font-size: 14px;
     padding: 6px 14px;
     margin-right: 8px;
-    color: $editor-button-color-primary;
+    color: $editor-button-color;
+    background: $editor-button-background;
+
     &.leftButton {
         float: left;
         margin-top: 7px;
     }
     &:not(.leftButton):not(:last-child) {
         margin-right: 16px;
     }
-    &:not(.primary) {
-        background: none;
 
-        &:hover {
-            color: $editor-button-color-primary;
+    &.primary {
+        border-color: $editor-button-background-primary;
+        color: $editor-button-color-primary;
+        background: $editor-button-background-primary;
+        &:not(.disabled):hover {
+            border-color: $editor-button-background-primary-hover;
+            background: $editor-button-background-primary-hover;
+            color: $editor-button-color-primary !important;
         }
     }
+    &.disabled {
+        background: none;
+    }
+    &.disabled {
+        background: none;
+    }
+    &.disabled:focus {
+        outline: none;
+    }
     .ui-button-text {
         padding: 0;
     }
