From ce13c6db19ba95e73e51bcc4bedbb1596c1d29ca Mon Sep 17 00:00:00 2001
From: wangxueliang <wangxueliang@yidian-inc.com>
Date: Tue, 16 Jan 2018 11:13:22 +0800
Subject: [PATCH] fix css
---
components/avatar/style/index.less | 2 +
components/badge/Badge.vue | 7 +-
components/badge/demo/index.vue | 2 +-
components/badge/style/index.less | 44 ++--
components/breadcrumb/Breadcrumb.vue | 5 +-
components/breadcrumb/BreadcrumbItem.vue | 5 +-
components/breadcrumb/demo/basic.vue | 25 +++
components/breadcrumb/demo/index.vue | 47 +----
components/breadcrumb/demo/separator.vue | 25 +++
components/breadcrumb/demo/withIcon.vue | 31 +++
components/card/Grid.vue | 0
components/card/Meta.vue | 0
components/card/index.vue | 0
components/card/style/index.js | 5 +
components/card/style/index.less | 250 +++++++++++++++++++++++
components/pagination/style/index.less | 167 ++++++---------
components/rate/style/index.less | 18 +-
examples/routes.js | 2 +-
18 files changed, 455 insertions(+), 180 deletions(-)
create mode 100644 components/breadcrumb/demo/basic.vue
create mode 100644 components/breadcrumb/demo/separator.vue
create mode 100644 components/breadcrumb/demo/withIcon.vue
create mode 100644 components/card/Grid.vue
create mode 100644 components/card/Meta.vue
create mode 100644 components/card/index.vue
create mode 100644 components/card/style/index.js
create mode 100644 components/card/style/index.less
diff --git a/components/avatar/style/index.less b/components/avatar/style/index.less
index ede8b9850..f151cd571 100644
--- a/components/avatar/style/index.less
+++ b/components/avatar/style/index.less
@@ -1,8 +1,10 @@
@import "../../style/themes/default";
+@import "../../style/mixins/index";
@avatar-prefix-cls: ~"@{ant-prefix}-avatar";
.@{avatar-prefix-cls} {
+ .reset-component;
display: inline-block;
text-align: center;
background: @avatar-bg;
diff --git a/components/badge/Badge.vue b/components/badge/Badge.vue
index 26c255019..7f8fe8121 100644
--- a/components/badge/Badge.vue
+++ b/components/badge/Badge.vue
@@ -5,8 +5,7 @@
<span :class="[prefixCls+'-status-text']">{{text}}</span>
</template>
<template v-else>
- <slot></slot>
- <transition appear :name="transitionName">
+ <slot></slot><transition appear :name="transitionName">
<scroll-number
v-if="!badgeStatus.isHidden"
:prefixCls="scrollNumberPrefixCls"
@@ -85,7 +84,7 @@ export default {
return !isHasDefaultSlot && status
},
badgeComputedCls () {
- const { prefixCls, isHasDefaultSlot, status, dot } = this
+ const { prefixCls, isHasDefaultSlot, status, dot, count } = this
const isDot = dot || status
return {
badgeCls: {
@@ -100,6 +99,8 @@ export default {
scrollNumberCls: {
[`${prefixCls}-dot`]: isDot,
[`${prefixCls}-count`]: !isDot,
+ [`${prefixCls}-multiple-words`]: count && count.toString && count.toString().length > 1,
+ [`${prefixCls}-status-${status}`]: !isHasDefaultSlot,
},
}
},
diff --git a/components/badge/demo/index.vue b/components/badge/demo/index.vue
index b2f0375f7..29cffeb04 100644
--- a/components/badge/demo/index.vue
+++ b/components/badge/demo/index.vue
@@ -131,7 +131,7 @@ export default {
.head-example {
width: 42px;
height: 42px;
- border-radius: 6px;
+ border-radius: 4px;
background: #eee;
display: inline-block;
}
diff --git a/components/badge/style/index.less b/components/badge/style/index.less
index 5d7cf04f4..16f25bdbf 100644
--- a/components/badge/style/index.less
+++ b/components/badge/style/index.less
@@ -1,9 +1,11 @@
@import "../../style/themes/default";
+@import "../../style/mixins/index";
@badge-prefix-cls: ~"@{ant-prefix}-badge";
@number-prefix-cls: ~"@{ant-prefix}-scroll-number";
.@{badge-prefix-cls} {
+ .reset-component;
position: relative;
display: inline-block;
line-height: 1;
@@ -11,9 +13,8 @@
&-count {
position: absolute;
- transform: translateX(50%);
+ transform: translateX(-50%);
top: -@badge-height / 2;
- right: 0;
height: @badge-height;
border-radius: @badge-height / 2;
min-width: @badge-height;
@@ -25,19 +26,22 @@
font-size: @badge-font-size;
white-space: nowrap;
transform-origin: -10% center;
- font-family: tahoma;
+ box-shadow: 0 0 0 1px #fff;
a,
a:hover {
color: #fff;
}
}
+ &-multiple-words {
+ padding: 0 8px;
+ }
+
&-dot {
position: absolute;
- transform: translateX(50%);
+ transform: translateX(-50%);
transform-origin: 0 center;
top: -@badge-dot-size / 2;
- right: 0;
height: @badge-dot-size;
width: @badge-dot-size;
border-radius: 100%;
@@ -51,16 +55,19 @@
vertical-align: baseline;
&-dot {
- width: 8px;
- height: 8px;
+ width: @badge-status-size;
+ height: @badge-status-size;
display: inline-block;
border-radius: 50%;
+ vertical-align: middle;
+ position: relative;
+ top: -1px;
}
&-success {
background-color: @success-color;
}
&-processing {
- background-color: @primary-color;
+ background-color: @processing-color;
position: relative;
&:after {
position: absolute;
@@ -69,7 +76,7 @@
width: 100%;
height: 100%;
border-radius: 50%;
- border: 1px solid @primary-color;
+ border: 1px solid @processing-color;
content: '';
animation: antStatusProcessing 1.2s infinite ease-in-out;
}
@@ -91,17 +98,17 @@
}
&-zoom-appear,
- &-zoom-enter-active {
+ &-zoom-enter {
animation: antZoomBadgeIn .3s @ease-out-back;
animation-fill-mode: both;
}
- &-zoom-leave-active {
+ &-zoom-leave {
animation: antZoomBadgeOut .3s @ease-in-back;
animation-fill-mode: both;
}
- &-not-a-wrapper &-count {
+ &-not-a-wrapper .@{ant-prefix}-scroll-number {
top: auto;
display: block;
position: relative;
@@ -128,6 +135,7 @@
height: @badge-height;
> p {
height: @badge-height;
+ margin: 0;
}
}
}
@@ -135,23 +143,19 @@
@keyframes antZoomBadgeIn {
0% {
opacity: 0;
- transform-origin: 100% 50%;
- transform: scale(0) translateX(50%);
+ transform: scale(0) translateX(-50%);
}
100% {
- transform-origin: 100% 50%;
- transform: scale(1) translateX(50%);
+ transform: scale(1) translateX(-50%);
}
}
@keyframes antZoomBadgeOut {
0% {
- transform-origin: 100% 50%;
- transform: scale(1) translateX(50%);
+ transform: scale(1) translateX(-50%);
}
100% {
opacity: 0;
- transform-origin: 100% 50%;
- transform: scale(0) translateX(50%);
+ transform: scale(0) translateX(-50%);
}
}
diff --git a/components/breadcrumb/Breadcrumb.vue b/components/breadcrumb/Breadcrumb.vue
index 5a57f0851..eb6cddec1 100644
--- a/components/breadcrumb/Breadcrumb.vue
+++ b/components/breadcrumb/Breadcrumb.vue
@@ -6,7 +6,6 @@
props: {
prefixCls: PropTypes.string.def('ant-breadcrumb'),
separator: PropTypes.string.def('/'),
- styles: PropTypes.Object,
},
provide () {
return {
@@ -14,9 +13,9 @@
}
},
render () {
- const { prefixCls, styles } = this
+ const { prefixCls } = this
return (
- <div class={prefixCls} style={styles}>
+ <div class={prefixCls}>
{this.$slots.default}
</div>
)
diff --git a/components/breadcrumb/BreadcrumbItem.vue b/components/breadcrumb/BreadcrumbItem.vue
index ea2d78e71..b50f07677 100644
--- a/components/breadcrumb/BreadcrumbItem.vue
+++ b/components/breadcrumb/BreadcrumbItem.vue
@@ -1,5 +1,6 @@
<script>
import PropTypes from '../_util/vue-types'
+ import hasProp from '../_util/props-util'
export default {
name: 'BreadcrumbItem',
@@ -9,12 +10,12 @@
href: PropTypes.string,
},
render () {
- const { prefixCls, href, ...restProps } = this
+ const { prefixCls, ...restProps } = this.$props
const { breadCrumbParent = {}} = this
const { separator = '/' } = breadCrumbParent
const solt = this.$slots.default
let link
- if (href !== undefined) {
+ if (hasProp(this, 'href')) {
link = <a class={`${prefixCls}-link`} {...restProps}>{solt}</a>
} else {
link = <span class={`${prefixCls}-link`} {...restProps}>{solt}</span>
diff --git a/components/breadcrumb/demo/basic.vue b/components/breadcrumb/demo/basic.vue
new file mode 100644
index 000000000..c2fd827c7
--- /dev/null
+++ b/components/breadcrumb/demo/basic.vue
@@ -0,0 +1,25 @@
+<template>
+<div>
+<md>
+## 基本
+</md>
+<Breadcrumb>
+ <BreadcrumbItem>Home</BreadcrumbItem>
+ <BreadcrumbItem><a href="">Application Center</a></BreadcrumbItem>
+ <BreadcrumbItem><a href="">Application List</a></BreadcrumbItem>
+ <BreadcrumbItem>An Application</BreadcrumbItem>
+</Breadcrumb>
+</div>
+</template>
+
+<script>
+import '../style'
+import { Icon, Breadcrumb } from 'antd/index'
+export default {
+ components: {
+ Icon,
+ Breadcrumb,
+ BreadcrumbItem: Breadcrumb.Item,
+ },
+}
+</script>
diff --git a/components/breadcrumb/demo/index.vue b/components/breadcrumb/demo/index.vue
index a5c3065da..d1efc5566 100644
--- a/components/breadcrumb/demo/index.vue
+++ b/components/breadcrumb/demo/index.vue
@@ -1,50 +1,21 @@
<template>
<div>
- 基本用法
- <Breadcrumb>
- <BreadcrumbItem>Home</BreadcrumbItem>
- <BreadcrumbItem><a href="">Application Center</a></BreadcrumbItem>
- <BreadcrumbItem><a href="">Application List</a></BreadcrumbItem>
- <BreadcrumbItem>An Application</BreadcrumbItem>
- </Breadcrumb>
+ <Basic />
<br>
- 带有图标
- <Breadcrumb>
- <BreadcrumbItem href="">
- <Icon type="home" />
- </BreadcrumbItem>
- <BreadcrumbItem href="">
- <Icon type="user" />
- <span>Application List</span>
- </BreadcrumbItem>
- <BreadcrumbItem>
- Application
- </BreadcrumbItem>
- </Breadcrumb>
+ <withIcon />
<br>
- 自定义分隔符
- <Breadcrumb separator=">">
- <BreadcrumbItem>Home</BreadcrumbItem>
- <BreadcrumbItem href="">Application Center</BreadcrumbItem>
- <BreadcrumbItem href="">Application List</BreadcrumbItem>
- <BreadcrumbItem>An Application</BreadcrumbItem>
- </Breadcrumb>
+ <separator />
</div>
</template>
<script>
-import '../style'
-import { Icon, Breadcrumb } from 'antd/index'
+import Basic from './basic'
+import withIcon from './withIcon'
+import separator from './separator'
export default {
- data () {
- return {
- }
- },
- methods: {
- },
components: {
- Icon,
- Breadcrumb,
- BreadcrumbItem: Breadcrumb.Item,
+ Basic,
+ withIcon,
+ separator,
},
}
</script>
diff --git a/components/breadcrumb/demo/separator.vue b/components/breadcrumb/demo/separator.vue
new file mode 100644
index 000000000..87323cbc4
--- /dev/null
+++ b/components/breadcrumb/demo/separator.vue
@@ -0,0 +1,25 @@
+<template>
+<div>
+<md>
+## 自定义分隔符
+</md>
+<Breadcrumb separator=">">
+ <BreadcrumbItem>Home</BreadcrumbItem>
+ <BreadcrumbItem href="">Application Center</BreadcrumbItem>
+ <BreadcrumbItem href="">Application List</BreadcrumbItem>
+ <BreadcrumbItem>An Application</BreadcrumbItem>
+</Breadcrumb>
+</div>
+</template>
+
+<script>
+import '../style'
+import { Icon, Breadcrumb } from 'antd/index'
+export default {
+ components: {
+ Icon,
+ Breadcrumb,
+ BreadcrumbItem: Breadcrumb.Item,
+ },
+}
+</script>
diff --git a/components/breadcrumb/demo/withIcon.vue b/components/breadcrumb/demo/withIcon.vue
new file mode 100644
index 000000000..f83d665e9
--- /dev/null
+++ b/components/breadcrumb/demo/withIcon.vue
@@ -0,0 +1,31 @@
+<template>
+<div>
+<md>
+## 带有图标
+</md>
+<Breadcrumb>
+ <BreadcrumbItem href="">
+ <Icon type="home" />
+ </BreadcrumbItem>
+ <BreadcrumbItem href="">
+ <Icon type="user" />
+ <span>Application List</span>
+ </BreadcrumbItem>
+ <BreadcrumbItem>
+ Application
+ </BreadcrumbItem>
+</Breadcrumb>
+</div>
+</template>
+
+<script>
+import '../style'
+import { Icon, Breadcrumb } from 'antd/index'
+export default {
+ components: {
+ Icon,
+ Breadcrumb,
+ BreadcrumbItem: Breadcrumb.Item,
+ },
+}
+</script>
diff --git a/components/card/Grid.vue b/components/card/Grid.vue
new file mode 100644
index 000000000..e69de29bb
diff --git a/components/card/Meta.vue b/components/card/Meta.vue
new file mode 100644
index 000000000..e69de29bb
diff --git a/components/card/index.vue b/components/card/index.vue
new file mode 100644
index 000000000..e69de29bb
diff --git a/components/card/style/index.js b/components/card/style/index.js
new file mode 100644
index 000000000..819cdd51c
--- /dev/null
+++ b/components/card/style/index.js
@@ -0,0 +1,5 @@
+import '../../style/index.less'
+import './index.less'
+
+// style dependencies
+import '../../tabs/style'
diff --git a/components/card/style/index.less b/components/card/style/index.less
new file mode 100644
index 000000000..47108f0f7
--- /dev/null
+++ b/components/card/style/index.less
@@ -0,0 +1,250 @@
+@import "../../style/themes/default";
+@import "../../style/mixins/index";
+
+@card-prefix-cls: ~"@{ant-prefix}-card";
+@card-head-height: 48px;
+
+.@{card-prefix-cls} {
+ .reset-component;
+ background: @component-background;
+ border-radius: @border-radius-sm;
+ position: relative;
+ transition: all .3s;
+
+ &-hoverable {
+ cursor: pointer;
+ &:hover {
+ box-shadow: @card-shadow;
+ border-color: rgba(0, 0, 0, 0.09);
+ }
+ }
+
+ &-bordered {
+ border: @border-width-base @border-style-base @border-color-split;
+ }
+
+ &-head {
+ background: @card-head-background;
+ border-bottom: @border-width-base @border-style-base @border-color-split;
+ padding: 0 @card-padding-base;
+ border-radius: @border-radius-sm @border-radius-sm 0 0;
+ .clearfix;
+ margin-bottom: -1px; // Fix card grid overflow bug: https://gw.alipayobjects.com/zos/rmsportal/XonYxBikwpgbqIQBeuhk.png
+ min-height: @card-head-height;
+
+ &-wrapper {
+ display: flex;
+ }
+
+ &-title {
+ font-size: @font-size-lg;
+ padding: @card-head-padding 0;
+ text-overflow: ellipsis;
+ overflow: hidden;
+ white-space: nowrap;
+ color: @card-head-color;
+ font-weight: 500;
+ display: inline-block;
+ flex: 1;
+ }
+
+ .@{ant-prefix}-tabs {
+ margin-bottom: -17px;
+ clear: both;
+
+ &-bar {
+ border-bottom: @border-width-base @border-style-base @border-color-split;
+ }
+ }
+ }
+
+ &-extra {
+ float: right;
+ padding: @card-head-padding + 1.5px 0;
+ text-align: right;
+ // https://stackoverflow.com/a/22429853/3040605
+ margin-left: auto;
+ }
+
+ &-body {
+ padding: @card-padding-base;
+ .clearfix;
+ }
+
+ &-contain-grid &-body {
+ margin: -1px 0 0 -1px;
+ padding: 0;
+ }
+
+ &-grid {
+ border-radius: 0;
+ border: 0;
+ box-shadow: 1px 0 0 0 @border-color-split, 0 1px 0 0 @border-color-split, 1px 1px 0 0 @border-color-split, 1px 0 0 0 @border-color-split inset, 0 1px 0 0 @border-color-split inset;
+ width: 33.33%;
+ float: left;
+ padding: @card-padding-base;
+ transition: all .3s;
+ &:hover {
+ position: relative;
+ z-index: 1;
+ box-shadow: @box-shadow-base;
+ }
+ }
+
+ &-contain-tabs &-head-title {
+ padding-bottom: 0;
+ min-height: @card-head-height - @card-head-padding;
+ }
+
+ &-contain-tabs &-extra {
+ padding-bottom: 0;
+ }
+
+ &-cover > * {
+ width: 100%;
+ display: block;
+ }
+
+ &-actions {
+ border-top: @border-width-base @border-style-base @border-color-split;
+ background: @card-actions-background;
+ .clearfix;
+ list-style: none;
+ margin: 0;
+ padding: 0;
+
+ & > li {
+ float: left;
+ text-align: center;
+ margin: 12px 0;
+ color: @text-color-secondary;
+
+ & > span {
+ display: inline-block;
+ font-size: 14px;
+ cursor: pointer;
+ line-height: 22px;
+ min-width: 32px;
+ position: relative;
+
+ &:hover {
+ color: @primary-color;
+ transition: color .3s;
+ }
+
+ & > .anticon {
+ font-size: 16px;
+ }
+
+ a {
+ color: @text-color-secondary;
+
+ &:hover {
+ color: @primary-color;
+ }
+ }
+ }
+
+ &:not(:last-child) {
+ border-right: @border-width-base @border-style-base @border-color-split;
+ }
+ }
+ }
+
+ &-wider-padding &-head {
+ padding: 0 @card-padding-wider;
+ }
+
+ &-wider-padding &-body {
+ padding: @card-padding-base @card-padding-wider;
+ }
+
+ &-padding-transition &-head,
+ &-padding-transition &-body {
+ transition: padding .3s;
+ }
+
+ &-padding-transition &-extra {
+ transition: right .3s;
+ }
+
+ &-type-inner &-head {
+ padding: 0 @card-padding-base;
+ background: @background-color-light;
+
+ &-title {
+ padding: @card-inner-head-padding 0;
+ font-size: @font-size-base;
+ }
+ }
+
+ &-type-inner &-body {
+ padding: 16px @card-padding-base;
+ }
+
+ &-type-inner &-extra {
+ padding: @card-inner-head-padding + 1.5px 0;
+ }
+
+ &-meta {
+ margin: -4px 0;
+ .clearfix;
+
+ &-avatar {
+ padding-right: 16px;
+ float: left;
+ }
+
+ &-detail {
+ overflow: hidden;
+ > div:not(:last-child) {
+ margin-bottom: 8px;
+ }
+ }
+
+ &-title {
+ font-size: @font-size-lg;
+ text-overflow: ellipsis;
+ overflow: hidden;
+ white-space: nowrap;
+ color: @card-head-color;
+ font-weight: 500;
+ }
+
+ &-description {
+ color: @text-color-secondary;
+ }
+ }
+
+ &-loading &-body {
+ user-select: none;
+ padding: 0;
+ }
+
+ &-loading-content {
+ padding: @card-padding-base;
+ p {
+ margin: 0;
+ }
+ }
+
+ &-loading-block {
+ display: inline-block;
+ margin: 5px 2% 0 0;
+ height: 14px;
+ border-radius: @border-radius-sm;
+ background: linear-gradient(90deg, rgba(207, 216, 220, .2), rgba(207, 216, 220, .4), rgba(207, 216, 220, .2));
+ animation: card-loading 1.4s ease infinite;
+ background-size: 600% 600%;
+ }
+}
+
+@keyframes card-loading {
+ 0%,
+ 100% {
+ background-position: 0 50%;
+ }
+ 50% {
+ background-position: 100% 50%;
+ }
+}
diff --git a/components/pagination/style/index.less b/components/pagination/style/index.less
index 8fd310f8a..703879770 100644
--- a/components/pagination/style/index.less
+++ b/components/pagination/style/index.less
@@ -1,10 +1,18 @@
@import "../../style/themes/default";
@import "../../style/mixins/index";
+@import "../../input/style/mixin";
@pagination-prefix-cls: ~"@{ant-prefix}-pagination";
.@{pagination-prefix-cls} {
- font-size: @font-size-base;
+ .reset-component;
+
+ ul,
+ ol {
+ margin: 0;
+ padding: 0;
+ list-style: none;
+ }
&:after {
content: " ";
@@ -18,8 +26,8 @@
&-total-text {
display: inline-block;
vertical-align: middle;
- height: 28px;
- line-height: 28px;
+ height: @pagination-item-size;
+ line-height: @pagination-item-size - 2px;
margin-right: 8px;
}
@@ -27,9 +35,9 @@
cursor: pointer;
border-radius: @border-radius-base;
user-select: none;
- min-width: 28px;
- height: 28px;
- line-height: 28px;
+ min-width: @pagination-item-size;
+ height: @pagination-item-size;
+ line-height: @pagination-item-size - 2px;
text-align: center;
list-style: none;
display: inline-block;
@@ -57,19 +65,21 @@
}
&-active {
- background-color: @primary-color;
border-color: @primary-color;
+ font-weight: 500;
+
+ a {
+ color: @primary-color;
+ }
&:focus,
&:hover {
- background-color: @primary-5;
border-color: @primary-5;
}
- a,
&:focus a,
&:hover a {
- color: #fff;
+ color: @primary-5;
}
}
}
@@ -129,9 +139,9 @@
color: @text-color;
border-radius: @border-radius-base;
list-style: none;
- min-width: 28px;
- height: 28px;
- line-height: 28px;
+ min-width: @pagination-item-size;
+ height: @pagination-item-size;
+ line-height: @pagination-item-size;
text-align: center;
transition: all .3s;
display: inline-block;
@@ -148,7 +158,7 @@
}
&:hover a {
- color: @primary-color;
+ border-color: @primary-5;
}
.@{pagination-prefix-cls}-item-link {
@@ -160,10 +170,9 @@
transition: all .3s;
&:after {
- .iconfont-size-under-12px(8px);
+ font-size: 12px;
display: block;
- height: 26px;
- line-height: 26px;
+ height: @pagination-item-size - 2px;
font-family: "anticon";
text-align: center;
font-weight: 500;
@@ -214,15 +223,19 @@
vertical-align: middle;
margin-left: 16px;
- &-size-changer {
+ &-size-changer.@{ant-prefix}-select {
display: inline-block;
margin-right: 8px;
}
&-quick-jumper {
display: inline-block;
+ vertical-align: top;
+ height: @input-height-base;
+ line-height: @input-height-base;
input {
+ .input;
margin: 0 8px;
width: 50px;
}
@@ -231,14 +244,15 @@
&-simple &-prev,
&-simple &-next {
- height: 24px;
- line-height: 24px;
+ height: @pagination-item-size-sm;
+ line-height: @pagination-item-size-sm;
vertical-align: top;
.@{pagination-prefix-cls}-item-link {
border: 0;
- height: 24px;
+ height: @pagination-item-size-sm;
&:after {
- line-height: 24px;
+ height: @pagination-item-size-sm;
+ line-height: @pagination-item-size-sm;
}
}
}
@@ -246,7 +260,7 @@
&-simple &-simple-pager {
display: inline-block;
margin-right: 8px;
- height: 24px;
+ height: @pagination-item-size-sm;
input {
margin-right: 8px;
@@ -265,60 +279,65 @@
}
}
}
-}
-.@{pagination-prefix-cls} {
&.mini &-total-text,
&.mini &-simple-pager {
- height: 20px;
- line-height: 20px;
+ height: @pagination-item-size-sm;
+ line-height: @pagination-item-size-sm;
}
&.mini &-item {
- border: 0;
margin: 0;
- min-width: 20px;
- height: 20px;
- line-height: 20px;
+ min-width: @pagination-item-size-sm;
+ height: @pagination-item-size-sm;
+ line-height: @pagination-item-size-sm - 2px;
+ }
+
+ &.mini &-item:not(&-item-active) {
+ background: transparent;
+ border-color: transparent;
}
&.mini &-prev,
&.mini &-next {
margin: 0;
- min-width: 20px;
- height: 20px;
- line-height: 20px;
+ min-width: @pagination-item-size-sm;
+ height: @pagination-item-size-sm;
+ line-height: @pagination-item-size-sm;
}
&.mini &-prev &-item-link,
&.mini &-next &-item-link {
- border: 0;
+ border-color: transparent;
+ background: transparent;
&:after {
- height: 20px;
- line-height: 20px;
+ height: @pagination-item-size-sm;
+ line-height: @pagination-item-size-sm;
}
}
&.mini &-jump-prev,
&.mini &-jump-next {
- height: 20px;
- line-height: 20px;
+ height: @pagination-item-size-sm;
+ line-height: @pagination-item-size-sm;
+ margin-right: 0;
}
&.mini &-options {
- margin-left: 8px;
+ margin-left: 2px;
&-quick-jumper {
- height: 20px;
- line-height: 20px;
+ height: @pagination-item-size-sm;
+ line-height: @pagination-item-size-sm;
input {
+ .input-sm;
width: 44px;
}
}
}
}
-@media only screen and (max-width: 1024px) {
+@media only screen and (max-width: @screen-lg) {
.@{pagination-prefix-cls}-item {
&-after-jump-prev,
&-before-jump-next {
@@ -327,64 +346,8 @@
}
}
-.@{pagination-prefix-cls} {
- &-options {
- margin-left: 15px;
- &-size-changer {
- float: left;
- width: 80px;
- }
-
- &-quick-jumper {
- float: left;
- margin-left: 16px;
- height: 28px;
- line-height: 28px;
-
- input {
- margin: 0 8px;
- box-sizing: border-box;
- background-color: #fff;
- border-radius: 6px;
- border: 1px solid #d9d9d9;
- outline: none;
- padding: 3px 12px;
- width: 50px;
- height: 28px;
-
- &:hover {
- border-color: #2db7f5;
- }
- }
-
- button {
- display: inline-block;
- margin: 0 8px;
- font-weight: 500;
- text-align: center;
- touch-action: manipulation;
- cursor: pointer;
- background-image: none;
- border: 1px solid transparent;
- white-space: nowrap;
- padding: 0 15px;
- font-size: 12px;
- border-radius: 6px;
- height: 28px;
- user-select: none;
- transition: all .3s cubic-bezier(.645,.045,.355,1);
- position: relative;
- color: rgba(0,0,0,.65);
- background-color: #fff;
- border-color: #d9d9d9;
-
- &:hover, &:active, &:focus {
- color: #2db7f5;
- background-color: #fff;
- border-color: #2db7f5;
- }
- }
- }
+@media only screen and (max-width: @screen-sm) {
+ .@{pagination-prefix-cls}-options {
+ display: none;
}
}
-
diff --git a/components/rate/style/index.less b/components/rate/style/index.less
index e22dbbd0d..97e916d03 100644
--- a/components/rate/style/index.less
+++ b/components/rate/style/index.less
@@ -4,12 +4,15 @@
@rate-prefix-cls: ~"@{ant-prefix}-rate";
.@{rate-prefix-cls} {
+ .reset-component;
+ line-height: unset;
margin: 0;
padding: 0;
list-style: none;
font-size: 20px;
display: inline-block;
- vertical-align: middle;
+ color: @rate-star-color;
+ outline: none;
&-disabled &-star {
cursor: not-allowed;
@@ -25,16 +28,17 @@
margin-right: 8px;
position: relative;
transition: all .3s;
- color: @rate-star-bg;
+ color: inherit;
cursor: pointer;
&-first,
&-second {
user-select: none;
transition: all .3s;
+ color: @rate-star-bg;
}
- &:hover {
+ &-focused, &:hover {
transform: scale(1.1);
}
@@ -55,18 +59,12 @@
&-half &-first,
&-full &-second {
- color: @rate-star-color;
- }
-
- &-half:hover &-first,
- &-full:hover &-second {
- color: tint(@rate-star-color, 20%);
+ color: inherit;
}
}
&-text {
margin-left: 8px;
- vertical-align: middle;
display: inline-block;
font-size: @font-size-base;
}
diff --git a/examples/routes.js b/examples/routes.js
index 6c08b5a26..e4f43f3f2 100644
--- a/examples/routes.js
+++ b/examples/routes.js
@@ -3,7 +3,7 @@ const AsyncComp = () => {
const com = pathnameArr[1] || 'button'
const demo = pathnameArr[2] || 'index'
return {
- component: import(`../components/tag/demo/${demo}.vue`),
+ component: import(`../components/avatar/demo/${demo}.vue`),
}
}
export default [