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