news-post-element

news-post.html

<link rel="import" href="../core-pages/core-pages.html">
<link rel="import" href="../paper-button/paper-button.html">
<link rel="import" href="../core-icons/core-icons.html">
<link rel="import" href="../paper-icon-button/paper-icon-button.html">
<link rel="import" href="../core-icon-button/core-icon-button.html">

<polymer-element name="news-post">

  <template>
    <style>    
      :host {
        position: relative;
        width: 100%;
        height: 100%;
        box-sizing: border-box;
      }
      #news_card {
        width: 460px;
        height: 120px;
        border-radius: 2px;
        box-shadow: rgba(0, 0, 0, 0.0980392) 0px 2px 4px, rgba(0, 0, 0, 0.0980392) 0px 0px 3px;
        left: 0px;
        top: 0px;
        position: relative;
        background-color: rgb(151, 249, 116);
      }
      #left_page {
        width: 370px;
        height: 120px;
      }
      #right_page {
        width: 90px;
        height: 120px;
      }
      #title_section {
        width: 340px;
        height: 70px;
        padding: 15px;
        font-size: 20px;
      }
      #author_domain_section {
        width: 370px;
        height: 30px;
      }
      #favorite_section {
        width: 90px;
        height: 60px;
      }
      #comment_section {
        width: 90px;
        height: 60px;
      }
      #author_button {
        margin-right: 60px;
      }
      #domain_button {
        margin-left: 60px;
      }
      #favorite_count_icon_button {
        width: 60px;
        height: 20px;
        margin-top: -15px;
      }
      #favorite_paper_icon_button {
        width: 40px;
        height: 30px;
      }
      #comment_paper_icon_button {
        width: 40px;
        height: 30px;
      }
      #comment_count_icon_button {
        width: 60px;
        height: 30px;
        margin-top: -15px;
      }
    </style>
    <core-card id="news_card" horizontal layout>
      <core-pages id="left_page" vertical layout>
        <section id="title_section">This is an awesome news and you're so gonna read it</section>
        <section id="author_domain_section" horizontal layout center center-justified>
          <paper-button id="author_button">author</paper-button>
          <paper-button id="domain_button">domain</paper-button>
        </section>
      </core-pages>
      <core-pages id="right_page" vertical layout>
        <section id="favorite_section" vertical layout center center-justified>
          <paper-icon-button icon="favorite-outline" id="favorite_paper_icon_button" center-justified horizontal layout></paper-icon-button>
          <core-icon-button id="favorite_count_icon_button" icon="menu" theme="core-light-theme" center horizontal layout center-justified>44</core-icon-button>
        </section>
        <section id="comment_section" center-justified center vertical layout>
          <paper-icon-button icon="question-answer" id="comment_paper_icon_button" horizontal layout center-justified></paper-icon-button>
          <paper-button id="comment_count_icon_button" center center-justified vertical layout>224</paper-button>
        </section>
      </core-pages>
    </core-card>
  </template>

  <script>

    Polymer({
      
    });

  </script>

</polymer-element>

A news-card element for Polymer