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