onepage
Version:
Static one-page site generator
162 lines (153 loc) • 3.68 kB
text/less
.ca-menu{
padding: 0 0 0 0px;
margin: 0px auto 0px auto;
display: block;
float: left;
clear:left;
li{
width: 110px;
height: 110px;
border: 6px solid @border-color;
overflow: hidden;
position: relative;
float:left;
background: @base2;
margin-left:-22px;
-webkit-box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
-moz-box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
-webkit-border-radius: 125px;
-moz-border-radius: 125px;
border-radius: 125px;
-webkit-transition: all 400ms linear;
-moz-transition: all 400ms linear;
-o-transition: all 400ms linear;
-ms-transition: all 400ms linear;
transition: all 400ms linear;
&:first-child{
margin-left:24px;
@media @mobile{
margin-left:10px;
}
}
@media @mobile{
width:75px;
height:75px;
border: 4px solid @border-color;
margin-left: -10px
}
&:last-child{
margin-right: 0px;
}
a{
text-align: left;
width: 100%;
height: 100%;
display: block;
color: #333;
position: relative;
text-decoration: none;
}
}
}
.ca-icon{
font-size: 35px;
color: @header-font-color;
line-height: 40px;
position: absolute;
width: 100%;
height: 40px;
left: 26px;
top: 10px;
text-align: center;
-webkit-transition: all 400ms linear;
-moz-transition: all 400ms linear;
-o-transition: all 400ms linear;
-ms-transition: all 400ms linear;
transition: all 400ms linear;
@media @mobile{
line-height: 30px;
left:14px;
top:5px;
font-size: 1.8rem;
}
}
.ca-main{
font-size: 1.4rem;
position: absolute;
top: 60px;
height: 80px;
width: 170px;
left: 50%;
margin-left: -85px;
opacity: 0.8;
text-align: center;
color: @header-font-color;
@media @mobile{
top:34px;
font-size:1rem;
}
}
.ca-sub{
display: none;
}
.ca-menu li.hover{
border-color: #eee;
z-index: 999;
-webkit-transform: scale(1.2);
-moz-transform: scale(1.1);
-o-transform: scale(1.1);
-ms-transform: scale(1.1);
transform: scale(1.1);
-webkit-box-shadow: 0px 0px 20px rgba(0,0,0,0.8);
-moz-box-shadow: 0px 0px 20px rgba(0,0,0,0.8);
box-shadow: 0px 0px 20px rgba(0,0,0,0.8);
}
.ca-menu li.hover .ca-icon{
// color: #000;
font-size: 50px;
text-shadow: 0px 0px 1px #000;
-webkit-animation: moveFromBottom 300ms ease;
-moz-animation: moveFromBottom 300ms ease;
-ms-animation: moveFromBottom 300ms ease;
left:20px;
top:20px;
@media @mobile{
font-size: 40px;
left:10px;
top:10px;
}
}
.ca-menu li.hover .ca-main{
display: none;
}
@-webkit-keyframes moveFromBottom {
from {
-webkit-transform: translateY(200%) scale(0.5);
opacity: 0;
}
to {
-webkit-transform: translateY(0%) scale(1);
opacity: 1;
}
}
@-moz-keyframes moveFromBottom {
from {
-moz-transform: translateY(200%) scale(0.5);
opacity: 0;
}
to {
-moz-transform: translateY(0%) scale(1);
opacity: 1;
}
}
@-ms-keyframes moveFromBottom {
from {
-ms-transform: translateY(200%) scale(0.5);
opacity: 0;
}
to {
-ms-transform: translateY(0%) scale(1);
opacity: 1;
}
}