vid-app-common/src/main/webapp/app/vid/scripts/modals/new-change-management/new-change-management.css

   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 .scale-out-modules .table-row > div {
  26     padding: 0 12px;
  27     color: #5A5A5A;
  28     font-size: 13px;
  29     border-right: 1px solid #D2D2D2;
  30     line-height: 30px;
  31 }
  32 .scale-out-modules .table-row > div:last-child {
  33     border-right: none;
  34 }
  35 .scale-out-modules .table-row > div:nth-child(1) {
  36     flex: 40px 0 0;
  37     font-size: 22px;
  38 }
  39 .scale-out-modules .table-row > div:nth-child(2) {
  40     flex: 200px 1 0;
  41 }
  42 .scale-out-modules .table-row > div:nth-child(3) {
  43     flex: 200px 1 0;
  44 }
  45 .scale-out-modules .table-row > div:nth-child(4), .scale-out-modules .table-row > div:nth-child(5) {
  46     flex: 110px 0 0;
  47 }
  48 .scale-out-modules .table-row > div:nth-child(6), .scale-out-modules .table-row > div:nth-child(7) {
  49     flex: 130px 0 0;
  50 }
  51 .scale-out-modules .table-row.open > div {
  52     line-height: 29px;
  53     border-top: 1px #009FDB solid;
  54     border-bottom: 1px #009FDB solid;
  55 }
  56 .scale-out-modules .table-row.open > div:last-child {
  57     box-shadow: 0px 0px 0px 0px red, 1px 0px 0px 0px #009FDB;
  58 }
  59 .scale-out-modules .table-row.open > div:nth-child(1) {
  60     border-color: green;
  61 }
  62 .scale-out-modules .table-row.open > div:nth-child(2) {
  63     color: #009FDB;
  64 }
  65 .scale-out-modules .table-header {
  66     border-bottom: none;
  67 }
  68 .scale-out-modules .table-header > div {
  69     background-color: #F2F2F2;
  70     color: black;
  71     font-size: 12px;
  72 }
  73 .scale-out-modules .modules-table:not(.open) + .table-row {
  74     border-top: none;
  75 }
  76 .scale-out-modules .modules-table {
  77     display: none;
  78     margin-top: 10px;
  79     margin-bottom: 15px;
  80 }
  81 .scale-out-modules .modules-table .table-row {
  82     margin-left: 60px;
  83 }
  84 .scale-out-modules .modules-table .table-row  > div:nth-child(1) {
  85     flex: 300px 1 0;
  86     font-size: 13px;
  87 }
  88 .scale-out-modules .modules-table .table-row  > div:nth-child(2) {
  89     flex: 90px 0 0;
  90 }
  91 .scale-out-modules .modules-table .table-row  > div:nth-child(3) {
  92     flex: 90px 0 0;
  93 }
  94 .scale-out-modules .modules-table .table-row  > div:nth-child(3) input {
  95     width: 60px;
  96     margin-top: 10px;
  97 }
  98 .scale-out-modules .modules-table .table-row  > div:nth-child(4) {
  99     flex: 180px 0 0;
 100 }
 101 .scale-out-modules .modules-table .table-row  > div:nth-child(5) {
 102     flex: 280px 0 0;
 103 }
 104 .scale-out-modules .modules-table.open {
 105     display: block;
 106 }
 107
 108
 109 /*LESS*/
 110 /*
 111
 112
 113 .scale-out-modules{
 114
 115         .table-row{
 116                 border: 1px solid #D2D2D2;
 117                 display:flex;
 118
 119         > div {
 120                         padding: 0 12px;
 121                         color: #5A5A5A;
 122                         font-size:13px;
 123                         border-right:1px solid #D2D2D2;
 124                         line-height:30px;
 125
 126                         &:last-child {
 127                                 border-right:none;
 128                         }
 129
 130                         &:nth-child(1){
 131                                 flex:40px 0 0;
 132                                 font-size:22px;
 133                         }
 134                         &:nth-child(2){
 135                                 flex:200px 1 0;
 136                         }
 137                         &:nth-child(3){
 138                                 flex:200px 1 0;
 139                         }
 140                         &:nth-child(4), &:nth-child(5){
 141                                 flex:110px 0 0;
 142                         }
 143                         &:nth-child(6), &:nth-child(7){
 144                                 flex:130px 0 0;
 145                         }
 146                 }
 147
 148                 &.open > div {
 149                         line-height:29px;
 150                         border-top: 1px #009FDB solid;
 151                         border-bottom: 1px #009FDB solid;
 152                         &:last-child{
 153                                 box-shadow: 0px 0px 0px 0px red, 1px 0px 0px 0px #009FDB;
 154                         }
 155                         //box-sizing: border-box;
 156                         &:nth-child(1){
 157                          border-color: green;
 158                         }
 159                         &:nth-child(2){
 160                                 color:#009FDB;
 161                         }
 162                 }
 163     }
 164
 165         .table-header{
 166                 border-bottom:none;
 167
 168         > div {
 169                         background-color:#F2F2F2;
 170                         color: black;
 171                         font-size:12px;
 172                 }
 173     }
 174
 175         .modules-table:not(.open) + .table-row {
 176                 border-top:none;
 177         }
 178
 179         .modules-table{
 180                 display:none;
 181                 margin-top:10px;
 182                 margin-bottom:15px;
 183
 184                 .table-row {
 185                         margin-left:60px;
 186                         & > div{
 187
 188                                 &:nth-child(1){
 189                                         flex:300px 1 0;
 190                                         font-size:13px;
 191                                 }
 192                                 &:nth-child(2){
 193                                         flex:90px 0 0;
 194                                 }
 195                                 &:nth-child(3){
 196                                         flex:90px 0 0;
 197
 198                     input {
 199                         width: 60px;
 200                         margin-top: 10px;
 201                     }
 202                                 }
 203                                 &:nth-child(4){
 204                                         flex:180px 0 0;
 205                                 }
 206                                 &:nth-child(5){
 207                                         flex:280px 0 0;
 208                                 }
 209                         }
 210                 }
 211
 212                 &.open{
 213                         display:block;
 214                 }
 215         }
 216
 217 }
 218
 219 */