mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2024-11-26 12:10:06 +08:00
Code Issues Actions 25 Packages Projects Releases Wiki Activity

Merge pull request #16 from ant-design/style

Browse Source 
Style
This commit is contained in:
Emma 2015-06-11 09:20:10 +08:00
commit 086d72a8a6
7 changed files with 121 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
components/button/demo/button-group.md
View File

@ -32,12 +32,12 @@
<h4>带图标按钮组合 </h4>
<div class="ant-btn-group">
<button class="ant-btn ant-btn-primary">
<span class="anticon anticon-angle-double-left"></span>
<span class="anticon anticon-double-left"></span>
<span>后 退</span>
</button>
<button class="ant-btn ant-btn-primary">
<span>前 进</span>
<span class="anticon anticon-angle-double-right"></span>
<span class="anticon anticon-double-right"></span>
</button>
</div>
<div class="ant-btn-group">
@ -56,7 +56,7 @@
<button class="ant-btn ant-btn-ghost">4</button>
<button class="ant-btn ant-btn-ghost">
<span>前 进</span>
<span class="anticon anticon-angle-double-right"></span>
<span class="anticon anticon-double-right"></span>
</button>
</div>
<h4>尺寸</h4>

32
components/iconfont/index.md
View File

@ -79,36 +79,36 @@
<span class="anticon-class">caret-circleo-left</span>
</li>
<li>
<i class="anticon anticon-angle-circle-right"></i>
<span class="anticon-class">angle-circle-right</span>
<i class="anticon anticon-circle-right"></i>
<span class="anticon-class">circle-right</span>
</li>
<li>
<i class="anticon anticon-angle-circle-left"></i>
<span class="anticon-class">angle-circle-left</span>
<i class="anticon anticon-circle-left"></i>
<span class="anticon-class">circle-left</span>
</li>
<li>
<i class="anticon anticon-angle-circleo-right"></i>
<span class="anticon-class">angle-circleo-right</span>
<i class="anticon anticon-circleo-right"></i>
<span class="anticon-class">circleo-right</span>
</li>
<li>
<i class="anticon anticon-angle-circleo-left"></i>
<span class="anticon-class">angle-circleo-left</span>
<i class="anticon anticon-circleo-left"></i>
<span class="anticon-class">circleo-left</span>
</li>
<li>
<i class="anticon anticon-angle-double-right"></i>
<span class="anticon-class">angle-double-right</span>
<i class="anticon anticon-double-right"></i>
<span class="anticon-class">double-right</span>
</li>
<li>
<i class="anticon anticon-angle-double-left"></i>
<span class="anticon-class">angle-double-left</span>
<i class="anticon anticon-double-left"></i>
<span class="anticon-class">double-left</span>
</li>
<li>
<i class="anticon anticon-angle-verticle-right"></i>
<span class="anticon-class">angle-verticle-right</span>
<i class="anticon anticon-verticle-right"></i>
<span class="anticon-class">verticle-right</span>
</li>
<li>
<i class="anticon anticon-angle-verticle-left"></i>
<span class="anticon-class">angle-verticle-left</span>
<i class="anticon anticon-verticle-left"></i>
<span class="anticon-class">verticle-left</span>
</li>
<li>
<i class="anticon anticon-forward"></i>

24
style/core/iconfont.less
View File

