circular-menu
Version:
cool,highly interactive circular menu
116 lines (115 loc) • 3.17 kB
CSS
/* line 3, ../../sass/circular-menu.scss */
.circular-menu {
font-family: "Helvetica Neue", Helvetica, "Hiragino Sans GB", "STHeitiSC-Light", "Microsoft YaHei", Arial, sans-serif;
z-index: 1040;
border-radius: 50%;
background: transparent;
opacity: 0;
position: fixed;
display: none;
transition: opacity .3s ease, transform .3s ease;
cursor: default;
transform: scale(0.1);
pointer-events: none;
overflow: hidden;
/*cover to prevent extra space of anchors from being clickable*/
}
/* line 17, ../../sass/circular-menu.scss */
.circular-menu.circular-sub-menu {
transition: all 0s ease 0s;
}
/* line 19, ../../sass/circular-menu.scss */
.circular-menu.circular-sub-menu:after {
display: none;
}
/* line 25, ../../sass/circular-menu.scss */
.circular-menu:after {
content: ".";
display: block;
position: absolute;
left: 50%;
top: 50%;
border-radius: 50%;
z-index: 10;
color: transparent;
box-sizing: border-box;
}
/* line 37, ../../sass/circular-menu.scss */
.circular-menu.opened-nav {
opacity: 1;
transition: opacity .3s ease, transform .3s ease;
transform: scale(1);
pointer-events: auto;
}
/* line 43, ../../sass/circular-menu.scss */
.circular-menu.opened-nav li {
transition: all .3s ease .3s;
pointer-events: none;
}
/* line 46, ../../sass/circular-menu.scss */
.circular-menu.opened-nav li a {
pointer-events: auto;
}
/* line 48, ../../sass/circular-menu.scss */
.circular-menu.opened-nav li a .horizontal {
pointer-events: none;
}
/* line 55, ../../sass/circular-menu.scss */
.circular-menu ul {
box-sizing: border-box;
margin: 0;
padding: 0;
list-style: none;
}
/* line 60, ../../sass/circular-menu.scss */
.circular-menu ul li {
box-sizing: border-box;
margin: 0;
padding: 0;
position: absolute;
overflow: hidden;
transition: all .3s ease;
border: 1px solid transparent;
transform-origin: 100% 100%;
}
/* line 69, ../../sass/circular-menu.scss */
.circular-menu ul li a {
box-sizing: border-box;
position: absolute;
display: block;
border-radius: 50%;
cursor: pointer;
color: #fff;
padding-top: 10px;
text-align: center;
text-decoration: none;
backface-visibility: hidden;
}
/* line 80, ../../sass/circular-menu.scss */
.circular-menu ul li a span.cm-icon {
display: inline-block;
background-size: cover;
}
/* line 85, ../../sass/circular-menu.scss */
.circular-menu ul li a span.text {
display: block;
font-size: 13px;
line-height: 1;
position: relative;
font-family: "Helvetica Neue", Helvetica, "Hiragino Sans GB", "STHeitiSC-Light", "Microsoft YaHei", Arial, sans-serif;
}
/* line 95, ../../sass/circular-menu.scss */
.circular-menu ul li a .cn-icon:before {
display: table;
}
/* line 99, ../../sass/circular-menu.scss */
.circular-menu ul li a.disabled {
-webkit-filter: grayscale(100%);
pointer-events: none ;
cursor: default;
}
/* line 105, ../../sass/circular-menu.scss */
.circular-menu ul li a:focus {
position: fixed;
/* fix the displacement bug in webkit browsers when using tab key */
}