From 86e4e291bfda3365c0bb82bacb2b9990a86ce759 Mon Sep 17 00:00:00 2001 From: ARC Date: Sat, 25 Apr 2015 09:13:54 -0400 Subject: First Commit --- www/lib/ionic/scss/_radio.scss | 57 ++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 57 insertions(+) create mode 100644 www/lib/ionic/scss/_radio.scss (limited to 'www/lib/ionic/scss/_radio.scss') diff --git a/www/lib/ionic/scss/_radio.scss b/www/lib/ionic/scss/_radio.scss new file mode 100644 index 00000000..0f75fa12 --- /dev/null +++ b/www/lib/ionic/scss/_radio.scss @@ -0,0 +1,57 @@ + +/** + * Radio Button Inputs + * -------------------------------------------------- + */ + +.item-radio { + padding: 0; + + &:hover { + cursor: pointer; + } +} + +.item-radio .item-content { + /* give some room to the right for the checkmark icon */ + padding-right: $item-padding * 4; +} + +.item-radio .radio-icon { + /* checkmark icon will be hidden by default */ + position: absolute; + top: 0; + right: 0; + z-index: $z-index-item-radio; + visibility: hidden; + padding: $item-padding - 2; + height: 100%; + font-size: 24px; +} + +.item-radio input { + /* hide any radio button inputs elements (the ugly circles) */ + position: absolute; + left: -9999px; + + &:checked ~ .item-content { + /* style the item content when its checked */ + background: #f7f7f7; + } + + &:checked ~ .radio-icon { + /* show the checkmark icon when its checked */ + visibility: visible; + } +} + +// Hack for Android to correctly display the checked item +// http://timpietrusky.com/advanced-checkbox-hack +.platform-android.grade-b .item-radio, +.platform-android.grade-c .item-radio { + -webkit-animation: androidCheckedbugfix infinite 1s; +} +@-webkit-keyframes androidCheckedbugfix { + from { padding: 0; } + to { padding: 0; } +} -- cgit v1.2.3