diff options
| author | Ben Beltran <ben@nsovocal.com> | 2017-03-02 23:10:51 -0600 |
|---|---|---|
| committer | Ben Beltran <ben@nsovocal.com> | 2017-03-02 23:10:51 -0600 |
| commit | 35ab4aab6926fb6cd2b44eda8bc14c72a8759b75 (patch) | |
| tree | 0c08edd4f9b6a0bc9bb2780b8a496ed8c69e20a4 /atom/packages/aesthetic-ui/styles/lists.less | |
| parent | 0b4318740e55d6977d98872eff6bebfe948bf46f (diff) | |
| parent | 28cc50d9af1fd1314afde30169dc22bba5934380 (diff) | |
Merge remote-tracking branch 'origin/master'
Diffstat (limited to 'atom/packages/aesthetic-ui/styles/lists.less')
| -rw-r--r-- | atom/packages/aesthetic-ui/styles/lists.less | 133 |
1 files changed, 133 insertions, 0 deletions
diff --git a/atom/packages/aesthetic-ui/styles/lists.less b/atom/packages/aesthetic-ui/styles/lists.less new file mode 100644 index 0000000..74c078f --- /dev/null +++ b/atom/packages/aesthetic-ui/styles/lists.less @@ -0,0 +1,133 @@ +@import "ui-variables"; +@import "ui-mixins"; +@import "octicon-mixins"; + +.list-group, .list-tree { + li:not(.list-nested-item), + li.list-nested-item > .list-item { + .text(normal); + } + + .generate-list-item-text-color(@class) { + li:not(.list-nested-item).text-@{class}, + li.list-nested-item.text-@{class} > .list-item { + .text(@class); + } + } + .generate-list-item-text-color(subtle); + .generate-list-item-text-color(info); + .generate-list-item-text-color(success); + .generate-list-item-text-color(warning); + .generate-list-item-text-color(error); + .generate-list-item-text-color(selected); + + .generate-list-item-status-color(@color, @status) { + li:not(.list-nested-item).status-@{status}, + li.list-nested-item.status-@{status} > .list-item { + color: @color; + } + + li:not(.list-nested-item).selected.status-@{status}, + li.list-nested-item.selected.status-@{status} > .list-item { + color: darken(@color, 7%); + } + } + .generate-list-item-status-color(@text-color-subtle, ignored); + .generate-list-item-status-color(@text-color-added, added); + .generate-list-item-status-color(@text-color-renamed, renamed); + .generate-list-item-status-color(@text-color-modified, modified); + .generate-list-item-status-color(@text-color-removed, removed); + + li:not(.list-nested-item).selected, + li.list-nested-item.selected > .list-item { + .text(selected); + } +} + +.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%); + text-shadow: none; + } + } + + // We want to highlight the background of the list items because we dont + // know their size. + li.selected { + background-color: @background-color-selected; + &: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; + } + } + } +} + +.select-list.popover-list, +autocomplete-suggestion-list.select-list.popover-list.popover-list { + background-color: white; + padding: 2px; + .ui-raised-shadow; + + atom-text-editor { + margin-bottom: @component-padding/2; + } + + .list-group li { + padding-left: @component-padding/2; + } +} + +autocomplete-suggestion-list.select-list.popover-list .suggestion-description-more-link { + color: blue; + text-decoration: underline; +} + +.ui-sortable { + li { + line-height: 2.5; + } + + // For sortable lists in the settings view + li.ui-sortable-placeholder { + visibility: visible !important; + background-color: darken(@pane-item-background-color, 10%); + } +} + +li.ui-draggable-dragging, li.ui-sortable-helper { + line-height: @component-line-height; + height: @component-line-height; + border: 0; + border-radius: 0; + list-style: none; + padding: 0 @component-padding; + background: @background-color-highlight; + box-shadow: 0 0 1px @base-border-color; +} |