w-ui/packages/image-clip/src/imageclip.less

A Vue.js 2.0 UI Toolkit for mobile

.wui {
  &-clip-modal{
    .modal {
      width: 100%;
      background-color: #fff;

      .modal-content {
        padding: 0.1rem;

        .container-bg {
          width: 100%;
          min-height: 4rem;
          background-color: #f0f0f0;
          border-radius: 4px;
          text-align: center;
          padding: 10px;

          .img-container {
            position: relative;
            margin: auto;

            img {
              position: relative;
              width: 100%;
            }

            .shadow-box {
              position: absolute;
              top: 0;
              left: 0;
              width: 100%;
              height: 100%;
              background-color: rgba(0, 0, 0, .5);
              z-index: 1;
            }
          }

          .reset-img {
            position: relative;
            display: inline-block;
            color: #6d757a;
            font-size: 12px;
            cursor: pointer;
            overflow: hidden;
            margin-top: 1rem;

            input {
              position: absolute;
              font-size: 100px;
              right: 0;
              top: 0;
              opacity: 0;
              cursor: pointer
            }
          }

          .reset-img:hover {
            color: #00b5e5;
          }
        }
      }
    }
    
  }
}