github
/
ant-design-vue
mirror of https://github.com/vueComponent/ant-design-vue
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

update style

pull/9/head
tangjinzhou 2018-01-30 16:52:56 +08:00
parent 7da25d6075
commit d01d6eac06
10 changed files with 91 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
components/dropdown/demo/sub-menu.md
View File

@ -15,8 +15,6 @@ The menu has multiple levels.
Cascading menu <a-icon type="down" /> Cascading menu <a-icon type="down" />
</a> </a>
<a-menu slot="overlay"> <a-menu slot="overlay">
<a-menu-item>1st menu item</a-menu-item>
<a-menu-item>2nd menu item</a-menu-item>
<a-sub-menu title="sub menu" key="test"> <a-sub-menu title="sub menu" key="test">
<a-menu-item>3rd menu item</a-menu-item> <a-menu-item>3rd menu item</a-menu-item>
<a-menu-item>4th menu item</a-menu-item> <a-menu-item>4th menu item</a-menu-item>

1
components/menu/MenuItem.vue
View File

@ -5,6 +5,7 @@ import Tooltip from '../tooltip'
function noop () {} function noop () {}
export default { export default {
props: itemProps, props: itemProps,
name: 'MenuItem',
inject: { inject: {
getInlineCollapsed: { default: () => noop }, getInlineCollapsed: { default: () => noop },
}, },

4
components/menu/src/MenuMixin.js
View File

@ -135,8 +135,8 @@ export default {
renderCommonMenuItem (child, i, subIndex, extraProps) { renderCommonMenuItem (child, i, subIndex, extraProps) {
if (child.tag === undefined) { return child } if (child.tag === undefined) { return child }
warning((getComponentName(child.componentOptions) || '').indexOf(['MenuItem', 'MenuItemGroup']) === -1, warning(['MenuItem', 'MenuItemGroup', 'SubMenu'].includes(getComponentName(child.componentOptions)),
'`Menu children just support MenuItem and MenuItemGroup', `Menu children not support ${getComponentName(child.componentOptions)}`,
) )
const state = this.$data const state = this.$data
const props = this.$props const props = this.$props

2
components/menu/src/SubMenu.vue
View File

@ -461,7 +461,7 @@ export default {
if (typeof openAnimation === 'object' && openAnimation.on) { if (typeof openAnimation === 'object' && openAnimation.on) {
transitionProps.on = { ...openAnimation.on } transitionProps.on = { ...openAnimation.on }
} }
const children = isInlineMode ? this.renderChildren(this.$slots.default, true) : this.renderChildren(this.$slots.default) const children = this.renderChildren(this.$slots.default, isInlineMode)
return ( return (
<li {...liProps}> <li {...liProps}>
{isInlineMode && title} {isInlineMode && title}

18
components/menu/style/dark.less
View File

@ -2,14 +2,14 @@
// dark theme // dark theme
&-dark, &-dark,
&-dark &-sub { &-dark &-sub {
color: @text-color-secondary-dark; color: @menu-dark-color;
background: @menu-dark-bg; background: @menu-dark-bg;
.@{menu-prefix-cls}-submenu-title .@{menu-prefix-cls}-submenu-arrow { .@{menu-prefix-cls}-submenu-title .@{menu-prefix-cls}-submenu-arrow {
opacity: .45; opacity: .45;
transition: all .3s; transition: all .3s;
&:after, &:after,
&:before { &:before {
background: #fff; background: @menu-dark-arrow-color;
} }
} }
} }
@ -36,7 +36,7 @@
&-dark &-item, &-dark &-item,
&-dark &-item-group-title, &-dark &-item-group-title,
&-dark &-item > a { &-dark &-item > a {
color: @text-color-secondary-dark; color: @menu-dark-color;
} }
&-dark&-inline, &-dark&-inline,
@ -70,9 +70,9 @@
&-dark &-submenu-selected, &-dark &-submenu-selected,
&-dark &-submenu-title:hover { &-dark &-submenu-title:hover {
background-color: transparent; background-color: transparent;
color: #fff; color: @menu-dark-highlight-color;
> a { > a {
color: #fff; color: @menu-dark-highlight-color;
} }
> .@{menu-prefix-cls}-submenu-title, > .@{menu-prefix-cls}-submenu-title,
> .@{menu-prefix-cls}-submenu-title:hover { > .@{menu-prefix-cls}-submenu-title:hover {
@ -80,7 +80,7 @@
opacity: 1; opacity: 1;
&:after, &:after,
&:before { &:before {
background: #fff; background: @menu-dark-highlight-color;
} }
} }
} }
@ -88,19 +88,19 @@
&-dark &-item-selected { &-dark &-item-selected {
border-right: 0; border-right: 0;
color: #fff; color: @menu-dark-highlight-color;
&:after { &:after {
border-right: 0; border-right: 0;
} }
> a, > a,
> a:hover { > a:hover {
color: #fff; color: @menu-dark-highlight-color;
} }
} }
&&-dark &-item-selected, &&-dark &-item-selected,
&-submenu-popup&-dark &-item-selected { &-submenu-popup&-dark &-item-selected {
background-color: @primary-color; background-color: @menu-dark-item-selected-bg;
} }
// Disabled state sets text to dark gray and nukes hover/tab effects // Disabled state sets text to dark gray and nukes hover/tab effects

45
components/menu/style/index.less
View File

@ -2,8 +2,6 @@
@import "../../style/mixins/index"; @import "../../style/mixins/index";
@menu-prefix-cls: ~"@{ant-prefix}-menu"; @menu-prefix-cls: ~"@{ant-prefix}-menu";
@menu-inline-toplevel-item-height: 40px;
@menu-item-height: 40px;
// default theme // default theme
.@{menu-prefix-cls} { .@{menu-prefix-cls} {
@ -13,7 +11,8 @@
padding-left: 0; // Override default ul/ol padding-left: 0; // Override default ul/ol
list-style: none; list-style: none;
box-shadow: @box-shadow-base; box-shadow: @box-shadow-base;
background: @component-background; color: @menu-item-color;
background: @menu-bg;
line-height: 0; // Fix display inline-block gap line-height: 0; // Fix display inline-block gap
transition: background .3s, width .2s; transition: background .3s, width .2s;
.clearfix; .clearfix;
@ -30,7 +29,7 @@
} }
&-item-group-title { &-item-group-title {
color: @text-color-secondary; color: @menu-item-group-title-color;
font-size: @font-size-base; font-size: @font-size-base;
line-height: @line-height-base; line-height: @line-height-base;
padding: 8px 16px; padding: 8px 16px;
@ -44,7 +43,7 @@
&-item:active, &-item:active,
&-submenu-title:active { &-submenu-title:active {
background: @item-active-bg; background: @menu-item-active-bg;
} }
&-submenu &-sub { &-submenu &-sub {
@ -54,9 +53,9 @@
&-item > a { &-item > a {
display: block; display: block;
color: @text-color; color: @menu-item-color;
&:hover { &:hover {
color: @primary-color; color: @menu-highlight-color;
} }
&:focus { &:focus {
text-decoration: none; text-decoration: none;
@ -86,7 +85,7 @@
&:not(&-inline) &-submenu-open, &:not(&-inline) &-submenu-open,
&-submenu-active, &-submenu-active,
&-submenu-title:hover { &-submenu-title:hover {
color: @primary-color; color: @menu-highlight-color;
} }
&-horizontal &-item, &-horizontal &-item,
@ -101,15 +100,15 @@
} }
&-item-selected { &-item-selected {
color: @primary-color; color: @menu-highlight-color;
> a, > a,
> a:hover { > a:hover {
color: @primary-color; color: @menu-highlight-color;
} }
} }
&:not(&-horizontal) &-item-selected { &:not(&-horizontal) &-item-selected {
background-color: @item-active-bg; background-color: @menu-item-active-bg;
} }
&-inline, &-inline,
@ -185,7 +184,7 @@
} }
> .@{menu-prefix-cls} { > .@{menu-prefix-cls} {
background-color: @component-background; background-color: @menu-bg;
border-radius: @border-radius-base; border-radius: @border-radius-base;
&-submenu-title:after { &-submenu-title:after {
transition: transform .3s @ease-in-out; transition: transform .3s @ease-in-out;
@ -208,7 +207,7 @@
position: absolute; position: absolute;
vertical-align: baseline; vertical-align: baseline;
background: #fff; background: #fff;
background-image: linear-gradient(to right, @text-color, @text-color); background-image: linear-gradient(to right, @menu-item-color, @menu-item-color);
width: 6px; width: 6px;
height: 1.5px; height: 1.5px;
border-radius: 2px; border-radius: 2px;
@ -224,7 +223,7 @@
> .@{menu-prefix-cls}-submenu-title:hover .@{menu-prefix-cls}-submenu-arrow { > .@{menu-prefix-cls}-submenu-title:hover .@{menu-prefix-cls}-submenu-arrow {
&:after, &:after,
&:before { &:before {
background: linear-gradient(to right, @primary-color, @primary-color); background: linear-gradient(to right, @menu-highlight-color, @menu-highlight-color);
} }
} }
} }
@ -254,9 +253,9 @@
&-vertical &-submenu-selected, &-vertical &-submenu-selected,
&-vertical-left &-submenu-selected, &-vertical-left &-submenu-selected,
&-vertical-right &-submenu-selected { &-vertical-right &-submenu-selected {
color: @primary-color; color: @menu-highlight-color;
> a { > a {
color: @primary-color; color: @menu-highlight-color;
} }
} }
@ -277,15 +276,15 @@
&-active, &-active,
&-open, &-open,
&-selected { &-selected {
border-bottom: 2px solid @primary-color; border-bottom: 2px solid @menu-highlight-color;
color: @primary-color; color: @menu-highlight-color;
} }
> a { > a {
display: block; display: block;
color: @text-color; color: @menu-item-color;
&:hover { &:hover {
color: @primary-color; color: @menu-highlight-color;
} }
} }
} }
@ -310,7 +309,7 @@
right: 0; right: 0;
top: 0; top: 0;
bottom: 0; bottom: 0;
border-right: 3px solid @primary-color; border-right: 3px solid @menu-highlight-color;
transform: scaleY(.0001); transform: scaleY(.0001);
opacity: 0; opacity: 0;
transition: transform .15s @ease-out, opacity .15s @ease-out; transition: transform .15s @ease-out, opacity .15s @ease-out;
@ -360,6 +359,10 @@
.@{menu-prefix-cls}-submenu-title { .@{menu-prefix-cls}-submenu-title {
width: ~"calc(100% + 1px)"; width: ~"calc(100% + 1px)";
} }
.@{menu-prefix-cls}-submenu-title {
padding-right: 34px;
}
} }
&-inline-collapsed { &-inline-collapsed {

4
components/style/core/base.less
View File

@ -9,8 +9,8 @@
// http://stackoverflow.com/a/13611748/3040605 // http://stackoverflow.com/a/13611748/3040605
@font-face { @font-face {
font-family: "Helvetica Neue For Number"; font-family: "Monospaced Number";
src: local("Helvetica Neue"); src: local("Tahoma");
unicode-range: U+30-39; unicode-range: U+30-39;
} }

1
components/style/core/iconfont.less
View File

@ -327,3 +327,4 @@
.@{iconfont-css-prefix}-codepen-circle:before { content: "\e9b4"; } .@{iconfont-css-prefix}-codepen-circle:before { content: "\e9b4"; }
.@{iconfont-css-prefix}-alipay:before { content: "\e9b3"; } .@{iconfont-css-prefix}-alipay:before { content: "\e9b3"; }
.@{iconfont-css-prefix}-ant-design:before { content: "\e9b2"; } .@{iconfont-css-prefix}-ant-design:before { content: "\e9b2"; }
.@{iconfont-css-prefix}-aliyun:before { content: "\e9f4"; }

56
components/style/themes/default.less
View File

@ -35,7 +35,7 @@
// Base background color for most components // Base background color for most components
@component-background : #fff; @component-background : #fff;
@font-family-no-number : "Chinese Quote", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; @font-family-no-number : "Chinese Quote", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
@font-family : "Helvetica Neue For Number", @font-family-no-number; @font-family : "Monospaced Number", @font-family-no-number;
@code-family : Consolas, Menlo, Courier, monospace; @code-family : Consolas, Menlo, Courier, monospace;
@heading-color : fade(#000, 85%); @heading-color : fade(#000, 85%);
@text-color : fade(#000, 65%); @text-color : fade(#000, 65%);
@ -67,7 +67,7 @@
// ICONFONT // ICONFONT
@iconfont-css-prefix : anticon; @iconfont-css-prefix : anticon;
@icon-url : "https://at.alicdn.com/t/font_148784_r2qo40wrmaolayvi"; @icon-url : "https://at.alicdn.com/t/font_148784_dky7e838xq4obt9";
// LINK // LINK
@link-color : @primary-color; @link-color : @primary-color;
@ -156,13 +156,17 @@
// Checkbox // Checkbox
@checkbox-size : 16px; @checkbox-size : 16px;
@checkbox-color : @primary-color;
// Radio // Radio
@radio-size : 16px; @radio-size : 16px;
@radio-dot-color : @primary-color;
// Radio buttons // Radio buttons
@radio-button-bg : @btn-default-bg; @radio-button-bg : @btn-default-bg;
@radio-button-color : @btn-default-color; @radio-button-color : @btn-default-color;
@radio-button-hover-color : @primary-5;
@radio-button-active-color : @primary-7;
// Media queries breakpoints // Media queries breakpoints
// Extra small screen / phone // Extra small screen / phone
@ -304,9 +308,21 @@
// Menu // Menu
// --- // ---
@menu-dark-bg: @layout-header-background; @menu-inline-toplevel-item-height: 40px;
@menu-dark-submenu-bg: #000c17; @menu-item-height: 40px;
@menu-collapsed-width: 80px; @menu-collapsed-width: 80px;
@menu-bg: @component-background;
@menu-item-color: @text-color;
@menu-highlight-color: @primary-color;
@menu-item-active-bg: @item-active-bg;
@menu-item-group-title-color: @text-color-secondary;
// dark theme
@menu-dark-color: @text-color-secondary-dark;
@menu-dark-bg: @layout-header-background;
@menu-dark-arrow-color: #fff;
@menu-dark-submenu-bg: #000c17;
@menu-dark-highlight-color: #fff;
@menu-dark-item-selected-bg: @primary-color;
// Spin // Spin
// --- // ---
@ -399,3 +415,31 @@
// --- // ---
@pagination-item-size: 32px; @pagination-item-size: 32px;
@pagination-item-size-sm: 24px; @pagination-item-size-sm: 24px;
// Breadcrumb
// ---
@breadcrumb-base-color: @text-color-secondary;
@breadcrumb-last-item-color: @text-color;
@breadcrumb-font-size: @font-size-base;
@breadcrumb-icon-font-size: @font-size-sm;
@breadcrumb-link-color: @text-color-secondary;
@breadcrumb-link-color-hover: @primary-5;
@breadcrumb-separator-color: @text-color-secondary;
@breadcrumb-separator-margin: 0 @padding-xs;
// Slider
// ---
@slider-margin: 14px 6px 10px;
@slider-rail-background-color: @background-color-base;
@slider-rail-background-color-hover: #e1e1e1;
@slider-track-background-color: @primary-3;
@slider-track-background-color-hover: @primary-4;
@slider-handle-color: @primary-3;
@slider-handle-color-hover: @primary-4;
@slider-handle-color-focus: tint(@primary-color, 20%);
@slider-handle-color-focus-shadow: tint(@primary-color, 50%);
@slider-handle-color-tooltip-open: @primary-color;
@slider-dot-border-color: @border-color-split;
@slider-dot-border-color-active: tint(@primary-color, 50%);
@slider-disabled-color: @disabled-color;
@slider-disabled-background-color: @component-background;

2
components/style/v2-compatible-reset.js
View File

@ -1 +1 @@
import './v2-compatible-reset.less'; import './v2-compatible-reset.less'