add a ton new variables for type, buttons, inputs

This commit is contained in:
Mark Otto
2012-03-05 00:29:16 -08:00
parent 7bf3419647
commit d3e922f0c8
6 changed files with 107 additions and 43 deletions

View File

@@ -16,9 +16,9 @@
text-align: center;
text-shadow: 0 1px 1px rgba(255,255,255,.75);
vertical-align: middle;
.buttonBackground(@white, darken(@white, 10%));
border: 1px solid #ccc;
border-bottom-color: #bbb;
.buttonBackground(@btnBackground, @btnBackgroundHighlight);
border: 1px solid @btnBorder;
border-bottom-color: darken(@btnBorder, 10%);
.border-radius(4px);
@shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
.box-shadow(@shadow);
@@ -132,27 +132,27 @@
// Set the backgrounds
// -------------------------
.btn-primary {
.buttonBackground(@primaryButtonBackground, spin(@primaryButtonBackground, 20));
.buttonBackground(@btnPrimaryBackground, @btnPrimaryBackgroundHighlight);
}
// Warning appears are orange
.btn-warning {
.buttonBackground(lighten(@orange, 15%), @orange);
.buttonBackground(@btnWarningBackground, @btnWarningBackgroundHighlight);
}
// Danger and error appear as red
.btn-danger {
.buttonBackground(#ee5f5b, #bd362f);
.buttonBackground(@btnDangerBackground, @btnDangerBackgroundHighlight);
}
// Success appears as green
.btn-success {
.buttonBackground(#62c462, #51a351);
.buttonBackground(@btnSuccessBackground, @btnSuccessBackgroundHighlight);
}
// Info appears as a neutral blue
.btn-info {
.buttonBackground(#5bc0de, #2f96b4);
.buttonBackground(@btnInfoBackground, @btnInfoBackgroundHighlight);
}
// Inverse appears as dark gray
.btn-inverse {
.buttonBackground(@gray, @grayDarker);
.buttonBackground(@btnInverseBackground, @btnInverseBackgroundHighlight);
}

View File

@@ -71,7 +71,7 @@ select,
font-size: @baseFontSize;
line-height: @baseLineHeight;
color: @gray;
border: 1px solid #ccc;
border: 1px solid @inputBorder;
.border-radius(3px);
}
.uneditable-textarea {
@@ -110,7 +110,7 @@ input[type="file"] {
padding: initial;
line-height: initial;
border: initial;
background-color: @white;
background-color: @inputBackground;
background-color: initial;
.box-shadow(none);
}
@@ -139,7 +139,7 @@ input[type="file"] {
// Chrome on Linux and Mobile Safari need background-color
select {
width: 220px; // default input width + 10px of padding that doesn't get applied
background-color: @white;
background-color: @inputBackground;
}
// Make multiple select elements height not fixed
@@ -268,7 +268,7 @@ textarea[disabled],
input[readonly],
select[readonly],
textarea[readonly] {
background-color: #f5f5f5;
background-color: @inputDisabledBackground;
border-color: #ddd;
cursor: not-allowed;
}
@@ -314,7 +314,7 @@ select:focus:required:invalid {
padding: (@baseLineHeight - 1) 20px @baseLineHeight;
margin-top: @baseLineHeight;
margin-bottom: @baseLineHeight;
background-color: #f5f5f5;
background-color: #grayLight;
border-top: 1px solid #ddd;
.clearfix(); // Adding clearfix to allow for .pull-right button containers
}
@@ -322,7 +322,7 @@ select:focus:required:invalid {
// For text that needs to appear as an input but should not be an input
.uneditable-input {
display: block;
background-color: @white;
background-color: @inputBackground;
border-color: #eee;
.box-shadow(inset 0 1px 2px rgba(0,0,0,.025));
cursor: not-allowed;
@@ -387,7 +387,7 @@ select:focus:required:invalid {
line-height: @baseLineHeight;
text-align: center;
text-shadow: 0 1px 0 @white;
background-color: #f5f5f5;
background-color: #grayLight;
border: 1px solid #ccc;
.border-radius(3px 0 0 3px);
}

View File

@@ -12,7 +12,7 @@ body {
font-size: @baseFontSize;
line-height: @baseLineHeight;
color: @textColor;
background-color: @white;
background-color: @bodyBackground;
}

View File

@@ -7,10 +7,6 @@
// GLOBAL VALUES
// --------------------------------------------------
// Links
@linkColor: #08c;
@linkColorHover: darken(@linkColor, 15%);
// Grays
@black: #000;
@grayDarker: #222;
@@ -30,14 +26,57 @@
@pink: #c3325f;
@purple: #7a43b6;
// Scaffolding
@bodyBackground: @white;
@textColor: @grayDark;
// Links
@linkColor: #08c;
@linkColorHover: #069;
// Typography
@baseFontSize: 13px;
@baseFontFamily: "Helvetica Neue", Helvetica, Arial, sans-serif;
@baseLineHeight: 18px;
@textColor: @grayDark;
@altFontFamily: Georgia, "Times New Roman", Times, serif;
@headingsFontFamily: ''; // empty to use BS default, @baseFontFamily
@headingsFontWeight: normal; // instead of browser default, bold
@headingsColor: ''; // empty to use BS default, @textColor
// Buttons
@primaryButtonBackground: @linkColor;
@btnBackground: @white;
@btnBackgroundHighlight: darken(@white, 10%);
@btnBorder: #ccc;
@btnPrimaryBackground: @linkColor;
@btnPrimaryBackgroundHighlight: spin(@btnPrimaryBackground, 15%);
@btnInfoBackground: #5bc0de;
@btnInfoBackgroundHighlight: #2f96b4;
@btnSuccessBackground: #62c462;
@btnSuccessBackgroundHighlight: #51a351;
@btnWarningBackground: lighten(@orange, 15%);
@btnWarningBackgroundHighlight: @orange;
@btnDangerBackground: #ee5f5b;
@btnDangerBackgroundHighlight: #bd362f;
@btnInverseBackground: @gray;
@btnInverseBackgroundHighlight: @grayDarker;
// Forms
@inputBackground: @white;
@inputBorder: #ccc;
@inputDisabledBackground: @grayLighter;
// Dropdowns
@dropdownLinkColor: @grayDark;
@dropdownLinkColorHover: @white;
@dropdownLinkBackgroundHover: @grayDark;
@@ -74,6 +113,11 @@
@navbarLinkColor: @grayLight;
@navbarLinkColorHover: @white;
// Hero unit
@heroUnitBackground: #312f2e;
@heroUnitHeadingColor: @white;
@heroUnitLeadColor: @white;
// Form states and alerts
@warningText: #c09853;
@warningBackground: #fcf8e3;