css - Can't style element in shadow dom in media query -
in styles/app-theme.html
trying change menu icon size of paper-drawer-panel
in media query. element in index.html. since in shadow dom, can't seem access it. tried with:
probably not relevant, here index.html:
<template is="dom-bind" id="app"> <paper-drawer-panel force-narrow="true"> <div drawer> <drawer-custom></drawer-custom> </div> <div main> <div id="header-v-center"> <paper-icon-button id="paper-toggle" icon="menu" paper-drawer-toggle>
@media (max-width: 600px) { iron-icon#icon::shadow { height: 6px; width: 5px; } }
and
@media (max-width: 600px) { :root { --iron-icon-height: 6px; --iron-icon-width: 50px; } }
to no success. suggestions?
polymer uses shim (a partial polyfill) evaluate custom properties. such, aren't automatically recalculated. can do, however, use iron-media-query (or directly use matchmedia) know when call updatestyles on element(s) need updating.
here's example of using updatestyles:
polymer({ is: 'seed-element', properties: { largescreen: { type: boolean, observer: '_largescreenchanged' } }, _largescreenchanged: function(newvalue) { this.updatestyles({ '--h1-color': (newvalue ? 'red' : 'blue') }); } });
<dom-module id="seed-element"> <template> <style> h1 { color: var(--h1-color, red); } </style> <h1>header</h1> <iron-media-query query="(max-width: 600px)" query-matches="{{largescreen}}"></iron-media-query> </template> </dom-module> <seed-element id="topmenu"></seed-element>
Comments
Post a Comment