projects / bootswatch / blobdiff
? search:
summary | shortlog | log | commit | commitdiff | tree
raw | inline | side by side
fixes #69, subnav-fixed position tweaks
[bootswatch] / slate / bootswatch.less
diff --git a/slate/bootswatch.less b/slate/bootswatch.less
index 9d7c443..9f60863 100755 (executable)
--- a/slate/bootswatch.less
+++ b/slate/bootswatch.less
@@ -1,8 +1,8 @@
-// Bootswatch.less
-// Swatch: Slate
-// Version: 2.1.0
+// Slate 2.2.2
+// Bootswatch
 // -----------------------------------------------------
 
+
 // TYPOGRAPHY
 // -----------------------------------------------------
 
@@ -69,6 +69,11 @@ hr, legend, .page-header {
                border: 1px solid darken(@gray, 15%);
        }
 
+       .btn,
+       .btn-group {
+               margin: 4px 0;
+       }
+
        .divider-vertical {
                background-color: transparent;
                border-right: none;
@@ -139,6 +144,7 @@ hr, legend, .page-header {
 
 div.subnav {
 
+       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)');
@@ -171,11 +177,6 @@ div.subnav {
                border-left: 1px solid transparent;
        }
 
-       &.subnav-fixed .nav > li.active:first-child > a,
-       &.subnav-fixed .nav > li:first-child > a:hover {
-               border-left: 1px solid darken(@gray, 15%);
-       }
-
        .nav > li.active:last-child > a,
        .nav > li:last-child > a:hover {
                border-right: 1px solid darken(@gray, 15%);
@@ -187,36 +188,47 @@ div.subnav {
        }
 
        &.subnav-fixed {
+               top: @navbarHeight;
+               margin: 0;
                .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: none;
-}
+.nav {
 
-.nav > 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);
-}
+       .nav-header {
+               text-shadow: none;
+       }
 
-.nav > li.active > a,
-.nav > li.active > a:hover {
-       background-color: transparent;
-       border: none;
-       color: @white;
-}
+       & > 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);
+       }
+
+       li.active > a,
+       li.active > a:hover {
+               background-color: transparent;
+               border: none;
+               color: @white;
+       }
+
+       li > a:hover {
+               background-color: transparent;
+               color: @grayLighter;
+       }
 
