diff options
| author | Pliable Pixels <pliablepixels@gmail.com> | 2019-04-18 09:42:22 -0400 |
|---|---|---|
| committer | Pliable Pixels <pliablepixels@gmail.com> | 2019-04-18 09:42:22 -0400 |
| commit | 38d3feaa47e87e037c6fe4b320ad88417d565ea5 (patch) | |
| tree | 83f98a9f25ddfacfef835b5bfcc2edd8336c8e81 /www/lib/ionic/scss/_radio.scss | |
| parent | a86a09b90283950364b5bfdaf9904f13de2ce2fc (diff) | |
libs tbd cleanup
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; + } +} + |
