jimu-mobile/src/styles/examp-page.less

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

@import "jimu-base.less";

html, body {
  font-size: 62.5%;
}
.icon-search:before {
  color: #7e8c8d;
}
.de-mr-5{margin-right: 5px;}
.de-pb-5{padding-bottom: 5px; }
.de-mr-10{margin-right: 10px;}
.de-mr-20{margin-right: 10px;}
.di-inblok{display: inline-block;}
.de-mt-20{margin-top: 20px;}
.de-padd-20{padding: 20px}
.de-mr-30{margin-right: 30px;}
.dis-inline{display: inline;}
.de-m-20{margin: 20px;}
.de-m-10{margin: 10px;}
.de-ml-15{margin: 15px;}
.de-m-0-15{margin:0 15px;}
.de-mb-10{margin-bottom: 10px;}
.de-mt-10{margin-top: 10px;}
.de-mt-20{margin-top: 20px;}
.ml-20{margin-left: 20px;}
.de-padd-40-20{padding: 40px 20px;}
.valingbtm{vertical-align: bottom;}
/*#rootContent{}*/
.examp-page{
  .icon-col-gt{position: absolute;width: 14px;height: 0px;right:19px;top:50%;-webkit-transform:rotate(0deg) translate(0,-50%);transform:rotate(0deg) translate(0,-50%); -webkit-transition:all .5s ease 0s;transition:all .5s ease 0s;}
  .icon-col-gt:after,
  .icon-col-gt:before{content:"";position: absolute;top:50%;left:50%;border-bottom:7px solid #CCC;border-left: 7px solid transparent;border-right: 7px solid transparent;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%); }
  .icon-col-gt:after{border-bottom-color :#fff;margin-top: 1px }
  .page-title{
    text-align: center;
    padding:38px 0 20px 0;
    h1{font-size: 2.4rem;font-family: PingFangSC-Regular;color: #333;margin-bottom: 8px;}
    h2{font-family: PingFangSC-Regular;font-size: 1.4rem;color: #999;line-height: 20px;}
  }
  .component-wrap{
    margin: 0 15px;padding-bottom:50px ;
    .component-layout{margin-top: 10px;background: #fff;box-shadow: 0 2px 4px 0 rgba(0,0,0,0.06);border-radius: 2px;overflow: hidden; -webkit-transition:all .5s ease 0s;transition:all .5s ease 0s;max-height: 10000px;}
  }
  .component-title{padding-left: 20px;
    h2{line-height: 22px;padding: 19px 0;font-size: 1.6rem;color: #333;position: relative;
      span{font-size: 1.4rem;color: #999;margin-left: 10px;}
    }
    h2:after{content: "";position: absolute;bottom:0;right:0;background:#E5E5E5;.border-lat;bottom:-1px;}
  }
  .component-items{
    li a{
      position: relative;padding: 15px 0 15px 25px;display: block;
      b{font-size: 1.4rem;color: #666;}
      span{font-size: 1.2rem;color: #999;margin-left: 10px;}
    }
    li a:after{content: "";position: absolute;bottom:0;right:0;background:#E5E5E5;.border-lat;left:20px;}
    li:last-child a:after{display: none;}
    li a:active{background: #fafafa;
      .icon-col-gt:after{border-bottom-color: #fafafa;}
    }
    .icon-col-gt{-webkit-transform:translate(0,-50%) rotate(90deg);transform:translate(0,-50%) rotate(90deg);}
  }
}
.examp-page,.example-wrap{background: #f0f0f0;}
.example-wrap{
  .example-back{padding: 20px 0 0 0 ;margin:0 15px;
    .icon-pic-home{display: block;width: 16px;height: 18px;background: url(../../example/image/icon-home.png);background-size: cover;}
  }
  .libs-intr{
    .page-title{text-align: center;padding: 4px 0 20px 0;
      b{display: block;font-size: 18px;color: #333;line-height: 25px;margin-bottom: 3px;}
      span{display: block;font-size: 14px;color: #999;line-height: 20px;}
    }
    .demo-show{
      dl.dl-list{
        dt{font-size: 1.3rem;color: #999;line-height: 15px;margin-top: 20px;}
        dd{
          margin-top: 10px;font-size: 1.2rem;
          .example-dd-title{display: inline-block;width: 40px;font-size: 1.4rem;color: #999;vertical-align: middle;line-height: 28px;}
          .ui-switch{vertical-align: middle;}
        }
        dt:first-child{margin-top: 0;}
      }
    }
    .slider-layout{
      .demo-title{margin-bottom: 20px;}
      dl.dl-list {
        dt{margin-top: 20px;color: #999;}
        dd{margin-top: 5px;}
      }
    }
  }
  .footer-name{
    text-align: center;padding:20px 0;
    .footer-name-pic{
      display: inline-block;width: 81px;height: 14px;background: url(../../example/image/foot-name.png);background-size: cover;
    }
  }
  select{
    border: 1px solid #eee;background: #fff;padding:3px 5px;position: relative;
  }
  .demo-title{font-size: 13px;color: #999;line-height: 15px;}
  .page-title,.demo-show{margin:0 15px; }
  .mt-40{margin-top: 40px;}
}

/* webapp */
.demo-content{
  .demo-title{margin:0 10px;font-size: 1.2rem;color: #999;padding: 6px 0}
  .demo-component-show{padding: 20px;}
  .component-bg-white{background: #fff}
  .demo-component-nppadd{padding:0;}
}

.demo-btn-type{
  background: #FFFFFF;
  box-shadow: 0 1px 6px 0 rgba(0,0,0,0.15);
  border-radius: 2px;
  border:none;
  color: #343C5C;
}
.demo-btn-type.active, .demo-btn-type:active, .demo-btn-type:focus{border: none}

.demo-show-nopadd{
  .dl-list{
    dt{margin-bottom: 5px;font-size: 1.2rem;color: #999;margin-left: 10px;}
  }
}
.dl-list dt{font-size: 1.2rem;color: #999;}

.de-padd-40-20 {
  .dl-list{
    dd {margin-bottom: 20px;}
    dd:last-child{margin-bottom: 0px;}
  }
}

.ring-demo-show{
  dl{
    dt{margin: 20px 10px 10px 10px;font-size: 1.2rem;color: #999;}
    dd{text-align: center;padding: 40px 0;background: #fff;}
  }
}


/*  滚动加载 (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;-webkit-transform: scaleY(.5);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;-webkit-transform: translate(-50%,-50%);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%}
}

.example-search-box {
  padding: 16px 14px;
  margin: 10px 0;
  background: #fff;
}