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

Show more of this group Show more artifacts with this name
Show all versions of swm-mobile Show documentation
GWT Bibliothek fuer Mobile Plattformen der SWM
The newest version!
@url checkBoxImage checkBox;

@external .gwt-RadioButton-disabled;

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

@external gwt-CheckBox;

.gwt-CheckBox input[type="checkbox"] {
	background-image: checkBoxImage;
	background-repeat: no-repeat;
    background-position: right top;
    -webkit-background-size: 3em 1.5em;
    font-size: 1.5em;
    -webkit-appearance: none;
    width: 1.5em;
    height: 1.5em;
    border: 1px solid #B1B1B1;
    margin: 0 0.3em 0 0;
    border-radius: 0;
    -webkit-border-radius: 0;
}

.gwt-CheckBox input[type="checkbox"]:checked {
	background-position: left top;
}

.gwt-RadioButton-disabled {
    color: silver;
    border: 1px solid grey;
    background: grey;
}

.checkBoxGroup, .radioButtonGroup {
	display: \-webkit-box;
	\-webkit-box-orient: horizontal;
}

.checkBoxGroup > span, .radioButtonGroup > span {
	\-webkit-box-flex: 1;
	display: \-webkit-box;
	\-webkit-box-align: center;
	\-webkit-box-pack: center;
	border-radius: 0.4em 0.4em;
	padding: .8em .8em;
	color: #004180;
    border: 1px solid #004180;
	background: #ffffff;
}

.checkBoxGroup.horizontal > span.selected,
.radioButtonGroup.horizontal > span.selected {
    background: #004180;
	color: white;
}

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

.radioButtonGroup.horizontal {
    min-width: 50%;
}

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

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

.checkBoxGroup.vertical > span,
.radioButtonGroup.vertical > span {
	\-webkit-box-pack: start;
    color: #004180;
    border: 1px solid #004180;
}

.checkBoxGroup.vertical > span.pressed,
.radioButtonGroup.vertical > span.pressed {
    background: #004180;
    color: white;
}

.checkBoxGroup.vertical > span.selected,
.radioButtonGroup.vertical > span.selected {
    background: #004180;
    color: white;
}

.checkBoxGroup.vertical > span:first-child,
.radioButtonGroup.vertical > span:first-child {
	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;
}

/* android radius antialias workaround */
.android .checkBoxGroup > span,
.android .radioButtonGroup > span {
	\-webkit-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;
}

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

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

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

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

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