From dede04005b821c9747e955d416f59f8b627459e7 Mon Sep 17 00:00:00 2001 From: xjouyi Date: Tue, 28 Jun 2016 14:01:00 +0800 Subject: [PATCH] 0,1 --- .DS_Store | Bin 0 -> 6148 bytes components/.DS_Store | Bin 0 -> 6148 bytes components/BiosanUi.js | 8 + components/layout/col.jsx | 62 +++ components/layout/row.jsx | 47 +++ components/layout/style/index.js | 1 + components/layout/style/index.less | 103 +++++ components/layout/style/mixin.less | 88 +++++ components/style/core/base.less | 119 ++++++ components/style/core/iconfont.less | 201 ++++++++++ components/style/core/index.less | 4 + components/style/core/motion.less | 15 + components/style/core/motion/fade.less | 31 ++ components/style/core/motion/move.less | 120 ++++++ components/style/core/motion/other.less | 11 + components/style/core/motion/slide.less | 120 ++++++ components/style/core/motion/swing.less | 33 ++ components/style/core/motion/zoom.less | 155 ++++++++ components/style/core/normalize.less | 419 +++++++++++++++++++++ components/style/index.js | 1 + components/style/index.less | 2 + components/style/mixins/clearfix.less | 16 + components/style/mixins/compatibility.less | 59 +++ components/style/mixins/iconfont.less | 14 + components/style/mixins/index.less | 8 + components/style/mixins/motion.less | 30 ++ components/style/mixins/opacity.less | 8 + components/style/mixins/size.less | 10 + components/style/themes/default.less | 158 ++++++++ demo/js/index.js | 12 + demo/templates/index.html | 21 ++ package.json | 37 ++ webpack.config.js | 55 +++ 33 files changed, 1968 insertions(+) create mode 100644 .DS_Store create mode 100644 components/.DS_Store create mode 100644 components/BiosanUi.js create mode 100644 components/layout/col.jsx create mode 100644 components/layout/row.jsx create mode 100644 components/layout/style/index.js create mode 100644 components/layout/style/index.less create mode 100644 components/layout/style/mixin.less create mode 100644 components/style/core/base.less create mode 100644 components/style/core/iconfont.less create mode 100644 components/style/core/index.less create mode 100644 components/style/core/motion.less create mode 100644 components/style/core/motion/fade.less create mode 100644 components/style/core/motion/move.less create mode 100644 components/style/core/motion/other.less create mode 100644 components/style/core/motion/slide.less create mode 100644 components/style/core/motion/swing.less create mode 100644 components/style/core/motion/zoom.less create mode 100644 components/style/core/normalize.less create mode 100644 components/style/index.js create mode 100644 components/style/index.less create mode 100644 components/style/mixins/clearfix.less create mode 100644 components/style/mixins/compatibility.less create mode 100644 components/style/mixins/iconfont.less create mode 100644 components/style/mixins/index.less create mode 100644 components/style/mixins/motion.less create mode 100644 components/style/mixins/opacity.less create mode 100644 components/style/mixins/size.less create mode 100644 components/style/themes/default.less create mode 100644 demo/js/index.js create mode 100644 demo/templates/index.html create mode 100644 package.json create mode 100644 webpack.config.js diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 0000000000000000000000000000000000000000..d0303e74f666b84132f9b2eeaa6bd0692c188f6e GIT binary patch literal 6148 zcmeHKyH3ME5S)WZ1kt3VypjruKQO_L6bUHE51^1TC>6asevW@4vk#&eLrZ~XrQNyP z+ws{`c<%s|`P=3Om;sp54e@SaY_@JbvXjgh7JtSgR_K=7-OGAAs{T1)+%w!`i92*S z;_ud6vDaGAuRh&40?zTo%3HK}AYS7Yo7nNd`1r>5M?7(q!m$v_3GJm=Mk45Uq0Xgum94NEZ&8p=m y<=#5^INNJ0^N#ryO_w&K%0UbQxPP2v#fa*n&4sDps{qL2fB;lL+c5+{rR literal 0 HcmV?d00001 diff --git a/components/BiosanUi.js b/components/BiosanUi.js new file mode 100644 index 0000000..786ec79 --- /dev/null +++ b/components/BiosanUi.js @@ -0,0 +1,8 @@ +import Row from "./layout/row.jsx"; +import Col from "./layout/col.jsx"; + +var BiosanUi = { + Row : Row, + Col : Col +} +export default BiosanUi; \ No newline at end of file diff --git a/components/layout/col.jsx b/components/layout/col.jsx new file mode 100644 index 0000000..593591d --- /dev/null +++ b/components/layout/col.jsx @@ -0,0 +1,62 @@ +import './style/index.js'; +import React, { PropTypes } from 'react'; +import classNames from 'classnames'; + +const stringOrNumber = PropTypes.oneOfType([PropTypes.string, PropTypes.number]); +const objectOrNumber = PropTypes.oneOfType([PropTypes.object, PropTypes.number]); + +export default class Col extends React.Component{ + constructor(props){ + super(props); + this.props = props; + } + + render(){ + let props = this.props; + const { span, order, offset, push, pull, className, children,...others} = this.props; + let sizeClassObj = {}; + + ['xs', 'sm', 'md', 'lg'].forEach(size => { + let sizeProps = {}; + if (typeof props[size] === 'number') { + sizeProps.span = props[size]; + } else if (typeof props[size] === 'object') { + sizeProps = props[size] || {}; + } + sizeClassObj = { + ...sizeClassObj, + [`ant-col-${size}-${sizeProps.span}`]: sizeProps.span !== undefined, + [`ant-col-${size}-order-${sizeProps.order}`]: sizeProps.order, + [`ant-col-${size}-offset-${sizeProps.offset}`]: sizeProps.offset, + [`ant-col-${size}-push-${sizeProps.push}`]: sizeProps.push, + [`ant-col-${size}-pull-${sizeProps.pull}`]: sizeProps.pull, + }; + }); + + const classes = classNames({ + [`ant-col-${span}`]: span !== undefined, + [`ant-col-order-${order}`]: order, + [`ant-col-offset-${offset}`]: offset, + [`ant-col-push-${push}`]: push, + [`ant-col-pull-${pull}`]: pull, + [className]: !!className, + ...sizeClassObj, + }); + + return
{children}
; + } +} + +Col.propTypes = { + span: stringOrNumber, + order: stringOrNumber, + offset: stringOrNumber, + push: stringOrNumber, + pull: stringOrNumber, + className: PropTypes.string, + children: PropTypes.node, + xs: objectOrNumber, + sm: objectOrNumber, + md: objectOrNumber, + lg: objectOrNumber, +}; diff --git a/components/layout/row.jsx b/components/layout/row.jsx new file mode 100644 index 0000000..492bdd2 --- /dev/null +++ b/components/layout/row.jsx @@ -0,0 +1,47 @@ +import './style/index'; +import React,{ Children, cloneElement } from 'react'; +import classNames from 'classnames'; + +export default class Row extends React.Component{ + constructor(...args){ + super(...args); + this.gutter = 0; + } + render(){ + const { type, justify, align, className, gutter, style, children ,...others} = this.props; + const classes = classNames({ + 'ant-row': !type, + [`ant-row-${type}`]: type, + [`ant-row-${type}-${justify}`]: justify, + [`ant-row-${type}-${align}`]: align, + [className]: className, + }); + const rowStyle = gutter > 0 ? { + marginLeft: gutter / -2, + marginRight: gutter / -2, + ...style, + } : style; + const cols = Children.map(children, col => { + if (!col) return null; + + return cloneElement(col, { + style: gutter > 0 ? { + paddingLeft: gutter / 2, + paddingRight: gutter / 2, + ...col.props.style, + } : col.props.style, + }); + }); + return
{cols}
; + } +} + +Row.propTypes = { + type: React.PropTypes.string, + align: React.PropTypes.string, + justify: React.PropTypes.string, + className: React.PropTypes.string, + children: React.PropTypes.node, + gutter: React.PropTypes.number +} + diff --git a/components/layout/style/index.js b/components/layout/style/index.js new file mode 100644 index 0000000..17665f8 --- /dev/null +++ b/components/layout/style/index.js @@ -0,0 +1 @@ +import './index.less'; \ No newline at end of file diff --git a/components/layout/style/index.less b/components/layout/style/index.less new file mode 100644 index 0000000..f16251e --- /dev/null +++ b/components/layout/style/index.less @@ -0,0 +1,103 @@ +@import "../../style/themes/default"; +@import "../../style/mixins/index"; +@import "./mixin"; + + +// Grid system +.ant-row { + .make-row(); + display: block; +} + +.ant-row-flex { + display: flex; + flex-direction: row; + flex-wrap: wrap; + + &:before, + &:after { + display: flex; + } +} + +// x轴原点 +.ant-row-flex-start { + justify-content: flex-start; +} + +// x轴居中 +.ant-row-flex-center { + justify-content: center; +} + +// x轴反方向 +.ant-row-flex-end { + justify-content: flex-end; +} + +// x轴平分 +.ant-row-flex-space-between { + justify-content: space-between; +} + +// x轴有间隔地平分 +.ant-row-flex-space-around { + justify-content: space-around; +} + +// 顶部对齐 +.ant-row-flex-top { + align-items: flex-start; +} + +// 居中对齐 +.ant-row-flex-middle { + align-items: center; +} + +// 底部对齐 +.ant-row-flex-bottom { + align-items: flex-end; +} + +.ant-col { + position: relative; + display: block; +} + +.make-grid-columns(); +.make-grid(); + +// Extra small grid +// +// Columns, offsets, pushes, and pulls for extra small devices like +// smartphones. + +.make-grid(-xs); + +// Small grid +// +// Columns, offsets, pushes, and pulls for the small device range, from phones +// to tablets. + +@media (min-width: @screen-sm-min) { + .make-grid(-sm); +} + + +// Medium grid +// +// Columns, offsets, pushes, and pulls for the desktop device range. + +@media (min-width: @screen-md-min) { + .make-grid(-md); +} + + +// Large grid +// +// Columns, offsets, pushes, and pulls for the large desktop device range. + +@media (min-width: @screen-lg-min) { + .make-grid(-lg); +} \ No newline at end of file diff --git a/components/layout/style/mixin.less b/components/layout/style/mixin.less new file mode 100644 index 0000000..d238ad7 --- /dev/null +++ b/components/layout/style/mixin.less @@ -0,0 +1,88 @@ +@import "../../style/mixins/index"; + +// mixins for grid system +// ------------------------ +.make-row(@gutter: @grid-gutter-width) { + position: relative; + margin-left: (@gutter / -2); + margin-right: (@gutter / -2); + height: auto; + .clearfix; +} + +.make-grid-columns() { + .col(@index) { + @item: ~".ant-col-@{index}, .ant-col-xs-@{index}, .ant-col-sm-@{index}, .ant-col-md-@{index}, .ant-col-lg-@{index}"; + .col((@index + 1), @item); + } + .col(@index, @list) when (@index =< @grid-columns) { + @item: ~".ant-col-@{index}, .ant-col-xs-@{index}, .ant-col-sm-@{index}, .ant-col-md-@{index}, .ant-col-lg-@{index}"; + .col((@index + 1), ~"@{list}, @{item}"); + } + .col(@index, @list) when (@index > @grid-columns) { + @{list} { + position: relative; + // Prevent columns from collapsing when empty + min-height: 1px; + padding-left: (@grid-gutter-width / 2); + padding-right: (@grid-gutter-width / 2); + } + } + .col(1); +} + +.float-grid-columns(@class) { + .col(@index) { // initial + @item: ~".ant-col@{class}-@{index}"; + .col((@index + 1), @item); + } + .col(@index, @list) when (@index =< @grid-columns) { // general + @item: ~".ant-col@{class}-@{index}"; + .col((@index + 1), ~"@{list}, @{item}"); + } + .col(@index, @list) when (@index > @grid-columns) { // terminal + @{list} { + float: left; + flex: 0 0 auto; + } + } + .col(1); // kickstart it +} + +// lesshint false +.loop-grid-columns(@index, @class) when (@index > 0) { + .ant-col@{class}-@{index} { + display: block; + width: percentage((@index / @grid-columns)); + } + .ant-col@{class}-push-@{index} { + left: percentage((@index / @grid-columns)); + } + .ant-col@{class}-pull-@{index} { + right: percentage((@index / @grid-columns)); + } + .ant-col@{class}-offset-@{index} { + margin-left: percentage((@index / @grid-columns)); + } + .ant-col@{class}-order-@{index} { + order: @index; + } + .loop-grid-columns((@index - 1), @class); +} + +.loop-grid-columns(@index, @class) when (@index = 0) { + .ant-col@{class}-@{index} { + display: none; + } + .ant-col-push-@{index} { + left: auto; + } + .ant-col-pull-@{index} { + right: auto; + } +} + +.make-grid(@class: ~'') { + .float-grid-columns(@class); + .loop-grid-columns(@grid-columns, @class); +} diff --git a/components/style/core/base.less b/components/style/core/base.less new file mode 100644 index 0000000..99e50a5 --- /dev/null +++ b/components/style/core/base.less @@ -0,0 +1,119 @@ +@import "./normalize.less"; + +* { + box-sizing: border-box; + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); // remove tap highlight color for mobile safari +} + +*:before, +*:after { + box-sizing: border-box; +} + +// HTML & Body reset +html, body { + .square(100%); +} + +body { + font-family: @font-family; + font-size: @font-size-base; + line-height: @line-height-base; + color: @text-color; + background-color: @body-background; +} + +// unify the setting of elements's margin and padding for browsers +body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td,hr,button,article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section { + margin: 0; + padding: 0; +} + +// Reset fonts for relevant elements +button,input,select,textarea { + font-family: inherit; + font-size: inherit; + line-height: inherit; + color: inherit; +} + +ul, +ol { + list-style: none; +} + +// Remove the clear button of a text input control in IE10+ +input::-ms-clear, input::-ms-reveal { + display: none; +} + +::selection { + background: @primary-color; + color: #fff; +} + +// Links +a { + color: @link-color; + background: transparent; + text-decoration: none; + outline: none; + cursor: pointer; + transition: color .3s ease; + + &:hover { + color: @link-hover-color; + } + + &:active { + color: @link-active-color; + } + + &:active, + &:hover { + outline: 0; + text-decoration: none; + } + + &[disabled] { + color: #ccc; + cursor: not-allowed; + pointer-events: none; + } +} + +// Utility classes +.clearfix { + .clearfix(); +} +.pull-left { + float: left; +} +.pull-right { + float: right; +} +.hide { + display: none !important; +} +.show { + display: block !important; +} +.invisible { + visibility: hidden; +} + +.ant-divider { + margin: 0 4px; + color: #999; + display: inline-block; + height: 8px; + width: 1px; + background: #ccc; +} + +code, +kbd, +pre, +samp { + font-family: @code-family; +} diff --git a/components/style/core/iconfont.less b/components/style/core/iconfont.less new file mode 100644 index 0000000..efffb8d --- /dev/null +++ b/components/style/core/iconfont.less @@ -0,0 +1,201 @@ +// font-face +// @icon-url： 字体源文件的地址 +@font-face { + font-family: 'anticon'; + src: url('@{icon-url}.eot'); /* IE9*/ + src: url('@{icon-url}.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ + url('@{icon-url}.woff') format('woff'), /* chrome、firefox */ + url('@{icon-url}.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/ + url('@{icon-url}.svg#iconfont') format('svg'); /* iOS 4.1- */ +} + +.@{iconfont-css-prefix} { + .iconfont-mixin(); +} + +.@{iconfont-css-prefix}-caret-circle-o-up:before {content:"\e60c";} +.@{iconfont-css-prefix}-android:before {content:"\e64f";} +.@{iconfont-css-prefix}-chrome:before {content:"\e65c";} +.@{iconfont-css-prefix}-appstore-o:before {content:"\e6b2";} +.@{iconfont-css-prefix}-appstore:before {content:"\e64d";} +.@{iconfont-css-prefix}-apple:before {content:"\e64e";} +.@{iconfont-css-prefix}-github:before {content:"\e674";} +.@{iconfont-css-prefix}-inbox:before {content:"\e67b";} +.@{iconfont-css-prefix}-ie:before {content:"\e67c";} +.@{iconfont-css-prefix}-smile:before {content:"\e677";} +.@{iconfont-css-prefix}-smile-circle:before {content:"\e676";} +.@{iconfont-css-prefix}-meh-circle:before {content:"\e678";} +.@{iconfont-css-prefix}-frown:before {content:"\e673";} +.@{iconfont-css-prefix}-frown-circle:before {content:"\e672";} +.@{iconfont-css-prefix}-meh:before {content:"\e679";} +.@{iconfont-css-prefix}-pie-chart:before {content:"\e68a";} +.@{iconfont-css-prefix}-tags:before {content:"\e656";} +.@{iconfont-css-prefix}-tags-o:before {content:"\e657";} +.@{iconfont-css-prefix}-tag:before {content:"\e658";} +.@{iconfont-css-prefix}-tag-o:before {content:"\e659";} +.@{iconfont-css-prefix}-cloud:before {content:"\e65a";} +.@{iconfont-css-prefix}-cloud-upload-o:before {content:"\e697";} +.@{iconfont-css-prefix}-cloud-download-o:before {content:"\e698";} +.@{iconfont-css-prefix}-cloud-upload:before {content:"\e696";} +.@{iconfont-css-prefix}-cloud-o:before {content:"\e699";} +.@{iconfont-css-prefix}-cloud-download:before {content:"\e65b";} +.@{iconfont-css-prefix}-star-o:before {content:"\e693";} +.@{iconfont-css-prefix}-star:before {content:"\e694";} +.@{iconfont-css-prefix}-environment:before {content:"\e665";} +.@{iconfont-css-prefix}-environment-o:before {content:"\e666";} +.@{iconfont-css-prefix}-eye:before {content:"\e66e";} +.@{iconfont-css-prefix}-eye-o:before {content:"\e66d";} +.@{iconfont-css-prefix}-camera:before {content:"\e653";} +.@{iconfont-css-prefix}-camera-o:before {content:"\e652";} +.@{iconfont-css-prefix}-aliwangwang:before {content:"\e64b";} +.@{iconfont-css-prefix}-aliwangwang-o:before {content:"\e64a";} +.@{iconfont-css-prefix}-windows:before {content:"\e6a0";} +.@{iconfont-css-prefix}-shopping-cart:before {content:"\e692";} +.@{iconfont-css-prefix}-unlock:before {content:"\e69f";} +.@{iconfont-css-prefix}-lock:before {content:"\e69d";} +.@{iconfont-css-prefix}-save:before {content:"\e69e";} +.@{iconfont-css-prefix}-user:before {content:"\e69c";} +.@{iconfont-css-prefix}-video-camera:before {content:"\e69b";} +.@{iconfont-css-prefix}-to-top:before {content:"\e69a";} +.@{iconfont-css-prefix}-team:before {content:"\e680";} +.@{iconfont-css-prefix}-tablet:before {content:"\e695";} +.@{iconfont-css-prefix}-solution:before {content:"\e68f";} +.@{iconfont-css-prefix}-poweroff:before {content:"\e691";} +.@{iconfont-css-prefix}-search:before {content:"\e690";} +.@{iconfont-css-prefix}-share-alt:before {content:"\e68e";} +.@{iconfont-css-prefix}-setting:before {content:"\e68d";} +.@{iconfont-css-prefix}-poweroff:before {content:"\e68b";} +.@{iconfont-css-prefix}-picture:before {content:"\e689";} +.@{iconfont-css-prefix}-phone:before {content:"\e688";} +.@{iconfont-css-prefix}-paper-clip:before {content:"\e687";} +.@{iconfont-css-prefix}-notification:before {content:"\e686";} +.@{iconfont-css-prefix}-mobile:before {content:"\e685";} +.@{iconfont-css-prefix}-menu-fold:before {content:"\e684";} +.@{iconfont-css-prefix}-menu-unfold:before {content:"\e683";} +.@{iconfont-css-prefix}-mail:before {content:"\e682";} +.@{iconfont-css-prefix}-logout:before {content:"\e681";} +.@{iconfont-css-prefix}-link:before {content:"\e67e";} +.@{iconfont-css-prefix}-line-chart:before {content:"\e67f";} +.@{iconfont-css-prefix}-home:before {content:"\e67d";} +.@{iconfont-css-prefix}-laptop:before {content:"\e67a";} +.@{iconfont-css-prefix}-hdd:before {content:"\e675";} +.@{iconfont-css-prefix}-folder-open:before {content:"\e671";} +.@{iconfont-css-prefix}-folder:before {content:"\e670";} +.@{iconfont-css-prefix}-filter:before {content:"\e66f";} +.@{iconfont-css-prefix}-file-text:before {content:"\e66c";} +.@{iconfont-css-prefix}-file:before {content:"\e66b";} +.@{iconfont-css-prefix}-file-unknown:before {content:"\e6a6";} +.@{iconfont-css-prefix}-file-excel:before {content:"\e6ac";} +.@{iconfont-css-prefix}-file-pdf:before {content:"\e6ab";} +.@{iconfont-css-prefix}-file-jpg:before {content:"\e6aa";} +.@{iconfont-css-prefix}-file-ppt:before {content:"\e6a7";} +.@{iconfont-css-prefix}-exception:before {content:"\e66a";} +.@{iconfont-css-prefix}-export:before {content:"\e669";} +.@{iconfont-css-prefix}-desktop:before {content:"\e662";} +.@{iconfont-css-prefix}-edit:before {content:"\e668";} +.@{iconfont-css-prefix}-ellipsis:before {content:"\e667";} +.@{iconfont-css-prefix}-upload:before {content:"\e664";} +.@{iconfont-css-prefix}-download:before {content:"\e663";} +.@{iconfont-css-prefix}-delete:before {content:"\e661";} +.@{iconfont-css-prefix}-copy:before {content:"\e660";} +.@{iconfont-css-prefix}-customerservice:before {content:"\e65e";} +.@{iconfont-css-prefix}-credit-card:before {content:"\e65f";} +.@{iconfont-css-prefix}-code:before {content:"\e65d";} +.@{iconfont-css-prefix}-calendar:before {content:"\e654";} +.@{iconfont-css-prefix}-book:before {content:"\e655";} +.@{iconfont-css-prefix}-bars:before {content:"\e650";} +.@{iconfont-css-prefix}-bar-chart:before {content:"\e651";} +.@{iconfont-css-prefix}-area-chart:before {content:"\e64c";} +.@{iconfont-css-prefix}-question-circle-o:before {content:"\e648";} +.@{iconfont-css-prefix}-question:before {content:"\e649";} +.@{iconfont-css-prefix}-question-circle:before {content:"\e647";} +.@{iconfont-css-prefix}-pause-circle:before {content:"\e644";} +.@{iconfont-css-prefix}-pause:before {content:"\e646";} +.@{iconfont-css-prefix}-pause-circle-o:before {content:"\e645";} +.@{iconfont-css-prefix}-clock-circle:before {content:"\e642";} +.@{iconfont-css-prefix}-clock-circle-o:before {content:"\e643";} +.@{iconfont-css-prefix}-swap:before {content:"\e641";} +.@{iconfont-css-prefix}-swap-left:before {content:"\e63f";} +.@{iconfont-css-prefix}-swap-right:before {content:"\e640";} +.@{iconfont-css-prefix}-plus-circle:before {content:"\e63d";} +.@{iconfont-css-prefix}-plus:before {content:"\e63e";} +.@{iconfont-css-prefix}-plus-circle-o:before {content:"\e63c";} +.@{iconfont-css-prefix}-minus:before {content:"\e63b";} +.@{iconfont-css-prefix}-minus-circle-o:before {content:"\e63a";} +.@{iconfont-css-prefix}-minus-circle:before {content:"\e639";} +.@{iconfont-css-prefix}-plus-square:before {content:"\e6ae";} +.@{iconfont-css-prefix}-minus-square:before {content:"\e6ad";} +.@{iconfont-css-prefix}-info-circle-o:before {content:"\e638";} +.@{iconfont-css-prefix}-info-circle:before {content:"\e637";} +.@{iconfont-css-prefix}-info:before {content:"\e636";} +.@{iconfont-css-prefix}-exclamation-circle:before {content:"\e634";} +.@{iconfont-css-prefix}-exclamation-circle-o:before {content:"\e635";} +.@{iconfont-css-prefix}-exclamation:before {content:"\e633";} +.@{iconfont-css-prefix}-cross-circle:before {content:"\e631";} +.@{iconfont-css-prefix}-cross-circle-o:before {content:"\e632";} +.@{iconfont-css-prefix}-check-circle:before {content:"\e62f";} +.@{iconfont-css-prefix}-check-circle-o:before {content:"\e630";} +.@{iconfont-css-prefix}-cross:before {content:"\e62d";} +.@{iconfont-css-prefix}-check:before {content:"\e62e";} +.@{iconfont-css-prefix}-verticle-right:before {content:"\e62c";} +.@{iconfont-css-prefix}-verticle-left:before {content:"\e62b";} +.@{iconfont-css-prefix}-rollback:before {content:"\e62a";} +.@{iconfont-css-prefix}-enter:before {content:"\e6b6";} +.@{iconfont-css-prefix}-retweet:before {content:"\e627";} +.@{iconfont-css-prefix}-shrink:before {content:"\e628";} +.@{iconfont-css-prefix}-arrow-salt:before {content:"\e629";} +.@{iconfont-css-prefix}-reload:before {content:"\e626";} +.@{iconfont-css-prefix}-double-right:before {content:"\e625";} +.@{iconfont-css-prefix}-double-left:before {content:"\e624";} +.@{iconfont-css-prefix}-arrow-right:before {content:"\e621";} +.@{iconfont-css-prefix}-arrow-up:before {content:"\e622";} +.@{iconfont-css-prefix}-arrow-down:before {content:"\e623";} +.@{iconfont-css-prefix}-arrow-left:before {content:"\e620";} +.@{iconfont-css-prefix}-left:before {content:"\e601";} +.@{iconfont-css-prefix}-right:before {content:"\e600";} +.@{iconfont-css-prefix}-down:before {content:"\e603";} +.@{iconfont-css-prefix}-up:before {content:"\e602";} +.@{iconfont-css-prefix}-play-circle:before {content:"\e61e";} +.@{iconfont-css-prefix}-play-circle-o:before {content:"\e61f";} +.@{iconfont-css-prefix}-circle-left:before {content:"\e61b";} +.@{iconfont-css-prefix}-circle-up:before {content:"\e61c";} +.@{iconfont-css-prefix}-circle-down:before {content:"\e61d";} +.@{iconfont-css-prefix}-circle-right:before {content:"\e61a";} +.@{iconfont-css-prefix}-circle-o-right:before {content:"\e616";} +.@{iconfont-css-prefix}-circle-o-up:before {content:"\e618";} +.@{iconfont-css-prefix}-circle-o-down:before {content:"\e617";} +.@{iconfont-css-prefix}-circle-o-left:before {content:"\e619";} +.@{iconfont-css-prefix}-step-backward:before {content:"\e614";} +.@{iconfont-css-prefix}-step-forward:before {content:"\e615";} +.@{iconfont-css-prefix}-fast-backward:before {content:"\e613";} +.@{iconfont-css-prefix}-fast-forward:before {content:"\e612";} +.@{iconfont-css-prefix}-caret-left:before {content:"\e60f";} +.@{iconfont-css-prefix}-caret-right:before {content:"\e60a";} +.@{iconfont-css-prefix}-caret-down:before {content:"\e611";} +.@{iconfont-css-prefix}-caret-up:before {content:"\e610";} +.@{iconfont-css-prefix}-forward:before {content:"\e608";} +.@{iconfont-css-prefix}-backward:before {content:"\e609";} +.@{iconfont-css-prefix}-caret-circle-o-down:before {content:"\e60e";} +.@{iconfont-css-prefix}-caret-circle-o-right:before {content:"\e60d";} +.@{iconfont-css-prefix}-caret-circle-o-left:before {content:"\e60b";} +.@{iconfont-css-prefix}-caret-circle-left:before {content:"\e604";} +.@{iconfont-css-prefix}-caret-circle-right:before {content:"\e605";} +.@{iconfont-css-prefix}-caret-circle-up:before {content:"\e606";} +.@{iconfont-css-prefix}-caret-circle-down:before {content:"\e607";} +.@{iconfont-css-prefix}-qrcode:before {content:"\e6a5";} +.@{iconfont-css-prefix}-scan:before {content:"\e6af";} +.@{iconfont-css-prefix}-like:before {content:"\e6a3";} +.@{iconfont-css-prefix}-dislike:before {content:"\e6a2";} +.@{iconfont-css-prefix}-pay-circle:before {content:"\e6a8";} +.@{iconfont-css-prefix}-pay-circle-o:before {content:"\e6a9";} +.@{iconfont-css-prefix}-message:before {content:"\e6a4";} +.@{iconfont-css-prefix}-heart:before {content:"\e68c";} +.@{iconfont-css-prefix}-heart-o:before {content:"\e6b0";} +.@{iconfont-css-prefix}-calculator:before {content:"\e6b1";} +.@{iconfont-css-prefix}-pushpin:before {content:"\e6b5";} +.@{iconfont-css-prefix}-pushpin-o:before {content:"\e6b3";} +.@{iconfont-css-prefix}-loading:before { + display: inline-block; + animation: loadingCircle 1s infinite linear; + content:"\e6a1"; +} diff --git a/components/style/core/index.less b/components/style/core/index.less new file mode 100644 index 0000000..4901d06 --- /dev/null +++ b/components/style/core/index.less @@ -0,0 +1,4 @@ +@import "../mixins/index"; +@import "base"; +@import "iconfont"; +@import "motion"; diff --git a/components/style/core/motion.less b/components/style/core/motion.less new file mode 100644 index 0000000..121692e --- /dev/null +++ b/components/style/core/motion.less @@ -0,0 +1,15 @@ +@import "../mixins/motion"; +@import "motion/fade"; +@import "motion/move"; +@import "motion/other"; +@import "motion/slide"; +@import "motion/swing"; +@import "motion/zoom"; + +// For common/openAnimation +.ant-motion-collapse { + overflow: hidden; + &-active { + transition: height .2s @ease-out; + } +} diff --git a/components/style/core/motion/fade.less b/components/style/core/motion/fade.less new file mode 100644 index 0000000..fd9d621 --- /dev/null +++ b/components/style/core/motion/fade.less @@ -0,0 +1,31 @@ +.fade-motion(@className, @keyframeName) { + .make-motion(@className, @keyframeName); + .@{className}-enter, + .@{className}-appear { + opacity: 0; + animation-timing-function: linear; + } + .@{className}-leave { + animation-timing-function: linear; + } +} + +.fade-motion(fade, antFade); + +@keyframes antFadeIn { + 0% { + opacity: 0; + } + 100% { + opacity: 1; + } +} + +@keyframes antFadeOut { + 0% { + opacity: 1; + } + 100% { + opacity: 0; + } +} diff --git a/components/style/core/motion/move.less b/components/style/core/motion/move.less new file mode 100644 index 0000000..2eed39b --- /dev/null +++ b/components/style/core/motion/move.less @@ -0,0 +1,120 @@ +.move-motion(@className, @keyframeName) { + .make-motion(@className, @keyframeName); + .@{className}-enter, + .@{className}-appear { + opacity: 0; + animation-timing-function: @ease-out-circ; + } + .@{className}-leave { + animation-timing-function: @ease-in-circ; + } +} + +.move-motion(move-up, antMoveUp); +.move-motion(move-down, antMoveDown); +.move-motion(move-left, antMoveLeft); +.move-motion(move-right, antMoveRight); + +@keyframes antMoveDownIn { + 0% { + transform-origin: 0 0; + transform: translateY(100%); + opacity: 0; + } + 100% { + transform-origin: 0 0; + transform: translateY(0%); + opacity: 1; + } +} + +@keyframes antMoveDownOut { + 0% { + transform-origin: 0 0; + transform: translateY(0%); + opacity: 1; + } + 100% { + transform-origin: 0 0; + transform: translateY(100%); + opacity: 0; + } +} + +@keyframes antMoveLeftIn { + 0% { + transform-origin: 0 0; + transform: translateX(-100%); + opacity: 0; + } + 100% { + transform-origin: 0 0; + transform: translateX(0%); + opacity: 1; + } +} + +@keyframes antMoveLeftOut { + 0% { + transform-origin: 0 0; + transform: translateX(0%); + opacity: 1; + } + 100% { + transform-origin: 0 0; + transform: translateX(-100%); + opacity: 0; + } +} + +@keyframes antMoveRightIn { + 0% { + opacity: 0; + transform-origin: 0 0; + transform: translateX(100%); + } + 100% { + opacity: 1; + transform-origin: 0 0; + transform: translateX(0%); + } +} + +@keyframes antMoveRightOut { + 0% { + transform-origin: 0 0; + transform: translateX(0%); + opacity: 1; + } + 100% { + transform-origin: 0 0; + transform: translateX(100%); + opacity: 0; + } +} + +@keyframes antMoveUpIn { + 0% { + transform-origin: 0 0; + transform: translateY(-100%); + opacity: 0; + } + 100% { + transform-origin: 0 0; + transform: translateY(0%); + opacity: 1; + } +} + +@keyframes antMoveUpOut { + 0% { + transform-origin: 0 0; + transform: translateY(0%); + opacity: 1; + } + 100% { + transform-origin: 0 0; + transform: translateY(-100%); + opacity: 0; + } +} diff --git a/components/style/core/motion/other.less b/components/style/core/motion/other.less new file mode 100644 index 0000000..837b7a1 --- /dev/null +++ b/components/style/core/motion/other.less @@ -0,0 +1,11 @@ +@keyframes loadingCircle { + 0% { + transform-origin: 50% 50%; + transform: rotate(0deg); + } + 100% { + transform-origin: 50% 50%; + transform: rotate(360deg); + } +} + diff --git a/components/style/core/motion/slide.less b/components/style/core/motion/slide.less new file mode 100644 index 0000000..216cff0 --- /dev/null +++ b/components/style/core/motion/slide.less @@ -0,0 +1,120 @@ +.slide-motion(@className, @keyframeName) { + .make-motion(@className, @keyframeName); + .@{className}-enter, + .@{className}-appear { + opacity: 0; + animation-timing-function: @ease-out-quint; + } + .@{className}-leave { + animation-timing-function: @ease-in-quint; + } +} + +.slide-motion(slide-up, antSlideUp); +.slide-motion(slide-down, antSlideDown); +.slide-motion(slide-left, antSlideLeft); +.slide-motion(slide-right, antSlideRight); + +@keyframes antSlideUpIn { + 0% { + opacity: 0; + transform-origin: 0% 0%; + transform: scaleY(.8); + } + 100% { + opacity: 1; + transform-origin: 0% 0%; + transform: scaleY(1); + } +} + +@keyframes antSlideUpOut { + 0% { + opacity: 1; + transform-origin: 0% 0%; + transform: scaleY(1); + } + 100% { + opacity: 0; + transform-origin: 0% 0%; + transform: scaleY(.8); + } +} + +@keyframes antSlideDownIn { + 0% { + opacity: 0; + transform-origin: 100% 100%; + transform: scaleY(.8); + } + 100% { + opacity: 1; + transform-origin: 100% 100%; + transform: scaleY(1); + } +} + +@keyframes antSlideDownOut { + 0% { + opacity: 1; + transform-origin: 100% 100%; + transform: scaleY(1); + } + 100% { + opacity: 0; + transform-origin: 100% 100%; + transform: scaleY(.8); + } +} + +@keyframes antSlideLeftIn { + 0% { + opacity: 0; + transform-origin: 0% 0%; + transform: scaleX(.8); + } + 100% { + opacity: 1; + transform-origin: 0% 0%; + transform: scaleX(1); + } +} + +@keyframes antSlideLeftOut { + 0% { + opacity: 1; + transform-origin: 0% 0%; + transform: scaleX(1); + } + 100% { + opacity: 0; + transform-origin: 0% 0%; + transform: scaleX(.8); + } +} + +@keyframes antSlideRightIn { + 0% { + opacity: 0; + transform-origin: 100% 0%; + transform: scaleX(.8); + } + 100% { + opacity: 1; + transform-origin: 100% 0%; + transform: scaleX(1); + } +} + +@keyframes antSlideRightOut { + 0% { + opacity: 1; + transform-origin: 100% 0%; + transform: scaleX(1); + } + 100% { + opacity: 0; + transform-origin: 100% 0%; + transform: scaleX(.8); + } +} diff --git a/components/style/core/motion/swing.less b/components/style/core/motion/swing.less new file mode 100644 index 0000000..d91514d --- /dev/null +++ b/components/style/core/motion/swing.less @@ -0,0 +1,33 @@ +.swing-motion(@className, @keyframeName) { + .@{className}-enter, + .@{className}-appear { + .motion-common(); + animation-play-state: paused; + } + .@{className}-enter.@{className}-enter-active, + .@{className}-appear.@{className}-appear-active { + animation-name: ~"@{keyframeName}In"; + animation-play-state: running; + } +} + +.swing-motion(swing, antSwing); + +@keyframes antSwingIn { + 0%, + 100% { + transform: translateX(0px); + } + 20% { + transform: translateX(-10px); + } + 40% { + transform: translateX(10px); + } + 60% { + transform: translateX(-5px); + } + 80% { + transform: translateX(5px); + } +} diff --git a/components/style/core/motion/zoom.less b/components/style/core/motion/zoom.less new file mode 100644 index 0000000..0c4cba2 --- /dev/null +++ b/components/style/core/motion/zoom.less @@ -0,0 +1,155 @@ +.zoom-motion(@className, @keyframeName) { + .make-motion(@className, @keyframeName); + .@{className}-enter, + .@{className}-appear { + transform: scale(0); // need this by yiminghe + animation-timing-function: @ease-out-circ; + } + .@{className}-leave { + animation-timing-function: @ease-in-out-circ; + } +} + +.zoom-motion(zoom, antZoom); +.zoom-motion(zoom-big, antZoomBig); +.zoom-motion(zoom-up, antZoomUp); +.zoom-motion(zoom-down, antZoomDown); +.zoom-motion(zoom-left, antZoomLeft); +.zoom-motion(zoom-right, antZoomRight); + +@keyframes antZoomIn { + 0% { + opacity: 0; + transform: scale(0); + } + 100% { + opacity: 1; + transform: scale(1); + } +} + +@keyframes antZoomOut { + 0% { + transform: scale(1); + } + 100% { + opacity: 0; + transform: scale(0); + } +} + +@keyframes antZoomBigIn { + 0% { + opacity: 0; + transform: scale(.8); + } + 100% { + transform: scale(1); + } +} + +@keyframes antZoomBigOut { + 0% { + transform: scale(1); + } + 100% { + opacity: 0; + transform: scale(.8); + } +} + +@keyframes antZoomUpIn { + 0% { + opacity: 0; + transform-origin: 50% 0%; + transform: scale(.8); + } + 100% { + transform-origin: 50% 0%; + transform: scale(1); + } +} + +@keyframes antZoomUpOut { + 0% { + transform-origin: 50% 0%; + transform: scale(1); + } + 100% { + opacity: 0; + transform-origin: 50% 0%; + transform: scale(.8); + } +} + +@keyframes antZoomLeftIn { + 0% { + opacity: 0; + transform-origin: 0% 50%; + transform: scale(.8); + } + 100% { + transform-origin: 0% 50%; + transform: scale(1); + } +} + +@keyframes antZoomLeftOut { + 0% { + transform-origin: 0% 50%; + transform: scale(1); + } + 100% { + opacity: 0; + transform-origin: 0% 50%; + transform: scale(.8); + } +} + +@keyframes antZoomRightIn { + 0% { + opacity: 0; + transform-origin: 100% 50%; + transform: scale(.8); + } + 100% { + transform-origin: 100% 50%; + transform: scale(1); + } +} + +@keyframes antZoomRightOut { + 0% { + transform-origin: 100% 50%; + transform: scale(1); + } + 100% { + opacity: 0; + transform-origin: 100% 50%; + transform: scale(.8); + } +} + +@keyframes antZoomDownIn { + 0% { + opacity: 0; + transform-origin: 50% 100%; + transform: scale(.8); + } + 100% { + transform-origin: 50% 100%; + transform: scale(1); + } +} + +@keyframes antZoomDownOut { + 0% { + transform-origin: 50% 100%; + transform: scale(1); + } + 100% { + opacity: 0; + transform-origin: 50% 100%; + transform: scale(.8); + } +} diff --git a/components/style/core/normalize.less b/components/style/core/normalize.less new file mode 100644 index 0000000..18ddf7f --- /dev/null +++ b/components/style/core/normalize.less @@ -0,0 +1,419 @@ +/*! normalize.css v4.1.1 | MIT License | github.com/necolas/normalize.css */ + +/** + * 1. Change the default font family in all browsers (opinionated). + * 2. Prevent adjustments of font size after orientation changes in IE and iOS. + */ + +html { + font-family: sans-serif; /* 1 */ + -ms-text-size-adjust: 100%; /* 2 */ + -webkit-text-size-adjust: 100%; /* 2 */ +} + +/** + * Remove the margin in all browsers (opinionated). + */ + +body { + margin: 0; +} + +/* HTML5 display definitions + ========================================================================== */ + +/** + * Add the correct display in IE 9-. + * 1. Add the correct display in Edge, IE, and Firefox. + * 2. Add the correct display in IE. + */ + +article, +aside, +details, /* 1 */ +figcaption, +figure, +footer, +header, +main, /* 2 */ +menu, +nav, +section, +summary { /* 1 */ + display: block; +} + +/** + * Add the correct display in IE 9-. + */ + +audio, +canvas, +progress, +video { + display: inline-block; +} + +/** + * Add the correct display in iOS 4-7. + */ + +audio:not([controls]) { + display: none; + height: 0; +} + +/** + * Add the correct vertical alignment in Chrome, Firefox, and Opera. + */ + +progress { + vertical-align: baseline; +} + +/** + * Add the correct display in IE 10-. + * 1. Add the correct display in IE. + */ + +template, /* 1 */ +[hidden] { + display: none; +} + +/* Links + ========================================================================== */ + +/** + * 1. Remove the gray background on active links in IE 10. + * 2. Remove gaps in links underline in iOS 8+ and Safari 8+. + */ + +a { + background-color: transparent; /* 1 */ + -webkit-text-decoration-skip: objects; /* 2 */ +} + +/** + * Remove the outline on focused links when they are also active or hovered + * in all browsers (opinionated). + */ + +a:active, +a:hover { + outline-width: 0; +} + +/* Text-level semantics + ========================================================================== */ + +/** + * 1. Remove the bottom border in Firefox 39-. + * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. + */ + +abbr[title] { + border-bottom: none; /* 1 */ + text-decoration: underline; /* 2 */ + text-decoration: underline dotted; /* 2 */ +} + +/** + * Prevent the duplicate application of `bolder` by the next rule in Safari 6. + */ + +b, +strong { + font-weight: inherit; +} + +/** + * Add the correct font weight in Chrome, Edge, and Safari. + */ + +b, +strong { + font-weight: bolder; +} + +/** + * Add the correct font style in Android 4.3-. + */ + +dfn { + font-style: italic; +} + +/** + * Correct the font size and margin on `h1` elements within `section` and + * `article` contexts in Chrome, Firefox, and Safari. + */ + +h1 { + font-size: 2em; + margin: 0.67em 0; +} + +/** + * Add the correct background and color in IE 9-. + */ + +mark { + background-color: #ff0; + color: #000; +} + +/** + * Add the correct font size in all browsers. + */ + +small { + font-size: 80%; +} + +/** + * Prevent `sub` and `sup` elements from affecting the line height in + * all browsers. + */ + +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} + +sub { + bottom: -0.25em; +} + +sup { + top: -0.5em; +} + +/* Embedded content + ========================================================================== */ + +/** + * Remove the border on images inside links in IE 10-. + */ + +img { + border-style: none; +} + +/** + * Hide the overflow in IE. + */ + +svg:not(:root) { + overflow: hidden; +} + +/* Grouping content + ========================================================================== */ + +/** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ + +code, +kbd, +pre, +samp { + font-family: monospace, monospace; /* 1 */ + font-size: 1em; /* 2 */ +} + +/** + * Add the correct margin in IE 8. + */ + +figure { + margin: 1em 40px; +} + +/** + * 1. Add the correct box sizing in Firefox. + * 2. Show the overflow in Edge and IE. + */ + +hr { + box-sizing: content-box; /* 1 */ + height: 0; /* 1 */ + overflow: visible; /* 2 */ +} + +/* Forms + ========================================================================== */ + +/** + * 1. Change font properties to `inherit` in all browsers (opinionated). + * 2. Remove the margin in Firefox and Safari. + */ + +button, +input, +select, +textarea { + font: inherit; /* 1 */ + margin: 0; /* 2 */ +} + +/** + * Restore the font weight unset by the previous rule. + */ + +optgroup { + font-weight: bold; +} + +/** + * Show the overflow in IE. + * 1. Show the overflow in Edge. + */ + +button, +input { /* 1 */ + overflow: visible; +} + +/** + * Remove the inheritance of text transform in Edge, Firefox, and IE. + * 1. Remove the inheritance of text transform in Firefox. + */ + +button, +select { /* 1 */ + text-transform: none; +} + +/** + * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video` + * controls in Android 4. + * 2. Correct the inability to style clickable types in iOS and Safari. + */ + +button, +html [type="button"], /* 1 */ +[type="reset"], +[type="submit"] { + -webkit-appearance: button; /* 2 */ +} + +/** + * Remove the inner border and padding in Firefox. + */ + +button::-moz-focus-inner, +[type="button"]::-moz-focus-inner, +[type="reset"]::-moz-focus-inner, +[type="submit"]::-moz-focus-inner { + border-style: none; + padding: 0; +} + +/** + * Restore the focus styles unset by the previous rule. + */ + +button:-moz-focusring, +[type="button"]:-moz-focusring, +[type="reset"]:-moz-focusring, +[type="submit"]:-moz-focusring { + outline: 1px dotted ButtonText; +} + +/** + * Change the border, margin, and padding in all browsers (opinionated). + */ + +fieldset { + border: 1px solid #c0c0c0; + margin: 0 2px; + padding: 0.35em 0.625em 0.75em; +} + +/** + * 1. Correct the text wrapping in Edge and IE. + * 2. Correct the color inheritance from `fieldset` elements in IE. + * 3. Remove the padding so developers are not caught out when they zero out + * `fieldset` elements in all browsers. + */ + +legend { + box-sizing: border-box; /* 1 */ + color: inherit; /* 2 */ + display: table; /* 1 */ + max-width: 100%; /* 1 */ + padding: 0; /* 3 */ + white-space: normal; /* 1 */ +} + +/** + * Remove the default vertical scrollbar in IE. + */ + +textarea { + overflow: auto; +} + +/** + * 1. Add the correct box sizing in IE 10-. + * 2. Remove the padding in IE 10-. + */ + +[type="checkbox"], +[type="radio"] { + box-sizing: border-box; /* 1 */ + padding: 0; /* 2 */ +} + +/** + * Correct the cursor style of increment and decrement buttons in Chrome. + */ + +[type="number"]::-webkit-inner-spin-button, +[type="number"]::-webkit-outer-spin-button { + height: auto; +} + +/** + * 1. Correct the odd appearance in Chrome and Safari. + * 2. Correct the outline style in Safari. + */ + +[type="search"] { + -webkit-appearance: textfield; /* 1 */ + outline-offset: -2px; /* 2 */ +} + +/** + * Remove the inner padding and cancel buttons in Chrome and Safari on OS X. + */ + +[type="search"]::-webkit-search-cancel-button, +[type="search"]::-webkit-search-decoration { + -webkit-appearance: none; +} + +/** + * Correct the text style of placeholders in Chrome, Edge, and Safari. + */ + +::-webkit-input-placeholder { + color: inherit; + opacity: 0.54; +} + +/** + * 1. Correct the inability to style clickable types in iOS and Safari. + * 2. Change font properties to `inherit` in Safari. + */ + +::-webkit-file-upload-button { + -webkit-appearance: button; /* 1 */ + font: inherit; /* 2 */ +} diff --git a/components/style/index.js b/components/style/index.js new file mode 100644 index 0000000..d74e52e --- /dev/null +++ b/components/style/index.js @@ -0,0 +1 @@ +import './index.less'; diff --git a/components/style/index.less b/components/style/index.less new file mode 100644 index 0000000..ce4b88c --- /dev/null +++ b/components/style/index.less @@ -0,0 +1,2 @@ +@import "./themes/default"; +@import "./core/index.less"; diff --git a/components/style/mixins/clearfix.less b/components/style/mixins/clearfix.less new file mode 100644 index 0000000..bf39fbd --- /dev/null +++ b/components/style/mixins/clearfix.less @@ -0,0 +1,16 @@ +// mixins for clearfix +// ------------------------ +.clearfix() { + zoom: 1; + &:before, + &:after { + content: " "; + display: table; + } + &:after { + clear: both; + visibility: hidden; + font-size: 0; + height: 0; + } +} \ No newline at end of file diff --git a/components/style/mixins/compatibility.less b/components/style/mixins/compatibility.less new file mode 100644 index 0000000..259c18d --- /dev/null +++ b/components/style/mixins/compatibility.less @@ -0,0 +1,59 @@ +// Compatibility for browsers. + +// rotate for ie8 and blow +.ie-rotate(@rotation) { + -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=@{rotation})"; +} + +// rotate for ie8 and blow +// degrees unit +.ie-rotate-via-degrees(@degrees) { + /* IE6-IE8 */ + @radians: ~`parseInt("@{degrees}") * Math.PI * 2 / 360`; + @costheta: ~`Math.cos("@{radians}")`; + @sintheta: ~`Math.sin("@{radians}")`; + @negsintheta: ~`"@{sintheta}" * -1`; + -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=@{costheta}, M12=@{negsintheta}, M21=@{sintheta}, M22=@{costheta})"; + zoom: 1; + + :root & { + filter: none; + } +} + +// support rotate for all browsers +.cross-rotate(@degrees) { + .rotate(@degrees); + .ie-rotate-via-degrees(@degrees); +} + +// for iconfont font size +// fix chrome 12px bug, support ie +.iconfont-size-under-12px(@size, @rotate: 0deg) { + display: inline-block; + @font-scale: unit(@size/@font-size-base); + font-size: @font-size-base; + font-size: ~"@{size} \9"; // ie8-9 + transform: scale(@font-scale) rotate(@rotate); + .ie-rotate-via-degrees(@rotate); + :root & { + font-size: @font-size-base; // reset ie9 and above + } +} + +// Placeholder text +.placeholder(@color: @input-placeholder-color) { + // Firefox + &::-moz-placeholder { + color: @color; + opacity: 1; // Override Firefox's unusual default opacity; see https://github.com/twbs/bootstrap/pull/11526 + } + // Internet Explorer 10+ + &:-ms-input-placeholder { + color: @color; + } + // Safari and Chrome + &::-webkit-input-placeholder { + color: @color; + } +} diff --git a/components/style/mixins/iconfont.less b/components/style/mixins/iconfont.less new file mode 100644 index 0000000..4c2478e --- /dev/null +++ b/components/style/mixins/iconfont.less @@ -0,0 +1,14 @@ +.iconfont-mixin() { + display: inline-block; + font-style: normal; + vertical-align: baseline; + text-align: center; + text-transform: none; + text-rendering: auto; + line-height: 1; + + &:before { + display: block; + font-family: "anticon" !important; + } +} diff --git a/components/style/mixins/index.less b/components/style/mixins/index.less new file mode 100644 index 0000000..17b465c --- /dev/null +++ b/components/style/mixins/index.less @@ -0,0 +1,8 @@ +// Mixins +// -------------------------------------------------- +@import "opacity.less"; +@import "size.less"; +@import "compatibility"; +@import "clearfix"; +@import "iconfont"; +@import "motion"; diff --git a/components/style/mixins/motion.less b/components/style/mixins/motion.less new file mode 100644 index 0000000..712004d --- /dev/null +++ b/components/style/mixins/motion.less @@ -0,0 +1,30 @@ +.motion-common() { + animation-duration: .2s; + animation-fill-mode: both; +} + +.motion-common-leave() { + animation-duration: .2s; + animation-fill-mode: both; +} + +.make-motion(@className, @keyframeName) { + .@{className}-enter, + .@{className}-appear { + .motion-common(); + animation-play-state: paused; + } + .@{className}-leave { + .motion-common-leave(); + animation-play-state: paused; + } + .@{className}-enter.@{className}-enter-active, + .@{className}-appear.@{className}-appear-active { + animation-name: ~"@{keyframeName}In"; + animation-play-state: running; + } + .@{className}-leave.@{className}-leave-active { + animation-name: ~"@{keyframeName}Out"; + animation-play-state: running; + } +} diff --git a/components/style/mixins/opacity.less b/components/style/mixins/opacity.less new file mode 100644 index 0000000..33ed25c --- /dev/null +++ b/components/style/mixins/opacity.less @@ -0,0 +1,8 @@ +// Opacity + +.opacity(@opacity) { + opacity: @opacity; + // IE8 filter + @opacity-ie: (@opacity * 100); + filter: ~"alpha(opacity=@{opacity-ie})"; +} diff --git a/components/style/mixins/size.less b/components/style/mixins/size.less new file mode 100644 index 0000000..a8be650 --- /dev/null +++ b/components/style/mixins/size.less @@ -0,0 +1,10 @@ +// Sizing shortcuts + +.size(@width; @height) { + width: @width; + height: @height; +} + +.square(@size) { + .size(@size; @size); +} diff --git a/components/style/themes/default.less b/components/style/themes/default.less new file mode 100644 index 0000000..f3dcb3a --- /dev/null +++ b/components/style/themes/default.less @@ -0,0 +1,158 @@ +// Color +@primary-color : #2db7f5; +@info-color : #2db7f5; +@success-color : #87d068; +@error-color : #f50; +@warning-color : #fa0; + +// ------ Base & Require ------ +@body-background : #fff; + +@font-family : "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif; +@code-family : Consolas,Menlo,Courier,monospace; +@text-color : #666; +@font-size-base : 12px; +@line-height-base : 1.5; +@line-height-computed : floor((@font-size-base * @line-height-base)); +@border-radius-base : 6px; +@border-radius-sm : 4px; + +// ICONFONT +@iconfont-css-prefix : anticon; +@icon-url : "https://at.alicdn.com/t/font_1463992151_360388"; + +// LINK +@link-color : #2db7f5; +@link-hover-color : tint(@link-color, 20%); +@link-active-color : shade(@link-color, 5%); +@link-hover-decoration : none; + +// Disabled cursor for form controls and buttons. +@cursor-disabled : not-allowed; + +// Animation +@ease-out : cubic-bezier(0.215, 0.61, 0.355, 1); +@ease-in : cubic-bezier(0.55, 0.055, 0.675, 0.19); +@ease-in-out : cubic-bezier(0.645, 0.045, 0.355, 1); +@ease-out-back : cubic-bezier(0.12, 0.4, 0.29, 1.46); +@ease-in-back : cubic-bezier(0.71, -0.46, 0.88, 0.6); +@ease-in-out-back : cubic-bezier(0.71, -0.46, 0.29, 1.46); +@ease-out-circ : cubic-bezier(0.08, 0.82, 0.17, 1); +@ease-in-circ : cubic-bezier(0.6, 0.04, 0.98, 0.34); +@ease-in-out-circ : cubic-bezier(0.78, 0.14, 0.15, 0.86); +@ease-out-quint : cubic-bezier(0.23, 1, 0.32, 1); +@ease-in-quint : cubic-bezier(0.755, 0.05, 0.855, 0.06); +@ease-in-out-quint : cubic-bezier(0.86, 0, 0.07, 1); + +// Border color +@border-color-base : #d9d9d9; // base border outline a component +@border-color-split : #e9e9e9; // split border inside a component + +// Shadow +@shadow-color : rgba(100, 100, 100, .2); +@box-shadow-base : @shadow-1-down; +@shadow-1-up : 0 -1px 6px @shadow-color; +@shadow-1-down : 0 1px 6px @shadow-color; +@shadow-1-left : -1px 0 6px @shadow-color; +@shadow-1-right : 1px 0 6px @shadow-color; +@shadow-2 : 0 1px 8px @shadow-color; + +// Buttons +@btn-font-weight : 500; + +@btn-primary-color : #fff; +@btn-primary-bg : @primary-color; +@btn-group-border : shade(@primary-color, 5%); + +@btn-default-color : @text-color; +@btn-default-bg : #f7f7f7; +@btn-default-border : @border-color-base; + +@btn-ghost-color : @text-color; +@btn-ghost-bg : transparent; +@btn-ghost-border : @border-color-base; + +@btn-disable-color : #ccc; +@btn-disable-bg : #f7f7f7; +@btn-disable-border : @border-color-base; + +@btn-padding-base : 4px 15px; + +@btn-font-size-lg : 14px; +@btn-padding-lg : 4px 15px 5px 15px; + +@btn-padding-sm : 1px 7px; + +@btn-circle-size : 28px; +@btn-circle-size-lg : 32px; +@btn-circle-size-sm : 22px; + +// Media queries breakpoints +// Extra small screen / phone +@screen-xs : 480px; +@screen-xs-min : @screen-xs; +@screen-xs-max : (@screen-xs-min - 1); + +// Small screen / tablet +@screen-sm : 768px; +@screen-sm-min : @screen-sm; +@screen-sm-max : (@screen-sm-min - 1); + +// Medium screen / desktop +@screen-md : 992px; +@screen-md-min : @screen-md; +@screen-md-max : (@screen-md-min - 1); + +// Large screen / wide desktop +@screen-lg : 1200px; +@screen-lg-min : @screen-lg; +@screen-lg-max : (@screen-lg-min - 1); + +// Layout and Grid system +@grid-columns : 24; +@grid-gutter-width : 0; + +// Container sizes +@container-sm : (720px + @grid-gutter-width); +@container-md : (940px + @grid-gutter-width); +@container-lg : (1140px + @grid-gutter-width); + +// z-index list +@zindex-affix : 10; +@zindex-modal-mask : 1000; +@zindex-modal : 1000; +@zindex-notification : 1010; +@zindex-message : 1010; +@zindex-popover : 1030; +@zindex-picker : 1050; +@zindex-dropdown : 1050; +@zindex-tooltip : 1060; + +// Form +// -------------------------------- +// Legend +@legend-color : #999; +@legend-border-color : @border-color-base; +// Label +@label-required-color : #f50; +@label-color : @text-color; +// 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-vertical-lg : 6px; + +@input-placeholder-color : #ccc; +@input-color : @text-color; +@input-border-color : @border-color-base; +@input-bg : #fff; + +@input-hover-border-color : @primary-color; +@input-focus-border-color : @primary-color; +@input-disabled-bg : #f7f7f7; + +@form-item-margin-bottom : 24px; diff --git a/demo/js/index.js b/demo/js/index.js new file mode 100644 index 0000000..95f81ee --- /dev/null +++ b/demo/js/index.js @@ -0,0 +1,12 @@ +import React from 'react'; +import ReactDOM from 'react-dom'; +import BiosanUi from '../../components/BiosanUi.js' + +var Row = BiosanUi.Row; +var Col = BiosanUi.Col; + +const DemoBox = props =>

