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