wcui/src/css/elem-ui.scss

@charset "UTF-8";
/**
 * 
 * @authors yutent (yutent@doui.cc)
 * @date    2017-05-20 21:35:30
 * @version $Id$
 */

@import "var.scss";


/*--------各种按钮---------*/
.do-ui-button {display:inline-block;height:16px;padding:2px 5px;line-height:12px;border:1px solid #ddd;border-radius:3px;text-align:center;font-size:12px;background:none;cursor:pointer;@include ts;

  &.medium {min-width:100px;height:35px;padding:0 8px;line-height:35px;border-radius:5px;font-size:15px}
  &.large {min-width:150px;height:50px;padding:0 13px;line-height:50px;border-radius:5px;font-size:18px;}

  
  &.teal {border:0;background:nth($ct, 2);color:#fff;}
  &.teal:hover {background:nth($ct, 1);}
  &.teal:active {background:nth($ct, 3);}
  &.green {border:0;background:nth($cg, 2);color:#fff;}
  &.green:hover {background:nth($cg, 1);}
  &.green:active {background:nth($cg, 3);}
  &.blue {border:0;background:nth($cb, 2);color:#fff;}
  &.blue:hover {background:nth($cb, 1);}
  &.blue:active {background:nth($cb, 3);}
  &.purple {border:0;background:nth($cpp, 2);color:#fff;}
  &.purple:hover {background:nth($cpp, 1);}
  &.purple:active {background:nth($cpp, 3);}
  &.red {border:0;background:nth($cr, 2);color:#fff;}
  &.red:hover {background:nth($cr, 1);}
  &.red:active {background:nth($cr, 3);}
  &.orange {border:0;background:nth($co, 2);color:#fff;}
  &.orange:hover {background:nth($co, 1);}
  &.orange:active {background:nth($co, 3);}
  &.plain {border:0;background:nth($cp, 2);color:nth($cgr, 1);}
  &.plain:hover {background:nth($cp, 1);}
  &.plain:active {background:nth($cp, 3);}
  &.grey {border:0;background:nth($cgr, 2);color:#fff;}
  &.grey:hover {background:nth($cgr, 1);}
  &.grey:active {background:nth($cgr, 3);}
  &.dark {border:0;background:nth($cd, 2);color:#fff;}
  &.dark:hover {background:nth($cd, 1);}
  &.dark:active {background:nth($cd, 3);}

  &.disabled {border-color:nth($cp, 1);color:nth($cp, 3);cursor:not-allowed;}
  
}




/*--------各种input---------*/


.do-ui-input {width:auto;height:35px;padding:0 5px;background:nth($cp, 1);border:2px solid transparent;border-radius:5px;font-size:14px;@include ts();color: nth($cd, 2);

  &:focus {background:#fff;border-color:nth($cd, 2);}
    
  &::-webkit-input-placeholder {color:nth($cp, 3);}
  &:disabled {border-color:transparent;background:#fff8ed;color:nth($cgr, 1);cursor:not-allowed;}

}

.do-ui-textarea {width:auto;height:120px;padding:5px 8px;background:nth($cp, 1);border:2px solid transparent;border-radius:5px;font-size:14px;@include ts();color: nth($cd, 2);

  &:focus {background:#fff;border-color:nth($cd, 2);}
    
  &:disabled {border-color:transparent;background:#fff8ed;color:nth($cgr, 1);cursor:not-allowed;}
}


/* select框 */
.do-ui-select  {position:relative;width:auto;height:35px;color:nth($cgr, 1);

  select {width:100%;height:100%;padding:5px 13px;line-height:1;background:nth($cp, 1);border-radius:5px;appearance:none;border:2px solid transparent;outline:none;color: nth($cd, 2);font-size:14px;

    &:focus {background:#fff;border-color:nth($cd, 2);}
    &::-ms-expand {display:none;}
    &:disabled {border-color:transparent;background:#fff8ed;color:nth($cp, 3)}
  }
  .trigon {position:absolute;right:10px;top:0;width:15px;height:35px;padding:8px 0;
    i {position:absolute;width:15px;;height:12px;line-height:12px;}
    i:nth-child(2) {top:15px;}
  }
}

/* 单选和复选框 */
.do-ui-radio,
.do-ui-checkbox {display:inline-block;position:relative;width:auto;height:auto;padding:0 5px 0 35px;line-height:35px;color:nth($cd, 1);font-size:14px;

  >input {position:absolute;left:7px;top:7px;width:21px;height:21px;border-radius:50%;border:1px solid nth($cp, 3);appearance:none;

    &:checked {box-shadow:0 0 5px nth($cb, 1);}
    &:checked::after {display:block;width:13px;height:13px;margin:3px;border-radius:50%;background:nth($cgr, 1);content:""}

    &:disabled {background:#fff8ed;box-shadow:none;cursor:not-allowed;}
    &:disabled:checked::after {background:nth($cp, 3);}
  }

  &.disabled {color:nth($cp, 3);cursor:not-allowed;}
}

.do-ui-checkbox {

  >input {border-radius:3px;

    &:checked::after {width:100%;height:100%;margin:0;line-height:19px;font-size:18px;text-align:center;color:nth($cgr, 1);background:none;content:"✓"}

    &:disabled:checked::after {color:nth($cp, 3);background:none;}
  }

}



/* 引用文本 */
.do-ui-quote {display:inline-block;position:relative;min-height:60px;margin:10px 0;padding:15px 10px 5px 50px;border:1px solid nth($cp, 3);border-radius:10px;background:nth($cp, 1);color:nth($cgr, 1);font-size:14px;word-break: break-all;

  i {position:absolute;left:8px;top:0;font-size:30px;line-height:1.5;color:nth($cp, 3);}
}

/* 提醒文本 */
.do-ui-warn,.do-ui-mark {display:inline-block;position:relative;min-height:40px;margin:5px 0;padding:5px 8px 5px 30px;border:1px solid nth($co, 1);border-radius:5px;background:#fffbed;color:nth($co, 3);font-size:14px;word-break: break-all;
    
  p {margin:0!important;}
  i {position:absolute;left:5px;top:2px;font-size:20px;line-height:1.5;}
}
.do-ui-mark {border-color:nth($ct, 2);color:nth($ct, 3);background:#edfbf8;}