From 12896bd23eeba79884245c1c29fdc568cf21a7fa Mon Sep 17 00:00:00 2001
From: Christopher Speller <crspeller@gmail.com>
Date: Mon, 14 Mar 2016 08:50:46 -0400
Subject: Converting to Webpack. Stage 1.

---
 webapp/sass/components/_files.scss | 294 +++++++++++++++++++++++++++++++++++++
 1 file changed, 294 insertions(+)
 create mode 100644 webapp/sass/components/_files.scss

(limited to 'webapp/sass/components/_files.scss')

diff --git a/webapp/sass/components/_files.scss b/webapp/sass/components/_files.scss
new file mode 100644
index 000000000..b9e2b5f7d
--- /dev/null
+++ b/webapp/sass/components/_files.scss
@@ -0,0 +1,294 @@
+@charset 'UTF-8';
+
+.file-preview__container {
+    position: relative;
+    margin: 1px 0 10px;
+    width: 100%;
+    max-height: 100px;
+    height: 100px;
+    white-space: nowrap;
+    overflow-x: auto;
+    overflow-y: hidden;
+}
+
+.file-preview {
+    display: inline-block;
+    width: 120px;
+    height: 100px;
+    margin: 0 0 0 10px;
+    position: relative;
+    border: 1px solid #ddd;
+    @include clearfix;
+
+    &:hover .file-preview__remove:after {
+        @include opacity(1);
+    }
+
+    &:first-child {
+        margin-left: 0;
+    }
+
+    .spinner {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        margin-left: -16px;
+        margin-top: -16px;
+        width: 32px;
+        height: 32px;
+    }
+}
+
+.file-preview__image {
+    display: block;
+    height: auto;
+    max-width: 100%;
+}
+
+.file-preview__remove {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    left: 0;
+    top: 0;
+
+    &:after {
+        background: rgba(0, 0, 0, .4);
+        content: '';
+        height: 100%;
+        left: 0;
+        opacity: 0;
+        position: absolute;
+        top: 0;
+        width: 100%;
+        @include opacity(0);
+    }
+
+    i {
+        top: 5px;
+        right: 5px;
+        position: absolute;
+        color: #fff;
+        cursor: pointer;
+        z-index: 5;
+        opacity: inherit;
+        text-shadow: 0 0px 3px #444;
+        text-shadow: 0 0px 3px rgba(0, 0, 0, .7);
+    }
+}
+
+.image-comment {
+    background-position: left top;
+    background-repeat: no-repeat;
+    width: 300px;
+    height: 300px;
+}
+
+
+.file-icon {
+    width: 100%;
+    height: 100%;
+
+    &.audio {
+        @include file-icon('../images/icons/audio.png');
+    }
+
+    &.video {
+        @include file-icon('../images/icons/video.png');
+    }
+
+    &.ppt {
+        @include file-icon('../images/icons/ppt.png');
+    }
+
+    &.generic {
+        @include file-icon('../images/icons/generic.png');
+    }
+
+    &.code {
+        @include file-icon('../images/icons/code.png');
+    }
+
+    &.excel {
+        @include file-icon('../images/icons/excel.png');
+    }
+
+    &.word {
+        @include file-icon('../images/icons/word.png');
+    }
+
+    &.pdf {
+        @include file-icon('../images/icons/pdf.png');
+    }
+
+    &.patch {
+        @include file-icon('../images/icons/patch.png');
+    }
+
+    &.image {
+        @include file-icon('../images/icons/image.png');
+    }
+}
+
+.post-image__column {
+    position: relative;
+    width: 240px;
+    height: 100px;
+    float: left;
+    margin: 5px 10px 5px 0;
+    border: 1px solid lightgrey;
+
+    a {
+        text-decoration: none;
+        color: grey;
+    }
+}
+
+.post-image__load {
+    height: 100%;
+    width: 100%;
+    background-size: 20px 20px;
+    background-repeat: no-repeat;
+    background-position: center;
+    background-image: url('~images/load.gif');
+}
+
+.post-image {
+    width: 100%;
+    height: 100%;
+    background-color: #fff;
+    background-repeat: no-repeat;
+    overflow: hidden;
+    position: relative;
+    text-align: center;
+
+    &.small {
+        background-position: center;
+    }
+
+    &.normal {
+        background-position: top left;
+    }
+
+    .spinner.file__loading {
+        position: absolute;
+        left: 50%;
+        margin-left: -16px;
+        top: 50%;
+        margin-top: -16px;
+    }
+
+    .file__loaded {
+        max-width: initial;
+        &.landscape,
+        &.quadrat {
+            height: 100px;
+        }
+        &.portrait {
+            width: 120px;
+        }
+    }
+
+    &:hover .file-playback__controls.stop {
+        @include opacity(1);
+    }
+}
+
+.post-image__thumbnail {
+    float: left;
+    width: 50%;
+    height: 100%;
+    cursor: zoom-in;
+    cursor: -webkit-zoom-in;
+}
+
+.post-image__details {
+    float: left;
+    @include clearfix;
+    word-break: break-word;
+    width: 50%;
+    height: 100%;
+    background: white;
+    border-left: 1px solid #ddd;
+    font-size: 13px;
+    padding: 7px;
+    color: #333;
+
+    .post-image__name {
+        margin-bottom: 3px;
+        display: block;
+    }
+
+    .post-image__download {
+        display: inline-block;
+        padding-right: 7px;
+        cursor: pointer;
+        @include opacity(.7);
+    }
+
+    .post-image__type {
+        @include opacity(.6);
+    }
+
+    .post-image__size {
+        margin-left: 4px;
+        @include opacity(.6);
+    }
+}
+
+.file-details__container {
+    @include display-flex;
+    display: -ms-flexbox;
+
+    .file-details {
+        width: 320px;
+        height: 270px;
+        padding: 14px;
+        text-align: left;
+        vertical-align: top;
+
+        .file-details__name {
+            color: #333;
+            font-size: 16px;
+        }
+
+        .file-details__info {
+            color: grey;
+        }
+    }
+    .file-details__preview {
+        width: 320px;
+        height: 270px;
+        border-right: 1px solid #ddd;
+        vertical-align: center;
+
+        // helper to center the image icon in the preview window
+        .file-details__preview-helper {
+            height: 100%;
+            display: inline-block;
+            vertical-align: middle;
+        }
+    }
+}
+
+.file-playback__controls {
+    position: absolute;
+    right: 5px;
+    bottom: 0;
+    font-size: 22px;
+    cursor: pointer;
+    z-index: 2;
+    -webkit-transition: opacity .6s;
+    -moz-transition: opacity .6s;
+    -o-transition: opacity .6s;
+    transition: opacity .6s;
+
+    &.stop {
+        @include opacity(0);
+    }
+}
+
+.view-image__loading {
+    background: black;
+    min-height: 100px;
+}
-- 
cgit v1.2.3-1-g7c22