landmark-serve/public/styles/landmark/list.less

Web Application Framework and Admin GUI / Content Management System built on Express.js and Mongoose

//
// ITEM LIST
// --------------------------------------------------

//
// Empty Lists
// --------------------------------------------------
.empty-list {
	.no-border;
}

//
// Creating
// --------------------------------------------------
.create-item {
	
	.form, .toolbar-create {
		display: none;
	}
	
	.form {
		margin-bottom: 10px;
	}
	
	.toolbar {
		border-top: none;
		padding: 0;
		margin: 0;
	}
	
}


//
// List Pagination
// --------------------------------------------------
.list-pagination {
	.clearfix;
	color: @gray-light;
	display: block;
	font-size: @font-size-base;
	margin: 0 0 15px;
	
	.count {
		.inline-align();
		margin-right: 10px;
	}
	.pagination {
		.inline-align();
		margin: 0;
	}
}


//
// Searching
// --------------------------------------------------
.list-toolbar {
	.clearfix();
	padding-bottom: 20px;

	// force align with input fields
	.btn { height: @input-height-base; }
}
.search-list {
	float: left;
	
	form {
		margin-bottom: 0;
	
		.search-button {
			margin-top: 0 !important;
		}
	}
	.search-field {
		display: inline-block;
		position: relative;
		vertical-align: middle;
		width: 200px;
	}
	.search-list-field {
		position: relative;
	}
	.search-list-clear {
		color: @gray-light;
		font-weight: bold;
		line-height: 1.3;
		position: absolute;
		padding: @padding-base-vertical @padding-base-horizontal;
		top: 0;
		right: 5px;
		
		&:hover,
		&:focus {
			color: @brand-danger;
			outline: 0 none;
			text-decoration: none;
		}
		&:active {
			color: darken(@brand-danger, 20%);
		}
	}

	@media (min-width: @screen-sm) {
		.search-field {
			width: 300px;
		}
	}
	
}
.searchbox-form {
	.inline-align();
}


//
// Sorting
// --------------------------------------------------
.list-sort-dropdown {
	
	.caret {
		border-width: @caret-width-large;
		border-bottom-width: 0;
		border-top-color: @link-color;
	}
	
	.dropdown-toggle:focus,
	.dropdown-toggle:hover {
		text-decoration: none;
		.caret {
			border-top-color: @link-hover-color;
		}
	}
	
	// menu
	.dropdown-menu > .active > a {
		&,
		&:hover,
		&:focus {
			// background-color: @gray;
		}
	}
	
}


//
// Filtering
// --------------------------------------------------
.list-filters {
	
	margin: -20px 0 20px;
	
	/*
	.filter {
		display: none;
		margin-bottom: 12px;
		padding-top: 8px;
		border-top: 1px dashed #ddd;
	}
	
	.list-filters-action {
		margin: 15px 0;
		border-top: 1px dashed #ddd;
		padding-top: 15px;
		display: none;
	}
	*/
	
	.filter {
		display: none;
		padding-top: 8px;
	}
	
	.filter.active {
		display: block;
	}
	
	.list-filters-action {
		border-bottom: 1px solid @gray-lighter;
		padding-bottom: 20px;
		margin: 20px 0;
	}
	
	.filter-options {
		padding: 5px 0 0 24px;
	}
	.filter-input {
		.inline-align();
		
		&.filter-input-lg {
			width: 300px;
		}
		&.filter-input-md {
			width: 200px;
		}
		&.filter-input-sm {
			width: 100px;
		}
		
		select {
			font-size: @font-size-small;
			height: 22px;
			width: 100%;
		}
	}
	
	// clearing
	.clear-filter {
		color: @gray-light;
		font-weight: bold;
		margin-right: 7px;
		
		&:hover,
		&:focus {
			color: @brand-danger;
			outline: 0 none;
			text-decoration: none;
		}
		&:active {
			color: darken(@brand-danger, 20%);
		}
	}
	
}

// The toolbar starts hidden
.list-filters-action {
	display: none;
}

