diff --git a/controls.html b/controls.html index 1f18bbc362c8ed7f839cf4d9d20260b4d107fa73..0b4a3e6f992dddaf978566438c908d3b2f26d254 100644 --- a/controls.html +++ b/controls.html @@ -244,4 +244,90 @@ base_url: "./" 备用的暗灰色按钮，不依赖于语义和用途 - \ No newline at end of file + + +
+

进度条

+

提供工作或动作的实时反馈，只用简单且灵活的进度条。

+ +
+

跨浏览器兼容性

+

进度条使用了CSS3的transition和animation属性来完成一些效果。这些特性在Internet Explorer 9或以下版本中、Firefox的老版本中没有被支持。Opera 12不支持znimation属性。

+
+ +

基本案例

+

默认的进度条。

+
+
+ 60% Complete +
+
+ +

有意义的替换

+

为了一致的样式，进度条使用与按钮和警告框相同的类。

+
+
+ 40% Complete (success) +
+
+
+
+ 20% Complete +
+
+
+
+ 60% Complete (warning) +
+
+
+
+ 80% Complete (danger) +
+
+ +

条纹效果

+

用一个渐变可以创建条纹效果，在IE8中不可用。

+
+
+ 40% Complete (success) +
+
+
+
+ 20% Complete +
+
+
+
+ 60% Complete (warning) +
+
+
+
+ 80% Complete (danger) +
+
+ +

运动效果

+

给.progress-striped加上.active使它由右向左运动。在IE的所有版本不可用。

+
+
+ 45% Complete +
+
+ +

堆叠效果

+

把多个进度条放入同一个.progress，使它们堆叠。

+
+
+ 35% Complete (success) +
+
+ 20% Complete (warning) +
+
+ 10% Complete (danger) +
+
+
diff --git a/examples/progress.html b/examples/progress.html new file mode 100644 index 0000000000000000000000000000000000000000..597dd59a0a593aea9dc65cc0cba0ad3a1758cd2a --- /dev/null +++ b/examples/progress.html @@ -0,0 +1,99 @@ + + + + + + + + + +
+

进度条

+

提供工作或动作的实时反馈，只用简单且灵活的进度条。

+ +
+

跨浏览器兼容性

+

进度条使用了CSS3的transition和animation属性来完成一些效果。这些特性在Internet Explorer 9或以下版本中、Firefox的老版本中没有被支持。Opera 12不支持znimation属性。

+
+ +

基本案例

+

默认的进度条。

+
+
+ 60% Complete +
+
+ +

有意义的替换

+

为了一致的样式，进度条使用与按钮和警告框相同的类。

+
+
+ 40% Complete (success) +
+
+
+
+ 20% Complete +
+
+
+
+ 60% Complete (warning) +
+
+
+
+ 80% Complete (danger) +
+
+ +

条纹效果

+

用一个渐变可以创建条纹效果，在IE8中不可用。

+
+
+ 40% Complete (success) +
+
+
+
+ 20% Complete +
+
+
+
+ 60% Complete (warning) +
+
+
+
+ 80% Complete (danger) +
+
+ +

运动效果

+

给.progress-striped加上.active使它由右向左运动。在IE的所有版本不可用。

+
+
+ 45% Complete +
+
+ +

堆叠效果

+

把多个进度条放入同一个.progress，使它们堆叠。

