Mailspring/static/components/list-tabular.less
Ben Gotow 343e592569 feat(draft-list) Refactor thread-list, create draft-list
Summary: Adds the draft list using a refactored list-tabular class. Also fixes several draft bugs that appeared after allowing editing.

Test Plan: Run tests (need to test new ListTabular component ASAP)

Reviewers: evan

Reviewed By: evan

Differential Revision: https://review.inboxapp.com/D1272
2015-03-09 18:25:53 -07:00

75 lines
1.4 KiB
Plaintext

@import "ui-variables";
.list-container {
position: relative;
.list-item {
font-size: @font-size-base;
line-height: @line-height-large;
color: @text-color;
background: @list-bg;
&:hover {
background: @list-hover-bg;
}
&.selected {
background: @list-active-bg;
color: @list-active-color;
}
}
}
.list-tabular {
flex: 1;
width: 100%;
overflow: hidden;
position: relative;
.list-tabular-item {
position: relative;
width: 100%;
display: flex;
&:hover {
cursor: default;
}
}
.list-rows {
overflow: auto;
// Add back when when we re-implement list-headers
// padding-top: @font-size-base * 2; /* height of list-headers*/
}
.list-column {
// The width is set by React.
display: inline-block;
padding: @padding-base-vertical @padding-base-horizontal @padding-base-vertical @padding-base-horizontal;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
border-bottom: 1px solid @list-border;
&:last-child {
text-align: right;
}
}
.list-headers {
display: flex;
position: absolute;
width: 100%;
top: 0;
position: absolute;
background: fade(@list-bg,90%);
font-size: @font-size-base;
line-height: @font-size-base * 1.6;
height:@font-size-base * 2;
z-index: 3;
}
.list-header {
}
}