• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
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