semantic-ui-sass 0.0.3 → 0.8.0.0

data/app/assets/stylesheets/semantic-ui/elements/_button.scss

@@ -24,10 +24,11 @@
 
   outline: none;
   border: none;
-  background-color: #EBEBEB;
-  color: #999999;
+  background-color: #FAFAFA;
+  color: #808080;
 
-  padding: 0.8em 1.5em;
+  margin: 0em;
+  padding: 0.8em 1.5em 0.875em;
 
   font-size: 1rem;
   text-transform: uppercase;
@@ -37,18 +38,15 @@
   text-align: center;
   text-decoration: none;
 
-  -webkit-border-radius: 0.2em;
-  -moz-border-radius: 0.2em;
-  border-radius: 0.2em;
+  background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.05));
+
+  -webkit-border-radius: 0.25em;
+  -moz-border-radius: 0.25em;
+  border-radius: 0.25em;
 
-  -webkit-box-shadow:
-    0em -0.185rem 0em rgba(0, 0, 0, 0.1) inset
-  ;
-  -moz-box-shadow:
-    0em -0.185rem 0em rgba(0, 0, 0, 0.1) inset
-  ;
   box-shadow:
-    0em -0.185rem 0em rgba(0, 0, 0, 0.1) inset
+    0px 0px 0px 1px rgba(0, 0, 0, 0.08) inset,
+    0px -0.133em 0px 0px rgba(0, 0, 0, 0.1) inset
   ;
 
   -webkit-user-select: none;
@@ -100,24 +98,205 @@
   ;
 }
 
+
+
+
+/*******************************
+            States
+*******************************/
+
+
 /*--------------
-     Count
+     Active
 ---------------*/
 
-.ui.count.button {
-  -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) !important;
-  -moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) !important;
-  box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) !important;
+.ui.buttons .active.button,
+.ui.active.button {
+  background-color: #EAEAEA;
+  background-image: none;
+  box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.05) inset !important;
+  color: rgba(0, 0, 0, 0.7);
 }
 
-.ui.count.button > .count {
+
+/*--------------
+      Hover
+---------------*/
+
+.ui.button:not(.loading):hover {
+  background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.08));
+  color: rgba(0, 0, 0, 0.7);
+}
+.ui.button.active:hover {
+  background-image: none;
+}
+
+.ui.button:hover .icon,
+.ui.button.hover .icon {
+  opacity: 0.85;
+}
+
+/*--------------
+      Down
+---------------*/
+
+.ui.button:not(.loading):active,
+.ui.active.button:not(.loading):active {
+  background-color: #F1F1F1;
+  color: rgba(0, 0, 0, 0.7);
+  box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.05) inset !important;
+}
+
+/*--------------
+    Loading
+---------------*/
+
+.ui.loading.button {
+  position: relative;
+  cursor: default;
+
+  background-color: #FFFFFF !important;
+  color: transparent !important;
+
+  -webkit-transition: all 0s linear;
+  -moz-transition: all 0s linear;
+  -o-transition: all 0s linear;
+  -ms-transition: all 0s linear;
+  transition: all 0s linear;
+}
+.ui.loading.button:after {
   position: absolute;
-  background-color: #FFFFFF;
-  border: 1px solid #F0F0F0;
-  margin: -0.8em -1.5em;
-  padding: 0.8em 1.5em;
+  top: 0em;
+  left: 0em;
+  width: 100%;
+  height: 100%;
+  content: '';
+  background: transparent image-url("semantic-ui/loader-mini.gif") no-repeat 50% 50%;
+}
+
+.ui.labeled.icon.loading.button .icon {
+  background-color: transparent;
+  -webkit-box-shadow: none;
+  -moz-box-shadow: none;
+  box-shadow: none;
 }
 
