Doc change: remove scss file to fix build. (7cae0a41) · Commits · e / os / android_build

tools/droiddoc/templates-pdk/assets/design/default.scss

deleted100644 → 0

+0 −792

Original line number	Diff line number	Diff line
		/* 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