button.css.scss in flashgrid-3.0.0

- old
+ new

@@ -14,15 +14,16 @@
 /* #Button
 ================================================== */
 .btn {
   -webkit-appearance: none;
      -moz-appearance: none;
-  background: rgba(246,247,249,1);
-  border: 1px solid rgba(217,222,225,1);
+  background: rgba(245,248,250,1);
+  border: 1px solid rgba(225,232,237,1);
   border-radius: 2px;
   -moz-box-sizing: border-box;
        box-sizing: border-box;
+  box-shadow: inset 0 1px 0 rgba(255,255,255,1);
   color: rgba(71,74,84,1);
   cursor: pointer;
   display: inline-block;
   font-size: 13px;
   -webkit-font-smoothing: antialiased;
@@ -43,11 +44,11 @@
 .btn:hover,
 .btn:focus,
 .btn[disabled],
 .btn[disabled]:hover,
 .open > .dropdown-toggle.btn {
-  background: rgba(236,237,239,1);
+  background: rgba(235,238,240,1);
   text-decoration: none;
 }
 .btn[disabled],
 .btn[disabled]:hover {
   color: rgba(71,74,84,1);
@@ -98,53 +99,57 @@
 .btn-green,
 .btn-green[disabled],
 .btn-red,
 .btn-red[disabled] { color: rgba(255,255,255,1); }
 .btn-black {
-  background: rgba(71,74,84,1);
-  border-color: rgba(1,4,14,1);
+  background: rgba(56,67,81,1);
+  border-color: rgba(6,17,31,1);
+  box-shadow: inset 0 1px 0 rgba(86,97,111,1);
 }
 .btn-black:active,
 .btn-black.active,
 .btn-black:hover,
 .btn-black:focus,
 .btn-black[disabled],
 .btn-black[disabled]:hover,
-.open > .dropdown-toggle.btn-black { background: rgba(61,64,74,1); }
+.open > .dropdown-toggle.btn-black { background: rgba(61,72,86,1); }
 .btn-blue {
-  background: rgba(58,144,216,1);
-  border-color: rgba(8,94,166,1);
+  background: rgba(15,135,226,1);
+  border-color: rgba(0,120,211,1);
+  box-shadow: inset 0 1px 0 rgba(45,165,255,1);
 }
 .btn-blue:active,
 .btn-blue.active,
 .btn-blue:hover,
 .btn-blue:focus,
 .btn-blue[disabled],
 .btn-blue[disabled]:hover,
-.open > .dropdown-toggle.btn-blue { background: rgba(48,134,206,1); }
+.open > .dropdown-toggle.btn-blue { background: rgba(20,140,231,1); }
 .btn-green {
-  background: rgba(122,179,23,1);
-  border-color: rgba(72,129,3,1);
+  background: rgba(89,168,15,1);
+  border-color: rgba(74,153,0,1);
+  box-shadow: inset 0 1px 0 rgba(119,198,45,1);
 }
 .btn-green:active,
 .btn-green.active,
 .btn-green:hover,
 .btn-green:focus,
 .btn-green[disabled],
 .btn-green[disabled]:hover,
-.open > .dropdown-toggle.btn-green { background: rgba(112,169,13,1); }
+.open > .dropdown-toggle.btn-green { background: rgba(94,173,20,1); }
 .btn-red {
-  background: rgba(220,74,56,1);
-  border-color: rgba(180,34,16,1);
+  background: rgba(218,79,46,1);
+  border-color: rgba(188,49,16,1);
+  box-shadow: inset 0 1px 0 rgba(248,109,106,1);
 }
 .btn-red:active,
 .btn-red.active,
 .btn-red:hover,
 .btn-red:focus,
 .btn-red[disabled],
 .btn-red[disabled]:hover,
-.open > .dropdown-toggle.btn-red { background: rgba(210,64,46,1); }
+.open > .dropdown-toggle.btn-red { background: rgba(223,84,51,1); }
 .btn-white { background: rgba(255,255,255,1); }
 .btn-white:active,
 .btn-white.active,
 .btn-white:hover,
 .btn-white:focus,
@@ -155,10 +160,11 @@
 /* #Button Links
 ================================================== */
 .btn-link {
   background: transparent;
   border-color: transparent;
+  box-shadow: none;
   color: rgba(174,182,192,1);
   padding: 0;
 }
 .btn-link:active,
 .btn-link.active,
@@ -193,61 +199,77 @@
 
 /* #Button Outlines
 ================================================== */
 .btn-outline {
   background: transparent;
+  box-shadow: none;
   color: rgba(174,182,192,1);
 }
 .btn-outline:active,
 .btn-outline.active,
 .btn-outline:hover,
 .btn-outline:focus {
   background: transparent;
   color: rgba(71,74,84,1);
 }
 .btn-outline[disabled],
-.btn-outline[disabled]:hover { color: rgba(174,182,192,1); }
+.btn-outline[disabled]:hover {
+  border-color: rgba(174,182,192,1);
+  color: rgba(174,182,192,1);
+}
 .btn-outline.btn-black {
-  border-color: rgba(71,74,84,1);
-  color: rgba(71,74,84,1);
+  border-color: rgba(56,67,81,1);
+  color: rgba(56,67,81,1);
 }
 .btn-outline.btn-black:active,
 .btn-outline.btn-black.active,
 .btn-outline.btn-black:hover,
-.btn-outline.btn-black:focus { color: rgba(61,64,74,1); }
+.btn-outline.btn-black:focus {
+  border-color: rgba(86,97,101,1);
+  color: rgba(86,97,101,1);
+}
 .btn-outline.btn-blue {
-  border-color: rgba(58,144,216,1);
-  color: rgba(58,144,216,1);
+  border-color: rgba(15,135,226,1);
+  color: rgba(15,135,226,1);
 }
 .btn-outline.btn-blue:active,
 .btn-outline.btn-blue.active,
 .btn-outline.btn-blue:hover,
-.btn-outline.btn-blue:focus { color: rgba(48,134,206,1); }
+.btn-outline.btn-blue:focus {
+  border-color: rgba(45,165,255,1);
+  color: rgba(45,165,255,1);
+}
 .btn-outline.btn-green {
-  border-color: rgba(122,179,23,1);
-  color: rgba(122,179,23,1);
+  border-color: rgba(89,168,15,1);
+  color: rgba(89,168,15,1);
 }
 .btn-outline.btn-green:active,
 .btn-outline.btn-green.active,
 .btn-outline.btn-green:hover,
-.btn-outline.btn-green:focus { color: rgba(102,159,3,1); }
+.btn-outline.btn-green:focus {
+  border-color: rgba(129,198,45,1);
+  color: rgba(129,198,45,1);
+}
 .btn-outline.btn-red {
-  border-color: rgba(220,74,56,1);
-  color: rgba(220,74,56,1);
+  border-color: rgba(218,79,46,1);
+  color: rgba(218,79,46,1);
 }
 .btn-outline.btn-red:active,
 .btn-outline.btn-red.active,
 .btn-outline.btn-red:hover,
-.btn-outline.btn-red:focus { color: rgba(210,64,46,1); }
+.btn-outline.btn-red:focus {
+  border-color: rgba(248,109,76,1);
+  color: rgba(248,109,76,1);
+}
 .btn-outline.btn-white {
   border-color: rgba(255,255,255,1);
   color: rgba(255,255,255,1);
 }
 .btn-outline.btn-white:active,
 .btn-outline.btn-white.active,
 .btn-outline.btn-white:hover,
-.btn-outline.btn-white:focus { color: rgba(71,74,84,1); }
+.btn-outline.btn-white:focus { color: rgba(174,182,192,1); }
 
 /* #Button Styles
 ================================================== */
 .btn-circle     { border-radius: 500px; }
 .btn-uppercase  { text-transform: uppercase; }
@@ -295,28 +317,25 @@
 .btn-group .dropdown-toggle:active,
 .btn-group.open .dropdown-toggle    { outline: 0; }
 .btn-group-vertical > .btn,
 .btn-group-vertical > .btn-group,
 .btn-group-vertical > .btn-group > .btn {
+  border-radius: 0;
   display: block;
   margin-left: 0;
    margin-top: -1px;
   max-width: 100%;
   width: 100%;
 }
 .btn-group-vertical > .btn:first-child {
-  border-bottom-right-radius: 0;
-   border-bottom-left-radius: 0;
-     border-top-right-radius: 2px;
-      border-top-left-radius: 2px;
+  border-top-right-radius: 2px;
+   border-top-left-radius: 2px;
   margin-left: 0;
 }
 .btn-group-vertical > .btn:last-child,
 .btn-group-vertical > .dropdown-toggle {
   border-bottom-right-radius: 2px;
    border-bottom-left-radius: 2px;
-     border-top-right-radius: 0;
-      border-top-left-radius: 0;
 }
 .btn-group-justified {
   border-collapse: separate;
   display: table;
   table-layout: fixed;
\ No newline at end of file