mirrors/bootstrap
2
0
Fork 0
mirror of https://github.com/tenrok/bootstrap.git synced 2026-05-27 14:46:01 +03:00
Code Activity

Merge branch '3.0.0-wip' of https://github.com/twitter/bootstrap into 3.0.0-wip

Browse Source
This commit is contained in:
Artur Kwiatkowski
2013-04-22 15:21:55 +02:00
parent 3861e3f5d5 e0d60b1325
commit b7dcefea83
19 changed files with 241 additions and 177 deletions
Download Patch File Download Diff File Expand all files Collapse all files
less/alerts.less
+22 -23
View File
@@ -9,10 +9,10 @@
.alert {
padding: 8px 35px 8px 14px;
margin-bottom: @line-height-base;
color: @state-warning-text;
background-color: @state-warning-bg;
border: 1px solid @state-warning-border;
border-radius: @border-radius-base;
color: @alert-text;
background-color: @alert-bg;
border: 1px solid @alert-border;
border-radius: @alert-border-radius;
// Headings for larger alerts
h4 {
@@ -22,13 +22,13 @@
}
// Match the hr to the border of the alert
hr {
border-top-color: darken(@state-warning-border, 5%);
border-top-color: darken(@alert-border, 5%);
}
// Inherit color for immediate links and bolden them some
> a,
> p > a {
font-weight: 500;
color: darken(@state-warning-text, 10%);
color: darken(@alert-text, 10%);
}
// Adjust close link position
@@ -44,40 +44,39 @@
// -------------------------
.alert-success {
background-color: @state-success-bg;
border-color: @state-success-border;
color: @state-success-text;
background-color: @alert-success-bg;
border-color: @alert-success-border;
color: @alert-success-text;
hr {
border-top-color: darken(@state-success-border, 5%);
border-top-color: darken(@alert-success-border, 5%);
}
> a,
> p > a {
color: darken(@state-success-text, 10%);
color: darken(@alert-success-text, 10%);
}
}
.alert-danger,
.alert-error {
background-color: @state-danger-bg;
border-color: @state-danger-border;
color: @state-danger-text;
.alert-danger {
background-color: @alert-danger-bg;
border-color: @alert-danger-border;
color: @alert-danger-text;
hr {
border-top-color: darken(@state-danger-border, 5%);
border-top-color: darken(@alert-danger-border, 5%);
}
> a,
> p > a {
color: darken(@state-danger-text, 10%);
color: darken(@alert-danger-text, 10%);
}
}
.alert-info {
background-color: @state-info-bg;
border-color: @state-info-border;
color: @state-info-text;
background-color: @alert-info-bg;
border-color: @alert-info-border;
color: @alert-info-text;
hr {
border-top-color: darken(@state-info-border, 5%);
border-top-color: darken(@alert-info-border, 5%);
}
> a,
> p > a {
color: darken(@state-info-text, 10%);
color: darken(@alert-info-text, 10%);
}
}
less/badges.less
+1 -1
View File
@@ -15,7 +15,7 @@
vertical-align: middle;
white-space: nowrap;
text-align: center;
background-color: @grayLight;
background-color: @gray-light;
border-radius: 10px;
// Empty labels/badges collapse
less/breadcrumbs.less
+1 -1
View File
@@ -23,6 +23,6 @@
}
}
> .active {
color: @grayLight;
color: @gray-light;
}
}
less/buttons.less
+1 -1
View File
@@ -168,7 +168,7 @@ fieldset[disabled] .btn-link {
fieldset[disabled] & {
&:hover,
&:focus {
color: @grayDark;
color: @gray-dark;
text-decoration: none;
}
}
less/code.less
+1 -1
View File
@@ -9,7 +9,7 @@ pre {
padding: 0 3px 2px;
font-family: @font-family-monospace;
font-size: (@font-size-base - 2);
color: @grayDark;
color: @gray-dark;
border-radius: 4px;
}
less/dropdowns.less
+1 -1
View File
@@ -103,7 +103,7 @@
.dropdown-menu > .disabled > a,
.dropdown-menu > .disabled > a:hover,
.dropdown-menu > .disabled > a:focus {
color: @grayLight;
color: @gray-light;
}
// Nuke hover/focus effects
.dropdown-menu > .disabled > a:hover,
less/forms.less
+2 -2
View File
@@ -23,7 +23,7 @@ legend {
margin-bottom: @line-height-base;
font-size: (@font-size-base * 1.5);
line-height: (@line-height-base * 2);
color: @grayDark;
color: @gray-dark;
border: 0;
border-bottom: 1px solid #e5e5e5;
}
@@ -426,7 +426,7 @@ select:focus:invalid {
line-height: @line-height-base;
text-align: center;
text-shadow: 0 1px 0 #fff;
background-color: @grayLighter;
background-color: @gray-lighter;
border: 1px solid #ccc;
&.input-small {
less/labels.less
+2 -2
View File
@@ -14,7 +14,7 @@
vertical-align: middle;
white-space: nowrap;
text-align: center;
background-color: @grayLight;
background-color: @gray-light;
border-radius: .25em;
// Hover state, but only for links - as a mixin which will be accessible as LESS shorthand: .label > .a;
@@ -95,4 +95,4 @@ a.label {
.label-info {
.label > .label-info;
.label > .label-info > .a;
}
}
less/mixins.less
+13 -10
View File
@@ -248,20 +248,18 @@
#gradient {
.horizontal(@startColor: #555, @endColor: #333) {
background-color: @endColor;
background-image: -moz-linear-gradient(left, @startColor, @endColor); // FF 3.6+
background-image: -webkit-gradient(linear, 0 0, 100% 0, from(@startColor), to(@endColor)); // Safari 4+, Chrome 2+
background-image: -webkit-linear-gradient(left, @startColor, @endColor); // Safari 5.1+, Chrome 10+
background-image: -o-linear-gradient(left, @startColor, @endColor); // Opera 11.10
background-image: -moz-linear-gradient(left, @startColor, @endColor); // FF 3.6+
background-image: linear-gradient(to right, @startColor, @endColor); // Standard, IE10
background-repeat: repeat-x;
filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",argb(@startColor),argb(@endColor))); // IE9 and down
}
.vertical(@startColor: #555, @endColor: #333) {
background-color: @endColor;
background-image: -moz-linear-gradient(top, @startColor, @endColor); // FF 3.6+
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@startColor), to(@endColor)); // Safari 4+, Chrome 2+
background-image: -webkit-linear-gradient(top, @startColor, @endColor); // Safari 5.1+, Chrome 10+
background-image: -o-linear-gradient(top, @startColor, @endColor); // Opera 11.10
background-image: -moz-linear-gradient(top, @startColor, @endColor); // FF 3.6+
background-image: linear-gradient(to bottom, @startColor, @endColor); // Standard, IE10
background-repeat: repeat-x;
filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",argb(@startColor),argb(@endColor))); // IE9 and down
@@ -269,9 +267,8 @@
.directional(@startColor: #555, @endColor: #333, @deg: 45deg) {
background-color: @endColor;
background-repeat: repeat-x;
background-image: -moz-linear-gradient(@deg, @startColor, @endColor); // FF 3.6+
background-image: -webkit-linear-gradient(@deg, @startColor, @endColor); // Safari 5.1+, Chrome 10+
background-image: -o-linear-gradient(@deg, @startColor, @endColor); // Opera 11.10
background-image: -moz-linear-gradient(@deg, @startColor, @endColor); // FF 3.6+
background-image: linear-gradient(@deg, @startColor, @endColor); // Standard, IE10
}
.horizontal-three-colors(@startColor: #00b3ee, @midColor: #7a43b6, @colorStop: 50%, @endColor: #c3325f) {
@@ -279,7 +276,6 @@
background-image: -webkit-gradient(left, linear, 0 0, 0 100%, from(@startColor), color-stop(@colorStop, @midColor), to(@endColor));
background-image: -webkit-linear-gradient(left, @startColor, @midColor @colorStop, @endColor);
background-image: -moz-linear-gradient(left, @startColor, @midColor @colorStop, @endColor);
background-image: -o-linear-gradient(left, @startColor, @midColor @colorStop, @endColor);
background-image: linear-gradient(to right, @startColor, @midColor @colorStop, @endColor);
background-repeat: no-repeat;
filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",argb(@startColor),argb(@endColor))); // IE9 and down, gets no color-stop at all for proper fallback
@@ -290,7 +286,6 @@
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@startColor), color-stop(@colorStop, @midColor), to(@endColor));
background-image: -webkit-linear-gradient(@startColor, @midColor @colorStop, @endColor);
background-image: -moz-linear-gradient(top, @startColor, @midColor @colorStop, @endColor);
background-image: -o-linear-gradient(@startColor, @midColor @colorStop, @endColor);
background-image: linear-gradient(@startColor, @midColor @colorStop, @endColor);
background-repeat: no-repeat;
filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",argb(@startColor),argb(@endColor))); // IE9 and down, gets no color-stop at all for proper fallback
@@ -300,7 +295,6 @@
background-image: -webkit-gradient(radial, center center, 0, center center, 460, from(@innerColor), to(@outerColor));
background-image: -webkit-radial-gradient(circle, @innerColor, @outerColor);
background-image: -moz-radial-gradient(circle, @innerColor, @outerColor);
background-image: -o-radial-gradient(circle, @innerColor, @outerColor);
background-image: radial-gradient(circle, @innerColor, @outerColor);
background-repeat: no-repeat;
}
@@ -309,7 +303,6 @@
background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.25, rgba(255,255,255,.15)), color-stop(.25, transparent), color-stop(.5, transparent), color-stop(.5, rgba(255,255,255,.15)), color-stop(.75, rgba(255,255,255,.15)), color-stop(.75, transparent), to(transparent));
background-image: -webkit-linear-gradient(@angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent);
background-image: -moz-linear-gradient(@angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent);
background-image: -o-linear-gradient(@angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent);
background-image: linear-gradient(@angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent);
}
}
@@ -445,6 +438,16 @@
right: percentage((@columns / @grid-columns));
}
}
// Small, mobile-first columns
.make-small-column(@columns) {
position: relative;
float: left;
// Prevent columns from collapsing when empty
min-height: 1px;
// Set inner padding as gutters instead of margin
padding-left: (@grid-gutter-width / 2);
padding-right: (@grid-gutter-width / 2);
}
less/navs.less
+13 -13
View File
@@ -21,7 +21,7 @@
&:hover,
&:focus {
text-decoration: none;
background-color: @grayLighter;
background-color: @gray-lighter;
}
}
@@ -33,12 +33,12 @@
// Gray out text
&.disabled > a {
color: @grayLight;
color: @gray-light;
}
// Nuke hover effects
&.disabled > a:hover,
&.disabled > a:focus {
color: @grayLight;
color: @gray-light;
text-decoration: none;
background-color: transparent;
cursor: default;
@@ -54,7 +54,7 @@
> .pull-right {
float: right;
}
// Dividers (basically an hr) within the dropdown
.divider {
.nav-divider();
@@ -75,7 +75,7 @@
> li {
float: left;
// Make the list-items overlay the bottom border
margin-bottom: -1px;
margin-bottom: -1px;
// Actual tabs (as links)
> a {
@@ -84,7 +84,7 @@
border: 1px solid transparent;
border-radius: @border-radius-base @border-radius-base 0 0;
&:hover {
border-color: @grayLighter @grayLighter #ddd;
border-color: @gray-lighter @gray-lighter #ddd;
}
}
@@ -96,7 +96,7 @@
background-color: @body-bg;
border: 1px solid #ddd;
border-bottom-color: transparent;
cursor: default;
cursor: default;
}
}
// pulling this in mainly for less shorthand
@@ -128,7 +128,7 @@
&.active > a:hover,
&.active > a:focus {
color: #fff;
background-color: @component-active-bg;
background-color: @component-active-bg;
}
}
}
@@ -141,7 +141,7 @@
+ li {
> a {
margin-top: 2px;
margin-left: 0; // no need for this gap between nav items
margin-left: 0; // no need for this gap between nav items
}
}
}
@@ -186,7 +186,7 @@
font-size: 11px;
font-weight: bold;
line-height: @line-height-base;
color: @grayLight;
color: @gray-light;
text-shadow: 0 1px 0 rgba(255,255,255,.5);
text-transform: uppercase;
}
@@ -264,8 +264,8 @@
.nav-pills .open .dropdown-toggle,
.nav > li.dropdown.open.active > a:hover {
color: #fff;
background-color: @grayLight;
border-color: @grayLight;
background-color: @gray-light;
border-color: @gray-light;
}
.nav li.dropdown.open .caret,
.nav li.dropdown.open.active .caret,
@@ -277,7 +277,7 @@
// Dropdowns in stacked tabs
.tabs-stacked .open > a:hover {
border-color: @grayLight;
border-color: @gray-light;
}
*/
less/pager.less
+2 -2
View File
@@ -32,7 +32,7 @@
float: right;
}
}
.previous {
> a,
> span {
@@ -45,7 +45,7 @@
> a:hover,
> a:focus,
> span {
color: @grayLight;
color: @gray-light;
background-color: @pagination-bg;
cursor: default;
}
less/pagination.less
+2 -2
View File
@@ -27,14 +27,14 @@
}
.pagination > .active > a,
.pagination > .active > span {
color: @grayLight;
color: @gray-light;
cursor: default;
}
.pagination > .disabled > span,
.pagination > .disabled > a,
.pagination > .disabled > a:hover,
.pagination > .disabled > a:focus {
color: @grayLight;
color: @gray-light;
background-color: @pagination-bg;
cursor: default;
}
less/responsive-utilities.less
+39 -21
View File
@@ -5,11 +5,27 @@
// IE10 Metro responsive
// Required for Windows 8 Metro split-screen snapping with IE10
//
// Source: http://timkadlec.com/2012/10/ie10-snap-mode-and-responsive-design/
@-ms-viewport{
width: device-width;
}
// IE10 on Windows Phone 8
// IE10 on WP8 doesn't report CSS pixels, but actual device pixels. In
// other words, say on a Lumia, you'll get 768px as the device width,
// meaning users will see the tablet styles and not phone styles.
//
// Alternatively you can override this with JS (see source below), but
// we won't be doing that here given our limited scope.
//
// Source: http://timkadlec.com/2013/01/windows-phone-8-and-device-width/
@media screen and (max-width: 400px) {
@-ms-viewport{
width: 320px;
}
}
// Hide from screenreaders and browsers
// Credit: HTML5 Boilerplate
.hidden {
@@ -19,34 +35,36 @@
// Visibility utilities
// For desktops
.visible-phone { display: none !important; }
// For Phones
.visible-phone { display: inherit !important; }
.visible-tablet { display: none !important; }
.hidden-phone { }
.hidden-tablet { }
.hidden-desktop { display: none !important; }
.visible-desktop { display: inherit !important; }
.visible-desktop { display: none !important; }
.hidden-phone { display: none !important; }
.hidden-tablet { display: inherit !important; }
.hidden-desktop { display: inherit !important; }
// Tablets & small desktops only
@media (min-width: 768px) and (max-width: 979px) {
// Hide everything else
.hidden-desktop { display: inherit !important; }
.visible-desktop { display: none !important ; }
// Show
.visible-phone { display: none !important; }
.visible-tablet { display: inherit !important; }
// Hide
.visible-desktop { display: none !important; }
.hidden-phone { display: inherit !important; }
.hidden-tablet { display: none !important; }
.hidden-desktop { display: inherit !important; }
}
// Phones only
@media (max-width: 767px) {
// Hide everything else
.hidden-desktop { display: inherit !important; }
.visible-desktop { display: none !important; }
// Show
.visible-phone { display: inherit !important; } // Use inherit to restore previous behavior
// Hide
.hidden-phone { display: none !important; }
// For desktops
@media (min-width: 980px) {
.visible-phone { display: none !important; }
.visible-tablet { display: none !important; }
.visible-desktop { display: inherit !important; }
.hidden-phone { display: inherit !important; }
.hidden-tablet { display: inherit !important; }
.hidden-desktop { display: none !important; }
}
// Print utilities
@@ -56,4 +74,4 @@
@media print {
.visible-print { display: inherit !important; }
.hidden-print { display: none !important; }
}
}
less/thumbnails.less
+4 -3
View File
@@ -12,8 +12,9 @@
.img-thumbnail {
padding: 4px;
line-height: @line-height-base;
border: 1px solid #ddd;
border-radius: @border-radius-base;
background-color: @thumbnail-bg;
border: 1px solid @thumbnail-border;
border-radius: @thumbnail-border-radius;
.transition(all .2s ease-in-out);
}
.thumbnail {
@@ -38,5 +39,5 @@ a.thumbnail:focus {
}
.thumbnail .caption {
padding: 9px;
color: @gray;
color: @thumbnail-caption-color;
}
less/type.less
+12 -10
View File
@@ -28,9 +28,9 @@ em { font-style: italic; }
cite { font-style: normal; }
// Utility classes
.text-muted { color: @grayLight; }
.text-muted { color: @gray-light; }
a.text-muted:hover,
a.text-muted:focus { color: darken(@grayLight, 10%); }
a.text-muted:focus { color: darken(@gray-light, 10%); }
.text-warning { color: @state-warning-text; }
a.text-warning:hover,
@@ -60,7 +60,7 @@ h1, h2, h3, h4, h5, h6,
small {
font-weight: normal;
line-height: 1;
color: @grayLight;
color: @gray-light;
}
}
@@ -100,7 +100,7 @@ h4 small, .h4 small { font-size: @font-size-base; }
.page-header {
padding-bottom: ((@line-height-base / 2) - 1);
margin: (@line-height-base * 2) 0 @line-height-base;
border-bottom: 1px solid @grayLighter;
border-bottom: 1px solid @gray-lighter;
}
@@ -187,7 +187,7 @@ abbr[title],
// Added data-* attribute to help out our tooltip plugin, per https://github.com/twitter/bootstrap/issues/5257
abbr[data-original-title] {
cursor: help;
border-bottom: 1px dotted @grayLight;
border-bottom: 1px dotted @gray-light;
}
abbr.initialism {
font-size: 90%;
@@ -196,19 +196,21 @@ abbr.initialism {
// Blockquotes
blockquote {
padding: 0 0 0 15px;
padding: (@line-height-base/2) @line-height-base;
margin: 0 0 @line-height-base;
border-left: 5px solid @grayLighter;
border-left: 5px solid @gray-lighter;
p {
margin-bottom: 0;
font-size: (@font-size-base * 1.25);
font-weight: 300;
line-height: 1.25;
}
p:last-child {
margin-bottom: 0;
}
small {
display: block;
line-height: @line-height-base;
color: @grayLight;
color: @gray-light;
&:before {
content: '\2014 \00A0';
}
@@ -219,7 +221,7 @@ blockquote {
float: right;
padding-right: 15px;
padding-left: 0;
border-right: 5px solid @grayLighter;
border-right: 5px solid @gray-lighter;
border-left: 0;
p,
small {
less/variables.less
+40 -13
View File
@@ -10,11 +10,11 @@
// Grays
// -------------------------
@grayDarker: #222;
@grayDark: #333;
@gray: #555;
@grayLight: #999;
@grayLighter: #eee;
@gray-darker: lighten(#000, 13.5%); // #222
@gray-dark: lighten(#000, 20%); // #333
@gray: lighten(#000, 33.5%); // #555
@gray-light: lighten(#000, 60%); // #999
@gray-lighter: lighten(#000, 93.5%); // #eee
// Brand colors
// -------------------------
@@ -29,7 +29,7 @@
// -------------------------
@body-bg: #fff;
@text-color: @grayDark;
@text-color: @gray-dark;
// Links
// -------------------------
@@ -109,12 +109,12 @@
// -------------------------
@input-bg: #fff;
@input-bg-disabled: @grayLighter;
@input-bg-disabled: @gray-lighter;
@input-border: #ccc;
@input-border-radius: @border-radius-base;
@input-color-placeholder: @grayLight;
@input-color-placeholder: @gray-light;
@input-height-base: (@line-height-base + 14px); // base line-height + 12px vertical padding + 2px top/bottom border
@input-height-large: (@line-height-base + 24px); // base line-height + 22px vertical padding + 2px top/bottom border
@@ -134,7 +134,7 @@
@dropdown-link-active-color: #fff;
@dropdown-link-active-bg: @component-active-bg;
@dropdown-link-color: @grayDark;
@dropdown-link-color: @gray-dark;
@dropdown-link-hover-color: #fff;
@dropdown-link-hover-bg: @dropdown-link-active-bg;
@@ -184,11 +184,11 @@
@navbar-brand-hover-bg: transparent;
// Inverted navbar
@navbar-inverse-text: @grayLight;
@navbar-inverse-text: @gray-light;
@navbar-inverse-bg: #222;
// Inverted navbar links
@navbar-inverse-link-color: @grayLight;
@navbar-inverse-link-color: @gray-light;
@navbar-inverse-link-hover-color: #fff;
@navbar-inverse-link-hover-bg: transparent;
@navbar-inverse-link-active-color: @navbar-inverse-link-hover-color;
@@ -220,7 +220,7 @@
// Jumbotron
// -------------------------
@jumbotron-bg: @grayLighter;
@jumbotron-bg: @gray-lighter;
@jumbotron-heading-color: inherit;
@jumbotron-lead-color: inherit;
@@ -277,6 +277,25 @@
@modal-title-padding: 15px;
@modal-title-line-height: @line-height-base;
// Alerts
// -------------------------
@alert-bg: @state-warning-bg;
@alert-text: @state-warning-text;
@alert-border: @state-warning-border;
@alert-border-radius: @border-radius-base;
@alert-success-bg: @state-success-bg;
@alert-success-text: @state-success-text;
@alert-success-border: @state-success-border;
@alert-danger-bg: @state-danger-bg;
@alert-danger-text: @state-danger-text;
@alert-danger-border: @state-danger-border;
@alert-info-bg: @state-info-bg;
@alert-info-text: @state-info-text;
@alert-info-border: @state-info-border;
// Progress bars
// -------------------------
@@ -327,6 +346,14 @@
@panel-info-heading-bg: @state-info-bg;
// Thumbnails
// -------------------------
@thumbnail-caption-color: @text-color;
@thumbnail-bg: @body-bg;
@thumbnail-border: #ddd;
@thumbnail-border-radius: @border-radius-base;
// Wells
// -------------------------
@well-bg: #f5f5f5;
@@ -336,7 +363,7 @@
// -------------------------
// Hr border color
@hr-border: @grayLighter;
@hr-border: @gray-lighter;
// Horizontal forms & lists
@component-offset-horizontal: 180px;