<!-- Search box card -->
<section class="search-card">
<h2 class="search-card-title">
What data are you looking for?
</h2>
<ods-catalog-context context="catalog">
<div class="search-card-container">
<ods-searchbox class="search-card-searchbox"
form-id="search-form"
translate="placeholder"
placeholder="Search for a dataset">
</ods-searchbox>
<!-- Button is optional but has been added for accessibility reasons. We recommend not removing it.
The "form" parameter must match the "form-id" parameter in ods-searchbox. -->
<button type="submit" form="search-form" class="search-card-submit-button">
Search
</button>
</div>
</ods-catalog-context>
</section>
/* Search Box Card
========================================================================== */
.search-card {
background-color: rgba(0,0,0,.1);
padding: 39px;
border-radius: 4px;
margin-bottom: 20px;
display: flex;
flex-direction: column;
align-items: stretch;
text-align: center;
justify-content: center;
text-align: center;
}
.search-card-container {
display: flex;
justify-content: center;
width: 100%;
max-width: 500px;
margin: 0 auto;
}
.search-card-title {
color: var(--titles);
font-size: 1.2rem;
line-height: 1.5;
font-weight: normal;
text-align: center;
}
.search-card-searchbox {
margin-bottom: 0;
flex: 1 1 auto;
}
.search-card-searchbox .odswidget-searchbox__box {
font-size: 1rem;
display: block;
width: 100%;
max-width: 500px;
padding: 8px 13px;
border-radius: 4px 0 0 4px;
border-top: 1px solid #cbd2db;
border-left: 1px solid #cbd2db;
border-bottom: 1px solid #cbd2db;
border-right: none;
margin: 0 auto;
}
.search-card-submit-button {
border: none;
background-color: var(--highlight);
color: #FFFFFF;
font-size: .866rem;
font-weight: bold;
text-align: center;
padding: 8px 12px;
border-radius: 0 4px 4px 0;
transition: opacity .2s;
cursor: pointer;
}
.search-card-submit-button:hover {
text-decoration: none;
opacity: .8;
}
