bootswatch.less

// Cosmo 2.3.1
// Bootswatch
// -----------------------------------------------------


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

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

body {
	font-weight: 300;
}

h1 {
	font-size: 50px;
}

h2, h3 {
	font-size: 26px;
}

h4 {
	font-size: 14px;
}

h5, h6 {
	font-size: 11px;
}

blockquote {

	padding: 10px 15px;
	background-color: @grayLighter;
	border-left-color: @gray;

	&.pull-right {
		padding: 10px 15px;
		border-right-color: @gray;
	}

	small {
		color: @gray;
	}
}

.muted {
	color: @gray;
}

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

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

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

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

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

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

.navbar {

	.navbar-inner {
		background-image: none;
		.box-shadow(none);
		.border-radius(0);
	}

	.brand {

		&:hover {
			color: @navbarLinkColorHover;
		}
	}

	.nav > .active > a,
	.nav > .active > a:hover,
	.nav > .active > a:focus {
		.box-shadow(none);
		background-color: @navbarLinkBackgroundHover;
	}

	.nav li.dropdown.open > .dropdown-toggle,
	.nav li.dropdown.active > .dropdown-toggle,
	.nav li.dropdown.open.active > .dropdown-toggle {
		color: @white;

		&:hover {
			color: @grayLighter;
		}
	}

	.navbar-search .search-query {
		line-height: normal;
	}

	&-inverse {

		.brand,
		.nav > li > a {
			text-shadow: none;
		}

		.brand:hover,
		.nav > .active > a,
		.nav > .active > a:hover,
		.nav > .active > a:focus {
			background-color: @navbarInverseLinkBackgroundHover;
			.box-shadow(none);
			color: @white;
		}

		.navbar-search .search-query {
			color: @grayDarker;
		}
	}
}

