cubesystems/releaf

select,
textarea,
input.text
{
    color: $color-text-normal;
    background-color: $color-background-lighter;
    border: 1px solid $color-border-normal;
    outline: none;
    font-weight: bold;

    &:hover
    {
        border: 1px solid $color-border-darker;
    }

    &:focus
    {
        background-color: $color-background-lightest;
        border: 1px solid $color-border-darkest;
    }

    .field &
    {
        width: 100%;
    }
}

select
{
    height: steps(3);
    padding: steps(0.5) 0 steps(0.5) steps(1);

    option
    {
        padding: 0 0 0 steps(1);
    }

}

textarea
{
    height:  steps(10);
    padding: steps(0.5) steps(1);
}

input.text
{
    height: steps(3);
    padding: 0 steps(1);
    -webkit-appearance: textfield;
}


.field
{
    padding: steps(0.5) 0;
    float: left;
    width: steps(36);
    position: relative;
    min-height: steps(7);
    margin-left: steps(2);

    &.has-error:not(.i18n),
    &.i18n.has-error .localization.has-error
    {
        select,
        textarea,
        input.text,
        .mceLayout
        {
             border: 1px solid $color-alert;
        }
    }

    &.type-boolean .value
    {
        padding-top: steps(3);

        label
        {
            margin-left: steps(1);
        }
    }

    &.type-associated-set
    {
        width: auto;
        margin-right: 0;

        .type-associated-set-item
        {
            float: left;
            width: steps(24);
        }
    }

    &.type-richtext
    {
        width: steps(74);
    }


    &.type-richtext,
    &.type-textarea
    {
        float: none;
        clear: both;
    }


    .label-wrap
    {
        padding: steps(0.5) 0;

        .description
        {
            @include font-size-smaller;
        }
    }

    .value
    {
        position: relative;

        .error-box
        {
            position: absolute;
            right:  steps(0.5);
            bottom: steps(-2);
            color: $color-alert;

            @include font-size-smaller;
            font-style: italic;
        }
    }

}


section.nested
{
    // :TODO: figure out a way to avoid having to re-specify explicit widths for nested fields
    .field
    {
        width: steps(33);

        &.type-richtext
        {
            width: steps(68);
        }
    }

    section.nested .field
    {
        width: steps(30);
        &.type-richtext
        {
            width: steps(62);
        }
    }
}



.ui-widget
{
    @include reset-font;
    @include pop-up-shadow;

    padding: 0;
    border: 0;
    width: auto;
    background-color: $color-background-lightest;

    button, select
    {
        @include reset-font;
        @include font-size-normal;
    }

    .ui-corner-all
    {
        border-radius: 0;
    }

    .ui-widget-header
    {
        @include section-header;

        .next, .previous
        {
            position: absolute;
        }
        .next
        {
            right: 0;
        }

        .previous
        {
            left: 0;
        }

        .ui-datepicker-title select
        {
            width: auto;
            margin: 0 2px;
        }
    }

    .ui-datepicker-calendar
    {
        border-collapse: collapse;

        td
        {
            border: 1px solid $color-border-normal;
            text-align: center;
            vertical-align: middle;
            padding: steps(0.5);

            a
            {
                display: inline;
                color: $color-text-darkest;
                border: 0;
                text-decoration: none;
                text-align: center;
                @include font-size-normal;
                font-weight: bold;
                background: 0;
                padding: 0;
            }

            &.ui-datepicker-current-day
            {
                background-color: $color-background-darker;
            }

            &:hover,
            &.ui-datepicker-current-day:hover
            {
                background-color: $color-highlight-normal;
                text-shadow: 0px -1px 1px $color-shadow-normal;

                a
                {
                    color: $color-background-lightest;
                }
            }

        }

    }

    thead
    {
        color: $color-text-lighter;
        background-color: $color-background-normal;
        border: 1px solid $color-border-light;

        th
        {
            @include font-size-smaller;
            text-transform: uppercase;
            padding: 0;
        }

    }

    .ui-timepicker-div
    {
        > dl
        {
            margin: steps(0.5) 0 0 0;
        }

        dt, dd
        {
            margin: 0 steps(0.5);
        }

        dt
        {
            display: inline-block;
            @include font-size-smaller;
            text-transform: uppercase;
        }

        dd
        {
            display: inline-block;
            @include font-size-larger;
        }

        .ui_tpicker_time
        {
            margin-right: steps(0.5);
            margin-left:  steps(0.5);
        }

    }

}