Commit 0c1c2364 authored by Mark Otto's avatar Mark Otto

improve text color and borders for legibility

parent b7477628
...@@ -6,7 +6,7 @@ ...@@ -6,7 +6,7 @@
* http://www.apache.org/licenses/LICENSE-2.0 * http://www.apache.org/licenses/LICENSE-2.0
* *
* Designed and built with all the love in the world @twitter by @mdo and @fat. * Designed and built with all the love in the world @twitter by @mdo and @fat.
* Date: Sun Oct 9 22:31:28 PDT 2011 * Date: Sun Oct 9 22:37:55 PDT 2011
*/ */
/* Reset.less /* Reset.less
* Props to Eric Meyer (meyerweb.com) for his CSS reset file. We're using an adapted version here that cuts out some of the reset HTML elements we will never need here (i.e., dfn, samp, etc). * Props to Eric Meyer (meyerweb.com) for his CSS reset file. We're using an adapted version here that cuts out some of the reset HTML elements we will never need here (i.e., dfn, samp, etc).
...@@ -723,10 +723,10 @@ input[type=file]:focus, input[type=checkbox]:focus, select:focus { ...@@ -723,10 +723,10 @@ input[type=file]:focus, input[type=checkbox]:focus, select:focus {
outline: 1px dotted #666; outline: 1px dotted #666;
} }
form .clearfix.error > label, form .clearfix.error .help-block, form .clearfix.error .help-inline { form .clearfix.error > label, form .clearfix.error .help-block, form .clearfix.error .help-inline {
color: #ee5f5b; color: #b94a48;
} }
form .clearfix.error input, form .clearfix.error textarea { form .clearfix.error input, form .clearfix.error textarea {
color: #ee5f5b; color: #b94a48;
border-color: #ee5f5b; border-color: #ee5f5b;
} }
form .clearfix.error input:focus, form .clearfix.error textarea:focus { form .clearfix.error input:focus, form .clearfix.error textarea:focus {
...@@ -736,15 +736,15 @@ form .clearfix.error input:focus, form .clearfix.error textarea:focus { ...@@ -736,15 +736,15 @@ form .clearfix.error input:focus, form .clearfix.error textarea:focus {
box-shadow: 0 0 6px #f8b9b7; box-shadow: 0 0 6px #f8b9b7;
} }
form .clearfix.error .input-prepend .add-on, form .clearfix.error .input-append .add-on { form .clearfix.error .input-prepend .add-on, form .clearfix.error .input-append .add-on {
color: #ee5f5b; color: #b94a48;
background-color: #fce6e6; background-color: #fce6e6;
border-color: #ee5f5b; border-color: #b94a48;
} }
form .clearfix.warning > label, form .clearfix.warning .help-block, form .clearfix.warning .help-inline { form .clearfix.warning > label, form .clearfix.warning .help-block, form .clearfix.warning .help-inline {
color: #ccae64; color: #c09853;
} }
form .clearfix.warning input, form .clearfix.warning textarea { form .clearfix.warning input, form .clearfix.warning textarea {
color: #ccae64; color: #c09853;
border-color: #ccae64; border-color: #ccae64;
} }
form .clearfix.warning input:focus, form .clearfix.warning textarea:focus { form .clearfix.warning input:focus, form .clearfix.warning textarea:focus {
...@@ -754,15 +754,15 @@ form .clearfix.warning input:focus, form .clearfix.warning textarea:focus { ...@@ -754,15 +754,15 @@ form .clearfix.warning input:focus, form .clearfix.warning textarea:focus {
box-shadow: 0 0 6px #e5d6b1; box-shadow: 0 0 6px #e5d6b1;
} }
form .clearfix.warning .input-prepend .add-on, form .clearfix.warning .input-append .add-on { form .clearfix.warning .input-prepend .add-on, form .clearfix.warning .input-append .add-on {
color: #ccae64; color: #c09853;
background-color: #d2b877; background-color: #d2b877;
border-color: #ccae64; border-color: #c09853;
} }
form .clearfix.success > label, form .clearfix.success .help-block, form .clearfix.success .help-inline { form .clearfix.success > label, form .clearfix.success .help-block, form .clearfix.success .help-inline {
color: #57a957; color: #468847;
} }
form .clearfix.success input, form .clearfix.success textarea { form .clearfix.success input, form .clearfix.success textarea {
color: #57a957; color: #468847;
border-color: #57a957; border-color: #57a957;
} }
form .clearfix.success input:focus, form .clearfix.success textarea:focus { form .clearfix.success input:focus, form .clearfix.success textarea:focus {
...@@ -772,9 +772,9 @@ form .clearfix.success input:focus, form .clearfix.success textarea:focus { ...@@ -772,9 +772,9 @@ form .clearfix.success input:focus, form .clearfix.success textarea:focus {
box-shadow: 0 0 6px #9acc9a; box-shadow: 0 0 6px #9acc9a;
} }
form .clearfix.success .input-prepend .add-on, form .clearfix.success .input-append .add-on { form .clearfix.success .input-prepend .add-on, form .clearfix.success .input-append .add-on {
color: #57a957; color: #468847;
background-color: #bcddbc; background-color: #bcddbc;
border-color: #57a957; border-color: #468847;
} }
.input-mini, .input-mini,
input.mini, input.mini,
......
...@@ -126,15 +126,15 @@ textarea{height:auto;} ...@@ -126,15 +126,15 @@ textarea{height:auto;}
input,textarea{-webkit-transition:border linear 0.2s,box-shadow linear 0.2s;-moz-transition:border linear 0.2s,box-shadow linear 0.2s;-ms-transition:border linear 0.2s,box-shadow linear 0.2s;-o-transition:border linear 0.2s,box-shadow linear 0.2s;transition:border linear 0.2s,box-shadow linear 0.2s;-webkit-box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.1);-moz-box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.1);box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.1);} input,textarea{-webkit-transition:border linear 0.2s,box-shadow linear 0.2s;-moz-transition:border linear 0.2s,box-shadow linear 0.2s;-ms-transition:border linear 0.2s,box-shadow linear 0.2s;-o-transition:border linear 0.2s,box-shadow linear 0.2s;transition:border linear 0.2s,box-shadow linear 0.2s;-webkit-box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.1);-moz-box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.1);box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.1);}
input:focus,textarea:focus{outline:0;border-color:rgba(82, 168, 236, 0.8);-webkit-box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.1),0 0 8px rgba(82, 168, 236, 0.6);-moz-box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.1),0 0 8px rgba(82, 168, 236, 0.6);box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.1),0 0 8px rgba(82, 168, 236, 0.6);} input:focus,textarea:focus{outline:0;border-color:rgba(82, 168, 236, 0.8);-webkit-box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.1),0 0 8px rgba(82, 168, 236, 0.6);-moz-box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.1),0 0 8px rgba(82, 168, 236, 0.6);box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.1),0 0 8px rgba(82, 168, 236, 0.6);}
input[type=file]:focus,input[type=checkbox]:focus,select:focus{-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;outline:1px dotted #666;} input[type=file]:focus,input[type=checkbox]:focus,select:focus{-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;outline:1px dotted #666;}
form .clearfix.error>label,form .clearfix.error .help-block,form .clearfix.error .help-inline{color:#ee5f5b;} form .clearfix.error>label,form .clearfix.error .help-block,form .clearfix.error .help-inline{color:#b94a48;}
form .clearfix.error input,form .clearfix.error textarea{color:#ee5f5b;border-color:#ee5f5b;}form .clearfix.error input:focus,form .clearfix.error textarea:focus{border-color:#e9322d;-webkit-box-shadow:0 0 6px #f8b9b7;-moz-box-shadow:0 0 6px #f8b9b7;box-shadow:0 0 6px #f8b9b7;} form .clearfix.error input,form .clearfix.error textarea{color:#b94a48;border-color:#ee5f5b;}form .clearfix.error input:focus,form .clearfix.error textarea:focus{border-color:#e9322d;-webkit-box-shadow:0 0 6px #f8b9b7;-moz-box-shadow:0 0 6px #f8b9b7;box-shadow:0 0 6px #f8b9b7;}
form .clearfix.error .input-prepend .add-on,form .clearfix.error .input-append .add-on{color:#ee5f5b;background-color:#fce6e6;border-color:#ee5f5b;} form .clearfix.error .input-prepend .add-on,form .clearfix.error .input-append .add-on{color:#b94a48;background-color:#fce6e6;border-color:#b94a48;}
form .clearfix.warning>label,form .clearfix.warning .help-block,form .clearfix.warning .help-inline{color:#ccae64;} form .clearfix.warning>label,form .clearfix.warning .help-block,form .clearfix.warning .help-inline{color:#c09853;}
form .clearfix.warning input,form .clearfix.warning textarea{color:#ccae64;border-color:#ccae64;}form .clearfix.warning input:focus,form .clearfix.warning textarea:focus{border-color:#be9a3f;-webkit-box-shadow:0 0 6px #e5d6b1;-moz-box-shadow:0 0 6px #e5d6b1;box-shadow:0 0 6px #e5d6b1;} form .clearfix.warning input,form .clearfix.warning textarea{color:#c09853;border-color:#ccae64;}form .clearfix.warning input:focus,form .clearfix.warning textarea:focus{border-color:#be9a3f;-webkit-box-shadow:0 0 6px #e5d6b1;-moz-box-shadow:0 0 6px #e5d6b1;box-shadow:0 0 6px #e5d6b1;}
form .clearfix.warning .input-prepend .add-on,form .clearfix.warning .input-append .add-on{color:#ccae64;background-color:#d2b877;border-color:#ccae64;} form .clearfix.warning .input-prepend .add-on,form .clearfix.warning .input-append .add-on{color:#c09853;background-color:#d2b877;border-color:#c09853;}
form .clearfix.success>label,form .clearfix.success .help-block,form .clearfix.success .help-inline{color:#57a957;} form .clearfix.success>label,form .clearfix.success .help-block,form .clearfix.success .help-inline{color:#468847;}
form .clearfix.success input,form .clearfix.success textarea{color:#57a957;border-color:#57a957;}form .clearfix.success input:focus,form .clearfix.success textarea:focus{border-color:#458845;-webkit-box-shadow:0 0 6px #9acc9a;-moz-box-shadow:0 0 6px #9acc9a;box-shadow:0 0 6px #9acc9a;} form .clearfix.success input,form .clearfix.success textarea{color:#468847;border-color:#57a957;}form .clearfix.success input:focus,form .clearfix.success textarea:focus{border-color:#458845;-webkit-box-shadow:0 0 6px #9acc9a;-moz-box-shadow:0 0 6px #9acc9a;box-shadow:0 0 6px #9acc9a;}
form .clearfix.success .input-prepend .add-on,form .clearfix.success .input-append .add-on{color:#57a957;background-color:#bcddbc;border-color:#57a957;} form .clearfix.success .input-prepend .add-on,form .clearfix.success .input-append .add-on{color:#468847;background-color:#bcddbc;border-color:#468847;}
.input-mini,input.mini,textarea.mini,select.mini{width:60px;} .input-mini,input.mini,textarea.mini,select.mini{width:60px;}
.input-small,input.small,textarea.small,select.small{width:90px;} .input-small,input.small,textarea.small,select.small{width:90px;}
.input-medium,input.medium,textarea.medium,select.medium{width:150px;} .input-medium,input.medium,textarea.medium,select.medium{width:150px;}
......
...@@ -169,7 +169,7 @@ select:focus { ...@@ -169,7 +169,7 @@ select:focus {
// -------------------------- // --------------------------
// Mixin for form field states // Mixin for form field states
.formFieldState(@textColor: #555, @backgroundColor: #f5f5f5) { .formFieldState(@textColor: #555, @borderColor: #ccc, @backgroundColor: #f5f5f5) {
// Set the text color // Set the text color
> label, > label,
.help-block, .help-block,
...@@ -180,10 +180,10 @@ select:focus { ...@@ -180,10 +180,10 @@ select:focus {
input, input,
textarea { textarea {
color: @textColor; color: @textColor;
border-color: @textColor; border-color: @borderColor;
&:focus { &:focus {
border-color: darken(@textColor, 10%); border-color: darken(@borderColor, 10%);
.box-shadow(0 0 6px lighten(@textColor, 20%); .box-shadow(0 0 6px lighten(@borderColor, 20%);
} }
} }
// Give a small background color for input-prepend/-append // Give a small background color for input-prepend/-append
...@@ -196,15 +196,15 @@ select:focus { ...@@ -196,15 +196,15 @@ select:focus {
} }
// Error // Error
form .clearfix.error { form .clearfix.error {
.formFieldState(#ee5f5b, lighten(#ee5f5b, 30%)); .formFieldState(#b94a48, #ee5f5b, lighten(#ee5f5b, 30%));
} }
// Warning // Warning
form .clearfix.warning { form .clearfix.warning {
.formFieldState(#CCAE64, lighten(#CCAE64, 5%)); .formFieldState(#c09853, #ccae64, lighten(#CCAE64, 5%));
} }
// Success // Success
form .clearfix.success { form .clearfix.success {
.formFieldState(#57a957, lighten(#57a957, 30%)); .formFieldState(#468847, #57a957, lighten(#57a957, 30%));
} }
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment