Use block-list instead of panel
This commit is contained in:
parent
245b6a5f27
commit
56d6077f48
@ -23,4 +23,20 @@ select {
|
|||||||
label:first-child {
|
label:first-child {
|
||||||
padding-bottom: 0.5rem;
|
padding-bottom: 0.5rem;
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.usa-search {
|
||||||
|
padding-top: 2px;
|
||||||
|
margin-right: 2rem;
|
||||||
|
|
||||||
|
input[type=search] {
|
||||||
|
height: 4.4rem;
|
||||||
|
font-size: 1.7rem;
|
||||||
|
color: $color-black;
|
||||||
|
}
|
||||||
|
|
||||||
|
button {
|
||||||
|
min-height: 4.4rem;
|
||||||
|
}
|
||||||
|
|
||||||
}
|
}
|
@ -1,33 +0,0 @@
|
|||||||
/*
|
|
||||||
* Panels Actions
|
|
||||||
* Form inputs and other actions for panels
|
|
||||||
*/
|
|
||||||
|
|
||||||
.panel__actions {
|
|
||||||
display: flex;
|
|
||||||
padding: $gap;
|
|
||||||
|
|
||||||
&--filter {
|
|
||||||
width: 50%;
|
|
||||||
}
|
|
||||||
|
|
||||||
&--search {
|
|
||||||
width: 50%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.usa-search {
|
|
||||||
padding-top: 2px;
|
|
||||||
margin-right: 2rem;
|
|
||||||
|
|
||||||
input[type=search] {
|
|
||||||
height: 4.4rem;
|
|
||||||
font-size: 1.7rem;
|
|
||||||
color: $color-black;
|
|
||||||
}
|
|
||||||
|
|
||||||
button {
|
|
||||||
min-height: 4.4rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
|
@ -16,11 +16,6 @@
|
|||||||
|
|
||||||
th {
|
th {
|
||||||
@include block-list-header;
|
@include block-list-header;
|
||||||
|
|
||||||
&:first-child {
|
|
||||||
padding: $gap * 2 !important; // This overrides USWDS's no padding
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
td {
|
td {
|
||||||
|
@ -9,33 +9,34 @@
|
|||||||
|
|
||||||
<div class="col col--grow">
|
<div class="col col--grow">
|
||||||
|
|
||||||
<div class="panel">
|
|
||||||
<div class="panel__actions">
|
|
||||||
<div class="panel__actions--search">
|
|
||||||
<form class="usa-search usa-search-small">
|
|
||||||
<label class="usa-sr-only" for="search-field-small">Search small</label>
|
|
||||||
<input id="search-field-small" type="search" name="search" placeholder="Search by Order ID">
|
|
||||||
<button type="submit">
|
|
||||||
<span class="usa-sr-only">Search</span>
|
|
||||||
</button>
|
|
||||||
</form>
|
|
||||||
</div>
|
|
||||||
<div class="panel__actions--filter">
|
|
||||||
<select id="filter_status" name="filter_status" required="">
|
|
||||||
<option value="" selected disabled>Filter by status</option>
|
|
||||||
<option value="">Active</option>
|
|
||||||
<option value="">Pending</option>
|
|
||||||
<option value="">Denied</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
|
<section class="block-list">
|
||||||
|
<ul>
|
||||||
|
<li class="block-list__item">
|
||||||
|
<span>
|
||||||
|
<form class="usa-search usa-search-small">
|
||||||
|
<label class="usa-sr-only" for="search-field-small">Search small</label>
|
||||||
|
<input id="search-field-small" type="search" name="search" placeholder="Search by Order ID">
|
||||||
|
<button type="submit">
|
||||||
|
<span class="usa-sr-only">Search</span>
|
||||||
|
</button>
|
||||||
|
</form>
|
||||||
|
</span>
|
||||||
|
<span>
|
||||||
|
<select id="filter_status" name="filter_status" required="">
|
||||||
|
<option value="" selected disabled>Filter by status</option>
|
||||||
|
<option value="">Active</option>
|
||||||
|
<option value="">Pending</option>
|
||||||
|
<option value="">Denied</option>
|
||||||
|
</select>
|
||||||
|
</span>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</section>
|
||||||
|
|
||||||
<div class="panel">
|
<div class="panel">
|
||||||
|
|
||||||
<table class="usa-table-borderless" width="100%">
|
<table>
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<th>Order ID</th>
|
<th>Order ID</th>
|
||||||
|
Loading…
x
Reference in New Issue
Block a user