diff options
| author | Robert Ly <robertly@google.com> | 2012-06-08 12:21:15 -0700 |
|---|---|---|
| committer | Android (Google) Code Review <android-gerrit@google.com> | 2012-08-15 15:33:46 -0700 |
| commit | fd1eb13b332cacea5389696c26dccd1a1bf4d515 (patch) | |
| tree | 55cea7c0a91dfe39d8859cfa2a0c443575871d2a /tools/droiddoc/templates-pdk/assets/design | |
| parent | e1402c5740c3820418aa25fc96095d2a5a835c99 (diff) | |
| download | build-fd1eb13b332cacea5389696c26dccd1a1bf4d515.zip build-fd1eb13b332cacea5389696c26dccd1a1bf4d515.tar.gz build-fd1eb13b332cacea5389696c26dccd1a1bf4d515.tar.bz2 | |
pdk templates for docs
Change-Id: Ic1f780c0a8b62bf6e989dc4e1876e24e4cb6c179
Diffstat (limited to 'tools/droiddoc/templates-pdk/assets/design')
19 files changed, 1656 insertions, 0 deletions
diff --git a/tools/droiddoc/templates-pdk/assets/design/callout.png b/tools/droiddoc/templates-pdk/assets/design/callout.png Binary files differnew file mode 100644 index 0000000..5d49f34 --- /dev/null +++ b/tools/droiddoc/templates-pdk/assets/design/callout.png diff --git a/tools/droiddoc/templates-pdk/assets/design/default.css b/tools/droiddoc/templates-pdk/assets/design/default.css new file mode 100644 index 0000000..c568424 --- /dev/null +++ b/tools/droiddoc/templates-pdk/assets/design/default.css @@ -0,0 +1,676 @@ +/* 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; */ + /* turned off ligatures due to bug 5945455 */ } + +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(device_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(device_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(device_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; } + +/* UI tables and other things found in Writing style and Settings pattern */ +.ui-table { + width: 100%; + background: #282828; + color: #fff; + border-radius: 2px; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25); + border-collapse: separate; } + .ui-table th, + .ui-table td { + padding: 5px 10px; } + .ui-table thead th { + font-weight: 600; } + .ui-table tfoot td { + border-top: 1px solid #494949; + border-right: 1px solid #494949; + text-align: center; } + .ui-table tfoot td:last-child { + border-right: 0; } + +.layout-with-list-item-margins { + margin-left: 30px !important; } + +.emulate-content-left-padding { + margin-left: 10px; } + +.do-dont-label { + margin-bottom: 10px; + padding-left: 20px; + background: transparent none no-repeat scroll 0px 3px; } + .do-dont-label.bad { + background-image: url(ico_wrong.png); } + .do-dont-label.good { + background-image: url(ico_good.png); } diff --git a/tools/droiddoc/templates-pdk/assets/design/default.js b/tools/droiddoc/templates-pdk/assets/design/default.js new file mode 100644 index 0000000..b306573 --- /dev/null +++ b/tools/droiddoc/templates-pdk/assets/design/default.js @@ -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; + } + }); +});
\ No newline at end of file diff --git a/tools/droiddoc/templates-pdk/assets/design/default.scss b/tools/droiddoc/templates-pdk/assets/design/default.scss new file mode 100644 index 0000000..d874ee5 --- /dev/null +++ b/tools/droiddoc/templates-pdk/assets/design/default.scss @@ -0,0 +1,792 @@ +/* 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; */ /* turned off ligatures due to bug 5945455 */ +} + +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(device_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(device_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(device_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; + } +} + +/* UI tables and other things found in Writing style and Settings pattern */ + +.ui-table { + width: 100%; + background: #282828; + color: #fff; + border-radius: 2px; + box-shadow: 0 2px 4px rgba(0,0,0,0.25); + border-collapse: separate; + + th, + td { + padding: 5px 10px; + } + + thead th { + font-weight: 600; + } + + tfoot td { + border-top: 1px solid #494949; + border-right: 1px solid #494949; + text-align: center; + + &:last-child { + border-right: 0; + } + } +} + +.layout-with-list-item-margins { + margin-left: 30px !important; +} + +.emulate-content-left-padding { + margin-left: 10px; +} + +.do-dont-label { + margin-bottom: 10px; + padding-left: 20px; + background: transparent none no-repeat scroll 0px 3px; + + &.bad { + background-image: url(ico_wrong.png); + } + + &.good { + background-image: url(ico_good.png); + } +}
\ No newline at end of file diff --git a/tools/droiddoc/templates-pdk/assets/design/device_galaxynexus_blank_land_span13.png b/tools/droiddoc/templates-pdk/assets/design/device_galaxynexus_blank_land_span13.png Binary files differnew file mode 100644 index 0000000..bab6aca --- /dev/null +++ b/tools/droiddoc/templates-pdk/assets/design/device_galaxynexus_blank_land_span13.png diff --git a/tools/droiddoc/templates-pdk/assets/design/device_galaxynexus_blank_port_span5.png b/tools/droiddoc/templates-pdk/assets/design/device_galaxynexus_blank_port_span5.png Binary files differnew file mode 100644 index 0000000..bdccc2f --- /dev/null +++ b/tools/droiddoc/templates-pdk/assets/design/device_galaxynexus_blank_port_span5.png diff --git a/tools/droiddoc/templates-pdk/assets/design/device_galaxynexus_blank_port_span9.png b/tools/droiddoc/templates-pdk/assets/design/device_galaxynexus_blank_port_span9.png Binary files differnew file mode 100644 index 0000000..5e0135b --- /dev/null +++ b/tools/droiddoc/templates-pdk/assets/design/device_galaxynexus_blank_port_span9.png diff --git a/tools/droiddoc/templates-pdk/assets/design/disclosure_down.png b/tools/droiddoc/templates-pdk/assets/design/disclosure_down.png Binary files differnew file mode 100644 index 0000000..4b3ff4d --- /dev/null +++ b/tools/droiddoc/templates-pdk/assets/design/disclosure_down.png diff --git a/tools/droiddoc/templates-pdk/assets/design/disclosure_left.png b/tools/droiddoc/templates-pdk/assets/design/disclosure_left.png Binary files differnew file mode 100644 index 0000000..607845e --- /dev/null +++ b/tools/droiddoc/templates-pdk/assets/design/disclosure_left.png diff --git a/tools/droiddoc/templates-pdk/assets/design/disclosure_right.png b/tools/droiddoc/templates-pdk/assets/design/disclosure_right.png Binary files differnew file mode 100644 index 0000000..f3bceb1 --- /dev/null +++ b/tools/droiddoc/templates-pdk/assets/design/disclosure_right.png diff --git a/tools/droiddoc/templates-pdk/assets/design/disclosure_up.png b/tools/droiddoc/templates-pdk/assets/design/disclosure_up.png Binary files differnew file mode 100644 index 0000000..5ff6d9d --- /dev/null +++ b/tools/droiddoc/templates-pdk/assets/design/disclosure_up.png diff --git a/tools/droiddoc/templates-pdk/assets/design/ico_action.png b/tools/droiddoc/templates-pdk/assets/design/ico_action.png Binary files differnew file mode 100644 index 0000000..30e4cc7 --- /dev/null +++ b/tools/droiddoc/templates-pdk/assets/design/ico_action.png diff --git a/tools/droiddoc/templates-pdk/assets/design/ico_good.png b/tools/droiddoc/templates-pdk/assets/design/ico_good.png Binary files differnew file mode 100644 index 0000000..afebe1c --- /dev/null +++ b/tools/droiddoc/templates-pdk/assets/design/ico_good.png diff --git a/tools/droiddoc/templates-pdk/assets/design/ico_movie_inline.png b/tools/droiddoc/templates-pdk/assets/design/ico_movie_inline.png Binary files differnew file mode 100644 index 0000000..7cfb5c5 --- /dev/null +++ b/tools/droiddoc/templates-pdk/assets/design/ico_movie_inline.png diff --git a/tools/droiddoc/templates-pdk/assets/design/ico_phone_tablet.png b/tools/droiddoc/templates-pdk/assets/design/ico_phone_tablet.png Binary files differnew file mode 100644 index 0000000..003b876 --- /dev/null +++ b/tools/droiddoc/templates-pdk/assets/design/ico_phone_tablet.png diff --git a/tools/droiddoc/templates-pdk/assets/design/ico_use.png b/tools/droiddoc/templates-pdk/assets/design/ico_use.png Binary files differnew file mode 100644 index 0000000..9d868b3 --- /dev/null +++ b/tools/droiddoc/templates-pdk/assets/design/ico_use.png diff --git a/tools/droiddoc/templates-pdk/assets/design/ico_web.png b/tools/droiddoc/templates-pdk/assets/design/ico_web.png Binary files differnew file mode 100644 index 0000000..0848e3c --- /dev/null +++ b/tools/droiddoc/templates-pdk/assets/design/ico_web.png diff --git a/tools/droiddoc/templates-pdk/assets/design/ico_wrong.png b/tools/droiddoc/templates-pdk/assets/design/ico_wrong.png Binary files differnew file mode 100644 index 0000000..b7d04ce --- /dev/null +++ b/tools/droiddoc/templates-pdk/assets/design/ico_wrong.png diff --git a/tools/droiddoc/templates-pdk/assets/design/open_new_page.png b/tools/droiddoc/templates-pdk/assets/design/open_new_page.png Binary files differnew file mode 100644 index 0000000..6197e3a --- /dev/null +++ b/tools/droiddoc/templates-pdk/assets/design/open_new_page.png |
