tec3/five-for-the-future
tec3/five-for-the-future
1
0
Fork 0
mirror of https://github.com/WordPress/five-for-the-future.git synced 2025-07-13 05:45:47 +03:00
Code Issues Projects Releases Packages Wiki Activity Actions

Pledge List Filters: Update style and add filter on-change functionality

Browse source 
- Style search box & filter dropdown
- Enable sort filter on select change
- Fix some PHP notices
This commit is contained in:
Kelly Dwan 2019-10-28 19:39:16 -04:00
parent 5b5a1d50ff
commit 14ed8d4d6b
No known key found for this signature in database
GPG key ID: 8BA5575F3D11575D
5 changed files with 59 additions and 18 deletions
Download patch file Download diff file Expand all files Collapse all files

1
themes/wporg-5ftf/css/components/_components.scss
View file

@ -26,6 +26,7 @@
@import "pledge-contributors";
@import "pledge-list";
@import "pledge-single";
@import "search-form";
@import "site-content";
@import "site-header";
@import "site-title";

22
themes/wporg-5ftf/css/components/_pledge-list.scss
View file

@ -21,28 +21,23 @@ body.archive.post-type-archive-5ftf_pledge {
.page-header-callout {
grid-column: 2;
grid-row: 1;
.button {
padding: 0.5em 1.5em;
height: auto;
}
}
.page-header-controls {
grid-column: 1 / span 2;
grid-row: 2;
display: grid;
grid-template-columns: 1fr 1fr;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin-top: ms(2);
border-top: 1px solid $color-gray-light-500;
padding-top: ms(2);
form:nth-of-type(2n+1) {
grid-column: 1;
grid-row: 1;
}
form:nth-of-type(2n) {
grid-column: 2;
grid-row: 1;
text-align: right;
}
}
}
@ -51,6 +46,7 @@ body.archive.post-type-archive-5ftf_pledge {
label {
display: inline-block;
margin-right: 6px;
font-size: 1em;
font-weight: 700;
}

38
themes/wporg-5ftf/css/components/_search-form.scss Normal file
View file

@ -0,0 +1,38 @@
.search-form {
.site-main & {
display: flex;
align-items: stretch;
justify-content: flex-end;
border: 1px solid $color-gray-light-600;
background: $color-gray-light-100;
.search-field {
flex: 0 1 auto;
margin: 0;
padding: 0.8em 1em;
background: transparent;
border: none;
box-shadow: none;
&::-moz-placeholder {
color: $color-gray-200;
}
}
.button-search {
flex: 0 1 auto;
height: auto;
background: transparent;
border: none;
border-radius: 0;
box-shadow: none;
text-shadow: none;
color: $color-gray-200;
&:focus {
outline: 2px solid $color__wporg-blue;
}
}
}
}