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

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

//
// THEME
// --------------------------------------------------

// Reset landmark navbar basics
@navbar-landmark-bg:                         @link-color;// #004a80;
@navbar-landmark-color:                      mix(white,@navbar-landmark-bg,50%);
@navbar-landmark-border:                     darken(@navbar-landmark-bg, 10%);

// Landmark navbar links
@navbar-landmark-link-color:                 mix(white,@navbar-landmark-bg,60%);
@navbar-landmark-link-hover-color:           #fff;
@navbar-landmark-link-hover-bg:              lighten(@navbar-landmark-bg, 3.5%);
@navbar-landmark-link-active-color:          @navbar-landmark-link-hover-color;
@navbar-landmark-link-active-bg:             darken(@navbar-landmark-bg, 3.5%);
@navbar-landmark-link-disabled-color:        #444;
@navbar-landmark-link-disabled-bg:           transparent;

// Landmark navbar brand label
@navbar-landmark-brand-color:                mix(white,@navbar-landmark-link-color,50%);
@navbar-landmark-brand-hover-color:          #fff;
@navbar-landmark-brand-hover-bg:             transparent;

// Landmark navbar search
@navbar-landmark-search-bg:                  lighten(@navbar-landmark-bg, 25%);
@navbar-landmark-search-bg-focus:            #fff;
@navbar-landmark-search-border:              darken(@navbar-landmark-bg, 10%);
@navbar-landmark-search-placeholder-color:   #ccc;

// Landmark navbar toggle
@navbar-landmark-toggle-hover-bg:            mix(white, @navbar-landmark-bg, 25%);
@navbar-landmark-toggle-icon-bar-bg:         #fff;
@navbar-landmark-toggle-border-color:        transparent;




//
// Resets
// --------------------------------------------------

abbr, .disabled, .disabled a {
	cursor: default !important;
}


//
// Typography
// --------------------------------------------------
h3 {
	font-weight: normal;
}

h4 {
	text-transform: uppercase;
	font-size: @font-size-base;
	color: @gray-light;
	margin-bottom: 10px;
}

// Create form header
.create-item h4 {
	color: @gray-light; //darken(@brand-success, 10%);
}

.alert h4 {
	text-transform: none;
}


//
// Header
// --------------------------------------------------
#header {
	background-color: @navbar-landmark-bg;
	border: 0 none;

	.navbar-backtobrand-trigger {
		color: @navbar-landmark-link-color;

		&:hover {
			color: @navbar-landmark-link-hover-color;
		}
	}
	.navbar-backtobrand-message {
		background-color: @navbar-landmark-bg;
		color: @navbar-landmark-brand-color;
	}

	.navbar-brand {
		color: @navbar-landmark-brand-color;
		&:hover,
		&:focus {
			color: @navbar-landmark-brand-hover-color;
			background-color: @navbar-landmark-brand-hover-bg;
		}
	}

	.navbar-text {
		color: @navbar-landmark-color;
	}

	.navbar-nav {
		> li > a {
			color: @navbar-landmark-link-color;

			&:hover,
			&:focus {
				#gradient .vertical(rgba(255,255,255,0),rgba(255,255,255,0.1));
				// background-color: @navbar-landmark-link-hover-bg;
				color: @navbar-landmark-link-hover-color;
			}
		}
		> .active > a {
			&,
			&:hover,
			&:focus {
				#gradient .vertical( rgba(0,0,0,0.1), rgba(0,0,0,0), 0%, 100% );
				.box-shadow( inset 0 1px 3px rgba(0,0,0,0.2) );
				background-color: @navbar-landmark-link-active-bg;
				color: @navbar-landmark-link-active-color;
			}
		}
		> .disabled > a {
			&,
			&:hover,
			&:focus {
				color: @navbar-landmark-link-disabled-color;
				background-color: @navbar-landmark-link-disabled-bg;
			}
		}
	}

	// Darken the responsive nav toggle
	.navbar-toggle {
		border-color: @navbar-landmark-toggle-border-color;
		&:hover,
		&:focus {
			background-color: @navbar-landmark-toggle-hover-bg;
		}
		.icon-bar {
			background-color: @navbar-landmark-toggle-icon-bar-bg;
		}
	}

	.navbar-collapse {
		.transition( all 200ms linear );
	}
	.navbar-collapse,
	.navbar-form {
		border-color: darken(@navbar-landmark-bg, 7%);
	}

	.navbar-nav {
		> .open > a {
			&,
			&:hover,
			&:focus {
				background-color: @navbar-landmark-link-active-bg;
				color: @navbar-landmark-link-active-color;
			}
		}
		> .dropdown > a:hover .caret {
			border-top-color: @navbar-landmark-link-hover-color;
			border-bottom-color: @navbar-landmark-link-hover-color;
		}
		> .dropdown > a .caret {
			border-top-color: @navbar-landmark-link-color;
			border-bottom-color: @navbar-landmark-link-color;
		}
		> .open > a {
			&,
			&:hover,
			&:focus {
				.caret {
					border-top-color: @navbar-landmark-link-active-color;
					border-bottom-color: @navbar-landmark-link-active-color;
				}
			}
		}

		@media (min-width: @screen-sm) {
			> .active > a {
				&,
				&:hover,
				&:focus {
					background-color: @navbar-landmark-link-active-bg;
				}
			}
		}

		@media (max-width: @screen-xs-max) {
			// Dropdowns get custom display
			.open .dropdown-menu {
				> .dropdown-header {
					border-color: @navbar-landmark-border;
				}
				> li > a {
					color: @navbar-landmark-link-color;
					&:hover,
					&:focus {
						color: @navbar-landmark-link-hover-color;
						background-color: @navbar-landmark-link-hover-bg;
					}
				}
				> .active > a {
					&,
					&:hover,
					&:focus {
						color: @navbar-landmark-link-active-color;
						background-color: @navbar-landmark-link-active-bg;
					}
				}
				> .disabled > a {
					&,
					&:hover,
					&:focus {
						color: @navbar-landmark-link-disabled-color;
						background-color: @navbar-landmark-link-disabled-bg;
					}
				}
			}
		}
	}

	.navbar-link {
		color: @navbar-landmark-link-color;
		&:hover {
			color: @navbar-landmark-link-hover-color;
		}
	}

}


