@import "../core/minxin-variables";
@import "../core/minxin-mixins";

//默认 flat 样式.
.u-button {
  background: transparent;
  border: none;
  border-radius: $button-border-radius;
  color: $button-secondary-color;
  position: relative;
  // height: $button-height;
  min-width: $button-min-width;
  padding: $button-padding;
  padding: $button-padding-IE8 \9;
  display: inline-block;
  @include typo-button();
  overflow: hidden;
  will-change: box-shadow, transform;
  transition: box-shadow 0.2s $animation-curve-fast-out-linear-in,
  background-color 0.2s $animation-curve-default,
  color 0.2s $animation-curve-default;
  outline: none;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  line-height: $button-line-height;
  vertical-align: middle;
  font-family:$preferred_font;
  &::-moz-focus-inner {
    border: 0;
  }

  &:hover {
    background-color: $button-hover-color;
  }

  &:focus:not(:active) {
    background-color: $button-focus-color;
  }

  &:active {
    background-color: $button-active-color;
  }

  &.colored {
    color: $button-primary-color-alt;

    &:focus:not(:active) {
      background-color: $button-focus-color-alt;
    }
  }
  &.disable{
    webkit-box-shadow: none;
    filter: alpha(opacity=65);
    box-shadow: none;
    cursor: not-allowed;
    opacity: .65;
  }
}

input.u-button[type="submit"] {
  -webkit-appearance:none;
}

// Raised buttons
// 目前没有使用waves-effect先注释掉
// .u-button.waves-effect{

//   border:1px $button-border-color solid;
//   font-size: 13px;
//   background: $button-primary-color;
//   background: $button-primary-color-IE8 \9;
//   // @include shadow-2dp();

//   &:active {
//     @include shadow-4dp();
//     background-color: $button-active-color;
//   }

//   &:focus:not(:active) {
//     @include focus-shadow();
//     background-color: $button-active-color;
//   }

//   &.colored {
//     background: $button-primary-color-alt;
//     color: $button-secondary-color-alt;

//     &:hover {
//       background-color: $button-hover-color-alt;
//     }

//     &:active {
//       background-color: $button-active-color-alt;
//     }

//     &:focus:not(:active) {
//       background-color: $button-active-color-alt;
//     }

//     background: $button-ripple-color-alt;
//   }

//   &.u-button-xg{
//     font-size : $font-size-xg;
//   }

//   &.u-button-lg{
//     font-size : $font-size-lg;
//   }

//   &.u-button-sm{
//     font-size : $font-size-sm;
//   }
// }

//Floating bottons
.u-button-floating,.u-button.floating  {
  border-radius: 50%;
  font-size: $button-fab-font-size;
  height: $button-fab-size;
  height: 38px \9;
  margin: auto;
  min-width: $button-fab-size;
  width: $button-fab-size;
  width: 38px \9;
  padding: 0;
  overflow: hidden;
  background: $button-primary-color;
  background: $button-primary-color-IE8 \9;
  // box-shadow: 0 1/16 * $unit 1.5/16 * $unit 0 rgba(0,0,0,0.12), 0 1/16 * $unit 1/16 * $unit 0 rgba(0,0,0,0.24);
  // box-shadow: 0 1/16 * $unit 1.5/16 * $unit 0 rgb(0,0,0), 0 1/16 * $unit 1/16 * $unit 0 rgb(0,0,0) \9;
  position: relative;
  line-height: normal;
  border: 1px solid $button-border-color;
  & .fa, & .uf {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(- 50%, - $button-fab-font-size / 2);
    line-height: $button-fab-font-size;
    width: auto;
    width: auto \9;
   /* position:relative \9;
    top:0px \9;
    left:0px \9; */
    padding: 0px;
  }

  &.mini {
    height: $button-fab-size-mini;
    min-width: $button-fab-size-mini;
    width: $button-fab-size-mini;
  }
  &.flat{
    background: transparent;
    border: none;
    box-shadow: none;
  }

  & .u-button-container {
    border-radius: 50%;
    // Fixes clipping bug in Safari.
    -webkit-mask-image: -webkit-radial-gradient(circle, white, black);
  }

  &:active {
    // @include shadow-4dp();
    background-color: $button-active-color;
  }

  &:focus:not(:active) {
    @include focus-shadow();
    background-color: $button-active-color;
  }

  &.colored {
    background: $button-fab-color-alt;
    color: $button-fab-text-color-alt;

    &:hover {
      background-color: $button-fab-hover-color-alt;
    }

    &:focus:not(:active) {
      background-color: $button-fab-active-color-alt;
    }

    &:active {
      background-color: $button-fab-active-color-alt;
    }
    background: $button-fab-ripple-color-alt;
  }
}