+
+
+ 35% Complete (success) +
+
+ 20% Complete (warning) +
+
+ 10% Complete (danger) +
+
+
+ + + + + diff --git a/src/less/basic/scaffolding.less b/src/less/basic/scaffolding.less index 74be2296159ba60bf55034c54a8ee015b0870395..9fa499ac19509539397012fc564b3e13342cd677 100644 --- a/src/less/basic/scaffolding.less +++ b/src/less/basic/scaffolding.less @@ -3,3 +3,17 @@ // -------------------------------------------------- *, *:before, *:after { .box-sizing(border-box); } + +// Only display content to screen readers +// +// See: http://a11yproject.com/posts/how-to-hide-content/ +.sr-only { + position: absolute; + width: 1px; + height: 1px; + margin: -1px; + padding: 0; + overflow: hidden; + clip: rect(0 0 0 0); + border: 0; +} diff --git a/src/less/basic/variables.less b/src/less/basic/variables.less index 145f3514378f9dacfb62d5ccf6f69fdb6e67ef05..66efe410bff94046700a86a781bce694801b74d3 100644 --- a/src/less/basic/variables.less +++ b/src/less/basic/variables.less @@ -183,4 +183,15 @@ @btn-info-bg: @color-info; @btn-info-border: darken(@btn-info-bg, 5%); -@btn-link-disabled-color: @gray-light; \ No newline at end of file +@btn-link-disabled-color: @gray-light; + +// Progress bars +// ------------------------- +@progress-bg: #f5f5f5; +@progress-bar-color: #fff; + +@progress-bar-bg: @color-primary; +@progress-bar-success-bg: @color-success; +@progress-bar-warning-bg: @color-warning; +@progress-bar-danger-bg: @color-danger; +@progress-bar-info-bg: @color-info; diff --git a/src/less/controls/progress-bars.less b/src/less/controls/progress-bars.less new file mode 100644 index 0000000000000000000000000000000000000000..7ded8332f92a7722a63ec0ea4ebcde387ad2f189 --- /dev/null +++ b/src/less/controls/progress-bars.less @@ -0,0 +1,92 @@ +// +// Progress bars +// -------------------------------------------------- + + +// Bar animations +// ------------------------- + +// Webkit +@-webkit-keyframes progress-bar-stripes +{ + from { background-position: 40px 0; } + to { background-position: 0 0; } +} + +// Firefox +@-moz-keyframes progress-bar-stripes +{ + from { background-position: 40px 0; } + to { background-position: 0 0; } +} + +// Opera +@-o-keyframes progress-bar-stripes +{ + from { background-position: 0 0; } + to { background-position: 40px 0; } +} + +// Spec and IE10+ +@keyframes progress-bar-stripes +{ + from { background-position: 40px 0; } + to { background-position: 0 0; } +} + + + +// Bar itself +// ------------------------- + +// Outer container +.progress +{ + overflow: hidden; + height: @line-height-computed; + margin-bottom: @line-height-computed; + background-color: @progress-bg; + border-radius: @border-radius-base; + .box-shadow(inset 0 1px 2px rgba(0,0,0,.1)); +} + +// Bar of progress +.progress-bar +{ + float: left; + width: 0%; + height: 100%; + font-size: @font-size-small; + 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 +{ + #gradient > .striped(@progress-bar-bg); + background-size: 40px 40px; +} + +// Call animation for the active one +.progress.active .progress-bar +{ + -webkit-animation: progress-bar-stripes 2s linear infinite; + -moz-animation: progress-bar-stripes 2s linear infinite; + -ms-animation: progress-bar-stripes 2s linear infinite; + -o-animation: progress-bar-stripes 2s linear infinite; + animation: progress-bar-stripes 2s linear infinite; +} + + + +// Variations +// ------------------------- + +.progress-bar-success { .progress-bar-variant(@progress-bar-success-bg); } +.progress-bar-info { .progress-bar-variant(@progress-bar-info-bg); } +.progress-bar-warning { .progress-bar-variant(@progress-bar-warning-bg); } +.progress-bar-danger { .progress-bar-variant(@progress-bar-danger-bg); } diff --git a/src/less/zui.less b/src/less/zui.less index 67a99aa7286924460640831ccb2b26307c127708..389b09c9562ebf1e29c86eff8840d75357d3e73e 100644 --- a/src/less/zui.less +++ b/src/less/zui.less @@ -26,4 +26,5 @@ // CONTROLS // -------------------------------------------------- -@import "controls/buttons.less"; \ No newline at end of file +@import "controls/buttons.less"; +@import "controls/progress-bars.less";