chrome/common/extensions/docs/static/sass/_html.scss

   1 //-----------------------------------------------------------------------
   2 // General Elements
   3 //-----------------------------------------------------------------------
   4
   5 figure {
   6   margin: $default-padding 0;
   7   img {
   8     border: $default-border;
   9   }
  10 }
  11
  12 table {
  13   width: 100%;
  14   border-collapse: collapse;
  15   margin: 2em 0;
  16   line-height: 1.5em;
  17 }
  18 table caption {
  19   margin-bottom: 1em;
  20   text-align: left;
  21   font-weight: bold;
  22 }
  23 th {
  24   border: $default-border;
  25   font-weight: bold;
  26   background: darken($gray-light, 5%);
  27 }
  28 tr {
  29   border-bottom: $default-border;
  30 }
  31 table + tr {
  32   border-top: $default-border;
  33 }
  34 td, th {
  35   padding: 1em 1.5em;
  36   text-align: left;
  37   border: $default-border;
  38 }
  39
  40 pre {
  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
 219 p, 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     max-width: 85%;
 228     padding: 1em;
 229     //border: none;
 230     //box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15), 0 0 3px rgba(0, 0, 0, 0.15);
 231
 232   }
 233   &.note {
 234     border-color: #36C;
 235   }
 236   &.caution {
 237     border-color: #FC3;
 238   }
 239   &.warning {
 240     border-color: #A03;
 241     em, strong {
 242       color: #A03;
 243     }
 244   }
 245 }
 246
 247 .permalink {
 248   display: none;
 249   margin-left: 5px;
 250 }
 251 .has-permalink:hover .permalink {
 252   display: initial;
 253 }
 254 .no-permalink .permalink {
 255   display: none !important;
 256 }
 257
 258 //-----------------------------------------------------------------------
 259 // Specific Elements
 260 //-----------------------------------------------------------------------
 261
 262 #gc-footer {
 263   .links {
 264     a {
 265       margin-right: $default-padding;
 266     }
 267   }
 268   #cc-info {
 269     font-size: $small-label-size;
 270   }
 271 }
 272
 273 #social-buttons {
 274   @include display-flex();
 275   @include justify-content(flex-end);
 276   @include align-items(center);
 277
 278   > * {
 279     margin-left: 10px;
 280   }
 281
 282   img {
 283     margin: -4px 0 0 1px;
 284   }
 285 }
 286
 287 // @media only screen and (min-width: $break-small)  {
 288 //   #gc-pagecontent {
 289 //     > .g-section {
 290 //       padding: $main-content-top-margin / 2 0 $main-content-top-margin;
 291 //     }
 292 //   }
 293 //   .g-unit {
 294 //     &.g-last {
 295 //       .g-content {
 296 //         border-bottom: none;
 297 //       }
 298 //     }
 299 //     .g-content {
 300 //       margin-top: $default-padding;
 301 //       margin-right: 0;
 302 //       &:last-child {
 303 //         padding-bottom: $default-padding;
 304 //       }
 305 //     }
 306 //   }
 307 // }
 308
 309
 310 // Phone
 311 @media only screen and (max-width: $break-small)  {
 312   .more-section {
 313     .g-last {
 314       .g-content {
 315         padding-bottom: 0;
 316         border: none;
 317       }
 318     }
 319     .g-content {
 320       border: $default-border;
 321       border-width: 0 0 1px 0;
 322       padding-bottom: $default-padding;
 323       margin-bottom: $default-padding;
 324     }
 325   }
 326   #gc-footer {
 327     .links {
 328       a {
 329         display: inline-block;
 330       }
 331     }
 332   }
 333 }
 334
 335
 336 #scroll-to-top,
 337 #send-feedback {
 338   border-bottom: none;
 339   bottom: 0;
 340   position: fixed;
 341   z-index: 5;
 342 }
 343 #scroll-to-top {
 344   border-left: 0;
 345   left: 0;
 346 }
 347 #send-feedback {
 348   border-right: 0;
 349   right: 0;
 350 }
 351
 352
 353 //-----------------------------------------------------------------------
 354 // UNCLEAR IF NEEDED. Move things up as needed. ================
 355 //-----------------------------------------------------------------------
 356
 357 /*
 358 ul.condensed {
 359   margin: 0.5em 0;
 360   li {
 361     margin-top: 0;
 362   }
 363 }
 364
 365 pre {
 366   &[data-filename] .filename {
 367     background-color: #777;
 368     padding: 2px 12px;
 369     position: absolute;
 370     right: 0;
 371     top: 0;
 372 }
 373 */
 374
 375 /*
 376 #gc-sidebar {
 377   width: 185px;
 378   float: left;
 379
 380   // scroll.js adds and removes the floating class depending on the scroll position.
 381   &.floating {
 382     overflow: auto;
 383     position: fixed;
 384     top: 0; bottom: 0;
 385   }
 386
 387   // Sidebar link/button styling.
 388   span, a {
 389     color: black;
 390     display: block;
 391     font-weight: normal;
 392     position: relative;
 393
 394     &.level2 {
 395       font-weight: bold;
 396     }
 397   }
 398   a:hover,
 399   a.selected {
 400     color: #0d68ae;
 401   }
 402
 403   a.button,
 404   .level3,
 405   .level4 {
 406     color: #444;
 407   }
 408
 409   .toggleIndicator {
 410     background: url(../../images/toggle_sprite.png) no-repeat 0 0;
 411     height: 8px;
 412     position: absolute;
 413     right: 0;
 414     top: 3px;
 415     width: 8px;
 416
 417     &.toggled {
 418       background-position: 0 -9px;
 419     }
 420   }
 421
 422   // Sidebar list styling.
 423 /*  ul {
 424     list-style: none;
 425     margin: 0;
 426     padding: 0;
 427
 428     &.level2 {
 429       margin-left: 10px;
 430       padding-top: 10px;
 431     }
 432     &.level3,
 433     &.level4,
 434     &.level5 {
 435       margin-left: 20px;
 436       padding-top: 10px;
 437     }
 438   }
 439
 440   li {
 441     line-height: 120%;
 442     margin: 0;
 443     padding: 8px 0;
 444
 445     &.level2 {
 446       border-top: 1px solid #F5F5F5;
 447
 448       &:first-child {
 449         border-top: none;
 450       }
 451     }
 452   }
 453 }
 454 *//*
 455 #toc {
 456   background-color: #F5F5F5;
 457   border-bottom: 20px solid white; */
 458   /* We want this element to have a visual left-margin of 20px, but margins on
 459      floated elements don't affect the borders and background of the elements
 460      they float over. So we add this border to force the issue. */
 461 /*  border-left: 20px solid white;
 462   float: right;
 463   margin: 5px 0px 0px 0px;
 464   padding: 5px;
 465   position: relative;
 466   width: 250px;
 467   word-break: break-word;
 468   z-index: 3;
 469
 470   * {
 471     list-style: none;
 472     overflow: hidden;
 473     padding: 0;
 474     text-overflow: ellipsis;
 475     white-space: nowrap;
 476   }
 477
 478   a {
 479     color: black;
 480   }
 481
 482   h2 {
 483     border: none;
 484     font-size: 100%;
 485     font-weight: bold;
 486     margin: 0;
 487     padding: 0;
 488   }
 489
 490   ol {
 491     margin: 1em 0 0 0;
 492
 493     li {
 494       line-height: 1.2em;
 495       margin: .5em 0 .5em 1em;
 496
 497       ol {
 498         margin: 0;
 499
 500         li {
 501           margin: .5em 0 0 1em;
 502         }
 503       }
 504     }
 505   }
 506
 507   .api-reference {
 508     border-top: 1px solid #e5e5e5;
 509   }
 510 }
 511
 512 .filtered_item {
 513   line-height: 6px;
 514 }
 515
 516 #filtered_apis {
 517   margin-top: 5px;
 518 }
 519
 520 #skipto {
 521   display: none;
 522 }
 523 */
 524 /* List with largeish images floated to the right. */
 525 /*.imaged {
 526   li {
 527     clear: right;
 528
 529     img {
 530       float: right;
 531       margin-bottom: 1em;
 532     }
 533   }
 534   + p {
 535     clear: right;
 536   }
 537 }*/
 538
 539 // small indent for better visual distinction (e.g., in a long list)
 540 /*.indent-small {
 541   margin-left: 2em;
 542 }*/
 543
 544 /* Tabbed pane with header (tabs) and content */
 545 /*
 546 tabs {
 547   display: block;
 548   margin: 25px 0;
 549
 550   header {
 551     background: inherit;
 552     border: 1px solid #ccc;
 553     border-bottom: 1px solid white;
 554     cursor: auto;
 555     display: inline-block;
 556     margin-bottom: 0;
 557     padding: 10px;
 558     outline: none;
 559
 560     &.unselected {
 561       background: #eee;
 562       border-bottom: 1px solid #ccc;
 563       cursor: pointer;
 564     }
 565   }
 566   content {
 567     border: 1px solid #ccc;
 568     display: block;
 569     margin-top: -1px;
 570     padding: 20px;
 571
 572     &.unselected {
 573       display: none;
 574     }
 575
 576     pre {
 577       margin: 0;
 578       padding: 10px;
 579     }
 580   }
 581 } */
 582
 583 /*
 584  * API references.
 585  */
 586 /*
 587 .type_name,
 588 .property {
 589   font-style: italic;
 590 }
 591
 592 .api_reference {
 593   div.summary {
 594     background-color: #CADEF4;
 595     border: 1px solid #93B4D9;
 596     font-family: "Courier New", courier, monospace;
 597     margin-top: 1em;
 598     padding: 0.5em;
 599     text-indent: -1.5em;
 600
 601     .line {
 602       padding-left: 1.5em;
 603       text-indent: -1.5em;
 604     }
 605
 606     .subdued {
 607       color: #7594B8;
 608     }
 609   }
 610
 611   div.description {
 612     margin-left: 2em;
 613   }
 614 */
 615   /* This style is used because types with functions prefix the function with the
 616    * type name, using a lowercase first letter. */
 617 /*  .uncapitalize:first-letter {
 618     text-transform: lowercase;
 619   }
 620
 621   .capitalize:first-letter {
 622     text-transform: uppercase;
 623   }
 624 }
 625
 626 .optional {
 627   color: #7D7D7D;
 628 }
 629 */