+/*-------------------
+      Disabled
+--------------------*/
+
+.ui.disabled.button,
+.ui.disabled.button:hover,
+.ui.disabled.button.active {
+  background-color: #DDDDDD !important;
+  cursor: default;
+  color: rgba(0, 0, 0, 0.5) !important;
+  opacity: 0.3 !important;
+  background-image: none !important;
+  -webkit-box-shadow: none !important;
+  -moz-box-shadow: none !important;
+  box-shadow: none !important;
+}
+
+/*******************************
+             Types
+*******************************/
+
+/*-------------------
+       Animated
+--------------------*/
+
+.ui.animated.button {
+  position: relative;
+  overflow: hidden;
+}
+
+.ui.animated.button .visible.content {
+  position: relative;
+}
+.ui.animated.button .hidden.content {
+  position: absolute;
+  width: 100%;
+}
+
+/* Horizontal */
+.ui.animated.button .visible.content,
+.ui.animated.button .hidden.content {
+  transition: right 0.3s ease 0s;
+}
+.ui.animated.button .visible.content {
+  left: auto;
+  right: 0%;
+}
+.ui.animated.button .hidden.content {
+  top: 50%;
+  left: auto;
+  right: -100%;
+  transform: translateY(-50%);
+}
+.ui.animated.button:hover .visible.content {
+  left: auto;
+  right: 200%;
+}
+.ui.animated.button:hover .hidden.content {
+  left: auto;
+  right: 0%;
+}
+
+/* Vertical */
+.ui.vertical.animated.button .visible.content,
+.ui.vertical.animated.button .hidden.content {
+  transition: top 0.3s ease 0s, transform 0.3s ease 0s;
+}
+.ui.vertical.animated.button .visible.content {
+  transform: translateY(0%);
+  right: auto;
+}
+.ui.vertical.animated.button .hidden.content {
+  top: -100%;
+  left: 0%;
+  right: auto;
+}
+.ui.vertical.animated.button:hover .visible.content {
+  transform: translateY(200%);
+  right: auto;
+}
+.ui.vertical.animated.button:hover .hidden.content {
+  top: 50%;
+  right: auto;
+}
+
+/* Fade */
+.ui.fade.animated.button .visible.content,
+.ui.fade.animated.button .hidden.content {
+  transition: opacity 0.3s ease 0s, transform 0.3s ease 0s;
+}
+.ui.fade.animated.button .visible.content {
+  left: auto;
+  right: auto;
+  opacity: 1;
+  transform: scale(1);
+}
+.ui.fade.animated.button .hidden.content {
+  opacity: 0;
+  left: 0%;
+  right: auto;
+  transform: translateY(-50%) scale(1.2);
+}
+.ui.fade.animated.button:hover .visible.content {
+  left: auto;
+  right: auto;
+  opacity: 0;
+  transform: scale(0.7);
+}
+.ui.fade.animated.button:hover .hidden.content {
+  left: 0%;
+  right: auto;
+  opacity: 1;
+  transform: translateY(-50%) scale(1);
+}
+
+
 /*-------------------
        Primary
 --------------------*/
