roll20-character-sheets/Firefly/dropdowns-repeat.less

/**
CSS only dropdowns
based off of http://jsfiddle.net/A664f/4/
 */

.makeDropdownRepeat(@rpt, @mark, @str, @total, @height:23px, @incr: 1) {

    .indexToVal(@i) {
        @dice-value: (@i + @incr) * 2;
    }

    .sheet-dropdown {

        .sheet-drop-@{str} {
            display: inline-block;
            vertical-align: middle;
            text-align: left;
            .sheetDropValuesHide(@i) when (@i > 0 ) {
                .sheetDropValuesHide((@i - 1));
                .sheet-value-@{i} {
                    display: none;
                }
            }
            .sheetDropValuesHide(@total);

        }

        input[name="@{rpt}"],
        input[name="@{rpt}"] + span,
        input[name="@{rpt}"] + span + label {
            display: none;
        }

        input[name="@{rpt}"],
        input[name="@{rpt}"] + span,
        input[name="@{rpt}"] + span + label {
            z-index: 1;
        }

        .sheet-drop-@{str}:hover {
            position: absolute;
            width: 80px;
            z-index: 1;
            background-color: #a1a8c2;
            padding: 5px;
            .hexagon();

            input[name="@{rpt}"] {
                display:inline;
                & + span,
                & + span + label {
                    display:inline;
                }
            }
            input[name="@{rpt}"]:checked {
                display:inline;
                & + span,
                & + span + label {
                    display:inline;
                }
            }
        }
        input[name="@{rpt}"]:checked,
        input[name="@{rpt}"]:checked + span,
        input[name="@{rpt}"]:checked + span + label {
            display: none;
        }

        .sheetDropValuesShow(@i) when (@i > 0 ) {
            .indexToVal(@i);
            .sheetDropValuesShow((@i - 1));
            .sheet-drop-@{str}:not(:hover) input[name="@{mark}"] ~ input[name="@{rpt}"][value="@{dice-value}"]:checked ~ .sheet-value-@{i} {
                display: block;
            }
        }
        .sheetDropValuesShow(@total);
    }
}