X-Git-Url: http://git.roojs.org/?a=blobdiff_plain;f=slate%2Fbootswatch.less;h=bb883a4ec6d55b4979660de49d2f7775ff9c6e6c;hb=48c64127b37be4a692a70cb7b38ed9744163582b;hp=ff7d91d72f95ad4a852dd465c3bb39d9e9a462c6;hpb=13418ac9e709c85cfbaba501efb69c8bdff7ddd4;p=bootswatch

diff --git a/slate/bootswatch.less b/slate/bootswatch.less
old mode 100755
new mode 100644
index ff7d91d..bb883a4
--- a/slate/bootswatch.less
+++ b/slate/bootswatch.less
@@ -1,586 +1,328 @@
-// Slate 2.3.1
+// Slate 3.0.1
 // Bootswatch
 // -----------------------------------------------------
 
-
-// TYPOGRAPHY
-// -----------------------------------------------------
-
-h1, h2, h3, h4, h5, h6 {
-	text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.3);
+.btn-shadow(@color) {
+	#gradient > .vertical-three-colors(lighten(@color, 6%), @color, 60%, darken(@color, 4%));
 }
 
-code, pre {
-	background-color: #F7F7F7;
-	border: 1px solid darken(@grayDarker, 5%);
-	text-shadow: none;
+.btn-shadow-inverse(@color) {
+	#gradient > .vertical-three-colors(darken(@color, 24%), darken(@color, 18%), 40%, darken(@color, 14%));
 }
 
-// SCAFFOLDING
-// -----------------------------------------------------
-
-legend, .page-header {
-	border-bottom: 1px solid @hrBorder;
-}
-
-hr {
-	border-bottom: none;
-}
-
-// NAVBAR
-// -----------------------------------------------------
+// Navbar =====================================================================
 
 .navbar {
 
-	.navbar-inner {
-		#gradient > .vertical-three-colors(@gray, @grayDark, 70%, @grayDark);
-	}
+	.btn-shadow(@navbar-default-bg);
+	filter: none;
+	border: 1px solid rgba(0, 0, 0, 0.6);
+	text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
 
-	.brand {
-		font-weight: bold;
-		text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
-		border-right: 1px solid darken(@gray, 15%);
-	}
-
-	.navbar-text {
-		padding: 0 15px;
-		font-weight: bold;
+	&-inverse {
+		.btn-shadow(@navbar-inverse-bg);
+		filter: none;
 	}
 
-	.nav > li > a  {
-		text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
+	&-nav > li > a {
 		border-right: 1px solid rgba(0, 0, 0, 0.2);
 		border-left: 1px solid rgba(255, 255, 255, 0.1);
 
 		&:hover {
-			#gradient > .directional(@grayDarker, @grayDark, 280deg);
-			border-left: 1px solid transparent;
-			border-right: 1px solid transparent;
+			.btn-shadow-inverse(@navbar-default-bg);
+			border-left-color: transparent;
 		}
 	}
 
-	.nav > li.active > a,
-	.nav > li.active > a:hover {
-		color: @grayLighter;
-		background-color: @grayDark;
-		#gradient > .directional(lighten(@grayDarker, 4%), lighten(@grayDark, 4%), 280deg);
-		border-right: 1px solid darken(@gray, 15%);
+	.nav .open > a {
+		border-color: transparent;
 	}
 
-	.navbar-search .search-query {
-		border: 1px solid darken(@gray, 15%);
+	&-nav > li.active > a {
+		border-left-color: transparent;
 	}
 
-	.btn,
-	.btn-group {
-		margin: 4px 0;
+	&-form {
+		margin-left: 5px;
+		margin-right: 5px;
 	}
+}
 
-	.divider-vertical {
-		background-color: transparent;
-		border-right: none;
-	}
+// Buttons ====================================================================
 
-	.dropdown-menu::after {
-		border-bottom: 6px solid @grayDark;
-	}
+.btn,
+.btn:hover {
+	border-color: rgba(0, 0, 0, 0.6);
+	text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
+}
 
-	&-inverse {
+.btn-default {
+	.btn-shadow(@btn-default-bg);
+}
 
-		.navbar-inner {
-			#gradient > .vertical-three-colors(darken(@grayDarker, 3%), darken(@grayDarker, 8%), 70%, darken(@grayDarker, 8%));
-		}
+.btn-primary {
+	.btn-shadow(@btn-primary-bg);
+}
 
-		.nav li > a {
-			background-image: none;
-			background-color: transparent;
-		}
+.btn-success {
+	.btn-shadow(@btn-success-bg);
+}
 
-		.nav li > a:hover,
-		.nav li.active > a,
-		.nav li.active > a:hover {
-			#gradient > .directional(darken(@grayDarker, 10%), darken(@grayDarker, 5%), 280deg);
-		}
-	}
+.btn-info {
+	.btn-shadow(@btn-info-bg);
 }
 
-@media (max-width: @navbarCollapseWidth) {
+.btn-warning {
+	.btn-shadow(@btn-warning-bg);
+}
 
-	.navbar .nav-collapse {
+.btn-danger {
+	.btn-shadow(@btn-danger-bg);
+}
 
-		.nav li > a,
-		.nav li > a:hover,
-		.nav .active > a,
-		.nav .active > a:hover {
-			.box-shadow(none);
-			color: @grayLighter;
-			border: 1px solid transparent;
-			background-color: transparent;
-			background-image: none;
-		}
+.btn-default:hover {
+	.btn-shadow-inverse(@btn-default-bg);
+}
 
-		.nav li > a:hover,
-		.nav .active > a:hover {
-			background-color: @grayDarker;
-		}
+.btn-primary:hover {
+	.btn-shadow-inverse(@btn-primary-bg);
+}
 
-		.navbar-form,
-		.navbar-search {
-			border-color: transparent;
-			.box-shadow(none);
-		}
+.btn-success:hover {
+	.btn-shadow-inverse(@btn-success-bg);
+}
 
-		.nav-header {
-			color: @grayLight;
-		}
-	}
+.btn-info:hover {
+	.btn-shadow-inverse(@btn-info-bg);
+}
 
-	.navbar-inverse .nav-collapse {
+.btn-warning:hover {
+	.btn-shadow-inverse(@btn-warning-bg);
+}
 
-		.nav li > a:hover,
-		.nav .active > a:hover {
-			background-color: @grayDarker !important;
-		}
-	}
+.btn-danger:hover {
+	.btn-shadow-inverse(@btn-danger-bg);
 }
 
-div.subnav {
+// Typography =================================================================
 
-	margin: 0 1px;
-	#gradient > .vertical-three-colors(@gray, @grayDark, 70%, @grayDark);
-	border: 1px solid transparent;
-	.box-shadow('0 1px 3px rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.1)');
+h1, h2, h3, h4, h5, h6 {
+	text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.3);
+}
 
-	.nav > li > a {
-		color: @grayLighter;
-		text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
-		border-right: 1px solid darken(@gray, 15%);
-		border-left: 1px solid @gray;
+.text-primary {
+	color: @brand-primary;
+}
 
-		&:hover {
-			color: @grayLighter;
-			background-color: @grayDark;
-			#gradient > .directional(@grayDarker, @grayDark, 280deg);
-			border-left: 1px solid transparent;
-			border-right: 1px solid transparent;
-		}
-	}
+.text-success {
+	color: @brand-success;
+}
 
-	.nav > li.active > a,
-	.nav > li.active > a:hover {
-		color: @grayLighter;
-		background-color: @grayDark;
-		#gradient > .directional(lighten(@grayDarker, 4%), lighten(@grayDark, 4%), 280deg);
-		border-right: 1px solid darken(@gray, 15%);
-	}
+.text-danger {
+	color: @brand-danger;
+}
 
-	.nav > li:first-child > a,
-	.nav > li:first-child > a:hover {
-		border-left: 1px solid transparent;
-	}
+.text-warning {
+	color: @brand-warning;
+}
 
-	.nav > li.active:last-child > a,
-	.nav > li:last-child > a:hover {
-		border-right: 1px solid darken(@gray, 15%);
-	}
+.text-info {
+	color: @brand-info;
+}
+
+// Tables =====================================================================
+
+.table {
 
-	.open .dropdown-toggle {
-		border-right: 1px solid darken(@gray, 15%);
-		border-left: 1px solid @gray;
+	tr.success,
+	tr.warning,
+	tr.danger {
+		color: #fff;
 	}
 
-	&.subnav-fixed {
-		top: @navbarHeight;
-		margin: 0;
-		.box-shadow(none);
+	&-bordered tbody {
+
+		tr.success,
+		tr.warning,
+		tr.danger {
 
-		.nav > li.active:first-child > a,
-		.nav > li:first-child > a:hover {
-			border-left: 1px solid darken(@gray, 15%);
+			td,
+			&:hover td {
+				border-color: @table-border-color;
+			}
 		}
 	}
 }
 
-// NAV
-// -----------------------------------------------------
+.table-responsive > .table {
+	background-color: @table-bg;
+}
 
-.nav {
+// Forms ======================================================================
 
-	.nav-header {
-		text-shadow: -1px -1px 0 rgba(0,0,0,0.3);
+.has-warning {
+	.help-block,
+	.control-label {
+		color: @brand-warning;
 	}
 
-	& > li > a {
-		#gradient > .vertical-three-colors(@gray, @grayDark, 70%, @grayDark);
-		.box-shadow('0 1px 3px rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.1)');
-		border: none;
-		color: @grayLight;
-		font-weight: bold;
-		text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
+	.form-control,
+	.form-control:focus {
+		border-color: @brand-warning;
 	}
+}
 
-	li.active > a,
-	li.active > a:hover {
-		background-color: transparent;
-		border: none;
-		color: @white;
+.has-error {
+	.help-block,
+	.control-label {
+		color: @brand-danger;
 	}
 
-	li > a:hover {
-		background-color: transparent;
-		color: @grayLighter;
+	.form-control,
+	.form-control:focus {
+		border-color: @brand-danger;
 	}
-
 }
 
-.nav-list {
-	background-color: @grayDark;
-	.box-shadow(1px 1px 1px rgba(0, 0, 0, 0.4));
-
-	li > a {
-		background-image: none;
-		text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.3);
+.has-success {
+	.help-block,
+	.control-label {
+		color: @brand-success;
 	}
 
-	.nav-header {
-		color: @gray;
-		text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.3);
-	}
-
-	.divider {
-		border-bottom: 1px solid darken(@grayDarker, 5%);
-		background-color: transparent;
+	.form-control,
+	.form-control:focus {
+		border-color: @brand-success;
 	}
 }
 
-.nav-tabs {
-	border-bottom: none;
+legend {
+	color: #fff;
 }
 
-.tabs-below .nav-tabs {
-	border-top: none;
+.input-group-addon {
+	border-color: rgba(0, 0, 0, 0.6);
+	text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
+	.btn-shadow(@btn-default-bg);
 }
 
-.tabs-left .nav-tabs {
-	border-right: none;
-}
-
-.tabs-right .nav-tabs {
-	border-left: none;
-}
+// Navs =======================================================================
 
-.nav-tabs.nav-stacked {
+.nav {
 
-	li > a,
-	li > a:hover {
-		border: 1px solid darken(@grayDarker, 5%);
-		background-image: none;
+	.open > a,
+	.open > a:hover,
+	.open > a:focus {
+		border-color: rgba(0, 0, 0, 0.6);
 	}
 
-	li > a:hover,
-	.active > a,
-	.active > a:hover {
-		background-color: @wellBackground;
-		color: @white;
-	}
 }
 
-.breadcrumb {
-	border: 1px solid transparent;
-	#gradient > .vertical-three-colors(@gray, @grayDark, 70%, @grayDark);
-	.box-shadow('0 1px 3px rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.1)');
+.nav-pills {
 
-	a {
-		color: @grayLighter;
-		font-weight: bold;
+	& > li > a {
+		.btn-shadow(@btn-default-bg);
+		border: 1px solid rgba(0, 0, 0, 0.6);
+		text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
+
+		&:hover {
+			.btn-shadow-inverse(@btn-default-bg);
+			border: 1px solid rgba(0, 0, 0, 0.6);
+		}
 	}
 
-	li {
-		color: @grayLight;
-		font-weight: bold;
-		text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
+	& > li.active > a,
+	& > li.active > a:hover {
+		background-color: none;
+		.btn-shadow-inverse(@btn-default-bg);
+		border: 1px solid rgba(0, 0, 0, 0.6);
+	}
+
+	& > li.disabled > a,
+	& > li.disabled > a:hover {
+		.btn-shadow(@btn-default-bg);
 	}
 }
 
 .pagination {
 
-	ul {
-		.box-shadow(none);
-	}
-
-	ul > li > a,
-	ul > li > span {
-		border-left: 1px solid @gray;
-		border-right: 1px solid darken(@gray, 15%);
-		border-top: none;
-		border-bottom: none;
-		#gradient > .vertical-three-colors(@gray, @grayDark, 70%, @grayDark);
-		.box-shadow('0 1px 3px rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.1)');
-		color: @grayLighter;
-		font-weight: bold;
+	& > li > a {
 		text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
+		.btn-shadow(@btn-default-bg);
 
 		&:hover {
-			#gradient > .directional(@grayDarker, @grayDark, 280deg);
-			border-left: 1px solid transparent;
+			.btn-shadow-inverse(@btn-default-bg);
 		}
 	}
 
-	ul > .active > a,
-	ul > .active > a:hover,
-	ul > .active > span,
-	ul > .active > span:hover {
-		color: @grayLighter;
-		background-color: @grayDark;
-		#gradient > .directional(lighten(@grayDarker, 4%), lighten(@grayDark, 4%), 280deg);
-		border-left: 1px solid transparent;
+	& > li.active > a {
+		.btn-shadow-inverse(@btn-default-bg);
+		border-color: rgba(0, 0, 0, 0.6);
 	}
 
-	ul > .disabled > a,
-	ul > .disabled > a:hover,
-	ul > .disabled > span,
-	ul > .disabled > span:hover {
-		border-left: 1px solid @gray;
-		border-right: 1px solid darken(@gray, 15%);
-		border-top: none;
-		border-bottom: none;
-		#gradient > .vertical-three-colors(@grayLight, @gray, 70%, @gray);
+	& > li.disabled > a,
+	& > li.disabled > a:hover {
+		background-color: transparent;
+		.btn-shadow(@btn-default-bg);
 	}
 }
 
 .pager {
 
-	li > a,
-	li > span {
-		border: 1px solid transparent;
-		.box-shadow('0 1px 3px rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.1)');
-		#gradient > .vertical-three-colors(@gray, @grayDark, 70%, @grayDark);
+	& > li > a {
+		.btn-shadow(@btn-default-bg);
+		border: 1px solid rgba(0, 0, 0, 0.6);
+		text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
 
 		&:hover {
-			#gradient > .directional(@grayDarker, @grayDark, 280deg);
-			border: 1px solid transparent;
+			.btn-shadow-inverse(@btn-default-bg);
+			border: 1px solid rgba(0, 0, 0, 0.6);
 		}
-	}	
-
-	.disabled a,
-	.disabled a:hover {
-		background-color: transparent;
 	}
-}
-
-// BUTTONS
-// -----------------------------------------------------
-
-.btn {
-    .buttonBackground(@gray, darken(@gray, 10%));
-	.border-radius(3px);
-	border: 1px solid @grayDarker;
-}
 
-.btn, .btn:hover {
-	color: @white;
-	font-weight: bold;
-	text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.3);
-}
-
-.btn-primary {
-	.buttonBackground(@btnPrimaryBackground, spin(@btnPrimaryBackground, 20));
-	color: @grayDark;
-	text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.3);
-}
-
-.btn-warning {
-	.buttonBackground(lighten(@orange, 15%), @orange);
-}
-
-.btn-danger {
-	.buttonBackground(@red, #bd362f);
-}
-
-.btn-success {
-	.buttonBackground(@green, #51a351);
-}
-
-.btn-info {
-	.buttonBackground(@blue, #2f96b4);
-}
-
-.btn-inverse {
-	.buttonBackground(@gray, @grayDarker);
-}
-
-.caret {
-	border-top-color: @white;
-}
-
-// TABLES
-// -----------------------------------------------------
-
-.table {
-
-	tbody tr.success td {
-		background-color: @successText;
-	}
-
-	tbody tr.error td {
-		background-color: @errorText;
-	}
-
-	tbody tr.info td {
-		background-color: @infoText;
+	& > li.disabled > a,
+	& > li.disabled > a:hover {
+		background-color: transparent;
+		.btn-shadow(@btn-default-bg);
 	}
-
-}
-
-
-// FORMS
-// -----------------------------------------------------
-
-label, input, button, select, textarea, legend {
-	color: @textColor;
 }
 
-legend, label {
-	text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.3);
-}
-
-.input-prepend .add-on,
-.input-append .add-on {
-	vertical-align: top;
-	background-color: @gray;
-	border-top: 1px solid @grayLight;
-	border-left: 1px solid @grayLight;
-	border-bottom: 1px solid @grayDark;
-	border-right: 1px solid @grayDark;
-	text-shadow: none;
-}
-
-.input-append .btn,
-.input-prepend .btn {
-	margin-top: -1px;
-	padding: 5px 14px;
-}
-
-.uneditable-input,
-input[disabled],
-select[disabled],
-textarea[disabled],
-input[readonly],
-select[readonly],
-textarea[readonly] {
-	color: @grayLighter;
-}
-
-.form-actions {
-	border-top: none;
-}
-
-// DROPDOWNS
-// -----------------------------------------------------
-
-.dropdown-menu {
-	.box-shadow(0 5px 5px rgba(0, 0, 0, 0.2));
-}
-
-.dropdown.open .dropdown-toggle {
-	background-color: @grayDark;
-	color: @grayLighter;
-}
-
-.dropdown-submenu > a::after {
-	border-left-color: @white;
+.breadcrumb {
+	border: 1px solid rgba(0, 0, 0, 0.6);
+	text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
+	.btn-shadow(@btn-default-bg);
 }
 
-// ALERTS, LABELS, BADGES
-// -----------------------------------------------------
-
-.label, .alert {
-  	color: rgba(255, 255, 255, 0.9);
-	text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.3);
-	.box-shadow(1px 1px 1px rgba(0, 0, 0, 0.3));
-}
+// Indicators =================================================================
 
 .alert {
-  background-color: @orange;
-  border-color: @orange;
 
-	.alert-heading {
-		color: rgba(255, 255, 255, 0.9);
-		text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.4);
+	.alert-link,
+	a {
+		color: #fff;
+		text-decoration: underline;
 	}
 }
 
-.alert-success {
-  background-color: @successText;
-  border-color: @successText;
-}
-
-.alert-error {
-  background-color: @errorText;
-  border-color: @errorText;
-}
-
-.alert-info {
-  background-color: @infoText;
-  border-color: @infoText;
-}
-
-// MISC
-// -----------------------------------------------------
-
-.well, .hero-unit {
-	.box-shadow(inset 1px 1px 1px rgba(0, 0, 0, 0.5));
-}
-
-.thumbnail,
-a.thumbnail:hover {
-  border: 1px solid darken(@grayDarker, 5%);
-}
-
-.progress {
-	background-color: darken(@grayDarker, 3%);
-	#gradient > .vertical(darken(@grayDarker, 3%), darken(@grayDarker, 3%));
-	.box-shadow(inset 1px 1px 1px rgba(0, 0, 0, 0.5));
-}
+// Progress bars ==============================================================
 
-.footer {
-	border-top: 1px solid darken(@grayDarker, 5%);
+// Containers =================================================================
 
-	p {
-		color: @textColor;
-	}
+.jumbotron {
+	border: 1px solid rgba(0, 0, 0, 0.6);
 }
 
-.modal {
-
-	background-color: darken(@grayDark, 5%);
-
-	&-header {
-		border-bottom: none;
-	}
-
-	&-body {
-		border-bottom: 1px solid #1C1E22;
-	}
-
-	&-footer {
-		border-top: none;
-		background-color: @grayDarker;
-		.box-shadow(none);
-	}
+.list-group-item {
+	background-color: lighten(@body-bg, 5%);
 }
 
-// MEDIA QUERIES
-// -----------------------------------------------------
-
-@media (max-width: 979px) {
-	.navbar .brand {
-		border-right: none;
-	}
-}
+.panel-primary,
+.panel-success,
+.panel-danger,
+.panel-warning,
+.panel-info {
 
-@media (max-width: 768px) {
-	div.subnav .nav > li + li > a {
-		border-top: 1px solid transparent;
+	.panel-heading {
+		border-color: #000;
 	}
 }
\ No newline at end of file