// icons that represent field types
.fieldicon {
	.inline-align();
	.square( 16px );
	background-repeat: no-repeat;
	
	&.fieldicon-text            { background-image: url( "/landmark/images/icons/16/field-text.png" ); }
	&.fieldicon-textarea          { background-image: url( "/landmark/images/icons/16/field-textarea.png" ); }
	&.fieldicon-name            { background-image: url( "/landmark/images/icons/16/field-name.png" ); }
	&.fieldicon-html            { background-image: url( "/landmark/images/icons/16/field-html.png" ); }
	&.fieldicon-url             { background-image: url( "/landmark/images/icons/16/field-url.png" ); }
	&.fieldicon-key             { background-image: url( "/landmark/images/icons/16/field-key.png" ); }
	&.fieldicon-email             { background-image: url( "/landmark/images/icons/16/field-email.png" ); }
	&.fieldicon-select            { background-image: url( "/landmark/images/icons/16/field-select.png" ); }
	&.fieldicon-location          { background-image: url( "/landmark/images/icons/16/field-location.png" ); }
	&.fieldicon-boolean           { background-image: url( "/landmark/images/icons/16/field-boolean.png" ); }
	&.fieldicon-cloudinaryimage       { background-image: url( "/landmark/images/icons/16/field-image.png" ); }
	&.fieldicon-s3file          { background-image: url( "/landmark/images/icons/16/field-file.png" ); }
	&.fieldicon-relationship        { background-image: url( "/landmark/images/icons/16/field-numericSelect.png" ); }
	&.fieldicon-date            { background-image: url( "/landmark/images/icons/16/field-date.png" ); }
	&.fieldicon-datetime          { background-image: url( "/landmark/images/icons/16/field-datetime.png" ); }
	&.fieldicon-money           { background-image: url( "/landmark/images/icons/16/field-money.png" ); }
	&.fieldicon-number            { background-image: url( "/landmark/images/icons/16/field-number.png" ); }
	&.fieldicon-sort            { background-image: url( "/landmark/images/icons/16/field-sort.png" ); }
}
.dropdown-menu .fieldicon {
	margin-right: 10px;
}
.dropdown-menu .icon {
	color: @gray-light;
	display: inline-block;
	width: 25px;
	margin-left: -5px;
}

//
// Items List
// --------------------------------------------------
.items-list {
	margin-bottom: 1.5em;
	table-layout: fixed;
	width: 100%;
	
	.control {
		padding: @table-cell-padding - 1;
		text-align: center;
		width: 18px;
		
		a {
			display: block;
			width: 16px;
			height: 18px;
			padding: 0px;
			background: url('/landmark/images/icons/list-controls.png') top left no-repeat;
			opacity: 0.5;
		}
		a:hover {
			opacity: 1;
		}
		.control-delete {
			background-position: 0 0;
		}
		.control-sort {
			background-position: -32px 0;
			cursor: move;
		}
	}
	.control + .control {
		padding-left: @table-cell-padding / 2;
	}
	
	.control-delete i {
		background-position: 0 0;
	}
	
	img {
		margin: @table-cell-padding;
	}
	
	.col-value, td a {
		max-width: 100%;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	
}


// Responsive tables
//
// Wrap your tables in `.table-scrollable` and we'll make them mobile friendly
// by enabling horizontal scrolling. Only applies <768px. Everything above that
// will display normally.

@media (max-width: @screen-sm) {
	.items-list-wrapper {
		// border: 1px solid @table-border-color;
		margin-bottom: (@line-height-computed * 0.75);
		overflow-y: hidden;
		overflow-x: scroll;
		-ms-overflow-style: -ms-autohiding-scrollbar;
		-webkit-overflow-scrolling: touch;
		width: 100%;

		// Tighten up spacing
		> .items-list {
			table-layout: auto;
			margin-bottom: 0;

			// Ensure the content doesn't wrap
			> thead,
			> tbody,
			> tfoot {
				> tr {
					> th,
					> td {
						white-space: nowrap;
					}
				}
			}
		}
	}
}