reactjs-pdf-view/src/components/MobilePDFReader/index.less

PDF Reader in browser for React js

@images: "../../assets/img";
@import './common.less';
:global{
  .mobile__pdf__container{
    &__header{
      background-color: #f4f4f4;
      border-bottom: 1px solid #d8d8d8;
      color: #858585;
      font-size: 1rem;
      font-style: italic;
      font-weight: normal;
      overflow: hidden;
      height:2rem;
      line-height:2rem;
      text-align: center;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    section {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     overflow: hidden;
     font-size: 2rem;
    }

    footer {
     background-image: url('@{images}/toolbar_background.png');
     height: 4rem;
     position: fixed;
     bottom: 0;
     left: 0;
     right: 0;
     z-index: 1;
     box-shadow: 0 -0.2rem 0.5rem rgba(50, 50, 50, 0.75);
    }

    .toolbarButton {
     display: block;
     padding: 0;
     margin: 0;
     border-width: 0;
     background-position: center center;
     background-repeat: no-repeat;
     background-color: transparent;
    }

    .toolbarButton.pageUp {
     position: absolute;
     width: 18%;
     height: 100%;
     left: 0;
     background-image: url('@{images}/icon_previous_page.png');
     background-size: 2rem;
    }

    .toolbarButton.pageDown {
     position: absolute;
     width: 18%;
     height: 100%;
     left: 18%;
     background-image: url('@{images}/icon_next_page.png');
     background-size: 2rem;
    }

    #pageNumber {
     -moz-appearance: textfield; /* hides the spinner in moz */
     position: absolute;
     width: 28%;
     height: 100%;
     left: 36%;
     text-align: center;
     border: 0;
     background-color: transparent;
     font-size: 1.2rem;
     color: #FFF;
    }

    .toolbarButton.zoomOut {
     position: absolute;
     width: 18%;
     height: 100%;
     left: 64%;
     background-image: url('@{images}/icon_zoom_out.png');
     background-size: 2.4rem;
    }

    .toolbarButton.zoomIn {
     position: absolute;
     width: 18%;
     height: 100%;
     left: 82%;
     background-image: url('@{images}/icon_zoom_in.png');
     background-size: 2.4rem;
    }

    .toolbarButton[disabled] {
     opacity: .3;
    }

    .hidden {
     display: none;
    }
    [hidden] {
     display: none !important;
    }

    #viewerContainer {
     position: absolute;
     overflow: auto;
     width: 100%;
     top: 2.5rem;
     bottom: 1rem;
     left: 0;
     right: 0;
     .pdfViewer{
       overflow: scroll;
       .page{

       }
     }
    }
    canvas {
     margin: auto;
     display: block;
    }

    .pdfViewer .page .loadingIcon {
     width: 2.9rem;
     height: 2.9rem;
     background: url("@{images}/spinner.png") no-repeat left top / 38rem ;
     border: medium none;
     animation: 1s steps(10, end) 0s normal none infinite moveDefault;
     display: block;
     position: absolute;
     top: calc((100% - 2.9rem) / 2);
     left: calc((100% - 2.9rem) / 2);
    }

    @keyframes moveDefault {
     from {
       background-position: 0 top;
     }

     to {
       background-position: -39rem top;
     }
    }

    #loadingBar {
     position: relative;
     height: .6rem;
     background-color: #333;
     border-bottom: 1px solid #333;
     margin-top: 5rem;
    }

    #loadingBar .progress {
     position: absolute;
     left: 0;
     width: 0;
     height: 100%;
     background-color: #ddd;
     overflow: hidden;
     transition: width 200ms;
    }

    @keyframes progressIndeterminate {
     0% { left: 0; }
     50% { left: 100%; }
     100% { left: 100%; }
    }

    #loadingBar .progress.indeterminate {
     background-color: #999;
     transition: none;
    }

    #loadingBar .indeterminate .glimmer {
     position: absolute;
     top: 0;
     left: 0;
     height: 100%;
     width: 5rem;

     background-image: linear-gradient(to right, #999 0%, #fff 50%, #999 100%);
     background-size: 100% 100%;
     background-repeat: no-repeat;

     animation: progressIndeterminate 2s linear infinite;
    }

    #errorWrapper {
     background: none repeat scroll 0 0 #FF5555;
     color: white;
     left: 0;
     position: absolute;
     right: 0;
     top: 3.2rem;
     z-index: 1000;
     padding: 0.3rem;
     font-size: 0.8em;
    }

    #errorMessageLeft {
     float: left;
    }

    #errorMessageRight {
     float: right;
    }

    #errorMoreInfo {
     background-color: #FFFFFF;
     color: black;
     padding: 0.3rem;
     margin: 0.3rem;
     width: 98%;
    }
  }
}