@import "./common/common";
@import "./common/util";
.dropdown {
    position: relative;
    display: inline-block;
    font-size: px2rem(14);
    width:100%;
    button {
        outline: 0 none;
        background: #FFF;
        padding: px2rem(8) px2rem(10);
        border: px2rem(1) solid #E5E5E5;
        border-radius: px2rem(4);
        line-height: px2rem(20);
        clear: both;
        overflow: hidden;
        width:100%;
        .iconfont {
            float: right;
            font-size: px2rem(13);
            padding-left: px2rem(5);
            box-sizing: border-box;
            width: 20%;
            color:#888;
        }
        .dropdown-status {
            float: left;
            width:80%;
            text-align:left;
        }
    }
    &.active button {
        border-radius: px2rem(4) px2rem(4) 0 0;
        border: px2rem(1) solid #CCC;
    }
    &>.dropdown-content {
        position: absolute;
        z-index: 12;
        background: #FFF;
        width: 100%;
        box-sizing: border-box;
        border-radius: 0 0 px2rem(4) px2rem(4);
        display: none;
        opacity: 0;
        padding: 0 0 px2rem(8) 0;
        text-align: left;
        &.active {
            border: px2rem(1) solid #CCC;
            border-top: 0 none;
            margin-top: px2rem(-1);
            display: block;
            overflow:hidden;
            opacity: 1;
            animation: slide-to-top .1s ease-in-out;
        }
    }
}

.dropdown-headless{
    position: relative;
    display: inline-block;
    font-size: px2rem(14);
    width:100%;
    &>.dropdown-content{
        position:static;
        opacity:1;
        display: block;
        padding: 0 0 px2rem(8) 0;
        text-align: left;
        width: 100%;
        &.active{
            margin-top:0;
            border:0 none;
        }
    }
    .fixed-caret{
        width:px2rem(20);
        height:px2rem(20);
        right:0;
        top:0;
        position:absolute;
        .iconfont {
            font-size: px2rem(13);
            padding-left: px2rem(13);
            box-sizing: border-box;
            color:#888;
        }
    }
}

@keyframes slide-to-top {
    0% {
        opacity: 0.3;
    }
    30% {
        opacity: 0.6;
    }
    75% {
        opacity: 0.8;
    }
    100% {
        opacity: 1;
    }
}