UNPKG

api-console-assets

Version:

This repo only exists to publish api console components to npm

298 lines (249 loc) 7.05 kB
<!-- @license Copyright (c) 2015 The Polymer Project Authors. All rights reserved. This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt Code distributed by Google as part of the polymer project is also subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt --> <link rel="import" href="../bower_components/polymer/polymer.html"> <link rel="import" href="../bower_components/iron-flex-layout/iron-flex-layout.html"> <link rel="import" href="../bower_components/paper-icon-button/paper-icon-button.html"> <link rel="import" href="../bower_components/paper-fab/paper-fab.html"> <link rel="import" href="../bower_components/iron-icons/iron-icons.html"> <link rel="import" href="shrine-simple-item.html"> <dom-module id="shrine-detail"> <template> <style> :host { @apply(--layout-horizontal); -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } .items { -webkit-flex: 1 1 35%; flex: 1 1 35%; width: 35%; overflow-y: auto; background-color: #f3f3f3; padding-left: 10px; padding-right: 10px; box-sizing: border-box; } .itemsGrid { @apply(--layout-horizontal); @apply(--layout-wrap); @apply(--layout-center-justified); margin-top: 10px; } .itemsGrid > .item { -webkit-flex: 1 calc(50% - 20px); flex: 1 calc(50% - 20px); max-width: calc(50% - 20px); height: 15vmax; min-height: 100px; margin: 10px; text-decoration: none; background-color: white; } .detailSection { @apply(--layout); width: 65%; -webkit-flex: 1 1 65%; flex: 1 1 65%; } .detailGrid { width: 100%; padding: 128px 0 64px; @apply(--layout-horizontal); @apply(--layout-wrap); @apply(--layout-center-justified); } .image { width: 40vmin; position: relative; } .image img { max-height: 100%; max-width: 100%; width: auto; } .content { width: 400px; } .store { margin-top: 30px; border-top: 1px solid #ddd; } .store h3 { font-size: 13px; font-weight: 500; } .info { color: rgba(255, 223, 223, 1); position: absolute; top: 0; right: 0; } .quantitySelector { position: relative; display: inline-block; } .quantitySelector::after { display: block; content: '\25BC'; position: absolute; top: calc(50% - 8px); right: 10px; speak: none; -webkit-transform: scaleY(.6) scaleX(1); transform: scaleY(.6) scaleX(1); color: #666; pointer-events: none; } .quantitySelector select { -webkit-appearance: none; -moz-appearance: none; appearance: none; padding: 10px 20px; border: 1px solid rgba(0, 0, 0, .2); background-color: white; border-radius: 0; position: relative; min-width: 180px; font-size: 20px; } .quantitySelector select:focus { outline: 0; border-color: rgba(0, 0, 0, .5); } h1 { font-family: 'Abril Fatface', cursive; font-size: 2.5em; font-weight: 300; color: #0a3142; } p { font-size: 13px; font-weight: 300; line-height: 20px; color: #333; } paper-fab { --paper-fab-background: #31f0ef; --paper-fab-keyboard-focus-background: #21e0df; color: #0a3142; display: -webkit-inline-flex; display: inline-flex; margin-left: 20px; --paper-fab-iron-icon: { width: 20px; height: 20px; }; } /** * Desktop small, tablet */ @media (max-width: 1200px) { :host { @apply(--layout-center); @apply(--layout-vertical-reverse); } .items { @apply(--layout-flex-none); width: 100vw; } .itemsGrid > .item { -webkit-flex: 1 calc(33% - 20px); flex: 1 calc(33% - 20px); max-width: calc(33% - 20px); height: 40vmin; } .detailSection { @apply(--layout-flex-none); width: 90vw; margin-left: 10px; margin-right: 10px; } } /** * Phone */ @media (max-width: 400px) { .detailSection { @apply(--layout-flex-none); } .itemsGrid > .item { -webkit-flex: 1 calc(50% - 20px); flex: 1 calc(50% - 20px); max-width: calc(50% - 20px); } h1 { text-align: center; } .detailGrid { width: 100%; padding: 32px 0 64px; } } </style> <div class="items"> <div class="itemsGrid"> <template is="dom-repeat" items="[[relatedItems]]"> <a href$="#[[section]]/[[item.id]]" title$="[[item.title]]" class="item"> <shrine-simple-item item="[[item]]"></shrine-simple-item> </a> </template> </div> </div> <div class="detailSection"> <div class="detailGrid"> <div class="image"> <img id="img"> <div class="info"> <paper-icon-button icon="info-outline" aria-label="More information about the item"></paper-icon-button> </div> </div> <div class="content"> <h1>[[item.title]]</h1> <p>[[item.description]]</p> <div class="quantitySelector"> <select aria-label="Change number of items"> <option value="1">Quantity 1</option> <option value="2">Quantity 2</option> <option value="3">Quantity 3</option> <option value="4">Quantity 4</option> <option value="5">Quantity 5</option> </select> </div> <paper-fab mini icon="add-shopping-cart" aria-label="add to the shopping cart"></paper-fab> <div class="store"> <h3>[[item.storeName]]</h3> <p>[[item.storeDescription]]</p> </div> </div> </div> </div> </template> <script> Polymer({ is: 'shrine-detail', properties: { item: { type: Object, observer: '_itemChanged' }, section: { type: String }, relatedItems: { type: Array } }, _itemChanged: function(item) { this.$.img.src = ''; this.$.img.src = item.imageUrl; } }); </script> </dom-module>