1//----------------------------------------------------------------------- 2// General Elements 3//----------------------------------------------------------------------- 4 5figure { 6 margin: $default-padding 0; 7 img { 8 border: $default-border; 9 } 10} 11 12table { 13 width: 100%; 14 border-collapse: collapse; 15 margin: 2em 0; 16 line-height: 1.5em; 17} 18table caption { 19 margin-bottom: 1em; 20 text-align: left; 21 font-weight: bold; 22} 23th { 24 border: $default-border; 25 font-weight: bold; 26 background: darken($gray-light, 5%); 27} 28tr { 29 border-bottom: $default-border; 30} 31table + tr { 32 border-top: $default-border; 33} 34td, th { 35 padding: 1em 1.5em; 36 text-align: left; 37 border: $default-border; 38} 39 40pre { 41 background-color: #f7f7f7; 42 box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15), 0 0 3px rgba(0, 0, 0, 0.15); 43 margin: 1em 0 0 0; 44 padding: .99em; 45 position: relative; 46 overflow-x: auto; 47 word-wrap: normal; 48 white-space: pre; 49 font-size: 0.95em; 50 line-height: 1.8em; 51 a { 52 text-decoration: underline!important; 53 } 54 b { 55 background: yellow; 56 font-weight: normal; 57 } 58 strike { 59 text-decoration: none; 60 background-image: linear-gradient(transparent 7px,#cc1f1f 7px,#cc1f1f 9px,transparent 9px); 61 } 62 &[data-filename]::after { 63 visibility: hidden; 64 } 65 &[data-filename]:hover::after { 66 visibility: visible; 67 } 68} 69 70 71//----------------------------------------------------------------------- 72// General Classes 73//----------------------------------------------------------------------- 74 75.element-invisible { 76 @include element-invisible; 77} 78 79.hidden { 80 display: none; 81} 82 83.label { 84 color: inherit; 85 text-transform: uppercase; 86 margin-bottom: 5px; 87 font-size: $small-label-size; 88 font-weight: bold; 89} 90 91.published { 92 font-size: $small-label-size; 93 font-style: italic; 94 color: $gray-light-dark; 95 line-height: $base-line-height * 0.7; 96} 97 98.description { 99 margin: $default-padding 0; 100 101 &:last-child { 102 margin-bottom: 0; 103 } 104} 105 106 107// Spans the full viewport with a gray bar. 108.span-full { 109 background: $gray-light; 110 position: relative; 111 padding: 3em 0; 112 113 &::before, &::after { 114 content: ''; 115 height: 100%; 116 width: 100%; 117 top: 0; 118 position: absolute; 119 background: $gray-light; 120 z-index: -1; 121 } 122 &::before { 123 left: -100%; 124 } 125 &::after { 126 left: 100%; 127 } 128} 129 130// Big blue buttonz! 131.button { 132 background: #0370ea; 133 background-image: linear-gradient(top, #008dfd 0%,#0370ea 100%); 134 border: 1px solid #076bd2; 135 border-radius: 3px; 136 color: $white !important; 137 display: inline-block; 138 font-size: 13px; 139 font-weight: 700; 140 line-height: 1.3; 141 padding: 5px 20px; 142 text-align: center; 143 text-decoration: none !important; 144 text-shadow: 1px 1px 1px #076bd2; 145 146 &:hover { 147 background-image: linear-gradient(top, #008dfd 30%,#0370ea 100%); 148 cursor: pointer; 149 } 150 151 a { 152 color: inherit !important; 153 } 154} 155 156.button-alt { 157 background: #eee; 158 background-image: linear-gradient(bottom, #DCDCDC 46%, #FAFAFA 87%); 159 border: 1px solid #d6d6d6; 160 border-radius: 3px; 161 color: #333 !important; 162 display: inline-block; 163 font-size: 12px; 164 font-weight: 700; 165 line-height: 24px; 166 padding: 0 15px; 167 text-align: center; 168 text-decoration: none !important; 169 text-shadow: none; 170 171 &:hover { 172 background-image: linear-gradient(bottom, #DCDCDC 20%, #FAFAFA 87%); 173 cursor: pointer; 174 } 175} 176 177// Feedback and scroll to top buttons. 178.google-button { 179 background-color: $gray-light; 180 border-radius: 2px 0 0 0; 181 border: 1px solid rgba(0,0,0,0.1); 182 padding: 5px 12px; 183 text-align: center; 184 white-space: nowrap; 185 186 &:hover { 187 border-color: #c6c6c6; 188 box-shadow: 0 -1px 1px rgba(0,0,0,0.1); 189 } 190 &:active { 191 background-color: #f1f1f1; 192 box-shadow: inset 0 0px 2px rgba(0,0,0,0.2); 193 } 194} 195 196.screenshot, 197.screenshot img { 198 margin: 1em 0; 199} 200 201.video-container { 202 position: relative; 203 padding-bottom: 56.25%; 204 padding-top: 30px; 205 height: 0; 206 overflow: hidden; 207 margin: 0 0 20px 0; 208} 209.video-container iframe, 210.video-container object, 211.video-container embed { 212 position: absolute; 213 top: 0; 214 left: 0; 215 width: 100%; 216 height: 100%; 217} 218 219p, div, aside { 220 &.note, 221 &.caution, 222 &.warning { 223 background-color: $gray-light; 224 border-bottom: 1px solid; 225 border-top: 1px solid; 226 overflow: hidden; 227 width: 85%; 228 margin: auto; 229 padding: 1em; 230 //border: none; 231 //box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15), 0 0 3px rgba(0, 0, 0, 0.15); 232 233 } 234 &.note { 235 border-color: #36C; 236 } 237 &.caution { 238 border-color: #FC3; 239 } 240 &.warning { 241 border-color: #A03; 242 em, strong { 243 color: #A03; 244 } 245 } 246} 247 248.permalink { 249 display: none; 250 margin-left: 5px; 251} 252.has-permalink:hover .permalink { 253 display: initial; 254} 255.no-permalink .permalink { 256 display: none !important; 257} 258 259//----------------------------------------------------------------------- 260// Specific Elements 261//----------------------------------------------------------------------- 262 263#gc-footer { 264 .links { 265 a { 266 margin-right: $default-padding; 267 } 268 } 269 #cc-info { 270 font-size: $small-label-size; 271 } 272} 273 274#social-buttons { 275 @include display-flex(); 276 @include justify-content(flex-end); 277 @include align-items(center); 278 279 > * { 280 margin-left: 10px; 281 } 282 283 img { 284 margin: -4px 0 0 1px; 285 } 286} 287 288// @media only screen and (min-width: $break-small) { 289// #gc-pagecontent { 290// > .g-section { 291// padding: $main-content-top-margin / 2 0 $main-content-top-margin; 292// } 293// } 294// .g-unit { 295// &.g-last { 296// .g-content { 297// border-bottom: none; 298// } 299// } 300// .g-content { 301// margin-top: $default-padding; 302// margin-right: 0; 303// &:last-child { 304// padding-bottom: $default-padding; 305// } 306// } 307// } 308// } 309 310 311// Phone 312@media only screen and (max-width: $break-small) { 313 .more-section { 314 .g-last { 315 .g-content { 316 padding-bottom: 0; 317 border: none; 318 } 319 } 320 .g-content { 321 border: $default-border; 322 border-width: 0 0 1px 0; 323 padding-bottom: $default-padding; 324 margin-bottom: $default-padding; 325 } 326 } 327 #gc-footer { 328 .links { 329 a { 330 display: inline-block; 331 } 332 } 333 } 334} 335 336 337#scroll-to-top, 338#send-feedback { 339 border-bottom: none; 340 bottom: 0; 341 position: fixed; 342 z-index: 5; 343} 344#scroll-to-top { 345 border-left: 0; 346 left: 0; 347} 348#send-feedback { 349 border-right: 0; 350 right: 0; 351} 352 353 354//----------------------------------------------------------------------- 355// UNCLEAR IF NEEDED. Move things up as needed. ================ 356//----------------------------------------------------------------------- 357 358/* 359ul.condensed { 360 margin: 0.5em 0; 361 li { 362 margin-top: 0; 363 } 364} 365 366pre { 367 &[data-filename] .filename { 368 background-color: #777; 369 padding: 2px 12px; 370 position: absolute; 371 right: 0; 372 top: 0; 373} 374*/ 375 376/* 377#gc-sidebar { 378 width: 185px; 379 float: left; 380 381 // scroll.js adds and removes the floating class depending on the scroll position. 382 &.floating { 383 overflow: auto; 384 position: fixed; 385 top: 0; bottom: 0; 386 } 387 388 // Sidebar link/button styling. 389 span, a { 390 color: black; 391 display: block; 392 font-weight: normal; 393 position: relative; 394 395 &.level2 { 396 font-weight: bold; 397 } 398 } 399 a:hover, 400 a.selected { 401 color: #0d68ae; 402 } 403 404 a.button, 405 .level3, 406 .level4 { 407 color: #444; 408 } 409 410 .toggleIndicator { 411 background: url(../../images/toggle_sprite.png) no-repeat 0 0; 412 height: 8px; 413 position: absolute; 414 right: 0; 415 top: 3px; 416 width: 8px; 417 418 &.toggled { 419 background-position: 0 -9px; 420 } 421 } 422 423 // Sidebar list styling. 424/* ul { 425 list-style: none; 426 margin: 0; 427 padding: 0; 428 429 &.level2 { 430 margin-left: 10px; 431 padding-top: 10px; 432 } 433 &.level3, 434 &.level4, 435 &.level5 { 436 margin-left: 20px; 437 padding-top: 10px; 438 } 439 } 440 441 li { 442 line-height: 120%; 443 margin: 0; 444 padding: 8px 0; 445 446 &.level2 { 447 border-top: 1px solid #F5F5F5; 448 449 &:first-child { 450 border-top: none; 451 } 452 } 453 } 454} 455*//* 456#toc { 457 background-color: #F5F5F5; 458 border-bottom: 20px solid white; */ 459 /* We want this element to have a visual left-margin of 20px, but margins on 460 floated elements don't affect the borders and background of the elements 461 they float over. So we add this border to force the issue. */ 462/* border-left: 20px solid white; 463 float: right; 464 margin: 5px 0px 0px 0px; 465 padding: 5px; 466 position: relative; 467 width: 250px; 468 word-break: break-word; 469 z-index: 3; 470 471 * { 472 list-style: none; 473 overflow: hidden; 474 padding: 0; 475 text-overflow: ellipsis; 476 white-space: nowrap; 477 } 478 479 a { 480 color: black; 481 } 482 483 h2 { 484 border: none; 485 font-size: 100%; 486 font-weight: bold; 487 margin: 0; 488 padding: 0; 489 } 490 491 ol { 492 margin: 1em 0 0 0; 493 494 li { 495 line-height: 1.2em; 496 margin: .5em 0 .5em 1em; 497 498 ol { 499 margin: 0; 500 501 li { 502 margin: .5em 0 0 1em; 503 } 504 } 505 } 506 } 507 508 .api-reference { 509 border-top: 1px solid #e5e5e5; 510 } 511} 512 513.filtered_item { 514 line-height: 6px; 515} 516 517#filtered_apis { 518 margin-top: 5px; 519} 520 521#skipto { 522 display: none; 523} 524*/ 525/* List with largeish images floated to the right. */ 526/*.imaged { 527 li { 528 clear: right; 529 530 img { 531 float: right; 532 margin-bottom: 1em; 533 } 534 } 535 + p { 536 clear: right; 537 } 538}*/ 539 540// small indent for better visual distinction (e.g., in a long list) 541/*.indent-small { 542 margin-left: 2em; 543}*/ 544 545/* Tabbed pane with header (tabs) and content */ 546/* 547tabs { 548 display: block; 549 margin: 25px 0; 550 551 header { 552 background: inherit; 553 border: 1px solid #ccc; 554 border-bottom: 1px solid white; 555 cursor: auto; 556 display: inline-block; 557 margin-bottom: 0; 558 padding: 10px; 559 outline: none; 560 561 &.unselected { 562 background: #eee; 563 border-bottom: 1px solid #ccc; 564 cursor: pointer; 565 } 566 } 567 content { 568 border: 1px solid #ccc; 569 display: block; 570 margin-top: -1px; 571 padding: 20px; 572 573 &.unselected { 574 display: none; 575 } 576 577 pre { 578 margin: 0; 579 padding: 10px; 580 } 581 } 582} */ 583 584/* 585 * API references. 586 */ 587/* 588.type_name, 589.property { 590 font-style: italic; 591} 592 593.api_reference { 594 div.summary { 595 background-color: #CADEF4; 596 border: 1px solid #93B4D9; 597 font-family: "Courier New", courier, monospace; 598 margin-top: 1em; 599 padding: 0.5em; 600 text-indent: -1.5em; 601 602 .line { 603 padding-left: 1.5em; 604 text-indent: -1.5em; 605 } 606 607 .subdued { 608 color: #7594B8; 609 } 610 } 611 612 div.description { 613 margin-left: 2em; 614 } 615*/ 616 /* This style is used because types with functions prefix the function with the 617 * type name, using a lowercase first letter. */ 618/* .uncapitalize:first-letter { 619 text-transform: lowercase; 620 } 621 622 .capitalize:first-letter { 623 text-transform: uppercase; 624 } 625} 626 627.optional { 628 color: #7D7D7D; 629} 630*/ 631