app/assets/stylesheets/shared/components/_lists.css.scss
// Lists
//
// Summary:
//
// * List HeadLine
// * List Filters Box
// * List Actions Bar
// * Pagination
// * List Items
// * List Editor
// * List Inside Modal
// * List inside Side Panes
// List HeadLine
// =============
.list-headline {
border-bottom: solid 1px $ultra-soft-grey;
position: relative;
.title {
display: inline-block;
margin: 1em 0 0.5em 0;
}
.selected-count {
display: inline-block;
font-size: 0.7em;
color: $soft-grey;
margin-left: 0.5em;
}
.selector {
display: inline-block;
position: absolute;
right: 0;
}
}
// List Filters Box
// ================
.list-filters {
background-color: $meppit-light-blue;
border: $meppit-blue 1px solid;
border-radius: 0.5em;
padding: 1em;
.filter-headline {
position: relative;
height: 1.8em;
.title, .toggle-panel { padding: 5px; }
.title { font-weight: bold; }
.filtering-by {
color: $grey;
font-size: 0.9em;
em { font-weight: bold; }
}
.toggle-panel {
position: absolute;
top: 0; right: 0;
cursor: pointer;
}
}
.filter-form {
form { @include row; }
display: none; // starts hidden
}
.filter-section {
@include span-columns(12 of 12);
border-bottom: solid 1px $soft-grey;
padding: 10px;
&.splitted {
@include span-columns(3 of 12);
border-bottom: none;
}
header {
font-size: 1.1em;
font-weight: bold;
margin: 0.8em 0;
}
}
.vertical-separator {
float: left;
width: 1px;
height: 5.5em;
margin-left: -2%;
margin-top: 2em;
border-left: solid 1px $soft-grey;
}
.filter-tags {
.tags-field {
@include span-columns(8 of 12);
label[for=tags] {
display: inline-block;
vertical-align: top;
font-weight: bold;
margin-top: 12px;
}
.tags {
display: inline-block;
width: 500px;
}
}
.tags-type {
@include span-columns(4 of 12);
vertical-align: top;
margin-top: 5px;
}
}
.choice-title {
font-weight: bold;
margin-right: 1em;
vertical-align: top;
}
.choice {
display: inline-block;
white-space: nowrap;
width: auto;
}
.filters-apply {
@include span-columns(12 of 12);
text-align: right;
margin-top: 1.5em;
}
}
// List Actions Bar
// ================
.list-actions {
position: relative;
padding: 1em 0;
border-bottom: solid 1px $ultra-soft-grey;
.main-actions,
.secondary-actions { display: inline }
.secondary-actions {
position: absolute;
right: 0;
}
.button {
input[type=checkbox] {
margin-right: 3px;
vertical-align: middle;
}
}
}
// Pagination
// ==========
nav.pagination { display: none; } // We are using infinite scroll
// List Items
// ==========
.list-item {
clear: both;
padding: 1em 0;
border-bottom: 1px solid $list-item-separator-color;
&:hover { background: $dark-white; }
a, a:hover { text-decoration: none; }
.item-avatar, .item-checkbox { float: left; }
.item-avatar {
display: block;
overflow: hidden;
font-size: 3em;
width: 1.15em;
height: 1.15em;
background: $soft-grey;
color: #fff;
text-align: center;
border-radius: 0.2em;
i { margin: 2px 0; }
img {
width: 1.15em;
height: 1.15em;
}
}
&.hidden { opacity: 0.4; }
.item { margin-left: 8.3em; }
.item-content { margin-right: 12em; }
.item-title {
font-family: inherit;
font-size: 1.15em;
color: $text-link-color;
margin: 0 0 0.2em;
}
.item-excerpt { color: $text-color; }
.tags { margin-top: 0.8em; }
.item-controls {
text-align: center;
float: right;
}
&.map {
.item-avatar { background: $meppit-maps-color; }
.item .item-title { color: $meppit-maps-color; }
}
&.geo_data {
.item-avatar { background: $meppit-data-color; }
.item .item-title { color: $meppit-data-color; }
}
&.small {
.item-avatar { font-size: 2em; }
.item { margin-left: 2.8em; }
.item-excerpt { font-size: 0.95em; }
}
&.big {
.item-checkbox { margin: 1.8em 1em; }
.item-avatar { font-size: 4em; }
.item { min-height: 4.8em; }
}
}
// List Editor
// ===========
.list-editor {
.add-new-btn {
margin-bottom: 20px;
}
.list {
height: 400px;
overflow-y: scroll;
}
.list-item {
background-color: $meppit-light-blue;
padding: 15px 10px;
margin-bottom: 15px;
border-radius: 4px;
label {
color: $grey;
margin-top: 10px;
&.checkbox-label {
color: $ultra-dark-grey;
}
}
.inline-field, {
display: inline-block;
}
.list-item-metadata-btn, .list-item-remove-btn {
padding: 3px 9px;
}
}
}
// List Inside Modal
// =================
.modal {
.list-container {
height: 400px;
overflow-y: auto;
}
.item-excerpt { display: none; }
}
// List inside Side Panes
// ======================
.side-pane {
.item-excerpt { display: none; }
}