ant-design-vue/site/theme/static/icons.less
2018-11-27 18:25:38 +08:00

80 lines
1.5 KiB
Plaintext

ul.anticons-list {
margin: 10px 0;
list-style: none;
overflow: hidden;
li {
float: left;
width: 16.66%;
text-align: center;
list-style: none;
cursor: pointer;
height: 100px;
color: #555;
transition: color .3s ease-in-out, background-color .3s ease-in-out;
position: relative;
margin: 3px 0;
border-radius: 4px;
background-color: #fff;
overflow: hidden;
padding: 10px 0 0;
.anticon {
font-size: 36px;
margin: 12px 0 8px;
transition: transform .3s ease-in-out;
will-change: transform;
}
.anticon-class {
display: block;
text-align: center;
transform: scale(0.83);
font-family: "Lucida Console", Consolas;
white-space: nowrap;
.ant-badge {
transition: color .3s ease-in-out;
}
}
&:hover {
background-color: @primary-color;
color: #fff;
.anticon {
transform: scale(1.4);
}
.ant-badge {
color: #fff;
}
}
&.copied:hover {
color: rgba(255, 255, 255, 0.2);
}
&:after {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
content: "Copied!";
text-align: center;
line-height: 110px;
color: #fff;
transition: all 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28);
opacity: 0;
}
&.copied:after {
opacity: 1;
top: -10px;
}
}
}
.copied-code {
font-size: 12px;
background: #f5f5f5;
border-radius: 2px;
padding: 2px 4px 2px;
}