From e214aae719c10953c4c3a7949c9bd02d6983b045 Mon Sep 17 00:00:00 2001 From: Asaad Mahmood Date: Mon, 14 Mar 2016 22:35:57 +0500 Subject: PLT-963 - Improving scss structure --- web/sass-files/sass/partials/_files.scss | 264 ------------------------------- 1 file changed, 264 deletions(-) delete mode 100644 web/sass-files/sass/partials/_files.scss (limited to 'web/sass-files/sass/partials/_files.scss') diff --git a/web/sass-files/sass/partials/_files.scss b/web/sass-files/sass/partials/_files.scss deleted file mode 100644 index 62e067437..000000000 --- a/web/sass-files/sass/partials/_files.scss +++ /dev/null @@ -1,264 +0,0 @@ -@charset "UTF-8"; - -.preview-container { - position: relative; - margin: 1px 0 10px; - width: 100%; - max-height: 100px; - height: 100px; - white-space: nowrap; - overflow-x: auto; - overflow-y: hidden; - .preview-div { - display: inline-block; - width: 120px; - height: 100px; - margin: 0 0 0 5px; - vertical-align: top; - position: relative; - border: 1px solid #DDD; - @include clearfix; - &:hover .remove-preview: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; - } - } - .preview-img { - display: block; - height: auto; - max-width: 100%; - } - .remove-preview { - position: absolute; - width: 100%; - height: 100%; - left: 0; - top: 0; - &:after { - background: rgba(0, 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, 0.7); - } - } -} - -.image-comment { - background-position:left top; - background-repeat:no-repeat; - width:300px; - height:300px; -} - -@mixin file-icon($path) { - background: #fff url($path); - background-position: center; - background-repeat: no-repeat; - @include background-size(60px auto); -} -.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; - .post__load { - height: 100%; - width: 100%; - background-size: 20px 20px; - background-repeat: no-repeat; - background-position: center; - } - .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(0.7); - } - .post-image__type { - @include opacity(0.6); - } - .post-image__size { - margin-left: 4px; - @include opacity(0.6); - } - } - a { - text-decoration: none; - color: grey; - } -} - -.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 0.6s; - -moz-transition: opacity 0.6s; - -o-transition: opacity 0.6s; - transition: opacity 0.6s; - - &.stop { - @include opacity(0); - } -} - -.view-image__loading { - background: black; - min-height: 100px; -} -- cgit v1.2.3-1-g7c22