@@ -173,21 +352,96 @@
 }
 .ui.facebook.button:hover {
   background-color: #3A59A9;
+  color: #FFFFFF;
 }
 .ui.facebook.button:active {
   background-color: #334F95;
+  color: #FFFFFF;
 }
 
 /* Twitter */
 .ui.twitter.button {
-  background-color: #00ACED;
+  background-color: #4092CC;
   color: #FFFFFF;
 }
 .ui.twitter.button:hover {
-  background-color: #00B9FF;
+  background-color: #399ADE;
+  color: #FFFFFF;
 }
 .ui.twitter.button:active {
+  background-color: #3283BC;
+  color: #FFFFFF;
+}
+
+/* Google Plus */
+.ui.google.plus.button {
+  background-color: #D34836;
+  color: #FFFFFF;
+}
+.ui.google.plus.button:hover {
+  background-color: #E3432E;
+  color: #FFFFFF;
+}
+.ui.google.plus.button:active {
+  background-color: #CA3A27;
+  color: #FFFFFF;
+}
+
+/* Linked In */
+.ui.linkedin.button {
+  background-color: #1F88BE;
+  color: #FFFFFF;
+}
+.ui.linkedin.button:hover {
+  background-color: #1394D6;
+  color: #FFFFFF;
+}
+.ui.linkedin.button:active {
+  background-color: #1179AE;
+  color: #FFFFFF;
+}
+
+/* YouTube */
+.ui.youtube.button {
+  background-color: #CC181E;
+  color: #FFFFFF;
+}
+.ui.youtube.button:hover {
+  background-color: #DF0209;
+  color: #FFFFFF;
+}
+.ui.youtube.button:active {
+  background-color: #A50006;
+  color: #FFFFFF;
+}
+
+/* Instagram */
+.ui.instagram.button {
+  background-color: #49769C;
+  color: #FFFFFF;
+}
+.ui.instagram.button:hover {
+  background-color: #4781B1;
+  color: #FFFFFF;
+}
+.ui.instagram.button:active {
+  background-color: #38658A;
+  color: #FFFFFF;
+}
+
+
+/* Pinterest */
+.ui.pinterest.button {
+  background-color: #00ACED;
+  color: #FFFFFF;
+}
+.ui.pinterest.button:hover {
+  background-color: #00B9FF;
+  color: #FFFFFF;
+}
+.ui.pinterest.button:active {
   background-color: #009EDA;
+  color: #FFFFFF;
 }
 
 /*--------------
@@ -195,7 +449,7 @@
 ---------------*/
 
 .ui.button > .icon {
-  margin-right: 0.5em;
+  margin-right: 0.6em;
 
   line-height: 1;
 
@@ -217,132 +471,11 @@
 }
 
 
-
-/*******************************
-             States
-*******************************/
-
-
-/*--------------
-     Active
----------------*/
-
-.ui.buttons .active.button,
-.ui.active.button {
-  opacity: 1 !important;
-  background-color: #B0B0B0;
-
-  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(0, 0, 0, 0)), to(rgba(255, 255, 255, 0.1)));
-  background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(255, 255, 255, 0.1) 100%);
-  background-image: -moz-linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(255, 255, 255, 0.1) 100%);
-  background-image: -o-linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(255, 255, 255, 0.1) 100%);
-  background-image: linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(255, 255, 255, 0.1) 100%);
-
-  color: #FFFFFF;
-
-  -webkit-box-shadow:
-    0px 0px 0.3em 0px rgba(0, 0, 0, 0.3) inset
-  ;
-  -moz-box-shadow:
-    0px 0px 0.3em 0px rgba(0, 0, 0, 0.3) inset
-  ;
-  box-shadow:
-    0px 0px 0.3em 0px rgba(0, 0, 0, 0.3) inset
-  ;
-}
-
-
-/*--------------
-      Hover
----------------*/
-
-.ui.button:hover,
-.ui.active.button:hover {
-  opacity: 1 !important;
-  background-color: #A4A4A4;
-
-  color: #FFFFFF;
-}
-.ui.button:hover .icon,
-.ui.button.hover .icon {
-  opacity: 0.85;
-}
-
-/*--------------
-      Down
----------------*/
-
-.ui.button:active,
-.ui.active.button:active {
-  opacity: 1 !important;
-  background-color: #8C8C8C;
-
-  color: #FFFFFF;
-
-  -webkit-box-shadow: 0px 1px 0.2em 0px rgba(0, 0, 0, 0.3) inset;
-  -moz-box-shadow: 0px 1px 0.2em 0px rgba(0, 0, 0, 0.3) inset;
-  box-shadow: 0px 1px 0.2em 0px rgba(0, 0, 0, 0.3) inset;
-}
-
-/*--------------
-    Loading
----------------*/
-
-.ui.loading.button {
-  position: relative;
-  cursor: default;
-
-  background-color: #F3F3F3 !important;
-  color: transparent !important;
-  background-image: none !important;
-
-  -webkit-box-shadow: none !important;
-  -moz-box-shadow: none !important;
-  box-shadow: none !important;
-
-  -webkit-transition: all 0s linear;
-  -moz-transition: all 0s linear;
-  -o-transition: all 0s linear;
-  -ms-transition: all 0s linear;
-  transition: all 0s linear;
-}
-.ui.loading.button:after {
-  position: absolute;
-  top: 0em;
-  left: 0em;
-  width: 100%;
-  height: 100%;
-  content: '';
-  background: transparent image-url("semantic-ui/loader-mini.gif") no-repeat 50% 50%;
-}
-
-.ui.labeled.icon.loading.button .icon {
-  background-color: transparent;
-  -webkit-box-shadow: none;
-  -moz-box-shadow: none;
-  box-shadow: none;
-}
-
-/*-------------------
-      Disabled
---------------------*/
-
-.ui.disabled.button {
-  cursor: default;
-  color: #DDDDDD !important;
-  background-color: rgba(50, 50, 50, 0.05) !important;
-  background-image: none !important;
-
-  -webkit-box-shadow: none !important;
-  -moz-box-shadow: none !important;
-  box-shadow: none !important;
-}
-
-
 /*******************************
            Variations
 *******************************/
 
