fix(dashboard): fix missing background color on graphics collapse tog…

…gle button

build/src/dashboard/elements/graphics/ncg-graphic.html

@@ -1 +1 @@
-<link rel="import" href="../../../../bower_components/iron-collapse/iron-collapse.html"><link rel="import" href="../../../../bower_components/iron-icons/hardware-icons.html"><link rel="import" href="../../../../bower_components/iron-icons/iron-icons.html"><link rel="import" href="../../../../bower_components/iron-media-query/iron-media-query.html"><link rel="import" href="../../../../bower_components/paper-button/paper-button.html"><link rel="import" href="ncg-graphic-instance.html"><dom-module id="ncg-graphic"><template><style include="nodecg-theme">:host{@apply --layout-vertical;@apply --layout-flex-none;white-space:nowrap}:host(:not(:last-child)){margin-bottom:20px}#details{@apply --layout-horizontal;@apply --layout-flex-none;height:60px}#indicator{@apply --layout-flex-none;background-color:#cacaca;width:9px}:host([worst-status=nominal]) #indicator{background-color:#00a651}:host([worst-status=out-of-date]) #indicator{background-color:#ffc700}#counter{@apply --layout-center-center;@apply --layout-flex-none;@apply --layout-horizontal;background-color:#525f78;color:#fff;font-size:24px;font-style:normal;font-weight:500;left:9px;line-height:normal;text-align:center;width:38px}#urlAndResolution{@apply --layout-flex;background-color:#525f78;margin-right:1px;min-width:0}#url{color:#fff;font-size:16px;font-style:normal;font-weight:500;letter-spacing:.018em;line-height:normal;max-width:100%;min-width:0;overflow:hidden;text-decoration:underline;text-overflow:ellipsis;text-transform:uppercase}#resolution{font-size:14px;font-style:normal;font-weight:500;line-height:normal;overflow:hidden;text-overflow:ellipsis}#copyButton,#reloadButton{--paper-button:{--nodecg-background-color:#6155BD};}#reloadButton iron-icon{--iron-icon-height:29px;--iron-icon-width:29px}#collapseButton{--paper-button:{background-color:#525f78};}#collapseButton iron-icon{--iron-icon-width:40px;--iron-icon-height:40px}paper-button{@apply --layout-center-center;@apply --layout-flex-none;@apply --layout-horizontal;border-radius:0;font-size:14px;font-style:normal;font-weight:500;line-height:normal;margin:0 1px;min-width:0;padding:0;width:60px}paper-button:last-child{margin-right:0}:host([responsive-mode=wide]) #urlAndResolution{@apply --layout-horizontal;@apply --layout-center;}:host([responsive-mode=wide]) #resolution{@apply --layout-flex-none;box-sizing:border-box;margin-left:auto;padding:0 4px;text-align:center;width:90px}:host([responsive-mode=wide]) #resolution:after,:host([responsive-mode=wide]) #resolution:before{background:#eff0ec;height:50px;width:1px}:host([responsive-mode=wide]) #reloadButton{width:115px}:host([responsive-mode=wide]) #reloadButton iron-icon{margin-left:-6px;margin-right:-1px}:host(:not([responsive-mode=wide])) #urlAndResolution{@apply --layout-center-justified;@apply --layout-start;@apply --layout-vertical;padding-right:6px}:host(:not([responsive-mode=narrow])) #copyButton{width:115px}:host([responsive-mode=narrow]) #copyButton-text{display:none}:host(:not([responsive-mode=wide])) #reloadButton-text{display:none}:host(:not([responsive-mode=narrow])) #counter{padding-right:8px}</style><iron-media-query query="(min-width: 641px)" query-matches="{{_wide}}"></iron-media-query><iron-media-query query="(min-width: 521px) and (max-width: 640px)" query-matches="{{_medium}}"></iron-media-query><iron-media-query query="(max-width: 520px)" query-matches="{{_narrow}}"></iron-media-query><div id="details"><div id="indicator"></div><div id="counter">[[_calcCount(graphic.singleInstance, instances)]]</div><div id="urlAndResolution"><a id="url" href$="[[_computeFullGraphicUrl(graphic.url)]]" target="_blank" title="[[_calcShortUrl(graphic.url)]]">[[_calcShortUrl(graphic.url)]]</a><div id="resolution">[[graphic.width]]x[[graphic.height]]</div></div><paper-button id="copyButton" data-clipboard-text$="[[_computeFullGraphicUrl(graphic.url)]]"><iron-icon icon="content-copy"></iron-icon><span id="copyButton-text"> Copy URL</span></paper-button><paper-button id="reloadButton" on-tap="reloadAll" disabled="[[_calcReloadAllDisabled(instances)]]"><iron-icon icon="refresh"></iron-icon><span id="reloadButton-text"> Reload</span></paper-button><paper-button id="collapseButton" on-tap="toggleCollapse"><iron-icon icon="[[_computeCollapseIcon(_collapseOpened)]]"></iron-icon></paper-button></div><iron-collapse id="instancesCollapse" opened="{{_collapseOpened}}" no-animation=""><template is="dom-repeat" items="[[instances]]" as="instance" mutable-data=""><ncg-graphic-instance responsive-mode="[[responsiveMode]]" graphic="[[graphic]]" instance="[[instance]]"></ncg-graphic-instance></template></iron-collapse></template><script src="ncg-graphic.js"></script></dom-module>
+<link rel="import" href="../../../../bower_components/iron-collapse/iron-collapse.html"><link rel="import" href="../../../../bower_components/iron-icons/hardware-icons.html"><link rel="import" href="../../../../bower_components/iron-icons/iron-icons.html"><link rel="import" href="../../../../bower_components/iron-media-query/iron-media-query.html"><link rel="import" href="../../../../bower_components/paper-button/paper-button.html"><link rel="import" href="ncg-graphic-instance.html"><dom-module id="ncg-graphic"><template><style include="nodecg-theme">:host{@apply --layout-vertical;@apply --layout-flex-none;white-space:nowrap}:host(:not(:last-child)){margin-bottom:20px}#details{@apply --layout-horizontal;@apply --layout-flex-none;height:60px}#indicator{@apply --layout-flex-none;background-color:#cacaca;width:9px}:host([worst-status=nominal]) #indicator{background-color:#00a651}:host([worst-status=out-of-date]) #indicator{background-color:#ffc700}#counter{@apply --layout-center-center;@apply --layout-flex-none;@apply --layout-horizontal;background-color:#525f78;color:#fff;font-size:24px;font-style:normal;font-weight:500;left:9px;line-height:normal;text-align:center;width:38px}#urlAndResolution{@apply --layout-flex;background-color:#525f78;margin-right:1px;min-width:0}#url{color:#fff;font-size:16px;font-style:normal;font-weight:500;letter-spacing:.018em;line-height:normal;max-width:100%;min-width:0;overflow:hidden;text-decoration:underline;text-overflow:ellipsis;text-transform:uppercase}#resolution{font-size:14px;font-style:normal;font-weight:500;line-height:normal;overflow:hidden;text-overflow:ellipsis}#copyButton,#reloadButton{--paper-button:{--nodecg-background-color:#6155BD};}#reloadButton iron-icon{--iron-icon-height:29px;--iron-icon-width:29px}#collapseButton{--paper-button:{--nodecg-background-color:#525F78};}#collapseButton iron-icon{--iron-icon-width:40px;--iron-icon-height:40px}paper-button{@apply --layout-center-center;@apply --layout-flex-none;@apply --layout-horizontal;border-radius:0;font-size:14px;font-style:normal;font-weight:500;line-height:normal;margin:0 1px;min-width:0;padding:0;width:60px}paper-button:last-child{margin-right:0}:host([responsive-mode=wide]) #urlAndResolution{@apply --layout-horizontal;@apply --layout-center;}:host([responsive-mode=wide]) #resolution{@apply --layout-flex-none;box-sizing:border-box;margin-left:auto;padding:0 4px;text-align:center;width:90px}:host([responsive-mode=wide]) #resolution:after,:host([responsive-mode=wide]) #resolution:before{background:#eff0ec;height:50px;width:1px}:host([responsive-mode=wide]) #reloadButton{width:115px}:host([responsive-mode=wide]) #reloadButton iron-icon{margin-left:-6px;margin-right:-1px}:host(:not([responsive-mode=wide])) #urlAndResolution{@apply --layout-center-justified;@apply --layout-start;@apply --layout-vertical;padding-right:6px}:host(:not([responsive-mode=narrow])) #copyButton{width:115px}:host([responsive-mode=narrow]) #copyButton-text{display:none}:host(:not([responsive-mode=wide])) #reloadButton-text{display:none}:host(:not([responsive-mode=narrow])) #counter{padding-right:8px}</style><iron-media-query query="(min-width: 641px)" query-matches="{{_wide}}"></iron-media-query><iron-media-query query="(min-width: 521px) and (max-width: 640px)" query-matches="{{_medium}}"></iron-media-query><iron-media-query query="(max-width: 520px)" query-matches="{{_narrow}}"></iron-media-query><div id="details"><div id="indicator"></div><div id="counter">[[_calcCount(graphic.singleInstance, instances)]]</div><div id="urlAndResolution"><a id="url" href$="[[_computeFullGraphicUrl(graphic.url)]]" target="_blank" title="[[_calcShortUrl(graphic.url)]]">[[_calcShortUrl(graphic.url)]]</a><div id="resolution">[[graphic.width]]x[[graphic.height]]</div></div><paper-button id="copyButton" data-clipboard-text$="[[_computeFullGraphicUrl(graphic.url)]]"><iron-icon icon="content-copy"></iron-icon><span id="copyButton-text"> Copy URL</span></paper-button><paper-button id="reloadButton" on-tap="reloadAll" disabled="[[_calcReloadAllDisabled(instances)]]"><iron-icon icon="refresh"></iron-icon><span id="reloadButton-text"> Reload</span></paper-button><paper-button id="collapseButton" on-tap="toggleCollapse"><iron-icon icon="[[_computeCollapseIcon(_collapseOpened)]]"></iron-icon></paper-button></div><iron-collapse id="instancesCollapse" opened="{{_collapseOpened}}" no-animation=""><template is="dom-repeat" items="[[instances]]" as="instance" mutable-data=""><ncg-graphic-instance responsive-mode="[[responsiveMode]]" graphic="[[graphic]]" instance="[[instance]]"></ncg-graphic-instance></template></iron-collapse></template><script src="ncg-graphic.js"></script></dom-module>

src/dashboard/elements/graphics/ncg-graphic.html

@@ -98,7 +98,7 @@
 
 			#collapseButton {
 				--paper-button: {
-					background-color: #525F78;
+					--nodecg-background-color: #525F78;
 				}
 			}