@ -49,18 +49,18 @@
.@{iconfont-css-prefix}-caret-circleo-right:before {content:"\e60e";}
.@{iconfont-css-prefix}-caret-circleo-left {.ie-rotate(2);}
.@{iconfont-css-prefix}-caret-circleo-left:before {content:"\e60e";.rotate(180deg);}
.@{iconfont-css-prefix}-angle-circle-right:before {content:"\e602";}
.@{iconfont-css-prefix}-angle-circle-left {.ie-rotate(2);}
.@{iconfont-css-prefix}-angle-circle-left:before {content:"\e602";.rotate(180deg);}
.@{iconfont-css-prefix}-angle-circleo-right:before {content:"\e603";}
.@{iconfont-css-prefix}-angle-circleo-left {.ie-rotate(2);}
.@{iconfont-css-prefix}-angle-circleo-left:before {content:"\e603";.rotate(180deg);}
.@{iconfont-css-prefix}-angle-double-right:before {content:"\e604";}
.@{iconfont-css-prefix}-angle-double-left {.ie-rotate(2);}
.@{iconfont-css-prefix}-angle-double-left:before {content:"\e604";.rotate(180deg);}
.@{iconfont-css-prefix}-angle-verticle-right:before {content:"\e605";}
.@{iconfont-css-prefix}-angle-verticle-left {.ie-rotate(2);}
.@{iconfont-css-prefix}-angle-verticle-left:before {content:"\e605";.rotate(180deg);}
.@{iconfont-css-prefix}-circle-right:before {content:"\e602";}
.@{iconfont-css-prefix}-circle-left {.ie-rotate(2);}
.@{iconfont-css-prefix}-circle-left:before {content:"\e602";.rotate(180deg);}
.@{iconfont-css-prefix}-circleo-right:before {content:"\e603";}
.@{iconfont-css-prefix}-circleo-left {.ie-rotate(2);}
.@{iconfont-css-prefix}-circleo-left:before {content:"\e603";.rotate(180deg);}
.@{iconfont-css-prefix}-double-right:before {content:"\e604";}
.@{iconfont-css-prefix}-double-left {.ie-rotate(2);}
.@{iconfont-css-prefix}-double-left:before {content:"\e604";.rotate(180deg);}
.@{iconfont-css-prefix}-verticle-right:before {content:"\e605";}
.@{iconfont-css-prefix}-verticle-left {.ie-rotate(2);}
.@{iconfont-css-prefix}-verticle-left:before {content:"\e605";.rotate(180deg);}
.@{iconfont-css-prefix}-forward:before {content:"\e630";}
.@{iconfont-css-prefix}-backward {.ie-rotate(2);}
.@{iconfont-css-prefix}-backward:before {content:"\e630";.rotate(180deg);}

1
style/mixins/index.less
View File

@ -11,6 +11,7 @@
// for common elements
@import "button.less";
@import "input.less";
// Layout
@import "grid.less";

56
style/mixins/input.less
View File

@ -20,3 +20,59 @@
box-shadow: 0 0 3px #23c0fa;
}
}
.input() {
position: relative;
display: block;
padding: @input-padding-vertical-base @input-padding-horizontal;
width: 100%;
font-size: @input-font-size;
line-height: @line-height-base;
color: @input-color;
background-color: @input-bg;
background-image: none;
border: 1px solid @input-border-color;
border-radius: @input-border-radius;
// Reset placeholder
.placeholder();
.transition(~"border @{duration-300} @{ease-in-out}, background @{duration-300} @{ease-in-out}, box-shadow @{duration-300} @{ease-in-out}");
&:not([disabled]):hover {
border-color: @input-hover-border-color;
}
&:focus {
@color-rgba: rgba(red(@input-focus-border-color), green(@input-focus-border-color), blue(@input-focus-border-color), .8);
border-color: @input-focus-border-color;
outline: 0;
box-shadow: 0 0 3px @color-rgba;
}
&[disabled],
&[readonly],
fieldset[disabled] & {
background-color: @input-disabled-bg;
opacity: 1;
}
&[disabled],
fieldset[disabled] & {
cursor: @cursor-disabled;
}
// Reset height for `textarea`s
textarea& {
height: auto;
}
// Size
&-lg {
padding: @input-padding-lg;
font-size: @input-font-size-lg;
}
&-sm {
padding: @input-padding-vertical-sm @input-padding-horizontal;
font-size: @input-font-size-sm;
}
}

2
style/mixins/vendor-prefixes.less
View File

@ -98,7 +98,7 @@
}
// Placeholder text
.placeholder(@color: @input-color-placeholder) {
.placeholder(@color: @input-placeholder-color) {
// Firefox
&::-moz-placeholder {
color: @color;

33
style/themes/default/custom.less
View File

@ -110,4 +110,35 @@
// Container sizes
@container-sm : (720px + @grid-gutter-width);
@container-md : (940px + @grid-gutter-width);
@container-lg : (1140px + @grid-gutter-width);
@container-lg : (1140px + @grid-gutter-width);
// Form
// --------------------------------
// Legend
@legend-color : #222;
@legend-border-color : #e5e5e5;
// Input
@input-height-base: 28px;
@input-height-lg: 32px;
@input-height-sm: 22px;
@input-padding-horizontal : 7px;
@input-padding-vertical-base : 4px;
@input-padding-vertical-sm : 1px;
@input-padding-lg : 4px 7px 5px;
@input-placeholder-color : #ccc;
@input-color : #666;
@input-border-color : #d9d9d9;
@input-bg : #fff;
@input-border-radius : @border-radius-base;
@input-font-size-lg : 14px;
@input-font-size : @font-size-base;
@input-font-size-sm : @font-size-base;
@input-hover-border-color : #23c0fa;
@input-focus-border-color : #2db7f5;
@input-disabled-bg : #f3f5f7;