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

   1
   2 .vsp-attachments-view {
   3   position: relative;
   4         #attachments-tabs {
   5                 .nav-tabs {
   6                         background-color: $tlv-gray;
   7                         box-shadow: none;
   8                         border-bottom: 1px solid $light-gray;
   9                         & > li {
  10                                 & > a {
  11                                         font-size: 24px;
  12                                         font-weight: lighter;
  13                                         padding-left: 0;
  14                                         padding-right: 0;
  15                                         margin-right: 40px;
  16                                 };
  17                                 &.active > a {color: $blue;};
  18                         }
  19                 }
  20         }
  21   .attachments-view-controllers {
  22     position: absolute;
  23     right: 40px;
  24     top: 15px;
  25                 display: flex;
  26                 .icon-label {
  27                         color: $dark-gray;
  28                 }
  29
  30                 .go-to-overview-icon {
  31                         .icon-label {
  32                                 color: $blue;
  33                         }
  34                         &.disabled {
  35                                 .icon-label {
  36                                         color: $gray;
  37                                 }
  38                         }
  39                 }
  40
  41     .icon-component {
  42       margin-right: 30px;
  43
  44     }
  45
  46     input[type="file"] {
  47       visibility: hidden;
  48       width: 1px;
  49       padding: 0;
  50       margin-left: -1px;
  51     }
  52   }
  53 }
  54
  55 .vsp-attachments-heat-validation {
  56   @extend .body-1;
  57   display: flex;
  58   .svg-icon.exclamation-triangle-line {
  59     fill: $orange;
  60     width: 15px;
  61     height: 15px;
  62     &.large {
  63       width: 20px;
  64       height: 20px;
  65     }
  66   }
  67   .validation-tree-section {
  68     display: flex;
  69     width: 400px;
  70     justify-content: space-between;
  71   }
  72   .vsp-attachments-heat-validation-tree {
  73     @extend .flex-column;
  74     margin: 0;
  75     overflow: auto;
  76     height: 100%;
  77     .attachments-tree-header {
  78       display: flex;
  79       justify-content: space-between;
  80       height: 55px;
  81       align-items: center;
  82       &.header-selected {
  83         background: $tlv-gray;
  84       }
  85       .header-icon {
  86         top: -3px;
  87         position: relative;
  88         margin-left: 20px;
  89       }
  90       .tree-header-title-text {
  91         @extend .heading-4-medium;
  92         padding-left: 32px;
  93         cursor: pointer;
  94         &.tree-header-title-selected{
  95           color: $blue;
  96         }
  97       }
  98       .tree-header-title {
  99         display: flex;
 100       }
 101     }
 102     .counters {
 103       display: flex;
 104       justify-content: space-between;
 105       z-index: 1;
 106       padding-right: 20px;
 107       .counter {
 108         display: flex;
 109         &:first-child {
 110           margin-right: 20px;
 111         }
 112         &:only-child {
 113           margin-right: 0;
 114         }
 115         .svg-icon-wrapper {
 116           margin-right: 5px;
 117         }
 118         .counter-icon {
 119           margin-right: 5px;
 120         }
 121         .error-text, .warning-text {
 122           @extend .body-3;
 123           &.large {
 124             @extend .heading-4-medium;
 125           }
 126         }
 127       }
 128     }
 129     .tree-wrapper {
 130       flex: 1 1;
 131       position: relative;
 132       padding-bottom: 10px;
 133
 134       @-moz-document url-prefix() {
 135         .tree-block-inside {
 136           top: 0;
 137           position: relative;
 138         }
 139       }
 140       .tree-block-inside {
 141         padding-left: 20px;
 142         .tree-node-row {
 143           cursor: default;
 144           white-space: nowrap;
 145           display: flex;
 146           justify-content: space-between;
 147           height: 40px;
 148           align-items: center;
 149           .svg-icon.chevron-down, .svg-icon.chevron-up {
 150             height: 10px;
 151             width: 10px;
 152           }
 153
 154           &:after {
 155             border-top: 1px solid $tlv-gray;
 156             height: 40px;
 157             position: absolute;
 158             left: 0;
 159             right: 0;
 160             content: ' ';
 161           }
 162           @-moz-document url-prefix() {
 163             &:after {
 164               top: 0;
 165             }
 166           }
 167           &.tree-node-selected::before {
 168             position: absolute;
 169             left: 0;
 170             right: 0;
 171             height: 20px;
 172             display: inline-block;
 173             content: ' ';
 174             background-color: $tlv-gray;
 175             color: $blue;
 176           }
 177
 178           &.tree-node-clicked {
 179             color: $blue;
 180             &:after {
 181               background: $tlv-gray;
 182               height: 40px;
 183               position: absolute;
 184               left: 0;
 185               right: 0;
 186               content: ' ';
 187             }
 188           }
 189           .tree-node-name {
 190             cursor: pointer;
 191           }
 192           .name-section {
 193             z-index: 1;
 194             flex: 1;
 195             @include ellipsis(auto);
 196           }
 197           .tree-node-expander {
 198             position: relative;
 199             display: inline-block;
 200             cursor: pointer;
 201           }
 202           .tree-node-icon {
 203             margin: 0 7px;
 204           }
 205         }
 206       }
 207     }
 208   }
 209   .vsp-attachments-heat-validation-separator {
 210     border-left: 1px solid $tlv-light-gray;
 211     height: 100%;
 212     width: 5px;
 213     cursor: e-resize;
 214   }
 215
 216   .message-board-section {
 217     @extend .flex-column;
 218     padding-left: 25px;
 219     padding-top: 10px;
 220     padding-right: 60px;
 221     overflow: auto;
 222     margin-bottom: 70px;
 223     .error-item {
 224       display: flex;
 225       margin: 10px 0;
 226       .error-item-file-type {
 227         margin-left: 15px;
 228       }
 229       .error-file-name {
 230         @extend .body-1-medium;
 231         margin-right: 5px;
 232       }
 233     }
 234
 235   }
 236
 237 }