wcui/src/js/pager/main.scss

@charset "UTF-8";
/**
 * 
 * @authors yutent (yutent@doui.cc)
 * @date    2017-09-08 20:03:06
 * @version $Id$
 */

@import "var.scss";

.do-pager {height:auto;text-align:center;font-size:14px;color: nth($cgr, 1);

  &.mini {line-height:30px;
    .button,.page {min-width:30px;height:30px}
  }
  &.medium {line-height:35px;
    .button,.page {min-width:35px;height:35px}
  }
  &.large {line-height:40px;
    .button,.page {min-width:40px;height:40px}
  }
    
  .button,.page {display:inline-block;border:0;color: nth($cgr, 1);text-decoration:none;cursor:pointer;vertical-align:top;font-size:14px;font-weight:100;
    
    &.home::after {content:"\e652";font-size:18px;}
    &.prev::after {content:"\e659";font-size:18px;}
    &.next::after {content:"\e658";font-size:18px;}
    &.end::after {content:"\e653";font-size:18px;}
  }

  

  .curr, .disabled {cursor:default;}
  
  &.skin-1 {width:100%;

    .page,
    .button,
    .disabled,
    .curr {padding:0 8px;margin:0 3px;}
    
    .curr {font-weight:bold;font-size:15px;}
    .page.disabled {min-width:0;padding:0;background:none;color:nth($cgr, 1);
      &:hover,&:active {background:none;}
    }
    .page.curr {background:none;color:nth($cgr, 1);
      &:hover,&:active {background:none;}
    }
    .button[disabled] {cursor:not-allowed;}

    .total-box,.input-box {display:inline-block;padding:0 8px;}
    .input-box input {display:inline-block;width:40px;height:30px;padding:0 3px;font-size:14px;background:#fff;border:1px solid #ddd;text-align:center;}
  }

  &.skin-2 {float:right;width:auto;
      
      .page,
      .button,
      .disabled,
      .curr {float:left;margin:0;padding:0 5px;color:#fff;}

      .page.disabled {display:none;}
      .button[disabled] {cursor:not-allowed;}
      
      .input-box {display:none;}
  }

  &.plain {
    .page,.button {background:nth($cp, 1);color:nth($cgr, 1);

      &:hover {background:nth($cp, 2)}
      &:active {background:nth($cp, 3)}
    }
    .button[disabled] {background:nth($cp, 1);}
    &.skin-2 .curr {background:nth($cp, 3)}
  }

  &.grey {
    .page,.button {background:nth($cgr, 1);color: #fff;

      &:hover {background:nth($cgr, 2)}
      &:active {background:nth($cgr, 3)}
    }
    .button[disabled] {background:nth($cgr, 1);}
    &.skin-2 .curr {background:nth($cgr, 3)}
  }

  &.red {
    .page,.button {background:nth($cr, 1);color: #fff;

      &:hover {background:nth($cr, 2)}
      &:active {background:nth($cr, 3)}
    }
    .button[disabled] {background:nth($cr, 1);}
    &.skin-2 .curr {background:nth($cr, 3)}
  }

  &.orange {
    .page,.button {background:nth($co, 1);color: #fff;

      &:hover {background:nth($co, 2)}
      &:active {background:nth($co, 3)}
    }
    .button[disabled] {background:nth($co, 1);}
    &.skin-2 .curr {background:nth($co, 3)}
  }

  &.green {
    .page,.button {background:nth($cg, 1);color: #fff;

      &:hover {background:nth($cg, 2)}
      &:active {background:nth($cg, 3)}
    }
    .button[disabled] {background:nth($cg, 1);}
    &.skin-2 .curr {background:nth($cg, 3)}
  }

  &.teal {
    .page,.button {background:nth($ct, 1);color: #fff;

      &:hover {background:nth($ct, 2)}
      &:active {background:nth($ct, 3)}
    }
    .button[disabled] {background:nth($ct, 1);}
    &.skin-2 .curr {background:nth($ct, 3)}
  }

  &.blue {
    .page,.button {background:nth($cb, 1);color: #fff;

      &:hover {background:nth($cb, 2)}
      &:active {background:nth($cb, 3)}
    }
    .button[disabled] {background:nth($cb, 1);}
    &.skin-2 .curr {background:nth($cb, 3)}
  }

  &.purple,.button {
    .page {background:nth($cpp, 1);color: #fff;

      &:hover {background:nth($cpp, 2)}
      &:active {background:nth($cpp, 3)}
    }
    .button[disabled] {background:nth($cpp, 1);}
    &.skin-2 .curr {background:nth($cpp, 3)}
  }  

}