@woleet/woleet-widget/res/style.less

Woleet verification widget

@background1: #f8f9fa;
@background2: #4814ad;

@color2: #f05228;

@default_height: 70px;

@button_color_r: 128;
@button_color_g: 187;
@button_color_b: 60;

@logo_icon: 'logo.svg';
@ok_icon: 'ok.svg';
@info_icon: 'info.svg';
@error_icon: 'error.svg';
@refresh_icon: 'refresh.svg';
@arrow_up_icon: 'arrow_up.svg';

@height_transition: height 0.5s, background-position 0.5s;
@padding_transition: padding-top .5s;

@progress_background: 45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent;
@progress_background_size: 40px 40px;
@progress_transition: width .6s ease;
@progress_animation: progress-bar-stripes 2s linear infinite;

.woleet-widget {
  .widget {
    background-color: @background2;
    border-radius: 5px;
    border: 3px solid @background2;
    width: 330px;
    color: @background2;
    text-decoration: none;
    font-family: sans-serif !important;
    font-weight: normal;
    line-height: 1em;
    padding: 0;
    margin: 0;
    box-sizing: content-box;

    > div {
      background: @background1;
      border-radius: 4px;
      padding: 5px;
    }

    > .head {
      background: @background2;
      height: 24px;
      box-sizing: content-box;

      .floatright {
        float: right;
      }

      .woleet-logo {
        float: left;
        background-size: 100%;
        background: data-uri(@logo_icon) no-repeat;
        margin-top: 1px;
        height: 100%;
        width: 85px;
      }

      .mini-button {
        float: left;
        margin-left: 5px;
        background-size: 100% !important;
        height: 24px;
        width: 24px;
      }

      .receipt-button {
        float: left;
        color: #343a40;
        white-space: nowrap;
        font-size: x-small;
        border: none;
        border-radius: 3px;
        display: block;
        padding: 5px 5px;

        &:active {
          position: relative;
          top: 1px;
        }

        &:focus {
          outline: none;
        }
      }

      .mini-button.reset {
        background: data-uri(@refresh_icon) no-repeat;
      }

      .mini-button.cancel {
        background: data-uri(@error_icon) no-repeat, #fff;
        border-radius: 50%;
      }
    }

    > .body {
      height: @default_height;
      box-sizing: content-box;
      font-size: medium;

      * {
        box-sizing: border-box;
      }

      &.expanded {
        height: auto;
        .infoZone {
          .infoZoneItem {
            &:first-child {
              border-top: none;
            }

            border-top: 1px solid @background2;
            overflow: hidden;

            &.reduced {
              height: 24px;
              display: block;
              padding: 5px 0;
              background-origin: content-box;
              background-position-x: 20px;

              > .text {
                text-align: left;
                padding-left: @default_height;
              }
            }
          }
        }
      }

      > div {
        animation: fly .5s ease;
        transform-origin: center;
        box-sizing: content-box;
      }

      .dropZoneContainer {
        border-radius: 2px;
        border: 2px dashed;
        color: #4814ad;
        height: 34px;
        overflow: hidden;
        padding: 1em 0;
        text-align: center;

        .dropZone {
          margin-top: -5em;
          outline: none;
          padding-top: 5em;
          opacity: 0;
          width: 100%;
          position: relative;
        }
      }

      .infoZone {
        .infoZoneItem {
          transition: @height_transition;

          > .text {
            transition: @padding_transition;
          }

          &.ok {
            background: data-uri(@ok_icon) no-repeat;
          }

          &.info {
            background: data-uri(@info_icon) no-repeat;
          }

          &.error {
            background: data-uri(@error_icon) no-repeat;
          }

          &.expanded {
            height: @default_height;
            display: block;
            padding: 5px 0;
            background-origin: content-box;

            > .text {
              padding-left: @default_height;
            }

            > a {
              margin-left: 0 !important;
              padding-left: 0 !important;
            }
          }

          display: none;
        }
      }

      .hashZone {

        span {
          font-size: small;
          color: #888;
        }

        .progressBarContainer {
          width: 100%;
          margin: 15px 0 10px 0;
          height: 1em;
          border-radius: 4px;
          background: #e4e4e4;

          .progressBar {
            height: 1em;
            width: 0;

            animation: @progress_animation;
            background: rgba(139, 195, 74, 0.65) linear-gradient(@progress_background);
            background-size: @progress_background_size;
            transition: @progress_transition;
            margin: 15px 0;
            border-radius: 4px;
          }
        }
      }
    }

    > .foot {
      float: right;
      padding: 0;
      border-radius: 0;

      * {
        box-sizing: border-box;
      }

      > .expand {
        height: 30px;
        background: @background2;
        width: 45px;
        border-radius:8px 0 0 0;
        margin-top: -27px;
        line-height: 28px;
        text-align: right;
        font-size: medium;
        padding: 1px 5px;
        color: @background1;
      }

      > .up-arrow {
        background: @background2 data-uri(@arrow_up_icon) no-repeat 15px 5px;
        background-size: 20px;
      }
    }

    .hidden {
      display: none !important;
    }

    .text {
      color: #333;
      font-size: medium;
    }

    .small {
      font-size: small;
    }

    .x-small {
      font-size: x-small;
    }

    .warn {
      color: @color2;
    }

    .clickable {
      &:hover {
        cursor: pointer;
      }
    }

    @keyframes progress-bar-stripes {
      from {
        background-position: 40px 0;
      }
      to {
        background-position: 0 0;
      }
    }

    @keyframes fly {
      from {
        transform: scale(0);
        opacity: 0;
      }
    }

    @keyframes reduce {
      from {
        transform: scale(0);
        opacity: 0;
      }
    }
  }
}