-.nav > li > a:hover {
-       background-color: transparent;
-       color: @grayLighter;
 }
 
 .nav-list {
@@ -255,70 +267,98 @@ div.subnav {
        border-left: none;
 }
 
-.nav-tabs.nav-stacked > li > a,
-.nav-tabs.nav-stacked > li > a:hover {
-       border: none;
-}
+.nav-tabs.nav-stacked {
 
-.breadcrumb {
-       .box-shadow(none);
+       li > a,
+       li > a:hover {
+               border: 1px solid darken(@grayDarker, 5%);
+               background-image: none;
+       }
+
+       li > a:hover,
+       .active > a,
+       .active > a:hover {
+               background-color: @wellBackground;
+               color: @white;
+       }
 }
 
-.breadcrumb, .pagination > ul a, .pager a {
+.breadcrumb {
        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);
-}
+       .box-shadow('0 1px 3px rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.1)');
 
-.breadcrumb li, .breadcrumb a, .pagination > ul a {
-       color: @grayLighter;
-       font-weight: bold;
-       text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
-}
+       a {
+               color: @grayLighter;
+               font-weight: bold;
+       }
 
-.breadcrumb a {
-       color: @white;
+       li {
+               color: @grayLight;
+               font-weight: bold;
+               text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
+       }
 }
 
 .pagination {
 
-       & > ul {
+       ul {
                .box-shadow(none);
        }
 
-       & li > a,
-       & li.disabled > a {
+       ul > li > a,
+       ul > li > span {
                border-left: 1px solid @gray;
                border-right: 1px solid darken(@gray, 15%);
                border-top: none;
                border-bottom: none;
-       }
-
-       li.disabled > a {
-               #gradient > .vertical-three-colors(@grayLight, @gray, 70%, @gray);
-       }
+               #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;
+               text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
 
-       & > ul > li:not(.disabled) a:hover,
-         {
-               #gradient > .directional(@grayDarker, @grayDark, 280deg);
-               border-left: 1px solid transparent;
+               &:hover {
+                       #gradient > .directional(@grayDarker, @grayDark, 280deg);
+                       border-left: 1px solid transparent;
+               }
        }
 
-       & > ul > li.active > a,
-       & > ul > li.active > a:hover {
+       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;
        }
+
+       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);
+       }
 }
 
 .pager {
 
-       a:hover {
-               #gradient > .directional(@grayDarker, @grayDark, 280deg);
+       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);
+
+               &:hover {
+                       #gradient > .directional(@grayDarker, @grayDark, 280deg);
+                       border: 1px solid transparent;
+               }
+       }       
 
        .disabled a,
        .disabled a:hover {
@@ -338,31 +378,33 @@ div.subnav {
 .btn, .btn:hover {
        color: @white;
        font-weight: bold;
-       text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
+       text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.3);
 }
 
 .btn-primary {
-  .buttonBackground(@btnPrimaryBackground, spin(@btnPrimaryBackground, 20));
+       .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);
+       .buttonBackground(lighten(@orange, 15%), @orange);
 }
 
 .btn-danger {
-  .buttonBackground(#ee5f5b, #bd362f);
+       .buttonBackground(@red, #bd362f);
 }
 
 .btn-success {
-  .buttonBackground(#62c462, #51a351);
+       .buttonBackground(@green, #51a351);
 }
 
 .btn-info {
-  .buttonBackground(#5bc0de, #2f96b4);
+       .buttonBackground(@blue, #2f96b4);
 }
 
 .btn-inverse {
-  .buttonBackground(#454545, #262626);
+       .buttonBackground(@gray, @grayDarker);
 }
 
 .caret {
@@ -372,6 +414,23 @@ div.subnav {
 // TABLES
 // -----------------------------------------------------
 
+.table {
+
+       tbody tr.success td {
+               background-color: @successText;
+       }
+
+       tbody tr.error td {
+               background-color: @errorText;
+       }
+
+       tbody tr.info td {
+               background-color: @infoText;
+       }
+
+}
+
+
 // FORMS
 // -----------------------------------------------------
 
@@ -419,11 +478,6 @@ textarea[readonly] {
 
 .dropdown-menu {
        .box-shadow(0 5px 5px rgba(0, 0, 0, 0.2));
-
-       li.active a,
-       li.active a:hover {
-               background-color: @grayDark;
-       }
 }
 
 .dropdown.open .dropdown-toggle {
@@ -431,10 +485,8 @@ textarea[readonly] {
        color: @grayLighter;
 }
 
-.dropdown-menu .divider {
-       border-top: none;
-       border-bottom: 1px solid darken(@grayDarker, 5%);
-       background-color: transparent;
+.dropdown-submenu > a::after {
+       border-left-color: @white;
 }
 
 // ALERTS, LABELS, BADGES
@@ -446,14 +498,14 @@ textarea[readonly] {
        .box-shadow(1px 1px 1px rgba(0, 0, 0, 0.3));
 }
 
-.alert-heading {
-       color: rgba(255, 255, 255, 0.9);
-       text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.4);
-}
-
 .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-success {
@@ -475,7 +527,7 @@ textarea[readonly] {
 // -----------------------------------------------------
 
 .well, .hero-unit {
-       .box-shadow(inset 1px 1px 1px rgba(0, 0, 0, 0.5);
+       .box-shadow(inset 1px 1px 1px rgba(0, 0, 0, 0.5));
 }
 
 .thumbnail,
@@ -486,7 +538,7 @@ a.thumbnail:hover {
 .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);
+       .box-shadow(inset 1px 1px 1px rgba(0, 0, 0, 0.5));
 }
 
 .footer {
Bootstrap watch themes