// Ripples
.u-button-container {
  display: block;
  height: 100%;
  left: 0/16 * $unit;
  position: absolute;
  top: 0/16 * $unit;
  width: 100%;
  z-index: 0;
  overflow: hidden;

  .u-button[disabled],
  .u-button.disabled {
    background-color: transparent;
  }
}

.u-button-primary, .u-button.primary{
  color: $button-secondary-color-alt;
  background-color: $button-primary-color-alt;
  border:1px  $button-primary-color-alt solid;
  &:hover{
    background-color: $button-primary-hover-color-alt;
     border-color: $button-primary-hover-color-alt;
  }
}


.u-button-accent, .u-button.accent {
  color: $button-fab-text-color-alt;
  background-color: $button-fab-color-alt;
  border:1px  $button-fab-color-alt solid;
  &:hover{
    background-color: $button-fab-hover-color-alt;
    border-color: $button-fab-hover-color-alt;
  }
}

// Disabled buttons


// Align icons inside buttons with text
.u-button .uf,.u-button .fa {
  vertical-align: middle;
}


// Icon buttons
.u-button-icon {
  border-radius: 50%;
  font-size: $button-fab-font-size;
  height: $button-icon-size;
  margin-left: 0;
  margin-right: 0;
  min-width: $button-icon-size;
  width: $button-icon-size;
  padding: 0;
  overflow: hidden;
  color: inherit;
  line-height: normal;

  & .uf {
    //position: absolute;
    //top: 50%;
    //left: 50%;
    //transform: translate(- $button-fab-font-size / 2, - $button-fab-font-size / 2);
    //line-height: $button-fab-font-size;
    //width: $button-fab-font-size;
  }

  &.u-button-mini-icon {
    height: $button-icon-size-mini;
    min-width: $button-icon-size-mini;
    width: $button-icon-size-mini;

    & .fa {
      top: ($button-icon-size-mini - $button-fab-font-size) / 2;
      left: ($button-icon-size-mini - $button-fab-font-size) / 2;
    }
  }

  & .u-button-ripple-container {
    border-radius: 50%;
    // Fixes clipping bug in Safari.
    -webkit-mask-image: -webkit-radial-gradient(circle, white, black);
  }
}


// 扩展样式

//success按钮
.u-button-success {
    color: #fff;
    background-color: #4caf50;
    border:1px  #4caf50 solid;
}

.u-button-success.focus, .u-button-success:focus, .u-button-success:hover {
    background-color: #66bb6a;
    border-color: #66bb6a;
}

.u-button-success.active, .u-button-success:active, .open>.dropdown-toggle.u-button-success {
    background-color: #43a047;
    border-color: #43a047;
}

.u-button.active, .u-button:active {
    -webkit-box-shadow: none;
    box-shadow: none;
}


.u-button.active:focus, .u-button:active:focus, .u-button:focus {
    outline: 0;
}
//info按钮
.u-button-info {
    color: #fff;
    background-color: #00bcd4;
    border:1px  #00bcd4 solid;
}

.u-button-info.focus, .u-button-info:focus, .u-button-info:hover {
    background-color: #26c6da;
    border-color: #26c6da;
}

.u-button-info.active, .u-button-info:active, .open>.dropdown-toggle.u-button-info {
    background-color: #00acc1;
    border-color: #00acc1;
}

.u-button-warning {
    color: #fff;
    background-color: #ff9800;
    border:1px  #ff9800 solid;
}

.u-button-warning.focus, .u-button-warning:focus, .u-button-warning:hover {
    background-color: #ffa726;
    border-color: #ffa726;
}

