@zhsz/cool-design-dv
Version:
54 lines (48 loc) • 1.06 kB
CSS
/* BEM support Func
-------------------------- */
/* Break-points
-------------------------- */
/* Scrollbar
-------------------------- */
/* Placeholder
-------------------------- */
/* BEM
-------------------------- */
.my-dv-menu-item {
position: relative;
display: inline-block;
}
.my-dv-menu-item__content {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
text-align: center;
font-size: 20px;
font-weight: 600;
cursor: pointer;
text-shadow: 0 2px 4px rgba(11, 116, 210, 0.45), 0 0 6px rgba(148, 245, 233, 0.35);
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
}
.my-dv-menu-item__bg {
display: none;
}
.my-dv-menu-item:hover .my-dv-menu-item__line {
fill: rgba(255, 255, 255, 0.15);
}
.my-dv-menu-item:hover .my-dv-menu-item__content {
color: #fff;
}
.my-dv-menu-item.is-active .my-dv-menu-item__bg {
display: block;
}
.my-dv-menu-item.is-active .my-dv-menu-item__content {
color: #fff;
}
.my-dv-menu-item.is-reverse .my-dv-menu-item__svg {
transform: scaleX(-1);
}