hy-checkbox/lib/Button/button.less

checkbox & radio ui components for react

/*
 * @Author: SiMeiyu 
 * @Date: 2017-07-04 09:57:59 
 */ 

@import "../../app/variables.less";
@btn-prefix-cls: ~'@{ult-prefix}-btn';
.btn-group(@btnClassName: btn) {
  position: relative;
  display: inline-block;
  > .@{btnClassName} {
    position: relative;
    z-index: 0;

    &:hover,
    &:focus,
    &:active,
    &.active,
		&.checked {
      z-index: 3;
    }

    &:disabled {
      z-index: 0;
    }
  }

  .@{btnClassName} + .@{btnClassName},
  .@{btnClassName} + &,
  & + .@{btnClassName},
  & + & {
    margin-left: -1px;
  }

  .@{btnClassName}:not(:first-child):not(:last-child) {
    border-radius: 0;
  }

	.@{btnClassName} {
		&-primary, &-warning, &-success, &-danger {			
			&:hover, &:active, &:focus {
				border-right-color: @btn-group-border;
				& + .@{btnClassName}-primary, & + .@{btnClassName}-warning, & + .@{btnClassName}-success, & + .@{btnClassName}-danger {
					border-left-color: transparent;
				}
			}
			&:not(:first-child) {
				&, &:hover, &:active, &:focus {
					border-left-color: @btn-group-border;
				}
			}
		}
	}

  > .@{btnClassName}:first-child {
    margin-left: 0;
    &:not(:last-child) {
      border-bottom-right-radius: 0;
      border-top-right-radius: 0;
    }
  }

  > .@{btnClassName}:last-child:not(:first-child) {
    border-bottom-left-radius: 0;
    border-top-left-radius: 0;
  }
}
.btn-group-vertical(@btnClassName: btn) {
	position: relative;
  display: inline-block;
  > .@{btnClassName} {
    position: relative;
    z-index: 0;

    &:hover,
    &:focus,
    &:active,
    &.active,
		&.checked {
      z-index: 3;
    }

    &:disabled {
      z-index: 0;
    }
  }

  .@{btnClassName} + .@{btnClassName},
  .@{btnClassName} + &,
  & + .@{btnClassName},
  & + & {
    margin-top: -1px;
  }

  .@{btnClassName}:not(:first-child):not(:last-child) {
    border-radius: 0;
  }

	.@{btnClassName} {
		display: block;
		&-primary, &-warning, &-success, &-danger {			
			&:hover, &:active, &:focus {
				border-bottom-color: @btn-group-border;
				& + .@{btnClassName}-primary, & + .@{btnClassName}-warning, & + .@{btnClassName}-success, & + .@{btnClassName}-danger {
					border-top-color: transparent;
				}
			}
			&:not(:first-child) {
				&, &:hover, &:active, &:focus {
					border-top-color: @btn-group-border;
				}
			}
		}
	}

  > .@{btnClassName}:first-child {
    margin-top: 0;
    &:not(:last-child) {
      border-bottom-right-radius: 0;
      border-bottom-left-radius: 0;
    }
  }

  > .@{btnClassName}:last-child:not(:first-child) {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
  }
};

.@{btn-prefix-cls} {
	display: inline-block;
	font-size: @btn-font-size;
	cursor: pointer;
	transition: @trans;
	vertical-align: middle;
	line-height: @btn-line-height;
	border-radius: @btn-border-radius;
	padding: @btn-padding-vertical @btn-padding-horizontal;
	border: 1px solid @btn-default-border;
	// background-color: @btn-default-bg;
	// color: @btn-default-color;
	text-align: center;
	white-space: nowrap;
	> input {
		display: none;
	}
	.iconfont {
		font-size: @btn-font-size;
		display: inline-block;
		line-height: 1;
		& + span {
			margin-left: 0;
		}
	}
	span + .iconfont {
		margin-left:  @base-space;
	}

	&-group {
		.btn-group(@btn-prefix-cls);

		&-vertical {
			.btn-group-vertical(@btn-prefix-cls);
		}
	}

	&-block {
		width: 100%;
		display: block;
	}
	&-large {
		padding: @btn-padding-large-vertical  @btn-padding-large-horizontal;
	}
	&-small {
		padding: @btn-padding-small-vertical  @btn-padding-small-horizontal;
		min-width: @base-space*8;
		.iconfont + span, span + .iconfont {
			margin-left: @base-space / 2;
		}
	}
	&, &-default, &-dashed {
		border-color: @btn-default-border;
		background-color: @btn-default-bg;
		color: @btn-default-color;
		&:hover {
			border-color: @btn-default-border-hover;
			background-color: @btn-default-bg-hover;
			color: @btn-default-color-hover;
		}
		&:active, &.checked {
			border-color: @btn-default-border-active;
			background-color: @btn-default-bg-active;
			color: @btn-default-color-active;
		}
	}
	&-dashed {
		border-style: dotted;
	}
	&-primary {
		border-color: @btn-primary-border;
		background-color: @btn-primary-bg;
		color: @btn-primary-color;
		&:hover {
			border-color: @btn-primary-border-hover;
			background-color: @btn-primary-bg-hover;
			color: @btn-primary-color-hover;
		}
		&:active {
			border-color: @btn-primary-border-active;
			background-color: @btn-primary-bg-active;
			color: @btn-primary-color-active;
		}
	}
	&-success {
		border-color: @btn-success-border;
		background-color: @btn-success-bg;
		color: @btn-success-color;
		&:hover {
			border-color: @btn-success-border-hover;
			background-color: @btn-success-bg-hover;
			color: @btn-success-color-hover;
		}
		&:active {
			border-color: @btn-success-border-active;
			background-color: @btn-success-bg-active;
			color: @btn-success-color-active;
		}
	}
	&-warning {
		border-color: @btn-warning-border;
		background-color: @btn-warning-bg;
		color: @btn-warning-color;
		&:hover {
			border-color: @btn-warning-border-hover;
			background-color: @btn-warning-bg-hover;
			color: @btn-warning-color-hover;
		}
		&:active {
			border-color: @btn-warning-border-active;
			background-color: @btn-warning-bg-active;
			color: @btn-warning-color-active;
		}
	}
	&-danger {
		border-color: @btn-danger-border;
		background-color: @btn-danger-bg;
		color: @btn-danger-color;
		&:hover {
			border-color: @btn-danger-border-hover;
			background-color: @btn-danger-bg-hover;
			color: @btn-danger-color-hover;
		}
		&:active {
			border-color: @btn-danger-border-active;
			background-color: @btn-danger-bg-active;
			color: @btn-danger-color-active;
		}
	}

	&-disabled, &.disabled {
		cursor: not-allowed;
		&,
		&:hover,
		&:active {
			background-color: @btn-disable-bg;
			border-color: @btn-disable-border;
			color: @btn-disable-color;
		}
	}
}

.@{ult-prefix}-icon-only {
	padding-left: @base-space;
	padding-right: @base-space;
	width: @base-space * 4;
	&.@{ult-prefix}-btn-large {
		width: @base-space * 5;
	}
	&.@{ult-prefix}-btn-small {
		padding-left: @base-space / 2;
		padding-right: @base-space / 2;
		width: @base-space * 3;
	}
}

.@{ult-prefix}-btn-list {
	list-style: none;
	> li {
		display: inline-block;
		&:not(:first-child) {
			margin-left: @base-space;
		}
	}
}