mirror of
https://github.com/jasny/bootstrap.git
synced 2026-02-06 03:54:54 -05:00
add a ton new variables for type, buttons, inputs
This commit is contained in:
@@ -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);
|
||||
}
|
||||
|
||||
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
|
||||
@@ -12,7 +12,7 @@ body {
|
||||
font-size: @baseFontSize;
|
||||
line-height: @baseLineHeight;
|
||||
color: @textColor;
|
||||
background-color: @white;
|
||||
background-color: @bodyBackground;
|
||||
}
|
||||
|
||||
|
||||
|
||||
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user