jimu-mobile/src/styles/jimu-demo.less

积木组件库助力移动端开发

/*  滚动加载 (Infinite Loader)  */
.swipe-List li{line-height: 40px;font-size: 18px;border-bottom: 1px solid #ddd}
.swipe-List{overflow: auto;}
.more-tip{text-align: center;}
/* 新手引导 */
.novice-tip{
  .hd h2.title{font-size: 1.8rem;text-align: center;padding: 10px 0}
  .bd{padding: 0 20px;}
  .bd p{font-size: 1.4rem;margin-top: 15px;line-height: 22px;}
  .ft{padding: 40px 20px 20px 20px}
}
/*  滑动弹层 SwipeMove */
.move-content{
  h2{font-size: 2.0rem;text-align: center;padding: 0px 0 40px 0}
  p{margin-top: 10px;font-size: 1.4rem;text-align: center;}
}
.mt-8{margin-top: 8px}
.pb-20{padding-bottom: 20px}
/* SwipeDelet */
.delet-list{position: relative;}
.jimu-swipe-del:before{position: absolute;content:"";height: 1px;width: 100%;top:0;left:0;z-index:101;position: absolute;height:1px;left:0;right:0;transform: scaleY(.5);-webkit-transform: scaleY(.5);background: #eee;}
.jimu-swipe-del:first-child:before{display: none;}
.jimu-swipe-del:before{left:15px;}
.mt-20{margin-top: 20px;}
.ml-44{margin-left: 44px;}
.mt-10{margin-top: 10px;}
.jimu-item-undel .jimu-item-title,.jimu-item-undel .jimu-item-desc{color: #ccc;}
.pb-20{padding-bottom: 20px;}
.swipe-item{font-size:1.4rem;padding:10px 0;margin-left: 16px;border-bottom: 1px solid #ccc;}
.swipe-tabs{border-bottom: 1px solid #ccc;text-align: center; position: relative;}
.swipe-tabs li{display: inline-block;background: #f1f1f1;margin: 0 2px;padding: 6px 10px 5px 10px;margin-bottom: -1px;border-left:1px solid #ccc; border-right:1px solid #ccc;border-top:2px solid #ccc; border-bottom: 1px solid #ccc;font-size: 1.2rem }
.swipe-tabs li.cur{border-top-color: #0097ee;background: #fff;border-bottom-color: #fff;font-size: 1.4rem;}
/* focus */
.focus-demo{
  .focus-demo-item{
    line-height: 130px;height: 150px;font-size: 1.6rem;color: #fff;text-align: center;position: relative;
  }
  .item-linehieght-150{line-height: 150px;}
  .item-1{background: #0097ee}
  .item-2{background: #343C5C}
  .item-3{background: #ccc}
}
/* ContentTip */
.tip-content .content-bd{padding: 50px 0 ;text-align: center;}
/* SwipeItems */
.demo-delet-item{padding: 10px 0 10px 20px;font-size: 1.6rem;font-size: 1.6rem;}
/* picker */
.ly-item-picker{font-size: 1.4rem;line-height: 25px;}
.data-picker-comp{height: 30px;overflow: hidden;}
.fadeInUp-demo{text-align: center;font-size: 1.4rem;padding: 30px 0}
.container{height: 100%;}
.home-page{height: 100%;-webkit-overflow-scrolling : touch;overflow: auto;}
/* anime */
.anime-move-demo,.anime-cont-demo,.anime-move-lag{background: #1E96FA;width: 30px;height: 30px;position: relative;display: inline-block;text-align: center;line-height: 30px;color: #fff;}
.anime-move-demo-alone,.anime-cont-demo-alone{background: #1E96FA;width: 30px;height: 30px;position: relative;display: inline-block;}
.btn-margin{text-align: center;}
.btn-margin button{margin: 0 5px;}
.jimu-demo-postion-test{text-align: center;height: 40px;line-height: 40px;font-size: 1.4rem;background: #333;margin-left: 10px;color: #fff;width: 40px;}
.jimu-move-item:nth-child(1) .jimu-demo-postion-test{background: #1E96FA;}
.jimu-move-item:nth-child(2) .jimu-demo-postion-test{background: #343C5C;}
.jimu-move-item:nth-child(3) .jimu-demo-postion-test{background: #999;}
.jimu-move-item:nth-child(4) .jimu-demo-postion-test{background: #E5E5E5;}
.anime-move-demo,.anime-cont-demo{margin: 2px 0;}
/* star */
.example-components-wrap{margin-top: 20px;}
.start-text{text-align: center;margin:15px 0 40px 0;color: #999;font-size: 1.2rem;}
.start-text:last-child{margin-bottom: 0}
/* badge */
.jimu-mark-box{display: inline-block;background:#ffdcde;vertical-align: middle;position: relative;}
.box-size-18{width: 18px;height: 18px;}
.box-size-60{width: 60px;height: 60px;}
.box-size-50{width: 50px;height: 50px;}
.box-size-40{width: 40px;height: 40px;}
.box-size-32{width: 32px;height: 32px;}
.box-size-24{width: 24px;height: 24px;}
.de-wid-90{width: 90px;}
.de-wid-80{width: 80px;}
.demo-page-badge{
  .layout-lat{margin-bottom: 30px;}
  .layout-lat:last-child{margin-bottom: 0;}
}
/* dialog */
.dialog-dl-list{
  padding-bottom: 20px;
  dd{padding-top:10px }
  dt{color: #999;font-size: 1.2rem}
}

/* NoticeBar */
.jimu-noticebar-layout-shadow{
  .icon-jimu-successful{color: #5ec0a9}
  .icon-jimu-information{color: #ed4630}
  .icon-jimu-error{color: #f28e52}
}

/* Tabs */
.tabs-test-style{text-align: center;line-height: 100px;background: #fff;font-size: 1.4rem;color: #666;}

/* Icon */
.demo-icon-items{
  padding: 20px 0;
  li{
    display: inline-block;width: 25%;text-align: center;font-size: 1.7rem;line-height: 44px;height: 44px;color: #666;
  }
  .on-active p{border-bottom:1px solid #1E96FA;color: #1E96FA }
}
.on-active-iconname{height: 30px;line-height: 30px;font-size: 1.6rem;text-align: center;margin-bottom: 5px;}

/* CheckBox */

/* Grid */
.demo-grid-layout{
  .demo-grid-cell{background: #FFFFFF;border: 1px solid #E5E5E5;height: 50px;}
  .jimu-cell{margin-left: 10px;}
  .jimu-cell:first-child{margin-left: 0px;}
}
.demo-grid-items li{margin-bottom: 10px;}
.demo-grid-items li:last-child{margin-bottom: 0}

/* Button */
.demo-button {
  .didi_btn{
    span{display: inline-block;vertical-align: middle;}
    .icon-pay{margin-right: 5px;font-size: 2rem}
  }
}
/* Popover */
.popover-items{
  text-align: center;font-size: 1.5rem;color: #333;
  .popover-left-more{line-height: 18px;}
}

/* List */
.demo-page-list{
  .jimu-itemaside{color: #999}
}

/* mask */
.mask-show-text{position: absolute;top:50%;left:50%;font-size: 1.4rem;color: #fff;transform: translate(-50%,-50%);-webkit-transform: translate(-50%,-50%);z-index:101;}
/* csstransform */
.csstrans-dl-item{
  dt{margin: 20px 10px 10px 10px;color: #999;}
  dd{padding: 15px; background: #fff;}
}

/* */
.csstrans-highlight{border: 1px solid #343C5C;
border-radius: 2px;font-size: 1.2rem;color: #343C5C;padding: 4px 10px;background: #fff;height: 28px;}

/* city */
.select-type{
  text-align: left;text-indent: 15px;overflow: hidden;
  .city-name{margin-left: 5px; font-size: 1.4rem;}
}

.jimu-noticebar-aside-icon span{font-size: 1.6rem;vertical-align: -2px;}

.upload-pic-show{background: #fff;min-height: 180px;
  img{width: 100%}
}