bauhausjs/backend/client/css/_form.less

A modular CMS for Node.js

fieldset {
    border: 1px solid #ddd;
    margin-top: 1em;

    legend {
        color: #aaaaaa;
    }
}


/*
Default input field

Some desciptive text

:focus      - Focused input
:hover      - Hovered input
.invalid    - Invalid input

Markup:
<input type="text" class="{$modifiers}" value="Some text"></input>

Styleguide 1.1
 */

input {
    line-height: 160%;
    padding: 0 0.5em;
    margin: 0;
    border: 0;
    font-size: 1em;
    border-bottom: 1px solid #EEE;
    outline: none;
    box-sizing: border-box;


    &:focus {
        background: #FFF583;
        border-color: #888888;
        text-decoration-line: underline;
        text-decoration-color: red;
    }

    &:hover {
        border-color: #888888;
    }

    &.invalid, &.ng-invalid {
        background: #FF7777;
    }
}

/*
Default text area

:focus   - Focused textarea
:hover   - Hovered textarea

Markup:
<textarea class="{$modifiers}"></textarea>

Styleguide 1.2
 */
textarea {
    padding: 8px;
    margin: 0;
    border: 0;
    line-height: 30px;
    font-size: 16px;
    background-image: -webkit-linear-gradient(left, white 0px, transparent 0px), -webkit-linear-gradient(right, white 0px, transparent 0px), -webkit-linear-gradient(white 29px, #eeeeee 29px, #eeeeee 30px, white 30px);
    background-size: 100% 100%, 100% 100%, 100% 30px;
    background-attachment: local;
    outline: none;
    box-sizing: border-box;
    min-height: 100px;

    &:focus, &:hover {
        background-image: -webkit-linear-gradient(left, #FFF583 0px, transparent 0px), -webkit-linear-gradient(right, #FFF583 0px, transparent 0px), -webkit-linear-gradient(#FFF583 29px, #aaaaaa 29px, #aaaaaa 30px, #FFF583 30px);
    }
}

/*
Select field

Styleguide 1.3
 */
select {
    line-height: 160%;
    padding: 0 0.5em;
    margin: 0;
    font-size: 1em; 
    outline: none;
    height: 36px;
}

.button {
    display: inline-block;
    background: #eeeeee;
    border: 1px solid #aaa;
    border-radius: 3px;
    text-decoration: none;
    padding: 0 0.5em;
    color: #555555;
    font-size: 16px;
    line-height: 34px;

    &:hover {
        background: #ffffff;
    }

    &.primary {
        color: #FFFFFF;
        background-color: #5cb85c;
        border-color: #4cae4c;
    }
}

.checkbox-group {
    padding: 0 0 0 8px;
    margin: 5px 0 20px 0;

    .checkbox-group-title {
        margin: 0 0 5px 0;
        font-size: 20px;

        &:first-letter {
            text-transform: uppercase;
        }
    }

    .checkbox-group-element {
        display: inline-block;
        margin: 0 20px 0 0;
        line-height: 36px;

        input[type="checkbox"] {

        }

        label {
            color: #888888;
            &.active {
                color: #000000;
            }
        }
    }
}