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/165/head
tangjinzhou 2018-01-30 16:52:56 +08:00
parent 1f937972d3
commit a7d143fda9
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" />
</a>
<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-menu-item>3rd 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 () {}
export default {
props: itemProps,
name: 'MenuItem',
inject: {
getInlineCollapsed: { default: () => noop },
},

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

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

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

@ -461,7 +461,7 @@ export default {
if (typeof openAnimation === 'object' && 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 (
<li {...liProps}>
{isInlineMode && title}

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

@ -2,14 +2,14 @@
// dark theme
&-dark,
&-dark &-sub {
color: @text-color-secondary-dark;
color: @menu-dark-color;
background: @menu-dark-bg;
.@{menu-prefix-cls}-submenu-title .@{menu-prefix-cls}-submenu-arrow {
opacity: .45;
transition: all .3s;
&:after,
&:before {
background: #fff;
background: @menu-dark-arrow-color;
}
}
}
@ -36,7 +36,7 @@
&-dark &-item,
&-dark &-item-group-title,
&-dark &-item > a {
color: @text-color-secondary-dark;
color: @menu-dark-color;
}
&-dark&-inline,
@ -70,9 +70,9 @@
&-dark &-submenu-selected,
&-dark &-submenu-title:hover {
background-color: transparent;
color: #fff;
color: @menu-dark-highlight-color;
> a {
color: #fff;
color: @menu-dark-highlight-color;
}
> .@{menu-prefix-cls}-submenu-title,
> .@{menu-prefix-cls}-submenu-title:hover {
@ -80,7 +80,7 @@
opacity: 1;
&:after,
&:before {
background: #fff;
background: @menu-dark-highlight-color;
}
}
}
@ -88,19 +88,19 @@
&-dark &-item-selected {
border-right: 0;
color: #fff;
color: @menu-dark-highlight-color;
&:after {
border-right: 0;
}
> a,
> a:hover {
color: #fff;
color: @menu-dark-highlight-color;
}
}
&&-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

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

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

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

@ -9,8 +9,8 @@
// http://stackoverflow.com/a/13611748/3040605
@font-face {
font-family: "Helvetica Neue For Number";
src: local("Helvetica Neue");
font-family: "Monospaced Number";
src: local("Tahoma");
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}-alipay:before { content: "\e9b3"; }
.@{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
@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 : "Helvetica Neue For Number", @font-family-no-number;
@font-family : "Monospaced Number", @font-family-no-number;
@code-family : Consolas, Menlo, Courier, monospace;
@heading-color : fade(#000, 85%);
@text-color : fade(#000, 65%);
@ -67,7 +67,7 @@
// ICONFONT
@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-color : @primary-color;
@ -156,13 +156,17 @@
// Checkbox
@checkbox-size : 16px;
@checkbox-color : @primary-color;
// Radio
@radio-size : 16px;
@radio-dot-color : @primary-color;
// Radio buttons
@radio-button-bg : @btn-default-bg;
@radio-button-color : @btn-default-color;
@radio-button-bg : @btn-default-bg;
@radio-button-color : @btn-default-color;
@radio-button-hover-color : @primary-5;
@radio-button-active-color : @primary-7;
// Media queries breakpoints
// Extra small screen / phone
@ -304,9 +308,21 @@
// Menu
// ---
@menu-dark-bg: @layout-header-background;
@menu-dark-submenu-bg: #000c17;
@menu-inline-toplevel-item-height: 40px;
@menu-item-height: 40px;
@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
// ---
@ -399,3 +415,31 @@
// ---
@pagination-item-size: 32px;
@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'