@import "$yo/core/reset";
@import "$yo/layout/yo-flex";
@import "$yo/layout/yo-root";
@import "$yo/element/yo-btn";
@import "$yo/fragment/yo-header";

// header
.yo-header .affirm{
    font-size: .14rem;
}

// popup
.m-popup{
    background-color: #fff;
    padding: .15rem .10rem .15rem .15rem;
    .m-popup-title{
        margin-bottom: .1rem;
        color: #333;
    }
}
.m-popup-tab{
    @include flexbox;
    @include flex-wrap(wrap);
    .m-popup-item{
        flex: 1 0 auto;
        @include ellipsis;
        display: inline-block;
        width: 45%;
        margin-right: .05rem;
        margin-bottom: .05rem;
        padding: .045rem .07rem;
        text-align: center;
        border: 1px solid #1ba9ba;
        border-radius: .05rem;
    }
    .popupitem-highlight{
        background-color: #1ba9ba;
        color: #fff;
    }
}
.m-btn{
    padding-right: .05rem;
}
@include yo-btn(
    $name: detail,
    $bgcolor: #1ba9ba,
    $border-color: #1ba9ba,
    $touch-border-color: #4ad0e0,
    $touch-bgcolor: #4ad0e0
){
    margin-top: .1rem;
};

// grouplist
.m-carousel{
    width: 100%;
    background-color: #eee;
    .item{
        width: 100%;
    }
    .img{
        width: 100%;
    }
}

.yo-list > .item:first-child{
    display: block;
    padding: 0;
    background-color: #eee;
}

.grouptitle{
    border-left: .02rem solid #1ba9ba;
    .title{
        color: #333;
    }
}

.yo-group .grouptitle{
    background-color: #eee;
    padding: .1rem .08rem;
}
.m-group-item{
    padding: .15rem;
    .title{
        font-weight: 500;
        color: #333;
    }
    .intro{
        font-size: .12rem;
        color: #666;
        margin-top: .03rem;
    }
    .state{
        display: inline-block;
        height: .10rem;
        width: .10rem;
        border-radius: 50%;
        margin-right: .04rem;
        position: relative;
        top: .01rem;
    }
    .yes{
        background-color: #1abc9c;
    }
    .no{
        background-color: #ff887c;
    }
    .btn{
        color: #555;
        padding: .1rem;
        border-radius: .05rem;
        transition: all .2s;
    }
    .touchable-highlight{
        background-color: #eee;
    }
    .m-tip{
        font-size: .13rem;
        color: #555;
    }
}

.actionsheet-up {
  -webkit-animation-name: actionsheet-up;
  animation-name: actionsheet-up;
}

.actionsheet-down {
  -webkit-animation-name: actionsheet-down;
  animation-name: actionsheet-down;
}

// Yo Alert animate
@keyframes actionsheet-up {
    from {
        transform: translate3d(0, 100%, 0);
    }
    to {
        transform: translate3d(0, 0, 0);
    }
}

@keyframes actionsheet-down {
    from {
        transform: translate3d(0, 0, 0);
    }
    to {
        transform: translate3d(0, 100%, 0);
    }
}