2
0
mirror of https://github.com/tenrok/bootstrap.git synced 2026-06-17 19:21:23 +03:00

Merge branch '3.0.0-wip' into bs3_remove_icons

Conflicts:
	docs/components.html
This commit is contained in:
Mark Otto
2013-06-27 18:49:05 -07:00
28 changed files with 338 additions and 287 deletions
+1
View File
@@ -131,6 +131,7 @@
z-index: 15;
width: 100px;
margin: 0 0 0 -50px;
padding-left: 0;
list-style: none;
text-align: center;
-3
View File
@@ -31,8 +31,6 @@ pre {
line-height: @line-height-base;
word-break: break-all;
word-wrap: break-word;
white-space: pre;
white-space: pre-wrap;
background-color: #f5f5f5;
border: 1px solid #ccc; // IE8 fallback
border: 1px solid rgba(0,0,0,.15);
@@ -47,7 +45,6 @@ pre {
code {
padding: 0;
color: inherit;
white-space: pre;
white-space: pre-wrap;
background-color: transparent;
border: 0;
+15 -45
View File
@@ -72,6 +72,17 @@ input[type="color"] {
outline: 0;
.box-shadow(~"inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6)");
}
// Disabled and read-only inputs
// Note: HTML5 says that inputs under a fieldset > legend:first-child won't be
// disabled if the fieldset is disabled. Due to implementation difficulty,
// we don't honor that edge case; we style them as disabled anyway.
&[disabled],
&[readonly],
fieldset[disabled] & {
cursor: not-allowed;
background-color: @input-bg-disabled;
}
}
// Reset appearance properties for textual inputs and textarea
@@ -184,7 +195,7 @@ textarea {
// Move the options list down to align with labels
.controls > .radio:first-child,
.controls > .checkbox:first-child {
padding-top: 5px; // has to be padding because margin collaspes
padding-top: 5px; // has to be padding because margin collapses
}
*/
@@ -227,6 +238,7 @@ input[type="search"],
input[type="tel"],
input[type="color"] {
&.input-large {
min-height: @input-height-large;
padding: @padding-large-vertical @padding-large-horizontal;
font-size: @font-size-large;
border-radius: @border-radius-large;
@@ -240,35 +252,6 @@ input[type="color"] {
}
// DISABLED STATE
// --------------
// Disabled and read-only inputs
// Note: HTML5 says that inputs under a fieldset > legend:first-child won't be
// disabled if the fieldset is disabled. Due to implementation difficulty,
// we don't honor that edge case; we style them as disabled anyway.
input,
select,
textarea {
&[disabled],
&[readonly],
fieldset[disabled] & {
cursor: not-allowed;
background-color: @input-bg-disabled;
}
}
// Explicitly reset the colors here
input[type="radio"],
input[type="checkbox"] {
&[disabled],
&[readonly],
fieldset[disabled] & {
background-color: transparent;
}
}
// FORM FIELD FEEDBACK STATES
// --------------------------
@@ -286,20 +269,6 @@ input[type="checkbox"] {
.form-field-validation(@state-success-text, @state-success-text, @state-success-bg);
}
// HTML5 invalid states
// Shares styles with the .control-group.error above
input:focus:invalid,
textarea:focus:invalid,
select:focus:invalid {
color: #b94a48;
border-color: #ee5f5b;
&:focus {
border-color: darken(#ee5f5b, 10%);
@shadow: 0 0 6px lighten(#ee5f5b, 20%);
.box-shadow(@shadow);
}
}
@@ -352,6 +321,7 @@ select:focus:invalid {
.input-group-addon,
.input-group-btn {
width: 1%;
white-space: nowrap;
vertical-align: middle; // Match the inputs
}
@@ -455,7 +425,7 @@ select:focus:invalid {
}
}
// Only right aline form labels here when the columns stop stacking
// Only right align form labels here when the columns stop stacking
@media (min-width: 768px) {
.form-horizontal .control-label {
text-align: right;
+55 -17
View File
@@ -2,7 +2,6 @@
// Grid system
// --------------------------------------------------
// Set the container width, and override it for fixed navbars in media queries
.container {
.container-fixed();
@@ -51,9 +50,6 @@
.col-lg-11,
.col-lg-12 {
position: relative;
// Float and set width: 100%; for easy stacking on mobile devices
float: left;
width: 100%;
// Prevent columns from collapsing when empty
min-height: 1px;
// Inner gutter via padding
@@ -68,6 +64,20 @@
//
// Tiny device columns (smartphones)
.col-1,
.col-2,
.col-3,
.col-4,
.col-5,
.col-6,
.col-7,
.col-8,
.col-9,
.col-10,
.col-11,
.col-12 {
float: left;
}
.col-1 { width: percentage((1 / @grid-columns)); }
.col-2 { width: percentage((2 / @grid-columns)); }
.col-3 { width: percentage((3 / @grid-columns)); }
@@ -87,6 +97,20 @@
max-width: @container-tablet;
}
.col-sm-1,
.col-sm-2,
.col-sm-3,
.col-sm-4,
.col-sm-5,
.col-sm-6,
.col-sm-7,
.col-sm-8,
.col-sm-9,
.col-sm-10,
.col-sm-11,
.col-sm-12 {
float: left;
}
.col-sm-1 { width: percentage((1 / @grid-columns)); }
.col-sm-2 { width: percentage((2 / @grid-columns)); }
.col-sm-3 { width: percentage((3 / @grid-columns)); }
@@ -100,19 +124,6 @@
.col-sm-11 { width: percentage((11/ @grid-columns)); }
.col-sm-12 { width: 100%; }
// Offsets
.col-offset-1 { margin-left: percentage((1 / @grid-columns)); }
.col-offset-2 { margin-left: percentage((2 / @grid-columns)); }
.col-offset-3 { margin-left: percentage((3 / @grid-columns)); }
.col-offset-4 { margin-left: percentage((4 / @grid-columns)); }
.col-offset-5 { margin-left: percentage((5 / @grid-columns)); }
.col-offset-6 { margin-left: percentage((6 / @grid-columns)); }
.col-offset-7 { margin-left: percentage((7 / @grid-columns)); }
.col-offset-8 { margin-left: percentage((8 / @grid-columns)); }
.col-offset-9 { margin-left: percentage((9 / @grid-columns)); }
.col-offset-10 { margin-left: percentage((10/ @grid-columns)); }
.col-offset-11 { margin-left: percentage((11/ @grid-columns)); }
// Push and pull columns for source order changes
.col-push-1 { left: percentage((1 / @grid-columns)); }
.col-push-2 { left: percentage((2 / @grid-columns)); }
@@ -144,6 +155,20 @@
.container {
max-width: @container-desktop;
}
.col-lg-1,
.col-lg-2,
.col-lg-3,
.col-lg-4,
.col-lg-5,
.col-lg-6,
.col-lg-7,
.col-lg-8,
.col-lg-9,
.col-lg-10,
.col-lg-11,
.col-lg-12 {
float: left;
}
.col-lg-1 { width: percentage((1 / @grid-columns)); }
.col-lg-2 { width: percentage((2 / @grid-columns)); }
.col-lg-3 { width: percentage((3 / @grid-columns)); }
@@ -156,6 +181,19 @@
.col-lg-10 { width: percentage((10/ @grid-columns)); }
.col-lg-11 { width: percentage((11/ @grid-columns)); }
.col-lg-12 { width: 100%; }
// Offsets
.col-offset-1 { margin-left: percentage((1 / @grid-columns)); }
.col-offset-2 { margin-left: percentage((2 / @grid-columns)); }
.col-offset-3 { margin-left: percentage((3 / @grid-columns)); }
.col-offset-4 { margin-left: percentage((4 / @grid-columns)); }
.col-offset-5 { margin-left: percentage((5 / @grid-columns)); }
.col-offset-6 { margin-left: percentage((6 / @grid-columns)); }
.col-offset-7 { margin-left: percentage((7 / @grid-columns)); }
.col-offset-8 { margin-left: percentage((8 / @grid-columns)); }
.col-offset-9 { margin-left: percentage((9 / @grid-columns)); }
.col-offset-10 { margin-left: percentage((10/ @grid-columns)); }
.col-offset-11 { margin-left: percentage((11/ @grid-columns)); }
}
// Large desktops and up
+2 -1
View File
@@ -7,7 +7,8 @@
// Easily usable on <ul>, <ol>, or <div>.
.list-group {
// No need to set list-style: none; since .list-group-item is block level
margin: 0 0 20px; // reset all margins because ul and ol
margin-bottom: 20px;
padding-left: 0; // reset padding because ul and ol
background-color: @list-group-bg;
}
+11 -1
View File
@@ -400,6 +400,16 @@
margin-bottom: ((@navbar-height - @element-height) / 2);
}
// Responsive utilities
// -------------------------
// More easily include all the states for responsive-utilities.less.
.responsive-visibility() {
display: block !important;
tr& { display: table-row !important; }
th&,
td& { display: table-cell !important; }
}
// Grid System
@@ -491,5 +501,5 @@
color: @text-color;
border-color: @border-color;
background-color: @background-color;
}
}
}
+11 -4
View File
@@ -6,8 +6,8 @@
.navbar {
position: relative;
margin-bottom: 20px;
padding-left: 15px;
padding-right: 15px;
padding-left: @navbar-padding;
padding-right: @navbar-padding;
background-color: @navbar-bg;
border-radius: @border-radius-base;
@@ -48,6 +48,12 @@
color: @navbar-link-disabled-color;
background-color: @navbar-link-disabled-bg;
}
// Right aligned contents
// Make them full width first so that they align properly on mobile
&.pull-right {
width: 100%;
}
}
@@ -90,7 +96,7 @@
max-width: 200px;
margin-left: auto;
margin-right: auto;
padding: 15px;
padding: @navbar-padding;
font-size: @font-size-large;
font-weight: 500;
line-height: @line-height-computed;
@@ -278,7 +284,7 @@
.navbar-brand {
float: left;
margin-left: -5px;
margin-left: -(@navbar-padding);
margin-right: 5px;
}
.navbar-nav {
@@ -296,6 +302,7 @@
&.pull-right {
float: right;
width: auto;
}
}
+1 -1
View File
@@ -59,7 +59,7 @@
}
}
// Redeclare pull classes because of specifity
// Redeclare pull classes because of specificity
// Todo: consider making these utilities !important to avoid this bullshit
> .pull-right {
float: right;
-4
View File
@@ -40,10 +40,6 @@
background-color: @popover-title-bg;
border-bottom: 1px solid darken(@popover-title-bg, 5%);
border-radius: 5px 5px 0 0;
&:empty {
display: none;
}
}
.popover-content {
+12 -42
View File
@@ -29,34 +29,25 @@
// Hide from screenreaders and browsers
// Credit: HTML5 Boilerplate
.hidden {
display: none;
visibility: hidden;
display: none !important;
visibility: hidden !important;
}
// Visibility utilities
// For Phones
.visible-sm {
display: block !important;
tr& { display: table-row !important; }
th&,
td& { display: table-cell !important; }
.responsive-visibility();
}
.visible-md { display: none !important; }
.visible-lg { display: none !important; }
.hidden-sm { display: none !important; }
.hidden-md {
display: block !important;
tr& { display: table-row !important; }
th&,
td& { display: table-cell !important; }
.responsive-visibility();
}
.hidden-lg {
display: block !important;
tr& { display: table-row !important; }
th&,
td& { display: table-cell !important; }
.responsive-visibility();
}
@@ -64,25 +55,16 @@
@media (min-width: @screen-tablet) and (max-width: @screen-tablet-max) {
.visible-sm { display: none !important; }
.visible-md {
display: block !important;
tr& { display: table-row !important; }
th&,
td& { display: table-cell !important; }
.responsive-visibility();
}
.visible-lg { display: none !important; }
.hidden-sm {
display: block !important;
tr& { display: table-row !important; }
th&,
td& { display: table-cell !important; }
.responsive-visibility();
}
.hidden-md { display: none !important; }
.hidden-lg {
display: block !important;
tr& { display: table-row !important; }
th&,
td& { display: table-cell !important; }
.responsive-visibility();
}
}
@@ -91,23 +73,14 @@
.visible-sm { display: none !important; }
.visible-md { display: none !important; }
.visible-lg {
display: block !important;
tr& { display: table-row !important; }
th&,
td& { display: table-cell !important; }
.responsive-visibility();
}
.hidden-sm {
display: block !important;
tr& { display: table-row !important; }
th&,
td& { display: table-cell !important; }
.responsive-visibility();
}
.hidden-md {
display: block !important;
tr& { display: table-row !important; }
th&,
td& { display: table-cell !important; }
.responsive-visibility();
}
.hidden-lg { display: none !important; }
}
@@ -118,10 +91,7 @@
@media print {
.visible-print {
display: block !important;
tr& { display: table-row !important; }
th&,
td& { display: table-cell !important; }
.responsive-visibility();
}
.hidden-print { display: none !important; }
}
+2 -2
View File
@@ -27,7 +27,7 @@ body {
background-color: @body-bg;
}
// Reset fonts for revelant elements
// Reset fonts for relevant elements
input,
button,
select,
@@ -60,7 +60,7 @@ a:focus {
img {
// Responsive images (ensure images don't scale beyond their parents)
max-width: 100%; // Part 1: Set a maxium relative to the parent
max-width: 100%; // Part 1: Set a maximum relative to the parent
height: auto; // Part 2: Scale the height according to the width, otherwise you get stretching
// Match vertical alignment with other comment elements
+5 -3
View File
@@ -184,16 +184,18 @@ th {
// -----------------
// Reset default table behavior
table col[class*="col-span-"] {
table col[class^="col-"] {
float: none;
display: table-column;
}
table td[class*="col-span-"],
table th[class*="col-span-"] {
table td[class^="col-"],
table th[class^="col-"] {
float: none;
display: table-cell;
}
// TABLE BACKGROUNDS
// -----------------
// Exact selectors below required to override .table-striped
+1 -2
View File
@@ -23,8 +23,6 @@ p {
// Ex: 14px base font * 85% = about 12px
small { font-size: 85%; }
strong { font-weight: bold; }
em { font-style: italic; }
cite { font-style: normal; }
// Utility classes
@@ -54,6 +52,7 @@ 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: @headings-line-height;
small {
+4 -2
View File
@@ -53,6 +53,7 @@
@line-height-base: 1.428571429; // 20/14
@line-height-computed: floor(@font-size-base * @line-height-base); // ~20px
@headings-font-family: @font-family-base;
@headings-font-weight: 500;
@headings-line-height: 1.1;
@@ -128,8 +129,8 @@
@input-color-placeholder: @gray-light;
@input-height-base: (@line-height-computed + (@padding-base-vertical * 2) + 2);
@input-height-large: (@line-height-computed + (@padding-large-vertical * 2) + 2);
@input-height-small: (@line-height-computed + (@padding-small-vertical * 2) + 2);
@input-height-large: (ceil(@font-size-large * @line-height-base) + (@padding-large-vertical * 2) + 2);
@input-height-small: (ceil(@font-size-small * @line-height-base) + (@padding-small-vertical * 2) + 2);
// Dropdowns
@@ -172,6 +173,7 @@
@navbar-height: 50px;
@navbar-color: #777;
@navbar-bg: #eee;
@navbar-padding: floor(@grid-gutter-width / 2); // ~15px
// Navbar links
@navbar-link-color: #777;