spacedeck-open/styles/list.scss

@import "vars";
@import "mixins";
@import "unicode";

.table-versions {
  width: 100%;
  margin-top: 25px;
  margin-bottom: 25px;
  tr {
    border-bottom: 2px solid rgba(0,0,0,0.025);
    &:last-child { border: none !important;}
    td {
      span {
        position: relative;
      }
      &:first-child { padding-left: 15px; width: 1%; padding-right: 0px;}
      &:last-child { padding-right: 40px; width: 1%; text-align: right;}
    }
  }
}

.grid {
  padding: 15px;
  margin: 0;
  list-style: none;
  text-align: left;
  width: 100%;
  @include user-select(none);
  @include transition( all 0.2s ease-in-out);
  @include translateY (0px);


  &.select {
    @include translateY (60px);

    > li {
      &.list-title > span,
      &.folder-up > span {
        @include translateX (0px);
      }

      &:active,
      &.active,
      &:hover {
        &:before {
          display: none !important;
        }
      }
      .checkbox {
        pointer-events: auto;
        // @include translateX (0px);
        @include scale(1,1);
      }
    }
  }

  > li {
    display: block;
    width: 33.333333%;
    width: 50%;
    float: left;
    @include clearfix;
    position: relative;
    overflow: hidden;
    // border-bottom: 2px solid rgba(0,0,0,0.05);
    
    .sort-handle {
      width: 44px;
      position: absolute;
      pointer-events: none;
      top: 0;
      right: 0;
      @include transition-transform( 0.1s ease-in-out);
      opacity: 0.05;
      @include scale(0,0);
      cursor: -webkit-grab; cursor: -moz-grab;
      &:active {
        opacity: 1;
        cursor: -webkit-grabbing; cursor: -moz-grabbing;
      }
      z-index: 100;
      &:before {
        width: 44px;
      }
    }

    &:hover {
      background-clip: padding-box;
      // background-color: rgba(255,255,255,0.025);
      &:before {
        opacity: 0.25;
        display: block;
      }
    }

    &.checked {
      &:before {
        opacity: 0.5;
        display: block;
      }
    }

    &.editing { > span { color: transparent !important; } }
    &.editing,  
    &:active,
    &.loading,
    &.active {
      // background-color: rgba(255,255,255,0.025);
      &:before {
        opacity: 1 !important;
        display: block;
      }
      > span {
        color: white;
        font-weight: 500;
        &:after {
          opacity: 1 !important;
          color: white !important;
        }
      }
    }

    .item-thumbnail {
      display: block;
      width: 100%;
      background-size: cover;
      background-position: center;
      background-color: rgba(255,255,255,0.025);
      margin-bottom: 7px;
      border-radius: $radius;
      z-index: 50;
      /* aspect ratio without spacer image */
      &:before{
        content: "";
        display: block;
        padding-top: 100%; /* initial ratio of 1:1*/
        // padding-top: 75%; /* initial ratio of 1:1*/
      }
    }

    .checkbox {
      @include transition-transform(0.2s ease-in-out);
      position: absolute;
      left: 0px;
      pointer-events: none;
      z-index: 100;
      height: 100%;
      width: 100%;
      text-align: left;
      @include transform-origin(top left);
      @include scale(0,0);

      &:before {
        border-radius: 100%;
        height: 30px;
        width: 30px;
        line-height: 29px;
        background-color: $darker;
        z-index: 10;
        position: absolute;
      }
      &:after {
        margin: -5px;
        content: "";
        display: block;
        position: absolute;
        top: 0;
        border-bottom-right-radius: 50%;
        height: 40px;
        width: 40px;
        line-height: 29px;
        background-color: $darker;
        z-index: 0;
      }
    }
    > span {
      padding: 5px;
      padding-bottom: 10px;
      display: block;
      line-height: 1;
      font-size: 15px;
      font-size: 11px;

      color: $medium;
      text-decoration: none;
      // text-align: center;
      cursor: pointer;

      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      width: 100%;
    }
  }
}

