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