+
 /*-------------------
        Floated
 --------------------*/
@@ -369,48 +502,77 @@
   font-size: 1rem;
 }
 
-.ui.buttons.mini .button,
+.ui.mini.buttons .button,
+.ui.mini.buttons .or,
 .ui.mini.button {
-  font-size: 0.8125rem;
-  padding: 0.6em 0.8em;
-  -webkit-box-shadow: none;
-  -moz-box-shadow: none;
-  box-shadow: none;
+  font-size: 0.8rem;
+}
+.ui.mini.buttons .button,
+.ui.mini.button {
+  padding: 0.6em 0.8em 0.73em;
 }
+.ui.mini.icon.buttons .button,
+.ui.mini.buttons .icon.button {
+  padding: 0.6em 0.6em 0.73em;
+}
+
 .ui.tiny.buttons .button,
+.ui.tiny.buttons .or,
 .ui.tiny.button {
   font-size: 0.875rem;
-  padding: 0.6em 0.8em;
-  -webkit-box-shadow: none;
-  -moz-box-shadow: none;
-  box-shadow: none;
 }
+.ui.tiny.buttons .button,
+.ui.tiny.buttons .button,
+.ui.tiny.button {
+  padding: 0.6em 0.8em 0.73em;
+}
+.ui.tiny.icon.buttons .button,
+.ui.tiny.buttons .icon.button {
+  padding: 0.6em 0.6em 0.73em;
+}
+
 .ui.small.buttons .button,
+.ui.small.buttons .or,
 .ui.small.button {
   font-size: 0.875rem;
-  -webkit-box-shadow: none;
-  -moz-box-shadow: none;
-  box-shadow: none;
 }
 
 .ui.large.buttons .button,
+.ui.large.buttons .or,
 .ui.large.button {
   font-size: 1.125rem;
 }
 .ui.big.buttons .button,
+.ui.big.buttons .or,
 .ui.big.button {
   font-size: 1.25rem;
 }
 .ui.huge.buttons .button,
+.ui.huge.buttons .or,
 .ui.huge.button {
   font-size: 1.375rem;
 }
 .ui.massive.buttons .button,
+.ui.massive.buttons .or,
 .ui.massive.button {
   font-size: 1.5rem;
   font-weight: bold;
 }
 
