manyi/static/components/custom/scss/_mui-rest.scss

/****mui reset*****/

.mui-picker-icon {
  height: 36px;
  width: 36px;
  display: inline-block;
  background: center center no-repeat;
  vertical-align: middle;
  background-size: 28px auto;
}

.mui-toast-container {
  bottom: 50%;
  -webkit-transform: translate3d(-50%, -50%, 0);
  transform: translate3d(-50%, -50%, 0);
}

.mui-toast-message {
  word-break: break-all;
}

.input-row {
  position: relative;
  background-color: #fff;
}

.input-row ~ .input-row {
  border-top: 1px solid #e5e5e5;
}

.input-row input,
.input-row textarea,
.input-row button {
  height: 44px;
  margin: 0;
  border: 0;
  border-radius: 4px;
}

.input-row textarea {
  height: auto;
}

.input-row input {
  padding-right: 35px;
}

.input-row.code:after {
  display: table;
  content: '';
  clear: both;
}

.input-row.code input {
  float: left;
  width: 60%;
}

.input-row.code button[type="button"] {
  float: right;
  width: 35%;
  height: 38px;
  margin: 4px 5% 4px 0;
  color: #fff;
  background-color: $default-color;
}

.input-clear .mui-icon {
  position: absolute;
  top: 50%;
  right: 0;
  z-index: 1;
  width: 44px;
  height: 44px;
  color: #999;
  font-size: 20px;
  line-height: 44px;
  text-align: center;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

// 搜索框会自动生成mui-placeholder
.mui-reset .mui-search .mui-placeholder,.mui-reset .mui-search:before {
  color: #8f8f94;
  line-height: 44px;
}

.mui-reset .mui-search .mui-placeholder{
  font-size: 14px;
}

.mui-search .mui-placeholder .mui-icon{
  color: #686868;
}

.mui-reset .mui-search:before {
  line-height: 44px;
  margin-top: 0;
  top: 0;
  color: #8f8f94;
}

.mui-pull-caption {
  font-size: 13px;
  font-weight: normal;
  color: #aaa;
}

.mui-navigate-right:after,
.mui-push-left:after,
.mui-push-right:after {
  top: 50%;
  color: #b2b2b2;
  font-size: 20px;
  font-weight: 600;
  right: 5px;
}

.mui-table-view-cell.mui-collapse.mui-active {
  //默认的-1px是为了防止：变色的展开头和上一个li的线条分离
}

.mui-table-view.split .mui-table-view-cell:after {
  left: 0;
}

.mui-table-view-cell .mui-pull-right {
  color: rgba(0, 0, 0, .4);
  font-size: 14px;
}

.mui-input-group .mui-input-row,
.mui-input-group .mui-input-row input {
  height: 44px;
}

.mui-input-group .mui-input-row.autoheight {
  height: auto;
}

.mui-input-group .mui-input-row label {
  height: 44px;
  padding: 15px;
  padding-right: 0;
}

.mui-input-group.navigate-after .mui-input-row label ~ input,
.mui-input-group.navigate-after .mui-input-row label ~ p {
  width: 65%;
  padding-right: 30px;
  margin-bottom: 0;
}

.mui-input-group .mui-input-row label ~ input {
  float: left;
  height: 44px;
  color: rgba(0, 0, 0, .5);
  font-size: 14px;
}

.mui-input-group .mui-input-row label ~ p {
  float: left;
  width: 65%;
  height: 44px;
  margin-bottom: 0;
  color: rgba(0, 0, 0, .5);
  font-size: 14px;
  line-height: 44px;
  word-break: break-all;
}

.mui-input-group .mui-input-row.code input {
  width: 30%;
}

.mui-input-group .mui-input-row.code button {
  position: absolute;
  top: 50%;
  right: 10px;
  width: 30%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

.mui-input-group .mui-input-row .mui-numbox input {
  height: 100%;
}

.mui-input-row .mui-pull-left {
  float: none;
  padding: 15px;
}

.mui-input-row .mui-pull-left span {
  display: block;
  color: rgba(0, 0, 0, .5);
  font-size: 14px;
}

.mui-input-row .mui-switch {
  position: absolute;
  top: 50%;
  right: 15px;
  margin-top: 0;
  margin-right: 0;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

.mui-table-view.interval .mui-table-view-cell p ~ p,
.mui-input-group.interval .mui-input-row p ~ p {
  margin-top: 6px;
}

.mui-table-view .mui-table-view-cell:last-child:after,
.mui-input-group .mui-input-row:last-child:after {
  height: 0;
}

.mui-input-row .mui-input-clear ~ .mui-icon-clear,
.mui-input-row .mui-input-password ~ .mui-icon-eye,
.mui-input-row .mui-input-speech ~ .mui-icon-speech {
  top: 0;
  right: 0;
  line-height: 44px;
  height: 44px;
}

.mui-numbox {
  width: 140px;
  background-color: #fff;
  border: 1px solid #e5e5e5;
}

.mui-numbox .mui-input-numbox {
  border-left: 1px solid #e5e5e5 !important;
  border-right: 1px solid #e5e5e5 !important;
}

.mui-numbox [class*=btn-numbox],
.mui-numbox .mui-input-numbox {
  background-color: #fff;
}

.mui-bar {
  -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, .3);
  box-shadow: 0 0 1px rgba(0, 0, 0, .3);
}

/*部分mui表单样式定制 **/
.navigate-after .mui-navigate-right:after {
  right: 10px
}

.navigate-after .custom-right {
  margin-right: 1em;
}

.input-group-card {
  margin: 1em;
  border: 1px solid #e5e5e5;
  border-radius: 4px;
}

.input-group-card .input-row:first-child {
  border-radius: 4px 4px 0 0;
}

.input-group-card .input-row:last-child {
  border-radius: 0 0 4px 4px;
}

.input-group-vertical {
  border-top: 1px solid #e5e5e5;
  border-bottom: 1px solid #e5e5e5;
}

.input-group-vertical .input-row input {
  border-radius: 0;
}

.input-group-vertical .input-clear.code .mui-icon {
  right: 50%;
}


/*picker & datepick*/
.mui-poppicker-header .mui-btn,
.mui-dtpicker-header .mui-btn {
  font-size: 12pt !important;
  border: 0 !important;
  background-color: transparent !important;
}

.mui-poppicker-btn-cancel,
.mui-dtpicker-header button[data-id='btn-cancel'] {
  color: #85868a;
}

/*radio*/
.mui-radio input[type=radio]:checked:before {
  content: '\e442';
}

/*alert*/
.mui-popup {
  border-radius: 4px;
}

.mui-popup-inner {
  border-radius: 4px 4px 0 0;
}

.mui-popup-button:first-child {
  border-radius: 0 0 0 4px;
}

.mui-popup-button:first-child:last-child {
  border-radius: 0 0 4px 4px;
}

.mui-popup-button:last-child {
  border-radius: 0 0 4px;
}

.mui-popup-button.mui-popup-button-bold {
  font-weight: normal;
}

// 营销活动用到的
.mui-card-content, .mui-card-footer {
  background: rgba(255, 255, 255, 1);
}