skyquake/framework/style/layout.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 html, body {
  20   height:100%;
  21   width:100%;
  22 }
  23 .flex {
  24   display:-ms-flexbox;
  25   display:flex;
  26   &-column {
  27     display:-ms-flexbox;
  28     display:flex;
  29     -ms-flex-direction:column;
  30         flex-direction:column;
  31   }
  32   &.space-between {
  33     -ms-flex-pack:justify;
  34         justify-content:space-between;
  35   }
  36 }
  37 .layout-col {
  38     display: -ms-flexbox;
  39     display: flex;
  40     -ms-flex-direction: column;
  41         flex-direction: column;
  42     box-sizing: border-box;
  43     -ms-flex: 1 1 auto;
  44         flex: 1 1 auto;
  45     &_left {
  46       -ms-flex: 1 1 70%;
  47           flex: 1 1 70%;
  48     }
  49     &_right {
  50       -ms-flex: 0 1 30%;
  51           flex: 0 1 30%;
  52     }
  53   }
  54
  55 .app-body {
  56   width:100%;
  57   /*height:100%;*/
  58   display:-ms-flexbox;
  59   display:flex;
  60   -ms-flex-direction:column;
  61       flex-direction:column;
  62   -ms-flex-pack:start;
  63       justify-content:flex-start;
  64   -ms-flex-align:stretch;
  65       align-items:stretch;
  66   -ms-flex-line-pack: stretch;
  67       align-content: stretch;
  68   margin:0px;
  69 }
  70
  71 .header-app h1 {
  72   /* background: url('../../../../assets/img/header-logo.png') no-repeat left center !important;*/
  73   height: 51px;
  74   line-height: 51px;
  75   margin-left: 80px;
  76   padding-left: 118px;
  77   position: absolute;
  78   left: 0;
  79   text-transform: uppercase;
  80 }
  81
  82
  83 html, body, .application{
  84     margin:0px;
  85    height:100%;
  86 }
  87
  88 .wrap {
  89   height: 100%;
  90   display: -ms-flexbox;
  91   display: flex;
  92   .content-wrapper {
  93     height:100%;
  94     overflow-y:auto;
  95   }
  96 }
  97
  98 .application{
  99   display:-ms-flexbox;
 100   display:flex;
 101   -ms-flex:1 1 auto;
 102       flex:1 1 auto;
 103   -ms-flex-direction:column;
 104       flex-direction:column;
 105   height:auto;
 106   overflow:auto;
 107 }
 108
 109
 110 .content {
 111   display:-ms-flexbox;
 112   display:flex;
 113   -ms-flex-direction:column;
 114       flex-direction:column;
 115 }
 116 .panel {
 117   display:-ms-flexbox;
 118   display:flex;
 119   margin:0.25rem;
 120   border:1px solid black;
 121   border-offset: -1px;
 122   /*flex:1 1 auto;*/
 123   &--container {
 124     padding:0.25rem;
 125   }
 126   &--column {
 127     -ms-flex-direction:column;
 128         flex-direction:column;
 129   }
 130   &--grow {
 131     -ms-flex:1;
 132         flex:1;
 133   }
 134   &--wrap {
 135     -ms-flex-wrap:wrap;
 136         flex-wrap:wrap;
 137   }
 138 }
 139 .card {
 140
 141 }
 142 .size-2 {
 143  -ms-flex: 1 1 20%;
 144      flex: 1 1 20%;
 145 }
 146 .size-5 {
 147  -ms-flex: 1 1 50%;
 148      flex: 1 1 50%;
 149 }