+/* Or resize */
+.ui.tiny.buttons .or:before,
+.ui.mini.buttons .or:before {
+  width: 1.45em;
+  height: 1.55em;
+  line-height: 1.4;
+  margin-left: -0.725em;
+  margin-top: -0.25em;
+}
+.ui.tiny.buttons .or:after,
+.ui.mini.buttons .or:after {
+  height: 1.45em;
+}
+
 /* loading */
 .ui.huge.loading.button:after {
   background-image: image-url("semantic-ui/loader-small.gif");
@@ -440,15 +602,15 @@
 /*--------------
     Icon Only
 ---------------*/
+
 .ui.icon.buttons .button,
 .ui.icon.button {
-  padding: 0.8em;
+  padding: 0.8em 0.8em 0.875em;
 }
 .ui.icon.buttons .button > .icon,
 .ui.icon.button > .icon {
-  opacity: 1;
+  opacity: 0.9;
   margin: 0em;
-  vertical-align: top;
 }
 
 
@@ -461,7 +623,7 @@
 .ui.basic.button {
   background-color: transparent !important;
   background-image: none;
-  color: #999999 !important;
+  color: #808080 !important;
   font-weight: normal;
   text-transform: none;
 
@@ -474,13 +636,14 @@
   -moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset;
   box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset;
 
-  -webkit-border-radius: 0.2em;
-  -moz-border-radius: 0.2em;
-  border-radius: 0.2em;
+  -webkit-border-radius: 0.25em;
+  -moz-border-radius: 0.25em;
+  border-radius: 0.25em;
 }
 
 .ui.basic.buttons .button:hover,
 .ui.basic.button:hover {
+  background-image: none;
   color: #7F7F7F !important;
   -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.18) inset;
   -moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.18) inset;
@@ -511,7 +674,7 @@
 
 /* Basic Group */
 .ui.basic.buttons .button {
-  border: none;
+  border-left: 1px solid rgba(0, 0, 0, 0.1);
 
   -webkit-box-shadow: none;
   -moz-box-shadow: none;
@@ -523,10 +686,11 @@
   -moz-box-shadow: none;
   box-shadow: none;
 }
-.ui.basic.buttons .button.active {
-  -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset;
-  -moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset;
-  box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset;
+.ui.basic.buttons .button.active,
+.ui.basic.buttons .button.active:hover {
+  -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.2) inset;
+  -moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.2) inset;
+  box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.2) inset;
 }
 
 
@@ -555,19 +719,19 @@
 
   width: 2.75em;
   height: 100%;
-  padding-top: 0.8em;
+  padding-top: 0.85em;
   background-color: rgba(0, 0, 0, 0.05);
   text-align: center;
 
-  -webkit-border-radius: 0.2em 0px 0px 0.2em;
-  -moz-border-radius: 0.2em 0px 0px 0.2em;
-  border-radius: 0.2em 0px 0px 0.2em;
+  -webkit-border-radius: 0.25em 0px 0px 0.25em;
+  -moz-border-radius: 0.25em 0px 0px 0.25em;
+  border-radius: 0.25em 0px 0px 0.25em;
 
   line-height: 1;
 
-  -webkit-box-shadow: -2px 0px 0px 0px rgba(0, 0, 0, 0.05) inset;
-  -moz-box-shadow: -2px 0px 0px 0px rgba(0, 0, 0, 0.05) inset;
-  box-shadow: -2px 0px 0px 0px rgba(0, 0, 0, 0.05) inset;
+  -webkit-box-shadow: -1px 0px 0px 0px rgba(0, 0, 0, 0.05) inset;
+  -moz-box-shadow: -1px 0px 0px 0px rgba(0, 0, 0, 0.05) inset;
+  box-shadow: -1px 0px 0px 0px rgba(0, 0, 0, 0.05) inset;
 }
 
 .ui.labeled.icon.buttons .button > .icon {
@@ -576,24 +740,24 @@
   border-radius: 0em;
 }
 .ui.labeled.icon.buttons .button:first-child > .icon {
-  border-top-left-radius: 0.2em;
-  border-bottom-left-radius: 0.2em;
+  border-top-left-radius: 0.25em;
+  border-bottom-left-radius: 0.25em;
 }
 .ui.labeled.icon.buttons .button:last-child > .icon {
-  border-top-right-radius: 0.2em;
-  border-bottom-right-radius: 0.2em;
+  border-top-right-radius: 0.25em;
+  border-bottom-right-radius: 0.25em;
 }
 .ui.vertical.labeled.icon.buttons .button:first-child > .icon {
   -webkit-border-radius: 0em;
   -moz-border-radius: 0em;
   border-radius: 0em;
-  border-top-left-radius: 0.2em;
+  border-top-left-radius: 0.25em;
 }
 .ui.vertical.labeled.icon.buttons .button:last-child > .icon {
   -webkit-border-radius: 0em;
   -moz-border-radius: 0em;
   border-radius: 0em;
-  border-bottom-left-radius: 0.2em;
+  border-bottom-left-radius: 0.25em;
 }
 
 .ui.right.labeled.icon.button {
@@ -610,13 +774,13 @@
   left: auto;
   right: 0em;
 
-  -webkit-border-radius: 0em 0.2em 0.2em 0em;
-  -moz-border-radius: 0em 0.2em 0.2em 0em;
-  border-radius: 0em 0.2em 0.2em 0em;
+  -webkit-border-radius: 0em 0.25em 0.25em 0em;
+  -moz-border-radius: 0em 0.25em 0.25em 0em;
+  border-radius: 0em 0.25em 0.25em 0em;
 
-  -webkit-box-shadow: 2px 0px 0px 0px rgba(0, 0, 0, 0.05) inset;
-  -moz-box-shadow: 2px 0px 0px 0px rgba(0, 0, 0, 0.05) inset;
-  box-shadow: 2px 0px 0px 0px rgba(0, 0, 0, 0.05) inset;
+  -webkit-box-shadow: 1px 0px 0px 0px rgba(0, 0, 0, 0.05) inset;
+  -moz-box-shadow: 1px 0px 0px 0px rgba(0, 0, 0, 0.05) inset;
+  box-shadow: 1px 0px 0px 0px rgba(0, 0, 0, 0.05) inset;
 }
 
 
