drip-public/iview
5
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

merge upstream/master

Browse source
This commit is contained in:
jingsam 2016-11-09 18:37:24 +08:00
commit f36b29707c
47 changed files with 1159 additions and 347 deletions
Download patch file Download diff file Expand all files Collapse all files

13
src/components/base/notification/notice.vue
View file

@ -47,6 +47,11 @@
type: String
}
},
data () {
return {
withDesc: false
}
},
computed: {
baseClass () {
return `${this.prefixCls}-notice`;
@ -56,7 +61,8 @@
this.baseClass,
{
[`${this.className}`]: !!this.className,
[`${this.baseClass}-closable`]: this.closable
[`${this.baseClass}-closable`]: this.closable,
[`${this.baseClass}-with-desc`]: this.withDesc
}
]
},
@ -85,6 +91,11 @@
this.close();
}, this.duration * 1000)
}
// check if with desc in Notice component
if (this.prefixCls === 'ivu-notice') {
this.withDesc = this.$els.content.querySelectorAll(`.${this.prefixCls}-desc`)[0].innerHTML !== '';
}
},
beforeDestroy () {
this.clearCloseTimer();

8
src/components/checkbox/checkbox.vue
View file

@ -18,7 +18,7 @@
v-model="checked"
@change="change">
</span>
<slot><span>{{ value }}</span></slot>
<slot v-if="showSlot"><span v-el:slot>{{ value }}</span></slot>
</label>
</template>
<script>
@ -42,7 +42,8 @@
return {
model: [],
selected: false,
group: false
group: false,
showSlot: true
}
},
computed: {
@ -75,6 +76,9 @@
ready () {
if (!this.group) {
this.updateModel();
if (this.$els.slot && this.$els.slot.innerHTML === '') {
this.showSlot = false;
}
}
},
methods: {

125
src/components/input/input.vue
View file

@ -1,20 +1,44 @@
<template>
<input
:class="classes"
:type="type"
:placeholder="placeholder"
:name="name"
v-model="value">
<div :class="wrapClasses">
<template v-if="type !== 'textarea'">
<div :class="[prefixCls + '-group-prepend']" v-if="prepend" v-el:prepend><slot name="prepend"></slot></div>
<i class="ivu-icon" :class="['ivu-icon-' + icon, prefixCls + '-icon']" v-if="icon" @click="handleIconClick"></i>
<input
type="text"
:class="inputClasses"
:placeholder="placeholder"
:disabled="disabled"
:maxlength="maxlength"
v-model="value"
@keyup.enter="handleEnter">
<div :class="[prefixCls + '-group-append']" v-if="append" v-el:append><slot name="append"></slot></div>
</template>
<textarea
v-else
v-el:textarea
:class="textareaClasses"
:style="textareaStyles"
:placeholder="placeholder"
:disabled="disabled"
:rows="rows"
:maxlength="maxlength"
v-model="value"
@keyup.enter="handleEnter">
</textarea>
</div>
</template>
<script>
import { oneOf } from '../../utils/assist';
import calcTextareaHeight from '../../utils/calcTextareaHeight';
const prefixCls = 'ivu-input';
export default {
props: {
type: {
type: String,
validator (value) {
return oneOf(value, ['text', 'textarea']);
},
default: 'text'
},
value: {
@ -22,28 +46,105 @@
default: '',
twoWay: true
},
placeholder: String,
name: String,
size: {
validator (value) {
return oneOf(value, ['small', 'large']);
}
},
placeholder: {
type: String,
default: ''
},
maxlength: {
type: Number
},
disabled: {
type: Boolean,
default: false
},
icon: String,
autosize: {
type: [Boolean, Object],
default: false
},
rows: {
type: Number,
default: 2
}
},
data () {
return {
prefixCls: prefixCls,
prepend: true,
append: true,
textareaStyles: {}
}
},
computed: {
classes () {
wrapClasses () {
return [
`${prefixCls}-wrapper`,
{
[`${prefixCls}-type`]: this.type,
[`${prefixCls}-group`]: this.prepend || this.append,
[`${prefixCls}-group-${this.size}`]: (this.prepend || this.append) && !!this.size
}
]
},
inputClasses () {
return [
`${prefixCls}`,
{
[`${prefixCls}-${this.size}`]: !!this.size
[`${prefixCls}-${this.size}`]: !!this.size,
[`${prefixCls}-disabled`]: this.disabled
}
]
},
textareaClasses () {
return [
`${prefixCls}`,
{
[`${prefixCls}-disabled`]: this.disabled
}
]
}
},
methods: {
handleEnter () {
this.$emit('on-enter');
},
handleIconClick () {
this.$emit('on-click');
},
resizeTextarea () {
const autosize = this.autosize;
if (!autosize || this.type !== 'textarea') {
return false;
}
const minRows = autosize.minRows;
const maxRows = autosize.maxRows;
this.textareaStyles = calcTextareaHeight(this.$els.textarea, minRows, maxRows);
}
},
watch: {
value (val) {
this.$nextTick(() => {
this.resizeTextarea();
});
this.$emit('on-change', val);
}
},
ready () {
if (this.type === 'text') {
this.prepend = this.$els.prepend.innerHTML !== '';
this.append = this.$els.append.innerHTML !== '';
} else {
this.prepend = false;
this.append = false;
}
this.resizeTextarea();
}
}
</script>

9
src/components/modal/modal.vue
View file

@ -8,7 +8,7 @@
<Icon type="ios-close-empty"></Icon>
</slot>
</a>
<div :class="[prefixCls + '-header']" v-if="showHead" v-el:head><slot name="header"><p>{{ title }}</p></slot></div>
<div :class="[prefixCls + '-header']" v-if="showHead" v-el:head><slot name="header"><div :class="[prefixCls + '-header-inner']">{{ title }}</div></slot></div>
<div :class="[prefixCls + '-body']"><slot></slot></div>
<div :class="[prefixCls + '-footer']" v-if="!footerHide">
<slot name="footer">
@ -175,7 +175,7 @@
let showHead = true;
if (this.$els.head.innerHTML == '<p></p>' && !this.title) {
if (this.$els.head.innerHTML == `<div class="${prefixCls}-header-inner"></div>` && !this.title) {
showHead = false;
}
@ -199,6 +199,11 @@
this.wrapShow = true;
this.addScrollEffect();
}
},
loading (val) {
if (!val) {
this.buttonLoading = false;
}
}
}
}

