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