<section class="gov-suggestions" id="suggestions">
<gov-flex gap="s" responsive="false" class="gov-suggestions__search gov-mobile-only">
<gov-form-search size="m" color="neutral">
<gov-form-input slot="input" size="m" placeholder="Hledejte v názvu, ..." aria-label="Hledejte v názvu, obsahu...">
<gov-icon slot="icon-start" type="components" name="search"></gov-icon>
</gov-form-input>
<gov-button color="neutral" size="m" type="base" slot="button-erase">
<gov-icon type="templates" name="x" slot="icon-start"></gov-icon>
</gov-button>
</gov-form-search>
<gov-button color="primary" size="m" type="base">
Zrušit
</gov-button>
</gov-flex>
<ul class="gov-suggestions__results gov-list--plain">
<li aria-labelledby="search-0">
<strong id="search-0">Naposledy hledané</strong>
<ul class="gov-list--plain">
<li>
<gov-flex gap="s" justify-content="space-between" align-items="center" responsive="false">
<gov-link href="#" size="m" truncate>
<gov-icon slot="icon-start" type="templates" name="clock-history" size="m" aria-hidden="true"></gov-icon>
cestovní pas
</gov-link>
<gov-button color="neutral" size="xs" type="base" aria-label="Odstranit výraz">
<gov-icon type="components" name="x-lg" slot="icon-start"></gov-icon>
</gov-button>
</gov-flex>
</li>
<li>
<gov-flex gap="s" justify-content="space-between" align-items="center" responsive="false">
<gov-link href="#" size="m" truncate>
<gov-icon slot="icon-start" type="templates" name="clock-history" size="m" aria-hidden="true"></gov-icon>
pas rychle
</gov-link>
<gov-button color="neutral" size="xs" type="base" aria-label="Odstranit výraz">
<gov-icon type="components" name="x-lg" slot="icon-start"></gov-icon>
</gov-button>
</gov-flex>
</li>
</ul>
</li>
<li aria-labelledby="search-1">
<strong id="search-1">Naposledy navštívené</strong>
<ul class="gov-list--plain">
<li>
<gov-flex gap="s" justify-content="space-between" align-items="center" responsive="false">
<gov-link href="#" size="m" truncate>
Vydání cestovního pasu
</gov-link>
</gov-flex>
</li>
<li>
<gov-flex gap="s" justify-content="space-between" align-items="center" responsive="false">
<gov-link href="#" size="m" truncate>
Evidence uchazeče - zprostředkování zaměstnání
</gov-link>
<gov-button color="secondary" size="xs" type="solid">
Vyřídit
</gov-button>
</gov-flex>
</li>
</ul>
</li>
<li aria-labelledby="search-2">
<strong id="search-2">Ostatní navštěvují</strong>
<ul class="gov-list--plain">
<li>
<gov-flex gap="s" justify-content="space-between" align-items="center" responsive="false">
<gov-link href="#" size="m" truncate>
Výpis z rejstříku trestů
</gov-link>
<gov-button color="secondary" size="xs" type="solid">
Vyřídit
</gov-button>
</gov-flex>
</li>
<li>
<gov-flex gap="s" justify-content="space-between" align-items="center" responsive="false">
<gov-link href="#" size="m" truncate>
Vydání občanského průkazu
</gov-link>
</gov-flex>
</li>
<li>
<gov-flex gap="s" justify-content="space-between" align-items="center" responsive="false">
<gov-link href="#" size="m" truncate>
Vydání řidičského průkazu
</gov-link>
<gov-button color="secondary" size="xs" type="solid">
Vyřídit
</gov-button>
</gov-flex>
</li>
<li>
<gov-flex gap="s" justify-content="space-between" align-items="center" responsive="false">
<gov-link href="#" size="m" truncate>
Vydání cestovního pasu
</gov-link>
</gov-flex>
</li>
<li>
<gov-flex gap="s" justify-content="space-between" align-items="center" responsive="false">
<gov-link href="#" size="m" truncate>
Ohlášení změny místa trvalého pobytu
</gov-link>
</gov-flex>
</li>
<li>
<gov-flex gap="s" justify-content="space-between" align-items="center" responsive="false">
<gov-link href="#" size="m" truncate>
Změna trvalého pobytu
</gov-link>
</gov-flex>
</li>
</ul>
</li>
<li aria-labelledby="search-3">
<strong id="search-3" class=" gov-mb--s">Zkuste tyto kategorie</strong>
<nav class="gov-chips" aria-label="Nabízené kategorie">
<ul class="gov-list--plain">
<li>
<gov-chip color="primary" type="outlined" size="s" href="#">
Doklady
</gov-chip>
</li>
<li>
<gov-chip color="primary" type="outlined" size="s" href="#">
Výpisy
</gov-chip>
</li>
<li>
<gov-chip color="primary" type="outlined" size="s" href="#">
Doprava
</gov-chip>
</li>
<li>
<gov-chip color="primary" type="outlined" size="s" href="#">
Daně a finance
</gov-chip>
</li>
<li>
<gov-chip color="primary" type="outlined" size="s" href="#">
Manželství a partnerství
</gov-chip>
</li>
</ul>
</nav>
</li>
</ul>
</section>
<section class="gov-suggestions" id="suggestions">
<gov-flex gap="s" responsive="false" class="gov-suggestions__search gov-mobile-only">
<gov-form-search size="m" color="neutral">
<gov-form-input slot="input" size="m" placeholder="{{ search-mobile/placeholder }}" aria-label="{{ search-mobile/aria-label }}">
<gov-icon slot="icon-start" type="components" name="search"></gov-icon>
</gov-form-input>
{{ render '@button' search-mobile/button-erase }}
</gov-form-search>
{{ render '@button' search-mobile/button-cancel }}
</gov-flex>
<ul class="gov-suggestions__results gov-list--plain">
{{#if empty}}
<li aria-label="{{ empty/aria-label }}">
<gov-flex direction="column" gap="xs" class="gov-suggestions__empty">
<gov-icon type="colored" name="empty-file" color="primary" size="3xl"></gov-icon>
<p class="gov-suggestions__empty-searched">{{{ empty/searched }}}</p>
<p>{{ empty/text }}</p>
</gov-flex>
</li>
{{/if}}
{{#each heading}}
<li aria-labelledby="search-{{@index}}">
<strong id="search-{{@index}}"{{#if classes}} class="{{#each classes}} {{ this }}{{/each}}"{{/if}}>{{ heading }}</strong>
{{#if last}}
<ul class="gov-list--plain">
{{#each last}}
<li>
<gov-flex gap="s" justify-content="space-between" align-items="center" responsive="false">
<gov-link href="#" size="m" truncate>
<gov-icon slot="icon-start" type="templates" name="clock-history" size="m" aria-hidden="true"></gov-icon>
{{{ text }}}
</gov-link>
{{ render '@button' button }}
</gov-flex>
</li>
{{/each}}
</ul>
{{/if}}
{{#if link}}
<ul class="gov-list--plain">
{{#each link}}
<li>
<gov-flex gap="s" justify-content="space-between" align-items="center" responsive="false">
<gov-link href="#" size="m" truncate>
{{{ name }}}
</gov-link>
{{#if button}}
{{ render '@button' button }}
{{/if}}
</gov-flex>
</li>
{{/each}}
</ul>
{{/if}}
{{#if chips}}
{{ render '@chips' chips }}
{{/if}}
</li>
{{/each}}
{{#if all-results}}
<li>
{{ render '@button' all-results/button }}
</li>
{{/if}}
</ul>
</section>
{
"search-mobile": {
"placeholder": "Hledejte v názvu, ...",
"aria-label": "Hledejte v názvu, obsahu...",
"button-erase": {
"slot": "button-erase",
"color": "neutral",
"type": "base",
"size": "m",
"icon-start": {
"slot": "icon-start",
"type": "templates",
"name": "x"
}
},
"button-cancel": {
"text": "Zrušit",
"color": "primary",
"type": "base",
"size": "m"
}
},
"heading": [
{
"heading": "Naposledy hledané",
"last": [
{
"text": "cestovní pas",
"button": {
"color": "neutral",
"type": "base",
"size": "xs",
"aria-label": "Odstranit výraz",
"icon-start": {
"slot": "icon-start",
"type": "components",
"name": "x-lg"
}
}
},
{
"text": "pas rychle",
"button": {
"color": "neutral",
"type": "base",
"size": "xs",
"aria-label": "Odstranit výraz",
"icon-start": {
"slot": "icon-start",
"type": "components",
"name": "x-lg"
}
}
}
]
},
{
"heading": "Naposledy navštívené",
"link": [
{
"name": "Vydání cestovního pasu"
},
{
"name": "Evidence uchazeče - zprostředkování zaměstnání",
"button": {
"text": "Vyřídit",
"color": "secondary",
"type": "solid",
"size": "xs"
}
}
]
},
{
"heading": "Ostatní navštěvují",
"link": [
{
"name": "Výpis z rejstříku trestů",
"button": {
"text": "Vyřídit",
"color": "secondary",
"type": "solid",
"size": "xs"
}
},
{
"name": "Vydání občanského průkazu"
},
{
"name": "Vydání řidičského průkazu",
"button": {
"text": "Vyřídit",
"color": "secondary",
"type": "solid",
"size": "xs"
}
},
{
"name": "Vydání cestovního pasu"
},
{
"name": "Ohlášení změny místa trvalého pobytu"
},
{
"name": "Změna trvalého pobytu"
}
]
},
{
"heading": "Zkuste tyto kategorie",
"classes": [
"gov-mb--s"
],
"chips": {
"aria-label": "Nabízené kategorie",
"chip": [
{
"name": "Doklady",
"color": "primary",
"type": "outlined",
"size": "s",
"href": "#"
},
{
"name": "Výpisy",
"color": "primary",
"type": "outlined",
"size": "s",
"href": "#"
},
{
"name": "Doprava",
"color": "primary",
"type": "outlined",
"size": "s",
"href": "#"
},
{
"name": "Daně a finance",
"color": "primary",
"type": "outlined",
"size": "s",
"href": "#"
},
{
"name": "Manželství a partnerství",
"color": "primary",
"type": "outlined",
"size": "s",
"href": "#"
}
]
}
}
]
}
@import "../../../styles/mixins";
.gov-suggestions {
position: absolute;
top: 0;
left: 0;
min-height: 100%;
z-index: 100;
padding-top: calc((var(--spacing-s-nudge) * 2) + var(--height-component-m));
background-color: var(--background-block-primary);
border: 1px solid var(--border-subtlest);
border-radius: var(--corner-radius-s);
@include shadow("m");
> * {
height: auto;
}
div > strong {
display: inline-block;
}
.gov-link a > span {
text-decoration: none;
&:hover {
text-decoration: underline;
}
}
&__search {
position: fixed;
top: 0;
left: 0;
z-index: 2;
padding: var(--spacing-s-nudge) var(--spacing-m);
background-color: var(--background-block-primary);
}
&__results {
display: flex;
flex-direction: column;
gap: var(--spacing-m);
width: 100vw;
padding: var(--spacing-s-nudge) var(--spacing-m);
ul {
margin-top: 0;
}
}
&__empty {
padding: var(--spacing-s-nudge);
background-color: var(--background-neutral-subtlest);
color: var(--text-secondary);
border-radius: var(--corner-radius-s);
}
&__empty-searched {
color: var(--text-primary);
}
&__all-results {
margin-top: var(--spacing-s);
}
@include mq($from: md) {
top: calc(var(--height-component-l) + var(--spacing-s));
padding-top: var(--spacing-s-nudge);
min-width: rem-calc(416);
&__results {
width: rem-calc(416);
}
}
}
No notes defined.