gerrit.onap Code Review - vid.git/blob

   1 /*-
   2  * ============LICENSE_START=======================================================
   3  * VID
   4  * ================================================================================
   5  * Copyright (C) 2017 - 2019 AT&T Intellectual Property. All rights reserved.
   6  * ================================================================================
   7  * Licensed under the Apache License, Version 2.0 (the "License");
   8  * you may not use this file except in compliance with the License.
   9  * You may obtain a copy of the License at
  10  *
  11  *      http://www.apache.org/licenses/LICENSE-2.0
  12  *
  13  * Unless required by applicable law or agreed to in writing, software
  14  * distributed under the License is distributed on an "AS IS" BASIS,
  15  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  16  * See the License for the specific language governing permissions and
  17  * limitations under the License.
  18  * ============LICENSE_END=========================================================
  19  */
  20
  21 .scale-out-modules .table-row {
  22     border: 1px solid #D2D2D2;
  23     display: flex;
  24 }
  25
  26 .scale-out-modules .table-row > div {
  27     padding: 0 12px;
  28     color: #5A5A5A;
  29     font-size: 13px;
  30     border-right: 1px solid #D2D2D2;
  31     line-height: 30px;
  32 }
  33
  34 .scale-out-modules .table-row > div:last-child {
  35     border-right: none;
  36 }
  37
  38 .scale-out-modules .table-row > div:nth-child(1) {
  39     flex: 40px 0 0;
  40     font-size: 22px;
  41 }
  42
  43 .scale-out-modules .table-row > div:nth-child(2) {
  44     flex: 200px 1 0;
  45 }
  46
  47 .scale-out-modules .table-row > div:nth-child(3) {
  48     flex: 200px 1 0;
  49 }
  50
  51 .scale-out-modules .table-row > div:nth-child(4), .scale-out-modules .table-row > div:nth-child(5) {
  52     flex: 110px 0 0;
  53 }
  54
  55 .scale-out-modules .table-row > div:nth-child(6), .scale-out-modules .table-row > div:nth-child(7) {
  56     flex: 130px 0 0;
  57 }
  58
  59 .scale-out-modules .table-row.open > div {
  60     line-height: 29px;
  61     border-top: 1px #009FDB solid;
  62     border-bottom: 1px #009FDB solid;
  63 }
  64
  65 .scale-out-modules .table-row.open > div:last-child {
  66     box-shadow: 0px 0px 0px 0px red, 1px 0px 0px 0px #009FDB;
  67 }
  68
  69 .scale-out-modules .table-row.open > div:nth-child(1) {
  70     border-color: green;
  71 }
  72
  73 .scale-out-modules .table-row.open > div:nth-child(2) {
  74     color: #009FDB;
  75 }
  76
  77 .scale-out-modules .table-header {
  78     border-bottom: none;
  79 }
  80
  81 .scale-out-modules .table-header > div {
  82     background-color: #F2F2F2;
  83     color: black;
  84     font-size: 12px;
  85 }
  86
  87 .scale-out-modules .modules-table:not(.open) + .table-row {
  88     border-top: none;
  89 }
  90
  91 .scale-out-modules .modules-table {
  92     display: none;
  93     margin-top: 10px;
  94     margin-bottom: 15px;
  95 }
  96
  97 .scale-out-modules .modules-table .table-row {
  98     margin-left: 60px;
  99 }
 100
 101 .scale-out-modules .modules-table .table-row > div:nth-child(1) {
 102     flex: 300px 1 0;
 103     font-size: 13px;
 104 }
 105
 106 .scale-out-modules .modules-table .table-row > div:nth-child(2) {
 107     flex: 90px 0 0;
 108 }
 109
 110 .scale-out-modules .modules-table .table-row > div:nth-child(3) {
 111     flex: 90px 0 0;
 112 }
 113
 114 .scale-out-modules .modules-table .table-row > div:nth-child(3) input {
 115     width: 60px;
 116     margin-top: 10px;
 117 }
 118
 119 .scale-out-modules .modules-table .table-row > div:nth-child(4) {
 120     flex: 180px 0 0;
 121 }
 122
 123 .scale-out-modules .modules-table .table-row > div:nth-child(5) {
 124     flex: 280px 0 0;
 125 }
 126
 127 .scale-out-modules .modules-table.open {
 128     display: block;
 129 }
 130
 131 .search-vnf {
 132     position: absolute;
 133     bottom: 0;
 134 }
 135
 136 .form-group {
 137     position: relative;
 138 }
 139
 140 .nf-role-input {
 141     width: 50%
 142 }
 143
 144 /*LESS*/
 145 /*
 146
 147
 148 .scale-out-modules{
 149
 150         .table-row{
 151                 border: 1px solid #D2D2D2;
 152                 display:flex;
 153
 154         > div {
 155                         padding: 0 12px;
 156                         color: #5A5A5A;
 157                         font-size:13px;
 158                         border-right:1px solid #D2D2D2;
 159                         line-height:30px;
 160
 161                         &:last-child {
 162                                 border-right:none;
 163                         }
 164
 165                         &:nth-child(1){
 166                                 flex:40px 0 0;
 167                                 font-size:22px;
 168                         }
 169                         &:nth-child(2){
 170                                 flex:200px 1 0;
 171                         }
 172                         &:nth-child(3){
 173                                 flex:200px 1 0;
 174                         }
 175                         &:nth-child(4), &:nth-child(5){
 176                                 flex:110px 0 0;
 177                         }
 178                         &:nth-child(6), &:nth-child(7){
 179                                 flex:130px 0 0;
 180                         }
 181                 }
 182
 183                 &.open > div {
 184                         line-height:29px;
 185                         border-top: 1px #009FDB solid;
 186                         border-bottom: 1px #009FDB solid;
 187                         &:last-child{
 188                                 box-shadow: 0px 0px 0px 0px red, 1px 0px 0px 0px #009FDB;
 189                         }
 190                         //box-sizing: border-box;
 191                         &:nth-child(1){
 192                          border-color: green;
 193                         }
 194                         &:nth-child(2){
 195                                 color:#009FDB;
 196                         }
 197                 }
 198     }
 199
 200         .table-header{
 201                 border-bottom:none;
 202
 203         > div {
 204                         background-color:#F2F2F2;
 205                         color: black;
 206                         font-size:12px;
 207                 }
 208     }
 209
 210         .modules-table:not(.open) + .table-row {
 211                 border-top:none;
 212         }
 213
 214         .modules-table{
 215                 display:none;
 216                 margin-top:10px;
 217                 margin-bottom:15px;
 218
 219                 .table-row {
 220                         margin-left:60px;
 221                         & > div{
 222
 223                                 &:nth-child(1){
 224                                         flex:300px 1 0;
 225                                         font-size:13px;
 226                                 }
 227                                 &:nth-child(2){
 228                                         flex:90px 0 0;
 229                                 }
 230                                 &:nth-child(3){
 231                                         flex:90px 0 0;
 232
 233                     input {
 234                         width: 60px;
 235                         margin-top: 10px;
 236                     }
 237                                 }
 238                                 &:nth-child(4){
 239                                         flex:180px 0 0;
 240                                 }
 241                                 &:nth-child(5){
 242                                         flex:280px 0 0;
 243                                 }
 244                         }
 245                 }
 246
 247                 &.open{
 248                         display:block;
 249                 }
 250         }
 251
 252 }
 253
 254 */