-
+
提供工作或动作的实时反馈,只用简单且灵活的进度条。
进度条使用了CSS3的transition和animation属性来完成一些效果。这些特性在Internet Explorer 9或以下版本中、Firefox的老版本中没有被支持。Opera 12不支持znimation属性。
diff --git a/examples/textbox.html b/examples/textbox.html
new file mode 100644
index 0000000000000000000000000000000000000000..4eedd5955fe05318a7cc5b352d24721328ab98b4
--- /dev/null
+++ b/examples/textbox.html
@@ -0,0 +1,135 @@
+
+
+
+
+
+
+ ZUI
+
+
+
+
+
+
+
+
+
+ 类型
+ 基本类型
+
+
+
+ 状态
+
+
+ 变化
+ 高度
+
+
+ 宽度
+
+
+
+
+
diff --git a/src/less/basic/mixins.less b/src/less/basic/mixins.less
index 6e0e399afb7974d089241d62286cc9866dcba144..a452b2aadd981d5178fdde831ae6a56217a283d9 100644
--- a/src/less/basic/mixins.less
+++ b/src/less/basic/mixins.less
@@ -703,12 +703,11 @@
.form-control-validation(@text-color: #555; @border-color: #ccc; @background-color: #f5f5f5) {
// Color the label and help text
- .help-block,
- .control-label {
- color: @text-color;
- }
+ .help-block, .control-label { color: @text-color; }
+
// Set the border and box shadow on specific inputs to match
- .form-control {
+ .form-control
+ {
border-color: @border-color;
.box-shadow(inset 0 1px 1px rgba(0,0,0,.075)); // Redeclare so transitions work
&:focus {
@@ -718,11 +717,7 @@
}
}
// Set validation states also for addons
- .input-group-addon {
- color: @text-color;
- border-color: @border-color;
- background-color: @background-color;
- }
+ .input-group-addon { color: @text-color; border-color: @border-color; background-color: @background-color; }
}
// Form control focus state
diff --git a/src/less/basic/variables.less b/src/less/basic/variables.less
index a1b5c9e97c1ed726b23463853e31b00e3372d962..99cc4fe5b29700430560d0e85cdf986d3b0c1d45 100644
--- a/src/less/basic/variables.less
+++ b/src/less/basic/variables.less
@@ -19,6 +19,7 @@
@blue: #39b3d7;
@brown: #81511c;
@purple: #8957a1;
+@gray: #808080;
// Grays
@gray-darker: @charcoal;
@@ -237,3 +238,39 @@
@label-color: #fff;
@label-link-hover-color: #fff;
+// Input
+@input-bg: #fff;
+@input-bg-disabled: @gray-lighter;
+
+@input-color: @gray;
+@input-border: #ccc;
+@input-border-radius: @border-radius-base;
+@input-border-focus: #66afe9;
+
+@input-color-placeholder: @gray;
+
+@input-height-base: (@line-height-computed + (@padding-base-vertical * 2) + 2);
+@input-height-large: (floor(@font-size-large * @line-height-large) + (@padding-large-vertical * 2) + 2);
+@input-height-small: (floor(@font-size-small * @line-height-small) + (@padding-small-vertical * 2) + 2);
+
+@legend-color: @gray-dark;
+@legend-border-color: #e5e5e5;
+
+// Form states and alerts
+// -------------------------
+
+@state-warning-text: @color-warning;
+@state-warning-bg: #fcf8e3;
+@state-warning-border: darken(spin(@state-warning-bg, -10), 3%);
+
+@state-danger-text: @color-danger;
+@state-danger-bg: #f2dede;
+@state-danger-border: darken(spin(@state-danger-bg, -10), 3%);
+
+@state-success-text: @color-success;
+@state-success-bg: #dff0d8;
+@state-success-border: darken(spin(@state-success-bg, -10), 5%);
+
+@state-info-text: #3a87ad;
+@state-info-bg: #d9edf7;
+@state-info-border: darken(spin(@state-info-bg, -10), 7%);
diff --git a/src/less/controls/textbox.less b/src/less/controls/textbox.less
new file mode 100644
index 0000000000000000000000000000000000000000..3c159f305f19ecc121412fff69c21646c552e090
--- /dev/null
+++ b/src/less/controls/textbox.less
@@ -0,0 +1,176 @@
+.form-control {
+ display: block;
+ width: 100%;
+ height: @input-height-base; // Make inputs at least the height of their button counterpart (base line-height + padding + border)
+ padding: @padding-base-vertical @padding-base-horizontal;
+ font-size: @font-size-base;
+ line-height: @line-height-base;
+ color: @input-color;
+ vertical-align: middle;
+ background-color: @input-bg;
+ border: 1px solid @input-border;
+ border-radius: @input-border-radius;
+ .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.
+ .form-control-focus();
+
+ // Disabled and read-only inputs
+ // Note: HTML5 says that controls 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 height for `textarea`s
+ textarea& {
+ height: auto;
+ }
+}
+
+.form-focus { border-color: rgba(82, 168, 236, 0.8); box-shadow: 0 0 8px rgba(82, 168, 236, 0.6); outline: 0 none; }
+
+// Normalize non-controls
+//
+// Restyle and baseline non-control form elements.
+
+// Normalize form controls
+
+// Override content-box in Normalize (* isn't specific enough)
+input[type="search"] { .box-sizing(border-box); }
+
+// Position radios and checkboxes better
+input[type="radio"],
+input[type="checkbox"] {
+ margin: 4px 0 0;
+ margin-top: 1px \9; /* IE8-9 */
+ line-height: normal;
+}
+
+// Set the height of select and file controls to match text inputs
+input[type="file"] { display: block; }
+
+// Make multiple select elements height not fixed
+select[multiple], select[size] { height: auto; }
+
+// Fix optgroup Firefox bug per https://github.com/twbs/bootstrap/issues/7611
+select optgroup { font-size: inherit; font-style: inherit; font-family: inherit; }
+
+// Focus for select, file, radio, and checkbox
+input[type="file"]:focus, input[type="radio"]:focus, input[type="checkbox"]:focus { .tab-focus(); }
+
+// Fix for Chrome number input
+// Setting certain font-sizes causes the `I` bar to appear on hover of the bottom increment button.
+// See https://github.com/twbs/bootstrap/issues/8350 for more.
+input[type="number"] { &::-webkit-outer-spin-button, &::-webkit-inner-spin-button { height: auto; } }
+
+
+// Placeholder
+//
+// Placeholder text gets special styles because when browsers invalidate entire
+// lines if it doesn't understand a selector/
+.form-control { .placeholder(); }
+
+
+// Checkboxes and radios
+//
+// Indent the labels to position radios/checkboxes as hanging controls.
+
+.radio, .checkbox {
+ display: block;
+ min-height: @line-height-computed; // clear the floating input if there is no label text
+ margin-top: 10px;
+ margin-bottom: 10px;
+ padding-left: 20px;
+ vertical-align: middle;
+ label {
+ display: inline;
+ margin-bottom: 0;
+ font-weight: normal;
+ cursor: pointer;
+ }
+}
+.radio input[type="radio"],
+.radio-inline input[type="radio"],
+.checkbox input[type="checkbox"],
+.checkbox-inline input[type="checkbox"] {
+ float: left;
+ margin-left: -20px;
+}
+.radio + .radio,
+.checkbox + .checkbox {
+ margin-top: -5px; // Move up sibling radios or checkboxes for tighter spacing
+}
+
+// Radios and checkboxes on same line
+.radio-inline,
+.checkbox-inline {
+ display: inline-block;
+ padding-left: 20px;
+ margin-bottom: 0;
+ vertical-align: middle;
+ font-weight: normal;
+ cursor: pointer;
+}
+.radio-inline + .radio-inline,
+.checkbox-inline + .checkbox-inline {
+ margin-top: 0;
+ margin-left: 10px; // space out consecutive inline controls
+}
+
+// Apply same disabled cursor tweak as for inputs
+//
+// Note: Neither radios nor checkboxes can be readonly.
+input[type="radio"],
+input[type="checkbox"],
+.radio,
+.radio-inline,
+.checkbox,
+.checkbox-inline {
+ &[disabled],
+ fieldset[disabled] & {
+ cursor: not-allowed;
+ }
+}
+
+// Form control sizing
+.input-sm { .input-size(@input-height-small; @padding-small-vertical; @padding-small-horizontal; @font-size-small; @line-height-small; @border-radius-small); }
+.input-lg { .input-size(@input-height-large; @padding-large-vertical; @padding-large-horizontal; @font-size-large; @line-height-large; @border-radius-large); }
+
+
+// Form control feedback states
+// Apply contextual and semantic states to individual form controls.
+.has-warning { .form-control-validation(@state-warning-text; @state-warning-text; @state-warning-bg); }
+.has-error { .form-control-validation(@state-danger-text; @state-danger-text; @state-danger-bg); }
+.has-success { .form-control-validation(@state-success-text; @state-success-text; @state-success-bg); }
+
+
+// Static form control text
+//
+// Apply class to a `p` element to make any string of text align with labels in
+// a horizontal form layout.
+
+.form-control-static
+{
+ margin-bottom: 0; // Remove default margin from `p`
+ padding-top: (@padding-base-vertical + 1);
+}
+
+
+// Help text
+//
+// Apply to any element you wish to create light text for placement immediately
+// below a form control. Use for general help, formatting, or instructional text.
+
+.help-block
+{
+ display: block; // account for any element using help-block
+ margin-top: 5px;
+ margin-bottom: 10px;
+ color: lighten(@text-color, 25%); // lighten the text some for contrast
+}
diff --git a/src/less/zui.less b/src/less/zui.less
index 05264f9f0801e18661adcff3fbbc866f82db01da..2c0237c5e925f4fee8691811009364209ae59f30 100644
--- a/src/less/zui.less
+++ b/src/less/zui.less
@@ -32,3 +32,4 @@
@import "controls/divider.less";
@import "controls/buttons.less";
@import "controls/labels.less";
+@import "controls/textbox.less";