mirror of
https://github.com/google/pebble.git
synced 2025-05-28 14:03:12 +00:00
Import the pebble dev site into devsite/
This commit is contained in:
Katharine Berry
parent
3b92768480
commit
527858cf4c
1359 changed files with 265431 additions and 0 deletions
273
devsite/source/_sass/app.scss
Normal file
273
devsite/source/_sass/app.scss
Normal file
|
|
@ -0,0 +1,273 @@
|
|||
/**
|
||||
* Copyright 2025 Google LLC
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
@import 'bourbon/bourbon';
|
||||
|
||||
@import 'colors';
|
||||
|
||||
@import 'base/base';
|
||||
@import 'responsive/responsive';
|
||||
@import 'font-awesome/font-awesome';
|
||||
|
||||
@import 'header';
|
||||
@import 'footer';
|
||||
|
||||
* {
|
||||
@include box-sizing(border-box);
|
||||
}
|
||||
|
||||
body,
|
||||
html {
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
body {
|
||||
padding-top: $header-height;
|
||||
background-color: $gray-01;
|
||||
}
|
||||
|
||||
.anchor[id],
|
||||
.anchor[name] {
|
||||
&::before {
|
||||
content: ' ';
|
||||
display: block;
|
||||
height: $header-height;
|
||||
margin-top: -0.7 * $header-height;
|
||||
visibility: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.hidden {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
code {
|
||||
background-color: $white;
|
||||
border-radius: 2px;
|
||||
color: darken($base-font-color, 20);
|
||||
font-family: $monospace;
|
||||
font-size: $base-font-size;
|
||||
padding: 2px 4px;
|
||||
box-shadow: inset 0 0 2px #bbb;
|
||||
}
|
||||
|
||||
a code {
|
||||
color: darken($base-link-color, 10);
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: none;
|
||||
padding: 1em;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.vcenter {
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.vcenter--wrapper {
|
||||
display: table;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.hcenter {
|
||||
display: table-cell;
|
||||
position: relative;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
.hcenter--wrapper {
|
||||
display: table;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.pagetitle {
|
||||
text-transform: uppercase;
|
||||
line-height: 1.1;
|
||||
|
||||
a {
|
||||
color: $base-text-color;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.pagetitle--skinny {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.pagesubtitle {
|
||||
font-weight: normal;
|
||||
font-size: 1.4em;
|
||||
text-transform: uppercase;
|
||||
color: #999;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
.noscript--hide {
|
||||
}
|
||||
|
||||
.noscript--show {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.git-contributors {
|
||||
li {
|
||||
display: inline-block;
|
||||
margin-right: 0.5em;
|
||||
|
||||
&:after {
|
||||
content: ', ';
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
|
||||
&:after {
|
||||
content: '';
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.stop-scrolling {
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
@import 'elements/alert';
|
||||
@import 'elements/buttons';
|
||||
@import 'elements/form';
|
||||
@import 'elements/mobile-nav';
|
||||
@import 'elements/highlight';
|
||||
@import 'elements/inline-list';
|
||||
@import 'elements/markdown';
|
||||
@import 'elements/screenshot';
|
||||
@import 'elements/sidebar';
|
||||
@import 'elements/spinner';
|
||||
@import 'elements/table';
|
||||
// @import 'elements/terminal';
|
||||
@import 'elements/toc';
|
||||
// @import 'elements/typeahead';
|
||||
// @import 'elements/video';
|
||||
@import 'elements/bigbox';
|
||||
@import 'elements/full-height';
|
||||
@import 'elements/sectionmenu';
|
||||
@import 'elements/search';
|
||||
@import 'elements/gray-box';
|
||||
@import 'elements/ribbon';
|
||||
@import 'elements/pagination';
|
||||
@import 'elements/landing-slider';
|
||||
@import 'elements/platform-choice';
|
||||
@import 'elements/dual-image';
|
||||
|
||||
@import 'sections/getting-started';
|
||||
|
||||
@import 'libs/slick';
|
||||
@import 'mmenu/jquery.mmenu.all.scss';
|
||||
|
||||
@import 'sections/events';
|
||||
@import 'sections/blog';
|
||||
@import 'sections/documentation';
|
||||
@import 'sections/examples';
|
||||
@import 'sections/guides';
|
||||
@import 'sections/retreat';
|
||||
@import 'sections/inspiration';
|
||||
@import 'sections/round';
|
||||
@import 'sections/sdk';
|
||||
|
||||
@import 'debug';
|
||||
|
||||
.mm-page {
|
||||
height: 100%;
|
||||
position: inherit;
|
||||
|
||||
> div {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.mmenu__wrapper {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.mm-opened,
|
||||
.mm-opening {
|
||||
.mm-page {
|
||||
margin-top: -1 * $header-height;
|
||||
}
|
||||
|
||||
.content {
|
||||
padding-top: $header-height;
|
||||
}
|
||||
}
|
||||
|
||||
.color-picker polygon {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.size-helper {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
background-color: #222;
|
||||
color: #fff;
|
||||
font-size: 0.8em;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
background-color: $gray-01;
|
||||
}
|
||||
|
||||
.header--skinny {
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.header--flat-bottom {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
video {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.video--fullwidth {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.embed.embed--youtube {
|
||||
position: relative;
|
||||
padding-bottom: 56.25%;
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
max-width: 100%;
|
||||
|
||||
iframe,
|
||||
.video-wrapper {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
40
devsite/source/_sass/base/_base.scss
Normal file
40
devsite/source/_sass/base/_base.scss
Normal file
|
|
@ -0,0 +1,40 @@
|
|||
/**
|
||||
* Copyright 2025 Google LLC
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
// Bitters v0.10.0
|
||||
// http://bitters.bourbon.io
|
||||
|
||||
// Variables
|
||||
@import 'variables';
|
||||
|
||||
// Neat Settings -- uncomment if using Neat -- must be imported before Neat
|
||||
// @import 'grid-settings';
|
||||
|
||||
// Mixins
|
||||
@import 'mixins/flash';
|
||||
|
||||
// Extends
|
||||
@import 'extends/button';
|
||||
@import 'extends/clearfix';
|
||||
@import 'extends/hide-text';
|
||||
|
||||
// Typography and Elements
|
||||
@import 'typography';
|
||||
// @import 'forms';
|
||||
@import 'tables';
|
||||
@import 'lists';
|
||||
@import 'flashes';
|
||||
// @import 'buttons';
|
||||
26
devsite/source/_sass/base/_buttons.scss
Normal file
26
devsite/source/_sass/base/_buttons.scss
Normal file
|
|
@ -0,0 +1,26 @@
|
|||
/**
|
||||
* Copyright 2025 Google LLC
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
button,
|
||||
input[type="submit"] {
|
||||
@extend %button;
|
||||
@include appearance(none);
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
vertical-align: middle;
|
||||
white-space: nowrap;
|
||||
}
|
||||
31
devsite/source/_sass/base/_flashes.scss
Normal file
31
devsite/source/_sass/base/_flashes.scss
Normal file
|
|
@ -0,0 +1,31 @@
|
|||
/**
|
||||
* Copyright 2025 Google LLC
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
%flash-alert {
|
||||
@include flash($alert-color);
|
||||
}
|
||||
|
||||
%flash-error {
|
||||
@include flash($error-color);
|
||||
}
|
||||
|
||||
%flash-notice {
|
||||
@include flash($notice-color);
|
||||
}
|
||||
|
||||
%flash-success {
|
||||
@include flash($success-color);
|
||||
}
|
||||
94
devsite/source/_sass/base/_forms.scss
Normal file
94
devsite/source/_sass/base/_forms.scss
Normal file
|
|
@ -0,0 +1,94 @@
|
|||
/**
|
||||
* Copyright 2025 Google LLC
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
fieldset {
|
||||
background: lighten($base-border-color, 10);
|
||||
border: 1px solid $base-border-color;
|
||||
margin: 0 0 ($base-line-height / 2) 0;
|
||||
padding: $base-line-height;
|
||||
}
|
||||
|
||||
input,
|
||||
label,
|
||||
select {
|
||||
display: block;
|
||||
font-family: $form-font-family;
|
||||
font-size: $form-font-size;
|
||||
}
|
||||
|
||||
label {
|
||||
font-weight: bold;
|
||||
margin-bottom: $base-line-height / 4;
|
||||
|
||||
&.required:after {
|
||||
content: "*";
|
||||
}
|
||||
|
||||
abbr {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
textarea,
|
||||
#{$all-text-inputs},
|
||||
select[multiple=multiple] {
|
||||
@include box-sizing(border-box);
|
||||
@include transition(border-color);
|
||||
background-color: white;
|
||||
border-radius: $form-border-radius;
|
||||
border: 1px solid $form-border-color;
|
||||
box-shadow: $form-box-shadow;
|
||||
font-family: $form-font-family;
|
||||
font-size: $form-font-size;
|
||||
margin-bottom: $base-line-height / 2;
|
||||
padding: ($base-line-height / 3) ($base-line-height / 3);
|
||||
width: 100%;
|
||||
|
||||
&:hover {
|
||||
border-color: $form-border-color-hover;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
border-color: $form-border-color-focus;
|
||||
box-shadow: $form-box-shadow-focus;
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
||||
textarea {
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
input[type="search"] {
|
||||
@include appearance(none);
|
||||
}
|
||||
|
||||
input[type="checkbox"], input[type="radio"] {
|
||||
display: inline;
|
||||
margin-right: $base-line-height / 4;
|
||||
}
|
||||
|
||||
input[type="file"] {
|
||||
margin-bottom: $base-line-height / 2;
|
||||
padding-bottom: ($base-line-height / 3);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
select {
|
||||
width: auto;
|
||||
max-width: 100%;
|
||||
margin-bottom: $base-line-height;
|
||||
}
|
||||
30
devsite/source/_sass/base/_grid-settings.scss
Normal file
30
devsite/source/_sass/base/_grid-settings.scss
Normal file
|
|
@ -0,0 +1,30 @@
|
|||
/**
|
||||
* Copyright 2025 Google LLC
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
@import '../neat/neat-helpers';
|
||||
|
||||
// Neat Overrides
|
||||
// $column: 90px;
|
||||
// $gutter: 30px;
|
||||
// $grid-columns: 12;
|
||||
// $max-width: em(1200);
|
||||
|
||||
// Neat Breakpoints
|
||||
$medium-screen: em(640);
|
||||
$large-screen: em(860);
|
||||
|
||||
$medium-screen-up: new-breakpoint(min-width $medium-screen 4);
|
||||
$large-screen-up: new-breakpoint(min-width $large-screen 8);
|
||||
46
devsite/source/_sass/base/_lists.scss
Normal file
46
devsite/source/_sass/base/_lists.scss
Normal file
|
|
@ -0,0 +1,46 @@
|
|||
/**
|
||||
* Copyright 2025 Google LLC
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
ul, ol {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style-type: none;
|
||||
|
||||
&%default-ul {
|
||||
list-style-type: disc;
|
||||
margin-bottom: $base-line-height / 2;
|
||||
padding-left: $base-line-height;
|
||||
}
|
||||
|
||||
&%default-ol {
|
||||
list-style-type: decimal;
|
||||
margin-bottom: $base-line-height / 2;
|
||||
padding-left: $base-line-height;
|
||||
}
|
||||
}
|
||||
|
||||
dl {
|
||||
margin-bottom: $base-line-height / 2;
|
||||
|
||||
dt {
|
||||
font-weight: bold;
|
||||
margin-top: $base-line-height / 2;
|
||||
}
|
||||
|
||||
dd {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
33
devsite/source/_sass/base/_tables.scss
Normal file
33
devsite/source/_sass/base/_tables.scss
Normal file
|
|
@ -0,0 +1,33 @@
|
|||
/**
|
||||
* Copyright 2025 Google LLC
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
th {
|
||||
font-weight: bold;
|
||||
padding: ($base-line-height / 2) 0;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
td {
|
||||
padding: ($base-line-height / 2) 0;
|
||||
}
|
||||
|
||||
tr, td, th {
|
||||
vertical-align: middle;
|
||||
}
|
||||
103
devsite/source/_sass/base/_typography.scss
Normal file
103
devsite/source/_sass/base/_typography.scss
Normal file
|
|
@ -0,0 +1,103 @@
|
|||
/**
|
||||
* Copyright 2025 Google LLC
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
body {
|
||||
-webkit-font-smoothing: antialiased;
|
||||
background-color: $base-background-color;
|
||||
color: $base-font-color;
|
||||
font-family: $base-font-family;
|
||||
font-size: $base-font-size;
|
||||
line-height: $unitless-line-height;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
font-family: $header-font-family;
|
||||
line-height: $header-line-height;
|
||||
margin: 0 0 0.5em 0;
|
||||
text-rendering: optimizeLegibility; // Fix the character spacing for headings
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: $base-font-size * 2.25; // 16 * 2.25 = 36px
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: $base-font-size * 2; // 16 * 2 = 32px
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: $base-font-size * 1.75; // 16 * 1.75 = 28px
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: $base-font-size * 1.5; // 16 * 1.5 = 24px
|
||||
}
|
||||
|
||||
h5 {
|
||||
font-size: $base-font-size * 1.25; // 16 * 1.25 = 20px
|
||||
}
|
||||
|
||||
h6 {
|
||||
font-size: $base-font-size;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0 0 ($base-line-height * .5);
|
||||
}
|
||||
|
||||
a {
|
||||
@include transition(color 0.1s linear);
|
||||
color: $base-link-color;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
color: $hover-link-color;
|
||||
}
|
||||
|
||||
&:active, &:focus {
|
||||
color: $hover-link-color;
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
||||
hr {
|
||||
border-bottom: 1px solid $base-border-color;
|
||||
border-left: none;
|
||||
border-right: none;
|
||||
border-top: none;
|
||||
margin: $base-line-height 0;
|
||||
}
|
||||
|
||||
img {
|
||||
margin: 0;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
border-left: 2px solid $base-border-color;
|
||||
color: lighten($base-font-color, 15);
|
||||
margin: $base-line-height 0;
|
||||
padding-left: $base-line-height / 2;
|
||||
}
|
||||
|
||||
cite {
|
||||
color: lighten($base-font-color, 25);
|
||||
font-style: italic;
|
||||
|
||||
&:before {
|
||||
content: '\2014 \00A0';
|
||||
}
|
||||
}
|
||||
61
devsite/source/_sass/base/_variables.scss
Normal file
61
devsite/source/_sass/base/_variables.scss
Normal file
|
|
@ -0,0 +1,61 @@
|
|||
/**
|
||||
* Copyright 2025 Google LLC
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
// Typography
|
||||
$sans-serif: 'Open Sans';
|
||||
$serif: $georgia;
|
||||
$monospace: 'Inconsolata';
|
||||
$base-font-family: $sans-serif;
|
||||
$header-font-family: $base-font-family;
|
||||
|
||||
// Sizes
|
||||
$base-font-size: 15px;
|
||||
$base-line-height: 1.4 * $base-font-size;
|
||||
$unitless-line-height: 1.4; // Strip units from line-height: https://developer.mozilla.org/en-US/docs/Web/CSS/line-height#Prefer_unitless_numbers_for_line-height_values
|
||||
$header-line-height: 1.3;
|
||||
$base-border-radius: em(3);
|
||||
|
||||
// Background Color
|
||||
$base-background-color: #fff;
|
||||
|
||||
// Font Colors
|
||||
$base-font-color: $gray-03;
|
||||
$base-accent-color: $lightblue;
|
||||
|
||||
// Link Colors
|
||||
$base-link-color: $base-accent-color;
|
||||
$hover-link-color: darken($base-accent-color, 15);
|
||||
$base-button-color: $base-link-color;
|
||||
$hover-button-color: $hover-link-color;
|
||||
|
||||
// Border color
|
||||
$base-border-color: $gray-03;
|
||||
|
||||
// Flash Colors
|
||||
$alert-color: $yellow;
|
||||
$error-color: $red;
|
||||
$notice-color: $yellow;
|
||||
$success-color: $green;
|
||||
|
||||
// Forms
|
||||
$form-border-color: $base-border-color;
|
||||
$form-border-color-hover: darken($base-border-color, 10);
|
||||
$form-border-color-focus: $base-accent-color;
|
||||
$form-border-radius: $base-border-radius;
|
||||
$form-box-shadow: inset 0 1px 3px rgba(0,0,0,0.06);
|
||||
$form-box-shadow-focus: $form-box-shadow, 0 0 5px rgba(darken($form-border-color-focus, 5), 0.7);
|
||||
$form-font-size: $base-font-size;
|
||||
$form-font-family: $base-font-family;
|
||||
33
devsite/source/_sass/base/extends/_button.scss
Normal file
33
devsite/source/_sass/base/extends/_button.scss
Normal file
|
|
@ -0,0 +1,33 @@
|
|||
/**
|
||||
* Copyright 2025 Google LLC
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
%button {
|
||||
-webkit-font-smoothing: antialiased;
|
||||
background-color: $base-button-color;
|
||||
border-radius: $base-border-radius;
|
||||
color: white;
|
||||
display: inline-block;
|
||||
font-size: $base-font-size;
|
||||
font-weight: bold;
|
||||
line-height: 1;
|
||||
padding: .75em 1em;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
background-color: $hover-button-color;
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
19
devsite/source/_sass/base/extends/_clearfix.scss
Normal file
19
devsite/source/_sass/base/extends/_clearfix.scss
Normal file
|
|
@ -0,0 +1,19 @@
|
|||
/**
|
||||
* Copyright 2025 Google LLC
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
%clearfix {
|
||||
@include clearfix;
|
||||
}
|
||||
19
devsite/source/_sass/base/extends/_hide-text.scss
Normal file
19
devsite/source/_sass/base/extends/_hide-text.scss
Normal file
|
|
@ -0,0 +1,19 @@
|
|||
/**
|
||||
* Copyright 2025 Google LLC
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
%hide-text {
|
||||
@include hide-text;
|
||||
}
|
||||
31
devsite/source/_sass/base/mixins/_flash.scss
Normal file
31
devsite/source/_sass/base/mixins/_flash.scss
Normal file
|
|
@ -0,0 +1,31 @@
|
|||
/**
|
||||
* Copyright 2025 Google LLC
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
@mixin flash($color) {
|
||||
background: $color;
|
||||
color: darken($color, 60);
|
||||
font-weight: bold;
|
||||
margin-bottom: $base-line-height / 2;
|
||||
padding: $base-line-height / 2;
|
||||
|
||||
a {
|
||||
color: darken($color, 70);
|
||||
|
||||
&:hover {
|
||||
color: darken($color, 90);
|
||||
}
|
||||
}
|
||||
}
|
||||
39
devsite/source/_sass/col.scss
Normal file
39
devsite/source/_sass/col.scss
Normal file
|
|
@ -0,0 +1,39 @@
|
|||
/**
|
||||
* Copyright 2025 Google LLC
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
$pebble-black: #111;
|
||||
$pebble-blue: #16b5d8;
|
||||
$pebble-blue-alt: darken(#16b5d8, 20);
|
||||
$pebble-gray: #959fa0;
|
||||
$pebble-green: #aed70d;
|
||||
$pebble-orange: #f57216;
|
||||
$pebble-pink: #ff568a;
|
||||
$pebble-red: #b93231;
|
||||
$pebble-silver: #bdc3c7;
|
||||
|
||||
$green: #00a94b;
|
||||
$blue: #16aee5;
|
||||
$red: #ff1200;
|
||||
$dark-grey: #444;
|
||||
$darker-grey: #333;
|
||||
$pink: #d84ba1;
|
||||
$yellow: #e5e327;
|
||||
$purple: #9d49d5;
|
||||
$orange: #e79b22;
|
||||
|
||||
$color-guides: $yellow;
|
||||
$color-documentation: $pink;
|
||||
$color-community: $purple;
|
||||
97
devsite/source/_sass/colors.scss
Normal file
97
devsite/source/_sass/colors.scss
Normal file
|
|
@ -0,0 +1,97 @@
|
|||
/**
|
||||
* Copyright 2025 Google LLC
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
$pebble-black: #111;
|
||||
$pebble-blue: #16b5d8;
|
||||
$pebble-blue-alt: darken(#16b5d8, 20);
|
||||
$pebble-gray: #959fa0;
|
||||
$pebble-green: #aed70d;
|
||||
$pebble-orange: #f57216;
|
||||
$pebble-pink: #ff568a;
|
||||
$pebble-red: #b93231;
|
||||
$pebble-silver: #bdc3c7;
|
||||
|
||||
$header-orange: #ef6725;
|
||||
|
||||
$white: #fff;
|
||||
$breakfast-room-white: #FFFFF0;
|
||||
$black: #000;
|
||||
$green: #00a94b;
|
||||
$blue: #16aee5;
|
||||
$red: #ff1200;
|
||||
$dark-grey: #444;
|
||||
$darker-grey: #333;
|
||||
$pink: #d84ba1;
|
||||
$yellow: #e5e327;
|
||||
$mustard-yellow: #f5d04c;
|
||||
$purple: #9d49d5;
|
||||
$orange: #e59a25;
|
||||
$orange-02: #e27c3f;
|
||||
$lightblue: #4cafe2;
|
||||
$darkerlightblue: #4c96e2;
|
||||
$dark-red: #d55248;
|
||||
$dark-blue: #3f94c0;
|
||||
$turquoise: #35a2b2;
|
||||
$android-green: #A4C739;
|
||||
|
||||
$bigbox--blue: $lightblue;
|
||||
$bigbox--green: #22a048;
|
||||
$bigbox--darkgreen: darken($bigbox--green, 20);
|
||||
$bigbox--dark-blue: darken($darkerlightblue, 20);
|
||||
|
||||
$color-guides: $yellow;
|
||||
$color-docs: $pink;
|
||||
$color-community: $purple;
|
||||
$color-more: $green;
|
||||
$color-getting-started: $dark-red;
|
||||
$color-sdk: $lightblue;
|
||||
$color-appstore: $orange;
|
||||
$color-other: $dark-grey;
|
||||
|
||||
$gray-01: #f4f4f4;
|
||||
$gray-02: #444;
|
||||
$gray-03: #484848;
|
||||
$gray-04: #eee;
|
||||
$gray-05: #e5e4e4;
|
||||
$gray-06: #d6d6d6;
|
||||
$gray-07: #272822;
|
||||
$gray-08: #ddd;
|
||||
$gray-09: #bebebe;
|
||||
$gray-10: #d9d9d9;
|
||||
$gray-11: #666;
|
||||
$gray-12: #ccc;
|
||||
|
||||
$bigbox--blue: $lightblue;
|
||||
$bigbox--green: #22a048;
|
||||
|
||||
$color-guides: $yellow;
|
||||
$color-docs: $pink;
|
||||
$color-community: $purple;
|
||||
$color-more: $green;
|
||||
$color-getting-started: $dark-red;
|
||||
$color-sdk: $lightblue;
|
||||
$color-appstore: $gray-03;
|
||||
$color-blog: $orange-02;
|
||||
$color-examples: #2c67ce;
|
||||
|
||||
$modifier-color-names: 'guides', 'docs', 'community', 'more', 'getting-started',
|
||||
'sdk', 'appstore', 'blog';
|
||||
|
||||
$modifier-colors: $color-guides, $color-docs, $color-community, $color-more,
|
||||
$color-getting-started, $color-sdk, $color-appstore,
|
||||
$color-blog;
|
||||
|
||||
$modifier-colors-fg: $white $white $white $white $white $white $white $white;
|
||||
24
devsite/source/_sass/debug.scss
Normal file
24
devsite/source/_sass/debug.scss
Normal file
|
|
@ -0,0 +1,24 @@
|
|||
/**
|
||||
* Copyright 2025 Google LLC
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
.visibility-checker {
|
||||
background-color: #444;
|
||||
bottom: 0;
|
||||
color: #fff;
|
||||
position: fixed;
|
||||
right: 0;
|
||||
z-index: 10000;
|
||||
}
|
||||
79
devsite/source/_sass/elements/alert.scss
Normal file
79
devsite/source/_sass/elements/alert.scss
Normal file
|
|
@ -0,0 +1,79 @@
|
|||
/**
|
||||
* Copyright 2025 Google LLC
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
.alert {
|
||||
background-color: #ddd;
|
||||
color: $white;
|
||||
margin-bottom: 1em;
|
||||
padding: 0.5em;
|
||||
|
||||
p {
|
||||
font-size: 0.9em;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
ul {
|
||||
@extend %default-ul;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.alert--large {
|
||||
font-size: 1.1em;
|
||||
padding: 1em;
|
||||
}
|
||||
|
||||
.alert--medium {
|
||||
font-size: 1em;
|
||||
line-height: 1.3;
|
||||
padding: 0.7em;
|
||||
}
|
||||
|
||||
$alert-colors: $white $green $blue $red $purple $yellow $orange $lightblue $dark-red $color-blog;
|
||||
$alert-names: 'white' 'green' 'blue' 'red' 'purple' 'yellow' 'orange' 'lightblue' 'dark-red' 'blog';
|
||||
|
||||
@each $color in $alert-colors {
|
||||
$i: index($alert-colors, $color);
|
||||
|
||||
.alert--fg-#{nth($alert-names, $i)} {
|
||||
color: $color;
|
||||
|
||||
a {
|
||||
color: $color;
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
.alert--bg-#{nth($alert-names, $i)} {
|
||||
background-color: $color;
|
||||
}
|
||||
}
|
||||
|
||||
.alert--error {
|
||||
background-color: $dark-red;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.alert--success {
|
||||
background-color: $green;
|
||||
color: #fff;
|
||||
}
|
||||
188
devsite/source/_sass/elements/bigbox.scss
Normal file
188
devsite/source/_sass/elements/bigbox.scss
Normal file
|
|
@ -0,0 +1,188 @@
|
|||
/**
|
||||
* Copyright 2025 Google LLC
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
.bigbox {
|
||||
text-align: center;
|
||||
padding: 2em;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
|
||||
p {
|
||||
font-size: 1.2 * $base-font-size;
|
||||
}
|
||||
|
||||
h2,
|
||||
h3,
|
||||
h4 {
|
||||
font-weight: 600;
|
||||
|
||||
a {
|
||||
color: $base-font-color;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn {
|
||||
margin-top: 1em;
|
||||
}
|
||||
|
||||
.vcenter,
|
||||
.vcenter--wrapper {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.bigbox--half {
|
||||
height: 50%;
|
||||
}
|
||||
|
||||
.bigbox--third {
|
||||
height: 33.33%;
|
||||
}
|
||||
|
||||
.bigbox--lightblue {
|
||||
background-color: $lightblue;
|
||||
color: $white;
|
||||
}
|
||||
|
||||
.bigbox--blue {
|
||||
background-color: $bigbox--blue;
|
||||
color: $white;
|
||||
}
|
||||
|
||||
.bigbox--dark-blue {
|
||||
background-color: $bigbox--blue;
|
||||
color: $white;
|
||||
}
|
||||
|
||||
.bigbox--green {
|
||||
background-color: $bigbox--green;
|
||||
color: $white;
|
||||
}
|
||||
|
||||
.bigbox--dark-green {
|
||||
background-color: $bigbox--darkgreen;
|
||||
color: $white;
|
||||
}
|
||||
|
||||
.bigbox--orange {
|
||||
background-color: $orange;
|
||||
color: $white;
|
||||
}
|
||||
|
||||
.bigbox--red {
|
||||
background-color: $red;
|
||||
color: $white;
|
||||
}
|
||||
|
||||
.bigbox--dark-red {
|
||||
background-color: $dark-red;
|
||||
color: $white;
|
||||
}
|
||||
|
||||
.bigbox--lightgray {
|
||||
background-color: $gray-04;
|
||||
}
|
||||
|
||||
.bigbox--gray {
|
||||
background-color: $gray-05;
|
||||
}
|
||||
|
||||
.bigbox--darkgray {
|
||||
background-color: $gray-02;
|
||||
color: $white;
|
||||
}
|
||||
|
||||
|
||||
.bigbox--meetups--map {
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center center;
|
||||
}
|
||||
|
||||
.bigbox--android {
|
||||
color: $white;
|
||||
background-color: $android-green;
|
||||
|
||||
i {
|
||||
font-size: 6em;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.bigbox--ios {
|
||||
color: $black;
|
||||
background-color: $white;
|
||||
|
||||
i {
|
||||
font-size: 6em;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.bigbox__banner {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background-color: $green;
|
||||
color: $white;
|
||||
padding: 0.50rem;
|
||||
|
||||
&:hover {
|
||||
color: $white;
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
.bigbox--has-banner {
|
||||
padding-top: 2.5em;
|
||||
}
|
||||
|
||||
.bigbox__highlight {
|
||||
&:hover {
|
||||
-webkit-filter: brightness(110%);
|
||||
}
|
||||
}
|
||||
|
||||
.bigbox__guides-beautiful {
|
||||
background-color: $blue;
|
||||
color: $breakfast-room-white;
|
||||
background-image: url('/assets/images/landing-page/first_time_bg.png');
|
||||
}
|
||||
|
||||
.bigbox__guides-building {
|
||||
background-color: $gray-02;
|
||||
color: $breakfast-room-white;
|
||||
background-image: url('/assets/images/landing-page/back_for_more_bg.png');
|
||||
}
|
||||
|
||||
.bigbox__guides-publishing {
|
||||
background-color: $blue;
|
||||
color: $breakfast-room-white;
|
||||
background-image: url('/assets/images/landing-page/meta_bg.png');
|
||||
}
|
||||
|
||||
.bigbox__guides-interactive {
|
||||
background-color: $gray-02;
|
||||
color: $breakfast-room-white;
|
||||
background-image: url('/assets/images/landing-page/interactive_bg.png');
|
||||
}
|
||||
129
devsite/source/_sass/elements/buttons.scss
Normal file
129
devsite/source/_sass/elements/buttons.scss
Normal file
|
|
@ -0,0 +1,129 @@
|
|||
/**
|
||||
* Copyright 2025 Google LLC
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
.btn {
|
||||
background-color: $white;
|
||||
border-radius: 4px;
|
||||
color: $darker-grey;
|
||||
font-weight: 700;
|
||||
padding: 0.5em 2em;
|
||||
text-transform: uppercase;
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
|
||||
&:hover {
|
||||
color: $darker-grey;
|
||||
}
|
||||
}
|
||||
|
||||
input.btn,
|
||||
submit.btn {
|
||||
border: none;
|
||||
font-size: inherit;
|
||||
}
|
||||
|
||||
$btn-colors: $white $gray-02 $green $blue $red $purple $yellow $orange $lightblue $dark-red $orange-02 $android-green;
|
||||
$btn-names: 'white' gray-02 'green' 'blue' 'red' 'purple' 'yellow' 'orange' 'lightblue' 'dark-red' 'orange-02' 'android-green';
|
||||
|
||||
@each $color in $btn-colors {
|
||||
$i: index($btn-colors, $color);
|
||||
|
||||
.btn--fg-#{nth($btn-names, $i)} {
|
||||
color: $color;
|
||||
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
color: $color;
|
||||
}
|
||||
}
|
||||
|
||||
.btn--bg-#{nth($btn-names, $i)} {
|
||||
background-color: $color;
|
||||
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
background-color: darken($color, 10);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Generate a pair of button classes for each section (original and alternate).
|
||||
// This should be used when adding buttons in each section, in case we change
|
||||
// the colours in the future.
|
||||
@each $color in $modifier-colors {
|
||||
$i: index($modifier-colors, $color);
|
||||
|
||||
.btn--#{nth($modifier-color-names, $i)} {
|
||||
background-color: $color;
|
||||
color: nth($modifier-colors-fg, $i);
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: nth($modifier-colors-fg, $i);
|
||||
background-color: darken($color, 10);
|
||||
}
|
||||
|
||||
a {
|
||||
color: nth($modifier-colors-fg, $i);
|
||||
}
|
||||
}
|
||||
|
||||
.btn--#{nth($modifier-color-names, $i)}--alt {
|
||||
background-color: complement($color);
|
||||
color: nth($modifier-colors-fg, $i);
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: nth($modifier-colors-fg, $i);
|
||||
background-color: darken(complement($color), 10);
|
||||
}
|
||||
|
||||
a {
|
||||
color: nth($modifier-colors-fg, $i);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.btn + .btn {
|
||||
margin-left: 1em;
|
||||
}
|
||||
|
||||
.btn--wide {
|
||||
width: 100%;
|
||||
padding: 0.5em 0;
|
||||
}
|
||||
|
||||
.btn--center {
|
||||
display: table;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.btn--small {
|
||||
font-size: 0.9em;
|
||||
padding: 0.5em 1.5em;
|
||||
}
|
||||
|
||||
.btn--square {
|
||||
border-radius: 0
|
||||
}
|
||||
|
||||
.btn--ios {
|
||||
color: $white;
|
||||
background-color: $black;
|
||||
}
|
||||
48
devsite/source/_sass/elements/calendar.scss
Normal file
48
devsite/source/_sass/elements/calendar.scss
Normal file
|
|
@ -0,0 +1,48 @@
|
|||
/**
|
||||
* Copyright 2025 Google LLC
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
.calendar {
|
||||
|
||||
td,
|
||||
th {
|
||||
padding: 0.5em 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
tbody {
|
||||
td {
|
||||
width: 1/7 * 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.calendar__month {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.calendar__day--off {
|
||||
color: lighten($base-text-color, 50);
|
||||
}
|
||||
|
||||
.calendar__day--today {
|
||||
color: $base-link-color;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.calendar__day--event {
|
||||
background-color: $base-link-color;
|
||||
color: #fff;
|
||||
}
|
||||
27
devsite/source/_sass/elements/dual-image.scss
Normal file
27
devsite/source/_sass/elements/dual-image.scss
Normal file
|
|
@ -0,0 +1,27 @@
|
|||
/**
|
||||
* Copyright 2025 Google LLC
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
/* View 2 images side by side */
|
||||
.pebble-dual-image {
|
||||
overflow: hidden;
|
||||
margin: 2em 1em;
|
||||
.panel {
|
||||
width: 50%;
|
||||
display: inline;
|
||||
float: left;
|
||||
min-width: 244px;
|
||||
}
|
||||
}
|
||||
115
devsite/source/_sass/elements/form.scss
Normal file
115
devsite/source/_sass/elements/form.scss
Normal file
|
|
@ -0,0 +1,115 @@
|
|||
/**
|
||||
* Copyright 2025 Google LLC
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
.form__group {
|
||||
display: table;
|
||||
margin-bottom: 1em;
|
||||
width: 100%;
|
||||
|
||||
input,
|
||||
select,
|
||||
textarea {
|
||||
background-color: white;
|
||||
border: 1px solid $gray-06;
|
||||
border-left: none;
|
||||
border-radius: 0 5px 5px 0;
|
||||
color: $gray-02;
|
||||
display: table-cell;
|
||||
font-family: $sans-serif;
|
||||
font-size: 15px;
|
||||
margin: 0;
|
||||
padding: 7px;
|
||||
text-align: left;
|
||||
width: 100%;
|
||||
|
||||
&.no-label {
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
box-shadow: none;
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
||||
textarea {
|
||||
text-align: left;
|
||||
margin-bottom: -5px;
|
||||
}
|
||||
|
||||
select {
|
||||
height: 2em;
|
||||
}
|
||||
|
||||
.select-style {
|
||||
background-color: white;
|
||||
border-radius: 0 5px 5px 0;
|
||||
border: 1px solid $gray-06;
|
||||
border-left-width: 0;
|
||||
color: transparentize(#444, 0.5);
|
||||
display: table-cell;
|
||||
font-family: $sans-serif;
|
||||
font-size: 15px;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
padding: 3px 7px;
|
||||
text-align: left;
|
||||
width: 100%;
|
||||
|
||||
select {
|
||||
-webkit-appearance: none;
|
||||
background-image: none;
|
||||
background: transparent;
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
padding: 5px 8px;
|
||||
width: 130%;
|
||||
}
|
||||
|
||||
select:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
&.no-label {
|
||||
border-left-width: 1px;
|
||||
}
|
||||
}
|
||||
|
||||
label {
|
||||
background-color: #fff;
|
||||
border: 1px solid $gray-06;
|
||||
border-right: none;
|
||||
border-radius: 5px 0 0 5px;
|
||||
color: #111;
|
||||
display: table-cell;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
margin: 0;
|
||||
padding: 7px 10px;
|
||||
vertical-align: top;
|
||||
white-space: nowrap;
|
||||
width: 25%;
|
||||
}
|
||||
|
||||
input.mce_inline_error {
|
||||
background-color: lighten($dark-red, 40);
|
||||
border: 1px solid $dark-red;
|
||||
}
|
||||
}
|
||||
|
||||
input[type="submit"] {
|
||||
cursor: pointer;
|
||||
}
|
||||
64
devsite/source/_sass/elements/full-height.scss
Normal file
64
devsite/source/_sass/elements/full-height.scss
Normal file
|
|
@ -0,0 +1,64 @@
|
|||
/**
|
||||
* Copyright 2025 Google LLC
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
.full-height {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
@include bp(xs) {
|
||||
.full-height--xs {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@include bp(s) {
|
||||
.full-height--s {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@include bp(m) {
|
||||
.full-height--m {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@include bp(l) {
|
||||
.full-height--l {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.half-height {
|
||||
height: 50%;
|
||||
}
|
||||
|
||||
.half-height--bottom {
|
||||
height: 50%;
|
||||
padding-top: 50%;
|
||||
}
|
||||
|
||||
.one-third-height {
|
||||
height: 33%;
|
||||
}
|
||||
|
||||
.two-thirds-height {
|
||||
height: 67%;
|
||||
}
|
||||
|
||||
.quarter-height {
|
||||
height: 25%;
|
||||
}
|
||||
68
devsite/source/_sass/elements/gray-box.scss
Normal file
68
devsite/source/_sass/elements/gray-box.scss
Normal file
|
|
@ -0,0 +1,68 @@
|
|||
/**
|
||||
* Copyright 2025 Google LLC
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
.gray-box {
|
||||
background-color: $gray-04;
|
||||
border-radius: $base-border-radius;
|
||||
margin-bottom: 1em;
|
||||
overflow-x: hidden;
|
||||
padding: 1em;
|
||||
|
||||
ul {
|
||||
margin-bottom: 1em;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
li {
|
||||
margin-bottom: 0.2em;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
h3 {
|
||||
color: $gray-02;
|
||||
font-size: 1.3em;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
|
||||
a,
|
||||
a:hover,
|
||||
a:active {
|
||||
color: $gray-02;
|
||||
}
|
||||
|
||||
a:hover,
|
||||
a:active {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.gray-box--fixed {
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.white-box {
|
||||
background-color: $white;
|
||||
border-radius: $base-border-radius;
|
||||
margin-bottom: 1em;
|
||||
padding: 0.5em;
|
||||
}
|
||||
297
devsite/source/_sass/elements/highlight.scss
Normal file
297
devsite/source/_sass/elements/highlight.scss
Normal file
|
|
@ -0,0 +1,297 @@
|
|||
/**
|
||||
* Copyright 2025 Google LLC
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
.highlight {
|
||||
background-color: $gray-07;
|
||||
border-radius: $base-border-radius;
|
||||
color: #f8f8f2;
|
||||
font: 13px/1.3em $monospace;
|
||||
margin: 0 0 0.75em;
|
||||
padding: 10px;
|
||||
position: relative;
|
||||
|
||||
@include bp-max (xs) {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
&.squished {
|
||||
border-radius: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
pre {
|
||||
margin: 0;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.code-copy-link {
|
||||
background-color: $turquoise;
|
||||
border-radius: $base-border-radius;
|
||||
color: $white;
|
||||
opacity: 0.1;
|
||||
padding: 0.3em 0.3em 0.3em 0.35em;
|
||||
position: absolute;
|
||||
right: 0.4em;
|
||||
top: 0.4em;
|
||||
transition: opacity 0.2s;
|
||||
|
||||
&.zeroclipboard-is-hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
span {
|
||||
display: inline-block;
|
||||
margin-right: 0.5em;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.code-copy-link {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
// Error
|
||||
.err {
|
||||
background-color: #1e0010;
|
||||
color: #960050;
|
||||
}
|
||||
|
||||
// Keyword
|
||||
.k {
|
||||
color: #66d9ef;
|
||||
}
|
||||
|
||||
// Literal
|
||||
.l {
|
||||
color: #ae81ff;
|
||||
}
|
||||
|
||||
// Name
|
||||
.n {
|
||||
color: #f8f8f2;
|
||||
}
|
||||
|
||||
// Operator
|
||||
.o {
|
||||
color: #f92672;
|
||||
}
|
||||
|
||||
// Punctuation
|
||||
.p {
|
||||
color: #f8f8f2;
|
||||
}
|
||||
|
||||
// Comment.Multiline
|
||||
// Comment.Preproc
|
||||
// Comment.Single
|
||||
// Comment.Special
|
||||
// Comment
|
||||
.c,
|
||||
.cm,
|
||||
.cp,
|
||||
.c1,
|
||||
.cs {
|
||||
color: #e4b21f;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
// Generic.Emph
|
||||
.ge {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
// Generic.Strong
|
||||
.gs {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
// Keyword.Constant
|
||||
// Keyword.Declaration
|
||||
.kc,
|
||||
.kd {
|
||||
color: #66d9ef;
|
||||
}
|
||||
|
||||
// Keyword.Namespace
|
||||
.kn {
|
||||
color: #f92672;
|
||||
}
|
||||
|
||||
// Keyword.Pseudo
|
||||
// Keyword.Reserved
|
||||
// Keyword.Type
|
||||
.kp,
|
||||
.kr,
|
||||
.kt {
|
||||
color: #66d9ef;
|
||||
}
|
||||
|
||||
// Literal.Date
|
||||
.ld {
|
||||
color: #e6db74;
|
||||
}
|
||||
|
||||
// Literal.Number
|
||||
.m {
|
||||
color: #ae81ff;
|
||||
}
|
||||
|
||||
// Literal.String
|
||||
.s {
|
||||
color: #e6db74;
|
||||
}
|
||||
|
||||
// Name.Attribute
|
||||
.na {
|
||||
color: #a6e22e;
|
||||
}
|
||||
|
||||
// Name.Builtin
|
||||
.nb {
|
||||
color: #f8f8f2;
|
||||
}
|
||||
|
||||
// Name.Class
|
||||
.nc {
|
||||
color: #a6e22e;
|
||||
}
|
||||
|
||||
// Name.Constant
|
||||
.no {
|
||||
color: #66d9ef;
|
||||
}
|
||||
|
||||
// Name.Decorator
|
||||
.nd {
|
||||
color: #a6e22e;
|
||||
}
|
||||
|
||||
// Name.Entity
|
||||
.ni {
|
||||
color: #f8f8f2;
|
||||
}
|
||||
|
||||
// Name.Exception
|
||||
// Name.Function
|
||||
.ne,
|
||||
.nf {
|
||||
color: #a6e22e;
|
||||
}
|
||||
|
||||
// Name.Label
|
||||
// Name.Namespace
|
||||
.nl,
|
||||
.nn {
|
||||
color: #f8f8f2;
|
||||
}
|
||||
|
||||
// Name.Other
|
||||
.nx {
|
||||
color: #a6e22e;
|
||||
}
|
||||
|
||||
// Name.Property
|
||||
.py {
|
||||
color: #f8f8f2;
|
||||
}
|
||||
|
||||
// Name.Tag
|
||||
.nt {
|
||||
color: #f92672;
|
||||
}
|
||||
|
||||
// Name.Variable
|
||||
.nv {
|
||||
color: #f8f8f2;
|
||||
}
|
||||
|
||||
// Operator.Word
|
||||
.ow {
|
||||
color: #f92672;
|
||||
}
|
||||
|
||||
// Text.Whitespace
|
||||
.w {
|
||||
color: #f8f8f2;
|
||||
}
|
||||
|
||||
// Literal.Number.Float
|
||||
// Literal.Number.Hex
|
||||
// Literal.Number.Integer
|
||||
// Literal.Number.Oct
|
||||
.mf,
|
||||
.mh,
|
||||
.mi,
|
||||
.mo {
|
||||
color: #ae81ff;
|
||||
}
|
||||
|
||||
// Literal.String.Backtick
|
||||
// Literal.String.Char
|
||||
// Literal.String.Doc
|
||||
// Literal.String.Double
|
||||
.sb,
|
||||
.sc,
|
||||
.sd,
|
||||
.s2 {
|
||||
color: #e6db74;
|
||||
}
|
||||
|
||||
// Literal.String.Escape
|
||||
.se {
|
||||
color: #ae81ff;
|
||||
}
|
||||
|
||||
// Literal.String.Heredoc
|
||||
// Literal.String.Interpol
|
||||
// Literal.String.Other
|
||||
// Literal.String.Regex
|
||||
// Literal.String.Single
|
||||
// Literal.String.Symbol
|
||||
.sh,
|
||||
.si,
|
||||
.sx,
|
||||
.sr,
|
||||
.s1,
|
||||
.ss {
|
||||
color: #e6db74;
|
||||
}
|
||||
|
||||
// Name.Builtin.Pseudo
|
||||
// Name.Variable.Class
|
||||
// Name.Variable.Global
|
||||
// Name.Variable.Instance
|
||||
.bp,
|
||||
.vc,
|
||||
.vg,
|
||||
.vi {
|
||||
color: #f8f8f2;
|
||||
}
|
||||
|
||||
// Literal.Number.Integer.Long
|
||||
.il {
|
||||
color: #ae81ff;
|
||||
}
|
||||
}
|
||||
|
||||
.modal-content .highlight {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.highlight--large {
|
||||
font: 15px/1.3em $monospace;
|
||||
}
|
||||
65
devsite/source/_sass/elements/inline-list.scss
Normal file
65
devsite/source/_sass/elements/inline-list.scss
Normal file
|
|
@ -0,0 +1,65 @@
|
|||
/**
|
||||
* Copyright 2025 Google LLC
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
@charset "UTF-8";
|
||||
|
||||
ul.inline-list {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
li {
|
||||
display: inline-block;
|
||||
|
||||
a {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.inline-list--piped li::after {
|
||||
color: lighten($base-font-color, 30);
|
||||
content: ' | ';
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.inline-list--piped li:last-child::after {
|
||||
content: '';
|
||||
}
|
||||
|
||||
.inline-list--dashed li::after {
|
||||
color: lighten($base-font-color, 40);
|
||||
content: ' — ';
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.inline-list--dashed li:last-child::after {
|
||||
content: '';
|
||||
}
|
||||
|
||||
.inline-list--tags {
|
||||
|
||||
li {
|
||||
background-color: #444;
|
||||
border-radius: 2px;
|
||||
color: $white;
|
||||
display: inline-block;
|
||||
font-size: 0.65em;
|
||||
font-weight: bold;
|
||||
margin-right: 0.2rem;
|
||||
padding: 0.1rem 0.3rem;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
}
|
||||
32
devsite/source/_sass/elements/landing-slider.scss
Normal file
32
devsite/source/_sass/elements/landing-slider.scss
Normal file
|
|
@ -0,0 +1,32 @@
|
|||
/**
|
||||
* Copyright 2025 Google LLC
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
.landing-slider__slide {
|
||||
position: relative;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center center;
|
||||
background-size: cover;
|
||||
|
||||
.vcenter {
|
||||
height: 300px;
|
||||
}
|
||||
}
|
||||
|
||||
.landing-slider__strap {
|
||||
background-color: rgba(0, 0, 0, 0.7);
|
||||
color: #fff;
|
||||
padding: 1em 2em;
|
||||
}
|
||||
126
devsite/source/_sass/elements/markdown.scss
Normal file
126
devsite/source/_sass/elements/markdown.scss
Normal file
|
|
@ -0,0 +1,126 @@
|
|||
/**
|
||||
* Copyright 2025 Google LLC
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
.markdown {
|
||||
|
||||
ul {
|
||||
@extend %default-ul;
|
||||
}
|
||||
|
||||
ol {
|
||||
@extend %default-ol;
|
||||
}
|
||||
|
||||
$table-border-color: $gray-06;
|
||||
$table-border: 1px solid $table-border-color;
|
||||
$table-background: $white;
|
||||
$table-header-background: $gray-02;
|
||||
$table-header-color: $white;
|
||||
$table-hover-color: darken($table-background, 5);
|
||||
$table-stripe-color: darken($table-background, 4);
|
||||
$table-stripe-color-hover: darken($table-stripe-color, 5);
|
||||
$table-padding: 0.5em;
|
||||
|
||||
table {
|
||||
border: $table-border;
|
||||
border-collapse: separate;
|
||||
border-left: 0;
|
||||
border-spacing: 0;
|
||||
margin-bottom: 1em;
|
||||
font-size: 0.9em;
|
||||
}
|
||||
|
||||
tbody {
|
||||
background-color: $table-background;
|
||||
|
||||
td {
|
||||
border-bottom: 0;
|
||||
border-left: 1px solid $table-border-color;
|
||||
border-top: 1px solid $table-border-color;
|
||||
padding: $table-padding;
|
||||
}
|
||||
|
||||
tr:hover > td,
|
||||
tr:hover > th {
|
||||
background-color: $table-hover-color;
|
||||
}
|
||||
|
||||
tr:nth-child(even) {
|
||||
background-color: $table-stripe-color;
|
||||
|
||||
&:hover > td {
|
||||
background-color: $table-stripe-color-hover;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
thead {
|
||||
|
||||
th {
|
||||
background-color: $table-header-background;
|
||||
border-bottom: 0;
|
||||
border-left: 1px solid $table-border-color;
|
||||
color: $table-header-color;
|
||||
padding: $table-padding;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
svg {
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
.markdown--staff,
|
||||
.markdown--user {
|
||||
// margin: 0 auto;
|
||||
max-width: 43em;
|
||||
}
|
||||
|
||||
.markdown--staff {
|
||||
|
||||
img {
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.markdown--legal {
|
||||
|
||||
p {
|
||||
text-align: justify;
|
||||
}
|
||||
|
||||
ol {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
li {
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
|
||||
li strong:first-child {
|
||||
display: inline-block;
|
||||
width: 4em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.markdown--retreat {
|
||||
padding-right: 1.5rem;
|
||||
}
|
||||
113
devsite/source/_sass/elements/mobile-nav.scss
Normal file
113
devsite/source/_sass/elements/mobile-nav.scss
Normal file
|
|
@ -0,0 +1,113 @@
|
|||
/**
|
||||
* Copyright 2025 Google LLC
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
$hamburger-width: $header-height;
|
||||
|
||||
.mobile-nav {
|
||||
background-color: $gray-03;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
overflow-y: auto;
|
||||
position: fixed;
|
||||
top: $header-height;
|
||||
width: 90%;
|
||||
z-index: 200;
|
||||
|
||||
.open {
|
||||
display: inherit;
|
||||
}
|
||||
|
||||
.mainmenu__item a {
|
||||
color: #fff;
|
||||
display: block;
|
||||
font-size: 13px;
|
||||
font-weight: bold;
|
||||
height: 4.4em;
|
||||
margin: 0.5em 0;
|
||||
padding: 1.5em;
|
||||
position: relative;
|
||||
text-transform: uppercase;
|
||||
|
||||
&:hover {
|
||||
background-color: lighten($gray-03, 10);
|
||||
}
|
||||
}
|
||||
|
||||
.mainmenu__item.active a {
|
||||
background-color: $gray-06;
|
||||
color: $gray-03;
|
||||
}
|
||||
}
|
||||
|
||||
.mobile-nav__hamburger {
|
||||
display: none;
|
||||
|
||||
@include bp-max (xs) {
|
||||
border-bottom: 1px solid $gray-10;
|
||||
display: block;
|
||||
position: fixed;
|
||||
background-color: $white;
|
||||
left: 0;
|
||||
width: $hamburger-width;
|
||||
top: 0;
|
||||
height: $header-height;
|
||||
padding: $base-font-size / 1.5 0;
|
||||
font-size: $base-font-size * 2;
|
||||
text-align: center;
|
||||
color: $gray-03;
|
||||
|
||||
&:hover,
|
||||
&:active {
|
||||
color: $gray-03;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mobile-nav--home {
|
||||
border-left: 5px solid transparent;
|
||||
}
|
||||
|
||||
.mobile-nav--tutorials {
|
||||
border-left: 5px solid $color-getting-started;
|
||||
}
|
||||
|
||||
.mobile-nav--sdk {
|
||||
border-left: 5px solid $color-sdk;
|
||||
}
|
||||
|
||||
.mobile-nav--guides {
|
||||
border-left: 5px solid $color-guides;
|
||||
}
|
||||
|
||||
.mobile-nav--docs {
|
||||
border-left: 5px solid $color-docs;
|
||||
}
|
||||
|
||||
.mobile-nav--examples {
|
||||
border-left: 5px solid $color-examples;
|
||||
}
|
||||
|
||||
.mobile-nav--community {
|
||||
border-left: 5px solid $color-community;
|
||||
}
|
||||
|
||||
.mobile-nav--blog {
|
||||
border-left: 5px solid $color-blog;
|
||||
}
|
||||
|
||||
.mobile-nav--more {
|
||||
border-left: 5px solid $color-more;
|
||||
}
|
||||
44
devsite/source/_sass/elements/pagination.scss
Normal file
44
devsite/source/_sass/elements/pagination.scss
Normal file
|
|
@ -0,0 +1,44 @@
|
|||
/**
|
||||
* Copyright 2025 Google LLC
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
.pagination {
|
||||
margin: 0.5rem 0;
|
||||
|
||||
li {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
a {
|
||||
border: 1px solid $gray-08;
|
||||
border-radius: $base-border-radius;
|
||||
color: $gray-02;
|
||||
display: block;
|
||||
padding: 0.5rem 1rem;
|
||||
|
||||
&:hover {
|
||||
// background-color: lighten($base-link-color, 20);
|
||||
border-color: $base-link-color;
|
||||
color: $base-link-color;
|
||||
}
|
||||
}
|
||||
|
||||
.active a {
|
||||
background-color: $base-link-color;
|
||||
color: $white;
|
||||
font-weight: bold;
|
||||
border-color: $base-link-color;
|
||||
}
|
||||
}
|
||||
88
devsite/source/_sass/elements/platform-choice.scss
Normal file
88
devsite/source/_sass/elements/platform-choice.scss
Normal file
|
|
@ -0,0 +1,88 @@
|
|||
/**
|
||||
* Copyright 2025 Google LLC
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
.platform-choice {
|
||||
padding: 0.5em;
|
||||
border-radius: $base-border-radius;
|
||||
}
|
||||
|
||||
.platform-choice--large {
|
||||
font-size: 1.1em;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.platform-choice--small {
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
img {
|
||||
display: block;
|
||||
float: left;
|
||||
height: $unitless-line-height * 1em;
|
||||
margin-right: 0.5em;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #fff;
|
||||
font-weight: bold;
|
||||
white-space: nowrap;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.platform-choice--hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.platform-choice--link {
|
||||
display: inline-block;
|
||||
margin: 0 1em;
|
||||
|
||||
img {
|
||||
display: block;
|
||||
height: 3em;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
h4 {
|
||||
color: $white;
|
||||
font-size: 0.9em;
|
||||
margin: 0.5em 0 0;
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
h4 {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Hide all of the platform specific instructions by default.
|
||||
.platform-specific {
|
||||
display: none;
|
||||
}
|
||||
|
||||
// Unhide CloudPebble instructions to handle lack of JS support / JS failures.
|
||||
.platform-specific[data-sdk-platform="cloudpebble"] {
|
||||
display: inherit;
|
||||
}
|
||||
65
devsite/source/_sass/elements/ribbon.scss
Normal file
65
devsite/source/_sass/elements/ribbon.scss
Normal file
|
|
@ -0,0 +1,65 @@
|
|||
/**
|
||||
* Copyright 2025 Google LLC
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
.ribbon {
|
||||
@include transform(rotate(45deg));
|
||||
background-color: $pebble-green;
|
||||
box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
|
||||
color: #fff;
|
||||
font-size: 19px;
|
||||
font-weight: bold;
|
||||
left: -5px;
|
||||
line-height: 15px;
|
||||
padding: 10px 0 8px;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
top: 15px;
|
||||
width: 120px;
|
||||
}
|
||||
|
||||
.ribbon__wrapper {
|
||||
height: 88px;
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
width: 85px;
|
||||
}
|
||||
|
||||
.ribbon__container {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.ribbon--bg-white {
|
||||
background-color: $white;
|
||||
}
|
||||
|
||||
.ribbon--fg-dark-grey {
|
||||
color: $dark-grey;
|
||||
}
|
||||
|
||||
.ribbon--bg-dark-red {
|
||||
background-color: $dark-red;
|
||||
}
|
||||
|
||||
.ribbon--fg-dark-red {
|
||||
color: $dark-red;
|
||||
}
|
||||
|
||||
.ribbon--fg-white {
|
||||
color: $white;
|
||||
}
|
||||
|
||||
300
devsite/source/_sass/elements/screenshot.scss
Normal file
300
devsite/source/_sass/elements/screenshot.scss
Normal file
|
|
@ -0,0 +1,300 @@
|
|||
/**
|
||||
* Copyright 2025 Google LLC
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
.pebble-screenshot {
|
||||
background-repeat: no-repeat;
|
||||
display: inline-block;
|
||||
height: 407px;
|
||||
padding: 112px 49px 127px;
|
||||
text-align: left;
|
||||
width: 242px;
|
||||
background-size: contain;
|
||||
}
|
||||
|
||||
.pebble-screenshot--steel-black,
|
||||
.pebble-screenshot--steel-stainless {
|
||||
height: 424px;
|
||||
padding: 113px 50px 143px;
|
||||
width: 244px;
|
||||
}
|
||||
|
||||
.pebble-screenshot--time-black,
|
||||
.pebble-screenshot--time-white,
|
||||
.pebble-screenshot--time-red {
|
||||
height: 350px;
|
||||
padding-top: 91px;
|
||||
padding-left: 50px;
|
||||
padding-right: 50px;
|
||||
padding-bottom: 91px;
|
||||
width: 244px;
|
||||
}
|
||||
|
||||
.pebble-screenshot--time-round-black-20,
|
||||
.pebble-screenshot--time-round-silver-20 {
|
||||
height: 390px;
|
||||
padding-top: 110px;
|
||||
padding-left: 55px;
|
||||
padding-right: 54px;
|
||||
padding-bottom: 100px;
|
||||
width: 289px;
|
||||
}
|
||||
|
||||
.pebble-screenshot--time-round-red-14,
|
||||
.pebble-screenshot--time-round-rosegold-14,
|
||||
.pebble-screenshot--time-round-silver-14 {
|
||||
height: 390px;
|
||||
padding-top: 107px;
|
||||
padding-left: 58px;
|
||||
padding-right: 56px;
|
||||
padding-bottom: 103px;
|
||||
width: 294px;
|
||||
}
|
||||
|
||||
.pebble-screenshot--pebble2-black,
|
||||
.pebble-screenshot--pebble2-black-lime,
|
||||
.pebble-screenshot--pebble2-black-red,
|
||||
.pebble-screenshot--pebble2-white,
|
||||
.pebble-screenshot--pebble2-white-teal {
|
||||
height: 390px;
|
||||
padding-top: 103px;
|
||||
padding-left: 48px;
|
||||
padding-right: 86px;
|
||||
padding-bottom: 100px;
|
||||
width: 294px;
|
||||
}
|
||||
|
||||
.pebble-screenshot--steel-black {
|
||||
background-image: url('/assets/images/pebbles/steel_black.png');
|
||||
}
|
||||
|
||||
.pebble-screenshot--steel-stainless {
|
||||
background-image: url('/assets/images/pebbles/steel_stainless.png');
|
||||
}
|
||||
|
||||
.pebble-screenshot--time-black {
|
||||
background-image: url('/assets/images/pebbles/snowy-black.png');
|
||||
}
|
||||
|
||||
.pebble-screenshot--time-red {
|
||||
background-image: url('/assets/images/pebbles/snowy-red.png');
|
||||
}
|
||||
|
||||
.pebble-screenshot--time-white {
|
||||
background-image: url('/assets/images/pebbles/snowy-white.png');
|
||||
}
|
||||
|
||||
.pebble-screenshot--red {
|
||||
background-image: url('/assets/images/pebbles/red.png');
|
||||
}
|
||||
|
||||
.pebble-screenshot--black {
|
||||
background-image: url('/assets/images/pebbles/black.png');
|
||||
}
|
||||
|
||||
.pebble-screenshot--orange {
|
||||
background-image: url('/assets/images/pebbles/orange.png');
|
||||
}
|
||||
|
||||
.pebble-screenshot--white {
|
||||
background-image: url('/assets/images/pebbles/white.png');
|
||||
}
|
||||
|
||||
.pebble-screenshot--grey {
|
||||
background-image: url('/assets/images/pebbles/grey.png');
|
||||
}
|
||||
|
||||
.pebble-screenshot--white-black {
|
||||
background-image: url('/assets/images/pebbles/white_black.png');
|
||||
}
|
||||
|
||||
.pebble-screenshot--time-round-black-20,
|
||||
.pebble-screenshot--time-round-silver-20 {
|
||||
background-image: url('/assets/images/pebbles/time-round-black-20.png');
|
||||
}
|
||||
|
||||
.pebble-screenshot--time-round-red-14,
|
||||
.pebble-screenshot--time-round-rosegold-14,
|
||||
.pebble-screenshot--time-round-silver-14 {
|
||||
background-image: url('/assets/images/pebbles/time-round-red-14.png');
|
||||
}
|
||||
|
||||
.pebble-screenshot--pebble2-black {
|
||||
background-image: url('/assets/images/pebbles/device_pebble2_black.png');
|
||||
}
|
||||
|
||||
.pebble-screenshot--pebble2-black-lime {
|
||||
background-image: url('/assets/images/pebbles/device_pebble2_blacklime.png');
|
||||
}
|
||||
|
||||
.pebble-screenshot--pebble2-black-red {
|
||||
background-image: url('/assets/images/pebbles/device_pebble2_blackred.png');
|
||||
}
|
||||
|
||||
.pebble-screenshot--pebble2-white {
|
||||
background-image: url('/assets/images/pebbles/device_pebble2_white.png');
|
||||
}
|
||||
|
||||
.pebble-screenshot--pebble2-white-teal {
|
||||
background-image: url('/assets/images/pebbles/device_pebble2_whiteteal.png');
|
||||
}
|
||||
|
||||
.pebble-screenshot--strapless {
|
||||
background-position: 0 -34px;
|
||||
height: 339px;
|
||||
padding-bottom: 93px;
|
||||
padding-top: 78px;
|
||||
|
||||
&.pebble-screenshot--steel-black,
|
||||
&.pebble-screenshot--steel-stainless {
|
||||
background-position: 0 -50px;
|
||||
height: 324px;
|
||||
padding-top: 63px;
|
||||
}
|
||||
}
|
||||
|
||||
.pebble-screenshot--smaller {
|
||||
|
||||
&.pebble-screenshot--steel-black,
|
||||
&.pebble-screenshot--steel-stainless {
|
||||
height: 212px;
|
||||
padding: 56px 25px 72px;
|
||||
width: 122px;
|
||||
}
|
||||
|
||||
&.pebble-screenshot--time-black,
|
||||
&.pebble-screenshot--time-white,
|
||||
&.pebble-screenshot--time-red {
|
||||
height: 175px;
|
||||
padding-top: 45px;
|
||||
padding-left: 25px;
|
||||
padding-right: 25px;
|
||||
padding-bottom: 45px;
|
||||
width: 122px;
|
||||
}
|
||||
|
||||
&.pebble-screenshot--time-round-black-20,
|
||||
&.pebble-screenshot--time-round-red-14,
|
||||
&.pebble-screenshot--time-round-rosegold-14,
|
||||
&.pebble-screenshot--time-round-silver-14,
|
||||
&.pebble-screenshot--time-round-silver-20 {
|
||||
height: 175px;
|
||||
padding-top: 41px;
|
||||
padding-left: 17px;
|
||||
padding-right: 19px;
|
||||
padding-bottom: 42px;
|
||||
width: 128px;
|
||||
}
|
||||
}
|
||||
|
||||
.pebble-screenshot--small {
|
||||
|
||||
&.pebble-screenshot--steel-black,
|
||||
&.pebble-screenshot--steel-stainless {
|
||||
height: 318px;
|
||||
padding: 82px 38px 107px 37px;
|
||||
width: 183px;
|
||||
}
|
||||
|
||||
&.pebble-screenshot--time-black,
|
||||
&.pebble-screenshot--time-white,
|
||||
&.pebble-screenshot--time-red {
|
||||
height: 263px;
|
||||
padding-top: 68px;
|
||||
padding-left: 37px;
|
||||
padding-right: 38px;
|
||||
padding-bottom: 68px;
|
||||
width: 183px;
|
||||
}
|
||||
|
||||
&.pebble-screenshot--time-round-black-20,
|
||||
&.pebble-screenshot--time-round-red-14,
|
||||
&.pebble-screenshot--time-round-rosegold-14,
|
||||
&.pebble-screenshot--time-round-silver-14,
|
||||
&.pebble-screenshot--time-round-silver-20 {
|
||||
height: 263px;
|
||||
padding-top: 62px;
|
||||
padding-left: 26px;
|
||||
padding-right: 25px;
|
||||
padding-bottom: 64px;
|
||||
width: 188px;
|
||||
}
|
||||
}
|
||||
|
||||
.screenshot-viewer {
|
||||
margin-bottom: 1rem;
|
||||
|
||||
max-width: 100%;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
.screenshot-viewer__screenshots {
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
-webkit-align-items: flex-end;
|
||||
}
|
||||
|
||||
.screenshot-viewer__platform {
|
||||
flex: 1 0 auto;
|
||||
-webkit-flex: 1 0 auto;
|
||||
text-align: center;
|
||||
margin-right: 1rem;
|
||||
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.screenshot-viewer__tabs {
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
-webkit-align-items: flex-end;
|
||||
|
||||
h4 {
|
||||
background-color: $gray-02;
|
||||
color: $white;
|
||||
font-weight: normal;
|
||||
text-transform: uppercase;
|
||||
font-size: 1.2em;
|
||||
padding: 0.2em;
|
||||
margin-top: 0.5em;
|
||||
flex: 1 0 auto;
|
||||
-webkit-flex: 1 0 auto;
|
||||
text-align: center;
|
||||
margin-right: 1rem;
|
||||
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.screenshot-viewer--tabbed {
|
||||
.screenshot-viewer__tabs {
|
||||
h4 {
|
||||
border: 2px solid $gray-02;
|
||||
background-color: $gray-06;
|
||||
color: $gray-02;
|
||||
cursor: pointer;
|
||||
|
||||
&.selected {
|
||||
background-color: $gray-02;
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
248
devsite/source/_sass/elements/search.scss
Normal file
248
devsite/source/_sass/elements/search.scss
Normal file
|
|
@ -0,0 +1,248 @@
|
|||
/**
|
||||
* Copyright 2025 Google LLC
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
.search {
|
||||
background-color: $white;
|
||||
border-bottom: 1px solid $gray-10;
|
||||
height: $header-height;
|
||||
left: $sidebar-width;
|
||||
padding: $base-font-size / 1.2;
|
||||
position: fixed;
|
||||
right: 0;
|
||||
top: 0;
|
||||
z-index: 100;
|
||||
|
||||
@include bp-max ($sidebar-hide-at) {
|
||||
left: 0;
|
||||
padding-left: $hamburger-width;
|
||||
}
|
||||
|
||||
input {
|
||||
-webkit-appearance: textfield;
|
||||
border: 0;
|
||||
box-shadow: none;
|
||||
font-size: $base-font-size * 1.2;
|
||||
padding: $base-font-size / 2;
|
||||
padding-left: 2em;
|
||||
width: 100%;
|
||||
|
||||
@include bp-max ($sidebar-hide-at) {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
box-shadow: none;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
&:before {
|
||||
content: '\f002';
|
||||
font-family: 'FontAwesome';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.search__icon {
|
||||
font-size: $base-font-size * 1.2;
|
||||
left: $base-font-size / 0.6;
|
||||
position: absolute;
|
||||
top: $base-font-size / 0.6;
|
||||
|
||||
@include bp-max ($sidebar-hide-at) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.content--narrow .search {
|
||||
left: $sidebar--wide-width;
|
||||
|
||||
@include bp-max ($sidebar-hide-at) {
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.content--section-menu .search {
|
||||
left: $sidebar-width + $section-menu-width;
|
||||
|
||||
@include bp-max ($sidebar-hide-at) {
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.quicksearch {
|
||||
background-color: #fff;
|
||||
border-bottom: 1px solid #d9d9d9;
|
||||
bottom: 10%;
|
||||
left: $sidebar-width;
|
||||
overflow-y: scroll;
|
||||
padding: 0 1em 1em;
|
||||
position: fixed;
|
||||
right: 0;
|
||||
top: $header-height - 2;
|
||||
z-index: 200;
|
||||
|
||||
@include bp-max ($sidebar-hide-at) {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 1.2 * $base-font-size;
|
||||
margin: 0.5em 0;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
ul {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.quicksearch__block {
|
||||
h3 {
|
||||
color: $white;
|
||||
padding: 0 0.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
.quicksearch__block--guides {
|
||||
h3 {
|
||||
background-color: $color-guides;
|
||||
color: $base-font-color;
|
||||
}
|
||||
}
|
||||
|
||||
.quicksearch__block--docs {
|
||||
h3 {
|
||||
background-color: $color-docs;
|
||||
}
|
||||
}
|
||||
|
||||
.quicksearch__block--community {
|
||||
h3 {
|
||||
background-color: $color-community;
|
||||
}
|
||||
}
|
||||
|
||||
.quicksearch__block--more{
|
||||
h3 {
|
||||
background-color: $color-more;
|
||||
}
|
||||
}
|
||||
|
||||
.quicksearch__block--other {
|
||||
h3 {
|
||||
background-color: $color-other;
|
||||
}
|
||||
}
|
||||
|
||||
.quicksearch__result {
|
||||
margin-bottom: 0.5 * $base-font-size;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
|
||||
}
|
||||
|
||||
.quicksearch__summary {
|
||||
font-size: 0.9 * $base-font-size;
|
||||
line-height: 0.9 * $base-line-height;
|
||||
margin: 0;
|
||||
max-height: 0.9 * $base-line-height;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.search__result__highlight {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.quicksearch__result__tag {
|
||||
background-color: $color-docs;
|
||||
border-radius: 2px;
|
||||
color: #fff;
|
||||
display: inline-block;
|
||||
float: left;
|
||||
font-size: 0.7em;
|
||||
padding: 0.2em 0.3em;
|
||||
margin: 0.1em 0.5em 0.1em 0;
|
||||
}
|
||||
|
||||
.quicksearch__section {
|
||||
margin: 0;
|
||||
font-size: 0.75em;
|
||||
text-transform: uppercase;
|
||||
color: $gray-11;
|
||||
font-weight: bold;
|
||||
width: auto;
|
||||
display: table;
|
||||
}
|
||||
|
||||
.quicksearch__result--active {
|
||||
background-color: $gray-01;
|
||||
border-left: 2px solid $gray-03;
|
||||
border-right: 2px solid $gray-03;
|
||||
margin: -5px -5px 2.5px;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.quicksearch__no-results {
|
||||
font-size: 3em;
|
||||
font-weight: 300;
|
||||
text-align: center;
|
||||
padding: 1em;
|
||||
color: $gray-09;
|
||||
}
|
||||
|
||||
.content--narrow .quicksearch {
|
||||
left: $sidebar--wide-width;
|
||||
|
||||
@include bp-max ($sidebar-hide-at) {
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.content--section-menu .quicksearch {
|
||||
left: $sidebar-width + $section-menu-width;
|
||||
|
||||
@include bp-max ($sidebar-hide-at) {
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
#search__blackout {
|
||||
background-color: rgba(0, 0, 0, 0.7);
|
||||
bottom: 0;
|
||||
left: $sidebar-width;
|
||||
position: fixed;
|
||||
right: 0;
|
||||
top: $header-height;
|
||||
z-index: 150;
|
||||
}
|
||||
|
||||
.content--narrow #search__blackout {
|
||||
left: $sidebar--wide-width;
|
||||
|
||||
@include bp-max ($sidebar-hide-at) {
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.content--section-menu #search__blackout {
|
||||
left: $sidebar-width + $section-menu-width;
|
||||
|
||||
@include bp-max ($sidebar-hide-at) {
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
242
devsite/source/_sass/elements/sectionmenu.scss
Normal file
242
devsite/source/_sass/elements/sectionmenu.scss
Normal file
|
|
@ -0,0 +1,242 @@
|
|||
/**
|
||||
* Copyright 2025 Google LLC
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
$section-menu-width: 240px;
|
||||
|
||||
.sidebar__wrapper--sectionmenu {
|
||||
width: $sidebar-width + $section-menu-width;
|
||||
}
|
||||
|
||||
.section-menu {
|
||||
border-right: 1px solid $gray-08;
|
||||
bottom: 0;
|
||||
left: $sidebar-width;
|
||||
margin-top: $header-height;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: $section-menu-width;
|
||||
overflow-y: auto;
|
||||
|
||||
> ul {
|
||||
padding: 1em;
|
||||
}
|
||||
|
||||
@include bp-max ($sidebar-hide-at) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.content--section-menu {
|
||||
margin-left: $sidebar-width + $section-menu-width;
|
||||
|
||||
@include bp-max ($sidebar-hide-at) {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.section-menu__header {
|
||||
height: $header-height;
|
||||
padding: 0 1em;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
width: $section-menu-width;
|
||||
|
||||
h3 {
|
||||
border-bottom: 1px solid rgba(68,68,68,0.2);
|
||||
font-size: $base-font-size * 1.2;
|
||||
font-weight: 400;
|
||||
margin-top: 3px;
|
||||
padding: $base-line-height / 1.2 0;
|
||||
text-transform: uppercase;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.documentation-menu {
|
||||
background-color: $color-docs;
|
||||
border-bottom: 1px solid rgba(68, 68, 68, 0.3);
|
||||
border-right: 1px solid darken($color-docs, 10);
|
||||
box-shadow: rgba(68, 68, 68, 0.3) 0 5px 5px -5px;
|
||||
display: none;
|
||||
margin: -1em;
|
||||
|
||||
a {
|
||||
display: block;
|
||||
padding: 0.5em 1em;
|
||||
|
||||
&:hover {
|
||||
background-color: darken($color-docs, 5);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.documentation-menu__arrow {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.documentation-menu--visible {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.section-menu__item {
|
||||
|
||||
> a {
|
||||
color: $gray-02;
|
||||
display: inline-block;
|
||||
font-size: 13px;
|
||||
font-weight: bold;
|
||||
margin: $base-line-height / 4 0;
|
||||
padding: 0.5em;
|
||||
}
|
||||
|
||||
> ul {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&.open > ul {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.section-menu__subitem {
|
||||
|
||||
> a {
|
||||
color: $gray-02;
|
||||
display: block;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
margin: 0 0 0.25em 1em;
|
||||
text-transform: none;
|
||||
|
||||
span {
|
||||
display: inline-block;
|
||||
padding: 0.5em;
|
||||
}
|
||||
}
|
||||
|
||||
ul {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&.open ul {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.section-menu__subsubitem {
|
||||
|
||||
> a {
|
||||
color: $gray-02;
|
||||
display: block;
|
||||
font-size: 12px;
|
||||
font-weight: normal;
|
||||
margin: 0 0 0.25em 2em;
|
||||
text-transform: none;
|
||||
|
||||
span {
|
||||
display: inline-block;
|
||||
padding: 0.5em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.section-menu--dark {
|
||||
|
||||
&,
|
||||
a,
|
||||
.section-menu__header a {
|
||||
color: $white;
|
||||
}
|
||||
|
||||
.section-menu__item.active > a,
|
||||
.section-menu__subitem.active > a,
|
||||
.section-menu__subsubitem.active > a span {
|
||||
background-color: $white;
|
||||
border-radius: $base-border-radius;
|
||||
color: $gray-02;
|
||||
}
|
||||
}
|
||||
|
||||
.section-menu--light {
|
||||
|
||||
&,
|
||||
a,
|
||||
.section-menu__header a {
|
||||
color: $gray-02;
|
||||
}
|
||||
|
||||
.section-menu__item.active > a,
|
||||
.section-menu__subitem.active > a,
|
||||
.section-menu__subsubitem.active > a span {
|
||||
background-color: $gray-02;
|
||||
border-radius: $base-border-radius;
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
|
||||
.section-menu--guides {
|
||||
background-color: $color-guides;
|
||||
border-right-color: darken($color-guides, 10);
|
||||
|
||||
.section-menu__header {
|
||||
background-color: $color-guides;
|
||||
}
|
||||
}
|
||||
|
||||
.section-menu--docs {
|
||||
background-color: $color-docs;
|
||||
border-right-color: darken($color-docs, 10);
|
||||
|
||||
.section-menu__header {
|
||||
background-color: $color-docs;
|
||||
}
|
||||
}
|
||||
|
||||
.section-menu--community {
|
||||
background-color: $color-community;
|
||||
border-right-color: darken($color-community, 10);
|
||||
|
||||
.section-menu__header {
|
||||
background-color: $color-community;
|
||||
}
|
||||
}
|
||||
|
||||
.section-menu--sdk {
|
||||
background-color: $color-sdk;
|
||||
border-right-color: darken($color-sdk, 10);
|
||||
|
||||
.section-menu__header {
|
||||
background-color: $color-sdk;
|
||||
}
|
||||
}
|
||||
|
||||
.section-menu--more {
|
||||
background-color: $color-more;
|
||||
border-right-color: darken($color-more, 10);
|
||||
|
||||
.section-menu__header {
|
||||
background-color: $color-more;
|
||||
}
|
||||
}
|
||||
|
||||
.section-menu--getting-started {
|
||||
background-color: $color-getting-started;
|
||||
border-right-color: darken($color-getting-started, 10);
|
||||
|
||||
.section-menu__header {
|
||||
background-color: $color-getting-started;
|
||||
}
|
||||
}
|
||||
269
devsite/source/_sass/elements/sidebar.scss
Normal file
269
devsite/source/_sass/elements/sidebar.scss
Normal file
|
|
@ -0,0 +1,269 @@
|
|||
/**
|
||||
* Copyright 2025 Google LLC
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
$sidebar-width: 105px;
|
||||
$sidebar--wide-width: $header-logo-width;
|
||||
$sidebar-hide-at: xs;
|
||||
|
||||
.sidebar__wrapper {
|
||||
position: fixed;
|
||||
width: $sidebar-width;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: 10;
|
||||
|
||||
@include bp-max ($sidebar-hide-at) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
background-color: #f6f6f6;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
padding-top: $header-height;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: $sidebar-width;
|
||||
|
||||
@include bp-max ($sidebar-hide-at) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar--wide {
|
||||
width: $sidebar--wide-width;
|
||||
}
|
||||
|
||||
.sidebar__header {
|
||||
background-color: #222;
|
||||
border-bottom: 2px solid $black;
|
||||
color: $white;
|
||||
font-size: $base-font-size * 1.2;
|
||||
height: $header-height;
|
||||
left: 0;
|
||||
padding: $base-line-height / 1.2 0;
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
top: 0;
|
||||
width: $sidebar-width;
|
||||
|
||||
&:hover {
|
||||
background-color: $black;
|
||||
color: $white;
|
||||
}
|
||||
|
||||
span {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
li ul {
|
||||
display: none;
|
||||
}
|
||||
|
||||
li.active {
|
||||
|
||||
ul {
|
||||
display: block;
|
||||
}
|
||||
|
||||
> a {
|
||||
background-color: lighten($base-link-color, 30);
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar--wide .sidebar__header {
|
||||
width: $sidebar--wide-width;
|
||||
}
|
||||
|
||||
.content {
|
||||
margin-left: $sidebar-width;
|
||||
height: 100%;
|
||||
|
||||
@include bp-max ($sidebar-hide-at) {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.content--narrow {
|
||||
margin-left: $sidebar--wide-width;
|
||||
|
||||
@include bp-max ($sidebar-hide-at) {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar__legal {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 3 * $base-line-height;
|
||||
font-size: 0.85em;
|
||||
padding: 1em 0;
|
||||
text-align: center;
|
||||
|
||||
a {
|
||||
color: $gray-03;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar__footer {
|
||||
background-color: $color-appstore;
|
||||
border-right: 1px solid darken($color-appstore, 10);
|
||||
bottom: 0;
|
||||
color: $white;
|
||||
font-weight: bold;
|
||||
height: 3 * $base-line-height;
|
||||
left: 0;
|
||||
padding: $base-line-height 0;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
|
||||
&:hover,
|
||||
&.active {
|
||||
background-color: darken($color-appstore, 10);
|
||||
border-color: darken($color-appstore, 20);
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar--narrow {
|
||||
|
||||
.mainmenu__item {
|
||||
|
||||
span {
|
||||
background-color: #444;
|
||||
border-radius: $base-border-radius;
|
||||
color: $white;
|
||||
display: none;
|
||||
left: 80px;
|
||||
margin-top: -1.2em;
|
||||
padding: 0.5em;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
white-space: nowrap;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
span {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mainmenu {
|
||||
border-right: 1px solid $gray-08;
|
||||
height: 100%;
|
||||
// I would like to enable scrolling on the Y axis but it breaks the tooltips.
|
||||
// overflow-x: visible;
|
||||
// overflow-y: scroll;
|
||||
padding-top: 1em;
|
||||
|
||||
li:first-child {
|
||||
margin-top: -13px;
|
||||
}
|
||||
|
||||
.mainmenu__item a {
|
||||
background-position: center center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 3em;
|
||||
color: $gray-02;
|
||||
display: block;
|
||||
font-size: 13px;
|
||||
font-weight: bold;
|
||||
height: 4em;
|
||||
margin: 0.5em 0;
|
||||
padding: 1.2em;
|
||||
position: relative;
|
||||
text-transform: uppercase;
|
||||
|
||||
@media screen and ( max-height: 640px ){
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: #e3e3e3;
|
||||
}
|
||||
|
||||
@media screen and (max-height: 600px) {
|
||||
background-size: 2.5em;
|
||||
height: 3em;
|
||||
padding: 0.75em;
|
||||
}
|
||||
}
|
||||
|
||||
.mainmenu__item.active a {
|
||||
background-color: #e3e3e3;
|
||||
}
|
||||
|
||||
.mainmenu__item--overview a {
|
||||
background-image: url('../images/menu/overview.svg');
|
||||
}
|
||||
|
||||
.mainmenu__item--getting-started a {
|
||||
background-image: url('../images/menu/getting-started.svg');
|
||||
}
|
||||
|
||||
.mainmenu__item--guides a {
|
||||
background-image: url('../images/menu/guides.svg');
|
||||
}
|
||||
|
||||
.mainmenu__item--docs a {
|
||||
background-image: url('../images/menu/docs.svg');
|
||||
}
|
||||
|
||||
.mainmenu__item--community a {
|
||||
background-image: url('../images/menu/community.svg');
|
||||
}
|
||||
|
||||
.mainmenu__item--sdk a {
|
||||
background-image: url('../images/menu/sdk.svg');
|
||||
}
|
||||
|
||||
.mainmenu__item--blog a {
|
||||
background-image: url('../images/menu/blog.svg');
|
||||
}
|
||||
|
||||
.mainmenu__item--examples a {
|
||||
background-image: url('../images/menu/examples.svg');
|
||||
}
|
||||
|
||||
.mainmenu__item--more a {
|
||||
background-image: url('../images/menu/more.svg');
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar--wide .mainmenu__item a {
|
||||
background-position: 1em center;
|
||||
background-size: 3em;
|
||||
padding-left: 5em;
|
||||
|
||||
@media screen and (max-height: 600px) {
|
||||
background-size: 2.5em;
|
||||
padding-left: 4.5em;
|
||||
}
|
||||
}
|
||||
104
devsite/source/_sass/elements/spinner.scss
Normal file
104
devsite/source/_sass/elements/spinner.scss
Normal file
|
|
@ -0,0 +1,104 @@
|
|||
/**
|
||||
* Copyright 2025 Google LLC
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
@charset "UTF-8";
|
||||
|
||||
// Spinner by CSS Wizadry: http://jsfiddle.net/csswizardry/M2D4M/
|
||||
|
||||
// A simple, semantic, usable-anywhere spinner. It takes its coloring from its
|
||||
// parent element, meaning it can be dropped anywhere without modification.
|
||||
|
||||
// 1. Positioning context.
|
||||
// 2. Define dimensions in ems so that we can…
|
||||
// 3. …adjust spinner size by just changing its `font-size`.
|
||||
// 4. Do not explicitly define a color (allow border to inherit current text
|
||||
// color). This makes the spinner usable on any color background. We’re also
|
||||
// only defining a bottom border here; this is what actually gives the
|
||||
// illusion of something spinning.
|
||||
// 5. Kellum method hidden text:
|
||||
// zeldman.com/2012/03/01/replacing-the-9999px-hack-new-image-replacement
|
||||
|
||||
.spinner {
|
||||
@include animation(0.5s spinner linear infinite);
|
||||
border-bottom: 1px solid; // 4
|
||||
display: inline-block;
|
||||
font-size: 32px; // 3
|
||||
height: 1em; // 2
|
||||
overflow: hidden; // 5
|
||||
position: relative; // 1
|
||||
text-indent: 100%; // 5
|
||||
vertical-align: middle;
|
||||
width: 1em; // 2
|
||||
|
||||
// 1. Make the spinner a circle.
|
||||
&,
|
||||
&:after {
|
||||
border-radius: 100%; // 1
|
||||
}
|
||||
|
||||
// The (optically) non-spinning part of the spinner.
|
||||
// 1. Border around entire element fills in the rest of the ring.
|
||||
// 2. Paler than the part that appears to spin.
|
||||
&:after {
|
||||
border: 1px solid; // 1
|
||||
bottom: 0;
|
||||
content: '';
|
||||
left: 0;
|
||||
opacity: 0.5; // 2
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Size variants (built by adjusting `font-size`).
|
||||
.spinner--small { font-size: 16px; }
|
||||
.spinner--large { font-size: 64px; }
|
||||
|
||||
// Color overrides.
|
||||
.spinner--light { color: $white; }
|
||||
.spinner--dark { color: #333; }
|
||||
|
||||
.spinner--center {
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.spinner--padded {
|
||||
margin-bottom: 1rem;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
@-webkit-keyframes spinner {
|
||||
|
||||
to {
|
||||
-webkit-transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@-moz-keyframes spinner {
|
||||
|
||||
to {
|
||||
-moz-transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes spinner {
|
||||
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
25
devsite/source/_sass/elements/table.scss
Normal file
25
devsite/source/_sass/elements/table.scss
Normal file
|
|
@ -0,0 +1,25 @@
|
|||
/**
|
||||
* Copyright 2025 Google LLC
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
.table--skinny {
|
||||
td {
|
||||
padding: 0.25em 0;
|
||||
}
|
||||
|
||||
th {
|
||||
padding: 0.25em 0;
|
||||
}
|
||||
}
|
||||
46
devsite/source/_sass/elements/toc.scss
Normal file
46
devsite/source/_sass/elements/toc.scss
Normal file
|
|
@ -0,0 +1,46 @@
|
|||
/**
|
||||
* Copyright 2025 Google LLC
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
.toc__item {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.toc__item--level1 {
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
.toc__item--level2 {
|
||||
font-size: 0.95em;
|
||||
padding-left: 0.5rem;
|
||||
}
|
||||
|
||||
.toc__item--level3 {
|
||||
font-size: 0.90em;
|
||||
padding-left: 1rem;
|
||||
}
|
||||
|
||||
.toc__item--level4 {
|
||||
font-size: 0.85em;
|
||||
padding-left: 1.5rem;
|
||||
}
|
||||
|
||||
.toc__item--active {
|
||||
font-weight: 600;
|
||||
a {
|
||||
color: darken($base-link-color, 20);
|
||||
}
|
||||
}
|
||||
71
devsite/source/_sass/elements/typeahead.scss
Normal file
71
devsite/source/_sass/elements/typeahead.scss
Normal file
|
|
@ -0,0 +1,71 @@
|
|||
/**
|
||||
* Copyright 2025 Google LLC
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
// Styles for the primary site search, powered by Twitter's Typeahead.js
|
||||
|
||||
.twitter-typeahead {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.tt-dropdown-menu {
|
||||
background-color: $white;
|
||||
border-bottom: 1px solid lighten($base-border-color, 60);
|
||||
border-left: 1px solid lighten($base-border-color, 60);
|
||||
border-right: 1px solid lighten($base-border-color, 60);
|
||||
margin-top: -0.75rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.tt-group-header {
|
||||
background-color: lighten($base-border-color, 30);
|
||||
color: $white;
|
||||
font-size: 1rem;
|
||||
font-weight: normal;
|
||||
padding: 0.2rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.tt-suggestion {
|
||||
border-bottom: 1px solid lighten($base-border-color, 60);
|
||||
cursor: pointer;
|
||||
padding: 0.2rem 0.5rem;
|
||||
|
||||
.tt-suggestion-highlight {
|
||||
color: lighten($base-font-color, 30);
|
||||
font-size: 0.8rem;
|
||||
height: 1em;
|
||||
line-height: 0.8rem;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
&.tt-cursor {
|
||||
background-color: $base-link-color;
|
||||
color: $white;
|
||||
|
||||
.tt-suggestion-highlight {
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border-bottom: 0;
|
||||
}
|
||||
}
|
||||
71
devsite/source/_sass/elements/video.scss
Normal file
71
devsite/source/_sass/elements/video.scss
Normal file
|
|
@ -0,0 +1,71 @@
|
|||
/**
|
||||
* Copyright 2025 Google LLC
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
.video {
|
||||
margin: auto;
|
||||
width: 100%;
|
||||
|
||||
.video__wrapper {
|
||||
height: 0;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
iframe {
|
||||
height: 100%;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.video--widescreen .video__wrapper {
|
||||
padding-bottom: 56.25%;
|
||||
}
|
||||
|
||||
.video--standard .video__wrapper {
|
||||
padding-bottom: 75%;
|
||||
}
|
||||
|
||||
.video--preview {
|
||||
cursor: pointer;
|
||||
|
||||
.video__wrapper::after {
|
||||
background-color: rgba(200, 200, 200, 0.8);
|
||||
border-radius: 50%;
|
||||
color: #444;
|
||||
content: '\f144';
|
||||
font-family: FontAwesome;
|
||||
font-size: 80px;
|
||||
left: 50%;
|
||||
line-height: 68px;
|
||||
margin-left: -40px;
|
||||
margin-top: -40px;
|
||||
padding: 10px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
@include transition(color 0.3s linear);
|
||||
@include transition(background-color 0.3s linear);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
|
||||
.video__wrapper::after {
|
||||
background-color: rgba(50, 50, 50, 0.8);
|
||||
color: #d00;
|
||||
}
|
||||
}
|
||||
}
|
||||
80
devsite/source/_sass/footer.scss
Normal file
80
devsite/source/_sass/footer.scss
Normal file
|
|
@ -0,0 +1,80 @@
|
|||
/**
|
||||
* Copyright 2025 Google LLC
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
$footer-height: 2rem;
|
||||
$footer-height-mobile: 9.95rem;
|
||||
$footer-background-color: #333;
|
||||
$footer-text-color: #bbb;
|
||||
$footer-bp: s;
|
||||
|
||||
.wrapper {
|
||||
height: auto !important;
|
||||
margin: 0 auto -1 * $footer-height-mobile;
|
||||
min-height: 100%;
|
||||
@include clearfix;
|
||||
|
||||
@include bp-min ($footer-bp) {
|
||||
margin: 0 auto -1 * $footer-height;
|
||||
}
|
||||
}
|
||||
|
||||
.push {
|
||||
height: $footer-height-mobile;
|
||||
|
||||
@include bp-min ($footer-bp) {
|
||||
height: $footer-height;
|
||||
}
|
||||
}
|
||||
|
||||
.footer {
|
||||
background-color: $footer-background-color;
|
||||
display: table;
|
||||
height: $footer-height-mobile;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
z-index: 100;
|
||||
|
||||
@include bp-min ($footer-bp) {
|
||||
height: $footer-height;
|
||||
}
|
||||
|
||||
ul {
|
||||
display: table-row;
|
||||
}
|
||||
|
||||
li {
|
||||
@include bp-min ($footer-bp) {
|
||||
display: table-cell;
|
||||
width: 2%;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
@include transition (all 0.2s ease-in-out);
|
||||
background-color: $footer-background-color;
|
||||
color: $footer-text-color;
|
||||
display: block;
|
||||
font-size: 0.7rem;
|
||||
font-weight: bold;
|
||||
padding: 0.65rem 0 0.4rem;
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
|
||||
&:hover {
|
||||
background-color: darken($footer-background-color, 20);
|
||||
}
|
||||
}
|
||||
}
|
||||
18
devsite/source/_sass/header.scss
Normal file
18
devsite/source/_sass/header.scss
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
/**
|
||||
* Copyright 2025 Google LLC
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
$header-height: 3 * $base-line-height;
|
||||
$header-logo-width: 226px;
|
||||
86
devsite/source/_sass/sections/blog.scss
Normal file
86
devsite/source/_sass/sections/blog.scss
Normal file
|
|
@ -0,0 +1,86 @@
|
|||
/**
|
||||
* Copyright 2025 Google LLC
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
.blog__meta {
|
||||
border-bottom: 1px solid $gray-09;
|
||||
border-top: 1px solid $gray-09;
|
||||
padding: 0.5em;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
.blog__more {
|
||||
margin-top: 2em;
|
||||
}
|
||||
|
||||
.image-list {
|
||||
img {
|
||||
display: inline;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.blog-index__post {
|
||||
margin-bottom: 2em;
|
||||
|
||||
.blog--no-index {
|
||||
display: none;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-weight: 600;
|
||||
font-size: 1.4em;
|
||||
margin: -0.2em 0 0;
|
||||
line-height: 1.1;
|
||||
}
|
||||
|
||||
p.blog-index__tags {
|
||||
margin: 0 0 0.25em 0;
|
||||
font-size: 0.9em;
|
||||
|
||||
a {
|
||||
color: darken($gray-09, 20);
|
||||
}
|
||||
}
|
||||
|
||||
.blog-index__meta {
|
||||
margin-right: 1em;
|
||||
|
||||
img {
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
p {
|
||||
color: $gray-09;
|
||||
font-size: 0.85em;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.blog-index__body {
|
||||
float: left;
|
||||
max-width: 43em;
|
||||
|
||||
@include bp-min (m) {
|
||||
width: 83%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.blog__image-text {
|
||||
font-size: 0.9em;
|
||||
font-style: italic;
|
||||
text-align: center;
|
||||
}
|
||||
217
devsite/source/_sass/sections/documentation.scss
Normal file
217
devsite/source/_sass/sections/documentation.scss
Normal file
|
|
@ -0,0 +1,217 @@
|
|||
/**
|
||||
* Copyright 2025 Google LLC
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
$docs-header-color: $gray-06;
|
||||
|
||||
.documentation {
|
||||
max-width: 43em;
|
||||
|
||||
a,
|
||||
a code {
|
||||
color: darken($base-link-color, 20);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
a:hover,
|
||||
a:active {
|
||||
color: darken($base-link-color, 40);
|
||||
}
|
||||
}
|
||||
|
||||
.docs_tree {
|
||||
ul {
|
||||
@extend %default-ul;
|
||||
}
|
||||
}
|
||||
|
||||
.docs__item {
|
||||
ul {
|
||||
@extend %default-ul;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.docs__item__param {
|
||||
white-space: nowrap;
|
||||
|
||||
a {
|
||||
text-decoration: underline;
|
||||
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
color: $gray-02;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.docs__module {
|
||||
h4 {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
a {
|
||||
font-weight: normal;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
.docs__item {
|
||||
margin-bottom: 2em;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
&::before {
|
||||
content: ' ';
|
||||
display: block;
|
||||
height: $header-height;
|
||||
margin-top: -1 * $header-height;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
section {
|
||||
display: none;
|
||||
|
||||
&[data-platform="aplite"] {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.docs__item__tabs {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
li {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
a {
|
||||
background-color: lighten($docs-header-color, 8);
|
||||
border-radius: 4px 4px 0 0;
|
||||
color: lighten($gray-02, 10);
|
||||
display: block;
|
||||
padding: 0.4em 0.8em;
|
||||
text-transform: uppercase;
|
||||
|
||||
&.active {
|
||||
background-color: $docs-header-color;
|
||||
color: $gray-02;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.docs__item__header {
|
||||
background-color: $docs-header-color;
|
||||
color: $gray-02;
|
||||
font-size: 0.9em;
|
||||
font-weight: 600;
|
||||
padding: 0.5em;
|
||||
|
||||
a,
|
||||
a:hover,
|
||||
a:active {
|
||||
color: $gray-02;
|
||||
}
|
||||
}
|
||||
|
||||
.docs__item__name {
|
||||
color: $gray-02;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.docs__item__summary,
|
||||
.docs__item__description {
|
||||
margin-bottom: 0.5em;
|
||||
|
||||
&:last-child {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.docs__item__body {
|
||||
border: 1px solid $docs-header-color;
|
||||
border-top: 0;
|
||||
padding: 0.5em;
|
||||
|
||||
h4 {
|
||||
border-bottom: 1px solid $color-docs;
|
||||
text-transform: uppercase;
|
||||
font-weight: 600;
|
||||
font-size: 1.2em;
|
||||
}
|
||||
|
||||
dl {
|
||||
margin-top: 0;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
dd {
|
||||
margin-left: 1em;
|
||||
}
|
||||
|
||||
dt {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
p:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.docs__item--missing {
|
||||
border: 1px solid $gray-09;
|
||||
padding: 0.5em;
|
||||
|
||||
p {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.alert--docs-notes {
|
||||
background-color: $gray-05;
|
||||
border-bottom: 2px solid $color-docs;
|
||||
border-top: 2px solid $color-docs;
|
||||
color: $gray-03;
|
||||
margin: 0 -0.5em 1em;
|
||||
|
||||
h5 {
|
||||
font-size: 1.1em;
|
||||
margin: 0;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
}
|
||||
|
||||
.docs__item__anchor {
|
||||
&::before {
|
||||
content: ' ';
|
||||
display: block;
|
||||
height: $header-height;
|
||||
margin-top: -1 * $header-height;
|
||||
visibility: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
@import 'sections/documentation/c';
|
||||
@import 'sections/documentation/android';
|
||||
@import 'sections/documentation/ios';
|
||||
@import 'sections/documentation/js';
|
||||
442
devsite/source/_sass/sections/documentation/android.scss
Normal file
442
devsite/source/_sass/sections/documentation/android.scss
Normal file
|
|
@ -0,0 +1,442 @@
|
|||
/**
|
||||
* Copyright 2025 Google LLC
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
.documentation__android {
|
||||
|
||||
ul {
|
||||
list-style-type:disc;
|
||||
}
|
||||
code, tt {
|
||||
font-size:1.2em;
|
||||
}
|
||||
dt code {
|
||||
font-size:1.2em;
|
||||
}
|
||||
table tr td dt code {
|
||||
font-size:1.2em;
|
||||
vertical-align:top;
|
||||
}
|
||||
sup {
|
||||
font-size:.6em;
|
||||
}
|
||||
/*
|
||||
Document title and Copyright styles
|
||||
*/
|
||||
.clear {
|
||||
clear:both;
|
||||
height:0px;
|
||||
overflow:hidden;
|
||||
}
|
||||
.aboutLanguage {
|
||||
float:right;
|
||||
padding:0px 21px;
|
||||
font-size:.8em;
|
||||
z-index:200;
|
||||
margin-top:-7px;
|
||||
}
|
||||
.legalCopy {
|
||||
margin-left:.5em;
|
||||
}
|
||||
.bar a, .bar a:link, .bar a:visited, .bar a:active {
|
||||
color:#FFFFFF;
|
||||
text-decoration:none;
|
||||
}
|
||||
.bar a:hover, .bar a:focus {
|
||||
color:#bb7a2a;
|
||||
}
|
||||
.tab {
|
||||
background-color:#0066FF;
|
||||
background-image:url(resources/titlebar.gif);
|
||||
background-position:left top;
|
||||
background-repeat:no-repeat;
|
||||
color:#ffffff;
|
||||
padding:8px;
|
||||
width:5em;
|
||||
font-weight:bold;
|
||||
}
|
||||
/*
|
||||
Navigation bar styles
|
||||
*/
|
||||
.bar {
|
||||
background-image:url(resources/background.gif);
|
||||
background-repeat:repeat-x;
|
||||
color:#FFFFFF;
|
||||
padding:.8em .5em .4em .8em;
|
||||
height:auto;/*height:1.8em;*/
|
||||
font-size:1em;
|
||||
margin:0;
|
||||
}
|
||||
.topNav {
|
||||
background-image:url(resources/background.gif);
|
||||
background-repeat:repeat-x;
|
||||
color:#FFFFFF;
|
||||
float:left;
|
||||
padding:0;
|
||||
width:100%;
|
||||
clear:right;
|
||||
height:2.8em;
|
||||
padding-top:10px;
|
||||
overflow:hidden;
|
||||
}
|
||||
.bottomNav {
|
||||
margin-top:10px;
|
||||
background-image:url(resources/background.gif);
|
||||
background-repeat:repeat-x;
|
||||
color:#FFFFFF;
|
||||
float:left;
|
||||
padding:0;
|
||||
width:100%;
|
||||
clear:right;
|
||||
height:2.8em;
|
||||
padding-top:10px;
|
||||
overflow:hidden;
|
||||
}
|
||||
.subNav {
|
||||
background-color:#dee3e9;
|
||||
border-bottom:1px solid #9eadc0;
|
||||
float:left;
|
||||
width:100%;
|
||||
overflow:hidden;
|
||||
}
|
||||
.subNav div {
|
||||
clear:left;
|
||||
float:left;
|
||||
padding:0 0 5px 6px;
|
||||
}
|
||||
ul.navList, ul.subNavList {
|
||||
float:left;
|
||||
margin:0 25px 0 0;
|
||||
padding:0;
|
||||
}
|
||||
ul.navList li{
|
||||
list-style:none;
|
||||
float:left;
|
||||
padding:3px 6px;
|
||||
}
|
||||
ul.subNavList li{
|
||||
list-style:none;
|
||||
float:left;
|
||||
font-size:90%;
|
||||
}
|
||||
.topNav a:link, .topNav a:active, .topNav a:visited, .bottomNav a:link, .bottomNav a:active, .bottomNav a:visited {
|
||||
color:#FFFFFF;
|
||||
text-decoration:none;
|
||||
}
|
||||
.topNav a:hover, .bottomNav a:hover {
|
||||
text-decoration:none;
|
||||
color:#bb7a2a;
|
||||
}
|
||||
.navBarCell1Rev {
|
||||
background-image:url(resources/tab.gif);
|
||||
background-color:#a88834;
|
||||
color:#FFFFFF;
|
||||
margin: auto 5px;
|
||||
border:1px solid #c9aa44;
|
||||
}
|
||||
/*
|
||||
Page header and footer styles
|
||||
*/
|
||||
.header, .footer {
|
||||
clear:both;
|
||||
margin:0 20px;
|
||||
padding:5px 0 0 0;
|
||||
}
|
||||
.indexHeader {
|
||||
margin:10px;
|
||||
position:relative;
|
||||
}
|
||||
.indexHeader h1 {
|
||||
font-size:1.3em;
|
||||
}
|
||||
.title {
|
||||
color:#2c4557;
|
||||
margin:10px 0;
|
||||
}
|
||||
.subTitle {
|
||||
margin:5px 0 0 0;
|
||||
}
|
||||
.header ul {
|
||||
margin:0 0 25px 0;
|
||||
padding:0;
|
||||
}
|
||||
.footer ul {
|
||||
margin:20px 0 5px 0;
|
||||
}
|
||||
.header ul li, .footer ul li {
|
||||
list-style:none;
|
||||
font-size:1.2em;
|
||||
}
|
||||
/*
|
||||
Heading styles
|
||||
*/
|
||||
div.details ul.blockList ul.blockList ul.blockList li.blockList h4, div.details ul.blockList ul.blockList ul.blockListLast li.blockList h4 {
|
||||
background-color:#dee3e9;
|
||||
border-top:1px solid #9eadc0;
|
||||
border-bottom:1px solid #9eadc0;
|
||||
margin:0 0 6px -8px;
|
||||
padding:2px 5px;
|
||||
}
|
||||
ul.blockList ul.blockList ul.blockList li.blockList h3 {
|
||||
background-color:#dee3e9;
|
||||
border-top:1px solid #9eadc0;
|
||||
border-bottom:1px solid #9eadc0;
|
||||
margin:0 0 6px -8px;
|
||||
padding:2px 5px;
|
||||
}
|
||||
ul.blockList ul.blockList li.blockList h3 {
|
||||
padding:0;
|
||||
margin:15px 0;
|
||||
}
|
||||
ul.blockList li.blockList h2 {
|
||||
padding:0px 0 20px 0;
|
||||
}
|
||||
/*
|
||||
Page layout container styles
|
||||
*/
|
||||
.contentContainer, .sourceContainer, .classUseContainer, .serializedFormContainer, .constantValuesContainer {
|
||||
clear:both;
|
||||
padding:10px 20px;
|
||||
position:relative;
|
||||
}
|
||||
.indexContainer {
|
||||
margin:10px;
|
||||
position:relative;
|
||||
font-size:1.0em;
|
||||
}
|
||||
.indexContainer h2 {
|
||||
font-size:1.1em;
|
||||
padding:0 0 3px 0;
|
||||
}
|
||||
.indexContainer ul {
|
||||
margin:0;
|
||||
padding:0;
|
||||
}
|
||||
.indexContainer ul li {
|
||||
list-style:none;
|
||||
}
|
||||
.contentContainer .description dl dt, .contentContainer .details dl dt, .serializedFormContainer dl dt {
|
||||
font-size:1.1em;
|
||||
font-weight:bold;
|
||||
margin:10px 0 0 0;
|
||||
color:#4E4E4E;
|
||||
}
|
||||
.contentContainer .description dl dd, .contentContainer .details dl dd, .serializedFormContainer dl dd {
|
||||
margin:10px 0 10px 20px;
|
||||
}
|
||||
.serializedFormContainer dl.nameValue dt {
|
||||
margin-left:1px;
|
||||
font-size:1.1em;
|
||||
display:inline;
|
||||
font-weight:bold;
|
||||
}
|
||||
.serializedFormContainer dl.nameValue dd {
|
||||
margin:0 0 0 1px;
|
||||
font-size:1.1em;
|
||||
display:inline;
|
||||
}
|
||||
/*
|
||||
List styles
|
||||
*/
|
||||
ul.horizontal li {
|
||||
display:inline;
|
||||
font-size:0.9em;
|
||||
}
|
||||
ul.inheritance {
|
||||
margin:0;
|
||||
padding:0;
|
||||
}
|
||||
ul.inheritance li {
|
||||
display:inline;
|
||||
list-style:none;
|
||||
}
|
||||
ul.inheritance li ul.inheritance {
|
||||
margin-left:15px;
|
||||
padding-left:15px;
|
||||
padding-top:1px;
|
||||
}
|
||||
ul.blockList, ul.blockListLast {
|
||||
margin:10px 0 10px 0;
|
||||
padding:0;
|
||||
}
|
||||
ul.blockList li.blockList, ul.blockListLast li.blockList {
|
||||
list-style:none;
|
||||
margin-bottom:25px;
|
||||
}
|
||||
ul.blockList ul.blockList li.blockList, ul.blockList ul.blockListLast li.blockList {
|
||||
padding:0px 20px 5px 10px;
|
||||
border:1px solid #9eadc0;
|
||||
background-color:#f9f9f9;
|
||||
}
|
||||
ul.blockList ul.blockList ul.blockList li.blockList, ul.blockList ul.blockList ul.blockListLast li.blockList {
|
||||
padding:0 0 5px 8px;
|
||||
background-color:#ffffff;
|
||||
border:1px solid #9eadc0;
|
||||
border-top:none;
|
||||
}
|
||||
ul.blockList ul.blockList ul.blockList ul.blockList li.blockList {
|
||||
margin-left:0;
|
||||
padding-left:0;
|
||||
padding-bottom:15px;
|
||||
border:none;
|
||||
border-bottom:1px solid #9eadc0;
|
||||
}
|
||||
ul.blockList ul.blockList ul.blockList ul.blockList li.blockListLast {
|
||||
list-style:none;
|
||||
border-bottom:none;
|
||||
padding-bottom:0;
|
||||
}
|
||||
table tr td dl, table tr td dl dt, table tr td dl dd {
|
||||
margin-top:0;
|
||||
margin-bottom:1px;
|
||||
}
|
||||
/*
|
||||
Table styles
|
||||
*/
|
||||
.contentContainer table, .classUseContainer table, .constantValuesContainer table {
|
||||
border-bottom:1px solid #9eadc0;
|
||||
width:100%;
|
||||
}
|
||||
.contentContainer ul li table, .classUseContainer ul li table, .constantValuesContainer ul li table {
|
||||
width:100%;
|
||||
}
|
||||
.contentContainer .description table, .contentContainer .details table {
|
||||
border-bottom:none;
|
||||
}
|
||||
.contentContainer ul li table th.colOne, .contentContainer ul li table th.colFirst, .contentContainer ul li table th.colLast, .classUseContainer ul li table th, .constantValuesContainer ul li table th, .contentContainer ul li table td.colOne, .contentContainer ul li table td.colFirst, .contentContainer ul li table td.colLast, .classUseContainer ul li table td, .constantValuesContainer ul li table td{
|
||||
vertical-align:top;
|
||||
padding-right:20px;
|
||||
}
|
||||
.contentContainer ul li table th.colLast, .classUseContainer ul li table th.colLast,.constantValuesContainer ul li table th.colLast,
|
||||
.contentContainer ul li table td.colLast, .classUseContainer ul li table td.colLast,.constantValuesContainer ul li table td.colLast,
|
||||
.contentContainer ul li table th.colOne, .classUseContainer ul li table th.colOne,
|
||||
.contentContainer ul li table td.colOne, .classUseContainer ul li table td.colOne {
|
||||
padding-right:3px;
|
||||
}
|
||||
.overviewSummary caption, .packageSummary caption, .contentContainer ul.blockList li.blockList caption, .summary caption, .classUseContainer caption, .constantValuesContainer caption {
|
||||
position:relative;
|
||||
text-align:left;
|
||||
background-repeat:no-repeat;
|
||||
color:#FFFFFF;
|
||||
font-weight:bold;
|
||||
clear:none;
|
||||
overflow:hidden;
|
||||
padding:0px;
|
||||
margin:0px;
|
||||
}
|
||||
caption a:link, caption a:hover, caption a:active, caption a:visited {
|
||||
color:#FFFFFF;
|
||||
}
|
||||
.overviewSummary caption span, .packageSummary caption span, .contentContainer ul.blockList li.blockList caption span, .summary caption span, .classUseContainer caption span, .constantValuesContainer caption span {
|
||||
white-space:nowrap;
|
||||
padding-top:8px;
|
||||
padding-left:8px;
|
||||
display:block;
|
||||
float:left;
|
||||
background-image:url(resources/titlebar.gif);
|
||||
height:18px;
|
||||
}
|
||||
.overviewSummary .tabEnd, .packageSummary .tabEnd, .contentContainer ul.blockList li.blockList .tabEnd, .summary .tabEnd, .classUseContainer .tabEnd, .constantValuesContainer .tabEnd {
|
||||
width:10px;
|
||||
background-image:url(resources/titlebar_end.gif);
|
||||
background-repeat:no-repeat;
|
||||
background-position:top right;
|
||||
position:relative;
|
||||
float:left;
|
||||
}
|
||||
ul.blockList ul.blockList li.blockList table {
|
||||
margin:0 0 12px 0px;
|
||||
width:100%;
|
||||
}
|
||||
.tableSubHeadingColor {
|
||||
background-color: #EEEEFF;
|
||||
}
|
||||
.altColor {
|
||||
background-color:#eeeeef;
|
||||
}
|
||||
.rowColor {
|
||||
background-color:#ffffff;
|
||||
}
|
||||
.overviewSummary td, .packageSummary td, .contentContainer ul.blockList li.blockList td, .summary td, .classUseContainer td, .constantValuesContainer td {
|
||||
text-align:left;
|
||||
padding:3px 3px 3px 7px;
|
||||
}
|
||||
th.colFirst, th.colLast, th.colOne, .constantValuesContainer th {
|
||||
background:#dee3e9;
|
||||
border-top:1px solid #9eadc0;
|
||||
border-bottom:1px solid #9eadc0;
|
||||
text-align:left;
|
||||
padding:3px 3px 3px 7px;
|
||||
}
|
||||
td.colOne a:link, td.colOne a:active, td.colOne a:visited, td.colOne a:hover, td.colFirst a:link, td.colFirst a:active, td.colFirst a:visited, td.colFirst a:hover, td.colLast a:link, td.colLast a:active, td.colLast a:visited, td.colLast a:hover, .constantValuesContainer td a:link, .constantValuesContainer td a:active, .constantValuesContainer td a:visited, .constantValuesContainer td a:hover {
|
||||
font-weight:bold;
|
||||
}
|
||||
td.colFirst, th.colFirst {
|
||||
border-left:1px solid #9eadc0;
|
||||
white-space:nowrap;
|
||||
}
|
||||
td.colLast, th.colLast {
|
||||
border-right:1px solid #9eadc0;
|
||||
}
|
||||
td.colOne, th.colOne {
|
||||
border-right:1px solid #9eadc0;
|
||||
border-left:1px solid #9eadc0;
|
||||
}
|
||||
table.overviewSummary {
|
||||
padding:0px;
|
||||
margin-left:0px;
|
||||
}
|
||||
table.overviewSummary td.colFirst, table.overviewSummary th.colFirst,
|
||||
table.overviewSummary td.colOne, table.overviewSummary th.colOne {
|
||||
width:25%;
|
||||
vertical-align:middle;
|
||||
}
|
||||
table.packageSummary td.colFirst, table.overviewSummary th.colFirst {
|
||||
width:25%;
|
||||
vertical-align:middle;
|
||||
}
|
||||
/*
|
||||
Content styles
|
||||
*/
|
||||
.description pre {
|
||||
margin-top:0;
|
||||
}
|
||||
.deprecatedContent {
|
||||
margin:0;
|
||||
padding:10px 0;
|
||||
}
|
||||
.docSummary {
|
||||
padding:0;
|
||||
}
|
||||
/*
|
||||
Formatting effect styles
|
||||
*/
|
||||
.sourceLineNo {
|
||||
color:green;
|
||||
padding:0 30px 0 0;
|
||||
}
|
||||
h1.hidden {
|
||||
visibility:hidden;
|
||||
overflow:hidden;
|
||||
font-size:.9em;
|
||||
}
|
||||
.block {
|
||||
display:block;
|
||||
margin:3px 0 0 0;
|
||||
}
|
||||
.strong {
|
||||
font-weight:bold;
|
||||
}
|
||||
}
|
||||
28
devsite/source/_sass/sections/documentation/c.scss
Normal file
28
devsite/source/_sass/sections/documentation/c.scss
Normal file
|
|
@ -0,0 +1,28 @@
|
|||
/**
|
||||
* Copyright 2025 Google LLC
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
.documentation__c {
|
||||
max-width: 43em;
|
||||
|
||||
.gcolor_sample {
|
||||
width: 3em;
|
||||
height: 1.3em;
|
||||
display: block;
|
||||
float: left;
|
||||
border: 1px solid #000;
|
||||
margin-right: 0.5em;
|
||||
}
|
||||
}
|
||||
580
devsite/source/_sass/sections/documentation/ios.scss
Normal file
580
devsite/source/_sass/sections/documentation/ios.scss
Normal file
|
|
@ -0,0 +1,580 @@
|
|||
/**
|
||||
* Copyright 2025 Google LLC
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
.documentation__ios {
|
||||
|
||||
code {
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
// font-family: 'Lucida Grande',Geneva,Helvetica,Arial,sans-serif;
|
||||
// font-size: 13px;
|
||||
|
||||
code {
|
||||
// font-family: Courier, Consolas, monospace;
|
||||
// font-size: 13px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
pre {
|
||||
// font-family: Courier, Consolas, monospace;
|
||||
font-size: 13px;
|
||||
line-height: 18px;
|
||||
tab-interval: 0.5em;
|
||||
border: 1px solid #C7CFD5;
|
||||
background-color: #F1F5F9;
|
||||
color: #666;
|
||||
padding: 0.3em 1em;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style-type: square;
|
||||
}
|
||||
|
||||
li {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
a, a code {
|
||||
text-decoration: none;
|
||||
color: #36C;
|
||||
}
|
||||
|
||||
a:hover, a:hover code {
|
||||
text-decoration: underline;
|
||||
color: #36C;
|
||||
}
|
||||
|
||||
h2 {
|
||||
border-bottom: 1px solid #8391A8;
|
||||
color: #3C4C6C;
|
||||
font-size: 187%;
|
||||
font-weight: normal;
|
||||
margin-top: 1.75em;
|
||||
padding-bottom: 2px;
|
||||
}
|
||||
|
||||
table {
|
||||
margin-bottom: 4em;
|
||||
border-collapse:collapse;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
td {
|
||||
border: 1px solid #9BB3CD;
|
||||
padding: .667em;
|
||||
font-size: 100%;
|
||||
}
|
||||
|
||||
th {
|
||||
border: 1px solid #9BB3CD;
|
||||
padding: .3em .667em .3em .667em;
|
||||
background: #93A5BB;
|
||||
font-size: 103%;
|
||||
font-weight: bold;
|
||||
color: white;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
#top_header {
|
||||
height: 91px;
|
||||
left: 0;
|
||||
min-width: 598px;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
z-index: 900;
|
||||
}
|
||||
|
||||
#footer {
|
||||
clear: both;
|
||||
padding-top: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.copyright {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.generator {
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.main-navigation ul li {
|
||||
display: inline;
|
||||
margin-left: 15px;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.navigation-top {
|
||||
clear: both;
|
||||
float: right;
|
||||
}
|
||||
|
||||
.navigation-bottom {
|
||||
clear: both;
|
||||
float: right;
|
||||
margin-top: 20px;
|
||||
margin-bottom: -10px;
|
||||
}
|
||||
|
||||
.open > .disclosure {
|
||||
background-image: url("../img/disclosure_open.png");
|
||||
}
|
||||
|
||||
.disclosure {
|
||||
background: url("../img/disclosure.png") no-repeat scroll 0 0;
|
||||
}
|
||||
|
||||
.disclosure, .nodisclosure {
|
||||
display: inline-block;
|
||||
height: 8px;
|
||||
margin-right: 5px;
|
||||
position: relative;
|
||||
width: 9px;
|
||||
}
|
||||
|
||||
#top_header #library {
|
||||
background: url("../img/library_background.png") repeat-x 0 0 #485E78;
|
||||
background-color: #ccc;
|
||||
height: 35px;
|
||||
font-size: 115%;
|
||||
}
|
||||
|
||||
#top_header #library #libraryTitle {
|
||||
color: #FFFFFF;
|
||||
margin-left: 15px;
|
||||
text-shadow: 0 -1px 0 #485E78;
|
||||
top: 8px;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
#libraryTitle {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
#top_header #library #developerHome {
|
||||
color: #92979E;
|
||||
right: 15px;
|
||||
top: 8px;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
#top_header #library a:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
#top_header #title {
|
||||
background: url("../img/title_background.png") repeat-x 0 0 #8A98A9;
|
||||
border-bottom: 1px solid #757575;
|
||||
height: 25px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#top_header h1 {
|
||||
font-size: 105%;
|
||||
font-weight: normal;
|
||||
margin: 0;
|
||||
padding: 3px 0 2px;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
#headerButtons {
|
||||
background-color: #D8D8D8;
|
||||
background-image: url("../img/button_bar_background.png");
|
||||
border-bottom: 0px solid #EDEDED;
|
||||
border-top: 0px solid #a8a8a8;
|
||||
font-size: 8pt;
|
||||
height: 28px;
|
||||
left: 0;
|
||||
list-style: none outside none;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 61px;
|
||||
}
|
||||
|
||||
#headerButtons li {
|
||||
background-repeat: no-repeat;
|
||||
display: inline;
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
#toc_button button {
|
||||
background-color: #EBEEF1;
|
||||
border-color: #ACACAC;
|
||||
border-style: none solid none none;
|
||||
border-width: 0 1px 0 0;
|
||||
height: 28px;
|
||||
margin: 0;
|
||||
padding-left: 30px;
|
||||
text-align: left;
|
||||
width: 230px;
|
||||
}
|
||||
|
||||
li#jumpto_button {
|
||||
left: 230px;
|
||||
margin-left: 0;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
li#jumpto_button select {
|
||||
height: 22px;
|
||||
margin: 5px 2px 0 10px;
|
||||
max-width: 300px;
|
||||
}
|
||||
|
||||
|
||||
#tocContainer.isShowingTOC {
|
||||
border-right: 1px solid #ACACAC;
|
||||
display: block;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
#tocContainer {
|
||||
background-color: #EBEEF1;
|
||||
border-top: 1px solid #ACACAC;
|
||||
bottom: 0;
|
||||
display: none;
|
||||
left: 0;
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
top: 90px;
|
||||
width: 229px;
|
||||
}
|
||||
|
||||
#tocContainer > ul#toc {
|
||||
font-size: 11px;
|
||||
margin: 0;
|
||||
padding: 12px 0 18px;
|
||||
width: 209px;
|
||||
-moz-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
#tocContainer > ul#toc > li {
|
||||
margin: 0;
|
||||
padding: 0 0 7px 30px;
|
||||
text-indent: -15px;
|
||||
}
|
||||
|
||||
#tocContainer > ul#toc > li > .sectionName a {
|
||||
color: #000000;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
#tocContainer > ul#toc > li > .sectionName a:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
#tocContainer > ul#toc li.children > ul {
|
||||
display: none;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
#tocContainer > ul#toc > li > ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
#tocContainer > ul#toc > li > ul, ul#toc > li > ul > li {
|
||||
margin-left: 0;
|
||||
margin-bottom: 0;
|
||||
padding-left: 15px;
|
||||
}
|
||||
|
||||
#tocContainer > ul#toc > li ul {
|
||||
list-style: none;
|
||||
margin-right: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
#tocContainer > ul#toc li.children.open > ul {
|
||||
display: block;
|
||||
height: auto;
|
||||
margin-left: -15px;
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
#tocContainer > ul#toc > li > ul, ul#toc > li > ul > li {
|
||||
margin-left: 0;
|
||||
padding-left: 15px;
|
||||
}
|
||||
|
||||
#tocContainer li ul li {
|
||||
margin-top: 0.583em;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
#tocContainer li ul li span.sectionName {
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
#tocContainer > ul#toc > li > ul > li > .sectionName a {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
#tocContainer > ul#toc > li > ul a {
|
||||
color: #4F4F4F;
|
||||
}
|
||||
|
||||
.index-title {
|
||||
font-size: 13px;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.index-column {
|
||||
float: left;
|
||||
width: 30%;
|
||||
min-width: 200px;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.index-column ul {
|
||||
margin: 8px 0 0 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.index-column ul li {
|
||||
margin: 0 0 3px 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.hierarchy-column {
|
||||
min-width: 400px;
|
||||
}
|
||||
|
||||
.hierarchy-column ul {
|
||||
margin: 3px 0 0 15px;
|
||||
}
|
||||
|
||||
.hierarchy-column ul li {
|
||||
list-style-type: square;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-weight: normal;
|
||||
font-size: 215%;
|
||||
margin-top:0;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
font-weight: normal;
|
||||
font-size: 180%;
|
||||
color: #3C4C6C;
|
||||
border-bottom: 1px solid #5088C5;
|
||||
}
|
||||
|
||||
.subsubtitle {
|
||||
font-weight: normal;
|
||||
font-size: 145%;
|
||||
height: 0.7em;
|
||||
}
|
||||
|
||||
.note {
|
||||
border: 1px solid #5088C5;
|
||||
background-color: white;
|
||||
margin: 1.667em 0 1.75em 0;
|
||||
padding: 0 .667em .083em .750em;
|
||||
}
|
||||
|
||||
.warning {
|
||||
border: 1px solid #5088C5;
|
||||
background-color: #F0F3F7;
|
||||
margin-bottom: 0.5em;
|
||||
padding: 0.3em 0.8em;
|
||||
}
|
||||
|
||||
.bug {
|
||||
border: 1px solid #000;
|
||||
background-color: #ffffcc;
|
||||
margin-bottom: 0.5em;
|
||||
padding: 0.3em 0.8em;
|
||||
}
|
||||
|
||||
.deprecated {
|
||||
color: #F60425;
|
||||
}
|
||||
|
||||
.section {
|
||||
margin-top: 3em;
|
||||
}
|
||||
|
||||
.section-specification {
|
||||
margin-left: 2.5em;
|
||||
margin-right: 2.5em;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.section-specification table {
|
||||
margin-bottom: 0em;
|
||||
border-top: 1px solid #d6e0e5;
|
||||
}
|
||||
|
||||
.section-specification td {
|
||||
vertical-align: top;
|
||||
border-bottom: 1px solid #d6e0e5;
|
||||
border-left-width: 0px;
|
||||
border-right-width: 0px;
|
||||
border-top-width: 0px;
|
||||
padding: .6em;
|
||||
}
|
||||
|
||||
.section-specification .specification-title {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.task-list {
|
||||
list-style-type: none;
|
||||
padding-left: 0px;
|
||||
}
|
||||
|
||||
.task-list li {
|
||||
margin-bottom: 3px;
|
||||
}
|
||||
|
||||
.task-item-suffix {
|
||||
color: #996;
|
||||
font-size: 12px;
|
||||
font-style: italic;
|
||||
margin-left: 0.5em;
|
||||
}
|
||||
|
||||
span.tooltip span.tooltip {
|
||||
font-size: 1.0em;
|
||||
display: none;
|
||||
padding: 0.3em;
|
||||
border: 1px solid #aaa;
|
||||
background-color: #fdfec8;
|
||||
color: #000;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
span.tooltip:hover span.tooltip {
|
||||
display: block;
|
||||
position: absolute;
|
||||
margin-left: 2em;
|
||||
}
|
||||
|
||||
.section-method {
|
||||
margin-top: 2.3em;
|
||||
}
|
||||
|
||||
.method-title {
|
||||
margin-bottom: 1.5em;
|
||||
}
|
||||
|
||||
.method-subtitle {
|
||||
margin-top: 0.7em;
|
||||
margin-bottom: 0.2em;
|
||||
}
|
||||
|
||||
.method-subsection p {
|
||||
margin-top: 0.4em;
|
||||
margin-bottom: 0.8em;
|
||||
}
|
||||
|
||||
.method-declaration {
|
||||
margin-top:1.182em;
|
||||
margin-bottom:.909em;
|
||||
}
|
||||
|
||||
.method-declaration code {
|
||||
font:14px Courier, Consolas, monospace;
|
||||
color:#000;
|
||||
}
|
||||
|
||||
.declaration {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.termdef {
|
||||
margin-bottom: 10px;
|
||||
margin-left: 0px;
|
||||
margin-right: 0px;
|
||||
margin-top: 0px;
|
||||
}
|
||||
|
||||
.termdef dt {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.termdef dd {
|
||||
margin-bottom: 6px;
|
||||
margin-left: 16px;
|
||||
margin-right: 0px;
|
||||
margin-top: 1px;
|
||||
}
|
||||
|
||||
.termdef dd p {
|
||||
margin-bottom: 6px;
|
||||
margin-left: 0px;
|
||||
margin-right: 0px;
|
||||
margin-top: -1px;
|
||||
}
|
||||
|
||||
.argument-def {
|
||||
margin-top: 0.3em;
|
||||
margin-bottom: 0.3em;
|
||||
}
|
||||
|
||||
.argument-def dd {
|
||||
margin-left: 1.25em;
|
||||
}
|
||||
|
||||
.see-also-section ul {
|
||||
list-style-type: none;
|
||||
padding-left: 0px;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.see-also-section li {
|
||||
margin-bottom: 3px;
|
||||
}
|
||||
|
||||
.declared-in-ref {
|
||||
color: #666;
|
||||
}
|
||||
|
||||
#tocContainer.hideInXcode {
|
||||
display: none;
|
||||
border: 0px solid black;
|
||||
}
|
||||
|
||||
#top_header.hideInXcode {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#contents.hideInXcode {
|
||||
border: 0px solid black;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
23
devsite/source/_sass/sections/documentation/js.scss
Normal file
23
devsite/source/_sass/sections/documentation/js.scss
Normal file
|
|
@ -0,0 +1,23 @@
|
|||
/**
|
||||
* Copyright 2025 Google LLC
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
.documentation__js {
|
||||
.desc-list {
|
||||
list-style: circle;
|
||||
margin-left: 25px;
|
||||
margin-bottom: 20px
|
||||
}
|
||||
}
|
||||
145
devsite/source/_sass/sections/events.scss
Normal file
145
devsite/source/_sass/sections/events.scss
Normal file
|
|
@ -0,0 +1,145 @@
|
|||
/**
|
||||
* Copyright 2025 Google LLC
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
.events__map {
|
||||
height: 260px;
|
||||
width: 100%;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.events__calendar {
|
||||
width: 100%;
|
||||
background-color: $white;
|
||||
margin-bottom: 1em;
|
||||
|
||||
th,
|
||||
td {
|
||||
font-weight: 600;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.calendar__month,
|
||||
.calendar__arrow {
|
||||
background-color: $gray-09;
|
||||
font-weight: 700;
|
||||
color: $white;
|
||||
}
|
||||
|
||||
.calendar__arrow {
|
||||
font-size: 1.2em;
|
||||
padding: 0;
|
||||
|
||||
a {
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
|
||||
.calendar__month {
|
||||
text-transform: uppercase;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.calendar__days {
|
||||
th {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.calendar__day--past {
|
||||
color: $gray-06;
|
||||
}
|
||||
|
||||
.calendar__day--event {
|
||||
background-color: $green;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.calendar__day--past-event {
|
||||
background-color: $gray-06;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
td {
|
||||
padding: 0.25em;
|
||||
width: 1/7 * 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.events__list {
|
||||
|
||||
.event {
|
||||
margin-bottom: 0.5em;
|
||||
|
||||
h3 {
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
font-size: 1.3em;
|
||||
}
|
||||
|
||||
.event__meta {
|
||||
font-size: 0.9em;
|
||||
color: darken($gray-09, 20);
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
}
|
||||
|
||||
.event--highlighted {
|
||||
padding: 0 10px;
|
||||
border-left: 10px solid $color-community;
|
||||
margin-left: -20px;
|
||||
}
|
||||
|
||||
.event--past {
|
||||
a {
|
||||
color: lighten($base-link-color, 15);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.retreat-2015__page {
|
||||
background-color: rgb(47, 89, 108);
|
||||
background-image: url('/assets/images/community/events/developer-retreat-2015/san-francisco.jpg');
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
background-position: center center;
|
||||
}
|
||||
|
||||
.retreat-2015__stripe {
|
||||
text-align: center;
|
||||
background-color: rgba(40, 40, 40, 0.8);
|
||||
color: #fff;
|
||||
text-transform: uppercase;
|
||||
padding: 2em;
|
||||
|
||||
h1 {
|
||||
font-weight: 500;
|
||||
font-size: 3em;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-weight: 300;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
form {
|
||||
margin-top: 3em;
|
||||
}
|
||||
|
||||
.form_group {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
66
devsite/source/_sass/sections/examples.scss
Normal file
66
devsite/source/_sass/sections/examples.scss
Normal file
|
|
@ -0,0 +1,66 @@
|
|||
/**
|
||||
* Copyright 2025 Google LLC
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
.examples__filters {
|
||||
margin-bottom: 1em;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
h3 {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.examples__tag {
|
||||
background-color: $color-examples;
|
||||
border-radius: 3px;
|
||||
color: $white;
|
||||
display: inline-block;
|
||||
font-size: 0.75em;
|
||||
line-height: 1;
|
||||
margin-bottom: 0.2em;
|
||||
min-width: 3em;
|
||||
padding: 0.3em;
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
color: $white;
|
||||
background-color: darken($color-examples, 20);
|
||||
}
|
||||
}
|
||||
|
||||
.examples__filters--selected {
|
||||
.examples__tag {
|
||||
background-color: lighten($color-examples, 20);
|
||||
|
||||
&.selected {
|
||||
background-color: $color-examples;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.example__meta {
|
||||
margin-top: -1em;
|
||||
margin-bottom: 0.5em;
|
||||
font-size: 0.8em;
|
||||
text-transform: uppercase;
|
||||
color: $gray-09;
|
||||
}
|
||||
35
devsite/source/_sass/sections/getting-started.scss
Normal file
35
devsite/source/_sass/sections/getting-started.scss
Normal file
|
|
@ -0,0 +1,35 @@
|
|||
/**
|
||||
* Copyright 2025 Google LLC
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
.getting-started {
|
||||
|
||||
.title-image {
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.watchface-image {
|
||||
background-image: url("/assets/images/getting-started/long-pebble.png");
|
||||
}
|
||||
.one-click-action-image {
|
||||
background-image: url("/assets/images/getting-started/pebble-long-grey.svg");
|
||||
}
|
||||
.book-image {
|
||||
background-image: url("/assets/images/getting-started/pebble-long-grey.svg");
|
||||
}
|
||||
|
||||
}
|
||||
52
devsite/source/_sass/sections/guides.scss
Normal file
52
devsite/source/_sass/sections/guides.scss
Normal file
|
|
@ -0,0 +1,52 @@
|
|||
/**
|
||||
* Copyright 2025 Google LLC
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
.guides__toc {
|
||||
|
||||
h2 {
|
||||
margin: 0;
|
||||
font-weight: 300;
|
||||
font-size: 1.5em;
|
||||
}
|
||||
|
||||
h3 {
|
||||
margin: 0;
|
||||
font-weight: 300;
|
||||
font-size: 1.3em;
|
||||
}
|
||||
|
||||
h4 {
|
||||
margin: 0;
|
||||
font-weight: 600;
|
||||
font-size: 1.1em;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0 0 0.5em 0;
|
||||
}
|
||||
}
|
||||
|
||||
.centered-table {
|
||||
|
||||
td, th {
|
||||
text-align:center;
|
||||
}
|
||||
}
|
||||
|
||||
table td hr {
|
||||
margin: 0;
|
||||
border-bottom-color: $gray-06;
|
||||
}
|
||||
42
devsite/source/_sass/sections/inspiration.scss
Normal file
42
devsite/source/_sass/sections/inspiration.scss
Normal file
|
|
@ -0,0 +1,42 @@
|
|||
/**
|
||||
* Copyright 2025 Google LLC
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
.inspiration-page {
|
||||
h2 {
|
||||
color: $purple;
|
||||
font-size: 1.5rem;
|
||||
margin: 1rem 0 0;
|
||||
text-transform: uppercase;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
font-size: 1.3rem;
|
||||
border: 0;
|
||||
color: lighten($base-font-color, 20);
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
p {
|
||||
margin: 0.5rem 0 1rem;
|
||||
line-height: 1;
|
||||
}
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
}
|
||||
178
devsite/source/_sass/sections/retreat.scss
Normal file
178
devsite/source/_sass/sections/retreat.scss
Normal file
|
|
@ -0,0 +1,178 @@
|
|||
/**
|
||||
* Copyright 2025 Google LLC
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
$banner-blue: #066AC4;
|
||||
|
||||
.retreat-page {
|
||||
font-size: 1.3rem;
|
||||
|
||||
h1 {
|
||||
background-color: $banner-blue;
|
||||
color: #fff;
|
||||
font-size: 1.6em;
|
||||
margin: 0;
|
||||
padding: 2rem 0;
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.anchor {
|
||||
&::before {
|
||||
content: ' ';
|
||||
display: block;
|
||||
height: $header-height + 60px;
|
||||
margin-top: -1 * ($header-height + 60px);
|
||||
visibility: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.container {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.retreat-banner {
|
||||
background-color: #066AC4;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
max-height: 620px;
|
||||
|
||||
@include bp-max (xs) {
|
||||
padding-top: 3rem;
|
||||
}
|
||||
|
||||
img,
|
||||
svg {
|
||||
width: 100%;
|
||||
display: block;
|
||||
max-width: 1300px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
|
||||
.retreat-nav {
|
||||
background-color: transparentize(#222, 0.3);
|
||||
left: $sidebar-width + $section-menu-width;
|
||||
position: fixed;
|
||||
text-align: center;
|
||||
top: $header-height;
|
||||
right: 0;
|
||||
z-index: 100;
|
||||
|
||||
@include bp-max ($sidebar-hide-at) {
|
||||
left: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.nav {
|
||||
display: inline-block;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
ul {
|
||||
@include display(flex);
|
||||
}
|
||||
|
||||
li {
|
||||
@include flex(1 0 auto);
|
||||
display: block;
|
||||
|
||||
&:last-child > a {
|
||||
margin-right: 0 !important;
|
||||
}
|
||||
|
||||
> a {
|
||||
color: #fff;
|
||||
display: block;
|
||||
padding: 1rem 0;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: transparentize(darken($banner-blue, 30), 0.3);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.retreat-location {
|
||||
|
||||
.row {
|
||||
background-image: url('../images/community/events/developer-retreat-2015/san-francisco.jpg');
|
||||
height: 35vw;
|
||||
background-size: cover;
|
||||
background-position: center bottom;
|
||||
min-height: 300px;
|
||||
}
|
||||
|
||||
.retreat-location-strap {
|
||||
background-color: rgba(255, 255, 255, 0.7);
|
||||
text-align: center;
|
||||
margin-bottom: 0;
|
||||
padding: 1em 0;
|
||||
font-size: 1.2rem;
|
||||
margin-top: 5vw;
|
||||
|
||||
@include bp-min(s) {
|
||||
padding: 2em 0;
|
||||
margin-top: 20vw;
|
||||
font-size: 1.3em;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.retreat-faq {
|
||||
|
||||
dt,
|
||||
dd {
|
||||
line-height: 1.3em;
|
||||
margin: 0 0 1em;
|
||||
padding: 0.5em 0 0 2.5em;
|
||||
position: relative;
|
||||
|
||||
&::before {
|
||||
border-radius: $base-border-radius;
|
||||
color: $white;
|
||||
font-size: 1.4em;
|
||||
font-weight: normal;
|
||||
left: 0;
|
||||
line-height: 1em;
|
||||
padding: 0.5rem 0;
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
top: 0;
|
||||
width: 1.4em;
|
||||
}
|
||||
}
|
||||
|
||||
dt {
|
||||
|
||||
&::before {
|
||||
background-color: $pebble-pink;
|
||||
content: 'Q';
|
||||
}
|
||||
}
|
||||
|
||||
dd {
|
||||
|
||||
&::before {
|
||||
background-color: $pebble-green;
|
||||
content: 'A';
|
||||
}
|
||||
}
|
||||
}
|
||||
99
devsite/source/_sass/sections/round.scss
Normal file
99
devsite/source/_sass/sections/round.scss
Normal file
|
|
@ -0,0 +1,99 @@
|
|||
/**
|
||||
* Copyright 2025 Google LLC
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
.round-landing {
|
||||
background-image: url('../images/round/splash.jpg');
|
||||
background-repeat: no-repeat;
|
||||
background-position: center bottom;
|
||||
background-size: cover;
|
||||
|
||||
@include bp-max (xs) {
|
||||
height: 120%;
|
||||
}
|
||||
}
|
||||
|
||||
.round-landing__contents {
|
||||
max-width: 800px;
|
||||
width: 80%;
|
||||
color: $white;
|
||||
text-align: center;
|
||||
padding-top: 5%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.round-landing__header {
|
||||
font-size: 3rem;
|
||||
}
|
||||
|
||||
.round-landing__text {
|
||||
font-size: 1.5rem;
|
||||
width: 80%;
|
||||
margin: 0 auto 2rem;
|
||||
}
|
||||
|
||||
@include bp-max (s) {
|
||||
.round-landing__buttons {
|
||||
.btn {
|
||||
display: block;
|
||||
width: 100%;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.btn + .btn {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include bp-min (m) {
|
||||
.round-landing__buttons {
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
|
||||
.btn {
|
||||
flex: 1 1 auto;
|
||||
-webkit-flex: 1 1 auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.round-landing__lab {
|
||||
font-size: 1.2em;
|
||||
font-weight: 300;
|
||||
background-color: rgba(200, 200, 200, 0.7);
|
||||
color: $black;
|
||||
padding: 0.5em 0.8em;
|
||||
margin: 1em 0;
|
||||
|
||||
a {
|
||||
color: $black;
|
||||
text-decoration: underline;
|
||||
|
||||
&:hover {
|
||||
color: $black;
|
||||
}
|
||||
}
|
||||
|
||||
@include bp-min (m) {
|
||||
position: absolute;
|
||||
left: $sidebar-width + 20px;
|
||||
bottom: 20px;
|
||||
width: 50%;
|
||||
min-width: 300px;
|
||||
text-align: left;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
26
devsite/source/_sass/sections/sdk.scss
Normal file
26
devsite/source/_sass/sections/sdk.scss
Normal file
|
|
@ -0,0 +1,26 @@
|
|||
/**
|
||||
* Copyright 2025 Google LLC
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
.sdk4-landing {
|
||||
background-image: url('../images/landing-page/devblog.jpg');
|
||||
background-repeat: no-repeat;
|
||||
background-position: center bottom;
|
||||
background-size: cover;
|
||||
|
||||
@include bp-max (xs) {
|
||||
height: 120%;
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue