diff options
Diffstat (limited to 'tools/droiddoc/templates-sdk/assets')
12 files changed, 4715 insertions, 2926 deletions
diff --git a/tools/droiddoc/templates-sdk/assets/css/default.css b/tools/droiddoc/templates-sdk/assets/css/default.css index cc4dce7..8513843 100644 --- a/tools/droiddoc/templates-sdk/assets/css/default.css +++ b/tools/droiddoc/templates-sdk/assets/css/default.css @@ -17,18 +17,32 @@ html, body { height: 100%; margin: 0; padding: 0; - background-color:#F9F9F9; + background-color: #fff; -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; /* prevent subpixel antialiasing, which thickens the text */ /* text-rendering: optimizeLegibility; */ /* turned off ligatures due to bug 5945455 */ } body { - color: #222; - font: 14px/19px Roboto, sans-serif; + color: #515151; + color: rgba(0, 0, 0, .68); + font: 14px/24px Roboto, sans-serif; font-weight: 400; letter-spacing:.1; - padding:0 10px; } + padding:0 20px; +} + +@media (max-width: 719px) { + html { + /* Disable accidental horizontal overflow. */ + overflow-x: hidden; + } + + body { + padding: 0 10px; + } +} #page-container { width: 940px; @@ -83,13 +97,8 @@ body { } #side-nav { - min-height:5px; /* silly way to avoid doc floating left when nav goes fixed */ - margin-bottom:1px; + padding-top: 20px; } -#devdoc-nav { - outline:none; - width:auto; - margin: 20px 0 0; } #devdoc-nav h2 { border:0; @@ -98,44 +107,249 @@ body { #devdoc-nav.fixed { position: fixed; margin:0; - top: 65px; /* sticky-header height + 20px gutter */ + top: 84px; /* sticky-header height + 20px gutter */ } -#devdoc-nav span.small { - font-size:12px; - font-weight:normal; +.dac-devdoc-toggle { + cursor: pointer; + padding: 8px 0; +} + +.scroll-pane { + /* Match height of fixed parent. */ + height: 100%; } #content { width: 760px; float: left; } -a:hover, -acronym:hover { - color: #7aa1b0 !important; } -a:focus, -a:active { - color: #33b5e5 !important; } +/***** PREVIOUSLY style.css ******************/ +/* This should be close to the top, so it is easier to override. */ +[dir='rtl'] { + direction: rtl; +} +html { + line-height: 20px; +} +pre, table, input, textarea, code { + font-size: 1em; +} +address, abbr, cite { + font-style: normal; +} +[dir='rtl'] th { + text-align: right; +} +html[lang^=ja] blockquote, html[lang^=ja] q, html[lang^=ko] blockquote, html[lang^=ko] q, +html[lang^=zh] blockquote, html[lang^=zh] q { + font-style: normal; +} +q { + font-style: italic; +} +fieldset, iframe, img { + border: 0; +} +img { + border: none; + -ms-interpolation-mode: bicubic; + max-width: 100%; + vertical-align: middle; +} +video { + max-width: 100%; + object-fit: cover; +} +q { + quotes: none; +} +sup, sub { + font-size: 11px; + line-height: 0; +} + +table, fieldset { + margin: 0; +} +/* Biggest type */ +.display-1 { + font-size: 56px; + line-height: 68px; +} +@media (max-width: 719px) { + .display-1 { + font-size: 44px; + line-height: 56px; + } +} +h1, h2, h3 { + color: #212121; + color: rgba(0, 0, 0, .87); +} +h1 { + font-size: 44px; + line-height: 56px; + margin: 24px 0 12px; + font-weight: 300; +} +h1.short { + margin-right:320px; +} +@media (max-width: 719px) { + h1 { + font-size: 36px; + line-height: 48px; + } +} +h2 { + font-size: 28px; + line-height: 32px; + margin: 24px 0 16px; + font-weight: 400; +} +h3 { + font-size: 24px; + line-height: 32px; + font-weight: 400; + margin: 16px 0; +} +h4 { + font-size: 18px; + line-height: 24px; + margin: 12px 0; + font-weight: 500; +} +h5, h6 { + font-size: 16px; + line-height: 24px; + margin: 8px 0; +} +hr { /* applied to the bottom of h2 elements */ + height: 1px; + margin: 7px 0 12px; + border: 0; + background: #e5e5e5; +} +p, pre, table, form { + margin: 0 0 12px; +} +small { + font-size: 11.5px; + color: #000; +} +ul, ol { + margin: 0 0 15px 20px; + padding: 0; +} +[dir='rtl'] ul, [dir='rtl'] ol { + margin: 10px 30px 10px 10px; +} +ul ul, ul ol, ol ul, ol ol { + margin-bottom: 0; + margin-top: 0; +} +li { + margin: 0 0 12px; +} +dt { + margin: 24px 0 12px; +} +dd { + margin:0 0 10px 40px; +} +dd p, +dd pre, +dd ul, +dd ol, +dd dl { + margin-top:10px; +} +li p, +li pre, +li ul, +li ol, +li dl { + margin-top: 6px; + margin-bottom: 6px; +} +dl dd dl:first-child { + margin-top: 0; +} +pre strong, pre b, a strong, a b, a code { + color: inherit; +} +pre, code { + color: #060; + font: 13px/18px Consolas, "Liberation Mono", Menlo, Courier, monospace; + -webkit-font-smoothing: subpixel-antialiased; + -moz-osx-font-smoothing: auto; +} +code { + background-color: #f7f7f7; + padding: 3px 5px; +} + +legend { + display: none; +} +a, .link-color { + color: #039BE5; + text-decoration: none; +} +a:focus, a:hover, a:active { + text-decoration: none; +} +a.white { + color: #fff; + text-decoration:underline; +} +a.white:hover, a.white:active { + color: #ccc !important; +} +strong, b { + font-weight: bold; +} +table { + border-collapse: collapse; + border-spacing: 0; + border:0; + margin: .5em 1em 1em 0; + width:100%; /* consistent table widths; within IE's quirks */ + background-color:#f7f7f7; +} +th, td { + padding: 4px 12px; + vertical-align: top; + text-align: left; +} +td { + background-color:inherit; + border:solid 1px #DDD; +} +td *:last-child { + margin-bottom:0; +} +th { + background-color: #999; + color: #fff; + border:solid 1px #DDD; + font-weight: normal; +} +tr:first-of-type th:first-of-type:empty { + visibility: hidden; +} a.external-link { background:url('../images/styles/open_new_page.png') no-repeat 100% 50%; padding-right:16px; } -img { - border: none; } #jd-content img { margin-bottom:15px; } -ul { - margin: 0; - padding: 0; } - -strong { - font-weight: 500; } - em { font-style: italic; } @@ -155,6 +369,7 @@ video.with-shadow { /* disclosures mixin */ /* content layout */ +/* This grid is deprecated in favor of .cols and .col-X */ .layout-content-row { display: inline-block; margin-bottom: 10px; } @@ -264,33 +479,32 @@ video.with-shadow { /* sublinks */ } #nav li { list-style-type: none; - font-size: 14px; + font-size: 12px; margin:0; padding:0; - line-height: 15px; } + line-height: 18px; } #nav a { - color: #555555; + color: #505050; text-decoration: none; word-wrap:break-word; } #nav .nav-section-header { position: relative; margin-bottom: 1px; padding: 0 30px 0 0; } - #nav li.selected a, #nav li.selected > .nav-section-header > a { - color: #09C; + #nav li.selected a { + color: #039BE5; } #nav li.selected ul li a { /* don't highlight child items */ - color: #555555; } + color: #505050; } #nav .nav-section .nav-section .nav-section-header { /* no white line between second level sections */ margin-bottom: 0; } /* section header links */ #nav > li > div > a { display: block; - color: #333333; - font-weight: 500; - padding: 10px 0 10px 10px; } + font-weight: 700; + padding: 13px 0 12px 10px; } #nav .nav-section-header:after { content: ''; background: transparent url(../images/styles/disclosure_down.png) no-repeat scroll 50% 50%; @@ -298,7 +512,7 @@ video.with-shadow { height: 34px; display: block; position: absolute; - top: 0; + top: 6px; right: 0; } #nav .nav-section-header.empty { padding:0; } @@ -312,22 +526,24 @@ video.with-shadow { #nav .nav-section li a { /* first gen child (2nd level li) */ display:block; - font-weight: normal; + font-weight: 700; text-transform: none; - padding: 7px 5px 7px 10px; + padding: 13px 5px 13px 10px; } #nav .nav-section li li a { /* second gen child (3rd level li) */ - padding: 5px 5px 5px 10px; + font-weight: 400; + padding: 7px 5px 7px 10px; } #nav li.expanded .nav-section-header { - background:#e9e9e9; - background: rgba(0, 0, 0, 0.05); } + background: #f0f0f0; } + #nav li.expanded .nav-section-header.empty { + background: none; } #nav li.expanded li .nav-section-header { - background: transparent; } + background: none; } #nav li.expanded li ul { /* 3rd level ul */ - padding:0 0 0 10px; + padding:6px 0 1px 20px; } #nav li.expanded > .nav-section-header:after { content: ''; @@ -394,16 +610,12 @@ video.with-shadow { padding-bottom:0; } #nav li.expanded ul > li { - background:#efefef; - background: rgba(0, 0, 0, 0.03); } + background:#f7f7f7; } #nav li.expanded ul > li li { background:inherit; } #nav li ul.tree-list-children ul { display:block; } -#nav.samples-nav li li li { - font-size:13px; -} #nav.samples-nav li li li a { padding-top:3px; padding-bottom:3px; @@ -423,25 +635,19 @@ video.with-shadow { /* content header */ .content-header { - height: 30px; - margin:36px 0 23px; /* same as h1 */ - padding:0 0 10px;} /* same as h1 */ + position: relative; +} +.content-header:before, +.content-header:after { + content: ''; + display: table; + /* Clear heading margins, to make absolutely positioned nav a bit more predictable. */ +} .content-header.just-links { margin-bottom:0; padding-bottom:0;} -.content-header h1 { - margin:0; - padding:0; - width: 700px; -} -.content-header > div:first-child { - height:1px; /* set fixed height for the header div to ensure the - next/prev links align with toc on training classes */ -} - .content-footer { - border-top: 1px solid #ccc; margin-top: 10px; padding-top:10px; width:100%; } @@ -453,7 +659,7 @@ video.with-shadow { margin-right:0; } .content-footer.wrap { - width:940px; + max-width:940px; } .content-footer .plus-container { margin:5px 0 0; @@ -467,7 +673,10 @@ a.back-link { } .content-header .paging-links { - margin-top:-25px; + position: absolute; + right: 0; + top: 8px; + width: 220px; } .paging-links { position: relative; @@ -476,9 +685,7 @@ a.back-link { position: absolute; } .paging-links a, .training-nav-top a { - color: #555555; - text-decoration: none; - text-transform: uppercase; } + text-decoration: none; } .paging-links .prev-page-link:before, .training-nav-top .prev-page-link:before, a.back-link:before { @@ -488,10 +695,6 @@ a.back-link { height: 10px; display: inline-block; margin-right: 5px; } - .training-nav-top .next-page-link, - .training-nav-top .start-class-link, - .training-nav-top .start-course-link { - right: 10px; } .paging-links .prev-page-link { left: -15px; } .paging-links .next-page-link { @@ -517,20 +720,25 @@ a.back-link { } .training-nav-top a { + border-bottom:0; + box-sizing: border-box; + color: inherit; display:block; float:left; - width:122px; - height:28px; - padding: 8px; - line-height:28px; + padding:10px 0; + line-height:30px; text-align:center; - border:1px solid #DADADA; - border-bottom:0; + width: 50%; + } + + .training-nav-top a.prev-page-link { + padding-left: 15px; + text-align: left; } .training-nav-top a.next-page-link { - border-left:0; - width:123px; + padding-right: 15px; + text-align: right; } .paging-links a.disabled, @@ -547,41 +755,57 @@ a.back-link { } .training-nav-top a.start-class-link, - .training-nav-top a.start-course-link { - width:262px; - } - + .training-nav-top a.start-course-link, .paging-links a.start-class-link { width:100%; } /* list of classes on course landing page */ ol.class-list { - list-style:none; - margin-left:0; + counter-reset: class; + list-style: none; + margin: 60px 0 0; } ol.class-list>li { - margin:0 0 15px; - padding:5px 0 0; - overflow:hidden; - border-top:1px solid #ccc; + box-shadow: 0px 2px 5px 0 rgba(0, 0, 0, 0.26); + margin: 0 0 20px; + overflow: hidden; } - ol.class-list li a.title { - font-size:16px; - margin:0; - clear:left; - display:block; - height:32px; - padding:0 4px; + ol.class-list .title { + background: #00bcd4; + color: #fff; + display: block; + font-size: 20px; + font-weight: 500; + height: 32px; + margin: 0; + padding: 52px 16px 12px; + position: relative; + } + ol.class-list .title:before { + border-bottom: 1px solid white; + box-sizing: border-box; + /* Disable the numbers for now, since vert few classes need to be taken in order. */ + /* content: counter(class); */ + counter-increment: class; + height: 40px; + left: 0; + padding: 10px 1px 0 5px; + position: absolute; + top: 0; + text-align: right; + min-width: 30px; } - ol.class-list li a.title h2 { - color:inherit; + ol.class-list .title h2 { + color: currentColor; + font-size: inherit; + font-weight: inherit; margin:0 0 10px; display:block; float:left; width:675px; } - ol.class-list li a.title span { + ol.class-list .title span { display:none; float:left; font-size:18px; @@ -590,40 +814,71 @@ a.back-link { width: 10px; height: 32px; } - ol.class-list li a.title:hover { - background:#ddd; - color:#258AAF !important; - } - ol.class-list li a.title:hover span { - display:block; - } - #jd-content - ol.class-list li img { - float:left; - clear:left; - width:64px; - margin:0 20px 0 0; - } - ol.class-list li p.description { + ol.class-list .description { + box-sizing: border-box; float:left; display:block; - width:250px; margin:0; + padding: 16px 10px 16px 16px; + width: 50%; } - ol.class-list li p.description.article { + ol.class-list .description.article { width: 550px; } ol.class-list ol { - float:left; - width:320px; - margin:0 0 0 30px; - list-style:none; - margin:0 0 0 20px; + box-sizing: border-box; + float: left; + list-style: none; + margin: 0; + padding: 16px 16px 16px 10px; + width: 50%; + } + ol.class-list .lessons li { + margin: 0 0 6px; + line-height: 16px; + } + + /* Class colors */ + ol.class-list li:nth-child(10n+1) .title { + background: #00bcd4; + } + ol.class-list li:nth-child(10n+2) .title { + background: #4db6ac; + } + ol.class-list li:nth-child(10n+3) .title { + background: #66bb6a; + } + ol.class-list li:nth-child(10n+4) .title { + background: #7cb342; + } + ol.class-list li:nth-child(10n+5) .title { + background: #afb42b; + } + ol.class-list li:nth-child(10n+6) .title { + background: #ffb300; + } + ol.class-list li:nth-child(10n+7) .title { + background: #ff7043; + } + ol.class-list li:nth-child(10n+8) .title { + background: #ec407a; + } + ol.class-list li:nth-child(10n+9) .title { + background: #ab47bc; } - ol.class-list div.lessons li { - margin:0 0 6px; - line-height:16px; + ol.class-list li:nth-child(10n+10) .title { + background: #7e57c2; + } + + @media (max-width: 719px) { + ol.class-list ol, + ol.class-list .description { + float: none; + margin: 16px; + padding: 0; + width: auto; + } } @@ -669,7 +924,7 @@ ul#title-tabs li a { } ul#title-tabs li a:hover, ul#title-tabs li a:active { - color:#93C !important; + color:#039BE5 !important; } @@ -1071,233 +1326,6 @@ scroll top left; - - - - - - - - - - - - - - - -/***** PREVIOUSLY style.css ******************/ - - - - - -@media screen, projection, print { -[dir='rtl'] { - direction: rtl; -} -html { - line-height: 20px; -} -pre, table, input, textarea, code { - font-size: 1em; -} -address, abbr, cite { - font-style: normal; -} -[dir='rtl'] th { - text-align: right; -} -html[lang^=ja] blockquote, html[lang^=ja] q, html[lang^=ko] blockquote, html[lang^=ko] q, -html[lang^=zh] blockquote, html[lang^=zh] q { - font-style: normal; -} -q { - font-style: italic; -} -fieldset, iframe, img { - border: 0; -} -img { - -ms-interpolation-mode: bicubic; - vertical-align: middle; - max-width: 100%; -} -q { - quotes: none; -} -sup, sub { - font-size: 11px; - line-height: 0; -} -} - -@media screen, projection { - -table, fieldset { - margin: 0; -} -h1 { - color:#333; - font-size: 34px; - margin: 36px 0 27px; - padding:0 0 10px; - font-weight:300; -} -h1, h2 { - line-height: 30px; -} -h1.short { - margin-right:320px; -} -h1.short { - margin-right:320px; -} -h1.super { - font-size: 37px; -} -h2 { - color:#333; - font-size: 26px; - margin: 32px 0 20px; - padding:0; - font-weight:300; -} -h3 { - color:#333; - font-size: 21px; - font-weight:400; - margin:21px 0 14px 0; -} -h3, h4 { - line-height: 21px; -} -h4 { - font-size: 18px; - margin: 12px 0; - font-weight:500; -} -h5 { - font-size: 14px; -} -h5, h6 { - margin: 5px 0; -} -h6 { - font-size: 12px; -} -hr { /* applied to the bottom of h2 elements */ - height: 1px; - margin: 3px 0 12px; - border: 0; - background: #ccc; -} -p, pre, table, form { - margin: 0 0 15px; -} -small { - font-size: 11.5px; - color: #000; -} -ul, ol { - margin: 0 0 15px 18px; - padding: 0; -} -[dir='rtl'] ul, [dir='rtl'] ol { - margin: 10px 30px 10px 10px; -} -ul ul, ul ol, ol ul, ol ol { - margin-bottom: 0; - margin-top: 0; -} -li { - margin:0 0 5px; -} -dd { - margin:0 0 10px 30px; -} -dd p, -dd pre, -dd ul, -dd ol, -dd dl { - margin-top:10px; -} -li p, -li pre, -li ul, -li ol, -li dl { - margin-top:5px; - margin-bottom:5px; -} -dl dd dl:first-child { - margin-top:0; -} -pre strong, pre b, a strong, a b, a code { - color: inherit; -} -pre, code { - color: #060; - font: 13px/1.5 monospace; -} -code { - font-weight:bold; - font: 13px/14px monospace; -} - -legend { - display: none; -} -a:link, a:visited, .link-color { - color: #258aaf; - text-decoration: none; -} -a:focus, a:hover, a:active { - color: #33B5E5; - text-decoration: none; -} -a.white { - color: #fff; - text-decoration:underline; -} -a.white:hover, a.white:active { - color: #ccc !important; -} -strong, b { - font-weight:bold; - color: #222; -} -table { - border-collapse: collapse; - border-spacing: 0; - border:0; - margin: .5em 1em 1em 0; - width:100%; /* consistent table widths; within IE's quirks */ - background-color:#f7f7f7; -} -th, td { - padding: 4px 12px; - vertical-align: top; - text-align: left; -} -td { - background-color:inherit; - border:solid 1px #DDD; -} -td *:last-child { - margin-bottom:0; -} -th { - background-color: #999; - color: #fff; - border:solid 1px #DDD; - font-weight: normal; -} -tr:first-of-type th:first-of-type:empty { - visibility: hidden; -} - /* -------------------------------------------------------------------------- Footer */ @@ -1468,430 +1496,23 @@ color-stop(50%, #acbc00), color-stop(50%, #bdde00), color-stop(100%, #bdde00)); } /* ============================================================================= - Columns - ========================================================================== */ - -@media screen, projection, print { -.full { - padding: 2.5em 0; - border-top: solid 1px #ddd; - border-bottom: solid 1px #ddd; - background: #f7f7f7; -} -.wrap { - margin: 0 auto; - width: 940px; - clear: both; -} -.cols { - height: 1%; - margin: 0 -1.533742331288343558282%; - width: 103.06748466257669%} -*+html .cols { - margin-bottom: 20px; -} -.cols:after { - clear: both; - content: ' '; - display: block; - height: 0; - visibility: hidden; -} -.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, -.col-13, .col-14, .col-15, .col-16 { - display: inline; - float: left; - margin-left: 10px; - margin-right: 10px; -} -/* -* html .col-1, * html .col-2, * html .col-3, * html .col-4, * html .col-5, * html .col-6, * html -.col-7, * html .col-8, * html .col-9, * html .col-10, * html .col-11, * html .col-12 { - margin: 0; - padding: 0 1.4% 20px; -} -[dir='rtl'] .col-1, [dir='rtl'] .col-2, [dir='rtl'] .col-3, [dir='rtl'] .col-4, [dir='rtl'] .col-5, -[dir='rtl'] .col-6, [dir='rtl'] .col-7, [dir='rtl'] .col-8, [dir='rtl'] .col-9, [dir='rtl'] .col-10, -[dir='rtl'] .col-11, [dir='rtl'] .col-12 { - float: right; -} -*/ -.col-1 { width: 40px } -.col-2 { width: 100px } -.col-3 { width: 160px } -.col-4 { width: 220px } -.col-5 { width: 280px } -.col-6 { width: 340px } -.col-7 { width: 400px } -.col-8 { width: 460px } -.col-9 { width: 520px } -.col-10 { width: 580px } -.col-11 { width: 640px } -.col-12 { width: 700px } -.col-13 { width: 760px } -.col-14 { width: 820px } -.col-15 { width: 880px } -.col-16 { width: 940px } -} - -.col-right { - margin-right:0px; -} - -@media screen and (max-width:772px) { -.col-5, .col-6, .col-7 { - clear: both; - width: 97.0238096%} -} - -/* ============================================================================= Layout ========================================================================== */ @media screen, projection, print { -/* -------------------------------------------------------------------------- -Header, Login, Nav-X, Search -*/ -#header { - margin: 0; - padding: 0; -} -#header:before, #header:after { - content: ""; - display: table; - clear: both -} -.logo, .nav-x { - float: left; -} -.nav-x { - margin-top: -2px; - list-style-type: none; -} -.nav-x a { - color: #333; - font-size: 16px; -} -.about a.selected { - color: #9933CC; -} -.design a.selected { - color: #33b5e5; -} -.develop a.selected { - color: #F80; -} -.distribute a.selected { - color: #9C0; -} - - - -.nav-x li { - display: inline; - margin-right: 45px; -} -.search { - float: right; - position: relative; - width: 220px -} -.search .bottom, .search .left, .search .right { - position: absolute; - background-color: #a3a3a3; -} -.search .bottom { - width: 220px; - height: 1px; - top: 24px; - left: 0 -} -.search .left, .search .right { - height: 5px; - width: 1px -} -.search .left { top: 19px; left: 0 } -.search .right { top: 19px; right: 0 } -.search form { - float: left; - margin-top: 2px; - width: inherit; -} -.search .close, -#player-frame .close { - position: absolute; - right: 8px; - bottom: 4px; - width: 16px; - height: 16px; - margin: 0; - text-indent: -1000em; - background: url(../images/close.png) no-repeat 0 0; - z-index:9999; -} -.search .close:hover, .search .close:focus, -#player-frame .close:hover, #player-frame .close:focus { - background-position: -16px 0; - cursor:pointer; -} -#player-frame .close { - top: 6px; -} -.search form input { - color: #999; - font-size: 1em; - width: inherit; - border: none; - margin: 0; - padding:0 0 0 6px; - z-index: 1500; - background-color: transparent -} -.search:hover .bottom, .search:hover .left, .search:hover .right { - background-color: #33b5e5; -} -.search:hover .icon { - background-position: -8px 0 -} -.search form input:focus { - color: #222; - font-weight: bold; - outline:0; -} -/* Search Dropdown */ -.search-dropdown { - padding: 15px; - width: 192px; - border: solid 1px #c5c5c5; - background: #fff; +.training-nav-top { + border:1px solid #e5e5e5; + border-width: 1px 1px 0; + bottom: -56px; + box-sizing: border-box; position: absolute; - top: 35px; - left: 0; - -moz-box-shadow: 0 0 10px rgba(0,0,0,0.2); - -webkit-box-shadow: 0 0 10px rgba(0,0,0,0.2); - box-shadow: 0 0 10px rgba(0,0,0,0.2) -} -.search-dropdown ul, .search-dropdown ul li { - list-style-type: none; - margin: 0; - padding: 0 -} -.search-dropdown ul li { - clear: both -} -.search-dropdown img { - float: left; - margin: 0 10px 10px 0 -} -.search-dropdown h6 { - color: #222; - margin: 0; - line-height: normal -} -.search-dropdown .desc { - color: #999; - font-size: 11.5px; - line-height: normal; - margin: 0; -} -.search-dropdown li a:hover h6, .search-dropdown li a:hover .desc { - color: #33b5e5 -} -/* -------------------------------------------------------------------------- -Buttons -*/ -.button, a.button, .button-secondary, a.button-secondary { - border-image: initial; - -webkit-border-radius: 2px; - -moz-border-radius: 2px; - border-radius: 2px; - cursor: pointer; -} -.button, a.button { - display:inline-block; - background-color: #09c; - background-image: -webkit-gradient(linear, left top, left bottom, from(#2faddb), to(#09c)); - background-image: -webkit-linear-gradient(top, #2faddb, #09c); - background-image: -moz-linear-gradient(top, #2faddb, #09c); - background-image: -ms-linear-gradient(top, #2faddb, #09c); - background-image: -o-linear-gradient(top, #2faddb, #09c); - background-image: linear-gradient(top, #2faddb, #09c); - filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#2faddb', EndColorStr='#0099cc',GradientType=0); - border: 1px solid #3990ab; - color: #fff; -} -.button-secondary, a.button-secondary { - background-color: #f3f3f3; - border: 1px solid #dcdcdc; - color: #444; -} -a.button, a.button:visited, a.button-secondary, a.button-secondary:visited { - margin-right: 16px; - font-weight: 400; - min-width: 54px; - outline: 0; - padding: 8px 15px; - text-align: center; -} -.button, .button-secondary { - margin-right: 16px; - font-weight: 400; - min-width: 54px; - outline: 0; - padding: 0 15px; - text-align: center; -} -.button:hover, a.button:hover { - border-color: #09c; - background-color: #4cadcb; - background-image: -webkit-gradient(linear, left top, left bottom, from(#5dbcd9), to(#4cadcb)); - background-image: -webkit-linear-gradient(top, #5dbcd9, #4cadcb); - background-image: -moz-linear-gradient(top, #5dbcd9, #4cadcb); - background-image: -ms-linear-gradient(top, #5dbcd9, #4cadcb); - background-image: -o-linear-gradient(top, #5dbcd9, #4cadcb); - background-image: linear-gradient(top, #5dbcd9, #4cadcb); - filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#5dbcd9', -EndColorStr='#4cadcb',GradientType=0); - color: #fff !important; -} -.button:active, a.button:active { - background-color: #1e799a; - background-image: none; - border-color: #30b7e6; -} -a.button.big.subtitle { - line-height:18px; -} -.button-secondary:hover, a.button-secondary:hover { - border-color: #dbdbdb; - background-color: #f3f3f3; - background-image: -webkit-gradient(linear, left top, left bottom, from(#f9f9f9), to(#ececec)); - background-image: -webkit-linear-gradient(top, #f9f9f9, #ececec); - background-image: -moz-linear-gradient(top, #f9f9f9, #ececec); - background-image: -ms-linear-gradient(top, #f9f9f9, #ececec); - background-image: -o-linear-gradient(top, #f9f9f9, #ececec); - background-image: linear-gradient(top, #f9f9f9, #ececec); - filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#f9f9f9', -EndColorStr='#ececec'); - color: #33B5E5 !important; -} -.button-secondary:active, a.button-secondary:active { - border-color: #dadada; - background: #ebebeb; /* Old browsers */ - /* IE9 SVG, needs conditional override of 'filter' to 'none' */ - background: -url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/ -Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0Jv -eD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+ -CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIg -eDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ViZWJl -YiIgc3RvcC1vcGFjaXR5PSIxIi8+ -CiAgICA8c3RvcCBvZmZzZXQ9IjEwJSIgc3RvcC1jb2xvcj0iI2Y5ZjlmOSIgc3RvcC1vcGFjaXR5PSIxIi8+ -CiAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iI2ZhZmFmYSIgc3RvcC1vcGFjaXR5PSIxIi8+ -CiAgICA8c3RvcCBvZmZzZXQ9IjkwJSIgc3RvcC1jb2xvcj0iI2Y5ZjlmOSIgc3RvcC1vcGFjaXR5PSIxIi8+ -CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmNmY2ZjYiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFy -R3JhZGllbnQ+ -CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIg -Lz4KPC9zdmc+); - background: -moz-linear-gradient(top, #ebebeb 0%, #f9f9f9 5%, #fafafa 50%, #f9f9f9 90%, -#ffffff 100%); /* FF3.6+ */ - background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ebebeb), -color-stop(5%,#f9f9f9), color-stop(50%,#fafafa), color-stop(90%,#f9f9f9), color-stop(100%,#ffffff)); -/* Chrome,Safari4+ */ - background: -webkit-linear-gradient(top, #ebebeb 0%,#f9f9f9 5%,#fafafa 50%,#f9f9f9 -90%,#ffffff 100%); /* Chrome10+,Safari5.1+ */ - background: -o-linear-gradient(top, #ebebeb 0%,#f9f9f9 5%,#fafafa 50%,#f9f9f9 90%,#ffffff -100%); /* Opera 11.10+ */ - background: -ms-linear-gradient(top, #ebebeb 0%,#f9f9f9 5%,#fafafa 50%,#f9f9f9 90%,#ffffff -100%); /* IE10+ */ - background: linear-gradient(top, #ebebeb 0%,#f9f9f9 5%,#fafafa 50%,#f9f9f9 90%,#ffffff -100%); /* W3C */ - filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ebebeb', -endColorstr='#ffffff',GradientType=0 ); /* IE6-8 */ - -webkit-box-shadow: inset 0px 0px 5px 2px rgba(0, 0, 0, .05); - -moz-box-shadow: inset 0px 0px 5px 2px rgba(0, 0, 0, .05); - box-shadow: inset 0px 0px 5px 2px rgba(0, 0, 0, .05); - color: #258AAF !important; -} -.button.big { - font-size:20px; - display:inline-block; -} -.button.big span.small { - font-size:14px; -} -.button-caption { - margin-top:10px; - font-size:12px; - font-style:italic; -} - -.button.disabled, -.button.disabled:hover, -.button.disabled:active { - background:#ebebeb; - color:#999 !important; - border-color:#999; - cursor:default; -} - -.training-nav-top a.button-secondary, -.training-nav-bottom a.button-secondary { - display:block; - float:left; - margin:0; - width:130px; - text-transform:uppercase; - font-weight:bold; - - background-color: #f3f3f3; - background-image: -webkit-gradient(linear, left top, left bottom, from(#f9f9f9), to(#ececec)); - background-image: -webkit-linear-gradient(top, #f9f9f9, #ececec); - background-image: -moz-linear-gradient(top, #f9f9f9, #ececec); - background-image: -ms-linear-gradient(top, #f9f9f9, #ececec); - background-image: -o-linear-gradient(top, #f9f9f9, #ececec); - background-image: linear-gradient(top, #f9f9f9, #ececec); - filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#f9f9f9', -EndColorStr='#ececec'); - color: #33B5E5; -} - -.training-nav-top a.button-secondary:hover, -.training-nav-bottom a.button-secondary:hover { - background-color: #09c; - background-image: -webkit-gradient(linear, left top, left bottom, from(#2faddb), to(#09c)); - background-image: -webkit-linear-gradient(top, #2faddb, #09c); - background-image: -moz-linear-gradient(top, #2faddb, #09c); - background-image: -ms-linear-gradient(top, #2faddb, #09c); - background-image: -o-linear-gradient(top, #2faddb, #09c); - background-image: linear-gradient(top, #2faddb, #09c); - filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#2faddb', EndColorStr='#09c'); - border: 1px solid #3990ab; - color: #fff !important; -} - -.training-nav-top a.button-secondary.last, -.training-nav-bottom a.button-secondary.last { - border-left:0; -} - -.training-nav-top a.button-secondary.double-size, -.training-nav-bottom a.button-secondary.double-size { - width:291px; + right: 0; + width: 280px; } -.training-nav-top, .training-nav-bottom { float:right; margin:0 0 0 20px; -} - -.training-nav-top { - position:relative; - top:73px; -} - -.training-nav-bottom { padding:0 0 20px; } @@ -1904,33 +1525,38 @@ EndColorStr='#ececec'); } #tb-wrapper { - margin:51px 0 0 20px; /* negative top-margin to counter the content-header bottom margin */ + margin:56px 0 0 20px; /* negative top-margin to counter the content-header bottom margin */ } #tb, #qv { - font-size:13px; - line-height:18px; - width:238px; - border:1px solid #ccc; - float:right; + border: 1px solid #e5e5e5; + box-sizing: border-box; + float: right; + line-height: 16px; + padding: 5px 0; + width: 240px; } #tb { - width:278px; + width:280px; } #tb h2, #qv h2 { - margin:10px 15px; - padding:0; - text-transform:uppercase; - border-bottom:1px solid gainsboro; + border-top: 1px solid #e5e5e5; + color: inherit; + font-size: 16px; + line-height: 24px; + margin: 15px 0 4px; + padding: 10px 15px 0; } -#tb *, -#qv * { - font-size:inherit; +#tb h2:first-child, +#qv h2:first-child { + border-top: 0; + padding-top: 0; + margin-top: 10px; } #tb .download-box, @@ -1942,7 +1568,28 @@ EndColorStr='#ececec'); #qv .download-box .filename { font-size:11px; margin:4px 4px 10px; - color:#666; +} + +@media (max-width: 719px) { + .training-nav-top { + left: 0; + width: auto; + } + + #tb-wrapper { + clear: none; + float: none; + margin-left: 0; + } + + #tb { + float: none; + width: auto; + } + + #qv-wrapper { + display: none; + } } @@ -1959,9 +1606,9 @@ EndColorStr='#ececec'); width:226px; font-size:13px; line-height:18px; - border-left:4px solid #99CC00; + border-left:3px solid #a9e27d; float:right; - padding:0 0 0 10px; + padding:0 0 0 20px; margin:0 0 1em 20px; } @@ -1985,7 +1632,15 @@ EndColorStr='#ececec'); #tb ol, #tb ul, #qv ul { - margin:0 15px 10px 35px; + list-style-type: none; + margin:0 15px 10px 15px; +} + +#tb li, +#qv li { + margin: 8px 0; + padding: 0 0 0 16px; + position: relative; } #tb p { @@ -2005,11 +1660,7 @@ EndColorStr='#ececec'); #qv ul ul, .sidebox ol ol, .sidebox ul ul { - margin-bottom:0; -} - -#qv ol ol { - margin:3px 0 3px 15px; + margin: 8px 0; } .sidebox p, @@ -2145,7 +1796,6 @@ form .form-error input[type='text'], form .form-error textarea { border-radius: 2px; margin: 10px 0; padding: 20px; - color: #666; position: relative; background: #f9f9f9; } @@ -2332,16 +1982,11 @@ a:visited, /* nav tree */ -#side-nav, #swapper, -#nav-tree, #tree-list { +#swapper, #nav-tree, #tree-list { overflow:hidden; margin-left:0; } -#devdoc-nav { - overflow:visible !important; /* To keep the "to top" button visible */ -} - #nav-tree ul { list-style:none; padding:0; @@ -2443,7 +2088,7 @@ a:visited, border-bottom: 1px solid #CCC; background:#e9e9e9; background: rgba(0, 0, 0, 0.05); /* matches #nav li.expanded */ - + line-height: 19px; /* Fix regression after page line-height is bumped to 24px */ } #api-nav-title { padding:0 5px; @@ -2795,7 +2440,7 @@ a#butterbar-message:hover { } /* -------------------------------------------------------------------------- -Misc +Misc and article typography */ @@ -2842,27 +2487,46 @@ pre.classic { p.img-caption { margin: -10px 0 20px; - font-size:13px; - color:#666; + font-size: 13px; +} + +div.figure-center { + margin: 32px auto 24px; + max-width: 100%; } div.figure, div.figure-right { - float:right; - clear:right; - margin:10px 0 0 0; - padding:0 0 0 20px; + clear: right; + float: right; + margin: 10px 0 0 0; + padding: 0 0 0 20px; + max-width: 50%; /* width must be defined w/ an inline style matching the image width */ } div.figure-left { - float:left; - clear:left; - margin:10px 0 0 0; - padding:0 20px 0 0; + clear: left; + float: left; + margin: 10px 0 0 0; + padding: 0 20px 0 0; + max-width: 50%; /* width must be defined w/ an inline style matching the image width */ } +@media (max-width: 719px) { + /* Collapse on mobile. */ + div.figure, + div.figure-right, + div.figure-left { + float: none; + clear: none; + padding: 0; + margin: 32px auto 24px; + max-width: 100%; + } +} + img.frame { border:1px solid #DDD; padding:4px; @@ -2871,38 +2535,31 @@ img.frame { p.table-caption { margin: 0 0 4px 0; font-size:13px; - color:#666; } p.code-caption { margin-bottom: 4px; font: 12px/1.5 monospace; - color:#666; -} - -div.note, -div.caution, -div.warning { - margin: 0 0 15px; } p.note, div.note, p.caution, div.caution, p.warning, div.warning { - padding: 0 0 0 10px; - border-left: 4px solid; + padding: 0 0 0 20px; + border-left: 3px solid; + margin: 16px 0; } p.note, div.note { - border-color: #258AAF; + border-color: #66c2ff; } p.caution, div.caution { - border-color: #FF8800; + border-color: #f81; } p.warning, div.warning { - border-color: #ff4443; + border-color: #f55; } div.note.design { @@ -2965,8 +2622,7 @@ div.design-announce p { a.notice-developers-video, a.notice-developers, a.notice-designers-video, -a.notice-designers, -a.notice-designers-material { +a.notice-designers { float:right; clear:right; width:238px; @@ -2977,15 +2633,13 @@ a.notice-designers-material { a.notice-developers-video.wide, a.notice-developers.wide, a.notice-designers-video.wide, -a.notice-designers.wide, -a.notice-designers-material.wide { +a.notice-designers.wide { width:278px; } a.notice-developers-video div, a.notice-developers div, a.notice-designers-video div, -a.notice-designers div, -a.notice-designers-material div { +a.notice-designers div { min-height:40px; background:url('../images/styles/notice-developers@2x.png') no-repeat 10px 10px; background-size:40px 40px; @@ -3003,22 +2657,16 @@ a.notice-developers-video div { background:url('../images/styles/notice-developers-video@2x.png') no-repeat 10px 10px; background-size:40px 40px; } -a.notice-designers-material div { - background:url('../images/styles/notice-designers-material@2x.png') no-repeat 10px 10px; - background-size:40px 40px; -} a.notice-developers-video:hover, a.notice-developers:hover, a.notice-designers-video:hover, -a.notice-designers:hover, -a.notice-designers-material:hover { +a.notice-designers:hover { background:#eee; } a.notice-developers-video h3, a.notice-developers h3, a.notice-designers-video h3, -a.notice-designers h3, -a.notice-designers-material h3 { +a.notice-designers h3 { font-size:13px; line-height:18px; font-weight:bold; @@ -3029,16 +2677,14 @@ a.notice-designers-material h3 { a.notice-developers-video p, a.notice-developers p, a.notice-designers-video p, -a.notice-designers p, -a.notice-designers-material p { +a.notice-designers p { margin:0; line-height:14px; } a.notice-developers-video.left, a.notice-developers.left, a.notice-designers-video.left, -a.notice-designers.left, -a.notice-designers-material.left { +a.notice-designers.left { margin-left:0; float:left; } @@ -3465,6 +3111,15 @@ Page-Specific Styles } */ +/* First paragraph of a content pages is a bit larger + - note the very specific selector. */ +.jd-descr > p:first-child, +.jd-descr > #tb-wrapper + p, +.jd-descr > #qv-wrapper + p { + font-size: 16px; + margin-bottom: 16px; +} + /* page-top-right container for reference pages (holds links to summary tables) */ #api-info-block { @@ -3676,6 +3331,7 @@ h5.jd-tagtitle { font-style:italic; } + /* Inline api level indicator for methods */ div.api-level { font-size:.8em; @@ -3696,27 +3352,6 @@ table.jd-tagtable th { } - - - - - - - - - - - - - - - - - - - - - /* SEARCH FILTER */ .menu-container { @@ -3726,53 +3361,39 @@ table.jd-tagtable th { font-weight:normal; } -.search_filtered_wrapper.reference { - width: 193px; - float: right; -} -.search_filtered_wrapper.docs { - width:875px; - float: left; - position:absolute; - top:26px; - right:66px; +.search_filtered_wrapper { + position: absolute; + right: 18px; + top: 64px; } .suggest-card { + float:right; position:relative; width:170px; min-height:90px; padding:5px; border: solid 1px #C5C5C5; background: white; - top: 15px; margin-right:-5px; -moz-box-shadow: 0 0 10px rgba(0,0,0,0.2); -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); } .suggest-card.reference { - position:absolute; - z-index:999; - min-width:171px; /* +padding and border makes this match input width */ - min-height:93px; /* add 3px because this has 1 not 4px top border */ - width:auto; - top:41px; - margin:0; + z-index: 998; + width: auto; } .suggest-card.develop { z-index:997; border-top: solid 4px #F80; - float:right; } .suggest-card.design { z-index:996; border-top: solid 4px #33b5e5; - float:right; } .suggest-card.distribute { z-index:995; border-top: solid 4px #9C0; - float:right; } .child-card { width:100%; @@ -3799,7 +3420,7 @@ ul.search_filtered { } .search_filtered .jd-selected, .search_filtered .jd-selected a { - color:#09C !important; + color:#039BE5 !important; } .no-display { @@ -3852,8 +3473,6 @@ ul.search_filtered { - - /* SEARCH RESULTS */ @@ -3975,7 +3594,7 @@ td.gsc-search-button { #searchResults h2#searchTitle { padding:0; - margin:5px 0; + margin:30px 0 5px; border:none; } @@ -4024,7 +3643,7 @@ td.gsc-search-button { #searchResults .gsc-tabHeader.gsc-tabhInactive, #searchResults .gsc-cursor-page { text-decoration:none; - color:#258AAF; + color:#039BE5; border: solid 1px #DADADA; } @@ -4038,7 +3657,7 @@ td.gsc-search-button { background-image: -ms-linear-gradient(top, #F9F9F9, #ECECEC); background-image: -o-linear-gradient(top, #F9F9F9, #ECECEC); background-image: linear-gradient(top, #F9F9F9, #ECECEC); - filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#f9f9f9', + filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#f9f9f9', EndColorStr='#ececec'); color: #33B5E5; } @@ -4063,58 +3682,8 @@ EndColorStr='#ececec'); - /************ STICKY NAV BAR ******************/ -#header-wrapper { - background: #f9f9f9; - margin: 0 -10px 0 -10px; - padding: 31px 10px 0px 10px; - position: relative; -} -#header-wrapper #nav-x div.wrap { - max-width: 940px; - height: 38px; -} -#header-wrapper #nav-x ul.nav-x li { - margin-right: 31px !important; - margin-top: 5px; - margin-bottom: 0px; - height: 30px; -} -#header-wrapper #nav-x > div.wrap ul.nav-x li.active { - color: #669900; - border-bottom: 3px solid #669900; -} -#header-wrapper #nav-x > div.wrap ul.nav-x li.active a { - color: #669900; -} -#header-wrapper #nav-x > div.wrap ul.nav-x a { - font-size: 14.5px; -} -#header-wrapper .developer-console-btn { - float: right; - background: #fefefe; - border-radius: 4px; - padding: 8px 14px; - box-shadow: 1px 1px 0px #7a7a7a; - font-size: 14px; - margin-top: -6px; - cursor: pointer; - color: #464646; - margin-right: 20px; -} -/* not currently used */ -#header-wrapper .shadow { - width: 1034px; - height: 4px; - position: absolute; - left: 50%; - margin-left: -517px; - bottom: -4px; - background-image: url(../images/header-shadow.png); -} - #context { clear: both; padding-top: 14px; @@ -4158,78 +3727,8 @@ EndColorStr='#ececec'); display: none; } -/* Sticky Nav overrides */ -.sticky-menu { - position: fixed; - width: 940px; - height: 0px; - z-index: 51; - top: 12px; -} -#sticky-header { - display: none; - padding: 0 10px; - position: fixed; - background: #f9f9f9; - top: 0px; - left: 0px; - right: 0px; - height: 45px; - box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.1); - border-bottom: 1px solid #a5c43a; - z-index: 50; -} -#sticky-header.design { - border-bottom: 1px solid #33b5e5; -} -#sticky-header.develop { - border-bottom: 1px solid #F80; -} -#sticky-header.distribute { - border-bottom: 1px solid #9C0; -} -#sticky-header.about { - border-bottom: 1px solid #9933CC; -} -#sticky-header > div { - overflow: hidden; - *zoom: 1; - width: 940px; - margin: 0 auto; - clear: both; - padding-top: 9px; -} -#sticky-header > div .logo { - float: left; - width: 26px; - height: 25px; - background: url(../images/dac_logo.png); - background-image: -webkit-image-set(url(../images/dac_logo.png) 1x, url(../images/dac_logo@2x.png) 2x); - z-index: 52; - position: relative; -} -#sticky-header > div .top { - float: left; - width: 38px; - height: 38px; - position: relative; - background: url(../images/styles/gototop.png); - z-index: 52; -} -#sticky-header > div .breadcrumb { - float: left; - padding: 0 0 0 10px; - border-left: 1px solid #d2d2d2; - line-height: 24px; - font-size: 14px; - position: relative; - top: 0px; - z-index: 52; -} - /* offset the <a name=""> tags to account for sticky nav */ -body.reference a[name], -div.renderscript a[name] { +body.reference a[name] { visibility: hidden; display: block; position: relative; @@ -4237,76 +3736,6 @@ div.renderscript a[name] { } -} - - - - - - - -/*********** PREVIOUSLY dac-styles.css ***************/ - - -#header { - border-bottom:0; -} - -#header .wrap { - max-width:940px; - height:41px; - border-bottom:1px solid; - border-color: #ccc; - position:relative; -} - -.about #header .wrap { - border-color: #9933CC; -} - -.design #header .wrap { - border-color: #33b5e5; -} - -.develop #header .wrap { - border-color: #F80; -} - -.distribute #header .wrap { - border-color: #9C0; -} - -.logo a { - float:left; -} - -#header .logo { - margin-top: -6px; - margin-left: 0px; - margin-bottom:0px; - width: 160px; - padding-right:10px; -} - - -#header-wrap .logo.landing-logo { - width:220px; - margin:0; - padding:0; - margin-bottom:22px; -} -#header-wrap .logo.landing-logo img { - padding:0 0 0 10px; -} - -.search { - height:25px; - margin-top: -3px; - margin-bottom: 0px; -} - - - /* Quicknav */ .btn-quicknav { width:20px; @@ -4344,17 +3773,6 @@ div.renderscript a[name] { display:block; } -.nav-x li { - display:block; - float:left; - margin-right:45px; - -webkit-transition: all 0.25s linear; - -moz-transition: all 0.25s linear; - -ms-transition: all 0.25s linear; - -o-transition: all 0.25s linear; - transition: all 0.25s linear; -} - #header-wrap.quicknav .nav-x li { min-width:160px; margin-right:20px; @@ -4440,105 +3858,6 @@ div.renderscript a[name] { } -/* SEARCH AND MORE */ -.search { - position: absolute; - width: 50px; - height:28px; - display: block; - margin-top:-3px; - margin-bottom:7px; - overflow:hidden; - z-index:100; - right:54px; - -webkit-transition: width 0.4s ease; - -moz-transition: width 0.4s ease; - -o-transition: width 0.4s ease; - transition: width 0.4s ease; -} - -.search #search-btn { - width:50px; - height:28px; - background:url(../images/icon_search.png) no-repeat; - float:left; -} - -.search-inner { - width:245px; -} - -.search:hover, .search.active { - width:245px; -} - -.search .bottom, .search .left, .search .right { - position: absolute; - background-color: #a2a2a2 -} - -.search .bottom { - width: 214px; - height: 1px; - top: 24px; - left: 0 -} - -.search .left, .search .right { - height: 5px; - width: 1px -} - -.search .left { - top: 22px; - left: 56px; - background-color:#CCC; -} - -.search .right { - top: 22px; - left: 238px; - background-color:#CCC; -} - -.search form { - margin-top: 2px; - width: 162px; - float:left; -} - -.search form input { - color: #2f2f2f; - font-size: 0.95em; - width: 178px; - border: none; - margin-left: 6px; - z-index: 1500; - position: relative; - background-color: transparent; - border-bottom:1px solid #CCC; - padding:0 0 0 4px; - outline:none; - height:24px; -} - -.search:hover form input { - border-bottom:1px solid #33B5E5; -} - -.search:hover .bottom, .search:hover .left, .search:hover .right { - background-color: #33b5e5; -} - -.search:hover #search-btn { - background-position: 0 -28px -} - -.search form input:focus { - color: #222; - font-weight: bold -} - .moremenu { float: right; position: relative; @@ -4691,9 +4010,9 @@ div.renderscript a[name] { height:12px; text-indent:-8000px; list-style:none; - margin: 0 2px; + margin: 0 3px; border-radius:6px; - background-color:#ccc; + background-color:#ddd; cursor:pointer; -webkit-transition:color .5s ease-in; -moz-transition:color .5s ease-in; @@ -4701,13 +4020,13 @@ div.renderscript a[name] { transition:color .5s ease-in; } .slideshow-container .pagination ul li:hover { - background-color:#999; + background-color:#bbb; } .slideshow-container .pagination ul li.active { - background-color:#33b5e5; + background-color:#6ab344; } .slideshow-container .pagination ul li.active:hover { - background-color:#33b5e5; + background-color:#6ab344; } .slideshow-container ul li { display:inline; @@ -4727,27 +4046,14 @@ a.download-sdk { padding-bottom:0px; } -#nav-x { - padding-top: 13px; -} - -#nav-x .wrap { - min-height:32px; -} - -#nav-x .wrap, #searchResults.wrap { max-width:940px; - border-bottom:1px solid #CCC; + border-bottom:1px solid #e5e5e5; } #searchResults.wrap #leftSearchControl { min-height:700px } -.nav-x { - margin-left:0; - margin-bottom:0; -} @@ -4817,7 +4123,7 @@ a.download-sdk { } .jspDrag { - background: #bbb; + background: #ccc; position: relative; top: 0; left: 0; @@ -5060,7 +4366,7 @@ a.download-sdk { display:none; margin: -1px auto 0; position: relative; - width: 940px; + max-width: 940px; height: 0px; } #player-frame { @@ -5072,6 +4378,22 @@ a.download-sdk { height: 330px; position: relative; } +#player-frame .close { + position: absolute; + right: 8px; + bottom: 4px; + width: 16px; + height: 16px; + margin: 0; + text-indent: -1000em; + top: 6px; + background: url(../images/close.png) no-repeat 0 0; + z-index:9999; +} +#player-frame .close:hover, #player-frame .close:focus { + background-position: -16px 0; + cursor:pointer; +} @@ -5126,7 +4448,7 @@ a.download-sdk { } .landing-docs .normal-links a { - color:#258aaf !important; + color:#039BE5 !important; } .plusone { @@ -5233,7 +4555,7 @@ a.download-sdk { float: left; width: 100%; text-align: center; - color: #09c !important; + color: #039BE5 !important; } .home-sections ul li a { font-weight: bold; @@ -5250,9 +4572,6 @@ a.download-sdk { .home-sections ul li.last { margin-right: 0px; } -.fullpage #footer { - margin-top: -40px; -} /************ DISTRIBUTE PAGES ******************/ @@ -5294,22 +4613,925 @@ a.download-sdk { } .figure img, .border-img { + box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.37); margin-bottom: 15px; } -/************ RESOURCE CARDS ******************/ -/* Resource cards, 12, 13, 16-col */ +/** + * UTILITIES + */ + + +.border-box { + box-sizing: border-box; +} + +.vertical-center-outer { + display: table; + height: 100%; + width: 100%; +} + +.vertical-center-inner { + display: table-cell; + vertical-align: middle; +} + +/** + * TYPE STYLES + */ + +.landing-h1 { + color: #44555d; + font-weight: 300; + font-size: 56px; + line-height: 80px; + text-align: center; + letter-spacing: -1px; + margin-bottom: 6px; +} + +.landing-pre-h1 { + font-weight: 400; + font-size: 28px; + color: #93B73F; + line-height: 36px; + text-align: center; + letter-spacing: -1px; + text-transform: uppercase; +} + +.landing-h1.hero { + text-align: left; + color: #fff; +} + +.landing-h2 { + font-weight: 300; + font-size: 42px; + line-height: 64px; + text-align: center; +} + +.landing-subhead { + color: #78868d; + font-size: 20px; + font-weight: 300; + line-height: 32px; + text-align: center; +} +.landing-subhead.hero { + text-align: left; + color: white; +} + +.landing-hero-description { + text-align: left; + margin: 1em 0; +} + +.landing-hero-description p { + font-weight: 300; + margin: 0; + font-size: 18px; + line-height: 24px; +} + +.landing-body .landing-small { + font-size: 14px; + line-height: 19px; +} + +.landing-body.landing-align-center { + text-align: center; +} + +.landing-align-left { + text-align: left; +} + +/** + * LAYOUT + */ + +.landing-section { + background: #eceff1; + clear: both; + padding: 80px 20px 80px; + margin: 0 -20px; + text-rendering: optimizeLegibility; +} + +@media (max-width: 719px) { + .landing-section { + margin-left: -10px; + margin-right: -10px; + padding-left: 10px; + padding-right: 10px; + } +} + +.landing-short-section { + padding: 40px 10px 28px; +} + +.landing-gray-background { + background-color: #b0bec5; +} + +.landing-white-background { + background-color: white; +} + +.landing-red-background { + color: white; + background-color: hsl(8, 70%, 54%); +} + +.landing-red-background .landing-h1 { + color: white; +} + +.landing-red-background .landing-subhead { + color: hsl(8, 71%, 84%); + text-align: left; +} + + +.preview-hero { + height: calc(100vh - 128px); + min-height: 504px; + padding-top: 0; + padding-bottom: 0; + background-image: url(../../preview/images/hero.jpg); + background-size: cover; + background-position: right center; + color: white; + position: relative; + overflow: hidden; +} + +.wear-hero { + height: calc(100vh - 128px); + min-height: 504px; + padding-top: 0; + padding-bottom: 0; + background-image: url(../../wear/images/hero.jpg); + background-size: cover; + background-position: top center; + color: white; + position: relative; + overflow: hidden; +} + +.tv-hero { + height: calc(100vh - 128px); + min-height: 504px; + padding-top: 0; + padding-bottom: 0; + background-image: url(../../tv/images/hero.jpg); + background-size: cover; + background-position: right center; + color: white; + position: relative; + overflow: hidden; +} + +.auto-hero { + height: calc(100vh - 128px); + min-height: 504px; + padding-top: 0; + padding-bottom: 0; + background-image: url(../../auto/images/hero.jpg); + background-size: cover; + background-position: right center; + color: white; + position: relative; + overflow: hidden; +} + +.landing-hero-scrim { + background: black; + height: 100%; + left: 0; + position: absolute; + opacity: .2; + width: 100%; +} + +.landing-hero-wrap { + margin: 0 auto; + max-width: 940px; + clear: both; + height: 100%; + position: relative; +} + +.landing-section-header { + margin-bottom: 40px; +} + +.landing-hero-wrap .landing-section-header { + margin-bottom: 16px; +} + +.landing-body { + font-size: 18px; + line-height: 24px; +} + +.landing-video-link { + white-space: nowrap; + display: inline-block; + padding: 16px 32px 16px 82px; + font-size: 18px; + font-weight: 400; + line-height: 24px; + cursor: pointer; + color: hsla(0, 0%, 100%, .8); + -webkit-user-select: none; + -moz-user-select: none; + -o-user-select: none; + user-select: none; + -webkit-transition: .2s color ease-in-out; + -moz-transition: .2s color ease-in-out; + -o-transition: .2s color ease-in-out; + transition: .2s color ease-in-out; +} + +.landing-video-link:before { + height: 64px; + width: 64px; + display: inline-block; + background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAABgCAYAAADimHc4AAAFuklEQVR42u2dXWgcVRSAV9LWtBBTTZVWUhNqEQtq1QeroDRKFRFsROqTYPuo+JCiIoJKFC0USqlUfCiowRcfrBgVUUElefAPkW5T8aeaGn9aRbFsjP0x2cx8PuRMvFxmdjeb2Z17Z8+B85DsZPbO+eaec3/OPSkABdXsVI2gABSAqgJQAKoKQAGoKgAFoKoAFICqAlAAqgpAAai6DqDRAiwDeoFtwB7gPaAInABKwKToCWAMeB/YDdwJrAWWNLh9+QMAXABsBQ4A3wFTwAxQBmaBAAhjNJDPy3L938BXwAvArUCHAkh+kCXAVcA+YBw4bRg7MngtkgTlDPA98CywHmhTAP8/xCbgVeAvMZZpwDQllN7xB/AysKGlAQAXAvuBkzW85UVgCBgENlfQQbmuWAXELPAnsAvoaikAQBtwh/j3coLhS2LIfqCzzu/plL8fkvvFgZiR4L2lHrfkHQBgpQTFUwmGnwC212v0KjC2y/3jQPwDPA+05xYAcBHwubx1YZzhC02QBBBRbxgBzssdAOBy4JgRZE0ZTPuNr7FHDCbEhqNAd24AAN0yUbID7QSwsZChABut3hANXY8Bq70HIMb/Ocb4w81+66v0hmGrN0QQ1ngLQJYRvpWHMWWo4KDIaMnuCcVKgdlZAGL8t2J8vpPGrwChDLyWBMFlAA8D0z4ZvwKEs8D93gCQEc9Jy/jFgkdizaRDGUSs8wXAu1bQLQE9ngHosWbPAXDQeQAypT9rBd3+gociyxi2K9riLABZUj5iuZ6RgsciM2OzFxw2A7JrAO6VwGtKTwpG+Anoy9AVmb3gDHCPcwCAFcChRox6jPu9CazMeFQUAKNRL3AJwE2yopjq228BQPZ/d2bcCyaBTa4BeNGa8Q6naIA4GQWubiKEYWvBbp8zAGQt5VfL/fQ3GEAkTzXDLVkjokA2k5a7AuA2GaLNj/tTfvhq0pQgbcwLQtlQusYVALtlzSR191MjADNI9zbJDZWBR10BMGr5/4GMADQ0SAMDlht62xUAxy0AmzMEEMnhtIO0ZF2YAH5wITd0hQw/5wE04M1bjDyXZpC2hqMlYGnWAHqBf40APOEYgChI35VSWyasWfGqrAH0WVkOIw4CSC1IG2tDoSy7XJE1gPs8ArDoIG0BmJGk30wBDHgGYFFBOgbAtqwB7GxxAHerC8rOBU0Dt2gQzjYIb8gawDor+6HVhqFdrkzEwhabiAVOTMSkUb+06FLEUVfWgj5q0cW4g64AeNo66ZLlcnTDNmesBN4y8KArAG6QU42ttCEzBVzpCoAO4EfLDeV5SzIEvgHaXdqUP2BlQud1Ux55zj2uZUX02cPRnKalRLmu17qYmPWF5YbymJgVAh8Ay5wCII3ZEZOYm6fURGT2u9X43Mnk3CDHybmfmRVYXExPv9nKEcpLejqSC3SjdY2TBzTesHqB7wc0onTEV2KucxLApXKkJy9HlAI5anuJFwCkYQ/EuCJfD+mdBnYkXOssgHY53un7MdVZ4CVgqVcADAhjMafkfTioHc14P04yvvMApIEXy5F/+7S8y6UKolPyR4BVVf7Wi2IdawwIPhTrmAW+rmZ8bwBIQ7vloXwoVzNWS6UUrwAYy9YfOlqwKZDkgneA5Qu4l3cly84F9sqGhislywLmaozuYoGFXr0DII1ukxP1hxJ6QzR7HqLxRfumZaRzXZ3f4XXZyi7gCeB3kqsnzs+kSb9s5XHgMeD8RTxDLgq3rmeuYuFvNYCoR8wqujNi+L3UWBcu9wAMt3QZ8LiMlk5RuU50teq6kcEDgTolveIRYHUQBOek1O5cFu/ukLz7/ZJgNSm+OirebWpgaPS7slxfAr4EngGuX8jopqUBxGzyrAVuB54EXgc+lV4yLhO8cfn5E+ZqUD8kBu9sQvv0Hzj4rmoEBaAAVBWAAlBVAApAVQEoAFUFoABUFYACUFUACkC1CfofXVRJocowZVYAAAAASUVORK5CYII=); + background-size: contain; + position: absolute; + content: ""; + opacity: .7; + margin-top: -19px; + margin-left: -64px; + -webkit-transition: .2s opacity ease-in-out; + -moz-transition: .2s opacity ease-in-out; + -o-transition: .2s opacity ease-in-out; + transition: .2s opacity ease-in-out; +} + +.landing-video-link:hover { + color: hsla(0, 0%, 100%, 1); +} + +.landing-video-link:hover:before { + opacity: 1; +} + +.landing-social-image { + float: left; + margin-right: 14px; + height: 64px; + width: 64px; +} + +.landing-social-copy { + padding-left: 78px; +} + +.landing-scroll-down-affordance { + position: absolute; + bottom: 0; + width: 100%; + text-align: center; + z-index: 10; +} + +.landing-down-arrow { + padding: 24px; + display: inline-block; + opacity: .5; + -webkit-transition: .2s opacity ease-in-out; + -moz-transition: .2s opacity ease-in-out; + -o-transition: .2s opacity ease-in-out; + transition: .2s opacity ease-in-out; + + -webkit-animation-name: pulse-opacity; + -webkit-animation-duration: 4s; +} + +.landing-down-arrow:hover { + opacity: 1; +} + +.landing-down-arrow img { + height: 28px; + width: 28px; + margin: 0 auto; + display: block; +} + +.landing-divider { + display: inline-block; + height: 2px; + background-color: white; + position: relative; + margin: 10px 0; +} + +/* 3 CLOLUMN LAYOUT */ + +.landing-breakout { + margin-top: 40px; + margin-bottom: 40px; +} + +.landing-breakout img { + margin-bottom: 20px; +} + +.landing-partners img { + margin-bottom: 20px; +} + +.landing-breakout p { + padding: 0 23px; +} + +.landing-breakout.landing-partners img { + margin-bottom: 20px; +} + +/** + * ANIMATION + */ + +@-webkit-keyframes pulse-opacity { + 0% { + opacity: .5; + } + 20% { + opacity: .5; + } + 40% { + opacity: 1; + } + 60% { + opacity: .5; + } + 80% { + opacity: 1; + } + 100% { + opacity: .5; + } +} + + + +/** + * VIDEO + */ + +#video-container { + display:none; + position:fixed; + top:0; + left:0; + width:100%; + height:100%; + background-color:rgba(0,0,0,0.8); + z-index:9999; +} + +#video-frame { + max-width:940px; + height:100%; + margin:72px auto; + display:none; + position:relative; +} + +.video-close { + cursor: pointer; + position: absolute; + right: -49px; + top: -49px; + pointer-events: all; +} + +#icon-video-close { + background-image: url("../images/close-white.png"); + background-image: -webkit-image-set(url(../images/close-white.png) 1x, url(../images/close-white_2x.png) 2x); + background-repeat: no-repeat; + background-position: 0 0; + background-size: 36px 36px; + height: 36px; + width: 36px; + display:block; +} + +#icon-video-close:hover { + background-image: url("../images/close-grey.png"); + background-image: -webkit-image-set(url(../images/close-grey.png) 1x, url(../images/close-grey_2x.png) 2x); +} + +/* Preload the hover images */ +a.video-shadowbox-button.white:after { + display:none; + content:url("../images/close-grey.png") url("../images/close-grey_2x.png"); +} + +a.video-shadowbox-button.white { + background-image: url("../images/play-circle-white.png"); + background-image: -webkit-image-set(url(../images/play-circle-white.png) 1x, url(../images/play-circle-white_2x.png) 2x); + background-size: 36px 36px; + background-repeat: no-repeat; + background-position: right; + padding: 16px 42px 16px 8px; + font-size: 18px; + font-weight: 500; + line-height: 24px; + color: #fff; + text-decoration:none; +} + +a.video-shadowbox-button.white:hover { + color:#bababa !important; + background-image: url("../images/play-circle-grey.png"); + background-image: -webkit-image-set(url(../images/play-circle-grey.png) 1x, url(../images/play-circle-grey_2x.png) 2x); +} + +/* Preload the hover images */ +a.video-shadowbox-button.white:after { + display:none; + content:url("../images/play-circle-grey.png") url("../images/play-circle-grey_2x.png"); +} + +/****************** +Styles for d.a.c/index: +*******************/ + + + +/* Generic full screen carousel styling to be used across pages. */ +.fullscreen-carousel { + margin: 0 -20px; + overflow: hidden; + position: relative; +} + +.fullscreen-carousel-content { + width: 100%; + height: 100%; + position: relative; + display: table; /* For vertical centering */ +} + +.fullscreen-carousel .vcenter { + display: table-cell; + vertical-align: middle; + position: relative; +} + +.fullscreen-carousel .vcenter > div { + margin: 10px auto; +} + +/* Styles for the full-bleed hero image type. */ +.fullscreen-carousel .hero, .fullscreen-carousel .hero h1 { + color: #fff; +} + +.fullscreen-carousel .hero h1 { + font-weight: 300; + font-size: 60px; + line-height: 68px; + letter-spacing: -1px; + margin-top: 0; +} + +.fullscreen-carousel .hero p { + font-weight: 300; + font-size: 18px; + line-height: 24px; +} + +.fullscreen-carousel .hero .hero-bg { + background-size: cover; + width: 100%; + height: 100%; + position: absolute; + left: 0px; + top: 0px; +} + + +/* Full screen carousel styling for the resource flow layout type of content */ +.fullscreen-carousel .resource-flow-layout:after { + height: 0; /* Dont know why this is set at 10 in default.css */ +} + +.fullscreen-carousel .resource-flow-layout { + margin-bottom: 20px; +} + + + +/* Generic Tab carousel styling to be used across multiple pages. */ + +.tab-carousel .tab-nav { + list-style: none; + position: relative; + text-align: center; +} + +.tab-carousel .tab-nav li { + display: inline-block; + font-size: 22px; + font-weight: 400; + line-height: 50px; + list-style: none; + margin: 0; + padding: 0 25px; + position: relative; +} + +.tab-carousel .tab-nav li a, +.tab-carousel .tab-nav li a:hover { + color: #333 !important; + padding: 10px 10px 13px 10px; + position: relative; + z-index: 1000; +} + +.tab-carousel .tab-nav li:after { + background: #ddd; + bottom: 0; + content: ''; + height: 4px; + left: 0; + position: absolute; + width: 100%; + z-index: 0; +} + +.tab-carousel .tab-nav .highlight { + position: absolute; + height: 4px; + width: 100px; + bottom: 0; + background: #33b5e5; +} + +.tab-carousel .tab-carousel-content { + position: relative; + overflow: hidden; + white-space: nowrap; +} + +.tab-carousel .tab-carousel-content [data-tab] { + display: inline-block; + white-space: normal; +} + + + +/* + Resource styling for the tab carousel. The tab carousel contains either + a 3 column layout of resources or a single full-width resource. The + latter has the 18x12 class applied to it and can be styled differently + that way. +*/ + +.tab-carousel .resource .image { + width: 100%; + height: 250px; + background-repeat: no-repeat; + background-size: contain; + background-position: 50% 50%; +} + +.tab-carousel .resource .info .title { + font-size: 18px; + line-height: 24px; +} + +.tab-carousel .resource .info .summary, +.tab-carousel .resource .info .cta { + line-height: 24px; + font-size: 16px; +} + +.tab-carousel .resource-card-18x12 { + position: relative; + padding-left: 450px; + box-sizing: border-box; + display: table-cell; + vertical-align: middle; +} + +.tab-carousel .resource-card-18x12 .image { + position: absolute; + width: 420px; + height: 100%; + left: 0; + top: 0; +} + +.tab-carousel .resource-card-18x12 .info { + display: inline-block; +} + +.tab-carousel .resource-card-18x12 .info .title { + margin-bottom: 26px; +} + + +/* + Styles for the actions bar. +*/ +.actions-bar { + background: #b0bec5; + text-align: center; +} + +.actions-bar .actions { + padding: 24px 0; + text-align: justify; + font-size: 0.1px; + line-height: 0.1px; +} + +.actions-bar .actions:after { + content: ''; + width: 100%; + display: inline-block; +} + +.actions-bar .actions > div { + display: inline-block; +} + +.actions-bar .actions a { + font-size: 24px; + line-height: 50px; + color: #fff; + font-weight: 300; +} + +.actions-bar .actions .dac-sprite { + margin: 0 -6px 0 -12px; + -webkit-transition: all 190ms ease-out; + transition: all 190ms ease-out; +} + +.actions-bar .actions a:hover .dac-sprite { + + transform: translateX(5px); +} + +@media (max-width: 719px) { + .actions-bar .actions > div { + display: block; + } +} + + +/* + Specific styles for new home page layout of the carousels. +*/ + +/* Big blue button */ +a.home-new-cta-btn, +.home-new-carousel-1 .resource-card-18x6 .cta { + white-space: nowrap; + display: inline-block; + padding: 14px 32px; + font-size: 18px; + font-weight: 500; + line-height: 24px; + cursor: pointer; + background: #33b5e6; + border-radius: 4px; + margin-top: 20px; + color: #fff; + transition: 0.2s background-color ease-in-out; +} + +.home-new-carousel-1 .resource-card-18x6 .cta:after { + display: none; /* Hide the entity for this button */ +} + +a.home-new-cta-btn:hover, +.home-new-carousel-1 .resource-card-18x6 .cta:hover { + color: #fff !important; + background: #2d9fca; +} + +.home-new-carousel-1 .resource-card-18x6 .cta { + position: absolute; + bottom: 20px; + left: 16px; +} + +/* Fullscreen carousel. */ +.home-new-carousel-1 { + max-height: 700px; /* Set max height so doesn't get too long */ +} + +.home-new-carousel-1 .fullscreen-carousel-content { + min-height: 450px; /* Set min height for all content */ +} + +.home-new-carousel-1 .hero { + background: #000; +} + +.home-new-carousel-1 .hero-bg { + background-image: url(/home-new/images/hero.jpg); + background-position: right center; + opacity: 0.85; +} + +/* + Styling for special top card of full screen layout resource layout. + We need to specifically style the 18x6 card to adjust its size and layout, + since it's not a standard card, not sure if this is unique to the home page + layout or should be namespaced within the fullscreen-carousel container. +*/ +.home-new-carousel-1 .resource-flow-layout.col-16 .resource-card-18x6 { + height: 320px; + background-color:#F9F9F9; + border-radius: 0px; + box-shadow: 0px 0px 0px rgba(0, 0, 0, 0); + +} + +.home-new-carousel-1 .resource-card-18x6 .card-bg { + width: 636px; + height: 100%; +} + +.home-new-carousel-1 .resource-card-18x6 .card-info { + right: 0px; + left: 636px; + height: 100%; + top: 0px; + padding: 15px 22px; +} + +.home-new-carousel-1 .resource-card-18x6 .card-info .util { + display: none; +} + +.home-new-carousel-1 .resource-card-18x6 .card-info .title { + font-size: 20px; + font-weight: 500; + margin-top: 15px; + margin-bottom: 15px; +} + +.home-new-carousel-1 .resource-card-18x6 .card-info .text { + font-size: 15px; + line-height: 21px; +} + + +/* Tabbed carousel. */ +.home-new-carousel-2 { + margin: 35px auto 100px auto; +} + +.home-new-carousel-2 h1 { + font-size: 47px; + font-weight: 100; + line-height: 54px; + text-align: center; +} + +.annotation-message { + display: block; + font-style: italic; + color: #F80; +} + + + +/* Helpouts widget */ +.resource-card-6x2.helpouts-card { + width: 255px; + height: 40px; + position:absolute; + z-index:999; + top:-8px; + right:1px; +} + +.resource-card-6x2.helpouts-card > .card-info { + left:35px; + height:35px; + padding:4px 8px 4px 0; +} + +.resource-card-6x2.helpouts-card > .card-info .helpouts-description { + display:block; + overflow:visible; + font-size:12px; + line-height:12px; + text-align:right; + color:#666; +} + +.helpouts-description .link-color { + text-transform: uppercase; +} + +.resource-card-6x2 > .card-bg.helpouts-card-bg { + width:35px; + height:35px; + margin:2px 0 0 0; + background-image: url(../images/styles/helpouts-logo-35_2x.png); + background-image: -webkit-image-set(url(../images/styles/helpouts-logo-35.png) 1x, url(../images/styles/helpouts-logo-35_2x.png) 2x); +} + +.resource-card-6x2 > .card-bg.helpouts-card-bg:after { + display:none; +} + +.dac-visible-mobile-block, .dac-mobile-only, .dac-visible-mobile-inline, .dac-visible-mobile-inline-block, .dac-visible-tablet-block, .dac-visible-tablet-inline, .dac-visible-tablet-inline-block, .dac-visible-desktop-block, .dac-visible-desktop-inline, .dac-visible-desktop-inline-block { + display: none !important; +} + +@media (max-width: 719px) { + .dac-hidden-mobile { + display: none !important; + } + + .dac-visible-mobile-block, .dac-mobile-only { + display: block !important; + } + + .dac-visible-mobile-inline { + display: inline !important; + } + + .dac-visible-mobile-inline-block { + display: inline-block !important; + } +} + +@media (min-width: 720px) and (max-width: 979px) { + .dac-hidden-tablet { + display: none !important; + } + + .dac-visible-tablet-block { + display: block !important; + } + + .dac-visible-tablet-inline { + display: inline !important; + } + + .dac-visible-tablet-inline-block { + display: inline-block !important; + } +} + +@media (min-width: 980px) { + .dac-hidden-desktop { + display: none !important; + } + + .dac-visible-desktop-block { + display: block !important; + } + + .dac-visible-desktop-inline { + display: inline !important; + } + + .dac-visible-desktop-inline-block { + display: inline-block !important; + } +} + +.dac-offset-parent { + position: relative !important; +} + +/* New CSS */ +/************ RESOURCE CARDS ******************/ /* Basic card-styling with shadow */ .resource-card { - border-radius: 1px; - box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.12); - background: #fefefe; + background: #fff; + box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.21); + display: block; + position: relative; } /* Styling for background image including tinting and section icons in stacks */ .card-bg { + bottom: 131px; display: block; position: absolute; vertical-align: top; @@ -5321,21 +5543,22 @@ a.download-sdk { background-position: center; background-image: url(../images/resource-card-default-android.jpg); } + .card-bg:after { content: ""; display: block; height: 100%; width: 100%; opacity: 1; - background: rgba(0, 0, 0, 0.2); + background: rgba(0, 0, 0, 0.05); -webkit-transition: opacity 0.5s; - -moz-transition: opacity 0.5s; - -o-transition: opacity 0.5s; transition: opacity 0.5s; } + .static .card-bg:after { - display:none; + display: none; } + .card-bg .card-section-icon { position: absolute; top: 50%; @@ -5345,6 +5568,7 @@ a.download-sdk { padding-top: 65px; z-index: 100; } + .card-bg .card-section-icon .icon { position: absolute; left: 50%; @@ -5356,6 +5580,7 @@ a.download-sdk { background-position: 50% 50%; background-image: url(../images/stack-icon.png); } + .card-bg .card-section-icon .section { text-transform: uppercase; color: white; @@ -5364,142 +5589,127 @@ a.download-sdk { .card-info { position: absolute; - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; box-sizing: border-box; - top: 0; + height: 131px; right: 0; bottom: 0; left: 0; overflow: hidden; background: #fefefe; - padding: 4px 12px 6px 12px; + padding: 6px 12px; } + .card-info .section { - text-transform: uppercase; color: #898989; - font-size: 12px; - margin-bottom: 1px; + font-size: 11px; + font-weight: 700; + letter-spacing: .3px; + line-height: 20px; + text-transform: uppercase; } + .card-info .title { - color: #363636; - white-space: nowrap; + color: #333; + font-size: 18px; + font-weight: 500; + line-height: 24px; + margin-bottom: 2px; + max-height: 48px; overflow: hidden; - text-overflow: ellipsis; padding-bottom: 5px; - margin-bottom: -2px; - font-size: 16px; + text-overflow: ellipsis; + white-space: normal; } + .card-info .description { overflow: hidden; } + .card-info .description .text { - color: #464646; - font: 13px/15px Roboto Condensed; + color: #666; + font-size: 14px; + height: 60px; + line-height: 20px; overflow: hidden; - width:100%; + width: 100%; } + .card-info .description .util { position: absolute; right: 5px; - bottom: 70px; /*-2px;*/ + bottom: 70px; opacity: 0; -webkit-transition: opacity 0.5s; - -moz-transition: opacity 0.5s; - -o-transition: opacity 0.5s; transition: opacity 0.5s; } + .card-info.empty-desc .title { white-space: normal; overflow: visible; } + .card-info.empty-desc .description { display: none; } + /* Truncate card summaries at bounding box and * and apply ellipsis at lower right */ .ellipsis { overflow: hidden; - float:right; + float: right; line-height: 15px; - width:100%; -} -.resource-card-6x6 .card-info .description .teddddddxt { - float:left; - position:relative; - margin-left:0; + width: 100%; } + .ellipsis:before { - content:""; + content: ""; float: left; width: 5px; - height:100%; + height: 100%; } + .ellipsis > *:first-child.text { float: right; - width: 100% !important; + width: 100% !important; margin-left: -5px; } + .ellipsis:after { content: "\02026"; - height:17px; - padding-bottom:4px; - + height: 17px; + padding-bottom: 4px; box-sizing: content-box; - -webkit-box-sizing: content-box; - -moz-box-sizing: content-box; - - float: right; position: relative; - top: -16px; left: 100%; - width: 4em; margin-left: -4em; + float: right; + position: relative; + top: -16px; + left: 100%; + width: 4em; + margin-left: -4em; padding-right: 5px; - - background: -webkit-gradient(linear, left top, right top, - from(rgba(255, 255, 255, 0)), to(white), color-stop(65%, white)); - background: -moz-linear-gradient(to right, rgba(255, 255, 255, 0), white 65%, white); - background: -o-linear-gradient(to right, rgba(255, 255, 255, 0), white 65%, white); - background: -ms-linear-gradient(to right, rgba(255, 255, 255, 0), white 65%, white); + background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), to(white), color-stop(65%, white)); + background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0), white 65%, white); background: linear-gradient(to right, rgba(255, 255, 255, 0), white 65%, white); } + .ellipsis:after { - font-style: normal; color: #aaa; - font-size:13px; + font-style: normal; + color: #aaa; + font-size: 13px; text-align: right; } -/* Flow Layout */ -.resource-flow-layout { - display: inline-block; -} -.resource-flow-layout .resource-card, .resource-flow-layout .resource-card-stack { - float: left; - position: relative; -} -.resource-flow-layout .resource-card-stack > .resource-card { - margin-right: 0px !important; -} -.resource-flow-layout:after { - content: "."; - display: block; - height: 0; - position:relative; - clear: both; - visibility: hidden; -} .resource-card:hover { cursor: pointer; } + .static .resource-card:hover { cursor: auto; } + .resource-card:hover .card-bg:after { opacity: 0; } -/* disabled to make way for fade/ellipsis truncation, - and the plusone moves up. -.resource-card:hover .card-info .description .text { - padding-right: 70px; -} */ + .resource-card:hover .card-info .description .util { opacity: 1; } @@ -5507,93 +5717,109 @@ a.download-sdk { /* Carousel Layout */ /* Carousel styles for landing page */ .resource-carousel-layout { + height: 531px; margin: 20px 0 20px 0; + padding: 0 !important; position: relative; overflow: hidden; } + .resource-carousel-layout .slideshow-prev, .resource-carousel-layout .slideshow-next { display: none; } + .resource-carousel-layout .pagination { - bottom: 0px; + bottom: 97px; + left: auto; + padding-right: 10px; + right: 0; + text-align: right; + width: 16.66666667%; +} + +.resource-carousel-layout .pagination ul li { + text-indent: 8000px; } + .resource-carousel-layout .frame li { position: relative; } + .resource-carousel-layout .frame li .card-bg { - height: 300px; + bottom: 131px; } + .resource-carousel-layout .frame li .card-info { - padding: 7px 15px 0px 15px; - top: 300px; -} -.resource-carousel-layout .frame li .card-info .section { - font-size: 13px; - margin-bottom: 7px; + height: 131px; + padding: 6px 12px; + top: auto; } + .resource-carousel-layout .frame li .card-info .title { - font-size: 25px; - margin-bottom: 2px; -} -.resource-carousel-layout .frame li .card-info .description { - font-family: 15px/16px Roboto Condensed, sans-serif; + font-size: 28px; + font-weight: 400; + line-height: 32px; } + .resource-carousel-layout .frame li .card-info .description .text { height: 40px; } + .resource-carousel-layout .frame li .card-info .description .util { - bottom:97px; - right:4px; + bottom: 97px; + right: 4px; } /* Stack Layout */ .resource-stack-layout { display: inline-block; + padding: 0; } -.resource-stack-layout .resource-card-stack { - float: left; - position: relative; -} -.resource-stack-layout .resource-card { - margin-bottom: 20px; - display: block; - position: relative; -} + .resource-stack-layout .section-card-menu > .card-info .section, .resource-stack-layout .section-card > .card-info .title { - /*text-transform: uppercase;*/ + /*text-transform: uppercase;*/ color: #898989; font-size: 17px; line-height: 24px; margin-bottom: 6px; } + .resource-stack-layout .section-card { height: 284px; } + .resource-stack-layout .section-card > .card-bg { height: 192px; } + .resource-stack-layout .section-card > .card-info { padding: 4px 12px 6px 12px; top: 192px; } + .resource-stack-layout .section-card > .card-info .section { display: none; } + .resource-stack-layout .section-card > .card-info .title { font-size: 17px; border-bottom: 1px solid #959595; padding-bottom: 0px; } + .resource-stack-layout .section-card > .card-info .description { font-size: 13px; line-height: 15px; } + .resource-stack-layout .section-card > .card-info .description .text { height: 30px; } + .resource-stack-layout .related-card { height: 90px; } + .resource-stack-layout .related-card > .card-bg { left: 0; top: 0; @@ -5602,15 +5828,18 @@ a.download-sdk { position: absolute; display: block; } + .resource-stack-layout .related-card > .card-info { left: 90px; padding: 4px 12px 4px 12px; } + .resource-stack-layout .related-card > .card-info .section { font-size: 12px; margin-bottom: 1px; display: none; } + .resource-stack-layout .related-card > .card-info .title { font-size: 16px; margin-bottom: -2px; @@ -5618,39 +5847,46 @@ a.download-sdk { overflow: visible; text-overflow: ellipsis; } + .resource-stack-layout .related-card > .card-info .title:after { content: url(../images/link-out.png); display: block; } + .resource-stack-layout .related-card > .card-info .description { display: none; } + .resource-stack-layout .section-card-menu { - /* Flexible height */ + /* Flexible height */ display: block; height: auto; width: auto; } + .resource-stack-layout .section-card-menu .card-bg { height: 155px; - /* Flexible height */ + /* Flexible height */ position: relative; display: inline-block; vertical-align: top; } + .resource-stack-layout .section-card-menu .card-info { padding: 4px 12px 0px 12px; - /* Flexible height */ + /* Flexible height */ position: relative; left: auto; top: auto; right: auto; bottom: auto; } + .resource-stack-layout .section-card-menu .card-info ul { list-style: none; margin: 0; } + .resource-stack-layout .section-card-menu .card-info ul li { list-style: none; margin: 0; @@ -5659,39 +5895,39 @@ a.download-sdk { border-top-style: solid; border-top-color: #959595; } + .resource-stack-layout .section-card-menu .card-info ul li a, .resource-stack-layout .section-card-menu .card-info ul li a:focus, .resource-stack-layout .section-card-menu .card-info ul li a:link, .resource-stack-layout .section-card-menu .card-info ul li a:visited, .resource-stack-layout .section-card-menu .card-info ul li a:active, .resource-stack-layout .section-card-menu .card-info ul li a:hover { - color: #363636 !important; + color: #333 !important; } + .resource-stack-layout .section-card-menu .card-info ul li:first-child { border-top: none; } + .resource-stack-layout .section-card-menu .card-info ul li:hover .title:after { opacity: 1; -webkit-transition: opacity 0.5s; - -moz-transition: opacity 0.5s; - -o-transition: opacity 0.5s; transition: opacity 0.5s; } + .resource-stack-layout .section-card-menu .card-info ul li:hover .description { max-height: 30px; opacity: 1; -webkit-transition: max-height 0.5s, opacity 1s; - -moz-transition: max-height 0.5s, opacity 1s; - -o-transition: max-height 0.5s, opacity 1s; transition: max-height 0.5s, opacity 1s; } + .resource-stack-layout .section-card-menu .card-info .title { font-size: 16px; margin-bottom: -2px; position: relative; } + .resource-stack-layout .section-card-menu .card-info .title:after { background: url(../images/stack-arrow-right.png); content: ''; opacity: 0; -webkit-transition: opacity 0.25s; - -moz-transition: opacity 0.25s; - -o-transition: opacity 0.25s; transition: opacity 0.25s; position: absolute; right: 0px; @@ -5699,11 +5935,13 @@ a.download-sdk { width: 10px; height: 15px; } + .resource-stack-layout .section-card-menu .card-info .title.more { text-transform: uppercase; color: #898989; display: inline-block; } + .resource-stack-layout .section-card-menu .card-info .title.more:after { background: url(../images/stack-arrow-right.png); content: ''; @@ -5714,21 +5952,22 @@ a.download-sdk { width: 10px; height: 15px; } + .resource-stack-layout .section-card-menu .card-info .description { max-height: 0px; opacity: 0; overflow: hidden; font-size: 13px; line-height: 15px; - /* Hover off */ + /* Hover off */ -webkit-transition: max-height 0.5s, opacity 0.5s; - -moz-transition: max-height 0.5s, opacity 0.5s; - -o-transition: max-height 0.5s, opacity 0.5s; transition: max-height 0.5s, opacity 0.5s; } + .resource-stack-layout .section-card-menu .card-info .description .text { height: 30px; } + .resource-stack-layout:after { content: "."; display: block; @@ -5737,1716 +5976,2704 @@ a.download-sdk { visibility: hidden; } -/* Generate the flow layout styles for a 3-column 16-col span */ -.resource-flow-layout.col-16 { - margin: 0 -14px 0 0; - width: 954px; -} -.resource-flow-layout.col-16 .resource-card, .resource-flow-layout.col-16 .resource-card-stack { - margin: 0 14px 20px 0; +.resource-card, .resource-card-stack { + margin-bottom: 20px; } -.resource-flow-layout.col-16 .resource-card-row-stack-last { + +.resource-card-row-stack-last { margin-bottom: 0px !important; } -.resource-flow-layout.col-16 .resource-card-col-stack-last { + +.resource-card-col-stack-last { margin-bottom: 0px !important; } -.resource-flow-layout.col-16 .resource-card-3x6 { - width: 145px; - height: 284px; + +.resource-card-3x6 { + height: 300px; } -.resource-flow-layout.col-16 .resource-card-3x12 { - width: 145px; - height: 588px; + +.resource-card-3x12 { + height: 620px; } -.resource-flow-layout.col-16 .resource-card-3x18 { - width: 145px; - height: 892px; + +.resource-card-3x18 { + height: 940px; } -.resource-flow-layout.col-16 .resource-card-6x6 { - width: 304px; - height: 284px; + +.resource-card-6x6 { + height: 300px; } -.resource-flow-layout.col-16 .resource-card-6x12 { - width: 304px; - height: 588px; + +.resource-card-6x12 { + height: 620px; } -.resource-flow-layout.col-16 .resource-card-6x18 { - width: 304px; - height: 892px; + +.resource-card-6x18 { + height: 940px; } -.resource-flow-layout.col-16 .resource-card-9x6 { - width: 463px; - height: 284px; + +.resource-card-9x6 { + height: 300px; } -.resource-flow-layout.col-16 .resource-card-9x12 { - width: 463px; - height: 588px; + +.resource-card-9x12 { + height: 620px; } -.resource-flow-layout.col-16 .resource-card-9x18 { - width: 463px; - height: 892px; + +.resource-card-9x18 { + height: 940px; } -.resource-flow-layout.col-16 .resource-card-12x6 { - width: 622px; - height: 284px; + +.resource-card-12x6 { + height: 300px; } -.resource-flow-layout.col-16 .resource-card-12x12 { - width: 622px; - height: 588px; + +.resource-card-12x12 { + height: 620px; } -.resource-flow-layout.col-16 .resource-card-12x18 { - width: 622px; - height: 892px; + +.resource-card-12x18 { + height: 940px; } -.resource-flow-layout.col-16 .resource-card-15x6 { - width: 781px; - height: 284px; + +.resource-card-15x6 { + height: 300px; } -.resource-flow-layout.col-16 .resource-card-15x12 { - width: 781px; - height: 588px; + +.resource-card-15x12 { + height: 620px; } -.resource-flow-layout.col-16 .resource-card-15x18 { - width: 781px; - height: 892px; + +.resource-card-15x18 { + height: 940px; } -.resource-flow-layout.col-16 .resource-card-18x6 { - width: 940px; - height: 284px; + +.resource-card-18x6 { + height: 300px; } -.resource-flow-layout.col-16 .resource-card-18x12 { - width: 940px; - height: 420px; + +.resource-card-18x12 { + height: 620px; } -.resource-flow-layout.col-16 .resource-card-18x18 { - width: 940px; - height: 892px; + +.resource-card-18x18 { + height: 940px; } -.resource-flow-layout.col-16 .resource-card-3x2 { - width: 145px; - height: 95px; + +.resource-card-3x2 { + height: 100px; } -.resource-flow-layout.col-16 .resource-card-3x2x3 { - width: 145px; + +.resource-card-3x2x3 { height: 90px; - margin-bottom: 7px; + margin-bottom: 15px; } -.resource-flow-layout.col-16 .resource-card-3x3 { - width: 145px; - height: 142px; + +.resource-card-3x3 { + height: 150px; } -.resource-flow-layout.col-16 .resource-card-3x3x2 { - width: 145px; - height: 138px; - margin-bottom: 8px; + +.resource-card-3x3x2 { + height: 142px; + margin-bottom: 16px; } -.resource-flow-layout.col-16 .resource-card-6x2 { - width: 304px; - height: 95px; + +.resource-card-6x2 { + height: 100px; } -.resource-flow-layout.col-16 .resource-card-6x2x3 { - width: 304px; + +.resource-card-6x2x3 { height: 90px; - margin-bottom: 7px; + margin-bottom: 15px; } -.resource-flow-layout.col-16 .resource-card-6x3 { - width: 304px; - height: 142px; + +.resource-card-6x3 { + height: 150px; } -.resource-flow-layout.col-16 .resource-card-6x3x2 { - width: 304px; - height: 138px; - margin-bottom: 8px; + +.resource-card-6x3x2 { + height: 142px; + margin-bottom: 16px; } -.resource-flow-layout.col-16 .resource-card-9x2 { - width: 463px; - height: 95px; + +.resource-card-9x2 { + height: 100px; } -.resource-flow-layout.col-16 .resource-card-9x2x3 { - width: 463px; + +.resource-card-9x2x3 { height: 90px; - margin-bottom: 7px; + margin-bottom: 15px; } -.resource-flow-layout.col-16 .resource-card-9x3 { - width: 463px; - height: 142px; + +.resource-card-9x3 { + height: 150px; } -.resource-flow-layout.col-16 .resource-card-9x3x2 { - width: 463px; - height: 138px; - margin-bottom: 8px; + +.resource-card-9x3x2 { + height: 142px; + margin-bottom: 16px; } -.resource-flow-layout.col-16 .resource-card-12x2 { - width: 622px; - height: 95px; + +.resource-card-12x2 { + height: 100px; } -.resource-flow-layout.col-16 .resource-card-12x2x3 { - width: 622px; + +.resource-card-12x2x3 { height: 90px; - margin-bottom: 7px; + margin-bottom: 15px; } -.resource-flow-layout.col-16 .resource-card-12x3 { - width: 622px; - height: 142px; + +.resource-card-12x3 { + height: 150px; } -.resource-flow-layout.col-16 .resource-card-12x3x2 { - width: 622px; - height: 138px; - margin-bottom: 8px; + +.resource-card-12x3x2 { + height: 142px; + margin-bottom: 16px; } -.resource-flow-layout.col-16 .resource-card-15x2 { - width: 781px; - height: 95px; + +.resource-card-15x2 { + height: 100px; } -.resource-flow-layout.col-16 .resource-card-15x2x3 { - width: 781px; + +.resource-card-15x2x3 { height: 90px; - margin-bottom: 7px; + margin-bottom: 15px; } -.resource-flow-layout.col-16 .resource-card-15x3 { - width: 781px; - height: 142px; + +.resource-card-15x3 { + height: 150px; } -.resource-flow-layout.col-16 .resource-card-15x3x2 { - width: 781px; - height: 138px; - margin-bottom: 8px; + +.resource-card-15x3x2 { + height: 142px; + margin-bottom: 16px; } -.resource-flow-layout.col-16 .resource-card-18x2 { - width: 940px; - height: 95px; + +.resource-card-18x2 { + height: 100px; } -.resource-flow-layout.col-16 .resource-card-18x2x3 { - width: 940px; + +.resource-card-18x2x3 { height: 90px; - margin-bottom: 7px; + margin-bottom: 15px; } -.resource-flow-layout.col-16 .resource-card-18x3 { - width: 940px; + +.resource-card-18x3 { + height: 150px; +} + +.resource-card-18x3x2 { height: 142px; + margin-bottom: 16px; } -.resource-flow-layout.col-16 .resource-card-18x3x2 { - width: 940px; - height: 138px; - margin-bottom: 8px; + +/* + The following are styles for cards in the flowlayout above, styled by the number of rows they span +*/ +/* Single row, 2 column items. */ +.resource-card-9x6 { + height: 390px; } -/* Generate the flow layout styles for a 3-column 16-col span */ -.resource-flow-layout.col-12 { - margin: 0 -14px 0 0; - width: 714px; +/* Double row, 1 column items. Eg full width video thumbnails. */ +.resource-card-18x12 { + height: 558px; } -.resource-flow-layout.col-12 .resource-card, .resource-flow-layout.col-12 .resource-card-stack { - margin: 0 14px 20px 0; +/* 1/3 row items */ +.resource-card-3x2 > .card-bg, .resource-card-6x2 > .card-bg, .resource-card-9x2 > .card-bg, .resource-card-12x2 > .card-bg, .resource-card-15x2 > .card-bg, .resource-card-18x2 > .card-bg { + left: 0; + top: 0; + width: 90px; + height: 100%; + position: absolute; + display: block; } -.resource-flow-layout.col-12 .resource-card-row-stack-last { - margin-bottom: 0px !important; + +.resource-card-3x2 > .card-info, .resource-card-6x2 > .card-info, .resource-card-9x2 > .card-info, .resource-card-12x2 > .card-info, .resource-card-15x2 > .card-info, .resource-card-18x2 > .card-info { + height: 100%; + left: 90px; + padding: 6px 12px; + overflow: hidden; } -.resource-flow-layout.col-12 .resource-card-col-stack-last { - margin-bottom: 0px !important; + +.resource-card-3x2 > .card-info .title, .resource-card-6x2 > .card-info .title, .resource-card-9x2 > .card-info .title, .resource-card-12x2 > .card-info .title, .resource-card-15x2 > .card-info .title, .resource-card-18x2 > .card-info .title { + max-height: 48px; + white-space: normal; } -.resource-flow-layout.col-12 .resource-card-3x6 { - width: 105px; - height: 284px; + +.resource-card-3x2 > .card-info .description, .resource-card-6x2 > .card-info .description, .resource-card-9x2 > .card-info .description, .resource-card-12x2 > .card-info .description, .resource-card-15x2 > .card-info .description, .resource-card-18x2 > .card-info .description { + display: none; } -.resource-flow-layout.col-12 .resource-card-3x12 { - width: 105px; - height: 588px; + +.resource-card-3x2 > .card-info .text, .resource-card-6x2 > .card-info .text, .resource-card-9x2 > .card-info .text, .resource-card-12x2 > .card-info .text, .resource-card-15x2 > .card-info .text, .resource-card-18x2 > .card-info .text { + height: auto; } -.resource-flow-layout.col-12 .resource-card-3x18 { - width: 105px; - height: 892px; + +/* Override to show the description instead of the content section */ +.no-section .resource-card-3x2 > .card-info .section, .no-section .resource-card-6x2 > .card-info .section { + display: none; } -.resource-flow-layout.col-12 .resource-card-6x6 { - width: 224px; - height: 284px; + +.no-section .resource-card-3x2 > .card-info .description, .no-section .resource-card-6x2 > .card-info .description { + display: block; } -.resource-flow-layout.col-12 .resource-card-6x12 { - width: 224px; - height: 588px; + +/* 1/2 row items */ +.resource-card-3x3, .resource-card-6x3, .resource-card-9x3, .resource-card-12x3, .resource-card-15x3, .resource-card-18x3 { + height: 160px; } -.resource-flow-layout.col-12 .resource-card-6x18 { - width: 224px; - height: 892px; + +.resource-card-3x3 > .card-bg, .resource-card-6x3 > .card-bg, .resource-card-9x3 > .card-bg, .resource-card-12x3 > .card-bg, .resource-card-15x3 > .card-bg, .resource-card-18x3 > .card-bg { + left: 0; + top: 0; + width: 90px; + height: 100%; + position: absolute; + display: block; } -.resource-flow-layout.col-12 .resource-card-9x6 { - width: 343px; - height: 284px; + +.resource-card-3x3 > .card-info, .resource-card-6x3 > .card-info, .resource-card-9x3 > .card-info, .resource-card-12x3 > .card-info, .resource-card-15x3 > .card-info, .resource-card-18x3 > .card-info { + height: 100%; + left: 90px; + padding: 6px 12px; } -.resource-flow-layout.col-12 .resource-card-9x12 { - width: 343px; - height: 588px; + +.resource-card-3x3 > .card-info .section, .resource-card-6x3 > .card-info .section, .resource-card-9x3 > .card-info .section, .resource-card-12x3 > .card-info .section, .resource-card-15x3 > .card-info .section, .resource-card-18x3 > .card-info .section { + display: none; } -.resource-flow-layout.col-12 .resource-card-9x18 { - width: 343px; - height: 892px; + +.resource-card-3x3 > .card-info .title, .resource-card-6x3 > .card-info .title, .resource-card-9x3 > .card-info .title, .resource-card-12x3 > .card-info .title, .resource-card-15x3 > .card-info .title, .resource-card-18x3 > .card-info .title { + max-height: 96px; + white-space: normal; } -.resource-flow-layout.col-12 .resource-card-12x6 { - width: 462px; - height: 284px; + +.resource-card-3x3 > .card-info .text, .resource-card-6x3 > .card-info .text, .resource-card-9x3 > .card-info .text, .resource-card-12x3 > .card-info .text, .resource-card-15x3 > .card-info .text, .resource-card-18x3 > .card-info .text { + height: auto; } -.resource-flow-layout.col-12 .resource-card-12x12 { - width: 462px; - height: 588px; + +.resource-card-3x3 > .card-info .util, .resource-card-6x3 > .card-info .util, .resource-card-9x3 > .card-info .util, .resource-card-12x3 > .card-info .util, .resource-card-15x3 > .card-info .util, .resource-card-18x3 > .card-info .util { + display: none; } -.resource-flow-layout.col-12 .resource-card-12x18 { - width: 462px; - height: 892px; + +/* placement of plusone */ +.resource-card-6x12 > .card-info .description .util, .resource-card-9x12 > .card-info .description .util, .resource-card-12x12 > .card-info .description .util, .resource-card-15x12 > .card-info .description .util { + bottom: 2px; } -.resource-flow-layout.col-12 .resource-card-15x6 { - width: 581px; - height: 284px; + +.resource-card-18x12 > .card-info .description .util { + bottom: 2px; } -.resource-flow-layout.col-12 .resource-card-15x12 { - width: 581px; - height: 588px; + +/* Overrides for col-16 6x6 cards linking to local content on landing pages. + Suppresses "section". */ +.landing .card-info .section { + display: none; } -.resource-flow-layout.col-12 .resource-card-15x18 { - width: 581px; - height: 892px; + +/* + Generate a resource stack layout for a 3 column widget spanning 16 grid cols +*/ +.resource-stack-layout.col-16 { + margin: 0 -14px 0 0; + width: 954px; } -.resource-flow-layout.col-12 .resource-card-18x6 { - width: 700px; - height: 284px; + +.resource-stack-layout.col-16 .resource-card-stack { + margin: 0 14px 0 0; + width: 304px; } -.resource-flow-layout.col-12 .resource-card-18x12 { - width: 700px; - height: 420px; + +/* Example of card menu tinting */ +.resource-widget[data-section=distribute\/tools] .section-card-menu .card-bg:after { + background: rgba(126, 55, 148, 0.4) !important; } -.resource-flow-layout.col-12 .resource-card-18x18 { - width: 700px; - height: 892px; + +.resource-widget[data-section=distribute\/tools] .section-card-menu .card-section-icon .icon { + background-color: #7e3794 !important; } -.resource-flow-layout.col-12 .resource-card-3x2 { - width: 105px; - height: 95px; + +.resource-widget[data-section=distribute\/tools] .section-card-menu .card-info ul li { + border-top-color: #7e3794 !important; } -.resource-flow-layout.col-12 .resource-card-3x2x3 { - width: 105px; - height: 90px; - margin-bottom: 7px; + +/* tinting for stacks */ +div.jd-descr > .resource-widget[data-section=distribute\/tools] .section-card-menu .card-info ul li { + border-top-color: #7e3794 !important; } -.resource-flow-layout.col-12 .resource-card-3x3 { - width: 105px; - height: 142px; + +.dac-fab, .button, .landing-button, .dac-button { + background: transparent; + border: 0; + box-sizing: border-box; + color: currentColor; + cursor: pointer; + display: inline-block; + font-weight: 500; + font-size: 14px; + font-style: inherit; + font-variant: inherit; + font-family: inherit; + letter-spacing: .5px; + line-height: 24px; + margin: 6px 16px 6px 0; + min-width: 88px; + outline: 0; + padding: 6px 12px; + position: relative; + text-align: center; + text-decoration: none; + text-transform: uppercase; + -webkit-transition: box-shadow 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), background-color 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); + transition: box-shadow 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), background-color 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + white-space: nowrap; } -.resource-flow-layout.col-12 .resource-card-3x3x2 { - width: 105px; - height: 138px; - margin-bottom: 8px; + +.button, .landing-button, .dac-button.dac-raised { + background-color: #FAFAFA; + box-shadow: 0 2px 5px rgba(0, 0, 0, 0.26); } -.resource-flow-layout.col-12 .resource-card-6x2 { - width: 224px; - height: 95px; + +.dac-button.dac-raised.dac-primary, .landing-secondary, .button { + background-color: #039bef; } -.resource-flow-layout.col-12 .resource-card-6x2x3 { - width: 224px; - height: 90px; - margin-bottom: 7px; + +.dac-button.dac-raised.dac-primary:hover, .landing-secondary:hover, .button:hover { + background-color: #0288d1; } -.resource-flow-layout.col-12 .resource-card-6x3 { - width: 224px; - height: 142px; + +.dac-button.dac-raised.dac-primary:active, .landing-secondary:active, .button:active { + background-color: #0277bd; } -.resource-flow-layout.col-12 .resource-card-6x3x2 { - width: 224px; - height: 138px; - margin-bottom: 8px; + +.dac-button.dac-raised.dac-red, .landing-primary { + background-color: #bf3722; } -.resource-flow-layout.col-12 .resource-card-9x2 { - width: 343px; - height: 95px; + +.dac-button.dac-raised.dac-red:hover, .landing-primary:hover { + background-color: #9c2d1c; } -.resource-flow-layout.col-12 .resource-card-9x2x3 { - width: 343px; - height: 90px; - margin-bottom: 7px; + +.dac-button.dac-raised.dac-red:active, .landing-primary:active { + background-color: #822517; } -.resource-flow-layout.col-12 .resource-card-9x3 { - width: 343px; - height: 142px; + +.dac-button.dac-raised.dac-green, .landing-button.green { + background-color: #90C653; } -.resource-flow-layout.col-12 .resource-card-9x3x2 { - width: 343px; - height: 138px; - margin-bottom: 8px; + +.dac-button.dac-raised.dac-primary, .landing-secondary, .button, .dac-button.dac-raised.dac-red, .landing-primary, .dac-button.dac-raised.dac-green, .landing-button.green { + color: #fff; } -.resource-flow-layout.col-12 .resource-card-12x2 { - width: 462px; - height: 95px; + +.dac-button.dac-large, .landing-button { + padding: 12px 24px; } -.resource-flow-layout.col-12 .resource-card-12x2x3 { - width: 462px; - height: 90px; - margin-bottom: 7px; + +.dac-fab { + background: #fff; + box-shadow: 0 2px 5px rgba(0, 0, 0, 0.26); + border-radius: 50%; + font-size: 0; + height: 36px; + line-height: 36px; + min-width: 0; + overflow: hidden; + padding: 0; + vertical-align: middle; + width: 36px; } -.resource-flow-layout.col-12 .resource-card-12x3 { - width: 462px; - height: 142px; + +.dac-fab:hover, a:hover > .dac-fab { + box-shadow: 0 3px 8px rgba(0, 0, 0, 0.26); } -.resource-flow-layout.col-12 .resource-card-12x3x2 { - width: 462px; - height: 138px; - margin-bottom: 8px; + +.dac-fab.dac-primary { + background: #00c7a0; } -.resource-flow-layout.col-12 .resource-card-15x2 { - width: 581px; - height: 95px; + +.dac-fab.dac-large { + height: 54px; + line-height: 54px; + width: 54px; } -.resource-flow-layout.col-12 .resource-card-15x2x3 { - width: 581px; - height: 90px; - margin-bottom: 7px; + +.dac-scroll-button { + height: 54px; + line-height: 54px; + margin: 0; + position: absolute; + right: 0; + top: -27px; + width: 54px; + z-index: 1; } -.resource-flow-layout.col-12 .resource-card-15x3 { - width: 581px; - height: 142px; + +@media (max-width: 719px) { + .dac-scroll-button { + display: none; + } } -.resource-flow-layout.col-12 .resource-card-15x3x2 { - width: 581px; - height: 138px; - margin-bottom: 8px; + +/* Footer component */ +.dac-footer { + background-color: #fff; + border-top: 1px solid #f9f9f9; + clear: both; + color: #999; + font-size: 12px; + margin-top: 40px; + padding-bottom: 20px; + position: relative; } -.resource-flow-layout.col-12 .resource-card-18x2 { - width: 700px; - height: 95px; + +.dac-footer a { + color: #999; } -.resource-flow-layout.col-12 .resource-card-18x2x3 { - width: 700px; - height: 90px; - margin-bottom: 7px; + +.dac-footer p { + margin: 7px 0 0; } -.resource-flow-layout.col-12 .resource-card-18x3 { - width: 700px; - height: 142px; + +.dac-footer-main { + padding: 30px 0; } -.resource-flow-layout.col-12 .resource-card-18x3x2 { - width: 700px; - height: 138px; - margin-bottom: 8px; + +.dac-footer-reachout { + text-align: right; } -/* Generate the flow layout styles for a 3-column 13-col span */ +.dac-footer-contact, .dac-footer-social { + display: inline-block; +} -.resource-flow-layout.col-13 { - margin: 0 -14px 0 0; - width: 774px; +.dac-footer a.dac-footer-getnews, .dac-footer a.dac-footer-contact-link { + color: #000; + cursor: pointer; + font-size: 20px; + font-weight: 300; + margin: 0 8px; + vertical-align: middle; } -.resource-flow-layout.col-13 .resource-card, .resource-flow-layout.col-13 .resource-card-stack { - margin: 0 14px 20px 0; + +.dac-footer-getnews > .dac-fab { + margin-left: 4px; } -.resource-flow-layout.col-13 .resource-card-row-stack-last { - margin-bottom: 0px !important; + +.dac-footer-separator { + background: #f9f9f9; + margin: 0 0 12px; } -.resource-flow-layout.col-13 .resource-card-col-stack-last { - margin-bottom: 0px !important; + +.dac-footer-links a + a:before { + content: '|'; + cursor: default; + margin: 0 10px 0 8px; } -.resource-flow-layout.col-13 .resource-card-3x6 { - width: 115px; - height: 284px; + +.dac-footer .locales { + float: right; + margin: 0; } -.resource-flow-layout.col-13 .resource-card-3x12 { - width: 115px; - height: 588px; + +.dac-footer .locales select { + background-color: #f9f9f9; + border-radius: 0; + font-size: 12px; + height: auto; + margin-top: -2px; + padding: 8px 12px; } -.resource-flow-layout.col-13 .resource-card-3x18 { - width: 115px; - height: 892px; + +@media (max-width: 719px) { + .dac-footer-reachout { + text-align: left; + } + + .dac-footer-social { + display: block; + } + + .dac-footer-social-link, .dac-footer-contact-link { + display: inline-block; + margin-top: 20px; + } + + .dac-footer .locales { + display: block; + float: none; + margin-top: 15px; + } } -.resource-flow-layout.col-13 .resource-card-6x6 { - width: 244px; - height: 284px; + +/* ============================================================================= + Columns + ========================================================================== */ +.wrap { + margin: 0 auto; + max-width: 940px; + clear: both; } -.resource-flow-layout.col-13 .resource-card-6x12 { - width: 244px; - height: 588px; + +.cols { + margin-left: -10px; + margin-right: -10px; + /** + * For modern browsers + * 1. The space content is one way to avoid an Opera bug when the + * contenteditable attribute is included anywhere else in the document. + * Otherwise it causes space to appear at the top and bottom of elements + * that are clearfixed. + * 2. The use of `table` rather than `block` is only necessary if using + * `:before` to contain the top-margins of child elements. + */ +} + +.cols:before, .cols:after { + content: ' '; + /* 1 */ + display: table; + /* 2 */ } -.resource-flow-layout.col-13 .resource-card-6x18 { - width: 244px; - height: 892px; + +.cols:after { + clear: both; } -.resource-flow-layout.col-13 .resource-card-9x6 { - width: 373px; - height: 284px; + +[class*=col-] { + box-sizing: border-box; + float: left; + min-height: 1px; + padding-left: 10px; + padding-right: 10px; + position: relative; } -.resource-flow-layout.col-13 .resource-card-9x12 { - width: 373px; - height: 588px; + +.col-1 { + width: 6.25%; } -.resource-flow-layout.col-13 .resource-card-9x18 { - width: 373px; - height: 892px; + +.col-2 { + width: 12.5%; } -.resource-flow-layout.col-13 .resource-card-12x6 { - width: 502px; - height: 284px; + +.col-3 { + width: 18.75%; } -.resource-flow-layout.col-13 .resource-card-12x12 { - width: 502px; - height: 588px; + +.col-4 { + width: 25%; } -.resource-flow-layout.col-13 .resource-card-12x18 { - width: 502px; - height: 892px; + +.col-5 { + width: 31.25%; } -.resource-flow-layout.col-13 .resource-card-15x6 { - width: 631px; - height: 284px; + +.col-6 { + width: 37.5%; } -.resource-flow-layout.col-13 .resource-card-15x12 { - width: 631px; - height: 588px; + +.col-7 { + width: 43.75%; } -.resource-flow-layout.col-13 .resource-card-15x18 { - width: 631px; - height: 892px; + +.col-8 { + width: 50%; } -.resource-flow-layout.col-13 .resource-card-18x6 { - width: 760px; - height: 284px; + +.col-9 { + width: 56.25%; } -.resource-flow-layout.col-13 .resource-card-18x12 { - width: 760px; - height: 420px; + +.col-10 { + width: 62.5%; } -.resource-flow-layout.col-13 .resource-card-18x18 { - width: 760px; - height: 892px; + +.col-11 { + width: 68.75%; } -.resource-flow-layout.col-13 .resource-card-3x2 { - width: 115px; - height: 95px; + +.col-12 { + width: 75%; } -.resource-flow-layout.col-13 .resource-card-3x2x3 { - width: 115px; - height: 90px; - margin-bottom: 7px; + +.col-13 { + width: 81.25%; } -.resource-flow-layout.col-13 .resource-card-3x3 { - width: 115px; - height: 142px; + +.col-14 { + width: 87.5%; } -.resource-flow-layout.col-13 .resource-card-3x3x2 { - width: 115px; - height: 138px; - margin-bottom: 8px; + +.col-15 { + width: 93.75%; } -.resource-flow-layout.col-13 .resource-card-6x2 { - width: 244px; - height: 95px; + +.col-16 { + width: 100%; } -.resource-flow-layout.col-13 .resource-card-6x2x3 { - width: 244px; - height: 90px; - margin-bottom: 7px; + +.col-13 .col-1 { + width: 7.69230769%; } -.resource-flow-layout.col-13 .resource-card-6x3 { - width: 244px; - height: 142px; + +.col-13 .col-2 { + width: 15.38461538%; } -.resource-flow-layout.col-13 .resource-card-6x3x2 { - width: 244px; - height: 138px; - margin-bottom: 8px; + +.col-13 .col-3 { + width: 23.07692308%; } -.resource-flow-layout.col-13 .resource-card-9x2 { - width: 373px; - height: 95px; + +.col-13 .col-4 { + width: 30.76923077%; } -.resource-flow-layout.col-13 .resource-card-9x2x3 { - width: 373px; - height: 90px; - margin-bottom: 7px; + +.col-13 .col-5 { + width: 38.46153846%; } -.resource-flow-layout.col-13 .resource-card-9x3 { - width: 373px; - height: 142px; + +.col-13 .col-6 { + width: 46.15384615%; } -.resource-flow-layout.col-13 .resource-card-9x3x2 { - width: 373px; - height: 138px; - margin-bottom: 8px; + +.col-13 .col-7 { + width: 53.84615385%; } -.resource-flow-layout.col-13 .resource-card-12x2 { - width: 502px; - height: 95px; + +.col-13 .col-8 { + width: 61.53846154%; } -.resource-flow-layout.col-13 .resource-card-12x2x3 { - width: 502px; - height: 90px; - margin-bottom: 7px; + +.col-13 .col-9 { + width: 69.23076923%; } -.resource-flow-layout.col-13 .resource-card-12x3 { - width: 502px; - height: 142px; + +.col-13 .col-10 { + width: 76.92307692%; } -.resource-flow-layout.col-13 .resource-card-12x3x2 { - width: 502px; - height: 138px; - margin-bottom: 8px; + +.col-13 .col-11 { + width: 84.61538462%; } -.resource-flow-layout.col-13 .resource-card-15x2 { - width: 631px; - height: 95px; + +.col-13 .col-12 { + width: 92.30769231%; } -.resource-flow-layout.col-13 .resource-card-15x2x3 { - width: 631px; - height: 90px; - margin-bottom: 7px; + +.col-13 .col-13 { + width: 100%; } -.resource-flow-layout.col-13 .resource-card-15x3 { - width: 631px; - height: 142px; + +.col-12 .col-1 { + width: 8.33333333%; } -.resource-flow-layout.col-13 .resource-card-15x3x2 { - width: 631px; - height: 138px; - margin-bottom: 8px; + +.col-12 .col-2 { + width: 16.66666667%; } -.resource-flow-layout.col-13 .resource-card-18x2 { - width: 760px; - height: 95px; + +.col-12 .col-3 { + width: 25%; } -.resource-flow-layout.col-13 .resource-card-18x2x3 { - width: 760px; - height: 90px; - margin-bottom: 7px; + +.col-12 .col-4 { + width: 33.33333333%; } -.resource-flow-layout.col-13 .resource-card-18x3 { - width: 760px; - height: 142px; + +.col-12 .col-5 { + width: 41.66666667%; } -.resource-flow-layout.col-13 .resource-card-18x3x2 { - width: 760px; - height: 138px; - margin-bottom: 8px; + +.col-12 .col-6 { + width: 50%; } -/* - The following are styles for cards in the flowlayout above, styled by the number of rows they span -*/ -/* Single row items, might be simpler to just apply a class */ -.resource-card-3x6 > .card-bg, .resource-card-6x6 > .card-bg, .resource-card-9x6 > .card-bg, .resource-card-12x6 > .card-bg, .resource-card-15x6 > .card-bg, .resource-card-18x6 > .card-bg { - height: 192px; +.col-12 .col-7 { + width: 58.33333333%; } -.resource-card-3x6 > .card-info, .resource-card-6x6 > .card-info, .resource-card-9x6 > .card-info, .resource-card-12x6 > .card-info, .resource-card-15x6 > .card-info, .resource-card-18x6 > .card-info { - padding: 4px 12px 6px 12px; - top: 192px; + +.col-12 .col-8 { + width: 66.66666667%; } -.resource-card-3x6 > .card-info .section, .resource-card-6x6 > .card-info .section, .resource-card-9x6 > .card-info .section, .resource-card-12x6 > .card-info .section, .resource-card-15x6 > .card-info .section, .resource-card-18x6 > .card-info .section { - font-size: 12px; - margin-bottom: 1px; + +.col-12 .col-9 { + width: 75%; } -.resource-card-3x6 > .card-info .title, .resource-card-6x6 > .card-info .title, .resource-card-9x6 > .card-info .title, .resource-card-12x6 > .card-info .title, .resource-card-15x6 > .card-info .title, .resource-card-18x6 > .card-info .title { - font-size: 16px; - margin-bottom: -2px; + +.col-12 .col-10 { + width: 83.33333333%; } -.resource-card-3x6 > .card-info .description, .resource-card-6x6 > .card-info .description, .resource-card-9x6 > .card-info .description, .resource-card-12x6 > .card-info .description, .resource-card-15x6 > .card-info .description, .resource-card-18x6 > .card-info .description { - font-size: 13px; - line-height: 15px; + +.col-12 .col-11 { + width: 91.66666667%; } -.resource-card-3x6 > .card-info .description .text, .resource-card-6x6 > .card-info .description .text, .resource-card-9x6 > .card-info .description .text, .resource-card-12x6 > .card-info .description .text, .resource-card-15x6 > .card-info .description .text, .resource-card-18x6 > .card-info .description .text { - height: 30px; + +.col-12 .col-12 { + width: 100%; } -/* Double row items */ -.resource-card-3x12 > .card-bg, .resource-card-6x12 > .card-bg, .resource-card-9x12 > .card-bg, .resource-card-12x12 > .card-bg, .resource-card-15x12 > .card-bg, .resource-card-18x12 > .card-bg { - height: 320px; +.col-1of1, .col-2of2, .col-3of3, .col-4of4, .col-5of5, .col-6of6, .col-8of8, .col-10of10, .col-12of12, .col-16of16 { + width: 100%; } -.resource-card-3x12 > .card-info, .resource-card-6x12 > .card-info, .resource-card-9x12 > .card-info, .resource-card-12x12 > .card-info, .resource-card-15x12 > .card-info, .resource-card-18x12 > .card-info { - padding: 4px 12px 6px 12px; - top: 320px; + +.col-1of2, .col-2of4, .col-3of6, .col-4of8, .col-5of10, .col-6of12, .col-8of16 { + width: 50%; } -.resource-card-3x12 > .card-info .section, .resource-card-6x12 > .card-info .section, .resource-card-9x12 > .card-info .section, .resource-card-12x12 > .card-info .section, .resource-card-15x12 > .card-info .section, .resource-card-18x12 > .card-info .section { - font-size: 12px; - margin-bottom: 1px; + +.col-1of3, .col-2of6, .col-4of12 { + width: 33.33333333%; } -.resource-card-3x12 > .card-info .title, .resource-card-6x12 > .card-info .title, .resource-card-9x12 > .card-info .title, .resource-card-12x12 > .card-info .title, .resource-card-15x12 > .card-info .title, .resource-card-18x12 > .card-info .title { - font-size: 16px; - margin-bottom: -2px; - white-space: normal; + +.col-2of3, .col-4of6, .col-8of12 { + width: 66.66666667%; } -.resource-card-3x12 > .card-info .description, .resource-card-6x12 > .card-info .description, .resource-card-9x12 > .card-info .description, .resource-card-12x12 > .card-info .description, .resource-card-15x12 > .card-info .description, .resource-card-18x12 > .card-info .description { - font-size: 13px; - line-height: 15px; + +.col-1of4, .col-2of8, .col-3of12, .col-4of16 { + width: 25%; } -/* 1/3 row items */ -.resource-card-3x2 > .card-bg, .resource-card-6x2 > .card-bg, .resource-card-9x2 > .card-bg, .resource-card-12x2 > .card-bg, .resource-card-15x2 > .card-bg, .resource-card-18x2 > .card-bg { - left: 0; - top: 0; - width: 90px; - height: 100%; - position: absolute; - display: block; +.col-3of4, .col-6of8, .col-9of12, .col-12of16 { + width: 75%; } -.resource-card-3x2 > .card-info, .resource-card-6x2 > .card-info, .resource-card-9x2 > .card-info, .resource-card-12x2 > .card-info, .resource-card-15x2 > .card-info, .resource-card-18x2 > .card-info { - left: 90px; - padding: 4px 12px 4px 12px; - height: 80px; - overflow: hidden; + +.col-1of5, .col-2of10 { + width: 20%; } -.resource-card-3x2 > .card-info .section, .resource-card-6x2 > .card-info .section, .resource-card-6x3 > .card-info .section, .resource-card-9x2 > .card-info .section, .resource-card-12x2 > .card-info .section, .resource-card-15x2 > .card-info .section, .resource-card-18x2 > .card-info .section { - font-size: 12px; - margin-bottom: 1px; - /* display: none; */ + +.col-2of5, .col-4of10 { + width: 40%; } -.resource-card-3x2 > .card-info .title, .resource-card-6x2 > .card-info .title, .resource-card-9x2 > .card-info .title, .resource-card-12x2 > .card-info .title, .resource-card-15x2 > .card-info .title, .resource-card-18x2 > .card-info .title { - font-size: 16px; - margin-bottom: -2px; - white-space: normal; - overflow: visible; - text-overflow: ellipsis; + +.col-3of5, .col-6of10 { + width: 60%; } -.resource-card-3x2 > .card-info .title:after, .resource-card-6x2 > .card-info .title:after, .resource-card-9x2 > .card-info .title:after, .resource-card-12x2 > .card-info .title:after, .resource-card-15x2 > .card-info .title:after, .resource-card-18x2 > .card-info .title:after { - /* content: url(../images/link-out.png); */ - display: block; + +.col-4of5, .col-8of10 { + width: 80%; } -.resource-card-3x2 > .card-info .description, .resource-card-6x2 > .card-info .description, .resource-card-9x2 > .card-info .description, .resource-card-12x2 > .card-info .description, .resource-card-15x2 > .card-info .description, .resource-card-18x2 > .card-info .description { - display: none; + +.col-1of6, .col-2of12 { + width: 16.66666667%; } +.col-5of6, .col-10of12 { + width: 83.33333333%; +} -/* Override to show the description instead of the content section */ -.no-section .resource-card-3x2 > .card-info .section, -.no-section .resource-card-6x2 > .card-info .section { - display: none; +.col-1of8, .col-2of16 { + width: 12.5%; } -.no-section .resource-card-3x2 > .card-info .description, -.no-section .resource-card-6x2 > .card-info .description { - display: block; + +.col-3of8, .col-6of16 { + width: 37.5%; } -/* 1/2 row items */ -.resource-card-3x3 > .card-bg, .resource-card-6x3 > .card-bg, .resource-card-9x3 > .card-bg, .resource-card-12x3 > .card-bg, .resource-card-15x3 > .card-bg, .resource-card-18x3 > .card-bg { - left: 0; - top: 0; - width: 90px; - height: 100%; - position: absolute; - display: block; +.col-5of8, .col-10of16 { + width: 62.5%; } -.resource-card-3x3 > .card-info, .resource-card-6x3 > .card-info, .resource-card-9x3 > .card-info, .resource-card-12x3 > .card-info, .resource-card-15x3 > .card-info, .resource-card-18x3 > .card-info { - left: 90px; - padding: 4px 12px 0px 12px; + +.col-7of8, .col-14of16 { + width: 87.5%; } -.resource-card-3x3 > .card-info .section, .resource-card-6x3 > .card-info .section, .resource-card-9x3 > .card-info .section, .resource-card-12x3 > .card-info .section, .resource-card-15x3 > .card-info .section, .resource-card-18x3 > .card-info .section { - font-size: 12px; - margin-bottom: 1px; - display: none; + +.col-1of10 { + width: 10%; } -.resource-card-3x3 > .card-info .title, .resource-card-6x3 > .card-info .title, .resource-card-9x3 > .card-info .title, .resource-card-12x3 > .card-info .title, .resource-card-15x3 > .card-info .title, .resource-card-18x3 > .card-info .title { - font-size: 16px; - margin-bottom: -2px; - white-space: normal; - overflow: visible; + +.col-3of10 { + width: 30%; } -.resource-card-3x3 > .card-info .description .text, .resource-card-6x3 > .card-info .description .text, .resource-card-9x3 > .card-info .description .text, .resource-card-12x3 > .card-info .description .text, .resource-card-15x3 > .card-info .description .text, .resource-card-18x3 > .card-info .description .text { - font-size: 12px; - line-height: 15px; - padding-right: 0px !important; - height: 80px; + +.col-7of10 { + width: 70%; } -.resource-card-3x3 > .card-info .description .util, .resource-card-6x3 > .card-info .description .util, .resource-card-9x3 > .card-info .description .util, .resource-card-12x3 > .card-info .description .util, .resource-card-15x3 > .card-info .description .util, .resource-card-18x3 > .card-info .description .util { - display: none; + +.col-9of10 { + width: 90%; } -/* placement of plusone */ -.resource-card-6x12 > .card-info .description .util, .resource-card-9x12 > .card-info .description .util, .resource-card-12x12 > .card-info .description .util, .resource-card-15x12 > .card-info .description .util { - bottom:2px; + +.col-1of12 { + width: 8.33333333%; } -.resource-card-18x12 > .card-info .description .util { - bottom:2px; + +.col-5of12 { + width: 41.66666667%; } -/* Overrides for col-16 6x6 cards linking to local content on landing pages. - Suppresses "section" and puts the title above a hairline rule. */ -.landing .card-info .section, .resource-flow-layout.col-16.landing .resource-card-9x6 .card-info .section { - display:none; + +.col-7of12 { + width: 58.33333333%; } -.landing .card-info .title { - color: #898989; - font-size: 17px; - line-height: 24px; - margin-bottom: 6px; - border-bottom: 1px solid #959595; - padding-bottom: 0px; + +.col-11of12 { + width: 91.66666667%; } -.landing .card-info .description { - font-size: 13px; - line-height: 15px; + +.col-1of16 { + width: 6.25%; } -.landing .card-info .description .text { -height:30px; + +.col-3of16 { + width: 18.75%; } -.landing .resource-card-6x6 > .card-info .description .util, .landing .resource-card-9x6 > .card-info .description .util { - bottom:2px; + +.col-5of16 { + width: 31.25%; } -/* - Generate a resource stack layout for a 3 column widget spanning 16 grid cols -*/ -.resource-stack-layout.col-16 { - margin: 0 -14px 0 0; - width: 954px; + +.col-7of16 { + width: 43.75%; } -.resource-stack-layout.col-16 .resource-card-stack { - margin: 0 14px 0 0; - width: 304px; + +.col-9of16 { + width: 56.25%; } -/* Example of card menu tinting */ -.resource-widget[data-section=distribute\/tools] .section-card-menu -.card-bg:after { - background: rgba(126, 55, 148, 0.4) !important; +.col-11of16 { + width: 68.75%; } -.resource-widget[data-section=distribute\/tools] .section-card-menu -.card-section-icon .icon { - background-color: #7e3794 !important; + +.col-13of16 { + width: 81.25%; } -.resource-widget[data-section=distribute\/tools] .section-card-menu -.card-info ul li { - border-top-color: #7e3794 !important; + +.col-15of16 { + width: 93.75%; } -/* tinting for stacks */ +.col-pull-1of1, .col-pull-2of2, .col-pull-3of3, .col-pull-4of4, .col-pull-5of5, .col-pull-6of6, .col-pull-8of8, .col-pull-10of10, .col-pull-12of12, .col-pull-16of16 { + left: -100%; +} -div.jd-descr > .resource-widget[data-section=distribute\/tools] -.section-card-menu .card-info ul li { - border-top-color: #7e3794 !important; +.col-pull-1of2, .col-pull-2of4, .col-pull-3of6, .col-pull-4of8, .col-pull-5of10, .col-pull-6of12, .col-pull-8of16 { + left: -50%; } +.col-pull-1of3, .col-pull-2of6, .col-pull-4of12 { + left: -33.33333333%; +} +.col-pull-2of3, .col-pull-4of6, .col-pull-8of12 { + left: -66.66666667%; +} -/** - * UTILITIES - */ +.col-pull-1of4, .col-pull-2of8, .col-pull-3of12, .col-pull-4of16 { + left: -25%; +} +.col-pull-3of4, .col-pull-6of8, .col-pull-9of12, .col-pull-12of16 { + left: -75%; +} -.border-box { - box-sizing: border-box; +.col-pull-1of5, .col-pull-2of10 { + left: -20%; } -.vertical-center-outer { - display: table; - height: 100%; - width: 100%; +.col-pull-2of5, .col-pull-4of10 { + left: -40%; } -.vertical-center-inner { - display: table-cell; - vertical-align: middle; +.col-pull-3of5, .col-pull-6of10 { + left: -60%; } -/** - * TYPE STYLES - */ +.col-pull-4of5, .col-pull-8of10 { + left: -80%; +} -.landing-h1 { - font-weight: 100; - font-size: 60px; - line-height: 78px; - text-align: center; - letter-spacing: -1px; +.col-pull-1of6, .col-pull-2of12 { + left: -16.66666667%; } -.landing-pre-h1 { - font-weight: 400; - font-size: 28px; - color: #93B73F; - line-height: 36px; - text-align: center; - letter-spacing: -1px; - text-transform: uppercase; +.col-pull-5of6, .col-pull-10of12 { + left: -83.33333333%; +} +.col-pull-1of8, .col-pull-2of16 { + left: -12.5%; } -.landing-h1.hero { - text-align: left; +.col-pull-3of8, .col-pull-6of16 { + left: -37.5%; } -.landing-h2 { - font-weight: 300; - font-size: 42px; - line-height: 64px; - text-align: center; +.col-pull-5of8, .col-pull-10of16 { + left: -62.5%; } -.landing-subhead { - color: #999999; - font-size: 20px; - line-height: 28px; - font-weight:300; - text-align: center; +.col-pull-7of8, .col-pull-14of16 { + left: -87.5%; } -.landing-subhead.hero { - text-align: left; - color: white; + +.col-pull-1of10 { + left: -10%; } -.landing-hero-description { - text-align: left; - margin: 1em 0; +.col-pull-3of10 { + left: -30%; } -.landing-hero-description p { - font-weight: 300; - margin: 0; - font-size: 18px; - line-height: 24px; +.col-pull-7of10 { + left: -70%; } -.landing-body .landing-small { - font-size: 14px; - line-height: 19px; +.col-pull-9of10 { + left: -90%; } -.landing-body.landing-align-center { - text-align: center; +.col-pull-1of12 { + left: -8.33333333%; } -.landing-align-left { - text-align: left; +.col-pull-5of12 { + left: -41.66666667%; } -/** - * LAYOUT - */ +.col-pull-7of12 { + left: -58.33333333%; +} -#body-content, -.fullpage, -#jd-content, -.jd-descr, -.landing-body-content { - height: 100%; +.col-pull-11of12 { + left: -91.66666667%; } -.landing-section { - padding: 80px 10px 80px; - width: 100%; - margin-left: -10px; - text-rendering: optimizeLegibility; +.col-pull-1of16 { + left: -6.25%; } -#extending-android-to-wearables { - padding-top: 30px; +.col-pull-3of16 { + left: -18.75%; } -.landing-short-section { - padding: 40px 10px 28px; +.col-pull-5of16 { + left: -31.25%; } -.landing-gray-background { - background-color: #e9e9e9; +.col-pull-7of16 { + left: -43.75%; } -.landing-white-background { - background-color: white; +.col-pull-9of16 { + left: -56.25%; } -.landing-red-background { - color: white; - background-color: hsl(8, 70%, 54%); +.col-pull-11of16 { + left: -68.75%; } -.landing-subhead-red { - color: hsl(8, 71%, 84%); - text-align: left; +.col-pull-13of16 { + left: -81.25%; } -.landing-subhead-red p { - margin-top: 20px; +.col-pull-15of16 { + left: -93.75%; } -.landing-hero-container { - height: 100%; +.col-push-1of1, .col-push-2of2, .col-push-3of3, .col-push-4of4, .col-push-5of5, .col-push-6of6, .col-push-8of8, .col-push-10of10, .col-push-12of12, .col-push-16of16 { + left: 100%; } +.col-push-1of2, .col-push-2of4, .col-push-3of6, .col-push-4of8, .col-push-5of10, .col-push-6of12, .col-push-8of16 { + left: 50%; +} -.preview-hero { - height: calc(100% - 110px); - min-height: 504px; - margin-top: -5px; - padding-top: 0; - padding-bottom: 0; - background-image: url(../../preview/images/hero.jpg); - background-size: cover; - background-position: right center; - color: white; - position: relative; - overflow: hidden; +.col-push-1of3, .col-push-2of6, .col-push-4of12 { + left: 33.33333333%; } -.wear-hero { - height: calc(100% - 110px); - min-height: 504px; - margin-top: -5px; - padding-top: 0; - padding-bottom: 0; - background-image: url(../../wear/images/hero.jpg); - background-size: cover; - background-position: top center; - color: white; - position: relative; - overflow: hidden; +.col-push-2of3, .col-push-4of6, .col-push-8of12 { + left: 66.66666667%; } -.tv-hero { - height: calc(100% - 110px); - min-height: 504px; - margin-top: -5px; - padding-top: 0; - padding-bottom: 0; - background-image: url(../../tv/images/hero.jpg); - background-size: cover; - background-position: right center; - color: white; - position: relative; - overflow: hidden; +.col-push-1of4, .col-push-2of8, .col-push-3of12, .col-push-4of16 { + left: 25%; } -.auto-hero { - height: calc(100% - 110px); - min-height: 504px; - margin-top: -5px; - padding-top: 0; - padding-bottom: 0; - background-image: url(../../auto/images/hero.jpg); - background-size: cover; - background-position: right center; - color: white; - position: relative; - overflow: hidden; +.col-push-3of4, .col-push-6of8, .col-push-9of12, .col-push-12of16 { + left: 75%; } -.landing-hero-scrim { - background: black; - opacity: .2; - position: absolute; - width: 100%; - height: 100%; - margin-left: -10px; +.col-push-1of5, .col-push-2of10 { + left: 20%; } -.landing-hero-wrap { - margin: 0 auto; - width: 940px; - clear: both; - height: 100%; - position: relative; +.col-push-2of5, .col-push-4of10 { + left: 40%; } -.landing-section-header { - margin-bottom: 40px; +.col-push-3of5, .col-push-6of10 { + left: 60%; } -.landing-hero-wrap .landing-section-header { - margin-bottom: 16px; +.col-push-4of5, .col-push-8of10 { + left: 80%; } -.landing-body { - font-size: 18px; - line-height: 24px; +.col-push-1of6, .col-push-2of12 { + left: 16.66666667%; } -.landing-button { - white-space: nowrap; - display: inline-block; - padding: 16px 32px; - font-size: 18px; - font-weight: 500; - line-height: 24px; - cursor: pointer; - color: white; - -webkit-user-select: none; - -moz-user-select: none; - -o-user-select: none; - user-select: none; - -webkit-transition: .2s background-color ease-in-out; - -moz-transition: .2s background-color ease-in-out; - -o-transition: .2s background-color ease-in-out; - transition: .2s background-color ease-in-out; +.col-push-5of6, .col-push-10of12 { + left: 83.33333333%; } -.landing-primary { - background-color: hsl(8, 70%, 44%); - color: #f8f8f8; +.col-push-1of8, .col-push-2of16 { + left: 12.5%; } -.landing-button.landing-primary:hover { - background-color: hsl(8, 70%, 36%); +.col-push-3of8, .col-push-6of16 { + left: 37.5%; } -.landing-button.landing-primary:active { - background-color: hsl(8, 70%, 30%); +.col-push-5of8, .col-push-10of16 { + left: 62.5%; } -.landing-button.landing-secondary { - background-color: #2faddb; +.col-push-7of8, .col-push-14of16 { + left: 87.5%; } -.landing-button.landing-secondary:hover { - background-color: #09c; +.col-push-1of10 { + left: 10%; } -.landing-button.landing-secondary:active { - background-color: #3990ab; +.col-push-3of10 { + left: 30%; } -a.landing-button, -a.landing-button:hover, -a.landing-button:visited { - color: white !important; +.col-push-7of10 { + left: 70%; } -.landing-video-link { - white-space: nowrap; - display: inline-block; - padding: 16px 32px 16px 82px; - font-size: 18px; - font-weight: 400; - line-height: 24px; - cursor: pointer; - color: hsla(0, 0%, 100%, .8); - -webkit-user-select: none; - -moz-user-select: none; - -o-user-select: none; - user-select: none; - -webkit-transition: .2s color ease-in-out; - -moz-transition: .2s color ease-in-out; - -o-transition: .2s color ease-in-out; - transition: .2s color ease-in-out; +.col-push-9of10 { + left: 90%; } -.landing-video-link:before { - height: 64px; - width: 64px; - display: inline-block; - background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAABgCAYAAADimHc4AAAFuklEQVR42u2dXWgcVRSAV9LWtBBTTZVWUhNqEQtq1QeroDRKFRFsROqTYPuo+JCiIoJKFC0USqlUfCiowRcfrBgVUUElefAPkW5T8aeaGn9aRbFsjP0x2cx8PuRMvFxmdjeb2Z17Z8+B85DsZPbO+eaec3/OPSkABdXsVI2gABSAqgJQAKoKQAGoKgAFoKoAFICqAlAAqgpAAai6DqDRAiwDeoFtwB7gPaAInABKwKToCWAMeB/YDdwJrAWWNLh9+QMAXABsBQ4A3wFTwAxQBmaBAAhjNJDPy3L938BXwAvArUCHAkh+kCXAVcA+YBw4bRg7MngtkgTlDPA98CywHmhTAP8/xCbgVeAvMZZpwDQllN7xB/AysKGlAQAXAvuBkzW85UVgCBgENlfQQbmuWAXELPAnsAvoaikAQBtwh/j3coLhS2LIfqCzzu/plL8fkvvFgZiR4L2lHrfkHQBgpQTFUwmGnwC212v0KjC2y/3jQPwDPA+05xYAcBHwubx1YZzhC02QBBBRbxgBzssdAOBy4JgRZE0ZTPuNr7FHDCbEhqNAd24AAN0yUbID7QSwsZChABut3hANXY8Bq70HIMb/Ocb4w81+66v0hmGrN0QQ1ngLQJYRvpWHMWWo4KDIaMnuCcVKgdlZAGL8t2J8vpPGrwChDLyWBMFlAA8D0z4ZvwKEs8D93gCQEc9Jy/jFgkdizaRDGUSs8wXAu1bQLQE9ngHosWbPAXDQeQAypT9rBd3+gociyxi2K9riLABZUj5iuZ6RgsciM2OzFxw2A7JrAO6VwGtKTwpG+Anoy9AVmb3gDHCPcwCAFcChRox6jPu9CazMeFQUAKNRL3AJwE2yopjq228BQPZ/d2bcCyaBTa4BeNGa8Q6naIA4GQWubiKEYWvBbp8zAGQt5VfL/fQ3GEAkTzXDLVkjokA2k5a7AuA2GaLNj/tTfvhq0pQgbcwLQtlQusYVALtlzSR191MjADNI9zbJDZWBR10BMGr5/4GMADQ0SAMDlht62xUAxy0AmzMEEMnhtIO0ZF2YAH5wITd0hQw/5wE04M1bjDyXZpC2hqMlYGnWAHqBf40APOEYgChI35VSWyasWfGqrAH0WVkOIw4CSC1IG2tDoSy7XJE1gPs8ArDoIG0BmJGk30wBDHgGYFFBOgbAtqwB7GxxAHerC8rOBU0Dt2gQzjYIb8gawDor+6HVhqFdrkzEwhabiAVOTMSkUb+06FLEUVfWgj5q0cW4g64AeNo66ZLlcnTDNmesBN4y8KArAG6QU42ttCEzBVzpCoAO4EfLDeV5SzIEvgHaXdqUP2BlQud1Ux55zj2uZUX02cPRnKalRLmu17qYmPWF5YbymJgVAh8Ay5wCII3ZEZOYm6fURGT2u9X43Mnk3CDHybmfmRVYXExPv9nKEcpLejqSC3SjdY2TBzTesHqB7wc0onTEV2KucxLApXKkJy9HlAI5anuJFwCkYQ/EuCJfD+mdBnYkXOssgHY53un7MdVZ4CVgqVcADAhjMafkfTioHc14P04yvvMApIEXy5F/+7S8y6UKolPyR4BVVf7Wi2IdawwIPhTrmAW+rmZ8bwBIQ7vloXwoVzNWS6UUrwAYy9YfOlqwKZDkgneA5Qu4l3cly84F9sqGhislywLmaozuYoGFXr0DII1ukxP1hxJ6QzR7HqLxRfumZaRzXZ3f4XXZyi7gCeB3kqsnzs+kSb9s5XHgMeD8RTxDLgq3rmeuYuFvNYCoR8wqujNi+L3UWBcu9wAMt3QZ8LiMlk5RuU50teq6kcEDgTolveIRYHUQBOek1O5cFu/ukLz7/ZJgNSm+OirebWpgaPS7slxfAr4EngGuX8jopqUBxGzyrAVuB54EXgc+lV4yLhO8cfn5E+ZqUD8kBu9sQvv0Hzj4rmoEBaAAVBWAAlBVAApAVQEoAFUFoABUFYACUFUACkC1CfofXVRJocowZVYAAAAASUVORK5CYII=); - background-size: contain; - position: absolute; - content: ""; - opacity: .7; - margin-top: -19px; - margin-left: -64px; - -webkit-transition: .2s opacity ease-in-out; - -moz-transition: .2s opacity ease-in-out; - -o-transition: .2s opacity ease-in-out; - transition: .2s opacity ease-in-out; +.col-push-1of12 { + left: 8.33333333%; } -.landing-video-link:hover { - color: hsla(0, 0%, 100%, 1); +.col-push-5of12 { + left: 41.66666667%; } -.landing-video-link:hover:before { - opacity: 1; +.col-push-7of12 { + left: 58.33333333%; } -.landing-social-image { - float: left; - margin-right: 14px; - height: 64px; - width: 64px; +.col-push-11of12 { + left: 91.66666667%; } -.landing-social-copy { - padding-left: 78px; +.col-push-1of16 { + left: 6.25%; } -.landing-scroll-down-affordance { - position: absolute; - bottom: 0; - width: 100%; - text-align: center; - z-index: 10; +.col-push-3of16 { + left: 18.75%; } -.landing-down-arrow { - padding: 24px; - display: inline-block; - opacity: .5; - -webkit-transition: .2s opacity ease-in-out; - -moz-transition: .2s opacity ease-in-out; - -o-transition: .2s opacity ease-in-out; - transition: .2s opacity ease-in-out; +.col-push-5of16 { + left: 31.25%; +} - -webkit-animation-name: pulse-opacity; - -webkit-animation-duration: 4s; +.col-push-7of16 { + left: 43.75%; } -.landing-down-arrow:hover { - opacity: 1; +.col-push-9of16 { + left: 56.25%; } -.landing-down-arrow img { - height: 28px; - width: 28px; - margin: 0 auto; - display: block; +.col-push-11of16 { + left: 68.75%; } -.landing-divider { - display: inline-block; - height: 2px; - background-color: white; - position: relative; - margin: 10px 0; +.col-push-13of16 { + left: 81.25%; } -/* 3 CLOLUMN LAYOUT */ +.col-push-15of16 { + left: 93.75%; +} -.landing-breakout { - margin-top: 40px; - margin-bottom: 40px; +@media (max-width: 960px) and (min-width: 720px) { + .col-tablet-1of1, .col-tablet-2of2, .col-tablet-3of3, .col-tablet-4of4, .col-tablet-5of5, .col-tablet-6of6, .col-tablet-8of8, .col-tablet-10of10, .col-tablet-12of12, .col-tablet-16of16 { + width: 100%; + } + + .col-tablet-1of2, .col-tablet-2of4, .col-tablet-3of6, .col-tablet-4of8, .col-tablet-5of10, .col-tablet-6of12, .col-tablet-8of16 { + width: 50%; + } + + .col-tablet-1of3, .col-tablet-2of6, .col-tablet-4of12 { + width: 33.33333333%; + } + + .col-tablet-2of3, .col-tablet-4of6, .col-tablet-8of12 { + width: 66.66666667%; + } + + .col-tablet-1of4, .col-tablet-2of8, .col-tablet-3of12, .col-tablet-4of16 { + width: 25%; + } + + .col-tablet-3of4, .col-tablet-6of8, .col-tablet-9of12, .col-tablet-12of16 { + width: 75%; + } + + .col-tablet-1of5, .col-tablet-2of10 { + width: 20%; + } + + .col-tablet-2of5, .col-tablet-4of10 { + width: 40%; + } + + .col-tablet-3of5, .col-tablet-6of10 { + width: 60%; + } + + .col-tablet-4of5, .col-tablet-8of10 { + width: 80%; + } + + .col-tablet-1of6, .col-tablet-2of12 { + width: 16.66666667%; + } + + .col-tablet-5of6, .col-tablet-10of12 { + width: 83.33333333%; + } + + .col-tablet-1of8, .col-tablet-2of16 { + width: 12.5%; + } + + .col-tablet-3of8, .col-tablet-6of16 { + width: 37.5%; + } + + .col-tablet-5of8, .col-tablet-10of16 { + width: 62.5%; + } + + .col-tablet-7of8, .col-tablet-14of16 { + width: 87.5%; + } + + .col-tablet-1of10 { + width: 10%; + } + + .col-tablet-3of10 { + width: 30%; + } + + .col-tablet-7of10 { + width: 70%; + } + + .col-tablet-9of10 { + width: 90%; + } + + .col-tablet-1of12 { + width: 8.33333333%; + } + + .col-tablet-5of12 { + width: 41.66666667%; + } + + .col-tablet-7of12 { + width: 58.33333333%; + } + + .col-tablet-11of12 { + width: 91.66666667%; + } + + .col-tablet-1of16 { + width: 6.25%; + } + + .col-tablet-3of16 { + width: 18.75%; + } + + .col-tablet-5of16 { + width: 31.25%; + } + + .col-tablet-7of16 { + width: 43.75%; + } + + .col-tablet-9of16 { + width: 56.25%; + } + + .col-tablet-11of16 { + width: 68.75%; + } + + .col-tablet-13of16 { + width: 81.25%; + } + + .col-tablet-15of16 { + width: 93.75%; + } } -.landing-breakout img { - margin-bottom: 20px; +.col-3-wide { + width: 33.33333333%; } -.landing-partners img { - margin-bottom: 20px; +@media (max-width: 719px) { + [class*=col-] { + float: none; + left: 0; + width: auto; + } } -.landing-breakout p { - padding: 0 23px; +/* Header component */ +.dac-header { + background: #fff; + height: 64px; + margin: 0 -20px; } -.landing-breakout.landing-partners img { - margin-bottom: 20px; +@media (max-width: 719px) { + .dac-header { + margin: 0 -10px; + } } -.col-3-wide { - display: inline; +.about .dac-header, .distribute .dac-header, .develop .dac-header { + height: 128px; +} + +.dac-header-inner { + background: #fff; + box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.07); + box-sizing: border-box; + height: 64px; + left: 0; + right: 0; + top: 0; + z-index: 52; +} + +.dac-header.dac-sub .dac-header-inner { + border-bottom: 1px solid #e5e5e5; + box-shadow: none; +} + +.dac-header.is-sticky .dac-header-inner { + position: fixed; + -webkit-animation: .3s dac-header-show; + animation: .3s dac-header-show; +} + +.dac-header-logo { + border-right: 1px solid #e5e5e5; + display: block; + font-size: 20px; + font-weight: 300; float: left; - margin-left: 10px; - margin-right: 10px; + letter-spacing: .3px; + line-height: 36px; + margin-right: 16px; + padding: 14px 24px 14px; } -.col-3-wide { - width: 302px; +.dac-header-logo:link, .dac-header-logo:visited, .dac-header-logo:hover, .dac-header-logo:active { + color: #444; } -/** - * ANIMATION - */ +.dac-header-logo-image { + margin-right: 5px; + vertical-align: top; +} -@-webkit-keyframes pulse-opacity { - 0% { - opacity: .5; +.dac-header-consoleBtn { + border: 1px solid #c5c5c5; + border-radius: 4px; + box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.11); + background: #fff; + float: right; + font-size: 14px; + line-height: 28px; + margin: 17px 30px 17px 10px; + padding: 0 10px; + position: relative; + z-index: 52; +} + +.dac-header-consoleBtn > .dac-sprite { + margin-right: 5px; +} + +.dac-header-consoleBtn:link, .dac-header-consoleBtn:visited, .dac-header-consoleBtn:hover, .dac-header-consoleBtn:active { + color: #666; +} + +.dac-header-consoleBtn:focus { + background: rgba(63, 81, 181, 0.1); + outline: 0; +} + +@media (max-width: 719px) { + .dac-header { + height: 64px !important; + text-align: center; } - 20% { - opacity: .5; + + .dac-header-inner { + position: fixed; } - 40% { - opacity: 1; + + .dac-header-logo { + border-right: 0; + display: inline-block; + margin-right: 0; + float: none; } - 60% { - opacity: .5; + + .dac-header.dac-sub { + display: none; } - 80% { - opacity: 1; + + .dac-header-consoleBtn { + display: none; + } +} + +@-webkit-keyframes dac-header-show { + 0% { + -webkit-transform: translateY(-64px); + transform: translateY(-64px); } + 100% { - opacity: .5; + -webkit-transform: translateY(0); + transform: translateY(0); } } +@keyframes dac-header-show { + 0% { + -webkit-transform: translateY(-64px); + transform: translateY(-64px); + } + 100% { + -webkit-transform: translateY(0); + transform: translateY(0); + } +} -/** - * VIDEO - */ +/* Header Breadcrumbs component */ +.dac-header-crumbs { + display: none; + list-style-type: none; + margin: 0; +} -#video-container { - display:none; - position:fixed; - top:0; - left:0; - width:100%; - height:100%; - background-color:rgba(0,0,0,0.8); - z-index:9999; +.is-sticky .dac-header-crumbs { + display: block; } -#video-frame { - width:940px; - height:100%; - margin:72px auto; - display:none; - position:relative; +.dac-header-crumbs-item { + float: left; + position: relative; + margin: 0; + padding-left: 10px; } -.video-close { - cursor: pointer; +.dac-header-crumbs-item:before { + color: #444; + content: '>'; + font-weight: 300; + font-size: 20px; + left: 0; + line-height: 28px; + padding: 16px 0; position: absolute; - right: -49px; - top: -49px; - pointer-events: all; } -#icon-video-close { - background-image: url("../images/close-white.png"); - background-image: -webkit-image-set(url(../images/close-white.png) 1x, url(../images/close-white_2x.png) 2x); - background-repeat: no-repeat; - background-position: 0 0; - background-size: 36px 36px; - height: 36px; - width: 36px; - display:block; +.dac-header-crumbs-item:first-child:before { + content: none; } -#icon-video-close:hover { - background-image: url("../images/close-grey.png"); - background-image: -webkit-image-set(url(../images/close-grey.png) 1x, url(../images/close-grey_2x.png) 2x); +.dac-header-crumbs-link { + display: block; + font-size: 16px; + font-weight: 300; + line-height: 32px; + padding: 16px 16px; + -webkit-transition: background-color 0.35s cubic-bezier(0.35, 0, 0.25, 1); + transition: background-color 0.35s cubic-bezier(0.35, 0, 0.25, 1); } -/* Preload the hover images */ -a.video-shadowbox-button.white:after { - display:none; - content:url("../images/close-grey.png") url("../images/close-grey_2x.png"); +.dac-header-crumbs-link:link, .dac-header-crumbs-link:visited, .dac-header-crumbs-link:hover, .dac-header-crumbs-link:active { + color: #444; } -a.video-shadowbox-button.white { - background-image: url("../images/play-circle-white.png"); - background-image: -webkit-image-set(url(../images/play-circle-white.png) 1x, url(../images/play-circle-white_2x.png) 2x); - background-size: 36px 36px; - background-repeat: no-repeat; - background-position: right; - padding: 16px 42px 16px 8px; - font-size: 18px; - font-weight: 500; - line-height: 24px; - color: #fff; - text-decoration:none; +.dac-header-crumbs-link:focus { + background: rgba(63, 81, 181, 0.1); + outline: 0; } -a.video-shadowbox-button.white:hover { - color:#bababa !important; - background-image: url("../images/play-circle-grey.png"); - background-image: -webkit-image-set(url(../images/play-circle-grey.png) 1x, url(../images/play-circle-grey_2x.png) 2x); +.dac-header-crumbs-link.current { + color: #6ab344; + font-weight: 400; } -/* Preload the hover images */ -a.video-shadowbox-button.white:after { - display:none; - content:url("../images/play-circle-grey.png") url("../images/play-circle-grey_2x.png"); +.dac-header-crumbs-link.current.ndk { + color: #00BCD4; } -/****************** -Styles for d.a.c/index: -*******************/ +@media (max-width: 719px) { + .dac-header-crumbs { + display: none; + } +} +/* Header site search component */ +.dac-header-search { + background: #fff; + border-left: 1px solid #e5e5e5; + display: block; + float: right; + height: 28px; + padding: 18px 0; + position: relative; + overflow: hidden; + -webkit-transition: width 0.4s ease, left 0.4s ease; + transition: width 0.4s ease, left 0.4s ease; + width: 64px; + z-index: 52; +} +.dac-header-search:hover, .dac-header-search.active { + width: 228px; +} -/* Generic full screen carousel styling to be used across pages. */ -.fullscreen-carousel { - margin: 0 -10px; - width: 100%; - overflow: hidden; - position: relative; +.dac-header-search-inner { + width: 228px; } -.fullscreen-carousel-content { +.dac-header-search-btn { + background: url(../images/icon_search.png) 50% 0 no-repeat; + height: 28px; + position: absolute; + width: 64px; +} + +.dac-header-search:hover .dac-header-search-btn { + background-position: 50% -28px; +} + +.dac-header-search-form { + left: 54px; + opacity: 0; + position: absolute; + right: 24px; + top: 20px; + -webkit-transition: opacity .4s; + transition: opacity .4s; +} + +.dac-header-search:hover .dac-header-search-form, .dac-header-search.active .dac-header-search-form { + opacity: 1; +} + +.dac-header-search-input { + background-color: transparent; + border: none; + border-bottom: 1px solid #CCC; + box-sizing: border-box; + color: #2f2f2f; + font-size: 14px; + height: 24px; + outline: none; + padding: 4px 20px 4px 0; width: 100%; - height: 100%; - position: relative; - display: table; /* For vertical centering */ + z-index: 1500; } -.fullscreen-carousel .vcenter { - display: table-cell; - vertical-align: middle; - position: relative; +.dac-header-search:hover .dac-header-search-input { + border-bottom: 1px solid #33b5e5; } -.fullscreen-carousel .vcenter > div { - margin: 10px auto; +.dac-header-search-input:focus { + color: #222; + font-weight: bold; + outline: 0; } -/* Styles for the full-bleed hero image type. */ -.fullscreen-carousel .hero, .fullscreen-carousel .hero h1 { - color: #fff; +.dac-header-search-close { + position: absolute; + right: 4px; + bottom: 4px; + width: 16px; + height: 16px; + margin: 0; + text-indent: -1000em; + background: url(../images/close.png) no-repeat 0 0; + z-index: 9999; } -.fullscreen-carousel .hero h1 { - font-weight: 300; - font-size: 60px; - line-height: 68px; - letter-spacing: -1px; - margin-top: 0; +.dac-header-search-close:hover, .dac-header-search-close:focus { + background-position: -16px 0; + cursor: pointer; } -.fullscreen-carousel .hero p { - font-weight: 300; - font-size: 18px; - line-height: 24px; - -webkit-font-smoothing: antialiased; +@media (max-width: 719px) { + .dac-header-search { + position: absolute; + left: calc(100% - 64px); + right: 0; + top: 0; + width: auto; + } + + .dac-header-search:hover, .dac-header-search.active { + left: 64px; + width: auto; + } } -.fullscreen-carousel .hero .hero-bg { - background-size: cover; - width: 100%; +/* Main navigation component */ +.is-sticky .dac-nav, .dac-nav-head, .dac-nav-toggle { + display: none; +} + +.dac-nav-list { + list-style-type: none; + left: 192px; + margin: 0; + position: absolute; + right: 0; + top: 0; + z-index: 51; +} + +.dac-nav-item { + float: left; + margin: 0; +} + +.dac-nav-head { + margin-bottom: 10px; +} + +.dac-nav-dimmer { + background: #000; + display: none; height: 100%; + left: 0; + opacity: 0; + position: fixed; + top: 0; + -webkit-transition: visibility 0s linear .3s, opacity .3s linear; + transition: visibility 0s linear .3s, opacity .3s linear; + -webkit-transform: translateZ(0); + transform: translateZ(0); + visibility: hidden; + width: 100%; + z-index: 52; +} + +.dac-nav-hamburger { + display: inline-block; + height: 15px; + width: 16px; +} + +.dac-nav-hamburger-top, .dac-nav-hamburger-mid, .dac-nav-hamburger-bot { + background: #999; + display: block; + height: 3px; + margin: 3px 0 0; + width: 100%; +} + +.dac-nav-link { + display: block; + font-size: 16px; + font-weight: 300; + letter-spacing: .24px; + line-height: 32px; + padding: 18px 16px 14px; + -webkit-transition: background-color 0.35s cubic-bezier(0.35, 0, 0.25, 1); + transition: background-color 0.35s cubic-bezier(0.35, 0, 0.25, 1); +} + +.dac-nav-link:link, .dac-nav-link:visited, .dac-nav-link:hover, .dac-nav-link:active { + color: #444; +} + +.dac-nav-link:focus { + background: rgba(63, 81, 181, 0.1); + outline: 0; +} + +.dac-nav-link.has-subnav, .dac-nav-link.selected { + border-bottom: 3px solid #6ab344; + font-weight: 500; + padding-bottom: 11px; +} + +.dac-nav-link.has-subnav.ndk, .dac-nav-link.selected.ndk { + border-bottom: 3px solid #00BCD4; +} + +.dac-nav-secondary { + border-bottom: 1px solid #e5e5e5; + display: none; + left: -192px; + list-style-type: none; + margin: 0; position: absolute; - left: 0px; - top: 0px; + top: 64px; + right: 0; } +.dac-nav-link.has-subnav + .dac-nav-secondary, .dac-nav-link.selected + .dac-nav-secondary { + display: block; +} -/* Full screen carousel styling for the resource flow layout type of content */ -.fullscreen-carousel .resource-flow-layout:after { - height: 0; /* Dont know why this is set at 10 in default.css */ +.dac-nav-secondary .dac-nav-link { + padding: 17px 16px 15px; } -.fullscreen-carousel .resource-flow-layout { - margin-bottom: 20px; +.dac-nav-secondary .dac-nav-link:link, .dac-nav-secondary .dac-nav-link:visited, .dac-nav-secondary .dac-nav-link:hover, .dac-nav-secondary .dac-nav-link:active { + color: #666; } +@media (min-width: 720px) and (max-width: 979px) { + .dac-nav-secondary .dac-nav-link { + padding-left: 8px; + padding-right: 8px; + } +} +.dac-nav-secondary .dac-nav-link.selected { + border: none; + font-weight: 700; +} -/* Generic Tab carousel styling to be used across multiple pages. */ +.dac-nav-secondary .dac-nav-link.selected.ndk { + border: none; + font-weight: 700; +} -.tab-carousel .tab-nav { - list-style: none; +@media (max-width: 719px) { + .dac-nav-open { + overflow: hidden; + } + + .dac-nav-toggle { + border-right: 1px solid #e5e5e5; + display: inline-block; + position: absolute; + left: 0; + line-height: 64px; + text-align: center; + width: 64px; + } + + .dac-nav-head, .dac-nav-secondary, .dac-nav-dimmer { + display: block; + } + + .dac-nav-dimmer.dac-nav-open { + opacity: .8; + -webkit-transition-delay: 0s; + transition-delay: 0s; + visibility: visible; + } + + .dac-nav-list { + background: #fff; + bottom: 0; + left: auto; + max-width: 280px; + overflow-y: auto; + padding: 0 0 20px 0; + position: fixed; + right: 100%; + top: 0; + -webkit-transition: -webkit-transform .3s ease; + transition: transform .3s ease; + width: 85%; + z-index: 52; + } + + .dac-nav-list.dac-nav-open { + -webkit-transform: translate3d(100%, 0, 0); + transform: translate3d(100%, 0, 0); + } + + .dac-nav-secondary { + border: none; + position: static; + width: 100%; + } + + .dac-nav-item { + float: none; + } + + .dac-nav-link { + display: block; + font-size: 12px; + font-weight: 600; + color: #333; + padding: 0 20px; + } + + .dac-nav-link.selected { + color: #09f; + } + + .dac-nav-secondary .dac-nav-link { + font-weight: 400; + margin-left: 20px; + margin-right: 20px; + padding: 0 20px; + } + + .dac-nav-link.has-subnav, .dac-nav-link.selected { + border: none; + padding: 0 20px; + } + + .dac-nav-link.has-subnav.ndk, .dac-nav-link.selected.ndk { + border: none; + padding: 0 20px; + } + + .dac-logo-image { + margin-right: 5px; + vertical-align: top; + } + + .dac-nav-logo { + box-shadow: 0 2px 2px rgba(0, 0, 0, 0.04); + font-size: 20px; + font-weight: 300; + letter-spacing: .3px; + line-height: 36px; + padding: 14px 24px; + } + + .dac-nav-logo:link, .dac-nav-logo:visited, .dac-nav-logo:hover, .dac-nav-logo:active { + color: #444; + } +} + +.dac-light.dac-hero, .dac-light.dac-section { + background-color: #eceff1; +} + +.dac-gray.dac-hero, .dac-gray.dac-section { + background-color: #b0bec5; +} + +.dac-dark.dac-hero, .dac-dark.dac-section { + background-color: #37474f; +} + +.dac-red.dac-hero, .dac-red.dac-section { + background-color: #dc4d38; +} + +.dac-hero-cta:link, .dac-hero-cta:visited, .dac-section-title, .dac-section-links { + color: #212121; + color: rgba(0, 0, 0, 0.87); +} + +.dac-invert .dac-hero-cta:link, .dac-invert .dac-hero-cta:visited, .dac-invert .dac-section-title, .dac-invert .dac-section-links { + color: white; +} + +.dac-hero-tag, .dac-hero-description, .dac-section-subtitle { + color: #757575; + color: rgba(0, 0, 0, 0.54); +} + +.dac-invert .dac-hero-tag, .dac-invert .dac-hero-description, .dac-invert .dac-section-subtitle { + color: #b2b2b2; + color: rgba(255, 255, 255, 0.7); +} + +/* Hero carousel */ +.dac-hero { + background-color: #fff; + background-position: 50% 30%; + background-size: cover; + box-sizing: border-box; + font-size: 16px; + min-height: 550px; + padding-top: 88px; +} + +.dac-hero.dac-darken:before { + background: rgba(0, 0, 0, 0.3); + bottom: 0; + content: ''; + display: block; + left: 0; + position: absolute; + right: 0; + top: 0; +} + +.dac-hero.dac-darken .dac-hero-content { position: relative; - text-align: center; } -.tab-carousel .tab-nav li { +@media (max-width: 719px) { + .dac-hero { + padding-bottom: 20px; + padding-top: 20px; + } +} + +.dac-hero-tag { + font-size: 11px; + font-weight: 700; + letter-spacing: .07em; + margin-bottom: 2px; + text-transform: uppercase; +} + +.dac-hero-title { + margin: 0 0 14px; +} + +.dac-hero-description { + margin-bottom: 16px; +} + +.dac-hero-cta { display: inline-block; - font-size: 22px; - font-weight: 400; - line-height: 50px; - list-style: none; - margin: 0; - padding: 0 25px; - position: relative; + line-height: 40px; + margin-right: 20px; + -webkit-transition: opacity .3s; + transition: opacity .3s; } -.tab-carousel .tab-nav li a, -.tab-carousel .tab-nav li a:hover { - color: #333 !important; - padding: 10px 10px 13px 10px; +.dac-hero-cta:hover { + color: currentColor; + opacity: .54; +} + +.dac-hero-cta .dac-sprite { + margin-left: -8px; +} + +.dac-hero-figure { + text-align: center; +} + +.dac-hero-carousel { + height: 550px; position: relative; - z-index: 1000; } -.tab-carousel .tab-nav li:after { - background: #ddd; +.dac-hero-carousel > .dac-hero { bottom: 0; - content: ''; - height: 4px; left: 0; position: absolute; - width: 100%; - z-index: 0; + right: 0; + top: 0; } -.tab-carousel .tab-nav .highlight { +.dac-hero-carousel > .dac-hero, .dac-hero-carousel > .dac-hero .wrap { + opacity: 0; +} + +.dac-hero-carousel > .dac-hero.active { + opacity: 1; + -webkit-transition: opacity .5s; + transition: opacity .5s; + z-index: 1; +} + +.dac-hero-carousel > .dac-hero.active .wrap { + opacity: 1; + -webkit-transition: opacity .5s .5s; + transition: opacity .5s .5s; +} + +.dac-hero-carousel > .dac-hero.out, .dac-hero-carousel > .dac-hero.out .wrap { + -webkit-transition: opacity 0s .5s; + transition: opacity 0s .5s; + opacity: 0; +} + +.dac-hero-carousel-pagination { + bottom: 33px; + left: 0; position: absolute; - height: 4px; - width: 100px; - bottom: 0; - background: #33b5e5; + right: 0; + z-index: 51; } -.tab-carousel .tab-carousel-content { - position: relative; +@media (max-width: 719px) { + .dac-hero-carousel-pagination { + text-align: right; + bottom: 20px; + } +} + +.dac-pagination { + list-style: none; + margin: 0 -3px; +} + +.dac-pagination-item { + background-color: rgba(153, 153, 153, 0.4); + border-radius: 50%; + cursor: pointer; + display: inline-block; + height: 14px; + margin: 0 3px; overflow: hidden; + text-indent: 100%; + -webkit-transition: background-color .1s ease-in; + transition: background-color .1s ease-in; white-space: nowrap; + width: 14px; } -.tab-carousel .tab-carousel-content [data-tab] { - display: inline-block; - white-space: normal; +.dac-pagination-item:hover { + background-color: rgba(153, 153, 153, 0.6); } +.dac-pagination-item.active, .dac-pagination-item.active:hover { + background-color: #6ab344; +} +.dac-invert .dac-pagination-item { + background-color: rgba(204, 204, 204, 0.2); +} -/* - Resource styling for the tab carousel. The tab carousel contains either - a 3 column layout of resources or a single full-width resource. The - latter has the 18x12 class applied to it and can be styled differently - that way. -*/ +.dac-invert .dac-pagination-item:hover { + background-color: rgba(153, 153, 153, 0.4); +} -.tab-carousel .resource .image { +/* Form component */ +.dac-form { + color: #505050; + font-size: 16px; + /* Modal Responsive */ +} + +.dac-form a { + color: #000; +} + +.dac-form-aside { + display: inline-block; + font-size: 12px; + margin-top: 0; +} + +.dac-form-required { + color: #ef4300; +} + +.dac-form-fieldset { + padding: 0; +} + +.dac-form-legend { + display: block; + color: #333; + font-weight: 500; + margin: 20px 0 12px; + padding: 0; width: 100%; - height: 250px; - background-repeat: no-repeat; - background-size: contain; - background-position: 50% 50%; } -.tab-carousel .resource .info .title { - font-size: 18px; - line-height: 24px; +.dac-form-legend > .dac-form-required { + float: right; + margin-top: 3px; } -.tab-carousel .resource .info .summary, -.tab-carousel .resource .info .cta { - line-height: 24px; - font-size: 16px; +.dac-form-input { + border: 0 solid #e3e3e3; + border-bottom-width: 1px; + display: block; + outline: 0; + padding: 1px 0 8px; + -webkit-transition: border-color .2s; + transition: border-color .2s; + width: 100%; } -.tab-carousel .resource-card-18x12 { +.dac-form-input-group { position: relative; - padding-left: 450px; +} + +.dac-form-input-group > .dac-form-required { + display: block; + bottom: 3px; + position: absolute; + right: 0; +} + +.dac-form-input:focus { + border-bottom-color: #09f; +} + +.dac-form-floatlabel { + display: block; + cursor: text; + margin-top: 5px; + pointer-events: none; + -webkit-transform-origin: 0 100%; + -ms-transform-origin: 0 100%; + transform-origin: 0 100%; + -webkit-transform: translate3d(0, 22px, 0) scale(1); + transform: translate3d(0, 22px, 0) scale(1); + -webkit-transition: -webkit-transform .2s; + transition: transform .2s; +} + +.dac-focused > .dac-form-floatlabel, .dac-has-value > .dac-form-floatlabel { + cursor: default; + -webkit-transform: translate3d(0, 0, 0) scale(.75); + transform: translate3d(0, 0, 0) scale(.75); +} + +.dac-form-radio, .dac-form-checkbox { + opacity: 0; + position: absolute; +} + +.dac-form-radio-group, .dac-form-checkbox-group { + display: table; + margin-top: 10px; +} + +.dac-form-radio-button, .dac-form-checkbox-button { box-sizing: border-box; + cursor: pointer; display: table-cell; - vertical-align: middle; + float: left; + height: 18px; + margin: 2px 10px 0 0; + position: relative; + width: 18px; } -.tab-carousel .resource-card-18x12 .image { - position: absolute; - width: 420px; +.dac-form-radio-button::after, .dac-form-radio-button::before, .dac-form-checkbox-button::after, .dac-form-checkbox-button::before { + box-sizing: border-box; + content: ''; + border-radius: 50%; + display: block; height: 100%; - left: 0; - top: 0; + position: absolute; + width: 100%; } -.tab-carousel .resource-card-18x12 .info { - display: inline-block; +.dac-form-radio-button::before, .dac-form-checkbox-button::before { + background: rgba(0, 0, 0, 0.7); + -webkit-transform: translateZ(0) scale(0); + transform: translateZ(0) scale(0); + -webkit-transition: -webkit-transform .3s; + transition: transform .3s; } -.tab-carousel .resource-card-18x12 .info .title { - margin-bottom: 26px; +.dac-form-radio-button::after, .dac-form-checkbox-button::after { + border: 2px solid rgba(0, 0, 0, 0.7); +} + +.dac-form-radio:checked + .dac-form-radio-button::before, .dac-form-checkbox:checked + .dac-form-checkbox-button::before { + -webkit-transform: translateZ(0) scale(.5); + transform: translateZ(0) scale(.5); +} + +.dac-form-radio:focus + .dac-form-radio-button::after, .dac-form-checkbox:focus + .dac-form-checkbox-button::after { + border: 2px solid #09f; } +.dac-form-checkbox-button::after, .dac-form-checkbox-button::before { + border-radius: 0; +} +@media (max-width: 719px) { + .dac-form-legend { + margin-bottom: 0; + } +} +/* Media component */ +.dac-media { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-flow: row wrap; + -ms-flex-flow: row wrap; + flex-flow: row wrap; +} +.dac-media-figure { + margin: 0; +} -/* - Styles for the entity link used in the actions bar and in the cta of - the resources that appear in the tab carousel. -*/ -.actions-bar a:after, -.resource .cta:after { - content: '›'; - font-weight: 400; - font-size: 22px; - left: 5px; - line-height: 1; - position: relative; - top: 1px; - transition: left 190ms ease-out; +.dac-media-body { + -webkit-box-flex: 1; + -webkit-flex: 1; + -ms-flex: 1; + flex: 1; } -.actions-bar a:hover:after, -.resource .cta:hover:after { - left: 10px; +.no-flexbox .dac-media { + display: table; + width: 100%; } +.no-flexbox .dac-media-body, .no-flexbox .dac-media-figure { + display: table-cell; +} +.no-flexbox .dac-media-figure { + padding: 0; +} +.no-flexbox .dac-media-body { + width: 100%; +} -/* - Styles for the actions bar. -*/ -.actions-bar { - background: #9acd00; - margin: 0 -10px; - text-align: center; +/* Modal component */ +.dac-modal { + background: rgba(0, 0, 0, 0.8); + bottom: 0; + left: 0; + opacity: 0; + overflow-x: hidden; + overflow-y: auto; + position: fixed; + right: 0; + top: 0; + -webkit-transition: visibility 0s linear .3s, opacity .3s linear; + transition: visibility 0s linear .3s, opacity .3s linear; + visibility: hidden; + z-index: 52; } -.actions-bar .actions { - padding: 30px 0 30px; - text-align: justify; - font-size: 0.1px; - line-height: 0.1px; - margin: 0 10px 0 0; +.dac-modal.dac-active { + opacity: 1; + -webkit-transition-delay: 0s; + transition-delay: 0s; + visibility: visible; } -.actions-bar .actions:after { - content: ''; +.dac-modal-open { + overflow: hidden; +} + +.dac-modal-container { + -webkit-box-align: center; + -webkit-align-items: center; + -ms-flex-align: center; + align-items: center; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-filter: drop-shadow(0 5px 15px rgba(0, 0, 0, 0.4)); + filter: drop-shadow(0 5px 15px rgba(0, 0, 0, 0.4)); + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + min-height: 100%; width: 100%; - display: inline-block; } -.actions-bar .actions > div { - display: inline-block; +.dac-modal-window { + background: #fff; + border-top-left-radius: 5px; + border-top-right-radius: 5px; + box-sizing: border-box; + margin: 20px; + -webkit-transition: -webkit-transform .3s; + transition: transform .3s; + -webkit-transform: translate(0, -30px); + -ms-transform: translate(0, -30px); + transform: translate(0, -30px); + -webkit-transform: translate3d(0, -30px, 0); + transform: translate3d(0, -30px, 0); + width: 960px; +} + +.dac-modal.dac-active .dac-modal-window { + -webkit-transform: translateZ(0); + transform: translateZ(0); +} + +.dac-modal-header { + background: #00695c; + border-top-left-radius: 5px; + border-top-right-radius: 5px; + padding: 35px 35px 30px; + position: relative; } -.actions-bar a { - font-size: 21px; - line-height: 27px; +.dac-modal-header-close { + background: none; + border: none; + cursor: pointer; + line-height: 0; + outline: 0; + opacity: .7; + padding: 8px; + position: absolute; + right: 5px; + -webkit-transition: background-color .3s; + transition: background-color .3s; + top: 5px; +} + +.dac-modal-header-close:active { + background: rgba(255, 255, 255, 0.2); +} + +.dac-modal-header-title { color: #fff; + font-size: 24px; font-weight: 300; - -webkit-font-smoothing: antialiased; + line-height: 32px; + margin: 0; + padding-right: 150px; } -.actions-bar a:after { - top: 0px; - font-size: 22px; +.dac-modal-header-subtitle { + bottom: 31px; + color: #fff; + display: inline-block; + font: inherit; + font-size: 14px; + opacity: .8; + position: absolute; + right: 35px; } -.actions-bar a:hover { - color: #fff !important; +.dac-modal-content { + padding: 12px 35px; } +.dac-modal-footer { + padding: 24px 35px; +} +@media (max-width: 1000px) { + .dac-modal-window { + margin: 20px; + width: auto; + } + .dac-modal-container { + z-index: auto; + } +} +@media (max-width: 719px) { + .dac-modal-window { + margin: 10px; + } -/* - Specific styles for new home page layout of the carousels. -*/ + .dac-modal-header { + padding: 35px 10px 10px; + } -/* Big blue button */ -a.home-new-cta-btn, -.home-new-carousel-1 .resource-card-18x6 .cta { - white-space: nowrap; - display: inline-block; - padding: 14px 32px; - font-size: 18px; - font-weight: 500; - line-height: 24px; - cursor: pointer; - background: #33b5e6; - border-radius: 4px; - margin-top: 20px; - color: #fff; - transition: 0.2s background-color ease-in-out; + .dac-modal-header-title { + font-size: 16px; + line-height: 24px; + padding: 0; + } + + .dac-modal-header-subtitle { + display: block; + margin: 0; + position: static; + text-align: right; + } + + .dac-modal-content { + padding: 10px; + } + + .dac-modal-footer { + border-top: 1px solid #e3e3e3; + padding: 35px 10px; + } } -.home-new-carousel-1 .resource-card-18x6 .cta:after { - display: none; /* Hide the entity for this button */ +.newsletter .dac-modal-footer { + padding-top: 0; + text-align: right; } -a.home-new-cta-btn:hover, -.home-new-carousel-1 .resource-card-18x6 .cta:hover { - color: #fff !important; - background: #2d9fca; +.newsletter-checkboxes { + padding-top: 20px; } -.home-new-carousel-1 .resource-card-18x6 .cta { - position: absolute; - bottom: 20px; - left: 16px; +@media (min-width: 720px) { + .newsletter-checkboxes { + padding-top: 46px; + } + + .newsletter-leftCol { + padding-right: 40px; + } + + .newsletter-rightCol { + padding-left: 40px; + } } -/* Fullscreen carousel. */ -.home-new-carousel-1 { - max-height: 700px; /* Set max height so doesn't get too long */ +@media (max-width: 719px) { + .newsletter .dac-modal-footer { + margin-top: 30px; + padding: 30px 10px; + text-align: center; + } } -.home-new-carousel-1 .fullscreen-carousel-content { - min-height: 450px; /* Set min height for all content */ +.dac-expand, .dac-section { + margin-left: -20px; + margin-right: -20px; + padding-left: 20px; + padding-right: 20px; } -.home-new-carousel-1 .hero { - background: #000; +@media (max-width: 719px) { + .dac-expand, .dac-section { + margin-left: -10px; + margin-right: -10px; + padding-left: 10px; + padding-right: 10px; + } } -.home-new-carousel-1 .hero-bg { - background-image: url(/home-new/images/hero.jpg); - background-position: right center; - opacity: 0.85; +.dac-invert { + color: #b2b2b2; + color: rgba(255, 255, 255, 0.7); } -/* - Styling for special top card of full screen layout resource layout. - We need to specifically style the 18x6 card to adjust its size and layout, - since it's not a standard card, not sure if this is unique to the home page - layout or should be namespaced within the fullscreen-carousel container. -*/ -.home-new-carousel-1 .resource-flow-layout.col-16 .resource-card-18x6 { - height: 320px; - background-color:#F9F9F9; - border-radius: 0px; - box-shadow: 0px 0px 0px rgba(0, 0, 0, 0); +.dac-invert h1, .dac-invert h2, .dac-invert h3 { + color: #fff; +} +.dac-light.dac-hero, .dac-light.dac-section { + background-color: #eceff1; } -.home-new-carousel-1 .resource-card-18x6 .card-bg { - width: 636px; - height: 100%; +.dac-gray.dac-hero, .dac-gray.dac-section { + background-color: #b0bec5; } -.home-new-carousel-1 .resource-card-18x6 .card-info { - right: 0px; - left: 636px; - height: 100%; - top: 0px; - padding: 15px 22px; +.dac-dark.dac-hero, .dac-dark.dac-section { + background-color: #37474f; } -.home-new-carousel-1 .resource-card-18x6 .card-info .util { - display: none; +.dac-red.dac-hero, .dac-red.dac-section { + background-color: #dc4d38; } -.home-new-carousel-1 .resource-card-18x6 .card-info .title { - font-size: 20px; - font-weight: 500; - margin-top: 15px; - margin-bottom: 15px; +.dac-hero-cta:link, .dac-hero-cta:visited, .dac-section-title, .dac-section-links { + color: #212121; + color: rgba(0, 0, 0, 0.87); } -.home-new-carousel-1 .resource-card-18x6 .card-info .text { - font-size: 15px; - line-height: 21px; +.dac-invert .dac-hero-cta:link, .dac-invert .dac-hero-cta:visited, .dac-invert .dac-section-title, .dac-invert .dac-section-links { + color: white; } +.dac-hero-tag, .dac-hero-description, .dac-section-subtitle { + color: #757575; + color: rgba(0, 0, 0, 0.54); +} -/* Tabbed carousel. */ -.home-new-carousel-2 { - margin: 35px auto 100px auto; +.dac-invert .dac-hero-tag, .dac-invert .dac-hero-description, .dac-invert .dac-section-subtitle { + color: #b2b2b2; + color: rgba(255, 255, 255, 0.7); } -.home-new-carousel-2 h1 { - font-size: 47px; - font-weight: 100; - line-height: 54px; +.dac-section { + background-position: 50% 50%; + background-size: cover; + padding-bottom: 84px; + padding-top: 84px; + position: relative; +} + +@media (max-width: 719px) { + .dac-section { + padding-bottom: 52px; + padding-top: 52px; + } +} + +.dac-section.dac-small { + padding-bottom: 32px; + padding-top: 32px; +} + +.dac-section-title { text-align: center; + margin-bottom: 40px; + margin-top: 0; } -.annotation-message { - display: block; - font-style: italic; - color: #F80; +.dac-section-subtitle { + font-size: 16px; + margin-bottom: 40px; + margin-top: -24px; + text-align: center; } +.dac-section-links { + font-size: 16px; + list-style: none; + line-height: 40px; + margin: 16px 0 0; + text-align: center; +} +@media (max-width: 719px) { + .dac-section-links { + margin-left: -8px; + text-align: left; + } +} -/* Helpouts widget */ -.resource-card-6x2.helpouts-card { - width: 255px; - height: 40px; - position:absolute; - z-index:999; - top:-8px; - right:1px; +.dac-section-link { + display: inline-block; + margin: 0 32px; } -.resource-card-6x2.helpouts-card > .card-info { - left:35px; - height:35px; - padding:4px 8px 4px 0; +@media (max-width: 719px) { + .dac-section-link { + display: block; + margin: 0; + } } -.resource-card-6x2.helpouts-card > .card-info .helpouts-description { - display:block; - overflow:visible; - font-size:12px; - line-height:12px; - text-align:right; - color:#666; +.dac-section-link a { + -webkit-transition: opacity .3s; + transition: opacity .3s; } -.helpouts-description .link-color { - text-transform: uppercase; +.dac-section-link a:link, .dac-section-link a:visited { + color: inherit; } -.resource-card-6x2 > .card-bg.helpouts-card-bg { - width:35px; - height:35px; - margin:2px 0 0 0; - background-image: url(../images/styles/helpouts-logo-35_2x.png); - background-image: -webkit-image-set(url(../images/styles/helpouts-logo-35.png) 1x, url(../images/styles/helpouts-logo-35_2x.png) 2x); +.dac-section-link a:hover { + opacity: .54; } -.resource-card-6x2 > .card-bg.helpouts-card-bg:after { - display:none; +/* +SCSS variables are information about icon's compiled state, stored under its original file name + +.icon-home { + width: $icon-home-width; } + +The large array-like variables contain all information about a single icon +$icon-home: x y offset_x offset_y width height total_width total_height image_path; + +At the bottom of this section, we provide information about the spritesheet itself +$spritesheet: width height image $spritesheet-sprites; +*/ +.dac-sprite, #tb li:before, #qv li:before { + background-image: url(/assets/images/sprite.png); + display: inline-block; + vertical-align: middle; } + @media screen and (min-device-pixel-ratio: 1.5) { + .dac-sprite, #tb li:before, #qv li:before { + background-image: url(/assets/images/sprite-2x.png); + background-size: 50% 50%; } } + +.dac-sprite.dac-auto-chevron { + background-position: -26px -38px; + height: 24px; + width: 24px; + vertical-align: -6px; } + .dac-invert .dac-sprite.dac-auto-chevron { + background-position: -76px 0px; + height: 24px; + width: 24px; } +.dac-sprite.dac-auto-chevron-large { + background-position: 0px 0px; + height: 36px; + width: 36px; + vertical-align: -10px; } + .dac-invert .dac-sprite.dac-auto-chevron-large { + background-position: -38px 0px; + height: 36px; + width: 36px; } + +.dac-sprite.dac-arrow-down-gray { + background-position: -56px -64px; + height: 11px; + width: 19px; } + +.dac-sprite.dac-arrow-right { + background-position: -102px 0px; + height: 18px; + width: 11px; } + +.dac-sprite.dac-chevron-large-right-black { + background-position: 0px 0px; + height: 36px; + width: 36px; } + +.dac-sprite.dac-chevron-large-right-white { + background-position: -38px 0px; + height: 36px; + width: 36px; } + +.dac-sprite.dac-chevron-right-black { + background-position: -26px -38px; + height: 24px; + width: 24px; } + +.dac-sprite.dac-chevron-right-white { + background-position: -76px 0px; + height: 24px; + width: 24px; } + +.dac-sprite.dac-close { + background-position: -34px -83px; + height: 12px; + width: 12px; } + +.dac-sprite.dac-expand-less-black { + background-position: 0px -38px; + height: 24px; + width: 24px; } + +.dac-sprite.dac-expand-more-black { + background-position: -76px -26px; + height: 24px; + width: 24px; } + +.dac-sprite.dac-google-play { + background-position: -52px -38px; + height: 18px; + width: 16px; } + +.dac-sprite.dac-gplus { + background-position: 0px -64px; + height: 17px; + width: 16px; } + +.dac-sprite.dac-mail { + background-position: -16px -83px; + height: 12px; + width: 16px; } + +.dac-sprite.dac-rss { + background-position: 0px -83px; + height: 14px; + width: 14px; } + +.dac-sprite.dac-twitter { + background-position: -38px -64px; + height: 14px; + width: 16px; } + +.dac-sprite.dac-youtube { + background-position: -18px -64px; + height: 14px; + width: 18px; } + +.dac-toggle-expand { + cursor: pointer; + display: inline-block; } +.dac-toggle-collapse { + cursor: pointer; + display: none; } +.dac-toggle.is-expanded .dac-toggle-expand { + display: none; } +.dac-toggle.is-expanded .dac-toggle-collapse { + display: inline-block; } +.dac-toggle-content { + overflow: hidden; + max-height: 0; + -webkit-transition: .3s max-height; + transition: .3s max-height; } +.dac-toggle.is-expanded .dac-toggle-content { + max-height: none; } +.dac-toggle.dac-mobile .dac-toggle-content { + max-height: none; } +@media (max-width: 719px) { + .dac-toggle.dac-mobile .dac-toggle-content { + max-height: 0; } + .dac-toggle.is-expanded .dac-toggle-content { + max-height: none; } } + +.dac-visible-mobile-block, .dac-mobile-only, .dac-visible-mobile-inline, .dac-visible-mobile-inline-block, .dac-visible-tablet-block, .dac-visible-tablet-inline, .dac-visible-tablet-inline-block, .dac-visible-desktop-block, .dac-visible-desktop-inline, .dac-visible-desktop-inline-block { + display: none !important; } + +@media (max-width: 719px) { + .dac-hidden-mobile { + display: none !important; } + .dac-visible-mobile-block, .dac-mobile-only { + display: block !important; } + .dac-visible-mobile-inline { + display: inline !important; } + .dac-visible-mobile-inline-block { + display: inline-block !important; } } + +@media (min-width: 720px) and (max-width: 979px) { + .dac-hidden-tablet { + display: none !important; } + .dac-visible-tablet-block { + display: block !important; } + .dac-visible-tablet-inline { + display: inline !important; } + .dac-visible-tablet-inline-block { + display: inline-block !important; } } + +@media (min-width: 980px) { + .dac-hidden-desktop { + display: none !important; } + .dac-visible-desktop-block { + display: block !important; } + .dac-visible-desktop-inline { + display: inline !important; } + .dac-visible-desktop-inline-block { + display: inline-block !important; } } + +.dac-offset-parent { + position: relative !important; } + +#tb li:before, #qv li:before { + background-position: -26px -38px; + height: 24px; + width: 24px; + content: ''; + left: -8px; + opacity: .7; + position: absolute; + top: -4px; } diff --git a/tools/droiddoc/templates-sdk/assets/css/fullscreen.css b/tools/droiddoc/templates-sdk/assets/css/fullscreen.css index 7912e34..0f108e0 100644 --- a/tools/droiddoc/templates-sdk/assets/css/fullscreen.css +++ b/tools/droiddoc/templates-sdk/assets/css/fullscreen.css @@ -14,195 +14,7 @@ */ @media screen, projection, print { -.full { - padding: 2.5em 0; - border-top: solid 1px #ddd; - border-bottom: solid 1px #ddd; - background: #f7f7f7; + .wrap { + max-width: none; + } } -.wrap { - margin: 0 auto; - width: 100%; - min-width:600px; - clear: both; -} -.cols { - height: 1%; - margin: 0 -1.533742331288343558282%; - width: 103.06748466257669%} -*+html .cols { - margin-bottom: 20px; -} -.cols:after { - clear: both; - content: ' '; - display: block; - height: 0; - visibility: hidden; -} -.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, -.col-13, .col-14, .col-15, .col-16 { - float: left; - margin: 0 1.063829787234% 20px 1.063829787234%; -} -* html .col-1, * html .col-2, * html .col-3, * html .col-4, * html .col-5, * html .col-6, * html -.col-7, * html .col-8, * html .col-9, * html .col-10, * html .col-11, * html .col-12, * html -.col-13, * html .col-14, * html .col-15, * html .col-16 { - margin: 0; - margin: 0 1.063829787234% 20px 1.063829787234%; -} -[dir='rtl'] .col-1, [dir='rtl'] .col-2, [dir='rtl'] .col-3, [dir='rtl'] .col-4, [dir='rtl'] .col-5, -[dir='rtl'] .col-6, [dir='rtl'] .col-7, [dir='rtl'] .col-8, [dir='rtl'] .col-9, [dir='rtl'] .col-10, -[dir='rtl'] .col-11, [dir='rtl'] .col-12 { - float: right; -} -.col-1 { - width: 4.16666666666667%; -} -.col-2 { - width: 10.4166666666667%; -} -.col-3 { - width: 16.6666666666667%; -} -.col-4 { - width: 22.9166666666667%; -} -.col-5 { - width: 29.1666666666667%; -} -.col-6 { - width: 35.4166666666667%; -} -.col-7 { - width: 41.6666666666667%; -} -.col-8 { - width: 47.9166666666667%; -} -.col-9 { - width: 55.3333333333333%; -} -.col-10 { - width: 60.4166666666667%; -} -.col-11 { - width: 66.6666666666667%; -} -.col-12 { - width: 72.9166666666667%; -} -.col-13 { - width: 79.1666666666667%; -} -.col-14 { - width: 85.4166666666667%; -} -.col-15 { - width: 91.6666666666667%; -} -.col-16 { - width: 97.9166666666667%; -} - - - - - - - -#header .col-1, -#nav-x .col-1 { width: 40px } -#header .col-2, -#nav-x .col-2 { width: 100px } -#header .col-3, -#nav-x .col-3 { width: 160px } -#header .col-4, -#nav-x .col-4 { width: 220px } -#header .col-5, -#nav-x .col-5 { width: 280px } -#header .col-6, -#nav-x .col-6 { width: 340px } -#header .col-7, -#nav-x .col-7 { width: 400px } -#header .col-8, -#nav-x .col-8 { width: 460px } -#header .col-9, -#nav-x .col-9 { width: 520px } -#header .col-10, -#nav-x .col-10 { width: 580px } -#header .col-11, -#nav-x .col-11 { width: 640px } -#header .col-12, -#nav-x .col-12 { width: 700px } -#header .col-13, -#nav-x .col-13 { width: 760px } -#header .col-14, -#nav-x .col-14 { width: 820px } -#header .col-15, -#nav-x .col-15 { width: 880px } -#header .col-16, -#nav-x .col-16 { width: 940px } - - - -body { - padding:0 20px; -} -#header, -#searchResults, -#nav-x { - margin:0; -} -#body-content { - margin:0; -} -#body-content > .col-12 { - width:77.9804965%; - margin:0 0 0 0.97%; /* this percentage chosen to make IE9 happy */ -} -#side-nav { - width: 19.9804965%; - margin:0 1.063829787234% 0 0; -} - -#header .wrap { - max-width: 100%; -} - -#header-wrapper #nav-x div.wrap, -#searchResults.wrap { - max-width:100%; -} - -.nav-x { - margin:-2px 0 0 0; -} - -#devdoc-nav.fixed, -#devdoc-nav.fixed a.totop { - left:20px; /* !important ... for IE i think */ -} - -#sticky-header { - padding: 0 20px; -} - -#sticky-header > div { - width: 100%; -} - -.sticky-menu { - width:100%; - left:-20px; -} - -.col-right { - margin-right:0px; -} - -@media screen and (max-width:772px) { -.col-5, .col-6, .col-7 { - clear: both; - width: 97.0238096%} -}
\ No newline at end of file diff --git a/tools/droiddoc/templates-sdk/assets/images/android_logo.png b/tools/droiddoc/templates-sdk/assets/images/android_logo.png Binary files differnew file mode 100644 index 0000000..8fa1b7a --- /dev/null +++ b/tools/droiddoc/templates-sdk/assets/images/android_logo.png diff --git a/tools/droiddoc/templates-sdk/assets/images/android_logo@2x.png b/tools/droiddoc/templates-sdk/assets/images/android_logo@2x.png Binary files differnew file mode 100644 index 0000000..1f3e23d --- /dev/null +++ b/tools/droiddoc/templates-sdk/assets/images/android_logo@2x.png diff --git a/tools/droiddoc/templates-sdk/assets/images/android_logo_ndk.png b/tools/droiddoc/templates-sdk/assets/images/android_logo_ndk.png Binary files differnew file mode 100644 index 0000000..511c200 --- /dev/null +++ b/tools/droiddoc/templates-sdk/assets/images/android_logo_ndk.png diff --git a/tools/droiddoc/templates-sdk/assets/images/android_logo_ndk@2x.png b/tools/droiddoc/templates-sdk/assets/images/android_logo_ndk@2x.png Binary files differnew file mode 100644 index 0000000..1d88dfa --- /dev/null +++ b/tools/droiddoc/templates-sdk/assets/images/android_logo_ndk@2x.png diff --git a/tools/droiddoc/templates-sdk/assets/images/resource-card-default-android.jpg b/tools/droiddoc/templates-sdk/assets/images/resource-card-default-android.jpg Binary files differindex 8050744..398030f 100644 --- a/tools/droiddoc/templates-sdk/assets/images/resource-card-default-android.jpg +++ b/tools/droiddoc/templates-sdk/assets/images/resource-card-default-android.jpg diff --git a/tools/droiddoc/templates-sdk/assets/images/sprite-2x.png b/tools/droiddoc/templates-sdk/assets/images/sprite-2x.png Binary files differnew file mode 100644 index 0000000..a1f0683 --- /dev/null +++ b/tools/droiddoc/templates-sdk/assets/images/sprite-2x.png diff --git a/tools/droiddoc/templates-sdk/assets/images/sprite.png b/tools/droiddoc/templates-sdk/assets/images/sprite.png Binary files differnew file mode 100644 index 0000000..3ee611c --- /dev/null +++ b/tools/droiddoc/templates-sdk/assets/images/sprite.png diff --git a/tools/droiddoc/templates-sdk/assets/images/styles/notice-designers-material.png b/tools/droiddoc/templates-sdk/assets/images/styles/notice-designers-material.png Binary files differdeleted file mode 100644 index 1fb22a2..0000000 --- a/tools/droiddoc/templates-sdk/assets/images/styles/notice-designers-material.png +++ /dev/null diff --git a/tools/droiddoc/templates-sdk/assets/images/styles/notice-designers-material@2x.png b/tools/droiddoc/templates-sdk/assets/images/styles/notice-designers-material@2x.png Binary files differdeleted file mode 100644 index bc2f74b..0000000 --- a/tools/droiddoc/templates-sdk/assets/images/styles/notice-designers-material@2x.png +++ /dev/null diff --git a/tools/droiddoc/templates-sdk/assets/js/docs.js b/tools/droiddoc/templates-sdk/assets/js/docs.js index 7f4be4e..30a29fc 100644 --- a/tools/droiddoc/templates-sdk/assets/js/docs.js +++ b/tools/droiddoc/templates-sdk/assets/js/docs.js @@ -56,7 +56,7 @@ $(document).ready(function() { // setup keyboard listener for search shortcut $('body').keyup(function(event) { - if (event.which == 191) { + if (event.which == 191 && $(event.target).is(':not(:input)')) { $('#search_autocomplete').focus(); } }); @@ -71,18 +71,12 @@ $(document).ready(function() { }); // initialize the divs with custom scrollbars - $('.scroll-pane').jScrollPane( {verticalGutter:0} ); - - // add HRs below all H2s (except for a few other h2 variants) - $('h2').not('#qv h2') - .not('#tb h2') - .not('.sidebox h2') - .not('#devdoc-nav h2') - .not('h2.norule').css({marginBottom:0}) - .after('<hr/>'); + if (window.innerWidth >= 720) { + $('.scroll-pane').jScrollPane({verticalGutter: 0}); + } // set up the search close button - $('.search .close').click(function() { + $('#search-close').click(function() { $searchInput = $('#search_autocomplete'); $searchInput.attr('value', ''); $(this).addClass("hide"); @@ -92,32 +86,6 @@ $(document).ready(function() { hideResults(); }); - // Set up quicknav - var quicknav_open = false; - $("#btn-quicknav").click(function() { - if (quicknav_open) { - $(this).removeClass('active'); - quicknav_open = false; - collapse(); - } else { - $(this).addClass('active'); - quicknav_open = true; - expand(); - } - }) - - var expand = function() { - $('#header-wrap').addClass('quicknav'); - $('#quicknav').stop().show().animate({opacity:'1'}); - } - - var collapse = function() { - $('#quicknav').stop().animate({opacity:'0'}, 100, function() { - $(this).hide(); - $('#header-wrap').removeClass('quicknav'); - }); - } - //Set up search $("#search_autocomplete").focus(function() { @@ -180,73 +148,88 @@ $(document).ready(function() { // Highlight the header tabs... // highlight Design tab - if ($("body").hasClass("design")) { - $("#header li.design a").addClass("selected"); - $("#sticky-header").addClass("design"); + var urlSegments = pagePathOriginal.split('/'); + var navEl = $(".dac-nav-list"); + var subNavEl = navEl.find(".dac-nav-secondary"); + var parentNavEl; + if ($("body").hasClass("design")) { + navEl.find("> li.design > a").addClass("selected"); // highlight About tabs } else if ($("body").hasClass("about")) { - var rootDir = pagePathOriginal.substring(1,pagePathOriginal.indexOf('/', 1)); - if (rootDir == "about") { - $("#nav-x li.about a").addClass("selected"); - } else if (rootDir == "wear") { - $("#nav-x li.wear a").addClass("selected"); - } else if (rootDir == "tv") { - $("#nav-x li.tv a").addClass("selected"); - } else if (rootDir == "auto") { - $("#nav-x li.auto a").addClass("selected"); + if (urlSegments[1] == "about" || urlSegments[1] == "wear" || urlSegments[1] == "tv" || urlSegments[1] == "auto") { + navEl.find("> li.home > a").addClass('has-subnav'); + subNavEl.find("li." + urlSegments[1] + " > a").addClass("selected"); + } else { + navEl.find("> li.home > a").addClass('selected'); + } + +// highlight NDK tabs + } else if ($("body").hasClass("ndk")) { + parentNavEl = navEl.find("> li.ndk > a"); + parentNavEl.addClass('has-subnav'); + if ($("body").hasClass("guide")) { + navEl.find("> li.guides > a").addClass("selected ndk"); + } else if ($("body").hasClass("reference")) { + navEl.find("> li.reference > a").addClass("selected ndk"); + } else if ($("body").hasClass("samples")) { + navEl.find("> li.samples > a").addClass("selected ndk"); + } else if ($("body").hasClass("downloads")) { + navEl.find("> li.downloads > a").addClass("selected ndk"); } + // highlight Develop tab } else if ($("body").hasClass("develop") || $("body").hasClass("google")) { - $("#header li.develop a").addClass("selected"); - $("#sticky-header").addClass("develop"); + parentNavEl = navEl.find("> li.develop > a"); + parentNavEl.addClass('has-subnav'); + // In Develop docs, also highlight appropriate sub-tab - var rootDir = pagePathOriginal.substring(1,pagePathOriginal.indexOf('/', 1)); - if (rootDir == "training") { - $("#nav-x li.training a").addClass("selected"); - } else if (rootDir == "guide") { - $("#nav-x li.guide a").addClass("selected"); - } else if (rootDir == "reference") { + if (urlSegments[1] == "training") { + subNavEl.find("li.training > a").addClass("selected"); + } else if (urlSegments[1] == "guide") { + subNavEl.find("li.guide > a").addClass("selected"); + } else if (urlSegments[1] == "reference") { // If the root is reference, but page is also part of Google Services, select Google if ($("body").hasClass("google")) { - $("#nav-x li.google a").addClass("selected"); + subNavEl.find("li.google > a").addClass("selected"); } else { - $("#nav-x li.reference a").addClass("selected"); + subNavEl.find("li.reference > a").addClass("selected"); } - } else if ((rootDir == "tools") || (rootDir == "sdk")) { - $("#nav-x li.tools a").addClass("selected"); + } else if ((urlSegments[1] == "tools") || (urlSegments[1] == "sdk")) { + subNavEl.find("li.tools > a").addClass("selected"); } else if ($("body").hasClass("google")) { - $("#nav-x li.google a").addClass("selected"); + subNavEl.find("li.google > a").addClass("selected"); } else if ($("body").hasClass("samples")) { - $("#nav-x li.samples a").addClass("selected"); + subNavEl.find("li.samples > a").addClass("selected"); + } else if ($("body").hasClass("preview")) { + subNavEl.find("li.preview > a").addClass("selected"); + } else { + parentNavEl.removeClass('has-subnav').addClass("selected"); } - // highlight Distribute tab } else if ($("body").hasClass("distribute")) { - $("#header li.distribute a").addClass("selected"); - $("#sticky-header").addClass("distribute"); - - var baseFrag = pagePathOriginal.indexOf('/', 1) + 1; - var secondFrag = pagePathOriginal.substring(baseFrag, pagePathOriginal.indexOf('/', baseFrag)); - if (secondFrag == "users") { - $("#nav-x li.users a").addClass("selected"); - } else if (secondFrag == "engage") { - $("#nav-x li.engage a").addClass("selected"); - } else if (secondFrag == "monetize") { - $("#nav-x li.monetize a").addClass("selected"); - } else if (secondFrag == "analyze") { - $("#nav-x li.analyze a").addClass("selected"); - } else if (secondFrag == "tools") { - $("#nav-x li.disttools a").addClass("selected"); - } else if (secondFrag == "stories") { - $("#nav-x li.stories a").addClass("selected"); - } else if (secondFrag == "essentials") { - $("#nav-x li.essentials a").addClass("selected"); - } else if (secondFrag == "googleplay") { - $("#nav-x li.googleplay a").addClass("selected"); + parentNavEl = navEl.find("> li.distribute > a"); + parentNavEl.addClass('has-subnav'); + + if (urlSegments[2] == "users") { + subNavEl.find("li.users > a").addClass("selected"); + } else if (urlSegments[2] == "engage") { + subNavEl.find("li.engage > a").addClass("selected"); + } else if (urlSegments[2] == "monetize") { + subNavEl.find("li.monetize > a").addClass("selected"); + } else if (urlSegments[2] == "analyze") { + subNavEl.find("li.analyze > a").addClass("selected"); + } else if (urlSegments[2] == "tools") { + subNavEl.find("li.disttools > a").addClass("selected"); + } else if (urlSegments[2] == "stories") { + subNavEl.find("li.stories > a").addClass("selected"); + } else if (urlSegments[2] == "essentials") { + subNavEl.find("li.essentials > a").addClass("selected"); + } else if (urlSegments[2] == "googleplay") { + subNavEl.find("li.googleplay > a").addClass("selected"); + } else { + parentNavEl.removeClass('has-subnav').addClass("selected"); } - } else if ($("body").hasClass("about")) { - $("#sticky-header").addClass("about"); } // set global variable so we can highlight the sidenav a bit later (such as for google reference) @@ -392,14 +375,13 @@ false; // navigate across topic boundaries only in design docs var $olClasses = $('<ol class="class-list"></ol>'); var $liClass; - var $imgIcon; var $h2Title; var $pSummary; var $olLessons; var $liLesson; $classLinks.each(function(index) { - $liClass = $('<li></li>'); - $h2Title = $('<a class="title" href="'+$(this).attr('href')+'"><h2>' + $(this).html()+'</h2><span></span></a>'); + $liClass = $('<li class="clearfix"></li>'); + $h2Title = $('<a class="title" href="'+$(this).attr('href')+'"><h2 class="norule">' + $(this).html()+'</h2><span></span></a>'); $pSummary = $('<p class="description">' + $classDescriptions[index] + '</p>'); $olLessons = $('<ol class="lesson-list"></ol>'); @@ -407,18 +389,14 @@ false; // navigate across topic boundaries only in design docs $lessons = $(this).closest('li').find('ul li a'); if ($lessons.length) { - $imgIcon = $('<img src="'+toRoot+'assets/images/resource-tutorial.png" ' - + ' width="64" height="64" alt=""/>'); $lessons.each(function(index) { $olLessons.append('<li><a href="'+$(this).attr('href')+'">' + $(this).html()+'</a></li>'); }); } else { - $imgIcon = $('<img src="'+toRoot+'assets/images/resource-article.png" ' - + ' width="64" height="64" alt=""/>'); $pSummary.addClass('article'); } - $liClass.append($h2Title).append($imgIcon).append($pSummary).append($olLessons); + $liClass.append($h2Title).append($pSummary).append($olLessons); $olClasses.append($liClass); }); $('.jd-descr').append($olClasses); @@ -436,23 +414,15 @@ false; // navigate across topic boundaries only in design docs /* Resize nav height when window height changes */ $(window).resize(function() { if ($('#side-nav').length == 0) return; - var stylesheet = $('link[rel="stylesheet"][class="fullscreen"]'); - setNavBarLeftPos(); // do this even if sidenav isn't fixed because it could become fixed + setNavBarDimensions(); // do this even if sidenav isn't fixed because it could become fixed // make sidenav behave when resizing the window and side-scolling is a concern - if (sticky) { - if ((stylesheet.attr("disabled") == "disabled") || stylesheet.length == 0) { - updateSideNavPosition(); - } else { - updateSidenavFullscreenWidth(); - } - } - resizeNav(); + updateSideNavDimensions(); + checkSticky(); + resizeNav(250); }); - - var navBarLeftPos; if ($('#devdoc-nav').length) { - setNavBarLeftPos(); + setNavBarDimensions(); } @@ -495,7 +465,12 @@ false; // navigate across topic boundaries only in design docs $('h2').click(function() { var id = $(this).attr('id'); if (id) { - document.location.hash = id; + if (history && history.replaceState) { + // Change url without scrolling. + history.replaceState({}, '', '#' + id); + } else { + document.location.hash = id; + } } }); @@ -504,15 +479,6 @@ false; // navigate across topic boundaries only in design docs po.src = 'https://apis.google.com/js/plusone.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s); - - // Revise the sidenav widths to make room for the scrollbar - // which avoids the visible width from changing each time the bar appears - var $sidenav = $("#side-nav"); - var sidenav_width = parseInt($sidenav.innerWidth()); - - $("#devdoc-nav #nav").css("width", sidenav_width - 4 + "px"); // 4px is scrollbar width - - $(".scroll-pane").removeAttr("tabindex"); // get rid of tabindex added by jscroller if ($(".scroll-pane").length > 1) { @@ -738,21 +704,28 @@ function initExpandableNavItems(rootTag) { /** Create the list of breadcrumb links in the sticky header */ function buildBreadcrumbs() { - var $breadcrumbUl = $("#sticky-header ul.breadcrumb"); + var $breadcrumbUl = $(".dac-header-crumbs"); + var primaryNavLink = ".dac-nav-list > .dac-nav-item > .dac-nav-link"; + // Add the secondary horizontal nav item, if provided - var $selectedSecondNav = $("div#nav-x ul.nav-x a.selected").clone().removeClass("selected"); + var $selectedSecondNav = $(".dac-nav-secondary .dac-nav-link.selected").clone() + .attr('class', 'dac-header-crumbs-link'); + if ($selectedSecondNav.length) { - $breadcrumbUl.prepend($("<li>").append($selectedSecondNav)) + $breadcrumbUl.prepend($('<li class="dac-header-crumbs-item">').append($selectedSecondNav)); } + // Add the primary horizontal nav - var $selectedFirstNav = $("div#header-wrap ul.nav-x a.selected").clone().removeClass("selected"); + var $selectedFirstNav = $(primaryNavLink + ".selected, " + primaryNavLink + ".has-subnav").clone() + .attr('class', 'dac-header-crumbs-link'); + // If there's no header nav item, use the logo link and title from alt text if ($selectedFirstNav.length < 1) { - $selectedFirstNav = $("<a>") + $selectedFirstNav = $('<a class="dac-header-crumbs-link">') .attr('href', $("div#header .logo a").attr('href')) .text($("div#header .logo img").attr('alt')); } - $breadcrumbUl.prepend($("<li>").append($selectedFirstNav)); + $breadcrumbUl.prepend($('<li class="dac-header-crumbs-item">').append($selectedFirstNav)); } @@ -809,22 +782,25 @@ function toggleFullscreen(enable) { enabled = false; } writeCookie("fullscreen", enabled, null); - setNavBarLeftPos(); + setNavBarDimensions(); resizeNav(delay); - updateSideNavPosition(); + updateSideNavDimensions(); setTimeout(initSidenavHeightResize,delay); } - -function setNavBarLeftPos() { +// TODO: Refactor into a closure. +var navBarLeftPos; +var navBarWidth; +function setNavBarDimensions() { navBarLeftPos = $('#body-content').offset().left; + navBarWidth = $('#side-nav').width(); } -function updateSideNavPosition() { +function updateSideNavDimensions() { var newLeft = $(window).scrollLeft() - navBarLeftPos; - $('#devdoc-nav').css({left: -newLeft}); - $('#devdoc-nav .totop').css({left: -(newLeft - parseInt($('#side-nav').css('margin-left')))}); + $('#devdoc-nav').css({left: -newLeft, width: navBarWidth}); + $('#devdoc-nav .totop').css({left: -(newLeft - parseInt($('#side-nav').css('padding-left')))}); } // TODO: use $(document).ready instead @@ -858,7 +834,7 @@ $(document).ready(function() { -/* ######### RESIZE THE SIDENAV HEIGHT ########## */ +/* ######### RESIZE THE SIDENAV ########## */ function resizeNav(delay) { var $nav = $("#devdoc-nav"); @@ -874,7 +850,7 @@ function resizeNav(delay) { // get the height of space between nav and top of window. // Could be either margin or top position, depending on whether the nav is fixed. - var topMargin = (parseInt($nav.css('margin-top')) || parseInt($nav.css('top'))) + 1; + var topMargin = (parseInt($nav.css('top')) || 20) + 1; // add 1 for the #side-nav bottom margin // Depending on whether the header is visible, set the side nav's height. @@ -889,7 +865,9 @@ function resizeNav(delay) { $scrollPanes = $(".scroll-pane"); - if ($scrollPanes.length > 1) { + if ($window.width() < 720) { + $nav.css('height', ''); + } else if ($scrollPanes.length > 1) { // subtract the height of the api level widget and nav swapper from the available nav height navHeight -= ($('#api-nav-header').outerHeight(true) + $('#nav-swap').outerHeight(true)); @@ -957,7 +935,7 @@ function delayedReInitScrollbars(delay) { function reInitScrollbars() { var pane = $(".scroll-pane").each(function(){ var api = $(this).data('jsp'); - if (!api) { setTimeout(reInitScrollbars,300); return;} + if (!api) {return;} api.reinitialise( {verticalGutter:0} ); }); $(".scroll-pane").removeAttr("tabindex"); // get rid of tabindex added by jscroller @@ -993,6 +971,7 @@ function restoreHeight(packageHeight) { /** Scroll the jScrollPane to make the currently selected item visible This is called when the page finished loading. */ function scrollIntoView(nav) { + return; var $nav = $("#"+nav); var element = $nav.jScrollPane({/* ...settings... */}); var api = element.data('jsp'); @@ -1068,39 +1047,45 @@ var prevScrollLeft = 0; // used to compare current position to previous position /* Sets the vertical scoll position at which the sticky bar should appear. This method is called to reset the position when search results appear or hide */ function setStickyTop() { - stickyTop = $('#header-wrapper').outerHeight() - $('#sticky-header').outerHeight(); + stickyTop = $('#header-wrapper').outerHeight() - $('#header > .dac-header-inner').outerHeight(); } /* * Displays sticky nav bar on pages when dac header scrolls out of view */ $(window).scroll(function(event) { - - setStickyTop(); - var hiding = false; - var $stickyEl = $('#sticky-header'); - var $menuEl = $('.menu-container'); - // Exit if there's no sidenav - if ($('#side-nav').length == 0) return; // Exit if the mouse target is a DIV, because that means the event is coming // from a scrollable div and so there's no need to make adjustments to our layout if ($(event.target).nodeName == "DIV") { return; } + checkSticky(); +}); + +function checkSticky() { + setStickyTop(); + var $headerEl = $('#header'); + // Exit if there's no sidenav + if ($('#side-nav').length == 0) return; + var top = $(window).scrollTop(); // we set the navbar fixed when the scroll position is beyond the height of the site header... - var shouldBeSticky = top >= stickyTop; + var shouldBeSticky = top > stickyTop; // ... except if the document content is shorter than the sidenav height. // (this is necessary to avoid crazy behavior on OSX Lion due to overscroll bouncing) if ($("#doc-col").height() < $("#side-nav").height()) { shouldBeSticky = false; } + // Nor on mobile + if (window.innerWidth < 720) { + shouldBeSticky = false; + } // Account for horizontal scroll var scrollLeft = $(window).scrollLeft(); // When the sidenav is fixed and user scrolls horizontally, reposition the sidenav to match if (sticky && (scrollLeft != prevScrollLeft)) { - updateSideNavPosition(); + updateSideNavDimensions(); prevScrollLeft = scrollLeft; } @@ -1113,41 +1098,29 @@ $(window).scroll(function(event) { // If sticky header visible and position is now near top, hide sticky if (sticky && !shouldBeSticky) { sticky = false; - hiding = true; // make the sidenav static again $('#devdoc-nav') - .removeClass('fixed') - .css({'width':'auto','margin':''}) - .prependTo('#side-nav'); + .removeClass('fixed') + .css({'width':'auto','margin':''}); // delay hide the sticky - $menuEl.removeClass('sticky-menu'); - $stickyEl.fadeOut(250); - hiding = false; + $headerEl.removeClass('is-sticky'); // update the sidenaav position for side scrolling - updateSideNavPosition(); + updateSideNavDimensions(); } else if (!sticky && shouldBeSticky) { sticky = true; - $stickyEl.fadeIn(10); - $menuEl.addClass('sticky-menu'); + $headerEl.addClass('is-sticky'); // make the sidenav fixed - var width = $('#devdoc-nav').width(); $('#devdoc-nav') - .addClass('fixed') - .css({'width':width+'px'}) - .prependTo('#body-content'); + .addClass('fixed'); // update the sidenaav position for side scrolling - updateSideNavPosition(); + updateSideNavDimensions(); - } else if (hiding && top < 15) { - $menuEl.removeClass('sticky-menu'); - $stickyEl.hide(); - hiding = false; } resizeNav(250); // pass true in order to delay the scrollbar re-initialization for performance -}); +} /* * Manages secion card states and nav resize to conclude loading @@ -1352,13 +1325,13 @@ function requestAppendHL(uri) { function changeNavLang(lang) { - var $links = $("#devdoc-nav,#header,#nav-x,.training-nav-top,.content-footer").find("a["+lang+"-lang]"); - $links.each(function(i){ // for each link with a translation + if (lang === 'en') { return; } + + var $links = $('a[' + lang + '-lang]'); + $links.each(function(){ // for each link with a translation var $link = $(this); - if (lang != "en") { // No need to worry about English, because a language change invokes new request - // put the desired language from the attribute as the text - $link.text($link.attr(lang+"-lang")) - } + // put the desired language from the attribute as the text + $link.text($link.attr(lang + '-lang')) }); } @@ -1841,12 +1814,11 @@ function sync_selection_table(toroot) // if there are api results if ((gMatches.length > 0) || (gGoogleMatches.length > 0)) { // reveal suggestion list - $('.suggest-card.dummy').show(); $('.suggest-card.reference').show(); var listIndex = 0; // list index position // reset the lists - $(".search_filtered_wrapper.reference li").remove(); + $(".suggest-card.reference li").remove(); // ########### ANDROID RESULTS ############# if (gMatches.length > 0) { @@ -1876,13 +1848,12 @@ function sync_selection_table(toroot) } } else { $('.suggest-card.reference').hide(); - $('.suggest-card.dummy').hide(); } // ########### JD DOC RESULTS ############# if (gDocsMatches.length > 0) { // reset the lists - $(".search_filtered_wrapper.docs li").remove(); + $(".suggest-card:not(.reference) li").remove(); // determine google results to show // NOTE: The order of the conditions below for the sugg.type MUST BE SPECIFIC: @@ -1947,7 +1918,7 @@ function sync_selection_table(toroot) } } else { - $('.search_filtered_wrapper.docs .suggest-card:not(.dummy)').hide(300); + $('.suggest-card:not(.reference)').hide(300); } } @@ -1971,14 +1942,14 @@ function search_changed(e, kd, toroot) // show/hide the close button if (text != '') { - $(".search .close").removeClass("hide"); + $("#search-close").removeClass("hide"); } else { - $(".search .close").addClass("hide"); + $("#search-close").addClass("hide"); } // 27 = esc if (e.keyCode == 27) { // close all search results - if (kd) $('.search .close').trigger('click'); + if (kd) $('#search-close').trigger('click'); return true; } // 13 = enter @@ -2389,6 +2360,37 @@ function search_changed(e, kd, toroot) } } + // Search for Preview Guides + for (var i=0; i<PREVIEW_RESOURCES.length; i++) { + // current search comparison, with counters for tag and title, + // used later to improve ranking + var s = PREVIEW_RESOURCES[i]; + s.matched_tag = 0; + s.matched_title = 0; + var matched = false; + + // Check if query matches any tags; work backwards toward 1 to assist ranking + for (var j = s.keywords.length - 1; j >= 0; j--) { + // it matches a tag + if (s.keywords[j].toLowerCase().match(textRegex)) { + matched = true; + s.matched_tag = j + 1; // add 1 to index position + } + } + // Check if query matches the doc title, but only for current language + if (s.lang == currentLang) { + // if query matches the doc title + if (s.title.toLowerCase().match(textRegex)) { + matched = true; + s.matched_title = 1; + } + } + if (matched) { + gDocsMatches[matchedCountDocs] = s; + matchedCountDocs++; + } + } + // Rank/sort all the matched pages rank_autocomplete_doc_results(text, gDocsMatches); } @@ -2536,7 +2538,7 @@ function search_focus_changed(obj, focused) { if (!focused) { if(obj.value == ""){ - $(".search .close").addClass("hide"); + $("#search-close").addClass("hide"); } $(".suggest-card").hide(); } @@ -2553,7 +2555,7 @@ function submit_search() { function hideResults() { $("#searchResults").slideUp('fast', setStickyTop); - $(".search .close").addClass("hide"); + $("#search-close").addClass("hide"); location.hash = ''; $("#search_autocomplete").val("").blur(); @@ -2670,7 +2672,7 @@ google.setOnLoadCallback(function(){ } else { // first time loading search results for this page $('#searchResults').slideDown('slow', setStickyTop); - $(".search .close").removeClass("hide"); + $("#search-close").removeClass("hide"); loadSearchResults(); } }, true); @@ -2714,7 +2716,7 @@ $(window).hashchange( function(){ searchControl.execute(query); $('#searchResults').slideDown('slow', setStickyTop); $("#search_autocomplete").focus(); - $(".search .close").removeClass("hide"); + $("#search-close").removeClass("hide"); updateResultTitle(query); }); @@ -3146,6 +3148,10 @@ function init_google_navtree(navtree_id, toroot, root_nodes) me.node = new Object(); me.node.li = document.getElementById(navtree_id); + if (!me.node.li) { + return; + } + me.node.children_data = root_nodes; me.node.children = new Array(); me.node.children_ul = document.createElement("ul"); @@ -3536,6 +3542,10 @@ function showSamples() { var addedPageResources = {}; $(document).ready(function() { + // Need to initialize hero carousel before other sections for dedupe + // to work correctly. + $('[data-carousel-query]').dacCarouselQuery(); + $('.resource-widget').each(function() { initResourceWidget(this); }); @@ -3545,8 +3555,8 @@ function showSamples() { showing lines that are cut off. This works with the css ellipsis classes to fade last text line and apply an ellipsis char. */ - //card text currently uses 15px line height. - var lineHeight = 15; + //card text currently uses 20px line height. + var lineHeight = 20; $('.card-info .text').ellipsisfade(lineHeight); }); @@ -3562,11 +3572,10 @@ function showSamples() { isCarousel = $widget.hasClass('resource-carousel-layout'), isStack = $widget.hasClass('resource-stack-layout'); - // find size of widget by pulling out its class name - var sizeCols = 1; + // remove illegal col-x class which is not relevant anymore thanks to responsive styles. var m = $widget.get(0).className.match(/\bcol-(\d+)\b/); - if (m) { - sizeCols = parseInt(m[1], 10); + if (m && !$widget.is('.cols > *')) { + $widget.removeClass('col-' + m[1]); } var opts = { @@ -3576,7 +3585,6 @@ function showSamples() { sortOrder: $widget.data('sortorder'), query: $widget.data('query'), section: $widget.data('section'), - sizeCols: sizeCols, /* Added by LFL 6/6/14 */ resourceStyle: $widget.data('resourcestyle') || 'card', stackSort: $widget.data('stacksort') || 'true' @@ -3604,7 +3612,7 @@ function showSamples() { /* Initializes a Resource Carousel Widget */ function drawResourcesCarouselWidget($widget, opts, resources) { $widget.empty(); - var plusone = true; //always show plusone on carousel + var plusone = false; // stop showing plusone buttons on cards $widget.addClass('resource-card slideshow-container') .append($('<a>').addClass('slideshow-prev').text('Prev')) @@ -3642,7 +3650,7 @@ function showSamples() { function drawResourcesStackWidget($widget, opts, resources, sections) { // Don't empty widget, grab all items inside since they will be the first // items stacked, followed by the resource query - var plusone = true; //by default show plusone on section cards + var plusone = false; // stop showing plusone buttons on cards var cards = $widget.find('.resource-card').detach().toArray(); var numStacks = opts.numStacks || 1; var $stacks = []; @@ -3737,22 +3745,33 @@ function showSamples() { return $el; } + + function createResponsiveFlowColumn(cardSize) { + var cardWidth = parseInt(cardSize.match(/(\d+)/)[1], 10); + var column = $('<div>').addClass('col-' + (cardWidth / 3) + 'of6'); + if (cardWidth < 9) { + column.addClass('col-tablet-1of2'); + } else if (cardWidth > 9 && cardWidth < 18) { + column.addClass('col-tablet-1of1'); + } + if (cardWidth < 18) { + column.addClass('col-mobile-1of1') + } + return column; + } /* Initializes a flow widget, see distribute.scss for generating accompanying css */ function drawResourcesFlowWidget($widget, opts, resources) { - $widget.empty(); + $widget.empty().addClass('cols'); var cardSizes = opts.cardSizes || ['6x6']; var i = 0, j = 0; - var plusone = true; // by default show plusone on resource cards + var plusone = false; // stop showing plusone buttons on cards while (i < resources.length) { var cardSize = cardSizes[j++ % cardSizes.length]; cardSize = cardSize.replace(/^\s+|\s+$/,''); - // Some card sizes do not get a plusone button, such as where space is constrained - // or for cards commonly embedded in docs (to improve overall page speed). - plusone = !((cardSize == "6x2") || (cardSize == "6x3") || - (cardSize == "9x2") || (cardSize == "9x3") || - (cardSize == "12x2") || (cardSize == "12x3")); + + var column = createResponsiveFlowColumn(cardSize).appendTo($widget); // A stack has a third dimension which is the number of stacked items var isStack = cardSize.match(/(\d+)x(\d+)x(\d+)/); @@ -3763,7 +3782,7 @@ function showSamples() { // Create a stack container which should have the dimensions defined // by the product of the items inside. $stackDiv = $('<div>').addClass('resource-card-stack resource-card-' + isStack[1] - + 'x' + isStack[2] * isStack[3]) .appendTo($widget); + + 'x' + isStack[2] * isStack[3]) .appendTo(column); } // Build each stack item or just a single item @@ -3785,7 +3804,7 @@ function showSamples() { stackCount = 0; } - $card.appendTo($stackDiv || $widget); + $card.appendTo($stackDiv || column); } while (++i < resources.length && stackCount > 0); } @@ -3800,6 +3819,10 @@ function showSamples() { } function buildResourceList(opts) { + return $.queryResources(opts); + } + + $.queryResources = function(opts) { var maxResults = opts.maxResults || 100; var query = opts.query || ''; @@ -3848,8 +3871,9 @@ function showSamples() { // add to list of already added indices for (var j = 0; j < resources.length; j++) { - // console.log(resources[j].title); - addedResourceIndices[resources[j].index] = 1; + if (resources[j]) { + addedResourceIndices[resources[j].index] = 1; + } } // concat to final results list @@ -3891,7 +3915,7 @@ function showSamples() { function getResourceNotAlreadyAddedFilter(addedResourceIndices) { return function(resource) { - return !addedResourceIndices[resource.index]; + return resource && !addedResourceIndices[resource.index]; }; } @@ -4155,7 +4179,7 @@ function showSamples() { $this.parent().siblings().each(function () { if ($(this).is(":visible")) { - var h = $(this).height(); + var h = $(this).outerHeight(true); remainingHeight = remainingHeight - h; } }); @@ -4354,3 +4378,729 @@ function showSamples() { } } })(); + +/** + * Auto TOC + * + * Upgrades h2s on the page to have a rule and be toggle-able on mobile. + */ +(function($) { + var upgraded = false; + var h2Titles; + + function initWidget() { + // add HRs below all H2s (except for a few other h2 variants) + // Consider doing this with css instead. + h2Titles = $('h2').not('#qv h2, #tb h2, .sidebox h2, #devdoc-nav h2, h2.norule'); + h2Titles.css({marginBottom:0}).after('<hr/>'); + + // Exit early if on older browser. + if (!window.matchMedia) { + return; + } + + // Only run logic in mobile layout. + var query = window.matchMedia('(max-width: 719px)'); + if (query.matches) { + makeTogglable(); + } else { + query.addListener(makeTogglable); + } + } + + function makeTogglable() { + // Only run this logic once. + if (upgraded) { return; } + upgraded = true; + + // Only make content h2s togglable. + var contentTitles = h2Titles.filter('#jd-content *'); + + // If there are more than 1 + if (contentTitles.size() < 2) { + return; + } + + contentTitles.each(function() { + // Find all the relevant nodes. + var $title = $(this); + var $hr = $title.next(); + var $contents = $hr.nextUntil('h2, .next-docs'); + var $section = $($title) + .add($hr) + .add($title.prev('a[name]')) + .add($contents); + var $anchor = $section.first().prev(); + var anchorMethod = 'after'; + if ($anchor.length === 0) { + $anchor = $title.parent(); + anchorMethod = 'prepend'; + } + + // Remove from DOM before messing with it. DOM is slow! + $section.detach(); + + // Add mobile-only expand arrows. + $title.prepend('<span class="dac-visible-mobile-inline-block">' + + '<i class="dac-toggle-expand dac-sprite dac-expand-more-black"></i>' + + '<i class="dac-toggle-collapse dac-sprite dac-expand-less-black"></i>' + + '</span>') + .attr('data-toggle', 'section'); + + // Wrap in magic markup. + $section = $section.wrapAll('<div class="dac-toggle dac-mobile">').parent(); + $contents.wrapAll('<div class="dac-toggle-content"><div>'); // extra div used for max-height calculation. + + // Add it back to the dom. + $anchor[anchorMethod].call($anchor, $section); + }); + } + + $(function() { + initWidget(); + }); +})(jQuery); + +(function($) { + 'use strict'; + + /** + * Toggle Floating Label state. + * @param {HTMLElement} el - The DOM element. + * @param options + * @constructor + */ + function FloatingLabel(el, options) { + this.el = $(el); + this.options = $.extend({}, FloatingLabel.DEFAULTS_, options); + this.group = this.el.closest('.dac-form-input-group'); + this.input = this.group.find('.dac-form-input'); + + this.checkValue_ = this.checkValue_.bind(this); + this.checkValue_(); + + this.input.on('focus', function() { + this.group.addClass('dac-focused'); + }.bind(this)); + this.input.on('blur', function() { + this.group.removeClass('dac-focused'); + this.checkValue_(); + }.bind(this)); + this.input.on('keyup', this.checkValue_); + } + + /** + * The label is moved out of the textbox when it has a value. + */ + FloatingLabel.prototype.checkValue_ = function() { + if (this.input.val().length) { + this.group.addClass('dac-has-value'); + } else { + this.group.removeClass('dac-has-value'); + } + }; + + /** + * jQuery plugin + * @param {object} options - Override default options. + */ + $.fn.dacFloatingLabel = function(options) { + return this.each(function() { + new FloatingLabel(this, options); + }); + }; + + $(document).on('ready.aranja', function() { + $('.dac-form-floatlabel').each(function() { + $(this).dacFloatingLabel($(this).data()); + }); + }); +})(jQuery); + +/* global toRoot, CAROUSEL_OVERRIDE */ +(function($) { + // Ordering matters + var TAG_MAP = [ + {from: 'developerstory', to: 'Android Developer Story'}, + {from: 'googleplay', to: 'Google Play'} + ]; + + function DacCarouselQuery(el) { + this.el = $(el); + + var opts = this.el.data(); + opts.maxResults = parseInt(opts.maxResults || '100', 10); + opts.query = opts.carouselQuery; + var resources = $.queryResources(opts); + + this.el.empty(); + $(resources).map(function() { + var resource = $.extend({}, this, CAROUSEL_OVERRIDE[this.url]); + var slide = $('<article class="dac-expand dac-hero">'); + var image = cleanUrl(resource.heroImage || resource.image); + var fullBleed = image && !resource.heroColor; + + // Configure background + slide.css({ + backgroundImage: fullBleed ? 'url(' + image + ')' : '', + backgroundColor: resource.heroColor || '' + }); + + // Should copy be inverted + slide.toggleClass('dac-invert', resource.heroInvert || fullBleed); + slide.toggleClass('dac-darken', fullBleed); + + var cols = $('<div class="cols dac-hero-content">'); + + // inline image column + var rightCol = $('<div class="col-1of2 col-push-1of2 dac-hero-figure">') + .appendTo(cols); + + if (!fullBleed && image) { + rightCol.append($('<img>').attr('src', image)); + } + + // info column + $('<div class="col-1of2 col-pull-1of2">') + .append($('<div class="dac-hero-tag">').text(formatTag(resource))) + .append($('<h1 class="dac-hero-title">').text(formatTitle(resource))) + .append($('<p class="dac-hero-description">').text(resource.summary)) + .append($('<a class="dac-hero-cta">') + .text(formatCTA(resource)) + .attr('href', cleanUrl(resource.url)) + .prepend($('<span class="dac-sprite dac-auto-chevron">')) + ) + .appendTo(cols); + + slide.append(cols.wrap('<div class="wrap">').parent()); + return slide[0]; + }).prependTo(this.el); + + // Pagination element. + this.el.append('<div class="dac-hero-carousel-pagination"><div class="wrap" data-carousel-pagination>'); + + this.el.dacCarousel(); + } + + function cleanUrl(url) { + if (url && url.indexOf('//') === -1) { + url = toRoot + url; + } + return url; + } + + function formatTag(resource) { + // Hmm, need a better more scalable solution for this. + for (var i = 0, mapping; mapping = TAG_MAP[i]; i++) { + if (resource.tags.indexOf(mapping.from) > -1) { + return mapping.to; + } + } + return resource.type; + } + + function formatTitle(resource) { + return resource.title.replace(/android developer story: /i, ''); + } + + function formatCTA(resource) { + return resource.type === 'youtube' ? 'Watch the video' : 'Learn more'; + } + + // jQuery plugin + $.fn.dacCarouselQuery = function() { + return this.each(function() { + var el = $(this); + var data = el.data('dac.carouselQuery'); + + if (!data) { el.data('dac.carouselQuery', (data = new DacCarouselQuery(el))); } + }); + }; + + // Data API + $(function() { + $('[data-carousel-query]').dacCarouselQuery(); + }); +})(jQuery); + +(function($) { + /** + * A CSS based carousel, inspired by SequenceJS. + * @param {jQuery} el + * @param {object} options + * @constructor + */ + function DacCarousel(el, options) { + this.el = $(el); + this.options = options = $.extend({}, DacCarousel.OPTIONS, this.el.data(), options || {}); + this.frames = this.el.find(options.frameSelector); + this.count = this.frames.size(); + this.current = options.start; + + this.initPagination(); + this.initEvents(); + this.initFrame(); + } + + DacCarousel.OPTIONS = { + auto: true, + autoTime: 10000, + autoMinTime: 5000, + btnPrev: '[data-carousel-prev]', + btnNext: '[data-carousel-next]', + frameSelector: 'article', + loop: true, + start: 0, + pagination: '[data-carousel-pagination]' + }; + + DacCarousel.prototype.initPagination = function() { + this.pagination = $([]); + if (!this.options.pagination) { return; } + + var pagination = $('<ul class="dac-pagination">'); + var parent = this.el; + if (typeof this.options.pagination === 'string') { parent = this.el.find(this.options.pagination); } + + if (this.count > 1) { + for (var i = 0; i < this.count; i++) { + var li = $('<li class="dac-pagination-item">').text(i); + if (i === this.options.start) { li.addClass('active'); } + li.click(this.go.bind(this, i)); + + pagination.append(li); + } + this.pagination = pagination.children(); + parent.append(pagination); + } + }; + + DacCarousel.prototype.initEvents = function() { + var that = this; + + this.el.hover(function() { + that.pauseRotateTimer(); + }, function() { + that.startRotateTimer(); + }); + + $(this.options.btnPrev).click(function(e) { + e.preventDefault(); + that.prev(); + }); + + $(this.options.btnNext).click(function(e) { + e.preventDefault(); + that.next(); + }); + }; + + DacCarousel.prototype.initFrame = function() { + this.frames.removeClass('active').eq(this.options.start).addClass('active'); + }; + + DacCarousel.prototype.startRotateTimer = function() { + if (!this.options.auto || this.rotateTimer) { return; } + this.rotateTimer = setTimeout(this.next.bind(this), this.options.autoTime); + }; + + DacCarousel.prototype.pauseRotateTimer = function() { + clearTimeout(this.rotateTimer); + this.rotateTimer = null; + }; + + DacCarousel.prototype.prev = function() { + this.go(this.current - 1); + }; + + DacCarousel.prototype.next = function() { + this.go(this.current + 1); + }; + + DacCarousel.prototype.go = function(next) { + // Figure out what the next slide is. + while (this.count > 0 && next >= this.count) { next -= this.count; } + while (next < 0) { next += this.count; } + + // Cancel if we're already on that slide. + if (next === this.current) { return; } + + // Prepare next slide. + this.frames.eq(next).removeClass('out'); + + // Recalculate styles before starting slide transition. + this.el.resolveStyles(); + // Update pagination + this.pagination.removeClass('active').eq(next).addClass('active'); + + // Transition out current frame + this.frames.eq(this.current).toggleClass('active out'); + + // Transition in a new frame + this.frames.eq(next).toggleClass('active'); + + this.current = next; + }; + + // Helper which resolves new styles for an element, so it can start transitioning + // from the new values. + $.fn.resolveStyles = function() { + /*jshint expr:true*/ + this[0] && this[0].offsetTop; + return this; + }; + + // jQuery plugin + $.fn.dacCarousel = function() { + this.each(function() { + var $el = $(this); + $el.data('dac-carousel', new DacCarousel(this)); + }); + return this; + }; + + // Data API + $(function() { + $('[data-carousel]').dacCarousel(); + }); +})(jQuery); + +(function($) { + 'use strict'; + + function Modal(el, options) { + this.el = $(el); + this.options = $.extend({}, ToggleModal.DEFAULTS_, options); + this.isOpen = false; + + this.el.on('click', function(event) { + if (!$.contains($('.dac-modal-window')[0], event.target)) { + return this.close_(); + } + }.bind(this)); + + this.el.on('open', this.open_.bind(this)); + this.el.on('close', this.close_.bind(this)); + this.el.on('toggle', this.toggle_.bind(this)); + } + + Modal.prototype.toggle_ = function() { + if (this.isOpen) { + this.close_(); + } else { + this.open_(); + } + }; + + Modal.prototype.close_ = function() { + this.el.removeClass('dac-active'); + $('body').removeClass('dac-modal-open'); + this.isOpen = false; + }; + + Modal.prototype.open_ = function() { + this.el.addClass('dac-active'); + $('body').addClass('dac-modal-open'); + this.isOpen = true; + }; + + function ToggleModal(el, options) { + this.el = $(el); + this.options = $.extend({}, ToggleModal.DEFAULTS_, options); + this.modal = this.options.modalToggle ? $('[data-modal="' + this.options.modalToggle + '"]') : + this.el.closest('[data-modal]'); + + this.el.on('click', this.clickHandler_.bind(this)); + } + + ToggleModal.prototype.clickHandler_ = function(event) { + event.preventDefault(); + this.modal.trigger('toggle'); + }; + + /** + * jQuery plugin + * @param {object} options - Override default options. + */ + $.fn.dacModal = function(options) { + return this.each(function() { + new Modal(this, options); + }); + }; + + $.fn.dacToggleModal = function(options) { + return this.each(function() { + new ToggleModal(this, options); + }); + }; + + /** + * Data Attribute API + */ + $(document).on('ready.aranja', function() { + $('[data-modal]').each(function() { + $(this).dacModal($(this).data()); + }); + + $('[data-modal-toggle]').each(function() { + $(this).dacToggleModal($(this).data()); + }); + }); +})(jQuery); + +(function($) { + 'use strict'; + + /** + * Toggle the visabilty of the mobile navigation. + * @param {HTMLElement} el - The DOM element. + * @param options + * @constructor + */ + function ToggleNav(el, options) { + this.el = $(el); + this.options = $.extend({}, ToggleNav.DEFAULTS_, options); + this.options.target = [this.options.navigation]; + + if (this.options.body) {this.options.target.push('body')} + if (this.options.dimmer) {this.options.target.push(this.options.dimmer)} + + this.el.on('click', this.clickHandler_.bind(this)); + } + + /** + * ToggleNav Default Settings + * @type {{body: boolean, dimmer: string, navigation: string, toggleClass: string}} + * @private + */ + ToggleNav.DEFAULTS_ = { + body: true, + dimmer: '.dac-nav-dimmer', + navigation: '[data-dac-nav]', + toggleClass: 'dac-nav-open' + }; + + /** + * The actual toggle logic. + * @param event + * @private + */ + ToggleNav.prototype.clickHandler_ = function(event) { + event.preventDefault(); + $(this.options.target.join(', ')).toggleClass(this.options.toggleClass); + }; + + /** + * jQuery plugin + * @param {object} options - Override default options. + */ + $.fn.dacToggleMobileNav = function(options) { + return this.each(function() { + new ToggleNav(this, options); + }); + }; + + /** + * Data Attribute API + */ + $(window).on('load.aranja', function() { + $('[data-dac-toggle-nav]').each(function() { + $(this).dacToggleMobileNav($(this).data()); + }); + }); +})(jQuery); + +(function($) { + 'use strict'; + + /** + * Submit the newsletter form to a Google Form. + * @param {HTMLElement} el - The Form DOM element. + * @constructor + */ + function NewsletterForm(el) { + this.el = $(el); + this.form = this.el.find('form'); + $('<iframe/>').hide() + .attr('name', 'dac-newsletter-iframe') + .attr('src', '') + .insertBefore(this.form); + this.form.on('submit', this.submitHandler_.bind(this)); + } + + /** + * Close the modal when the form is sent. + * @private + */ + NewsletterForm.prototype.submitHandler_ = function() { + this.form.trigger('reset'); + this.el.trigger('close'); + }; + + /** + * jQuery plugin + * @param {object} options - Override default options. + */ + $.fn.dacNewsletterForm = function(options) { + return this.each(function() { + new NewsletterForm(this, options); + }); + }; + + /** + * Data Attribute API + */ + $(document).on('ready.aranja', function() { + $('[data-newsletter]').each(function() { + $(this).dacNewsletterForm(); + }); + }); +})(jQuery); + +(function($) { + 'use strict'; + + /** + * Smoothly scroll to location on current page. + * @param el + * @param options + * @constructor + */ + function ScrollButton(el, options) { + this.el = $(el); + this.target = $(this.el.attr('href')); + this.options = $.extend({}, ScrollButton.DEFAULTS_, options); + + if (typeof this.options.offset === 'string') { + this.options.offset = $(this.options.offset).height(); + } + + this.el.on('click', this.clickHandler_.bind(this)); + } + + /** + * Default options + * @type {{duration: number, easing: string, offset: number, scrollContainer: string}} + * @private + */ + ScrollButton.DEFAULTS_ = { + duration: 300, + easing: 'swing', + offset: 0, + scrollContainer: 'html, body' + }; + + /** + * Scroll logic + * @param event + * @private + */ + ScrollButton.prototype.clickHandler_ = function(event) { + if (event.altKey || event.ctrlKey || event.metaKey || event.shiftKey) { + return; + } + + event.preventDefault(); + + $(this.options.scrollContainer).animate({ + scrollTop: this.target.offset().top - this.options.offset + }, this.options); + }; + + /** + * jQuery plugin + * @param {object} options - Override default options. + */ + $.fn.dacScrollButton = function(options) { + return this.each(function() { + new ScrollButton(this, options); + }); + }; + + /** + * Data Attribute API + */ + $(document).on('ready.aranja', function() { + $('[data-scroll-button]').each(function() { + $(this).dacScrollButton($(this).data()); + }); + }); +})(jQuery); + +(function($) { + function Toggle(el) { + $(el).on('click.dac.togglesection', this.toggle); + } + + Toggle.prototype.toggle = function() { + var $this = $(this); + + var $parent = getParent($this); + var isExpanded = $parent.hasClass('is-expanded'); + + transitionMaxHeight($parent.find('.dac-toggle-content'), !isExpanded); + $parent.toggleClass('is-expanded'); + + return false; + }; + + function getParent($this) { + var selector = $this.attr('data-target'); + + if (!selector) { + selector = $this.attr('href'); + selector = selector && /#[A-Za-z]/.test(selector) && selector.replace(/.*(?=#[^\s]*$)/, ''); + } + + var $parent = selector && $(selector); + + return $parent && $parent.length ? $parent : $this.parent(); + } + + /** + * Runs a transition of max-height along with responsive styles which hide or expand the element. + * @param $el + * @param visible + */ + function transitionMaxHeight($el, visible) { + // Only supports 1 child + var contentHeight = $el.children().outerHeight(); + var targetHeight = visible ? contentHeight : 0; + var duration = $el.transitionDuration(); + + // If we're hiding, first set the maxHeight we're transitioning from. + if (!visible) { + $el.css('maxHeight', contentHeight + 'px') + .resolveStyles(); + } + + // Transition to new state + $el.css('maxHeight', targetHeight); + + // Reset maxHeight to css value after transition. + setTimeout(function() { + $el.css('maxHeight', ''); + }, duration); + } + + // Utility to get the transition duration for the element. + $.fn.transitionDuration = function() { + var d = $(this).css('transitionDuration') || '0s'; + + return +(parseFloat(d) * (/ms/.test(d) ? 1 : 1000)).toFixed(0); + }; + + // jQuery plugin + $.fn.toggleSection = function(option) { + return this.each(function() { + var $this = $(this); + var data = $this.data('dac.togglesection'); + if (!data) {$this.data('dac.togglesection', (data = new Toggle(this)));} + if (typeof option === 'string') {data[option].call($this);} + }); + }; + + // Data api + $(document) + .on('click.toggle', '[data-toggle="section"]', Toggle.prototype.toggle); +})(jQuery); |
