openecomp-ui/resources/scss/modules/_vspHeatSetup.scss

   1 @mixin modules-and-artifacts-list-items {
   2         background-color: $tlv-gray;
   3         margin-bottom: 12px;
   4         border: 1px solid $light-gray;
   5         border-left-width: 18px;
   6         border-left-color: $blue;
   7         display: flex;
   8         flex-direction: column;
   9         justify-content: space-between;
  10   padding: 10px 20px 0 20px;
  11 }
  12
  13 .heat-setup-view {
  14         margin-top: 20px;
  15         display: flex;
  16         justify-content: space-between;
  17   padding: 0 60px 0 36px;
  18
  19         .heat-setup-view-modules-and-artifacts {
  20                 margin-right: 20px;
  21                 flex: 1;
  22                 .heat-setup-module-icon {
  23                   margin: 0 6px 0 0;
  24                   position: relative;
  25                   top: -2px;
  26                 }
  27                 .modules-list-wrapper {
  28                         padding-bottom: 20px;
  29                         margin-bottom: 20px;
  30                         border-bottom: 1px solid $tlv-light-gray;
  31                         ul {
  32                                 .undefined-dragging {
  33                                         opacity: 0.5;
  34                                 }
  35                                 .modules-list-item-selectors {
  36                                         display: flex;
  37                                         justify-content: space-between;
  38                                         flex-wrap: wrap;
  39
  40                                         .Select-value-label {
  41                                                 @include ellipsis(85%);
  42                                         }
  43
  44                                         .validation-input-wrapper {
  45                                                 flex-basis: 48%;
  46                                         }
  47
  48                                         .control-label {
  49                                                 margin-bottom: 4px;
  50                                         }
  51
  52                                         .form-group {
  53                                                 margin-bottom: 12px;
  54                                         }
  55                                 }
  56                         }
  57
  58                         .modules-list-controllers {
  59                                 text-align: right;
  60                                 .btn-link {
  61                                         &[disabled] {
  62                                                 color: $gray;
  63                                         }
  64                                         @extend .body-1;
  65                                         color: $blue;
  66                                         &:last-child {
  67                                                 padding-right: 0;
  68                                         }
  69                                         &:hover {
  70                                                 color: $dark-blue;
  71                                                 text-decoration: none;
  72                                         }
  73                                 }
  74                         }
  75
  76                         .modules-list-item-controllers {
  77                                 display: flex;
  78                                 justify-content: space-between;
  79                                 margin-bottom: 7px;
  80
  81                                 .btn {
  82                                         min-width: 0;
  83                                 }
  84
  85                                 .svg-icon-wrapper.trashO {
  86                                   .svg-icon {
  87                                         fill: $dark-gray;
  88                                         height: 18px;
  89                                         width: 18px;
  90                                         &:hover {
  91                                           fill: $black;
  92                                         }
  93                                   }
  94                                 }
  95                                 .module-title-by-type {
  96                                         @extend .heading-5-semibold;
  97                                         margin-right: 3px;
  98                                 }
  99                                 .modules-list-item-filename {
 100                                         display: flex;
 101                                         align-items: center;
 102
 103                                         .svg-icon-wrapper.pencil {
 104                                                 .svg-icon {
 105                                                   height: 15px;
 106                                                   width: 15px;
 107                                                 }
 108                                                 margin-left: 3px;
 109                                                 opacity: 0;
 110                                         }
 111
 112                                         .filename-text {
 113                                                 @extend .heading-5-semibold;
 114
 115                                         }
 116
 117                                         .text-and-icon {
 118                                                 padding: 5px;
 119                                                 border: 1px solid transparent;
 120                                                 display: flex;
 121                                                 align-items: center;
 122                                                 height: 35px;
 123                                                 &.in-edit {
 124                                                         padding: 0;
 125                                                         .name-edit {
 126                                                                 padding: 4px;
 127                                                                 @extend .heading-5-semibold;
 128                                                                 height: 100%;
 129                                                                 border: 1px solid $light-gray;
 130                                                                 width: 400px;
 131                                                         }
 132                                                 }
 133                                         }
 134
 135                                         input[disabled] {
 136                                                 border: none;
 137                                         }
 138                                         &:hover {
 139                                                 .text-and-icon {
 140                                                         border-color: $light-gray;
 141                                                         background-color: $white;
 142
 143                                                         &.in-edit {
 144                                                                 border-color: transparent;
 145                                                         }
 146                                                 }
 147                                                 .svg-icon-wrapper.pencil {
 148                                                         margin-left: 10px;
 149                                                         opacity: 1;
 150                                                         .svg-icon {
 151                                                           stroke: $dark-gray;
 152                                                           &:hover {
 153                                                            stroke: $black;
 154                                                           }
 155                                                         }
 156                                                 }
 157                                         }
 158                                 }
 159                         }
 160
 161                         .modules-list-item {
 162                                 @include modules-and-artifacts-list-items;
 163                                 position: relative;
 164                                 .Select-option {
 165                                         @extend .body-1;
 166                                         &.is-selected {
 167                                                 @extend .body-1-semibold;
 168                                                 background-color: $white;
 169                                         }
 170                                         &.is-focused {
 171                                                 background-color: $blue;
 172                                                 color: $white;
 173                                         }
 174                                 }
 175                                 .add-or-delete-volumes {
 176                                         .svg-icon-wrapper {
 177                                                 margin-right: 8px;
 178                                                 .svg-icon {
 179                                                         height: 10px;
 180                                                         width: 10px;
 181                                                         fill: $blue;
 182                                                 }
 183                                         }
 184                                         cursor: pointer;
 185                                         color: $blue;
 186                                         margin-bottom: 11px;
 187                                         &:hover {
 188                                                 color: $dark-blue;
 189                                                 .svg-icon {
 190                                                         fill: $dark-blue;
 191                                                 }
 192                                         }
 193                                 }
 194                                 &:before {
 195                                         content: "\00B7\00B7\00B7\00B7\00B7\00B7";
 196                                         color: $white;
 197                                         position: absolute;
 198                                         left: -27px;
 199                                         top: 56%;
 200                                         font-size: 27px;
 201                                         width: 75px;
 202                                         @include transform-rotate(90);
 203                                         height: 0;
 204                                         letter-spacing: 1px;
 205                                 }
 206                         }
 207                 }
 208
 209                 .artifact-files {
 210                         @include modules-and-artifacts-list-items;
 211                         margin-top: 20px;
 212
 213                         &.nested {
 214                                 .nested-list {
 215                                         display: flex;
 216                                         flex-wrap: wrap;
 217                                         margin-bottom: 18px;
 218                                 }
 219
 220                                 .nested-list-item {
 221                                         border-radius: 15px;
 222                                         background-color: $tlv-light-gray;
 223                                         padding: 4px 15px;
 224                                         margin: 2px 10px 2px 0;
 225                                 }
 226                         }
 227
 228                         .artifact-files-header {
 229                                 @extend .heading-5-semibold;
 230                                 display: flex;
 231                                 margin-bottom: 10px;
 232                                 justify-content: space-between;
 233                                 .image-icon.artifacts {
 234                                         margin-right: 10px;
 235                                 }
 236
 237                                 span {
 238                                         display: flex;
 239                                 }
 240
 241                                 .add-all-unassigned {
 242                                         @extend .body-1;
 243                                         margin-bottom: 0;
 244                                         color: $blue;
 245                                         cursor: pointer;
 246                                         &:hover {
 247                                                 color: $dark-blue;
 248                                         }
 249                                 }
 250                         }
 251                 }
 252         }
 253
 254         .unassigned-files {
 255                 margin-top: 30px;
 256                 border: 1px solid $light-gray;
 257                 background-color: $white;
 258                 height: 250px;
 259                 width: 250px;
 260
 261                 // Will work in chrome from chrome 56
 262                 position: sticky;
 263                 top: 10px;
 264
 265                 .unassigned-files-title {
 266                         @extend .heading-5-semibold;
 267                         background-color: $tlv-gray;
 268                         padding: 11px 0 9px 15px;
 269                 }
 270
 271                 .unassigned-files-list {
 272                         height: 207px;
 273         overflow-y: auto;
 274         padding-bottom: 5px;
 275
 276                         .go-to-validation-button-wrapper {
 277                                 display: flex;
 278                                 flex-direction: column;
 279                                 justify-content: center;
 280                                 align-items: center;
 281                                 margin-top: 70px;
 282                                 .all-files-assigned {
 283                                         @extend .heading-4;
 284                                         margin-bottom: 10px;
 285                                 }
 286                                 .link {
 287                                         color: $blue;
 288                                         cursor: pointer;
 289                                         display: flex;
 290                                         align-items: center;
 291                                         margin-bottom: 10px;
 292                                         .svg-icon-wrapper.angleRight {
 293                                           .svg-icon {
 294                                                 height: 10px;
 295                                                 width: 10px;
 296                                                 margin-left: 7px;
 297                                                 fill: $blue;
 298                                           }
 299                                         }
 300                                         &:hover {
 301                                                 color: $dark-blue;
 302                                                 .svg-icon-wrapper.angleRight {
 303                                                   .svg-icon {
 304                                                         fill: $dark-blue;
 305                                                   }
 306                                                 }
 307                                         }
 308                                 }
 309                         }
 310
 311                         .unassigned-files-list-item {
 312                                 @include ellipsis();
 313                                 border-bottom: 1px solid $tlv-light-gray;
 314                                 padding: 0 5px 5px 15px;
 315                                 &:first-child {
 316                                         padding-top: 5px;
 317                                 }
 318                                 &:last-child {
 319                                         border-bottom: none;
 320                                         padding-bottom: 0;
 321                                 }
 322                         }
 323                 }
 324         }
 325 }