div.subnav {

	margin: 0 1px;
	background: @grayLight none;
	.box-shadow(none);
	border: none;
	.border-radius(0);

	.nav {
		background-color: transparent;
	}

	.nav > li > a {
		border-color: transparent;
	}

	.nav > .active > a,
	.nav > .active > a:hover {
		border-color: transparent;
		background-color: @black;
		color: @white;
		.box-shadow(none);
	}

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

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

.nav {

	.open .dropdown-toggle,
	& > li.dropdown.open.active > a:hover {
		color: @blue;
	}
}

.nav-tabs {

	& > li > a {
		.border-radius(0);
	}

	&.nav-stacked {

		& > li > a:hover {
			background-color: @blue;
			color: @white;
		}

		& > .active > a,
		& > .active > a:hover {
			background-color: @white;
			color: @gray;
		}

		& > li:first-child > a,
		& > li:last-child > a {
			.border-radius(0);
		}
	}
}

.tabs-below,
.tabs-left,
.tabs-right {

	& > .nav-tabs > li > a{
		.border-radius(0);
	}
}

.nav-pills {

	& > li > a {
		background-color: @grayLight;
		.border-radius(0);
		color: @black;

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

	& > .disabled > a,
	& > .disabled > a:hover {
		background-color: @grayLighter;
		color: @grayDark;
	}
}

.nav-list {

	& > li > a {
		color: @grayDarker;

		&:hover {
			background-color: @blue;
			color: @white;
			text-shadow: none;
		}
	}

	.nav-header {
		color: @grayDarker;
	}

	.divider {
		background-color: @gray;
		border-bottom: none;
	}
}

.pagination {

	ul {

		.box-shadow(none);

		& > li > a,
		& > li > span {
			margin-right: 6px;
			color: @grayDarker;

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

		& > li:last-child > a,
		& > li:last-child > span {
			margin-right: 0;
		}

		& > .active > a,
		& > .active > span { 
			color: @white;
		}

		& > .disabled > span,
		& > .disabled > a,
		& > .disabled > a:hover {
			background-color: @grayLighter;
			color: @grayDark;
		}
	}
}

.pager {

	li > a,
	li > span {
		background-color: @grayLight;
		border: none;
		.border-radius(0);
		color: @grayDarker;

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

	.disabled > a,
	.disabled > a:hover,
	.disabled > span {
		background-color: @grayLighter;
		color: @grayDark;
	}

}

.breadcrumb {
	background-color: @grayLight;

	li {
		text-shadow: none;
	}

	.divider,
	.active {
		color: @grayDarker;
		text-shadow: none;
	}
}

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

.btn {
	padding: 5px 12px;
	background-image: none;
	.box-shadow(none);
	border: none;
	.border-radius(0);
	text-shadow: none;

	&.disabled {
		box-shadow: inset 0 2px 4px rgba(0,0,0,.15),~" "0 1px 2px rgba(0,0,0,.05);
	}
}

.btn-large {
	padding: 22px 30px;
}

.btn-small {
	padding: 2px 10px;
}

.btn-mini {
	padding: 2px 6px;
}

.btn-group {

	& > .btn:first-child,
	& > .btn:last-child,
	& > .dropdown-toggle {
		.border-radius(0);
	}

	& > .btn + .dropdown-toggle {
		.box-shadow(none);
	}
}

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

.table {

	tbody tr.success td {
		color: @white;
	}

	tbody tr.error td {
		color: @white;
	}

	tbody tr.info td {
		color: @white;
	}

	&-bordered {
		.border-radius(0);

		thead:first-child tr:first-child th:first-child,
		tbody:first-child tr:first-child td:first-child {
			.border-radius(0);
		}

		thead:last-child tr:last-child th:first-child,
		tbody:last-child tr:last-child td:first-child,
		tfoot:last-child tr:last-child td:first-child {
			.border-radius(0);
		}
	}
}

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

select, textarea, input[type="text"], input[type="password"], input[type="datetime"],
input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"],
input[type="week"], input[type="number"], input[type="email"], input[type="url"],
input[type="search"], input[type="tel"], input[type="color"] {
	color: @grayDarker;
}

.control-group {

	&.warning {

		.control-label,
		.help-block,
		.help-inline {
			color: @orange;
		}

		input,
		select,
		textarea {
			border-color: @orange;
			color: @grayDarker;
		}
	}

	&.error {

		.control-label,
		.help-block,
		.help-inline {
			color: @red;
		}

		input,
		select,
		textarea {
			border-color: @red;
			color: @grayDarker;
		}
	}

	&.success {

		.control-label,
		.help-block,
		.help-inline {
			color: @green;
		}

		input,
		select,
		textarea {
			border-color: @green;
			color: @grayDarker;
		}
	}
}

legend {
	border-bottom: none;
	color: @grayDarker;
}

.form-actions {
	border-top: none;
	background-color: @grayLighter;
}

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

.dropdown-menu {
	.border-radius(0);
}

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

.alert {
	.border-radius(0);
	text-shadow: none;

	&-heading, h1, h2, h3, h4, h5, h6 {
		color: @white;
	}
}

.label {
	min-width: 80px;
	min-height: 80px;
	.border-radius(0);
	font-weight: 300;
	text-shadow: none;

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

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

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

	&-inverse {
		background-color: @black;
	}
}

.badge {

	.border-radius(0);
	font-weight: 300;
	text-shadow: none;

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

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

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

	&-inverse {
		background-color: @black;
	}
}

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

.hero-unit {
	border: none;
	.border-radius(0);
	.box-shadow(none);
}

.well {
	border: none;
	.border-radius(0);
	.box-shadow(none);
}

[class^="icon-"], [class*=" icon-"] {
	margin: 0 2px;
	vertical-align: -2px;
}

a.thumbnail {
	background-color: @grayLight;

	&:hover {
		background-color: @gray;
		border-color: transparent;
	}
}

.progress {
	height: 6px;
	.border-radius(0);
	.box-shadow(none);
	background-color: @grayLighter;
	background-image: none;

	.bar {
		background-color: @blue;
		background-image: none;
	}

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

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

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

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

.modal {
	.border-radius(0);

	&-header {
		border-bottom: none;
	}

	&-footer {
		border-top: none;
		background-color: transparent;
	}
}

.popover {
	.border-radius(0);
	color: @white;

	&-title {
		border-bottom: none;
		color: @white;
	}

}

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