Skip to content

B
bootstrap
Commit d3e922f0 authored by Mark Otto's avatar Mark Otto
Browse files
Options

add a ton new variables for type, buttons, inputs

parent 7bf34196
Hide whitespace changes
Inline Side-by-side
Showing with 107 additions and 43 deletions
docs/assets/css/bootstrap.css
View file @ d3e922f0
......@@ -116,7 +116,7 @@ a {
text-decoration: none;
}
a:hover {
color: #005580;
color: #006699;
text-decoration: underline;
}
.row {
......@@ -574,7 +574,7 @@ select,
font-size: 13px;
line-height: 18px;
color: #555555;
border: 1px solid #ccc;
border: 1px solid #cccccc;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
......@@ -771,7 +771,7 @@ textarea[disabled],
input[readonly],
select[readonly],
textarea[readonly] {
background-color: #f5f5f5;
background-color: #eeeeee;
border-color: #ddd;
cursor: not-allowed;
}
......@@ -843,7 +843,7 @@ input:focus:required:invalid:focus, textarea:focus:required:invalid:focus, selec
padding: 17px 20px 18px;
margin-top: 18px;
margin-bottom: 18px;
background-color: #f5f5f5;
background-color: #grayLight;
border-top: 1px solid #ddd;
*zoom: 1;
}
......@@ -933,7 +933,7 @@ input:focus:required:invalid:focus, textarea:focus:required:invalid:focus, selec
line-height: 18px;
text-align: center;
text-shadow: 0 1px 0 #ffffff;
background-color: #f5f5f5;
background-color: #grayLight;
border: 1px solid #ccc;
-webkit-border-radius: 3px 0 0 3px;
-moz-border-radius: 3px 0 0 3px;
......@@ -1832,8 +1832,8 @@ table .span24 {
border-color: #e6e6e6 #e6e6e6 #bfbfbf;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
border: 1px solid #ccc;
border-bottom-color: #bbb;
border: 1px solid #cccccc;
border-bottom-color: #b3b3b3;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
......@@ -1939,16 +1939,16 @@ table .span24 {
color: rgba(255, 255, 255, 0.75);
}
.btn-primary {
background-color: #006dcc;
background-image: -moz-linear-gradient(top, #0088cc, #0044cc);
background-image: -ms-linear-gradient(top, #0088cc, #0044cc);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0044cc));
background-image: -webkit-linear-gradient(top, #0088cc, #0044cc);
background-image: -o-linear-gradient(top, #0088cc, #0044cc);
background-image: linear-gradient(top, #0088cc, #0044cc);
background-color: #0074cc;
background-image: -moz-linear-gradient(top, #0088cc, #0055cc);
background-image: -ms-linear-gradient(top, #0088cc, #0055cc);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0055cc));
background-image: -webkit-linear-gradient(top, #0088cc, #0055cc);
background-image: -o-linear-gradient(top, #0088cc, #0055cc);
background-image: linear-gradient(top, #0088cc, #0055cc);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0088cc', endColorstr='#0044cc', GradientType=0);
border-color: #0044cc #0044cc #002a80;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0088cc', endColorstr='#0055cc', GradientType=0);
border-color: #0055cc #0055cc #003580;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
}
......@@ -1957,10 +1957,10 @@ table .span24 {
.btn-primary.active,
.btn-primary.disabled,
.btn-primary[disabled] {
background-color: #0044cc;
background-color: #0055cc;
}
.btn-primary:active, .btn-primary.active {
background-color: #003399 \9;
background-color: #004099 \9;
}
.btn-warning {
background-color: #faa732;
......@@ -2434,8 +2434,8 @@ button.btn.btn-small, input[type="submit"].btn.btn-small {
margin-top: 6px;
}
.nav-tabs .dropdown-toggle:hover .caret, .nav-pills .dropdown-toggle:hover .caret {
border-top-color: #005580;
border-bottom-color: #005580;
border-top-color: #006699;
border-bottom-color: #006699;
}
.nav-tabs .active .dropdown-toggle .caret, .nav-pills .active .dropdown-toggle .caret {
border-top-color: #333333;
......@@ -3541,6 +3541,26 @@ a.thumbnail:hover {
background-image: -o-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
}
.progress-warning .bar {
background-color: #faa732;
background-image: -moz-linear-gradient(top, #fbb450, #f89406);
background-image: -ms-linear-gradient(top, #fbb450, #f89406);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#fbb450), to(#f89406));
background-image: -webkit-linear-gradient(top, #fbb450, #f89406);
background-image: -o-linear-gradient(top, #fbb450, #f89406);
background-image: linear-gradient(top, #fbb450, #f89406);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fbb450', endColorstr='#f89406', GradientType=0);
}
.progress-warning.progress-striped .bar {
background-color: #fbb450;
background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent));
background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
background-image: -ms-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
background-image: -o-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
}
.accordion {
margin-bottom: 18px;
}
......
less/buttons.less
View file @ d3e922f0
......@@ -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);
}
......
less/forms.less
View file @ d3e922f0
......@@ -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);
}
......
less/scaffolding.less
View file @ d3e922f0
......@@ -12,7 +12,7 @@ body {
font-size: @baseFontSize;
line-height: @baseLineHeight;
color: @textColor;
background-color: @white;
background-color: @bodyBackground;
}
......
less/variables.less
View file @ d3e922f0
......@@ -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;
......
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