diff --git a/index.html b/index.html index a13276f06fdf..6069ad8e0164 100644 --- a/index.html +++ b/index.html @@ -1,888 +1,7545 @@ - - - - - Material Icons Index - + + + + Material icons listing - Google design - -

Material Icons

+ +
+
+
+ Material icons listing +
+
+
+ + + +
+
+ + + Next page +
+
+ + + + -

action

-

3d rotation
-

accessibility
-

account balance
-

account balance wallet
-

account box
-

account circle
-

add shopping cart
-

alarm
-

alarm add
-

alarm off
-

alarm on
-

android
-

announcement
-

aspect ratio
-

assessment
-

assignment
-

assignment ind
-

assignment late
-

assignment return
-

assignment returned
-

assignment turned in
-

autorenew
-

backup
-

book
-

bookmark
-

bookmark border
-

bug report
-

build
-

cached
-

camera enhance
-

card giftcard
-

card membership
-

card travel
-

change history
-

check circle
-

chrome reader mode
-

class
-

code
-

credit card
-

dashboard
-

delete
-

description
-

dns
-

done
-

done all
-

eject
-

event
-

event seat
-

exit to app
-

explore
-

extension
-

face
-

favorite
-

favorite border
-

feedback
-

find in page
-

find replace
-

flight land
-

flight takeoff
-

flip to back
-

flip to front
-

get app
-

gif
-

grade
-

group work
-

help
-

help outline
-

highlight off
-

history
-

home
-

hourglass empty
-

hourglass full
-

http
-

https
-

info
-

info outline
-

input
-

invert colors
-

label
-

label outline
-

language
-

launch
-

list
-

lock
-

lock open
-

lock outline
-

loyalty
-

markunread mailbox
-

note add
-

offline pin
-

open in browser
-

open in new
-

open with
-

pageview
-

payment
-

perm camera mic
-

perm contact calendar
-

perm data setting
-

perm device information
-

perm identity
-

perm media
-

perm phone msg
-

perm scan wifi
-

picture in picture
-

play for work
-

polymer
-

power settings new
-

print
-

query builder
-

question answer
-

receipt
-

redeem
-

reorder
-

report problem
-

restore
-

room
-

schedule
-

search
-

settings
-

settings applications
-

settings backup restore
-

settings bluetooth
-

settings brightness
-

settings cell
-

settings ethernet
-

settings input antenna
-

settings input component
-

settings input composite
-

settings input hdmi
-

settings input svideo
-

settings overscan
-

settings phone
-

settings power
-

settings remote
-

settings voice
-

shop
-

shop two
-

shopping basket
-

shopping cart
-

speaker notes
-

spellcheck
-

stars
-

store
-

subject
-

supervisor account
-

swap horiz
-

swap vert
-

swap vertical circle
-

system update alt
-

tab
-

tab unselected
-

theaters
-

thumb down
-

thumb up
-

thumbs up down
-

toc
-

today
-

toll
-

track changes
-

translate
-

trending down
-

trending flat
-

trending up
-

turned in
-

turned in not
-

verified user
-

view agenda
-

view array
-

view carousel
-

view column
-

view day
-

view headline
-

view list
-

view module
-

view quilt
-

view stream
-

view week
-

visibility
-

visibility off
-

work
-

youtube searched for
-

zoom in
-

zoom out
-

alert

-

add alert
-

error
-

error outline
-

warning
-

av

-

airplay
-

album
-

av timer
-

closed caption
-

equalizer
-

explicit
-

fast forward
-

fast rewind
-

forward 10
-

forward 30
-

forward 5
-

games
-

hd
-

hearing
-

high quality
-

library add
-

library books
-

library music
-

loop
-

mic
-

mic none
-

mic off
-

movie
-

new releases
-

not interested
-

pause
-

pause circle filled
-

pause circle outline
-

play arrow
-

play circle filled
-

play circle outline
-

playlist add
-

queue
-

queue music
-

radio
-

recent actors
-

repeat
-

repeat one
-

replay 10
-

replay
-

replay 30
-

replay 5
-

shuffle
-

skip next
-

skip previous
-

snooze
-

sort by alpha
-

stop
-

subtitles
-

surround sound
-

video library
-

videocam
-

videocam off
-

volume down
-

volume mute
-

volume off
-

volume up
-

web
-

communication

-

mail
-

business
-

call
-

call end
-

call made
-

call merge
-

call missed
-

call received
-

call split
-

chat
-

chat bubble
-

chat bubble outline
-

clear all
-

comment
-

contact phone
-

contacts
-

dialer sip
-

dialpad
-

email
-

forum
-

import export
-

invert colors off
-

live help
-

location off
-

location on
-

message
-

no sim
-

phone
-

phonelink erase
-

phonelink lock
-

phonelink ring
-

phonelink setup
-

portable wifi off
-

present to all
-

ring volume
-

speaker phone
-

stay current landscape
-

stay current portrait
-

stay primary landscape
-

stay primary portrait
-

swap calls
-

textsms
-

voicemail
-

vpn key
-

content

-

add
-

add box
-

add circle
-

add circle outline
-

archive
-

backspace
-

block
-

clear
-

content copy
-

content cut
-

content paste
-

create
-

drafts
-

filter list
-

flag
-

font download
-

forward
-

gesture
-

inbox
-

link
-

mail
-

markunread
-

redo
-

remove
-

remove circle
-

remove circle outline
-

reply
-

reply all
-

report
-

save
-

select all
-

send
-

sort
-

text format
-

undo
-

device

-

access alarm
-

access alarms
-

access time
-

add alarm
-

airplanemode active
-

airplanemode inactive
-

battery 20
-

battery 30
-

battery 50
-

battery 60
-

battery 80
-

battery 90
-

battery alert
-

battery charging 20
-

battery charging 30
-

battery charging 50
-

battery charging 60
-

battery charging 80
-

battery charging 90
-

battery charging full
-

battery full
-

battery std
-

battery unknown
-

bluetooth
-

bluetooth connected
-

bluetooth disabled
-

bluetooth searching
-

brightness auto
-

brightness high
-

brightness low
-

brightness medium
-

data usage
-

developer mode
-

devices
-

dvr
-

gps fixed
-

gps not fixed
-

gps off
-

graphic eq
-

location disabled
-

location searching
-

network cell
-

network wifi
-

nfc
-

screen lock landscape
-

screen lock portrait
-

screen lock rotation
-

screen rotation
-

sd storage
-

settings system daydream
-

signal cellular 0 bar
-

signal cellular 1 bar
-

signal cellular 2 bar
-

signal cellular 3 bar
-

signal cellular 4 bar
-

signal cellular connected no internet 0 bar
-

signal cellular connected no internet 1 bar
-

signal cellular connected no internet 2 bar
-

signal cellular connected no internet 3 bar
-

signal cellular connected no internet 4 bar
-

signal cellular no sim
-

signal cellular null
-

signal cellular off
-

signal wifi 0 bar
-

signal wifi 1 bar
-

signal wifi 1 bar lock
-

signal wifi 2 bar
-

signal wifi 2 bar lock
-

signal wifi 3 bar
-

signal wifi 3 bar lock
-

signal wifi 4 bar
-

signal wifi 4 bar lock
-

signal wifi off
-

signal wifi statusbar 1 bar
-

signal wifi statusbar 2 bar
-

signal wifi statusbar 3 bar
-

signal wifi statusbar 4 bar
-

signal wifi statusbar connected no internet 1
-

signal wifi statusbar connected no internet
-

signal wifi statusbar connected no internet 2
-

signal wifi statusbar connected no internet 3
-

signal wifi statusbar connected no internet 4
-

signal wifi statusbar not connected
-

signal wifi statusbar null
-

storage
-

usb
-

wallpaper
-

widgets
-

wifi lock
-

wifi tethering
-

editor

-

attach file
-

attach money
-

border all
-

border bottom
-

border clear
-

border color
-

border horizontal
-

border inner
-

border left
-

border outer
-

border right
-

border style
-

border top
-

border vertical
-

format align center
-

format align justify
-

format align left
-

format align right
-

format bold
-

format clear
-

format color fill
-

format color reset
-

format color text
-

format indent decrease
-

format indent increase
-

format italic
-

format line spacing
-

format list bulleted
-

format list numbered
-

format paint
-

format quote
-

format size
-

format strikethrough
-

format textdirection l to r
-

format textdirection r to l
-

format underlined
-

functions
-

insert chart
-

insert comment
-

insert drive file
-

insert emoticon
-

insert invitation
-

insert link
-

insert photo
-

merge type
-

mode comment
-

mode edit
-

money off
-

publish
-

space bar
-

strikethrough s
-

vertical align bottom
-

vertical align center
-

vertical align top
-

wrap text
-

file

-

attachment
-

cloud
-

cloud circle
-

cloud done
-

cloud download
-

cloud off
-

cloud queue
-

cloud upload
-

file download
-

file upload
-

folder
-

folder open
-

folder shared
-

hardware

-

cast
-

cast connected
-

computer
-

desktop mac
-

desktop windows
-

developer board
-

device hub
-

dock
-

gamepad
-

headset
-

headset mic
-

keyboard
-

keyboard arrow down
-

keyboard arrow left
-

keyboard arrow right
-

keyboard arrow up
-

keyboard backspace
-

keyboard capslock
-

keyboard hide
-

keyboard return
-

keyboard tab
-

keyboard voice
-

laptop
-

laptop chromebook
-

laptop mac
-

laptop windows
-

memory
-

mouse
-

phone android
-

phone iphone
-

phonelink
-

phonelink off
-

power input
-

router
-

scanner
-

security
-

sim card
-

smartphone
-

speaker
-

speaker group
-

tablet
-

tablet android
-

tablet mac
-

toys
-

tv
-

watch
-

image

-

add to photos
-

adjust
-

assistant
-

assistant photo
-

audiotrack
-

blur circular
-

blur linear
-

blur off
-

blur on
-

brightness 1
-

brightness 2
-

brightness 3
-

brightness 4
-

brightness 5
-

brightness 6
-

brightness 7
-

broken image
-

brush
-

camera
-

camera alt
-

camera front
-

camera rear
-

camera roll
-

center focus strong
-

center focus weak
-

collections
-

collections bookmark
-

color lens
-

colorize
-

compare
-

control point
-

control point duplicate
-

crop 16 9
-

crop
-

crop 3 2
-

crop 5 4
-

crop 7 5
-

crop din
-

crop free
-

crop landscape
-

crop original
-

crop portrait
-

crop square
-

dehaze
-

details
-

edit
-

exposure
-

exposure neg 1
-

exposure neg 2
-

exposure plus 1
-

exposure plus 2
-

exposure zero
-

filter 1
-

filter
-

filter 2
-

filter 3
-

filter 4
-

filter 5
-

filter 6
-