//
// Section Nav
// --------------------------------------------------

@sectionnav-arrow-size: 8px;

#section-nav {
	min-height: 40px;
	margin-bottom: 20px;

	.navbar-collapse {
		padding-left: 0px;
		padding-right: 0px;
	}

	li > a {
		color: @gray-light;
		padding-bottom: 10px;
		padding-top: 10px;

		&:hover,
		&:focus {
			color: black;
		}
	}

	@media (min-width: @screen-sm) {
		li > a {
			margin-right: 20px;
			padding-left: 0;
			padding-right: 0;
		}
	}

	.active > a,
	.active > a:hover,
	.active > a:focus {
		background: transparent;
		color: black;

		&:before,
		&:after {
			.square(0);
			border: @sectionnav-arrow-size solid transparent;
			border-bottom-width: 0;
			content: "";
			margin-left: -@sectionnav-arrow-size;
			position: absolute;
			left: 50%;
		}
		&:before {
			border-top-color: @navbar-default-border;
			bottom: -(@sectionnav-arrow-size + 1);
		}
		&:after {
			border-top-color: @navbar-default-bg;
			bottom: -@sectionnav-arrow-size;
		}
	}
}






//
// Page Header
// --------------------------------------------------
.page-header {
	margin-top: 10px;

	&.list-header {
		border-bottom: 0 none;
		padding-bottom: 0;
	}

	h1 {
		font-weight: 200;
		margin-bottom: 15px;
	}
	@media (min-width: @screen-sm) {
		h1 {
			> * {
				display: inline;
			}
		}
	}
}



// No Items
// ------------------------------

.empty-list {
	margin: 50px 0 30px;
	color: @gray-light;
}



// Dropdowns
// ------------------------------

.dropdown-inline {
	display: inline-block;
	position: relative;
}
.dropdown-menu {
	max-height: 400px;
	overflow-y: auto;

	// return spacing to the bottom after max-height crops the padding
	> li:last-child {
		margin-bottom: 5px;
	}
}
.dropdown-header:not(:first-child) {
	margin-top: 1em;
}



// Pagination
// ------------------------------

.pagination {
	> li {
		display: inline; // Remove list-style and block-level defaults
		> a,
		> span {
			border: 1px solid transparent;
			border-radius: @border-radius-small;
			color: @gray;
			float: left; // Collapse white-space
			line-height: 1.3;
			padding: @padding-small-vertical @padding-small-horizontal;
			position: relative;
			text-decoration: none;
		}
	}

	> li > a,
	> li > span {
		&:hover,
		&:focus {
			background-color: @pagination-hover-bg;
		}
	}

	> .active > a,
	> .active > span {
		&,
		&:hover,
		&:focus {
			z-index: 2;
			color: @pagination-active-color;
			background-color: @pagination-active-bg;
			border: 1px solid @pagination-border;
			cursor: default;
		}
	}

	> .disabled {
		> span,
		> a,
		> a:hover,
		> a:focus {
			color: @pagination-disabled-color;
			background-color: @pagination-bg;
			border-color: @pagination-bg;
			cursor: default;
		}
	}
}





