skyquake/plugins/composer/src/src/components/filemanager/FileMananger.scss

   1 /*
   2  *
   3  *   Copyright 2016 RIFT.IO Inc
   4  *
   5  *   Licensed under the Apache License, Version 2.0 (the "License");
   6  *   you may not use this file except in compliance with the License.
   7  *   You may obtain a copy of the License at
   8  *
   9  *       http://www.apache.org/licenses/LICENSE-2.0
  10  *
  11  *   Unless required by applicable law or agreed to in writing, software
  12  *   distributed under the License is distributed on an "AS IS" BASIS,
  13  *   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  14  *   See the License for the specific language governing permissions and
  15  *   limitations under the License.
  16  *
  17  */
  18
  19 @import 'style/_colors.scss';
  20
  21 .FileManager {
  22     width:600px;
  23     .skyquakePanel {
  24         display:block;
  25         -ms-flex:0;
  26             flex:0;
  27         &-wrapper {
  28             height:auto;
  29         }
  30         &-body {
  31             padding: 0.5rem;
  32         }
  33     }
  34     .addFileSection {
  35         background:$gray;
  36         margin:1rem 0;
  37         &-body {
  38             padding-bottom: 1rem;
  39         }
  40         .inputSection {
  41             display:-ms-flexbox;
  42             display:flex;
  43             -ms-flex-align: end;
  44             align-items: flex-end;
  45             padding:0 0 0 0.5rem;
  46             margin:0.5rem 0;
  47             .sqTextInput {
  48                 margin-bottom:0rem;
  49                 input {
  50                     font-size:10px;
  51                     height:auto;
  52                 }
  53             }
  54             &:last-child {
  55             }
  56         }
  57         .ComposerAppAddFile {
  58             span {
  59                 color: black;
  60             }
  61         }
  62     }
  63     .tree-view {
  64         margin:0 0.5rem;
  65         margin-bottom: 0.5rem;
  66          padding:0 0.5rem;
  67          /* border-top:1px solid $gray-lightest;*/
  68          /* border-left:0.5px solid $gray-lightest;*
  69         /* border-bottom:1px solid white;*/
  70         /* border: 1px solid rgba(143, 143, 143, 0.5);*/
  71         /* background-color: rgba(147, 161, 161, 0.5);*/
  72         border-radius: 3px;
  73         font-size:10px;
  74         &_item {
  75             padding:0.5rem;
  76             display:-ms-flexbox;
  77             display:flex;
  78             -ms-flex-align: center;
  79             align-items: center;
  80             color: #586e75;
  81             text-transform: uppercase;
  82             font-size:10px;
  83             background:white;
  84         }
  85         &_children {
  86             margin-left:0;
  87             /* background: $gray;*/
  88             padding: 0.125rem;
  89             margin-bottom: 0.5rem;
  90             /* background: $gray-light;*/
  91             &-collapsed {
  92                 height: 0px;
  93                 overflow: hidden;
  94             }
  95         }
  96         &_arrow{
  97             height: 2rem;
  98             width: 2rem;
  99             display: -ms-flexbox;
 100             display: flex;
 101             -ms-flex-pack: center;
 102             justify-content: center;
 103             -ms-flex-align: center;
 104             align-items: center;
 105
 106             margin-right: 6px;
 107
 108             font-size: 1.25rem;
 109             cursor: pointer;
 110             -webkit-user-select: none;
 111             -moz-user-select: none;
 112             -ms-user-select: none;
 113             user-select: none;
 114
 115             display:none;
 116
 117             &:after {
 118                 content: '\25BE';
 119             }
 120             &-collapsed {
 121                 transform: rotate(-90deg);
 122             }
 123         }
 124     }
 125     .folder {
 126         /* margin:0.5rem 0.5rem;*/
 127         /* padding: 0.5rem;*/
 128         /* background-color: rgba(238, 232, 213, 0.33);*/
 129         /* border-radius:3px;*/
 130     }
 131     .nested {
 132         & + div {
 133             & > div:not(.nested-alt):not(.folder) {
 134                 &:nth-child(even) {
 135                     background: $gray-light;
 136                 }
 137                 &:nth-child(odd) {
 138                     background: $gray;
 139                 }
 140             }
 141         }
 142     }
 143     .file {
 144         margin: 0.5rem 0;
 145         -ms-flex-pack:justify;
 146         justify-content:space-between;
 147         &-section {
 148             display:-ms-flexbox;
 149             display:flex;
 150             -ms-flex-pack:justify;
 151                 justify-content:space-between;
 152             &>div {
 153                 margin:0 0.5rem;
 154             }
 155         }
 156         &-info{
 157             display: -ms-flexbox;
 158             display: flex;
 159             -ms-flex-pack: center;
 160                 justify-content: center;
 161             -ms-flex-align: center;
 162                 align-items: center;
 163         }
 164         &-status {
 165             padding-right:0.5rem;
 166         }
 167         &-name {
 168             color:#586e75;
 169         }
 170     }
 171 }