Add preliminary support for dynamic content js and css.
Change-Id: I1dbc92356e8d4beb712b8872e9b6cf873bdb70be
diff --git a/tools/droiddoc/templates-sdk/assets/css/resourcecards.css b/tools/droiddoc/templates-sdk/assets/css/resourcecards.css
new file mode 100644
index 0000000..1222b04
--- /dev/null
+++ b/tools/droiddoc/templates-sdk/assets/css/resourcecards.css
@@ -0,0 +1,371 @@
+/* content layout */
+.resource-widget.resource-flow-layout {
+ display: inline-block;
+ margin-right: -20px;
+ /* clearfix idiom */ }
+ .resource-widget.resource-flow-layout.col-1 {
+ width: 60px; }
+ .resource-widget.resource-flow-layout.col-2 {
+ width: 120px; }
+ .resource-widget.resource-flow-layout.col-3 {
+ width: 180px; }
+ .resource-widget.resource-flow-layout.col-4 {
+ width: 240px; }
+ .resource-widget.resource-flow-layout.col-5 {
+ width: 300px; }
+ .resource-widget.resource-flow-layout.col-6 {
+ width: 360px; }
+ .resource-widget.resource-flow-layout.col-7 {
+ width: 420px; }
+ .resource-widget.resource-flow-layout.col-8 {
+ width: 480px; }
+ .resource-widget.resource-flow-layout.col-9 {
+ width: 540px; }
+ .resource-widget.resource-flow-layout.col-10 {
+ width: 600px; }
+ .resource-widget.resource-flow-layout.col-11 {
+ width: 660px; }
+ .resource-widget.resource-flow-layout.col-12 {
+ width: 720px; }
+ .resource-widget.resource-flow-layout.col-13 {
+ width: 780px; }
+ .resource-widget.resource-flow-layout.col-14 {
+ width: 840px; }
+ .resource-widget.resource-flow-layout.col-15 {
+ width: 900px; }
+ .resource-widget.resource-flow-layout.col-16 {
+ width: 960px; }
+ .resource-widget.resource-flow-layout:after {
+ content: ".";
+ display: block;
+ height: 0;
+ clear: both;
+ visibility: hidden; }
+ * html .resource-widget.resource-flow-layout {
+ height: 1px; }
+
+.resource-card {
+ /* stuff that applies to all cards */
+ display: -webkit-flex;
+ -webkit-transform: translateZ(0);
+ float: left;
+ position: relative;
+ margin-right: 20px;
+ margin-bottom: 20px;
+ background-color: #fff;
+ border-radius: 2px;
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
+ opacity: 0.8;
+ overflow: hidden;
+ transition: 0.4s box-shadow ease, 0.4s opacity ease;
+ /* card templates */
+ /* specific cards and customizations */ }
+ .resource-card .photo {
+ position: relative;
+ background-color: #eee;
+ background-size: cover;
+ background-repeat: no-repeat;
+ background-position: 50% 50%; }
+ .resource-card.nophoto .photo:after {
+ content: '';
+ display: block;
+ position: absolute;
+ left: 20px;
+ top: 20px;
+ right: 20px;
+ bottom: 20px;
+ opacity: 0.2;
+ background-position: center center;
+ background-repeat: no-repeat;
+ background-size: contain; }
+ .resource-card .icon {
+ background-position: center center;
+ background-repeat: no-repeat;
+ background-size: contain;
+ opacity: 0;
+ transition: 0.4s ease; }
+ .resource-card:hover .icon {
+ opacity: 0.2; }
+ .resource-card:hover {
+ opacity: 1;
+ box-shadow: 0 6px 12px rgba(0, 0, 0, 0.5); }
+ .resource-card.resource-card-youtube.nophoto .photo:after, .resource-card.resource-card-youtube .icon {
+ background-image: url(../images/card_video.png); }
+ .resource-card.resource-card-samples.nophoto .photo:after, .resource-card.resource-card-samples .icon {
+ background-image: url(../images/card_sample.png); }
+ .resource-card.resource-card-blog.nophoto .photo:after, .resource-card.resource-card-blog .icon {
+ background-image: url(../images/card_post.png); }
+ .resource-card.resource-card-training.nophoto .photo:after, .resource-card.resource-card-training .icon {
+ background-image: url(../images/card_training.png); }
+ .resource-card .resource-card-text {
+ color: #333333; }
+ .resource-card .title {
+ /*font-weight: 700;*/
+ font-family: 'Roboto Condensed'; }
+ .resource-card .subtitle {
+ font-family: 'Roboto Condensed';
+ text-transform: uppercase;
+ opacity: 0.3; }
+ .resource-card .abstract {
+ font-weight: 300;
+ font-family: 'Roboto'; }
+ .resource-card.resource-card-12x7 {
+ width: 700px;
+ height: 400px;
+ -webkit-flex-direction: column; }
+ .resource-card.resource-card-12x7 .photo {
+ -webkit-flex: 1 1 auto;
+ border-bottom: 1px solid #ddd; }
+ .resource-card.resource-card-12x7 .resource-card-text {
+ margin: 20px;
+ padding-right: 88px; }
+ .resource-card.resource-card-12x7 .icon {
+ position: absolute;
+ right: 20px;
+ bottom: 20px;
+ width: 48px;
+ height: 48px; }
+ .resource-card.resource-card-12x7 .title {
+ font-size: 36px;
+ line-height: 35px;
+ max-height: 70px;
+ text-overflow: ellipsis;
+ display: -webkit-box;
+ overflow: hidden;
+ -webkit-line-clamp: 2;
+ -webkit-box-orient: vertical; }
+ .resource-card.resource-card-12x7 .subtitle {
+ font-size: 18px;
+ line-height: 20px;
+ max-height: 20px;
+ text-overflow: ellipsis;
+ display: -webkit-box;
+ overflow: hidden;
+ -webkit-line-clamp: 1;
+ -webkit-box-orient: vertical;
+ max-height: 0;
+ margin-top: 0;
+ transition: 0.4s ease; }
+ .resource-card.resource-card-12x7:hover .subtitle {
+ margin-top: 10px;
+ max-height: 20px; }
+ .resource-card.resource-card-12x7 .abstract {
+ font-size: 18px;
+ margin-top: 0;
+ line-height: 25px;
+ max-height: 75px;
+ text-overflow: ellipsis;
+ display: -webkit-box;
+ overflow: hidden;
+ -webkit-line-clamp: 3;
+ -webkit-box-orient: vertical;
+ max-height: 0;
+ transition: 0.4s ease; }
+ .resource-card.resource-card-12x7:hover .abstract {
+ margin-top: 20px;
+ max-height: 75px; }
+ .resource-card.resource-card-8x6 {
+ width: 460px;
+ height: 340px;
+ -webkit-flex-direction: column; }
+ .resource-card.resource-card-8x6 .photo {
+ -webkit-flex: 1 1 auto;
+ border-bottom: 1px solid #ddd; }
+ .resource-card.resource-card-8x6 .resource-card-text {
+ margin: 20px;
+ padding-right: 88px; }
+ .resource-card.resource-card-8x6 .icon {
+ position: absolute;
+ right: 20px;
+ bottom: 20px;
+ width: 48px;
+ height: 48px; }
+ .resource-card.resource-card-8x6 .title {
+ font-size: 36px;
+ line-height: 35px;
+ max-height: 70px;
+ text-overflow: ellipsis;
+ display: -webkit-box;
+ overflow: hidden;
+ -webkit-line-clamp: 2;
+ -webkit-box-orient: vertical; }
+ .resource-card.resource-card-8x6 .subtitle {
+ font-size: 18px;
+ line-height: 20px;
+ max-height: 20px;
+ text-overflow: ellipsis;
+ display: -webkit-box;
+ overflow: hidden;
+ -webkit-line-clamp: 1;
+ -webkit-box-orient: vertical;
+ max-height: 0;
+ margin-top: 0;
+ transition: 0.4s ease; }
+ .resource-card.resource-card-8x6:hover .subtitle {
+ margin-top: 10px;
+ max-height: 20px; }
+ .resource-card.resource-card-8x6 .abstract {
+ font-size: 18px;
+ margin-top: 0;
+ line-height: 25px;
+ max-height: 75px;
+ text-overflow: ellipsis;
+ display: -webkit-box;
+ overflow: hidden;
+ -webkit-line-clamp: 3;
+ -webkit-box-orient: vertical;
+ max-height: 0;
+ transition: 0.4s ease; }
+ .resource-card.resource-card-8x6:hover .abstract {
+ margin-top: 20px;
+ max-height: 75px; }
+ .resource-card.resource-card-8x6 .icon {
+ width: 32px;
+ height: 32px; }
+ .resource-card.resource-card-8x6 .title {
+ font-size: 24px;
+ line-height: 25px;
+ max-height: 50px;
+ text-overflow: ellipsis;
+ display: -webkit-box;
+ overflow: hidden;
+ -webkit-line-clamp: 2;
+ -webkit-box-orient: vertical; }
+ .resource-card.resource-card-8x6 .abstract {
+ font-size: 16px;
+ margin-top: 10px;
+ line-height: 20px;
+ max-height: 60px;
+ text-overflow: ellipsis;
+ display: -webkit-box;
+ overflow: hidden;
+ -webkit-line-clamp: 3;
+ -webkit-box-orient: vertical; }
+ .resource-card.resource-card-8x6 .subtitle {
+ font-size: 16px;
+ line-height: 20px;
+ max-height: 20px;
+ text-overflow: ellipsis;
+ display: -webkit-box;
+ overflow: hidden;
+ -webkit-line-clamp: 1;
+ -webkit-box-orient: vertical;
+ max-height: 0;
+ margin-top: 0;
+ transition: 0.4s ease; }
+ .resource-card.resource-card-8x6:hover .subtitle {
+ margin-top: 10px;
+ max-height: 20px; }
+ .resource-card.resource-card-8x6 .abstract {
+ font-size: 16px;
+ margin-top: 0;
+ line-height: 20px;
+ max-height: 60px;
+ text-overflow: ellipsis;
+ display: -webkit-box;
+ overflow: hidden;
+ -webkit-line-clamp: 3;
+ -webkit-box-orient: vertical;
+ max-height: 0;
+ transition: 0.4s ease; }
+ .resource-card.resource-card-8x6:hover .abstract {
+ margin-top: 10px;
+ max-height: 60px; }
+ .resource-card.resource-card-6x4 {
+ width: 340px;
+ height: 220px;
+ -webkit-flex-direction: column; }
+ .resource-card.resource-card-6x4 .photo {
+ -webkit-flex: 1 1 auto;
+ border-bottom: 1px solid #ddd; }
+ .resource-card.resource-card-6x4 .resource-card-text {
+ margin: 10px;
+ padding-right: 26px; }
+ .resource-card.resource-card-6x4 .icon {
+ position: absolute;
+ right: 10px;
+ bottom: 10px;
+ width: 16px;
+ height: 16px; }
+ .resource-card.resource-card-6x4 .title {
+ font-size: 16px;
+ line-height: 20px;
+ max-height: 40px;
+ text-overflow: ellipsis;
+ display: -webkit-box;
+ overflow: hidden;
+ -webkit-line-clamp: 2;
+ -webkit-box-orient: vertical; }
+ .resource-card.resource-card-6x4 .subtitle {
+ font-size: 13px;
+ line-height: 15px;
+ max-height: 30px;
+ text-overflow: ellipsis;
+ display: -webkit-box;
+ overflow: hidden;
+ -webkit-line-clamp: 2;
+ -webkit-box-orient: vertical;
+ max-height: 0;
+ margin-top: 0;
+ transition: 0.4s ease; }
+ .resource-card.resource-card-6x4:hover .subtitle {
+ max-height: 30px; }
+ .resource-card.resource-card-6x4 .abstract {
+ display: none; }
+ .resource-card.resource-card-6x4 .abstract {
+ font-size: 13px;
+ margin-top: 0;
+ line-height: 15px;
+ max-height: 30px;
+ text-overflow: ellipsis;
+ display: -webkit-box;
+ overflow: hidden;
+ -webkit-line-clamp: 2;
+ -webkit-box-orient: vertical;
+ max-height: 0;
+ display: block;
+ transition: 0.4s ease; }
+ .resource-card.resource-card-6x4:hover .abstract {
+ margin-top: 10px;
+ max-height: 30px; }
+ .resource-card.resource-card-4x3 {
+ width: 220px;
+ height: 160px;
+ -webkit-flex-direction: column; }
+ .resource-card.resource-card-4x3 .photo {
+ -webkit-flex: 1 1 auto;
+ border-bottom: 1px solid #ddd; }
+ .resource-card.resource-card-4x3 .resource-card-text {
+ margin: 10px;
+ padding-right: 26px; }
+ .resource-card.resource-card-4x3 .icon {
+ position: absolute;
+ right: 10px;
+ bottom: 10px;
+ width: 16px;
+ height: 16px; }
+ .resource-card.resource-card-4x3 .title {
+ font-size: 16px;
+ line-height: 20px;
+ max-height: 40px;
+ text-overflow: ellipsis;
+ display: -webkit-box;
+ overflow: hidden;
+ -webkit-line-clamp: 2;
+ -webkit-box-orient: vertical; }
+ .resource-card.resource-card-4x3 .subtitle {
+ font-size: 13px;
+ line-height: 15px;
+ max-height: 30px;
+ text-overflow: ellipsis;
+ display: -webkit-box;
+ overflow: hidden;
+ -webkit-line-clamp: 2;
+ -webkit-box-orient: vertical;
+ max-height: 0;
+ margin-top: 0;
+ transition: 0.4s ease; }
+ .resource-card.resource-card-4x3:hover .subtitle {
+ max-height: 30px; }
+ .resource-card.resource-card-4x3 .abstract {
+ display: none; }