.u-button-warning.active, .u-button-warning:active, .open>.dropdown-toggle.u-button-warning {
    background-color: #fb8c00;
    border-color: #fb8c00;
}


.u-button-danger {
    color: #fff;
    background-color: #f44336;
     border:1px  #f44336 solid;
}

.u-button-danger.focus, .u-button-danger:focus, .u-button-danger:hover {
    background-color: #ef5350;
    border-color: #ef5350;
}

.u-button-danger.active, .u-button-danger:active, .open>.dropdown-toggle.u-button-danger {
    background-color: #e53935;
    border-color: #e53935;
}

//边框按钮
.u-button-border{
    color: rgb(63,81,181);
    border: 1px solid rgb(63,81,181);
}
.u-button-border:hover{
    color: white;
    background: rgb(63,81,181);
}
.u-button-border.success{
    color: #4caf50;
    border: 1px solid #4caf50;
}
.u-button-border.success:hover{
    color: white;
    background: #4caf50;
}
.u-button-border.info{
    color: #00bcd4;
    border: 1px solid #00bcd4;
}
.u-button-border.info:hover{
    color: white;
    background: #00bcd4;
}
.u-button-border.danger{
    color: #f44336;
    border: 1px solid #f44336;
}
.u-button-border.danger:hover{
    color: white;
    background: #f44336;
}
.u-button-border.warning{
    color: #ff9800;
    border: 1px solid #ff9800;
}
.u-button-border.warning:hover{
    color: white;
    background: #ff9800;
}

//大型
.u-button-lg {
    @include button-size($button-padding-y-lg, $button-padding-x-lg, $font-size-lg, $button-border-radius-lg);
}
//特大型
.u-button-xg {

  @include button-size($button-padding-y-xg, $button-padding-x-xg, $font-size-xg, $button-border-radius-xg);
}

//小型
.u-button-sm {
   @include button-size($button-padding-y-sm, $button-padding-x-sm, $font-size-sm, $button-border-radius-sm);
}
//方形按钮
.u-button-squared {
  border-radius: 0;
}

// 圆形按钮

.u-button-round {
  border-radius: 1000px;
}

//按钮充满整行
.u-button-block{
  white-space: normal;
  display: block;
  width: 100%;
}

//与.u-button-round连用创建左半圆
.u-button-pill-left {
  border-radius: 500px 0 0 500px;
}
//与.u-button-round连用创建右半圆
.u-button-pill-right {
  border-radius: 0 500px 500px 0;
}


/*按钮组*/
.u-button-group {
  margin-right: 15px;
  margin-bottom: 20px;
  -webkit-box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.1);
  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.1);
  position: relative;
  display: inline-block;
  vertical-align: middle;
  > .u-button {
    &:first-child {
      &:not(:last-child):not(.dropdown-toggle) {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
      }
      margin-left: 0;
    }

    &:not(:first-child):not(:last-child):not(.dropdown-toggle) {
      border-radius: 0;
    }
    will-change: initial;
    box-shadow: none;
    position: relative;
    float: left;
  }
}

 .u-button-group> .u-button:last-child:not(:first-child),
 .u-button-group> .dropdown-toggle:not(:first-child) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }

.u-button-group-vertical {
  margin-right: 15px;
  margin-bottom: 20px;
  -webkit-box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.1);
  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.1);
  position: relative;
  display: inline-block;
  vertical-align: middle;
  box-sizing: border-box;
  > .u-button {
    &:first-child:not(:last-child) {
      border-top-left-radius: 3px;
      border-top-right-radius: 3px;
      border-bottom-right-radius: 0;
      border-bottom-left-radius: 0;
    }
    box-shadow: none;
    display: block;
    float: none;
    width: 100%;
    max-width: 100%;
    position: relative;
  }
}


.u-button-group.u-button-group-xg .u-button{
    padding: 10px 18px;
    font-size: 18px !important;
    height: 50px;
}
.u-button-group.u-button-group-lg .u-button{
    padding: 6px 15px;
    font-size: 14px !important;
    height: 40px;

}
.u-button-group.u-button-group-xs .u-button{
    padding: 1px 5px;
    font-size: 12px !important;
    height: 28px;
}