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

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

//
// Additional Mixins
// --------------------------------------------------



/*
  Fill Space
  ===================

  Element will fill all available vertical and horizontal space provided by it's parent

  Notes
  ===================
  * Apply attribute "auto" to either top / bottom if the element has a height
  * Apply attribute "auto" to either left / right if the element has a width

*/
.fill-space(@top:0,@right:0,@bottom:0,@left:0) {
	position: absolute;
	bottom: @bottom;
	left: @left;
	right: @right;
	top: @top;
}





/*
  Column spacing
  ===================

  Remove the necessity for [class^='col-'] selector due to its poor performance
  
*/
.col-spacing(@margin;@padding;) {
	.col-xs-1,
	.col-xs-2,
	.col-xs-3,
	.col-xs-4,
	.col-xs-5,
	.col-xs-6,
	.col-xs-7,
	.col-xs-8,
	.col-xs-9,
	.col-xs-10,
	.col-xs-11,
	.col-xs-12,
	.col-sm-1,
	.col-sm-2,
	.col-sm-3,
	.col-sm-4,
	.col-sm-5,
	.col-sm-6,
	.col-sm-7,
	.col-sm-8,
	.col-sm-9,
	.col-sm-10,
	.col-sm-11,
	.col-sm-12,
	.col-md-1,
	.col-md-2,
	.col-md-3,
	.col-md-4,
	.col-md-5,
	.col-md-6,
	.col-md-7,
	.col-md-8,
	.col-md-9,
	.col-md-10,
	.col-md-11,
	.col-md-12,
	.col-lg-1,
	.col-lg-2,
	.col-lg-3,
	.col-lg-4,
	.col-lg-5,
	.col-lg-6,
	.col-lg-7,
	.col-lg-8,
	.col-lg-9,
	.col-lg-10,
	.col-lg-11,
	.col-lg-12 {
		margin: @margin;
		padding: @padding;
	}
}





/*
	Inline align
	===================

	Element will align with it's siblings along a lateral axis

	Notes
	===================
	* Defaults to middle
	* Other options
		- baseline / sub / super / top / text-top / middle / bottom / text-bottom / inherit

*/
.inline-align(@alignment:middle) {
	display: inline-block;
	vertical-align: @alignment;
}





// Responsively hide content
// Get around Bootstrap's "display: block" issues
.hidden-xs-discreet {
	@media (max-width: @screen-xs) {
		display: none !important;
	}
}
.hidden-sm-discreet {
	@media (min-width: @screen-sm) and (max-width: @screen-sm-max) {
		display: none;
	}
}
.hidden-md-discreet {
	@media (min-width: @screen-md) and (max-width: @screen-md-max) {
		display: none;
	}
}
.hidden-lg-discreet {
	@media (min-width: @screen-desktop) {
		display: none;
	}
}
.visible-xs-discreet {
	@media (min-width: @screen-xs) {
		display: none;
	}
}
.visible-sm-discreet {
	@media (max-width: @screen-xs-max) {
		display: none;
	}
	@media (min-width: @screen-md) {
		display: none;
	}
}
.visible-md-discreet {
	@media (max-width: @screen-sm-max) {
		display: none;
	}
	@media (min-width: @screen-lg) {
		display: none;
	}
}
.visible-lg-discreet {
	@media (max-width: @screen-md-max) {
		display: none;
	}
}





// Button versions
// -------------------------

// alternative to bootstrap's "button-variant"

.button-version(@color; @background; @border) {
	#gradient .vertical( lighten(@background, 5%), darken(@background, 5%) );
	background-color: @background;
	border-color: lighten(@background, 5%) @border darken(@background, 10%);
	border-radius: @border-radius-base;
	color: @color;

	&:hover,
	&:focus,
	&:active,
	&.active,
	.open .dropdown-toggle& {
		background-color: darken(@background, 8%);
		border-color: darken(@border, 8%);
		color: @color;
	}
	&:active,
	&.active,
	.open .dropdown-toggle& {
		background-image: none;
	}
	&.disabled,
	&[disabled],
	fieldset[disabled] & {
		&,
		&:hover,
		&:focus,
		&:active,
		&.active {
			background-color: @background;
		}
	}
}