diff options
author | Matt A. Tobin <mattatobin@localhost.localdomain> | 2018-02-02 04:16:08 -0500 |
---|---|---|
committer | Matt A. Tobin <mattatobin@localhost.localdomain> | 2018-02-02 04:16:08 -0500 |
commit | 5f8de423f190bbb79a62f804151bc24824fa32d8 (patch) | |
tree | 10027f336435511475e392454359edea8e25895d /devtools/client/shared/widgets/filter-widget.css | |
parent | 49ee0794b5d912db1f95dce6eb52d781dc210db5 (diff) | |
download | UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar.gz UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar.lz UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar.xz UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.zip |
Add m-esr52 at 52.6.0
Diffstat (limited to 'devtools/client/shared/widgets/filter-widget.css')
-rw-r--r-- | devtools/client/shared/widgets/filter-widget.css | 238 |
1 files changed, 238 insertions, 0 deletions
diff --git a/devtools/client/shared/widgets/filter-widget.css b/devtools/client/shared/widgets/filter-widget.css new file mode 100644 index 000000000..d015cb5b1 --- /dev/null +++ b/devtools/client/shared/widgets/filter-widget.css @@ -0,0 +1,238 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +/* Main container: Displays the filters and presets in 2 columns */ + +#filter-container { + width: 510px; + height: 200px; + display: flex; + position: relative; + padding: 5px; + box-sizing: border-box; + /* when opened in a xul:panel, a gray color is applied to text */ + color: var(--theme-body-color); +} + +#filter-container.dragging { + -moz-user-select: none; +} + +.filters-list, +.presets-list { + display: flex; + flex-direction: column; + box-sizing: border-box; +} + +.filters-list { + /* Allow the filters list to take the full width when the presets list is + hidden */ + flex-grow: 1; + padding: 0 6px; +} + +.presets-list { + /* Make sure that when the presets list is shown, it has a fixed width */ + width: 200px; + padding-left: 6px; + transition: width .1s; + flex-shrink: 0; + border-left: 1px solid var(--theme-splitter-color); +} + +#filter-container:not(.show-presets) .presets-list { + width: 0; + border-left: none; + padding-left: 0; +} + +#filter-container.show-presets .filters-list { + width: 300px; +} + +/* The list of filters and list of presets should push their footers to the + bottom, so they can take as much space as there is */ + +#filters, +#presets { + flex-grow: 1; + /* Avoid pushing below the tooltip's area */ + overflow-y: auto; +} + +/* The filters and presets list both have footers displayed at the bottom. + These footers have some input (taking up as much space as possible) and an + add button next */ + +.footer { + display: flex; + margin: 10px 3px; + align-items: center; +} + +.footer :not(button) { + flex-grow: 1; + margin-right: 3px; +} + +/* Styles for 1 filter function item */ + +.filter, +.filter-name, +.filter-value { + display: flex; + align-items: center; +} + +.filter { + margin: 5px 0; +} + +.filter-name { + width: 120px; + margin-right: 10px; +} + +.filter-name label { + -moz-user-select: none; + flex-grow: 1; +} + +.filter-name label.devtools-draglabel { + cursor: ew-resize; +} + +/* drag/drop handle */ + +.filter-name i { + width: 10px; + height: 10px; + margin-right: 10px; + cursor: grab; + background: linear-gradient(to bottom, + currentColor 0, + currentcolor 1px, + transparent 1px, + transparent 2px); + background-repeat: repeat-y; + background-size: auto 4px; + background-position: 0 1px; +} + +.filter-value { + min-width: 150px; + margin-right: 10px; + flex: 1; +} + +.filter-value input { + flex-grow: 1; +} + +/* Fix the size of inputs */ +/* Especially needed on Linux where input are bigger */ +input { + width: 8em; +} + +.preset { + display: flex; + margin-bottom: 10px; + cursor: pointer; + padding: 3px 5px; + + flex-direction: row; + flex-wrap: wrap; +} + +.preset label, +.preset span { + display: flex; + align-items: center; +} + +.preset label { + flex: 1 0; + cursor: pointer; + color: var(--theme-body-color); +} + +.preset:hover { + background: var(--theme-selection-background); +} + +.preset:hover label, .preset:hover span { + color: var(--theme-selection-color); +} + +.preset .remove-button { + order: 2; +} + +.preset span { + flex: 2 100%; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + display: block; + order: 3; + color: var(--theme-body-color-alt); +} + +.remove-button { + width: 16px; + height: 16px; + background: url(chrome://devtools/skin/images/close.svg); + background-size: cover; + font-size: 0; + border: none; + cursor: pointer; +} + +.hidden { + display: none !important; +} + +#filter-container .dragging { + position: relative; + z-index: 10; + cursor: grab; +} + +/* message shown when there's no filter specified */ +#filter-container p { + text-align: center; + line-height: 20px; +} + +.add, +#toggle-presets { + background-size: cover; + border: none; + width: 16px; + height: 16px; + font-size: 0; + vertical-align: middle; + cursor: pointer; + margin: 0 5px; +} + +.add { + background: url(chrome://devtools/skin/images/add.svg); +} + +#toggle-presets { + background: url(chrome://devtools/skin/images/pseudo-class.svg); +} + +.add, +.remove-button, +#toggle-presets { + filter: var(--icon-filter); +} + +.show-presets #toggle-presets { + filter: url(chrome://devtools/skin/images/filters.svg#checked-icon-state); +} |