From 93d460a6ceacd445ac26dba689eec948f6e98c5a Mon Sep 17 00:00:00 2001 From: azhi Date: Fri, 1 Nov 2013 10:52:28 +0800 Subject: [PATCH] * finish task#1720. --- controls.html | 119 ++++++++++++++++++++++ examples/labels.html | 2 +- examples/progress.html | 2 +- examples/textbox.html | 135 +++++++++++++++++++++++++ src/less/basic/mixins.less | 15 +-- src/less/basic/variables.less | 37 +++++++ src/less/controls/textbox.less | 176 +++++++++++++++++++++++++++++++++ src/less/zui.less | 1 + 8 files changed, 475 insertions(+), 12 deletions(-) create mode 100644 examples/textbox.html create mode 100644 src/less/controls/textbox.less diff --git a/controls.html b/controls.html index df0a1934..7b37fa39 100644 --- a/controls.html +++ b/controls.html @@ -395,3 +395,122 @@ base_url: "./" +
+

文本框

+ +

类型

+

基本类型

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
文本框描述
input type='email'
input type='text'
input type='checkbox'
input type='radio''
textarea row='3'
+ + select
+ + +

状态

+ + + + + + + + + + + + + + + + + + + + + + + + + +
文本框描述

禁用：input type='text' diabled

焦点：input type='text' class='form-focus'
+
+ +

+ 		has-warning
+
+ +

+ 		has-error
+
+ +

+ 		has-success
+ +

变化

+

高度

+ + + + + + + + + + + + + + + + + +
文本框描述
.input-lg
Default iinput
.input-sm
+ +

宽度

+
+
+ +
+
+ +
+
+ +
+
+
diff --git a/examples/labels.html b/examples/labels.html index 5fbd17e4..8ab8182b 100644 --- a/examples/labels.html +++ b/examples/labels.html @@ -12,7 +12,7 @@
-

标签

+

标签

类型

基本类型

diff --git a/examples/progress.html b/examples/progress.html index 63bcc138..5ea7b4c6 100644 --- a/examples/progress.html +++ b/examples/progress.html @@ -8,7 +8,7 @@
-

进度条

+

进度条

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

进度条使用了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 00000000..4eedd595 --- /dev/null +++ b/examples/textbox.html @@ -0,0 +1,135 @@ + + + + + + + ZUI + + + + + + +
+

文本框

+ +

类型

+

基本类型

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
文本框描述
input type='email'
input type='text'
input type='checkbox'
input type='radio''
textarea row='3'
+ + select
+ + +

状态

+ + + + + + + + + + + + + + + + + + + + + + + + + +
文本框描述

禁用：input type='text' diabled

焦点：input type='text' class='form-focus'
+
+ +

+ 		has-warning
+
+ +

+ 		has-error
+
+ +

+ 		has-success
+ +

变化

+

高度

+ + + + + + + + + + + + + + + + + +
文本框描述
.input-lg
Default iinput
.input-sm
+ +

宽度

+
+
+ +
+
+ +
+
+ +
+
+
+ + + diff --git a/src/less/basic/mixins.less b/src/less/basic/mixins.less index 6e0e399a..a452b2aa 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 a1b5c9e9..99cc4fe5 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 00000000..3c159f30 --- /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 05264f9f..2c0237c5 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"; -- GitLab