gerrit.onap Code Review - sdc.git/blob

   1 @import './../../../../../../../../assets/styles/variables.less';
   2
   3 .sdc-hierarchy-tab {
   4   padding: 15px 0 0 0;
   5   background-color: #f8f8f8;
   6   height: 100%;
   7   box-shadow: 0.3px 1px 3px rgba(24, 24, 25, 0.42);
   8   display: flex;
   9   flex-flow: column;
  10
  11   .sdc-hierarchy-tab-title {
  12     color: @main_color_a;
  13     padding: 0 0 15px 20px;
  14     border-bottom: 1px solid #d2d2d2;
  15   }
  16
  17   .sdc-hierarchy-tab-sub-title {
  18     color: @main_color_a;
  19     padding: 15px 20px 15px 20px;
  20   }
  21
  22   .scroll-module-list {
  23     overflow-y: auto;
  24     display: flex;
  25     height: 100%;
  26     flex-direction: column;
  27   }
  28
  29   /deep/ .expand-collapse-container {
  30     margin-bottom: 0;
  31
  32     .sdc-accordion-header {
  33       white-space: nowrap;
  34       line-height: 22px;
  35       background-color: @tlv_color_u;
  36       padding: 8px 20px 8px 8px;
  37       box-shadow: inset 0px -1px 0px 0px rgba(255, 255, 255, 0.7);
  38       height: 40px;
  39
  40       .title {
  41         overflow: hidden;
  42         text-overflow: ellipsis;
  43         max-width: 215px;
  44       }
  45     }
  46
  47     .sdc-accordion-body.open {
  48       padding: 0 0 5px 0;
  49     }
  50
  51     .sdc-accordion-header:hover {
  52       background-color: @main_color_o;
  53     }
  54
  55     &.outer-container {
  56       .sdc-accordion-body {
  57         padding-left: 0;
  58       }
  59     }
  60
  61     &.inner-container {
  62       margin-bottom: 0;
  63
  64       .sdc-accordion-header {
  65         padding: 8px 20px 8px 30px;
  66         background-color: @tlv_color_t
  67       }
  68     }
  69   }
  70
  71   .sdc-accordion.selected {
  72     /deep/ .expand-collapse-container {
  73       .sdc-accordion-header {
  74         background-color: @main_color_a;
  75         color: @main_color_p;
  76
  77         .svg-icon {
  78           fill: @main_color_p;
  79         }
  80       }
  81     }
  82   }
  83
  84   .expand-collapse-sub-title {
  85     max-width: 225px;
  86     display: inline-block;
  87     overflow: hidden;
  88     text-overflow: ellipsis;
  89     white-space: nowrap;
  90     padding: 10px 0 0 33px;
  91   }
  92
  93   .expand-collapse-content {
  94     .expand-collapse-title {
  95       padding: 0 10px 0 30px;
  96     }
  97   }
  98
  99   .module-data-container {
 100     width: 100%;
 101     overflow-y: overlay;
 102     background-color: @tlv_color_v;
 103     border: 1px solid @main_color_a;
 104     border-top: 4px solid @main_color_a;
 105     box-shadow: 0.3px 1px 2px rgba(24, 24, 25, 0.32);
 106
 107     .module-data {
 108       color: @main_color_a;
 109       padding: 10px 0 10px 0;
 110       margin: 0 20px 0 20px;
 111
 112       .selected-module-property-header {
 113         font-weight: bold;
 114       }
 115
 116       .selected-module-property-value {
 117         font-family: @font-opensans-regular;
 118
 119         &.small-font {
 120           font-size: 12px;
 121         }
 122       }
 123
 124       .module-name-container {
 125
 126         display: flex;
 127         flex-direction: row;
 128
 129         .module-name {
 130           font-size: 14px;
 131           width: 75%;
 132           max-width: 240px;
 133           overflow: hidden;
 134           text-overflow: ellipsis;
 135           white-space: nowrap;
 136         }
 137
 138         .edit-name-container {
 139           float: right;
 140           border-left: 1px solid @main_color_a;
 141           height: 20px;
 142           padding-left: 12px;
 143
 144           .svg-icon {
 145             padding-top: 3px;
 146             fill: @main_color_s;
 147
 148             &.hand-pointer {
 149               cursor: pointer;
 150             }
 151
 152           }
 153         }
 154       }
 155     }
 156
 157     .selected-module-property-container {
 158       flex-direction: row;
 159       display: flex;
 160
 161       .selected-module-property-value {
 162         text-indent: 2px;
 163       }
 164     }
 165
 166     /deep/ .expand-collapse-module-data-container {
 167       margin-bottom: 0;
 168
 169       .sdc-accordion-header {
 170         white-space: nowrap;
 171         line-height: 22px;
 172         padding: 8px 20px 8px 16px;
 173         height: 40px;
 174         background-color: @tlv_color_w;
 175         color: @main_color_l;
 176         border-top: 1px solid @main_color_a;
 177         border-bottom: 1px solid @main_color_a;
 178         width: 100%;
 179       }
 180
 181     }
 182
 183     .module-data-list-item {
 184       padding-bottom: 10px;
 185       margin: 0 20px 0 20px;
 186
 187       .artifact-list-item {
 188         color: @main_color_m;
 189       }
 190
 191       .module-data-list-item-value {
 192         width: 100%;
 193         max-width: 240px;
 194         overflow: hidden;
 195         text-overflow: ellipsis;
 196         white-space: nowrap;
 197
 198         &.artifact-info {
 199           font-family: @font-opensans-regular;
 200           font-size: 12px;
 201         }
 202
 203         &.property-name {
 204           font-weight: 400;
 205           color: @main_color_a;
 206
 207           .hand-pointer {
 208             cursor: pointer;
 209           }
 210         }
 211
 212         &.property-info {
 213           color: @func_color_s;
 214           font-family: @font-opensans-regular;
 215         }
 216       }
 217     }
 218   }
 219 }
 220
 221 .modules-list {
 222   overflow-y: overlay;
 223   flex-grow: 1;
 224 }