@import url("http://fonts.googleapis.com/css?family=Lato:300,400,700,900");
@import url(http://fonts.googleapis.com/css?family=Pacifico);
body {
font-family: "Lato", Helvetica, Arial;
font-size: 16px;
}
*, *:before, *:after {
-webkit-border-sizing: border-box;
-moz-border-sizing: border-box;
border-sizing: border-box;
}
.container {
width: 350px;
margin: 50px auto;
& > ul {
list-style: none;
padding: 0;
margin: 0 0 20px 0;
}
}
// =============================================================================
// Mixins and Variables
// =============================================================================
$orange: #C0392B;
$blue: #2980B9;
$gray: #EEE;
@mixin ul-nostyle {
list-style: none;
padding: 0;
margin: 0;
}
@mixin double-shadow($color) {
@include box-shadow(0 1px 0 lighten($color, 10%) inset, 0 -1px 0 darken($color, 10%) inset);
}
@mixin hover-style($color) {
&:hover {
background: lighten($color, 3%);
}
}
@mixin animation($content) {
animation: $content;
-moz-animation: $content;
-webkit-animation: $content;
}
@mixin keyframes($name) {
@keyframes #{$name} { @content; }
@-moz-keyframes #{$name} { @content; }
@-webkit-keyframes #{$name} { @content; }
}
// =============================================================================
// Classes
// =============================================================================
.title {
font-family: 'Pacifico';
font-weight: norma;
font-size: 40px;
text-align: center;
line-height: 1.4;
color: $orange;
}
.dropdown {
position: relative;
a { text-decoration: none; }
[data-toggle="dropdown"] {
display: block;
color: white;
background: $orange;
@include double-shadow($orange);
@include hover-style($orange);
@include text-shadow(0 -1px 0 rgba(0,0,0,0.3));
padding: 10px;
&:before {
position: absolute;
display: block;
content: '\25BC';
font-size: 0.7em;
color: #fff;
top: 13px;
right: 10px;
@include transform(rotate(0deg));
@include transition(transform .6s);
}
}
& > .dropdown-menu {
max-height: 0;
overflow: hidden;
@include ul-nostyle;
@include transform(scaleY(0));
@include transform-origin(50%, 0%);
@include transition(max-height .6s ease-out);
@include animation(hideAnimation .4s ease-out);
li {
padding: 0;
a {
display: block;
color: darken($gray, 50%);
background: $gray;
@include double-shadow($gray);
@include hover-style($gray);
@include text-shadow(0 -1px 0 rgba(255,255,255,0.3));
padding: 10px 10px;
}
}
}
& > input[type="checkbox"] {
opacity: 0;
display: block;
position: absolute;
top: 0;
width: 100%;
height: 100%;
cursor: pointer;
&:checked ~ .dropdown-menu {
max-height: 9999px;
display: block;
@include transform(scaleY(1));
@include animation(showAnimation .5s ease-in-out);
@include transition(max-height 2s ease-in-out);
}
&:checked + a[data-toggle="dropdown"] {
&:before {
@include transform(rotate(-180deg));
@include transition(transform .6s);
}
}
}
}
@include keyframes(showAnimation) {
0% {
@include transform(scaleY(0.1));
}
40% {
@include transform(scaleY(1.04));
}
60% {
@include transform(scaleY(0.98));
}
80% {
@include transform(scaleY(1.04));
}
100% {
@include transform(scaleY(0.98));
}
80% {
@include transform(scaleY(1.02));
}
100% {
@include transform(scaleY(1));
}
}
@include keyframes(hideAnimation) {
0% {
@include transform(scaleY(1));
}
60% {
@include transform(scaleY(0.98));
}
80% {
@include transform(scaleY(1.02));
}
100% {
@include transform(scaleY(0));
}
}
No comments:
Post a Comment