diff --git a/tools/droiddoc/templates-sdk/assets/css/default.css b/tools/droiddoc/templates-sdk/assets/css/default.css index 8513843e0..041b4657a 100644 --- a/tools/droiddoc/templates-sdk/assets/css/default.css +++ b/tools/droiddoc/templates-sdk/assets/css/default.css @@ -204,10 +204,11 @@ h1.short { } } h2 { + clear: left; font-size: 28px; + font-weight: 400; line-height: 32px; margin: 24px 0 16px; - font-weight: 400; } h3 { font-size: 24px; @@ -298,7 +299,8 @@ a, .link-color { color: #039BE5; text-decoration: none; } -a:focus, a:hover, a:active { +a:focus, a:hover { + color: rgba(3, 155, 229, .7); text-decoration: none; } a.white { @@ -306,7 +308,7 @@ a.white { text-decoration:underline; } a.white:hover, a.white:active { - color: #ccc !important; + color: #ccc; } strong, b { font-weight: bold; @@ -1053,46 +1055,6 @@ li.no-bullet *{ .design li.with-icon.use:before { background-image: url(../images/styles/ico_use.png); } -/* figures and callouts */ -.figure { - position: relative; } - .figure.pad-below { - margin-bottom: 20px; } - .figure .figure-callout { - position: absolute; - color: #fff; - font-weight: 500; - font-size: 16px; - line-height: 23px; - text-align: center; - background: transparent url(../images/styles/callout.png) no-repeat scroll 50% 50%; - padding-right: 2px; - width: 30px; - height: 29px; - z-index: 1000; } - .figure .figure-callout.top { - top: -9px; } - .figure .figure-callout.right { - right: -5px; } - -.figure-caption { - margin: 0 10px 20px 0; - font-size: 14px; - line-height: 20px; - font-style: italic; } - -/* rows of figures */ -.figure-row { - font-size: 0; - line-height: 0; - /* to prevent space between figures */ } - .figure-row .figure { - display: inline-block; - vertical-align: top; } - .figure-row .figure + .figure { - margin-left: 10px; - /* reintroduce space between figures */ } - /* video containers */ .framed-galaxynexus-land-span-13 { background: transparent url(../images/styles/device_galaxynexus_blank_land_span13.png) no-repeat @@ -2490,13 +2452,88 @@ p.img-caption { font-size: 13px; } -div.figure-center { +/* figures and callouts */ +.figure { + position: relative; +} + +.figure.pad-below { + margin-bottom: 20px; +} + +.figure .figure-callout { + position: absolute; + color: #fff; + font-weight: 500; + font-size: 16px; + line-height: 23px; + text-align: center; + background: transparent url(../images/styles/callout.png) no-repeat scroll 50% 50%; + padding-right: 2px; + width: 30px; + height: 29px; + z-index: 1000; +} + +.figure .figure-callout.top { + top: -9px; +} + +.figure .figure-callout.right { + right: -5px; +} + +.figure-caption { + margin: 0 10px 20px 0; + font-size: 14px; + line-height: 20px; + font-style: italic; +} + +/* rows of figures */ +.figure-row { + font-size: 0; + line-height: 0; + /* to prevent space between figures */ +} + +.figure-row .figure { + display: inline-block; + vertical-align: top; +} + +.figure-row .figure + .figure { + margin-left: 10px; + /* reintroduce space between figures */ +} + +.border-img { + border: 1px solid #CCC; +} + +.center-img { + margin: auto; + text-align: center; +} +.center-img img { + margin-bottom: 15px; +} + +.figure img, +.figure-right img, +.figure-left img, +.figure-center img, +.border-img { + margin-bottom: 15px; +} + +.figure-center { margin: 32px auto 24px; max-width: 100%; } -div.figure, -div.figure-right { +.figure, +.figure-right { clear: right; float: right; margin: 10px 0 0 0; @@ -2505,7 +2542,7 @@ div.figure-right { /* width must be defined w/ an inline style matching the image width */ } -div.figure-left { +.figure-left { clear: left; float: left; margin: 10px 0 0 0; @@ -2516,9 +2553,9 @@ div.figure-left { @media (max-width: 719px) { /* Collapse on mobile. */ - div.figure, - div.figure-right, - div.figure-left { + .figure, + .figure-right, + .figure-left { float: none; clear: none; padding: 0; @@ -3371,7 +3408,6 @@ table.jd-tagtable th { position:relative; width:170px; min-height:90px; - padding:5px; border: solid 1px #C5C5C5; background: white; margin-right:-5px; @@ -3385,15 +3421,15 @@ table.jd-tagtable th { } .suggest-card.develop { z-index:997; - border-top: solid 4px #F80; + border-top: solid 4px #ff7043; } .suggest-card.design { z-index:996; - border-top: solid 4px #33b5e5; + border-top: solid 4px #00bcd4; } .suggest-card.distribute { z-index:995; - border-top: solid 4px #9C0; + border-top: solid 4px #afb42b; } .child-card { width:100%; @@ -3411,7 +3447,7 @@ table.jd-tagtable th { ul.search_filtered { min-width:100%; list-style: none; - margin: 0 0 5px; + margin: 5px 0; padding: 0; } .search_filtered .jd-selected { @@ -3430,13 +3466,13 @@ ul.search_filtered { .search_filtered li.jd-autocomplete { font-size: 0.81em; border: none; - margin: 0 0 2px; + margin: 0; padding: 0; line-height:1.5em; } .search_filtered li a { - padding:0 5px; + padding: 2px 10px; color:#222 !important; display:inline-block; line-height:12px; @@ -3446,8 +3482,8 @@ ul.search_filtered { font-weight:bold; color:#444; border: none; - margin: 8px 0 2px; - padding:1px 5px; + margin: 0; + padding: 2px 10px; line-height:1.5em; } .search_filtered li.header.small { @@ -3464,6 +3500,51 @@ ul.search_filtered { margin: 0 0 2px; } +@media (max-width: 719px) { + .search_filtered_wrapper { + left: 24px; + right: 24px; + top: 44px; + } + + .suggest-card { + box-shadow: 0 2px 1px rgba(0, 0, 0, 0.1), 0 0 1px rgba(0, 0, 0, 0.1); + float: none; + margin-right: 0; + min-height: 0; + max-height: 204px; + overflow: hidden; + } + + .suggest-card.develop, + .suggest-card.design, + .suggest-card.distribute { + display: none !important; + } + + ul.search_filtered { + margin: 0; + } + + .search_filtered li.jd-autocomplete { + border-top: solid 1px #C5C5C5; + font-size: inherit; + text-align: left; + } + + .search_filtered li.jd-autocomplete:first-child { + border-top: 0; + } + + .search_filtered li a { + display: block; + overflow: hidden; + padding: 14px 10px; + text-overflow: ellipsis; + white-space: nowrap; + } +} + .show-item { display: table-row; } @@ -3569,10 +3650,10 @@ td.gsc-search-button { } #searchResults .gsc-tabsArea { - position:relative; - white-space:nowrap; - float:left; - width:200px; + position: relative; + white-space: nowrap; + float: left; + width: 25%; } #searchResults .gsc-above-wrapper-area { @@ -3580,12 +3661,26 @@ td.gsc-search-button { } #searchResults .gsc-resultsbox-visible { - float:left; - width:720px; - margin-left:20px; + box-sizing: border-box; + float: left; + padding-left:20px; + width: 75%; +} + +@media (max-width: 719px) { + #searchResults .gsc-tabsArea { + display: none; + } + + #searchResults .gsc-resultsbox-visible { + float: none; + padding-left: 0; + width: auto; + } } #searchResults .gsc-tabHeader { + margin-top: 4px; padding: 3px 6px; position:relative; width:auto; @@ -3642,41 +3737,18 @@ td.gsc-search-button { #searchResults .gsc-tabHeader.gsc-tabhInactive, #searchResults .gsc-cursor-page { - text-decoration:none; - color:#039BE5; - border: solid 1px #DADADA; -} - -#searchResults .gsc-tabHeader.gsc-tabhInactive:hover, -#searchResults .gsc-cursor-page: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; + background: #F0F0F0; + border: 0; + color: #039BE5; } #searchResults .gsc-tabHeader.gsc-tabhActive, #searchResults .gsc-tabHeader.gsc-tabhActive:hover, #searchResults .gsc-cursor-page.gsc-cursor-current-page, #searchResults .gsc-cursor-page.gsc-cursor-current-page:hover { - color:#fff; - 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; - z-index:100; + background-color: #039BE5; + border: 0; + color: #fff; } @@ -4600,23 +4672,6 @@ a.download-sdk { clear: both; } -.border-img { - border: 1px solid #CCC; -} - -.center-img { - margin: auto; - text-align: center; -} -.center-img img { - margin-bottom: 15px; -} - -.figure img, .border-img { - box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.37); - margin-bottom: 15px; -} - /** * UTILITIES @@ -5255,7 +5310,6 @@ Styles for d.a.c/index: .actions-bar .actions { padding: 24px 0; - text-align: justify; font-size: 0.1px; line-height: 0.1px; } @@ -5268,29 +5322,34 @@ Styles for d.a.c/index: .actions-bar .actions > div { display: inline-block; + margin: 0 16px; } .actions-bar .actions a { - font-size: 24px; - line-height: 50px; color: #fff; + font-size: 24px; font-weight: 300; + line-height: 50px; + -webkit-transition: opacity .3s; + transition: opacity .3s; +} + +.actions-bar .actions a:hover { + opacity: .54; } .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); + margin: 0 -8px 0 -12px; } @media (max-width: 719px) { + .actions-bar { + text-align: left; + } + .actions-bar .actions > div { display: block; + margin: 0; } } @@ -5519,6 +5578,80 @@ a.home-new-cta-btn:hover, position: relative !important; } +/** + * Break strings when their length exceeds the width of their container. + */ +.dac-text-break { + word-wrap: break-word !important; +} + +/** + * Horizontal text alignment + */ +.dac-text-center { + text-align: center !important; +} + +.dac-text-left { + text-align: left !important; +} + +.dac-text-right { + text-align: right !important; +} + +/** + * Prevent whitespace wrapping + */ +.dac-text-no-wrap { + white-space: nowrap !important; +} + +/** + * Prevent text from wrapping onto multiple lines, instead truncate with an ellipsis. + */ +.dac-text-truncate { + max-width: 100%; + overflow: hidden !important; + text-overflow: ellipsis !important; + white-space: nowrap !important; + word-wrap: normal !important; +} + +/** + * Floats + */ +.dac-float-left { + float: left !important; +} + +.dac-float-right { + float: right !important; +} + +/** + * New block formatting context + * + * This affords some useful properties to the element. It won't wrap under + * floats. Will also contain any floated children. + * N.B. This will clip overflow. Use the alternative method below if this is + * problematic. + */ +.dac-nbfc { + overflow: hidden !important; } + +/** + * New block formatting context (alternative) + * + * Alternative method when overflow must not be clipped. + * + * N.B. This breaks down in some browsers when elements within this element + * exceed its width. + */ +.dac-nbfc-alt { + display: table-cell !important; + width: 10000px !important; } + /* New CSS */ /************ RESOURCE CARDS ******************/ /* Basic card-styling with shadow */ @@ -5526,8 +5659,29 @@ a.home-new-cta-btn:hover, background: #fff; box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.21); display: block; - position: relative; -} + position: relative; } + +/* Play button is only visible on 6by6 cards */ +.play-button { + background-color: #000; + border-radius: 50%; + box-sizing: border-box; + display: none; + height: 70px; + left: 50%; + margin-left: -35px; + line-height: 65px; + padding-left: 4px; + position: absolute; + opacity: .6; + text-align: center; + -webkit-transition: opacity .5s; + transition: opacity .5s; + top: 50px; + width: 70px; + z-index: 1; } + .resource-card-6x6 .play-button { + display: block; } /* Styling for background image including tinting and section icons in stacks */ .card-bg { @@ -5541,51 +5695,40 @@ a.home-new-cta-btn:hover, background-size: cover; background-repeat: no-repeat; 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.05); - -webkit-transition: opacity 0.5s; - transition: opacity 0.5s; -} - -.static .card-bg:after { - display: none; -} - -.card-bg .card-section-icon { - position: absolute; - top: 50%; - width: 100%; - margin-top: -35px; - text-align: center; - padding-top: 65px; - z-index: 100; -} - -.card-bg .card-section-icon .icon { - position: absolute; - left: 50%; - margin-left: -28px; - top: 0px; - width: 56px; - height: 56px; - background-repeat: no-repeat; - background-position: 50% 50%; - background-image: url(../images/stack-icon.png); -} - -.card-bg .card-section-icon .section { - text-transform: uppercase; - color: white; - font-size: 14px; -} + 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.05); + -webkit-transition: opacity 0.5s; + transition: opacity 0.5s; } + .static .card-bg:after { + display: none; } + .card-bg .card-section-icon { + position: absolute; + top: 50%; + width: 100%; + margin-top: -35px; + text-align: center; + padding-top: 65px; + z-index: 100; } + .card-bg .card-section-icon .icon { + position: absolute; + left: 50%; + margin-left: -28px; + top: 0px; + width: 56px; + height: 56px; + background-repeat: no-repeat; + background-position: 50% 50%; + background-image: url(../images/stack-icon.png); } + .card-bg .card-section-icon .section { + text-transform: uppercase; + color: white; + font-size: 14px; } .card-info { position: absolute; @@ -5596,61 +5739,46 @@ a.home-new-cta-btn:hover, left: 0; overflow: hidden; background: #fefefe; - padding: 6px 12px; -} - -.card-info .section { - color: #898989; - font-size: 11px; - font-weight: 700; - letter-spacing: .3px; - line-height: 20px; - text-transform: uppercase; -} - -.card-info .title { - color: #333; - font-size: 18px; - font-weight: 500; - line-height: 24px; - margin-bottom: 2px; - max-height: 48px; - overflow: hidden; - padding-bottom: 5px; - text-overflow: ellipsis; - white-space: normal; -} - -.card-info .description { - overflow: hidden; -} - -.card-info .description .text { - color: #666; - font-size: 14px; - height: 60px; - line-height: 20px; - overflow: hidden; - width: 100%; -} - -.card-info .description .util { - position: absolute; - right: 5px; - bottom: 70px; - opacity: 0; - -webkit-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; -} + padding: 6px 12px; } + .card-info .section { + color: #898989; + font-size: 11px; + font-weight: 700; + letter-spacing: .3px; + line-height: 20px; + text-transform: uppercase; } + .card-info .title { + color: #333; + font-size: 18px; + font-weight: 500; + line-height: 24px; + margin-bottom: 2px; + max-height: 48px; + overflow: hidden; + padding-bottom: 5px; + text-overflow: ellipsis; + white-space: normal; } + .card-info .description { + overflow: hidden; } + .card-info .description .text { + color: #666; + font-size: 14px; + height: 60px; + line-height: 20px; + overflow: hidden; + width: 100%; } + .card-info .description .util { + position: absolute; + right: 5px; + bottom: 70px; + opacity: 0; + -webkit-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 */ @@ -5658,61 +5786,47 @@ a.home-new-cta-btn:hover, overflow: hidden; float: right; line-height: 15px; - width: 100%; -} - -.ellipsis:before { - content: ""; - float: left; - width: 5px; - height: 100%; -} - -.ellipsis > *:first-child.text { - float: right; - width: 100% !important; - margin-left: -5px; -} - -.ellipsis:after { - content: "\02026"; - height: 17px; - padding-bottom: 4px; - box-sizing: content-box; - 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: -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; - text-align: right; -} + width: 100%; } + .ellipsis:before { + content: ""; + float: left; + width: 5px; + height: 100%; } + .ellipsis > *:first-child.text { + float: right; + width: 100% !important; + margin-left: -5px; } + .ellipsis:after { + content: "\02026"; + height: 17px; + padding-bottom: 4px; + box-sizing: content-box; + 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: -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; + text-align: right; } .resource-card:hover { - cursor: pointer; -} - -.static .resource-card:hover { - cursor: auto; -} - -.resource-card:hover .card-bg:after { - opacity: 0; -} - -.resource-card:hover .card-info .description .util { - opacity: 1; -} + cursor: pointer; } + .static .resource-card:hover { + cursor: auto; } + .resource-card:hover .card-bg:after { + opacity: 0; } + .resource-card:hover .play-button { + opacity: .3; } + .resource-card:hover .card-info .description .util { + opacity: 1; } /* Carousel Layout */ /* Carousel styles for landing page */ @@ -5721,465 +5835,336 @@ a.home-new-cta-btn:hover, 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: 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 { - bottom: 131px; -} - -.resource-carousel-layout .frame li .card-info { - height: 131px; - padding: 6px 12px; - top: auto; -} - -.resource-carousel-layout .frame li .card-info .title { - 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; -} + overflow: hidden; } + .resource-carousel-layout .slideshow-prev, .resource-carousel-layout .slideshow-next { + display: none; } + .resource-carousel-layout .pagination { + 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 { + bottom: 131px; } + .resource-carousel-layout .frame li .card-info { + height: 131px; + padding: 6px 12px; + top: auto; } + .resource-carousel-layout .frame li .card-info .title { + 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; } /* Stack Layout */ .resource-stack-layout { display: inline-block; - padding: 0; -} - -.resource-stack-layout .section-card-menu > .card-info .section, .resource-stack-layout .section-card > .card-info .title { + padding: 0; } + .resource-stack-layout .section-card-menu > .card-info .section, .resource-stack-layout .section-card > .card-info .title { /*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; - width: 90px; - height: 100%; - 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; - white-space: normal; - 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 { + 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; + width: 90px; + height: 100%; + 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; + white-space: normal; + 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 */ - display: block; - height: auto; - width: auto; -} - -.resource-stack-layout .section-card-menu .card-bg { - height: 155px; + display: block; + height: auto; + width: auto; } + .resource-stack-layout .section-card-menu .card-bg { + height: 155px; /* Flexible height */ - position: relative; - display: inline-block; - vertical-align: top; -} - -.resource-stack-layout .section-card-menu .card-info { - padding: 4px 12px 0px 12px; + position: relative; + display: inline-block; + vertical-align: top; } + .resource-stack-layout .section-card-menu .card-info { + padding: 4px 12px 0px 12px; /* 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; - padding: 15px 0; - border-top-width: 1px; - 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: #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; - 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; - 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; - transition: opacity 0.25s; - position: absolute; - right: 0px; - top: 3px; - 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: ''; - display: block; - position: absolute; - right: -20px; - top: 3px; - 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; + 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; + padding: 15px 0; + border-top-width: 1px; + 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:hover { + 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; + 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; + 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; + transition: opacity 0.25s; + position: absolute; + right: 0px; + top: 3px; + 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: ''; + display: block; + position: absolute; + right: -20px; + top: 3px; + 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 */ - -webkit-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; - height: 0; - clear: both; - visibility: hidden; -} + -webkit-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; + height: 0; + clear: both; + visibility: hidden; } .resource-card, .resource-card-stack { - margin-bottom: 20px; -} + margin-bottom: 20px; } .resource-card-row-stack-last { - margin-bottom: 0px !important; -} + margin-bottom: 0px !important; } .resource-card-col-stack-last { - margin-bottom: 0px !important; -} + margin-bottom: 0px !important; } .resource-card-3x6 { - height: 300px; -} + height: 300px; } .resource-card-3x12 { - height: 620px; -} + height: 620px; } .resource-card-3x18 { - height: 940px; -} + height: 940px; } .resource-card-6x6 { - height: 300px; -} + height: 300px; } .resource-card-6x12 { - height: 620px; -} + height: 620px; } .resource-card-6x18 { - height: 940px; -} + height: 940px; } .resource-card-9x6 { - height: 300px; -} + height: 300px; } .resource-card-9x12 { - height: 620px; -} + height: 620px; } .resource-card-9x18 { - height: 940px; -} + height: 940px; } .resource-card-12x6 { - height: 300px; -} + height: 300px; } .resource-card-12x12 { - height: 620px; -} + height: 620px; } .resource-card-12x18 { - height: 940px; -} + height: 940px; } .resource-card-15x6 { - height: 300px; -} + height: 300px; } .resource-card-15x12 { - height: 620px; -} + height: 620px; } .resource-card-15x18 { - height: 940px; -} + height: 940px; } .resource-card-18x6 { - height: 300px; -} + height: 300px; } .resource-card-18x12 { - height: 620px; -} + height: 620px; } .resource-card-18x18 { - height: 940px; -} + height: 940px; } .resource-card-3x2 { - height: 100px; -} + height: 100px; } .resource-card-3x2x3 { height: 90px; - margin-bottom: 15px; -} + margin-bottom: 15px; } .resource-card-3x3 { - height: 150px; -} + height: 150px; } .resource-card-3x3x2 { height: 142px; - margin-bottom: 16px; -} + margin-bottom: 16px; } .resource-card-6x2 { - height: 100px; -} + height: 100px; } .resource-card-6x2x3 { height: 90px; - margin-bottom: 15px; -} + margin-bottom: 15px; } .resource-card-6x3 { - height: 150px; -} + height: 150px; } .resource-card-6x3x2 { height: 142px; - margin-bottom: 16px; -} + margin-bottom: 16px; } .resource-card-9x2 { - height: 100px; -} + height: 100px; } .resource-card-9x2x3 { height: 90px; - margin-bottom: 15px; -} + margin-bottom: 15px; } .resource-card-9x3 { - height: 150px; -} + height: 150px; } .resource-card-9x3x2 { height: 142px; - margin-bottom: 16px; -} + margin-bottom: 16px; } .resource-card-12x2 { - height: 100px; -} + height: 100px; } .resource-card-12x2x3 { height: 90px; - margin-bottom: 15px; -} + margin-bottom: 15px; } .resource-card-12x3 { - height: 150px; -} + height: 150px; } .resource-card-12x3x2 { height: 142px; - margin-bottom: 16px; -} + margin-bottom: 16px; } .resource-card-15x2 { - height: 100px; -} + height: 100px; } .resource-card-15x2x3 { height: 90px; - margin-bottom: 15px; -} + margin-bottom: 15px; } .resource-card-15x3 { - height: 150px; -} + height: 150px; } .resource-card-15x3x2 { height: 142px; - margin-bottom: 16px; -} + margin-bottom: 16px; } .resource-card-18x2 { - height: 100px; -} + height: 100px; } .resource-card-18x2x3 { height: 90px; - margin-bottom: 15px; -} + margin-bottom: 15px; } .resource-card-18x3 { - height: 150px; -} + height: 150px; } .resource-card-18x3x2 { height: 142px; - margin-bottom: 16px; -} + margin-bottom: 16px; } /* 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; -} + height: 390px; } /* Double row, 1 column items. Eg full width video thumbnails. */ .resource-card-18x12 { - height: 558px; -} + height: 558px; } /* 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 { @@ -6188,124 +6173,89 @@ a.home-new-cta-btn:hover, width: 90px; height: 100%; position: absolute; - display: block; -} - + display: block; } .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-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-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-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; -} + overflow: hidden; } + .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-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-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; } /* 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; -} + display: none; } .no-section .resource-card-3x2 > .card-info .description, .no-section .resource-card-6x2 > .card-info .description { - display: block; -} + display: block; } /* 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-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-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-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-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-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-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; -} + height: 160px; } + .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-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-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-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-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-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; } /* 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; -} + bottom: 2px; } .resource-card-18x12 > .card-info .description .util { - bottom: 2px; -} + bottom: 2px; } /* Overrides for col-16 6x6 cards linking to local content on landing pages. Suppresses "section". */ .landing .card-info .section { - display: none; -} + display: none; } /* 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-stack-layout.col-16 .resource-card-stack { - margin: 0 14px 0 0; - width: 304px; -} + width: 954px; } + .resource-stack-layout.col-16 .resource-card-stack { + margin: 0 14px 0 0; + width: 304px; } /* 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; -} - + background: rgba(126, 55, 148, 0.4) !important; } .resource-widget[data-section=distribute\/tools] .section-card-menu .card-section-icon .icon { - background-color: #7e3794 !important; -} - + background-color: #7e3794 !important; } .resource-widget[data-section=distribute\/tools] .section-card-menu .card-info ul li { - border-top-color: #7e3794 !important; -} + border-top-color: #7e3794 !important; } /* tinting for stacks */ div.jd-descr > .resource-widget[data-section=distribute\/tools] .section-card-menu .card-info ul li { - border-top-color: #7e3794 !important; -} + border-top-color: #7e3794 !important; } .dac-fab, .button, .landing-button, .dac-button { background: transparent; border: 0; + border-radius: 3px; box-sizing: border-box; color: currentColor; cursor: pointer; @@ -6326,54 +6276,39 @@ div.jd-descr > .resource-widget[data-section=distribute\/tools] .section-card-me 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); + 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; -} + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + white-space: nowrap; } .button, .landing-button, .dac-button.dac-raised { background-color: #FAFAFA; - box-shadow: 0 2px 5px rgba(0, 0, 0, 0.26); -} + box-shadow: 0 2px 5px rgba(0, 0, 0, 0.26); } .dac-button.dac-raised.dac-primary, .landing-secondary, .button { - background-color: #039bef; -} - -.dac-button.dac-raised.dac-primary:hover, .landing-secondary:hover, .button:hover { - background-color: #0288d1; -} - -.dac-button.dac-raised.dac-primary:active, .landing-secondary:active, .button:active { - background-color: #0277bd; -} + background-color: #039bef; } + .dac-button.dac-raised.dac-primary:hover, .landing-secondary:hover, .button:hover { + background-color: #0288d1; } + .dac-button.dac-raised.dac-primary:active, .landing-secondary:active, .button:active { + background-color: #0277bd; } .dac-button.dac-raised.dac-red, .landing-primary { - background-color: #bf3722; -} - -.dac-button.dac-raised.dac-red:hover, .landing-primary:hover { - background-color: #9c2d1c; -} - -.dac-button.dac-raised.dac-red:active, .landing-primary:active { - background-color: #822517; -} + background-color: #bf3722; } + .dac-button.dac-raised.dac-red:hover, .landing-primary:hover { + background-color: #9c2d1c; } + .dac-button.dac-raised.dac-red:active, .landing-primary:active { + background-color: #822517; } .dac-button.dac-raised.dac-green, .landing-button.green { - background-color: #90C653; -} + background-color: #90C653; } .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; -} + color: #fff; } .dac-button.dac-large, .landing-button { - padding: 12px 24px; -} + padding: 12px 24px; } .dac-fab { background: #fff; @@ -6386,22 +6321,15 @@ div.jd-descr > .resource-widget[data-section=distribute\/tools] .section-card-me overflow: hidden; padding: 0; vertical-align: middle; - width: 36px; -} - -.dac-fab:hover, a:hover > .dac-fab { - box-shadow: 0 3px 8px rgba(0, 0, 0, 0.26); -} - -.dac-fab.dac-primary { - background: #00c7a0; -} - -.dac-fab.dac-large { - height: 54px; - line-height: 54px; - width: 54px; -} + width: 36px; } + .dac-fab:hover, a:hover > .dac-fab { + box-shadow: 0 3px 8px rgba(0, 0, 0, 0.26); } + .dac-fab.dac-primary { + background: #00c7a0; } + .dac-fab.dac-large { + height: 54px; + line-height: 54px; + width: 54px; } .dac-scroll-button { height: 54px; @@ -6411,105 +6339,79 @@ div.jd-descr > .resource-widget[data-section=distribute\/tools] .section-card-me right: 0; top: -27px; width: 54px; - z-index: 1; -} - -@media (max-width: 719px) { - .dac-scroll-button { - display: none; - } -} + z-index: 1; } + @media (max-width: 719px) { + .dac-scroll-button { + display: none; } } /* Footer component */ .dac-footer { background-color: #fff; - border-top: 1px solid #f9f9f9; + border-top: 1px solid #f0f0f0; clear: both; color: #999; font-size: 12px; - margin-top: 40px; + margin-top: 96px; padding-bottom: 20px; position: relative; -} - -.dac-footer a { - color: #999; -} - -.dac-footer p { - margin: 7px 0 0; -} - -.dac-footer-main { - padding: 30px 0; -} - -.dac-footer-reachout { - text-align: right; -} - -.dac-footer-contact, .dac-footer-social { - display: inline-block; -} - -.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; -} - -.dac-footer-getnews > .dac-fab { - margin-left: 4px; -} - -.dac-footer-separator { - background: #f9f9f9; - margin: 0 0 12px; -} - -.dac-footer-links a + a:before { - content: '|'; - cursor: default; - margin: 0 10px 0 8px; -} - -.dac-footer .locales { - float: right; - margin: 0; -} - -.dac-footer .locales select { - background-color: #f9f9f9; - border-radius: 0; - font-size: 12px; - height: auto; - margin-top: -2px; - padding: 8px 12px; -} - -@media (max-width: 719px) { + /* Modifier for landing pages, to snuggle closer to sections. */ } + .dac-footer a { + color: #999; } + .dac-footer p { + margin: 7px 0 0; } + .dac-footer-main { + padding: 30px 0; } .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; - } - + text-align: right; } + .dac-footer-contact, .dac-footer-social { + display: inline-block; } + .dac-footer .dac-footer-getnews, .dac-footer .dac-footer-contact-link { + color: #000; + cursor: pointer; + font-size: 20px; + font-weight: 300; + margin: 8px 0; + vertical-align: middle; } + .dac-footer .dac-footer-contact-link, .dac-footer .dac-footer-social-link { + margin-left: 16px; + margin-right: 0; } + .dac-footer-getnews > .dac-fab { + margin-left: 4px; } + .dac-footer-separator { + background: #f0f0f0; + margin: 0 0 12px; } + .dac-footer-links a + a:before { + content: '|'; + cursor: default; + margin: 0 10px 0 8px; } .dac-footer .locales { - display: block; - float: none; - margin-top: 15px; - } -} + float: right; + margin: 0; } + .dac-footer .locales select { + background-color: #f0f0f0; + border-radius: 3px; + font-size: 12px; + height: auto; + margin-top: -2px; + padding: 8px 12px; + width: 146px; } + .dac-footer.dac-landing { + margin-top: 0; + border-top: 0; } + @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; } + .dac-footer .dac-footer-contact-link, .dac-footer .dac-footer-social-link { + margin-left: 0; + margin-right: 16px; } + .dac-footer .locales { + display: block; + float: none; + margin-top: 15px; } } /* ============================================================================= Columns @@ -6517,8 +6419,7 @@ div.jd-descr > .resource-widget[data-section=distribute\/tools] .section-card-me .wrap { margin: 0 auto; max-width: 940px; - clear: both; -} + clear: both; } .cols { margin-left: -10px; @@ -6531,19 +6432,14 @@ div.jd-descr > .resource-widget[data-section=distribute\/tools] .section-card-me * 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: ' '; + */ } + .cols:before, .cols:after { + content: ' '; /* 1 */ - display: table; - /* 2 */ -} - -.cols:after { - clear: both; -} + display: table; + /* 2 */ } + .cols:after { + clear: both; } [class*=col-] { box-sizing: border-box; @@ -6551,698 +6447,623 @@ div.jd-descr > .resource-widget[data-section=distribute\/tools] .section-card-me min-height: 1px; padding-left: 10px; padding-right: 10px; - position: relative; -} + position: relative; } .col-1 { - width: 6.25%; -} + width: 6.25%; } .col-2 { - width: 12.5%; -} + width: 12.5%; } .col-3 { - width: 18.75%; -} + width: 18.75%; } .col-4 { - width: 25%; -} + width: 25%; } .col-5 { - width: 31.25%; -} + width: 31.25%; } .col-6 { - width: 37.5%; -} + width: 37.5%; } .col-7 { - width: 43.75%; -} + width: 43.75%; } .col-8 { - width: 50%; -} + width: 50%; } .col-9 { - width: 56.25%; -} + width: 56.25%; } .col-10 { - width: 62.5%; -} + width: 62.5%; } .col-11 { - width: 68.75%; -} + width: 68.75%; } .col-12 { - width: 75%; -} + width: 75%; } .col-13 { - width: 81.25%; -} + width: 81.25%; } .col-14 { - width: 87.5%; -} + width: 87.5%; } .col-15 { - width: 93.75%; -} + width: 93.75%; } .col-16 { - width: 100%; -} + width: 100%; } .col-13 .col-1 { - width: 7.69230769%; -} + width: 7.69230769%; } .col-13 .col-2 { - width: 15.38461538%; -} + width: 15.38461538%; } .col-13 .col-3 { - width: 23.07692308%; -} + width: 23.07692308%; } .col-13 .col-4 { - width: 30.76923077%; -} + width: 30.76923077%; } .col-13 .col-5 { - width: 38.46153846%; -} + width: 38.46153846%; } .col-13 .col-6 { - width: 46.15384615%; -} + width: 46.15384615%; } .col-13 .col-7 { - width: 53.84615385%; -} + width: 53.84615385%; } .col-13 .col-8 { - width: 61.53846154%; -} + width: 61.53846154%; } .col-13 .col-9 { - width: 69.23076923%; -} + width: 69.23076923%; } .col-13 .col-10 { - width: 76.92307692%; -} + width: 76.92307692%; } .col-13 .col-11 { - width: 84.61538462%; -} + width: 84.61538462%; } .col-13 .col-12 { - width: 92.30769231%; -} + width: 92.30769231%; } .col-13 .col-13 { - width: 100%; -} + width: 100%; } .col-12 .col-1 { - width: 8.33333333%; -} + width: 8.33333333%; } .col-12 .col-2 { - width: 16.66666667%; -} + width: 16.66666667%; } .col-12 .col-3 { - width: 25%; -} + width: 25%; } .col-12 .col-4 { - width: 33.33333333%; -} + width: 33.33333333%; } .col-12 .col-5 { - width: 41.66666667%; -} + width: 41.66666667%; } .col-12 .col-6 { - width: 50%; -} + width: 50%; } .col-12 .col-7 { - width: 58.33333333%; -} + width: 58.33333333%; } .col-12 .col-8 { - width: 66.66666667%; -} + width: 66.66666667%; } .col-12 .col-9 { - width: 75%; -} + width: 75%; } .col-12 .col-10 { - width: 83.33333333%; -} + width: 83.33333333%; } .col-12 .col-11 { - width: 91.66666667%; -} + width: 91.66666667%; } .col-12 .col-12 { - width: 100%; -} + width: 100%; } .col-1of1, .col-2of2, .col-3of3, .col-4of4, .col-5of5, .col-6of6, .col-8of8, .col-10of10, .col-12of12, .col-16of16 { - width: 100%; -} + width: 100%; } .col-1of2, .col-2of4, .col-3of6, .col-4of8, .col-5of10, .col-6of12, .col-8of16 { - width: 50%; -} + width: 50%; } .col-1of3, .col-2of6, .col-4of12 { - width: 33.33333333%; -} + width: 33.33333333%; } .col-2of3, .col-4of6, .col-8of12 { - width: 66.66666667%; -} + width: 66.66666667%; } .col-1of4, .col-2of8, .col-3of12, .col-4of16 { - width: 25%; -} + width: 25%; } .col-3of4, .col-6of8, .col-9of12, .col-12of16 { - width: 75%; -} + width: 75%; } .col-1of5, .col-2of10 { - width: 20%; -} + width: 20%; } .col-2of5, .col-4of10 { - width: 40%; -} + width: 40%; } .col-3of5, .col-6of10 { - width: 60%; -} + width: 60%; } .col-4of5, .col-8of10 { - width: 80%; -} + width: 80%; } .col-1of6, .col-2of12 { - width: 16.66666667%; -} + width: 16.66666667%; } .col-5of6, .col-10of12 { - width: 83.33333333%; -} + width: 83.33333333%; } .col-1of8, .col-2of16 { - width: 12.5%; -} + width: 12.5%; } .col-3of8, .col-6of16 { - width: 37.5%; -} + width: 37.5%; } .col-5of8, .col-10of16 { - width: 62.5%; -} + width: 62.5%; } .col-7of8, .col-14of16 { - width: 87.5%; -} + width: 87.5%; } .col-1of10 { - width: 10%; -} + width: 10%; } .col-3of10 { - width: 30%; -} + width: 30%; } .col-7of10 { - width: 70%; -} + width: 70%; } .col-9of10 { - width: 90%; -} + width: 90%; } .col-1of12 { - width: 8.33333333%; -} + width: 8.33333333%; } .col-5of12 { - width: 41.66666667%; -} + width: 41.66666667%; } .col-7of12 { - width: 58.33333333%; -} + width: 58.33333333%; } .col-11of12 { - width: 91.66666667%; -} + width: 91.66666667%; } .col-1of16 { - width: 6.25%; -} + width: 6.25%; } .col-3of16 { - width: 18.75%; -} + width: 18.75%; } .col-5of16 { - width: 31.25%; -} + width: 31.25%; } .col-7of16 { - width: 43.75%; -} + width: 43.75%; } .col-9of16 { - width: 56.25%; -} + width: 56.25%; } .col-11of16 { - width: 68.75%; -} + width: 68.75%; } .col-13of16 { - width: 81.25%; -} + width: 81.25%; } .col-15of16 { - width: 93.75%; -} + width: 93.75%; } .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%; -} + left: -100%; } .col-pull-1of2, .col-pull-2of4, .col-pull-3of6, .col-pull-4of8, .col-pull-5of10, .col-pull-6of12, .col-pull-8of16 { - left: -50%; -} + left: -50%; } .col-pull-1of3, .col-pull-2of6, .col-pull-4of12 { - left: -33.33333333%; -} + left: -33.33333333%; } .col-pull-2of3, .col-pull-4of6, .col-pull-8of12 { - left: -66.66666667%; -} + left: -66.66666667%; } .col-pull-1of4, .col-pull-2of8, .col-pull-3of12, .col-pull-4of16 { - left: -25%; -} + left: -25%; } .col-pull-3of4, .col-pull-6of8, .col-pull-9of12, .col-pull-12of16 { - left: -75%; -} + left: -75%; } .col-pull-1of5, .col-pull-2of10 { - left: -20%; -} + left: -20%; } .col-pull-2of5, .col-pull-4of10 { - left: -40%; -} + left: -40%; } .col-pull-3of5, .col-pull-6of10 { - left: -60%; -} + left: -60%; } .col-pull-4of5, .col-pull-8of10 { - left: -80%; -} + left: -80%; } .col-pull-1of6, .col-pull-2of12 { - left: -16.66666667%; -} + left: -16.66666667%; } .col-pull-5of6, .col-pull-10of12 { - left: -83.33333333%; -} + left: -83.33333333%; } .col-pull-1of8, .col-pull-2of16 { - left: -12.5%; -} + left: -12.5%; } .col-pull-3of8, .col-pull-6of16 { - left: -37.5%; -} + left: -37.5%; } .col-pull-5of8, .col-pull-10of16 { - left: -62.5%; -} + left: -62.5%; } .col-pull-7of8, .col-pull-14of16 { - left: -87.5%; -} + left: -87.5%; } .col-pull-1of10 { - left: -10%; -} + left: -10%; } .col-pull-3of10 { - left: -30%; -} + left: -30%; } .col-pull-7of10 { - left: -70%; -} + left: -70%; } .col-pull-9of10 { - left: -90%; -} + left: -90%; } .col-pull-1of12 { - left: -8.33333333%; -} + left: -8.33333333%; } .col-pull-5of12 { - left: -41.66666667%; -} + left: -41.66666667%; } .col-pull-7of12 { - left: -58.33333333%; -} + left: -58.33333333%; } .col-pull-11of12 { - left: -91.66666667%; -} + left: -91.66666667%; } .col-pull-1of16 { - left: -6.25%; -} + left: -6.25%; } .col-pull-3of16 { - left: -18.75%; -} + left: -18.75%; } .col-pull-5of16 { - left: -31.25%; -} + left: -31.25%; } .col-pull-7of16 { - left: -43.75%; -} + left: -43.75%; } .col-pull-9of16 { - left: -56.25%; -} + left: -56.25%; } .col-pull-11of16 { - left: -68.75%; -} + left: -68.75%; } .col-pull-13of16 { - left: -81.25%; -} + left: -81.25%; } .col-pull-15of16 { - left: -93.75%; -} + left: -93.75%; } .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%; -} + 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%; -} + left: 50%; } .col-push-1of3, .col-push-2of6, .col-push-4of12 { - left: 33.33333333%; -} + left: 33.33333333%; } .col-push-2of3, .col-push-4of6, .col-push-8of12 { - left: 66.66666667%; -} + left: 66.66666667%; } .col-push-1of4, .col-push-2of8, .col-push-3of12, .col-push-4of16 { - left: 25%; -} + left: 25%; } .col-push-3of4, .col-push-6of8, .col-push-9of12, .col-push-12of16 { - left: 75%; -} + left: 75%; } .col-push-1of5, .col-push-2of10 { - left: 20%; -} + left: 20%; } .col-push-2of5, .col-push-4of10 { - left: 40%; -} + left: 40%; } .col-push-3of5, .col-push-6of10 { - left: 60%; -} + left: 60%; } .col-push-4of5, .col-push-8of10 { - left: 80%; -} + left: 80%; } .col-push-1of6, .col-push-2of12 { - left: 16.66666667%; -} + left: 16.66666667%; } .col-push-5of6, .col-push-10of12 { - left: 83.33333333%; -} + left: 83.33333333%; } .col-push-1of8, .col-push-2of16 { - left: 12.5%; -} + left: 12.5%; } .col-push-3of8, .col-push-6of16 { - left: 37.5%; -} + left: 37.5%; } .col-push-5of8, .col-push-10of16 { - left: 62.5%; -} + left: 62.5%; } .col-push-7of8, .col-push-14of16 { - left: 87.5%; -} + left: 87.5%; } .col-push-1of10 { - left: 10%; -} + left: 10%; } .col-push-3of10 { - left: 30%; -} + left: 30%; } .col-push-7of10 { - left: 70%; -} + left: 70%; } .col-push-9of10 { - left: 90%; -} + left: 90%; } .col-push-1of12 { - left: 8.33333333%; -} + left: 8.33333333%; } .col-push-5of12 { - left: 41.66666667%; -} + left: 41.66666667%; } .col-push-7of12 { - left: 58.33333333%; -} + left: 58.33333333%; } .col-push-11of12 { - left: 91.66666667%; -} + left: 91.66666667%; } .col-push-1of16 { - left: 6.25%; -} + left: 6.25%; } .col-push-3of16 { - left: 18.75%; -} + left: 18.75%; } .col-push-5of16 { - left: 31.25%; -} + left: 31.25%; } .col-push-7of16 { - left: 43.75%; -} + left: 43.75%; } .col-push-9of16 { - left: 56.25%; -} + left: 56.25%; } .col-push-11of16 { - left: 68.75%; -} + left: 68.75%; } .col-push-13of16 { - left: 81.25%; -} + left: 81.25%; } .col-push-15of16 { - left: 93.75%; -} + left: 93.75%; } @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%; - } - + 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%; - } - + width: 50%; } .col-tablet-1of3, .col-tablet-2of6, .col-tablet-4of12 { - width: 33.33333333%; - } - + width: 33.33333333%; } .col-tablet-2of3, .col-tablet-4of6, .col-tablet-8of12 { - width: 66.66666667%; - } - + width: 66.66666667%; } .col-tablet-1of4, .col-tablet-2of8, .col-tablet-3of12, .col-tablet-4of16 { - width: 25%; - } - + width: 25%; } .col-tablet-3of4, .col-tablet-6of8, .col-tablet-9of12, .col-tablet-12of16 { - width: 75%; - } - + width: 75%; } .col-tablet-1of5, .col-tablet-2of10 { - width: 20%; - } - + width: 20%; } .col-tablet-2of5, .col-tablet-4of10 { - width: 40%; - } - + width: 40%; } .col-tablet-3of5, .col-tablet-6of10 { - width: 60%; - } - + width: 60%; } .col-tablet-4of5, .col-tablet-8of10 { - width: 80%; - } - + width: 80%; } .col-tablet-1of6, .col-tablet-2of12 { - width: 16.66666667%; - } - + width: 16.66666667%; } .col-tablet-5of6, .col-tablet-10of12 { - width: 83.33333333%; - } - + width: 83.33333333%; } .col-tablet-1of8, .col-tablet-2of16 { - width: 12.5%; - } - + width: 12.5%; } .col-tablet-3of8, .col-tablet-6of16 { - width: 37.5%; - } - + width: 37.5%; } .col-tablet-5of8, .col-tablet-10of16 { - width: 62.5%; - } - + width: 62.5%; } .col-tablet-7of8, .col-tablet-14of16 { - width: 87.5%; - } - + width: 87.5%; } .col-tablet-1of10 { - width: 10%; - } - + width: 10%; } .col-tablet-3of10 { - width: 30%; - } - + width: 30%; } .col-tablet-7of10 { - width: 70%; - } - + width: 70%; } .col-tablet-9of10 { - width: 90%; - } - + width: 90%; } .col-tablet-1of12 { - width: 8.33333333%; - } - + width: 8.33333333%; } .col-tablet-5of12 { - width: 41.66666667%; - } - + width: 41.66666667%; } .col-tablet-7of12 { - width: 58.33333333%; - } - + width: 58.33333333%; } .col-tablet-11of12 { - width: 91.66666667%; - } - + width: 91.66666667%; } .col-tablet-1of16 { - width: 6.25%; - } - + width: 6.25%; } .col-tablet-3of16 { - width: 18.75%; - } - + width: 18.75%; } .col-tablet-5of16 { - width: 31.25%; - } - + width: 31.25%; } .col-tablet-7of16 { - width: 43.75%; - } - + width: 43.75%; } .col-tablet-9of16 { - width: 56.25%; - } - + width: 56.25%; } .col-tablet-11of16 { - width: 68.75%; - } - + width: 68.75%; } .col-tablet-13of16 { - width: 81.25%; - } - + width: 81.25%; } .col-tablet-15of16 { - width: 93.75%; - } -} + width: 93.75%; } + .col-tablet-pull-1of1, .col-tablet-pull-2of2, .col-tablet-pull-3of3, .col-tablet-pull-4of4, .col-tablet-pull-5of5, .col-tablet-pull-6of6, .col-tablet-pull-8of8, .col-tablet-pull-10of10, .col-tablet-pull-12of12, .col-tablet-pull-16of16 { + left: -100%; } + .col-tablet-pull-1of2, .col-tablet-pull-2of4, .col-tablet-pull-3of6, .col-tablet-pull-4of8, .col-tablet-pull-5of10, .col-tablet-pull-6of12, .col-tablet-pull-8of16 { + left: -50%; } + .col-tablet-pull-1of3, .col-tablet-pull-2of6, .col-tablet-pull-4of12 { + left: -33.33333333%; } + .col-tablet-pull-2of3, .col-tablet-pull-4of6, .col-tablet-pull-8of12 { + left: -66.66666667%; } + .col-tablet-pull-1of4, .col-tablet-pull-2of8, .col-tablet-pull-3of12, .col-tablet-pull-4of16 { + left: -25%; } + .col-tablet-pull-3of4, .col-tablet-pull-6of8, .col-tablet-pull-9of12, .col-tablet-pull-12of16 { + left: -75%; } + .col-tablet-pull-1of5, .col-tablet-pull-2of10 { + left: -20%; } + .col-tablet-pull-2of5, .col-tablet-pull-4of10 { + left: -40%; } + .col-tablet-pull-3of5, .col-tablet-pull-6of10 { + left: -60%; } + .col-tablet-pull-4of5, .col-tablet-pull-8of10 { + left: -80%; } + .col-tablet-pull-1of6, .col-tablet-pull-2of12 { + left: -16.66666667%; } + .col-tablet-pull-5of6, .col-tablet-pull-10of12 { + left: -83.33333333%; } + .col-tablet-pull-1of8, .col-tablet-pull-2of16 { + left: -12.5%; } + .col-tablet-pull-3of8, .col-tablet-pull-6of16 { + left: -37.5%; } + .col-tablet-pull-5of8, .col-tablet-pull-10of16 { + left: -62.5%; } + .col-tablet-pull-7of8, .col-tablet-pull-14of16 { + left: -87.5%; } + .col-tablet-pull-1of10 { + left: -10%; } + .col-tablet-pull-3of10 { + left: -30%; } + .col-tablet-pull-7of10 { + left: -70%; } + .col-tablet-pull-9of10 { + left: -90%; } + .col-tablet-pull-1of12 { + left: -8.33333333%; } + .col-tablet-pull-5of12 { + left: -41.66666667%; } + .col-tablet-pull-7of12 { + left: -58.33333333%; } + .col-tablet-pull-11of12 { + left: -91.66666667%; } + .col-tablet-pull-1of16 { + left: -6.25%; } + .col-tablet-pull-3of16 { + left: -18.75%; } + .col-tablet-pull-5of16 { + left: -31.25%; } + .col-tablet-pull-7of16 { + left: -43.75%; } + .col-tablet-pull-9of16 { + left: -56.25%; } + .col-tablet-pull-11of16 { + left: -68.75%; } + .col-tablet-pull-13of16 { + left: -81.25%; } + .col-tablet-pull-15of16 { + left: -93.75%; } + .col-tablet-push-1of1, .col-tablet-push-2of2, .col-tablet-push-3of3, .col-tablet-push-4of4, .col-tablet-push-5of5, .col-tablet-push-6of6, .col-tablet-push-8of8, .col-tablet-push-10of10, .col-tablet-push-12of12, .col-tablet-push-16of16 { + left: 100%; } + .col-tablet-push-1of2, .col-tablet-push-2of4, .col-tablet-push-3of6, .col-tablet-push-4of8, .col-tablet-push-5of10, .col-tablet-push-6of12, .col-tablet-push-8of16 { + left: 50%; } + .col-tablet-push-1of3, .col-tablet-push-2of6, .col-tablet-push-4of12 { + left: 33.33333333%; } + .col-tablet-push-2of3, .col-tablet-push-4of6, .col-tablet-push-8of12 { + left: 66.66666667%; } + .col-tablet-push-1of4, .col-tablet-push-2of8, .col-tablet-push-3of12, .col-tablet-push-4of16 { + left: 25%; } + .col-tablet-push-3of4, .col-tablet-push-6of8, .col-tablet-push-9of12, .col-tablet-push-12of16 { + left: 75%; } + .col-tablet-push-1of5, .col-tablet-push-2of10 { + left: 20%; } + .col-tablet-push-2of5, .col-tablet-push-4of10 { + left: 40%; } + .col-tablet-push-3of5, .col-tablet-push-6of10 { + left: 60%; } + .col-tablet-push-4of5, .col-tablet-push-8of10 { + left: 80%; } + .col-tablet-push-1of6, .col-tablet-push-2of12 { + left: 16.66666667%; } + .col-tablet-push-5of6, .col-tablet-push-10of12 { + left: 83.33333333%; } + .col-tablet-push-1of8, .col-tablet-push-2of16 { + left: 12.5%; } + .col-tablet-push-3of8, .col-tablet-push-6of16 { + left: 37.5%; } + .col-tablet-push-5of8, .col-tablet-push-10of16 { + left: 62.5%; } + .col-tablet-push-7of8, .col-tablet-push-14of16 { + left: 87.5%; } + .col-tablet-push-1of10 { + left: 10%; } + .col-tablet-push-3of10 { + left: 30%; } + .col-tablet-push-7of10 { + left: 70%; } + .col-tablet-push-9of10 { + left: 90%; } + .col-tablet-push-1of12 { + left: 8.33333333%; } + .col-tablet-push-5of12 { + left: 41.66666667%; } + .col-tablet-push-7of12 { + left: 58.33333333%; } + .col-tablet-push-11of12 { + left: 91.66666667%; } + .col-tablet-push-1of16 { + left: 6.25%; } + .col-tablet-push-3of16 { + left: 18.75%; } + .col-tablet-push-5of16 { + left: 31.25%; } + .col-tablet-push-7of16 { + left: 43.75%; } + .col-tablet-push-9of16 { + left: 56.25%; } + .col-tablet-push-11of16 { + left: 68.75%; } + .col-tablet-push-13of16 { + left: 81.25%; } + .col-tablet-push-15of16 { + left: 93.75%; } } .col-3-wide { - width: 33.33333333%; -} + width: 33.33333333%; } @media (max-width: 719px) { - [class*=col-] { - float: none; - left: 0; - width: auto; - } -} + /* Remove .col-12 and .col-13 backward compatibility support as soon as it's been removed. */ +[class*=col-], .col-12 [class*=col-], .col-13 [class*=col-] { + float: none; + left: 0; + width: auto; +} } /* Header component */ .dac-header { @@ -7295,7 +7116,7 @@ div.jd-descr > .resource-widget[data-section=distribute\/tools] .section-card-me padding: 14px 24px 14px; } -.dac-header-logo:link, .dac-header-logo:visited, .dac-header-logo:hover, .dac-header-logo:active { +.dac-header-logo, .dac-header-logo:hover, .dac-header-logo:focus { color: #444; } @@ -7304,9 +7125,9 @@ div.jd-descr > .resource-widget[data-section=distribute\/tools] .section-card-me vertical-align: top; } -.dac-header-consoleBtn { +.dac-header-console-btn { border: 1px solid #c5c5c5; - border-radius: 4px; + border-radius: 3px; box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.11); background: #fff; float: right; @@ -7318,15 +7139,15 @@ div.jd-descr > .resource-widget[data-section=distribute\/tools] .section-card-me z-index: 52; } -.dac-header-consoleBtn > .dac-sprite { +.dac-header-console-btn > .dac-sprite { margin-right: 5px; } -.dac-header-consoleBtn:link, .dac-header-consoleBtn:visited, .dac-header-consoleBtn:hover, .dac-header-consoleBtn:active { +.dac-header-console-btn, .dac-header-console-btn:hover, .dac-header-console-btn:focus { color: #666; } -.dac-header-consoleBtn:focus { +.dac-header-console-btn:focus { background: rgba(63, 81, 181, 0.1); outline: 0; } @@ -7352,7 +7173,7 @@ div.jd-descr > .resource-widget[data-section=distribute\/tools] .section-card-me display: none; } - .dac-header-consoleBtn { + .dac-header-console-btn { display: none; } } @@ -7415,6 +7236,7 @@ div.jd-descr > .resource-widget[data-section=distribute\/tools] .section-card-me } .dac-header-crumbs-link { + color: #444; display: block; font-size: 16px; font-weight: 300; @@ -7424,8 +7246,8 @@ div.jd-descr > .resource-widget[data-section=distribute\/tools] .section-card-me transition: background-color 0.35s cubic-bezier(0.35, 0, 0.25, 1); } -.dac-header-crumbs-link:link, .dac-header-crumbs-link:visited, .dac-header-crumbs-link:hover, .dac-header-crumbs-link:active { - color: #444; +.dac-header-crumbs-link:hover, .dac-header-crumbs-link:focus { + color: rgba(68, 68, 68, 0.7); } .dac-header-crumbs-link:focus { @@ -7473,14 +7295,10 @@ div.jd-descr > .resource-widget[data-section=distribute\/tools] .section-card-me } .dac-header-search-btn { - background: url(../images/icon_search.png) 50% 0 no-repeat; - height: 28px; + left: 20px; position: absolute; - width: 64px; -} - -.dac-header-search:hover .dac-header-search-btn { - background-position: 50% -28px; + top: 20px; + opacity: .54; } .dac-header-search-form { @@ -7501,6 +7319,7 @@ div.jd-descr > .resource-widget[data-section=distribute\/tools] .section-card-me background-color: transparent; border: none; border-bottom: 1px solid #CCC; + border-radius: 0; box-sizing: border-box; color: #2f2f2f; font-size: 14px; @@ -7511,10 +7330,6 @@ div.jd-descr > .resource-widget[data-section=distribute\/tools] .section-card-me z-index: 1500; } -.dac-header-search:hover .dac-header-search-input { - border-bottom: 1px solid #33b5e5; -} - .dac-header-search-input:focus { color: #222; font-weight: bold; @@ -7609,6 +7424,7 @@ div.jd-descr > .resource-widget[data-section=distribute\/tools] .section-card-me } .dac-nav-link { + color: #444; display: block; font-size: 16px; font-weight: 300; @@ -7619,8 +7435,8 @@ div.jd-descr > .resource-widget[data-section=distribute\/tools] .section-card-me 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:hover, .dac-nav-link:focus { + color: rgba(68, 68, 68, 0.7); } .dac-nav-link:focus { @@ -7654,11 +7470,12 @@ div.jd-descr > .resource-widget[data-section=distribute\/tools] .section-card-me } .dac-nav-secondary .dac-nav-link { + color: #666; padding: 17px 16px 15px; } -.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; +.dac-nav-secondary .dac-nav-link:hover, .dac-nav-secondary .dac-nav-link:focus { + color: rgba(102, 102, 102, 0.7); } @media (min-width: 720px) and (max-width: 979px) { @@ -7709,7 +7526,8 @@ div.jd-descr > .resource-widget[data-section=distribute\/tools] .section-card-me bottom: 0; left: auto; max-width: 280px; - overflow-y: auto; + -webkit-overflow-scrolling: touch; + overflow-y: scroll; padding: 0 0 20px 0; position: fixed; right: 100%; @@ -7778,46 +7596,11 @@ div.jd-descr > .resource-widget[data-section=distribute\/tools] .section-card-me padding: 14px 24px; } - .dac-nav-logo:link, .dac-nav-logo:visited, .dac-nav-logo:hover, .dac-nav-logo:active { + .dac-nav-logo, .dac-nav-logo:hover, .dac-nav-logo:focus { 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; @@ -7829,7 +7612,7 @@ div.jd-descr > .resource-widget[data-section=distribute\/tools] .section-card-me padding-top: 88px; } -.dac-hero.dac-darken:before { +.dac-hero.dac-darken::before { background: rgba(0, 0, 0, 0.3); bottom: 0; content: ''; @@ -7840,6 +7623,13 @@ div.jd-descr > .resource-widget[data-section=distribute\/tools] .section-card-me top: 0; } +@media (max-width: 719px) { + .dac-hero.dac-darken::before { + background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.9) 80%); + background: linear-gradient(to bottom, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.9) 80%); + } +} + .dac-hero.dac-darken .dac-hero-content { position: relative; } @@ -7863,10 +7653,23 @@ div.jd-descr > .resource-widget[data-section=distribute\/tools] .section-card-me margin: 0 0 14px; } +@media (max-width: 719px) { + .dac-hero-title { + font-size: 28px; + line-height: 35px; + } +} + .dac-hero-description { margin-bottom: 16px; } +@media (max-width: 719px) { + .dac-hero-description { + font-size: 14px; + } +} + .dac-hero-cta { display: inline-block; line-height: 40px; @@ -7884,10 +7687,27 @@ div.jd-descr > .resource-widget[data-section=distribute\/tools] .section-card-me margin-left: -8px; } +@media (max-width: 719px) { + .dac-hero-cta { + line-height: 28px; + } +} + .dac-hero-figure { text-align: center; } +@media (max-width: 719px) { + .dac-hero-figure { + height: 150px; + margin: 15px 0; + } + + .dac-hero-figure img { + max-height: 150px; + } +} + .dac-hero-carousel { height: 550px; position: relative; @@ -7899,6 +7719,7 @@ div.jd-descr > .resource-widget[data-section=distribute\/tools] .section-card-me position: absolute; right: 0; top: 0; + will-change: opacity; } .dac-hero-carousel > .dac-hero, .dac-hero-carousel > .dac-hero .wrap { @@ -7924,39 +7745,61 @@ div.jd-descr > .resource-widget[data-section=distribute\/tools] .section-card-me opacity: 0; } +.dac-hero-carousel-action { + bottom: 0; + display: block; + left: 0; + position: absolute; + right: 0; + top: 0; + z-index: 1; +} + +.dac-hero-carousel .dac-hero-cta { + position: relative; + z-index: 1; +} + .dac-hero-carousel-pagination { bottom: 33px; left: 0; position: absolute; right: 0; - z-index: 51; } @media (max-width: 719px) { .dac-hero-carousel-pagination { - text-align: right; + text-align: center; bottom: 20px; } } +.dac-hero-carousel-pagination .dac-pagination-item { + position: relative; + z-index: 1; +} + .dac-pagination { list-style: none; - margin: 0 -3px; + margin: 0 -6px; } .dac-pagination-item { + background-clip: content-box; background-color: rgba(153, 153, 153, 0.4); border-radius: 50%; cursor: pointer; display: inline-block; height: 14px; - margin: 0 3px; overflow: hidden; + padding: 6px; + pointer-events: all; text-indent: 100%; -webkit-transition: background-color .1s ease-in; transition: background-color .1s ease-in; white-space: nowrap; width: 14px; + will-change: background-color; } .dac-pagination-item:hover { @@ -7975,6 +7818,13 @@ div.jd-descr > .resource-widget[data-section=distribute\/tools] .section-card-me background-color: rgba(153, 153, 153, 0.4); } +@media (max-width: 719px) { + .dac-pagination-item { + height: 12px; + width: 12px; + } +} + /* Form component */ .dac-form { color: #505050; @@ -8161,6 +8011,54 @@ div.jd-descr > .resource-widget[data-section=distribute\/tools] .section-card-me width: 100%; } +.dac-swap { + overflow: hidden; + position: relative; +} + +.dac-swap-section { + left: 0; + opacity: 0; + position: absolute; + top: 0; + width: 100%; + -webkit-transition: opacity 1s, -webkit-transform .5s; + transition: opacity 1s, transform .5s; +} + +.dac-swap-section.dac-up { + -webkit-transform: translateY(-100%); + -ms-transform: translateY(-100%); + transform: translateY(-100%); +} + +.dac-swap-section.dac-down { + -webkit-transform: translateY(100%); + -ms-transform: translateY(100%); + transform: translateY(100%); +} + +.dac-swap-section.dac-left { + -webkit-transform: translateX(-100%); + -ms-transform: translateX(-100%); + transform: translateX(-100%); +} + +.dac-swap-section.dac-right { + -webkit-transform: translateX(100%); + -ms-transform: translateX(100%); + transform: translateX(100%); +} + +.dac-swap-section.dac-active { + opacity: 1; + position: relative; + -webkit-transform: translate(0, 0); + -ms-transform: translate(0, 0); + transform: translate(0, 0); + width: auto; +} + /* Modal component */ .dac-modal { background: rgba(0, 0, 0, 0.8); @@ -8210,23 +8108,21 @@ div.jd-descr > .resource-widget[data-section=distribute\/tools] .section-card-me .dac-modal-window { background: #fff; - border-top-left-radius: 5px; - border-top-right-radius: 5px; + border-radius: 5px; box-sizing: border-box; - margin: 20px; + margin: 20px auto; -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); + -webkit-transform: translate(0, 0); + -ms-transform: translate(0, 0); + transform: translate(0, 0); } .dac-modal-header { @@ -8266,20 +8162,25 @@ div.jd-descr > .resource-widget[data-section=distribute\/tools] .section-card-me } .dac-modal-header-subtitle { - bottom: 31px; + bottom: 0; color: #fff; display: inline-block; font: inherit; font-size: 14px; + margin: 0; opacity: .8; position: absolute; - right: 35px; + right: 0; } .dac-modal-content { padding: 12px 35px; } +.dac-modal-action { + margin: 0; +} + .dac-modal-footer { padding: 24px 35px; } @@ -8336,6 +8237,20 @@ div.jd-descr > .resource-widget[data-section=distribute\/tools] .section-card-me padding-top: 20px; } +.newsletter-success-message { + font-size: 32px; + line-height: 1.4; + padding: 40px 30px; + text-align: center; +} + +@media (max-width: 719px) { + .newsletter-success-message { + font-size: 16px; + padding: 12px 0 0; + } +} + @media (min-width: 720px) { .newsletter-checkboxes { padding-top: 46px; @@ -8399,15 +8314,23 @@ div.jd-descr > .resource-widget[data-section=distribute\/tools] .section-card-me background-color: #dc4d38; } -.dac-hero-cta:link, .dac-hero-cta:visited, .dac-section-title, .dac-section-links { +.dac-hero-cta, .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 { +.dac-invert .dac-hero-cta, .dac-invert .dac-section-title, .dac-invert .dac-section-links { color: white; } +.dac-hero-cta .dac-sprite, .dac-section-title .dac-sprite, .dac-section-links .dac-sprite { + opacity: .87; +} + +.dac-invert .dac-hero-cta .dac-sprite, .dac-invert .dac-section-title .dac-sprite, .dac-invert .dac-section-links .dac-sprite { + opacity: 1; +} + .dac-hero-tag, .dac-hero-description, .dac-section-subtitle { color: #757575; color: rgba(0, 0, 0, 0.54); @@ -8469,6 +8392,12 @@ div.jd-descr > .resource-widget[data-section=distribute\/tools] .section-card-me .dac-section-link { display: inline-block; margin: 0 32px; + -webkit-transition: opacity .3s; + transition: opacity .3s; +} + +.dac-section-link:hover { + opacity: .54; } @media (max-width: 719px) { @@ -8479,18 +8408,9 @@ div.jd-descr > .resource-widget[data-section=distribute\/tools] .section-card-me } .dac-section-link a { - -webkit-transition: opacity .3s; - transition: opacity .3s; -} - -.dac-section-link a:link, .dac-section-link a:visited { color: inherit; } -.dac-section-link a:hover { - opacity: .54; -} - /* SCSS variables are information about icon's compiled state, stored under its original file name @@ -8514,96 +8434,144 @@ $spritesheet: width height image $spritesheet-sprites; background-size: 50% 50%; } } .dac-sprite.dac-auto-chevron { - background-position: -26px -38px; + background-position: 0px -196px; height: 24px; width: 24px; vertical-align: -6px; } .dac-invert .dac-sprite.dac-auto-chevron { - background-position: -76px 0px; + background-position: 0px -222px; height: 24px; width: 24px; } .dac-sprite.dac-auto-chevron-large { - background-position: 0px 0px; + background-position: 0px -404px; height: 36px; width: 36px; vertical-align: -10px; } .dac-invert .dac-sprite.dac-auto-chevron-large { - background-position: -38px 0px; + background-position: 0px -442px; height: 36px; width: 36px; } +.dac-sprite.dac-auto-unfold-less { + background-position: 0px -352px; + height: 24px; + width: 24px; + vertical-align: -6px; } + .dac-invert .dac-sprite.dac-auto-unfold-less { + background-position: 0px -326px; + height: 24px; + width: 24px; } +.dac-sprite.dac-auto-unfold-more { + background-position: 0px -300px; + height: 24px; + width: 24px; + vertical-align: -6px; } + .dac-invert .dac-sprite.dac-auto-unfold-more { + background-position: 0px -378px; + height: 24px; + width: 24px; } .dac-sprite.dac-arrow-down-gray { - background-position: -56px -64px; + background-position: 0px 0px; height: 11px; width: 19px; } .dac-sprite.dac-arrow-right { - background-position: -102px 0px; + background-position: 0px -128px; height: 18px; width: 11px; } .dac-sprite.dac-chevron-large-right-black { - background-position: 0px 0px; + background-position: 0px -404px; height: 36px; width: 36px; } .dac-sprite.dac-chevron-large-right-white { - background-position: -38px 0px; + background-position: 0px -442px; height: 36px; width: 36px; } .dac-sprite.dac-chevron-right-black { - background-position: -26px -38px; + background-position: 0px -196px; height: 24px; width: 24px; } .dac-sprite.dac-chevron-right-white { - background-position: -76px 0px; + background-position: 0px -222px; height: 24px; width: 24px; } .dac-sprite.dac-close { - background-position: -34px -83px; + background-position: 0px -27px; height: 12px; width: 12px; } .dac-sprite.dac-expand-less-black { - background-position: 0px -38px; + background-position: 0px -248px; height: 24px; width: 24px; } .dac-sprite.dac-expand-more-black { - background-position: -76px -26px; + background-position: 0px -170px; height: 24px; width: 24px; } .dac-sprite.dac-google-play { - background-position: -52px -38px; + background-position: 0px -108px; height: 18px; width: 16px; } .dac-sprite.dac-gplus { - background-position: 0px -64px; + background-position: 0px -89px; height: 17px; width: 16px; } .dac-sprite.dac-mail { - background-position: -16px -83px; + background-position: 0px -13px; height: 12px; width: 16px; } +.dac-sprite.dac-play-white { + background-position: 0px -148px; + height: 20px; + width: 16px; } + .dac-sprite.dac-rss { - background-position: 0px -83px; + background-position: 0px -41px; height: 14px; width: 14px; } +.dac-sprite.dac-search { + background-position: 0px -274px; + height: 24px; + width: 24px; } + .dac-sprite.dac-twitter { - background-position: -38px -64px; + background-position: 0px -73px; height: 14px; width: 16px; } +.dac-sprite.dac-unfold-less-white { + background-position: 0px -326px; + height: 24px; + width: 24px; } + +.dac-sprite.dac-unfold-less { + background-position: 0px -352px; + height: 24px; + width: 24px; } + +.dac-sprite.dac-unfold-more-white { + background-position: 0px -378px; + height: 24px; + width: 24px; } + +.dac-sprite.dac-unfold-more { + background-position: 0px -300px; + height: 24px; + width: 24px; } + .dac-sprite.dac-youtube { - background-position: -18px -64px; + background-position: 0px -57px; height: 14px; width: 18px; } @@ -8618,6 +8586,7 @@ $spritesheet: width height image $spritesheet-sprites; .dac-toggle.is-expanded .dac-toggle-collapse { display: inline-block; } .dac-toggle-content { + clear: left; overflow: hidden; max-height: 0; -webkit-transition: .3s max-height; @@ -8668,12 +8637,81 @@ $spritesheet: width height image $spritesheet-sprites; .dac-offset-parent { position: relative !important; } +/** + * Break strings when their length exceeds the width of their container. + */ +.dac-text-break { + word-wrap: break-word !important; } + +/** + * Horizontal text alignment + */ +.dac-text-center { + text-align: center !important; } + +.dac-text-left { + text-align: left !important; } + +.dac-text-right { + text-align: right !important; } + +/** + * Prevent whitespace wrapping + */ +.dac-text-no-wrap { + white-space: nowrap !important; } + +/** + * Prevent text from wrapping onto multiple lines, instead truncate with an ellipsis. + */ +.dac-text-truncate { + max-width: 100%; + overflow: hidden !important; + text-overflow: ellipsis !important; + white-space: nowrap !important; + word-wrap: normal !important; } + +/** + * Floats + */ +.dac-float-left { + float: left !important; } + +.dac-float-right { + float: right !important; } + +/** + * New block formatting context + * + * This affords some useful properties to the element. It won't wrap under + * floats. Will also contain any floated children. + * N.B. This will clip overflow. Use the alternative method below if this is + * problematic. + */ +.dac-nbfc { + overflow: hidden !important; +} + +/** + * New block formatting context (alternative) + * + * Alternative method when overflow must not be clipped. + * + * N.B. This breaks down in some browsers when elements within this element + * exceed its width. + */ +.dac-nbfc-alt { + display: table-cell !important; + width: 10000px !important; +} + #tb li:before, #qv li:before { - background-position: -26px -38px; + background-position: 0px -196px; height: 24px; width: 24px; content: ''; left: -8px; opacity: .7; position: absolute; - top: -4px; } + top: -4px; +} diff --git a/tools/droiddoc/templates-sdk/assets/images/android_logo.png b/tools/droiddoc/templates-sdk/assets/images/android_logo.png index 8fa1b7a48..e3b565a41 100644 Binary files a/tools/droiddoc/templates-sdk/assets/images/android_logo.png and b/tools/droiddoc/templates-sdk/assets/images/android_logo.png differ diff --git a/tools/droiddoc/templates-sdk/assets/images/android_logo@2x.png b/tools/droiddoc/templates-sdk/assets/images/android_logo@2x.png index 1f3e23d24..dbb5ca428 100644 Binary files a/tools/droiddoc/templates-sdk/assets/images/android_logo@2x.png and b/tools/droiddoc/templates-sdk/assets/images/android_logo@2x.png differ diff --git a/tools/droiddoc/templates-sdk/assets/images/android_logo_ndk.png b/tools/droiddoc/templates-sdk/assets/images/android_logo_ndk.png index 511c200b5..63d5a408b 100644 Binary files a/tools/droiddoc/templates-sdk/assets/images/android_logo_ndk.png and b/tools/droiddoc/templates-sdk/assets/images/android_logo_ndk.png differ 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 index 1d88dfaa2..d90b9e28c 100644 Binary files a/tools/droiddoc/templates-sdk/assets/images/android_logo_ndk@2x.png and b/tools/droiddoc/templates-sdk/assets/images/android_logo_ndk@2x.png differ diff --git a/tools/droiddoc/templates-sdk/assets/images/sprite-2x.png b/tools/droiddoc/templates-sdk/assets/images/sprite-2x.png index a1f0683fb..185b7e801 100644 Binary files a/tools/droiddoc/templates-sdk/assets/images/sprite-2x.png and b/tools/droiddoc/templates-sdk/assets/images/sprite-2x.png differ diff --git a/tools/droiddoc/templates-sdk/assets/images/sprite.png b/tools/droiddoc/templates-sdk/assets/images/sprite.png index 3ee611c8a..7fef43e75 100644 Binary files a/tools/droiddoc/templates-sdk/assets/images/sprite.png and b/tools/droiddoc/templates-sdk/assets/images/sprite.png differ diff --git a/tools/droiddoc/templates-sdk/assets/js/docs.js b/tools/droiddoc/templates-sdk/assets/js/docs.js index 30a29fc85..92511cc3c 100644 --- a/tools/droiddoc/templates-sdk/assets/js/docs.js +++ b/tools/droiddoc/templates-sdk/assets/js/docs.js @@ -76,7 +76,7 @@ $(document).ready(function() { } // set up the search close button - $('#search-close').click(function() { + $('#search-close').on('click touchend', function() { $searchInput = $('#search_autocomplete'); $searchInput.attr('value', ''); $(this).addClass("hide"); @@ -91,7 +91,8 @@ $(document).ready(function() { $("#search_autocomplete").focus(function() { $("#search-container").addClass('active'); }) - $("#search-container").mouseover(function() { + $("#search-container").on('mouseover touchend', function(e) { + if ($(e.target).is('#search-close')) { return; } $("#search-container").addClass('active'); $("#search_autocomplete").focus(); }) @@ -3581,6 +3582,7 @@ function showSamples() { var opts = { cardSizes: ($widget.data('cardsizes') || '').split(','), maxResults: parseInt($widget.data('maxresults') || '100', 10), + initialResults: $widget.data('initialResults'), itemsPerPage: $widget.data('itemsperpage'), sortOrder: $widget.data('sortorder'), query: $widget.data('query'), @@ -3764,14 +3766,30 @@ function showSamples() { function drawResourcesFlowWidget($widget, opts, resources) { $widget.empty().addClass('cols'); var cardSizes = opts.cardSizes || ['6x6']; + var initialResults = opts.initialResults || resources.length; var i = 0, j = 0; var plusone = false; // stop showing plusone buttons on cards + var cardParent = $widget; while (i < resources.length) { + + if (i === initialResults && initialResults < resources.length) { + // Toggle remaining cards + cardParent = $('
').appendTo($widget); + $widget.addClass('dac-toggle'); + $('