LESS File Style Guide

1_variables-colors.less

/*! _variables-colors.less */

// Colors

@white: #fff;
@black: #000;

// Purple
@purple:       #a5185a;

2_mixins-color-states.less

/*! _mixins-color-states.less */


//
// background-color-states A background color mixin for setting hover and active states
//
// @param {color} @base The base color for the element
// @param {color} @hover The hover color for the element
// @param {color} @active The active color for the element
//
.background-color-states(@base, @hover: softlight(@base, #444), @active: softlight(@hover, #222)) {
	background-color: @base;

	&:hover {
		background-color: @hover;
	}

	&:active {
		background-color: @active;
	}
}


//
// color-states A background color mixin for setting hover and active states.
//
// @param {color} @base The base color for the element
//
.color-states(@base) {
	& when (lightness(@base) = 100%) {
		&,
		&:visited,
		&:hover,
		&:active {
			color: @base;
		}
	}

	& when (lightness(@base) < 100%) {
		&,
		&:visited {
			color: @base;
		}
	}

	& when (lightness(@base) > 25%) and (lightness(@base) < 100%) {
		&:hover {
			color: darken(@base, 10%);
		}

		&:active {
			color: darken(@base, 25%);
		}
	}

	& when (lightness(@base) > 0%) and (lightness(@base) < 25%) {
		&:hover {
			color: screen(@base, #666);
		}

		&:active {
			color: screen(@base, #999);
		}
	}
}

3_references.less

/*! _reference.less */

// Variables
@import (reference) "_variables-colors.less";

// Mixins
@import (reference) "_mixins-color-states.less";

4_block-panel.less

/*! _block-panel.less */

@import (reference) "_reference.less";


// Variables
@panel-padding-xs: 15px;
@panel-padding-lg: 160px;
@panel-feature-height-xs: 600px;
@panel-feature-height-sm: 530px;
@panel-feature-height-md: 630px;
@panel-integration-height: 810px;
@panel-width-xs: 630px;
@panel-width: 1280px;

// Mixins
.panel-light() {
	color: @black;

	em {
		@color: fade(@blue-light, 50%);

		background-color: @color;
		box-shadow: 3px 0 0 @color, -3px 0 0 @color;
	}
}

// Block
.panel {
	box-sizing: border-box;
	padding: @panel-padding-xs;
	position: relative;
	overflow: hidden;
	width: 100%;

	@media @media-screen-lg {
		padding-left: @panel-padding-lg;
		padding-right: @panel-padding-lg;
	}
	
	&--light {
		.panel-light();
	}
}

5_block-panel--feature.less

/*! _block-panel--feature.less */

@import (reference) "_reference.less";

@import (reference) "_block-panel.less";


// Block
.panel--feature {
	background-repeat: no-repeat;
	border-bottom: 6px solid @white;
	padding-bottom: 230px;

	@media @media-screen-sm {
		padding-bottom: @panel-padding-xs;
	}
}