skyquake/plugins/composer/src/src/styles/CatalogItems.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 @import "ColorGroups";
  21
  22 %type-header {
  23     height:0.8rem;
  24     width:100%;
  25     color:white;
  26     font-size:0.6rem;
  27     padding-left: 1.5rem;
  28     text-transform:uppercase;
  29         line-height: 0.9rem;
  30 }
  31
  32 .CatalogItems {
  33         padding:0;
  34         margin: 0;
  35         position: absolute;
  36         margin-top: 40px;
  37         overflow-y: auto;
  38         top: -6px;
  39         right: 0;
  40         bottom: 0;
  41         left: 0;
  42         .nsd {
  43                 .type-header {
  44                         @extend %type-header;
  45                         background:$nsd-primary-color;
  46                 }
  47         }
  48         .vnfd {
  49                 .type-header {
  50                         @extend %type-header;
  51                         background:$vnfd-primary-color;
  52                 }
  53         }
  54         ul {
  55                 list-style: none;
  56                 margin: 0;
  57                 border: 0;
  58                 padding: 10px;
  59                 display: flex;
  60                 flex-wrap: wrap;
  61                 flex-direction: column;
  62         }
  63         li {
  64                 position: relative;
  65                 width: 100%;
  66                 min-width: 280px;
  67                 max-width: 400px;
  68                 margin: 1px;
  69                 border: 5px;
  70                 padding: 4px 8px;
  71         }
  72         li > div {
  73                 &.-is-open-for-edit-indicator {
  74                         position: absolute;
  75                         top: 10px;
  76                         left: -4px;
  77                         bottom: 10px;
  78                         width: 8px;
  79                         border-radius: 2px;
  80                         background-color: #4d8fb3;
  81                 }
  82
  83         }
  84         div.catalog-item {
  85                 cursor: pointer;
  86                 display: block;
  87                 overflow: hidden;
  88                 position: relative;
  89                 width: 100%;
  90                 height:auto;
  91                 min-height: 70px;
  92                 margin: 0;
  93                 padding: 0;
  94                 border-radius: 5px;
  95                 border: 1px solid #e5e5e5;
  96                 font-size: 14px;
  97                 font-weight: 400;
  98                 font-style: normal;
  99                 background-color: #ffffff;
 100                 -webkit-user-select: none;
 101                 -moz-user-select: none;
 102                 -ms-user-select: none;
 103                 user-select: none;
 104
 105                 &:hover {
 106                         background-color: #7E9BC1;
 107                         dl {
 108                                 dd {
 109                                         color: #ffffff;
 110                                 }
 111                         }
 112                 }
 113                 &:active, &:visited {
 114                         background-color:#4C5E74;
 115                 }
 116                 &.-is-modified {
 117
 118                 }
 119                 &.-is-deleted {
 120                         display: none;
 121                 }
 122
 123                 .-is-modified-indicator {
 124                         position: absolute;
 125                         top: -20px;
 126                         right: -20px;
 127                         width: 40px;
 128                         height: 40px;
 129                         background-color: #FF5F5F;
 130                         transform: rotate(-45deg);
 131                 }
 132
 133                 dl {
 134                         margin: 0;
 135                         padding: 3px 0 0 80px;
 136                         position: relative;
 137                         min-height: 70px;
 138                         dt {
 139                                 margin: 0;
 140                                 padding: 0;
 141                                 font-size: 14px;
 142                                 font-weight: 400;
 143                                 white-space: nowrap;
 144                         }
 145                         dd {
 146                                 display: block;
 147                                 padding:0;
 148                                 color:#aeaeae;
 149                                 font-size: 10px;
 150                                 font-style: normal;
 151                         }
 152                         dd.logo {
 153                                 position: absolute;
 154                                 top:0;
 155                                 left: 5px;
 156                                 bottom: -4px;
 157                                 width: 70px;
 158                                 margin: 0;
 159                                 border: 0;
 160                                 padding: 0;
 161                                 overflow: hidden;
 162                                 img.logo {
 163                                         margin: 0;
 164                                         border: 0;
 165                                         padding: 0;
 166                                         width: 50px;
 167                                         /*height: 50px; logos must scale height to fit a 50x50 pixel box otherwise they will clip*/
 168                                         position: absolute;
 169                                         top: 50%;
 170                                         left: 50%;
 171                                         transform: translate(-50%, -50%);
 172                                 }
 173                         }
 174                 }
 175
 176                 &:first-of-type {
 177                         margin-top: 0;
 178                 }
 179
 180                 span.vendor,
 181                 span.version {
 182                         display: inline-block;
 183                         padding-right: 4px;
 184                 }
 185                 span.vendor:after {
 186                         content: ' /';
 187                 }
 188                 span.version:before {
 189                         content: ' v';
 190                 }
 191                 span.description {
 192                         display: none;
 193                 }
 194         }
 195 }