github.com/ns1/terraform@v0.7.10-0.20161109153551-8949419bef40/website/source/assets/stylesheets/_announcement-bnr.scss (about)

     1  //
     2  // announcement bnr
     3  // --------------------------------------------------
     4  
     5  $enterprise-bnr-font-weight: 300;
     6  $enterprise-bnr-consul-color: #B52A55;
     7  $enterprise-color-dark-white: #A9B1B5;
     8  
     9  body{
    10    // when _announcment-bnr.erb (ie. Consul Enterprise Announcment) is being used in layout we need to push down content to accommodate
    11    // add this class to body
    12    &.-displaying-bnr{
    13      #header{
    14        > .container{
    15          padding-top: 8px;
    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-weight: $enterprise-bnr-font-weight;
    59      font-size: 13px;
    60      line-height: 40px;
    61      margin-bottom: 0;
    62    }
    63  
    64    .link-highlight{
    65      display: inline-block;
    66      margin-left: 3px;
    67      color: lighten($purple, 10%);
    68      font-weight: 400;
    69      -webkit-transform: translateY(1px);
    70          -ms-transform: translateY(1px);
    71              transform: translateY(1px);
    72    }
    73  
    74    .enterprise-logo{
    75      position: relative;
    76      top: 4px;
    77  
    78      &:hover{
    79        text-decoration: none;
    80  
    81        svg{
    82          rect{
    83            fill: $enterprise-color-dark-white;
    84          }
    85        }
    86      }
    87  
    88      svg{
    89        width: 156px;
    90        height: 18px;
    91        fill: $white;
    92        margin-right: 4px;
    93        margin-left: 3px;
    94  
    95        rect{
    96          @include transition(all .1s ease-in);
    97        }
    98      }
    99    }
   100  }
   101  
   102  .hcaret{
   103    display: inline-block;
   104    -moz-transform: translate(0, -1px) rotate(135deg);
   105    -webkit-transform: translate(0, -1px) rotate(135deg);
   106    transform: translate(0, -1px) rotate(135deg);
   107    width: 7px;
   108    height: 7px;
   109    border-top: 1px solid lighten($purple, 10%);
   110    border-left: 1px solid lighten($purple, 10%);
   111    @include transition(all .1s ease-in);
   112  }
   113  
   114  @media (max-width: 768px) {
   115    #announcement-bnr {
   116      .tagline{
   117        display: none;
   118      }
   119    }
   120  }
   121  
   122  @media (max-width: 320px) {
   123    #announcement-bnr {
   124      a,p{
   125        font-size: 12px;
   126      }
   127  
   128      .link-highlight{
   129        display: inline-block;
   130        margin-left: 1px;
   131      }
   132  
   133      .enterprise-logo svg{
   134        width: 128px;
   135        margin-left: 2px;
   136      }
   137  
   138      .hcaret{
   139        display: none;
   140      }
   141    }
   142  }