6
src/components/notice/index.js
View file

@ -42,9 +42,11 @@ function notice (type, options) {
let content;
const with_desc = desc === '' ? '' : ` ${prefixCls}-with-desc`;
if (type == 'normal') {
content = `
<div class="${prefixCls}-custom-content">
<div class="${prefixCls}-custom-content ${prefixCls}-with-normal${with_desc}">
<div class="${prefixCls}-title">${title}</div>
<div class="${prefixCls}-desc">${desc}</div>
</div>
@ -52,7 +54,7 @@ function notice (type, options) {
} else {
const iconType = iconTypes[type];
content = `
<div class="${prefixCls}-custom-content ${prefixCls}-with-icon">
<div class="${prefixCls}-custom-content ${prefixCls}-with-icon ${prefixCls}-with-${type}${with_desc}">
<span class="${prefixCls}-icon ${prefixCls}-icon-${type}">
<i class="${iconPrefixCls} ${iconPrefixCls}-${iconType}"></i>
</span>

6
src/components/poptip/poptip.vue
View file

@ -26,9 +26,9 @@
</div>
</div>
<div :class="[prefixCls + '-inner']" v-if="!confirm">
<div :class="[prefixCls + '-title']" v-if="showTitle" v-el:title><slot name="title">{{ title }}</slot></div>
<div :class="[prefixCls + '-title']" v-if="showTitle" v-el:title><slot name="title"><div :class="[prefixCls + '-title-inner']">{{ title }}</div></slot></div>
<div :class="[prefixCls + '-body']">
<div :class="[prefixCls + '-body-content']"><slot name="content">{{ content }}</slot></div>
<div :class="[prefixCls + '-body-content']"><slot name="content"><div :class="[prefixCls + '-body-content-inner']">{{ content }}</div></slot></div>
</div>
</div>
</div>
@ -163,7 +163,7 @@
},
ready () {
if (!this.confirm) {
this.showTitle = this.$els.title.innerHTML != '';
this.showTitle = this.$els.title.innerHTML != `<div class="${prefixCls}-title-inner"></div>`;
}
}
}

3
src/components/radio/radio.vue
View file

@ -8,8 +8,7 @@
:disabled="disabled"
:checked="selected"
@change="change">
</span>
<slot>{{ value }}</slot>
</span><slot>{{ value }}</slot>
</label>
</template>
<script>

3
src/index.js
View file

