skyquake/plugins/composer/src/src/styles/AppRoot.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 "main";
  20 @import "FullScreen";
  21 .AppRoot {
  22     display: flex;
  23     flex: 1;
  24     position: relative;
  25     top: 0;
  26     bottom: 0;
  27     right: 0;
  28     left: 0;
  29     height:100%;
  30     /* General */
  31     .crouton {
  32         color: #FFF;
  33         line-height: 140%;
  34         border-radius: 3px;
  35         position: fixed;
  36         top: 0px;
  37         left: 0px;
  38         right: 0px;
  39         max-width: 700px;
  40         width: 90%;
  41         text-align: center;
  42         z-index: 99999;
  43         margin: 0 auto;
  44         div {
  45             padding: 20px;
  46             &.info {
  47                 background-color: #1F8DD6;
  48             }
  49             &.success {
  50                 background-color: #50CD84;
  51             }
  52             &.warning {
  53                 background-color: #FF8859;
  54             }
  55             &.error {
  56                 background-color: #FF5F5F;
  57             }
  58             span {
  59                 display: block;
  60                 margin-bottom: 0;
  61                 margin-left: 0px;
  62             }
  63             .buttons {
  64                 text-align: right;
  65                 button {
  66                     &.btn, &.retry, &.close, &.cancel, &.ignore {
  67                         padding: 0px;
  68                         border: 1px solid transparent;
  69                         border-radius: 3px;
  70                     }
  71                     &:hover {
  72                         opacity: .75;
  73                     }
  74                     &.retry {
  75                         border-color: #FFF;
  76                     }
  77                     &.btn {
  78                         &.close {
  79                             border-color: #FF5F5F;
  80                             margin-left: 10px;
  81                         }
  82                     }
  83                 }
  84             }
  85         }
  86     }
  87     .AppHeader {
  88         position: absolute;
  89         top: 0;
  90         right: 0;
  91         left: 0;
  92         height: 0;
  93     }
  94     .AppBody {
  95                 @extend .panel;
  96                 position: absolute;
  97         top: 0px;
  98         right: 20px;
  99         bottom: 20px;
 100         left: 20px;
 101         background-color: #e5e5e5;
 102         margin: 0.5rem 1rem;
 103     }
 104     .corner-accent {
 105         border: 1px solid #000000;
 106         display: block;
 107         height: 4px;
 108         position: absolute;
 109         width: 4px;
 110                 z-index: 999;
 111     }
 112     .corner-accent.top {
 113         border-bottom: 0 none;
 114         top: 6px;
 115     }
 116         .corner-accent.bottom {
 117                 border-top: 0 none;
 118                 bottom: 27px;
 119         }
 120     .corner-accent.right {
 121         border-left: 0 none;
 122         right: 35px;
 123     }
 124     .corner-accent.left {
 125         border-right: 0 none;
 126         left: 35px;
 127     }
 128     button:focus {
 129         outline: 0;
 130     }
 131 }