github.com/mattyr/nomad@v0.3.3-0.20160919021406-3485a065154a/website/source/assets/stylesheets/_announcement-bnr.scss (about)

     1  //
     2  // announcement bnr
     3  // --------------------------------------------------
     4  
     5  $enterprise-bnr-nomad-color: $green;
     6  $enterprise-color-dark-white: #A9B1B5;
     7  
     8  body{
     9    // when _announcment-bnr.erb is being used in layout we need to push down content to accommodate
    10    // add this class to body
    11    &.-displaying-bnr{
    12      #header{
    13        > .container{
    14          padding-top: 8px;
    15          padding-bottom: 32px;
    16          -webkit-transform: translateY(32px);
    17              -ms-transform: translateY(32px);
    18                  transform: translateY(32px);
    19        }
    20      }
    21  
    22      #jumbotron {
    23        .container{
    24          .jumbo-logo-wrap{
    25            margin-top: 160px;
    26          }
    27        }
    28      }
    29  
    30      &.page-sub{
    31        #header{
    32          > .container{
    33            padding-bottom: 32px;
    34          }
    35        }
    36      }
    37    }
    38  }
    39  
    40  
    41  #announcement-bnr {
    42    height: 40px;
    43    flex-shrink: 0;
    44    background-color: #000;
    45  
    46    &.-absolute{
    47      position: absolute;
    48      top: 0;
    49      left: 0;
    50      width: 100%;
    51      z-index: 9999;
    52    }
    53  
    54    a,p{
    55      font-size: 14px;
    56      color: $enterprise-color-dark-white;
    57      font-family: $header-font-family;
    58      font-size: 13px;
    59      line-height: 40px;
    60      margin-bottom: 0;
    61    }
    62  
    63    .link-highlight{
    64      display: inline-block;
    65      margin-left: 3px;
    66      color: lighten($enterprise-bnr-nomad-color, 10%);
    67      font-weight: 400;
    68    }
    69  
    70    .enterprise-logo{
    71      position: relative;
    72      top: 4px;
    73  
    74      &:hover{
    75        text-decoration: none;
    76  
    77        svg{
    78          rect{
    79            fill: $enterprise-color-dark-white;
    80          }
    81        }
    82      }
    83  
    84      svg{
    85        width: 140px;
    86        fill: $white;
    87        margin-right: 4px;
    88        margin-left: 3px;
    89  
    90        rect{
    91          @include transition(all .1s ease-in);
    92        }
    93      }
    94    }
    95  }
    96  
    97  .hcaret{
    98    display: inline-block;
    99    -moz-transform: translate(0, -1px) rotate(135deg);
   100    -webkit-transform: translate(0, -1px) rotate(135deg);
   101    transform: translate(0, -1px) rotate(135deg);
   102    width: 7px;
   103    height: 7px;
   104    border-top: 1px solid lighten($enterprise-bnr-nomad-color, 10%);
   105    border-left: 1px solid lighten($enterprise-bnr-nomad-color, 10%);
   106    @include transition(all .1s ease-in);
   107  }
   108  
   109  @media (max-width: 768px) {
   110    #announcement-bnr {
   111      .tagline{
   112        display: none;
   113      }
   114    }
   115  }
   116  
   117  @media (max-width: 320px) {
   118    #announcement-bnr {
   119      a,p{
   120        font-size: 12px;
   121      }
   122  
   123      .link-highlight{
   124        display: inline-block;
   125        margin-left: 1px;
   126      }
   127  
   128      .enterprise-logo svg{
   129        width: 128px;
   130        margin-left: 2px;
   131      }
   132  
   133      .hcaret{
   134        display: none;
   135      }
   136    }
   137  }