<html><head><link rel="import" href="../../../iron-flex-layout/iron-flex-layout.html">
<link rel="import" href="../../../iron-selector/iron-selector.html">

<link rel="import" href="device-view.html">


</head><body><dom-module id="device-layout-viewer">

  <template>

    <style>:host{@apply (--layout-horizontal);overflow:hidden;}.canvas{@apply (--layout-flex);@apply (--layout-horizontal);@apply (--layout-center-center);position:relative;overflow:auto;}.canvas[device=laptop]{overflow:hidden;}#views:not([device=all]){@apply (--layout-horizontal);@apply (--layout-center-center);margin:auto 0;}#views:not([device=all]) device-view:not(.iron-selected){display:none;}#views[device=all]{display:block;width:1000px;height:600px;margin-left:32px;}#views[device=all] device-view{position:absolute;-webkit-transform-origin:left top;transform-origin:left top;}#views:not([device=all]) device-view[device=laptop]{@apply (--layout-fit);width:auto;height:auto;}#views[device=all] device-view[device=laptop]{-webkit-transform:translate3d(0px, 40px, 0) scale(0.5);transform:translate3d(0px, 40px, 0) scale(0.5);}#views[device=all] device-view[device=tablet]{-webkit-transform:translate3d(380px, 130px, 0) scale(0.5);transform:translate3d(380px, 130px, 0) scale(0.5);}#views[device=all] device-view[device=phone]{-webkit-transform:translate3d(800px, 110px, 0) scale(0.5);transform:translate3d(800px, 110px, 0) scale(0.5);}@media (max-width: 1024px){#views:not([device=all]):not([device=laptop]){width:1400px;height:800px;-webkit-transform:scale(0.5);transform:scale(0.5);@apply (--layout-flex-none);}#views[device=all]{width:500px;height:300px;margin-left:-64px;-webkit-transform-origin:0 0;transform-origin:0 0;-webkit-transform:scale(0.6);transform:scale(0.6);}}@media (max-width: 600px){#views:not([device=all]):not([device=laptop]){width:1400px;height:800px;-webkit-transform:scale(0.5);transform:scale(0.5);@apply (--layout-flex-none);}#views[device=all]{width:250px;height:150px;margin-left:-80px;-webkit-transform-origin:0 0;transform-origin:0 0;-webkit-transform:scale(0.35);transform:scale(0.35);}}</style>

    <div class="canvas" device$="{{device}}">

      <iron-selector id="views" selected="{{device}}" attr-for-selected="device" selected-item="{{selectedView}}" device$="{{device}}" activate-event="">

        <device-view device="laptop" src="{{src}}"></device-view>
        <device-view device="tablet" src="{{src}}" landscape=""></device-view>
        <device-view device="phone" src="{{src}}"></device-view>

      </iron-selector>

    </div>

  </template>

  <script>Polymer({is:"device-layout-viewer",properties:{src:String,device:{type:String,value:"all",observer:"_deviceChanged"}},_defaultLandscapes:{laptop:!1,tablet:!0,phone:!1},toggleLandscape:function(){this.selectedView&&this.selectedView.toggleLandscape()},_deviceChanged:function(e){"all"===e&&this.$.views.items.forEach(function(e){e.landscape=this._defaultLandscapes[e.device]},this)}});</script>

</dom-module>
</body></html>