gbeWoW

gbeWoW.markdown

gbeWoW

A Pen by Mohamad El-Husseini on CodePen.

License.

index.html

<div class="dashboard-wrapper">
  <div class="filters">
  </div>
  
  <div class="graphs">
    <div class="scrollable-row">
      <div class="graph-wrapper">1</div>      
      <div class="graph-wrapper">2</div>    
      <div class="graph-wrapper">3</div>    
      <div class="graph-wrapper">4</div>    
      <div class="graph-wrapper">5</div>    
      <div class="graph-wrapper">6</div>    
      <div class="graph-wrapper">7</div>    
      <div class="graph-wrapper">8</div>
    </div>

    <div class="scrollable-row">
      <div class="graph-wrapper">1</div>
      <div class="graph-wrapper">2</div>    
      <div class="graph-wrapper">3</div>    
      <div class="graph-wrapper">4</div>    
      <div class="graph-wrapper">5</div>    
      <div class="graph-wrapper">6</div>    
      <div class="graph-wrapper">7</div>    
      <div class="graph-wrapper">8</div>
    </div>
  </div>

  <div class="scroller">  
    <div class="scroller--control">
      <a href="#" class="scroller--scroll-left">LEFT</a>
    </div>
    <div class="scroller--control">
      <a href="#" class="scroller--scroll-right">RIGHT</a>
    </div>
  </div>
</div>

style.scss

html, body {
  margin: 0;
  padding: 0;
}

.dashboard-wrapper {
  border: 10px solid #000;
  box-sizing: border-box;
  margin: 50px 0;
}

.graphs {
  border: 10px solid #ff0022;
  box-sizing: border-box;
  overflow-x: scroll;
}

.scrollable-row {
  border: 10px solid blue;
  min-width: 2000px;
  overflow: auto;
}

.graph-wrapper {
  border: 1px solid #ddd;
  float: left;
  height: 200px;
  margin: 20px;
  width: 200px;
}

.scroller {
  &--control {
    background-color: green;
    float: left;
    text-align: center;
    width: 50%;  
  }

  &--scroll-left,
  &--scroll-right {
    color: #fff;
  }
}