twers/re-education

@import "base";

#attachments {
  section.info {
    overflow: hidden;
    position: relative;
    padding: 10px 0;

    b {
      position: absolute;
      top: 50%;
      right: 200px;
      margin-top: -.5em;
      color: $font-light-color;
    }

    .btn-primary {
      padding: 2px 6px !important;
      margin-right: 10px !important;
      float: right;
    }
  }
}

.attachment-list {
  list-style: none;

  li {
    float: left;
    margin: 10px 5px;
    position: relative;
  }

  a {
    display: block;
    height: 150px;

    img {
      max-height: 150px;
      @include box-shadow(0 2px 5px #999);
    }
  }
}

.scratch-attachment-list,
.attachment-list {
  overflow: hidden;
  background: whiteSmoke;
  padding: 5px 10px;

  button {
    position: absolute;
    top: -7px;
    right: -7px;
    display: none;
    cursor: pointer;
    @include background(url("delete.png"));
    height: 32px;
    width: 32px;
    border: 0;
  }

  li:hover button {
    display: block;
  }
}

.scratch-attachment-list{
  li{
    list-style-type: none;
    position: relative;
    float: left;
    width: 16%;
    height: 130px;
    margin: 10px 20px 40px 10px;

    a{
      span{
        position: absolute;
        top: 100%;
      }
    }
  }

  li a:before{
    font-family: 'fontello';
    display: block;
    position: absolute; left: 0;
    text-align: center;
    width: 100%;
    height: 125px;
    font-size: 70px;
    line-height: 125px;
    content: '✒';
    background: #61b1bd;
    color: #fff;
  }

  <%
  lessonplan_icons = %w[  📣 ♥ 🔆 ⚒ 🔔 ⏳ ];
  lessonplan_icon_bg = %w[#FE7B9D #37B4AE #389ABD #FBB963 #D52A24 #E0DFC2 #F7E9A7 #A7D4C0 #E49996]
  5.times do |time|
      lessonplan_icons.each_with_index do |icon, index|
      li_str = Array.new(time * 9 + index){ "+li" };
      %>li<%=li_str.join('')%> a:before{ content: "<%= icon%>"; background: <%=lessonplan_icon_bg[index] %> }<%
      end
  end
  %>
}

.scratch-dialog-box.dialog{
  width: 700px;
  height: 600px;
  overflow: hidden;
}

ul.fileList {
  padding: 10px 0;
  margin: 0 0 10px;
  overflow: auto;
  /*height: 400px;*/

  li {

    line-height: 30px;
    padding: 0 10px;
    list-style: none;
    background: #eee;
    position: relative;

    .file {
      display: none;
      width: 100%;
    }

    b.file-name {
      font-size: 12px;
      font-weight: normal;
      color: #888;
      word-wrap: break-word; /* IE 5.5-7 */
      white-space: -moz-pre-wrap; /* Firefox 1.0-2.0 */
      white-space: pre-wrap; /* current browsers */
    }

    .progressbar {
      position: relative;
      width: 100px;
      height: 6px;
      vertical-align: middle;
      display: inline-block;
      margin-left: 10px;
      border: 1px solid #4C88BC;
      background: #fff;
      @include box-shadow(inset 1px 1px 2px #ddd);
      @include border-radius(6px);

      .progress {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        width: 0%;
        background: #4C9ED0;
        @include background(linear-gradient(top, #37AAEA, #117ED2));
        @include border-radius(4px);
      }
    }
  }
}