@import "../../../../shared/nekumo/variables";


#file-manager {
    //.folders, .files {
    //    justify-content: center;
    //}


    /*
      We're using CSS transitions for when
      the enter and move events are triggered
      for the element that has the tr
      class
    */
    .entry.ng-enter, .entry.ng-move {
        transition: all 0.5s linear;
        opacity: 0;

        .bottom {
            transition: all 0.5s linear;
        }
        // background: yellow;
    }

    /*
     The ng-enter-active and ng-move-active
     are where the transition destination properties
     are set so that the animation knows what to
     animate.
    */
    .entry.ng-enter.ng-enter-active,
    .entry.ng-move.ng-move-active {
        // opacity: 1;
        animation: 0.5s greenShow;

        .bottom {
            animation: 0.5s greenShow;
        }
    }

    /*
      We're using CSS keyframe animations for when
      the leave event is triggered for the element
      that has the tr class
    */
    .entry.ng-leave {
        animation: 0.6s fadeOut;

        .bottom {
            animation: 0.6s fadeOut;
            background: #e79c9c;
        }
    }

    .grid-view {
        padding: 32px 24px 24px 24px;

        .item {
            margin: 8px;
            width: 250px;
            border-radius: 2px;
            overflow: hidden;
            cursor: pointer;

            &.folder {
                height: 64px;
                padding: 8px 16px;

                .title {

                    md-icon {
                        margin-right: 16px;
                    }

                    .name {
                        font-size: 15px;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                        overflow: hidden;
                    }
                }

                .show-details {

                    .md-icon-button {
                        margin: 0;
                    }
                }
            }

            &.file {

                .preview {
                    background: #FFFFFF;
                    background-position: center;
                    background-size: cover;
                    // padding: 16px;
                    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
                    height: 143px;
                    width: 100%;

                    &.background-folder {
                        background-color: $folder-color;
                    }
                    &.background-document {
                        background-color: $document-color;
                    }
                    &.background-code {
                        background-color: $code-color;
                    }
                    &.background-spreadsheet {
                        background-color: $spreadsheet-color;
                    }
                    &.background-image {
                        background-color: $image-color;
                    }
                    &.background-video {
                        background-color: $video-icolor;
                    }
                    &.background-pdf {
                        background-color: $pdf-icolor;
                    }
                    &.background-audio {
                        background-color: $audio-color;
                    }
                    &.background-compressed {
                        background-color: $compressed-color;
                    }
                    &.background-unknown {
                        background-color: $unknown-color;
                    }
                }


                .bottom {
                    height: 64px;
                    padding: 8px 16px;

                    .title {

                        md-icon {
                            margin-right: 16px;
                        }

                        .name {
                            font-size: 15px;
                            text-overflow: ellipsis;
                            white-space: nowrap;
                            overflow: hidden;
                        }
                    }

                    .show-details {

                        .md-icon-button {
                            margin: 0;
                        }
                    }
                }
            }
        }
    }
}