Files
2015-09-17 22:02:11 -05:00

88 lines
1.9 KiB
SCSS

// Material Design Radio
// --------------------------------------------------
$radio-md-active-color: color(primary) !default;
$radio-md-icon-size: 16px !default;
$radio-md-border-width: 2px !default;
$radio-md-color-off: darken($item-md-border-color, 40%) !default;
$radio-md-transition-duration: 280ms !default;
$radio-md-transition-easing: cubic-bezier(.4, 0, .2, 1) !default;
ion-radio {
.radio-icon {
position: relative;
top: 0;
left: 0;
width: $radio-md-icon-size;
height: $radio-md-icon-size;
margin: 0;
border: $radio-md-border-width solid $radio-md-color-off;
border-radius: 50%;
}
&[aria-checked=true] .radio-icon {
border-color: $radio-md-active-color;
}
.radio-icon:after {
position: absolute;
top: $radio-md-border-width;
left: $radio-md-border-width;
width: $radio-md-icon-size / 2;
height: $radio-md-icon-size / 2;
background: $radio-md-active-color;
border-radius: 50%;
content: '';
transition: transform $radio-md-transition-duration $radio-md-transition-easing;
transform: scale3d(0, 0, 0);
}
&[aria-checked=true] .radio-icon:after {
transform: scale3d(1, 1, 1);
}
&[aria-checked=true] {
color: $radio-md-active-color;
}
}
// Material Design Radio Color Mixin
// --------------------------------------------------
@mixin radio-theme-md($color-name, $color-value) {
ion-radio[#{$color-name}] {
&[aria-checked=true] .radio-icon {
border-color: $color-value;
}
&[aria-checked=true] .radio-icon:after {
background: $color-value;
}
&[aria-checked=true] {
color: $color-value;
}
}
}
// Generate Material Design Radio Auxiliary Colors
// --------------------------------------------------
@each $color-name, $color-value in auxiliary-colors() {
@include radio-theme-md($color-name, $color-value);
}