app/assets/stylesheets/bootswatch/slate/_bootswatch.scss in bootswatch-4.0.0.alpha6 vs app/assets/stylesheets/bootswatch/slate/_bootswatch.scss in bootswatch-4.0.0.beta2
- old
+ new
@@ -1,9 +1,11 @@
// Slate 4.0.0
// Bootswatch
+// Variables ===================================================================
+
@mixin btn-shadow($color){
@include gradient-y-three-colors(lighten($color, 6%), $color, 60%, darken($color, 4%));
filter: none;
}
@@ -20,14 +22,10 @@
.container {
padding: 0;
}
- .navbar-nav {
- margin-top: 0;
- }
-
.navbar-toggler {
border-color: rgba(0, 0, 0, 0.6);
margin-top: 0.5rem;
margin-right: 0.5rem;
}
@@ -45,11 +43,11 @@
border-left: 1px solid rgba(255, 255, 255, 0.1);
border-right: 1px solid rgba(0, 0, 0, 0.2);
&:hover,
&:focus {
- @include btn-shadow-inverse($gray);
+ @include btn-shadow-inverse($gray-800);
border-left: 1px solid rgba(0, 0, 0, 0.2);
}
}
&-brand {
@@ -65,76 +63,110 @@
&-nav .nav-item + .nav-item {
margin-left: 0;
}
- .form-inline {
- padding-top: 0.35rem;
+ &.bg-light {
+ text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
+
+ .nav-link {
+ &:hover,
+ &:focus {
+ @include btn-shadow-inverse($gray-600);
+ border-left: 1px solid rgba(0, 0, 0, 0.2);
+ }
+ }
}
}
-.bg-primary {
- background-color: $gray !important;
-}
-
-.bg-inverse {
- background-color: $brand-primary !important;
-}
-
// Buttons =====================================================================
-.btn,
-.btn:hover {
+.btn {
border-color: rgba(0, 0, 0, 0.6);
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
+
+ &:not([disabled]):not(.disabled).active,
+ &.disabled {
+ border-color: rgba(0, 0, 0, 0.6);
+ box-shadow: none;
+ }
+
+ &:hover,
+ &:focus,
+ &:not([disabled]):not(.disabled):active,
+ &:not([disabled]):not(.disabled):active:hover,
+ &:not([disabled]):not(.disabled).active:hover {
+ border-color: rgba(0, 0, 0, 0.6);
+ }
}
.btn-primary {
- @include btn-shadow($btn-primary-bg);
+ @include btn-shadow($primary);
- &:hover {
- @include btn-shadow-inverse($btn-primary-bg);
+ &:not([disabled]):not(.disabled):hover,
+ &:not([disabled]):not(.disabled):focus,
+ &:not([disabled]):not(.disabled):active:hover,
+ &:not([disabled]):not(.disabled).active:hover {
+ @include btn-shadow-inverse($primary);
}
}
.btn-secondary {
- @include btn-shadow($btn-secondary-bg);
+ @include btn-shadow($secondary);
- &:hover {
- @include btn-shadow-inverse($btn-secondary-bg);
+ &:not([disabled]):not(.disabled):hover,
+ &:not([disabled]):not(.disabled):focus,
+ &:not([disabled]):not(.disabled):active,
+ &:not([disabled]):not(.disabled).active {
+ @include btn-shadow-inverse($secondary);
}
}
.btn-success {
- @include btn-shadow($btn-success-bg);
+ @include btn-shadow($success);
+ color: $white;
- &:hover {
- @include btn-shadow-inverse($btn-success-bg);
+ &:not([disabled]):not(.disabled):hover,
+ &:not([disabled]):not(.disabled):focus,
+ &:not([disabled]):not(.disabled):active,
+ &:not([disabled]):not(.disabled).active {
+ @include btn-shadow-inverse($success);
}
}
.btn-info {
- @include btn-shadow($btn-info-bg);
+ @include btn-shadow($info);
+ color: $white;
- &:hover {
- @include btn-shadow-inverse($btn-info-bg);
+ &:not([disabled]):not(.disabled):hover,
+ &:not([disabled]):not(.disabled):focus,
+ &:not([disabled]):not(.disabled):active,
+ &:not([disabled]):not(.disabled).active {
+ @include btn-shadow-inverse($info);
}
}
.btn-warning {
- @include btn-shadow($btn-warning-bg);
+ @include btn-shadow($warning);
+ color: $white;
- &:hover {
- @include btn-shadow-inverse($btn-warning-bg);
+ &:not([disabled]):not(.disabled):hover,
+ &:not([disabled]):not(.disabled):focus,
+ &:not([disabled]):not(.disabled):active,
+ &:not([disabled]):not(.disabled).active {
+ @include btn-shadow-inverse($warning);
}
}
.btn-danger {
- @include btn-shadow($btn-danger-bg);
+ @include btn-shadow($danger);
- &:hover {
- @include btn-shadow-inverse($btn-danger-bg);
+ &:not([disabled]):not(.disabled):hover,
+ &:not([disabled]):not(.disabled):focus,
+ &:not([disabled]):not(.disabled):active,
+ &:not([disabled]):not(.disabled).active {
+ @include btn-shadow-inverse($danger);
}
}
.btn-link,
.btn-link:hover {
@@ -164,20 +196,79 @@
&-danger {
color: #fff;
}
}
+.table {
+
+ .thead-dark th {
+ color: $white;
+ }
+
+ &-success {
+ &, > th, > td {
+ background-color: $success;
+ }
+ }
+
+ &-info {
+ &, > th, > td {
+ background-color: $info;
+ }
+ }
+
+ &-danger {
+ &, > th, > td {
+ background-color: $danger;
+ }
+ }
+
+ &-warning {
+ &, > th, > td {
+ background-color: $warning;
+ }
+ }
+
+ &-hover {
+
+ .table-success:hover {
+ &, > th, > td {
+ background-color: darken($success, 5%);
+ }
+ }
+
+ .table-info:hover {
+ &, > th, > td {
+ background-color: darken($info, 5%);
+ }
+ }
+
+ .table-danger:hover {
+ &, > th, > td {
+ background-color: darken($danger, 5%);
+ }
+ }
+
+ .table-warning:hover {
+ &, > th, > td {
+ background-color: darken($warning, 5%);
+ }
+ }
+
+ }
+}
+
// Forms =======================================================================
legend {
color: #fff;
}
.input-group-addon {
- @include btn-shadow($btn-secondary-bg);
+ @include btn-shadow($secondary);
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
- color: $btn-secondary-color;
+ color: $white;
}
// Navs ========================================================================
.nav-tabs {
@@ -189,61 +280,61 @@
}
.nav-pills {
.nav-link {
- @include btn-shadow($gray);
+ @include btn-shadow($gray-800);
border: 1px solid rgba(0, 0, 0, 0.6);
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
color: #fff;
&:hover {
- @include btn-shadow-inverse($gray);
+ @include btn-shadow-inverse($gray-800);
border: 1px solid rgba(0, 0, 0, 0.6);
}
}
.nav-link.active,
.nav-link:hover {
background-color: transparent;
- @include btn-shadow-inverse($gray);
+ @include btn-shadow-inverse($gray-800);
border: 1px solid rgba(0, 0, 0, 0.6);
}
.nav-link.disabled,
.nav-link.disabled:hover {
- @include btn-shadow($gray);
- color: $nav-disabled-link-color;
+ @include btn-shadow($gray-800);
+ color: $nav-link-disabled-color;
}
}
.pagination {
.page-link {
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
- @include btn-shadow($gray);
+ @include btn-shadow($gray-800);
&:hover {
- @include btn-shadow-inverse($gray);
+ @include btn-shadow-inverse($gray-800);
text-decoration: none;
}
}
.page-item.active .page-link {
- @include btn-shadow-inverse($gray);
+ @include btn-shadow-inverse($gray-800);
}
.page-item.disabled .page-link {
- @include btn-shadow($gray);
+ @include btn-shadow($gray-800);
}
}
.breadcrumb {
border: 1px solid rgba(0, 0, 0, 0.6);
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
background-color: transparent;
- @include btn-shadow($gray);
+ @include btn-shadow($gray-800);
a,
a:hover {
color: #fff;
}
@@ -251,24 +342,69 @@
// Indicators ==================================================================
.alert {
- .alert-link,
- a {
+ .close {
+ color: $close-color;
+ text-decoration: none;
+ }
+}
+
+.alert {
+ border: none;
+ color: $white;
+
+ a,
+ .alert-link {
color: #fff;
text-decoration: underline;
}
- .close {
- color: $close-color;
- text-decoration: none;
+ &-primary {
+ background-color: $primary;
}
+
+ &-success {
+ background-color: $success;
+ }
+
+ &-danger {
+ background-color: $danger;
+ }
+
+ &-warning {
+ background-color: $warning;
+ }
+
+ &-info {
+ background-color: $info;
+ }
+
+ &-dark {
+ background-color: $dark;
+ }
}
+.badge {
+
+ &-success,
+ &-warning,
+ &-info {
+ color: $white;
+ }
+}
+
// Progress bars ===============================================================
// Containers ==================================================================
.jumbotron {
border: 1px solid rgba(0, 0, 0, 0.6);
+}
+
+.list-group {
+
+ &-item:hover {
+ background-color: darken($gray-900, 5%);
+ }
}