bee-radio/src/Radio.scss

@import "../node_modules/tinper-bee-core/scss/minxin-variables";
@import "../node_modules/tinper-bee-core/scss/minxin-mixins";

$radio-icon-width:16px;
$radio-icon-height:16px;
$radio-icon-checked-width: 6px;
$radio-icon-checked-height: 6px;
.u-radio-group {
	position: relative;
	display: inline-block;
}

.u-radio-group{
	.u-radio-button:first-child:not(:last-child):not(.dropdown-toggle) {
	    border-top-right-radius: 0;
	    border-bottom-right-radius: 0;
	}
	.u-radio-button:not(:first-child):not(:last-child):not(.dropdown-toggle) {
	    border-radius: 0;
	}
	.u-radio-button{
		position: relative;
    	float: left;
    	display: inline-block;
	    padding: 6px 12px;
	    margin-bottom: 0;
	    font-size: 12px;
	    font-weight: 400;
	    line-height: 12px;
	    text-align: center;
	    white-space: nowrap;
	    vertical-align: middle;
	    -ms-touch-action: manipulation;
	    touch-action: manipulation;
	    cursor: pointer;
	    -webkit-user-select: none;
	    -moz-user-select: none;
	    -ms-user-select: none;
	    user-select: none;
	    background-image: none;
	    border: 1px solid transparent;
	    border-radius: $border-radius-base;
	    color: $font-color-base;
	    background-color: #fff;
		border-color: $border-color-base;
		z-index: 10;
		&:first-child {
		    margin-left: 0;
		    border-radius: $border-radius-base 0 0 $border-radius-base;
		}
		&:last-child{
			border-radius: 0 $border-radius-base $border-radius-base 0;
			border-right: 1px solid $border-color-base;
	    }
	    &.u-radio-button-lg {
		    height: $radio-button-lg-height;
		    line-height: $radio-button-lg-line-height;
	    }
	    &.u-radio-button-sm {
		    height: $radio-button-sm-height;
		    line-height: $radio-button-sm-line-height;
		    padding: 0 12px;
	    }
	    &.sm:first-child{
	    	border-radius: 2px 0 0 2px;
	    }
	  
		&:hover,&:focus{
			// color: $radio-checked-color;
	    	position: relative;
		}
		input{
			position: absolute;
			left: 2px;
			z-index: 3;
			cursor: pointer;
			opacity: 0;
			top: 7px;
			bottom: 0;
			right: 0;
			box-sizing: border-box;
			padding: 0;
			width: 100%;
		}
		&.is-checked{
			border-color: $radio-checked-color;
			.u-radio-button-label{
				color: #fff;
			}
			&.disabled,&.disabled:hover{
				border-color: #c1c7d0;
				background-color:#c1c7d0;
			}
			&.disabled .u-radio-button-label{
				color: #fff;
			}
		}
		&.disabled {
			z-index: 1;
			border-color: #DFE1E6;
		    background-color: #F7F9FB;
		    cursor: not-allowed;
		    color: #909090;
		    span,label , input[type='radio']{
		    	cursor: not-allowed;
			}
			&:hover{
				border-color: #DFE1E6;
				background-color: #F7F9FB;
				color: #909090;
				box-shadow: none;
				cursor: not-allowed;
			}
	    }
		&:hover, &.is-checked {
		    background: $hover-bg-color-base;
		}
		&:focus, &.focus, &:active, &.active, &.is-checked{
			border-color: $radio-checked-color;
			background: $radio-checked-color;
			color: #fff;
		}
	}
}

.u-radio-group .u-radio-button+.u-radio-button, .u-radio-group .u-radio-button+.u-radio-group, .u-radio-group .u-radio-group+.u-radio-button, .u-radio-group .u-radio-group+.u-radio-group {
    margin-left: -1px;
}

