@northdata/fomantic-ui 2.8.722 → 2.9.400

package/lib/semantic-ui/dist/components/button.css

@@ -1,10 +1,10 @@
 /*!
- * # Fomantic-UI - Button
- * http://github.com/fomantic/Fomantic-UI/
+ * # Fomantic-UI 2.9.4 - Button
+ * https://github.com/fomantic/Fomantic-UI/
  *
  *
  * Released under the MIT license
- * http://opensource.org/licenses/MIT
+ * https://opensource.org/licenses/MIT
  *
  */
 
@@ -20,7 +20,7 @@
   outline: none;
   border: none;
   vertical-align: baseline;
-  background: #E0E1E2 none;
+  background: #e0e1e2 none;
   color: rgba(0, 0, 0, 0.6);
   font-family: "Roboto", "Helvetica Neue", Arial, Helvetica, sans-serif;
   margin: 0 0.25em 0 0;
@@ -33,16 +33,11 @@
   text-align: center;
   text-decoration: none;
   border-radius: 0;
-  -webkit-box-shadow: 0 0 0 1px transparent inset, 0 0 0 0 rgba(34, 36, 38, 0.15) inset;
-          box-shadow: 0 0 0 1px transparent inset, 0 0 0 0 rgba(34, 36, 38, 0.15) inset;
+  box-shadow: 0 0 0 1px transparent inset, 0 0 0 0 rgba(34, 36, 38, 0.15) inset;
   -webkit-user-select: none;
-     -moz-user-select: none;
       -ms-user-select: none;
           user-select: none;
-  -webkit-transition: opacity 0.1s ease, background-color 0.1s ease, color 0.1s ease, background 0.1s ease, -webkit-box-shadow 0.1s ease;
-  transition: opacity 0.1s ease, background-color 0.1s ease, color 0.1s ease, background 0.1s ease, -webkit-box-shadow 0.1s ease;
   transition: opacity 0.1s ease, background-color 0.1s ease, color 0.1s ease, box-shadow 0.1s ease, background 0.1s ease;
-  transition: opacity 0.1s ease, background-color 0.1s ease, color 0.1s ease, box-shadow 0.1s ease, background 0.1s ease, -webkit-box-shadow 0.1s ease;
   will-change: auto;
   -webkit-tap-highlight-color: transparent;
 }
@@ -53,89 +48,79 @@
 *******************************/
 
 
-/*--------------
+/* --------------
       Hover
----------------*/
-
+--------------- */
 .ui.button:hover {
-  background-color: #CACBCD;
+  background-color: #cacbcd;
   background-image: none;
-  -webkit-box-shadow: 0 0 0 1px transparent inset, 0 0 0 0 rgba(34, 36, 38, 0.15) inset;
-          box-shadow: 0 0 0 1px transparent inset, 0 0 0 0 rgba(34, 36, 38, 0.15) inset;
+  box-shadow: 0 0 0 1px transparent inset, 0 0 0 0 rgba(34, 36, 38, 0.15) inset;
   color: rgba(0, 0, 0, 0.8);
 }
 .ui.button:hover .icon {
   opacity: 0.85;
 }
 
-/*--------------
+/* --------------
       Focus
----------------*/
-
+--------------- */
 .ui.button:focus {
-  background-color: #CACBCD;
+  background-color: #cacbcd;
   color: rgba(0, 0, 0, 0.8);
   background-image: none;
-  -webkit-box-shadow: '';
-          box-shadow: '';
+  box-shadow: "";
 }
 .ui.button:focus .icon {
   opacity: 0.85;
 }
 
-/*--------------
+/* --------------
       Down
----------------*/
-
+--------------- */
 .ui.button:active,
 .ui.active.button:active {
-  background-color: #BABBBC;
-  background-image: '';
+  background-color: #babbbc;
+  background-image: "";
   color: rgba(0, 0, 0, 0.9);
-  -webkit-box-shadow: 0 0 0 1px transparent inset, none;
-          box-shadow: 0 0 0 1px transparent inset, none;
+  box-shadow: none;
 }
 
-/*--------------
+/* --------------
      Active
----------------*/
-
+--------------- */
 .ui.active.button {
-  background-color: #C0C1C2;
+  background-color: #c0c1c2;
   background-image: none;
-  -webkit-box-shadow: 0 0 0 1px transparent inset;
-          box-shadow: 0 0 0 1px transparent inset;
+  box-shadow: 0 0 0 1px transparent inset;
   color: rgba(0, 0, 0, 0.95);
 }
 .ui.active.button:hover {
-  background-color: #C0C1C2;
+  background-color: #c0c1c2;
   background-image: none;
   color: rgba(0, 0, 0, 0.95);
 }
 .ui.active.button:active {
-  background-color: #C0C1C2;
+  background-color: #c0c1c2;
   background-image: none;
 }
 
