mirror of
https://gitee.com/ant-design-vue/ant-design-vue.git
synced 2024-11-30 02:57:50 +08:00
fix
This commit is contained in:
tangjinzhou
commit
6e3caa6011
@ -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;
|
||||
|
||||
@ -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,
|
||||
},
|
||||
}
|
||||
},
|
||||
|
||||
@ -131,7 +131,7 @@ export default {
|
||||
.head-example {
|
||||
width: 42px;
|
||||
height: 42px;
|
||||
border-radius: 6px;
|
||||
border-radius: 4px;
|
||||
background: #eee;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
@ -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%);
|
||||
}
|
||||
}
|
||||
|
||||
@ -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>
|
||||
)
|
||||
|
||||
@ -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>
|
||||
|
||||
25
components/breadcrumb/demo/basic.vue
Normal file
25
components/breadcrumb/demo/basic.vue
Normal file
@ -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>
|
||||
@ -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>
|
||||
|
||||
25
components/breadcrumb/demo/separator.vue
Normal file
25
components/breadcrumb/demo/separator.vue
Normal file
@ -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>
|
||||
31
components/breadcrumb/demo/withIcon.vue
Normal file
31
components/breadcrumb/demo/withIcon.vue
Normal file
@ -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>
|
||||
0
components/card/Grid.vue
Normal file
0
components/card/Grid.vue
Normal file
0
components/card/Meta.vue
Normal file
0
components/card/Meta.vue
Normal file
0
components/card/index.vue
Normal file
0
components/card/index.vue
Normal file
5
components/card/style/index.js
Normal file
5
components/card/style/index.js
Normal file
@ -0,0 +1,5 @@
|
||||
import '../../style/index.less'
|
||||
import './index.less'
|
||||
|
||||
// style dependencies
|
||||
import '../../tabs/style'
|
||||
250
components/card/style/index.less
Normal file
250
components/card/style/index.less
Normal file
@ -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%;
|
||||
}
|
||||
}
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
@ -3,7 +3,7 @@ const AsyncComp = () => {
|
||||
const com = pathnameArr[1] || 'button'
|
||||
const demo = pathnameArr[2] || 'index'
|
||||
return {
|
||||
component: import(`../components/checkbox/demo/${demo}.vue`),
|
||||
component: import(`../components/avatar/demo/${demo}.vue`),
|
||||
}
|
||||
}
|
||||
export default [
|
||||
|
||||
Loading…
Reference in New Issue
Block a user