pulsar/static/lists.less

103 lines
2.3 KiB
Plaintext

@import "ui-variables";
@import "octicon-mixins";
// This is a bootstrap override
.list-group,
.list-group .list-group-item {
background-color: transparent;
border: none;
padding: 0;
margin: 0;
position: static;
}
.list-group,
.list-tree {
margin: 0;
padding: 0;
list-style: none;
cursor: default;
li:not(.list-nested-item),
li.list-nested-item > .list-item {
line-height: @component-line-height;
text-wrap: none;
white-space: nowrap;
}
// 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-selected;
position: absolute;
left: 0;
right: 0;
height: @component-line-height;
}
// Make sure the background highlight is below the content.
.selected > * {
position: relative;
}
.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 {
.list-nested-item > .list-tree > li,
.list-nested-item > .list-group > li {
padding-left: @component-icon-size + @component-icon-padding;
}
&.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 > li,
.list-nested-item > .list-group > li {
padding-left: @disclosure-arrow-padding;
}
// You want a subtree to be flat -- no collapsable children
.has-flat-children,
&.has-flat-children {
li.list-item {
margin-left: 0;
}
}
}
}