diff --git a/ionic/components/radio/modes/material.scss b/ionic/components/radio/modes/material.scss new file mode 100644 index 0000000000..a74fe2dc86 --- /dev/null +++ b/ionic/components/radio/modes/material.scss @@ -0,0 +1,83 @@ + +// 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: $list-border-color !default; + +$radio-md-transition-duration: 280ms !default; +$radio-md-transition-easing: cubic-bezier(.4, 0, .2, 1) !default; + + +.radio[mode=md] { + + .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) { + + .radio[mode=md][#{$color-name}] { + + &[aria-checked=true] .radio-icon::after { + border-color: $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); + +} diff --git a/ionic/ionic.material.scss b/ionic/ionic.material.scss index 92f7049f98..3ef88baf30 100644 --- a/ionic/ionic.material.scss +++ b/ionic/ionic.material.scss @@ -13,5 +13,6 @@ "components/list/modes/material", "components/text-input/modes/material", "components/nav-bar/modes/material", + "components/radio/modes/material", "components/tabs/modes/material";