@ -52,7 +52,8 @@ const iview = {
Modal,
Notice,
iOption: Option,
OptionGroup: OptionGroup,
OptionGroup,
iOptionGroup: OptionGroup,
Page,
Panel: Collapse.Panel,
Poptip,

14
src/styles/article/index.less
View file

@ -1,21 +1,27 @@
.ivu-article {
h1{
font-size: 28px;
font-size: 26px;
font-weight: normal;
}
h2{
font-size: 22px;
font-size: 20px;
font-weight: normal;
}
h3{
font-size: 18px;
font-size: 16px;
font-weight: normal;
}
h4{
font-size: 14px;
font-weight: normal;
}
h5{
font-size: 12px;
font-weight: normal;
}
h6{
font-size: 12px;
font-weight: normal;
}
blockquote{
@ -33,6 +39,7 @@
}
li{
margin-bottom: 5px;
font-size: 14px;
}
ul ul, ol ul{
list-style-type: circle;
@ -40,5 +47,6 @@
p{
margin: 5px;
font-size: 14px;
}
}

4
src/styles/common/base.less
View file

@ -12,7 +12,7 @@
body {
font-family: @font-family;
font-size: @font-size-base;
font-size: @font-size-small;
line-height: @line-height-base;
color: @text-color;
background-color: @body-background;
@ -64,7 +64,7 @@ a {
&[disabled] {
color: #ccc;
cursor: not-allowed;
cursor: @cursor-disabled;
pointer-events: none;
}
}

6
src/styles/components/alert.less
View file

@ -6,7 +6,7 @@
padding: 8px 48px 8px 16px;
border-radius: @border-radius-base;
color: @text-color;
font-size: 12px;
font-size: @font-size-small;
line-height: 16px;
margin-bottom: 10px;
@ -15,14 +15,14 @@
}
&-icon {
font-size: 14px;
font-size: @font-size-base;
top: 8px;
left: 16px;
position: absolute;
}
&-desc {
font-size: 12px;
font-size: @font-size-small;
color: @text-color;
line-height: 21px;
display: none;

2
src/styles/components/card.less
View file

@ -41,7 +41,7 @@
&-extra {
position: absolute;
right: 16px;
top: 10px;
top: 14px;
}
&-body {

3
src/styles/components/index.less
View file

@ -23,4 +23,5 @@
@import "select";
@import "select-dropdown";
@import "tooltip";
@import "poptip";
@import "poptip";
@import "input";

28
src/styles/components/input-number.less
View file

@ -13,8 +13,8 @@
margin: 0;
padding: 0;
width: 80px;
height: 28px;
line-height: 28px;
height: @input-height-base;
line-height: @input-height-base;
vertical-align: middle;
border: 1px solid @border-color-base;
border-radius: @btn-border-radius;
@ -53,7 +53,7 @@
&-handler {
display: block;
width: 100%;
height: 14px;
height: @input-height-base / 2;
line-height: 0;
text-align: center;
overflow: hidden;
@ -93,13 +93,13 @@
&-input-wrap {
overflow: hidden;
height: 28px;
height: @input-height-base;
}
&-input {
width: 100%;
height: 28px;
line-height: 28px;
height: @input-height-base;
line-height: @input-height-base;
padding: 0 7px;
text-align: left;
outline: 0;
@ -117,15 +117,15 @@
&-large {
padding: 0;
.@{input-number-prefix-cls}-input-wrap {
height: 32px;
height: @input-height-large;
}
.@{input-number-prefix-cls}-handler {
height: 16px;
height: @input-height-large / 2;
}
input {
height: 32px;
line-height: 32px;
height: @input-height-large;
line-height: @input-height-large;
}
.@{input-number-prefix-cls}-handler-up-inner {
@ -139,15 +139,15 @@
&-small {
padding: 0;
.@{input-number-prefix-cls}-input-wrap {
height: 22px;
height: @input-height-small;
}
.@{input-number-prefix-cls}-handler {
height: 11px;
height: @input-height-small / 2;
}
input {
height: 22px;
line-height: 22px;
height: @input-height-small;
line-height: @input-height-small;
margin-top: -1px;
vertical-align: top;
}

35
src/styles/components/input.less Normal file
View file

@ -0,0 +1,35 @@
@input-prefix-cls: ~"@{css-prefix}input";
.@{input-prefix-cls} {
.input;
&-wrapper{
display: inline-block;
width: 100%;
position: relative;
}
&-icon {
width: 32px;
height: 100%;
font-size: 16px;
text-align: center;
color: @subsidiary-color;
position: absolute;
right: 0;
z-index: 1;
&:after{
content: '';
display: inline-block;
width: 0;
height: 100%;
vertical-align: middle;
}
}
&-icon + &{
padding-right: 32px;
}
}
.@{input-prefix-cls}-group{
.input-group(~"@{input-prefix-cls}");
}

2
src/styles/components/message.less
View file

@ -2,7 +2,7 @@
@icon-prefix-cls: ~"@{css-prefix}icon";
.@{message-prefix-cls} {
font-size: 12px;
font-size: @font-size-small;
position: fixed;
z-index: @zindex-message;
width: 100%;

4
src/styles/components/modal.less
View file

@ -46,7 +46,7 @@
}
&-close {
.content-close;
.content-close(1px, 31px);
}
&-body {
@ -57,7 +57,7 @@
&-footer {
border-top: 1px solid @border-color-split;
padding: 10px 18px 10px 10px;
padding: 12px 18px 12px 10px;
text-align: right;
button + button {
margin-left: 8px;

97
src/styles/components/notice.less
View file

@ -6,26 +6,26 @@
@notice-margin-bottom: 10px;
.@{notice-prefix-cls} {
position: fixed;
z-index: @zindex-notification;
width: @notice-width;
margin-right: 24px;
position: fixed;
z-index: @zindex-notification;
&-notice {
padding: @notice-padding;
border-radius: @border-radius-base;
box-shadow: @shadow-base;
border: 1px solid @border-color-base;
background: #fff;
line-height: 1.5;
position: relative;
margin-bottom: @notice-margin-bottom;
padding: @notice-padding;
border: 1px solid @border-color-split;
border-radius: @border-radius-small;
box-shadow: @shadow-base;
background: #fff;
line-height: 1;
position: relative;
overflow: hidden;
&-close {
position: absolute;
right: 16px;
top: 10px;
top: 15px;
color: #999;
outline: none;
@ -33,35 +33,48 @@
.close-base(-3px);
}
}
&-with-desc{
.@{notice-prefix-cls}-notice-close{
top: 11px;
}
}
}
&-title {
font-size: @font-size-base;
color: @text-color;
margin-bottom: 4px;
color: @title-color;
padding-right: 10px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
&-with-desc &-title{
margin-bottom: 8px;
}
&-with-desc&-with-icon &-title{
margin-left: 51px;
}
&-desc {
font-size: 12px;
color: @legend-color;
text-align: justify;
line-height: 1.5;
}
&-with-desc&-with-icon &-desc{
margin-left: 51px;
}
&-with-icon &-title{
margin-left: 51px;
margin-bottom: 4px;
}
&-with-icon &-desc {
margin-left: 51px;
margin-left: 26px;
}
&-icon {
position: absolute;
left: 21px;
top: 50%;
margin-top: -21px;
font-size: 28px;
left: 20px;
margin-top: -1px;
font-size: 16px;
&-success {
color: @success-color;
@ -76,4 +89,44 @@
color: @error-color;
}
}
&-with-desc &-icon{
font-size: 36px;
}
&-custom-content{
&:after{
content: "";
display: block;
width: 4px;
position: absolute;
top: 0;
bottom: 0;
left: 0;
}
}
&-with-normal{
&:after{
background: @primary-color;
}
}
&-with-info{
&:after{
background: @primary-color;
}
}
&-with-success{
&:after{
background: @success-color;
}
}
&-with-warning{
&:after{
background: @warning-color;
}
}
&-with-error{
&:after{
background: @error-color;
}
}
}

73
src/styles/components/page.less
View file

@ -12,9 +12,9 @@
&-item {
float: left;
min-width: 28px;
height: 28px;
line-height: 28px;
min-width: @btn-circle-size;
height: @btn-circle-size;
line-height: @btn-circle-size - 2px;
margin-right: 4px;
text-align: center;
list-style: none;
@ -54,7 +54,7 @@
&:after {
content: "•••";
display: block;
letter-spacing: 2px;
letter-spacing: 1px;
color: #ccc;
text-align: center;
}
@ -85,36 +85,45 @@
}
}
&-prev,
&-item-jump-prev,
&-item-jump-next {
&-prev{
margin-right: 8px;
}
&-item-jump-prev,
&-item-jump-next{
margin-right: 4px;
}
&-next{
margin-left: 4px;
}
&-prev,
&-next,
&-item-jump-prev,
&-item-jump-next {
display: inline-block;
float: left;
min-width: 28px;
height: 28px;
line-height: 28px;
min-width: @btn-circle-size;
height: @btn-circle-size;
line-height: @btn-circle-size - 2px;
list-style: none;
text-align: center;
cursor: pointer;
color: #666;
font-family: Arial;
border: 1px solid @border-color-base;
border-radius: @btn-border-radius;
.transition(all @transition-time @ease-in-out);
}
&-prev,
&-next {
border: 1px solid @border-color-base;
background-color: #fff;
a {
color: #666;
font-size: 14px;
}
&:hover {
@ -150,8 +159,8 @@
&-elevator {
float: left;
height: 28px;
line-height: 28px;
height: @btn-circle-size;
line-height: @btn-circle-size;
input {
.input;
@ -164,8 +173,8 @@
&-total {
float: left;
height: 30px;
line-height: 30px;
height: @btn-circle-size;
line-height: @btn-circle-size;
margin-right: 10px;
}
@ -199,51 +208,57 @@
border-color: @primary-color;
}
}
span{
padding: 0 8px 0 2px;
}
}
}
.@{page-prefix-cls} {
&.mini &-total {
height: 20px;
line-height: 20px;
height: @btn-circle-size-small;
line-height: @btn-circle-size-small;
}
&.mini &-item {
border: 0;
margin: 0;
min-width: 20px;
height: 20px;
line-height: 20px;
min-width: @btn-circle-size-small;
height: @btn-circle-size-small;
line-height: @btn-circle-size-small;
border-radius: @btn-border-radius-small;
}
&.mini &-prev,
&.mini &-next {
margin: 0;
min-width: 20px;
height: 20px;
line-height: 20px;
min-width: @btn-circle-size-small;
height: @btn-circle-size-small;
line-height: @btn-circle-size-small;
border: 0;
a {
i:after {
height: 20px;
line-height: 20px;
height: @btn-circle-size-small;
line-height: @btn-circle-size-small;
}
}
}
&.mini &-item-jump-prev,
&.mini &-item-jump-next {
height: 20px;
line-height: 20px;
height: @btn-circle-size-small;
line-height: @btn-circle-size-small;
border: none;
margin-right: 0;
}
&.mini &-options {
margin-left: 8px;
&-elevator {
height: 20px;
line-height: 20px;
height: @btn-circle-size-small;
line-height: @btn-circle-size-small;
input {
.input-small;

32
src/styles/components/poptip.less
View file

@ -17,11 +17,24 @@
&-title {
margin: 0;
padding: 0 16px;
height: 32px;
line-height: 32px;
border-bottom: 1px solid @border-color-split;
color: #666;
padding: 8px 16px;
position: relative;
&:after{
content: '';
display: block;
height: 1px;
position: absolute;
left: 8px;
right: 8px;
bottom: 0;
background-color: @border-color-split;
}
&-inner{
color: @title-color;
font-size: @font-size-base;
}
}
&-body{
@ -29,6 +42,10 @@
&-content{
overflow: auto;
&-inner{
color: @text-color;
}
}
}
@ -36,7 +53,7 @@
width: 100%;
background-color: #fff;
background-clip: padding-box;
border: 1px solid @border-color-split;
//border: 1px solid @border-color-split;
border-radius: @border-radius-small;
box-shadow: @shadow-base;
white-space: nowrap;
@ -108,8 +125,9 @@
&-confirm &-body{
padding: 16px 16px 8px;
.ivu-icon{
font-size: 16px;
color: @warning-color;
line-height: 17px;
line-height: 18px;
position: absolute;
}

2
src/styles/components/progress.less
View file

@ -3,7 +3,7 @@
.@{progress-prefix-cls} {
display: inline-block;
width: 100%;
font-size: 14px;
font-size: @font-size-small;
position: relative;
&-outer {

35
src/styles/components/radio.less
View file

@ -5,12 +5,12 @@
.@{radio-group-prefix-cls} {
display: inline-block;
font-size: @font-size-base;
font-size: @font-size-small;
}
// 普通状态
.@{radio-prefix-cls}-wrapper {
font-size: @font-size-base;
font-size: @font-size-small;
vertical-align: middle;
display: inline-block;
position: relative;
@ -19,9 +19,10 @@
}
.@{radio-prefix-cls} {
display: inline-block;
margin-right: 4px;
white-space: nowrap;
outline: none;
display: inline-block;
position: relative;
line-height: 1;
vertical-align: middle;
@ -124,19 +125,24 @@ span.@{radio-prefix-cls} + * {
font-size: 0;
-webkit-text-size-adjust:none;
.@{radio-prefix-cls}{
width: 0;
margin-right: 0;
}
.@{radio-prefix-cls}-wrapper {
font-size: 14px;
margin: 0;
height: 28px;
line-height: 26px;
color: @btn-default-color;
display: inline-block;
height: @btn-circle-size;
line-height: @btn-circle-size - 2px;
margin: 0;
padding: 0 16px;
font-size: @font-size-small;
color: @btn-default-color;
.transition(all @transition-time ease-in-out);
cursor: pointer;
border: 1px solid @border-color-base;
border-left: 0;
background: #fff;
padding: 0 16px;
> span {
margin-left: 0;
@ -232,15 +238,16 @@ span.@{radio-prefix-cls} + * {
}
.@{radio-group-button-prefix-cls}.@{radio-group-prefix-cls}-large .@{radio-prefix-cls}-wrapper{
height: 32px;
line-height: 30px;
height: @btn-circle-size-large;
line-height: @btn-circle-size-large - 2px;
font-size: @font-size-base;
}
.@{radio-group-button-prefix-cls}.@{radio-group-prefix-cls}-small .@{radio-prefix-cls}-wrapper{
height: 22px;
line-height: 20px;
height: @btn-circle-size-small;
line-height: @btn-circle-size-small - 2px;
padding: 0 12px;
font-size: 12px;
font-size: @font-size-small;
&:first-child {
border-radius: @btn-border-radius-small 0 0 @btn-border-radius-small;
}

7
src/styles/components/select-dropdown.less
View file

@ -5,12 +5,13 @@
max-height: 200px;
overflow: auto;
margin: 5px 0;
padding: 7px 0;
padding: 5px 0;
background-color: #fff;
box-sizing: border-box;
border: 1px solid @border-color-base;
border: 1px solid @border-color-split;
border-radius: @btn-border-radius;
box-shadow: 0 1px 3px rgba(0,0,0,.2);
//box-shadow: 0 1px 3px rgba(0,0,0,.2);
box-shadow: @shadow-base;
position: absolute;
z-index: @zindex-select;
}

44
src/styles/components/select.less
View file

@ -80,7 +80,7 @@
}
&-single &-selection{
height: 28px;
height: @input-height-base;
position: relative;
.@{select-prefix-cls}-placeholder{
@ -89,8 +89,9 @@
.@{select-prefix-cls}-placeholder, .@{select-prefix-cls}-selected-value{
display: block;
height: 26px;
line-height: 26px;
height: @input-height-base - 2px;
line-height: @input-height-base - 2px;
font-size: @font-size-small;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
@ -100,32 +101,33 @@
}
&-large&-single &-selection{
height: 32px;
height: @input-height-large;
.@{select-prefix-cls}-placeholder, .@{select-prefix-cls}-selected-value{
height: 30px;
line-height: 30px;
height: @input-height-large - 2px;
line-height: @input-height-large - 2px;
font-size: @font-size-base;
}
}
&-small&-single &-selection{
height: 22px;
height: @input-height-small;
border-radius: @btn-border-radius-small;
.@{select-prefix-cls}-placeholder, .@{select-prefix-cls}-selected-value{
height: 20px;
line-height: 20px;
height: @input-height-small - 2px;
line-height: @input-height-small - 2px;
}
}
&-multiple &-selection{
padding: 0 24px 0 2px;
min-height: 28px;
padding: 0 24px 0 4px;
min-height: @input-height-base;
.@{select-prefix-cls}-placeholder{
display: block;
height: 26px;
line-height: 26px;
height: @input-height-base - 2px;
line-height: @input-height-base - 2px;
color: @input-placeholder-color;
overflow: hidden;
text-overflow: ellipsis;
@ -141,7 +143,7 @@
height: @input-height-base;
line-height: @input-height-base;
padding: 0 24px 0 8px;
font-size: @font-size-base;
font-size: @font-size-small;
outline: none;
border: none;
box-sizing: border-box;
@ -157,6 +159,7 @@
}
&-large &-input{
font-size: @font-size-base;
height: @input-height-large;
}
@ -165,8 +168,8 @@
}
&-multiple &-input{
height: 25px;
line-height: 28px;
height: @input-height-base - 3px;
line-height: @input-height-base;
padding: 0 0 0 6px;
}
@ -174,13 +177,18 @@
text-align: center;
color: @btn-disable-color;
}
&-multiple .@{css-prefix}tag{
margin: 3px 4px 2px 0;
}
}
.@{select-item-prefix-cls} {
margin: 0;
padding: 7px 15px;
padding: 7px 16px 8px;
clear: both;
color: @text-color;
font-size: @font-size-small;
//border-radius: @btn-border-radius-small;
white-space: nowrap;
cursor: pointer;
@ -244,7 +252,7 @@
padding: 0;
&-title {
padding-left: 10px;
padding-left: 8px;
font-size: 12px;
color: @legend-color;
height: 30px;

2
src/styles/components/switch.less
View file

@ -16,7 +16,7 @@
&-inner {
color: #fff;
font-size: 12px;
font-size: @font-size-small;
position: absolute;
left: 25px;

6
src/styles/components/timeline.less
View file

@ -55,7 +55,7 @@
line-height: 1;
border: 0;
border-radius: 0;
font-size: 14px;
font-size: @font-size-base;
position: absolute;
left: -14px;
.transform(translateY(-50%));
@ -63,9 +63,9 @@
&-content {
padding: 1px 1px 10px 24px;
font-size: @font-size-base;
font-size: @font-size-small;
position: relative;
top: -5px;
top: -4px;
}
&:last-child {

4
src/styles/components/tooltip.less
View file

@ -19,14 +19,14 @@
&-inner{
max-width: @tooltip-max-width;
min-height: 34px;
padding: 8px 10px;
padding: 8px 12px;
color: @tooltip-color;
text-align: left;
text-decoration: none;
background-color: @tooltip-bg;
border-radius: @border-radius-small;
box-shadow: @shadow-base;
white-space:nowrap;
white-space: nowrap;
}
&-arrow{

8
src/styles/mixins/checkbox.less
View file

@ -32,7 +32,7 @@
&:after {
content: '';
display: table;
width: 5px;
width: 4px;
height: 8px;
position: absolute;
top: 1px;
@ -75,7 +75,7 @@
&:after {
content: '';
display: table;
width: 5px;
width: 4px;
height: 8px;
position: absolute;
top: 1px;
@ -136,7 +136,7 @@
.@{checkbox-prefix-cls}-wrapper {
cursor: pointer;
font-size: @font-size-base;
font-size: @font-size-small;
display: inline-block;
& + & {
margin-left: 8px;
@ -145,7 +145,7 @@
.@{checkbox-prefix-cls}-wrapper + span,
.@{checkbox-prefix-cls} + span {
margin-left: 4px;
//margin-left: 4px;
margin-right: 4px;
}

4
src/styles/mixins/close.less
View file

@ -1,5 +1,5 @@
.close-base(@top: 0) {
font-size: 22px;
.close-base(@top: 0, @icon-font-size: 22px) {
font-size: @icon-font-size;
color: @legend-color;
transition: color @transition-time ease;
position: relative;

15
src/styles/mixins/content.less
View file

@ -2,15 +2,18 @@
.content-header() {
border-bottom: 1px solid @border-color-split;
padding: 10px 16px;
padding: 14px 16px;
line-height: 1;
p {
p,
&-inner
{
display: inline-block;
width: 100%;
height: 20px;
line-height: 20px;
font-size: 14px;
font-size: @font-size-base;
color: @title-color;
font-weight: bold;
overflow: hidden;
text-overflow: ellipsis;
@ -18,8 +21,8 @@
}
}
.content-close(@top: 0) {
font-size: 12px;
.content-close(@top: 0, @icon-font-size: 22px) {
font-size: @font-size-small;
position: absolute;
right: 16px;
top: 8px;
@ -27,6 +30,6 @@
cursor: pointer;
.@{icon-prefix-cls}-ios-close-empty {
.close-base(@top);
.close-base(@top, @icon-font-size);
}
}

143
src/styles/mixins/input.less
View file

@ -19,6 +19,7 @@
}
.input-large() {
font-size: @font-size-base;
padding: @input-padding-vertical-large @input-padding-horizontal;
height: @input-height-large;
}
@ -35,7 +36,7 @@
height: @input-height-base;
line-height: @line-height-base;
padding: @input-padding-vertical-base @input-padding-horizontal;
font-size: @font-size-base;
font-size: @font-size-small;
border: 1px solid @input-border-color;
border-radius: @border-radius-base;
color: @input-color;
@ -64,6 +65,7 @@
max-width: 100%;
height: auto;
vertical-align: bottom;
font-size: @font-size-base;
}
// Size
@ -74,4 +76,141 @@
&-small {
.input-small();
}
}
}
.input-group(@inputClass) {
display: table;
width: 100%;
border-collapse: separate;
position: relative;
font-size: @font-size-small;
&-large{
font-size: @font-size-base;
}
// Undo padding and float of grid classes
&[class*="col-"] {
float: none;
padding-left: 0;
padding-right: 0;
}
> [class*="col-"] {
padding-right: 8px;
}
&-prepend,
&-append,
> .@{inputClass} {
display: table-cell;
&:not(:first-child):not(:last-child) {
border-radius: 0;
}
}
&-prepend .@{css-prefix}btn,
&-append .@{css-prefix}btn
{
border-color: transparent;
background-color: transparent;
color: inherit;
margin: -(@input-padding-vertical-base + 1) (-@input-padding-horizontal);
}
&-prepend,
&-append
{
width: 1px; // To make addon/wrap as small as possible
white-space: nowrap;
vertical-align: middle;
}
.@{inputClass} {
width: 100%;
float: left;
margin-bottom: 0;
position: relative;
z-index: 2;
}
&-prepend,
&-append
{
padding: @input-padding-vertical-base @input-padding-horizontal;
font-size: inherit;
font-weight: normal;
line-height: 1;
color: @input-color;
text-align: center;
background-color: #eee;
border: 1px solid @input-border-color;
border-radius: @border-radius-base;
// Reset Select's style in addon
.@{css-prefix}select {
margin: -(@input-padding-vertical-base + 1) (-@input-padding-horizontal); // lesshint spaceAroundOperator: false
&-selection {
background-color: inherit;
margin: -1px;
border: 1px solid transparent;
}
&-visible .@{css-prefix}select-selection{
box-shadow: none;
}
}
}
// Reset rounded corners
> span > .@{inputClass}:first-child,
> .@{inputClass}:first-child,
&-prepend
{
border-bottom-right-radius: 0 !important;
border-top-right-radius: 0 !important;
// Reset Select's style in addon
.@{css-prefix}-select .@{css-prefix}-select-selection {
border-bottom-right-radius: 0;
border-top-right-radius: 0;
}
}
&-prepend {
border-right: 0;
}
&-append {
border-left: 0;
}
> .@{inputClass}:last-child,
&-append
{
border-bottom-left-radius: 0 !important;
border-top-left-radius: 0 !important;
// Reset Select's style in addon
.@{css-prefix}-select .@{css-prefix}-select-selection {
border-bottom-left-radius: 0;
border-top-left-radius: 0;
}
}
// Sizing options
&-large .@{inputClass},
&-large > &-prepend,
&-large > &-append
{
.input-large();
}
&-small .@{inputClass},
&-small > &-prepend,
&-small > &-append
{
.input-small();
}
}

15
src/styles/themes/default/custom.less
View file

@ -12,6 +12,7 @@
@link-active-color : shade(@link-color, 5%);
@selected-color : fade(@primary-color, 90%);
@tooltip-color : #fff;
@subsidiary-color : #9ea7b4;
// Base
@body-background : #fff;
@ -34,10 +35,10 @@
// Background color
@background-color-base : #f7f7f7; // base
@background-color-select-hover: @input-disabled-bg;
@tooltip-bg : #373737;
@tooltip-bg : rgba(70, 76, 91, .9);
// Shadow
@shadow-color : rgba(100, 100, 100, .2);
@shadow-color : rgba(0, 0, 0, .2);
@shadow-base : @shadow-down;
@shadow-card : 0 1px 1px 0 rgba(0,0,0,.1);
@shadow-up : 0 -1px 6px @shadow-color;
@ -47,7 +48,7 @@
// Button
@btn-font-weight : normal;
@btn-padding-base : 4px 15px;
@btn-padding-base : 6px 15px;
@btn-padding-large : 6px 15px 7px 15px;
@btn-padding-small : 2px 7px;
@btn-font-size : 12px;
@ -71,7 +72,7 @@
@btn-ghost-bg : transparent;
@btn-ghost-border : @border-color-base;
@btn-circle-size : 28px;
@btn-circle-size : 32px;
@btn-circle-size-large : 36px;
@btn-circle-size-small : 24px;
@ -83,9 +84,9 @@
@legend-color : #999;
// Input
@input-height-base : 28px;
@input-height-large : 32px;
@input-height-small : 22px;
@input-height-base : 32px;
@input-height-large : 36px;
@input-height-small : 24px;
@input-padding-horizontal : 7px;
@input-padding-vertical-base : 4px;

108
src/utils/calcTextareaHeight.js Normal file
View file

@ -0,0 +1,108 @@
// Thanks to
// https://github.com/andreypopp/react-textarea-autosize/
// https://github.com/ElemeFE/element/blob/master/packages/input/src/calcTextareaHeight.js
let hiddenTextarea;
const HIDDEN_STYLE = `
height:0 !important;
min-height:0 !important;
max-height:none !important;
visibility:hidden !important;
overflow:hidden !important;
position:absolute !important;
z-index:-1000 !important;
top:0 !important;
right:0 !important
`;
const CONTEXT_STYLE = [
'letter-spacing',
'line-height',
'padding-top',
'padding-bottom',
'font-family',
'font-weight',
'font-size',
'text-rendering',
'text-transform',
'width',
'text-indent',
'padding-left',
'padding-right',
'border-width',
'box-sizing'
];
function calculateNodeStyling(node) {
const style = window.getComputedStyle(node);
const boxSizing = style.getPropertyValue('box-sizing');
const paddingSize = (
parseFloat(style.getPropertyValue('padding-bottom')) +
parseFloat(style.getPropertyValue('padding-top'))
);
const borderSize = (
parseFloat(style.getPropertyValue('border-bottom-width')) +
parseFloat(style.getPropertyValue('border-top-width'))
);
const contextStyle = CONTEXT_STYLE
.map(name => `${name}:${style.getPropertyValue(name)}`)
.join(';');
return {contextStyle, paddingSize, borderSize, boxSizing};
}
export default function calcTextareaHeight(targetNode, minRows = null, maxRows = null) {
if (!hiddenTextarea) {
hiddenTextarea = document.createElement('textarea');
document.body.appendChild(hiddenTextarea);
}
let {
paddingSize,
borderSize,
boxSizing,
contextStyle
} = calculateNodeStyling(targetNode);
hiddenTextarea.setAttribute('style', `${contextStyle};${HIDDEN_STYLE}`);
hiddenTextarea.value = targetNode.value || targetNode.placeholder || '';
let height = hiddenTextarea.scrollHeight;
let minHeight = -Infinity;
let maxHeight = Infinity;
if (boxSizing === 'border-box') {
height = height + borderSize;
} else if (boxSizing === 'content-box') {
height = height - paddingSize;
}
hiddenTextarea.value = '';
let singleRowHeight = hiddenTextarea.scrollHeight - paddingSize;
if (minRows !== null) {
minHeight = singleRowHeight * minRows;
if (boxSizing === 'border-box') {
minHeight = minHeight + paddingSize + borderSize;
}
height = Math.max(minHeight, height);
}
if (maxRows !== null) {
maxHeight = singleRowHeight * maxRows;
if (boxSizing === 'border-box') {
maxHeight = maxHeight + paddingSize + borderSize;
}
height = Math.min(maxHeight, height);
}
return {
height: `${height}px`,
minHeight: `${minHeight}px`,
maxHeight: `${maxHeight}px`
};
};