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 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 .first_child {
 103         margin-top: 10px;
 104 }
 105
 106 div#HeaderDefaultValues.modal-body {
 107     position: relative;
 108     padding: 30px;
 109 }
 110
 111 .btn {
 112   box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .26);
 113   font-weight: 500;
 114   letter-spacing: .01em;
 115   border: none;
 116 }
 117
 118 textarea.code {
 119   font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
 120   font-size: 13px;
 121   min-height: 250px;
 122   resize: vertical;
 123   color: #000;
 124 }
 125
 126 .sub-header {
 127   padding-bottom: 10px;
 128   border-bottom: 1px solid #eee;
 129 }
 130
 131 .navbar-fixed-top {
 132   border: 0;
 133 }
 134
 135 .sidebar {
 136   display: none;
 137 }
 138
 139 .btn-go-back {
 140   margin-top: -5px;
 141 }
 142
 143 a:hover {
 144   text-decoration: none;
 145 }
 146
 147 .nav-sidebar {
 148   margin-right: -21px;
 149   margin-bottom: 20px;
 150   margin-left: -20px;
 151 }
 152
 153 .nav-sidebar > li > a {
 154   padding-right: 20px;
 155   padding-left: 20px;
 156 }
 157
 158 .nav-sidebar > .active > a,
 159 .nav-sidebar > .active > a:hover,
 160 .nav-sidebar > .active > a:focus {
 161   color: #fff;
 162   background-color: #2196F3;
 163 }
 164
 165 .main {
 166   padding: 0;
 167 }
 168
 169 .main .page-header {
 170   margin-top: 0;
 171 }
 172
 173 .file-tree ul.nav.nav-sidebar {
 174   margin: 0;
 175   padding: 0;
 176   padding-left: 12px;
 177 }
 178
 179 .file-tree ul.nav.nav-sidebar > li {
 180   border-left: 1px solid #ddd;
 181   padding-left: 4px;
 182 }
 183
 184 .file-tree ul.nav.nav-sidebar > li > a {
 185   padding: 2px 2px 2px 4px;
 186 }
 187
 188 .file-tree ul.nav.nav-sidebar:first-child {
 189   padding-left: 0;
 190 }
 191
 192 .file-tree ul.nav.nav-sidebar.file-tree-root > li {
 193   border-left: none;
 194   padding-left: 0px;
 195 }
 196
 197 .table td {
 198   vertical-align: middle;
 199 }
 200
 201 #context-menu {
 202   position: absolute;
 203   display: none;
 204   z-index: 9999;
 205 }
 206
 207 .iconset {
 208   padding: 10px;
 209 }
 210
 211 .col-120 {
 212   width: 100px;
 213   max-height: 100px;
 214   float: left;
 215   margin-bottom: 9px;
 216   margin-right: 9px;
 217 }
 218
 219 .col-120:last-child {
 220   margin-right: 0;
 221 }
 222
 223 .iconset .thumbnail {
 224   border-radius: 0;
 225   overflow: hidden;
 226   margin: 0;
 227   padding: 0;
 228   padding: 10px 0;
 229   border: none;
 230 }
 231
 232 .iconset .thumbnail .item-icon {
 233   font-size: 32px;
 234 }
 235
 236 .detail-sources {
 237   text-overflow: ellipsis;
 238   overflow: hidden;
 239   word-wrap: break-word;
 240 }
 241
 242 ::-webkit-scrollbar {
 243   width: 10px;
 244   height: 10px;
 245   background-color: #fff;
 246   box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1), inset -1px -1px 0 rgba(0, 0, 0, .07);
 247 }
 248
 249 ::-webkit-scrollbar:hover {
 250   background-color: #eee;
 251 }
 252
 253 ::-webkit-scrollbar-thumb {
 254   min-height: 0.8em;
 255   min-width: 0.8em;
 256   background-color: rgba(0, 0, 0, .2);
 257   box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1), inset -1px -1px 0 rgba(0, 0, 0, .07);
 258 }
 259
 260 ::-webkit-scrollbar-thumb:hover {
 261   background-color: #bbb;
 262 }
 263
 264 ::-webkit-scrollbar-thumb:active {
 265   background-color: #888;
 266 }
 267
 268 .dropdown-menu.dropdown-right-click {
 269   display: block;
 270   position: static;
 271   margin-bottom: 5px;
 272   font-size: 1em;
 273 }
 274
 275 .dropdown-menu.dropdown-right-click>li>a {
 276   padding: 5px 12px;
 277 }
 278
 279 .dropdown-menu.dropdown-right-click>li>a>i {
 280   font-size: .9em;
 281   margin-right: 1px;
 282 }
 283
 284 .dropdown-menu.dropdown-right-click .divider {
 285   margin: 3px 0;
 286 }
 287
 288 .spinner-wrapper {
 289   margin: 0 auto;
 290   text-align: center;
 291   margin-top: 8%;
 292 }
 293
 294 table th > a:hover,
 295 table th > a:active,
 296 table th > a:focus {
 297   text-decoration: none;
 298 }
 299
 300 .sortorder:after {
 301   color: #2196f3;
 302   content: '\25bc';
 303 }
 304
 305 .sortorder.reverse:after {
 306   color: #2196f3;
 307   content: '\25b2';
 308 }
 309
 310 [ng\:cloak], [ng-cloak],
 311 [data-ng-cloak], [x-ng-cloak],
 312 .ng-cloak, .x-ng-cloak {
 313   display: none !important;
 314 }
 315
 316 .mr2 {
 317   margin-right: 2px;
 318 }
 319
 320 .mr5 {
 321   margin-right: 5px;
 322 }
 323
 324 .mt10 {
 325   margin-top: 10px;
 326 }
 327
 328 .mb0 {
 329   margin-bottom: 0;
 330 }
 331
 332 .pointer {
 333   cursor: pointer;
 334 }
 335
 336 .block {
 337   display: block;
 338 }
 339
 340 .ellipsis {
 341   overflow: hidden;
 342   text-overflow: ellipsis;
 343   white-space: nowrap;
 344 }
 345
 346 .bold {
 347   font-weight: bold;
 348 }
 349
 350 @media (min-width: 768px) {
 351   .main {
 352     padding-right: 0;
 353     padding-left: 0;
 354   }
 355
 356   .sidebar {
 357     position: fixed;
 358     top: 50px;
 359     bottom: 0;
 360     left: 0;
 361     z-index: 1000;
 362     display: block;
 363     padding: 5px 0;
 364     overflow-x: hidden;
 365     overflow-y: auto;
 366     background-color: #f5f5f5;
 367     border-right: 1px solid #eee;
 368   }
 369 }
 370
 371 @media (max-width: 768px) {
 372   .navbar-form .btn {
 373     margin-top: 5px;
 374   }
 375 }
 376
 377 @media (max-width: 475px) {
 378   .table.table-files .btn {
 379     display: none;
 380   }
 381 }
 382
 383 /* Tooltip container */
 384 .tooltip {
 385     position: relative;
 386     display: inline-block;
 387     border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
 388 }
 389
 390 /* Tooltip text */
 391 .tooltip .tooltiptext {
 392     visibility: hidden;
 393     width: 120px;
 394     background-color: #555;
 395     color: #fff;
 396     text-align: center;
 397     padding: 5px 0;
 398     border-radius: 6px;
 399
 400     /* Position the tooltip text */
 401     position: absolute;
 402     z-index: 1;
 403     bottom: 125%;
 404     left: 50%;
 405     margin-left: -60px;
 406
 407     /* Fade in tooltip */
 408     opacity: 0;
 409     transition: opacity 1s;
 410 }
 411
 412 /* Tooltip arrow */
 413 .tooltip .tooltiptext::after {
 414     content: "";
 415     position: absolute;
 416     top: 100%;
 417     left: 50%;
 418     margin-left: -5px;
 419     border-width: 5px;
 420     border-style: solid;
 421     border-color: #555 transparent transparent transparent;
 422 }
 423
 424 /* Show the tooltip text when you mouse over the tooltip container */
 425 .tooltip:hover .tooltiptext {
 426     visibility: visible;
 427     opacity: 1;
 428 }
 429
 430 .mstooltip {
 431     position: relative;
 432     display: inline-block;
 433     color: orange;
 434     font-weight: lighter;
 435 }
 436
 437 .mstooltip .tooltiptext {
 438     font-weight: lighter;
 439     visibility: hidden;
 440     width: 150px;
 441     background-color: #555;
 442     color: #fff;
 443     text-align: center;
 444     border-radius: 6px;
 445     padding: 4px 5px;
 446     margin-left: 5px;
 447     position: absolute;
 448     bottom: 100%;
 449     left: 50%;
 450     z-index: 1;
 451 }
 452
 453 .mstooltip:hover .tooltiptext {
 454     visibility: visible;
 455 }