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         flex-direction: column;
 279         li {
 280           display: flex;
 281           flex: 1 1 auto;
 282           &.notice {
 283             padding-top: 0.5rem;
 284             font-size: 0.75rem;
 285             color: $gray-darker;
 286           }
 287           .consoleLink {
 288             cursor: pointer;
 289             text-decoration: underline;
 290           }
 291           h3 {
 292             align-self: flex-start;
 293             flex: 1 1 auto;
 294           }
 295           a {
 296             align-self: flex-end;
 297             flex: 1 1 auto;
 298           }
 299         }
 300       }
 301     }
 302     .cardSectionFooter {
 303       -ms-flex: 1 1 100%;
 304           flex: 1 1 100%;
 305     }
 306     .metricBars {
 307       display:-ms-flexbox;
 308       display:flex;
 309       -ms-flex-direction:row;
 310           flex-direction:row;
 311       -ms-flex-wrap:wrap;
 312           flex-wrap:wrap;
 313       -ms-flex-pack: distribute;
 314           justify-content: space-around;
 315       h3 {
 316         text-align:center;
 317       }
 318       .bar {
 319         fill: $brand-blue-light;
 320         stroke: black;
 321       }
 322       .y.axis {
 323         .domain {
 324           transform:scaleX(0.25);
 325         }
 326       }
 327       .x.axis {
 328         .domain {
 329           transform:scaleY(0.25);
 330         }
 331       }
 332     }
 333     .placementGroups {
 334       display:-ms-flexbox;
 335       display:flex;
 336       .sectionHeader {
 337         width: 100%;
 338         text-transform: uppercase;
 339         padding-right: 0;
 340         color: #000;
 341         background: lightgray;
 342         padding: 0.5rem;
 343         border-top: 1px solid #f1f1f1;
 344         border-bottom: 1px solid #f1f1f1;
 345       }
 346       .panel{
 347         -ms-flex:1 1;
 348             flex:1 1;
 349         border-right: #999 1px solid;
 350         &:last-child {
 351           border-right:0px;
 352         }
 353         &-5{
 354           -ms-flex-preferred-size:50%;
 355               flex-basis:50%;
 356         }
 357       }
 358       .vdupTable{
 359         >div,>dl {
 360           display:-ms-flexbox;
 361           display:flex;
 362           h4, dt, dd{
 363             padding:0.5rem 0;
 364             -ms-flex:1 1 50%;
 365                 flex:1 1 50%;
 366           }
 367           dd {
 368             padding-left:1rem;
 369             li {
 370               cursor:pointer;
 371               text-decoration:underline;
 372             }
 373           }
 374         }
 375         dl:nth-child(even) {
 376           background:$white;
 377         }
 378         .vdup-title {
 379           background: $gray-dark;
 380           padding:0 0.5rem;
 381         }
 382         .nsrType dt, .vnfrType dt, .vduType dt{
 383           border-right:1px solid $gray-dark;
 384           display: -ms-flexbox;
 385           display: flex;
 386           -ms-flex-direction: column;
 387               flex-direction: column;
 388           -ms-flex-pack: center;
 389               justify-content: center;
 390         }
 391         .nsrType{
 392           dt>div:first-child{
 393             padding-left:0.5rem;
 394           }
 395         }
 396         .vnfrType{
 397           dt>div:first-child{
 398             padding-left:1rem;
 399           }
 400         }
 401         .vduType{
 402           dt>div:first-child{
 403             padding-left:1.5rem;
 404           }
 405         }
 406       }
 407       .placementGroupDetails {
 408           margin:0.5rem;
 409         dt {
 410           text-transform:uppercase;
 411           color:$gray-dark;
 412         }
 413         dt, dd {
 414           margin-bottom:0.5rem;
 415         }
 416       }
 417     }
 418   }
 419 }