loot/libloot
0
0
Fork 0
mirror of https://github.com/loot/libloot.git synced 2026-07-27 14:16:01 -07:00
Code Issues Packages Projects Releases Wiki Activity

Moved dropdown menu overrides.

Browse Source 
Since paper-dropdown-menu is only found in loot-dropdown-menu, the CSS
is better placed in there. Presumably there's also less searching for
matches without the /deep/ selector.
This commit is contained in:
Oliver Hamlet
2014-12-24 14:53:46 +00:00
parent ba4f0f1162
commit a3e38c1759
3 changed files with 35 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/report/css/material.css
-14
View File
@@ -73,20 +73,6 @@ html /deep/ :-ms-input-placeholder {
html /deep/ input {
text-overflow: ellipsis;
}
/* paper-dropdown-menu */
html /deep/ paper-dropdown-menu {
margin-left: 4px;
margin-right: 4px;
border-bottom-color: rgba(0, 0, 0, 0.12);
}
html /deep/ paper-dropdown-menu::shadow #label {
color: rgba(0, 0, 0, 0.87);
}
html /deep/ paper-dropdown-menu[disabled]::shadow #label,
html /deep/ paper-dropdown-menu::shadow #arrow {
color: rgba(0, 0, 0, 0.26);
}
/* paper-dropdown */
html /deep/ paper-dropdown {
padding: 8px 0;
resources/report/css/overrides.css
-17
View File
@@ -32,23 +32,6 @@ html /deep/ paper-input-decorator::shadow .underline .focused-underline {
/* line color when the input is focused */
background-color: #64B5F6;
}
/* Set the underline and arrow colours for dropdown menus on dark backgrounds. */
html .dark /deep/ paper-dropdown-menu {
border-bottom-color: rgba(255, 255, 255, 0.12);
}
html .dark /deep/ paper-dropdown-menu::shadow #label {
color: white;
}
html .dark /deep/ paper-dropdown-menu[disabled]::shadow #label,
html .dark /deep/ paper-dropdown-menu::shadow #arrow {
color: rgba(255, 255, 255, 0.30);
}
/* Set the highlight colour for dropdown menu selections. */
html /deep/ loot-dropdown-menu .core-selected,
html /deep/ paper-dropdown-menu .core-selected {
color: #64B5F6;
background-color: inherit;
}
/* Set the tab colours. */
html /deep/ paper-tabs::shadow #selectionBar {
background-color: #64B5F6;
resources/report/html/loot-dropdown-menu.html
+35 -4
View File
@@ -14,9 +14,40 @@ it a <select>-like API. This means:
<polymer-element name="loot-dropdown-menu" attributes="disabled">
<template>
<style>
/* Material Design overrides */
paper-dropdown-menu {
margin-left: 4px;
margin-right: 4px;
border-bottom-color: rgba(0, 0, 0, 0.12);
}
paper-dropdown-menu::shadow #label {
color: rgba(0, 0, 0, 0.87);
}
paper-dropdown-menu[disabled]::shadow #label,
paper-dropdown-menu::shadow #arrow {
color: rgba(0, 0, 0, 0.26);
}
/* LOOT-specific overrides */
::content .core-selected {
color: #64B5F6;
background-color: inherit;
}
:host(.dark) paper-dropdown-menu {
border-bottom-color: rgba(255, 255, 255, 0.12);
}
:host(.dark) paper-dropdown-menu::shadow #label {
color: white;
}
:host(.dark) paper-dropdown-menu[disabled]::shadow #label,
:host(.dark) paper-dropdown-menu::shadow #arrow {
color: rgba(255, 255, 255, 0.30);
}
</style>
<paper-dropdown-menu disabled?="{{disabled}}">
<paper-dropdown class="dropdown">
<core-menu class="menu" valueattr="value">
<core-menu id="menu" class="menu" valueattr="value">
<content></content>
</core-menu>
</paper-dropdown>
@@ -28,11 +59,11 @@ it a <select>-like API. This means:
disabled: false,
attached: function() {
this.shadowRoot.firstElementChild.lastElementChild.firstElementChild.addEventListener('core-select', this.onItemSelect, false);
this.shadowRoot.getElementById('menu').addEventListener('core-select', this.onItemSelect, false);
},
detached: function() {
this.shadowRoot.firstElementChild.lastElementChild.firstElementChild.removeEventListener('core-select', this.onItemSelect, false);
this.shadowRoot.getElementById('menu').removeEventListener('core-select', this.onItemSelect, false);
},
onItemSelect: function(evt) {
@@ -42,7 +73,7 @@ it a <select>-like API. This means:
},
valueChanged: function(oldValue, newValue) {
this.shadowRoot.firstElementChild.lastElementChild.firstElementChild.selected = newValue;
this.shadowRoot.getElementById('menu').selected = newValue;
},
});
</script>