skyquake/plugins/composer/src/src/styles/FileUploadsList.scss

   1
   2 /*
   3  *
   4  *   Copyright 2016 RIFT.IO Inc
   5  *
   6  *   Licensed under the Apache License, Version 2.0 (the "License");
   7  *   you may not use this file except in compliance with the License.
   8  *   You may obtain a copy of the License at
   9  *
  10  *       http://www.apache.org/licenses/LICENSE-2.0
  11  *
  12  *   Unless required by applicable law or agreed to in writing, software
  13  *   distributed under the License is distributed on an "AS IS" BASIS,
  14  *   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  15  *   See the License for the specific language governing permissions and
  16  *   limitations under the License.
  17  *
  18  */
  19
  20 .FileUploadList {
  21         overflow: hidden;
  22         position: absolute;
  23         top: 0;
  24         right: 0;
  25         bottom: 0;
  26         left: 0;
  27         >.items {
  28                 position: absolute;
  29                 top: 0;
  30                 right: 0;
  31                 bottom: 0;
  32                 left: 0;
  33                 margin: 4px;
  34                 border: 1px solid transparent;
  35                 padding: 4px;
  36                 white-space: nowrap;
  37                 overflow: auto;
  38                 -ms-overflow-style: -ms-autohiding-scrollbar;
  39                 -ms-overflow-style: none;
  40                 display: flex;
  41                 flex-wrap: wrap;
  42                 >.item {
  43                         overflow: hidden;
  44                         display: inline-block;
  45                         position: relative;
  46                         font-size: 0.5em;
  47                         height: 40px;
  48                         min-width: 260px;
  49                         max-width: 260px;
  50                         margin: 0;
  51                         border-radius: 8px;
  52                         border: 1px solid white;
  53                         padding: 4px 8px;
  54                         color: #D9D9D9;
  55                         font-weight: 100;
  56                         font-style: normal;
  57                         background-color: rgba(92, 92, 92, 0.86);
  58                         &.-error {
  59                                 background-color: darkred;
  60                         }
  61                         &.-success {
  62                                 background-color: darkgreen;
  63                         }
  64                         h2 {
  65                                 padding-left: 25px;
  66                         }
  67                         img {
  68                                 width: 25px;
  69                                 height: 25px;
  70                                 position: absolute;
  71                                 top: 4px;
  72                                 left:5px;
  73                         }
  74                         span {
  75                                 display: none;
  76                                 padding-left: 25px;
  77                         }
  78                         em {
  79                                 display: none;
  80                                 color: #3C0808;
  81                                 font-weight: 100;
  82                                 margin-right: 4px;
  83                         }
  84                         var {
  85                                 font-family: monospace, serif;
  86                         }
  87                         .file-progress {
  88                                 display: block;
  89                         }
  90                         .file-progress-indicator {
  91                                 width: 100%;
  92                                 margin: 3px;
  93                                 border: 1px solid rgba(81, 102, 147, 0.87);
  94                                 border-radius: 3px;
  95                                 padding: 0;
  96                                 height: 3px;
  97                                 background-color: white;
  98                         }
  99                         .file-progress-indicator-value {
 100                                 height: 1px;
 101                                 border-radius: 3px;
 102                                 background-color: #64F106;
 103                         }
 104                         .file-preview {
 105                                 display: block;
 106                                 em {
 107                                         display: none;
 108                                 }
 109                         }
 110                         .file-error {
 111                                 display: block;
 112                                 position: absolute;
 113                                 z-index: 99;
 114                                 background-color: black;
 115                                 top: 18px;
 116                                 left: 30px;
 117                                 right: 10px;
 118                                 border-radius: 3px;
 119                                 padding: 1px 4px !important;
 120                         }
 121                         .file-success {
 122                                 display: block;
 123                                 position: absolute;
 124                                 z-index: 99;
 125                                 background-color: black;
 126                                 top: 18px;
 127                                 left: 30px;
 128                                 right: 10px;
 129                                 border-radius: 3px;
 130                                 padding: 1px 4px !important;
 131                         }
 132                 }
 133         }
 134 }