bootswatch-rails 0.5.0 → 3.1.1

data/vendor/assets/stylesheets/bootswatch/slate/_bootswatch.scss

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