.u-radio {
	position: relative;
	line-height: 18px;
	input[type='radio']{
		position: absolute;
		z-index: 3;
		cursor: pointer;
		opacity: 0;
		top: 1px;
		box-sizing: border-box;
		padding: 0;
		width: 100%;
		height: 100%;
	}
	input[type='radio']:focus + .u-radio-label:before{
    	border-color: $radio-checked-color;
	}
	&.is-checked {
		.u-radio-label:before{
			-moz-box-shadow: inset 0 0 0 10px $brand-light;
		    -webkit-box-shadow: inset 0 0 0 10px $brand-light;
		    box-shadow: inset 0 0 0 10px $brand-light;
		    border-color:$border-color-base;
		}
		.u-radio-label:after {
			position: absolute;
		    top: 6px;
		    border-radius: 4px;
		    height: $radio-icon-checked-height;
		    width: $radio-icon-checked-width;
		    background: $radio-checked-color;
		    margin-left: 5px;
		}
		&.u-radio-inverse .u-radio-label{
			&:before{
				-moz-box-shadow: inset 0 0 0 10px $radio-checked-color;
				-webkit-box-shadow: inset 0 0 0 10px $radio-checked-color;
				box-shadow: inset 0 0 0 10px $radio-checked-color;
				border-color:$radio-checked-color;
			}
			&:after{
				background: $brand-light;
			}
		}
	} 
	&.u-radio-noContent{
		.u-radio-label:after {
		    top: -7px;
		}
		&.u-radio .u-radio-label:before{
			bottom: -4px;
		}
	}
	&.disabled{
		cursor: not-allowed;
		input[type='radio'] {
			cursor: not-allowed;
		}
		.u-radio-label{
			color: #909090;
			&:before{
				border-color: #DFE1E6;
			}
		}
	}
	&.disabled.is-checked .u-radio-label{
		color: #909090;
		&:after{
			background: #c1c7d0;
		}
	}
	.u-radio-label {
		font-size: 12px;
		cursor: pointer;
	    display: inline-block;
	    position: relative;
	    padding-left: 24px;
	    margin-right: 16px;
	    color: #212121;
	    &:before {
		    -moz-border-radius: 50%;
		    -webkit-border-radius: 50%;
		    border-radius: 50%;
		    border: 2px solid $border-color-base;
		    background-color: #fff;
		    // -moz-transition: all 0.3s ease-in-out;
		    // -o-transition: all 0.3s ease-in-out;
		    // -webkit-transition: all 0.3s ease-in-out;
		    // transition: all 0.3s ease-in-out;
		    content: '';
		    font-family: 'uf';
		    display: inline-block;
		    width: $radio-icon-width;
		    height: $radio-icon-height;
		    left: 0;
		    bottom: 1px;
		    text-align: center;
		    position: absolute;
		}
		&:after {
			content: '';
		    font-family: 'uf';
		    display: inline-block;
		    width: $radio-icon-width;
		    height: $radio-icon-height;
		    left: 0;
		    bottom: 0;
		    text-align: center;
		    position: absolute;
		}
	}
}

// Modifier: `radio-success`
// -------------------------

.u-radio.u-radio-success {
	&.is-checked {
		.u-radio-label:before{
			-moz-box-shadow: inset 0 0 0 10px #fff;
		    -webkit-box-shadow: inset 0 0 0 10px #fff;
		    box-shadow: inset 0 0 0 10px #fff;
		    border-color:$border-color-base;
		}
		.u-radio-label:after{
			background: $radio-success-bg;
		}
	}
	.u-radio-label {
	    color: $radio-success-bg;
	    
	}
	input[type='radio']:focus + .u-radio-label:before{
    	border-color: $radio-success-bg;
	} 
}
// Modifier: `radio-warning`
// -------------------------

.u-radio.u-radio-warning {
	&.is-checked {
		.u-radio-label:before{
			-moz-box-shadow: inset 0 0 0 10px #fff;
		    -webkit-box-shadow: inset 0 0 0 10px #fff;
		    box-shadow: inset 0 0 0 10px #fff;
		    border-color:$border-color-base;
		}
		.u-radio-label:after{
			background: $radio-warning-bg;
		}
	} 
	.u-radio-label {
	    color: $radio-warning-bg;
	}
	input[type='radio']:focus + .u-radio-label:before{
    	border-color: $radio-warning-bg;
	} 
}
// Modifier: `radio-danger`
// -------------------------

.u-radio.u-radio-danger {
	&.is-checked {
		.u-radio-label:before{
			-moz-box-shadow: inset 0 0 0 10px #fff;
		    -webkit-box-shadow: inset 0 0 0 10px #fff;
		    box-shadow: inset 0 0 0 10px #fff;
		    border-color:$border-color-base;
		}
		.u-radio-label:after{
			background: $radio-danger-bg;
		}
	} 
	.u-radio-label {
	    color: $radio-danger-bg;
	}
	input[type='radio']:focus + .u-radio-label:before{
    	border-color: $radio-danger-bg;
	} 
}

// Modifier: `radio-info`
// -------------------------

.u-radio.u-radio-info {
	&.is-checked {
		.u-radio-label:before{
			-moz-box-shadow: inset 0 0 0 10px #fff;
		    -webkit-box-shadow: inset 0 0 0 10px #fff;
		    box-shadow: inset 0 0 0 10px #fff;
		    border-color:$border-color-base;
		}
		.u-radio-label:after{
			background: $radio-info-bg;
		}
	} 
	.u-radio-label {
	    color: $radio-info-bg;
	    
	}
	input[type='radio']:focus + .u-radio-label:before{
    	border-color: $radio-info-bg;
	} 
}

// Modifier: `radio-dark`
// -------------------------

.u-radio.u-radio-dark {
	&.is-checked {
		.u-radio-label:before{
			-moz-box-shadow: inset 0 0 0 10px #fff;
		    -webkit-box-shadow: inset 0 0 0 10px #fff;
		    box-shadow: inset 0 0 0 10px #fff;
		    border-color:$border-color-base;
		}
		.u-radio-label:after{
			background: $radio-dark-bg;
		}
	} 
	.u-radio-label {
	    color: $radio-dark-bg;
	    
	}
	input[type='radio']:focus + .u-radio-label:before{
    	border-color: $radio-dark-bg;
	} 
}