github.com/maier/nomad@v0.4.1-0.20161110003312-a9e3d0b8549d/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 }