css: Add cancel-button styles

Author: nilmerg

asset/css/cancel-button.less

@@ -0,0 +1,32 @@
+.cancel-button {
+  padding: .5em 1em;
+
+  .appearance(none);
+  .rounded-corners();
+  line-height: normal;
+  cursor: pointer;
+
+  background: var(--cancel-button-bg, @cancel-button-bg);
+  border: 1px solid var(--cancel-button-border-color, @cancel-button-border-color);
+  color: var(--cancel-button-color, @cancel-button-color);
+
+  &:focus,
+  &:hover {
+    background-color: var(--cancel-button-hover-bg, @cancel-button-hover-bg);
+    color: var(--cancel-button-hover-color, @cancel-button-hover-color);
+  }
+
+  &[disabled] {
+    background: none;
+    cursor: default;
+
+    border: 1px solid var(--control-disabled-color, @control-disabled-color);
+    color: var(--control-disabled-color, @control-disabled-color);
+
+    &:focus,
+    &:hover {
+      background: none;
+      color: var(--control-disabled-color, @control-disabled-color);
+    }
+  }
+}

asset/css/variables.less

@@ -79,6 +79,12 @@
 @control-hover-bg: @base-gray-lighter;
 @control-disabled-color: @base-disabled;
 
+@cancel-button-bg: none;
+@cancel-button-border-color: @state-critical;
+@cancel-button-color: @state-critical;
+@cancel-button-hover-bg: @state-critical;
+@cancel-button-hover-color: @default-text-color-inverted;
+
 @suggestions-bg: @default-bg;
 @suggestions-color: @default-text-color-light;
 @suggestions-focus-bg: @base-primary-bg;
@@ -137,6 +143,8 @@
     --control-hover-bg: var(--base-gray-lighter);
     --control-disabled-color: var(--base-gray-light);
 
+    --cancel-button-hover-color: var(--default-text-color-inverted);
+
     --suggestions-bg: var(--default-text-color-inverted);
     --suggestions-color: var(--default-text-color-light);
     --suggestions-focus-bg: var(--primary-button-bg);