ant-design/.dumi/theme/common/styles/Icon.tsx

112 lines
2.7 KiB
TypeScript
Raw Normal View History

import { css, Global } from '@emotion/react';
import React from 'react';
import { useTheme } from 'antd-style';
export default () => {
const token = useTheme();
const { antCls, iconCls } = token;
return (
<Global
styles={css`
ul.anticons-list {
margin: 10px 0;
overflow: hidden;
direction: ltr;
list-style: none;
li {
position: relative;
float: left;
width: 16.66%;
height: 100px;
margin: 3px 0;
padding: 10px 0 0;
overflow: hidden;
color: #555;
text-align: center;
list-style: none;
background-color: inherit;
border-radius: 4px;
cursor: pointer;
transition: color 0.3s ease-in-out, background-color 0.3s ease-in-out;
.rtl & {
margin: 3px 0;
padding: 10px 0 0;
}
${iconCls} {
margin: 12px 0 8px;
font-size: 36px;
transition: transform 0.3s ease-in-out;
will-change: transform;
}
.anticon-class {
display: block;
font-family: 'Lucida Console', Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono',
monospace;
white-space: nowrap;
text-align: center;
transform: scale(0.83);
${antCls}-badge {
transition: color 0.3s ease-in-out;
}
}
&:hover {
color: #fff;
background-color: ${token.colorPrimary};
${iconCls} {
transform: scale(1.4);
}
${antCls}-badge {
color: #fff;
}
}
&.TwoTone:hover {
background-color: #8ecafe;
}
&.copied:hover {
color: rgba(255, 255, 255, 0.2);
}
&::after {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
color: #fff;
line-height: 110px;
text-align: center;
background: #1677ff;
opacity: 0;
transition: all 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28);
content: 'Copied!';
}
&.copied::after {
opacity: 1;
}
}
}
.copied-code {
padding: 2px 4px;
font-size: 12px;
background: #f5f5f5;
border-radius: 2px;
}
`}
/>
);
};