diff --git a/themes/neue-dark-ui/lists.less b/themes/neue-dark-ui/lists.less index a9ed76465..52c5580b5 100644 --- a/themes/neue-dark-ui/lists.less +++ b/themes/neue-dark-ui/lists.less @@ -34,7 +34,9 @@ .text(highlighted); } - // The background highlight + // The background highlight uses :before rather than the item background so + // it can span the entire width of the parent container rather than the size + // of the list item. .selected:before { content: ''; background-color: @tool-panel-background-highlight-color; @@ -89,3 +91,49 @@ } } } + +&.select-list ol.list-group, .select-list ol.list-group { + li.two-lines { + .secondary-line { color: @text-color-subtle; } + &.selected .secondary-line { color: lighten(@text-color-subtle, 10%); } + } + + // We want to highlight the background of the list items because we dont + // know their size. + li.selected { + background-color: @tool-panel-background-highlight-color; + &:before{ display: none; } + } + + &.mark-active{ + @active-icon-size: 14px; + + // pad in front of the text where the icon would be We'll pad the non- + // active items with a 'fake' icon so other classes can pad the item + // without worrying about the icon padding. + li:before { + content: ''; + background-color: transparent; + position: static; + display: inline-block; + left: auto; right: auto; + height: @active-icon-size; + width: @active-icon-size; + } + > li:not(.active):before { + margin-right: @component-icon-padding; + } + li.active { + .octicon(check, @active-icon-size); + &:before { + margin-right: @component-icon-padding; + color: @text-color-success; + } + } + } +} + + + + + diff --git a/themes/neue-dark-ui/overlay.less b/themes/neue-dark-ui/overlay.less index 8bb24e47c..7063a7e3f 100644 --- a/themes/neue-dark-ui/overlay.less +++ b/themes/neue-dark-ui/overlay.less @@ -22,13 +22,6 @@ &.two-lines { padding: @component-padding/2 @component-padding; } - // We want to highlight the background of the list items because we dont - // know their size. - &.selected{ - background-color: @tool-panel-background-highlight-color; - &:before{ display: none; } - } - .status.icon { float: right; margin-left: @component-icon-padding;