skyquake/plugins/launchpad/src/launchpad_card/launchpad_card.scss

   1
   2 /*
   3  *
   4  *   Copyright 2016 RIFT.IO Inc
   5  *
   6  *   Licensed under the Apache License, Version 2.0 (the "License");
   7  *   you may not use this file except in compliance with the License.
   8  *   You may obtain a copy of the License at
   9  *
  10  *       http://www.apache.org/licenses/LICENSE-2.0
  11  *
  12  *   Unless required by applicable law or agreed to in writing, software
  13  *   distributed under the License is distributed on an "AS IS" BASIS,
  14  *   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  15  *   See the License for the specific language governing permissions and
  16  *   limitations under the License.
  17  *
  18  */
  19 @import 'style/_colors.scss';
  20 @import '../../node_modules/open-iconic/font/css/open-iconic.css';
  21 $LaunchpadCardWidth: 693px;
  22 .launchpadCard {
  23   display:-ms-flexbox;
  24   display:-webkit-box;
  25   display:flex;
  26   margin-top: 0.75rem;
  27   &-body{
  28     position: relative;
  29   }
  30   .deletingIndicator {
  31     display: -ms-flexbox;
  32     display: -webkit-box;
  33     display: flex;
  34     -ms-flex:1;
  35         -webkit-box-flex:1;
  36             flex:1;
  37     -ms-flex-align: center;
  38         -webkit-box-align: center;
  39             align-items: center;
  40     -ms-flex-pack: center;
  41         -webkit-box-pack: center;
  42             justify-content: center;
  43   }
  44   &_launch {
  45     display:-ms-flexbox;
  46     display:-webkit-box;
  47     display:flex;
  48     -ms-flex-direction:column;
  49         -webkit-box-orient:vertical;
  50         -webkit-box-direction:normal;
  51             flex-direction:column;
  52     -ms-flex: 1;
  53         -webkit-box-flex: 1;
  54             flex: 1;
  55     -ms-flex-pack: center;
  56         -webkit-box-pack: center;
  57             justify-content: center;
  58     -ms-flex-align: center;
  59         -webkit-box-align: center;
  60             align-items: center;
  61     img {
  62       width: 88px;
  63       padding:1rem;
  64     }
  65   }
  66   &_header {
  67     color:white;
  68     padding-right: 1rem;
  69     width: $LaunchpadCardWidth;
  70     &-link, a {
  71       display:-ms-flexbox;
  72       display:-webkit-box;
  73       display:flex;
  74       -ms-flex-align:center;
  75           -webkit-box-align:center;
  76               align-items:center;
  77       text-decoration: none;
  78       color: inherit;
  79     }
  80     &-link {
  81       margin-left:0.5rem;
  82       cursor:pointer;
  83       .title {
  84         overflow: hidden;
  85         text-overflow: ellipsis;
  86         width: 460px;
  87         display: block;
  88       }
  89     }
  90     .oi {
  91       margin:0 0 -0.25rem 0.5rem;
  92     }
  93     &-title {
  94       display: -ms-flexbox;
  95       display: -webkit-box;
  96       display: flex;
  97       line-height: 3rem;
  98       background-color: $brand-green-light;
  99       /*background-color: $primary-header;*/
 100       position: relative;
 101       -ms-flex-direction: row;
 102           -webkit-box-orient: horizontal;
 103           -webkit-box-direction: normal;
 104               flex-direction: row;
 105       -ms-flex-align: center;
 106           -webkit-box-align: center;
 107               align-items: center;
 108       -ms-flex-pack: start;
 109           -webkit-box-pack: start;
 110               justify-content: flex-start;
 111       padding-right:1rem;
 112       &-off {
 113         background-color:white;
 114         color:black;
 115       }
 116     }
 117         .activeIcon{
 118           color: #dadada;
 119           position:relative;
 120         span:after{
 121           content: '\25b2';
 122           color:#dadada;
 123           width:0.5rem;
 124           height:0.5rem;
 125           position: absolute;
 126           top: 17px;
 127           left: 8px;
 128         }
 129       }
 130       .inActiveIcon {
 131         color:white;
 132         position:relative;
 133       }
 134     &-actions {
 135       -ms-flex: 1;
 136           -webkit-box-flex: 1;
 137               flex: 1;
 138       display: -ms-flexbox;
 139       display: -webkit-box;
 140       display: flex;
 141       -ms-flex-pack: end;
 142           -webkit-box-pack: end;
 143               justify-content: flex-end;
 144       padding-right: 1rem;
 145       h3{
 146         padding-right:0.25rem;
 147         text-transform: capitalize;
 148       }
 149
 150     }
 151     &-status {
 152       background-color: $brand-green;
 153       width:$LaunchpadCardWidth;
 154       &-current {
 155         display:-ms-flexbox;
 156         display:-webkit-box;
 157         display:flex;
 158         -ms-flex-pack:justify;
 159             -webkit-box-pack:justify;
 160                 justify-content:space-between;
 161         padding: 0.5rem 0;
 162         width: $LaunchpadCardWidth;
 163         span,a {
 164           padding: 0 0.25rem;
 165         }
 166         a{
 167           cursor:pointer;
 168           &:hover {
 169             text-decoration:underline;
 170           }
 171         }
 172       }
 173     }
 174     &-operational-status {
 175       &_loading {
 176         display:-ms-flexbox;
 177         display:-webkit-box;
 178         display:flex;
 179         -ms-flex-direction:column;
 180             -webkit-box-orient:vertical;
 181             -webkit-box-direction:normal;
 182                 flex-direction:column;
 183         -ms-flex-pack: center;
 184             -webkit-box-pack: center;
 185                 justify-content: center;
 186         justify-content: center;
 187         -ms-flex-align: center;
 188             -webkit-box-align: center;
 189                 align-items: center;
 190         color:$gray-darkest;
 191         width: $LaunchpadCardWidth;
 192      }
 193      &_open {
 194         overflow: hidden;
 195         background: #ddd;
 196         height: 100%;
 197         visibility: visible;
 198         opacity: 1;
 199         position: absolute;
 200         width: 100%;
 201         z-index: 99;
 202         display: -ms-flexbox;
 203         display: -webkit-box;
 204         display: flex;
 205         -ms-flex-direction: column;
 206             -webkit-box-orient: vertical;
 207             -webkit-box-direction: normal;
 208                 flex-direction: column;
 209         -ms-flex-align: center;
 210             -webkit-box-align: center;
 211                 align-items: center;
 212         -ms-flex-pack: center;
 213             -webkit-box-pack: center;
 214                 justify-content: center;
 215         -ms-flex-line-pack: center;
 216             align-content: center;
 217         width: $LaunchpadCardWidth;
 218         color: black;
 219         h2{
 220               padding: 2rem;
 221         }
 222         ul,li {
 223           margin:0.25rem 1rem 0 0.825rem;
 224           list-style-type:disc;
 225           color:black;
 226         }
 227         ul {
 228           overflow: auto;
 229           padding-left: 0.5rem;
 230           padding-right: 1rem;
 231           margin-right: 0.5rem;
 232           height: inherit;
 233
 234           ul {
 235             li {
 236               list-style-type: circle;
 237             }
 238           }
 239         }
 240       }
 241       &_close {
 242         height: 0;
 243         visibility:hidden;
 244         opacity:0;
 245       }
 246     }
 247     &-vnfr_management-links {
 248
 249       &_loading {
 250         display:-ms-flexbox;
 251         display:-webkit-box;
 252         display:flex;
 253         -ms-flex-direction:column;
 254             -webkit-box-orient:vertical;
 255             -webkit-box-direction:normal;
 256                 flex-direction:column;
 257         -ms-flex-pack: center;
 258             -webkit-box-pack: center;
 259                 justify-content: center;
 260         -ms-flex-align: center;
 261             -webkit-box-align: center;
 262                 align-items: center;
 263         color:$gray-darkest;
 264
 265
 266      }
 267       &_open {
 268         overflow:hidden;
 269         background: #ddd;
 270         height: 100%;
 271         visibility:visible;
 272         opacity:1;
 273         position:absolute;
 274         width:100%;
 275         z-index: 99;
 276         display: -ms-flexbox;
 277         display: -webkit-box;
 278         display: flex;
 279         -ms-flex-direction: column;
 280             -webkit-box-orient: vertical;
 281             -webkit-box-direction: normal;
 282                 flex-direction: column;
 283         -ms-flex-align: center;
 284             -webkit-box-align: center;
 285                 align-items: center;
 286         justify-content: flex-start;
 287         -ms-flex-line-pack: center;
 288             align-content: center;
 289         color:black;
 290
 291         .notice {
 292           padding-top: 0.5rem;
 293           font-size: 0.75rem;
 294           color: $gray-darker;
 295         }
 296
 297         span {
 298           cursor: pointer;
 299           text-decoration: underline;
 300         }
 301
 302         a {
 303           cursor: pointer;
 304           margin-left: 0.5rem;
 305           font-weight: normal;
 306           color: black;
 307         }
 308         h2 {
 309           padding:2rem;
 310           padding-left: 0;
 311         }
 312         ul,li {
 313           margin:0.25rem 1rem 0 0.825rem;
 314           list-style-type:disc;
 315           color:black;
 316         }
 317         ul {
 318           width:90%;
 319           overflow: auto;
 320           padding-right: 1rem;
 321           margin-right: 0.5rem;
 322           height: inherit;
 323         }
 324         li {
 325           -ms-flex-pack: justify;
 326               -webkit-box-pack: justify;
 327                   justify-content: space-between;
 328           display: -ms-flexbox;
 329           display: -webkit-box;
 330           display: flex;
 331         }
 332       }
 333       &_close {
 334         height: 0;
 335         visibility:hidden;
 336         opacity:0;
 337       }
 338     }
 339     .failed {
 340       background-color:white;
 341       color:black;
 342       a {
 343         color:black !important;
 344       }
 345     }
 346   }
 347
 348   &_content {
 349     .launchpadCard_content {
 350       overflow-x: hidden;
 351       overflow-y: scroll;
 352     }
 353     .empty {
 354       min-height:50px;
 355       max-width: 100%;
 356       display:-ms-flexbox;
 357       display:-webkit-box;
 358       display:flex;
 359       -ms-flex-pack: center;
 360           -webkit-box-pack: center;
 361               justify-content: center;
 362       -ms-flex-align: center;
 363           -webkit-box-align: center;
 364               align-items: center;
 365     }
 366   }
 367   &_title {
 368       color:$black;
 369       background:$secondary-header;
 370       padding: 0.5rem;
 371       /* margin: 0 0 0.5rem 0;*/
 372       /* border-top:1px solid #666;*/
 373       /* border-bottom:1px solid #666;*/
 374       border-top:1px solid #f1f1f1;
 375       border-bottom:1px solid #f1f1f1;
 376   }
 377
 378   &_data-list {
 379     ul, dl{
 380       display:-ms-flexbox;
 381       display:-webkit-box;
 382       display:flex;
 383       -ms-flex-direction:row;
 384           -webkit-box-orient:horizontal;
 385           -webkit-box-direction:normal;
 386               flex-direction:row;
 387       -ms-flex-wrap:wrap;
 388           flex-wrap:wrap;
 389       -ms-flex-align:start;
 390           -webkit-box-align:start;
 391               align-items:flex-start;
 392        font-size: 0.825rem;
 393       li{
 394         -ms-flex:1 1 30%;
 395             -webkit-box-flex:1;
 396                 flex:1 1 30%;
 397       }
 398     }
 399     dl {
 400       margin: 0.5rem 0 0.5rem 0;
 401       dt{
 402         margin: 0 0 0 0.5rem;
 403         text-transform:uppercase;
 404       }
 405       dd{
 406         margin: 0 0 0 0.5rem;
 407       }
 408     }
 409     &.CONFIG-PRIMITIVES {
 410       height: 400px;
 411       overflow-y: scroll;
 412       h1 {
 413         margin: 0 0 0 0.5rem;
 414       }
 415       > div {
 416         overflow: hidden;
 417       }
 418     }
 419   }
 420   &_data-list.EPA-PARAMS {
 421       /* height: 105px;*/
 422       width: 715px;
 423       overflow-y: scroll;
 424       h1 {
 425         margin: 0 0 0 0.5rem;
 426       }
 427       > div {
 428         overflow: hidden;
 429       }
 430   }
 431   &_controls{
 432     display:-ms-flexbox;
 433     display:-webkit-box;
 434     display:flex;
 435     -ms-flex-direction:row;
 436         -webkit-box-orient:horizontal;
 437         -webkit-box-direction:normal;
 438             flex-direction:row;
 439     .react-tabs {
 440       -ms-flex: auto;
 441           -webkit-box-flex: 1;
 442               flex: auto;
 443     [role=tab][aria-selected=true] {
 444       background:none;
 445       border:none;
 446       color: rgb(85, 26, 139);
 447     }
 448     [role=tab]{
 449       text-decoration:underline;
 450       border:none;
 451       &:focus{
 452         outline:none;
 453         -webkit-box-shadow:none;
 454                 box-shadow:none;
 455         border:none;
 456         &:after {
 457            background:none;
 458            border:none;
 459       }
 460     }
 461
 462   }
 463     [role=tablist] {
 464       border:none;
 465       margin: 0 0 10px;
 466       padding: 0;
 467       display: -ms-flexbox;
 468       display: -webkit-box;
 469       display: flex;
 470       -ms-flex-pack: end;
 471           -webkit-box-pack: end;
 472               justify-content: flex-end;
 473
 474          [role=tab]:first-child {
 475             -ms-flex: 1;
 476                 -webkit-box-flex: 1;
 477                     flex: 1;
 478          }
 479     }
 480
 481     }
 482
 483   }
 484   .slick-initialized.slick-slider {
 485     /* min-height:200px;*/
 486   }
 487
 488   .close-btn {
 489     position: absolute;
 490     top: -8px;
 491     right: -8px;
 492     z-index: 100;
 493     cursor: pointer;
 494     img {
 495       width: 1.25rem;
 496       height: 1.25rem;
 497       background-color: white;
 498       border-radius: 15px;
 499     }
 500   }
 501   .dataCenterTable {
 502     display: flex;
 503     flex-direction: column;
 504     width: 88%;
 505     &-header {
 506       align-items: flex-end;
 507       font-weight:bold;
 508     }
 509       > div {
 510         display: flex;
 511
 512         &:not(:first-child) {
 513           margin-top:1rem;
 514           align-items: flex-start;
 515         }
 516         > div {
 517           flex: 1 0 25%;
 518         }
 519       }
 520   }
 521 }