backbone-list-controller/style.less

A powerful Backbone.js class that renders a collection of models as a list with infinite scrolling, sorting, filtering, and search field.

// set some default variables

@red: #e74c3c;
@green: #27ae60;
@dark: #444;
@color-red: @red;
@color-blue: #2980b9;
//@color-yellow: #f1c40f;
@serif: 'Georgia';
@sans-serif: 'Helvetica', 'Arial';


@color: #FFB74D;
@color-highlight: #FFEE58;

@import 'lib/demo-base.less'; // https://gist.github.com/kjantzer/fed29d575814024326cd

// dependency styles
@import 'node_modules/backbone-dropdown/src/dropdown.less';
@import 'node_modules/backbone-modal/src/modal.less';
@import 'node_modules/basic-buttons/src/basic-buttons.less';

@font-dir: 'lib/basic-buttons-font/';


// list controller styles
@import 'src/list-controller.less';


#demo {
	height: 550px;
	margin-top: -180px;
	border: solid 1px rgba(0,0,0,.1);
	margin-bottom: 0;
}


.demo {
	height: 300px;
	background: #fff;
	.rounded(8px);
	border: solid 1px #ffb74d;
	margin-bottom: 2em;
	
	
	&:after {
		content: '';
		height: 10px;
		.rounded(8px);
		// background: rgba(255,255,255,0);
		// background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(246,246,246,0.47) 47%, rgba(237,237,237,1) 100%);
		// background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(255,255,255,0)), color-stop(47%, rgba(246,246,246,0.47)), color-stop(100%, rgba(237,237,237,1)));
		// background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(246,246,246,0.47) 47%, rgba(237,237,237,1) 100%);
		// background: -o-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(246,246,246,0.47) 47%, rgba(237,237,237,1) 100%);
		// background: -ms-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(246,246,246,0.47) 47%, rgba(237,237,237,1) 100%);
		// background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(246,246,246,0.47) 47%, rgba(237,237,237,1) 100%);
	}
	
	
	
	&.fullscreen {
		position: fixed;
		top: 0;
		left: 0;
		margin: 0;
		height: 100%;
		width: 100%;
		background: #fff;
		z-index: 100;
	}
	
	.filter-bar {
		height: 56px;
		padding: 15px;
		border-bottom: solid 1px #ddd;
		-webkit-box-shadow: #ccc 0px 3px 5px -4px;
		   -moz-box-shadow: #ccc 0px 3px 5px -4px;
		   		box-shadow: #ccc 0px 3px 5px -4px;
		   		
		-webkit-touch-callout: none;
		-webkit-user-select: none;
		-khtml-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		user-select: none;
		   		
		a:hover {
			text-decoration: none;
		}
		   		
		input.filter, input.filter:focus {
			background: #fff  url('src/search-icon.png') 7px center no-repeat !important;
			border: solid 1px #ccc;
			.rounded(4px);
			font-size: 12px;
			padding: 4px;
			padding-left: 26px;
			float: right;
			outline: none;
			
			
			&.auto-hide {
				width: 150px;
				.transition(200ms);
			}
			
			// if auto-hide is NOT focused and the VALUE is empty, "hide" the input
			&.auto-hide:not(:focus):not([value]),
			&.auto-hide:not(:focus)[value=""] {
				width: 33px;
				background-color: transparent !important;
				border-color: transparent;
				.box-shadow(none);
				opacity: .4;
				cursor: pointer;
			}
			
			// if auto-hide is NOT focused and the VALUE is empty, increase opacity when hovered
			&.auto-hide:not(:focus):not([value]):hover,
			&.auto-hide:not(:focus)[value=""]:hover {
				opacity: .75;
			}
		}
	}
	
	.list {
		list-style: none;
		height: ~"calc(100% - 56px)";
		overflow-y: auto;
		padding: 0;
		margin: 0;
	}
	
	.list > li {
		border-bottom: solid 1px #ddd;
		padding: 15px 15px;
		margin: 0;
	}
	
	.list > li.end-of-list {
		color: #aaa;
		text-align: center;
		border-bottom: none;
		
		p {
			float: none;
			margin: 0px;
		}
	}
	
	.label-divider {
		height: 0;
		clear: both;
	}
	
	.list > li {
		
		h4 {
			display: inline-block;
			max-width: 70%;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			vertical-align: middle;
			margin: 0;
			
			> span {
				font-weight: normal;
				color: #aaa;
			}
		}
		
	
		div[class*='color-'] {
			display: inline-block;
			width: 1em;
			height: 1em;
			.rounded(3px);
			margin-right: .25em;
			vertical-align: middle;
			.transition(300ms);
		}
		
		div.color-blue		{ background: #2980b9; }
		div.color-yellow	{ background: #f1c40f; }
		div.color-green		{ background: #27ae60; }
		div.color-red		{ background: #e74c3c; }
		div.color-orange	{ background: #e67e22; }
		
		p {
			float: right;
			margin: 5px 0 0 0;
			font-size: .8em;
			line-height: 1em;
		}
	}

	.list.mode-grid > li,
	.list.mode-compare > li {

		div[class*='color-'] {
			display: block;
			width: 100%;
			height: .5em;
		}
		
		h4 {
			max-width: 100%;

			> span {
				display: block;
			}
		}

		p {
			float: none;
			text-align: right;
		}
	}
	
}