skyquake/plugins/launchpad/src/recordViewer/recordViewer.scss

   1 /*
   2  *
   3  *   Copyright 2016 RIFT.IO Inc
   4  *
   5  *   Licensed under the Apache License, Version 2.0 (the "License");
   6  *   you may not use this file except in compliance with the License.
   7  *   You may obtain a copy of the License at
   8  *
   9  *       http://www.apache.org/licenses/LICENSE-2.0
  10  *
  11  *   Unless required by applicable law or agreed to in writing, software
  12  *   distributed under the License is distributed on an "AS IS" BASIS,
  13  *   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  14  *   See the License for the specific language governing permissions and
  15  *   limitations under the License.
  16  *
  17  */
  18 @import "style/_colors.scss";
  19 @import '../../node_modules/open-iconic/font/css/open-iconic.css';
  20 .app-body {
  21   >header {
  22     padding: 20px 0px;
  23 /*
  24     h1 {
  25       background: url('../../../assets/img/header-logo.png') no-repeat;
  26       height: 51px;
  27       line-height: 51px;
  28       margin-left: 80px;
  29       padding-left: 118px;
  30       left: 0;
  31       text-transform: uppercase;
  32       font-size: 1.625rem;
  33       font-weight: 400;
  34     }
  35     */
  36   }
  37   &.recordView{
  38     -ms-flex:1;
  39         flex:1;
  40   }
  41   .header-nav {
  42     margin: 0rem 1.25rem 1.25rem;
  43
  44     a {
  45       cursor: pointer;
  46       margin-left: 0.5rem;
  47       font-weight: normal;
  48       color: black;
  49     }
  50     .spacer {
  51       padding: 0 0.5rem;
  52     }
  53     .current {
  54       font-weight: bold;
  55     }
  56   }
  57   .recordViewer {
  58     display: -ms-flexbox;
  59     display: flex;
  60     -ms-flex-direction: row;
  61         flex-direction: row;
  62     -ms-flex-pack: start;
  63         justify-content: flex-start; /* align items in Main Axis */
  64     -ms-flex-align: stretch;
  65         align-items: stretch; /* align items in Cross Axis */
  66     -ms-flex-line-pack: stretch;
  67         align-content: stretch;
  68     -ms-flex: 1;
  69         flex: 1;
  70     position: relative;
  71     margin: 0.5rem;
  72     min-width: 900px;
  73
  74     .recordPanels {
  75       display: -ms-flexbox;
  76       display: flex;
  77       -ms-flex: 1;
  78           flex: 1;
  79       -ms-flex-direction: row;
  80           flex-direction: row;
  81       -ms-flex-pack: start;
  82           justify-content: flex-start;
  83       -ms-flex-align: stretch;
  84           align-items: stretch;
  85       -ms-flex-wrap: nowrap;
  86           flex-wrap: nowrap;
  87       -ms-flex-line-pack: stretch;
  88           align-content: stretch;
  89       padding: 0;
  90       margin-top: 0.0725rem;
  91     }
  92     >div {
  93       -ms-flex: 1 1 auto;
  94           flex: 1 1 auto;
  95     }
  96     pre.json {
  97       white-space: pre-wrap;
  98     }
  99     header {
 100       background-color: white;
 101     }
 102     .monitoringParams {
 103       display: -ms-flexbox;
 104       display: flex;
 105       -ms-flex-wrap: wrap;
 106           flex-wrap: wrap;
 107       -ms-flex:1 0 auto;
 108           flex:1 0 auto;
 109       span {
 110         text-align: center;
 111         -ms-flex: 1 1 100%;
 112             flex: 1 1 100%;
 113         padding: 1rem;
 114         font-size: 2rem;
 115         display:block;
 116       }
 117       .mpSlide {
 118         display:-ms-flexbox;
 119         display:flex;
 120         -ms-flex-flow: row wrap;
 121             flex-flow: row wrap;
 122         -ms-flex: 1 1 100%;
 123             flex: 1 1 100%;
 124       }
 125     }
 126     .recordNavigator.dashboardCard {
 127       -ms-flex: 0 1;
 128           flex: 0 1;
 129       /* min-width: 300px;*/
 130       /* max-width: 300px;*/
 131       .nsr:before {
 132         content: 'NSR: '
 133       }
 134       .vnfr:before {
 135         content: 'VNFR: '
 136       }
 137       li {
 138         cursor: pointer;
 139         -ms-flex: 1 1 100%;
 140             flex: 1 1 100%;
 141       }
 142       li:hover {
 143         color: $brand-blue;
 144       }
 145     }
 146     .recordCard.dashboardCard {
 147       -ms-flex: 1 1 auto;
 148           flex: 1 1 auto;
 149       min-width: 600px;
 150       a {
 151           cursor: pointer;
 152           margin-left: 0.5rem;
 153           font-weight: normal;
 154           color: black;
 155       }
 156       .recordCard_content {
 157         padding: 0rem 0;
 158       }
 159     }
 160     .dashboardCard {
 161       margin: 0;
 162       height: auto;
 163       width: auto;
 164       -ms-flex: 1;
 165           flex: 1;
 166
 167       .corner-accent {
 168         display: none;
 169       }
 170       &_content {
 171         border-right: $gray-dark 1px solid;
 172         padding: 1rem 0.5rem;
 173         overflow: auto;
 174
 175         &-body {
 176         }
 177         .empty {
 178           min-height: 50px;
 179           max-width:100%;
 180           display: -ms-flexbox;
 181           display: flex;
 182           -ms-flex-pack: center;
 183               justify-content: center;
 184           -ms-flex-align: center;
 185               align-items: center;
 186         }
 187       }
 188       &:last-child {
 189         .dashboardCard_content {
 190           border-right: none;
 191         }
 192       }
 193       .recordViewToggle {
 194         position:absolute;
 195         top:1.5rem;
 196         right:0.5rem;
 197         cursor:pointer;
 198         display:-ms-flexbox;
 199         display:flex;
 200
 201         &:before {
 202         }
 203         &.on:before{
 204         }
 205       }
 206     }
 207     .loading_content {
 208       -ms-flex-pack: center;
 209           justify-content: center;
 210       -ms-flex-align: center;
 211           -ms-grid-row-align: center;
 212           align-items: center;
 213     }
 214     .recordDetails {
 215       -ms-flex: 1 1 20%;
 216           flex: 1 1 20%;
 217       max-width:600px;
 218       &-body{
 219           background:#f5f2f0;
 220           max-width: 600px;
 221       }
 222       &_content {
 223         padding: 0;
 224
 225         pre {
 226           margin: 0;
 227         }
 228       }
 229     }
 230     .launchpadCard_data-list.EPA-PARAMS {
 231       height: auto;
 232       width: auto;
 233       overflow: visible;
 234
 235       h1 {
 236         margin: 0 0 0 0.5rem;
 237       }
 238     }
 239     .launchpadCard_title {
 240           -ms-flex: 0 1 auto;
 241               flex: 0 1 auto;
 242           min-height: 1.25rem;
 243     }
 244     .nfvi-metrics {
 245       -ms-flex:1 0 auto;
 246           flex:1 0 auto;
 247     }
 248     .nfvi-metrics-tray {
 249       height: auto;
 250       min-height: 150px;
 251     }
 252     .line-scale-pulse-out-rapid {
 253       -ms-flex-item-align: center;
 254           align-self: center;
 255     }
 256     .configPrimitives {
 257       display:-ms-flexbox;
 258       display:flex;
 259       -ms-flex-direction:column;
 260           flex-direction:column;
 261       -ms-flex: 1 0 auto;
 262           flex: 1 0 auto;
 263     }
 264     .consoleUrls {
 265       display:-ms-flexbox;
 266       display:flex;
 267       -ms-flex-direction:column;
 268           flex-direction:column;
 269       -ms-flex: 1 0 auto;
 270           flex: 1 0 auto;
 271     }
 272     .consoleUrlsComponent {
 273       display: flex;
 274       flex: 1 1 auto;
 275       .consoleUrlsList {
 276         display: flex;
 277         flex: 1 1 auto;
 278         li {
 279           display: flex;
 280           flex: 1 1 auto;
 281           h3 {
 282             align-self: flex-start;
 283             flex: 1 1 auto;
 284           }
 285           a {
 286             align-self: flex-end;
 287             flex: 1 1 auto;
 288           }
 289         }
 290       }
 291     }
 292     .cardSectionFooter {
 293       -ms-flex: 1 1 100%;
 294           flex: 1 1 100%;
 295     }
 296     .metricBars {
 297       display:-ms-flexbox;
 298       display:flex;
 299       -ms-flex-direction:row;
 300           flex-direction:row;
 301       -ms-flex-wrap:wrap;
 302           flex-wrap:wrap;
 303       -ms-flex-pack: distribute;
 304           justify-content: space-around;
 305       h3 {
 306         text-align:center;
 307       }
 308       .bar {
 309         fill: $brand-blue-light;
 310         stroke: black;
 311       }
 312       .y.axis {
 313         .domain {
 314           transform:scaleX(0.25);
 315         }
 316       }
 317       .x.axis {
 318         .domain {
 319           transform:scaleY(0.25);
 320         }
 321       }
 322     }
 323     .placementGroups {
 324       display:-ms-flexbox;
 325       display:flex;
 326       .sectionHeader {
 327         width: 100%;
 328         text-transform: uppercase;
 329         padding-right: 0;
 330         color: #000;
 331         background: lightgray;
 332         padding: 0.5rem;
 333         border-top: 1px solid #f1f1f1;
 334         border-bottom: 1px solid #f1f1f1;
 335       }
 336       .panel{
 337         -ms-flex:1 1;
 338             flex:1 1;
 339         border-right: #999 1px solid;
 340         &:last-child {
 341           border-right:0px;
 342         }
 343         &-5{
 344           -ms-flex-preferred-size:50%;
 345               flex-basis:50%;
 346         }
 347       }
 348       .vdupTable{
 349         >div,>dl {
 350           display:-ms-flexbox;
 351           display:flex;
 352           h4, dt, dd{
 353             padding:0.5rem 0;
 354             -ms-flex:1 1 50%;
 355                 flex:1 1 50%;
 356           }
 357           dd {
 358             padding-left:1rem;
 359             li {
 360               cursor:pointer;
 361               text-decoration:underline;
 362             }
 363           }
 364         }
 365         dl:nth-child(even) {
 366           background:$white;
 367         }
 368         .vdup-title {
 369           background: $gray-dark;
 370           padding:0 0.5rem;
 371         }
 372         .nsrType dt, .vnfrType dt, .vduType dt{
 373           border-right:1px solid $gray-dark;
 374           display: -ms-flexbox;
 375           display: flex;
 376           -ms-flex-direction: column;
 377               flex-direction: column;
 378           -ms-flex-pack: center;
 379               justify-content: center;
 380         }
 381         .nsrType{
 382           dt>div:first-child{
 383             padding-left:0.5rem;
 384           }
 385         }
 386         .vnfrType{
 387           dt>div:first-child{
 388             padding-left:1rem;
 389           }
 390         }
 391         .vduType{
 392           dt>div:first-child{
 393             padding-left:1.5rem;
 394           }
 395         }
 396       }
 397       .placementGroupDetails {
 398           margin:0.5rem;
 399         dt {
 400           text-transform:uppercase;
 401           color:$gray-dark;
 402         }
 403         dt, dd {
 404           margin-bottom:0.5rem;
 405         }
 406       }
 407     }
 408   }
 409 }