style: remove not use file

pull/5202/head
tangjinzhou 2022-01-23 10:21:23 +08:00
parent 3d2a80b3bb
commit ae4085f7c0
35 changed files with 0 additions and 2826 deletions

View File

@ -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;
}
}

View File

@ -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%;
}
}

View File

@ -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>
);
};
},
});

View File

@ -1,3 +0,0 @@
* {
box-sizing: border-box;
}

Binary file not shown.

Before

Width:  |  Height:  |  Size: 4.1 KiB

View File

@ -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;
}

View File

@ -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="&#8594;" 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="&#8592;" 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="&#8226;" 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="&#97;" 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.

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

View File

@ -1,3 +0,0 @@
@import './slick';
@import './slick-theme';
@import './docs';

View File

@ -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;
}

View File

@ -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;
}

View File

@ -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;
}
}

View File

@ -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;
}
}
}

View File

@ -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;
}
}

View File

@ -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';

View File

@ -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;
}
}
}

View File

@ -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;
}
}
}
}

View File

@ -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;
}
}
}

View File

@ -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;

View File

@ -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;
}
}
}

View File

@ -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);
}
}
}

View File

@ -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%;
}
}

View File

@ -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%;
}
}

View File

@ -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';

View File

@ -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;
}
}
}

View File

@ -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;
}
}

View File

@ -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 */

View File

@ -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;
}