Darep/Beatstream

View on GitHub
app/assets/stylesheets/components/_songlist.scss

Summary

Maintainability
Test Coverage
.page-header {
  overflow: hidden;
  padding:15px 20px;
  position:relative;

  .info {
    float:left;
  }
  .meta {
    font-size:13px;
  }
}

.grid-container {
  background:#f1f1f1;
  position:relative;
  width:100%;
}

/* slickgrid */
#slickgrid {
  background:#fff;
  color:#222;
  font-size:12px;
  height:auto;
  position:absolute;
  left:0;
  right:0;
  top:0;
  bottom:2px;
  width:100%;
}
#slickgrid .slick-header {
  background:#fafafa;
  background: -webkit-linear-gradient(top, #fff, #fff 50%, #eee);
  background: -moz-linear-gradient(top, #fff, #fff 50%, #eee);
  background: -o-linear-gradient(top, #fff, #fff 50%, #eee);
  background: -ms-linear-gradient(top, #fff, #fff 50%, #eee);
  background:linear-gradient(top, #fff, #fff 50%, #eee);
  border-top:1px solid #d1d1d1;
  border-bottom:1px solid #bbb;
  font-weight:700;
  overflow:visible !important;
  z-index:2;
  -webkit-box-shadow:0 2px 2px rgba(0,0,0, 0.08);
  -moz-box-shadow:0 2px 2px rgba(0,0,0, 0.08);
  box-shadow:0 2px 2px rgba(0,0,0, 0.08);
}
#slickgrid .slick-header-column {
  padding-left:10px;
}
.slick-header:before, .slick-header:after {
  content:'';
  display:table;
}
.slick-header:after {
  clear:both;
}
#slickgrid .slick-row {
  line-height:22px;
  z-index:1;
}
#slickgrid .slick-cell {
  border:0;
  padding-left:10px;
}
#slickgrid .slick-cell.l0 {
  padding-left:5px;
}
#slickgrid .selected {
  background:$color-blue;
  color:#fff;
}
#slickgrid .playing {
  background-image:url('/assets/icons.png');
  background-repeat: no-repeat;
  background-position:-232px -194px;
}
#slickgrid .playing.selected {
  background-position:-232px -151px;
}
.slick-cell.tracknum {
  text-align:right;
  padding-right:10px;
}
.slick-cell.duration {
}
#slickgrid .even {
  background:#f7f7f7;
}

/* overlay */
.overlay {
  background:rgba(0,0,0, 0.5);
  height:100%;
  width:100%;
  overflow-x:hidden;
  position:absolute;
  top:0;
  left:0;
  z-index:9000;
}
.overlay .content {
  background:#fff;
  position:absolute;
  top:50%;
  left:50%;
  padding:30px 40px;
  margin:-30px 0 0 -200px;
  overflow:hidden;
  text-align:center;
  width:400px;
  z-index:9001;
  -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
  -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
}
.overlay h3 {
  font-size:24px;
  font-weight:700;
}