ijijin-view/vue/less/Alert.less

vuejs UI components, from ijijin.

@import './colors.less';

/*
 * v-alert
 */
 .vu-alert {
     .m-win {
         padding-top: 4vw;
         left: 50%;
         top: 50%;
         width: 70%;
         font-size: 14px;
         line-height: 18px;
         text-align: center;
         word-break: break-all;
         background-color: #fff;
         border-radius: 8px;
         -webkit-transition: 0.3s;
         -webkit-transform: translate3d(-50%, -50%, 0);
         transition: 0.3s;
         transform: translate3d(-50%, -50%, 0);
     }
     .u-btn {
         color: #323232;
     }

     .m-tit {
         text-align: center;
     }

     .m-ctn {
         padding: 1.867vw 5.067vw 4vw;
     }
     .m-ctn.z-notit {
         padding-top: 5.867vw;
         padding-bottom: 5.867vw;
     }

     .u-btn, .u-btn_il {
         position: relative;
         padding: 5px 0;
         height: 8.533vw;
         line-height: 8.533vw;
         font-size: 4vw;
         text-align: center;
         border-radius: 4px;

         &:after{
             position: absolute;
             content: '';
             right: 0;
             top: 0;
             width: 1px;
             height: 100%;
             background-color: #e2e2e2;
             -webkit-transform: scale(0.5, 1);
             transform: scale(0.5, 1);
         }
         &:last-child:after{
             background-color: rgba(255, 255, 255, 0);
         }
     }
     .m-win_bg {
         background-color: rgba(0, 0, 0, 0.3);
     }

     .v-alert-enter {
       opacity: 0;
       -webkit-transform: translate3d(-50%, -50%, 0) scale(0.7) !important;
       transform: translate3d(-50%, -50%, 0) scale(0.7) !important;
     }

     .v-alert-leave-active {
       opacity: 0;
       -webkit-transform: translate3d(-50%, -50%, 0) scale(0.9) !important;
       transform: translate3d(-50%, -50%, 0) scale(0.9) !important;
     }
}