gerrit.onap Code Review - sdc.git/blob

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