Changeset 3763:857d4768935c for admin/style/scss/partials/_buttons.scss

Timestamp:

06/22/18 16:48:10 (7 years ago)

Author:

franck <carnet.franck.paul@…>

Branch:

default

Message:

Use sass variables for every color used (mainly foreground, background, border)

File:

• admin/style/scss/partials/_buttons.scss (modified) (15 diffs)

admin/style/scss/partials/_buttons.scss

@@ -17 +17 @@
 input[type=reset],
 input[type=submit] {
-     border: 1px solid #ccc;
+     border: 1px solid $button-border;
      font-family: $sans-serif-input;
      padding: 3px 10px;
@@ -27 +27 @@
      cursor: pointer;
      position: relative;
-     box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
+     box-shadow: 0 1px 3px $button-shadow;
      border-style: solid;
      border-width: 1px;
@@ -52 +52 @@
 button.submit,
 input.button.start {
-     color: #fff;
-     background-color: #25a6e1;
-     @include background-image(linear-gradient(to bottom, #25a6e1, #188bc0));
-     border-color: #25a6e1;
+     color: $submit-color;
+     background-color: $submit-background;
+     @include background-image(linear-gradient(to bottom, $submit-background, $submit-background-alt));
+     border-color: $submit-background;
 }
 
@@ -68 +68 @@
 a.button.submit:hover,
 a.button.submit:focus {
-     background-color: #188bc0;
-     @include background-image(linear-gradient(to bottom, #188bc0, #25a6e1));
-     border-color: #188bc0;
+     background-color: $submit-background-alt;
+     @include background-image(linear-gradient(to bottom, $submit-background-alt, $submit-background));
+     border-color: $submit-background-alt;
 }
 
@@ -87 +87 @@
 a.button.delete,
 a.button.reset {
-     color: #000;
-     background-color: #eaeaea;
-     @include background-image(linear-gradient(to bottom, #f9f9f9, #eaeaea));
+     color: $reset-color;
+     background-color: $reset-background;
+     @include background-image(linear-gradient(to bottom, $reset-background-alt, $reset-background));
      background-repeat: repeat-x;
-     border-color: #dfdfdf #dfdfdf #c5c5c5;
+  border-color: $reset-border;
 }
 
@@ -116 +116 @@
 a.button.reset:focus,
 a.button:focus {
-     background-color: #dadada;
-     @include background-image(linear-gradient(to bottom, #eaeaea, #dadada));
+     background-color: $reset-background-ter;
+     @include background-image(linear-gradient(to bottom, $reset-background, $reset-background-ter));
      background-repeat: repeat-x;
-     border-color: #cccccc #cccccc #b5b5b5;
+  border-color: $reset-border;
 }
 
@@ -130 +130 @@
 button.delete,
 a.button.delete {
-     color: #900;
+  color: $delete-color;
 }
 
@@ -143 +143 @@
 button.delete:focus,
 a.button.delete:focus {
-     color: #ffffff;
-     background-color: #b33630;
-     @include background-image(linear-gradient(to bottom, #dc5f59, #b33630));
+     color: $delete-hover-color;
+     background-color: $delete-hover-background;
+     @include background-image(linear-gradient(to bottom, $delete-hover-background-alt, $delete-hover-background));
      background-repeat: repeat-x;
-     border-color: #cd504a;
+     border-color: $delete-hover-border;
 }
 
@@ -158 +158 @@
 .button.add,
 button.add {
-     color: #000;
-     background-color: #bee74b;
-     @include background-image(linear-gradient(to bottom, #bee74b, #9bca1c));
-     border-color: #bee74b;
+     color: $add-color;
+     background-color: $add-background;
+     @include background-image(linear-gradient(to bottom, $add-background, $add-background-alt));
+     border-color: $add-border;
      padding: .33em 1.33em .5em;
 }
@@ -171 +171 @@
 button.add:active,
 button.add:focus {
-     background-color: #9bca1c;
-     @include background-image(linear-gradient(to bottom, #9bca1c, #bee74b));
-     border-color: #9bca1c;
+     background-color: $add-background-alt;
+     @include background-image(linear-gradient(to bottom, $add-background-alt, $add-background));
+     border-color: $add-border-alt;
 }
 
@@ -195 +195 @@
 button.disabled,
 button[type=submit].disabled {
-     color: #676e78;
-     background: #F5F5F5;
-     border: 1px solid #CCC;
+     color: $button-disabled-color;
+     background: $button-disabled-background;
+     border: 1px solid $button-disabled-border;
 }
 
@@ -204 +204 @@
 button.disabled:hover,
 button[type=submit].disabled:hover {
-     color: #676e78;
-     background: #eee;
-     border: 1px solid #CCC;
+     color: $button-disabled-color;
+     background: $button-disabled-background-alt;
+     border: 1px solid $button-disabled-border;
 }
 
@@ -222 +222 @@
 a.metaGetMore {
      font-size: 0.825em;
-     color: #333;
-     background: #fff;
+     color: $ajax-color;
+     background: $ajax-background;
      box-shadow: none;
-     border: 1px solid #676e78;
+     border: 1px solid $ajax-border;
      margin-bottom: .25em;
      text-align: center;
      &:hover {
-          background: #a2cbe9;
+          background: $ajax-background-alt;
           box-shadow: none;
-          border: 1px solid #676e78;
+          border: 1px solid $ajax-border;
      }
 }
@@ -248 +248 @@
      a:hover,
      a:active {
-          color: #333;
-          background: transparent;
-          border: none;
+          color: $gotop-color;
+          background: $gotop-background;
+          border: $gotop-border;
      }
 }
@@ -269 +269 @@
      &:hover,
      &:focus {
-          background: #fc0;
+    background: $addmeta-background;
      }
 }