style: remove not use file
parent
3d2a80b3bb
commit
ae4085f7c0
|
@ -1,313 +0,0 @@
|
|||
@import '../../style/themes/index';
|
||||
@import '../../style/mixins/index';
|
||||
|
||||
@prefixCls: ~'@{ant-prefix}-image';
|
||||
@zindex-preview-mask: 1000;
|
||||
@preview-mask-bg: fade(#000, 40%);
|
||||
@text-color: #bbb;
|
||||
@text-color-disabled: darken(@text-color, 30%);
|
||||
@background-color: #f3f3f3;
|
||||
|
||||
.reset() {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.box() {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.@{prefixCls} {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
&-img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
&-placeholder {
|
||||
background-color: @background-color;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center center;
|
||||
background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMjhweCIgaGVpZ2h0PSIyMnB4IiB2aWV3Qm94PSIwIDAgMjggMjIiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8IS0tIEdlbmVyYXRvcjogU2tldGNoIDU1LjIgKDc4MTgxKSAtIGh0dHBzOi8vc2tldGNoYXBwLmNvbSAtLT4KICAgIDx0aXRsZT5pbWFnZS1maWxs5aSH5Lu9PC90aXRsZT4KICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPgogICAgPGcgaWQ9Iuafpeeci+WbvueJh+S8mOWMljQuMCIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+CiAgICAgICAgPGcgaWQ9IuWKoOi9veWbvueJhyIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTU3Mi4wMDAwMDAsIC01MDYuMDAwMDAwKSI+CiAgICAgICAgICAgIDxnIGlkPSJpbWFnZS1maWxs5aSH5Lu9IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg1NzAuMDAwMDAwLCA1MDEuMDAwMDAwKSI+CiAgICAgICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlIiBmaWxsPSIjMDAwMDAwIiBvcGFjaXR5PSIwIiB4PSIwIiB5PSIwIiB3aWR0aD0iMzIiIGhlaWdodD0iMzIiPjwvcmVjdD4KICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik0yOSw1IEwzLDUgQzIuNDQ2ODc1LDUgMiw1LjQ0Njg3NSAyLDYgTDIsMjYgQzIsMjYuNTUzMTI1IDIuNDQ2ODc1LDI3IDMsMjcgTDI5LDI3IEMyOS41NTMxMjUsMjcgMzAsMjYuNTUzMTI1IDMwLDI2IEwzMCw2IEMzMCw1LjQ0Njg3NSAyOS41NTMxMjUsNSAyOSw1IFogTTEwLjU2MjUsOS41IEMxMS42NjU2MjUsOS41IDEyLjU2MjUsMTAuMzk2ODc1IDEyLjU2MjUsMTEuNSBDMTIuNTYyNSwxMi42MDMxMjUgMTEuNjY1NjI1LDEzLjUgMTAuNTYyNSwxMy41IEM5LjQ1OTM3NSwxMy41IDguNTYyNSwxMi42MDMxMjUgOC41NjI1LDExLjUgQzguNTYyNSwxMC4zOTY4NzUgOS40NTkzNzUsOS41IDEwLjU2MjUsOS41IFogTTI2LjYyMTg3NSwyMy4xNTkzNzUgQzI2LjU3ODEyNSwyMy4xOTY4NzUgMjYuNTE4NzUsMjMuMjE4NzUgMjYuNDU5Mzc1LDIzLjIxODc1IEw1LjUzNzUsMjMuMjE4NzUgQzUuNCwyMy4yMTg3NSA1LjI4NzUsMjMuMTA2MjUgNS4yODc1LDIyLjk2ODc1IEM1LjI4NzUsMjIuOTA5Mzc1IDUuMzA5Mzc1LDIyLjg1MzEyNSA1LjM0Njg3NSwyMi44MDYyNSBMMTAuNjY4NzUsMTYuNDkzNzUgQzEwLjc1NjI1LDE2LjM4NzUgMTAuOTE1NjI1LDE2LjM3NSAxMS4wMjE4NzUsMTYuNDYyNSBDMTEuMDMxMjUsMTYuNDcxODc1IDExLjA0Mzc1LDE2LjQ4MTI1IDExLjA1MzEyNSwxNi40OTM3NSBMMTQuMTU5Mzc1LDIwLjE4MTI1IEwxOS4xLDE0LjMyMTg3NSBDMTkuMTg3NSwxNC4yMTU2MjUgMTkuMzQ2ODc1LDE0LjIwMzEyNSAxOS40NTMxMjUsMTQuMjkwNjI1IEMxOS40NjI1LDE0LjMgMTkuNDc1LDE0LjMwOTM3NSAxOS40ODQzNzUsMTQuMzIxODc1IEwyNi42NTkzNzUsMjIuODA5Mzc1IEMyNi43NDA2MjUsMjIuOTEyNSAyNi43MjgxMjUsMjMuMDcxODc1IDI2LjYyMTg3NSwyMy4xNTkzNzUgWiIgaWQ9IlNoYXBlIiBmaWxsPSIjRThFOEU4Ij48L3BhdGg+CiAgICAgICAgICAgIDwvZz4KICAgICAgICA8L2c+CiAgICA8L2c+Cjwvc3ZnPg==);
|
||||
}
|
||||
}
|
||||
|
||||
&-placeholder {
|
||||
.box();
|
||||
}
|
||||
|
||||
&-preview {
|
||||
text-align: center;
|
||||
height: 100%;
|
||||
pointer-events: none;
|
||||
|
||||
&-body {
|
||||
.box();
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
&.zoom-enter,
|
||||
&.zoom-appear {
|
||||
transform: none;
|
||||
opacity: 0;
|
||||
animation-duration: 0.3s;
|
||||
}
|
||||
|
||||
&-mask {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: @zindex-preview-mask;
|
||||
height: 100%;
|
||||
background-color: @preview-mask-bg;
|
||||
filter: ~'alpha(opacity=50)';
|
||||
|
||||
&-hidden {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&-img {
|
||||
cursor: grab;
|
||||
transform: scale3d(1, 1, 1);
|
||||
transition: transform 0.3s cubic-bezier(0, 0, 0.25, 1) 0s;
|
||||
user-select: none;
|
||||
vertical-align: middle;
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
pointer-events: auto;
|
||||
&-wrapper {
|
||||
.box();
|
||||
transition: transform 0.3s cubic-bezier(0, 0, 0.25, 1) 0s;
|
||||
&::before {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
height: 50%;
|
||||
width: 1px;
|
||||
margin-right: -1px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-moving {
|
||||
.@{prefixCls}-preview-img {
|
||||
cursor: grabbing;
|
||||
&-wrapper {
|
||||
transition-duration: 0s;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-wrap {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: @zindex-preview-mask;
|
||||
overflow: auto;
|
||||
outline: 0;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
&-operations {
|
||||
.reset();
|
||||
pointer-events: auto;
|
||||
list-style: none;
|
||||
position: absolute;
|
||||
display: flex;
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: 100%;
|
||||
align-items: center;
|
||||
flex-direction: row-reverse;
|
||||
z-index: 1;
|
||||
color: @text-color;
|
||||
background: fade(@preview-mask-bg, 45%);
|
||||
|
||||
&-operation {
|
||||
padding: 10px;
|
||||
cursor: pointer;
|
||||
margin-left: 10px;
|
||||
&-disabled {
|
||||
pointer-events: none;
|
||||
color: @text-color-disabled;
|
||||
}
|
||||
&:last-of-type {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
&-icon {
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
&-switch-left {
|
||||
position: absolute;
|
||||
left: 10px;
|
||||
top: 50%;
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
margin-top: -22px;
|
||||
background: fade(@text-color, 45%);
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 1;
|
||||
pointer-events: auto;
|
||||
color: @text-color;
|
||||
&-disabled {
|
||||
background: fade(@text-color, 30%);
|
||||
color: @text-color-disabled;
|
||||
cursor: not-allowed;
|
||||
> .anticon {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
> .anticon {
|
||||
font-size: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
&-switch-right {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
top: 50%;
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
margin-top: -22px;
|
||||
background: fade(@text-color, 45%);
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 1;
|
||||
pointer-events: auto;
|
||||
color: @text-color;
|
||||
&-disabled {
|
||||
background: fade(@text-color, 20%);
|
||||
color: @text-color-disabled;
|
||||
cursor: not-allowed;
|
||||
> .anticon {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
> .anticon {
|
||||
font-size: 24px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.fade-enter,
|
||||
.fade-appear {
|
||||
animation-duration: 0.2s;
|
||||
animation-fill-mode: both;
|
||||
animation-play-state: paused;
|
||||
opacity: 0;
|
||||
animation-timing-function: linear;
|
||||
}
|
||||
.fade-leave {
|
||||
animation-duration: 0.2s;
|
||||
animation-fill-mode: both;
|
||||
animation-play-state: paused;
|
||||
animation-timing-function: linear;
|
||||
}
|
||||
.fade-enter.fade-enter-active,
|
||||
.fade-appear.fade-appear-active {
|
||||
animation-name: rcImageFadeIn;
|
||||
animation-play-state: running;
|
||||
}
|
||||
.fade-leave.fade-leave-active {
|
||||
animation-name: rcImageFadeOut;
|
||||
animation-play-state: running;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
@keyframes rcImageFadeIn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes rcImageFadeOut {
|
||||
0% {
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.zoom-enter,
|
||||
.zoom-appear {
|
||||
-webkit-animation-duration: 0.2s;
|
||||
animation-duration: 0.2s;
|
||||
-webkit-animation-fill-mode: both;
|
||||
animation-fill-mode: both;
|
||||
-webkit-animation-play-state: paused;
|
||||
animation-play-state: paused;
|
||||
-webkit-transform: scale(0);
|
||||
transform: scale(0);
|
||||
opacity: 0;
|
||||
-webkit-animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1);
|
||||
animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1);
|
||||
}
|
||||
.zoom-leave {
|
||||
-webkit-animation-duration: 0.2s;
|
||||
animation-duration: 0.2s;
|
||||
-webkit-animation-fill-mode: both;
|
||||
animation-fill-mode: both;
|
||||
-webkit-animation-play-state: paused;
|
||||
animation-play-state: paused;
|
||||
-webkit-animation-timing-function: cubic-bezier(0.78, 0.14, 0.15, 0.86);
|
||||
animation-timing-function: cubic-bezier(0.78, 0.14, 0.15, 0.86);
|
||||
}
|
||||
.zoom-enter.zoom-enter-active,
|
||||
.zoom-appear.zoom-appear-active {
|
||||
-webkit-animation-name: rcImageZoomIn;
|
||||
animation-name: rcImageZoomIn;
|
||||
-webkit-animation-play-state: running;
|
||||
animation-play-state: running;
|
||||
}
|
||||
.zoom-leave.zoom-leave-active {
|
||||
-webkit-animation-name: rcImageZoomOut;
|
||||
animation-name: rcImageZoomOut;
|
||||
-webkit-animation-play-state: running;
|
||||
animation-play-state: running;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
@keyframes rcImageZoomIn {
|
||||
0% {
|
||||
-webkit-transform: scale(0.2);
|
||||
transform: scale(0.2);
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: scale(1);
|
||||
transform: scale(1);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
@keyframes rcImageZoomOut {
|
||||
0% {
|
||||
-webkit-transform: scale(1);
|
||||
transform: scale(1);
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: scale(0.2);
|
||||
transform: scale(0.2);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
|
@ -1,15 +0,0 @@
|
|||
@overflow-prefix-cls: rc-overflow;
|
||||
|
||||
.@{overflow-prefix-cls} {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
max-width: 100%;
|
||||
position: relative;
|
||||
|
||||
&-item {
|
||||
background: rgba(0, 255, 0, 0.2);
|
||||
box-shadow: 0 0 1px black;
|
||||
flex: none;
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
|
@ -1,98 +0,0 @@
|
|||
import { defineComponent, ref } from 'vue';
|
||||
import Overflow from '..';
|
||||
import '../assets/index.less';
|
||||
import './common.less';
|
||||
|
||||
interface ItemType {
|
||||
value: string | number;
|
||||
label: string;
|
||||
}
|
||||
|
||||
function createData(count: number): ItemType[] {
|
||||
const data: ItemType[] = new Array(count).fill(undefined).map((_, index) => ({
|
||||
value: index,
|
||||
label: `Label ${index}`,
|
||||
}));
|
||||
|
||||
return data;
|
||||
}
|
||||
|
||||
function renderItem(item: ItemType) {
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
margin: '0 16px 0 8px',
|
||||
padding: '4px 8px',
|
||||
background: 'rgba(255, 0, 0, 0.2)',
|
||||
}}
|
||||
>
|
||||
{item.label}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function renderRest(items: ItemType[]) {
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
margin: '0 16px 0 8px',
|
||||
padding: '4px 8px',
|
||||
background: 'rgba(255, 0, 0, 0.2)',
|
||||
}}
|
||||
>
|
||||
+{items.length}...
|
||||
</div>
|
||||
);
|
||||
}
|
||||
export default defineComponent({
|
||||
setup() {
|
||||
const responsive = ref(true);
|
||||
const data = ref(createData(1));
|
||||
return () => {
|
||||
return (
|
||||
<div style={{ padding: '32px' }}>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
responsive.value = !responsive.value;
|
||||
}}
|
||||
>
|
||||
{responsive.value ? 'Responsive' : 'MaxCount: 6'}
|
||||
</button>
|
||||
<select
|
||||
style={{ width: '200px', height: '32px' }}
|
||||
value={data.value.length}
|
||||
onChange={(e: any) => {
|
||||
data.value = createData(Number(e.target.value));
|
||||
}}
|
||||
>
|
||||
<option value={0}>0</option>
|
||||
<option value={1}>1</option>
|
||||
<option value={2}>2</option>
|
||||
<option value={3}>3</option>
|
||||
<option value={5}>5</option>
|
||||
<option value={10}>10</option>
|
||||
<option value={20}>20</option>
|
||||
<option value={200}>200</option>
|
||||
</select>
|
||||
|
||||
<div
|
||||
style={{
|
||||
border: '5px solid green',
|
||||
padding: '8px',
|
||||
maxWidth: '300px',
|
||||
marginTop: '32px',
|
||||
}}
|
||||
>
|
||||
<Overflow
|
||||
data={data.value}
|
||||
renderItem={renderItem}
|
||||
renderRest={renderRest}
|
||||
maxCount={responsive.value ? 'responsive' : 6}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
},
|
||||
});
|
|
@ -1,3 +0,0 @@
|
|||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
Binary file not shown.
Before Width: | Height: | Size: 4.1 KiB |
|
@ -1,115 +0,0 @@
|
|||
h3 {
|
||||
background: #00558b;
|
||||
color: #fff;
|
||||
font-size: 36px;
|
||||
line-height: 100px;
|
||||
margin: 10px;
|
||||
padding: 2%;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
}
|
||||
.variable-width .slick-slide p {
|
||||
background: #00558b;
|
||||
height: 100px;
|
||||
color: #fff;
|
||||
margin: 5px;
|
||||
line-height: 100px;
|
||||
text-align: center;
|
||||
}
|
||||
.center .slick-center h3 {
|
||||
color: #e67e22;
|
||||
opacity: 1;
|
||||
transform: scale(1.08);
|
||||
}
|
||||
.center h3 {
|
||||
opacity: 0.8;
|
||||
transition: all 300ms ease;
|
||||
}
|
||||
.content {
|
||||
padding: 20px;
|
||||
margin: auto;
|
||||
}
|
||||
@media (min-width: 701px) {
|
||||
.content {
|
||||
width: 80%;
|
||||
}
|
||||
}
|
||||
@media (max-width: 700px) {
|
||||
.content {
|
||||
width: 70%;
|
||||
}
|
||||
}
|
||||
.slick-slide .image {
|
||||
padding: 10px;
|
||||
}
|
||||
.slick-slide img {
|
||||
border: 5px solid #fff;
|
||||
display: block;
|
||||
margin: auto;
|
||||
max-width: 80%;
|
||||
}
|
||||
.slick-slide img.slick-loading {
|
||||
border: 0;
|
||||
}
|
||||
.slick-slider {
|
||||
margin: 30px auto 50px;
|
||||
}
|
||||
.slick-dots {
|
||||
margin-left: 0;
|
||||
}
|
||||
.slick-thumb {
|
||||
bottom: -45px;
|
||||
}
|
||||
.slick-thumb li {
|
||||
width: 60px;
|
||||
height: 45px;
|
||||
}
|
||||
.slick-thumb li img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
filter: grayscale(100%);
|
||||
}
|
||||
.slick-thumb li.slick-active img {
|
||||
filter: grayscale(0%);
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
h3 {
|
||||
font-size: 24px;
|
||||
}
|
||||
.center {
|
||||
margin-left: -40px;
|
||||
margin-right: -40px;
|
||||
}
|
||||
.center .slick-center h3 {
|
||||
color: #e67e22;
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
.center h3 {
|
||||
opacity: 0.8;
|
||||
transform: scale(0.95);
|
||||
transition: all 300ms ease;
|
||||
}
|
||||
}
|
||||
.slick-vertical .slick-slide {
|
||||
height: 180px;
|
||||
}
|
||||
.slick-arrow {
|
||||
background-color: grey;
|
||||
}
|
||||
.slick-arrow:hover {
|
||||
background-color: grey;
|
||||
}
|
||||
.slick-arrow:focus {
|
||||
background-color: grey;
|
||||
}
|
||||
.button {
|
||||
background-color: #00558b;
|
||||
padding: 10px 20px;
|
||||
margin: 0px 20px;
|
||||
border: none;
|
||||
color: white;
|
||||
font-size: 20px;
|
||||
border-radius: 5px;
|
||||
min-height: 45px;
|
||||
}
|
Binary file not shown.
|
@ -1,14 +0,0 @@
|
|||
<?xml version="1.0" standalone="no"?>
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||
<svg xmlns="http://www.w3.org/2000/svg">
|
||||
<metadata>Generated by Fontastic.me</metadata>
|
||||
<defs>
|
||||
<font id="slick" horiz-adv-x="512">
|
||||
<font-face font-family="slick" units-per-em="512" ascent="480" descent="-32"/>
|
||||
<missing-glyph horiz-adv-x="512" />
|
||||
|
||||
<glyph unicode="→" d="M241 113l130 130c4 4 6 8 6 13 0 5-2 9-6 13l-130 130c-3 3-7 5-12 5-5 0-10-2-13-5l-29-30c-4-3-6-7-6-12 0-5 2-10 6-13l87-88-87-88c-4-3-6-8-6-13 0-5 2-9 6-12l29-30c3-3 8-5 13-5 5 0 9 2 12 5z m234 143c0-40-9-77-29-110-20-34-46-60-80-80-33-20-70-29-110-29-40 0-77 9-110 29-34 20-60 46-80 80-20 33-29 70-29 110 0 40 9 77 29 110 20 34 46 60 80 80 33 20 70 29 110 29 40 0 77-9 110-29 34-20 60-46 80-80 20-33 29-70 29-110z"/>
|
||||
<glyph unicode="←" d="M296 113l29 30c4 3 6 7 6 12 0 5-2 10-6 13l-87 88 87 88c4 3 6 8 6 13 0 5-2 9-6 12l-29 30c-3 3-8 5-13 5-5 0-9-2-12-5l-130-130c-4-4-6-8-6-13 0-5 2-9 6-13l130-130c3-3 7-5 12-5 5 0 10 2 13 5z m179 143c0-40-9-77-29-110-20-34-46-60-80-80-33-20-70-29-110-29-40 0-77 9-110 29-34 20-60 46-80 80-20 33-29 70-29 110 0 40 9 77 29 110 20 34 46 60 80 80 33 20 70 29 110 29 40 0 77-9 110-29 34-20 60-46 80-80 20-33 29-70 29-110z"/>
|
||||
<glyph unicode="•" d="M475 256c0-40-9-77-29-110-20-34-46-60-80-80-33-20-70-29-110-29-40 0-77 9-110 29-34 20-60 46-80 80-20 33-29 70-29 110 0 40 9 77 29 110 20 34 46 60 80 80 33 20 70 29 110 29 40 0 77-9 110-29 34-20 60-46 80-80 20-33 29-70 29-110z"/>
|
||||
<glyph unicode="a" d="M475 439l0-128c0-5-1-9-5-13-4-4-8-5-13-5l-128 0c-8 0-13 3-17 11-3 7-2 14 4 20l40 39c-28 26-62 39-100 39-20 0-39-4-57-11-18-8-33-18-46-32-14-13-24-28-32-46-7-18-11-37-11-57 0-20 4-39 11-57 8-18 18-33 32-46 13-14 28-24 46-32 18-7 37-11 57-11 23 0 44 5 64 15 20 9 38 23 51 42 2 1 4 3 7 3 3 0 5-1 7-3l39-39c2-2 3-3 3-6 0-2-1-4-2-6-21-25-46-45-76-59-29-14-60-20-93-20-30 0-58 5-85 17-27 12-51 27-70 47-20 19-35 43-47 70-12 27-17 55-17 85 0 30 5 58 17 85 12 27 27 51 47 70 19 20 43 35 70 47 27 12 55 17 85 17 28 0 55-5 81-15 26-11 50-26 70-45l37 37c6 6 12 7 20 4 8-4 11-9 11-17z"/>
|
||||
</font></defs></svg>
|
Before Width: | Height: | Size: 2.1 KiB |
Binary file not shown.
Binary file not shown.
Binary file not shown.
Before Width: | Height: | Size: 26 KiB |
Binary file not shown.
Before Width: | Height: | Size: 10 KiB |
Binary file not shown.
Before Width: | Height: | Size: 5.6 KiB |
Binary file not shown.
Before Width: | Height: | Size: 34 KiB |
|
@ -1,3 +0,0 @@
|
|||
@import './slick';
|
||||
@import './slick-theme';
|
||||
@import './docs';
|
|
@ -1,182 +0,0 @@
|
|||
@charset 'UTF-8';
|
||||
/* Slider */
|
||||
.slick-loading .slick-list {
|
||||
background: #fff url('./ajax-loader.gif') center center no-repeat;
|
||||
}
|
||||
|
||||
/* Icons */
|
||||
// @font-face
|
||||
// {
|
||||
// font-family: 'slick';
|
||||
// font-weight: normal;
|
||||
// font-style: normal;
|
||||
|
||||
// src: url('./fonts/slick.eot');
|
||||
// src: url('./fonts/slick.eot?#iefix') format('embedded-opentype'), url('./fonts/slick.woff') format('woff'), url('./fonts/slick.ttf') format('truetype'), url('./fonts/slick.svg#slick') format('svg');
|
||||
// }
|
||||
/* Arrows */
|
||||
.slick-prev,
|
||||
.slick-next {
|
||||
font-size: 0;
|
||||
line-height: 0;
|
||||
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
|
||||
display: block;
|
||||
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
padding: 0;
|
||||
-webkit-transform: translate(0, -50%);
|
||||
-ms-transform: translate(0, -50%);
|
||||
transform: translate(0, -50%);
|
||||
|
||||
cursor: pointer;
|
||||
|
||||
color: transparent;
|
||||
border: none;
|
||||
outline: none;
|
||||
background: transparent;
|
||||
}
|
||||
.slick-prev:hover,
|
||||
.slick-prev:focus,
|
||||
.slick-next:hover,
|
||||
.slick-next:focus {
|
||||
color: transparent;
|
||||
outline: none;
|
||||
background: transparent;
|
||||
}
|
||||
.slick-prev:hover:before,
|
||||
.slick-prev:focus:before,
|
||||
.slick-next:hover:before,
|
||||
.slick-next:focus:before {
|
||||
opacity: 1;
|
||||
}
|
||||
.slick-prev.slick-disabled:before,
|
||||
.slick-next.slick-disabled:before {
|
||||
opacity: 0.25;
|
||||
}
|
||||
|
||||
.slick-prev:before,
|
||||
.slick-next:before {
|
||||
// font-family: 'slick';
|
||||
font-size: 20px;
|
||||
line-height: 1;
|
||||
|
||||
opacity: 0.75;
|
||||
color: white;
|
||||
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
.slick-prev {
|
||||
left: -25px;
|
||||
}
|
||||
[dir='rtl'] .slick-prev {
|
||||
right: -25px;
|
||||
left: auto;
|
||||
}
|
||||
.slick-prev:before {
|
||||
content: '←';
|
||||
}
|
||||
[dir='rtl'] .slick-prev:before {
|
||||
content: '→';
|
||||
}
|
||||
|
||||
.slick-next {
|
||||
right: -25px;
|
||||
}
|
||||
[dir='rtl'] .slick-next {
|
||||
right: auto;
|
||||
left: -25px;
|
||||
}
|
||||
.slick-next:before {
|
||||
content: '→';
|
||||
}
|
||||
[dir='rtl'] .slick-next:before {
|
||||
content: '←';
|
||||
}
|
||||
|
||||
/* Dots */
|
||||
.slick-dotted.slick-slider {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.slick-dots {
|
||||
position: absolute;
|
||||
bottom: -25px;
|
||||
|
||||
display: block;
|
||||
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
|
||||
list-style: none;
|
||||
|
||||
text-align: center;
|
||||
}
|
||||
.slick-dots li {
|
||||
position: relative;
|
||||
|
||||
display: inline-block;
|
||||
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin: 0 5px;
|
||||
padding: 0;
|
||||
|
||||
cursor: pointer;
|
||||
}
|
||||
.slick-dots li button {
|
||||
font-size: 0;
|
||||
line-height: 0;
|
||||
|
||||
display: block;
|
||||
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
padding: 5px;
|
||||
|
||||
cursor: pointer;
|
||||
|
||||
color: transparent;
|
||||
border: 0;
|
||||
outline: none;
|
||||
background: transparent;
|
||||
}
|
||||
.slick-dots li button:hover,
|
||||
.slick-dots li button:focus {
|
||||
outline: none;
|
||||
}
|
||||
.slick-dots li button:hover:before,
|
||||
.slick-dots li button:focus:before {
|
||||
opacity: 1;
|
||||
}
|
||||
.slick-dots li button:before {
|
||||
// font-family: 'slick';
|
||||
font-size: 40px;
|
||||
line-height: 20px;
|
||||
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
|
||||
content: '•';
|
||||
text-align: center;
|
||||
|
||||
opacity: 0.25;
|
||||
color: black;
|
||||
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
.slick-dots li.slick-active button:before {
|
||||
opacity: 0.75;
|
||||
color: black;
|
||||
}
|
|
@ -1,102 +0,0 @@
|
|||
/* Slider */
|
||||
.slick-slider {
|
||||
position: relative;
|
||||
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
|
||||
-webkit-touch-callout: none;
|
||||
-khtml-user-select: none;
|
||||
-ms-touch-action: pan-y;
|
||||
touch-action: pan-y;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
|
||||
.slick-list {
|
||||
position: relative;
|
||||
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.slick-list:focus {
|
||||
outline: none;
|
||||
}
|
||||
.slick-list.dragging {
|
||||
cursor: pointer;
|
||||
cursor: hand;
|
||||
}
|
||||
|
||||
.slick-slider .slick-track,
|
||||
.slick-slider .slick-list {
|
||||
-webkit-transform: translate3d(0, 0, 0);
|
||||
-moz-transform: translate3d(0, 0, 0);
|
||||
-ms-transform: translate3d(0, 0, 0);
|
||||
-o-transform: translate3d(0, 0, 0);
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
|
||||
.slick-track {
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
||||
display: block;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
.slick-track:before,
|
||||
.slick-track:after {
|
||||
display: table;
|
||||
|
||||
content: '';
|
||||
}
|
||||
.slick-track:after {
|
||||
clear: both;
|
||||
}
|
||||
.slick-loading .slick-track {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.slick-slide {
|
||||
display: none;
|
||||
float: left;
|
||||
|
||||
height: 100%;
|
||||
min-height: 1px;
|
||||
}
|
||||
[dir='rtl'] .slick-slide {
|
||||
float: right;
|
||||
}
|
||||
.slick-slide img {
|
||||
display: block;
|
||||
}
|
||||
.slick-slide.slick-loading img {
|
||||
display: none;
|
||||
}
|
||||
.slick-slide.dragging img {
|
||||
pointer-events: none;
|
||||
}
|
||||
.slick-initialized .slick-slide {
|
||||
display: block;
|
||||
}
|
||||
.slick-loading .slick-slide {
|
||||
visibility: hidden;
|
||||
}
|
||||
.slick-vertical .slick-slide {
|
||||
display: block;
|
||||
|
||||
height: auto;
|
||||
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
.slick-arrow.slick-hidden {
|
||||
display: none;
|
||||
}
|
|
@ -1,307 +0,0 @@
|
|||
@prefixClass: rc-slider;
|
||||
|
||||
@disabledColor: #ccc;
|
||||
@border-radius-base: 6px;
|
||||
@primary-color: #2db7f5;
|
||||
@tooltip-color: #fff;
|
||||
@tooltip-bg: tint(#666, 4%);
|
||||
@tooltip-arrow-width: 4px;
|
||||
@tooltip-distance: @tooltip-arrow-width+4;
|
||||
@tooltip-arrow-color: @tooltip-bg;
|
||||
@ease-out-quint : cubic-bezier(0.23, 1, 0.32, 1);
|
||||
@ease-in-quint : cubic-bezier(0.755, 0.05, 0.855, 0.06);
|
||||
|
||||
.borderBox() {
|
||||
box-sizing: border-box;
|
||||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0); // remove tap highlight color for mobile safari
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0); // remove tap highlight color for mobile safari
|
||||
}
|
||||
}
|
||||
|
||||
.@{prefixClass} {
|
||||
position: relative;
|
||||
height: 14px;
|
||||
padding: 5px 0;
|
||||
width: 100%;
|
||||
border-radius: @border-radius-base;
|
||||
touch-action: none;
|
||||
.borderBox();
|
||||
|
||||
&-rail {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
background-color: #e9e9e9;
|
||||
height: 4px;
|
||||
border-radius: @border-radius-base;
|
||||
}
|
||||
|
||||
&-track {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
height: 4px;
|
||||
border-radius: @border-radius-base;
|
||||
background-color: tint(@primary-color, 60%);
|
||||
}
|
||||
|
||||
&-handle {
|
||||
position: absolute;
|
||||
margin-left: -7px;
|
||||
margin-top: -5px;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
cursor: pointer;
|
||||
cursor: -webkit-grab;
|
||||
cursor: grab;
|
||||
border-radius: 50%;
|
||||
border: solid 2px tint(@primary-color, 50%);
|
||||
background-color: #fff;
|
||||
touch-action: pan-x;
|
||||
|
||||
&:focus {
|
||||
border-color: tint(@primary-color, 20%);
|
||||
box-shadow: 0 0 0 5px tint(@primary-color, 50%);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
&-click-focused:focus {
|
||||
border-color: tint(@primary-color, 50%);
|
||||
box-shadow: unset;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
border-color: tint(@primary-color, 20%);
|
||||
}
|
||||
|
||||
&:active {
|
||||
border-color: tint(@primary-color, 20%);
|
||||
box-shadow: 0 0 5px tint(@primary-color, 20%);
|
||||
cursor: -webkit-grabbing;
|
||||
cursor: grabbing;
|
||||
}
|
||||
}
|
||||
|
||||
&-mark {
|
||||
position: absolute;
|
||||
top: 18px;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
&-mark-text {
|
||||
position: absolute;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
color: #999;
|
||||
|
||||
&-active {
|
||||
color: #666;
|
||||
}
|
||||
}
|
||||
|
||||
&-step {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 4px;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
&-dot {
|
||||
position: absolute;
|
||||
bottom: -2px;
|
||||
margin-left: -4px;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border: 2px solid #e9e9e9;
|
||||
background-color: #fff;
|
||||
cursor: pointer;
|
||||
border-radius: 50%;
|
||||
vertical-align: middle;
|
||||
&-active {
|
||||
border-color: tint(@primary-color, 50%);
|
||||
}
|
||||
}
|
||||
|
||||
&-disabled {
|
||||
background-color: #e9e9e9;
|
||||
|
||||
.@{prefixClass}-track {
|
||||
background-color: @disabledColor;
|
||||
}
|
||||
|
||||
.@{prefixClass}-handle,
|
||||
.@{prefixClass}-dot {
|
||||
border-color: @disabledColor;
|
||||
box-shadow: none;
|
||||
background-color: #fff;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.@{prefixClass}-mark-text,
|
||||
.@{prefixClass}-dot {
|
||||
cursor: not-allowed !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.@{prefixClass}-vertical {
|
||||
width: 14px;
|
||||
height: 100%;
|
||||
padding: 0 5px;
|
||||
|
||||
.@{prefixClass} {
|
||||
&-rail {
|
||||
height: 100%;
|
||||
width: 4px;
|
||||
}
|
||||
|
||||
&-track {
|
||||
left: 5px;
|
||||
bottom: 0;
|
||||
width: 4px;
|
||||
}
|
||||
|
||||
&-handle {
|
||||
margin-left: -5px;
|
||||
margin-bottom: -7px;
|
||||
touch-action: pan-y;
|
||||
}
|
||||
|
||||
&-mark {
|
||||
top: 0;
|
||||
left: 18px;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
&-step {
|
||||
height: 100%;
|
||||
width: 4px;
|
||||
}
|
||||
|
||||
&-dot {
|
||||
left: 2px;
|
||||
margin-bottom: -4px;
|
||||
&:first-child {
|
||||
margin-bottom: -4px;
|
||||
}
|
||||
&:last-child {
|
||||
margin-bottom: -4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.motion-common() {
|
||||
animation-duration: 0.3s;
|
||||
animation-fill-mode: both;
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
.make-motion(@className, @keyframeName) {
|
||||
.@{className}-enter,
|
||||
.@{className}-appear {
|
||||
.motion-common();
|
||||
animation-play-state: paused;
|
||||
}
|
||||
.@{className}-leave {
|
||||
.motion-common();
|
||||
animation-play-state: paused;
|
||||
}
|
||||
.@{className}-enter.@{className}-enter-active,
|
||||
.@{className}-appear.@{className}-appear-active {
|
||||
animation-name: ~'@{keyframeName}In';
|
||||
animation-play-state: running;
|
||||
}
|
||||
.@{className}-leave.@{className}-leave-active {
|
||||
animation-name: ~'@{keyframeName}Out';
|
||||
animation-play-state: running;
|
||||
}
|
||||
}
|
||||
.zoom-motion(@className, @keyframeName) {
|
||||
.make-motion(@className, @keyframeName);
|
||||
.@{className}-enter,
|
||||
.@{className}-appear {
|
||||
transform: scale(0, 0); // need this by yiminghe
|
||||
animation-timing-function: @ease-out-quint;
|
||||
}
|
||||
.@{className}-leave {
|
||||
animation-timing-function: @ease-in-quint;
|
||||
}
|
||||
}
|
||||
.zoom-motion(rc-slider-tooltip-zoom-down, rcSliderTooltipZoomDown);
|
||||
|
||||
@keyframes rcSliderTooltipZoomDownIn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform-origin: 50% 100%;
|
||||
transform: scale(0, 0);
|
||||
}
|
||||
100% {
|
||||
transform-origin: 50% 100%;
|
||||
transform: scale(1, 1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes rcSliderTooltipZoomDownOut {
|
||||
0% {
|
||||
transform-origin: 50% 100%;
|
||||
transform: scale(1, 1);
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
transform-origin: 50% 100%;
|
||||
transform: scale(0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
.@{prefixClass}-tooltip {
|
||||
position: absolute;
|
||||
left: -9999px;
|
||||
top: -9999px;
|
||||
visibility: visible;
|
||||
|
||||
.borderBox();
|
||||
|
||||
&-hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&-placement-top {
|
||||
padding: @tooltip-arrow-width 0 @tooltip-distance 0;
|
||||
}
|
||||
|
||||
&-inner {
|
||||
padding: 6px 2px;
|
||||
min-width: 24px;
|
||||
height: 24px;
|
||||
font-size: 12px;
|
||||
line-height: 1;
|
||||
color: @tooltip-color;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
background-color: @tooltip-bg;
|
||||
border-radius: @border-radius-base;
|
||||
box-shadow: 0 0 4px #d9d9d9;
|
||||
}
|
||||
|
||||
&-arrow {
|
||||
position: absolute;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-color: transparent;
|
||||
border-style: solid;
|
||||
}
|
||||
|
||||
&-placement-top &-arrow {
|
||||
bottom: @tooltip-distance - @tooltip-arrow-width;
|
||||
left: 50%;
|
||||
margin-left: -@tooltip-arrow-width;
|
||||
border-width: @tooltip-arrow-width @tooltip-arrow-width 0;
|
||||
border-top-color: @tooltip-arrow-color;
|
||||
}
|
||||
}
|
|
@ -1,21 +0,0 @@
|
|||
@import 'variables';
|
||||
|
||||
.@{stepsPrefixClass}-item-custom {
|
||||
.@{stepsPrefixClass}-item-icon {
|
||||
background: none;
|
||||
border: 0;
|
||||
width: auto;
|
||||
height: auto;
|
||||
> .@{stepsPrefixClass}-icon {
|
||||
font-size: 20px;
|
||||
top: 1px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
}
|
||||
&.@{stepsPrefixClass}-item-process {
|
||||
.@{stepsPrefixClass}-item-icon > .@{stepsPrefixClass}-icon {
|
||||
color: @process-icon-color;
|
||||
}
|
||||
}
|
||||
}
|
|
@ -1,475 +0,0 @@
|
|||
@icon-url : "//at.alicdn.com/t/font_1434092639_4910953";
|
||||
.ie-rotate(@rotation) {
|
||||
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=@rotation);
|
||||
}
|
||||
.rotate(@degrees) {
|
||||
-webkit-transform: rotate(@degrees);
|
||||
-ms-transform: rotate(@degrees); // IE9 only
|
||||
-o-transform: rotate(@degrees);
|
||||
transform: rotate(@degrees);
|
||||
}
|
||||
.animation(@animation) {
|
||||
-webkit-animation: @animation;
|
||||
-o-animation: @animation;
|
||||
animation: @animation;
|
||||
}
|
||||
// font-face
|
||||
// @icon-url: 字体源文件的地址
|
||||
@font-face {
|
||||
font-family: 'anticon';
|
||||
src: url('@{icon-url}.eot'); /* IE9*/
|
||||
src: url('@{icon-url}.eot?#iefix') format('embedded-opentype'),
|
||||
/* IE6-IE8 */ url('@{icon-url}.woff') format('woff'),
|
||||
/* chrome、firefox */ url('@{icon-url}.ttf') format('truetype'),
|
||||
/* chrome、firefox、opera、Safari, Android, iOS 4.2+*/ url('@{icon-url}.svg#iconfont')
|
||||
format('svg'); /* iOS 4.1- */
|
||||
}
|
||||
|
||||
.rcicon {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
font-style: normal;
|
||||
vertical-align: baseline;
|
||||
text-align: center;
|
||||
text-transform: none;
|
||||
text-rendering: auto;
|
||||
// 更好地渲染字体
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-webkit-text-stroke-width: 0px;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
|
||||
&:before {
|
||||
display: block;
|
||||
font-family: 'anticon' !important;
|
||||
}
|
||||
}
|
||||
// 方向性图标
|
||||
.rcicon-step-backward:before {
|
||||
content: '\e662';
|
||||
}
|
||||
.rcicon-step-forward {
|
||||
.ie-rotate(2);
|
||||
}
|
||||
.rcicon-step-forward:before {
|
||||
content: '\e662';
|
||||
.rotate(180deg);
|
||||
}
|
||||
.rcicon-fast-backward:before {
|
||||
content: '\e62a';
|
||||
}
|
||||
.rcicon-fast-forward {
|
||||
.ie-rotate(2);
|
||||
}
|
||||
.rcicon-fast-forward:before {
|
||||
content: '\e62a';
|
||||
.rotate(180deg);
|
||||
}
|
||||
.rcicon-shrink:before {
|
||||
content: '\e65f';
|
||||
}
|
||||
.rcicon-arrow-salt:before {
|
||||
content: '\e608';
|
||||
}
|
||||
.rcicon-caret-down:before {
|
||||
content: '\e60f';
|
||||
}
|
||||
.rcicon-caret-left {
|
||||
.ie-rotate(1);
|
||||
}
|
||||
.rcicon-caret-left:before {
|
||||
content: '\e60f';
|
||||
.rotate(90deg);
|
||||
}
|
||||
.rcicon-caret-up {
|
||||
.ie-rotate(2);
|
||||
}
|
||||
.rcicon-caret-up:before {
|
||||
content: '\e60f';
|
||||
.rotate(180deg);
|
||||
}
|
||||
.rcicon-caret-right {
|
||||
.ie-rotate(3);
|
||||
}
|
||||
.rcicon-caret-right:before {
|
||||
content: '\e60f';
|
||||
.rotate(270deg);
|
||||
}
|
||||
.rcicon-caret-circle-right:before {
|
||||
content: '\e60d';
|
||||
}
|
||||
.rcicon-caret-circle-left {
|
||||
.ie-rotate(2);
|
||||
}
|
||||
.rcicon-caret-circle-left:before {
|
||||
content: '\e60d';
|
||||
.rotate(180deg);
|
||||
}
|
||||
.rcicon-caret-circle-o-right:before {
|
||||
content: '\e60e';
|
||||
}
|
||||
.rcicon-caret-circle-o-left {
|
||||
.ie-rotate(2);
|
||||
}
|
||||
.rcicon-caret-circle-o-left:before {
|
||||
content: '\e60e';
|
||||
.rotate(180deg);
|
||||
}
|
||||
.rcicon-circle-right:before {
|
||||
content: '\e602';
|
||||
}
|
||||
.rcicon-circle-left {
|
||||
.ie-rotate(2);
|
||||
}
|
||||
.rcicon-circle-left:before {
|
||||
content: '\e602';
|
||||
.rotate(180deg);
|
||||
}
|
||||
.rcicon-circle-o-right:before {
|
||||
content: '\e603';
|
||||
}
|
||||
.rcicon-circle-o-left {
|
||||
.ie-rotate(2);
|
||||
}
|
||||
.rcicon-circle-o-left:before {
|
||||
content: '\e603';
|
||||
.rotate(180deg);
|
||||
}
|
||||
.rcicon-double-right:before {
|
||||
content: '\e604';
|
||||
}
|
||||
.rcicon-double-left {
|
||||
.ie-rotate(2);
|
||||
}
|
||||
.rcicon-double-left:before {
|
||||
content: '\e604';
|
||||
.rotate(180deg);
|
||||
}
|
||||
.rcicon-verticle-right:before {
|
||||
content: '\e605';
|
||||
}
|
||||
.rcicon-verticle-left {
|
||||
.ie-rotate(2);
|
||||
}
|
||||
.rcicon-verticle-left:before {
|
||||
content: '\e605';
|
||||
.rotate(180deg);
|
||||
}
|
||||
.rcicon-forward:before {
|
||||
content: '\e630';
|
||||
}
|
||||
.rcicon-backward {
|
||||
.ie-rotate(2);
|
||||
}
|
||||
.rcicon-backward:before {
|
||||
content: '\e630';
|
||||
.rotate(180deg);
|
||||
}
|
||||
.rcicon-rollback:before {
|
||||
content: '\e65a';
|
||||
}
|
||||
.rcicon-retweet:before {
|
||||
content: '\e659';
|
||||
}
|
||||
|
||||
.rcicon-right:before {
|
||||
content: '\e611';
|
||||
}
|
||||
.rcicon-down {
|
||||
.ie-rotate(1);
|
||||
}
|
||||
.rcicon-down:before {
|
||||
content: '\e611';
|
||||
.rotate(90deg);
|
||||
}
|
||||
.rcicon-left {
|
||||
.ie-rotate(2);
|
||||
}
|
||||
.rcicon-left:before {
|
||||
content: '\e611';
|
||||
.rotate(180deg);
|
||||
}
|
||||
.rcicon-up {
|
||||
.ie-rotate(3);
|
||||
}
|
||||
.rcicon-up:before {
|
||||
content: '\e611';
|
||||
.rotate(270deg);
|
||||
}
|
||||
|
||||
// 提示性图标
|
||||
.rcicon-question:before {
|
||||
content: '\e655';
|
||||
}
|
||||
.rcicon-question-circle:before {
|
||||
content: '\e656';
|
||||
}
|
||||
.rcicon-question-circle-o:before {
|
||||
content: '\e657';
|
||||
}
|
||||
.rcicon-plus:before {
|
||||
content: '\e651';
|
||||
}
|
||||
.rcicon-plus-circle:before {
|
||||
content: '\e652';
|
||||
}
|
||||
.rcicon-plus-circle-o:before {
|
||||
content: '\e653';
|
||||
}
|
||||
.rcicon-pause:before {
|
||||
content: '\e64c';
|
||||
}
|
||||
.rcicon-pause-circle:before {
|
||||
content: '\e64d';
|
||||
}
|
||||
.rcicon-pause-circle-o:before {
|
||||
content: '\e64e';
|
||||
}
|
||||
.rcicon-minus:before {
|
||||
content: '\e646';
|
||||
}
|
||||
.rcicon-minus-circle:before {
|
||||
content: '\e647';
|
||||
}
|
||||
.rcicon-minus-circle-o:before {
|
||||
content: '\e648';
|
||||
}
|
||||
.rcicon-info-circle:before {
|
||||
content: '\e637';
|
||||
}
|
||||
.rcicon-info-circle-o:before {
|
||||
content: '\e638';
|
||||
}
|
||||
.rcicon-info:before {
|
||||
content: '\e63a';
|
||||
}
|
||||
.rcicon-exclamation:before {
|
||||
content: '\e627';
|
||||
}
|
||||
.rcicon-exclamation-circle:before {
|
||||
content: '\e628';
|
||||
}
|
||||
.rcicon-exclamation-circle-o:before {
|
||||
content: '\e629';
|
||||
}
|
||||
.rcicon-cross:before {
|
||||
content: '\e61e';
|
||||
}
|
||||
.rcicon-cross-circle:before {
|
||||
content: '\e61f';
|
||||
}
|
||||
.rcicon-cross-circle-o:before {
|
||||
content: '\e620';
|
||||
}
|
||||
.rcicon-check:before {
|
||||
content: '\e613';
|
||||
}
|
||||
.rcicon-check-circle:before {
|
||||
content: '\e614';
|
||||
}
|
||||
.rcicon-check-circle-o:before {
|
||||
content: '\e615';
|
||||
}
|
||||
.rcicon-clock-circle:before {
|
||||
content: '\e616';
|
||||
}
|
||||
.rcicon-clock-circle-o:before {
|
||||
content: '\e617';
|
||||
}
|
||||
|
||||
// 网站通用图标
|
||||
.rcicon-lock:before {
|
||||
content: '\e641';
|
||||
}
|
||||
.rcicon-android:before {
|
||||
content: '\e601';
|
||||
}
|
||||
.rcicon-apple:before {
|
||||
content: '\e606';
|
||||
}
|
||||
.rcicon-area-chart:before {
|
||||
content: '\e607';
|
||||
}
|
||||
.rcicon-bar-chart:before {
|
||||
content: '\e609';
|
||||
}
|
||||
.rcicon-bars:before {
|
||||
content: '\e60a';
|
||||
}
|
||||
.rcicon-book:before {
|
||||
content: '\e60b';
|
||||
}
|
||||
.rcicon-calendar:before {
|
||||
content: '\e60c';
|
||||
}
|
||||
.rcicon-cloud:before {
|
||||
content: '\e618';
|
||||
}
|
||||
.rcicon-cloud-download:before {
|
||||
content: '\e619';
|
||||
}
|
||||
.rcicon-code:before {
|
||||
content: '\e61a';
|
||||
}
|
||||
.rcicon-copy:before {
|
||||
content: '\e61c';
|
||||
}
|
||||
.rcicon-credit-card:before {
|
||||
content: '\e61d';
|
||||
}
|
||||
.rcicon-delete:before {
|
||||
content: '\e621';
|
||||
}
|
||||
.rcicon-desktop:before {
|
||||
content: '\e622';
|
||||
}
|
||||
.rcicon-download-line:before {
|
||||
content: '\e623';
|
||||
}
|
||||
.rcicon-edit:before {
|
||||
content: '\e624';
|
||||
}
|
||||
.rcicon-ellipsis:before {
|
||||
content: '\e625';
|
||||
}
|
||||
.rcicon-environment:before {
|
||||
content: '\e626';
|
||||
}
|
||||
.rcicon-file:before {
|
||||
content: '\e62c';
|
||||
}
|
||||
.rcicon-file-text:before {
|
||||
content: '\e62d';
|
||||
}
|
||||
.rcicon-folder:before {
|
||||
content: '\e62e';
|
||||
}
|
||||
.rcicon-folder-open:before {
|
||||
content: '\e62f';
|
||||
}
|
||||
.rcicon-github:before {
|
||||
content: '\e631';
|
||||
}
|
||||
.rcicon-hdd:before {
|
||||
content: '\e632';
|
||||
}
|
||||
.rcicon-frown:before {
|
||||
content: '\e633';
|
||||
}
|
||||
.rcicon-meh:before {
|
||||
content: '\e634';
|
||||
}
|
||||
.rcicon-inbox:before {
|
||||
content: '\e635';
|
||||
}
|
||||
.rcicon-laptop:before {
|
||||
content: '\e63d';
|
||||
}
|
||||
.rcicon-large:before {
|
||||
content: '\e63e';
|
||||
}
|
||||
.rcicon-line-chart:before {
|
||||
content: '\e63f';
|
||||
}
|
||||
.rcicon-link:before {
|
||||
content: '\e640';
|
||||
}
|
||||
.rcicon-logout:before {
|
||||
content: '\e642';
|
||||
}
|
||||
.rcicon-mail:before {
|
||||
content: '\e643';
|
||||
}
|
||||
.rcicon-menu-fold:before {
|
||||
content: '\e644';
|
||||
}
|
||||
.rcicon-menu-unfold:before {
|
||||
content: '\e645';
|
||||
}
|
||||
.rcicon-mobile:before {
|
||||
content: '\e649';
|
||||
}
|
||||
.rcicon-notification:before {
|
||||
content: '\e64a';
|
||||
}
|
||||
.rcicon-paper-clip:before {
|
||||
content: '\e64b';
|
||||
}
|
||||
.rcicon-picture:before {
|
||||
content: '\e64f';
|
||||
}
|
||||
.rcicon-pie-chart:before {
|
||||
content: '\e650';
|
||||
}
|
||||
.rcicon-poweroff:before {
|
||||
content: '\e654';
|
||||
}
|
||||
.rcicon-reload:before {
|
||||
content: '\e658';
|
||||
}
|
||||
.rcicon-search:before {
|
||||
content: '\e65b';
|
||||
}
|
||||
.rcicon-setting:before {
|
||||
content: '\e65c';
|
||||
}
|
||||
.rcicon-share-alt:before {
|
||||
content: '\e65d';
|
||||
}
|
||||
.rcicon-shopping-cart:before {
|
||||
content: '\e65e';
|
||||
}
|
||||
.rcicon-smile:before {
|
||||
content: '\e661';
|
||||
}
|
||||
.rcicon-tablet:before {
|
||||
content: '\e664';
|
||||
}
|
||||
.rcicon-tag:before {
|
||||
content: '\e665';
|
||||
}
|
||||
.rcicon-tags:before {
|
||||
content: '\e666';
|
||||
}
|
||||
.rcicon-to-top:before {
|
||||
content: '\e667';
|
||||
}
|
||||
.rcicon-unlock:before {
|
||||
content: '\e668';
|
||||
}
|
||||
.rcicon-upload:before {
|
||||
content: '\e669';
|
||||
}
|
||||
.rcicon-user:before {
|
||||
content: '\e66a';
|
||||
}
|
||||
.rcicon-video-camera:before {
|
||||
content: '\e66b';
|
||||
}
|
||||
.rcicon-windows:before {
|
||||
content: '\e66c';
|
||||
}
|
||||
.rcicon-loading:before {
|
||||
display: inline-block;
|
||||
.animation(loadingCircle 1s infinite linear);
|
||||
content: '\e610';
|
||||
}
|
||||
|
||||
:root {
|
||||
.rcicon-step-forward,
|
||||
.rcicon-fast-forward,
|
||||
.rcicon-left,
|
||||
.rcicon-up,
|
||||
.rcicon-down,
|
||||
.rcicon-caret-left,
|
||||
.rcicon-caret-up,
|
||||
.rcicon-caret-right,
|
||||
.rcicon-caret-circle-left,
|
||||
.rcicon-caret-circle-o-left,
|
||||
.rcicon-circle-left,
|
||||
.rcicon-circle-o-left,
|
||||
.rcicon-double-left,
|
||||
.rcicon-verticle-left,
|
||||
.rcicon-backward {
|
||||
filter: none;
|
||||
}
|
||||
}
|
|
@ -1,168 +0,0 @@
|
|||
@import 'variables';
|
||||
|
||||
.@{stepsPrefixClass} {
|
||||
font-size: 0;
|
||||
width: 100%;
|
||||
line-height: 1.5;
|
||||
display: flex;
|
||||
|
||||
&,
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
|
||||
.@{stepsPrefixClass}-item {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
|
||||
&:last-child {
|
||||
flex: none;
|
||||
}
|
||||
|
||||
&:last-child &-tail,
|
||||
&:last-child &-title:after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&-icon,
|
||||
&-content {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
&-icon {
|
||||
border: 1px solid @wait-icon-color;
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
line-height: 26px;
|
||||
text-align: center;
|
||||
border-radius: 26px;
|
||||
font-size: 14px;
|
||||
margin-right: 8px;
|
||||
transition: background-color 0.3s, border-color 0.3s;
|
||||
|
||||
> .@{stepsPrefixClass}-icon {
|
||||
line-height: 1;
|
||||
top: -1px;
|
||||
color: @primary-color;
|
||||
position: relative;
|
||||
|
||||
&.rcicon {
|
||||
font-size: 12px;
|
||||
position: relative;
|
||||
top: -2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-tail {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
top: 12px;
|
||||
padding: 0 10px;
|
||||
&:after {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
background: @wait-tail-color;
|
||||
height: 1px;
|
||||
border-radius: 1px;
|
||||
width: 100%;
|
||||
transition: background 0.3s;
|
||||
}
|
||||
}
|
||||
&-content {
|
||||
margin-top: 3px;
|
||||
}
|
||||
&-title {
|
||||
font-size: 14px;
|
||||
margin-bottom: 4px;
|
||||
color: #666;
|
||||
font-weight: bold;
|
||||
display: inline-block;
|
||||
padding-right: 10px;
|
||||
position: relative;
|
||||
&:after {
|
||||
content: '';
|
||||
height: 1px;
|
||||
width: 1000px;
|
||||
background: @wait-tail-color;
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0.55em;
|
||||
left: 100%;
|
||||
}
|
||||
}
|
||||
&-description {
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
}
|
||||
.step-item-status(wait);
|
||||
.step-item-status(process);
|
||||
&-process &-icon {
|
||||
background: @process-icon-color;
|
||||
> .@{stepsPrefixClass}-icon {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
.step-item-status(finish);
|
||||
.step-item-status(error);
|
||||
|
||||
&.@{stepsPrefixClass}-next-error .@{stepsPrefixClass}-item-title:after {
|
||||
background: @error-icon-color;
|
||||
}
|
||||
}
|
||||
|
||||
.@{stepsPrefixClass}-horizontal:not(.@{stepsPrefixClass}-label-vertical) {
|
||||
.@{stepsPrefixClass}-item {
|
||||
margin-right: 10px;
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
&-tail {
|
||||
display: none;
|
||||
}
|
||||
&-description {
|
||||
max-width: @stepDescriptionMaxWidth;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.step-item-status(@status) {
|
||||
@icon-color: '@{status}-icon-color';
|
||||
@title-color: '@{status}-title-color';
|
||||
@description-color: '@{status}-description-color';
|
||||
@tail-color: '@{status}-tail-color';
|
||||
&-@{status} &-icon {
|
||||
border-color: @@icon-color;
|
||||
background-color: #fff;
|
||||
> .@{stepsPrefixClass}-icon {
|
||||
color: @@icon-color;
|
||||
.@{stepsPrefixClass}-icon-dot {
|
||||
background: @@icon-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
&-@{status} &-title {
|
||||
color: @@title-color;
|
||||
&:after {
|
||||
background-color: @@tail-color;
|
||||
}
|
||||
}
|
||||
&-@{status} &-description {
|
||||
color: @@description-color;
|
||||
}
|
||||
&-@{status} &-tail:after {
|
||||
background-color: @@tail-color;
|
||||
}
|
||||
}
|
||||
|
||||
@import 'custom-icon';
|
||||
@import 'small';
|
||||
@import 'vertical';
|
||||
@import 'label-placement';
|
||||
@import 'progress-dot';
|
|
@ -1,30 +0,0 @@
|
|||
@import 'variables';
|
||||
|
||||
.@{stepsPrefixClass}-label-vertical {
|
||||
.@{stepsPrefixClass}-item {
|
||||
overflow: visible;
|
||||
&-tail {
|
||||
padding: 0px 24px;
|
||||
margin-left: 48px;
|
||||
}
|
||||
&-content {
|
||||
display: block;
|
||||
text-align: center;
|
||||
margin-top: 8px;
|
||||
width: @stepDescriptionMaxWidth;
|
||||
}
|
||||
&-icon {
|
||||
display: inline-block;
|
||||
margin-left: 36px;
|
||||
}
|
||||
&-title {
|
||||
padding-right: 0;
|
||||
&:after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
&-description {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
}
|
|
@ -1,39 +0,0 @@
|
|||
@import 'variables';
|
||||
|
||||
.@{stepsPrefixClass}-dot {
|
||||
.@{stepsPrefixClass}-item {
|
||||
&-tail {
|
||||
width: 100%;
|
||||
top: 1px;
|
||||
margin: 0 0 0 (@stepDescriptionMaxWidth / 2);
|
||||
padding: 0;
|
||||
|
||||
&:after {
|
||||
height: 3px;
|
||||
}
|
||||
}
|
||||
&-icon {
|
||||
padding-right: 0;
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
line-height: 5px;
|
||||
border: 0;
|
||||
margin-left: 48px;
|
||||
.@{stepsPrefixClass}-icon-dot {
|
||||
float: left;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 2.5px;
|
||||
}
|
||||
}
|
||||
&-process &-icon {
|
||||
top: -1px;
|
||||
width: 7px;
|
||||
height: 7px;
|
||||
line-height: 7px;
|
||||
.@{stepsPrefixClass}-icon-dot {
|
||||
border-radius: 3.5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
|
@ -1,55 +0,0 @@
|
|||
@import 'variables';
|
||||
|
||||
.@{stepsPrefixClass}-small {
|
||||
.@{stepsPrefixClass}-item-icon {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
line-height: 18px;
|
||||
text-align: center;
|
||||
border-radius: 18px;
|
||||
font-size: 12px;
|
||||
margin-right: 10px;
|
||||
> .@{stepsPrefixClass}-icon {
|
||||
font-size: 12px;
|
||||
font-size: ~'9px \9'; // ie8-9
|
||||
transform: scale(0.75);
|
||||
top: -1px;
|
||||
}
|
||||
}
|
||||
.@{stepsPrefixClass}-item-content {
|
||||
margin-top: 0;
|
||||
}
|
||||
.@{stepsPrefixClass}-item-title {
|
||||
font-size: 12px;
|
||||
margin-bottom: 4px;
|
||||
color: #666;
|
||||
font-weight: bold;
|
||||
}
|
||||
.@{stepsPrefixClass}-item-description {
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
}
|
||||
.@{stepsPrefixClass}-item-tail {
|
||||
top: 8px;
|
||||
padding: 0 8px;
|
||||
&:after {
|
||||
height: 1px;
|
||||
border-radius: 1px;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.@{stepsPrefixClass}-item-custom .@{stepsPrefixClass}-item-icon {
|
||||
width: inherit;
|
||||
height: inherit;
|
||||
line-height: inherit;
|
||||
border-radius: 0;
|
||||
border: 0;
|
||||
background: none;
|
||||
> .@{stepsPrefixClass}-icon {
|
||||
font-size: 20px;
|
||||
top: -2.5px;
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
}
|
|
@ -1,19 +0,0 @@
|
|||
@stepsPrefixClass: ~'rc-steps';
|
||||
@stepDescriptionMaxWidth: 100px;
|
||||
@primary-color: #108ee9;
|
||||
@process-icon-color: @primary-color;
|
||||
@process-title-color: rgba(0, 0, 0, 0.65);
|
||||
@process-description-color: @process-title-color;
|
||||
@process-tail-color: #e9e9e9;
|
||||
@wait-icon-color: #ccc;
|
||||
@wait-title-color: rgba(0, 0, 0, 0.43);
|
||||
@wait-description-color: @wait-title-color;
|
||||
@wait-tail-color: @process-tail-color;
|
||||
@finish-icon-color: @process-icon-color;
|
||||
@finish-title-color: @wait-title-color;
|
||||
@finish-description-color: @finish-title-color;
|
||||
@finish-tail-color: @process-icon-color;
|
||||
@error-icon-color: #f50;
|
||||
@error-title-color: @error-icon-color;
|
||||
@error-description-color: @error-icon-color;
|
||||
@error-tail-color: @process-tail-color;
|
|
@ -1,53 +0,0 @@
|
|||
@import 'variables';
|
||||
|
||||
.@{stepsPrefixClass}-vertical {
|
||||
display: block;
|
||||
.@{stepsPrefixClass}-item {
|
||||
display: block;
|
||||
overflow: visible;
|
||||
&-icon {
|
||||
float: left;
|
||||
&-inner {
|
||||
margin-right: 16px;
|
||||
}
|
||||
}
|
||||
&-content {
|
||||
min-height: 48px;
|
||||
overflow: hidden;
|
||||
display: block;
|
||||
}
|
||||
&-title {
|
||||
line-height: 26px;
|
||||
&:after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
&-description {
|
||||
padding-bottom: 12px;
|
||||
}
|
||||
&-tail {
|
||||
position: absolute;
|
||||
left: 13px;
|
||||
top: 0;
|
||||
height: 100%;
|
||||
width: 1px;
|
||||
padding: 30px 0 4px 0;
|
||||
&:after {
|
||||
height: 100%;
|
||||
width: 1px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.@{stepsPrefixClass}-small {
|
||||
.@{stepsPrefixClass}-item-tail {
|
||||
position: absolute;
|
||||
left: 9px;
|
||||
top: 0;
|
||||
padding: 22px 0 4px 0;
|
||||
}
|
||||
.@{stepsPrefixClass}-item-title {
|
||||
line-height: 18px;
|
||||
}
|
||||
}
|
||||
}
|
|
@ -1,61 +0,0 @@
|
|||
.@{tooltip-prefix-cls} {
|
||||
.effect() {
|
||||
animation-duration: 0.3s;
|
||||
animation-fill-mode: both;
|
||||
}
|
||||
|
||||
&&-zoom-enter,
|
||||
&&-zoom-leave {
|
||||
display: block;
|
||||
}
|
||||
|
||||
&-zoom-enter,
|
||||
&-zoom-appear {
|
||||
opacity: 0;
|
||||
.effect();
|
||||
animation-timing-function: cubic-bezier(0.18, 0.89, 0.32, 1.28);
|
||||
animation-play-state: paused;
|
||||
}
|
||||
|
||||
&-zoom-leave {
|
||||
.effect();
|
||||
animation-timing-function: cubic-bezier(0.6, -0.3, 0.74, 0.05);
|
||||
animation-play-state: paused;
|
||||
}
|
||||
|
||||
&-zoom-enter&-zoom-enter-active,
|
||||
&-zoom-appear&-zoom-appear-active {
|
||||
animation-name: rcToolTipZoomIn;
|
||||
animation-play-state: running;
|
||||
}
|
||||
|
||||
&-zoom-leave&-zoom-leave-active {
|
||||
animation-name: rcToolTipZoomOut;
|
||||
animation-play-state: running;
|
||||
}
|
||||
|
||||
@keyframes rcToolTipZoomIn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform-origin: 50% 50%;
|
||||
transform: scale(0, 0);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform-origin: 50% 50%;
|
||||
transform: scale(1, 1);
|
||||
}
|
||||
}
|
||||
@keyframes rcToolTipZoomOut {
|
||||
0% {
|
||||
opacity: 1;
|
||||
transform-origin: 50% 50%;
|
||||
transform: scale(1, 1);
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
transform-origin: 50% 50%;
|
||||
transform: scale(0, 0);
|
||||
}
|
||||
}
|
||||
}
|
|
@ -1,171 +0,0 @@
|
|||
@import 'boostrap/anim.less';
|
||||
|
||||
@tooltip-prefix-cls: rc-tooltip;
|
||||
|
||||
//
|
||||
// Tooltips
|
||||
// --------------------------------------------------
|
||||
@font-size-base : 12px;
|
||||
@line-height-base : 1.5;
|
||||
@border-radius-base : 6px;
|
||||
@overlay-shadow : 0 0 4px rgba(0, 0, 0, 0.17);
|
||||
//** Tooltip text color
|
||||
@tooltip-color: #fff;
|
||||
//** Tooltip background color
|
||||
@tooltip-bg: #373737;
|
||||
@tooltip-opacity: 0.9;
|
||||
|
||||
//** Tooltip arrow width
|
||||
@tooltip-arrow-width: 5px;
|
||||
//** Tooltip distance with trigger
|
||||
@tooltip-distance: @tooltip-arrow-width + 4;
|
||||
//** Tooltip arrow color
|
||||
@tooltip-arrow-color: @tooltip-bg;
|
||||
|
||||
// Base class
|
||||
.@{tooltip-prefix-cls} {
|
||||
position: absolute;
|
||||
z-index: 1070;
|
||||
display: block;
|
||||
visibility: visible;
|
||||
// remove left/top by yiminghe
|
||||
// left: -9999px;
|
||||
// top: -9999px;
|
||||
font-size: @font-size-base;
|
||||
line-height: @line-height-base;
|
||||
opacity: @tooltip-opacity;
|
||||
|
||||
&-hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&-placement-top,
|
||||
&-placement-topLeft,
|
||||
&-placement-topRight {
|
||||
padding: @tooltip-arrow-width 0 @tooltip-distance 0;
|
||||
}
|
||||
&-placement-right,
|
||||
&-placement-rightTop,
|
||||
&-placement-rightBottom {
|
||||
padding: 0 @tooltip-arrow-width 0 @tooltip-distance;
|
||||
}
|
||||
&-placement-bottom,
|
||||
&-placement-bottomLeft,
|
||||
&-placement-bottomRight {
|
||||
padding: @tooltip-distance 0 @tooltip-arrow-width 0;
|
||||
}
|
||||
&-placement-left,
|
||||
&-placement-leftTop,
|
||||
&-placement-leftBottom {
|
||||
padding: 0 @tooltip-distance 0 @tooltip-arrow-width;
|
||||
}
|
||||
}
|
||||
|
||||
// Wrapper for the tooltip content
|
||||
.@{tooltip-prefix-cls}-inner {
|
||||
padding: 8px 10px;
|
||||
color: @tooltip-color;
|
||||
text-align: left;
|
||||
text-decoration: none;
|
||||
background-color: @tooltip-bg;
|
||||
border-radius: @border-radius-base;
|
||||
box-shadow: @overlay-shadow;
|
||||
min-height: 34px;
|
||||
}
|
||||
|
||||
// Arrows
|
||||
.@{tooltip-prefix-cls}-arrow {
|
||||
position: absolute;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-color: transparent;
|
||||
border-style: solid;
|
||||
}
|
||||
|
||||
.@{tooltip-prefix-cls} {
|
||||
&-placement-top &-arrow,
|
||||
&-placement-topLeft &-arrow,
|
||||
&-placement-topRight &-arrow {
|
||||
bottom: @tooltip-distance - @tooltip-arrow-width;
|
||||
margin-left: -@tooltip-arrow-width;
|
||||
border-width: @tooltip-arrow-width @tooltip-arrow-width 0;
|
||||
border-top-color: @tooltip-arrow-color;
|
||||
}
|
||||
|
||||
&-placement-top &-arrow {
|
||||
left: 50%;
|
||||
}
|
||||
|
||||
&-placement-topLeft &-arrow {
|
||||
left: 15%;
|
||||
}
|
||||
|
||||
&-placement-topRight &-arrow {
|
||||
right: 15%;
|
||||
}
|
||||
|
||||
&-placement-right &-arrow,
|
||||
&-placement-rightTop &-arrow,
|
||||
&-placement-rightBottom &-arrow {
|
||||
left: @tooltip-distance - @tooltip-arrow-width;
|
||||
margin-top: -@tooltip-arrow-width;
|
||||
border-width: @tooltip-arrow-width @tooltip-arrow-width @tooltip-arrow-width 0;
|
||||
border-right-color: @tooltip-arrow-color;
|
||||
}
|
||||
|
||||
&-placement-right &-arrow {
|
||||
top: 50%;
|
||||
}
|
||||
|
||||
&-placement-rightTop &-arrow {
|
||||
top: 15%;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
&-placement-rightBottom &-arrow {
|
||||
bottom: 15%;
|
||||
}
|
||||
|
||||
&-placement-left &-arrow,
|
||||
&-placement-leftTop &-arrow,
|
||||
&-placement-leftBottom &-arrow {
|
||||
right: @tooltip-distance - @tooltip-arrow-width;
|
||||
margin-top: -@tooltip-arrow-width;
|
||||
border-width: @tooltip-arrow-width 0 @tooltip-arrow-width @tooltip-arrow-width;
|
||||
border-left-color: @tooltip-arrow-color;
|
||||
}
|
||||
|
||||
&-placement-left &-arrow {
|
||||
top: 50%;
|
||||
}
|
||||
|
||||
&-placement-leftTop &-arrow {
|
||||
top: 15%;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
&-placement-leftBottom &-arrow {
|
||||
bottom: 15%;
|
||||
}
|
||||
|
||||
&-placement-bottom &-arrow,
|
||||
&-placement-bottomLeft &-arrow,
|
||||
&-placement-bottomRight &-arrow {
|
||||
top: @tooltip-distance - @tooltip-arrow-width;
|
||||
margin-left: -@tooltip-arrow-width;
|
||||
border-width: 0 @tooltip-arrow-width @tooltip-arrow-width;
|
||||
border-bottom-color: @tooltip-arrow-color;
|
||||
}
|
||||
|
||||
&-placement-bottom &-arrow {
|
||||
left: 50%;
|
||||
}
|
||||
|
||||
&-placement-bottomLeft &-arrow {
|
||||
left: 15%;
|
||||
}
|
||||
|
||||
&-placement-bottomRight &-arrow {
|
||||
right: 15%;
|
||||
}
|
||||
}
|
|
@ -1,190 +0,0 @@
|
|||
@import 'boostrap/anim.less';
|
||||
|
||||
@tooltip-prefix-cls: rc-tooltip;
|
||||
|
||||
//
|
||||
// Tooltips
|
||||
// --------------------------------------------------
|
||||
@font-size-base : 12px;
|
||||
@line-height-base : 1.5;
|
||||
@border-radius-base : 3px;
|
||||
@overlay-shadow : 0 0 4px rgba(0, 0, 0, 0.17);
|
||||
//** Tooltip text color
|
||||
@tooltip-color: #333333;
|
||||
//** Tooltip background color
|
||||
@tooltip-bg: #ffffff;
|
||||
@tooltip-opacity: 0.9;
|
||||
|
||||
@tooltip-border-width: 1px;
|
||||
@tooltip-border-color: #b1b1b1;
|
||||
@tooltip-shadow-width: 1px;
|
||||
|
||||
//** Tooltip arrow width
|
||||
@tooltip-arrow-width: 6px;
|
||||
//** Tooltip distance with trigger
|
||||
//** Tooltip arrow color
|
||||
@tooltip-arrow-color: @tooltip-border-color;
|
||||
@tooltip-arrow-inner-color: @tooltip-bg;
|
||||
|
||||
// Base class
|
||||
.@{tooltip-prefix-cls} {
|
||||
position: absolute;
|
||||
z-index: 1070;
|
||||
display: block;
|
||||
visibility: visible;
|
||||
line-height: @line-height-base;
|
||||
font-size: @font-size-base;
|
||||
background-color: rgba(0, 0, 0, 0.05);
|
||||
padding: @tooltip-shadow-width;
|
||||
opacity: @tooltip-opacity;
|
||||
|
||||
&-hidden {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Wrapper for the tooltip content
|
||||
.@{tooltip-prefix-cls}-inner {
|
||||
padding: 8px 10px;
|
||||
color: @tooltip-color;
|
||||
text-align: left;
|
||||
text-decoration: none;
|
||||
background-color: @tooltip-bg;
|
||||
border-radius: @border-radius-base;
|
||||
min-height: 34px;
|
||||
border: @tooltip-border-width solid @tooltip-border-color;
|
||||
}
|
||||
|
||||
// Arrows
|
||||
.@{tooltip-prefix-cls}-arrow,
|
||||
.@{tooltip-prefix-cls}-arrow-inner {
|
||||
position: absolute;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-color: transparent;
|
||||
border-style: solid;
|
||||
}
|
||||
|
||||
.@{tooltip-prefix-cls} {
|
||||
&-placement-top &-arrow,
|
||||
&-placement-topLeft &-arrow,
|
||||
&-placement-topRight &-arrow {
|
||||
bottom: -@tooltip-arrow-width + @tooltip-shadow-width;
|
||||
margin-left: -@tooltip-arrow-width;
|
||||
border-width: @tooltip-arrow-width @tooltip-arrow-width 0;
|
||||
border-top-color: @tooltip-arrow-color;
|
||||
}
|
||||
|
||||
&-placement-top &-arrow-inner,
|
||||
&-placement-topLeft &-arrow-inner,
|
||||
&-placement-topRight &-arrow-inner {
|
||||
bottom: @tooltip-border-width;
|
||||
margin-left: -@tooltip-arrow-width;
|
||||
border-width: @tooltip-arrow-width @tooltip-arrow-width 0;
|
||||
border-top-color: @tooltip-arrow-inner-color;
|
||||
}
|
||||
|
||||
&-placement-top &-arrow {
|
||||
left: 50%;
|
||||
}
|
||||
|
||||
&-placement-topLeft &-arrow {
|
||||
left: 15%;
|
||||
}
|
||||
|
||||
&-placement-topRight &-arrow {
|
||||
right: 15%;
|
||||
}
|
||||
|
||||
&-placement-right &-arrow,
|
||||
&-placement-rightTop &-arrow,
|
||||
&-placement-rightBottom &-arrow {
|
||||
left: -@tooltip-arrow-width + @tooltip-shadow-width;
|
||||
margin-top: -@tooltip-arrow-width;
|
||||
border-width: @tooltip-arrow-width @tooltip-arrow-width @tooltip-arrow-width 0;
|
||||
border-right-color: @tooltip-arrow-color;
|
||||
}
|
||||
|
||||
&-placement-right &-arrow-inner,
|
||||
&-placement-rightTop &-arrow-inner,
|
||||
&-placement-rightBottom &-arrow-inner {
|
||||
left: @tooltip-border-width;
|
||||
margin-top: -@tooltip-arrow-width;
|
||||
border-width: @tooltip-arrow-width @tooltip-arrow-width @tooltip-arrow-width 0;
|
||||
border-right-color: @tooltip-arrow-inner-color;
|
||||
}
|
||||
|
||||
&-placement-right &-arrow {
|
||||
top: 50%;
|
||||
}
|
||||
|
||||
&-placement-rightTop &-arrow {
|
||||
top: 15%;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
&-placement-rightBottom &-arrow {
|
||||
bottom: 15%;
|
||||
}
|
||||
|
||||
&-placement-left &-arrow,
|
||||
&-placement-leftTop &-arrow,
|
||||
&-placement-leftBottom &-arrow {
|
||||
right: -@tooltip-arrow-width + @tooltip-shadow-width;
|
||||
margin-top: -@tooltip-arrow-width;
|
||||
border-width: @tooltip-arrow-width 0 @tooltip-arrow-width @tooltip-arrow-width;
|
||||
border-left-color: @tooltip-arrow-color;
|
||||
}
|
||||
|
||||
&-placement-left &-arrow-inner,
|
||||
&-placement-leftTop &-arrow-inner,
|
||||
&-placement-leftBottom &-arrow-inner {
|
||||
right: @tooltip-border-width;
|
||||
margin-top: -@tooltip-arrow-width;
|
||||
border-width: @tooltip-arrow-width 0 @tooltip-arrow-width @tooltip-arrow-width;
|
||||
border-left-color: @tooltip-arrow-inner-color;
|
||||
}
|
||||
|
||||
&-placement-left &-arrow {
|
||||
top: 50%;
|
||||
}
|
||||
|
||||
&-placement-leftTop &-arrow {
|
||||
top: 15%;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
&-placement-leftBottom &-arrow {
|
||||
bottom: 15%;
|
||||
}
|
||||
|
||||
&-placement-bottom &-arrow,
|
||||
&-placement-bottomLeft &-arrow,
|
||||
&-placement-bottomRight &-arrow {
|
||||
top: -@tooltip-arrow-width + @tooltip-shadow-width;
|
||||
margin-left: -@tooltip-arrow-width;
|
||||
border-width: 0 @tooltip-arrow-width @tooltip-arrow-width;
|
||||
border-bottom-color: @tooltip-arrow-color;
|
||||
}
|
||||
|
||||
&-placement-bottom &-arrow-inner,
|
||||
&-placement-bottomLeft &-arrow-inner,
|
||||
&-placement-bottomRight &-arrow-inner {
|
||||
top: @tooltip-border-width;
|
||||
margin-left: -@tooltip-arrow-width;
|
||||
border-width: 0 @tooltip-arrow-width @tooltip-arrow-width;
|
||||
border-bottom-color: @tooltip-arrow-inner-color;
|
||||
}
|
||||
|
||||
&-placement-bottom &-arrow {
|
||||
left: 50%;
|
||||
}
|
||||
|
||||
&-placement-bottomLeft &-arrow {
|
||||
left: 15%;
|
||||
}
|
||||
|
||||
&-placement-bottomRight &-arrow {
|
||||
right: 15%;
|
||||
}
|
||||
}
|
|
@ -1,72 +0,0 @@
|
|||
@triggerPrefixCls: rc-trigger-popup;
|
||||
.@{triggerPrefixCls} {
|
||||
position: absolute;
|
||||
left: -9999px;
|
||||
top: -9999px;
|
||||
z-index: 1050;
|
||||
|
||||
&-hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.effect() {
|
||||
animation-duration: 0.3s;
|
||||
animation-fill-mode: both;
|
||||
}
|
||||
|
||||
&-zoom-enter,
|
||||
&-zoom-appear {
|
||||
opacity: 0;
|
||||
.effect();
|
||||
animation-timing-function: cubic-bezier(0.18, 0.89, 0.32, 1.28);
|
||||
animation-play-state: paused;
|
||||
}
|
||||
|
||||
&-zoom-leave {
|
||||
animation-timing-function: cubic-bezier(0.6, -0.3, 0.74, 0.05);
|
||||
animation-play-state: paused;
|
||||
}
|
||||
|
||||
&-zoom-enter-active,
|
||||
&-zoom-appear-active {
|
||||
.effect();
|
||||
animation-name: rcTriggerZoomIn;
|
||||
animation-play-state: running;
|
||||
}
|
||||
|
||||
&-zoom-leave-active {
|
||||
.effect();
|
||||
animation-name: rcTriggerZoomOut;
|
||||
animation-play-state: running;
|
||||
}
|
||||
|
||||
@keyframes rcTriggerZoomIn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
1% {
|
||||
opacity: 0;
|
||||
transform-origin: 50% 50%;
|
||||
transform: scale(0, 0);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform-origin: 50% 50%;
|
||||
transform: scale(1, 1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes rcTriggerZoomOut {
|
||||
0% {
|
||||
opacity: 1;
|
||||
transform-origin: 50% 50%;
|
||||
transform: scale(1, 1);
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
transform-origin: 50% 50%;
|
||||
transform: scale(0, 0);
|
||||
}
|
||||
}
|
||||
}
|
||||
@import './mask';
|
|
@ -1,65 +0,0 @@
|
|||
.@{triggerPrefixCls} {
|
||||
&-mask {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
background-color: rgb(55, 55, 55);
|
||||
background-color: rgba(55, 55, 55, 0.6);
|
||||
height: 100%;
|
||||
filter: alpha(opacity=50);
|
||||
z-index: 1050;
|
||||
|
||||
&-hidden {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.fade-effect() {
|
||||
animation-duration: 0.3s;
|
||||
animation-fill-mode: both;
|
||||
animation-timing-function: cubic-bezier(0.55, 0, 0.55, 0.2);
|
||||
}
|
||||
|
||||
&-fade-enter,
|
||||
&-fade-appear {
|
||||
opacity: 0;
|
||||
.fade-effect();
|
||||
animation-play-state: paused;
|
||||
}
|
||||
|
||||
&-fade-leave {
|
||||
.fade-effect();
|
||||
animation-play-state: paused;
|
||||
}
|
||||
|
||||
&-fade-enter&-fade-enter-active,
|
||||
&-fade-appear&-fade-appear-active {
|
||||
animation-name: rcTriggerMaskFadeIn;
|
||||
animation-play-state: running;
|
||||
}
|
||||
|
||||
&-fade-leave&-fade-leave-active {
|
||||
animation-name: rcDialogFadeOut;
|
||||
animation-play-state: running;
|
||||
}
|
||||
|
||||
@keyframes rcTriggerMaskFadeIn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes rcDialogFadeOut {
|
||||
0% {
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
}
|
|
@ -1,31 +0,0 @@
|
|||
.motion {
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.item {
|
||||
display: inline-block;
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0 16px;
|
||||
overflow: hidden;
|
||||
line-height: 31px;
|
||||
position: relative;
|
||||
|
||||
&:hover {
|
||||
background: rgba(255, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
border-bottom: 1px solid gray;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
button {
|
||||
vertical-align: text-top;
|
||||
margin-right: 8px;
|
||||
}
|
||||
}
|
|
@ -1,216 +0,0 @@
|
|||
/* eslint-disable no-console */
|
||||
import { reactive, ref } from 'vue';
|
||||
|
||||
import List from '../List';
|
||||
import './basic.less';
|
||||
|
||||
const MyItem = (_, { attrs: { id } }) => (
|
||||
<span
|
||||
// style={{
|
||||
// // height: 30 + (id % 2 ? 0 : 10),
|
||||
// }}
|
||||
class="fixed-item"
|
||||
onClick={() => {
|
||||
console.log('Click:', id);
|
||||
}}
|
||||
>
|
||||
{id}
|
||||
</span>
|
||||
);
|
||||
|
||||
const TestItem = {
|
||||
render() {
|
||||
return <div style={{ lineHeight: '30px' }}>{this.$attrs.id}</div>;
|
||||
},
|
||||
};
|
||||
|
||||
const data = [];
|
||||
for (let i = 0; i < 1000; i += 1) {
|
||||
data.push({
|
||||
id: String(i),
|
||||
});
|
||||
}
|
||||
|
||||
const TYPES = [
|
||||
{ name: 'ref real dom element', type: 'dom' },
|
||||
{ name: 'ref vue node', type: 'vue' },
|
||||
];
|
||||
|
||||
const onScroll = e => {
|
||||
console.log('scroll:', e.currentTarget.scrollTop);
|
||||
};
|
||||
|
||||
const state = reactive({
|
||||
destroy: false,
|
||||
visible: true,
|
||||
type: 'dom',
|
||||
});
|
||||
|
||||
const listRef = ref(null);
|
||||
const Demo = () => {
|
||||
const { destroy, visible, type } = state;
|
||||
return (
|
||||
<div style={{ height: '200vh' }}>
|
||||
<h2>Basic</h2>
|
||||
{TYPES.map(({ name, type: nType }) => (
|
||||
<label key={nType}>
|
||||
<input
|
||||
name="type"
|
||||
type="radio"
|
||||
checked={type === nType}
|
||||
onChange={() => {
|
||||
state.type = nType;
|
||||
}}
|
||||
/>
|
||||
{name}
|
||||
</label>
|
||||
))}
|
||||
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
listRef.value.scrollTo(100);
|
||||
}}
|
||||
>
|
||||
Scroll To 100px
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
listRef.value.scrollTo({
|
||||
index: 50,
|
||||
align: 'top',
|
||||
});
|
||||
}}
|
||||
>
|
||||
Scroll To 50 (top)
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
listRef.value.scrollTo({
|
||||
index: 50,
|
||||
align: 'bottom',
|
||||
});
|
||||
}}
|
||||
>
|
||||
Scroll To 50 (bottom)
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
listRef.value.scrollTo({
|
||||
index: 50,
|
||||
align: 'auto',
|
||||
});
|
||||
}}
|
||||
>
|
||||
Scroll To 50 (auto)
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
listRef.value.scrollTo({
|
||||
index: 50,
|
||||
align: 'top',
|
||||
offset: 15,
|
||||
});
|
||||
}}
|
||||
>
|
||||
Scroll To 50 (top) + 15 offset
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
listRef.value.scrollTo({
|
||||
index: 50,
|
||||
align: 'bottom',
|
||||
offset: 15,
|
||||
});
|
||||
}}
|
||||
>
|
||||
Scroll To 50 (bottom) + 15 offset
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
listRef.value.scrollTo({
|
||||
key: '50',
|
||||
align: 'auto',
|
||||
});
|
||||
}}
|
||||
>
|
||||
Scroll To key 50 (auto)
|
||||
</button>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
state.visible = !state.visible;
|
||||
}}
|
||||
>
|
||||
visible
|
||||
</button>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
listRef.value.scrollTo({
|
||||
index: data.length - 2,
|
||||
align: 'top',
|
||||
});
|
||||
}}
|
||||
>
|
||||
Scroll To Last (top)
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
listRef.value.scrollTo({
|
||||
index: 0,
|
||||
align: 'bottom',
|
||||
});
|
||||
}}
|
||||
>
|
||||
Scroll To First (bottom)
|
||||
</button>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
listRef.value.scrollTo({
|
||||
index: 50,
|
||||
align: 'top',
|
||||
});
|
||||
state.destroy = true;
|
||||
}}
|
||||
>
|
||||
Scroll To remove
|
||||
</button>
|
||||
|
||||
{!destroy && (
|
||||
<List
|
||||
id="list"
|
||||
ref={listRef}
|
||||
data={data}
|
||||
height={200}
|
||||
itemHeight={20}
|
||||
itemKey="id"
|
||||
style={{
|
||||
border: '1px solid red',
|
||||
boxSizing: 'border-box',
|
||||
display: visible ? null : 'none',
|
||||
}}
|
||||
onScroll={onScroll}
|
||||
children={(item, _, props) =>
|
||||
type === 'dom' ? <MyItem {...item} {...props} /> : <TestItem {...item} {...props} />
|
||||
}
|
||||
></List>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Demo;
|
||||
|
||||
/* eslint-enable */
|
|
@ -1,8 +0,0 @@
|
|||
.fixed-item {
|
||||
border: 1px solid gray;
|
||||
padding: 0 16px;
|
||||
height: 32px;
|
||||
line-height: 30px;
|
||||
box-sizing: border-box;
|
||||
display: inline-block;
|
||||
}
|
Loading…
Reference in New Issue