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