agneta-platform/portal/website/source/edit/media/main.styl

Agneta Platform - Integrate and customize business applications

color-bar = #fbfbfb;

.page-edit-media-main{

  .dir{

    .toolbar{
      padding-bottom: 0;
      border-bottom: solid 2px color-primary;
      padding-top: 0;
      background: color-bar;

      .location{
        .entry{
          span{
            text-transform: capitalize;
            cursor: pointer;
          }
          &:last-child{
            font-weight: bold;
          }
        }
      }
    }

    .footer{

      padding-bottom: 0;
      border-top: solid 2px color-primary;
      padding-top: 0;
      background: color-bar;

      .search{
        padding: 7px;
        input{
          background: transparent;
          border-bottom: solid 2px #afafaf;
          margin: 0 8px;
        }
      }
    }

    .empty-folder{

      .title{
        font-size: 1.6em;
        color: color-primary;
      }

      md-icon{
        margin: 10px;
        width: 100px;
        margin-bottom: 30px;
        height: 100px;
        color: color-primary;
      }
    }
  }

  md-tabs-content-wrapper{
    flex: 1 1 100%;
    flex-direction: column;
    display: flex;
    md-tab-content{
      flex: 1 1 100%;
      flex-direction: column;
      display: flex;
      >div{
        flex-direction: column;
        display: flex;
      }
    }
  }

  .drop-box{
    position: relative;

    .drop-cover{
      pointer-events: none;
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      opacity: 0;
      color: white;
      background: alpha(darken(color-primary,10),0.67);
      transition: opacity 300ms ease;

      md-icon{
        color: white;
        margin: 10px;
        width: 100px;
        height: 100px;
      }
    }

    &.dragover{
      .drop-cover{
        opacity: 1;
      }
    }

  }

  .md-virtual-repeat-container{

    .md-virtual-repeat-offsetter{
      bottom: 0;
    }

    .media-tile{

      cursor: pointer;
      padding: 4px 0;
      margin: 0;

      &.selected{
        background: #95989a !important;
        color: white;
      }

      &:hover{
        background: #f3f3f3;
      }

      md-icon{
        color: #7e7d7d;
      }

      .selector{
        min-width: 20px;
        max-width: 20px;
        margin-left: 10px;
      }

      .preview{
        min-width: 50px;
        max-width: 50px;
        min-height: 50px;
        max-height: 50px;
        margin: 0;
        margin-left: 10px;

        background: rgb(232, 231, 231);
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
      }

      .info{
        white-space: nowrap;
        .title{
          font-size: 1.1em;
        }
        .description{
          font-size: 0.9em;
          color: #808080;
          background: #ececec;
          padding: 4px 10px;
          padding-left: 2px;
          border-radius: 3px;
          .entry{
            &:before{
              content: " ";
              width: 8px;
              height: 8px;
              background: color-primary;
              margin: 0 7px;
              border-radius: 100%;
              display: inline-block;
            }
          }
          .highlighted{
            font-weight: bold;
            color: black;
          }
        }
      }

      .toolset{
        height: 20px;

        md-icon{
          color: #aeaeae;
        }
      }

    }

    .media-tile-footer{
      background: rgba(0, 0, 0, 0.46);
    }

    md-tabs{

      &[md-border-bottom]{
        md-tabs-wrapper{
          background: #f6f6f6;
        }
      }

      md-ink-bar{
        color: color-primary;
        background: color-primary;
        height: 3px;
      }
    }
  }
}

.dialog-file-select{
  height: 95%;
  width: 95%;

  md-toolbar{
    md-icon{
      width: 34px;
      height: 34px;
    }
  }

  md-grid-tile{
    cursor: pointer;
  }
}