bootswatch/2/simplex/bootswatch.less

Bootswatch is a collection of themes for Bootstrap.

// Simplex 2.3.2
// Bootswatch.less
// -----------------------------------------------------


@boxShadow: 1px 1px 1px rgba(0, 0, 0, 0.2);

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

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

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

hr {
	border-bottom: none;
}

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

.navbar {

	.navbar-inner {
		.box-shadow(none);
	}

	.brand {
		padding: 12px 20px 8px;
		font-family: @headingsFontFamily;
		font-weight: bold;

		&:hover {
			color: @linkColor;
		}
	}

	.nav > li > a {
		padding: 13px 15px 6px;
		font-family: @headingsFontFamily;
		font-weight: bold;
		text-shadow: none;

		&:hover {
			text-decoration: none;
		}
	}

	.nav .active > a,
	.nav .active > a:hover {
		background-color: transparent;
	}

	.navbar-text {
		padding: 13px 15px 7px;
		line-height: 19px;
		font-family: @headingsFontFamily;
		color: @grayLight;
	}

	.divider-vertical {
		height: @navbarHeight - 1;
		background-color: @hrBorder;
	}

	.navbar-search {
		margin-top: 5px;

		input[type="text"] {
			margin-bottom: 5px;
		}
	}

	.dropdown-menu a {
		font-family: @headingsFontFamily;
	}

	&-inverse {

		.navbar-inner {
			.box-shadow(none);
		}

		.brand:hover {
			color: @white;
		}
	}
}

@media (max-width: @navbarCollapseWidth) {

	.navbar .nav-collapse {

		.nav li > a {
			color: @textColor;

			&:hover {
				background-image: none;
				background-color: @dropdownLinkBackgroundHover;
			}
		}

		.nav .active > a {
			.box-shadow(none);
		}

		.navbar-form,
		.navbar-search {
			border-top: 1px solid rgba(128, 128, 128, 0.3);
			border-bottom: 1px solid rgba(128, 128, 128, 0.3);
		}
	}

	.navbar-inverse .nav-collapse {

		.nav li > a {
			color: @white;

			&:hover {
				background-color: rgba(255, 255, 255, 0.1) !important;
			}
		}

		.nav-header {
			color: rgba(255, 255, 255, 0.7);
		}
	}
}

