skyquake/plugins/launchpad/src/launchpad.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 "style/layout.scss";
  21 @import '../node_modules/open-iconic/font/css/open-iconic.css';
  22
  23 .app-body {
  24     display:-ms-flexbox;
  25     display:flex;
  26     -ms-flex-direction:column;
  27         flex-direction:column;
  28     display: flex;
  29     flex-direction: column;
  30     -ms-flex-align: stretch;
  31         align-items: stretch;
  32     height: 100%;
  33 }
  34
  35 .name-input {
  36   color: $gray-darkest;
  37 }
  38 .lpReactDashboard {
  39   display:-ms-flexbox;
  40   display:flex;
  41   height:100%;
  42   .app-body {
  43     > header {
  44       -ms-flex: 0 1 auto;
  45           flex: 0 1 auto;
  46       -ms-flex-negative: 0;
  47           flex-shrink: 0;
  48     }
  49   }
  50 }
  51 .lp-react-launch {
  52   display: -ms-flexbox;
  53   display: flex;
  54 }
  55 .app-body.create-fleet {
  56   height: 100%;
  57 }
  58 .name-input input {
  59   background:white !important;
  60   box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.39), 0 -1px 1px #ffffff, 0 1px 0 #ffffff;
  61   display: block;
  62   font-size: 120%;
  63   height: 35px;
  64   margin: 0;
  65   margin-top: 0.25rem;
  66   width: 350px;
  67 }
  68
  69 .baseGridCell {
  70   -ms-flex-align: center;
  71       align-items: center;
  72   display: -ms-flexbox;
  73   display: flex;
  74   -ms-flex: 0 0 auto;
  75       flex: 0 0 auto;
  76   min-height: 30px;
  77   overflow: hidden;
  78   padding-left: 2px;
  79   padding-right: 2px;
  80   text-overflow: ellipsis;
  81   white-space: nowrap;
  82 }
  83
  84 .lp_dashboard {
  85   display: -ms-flexbox;
  86   display: flex;
  87   -ms-flex: 1;
  88       flex: 1;
  89   -ms-flex-direction: row;
  90       flex-direction: row;
  91   height: 100%;
  92
  93   /* Network service list styles */
  94
  95   .leftMinimizedNsListPanel {
  96     display: -ms-flexbox;
  97     display: flex;
  98     -ms-flex: 1 100%;
  99         flex: 1 100%;
 100     height: auto;
 101     max-width: 30px;
 102     min-width: 30px;
 103     header {
 104       background-color: white;
 105       display:block;
 106       h3 {
 107         /* vertical | horizontal*/
 108         /* top | horizonal | bottom*/
 109         /* top right bottom left*/
 110         padding: 1.5rem 0;
 111         color: white;
 112
 113       }
 114     }
 115   }
 116
 117   .nsListPanel {
 118     display: -ms-flexbox;
 119     display: flex;
 120     -ms-flex: 0 1;
 121         flex: 0 1;
 122     height: auto;
 123     width: auto;
 124     /* max-width: 500px;*/
 125     /* min-width: 500px;*/
 126
 127     header {
 128       background-color: white;
 129       display:block;
 130     }
 131
 132     &-body {
 133       -ms-flex-flow: col wrap;
 134           flex-flow: col wrap;
 135     }
 136
 137     .nsrSummary {
 138       font-size: 50%;
 139       padding-top: 1rem;
 140       .nsrSummaryItem {
 141         padding-right: 0.5rem;
 142       }
 143     }
 144   }
 145
 146   .nsListPanelToggle {
 147     position:absolute;
 148     top:1.5rem;
 149     right:0.5rem;
 150     cursor:pointer;
 151     display:-ms-flexbox;
 152     display:flex;
 153     &:before {
 154     }
 155     &.on:before{
 156     }
 157   }
 158
 159   .nsListPanelToolbar {
 160     background-color: $gray;
 161     display: -ms-flexbox;
 162     display: flex;
 163     -ms-flex: 0 0 auto;
 164         flex: 0 0 auto;
 165     -ms-flex-direction: row;
 166         flex-direction: row;
 167     padding-left: 1rem;
 168     .button {
 169       cursor: pointer;
 170       display: -ms-flexbox;
 171       display: flex;
 172       /*flex: 0;*/
 173       margin: 4px;
 174       margin: 0.5rem;
 175       img {
 176         height: 1.5rem;
 177         margin-right: 0.85rem;
 178       }
 179       span {
 180         padding-top: 0.2rem;
 181       }
 182     }
 183   }
 184   .nsList {
 185     display: -ms-flexbox;
 186     display: flex;
 187     -ms-flex: 1;
 188         flex: 1;
 189     -ms-flex-direction: column;
 190         flex-direction: column;
 191     overflow: auto;
 192     padding-left: 0;
 193     padding-right: 0;
 194     &-body {
 195       overflow-y: auto;
 196       overflow-x: hidden;
 197     }
 198   }
 199   .nsListItemRow {
 200     display: -ms-flexbox;
 201     display: flex;
 202     -ms-flex-direction: row;
 203         flex-direction: row;
 204   }
 205   .cellValue {
 206     overflow: hidden;
 207     text-overflow: ellipsis;
 208   }
 209   .nsList-body .nsListItemRow:nth-child(odd):not(.openedCard) {
 210     background-color: $gray-lighter;
 211   }
 212   .nsList-body .nsListItemRow:nth-child(even):not(.openedCard) {
 213     background-color: $gray-lightest;
 214   }
 215   .nsListItemRow.openedCard {
 216     background-color: $lighter-blue;
 217   }
 218   .nsListHeaderRow {
 219     background-color: $gray;
 220     border-top: 1px solid $gray-lightest;
 221     border-bottom: 1px solid $gray-lightest;
 222     display: -ms-flexbox;
 223     display: flex;
 224     -ms-flex: 0 0 auto;
 225         flex: 0 0 auto;
 226     -ms-flex-direction: row;
 227         flex-direction: row;
 228   }
 229   .nsListItemField {
 230     @extend .baseGridCell;
 231     span {
 232       text-overflow: ellipsis;
 233     }
 234
 235   }
 236   .nsListHeaderField {
 237     @extend .baseGridCell;
 238     text-transform: uppercase;
 239   }
 240   .nsListHeaderField.nsColAction {
 241   }
 242   .nsListItemField.nsColAction {
 243       padding-left: 0.2rem;
 244   }
 245
 246   .colBorderRight {
 247     border-right: 1px solid $gray-lightest;
 248   }
 249
 250   .nsColNsName {
 251     @extend .colBorderRight;
 252     width: 130px;
 253   }
 254   .nsColNsdName {
 255     @extend .colBorderRight;
 256     width: 130px;
 257   }
 258   .nsColStatus {
 259     @extend .colBorderRight;
 260     width: 85px;
 261   }
 262   .nsColUptime {
 263     @extend .colBorderRight;
 264     width: 110px;
 265   }
 266   .nsColAction {
 267     width: 20px;
 268     text-overflow: clip;
 269   }
 270
 271   .actionButton {
 272     cursor: pointer;
 273     /* margin-top is a hack to fix the top of the glyph from*/
 274     /* being chopped off*/
 275     margin-top: 5px;
 276   }
 277
 278   .nsViewportLink {
 279     text-decoration: none;
 280     color: black;
 281   }
 282
 283   /* Network service detail card styles */
 284
 285   .nsCardPanel {
 286     /*border: 1px solid black;*/
 287     display: -ms-flexbox;
 288     display: flex;
 289     -ms-flex: 1 1 auto;
 290         flex: 1 1 auto;
 291     -ms-flex-wrap: nowrap;
 292         flex-wrap: nowrap;
 293     height: auto;
 294     header {
 295       background-color: white;
 296     }
 297     &_content {
 298     }
 299     &-body {
 300       background-color: $gray;
 301       display: -ms-flexbox;
 302       display: flex;
 303       -ms-flex: 1;
 304           flex: 1;
 305       -ms-flex-direction: row;
 306           flex-direction: row;
 307       min-width: 0;
 308       min-height: 0;
 309       overflow-y: auto;
 310       overflow-x: auto;
 311     }
 312   }
 313
 314   /* Angular wrapping */
 315   lp-react-dashboard {
 316     display:-ms-flexbox;
 317     display:flex;
 318   }
 319 }
 320
 321
 322