diff --git a/src/styles/README.md b/src/styles/README.md index 63ae858..edc51b5 100644 --- a/src/styles/README.md +++ b/src/styles/README.md @@ -9,5 +9,3 @@ |-- components (组件样式) |-- mixins (混入) - -|-- themes (主题) diff --git a/src/styles/custom.less b/src/styles/custom.less new file mode 100644 index 0000000..fb3367f --- /dev/null +++ b/src/styles/custom.less @@ -0,0 +1,160 @@ +// Prefix +@css-prefix : ivu-; +@css-prefix-iconfont : ivu-icon; + +// Color +@primary-color : #3399ff; +@info-color : #2db7f5; +@success-color : #00cc66; +@warning-color : #ff9900; +@error-color : #ff5500; +@link-color : #3399ff; +@link-hover-color : tint(@link-color, 20%); +@link-active-color : shade(@link-color, 5%); +@selected-color : fade(@primary-color, 90%); +@tooltip-color : #fff; +@subsidiary-color : #9ea7b4; +@rate-star-color : #f5a623; + +// Base +@body-background : #fff; +@font-family : "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif; +@code-family : Consolas,Menlo,Courier,monospace; +@title-color : #464c5b; +@text-color : #657180; +@font-size-base : 14px; +@font-size-small : 12px; +@line-height-base : 1.5; +@line-height-computed : floor((@font-size-base * @line-height-base)); +@border-radius-base : 6px; +@border-radius-small : 4px; +@cursor-disabled : not-allowed; + +// Border color +@border-color-base : #d7dde4; // outside +@border-color-split : #e3e8ee; // inside + +// Background color +@background-color-base : #f7f7f7; // base +@background-color-select-hover: @input-disabled-bg; +@tooltip-bg : rgba(70, 76, 91, .9); +@head-bg : #f9fafc; +@table-thead-bg : #f5f7f9; +@table-td-stripe-bg : #f5f7f9; +@table-td-hover-bg : #ebf7ff; +@table-td-highlight-bg : #ebf7ff; +@menu-dark-active-bg : #313540; +@date-picker-cell-hover-bg : #e1f0fe; + +// Shadow +@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; +@shadow-down : 0 1px 6px @shadow-color; +@shadow-left : -1px 0 6px @shadow-color; +@shadow-right : 1px 0 6px @shadow-color; + +// Button +@btn-font-weight : normal; +@btn-padding-base : 6px 15px; +@btn-padding-large : 6px 15px 7px 15px; +@btn-padding-small : 2px 7px; +@btn-font-size : 12px; +@btn-font-size-large : 14px; +@btn-border-radius : 4px; +@btn-border-radius-small: 3px; +@btn-group-border : shade(@primary-color, 5%); + +@btn-disable-color : #c3cbd6; +@btn-disable-bg : @background-color-base; +@btn-disable-border : @border-color-base; + +@btn-default-color : @text-color; +@btn-default-bg : @background-color-base; +@btn-default-border : @border-color-base; + +@btn-primary-color : #fff; +@btn-primary-bg : @primary-color; + +@btn-ghost-color : @text-color; +@btn-ghost-bg : transparent; +@btn-ghost-border : @border-color-base; + +@btn-circle-size : 32px; +@btn-circle-size-large : 36px; +@btn-circle-size-small : 24px; + +// Layout and Grid +@grid-columns : 24; +@grid-gutter-width : 0; + +// Legend +@legend-color : #999; + +// Input +@input-height-base : 32px; +@input-height-large : 36px; +@input-height-small : 24px; + +@input-padding-horizontal : 7px; +@input-padding-vertical-base : 4px; +@input-padding-vertical-small: 1px; +@input-padding-vertical-large: 6px; + +@input-placeholder-color : @btn-disable-color; +@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 : #f3f3f3; + +// Tag +@tag-font-size : 12px; + +// 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); + +// Z-index +@zindex-spin : 8; +@zindex-affix : 10; +@zindex-back-top : 10; +@zindex-select : 900; +@zindex-modal : 1000; +@zindex-message : 1010; +@zindex-notification : 1010; +@zindex-tooltip : 1060; +@zindex-loading-bar : 2000; + +// Animation +@animation-time : .3s; +@transition-time : .2s; +@ease-in-out : ease-in-out; + +// Slider +@slider-color : tint(@primary-color, 20%); +@slider-height : 4px; +@slider-margin : 16px 0; +@slider-button-wrap-size : 18px; +@slider-button-wrap-offset : -4px; +@slider-disabled-color : #ccc; \ No newline at end of file diff --git a/src/styles/index.less b/src/styles/index.less index 65a7988..f0f5cd6 100644 --- a/src/styles/index.less +++ b/src/styles/index.less @@ -1,5 +1,5 @@ -@import "./themes/default/index"; +@import "./custom"; @import "./mixins/index"; @import "./common/index"; @import "./animation/index"; -@import "./components/index"; \ No newline at end of file +@import "./components/index"; diff --git a/src/styles/themes/default/custom.less b/src/styles/themes/default/custom.less deleted file mode 100644 index fb3367f..0000000 --- a/src/styles/themes/default/custom.less +++ /dev/null @@ -1,160 +0,0 @@ -// Prefix -@css-prefix : ivu-; -@css-prefix-iconfont : ivu-icon; - -// Color -@primary-color : #3399ff; -@info-color : #2db7f5; -@success-color : #00cc66; -@warning-color : #ff9900; -@error-color : #ff5500; -@link-color : #3399ff; -@link-hover-color : tint(@link-color, 20%); -@link-active-color : shade(@link-color, 5%); -@selected-color : fade(@primary-color, 90%); -@tooltip-color : #fff; -@subsidiary-color : #9ea7b4; -@rate-star-color : #f5a623; - -// Base -@body-background : #fff; -@font-family : "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif; -@code-family : Consolas,Menlo,Courier,monospace; -@title-color : #464c5b; -@text-color : #657180; -@font-size-base : 14px; -@font-size-small : 12px; -@line-height-base : 1.5; -@line-height-computed : floor((@font-size-base * @line-height-base)); -@border-radius-base : 6px; -@border-radius-small : 4px; -@cursor-disabled : not-allowed; - -// Border color -@border-color-base : #d7dde4; // outside -@border-color-split : #e3e8ee; // inside - -// Background color -@background-color-base : #f7f7f7; // base -@background-color-select-hover: @input-disabled-bg; -@tooltip-bg : rgba(70, 76, 91, .9); -@head-bg : #f9fafc; -@table-thead-bg : #f5f7f9; -@table-td-stripe-bg : #f5f7f9; -@table-td-hover-bg : #ebf7ff; -@table-td-highlight-bg : #ebf7ff; -@menu-dark-active-bg : #313540; -@date-picker-cell-hover-bg : #e1f0fe; - -// Shadow -@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; -@shadow-down : 0 1px 6px @shadow-color; -@shadow-left : -1px 0 6px @shadow-color; -@shadow-right : 1px 0 6px @shadow-color; - -// Button -@btn-font-weight : normal; -@btn-padding-base : 6px 15px; -@btn-padding-large : 6px 15px 7px 15px; -@btn-padding-small : 2px 7px; -@btn-font-size : 12px; -@btn-font-size-large : 14px; -@btn-border-radius : 4px; -@btn-border-radius-small: 3px; -@btn-group-border : shade(@primary-color, 5%); - -@btn-disable-color : #c3cbd6; -@btn-disable-bg : @background-color-base; -@btn-disable-border : @border-color-base; - -@btn-default-color : @text-color; -@btn-default-bg : @background-color-base; -@btn-default-border : @border-color-base; - -@btn-primary-color : #fff; -@btn-primary-bg : @primary-color; - -@btn-ghost-color : @text-color; -@btn-ghost-bg : transparent; -@btn-ghost-border : @border-color-base; - -@btn-circle-size : 32px; -@btn-circle-size-large : 36px; -@btn-circle-size-small : 24px; - -// Layout and Grid -@grid-columns : 24; -@grid-gutter-width : 0; - -// Legend -@legend-color : #999; - -// Input -@input-height-base : 32px; -@input-height-large : 36px; -@input-height-small : 24px; - -@input-padding-horizontal : 7px; -@input-padding-vertical-base : 4px; -@input-padding-vertical-small: 1px; -@input-padding-vertical-large: 6px; - -@input-placeholder-color : @btn-disable-color; -@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 : #f3f3f3; - -// Tag -@tag-font-size : 12px; - -// 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); - -// Z-index -@zindex-spin : 8; -@zindex-affix : 10; -@zindex-back-top : 10; -@zindex-select : 900; -@zindex-modal : 1000; -@zindex-message : 1010; -@zindex-notification : 1010; -@zindex-tooltip : 1060; -@zindex-loading-bar : 2000; - -// Animation -@animation-time : .3s; -@transition-time : .2s; -@ease-in-out : ease-in-out; - -// Slider -@slider-color : tint(@primary-color, 20%); -@slider-height : 4px; -@slider-margin : 16px 0; -@slider-button-wrap-size : 18px; -@slider-button-wrap-offset : -4px; -@slider-disabled-color : #ccc; \ No newline at end of file diff --git a/src/styles/themes/default/index.less b/src/styles/themes/default/index.less deleted file mode 100644 index d7c7bb4..0000000 --- a/src/styles/themes/default/index.less +++ /dev/null @@ -1,2 +0,0 @@ -@import "../../copyright.less"; -@import "custom.less"; \ No newline at end of file -- libgit2 0.21.4