Contents

/* 
 * 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;
    }
    
}

Version data entries

1 entries across 1 versions & 1 rubygems

Version	Path
sadui-0.0.4	scss/sadui/components/_pretty_checkradio.scss