@@ -630,14 +794,16 @@
 .ui.button.toggle.active {
   background-color: #5BBD72 !important;
   color: #FFFFFF !important;
+  box-shadow: none !important;
 }
 .ui.button.toggle.active:hover {
   background-color: #58CB73 !important;
   color: #FFFFFF !important;
+  box-shadow: none !important;
 }
 
 /*--------------
-     Bubbly
+    Circular
 ---------------*/
 
 .ui.circular.button {
@@ -659,14 +825,14 @@
 }
 .ui.attached.top.button {
 
-  -webkit-border-radius: 0.2em 0.2em 0em 0em;
-  -moz-border-radius: 0.2em 0.2em 0em 0em;
-  border-radius: 0.2em 0.2em 0em 0em;
+  -webkit-border-radius: 0.25em 0.25em 0em 0em;
+  -moz-border-radius: 0.25em 0.25em 0em 0em;
+  border-radius: 0.25em 0.25em 0em 0em;
 }
 .ui.attached.bottom.button {
-  -webkit-border-radius: 0em 0em 0.2em 0.2em;
-  -moz-border-radius: 0em 0em 0.2em 0.2em;
-  border-radius: 0em 0em 0.2em 0.2em;
+  -webkit-border-radius: 0em 0em 0.25em 0.25em;
+  -moz-border-radius: 0em 0em 0.25em 0.25em;
+  border-radius: 0em 0em 0.25em 0.25em;
 }
 .ui.attached.left.button {
   display: inline-block;
@@ -675,9 +841,9 @@
   padding-right: 0.75em;
   text-align: right;
 
-  -webkit-border-radius: 0.2em 0em 0em 0.2em;
-  -moz-border-radius: 0.2em 0em 0em 0.2em;
-  border-radius: 0.2em 0em 0em 0.2em;
+  -webkit-border-radius: 0.25em 0em 0em 0.25em;
+  -moz-border-radius: 0.25em 0em 0em 0.25em;
+  border-radius: 0.25em 0em 0em 0.25em;
 }
 .ui.attached.right.button {
   display: inline-block;
@@ -685,9 +851,9 @@
   padding-left: 0.75em;
   text-align: left;
 
-  -webkit-border-radius: 0em 0.2em 0.2em 0em;
-  -moz-border-radius: 0em 0.2em 0.2em 0em;
-  border-radius: 0em 0.2em 0.2em 0em;
+  -webkit-border-radius: 0em 0.25em 0.25em 0em;
+  -moz-border-radius: 0em 0.25em 0.25em 0em;
+  border-radius: 0em 0.25em 0.25em 0em;
 }
 
 
