resources/scss/_custom.scss

   1 /*
   2  * ============LICENSE_START=======================================================
   3  * org.onap.aai
   4  * ================================================================================
   5  * Copyright © 2017-2021 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 .model-card {
  22         .panel {
  23           background-color: initial;
  24           box-shadow: none;
  25           margin-bottom: 0;
  26         }
  27
  28         .panel-default > .panel-heading {
  29           padding-left: 0;
  30           border: 0;
  31           padding: 0;
  32           color: #191919;
  33         }
  34
  35         .panel-default > .panel-heading + .panel-collapse > .panel-body {
  36           overflow-y: scroll;
  37           max-height: 200px;
  38           background-color: #fff;
  39           margin-top: 10px;
  40         }
  41   }
  42
  43   .aggregate-card {
  44     height: 700px !important;
  45     margin: 15px 0;
  46
  47     .aggregate-card-content {
  48       overflow: hidden;
  49       margin-left: 12px;
  50     }
  51
  52     .aggregate-attribute {
  53       margin-left: 24px;
  54     }
  55
  56     .aggregate-card-content:hover {
  57       overflow-y: scroll;
  58     }
  59
  60     .label-default {
  61       background-color: #5a5a5a;
  62     }
  63   }
  64
  65   .btn-outline-primary {
  66         color: #007bff;
  67         background-color: transparent;
  68         background-image: none;
  69         border-color: #007bff;
  70   }
  71
  72   .btn-outline-primary:hover {
  73         color: #fff;
  74         background-color: #007bff;
  75         border-color: #007bff;
  76   }
  77
  78   .btn-outline-primary:focus, .btn-outline-primary.focus {
  79         box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.5);
  80   }
  81
  82   .btn-outline-primary.disabled, .btn-outline-primary:disabled {
  83         color: #007bff;
  84         background-color: transparent;
  85   }
  86
  87   .btn-outline-primary:not(:disabled):not(.disabled):active, .btn-outline-primary:not(:disabled):not(.disabled).active,
  88   .show > .btn-outline-primary.dropdown-toggle {
  89         color: #fff;
  90         background-color: #007bff;
  91         border-color: #007bff;
  92   }
  93
  94   .btn-outline-primary:not(:disabled):not(.disabled):active:focus, .btn-outline-primary:not(:disabled):not(.disabled).active:focus,
  95   .show > .btn-outline-primary.dropdown-toggle:focus {
  96         box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.5);
  97   }
  98   .model-container .card{
  99         height: 400px !important;
 100   }
 101   .table-header-view th{
 102         background: #009fdb;
 103         color:#ffffff;
 104   }
 105   .table-header-view{
 106         color:#ffffff;
 107         width:auto !important;
 108   }
 109   .filter{
 110         margin-left:0px !important;
 111         margin-right:0px !important;
 112   }
 113   .filter:last-child {
 114         margin-bottom:20px !important;
 115   }
 116   .react-bootstrap-table table{
 117         width:100%;
 118         min-width:100%;
 119   }
 120   .relationshipTable .label-default {
 121         background-color: #5a5a5a !important;
 122   }
 123   .parent-expand-bar {
 124         background-color: #81c784;
 125   }
 126   .react-bootstrap-table {
 127       width: 100%;
 128       max-height: 500px;
 129       overflow: auto;
 130   }
 131   .react-bootstrap-table table{
 132         font-size:13px;
 133   }
 134   .react-bootstrap-table table th{
 135         word-wrap: break-word;
 136         white-space: nowrap;
 137   }
 138   .filter-label{
 139         display:flex;
 140         margin-bottom:0px;
 141         margin-top:5px;
 142   }
 143   .nav-tabs > li > a {
 144         margin-right: 2px;
 145         line-height: 1.42857;
 146         border: 1px solid #dfdfdf;
 147         border-radius: 10px 10px 0 0px;
 148         font-size: 14px;
 149         color:#4d6069;
 150   }
 151   .nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus {
 152         color: #FFFFFF;
 153         background-color: #009fdb;
 154         border: 1px solid transparent;
 155         border-bottom-color: transparent;
 156         cursor: default;
 157   }
 158   .multipleNodes .model-container {
 159         margin: 0px;
 160         //width: max-content;
 161   }
 162   .multipleNodes .container-fluid{
 163         padding-left:2px;
 164   }
 165   .nav-tabs {
 166         padding:0px;
 167         border-bottom: 4px solid #009fdb;
 168   }
 169   .nav-tabs > li {
 170         float: left;
 171         margin-bottom: -3px;
 172   }
 173   .table-striped > tbody > tr:nth-child(2n) > td {
 174      background-color: #ffffff;
 175   }
 176   .table-striped > tbody > tr:nth-child(2n+1) > td {
 177      background-color: #dddddd;
 178   }
 179   .table-striped > tbody > tr:hover td {
 180     background-color: #009fdb4d;
 181   }
 182   .table-striped > thead > tr > th {
 183       background-color: #009fdb;
 184       color: #FFFFFFFF;
 185   }
 186   .relationshipTable{
 187         background:#ffffff;
 188   }
 189   .relationshipTable th {
 190         padding: 5px;
 191   }
 192   .relationshipTable ul {
 193         max-height: 300px;
 194         overflow-y: scroll;
 195   }
 196   .relationshipTable li{
 197         padding:10px 0px 10px 3px;
 198         border:1px solid #7c8388
 199   }
 200  .relationshipTable li:nth-child(2n){
 201                 background-color: #ffffff;
 202  }
 203  .relationshipTable li:nth-child(2n+1){
 204                 background-color: #dddddd;
 205  }
 206  .relationshipTable li:hover{
 207          background-color: #009fdb4d;
 208  }
 209  .react-bootstrap-table .table-hover tr:hover {
 210    cursor: auto !important;
 211 }
 212 .react-bootstrap-table td.expand-cell {
 213   cursor: pointer !important;
 214 }
 215
 216 .react-bootstrap-table td{
 217   white-space:pre-wrap !important;
 218 }
 219 .pre-wrap-text{
 220   white-space: pre-wrap !important;
 221 }
 222 #downloadRangeForm .radio{
 223   margin-top:10px;
 224
 225 }
 226 #downloadRangeForm input[type='radio']{
 227   margin-top:5px;
 228 }
 229 #downloadRangeForm input{
 230   padding:5px 0px 0px 5px
 231 }
 232 #downloadRangeForm span{
 233   margin-left:5px;
 234 }
 235 #downloadRangeForm .warning{
 236   color:#ffa500;
 237   font-weight:bold;
 238   margin:0px !important;
 239 }
 240 #downloadRangeForm{
 241   margin:10px 0px;
 242 }
 243 #downloadPagePane h2{
 244   margin-bottom: 10px;
 245 }
 246 #downloadRangeForm input[type=radio]:checked:before{
 247   font-size: 34px;
 248   text-align: center;
 249   line-height: 12px;
 250 }
 251 .modal-backdrop.in{
 252   opacity:0.5 !important;
 253 }
 254 .spinner{
 255   z-index:9999 !important;
 256 }
 257 .savedQueryTemplate th{
 258   background:#69a8c7 !important;
 259   padding:2px !important;
 260 }
 261 .tab-content .form-control{
 262   height:37px !important;
 263 }
 264 .alignFormTwinElements{
 265   width:48% !important;
 266   float:left;
 267   margin:0px 5px 0px 0px !important;
 268 }
 269 .btn-space{
 270   margin: 5px !important;
 271 }
 272 #template .btn {
 273   padding: 6px 16px;
 274   margin: 0.2em;
 275   white-space: normal;
 276   box-shadow: 1px 2px #0c88d7;
 277 }
 278 #template .dropdownButton {
 279   width:100%;
 280 }
 281 #template .btn-secondary {
 282   background-color: #fdfdfd;
 283   border: 1px solid #d7dbf6;
 284 }
 285 @media (min-width: 768px){
 286   #customDslBuilderModel .modal-dialog{
 287     width: 700px !important;
 288     margin: 30px auto;
 289   }
 290 }
 291 .dsl-panel .caret{
 292     right: 0px !important;
 293     top: 12px;
 294     position: absolute;
 295 }
 296 .dsl-panel .inputFilter{
 297   padding: 5px 5px 0px 5px !important;
 298   width: 89% !important;
 299   margin:3px 0px 5px 0px;
 300 }
 301 .dsl-panel .btn{
 302   font-size:12px !important;
 303 }
 304 .inputBoxError{
 305   border: 1px solid #ec110b;
 306   padding:2px;
 307   margin:1px;
 308 }
 309 .toggleSwitch .btn-success, .toggleSwitch .btn-success:hover{
 310   color: #fff;
 311   background-color:#aadc1f;
 312   border-color: #888888 !important;
 313 }
 314 .toggleSwitch{
 315   position: fixed !important;
 316   float: right;
 317   z-index: 999;
 318   right: 10px;
 319   margin:5px;
 320   top:-2px;
 321 }
 322 .switch.btn {
 323   min-width: 4.7rem !important;
 324 }
 325 .switch-off.btn {
 326   padding-left: 1.0rem;
 327 }
 328 .toggleSwitch .btn-danger, .toggleSwitch .btn-danger:hover{
 329   color: #000;
 330   background-color: #e9ecef;
 331   border-color: #888888;
 332 }
 333 .switch.off .switch-group {
 334   left: -100%;
 335   transition: left 1s;
 336 }
 337 .switch.on .switch-group {
 338   transition: left 1s;
 339 }
 340 .toggleSwitch .btn{
 341   border-radius:5px;
 342   width:100px;
 343 }
 344 .switch-handle {
 345   border-radius:0px;
 346 }
 347 .toggleSwitch .btn-light{
 348   width:0px;
 349 }