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

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