Merge "Doc change: clean up a few stray css files. These are moved to frameworks/base/docs/image_sources/*." into jb-dev-docs
This commit is contained in:
Dirk Dougherty
committed by
Android (Google) Code Review
Android (Google) Code Review
commit
a4375a19c6
@@ -1,30 +0,0 @@
|
|||||||
.slideshow-home {
|
|
||||||
height: 500px;
|
|
||||||
width: 940px;
|
|
||||||
border-bottom: 1px solid #CCC;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
.slideshow-home .frame {
|
|
||||||
width: 940px;
|
|
||||||
height: 500px;
|
|
||||||
}
|
|
||||||
.slideshow-home img {
|
|
||||||
max-width: 530px;
|
|
||||||
float: left;
|
|
||||||
}
|
|
||||||
.slideshow-home .content-right {
|
|
||||||
float: left;
|
|
||||||
margin-top: 80px;
|
|
||||||
}
|
|
||||||
.slideshow-home .item {
|
|
||||||
height: 500px;
|
|
||||||
width: 940px;
|
|
||||||
}
|
|
||||||
.home-sections ul li {
|
|
||||||
float: left;
|
|
||||||
display: block;
|
|
||||||
list-style: none;
|
|
||||||
width: 220px;
|
|
||||||
height: 35px;
|
|
||||||
border: 1px solid #F3F3F3;
|
|
||||||
}
|
|
||||||
@@ -1,70 +0,0 @@
|
|||||||
.slideshow-home {
|
|
||||||
height:500px;
|
|
||||||
width:940px;
|
|
||||||
border-bottom:1px solid #CCC;
|
|
||||||
position:relative;
|
|
||||||
margin: 0 10px 0 10px;
|
|
||||||
|
|
||||||
.frame {
|
|
||||||
width:940px;
|
|
||||||
height:500px;
|
|
||||||
}
|
|
||||||
.content-left {
|
|
||||||
float:left;
|
|
||||||
text-align:center;
|
|
||||||
vertical-align:center;
|
|
||||||
margin:0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.content-right {
|
|
||||||
float:left;
|
|
||||||
margin:70px 0 0 0;
|
|
||||||
|
|
||||||
p {
|
|
||||||
margin-bottom:30px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.item {
|
|
||||||
height:500px;
|
|
||||||
width:940px;
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
.home-sections {
|
|
||||||
padding:40px 0 40px 0;
|
|
||||||
margin: 20px 10px;
|
|
||||||
ul {
|
|
||||||
margin:0;
|
|
||||||
li {
|
|
||||||
float:left;
|
|
||||||
display:block;
|
|
||||||
list-style:none;
|
|
||||||
width:218px;
|
|
||||||
height:35px;
|
|
||||||
border:1px solid #DCDCDC;
|
|
||||||
background-color:#f3f3f3;
|
|
||||||
margin-right:20px;
|
|
||||||
|
|
||||||
a {
|
|
||||||
font-weight:bold;
|
|
||||||
margin-left:20px;
|
|
||||||
margin-top:8px;
|
|
||||||
line-height:18px;
|
|
||||||
float:left;
|
|
||||||
color:#444;
|
|
||||||
}
|
|
||||||
|
|
||||||
img {
|
|
||||||
float:left;
|
|
||||||
margin:-8px 0 0 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
li.last {
|
|
||||||
margin-right:0px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -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);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
Reference in New Issue
Block a user