SEARCH-ENTER (component )

src/app/shared/components/search-enter/templates

Demo Section

Each variation will be presented in the following section.

Default Overlay Suche Deutsch

Datenschutzhinweis mit Link

Default Overlay Suche Englisch

Data security information to Gooogle

Stacknavigation

Datenschutzhinweis mit Link

Stacknavigation

Data security information to Google

Suchfeld (DE)

Datenschutzhinweis mit Link

Suchfeld (EN)

Data security information to Google

Readme

searchEnter (component)

Description

This blueprint is based on the blueprint of Veams.

Requirements

  • Veams#5.0.0

Installation

Installation with Veams from local machine

veams install bp absolute/filepath/to/search-enter

Fields

search-enter.hbs

Settings

Parameter Type Default Description
settings.searchEnterClasses String '' Modifier classes for component
settings.searchEnterContextClass String 'default' Context class of component
settings.searchEnterContextClass String 'searchfield' Context class of component for view in a FS own Section
settings.searchEnterClass String 'is-lng-en' Englisch Version of the Search
settings.showSearchOption Boolean 'true' Include the Veams Modul serach-Option before the search field
settings.autocompleteOff Boolean 'true' Include the input attribute to not show recommended Text (autocomplete=“off”)
settings.showDataInfo Boolean 'true' Include a information-text or -link under the search-input field

Content

Parameter Type Description
content.searchEnterField String Please add a description!
content.datasecurityOnlyText String Infotext under the search input-Field!
content.datasecurityOnlyText String Linktext under the search input-Field!
content.placeholder String Text that appear in the input-Field
content.searchurl String URL für das Suchfeld
content.searchtitle String Titel der Suche

SASS

Variables

There are multiple variables which you can change:

Variable Value Description
$search-enter-my-custom-var 0px Please add a description!

Modifier Classes

There are modifier classes you can add to c-search-enter:

Modifier Description
is-modifier Please add a description!

Templates

search-enter.hbs

