skyquake/framework/widgets/panel/panel.scss

/*
 *
 *   Copyright 2016 RIFT.IO Inc
 *
 *   Licensed under the Apache License, Version 2.0 (the "License");
 *   you may not use this file except in compliance with the License.
 *   You may obtain a copy of the License at
 *
 *       http://www.apache.org/licenses/LICENSE-2.0
 *
 *   Unless required by applicable law or agreed to in writing, software
 *   distributed under the License is distributed on an "AS IS" BASIS,
 *   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 *   See the License for the specific language governing permissions and
 *   limitations under the License.
 *
 */
@import '../../style/_colors.scss';
.skyquakePanel {
    position:relative;
    display:-ms-flexbox;
    display:flex;
    -ms-flex-direction:column;
    flex-direction:column;
    -ms-flex:1 1;
    flex:1 1;
    background-color: $body-color;
    margin:0.5rem;
        &-title{
            display: -ms-flexbox;
            display: flex;
            -ms-flex-align: center;
            -ms-grid-row-align: center;
            align-items: center;
            padding: 1rem;
            background-color: white;
            text-transform: uppercase;
        }
        &-wrapper {
            overflow:auto;
            height:100vh;
        }
        &-body {
            display:-ms-flexbox;
            display:flex;
            -ms-flex-direction:column;
            flex-direction:column;
            padding:1rem;
        }
        &Wrapper {
            display:-ms-flexbox;
            display:flex;
            width:100%;
            height:100%;
        }
    .close-btn {
        cursor:pointer;
        position: absolute;
        right: -0.5rem;
        top: -0.5rem;
        img {
            width: 1rem;
        }
    }
}

.skyquakePanelWrapper.column {
    -ms-flex-direction:column;
            flex-direction:column;
        display:-ms-flexbox;
        display:flex;
    .skyquakePanel-wrapper {
        height:auto;
    }
}

/* Style for storybook */
body{
    height:100%;
>#root{
    height:100vh;
    width:100vw;
    display:-ms-flexbox;
    display:flex;
}
}