assets/stylesheets/superhero/_bootswatch.scss in bootswatch-sass-3.3.1.3 vs assets/stylesheets/superhero/_bootswatch.scss in bootswatch-sass-3.3.1.4
- old
+ new
@@ -1,232 +1,332 @@
+// Superhero 3.3.1
+// Bootswatch
+// -----------------------------------------------------
+
@import url("//fonts.googleapis.com/css?family=Lato:300,400,700");
+
+// Navbar =====================================================================
+
.navbar {
- -webkit-box-shadow: none;
- box-shadow: none;
+ @include box-shadow(none);
border: none;
font-size: 12px;
+
+ &-default {
+
+ .badge {
+ background-color: #fff;
+ color: $navbar-default-bg;
+ }
+ }
+
+ &-inverse {
+
+ .badge {
+ background-color: #fff;
+ color: $navbar-inverse-bg;
+ }
+ }
}
-.navbar-default .badge {
- background-color: #fff;
- color: #4e5d6c;
-}
-.navbar-inverse .badge {
- background-color: #fff;
- color: #df691a;
-}
+
+// Buttons ====================================================================
+
.btn {
+
font-weight: 300;
+
+ &-default {
+ &:hover {
+ background-color: darken($btn-default-bg, 3%);
+ }
+ }
+
+ &-sm,
+ &-xs {
+ font-size: 12px;
+ }
}
-.btn-default:hover {
- background-color: #485563;
-}
-.btn-sm,
-.btn-xs {
- font-size: 12px;
-}
+
+// Typography =================================================================
+
body {
font-weight: 300;
}
+
.text-primary,
.text-primary:hover {
- color: #df691a;
+ color: $brand-primary;
}
+
.text-success,
.text-success:hover {
- color: #5cb85c;
+ color: $brand-success;
}
+
.text-danger,
.text-danger:hover {
- color: #d9534f;
+ color: $brand-danger;
}
+
.text-warning,
.text-warning:hover {
- color: #f0ad4e;
+ color: $brand-warning;
}
+
.text-info,
.text-info:hover {
- color: #5bc0de;
+ color: $brand-info;
}
+
.page-header {
- border-bottom-color: #4e5d6c;
+ border-bottom-color: $table-border-color;
}
+
.dropdown-menu {
+
border: none;
margin: 0;
- -webkit-box-shadow: none;
- box-shadow: none;
+ @include box-shadow(none);
+
+ > li > a {
+ font-size: 12px;
+ font-weight: 300;
+ }
}
-.dropdown-menu > li > a {
- font-size: 12px;
- font-weight: 300;
-}
+
.btn-group.open .dropdown-toggle {
- -webkit-box-shadow: none;
- box-shadow: none;
+ @include box-shadow(none);
}
+
.dropdown-header {
font-size: 12px;
}
+
+// Tables =====================================================================
+
table,
.table {
font-size: 12px;
-}
-table a:not(.btn),
-.table a:not(.btn) {
- color: #fff;
- text-decoration: underline;
-}
-table .dropdown-menu a,
-.table .dropdown-menu a {
- text-decoration: none;
-}
-table .text-muted,
-.table .text-muted {
- color: #4e5d6c;
-}
-table > thead > tr > th,
-.table > thead > tr > th,
-table > tbody > tr > th,
-.table > tbody > tr > th,
-table > tfoot > tr > th,
-.table > tfoot > tr > th,
-table > thead > tr > td,
-.table > thead > tr > td,
-table > tbody > tr > td,
-.table > tbody > tr > td,
-table > tfoot > tr > td,
-.table > tfoot > tr > td {
- border-color: transparent;
-}
+
+ a:not(.btn) {
+ color: #fff;
+ text-decoration: underline;
+ }
+
+ .dropdown-menu a {
+ text-decoration: none;
+ }
+
+ .text-muted {
+ color: $text-muted;
+ }
+
+ > thead > tr > th,
+ > tbody > tr > th,
+ > tfoot > tr > th,
+ > thead > tr > td,
+ > tbody > tr > td,
+ > tfoot > tr > td {
+ border-color: transparent;
+ }
+ }
+
+// Forms ======================================================================
+
input,
textarea {
- color: #2b3e50;
+ color: $input-color;
}
+
label,
.radio label,
.checkbox label,
.help-block {
font-size: 12px;
font-weight: 300;
}
+
.input-addon,
.input-group-addon {
- color: #ebebeb;
+ color: $text-color;
}
-.has-warning .help-block,
-.has-warning .control-label,
-.has-warning .form-control-feedback {
- color: #f0ad4e;
+
+.has-warning {
+ .help-block,
+ .control-label,
+ .form-control-feedback {
+ color: $brand-warning;
+ }
+
+ .input-group-addon {
+ border: none;
+ }
}
-.has-warning .input-group-addon {
- border: none;
+
+.has-error {
+ .help-block,
+ .control-label,
+ .form-control-feedback {
+ color: $brand-danger;
+ }
+
+ .input-group-addon {
+ border: none;
+ }
}
-.has-error .help-block,
-.has-error .control-label,
-.has-error .form-control-feedback {
- color: #d9534f;
+
+.has-success {
+ .help-block,
+ .control-label,
+ .form-control-feedback {
+ color: $brand-success;
+ }
+
+ .input-group-addon {
+ border: none;
+ }
}
-.has-error .input-group-addon {
- border: none;
-}
-.has-success .help-block,
-.has-success .control-label,
-.has-success .form-control-feedback {
- color: #5cb85c;
-}
-.has-success .input-group-addon {
- border: none;
-}
+
.form-control:focus {
- -webkit-box-shadow: none;
- box-shadow: none;
+ @include box-shadow(none);
}
-.has-warning .form-control:focus,
-.has-error .form-control:focus,
-.has-success .form-control:focus {
- -webkit-box-shadow: none;
- box-shadow: none;
+
+.has-warning,
+.has-error,
+.has-success {
+ .form-control:focus {
+ @include box-shadow(none);
+ }
}
-.nav .open > a,
-.nav .open > a:hover,
-.nav .open > a:focus {
- border-color: transparent;
+
+// Navs =======================================================================
+
+.nav {
+ .open > a,
+ .open > a:hover,
+ .open > a:focus {
+ border-color: transparent;
+ }
}
-.nav-tabs > li > a {
- color: #ebebeb;
+
+.nav-tabs {
+ > li > a {
+ color: $text-color;
+ }
}
-.nav-pills > li > a {
- color: #ebebeb;
+
+.nav-pills {
+ > li > a {
+ color: $text-color;
+ }
}
-.pager a {
- color: #ebebeb;
+
+.pager {
+ a {
+ color: $text-color;
+ }
}
+
+// Indicators =================================================================
+
.label {
font-weight: 300;
}
+
.alert {
color: #fff;
+
+ a,
+ .alert-link {
+ color: #fff;
+ }
}
-.alert a,
-.alert .alert-link {
- color: #fff;
-}
+
.close {
opacity: 0.4;
+
+ &:hover,
+ &:focus {
+ opacity: 1;
+ }
}
-.close:hover,
-.close:focus {
- opacity: 1;
-}
+
+// Progress bars ==============================================================
+
+// Containers =================================================================
+
.well {
- -webkit-box-shadow: none;
- box-shadow: none;
+ @include box-shadow(none);
}
-a.list-group-item.active,
-a.list-group-item.active:hover,
-a.list-group-item.active:focus {
- border: none;
+
+a.list-group-item {
+
+ &.active,
+ &.active:hover,
+ &.active:focus {
+ border: none;
+ }
+
+ &-success {
+ &.active {
+ background-color: $state-success-bg;
+ }
+
+ &.active:hover,
+ &.active:focus {
+ background-color: darken($state-success-bg, 5%);
+ }
+ }
+
+ &-warning {
+ &.active {
+ background-color: $state-warning-bg;
+ }
+
+ &.active:hover,
+ &.active:focus {
+ background-color: darken($state-warning-bg, 5%);
+ }
+ }
+
+ &-danger {
+ &.active {
+ background-color: $state-danger-bg;
+ }
+
+ &.active:hover,
+ &.active:focus {
+ background-color: darken($state-danger-bg, 5%);
+ }
+ }
}
-a.list-group-item-success.active {
- background-color: #5cb85c;
-}
-a.list-group-item-success.active:hover,
-a.list-group-item-success.active:focus {
- background-color: #4cae4c;
-}
-a.list-group-item-warning.active {
- background-color: #f0ad4e;
-}
-a.list-group-item-warning.active:hover,
-a.list-group-item-warning.active:focus {
- background-color: #eea236;
-}
-a.list-group-item-danger.active {
- background-color: #d9534f;
-}
-a.list-group-item-danger.active:hover,
-a.list-group-item-danger.active:focus {
- background-color: #d43f3a;
-}
+
.panel {
border: none;
+
+ &-default > .panel-heading {
+ background-color: $table-bg-hover;
+ color: $text-color;
+ }
}
-.panel-default > .panel-heading {
- background-color: #485563;
- color: #ebebeb;
-}
+
.thumbnail {
- background-color: #4e5d6c;
+ background-color: $well-bg;
border: none;
}
+
.modal {
padding: 0;
+
+ &-header,
+ &-footer {
+ background-color: $table-bg-hover;
+ border: none;
+ border-radius: 0;
+ }
}
-.modal-header,
-.modal-footer {
- background-color: #485563;
- border: none;
- border-radius: 0;
-}
-.popover-title {
- border: none;
+
+.popover {
+ &-title {
+ border: none;
+ }
}