//
// Forms
// --------------------------------------------------

// Heading 3
h3.form-heading {
	border-top: 1px dashed @gray-lighter;
	color: @brand-primary;
	font-weight: 200;
	margin-bottom: 20px;
	margin-top: 30px;
	padding-top: 30px;
	position: relative;
}
.item-name+h3.form-heading {
	margin-top: 10px;
	padding-top: 20px;
}

// Heading 2
h2.form-heading {
	color: @brand-primary;
	font-weight: 200;
	margin-bottom: 20px;
	margin-top: 20px;
	position: relative;


	/**
		Diagonal Stripes
		==============================
		Courtesy of http://svgeneration.com/generate/Diagonal-Stripes
	**/
	&.relationship-heading {
		padding-top: 40px;
		&:before {
			.size( 100%,8px );
			background-image:url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSc0NScgaGVpZ2h0PSc5MCcgdmlld0JveD0nMCAwIDUgMTAnPgoJPHJlY3Qgd2lkdGg9JzExMCUnIHg9Jy01JScgeT0nLTUlJyBoZWlnaHQ9JzExMCUnIGZpbGw9JyNmZmZmZmYnLz4KCTxsaW5lIHgxPSctMicgeTE9JzEnIHgyPSc3JyB5Mj0nMTAnIHN0cm9rZT0nI2Y2ZjZmNicgc3Ryb2tlLXdpZHRoPScxLjc1Jy8+Cgk8bGluZSB4MT0nLTInIHkxPSc2JyB4Mj0nNycgeTI9JzE1JyBzdHJva2U9JyNmNmY2ZjYnIHN0cm9rZS13aWR0aD0nMS43NScvPgoJPGxpbmUgeDE9Jy0yJyB5MT0nLTQnIHgyPSc3JyB5Mj0nNScgc3Ryb2tlPScjZjZmNmY2JyBzdHJva2Utd2lkdGg9JzEuNzUnLz4KPC9zdmc+');
			content: " ";
			position: absolute;
			top: 0;
		}
	}
}
h3.relationship-heading,
h2.form-heading + h3.form-heading {
	border-top: 0 none;
	padding-top: 0;
	margin-top: 30px;
}
h3.relationship-heading {
	margin-top: 50px;
}

// Common fields
.form-control {
	.box-shadow( 0 1px 1px rgba(0, 0, 0, 0.075) inset );
	border-color: #bbb #ddd #eee;
	-webkit-appearance: none;

	&:hover {
		border-color: #999 #bbb #ccc;
	}

	&:focus {
		@shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 0 5px -1px fade(@link-color,50%);
		.box-shadow( @shadow );
		border-color: @input-border-focus lighten(@input-border-focus, 5%) lighten(@input-border-focus, 5%);
	}
}

// Select2 Field Focus
.select2-container-active .select2-choice,
.select2-container-active .select2-choices,
.select2-container-multi.select2-container-active .select2-choices {
	@shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 0 5px -1px fade(@link-color,50%);
	.box-shadow( @shadow );
	border-color: @input-border-focus lighten(@input-border-focus, 5%) lighten(@input-border-focus, 5%);
}

// Add a little depth to select2 selected options
.select2-container-multi .select2-choices .select2-search-choice {
	margin: 3px 0 3px 3px;
	.box-shadow( ~"inset 0 0 0 1px white, 0 1px 0 rgba(0,0,0,0.04)" );
	#gradient .vertical( #fff, #fafafa, 30%, 100% );
}

// Name field
.item-name .form-control {
	.input-size(@input-height-large + 10; @padding-base-vertical; @padding-base-horizontal; ceil(@font-size-base * 1.70); @line-height-large; @input-border-radius);
	// color: @brand-primary;
	font-weight: 200;
	margin-bottom: 10px;
}

.item-name h2 {
	margin: 0;
}

// Boolean fields
.type-boolean {
	img {
		margin-right: 8px;
		margin-top: -3px;
	}
}

