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

Overhaul form control and button sizing, and some type styles

Browse Source 
* New padding approach with separate horizontal and vertical padding
variables
* Improved sizing in large and small buttons and form controls
* Dropped the `.btn-mini` (since we have no `.input-mini` to match, and
holy fuck those were small buttons)
* Dropped the `.pagination-mini` as well because once again, to hell
with such small components
* Changed `@line-height-headings` to `@headings-line-height`
* Removed the `@headings-font-family` because it was honestly kind of
useless
This commit is contained in:
Mark Otto
2013-05-14 23:21:30 -07:00
parent a41d566d5e
commit 28a081cb20
9 changed files with 88 additions and 153 deletions
Download Patch File Download Diff File Expand all files Collapse all files
less/buttons.less
+4 -8
View File
@@ -9,7 +9,7 @@
// Core styles
.btn {
display: inline-block;
padding: 6px 12px;
padding: @padding-base-vertical @padding-base-horizontal;
margin-bottom: 0; // For input.btn
font-size: @font-size-base;
font-weight: 500;
@@ -123,18 +123,14 @@ fieldset[disabled] .btn-link {
// --------------------------------------------------
.btn-large {
padding: @padding-large;
padding: @padding-large-vertical @padding-large-horizontal;
font-size: @font-size-large;
border-radius: @border-radius-large;
}
.btn-small {
padding: @padding-small;
padding: @padding-small-vertical @padding-small-horizontal;
font-size: @font-size-small;
border-radius: @border-radius-small;
}
.btn-mini {
padding: @padding-mini;
font-size: @font-size-mini;
line-height: 1.5; // ensure proper height of button next to small input
border-radius: @border-radius-small;
}
less/forms.less
+8 -7
View File
@@ -22,7 +22,7 @@ legend {
padding: 0;
margin-bottom: @line-height-computed;
font-size: (@font-size-base * 1.5);
line-height: @line-height-headings;
line-height: inherit;
color: @gray-dark;
border: 0;
border-bottom: 1px solid #e5e5e5;
@@ -56,7 +56,7 @@ input[type="tel"],
input[type="color"] {
display: block;
min-height: @input-height-base; // Make inputs at least the height of their button counterpart (base line-height + padding + border)
padding: 6px 9px;
padding: @padding-base-vertical @padding-base-horizontal;
font-size: @font-size-base;
line-height: @line-height-base;
color: @gray;
@@ -241,13 +241,13 @@ input[type="search"],
input[type="tel"],
input[type="color"] {
&.input-large {
padding: @padding-large;
padding: @padding-large-vertical @padding-large-horizontal;
font-size: @font-size-large;
border-radius: @border-radius-large;
}
&.input-small {
min-height: @input-height-small;
padding: @padding-small;
padding: @padding-small-vertical @padding-small-horizontal;
font-size: @font-size-small;
border-radius: @border-radius-small;
}
@@ -397,11 +397,12 @@ select:focus:invalid {
border-radius: @border-radius-base;
&.input-small {
padding: @padding-small;
padding: @padding-small-vertical @padding-small-horizontal;
font-size: @font-size-small;
border-radius: @border-radius-small; }
border-radius: @border-radius-small;
}
&.input-large {
padding: @padding-large;
padding: @padding-large-vertical @padding-large-horizontal;
font-size: @font-size-large;
border-radius: @border-radius-large;
}
less/pagination.less
+7 -20
View File
@@ -56,7 +56,7 @@
.pagination-large {
> li > a,
> li > span {
padding: @padding-large;
padding: @padding-large-vertical @padding-large-horizontal;
font-size: @font-size-large;
}
> li:first-child > a,
@@ -69,9 +69,13 @@
}
}
// Small and mini
.pagination-mini,
// Small
.pagination-small {
> li > a,
> li > span {
padding: @padding-small-vertical @padding-small-horizontal;
font-size: @font-size-small;
}
> li:first-child > a,
> li:first-child > span {
.border-left-radius(@border-radius-small);
@@ -81,20 +85,3 @@
.border-right-radius(@border-radius-small);
}
}
// Small
.pagination-small {
> li > a,
> li > span {
padding: @padding-small;
font-size: @font-size-small;
}
}
// Mini
.pagination-mini {
> li > a,
> li > span {
padding: @padding-mini;
font-size: @font-size-mini;
}
}
less/type.less
+1 -2
View File
@@ -54,9 +54,8 @@ a.text-success:focus { color: darken(@state-success-text, 10%); }
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
font-family: @headings-font-family;
font-weight: @headings-font-weight;
line-height: @line-height-headings;
line-height: @headings-line-height;
small {
font-weight: normal;
line-height: 1;
less/variables.less
+19 -15
View File
@@ -50,25 +50,29 @@
@font-size-small: ceil(@font-size-base * 0.85); // ~12px
@font-size-mini: ceil(@font-size-base * 0.75); // ~11px
@line-height-base: 1.428; // 20/14
@line-height-computed: ceil(@font-size-base * @line-height-base); // ~20px
@line-height-headings: 1.1;
@line-height-base: 1.428571429; // 20/14
@line-height-computed: floor(@font-size-base * @line-height-base); // ~20px
@headings-font-family: inherit; // empty to use BS default, @font-family-base
@headings-font-weight: 500;
@headings-line-height: 1.1;
// Components
// -------------------------
// Based on 14px font-size and 1.5 line-height
// Based on 14px font-size and 1.428 line-height (~20px to start)
@padding-large: 11px 14px; // 44px
@padding-small: 2px 10px; // 26px
@padding-mini: 0 6px; // 22px
@padding-base-vertical: 8px;
@padding-base-horizontal: 12px;
@border-radius-base: 4px;
@border-radius-large: 6px;
@border-radius-small: 3px;
@padding-large-vertical: 14px;
@padding-large-horizontal: 16px;
@padding-small-vertical: 5px;
@padding-small-horizontal: 10px;
@border-radius-base: 4px;
@border-radius-large: 6px;
@border-radius-small: 3px;
@component-active-bg: @brand-primary;
@@ -123,11 +127,11 @@
@input-color-placeholder: @gray-light;
@input-height-base: (@line-height-computed + 14px); // base line-height + 12px vertical padding + 2px top/bottom border
@input-height-large: (@line-height-computed + 24px); // base line-height + 22px vertical padding + 2px top/bottom border
@input-height-small: (@line-height-computed + 6px); // base line-height + 4px vertical padding + 2px top/bottom border
@input-height-base: (@line-height-computed + (@padding-base-vertical * 2));
@input-height-large: (@line-height-computed + (@padding-large-vertical * 2));
@input-height-small: (@line-height-computed + (@padding-small-vertical * 2));
@form-actions-bg: #f5f5f5;
@form-actions-bg: #f5f5f5;
// Dropdowns