Archetype/app/less/archetype.less

.archetypeEditor {
    width: 98%;
}

.archetypeEditor fieldset{
    border: 1px solid #dddddd;
    padding: 0;
    margin-bottom: 5px;
    background-color: #f1f1f1;
    clear: both;
    display: inline-block;
    width: 100%;
}

.archetypeEditor .archetypeFieldsetLabel {
    padding: 8px 25px 8px 3px;
    float: left;
    width: 98%;

    span {
        font-weight: bold;
    }

    &:hover {
        cursor: pointer;

        label span {
            text-decoration: underline;
        }
    }

    .caret {
        float:left;
        margin: 8px 1px 0 7px;
        &.caret-right {
            border-bottom: 4px solid transparent;
            border-top: 4px solid transparent;
            border-left: 4px solid #000000;
            content: "";
            margin-top: 6px;
        }
    }

    label{
        float: left;
        width: 80%;
        margin-bottom: 0;
        margin-left: 5px;
        padding: 0;
        span {
            display: inline-block;
        }
    }
}

.archetypeEditor .archetypeCollapser{
    clear: both;
    height: 100%;
    margin-top: 10px;
    padding-top: 12px;
    background-color: #fff;
    border-top: 1px solid silver;
    border-radius: 0 0 0 5px;
}

.archetypeEditor .multiPropertyTextbox{
    margin-bottom: 3px;
}

.archetypeEditor ul{
    list-style: none;
    margin-left: 0;
}

.archetypeEditor, .archetypeConfig{
    .archetypeEditorControls{
        float: right;
        i {
            cursor: pointer;
            &.handle {
                cursor: move;
            }
        }
    }
}

.archetypeEditor form {
    margin-left:20px;

    .control-label {
        padding-top: 0 !important;
    }
}

.archetypeEditor .archetypeProperty{
    clear: both;
    overflow: hidden;
    margin-top: 3px;
}

.archetypeEditor .archetypeDeveloperModel
{
    font-family: monospace;
    width: 98%;
    min-height: 100px;
    margin-bottom: 10px;
    border: 1px solid red;
}

.archetypeEditor .archetypeFieldsetToolbar {
    margin-bottom: 10px;
    overflow: hidden;

    li {
        float: left;
        padding: 2px 4px;
        margin-right: 10px;
        border: 1px solid #ddd;
        cursor: pointer;
    }
}

.archetypeEditor .archetypeFieldsetHeaderText{
    clear:both;
    margin-bottom: 3px;
    font-size: 12px;
}

.archetypeEditor .archetypeFieldsetFooterText{
    clear:both;
    margin-bottom: 3px;
    font-size: 12px;
}

.archetypeEditor .archetypeFieldsetHelpText{
    clear:both;
    margin-bottom: 3px;
    font-size: 12px;
}

.archetypeConfig {
    margin-bottom: 20px;
}

.archetypeConfig ul{
    list-style: none;
}

.archetypeConfig li{
    background-color: #fff;
}

.archetypeConfig label{
    width: 120px;
}

.archetypeConfig .archetypeFieldsetWrapper{
    border: 1px solid #ccc;
    padding: 10px;
    margin-bottom: 10px;
}

.archetypeConfig .archetypeFieldsetOption{
    margin-bottom: 15px;
    input[type=text]{
        max-width: 300px;
    }
}

.archetypeConfig .archetypeDeveloperModel {
    font-family: monospace;
    width: 88%;
    margin: 5px 10px 10px;
    height: 130px;
}

.archetypeConfig .archetypePropertiesWrapper {
    border: 1px solid #ddd;
    padding: 8px;
    margin: -40px 10px 10px 140px;
    max-width: 475px;

    ul {
        padding: 0;
        margin: 0;
    }

    li {
        padding: 10px;
        margin-bottom: 10px;
        background-color: #eee;

        input[type=text] {
            max-width: 190px;
            width: auto;
        }

        select {
            max-width: 160px;
        }
    }

    li:last-child {
        margin-bottom: 0;
    }
}

.archetypeConfig .archetypeFieldsets {
    margin-left: 0;
}

.archetypeConfig .archetypeFieldsetTitle {
    cursor: pointer;
    overflow: hidden;
}

.archetypeConfig .archetypeOptions label{
    width: 400px;
}

.archetypeConfig .archetypeAdvancedOptions {
    margin-top: 15px;
    div {
        margin-bottom: 10px;
    }
    label {
        width: 400px;
    }
}

.archetypeConfig .archetypeMaxFieldsets{
    border: 1px solid #ddd;
    width: 40px;
    text-align: right;
}

.archetypeConfig .archetypePropertyTitle {
    cursor: pointer;
    overflow: hidden;
}

.archetypeConfig .archetypePropertyCollapser{
    margin-top: 10px;
    div {
        margin-bottom: 10px;
    }
}

.archetypeEditor .archetypeFieldsetError{
    border: 1px solid #b94a48;
}

.archetypeEditor .archetypePropertyError{
    margin-bottom: 5px;
    padding-top: 3px;
    padding-bottom: 3px;

    label {

        span {
            color: #b94a48;
            font-weight: bold;
        }
    }
}

.ui-sortable-placeholder {
    visibility: visible !important;
    background-color:   #d0e7f1 !important;
}

.archetypeConfig .archetypeFieldsetCollapser {
    margin-top: 15px;
}

.archetypeConfig .fieldsetIcon {
    margin-right: 10px;
}

.archetypeEditor .show-validation.ng-invalid .control-group.error .control-label {
    span {
        color: #343434;
    }
}