Files
sogo/UI/WebServerResources/scss/components/radioButton/radio-button.scss

81 lines
1.4 KiB
SCSS

$radio-width: 16px !default;
$radio-height: $radio-width !default;
md-radio-button,
.md-switch-thumb { // Used in switch
display: block;
margin: 15px;
white-space: nowrap;
cursor: pointer;
input {
display: none;
}
.md-container {
position: relative;
top: 4px;
display: inline-block;
width: $radio-width;
height: $radio-width;
cursor: pointer;
.md-ripple-container {
position: absolute;
display: block;
width: $radio-width * 3;
height: $radio-width * 3;
left: -$radio-width;
top: -$radio-width;
}
}
.md-off {
position: absolute;
top: 0px;
left: 0px;
width: $radio-width;
height: $radio-width;
border: solid 2px;
border-radius: 50%;
transition: border-color ease 0.28s;
}
.md-on {
position: absolute;
top: 0;
left: 0;
width: $radio-width;
height: $radio-width;
border-radius: 50%;
transition: transform ease 0.28s;
transform: scale(0);
}
&.md-checked .md-on {
transform: scale(0.55);
}
.md-label {
position: relative;
display: inline-block;
margin-left: 10px;
margin-right: 10px;
vertical-align: middle;
white-space: normal;
pointer-events: none;
width: auto;
}
.circle {
border-radius: 50%;
}
}
md-radio-group {
border: 1px dotted transparent;
display: block;
outline: none;
}