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

Merge branch 'derp' into derp_navs

Conflicts:
	dist/css/bootstrap.css.map
	dist/css/bootstrap.min.css
	docs/dist/css/bootstrap.css.map
	docs/dist/css/bootstrap.min.css
This commit is contained in:
Mark Otto
2014-07-09 10:48:58 -07:00
65 changed files with 906 additions and 1164 deletions
+16 -10
View File
@@ -5,32 +5,38 @@
// Base class
.badge {
position: relative;
top: -.1em;
display: inline-block;
min-width: 10px;
padding: 3px 7px;
font-size: @font-size-small;
padding-left: .6em;
padding-right: .6em;
font-size: .75em;
font-weight: @badge-font-weight;
color: @badge-color;
line-height: @badge-line-height;
vertical-align: baseline;
white-space: nowrap;
text-align: center;
white-space: nowrap;
background-color: @badge-bg;
.border-radius(@badge-border-radius);
// Empty badges collapse automatically (not available in IE8)
// Empty badges collapse automatically
&:empty {
display: none;
}
&.pull-left,
&.pull-right {
top: .2em;
}
// Quick fix for badges in buttons
.btn & {
/* .btn & {
position: relative;
top: -1px;
}
*/
.btn-xs & {
top: 0;
padding: 1px 5px;
/*top: 0;*/
/*padding: 1px 5px;*/
}
// Hover state, but only for links
+3 -3
View File
@@ -117,11 +117,11 @@
// The clickable button for toggling the menu
// Remove the gradient and set the same inset shadow as the :active state
.btn-group.open .dropdown-toggle {
box-shadow: inset 0 3px 5px rgba(0,0,0,.125);
.box-shadow(inset 0 3px 5px rgba(0,0,0,.125));
// Show no shadow for `.btn-link` since it has no other button styles.
&.btn-link {
box-shadow: none;
.box-shadow(none);
}
}
@@ -239,7 +239,7 @@
input[type="checkbox"] {
position: absolute;
z-index: -1;
.opacity(0);
opacity: 0;
}
}
}
+3 -3
View File
@@ -39,7 +39,7 @@
&.active {
outline: 0;
background-image: none;
box-shadow: inset 0 3px 5px rgba(0,0,0,.125);
.box-shadow(inset 0 3px 5px rgba(0,0,0,.125));
}
&.disabled,
@@ -48,7 +48,7 @@
cursor: not-allowed;
pointer-events: none; // Future-proof disabling of clicks
opacity: .65;
box-shadow: none;
.box-shadow(none);
}
}
@@ -90,7 +90,7 @@
&[disabled],
fieldset[disabled] & {
background-color: transparent;
box-shadow: none;
.box-shadow(none);
}
&,
&:hover,
+4 -8
View File
@@ -72,7 +72,7 @@
left: 0;
bottom: 0;
width: @carousel-control-width;
.opacity(@carousel-control-opacity);
opacity: @carousel-control-opacity;
font-size: @carousel-control-font-size;
color: @carousel-control-color;
text-align: center;
@@ -96,7 +96,7 @@
outline: 0;
color: @carousel-control-color;
text-decoration: none;
.opacity(.9);
opacity: .9;
}
// Toggles
@@ -159,15 +159,11 @@
border-radius: 10px;
cursor: pointer;
// IE8-9 hack for event handling
// IE9 hack for event handling
//
// Internet Explorer 8-9 does not support clicks on elements without a set
// Internet Explorer 9 does not support clicks on elements without a set
// `background-color`. We cannot use `filter` since that's not viewed as a
// background color by the browser. Thus, a hack is needed.
//
// For IE8, we set solid black as it doesn't support `rgba()`. For IE9, we
// set alpha transparency for the best results possible.
background-color: #000 \9; // IE8
background-color: rgba(0,0,0,0); // IE9
}
.active {
+4 -4
View File
@@ -17,7 +17,7 @@ code {
font-size: 90%;
color: @code-color;
background-color: @code-bg;
border-radius: @border-radius-base;
.border-radius(@border-radius-base);
}
// User input typically entered via keyboard
@@ -26,13 +26,13 @@ kbd {
font-size: 90%;
color: @kbd-color;
background-color: @kbd-bg;
border-radius: @border-radius-small;
box-shadow: inset 0 -.1rem 0 rgba(0,0,0,.25);
.border-radius(@border-radius-small);
.box-shadow(inset 0 -.1rem 0 rgba(0,0,0,.25));
kbd {
padding: 0;
font-size: 100%;
box-shadow: none;
.box-shadow(none);
}
}
-5
View File
@@ -2,11 +2,6 @@
// Component animations
// --------------------------------------------------
// Heads up!
//
// We don't use the `.opacity()` mixin here since it causes a bug with text
// fields in IE7-8. Source: https://github.com/twbs/bootstrap/pull/3552.
.fade {
opacity: 0;
transition: opacity .15s linear;
+1 -2
View File
@@ -42,10 +42,9 @@
font-size: @font-size-base;
text-align: left; // Ensures proper alignment if parent has it changed (e.g., modal footer)
background-color: @dropdown-bg;
border: 1px solid @dropdown-fallback-border; // IE8 fallback
border: 1px solid @dropdown-border;
.border-radius(@border-radius-base);
box-shadow: 0 6px 12px rgba(0,0,0,.175);
.box-shadow(0 6px 12px rgba(0,0,0,.175));
background-clip: padding-box;
// Dividers (basically an hr) within the dropdown
+3 -4
View File
@@ -31,7 +31,6 @@ legend {
label {
display: inline-block;
max-width: 100%; // Force IE8 to wrap long content (see https://github.com/twbs/bootstrap/issues/13141)
margin-bottom: 5px;
font-weight: bold;
}
@@ -52,7 +51,7 @@ input[type="search"] {
input[type="radio"],
input[type="checkbox"] {
margin: 4px 0 0;
margin-top: 1px \9; // IE8-9
margin-top: 1px \9; // IE9
line-height: normal;
}
@@ -124,7 +123,7 @@ output {
background-image: none; // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214
border: 1px solid @input-border;
.border-radius(@input-border-radius);
box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
.box-shadow(inset 0 1px 1px rgba(0,0,0,.075));
transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
// Customize the `:focus` state to imitate native WebKit styles.
@@ -182,7 +181,7 @@ input[type="time"],
input[type="datetime-local"],
input[type="month"] {
line-height: @input-height-base;
// IE8+ misaligns the text within date inputs, so we reset
// IE9+ misaligns the text within date inputs, so we reset
line-height: @line-height-base ~"\0";
&.input-sm {
+1 -1
View File
@@ -24,7 +24,7 @@
}
}
// Empty labels collapse automatically (not available in IE8)
// Empty labels collapse automatically
&:empty {
display: none;
}
+2 -3
View File
@@ -5,14 +5,13 @@
border-radius: @radius;
}
.box-shadow(@shadow: 0 .1rem .2rem rgba(0,0,0,.1)) when (@enable-shadows = true) {
box-shadow: @shadow;
.box-shadow(@shadow) when (@enable-shadows = true) {
box-shadow: @arguments;
}
// Utilities
@import "mixins/hide-text.less";
@import "mixins/opacity.less";
@import "mixins/image.less";
@import "mixins/labels.less";
@import "mixins/reset-filter.less";
+7 -6
View File
@@ -20,10 +20,11 @@
// Set the border and box shadow on specific inputs to match
.form-control {
border-color: @border-color;
box-shadow: inset 0 1px 1px rgba(0,0,0,.075); // Redeclare so transitions work
.box-shadow(inset 0 1px 1px rgba(0,0,0,.075)); // Redeclare so transitions work
&:focus {
border-color: darken(@border-color, 10%);
box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 6px lighten(@border-color, 20%);
@shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 6px lighten(@border-color, 20%);
.box-shadow(@shadow);
}
}
// Set validation states also for addons
@@ -51,12 +52,12 @@
//
// Example usage: change the default blue border and shadow to white for better
// contrast against a dark gray background.
.form-control-focus(@color: @input-border-focus) {
@color-rgba: rgba(red(@color), green(@color), blue(@color), .6);
.form-control-focus() {
&:focus {
border-color: @color;
border-color: @input-border-focus;
outline: 0;
box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px @color-rgba;
@shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px @input-box-shadow-focus;
.box-shadow(@shadow);
}
}
-8
View File
@@ -1,8 +0,0 @@
// Opacity
.opacity(@opacity) {
opacity: @opacity;
// IE8 filter
@opacity-ie: (@opacity * 100);
filter: ~"alpha(opacity=@{opacity-ie})";
}
+11 -6
View File
@@ -1,10 +1,15 @@
// Progress bars
.progress-bar-variant(@color) {
background-color: @color;
// Deprecated parent class requirement as of v3.2.0
.progress-striped & {
#gradient > .striped();
.progress-variant(@color) {
&[value]::-webkit-progress-value {
background-color: @color;
}
&[value]::-moz-progress-bar {
background-color: @color;
}
@media screen and (~"min-width:0\0") {
.progress-bar {
background-color: @color;
}
}
}
+2 -3
View File
@@ -51,10 +51,9 @@
.modal-content {
position: relative;
background-color: @modal-content-bg;
border: 1px solid @modal-content-fallback-border-color; //old browsers fallback (ie8 etc)
border: 1px solid @modal-content-border-color;
.border-radius(@border-radius-large);
box-shadow: 0 3px 9px rgba(0,0,0,.5);
.box-shadow(0 3px 9px rgba(0,0,0,.5));
background-clip: padding-box;
// Remove focus outline from opened modal
outline: 0;
@@ -138,7 +137,7 @@
margin: 30px auto;
}
.modal-content {
box-shadow: 0 5px 15px rgba(0,0,0,.5);
.box-shadow(0 5px 15px rgba(0,0,0,.5));
}
// Modal sizes
+5 -5
View File
@@ -52,7 +52,7 @@
padding-right: @navbar-padding-horizontal;
padding-left: @navbar-padding-horizontal;
border-top: 1px solid transparent;
box-shadow: inset 0 1px 0 rgba(255,255,255,.1);
.box-shadow(inset 0 1px 0 rgba(255,255,255,.1));
&:extend(.clearfix all);
-webkit-overflow-scrolling: touch;
@@ -63,7 +63,7 @@
@media (min-width: @grid-float-breakpoint) {
width: auto;
border-top: 0;
box-shadow: none;
.box-shadow(none);
&.collapse {
display: block !important;
@@ -248,7 +248,7 @@
margin-top: 0;
background-color: transparent;
border: 0;
box-shadow: none;
.box-shadow(none);
> li > a,
.dropdown-header {
padding: 5px 15px 5px 25px;
@@ -290,7 +290,7 @@
padding: 10px @navbar-padding-horizontal;
border-top: 1px solid transparent;
border-bottom: 1px solid transparent;
box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.1);
.box-shadow(~"inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.1)");
// Mixin behavior for optimum display
.form-inline();
@@ -312,7 +312,7 @@
margin-right: 0;
padding-top: 0;
padding-bottom: 0;
box-shadow: none;
.box-shadow(none);
}
}
+2 -7
View File
@@ -20,6 +20,8 @@
position: relative;
display: block;
padding: @nav-link-padding;
line-height: @line-height-base;
&:hover,
&:focus {
text-decoration: none;
@@ -59,13 +61,6 @@
.nav-divider {
.nav-divider();
}
// Prevent IE8 from misplacing imgs
//
// See https://github.com/h5bp/html5-boilerplate/issues/984#issuecomment-3985989
> li > a > img {
max-width: none;
}
}
+2 -7
View File
@@ -14,10 +14,9 @@
text-align: left; // Reset given new insertion method
background-color: @popover-bg;
background-clip: padding-box;
border: 1px solid @popover-fallback-border-color;
border: 1px solid @popover-border-color;
border-radius: @border-radius-large;
box-shadow: 0 5px 10px rgba(0,0,0,.2);
.border-radius(@border-radius-large);
.box-shadow(0 5px 10px rgba(0,0,0,.2));
// Overrides for proper insertion
white-space: normal;
@@ -72,7 +71,6 @@
left: 50%;
margin-left: -@popover-arrow-outer-width;
border-bottom-width: 0;
border-top-color: @popover-arrow-outer-fallback-color; // IE8 fallback
border-top-color: @popover-arrow-outer-color;
bottom: -@popover-arrow-outer-width;
&:after {
@@ -88,7 +86,6 @@
left: -@popover-arrow-outer-width;
margin-top: -@popover-arrow-outer-width;
border-left-width: 0;
border-right-color: @popover-arrow-outer-fallback-color; // IE8 fallback
border-right-color: @popover-arrow-outer-color;
&:after {
content: " ";
@@ -102,7 +99,6 @@
left: 50%;
margin-left: -@popover-arrow-outer-width;
border-top-width: 0;
border-bottom-color: @popover-arrow-outer-fallback-color; // IE8 fallback
border-bottom-color: @popover-arrow-outer-color;
top: -@popover-arrow-outer-width;
&:after {
@@ -119,7 +115,6 @@
right: -@popover-arrow-outer-width;
margin-top: -@popover-arrow-outer-width;
border-right-width: 0;
border-left-color: @popover-arrow-outer-fallback-color; // IE8 fallback
border-left-color: @popover-arrow-outer-color;
&:after {
content: " ";
+131 -64
View File
@@ -3,98 +3,165 @@
// --------------------------------------------------
// Bar animations
// -------------------------
//
// Progress animations
//
// WebKit
@-webkit-keyframes progress-bar-stripes {
from { background-position: 40px 0; }
from { background-position: @line-height-computed 0; }
to { background-position: 0 0; }
}
// Spec and IE10+
@keyframes progress-bar-stripes {
from { background-position: 40px 0; }
from { background-position: @line-height-computed 0; }
to { background-position: 0 0; }
}
//
// Basic progress bar
//
// Bar itself
// -------------------------
// Outer container
.progress {
overflow: hidden;
display: block;
width: 100%;
height: @line-height-computed;
margin-bottom: @line-height-computed;
background-color: @progress-bg;
}
.progress[value] {
// Reset the default appearance
appearance: none;
// Remove Firefox and Opera border
border: 0;
// IE10 uses `color` to set the bar background-color
color: #0074d9;
}
.progress[value]::-webkit-progress-bar {
background-color: #eee;
.border-radius(@border-radius-base);
box-shadow: inset 0 1px 2px rgba(0,0,0,.1);
.box-shadow(inset 0 .1rem .1rem rgba(0,0,0,.1));
}
.progress[value]::-webkit-progress-value::before {
content: attr(value);
}
.progress[value]::-webkit-progress-value {
background-color: #0074d9;
border-top-left-radius: @border-radius-base;
border-bottom-left-radius: @border-radius-base;
}
.progress[value="0"]::-webkit-progress-value {
color: @gray-light;
min-width: 2rem;
background-color: transparent;
background-image: none;
}
.progress[value="100"]::-webkit-progress-value {
border-top-right-radius: @border-radius-base;
border-bottom-right-radius: @border-radius-base;
}
// Bar of progress
.progress-bar {
float: left;
width: 0%;
height: 100%;
font-size: @font-size-small;
line-height: @line-height-computed;
color: @progress-bar-color;
text-align: center;
background-color: @progress-bar-bg;
box-shadow: inset 0 -1px 0 rgba(0,0,0,.15);
transition: width .6s ease;
}
// Striped bars
//
// `.progress-striped .progress-bar` is deprecated as of v3.2.0 in favor of the
// `.progress-bar-striped` class, which you just add to an existing
// `.progress-bar`.
.progress-striped .progress-bar,
.progress-bar-striped {
#gradient > .striped();
background-size: 40px 40px;
}
// Call animation for the active one
//
// `.progress.active .progress-bar` is deprecated as of v3.2.0 in favor of the
// `.progress-bar.active` approach.
.progress.active .progress-bar,
.progress-bar.active {
animation: progress-bar-stripes 2s linear infinite;
}
// Account for lower percentages
.progress-bar {
&[aria-valuenow="0"] {
// Firefox styles must be entirely separate or it busts Webkit styles.
@-moz-document url-prefix() {
.progress[value] {
background-color: #eee;
.border-radius(@border-radius-base);
.box-shadow(inset 0 .1rem .1rem rgba(0,0,0,.1));
}
.progress[value]::-moz-progress-bar {
background-color: #0074d9;
border-top-left-radius: @border-radius-base;
border-bottom-left-radius: @border-radius-base;
}
.progress[value="0"]::-moz-progress-bar {
color: @gray-light;
min-width: 30px;
min-width: 2rem;
background-color: transparent;
background-image: none;
box-shadow: none;
}
.progress[value="100"]::-moz-progress-bar {
border-top-right-radius: @border-radius-base;
border-bottom-right-radius: @border-radius-base;
}
}
// IE9 hacks to accompany custom markup. We don't need to scope this via media queries, but I feel better doing it anyway.
@media screen and (~"min-width:0\0") {
.progress {
background-color: #eee;
.border-radius(@border-radius-base);
.box-shadow(inset 0 .1rem .1rem rgba(0,0,0,.1));
}
.progress-bar {
display: inline-block;
height: @line-height-computed;
text-indent: -999rem; // Simulate hiding of value as in native `<progress>`
background-color: #0074d9;
border-top-left-radius: @border-radius-base;
border-bottom-left-radius: @border-radius-base;
}
.progress[width^="0"] {
color: @gray-light;
min-width: 2rem;
background-color: transparent;
background-image: none;
}
.progress[width="100%"] {
border-top-right-radius: @border-radius-base;
border-bottom-right-radius: @border-radius-base;
}
}
//
// Striped
//
.progress-striped[value]::-webkit-progress-value {
#gradient > .striped();
background-size: @line-height-computed @line-height-computed;
}
.progress-striped[value]::-moz-progress-bar {
#gradient > .striped();
background-size: @line-height-computed @line-height-computed;
}
@media screen and (~"min-width:0\0") {
.progress-bar-striped {
#gradient > .striped();
background-size: @line-height-computed @line-height-computed;
}
}
//
// Animated
//
.progress-animated[value]::-webkit-progress-value {
animation: progress-bar-stripes 2s linear infinite;
}
.progress-animated[value]::-moz-progress-bar {
animation: progress-bar-stripes 2s linear infinite;
}
@media screen and (~"min-width:0\0") {
.progress-animated .progress-bar-striped {
animation: progress-bar-stripes 2s linear infinite;
}
}
//
// Variations
// -------------------------
//
.progress-bar-success {
.progress-bar-variant(@progress-bar-success-bg);
.progress-success {
.progress-variant(@progress-bar-success-bg);
}
.progress-bar-info {
.progress-bar-variant(@progress-bar-info-bg);
.progress-info {
.progress-variant(@progress-bar-info-bg);
}
.progress-bar-warning {
.progress-bar-variant(@progress-bar-warning-bg);
.progress-warning {
.progress-variant(@progress-bar-warning-bg);
}
.progress-bar-danger {
.progress-bar-variant(@progress-bar-danger-bg);
.progress-danger {
.progress-variant(@progress-bar-danger-bg);
}
+11 -9
View File
@@ -19,12 +19,13 @@
.btn-warning,
.btn-danger {
text-shadow: 0 -1px 0 rgba(0,0,0,.2);
box-shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 1px 1px rgba(0,0,0,.075);
@shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 1px 1px rgba(0,0,0,.075);
.box-shadow(@shadow);
// Reset the shadow
&:active,
&.active {
box-shadow: inset 0 3px 5px rgba(0,0,0,.125);
.box-shadow(inset 0 3px 5px rgba(0,0,0,.125));
}
}
@@ -77,9 +78,8 @@
// Images
// --------------------------------------------------
.thumbnail,
.img-thumbnail {
box-shadow: 0 1px 2px rgba(0,0,0,.075);
.box-shadow(0 1px 2px rgba(0,0,0,.075));
}
@@ -111,11 +111,12 @@
#gradient > .vertical(@start-color: lighten(@navbar-default-bg, 10%); @end-color: @navbar-default-bg);
.reset-filter(); // Remove gradient in IE<10 to fix bug where dropdowns don't get triggered
.border-radius(@navbar-border-radius);
box-shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 1px 5px rgba(0,0,0,.075);
@shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 1px 5px rgba(0,0,0,.075);
.box-shadow(@shadow);
.navbar-nav > .active > a {
#gradient > .vertical(@start-color: darken(@navbar-default-bg, 5%); @end-color: darken(@navbar-default-bg, 2%));
box-shadow: inset 0 3px 9px rgba(0,0,0,.075);
.box-shadow(inset 0 3px 9px rgba(0,0,0,.075));
}
}
.navbar-brand,
@@ -130,7 +131,7 @@
.navbar-nav > .active > a {
#gradient > .vertical(@start-color: @navbar-inverse-bg; @end-color: lighten(@navbar-inverse-bg, 2.5%));
box-shadow: inset 0 3px 9px rgba(0,0,0,.25);
.box-shadow(inset 0 3px 9px rgba(0,0,0,.25));
}
.navbar-brand,
@@ -155,7 +156,8 @@
// Common styles
.alert {
text-shadow: 0 1px 0 rgba(255,255,255,.2);
box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 1px 2px rgba(0,0,0,.05);
@shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 1px 2px rgba(0,0,0,.05);
.box-shadow(@shadow);
}
// Mixin for generating new styles
@@ -206,7 +208,7 @@
.list-group {
.border-radius(@border-radius-base);
box-shadow: 0 1px 2px rgba(0,0,0,.075);
.box-shadow(0 1px 2px rgba(0,0,0,.075));
}
.list-group-item.active,
.list-group-item.active:hover,
+3 -6
View File
@@ -187,6 +187,7 @@
@input-border-radius: @border-radius-base;
//** Border color for inputs on focus
@input-border-focus: #66afe9;
@input-box-shadow-focus: rgba(102,175,233,.6);
//** Placeholder text color
@input-color-placeholder: @gray-light;
@@ -215,8 +216,6 @@
@dropdown-bg: #fff;
//** Dropdown menu `border-color`.
@dropdown-border: rgba(0,0,0,.15);
//** Dropdown menu `border-color` **for IE8**.
@dropdown-fallback-border: #ccc;
//** Divider color for between dropdown items.
@dropdown-divider-bg: #e5e5e5;
@@ -370,7 +369,7 @@
//##
//=== Shared nav styles
@nav-link-padding: 10px 15px;
@nav-link-padding: .5em 1em;
@nav-link-hover-bg: @gray-lighter;
@nav-disabled-link-color: @gray-light;
@@ -551,8 +550,6 @@
@modal-content-bg: #fff;
//** Modal content border color
@modal-content-border-color: rgba(0,0,0,.2);
//** Modal content border color **for IE8**
@modal-content-fallback-border-color: #999;
//** Modal backdrop background color
@modal-backdrop-bg: #000;
@@ -678,7 +675,7 @@
@badge-font-weight: bold;
@badge-line-height: 1;
@badge-border-radius: 10px;
@badge-border-radius: 2em;
//== Breadcrumbs