mirror of
https://github.com/google/pebble.git
synced 2025-05-28 05:53: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
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue