@import url(colors.scss);

// Mixin for producing Blueprint "inline" forms. Should be used with the blueprint-form mixin.
@mixin blueprint-inline-form {
    line-height: 3;
    p {
        margin-bottom: 0; } }

@mixin blueprint-form {
    @include blueprint-form-layout;
    @include blueprint-form-borders;
    @include blueprint-form-sizes; }

@mixin blueprint-form-layout {

    label {
        font-weight: bold; }

    fieldset {
        padding: 1.4em;
        margin: 0 0 1.5em 0; }

    legend {
        font-weight: bold;
        font-size: 1.2em; }

    input {
        &.text,
        &.title,
        &[type=email],
        &[type=text],
        &[type=password] {
            margin: 0.5em 0;
            background-color: white;
            padding: 5px; }

        &.title {
            font-size: 1.5em; }

        &[type=checkbox], &.checkbox, &[type=radio], &.radio {
            position: relative;
            top: 0.25em; } }

    textarea {
        margin: 0.5em 0;
        padding: 5px; }

    select {
        margin: 0.5em 0; } }

@mixin blueprint-form-sizes($input_width: 300px, $textarea_width: 390px, $textarea_height: 250px) {
    input {
        &.text, &.title, &[type=email], &[type=text], &[type=password] {
            width: $input_width; } }
    textarea {
        width: $textarea_width;
        height: $textarea_height; } }

@mixin blueprint-form-borders ($unfocused_border_color: #bbbbbb, $focus_border_color: #666666, $fieldset_border_color: #cccccc) {

    fieldset {
        border: 1px solid $fieldset_border_color; }

    input.text, input.title, input[type=email], input[type=text], input[type=password],
    textarea, select {
        border: 1px solid $unfocused_border_color;
        &:focus {
            border: 1px solid $focus_border_color; } } }
