Vechtsport Online Components for Magento 2

Input: Search 

<div class="input input--search">
    <span class="form-check" aria-label="form-check-field-id">
        <svg class="icon brief-info__icon" role="img">
            <title>USP Check</title>
            <use xlink:href="/images/icons-sprite.svg#usp-check"></use>
        </svg>

    </span>
    <label class="
            label
            
        " for="field-id">
        Label text
    </label>
    <input class="input__field " id="field-id" name="field-name" type="text" placeholder="Zoeken">
</div>
 
<div class="input {{ class }}" {{{ attributes }}}>
    <span class="form-check"
            aria-label="form-check-{{ field.id }}"
    >
        {{ render '@icon' icon }}
    </span>
    <label
        class="
            label
            {{#if label.hidden }}
                label--hidden
            {{/if}}
            {{ label.class }}
        "
        for="{{ field.id }}"
        {{{ label.attributes }}}
    >
        {{ label.text }}
    </label>
    <input
        class="input__field {{ field.class }}"
        id="{{ field.id }}"
        name="{{ field.name }}"
        type="{{ field.type }}"
        placeholder="{{ field.placeholder }}"
        {{{ field.attributes }}}
    >
</div>
 
{
  "attributes": "",
  "class": "input--search",
  "icon": {
    "id": "usp-check",
    "title": "USP Check",
    "class": "brief-info__icon"
  },
  "label": {
    "attributes": "",
    "text": "Label text",
    "hidden": false
  },
  "field": {
    "attributes": "",
    "class": "",
    "id": "field-id",
    "name": "field-name",
    "placeholder": "Zoeken",
    "type": "text"
  }
}
  • Content: 
    $input__field-padding                : 0 $spacer--medium !default;
$input__field-padding--textarea      : $spacer--medium !default;
$input__field-spacing                : 40px !default;
$input__field-border                 : 1px solid $form-elements-border-color !default;
$input__field-border-radius          : $form-elements-radius !default;
$input__field-border-radius--textarea: $form-elements-radius--small !default;
$input__field-line-height--textarea  : $font-line-height !default;
$input__margin-bottom                : $spacer--medium !default;
$input__placeholder-color            : #3a3a3a !default;
$input__label-margin-right           : $spacer--medium !default;
$input__min-height--textarea         : 100px !default;
$input__date-background-image        : url("../images/icons/calendar.svg") !default;
$input__date-background-size         : 25px 25px !default;
$input__date-background-repeat       : no-repeat !default;
$input__date-background-position     : center center !default;
$input__date-background-color--hover : $color-primary !default;
$input__date-border-color--hover     : $input__date-background-color--hover !default;
$input__date-margin                  : 0 0 0 $spacer !default;

.input {
    margin-bottom: $input__margin-bottom;
    position: relative;
    &--inline {
        display: flex;
        flex-flow: row nowrap;
        align-items: center;
        .input__label {
            @extend .label--inline;
            margin-right: $input__label-margin-right;
        }
    }

    &__field {
        width: 100%;
        height: $input__field-spacing;
        line-height: normal;
        padding: $input__field-padding;
        border: $input__field-border;
        border-radius: $input__field-border-radius;
        transition: $transition-base;

        &::placeholder {
            color: $input__placeholder-color;
        }

        &:focus {
            @include focus-input();
        }

        &--textarea {
            display: block;
            border-radius: $input__field-border-radius--textarea;
            min-width: 100%;
            max-width: 100%;
            min-height: $input__min-height--textarea;
            padding: $input__field-padding--textarea;
            line-height: $input__field-line-height--textarea;
        }
    }
}
.form-check {
    position: absolute;
    width: $spacer--15;
    height: $spacer--15;
    background: #0bcfc3;
    right: 1.6em;
    top: 2.2em;
    display: flex;
    justify-content: center;
    z-index: 9;
    border-radius: 5px;
    opacity: 0;
    & svg.icon {
        align-self: center;
        width: 15px;
        fill: #fff;
    }
}
  • URL: /components/raw/input/_input.scss
  • Filesystem Path: build/components/02-elements/form/input/_input.scss
  • Size: 2.6 KB

There are no notes for this item.