mirrors/bootstrap
2
0
Fork 0
mirror of https://github.com/tenrok/bootstrap.git synced 2026-06-08 17:22:31 +03:00
Code Activity

update variables to inlude @baseFontSize, @baseFontFamily, @baseLineHeight for easier customization; added placeholder for @primaryButtonColor, but didn't implement

Browse Source
This commit is contained in:
Mark Otto
2011-10-04 00:20:38 -07:00
parent 0a6d8c30db
commit 96dd7a2903
9 changed files with 164 additions and 148 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/forms.less
+15 -15
View File
@@ -8,16 +8,16 @@
// Make all forms have space below them
form {
margin-bottom: @baseline;
margin-bottom: @baseLineHeight;
}
// Groups of fields with labels on top (legends)
legend {
display: block;
width: 100%;
margin-bottom: @baseline * 1.5;
font-size: @basefont * 1.5;
line-height: @baseline * 2;
margin-bottom: @baseLineHeight * 1.5;
font-size: @baseFontSize * 1.5;
line-height: @baseLineHeight * 2;
color: @grayDark;
border-bottom: 1px solid #eee;
}
@@ -27,7 +27,7 @@ label,
input,
select,
textarea {
#font > .sans-serif(normal,@basefont,@baseline);
#font > .sans-serif(normal,@baseFontSize,@baseLineHeight);
}
// Identify controls by their labels
@@ -50,10 +50,10 @@ select,
.uneditable-input {
display: inline-block;
width: 210px;
height: @baseline;
height: @baseLineHeight;
padding: 4px;
font-size: @basefont;
line-height: @baseline;
font-size: @baseFontSize;
line-height: @baseLineHeight;
color: @gray;
border: 1px solid #ccc;
.border-radius(3px);
@@ -90,8 +90,8 @@ input[type=submit] {
select,
input[type=file] {
height: @baseline * 1.5; // In IE7, the height of the select element cannot be changed by height, only font-size
line-height: @baseline * 1.5;
height: @baseLineHeight * 1.5; // In IE7, the height of the select element cannot be changed by height, only font-size
line-height: @baseLineHeight * 1.5;
*margin-top: 4px; /* For IE7, add top margin to align select with labels */
}
@@ -200,7 +200,7 @@ textarea[readonly] {
// Style the background of control-groups with errors
.has-error {
background: lighten(@red, 55%);
padding: (@baseline / 2) 0;
padding: (@baseLineHeight / 2) 0;
margin: -10px 0 10px;
.border-radius(4px);
> label,
@@ -234,9 +234,9 @@ textarea[readonly] {
// ------------
.form-actions {
padding: (@baseline - 1) 20px @baseline;
margin-top: @baseline;
margin-bottom: @baseline;
padding: (@baseLineHeight - 1) 20px @baseLineHeight;
margin-top: @baseLineHeight;
margin-bottom: @baseLineHeight;
background-color: #f5f5f5;
border-top: 1px solid #ddd;
}
@@ -375,7 +375,7 @@ textarea[readonly] {
// Margin to space out fieldsets
.control-group {
margin-bottom: @baseline;
margin-bottom: @baseLineHeight;
}
// Bold the labels so they stand out
lib/mixins.less
+5 -5
View File
@@ -46,25 +46,25 @@
// Font Stacks
#font {
.shorthand(@weight: normal, @size: 14px, @lineHeight: 20px) {
.shorthand(@weight: normal, @size: @baseFontSize, @lineHeight: @baseLineHeight) {
font-size: @size;
font-weight: @weight;
line-height: @lineHeight;
}
.sans-serif(@weight: normal, @size: 14px, @lineHeight: 20px) {
.sans-serif(@weight: normal, @size: @baseFontSize, @lineHeight: @baseLineHeight) {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: @size;
font-weight: @weight;
line-height: @lineHeight;
}
.serif(@weight: normal, @size: 14px, @lineHeight: 20px) {
.serif(@weight: normal, @size: @baseFontSize, @lineHeight: @baseLineHeight) {
font-family: "Georgia", Times New Roman, Times, serif;
font-size: @size;
font-weight: @weight;
line-height: @lineHeight;
}
.monospace(@weight: normal, @size: 12px, @lineHeight: 20px) {
font-family: "Monaco", Courier New, monospace;
.monospace(@weight: normal, @size: @baseFontSize, @lineHeight: @baseLineHeight) {
font-family: Menlo, Monaco, Andale Mono, Courier New, monospace;
font-size: @size;
font-weight: @weight;
line-height: @lineHeight;
lib/patterns.less
+17 -17
View File
@@ -313,7 +313,7 @@
> a {
padding: 0 15px;
margin-right: 2px;
line-height: @baseline * 2;
line-height: @baseLineHeight * 2;
border: 1px solid transparent;
.border-radius(4px 4px 0 0);
&:hover {
@@ -387,7 +387,7 @@
// -----------
.breadcrumb {
margin: 0 0 @baseline;
margin: 0 0 @baseLineHeight;
padding: 7px 14px;
#gradient > .vertical(#ffffff, #f5f5f5);
border: 1px solid #ddd;
@@ -424,12 +424,12 @@
p {
font-size: 18px;
font-weight: 200;
line-height: @baseline * 1.5;
line-height: @baseLineHeight * 1.5;
}
}
footer {
margin-top: @baseline - 1;
padding-top: @baseline - 1;
margin-top: @baseLineHeight - 1;
padding-top: @baseLineHeight - 1;
border-top: 1px solid #eee;
}
@@ -438,11 +438,11 @@ footer {
// ------------
.page-header {
margin-bottom: @baseline - 1;
margin-bottom: @baseLineHeight - 1;
border-bottom: 1px solid #ddd;
.box-shadow(0 1px 0 rgba(255,255,255,.5));
h1 {
margin-bottom: (@baseline / 2) - 1px;
margin-bottom: (@baseLineHeight / 2) - 1px;
}
}
@@ -488,7 +488,7 @@ footer {
padding: 5px 14px 6px;
text-shadow: 0 1px 1px rgba(255,255,255,.75);
color: #333;
font-size: @basefont;
font-size: @baseFontSize;
line-height: normal;
border: 1px solid #ccc;
border-bottom-color: #bbb;
@@ -540,14 +540,14 @@ footer {
// Button Sizes
&.large {
font-size: @basefont + 2px;
font-size: @baseFontSize + 2px;
line-height: normal;
padding: 9px 14px 9px;
.border-radius(6px);
}
&.small {
padding: 7px 9px 7px;
font-size: @basefont - 2px;
font-size: @baseFontSize - 2px;
}
}
// Super jank hack for removing border-radius from IE9 so we can keep filter gradients on alerts and buttons
@@ -621,7 +621,7 @@ input[type=submit].btn {
color: @black;
font-size: 20px;
font-weight: bold;
line-height: @baseline * .75;
line-height: @baseLineHeight * .75;
text-shadow: 0 1px 0 rgba(255,255,255,1);
.opacity(20);
&:hover {
@@ -639,7 +639,7 @@ input[type=submit].btn {
.alert-message {
position: relative;
padding: 7px 15px;
margin-bottom: @baseline;
margin-bottom: @baseLineHeight;
color: @grayDark;
.gradientBar(#fceec1, #eedc94); // warning by default
text-shadow: 0 1px 0 rgba(255,255,255,.5);
@@ -655,7 +655,7 @@ input[type=submit].btn {
// Remove extra margin from content
h5 {
line-height: @baseline;
line-height: @baseLineHeight;
}
p {
margin-bottom: 0;
@@ -715,8 +715,8 @@ input[type=submit].btn {
// ----------
.pagination {
height: @baseline * 2;
margin: @baseline 0;
height: @baseLineHeight * 2;
margin: @baseLineHeight 0;
ul {
float: left;
margin: 0;
@@ -731,7 +731,7 @@ input[type=submit].btn {
a {
float: left;
padding: 0 14px;
line-height: (@baseline * 2) - 2;
line-height: (@baseLineHeight * 2) - 2;
border-right: 1px solid;
border-right-color: #ddd;
border-right-color: rgba(0,0,0,.15);
@@ -972,7 +972,7 @@ input[type=submit].btn {
.label {
padding: 1px 3px 2px;
background-color: @grayLight;
font-size: @basefont * .75;
font-size: @baseFontSize * .75;
font-weight: bold;
color: @white;
text-transform: uppercase;
lib/scaffolding.less
+3 -1
View File
@@ -12,7 +12,9 @@ html, body {
}
body {
margin: 0;
#font > .sans-serif(normal,@basefont,@baseline);
font-family: @baseFontFamily;
font-size: @baseFontSize;
line-height: @baseLineHeight;
color: @grayDark;
}
lib/tables.less
+3 -3
View File
@@ -9,16 +9,16 @@
table {
width: 100%;
margin-bottom: @baseline;
margin-bottom: @baseLineHeight;
padding: 0;
border-collapse: separate; // Done so we can round those corners!
*border-collapse: collapse; /* IE7, collapse table to remove spacing */
font-size: @basefont;
font-size: @baseFontSize;
border: 1px solid #ddd;
.border-radius(4px);
th, td {
padding: 10px 10px 9px;
line-height: @baseline;
line-height: @baseLineHeight;
text-align: left;
}
th {
lib/type.less
+26 -24
View File
@@ -7,10 +7,12 @@
// ---------
p {
#font > .shorthand(normal,@basefont,@baseline);
margin-bottom: @baseline / 2;
font-family: @baseFontFamily;
font-size: @baseFontSize;
line-height: @baseLineHeight;
margin-bottom: @baseLineHeight / 2;
small {
font-size: @basefont - 2;
font-size: @baseFontSize - 2;
color: @grayLight;
}
}
@@ -27,22 +29,22 @@ h1, h2, h3, h4, h5, h6 {
}
}
h1 {
margin-bottom: @baseline;
margin-bottom: @baseLineHeight;
font-size: 30px;
line-height: @baseline * 2;
line-height: @baseLineHeight * 2;
small {
font-size: 18px;
}
}
h2 {
font-size: 24px;
line-height: @baseline * 2;
line-height: @baseLineHeight * 2;
small {
font-size: 14px;
}
}
h3 {
line-height: @baseline * 2;
line-height: @baseLineHeight * 2;
font-size: 18px;
small {
font-size: 14px;
@@ -50,18 +52,18 @@ h3 {
}
h4 {
font-size: 16px;
line-height: @baseline * 2;
line-height: @baseLineHeight * 2;
small {
font-size: 12px;
}
}
h5 {
font-size: 14px;
line-height: @baseline;
line-height: @baseLineHeight;
}
h6 {
font-size: 13px;
line-height: @baseline;
line-height: @baseLineHeight;
color: @grayLight;
text-transform: uppercase;
}
@@ -72,7 +74,7 @@ h6 {
// Unordered and Ordered lists
ul, ol {
margin: 0 0 @baseline 25px;
margin: 0 0 @baseLineHeight 25px;
}
ul ul,
ul ol,
@@ -87,7 +89,7 @@ ol {
list-style: decimal;
}
li {
line-height: @baseline;
line-height: @baseLineHeight;
color: @gray;
}
ul.unstyled {
@@ -97,15 +99,15 @@ ul.unstyled {
// Description Lists
dl {
margin-bottom: @baseline;
margin-bottom: @baseLineHeight;
dt, dd {
line-height: @baseline;
line-height: @baseLineHeight;
}
dt {
font-weight: bold;
}
dd {
margin-left: @baseline / 2;
margin-left: @baseLineHeight / 2;
}
}
@@ -135,16 +137,16 @@ em {
// Blockquotes
blockquote {
margin-bottom: @baseline;
margin-bottom: @baseLineHeight;
border-left: 5px solid #eee;
padding-left: 15px;
p {
#font > .shorthand(300,14px,@baseline);
#font > .shorthand(300,14px,@baseLineHeight);
margin-bottom: 0;
}
small {
display: block;
#font > .shorthand(300,12px,@baseline);
#font > .shorthand(300,12px,@baseLineHeight);
color: @grayLight;
&:before {
content: '\2014 \00A0';
@@ -155,14 +157,14 @@ blockquote {
// Addresses
address {
display: block;
line-height: @baseline;
margin-bottom: @baseline;
line-height: @baseLineHeight;
margin-bottom: @baseLineHeight;
}
// Inline and block code styles
code, pre {
padding: 0 3px 2px;
font-family: Monaco, Andale Mono, Courier New, monospace;
font-family: Menlo, Monaco, Andale Mono, Courier New, monospace;
font-size: 12px;
.border-radius(3px);
}
@@ -174,9 +176,9 @@ code {
pre {
background-color: #f5f5f5;
display: block;
padding: (@baseline - 1) / 2;
margin: 0 0 @baseline;
line-height: @baseline;
padding: (@baseLineHeight - 1) / 2;
margin: 0 0 @baseLineHeight;
line-height: @baseLineHeight;
font-size: 12px;
border: 1px solid #ccc;
border: 1px solid rgba(0,0,0,.15);
lib/variables.less
+31 -18
View File
@@ -3,19 +3,27 @@
* ----------------------------------------------------- */
// Links
// LINK COLORS
// -----------
@linkColor: #0069d6;
@linkColorHover: darken(@linkColor, 15);
// Grays
// GRAYS
// -----
@black: #000;
@grayDark: #333;
@gray: #555;
@grayLight: #777;
@grayLighter: #ccc;
@grayDark: lighten(@black, 25%);
@gray: lighten(@black, 50%);
@grayLight: lighten(@black, 75%);
@grayLighter: lighten(@black, 90%);
@white: #fff;
// Accent Colors
// ACCENT COLORS
// -------------
@blue: #049CDB;
@blueDark: #0064CD;
@green: #46a546;
@@ -25,11 +33,10 @@
@pink: #c3325f;
@purple: #7a43b6;
// Baseline grid
@basefont: 13px;
@baseline: 18px;
// Griditude
// GRID
// ----
// Modify the grid styles in mixins.less
@gridColumns: 16;
@gridColumnWidth: 40px;
@@ -37,7 +44,10 @@
@extraSpace: (@gridGutterWidth * 2); // For our grid calculations
@siteWidth: (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1));
// Color Scheme
// COLOR SCHEME
// ------------
// Use this to roll your own color schemes if you like (unused by Bootstrap by default)
@baseColor: @blue; // Set a base color
@complement: spin(@baseColor, 180); // Determine a complementary color
@@ -51,10 +61,13 @@
@analog2: spin(@baseColor, -22);
// THEME VARIABLES
// ---------------
// More variables coming soon:
// - @basefont to @baseFontSize
// - @baseline to @baseLineHeight
// - @baseFontFamily
// - @primaryButtonColor
// - anything else? File an issue on GitHub
// Typography
@baseFontSize: 13px;
@baseFontFamily: "Helvetica Neue", Helvetica, Arial, sans-serif;
@baseLineHeight: 18px;
// Visuals
@primaryButtonColor: @blue;