<div class="c-search-enter{{#if settings.searchEnterContextClass}}--{{settings.searchEnterContextClass}}{{else}}--default{{/if}}{{#if settings.searchEnterClasses}} {{settings.searchEnterClasses}}{{/if}}"
     data-css="c-search-enter">
     <form class="search-enter__form" action="{{#if content.searchurl}}{{content.searchurl}}{{/if}}" >
		{{#if settings.showSearchOption}}
		{{#with @root.search-option.variations.default}}
			{{> search-option }}
		{{/with}}
		{{/if}}
		<div class="search-enter__input-group-wrapper">
			<input name="q" data-js-item="search-enter-field" type="text" {{#if settings.autocompleteOff}}autocomplete="off"{{/if}} {{#if content.placeholder}} placeholder="{{content.placeholder}}"{{/if}} aria-label="{{content.placeholder}}" class="search-enter__input-text"/>
			<div class="search-enter__button-area">
				<button type="submit"  {{#if content.searchtitle}} title="{{content.searchtitle}}" aria-label="{{content.searchtitle}}"{{/if}}
					class="search-enter__button">
				</button>
			</div>
		</div>
		{{#if settings.showDataInfo}}
		<div class="search-enter__dsgvo-area">
			{{#if content.datasecurityOnlyText}}<span class="search-enter__dsgvo-text">{{content.datasecurityOnlyText}}</span>{{/if}}
			{{#if content.datasecurity}}<p><a href="#" class="search-enter__dsgvo-link" target="_blank">{{content.datasecurity}}</a></p>{{/if}}
		</div>
		{{/if}}
     </form>
</div>

Data File

search-enter.hjson

{
    "variations": {
        "default": {
            "docs": {
                "variationName": "Default Overlay Suche Deutsch"
            },
            "settings": {
                "searchEnterContextClass": "overlay",
                "searchEnterClasses": "",
                "searchEnterJsOptions": {},
				"showSearchOption": true,
				"showDataInfo": true
            },
            "content": {
                "searchurl": "#",
                "placeholder": "Suchbegriff eingeben",
				"datasecurity": "Datenschutzhinweis mit Link",
				"searchtitle": "Suchen"

            }
		},
		"defaulten": {
            "docs": {
                "variationName": "Default Overlay Suche Englisch"
            },
            "settings": {
                "searchEnterContextClass": "overlay",
                "searchEnterClasses": "is-lng-en",
                "searchEnterJsOptions": {},
				"showSearchOption": true,
				"showDataInfo": true
            },
            "content": {
                "searchurl": "#",
                "placeholder": "Enter search item",
				"datasecurity": "Data security information to Gooogle",
				"searchtitle": "Suchen"
            }
		},
		"stacknav": {
            "docs": {
                "variationName": "Stacknavigation"
            },
            "settings": {
                "searchEnterContextClass": "stacknav",
                "searchEnterClasses": "",
                "searchEnterJsOptions": {},
				"showSearchOption": true,
				"showDataInfo": true
            },
            "content": {
                "searchurl": "#",
                "placeholder": "Suchbegriff eingeben",
                "datasecurity": "Datenschutzhinweis mit Link",
				"searchtitle": "Suchen"
            }
        },
		"stacknaven": {
            "docs": {
                "variationName": "Stacknavigation"
            },
            "settings": {
                "searchEnterContextClass": "stacknav",
                "searchEnterClasses": "is-lng-en",
                "searchEnterJsOptions": {},
				"showSearchOption": true,
				"showDataInfo": true
            },
            "content": {
                "searchurl": "#",
                "placeholder": "Enter search item",
                "datasecurity": "Data security information to Google"

            }
        },
		"searchfield": {
            "docs": {
                "variationName": "Suchfeld (DE)"
            },
            "settings": {
                "searchEnterContextClass": "searchfield",
                "searchEnterClasses": "",
                "searchEnterJsOptions": {},
				"showSearchOption": false,
				"autocompleteOff": true,
				"showDataInfo": true
            },
            "content": {
                "searchurl": "#",
                "placeholder": "Suchbegriff eingeben",
                "datasecurityOnlyText": "Datenschutzhinweis mit Link",
				"searchtitle": "Suchen"
            }
        },
		"searchfielden": {
            "docs": {
                "variationName": "Suchfeld (EN)"
            },
            "settings": {
                "searchEnterContextClass": "searchfield",
                "searchEnterClasses": "is-lng-en",
                "searchEnterJsOptions": {},
				"showSearchOption": false,
				"autocompleteOff": true,
				"showDataInfo": true
            },
            "content": {
                "searchurl": "#",
                "placeholder": "Enter search item",
                "datasecurityOnlyText": "Data security information to Google",
				"searchtitle": "Search"
            }
        }
    }
}

Styles

search-enter.scss

/* ===================================================
component: search-enter
=================================================== */

/* ---------------------------------------------------
Global Styles
--------------------------------------------------- */
[data-css="c-search-enter"] {

	.search-enter__form {
		margin: 0;
		padding: 0;
	}

	.search-enter__input-group-wrapper {
		position: relative;
		display: flex;
		flex-wrap: nowrap;
		align-items: stretch;
		width: 100%;
	}

	.search-enter__input-text {
		font-size: 1.5rem;
		font-family: $font-regular;
		text-indent: 10px;
		height: 45px;
		margin: 0;
		border: 1px solid $color-gray-light;
		color: $color-dark;
		width: 100%;

		@include bp($bp-tablet-p) {
			font-size: 2.2rem;
			text-indent: 15px;
			height: 80px;
			padding: 15px;
		}

		&:focus {
			outline: none;
		}
	}

	.search-enter__button {

		font-size: 1.5rem;
		font-family: $font-regular;
		background-color: $color-green;
		color: $color-white;
		height: 45px;
		padding: 0 10px;
		margin-left: -2px;
		cursor: pointer;
		white-space: nowrap;
		border: 1px solid $color-green;
		transition: color $animation-duration-std $animation-easing-std, background-color $animation-duration-std $animation-easing-std, border $animation-duration-std $animation-easing-std;

		@include bp($bp-tablet-p) {
			font-size: 2.2rem;
			height: 80px;
			padding: 25px;

		}

		&:focus {
			outline: none;
		}

		&:hover,
		&.a11y-focus-key {
			background-color: $color-white;
			border: 1px solid $color-green;
			color: $color-green;

			&::before {
				@include sprites-icon-search-green100();
			}
		}

		&::before {
			@include pseudo();
			@include sprites-icon-search-white();

			position: relative;
			display: inline-block;
			vertical-align: middle;
			margin-top: -2px;
			width: 21px;
			height: 21px;

			@include bp($bp-mobile-p) {
				margin-right: 10px;
			}
		}

		&::after {
			@include bp($bp-mobile-p) {
				content: "Suchen";
				font-family: $font-bold;
			}
			position: relative;
			display: inline-block;
		}
	}

	&.is-lng-en {
		.search-enter__button {
			&::after {
				@include bp($bp-mobile-p) {
					content: "Search";
				}
			}
		}
	}

	.search-enter__dsgvo-area {

		padding-top: 1rem;



		.search-enter__dsgvo-link, .search-enter__dsgvo-text {
			font-family: $font-bold;
			color: $color-green-hc-dark;
			font-size: 1.2rem;
			letter-spacing: .5px;
			line-height: (16/12);
			text-decoration: none;
		}
	}

}

/* ---------------------------------------------------
Context: Default
--------------------------------------------------- */
.c-search-enter--overlay {

}

.c-search-enter--searchfield {
	.search-enter__input-text {
		background: $color-light;
		border: 1px solid $color-light;
		color: $color-dark;

		@include bp($bp-tablet-p) {
			font-size: 1.5rem;
			text-indent: 10px;
			height: 45px;
			padding: 0px;
		}

		&:focus {
			border: 1px solid $color-gray-light;
			outline: none;
			background: $color-light;
		}
	}
	.search-enter__button {
		@include bp($bp-tablet-p) {
			font-size: 1.5rem;
			height: 45px;
			padding: 0 10px;

			&::before {
				@include bp($bp-mobile-p) {
					margin-right: 5px;
				}
			}
		}
	}
}

HTML Output

Default Overlay Suche Deutsch

<div class="c-search-enter--overlay" data-css="c-search-enter">
	<form class="search-enter__form" action="#">
		<div class="c-search-option--default" data-css="c-search-option" data-js-module="search-option" data-js-options='{}'>
			<div class="form__radio" data-css="c-form">
				<div class="form__radio-wrapper">
					<ul class="form__radio-list">
						<li class="form__radio-item">
							<input id="gsearch-1" name="gsearch-t" type="radio" value="gsearch-1" checked="checked" class="form__radio-input" />
							<label role="button" for="gsearch-1" class="form__radio-label">
								in LMU.de
							</label>
						</li>
						<li class="form__radio-item">
							<input id="gsearch-2" name="gsearch-t" type="radio" value="gsearch-2" class="form__radio-input" />
							<label role="button" for="gsearch-2" class="form__radio-label">
								in allen LMU-Webseiten
							</label>
						</li>
					</ul>
				</div>
			</div>
		</div>
		<div class="search-enter__input-group-wrapper">
			<input name="q" data-js-item="search-enter-field" type="text" placeholder="Suchbegriff eingeben" aria-label="Suchbegriff eingeben" class="search-enter__input-text" />
			<div class="search-enter__button-area">
				<button type="submit" title="Suchen" aria-label="Suchen" class="search-enter__button">
				</button>
			</div>
		</div>
		<div class="search-enter__dsgvo-area">
			<p><a href="#" class="search-enter__dsgvo-link" target="_blank">Datenschutzhinweis mit Link</a></p>
		</div>
	</form>
</div>

Default Overlay Suche Englisch

<div class="c-search-enter--overlay is-lng-en" data-css="c-search-enter">
	<form class="search-enter__form" action="#">
		<div class="c-search-option--default" data-css="c-search-option" data-js-module="search-option" data-js-options='{}'>
			<div class="form__radio" data-css="c-form">
				<div class="form__radio-wrapper">
					<ul class="form__radio-list">
						<li class="form__radio-item">
							<input id="gsearch-1" name="gsearch-t" type="radio" value="gsearch-1" checked="checked" class="form__radio-input" />
							<label role="button" for="gsearch-1" class="form__radio-label">
								in LMU.de
							</label>
						</li>
						<li class="form__radio-item">
							<input id="gsearch-2" name="gsearch-t" type="radio" value="gsearch-2" class="form__radio-input" />
							<label role="button" for="gsearch-2" class="form__radio-label">
								in allen LMU-Webseiten
							</label>
						</li>
					</ul>
				</div>
			</div>
		</div>
		<div class="search-enter__input-group-wrapper">
			<input name="q" data-js-item="search-enter-field" type="text" placeholder="Enter search item" aria-label="Enter search item" class="search-enter__input-text" />
			<div class="search-enter__button-area">
				<button type="submit" title="Suchen" aria-label="Suchen" class="search-enter__button">
				</button>
			</div>
		</div>
		<div class="search-enter__dsgvo-area">
			<p><a href="#" class="search-enter__dsgvo-link" target="_blank">Data security information to Gooogle</a></p>
		</div>
	</form>
</div>

Stacknavigation

<div class="c-search-enter--stacknav" data-css="c-search-enter">
	<form class="search-enter__form" action="#">
		<div class="c-search-option--default" data-css="c-search-option" data-js-module="search-option" data-js-options='{}'>
			<div class="form__radio" data-css="c-form">
				<div class="form__radio-wrapper">
					<ul class="form__radio-list">
						<li class="form__radio-item">
							<input id="gsearch-1" name="gsearch-t" type="radio" value="gsearch-1" checked="checked" class="form__radio-input" />
							<label role="button" for="gsearch-1" class="form__radio-label">
								in LMU.de
							</label>
						</li>
						<li class="form__radio-item">
							<input id="gsearch-2" name="gsearch-t" type="radio" value="gsearch-2" class="form__radio-input" />
							<label role="button" for="gsearch-2" class="form__radio-label">
								in allen LMU-Webseiten
							</label>
						</li>
					</ul>
				</div>
			</div>
		</div>
		<div class="search-enter__input-group-wrapper">
			<input name="q" data-js-item="search-enter-field" type="text" placeholder="Suchbegriff eingeben" aria-label="Suchbegriff eingeben" class="search-enter__input-text" />
			<div class="search-enter__button-area">
				<button type="submit" title="Suchen" aria-label="Suchen" class="search-enter__button">
				</button>
			</div>
		</div>
		<div class="search-enter__dsgvo-area">
			<p><a href="#" class="search-enter__dsgvo-link" target="_blank">Datenschutzhinweis mit Link</a></p>
		</div>
	</form>
</div>

Stacknavigation

<div class="c-search-enter--stacknav is-lng-en" data-css="c-search-enter">
	<form class="search-enter__form" action="#">
		<div class="c-search-option--default" data-css="c-search-option" data-js-module="search-option" data-js-options='{}'>
			<div class="form__radio" data-css="c-form">
				<div class="form__radio-wrapper">
					<ul class="form__radio-list">
						<li class="form__radio-item">
							<input id="gsearch-1" name="gsearch-t" type="radio" value="gsearch-1" checked="checked" class="form__radio-input" />
							<label role="button" for="gsearch-1" class="form__radio-label">
								in LMU.de
							</label>
						</li>
						<li class="form__radio-item">
							<input id="gsearch-2" name="gsearch-t" type="radio" value="gsearch-2" class="form__radio-input" />
							<label role="button" for="gsearch-2" class="form__radio-label">
								in allen LMU-Webseiten
							</label>
						</li>
					</ul>
				</div>
			</div>
		</div>
		<div class="search-enter__input-group-wrapper">
			<input name="q" data-js-item="search-enter-field" type="text" placeholder="Enter search item" aria-label="Enter search item" class="search-enter__input-text" />
			<div class="search-enter__button-area">
				<button type="submit" class="search-enter__button">
				</button>
			</div>
		</div>
		<div class="search-enter__dsgvo-area">
			<p><a href="#" class="search-enter__dsgvo-link" target="_blank">Data security information to Google</a></p>
		</div>
	</form>
</div>

Suchfeld (DE)

<div class="c-search-enter--searchfield" data-css="c-search-enter">
	<form class="search-enter__form" action="#">
		<div class="search-enter__input-group-wrapper">
			<input name="q" data-js-item="search-enter-field" type="text" autocomplete="off" placeholder="Suchbegriff eingeben" aria-label="Suchbegriff eingeben" class="search-enter__input-text" />
			<div class="search-enter__button-area">
				<button type="submit" title="Suchen" aria-label="Suchen" class="search-enter__button">
				</button>
			</div>
		</div>
		<div class="search-enter__dsgvo-area">
			<span class="search-enter__dsgvo-text">Datenschutzhinweis mit Link</span>
		</div>
	</form>
</div>

Suchfeld (EN)

<div class="c-search-enter--searchfield is-lng-en" data-css="c-search-enter">
	<form class="search-enter__form" action="#">
		<div class="search-enter__input-group-wrapper">
			<input name="q" data-js-item="search-enter-field" type="text" autocomplete="off" placeholder="Enter search item" aria-label="Enter search item" class="search-enter__input-text" />
			<div class="search-enter__button-area">
				<button type="submit" title="Search" aria-label="Search" class="search-enter__button">
				</button>
			</div>
		</div>
		<div class="search-enter__dsgvo-area">
			<span class="search-enter__dsgvo-text">Data security information to Google</span>
		</div>
	</form>
</div>

Wonach suchst du?

Datenschutzhinweis mit Link