Merge "Doc change: remove scss file to fix build."
This commit is contained in:
Dirk Dougherty
Android (Google) Code Review
commit
08a89cb253
1 changed files with 0 additions and 792 deletions
|
|
@ -1,792 +0,0 @@
|
|||
/* 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);
|
||||
}
|
||||
}
|
||||
Loading…
Reference in a new issue