aboutsummaryrefslogtreecommitdiff
path: root/less
diff options
context:
space:
mode:
authorMark Otto <[email protected]>2012-03-05 00:29:16 -0800
committerMark Otto <[email protected]>2012-03-05 00:29:16 -0800
commitd3e922f0c8dc309bc609ebd75fd7e90134c1eaca (patch)
tree71ddd4e67742b43cbcfd01fb6e52faa7f2aec0cb /less
parent7bf341964790937c2fe77875459b064bc63d2e29 (diff)
downloadbootstrap-d3e922f0c8dc309bc609ebd75fd7e90134c1eaca.tar.xz
bootstrap-d3e922f0c8dc309bc609ebd75fd7e90134c1eaca.zip
add a ton new variables for type, buttons, inputs
Diffstat (limited to 'less')
-rw-r--r--less/buttons.less18
-rw-r--r--less/forms.less14
-rw-r--r--less/scaffolding.less2
-rw-r--r--less/variables.less56
4 files changed, 67 insertions, 23 deletions
diff --git a/less/buttons.less b/less/buttons.less
index 85f18ff0c..f93cd01a9 100644
--- a/less/buttons.less
+++ b/less/buttons.less
@@ -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);
}
diff --git a/less/forms.less b/less/forms.less
index 7f02ce365..ec3e89e1a 100644
--- a/less/forms.less
+++ b/less/forms.less
@@ -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);
}
diff --git a/less/scaffolding.less b/less/scaffolding.less
index c2e683ac6..57c74eda0 100644
--- a/less/scaffolding.less
+++ b/less/scaffolding.less
@@ -12,7 +12,7 @@ body {
font-size: @baseFontSize;
line-height: @baseLineHeight;
color: @textColor;
- background-color: @white;
+ background-color: @bodyBackground;
}
diff --git a/less/variables.less b/less/variables.less
index 3d448ab21..5bcddfb33 100644
--- a/less/variables.less
+++ b/less/variables.less
@@ -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;