skyquake/framework/widgets/skyquake_container/skyquakeApp.scss

   1 /*import a reset*/
   2 @import '../../style/_colors.scss';
   3 html, body {
   4     height:100%;
   5     width:100%;
   6 }
   7
   8 .crouton {
   9     span {
  10         /* white-space: pre;*/
  11     }
  12 }
  13
  14 .skyquakeApp {
  15     display: -ms-flexbox;
  16     display: -webkit-box;
  17     display: flex;
  18     -ms-flex-direction: column;
  19         -webkit-box-orient: vertical;
  20         -webkit-box-direction: normal;
  21             flex-direction: column;
  22     height: 100%;
  23     background: $gray-lightest;
  24     h1 {
  25         text-transform: uppercase;
  26     }
  27     .active {
  28         background-color: $brand-blue!important;
  29         border-color: $brand-blue!important;
  30         color: #fff!important
  31     }
  32     .skyquakeNav {
  33         display: -ms-flexbox;
  34         display: -webkit-box;
  35         display: flex;
  36         color:white;
  37         background:black;
  38         position:relative;
  39         z-index: 10;
  40         font-size:0.75rem;
  41         .secondaryNav {
  42             -ms-flex: 1 1 auto;
  43                 -webkit-box-flex: 1;
  44                     flex: 1 1 auto;
  45             display: -ms-flexbox;
  46             display: -webkit-box;
  47             display: flex;
  48             -ms-flex-pack: end;
  49                 -webkit-box-pack: end;
  50                     justify-content: flex-end;
  51         }
  52         .app {
  53             position:relative;
  54             h2 {
  55                 font-size:0.75rem;
  56                 border-right: 1px solid black;
  57                 display: -ms-flexbox;
  58                 display: -webkit-box;
  59                 display: flex;
  60                 -ms-flex-align: center;
  61                     -webkit-box-align: center;
  62                         align-items: center;
  63                 .oi {
  64                     padding-right: 0.5rem;
  65                 }
  66             }
  67             .menu {
  68                 position:absolute;
  69                 display:none;
  70                 z-index:2;
  71                 width: 100%;
  72                 &.project {
  73                     a {
  74                         text-transform:none;
  75                     }
  76                 }
  77             }
  78             &:first-child{
  79                 h2 {
  80                     border-left: 1px solid black;
  81                 }
  82             }
  83             &:hover {
  84                 a {
  85                     color:$brand-blue-light;
  86                     cursor:pointer;
  87                 }
  88                 .menu {
  89                     display:block;
  90                     background:black;
  91                     a {
  92                         color:white;
  93                     }
  94                     li:hover {
  95                         a {
  96                             color:$brand-blue-light;
  97                         }
  98                     }
  99                 }
 100             }
 101             &.active {
 102                 color:white;
 103                 background:black;
 104                 a {
 105                     color:white;
 106                 }
 107             }
 108         }
 109         a{
 110             display:block;
 111             padding:0.5rem 1rem;
 112             text-decoration:none;
 113             text-transform:uppercase;
 114             color:white;
 115         }
 116         &:before {
 117             content: '';
 118             height:1.85rem;
 119             width:2.5rem;
 120             margin:auto 1rem;
 121             padding:0 0.125rem;
 122             /* background: url('../../style/img/header-logo.png') no-repeat center center white;*/
 123             /*background: url('../../style/img/svg/riftio_logo_white.svg') no-repeat center center;*/
 124             background: url('../../style/img/svg/osm-logo_color_rgb_white_text.svg') no-repeat center center;
 125             background-size:contain;
 126         }
 127     }
 128     .skyquakeContainerWrapper {
 129     }
 130     .titleBar {
 131         padding: 1rem 0 0;
 132         h1 {
 133         /* background: url('../../style/img/header-logo.png') no-repeat;*/
 134         background-size:contain;
 135         height: 51px;
 136         line-height: 51px;
 137         margin-left: 20px;
 138         /* padding-left: 100px;*/
 139         left: 0;
 140         font-size: 1.625rem;
 141         font-weight: 400;
 142         text-align:left;
 143         position:relative;
 144         -ms-flex: 1 0 auto;
 145             -webkit-box-flex: 1;
 146                 flex: 1 0 auto;
 147         }
 148     }
 149     .corner-accent {
 150         border: 1px solid #000;
 151         display: block;
 152         height: 4px;
 153         position: absolute;
 154         width: 4px;
 155
 156         &.top {
 157             border-bottom: 0;
 158             top: -1px;
 159         }
 160         &.right {
 161             border-left: 0;
 162             right: -1px;
 163         }
 164         &.bottom {
 165             border-top: 0;
 166             bottom: -1px;
 167         }
 168         &.left {
 169             border-right: 0;
 170             left: -1px;
 171         }
 172     }
 173 }