bee-loading-state/build/LoadingState.css

bee-loading-state ui component for react

@charset "UTF-8";
/* FormGroup */
/*  Navlayout  */
/* 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; }

/* FormGroup */
/*  Navlayout  */
/**
  * 文字
  */
.u-loading-desc {
  width: 100%;
  position: absolute;
  top: 50%;
  padding-top: 32px;
  font-size: 14px;
  color: #212121;
  text-align: center;
  line-height: 22px; }

.u-loading-container {
  position: relative; }

/**
  * default样式 单个圆圈加载
  */
.u-loading.u-loading-rotate > div {
  position: absolute;
  margin: 2px;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  border: none !important;
  width: 40px;
  height: 40px;
  top: 50%;
  left: 50%;
  margin-left: -22px;
  margin-top: -22px;
  background: transparent !important;
  display: inline-block;
  -webkit-animation: rotate1 1s 0s linear infinite !important;
  animation: rotate1 1s 0s linear infinite !important;
  text-align: center;
  line-height: 40px; }
  .u-loading.u-loading-rotate > div > img {
    width: 40px; }
  .u-loading.u-loading-rotate > div > .uf {
    color: #0084ff;
    font-size: 40px;
    padding: 0; }

.u-loading.u-loading-rotate.u-loading-rotate-lg > div {
  margin-left: -35px;
  margin-top: -35px;
  width: 60px;
  height: 60px;
  line-height: 60px; }
  .u-loading.u-loading-rotate.u-loading-rotate-lg > div > img {
    width: 60px; }
  .u-loading.u-loading-rotate.u-loading-rotate-lg > div > .uf {
    font-size: 60px; }

.u-loading.u-loading-rotate.u-loading-rotate-lg > .u-loading-desc {
  padding-top: 38px; }

.u-loading.u-loading-rotate.u-loading-rotate-sm > div {
  margin-left: -15px;
  margin-top: -15px;
  width: 25px;
  height: 25px;
  line-height: 25px; }
  .u-loading.u-loading-rotate.u-loading-rotate-sm > div > img {
    width: 25px; }
  .u-loading.u-loading-rotate.u-loading-rotate-sm > div > .uf {
    font-size: 25px; }

.u-loading.u-loading-rotate.u-loading-rotate-sm > .u-loading-desc {
  padding-top: 25px; }

.u-loading.u-loading-rotate.u-loading-rotate-primary > div > .uf {
  color: #3f51b5; }

.u-loading.u-loading-rotate.u-loading-rotate-success > div > .uf {
  color: #4caf50; }

.u-loading.u-loading-rotate.u-loading-rotate-warning > div > .uf {
  color: #ff9800; }

.u-loading-backdrop {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1900;
  background-color: rgba(255, 255, 255, 0.4); }
  .u-loading-backdrop.full-screen {
    position: fixed; }

@keyframes rotate1 {
  0% {
    -webkit-transform: rotate(0deg) scale(1);
    transform: rotate(0deg) scale(1); }
  50% {
    -webkit-transform: rotate(180deg) scale(1);
    transform: rotate(180deg) scale(1); }
  100% {
    -webkit-transform: rotate(360deg) scale(1);
    transform: rotate(360deg) scale(1); } }

.u-loading.u-loading-line {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -30px;
  margin-left: -25px; }
  .u-loading.u-loading-line > div {
    background-color: #C2C3C5;
    width: 6px;
    height: 50px;
    border-radius: 2px;
    margin: 2px;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    display: inline-block; }
  .u-loading.u-loading-line.u-loading-line-lg {
    margin-top: -50px;
    margin-left: -30px; }
    .u-loading.u-loading-line.u-loading-line-lg > div {
      width: 8px;
      height: 90px; }
  .u-loading.u-loading-line.u-loading-line-sm {
    margin-top: -22px;
    margin-left: -20px; }
    .u-loading.u-loading-line.u-loading-line-sm > div {
      width: 4px;
      height: 35px; }
  .u-loading.u-loading-line div:nth-child(1) {
    -webkit-animation: line-scale 1s 0.1s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
    animation: line-scale 1s 0.1s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
    background-color: #F44336; }
  .u-loading.u-loading-line div:nth-child(2) {
    -webkit-animation: line-scale 1s 0.2s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
    animation: line-scale 1s 0.2s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
    background-color: #7ED321; }
  .u-loading.u-loading-line div:nth-child(3) {
    -webkit-animation: line-scale 1s 0.3s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
    animation: line-scale 1s 0.3s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
    background-color: #0084FF; }
  .u-loading.u-loading-line div:nth-child(4) {
    -webkit-animation: line-scale 1s 0.4s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
    animation: line-scale 1s 0.4s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
    background-color: #FF9800; }
  .u-loading.u-loading-line div:nth-child(5) {
    -webkit-animation: line-scale 1s 0.5s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
    animation: line-scale 1s 0.5s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
    background-color: #D0021B; }
  .u-loading.u-loading-line.u-loading-line-primary > div {
    background-color: #3f51b5; }
  .u-loading.u-loading-line.u-loading-line-success > div {
    background-color: #4caf50; }
  .u-loading.u-loading-line.u-loading-line-warning > div {
    background-color: #ff9800; }

.u-loading.u-loading-custom > div {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%); }

@keyframes line-scale {
  0% {
    -webkit-transform: scaley(1);
    transform: scaley(1); }
  50% {
    -webkit-transform: scaley(0.4);
    transform: scaley(0.4); }
  100% {
    -webkit-transform: scaley(1);
    transform: scaley(1); } }

.u-loading-state {
  position: relative; }
  .u-loading-state > :not(.u-loading-backdrop) .u-loading.u-loading-custom > div, .u-loading-state > :not(.u-loading-backdrop) .u-loading.u-loading-rotate > div {
    left: 20px; }
    .u-loading-state > :not(.u-loading-backdrop) .u-loading.u-loading-custom > div > .rotate-icon-container, .u-loading-state > :not(.u-loading-backdrop) .u-loading.u-loading-rotate > div > .rotate-icon-container {
      width: 22px;
      height: 22px;
      -webkit-animation: rotate 1s 0s linear infinite;
      animation: rotate 1s 0s linear infinite; }
      .u-loading-state > :not(.u-loading-backdrop) .u-loading.u-loading-custom > div > .rotate-icon-container > .uf, .u-loading-state > :not(.u-loading-backdrop) .u-loading.u-loading-rotate > div > .rotate-icon-container > .uf {
        padding: 0;
        line-height: 22px;
        color: #fff; }
  .u-loading-state .u-loading-desc {
    position: absolute;
    left: 30px;
    top: 2px;
    font-size: 16px;
    color: #000;
    text-align: center; }
  .u-loading-state-label {
    margin-left: 20px; }