frrb/build/style.js

Fat Responsive Radiobutton

'use strict';

var _exports$fatResponsiveRadiobutton;

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

var _vars = require('./vars');

exports.fatResponsiveRadiobutton = (_exports$fatResponsiveRadiobutton = {
	'opacity': 0,
	'position': 'absolute',
	'display': 'inline-block',
	'verticalAlign': 'middle',
	'zIndex': 100,
	'& + label': {
		'paddingLeft': vmin(_vars.size * 1.5),
		'display': 'block',
		'position': 'relative',
		'height': vmin(_vars.size),
		'lineHeight': vmin(_vars.size),
		'fontSize': vmin(_vars.size / 2),
		'cursor': 'pointer',
		'overflow': 'hidden',
		'::before': {
			content: '""',
			display: 'inline-block',
			width: vmin(_vars.size),
			height: vmin(_vars.size),
			position: 'absolute',
			left: 0,
			top: '50%',
			marginTop: vmin(-_vars.size / 2),
			border: prop([vmin(0.75), 'solid', '#666']),
			borderRadius: '50%',
			boxShadow: prop(['inset', vmin(0.5), vmin(0.5), vmin(0.5), '0', 'rgba(153, 153, 153, 0.75)']),
			cursor: 'pointer'
		},
		'::after': {
			content: '""',
			cursor: 'pointer',
			transition: 'color ' + _vars.transitionTime + ', opacity ' + _vars.transitionTime,
			boxShadow: prop([vmin(0.3), vmin(0.3), vmin(0.3), '0', 'rgba(153, 153, 153, 0.75)']),
			display: 'inline-block',
			textAlign: 'center',
			position: 'absolute',
			left: vmin(2.5),
			top: vmin(2.5),
			width: 0,
			height: 0,
			zIndex: 2,
			fontSize: '1px',
			border: prop([vmin(2.5), 'solid']),
			borderRadius: '50%',
			opacity: 0,
			overflow: 'hidden'
		}
	},
	':checked + label': {
		'::after': {
			opacity: 1
		}
	}
}, _defineProperty(_exports$fatResponsiveRadiobutton, '&.' + _vars.alternateClass, {
	'& + label': {
		'transition': 'color ' + _vars.transitionTime + ', text-decoration ' + _vars.transitionTime,
		'::after': {
			transition: 'opacity ' + _vars.transitionTime
		}
	},
	':checked + label': {
		'textDecoration': 'line-through',
		'color': '#999',
		'::before': {
			borderColor: '#999'
		}
	}
}), _defineProperty(_exports$fatResponsiveRadiobutton, ':focus + label', {
	outline: ['rgba(33, 33, 33, .2) solid 5px', '-moz-outline-color auto 5px', '-webkit-focus-ring-color auto 5px']
}), _exports$fatResponsiveRadiobutton);

function vmin(val) {
	return val + 'vmin';
}

function prop(val) {
	return val.join(' ');
}