filter 7
-

filter 8
-

filter 9
-

filter 9 plus
-

filter b and w
-

filter center focus
-

filter drama
-

filter frames
-

filter hdr
-

filter none
-

filter tilt shift
-

filter vintage
-

flare
-

flash auto
-

flash off
-

flash on
-

flip
-

gradient
-

grain
-

grid off
-

grid on
-

hdr off
-

hdr on
-

hdr strong
-

hdr weak
-

healing
-

image
-

image aspect ratio
-

iso
-

landscape
-

leak add
-

leak remove
-

lens
-

looks
-

looks 3
-

looks 4
-

looks 5
-

looks 6
-

looks one
-

looks two
-

loupe
-

monochrome photos
-

movie creation
-

music note
-

nature
-

nature people
-

navigate before
-

navigate next
-

palette
-

panorama
-

panorama fish eye
-

panorama horizontal
-

panorama vertical
-

panorama wide angle
-

photo
-

photo album
-

photo camera
-

photo library
-

photo size select actual
-

photo size select large
-

photo size select small
-

picture as pdf
-

portrait
-

remove red eye
-

rotate 90 degrees ccw
-

rotate left
-

rotate right
-

slideshow
-

straighten
-

style
-

switch camera
-

switch video
-

tag faces
-

texture
-

timelapse
-

timer 10
-

timer
-

timer 3
-

timer off
-

tonality
-

transform
-

tune
-

view comfy
-

view compact
-

vignette
-

wb auto
-

wb cloudy
-

wb incandescent
-

wb iridescent
-

wb sunny
-

maps

-

beenhere
-

directions
-

directions bike
-

directions boat
-

directions bus
-

directions car
-

directions railway
-

directions run
-

directions subway
-

directions transit
-

directions walk
-

flight
-

hotel
-

layers
-

layers clear
-

local activity
-

local airport
-

local atm
-

local bar
-

local cafe
-

local car wash
-

local convenience store
-

local dining
-

local drink
-

local florist
-

local gas station
-

local grocery store
-

local hospital
-

local hotel
-

local laundry service
-

local library
-

local mall
-

local movies
-

local offer
-

local parking
-

local pharmacy
-

local phone
-

local pizza
-

local play
-

local post office
-

local printshop
-

local see
-

local shipping
-

local taxi
-

map
-

my location
-

navigation
-

person pin
-

pin drop
-

place
-

rate review
-

restaurant menu
-

satellite
-

store mall directory
-

terrain
-

traffic
-

navigation

-

apps
-

arrow back
-

arrow drop down
-

arrow drop down circle
-

arrow drop up
-

arrow forward
-

cancel
-

check
-

chevron left
-

chevron right
-

close
-

expand less
-

expand more
-

fullscreen
-

fullscreen exit
-

menu
-

more horiz
-

more vert
-

refresh
-

unfold less
-

unfold more
-

notification

-

adb
-

airline seat flat
-

airline seat flat angled
-

airline seat individual suite
-

airline seat legroom extra
-

airline seat legroom normal
-

airline seat legroom reduced
-

airline seat recline extra
-

airline seat recline normal
-

bluetooth audio
-

confirmation number
-

disc full
-

do not disturb
-

do not disturb alt
-

drive eta
-

event available
-

event busy
-

event note
-

folder special
-

live tv
-

mms
-

more
-

network locked
-

ondemand video
-

personal video
-

phone bluetooth speaker
-

phone forwarded
-

phone in talk
-

phone locked
-

phone missed
-

phone paused
-

power
-

sd card
-

sim card alert
-

sms
-

sms failed
-

sync
-

sync disabled
-

sync problem
-

system update
-

tap and play
-

time to leave
-

vibration
-

voice chat
-

vpn lock
-

wc
-

wifi
-

social

-

cake
-

domain
-

group
-

group add
-

location city
-

mood
-

mood bad
-

notifications
-

notifications active
-

notifications none
-

notifications off
-

notifications paused
-

pages
-

party mode
-

people
-

people outline
-

person
-

person add
-

person outline
-

plus one
-

poll
-

public
-

school
-

share
-

whatshot
-

toggle

-

check box
-

check box outline blank
-

indeterminate check box
-

radio button checked
-

radio button unchecked
-

star
-

star border
-

