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

update variables to inlude @baseFontSize, @baseFontFamily, @baseLineHeight for... 

update variables to inlude @baseFontSize, @baseFontFamily, @baseLineHeight for easier customization; added placeholder for @primaryButtonColor, but didn't implement
parent 0a6d8c30
Expand all Hide whitespace changes
Inline Side-by-side
Showing
with 164 additions and 148 deletions
+164 -148
bootstrap.css
+ 34
- 35
View file @ 96dd7a29
......@@ -6,7 +6,7 @@
* http://www.apache.org/licenses/LICENSE-2.0
*
* Designed and built with all the love in the world @twitter by @mdo and @fat.
* Date: Thu Sep 29 02:20:34 PDT 2011
* Date: Tue Oct 4 00:16:55 PDT 2011
*/
/* Reset.less
* Props to Eric Meyer (meyerweb.com) for his CSS reset file. We're using an adapted version here that cuts out some of the reset HTML elements we will never need here (i.e., dfn, samp, etc).
......@@ -187,9 +187,8 @@ body {
margin: 0;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 13px;
font-weight: normal;
line-height: 18px;
color: #333333;
color: #404040;
}
.container {
width: 940px;
......@@ -393,14 +392,14 @@ a:hover {
* Headings, body text, lists, code, and more for a versatile and durable typography system
* ---------------------------------------------------------------------------------------- */
p {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 13px;
font-weight: normal;
line-height: 18px;
margin-bottom: 9px;
}
p small {
font-size: 11px;
color: #777777;
color: #bfbfbf;
}
h1,
h2,
......@@ -409,7 +408,7 @@ h4,
h5,
h6 {
font-weight: bold;
color: #333333;
color: #404040;
}
h1 small,
h2 small,
......@@ -417,7 +416,7 @@ h3 small,
h4 small,
h5 small,
h6 small {
color: #777777;
color: #bfbfbf;
}
h1 {
margin-bottom: 18px;
......@@ -455,7 +454,7 @@ h5 {
h6 {
font-size: 13px;
line-height: 18px;
color: #777777;
color: #bfbfbf;
text-transform: uppercase;
}
ul, ol {
......@@ -475,7 +474,7 @@ ol {
}
li {
line-height: 18px;
color: #555555;
color: #808080;
}
ul.unstyled {
list-style: none;
......@@ -508,7 +507,7 @@ em {
line-height: inherit;
}
.muted {
color: #777777;
color: #bfbfbf;
}
blockquote {
margin-bottom: 18px;
......@@ -526,7 +525,7 @@ blockquote small {
font-size: 12px;
font-weight: 300;
line-height: 18px;
color: #777777;
color: #bfbfbf;
}
blockquote small:before {
content: '\2014 \00A0';
......@@ -538,7 +537,7 @@ address {
}
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;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
......@@ -577,7 +576,7 @@ legend {
margin-bottom: 27px;
font-size: 19.5px;
line-height: 36px;
color: #333333;
color: #404040;
border-bottom: 1px solid #eee;
}
label,
......@@ -592,7 +591,7 @@ textarea {
label {
display: block;
margin-bottom: 5px;
color: #333333;
color: #404040;
}
input[type=checkbox], input[type=radio] {
cursor: pointer;
......@@ -607,7 +606,7 @@ select,
padding: 4px;
font-size: 13px;
line-height: 18px;
color: #555555;
color: #808080;
border: 1px solid #ccc;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
......@@ -843,15 +842,15 @@ textarea[readonly] {
cursor: not-allowed;
}
:-moz-placeholder {
color: #777777;
color: #bfbfbf;
}
::-webkit-input-placeholder {
color: #777777;
color: #bfbfbf;
}
.help-text {
margin-top: 5px;
margin-bottom: 0;
color: #777777;
color: #bfbfbf;
}
.help-inline {
display: inline;
......@@ -868,7 +867,7 @@ textarea[readonly] {
max-width: 600px;
}
.inline-inputs {
color: #555555;
color: #808080;
}
.inline-inputs span, .inline-inputs input {
display: inline-block;
......@@ -901,7 +900,7 @@ textarea[readonly] {
margin-right: -1px;
font-weight: normal;
line-height: 18px;
color: #777777;
color: #bfbfbf;
text-align: center;
text-shadow: 0 1px 0 #ffffff;
-webkit-border-radius: 3px 0 0 3px;
......@@ -1115,7 +1114,7 @@ table .headerSortUp.purple, table .headerSortDown.purple {
overflow: visible;
}
.topbar a {
color: #777777;
color: #bfbfbf;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}
.topbar .brand a:hover, .topbar ul .active > a {
......@@ -1178,20 +1177,20 @@ table .headerSortUp.purple, table .headerSortDown.purple {
transition: none;
}
.topbar input:-moz-placeholder {
color: #cccccc;
color: #e6e6e6;
}
.topbar input::-webkit-input-placeholder {
color: #cccccc;
color: #e6e6e6;
}
.topbar input:hover {
background-color: #777777;
background-color: #bfbfbf;
background-color: rgba(255, 255, 255, 0.5);
color: #ffffff;
}
.topbar input:focus, .topbar input.focused {
outline: 0;
background-color: #ffffff;
color: #333333;
color: #404040;
text-shadow: 0 1px 0 #ffffff;
border: 0;
padding: 5px 10px;
......@@ -1363,7 +1362,7 @@ table .headerSortUp.purple, table .headerSortDown.purple {
clear: both;
font-weight: normal;
line-height: 18px;
color: #555555;
color: #808080;
text-shadow: 0 1px 0 #ffffff;
}
.topbar .dropdown-menu a:hover, .dropdown-menu a:hover {
......@@ -1377,7 +1376,7 @@ table .headerSortUp.purple, table .headerSortDown.purple {
background-image: linear-gradient(top, #eeeeee, #dddddd);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#eeeeee', endColorstr='#dddddd', GradientType=0);
color: #333333;
color: #404040;
text-decoration: none;
-webkit-box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.025), inset 0 -1px rgba(0, 0, 0, 0.025);
-moz-box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.025), inset 0 -1px rgba(0, 0, 0, 0.025);
......@@ -1439,7 +1438,7 @@ table .headerSortUp.purple, table .headerSortDown.purple {
border-color: #eee #eee #ddd;
}
.tabs > li.active > a {
color: #555555;
color: #808080;
background-color: #ffffff;
border: 1px solid #ddd;
border-bottom-color: transparent;
......@@ -1518,10 +1517,10 @@ table .headerSortUp.purple, table .headerSortDown.purple {
}
.breadcrumb .divider {
padding: 0 5px;
color: #777777;
color: #bfbfbf;
}
.breadcrumb .active a {
color: #333333;
color: #404040;
}
.hero-unit {
background-color: #f5f5f5;
......@@ -1806,7 +1805,7 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner {
position: relative;
padding: 7px 15px;
margin-bottom: 18px;
color: #333333;
color: #404040;
background-color: #eedc94;
background-image: -khtml-gradient(linear, left top, left bottom, from(#fceec1), to(#eedc94));
background-image: -moz-linear-gradient(top, #fceec1, #eedc94);
......@@ -1868,13 +1867,13 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner {
margin-bottom: 0;
}
.alert-message.block-message li {
color: #333333;
color: #404040;
}
.alert-message.block-message .alert-actions {
margin-top: 5px;
}
.alert-message.block-message.error, .alert-message.block-message.success, .alert-message.block-message.info {
color: #333333;
color: #404040;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
}
.alert-message.block-message.error {
......@@ -1925,7 +1924,7 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner {
}
.pagination .disabled a, .pagination .disabled a:hover {
background-color: transparent;
color: #777777;
color: #bfbfbf;
}
.pagination .next a {
border: 0;
......@@ -2195,7 +2194,7 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner {
}
.label {
padding: 1px 3px 2px;
background-color: #777777;
background-color: #bfbfbf;
font-size: 9.75px;
font-weight: bold;
color: #ffffff;
......
bootstrap.min.css
+ 30
- 30
View file @ 96dd7a29
This diff is collapsed.
lib/forms.less
+ 15
- 15
View file @ 96dd7a29
......@@ -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 @ 96dd7a29
......@@ -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 @ 96dd7a29
......@@ -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 @ 96dd7a29
......@@ -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 @ 96dd7a29
......@@ -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 @ 96dd7a29
......@@ -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 @ 96dd7a29
......@@ -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
// ---------------
// Typography
@baseFontSize: 13px;
@baseFontFamily: "Helvetica Neue", Helvetica, Arial, sans-serif;
@baseLineHeight: 18px;
// More variables coming soon:
// - @basefont to @baseFontSize
// - @baseline to @baseLineHeight
// - @baseFontFamily
// - @primaryButtonColor
// - anything else? File an issue on GitHub
\ No newline at end of file
// Visuals
@primaryButtonColor: @blue;
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