Skip to content

A
amazeui

Miykael_xxm / amazeui

通知 1
Star 0
Fork 0
A
amazeui

前往新版Gitcode，体验更适合开发者的 AI 搜索 >>

提交 b3417b86 编写于 作者: M Minwe
浏览文件
操作

update Form & Input Group

上级 11be6399
隐藏空白更改
内联 并排
Showing with 293 addition and 145 deletion
CHANGELOG.md
浏览文件 @ b3417b86
......@@ -13,6 +13,16 @@ __Button Group__：
- `CHANGED` 使用 `flexbox` 实现按钮等分。
__Form__：
- `CHANGED` 调整 `select` 样式。
__Input Group__：
- `NEW` 增加不同颜色样式；
- `IMPROVED` 处理不同尺寸垂直对齐问题。
### JS 插件
__Button__:
......
docs/css/form.md
浏览文件 @ b3417b86
......@@ -3,14 +3,26 @@
`<form>` 元素样式。
## 基本演示
## 基本使用
### 单选、复选框
`checkbox`、`radio` 类型的 `<input>` 与其他元素稍有区别：
- 块级显示时在容器上添加 `.am-checkbox`、`.am-radio` class；
- 行内显示时在容器上添加 `.am-checkbox-inline`、`.am-radio-inline` class。
### 下拉选框
**`<select>` 是一个比较奇葩的元素，长得丑还不让人给它打扮**。
单使用 CSS， 很难给 `select` 定义跨浏览器兼容的样式，保留浏览器默认样式可能是它最好的归宿（[Pure CSS 就是这么干的](http://purecss.io/forms/#stacked-form))。Amaze UI 中针对 Webkit 浏览器写了一点样式替换了默认的下上三角形。
### 演示
在容器上添加 `.am-form` class，容器里的子元素才会应用 Amaze UI 定义的样式。
- `checkbox`、`radio` 类型的 `<input>` 与其他元素稍有区别：
- 块级显示时在容器上添加 `.am-checkbox`、`.am-radio` class；
- 行内显示时在容器上添加 `.am-checkbox-inline`、`.am-radio-inline` class。
- `<select>` 是一个比较奇葩的元素，很难定义跨浏览器兼容的样式，保留浏览器默认样式可能是它最好的归宿（[Pure CSS 就是这么干的](http://purecss.io/forms/#stacked-form))。Amaze UI 中针对 Webkit 浏览器写了一点样式替换了默认的下上三角形，需要以 `.am-form-select` 作为容器，效果并不太好。
`````html
<form class="am-form">
......
docs/css/input-group.md
浏览文件 @ b3417b86
# Input group
------
# Input Group
-------------
Input group 基于 Form 组件和 Button 组件扩展，依赖这两个组件。
在容器上添加 `.am-input-group`，在标签文字上添加 `.am-input-group-label`，具体请查看示例代码。
## 基本演示
## 基本使用
### 输入框与标签
下面的代码中演示了结合 Icon 组件及添加文字的样式。
......@@ -55,47 +57,7 @@ Input group 基于 Form 组件和 Button 组件扩展，依赖这两个组件。
</div>
```
## 尺寸
在 `.am-input-group` 添加标明尺寸的 class 即可。
包含 `.am-input-group-lg`、`.am-input-group-sm`。
`````html
<div class="am-input-group am-input-group-lg">
<span class="am-input-group-label">@</span>
<input type="text" class="am-form-field" placeholder="Large Username">
</div>
<div class="am-input-group">
<span class="am-input-group-label">@</span>
<input type="text" class="am-form-field" placeholder="Default Username">
</div>
<div class="am-input-group am-input-group-sm">
<span class="am-input-group-label">@</span>
<input type="text" class="am-form-field" placeholder="Small Username">
</div>
`````
```html
<div class="am-input-group am-input-group-lg">
<span class="am-input-group-label">@</span>
<input type="text" class="am-form-field" placeholder="Username">
</div>
<div class="am-input-group">
<span class="am-input-group-label">@</span>
<input type="text" class="am-form-field" placeholder="Username">
</div>
<div class="am-input-group am-input-group-sm">
<span class="am-input-group-label">@</span>
<input type="text" class="am-form-field" placeholder="Username">
</div>
```
## 复选框与单选框
### 复选/单选框与输入框
将单选框与复选框放入 `.am-input-group-label` 内。
......@@ -119,7 +81,6 @@ Input group 基于 Form 组件和 Button 组件扩展，依赖这两个组件。
</div>
</div>
`````
```html
<div class="am-g">
<div class="am-col col-lg-6">
......@@ -141,7 +102,7 @@ Input group 基于 Form 组件和 Button 组件扩展，依赖这两个组件。
</div>
```
## 结合 Button
### 输入框结合 Button
需要用 `.am-input-group-btn` 包住按钮，而不是 `.am-input-group-label`。
......@@ -150,7 +111,7 @@ Input group 基于 Form 组件和 Button 组件扩展，依赖这两个组件。
<div class="am-col col-lg-6">
<div class="am-input-group">
<span class="am-input-group-btn">
<button class="am-btn am-btn-default" type="button">Go!</button>
<button class="am-btn am-btn-default" type="button"><span class="am-icon-search"></span> </button>
</span>
<input type="text" class="am-form-field">
</div>
......@@ -159,7 +120,7 @@ Input group 基于 Form 组件和 Button 组件扩展，依赖这两个组件。
<div class="am-input-group">
<input type="text" class="am-form-field">
<span class="am-input-group-btn">
<button class="am-btn am-btn-default" type="button">Search!</button>
<button class="am-btn am-btn-default" type="button">手气还行</button>
</span>
</div>
</div>
......@@ -170,7 +131,7 @@ Input group 基于 Form 组件和 Button 组件扩展，依赖这两个组件。
<div class="am-col col-lg-6">
<div class="am-input-group">
<span class="am-input-group-btn">
<button class="am-btn am-btn-default" type="button">Go!</button>
<button class="am-btn am-btn-default" type="button"><span class="am-icon-search"></span> </button>
</span>
<input type="text" class="am-form-field">
</div>
......@@ -179,9 +140,125 @@ Input group 基于 Form 组件和 Button 组件扩展，依赖这两个组件。
<div class="am-input-group">
<input type="text" class="am-form-field">
<span class="am-input-group-btn">
<button class="am-btn am-btn-default" type="button">Search!</button>
<button class="am-btn am-btn-default" type="button">手气还行</button>
</span>
</div>
</div>
</div>
```
## 样式变换
### 尺寸
在 `.am-input-group` 添加标明尺寸的 class 即可。
包含 `.am-input-group-lg`、`.am-input-group-sm`。
`````html
<div class="am-input-group am-input-group-lg">
<span class="am-input-group-label">@</span>
<input type="text" class="am-form-field" placeholder="Large Username">
</div>
<div class="am-input-group">
<span class="am-input-group-label">@</span>
<input type="text" class="am-form-field" placeholder="Default Username">
</div>
<div class="am-input-group am-input-group-sm">
<span class="am-input-group-label">@</span>
<input type="text" class="am-form-field" placeholder="Small Username">
</div>
`````
```html
<div class="am-input-group am-input-group-lg">
<span class="am-input-group-label">@</span>
<input type="text" class="am-form-field" placeholder="Username">
</div>
<div class="am-input-group">
<span class="am-input-group-label">@</span>
<input type="text" class="am-form-field" placeholder="Username">
</div>
<div class="am-input-group am-input-group-sm">
<span class="am-input-group-label">@</span>
<input type="text" class="am-form-field" placeholder="Username">
</div>
```
### 颜色
`````html
<div class="am-input-group am-input-group-primary">
<span class="am-input-group-label"><i class="am-icon-user"></i></span>
<input type="text" class="am-form-field" placeholder="你的大名">
</div>
<div class="am-input-group am-input-group-seconday">
<span class="am-input-group-label"><i class="am-icon-credit-card"></i></span>
<input type="text" class="am-form-field" placeholder="你的银行卡号">
</div>
<div class="am-input-group am-input-group-success">
<span class="am-input-group-label"><i class="am-icon-money"></i></span>
<input type="text" class="am-form-field" placeholder="你的银行卡密码">
</div>
<div class="am-input-group am-input-group-warning">
<span class="am-input-group-label"><i class="am-icon-bank"></i></span>
<input type="text" class="am-form-field" placeholder="开户行">
</div>
<div class="am-input-group am-input-group-danger">
<span class="am-input-group-label"><i class="am-icon-location-arrow"></i></span>
<input type="text" class="am-form-field" placeholder="你所在城市">
</div>
`````
```html
<div class="am-input-group am-input-group-primary">
<span class="am-input-group-label"><i class="am-icon-user"></i></span>
<input type="text" class="am-form-field" placeholder="你的大名">
</div>
<div class="am-input-group am-input-group-seconday">
...
</div>
<div class="am-input-group am-input-group-success">
...
</div>
<div class="am-input-group am-input-group-warning">
...
</div>
<div class="am-input-group am-input-group-danger">
...
</div>
```
使用按钮时除了在容器上设置颜色 class 外，还需要设置按钮的样式。
`````html
<div class="am-g">
<div class="am-col col-lg-6">
<div class="am-input-group am-input-group-danger">
<span class="am-input-group-label">
<input type="checkbox">
</span>
<input type="text" class="am-form-field">
</div>
</div>
<div class="am-col col-lg-6">
<div class="am-input-group am-input-group-primary">
<span class="am-input-group-btn">
<button class="am-btn am-btn-primary" type="button"><span class="am-icon-search"></span></button>
</span>
<input type="text" class="am-form-field">
</div>
</div>
</div>
```
\ No newline at end of file
`````
less/form.less
浏览文件 @ b3417b86
// 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;
......
less/input-group.less
浏览文件 @ b3417b86
......@@ -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
less/mixins.less
浏览文件 @ b3417b86
......@@ -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}");
}
}
......
less/variables.less
浏览文件 @ b3417b86
......@@ -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
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或