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 .launchpadCard {
  22   display:-ms-flexbox;
  23   display:flex;
  24   margin-top: 0.75rem;
  25   &-body{
  26     position: relative;
  27   }
  28   .deletingIndicator {
  29     display: -ms-flexbox;
  30     display: flex;
  31     -ms-flex:1;
  32         flex:1;
  33     -ms-flex-align: center;
  34         align-items: center;
  35     -ms-flex-pack: center;
  36         justify-content: center;
  37   }
  38   &_launch {
  39     display:-ms-flexbox;
  40     display:flex;
  41     -ms-flex-direction:column;
  42         flex-direction:column;
  43     -ms-flex: 1;
  44         flex: 1;
  45     -ms-flex-pack: center;
  46         justify-content: center;
  47     -ms-flex-align: center;
  48         align-items: center;
  49     img {
  50       width: 88px;
  51       padding:1rem;
  52     }
  53   }
  54   &_header {
  55     color:white;
  56     padding-right: 1rem;
  57     min-width: 693px;
  58     max-width: 693px;
  59     &-link, a {
  60       display:-ms-flexbox;
  61       display:flex;
  62       -ms-flex-align:center;
  63           align-items:center;
  64       text-decoration: none;
  65       color: inherit;
  66     }
  67     &-link {
  68       margin-left:0.5rem;
  69       cursor:pointer;
  70       .title {
  71         overflow: hidden;
  72         text-overflow: ellipsis;
  73         width: 460px;
  74         display: block;
  75       }
  76     }
  77     .oi {
  78       margin:0 0 -0.25rem 0.5rem;
  79     }
  80     &-title {
  81       display: -ms-flexbox;
  82       display: flex;
  83       line-height: 3rem;
  84       background-color: $brand-green-light;
  85       /*background-color: $primary-header;*/
  86       position: relative;
  87       -ms-flex-direction: row;
  88           flex-direction: row;
  89       -ms-flex-align: center;
  90           align-items: center;
  91       -ms-flex-pack: start;
  92           justify-content: flex-start;
  93       padding-right:1rem;
  94       &-off {
  95         background-color:white;
  96         color:black;
  97       }
  98     }
  99         .activeIcon{
 100           color: #dadada;
 101           position:relative;
 102         span:after{
 103           content: '\25b2';
 104           color:#dadada;
 105           width:0.5rem;
 106           height:0.5rem;
 107           position: absolute;
 108           top: 17px;
 109           left: 8px;
 110         }
 111       }
 112       .inActiveIcon {
 113         color:white;
 114         position:relative;
 115       }
 116     &-actions {
 117       -ms-flex: 1;
 118           flex: 1;
 119       display: -ms-flexbox;
 120       display: flex;
 121       -ms-flex-pack: end;
 122           justify-content: flex-end;
 123       padding-right: 1rem;
 124       h3{
 125         padding-right:0.25rem;
 126         text-transform: capitalize;
 127       }
 128
 129     }
 130     &-status {
 131       background-color: $brand-green;
 132       &-current {
 133         display:-ms-flexbox;
 134         display:flex;
 135         -ms-flex-pack:justify;
 136             justify-content:space-between;
 137         padding: 0.5rem 0;
 138         span,a {
 139           padding: 0 0.25rem;
 140         }
 141         a{
 142           cursor:pointer;
 143           &:hover {
 144             text-decoration:underline;
 145           }
 146         }
 147       }
 148     }
 149     &-operational-status {
 150       &_loading {
 151         display:-ms-flexbox;
 152         display:flex;
 153         -ms-flex-direction:column;
 154             flex-direction:column;
 155         -ms-flex-pack: center;
 156             justify-content: center;
 157         justify-content: center;
 158         -ms-flex-align: center;
 159             align-items: center;
 160         color:$gray-darkest;
 161      }
 162      &_open {
 163         overflow: hidden;
 164         background: #ddd;
 165         height: 100%;
 166         visibility: visible;
 167         opacity: 1;
 168         position: absolute;
 169         width: 100%;
 170         z-index: 99;
 171         display: -ms-flexbox;
 172         display: flex;
 173         -ms-flex-direction: column;
 174             flex-direction: column;
 175         -ms-flex-align: center;
 176             align-items: center;
 177         -ms-flex-pack: center;
 178             justify-content: center;
 179         -ms-flex-line-pack: center;
 180             align-content: center;
 181         color: black;
 182         h2{
 183               padding: 2rem;
 184         }
 185         ul,li {
 186           margin:0.25rem 1rem 0 0.825rem;
 187           list-style-type:disc;
 188           color:black;
 189         }
 190         ul {
 191           overflow: auto;
 192           padding-left: 0.5rem;
 193           padding-right: 1rem;
 194           margin-right: 0.5rem;
 195           height: inherit;
 196
 197           ul {
 198             li {
 199               list-style-type: circle;
 200             }
 201           }
 202         }
 203       }
 204       &_close {
 205         height: 0;
 206         visibility:hidden;
 207         opacity:0;
 208       }
 209     }
 210     &-vnfr_management-links {
 211
 212       &_loading {
 213         display:-ms-flexbox;
 214         display:flex;
 215         -ms-flex-direction:column;
 216             flex-direction:column;
 217         -ms-flex-pack: center;
 218             justify-content: center;
 219         -ms-flex-align: center;
 220             align-items: center;
 221         color:$gray-darkest;
 222      }
 223       &_open {
 224         overflow:hidden;
 225         background: #ddd;
 226         height: 100%;
 227         visibility:visible;
 228         opacity:1;
 229         position:absolute;
 230         width:100%;
 231         z-index: 99;
 232         display: -ms-flexbox;
 233         display: flex;
 234         -ms-flex-direction: column;
 235             flex-direction: column;
 236         -ms-flex-align: center;
 237             align-items: center;
 238         -ms-flex-pack: center;
 239             justify-content: center;
 240         -ms-flex-line-pack: center;
 241             align-content: center;
 242         color:black;
 243
 244         .notice {
 245           padding-top: 0.5rem;
 246           font-size: 0.75rem;
 247           color: $gray-darker;
 248         }
 249
 250         span {
 251           cursor: pointer;
 252           text-decoration: underline;
 253         }
 254
 255         a {
 256           cursor: pointer;
 257           margin-left: 0.5rem;
 258           font-weight: normal;
 259           color: black;
 260         }
 261         h2 {
 262           padding:2rem;
 263         }
 264         ul,li {
 265           margin:0.25rem 1rem 0 0.825rem;
 266           list-style-type:disc;
 267           color:black;
 268         }
 269         ul {
 270           width:90%;
 271           overflow: auto;
 272           padding-right: 1rem;
 273           margin-right: 0.5rem;
 274           height: inherit;
 275         }
 276         li {
 277           -ms-flex-pack: justify;
 278               justify-content: space-between;
 279           display: -ms-flexbox;
 280           display: flex;
 281         }
 282       }
 283       &_close {
 284         height: 0;
 285         visibility:hidden;
 286         opacity:0;
 287       }
 288     }
 289     .failed {
 290       background-color:white;
 291       color:black;
 292       a {
 293         color:black !important;
 294       }
 295     }
 296   }
 297
 298   &_content {
 299     .launchpadCard_content {
 300       overflow-x: hidden;
 301       overflow-y: scroll;
 302     }
 303     .empty {
 304       min-height:50px;
 305       max-width: 100%;
 306       display:-ms-flexbox;
 307       display:flex;
 308       -ms-flex-pack: center;
 309           justify-content: center;
 310       -ms-flex-align: center;
 311           align-items: center;
 312     }
 313   }
 314   &_title {
 315       color:$black;
 316       background:$secondary-header;
 317       padding: 0.5rem;
 318       /* margin: 0 0 0.5rem 0;*/
 319       /* border-top:1px solid #666;*/
 320       /* border-bottom:1px solid #666;*/
 321       border-top:1px solid #f1f1f1;
 322       border-bottom:1px solid #f1f1f1;
 323   }
 324
 325   &_data-list {
 326     ul, dl{
 327       display:-ms-flexbox;
 328       display:flex;
 329       -ms-flex-direction:row;
 330           flex-direction:row;
 331       -ms-flex-wrap:wrap;
 332           flex-wrap:wrap;
 333       -ms-flex-align:start;
 334           align-items:flex-start;
 335        font-size: 0.825rem;
 336       li{
 337         -ms-flex:1 1 30%;
 338             flex:1 1 30%;
 339       }
 340     }
 341     dl {
 342       margin: 0.5rem 0 0.5rem 0;
 343       dt{
 344         margin: 0 0 0 0.5rem;
 345         text-transform:uppercase;
 346       }
 347       dd{
 348         margin: 0 0 0 0.5rem;
 349       }
 350     }
 351     &.CONFIG-PRIMITIVES {
 352       height: 400px;
 353       overflow-y: scroll;
 354       h1 {
 355         margin: 0 0 0 0.5rem;
 356       }
 357       > div {
 358         overflow: hidden;
 359       }
 360     }
 361   }
 362   &_data-list.EPA-PARAMS {
 363       /* height: 105px;*/
 364       width: 715px;
 365       overflow-y: scroll;
 366       h1 {
 367         margin: 0 0 0 0.5rem;
 368       }
 369       > div {
 370         overflow: hidden;
 371       }
 372   }
 373   &_controls{
 374     display:-ms-flexbox;
 375     display:flex;
 376     -ms-flex-direction:row;
 377         flex-direction:row;
 378     .react-tabs {
 379       -ms-flex: auto;
 380           flex: auto;
 381     [role=tab][aria-selected=true] {
 382       background:none;
 383       border:none;
 384       color: rgb(85, 26, 139);
 385     }
 386     [role=tab]{
 387       text-decoration:underline;
 388       border:none;
 389       &:focus{
 390         outline:none;
 391         box-shadow:none;
 392         border:none;
 393         &:after {
 394            background:none;
 395            border:none;
 396       }
 397     }
 398
 399   }
 400     [role=tablist] {
 401       border:none;
 402       margin: 0 0 10px;
 403       padding: 0;
 404       display: -ms-flexbox;
 405       display: flex;
 406       -ms-flex-pack: end;
 407           justify-content: flex-end;
 408
 409          [role=tab]:first-child {
 410             -ms-flex: 1;
 411                 flex: 1;
 412          }
 413     }
 414
 415     }
 416
 417   }
 418   .slick-initialized.slick-slider {
 419     /* min-height:200px;*/
 420   }
 421
 422   .close-btn {
 423     position: absolute;
 424     top: -8px;
 425     right: -8px;
 426     z-index: 100;
 427     cursor: pointer;
 428     img {
 429       width: 1.25rem;
 430       height: 1.25rem;
 431       background-color: white;
 432       border-radius: 15px;
 433     }
 434   }
 435 }