100ZONE
/
SmartCommunity


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

<head>
  <meta charset="UTF-8">
  <title>vue-gemini-scrollbar - body example</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 {
      height: 100vh;
    }

    .-left {
      float: left
    }

    .-right {
      float: right
    }

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

    .col {
      margin-bottom: 2vw
    }

    [class^="row"] {
      float: left;
      padding: 0 1vw;
    }

    .row-4 {
      width: 33.33333333333333%
    }

    .row-6 {
      width: 50%
    }

    .row-12 {
      width: 100%
    }

    .fake-image {
      position: relative;
      min-height: 25vw;
      background-color: rgba(0, 0, 0, .05);
      box-shadow: 0 0 0 1px rgba(0, 0, 0, .1);
      border-radius: 3px;
    }

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

    .wrapper {
      padding: 0 2rem;
    }

    header {
      padding: 2rem 0;
      border-bottom: 1px solid #ccc;
    }

    header .col {
      margin-bottom: 0;
    }

    main {
      padding-bottom: 1rem;
    }

    main h4 {
      margin: 2rem 0;
    }

    main p {
      margin-bottom: 1rem;
    }

    footer {
      padding: 2rem 0;
      border-top: 1px solid #ccc;
    }

    footer .col {
      margin-bottom: 0;
    }
    /* gemini-scrollbar override styles */

    .gm-scrollbar {
      right: 0;
      border-radius: 0;
    }

    .gm-scrollbar.-vertical {
      width: 14px;
      top: 0;
      bottom: 0;
      background-color: rgba(0, 0, 0, .05);
    }

    .gm-scrollbar .thumb {
      background-color: rgba(68, 209, 234, .8);
    }

    .gm-scrollbar .thumb:hover,
    .gm-scrollbar .thumb:active {
      background-color: rgba(68, 209, 234, 1);
    }

  </style>
</head>

<body>
  <header>
    <div class="wrapper -clearfix">
      <div class="col -clearfix">
        <div class="row-12">
          <div class="-left">ABC</div>
          <div class="-right">a a a</div>
        </div>
      </div>
    </div>
  </header>

  <main>
    <div class="wrapper">
      <div class="col -clearfix">
        <div class="row-12">
          <h4>hello</h4>
          <div class="fake-image"></div>
        </div>
      </div>

      <div class="col -clearfix">
        <div class="row-6">
          <div class="fake-image"></div>
        </div>
        <div class="row-6">
          <div class="fake-image"></div>
        </div>
      </div>

      <div class="col -clearfix">
        <div class="row-4">
          <div class="fake-image"></div>
        </div>
        <div class="row-4">
          <div class="fake-image"></div>
        </div>
        <div class="row-4">
          <div class="fake-image"></div>
        </div>
      </div>

      <div class="col -clearfix">
        <div class="row-4">
          <div class="fake-image"></div>
        </div>
        <div class="row-4">
          <div class="fake-image"></div>
        </div>
        <div class="row-4">
          <div class="fake-image"></div>
        </div>
      </div>

      <div class="col -clearfix">
        <div class="row-12">
          <h4>hello</h4>
        </div>

        <div class="row-4">
          <p>L o r e m i p s u m .</p>
        </div>
        <div class="row-4">
          <p>M a g n a m .</p>
        </div>
        <div class="row-4">
          <p>Q u a m, e a r u m, i t a q u e</p>
        </div>
      </div>
    </div>
  </main>

  <footer>
    <div class="wrapper -clearfix">
      <div class="col -clearfix">
        <div class="row-12">
          <div class="-left">ABC</div>
          <div class="-right">a a a</div>
        </div>
      </div>
    </div>
  </footer>

  <script src="../js/vue.js" type="text/javascript"></script>
  <script src="../js/vue-gemini-scrollbar.js" type="text/javascript"></script>

  <script>
    window.onload = function () {
      var scrollbar = new Vue.$geminiScrollbar({
        element: document.body
      }).create();
    }

  </script>
</body>

</html>