| /* 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); |
| } |
| } |