Repository: flex-asjs Updated Branches: refs/heads/feature/mdl 8da63daf5 -> 6fc7f38cf
MDL Blog Template Project: http://git-wip-us.apache.org/repos/asf/flex-asjs/repo Commit: http://git-wip-us.apache.org/repos/asf/flex-asjs/commit/6fc7f38c Tree: http://git-wip-us.apache.org/repos/asf/flex-asjs/tree/6fc7f38c Diff: http://git-wip-us.apache.org/repos/asf/flex-asjs/diff/6fc7f38c Branch: refs/heads/feature/mdl Commit: 6fc7f38cfae23f195b071bf5086486195341224c Parents: 8da63da Author: Carlos Rovira <[email protected]> Authored: Sat Jan 28 01:24:27 2017 +0100 Committer: Carlos Rovira <[email protected]> Committed: Sat Jan 28 01:24:27 2017 +0100 ---------------------------------------------------------------------- .../flexjs/MDLExample/src/main/flex/Blog.mxml | 244 ++++++++++++ .../src/main/flex/MainNavigation.mxml | 3 +- .../src/main/flex/models/MainNavigationModel.as | 1 + .../main/resources/images/android-desktop.png | Bin 0 -> 8325 bytes .../src/main/resources/images/avatar.png | Bin 0 -> 246 bytes .../src/main/resources/images/bg_1024.jpg | Bin 0 -> 64530 bytes .../src/main/resources/images/bg_2048.jpg | Bin 0 -> 262772 bytes .../src/main/resources/images/bg_2880.jpg | Bin 0 -> 514925 bytes .../src/main/resources/images/co1.jpg | Bin 0 -> 4839 bytes .../src/main/resources/images/co2.jpg | Bin 0 -> 12778 bytes .../src/main/resources/images/coffee.jpg | Bin 0 -> 66602 bytes .../src/main/resources/images/favicon.png | Bin 0 -> 905 bytes .../src/main/resources/images/ios-desktop.png | Bin 0 -> 1489 bytes .../src/main/resources/images/logo.png | Bin 0 -> 1220 bytes .../src/main/resources/images/road.jpg | Bin 0 -> 76091 bytes .../src/main/resources/images/road_big.jpg | Bin 0 -> 232489 bytes .../src/main/resources/images/shopping.jpg | Bin 0 -> 94041 bytes .../src/main/resources/mdl-styles.css | 384 ++++++++++++++++++- 18 files changed, 630 insertions(+), 2 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/6fc7f38c/examples/flexjs/MDLExample/src/main/flex/Blog.mxml ---------------------------------------------------------------------- diff --git a/examples/flexjs/MDLExample/src/main/flex/Blog.mxml b/examples/flexjs/MDLExample/src/main/flex/Blog.mxml new file mode 100644 index 0000000..bd6758d --- /dev/null +++ b/examples/flexjs/MDLExample/src/main/flex/Blog.mxml @@ -0,0 +1,244 @@ +<?xml version="1.0"?> +<!-- + +Licensed to the Apache Software Foundation (ASF) under one or more +contributor license agreements. See the NOTICE file distributed with +this work for additional information regarding copyright ownership. +The ASF licenses this file to You under the Apache License, Version 2.0 +(the "License"); you may not use this file except in compliance with +the License. You may obtain a copy of the License at + +http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software +distributed under the License is distributed on an "AS IS" BASIS, +WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +See the License for the specific language governing permissions and +limitations under the License. + +--> +<mdl:TabBarPanel xmlns:fx="http://ns.adobe.com/mxml/2009"; + xmlns:js="library://ns.apache.org/flexjs/basic" + xmlns:mdl="library://ns.apache.org/flexjs/mdl" + xmlns:models="models.*"> + + <fx:Script> + <![CDATA[ + import org.apache.flex.mdl.materialIcons.MaterialIconType; + ]]> + </fx:Script> + + <mdl:beads> + <js:ContainerDataBinding/> + </mdl:beads> + + <mdl:model> + <models:MenuModel id="blogMenuModel"/> + </mdl:model> + + <mdl:NavigationLayout className="demo-blog" fixedDrawer="true"> + <mdl:NavigationLayoutContent> + <mdl:Grid className="demo-blog__posts"> + + <mdl:Card className="coffee-pic"> + <mdl:beads> + <mdl:GridCellBehaviour column="8"/> + </mdl:beads> + <mdl:CardMedia> + <mdl:beads> + <js:InnerHTML> + <![CDATA[<h3><a href="entry.html">Coffee Pic</a></h3>]]> + </js:InnerHTML> + <mdl:MdlTextColor textColor="grey-50"/> + </mdl:beads> + </mdl:CardMedia> + <mdl:CardSupportingText className="meta"> + <mdl:beads> + <mdl:MdlTextColor textColor="grey-600"/> + </mdl:beads> + <js:Div className="minilogo"/> + <js:Div> + <mdl:beads> + <js:InnerHTML> + <![CDATA[<strong>The Newist</strong><span>2 days ago</span>]]> + </js:InnerHTML> + </mdl:beads> + </js:Div> + </mdl:CardSupportingText> + </mdl:Card> + + <mdl:Card className="something-else"> + <mdl:beads> + <mdl:GridCellBehaviour column="8" columnDesktop="4"/> + </mdl:beads> + <mdl:Button ripple="true" fab="true" accent="true"> + <!--<mdl:materialIcon> + <mdl:MaterialIcon text="{MaterialIconType.ADD}"> + <mdl:beads> + <mdl:MdlTextColor textColor="white"/> + </mdl:beads> + </mdl:MaterialIcon> + </mdl:materialIcon>--> + <mdl:beads> + <js:InnerHTML> + <![CDATA[<i class="material-icons mdl-color-text--white" role="presentation">add</i><span class="visuallyhidden">add</span>]]> + </js:InnerHTML> + </mdl:beads> + </mdl:Button> + <mdl:CardMedia> + <mdl:beads> + <mdl:MdlColor color="white"/> + <mdl:MdlTextColor textColor="grey-600"/> + </mdl:beads> + <js:Image url="images/logo.png"/> + <js:TextNode text="+1,337"/> + </mdl:CardMedia> + <mdl:CardSupportingText className="meta meta-fill"> + <mdl:beads> + <mdl:MdlTextColor textColor="grey-600"/> + </mdl:beads> + <js:Div> + <mdl:beads> + <js:InnerHTML> + <![CDATA[<strong>The Newist</strong>]]> + </js:InnerHTML> + </mdl:beads> + </js:Div> + <mdl:Menu dataMdlFor="menubtn" ripple="true" bottom="true" left="false" + labelField="label" className="customMenuItemRenderer"> + <mdl:beads> + <js:ConstantBinding + sourceID="blogMenuModel" + sourcePropertyName="menuItems" + destinationPropertyName="dataProvider" /> + </mdl:beads> + </mdl:Menu> + <mdl:Button id="menubtn" icon="true" ripple="true"> + <mdl:beads> + <js:InnerHTML> + <![CDATA[<i class="material-icons mdl-color-text--white" role="presentation">more_vert</i><span class="visuallyhidden">show menu</span>]]> + </js:InnerHTML> + </mdl:beads> + </mdl:Button> + </mdl:CardSupportingText> + </mdl:Card> + + <mdl:Card className="on-the-road-again"> + <mdl:beads> + <mdl:GridCellBehaviour column="12"/> + </mdl:beads> + <mdl:CardMedia> + <mdl:beads> + <js:InnerHTML> + <![CDATA[<h3><a href="entry.html">On the road again</a></h3>]]> + </js:InnerHTML> + <mdl:MdlTextColor textColor="grey-50"/> + </mdl:beads> + </mdl:CardMedia> + <mdl:CardSupportingText> + <mdl:beads> + <js:InnerHTML> + <![CDATA[Enim labore aliqua consequat ut quis ad occaecat aliquip incididunt. Sunt nulla eu enim irure enim nostrud aliqua consectetur ad consectetur sunt ullamco officia. Ex officia laborum et consequat duis.]]> + </js:InnerHTML> + <mdl:MdlTextColor textColor="grey-600"/> + </mdl:beads> + </mdl:CardSupportingText> + <mdl:CardSupportingText className="meta"> + <js:Div className="minilogo"/> + <js:Div> + <mdl:beads> + <js:InnerHTML> + <![CDATA[<strong>The Newist</strong><span>2 days ago</span>]]> + </js:InnerHTML> + </mdl:beads> + </js:Div> + </mdl:CardSupportingText> + </mdl:Card> + + <mdl:Card className="amazing"> + <mdl:beads> + <mdl:GridCellBehaviour column="12"/> + </mdl:beads> + <mdl:CardTitle> + <mdl:beads> + <js:InnerHTML> + <![CDATA[<h3 class="quote"><a href="entry.html">I couldnât take any pictures but this was an amazing thingâ¦</a></h3>]]> + </js:InnerHTML> + <mdl:MdlTextColor textColor="grey-50"/> + </mdl:beads> + </mdl:CardTitle> + <mdl:CardSupportingText> + <mdl:beads> + <js:InnerHTML> + <![CDATA[Enim labore aliqua consequat ut quis ad occaecat aliquip incididunt. Sunt nulla eu enim irure enim nostrud aliqua consectetur ad consectetur sunt ullamco officia. Ex officia laborum et consequat duis.]]> + </js:InnerHTML> + <mdl:MdlTextColor textColor="grey-600"/> + </mdl:beads> + </mdl:CardSupportingText> + <mdl:CardSupportingText className="meta"> + <js:Div className="minilogo"/> + <js:Div> + <mdl:beads> + <js:InnerHTML> + <![CDATA[<strong>The Newist</strong><span>2 days ago</span>]]> + </js:InnerHTML> + </mdl:beads> + </js:Div> + </mdl:CardSupportingText> + </mdl:Card> + + <mdl:Card className="shopping"> + <mdl:beads> + <mdl:GridCellBehaviour column="12"/> + </mdl:beads> + <mdl:CardMedia> + <mdl:beads> + <js:InnerHTML> + <![CDATA[<h3><a href="entry.html">Shopping</a></h3>]]> + </js:InnerHTML> + <mdl:MdlTextColor textColor="grey-50"/> + </mdl:beads> + </mdl:CardMedia> + <mdl:CardSupportingText> + <mdl:beads> + <js:InnerHTML> + <![CDATA[Enim labore aliqua consequat ut quis ad occaecat aliquip incididunt. Sunt nulla eu enim irure enim nostrud aliqua consectetur ad consectetur sunt ullamco officia. Ex officia laborum et consequat duis.]]> + </js:InnerHTML> + <mdl:MdlTextColor textColor="grey-600"/> + </mdl:beads> + </mdl:CardSupportingText> + <mdl:CardSupportingText className="meta"> + <js:Div className="minilogo"/> + <js:Div> + <mdl:beads> + <js:InnerHTML> + <![CDATA[<strong>The Newist</strong><span>2 days ago</span>]]> + </js:InnerHTML> + </mdl:beads> + </js:Div> + </mdl:CardSupportingText> + </mdl:Card> + <mdl:Footer mini="true" width="500"> + + <mdl:FooterLeftSection> + <mdl:FooterLogo text="Title"/> + <mdl:FooterLinkList className="footerMiniLinkListItemRenderer"> + <mdl:beads> + <js:ConstantBinding + sourceID="model" + sourcePropertyName="links" + destinationPropertyName="dataProvider" /> + </mdl:beads> + </mdl:FooterLinkList> + </mdl:FooterLeftSection> + + <mdl:FooterRightSection> + <mdl:FooterSocialButton>1</mdl:FooterSocialButton> + <mdl:FooterSocialButton>2</mdl:FooterSocialButton> + <mdl:FooterSocialButton>3</mdl:FooterSocialButton> + </mdl:FooterRightSection> + </mdl:Footer> + </mdl:Grid> + </mdl:NavigationLayoutContent> + </mdl:NavigationLayout> +</mdl:TabBarPanel> http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/6fc7f38c/examples/flexjs/MDLExample/src/main/flex/MainNavigation.mxml ---------------------------------------------------------------------- diff --git a/examples/flexjs/MDLExample/src/main/flex/MainNavigation.mxml b/examples/flexjs/MDLExample/src/main/flex/MainNavigation.mxml index 89b2f2d..293f09c 100644 --- a/examples/flexjs/MDLExample/src/main/flex/MainNavigation.mxml +++ b/examples/flexjs/MDLExample/src/main/flex/MainNavigation.mxml @@ -72,7 +72,8 @@ limitations under the License. </mdl:Drawer> <mdl:NavigationLayoutContent> - <local:Cards id="cards_panel" isActive="true"/> + <local:Blog id="blog_panel" isActive="true"/> + <local:Cards id="cards_panel"/> <local:Chips id="chips_panel" /> <local:Sliders id="sliders_panel" /> <local:Grids id="grids_panel"/> http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/6fc7f38c/examples/flexjs/MDLExample/src/main/flex/models/MainNavigationModel.as ---------------------------------------------------------------------- diff --git a/examples/flexjs/MDLExample/src/main/flex/models/MainNavigationModel.as b/examples/flexjs/MDLExample/src/main/flex/models/MainNavigationModel.as index 3039538..efe96b1 100644 --- a/examples/flexjs/MDLExample/src/main/flex/models/MainNavigationModel.as +++ b/examples/flexjs/MDLExample/src/main/flex/models/MainNavigationModel.as @@ -53,6 +53,7 @@ package models } private var _componentsTabs:Array = [ + new NavigationLinkVO("Blog", "blog_panel"), new NavigationLinkVO("Cards", "cards_panel"), new NavigationLinkVO("Chips", "chips_panel"), new NavigationLinkVO("Sliders", "sliders_panel"), http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/6fc7f38c/examples/flexjs/MDLExample/src/main/resources/images/android-desktop.png ---------------------------------------------------------------------- diff --git a/examples/flexjs/MDLExample/src/main/resources/images/android-desktop.png b/examples/flexjs/MDLExample/src/main/resources/images/android-desktop.png new file mode 100644 index 0000000..72a7f12 Binary files /dev/null and b/examples/flexjs/MDLExample/src/main/resources/images/android-desktop.png differ http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/6fc7f38c/examples/flexjs/MDLExample/src/main/resources/images/avatar.png ---------------------------------------------------------------------- diff --git a/examples/flexjs/MDLExample/src/main/resources/images/avatar.png b/examples/flexjs/MDLExample/src/main/resources/images/avatar.png new file mode 100644 index 0000000..19a2a5e Binary files /dev/null and b/examples/flexjs/MDLExample/src/main/resources/images/avatar.png differ http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/6fc7f38c/examples/flexjs/MDLExample/src/main/resources/images/bg_1024.jpg ---------------------------------------------------------------------- diff --git a/examples/flexjs/MDLExample/src/main/resources/images/bg_1024.jpg b/examples/flexjs/MDLExample/src/main/resources/images/bg_1024.jpg new file mode 100644 index 0000000..2b86360 Binary files /dev/null and b/examples/flexjs/MDLExample/src/main/resources/images/bg_1024.jpg differ http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/6fc7f38c/examples/flexjs/MDLExample/src/main/resources/images/bg_2048.jpg ---------------------------------------------------------------------- diff --git a/examples/flexjs/MDLExample/src/main/resources/images/bg_2048.jpg b/examples/flexjs/MDLExample/src/main/resources/images/bg_2048.jpg new file mode 100644 index 0000000..0510c93 Binary files /dev/null and b/examples/flexjs/MDLExample/src/main/resources/images/bg_2048.jpg differ http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/6fc7f38c/examples/flexjs/MDLExample/src/main/resources/images/bg_2880.jpg ---------------------------------------------------------------------- diff --git a/examples/flexjs/MDLExample/src/main/resources/images/bg_2880.jpg b/examples/flexjs/MDLExample/src/main/resources/images/bg_2880.jpg new file mode 100644 index 0000000..e4f5201 Binary files /dev/null and b/examples/flexjs/MDLExample/src/main/resources/images/bg_2880.jpg differ http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/6fc7f38c/examples/flexjs/MDLExample/src/main/resources/images/co1.jpg ---------------------------------------------------------------------- diff --git a/examples/flexjs/MDLExample/src/main/resources/images/co1.jpg b/examples/flexjs/MDLExample/src/main/resources/images/co1.jpg new file mode 100644 index 0000000..b9ed797 Binary files /dev/null and b/examples/flexjs/MDLExample/src/main/resources/images/co1.jpg differ http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/6fc7f38c/examples/flexjs/MDLExample/src/main/resources/images/co2.jpg ---------------------------------------------------------------------- diff --git a/examples/flexjs/MDLExample/src/main/resources/images/co2.jpg b/examples/flexjs/MDLExample/src/main/resources/images/co2.jpg new file mode 100644 index 0000000..2b8844c Binary files /dev/null and b/examples/flexjs/MDLExample/src/main/resources/images/co2.jpg differ http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/6fc7f38c/examples/flexjs/MDLExample/src/main/resources/images/coffee.jpg ---------------------------------------------------------------------- diff --git a/examples/flexjs/MDLExample/src/main/resources/images/coffee.jpg b/examples/flexjs/MDLExample/src/main/resources/images/coffee.jpg new file mode 100644 index 0000000..1eaec2f Binary files /dev/null and b/examples/flexjs/MDLExample/src/main/resources/images/coffee.jpg differ http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/6fc7f38c/examples/flexjs/MDLExample/src/main/resources/images/favicon.png ---------------------------------------------------------------------- diff --git a/examples/flexjs/MDLExample/src/main/resources/images/favicon.png b/examples/flexjs/MDLExample/src/main/resources/images/favicon.png new file mode 100644 index 0000000..6ebb809 Binary files /dev/null and b/examples/flexjs/MDLExample/src/main/resources/images/favicon.png differ http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/6fc7f38c/examples/flexjs/MDLExample/src/main/resources/images/ios-desktop.png ---------------------------------------------------------------------- diff --git a/examples/flexjs/MDLExample/src/main/resources/images/ios-desktop.png b/examples/flexjs/MDLExample/src/main/resources/images/ios-desktop.png new file mode 100644 index 0000000..de5d8fa Binary files /dev/null and b/examples/flexjs/MDLExample/src/main/resources/images/ios-desktop.png differ http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/6fc7f38c/examples/flexjs/MDLExample/src/main/resources/images/logo.png ---------------------------------------------------------------------- diff --git a/examples/flexjs/MDLExample/src/main/resources/images/logo.png b/examples/flexjs/MDLExample/src/main/resources/images/logo.png new file mode 100644 index 0000000..8b20653 Binary files /dev/null and b/examples/flexjs/MDLExample/src/main/resources/images/logo.png differ http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/6fc7f38c/examples/flexjs/MDLExample/src/main/resources/images/road.jpg ---------------------------------------------------------------------- diff --git a/examples/flexjs/MDLExample/src/main/resources/images/road.jpg b/examples/flexjs/MDLExample/src/main/resources/images/road.jpg new file mode 100644 index 0000000..3217714 Binary files /dev/null and b/examples/flexjs/MDLExample/src/main/resources/images/road.jpg differ http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/6fc7f38c/examples/flexjs/MDLExample/src/main/resources/images/road_big.jpg ---------------------------------------------------------------------- diff --git a/examples/flexjs/MDLExample/src/main/resources/images/road_big.jpg b/examples/flexjs/MDLExample/src/main/resources/images/road_big.jpg new file mode 100644 index 0000000..2cadbc5 Binary files /dev/null and b/examples/flexjs/MDLExample/src/main/resources/images/road_big.jpg differ http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/6fc7f38c/examples/flexjs/MDLExample/src/main/resources/images/shopping.jpg ---------------------------------------------------------------------- diff --git a/examples/flexjs/MDLExample/src/main/resources/images/shopping.jpg b/examples/flexjs/MDLExample/src/main/resources/images/shopping.jpg new file mode 100644 index 0000000..56f5114 Binary files /dev/null and b/examples/flexjs/MDLExample/src/main/resources/images/shopping.jpg differ http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/6fc7f38c/examples/flexjs/MDLExample/src/main/resources/mdl-styles.css ---------------------------------------------------------------------- diff --git a/examples/flexjs/MDLExample/src/main/resources/mdl-styles.css b/examples/flexjs/MDLExample/src/main/resources/mdl-styles.css index f9e809c..01dbd35 100644 --- a/examples/flexjs/MDLExample/src/main/resources/mdl-styles.css +++ b/examples/flexjs/MDLExample/src/main/resources/mdl-styles.css @@ -201,4 +201,386 @@ js|Image /* Icons */ -.material-icons.orange600 { color: #FB8C00; } \ No newline at end of file +.material-icons.orange600 { color: #FB8C00; } + + + + + + + +.demo-blog::before { + background-size: cover; + background-attachment: fixed; + content: ''; + will-change: transform; + z-index: -1; + left: 0; + right: 0; + bottom: 0; + top: 0; + position: fixed; +} +/*@media (max-width: 512px) and (min-resolution: 1.5dppx), + (max-width: 1024px) and (max-resolution: 1.5dppx) { + body::before { + background-image: url('images/bg_1024.jpg'); + } +} +@media (min-width: 513px) and (max-width: 1024px) and (min-resolution: 1.5dppx), + (min-width: 1025px) and (max-width: 2048px) and (max-resolution: 1.5dppx) { + body::before { + background-image: url('images/bg_2048.jpg'); + } +} +@media (min-width: 1025px) and (min-resolution: 1.5dppx), + (min-width: 2049px) and (max-resolution: 1.5dppx) { + body::before { + background-image: url('images/bg_2880.jpg'); + } +}*/ + +.demo-blog { + font-family: 'Roboto', 'Helvetica', sans-serif; + background-image: url('images/bg_2048.jpg'); +} +.demo-blog .demo-blog__posts { + max-width: 900px; + padding: 0; + display: flex; + width: 100%; + margin: 0 auto; + flex-shrink: 0; +} + +.demo-blog.mdl-layout .mdl-layout__content { + padding-top: 230px; + position: relative; + -webkit-overflow-scrolling: touch; +} +.demo-blog .mdl-card { + display: flex; + flex-direction: column; + align-items: stretch; + min-height: 360px; +} +.demo-blog .mdl-card__title { + padding: 16px; + flex-grow: 1; +} +.demo-blog .mdl-card__media { + box-sizing: border-box; + background-size: cover; + padding: 24px; + display: flex; + flex-grow: 1; + flex-direction: row; + align-items: flex-end; + cursor: pointer; +} +.demo-blog .mdl-card__media a, +.demo-blog .mdl-card__title a { + color: inherit; +} +.demo-blog .mdl-card__supporting-text { + width: 100%; + padding: 16px; + min-height: 64px; + display: flex; + align-items: center; +} +.demo-blog .mdl-card__supporting-text strong { + font-weight: 400; +} +.demo-blog .mdl-card__media ~ .mdl-card__supporting-text { + min-height: 64px; +} +.demo-blog .mdl-card__supporting-text:not(:last-child) { + box-sizing: border-box; + min-height: 76px; +} +/*.demo-blog:not(.demo-blog--blogpost) .mdl-card__supporting-text ~ .mdl-card__supporting-text { + border-top: 1px solid rgba(0,0,0,0.1); +} +.demo-blog .mdl-card__actions:first-child { + margin-left: 0; +}*/ + +.demo-blog .meta { + box-sizing: border-box; + padding: 16px; + display: flex; + flex-direction: row; + align-items: center; + justify-content: flex-start; + height: auto; +} +.demo-blog .meta > .meta__favorites{ + flex-direction: row; + margin: 0 8px; + font-size: 13px; + font-weight: 500; +} +.demo-blog .meta > .meta__favorites .material-icons { + font-size: 2em; + cursor: pointer; + margin-left: 12px; +} +.demo-blog .mdl-card .meta.meta--fill { + justify-content: space-between; +} + +.demo-blog .meta > * { + display: flex; + flex-direction: column; +} + +.demo-blog.is-small-screen .demo-blog__posts > .mdl-card.coffee-pic { + order: 0; +} +.demo-blog.is-small-screen .demo-blog__posts > .mdl-card.something-else { + order: -1; +} +.demo-blog .coffee-pic .mdl-card__media { + background-image: url('images/coffee.jpg'); +} +.demo-blog .something-else .mdl-card__media { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} + +.demo-blog .something-else .mdl-card__media { + font-size: 13px; + font-weight: 500; + border-top-left-radius: 2px; + border-top-right-radius: 2px; +} +.demo-blog .something-else .mdl-card__media img { + width: 64px; + height: 64px; + margin-bottom: 10px; +} +.demo-blog .something-else .mdl-card__supporting-text { + background-color: #F5F5F5; + border-bottom-left-radius: 2px; + border-bottom-right-radius: 2px; +} +.demo-blog .on-the-road-again .mdl-card__media { + background-image: url('images/road.jpg'); +} +.demo-blog .shopping .mdl-card__media { + background-image: url('images/shopping.jpg'); +} +.demo-blog .demo-blog__posts > .demo-nav { + margin: 12px 15px; + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; + color: white; + font-weight: 500; +} +.demo-blog .demo-blog__posts > .demo-nav > .demo-nav__button { + color: white; + text-decoration: none; +} +.demo-blog .demo-blog__posts > .demo-nav .mdl-button { + color: rgba(0,0,0,0.54); + background-color: white; +} +/*.demo-blog .demo-blog__posts > .demo-nav > .demo-nav__button:first-child .mdl-button { + margin-right: 16px; +} +.demo-blog .demo-blog__posts > .demo-nav > .demo-nav__button:last-child .mdl-button { + margin-left: 16px; +} +*/ +.demo-blog .mdl-card > a { + color: inherit; + text-decoration: none; + font-weight: inherit; +} +.demo-blog .mdl-card h3 { + margin: 0; +} +.demo-blog .mdl-card h3 a { + text-decoration: none; +} +/*.demo-blog .mdl-card h3.quote:before, .demo-blog .mdl-card h3.quote:after { + display: block; + font-size: 3em; + margin-top: 0.5em; +} +.demo-blog .mdl-card h3.quote:before { + content: 'â'; +} +.demo-blog .mdl-card h3.quote:after { + content: 'â'; +}*/ +.demo-blog--blogpost .custom-header { + background-color: transparent; +} +.demo-blog--blogpost .demo-blog__posts > .mdl-card .mdl-card__media { + background-image: url('images/road_big.jpg'); + height: 280px; +} +.demo-blog--blogpost .comments { + background-color: #EEE; +} +.demo-blog--blogpost .meta > * { + align-items: center; +} +.demo-blog--blogpost .meta + .mdl-card__supporting-text { + border: 0; + display: flex; + flex-direction: column; +} +.demo-blog--blogpost .meta + .mdl-card__supporting-text p { + max-width: 512px; + margin: 16px auto; + font-size: 16px; + line-height: 28px; +} +.demo-blog--blogpost .comments { + display: flex; + flex-direction: column; + justify-content: flex-start; + align-items: stretch; + padding: 32px; + box-sizing: border-box; +} +.demo-blog--blogpost .comments > form { + display: flex; + flex-direction: row; + margin-bottom: 16px; +} +.demo-blog--blogpost .comments > form .mdl-textfield { + flex-grow: 1; + margin-right: 16px; + color: rgb(97, 97, 97); +} +/* Workaround for Firefox. + * User agent stylesheet kept overwriting the font in FF only. + */ +.demo-blog--blogpost .comments > form .mdl-textfield .mdl-textfield__input { + font-family: 'Roboto', 'Helvetica', sans-serif; +} +.demo-blog--blogpost .comments > form .mdl-textfield input, +.demo-blog--blogpost .comments > form .mdl-textfield textarea { + resize: none; +} +.demo-blog--blogpost .comments > form button { + margin-top: 20px; + background-color: rgba(0, 0, 0, 0.24); + color: white; +} +.demo-blog--blogpost .comments .comment { + display: flex; + flex-direction: column; + align-items: stretch; +} +.demo-blog--blogpost .comments .comment > .comment__header { + display: flex; + flex-direction: row; + align-items: center; + margin-bottom: 16px; +} +.demo-blog--blogpost .comments .comment > .comment__header > .comment__avatar { + width: 48px; + height: 48px; + border-radius: 24px; + margin-right: 16px; +} +.demo-blog--blogpost .comments .comment > .comment__header > .comment__author { + flex-grow: 1; + display: flex; + flex-direction: column; +} +.demo-blog--blogpost .comments .comment > .comment__text { + line-height: 1.5em; +} +.demo-blog--blogpost .comments .comment > .comment__actions { + display: flex; + flex-direction: row; + justify-content: flex-start; + align-items: center; + font-size: 0.8em; + margin-top: 16px; +} +.demo-blog--blogpost .comments .comment > .comment__actions button { + margin-right: 16px; + color: rgba(0, 0, 0, 0.24); +} +.demo-blog--blogpost .comments .comment > .comment__answers { + padding-top: 32px; + padding-left: 48px; +} + +.demo-blog--blogpost .demo-back { + position: absolute; + top: 16px; + left: 16px; + color: white; + z-index: 9999; +} +.demo-blog .section-spacer { + flex-grow: 1; +} +.demo-blog .something-else { + overflow: visible; + z-index: 10; +} +.demo-blog .amazing .mdl-card__title { + background-color: #263238; +} +.demo-blog .minilogo { + width: 44px; + height: 44px; + background-image: url('images/avatar.png'); + background-position: center; + background-repeat: no-repeat; + background-size: 50%; + border-radius: 22px; + background-color: #F5F5F5; +} +/* Fixes for IE 10 */ +.mdl-grid { + display: flex !important; +} + +.social-btn { + background-position: center; + background-size: contain; + background-repeat: no-repeat; + background-color: transparent; + margin: 0 16px; + width: 24px; + height: 24px; + cursor: pointer; + opacity: 0.46; + border-radius: 2px; +} +.social-btn__twitter { + background-image: url('https://www.gstatic.com/images/icons/material/system/2x/post_twitter_black_24dp.png'); +} +.social-btn__blogger { + background-image: url('https://www.gstatic.com/images/icons/material/system/2x/post_facebook_black_24dp.png'); +} +.social-btn__gplus { + background-image: url('https://www.gstatic.com/images/icons/material/system/2x/post_gplus_black_24dp.png'); +} +.social-btn__share { + color: rgba(0, 0, 0, 0.54); + background: transparent; +} + +.demo-blog .mdl-mini-footer { + margin-top: 80px; + height: 120px; + padding: 40px; + align-items: center; + background-color: white; + box-sizing: border-box; +}
