am 52f25665: am a23a3d83: am d9ca90b4: Add SDK template and assets for Android Design
* commit '52f256655855e0a03653a007cb4279eb1c152c5e': Add SDK template and assets for Android Design
This commit is contained in:
Roman Nurik
Android Git Automerger
commit
f84c92e861
Binary file not shown.
|
After Width: | Height: | Size: 1.4 KiB |
|
|
@ -0,0 +1,641 @@
|
|||
/* color definitions */
|
||||
/* 16 column layout */
|
||||
/* clearfix idiom */
|
||||
/* common mixins */
|
||||
/* page layout + top-level styles */
|
||||
::-webkit-selection,
|
||||
::-moz-selection,
|
||||
::selection {
|
||||
background-color: #0099cc;
|
||||
color: #fff; }
|
||||
|
||||
html, body {
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background: #eee none no-repeat fixed top left;
|
||||
background-image: -webkit-gradient(linear, 100% 0%, 100% 100%, from(#dddddd), color-stop(25%, #f2f2f2), color-stop(75%, #f2f2f2), to(#dddddd));
|
||||
background-image: -moz-linear-gradient(top, #dddddd, #f2f2f2, #f2f2f2, #dddddd);
|
||||
-webkit-font-smoothing: antialiased;
|
||||
/* prevent subpixel antialiasing, which thickens the text */
|
||||
text-rendering: optimizeLegibility;
|
||||
/* opentype ftw */ }
|
||||
|
||||
body {
|
||||
color: #555555;
|
||||
font: 14px/20px Roboto, sans-serif;
|
||||
font-weight: 400; }
|
||||
|
||||
#page-container {
|
||||
width: 940px;
|
||||
margin: 0 40px; }
|
||||
|
||||
#page-header {
|
||||
height: 80px;
|
||||
margin-bottom: 20px;
|
||||
font-size: 48px;
|
||||
line-height: 48px;
|
||||
font-weight: 100;
|
||||
padding-left: 10px; }
|
||||
#page-header a {
|
||||
display: block;
|
||||
position: relative;
|
||||
top: 20px;
|
||||
text-decoration: none;
|
||||
color: #555555 !important; }
|
||||
|
||||
#main-row {
|
||||
display: inline-block; }
|
||||
#main-row:after {
|
||||
content: ".";
|
||||
display: block;
|
||||
height: 0;
|
||||
clear: both;
|
||||
visibility: hidden; }
|
||||
* html #main-row {
|
||||
height: 1px; }
|
||||
|
||||
#page-footer {
|
||||
margin-left: 190px;
|
||||
margin-top: 80px;
|
||||
color: #999999;
|
||||
padding-bottom: 40px;
|
||||
font-size: 12px;
|
||||
line-height: 15px; }
|
||||
#page-footer a {
|
||||
color: #777777; }
|
||||
#page-footer #copyright {
|
||||
margin-bottom: 10px; }
|
||||
|
||||
#nav-container {
|
||||
width: 160px;
|
||||
min-height: 10px;
|
||||
margin-right: 20px;
|
||||
float: left; }
|
||||
|
||||
#nav {
|
||||
width: 160px; }
|
||||
|
||||
#nav.fixed {
|
||||
position: fixed;
|
||||
top: 40px; }
|
||||
|
||||
#content {
|
||||
width: 760px;
|
||||
float: left; }
|
||||
|
||||
a,
|
||||
a:visited {
|
||||
color: #333333; }
|
||||
|
||||
a:hover,
|
||||
acronym:hover {
|
||||
color: #7aa1b0 !important; }
|
||||
|
||||
a:focus,
|
||||
a:active {
|
||||
color: #33b5e5 !important; }
|
||||
|
||||
img {
|
||||
border: none; }
|
||||
|
||||
ul {
|
||||
margin: 0;
|
||||
padding: 0; }
|
||||
|
||||
strong {
|
||||
font-weight: 500; }
|
||||
|
||||
em {
|
||||
font-style: italic; }
|
||||
|
||||
code {
|
||||
font-family: Courier New, monospace; }
|
||||
|
||||
acronym {
|
||||
border-bottom: 1px dotted #555555;
|
||||
cursor: help; }
|
||||
|
||||
acronym:hover {
|
||||
border-bottom-color: #7aa1b0; }
|
||||
|
||||
img.with-shadow,
|
||||
video.with-shadow {
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25); }
|
||||
|
||||
/* disclosures mixin */
|
||||
/* content layout */
|
||||
.layout-content-row {
|
||||
display: inline-block;
|
||||
margin-bottom: 10px; }
|
||||
.layout-content-row:after {
|
||||
content: ".";
|
||||
display: block;
|
||||
height: 0;
|
||||
clear: both;
|
||||
visibility: hidden; }
|
||||
* html .layout-content-row {
|
||||
height: 1px; }
|
||||
|
||||
.layout-content-col {
|
||||
float: left;
|
||||
margin-left: 20px; }
|
||||
.layout-content-col:first-child {
|
||||
margin-left: 0; }
|
||||
|
||||
.layout-content-col.span-1 {
|
||||
width: 40px; }
|
||||
|
||||
.layout-content-col.span-2 {
|
||||
width: 100px; }
|
||||
|
||||
.layout-content-col.span-3 {
|
||||
width: 160px; }
|
||||
|
||||
.layout-content-col.span-4 {
|
||||
width: 220px; }
|
||||
|
||||
.layout-content-col.span-5 {
|
||||
width: 280px; }
|
||||
|
||||
.layout-content-col.span-6 {
|
||||
width: 340px; }
|
||||
|
||||
.layout-content-col.span-7 {
|
||||
width: 400px; }
|
||||
|
||||
.layout-content-col.span-8 {
|
||||
width: 460px; }
|
||||
|
||||
.layout-content-col.span-9 {
|
||||
width: 520px; }
|
||||
|
||||
.layout-content-col.span-10 {
|
||||
width: 580px; }
|
||||
|
||||
.layout-content-col.span-11 {
|
||||
width: 640px; }
|
||||
|
||||
.layout-content-col.span-12 {
|
||||
width: 700px; }
|
||||
|
||||
.layout-content-col.span-13 {
|
||||
width: 760px; }
|
||||
|
||||
.vspace.size-1 {
|
||||
height: 10px; }
|
||||
|
||||
.vspace.size-2 {
|
||||
height: 20px; }
|
||||
|
||||
.vspace.size-3 {
|
||||
height: 30px; }
|
||||
|
||||
.vspace.size-4 {
|
||||
height: 40px; }
|
||||
|
||||
.vspace.size-5 {
|
||||
height: 50px; }
|
||||
|
||||
.vspace.size-6 {
|
||||
height: 60px; }
|
||||
|
||||
.vspace.size-7 {
|
||||
height: 70px; }
|
||||
|
||||
.vspace.size-8 {
|
||||
height: 80px; }
|
||||
|
||||
.vspace.size-9 {
|
||||
height: 90px; }
|
||||
|
||||
.vspace.size-10 {
|
||||
height: 100px; }
|
||||
|
||||
.vspace.size-11 {
|
||||
height: 110px; }
|
||||
|
||||
.vspace.size-12 {
|
||||
height: 120px; }
|
||||
|
||||
.vspace.size-13 {
|
||||
height: 130px; }
|
||||
|
||||
.vspace.size-14 {
|
||||
height: 140px; }
|
||||
|
||||
.vspace.size-15 {
|
||||
height: 150px; }
|
||||
|
||||
.vspace.size-16 {
|
||||
height: 160px; }
|
||||
|
||||
/* nav */
|
||||
#nav {
|
||||
/* section header divs */
|
||||
/* expanded section header divs */
|
||||
/* sublinks */ }
|
||||
#nav li {
|
||||
list-style-type: none;
|
||||
font-size: 14px;
|
||||
line-height: 10px; }
|
||||
#nav a {
|
||||
color: #555555;
|
||||
text-decoration: none; }
|
||||
#nav li.selected > a,
|
||||
#nav li.selected .nav-section-header a {
|
||||
font-weight: 500;
|
||||
color: #0099cc !important; }
|
||||
#nav .nav-section-header {
|
||||
position: relative;
|
||||
padding: 10px;
|
||||
margin-bottom: 1px;
|
||||
/* section header links */ }
|
||||
#nav .nav-section-header a {
|
||||
color: #333333;
|
||||
font-weight: 500;
|
||||
text-transform: uppercase; }
|
||||
#nav .nav-section-header:after {
|
||||
content: '';
|
||||
background: transparent url(disclosure_down.png) no-repeat scroll top left;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 10px; }
|
||||
#nav .nav-section-header.empty:after {
|
||||
display: none; }
|
||||
#nav li.expanded .nav-section-header {
|
||||
background: rgba(0, 0, 0, 0.05); }
|
||||
#nav li.expanded .nav-section-header:after {
|
||||
content: '';
|
||||
background: transparent url(disclosure_up.png) no-repeat scroll top left;
|
||||
width: 10px;
|
||||
height: 10px; }
|
||||
#nav > li > ul {
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
margin-bottom: 0; }
|
||||
#nav > li > ul.animate-height {
|
||||
-webkit-transition: height 0.25s ease-in;
|
||||
-moz-transition: height 0.25s ease-in;
|
||||
transition: height 0.25s ease-in; }
|
||||
#nav > li > ul li {
|
||||
padding: 10px 10px 11px 10px; }
|
||||
#nav > li.expanded > ul {
|
||||
height: auto; }
|
||||
#nav > li.expanded > ul li {
|
||||
background: rgba(0, 0, 0, 0.03); }
|
||||
#nav #back-dac-section {
|
||||
padding: 10px;
|
||||
border-top: 1px solid #ddd; }
|
||||
#nav #back-dac-section a {
|
||||
color: #333333;
|
||||
font-weight: 500;
|
||||
text-transform: uppercase; }
|
||||
|
||||
/* content header */
|
||||
.content-header {
|
||||
border-bottom: 1px solid #33b5e5;
|
||||
height: 30px; }
|
||||
.content-header h2 {
|
||||
border-bottom: 0; }
|
||||
.content-header.just-links {
|
||||
border-bottom: 0; }
|
||||
|
||||
.content-footer {
|
||||
border-top: 1px solid #33b5e5;
|
||||
margin-top: 10px;
|
||||
height: 30px; }
|
||||
|
||||
.paging-links {
|
||||
position: relative; }
|
||||
.paging-links a {
|
||||
position: absolute;
|
||||
font-size: 14px;
|
||||
line-height: 30px;
|
||||
color: #555555;
|
||||
text-decoration: none;
|
||||
text-transform: uppercase; }
|
||||
.paging-links .prev-page-link {
|
||||
display: none;
|
||||
left: -5px; }
|
||||
.paging-links .prev-page-link:before {
|
||||
content: '';
|
||||
background: transparent url(disclosure_left.png) no-repeat scroll top left;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
display: inline-block;
|
||||
margin-right: 5px; }
|
||||
.paging-links .next-page-link {
|
||||
display: none;
|
||||
right: 10px; }
|
||||
.paging-links .next-page-link:after {
|
||||
content: '';
|
||||
background: transparent url(disclosure_right.png) no-repeat scroll top left;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
display: inline-block;
|
||||
margin-left: 5px; }
|
||||
|
||||
/* content body */
|
||||
@-webkit-keyframes glowheader {
|
||||
from {
|
||||
background-color: #33b5e5;
|
||||
color: #000;
|
||||
border-bottom-color: #000; }
|
||||
|
||||
to {
|
||||
background-color: transparent;
|
||||
color: #33b5e5;
|
||||
border-bottom-color: #33b5e5; } }
|
||||
|
||||
@-moz-keyframes glowheader {
|
||||
from {
|
||||
background-color: #33b5e5;
|
||||
color: #000;
|
||||
border-bottom-color: #000; }
|
||||
|
||||
to {
|
||||
background-color: transparent;
|
||||
color: #33b5e5;
|
||||
border-bottom-color: #33b5e5; } }
|
||||
|
||||
@keyframes glowheader {
|
||||
from {
|
||||
background-color: #33b5e5;
|
||||
color: #000;
|
||||
border-bottom-color: #000; }
|
||||
|
||||
to {
|
||||
background-color: transparent;
|
||||
color: #33b5e5;
|
||||
border-bottom-color: #33b5e5; } }
|
||||
|
||||
#content p,
|
||||
#content ul,
|
||||
#content ol,
|
||||
#content h3 {
|
||||
margin: 0 10px 10px 10px; }
|
||||
#content h2 {
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
margin-bottom: 10px;
|
||||
font-size: 16px;
|
||||
line-height: 30px;
|
||||
font-weight: 500;
|
||||
color: #33b5e5;
|
||||
border-bottom: 1px solid #33b5e5;
|
||||
height: 30px; }
|
||||
#content h2:target {
|
||||
-webkit-animation-name: glowheader;
|
||||
-moz-animation-name: glowheader;
|
||||
animation-name: glowheader;
|
||||
-webkit-animation-duration: 0.7s;
|
||||
-moz-animation-duration: 0.7s;
|
||||
animation-duration: 0.7s;
|
||||
-webkit-animation-timing-function: ease-out;
|
||||
-moz-animation-timing-function: ease-out;
|
||||
animation-timing-function: ease-out; }
|
||||
#content hr {
|
||||
border: 0;
|
||||
border-bottom: 1px solid #33b5e5;
|
||||
margin-bottom: 20px; }
|
||||
#content h3 {
|
||||
color: #33b5e5;
|
||||
text-transform: uppercase;
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
font-weight: 500; }
|
||||
#content h4 {
|
||||
margin: 0 10px;
|
||||
color: #333333;
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
line-height: 20px; }
|
||||
#content strong {
|
||||
color: #333333; }
|
||||
#content ul li,
|
||||
#content ol li {
|
||||
margin-left: 20px; }
|
||||
#content ul li h4,
|
||||
#content ol li h4 {
|
||||
margin: 0; }
|
||||
#content ul li p,
|
||||
#content ol li p {
|
||||
margin-left: 0; }
|
||||
#content ul li {
|
||||
list-style-type: square;
|
||||
list-style-type: none;
|
||||
position: relative; }
|
||||
#content ul li:before {
|
||||
content: '\2022';
|
||||
font-family: verdana;
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
position: absolute;
|
||||
left: -20px;
|
||||
top: -1px; }
|
||||
#content ol {
|
||||
counter-reset: item; }
|
||||
#content ol li {
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
list-style-type: none;
|
||||
position: relative; }
|
||||
#content ol li:before {
|
||||
content: counter(item) ". ";
|
||||
counter-increment: item;
|
||||
position: absolute;
|
||||
left: -20px;
|
||||
top: 0; }
|
||||
#content ol li.value-1:before {
|
||||
content: "1. "; }
|
||||
#content ol li.value-2:before {
|
||||
content: "2. "; }
|
||||
#content ol li.value-3:before {
|
||||
content: "3. "; }
|
||||
#content ol li.value-4:before {
|
||||
content: "4. "; }
|
||||
#content ol li.value-5:before {
|
||||
content: "5. "; }
|
||||
#content ol li.value-6:before {
|
||||
content: "6. "; }
|
||||
#content ol li.value-7:before {
|
||||
content: "7. "; }
|
||||
#content ol li.value-8:before {
|
||||
content: "8. "; }
|
||||
#content ol li.value-9:before {
|
||||
content: "9. "; }
|
||||
#content ol li.value-10:before {
|
||||
content: "10. "; }
|
||||
#content .with-callouts ol li {
|
||||
list-style-position: inside;
|
||||
margin-left: 0; }
|
||||
#content .with-callouts ol li:before {
|
||||
position: static;
|
||||
display: inline;
|
||||
left: 0;
|
||||
float: left;
|
||||
width: 17px;
|
||||
color: #33b5e5;
|
||||
font-weight: 500; }
|
||||
|
||||
/* special list items */
|
||||
li.no-bullet {
|
||||
list-style-type: none !important; }
|
||||
|
||||
#content li.with-icon {
|
||||
position: relative;
|
||||
margin-left: 40px;
|
||||
min-height: 30px; }
|
||||
#content li.with-icon p {
|
||||
margin-left: 0 !important; }
|
||||
#content li.with-icon:before {
|
||||
position: absolute;
|
||||
left: -40px;
|
||||
top: 0;
|
||||
content: '';
|
||||
width: 30px;
|
||||
height: 30px; }
|
||||
#content li.with-icon.tablet:before {
|
||||
background-image: url(ico_phone_tablet.png); }
|
||||
#content li.with-icon.web:before {
|
||||
background-image: url(ico_web.png); }
|
||||
#content li.with-icon.checklist:before {
|
||||
background-image: url(ico_checklist.png); }
|
||||
#content li.with-icon.action:before {
|
||||
background-image: url(ico_action.png); }
|
||||
#content li.with-icon.use:before {
|
||||
background-image: url(ico_use.png); }
|
||||
|
||||
/* figures and callouts */
|
||||
.figure {
|
||||
position: relative; }
|
||||
.figure.pad-below {
|
||||
margin-bottom: 20px; }
|
||||
.figure .figure-callout {
|
||||
position: absolute;
|
||||
color: #fff;
|
||||
font-weight: 500;
|
||||
font-size: 16px;
|
||||
line-height: 23px;
|
||||
text-align: center;
|
||||
background: transparent url(callout.png) no-repeat scroll 50% 50%;
|
||||
padding-right: 2px;
|
||||
width: 30px;
|
||||
height: 29px;
|
||||
z-index: 1000; }
|
||||
.figure .figure-callout.top {
|
||||
top: -9px; }
|
||||
.figure .figure-callout.right {
|
||||
right: -5px; }
|
||||
|
||||
.figure-caption {
|
||||
margin: 0 10px 20px 10px;
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
font-style: italic; }
|
||||
|
||||
/* rows of figures */
|
||||
.figure-row {
|
||||
font-size: 0;
|
||||
line-height: 0;
|
||||
/* to prevent space between figures */ }
|
||||
.figure-row .figure {
|
||||
display: inline-block;
|
||||
vertical-align: top; }
|
||||
.figure-row .figure + .figure {
|
||||
margin-left: 10px;
|
||||
/* reintroduce space between figures */ }
|
||||
|
||||
/* video containers */
|
||||
.framed-galaxynexus-land-span-13 {
|
||||
background: transparent url(content/misc_full_galaxynexus_blank_land_span13.png) no-repeat scroll top left;
|
||||
padding: 42px 122px 62px 126px;
|
||||
overflow: hidden; }
|
||||
.framed-galaxynexus-land-span-13, .framed-galaxynexus-land-span-13 video, .framed-galaxynexus-land-span-13 img {
|
||||
width: 512px;
|
||||
height: 286px; }
|
||||
|
||||
.framed-galaxynexus-port-span-9 {
|
||||
background: transparent url(content/misc_full_galaxynexus_blank_port_span9.png) no-repeat scroll top left;
|
||||
padding: 95px 122px 107px 124px;
|
||||
overflow: hidden; }
|
||||
.framed-galaxynexus-port-span-9, .framed-galaxynexus-port-span-9 video, .framed-galaxynexus-port-span-9 img {
|
||||
width: 274px;
|
||||
height: 488px; }
|
||||
|
||||
.framed-galaxynexus-port-span-5 {
|
||||
background: transparent url(content/misc_full_galaxynexus_blank_port_span5.png) no-repeat scroll top left;
|
||||
padding: 75px 31px 76px 33px;
|
||||
overflow: hidden; }
|
||||
.framed-galaxynexus-port-span-5, .framed-galaxynexus-port-span-5 video, .framed-galaxynexus-port-span-5 img {
|
||||
width: 216px;
|
||||
height: 384px; }
|
||||
|
||||
/* landing page disclosures */
|
||||
.landing-page-link {
|
||||
text-decoration: none;
|
||||
font-weight: 500;
|
||||
color: #333333; }
|
||||
.landing-page-link:after {
|
||||
content: '';
|
||||
background: transparent url(disclosure_right.png) no-repeat scroll top left;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
display: inline-block;
|
||||
margin-left: 5px; }
|
||||
|
||||
/* tooltips */
|
||||
.tooltip-box {
|
||||
position: absolute;
|
||||
background-color: rgba(0, 0, 0, 0.9);
|
||||
border-radius: 2px;
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
color: #fff;
|
||||
padding: 6px 10px;
|
||||
max-width: 250px;
|
||||
z-index: 10000; }
|
||||
.tooltip-box.below:after {
|
||||
position: absolute;
|
||||
content: '';
|
||||
line-height: 0;
|
||||
display: block;
|
||||
top: -10px;
|
||||
left: 5px;
|
||||
border: 5px solid transparent;
|
||||
border-bottom-color: rgba(0, 0, 0, 0.9); }
|
||||
|
||||
/* video note */
|
||||
.video-instructions {
|
||||
margin-top: 10px;
|
||||
margin-bottom: 10px; }
|
||||
.video-instructions:before {
|
||||
content: '';
|
||||
background: transparent url(ico_movie_inline.png) no-repeat scroll top left;
|
||||
display: inline-block;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
margin-right: 8px; }
|
||||
.video-instructions:after {
|
||||
content: 'Click to replay movie.'; }
|
||||
|
||||
/* download buttons */
|
||||
.download-button {
|
||||
display: block;
|
||||
margin-bottom: 5px;
|
||||
text-decoration: none;
|
||||
background-color: #33b5e5;
|
||||
color: #fff !important;
|
||||
font-weight: 500;
|
||||
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12);
|
||||
padding: 6px 12px;
|
||||
border-radius: 2px; }
|
||||
.download-button:hover, .download-button:focus {
|
||||
background-color: #0099cc;
|
||||
color: #fff !important; }
|
||||
.download-button:active {
|
||||
background-color: #006699; }
|
||||
|
|
@ -0,0 +1,188 @@
|
|||
$(document).ready(function() {
|
||||
// prep nav expandos
|
||||
var pagePath = document.location.pathname;
|
||||
if (pagePath.indexOf(SITE_ROOT) == 0) {
|
||||
pagePath = pagePath.substr(SITE_ROOT.length);
|
||||
if (pagePath == '' || pagePath.charAt(pagePath.length - 1) == '/') {
|
||||
pagePath += 'index.html';
|
||||
}
|
||||
}
|
||||
|
||||
if (SITE_ROOT.match(/\.\.\//) || SITE_ROOT == '') {
|
||||
// If running locally, SITE_ROOT will be a relative path, so account for that by
|
||||
// finding the relative URL to this page. This will allow us to find links on the page
|
||||
// leading back to this page.
|
||||
var pathParts = pagePath.split('/');
|
||||
var relativePagePathParts = [];
|
||||
var upDirs = (SITE_ROOT.match(/(\.\.\/)+/) || [''])[0].length / 3;
|
||||
for (var i = 0; i < upDirs; i++) {
|
||||
relativePagePathParts.push('..');
|
||||
}
|
||||
for (var i = 0; i < upDirs; i++) {
|
||||
relativePagePathParts.push(pathParts[pathParts.length - (upDirs - i) - 1]);
|
||||
}
|
||||
relativePagePathParts.push(pathParts[pathParts.length - 1]);
|
||||
pagePath = relativePagePathParts.join('/');
|
||||
} else {
|
||||
// Otherwise the page path should be an absolute URL.
|
||||
pagePath = SITE_ROOT + pagePath;
|
||||
}
|
||||
|
||||
// select current page in sidenav and set up prev/next links if they exist
|
||||
var $selNavLink = $('#nav').find('a[href="' + pagePath + '"]');
|
||||
if ($selNavLink.length) {
|
||||
$selListItem = $selNavLink.closest('li');
|
||||
|
||||
$selListItem.addClass('selected');
|
||||
$selListItem.closest('li.nav-section').addClass('expanded');
|
||||
|
||||
// set up prev links
|
||||
var $prevLink = [];
|
||||
var $prevListItem = $selListItem.prev('li');
|
||||
if ($prevListItem.length) {
|
||||
if ($prevListItem.hasClass('nav-section')) {
|
||||
// jump to last topic of previous section
|
||||
$prevLink = $prevListItem.find('a:last');
|
||||
} else {
|
||||
// jump to previous topic in this section
|
||||
$prevLink = $prevListItem.find('a:eq(0)');
|
||||
}
|
||||
} else {
|
||||
// jump to this section's index page (if it exists)
|
||||
$prevLink = $selListItem.parents('li').find('a');
|
||||
}
|
||||
|
||||
if ($prevLink.length) {
|
||||
var prevHref = $prevLink.attr('href');
|
||||
if (prevHref == SITE_ROOT + 'index.html') {
|
||||
// Don't show Previous when it leads to the homepage
|
||||
$('.prev-page-link').hide();
|
||||
} else {
|
||||
$('.prev-page-link').attr('href', prevHref).show();
|
||||
}
|
||||
} else {
|
||||
$('.prev-page-link').hide();
|
||||
}
|
||||
|
||||
// set up next links
|
||||
var $nextLink = [];
|
||||
if ($selListItem.hasClass('nav-section')) {
|
||||
// we're on an index page, jump to the first topic
|
||||
$nextLink = $selListItem.find('ul').find('a:eq(0)')
|
||||
} else {
|
||||
// jump to the next topic in this section (if it exists)
|
||||
$nextLink = $selListItem.next('li').find('a:eq(0)');
|
||||
if (!$nextLink.length) {
|
||||
// no more topics in this section, jump to the first topic in the next section
|
||||
$nextLink = $selListItem.parents('li').next('li.nav-section').find('a:eq(0)');
|
||||
}
|
||||
}
|
||||
if ($nextLink.length) {
|
||||
$('.next-page-link').attr('href', $nextLink.attr('href')).show();
|
||||
} else {
|
||||
$('.next-page-link').hide();
|
||||
}
|
||||
}
|
||||
|
||||
// Set up expand/collapse behavior
|
||||
$('#nav li.nav-section').click(function() {
|
||||
if ($(this).hasClass('expanded')) {
|
||||
return;
|
||||
}
|
||||
|
||||
// hide other
|
||||
var $old = $('#nav li.nav-section.expanded');
|
||||
if ($old.length) {
|
||||
var $oldUl = $old.children('ul');
|
||||
$oldUl.css('height', $oldUl.height() + 'px');
|
||||
window.setTimeout(function() {
|
||||
$oldUl
|
||||
.addClass('animate-height')
|
||||
.css('height', '');
|
||||
}, 0);
|
||||
$old.removeClass('expanded');
|
||||
}
|
||||
|
||||
// show me
|
||||
$(this).addClass('expanded');
|
||||
var $ul = $(this).children('ul');
|
||||
var expandedHeight = $ul.height();
|
||||
$ul
|
||||
.removeClass('animate-height')
|
||||
.css('height', 0);
|
||||
window.setTimeout(function() {
|
||||
$ul
|
||||
.addClass('animate-height')
|
||||
.css('height', expandedHeight + 'px');
|
||||
}, 0);
|
||||
});
|
||||
|
||||
// Stop expand/collapse behavior when clicking on nav section links (since we're navigating away
|
||||
// from the page)
|
||||
$('.nav-section-header').find('a:eq(0)').click(function(evt) {
|
||||
window.location.href = $(this).attr('href');
|
||||
return false;
|
||||
});
|
||||
|
||||
// Set up play-on-hover <video> tags.
|
||||
$('video.play-on-hover').bind('click', function(){
|
||||
$(this).get(0).load(); // in case the video isn't seekable
|
||||
$(this).get(0).play();
|
||||
});
|
||||
|
||||
// Set up tooltips
|
||||
var TOOLTIP_MARGIN = 10;
|
||||
$('acronym').each(function() {
|
||||
var $target = $(this);
|
||||
var $tooltip = $('<div>')
|
||||
.addClass('tooltip-box')
|
||||
.text($target.attr('title'))
|
||||
.hide()
|
||||
.appendTo('body');
|
||||
$target.removeAttr('title');
|
||||
|
||||
$target.hover(function() {
|
||||
// in
|
||||
var targetRect = $target.offset();
|
||||
targetRect.width = $target.width();
|
||||
targetRect.height = $target.height();
|
||||
|
||||
$tooltip.css({
|
||||
left: targetRect.left,
|
||||
top: targetRect.top + targetRect.height + TOOLTIP_MARGIN
|
||||
});
|
||||
$tooltip.addClass('below');
|
||||
$tooltip.show();
|
||||
}, function() {
|
||||
// out
|
||||
$tooltip.hide();
|
||||
});
|
||||
});
|
||||
|
||||
// Set up <h2> deeplinks
|
||||
$('h2').click(function() {
|
||||
var id = $(this).attr('id');
|
||||
if (id) {
|
||||
document.location.hash = id;
|
||||
}
|
||||
});
|
||||
|
||||
// Set up fixed navbar
|
||||
var navBarIsFixed = false;
|
||||
$(window).scroll(function() {
|
||||
var scrollTop = $(window).scrollTop();
|
||||
var navBarShouldBeFixed = (scrollTop > (100 - 40));
|
||||
if (navBarIsFixed != navBarShouldBeFixed) {
|
||||
if (navBarShouldBeFixed) {
|
||||
$('#nav')
|
||||
.addClass('fixed')
|
||||
.prependTo('#page-container');
|
||||
} else {
|
||||
$('#nav')
|
||||
.removeClass('fixed')
|
||||
.prependTo('#nav-container');
|
||||
}
|
||||
navBarIsFixed = navBarShouldBeFixed;
|
||||
}
|
||||
});
|
||||
});
|
||||
|
|
@ -0,0 +1,740 @@
|
|||
/* color definitions */
|
||||
|
||||
$text_color: #555;
|
||||
$text_color_dark: #333;
|
||||
$text_color_light: #777;
|
||||
$text_color_lighter: #999;
|
||||
|
||||
$ics_blue: #33b5e5;
|
||||
$ics_blue_dark: #09c;
|
||||
$ics_blue_darkest: #069;
|
||||
$ics_blue_desaturated: #7aa1b0;
|
||||
|
||||
$panel_background: rgba(0, 0, 0, 0.03);
|
||||
$panel_background_dark: rgba(0, 0, 0, 0.05);
|
||||
|
||||
$light_shadow_color: rgba(0,0,0,0.25);
|
||||
$lighter_shadow_color: rgba(0,0,0,0.12);
|
||||
|
||||
$tiny_text_size: 12px;
|
||||
$small_text_size: 14px;
|
||||
$large_text_size: 16px;
|
||||
$default_line_height: 20px;
|
||||
$tiny_line_height: 15px;
|
||||
|
||||
$thinweight: 100;
|
||||
$normalweight: 400;
|
||||
$boldweight: 500;
|
||||
|
||||
/* 16 column layout */
|
||||
|
||||
$col_width: 40px;
|
||||
$gutter_width: 20px;
|
||||
|
||||
@function gridwidth($n) {
|
||||
@return $n * $col_width + ($n - 1) * $gutter_width;
|
||||
}
|
||||
|
||||
/* clearfix idiom */
|
||||
|
||||
@mixin clearfix {
|
||||
display: inline-block;
|
||||
&:after {
|
||||
content: ".";
|
||||
display: block;
|
||||
height: 0;
|
||||
clear: both;
|
||||
visibility: hidden;
|
||||
}
|
||||
* html & { height: 1px }
|
||||
}
|
||||
|
||||
/* common mixins */
|
||||
|
||||
@mixin fontheight($font_size, $line_height) {
|
||||
font-size: $font_size;
|
||||
line-height: $line_height;
|
||||
}
|
||||
|
||||
@mixin prefixed($property, $value) {
|
||||
-webkit-#{$property}: $value;
|
||||
-moz-#{$property}: $value;
|
||||
#{$property}: $value;
|
||||
}
|
||||
|
||||
/* page layout + top-level styles */
|
||||
|
||||
::-webkit-selection,
|
||||
::-moz-selection,
|
||||
::selection {
|
||||
background-color: $ics_blue_dark;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
html, body {
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background: #eee none no-repeat fixed top left;
|
||||
background-image: -webkit-gradient(linear, 100% 0%, 100% 100%, from(#ddd), color-stop(25%, #f2f2f2), color-stop(75%, #f2f2f2), to(#ddd));
|
||||
background-image: -moz-linear-gradient(top, #ddd, #f2f2f2, #f2f2f2, #ddd);
|
||||
-webkit-font-smoothing: antialiased; /* prevent subpixel antialiasing, which thickens the text */
|
||||
text-rendering: optimizeLegibility; /* opentype ftw */
|
||||
}
|
||||
|
||||
body {
|
||||
color: $text_color;
|
||||
font: #{$small_text_size}/#{$default_line_height} Roboto,sans-serif;
|
||||
font-weight: $normalweight;
|
||||
}
|
||||
|
||||
#page-container {
|
||||
width: gridwidth(16);
|
||||
margin: 0 40px;
|
||||
}
|
||||
|
||||
#page-header {
|
||||
height: 80px;
|
||||
margin-bottom: 20px;
|
||||
@include fontheight(48px, 48px);
|
||||
font-weight: $thinweight;
|
||||
padding-left: $gutter_width / 2;
|
||||
|
||||
a {
|
||||
display: block;
|
||||
position: relative;
|
||||
top: 20px;
|
||||
text-decoration :none;
|
||||
color: $text_color !important;
|
||||
}
|
||||
}
|
||||
|
||||
#main-row {
|
||||
@include clearfix;
|
||||
}
|
||||
|
||||
#page-footer {
|
||||
margin-left: gridwidth(3) + $gutter_width + 10;
|
||||
margin-top: 80px;
|
||||
color: $text_color_lighter;
|
||||
padding-bottom: 40px;
|
||||
@include fontheight($tiny_text_size, $tiny_line_height);
|
||||
|
||||
a {
|
||||
color: $text_color_light;
|
||||
}
|
||||
|
||||
#copyright {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
#nav-container {
|
||||
width: gridwidth(3);
|
||||
min-height: 10px;
|
||||
margin-right: $gutter_width;
|
||||
float: left;
|
||||
}
|
||||
|
||||
#nav {
|
||||
width: gridwidth(3);
|
||||
}
|
||||
|
||||
#nav.fixed {
|
||||
position: fixed;
|
||||
top: 40px;
|
||||
}
|
||||
|
||||
#content {
|
||||
width: gridwidth(13);
|
||||
float: left;
|
||||
}
|
||||
|
||||
a,
|
||||
a:visited {
|
||||
color: $text_color_dark;
|
||||
}
|
||||
|
||||
a:hover,
|
||||
acronym:hover {
|
||||
color: $ics_blue_desaturated !important;
|
||||
}
|
||||
|
||||
a:focus,
|
||||
a:active {
|
||||
color: $ics_blue !important;
|
||||
}
|
||||
|
||||
img {
|
||||
border: none;
|
||||
}
|
||||
|
||||
ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
strong {
|
||||
font-weight: $boldweight;
|
||||
}
|
||||
|
||||
em {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
code {
|
||||
font-family: Courier New, monospace;
|
||||
}
|
||||
|
||||
acronym {
|
||||
border-bottom: 1px dotted $text_color;
|
||||
cursor: help;
|
||||
}
|
||||
|
||||
acronym:hover {
|
||||
border-bottom-color: $ics_blue_desaturated;
|
||||
}
|
||||
|
||||
img.with-shadow,
|
||||
video.with-shadow {
|
||||
box-shadow: 0 2px 4px $light_shadow_color;
|
||||
}
|
||||
|
||||
/* disclosures mixin */
|
||||
|
||||
@mixin disclosure($type) {
|
||||
content: '';
|
||||
background: transparent url(disclosure_#{$type}.png) no-repeat scroll top left;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
}
|
||||
|
||||
/* content layout */
|
||||
|
||||
.layout-content-row {
|
||||
@include clearfix;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.layout-content-col {
|
||||
float: left;
|
||||
margin-left: $gutter_width;
|
||||
|
||||
&:first-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@for $n from 1 through 13 {
|
||||
.layout-content-col.span-#{$n} { width: gridwidth($n); }
|
||||
}
|
||||
|
||||
@for $n from 1 through 16 {
|
||||
.vspace.size-#{$n} { height: 10px * $n; }
|
||||
}
|
||||
|
||||
/* nav */
|
||||
|
||||
#nav {
|
||||
li {
|
||||
list-style-type: none;
|
||||
@include fontheight($small_text_size, 10px);
|
||||
}
|
||||
|
||||
a {
|
||||
color: $text_color;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
li.selected > a,
|
||||
li.selected .nav-section-header a {
|
||||
font-weight: $boldweight;
|
||||
color: $ics_blue_dark !important;
|
||||
}
|
||||
|
||||
/* section header divs */
|
||||
|
||||
.nav-section-header {
|
||||
position: relative;
|
||||
padding: 10px;
|
||||
margin-bottom: 1px;
|
||||
|
||||
/* section header links */
|
||||
|
||||
a {
|
||||
color: $text_color_dark;
|
||||
font-weight: $boldweight;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
&:after {
|
||||
@include disclosure(down);
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
}
|
||||
|
||||
&.empty:after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* expanded section header divs */
|
||||
|
||||
li.expanded .nav-section-header {
|
||||
background: $panel_background_dark;
|
||||
|
||||
&:after {
|
||||
@include disclosure(up);
|
||||
}
|
||||
}
|
||||
|
||||
/* sublinks */
|
||||
|
||||
& > li > ul {
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
margin-bottom: 0;
|
||||
|
||||
&.animate-height {
|
||||
@include prefixed(transition, height 0.25s ease-in);
|
||||
}
|
||||
|
||||
li {
|
||||
padding: 10px 10px (10px + 1) 10px;
|
||||
}
|
||||
}
|
||||
|
||||
& > li.expanded > ul {
|
||||
height: auto;
|
||||
|
||||
li {
|
||||
background: $panel_background;
|
||||
}
|
||||
}
|
||||
|
||||
#back-dac-section {
|
||||
padding: 10px;
|
||||
border-top: 1px solid #ddd;
|
||||
|
||||
a {
|
||||
color: $text_color_dark;
|
||||
font-weight: $boldweight;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* content header */
|
||||
|
||||
$content_header_height: 30px;
|
||||
|
||||
.content-header {
|
||||
border-bottom: 1px solid $ics_blue;
|
||||
height: $content_header_height;
|
||||
|
||||
h2 {
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
&.just-links {
|
||||
border-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.content-footer {
|
||||
border-top: 1px solid $ics_blue;
|
||||
margin-top: 10px;
|
||||
height: $content_header_height;
|
||||
}
|
||||
|
||||
.paging-links {
|
||||
position: relative;
|
||||
|
||||
a {
|
||||
position: absolute;
|
||||
font-size: $small_text_size;
|
||||
line-height: $content_header_height;
|
||||
color: $text_color;
|
||||
text-decoration: none;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.prev-page-link {
|
||||
display: none;
|
||||
left: -5px;
|
||||
|
||||
&:before {
|
||||
@include disclosure(left);
|
||||
display: inline-block;
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.next-page-link {
|
||||
display: none;
|
||||
right: 10px;
|
||||
|
||||
&:after {
|
||||
@include disclosure(right);
|
||||
display: inline-block;
|
||||
margin-left: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* content body */
|
||||
|
||||
@-webkit-keyframes glowheader {
|
||||
from { background-color: rgb(51, 181, 229); color: #000; border-bottom-color: #000; }
|
||||
to { background-color: transparent; color: $ics_blue; border-bottom-color: $ics_blue; }
|
||||
}
|
||||
@-moz-keyframes glowheader {
|
||||
from { background-color: rgb(51, 181, 229); color: #000; border-bottom-color: #000; }
|
||||
to { background-color: transparent; color: $ics_blue; border-bottom-color: $ics_blue; }
|
||||
}
|
||||
@keyframes glowheader {
|
||||
from { background-color: rgb(51, 181, 229); color: #000; border-bottom-color: #000; }
|
||||
to { background-color: transparent; color: $ics_blue; border-bottom-color: $ics_blue; }
|
||||
}
|
||||
|
||||
#content {
|
||||
p,
|
||||
ul,
|
||||
ol,
|
||||
h3 {
|
||||
margin: 0 10px 10px 10px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
margin-bottom: 10px;
|
||||
font-size: $large_text_size;
|
||||
line-height: $content_header_height;
|
||||
font-weight: $boldweight;
|
||||
color: $ics_blue;
|
||||
border-bottom: 1px solid $ics_blue;
|
||||
height: $content_header_height;
|
||||
|
||||
&:target {
|
||||
@include prefixed(animation-name, glowheader);
|
||||
@include prefixed(animation-duration, 0.7s);
|
||||
@include prefixed(animation-timing-function, ease-out);
|
||||
}
|
||||
}
|
||||
|
||||
hr {
|
||||
border: 0;
|
||||
border-bottom: 1px solid $ics_blue;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
h3 {
|
||||
color: $ics_blue;
|
||||
text-transform: uppercase;
|
||||
@include fontheight($small_text_size, $default_line_height);
|
||||
font-weight: $boldweight;
|
||||
}
|
||||
|
||||
h4 {
|
||||
margin: 0 10px;
|
||||
color: $text_color_dark;
|
||||
font-weight: $boldweight;
|
||||
@include fontheight($small_text_size, $default_line_height);
|
||||
}
|
||||
|
||||
strong {
|
||||
color: $text_color_dark;
|
||||
}
|
||||
|
||||
ul li,
|
||||
ol li {
|
||||
margin-left: 20px;
|
||||
|
||||
h4 {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
ul li {
|
||||
list-style-type: square;
|
||||
list-style-type: none;
|
||||
position: relative;
|
||||
|
||||
&:before {
|
||||
content: '\2022';
|
||||
font-family: verdana;
|
||||
@include fontheight($small_text_size, $default_line_height);
|
||||
position: absolute;
|
||||
left: -20px;
|
||||
top: -1px;
|
||||
}
|
||||
}
|
||||
|
||||
ol {
|
||||
counter-reset: item;
|
||||
|
||||
li {
|
||||
@include fontheight($small_text_size, $default_line_height);
|
||||
list-style-type: none;
|
||||
position: relative;
|
||||
|
||||
&:before {
|
||||
content: counter(item) '. ';
|
||||
counter-increment: item;
|
||||
position: absolute;
|
||||
left: -20px;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
@for $n from 1 through 10 {
|
||||
&.value-#{$n}:before {
|
||||
content: '#{$n}. ';
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.with-callouts ol li {
|
||||
list-style-position: inside;
|
||||
margin-left: 0;
|
||||
|
||||
&:before {
|
||||
position: static;
|
||||
display: inline;
|
||||
left: 0;
|
||||
float: left;
|
||||
width: 17px;
|
||||
color: $ics_blue;
|
||||
font-weight: $boldweight;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* special list items */
|
||||
|
||||
li.no-bullet {
|
||||
list-style-type: none !important;
|
||||
}
|
||||
|
||||
#content li.with-icon {
|
||||
position: relative;
|
||||
margin-left: 40px;
|
||||
min-height: 30px;
|
||||
|
||||
p {
|
||||
margin-left: 0 !important;
|
||||
}
|
||||
|
||||
&:before {
|
||||
position: absolute;
|
||||
left: -40px;
|
||||
top: 0;
|
||||
content: '';
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
&.tablet:before {
|
||||
background-image: url(ico_phone_tablet.png);
|
||||
}
|
||||
|
||||
&.web:before {
|
||||
background-image: url(ico_web.png);
|
||||
}
|
||||
|
||||
&.checklist:before {
|
||||
background-image: url(ico_checklist.png);
|
||||
}
|
||||
|
||||
&.action:before {
|
||||
background-image: url(ico_action.png);
|
||||
}
|
||||
|
||||
&.use:before {
|
||||
background-image: url(ico_use.png);
|
||||
}
|
||||
}
|
||||
|
||||
/* figures and callouts */
|
||||
|
||||
.figure {
|
||||
position: relative;
|
||||
|
||||
&.pad-below {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.figure-callout {
|
||||
position: absolute;
|
||||
color: #fff;
|
||||
font-weight: $boldweight;
|
||||
@include fontheight($large_text_size, 23px);
|
||||
text-align: center;
|
||||
background: transparent url(callout.png) no-repeat scroll 50% 50%;
|
||||
padding-right: 2px;
|
||||
width: 30px;
|
||||
height: 29px;
|
||||
z-index: 1000;
|
||||
|
||||
&.top {
|
||||
top: -9px;
|
||||
}
|
||||
|
||||
&.right {
|
||||
right: -5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.figure-caption {
|
||||
margin: 0 10px 20px 10px;
|
||||
@include fontheight($small_text_size, $default_line_height);
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
/* rows of figures */
|
||||
|
||||
.figure-row {
|
||||
@include fontheight(0, 0); /* to prevent space between figures */
|
||||
|
||||
.figure {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.figure + .figure {
|
||||
margin-left: 10px; /* reintroduce space between figures */
|
||||
}
|
||||
}
|
||||
|
||||
/* video containers */
|
||||
|
||||
.framed-galaxynexus-land-span-13 {
|
||||
background: transparent url(content/misc_full_galaxynexus_blank_land_span13.png) no-repeat scroll top left;
|
||||
padding: 42px 122px 62px 126px;
|
||||
overflow: hidden;
|
||||
|
||||
&,
|
||||
& video,
|
||||
& img {
|
||||
width: 512px;
|
||||
height: 286px;
|
||||
}
|
||||
}
|
||||
|
||||
.framed-galaxynexus-port-span-9 {
|
||||
background: transparent url(content/misc_full_galaxynexus_blank_port_span9.png) no-repeat scroll top left;
|
||||
padding: 95px 122px 107px 124px;
|
||||
overflow: hidden;
|
||||
|
||||
&,
|
||||
& video,
|
||||
& img {
|
||||
width: 274px;
|
||||
height: 488px;
|
||||
}
|
||||
}
|
||||
|
||||
.framed-galaxynexus-port-span-5 {
|
||||
background: transparent url(content/misc_full_galaxynexus_blank_port_span5.png) no-repeat scroll top left;
|
||||
padding: 75px 31px 76px 33px;
|
||||
overflow: hidden;
|
||||
|
||||
&,
|
||||
& video,
|
||||
& img {
|
||||
width: 216px;
|
||||
height: 384px;
|
||||
}
|
||||
}
|
||||
|
||||
/* landing page disclosures */
|
||||
|
||||
.landing-page-link {
|
||||
text-decoration: none;
|
||||
font-weight: $boldweight;
|
||||
color: $text_color_dark;
|
||||
|
||||
&:after {
|
||||
@include disclosure(right);
|
||||
display: inline-block;
|
||||
margin-left: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
/* tooltips */
|
||||
|
||||
$tooltip_back_color: rgba(0,0,0,0.9);
|
||||
|
||||
.tooltip-box {
|
||||
position: absolute;
|
||||
background-color: $tooltip_back_color;
|
||||
border-radius: 2px;
|
||||
@include fontheight($small_text_size, $default_line_height);
|
||||
color: #fff;
|
||||
padding: 6px 10px;
|
||||
max-width: 250px;
|
||||
z-index: 10000;
|
||||
|
||||
&.below:after {
|
||||
position: absolute;
|
||||
content: '';
|
||||
line-height: 0;
|
||||
display: block;
|
||||
top: -10px;
|
||||
left: 5px;
|
||||
border: 5px solid transparent;
|
||||
border-bottom-color: $tooltip_back_color;
|
||||
}
|
||||
}
|
||||
|
||||
/* video note */
|
||||
|
||||
.video-instructions {
|
||||
margin-top: 10px;
|
||||
margin-bottom: 10px;
|
||||
|
||||
&:before {
|
||||
content: '';
|
||||
background: transparent url(ico_movie_inline.png) no-repeat scroll top left;
|
||||
display: inline-block;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
&:after {
|
||||
content: 'Click to replay movie.';
|
||||
}
|
||||
}
|
||||
|
||||
/* download buttons */
|
||||
|
||||
.download-button {
|
||||
display: block;
|
||||
margin-bottom: 5px;
|
||||
text-decoration: none;
|
||||
background-color: $ics_blue;
|
||||
color: #fff !important;
|
||||
font-weight: $boldweight;
|
||||
box-shadow: 0 1px 1px $lighter_shadow_color;
|
||||
padding: 6px 12px;
|
||||
border-radius: 2px;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: $ics_blue_dark;
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: $ics_blue_darkest;
|
||||
}
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 990 B |
Binary file not shown.
|
After Width: | Height: | Size: 989 B |
Binary file not shown.
|
After Width: | Height: | Size: 992 B |
Binary file not shown.
|
After Width: | Height: | Size: 977 B |
Binary file not shown.
|
After Width: | Height: | Size: 415 B |
Binary file not shown.
|
After Width: | Height: | Size: 318 B |
Binary file not shown.
|
After Width: | Height: | Size: 1.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 302 B |
Binary file not shown.
|
After Width: | Height: | Size: 437 B |
Binary file not shown.
|
After Width: | Height: | Size: 1.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 286 B |
Binary file not shown.
|
After Width: | Height: | Size: 980 B |
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,8 @@
|
|||
/*
|
||||
Copyright (c) 2010, Yahoo! Inc. All rights reserved.
|
||||
Code licensed under the BSD License:
|
||||
http://developer.yahoo.com/yui/license.html
|
||||
version: 3.3.0
|
||||
build: 3167
|
||||
*/
|
||||
html{color:#000;background:#FFF;}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0;}table{border-collapse:collapse;border-spacing:0;}fieldset,img{border:0;}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}li{list-style:none;}caption,th{text-align:left;}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}q:before,q:after{content:'';}abbr,acronym{border:0;font-variant:normal;}sup{vertical-align:text-top;}sub{vertical-align:text-bottom;}input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;}input,textarea,select{*font-size:100%;}legend{color:#000;}
|
||||
|
|
@ -35,6 +35,10 @@ def:guide_nav() ?>
|
|||
});
|
||||
</script>
|
||||
<?cs /def ?>
|
||||
<?cs
|
||||
def:design_nav() ?>
|
||||
<?cs include:"../../../../frameworks/base/docs/html/design/design_toc.cs" ?>
|
||||
<?cs /def ?>
|
||||
|
||||
<?cs # The default side navigation for the reference docs ?><?cs
|
||||
def:default_left_nav() ?>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,94 @@
|
|||
<!DOCTYPE html>
|
||||
<?cs include:"macros.cs" ?>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<title>
|
||||
Android Design<?cs if:page.title ?> - <?cs var:page.title ?><?cs /if ?>
|
||||
</title>
|
||||
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">
|
||||
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:regular,medium,thin,italic,mediumitalic">
|
||||
<link rel="stylesheet" href="<?cs var:toroot ?>assets/yui-3.3.0-reset-min.css">
|
||||
<link rel="stylesheet" href="<?cs var:toroot ?>assets/design/default.css">
|
||||
<script src="<?cs var:toroot ?>assets/jquery-1.6.2.min.js"></script>
|
||||
<script>var SITE_ROOT = '<?cs var:toroot ?>design';</script>
|
||||
<script src="<?cs var:toroot ?>assets/design/default.js"></script>
|
||||
</head>
|
||||
<body itemscope itemtype="http://schema.org/Article">
|
||||
|
||||
<div id="page-container">
|
||||
|
||||
<div id="page-header" itemscope itemtype="http://schema.org/WPHeader"><a href="<?cs var:toroot ?>design/index.html">Android Design</a></div>
|
||||
|
||||
<div id="main-row">
|
||||
|
||||
<div id="nav-container" itemscope itemtype="http://schema.org/SiteNavigationElement">
|
||||
|
||||
<?cs call:design_nav() ?>
|
||||
|
||||
</div>
|
||||
|
||||
<div id="content">
|
||||
|
||||
<?cs if:header.hide ?>
|
||||
<?cs else ?>
|
||||
<div class="layout-content-row content-header <?cs if:header.justLinks ?>just-links<?cs /if ?>">
|
||||
<div class="layout-content-col span-9">
|
||||
<?cs if:header.justLinks ?>
|
||||
<?cs elif:header.title ?><h2><?cs var:header.title ?></h2>
|
||||
<?cs else ?><h2><?cs var:page.title ?></h2>
|
||||
<?cs /if ?>
|
||||
</div>
|
||||
<div class="paging-links layout-content-col span-4" itemscope itemtype="http://schema.org/SiteNavigationElement">
|
||||
<a href="#" class="prev-page-link">Previous</a>
|
||||
<a href="#" class="next-page-link">Next</a>
|
||||
</div>
|
||||
</div>
|
||||
<?cs /if ?>
|
||||
|
||||
<?cs call:tag_list(root.descr) ?>
|
||||
|
||||
<?cs if:footer.hide ?>
|
||||
<?cs else ?>
|
||||
<div class="layout-content-row content-footer" itemscope itemtype="http://schema.org/SiteNavigationElement">
|
||||
<div class="paging-links layout-content-col span-9"> </div>
|
||||
<div class="paging-links layout-content-col span-4">
|
||||
<a href="#" class="prev-page-link">Previous</a>
|
||||
<a href="#" class="next-page-link">Next</a>
|
||||
</div>
|
||||
</div>
|
||||
<?cs /if ?>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div id="page-footer" itemscope itemtype="http://schema.org/WPFooter">
|
||||
|
||||
<p id="copyright">
|
||||
Except as noted, this content is licensed under
|
||||
<a href="http://creativecommons.org/licenses/by/2.5/">
|
||||
Creative Commons Attribution 2.5</a>.<br>
|
||||
For details and restrictions, see the
|
||||
<a href="http://developer.android.com/license.html">Content License</a>.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<a href="http://www.android.com/terms.html">Site Terms of Service</a> –
|
||||
<a href="http://www.android.com/privacy.html">Privacy Policy</a> –
|
||||
<a href="http://www.android.com/branding.html">Brand Guidelines</a>
|
||||
</p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript">
|
||||
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
|
||||
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
|
||||
</script>
|
||||
<script type="text/javascript">
|
||||
var pageTracker = _gat._getTracker("UA-5831155-1");
|
||||
pageTracker._trackPageview();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in New Issue