@@ -700,7 +866,7 @@
   position: relative;
   float: left;
   width: 0.3em;
-  height: 1em;
+  height: 1.1em;
   z-index: 3;
 }
 .ui.buttons .or:before {
@@ -710,26 +876,24 @@
   content: 'or';
   background-color: #FFFFFF;
 
-  margin-top: -0.15em;
+  margin-top: -0.1em;
   margin-left: -0.9em;
 
   width: 1.8em;
   height: 1.8em;
 
-  line-height: 1.66;
+  line-height: 1.55;
   color: #AAAAAA;
   font-style: normal;
   font-weight: normal;
   text-align: center;
 
-  -moz-box-shadow: 0px 2px 1px 0px rgba(0, 0, 0, 0.2) inset;
-  -webkit-box-shadow: 0px 2px 1px 0px rgba(0, 0, 0, 0.2) inset;
-  box-shadow: 0px 2px 1px 0px rgba(0, 0, 0, 0.2) inset;
-
   -moz-border-radius: 500px;
   -webkit-border-radius: 500px;
   border-radius: 500px;
 
+  box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
+
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   -ms-box-sizing: border-box;
@@ -742,11 +906,12 @@
   content: ' ';
 
   width: 0.3em;
-  height: 1.8em;
+  height: 1.7em;
 
   background-color: transparent;
-  border-top: 0.6em solid #FFFFFF;
-  border-bottom: 0.6em solid #FFFFFF;
+  border-top: 0.5em solid #FFFFFF;
+  border-bottom: 0.5em solid #FFFFFF;
+
 }
 
 /* Fluid Or */
@@ -847,36 +1012,47 @@
   display: block;
   width: 100%;
 }
+.ui.\32.buttons > .button,
 .ui.two.buttons > .button {
   width: 50%;
 }
+.ui.\33.buttons > .button,
 .ui.three.buttons > .button {
   width: 33.333%;
 }
+.ui.\34.buttons > .button,
 .ui.four.buttons > .button {
   width: 25%;
 }
+.ui.\35.buttons > .button,
 .ui.five.buttons > .button {
   width: 20%;
 }
+.ui.\36.buttons > .button,
 .ui.six.buttons > .button {
   width: 16.666%;
 }
+.ui.\37.buttons > .button,
 .ui.seven.buttons > .button {
   width: 14.285%;
 }
+.ui.\38.buttons > .button,
 .ui.eight.buttons > .button {
   width: 12.500%;
 }
+.ui.\39.buttons > .button,
 .ui.nine.buttons > .button {
   width: 11.11%;
 }
+.ui.\31\30.buttons > .button,
 .ui.ten.buttons > .button {
   width: 10%;
 }
+.ui.\31\31.buttons > .button,
 .ui.eleven.buttons > .button {
   width: 9.09%;
 }
+.ui.\31\32.buttons > .button,
 .ui.twelve.buttons > .button {
   width: 8.3333%;
 }
@@ -884,42 +1060,55 @@
 /* Fluid Vertical Buttons */
 .ui.fluid.vertical.buttons,
 .ui.fluid.vertical.buttons > .button {
+  display: block;
   width: auto;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   -ms-box-sizing: border-box;
   box-sizing: border-box;
 }
+
+.ui.\32.vertical.buttons > .button,
 .ui.two.vertical.buttons > .button {
   height: 50%;
 }
+.ui.\33.vertical.buttons > .button,
 .ui.three.vertical.buttons > .button {
   height: 33.333%;
 }
+.ui.\34.vertical.buttons > .button,
 .ui.four.vertical.buttons > .button {
   height: 25%;
 }
+.ui.\35.vertical.buttons > .button,
 .ui.five.vertical.buttons > .button {
   height: 20%;
 }
+.ui.\36.vertical.buttons > .button,
 .ui.six.vertical.buttons > .button {
   height: 16.666%;
 }
