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

Merge branch '3.0.0-wip' into bs3-flatten

This commit is contained in:
Mark Otto
2013-01-12 14:16:49 -08:00
20 changed files with 461 additions and 1383 deletions
-6
View File
@@ -44,12 +44,6 @@ a.badge {
// Success (green)
&-success { background-color: @state-success-text; }
&-success[href] { background-color: darken(@state-success-text, 10%); }
// Info (turquoise)
&-info { background-color: @state-info-text; }
&-info[href] { background-color: darken(@state-info-text, 10%); }
// Inverse (black)
&-inverse { background-color: @grayDark; }
&-inverse[href] { background-color: darken(@grayDark, 10%); }
}
// Quick fix for labels/badges in buttons
+39 -27
View File
@@ -292,10 +292,6 @@ textarea[class*="span"],
margin-right: 0;
}
.controls-row {
#grid > .input(@grid-column-width, @grid-gutter-width, @grid-row-width);
}
// Ensure input-prepend/append never wraps
.input-append input[class*="span"],
.input-append .uneditable-input[class*="span"],
@@ -310,21 +306,6 @@ textarea[class*="span"],
.uneditable-input[class*="span"] {
height: @input-height;
}
// Control row for multiple inputs per line
.controls-row {
.clearfix(); // Clear the float from controls
}
// Float to collapse white-space for proper grid alignment
.controls-row [class*="span"] {
float: left;
}
// Explicity set top padding on all checkboxes/radios, not just first-child
.controls-row .checkbox[class*="span"],
.controls-row .radio[class*="span"] {
padding-top: 5px;
}
@@ -362,21 +343,17 @@ input[type="checkbox"] {
// --------------------------
// Warning
.control-group.warning {
.has-warning {
.formFieldState(@state-warning-text, @state-warning-text, @state-warning-background);
}
// Error
.control-group.error {
.has-error {
.formFieldState(@state-error-text, @state-error-text, @state-error-background);
}
// Success
.control-group.success {
.has-success {
.formFieldState(@state-success-text, @state-success-text, @state-success-background);
}
// Success
.control-group.info {
.formFieldState(@state-info-text, @state-info-text, @state-info-background);
}
// HTML5 invalid states
// Shares styles with the .control-group.error above
@@ -429,7 +406,6 @@ select:focus:invalid {
// Input groups
// --------------------------------------------------
@@ -538,3 +514,39 @@ select:focus:invalid {
border-radius: 0 @border-radius-base @border-radius-base 0;
}
}
// Horizontal forms
// --------------------------------------------------
.form-horizontal {
// Increase spacing between groups
.control-group {
position: relative;
margin-bottom: @line-height-base;
.clearfix();
input,
select,
textarea,
.uneditable-input {
margin-bottom: 0;
}
}
// Float the labels left
.control-group > .control-label {
float: left;
width: @component-offset-horizontal - 20;
padding-top: 6px;
text-align: right;
}
// Move over all input controls and content over
.control-group > .controls {
margin-left: @component-offset-horizontal;
}
}
+5 -5
View File
@@ -21,11 +21,11 @@
// Import the fonts
@font-face {
font-family: 'Glyphicons Halflings';
src: url('../fonts/glyphiconshalflings-regular.eot');
src: url('../fonts/glyphiconshalflings-regular.eot?#iefix') format('embedded-opentype'),
url('../fonts/glyphiconshalflings-regular.woff') format('woff'),
url('../fonts/glyphiconshalflings-regular.ttf') format('truetype'),
url('../fonts/glyphiconshalflings-regular.svg#glyphicons_halflingsregular') format('svg');
src: url('@{glyphicons-font-path}/glyphiconshalflings-regular.eot');
src: url('@{glyphicons-font-path}/glyphiconshalflings-regular.eot?#iefix') format('embedded-opentype'),
url('@{glyphicons-font-path}/glyphiconshalflings-regular.woff') format('woff'),
url('@{glyphicons-font-path}/glyphiconshalflings-regular.ttf') format('truetype'),
url('@{glyphicons-font-path}/glyphiconshalflings-regular.svg#glyphicons_halflingsregular') format('svg');
font-style: normal;
font-weight: normal;
}
+5 -31
View File
@@ -122,33 +122,14 @@
// FORMS
// --------------------------------------------------
// Block level inputs
.input-block-level() {
display: block;
width: 100%;
}
// Mixin for form field states
.formFieldState(@text-color: #555, @border-color: #ccc, @background-color: #f5f5f5) {
// Set the text color
.control-label,
.help-block,
.help-inline {
// Color the label text
.control-label {
color: @text-color;
}
// Style inputs accordingly
.checkbox,
.radio,
input,
select,
textarea {
color: @text-color;
}
input,
select,
textarea {
// Set the border and box shadow on specific inputs to match
.input-with-feedback {
padding-right: 32px; // to account for the feedback icon
border-color: @border-color;
.box-shadow(inset 0 1px 1px rgba(0,0,0,.075)); // Redeclare so transitions work
&:focus {
@@ -157,13 +138,6 @@
.box-shadow(@shadow);
}
}
// Give a small background color for input-prepend/-append
.input-prepend .add-on,
.input-append .add-on {
color: @text-color;
background-color: @background-color;
border-color: @text-color;
}
}
-3
View File
@@ -243,9 +243,6 @@
.tabbable {
.clearfix();
}
.tab-content {
overflow: auto; // prevent content from running below tabs
}
// Show/hide tabbable areas
.tab-content > .tab-pane,
+30 -51
View File
@@ -1,27 +1,17 @@
//
// Pagination (multiple pages)
// --------------------------------------------------
// Space out pagination from surrounding content
.pagination {
margin: @line-height-base 0;
}
.pagination ul {
// Allow for text-based alignment
display: inline-block;
// Reset default ul styles
margin-left: 0;
margin-bottom: 0;
// Visuals
margin: @line-height-base 0;
border-radius: @border-radius-base;
.box-shadow(0 1px 2px rgba(0,0,0,.05));
}
.pagination ul > li {
.pagination > li {
display: inline; // Remove list-style and block-level defaults
}
.pagination ul > li > a,
.pagination ul > li > span {
.pagination > li > a,
.pagination > li > span {
float: left; // Collapse white-space
padding: 4px 12px;
line-height: @line-height-base;
@@ -30,61 +20,50 @@
border: 1px solid @pagination-border;
border-left-width: 0;
}
.pagination ul > li > a:hover,
.pagination ul > .active > a,
.pagination ul > .active > span {
.pagination > li > a:hover,
.pagination > .active > a,
.pagination > .active > span {
background-color: @pagination-background-active;
}
.pagination ul > .active > a,
.pagination ul > .active > span {
.pagination > .active > a,
.pagination > .active > span {
color: @grayLight;
cursor: default;
}
.pagination ul > .disabled > span,
.pagination ul > .disabled > a,
.pagination ul > .disabled > a:hover {
.pagination > .disabled > span,
.pagination > .disabled > a,
.pagination > .disabled > a:hover {
color: @grayLight;
background-color: transparent;
cursor: default;
}
.pagination ul > li:first-child > a,
.pagination ul > li:first-child > span {
.pagination > li:first-child > a,
.pagination > li:first-child > span {
border-left-width: 1px;
.border-left-radius(@border-radius-base);
}
.pagination ul > li:last-child > a,
.pagination ul > li:last-child > span {
.pagination > li:last-child > a,
.pagination > li:last-child > span {
.border-right-radius(@border-radius-base);
}
// Alignment
// --------------------------------------------------
.pagination-centered {
text-align: center;
}
.pagination-right {
text-align: right;
}
// Sizing
// --------------------------------------------------
// Large
.pagination-large {
ul > li > a,
ul > li > span {
> li > a,
> li > span {
padding: @padding-large;
font-size: @font-size-large;
}
ul > li:first-child > a,
ul > li:first-child > span {
> li:first-child > a,
> li:first-child > span {
.border-left-radius(@border-radius-large);
}
ul > li:last-child > a,
ul > li:last-child > span {
> li:last-child > a,
> li:last-child > span {
.border-right-radius(@border-radius-large);
}
}
@@ -92,28 +71,28 @@
// Small and mini
.pagination-mini,
.pagination-small {
ul > li:first-child > a,
ul > li:first-child > span {
> li:first-child > a,
> li:first-child > span {
.border-left-radius(@border-radius-small);
}
ul > li:last-child > a,
ul > li:last-child > span {
> li:last-child > a,
> li:last-child > span {
.border-right-radius(@border-radius-small);
}
}
// Small
.pagination-small {
ul > li > a,
ul > li > span {
> li > a,
> li > span {
padding: @padding-small;
font-size: @font-size-small;
}
}
// Mini
.pagination-mini {
ul > li > a,
ul > li > span {
> li > a,
> li > span {
padding: @padding-mini;
font-size: @font-size-mini;
}
+1 -4
View File
@@ -57,7 +57,7 @@
select[class*="span"],
textarea[class*="span"],
.uneditable-input {
.input-block-level();
width: 100%;
}
// But don't let it screw up prepend/append inputs
.input-prepend input,
@@ -67,9 +67,6 @@
display: inline-block; // redeclare so they don't wrap to new lines
width: auto;
}
.controls-row [class*="span"] + [class*="span"] {
margin-left: 0;
}
// Modals
.modal {
+4 -3
View File
@@ -37,12 +37,13 @@ a.text-warning:hover { color: darken(@state-warning-text, 10%); }
.text-error { color: @state-error-text; }
a.text-error:hover { color: darken(@state-error-text, 10%); }
.text-info { color: @state-info-text; }
a.text-info:hover { color: darken(@state-info-text, 10%); }
.text-success { color: @state-success-text; }
a.text-success:hover { color: darken(@state-success-text, 10%); }
.text-left { text-align: left; }
.text-right { text-align: right; }
.text-center { text-align: center; }
// Headings
// -------------------------
-8
View File
@@ -40,11 +40,3 @@
.affix {
position: fixed;
}
// Forms
// -------------------------
.control-block-level {
.input-block-level();
}
+39 -35
View File
@@ -78,17 +78,17 @@
@btn-background: #fff;
@btn-background-highlight: #eaeaea;
@btn-background-primary: @link-color;
@btn-background-primary-highlight: darken(@link-color, 10%);
@btn-background-primary: @link-color;
@btn-background-primary-highlight: darken(@link-color, 10%);
@btn-background-success: #62c462;
@btn-background-success-highlight: #51a351;
@btn-background-success: #62c462;
@btn-background-success-highlight: #51a351;
@btn-background-warning: lighten(#f89406, 15%);
@btn-background-warning-highlight: #f89406;
@btn-background-warning: lighten(#f89406, 15%);
@btn-background-warning-highlight: #f89406;
@btn-background-danger: #ee5f5b;
@btn-background-danger-highlight: #bd362f;
@btn-background-danger: #ee5f5b;
@btn-background-danger-highlight: #bd362f;
// Forms
@@ -113,12 +113,12 @@
@dropdown-background: #fff;
@dropdown-border: rgba(0,0,0,.2);
@dropdown-divider-top: #e5e5e5;
@dropdown-divider-bottom: #fff;
@dropdown-divider-top: #e5e5e5;
@dropdown-divider-bottom: #fff;
@dropdown-link-color: @grayDark;
@dropdown-link-color-hover: #fff;
@dropdown-link-color-active: #fff;
@dropdown-link-color: @grayDark;
@dropdown-link-color-hover: #fff;
@dropdown-link-color-active: #fff;
@dropdown-link-background-active: @link-color;
@dropdown-link-background-hover: @dropdown-link-background-active;
@@ -142,6 +142,11 @@
@zindex-modal: 1050;
// Glyphicons font path
// -------------------------
@glyphicons-font-path: "../fonts";
// Navbar
// -------------------------
@@ -186,8 +191,7 @@
// -------------------------
@pagination-background: #fff;
@pagination-background-active: #f5f5f5;
@pagination-background-active: #f5f5f5;
@pagination-border: #ddd;
@@ -221,32 +225,32 @@
// Tooltips and popovers
// -------------------------
@tooltip-color: #fff;
@tooltip-background: rgba(0,0,0,.9);
@tooltip-arrow-width: 5px;
@tooltip-arrow-color: @tooltip-background;
@tooltip-color: #fff;
@tooltip-background: rgba(0,0,0,.9);
@tooltip-arrow-width: 5px;
@tooltip-arrow-color: @tooltip-background;
@popover-background: #fff;
@popover-arrow-width: 10px;
@popover-arrow-color: #fff;
@popover-title-background: darken(@popover-background, 3%);
@popover-background: #fff;
@popover-arrow-width: 10px;
@popover-arrow-color: #fff;
@popover-title-background: darken(@popover-background, 3%);
// Special enhancement for popovers
@popover-arrow-outer-width: @popover-arrow-width + 1;
@popover-arrow-outer-color: rgba(0,0,0,.25);
@popover-arrow-outer-width: @popover-arrow-width + 1;
@popover-arrow-outer-color: rgba(0,0,0,.25);
// Miscellaneous
// -------------------------
// Hr border color
@hr-border: @grayLighter;
@hr-border: @grayLighter;
// Horizontal forms & lists
@component-offset-horizontal: 180px;
@component-offset-horizontal: 180px;
// Wells
@well-background: #f5f5f5;
@well-background: #f5f5f5;
@@ -254,17 +258,17 @@
// --------------------------------------------------
// Default 940px grid
@grid-columns: 12;
@grid-columns: 12;
@grid-column-width: 60px;
@grid-gutter-width: 20px;
@grid-row-width: (@grid-columns * @grid-column-width) + (@grid-gutter-width * (@grid-columns - 1));
// 1200px min
@grid-column-width-1200: 70px;
@grid-gutter-width-1200: 30px;
@grid-row-width-1200: (@grid-columns * @grid-column-width-1200) + (@grid-gutter-width-1200 * (@grid-columns - 1));
@grid-column-width-1200: 70px;
@grid-gutter-width-1200: 30px;
@grid-row-width-1200: (@grid-columns * @grid-column-width-1200) + (@grid-gutter-width-1200 * (@grid-columns - 1));
// 768px-979px
@grid-column-width-768: 42px;
@grid-gutter-width-768: 20px;
@grid-row-width-768: (@grid-columns * @grid-column-width-768) + (@grid-gutter-width-768 * (@grid-columns - 1));
@grid-column-width-768: 42px;
@grid-gutter-width-768: 20px;
@grid-row-width-768: (@grid-columns * @grid-column-width-768) + (@grid-gutter-width-768 * (@grid-columns - 1));