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

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