-/*--------------
-    Loading
----------------*/
-
+/* --------------
+        Loading
+    --------------- */
 
 /* Specificity hack */
-.ui.loading.loading.loading.loading.loading.loading.button {
+.ui.ui.ui.ui.ui.ui.loading.button {
   position: relative;
   cursor: default;
   text-shadow: none !important;
   color: transparent;
   opacity: 1;
   pointer-events: auto;
-  -webkit-transition: all 0s linear, opacity 0.1s ease;
   transition: all 0s linear, opacity 0.1s ease;
 }
-.ui.loading.button:before {
+.ui.loading.button::before {
   position: absolute;
-  content: '';
+  content: "";
   top: 50%;
   left: 50%;
   margin: -0.64285714em 0 0 -0.64285714em;
@@ -144,33 +129,34 @@
   border-radius: 500rem;
   border: 0.2em solid rgba(0, 0, 0, 0.15);
 }
-.ui.loading.button:after {
+.ui.loading.button::after {
   position: absolute;
-  content: '';
+  content: "";
   top: 50%;
   left: 50%;
   margin: -0.64285714em 0 0 -0.64285714em;
   width: 1.28571429em;
   height: 1.28571429em;
   border-radius: 500rem;
-  -webkit-animation: loader 0.6s infinite linear;
-          animation: loader 0.6s infinite linear;
+  animation: loader 0.6s infinite linear;
   border: 0.2em solid currentColor;
-  color: #FFFFFF;
-  -webkit-box-shadow: 0 0 0 1px transparent;
-          box-shadow: 0 0 0 1px transparent;
+  color: #fff;
+  box-shadow: 0 0 0 1px transparent;
+}
+.ui.ui.ui.loading.button .label {
+  background-color: transparent;
+  border-color: transparent;
+  color: transparent;
 }
 .ui.labeled.icon.loading.button .icon {
   background-color: transparent;
-  -webkit-box-shadow: none;
-          box-shadow: none;
+  box-shadow: none;
 }
 
-/*-------------------
-        Disabled
-  --------------------*/
-
-.ui.buttons .disabled.button:not(.basic),
+/* -------------------
+          Disabled
+    -------------------- */
+.ui.buttons .disabled.button,
 .ui.disabled.button,
 .ui.button:disabled,
 .ui.disabled.button:hover,
@@ -178,8 +164,7 @@
   cursor: default;
   opacity: 0.45 !important;
   background-image: none;
-  -webkit-box-shadow: none;
-          box-shadow: none;
+  box-shadow: none;
   pointer-events: none !important;
 }
 
@@ -189,42 +174,31 @@
 *******************************/
 
 
-/*-------------------
-      Labeled Button
-  --------------------*/
-
+/* -------------------
+        Labeled Button
+    -------------------- */
 .ui.labeled.button:not(.icon) {
-  display: -webkit-inline-box;
-  display: -ms-inline-flexbox;
   display: inline-flex;
-  -webkit-box-orient: horizontal;
-  -webkit-box-direction: normal;
-      -ms-flex-direction: row;
-          flex-direction: row;
+  flex-direction: row;
   background: none;
   padding: 0 !important;
   border: none;
-  -webkit-box-shadow: none;
-          box-shadow: none;
+  box-shadow: none;
 }
 .ui.labeled.button > .button {
   margin: 0;
 }
 .ui.labeled.button > .label {
-  display: -webkit-box;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
+  align-items: center;
   margin: 0 0 0 -1px !important;
   font-size: 1em;
-  padding: '';
+  padding: "";
   border-color: rgba(34, 36, 38, 0.15);
 }
 
 /* Tag */
-.ui.labeled.button > .tag.label:before {
+.ui.labeled.button > .tag.label::before {
   width: 1.85em;
   height: 1.85em;
 }
@@ -249,16 +223,14 @@
   border-bottom-right-radius: 0;
 }
 
-/*--------------
+/* --------------
      Icon
----------------*/
-
+--------------- */
 .ui.button > .icon:not(.button) {
   height: auto;
   opacity: 0.8;
-  -webkit-transition: opacity 0.1s ease;
   transition: opacity 0.1s ease;
-  color: '';
+  color: "";
 }
 .ui.button:not(.icon) > .icon:not(.button):not(.dropdown),
 .ui.button:not(.icon) > .icons:not(.button):not(.dropdown) {
@@ -278,10 +250,32 @@
 *******************************/
 
 
-/*-------------------
-         Floated
-  --------------------*/
-
+/* --------------
+       Stackable
+    --------------- */
+
+/* Tablet Or Below */
+@media only screen and (max-width: 767.98px) {
+  .ui.stackable.buttons {
+    flex-direction: column;
+    width: 100%;
+  }
+  .ui.stackable.buttons .button:first-child {
+    border-bottom-left-radius: 0;
+    border-top-right-radius: 0;
+  }
+  .ui.stackable.buttons .button:last-child {
+    border-bottom-left-radius: 0;
+    border-top-right-radius: 0;
+  }
+  .ui.stackable.buttons .button:only-child {
+    border-radius: 0;
+  }
+}
+
+/* -------------------
+           Floated
+    -------------------- */
 .ui[class*="left floated"].buttons,
 .ui[class*="left floated"].button {
   float: left;
@@ -295,10 +289,9 @@
   margin-left: 0.25em;
 }
 
-/*-------------------
+/* -------------------
         Sizes
---------------------*/
-
+-------------------- */
 .ui.buttons .button,
 .ui.buttons .or,
 .ui.button {
@@ -354,12 +347,11 @@
   font-size: 1.71428571rem;
 }
 
-/*--------------
-    Icon Only
----------------*/
-
+/* --------------
+        Icon Only
+    --------------- */
 .ui.icon.buttons .button,
-.ui.icon.button:not(.animated):not(.compact) {
+.ui.icon.button:not(.labeled) {
   padding: 0.78571429em 0.78571429em 0.78571429em;
 }
 .ui.animated.icon.button > .content > .icon,
@@ -369,14 +361,10 @@
   margin: 0 !important;
   vertical-align: top;
 }
-.ui.animated.button > .content > .icon {
-  vertical-align: top;
-}
-
-/*--------------
-    Labeled Icon
-  ---------------*/
 
+/* --------------
+      Labeled Icon
+    --------------- */
 .ui.labeled.icon.buttons .button,
 .ui.labeled.icon.button {
   position: relative;
@@ -396,15 +384,13 @@
   border-top-left-radius: inherit;
   border-bottom-left-radius: inherit;
   text-align: center;
-  -webkit-animation: none;
-          animation: none;
-  padding: 0.78571429em 0 0.78571429em 0;
+  animation: none;
+  padding: 0.78571429em 0;
   margin: 0;
   width: 2.57142857em;
   background-color: rgba(0, 0, 0, 0.05);
-  color: '';
-  -webkit-box-shadow: -1px 0 0 0 transparent inset;
-          box-shadow: -1px 0 0 0 transparent inset;
+  color: "";
+  box-shadow: -1px 0 0 0 transparent inset;
 }
 
 /* Right Labeled */
@@ -418,13 +404,12 @@
   border-radius: 0;
   border-top-right-radius: inherit;
   border-bottom-right-radius: inherit;
-  -webkit-box-shadow: 1px 0 0 0 transparent inset;
-          box-shadow: 1px 0 0 0 transparent inset;
+  box-shadow: 1px 0 0 0 transparent inset;
 }
-.ui.labeled.icon.buttons > .button > .icon:before,
-.ui.labeled.icon.button > .icon:before,
-.ui.labeled.icon.buttons > .button > .icon:after,
-.ui.labeled.icon.button > .icon:after {
+.ui.labeled.icon.buttons > .button > .icon::before,
+.ui.labeled.icon.button > .icon::before,
+.ui.labeled.icon.buttons > .button > .icon::after,
+.ui.labeled.icon.button > .icon::after {
   display: block;
   position: relative;
   width: 100%;
@@ -452,54 +437,158 @@
 }
 
 /* Loading Icon in Labeled Button */
-.ui.labeled.icon.button > .loading.icon:before {
-  -webkit-animation: loader 2s linear infinite;
-          animation: loader 2s linear infinite;
+.ui.labeled.icon.button > .loading.icon::before {
+  animation: loader 2s linear infinite;
 }
 
-/*--------------
-      Circular
-  ---------------*/
-
-.ui.circular.button {
+/* --------------
+        Circular
+    --------------- */
+.ui.ui.circular.buttons .button,
+.ui.ui.ui.ui.circular.button {
   border-radius: 10em;
+  min-width: 0;
 }
+.ui.circular.buttons .button > .icon,
 .ui.circular.button > .icon {
   width: 1em;
   vertical-align: baseline;
 }
+.ui.circular.buttons:not(.vertical):not(.spaced) .button {
+  margin-right: 0.25em;
+}
+.ui.vertical.circular.buttons .button {
+  margin-bottom: 0.25em;
+}
+.ui.two.buttons {
+  width: 100%;
+}
+.ui.two.buttons > .button {
+  width: 50%;
+}
+.ui.three.buttons {
+  width: 100%;
+}
+.ui.three.buttons > .button {
+  width: 33.333%;
+}
+.ui.four.buttons {
+  width: 100%;
+}
+.ui.four.buttons > .button {
+  width: 25%;
+}
+.ui.five.buttons {
+  width: 100%;
+}
+.ui.five.buttons > .button {
+  width: 20%;
+}
+.ui.six.buttons {
+  width: 100%;
+}
+.ui.six.buttons > .button {
+  width: 16.666%;
+}
+.ui.seven.buttons {
+  width: 100%;
+}
+.ui.seven.buttons > .button {
+  width: 14.285%;
+}
+.ui.eight.buttons {
+  width: 100%;
+}
+.ui.eight.buttons > .button {
+  width: 12.5%;
+}
+.ui.nine.buttons {
+  width: 100%;
+}
+.ui.nine.buttons > .button {
+  width: 11.11%;
+}
+.ui.ten.buttons {
+  width: 100%;
+}
+.ui.ten.buttons > .button {
+  width: 10%;
+}
+.ui.eleven.buttons {
+  width: 100%;
+}
+.ui.eleven.buttons > .button {
+  width: 9.09%;
+}
+.ui.twelve.buttons {
+  width: 100%;
+}
+.ui.twelve.buttons > .button {
+  width: 8.3333%;
+}
+.ui.two.vertical.buttons > .button {
+  height: 50%;
+}
+.ui.three.vertical.buttons > .button {
+  height: 33.333%;
+}
+.ui.four.vertical.buttons > .button {
+  height: 25%;
+}
+.ui.five.vertical.buttons > .button {
+  height: 20%;
+}
+.ui.six.vertical.buttons > .button {
+  height: 16.666%;
+}
+.ui.seven.vertical.buttons > .button {
+  height: 14.285%;
+}
+.ui.eight.vertical.buttons > .button {
+  height: 12.5%;
+}
+.ui.nine.vertical.buttons > .button {
+  height: 11.11%;
+}
+.ui.ten.vertical.buttons > .button {
+  height: 10%;
+}
+.ui.eleven.vertical.buttons > .button {
+  height: 9.09%;
+}
+.ui.twelve.vertical.buttons > .button {
+  height: 8.3333%;
+}
 
-/*-------------------
+/* -------------------
        Colors
---------------------*/
-
+-------------------- */
 .ui.primary.buttons .button,
 .ui.primary.button {
   background-color: #007388;
-  color: #FFFFFF;
+  color: #fff;
   text-shadow: none;
   background-image: none;
 }
 .ui.primary.button {
-  -webkit-box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset;
-          box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset;
+  box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset;
 }
 .ui.primary.buttons .button:hover,
 .ui.primary.button:hover {
   background-color: #005d6f;
-  color: #FFFFFF;
+  color: #fff;
   text-shadow: none;
 }
 .ui.primary.buttons .button:focus,
 .ui.primary.button:focus {
   background-color: #00505f;
-  color: #FFFFFF;
+  color: #fff;
   text-shadow: none;
 }
 .ui.primary.buttons .button:active,
 .ui.primary.button:active {
   background-color: #004855;
-  color: #FFFFFF;
+  color: #fff;
   text-shadow: none;
 }
 .ui.primary.buttons .active.button,
@@ -507,36 +596,35 @@
 .ui.primary.active.button,
 .ui.primary.button .active.button:active {
   background-color: #005d6f;
-  color: #FFFFFF;
+  color: #fff;
   text-shadow: none;
 }
 .ui.secondary.buttons .button,
 .ui.secondary.button {
-  background-color: #1B1C1D;
-  color: #FFFFFF;
+  background-color: #1b1c1d;
+  color: #fff;
   text-shadow: none;
   background-image: none;
 }
 .ui.secondary.button {
-  -webkit-box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset;
-          box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset;
+  box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset;
 }
 .ui.secondary.buttons .button:hover,
 .ui.secondary.button:hover {
   background-color: #27292a;
-  color: #FFFFFF;
+  color: #fff;
   text-shadow: none;
 }
 .ui.secondary.buttons .button:focus,
 .ui.secondary.button:focus {
   background-color: #2e3032;
-  color: #FFFFFF;
+  color: #fff;
   text-shadow: none;
 }
 .ui.secondary.buttons .button:active,
 .ui.secondary.button:active {
   background-color: #343637;
-  color: #FFFFFF;
+  color: #fff;
   text-shadow: none;
 }
 .ui.secondary.buttons .active.button,
@@ -544,184 +632,35 @@
 .ui.secondary.active.button,
 .ui.secondary.button .active.button:active {
   background-color: #27292a;
-  color: #FFFFFF;
-  text-shadow: none;
-}
-.ui.red.buttons .button,
-.ui.red.button {
-  background-color: #af4e4a;
-  color: #FFFFFF;
-  text-shadow: none;
-  background-image: none;
-}
-.ui.red.button {
-  -webkit-box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset;
-          box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset;
-}
-.ui.red.buttons .button:hover,
-.ui.red.button:hover {
-  background-color: #a2423e;
-  color: #FFFFFF;
-  text-shadow: none;
-}
-.ui.red.buttons .button:focus,
-.ui.red.button:focus {
-  background-color: #9b3935;
-  color: #FFFFFF;
-  text-shadow: none;
-}
-.ui.red.buttons .button:active,
-.ui.red.button:active {
-  background-color: #8b3e3b;
-  color: #FFFFFF;
-  text-shadow: none;
-}
-.ui.red.buttons .active.button,
-.ui.red.buttons .active.button:active,
-.ui.red.active.button,
-.ui.red.button .active.button:active {
-  background-color: #a4403c;
-  color: #FFFFFF;
-  text-shadow: none;
-}
-.ui.orange.buttons .button,
-.ui.orange.button {
-  background-color: #F2711C;
-  color: #FFFFFF;
-  text-shadow: none;
-  background-image: none;
-}
-.ui.orange.button {
-  -webkit-box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset;
-          box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset;
-}
-.ui.orange.buttons .button:hover,
-.ui.orange.button:hover {
-  background-color: #f26202;
-  color: #FFFFFF;
-  text-shadow: none;
-}
-.ui.orange.buttons .button:focus,
-.ui.orange.button:focus {
-  background-color: #e55b00;
-  color: #FFFFFF;
-  text-shadow: none;
-}
-.ui.orange.buttons .button:active,
-.ui.orange.button:active {
-  background-color: #cf590c;
-  color: #FFFFFF;
-  text-shadow: none;
-}
-.ui.orange.buttons .active.button,
-.ui.orange.buttons .active.button:active,
-.ui.orange.active.button,
-.ui.orange.button .active.button:active {
-  background-color: #f56100;
-  color: #FFFFFF;
-  text-shadow: none;
-}
-.ui.yellow.buttons .button,
-.ui.yellow.button {
-  background-color: #FBBD08;
-  color: #FFFFFF;
-  text-shadow: none;
-  background-image: none;
-}
-.ui.yellow.button {
-  -webkit-box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset;
-          box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset;
-}
-.ui.yellow.buttons .button:hover,
-.ui.yellow.button:hover {
-  background-color: #eaae00;
-  color: #FFFFFF;
-  text-shadow: none;
-}
-.ui.yellow.buttons .button:focus,
-.ui.yellow.button:focus {
-  background-color: #daa300;
-  color: #FFFFFF;
-  text-shadow: none;
-}
-.ui.yellow.buttons .button:active,
-.ui.yellow.button:active {
-  background-color: #cd9903;
-  color: #FFFFFF;
-  text-shadow: none;
-}
-.ui.yellow.buttons .active.button,
-.ui.yellow.buttons .active.button:active,
-.ui.yellow.active.button,
-.ui.yellow.button .active.button:active {
-  background-color: #eaae00;
-  color: #FFFFFF;
-  text-shadow: none;
-}
-.ui.olive.buttons .button,
-.ui.olive.button {
-  background-color: #9baf66;
-  color: #FFFFFF;
-  text-shadow: none;
-  background-image: none;
-}
-.ui.olive.button {
-  -webkit-box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset;
-          box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset;
-}
-.ui.olive.buttons .button:hover,
-.ui.olive.button:hover {
-  background-color: #91a952;
-  color: #FFFFFF;
-  text-shadow: none;
-}
-.ui.olive.buttons .button:focus,
-.ui.olive.button:focus {
-  background-color: #8aa34a;
-  color: #FFFFFF;
-  text-shadow: none;
-}
-.ui.olive.buttons .button:active,
-.ui.olive.button:active {
-  background-color: #81944e;
-  color: #FFFFFF;
-  text-shadow: none;
-}
-.ui.olive.buttons .active.button,
-.ui.olive.buttons .active.button:active,
-.ui.olive.active.button,
-.ui.olive.button .active.button:active {
-  background-color: #92ab50;
-  color: #FFFFFF;
+  color: #fff;
   text-shadow: none;
 }
 .ui.green.buttons .button,
 .ui.green.button {
   background-color: #66af8b;
-  color: #FFFFFF;
+  color: #fff;
   text-shadow: none;
   background-image: none;
 }
 .ui.green.button {
-  -webkit-box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset;
-          box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset;
+  box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset;
 }
 .ui.green.buttons .button:hover,
 .ui.green.button:hover {
   background-color: #52a97e;
-  color: #FFFFFF;
+  color: #fff;
   text-shadow: none;
 }
 .ui.green.buttons .button:focus,
 .ui.green.button:focus {
   background-color: #4aa377;
-  color: #FFFFFF;
+  color: #fff;
   text-shadow: none;
 }
 .ui.green.buttons .button:active,
 .ui.green.button:active {
   background-color: #4e9471;
-  color: #FFFFFF;
+  color: #fff;
   text-shadow: none;
 }
 .ui.green.buttons .active.button,
@@ -729,339 +668,73 @@
 .ui.green.active.button,
 .ui.green.button .active.button:active {
   background-color: #50ab7e;
-  color: #FFFFFF;
-  text-shadow: none;
-}
-.ui.teal.buttons .button,
-.ui.teal.button {
-  background-color: #66afac;
-  color: #FFFFFF;
-  text-shadow: none;
-  background-image: none;
-}
-.ui.teal.button {
-  -webkit-box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset;
-          box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset;
-}
-.ui.teal.buttons .button:hover,
-.ui.teal.button:hover {
-  background-color: #52a9a6;
-  color: #FFFFFF;
-  text-shadow: none;
-}
-.ui.teal.buttons .button:focus,
-.ui.teal.button:focus {
-  background-color: #4aa39f;
-  color: #FFFFFF;
-  text-shadow: none;
-}
-.ui.teal.buttons .button:active,
-.ui.teal.button:active {
-  background-color: #4e9491;
-  color: #FFFFFF;
-  text-shadow: none;
-}
-.ui.teal.buttons .active.button,
-.ui.teal.buttons .active.button:active,
-.ui.teal.active.button,
-.ui.teal.button .active.button:active {
-  background-color: #50aba7;
-  color: #FFFFFF;
-  text-shadow: none;
-}
-.ui.blue.buttons .button,
-.ui.blue.button {
-  background-color: #007388;
-  color: #FFFFFF;
-  text-shadow: none;
-  background-image: none;
-}
-.ui.blue.button {
-  -webkit-box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset;
-          box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset;
-}
-.ui.blue.buttons .button:hover,
-.ui.blue.button:hover {
-  background-color: #005d6f;
-  color: #FFFFFF;
-  text-shadow: none;
-}
-.ui.blue.buttons .button:focus,
-.ui.blue.button:focus {
-  background-color: #00505f;
-  color: #FFFFFF;
+  color: #fff;
   text-shadow: none;
 }
-.ui.blue.buttons .button:active,
-.ui.blue.button:active {
-  background-color: #004855;
-  color: #FFFFFF;
-  text-shadow: none;
-}
-.ui.blue.buttons .active.button,
-.ui.blue.buttons .active.button:active,
-.ui.blue.active.button,
-.ui.blue.button .active.button:active {
-  background-color: #005d6f;
-  color: #FFFFFF;
-  text-shadow: none;
-}
-.ui.violet.buttons .button,
-.ui.violet.button {
-  background-color: #a166af;
-  color: #FFFFFF;
-  text-shadow: none;
-  background-image: none;
-}
-.ui.violet.button {
-  -webkit-box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset;
-          box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset;
-}
-.ui.violet.buttons .button:hover,
-.ui.violet.button:hover {
-  background-color: #9852a9;
-  color: #FFFFFF;
-  text-shadow: none;
-}
-.ui.violet.buttons .button:focus,
-.ui.violet.button:focus {
-  background-color: #914aa3;
-  color: #FFFFFF;
-  text-shadow: none;
-}
-.ui.violet.buttons .button:active,
-.ui.violet.button:active {
-  background-color: #874e94;
-  color: #FFFFFF;
-  text-shadow: none;
-}
-.ui.violet.buttons .active.button,
-.ui.violet.buttons .active.button:active,
-.ui.violet.active.button,
-.ui.violet.button .active.button:active {
-  background-color: #9a50ab;
-  color: #FFFFFF;
-  text-shadow: none;
-}
-.ui.purple.buttons .button,
-.ui.purple.button {
-  background-color: #af6690;
-  color: #FFFFFF;
-  text-shadow: none;
-  background-image: none;
-}
-.ui.purple.button {
-  -webkit-box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset;
-          box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset;
-}
-.ui.purple.buttons .button:hover,
-.ui.purple.button:hover {
-  background-color: #a95284;
-  color: #FFFFFF;
-  text-shadow: none;
-}
-.ui.purple.buttons .button:focus,
-.ui.purple.button:focus {
-  background-color: #a34a7d;
-  color: #FFFFFF;
-  text-shadow: none;
-}
-.ui.purple.buttons .button:active,
-.ui.purple.button:active {
-  background-color: #944e76;
-  color: #FFFFFF;
-  text-shadow: none;
-}
-.ui.purple.buttons .active.button,
-.ui.purple.buttons .active.button:active,
-.ui.purple.active.button,
-.ui.purple.button .active.button:active {
-  background-color: #ab5085;
-  color: #FFFFFF;
-  text-shadow: none;
-}
-.ui.pink.buttons .button,
-.ui.pink.button {
-  background-color: #E03997;
-  color: #FFFFFF;
-  text-shadow: none;
-  background-image: none;
-}
-.ui.pink.button {
-  -webkit-box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset;
-          box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset;
-}
-.ui.pink.buttons .button:hover,
-.ui.pink.button:hover {
-  background-color: #e61a8d;
-  color: #FFFFFF;
-  text-shadow: none;
-}
-.ui.pink.buttons .button:focus,
-.ui.pink.button:focus {
-  background-color: #e10f85;
-  color: #FFFFFF;
-  text-shadow: none;
-}
-.ui.pink.buttons .button:active,
-.ui.pink.button:active {
-  background-color: #c71f7e;
-  color: #FFFFFF;
-  text-shadow: none;
-}
-.ui.pink.buttons .active.button,
-.ui.pink.buttons .active.button:active,
-.ui.pink.active.button,
-.ui.pink.button .active.button:active {
-  background-color: #ea158d;
-  color: #FFFFFF;
-  text-shadow: none;
-}
-.ui.brown.buttons .button,
-.ui.brown.button {
-  background-color: #af9666;
-  color: #FFFFFF;
-  text-shadow: none;
-  background-image: none;
-}
-.ui.brown.button {
-  -webkit-box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset;
-          box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset;
-}
-.ui.brown.buttons .button:hover,
-.ui.brown.button:hover {
-  background-color: #a98b52;
-  color: #FFFFFF;
-  text-shadow: none;
-}
-.ui.brown.buttons .button:focus,
-.ui.brown.button:focus {
-  background-color: #a3844a;
-  color: #FFFFFF;
-  text-shadow: none;
-}
-.ui.brown.buttons .button:active,
-.ui.brown.button:active {
-  background-color: #947c4e;
-  color: #FFFFFF;
-  text-shadow: none;
-}
-.ui.brown.buttons .active.button,
-.ui.brown.buttons .active.button:active,
-.ui.brown.active.button,
-.ui.brown.button .active.button:active {
-  background-color: #ab8c50;
-  color: #FFFFFF;
-  text-shadow: none;
-}
-.ui.grey.buttons .button,
-.ui.grey.button {
-  background-color: #9ab5c1;
-  color: #FFFFFF;
-  text-shadow: none;
-  background-image: none;
-}
-.ui.grey.button {
-  -webkit-box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset;
-          box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset;
-}
-.ui.grey.buttons .button:hover,
-.ui.grey.button:hover {
-  background-color: #aac1cb;
-  color: #FFFFFF;
-  text-shadow: none;
-}
-.ui.grey.buttons .button:focus,
-.ui.grey.button:focus {
-  background-color: #b3c8d1;
-  color: #FFFFFF;
-  text-shadow: none;
-}
-.ui.grey.buttons .button:active,
-.ui.grey.button:active {
-  background-color: #baccd4;
-  color: #FFFFFF;
-  text-shadow: none;
-}
-.ui.grey.buttons .active.button,
-.ui.grey.buttons .active.button:active,
-.ui.grey.active.button,
-.ui.grey.button .active.button:active {
-  background-color: #8aa9b7;
-  color: #FFFFFF;
-  text-shadow: none;
-}
-.ui.black.buttons .button,
-.ui.black.button {
-  background-color: #1B1C1D;
-  color: #FFFFFF;
+.ui.red.buttons .button,
+.ui.red.button {
+  background-color: #af4e4a;
+  color: #fff;
   text-shadow: none;
   background-image: none;
 }
-.ui.black.button {
-  -webkit-box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset;
-          box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset;
+.ui.red.button {
+  box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset;
 }
-.ui.black.buttons .button:hover,
-.ui.black.button:hover {
-  background-color: #27292a;
-  color: #FFFFFF;
+.ui.red.buttons .button:hover,
+.ui.red.button:hover {
+  background-color: #a2423e;
+  color: #fff;
   text-shadow: none;
 }
-.ui.black.buttons .button:focus,
-.ui.black.button:focus {
-  background-color: #2f3032;
-  color: #FFFFFF;
+.ui.red.buttons .button:focus,
+.ui.red.button:focus {
+  background-color: #9b3935;
+  color: #fff;
   text-shadow: none;
 }
-.ui.black.buttons .button:active,
-.ui.black.button:active {
-  background-color: #343637;
-  color: #FFFFFF;
+.ui.red.buttons .button:active,
+.ui.red.button:active {
+  background-color: #8b3e3b;
+  color: #fff;
   text-shadow: none;
 }
-.ui.black.buttons .active.button,
-.ui.black.buttons .active.button:active,
-.ui.black.active.button,
-.ui.black.button .active.button:active {
-  background-color: #0f0f10;
-  color: #FFFFFF;
+.ui.red.buttons .active.button,
+.ui.red.buttons .active.button:active,
+.ui.red.active.button,
+.ui.red.button .active.button:active {
+  background-color: #a4403c;
+  color: #fff;
   text-shadow: none;
 }
 
-/*---------------
-    Positive
-----------------*/
-
-
 /* Standard */
 .ui.positive.buttons .button,
 .ui.positive.button {
   background-color: #66af8b;
-  color: #FFFFFF;
+  color: #fff;
   text-shadow: none;
   background-image: none;
 }
 .ui.positive.button {
-  -webkit-box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset;
-          box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset;
+  box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset;
 }
 .ui.positive.buttons .button:hover,
 .ui.positive.button:hover {
   background-color: #52a97e;
-  color: #FFFFFF;
+  color: #fff;
   text-shadow: none;
 }
 .ui.positive.buttons .button:focus,
 .ui.positive.button:focus {
   background-color: #4aa377;
-  color: #FFFFFF;
+  color: #fff;
   text-shadow: none;
 }
 .ui.positive.buttons .button:active,
 .ui.positive.button:active {
   background-color: #4e9471;
-  color: #FFFFFF;
+  color: #fff;
   text-shadow: none;
 }
 .ui.positive.buttons .active.button,
@@ -1069,43 +742,37 @@
 .ui.positive.active.button,
 .ui.positive.button .active.button:active {
   background-color: #50ab7e;
-  color: #FFFFFF;
+  color: #fff;
   text-shadow: none;
 }
 
-/*---------------
-     Negative
-----------------*/
-
-
 /* Standard */
 .ui.negative.buttons .button,
 .ui.negative.button {
   background-color: #af4e4a;
-  color: #FFFFFF;
+  color: #fff;
   text-shadow: none;
   background-image: none;
 }
 .ui.negative.button {
-  -webkit-box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset;
-          box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset;
+  box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset;
 }
 .ui.negative.buttons .button:hover,
 .ui.negative.button:hover {
   background-color: #a2423e;
-  color: #FFFFFF;
+  color: #fff;
   text-shadow: none;
 }
 .ui.negative.buttons .button:focus,
 .ui.negative.button:focus {
   background-color: #9b3935;
-  color: #FFFFFF;
+  color: #fff;
   text-shadow: none;
 }
 .ui.negative.buttons .button:active,
 .ui.negative.button:active {
   background-color: #8b3e3b;
-  color: #FFFFFF;
+  color: #fff;
   text-shadow: none;
 }
 .ui.negative.buttons .active.button,
@@ -1113,34 +780,28 @@
 .ui.negative.active.button,
 .ui.negative.button .active.button:active {
   background-color: #a4403c;
-  color: #FFFFFF;
+  color: #fff;
   text-shadow: none;
 }
 
 
 /*******************************
-              Groups
-  *******************************/
+                Groups
+    *******************************/
 
 .ui.buttons {
-  display: -webkit-inline-box;
-  display: -ms-inline-flexbox;
   display: inline-flex;
-  -webkit-box-orient: horizontal;
-  -webkit-box-direction: normal;
-      -ms-flex-direction: row;
-          flex-direction: row;
+  flex-direction: row;
   font-size: 0;
   vertical-align: baseline;
   margin: 0 0.25em 0 0;
 }
-.ui.buttons:not(.basic):not(.inverted) {
-  -webkit-box-shadow: none;
-          box-shadow: none;
+.ui.buttons {
+  box-shadow: none;
 }
 
 /* Clearfix */
-.ui.buttons:after {
+.ui.buttons::after {
   content: ".";
   display: block;
   height: 0;
@@ -1150,15 +811,12 @@
 
 /* Standard Group */
 .ui.buttons .button {
-  -webkit-box-flex: 1;
-      -ms-flex: 1 0 auto;
-          flex: 1 0 auto;
+  flex: 1 0 auto;
   border-radius: 0;
-  margin: 0 0 0 0;
+  margin: 0;
 }
-.ui.buttons:not(.basic):not(.inverted) > .button:not(.basic):not(.inverted) {
-  -webkit-box-shadow: 0 0 0 1px transparent inset, 0 0 0 0 rgba(34, 36, 38, 0.15) inset;
-          box-shadow: 0 0 0 1px transparent inset, 0 0 0 0 rgba(34, 36, 38, 0.15) inset;
+.ui.buttons > .button {
+  box-shadow: 0 0 0 1px transparent inset, 0 0 0 0 rgba(34, 36, 38, 0.15) inset;
 }
 .ui.buttons .button:first-child {
   border-left: none;
@@ -1171,24 +829,18 @@
   border-bottom-right-radius: 0;
 }
 
-/* Vertical  Style */
+/* Vertical Style */
 .ui.vertical.buttons {
-  display: -webkit-inline-box;
-  display: -ms-inline-flexbox;
   display: inline-flex;
-  -webkit-box-orient: vertical;
-  -webkit-box-direction: normal;
-      -ms-flex-direction: column;
-          flex-direction: column;
+  flex-direction: column;
 }
 .ui.vertical.buttons .button {
   display: block;
   float: none;
   width: 100%;
-  margin: 0 0 0 0;
-  -webkit-box-shadow: none;
-          box-shadow: none;
+  margin: 0;
   border-radius: 0;
+  box-shadow: none;
 }
 .ui.vertical.buttons .button:first-child {
   border-top-left-radius: 0;
@@ -1202,6 +854,11 @@
 .ui.vertical.buttons .button:only-child {
   border-radius: 0;
 }
+.ui.spaced.buttons .ui.button {
+  margin-bottom: 1em;
+  margin-right: 1em;
+  border-radius: 0;
+}
 
 
 /*******************************