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__： ...@@ -13,6 +13,16 @@ __Button Group__：
- `CHANGED` 使用 `flexbox` 实现按钮等分。 - `CHANGED` 使用 `flexbox` 实现按钮等分。
__Form__：
- `CHANGED` 调整 `select` 样式。
__Input Group__：
- `NEW` 增加不同颜色样式；
- `IMPROVED` 处理不同尺寸垂直对齐问题。
### JS 插件 ### JS 插件
__Button__: __Button__:
......
docs/css/form.md
浏览文件 @ b3417b86
...@@ -3,14 +3,26 @@ ...@@ -3,14 +3,26 @@
`<form>` 元素样式。 `<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 定义的样式。 在容器上添加 `.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 `````html
<form class="am-form"> <form class="am-form">
......
docs/css/input-group.md
浏览文件 @ b3417b86
# Input group # Input Group
------ -------------
Input group 基于 Form 组件和 Button 组件扩展，依赖这两个组件。 Input group 基于 Form 组件和 Button 组件扩展，依赖这两个组件。
在容器上添加 `.am-input-group`，在标签文字上添加 `.am-input-group-label`，具体请查看示例代码。 在容器上添加 `.am-input-group`，在标签文字上添加 `.am-input-group-label`，具体请查看示例代码。
## 基本演示 ## 基本使用
### 输入框与标签
下面的代码中演示了结合 Icon 组件及添加文字的样式。 下面的代码中演示了结合 Icon 组件及添加文字的样式。
...@@ -55,47 +57,7 @@ Input group 基于 Form 组件和 Button 组件扩展，依赖这两个组件。 ...@@ -55,47 +57,7 @@ Input group 基于 Form 组件和 Button 组件扩展，依赖这两个组件。
</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>
```
## 复选框与单选框
将单选框与复选框放入 `.am-input-group-label` 内。 将单选框与复选框放入 `.am-input-group-label` 内。
...@@ -119,7 +81,6 @@ Input group 基于 Form 组件和 Button 组件扩展，依赖这两个组件。 ...@@ -119,7 +81,6 @@ Input group 基于 Form 组件和 Button 组件扩展，依赖这两个组件。
</div> </div>
</div> </div>
````` `````
```html ```html
<div class="am-g"> <div class="am-g">
<div class="am-col col-lg-6"> <div class="am-col col-lg-6">
...@@ -141,7 +102,7 @@ Input group 基于 Form 组件和 Button 组件扩展，依赖这两个组件。 ...@@ -141,7 +102,7 @@ Input group 基于 Form 组件和 Button 组件扩展，依赖这两个组件。
</div> </div>
``` ```
## 结合 Button ### 输入框结合 Button
需要用 `.am-input-group-btn` 包住按钮，而不是 `.am-input-group-label`。 需要用 `.am-input-group-btn` 包住按钮，而不是 `.am-input-group-label`。
...@@ -150,7 +111,7 @@ Input group 基于 Form 组件和 Button 组件扩展，依赖这两个组件。 ...@@ -150,7 +111,7 @@ Input group 基于 Form 组件和 Button 组件扩展，依赖这两个组件。
<div class="am-col col-lg-6"> <div class="am-col col-lg-6">
<div class="am-input-group"> <div class="am-input-group">
<span class="am-input-group-btn"> <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> </span>
<input type="text" class="am-form-field"> <input type="text" class="am-form-field">
</div> </div>
...@@ -159,7 +120,7 @@ Input group 基于 Form 组件和 Button 组件扩展，依赖这两个组件。 ...@@ -159,7 +120,7 @@ Input group 基于 Form 组件和 Button 组件扩展，依赖这两个组件。
<div class="am-input-group"> <div class="am-input-group">
<input type="text" class="am-form-field"> <input type="text" class="am-form-field">
<span class="am-input-group-btn"> <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> </span>
</div> </div>
</div> </div>
...@@ -170,7 +131,7 @@ Input group 基于 Form 组件和 Button 组件扩展，依赖这两个组件。 ...@@ -170,7 +131,7 @@ Input group 基于 Form 组件和 Button 组件扩展，依赖这两个组件。
<div class="am-col col-lg-6"> <div class="am-col col-lg-6">
<div class="am-input-group"> <div class="am-input-group">
<span class="am-input-group-btn"> <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> </span>
<input type="text" class="am-form-field"> <input type="text" class="am-form-field">
</div> </div>
...@@ -179,9 +140,125 @@ Input group 基于 Form 组件和 Button 组件扩展，依赖这两个组件。 ...@@ -179,9 +140,125 @@ Input group 基于 Form 组件和 Button 组件扩展，依赖这两个组件。
<div class="am-input-group"> <div class="am-input-group">
<input type="text" class="am-form-field"> <input type="text" class="am-form-field">
<span class="am-input-group-btn"> <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> </span>
<input type="text" class="am-form-field">
</div> </div>
</div> </div>
</div> </div>
``` `````
\ No newline at end of file
less/form.less
浏览文件 @ b3417b86
// Name: Forms // Name: Forms
// Description: Define style for form elements // Description: Define style for form elements
// //
// Modifiers: `.pre-scrollable` // Modifiers: `.`
// //
// ========================================================================== // ==========================================================================
/* ========================================================================
Component: Form
========================================================================== */
/* Normalize non-controls */ /* Normalize non-controls */
...@@ -57,7 +60,6 @@ input[type="file"] { ...@@ -57,7 +60,6 @@ input[type="file"] {
display: block; display: block;
} }
// Make multiple select elements height not fixed // Make multiple select elements height not fixed
select[multiple], select[multiple],
...@@ -95,6 +97,7 @@ input[type="number"] { ...@@ -95,6 +97,7 @@ input[type="number"] {
} }
} }
// Adjust output element // Adjust output element
output { output {
...@@ -107,7 +110,6 @@ output { ...@@ -107,7 +110,6 @@ output {
} }
// Common form controls // Common form controls
.am-form select, .am-form select,
...@@ -138,8 +140,7 @@ output { ...@@ -138,8 +140,7 @@ output {
background-image: none; background-image: none;
border: 1px solid @input-border; border: 1px solid @input-border;
border-radius: @input-border-radius; border-radius: @input-border-radius;
//.box-shadow(inset 0 1px 1px rgba(0,0,0,.075)); .transition(~"border-color .15s ease-in-out, box-shadow .15s ease-in-out");
.transition(~"border-color ease-in-out .15s, box-shadow ease-in-out .15s");
// `:focus` state // `:focus` state
&:focus { &:focus {
...@@ -158,39 +159,23 @@ output { ...@@ -158,39 +159,23 @@ output {
} }
} }
.am-form { .am-form {
// Reset height for block field // Reset height for block field
textarea, textarea,
select[multiple], select[multiple],
select[size] { select[size] {
height: auto; height: auto;
} }
}
.am-form-select {
position: relative;
select { select { // via Foundation
// height: @form-select-height; -webkit-appearance: none !important;
-webkit-appearance: none; -webkit-border-radius: @global-border-radius;
background: #fff url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgeD0iMTJweCIgeT0iMHB4IiB3aWR0aD0iMjRweCIgaGVpZ2h0PSIzcHgiIHZpZXdCb3g9IjAgMCA2IDMiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDYgMyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PHBvbHlnb24gcG9pbnRzPSI1Ljk5MiwwIDIuOTkyLDMgLTAuMDA4LDAgIi8+PC9zdmc+') no-repeat 100% center;
&.am-input-lg { &[multiple="multiple"] {
//height: @form-select-height-lg; 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 { ...@@ -240,12 +225,12 @@ output {
margin-left: -20px; margin-left: -20px;
outline: none; outline: none;
} }
.am-radio + .am-radio, .am-radio + .am-radio,
.am-checkbox + .am-checkbox { .am-checkbox + .am-checkbox {
margin-top: -5px; // Move up sibling radios or checkboxes for tighter spacing margin-top: -5px; // Move up sibling radios or checkboxes for tighter spacing
} }
// Radios and checkboxes inline // Radios and checkboxes inline
.am-radio-inline, .am-radio-inline,
...@@ -264,7 +249,6 @@ output { ...@@ -264,7 +249,6 @@ output {
margin-left: 10px; // space out consecutive inline controls margin-left: 10px; // space out consecutive inline controls
} }
// Apply same disabled cursor tweak as for inputs // Apply same disabled cursor tweak as for inputs
// //
// Note: Neither radios nor checkboxes can be readonly. // Note: Neither radios nor checkboxes can be readonly.
...@@ -281,24 +265,24 @@ input[type="checkbox"], ...@@ -281,24 +265,24 @@ input[type="checkbox"],
} }
/* Form field feedback states */ /* Form field feedback states */
// Warning // Warning
.am-form-warning { .am-form-warning {
.form-field-validation(@state-warning-text; @state-warning-text); .form-field-validation(@state-warning-text; @state-warning-text);
} }
// Error // Error
.am-form-error { .am-form-error {
.form-field-validation(@state-danger-text; @state-danger-text); .form-field-validation(@state-danger-text; @state-danger-text);
} }
// Success // Success
.am-form-success { .am-form-success {
.form-field-validation(@state-success-text; @state-success-text); .form-field-validation(@state-success-text; @state-success-text);
} }
/* Horizontal forms */ /* Horizontal forms */
.am-form-horizontal { .am-form-horizontal {
...@@ -324,11 +308,9 @@ input[type="checkbox"], ...@@ -324,11 +308,9 @@ input[type="checkbox"],
} }
// Inline form elements // Inline form elements
.am-form-inline { .am-form-inline {
@media @medium-up { @media @medium-up {
.am-form-group { .am-form-group {
display: inline-block; display: inline-block;
...@@ -365,7 +347,6 @@ input[type="checkbox"], ...@@ -365,7 +347,6 @@ input[type="checkbox"],
// Remove default margin on radios/checkboxes that were used for stacking, and // 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 // then undo the floating of radios and checkboxes to match (which also avoids
.am-radio, .am-radio,
.am-checkbox { .am-checkbox {
display: inline-block; display: inline-block;
...@@ -374,6 +355,7 @@ input[type="checkbox"], ...@@ -374,6 +355,7 @@ input[type="checkbox"],
padding-left: 0; padding-left: 0;
vertical-align: middle; vertical-align: middle;
} }
.am-radio input[type="radio"], .am-radio input[type="radio"],
.am-checkbox input[type="checkbox"] { .am-checkbox input[type="checkbox"] {
float: none; float: none;
...@@ -381,7 +363,6 @@ input[type="checkbox"], ...@@ -381,7 +363,6 @@ input[type="checkbox"],
} }
// Validation states // Validation states
.am-form-feedback .am-form-field-feedback { .am-form-feedback .am-form-field-feedback {
top: 0; top: 0;
} }
...@@ -389,7 +370,6 @@ input[type="checkbox"], ...@@ -389,7 +370,6 @@ input[type="checkbox"],
} }
/* Form field size */ /* Form field size */
.am-input-sm { .am-input-sm {
...@@ -401,7 +381,6 @@ input[type="checkbox"], ...@@ -401,7 +381,6 @@ input[type="checkbox"],
} }
/* Form field feedback states */ /* Form field feedback states */
.am-form-icon { .am-form-icon {
...@@ -414,7 +393,7 @@ input[type="checkbox"], ...@@ -414,7 +393,7 @@ input[type="checkbox"],
[class*='am-icon-'] { [class*='am-icon-'] {
position: absolute; position: absolute;
left: @input-padding; left: @input-padding;
top: 50%; top: 50%;
display: block; display: block;
margin-top: -(@input-padding + 0.15); margin-top: -(@input-padding + 0.15);
z-index: 2; z-index: 2;
......
less/input-group.less
浏览文件 @ b3417b86
...@@ -2,8 +2,17 @@ ...@@ -2,8 +2,17 @@
// Description: Define style for input group // Description: Define style for input group
// //
// Component: `am-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 // Uses: Form
// Button // Button
...@@ -12,7 +21,6 @@ ...@@ -12,7 +21,6 @@
// //
// ======================================================================== // ========================================================================
/* ======================================================================== /* ========================================================================
Component: Input group Component: Input group
========================================================================== */ ========================================================================== */
...@@ -39,22 +47,6 @@ ...@@ -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 // Display as table-cell
// ======================================================================== // ========================================================================
...@@ -92,17 +84,6 @@ ...@@ -92,17 +84,6 @@
border: 1px solid @input-group-label-border-color; border: 1px solid @input-group-label-border-color;
border-radius: @global-border-radius; 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. // Nuke default margins from checkboxes and radios to vertically center within.
input[type="radio"], input[type="radio"],
input[type="checkbox"] { input[type="checkbox"] {
...@@ -110,7 +91,6 @@ ...@@ -110,7 +91,6 @@
} }
} }
// Reset rounded corners // Reset rounded corners
// ======================================================================== // ========================================================================
...@@ -142,7 +122,6 @@ ...@@ -142,7 +122,6 @@
border-left: 0; border-left: 0;
} }
// Button input groups // Button input groups
// ======================================================================== // ========================================================================
...@@ -173,9 +152,10 @@ ...@@ -173,9 +152,10 @@
&:first-child { &:first-child {
> .am-btn, > .am-btn,
> .am-btn-group { > .am-btn-group {
margin-right: -1px; margin-right: -2px;
} }
} }
&:last-child { &:last-child {
> .am-btn, > .am-btn,
> .am-btn-group { > .am-btn-group {
...@@ -183,3 +163,67 @@ ...@@ -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 @@ ...@@ -827,13 +827,13 @@
// Form element focus state // Form element focus state
.form-field-focus(@color: @input-border-focus) { .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 { &:focus {
//background-color: rgba(red(@color), green(@color), blue(@color), .05); //background-color: rgba(red(@color), green(@color), blue(@color), .05);
background: @input-focus-bg; background-color: @input-focus-bg;
border-color: @color; border-color: @color;
outline: 0; 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 @@ ...@@ -377,7 +377,7 @@
@input-color: @gray; @input-color: @gray;
@input-border: #ccc; @input-border: #ccc;
@input-border-radius: @global-border-radius; @input-border-radius: @global-border-radius;
@input-border-focus: @global-primary; @input-border-focus: @global-secondary;
@input-color-placeholder: @gray-light; @input-color-placeholder: @gray-light;
...@@ -1286,6 +1286,10 @@ ...@@ -1286,6 +1286,10 @@
// ======================================================================== // ========================================================================
// Alert
// ========================================================================
// Dropdown // Dropdown
// ======================================================================== // ========================================================================
...@@ -1310,20 +1314,9 @@ ...@@ -1310,20 +1314,9 @@
@caret-width-base: 6px; @caret-width-base: 6px;
// Modal
// 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;
// plugin - modal
// =======================================================================
//** Padding applied to the modal body //** Padding applied to the modal body
@modal-inner-padding: 20px; @modal-inner-padding: 20px;
...@@ -1350,4 +1343,37 @@ ...@@ -1350,4 +1343,37 @@
@modal-lg: 900px; @modal-lg: 900px;
@modal-md: 600px; @modal-md: 600px;
@modal-sm: 300px; @modal-sm: 300px;
\ No newline at end of file
// 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.
先完成此消息的编辑！
想要评论请 注册 或