skyquake/framework/style/common.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
  20 @import '../../node_modules/open-iconic/font/css/open-iconic.css';
  21 @import './_colors.scss';
  22
  23 $green: #31D2B1;
  24 $black: #2D3036;
  25 $white: #F8F9FC;
  26 $headers: #EFF5FE;
  27 $grey: #ABB6C6;
  28
  29 /* Mixins */
  30
  31 @mixin arrow($size, $color) {
  32     width: 0;
  33     height:0;
  34     &--up {
  35         border-left: $size solid transparent;
  36         border-right: $size solid transparent;
  37
  38         border-bottom: $size solid $color;
  39     }
  40     &--down {
  41         border-left: $size solid transparent;
  42         border-right: $size solid transparent;
  43
  44         border-top: $size solid $color;
  45     }
  46     &--left {
  47         border-top: $size solid transparent;
  48         border-bottom: $size solid transparent;
  49
  50         border-right: $size solid $color;
  51     }
  52     &--right {
  53         border-top: $size solid transparent;
  54         border-bottom: $size solid transparent;
  55
  56         border-left: $size solid $color;
  57     }
  58 }
  59
  60
  61 /* General */
  62
  63
  64 .crouton {
  65     color: #FFF;
  66     line-height: 140%;
  67     border-radius: 3px;
  68     position: fixed;
  69     top: 0px;
  70     left: 0px;
  71     right: 0px;
  72     max-width: 700px;
  73     width: 90%;
  74     text-align: center;
  75     z-index: 99999;
  76     margin: 0 auto;
  77     div {
  78         padding: 20px;
  79         &.info {
  80             background-color: #1F8DD6;
  81         }
  82         &.success {
  83             background-color: #50CD84;
  84         }
  85         &.warning {
  86             background-color: #FF8859;
  87         }
  88         &.error {
  89             background-color: #FF5F5F;
  90         }
  91         span {
  92             display: block;
  93             margin-bottom: 0;
  94             margin-left: 0px;
  95         }
  96         .buttons {
  97             text-align: right;
  98             button {
  99                 &.btn, &.retry, &.close, &.cancel, &.ignore {
 100                     padding: 0px;
 101                     border: 1px solid transparent;
 102                     border-radius: 3px;
 103                 }
 104                 &:hover {
 105                     opacity: .75;
 106                 }
 107                 &.retry {
 108                     border-color: #FFF;
 109                 }
 110                 &.btn {
 111                     &.close {
 112                         border-color: #FF5F5F;
 113                         margin-left: 10px;
 114                     }
 115                 }
 116             }
 117         }
 118     }
 119 }
 120 .noticeSubText {
 121     padding-bottom:0.5rem;
 122     color:$darker-gray;
 123     font-size:0.75rem;
 124     &_right {
 125         text-align:right;
 126     }
 127 }