Vue

by mkurzweil

HTML

<div class="row seven-cols">
  <div class="col-md-1" v-for="(folder,index) in folders">
    <stats-card>
      <div slot="header" :data-key="index" class="folder-rectangle" @click="selected=index" :class="{'folder-selected':selected==index}">
        <div class="row">
          <div class="col-2">
            <div class="clearfix" v-if="folder.shared" style="margin-top: 8px; margin-left: 10px;">
              <i class="material-icons" id="folder-image">&#xe2c9;</i>
            </div>
            <div class="clearfix" style="margin-top: 8px; margin-left: 10px;" v-else>
              <i class="material-icons" id="folder-image">folder</i>
            </div>
          </div>
          <div class="col-10">
            <div class="clearfix">
              <div class="row">
                <p class="folder-name-style">{{folder.name}}</p>
              </div>
              <div class="row">
                <p class="folder-size-style">{{folder.numFiles}} files</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </stats-card>
  </div>
</div>

CSS

@media (min-width: 768px){
  .seven-cols .col-md-1,
  .seven-cols .col-sm-1,
  .seven-cols .col-lg-1  {
    width: 100%;
    *width: 100%;
  }
}
@media (min-width: 992px) {
  .seven-cols .col-md-1,
  .seven-cols .col-sm-1,
  .seven-cols .col-lg-1 {
    width: 14.285714285714285714285714285714%;
    *width: 14.285714285714285714285714285714%;
    max-width: 14.285714285714285714285714285714% !important;
flex:none !important;
  }
}
 
@media (min-width: 1200px) {
  .seven-cols .col-md-1,
  .seven-cols .col-sm-1,
  .seven-cols .col-lg-1 {
    width: 14.285714285714285714285714285714%;
    *width: 14.285714285714285714285714285714%;
    max-width: 14.285714285714285714285714285714% !important;
flex:none !important;
  }
}