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