Skip to content

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

massive update to customize page to include all the new variables (and ensure... 

massive update to customize page to include all the new variables (and ensure they're being used in the .less files)
parent 95a3cd87
Show whitespace changes
Inline Side-by-side
Showing with 152 additions and 21 deletions
docs/assets/css/bootstrap.css
View file @ 1dbb942d
...@@ -124,7 +124,7 @@ a { ...@@ -124,7 +124,7 @@ a {
text-decoration: none; text-decoration: none;
} }
a:hover { a:hover {
color: #006699; color: #005580;
text-decoration: underline; text-decoration: underline;
} }
.row { .row {
...@@ -2601,8 +2601,8 @@ input[type="submit"].btn.btn-small { ...@@ -2601,8 +2601,8 @@ input[type="submit"].btn.btn-small {
} }
.nav-tabs .dropdown-toggle:hover .caret, .nav-tabs .dropdown-toggle:hover .caret,
.nav-pills .dropdown-toggle:hover .caret { .nav-pills .dropdown-toggle:hover .caret {
border-top-color: #006699; border-top-color: #005580;
border-bottom-color: #006699; border-bottom-color: #005580;
} }
.nav-tabs .active .dropdown-toggle .caret, .nav-tabs .active .dropdown-toggle .caret,
.nav-pills .active .dropdown-toggle .caret { .nav-pills .active .dropdown-toggle .caret {
...@@ -3901,7 +3901,7 @@ a.thumbnail:hover { ...@@ -3901,7 +3901,7 @@ a.thumbnail:hover {
.hero-unit { .hero-unit {
padding: 60px; padding: 60px;
margin-bottom: 30px; margin-bottom: 30px;
background-color: #f5f5f5; background-color: #eeeeee;
-webkit-border-radius: 6px; -webkit-border-radius: 6px;
-moz-border-radius: 6px; -moz-border-radius: 6px;
border-radius: 6px; border-radius: 6px;
...@@ -3910,12 +3910,14 @@ a.thumbnail:hover { ...@@ -3910,12 +3910,14 @@ a.thumbnail:hover {
margin-bottom: 0; margin-bottom: 0;
font-size: 60px; font-size: 60px;
line-height: 1; line-height: 1;
color: inherit;
letter-spacing: -1px; letter-spacing: -1px;
} }
.hero-unit p { .hero-unit p {
font-size: 18px; font-size: 18px;
font-weight: 200; font-weight: 200;
line-height: 27px; line-height: 27px;
color: inherit;
} }
.pull-right { .pull-right {
float: right; float: right;
......
docs/download.html
View file @ 1dbb942d
...@@ -227,6 +227,12 @@ ...@@ -227,6 +227,12 @@
</div> </div>
<div class="row download-builder"> <div class="row download-builder">
<div class="span3"> <div class="span3">
<h3>Scaffolding</h3>
<label>@bodyBackground</label>
<input type="text" class="span3" placeholder="@white">
<label>@textColor</label>
<input type="text" class="span3" placeholder="@grayDark">
<h3>Links</h3> <h3>Links</h3>
<label>@linkColor</label> <label>@linkColor</label>
<input type="text" class="span3" placeholder="#08c"> <input type="text" class="span3" placeholder="#08c">
...@@ -247,6 +253,13 @@ ...@@ -247,6 +253,13 @@
<input type="text" class="span3" placeholder="#c3325f"> <input type="text" class="span3" placeholder="#c3325f">
<label>@purple</label> <label>@purple</label>
<input type="text" class="span3" placeholder="#7a43b6"> <input type="text" class="span3" placeholder="#7a43b6">
<h3>Sprites</h3>
<label>@iconSpritePath</label>
<input type="text" class="span3" placeholder="'../img/glyphicons-halflings.png'">
<label>@iconWhiteSpritePath</label>
<input type="text" class="span3" placeholder="'../img/glyphicons-halflings-white.png'">
</div><!-- /span --> </div><!-- /span -->
<div class="span3"> <div class="span3">
<h3>Grid system</h3> <h3>Grid system</h3>
...@@ -261,6 +274,7 @@ ...@@ -261,6 +274,7 @@
<input type="text" class="span3" placeholder="6.382978723%"> <input type="text" class="span3" placeholder="6.382978723%">
<label>@fluidGridGutterWidth</label> <label>@fluidGridGutterWidth</label>
<input type="text" class="span3" placeholder="2.127659574%"> <input type="text" class="span3" placeholder="2.127659574%">
<h3>Typography</h3> <h3>Typography</h3>
<label>@baseFontSize</label> <label>@baseFontSize</label>
<input type="text" class="span3" placeholder="13px"> <input type="text" class="span3" placeholder="13px">
...@@ -268,13 +282,32 @@ ...@@ -268,13 +282,32 @@
<input type="text" class="span3" placeholder="'Helvetica Neue', Helvetica, Arial, sans-serif"> <input type="text" class="span3" placeholder="'Helvetica Neue', Helvetica, Arial, sans-serif">
<label>@baseLineHeight</label> <label>@baseLineHeight</label>
<input type="text" class="span3" placeholder="18px"> <input type="text" class="span3" placeholder="18px">
<label>@altFontFamily</label>
<input type="text" class="span3" placeholder="Georgia, 'Times New Roman', Times, serif;">
<label>@headingsFontFamily</label>
<input type="text" class="span3" placeholder="inherit">
<label>@headingsFontWeight</label>
<input type="text" class="span3" placeholder="bold">
<label>@headingsColor</label>
<input type="text" class="span3" placeholder="inherit">
<label>@heroUnitBackground</label>
<input type="text" class="span3" placeholder="@grayLighter">
<label>@heroUnitHeadingColor</label>
<input type="text" class="span3" placeholder="inherit">
<label>@heroUnitLeadColor</label>
<input type="text" class="span3" placeholder="inherit">
</div><!-- /span --> </div><!-- /span -->
<div class="span3"> <div class="span3">
<h3>Forms</h3> <h3>Tables</h3>
<label>@primaryButtonColor</label> <label>@tableBackground</label>
<input type="text" class="span3" placeholder="@blue"> <input type="text" class="span3" placeholder="transparent">
<label>@placeholderText</label> <label>@tableBackgroundAccent</label>
<input type="text" class="span3" placeholder="@grayLight"> <input type="text" class="span3" placeholder="#f9f9f9">
<label>@tableBackgroundHover</label>
<input type="text" class="span3" placeholder="#f5f5f5">
<label>@tableBorder</label>
<input type="text" class="span3" placeholder="#ddd">
<h3>Navbar</h3> <h3>Navbar</h3>
<label>@navbarHeight</label> <label>@navbarHeight</label>
<input type="text" class="span3" placeholder="40px"> <input type="text" class="span3" placeholder="40px">
...@@ -288,8 +321,39 @@ ...@@ -288,8 +321,39 @@
<input type="text" class="span3" placeholder="@grayLight"> <input type="text" class="span3" placeholder="@grayLight">
<label>@navbarLinkColorHover</label> <label>@navbarLinkColorHover</label>
<input type="text" class="span3" placeholder="@white"> <input type="text" class="span3" placeholder="@white">
<label>@navbarLinkColorActive</label>
<input type="text" class="span3" placeholder="@navbarLinkColorHover">
<label>@navbarLinkBackgroundHover</label>
<input type="text" class="span3" placeholder="transparent">
<label>@navbarLinkBackgroundActive</label>
<input type="text" class="span3" placeholder="@navbarBackground">
<h3>Dropdowns</h3>
<label>@dropdownBackground</label>
<input type="text" class="span3" placeholder="@white">
<label>@dropdownLinkColor</label>
<input type="text" class="span3" placeholder="@grayDark">
<label>@dropdownLinkColorHover</label>
<input type="text" class="span3" placeholder="@white">
<label>@dropdownLinkBackgroundHover</label>
<input type="text" class="span3" placeholder="@linkColor">
</div><!-- /span --> </div><!-- /span -->
<div class="span3"> <div class="span3">
<h3>Forms</h3>
<label>@placeholderText</label>
<input type="text" class="span3" placeholder="@grayLight">
<label>@inputBackground</label>
<input type="text" class="span3" placeholder="@white">
<label>@inputBorder</label>
<input type="text" class="span3" placeholder="#ccc">
<label>@inputDisabledBackground</label>
<input type="text" class="span3" placeholder="@grayLighter">
<label>@btnPrimaryBackground</label>
<input type="text" class="span3" placeholder="@linkColor">
<label>@btnPrimaryBackgroundHighlight</label>
<input type="text" class="span3" placeholder="darken(@white, 10%);">
<h3>Form states &amp; alerts</h3> <h3>Form states &amp; alerts</h3>
<label>@warningText</label> <label>@warningText</label>
<input type="text" class="span3" placeholder="#c09853"> <input type="text" class="span3" placeholder="#c09853">
......
docs/templates/pages/download.mustache
View file @ 1dbb942d
...@@ -151,6 +151,12 @@ ...@@ -151,6 +151,12 @@
</div> </div>
<div class="row download-builder"> <div class="row download-builder">
<div class="span3"> <div class="span3">
<h3>{{_i}}Scaffolding{{/i}}</h3>
<label>@bodyBackground</label>
<input type="text" class="span3" placeholder="@white">
<label>@textColor</label>
<input type="text" class="span3" placeholder="@grayDark">
<h3>{{_i}}Links{{/i}}</h3> <h3>{{_i}}Links{{/i}}</h3>
<label>@linkColor</label> <label>@linkColor</label>
<input type="text" class="span3" placeholder="#08c"> <input type="text" class="span3" placeholder="#08c">
...@@ -171,6 +177,13 @@ ...@@ -171,6 +177,13 @@
<input type="text" class="span3" placeholder="#c3325f"> <input type="text" class="span3" placeholder="#c3325f">
<label>@purple</label> <label>@purple</label>
<input type="text" class="span3" placeholder="#7a43b6"> <input type="text" class="span3" placeholder="#7a43b6">
<h3>{{_i}}Sprites{{/i}}</h3>
<label>@iconSpritePath</label>
<input type="text" class="span3" placeholder="'../img/glyphicons-halflings.png'">
<label>@iconWhiteSpritePath</label>
<input type="text" class="span3" placeholder="'../img/glyphicons-halflings-white.png'">
</div><!-- /span --> </div><!-- /span -->
<div class="span3"> <div class="span3">
<h3>{{_i}}Grid system{{/i}}</h3> <h3>{{_i}}Grid system{{/i}}</h3>
...@@ -185,6 +198,7 @@ ...@@ -185,6 +198,7 @@
<input type="text" class="span3" placeholder="6.382978723%"> <input type="text" class="span3" placeholder="6.382978723%">
<label>@fluidGridGutterWidth</label> <label>@fluidGridGutterWidth</label>
<input type="text" class="span3" placeholder="2.127659574%"> <input type="text" class="span3" placeholder="2.127659574%">
<h3>{{_i}}Typography{{/i}}</h3> <h3>{{_i}}Typography{{/i}}</h3>
<label>@baseFontSize</label> <label>@baseFontSize</label>
<input type="text" class="span3" placeholder="13px"> <input type="text" class="span3" placeholder="13px">
...@@ -192,13 +206,32 @@ ...@@ -192,13 +206,32 @@
<input type="text" class="span3" placeholder="'Helvetica Neue', Helvetica, Arial, sans-serif"> <input type="text" class="span3" placeholder="'Helvetica Neue', Helvetica, Arial, sans-serif">
<label>@baseLineHeight</label> <label>@baseLineHeight</label>
<input type="text" class="span3" placeholder="18px"> <input type="text" class="span3" placeholder="18px">
<label>@altFontFamily</label>
<input type="text" class="span3" placeholder="Georgia, 'Times New Roman', Times, serif;">
<label>@headingsFontFamily</label>
<input type="text" class="span3" placeholder="inherit">
<label>@headingsFontWeight</label>
<input type="text" class="span3" placeholder="bold">
<label>@headingsColor</label>
<input type="text" class="span3" placeholder="inherit">
<label>@heroUnitBackground</label>
<input type="text" class="span3" placeholder="@grayLighter">
<label>@heroUnitHeadingColor</label>
<input type="text" class="span3" placeholder="inherit">
<label>@heroUnitLeadColor</label>
<input type="text" class="span3" placeholder="inherit">
</div><!-- /span --> </div><!-- /span -->
<div class="span3"> <div class="span3">
<h3>{{_i}}Forms{{/i}}</h3> <h3>{{_i}}Tables{{/i}}</h3>
<label>@primaryButtonColor</label> <label>@tableBackground</label>
<input type="text" class="span3" placeholder="@blue"> <input type="text" class="span3" placeholder="transparent">
<label>@placeholderText</label> <label>@tableBackgroundAccent</label>
<input type="text" class="span3" placeholder="@grayLight"> <input type="text" class="span3" placeholder="#f9f9f9">
<label>@tableBackgroundHover</label>
<input type="text" class="span3" placeholder="#f5f5f5">
<label>@tableBorder</label>
<input type="text" class="span3" placeholder="#ddd">
<h3>{{_i}}Navbar{{/i}}</h3> <h3>{{_i}}Navbar{{/i}}</h3>
<label>@navbarHeight</label> <label>@navbarHeight</label>
<input type="text" class="span3" placeholder="40px"> <input type="text" class="span3" placeholder="40px">
...@@ -212,8 +245,39 @@ ...@@ -212,8 +245,39 @@
<input type="text" class="span3" placeholder="@grayLight"> <input type="text" class="span3" placeholder="@grayLight">
<label>@navbarLinkColorHover</label> <label>@navbarLinkColorHover</label>
<input type="text" class="span3" placeholder="@white"> <input type="text" class="span3" placeholder="@white">
<label>@navbarLinkColorActive</label>
<input type="text" class="span3" placeholder="@navbarLinkColorHover">
<label>@navbarLinkBackgroundHover</label>
<input type="text" class="span3" placeholder="transparent">
<label>@navbarLinkBackgroundActive</label>
<input type="text" class="span3" placeholder="@navbarBackground">
<h3>{{_i}}Dropdowns{{/i}}</h3>
<label>@dropdownBackground</label>
<input type="text" class="span3" placeholder="@white">
<label>@dropdownLinkColor</label>
<input type="text" class="span3" placeholder="@grayDark">
<label>@dropdownLinkColorHover</label>
<input type="text" class="span3" placeholder="@white">
<label>@dropdownLinkBackgroundHover</label>
<input type="text" class="span3" placeholder="@linkColor">
</div><!-- /span --> </div><!-- /span -->
<div class="span3"> <div class="span3">
<h3>{{_i}}Forms{{/i}}</h3>
<label>@placeholderText</label>
<input type="text" class="span3" placeholder="@grayLight">
<label>@inputBackground</label>
<input type="text" class="span3" placeholder="@white">
<label>@inputBorder</label>
<input type="text" class="span3" placeholder="#ccc">
<label>@inputDisabledBackground</label>
<input type="text" class="span3" placeholder="@grayLighter">
<label>@btnPrimaryBackground</label>
<input type="text" class="span3" placeholder="@linkColor">
<label>@btnPrimaryBackgroundHighlight</label>
<input type="text" class="span3" placeholder="darken(@white, 10%);">
<h3>{{_i}}Form states &amp; alerts{{/i}}</h3> <h3>{{_i}}Form states &amp; alerts{{/i}}</h3>
<label>@warningText</label> <label>@warningText</label>
<input type="text" class="span3" placeholder="#c09853"> <input type="text" class="span3" placeholder="#c09853">
......
less/hero-unit.less
View file @ 1dbb942d
...@@ -4,17 +4,19 @@ ...@@ -4,17 +4,19 @@
.hero-unit { .hero-unit {
padding: 60px; padding: 60px;
margin-bottom: 30px; margin-bottom: 30px;
background-color: #f5f5f5; background-color: @heroUnitBackground;
.border-radius(6px); .border-radius(6px);
h1 { h1 {
margin-bottom: 0; margin-bottom: 0;
font-size: 60px; font-size: 60px;
line-height: 1; line-height: 1;
color: @heroUnitHeadingColor;
letter-spacing: -1px; letter-spacing: -1px;
} }
p { p {
font-size: 18px; font-size: 18px;
font-weight: 200; font-weight: 200;
line-height: @baseLineHeight * 1.5; line-height: @baseLineHeight * 1.5;
color: @heroUnitLeadColor;
} }
} }
less/variables.less
View file @ 1dbb942d
...@@ -40,7 +40,7 @@ ...@@ -40,7 +40,7 @@
// Links // Links
// ------------------------- // -------------------------
@linkColor: #08c; @linkColor: #08c;
@linkColorHover: #069; @linkColorHover: darken(@linkColor, 15%);
// Typography // Typography
...@@ -67,7 +67,7 @@ ...@@ -67,7 +67,7 @@
// ------------------------- // -------------------------
@btnBackground: @white; @btnBackground: @white;
@btnBackgroundHighlight: darken(@white, 10%); @btnBackgroundHighlight: darken(@white, 10%);
@btnBorder: #ccc; @btnBorder: darken(@white, 20%);
@btnPrimaryBackground: @linkColor; @btnPrimaryBackground: @linkColor;
@btnPrimaryBackgroundHighlight: spin(@btnPrimaryBackground, 15%); @btnPrimaryBackgroundHighlight: spin(@btnPrimaryBackground, 15%);
...@@ -92,7 +92,6 @@ ...@@ -92,7 +92,6 @@
// ------------------------- // -------------------------
@inputBackground: @white; @inputBackground: @white;
@inputBorder: #ccc; @inputBorder: #ccc;
@inputDisabledBackground: @grayLighter; @inputDisabledBackground: @grayLighter;
...@@ -153,9 +152,9 @@ ...@@ -153,9 +152,9 @@
// Hero unit // Hero unit
// ------------------------- // -------------------------
@heroUnitBackground: #312f2e; @heroUnitBackground: @grayLighter;
@heroUnitHeadingColor: @white; @heroUnitHeadingColor: inherit;
@heroUnitLeadColor: @white; @heroUnitLeadColor: inherit;
// Form states and alerts // Form states and alerts
......
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