skyquake/plugins/composer/src/src/styles/CatalogPackageManager.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 @import 'variables';
  20
  21 .CatalogPackageManager {
  22         overflow: hidden;
  23         > .items {
  24                 margin: 4px;
  25                 border: 1px solid transparent;
  26                 padding: 4px;
  27                 white-space: nowrap;
  28                 overflow: auto;
  29                 -ms-overflow-style: -ms-autohiding-scrollbar;
  30                 -ms-overflow-style: none;
  31                 display: flex;
  32                 flex-wrap: wrap;
  33                 align-items: flex-start;
  34                 align-content: flex-start;
  35                 justify-content: flex-start;
  36
  37                 > .item {
  38                         overflow: hidden;
  39                         position: relative;
  40                         font-size: 12px;
  41                         font-weight: 200;
  42                         font-style: normal;
  43                         height: 40px;
  44                         width: 100%;
  45                         max-width: 400px;
  46                         margin: 5px;
  47                         border-radius: 5px;
  48                         padding: 4px 8px;
  49                         color: #3a3a3a;
  50                         background-color: #ffffff;
  51
  52                         &.-error {
  53                                 background-color: rgba(139, 0, 0, 0.1);
  54                         }
  55                         &.-success {
  56                                 background-color: rgba(0, 139, 0, 0.1);
  57                         }
  58
  59                         h2 {
  60                                 font-size:12px;
  61                                 font-weight: 400;
  62                                 padding-top: 0;
  63                                 padding-bottom: 0;
  64                                 padding-left: 30px;
  65                         }
  66                         img {
  67                                 width: 25px;
  68                                 height: 25px;
  69                                 position: absolute;
  70                                 top: 4px;
  71                                 left: 5px;
  72                         }
  73                         .message {
  74                                 padding-left: 30px;
  75                         }
  76                         span {
  77                                 display: inline-block;
  78                         }
  79                         em {
  80                                 display: none;
  81                                 color: #3C0808;
  82                                 font-weight: 100;
  83                                 margin-right: 4px;
  84                         }
  85                         var {
  86                                 font-family: monospace, serif;
  87                         }
  88                         .file-progress {
  89                                 display: block;
  90                         }
  91                         .file-progress-indicator {
  92                                 position: absolute;
  93                                 left: 30px;
  94                                 right: 3px;
  95                                 bottom: 0;
  96                                 margin: 3px;
  97                                 border: 1px solid rgba(81, 102, 147, 0.87);
  98                                 border-radius: 3px;
  99                                 padding: 0;
 100                                 height: 3px;
 101                                 background-color: white;
 102                         }
 103                         .file-progress-indicator-value {
 104                                 height: 1px;
 105                                 border-radius: 3px;
 106                                 background-color: #64F106;
 107                         }
 108                         .file-download {
 109                         }
 110                         .file-download-link {
 111                                 display: inline;
 112                                 margin-left: 24px;
 113                                 padding: 3px;
 114                         }
 115                         .file-preview {
 116                                 display: block;
 117                                 em {
 118                                         display: none;
 119                                 }
 120                         }
 121                         .file-error {
 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                         .file-success {
 133                                 display: block;
 134                                 position: absolute;
 135                                 z-index: 99;
 136                                 background-color: black;
 137                                 top: 18px;
 138                                 left: 30px;
 139                                 right: 10px;
 140                                 border-radius: 3px;
 141                                 padding: 1px 4px !important;
 142                         }
 143                         .item-actions {
 144                                 background-color: rgba(255,255,255,.5);
 145                                 display: none;
 146                                 position: absolute;
 147                                 top: 0;
 148                                 right: 0;
 149                                 bottom: 0;
 150                                 padding: 4px;
 151                                 text-align: right;
 152                                 .Button {
 153                                         &:hover {
 154                                                 background-color: transparent;
 155                                                 border-color: transparent;
 156                                         }
 157                                 }
 158                         }
 159                         &:hover .item-actions {
 160                                 display: block;
 161                         }
 162                 }
 163         }
 164 }