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