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