mirror of
https://github.com/twbs/bootstrap.git
synced 2025-09-30 15:29:06 +02:00
overhauled docs to include example markup, add language around browser support and classes
This commit is contained in:
Mark Otto
2
lib/bootstrap.less
vendored
2
lib/bootstrap.less
vendored
@@ -30,7 +30,6 @@
|
||||
@import "wells.less";
|
||||
@import "component-animations.less";
|
||||
@import "close.less";
|
||||
@import "progress-bars.less";
|
||||
|
||||
// Components: Nav
|
||||
@import "navbar.less";
|
||||
@@ -52,6 +51,7 @@
|
||||
// Components: Misc
|
||||
@import "thumbnails.less";
|
||||
@import "labels.less";
|
||||
@import "progress-bars.less";
|
||||
|
||||
// Responsive
|
||||
@import "responsive.less";
|
||||
@@ -179,6 +179,13 @@
|
||||
background-clip: @clip;
|
||||
}
|
||||
|
||||
// Box sizing
|
||||
.box-sizing(@boxmodel) {
|
||||
-webkit-box-sizing: @boxmodel;
|
||||
-moz-box-sizing: @boxmodel;
|
||||
box-sizing: @boxmodel;
|
||||
}
|
||||
|
||||
// Resize anything
|
||||
.resizable(@direction: both) {
|
||||
resize: @direction; // Options: horizontal, vertical, both
|
||||
@@ -272,12 +279,12 @@
|
||||
}
|
||||
.striped(@color,@angle: -45deg) {
|
||||
background-color: @color;
|
||||
background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.25, rgba(255, 255, 255, .2)), color-stop(.25, transparent), color-stop(.5, transparent), color-stop(.5, rgba(255, 255, 255, .2)), color-stop(.75, rgba(255, 255, 255, .2)), color-stop(.75, transparent), to(transparent));
|
||||
background-image: -webkit-linear-gradient(@angle, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent);
|
||||
background-image: -moz-linear-gradient(@angle, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent);
|
||||
background-image: -ms-linear-gradient(@angle, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent);
|
||||
background-image: -o-linear-gradient(@angle, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent);
|
||||
background-image: linear-gradient(@angle, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent);
|
||||
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: -ms-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);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -1,102 +1,98 @@
|
||||
// PROGRESS BARS
|
||||
// -------------
|
||||
|
||||
|
||||
// ANIMATIONS
|
||||
// ----------
|
||||
|
||||
// Webkit
|
||||
@-webkit-keyframes progress-bar-stripes {
|
||||
from {
|
||||
background-position: 0 0;
|
||||
}
|
||||
to {
|
||||
background-position: 40px 0;
|
||||
}
|
||||
from { background-position: 0 0; }
|
||||
to { background-position: 40px 0; }
|
||||
}
|
||||
|
||||
/* COMMENTED OUT SO LESS COMPILES
|
||||
@-moz-keyframes progress-bar-stripes {
|
||||
from {
|
||||
background-position: 0 0;
|
||||
}
|
||||
to {
|
||||
background-position: 40px 0;
|
||||
}
|
||||
}
|
||||
*/
|
||||
// Temporarily commented out since LESS won't compile with this
|
||||
// @-moz-keyframes progress-bar-stripes {
|
||||
// from { background-position: 0 0; }
|
||||
// to { background-position: 40px 0; }
|
||||
// }
|
||||
|
||||
// Spec
|
||||
@keyframes progress-bar-stripes {
|
||||
from {
|
||||
background-position: 0 0;
|
||||
}
|
||||
to {
|
||||
background-position: 40px 0;
|
||||
}
|
||||
from { background-position: 0 0; }
|
||||
to { background-position: 40px 0; }
|
||||
}
|
||||
|
||||
|
||||
|
||||
// THE BARS
|
||||
// --------
|
||||
|
||||
// Common styles
|
||||
.progress,
|
||||
.progress .bar {
|
||||
.border-radius(4px);
|
||||
}
|
||||
|
||||
// Outer container
|
||||
.progress {
|
||||
height: 25px;
|
||||
height: 18px;
|
||||
margin-bottom: 18px;
|
||||
overflow: hidden;
|
||||
.box-shadow(inset 0 1px 1px 0 rgba(0,0,0,.3), 0 1px 0 0 #fff);
|
||||
#gradient > .vertical(#fff, #f5f5f5);
|
||||
.border-radius(10px);
|
||||
#gradient > .vertical(#f5f5f5, #f9f9f9);
|
||||
border: 1px solid #ddd;
|
||||
border-color: rgba(0,0,0,.0);
|
||||
&.active {
|
||||
.bar {
|
||||
-webkit-animation: progress-bar-stripes 2s linear infinite;
|
||||
-moz-animation: progress-bar-stripes 2s linear infinite;
|
||||
animation: progress-bar-stripes 2s linear infinite;
|
||||
}
|
||||
}
|
||||
&.animated {
|
||||
.bar {
|
||||
.transition(width .6s ease);
|
||||
}
|
||||
}
|
||||
&.danger,
|
||||
&.error {
|
||||
.bar {
|
||||
#gradient > .vertical(#ee5f5b, #c43c35);
|
||||
}
|
||||
&.striped {
|
||||
.bar {
|
||||
.background-size(40px, 40px);
|
||||
#gradient > .striped(#ee5f5b);
|
||||
}
|
||||
}
|
||||
}
|
||||
&.success {
|
||||
.bar {
|
||||
#gradient > .vertical(#62c462, #57a957);
|
||||
}
|
||||
&.striped {
|
||||
.bar {
|
||||
.background-size(40px, 40px);
|
||||
#gradient > .striped(#62c462);
|
||||
}
|
||||
}
|
||||
}
|
||||
&.info {
|
||||
.bar {
|
||||
#gradient > .vertical(#5bc0de, #339bb9);
|
||||
}
|
||||
&.striped {
|
||||
.bar {
|
||||
.background-size(40px, 40px);
|
||||
#gradient > .striped(#5bc0de);
|
||||
}
|
||||
}
|
||||
}
|
||||
&.striped {
|
||||
.bar {
|
||||
.background-size(40px, 40px);
|
||||
#gradient > .striped(#62c462);
|
||||
}
|
||||
}
|
||||
.bar {
|
||||
width: 0%;
|
||||
height: 100%;
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
.gradientBar(#62c462, #57a957);
|
||||
@shadow: inset 0 2px 0 rgba(255,255,255,.2), inset -1px -1px 0 rgba(0,0,0,.25),inset 1px 1px 0 rgba(0,0,0,.25);
|
||||
.box-shadow(@shadow);
|
||||
.border-radius(10px);
|
||||
}
|
||||
}
|
||||
.box-shadow(inset 0 1px 2px rgba(0,0,0,.1));
|
||||
}
|
||||
|
||||
// Bar of progress
|
||||
.progress .bar {
|
||||
width: 0%;
|
||||
height: 20px;
|
||||
margin: -1px;
|
||||
#gradient > .vertical(#62c462, #57a957);
|
||||
#gradient > .vertical(#149bdf, #0480be);
|
||||
.box-shadow(inset 0 -1px 0 rgba(0,0,0,.15));
|
||||
.box-sizing(border-box);
|
||||
.transition(width .6s ease);
|
||||
}
|
||||
|
||||
// Striped bars
|
||||
.progress.striped .bar {
|
||||
#gradient > .striped(#62c462);
|
||||
.background-size(40px, 40px);
|
||||
}
|
||||
|
||||
// Call animation for the active one
|
||||
.progress.active .bar {
|
||||
-webkit-animation: progress-bar-stripes 2s linear infinite;
|
||||
-moz-animation: progress-bar-stripes 2s linear infinite;
|
||||
animation: progress-bar-stripes 2s linear infinite;
|
||||
}
|
||||
|
||||
|
||||
|
||||
// COLORS
|
||||
// ------
|
||||
|
||||
// Danger (red)
|
||||
.progress.danger .bar {
|
||||
#gradient > .vertical(#ee5f5b, #c43c35);
|
||||
}
|
||||
.progress.danger.striped .bar {
|
||||
#gradient > .striped(#ee5f5b);
|
||||
}
|
||||
|
||||
// Success (green)
|
||||
.progress.success .bar {
|
||||
#gradient > .vertical(#62c462, #57a957);
|
||||
}
|
||||
.progress.success.striped .bar {
|
||||
#gradient > .striped(#62c462);
|
||||
}
|
||||
|
||||
// Info (teal)
|
||||
.progress.info .bar {
|
||||
#gradient > .vertical(#5bc0de, #339bb9);
|
||||
}
|
||||
.progress.info.striped .bar {
|
||||
#gradient > .striped(#5bc0de);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user