skyquake/framework/widgets/panel/panel.scss

   1 /*
   2  *
   3  *   Copyright 2016 RIFT.IO Inc
   4  *
   5  *   Licensed under the Apache License, Version 2.0 (the "License");
   6  *   you may not use this file except in compliance with the License.
   7  *   You may obtain a copy of the License at
   8  *
   9  *       http://www.apache.org/licenses/LICENSE-2.0
  10  *
  11  *   Unless required by applicable law or agreed to in writing, software
  12  *   distributed under the License is distributed on an "AS IS" BASIS,
  13  *   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  14  *   See the License for the specific language governing permissions and
  15  *   limitations under the License.
  16  *
  17  */
  18 @import '../../style/_colors.scss';
  19 .skyquakePanel {
  20     position:relative;
  21     display:-ms-flexbox;
  22     display:flex;
  23     -ms-flex-direction:column;
  24     flex-direction:column;
  25     -ms-flex:1 1;
  26     flex:1 1;
  27     background-color: $body-color;
  28     margin:0.5rem;
  29         &-title{
  30             display: -ms-flexbox;
  31             display: flex;
  32             -ms-flex-align: center;
  33             -ms-grid-row-align: center;
  34             align-items: center;
  35             padding: 1rem;
  36             background-color: white;
  37             text-transform: uppercase;
  38         }
  39         &-wrapper {
  40             overflow:auto;
  41             height:100vh;
  42         }
  43         &-body {
  44             display:-ms-flexbox;
  45             display:flex;
  46             -ms-flex-direction:column;
  47             flex-direction:column;
  48             padding:1rem;
  49         }
  50         &Wrapper {
  51             display:-ms-flexbox;
  52             display:flex;
  53             width:100%;
  54             height:100%;
  55         }
  56     .close-btn {
  57         cursor:pointer;
  58         position: absolute;
  59         right: -0.5rem;
  60         top: -0.5rem;
  61         img {
  62             width: 1rem;
  63         }
  64     }
  65 }
  66
  67 .skyquakePanelWrapper.column {
  68     -ms-flex-direction:column;
  69             flex-direction:column;
  70         display:-ms-flexbox;
  71         display:flex;
  72     .skyquakePanel-wrapper {
  73         height:auto;
  74     }
  75 }
  76
  77 /* Style for storybook */
  78 body{
  79     height:100%;
  80 >#root{
  81     height:100vh;
  82     width:100vw;
  83     display:-ms-flexbox;
  84     display:flex;
  85 }
  86 }