UNPKG

onepage

Version:

Static one-page site generator

162 lines (153 loc) 3.68 kB
.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; } }