+++ /dev/null
-/* 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
OSDN Git Service
