]> git.r.bdr.sh - rbdr/dotfiles/blob - atom/packages/aesthetic-ui/styles/lists.less
Update atoms
[rbdr/dotfiles] / atom / packages / aesthetic-ui / styles / lists.less
1 @import "ui-variables";
2 @import "ui-mixins";
3 @import "octicon-mixins";
4
5 .list-group, .list-tree {
6 li:not(.list-nested-item),
7 li.list-nested-item > .list-item {
8 .text(normal);
9 }
10
11 .generate-list-item-text-color(@class) {
12 li:not(.list-nested-item).text-@{class},
13 li.list-nested-item.text-@{class} > .list-item {
14 .text(@class);
15 }
16 }
17 .generate-list-item-text-color(subtle);
18 .generate-list-item-text-color(info);
19 .generate-list-item-text-color(success);
20 .generate-list-item-text-color(warning);
21 .generate-list-item-text-color(error);
22 .generate-list-item-text-color(selected);
23
24 .generate-list-item-status-color(@color, @status) {
25 li:not(.list-nested-item).status-@{status},
26 li.list-nested-item.status-@{status} > .list-item {
27 color: @color;
28 }
29
30 li:not(.list-nested-item).selected.status-@{status},
31 li.list-nested-item.selected.status-@{status} > .list-item {
32 color: darken(@color, 7%);
33 }
34 }
35 .generate-list-item-status-color(@text-color-subtle, ignored);
36 .generate-list-item-status-color(@text-color-added, added);
37 .generate-list-item-status-color(@text-color-renamed, renamed);
38 .generate-list-item-status-color(@text-color-modified, modified);
39 .generate-list-item-status-color(@text-color-removed, removed);
40
41 li:not(.list-nested-item).selected,
42 li.list-nested-item.selected > .list-item {
43 .text(selected);
44 }
45 }
46
47 .select-list ol.list-group,
48 &.select-list ol.list-group {
49 li.two-lines {
50 .secondary-line { color: @text-color-subtle; }
51 &.selected .secondary-line {
52 color: lighten(@text-color-subtle, 10%);
53 text-shadow: none;
54 }
55 }
56
57 // We want to highlight the background of the list items because we dont
58 // know their size.
59 li.selected {
60 background-color: @background-color-selected;
61 &:before{ display: none; }
62 }
63
64 &.mark-active{
65 @active-icon-size: 14px;
66
67 // pad in front of the text where the icon would be We'll pad the non-
68 // active items with a 'fake' icon so other classes can pad the item
69 // without worrying about the icon padding.
70 li:before {
71 content: '';
72 background-color: transparent;
73 position: static;
74 display: inline-block;
75 left: auto; right: auto;
76 height: @active-icon-size;
77 width: @active-icon-size;
78 }
79 > li:not(.active):before {
80 margin-right: @component-icon-padding;
81 }
82 li.active {
83 .octicon(check, @active-icon-size);
84 &:before {
85 margin-right: @component-icon-padding;
86 color: @text-color-success;
87 }
88 }
89 }
90 }
91
92 .select-list.popover-list,
93 autocomplete-suggestion-list.select-list.popover-list.popover-list {
94 background-color: white;
95 padding: 2px;
96 .ui-raised-shadow;
97
98 atom-text-editor {
99 margin-bottom: @component-padding/2;
100 }
101
102 .list-group li {
103 padding-left: @component-padding/2;
104 }
105 }
106
107 autocomplete-suggestion-list.select-list.popover-list .suggestion-description-more-link {
108 color: blue;
109 text-decoration: underline;
110 }
111
112 .ui-sortable {
113 li {
114 line-height: 2.5;
115 }
116
117 // For sortable lists in the settings view
118 li.ui-sortable-placeholder {
119 visibility: visible !important;
120 background-color: darken(@pane-item-background-color, 10%);
121 }
122 }
123
124 li.ui-draggable-dragging, li.ui-sortable-helper {
125 line-height: @component-line-height;
126 height: @component-line-height;
127 border: 0;
128 border-radius: 0;
129 list-style: none;
130 padding: 0 @component-padding;
131 background: @background-color-highlight;
132 box-shadow: 0 0 1px @base-border-color;
133 }