+.ui.\37.vertical.buttons > .button,
 .ui.seven.vertical.buttons > .button {
   height: 14.285%;
 }
+.ui.\38.vertical.buttons > .button,
 .ui.eight.vertical.buttons > .button {
   height: 12.500%;
 }
+.ui.\39.vertical.buttons > .button,
 .ui.nine.vertical.buttons > .button {
   height: 11.11%;
 }
+.ui.\31\30.vertical.buttons > .button,
 .ui.ten.vertical.buttons > .button {
   height: 10%;
 }
+.ui.\31\31.vertical.buttons > .button,
 .ui.eleven.vertical.buttons > .button {
   height: 9.09%;
 }
+.ui.\31\32.vertical.buttons > .button,
 .ui.twelve.vertical.buttons > .button {
   height: 8.3333%;
 }
@@ -929,16 +1118,6 @@
        Colors
 --------------------*/
 
-/*--- White ---*/
-.ui.white.buttons .button,
-.ui.white.button {
-  background-color: #FFFFFF;
-}
-
-.ui.white.buttons .button:hover,
-.ui.white.button:hover {
-  background-color: #A4A4A4;
-}
 
 /*--- Black ---*/
 .ui.black.buttons .button,
@@ -949,12 +1128,10 @@
 .ui.black.buttons .button:hover,
 .ui.black.button:hover {
   background-color: #4C4C4C;
-  color: #FFFFFF;
 }
 .ui.black.buttons .button:active,
 .ui.black.button:active {
   background-color: #333333;
-  color: #FFFFFF;
 }
 
 /*--- Green ---*/
@@ -1140,16 +1317,15 @@
   -webkit-border-radius: 0em;
   -moz-border-radius: 0em;
   border-radius: 0em;
-  border-left: 1px solid rgba(0, 0, 0, 0.05);
 }
 .ui.buttons .button:first-child  {
   margin-left: 0em;
-  border-top-left-radius: 0.2em;
-  border-bottom-left-radius: 0.2em;
+  border-top-left-radius: 0.25em;
+  border-bottom-left-radius: 0.25em;
 }
 .ui.buttons .button:last-child {
-  border-top-right-radius: 0.2em;
-  border-bottom-right-radius: 0.2em;
+  border-top-right-radius: 0.25em;
+  border-bottom-right-radius: 0.25em;
 }
 
 /* Vertical  Style */
@@ -1159,9 +1335,7 @@
 .ui.vertical.buttons .button {
   display: block;
   float: none;
-  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
-  border-left: none;
-  box-shadow: none;
+  box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset;
 }
 .ui.vertical.buttons .button:first-child,
 .ui.vertical.buttons .mini.button:first-child,
@@ -1170,9 +1344,9 @@
 .ui.vertical.buttons .massive.button:first-child,
 .ui.vertical.buttons .huge.button:first-child {
   margin-top: 0px;
-  -moz-border-radius: 0.2em 0.2em 0px 0px;
-  -webkit-border-radius: 0.2em 0.2em 0px 0px;
-  border-radius: 0.2em 0.2em 0px 0px;
+  -moz-border-radius: 0.25em 0.25em 0px 0px;
+  -webkit-border-radius: 0.25em 0.25em 0px 0px;
+  border-radius: 0.25em 0.25em 0px 0px;
 }
 .ui.vertical.buttons .button:last-child,
 .ui.vertical.buttons .mini.button:last-child,
@@ -1181,7 +1355,7 @@
 .ui.vertical.buttons .massive.button:last-child,
 .ui.vertical.buttons .huge.button:last-child,
 .ui.vertical.buttons .gigantic.button:last-child {
-  -moz-border-radius: 0px 0px 0.2em 0.2em;
-  -webkit-border-radius: 0px 0px 0.2em 0.2em;
-  border-radius: 0px 0px 0.2em 0.2em;
+  -moz-border-radius: 0px 0px 0.25em 0.25em;
+  -webkit-border-radius: 0px 0px 0.25em 0.25em;
+  border-radius: 0px 0px 0.25em 0.25em;
 }