.list {
  counter-reset: list-counter;
  padding: 0px;
  margin: 0px;
  list-style: none;
  text-align: left;
  // width: 100%;
  display: block;
  @include user-select(none);
  @include transition( all 0.2s ease-in-out);
  @include translateY (0px);

  &.pages {
    margin-left: -40px;
    margin-right: -40px;
    > li {
     @include transition( margin-top 0.2s ease-in-out);
     &.moving{
     }
     &.over{
     }
     counter-increment: list-counter;
     position: relative;
     display:block;
     > span {
        padding-left: 90px; 
        position: static;
        &:before {
          content: counter(list-counter); 
          position: absolute;
          top: 50%;
          margin-top: -13px;
          left: 40px;
          // background-color: $medium;
          // color: $dark;
          color: rgba(0,0,0,0.1);
          border: 2px solid rgba(0,0,0,0.1);
          border-radius: 100%;
          display: inline-block;
          text-align: center;
          width: 26px;
          height: 26px;
          line-height: 22px;
          font-weight: 700;
        }
      }
    }
  }

  // &.versions {
  //   counter-reset: versions-counter;
  //   li {
  //     counter-increment: versions-counter;
  //     span {
  //       &:before {
  //         content: counter(versions-counter); 
  //         display: block;
  //       }
  //     }
  //   }
  // }

  &.versions {
    > li {
     position: relative;
     > span {
        padding: 20px 25px;
        position: static;
        // padding-left: 65px; 
        // &:before {
        //   content: counter(list-counter); 
        //   position: absolute;
        //   top: 50%;
        //   margin-top: -13px;
        //   left: 25px;
        //   // background-color: $medium;
        //   // color: $dark;
        //   color: $medium;
        //   border: 2px solid $medium;
        //   border-radius: 100%;
        //   display: inline-block;
        //   text-align: center;
        //   width: 26px;
        //   height: 26px;
        //   line-height: 22px;
        //   font-weight: 700;
        // }

        > span {
          display: block;
          line-height: 1.3;
          font-family: $main-font;
          font-size: 10px;
          line-height: 1.5;
          font-weight: 300;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          &.version-name {font-size: 15px; }
          &.version-author {opacity: 0.5; }


          &.version-thumbnail {
            float: left;
            display: block;
            width: 25%;
            background-size: cover;
            background-position: center;
            background-color: rgba(255,255,255,0.025);
            border-radius: $radius;
            z-index: 50;
            margin-right: 15px;
            /* aspect ratio without spacer image */
            &:before{
              content: "";
              display: block;
              padding-top: 100%; /* initial ratio of 1:1*/
              // padding-top: 75%; /* initial ratio of 1:1*/
            }
          }
        }
     } 
    }
  }

  &.menu {
    > li {
      &:before {
        display: none !important;
      }

      > span {
        padding-left: 0px !important;
        .icon {
          margin-left: 8px;
          margin-right: -8px; 
        }
        .icon-md {
          margin-top: -2px;
          margin-right: -8px;
          margin-left: 8px;
        }
        .icon-folder-plus {
          color: $yellow;
        }
      }
    }
  }

  &.select {
    > li {
      &.list-title > span,
      &.folder-up > span {
        @include translateX (0px);
      }

      &:active,
      &.active,
      &:hover {
        &:before {
          display: none !important;
        }
      }
      .sort-handle {
        @include scale(1,1);
        pointer-events: auto;
      }

      .checkbox {
        position: absolute;
        left: 0px;
        @include translateX (0px);
        pointer-events: auto;
      }

      > span {
        @include translateX (40px);
        padding-right: 80px !important;
      }
    }
  }

  > li {
    @include clearfix;
    position: relative;
    overflow: hidden;
    display: block;
    border-bottom: 2px solid rgba(0,0,0,0.05);
    cursor: pointer;
    
    .sort-handle {
      width: 44px;
      position: absolute;
      pointer-events: none;
      top: 0;
      right: 0;
      @include transition-transform( 0.1s ease-in-out);
      opacity: 0.5;
      @include scale(0,0);
      cursor: -webkit-grab; cursor: -moz-grab;
      &:active {
        opacity: 1;
        cursor: -webkit-grabbing; cursor: -moz-grabbing;
      }
      z-index: 100;
      &:before {
        width: 44px;
      }
    }

    &.deleted {-webkit-animation:collapse 0.35s ease-in-out forwards; }

    &.loading {
      > span:before {
        @include transition( all 0.1s 0.1s ease-in-out);
        -webkit-animation:pulse 0.35s infinite ease-in-out;
        @include scale(1,1);
      }
    }

    &.home > span:after{
      @extend .icon-home:before;
      opacity: 0.25;
    }

    &.folder-up > span:after,
    &.folder > span:after {
      @extend .icon-folder:before;
      color: $yellow;
    }

    &.space > span:after {
      @extend .icon-page-horizontal:before;
      opacity: 0.25;
    }
    &.shaed > span:after {
      @extend .icon-page-horizontal-up:before;
      opacity: 0.25;
    }

    &.home,
    &.folder-up,
    &.folder,
    &.space {

      > span {
        padding-left: 50px; 
        position: relative;
        &:after {
          @include icon;
          @include icon-md;
          position: absolute;
          top: 6px;
          left: 8px;
        }

        &:before {
          @include icon;
          position: absolute;
          top: 0px;
          left: auto;
          right: -4px;
          color: $medium !important;
          color: $light !important;
          @extend .icon-shape-circle:before;
        }


        &:after {
          @include transition( transition-transform 0.1s 0.1s ease-in-out);
          @include scale(1,1);
        }
        
        &:before {
          @include transition( transition-transform 0.1s 0s ease-in-out);
          @include scale(0,0);
        }
      }
    }
    
    &:before {
      top: 50%;
      left: 7px;
      margin-top: -3px;
      content: "";
      display: block;
      position: absolute;
      height: 6px;
      width: 6px;
      background-color: $light;
      border-radius: 100%;
      display: none;
    }

    &:hover {
      background-clip: content-box;
      background-color: rgba(255,255,255,0.025);
      &:before {
        opacity: 0.25;
        display: block;
      }
    }

    &.checked {
      &:before {
        opacity: 0.5;
        display: block;
      }
    }

    &.editing { > span { color: transparent !important; } }
    &.editing,  
    &:active,
    &.loading,
    &.active {
      // background-color: rgba(255,255,255,0.025);
      &:before {
        opacity: 1 !important;
        display: block;
      }
      > span {
        color: white;
        // font-weight: 500;
        &:after {
          opacity: 1 !important;
          color: white !important;
        }
      }
    }

    &.list-title,
    &.list-title:hover,
    &.list-title:active {
      background-color: transparent;
      border: none;
      cursor: default;
      > span {
        min-height: 30px;
        line-height: 30px;
        font-size: 11px;
        color: $medium;
        color: white;
        padding: 0px 25px;
        padding-top: 19px;

      }
      &:before {
        display: none;
      }
    }

    .checkbox {
      @include transition-transform(0.2s ease-in-out);
      @include translateX (-60px);
      position: absolute !important;
      left: 0px;
      pointer-events: none;
      width: 100%;
      z-index: 100;
    }

    > span {
      @include transition-transform(0.2s ease-in-out);
      display: block;
      min-height: 60px;
      line-height: 58px;
      font-size: 15px;

      color: $medium;
      text-decoration: none;

      padding: 0px 25px;

      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      width: 100%;

      // &:active {background-color: $dark !important; }

      &:first-letter {
        // text-transform: capitalize;
      }
      &.thumbnail {
        padding: 0px 25px;
        padding-top: 25px;
  
        img {
          display: block;
          max-width: 100%;
        }
      }
    } 
  }
}

.light .list > li{
  &.editing,  
  &:active,
  &.loading,
  &.active {
    > span {
      color: black;
      &:after {
        color: black !important;
      }
    }
  }
}


@-webkit-keyframes pulse {
    0% { @include scale(0,0); }
    50% { @include scale(0.3,0.3); }
    100% { @include scale(0,0); }
}

@-webkit-keyframes collapse {
    0% { max-height: 60px; }
    100% { max-height: 0px; }
}