Swegon Component Library

Search: Default 

<div class="form-item ">
    <label for="search-field" class="form-item__label">
        Search field
    </label>
    <div class="search__field">
        <input id="search-field" type="text" class="search__input " name="" placeholder="Placeholder">
        <button class="search__submit" type="submit"></button>
    </div>
</div>
 
<div class="form-item {{getmodifiers modifiers "form-item"}}">
    {{#if label}}
        <label for="{{id}}" class="form-item__label">
            {{label}}
            {{#if required}}
            *
            {{/if}}
        </label>
    {{/if}}
    <div class="search__field">
        <input id="{{id}}" type="{{type}}" class="search__input {{ additionalClasses }}" {{{ getattributes attr }}} name="{{name}}" placeholder="{{placeholder}}" {{#if required}}required{{/if}}{{#if disabled}} disabled{{/if}}{{#if ariainvalid}} aria-invalid="true"{{/if}}{{#if autocomplete}} autocomplete="{{ autocomplete }}"{{/if}}>
        <button class="search__submit" type="submit"></button>
    </div>
</div>
 
{
  "label": "Search field",
  "placeholder": "Placeholder",
  "id": "search-field",
  "type": "text",
  "required": false
}
  • Content: 
    $height-big: size(8);
$height-small: size(6);

.search__input {
    border: $color-gray-2 1px solid;
    padding: size(2) size(3);
    line-height: size(3);
    height: $height-small;
    display: flex;
    flex: 1;
    font-size: size(2.5);
    border-radius: size(.5) 0 0 size(.5);
    border-right: 0;
    background: $color-white;
    width: 100%;

    @include placeholder {
        color: $color-gray-3;
        font-size: size(2.5);
        opacity: 1;
    }

    &::-webkit-input-placeholder {
        transform: translateY(0);
        -webkit-transform: translateY(2px);
    }

    &::-webkit-search-decoration,
    &::-webkit-search-cancel-button,
    &::-webkit-search-results-button,
    &::-webkit-search-results-decoration {
        display: none;
    }
}

.search__field {
    display: flex;
}

// buttons
.search__submit {
    width: $height-small;
    height: $height-small;
    min-width: auto;
}

.search__submit {
    background: url(../../search-field/img/icon-search.svg) no-repeat center;
    border-radius: 0 size(.5) size(.5) 0;
    background-size: calc(100% - #{size(2)});
    background-color: $color-green-dark;

    @include color-theme {
        background-color: $arg-theme-color;
    }
}
  • URL: /components/raw/search/search.scss
  • Filesystem Path: src/components/form/search/search.scss
  • Size: 1.2 KB

No notes defined.