{props.children}

; + +ReactDOM.render( +, + document.getElementById('hello')); \ No newline at end of file diff --git a/demo/templates/index.html b/demo/templates/index.html new file mode 100644 index 0000000..97d8f6a --- /dev/null +++ b/demo/templates/index.html @@ -0,0 +1,21 @@ + + + + + + + + + + + + + + + +
+
+ + + + diff --git a/package.json b/package.json new file mode 100644 index 0000000..113b0bd --- /dev/null +++ b/package.json @@ -0,0 +1,37 @@ +{ + "name": "biosanui", + "version": "0.1.0", + "title": "BiosanUi", + "scripts": { + "build": "webpack", + "dev": "webpack-dev-server --devtool eval --progress --colors --hot --content-base build" + }, + "dependencies": { + "classnames": "~2.2.0", + "css-animation": "^1.2.5", + "gregorian-calendar": "~4.1.0", + "gregorian-calendar-format": "~4.1.0", + "normalize.css": "^4.1.1", + "warning": "~3.0.0", + "html-webpack-plugin":"" + }, + "devDependencies": { + "babel": "", + "babel-core": "", + "babel-loader": "^6.2.4", + "babel-plugin-transform-object-assign": "^6.5.0", + "babel-plugin-transform-object-rest-spread": "", + "babel-preset-es2015": "", + "babel-preset-react": "^6.5.0", + "babel-preset-stage-0": "^6.5.0", + "react": "^15.0.0", + "react-dom": "^15.0.0", + "webpack":"", + "less":"", + "less-loader":"", + "css-loader":"", + "style-loader":"", + "react-hot-loader":"", + "webpack-dev-server":"" + } +} diff --git a/webpack.config.js b/webpack.config.js new file mode 100644 index 0000000..ded67d5 --- /dev/null +++ b/webpack.config.js @@ -0,0 +1,55 @@ +var path = require('path'); +var webpack = require('webpack'); +var HtmlWebpackPlugin = require('html-webpack-plugin'); + +module.exports = { + entry: { + index : [ + 'webpack-dev-server/client?http://localhost:8080', + 'webpack/hot/only-dev-server', + './demo/js/index.js'], + vendors :['react','react-dom'] + }, + output: { + path: './dist', + filename: '/js/[name].js' + }, + module: { + loaders: [ + { + test: /\.jsx?$/,loader: 'babel-loader', + exclude: /node_modules/, + query: {presets: ['es2015', 'react']} + }, + { + test: /\.less$/, + loader: "react-hot!style-loader!css-loader!less-loader" + } + ] + }, + plugins: [ + new webpack.optimize.CommonsChunkPlugin('vendors','/js/vendors.js'), + new webpack.NoErrorsPlugin(), + new webpack.HotModuleReplacementPlugin(), + new HtmlWebpackPlugin({ + filename: 'index.html', + template : "demo/templates/index.html", + version : "1", + inject : false + }), + new webpack.optimize.UglifyJsPlugin({ + output: { + comments: false, // remove all comments + }, + compress: { + warnings: false + } + }) + // , + // new webpack.DefinePlugin({ + // "process.env": { + // NODE_ENV: JSON.stringify("production") + // } + // }) + ] +}; \ No newline at end of file