de.swm.commons.mobile.client.theme.bootstrap.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: 80%;

	display: -ms-flexbox;
}


.checkBoxGroup > span > label:before, .radioButtonGroup > span > label:before {
    content: "  ";
    font-family: inherit;
    width: 16px;
    display: inline-block;
    font-size: 30px;
    position: relative;
}

.checkBoxGroup > span, .radioButtonGroup > span {
	\-webkit-box-flex: 1;
	display: \-webkit-box;
	\-webkit-box-align: center;
	\-webkit-box-pack: center;
    font-size: inherit;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
	padding: .8em .1em;
	border-right: 1px solid #767676;
    font-weight: 500;
    background-image: literal('-webkit-gradient(linear, 0% 0%, 0% 100%, from(#D5D5D5), to(#f5f5f5))');
}

.checkBoxGroup.horizontal > span.selected,
.radioButtonGroup.horizontal > span.selected {
    background-image: literal('-webkit-gradient(linear, 0% 0%, 0% 100%, from(#D5D5D5), to(#A09D9D))');
}

.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(#D5D5D5), to(#A09D9D))');

}

.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(linear, 0% 0%, 0% 100%, from(#D5D5D5), to(#f5f5f5))');
    \-webkit-border-radius: .6em;
	border: 1px solid #444;
	\-webkit-box-shadow:0 0 .1em #444;

	border-radius: .6em;
	box-shadow:0 0 .1em #444;
}

.WVGA .radioButton.selected > div {
    background-image: literal('-webkit-gradient(linear, 0% 0%, 0% 100%, from(#D5D5D5), to(#f5f5f5))');
    \-webkit-box-shadow:0 0 .1em darkgreen;

	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-image: literal('-webkit-gradient(linear, 0% 0%, 0% 100%, from(#D5D5D5), to(#f5f5f5))');
    \-webkit-background-clip: padding;
	border: .1em solid #333;
	border-radius: .2em;

	background-clip: padding;
}

.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;

}

.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\);
}