cosmo: add control-info state
[bootswatch] / cosmo / bootswatch.less
index e7c713e..d7c85cf 100644 (file)
@@ -1,4 +1,4 @@
-// Cosmo 2.2.1
+// Cosmo 2.3.2
 // Bootswatch
 // -----------------------------------------------------
 
@@ -6,7 +6,7 @@
 // TYPOGRAPHY
 // -----------------------------------------------------
 
-@import url('http://fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,400,700');
+@import url('//fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,400,700');
 
 body {
        font-weight: 300;
@@ -48,6 +48,18 @@ blockquote {
        color: @gray;
 }
 
+.text-warning        { color: @orange; }
+a.text-warning:hover { color: darken(@orange, 10%); }
+
+.text-error          { color: @red; }
+a.text-error:hover   { color: darken(@red, 10%); }
+
+.text-info           { color: @purple; }
+a.text-info:hover    { color: darken(@purple, 10%); }
+
+.text-success        { color: @green; }
+a.text-success:hover { color: darken(@green, 10%); }
+
 // SCAFFOLDING
 // -----------------------------------------------------
 
@@ -92,12 +104,18 @@ blockquote {
 
        &-inverse {
 
+               .brand,
+               .nav > li > a {
+                       text-shadow: none;
+               }
 
+               .brand:hover,
                .nav > .active > a,
                .nav > .active > a:hover,
                .nav > .active > a:focus {
-                       .box-shadow(none);
                        background-color: @navbarInverseLinkBackgroundHover;
+                       .box-shadow(none);
+                       color: @white;
                }
 
                .navbar-search .search-query {
@@ -108,8 +126,8 @@ blockquote {
 
 div.subnav {
 
-       background-color: @grayLight;
-       background-image: none;
+       margin: 0 1px;
+       background: @grayLight none;
        .box-shadow(none);
        border: none;
        .border-radius(0);
@@ -119,20 +137,20 @@ div.subnav {
        }
 
        .nav > li > a {
-               border: none;
+               border-color: transparent;
        }
 
        .nav > .active > a,
        .nav > .active > a:hover {
-               padding-left: 12px;
-               border: none;
-               background-color: transparent;
+               border-color: transparent;
+               background-color: @black;
+               color: @white;
                .box-shadow(none);
-               color: @grayDarker;
        }
 
        &-fixed {
-               top: @navbarHeight;
+               top: @navbarHeight + 1;
+               margin: 0;
        }
 }
 
@@ -145,7 +163,6 @@ div.subnav {
        & > li.dropdown.open.active > a:hover {
                color: @blue;
        }
-
 }
 
 .nav-tabs {
@@ -174,6 +191,15 @@ div.subnav {
        }
 }
 
+.tabs-below,
+.tabs-left,
+.tabs-right {
+
+       & > .nav-tabs > li > a{
+               .border-radius(0);
+       }
+}
+
 .nav-pills {
 
        & > li > a {
@@ -294,7 +320,6 @@ div.subnav {
 // -----------------------------------------------------
 
 .btn {
-
        padding: 5px 12px;
        background-image: none;
        .box-shadow(none);
@@ -305,14 +330,18 @@ div.subnav {
        &.disabled {
                box-shadow: inset 0 2px 4px rgba(0,0,0,.15),~" "0 1px 2px rgba(0,0,0,.05);
        }
+}
 
-       &-large {
-               padding: 22px 30px;
-       }
+.btn-large {
+       padding: 22px 30px;
+}
 
-       &-mini {
-               padding: 2px 6px;
-       }
+.btn-small {
+       padding: 2px 10px;
+}
+
+.btn-mini {
+       padding: 2px 6px;
 }
 
 .btn-group {
@@ -333,15 +362,10 @@ div.subnav {
 
 .table {
 
-       tbody tr.success td {
-               color: @white;
-       }
-
-       tbody tr.error td {
-               color: @white;
-       }
-
-       tbody tr.info td {
+       tbody tr.success td,
+       tbody tr.error td,
+       tbody tr.info td,
+       tbody tr.warning td {
                color: @white;
        }
 
@@ -375,7 +399,7 @@ input[type="search"], input[type="tel"], input[type="color"] {
 
        &.warning {
 
-               & > label,
+               .control-label,
                .help-block,
                .help-inline {
                        color: @orange;
@@ -391,7 +415,7 @@ input[type="search"], input[type="tel"], input[type="color"] {
 
        &.error {
 
-               & > label,
+               .control-label,
                .help-block,
                .help-inline {
                        color: @red;
@@ -405,9 +429,25 @@ input[type="search"], input[type="tel"], input[type="color"] {
                }
        }
 
+       &.info {
+
+               .control-label,
+               .help-block,
+               .help-inline {
+                       color: @purple;
+               }
+
+               input,
+               select,
+               textarea {
+                       border-color: @purple;
+                       color: @grayDarker;
+               }
+       }
+
        &.success {
 
-               & > label,
+               .control-label,
                .help-block,
                .help-inline {
                        color: @green;
@@ -452,7 +492,10 @@ legend {
 }
 
 .label {
+       min-width: 80px;
+       min-height: 80px;
        .border-radius(0);
+       font-weight: 300;
        text-shadow: none;
 
        &-success {
@@ -464,17 +507,19 @@ legend {
        }
 
        &-info {
-               background-color: @blue;
+               background-color: @purple;
        }
 
        &-inverse {
-               background-color: @gray;
+               background-color: @black;
        }
 }
 
 .badge {
 
        .border-radius(0);
+       font-weight: 300;
+       text-shadow: none;
 
        &-success {
                background-color: @green;
@@ -485,11 +530,11 @@ legend {
        }
 
        &-info {
-               background-color: @blue;
+               background-color: @purple;
        }
 
        &-inverse {
-               background-color: @gray;
+               background-color: @black;
        }
 }