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

   1 .software-product-attachments {
   2   @extend .body-1;
   3   width: 100%;
   4   height: 100%;
   5   display: flex;
   6
   7   .software-product-attachments-tree {
   8     display: flex;
   9     border-right: 1px solid $light-gray;
  10     margin: 0px;
  11     padding: 5px 3px 10px 3px;
  12     overflow: auto;
  13     height: 100%;
  14
  15     .tree-wrapper {
  16       flex: 1 1;
  17       position: relative;
  18       padding-bottom: 10px;
  19
  20       .tree-block-inside {
  21         padding-left: 17px;
  22         padding-top: 8px;
  23         padding-bottom: 1px;
  24         .tree-node-row {
  25           cursor: default;
  26           white-space: nowrap;
  27           &.tree-node-selected::before {
  28             position: absolute;
  29             left: 0;
  30             right: 0;
  31             height: 20px;
  32             display: inline-block;
  33             content: ' ';
  34             background-color: $light-gray;
  35           }
  36
  37           &.tree-node-clicked::before {
  38             position: absolute;
  39             left: 4px;
  40             right: 4px;
  41             height: 20px;
  42             display: inline-block;
  43             content: ' ';
  44             font-weight: bold;
  45             background-color: $white;
  46           }
  47
  48           .tree-node-expander {
  49             position: relative;
  50             display: inline-block;
  51             cursor: pointer;
  52             .fa {
  53               position: absolute;
  54               left: -7px;
  55               top: -11px;
  56               @include transition(transform 0.3s);
  57             }
  58             &.tree-node-expander-collapsed .fa {
  59               @include transform-rotate(-90);
  60             }
  61           }
  62
  63           .tree-node-icon {
  64             margin: 0 7px;
  65             color: $text-black;
  66             opacity: .5;
  67             .tree-node-validation-error::after {
  68               content: "!";
  69               font-weight: bold;
  70               position: absolute;
  71               color: $red;
  72               font-size: large;
  73               left: -7px;
  74               bottom: -5px;
  75             }
  76           }
  77
  78           .error-status {
  79             color: $red;
  80             &.error-status-selected {
  81               font-weight: bold;
  82             }
  83             &.error-status-hovered {
  84               font-weight: bold;
  85               background-color: $blue;
  86             }
  87           }
  88
  89           .tree-element-text {
  90             @extend %noselect;
  91             position: relative;
  92             padding-right: 5px;
  93             &.error-status-selected {
  94               font-weight: bold;
  95             }
  96           }
  97         }
  98
  99       }
 100     }
 101   }
 102   .software-product-attachments-separator {
 103     border: 1px solid $tlv-light-gray;
 104     height: 100%;
 105     width: 5px;
 106     cursor: e-resize;
 107   }
 108
 109   .software-product-attachments-error-list {
 110     text-align: center;
 111     margin-top: 12px;
 112     display: flex;
 113     align-content: flex-start;
 114     flex-direction: column;
 115     padding-left: 70px;
 116     padding-right: 50px;
 117     overflow: auto;
 118     margin-bottom: 70px;
 119     .error-item {
 120       &.selected {
 121         background-color: $light-gray;
 122       }
 123       &.clicked {
 124         color: $blue;
 125       }
 126       &.shifted {
 127         margin-top: 20px;
 128       }
 129       text-align: left;
 130       .error-item-file-name {
 131         font-weight: bold;
 132       }
 133       .error-item-file-type {
 134         margin-right: 5px;
 135         &.strong {
 136           font-weight: bold;
 137         }
 138         &.ERROR {
 139           color: $red;
 140         }
 141         &.WARNING {
 142           color: $yellow;
 143         }
 144       }
 145     }
 146
 147     .error-item:hover {
 148       cursor: default;
 149       background-color: $tlv-hover;
 150     }
 151   }
 152
 153 }