skyquake/framework/widgets/skyquake_nav/skyquakeNav.scss

   1 @import '../../style/_colors.scss';
   2 .active {
   3         background-color: $brand-blue!important;
   4         border-color: $brand-blue!important;
   5         color: #fff!important
   6     }
   7     .skyquakeNav {
   8         display: -ms-flexbox;
   9         display: flex;
  10         color:white;
  11         background:black;
  12         position:relative;
  13         z-index: 10;
  14         font-size:0.75rem;
  15         padding-right:1rem;
  16         .secondaryNav {
  17             -ms-flex: 1 1 auto;
  18                 flex: 1 1 auto;
  19             display: -ms-flexbox;
  20             display: flex;
  21             -ms-flex-pack: end;
  22                 justify-content: flex-end;
  23         }
  24         .app {
  25             display: -ms-flexbox;
  26             display: block;
  27             position:relative;
  28             margin: auto 0.5rem;
  29             min-width: 140px;
  30             h2 {
  31                 font-size:0.75rem;
  32                 border-right: 1px solid black;
  33                 display: -ms-flexbox;
  34                 display: flex;
  35                 -ms-flex-pack: start;
  36                 -ms-flex-pack: start;
  37                 justify-content: flex-start;
  38                 -ms-flex-align: center;
  39                 align-items: center;
  40                 .oi {
  41                     padding-right: 0.5rem;
  42                 }
  43             }
  44             .menu {
  45                 position:absolute;
  46                 display:none;
  47                 z-index:2;
  48                 width: 100%;
  49                 li {
  50                     text-align:left;
  51                 }
  52             }
  53             &:first-child{
  54                 h2 {
  55                     border-left: 1px solid black;
  56                 }
  57             }
  58             &:hover {
  59                 a {
  60                     color:$brand-blue-light;
  61                     cursor:pointer;
  62                 }
  63                 .menu {
  64                     display:block;
  65                     background:black;
  66                     a {
  67                         color:white;
  68                     }
  69                     li:hover {
  70                         a {
  71                             color:$brand-blue-light;
  72                         }
  73                     }
  74                 }
  75             }
  76             &.active {
  77                 color:white;
  78                 background:black;
  79                 a {
  80                     color:white;
  81                 }
  82             }
  83         }
  84         a{
  85             display:block;
  86             padding:0.5rem 1rem;
  87             text-decoration:none;
  88             text-transform:uppercase;
  89             text-align:left;
  90             color:white;
  91         }
  92         &:before {
  93             content: '';
  94             min-width: 5.5rem;
  95             margin: 0.125rem 1rem;
  96             background: url('../../style/img/svg/osm-logo_color_rgb_white_text.svg') no-repeat center center;
  97             background-size: contain;
  98         }
  99         .userSection {
 100             display:-ms-flexbox;
 101             display:flex;
 102             -ms-flex-align:center;
 103             align-items:center;
 104             padding-left: 1rem;
 105             text-transform:uppercase;
 106             text-align: left;
 107             border-left:1px solid white;
 108             .projectSelect {
 109                 padding: 0 0.5rem;
 110                 font-size: 1rem;
 111                 /* min-width: 75%;*/
 112                 height: 25px;
 113             }
 114         }
 115     }