100ZONE
/
SmartCommunity


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408
							<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>vue-gemini-scrollbar - fake app sctructure</title>
  <style>
    /* global presentation */

    @font-face {
      font-family: 'BLOKKRegular';
      src: url('./assets/fonts/blokk/BLOKKRegular.eot');
      src: url('./assets/fonts/blokk/BLOKKRegular.eot?#iefix') format('embedded-opentype'),
      url('./assets/fonts/blokk/BLOKKRegular.woff') format('woff'),
      url('./assets/fonts/blokk/BLOKKRegular.svg#BLOKKRegular') format('svg');
      font-weight: normal;
      font-style: normal;
    }

     :root {
      font-size: 12px;
      line-height: 1.25rem;
      font-family: 'BLOKKRegular';
      color: #777;
    }

    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    html,
    body {
      height: 100vh;
      overflow: hidden;
    }

    [class^="row"] {
      float: left;
    }

    .row-3 {
      width: 25%
    }

    .row-4 {
      width: 33.33333333333333%
    }

    .row-6 {
      width: 50%
    }

    .row-12 {
      width: 100%
    }


    .-left {
      float: left
    }

    .-right {
      float: right
    }

    .-clearfix::after {
      content: '';
      display: table;
      clear: both;
    }

    .-text-center {
      text-align: center
    }

    .-text-right {
      text-align: right
    }

    .fake-image {
      position: relative;
      min-height: 20vw;
      background-color: rgba(0, 0, 0, .05);
      border-bottom: 1px solid rgba(0, 0, 0, .06);
      border-right: 1px solid rgba(0, 0, 0, .06);
    }

    .fake-image::after {
      content: '.';
      position: absolute;
      top: 50%;
      left: 50%;
      -webkit-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);
      color: rgba(0, 0, 0, .16);
    }
    /* layout for the example */

    header {
      padding: 1rem;
      height: 45px;
      border-bottom: 1px solid #ccc;
    }

    footer {
      padding: .5rem 1em 0;
      height: 30px;
      border-top: 1px solid #ccc;
      background-color: #333;
    }

    .hero {
      position: relative;
      height: 50vh;
      background-image: linear-gradient(-90deg, #CA9EFF, #9EFFF4);
    }
    /* will apply scrollbar to this element */

    .hero .content {
      height: 100%;
      overflow: auto;
    }

    .hero .collapse {
      position: absolute;
      bottom: 0;
      width: 100%;
      height: 20px;
      background-color: #333;
      cursor: pointer;
      z-index: 2;
    }
    /* will apply scrollbar to this element */

    .grid {
      height: calc(50vh - 45px - 30px) !important;
      overflow: auto;
    }

    .collapsed .hero {
      height: 25vh;
    }

    .collapsed .grid {
      height: calc(75vh - 45px - 30px);
    }
    /* gemini-scrollbar override styles */

    .gm-scrollbar .thumb {
      border-radius: 4px;
    }

    .gm-scrollbar.-vertical {
      width: 8px;
    }

    .hero .gm-scrollbar .thumb {
      background-color: rgba(58, 255, 244, .5);
    }

    .hero .gm-scrollbar .thumb:hover,
    .hero .gm-scrollbar .thumb:active {
      background-color: rgba(58, 255, 244, .7);
    }

    .grid .gm-scrollbar .thumb {
      background-color: rgba(111, 87, 140, .4);
    }

    .grid .gm-scrollbar .thumb:hover,
    .grid .gm-scrollbar .thumb:active {
      background-color: rgba(111, 87, 140, .6);
    }

  </style>
</head>

<body>
  <div id="app">
    <header>
      <div class="wrapper -clearfix">
        <div class="col -clearfix">
          <div class="row-6">
            <p>ABC</p>
          </div>
          <div class="row-6 -text-right">
            <p>a a a</p>
          </div>
        </div>
      </div>
    </header>

    <section class="hero">
      <gemini-scrollbar class="content">
        <div class="col -clearfix">
          <div class="row-3">
            <div class="fake-image"></div>
          </div>
          <div class="row-3">
            <div class="fake-image"></div>
          </div>
          <div class="row-3">
            <div class="fake-image"></div>
          </div>
          <div class="row-3">
            <div class="fake-image"></div>
          </div>
          <div class="col -clearfix">
            <div class="row-3">
              <div class="fake-image"></div>
            </div>
            <div class="row-3">
              <div class="fake-image"></div>
            </div>
            <div class="row-3">
              <div class="fake-image"></div>
            </div>
            <div class="row-3">
              <div class="fake-image"></div>
            </div>
          </div>
          <div class="col -clearfix">
            <div class="row-3">
              <div class="fake-image"></div>
            </div>
            <div class="row-3">
              <div class="fake-image"></div>
            </div>
            <div class="row-3">
              <div class="fake-image"></div>
            </div>
            <div class="row-3">
              <div class="fake-image"></div>
            </div>
          </div>
          <div class="col -clearfix">
            <div class="row-3">
              <div class="fake-image"></div>
            </div>
            <div class="row-3">
              <div class="fake-image"></div>
            </div>
            <div class="row-3">
              <div class="fake-image"></div>
            </div>
            <div class="row-3">
              <div class="fake-image"></div>
            </div>
          </div>
          <div class="col -clearfix">
            <div class="row-3">
              <div class="fake-image"></div>
            </div>
            <div class="row-3">
              <div class="fake-image"></div>
            </div>
            <div class="row-3">
              <div class="fake-image"></div>
            </div>
            <div class="row-3">
              <div class="fake-image"></div>
            </div>
          </div>
          <div class="col -clearfix">
            <div class="row-3">
              <div class="fake-image"></div>
            </div>
            <div class="row-3">
              <div class="fake-image"></div>
            </div>
            <div class="row-3">
              <div class="fake-image"></div>
            </div>
            <div class="row-3">
              <div class="fake-image"></div>
            </div>
          </div>
        </div>
      </gemini-scrollbar>
      <div class="collapse -text-center">.</div>
    </section>

    <gemini-scrollbar class="grid">
      <div class="col -clearfix">
        <div class="row-3">
          <div class="fake-image"></div>
        </div>
        <div class="row-3">
          <div class="fake-image"></div>
        </div>
        <div class="row-3">
          <div class="fake-image"></div>
        </div>
        <div class="row-3">
          <div class="fake-image"></div>
        </div>
      </div>
      <div class="col -clearfix">
        <div class="row-3">
          <div class="fake-image"></div>
        </div>
        <div class="row-3">
          <div class="fake-image"></div>
        </div>
        <div class="row-3">
          <div class="fake-image"></div>
        </div>
        <div class="row-3">
          <div class="fake-image"></div>
        </div>
      </div>
      <div class="col -clearfix">
        <div class="row-3">
          <div class="fake-image"></div>
        </div>
        <div class="row-3">
          <div class="fake-image"></div>
        </div>
        <div class="row-3">
          <div class="fake-image"></div>
        </div>
        <div class="row-3">
          <div class="fake-image"></div>
        </div>
      </div>
      <div class="col -clearfix">
        <div class="row-3">
          <div class="fake-image"></div>
        </div>
        <div class="row-3">
          <div class="fake-image"></div>
        </div>
        <div class="row-3">
          <div class="fake-image"></div>
        </div>
        <div class="row-3">
          <div class="fake-image"></div>
        </div>
      </div>
      <div class="col -clearfix">
        <div class="row-3">
          <div class="fake-image"></div>
        </div>
        <div class="row-3">
          <div class="fake-image"></div>
        </div>
        <div class="row-3">
          <div class="fake-image"></div>
        </div>
        <div class="row-3">
          <div class="fake-image"></div>
        </div>
      </div>
      <div class="col -clearfix">
        <div class="row-3">
          <div class="fake-image"></div>
        </div>
        <div class="row-3">
          <div class="fake-image"></div>
        </div>
        <div class="row-3">
          <div class="fake-image"></div>
        </div>
        <div class="row-3">
          <div class="fake-image"></div>
        </div>
      </div>
      <div class="col -clearfix">
        <div class="row-3">
          <div class="fake-image"></div>
        </div>
        <div class="row-3">
          <div class="fake-image"></div>
        </div>
        <div class="row-3">
          <div class="fake-image"></div>
        </div>
        <div class="row-3">
          <div class="fake-image"></div>
        </div>
      </div>
    </gemini-scrollbar>

    <footer>
      <div class="wrapper -clearfix">
        <div class="col -clearfix">
          <div class="row-6">
            <p>a b c</p>
          </div>
          <div class="row-6 -text-right">
            <p>a b c</p>
          </div>
        </div>
      </div>
    </footer>
  </div>
  <script src="../js/vue.js" type="text/javascript"></script>
  <script src="../js/vue-gemini-scrollbar.js" type="text/javascript"></script>
  <script>
    new Vue({
      el: '#app'
    })
  </script>
</body>

</html>