CommunityRuleFrontend/_sass/rulebox.scss

// rulebox module skeleton for loading

.rulebox:not([class*="rulebox-"]) {
    .editable:empty {
        background-color: $grey-color-light;
    }
    h1 {
        max-width: 45%;
    }

    p {
        min-height: 3em;
    }

    .rulebuilder_input {
        $padding: 10px;
        $height: 38px;
        $widths: 80px, 78px, 140px, 90px, 200px, 130px;

        $position: $padding;
        $bg-img: null;
        $bg-size: null;
        $bg-pos: null;

        @for $i from 1 through length($widths) {
            $bg-img: $bg-img linear-gradient(white $height, transparent 0)#{if($i != length($widths), ',', '')};
            $bg-size: $bg-size nth($widths, $i) $height#{if($i != length($widths), ',', '')};
            $bg-pos: $bg-pos $position $padding#{if($i != length($widths), ',', '')};

            $position: $position + nth($widths, $i) + $padding;
        }
        
        background-color: $grey-color-light;
        background-image: $bg-img;
        background-size: $bg-size;
        background-position: $bg-pos;
        background-repeat: no-repeat;
        height: $height + $padding * 2;
    }

    .rulebuilder_list {
        background-color: $grey-color-light;
        min-height: 9em;
        max-width: 90%;
    }
}

// Styles for the rulebox module

.rulebox {
    border: 1px solid $grey-color-light;
    padding: 20px;
    margin: 20px 0 30px 0;

    .prompt,
    .module-type-header {
        color: $grey-color-dark;
        font-family: $header-font-family;
        font-weight: bold;
    }

    .module-questions {
        color: $grey-color;
        font-size: .8em;
    }

    .module-type {
        margin-bottom: $spacing-unit/2;
    }

    .prompt,
    .delete-module,
    .rulebuilder_modules,
    .linkbox_input,
    .metadata_input {
        display: none;
    }

    .editable, input.editable { /* All editable fields */
        padding: 10px;
        min-height: 1.5em;
        border: none;
    }

    .editable[contenteditable="false"] { /* inactive editable fields */
        border: none;
    }
    
    // TODO: module display is set within the spreadsheet
    .rulebuilder_input .module .delete-module {
        display: none !important;
    }

    .rulebuilder {}
    .rulebuilder_input {
        overflow: hidden;
        margin: 0 0 $spacing-unit;
        text-align: left;
        min-height: 1.5em;
        .prompt {
            color: $text-color;
        }
        .module .module-info {
            display: none;
        }
    }
    .rulebuilder_list {}

    .rulebuilder_modules {
        .module .delete-module {
            display: none;
        }
    }

    .metadata_input,
    .metadata_display {
        border: 1px solid $grey-color-light;
        background-color: white;
        margin: $spacing-unit 0 15px 0;
        padding: 10px;
    }
    
    .metadata_display {
        border-radius: 6px;
        text-align: center;
    }

    .metadata_input {
        input {
            margin-bottom: $spacing-unit / 2;
        }
    }

    &.rulebox-preview {
        // this class is toggled by toggleEditMode() in rule-scrips.html
        // when preview/customize button is pressed
        
    }

    &.rulebox-edit {
        // this class is toggled by toggleEditMode() in rule-scrips.html
        // when preview/customize button is pressed
        .prompt,
        .delete-module,
        .rulebuilder_modules,
        .metadata_input {
            display: block;
        }

        .linkbox_input {
            display: inline;
        }
    
        .editable[contenteditable="true"] { /* active editable fields */
            border-bottom: 1px dashed $grey-color-dark;
        }

        .metadata_display {
            display: none;
        }

        .prompt .module {
            margin: 0;
            &:hover,
            &:active {
                border-color: inherit;
                cursor: default;
            }
        }

        .module:hover {
            cursor: grab;
            border-color: $grey-color-dark;
            .module-logo {
                cursor: pointer;
            }
        }
        .module:active {
            cursor: grabbing;
            border-color: $brand-yellow;
        }

        .rulebuilder_input .module .delete-module {
            display: inline !important;
        }

        .module.module-custom {
            input {
                border-width: 0 0 1px 0;
                border-bottom: 1px dashed $grey-color-dark;
                font-family: inherit;
                font-size: inherit;
                padding: 5px;
            }
        }

        .rulebuilder {}
        .rulebuilder_input {
            &.drag-target {
                background-color: $brand-yellow;
                border-style: solid;
            }
            border: 4px dashed $brand-yellow;
            color: $text-color;
            padding: 10px 10px 10px 10px;
        }
    }
}