From b3417b86f693b9f88e3089abd95f83e4e630ff85 Mon Sep 17 00:00:00 2001 From: Minwe Date: Tue, 23 Sep 2014 18:20:08 +0800 Subject: [PATCH] update Form & Input Group --- CHANGELOG.md | 10 +++ docs/css/form.md | 22 +++-- docs/css/input-group.md | 179 ++++++++++++++++++++++++++++------------ less/form.less | 59 +++++-------- less/input-group.less | 108 +++++++++++++++++------- less/mixins.less | 6 +- less/variables.less | 54 ++++++++---- 7 files changed, 293 insertions(+), 145 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index a394df1..051eb27 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -13,6 +13,16 @@ __Button Group__： - `CHANGED` 使用 `flexbox` 实现按钮等分。 +__Form__： + +- `CHANGED` 调整 `select` 样式。 + +__Input Group__： + +- `NEW` 增加不同颜色样式； +- `IMPROVED` 处理不同尺寸垂直对齐问题。 + + ### JS 插件 __Button__: diff --git a/docs/css/form.md b/docs/css/form.md index cf2e018..1f895ae 100644 --- a/docs/css/form.md +++ b/docs/css/form.md @@ -3,14 +3,26 @@ `
` 元素样式。 -## 基本演示 +## 基本使用 + + +### 单选、复选框 + +`checkbox`、`radio` 类型的 `` 与其他元素稍有区别： + +- 块级显示时在容器上添加 `.am-checkbox`、`.am-radio` class； +- 行内显示时在容器上添加 `.am-checkbox-inline`、`.am-radio-inline` class。 + +### 下拉选框 + +**`` 与其他元素稍有区别： - - 块级显示时在容器上添加 `.am-checkbox`、`.am-radio` class； - - 行内显示时在容器上添加 `.am-checkbox-inline`、`.am-radio-inline` class。 -- ` - - -
- @ - -
- -
- @ - -
-````` -```html -
- @ - -
- -
- @ - -
- -
- @ - -
-``` - - -## 复选框与单选框 +### 复选/单选框与输入框 将单选框与复选框放入 `.am-input-group-label` 内。 @@ -119,7 +81,6 @@ Input group 基于 Form 组件和 Button 组件扩展，依赖这两个组件。 ````` - ```html
@@ -141,7 +102,7 @@ Input group 基于 Form 组件和 Button 组件扩展，依赖这两个组件。
``` -## 结合 Button +### 输入框结合 Button 需要用 `.am-input-group-btn` 包住按钮，而不是 `.am-input-group-label`。 @@ -150,7 +111,7 @@ Input group 基于 Form 组件和 Button 组件扩展，依赖这两个组件。
- +
@@ -159,7 +120,7 @@ Input group 基于 Form 组件和 Button 组件扩展，依赖这两个组件。
- +
@@ -170,7 +131,7 @@ Input group 基于 Form 组件和 Button 组件扩展，依赖这两个组件。
- +
@@ -179,9 +140,125 @@ Input group 基于 Form 组件和 Button 组件扩展，依赖这两个组件。
- + + +
+
+
+``` + +## 样式变换 + +### 尺寸 + +在 `.am-input-group` 添加标明尺寸的 class 即可。 + +包含 `.am-input-group-lg`、`.am-input-group-sm`。 + +`````html +
+ @ + +
+ +
+ @ + +
+ +
+ @ + +
+````` +```html +
+ @ + +
+ +
+ @ + +
+ +
+ @ + +
+``` + +### 颜色 + +`````html +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+````` +```html +
+ + +
+ +
+ ... +
+ +
+ ... +
+ +
+ ... +
+ +
+ ... +
+``` + +使用按钮时除了在容器上设置颜色 class 外，还需要设置按钮的样式。 + +`````html +
+
+
+ + + + +
+
+
+
+ + +
-``` \ No newline at end of file +````` + diff --git a/less/form.less b/less/form.less index fc6d2c9..dc797e7 100644 --- a/less/form.less +++ b/less/form.less @@ -1,10 +1,13 @@ // Name: Forms // Description: Define style for form elements // -// Modifiers: `.pre-scrollable` +// Modifiers: `.` // // ========================================================================== +/* ======================================================================== + Component: Form + ========================================================================== */ /* Normalize non-controls */ @@ -57,7 +60,6 @@ input[type="file"] { display: block; } - // Make multiple select elements height not fixed select[multiple], @@ -95,6 +97,7 @@ input[type="number"] { } } + // Adjust output element output { @@ -107,7 +110,6 @@ output { } - // Common form controls .am-form select, @@ -138,8 +140,7 @@ output { background-image: none; 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"); + .transition(~"border-color .15s ease-in-out, box-shadow .15s ease-in-out"); // `:focus` state &:focus { @@ -158,39 +159,23 @@ output { } } + .am-form { // Reset height for block field textarea, select[multiple], - select[size] { + select[size] { height: auto; } -} - -.am-form-select { - position: relative; - select { - // height: @form-select-height; - -webkit-appearance: none; + select { // via Foundation + -webkit-appearance: none !important; + -webkit-border-radius: @global-border-radius; + background: #fff url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgeD0iMTJweCIgeT0iMHB4IiB3aWR0aD0iMjRweCIgaGVpZ2h0PSIzcHgiIHZpZXdCb3g9IjAgMCA2IDMiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDYgMyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PHBvbHlnb24gcG9pbnRzPSI1Ljk5MiwwIDIuOTkyLDMgLTAuMDA4LDAgIi8+PC9zdmc+') no-repeat 100% center; - &.am-input-lg { - //height: @form-select-height-lg; + &[multiple="multiple"] { + background-image: none; } - &.am-input-sm { - //height: @form-select-height-sm; - } - } - - //&:not(*:root) - - &:after { - // only for webkit browsers - position: absolute; - right: 5px; - margin-top: -24px; - content: ''; - .caret-down(6px, @gray-light); } } @@ -240,12 +225,12 @@ output { margin-left: -20px; outline: none; } + .am-radio + .am-radio, .am-checkbox + .am-checkbox { margin-top: -5px; // Move up sibling radios or checkboxes for tighter spacing } - // Radios and checkboxes inline .am-radio-inline, @@ -264,7 +249,6 @@ output { margin-left: 10px; // space out consecutive inline controls } - // Apply same disabled cursor tweak as for inputs // // Note: Neither radios nor checkboxes can be readonly. @@ -281,24 +265,24 @@ input[type="checkbox"], } - /* Form field feedback states */ // Warning .am-form-warning { .form-field-validation(@state-warning-text; @state-warning-text); } + // Error .am-form-error { .form-field-validation(@state-danger-text; @state-danger-text); } + // Success .am-form-success { .form-field-validation(@state-success-text; @state-success-text); } - /* Horizontal forms */ .am-form-horizontal { @@ -324,11 +308,9 @@ input[type="checkbox"], } - // Inline form elements .am-form-inline { - @media @medium-up { .am-form-group { display: inline-block; @@ -365,7 +347,6 @@ input[type="checkbox"], // Remove default margin on radios/checkboxes that were used for stacking, and // then undo the floating of radios and checkboxes to match (which also avoids - .am-radio, .am-checkbox { display: inline-block; @@ -374,6 +355,7 @@ input[type="checkbox"], padding-left: 0; vertical-align: middle; } + .am-radio input[type="radio"], .am-checkbox input[type="checkbox"] { float: none; @@ -381,7 +363,6 @@ input[type="checkbox"], } // Validation states - .am-form-feedback .am-form-field-feedback { top: 0; } @@ -389,7 +370,6 @@ input[type="checkbox"], } - /* Form field size */ .am-input-sm { @@ -401,7 +381,6 @@ input[type="checkbox"], } - /* Form field feedback states */ .am-form-icon { @@ -414,7 +393,7 @@ input[type="checkbox"], [class*='am-icon-'] { position: absolute; left: @input-padding; - top: 50%; + top: 50%; display: block; margin-top: -(@input-padding + 0.15); z-index: 2; diff --git a/less/input-group.less b/less/input-group.less index 568301b..584a878 100644 --- a/less/input-group.less +++ b/less/input-group.less @@ -2,8 +2,17 @@ // Description: Define style for input group // // Component: `am-input-group` + +// Sub-objects: `.am-input-group-label` +// `.am-input-group-btn` // -// Modifiers: `` +// Modifiers: `.am-input-group-lg` +// `.am-input-group-sm` +// `.am-input-group-primary` +// `.am-input-group-secondary` +// `.am-input-group-success` +// `.am-input-group-warning` +// `.am-input-group-danger` // // Uses: Form // Button @@ -12,7 +21,6 @@ // // ======================================================================== - /* ======================================================================== Component: Input group ========================================================================== */ @@ -39,22 +47,6 @@ } -// Sizing options -// ======================================================================== - -.am-input-group-lg > .am-form-field, -.am-input-group-lg > .am-input-group-label, -.am-input-group-lg > .am-input-group-btn > .am-btn { - .am-input-lg(); -} - -.am-input-group-sm > .am-form-field, -.am-input-group-sm > .am-input-group-label, -.am-input-group-sm > .am-input-group-btn > .am-btn { - .am-input-sm(); -} - - // Display as table-cell // ======================================================================== @@ -92,17 +84,6 @@ border: 1px solid @input-group-label-border-color; border-radius: @global-border-radius; - // Sizing - &.am-input-sm { - //padding: @padding-small-vertical @padding-small-horizontal; - font-size: @form-font-size-sm; - } - &.am-input-lg { - //padding: @padding-large-vertical @padding-large-horizontal; - //font-size: @font-size-large; - font-size: @form-font-size-lg; - } - // Nuke default margins from checkboxes and radios to vertically center within. input[type="radio"], input[type="checkbox"] { @@ -110,7 +91,6 @@ } } - // Reset rounded corners // ======================================================================== @@ -142,7 +122,6 @@ border-left: 0; } - // Button input groups // ======================================================================== @@ -173,9 +152,10 @@ &:first-child { > .am-btn, > .am-btn-group { - margin-right: -1px; + margin-right: -2px; } } + &:last-child { > .am-btn, > .am-btn-group { @@ -183,3 +163,67 @@ } } } + + +// Modifiers - sizing +// ======================================================================== + +.am-input-group-lg > .am-form-field, +.am-input-group-lg > .am-input-group-label, +.am-input-group-lg > .am-input-group-btn > .am-btn { + .am-input-lg(); + @padding-v: unit(ceil(0.625 * 10 * @form-font-size-lg)); + @padding-h: unit(10 * @form-font-size-lg); + + padding: ~"@{padding-v}px" ~"@{padding-h}px"!important; +} + +.am-input-group-sm > .am-form-field, +.am-input-group-sm > .am-input-group-label, +.am-input-group-sm > .am-input-group-btn > .am-btn { + .am-input-sm(); + + @padding-v: unit(ceil(0.625 * 10 * @form-font-size-sm)); + @padding-h: unit(10 * @form-font-size-sm); + + padding: ~"@{padding-v}px" ~"@{padding-h}px"!important; +} + + +// Modifiers - colors +// ======================================================================== + +.am-input-group-primary { + .input-group-color-variant(); +} + +.am-input-group-seconday { + .input-group-color-variant(@btn-secondary-bg, @btn-secondary-color, @btn-secondary-border); +} + +.am-input-group-success { + .input-group-color-variant(@btn-success-bg, @btn-success-color, @btn-success-border); +} + +.am-input-group-warning { + .input-group-color-variant(@btn-warning-bg, @btn-warning-color, @btn-warning-border); +} + +.am-input-group-danger { + .input-group-color-variant(@btn-danger-bg, @btn-danger-color, @btn-danger-border); +} + +.input-group-color-variant(@bg: @btn-primary-bg, @color: @btn-primary-color, @border: @btn-primary-border) { + .am-input-group-label { + background: @bg; + color: @color; + } + + .am-input-group-label, + .am-input-group-btn > .am-btn, + .am-form-field { + border-color: @border; + } +} + +// TODO: v2 中使用 flexbox \ No newline at end of file diff --git a/less/mixins.less b/less/mixins.less index 5c6f44b..41f80eb 100644 --- a/less/mixins.less +++ b/less/mixins.less @@ -827,13 +827,13 @@ // Form element focus state .form-field-focus(@color: @input-border-focus) { - @color-rgba: rgba(red(@color), green(@color), blue(@color), .6); + @color-rgba: rgba(red(@color), green(@color), blue(@color), .3); &:focus { //background-color: rgba(red(@color), green(@color), blue(@color), .05); - background: @input-focus-bg; + background-color: @input-focus-bg; border-color: @color; outline: 0; - .box-shadow(~"inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px @{color-rgba}"); + .box-shadow(~"inset 0 1px 1px rgba(0,0,0,.075), 0 0 5px @{color-rgba}"); } } diff --git a/less/variables.less b/less/variables.less index 9b6e41f..8c9a560 100644 --- a/less/variables.less +++ b/less/variables.less @@ -377,7 +377,7 @@ @input-color: @gray; @input-border: #ccc; @input-border-radius: @global-border-radius; -@input-border-focus: @global-primary; +@input-border-focus: @global-secondary; @input-color-placeholder: @gray-light; @@ -1286,6 +1286,10 @@ // ======================================================================== +// Alert +// ======================================================================== + + // Dropdown // ======================================================================== @@ -1310,20 +1314,9 @@ @caret-width-base: 6px; - -// Off-canvas +// Modal // ======================================================================== -@offcanvas-z-index: (@global-z-index + 30); -@offcanvas-dimmer-background: rgba(0,0,0,0.15); -@offcanvas-bar-width: 270px; -@offcanvas-bar-background: #333; - - - -// plugin - modal -// ======================================================================= - //** Padding applied to the modal body @modal-inner-padding: 20px; @@ -1350,4 +1343,37 @@ @modal-lg: 900px; @modal-md: 600px; -@modal-sm: 300px; \ No newline at end of file +@modal-sm: 300px; + + +// Off-canvas +// ======================================================================== + +@offcanvas-z-index: (@global-z-index + 30); +@offcanvas-dimmer-background: rgba(0,0,0,0.15); +@offcanvas-bar-width: 270px; +@offcanvas-bar-background: #333; + + +// Popover +// ======================================================================= + + +// Progress +// ======================================================================== + + +// PureView +// ======================================================================== + + +// Share +// ======================================================================== + + +// Tabs +// ======================================================================== + + +// ui.component.less +// ======================================================================== \ No newline at end of file -- GitLab