diff options
| author | Pliable Pixels <pliablepixels@gmail.com> | 2017-09-20 16:15:18 -0400 |
|---|---|---|
| committer | Pliable Pixels <pliablepixels@gmail.com> | 2017-09-20 16:15:18 -0400 |
| commit | 676270d21beed31d767a06c89522198c77d5d865 (patch) | |
| tree | 902772af01bfbcf80955f0351a5aae9eb029b9b0 /www/lib/ionic/scss/_radio.scss | |
Initial commit
Diffstat (limited to 'www/lib/ionic/scss/_radio.scss')
| -rw-r--r-- | www/lib/ionic/scss/_radio.scss | 47 |
1 files changed, 47 insertions, 0 deletions
diff --git a/www/lib/ionic/scss/_radio.scss b/www/lib/ionic/scss/_radio.scss new file mode 100644 index 00000000..fa401c06 --- /dev/null +++ b/www/lib/ionic/scss/_radio.scss @@ -0,0 +1,47 @@ + +/** + * 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 + .radio-content .item-content { + /* style the item content when its checked */ + background: #f7f7f7; + } + + &:checked + .radio-content .radio-icon { + /* show the checkmark icon when its checked */ + visibility: visible; + } +} + |