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.trash-o {
  86                                         fill: $dark-gray;
  87                                         height: 18px;
  88                                         width: 18px;
  89                                         &:hover {
  90                                                 fill: $black;
  91                                         }
  92                                 }
  93                                 .module-title-by-type {
  94                                         @extend .heading-5-medium;
  95                                         margin-right: 3px;
  96                                 }
  97                                 .modules-list-item-filename {
  98                                         display: flex;
  99                                         align-items: center;
 100
 101                                         .svg-icon.pencil {
 102                                                 height: 15px;
 103                                                 width: 15px;
 104                                                 margin-left: 3px;
 105                                                 opacity: 0;
 106                                         }
 107
 108                                         .filename-text {
 109                                                 @extend .heading-5-medium;
 110
 111                                         }
 112
 113                                         .text-and-icon {
 114                                                 padding: 5px;
 115                                                 border: 1px solid transparent;
 116                                                 display: flex;
 117                                                 align-items: center;
 118                                                 height: 35px;
 119                                                 &.in-edit {
 120                                                         padding: 0;
 121                                                         .name-edit {
 122                                                                 padding: 4px;
 123                                                                 @extend .heading-5-medium;
 124                                                                 height: 100%;
 125                                                                 border: 1px solid $light-gray;
 126                                                                 width: 400px;
 127                                                         }
 128                                                 }
 129                                         }
 130
 131                                         input[disabled] {
 132                                                 border: none;
 133                                         }
 134                                         &:hover {
 135                                                 .text-and-icon {
 136                                                         border-color: $light-gray;
 137                                                         background-color: $white;
 138
 139                                                         &.in-edit {
 140                                                                 border-color: transparent;
 141                                                         }
 142                                                 }
 143                                                 .svg-icon.pencil {
 144                                                         margin-left: 10px;
 145                                                         opacity: 1;
 146                                                         stroke: $dark-gray;
 147                                                         &:hover {
 148                                                                 stroke: $black;
 149                                                         }
 150                                                 }
 151                                         }
 152                                 }
 153                         }
 154
 155                         .modules-list-item {
 156                                 @include modules-and-artifacts-list-items;
 157                                 position: relative;
 158                                 .Select-option {
 159                                         @extend .body-1;
 160                                         &.is-selected {
 161                                                 @extend .body-1-medium;
 162                                                 background-color: $white;
 163                                         }
 164                                         &.is-focused {
 165                                                 background-color: $blue;
 166                                                 color: $white;
 167                                         }
 168                                 }
 169                                 .add-or-delete-volumes {
 170                                         .svg-icon-wrapper {
 171                                                 margin-right: 8px;
 172                                                 .svg-icon {
 173                                                         height: 10px;
 174                                                         width: 10px;
 175                                                         fill: $blue;
 176                                                 }
 177                                         }
 178                                         cursor: pointer;
 179                                         color: $blue;
 180                                         margin-bottom: 11px;
 181                                         &:hover {
 182                                                 color: $dark-blue;
 183                                                 .svg-icon {
 184                                                         fill: $dark-blue;
 185                                                 }
 186                                         }
 187                                 }
 188                                 &:before {
 189                                         content: "\00B7\00B7\00B7\00B7\00B7\00B7";
 190                                         color: $white;
 191                                         position: absolute;
 192                                         left: -27px;
 193                                         top: 56%;
 194                                         font-size: 27px;
 195                                         width: 75px;
 196                                         @include transform-rotate(90);
 197                                         height: 0;
 198                                         letter-spacing: 1px;
 199                                 }
 200                         }
 201                 }
 202
 203                 .artifact-files {
 204                         @include modules-and-artifacts-list-items;
 205                         margin-top: 20px;
 206
 207                         &.nested {
 208                                 .nested-list {
 209                                         display: flex;
 210                                         flex-wrap: wrap;
 211                                         margin-bottom: 18px;
 212                                 }
 213
 214                                 .nested-list-item {
 215                                         border-radius: 15px;
 216                                         background-color: $tlv-light-gray;
 217                                         padding: 4px 15px;
 218                                         margin: 2px 10px 2px 0;
 219                                 }
 220                         }
 221
 222                         .artifact-files-header {
 223                                 @extend .heading-5-medium;
 224                                 display: flex;
 225                                 margin-bottom: 10px;
 226                                 justify-content: space-between;
 227                                 .image-icon.artifacts {
 228                                         margin-right: 10px;
 229                                 }
 230
 231                                 span {
 232                                         display: flex;
 233                                 }
 234
 235                                 .add-all-unassigned {
 236                                         @extend .body-1;
 237                                         margin-bottom: 0;
 238                                         color: $blue;
 239                                         cursor: pointer;
 240                                         &:hover {
 241                                                 color: $dark-blue;
 242                                         }
 243                                 }
 244                         }
 245                 }
 246         }
 247
 248         .unassigned-files {
 249                 margin-top: 30px;
 250                 border: 1px solid $light-gray;
 251                 width: 25%;
 252                 background-color: $white;
 253                 height: 250px;
 254                 width: 250px;
 255
 256                 // Will work in chrome from chrome 56
 257                 position: sticky;
 258                 top: 10px;
 259
 260                 .unassigned-files-title {
 261                         @extend .heading-5-medium;
 262                         background-color: $tlv-gray;
 263                         padding: 11px 0 9px 15px;
 264                 }
 265
 266                 .unassigned-files-list {
 267                         height: 207px;
 268         overflow-y: auto;
 269         padding-bottom: 5px;
 270
 271                         .go-to-validation-button-wrapper {
 272                                 display: flex;
 273                                 flex-direction: column;
 274                                 justify-content: center;
 275                                 align-items: center;
 276                                 margin-top: 70px;
 277                                 .all-files-assigned {
 278                                         @extend .heading-4;
 279                                         margin-bottom: 10px;
 280                                 }
 281                                 .link {
 282                                         color: $blue;
 283                                         cursor: pointer;
 284                                         display: flex;
 285                                         align-items: center;
 286                                         margin-bottom: 10px;
 287                                         .svg-icon.angle-right {
 288                                                 height: 10px;
 289                                                 width: 10px;
 290                                                 margin-left: 7px;
 291                                                 fill: $blue;
 292                                         }
 293                                         &:hover {
 294                                                 color: $dark-blue;
 295                                                 .svg-icon.angle-right {
 296                                                         fill: $dark-blue;
 297                                                 }
 298                                         }
 299                                 }
 300                         }
 301
 302                         .unassigned-files-list-item {
 303                                 @include ellipsis();
 304                                 border-bottom: 1px solid $tlv-light-gray;
 305                                 padding: 0 5px 5px 15px;
 306                                 &:first-child {
 307                                         padding-top: 5px;
 308                                 }
 309                                 &:last-child {
 310                                         border-bottom: none;
 311                                         padding-bottom: 0;
 312                                 }
 313                         }
 314                 }
 315         }
 316 }