// Field notes
@note-color: #5CB85C;
@note-background: #EFFDEF;
.field-note {
	.border-right-radius( 4px );
	background-color: @note-background; // lighten(@note-color, 42%); // mix(white,@note-color,90%);
	border-left: 1px solid @note-color;
	color: @note-color;
	line-height: 25px;
	display: inline-block;
	padding: 0 10px;
}

.type-boolean .field-note {
	background: none transparent;
	border: 0 none;
	line-height: @line-height-base;
	padding-left: 20px;
}

// location field options
.autoimprove {
	color: #5a497d;
}
.overwrite {
	color: #cb3965;
}
.checkbox {
	max-width: @screen-xs;
}


// Buttons
// --------------------------------------------------

// add little depth to the default button
.btn-default {
	#gradient .vertical(#fefefe, #f3f3f3);
	border-color: #ddd #ccc #bbb;

	&:hover,
	&:focus {
		#gradient .vertical(#fff, #f9f9f9);
		border-color: #ccc #bbb #aaa;
		box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
	}

	&:active,
	.open &,
	&.active {
		background: #eee;
		border-color: #bbb #ccc #ddd;
		box-shadow: inset 0 1px 2px rgba(0,0,0,.125);
	}
}

// Cancel buttons
.btn-link.btn-cancel {
	color: @gray;

	&:hover {
		color: @state-danger-text;
	}
}

// wider buttons
.btn.btn-create,
.btn.btn-search,
.btn.btn-save,
.btn.btn-filter {
	padding-left: @padding-large-horizontal;
	padding-right: @padding-large-horizontal;
}

// Create buttons
/*
.btn.btn-create {
	#gradient .vertical( #fff, mix(white, @brand-success, 93%), 30%, 100% );
	color: darken(@brand-success, 15%);
	border-color: lighten(@brand-success, 10%);

	&:hover {
		// color: darken(@brand-success, 5%);
		border-color: darken(@brand-success, 10%);
	}

	.open &,
	&:active,
	&.active {
		color: darken(@brand-success, 15%);
		background: mix(white, @brand-success, 93%);
	}
}
*/

// Save buttons
.btn.btn-filter,
.btn.btn-save {
	#gradient .vertical( #fff, mix(white, @link-color, 93%), 30%, 100% );
	color: darken(@link-color, 10%);
	border-color: @link-color;

	&:hover {
		// color: darken(@link-color, 5%);
		border-color: darken(@link-color, 10%);
	}

	.open &,
	&:active,
	&.active {
		background: mix(white, @link-color, 93%);
		border-color: darken(@link-color, 10%);
		color: darken(@link-color, 15%);
	}
}





//
// Breadcrumbs
// --------------------------------------------------
.breadcrumb {
	margin-bottom: 0;
	padding: 0;
	font-size: @font-size-large;
	background-color: transparent;

	> li {
		display: inline-block;

		span {
			color: @breadcrumb-color;
		}
	}
}





//
// Items List
// --------------------------------------------------

.items-list {
	thead > tr > th {
		border-bottom: 2px solid @table-border-color;
		padding: @table-cell-padding;
		text-align: left;
	}

	thead > tr > td,
	tbody > tr > td,
	tfoot > tr > td {
		background-color: white;
		border-top: 1px solid #e5e5e5;
		line-height: 1;
		height: 2.5em; // behaves like min-height on table cells
	}

	tr.delete-hover {
		td {
			color: #AD1212;
			a { color: #AD1212; }
		}
	}

	tr.delete-inprogress {
		td {
			color: #ccc;
			a { color: #ccc; }
		}
	}

	tr.sort-hover, tr.dragged {
		.control-sort {
			opacity: 1;
		}
		td {
			color: #246818;
			a { color: #246818; }
		}
	}

	// links get a larger hit area
	tbody a {
		display: inline-block;
		padding: @padding-small-vertical @padding-small-horizontal;
		color: @text-color;
		text-decoration: none;

		&:hover {
			color: darken(@text-color, 10%);
			text-decoration: underline;
		}
	}

	.col-value {
		padding: @padding-small-vertical @padding-small-horizontal;
	}

	.col-boolean {
		text-align: left;
		padding: @padding-small-vertical @padding-small-horizontal 2px;
	}
}





//
// Relationships List
// --------------------------------------------------
table.relationships-list {

	thead > tr > th,
	tbody > tr > th,
	tfoot > tr > th {
		color: @gray-light;
		font-size: @font-size-small;
		text-transform: uppercase;
	}
}






//
// Pagination
// --------------------------------------------------
.pagination {
	> .disabled {
		> span,
		> a,
		> a:hover,
		> a:focus {
			cursor: default;
		}
	}
}