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

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

Content

Parameter Type Description
content.searchEnterField String Please add a description!

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}}" >
		{{#with @root.search-option.variations.default}}
			{{> search-option }}
		{{/with}}
		<div class="search-enter__input-group-wrapper">
			<input name="q" data-js-item="search-enter-field" type="text" {{#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 content.datasecurity}}
		<div class="search-enter__dsgvo-area">
			<p><a href="#" class="search-enter__dsgvo-link" target="_blank">{{content.datasecurity}}</a></p>
		</div>
		{{/if}}
     </form>
</div>

Data File

search-enter.hjson

{
    "variations": {
        "default": {
            "docs": {
                "variationName": "Default Overlay Suche Deutsch"
            },
            "settings": {
                "searchEnterContextClass": "overlay",
                "searchEnterClasses": "",
                "searchEnterJsOptions": {}
            },
            "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": {}
            },
            "content": {
                "searchurl": "#",
                "placeholder": "Enter search item",
				"datasecurity": "Data security information to Gooogle",
				"searchtitle": "Suchen"
            }
		},
		"stacknav": {
            "docs": {
                "variationName": "Stacknavigation"
            },
            "settings": {
                "searchEnterContextClass": "stacknav",
                "searchEnterClasses": "",
                "searchEnterJsOptions": {}
            },
            "content": {
                "searchurl": "#",
                "placeholder": "Suchbegriff eingeben",
                "datasecurity": "Datenschutzhinweis mit Link",
				"searchtitle": "Suchen"
            }
        },
		"stacknaven": {
            "docs": {
                "variationName": "Stacknavigation"
            },
            "settings": {
                "searchEnterContextClass": "stacknav",
                "searchEnterClasses": "is-lng-en",
                "searchEnterJsOptions": {}
            },
            "content": {
                "searchurl": "#",
                "placeholder": "Enter search item",
                "datasecurity": "Data security information to Google"

            }
        }
    }
}

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 {
			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 {

}

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>

Wonach suchst du?

Datenschutzhinweis mit Link