Skip to content
GitLab
Commit d3e922f0 authored by Mark Otto's avatar Mark Otto
Browse files

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
+107 -43
docs/assets/bootstrap.zip
+ 0
- 0
View file @ d3e922f0
No preview for this file type
docs/assets/css/bootstrap.css
+ 40
- 20
View file @ d3e922f0
...@@ -116,7 +116,7 @@ a { ...@@ -116,7 +116,7 @@ a {
text-decoration: none; text-decoration: none;
} }
a:hover { a:hover {
color: #005580; color: #006699;
text-decoration: underline; text-decoration: underline;
} }
.row { .row {
...@@ -574,7 +574,7 @@ select, ...@@ -574,7 +574,7 @@ select,
font-size: 13px; font-size: 13px;
line-height: 18px; line-height: 18px;
color: #555555; color: #555555;
border: 1px solid #ccc; border: 1px solid #cccccc;
-webkit-border-radius: 3px; -webkit-border-radius: 3px;
-moz-border-radius: 3px; -moz-border-radius: 3px;
border-radius: 3px; border-radius: 3px;
...@@ -771,7 +771,7 @@ textarea[disabled], ...@@ -771,7 +771,7 @@ textarea[disabled],
input[readonly], input[readonly],
select[readonly], select[readonly],
textarea[readonly] { textarea[readonly] {
background-color: #f5f5f5; background-color: #eeeeee;
border-color: #ddd; border-color: #ddd;
cursor: not-allowed; cursor: not-allowed;
} }
...@@ -843,7 +843,7 @@ input:focus:required:invalid:focus, textarea:focus:required:invalid:focus, selec ...@@ -843,7 +843,7 @@ input:focus:required:invalid:focus, textarea:focus:required:invalid:focus, selec
padding: 17px 20px 18px; padding: 17px 20px 18px;
margin-top: 18px; margin-top: 18px;
margin-bottom: 18px; margin-bottom: 18px;
background-color: #f5f5f5; background-color: #grayLight;
border-top: 1px solid #ddd; border-top: 1px solid #ddd;
*zoom: 1; *zoom: 1;
} }
...@@ -933,7 +933,7 @@ input:focus:required:invalid:focus, textarea:focus:required:invalid:focus, selec ...@@ -933,7 +933,7 @@ input:focus:required:invalid:focus, textarea:focus:required:invalid:focus, selec
line-height: 18px; line-height: 18px;
text-align: center; text-align: center;
text-shadow: 0 1px 0 #ffffff; text-shadow: 0 1px 0 #ffffff;
background-color: #f5f5f5; background-color: #grayLight;
border: 1px solid #ccc; border: 1px solid #ccc;
-webkit-border-radius: 3px 0 0 3px; -webkit-border-radius: 3px 0 0 3px;
-moz-border-radius: 3px 0 0 3px; -moz-border-radius: 3px 0 0 3px;
...@@ -1832,8 +1832,8 @@ table .span24 { ...@@ -1832,8 +1832,8 @@ table .span24 {
border-color: #e6e6e6 #e6e6e6 #bfbfbf; 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); 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); filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
border: 1px solid #ccc; border: 1px solid #cccccc;
border-bottom-color: #bbb; border-bottom-color: #b3b3b3;
-webkit-border-radius: 4px; -webkit-border-radius: 4px;
-moz-border-radius: 4px; -moz-border-radius: 4px;
border-radius: 4px; border-radius: 4px;
...@@ -1939,16 +1939,16 @@ table .span24 { ...@@ -1939,16 +1939,16 @@ table .span24 {
color: rgba(255, 255, 255, 0.75); color: rgba(255, 255, 255, 0.75);
} }
.btn-primary { .btn-primary {
background-color: #006dcc; background-color: #0074cc;
background-image: -moz-linear-gradient(top, #0088cc, #0044cc); background-image: -moz-linear-gradient(top, #0088cc, #0055cc);
background-image: -ms-linear-gradient(top, #0088cc, #0044cc); background-image: -ms-linear-gradient(top, #0088cc, #0055cc);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0044cc)); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0055cc));
background-image: -webkit-linear-gradient(top, #0088cc, #0044cc); background-image: -webkit-linear-gradient(top, #0088cc, #0055cc);
background-image: -o-linear-gradient(top, #0088cc, #0044cc); background-image: -o-linear-gradient(top, #0088cc, #0055cc);
background-image: linear-gradient(top, #0088cc, #0044cc); background-image: linear-gradient(top, #0088cc, #0055cc);
background-repeat: repeat-x; background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0088cc', endColorstr='#0044cc', GradientType=0); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0088cc', endColorstr='#0055cc', GradientType=0);
border-color: #0044cc #0044cc #002a80; 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); 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); filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
} }
...@@ -1957,10 +1957,10 @@ table .span24 { ...@@ -1957,10 +1957,10 @@ table .span24 {
.btn-primary.active, .btn-primary.active,
.btn-primary.disabled, .btn-primary.disabled,
.btn-primary[disabled] { .btn-primary[disabled] {
background-color: #0044cc; background-color: #0055cc;
} }
.btn-primary:active, .btn-primary.active { .btn-primary:active, .btn-primary.active {
background-color: #003399 \9; background-color: #004099 \9;
} }
.btn-warning { .btn-warning {
background-color: #faa732; background-color: #faa732;
...@@ -2434,8 +2434,8 @@ button.btn.btn-small, input[type="submit"].btn.btn-small { ...@@ -2434,8 +2434,8 @@ button.btn.btn-small, input[type="submit"].btn.btn-small {
margin-top: 6px; margin-top: 6px;
} }
.nav-tabs .dropdown-toggle:hover .caret, .nav-pills .dropdown-toggle:hover .caret { .nav-tabs .dropdown-toggle:hover .caret, .nav-pills .dropdown-toggle:hover .caret {
border-top-color: #005580; border-top-color: #006699;
border-bottom-color: #005580; border-bottom-color: #006699;
} }
.nav-tabs .active .dropdown-toggle .caret, .nav-pills .active .dropdown-toggle .caret { .nav-tabs .active .dropdown-toggle .caret, .nav-pills .active .dropdown-toggle .caret {
border-top-color: #333333; border-top-color: #333333;
...@@ -3541,6 +3541,26 @@ a.thumbnail:hover { ...@@ -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: -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); 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 { .accordion {
margin-bottom: 18px; margin-bottom: 18px;
} }
......
less/buttons.less
+ 9
- 9
View file @ d3e922f0
...@@ -16,9 +16,9 @@ ...@@ -16,9 +16,9 @@
text-align: center; text-align: center;
text-shadow: 0 1px 1px rgba(255,255,255,.75); text-shadow: 0 1px 1px rgba(255,255,255,.75);
vertical-align: middle; vertical-align: middle;
.buttonBackground(@white, darken(@white, 10%)); .buttonBackground(@btnBackground, @btnBackgroundHighlight);
border: 1px solid #ccc; border: 1px solid @btnBorder;
border-bottom-color: #bbb; border-bottom-color: darken(@btnBorder, 10%);
.border-radius(4px); .border-radius(4px);
@shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05); @shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
.box-shadow(@shadow); .box-shadow(@shadow);
...@@ -132,27 +132,27 @@ ...@@ -132,27 +132,27 @@
// Set the backgrounds // Set the backgrounds
// ------------------------- // -------------------------
.btn-primary { .btn-primary {
.buttonBackground(@primaryButtonBackground, spin(@primaryButtonBackground, 20)); .buttonBackground(@btnPrimaryBackground, @btnPrimaryBackgroundHighlight);
} }
// Warning appears are orange // Warning appears are orange
.btn-warning { .btn-warning {
.buttonBackground(lighten(@orange, 15%), @orange); .buttonBackground(@btnWarningBackground, @btnWarningBackgroundHighlight);
} }
// Danger and error appear as red // Danger and error appear as red
.btn-danger { .btn-danger {
.buttonBackground(#ee5f5b, #bd362f); .buttonBackground(@btnDangerBackground, @btnDangerBackgroundHighlight);
} }
// Success appears as green // Success appears as green
.btn-success { .btn-success {
.buttonBackground(#62c462, #51a351); .buttonBackground(@btnSuccessBackground, @btnSuccessBackgroundHighlight);
} }
// Info appears as a neutral blue // Info appears as a neutral blue
.btn-info { .btn-info {
.buttonBackground(#5bc0de, #2f96b4); .buttonBackground(@btnInfoBackground, @btnInfoBackgroundHighlight);
} }
// Inverse appears as dark gray // Inverse appears as dark gray
.btn-inverse { .btn-inverse {
.buttonBackground(@gray, @grayDarker); .buttonBackground(@btnInverseBackground, @btnInverseBackgroundHighlight);
} }
......
less/forms.less
+ 7
- 7
View file @ d3e922f0
...@@ -71,7 +71,7 @@ select, ...@@ -71,7 +71,7 @@ select,
font-size: @baseFontSize; font-size: @baseFontSize;
line-height: @baseLineHeight; line-height: @baseLineHeight;
color: @gray; color: @gray;
border: 1px solid #ccc; border: 1px solid @inputBorder;
.border-radius(3px); .border-radius(3px);
} }
.uneditable-textarea { .uneditable-textarea {
...@@ -110,7 +110,7 @@ input[type="file"] { ...@@ -110,7 +110,7 @@ input[type="file"] {
padding: initial; padding: initial;
line-height: initial; line-height: initial;
border: initial; border: initial;
background-color: @white; background-color: @inputBackground;
background-color: initial; background-color: initial;
.box-shadow(none); .box-shadow(none);
} }
...@@ -139,7 +139,7 @@ input[type="file"] { ...@@ -139,7 +139,7 @@ input[type="file"] {
// Chrome on Linux and Mobile Safari need background-color // Chrome on Linux and Mobile Safari need background-color
select { select {
width: 220px; // default input width + 10px of padding that doesn't get applied 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 // Make multiple select elements height not fixed
...@@ -268,7 +268,7 @@ textarea[disabled], ...@@ -268,7 +268,7 @@ textarea[disabled],
input[readonly], input[readonly],
select[readonly], select[readonly],
textarea[readonly] { textarea[readonly] {
background-color: #f5f5f5; background-color: @inputDisabledBackground;
border-color: #ddd; border-color: #ddd;
cursor: not-allowed; cursor: not-allowed;
} }
...@@ -314,7 +314,7 @@ select:focus:required:invalid { ...@@ -314,7 +314,7 @@ select:focus:required:invalid {
padding: (@baseLineHeight - 1) 20px @baseLineHeight; padding: (@baseLineHeight - 1) 20px @baseLineHeight;
margin-top: @baseLineHeight; margin-top: @baseLineHeight;
margin-bottom: @baseLineHeight; margin-bottom: @baseLineHeight;
background-color: #f5f5f5; background-color: #grayLight;
border-top: 1px solid #ddd; border-top: 1px solid #ddd;
.clearfix(); // Adding clearfix to allow for .pull-right button containers .clearfix(); // Adding clearfix to allow for .pull-right button containers
} }
...@@ -322,7 +322,7 @@ select:focus:required:invalid { ...@@ -322,7 +322,7 @@ select:focus:required:invalid {
// For text that needs to appear as an input but should not be an input // For text that needs to appear as an input but should not be an input
.uneditable-input { .uneditable-input {
display: block; display: block;
background-color: @white; background-color: @inputBackground;
border-color: #eee; border-color: #eee;
.box-shadow(inset 0 1px 2px rgba(0,0,0,.025)); .box-shadow(inset 0 1px 2px rgba(0,0,0,.025));
cursor: not-allowed; cursor: not-allowed;
...@@ -387,7 +387,7 @@ select:focus:required:invalid { ...@@ -387,7 +387,7 @@ select:focus:required:invalid {
line-height: @baseLineHeight; line-height: @baseLineHeight;
text-align: center; text-align: center;
text-shadow: 0 1px 0 @white; text-shadow: 0 1px 0 @white;
background-color: #f5f5f5; background-color: #grayLight;
border: 1px solid #ccc; border: 1px solid #ccc;
.border-radius(3px 0 0 3px); .border-radius(3px 0 0 3px);
} }
......
less/scaffolding.less
+ 1
- 1
View file @ d3e922f0
...@@ -12,7 +12,7 @@ body { ...@@ -12,7 +12,7 @@ body {
font-size: @baseFontSize; font-size: @baseFontSize;
line-height: @baseLineHeight; line-height: @baseLineHeight;
color: @textColor; color: @textColor;
background-color: @white; background-color: @bodyBackground;
} }
......
less/variables.less
+ 50
- 6
View file @ d3e922f0
...@@ -7,10 +7,6 @@ ...@@ -7,10 +7,6 @@
// GLOBAL VALUES // GLOBAL VALUES
// -------------------------------------------------- // --------------------------------------------------
// Links
@linkColor: #08c;
@linkColorHover: darken(@linkColor, 15%);
// Grays // Grays
@black: #000; @black: #000;
@grayDarker: #222; @grayDarker: #222;
...@@ -30,14 +26,57 @@ ...@@ -30,14 +26,57 @@
@pink: #c3325f; @pink: #c3325f;
@purple: #7a43b6; @purple: #7a43b6;
// Scaffolding
@bodyBackground: @white;
@textColor: @grayDark;
// Links
@linkColor: #08c;
@linkColorHover: #069;
// Typography // Typography
@baseFontSize: 13px; @baseFontSize: 13px;
@baseFontFamily: "Helvetica Neue", Helvetica, Arial, sans-serif; @baseFontFamily: "Helvetica Neue", Helvetica, Arial, sans-serif;
@baseLineHeight: 18px; @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 // 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 @@ ...@@ -74,6 +113,11 @@
@navbarLinkColor: @grayLight; @navbarLinkColor: @grayLight;
@navbarLinkColorHover: @white; @navbarLinkColorHover: @white;
// Hero unit
@heroUnitBackground: #312f2e;
@heroUnitHeadingColor: @white;
@heroUnitLeadColor: @white;
// Form states and alerts // Form states and alerts
@warningText: #c09853; @warningText: #c09853;
@warningBackground: #fcf8e3; @warningBackground: #fcf8e3;
......
Supports Markdown
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