rahmanda/ayu

// =====================================================
// Field
// =====================================================
// "We style it because the built-in is suck"

$field-prefix: "field";
$theme-field-enable: false !default;

@if ($theme-field-enable == true) {

.#{$field-prefix} {
    font-family: $theme-font-family;

    margin-bottom: map-get($theme-font-size, medium);

    display: block;
}

.#{$field-prefix}__label {
    font-size: map-get($theme-font-size, medium);
    text-align: left;

    color: $theme-color-text;

    margin-bottom: 2px;

    display: block;
}

.#{$field-prefix}__input,
.#{$field-prefix}__select {
    @include border($theme-border-size,
                    $theme-border-style,
                    $theme-border-color,
                    $theme-border-radius);

    font-size: map-get($theme-font-size, medium);
    font-family: $theme-font-family;

    color: $theme-color-text;
    background: $theme-color-background;

    letter-spacing: $theme-letter-spacing;
    word-spacing: $theme-word-spacing;

    padding: map-get($theme-field-input-padding, medium);
    width: 100%;
    height: field-height(map-get($theme-font-size, medium),
                         $theme-border-size,
                         map-get($theme-field-input-padding, medium));
    box-sizing: border-box;

    transition: border .25s ease-out;

    display: block;

    &:active,
    &:focus {
        border-color: $theme-field-input-active-color;
        outline: none;
    }

    &--large {
        font-size: map-get($theme-font-size, large);
        padding: map-get($theme-field-input-padding, large);
        height: field-height(map-get($theme-font-size, large),
                             $theme-border-size,
                             map-get($theme-field-input-padding, large));
    }

    &--x-large {
        font-size: map-get($theme-font-size, x-large);
        padding: map-get($theme-field-input-padding, x-large);
        height: field-height(map-get($theme-font-size, x-large),
                             $theme-border-size,
                             map-get($theme-field-input-padding, x-large));
    }

    .is-error & {
        border-color: $theme-field-input-error-color;
    }
}

.#{$field-prefix}__select {
    // we must replace this svg because we have no permission to use it commercially
    background: $theme-color-background url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAYCAYAAAC8/X7cAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAN1wAADdcBQiibeAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAADQSURBVFiF1c+7ccMwFEXBZS0oUqGgzE2+WqzE9li2KOIrkncGAZDg7BIRF3w45/ICJ0XklNJt+b6dDJFTSjdYfr+eBPETzx8Ah0c8xPMEwGER/+JZAXA4xNN4XgA4DGI1ng0AuyNexlMAYDfEZjyFAN6OKIqnAsDbEMXxVAKYjqiKpwHANER1PI0AhiOa4ukAMAzRHE8ngG5EVzwDADQjuuMZBKAaMSSegQCKEcPiGQxgEzE0ngkAVhHD46cuIi4R8fl1rnv3NC0ickTkmX/cAeicgKu/i7a4AAAAAElFTkSuQmCC") no-repeat right 8px center;
    background-size: 12px 6px;
    appearance: none;
}

.#{$field-prefix}__input-group {
    position: relative;
    display: table;
    border-collapse: separate;
    width: 100%;

    & > .#{$field-prefix}__input,
    & > .#{$field-prefix}__select,
    & > .#{$field-prefix}__input-addon {
        display: table-cell;
    }

    & .#{$field-prefix}__input:not(:first-child):not(:last-child),
    & .#{$field-prefix}__select:not(:first-child):not(:last-child) {
        border-radius: 0;
    }

    & .#{$field-prefix}__input:first-child,
    & .#{$field-prefix}__select:first-child {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
    }

    & .#{$field-prefix}__input:last-child,
    & .#{$field-prefix}__select:last-child {
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
    }
}

.#{$field-prefix}__input-addon {
    @include border($theme-border-size,
                    $theme-border-style,
                    $theme-border-color,
                    $theme-border-radius);

    background : map-get($theme-color-button-normal, background);
    color      : map-get($theme-color-button-normal, foreground);

    line-height: 1;
    text-align: center;

    padding: map-get($theme-field-input-padding, medium);
    box-sizing: border-box;
    width: 1%;

    &:hover {
        cursor: pointer;
        background : darken(map-get($theme-color-button-normal, background), 5%);
    }

    &:first-child {
        border-right: 0;
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
    }

    &:last-child {
        border-left: 0;
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
    }

    &--large {
        font-size: map-get($theme-font-size, large);
        padding: map-get($theme-field-input-padding, large);
    }

    &--x-large {
        font-size: map-get($theme-font-size, x-large);
        padding: map-get($theme-field-input-padding, x-large);
    }
}

.#{$field-prefix}__error-message {
    font-size: map-get($theme-font-size, small);
    font-family: $theme-font-family;

    color: $theme-field-input-error-color;

    margin-top: 2px;
    margin-bottom: 0;

    display: none;

    .is-error & {
        display: block;
    }
}

}