bootswatch/2/spacelab/bootswatch.less

Bootswatch is a collection of themes for Bootstrap.

// Spacelab 2.3.2
// Bootswatch
// -----------------------------------------------------


// TYPOGRAPHY
// -----------------------------------------------------

@import url('//fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,400,700');

.text-warning        { color: @warningBackground; }
a.text-warning:hover,
a.text-warning:focus { color: darken(@warningBackground, 10%); }

.text-error          { color: @errorBackground; }
a.text-error:hover,
a.text-error:focus   { color: darken(@errorBackground, 10%); }

.text-info           { color: @infoBackground; }
a.text-info:hover,
a.text-info:focus    { color: darken(@infoBackground, 10%); }

.text-success        { color: @successBackground; }
a.text-success:hover,
a.text-success:focus { color: darken(@successBackground, 10%); }

// SCAFFOLDING
// -----------------------------------------------------

// NAVBAR
// -----------------------------------------------------

.navbar {

	.brand {

		text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);
		.transition(color ease-in-out .2s);

		&:hover {
			color: @navbarLinkColorHover;
			.transition(color ease-in-out .2s);
		}
	}

	.nav > li > a {
		padding: 11px 10px 8px;
		text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);
		.transition(color ease-in-out .2s);

		&:hover {
			.transition(color ease-in-out .2s);
		}
	}

	.navbar-text {
		padding: 11px 10px 8px;
		line-height: inherit;
	}

	.navbar-search .search-query,
	.navbar-search .search-query:hover {
		margin-bottom: 0;
		line-height: normal;
		color: @grayLight;
		.placeholder(@grayLight);
		.box-shadow(inset 0 1px 2px rgba(0, 0, 0, 0.5));

	    &:focus,
	    &.focused {
			.box-shadow(inset 0 1px 2px rgba(0, 0, 0, 0.5));
			color: @textColor;
		}
	}

	&-inverse {

		.brand {
			text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.3);

			&:hover {
				color: @white;
			}
		}

		.nav > li > a {
			text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.3);
		}

		.nav li.dropdown.open > .dropdown-toggle .caret,
		.nav li.dropdown:hover > .dropdown-toggle .caret,
		.nav li.dropdown.open:hover > .dropdown-toggle .caret {
			border-top-color: @white;
		}

		.navbar-search .search-query,
		.navbar-search .search-query:hover {

			color: @white;

			.placeholder(@grayLighter);
		}
	}
}

@media (max-width: @navbarCollapseWidth) {

	.navbar .nav-collapse {

		.nav li > a:hover {
			background-color: @linkColor;
			color: @white;
			text-shadow: none;
		}

		.navbar-search {
			border-top: none;
			border-bottom: none;
		}
	}

	.navbar-inverse .nav-collapse {

		.nav li > a {
			color: @grayLight !important;

			&:hover {
				background-color: @linkColor !important;
			}
		}

		.nav-header {
			color: @grayLighter;
		}
	}
}

div.subnav {

	.nav > li > a {

		color: @navbarLinkColor;
		.transition(color ease-in-out .2s);

		&:hover {
			border-left-color: @grayLight;
			color: @navbarLinkColorHover;
			.transition(color ease-in-out .2s);
		}
	}

	.nav > li.active > a {

		color: @textColor;

		&:hover {
			color: @textColor;
		}
	}

	.nav > li.dropdown > .dropdown-toggle {
		background-color: transparent;
	}

	.nav > li.dropdown.open > .dropdown-toggle {

		border-left: 1px solid whiteSmoke;
		border-right: 1px solid #E5E5E5;
		color: @textColor;

		&:hover {
			color: @linkColor;
		}
	}

	&-fixed {
		top: @navbarHeight + 1;
	}
}

// NAV
// -----------------------------------------------------

.nav > li > a:hover,
.nav > li > a:focus {
	background-color: rgba(0, 0, 0, 0.05);
}

.nav > li.dropdown > .dropdown-toggle,
.nav > li.dropdown.active > .dropdown-toggle,
.nav > li.dropdown.open > .dropdown-toggle,
.nav > li.dropdown.open.active > .dropdown-toggle  {

	.caret {
		border-top: 4px solid @textColor;
		border-top-color: @textColor;
		opacity: 1;
	}

	&:hover .caret {
		border-top: 4px solid @linkColorHover;
		border-top-color: @linkColorHover;
	}
}

.nav-list .divider {
	background-color: @dropdownDividerTop;
	border-bottom-color: @dropdownDividerBottom;
}

// BUTTONS
// -----------------------------------------------------

[class^="icon-"],
[class*=" icon-"] {
	margin-top: 4px;
}

// TABLES
// -----------------------------------------------------

.table {

	tbody tr.success > td,
	tbody tr.error > td,
	tbody tr.info > td {
		color: @white;
	}

}

// FORMS
// -----------------------------------------------------

.control-group.warning {
	.formFieldState(#E29235, #E29235, @warningBackground);
}

.control-group.error {
	.formFieldState(#C00, #C00, @errorBackground);
}

.control-group.success {
	.formFieldState(#2BA949, #2BA949, @successBackground);
}

.control-group.info {
	.formFieldState(@blue, @blue, @infoBackground);
}

// DROPDOWNS
// -----------------------------------------------------

// ALERTS, LABELS, BADGES
// -----------------------------------------------------

.alert {
	
	text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);

	h1, h2, h3, h4, h5, h6 {
		color: @white;
		font-weight: bold;
		text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
	}

	a {
		color: @white;
		text-decoration: underline;
	}
}

.label, .badge {

	&-important {
		background-color: @red;
	}

	&-warning {
		background-color: @orange;
	}

	&-success {
		background-color: @green;
	}

	&-info {
		background-color: @blue;
	}
}

// MISC
// -----------------------------------------------------

.well {
	// .box-shadow(inset 1px 1px 0 rgba(0,0,0,.1));
}

.hero-unit {
	// .box-shadow(inset 1px 1px 0 rgba(0,0,0,.1));
	border: 1px solid rgba(0,0,0,.1);
}

// MEDIA QUERIES
// -----------------------------------------------------