github.com/tarrant/terraform@v0.3.8-0.20150402012457-f68c9eee638e/website/source/assets/stylesheets/_docs.scss (about) 1 // 2 // Docs 3 // -------------------------------------------------- 4 5 body.page-sub{ 6 background-color: $light-black; 7 } 8 9 body.layout-atlas, 10 body.layout-consul, 11 body.layout-dnsimple, 12 body.layout-dme, 13 body.layout-docker, 14 body.layout-cloudflare, 15 body.layout-cloudstack, 16 body.layout-google, 17 body.layout-heroku, 18 body.layout-mailgun, 19 body.layout-digitalocean, 20 body.layout-aws, 21 body.layout-docs, 22 body.layout-inner, 23 body.layout-downloads, 24 body.layout-intro{ 25 background: $light-black image-url('sidebar-wire.png') left 62px no-repeat; 26 27 >.container{ 28 .col-md-8[role=main]{ 29 min-height: 800px; 30 background-color: white; 31 32 >div{ 33 position: relative; 34 z-index: 10; 35 } 36 } 37 } 38 } 39 40 .docs-sidebar{ 41 position: relative; 42 z-index: 20; 43 margin-bottom: 30px; 44 margin-top: 50px; 45 margin-right: 4%; 46 47 a{ 48 color: $purple; 49 } 50 51 .docs-sidenav{ 52 padding-top: 15px; 53 padding-bottom: 15px; 54 55 :last-child{ 56 border-bottom: none; 57 } 58 59 //all li > a 60 li{ 61 position: relative; 62 63 > a{ 64 color: white; 65 @include transition( color 0.5s ease ); 66 } 67 68 > a:hover, 69 > a:focus { 70 background-color: transparent !important; 71 color: white; 72 @include transition( color 0.5s ease ); 73 } 74 } 75 76 77 > li { 78 padding: 10px 0; 79 margin: 0 30px; 80 81 >.nav{ 82 li{ 83 a{ 84 color: white; 85 } 86 } 87 } 88 89 &.active { 90 >a{ 91 color: lighten($purple, 4%); 92 font-weight: 500; 93 } 94 95 &:before{ 96 content: ''; 97 position: absolute; 98 width: 6px; 99 height: 8px; 100 background-color: $purple; 101 font-weight: 500; 102 @include skewY(24deg); 103 top: 26px; 104 left: -10px; 105 } 106 > a{ 107 -webkit-font-smoothing: antialiased; 108 } 109 110 /*> a:hover, 111 > a:focus { 112 font-weight: $font-weight-lato-xb; 113 }*/ 114 115 .nav { 116 display: block; 117 118 li.active a { 119 color: lighten($purple, 4%); 120 font-weight: 500; 121 } 122 } 123 } 124 125 > a { 126 text-transform: uppercase; 127 -webkit-font-smoothing: antialiased; 128 } 129 } 130 131 .nav { 132 display: none; 133 margin-bottom: 15px; 134 135 > li{ 136 margin-left: 20px; 137 138 > a{ 139 -webkit-font-smoothing: antialiased; 140 padding: 6px 15px; 141 } 142 } 143 } 144 145 .nav-visible { 146 display: block; 147 } 148 } 149 } 150 151 152 .bs-docs-section{ 153 padding-top: 10px; 154 padding-left: 3%; 155 padding-bottom: 80px; 156 157 .lead{ 158 margin-bottom: 48px 159 } 160 161 .doc-sectional{ 162 margin-bottom: 48px; 163 } 164 165 p, li, .alert { 166 font-size: 20px; 167 font-family: $font-family-open-sans; 168 font-weight: $font-weight-open; 169 line-height: 1.5em; 170 margin: 0 0 18px; 171 -webkit-font-smoothing: antialiased; 172 } 173 174 pre{ 175 margin: 0 0 18px; 176 } 177 178 a{ 179 color: $purple; 180 &:hover{ 181 text-decoration: underline; 182 } 183 } 184 185 img{ 186 max-width: 650px; 187 margin-top: 25px; 188 margin-bottom: 25px; 189 } 190 191 h1{ 192 color: $purple; 193 text-transform: uppercase; 194 padding-bottom: 24px; 195 margin-top: 40px; 196 margin-bottom: 24px; 197 border-bottom: 1px solid #eeeeee; 198 @include lato-light(); 199 } 200 201 h2, h3, h4{ 202 margin-bottom: 16px; 203 } 204 205 #graph { 206 margin-top: 30px; 207 } 208 } 209 210 211 @media (max-width: 992px) { 212 body.layout-docs, 213 body.layout-inner, 214 body.layout-intro{ 215 >.container{ 216 .col-md-8[role=main]{ 217 min-height: 0; 218 &::before { 219 border-left: 9999px solid white; 220 } 221 } 222 } 223 } 224 225 body.page-sub{ 226 >.container{ 227 background-color: white; 228 } 229 } 230 231 .docs-sidebar{ 232 margin-top: 0px; 233 margin-bottom: 0px; 234 235 .docs-sidenav{ 236 padding-bottom: 0; 237 238 //all li > a 239 li{ 240 > a{ 241 color: black; 242 @include transition( color 0.5s ease ); 243 } 244 245 > a:hover, 246 > a:focus { 247 color: $purple; 248 @include transition( color 0.5s ease ); 249 } 250 } 251 252 253 > li { 254 >.nav{ 255 li{ 256 a{ 257 color: black; 258 259 &:hover{ 260 color: $purple; 261 } 262 } 263 } 264 } 265 } 266 } 267 } 268 269 .bs-docs-section{ 270 h1{ 271 padding-top: 24px; 272 border-top: 1px solid #eeeeee; 273 } 274 } 275 } 276 277 @media (max-width: 480px) { 278 .bs-docs-section{ 279 img{ 280 max-width: 450px; 281 } 282 283 h1{ 284 font-size: 32px; 285 } 286 } 287 } 288