bee-button/build/Button.css

/* FormGroup */
/*  Navlayout  */
.u-button {
  background: rgb(236,239,241);
  border: 1px solid rgb(236,239,241);
  border-radius: 3px;
  color: rgb(33,33,33);
  position: relative;
  min-width: 72px;
  padding: 4px 13px;
  display: inline-block;
  font-family: "Open Sans", "Helvetica Neue", Arial, "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0;
  overflow: hidden;
  will-change: box-shadow, transform;
  outline: none;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  line-height: 1.57143;
  vertical-align: middle; }
  .u-button::-moz-focus-inner {
    border: 0; }
  .u-button:hover {
    background-color: rgb(223,225,230);
    border-color: rgb(238,238,238); }
  .u-button:active {
    background-color: rgb(223,225,230);
    border-color: rgb(189,189,189); }
  .u-button.colored {
    color: rgb(245, 60, 50); }
    .u-button.colored:focus:not(:active) {
      background-color: rgb(223,225,230);
      border-color: rgb(189,189,189); }
  .u-button.disable, .u-button.u-button[disabled] {
    cursor: not-allowed;
    background-color: #DFE1E6;
    border-color: #DFE1E6;
    color: #fff; }
    .u-button.disable:hover, .u-button.disable:active, .u-button.disable:focus, .u-button.u-button[disabled]:hover, .u-button.u-button[disabled]:active, .u-button.u-button[disabled]:focus {
      background-color: #DFE1E6;
      border-color: #DFE1E6;
      color: #fff; }
  .u-button:not(.u-button-icon) i.uf {
    line-height: normal; }

input.u-button[type="submit"] {
  -webkit-appearance: none; }

.u-button-floating {
  border-radius: 50%;
  font-size: 14px;
  height: 38px;
  margin: auto;
  min-width: 38px;
  width: 38px;
  padding: 0;
  line-height: normal;
  border: 1px solid rgb(165, 173, 186); }
  .u-button-floating.colored {
    background: rgb(67,160,71);
    color: rgb(255,255,255);
    background: rgb(255,255,255); }
    .u-button-floating.colored:hover {
      background-color: rgb(102,187,106); }
    .u-button-floating.colored:focus:not(:active) {
      background-color: rgb(67,160,71); }
    .u-button-floating.colored:active {
      background-color: rgb(67,160,71); }

.u-button.disabled, .u-button[disabled] {
  cursor: not-allowed;
  background-color: #DFE1E6;
  border-color: #DFE1E6;
  color: #fff; }

.u-button-default {
  color: #333;
  background-color: #fff;
  border-color: #ccc; }
  .u-button-default:hover, .u-button-default:active {
    background-color: #e6e6e6;
    border-color: #adadad; }

.u-button-border {
  color: rgb(33,33,33);
  border: 1px solid rgb(165, 173, 186);
  background: rgb(255,255,255); }
  .u-button-border:hover {
    color: rgb(33,33,33);
    background-color: #EBECF0;
    border-color: rgb(165, 173, 186); }
  .u-button-border:active {
    color: rgb(33,33,33);
    background-color: #EBECF0;
    border-color: rgb(165, 173, 186); }

.u-button.u-button-primary {
  color: #fff;
  background-color: rgb(245, 60, 50);
  border: 1px rgb(245, 60, 50) solid; }
  .u-button.u-button-primary:hover {
    background-color: rgb(230, 0, 18);
    border-color: rgb(230, 0, 18); }
  .u-button.u-button-primary.focus, .u-button.u-button-primary:focus {
    background-color: rgb(245, 60, 50);
    border-color: rgb(245, 60, 50); }
  .u-button.u-button-primary.active, .u-button.u-button-primary:active {
    background-color: rgb(230, 0, 18);
    border-color: rgb(230, 0, 18); }

.u-button.u-button-secondary {
  color: rgb(33,33,33);
  background-color: rgb(236,239,241);
  border: 1px rgb(236,239,241) solid; }
  .u-button.u-button-secondary:hover {
    background-color: rgb(223,225,230);
    border-color: rgb(223,225,230); }
  .u-button.u-button-secondary.focus, .u-button.u-button-secondary:focus {
    background-color: rgb(236,239,241);
    border-color: rgb(236,239,241); }
  .u-button.u-button-secondary.active, .u-button.u-button-secondary:active {
    background-color: rgb(223,225,230);
    border-color: rgb(223,225,230); }

.u-button.u-button-danger {
  color: #fff;
  background-color: rgb(244,67,54);
  border: 1px rgb(244,67,54) solid; }
  .u-button.u-button-danger:hover {
    background-color: rgb(211,47,47);
    border-color: rgb(211,47,47); }
  .u-button.u-button-danger.focus, .u-button.u-button-danger:focus {
    background-color: rgb(244,67,54);
    border-color: rgb(244,67,54); }
  .u-button.u-button-danger.active, .u-button.u-button-danger:active {
    background-color: rgb(211,47,47);
    border-color: rgb(211,47,47); }

.u-button.u-button-info {
  color: #fff;
  background-color: rgb(0,188,212);
  border: 1px rgb(0,188,212) solid; }
  .u-button.u-button-info:hover {
    background-color: rgb(0,151,167);
    border-color: rgb(0,151,167); }
  .u-button.u-button-info.focus, .u-button.u-button-info:focus {
    background-color: rgb(0,188,212);
    border-color: rgb(0,188,212); }
  .u-button.u-button-info.active, .u-button.u-button-info:active {
    background-color: rgb(0,151,167);
    border-color: rgb(0,151,167); }

.u-button.u-button-warning {
  color: #fff;
  background-color: rgb(255,152,0);
  border: 1px rgb(255,152,0) solid; }
  .u-button.u-button-warning:hover {
    background-color: rgb(245,124,0);
    border-color: rgb(245,124,0); }
  .u-button.u-button-warning.focus, .u-button.u-button-warning:focus {
    background-color: rgb(255,152,0);
    border-color: rgb(255,152,0); }
  .u-button.u-button-warning.active, .u-button.u-button-warning:active {
    background-color: rgb(245,124,0);
    border-color: rgb(245,124,0); }

.u-button.u-button-success {
  color: #fff;
  background-color: rgb(76,175,80);
  border: 1px rgb(76,175,80) solid; }
  .u-button.u-button-success:hover {
    background-color: rgb(56,142,60);
    border-color: rgb(56,142,60); }
  .u-button.u-button-success.focus, .u-button.u-button-success:focus {
    background-color: rgb(76,175,80);
    border-color: rgb(76,175,80); }
  .u-button.u-button-success.active, .u-button.u-button-success:active {
    background-color: rgb(56,142,60);
    border-color: rgb(56,142,60); }

.u-button.u-button-dark {
  color: #fff;
  background-color: rgb(97,97,97);
  border: 1px rgb(97,97,97) solid; }
  .u-button.u-button-dark:hover {
    background-color: rgb(66,66,66);
    border-color: rgb(66,66,66); }
  .u-button.u-button-dark.focus, .u-button.u-button-dark:focus {
    background-color: rgb(97,97,97);
    border-color: rgb(97,97,97); }
  .u-button.u-button-dark.active, .u-button.u-button-dark:active {
    background-color: rgb(66,66,66);
    border-color: rgb(66,66,66); }

.u-button.u-button-light {
  color: rgb(97,97,97);
  background-color: rgb(255,255,255);
  border: 1px rgb(255,255,255) solid; }
  .u-button.u-button-light:hover {
    background-color: rgb(189,189,189);
    border-color: rgb(189,189,189); }
  .u-button.u-button-light.focus, .u-button.u-button-light:focus {
    background-color: rgb(255,255,255);
    border-color: rgb(255,255,255); }
  .u-button.u-button-light.active, .u-button.u-button-light:active {
    background-color: rgb(189,189,189);
    border-color: rgb(189,189,189); }

.u-button-border.u-button-success {
  color: rgb(76,175,80);
  background-color: #fff;
  border: 1px rgb(76,175,80) solid; }
  .u-button-border.u-button-success:hover {
    background-color: rgb(56,142,60);
    border-color: rgb(56,142,60);
    color: #fff; }
  .u-button-border.u-button-success.focus, .u-button-border.u-button-success:focus {
    color: rgb(76,175,80);
    background-color: #fff;
    border-color: rgb(76,175,80); }
  .u-button-border.u-button-success.active, .u-button-border.u-button-success:active {
    color: #fff;
    background-color: rgb(56,142,60);
    border-color: rgb(56,142,60); }

.u-button-border.u-button-warning {
  color: rgb(255,152,0);
  background-color: #fff;
  border: 1px rgb(255,152,0) solid; }
  .u-button-border.u-button-warning:hover {
    background-color: rgb(245,124,0);
    border-color: rgb(245,124,0);
    color: #fff; }
  .u-button-border.u-button-warning.focus, .u-button-border.u-button-warning:focus {
    color: rgb(255,152,0);
    background-color: #fff;
    border-color: rgb(255,152,0); }
  .u-button-border.u-button-warning.active, .u-button-border.u-button-warning:active {
    color: #fff;
    background-color: rgb(245,124,0);
    border-color: rgb(245,124,0); }

.u-button-border.u-button-danger {
  color: rgb(244,67,54);
  background-color: #fff;
  border: 1px rgb(244,67,54) solid; }
  .u-button-border.u-button-danger:hover {
    background-color: rgb(211,47,47);
    border-color: rgb(211,47,47);
    color: #fff; }
  .u-button-border.u-button-danger.focus, .u-button-border.u-button-danger:focus {
    color: rgb(244,67,54);
    background-color: #fff;
    border-color: rgb(244,67,54); }
  .u-button-border.u-button-danger.active, .u-button-border.u-button-danger:active {
    color: #fff;
    background-color: rgb(211,47,47);
    border-color: rgb(211,47,47); }

.u-button-border.u-button-info {
  color: rgb(0,188,212);
  background-color: #fff;
  border: 1px rgb(0,188,212) solid; }
  .u-button-border.u-button-info:hover {
    background-color: rgb(0,151,167);
    border-color: rgb(0,151,167);
    color: #fff; }
  .u-button-border.u-button-info.focus, .u-button-border.u-button-info:focus {
    color: rgb(0,188,212);
    background-color: #fff;
    border-color: rgb(0,188,212); }
  .u-button-border.u-button-info.active, .u-button-border.u-button-info:active {
    color: #fff;
    background-color: rgb(0,151,167);
    border-color: rgb(0,151,167); }

.u-button-border.u-button-primary {
  color: rgb(245, 60, 50);
  background-color: #fff;
  border: 1px rgb(245, 60, 50) solid; }
  .u-button-border.u-button-primary:hover {
    background-color: rgb(230, 0, 18);
    border-color: rgb(230, 0, 18);
    color: #fff; }
  .u-button-border.u-button-primary.focus, .u-button-border.u-button-primary:focus {
    color: rgb(245, 60, 50);
    background-color: #fff;
    border-color: rgb(245, 60, 50); }
  .u-button-border.u-button-primary.active, .u-button-border.u-button-primary:active {
    color: #fff;
    background-color: rgb(230, 0, 18);
    border-color: rgb(230, 0, 18); }

.u-button-border.u-button-secondary {
  color: rgb(236,239,241);
  background-color: #fff;
  border: 1px rgb(236,239,241) solid; }
  .u-button-border.u-button-secondary:hover {
    background-color: rgb(223,225,230);
    border-color: rgb(223,225,230);
    color: #fff; }
  .u-button-border.u-button-secondary.focus, .u-button-border.u-button-secondary:focus {
    color: rgb(236,239,241);
    background-color: #fff;
    border-color: rgb(236,239,241); }
  .u-button-border.u-button-secondary.active, .u-button-border.u-button-secondary:active {
    color: #fff;
    background-color: rgb(223,225,230);
    border-color: rgb(223,225,230); }

.u-button-border.u-button-dark {
  color: rgb(97,97,97);
  background-color: #fff;
  border: 1px rgb(97,97,97) solid; }
  .u-button-border.u-button-dark:hover {
    background-color: rgb(66,66,66);
    border-color: rgb(66,66,66);
    color: #fff; }
  .u-button-border.u-button-dark.focus, .u-button-border.u-button-dark:focus {
    color: rgb(97,97,97);
    background-color: #fff;
    border-color: rgb(97,97,97); }
  .u-button-border.u-button-dark.active, .u-button-border.u-button-dark:active {
    color: #fff;
    background-color: rgb(66,66,66);
    border-color: rgb(66,66,66); }

.u-button-border.u-button-light {
  color: rgb(97,97,97);
  background-color: #fff;
  border: 1px rgb(255,255,255) solid; }
  .u-button-border.u-button-light:hover {
    background-color: rgb(189,189,189);
    border-color: rgb(189,189,189);
    color: #fff; }
  .u-button-border.u-button-light.focus, .u-button-border.u-button-light:focus {
    color: rgb(97,97,97);
    background-color: #fff;
    border-color: rgb(255,255,255); }
  .u-button-border.u-button-light.active, .u-button-border.u-button-light:active {
    color: #fff;
    background-color: rgb(189,189,189);
    border-color: rgb(189,189,189); }

.u-button-icon {
  border-radius: 50%;
  font-size: 14px;
  height: 32px;
  margin: auto;
  min-width: 32px;
  width: 32px;
  padding: 0;
  line-height: normal;
  border: 1px solid rgb(165, 173, 186); }

.u-button-lg {
  padding: 8px 15px;
  font-size: 14px; }

.u-button-xg {
  padding: 10.5px 18px;
  font-size: 16px; }

.u-button-md {
  padding: 4px 13px;
  font-size: 14px; }

.u-button-sm {
  padding: 3px 5px;
  font-size: 12px; }

.u-button-squared {
  border-radius: 0; }

.u-button-round {
  border-radius: 1000px; }

.u-button-block {
  white-space: normal;
  display: block;
  width: 100%; }

.u-button-pill-left {
  border-radius: 500px 0 0 500px; }

.u-button-pill-right {
  border-radius: 0 500px 500px 0; }