star half
- - + - diff --git a/www/css/material.css b/www/css/material.css new file mode 100644 index 000000000000..cc7cd402060f --- /dev/null +++ b/www/css/material.css @@ -0,0 +1,2347 @@ +/*! normalize.css v3.0.1 | MIT License | git.io/normalize */ +/** + * 1. Set default font family to sans-serif. + * 2. Prevent iOS text size adjust after orientation change, without disabling + * user zoom. + */ +html { + font-family: sans-serif; + /* 1 */ + -ms-text-size-adjust: 100%; + /* 2 */ + -webkit-text-size-adjust: 100%; + /* 2 */ } + +/** + * Remove default margin. + */ +body { + margin: 0; } + +/* HTML5 display definitions + ========================================================================== */ +/** + * Correct `block` display not defined for any HTML5 element in IE 8/9. + * Correct `block` display not defined for `details` or `summary` in IE 10/11 and Firefox. + * Correct `block` display not defined for `main` in IE 11. + */ +article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary { + display: block; } + +/** + * 1. Correct `inline-block` display not defined in IE 8/9. + * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera. + */ +audio, canvas, progress, video { + display: inline-block; + /* 1 */ + vertical-align: baseline; + /* 2 */ } + +/** + * Prevent modern browsers from displaying `audio` without controls. + * Remove excess height in iOS 5 devices. + */ +audio:not([controls]) { + display: none; + height: 0; } + +/** + * Address `[hidden]` styling not present in IE 8/9/10. + * Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22. + */ +[hidden], template { + display: none; } + +/* Links + ========================================================================== */ +/** + * Remove the gray background color from active links in IE 10. + */ +a { + background: transparent; } + +/** + * Improve readability when focused and also mouse hovered in all browsers. + */ +a:active, a:hover { + outline: 0; } + +/* Text-level semantics + ========================================================================== */ +/** + * Address styling not present in IE 8/9/10/11, Safari, and Chrome. + */ +abbr[title] { + border-bottom: 1px dotted; } + +/** + * Address style set to `bolder` in Firefox 4+, Safari, and Chrome. + */ +b, strong { + font-weight: bold; } + +/** + * Address styling not present in Safari and Chrome. + */ +dfn { + font-style: italic; } + +/** + * Address variable `h1` font-size and margin within `section` and `article` + * contexts in Firefox 4+, Safari, and Chrome. + */ +h1 { + font-size: 2em; + margin: 0.67em 0; } + +/** + * Address styling not present in IE 8/9. + */ +mark { + background: #ff0; + color: #000; } + +/** + * Address inconsistent and variable font size in all browsers. + */ +small { + font-size: 80%; } + +/** + * Prevent `sub` and `sup` affecting `line-height` in all browsers. + */ +sub, sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; } + +sup { + top: -0.5em; } + +sub { + bottom: -0.25em; } + +/* Embedded content + ========================================================================== */ +/** + * Remove border when inside `a` element in IE 8/9/10. + */ +img { + border: 0; } + +/** + * Correct overflow not hidden in IE 9/10/11. + */ +svg:not(:root) { + overflow: hidden; } + +/* Grouping content + ========================================================================== */ +/** + * Address margin not present in IE 8/9 and Safari. + */ +figure { + margin: 1em 40px; } + +/** + * Address differences between Firefox and other browsers. + */ +hr { + -moz-box-sizing: content-box; + box-sizing: content-box; + height: 0; } + +/** + * Contain overflow in all browsers. + */ +pre { + overflow: auto; } + +/** + * Address odd `em`-unit font size rendering in all browsers. + */ +code, kbd, pre, samp { + font-family: monospace, monospace; + font-size: 1em; } + +/* Forms + ========================================================================== */ +/** + * Known limitation: by default, Chrome and Safari on OS X allow very limited + * styling of `select`, unless a `border` property is set. + */ +/** + * 1. Correct color not being inherited. + * Known issue: affects color of disabled elements. + * 2. Correct font properties not being inherited. + * 3. Address margins set differently in Firefox 4+, Safari, and Chrome. + */ +button, input, optgroup, select, textarea { + color: inherit; + /* 1 */ + font: inherit; + /* 2 */ + margin: 0; + /* 3 */ } + +/** + * Address `overflow` set to `hidden` in IE 8/9/10/11. + */ +button { + overflow: visible; } + +/** + * Address inconsistent `text-transform` inheritance for `button` and `select`. + * All other form control elements do not inherit `text-transform` values. + * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera. + * Correct `select` style inheritance in Firefox. + */ +button, select { + text-transform: none; } + +/** + * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` + * and `video` controls. + * 2. Correct inability to style clickable `input` types in iOS. + * 3. Improve usability and consistency of cursor style between image-type + * `input` and others. + */ +button, html input[type="button"], input[type="reset"], input[type="submit"] { + -webkit-appearance: button; + /* 2 */ + cursor: pointer; + /* 3 */ } + +/** + * Re-set default cursor for disabled elements. + */ +button[disabled], html input[disabled] { + cursor: default; } + +/** + * Remove inner padding and border in Firefox 4+. + */ +button::-moz-focus-inner, input::-moz-focus-inner { + border: 0; + padding: 0; } + +/** + * Address Firefox 4+ setting `line-height` on `input` using `!important` in + * the UA stylesheet. + */ +input { + line-height: normal; } + +/** + * It's recommended that you don't attempt to style these elements. + * Firefox's implementation doesn't respect box-sizing, padding, or width. + * + * 1. Address box sizing set to `content-box` in IE 8/9/10. + * 2. Remove excess padding in IE 8/9/10. + */ +input[type="checkbox"], input[type="radio"] { + box-sizing: border-box; + /* 1 */ + padding: 0; + /* 2 */ } + +/** + * Fix the cursor style for Chrome's increment/decrement buttons. For certain + * `font-size` values of the `input`, it causes the cursor style of the + * decrement button to change from `default` to `text`. + */ +input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { + height: auto; } + +/** + * 1. Address `appearance` set to `searchfield` in Safari and Chrome. + * 2. Address `box-sizing` set to `border-box` in Safari and Chrome + * (include `-moz` to future-proof). + */ +input[type="search"] { + -webkit-appearance: textfield; + /* 1 */ + -moz-box-sizing: content-box; + -webkit-box-sizing: content-box; + /* 2 */ + box-sizing: content-box; } + +/** + * Remove inner padding and search cancel button in Safari and Chrome on OS X. + * Safari (but not Chrome) clips the cancel button when the search input has + * padding (and `textfield` appearance). + */ +input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { + -webkit-appearance: none; } + +/** + * Define consistent border, margin, and padding. + */ +fieldset { + border: 1px solid #c0c0c0; + margin: 0 2px; + padding: 0.35em 0.625em 0.75em; } + +/** + * 1. Correct `color` not being inherited in IE 8/9/10/11. + * 2. Remove padding so people aren't caught out if they zero out fieldsets. + */ +legend { + border: 0; + /* 1 */ + padding: 0; + /* 2 */ } + +/** + * Remove default vertical scrollbar in IE 8/9/10/11. + */ +textarea { + overflow: auto; } + +/** + * Don't inherit the `font-weight` (applied by a rule above). + * NOTE: the default cannot safely be changed in Chrome and Safari on OS X. + */ +optgroup { + font-weight: bold; } + +/* Tables + ========================================================================== */ +/** + * Remove most spacing between table cells. + */ +table { + border-collapse: collapse; + border-spacing: 0; } + +td, th { + padding: 0; } + +button, input[type="submit"] { + -webkit-font-smoothing: antialiased; + background-color: #477DCA; + border-radius: 0.1875em; + color: white; + display: inline-block; + font-size: 1em; + font-weight: bold; + line-height: 1; + padding: 0.75em 1em; + text-decoration: none; } + button:hover, input[type="submit"]:hover { + background-color: #2c5999; + color: white; } + button:disabled, input[type="submit"]:disabled { + cursor: not-allowed; + opacity: 0.5; } + +body { + -webkit-font-smoothing: antialiased; + background-color: white; + color: #333; + font-family: 'RobotoDraft', 'Roboto', 'Helvetica', sans-serif; + font-size: 1em; + line-height: 1em; } + +h1, h2, h3, h4, h5, h6 { + font-family: 'RobotoDraft', 'Roboto', 'Helvetica', sans-serif; + line-height: 1.25; + margin: 0; + text-rendering: optimizeLegibility; } + +h1 { + font-size: 2.25em; } + +h2 { + font-size: 2em; } + +h3 { + font-size: 1.75em; } + +h4 { + font-size: 1.5em; } + +h5 { + font-size: 1.25em; } + +h6 { + font-size: 1em; } + +p { + margin: 0 0 0.75em; } + +a { + -webkit-transition: color 0.1s linear; + -moz-transition: color 0.1s linear; + transition: color 0.1s linear; + color: #0277bb; + text-decoration: none; } + a:hover { + color: #01476f; } + a:active, a:focus { + color: #01476f; + outline: none; } + +hr { + border-bottom: 1px solid #DDD; + border-left: none; + border-right: none; + border-top: none; + margin: 1.5em 0; } + +img, picture { + margin: 0; + max-width: 100%; } + +blockquote { + border-left: 2px solid #DDD; + color: #595959; + margin: 1.5em 0; + padding-left: 0.75em; } + +cite { + color: #737373; + font-style: italic; } + cite:before { + content: "\2014 \00A0"; } + +fieldset { + background: #f7f7f7; + border: 1px solid #DDD; + margin: 0 0 0.75em 0; + padding: 1.5em; } + +input, label, select { + display: block; + font-family: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif; + font-size: 1em; } + +label { + font-weight: bold; + margin-bottom: 0.375em; } + label.required:after { + content: "*"; } + label abbr { + display: none; } + +textarea, input[type="email"], input[type="number"], input[type="password"], input[type="search"], input[type="tel"], input[type="text"], input[type="url"], input[type="color"], input[type="date"], input[type="datetime"], input[type="datetime-local"], input[type="month"], input[type="time"], input[type="week"], select[multiple=multiple] { + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; + -webkit-transition: border-color; + -moz-transition: border-color; + transition: border-color; + background-color: white; + border-radius: 3px; + border: 1px solid #DDD; + box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.06); + font-family: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif; + font-size: 1em; + margin-bottom: 0.75em; + padding: 0.5em 0.5em; + width: 100%; } + textarea:hover, input[type="email"]:hover, input[type="number"]:hover, input[type="password"]:hover, input[type="search"]:hover, input[type="tel"]:hover, input[type="text"]:hover, input[type="url"]:hover, input[type="color"]:hover, input[type="date"]:hover, input[type="datetime"]:hover, input[type="datetime-local"]:hover, input[type="month"]:hover, input[type="time"]:hover, input[type="week"]:hover, select[multiple=multiple]:hover { + border-color: #c4c4c4; } + textarea:focus, input[type="email"]:focus, input[type="number"]:focus, input[type="password"]:focus, input[type="search"]:focus, input[type="tel"]:focus, input[type="text"]:focus, input[type="url"]:focus, input[type="color"]:focus, input[type="date"]:focus, input[type="datetime"]:focus, input[type="datetime-local"]:focus, input[type="month"]:focus, input[type="time"]:focus, input[type="week"]:focus, select[multiple=multiple]:focus { + border-color: #477DCA; + box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.06), 0 0 5px rgba(55, 112, 192, 0.7); + outline: none; } + +textarea { + resize: vertical; } + +input[type="search"] { + -webkit-appearance: none; + -moz-appearance: none; + -ms-appearance: none; + -o-appearance: none; + appearance: none; } + +input[type="checkbox"], input[type="radio"] { + display: inline; + margin-right: 0.375em; } + +input[type="file"] { + padding-bottom: 0.75em; + width: 100%; } + +select { + margin-bottom: 1.5em; + max-width: 100%; + width: auto; } + +table { + border-collapse: collapse; + margin: 0.75em 0; + table-layout: fixed; + width: 100%; } + +th { + border-bottom: 1px solid #b7b7b7; + font-weight: bold; + padding: 0.75em 0; + text-align: left; } + +td { + border-bottom: 1px solid #DDD; + padding: 0.75em 0; } + +tr, td, th { + vertical-align: middle; } + +ul, ol { + margin: 0; + padding: 0; + list-style-type: none; } + +dl { + margin-bottom: 0.75em; } + dl dt { + font-weight: bold; + margin-top: 0.75em; } + dl dd { + margin: 0; } + +button, input[type="submit"] { + -webkit-appearance: none; + -moz-appearance: none; + -ms-appearance: none; + -o-appearance: none; + appearance: none; + border: none; + cursor: pointer; + user-select: none; + vertical-align: middle; + white-space: nowrap; } + +/* Neat 1.7.0 + * http://neat.bourbon.io + * Copyright 2012-2014 thoughtbot, inc. + * MIT License */ +html { + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; } + +*, *:before, *:after { + -webkit-box-sizing: inherit; + -moz-box-sizing: inherit; + box-sizing: inherit; } + +html { + font-family: 'RobotoDraft', 'Roboto', 'Helvetica', sans-serif; + overflow-x: hidden; } + html body { + background-color: #f9f9f9; + color: #212121; + -webkit-font-smoothing: antialiased; + -webkit-text-size-adjust: 100%; + text-rendering: optimizeLegibility; } + +:focus { + outline: none; } + +@media screen and (max-width: 1240px) { + ul, ol { + padding-left: 20px; } } + +h1 { + font-size: 34px; + font-weight: 400; + line-height: 40px; + margin-bottom: 30px; } + @media screen and (max-width: 820px) { + h1 { + font-size: 24px; + line-height: 32px; + margin-bottom: 42px; } } + @media screen and (max-width: 360px) { + h1 { + padding: 20px 16px 0 16px; } } + +h2 { + font-size: 24px; + font-weight: 400; + line-height: 32px; + margin-bottom: 30px; + overflow: hidden; + border-top: none; + padding-top: 48px; } + @media screen and (max-width: 820px) { + h2 { + border-top: 1px solid rgba(0, 0, 0, 0.12); + font-size: 20px; + line-height: 28px; + margin-bottom: 0px; + padding-bottom: 12px; + padding-top: 16px; } } + @media screen and (max-width: 360px) { + h2 { + margin-bottom: 0px; + padding: 15px 16px; } } + +h3, h4, h5 { + color: #212121; + font-weight: 500; + padding-top: 48px; + margin-bottom: 30px; } + @media screen and (max-width: 360px) { + h3, h4, h5 { + padding-left: 16px; + padding-right: 16px; } } + +h3 { + font-size: 20px; + line-height: 24px; } + @media screen and (max-width: 1240px) { + h3 { + font-size: 20px; + line-height: 24px; } } + +h4, h5 { + font-size: 13px; + font-weight: 700; + line-height: 24px; } + @media screen and (max-width: 1240px) { + h4, h5 { + font-size: 14px; } } + +h1, h2, h3, h4, h5, h6 { + clear: both; } + +ol, ul { + margin-bottom: 20px; + padding-left: 32px; } + +ul li { + list-style-type: disc; } + @media screen and (max-width: 1240px) { + ul li { + font-size: 13px; } } + +a { + color: #0277bb; } + +p { + margin-bottom: 20px; } + p:last-child { + margin-bottom: 0; } + @media screen and (max-width: 1240px) { + p { + font-size: 14px; } } + +h3, h4, h5, h6 { + font-size: inherit; + line-height: inherit; + margin-bottom: 20px; } + +video { + display: block; + height: auto; + width: 100%; } + +pre { + white-space: pre; + font-family: 'Roboto Mono', 'Menlo', monospace; } + +code { + font-family: 'Roboto Mono', 'Menlo', monospace; } + +pre, blockquote { + background-color: #fff; + padding: 16px 24px; } + +/* base styles */ +/* layout */ +.module-body, blockquote, pre { + border: none; + display: inline-block; + overflow: hidden; + margin-bottom: 30px; + width: 760px; + box-sizing: border-box; } + @media screen and (max-width: 1240px) { + .module-body, blockquote, pre { + width: 560px; } } + @media screen and (max-width: 820px) { + .module-body, blockquote, pre { + width: 360px; + margin-bottom: 40px; } } + @media screen and (max-width: 360px) { + .module-body, blockquote, pre { + width: 100%; + padding-left: 16px; + padding-right: 16px; } } + .module-body h4, blockquote h4, pre h4 { + margin-bottom: 0; } + +/* style */ +@media screen and (max-width: 1240px) { + .module-body { + font-size: 14px; } } + +/* layout */ +.figure-group { + width: 1160px; + margin-top: 16px; + display: block; } + .figure-group:after { + content: ""; + display: table; + clear: both; } + .figure-group figure { + width: 1160px; + float: left; + margin: 0; + margin-bottom: 24px; } + @media screen and (max-width: 1240px) { + .figure-group figure { + width: 760px; } } + @media screen and (max-width: 820px) { + .figure-group figure { + margin-bottom: 40px; } } + .figure-group figure figcaption { + color: #757575; + font-size: 13px; + line-height: 24px; + width: 560px; + box-sizing: border-box; } + @media screen and (max-width: 820px) { + .figure-group figure figcaption { + width: 360px; } } + @media screen and (max-width: 360px) { + .figure-group figure figcaption { + width: 100%; } } + .figure-group figure img { + display: block; + margin-bottom: 0; + width: 100%; } + .figure-group figure:last-child { + margin-bottom: 0; } + @media screen and (max-width: 820px) { + .figure-group figure:last-child { + margin-bottom: 24px; } } + .figure-group figure figure:last-of-type figcaption { + margin-bottom: 0; } + @media screen and (max-width: 1240px) { + .figure-group { + width: 760px; } } + +@media screen and (max-width: 1240px) { + .module_2_col { + margin-bottom: 40px; } } +@media screen and (max-width: 820px) { + .module_2_col { + margin-bottom: 40px; } } +.module_2_col .module-body { + width: 360px; + float: left; } + @media screen and (max-width: 1240px) { + .module_2_col .module-body { + padding-right: 0; + width: 560px; } } + @media screen and (max-width: 820px) { + .module_2_col .module-body { + padding-right: 0; + width: 360px; } } + @media screen and (max-width: 360px) { + .module_2_col .module-body { + padding-right: 0; + width: 100%; } } +.module_2_col .figure-group { + float: right; + margin-left: 40px; + width: 760px; + box-sizing: border-box; } + @media screen and (max-width: 1240px) { + .module_2_col .figure-group { + margin-left: 0; } } + @media screen and (max-width: 820px) { + .module_2_col .figure-group { + width: 360px; } } + .module_2_col .figure-group figure { + width: 760px; } + @media screen and (max-width: 820px) { + .module_2_col .figure-group figure { + width: 360px; } } + .module_2_col .figure-group figure img { + margin-bottom: 10px; } + .module_2_col .figure-group figure figcaption { + width: 560px; + margin-bottom: 50px; } + @media screen and (max-width: 820px) { + .module_2_col .figure-group figure figcaption { + margin-bottom: 60px; + width: 360px; } } + @media screen and (max-width: 360px) { + .module_2_col .figure-group figure figcaption { + width: 100%; } } + +.module_3_col .figure-group { + width: 1160px; } + .module_3_col .figure-group figure { + width: 360px; + margin-left: 40px; } + .module_3_col .figure-group figure img { + margin-bottom: 10px; } + .module_3_col .figure-group figure:first-child { + margin-left: 0; } + @media screen and (max-width: 1240px) { + .module_3_col .figure-group figure:last-child figcaption { + padding-bottom: 0; } } + .module_3_col .figure-group figure:nth-of-type(3n+1) { + clear: left; + margin-left: 0; } + .module_3_col .figure-group figure figcaption { + padding-top: 0; + width: 360px; } + @media screen and (max-width: 360px) { + .module_3_col .figure-group figure figcaption { + width: 100%; } } + @media screen and (max-width: 1240px) { + .module_3_col .figure-group figure:last-child { + margin-left: 0; } + .module_3_col .figure-group figure:nth-of-type(3n+1) { + clear: none; + margin-left: 40px; } + .module_3_col .figure-group figure:nth-of-type(2n+1) { + clear: left; + margin-left: 0; } + .module_3_col .figure-group figure:nth-of-type(2n) { + margin-left: 40px; } } + @media screen and (max-width: 820px) { + .module_3_col .figure-group figure { + margin-left: 0; } + .module_3_col .figure-group figure:nth-of-type(3n+1) { + margin-left: 0; } + .module_3_col .figure-group figure:nth-of-type(2n+1) { + margin-left: 0; } + .module_3_col .figure-group figure:nth-of-type(2n) { + margin-left: 0; } } + @media screen and (max-width: 1240px) { + .module_3_col .figure-group { + width: 760px; } } + +.module_3_col_text_image_image .module-body { + padding-right: 38px; } + @media screen and (max-width: 1240px) { + .module_3_col_text_image_image .module-body { + padding-right: 0; + width: 560px; } } + @media screen and (max-width: 820px) { + .module_3_col_text_image_image .module-body { + padding-right: 0; + width: 360px; } } + @media screen and (max-width: 360px) { + .module_3_col_text_image_image .module-body { + padding-right: 16px; + width: 100%; } } +.module_3_col_text_image_image div.figure-group { + width: 760px; + margin-left: 40px; } + @media screen and (max-width: 1240px) { + .module_3_col_text_image_image div.figure-group { + margin-left: 0; } } + .module_3_col_text_image_image div.figure-group figure { + margin-left: 40px; + width: 360px; } + .module_3_col_text_image_image div.figure-group figure:nth-child(2n+1) { + clear: left; + margin-left: 0; } + .module_3_col_text_image_image div.figure-group figure figcaption { + width: 360px; } + @media screen and (max-width: 360px) { + .module_3_col_text_image_image div.figure-group figure figcaption { + width: 100%; } } + @media screen and (max-width: 820px) { + .module_3_col_text_image_image div.figure-group figure { + margin-left: 0; } } + +.module_3_col_text_image_image .figure-group { + float: right; } + +.article-list .modulettes { + margin-top: -20px; } + +.article-list section .modulettes { + margin-top: 0; + margin-bottom: 20px; } + +h4.related { + margin-top: 0px; + margin-bottom: 32px; + color: #757575; + line-height: 24px; + font-size: 13px; + font-weight: 500; } + +/* +.module_1_col, +.module_2_col, +*/ +.module_3_col h4.related, .module_3_col_text_image_image h4.related { + margin-top: 48px; } + +.modulettes { + margin-bottom: 40px; + margin-top: 40px; + width: 360px; } + .modulettes .modulette { + display: block; + margin-bottom: 24px; } + .modulettes .modulette .icon { + float: left; + height: 24px; + margin: 0; + width: auto; } + .modulettes .modulette .download-icon { + opacity: 0.54; } + .modulettes .modulette .callout-icon { + opacity: 0.54; } + .modulettes .modulette .info { + font-size: 13px; + line-height: 24px; + margin-left: 40px; + padding-top: 1px; } + @media screen and (max-width: 1240px) { + .modulettes .modulette .info { + font-size: 14px; } } + .modulettes .modulette .info .subtitle { + color: #757575; } + .modulettes .modulette .info .title { + font-weight: 700; } + .modulettes .modulette.default, .modulettes .modulette.android, .modulettes .modulette.polymer { + background-color: #eee; + border: 1px solid #eee; + position: relative; } + .modulettes .modulette.default .icon, .modulettes .modulette.android .icon, .modulettes .modulette.polymer .icon { + position: absolute; + top: 50%; + margin-top: -12px; + left: 16px; } + .modulettes .modulette.default .info, .modulettes .modulette.android .info, .modulettes .modulette.polymer .info { + margin-left: 56px; + background-color: #fff; + padding: 24px; } + .modulettes .modulette.default .callout-icon { + opacity: 0.26; } + .modulettes .modulette.android .callout-icon, .modulettes .modulette.polymer .callout-icon { + opacity: 1; } + @media screen and (max-width: 360px) { + .modulettes { + width: 100%; } } + +table.tabular-table td { + vertical-align: top; + font-size: 13px; + border: none; + padding-right: 3%; } + +table.tabular-table td p { + margin-bottom: 16px !important; } + +table.tabular-table { + margin-bottom: 1em; } + +/* .module_1_col, */ +/* .module_2_col, */ +.module_3_col .figure-group, .module_3_col_text_image_image .figure-group { + float: left; + display: block; } + .module_3_col .figure-group:after, .module_3_col_text_image_image .figure-group:after { + content: ""; + display: table; + clear: both; } + .module_3_col .figure-group figure, .module_3_col_text_image_image .figure-group figure { + float: left; + margin: 0; + margin-bottom: 24px; } + .module_3_col .figure-group figure img, .module_3_col_text_image_image .figure-group figure img { + display: block; + margin-bottom: 0; + width: 100%; } + @media screen and (max-width: 820px) { + .module_3_col .figure-group figure, .module_3_col_text_image_image .figure-group figure { + margin-bottom: 40px; } } + .module_3_col .figure-group figure:last-child, .module_3_col_text_image_image .figure-group figure:last-child { + margin-bottom: 0; } + @media screen and (max-width: 820px) { + .module_3_col .figure-group figure:last-child, .module_3_col_text_image_image .figure-group figure:last-child { + margin-bottom: 24px; } } + .module_3_col .figure-group figure:last-of-type figcaption, .module_3_col_text_image_image .figure-group figure:last-of-type figcaption { + margin-bottom: 0; } + .module_3_col .figure-group figcaption, .module_3_col_text_image_image .figure-group figcaption { + color: #757575; + font-size: 13px; + line-height: 24px; + box-sizing: border-box; } + @media screen and (max-width: 820px) { + .module_3_col .figure-group figcaption, .module_3_col_text_image_image .figure-group figcaption { + font-size: 14px; + margin-bottom: 10px; } + .module_3_col .figure-group figcaption .caption-title, .module_3_col_text_image_image .figure-group figcaption .caption-title { + font-size: 13px; + font-weight: 500; + line-height: 24px; } + @media screen and (max-width: 1240px) { + .module_3_col .figure-group figcaption .caption-title, .module_3_col_text_image_image .figure-group figcaption .caption-title { + font-size: 14px; + line-height: 24px; } } + @media screen and (max-width: 820px) { + .module_3_col .figure-group figcaption .caption-title, .module_3_col_text_image_image .figure-group figcaption .caption-title { + font-size: 14px; } } + @media screen and (max-width: 820px) { + .module_3_col .figure-group figcaption, .module_3_col_text_image_image .figure-group figcaption { + width: 760px; } } + @media screen and (max-width: 360px) { + .module_3_col .figure-group figcaption, .module_3_col_text_image_image .figure-group figcaption { + padding-left: 16px; + padding-right: 16px; + width: 100%; } } } + @media screen and (max-width: 360px) { + .module_3_col .figure-group figcaption, .module_3_col_text_image_image .figure-group figcaption { + margin-bottom: 0; + padding: 0 16px; } } + .module_3_col .figure-group figcaption .caption-title, .module_3_col_text_image_image .figure-group figcaption .caption-title { + font-weight: 500; + margin-bottom: 20px; } + @media screen and (max-width: 820px) { + .module_3_col .figure-group figcaption .caption-title, .module_3_col_text_image_image .figure-group figcaption .caption-title { + font-size: 14px; } } + .module_3_col .figure-group figcaption .caption-title:last-child, .module_3_col_text_image_image .figure-group figcaption .caption-title:last-child { + margin-bottom: 0; } + .module_3_col .figure-group figcaption h3, .module_3_col_text_image_image .figure-group figcaption h3 { + margin-top: 40px; } + .module_3_col .figure-group figcaption p, .module_3_col_text_image_image .figure-group figcaption p { + margin-bottom: 20px; } + .module_3_col .figure-group figcaption p:last-child, .module_3_col_text_image_image .figure-group figcaption p:last-child { + margin-bottom: 0; } + +@media screen and (max-width: 820px) { + .figure-group figure { + width: 360px; } } +@media screen and (max-width: 360px) { + .figure-group figure { + width: 100%; } } +@media screen and (max-width: 820px) { + .figure-group { + width: 360px; } } +@media screen and (max-width: 360px) { + .figure-group { + width: 100%; } } + +/* + * In magazine terminology, this is the Intro, Deck, Standfirst or Kicker. + * + * This is the content paragraph right after a headline. + */ +.page-intro { + font-size: 20px; + line-height: 32px; + margin-bottom: 0; + padding: 0 38px 40px 0; + width: 960px; } + @media screen and (max-width: 1240px) { + .page-intro { + width: 760px; } } + @media screen and (max-width: 820px) { + .page-intro { + font-size: 20px; + padding-right: 0; + padding-bottom: 50px; + width: 360px; } } + @media screen and (max-width: 360px) { + .page-intro { + padding-right: 16px; + padding-left: 16px; + width: 100%; } } + .page-intro p, .page-intro ul { + margin: 0; + margin-bottom: 32px; } + .page-intro p:last-child, .page-intro ul:last-child { + margin-bottom: 0; } + .page-intro figure { + margin: 0; } + .page-intro figure img { + margin-bottom: 10px; } + .page-intro figure ol { + list-style-position: inside; } + .page-intro figure figcaption { + color: #757575; + font-size: 13px; + line-height: 24px; + margin-bottom: 50px; + box-sizing: border-box; } + @media screen and (max-width: 820px) { + .page-intro figure figcaption { + margin-bottom: 60px; } + .page-intro figure figcaption .caption-title { + font-size: 13px; + font-weight: 500; + line-height: 24px; } + @media screen and (max-width: 1240px) { + .page-intro figure figcaption .caption-title { + font-size: 14px; + line-height: 24px; } } + @media screen and (max-width: 820px) { + .page-intro figure figcaption { + width: 760px; } } + @media screen and (max-width: 360px) { + .page-intro figure figcaption { + padding-left: 16px; + padding-right: 16px; + width: 100%; } } } + @media screen and (max-width: 820px) { + .page-intro figure figcaption { + margin-bottom: 0; } } + .page-intro figure figcaption .caption-title { + font-weight: 500; + color: #212121; } + +body header { + background-color: #4285F4; } +body > nav button:focus { + outline: 1px solid rgba(255, 255, 255, 0.55); } +body > nav button:active { + outline: 0px; } +body h1, body h2 { + color: #4285F4; } +body .toc { + border-left-color: #C6DAFC; } +body a { + color: #4285F4; } +body .footer-text { + color: #fff; } + body .footer-text span { + color: rgba(255, 255, 255, 0.55); } + body .footer-text:focus { + outline: 1px solid rgba(255, 255, 255, 0.55); } +body.footer-L { + background-color: #4285F4; } +body.footer-R { + background-color: #4285F4; } +body .icon { + fill: #4285F4; } +body #side-nav nav a.nav_selected { + color: #4285F4; } + +.footer-L, .footer-R { + background-color: #03a9f4; } + +.page-black header { + background-color: #212121; } +.page-black > nav button:focus { + outline: 1px solid rgba(255, 255, 255, 0.55); } +.page-black > nav button:active { + outline: 0px; } +.page-black h1, .page-black h2 { + color: #212121; } +.page-black .toc { + border-left-color: #f5f5f5; } +.page-black a { + color: #212121; } +.page-black .footer-text { + color: #fff; } + .page-black .footer-text span { + color: rgba(255, 255, 255, 0.55); } + .page-black .footer-text:focus { + outline: 1px solid rgba(255, 255, 255, 0.55); } +.page-black.footer-L { + background-color: #212121; } +.page-black.footer-R { + background-color: #212121; } +.page-black .icon { + fill: #212121; } +.page-black #side-nav nav a.nav_selected { + color: #212121; } + +.page-cyan header { + background-color: #00bcd4; } +.page-cyan > nav button:focus { + outline: 1px solid rgba(255, 255, 255, 0.55); } +.page-cyan > nav button:active { + outline: 0px; } +.page-cyan h1, .page-cyan h2 { + color: #00bcd4; } +.page-cyan .toc { + border-left-color: #b2ebf2; } +.page-cyan a { + color: #00bcd4; } +.page-cyan .footer-text { + color: #fff; } + .page-cyan .footer-text span { + color: rgba(255, 255, 255, 0.55); } + .page-cyan .footer-text:focus { + outline: 1px solid rgba(255, 255, 255, 0.55); } +.page-cyan.footer-L { + background-color: #00bcd4; } +.page-cyan.footer-R { + background-color: #00bcd4; } +.page-cyan .icon { + fill: #00bcd4; } +.page-cyan #side-nav nav a.nav_selected { + color: #00bcd4; } + +.page-purple header { + background-color: #9c27b0; } +.page-purple > nav button:focus { + outline: 1px solid rgba(255, 255, 255, 0.55); } +.page-purple > nav button:active { + outline: 0px; } +.page-purple h1, .page-purple h2 { + color: #9c27b0; } +.page-purple .toc { + border-left-color: #e1bee7; } +.page-purple a { + color: #9c27b0; } +.page-purple .footer-text { + color: #fff; } + .page-purple .footer-text span { + color: rgba(255, 255, 255, 0.55); } + .page-purple .footer-text:focus { + outline: 1px solid rgba(255, 255, 255, 0.55); } +.page-purple.footer-L { + background-color: #9c27b0; } +.page-purple.footer-R { + background-color: #9c27b0; } +.page-purple .icon { + fill: #9c27b0; } +.page-purple #side-nav nav a.nav_selected { + color: #9c27b0; } + +.page-teal header { + background-color: #009688; } +.page-teal > nav button:focus { + outline: 1px solid rgba(0, 0, 0, 0.7); } +.page-teal > nav button:active { + outline: 0px; } +.page-teal h1, .page-teal h2 { + color: #009688; } +.page-teal .toc { + border-left-color: #b2dfdb; } +.page-teal a { + color: #009688; } +.page-teal .footer-text { + color: #fff; } + .page-teal .footer-text span { + color: rgba(0, 0, 0, 0.7); } + .page-teal .footer-text:focus { + outline: 1px solid rgba(0, 0, 0, 0.7); } +.page-teal.footer-L { + background-color: #009688; } +.page-teal.footer-R { + background-color: #009688; } +.page-teal .icon { + fill: #009688; } +.page-teal #side-nav nav a.nav_selected { + color: #009688; } + +.page-pink header { + background-color: #c2185b; } +.page-pink > nav button:focus { + outline: 1px solid rgba(255, 255, 255, 0.55); } +.page-pink > nav button:active { + outline: 0px; } +.page-pink h1, .page-pink h2 { + color: #c2185b; } +.page-pink .toc { + border-left-color: #f8bbd0; } +.page-pink a { + color: #c2185b; } +.page-pink .footer-text { + color: #fff; } + .page-pink .footer-text span { + color: rgba(255, 255, 255, 0.55); } + .page-pink .footer-text:focus { + outline: 1px solid rgba(255, 255, 255, 0.55); } +.page-pink.footer-L { + background-color: #c2185b; } +.page-pink.footer-R { + background-color: #c2185b; } +.page-pink .icon { + fill: #c2185b; } +.page-pink #side-nav nav a.nav_selected { + color: #c2185b; } + +.page-indigo header { + background-color: #3f51b5; } +.page-indigo > nav button:focus { + outline: 1px solid rgba(255, 255, 255, 0.55); } +.page-indigo > nav button:active { + outline: 0px; } +.page-indigo h1, .page-indigo h2 { + color: #3f51b5; } +.page-indigo .toc { + border-left-color: #c5cae9; } +.page-indigo a { + color: #3f51b5; } +.page-indigo .footer-text { + color: #fff; } + .page-indigo .footer-text span { + color: rgba(255, 255, 255, 0.55); } + .page-indigo .footer-text:focus { + outline: 1px solid rgba(255, 255, 255, 0.55); } +.page-indigo.footer-L { + background-color: #3f51b5; } +.page-indigo.footer-R { + background-color: #3f51b5; } +.page-indigo .icon { + fill: #3f51b5; } +.page-indigo #side-nav nav a.nav_selected { + color: #3f51b5; } + +.page-orange header { + background-color: #ff9800; } +.page-orange > nav button:focus { + outline: 1px solid rgba(0, 0, 0, 0.7); } +.page-orange > nav button:active { + outline: 0px; } +.page-orange h1, .page-orange h2 { + color: #ff9800; } +.page-orange .toc { + border-left-color: #ffe0b2; } +.page-orange a { + color: #ff9800; } +.page-orange .footer-text { + color: #fff; } + .page-orange .footer-text span { + color: rgba(0, 0, 0, 0.7); } + .page-orange .footer-text:focus { + outline: 1px solid rgba(0, 0, 0, 0.7); } +.page-orange.footer-L { + background-color: #ff9800; } +.page-orange.footer-R { + background-color: #ff9800; } +.page-orange .icon { + fill: #ff9800; } +.page-orange #side-nav nav a.nav_selected { + color: #ff9800; } + +.page-blue-grey header { + background-color: #455a64; } +.page-blue-grey > nav button:focus { + outline: 1px solid rgba(255, 255, 255, 0.55); } +.page-blue-grey > nav button:active { + outline: 0px; } +.page-blue-grey h1, .page-blue-grey h2 { + color: #455a64; } +.page-blue-grey .toc { + border-left-color: #cfd8dc; } +.page-blue-grey a { + color: #455a64; } +.page-blue-grey .footer-text { + color: #fff; } + .page-blue-grey .footer-text span { + color: rgba(255, 255, 255, 0.55); } + .page-blue-grey .footer-text:focus { + outline: 1px solid rgba(255, 255, 255, 0.55); } +.page-blue-grey.footer-L { + background-color: #455a64; } +.page-blue-grey.footer-R { + background-color: #455a64; } +.page-blue-grey .icon { + fill: #455a64; } +.page-blue-grey #side-nav nav a.nav_selected { + color: #455a64; } + +.page-light-blue header { + background-color: #03a9f4; } +.page-light-blue > nav button:focus { + outline: 1px solid rgba(255, 255, 255, 0.55); } +.page-light-blue > nav button:active { + outline: 0px; } +.page-light-blue h1, .page-light-blue h2 { + color: #03a9f4; } +.page-light-blue .toc { + border-left-color: #b3e5fc; } +.page-light-blue a { + color: #03a9f4; } +.page-light-blue .footer-text { + color: #fff; } + .page-light-blue .footer-text span { + color: rgba(255, 255, 255, 0.55); } + .page-light-blue .footer-text:focus { + outline: 1px solid rgba(255, 255, 255, 0.55); } +.page-light-blue.footer-L { + background-color: #03a9f4; } +.page-light-blue.footer-R { + background-color: #03a9f4; } +.page-light-blue .icon { + fill: #03a9f4; } +.page-light-blue #side-nav nav a.nav_selected { + color: #03a9f4; } + +.qp-ui-peekaboo-placeholder { + display: none; + visibility: hidden; } + .qp-ui-peekaboo-placeholder.qp-ui-peekaboo-active { + display: block; } + +.noninitial-chapter { + padding-top: 64px; } + @media screen and (max-width: 820px) { + .noninitial-chapter { + padding-top: 56px; } } + +header { + height: 256px; + padding: 115px 16px 0; } + @media screen and (max-width: 820px) { + header { + height: 128px; + padding-top: 48px; } } + @media screen and (max-width: 820px) { + header { + height: 128px; + padding-top: 64px; } } + .noninitial-chapter header, header.qp-ui-peekaboo.qp-ui-peekaboo-active { + box-shadow: 0 2px 5px rgba(0, 0, 0, 0.26); + left: 0; + right: 0; + top: -192px; + z-index: 1; + position: fixed; } + @media screen and (max-width: 820px) { + .noninitial-chapter header, header.qp-ui-peekaboo.qp-ui-peekaboo-active { + top: -72px; } } + +.header-wrapper { + -webkit-transition: padding-left 0.2s cubic-bezier(.4, 0, .2, 1); + -moz-transition: padding-left 0.2s cubic-bezier(.4, 0, .2, 1); + transition: padding-left 0.2s cubic-bezier(.4, 0, .2, 1); } + @media screen and (max-width: 1479px) { + .header-wrapper { + padding-left: 0; } } + .header-wrapper .header-title { + color: #fff; + font-size: 56px; + font-weight: 400; + line-height: 1.5; + margin: 0 auto; + overflow: hidden; + width: 1160px; + white-space: nowrap; } + @media screen and (max-width: 1240px) { + .header-wrapper .header-title { + width: 760px; } } + @media screen and (max-width: 820px) { + .header-wrapper .header-title { + font-size: 34px; + padding-right: 32px; + padding-left: 32px; + width: auto; } } + @media screen and (max-width: 360px) { + .header-wrapper .header-title { + font-size: 24px; + padding-right: 16px; + padding-left: 16px; } } + .header-wrapper .header-title span { + float: left; } + .header-wrapper .chapter-title { + display: none; } + .noninitial-chapter .header-wrapper, .header-wrapper.qp-ui-peekaboo.qp-ui-peekaboo-active { + height: 64px; + left: 72px; + right: 72px; + top: 0; + z-index: 2; + position: fixed; } + @media screen and (max-width: 820px) { + .noninitial-chapter .header-wrapper, .header-wrapper.qp-ui-peekaboo.qp-ui-peekaboo-active { + height: 56px; + left: 56px; + right: 56px; } } + .noninitial-chapter .header-wrapper .header-title, .header-wrapper.qp-ui-peekaboo.qp-ui-peekaboo-active .header-title { + font-size: 24px; + line-height: 64px; + width: 100%; } + @media screen and (max-width: 820px) { + .noninitial-chapter .header-wrapper .header-title, .header-wrapper.qp-ui-peekaboo.qp-ui-peekaboo-active .header-title { + font-size: 20px; + line-height: 56px; } } + @media screen and (max-width: 820px) { + .noninitial-chapter .header-wrapper .section-title, .header-wrapper.qp-ui-peekaboo.qp-ui-peekaboo-active .section-title { + display: none; } } + .header-wrapper #header-button-bar { + position: absolute; + height: 56px; + width: 100%; + top: 0; + left: 0; } + +footer { + clear: left; + height: 96px; + padding-left: 240px; + position: relative; + width: 100%; + z-index: 0; + -webkit-transition: padding-left 0.2s cubic-bezier(.4, 0, .2, 1); + -moz-transition: padding-left 0.2s cubic-bezier(.4, 0, .2, 1); + transition: padding-left 0.2s cubic-bezier(.4, 0, .2, 1); } + footer .footer-L { + height: 100%; + left: 0; + position: absolute; + top: 0; + width: 50.1%; + z-index: -1; + -webkit-transform: translateX(120px); + -moz-transform: translateX(120px); + -ms-transform: translateX(120px); + -o-transform: translateX(120px); + transform: translateX(120px); + -webkit-transition: -webkit-transform 0.2s cubic-bezier(.4, 0, .2, 1); + -moz-transition: -moz-transform 0.2s cubic-bezier(.4, 0, .2, 1); + transition: transform 0.2s cubic-bezier(.4, 0, .2, 1); } + @media screen and (max-width: 1479px) { + footer .footer-L { + -webkit-transform: translateX(0px); + -moz-transform: translateX(0px); + -ms-transform: translateX(0px); + -o-transform: translateX(0px); + transform: translateX(0px); } } + @media screen and (max-width: 820px) { + footer .footer-L { + height: 96px; + width: 56px; + z-index: 1; } } + footer .footer-R { + float: left; + height: 100%; + position: absolute; + right: 0; + top: 0; + width: 50%; + z-index: -1; + -webkit-transform: translateX(120px); + -moz-transform: translateX(120px); + -ms-transform: translateX(120px); + -o-transform: translateX(120px); + transform: translateX(120px); + -webkit-transition: -webkit-transform 0.2s cubic-bezier(.4, 0, .2, 1); + -moz-transition: -moz-transform 0.2s cubic-bezier(.4, 0, .2, 1); + transition: transform 0.2s cubic-bezier(.4, 0, .2, 1); } + @media screen and (max-width: 1479px) { + footer .footer-R { + -webkit-transform: translateX(0px); + -moz-transform: translateX(0px); + -ms-transform: translateX(0px); + -o-transform: translateX(0px); + transform: translateX(0px); } } + @media screen and (max-width: 820px) { + footer .footer-R { + height: 96px; + width: 100%; + z-index: 0; } } + footer .footer-grid { + height: 100%; + margin: auto; + width: 1160px; + z-index: 20; } + footer .footer-grid .footer-grid-L { + height: 100%; + float: left; + width: 50%; } + @media screen and (max-width: 820px) { + footer .footer-grid .footer-grid-L { + z-index: 1; } } + footer .footer-grid .footer-grid-L .footer-text { + display: inline-block; + font-size: 20px; + font-weight: 500; + -webkit-font-smoothing: antialiased; + height: 100%; + line-height: 24px; + padding-top: 24px; + width: 100%; } + footer .footer-grid .footer-grid-L .footer-text img { + float: left; + margin-right: 10px; + padding-top: 23px; + width: 24px; } + @media screen and (max-width: 820px) { + footer .footer-grid .footer-grid-L .footer-text img { + float: left; + margin-right: 10px; + width: 24px; } } + footer .footer-grid .footer-grid-L .footer-text span { + font-size: 15px; + line-height: 18px; + margin-bottom: 1px; } + @media screen and (max-width: 820px) { + footer .footer-grid .footer-grid-L .footer-text span { + display: none; } } + @media screen and (max-width: 820px) { + footer .footer-grid .footer-grid-L .footer-text div { + display: none; } } + @media screen and (max-width: 820px) { + footer .footer-grid .footer-grid-L { + left: 16px; + position: absolute; } } + footer .footer-grid .footer-grid-R { + height: 100%; + float: right; + text-align: right; + width: 50%; } + footer .footer-grid .footer-grid-R .footer-text { + display: inline-block; + font-size: 20px; + font-weight: 500; + -webkit-font-smoothing: antialiased; + height: 100%; + line-height: 24px; + padding-top: 24px; + width: 100%; } + footer .footer-grid .footer-grid-R .footer-text img { + float: right; + margin-left: 10px; + padding-top: 23px; + width: 24px; } + footer .footer-grid .footer-grid-R .footer-text span { + font-size: 15px; + line-height: 18px; + margin-bottom: 1px; } + @media screen and (max-width: 820px) { + footer .footer-grid .footer-grid-R { + position: absolute; + right: 10px; + width: 75%; } } + @media screen and (max-width: 1479px) { + footer .footer-grid { + width: 1160px; } } + @media screen and (max-width: 1240px) { + footer .footer-grid { + width: 760px; } } + @media screen and (max-width: 820px) { + footer .footer-grid { + position: relative; + width: 100%; } } + @media screen and (max-width: 360px) { + footer .footer-grid { + padding-right: 10px; + width: 100%; } } + @media screen and (max-width: 1479px) { + footer { + padding-left: 0; + z-index: 0; } } + @media screen and (max-width: 820px) { + footer { + height: 92px; } } + @media screen and (max-width: 360px) { + footer { + height: 80px; } } + +#side-nav { + border-right: 1px solid rgba(0, 0, 0, 0.14); + bottom: 0; + background: #fff; + color: #333; + display: block; + font-family: 'RobotoDraft', 'Roboto', 'Helvetica', sans-serif; + left: 0; + position: fixed; + top: 0; + width: 240px; + z-index: 4; + -webkit-transform: translateZ(0); + -moz-transform: translateZ(0); + -ms-transform: translateZ(0); + -o-transform: translateZ(0); + transform: translateZ(0); + -webkit-transform-style: preserve-3d; + -moz-transform-style: preserve-3d; + -ms-transform-style: preserve-3d; + -o-transform-style: preserve-3d; + transform-style: preserve-3d; + -webkit-transition-delay: 0.1s; + -moz-transition-delay: 0.1s; + transition-delay: 0.1s; + -webkit-transition-duration: 0.2s; + -moz-transition-duration: 0.2s; + transition-duration: 0.2s; + -webkit-transition-property: -webkit-transform; + -moz-transition-property: -moz-transform; + transition-property: transform; + -webkit-transition-timing-function: cubic-bezier(.4, 0, .2, 1); + -moz-transition-timing-function: cubic-bezier(.4, 0, .2, 1); + transition-timing-function: cubic-bezier(.4, 0, .2, 1); } + #side-nav nav { + font-size: 13px; + padding: 12px 0 10px 0; + -webkit-transform: translateZ(0); + -moz-transform: translateZ(0); + -ms-transform: translateZ(0); + -o-transform: translateZ(0); + transform: translateZ(0); } + #side-nav nav span { + cursor: pointer; + display: inline-block; + width: 100%; } + #side-nav nav a { + border-left: 2px solid transparent; + color: #333; + display: block; + font-weight: 400; + letter-spacing: 0.1px; + padding: 10px 24px 10px 46px; + white-space: nowrap; } + html.touch #side-nav nav a { + padding-top: 18px; + padding-bottom: 17px; } + #side-nav nav dl { + margin-top: 0; } + #side-nav nav dl dt { + border-left: 2px solid transparent; + color: #333; + font-weight: 700; + margin-top: 0; + padding: 15px 0 15px 22px; } + html.touch #side-nav nav dl dt { + padding-top: 18px; + padding-bottom: 17px; } + #side-nav nav dl dd { + color: #333; } + #side-nav nav dl dd .nav_selected { + font-weight: 500; + letter-spacing: 0.1px; } + #side-nav nav dt:focus, #side-nav nav a:focus { + background-color: #eee; + outline: 0; } + #side-nav .google-only { + display: none; + margin-left: 4px; } + #side-nav .google-only .desc { + font-size: 10px; + color: rgba(0, 0, 0, 0.45); } + #side-nav #logo { + border-bottom: 1px solid #e0e0e0; + display: block; + height: 64px; + margin: auto; + padding: 12px 24px 10px 24px; + position: relative; } + @media screen and (max-width: 820px) { + #side-nav #logo { + height: 56px; } } + #side-nav #logo img { + height: 40px; + width: 90px; } + @media screen and (max-width: 820px) { + #side-nav #logo img { + height: 35px; + width: 78.75px; } } + @media screen and (max-width: 1479px) { + #side-nav { + visibility: hidden; + -webkit-transform: translateX(-241px); + -moz-transform: translateX(-241px); + -ms-transform: translateX(-241px); + -o-transform: translateX(-241px); + transform: translateX(-241px); } } + #side-nav.qp-ui-side-nav-drawer-visible { + visibility: visible; + -webkit-transform: translateX(0); + -moz-transform: translateX(0); + -ms-transform: translateX(0); + -o-transform: translateX(0); + transform: translateX(0); } + +.side-nav-wrapper { + min-height: 100%; + padding-bottom: 96px; + position: relative; } + @media screen and (max-width: 820px) { + .side-nav-wrapper { + padding-bottom: 80px; } } + .side-nav-wrapper .legal { + border-top: 1px solid #e0e0e0; + bottom: 0; + color: #212121; + font-size: 13px; + height: 96px; + line-height: 24px; + padding: 24px; + position: absolute; + width: 100%; } + @media screen and (max-width: 820px) { + .side-nav-wrapper .legal { + height: 80px; + padding: 16px 24px; } } + .side-nav-wrapper .copyright { + margin: 0; } + +/* + * Overall container for the page content, after the header and before the footer. + */ +#page-container { + background: #f9f9f9; + float: left; + min-height: 100%; + padding-bottom: 100px; + width: 100%; + box-sizing: border-box; + color: #212121; + font-size: 13px; + -webkit-font-smoothing: antialiased; + letter-spacing: .1px; + line-height: 24px; + -webkit-transition: padding-left 0.2s cubic-bezier(.4, 0, .2, 1); + -moz-transition: padding-left 0.2s cubic-bezier(.4, 0, .2, 1); + transition: padding-left 0.2s cubic-bezier(.4, 0, .2, 1); } + @media screen and (max-width: 1479px) { + #page-container { + padding-left: 0; } } + @media screen and (max-width: 820px) { + #page-container { + padding-bottom: 0; } } + #page-container #page-inner-container { + margin: auto; + width: 1160px; + *zoom: 1; + padding-top: 80px; + font-family: 'RobotoDraft', 'Roboto', 'Helvetica', sans-serif; + -webkit-font-smoothing: antialiased; } + #page-container #page-inner-container:before { + content: " "; + display: table; } + #page-container #page-inner-container:after { + clear: both; + content: " "; + display: table; } + #page-container #page-inner-container > p { + width: 760px; } + @media screen and (max-width: 820px) { + #page-container #page-inner-container > p { + width: auto; } } + @media screen and (max-width: 1240px) { + #page-container #page-inner-container { + width: 760px; } } + @media screen and (max-width: 820px) { + #page-container #page-inner-container { + padding-right: 32px; + padding-left: 32px; + width: auto; + font-size: 20px; } } + @media screen and (max-width: 360px) { + #page-container #page-inner-container { + padding-top: 40px; + padding-right: 16px; + padding-left: 16px; } } + +.preview-bar { + background: #eee; + padding-top: 16px; + padding-bottom: 16px; + padding-left: 256px; + width: 100%; + -webkit-transition-property: padding-left; + -moz-transition-property: padding-left; + transition-property: padding-left; + -webkit-transition-duration: 0.2s; + -moz-transition-duration: 0.2s; + transition-duration: 0.2s; + -webkit-transition-timing-function: cubic-bezier(.4, 0, .2, 1); + -moz-transition-timing-function: cubic-bezier(.4, 0, .2, 1); + transition-timing-function: cubic-bezier(.4, 0, .2, 1); } + @media screen and (max-width: 1479px) { + .preview-bar { + padding-left: 0; } } + .preview-bar .preview-wrapper { + margin: auto; + width: 1160px; } + @media screen and (max-width: 1240px) { + .preview-bar .preview-wrapper { + width: 760px; } } + @media screen and (max-width: 820px) { + .preview-bar .preview-wrapper { + width: 360px; + font-size: 34px; } } + .preview-bar span { + color: #212121; + font-size: 13px; + font-family: 'RobotoDraft', 'Roboto', 'Helvetica', sans-serif; + line-height: 16px; } + @media screen and (max-width: 820px) { + .preview-bar span { + font-size: 13px; } } + +.toc { + border-left: 5px solid; + padding-left: 20px; } + .toc h1 { + font-size: 15px; + line-height: 16px; + padding-bottom: 12px; + margin-bottom: 0; + font-weight: 400; + color: #757575; } + .toc ul { + list-style: none; + list-style-type: none; + margin-top: 0; + padding-left: 0; } + .toc li { + font-size: 20px; + line-height: 40px; + list-style-type: none; } + .toc li:last-child { + line-height: 20px; + padding-top: 10px; } + +.qp-ui-mask-modal { + background-color: rgba(0, 0, 0, 0.5); + height: 100%; + left: 0; + opacity: 0.1; + top: 0; + visibility: hidden; + width: 100%; + z-index: 3; + position: fixed; + -webkit-transition: visibility 0 linear 0.4s, opacity 0.4s cubic-bezier(.4, 0, .2, 1); + -moz-transition: visibility 0 linear 0.4s, opacity 0.4s cubic-bezier(.4, 0, .2, 1); + transition: visibility 0 linear 0.4s, opacity 0.4s cubic-bezier(.4, 0, .2, 1); + -webkit-transform: translateZ(0); + -moz-transform: translateZ(0); + -ms-transform: translateZ(0); + -o-transform: translateZ(0); + transform: translateZ(0); } + .qp-ui-mask-modal.qp-ui-mask-visible { + opacity: 1; + visibility: visible; + -webkit-transition-delay: 0; + -moz-transition-delay: 0; + transition-delay: 0; } + +.qp-ui-mask-disable-scroll, .qp-ui-mask-disable-scroll body { + overflow: hidden; } + +.qp-ui-side-nav-drawer { + -webkit-overflow-scrolling: touch; + overflow-x: hidden; + overflow-y: auto; } + +.goog-zippy-header { + cursor: pointer; } + +.qp-ui-video-player video { + display: block; + height: auto; + width: 100%; } + +.qp-ui-video-player-mouse { + cursor: pointer; + position: relative; } + .qp-ui-video-player-mouse:before { + background: #000 url("//material-design.storage.googleapis.com/images/play.svg") no-repeat center center; + background-size: 72px 72px; + bottom: 0; + content: ''; + left: 0; + opacity: 0.5; + position: absolute; + right: 0; + top: 0; + -webkit-transition: opacity 0.2s cubic-bezier(.4, 0, .2, 1); + -moz-transition: opacity 0.2s cubic-bezier(.4, 0, .2, 1); + transition: opacity 0.2s cubic-bezier(.4, 0, .2, 1); } + @media screen and (max-width: 820px) { + .qp-ui-video-player-mouse:before { + background-size: 56px 56px; } } + .qp-ui-video-player-mouse.qp-ui-video-player-playing:before { + background-image: url("//material-design.storage.googleapis.com/images/pause.svg"); + opacity: 0; + -webkit-transition: opacity 0.2s cubic-bezier(.4, 0, .2, 1), background 0 ease 0.2s; + -moz-transition: opacity 0.2s cubic-bezier(.4, 0, .2, 1), background 0 ease 0.2s; + transition: opacity 0.2s cubic-bezier(.4, 0, .2, 1), background 0 ease 0.2s; } + .qp-ui-video-player-mouse.qp-ui-video-player-playing.qp-ui-video-player-hover:before { + opacity: .2; } + +.qp-ui-video-player-touch { + height: 0; + overflow: hidden; + position: relative; + padding-bottom: 36.84%; } + .qp-ui-video-player-touch video { + bottom: 0; + height: 101%; + left: 0; + margin: auto 0; + position: absolute; + right: 0; + top: 0; } + +.module_3_col_text_image_image .qp-ui-video-player-touch, .module_3_col .qp-ui-video-player-touch { + padding-bottom: 100%; } + +body.icons-docs { + font-family: Roboto, monospace; + font-size: 16px; + line-height: 28px; + color: rgba(0, 0, 0, 0.7); + /* icons listing */ } + body.icons-docs .material-icons.md-18 { + font-size: 18px; } + body.icons-docs .material-icons.md-24 { + font-size: 24px; } + body.icons-docs .material-icons.md-36 { + font-size: 36px; } + body.icons-docs .material-icons.md-48 { + font-size: 48px; } + body.icons-docs .material-icons.md-dark { + color: rgba(0, 0, 0, 0.54); } + body.icons-docs .material-icons.md-dark.md-inactive { + color: rgba(0, 0, 0, 0.26); } + body.icons-docs .material-icons.md-light { + color: white; } + body.icons-docs .material-icons.md-light.md-inactive { + color: rgba(255, 255, 255, 0.3); } + body.icons-docs .material-icons.orange600 { + color: #FB8C00; } + body.icons-docs #page-container #page-inner-container { + padding-top: 60px; } + @media screen and (max-width: 360px) { + body.icons-docs #page-container #page-inner-container { + padding-top: 24px; } } + body.icons-docs header { + background: #03a9f4; + font-family: 'Roboto', sans-serif; } + body.icons-docs .noninitial-chapter .header-wrapper, body.icons-docs .header-wrapper.qp-ui-peekaboo.qp-ui-peekaboo-active { + left: 32px; } + body.icons-docs h1, body.icons-docs a { + color: #03a9f4; } + body.icons-docs h1 { + font-size: 30px; } + @media screen and (max-width: 360px) { + body.icons-docs h1 { + font-size: 24px; } } + body.icons-docs h2 { + font-size: 24px; } + body.icons-docs h3 { + font-size: 16px; + font-weight: 500; } + body.icons-docs h2, body.icons-docs h3 { + color: #03a9f4; + padding-top: 24px; } + body.icons-docs pre { + font-family: 'Roboto Mono', monospace; + border: 1px solid #eee; } + body.icons-docs h1, body.icons-docs h2, body.icons-docs h3, body.icons-docs h4, body.icons-docs .header-wrapper .header-title { + max-width: 760px; } + body.icons-docs h1, body.icons-docs h2, body.icons-docs h3, body.icons-docs h4, body.icons-docs p { + margin: 0 auto 28px auto; } + @media screen and (max-width: 820px) { + body.icons-docs h1, body.icons-docs h2, body.icons-docs h3, body.icons-docs h4, body.icons-docs p { + margin-left: 16px; + margin-right: 16px; } } + @media screen and (max-width: 360px) { + body.icons-docs h1, body.icons-docs h2, body.icons-docs h3, body.icons-docs h4 { + margin-left: 0; + margin-right: 0; + margin-bottom: 8px; } } + body.icons-docs h1 { + padding-top: 24px; } + body.icons-docs p { + color: rgba(0, 0, 0, 0.7); + font-size: 16px; + line-height: 28px; } + @media screen and (max-width: 820px) { + body.icons-docs p { + font-size: 13px; + line-height: 20px; } } + body.icons-docs hr { + margin: 24px 0; + height: 64px; + display: block; } + body.icons-docs ul { + font-size: 16px; + line-height: 28px; } + @media screen and (max-width: 360px) { + body.icons-docs ul { + font-size: 13px; + line-height: 20px; } } + body.icons-docs ul, body.icons-docs table, body.icons-docs pre, body.icons-docs .icons-preview-code { + display: block; + width: 760px; + margin: 32px auto; } + @media screen and (max-width: 820px) { + body.icons-docs ul, body.icons-docs table, body.icons-docs pre, body.icons-docs .icons-preview-code { + width: auto; + margin: 40px 0 32px 0; + overflow-x: scroll; } } + @media screen and (max-width: 360px) { + body.icons-docs ul, body.icons-docs table, body.icons-docs pre, body.icons-docs .icons-preview-code { + width: 100%; + margin: 16px 0 16px 0; } } + body.icons-docs .img { + max-width: 840px; + margin: 40px auto 32px auto; + display: block; } + @media screen and (max-width: 360px) { + body.icons-docs .img { + margin: 40px 0 32px 0; + width: 100%; } } + body.icons-docs li, body.icons-docs ul { + color: rgba(0, 0, 0, 0.7); + font-size: 16px; + line-height: 28px; } + @media screen and (max-width: 360px) { + body.icons-docs li, body.icons-docs ul { + font-size: 13px; + line-height: 20px; } } + body.icons-docs code, body.icons-docs kbd, body.icons-docs pre, body.icons-docs samp { + font-size: 16px; + line-height: 28px; } + @media screen and (max-width: 820px) { + body.icons-docs code, body.icons-docs kbd, body.icons-docs pre, body.icons-docs samp { + font-size: 12px; + line-height: 18px; } } + body.icons-docs table { + background: white; + border: 1px solid #eee; + border-radius: 2px; + margin-bottom: 32px; + border-collapse: initial; } + body.icons-docs table thead { + font-size: 16px; + font-weight: 500; + color: rgba(0, 0, 0, 0.54); + line-height: 56px; } + @media screen and (max-width: 820px) { + body.icons-docs table thead { + font-size: 13px; + line-height: 20px; } } + body.icons-docs table tbody { + font-size: 16px; + line-height: 48px; + color: rgba(0, 0, 0, 0.87); } + @media screen and (max-width: 820px) { + body.icons-docs table tbody { + font-size: 13px; + line-height: 20px; } } + @media screen and (max-width: 820px) { + body.icons-docs table tbody td { + padding-top: 8px; + padding-bottom: 8px; } } + body.icons-docs th { + border: none; + border-bottom: 1px solid rgba(0, 0, 0, 0.12); } + body.icons-docs td, body.icons-docs th { + padding: 0 24px; } + body.icons-docs .toc { + border: none; + padding-left: 20px; } + body.icons-docs .toc h1 { + font-size: 16px; + line-height: 28px; + padding-bottom: 12px; + margin-bottom: 0; + font-weight: 400; + color: #757575; } + @media screen and (max-width: 360px) { + body.icons-docs .toc h1 { + margin-left: 8px; } } + body.icons-docs .toc ul { + list-style: none; + list-style-type: none; + margin-top: 0; + padding-left: 16px; + border-left: 5px solid #B3E5FC; } + body.icons-docs .toc li { + font-size: 16px; + line-height: 30px; + list-style-type: none; + padding: 0; } + body.icons-docs .toc li:last-child { + line-height: 30px; } + body.icons-docs footer { + display: -webkit-box; + /* OLD - iOS 6-, Safari 3.1-6 */ + display: -ms-flexbox; + /* TWEENER - IE 10 */ + display: -webkit-flex; + /* NEW - Chrome */ + display: flex; + /* NEW, Spec - Opera 12.1, Firefox 20+ */ + flex-flow: row; + -webkit-flex-flow: row; + height: 114px; + background: #eee; + font-size: 16px; } + @media screen and (max-width: 820px) { + body.icons-docs footer { + font-size: 13px; + height: 72px; } } + body.icons-docs footer .links { + flex: 1 1 0; + -webkit-flex: 1 1 0; + justify-content: flex-end; + -webkit-justify-content: flex-end; + text-align: right; + margin-top: 56px; + margin-bottom: 32px; + margin-right: 72px; } + @media screen and (max-width: 820px) { + body.icons-docs footer .links { + margin-top: 24px; + margin-bottom: 24px; + margin-right: 32px; } } + body.icons-docs footer .links .dot { + display: inline-block; + width: 24px; + text-align: center; } + @media screen and (max-width: 360px) { + body.icons-docs footer .links .dot { + width: 8px; } } + body.icons-docs footer .links a { + text-decoration: none; + color: black; + opacity: .54; } + body.icons-docs footer .links a:hover { + opacity: .8; } + body.icons-docs footer .logo { + flex: 0 1 auto; + -webkit-flex: 0 1 auto; + margin-top: 48px; + margin-left: 72px; } + @media screen and (max-width: 820px) { + body.icons-docs footer .logo { + margin-top: 24px; + margin-left: 32px; } } + body.icons-docs footer .google-logo { + width: 90px; + height: 36px; } + @media screen and (max-width: 820px) { + body.icons-docs footer .google-logo { + width: 60px; + height: 24px; } } + body.icons-docs .icons-preview-code { + display: -webkit-box; + /* OLD - iOS 6-, Safari 3.1-6 */ + display: -ms-flexbox; + /* TWEENER - IE 10 */ + display: -webkit-flex; + /* NEW - Chrome */ + display: flex; + /* NEW, Spec - Opera 12.1, Firefox 20+ */ + flex-flow: row; + -webkit-flex-flow: row; + border: 1px solid #f0f0f0; + padding: 0; + background-color: white; } + body.icons-docs .icons-preview-code .icons-preview { + display: -webkit-box; + /* OLD - iOS 6-, Safari 3.1-6 */ + display: -ms-flexbox; + /* TWEENER - IE 10 */ + display: -webkit-flex; + /* NEW - Chrome */ + display: flex; + /* NEW, Spec - Opera 12.1, Firefox 20+ */ + flex-flow: column; + -webkit-flex-flow: column; + flex: 0 1 auto; + -webkit-flex: 0 1 auto; + align-items: center; + -webkit-align-items: center; + background-color: #f9f9f9; + width: 128px; + padding: 16px; } + @media screen and (max-width: 820px) { + body.icons-docs .icons-preview-code .icons-preview { + width: 72px; + padding: 16px; } } + body.icons-docs .icons-preview-code .icons-preview i { + display: block; } + body.icons-docs .icons-preview-code .icons-code { + flex: 1 1 0; + -webkit-flex: 1 1 0; + background-color: white; + padding: 16px; } + body.icons-docs .icons-preview-code .icons-code pre, body.icons-docs .icons-preview-code .icons-code code { + margin: 0; + width: 100%; } + body.icons-docs .icons-preview-code .icon-caption { + font-size: 13px; + margin-top: 8px; } + @media screen and (max-width: 820px) { + body.icons-docs .icons-preview-code .icon-caption { + margin-top: 4px; + font-size: 11px; } } + body.icons-docs .icons-preview-code .icons-dark-bg { + background-color: #333; } + body.icons-docs .icons-preview-code .icons-dark-bg .icon-caption { + color: #fff; } + body.icons-docs .icon-list { + padding: 0; + margin-left: 0; + width: 1000px; + background-color: white; } + body.icons-docs .icon-list .icon-list-header { + padding-top: 16px; + padding-bottom: 16px; + border-bottom: 1px solid #ddd; + font-weight: 500; } + body.icons-docs .icon-list .icon-list-header .caption { + display: block; + text-align: center; + font-size: 11px; + width: 96px; } + body.icons-docs .icon-list .icon-list-item { + display: -webkit-box; + /* OLD - iOS 6-, Safari 3.1-6 */ + display: -ms-flexbox; + /* TWEENER - IE 10 */ + display: -webkit-flex; + /* NEW - Chrome */ + display: flex; + /* NEW, Spec - Opera 12.1, Firefox 20+ */ + list-style: none; + align-items: center; + -webkit-align-items: center; + padding-left: 24px; + border-bottom: 1px solid #f0f0f0; } + body.icons-docs .icon-list .icon-list-item img, body.icons-docs .icon-list .icon-list-item i.material-icons { + display: block; + box-sizing: border-box; + margin: 36px; + width: 24px; + height: 24px; } + body.icons-docs .icon-list .icon-list-item img.svg48, body.icons-docs .icon-list .icon-list-item img.png48, body.icons-docs .icon-list .icon-list-item i.md-48 { + display: block; + box-sizing: border-box; + width: 48px; + height: 48px; + margin: 24px; } + body.icons-docs .icon-list .icon-list-item .svg, body.icons-docs .icon-list .icon-list-item .png { + opacity: 0.7; } + body.icons-docs .icon-list .icon-list-item .icon-name { + flex: 1 1 0; + -webkit-flex: 1 1 0; + font-size: 11px; + padding-left: 16px; } + body.icons-docs .icon-list .icon-list-hidden { + display: none; } + body.icons-docs .crosshair.vertical { + position: absolute; + background-color: red; + opacity: 0.5; + height: 100%; + width: 1px; + user-select: none; + pointer-events: none; + top: 0; + left: 0; } + body.icons-docs .crosshair.horizontal { + position: absolute; + background-color: red; + opacity: 0.5; + height: 1px; + width: 100%; + user-select: none; + pointer-events: none; + top: 0; + left: 0; } diff --git a/www/images/google-logo.png b/www/images/google-logo.png new file mode 100644 index 000000000000..3c820f558983 Binary files /dev/null and b/www/images/google-logo.png differ