github.com/anfernee/terraform@v0.6.16-0.20160430000239-06e5085a92f2/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 accomodate
    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        fill: $white;
    91        margin-right: 4px;
    92        margin-left: 3px;
    93  
    94        rect{
    95          @include transition(all .1s ease-in);
    96        }
    97      }
    98    }
    99  }
   100  
   101  .hcaret{
   102    display: inline-block;
   103    -moz-transform: translate(0, -1px) rotate(135deg);
   104    -webkit-transform: translate(0, -1px) rotate(135deg);
   105    transform: translate(0, -1px) rotate(135deg);
   106    width: 7px;
   107    height: 7px;
   108    border-top: 1px solid lighten($purple, 10%);
   109    border-left: 1px solid lighten($purple, 10%);
   110    @include transition(all .1s ease-in);
   111  }
   112  
   113  @media (max-width: 768px) {
   114    #announcement-bnr {
   115      .tagline{
   116        display: none;
   117      }
   118    }
   119  }
   120  
   121  @media (max-width: 320px) {
   122    #announcement-bnr {
   123      a,p{
   124        font-size: 12px;
   125      }
   126  
   127      .link-highlight{
   128        display: inline-block;
   129        margin-left: 1px;
   130      }
   131  
   132      .enterprise-logo svg{
   133        width: 128px;
   134        margin-left: 2px;
   135      }
   136  
   137      .hcaret{
   138        display: none;
   139      }
   140    }
   141  }