div.subnav {

	background-image: none;
	background-color: @navbarBackground;
	border-bottom: 1px solid transparent;
	.box-shadow(@boxShadow);
	font-family: @headingsFontFamily;

	&.subnav-fixed {
		top: @navbarHeight + 1;
		.box-shadow(inset 0 5px #fff~"," @boxShadow);
	}

	.nav > li > a {
		padding: 14px 12px 10px;
		border-left-color: transparent;
		border-right-color: transparent;
		color: @navbarText;
		font-weight: bold;

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

	.nav > li.active > a,
	.nav > li.active > a:hover {
		border-left-color: transparent;
		border-right-color: transparent;
		background-color: transparent;
		.box-shadow(none);
		color: @linkColor;
	}
}

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

.nav .nav-header {
	font-size: 13px;
	font-weight: normal;
	text-transform: none;
}

.nav-tabs {

	& > li > a {
		background-color: darken(@bodyBackground, 3%);
		border: 1px solid #ccc;
		color: @textColor;

		&:hover {
			border: 1px solid #ccc;
			background-color: @dropdownLinkBackgroundHover;
			color: @linkColor;
		}
	}

	& > li.active > a,
	& > li.active > a:hover {
		background-color: @bodyBackground;
	}

	& > li.disabled > a:hover {
		background-color: darken(@bodyBackground, 3%);
		color: @grayLight;
	}

	.dropdown {

		.dropdown-toggle .caret {
			border-top-color: @textColor;
			border-bottom-color: @textColor;
			opacity: 1;
		}

		&:hover .dropdown-toggle .caret {
			border-top-color: @linkColor;
			border-bottom-color: @linkColor;
		}
	}

	.dropdown.open .dropdown-toggle {

		background-color: @dropdownLinkBackgroundHover;
		border-color: #ccc;
		color: @linkColor;

		.caret,
		&:hover .caret {
			border-top-color: @linkColor;
			border-bottom-color: @linkColor;
			opacity: 1;
		}
	}

	.dropdown-menu {

		.border-radius(0);

		a {
			padding: 8px 15px 3px;
		}
	}
}

.tabbable {

	.nav-tabs > li > a,
	.nav-tabs > li > a:hover {
		border: 1px solid #ccc;
	}

	.nav-tabs > li.active > a {
		border-bottom: 1px solid transparent;
	}

	&.tabs-below > .nav-tabs > li.active > a,
	&.tabs-left > .nav-tabs > li.active > a,
	&.tabs-right > .nav-tabs > li.active > a {
		border-bottom: 1px solid #ccc;
	}
}

.nav-pills {

	li > a {
		color: @textColor;

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

	li.active > a,
	li.active > a:hover {
		background-color: @dropdownLinkBackgroundHover;
		color: @linkColor;
	}

	& > li.disabled > a:hover {
		color: @grayLight;
	}

	.dropdown .dropdown-toggle .caret {
		border-top-color: @textColor;
		border-bottom-color: @textColor;
		opacity: 1;
	}

	.dropdown .dropdown-toggle:hover .caret {
		border-top-color: @linkColor;
		border-bottom-color: @linkColor;
	}

	.dropdown.open .dropdown-toggle,
	.dropdown.open:hover .dropdown-toggle {
		background-color: @dropdownLinkBackgroundHover;
		color: @linkColor;

		.caret {
			border-top-color: @linkColor;
			border-bottom-color: @linkColor;
		}
	}
}

.nav-list {

	li > a {
		color: @textColor;

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

	li.active > a,
	li.active > a:hover {
		background-color: @dropdownLinkBackgroundHover;
		color: @linkColor;
	}
}

.breadcrumb {
	background-color: @white;
	border: 0px solid transparent;
	.box-shadow(@boxShadow~", "-1px -1px 0 rgba(0, 0, 0, 0.1));

	li {
		padding-top: 2px;
		text-shadow: none;
	}

	.active {
		color: @textColor;
	}

	a {
		text-shadow: none;
	}

	a:hover {
		text-decoration: none;
	}
}

.pagination {

	ul > li > a,
	ul > li > span {
		padding: 2px 14px 0;
		color: @textColor;

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

	ul > .active > a,
	ul > .active > span {
		background-color: @dropdownLinkBackgroundHover;
		color: @linkColor;
	}

	ul > .disabled > a,
	ul > .disabled > a:hover,
	ul > .disabled > span,
	ul > .disabled > span:hover {
		background-color: transparent;
		color: @textColor;
	}
}


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

.btn {
	padding-top: .6em;
	font-family: @headingsFontFamily;
	font-weight: bold;
}

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

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

legend {
	border-bottom: 1px solid #ddd;
	font-family: @headingsFontFamily;
}

.navbar-search .search-query {
	border: 1px solid #ddd;
	.border-radius(0);
	background-color: @bodyBackground;
	color: @gray;
}

.help-inline, .help-block {
	font-size: 13px;
}

.input-append .btn,
.input-prepend .btn {
	line-height: 16px;
}

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

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

.label {
	padding: 6px 12px;
	margin-left: 1px;
	margin-right: 1px;
}

// MISCELLANEOUS
// -----------------------------------------------------

i[class^="icon-"]{
	opacity: 0.5;
	vertical-align: -2px;
}

.well {
	.box-shadow(@boxShadow~", "-1px -1px 0 rgba(0, 0, 0, 0.1));
	border: none;
}

.hero-unit {
	background-color: @navbarBackground;
	.box-shadow(@boxShadow~", "-1px -1px 0 rgba(0, 0, 0, 0.1));
}

.thumbnail {
	padding: 10px;
	background-color: @white;
}

.progress {
    #gradient > .vertical(#e0e0e0, #e8e8e8);
}

.modal {

	&-header {
		border-bottom: none;
	}

	&-header,
	&-body {
		background-color: @navbarBackground;
	}

	&-footer {
		background-color: @bodyBackground;
	}
}

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