From 69ee28ad18c791c63de13e43c41c6794d188e8dc Mon Sep 17 00:00:00 2001 From: janekptacijarabaci Date: Fri, 2 Feb 2018 20:32:00 +0100 Subject: Markup View: show an ellipsis character in collapsed nodes Issue #2 --- devtools/client/themes/markup.css | 19 ++++++++++++++++++- 1 file changed, 18 insertions(+), 1 deletion(-) (limited to 'devtools/client/themes/markup.css') diff --git a/devtools/client/themes/markup.css b/devtools/client/themes/markup.css index 4b4cfd031..0569b7ce7 100644 --- a/devtools/client/themes/markup.css +++ b/devtools/client/themes/markup.css @@ -197,6 +197,22 @@ ul.children + .tag-line::before { display: inline; } +.expandable.collapsed .close::before { + /* Display an ellipsis character in collapsed nodes that can be expanded. */ + content: "\2026"; + display: inline-block; + width: 12px; + height: 8px; + margin: 0 2px; + line-height: 3px; + color: var(--theme-body-color-inactive); + border-radius: 3px; + border-style: solid; + border-width: 1px; + text-align: center; + vertical-align: middle; +} + /* Hide HTML void elements (img, hr, br, …) closing tag when the element is not * expanded (it can be if it has pseudo-elements attached) */ .child.collapsed > .tag-line .void-element .close { @@ -318,7 +334,8 @@ ul.children + .tag-line::before { .theme-selected ~ .editor .theme-fg-color4, .theme-selected ~ .editor .theme-fg-color5, .theme-selected ~ .editor .theme-fg-color6, -.theme-selected ~ .editor .theme-fg-color7 { +.theme-selected ~ .editor .theme-fg-color7, +.theme-selected ~ .editor .close::before { color: var(--theme-selection-color); } -- cgit v1.2.3