Import the pebble dev site into devsite/

This commit is contained in:
Katharine Berry 2025-02-17 17:02:33 -08:00
parent 3b92768480
commit 527858cf4c
1359 changed files with 265431 additions and 0 deletions

View 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';

View 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;
}

View 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);
}

View 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;
}

View 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);

View 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;
}
}

View 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;
}

View 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';
}
}

View 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;

View 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;
}
}

View 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;
}

View 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;
}

View 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);
}
}
}