/*
* Pretty Check Radio * * Requires pretty_checkradio.js * * Example DOM: * div.pretty-checkradio * span.pretty-checkradio-layer * input.is-input * * conf Object * conf.$el $ DOM Object */
@import “../sadui”;
.pretty-checkradio {
@include inline-block; @include user-select(none); position: relative;//*crosses fingers* cursor: pointer; background: $colorInactive; > * { position: absolute; top: 0; right: 0; left: 0; width: 100%; height: 100%; cursor: pointer; } // assume input type = radio|checkbox input[type="radio"], input[type="checkbox"] { z-index: $zTemplate + 2; @include opacity(0); background: $colorInactive;// for some reason gives layout } // This will be visible when input is checked to allow for smooth transitions .pretty-checkradio-layer { z-index: $zTemplate + 1; background: $colorActive; display: none; } &.is-selected .pretty-checkradio-layer { background: $colorActive; display: block; } &.is-disabled .pretty-checkradio-layer { background: rgba($colorInactive, 0.5); display: block; }
}