github/atom
1
1
Fork 0
mirror of https://github.com/atom/atom.git synced 2026-04-06 03:02:13 -04:00
Code Issues Packages Projects Releases Wiki Activity

Extract some of the list structure into base css

Browse Source
This commit is contained in:
Ben Ogle
2013-09-03 17:57:55 -07:00
parent dfdd172b17
commit 9440512113
3 changed files with 70 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
static/atom.less
View File

@@ -9,6 +9,7 @@
@import "links.less";
@import "sections.less";
@import "overlay.less";
@import "lists.less";
@import "popover-list.less";
@import "notification.less";
@import "markdown.less";

69
static/lists.less Normal file
View File

@@ -0,0 +1,69 @@
@import "ui-variables";
@import "octicon-mixins";
.list-group, .list-tree {
margin: 0; padding: 0;
list-style: none;
li:not(.list-nested-item),
li.list-nested-item > .list-item {
line-height: @component-line-height;
}
// 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: @background-color-highlight;
position: absolute;
left: 0;
right: 0;
height: @component-line-height;
}
.icon:before {
margin-right: @component-icon-padding;
position: relative;
top: 1px;
}
.no-icon {
padding-left: @component-icon-padding + @component-icon-size;
}
}
// Handle indentation of the tree. Assume disclosure arrows.
.list-tree {
&.has-collapsable-children {
@disclosure-arrow-padding: @disclosure-arrow-size + @component-icon-padding;
li.list-item {
margin-left: @disclosure-arrow-padding;
}
.list-nested-item.collapsed > .list-group,
.list-nested-item.collapsed > .list-tree {
display: none;
}
// Nested items always get disclosure arrows
.list-nested-item > .list-item {
.octicon(chevron-down, @disclosure-arrow-size);
&:before{
position: relative;
top: -1px;
margin-right: @component-icon-padding;
}
}
.list-nested-item.collapsed > .list-item {
.octicon(chevron-right, @disclosure-arrow-size);
&:before{
left: 1px;
}
}
.list-nested-item > .list-tree,
.list-nested-item > .list-group {
margin-left: @disclosure-arrow-padding;
}
}
}

61
themes/neue-dark-ui/lists.less
View File

@@ -3,13 +3,9 @@
@import "octicon-mixins";
.list-group, .list-tree {
margin: 0; padding: 0;
list-style: none;
li:not(.list-nested-item),
li.list-nested-item > .list-item {
.text(normal);
line-height: @component-line-height;
}
.generate-list-item-text-color(@class) {
@@ -45,63 +41,6 @@
.selected > .list-nested-item > .list-item:hover .disclosure-arrow {
.text(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: @background-color-highlight;
position: absolute;
left: 0;
right: 0;
height: @component-line-height;
}
.icon:before {
margin-right: @component-icon-padding;
position: relative;
top: 1px;
}
.no-icon {
padding-left: @component-icon-padding + @component-icon-size;
}
}
// Handle indentation of the tree. Assume disclosure arrows.
.list-tree {
&.has-collapsable-children {
@disclosure-arrow-padding: @disclosure-arrow-size + @component-icon-padding;
li.list-item {
margin-left: @disclosure-arrow-padding;
}
.list-nested-item.collapsed > .list-group,
.list-nested-item.collapsed > .list-tree {
display: none;
}
// Nested items always get disclosure arrows
.list-nested-item > .list-item {
.octicon(chevron-down, @disclosure-arrow-size);
&:before{
position: relative;
top: -1px;
margin-right: @component-icon-padding;
}
}
.list-nested-item.collapsed > .list-item {
.octicon(chevron-right, @disclosure-arrow-size);
&:before{
left: 1px;
}
}
.list-nested-item > .list-tree,
.list-nested-item > .list-group {
margin-left: @disclosure-arrow-padding;
}
}
}
&.select-list ol.list-group, .select-list ol.list-group {