Please wait. This can take some minutes ...
Many resources are needed to download a project. Please understand that we have to compensate our server costs. Thank you in advance.
Project price only 1 $
You can buy this project and download/modify it how often you want.
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\);
}