de.swm.commons.mobile.client.theme.base.css.check-radio-box.css Maven / Gradle / Ivy

@if swmmobile.css pretty {
	@external checkBoxGroup, radioButtonGroup, radioButton, checkBoxIndicator, horizontal, vertical, selected, pressed;
}

.checkBoxGroup, .radioButtonGroup {
	display: \-webkit-box;
	\-webkit-box-orient: horizontal;
	width: 100%;

	display: -ms-flexbox;
}

.checkBoxGroup > span, .radioButtonGroup > span {
	\-webkit-box-flex: 1;
	display: \-webkit-box;
	\-webkit-box-align: center;
	\-webkit-box-pack: center;
	color: white;
    font-weight: bold;
    font-size: medium;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    text-shadow: rgba(0, 0, 0, 0.8) 0 -0.1em 0.1em;
	padding: .8em .1em;
	border-left: 1px solid #777;
	border-right: 1px solid #555;
	background-image: literal('-webkit-gradient(linear, 0% 0, 0% 100%, from(#666), to(#555))');	

	-ms-flex: 1;
	display: -ms-flexbox;
	-ms-flex-align: center;
	-ms-flex-pack: center;
	background-image: literal('linear-gradient(to bottom, #666 0%, #555 100%)');
}

.checkBoxGroup.horizontal > span.selected,
.radioButtonGroup.horizontal > span.selected {
	background-image: literal('-webkit-gradient(linear, 0% 0%, 0% 100%, from(lightGreen), to(darkGreen))');
	border-left-color: lightGreen;
	border-right-color: darkGreen;

	background-image: literal('linear-gradient(to bottom, lightGreen 0%, darkGreen 100%)');
}

.checkBoxGroup.horizontal > span > input, 
.checkBoxGroup.horizontal > span > div,
.radioButtonGroup.horizontal > span > input, 
.radioButtonGroup.horizontal > span > div {
	display: none;
}

.checkBoxGroup > span:first-child,
.radioButtonGroup > span:first-child {
	border-left: 0px;
	border-bottom-left-radius: 0.4em 0.4em;
	border-top-left-radius: 0.4em 0.4em;
}

.checkBoxGroup > span:last-child,
.radioButtonGroup > span:last-child {
	border-right: 0px;
	border-bottom-right-radius: 0.4em 0.4em;
	border-top-right-radius: 0.4em 0.4em;
}

.checkBoxGroup.vertical,
.radioButtonGroup.vertical {
	\-webkit-box-orient: vertical;

	-ms-flex-direction: column;
}

.checkBoxGroup.vertical > span,
.radioButtonGroup.vertical > span {
	\-webkit-box-pack: start;
	border: 0;

	-ms-flex-pack: start;
}

.checkBoxGroup.vertical > span.pressed,
.radioButtonGroup.vertical > span.pressed {
	background-image: literal('-webkit-gradient(linear, 0% 0%, 0% 100%, from(lightGreen), to(darkGreen))');

	background-image: literal('linear-gradient(to bottom, lightGreen 0%, darkGreen 100%)');
}

.checkBoxGroup.vertical > span:first-child,
.radioButtonGroup.vertical > span:first-child {
	border-bottom-left-radius: 0;
	border-top-right-radius: 0.4em 0.4em;
}

.checkBoxGroup.vertical > span:last-child,
.radioButtonGroup.vertical > span:last-child {
	border-bottom-left-radius: 0.4em 0.4em;
	border-top-right-radius: 0;
}

/* android radius antialias workaround */
.android .checkBoxGroup > span,
.android .radioButtonGroup > span {
	\-webkit-box-shadow: 0 0 1px #666;
		
	box-shadow: 0 0 1px #666;	
}

/* Android native check box and radio button are too small in WVGA resolution */
.WVGA .checkBoxGroup > span > input,
.WVGA .radioButton > input {
	display: none;
}

.WVGA .radioButton > div {
	width: 1.2em;
	height: 1.2em;
	margin: 0 .4em 0 .4em;
	background-image: literal('-webkit-gradient(radial, 50% 50%, 0, 50% 50%, 16, from(white), to(gray))');
	\-webkit-border-radius: .6em;
	border: 1px solid #444;
	\-webkit-box-shadow:0 0 .1em #444;

	background-image: literal('radial-gradient(white, gray)');
	border-radius: .6em;
	box-shadow:0 0 .1em #444;
}

.WVGA .radioButton.selected > div {
	background-image: literal('-webkit-gradient(radial, 50% 50%, 0, 50% 50%, 16, from(lightgreen), to(green))');
	\-webkit-box-shadow:0 0 .1em darkgreen;

	background-image: literal('radial-gradient(lightgreen, green)');
	box-shadow:0 0 .1em darkgreen;
}
	
.WVGA .checkBoxIndicator {
	position: relative;
	margin: 0 .4em 0 .4em;
}

.WVGA .checkBoxIndicator > div:first-child {
	width: .8em;
	height: .8em;
	padding: .1em;	
	background: literal('-webkit-gradient(linear, 0% 0%, 0% 100%, from(#555), to(#777))');
	\-webkit-background-clip: padding;
	border: .1em solid #333;
	border-radius: .2em;

	background-clip: padding;
	background-image: literal('linear-gradient(to bottom, #555 0%, #777 100%)');
}

.WVGA .checkBoxIndicator > div:first-child > div {
	width: .65em;
	height: .65em;
	background: literal('-webkit-gradient(linear, 0% 0%, 0% 100%, from(white), to(gray))');
	border: .1em solid #333;

	background-image: literal('linear-gradient(to bottom, #555 0%, white gray)');
}

.WVGA .selected .checkBoxIndicator > div:nth-child\(2\),
.WVGA .selected .checkBoxIndicator > div:nth-child\(3\),
.WVGA .selected .checkBoxIndicator > div:nth-child\(4\) {
	position: absolute;
	background: #00CC00;
	border: .1em solid #111;
}
	
.WVGA .selected .checkBoxIndicator > div:nth-child\(2\) {
	width: .2em;
	height: .3em;
	top: .35em;
	left: .2em;
	\-webkit-transform: rotate\(-45deg\);
	border-bottom: 0;

	transform: rotate\(-45deg\);
}

.WVGA .selected .checkBoxIndicator > div:nth-child\(3\) {
	width: .2em;
	height: 1em;
	top: -.1em;
	left: .7em;
	\-webkit-transform: rotate\(45deg\);
	border-bottom: 0;

	transform: rotate\(45deg\);
}

.WVGA .selected .checkBoxIndicator > div:nth-child\(4\) {
	width: .2em;
	height: .4em;
	top: .5em;
	left: .4em;
	\-webkit-transform: rotate\(-45deg\);
	border-right: 0;
	border-top: 0;

	transform: rotate\(-45deg\);
}