resources/scss/_customByoq.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 .tinkerpop-book {
  22   background-repeat: no-repeat;
  23   height: 300px !important;
  24   width: 700px;
  25 }
  26 .fixed-panel {
  27   position: absolute;
  28   top: 100px;
  29   width: 20%;
  30   right: 20px;
  31 }
  32
  33 .customDsl .card {
  34   position: relative;
  35   display: -webkit-box;
  36   display: -ms-flexbox;
  37   display: flex;
  38   -webkit-box-orient: vertical;
  39   -webkit-box-direction: normal;
  40   -ms-flex-direction: column;
  41   flex-direction: column;
  42   min-width: 0;
  43   word-wrap: break-word;
  44   background-color: #fff;
  45   background-clip: border-box;
  46   border: 1px solid rgba(0, 0, 0, 0.125);
  47   border-radius: 0.25rem;
  48 }
  49
  50 .addCardFooter {
  51   padding-bottom:50px;
  52 }
  53 .card-body {
  54   -webkit-box-flex: 1;
  55   -ms-flex: 1 1 auto;
  56   flex: 1 1 auto;
  57   padding: 1.25rem;
  58 }
  59 .dark-modal .modal-content {
  60   background-color: white;
  61   color: #292b2c;
  62 }
  63 .dark-modal .close {
  64   color: #292b2c;
  65 }
  66 .dsl-hint {
  67   font-size: 2rem !important;
  68   cursor: pointer;
  69   height: 0.5rem;
  70 }
  71 .dsl-hint:hover {
  72   color: #292b2c;
  73   background-color: white;
  74   cursor: pointer;
  75   border-color: #0062cc;
  76 }
  77
  78 .dsl-hint:focus, .dsl-hint.focus {
  79   box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.5);
  80 }
  81 .card > hr {
  82   margin-right: 0;
  83   margin-left: 0;
  84 }
  85
  86 .card > .list-group:first-child .list-group-item:first-child {
  87   border-top-left-radius: 0.25rem;
  88   border-top-right-radius: 0.25rem;
  89 }
  90
  91 .card > .list-group:last-child .list-group-item:last-child {
  92   border-bottom-right-radius: 0.25rem;
  93   border-bottom-left-radius: 0.25rem;
  94 }
  95
  96 .card-body {
  97   -webkit-box-flex: 1;
  98   -ms-flex: 1 1 auto;
  99   flex: 1 1 auto;
 100   padding: 1.25rem;
 101 }
 102
 103 .card-title {
 104   margin-bottom: 0.75rem;
 105 }
 106
 107 .card-subtitle {
 108   margin-top: -0.375rem;
 109   margin-bottom: 0;
 110 }
 111
 112 .card-text:last-child {
 113   margin-bottom: 0;
 114 }
 115
 116 .card-link:hover {
 117   text-decoration: none;
 118 }
 119
 120 .card-link + .card-link {
 121   margin-left: 1.25rem;
 122 }
 123
 124 .card-header-help {
 125   padding: 0.75rem 1.25rem;
 126   margin-bottom: 0;
 127   background-color: rgba(0, 0, 0, 0.03);
 128   border-bottom: 1px solid rgba(0, 0, 0, 0.125);
 129
 130 }
 131
 132 .card-header {
 133   padding: 0.75rem 1.25rem;
 134   margin-bottom: 0;
 135   background-color: rgba(0, 0, 0, 0.03);
 136   border-bottom: 1px solid rgba(0, 0, 0, 0.125);
 137 }
 138
 139 .card-header:first-child {
 140   border-radius: calc(0.25rem - 1px) calc(0.25rem - 1px) 0 0;
 141 }
 142
 143 .card-header + .list-group .list-group-item:first-child {
 144   border-top: 0;
 145 }
 146
 147 .card-footer {
 148   padding: 0.75rem 1.25rem;
 149   background-color: #f2f2f2;
 150   border-top: 1px solid rgba(0, 0, 0, 0.125);
 151 }
 152
 153 .cfFormat{
 154   position:absolute;
 155   bottom:0;
 156   width:100%;
 157 }
 158
 159 .card-footer:last-child {
 160   border-radius: 0 0 calc(0.25rem - 1px) calc(0.25rem - 1px);
 161 }
 162
 163 .card-header-tabs {
 164   margin-right: -0.625rem;
 165   margin-bottom: -0.75rem;
 166   margin-left: -0.625rem;
 167   border-bottom: 0;
 168 }
 169
 170 .card-header-pills {
 171   margin-right: -0.625rem;
 172   margin-left: -0.625rem;
 173 }
 174
 175 .card-img-overlay {
 176   position: absolute;
 177   top: 0;
 178   right: 0;
 179   bottom: 0;
 180   left: 0;
 181   padding: 1.25rem;
 182 }
 183
 184 .card-img {
 185   width: 100%;
 186   border-radius: calc(0.25rem - 1px);
 187 }
 188
 189 .card-img-top {
 190   width: 100%;
 191   border-top-left-radius: calc(0.25rem - 1px);
 192   border-top-right-radius: calc(0.25rem - 1px);
 193 }
 194
 195 .card-img-bottom {
 196   width: 100%;
 197   border-bottom-right-radius: calc(0.25rem - 1px);
 198   border-bottom-left-radius: calc(0.25rem - 1px);
 199 }
 200
 201 .card-deck {
 202   display: -webkit-box;
 203   display: -ms-flexbox;
 204   display: flex;
 205   -webkit-box-orient: vertical;
 206   -webkit-box-direction: normal;
 207   -ms-flex-direction: column;
 208   flex-direction: column;
 209 }
 210
 211 .card-deck .card {
 212   margin-bottom: 15px;
 213 }
 214
 215 @media (min-width: 576px) {
 216   .card-deck {
 217     -webkit-box-orient: horizontal;
 218     -webkit-box-direction: normal;
 219     -ms-flex-flow: row wrap;
 220     flex-flow: row wrap;
 221     margin-right: -15px;
 222     margin-left: -15px;
 223   }
 224   .card-deck .card {
 225     display: -webkit-box;
 226     display: -ms-flexbox;
 227     display: flex;
 228     -webkit-box-flex: 1;
 229     -ms-flex: 1 0 0%;
 230     flex: 1 0 0%;
 231     -webkit-box-orient: vertical;
 232     -webkit-box-direction: normal;
 233     -ms-flex-direction: column;
 234     flex-direction: column;
 235     margin-right: 15px;
 236     margin-bottom: 0;
 237     margin-left: 15px;
 238   }
 239 }
 240
 241 .card-group {
 242   display: -webkit-box;
 243   display: -ms-flexbox;
 244   display: flex;
 245   -webkit-box-orient: vertical;
 246   -webkit-box-direction: normal;
 247   -ms-flex-direction: column;
 248   flex-direction: column;
 249 }
 250
 251 .card-group > .card {
 252   margin-bottom: 15px;
 253 }
 254
 255 @media (min-width: 576px) {
 256   .card-group {
 257     -webkit-box-orient: horizontal;
 258     -webkit-box-direction: normal;
 259     -ms-flex-flow: row wrap;
 260     flex-flow: row wrap;
 261   }
 262   .card-group > .card {
 263     -webkit-box-flex: 1;
 264     -ms-flex: 1 0 0%;
 265     flex: 1 0 0%;
 266     margin-bottom: 0;
 267   }
 268   .card-group > .card + .card {
 269     margin-left: 0;
 270     border-left: 0;
 271   }
 272   .card-group > .card:first-child {
 273     border-top-right-radius: 0;
 274     border-bottom-right-radius: 0;
 275   }
 276   .card-group > .card:first-child .card-img-top,
 277   .card-group > .card:first-child .card-header {
 278     border-top-right-radius: 0;
 279   }
 280   .card-group > .card:first-child .card-img-bottom,
 281   .card-group > .card:first-child .card-footer {
 282     border-bottom-right-radius: 0;
 283   }
 284   .card-group > .card:last-child {
 285     border-top-left-radius: 0;
 286     border-bottom-left-radius: 0;
 287   }
 288   .card-group > .card:last-child .card-img-top,
 289   .card-group > .card:last-child .card-header {
 290     border-top-left-radius: 0;
 291   }
 292   .card-group > .card:last-child .card-img-bottom,
 293   .card-group > .card:last-child .card-footer {
 294     border-bottom-left-radius: 0;
 295   }
 296   .card-group > .card:only-child {
 297     border-radius: 0.25rem;
 298   }
 299   .card-group > .card:only-child .card-img-top,
 300   .card-group > .card:only-child .card-header {
 301     border-top-left-radius: 0.25rem;
 302     border-top-right-radius: 0.25rem;
 303   }
 304   .card-group > .card:only-child .card-img-bottom,
 305   .card-group > .card:only-child .card-footer {
 306     border-bottom-right-radius: 0.25rem;
 307     border-bottom-left-radius: 0.25rem;
 308   }
 309   .card-group > .card:not(:first-child):not(:last-child):not(:only-child) {
 310     border-radius: 0;
 311   }
 312   .card-group > .card:not(:first-child):not(:last-child):not(:only-child) .card-img-top,
 313   .card-group > .card:not(:first-child):not(:last-child):not(:only-child) .card-img-bottom,
 314   .card-group > .card:not(:first-child):not(:last-child):not(:only-child) .card-header,
 315   .card-group > .card:not(:first-child):not(:last-child):not(:only-child) .card-footer {
 316     border-radius: 0;
 317   }
 318 }
 319
 320 .card-columns .card {
 321   margin-bottom: 0.75rem;
 322 }
 323
 324 @media (min-width: 576px) {
 325   .card-columns {
 326     -webkit-column-count: 3;
 327     -moz-column-count: 3;
 328     column-count: 3;
 329     -webkit-column-gap: 1.25rem;
 330     -moz-column-gap: 1.25rem;
 331     column-gap: 1.25rem;
 332   }
 333   .card-columns .card {
 334     display: inline-block;
 335     width: 100%;
 336   }
 337 }
 338
 339 .text-center {
 340   text-align: center !important;
 341 }
 342
 343 .text-white {
 344   color: #fff !important;
 345 }
 346 .customDsl a.bg-primary:hover, a.bg-primary:focus,
 347 button.bg-primary:hover,
 348 button.bg-primary:focus {
 349   background-color: #0062cc !important;
 350 }
 351
 352 .form-group {
 353   margin-bottom: 1rem;
 354 }
 355 .dsl-hint-form-group {
 356   margin-bottom: 1rem;
 357   margin-top: 25px;
 358 }
 359
 360 .customDsl pre,
 361 code,
 362 kbd,
 363 samp {
 364   font-family: monospace, monospace;
 365   font-size: 1em;
 366 }
 367
 368 .customDsl pre {
 369   margin-top: 0;
 370   margin-bottom: 1rem;
 371   overflow: auto;
 372   display: block;
 373   padding: 0px;
 374   font-size: 13px;
 375   line-height: 1.42857;
 376   word-break: break-all;
 377   word-wrap: break-word;
 378   color: #191919;
 379   background-color: #ffffff;
 380   border: none;
 381   border-radius: 0;
 382 }
 383 .customDsl pre {
 384   white-space: pre-wrap !important;
 385 }
 386
 387 blockquote {
 388   border: 1px solid #999;
 389   page-break-inside: avoid;
 390 }
 391
 392 .customDsl [class*="licon-"]::before, .customDsl [class*="icon-"]::after {
 393   font-size: 8em;
 394   height: 8em;
 395 }
 396 .hidden {
 397   display:none;
 398 }
 399 .show{
 400   display:block;
 401 }
 402
 403 .customDsl .btn i {
 404   font-size: 30px;
 405   font-style: normal;
 406   text-align: center;
 407   color: #007bff;
 408 }
 409 .node {
 410   cursor: pointer;
 411 }
 412
 413 .node circle {
 414   fill: #fff;
 415   stroke: steelblue;
 416   stroke-width: 1.5px;
 417 }
 418
 419 .node text {
 420   font: 10px sans-serif;
 421 }
 422
 423 .link {
 424   fill: none;
 425   stroke: #ccc;
 426   stroke-width: 1.5px;
 427 }
 428
 429 .dsl-panel .panel{
 430     margin-bottom: 0px !important;
 431 }
 432 .actionsRow {
 433     white-space: nowrap;
 434 }
 435
 436 .toggle-theme.react-toggle--checked .react-toggle-track {
 437   background-color: #009fdb;
 438 }