POLICY-SDK-APP/src/main/webapp/app/policyApp/policy-models/Editor/css/main.css

   1 /*-
   2  * ============LICENSE_START=======================================================
   3  * ONAP Policy Engine
   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 body {
  22   padding-top: 55px;
  23   font-size: 14px;
  24 }
  25
  26 *,
  27 *:focus {
  28   outline: 0!important;
  29 }
  30
  31 .navbar {
  32   min-height: 32px;
  33 }
  34
  35 .navbar .navbar-toggle {
  36   padding: 5px 10px;
  37 }
  38
  39 .navbar .navbar-brand {
  40   font-size: inherit;
  41   height: 55px;
  42   line-height: 100%;
  43 }
  44
  45 .navbar .navbar-form {
  46   border-bottom: none;
  47   border-top: none;
  48   box-shadow: none;
  49   padding: 0 10px;
  50   margin-top: 10px;
  51 }
  52
  53 .breadcrumb {
  54   border-radius: 0;
  55 }
  56
  57 .breadcrumb .btn {
  58   margin-top: -5px;
  59 }
  60
  61 .btn.btn-pedefault {
  62         color: #444;
  63         background-color: #FAFAFA;
  64 }
  65
  66 .btn.btn-default {
  67   color: #444;
  68   background-color: #FAFAFA;
  69 }
  70
  71 .btn-add-remove {
  72   color: #444;
  73   background-color: #FAFAFA;
  74   margin-right: 12px;
  75   margin-bottom: 10px;
  76 }
  77
  78 .child_single {
  79   color: #444;
  80   background-color: #FAFAFA;
  81   margin-left: 0px;
  82   margin-bottom: 10px;
  83   border: 1px solid #ccc;
  84   border-radius: 4px;
  85 }
  86
  87 .children_group {
  88     color: #444;
  89     background-color: white;
  90     margin-left: 20px;
  91     margin-bottom: 20px;
  92     margin-top: 20px;
  93     margin-right: 20px;
  94     padding-top: 10px;
  95     padding-left: 10px;
  96     padding-right: 20px;
  97     padding-bottom: 10px;
  98     border: 1px solid #ccc;
  99     border-radius: 4px;
 100 }
 101
 102 .border1 {
 103     border: 2px solid #0000a0;
 104 }
 105
 106 .border2 {
 107     border: 2px solid #a94442;
 108 }
 109
 110 .border3 {
 111     border: 2px solid #808000;
 112 }
 113
 114 .border4 {
 115     border: 2px solid #ffb900;
 116 }
 117
 118
 119 .first_child {
 120         margin-top: 10px;
 121 }
 122
 123 div#HeaderDefaultValues.modal-body {
 124     position: relative;
 125     padding: 30px;
 126 }
 127
 128 .btn {
 129   box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .26);
 130   font-weight: 500;
 131   letter-spacing: .01em;
 132   border: none;
 133 }
 134
 135 textarea.code {
 136   font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
 137   font-size: 13px;
 138   min-height: 250px;
 139   resize: vertical;
 140   color: #000;
 141 }
 142
 143 .sub-header {
 144   padding-bottom: 10px;
 145   border-bottom: 1px solid #eee;
 146 }
 147
 148 .navbar-fixed-top {
 149   border: 0;
 150 }
 151
 152 .sidebar {
 153   display: none;
 154 }
 155
 156 .btn-go-back {
 157   margin-top: -5px;
 158 }
 159
 160 a:hover {
 161   text-decoration: none;
 162 }
 163
 164 .nav-sidebar {
 165   margin-right: -21px;
 166   margin-bottom: 20px;
 167   margin-left: -20px;
 168 }
 169
 170 .nav-sidebar > li > a {
 171   padding-right: 20px;
 172   padding-left: 20px;
 173 }
 174
 175 .nav-sidebar > .active > a,
 176 .nav-sidebar > .active > a:hover,
 177 .nav-sidebar > .active > a:focus {
 178   color: #fff;
 179   background-color: #2196F3;
 180 }
 181
 182 .main {
 183   padding: 0;
 184 }
 185
 186 .main .page-header {
 187   margin-top: 0;
 188 }
 189
 190 .file-tree ul.nav.nav-sidebar {
 191   margin: 0;
 192   padding: 0;
 193   padding-left: 12px;
 194 }
 195
 196 .file-tree ul.nav.nav-sidebar > li {
 197   border-left: 1px solid #ddd;
 198   padding-left: 4px;
 199 }
 200
 201 .file-tree ul.nav.nav-sidebar > li > a {
 202   padding: 2px 2px 2px 4px;
 203 }
 204
 205 .file-tree ul.nav.nav-sidebar:first-child {
 206   padding-left: 0;
 207 }
 208
 209 .file-tree ul.nav.nav-sidebar.file-tree-root > li {
 210   border-left: none;
 211   padding-left: 0px;
 212 }
 213
 214 .table td {
 215   vertical-align: middle;
 216 }
 217
 218 #context-menu {
 219   position: absolute;
 220   display: none;
 221   z-index: 9999;
 222 }
 223
 224 .iconset {
 225   padding: 10px;
 226 }
 227
 228 .col-120 {
 229   width: 100px;
 230   max-height: 100px;
 231   float: left;
 232   margin-bottom: 9px;
 233   margin-right: 9px;
 234 }
 235
 236 .col-120:last-child {
 237   margin-right: 0;
 238 }
 239
 240 .iconset .thumbnail {
 241   border-radius: 0;
 242   overflow: hidden;
 243   margin: 0;
 244   padding: 0;
 245   padding: 10px 0;
 246   border: none;
 247 }
 248
 249 .iconset .thumbnail .item-icon {
 250   font-size: 32px;
 251 }
 252
 253 .detail-sources {
 254   text-overflow: ellipsis;
 255   overflow: hidden;
 256   word-wrap: break-word;
 257 }
 258
 259 ::-webkit-scrollbar {
 260   width: 10px;
 261   height: 10px;
 262   background-color: #fff;
 263   box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1), inset -1px -1px 0 rgba(0, 0, 0, .07);
 264 }
 265
 266 ::-webkit-scrollbar:hover {
 267   background-color: #eee;
 268 }
 269
 270 ::-webkit-scrollbar-thumb {
 271   min-height: 0.8em;
 272   min-width: 0.8em;
 273   background-color: rgba(0, 0, 0, .2);
 274   box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1), inset -1px -1px 0 rgba(0, 0, 0, .07);
 275 }
 276
 277 ::-webkit-scrollbar-thumb:hover {
 278   background-color: #bbb;
 279 }
 280
 281 ::-webkit-scrollbar-thumb:active {
 282   background-color: #888;
 283 }
 284
 285 .dropdown-menu.dropdown-right-click {
 286   display: block;
 287   position: static;
 288   margin-bottom: 5px;
 289   font-size: 1em;
 290 }
 291
 292 .dropdown-menu.dropdown-right-click>li>a {
 293   padding: 5px 12px;
 294 }
 295
 296 .dropdown-menu.dropdown-right-click>li>a>i {
 297   font-size: .9em;
 298   margin-right: 1px;
 299 }
 300
 301 .dropdown-menu.dropdown-right-click .divider {
 302   margin: 3px 0;
 303 }
 304
 305 .spinner-wrapper {
 306   margin: 0 auto;
 307   text-align: center;
 308   margin-top: 8%;
 309 }
 310
 311 table th > a:hover,
 312 table th > a:active,
 313 table th > a:focus {
 314   text-decoration: none;
 315 }
 316
 317 .sortorder:after {
 318   color: #2196f3;
 319   content: '\25bc';
 320 }
 321
 322 .sortorder.reverse:after {
 323   color: #2196f3;
 324   content: '\25b2';
 325 }
 326
 327 [ng\:cloak], [ng-cloak],
 328 [data-ng-cloak], [x-ng-cloak],
 329 .ng-cloak, .x-ng-cloak {
 330   display: none !important;
 331 }
 332
 333 .mr2 {
 334   margin-right: 2px;
 335 }
 336
 337 .mr5 {
 338   margin-right: 5px;
 339 }
 340
 341 .mt10 {
 342   margin-top: 10px;
 343 }
 344
 345 .mb0 {
 346   margin-bottom: 0;
 347 }
 348
 349 .pointer {
 350   cursor: pointer;
 351 }
 352
 353 .block {
 354   display: block;
 355 }
 356
 357 .ellipsis {
 358   overflow: hidden;
 359   text-overflow: ellipsis;
 360   white-space: nowrap;
 361 }
 362
 363 .bold {
 364   font-weight: bold;
 365 }
 366
 367 @media (min-width: 768px) {
 368   .main {
 369     padding-right: 0;
 370     padding-left: 0;
 371   }
 372
 373   .sidebar {
 374     position: fixed;
 375     top: 50px;
 376     bottom: 0;
 377     left: 0;
 378     z-index: 1000;
 379     display: block;
 380     padding: 5px 0;
 381     overflow-x: hidden;
 382     overflow-y: auto;
 383     background-color: #f5f5f5;
 384     border-right: 1px solid #eee;
 385   }
 386 }
 387
 388 @media (max-width: 768px) {
 389   .navbar-form .btn {
 390     margin-top: 5px;
 391   }
 392 }
 393
 394 @media (max-width: 475px) {
 395   .table.table-files .btn {
 396     display: none;
 397   }
 398 }
 399
 400 /* Tooltip container */
 401 .tooltip {
 402     position: relative;
 403     display: inline-block;
 404     border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
 405 }
 406
 407 /* Tooltip text */
 408 .tooltip .tooltiptext {
 409     visibility: hidden;
 410     width: 120px;
 411     background-color: #555;
 412     color: #fff;
 413     text-align: center;
 414     padding: 5px 0;
 415     border-radius: 6px;
 416
 417     /* Position the tooltip text */
 418     position: absolute;
 419     z-index: 1;
 420     bottom: 125%;
 421     left: 50%;
 422     margin-left: -60px;
 423
 424     /* Fade in tooltip */
 425     opacity: 0;
 426     transition: opacity 1s;
 427 }
 428
 429 /* Tooltip arrow */
 430 .tooltip .tooltiptext::after {
 431     content: "";
 432     position: absolute;
 433     top: 100%;
 434     left: 50%;
 435     margin-left: -5px;
 436     border-width: 5px;
 437     border-style: solid;
 438     border-color: #555 transparent transparent transparent;
 439 }
 440
 441 /* Show the tooltip text when you mouse over the tooltip container */
 442 .tooltip:hover .tooltiptext {
 443     visibility: visible;
 444     opacity: 1;
 445 }
 446
 447 .mstooltip {
 448     position: relative;
 449     display: inline-block;
 450     color: orange;
 451     font-weight: lighter;
 452 }
 453
 454 .mstooltip .tooltiptext {
 455     font-weight: lighter;
 456     visibility: hidden;
 457     width: 150px;
 458     background-color: #555;
 459     color: #fff;
 460     text-align: center;
 461     border-radius: 6px;
 462     padding: 4px 5px;
 463     margin-left: 5px;
 464     position: absolute;
 465     bottom: 100%;
 466     left: 50%;
 467     z-index: 1;
 468 }
 469
 470 .mstooltip:hover .tooltiptext {
 471     visibility: visible;
 472 }
 473
 474
 475 .msloader {
 476     border: 6px solid #a94442;
 477     border-top: 6px solid #3498db; /* Blue */
 478     border-radius: 50%;
 479     width: 60px;
 480     height: 60px;
 481     animation: spin 2s linear infinite;
 482 }
 483
 484
 485 @-webkit-keyframes spin {
 486   0% { -webkit-transform: rotate(0deg); }
 487   100% { -webkit-transform: rotate(360deg); }
 488 }
 489
 490 @keyframes spin {
 491   0% { transform: rotate(0deg); }
 492   100% { transform: rotate(360deg); }
 493 }
 494
 495 #msPolicyloader {
 496    display:block;
 497    background-color:#c0c0c0;
 498    width:20px;
 499    height: 20px;
 500    margin-left: 5px;
 501 }
 502
 503 #msVersion {
 504     width: 195px;
 505     height: 20px;
 506     border: 0px;
 507     display: -webkit-flex; /* Safari */
 508     -webkit-flex-flow: row-reverse wrap; /* Safari 6.1+ */
 509     display: flex;
 510     flex-flow: row-reverse wrap;
 511 }
 512
 513 #advancedSearch i {
 514   border: solid black;
 515   border-width: 0 1px 1px 0;
 516   display: inline-block;
 517   padding: 3px;
 518   margin-left:20px;
 519 }
 520 .arrowright {
 521     transform: rotate(-45deg);
 522     -webkit-transform: rotate(-45deg);
 523 }
 524
 525 .arrowleft {
 526     transform: rotate(135deg);
 527     -webkit-transform: rotate(135deg);
 528 }
 529
 530 .arrowup {
 531     transform: rotate(-135deg);
 532     -webkit-transform: rotate(-135deg);
 533 }
 534
 535 .arrowdown {
 536     transform: rotate(45deg);
 537     -webkit-transform: rotate(45deg);
 538 }
 539
 540 #dashBoardAdvanceSearch .well {
 541     padding-bottom: 5px;
 542 }
 543
 544 #dashBoardAdvanceSearch button {
 545     float: left;
 546     padding-bottom: 10px;
 547     background: #f5f5f5;
 548     color: black;
 549     font-size: 22px;
 550     border: 0px solid grey;
 551     border-left: none;
 552     cursor: pointer;
 553 }
 554
 555 .switch {
 556   position: relative;
 557   display: inline-block;
 558   width: 60px;
 559   height: 34px;
 560 }
 561
 562 .switch input {display:none;}
 563
 564 .slider {
 565   position: absolute;
 566   cursor: pointer;
 567   top: 0;
 568   left: 0;
 569   right: 0;
 570   bottom: 0;
 571   background-color: #ccc;
 572   -webkit-transition: .4s;
 573   transition: .4s;
 574 }
 575
 576 .slider:before {
 577   position: absolute;
 578   content: "";
 579   height: 26px;
 580   width: 26px;
 581   left: 4px;
 582   bottom: 4px;
 583   background-color: white;
 584   -webkit-transition: .4s;
 585   transition: .4s;
 586 }
 587
 588 input:checked + .slider {
 589   background-color: blue;
 590 }
 591
 592 input:focus + .slider {
 593   box-shadow: 0 0 1px blue;
 594 }
 595
 596 input:checked + .slider:before {
 597   -webkit-transform: translateX(26px);
 598   -ms-transform: translateX(26px);
 599   transform: translateX(26px);
 600 }
 601
 602 /* Rounded sliders */
 603 .slider.round {
 604   border-radius: 34px;
 605 }
 606
 607 .slider.round:before {
 608   border-radius: 50%;
 609 }
 610
 611
 612 .onoffswitch {
 613     position: relative; width: 90px;
 614     -webkit-user-select:none; -moz-user-select:none; -ms-user-select: none;
 615 }
 616 .onoffswitch-checkbox {
 617     display: none;
 618 }
 619 .onoffswitch-label {
 620     display: block; overflow: hidden; cursor: pointer;
 621     border: 2px solid #999999; border-radius: 20px;
 622 }
 623 .onoffswitch-inner {
 624     display: block; width: 200%; margin-left: -100%;
 625     transition: margin 0.3s ease-in 0s;
 626 }
 627 .onoffswitch-inner:before, .onoffswitch-inner:after {
 628     display: block; float: left; width: 50%; height: 25px; padding: 0; line-height: 25px;
 629     font-size: 14px; color: white; font-family: Trebuchet, Arial, sans-serif; font-weight: bold;
 630     box-sizing: border-box;
 631 }
 632 .onoffswitch-inner:before {
 633     content: "ON";
 634     padding-left: 10px;
 635     background-color: #337ab7; color: #FFFFFF;
 636 }
 637 .onoffswitch-inner:after {
 638     content: "OFF";
 639     padding-right: 10px;
 640     background-color: #EEEEEE; color: #999999;
 641     text-align: right;
 642 }
 643 .onoffswitch-switch {
 644     display: block; width: 18px; margin: 6px;
 645     background: #FFFFFF;
 646     position: absolute; top: 0; bottom: 0;
 647     right: 56px;
 648     border: 2px solid #999999; border-radius: 20px;
 649     transition: all 0.3s ease-in 0s;
 650 }
 651 .onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {
 652     margin-left: 0;
 653 }
 654 .onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {
 655     right: 0px;
 656 }