github.com/huiliang/nomad@v0.2.1-0.20151124023127-7a8b664699ff/website/source/assets/stylesheets/hashicorp-shared/_hashicorp-header.scss (about) 1 // 2 // Hashicorp header 3 // - Shared throughout projects 4 // - Edits should not be made here 5 // -------------------------------------------------- 6 7 #header { 8 position: relative; 9 color: black; 10 text-rendering: optimizeLegibility; 11 margin-bottom: 0; 12 transition: all 1s ease; 13 14 &.white{ 15 color: white; 16 .navbar-brand { 17 .logo { 18 color: white; 19 } 20 21 .by{ 22 color: white; 23 font-weight: 300; 24 svg{ 25 path, 26 polygon{ 27 fill: white; 28 } 29 line{ 30 stroke: white; 31 } 32 } 33 } 34 } 35 36 .main-links, 37 .external-links { 38 li > a { 39 &:hover{ 40 opacity: 1; 41 } 42 } 43 } 44 45 .nav > li > a:hover, .nav > li > a:focus { 46 color: white; 47 } 48 49 .navbar-header{ 50 .navbar-toggle{ 51 .icon-bar{ 52 border: 1px solid white; 53 } 54 } 55 } 56 } 57 58 .navbar-header{ 59 .navbar-toggle{ 60 height: $header-height; 61 margin: 0; 62 padding-right: 15px; 63 border-radius: 0; 64 .icon-bar{ 65 border: 1px solid $black; 66 border-radius: 0; 67 } 68 } 69 } 70 71 .navbar-brand { 72 display: block; 73 height: $header-height; 74 padding: 0; 75 margin: 0 10px 0 0 ; 76 77 .logo{ 78 display: inline-block; 79 height: $header-height; 80 vertical-align:top; 81 padding: 0; 82 line-height: $header-height; 83 padding-left: $project-logo-width + $project-logo-pad-left; 84 background-position: 0 center; 85 @include transition(all 300ms ease-in); 86 87 &:hover{ 88 @include transition(all 300ms ease-in); 89 text-decoration: none; 90 } 91 } 92 93 .by{ 94 display: inline-block; 95 vertical-align:top; 96 height: $header-height; 97 margin-left: 3px; 98 padding-top: 2px; 99 color: black; 100 line-height: $header-height; 101 font-family: $header-font-family; 102 font-weight: 600; 103 font-size: 0; 104 text-decoration: none; 105 106 .svg-wrap{ 107 font-size: 13px; 108 } 109 110 svg{ 111 &.svg-by{ 112 width: $by-hashicorp-width; 113 height: $by-hashicorp-height; 114 margin-bottom: -4px; 115 margin-left: 4px; 116 } 117 118 &.svg-logo{ 119 width: 16px; 120 height: 16px; 121 margin-bottom: -3px; 122 margin-left: 4px; 123 } 124 125 path, 126 polygon{ 127 fill: black; 128 @include transition(all 300ms ease-in); 129 130 &:hover{ 131 @include transition(all 300ms ease-in); 132 } 133 } 134 line{ 135 stroke: black; 136 @include transition(all 300ms ease-in); 137 138 &:hover{ 139 @include transition(all 300ms ease-in); 140 } 141 } 142 } 143 } 144 } 145 146 .external-links { 147 li { 148 position: relative; 149 150 svg path{ 151 @include transition( all 300ms ease-in ); 152 } 153 154 &:hover{ 155 svg path{ 156 @include transition( all 300ms ease-in ); 157 } 158 } 159 160 &.download{ 161 margin-right: 10px; 162 } 163 164 > a { 165 padding-left: 12px !important; 166 svg{ 167 position: absolute; 168 left: -12px; 169 top: 50%; 170 margin-top: -7px; 171 width: 14px; 172 height: 14px; 173 } 174 } 175 } 176 } 177 178 .main-links{ 179 margin-right: $nav-margin-right * 2; 180 } 181 182 .main-links, 183 .external-links { 184 li > a { 185 @include hashi-a-style(); 186 margin: 0 10px; 187 padding-top: 1px; 188 line-height: $header-height; 189 } 190 } 191 192 .nav > li > a:hover, .nav > li > a:focus { 193 background-color: transparent; 194 color: $black; 195 @include transition( all 300ms ease-in ); 196 } 197 } 198 199 @media (max-width: 414px) { 200 #header { 201 .navbar-header{ 202 .navbar-toggle{ 203 padding-top: 10px; 204 height: $header-mobile-height; 205 } 206 } 207 208 .navbar-brand { 209 height: $header-mobile-height; 210 211 .logo{ 212 height: $header-mobile-height; 213 line-height: $header-mobile-height; 214 } 215 .by{ 216 height: $header-mobile-height; 217 line-height: $header-mobile-height; 218 padding-top: 0; 219 } 220 } 221 .main-links, 222 .external-links { 223 li > a { 224 line-height: $header-mobile-height; 225 } 226 } 227 } 228 }