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
 138   .nsListPanelToggle {
 139     position:absolute;
 140     top:1.5rem;
 141     right:0.5rem;
 142     cursor:pointer;
 143     display:-ms-flexbox;
 144     display:flex;
 145     &:before {
 146     }
 147     &.on:before{
 148     }
 149   }
 150
 151   .nsListPanelToolbar {
 152     background-color: $gray;
 153     display: -ms-flexbox;
 154     display: flex;
 155     -ms-flex: 0 0 auto;
 156         flex: 0 0 auto;
 157     -ms-flex-direction: row;
 158         flex-direction: row;
 159     padding-left: 1rem;
 160     .button {
 161       cursor: pointer;
 162       display: -ms-flexbox;
 163       display: flex;
 164       /*flex: 0;*/
 165       margin: 4px;
 166       margin: 0.5rem;
 167       img {
 168         height: 1.5rem;
 169         margin-right: 0.85rem;
 170       }
 171       span {
 172         padding-top: 0.2rem;
 173       }
 174     }
 175   }
 176   .nsList {
 177     display: -ms-flexbox;
 178     display: flex;
 179     -ms-flex: 1;
 180         flex: 1;
 181     -ms-flex-direction: column;
 182         flex-direction: column;
 183     overflow: auto;
 184     padding-left: 0;
 185     padding-right: 0;
 186     &-body {
 187       overflow-y: auto;
 188       overflow-x: hidden;
 189     }
 190   }
 191   .nsListItemRow {
 192     display: -ms-flexbox;
 193     display: flex;
 194     -ms-flex-direction: row;
 195         flex-direction: row;
 196   }
 197   .cellValue {
 198     overflow: hidden;
 199     text-overflow: ellipsis;
 200   }
 201   .nsList-body .nsListItemRow:nth-child(odd):not(.openedCard) {
 202     background-color: $gray-lighter;
 203   }
 204   .nsList-body .nsListItemRow:nth-child(even):not(.openedCard) {
 205     background-color: $gray-lightest;
 206   }
 207   .nsListItemRow.openedCard {
 208     background-color: $lighter-blue;
 209   }
 210   .nsListHeaderRow {
 211     background-color: $gray;
 212     border-top: 1px solid $gray-lightest;
 213     border-bottom: 1px solid $gray-lightest;
 214     display: -ms-flexbox;
 215     display: flex;
 216     -ms-flex: 0 0 auto;
 217         flex: 0 0 auto;
 218     -ms-flex-direction: row;
 219         flex-direction: row;
 220   }
 221   .nsListItemField {
 222     @extend .baseGridCell;
 223     span {
 224       text-overflow: ellipsis;
 225     }
 226
 227   }
 228   .nsListHeaderField {
 229     @extend .baseGridCell;
 230     text-transform: uppercase;
 231   }
 232   .nsListHeaderField.nsColAction {
 233   }
 234   .nsListItemField.nsColAction {
 235       padding-left: 0.2rem;
 236   }
 237
 238   .colBorderRight {
 239     border-right: 1px solid $gray-lightest;
 240   }
 241
 242   .nsColNsName {
 243     @extend .colBorderRight;
 244     width: 130px;
 245   }
 246   .nsColNsdName {
 247     @extend .colBorderRight;
 248     width: 130px;
 249   }
 250   .nsColStatus {
 251     @extend .colBorderRight;
 252     width: 85px;
 253   }
 254   .nsColUptime {
 255     @extend .colBorderRight;
 256     width: 110px;
 257   }
 258   .nsColAction {
 259     width: 20px;
 260     text-overflow: clip;
 261   }
 262
 263   .actionButton {
 264     cursor: pointer;
 265     /* margin-top is a hack to fix the top of the glyph from*/
 266     /* being chopped off*/
 267     margin-top: 5px;
 268   }
 269
 270   .nsViewportLink {
 271     text-decoration: none;
 272     color: black;
 273   }
 274
 275   /* Network service detail card styles */
 276
 277   .nsCardPanel {
 278     /*border: 1px solid black;*/
 279     display: -ms-flexbox;
 280     display: flex;
 281     -ms-flex: 1 1 auto;
 282         flex: 1 1 auto;
 283     -ms-flex-wrap: nowrap;
 284         flex-wrap: nowrap;
 285     height: auto;
 286     header {
 287       background-color: white;
 288     }
 289     &_content {
 290     }
 291     &-body {
 292       background-color: $gray;
 293       display: -ms-flexbox;
 294       display: flex;
 295       -ms-flex: 1;
 296           flex: 1;
 297       -ms-flex-direction: row;
 298           flex-direction: row;
 299       min-width: 0;
 300       min-height: 0;
 301       overflow-y: auto;
 302       overflow-x: auto;
 303     }
 304   }
 305
 306   /* Angular wrapping */
 307   lp-react-dashboard {
 308     display:-ms-flexbox;
 309     display:flex;
 310   }
 311 }
 312
 313
 314