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             position:relative;
  26             margin:auto;
  27             h2 {
  28                 font-size:0.75rem;
  29                 border-right: 1px solid black;
  30                 display: -ms-flexbox;
  31                 display: flex;
  32                 -ms-flex-align: center;
  33                     align-items: center;
  34                 .oi {
  35                     padding-right: 0.5rem;
  36                 }
  37             }
  38             .menu {
  39                 position:absolute;
  40                 display:none;
  41                 z-index:2;
  42                 width: 100%;
  43             }
  44             &:first-child{
  45                 h2 {
  46                     border-left: 1px solid black;
  47                 }
  48             }
  49             &:hover {
  50                 a {
  51                     color:$brand-blue-light;
  52                     cursor:pointer;
  53                 }
  54                 .menu {
  55                     display:block;
  56                     background:black;
  57                     a {
  58                         color:white;
  59                     }
  60                     li:hover {
  61                         a {
  62                             color:$brand-blue-light;
  63                         }
  64                     }
  65                 }
  66             }
  67             &.active {
  68                 color:white;
  69                 background:black;
  70                 a {
  71                     color:white;
  72                 }
  73             }
  74         }
  75         a{
  76             display:block;
  77             padding:0.5rem 1rem;
  78             text-decoration:none;
  79             text-transform:uppercase;
  80             text-align:center;
  81             color:white;
  82         }
  83         &:before {
  84             content: '';
  85             min-width: 5.5rem;
  86             margin: 0.125rem 1rem;
  87             background: url('../../style/img/svg/osm-logo_color_rgb_white_text.svg') no-repeat center center;
  88             background-size: contain;
  89         }
  90         .userSection {
  91             display:-ms-flexbox;
  92             display:flex;
  93             -ms-flex-align:center;
  94             align-items:center;
  95             padding-left: 1rem;
  96             text-transform:uppercase;
  97             text-align: center;
  98             border-left:1px solid white;
  99             .projectSelect {
 100                 padding: 0 0.5rem;
 101                 font-size: 1rem;
 102                 /* min-width: 75%;*/
 103                 height: 25px;
 104             }
 105         }
 106     }