|
@@ -0,0 +1,657 @@
|
|
|
|
+/*customer theme for vm-manager*/
|
|
|
|
+@vm-grey: #99a9c0;
|
|
|
|
+@vm-grey-light: #f4f4f4;
|
|
|
|
+@vm-spacing-base: 15px;
|
|
|
|
+
|
|
|
|
+@border-split: 1px solid #e9eaec;
|
|
|
|
+@border-out: 1px solid #dddee1;
|
|
|
|
+
|
|
|
|
+.vm-panel{
|
|
|
|
+ background-color: white;
|
|
|
|
+ text-align: left;
|
|
|
|
+ border-radius: 4px;
|
|
|
|
+ .panel-heading{
|
|
|
|
+ text-align: left;
|
|
|
|
+ width: 100%;
|
|
|
|
+ border-radius: 4px 4px 0 0;
|
|
|
|
+ border-bottom: @border-split;
|
|
|
|
+ padding:@vm-spacing-base;
|
|
|
|
+ font-weight: bold;
|
|
|
|
+ }
|
|
|
|
+ .panel-body{
|
|
|
|
+ padding: @vm-spacing-base;
|
|
|
|
+ font-size: 14px;
|
|
|
|
+ }
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.vm-msg-push{
|
|
|
|
+ ul{
|
|
|
|
+ overflow: hidden;
|
|
|
|
+ li{
|
|
|
|
+ &:first-child{
|
|
|
|
+ color: white;
|
|
|
|
+ font-size: 16px;
|
|
|
|
+ font-weight: bold;
|
|
|
|
+ background: #2d8cf0;
|
|
|
|
+ border-radius: 4px 4px 0 0;
|
|
|
|
+ }
|
|
|
|
+ img{
|
|
|
|
+ vertical-align: top;
|
|
|
|
+ border-radius: 4px;
|
|
|
|
+ margin-right: 5px;
|
|
|
|
+ }
|
|
|
|
+ text-align: left;
|
|
|
|
+ .subject{
|
|
|
|
+ width: 200px;
|
|
|
|
+ display: inline-block;
|
|
|
|
+ .title{
|
|
|
|
+ line-height: 18px;
|
|
|
|
+ font-size: 16px;
|
|
|
|
+ font-weight: bold;
|
|
|
|
+ .time{
|
|
|
|
+ float: right;
|
|
|
|
+ font-size: 14px;
|
|
|
|
+ color: @vm-grey;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ .message{
|
|
|
|
+ margin-top: 6px;
|
|
|
|
+ overflow: hidden;
|
|
|
|
+ text-overflow:ellipsis;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ .vm-badge{
|
|
|
|
+ border: 1px solid #dddee1;
|
|
|
|
+ width: 24px;
|
|
|
|
+ height: 24px;
|
|
|
|
+ line-height: 24px;
|
|
|
|
+ border-radius: 4px;
|
|
|
|
+ cursor: pointer;
|
|
|
|
+ }
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.vm-state-overview{
|
|
|
|
+ background-color: white;
|
|
|
|
+ border-radius: 4px;
|
|
|
|
+ min-height: 100px;
|
|
|
|
+ overflow: hidden;
|
|
|
|
+ .symbol{
|
|
|
|
+ color: white;
|
|
|
|
+ font-size: 45px;
|
|
|
|
+ background-color: #2d8cf0;
|
|
|
|
+ display: flex;
|
|
|
|
+ align-items: center;
|
|
|
|
+ justify-content: center;
|
|
|
|
+ }
|
|
|
|
+ .value{
|
|
|
|
+ color: @vm-grey;
|
|
|
|
+ display: flex;
|
|
|
|
+ flex-direction: column;
|
|
|
|
+ justify-content: center;
|
|
|
|
+ }
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.vm-user-preview{
|
|
|
|
+ overflow: hidden;
|
|
|
|
+ .panel-heading{
|
|
|
|
+ display: flex;
|
|
|
|
+ img{
|
|
|
|
+ margin-right: @vm-spacing-base;
|
|
|
|
+ }
|
|
|
|
+ .title{
|
|
|
|
+ display: flex;
|
|
|
|
+ flex-direction: column;
|
|
|
|
+ justify-content: center;
|
|
|
|
+ .name{
|
|
|
|
+ color: #2d8cf0;
|
|
|
|
+ font-size: 18px;
|
|
|
|
+ }
|
|
|
|
+ .role{
|
|
|
|
+ color: @vm-grey;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ ul.content{
|
|
|
|
+ font-size: 12px;
|
|
|
|
+ li{
|
|
|
|
+ display: flex;
|
|
|
|
+ border-bottom: @border-split;
|
|
|
|
+ i{
|
|
|
|
+ color: @vm-grey;
|
|
|
|
+ font-size: 16px;
|
|
|
|
+ width: 10px;
|
|
|
|
+ }
|
|
|
|
+ padding: 0 @vm-spacing-base;
|
|
|
|
+ height: 45px;
|
|
|
|
+ line-height: 45px;
|
|
|
|
+ span{
|
|
|
|
+ flex-grow: 1;
|
|
|
|
+ }
|
|
|
|
+ span:first-child{
|
|
|
|
+ width: 20%;
|
|
|
|
+ }
|
|
|
|
+ span:nth-child(2){
|
|
|
|
+ width: 40%;
|
|
|
|
+ }
|
|
|
|
+ span:last-child{
|
|
|
|
+ text-align: right;
|
|
|
|
+ width: 40%;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ li:last-child{
|
|
|
|
+ border-bottom: 1px solid transparent;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.vm-progress{
|
|
|
|
+ .panel-heading{
|
|
|
|
+ height: 80px;
|
|
|
|
+ color: #2d8cf0;
|
|
|
|
+ font-size: 16px;
|
|
|
|
+ }
|
|
|
|
+ table{
|
|
|
|
+ tr{
|
|
|
|
+ td{
|
|
|
|
+ padding: 0 15px;
|
|
|
|
+ font-size: 14px;
|
|
|
|
+ }
|
|
|
|
+ td:nth-child(2){
|
|
|
|
+ width: 15%;
|
|
|
|
+ }
|
|
|
|
+ td:last-child{
|
|
|
|
+ width: 40%;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.vm-timeline{
|
|
|
|
+ font-size: 14px;
|
|
|
|
+ .panel-heading{
|
|
|
|
+ color: #2d8cf0;
|
|
|
|
+ font-size: 16px;
|
|
|
|
+ }
|
|
|
|
+ ul.panel-body{
|
|
|
|
+ li{
|
|
|
|
+ .left, .right{
|
|
|
|
+ flex-grow: 1;
|
|
|
|
+ width: calc(50% - 1px);
|
|
|
|
+ padding-bottom: 15px;
|
|
|
|
+ }
|
|
|
|
+ .left{
|
|
|
|
+ text-align: right;
|
|
|
|
+ padding-right: 30px;
|
|
|
|
+ }
|
|
|
|
+ .right{
|
|
|
|
+ text-align: left;
|
|
|
|
+ padding-left: 30px;
|
|
|
|
+ }
|
|
|
|
+ .content{
|
|
|
|
+ background-color: @vm-grey-light;
|
|
|
|
+ border-radius: 4px;
|
|
|
|
+ }
|
|
|
|
+ .split{
|
|
|
|
+ width: 2px;
|
|
|
|
+ background-color: #dddee1;
|
|
|
|
+ height: inherit;
|
|
|
|
+ .dot-left, .dot-right{
|
|
|
|
+ display: inline-block;
|
|
|
|
+ position: relative;
|
|
|
|
+ width: 12px;
|
|
|
|
+ height: 12px;
|
|
|
|
+ color: #2d8cf0;
|
|
|
|
+ background-color: #2d8cf0;
|
|
|
|
+ border-radius: 50%;
|
|
|
|
+ margin: 20px 0 0 -5px;
|
|
|
|
+ }
|
|
|
|
+ .dot-left:before, .dot-right:before{
|
|
|
|
+ content: '';
|
|
|
|
+ border: 6px solid transparent;
|
|
|
|
+ position: absolute;
|
|
|
|
+ }
|
|
|
|
+ .dot-left:before{
|
|
|
|
+ border-left-color: inherit;
|
|
|
|
+ left: 8px;
|
|
|
|
+ }
|
|
|
|
+ .dot-right:before{
|
|
|
|
+ border-right-color: inherit;
|
|
|
|
+ right: 8px;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.vm-tabs{
|
|
|
|
+ .heading{
|
|
|
|
+ height: 55px;
|
|
|
|
+ border-radius: 4px 4px 0 0;
|
|
|
|
+ background-color: #2d8cf0;
|
|
|
|
+ line-height: 55px;
|
|
|
|
+ font-size: 16px;
|
|
|
|
+ color: white;
|
|
|
|
+ .icon{
|
|
|
|
+ display: inline-block;
|
|
|
|
+ text-align: center;
|
|
|
|
+ font-size: 18px;
|
|
|
|
+ width: 55px;
|
|
|
|
+ background: rgba(0,0,0,0.1);
|
|
|
|
+ }
|
|
|
|
+ .title{
|
|
|
|
+ margin-left: 10px;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ .body{
|
|
|
|
+ position: relative;
|
|
|
|
+ overflow: hidden;
|
|
|
|
+ padding: @vm-spacing-base;
|
|
|
|
+ &>ul{
|
|
|
|
+ position: relative;
|
|
|
|
+ height: inherit;
|
|
|
|
+ &>li{
|
|
|
|
+ display: inline-block;
|
|
|
|
+ position: absolute;
|
|
|
|
+ width: 100%;
|
|
|
|
+ height: 100%;
|
|
|
|
+ background: white;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ .footer{
|
|
|
|
+ min-height: 60px;
|
|
|
|
+ line-height: 60px;
|
|
|
|
+ ul{
|
|
|
|
+ display: flex;
|
|
|
|
+ border-top: @border-split;
|
|
|
|
+ justify-content: space-around;
|
|
|
|
+ li{
|
|
|
|
+ text-align: center;
|
|
|
|
+ cursor: pointer;
|
|
|
|
+ }
|
|
|
|
+ li.active{
|
|
|
|
+ color: #2d8cf0;
|
|
|
|
+ font-weight: bold;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.vm-weather{
|
|
|
|
+ .top{
|
|
|
|
+ color: white;
|
|
|
|
+ border-radius: 4px 4px 0 0;
|
|
|
|
+ background-color: #2db7f5;
|
|
|
|
+ text-align: center;
|
|
|
|
+ height: 130px;
|
|
|
|
+ i{
|
|
|
|
+ font-size: 60px;
|
|
|
|
+ }
|
|
|
|
+ .temprature{
|
|
|
|
+ font-size: 60px;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ .bottom{
|
|
|
|
+ height: 73px;
|
|
|
|
+ font-size: 14px;
|
|
|
|
+ &>div{
|
|
|
|
+ display: flex;
|
|
|
|
+ flex-direction: column;
|
|
|
|
+ justify-content: center;
|
|
|
|
+ align-items: center;
|
|
|
|
+ span{
|
|
|
|
+ color: @vm-grey;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.vm-table{
|
|
|
|
+ .control{
|
|
|
|
+ position: relative;
|
|
|
|
+ margin-top: -@vm-spacing-base;
|
|
|
|
+ margin-bottom: @vm-spacing-base;
|
|
|
|
+ .table-style{
|
|
|
|
+ display: flex;
|
|
|
|
+ align-items: center;
|
|
|
|
+ }
|
|
|
|
+ &>div{
|
|
|
|
+ margin-top: @vm-spacing-base;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ .edit{
|
|
|
|
+ position: relative;
|
|
|
|
+ margin-bottom: @vm-spacing-base;
|
|
|
|
+ padding-top: @vm-spacing-base;
|
|
|
|
+ border-top: 1px dashed #e9eaec;
|
|
|
|
+ }
|
|
|
|
+ .footer{
|
|
|
|
+ margin-top: @vm-spacing-base;
|
|
|
|
+ .info-bar{
|
|
|
|
+ .input-number{
|
|
|
|
+ width: 60px;
|
|
|
|
+ margin: 0 10px;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ .page{
|
|
|
|
+ display: flex;
|
|
|
|
+ align-items: center;
|
|
|
|
+ .total{
|
|
|
|
+ margin-right: 15px;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.vm-state-group{
|
|
|
|
+ text-align: center;
|
|
|
|
+ padding: 15px;
|
|
|
|
+ .item{
|
|
|
|
+ float: left;
|
|
|
|
+ border-right: @border-split;
|
|
|
|
+ &:last-child{
|
|
|
|
+ border-right: none;
|
|
|
|
+ }
|
|
|
|
+ .icon{
|
|
|
|
+ font-size: 24px;
|
|
|
|
+ }
|
|
|
|
+ p{
|
|
|
|
+ font-size: 14px;
|
|
|
|
+ color: @vm-grey;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+}
|
|
|
|
+.vm-message-carousel{
|
|
|
|
+ .item{
|
|
|
|
+ padding: @vm-spacing-base;
|
|
|
|
+ .main{
|
|
|
|
+ padding: @vm-spacing-base;
|
|
|
|
+ position: relative;
|
|
|
|
+ &:before, &:after{
|
|
|
|
+ content: "\"";
|
|
|
|
+ position: absolute;
|
|
|
|
+ font-size: 28px;
|
|
|
|
+ font-weight: bold;
|
|
|
|
+ color: #2d8cf0;
|
|
|
|
+ }
|
|
|
|
+ &:before{
|
|
|
|
+ top: 0;
|
|
|
|
+ left: 0;
|
|
|
|
+ }
|
|
|
|
+ &:after{
|
|
|
|
+ bottom: 0;
|
|
|
|
+ right: 15px;
|
|
|
|
+ }
|
|
|
|
+ .title{
|
|
|
|
+ font-size: 16px;
|
|
|
|
+ font-weight: bold;
|
|
|
|
+ }
|
|
|
|
+ .content{
|
|
|
|
+ font-size: 16px;
|
|
|
|
+ margin: @vm-spacing-base 0;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ .from{
|
|
|
|
+ margin: 0 @vm-spacing-base;
|
|
|
|
+ img{
|
|
|
|
+ border-radius: 50%;
|
|
|
|
+ vertical-align: middle;
|
|
|
|
+ height: 40px;
|
|
|
|
+ margin-right: @vm-spacing-base;
|
|
|
|
+ }
|
|
|
|
+ .name{
|
|
|
|
+ font-size: 16px;
|
|
|
|
+ font-weight: bold;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.vm-card-vertical{
|
|
|
|
+ .card-img{
|
|
|
|
+ position: relative;
|
|
|
|
+ text-align: center;
|
|
|
|
+ img{
|
|
|
|
+ //display: block;
|
|
|
|
+ //width: 100%
|
|
|
|
+ display:inline-block;
|
|
|
|
+ }
|
|
|
|
+ .control{
|
|
|
|
+ position: absolute;
|
|
|
|
+ bottom: -20px;
|
|
|
|
+ right: 15px;
|
|
|
|
+ display: flex;
|
|
|
|
+ span{
|
|
|
|
+ display: flex;
|
|
|
|
+ justify-content: center;
|
|
|
|
+ margin-left: 10px;
|
|
|
|
+ align-items: center;
|
|
|
|
+ color: white;
|
|
|
|
+ font-size: 18px;
|
|
|
|
+ background-color: #2d8cf0;
|
|
|
|
+ width: 40px;
|
|
|
|
+ height: 40px;
|
|
|
|
+ border-radius: 50%;
|
|
|
|
+ cursor: pointer;
|
|
|
|
+ }
|
|
|
|
+ span.edit{
|
|
|
|
+ background-color: #2db7f5;
|
|
|
|
+ a{
|
|
|
|
+ color: white;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ span.delete{
|
|
|
|
+ background-color: #2d8cf0;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ .card-desc{
|
|
|
|
+ p{
|
|
|
|
+ font-size: 14px;
|
|
|
|
+ margin: 10px 0;
|
|
|
|
+ text-align: justify;
|
|
|
|
+ height: 84px;
|
|
|
|
+ overflow: hidden;
|
|
|
|
+ text-overflow: ellipsis;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.vm-card-horizantal{
|
|
|
|
+ overflow: hidden;
|
|
|
|
+ position: relative;
|
|
|
|
+ display: flex;
|
|
|
|
+ padding: 0;
|
|
|
|
+ .card-img{
|
|
|
|
+ display: flex;
|
|
|
|
+ align-items: center;
|
|
|
|
+ //width: 50%;
|
|
|
|
+ img{
|
|
|
|
+ //display: block;
|
|
|
|
+ margin: 0;
|
|
|
|
+ //width: 100%;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ .card-desc{
|
|
|
|
+ width: 50%;
|
|
|
|
+ p{
|
|
|
|
+ font-size: 14px;
|
|
|
|
+ margin: 10px 0;
|
|
|
|
+ text-align: justify;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.vm-circle{
|
|
|
|
+ padding: @vm-spacing-base;
|
|
|
|
+ &>div{
|
|
|
|
+ height: 100%;
|
|
|
|
+ display: flex;
|
|
|
|
+ justify-content: center;
|
|
|
|
+ align-items: center;
|
|
|
|
+ }
|
|
|
|
+ .title{
|
|
|
|
+ margin-bottom: 5px;
|
|
|
|
+ }
|
|
|
|
+ p{
|
|
|
|
+ font-size: 14px;
|
|
|
|
+ }
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.vm-login{
|
|
|
|
+ width: 900px;
|
|
|
|
+ height: 400px;
|
|
|
|
+ &>div{
|
|
|
|
+ padding: 30px;
|
|
|
|
+ }
|
|
|
|
+ .login-form{
|
|
|
|
+ display: flex;
|
|
|
|
+ flex-direction: column;
|
|
|
|
+ justify-content: center;
|
|
|
|
+ .login-header{
|
|
|
|
+ text-align: center;
|
|
|
|
+ font-size: 16px;
|
|
|
|
+ font-weight: bold;
|
|
|
|
+ margin-bottom: 20px;
|
|
|
|
+ span{
|
|
|
|
+ color: #2d8cf0;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ .login-form{
|
|
|
|
+ input{
|
|
|
|
+ margin-bottom: 20px;
|
|
|
|
+ width: 100%;
|
|
|
|
+ height: 45px;
|
|
|
|
+ }
|
|
|
|
+ button{
|
|
|
|
+ height: 45px;
|
|
|
|
+ width: 100%;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ .login-footer{
|
|
|
|
+ margin-top: 10px;
|
|
|
|
+ span.forget{
|
|
|
|
+ float: right;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ .login-ad{
|
|
|
|
+ height: 100%;
|
|
|
|
+ font-weight: bold;
|
|
|
|
+ font-size: 14px;
|
|
|
|
+ border-radius: 0 4px 4px 0;
|
|
|
|
+ background: url("../assets/img/login-bg.jpg");
|
|
|
|
+ .photo-author{
|
|
|
|
+ position: absolute;
|
|
|
|
+ right: 6px;
|
|
|
|
+ bottom: 45px;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.vm-lock-screen{
|
|
|
|
+ width: 600px;
|
|
|
|
+ height: 450px;
|
|
|
|
+ display: flex;
|
|
|
|
+ flex-direction: column;
|
|
|
|
+ justify-content: center;
|
|
|
|
+ align-items: center;
|
|
|
|
+ .company{
|
|
|
|
+ font-size: 16px;
|
|
|
|
+ font-weight: bold;
|
|
|
|
+ img{
|
|
|
|
+ vertical-align: middle;
|
|
|
|
+ }
|
|
|
|
+ span{
|
|
|
|
+ color: #2d8cf0;
|
|
|
|
+ }
|
|
|
|
+ margin-bottom: 50px;
|
|
|
|
+ }
|
|
|
|
+ .user{
|
|
|
|
+ margin-bottom: 50px;
|
|
|
|
+ p.name{
|
|
|
|
+ text-align: center;
|
|
|
|
+ font-size: 14px;
|
|
|
|
+ line-height: 20px;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ input{
|
|
|
|
+ margin-bottom: 10px;
|
|
|
|
+ }
|
|
|
|
+ button{
|
|
|
|
+ width: 300px;
|
|
|
|
+ }
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.vm-image-list{
|
|
|
|
+ .image-list-heading{
|
|
|
|
+ .page{
|
|
|
|
+ span{
|
|
|
|
+ margin-right: 10px;
|
|
|
|
+ }
|
|
|
|
+ span.margin-end{
|
|
|
|
+ margin-right: 20px;
|
|
|
|
+ }
|
|
|
|
+ .input-number{
|
|
|
|
+ width: 40px;
|
|
|
|
+ margin-right: 10px;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ .panel-body{
|
|
|
|
+ margin-top: -@vm-spacing-base;
|
|
|
|
+ &>div{
|
|
|
|
+ margin-top: @vm-spacing-base;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ .total{
|
|
|
|
+ margin-right: 15px;
|
|
|
|
+ }
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.vm-loading{
|
|
|
|
+ .rect{
|
|
|
|
+ width: 8px;
|
|
|
|
+ height: 36px;
|
|
|
|
+ background-color: #2d8cf0;
|
|
|
|
+ float: left;
|
|
|
|
+ margin: 3px;
|
|
|
|
+ animation: animate 1s infinite;
|
|
|
|
+ &:nth-child(2){
|
|
|
|
+ animation-delay: 0.1s
|
|
|
|
+ }
|
|
|
|
+ &:nth-child(3){
|
|
|
|
+ animation-delay: 0.2s
|
|
|
|
+ }
|
|
|
|
+ &:nth-child(4){
|
|
|
|
+ animation-delay: 0.3s
|
|
|
|
+ }
|
|
|
|
+ &:nth-child(5){
|
|
|
|
+ animation-delay: 0.4s
|
|
|
|
+ }
|
|
|
|
+ &:nth-child(6){
|
|
|
|
+ animation-delay: 0.5s
|
|
|
|
+ }
|
|
|
|
+ &:nth-child(7){
|
|
|
|
+ animation-delay: 0.6s
|
|
|
|
+ }
|
|
|
|
+ &:nth-child(8){
|
|
|
|
+ animation-delay: 0.7s
|
|
|
|
+ }
|
|
|
|
+ &:nth-child(9){
|
|
|
|
+ animation-delay: 0.8s
|
|
|
|
+ }
|
|
|
|
+ &:nth-child(10){
|
|
|
|
+ animation-delay: 0.9s
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+}
|
|
|
|
+@keyframes animate{
|
|
|
|
+ 50%{
|
|
|
|
+ transform: scaleY(0)
|
|
|
|
+ }
|
|
|
|
+}
|