<form class="date-filter date-filter--durp date-filter--dark" data-date-filter method="get">
<div class="date-filter__month">
<label class="date-filter__select-label date-filter__select-label--durp" for="calendar-month-select">Month</label>
<select class="date-filter__select date-filter__select--month date-filter__select--durp" name="date_month" id="calendar-month-select">
<option class="date-filter__select-option" value="january">January</option>
<option class="date-filter__select-option" value="February">February</option>
<option class="date-filter__select-option" value="march">March</option>
<option class="date-filter__select-option" value="april">April</option>
<option class="date-filter__select-option" value="may">May</option>
<option class="date-filter__select-option" value="june">June</option>
<option class="date-filter__select-option" value="july">July</option>
<option class="date-filter__select-option" value="august" selected>August</option>
<option class="date-filter__select-option" value="september">September</option>
<option class="date-filter__select-option" value="october">October</option>
<option class="date-filter__select-option" value="november">November</option>
<option class="date-filter__select-option" value="december">December</option>
</select>
</div>
<div class="date-filter__day">
<label class="date-filter__select-label date-filter__select-label--durp" for="calendar-day-select">Day</label>
<select class="date-filter__select date-filter__select--durp" name="date_day" id="calendar-day-select">
<option class="date-filter__select-option" value="1">1</option>
<option class="date-filter__select-option" value="2">2</option>
<option class="date-filter__select-option" value="3">3</option>
<option class="date-filter__select-option" value="4">4</option>
<option class="date-filter__select-option" value="5">5</option>
<option class="date-filter__select-option" value="6">6</option>
<option class="date-filter__select-option" value="7">7</option>
<option class="date-filter__select-option" value="8">8</option>
<option class="date-filter__select-option" value="9">9</option>
<option class="date-filter__select-option" value="10" selected>10</option>
<option class="date-filter__select-option" value="11">11</option>
<option class="date-filter__select-option" value="12">12</option>
<option class="date-filter__select-option" value="13">13</option>
<option class="date-filter__select-option" value="14">14</option>
<option class="date-filter__select-option" value="15">15</option>
<option class="date-filter__select-option" value="16">16</option>
<option class="date-filter__select-option" value="17">17</option>
<option class="date-filter__select-option" value="18">18</option>
<option class="date-filter__select-option" value="19">19</option>
<option class="date-filter__select-option" value="20">20</option>
<option class="date-filter__select-option" value="21">21</option>
<option class="date-filter__select-option" value="22">22</option>
<option class="date-filter__select-option" value="23">23</option>
<option class="date-filter__select-option" value="24">24</option>
<option class="date-filter__select-option" value="25">25</option>
<option class="date-filter__select-option" value="26">26</option>
<option class="date-filter__select-option" value="27">27</option>
<option class="date-filter__select-option" value="28">28</option>
<option class="date-filter__select-option" value="29">29</option>
<option class="date-filter__select-option" value="30">30</option>
<option class="date-filter__select-option" value="31">31</option>
</select>
</div>
<div class="date-filter__year">
<label class="date-filter__select-label date-filter__select-label--durp" for="calendar-year-select">Year</label>
<select class="date-filter__select date-filter__select--durp" name="date_year" id="calendar-year-select">
<option class="date-filter__select-option" value="2019" selected>2019</option>
<option class="date-filter__select-option" value="2020">2020</option>
<option class="date-filter__select-option" value="2021">2021</option>
</select>
</div>
<div class="date-filter__buttons">
<button type="submit" class="standard-button standard-button--durp standard-button--dark
standard-button---width standard-button--tertiary">
<div class="standard-button__container"><span class="standard-button__text-container"><span class="standard-button__text">View</span></span></div> </button>
<button type="reset" class="standard-button standard-button--durp standard-button--dark
standard-button---width standard-button--tertiary">
<div class="standard-button__container"><span class="standard-button__text-container"><span class="standard-button__text">Clear</span></span></div> </button>
</div>
</form>
{% if is_wordpress %}
{{ enqueue_script('date-filter') }}
{% endif %}
<form class="date-filter date-filter--{{ siteUnit }} date-filter--{{ background }}" data-date-filter method="get">
<div class="date-filter__month">
<label class="date-filter__select-label date-filter__select-label--{{ siteUnit }}" for="calendar-month-select">Month</label>
<select class="date-filter__select date-filter__select--month date-filter__select--{{ siteUnit }}" name="date_month" id="calendar-month-select">
{% for month in filter.months %}
<option class="date-filter__select-option" value="{{ month.value }}"{{ month.selected ? " selected" }}>{{ month.label }}</option>
{% endfor %}
</select>
</div>
<div class="date-filter__day">
<label class="date-filter__select-label date-filter__select-label--{{ siteUnit }}" for="calendar-day-select">Day</label>
<select class="date-filter__select date-filter__select--{{ siteUnit }}" name="date_day" id="calendar-day-select">
{% for day in filter.days %}
<option class="date-filter__select-option" value="{{ day.value }}"{{ day.selected ? ' selected' }}>{{ day.label }}</option>
{% endfor %}
</select>
</div>
<div class="date-filter__year">
<label class="date-filter__select-label date-filter__select-label--{{ siteUnit }}" for="calendar-year-select">Year</label>
<select class="date-filter__select date-filter__select--{{ siteUnit }}" name="date_year" id="calendar-year-select">
{% for year in filter.years %}
<option class="date-filter__select-option" value="{{ year.value }}"{{ year.selected ? " selected" }}>{{ year.label }}</option>
{% endfor %}
</select>
</div>
<div class="date-filter__buttons">
{% include 'bits/standard-button/standard-button.twig' with {
button: {
type: 'tertiary',
isButton: true,
buttonType: 'submit',
text: filter.submitButtonText,
}
} %}
{% include 'bits/standard-button/standard-button.twig' with {
button: {
type: 'tertiary',
isButton: true,
buttonType: 'reset',
text: filter.cancelButtonText,
}
} %}
</div>
</form>
{
"siteUnit": "durp",
"departmentName": "Department of Urban and Regional Planning",
"background": "dark",
"filter": {
"months": [
{
"label": "January",
"value": "january"
},
{
"label": "February",
"value": "February"
},
{
"label": "March",
"value": "march"
},
{
"label": "April",
"value": "april"
},
{
"label": "May",
"value": "may"
},
{
"label": "June",
"value": "june"
},
{
"label": "July",
"value": "july"
},
{
"label": "August",
"value": "august",
"selected": true
},
{
"label": "September",
"value": "september"
},
{
"label": "October",
"value": "october"
},
{
"label": "November",
"value": "november"
},
{
"label": "December",
"value": "december"
}
],
"days": [
{
"label": "1",
"value": "1"
},
{
"label": "2",
"value": "2"
},
{
"label": "3",
"value": "3"
},
{
"label": "4",
"value": "4"
},
{
"label": "5",
"value": "5"
},
{
"label": "6",
"value": "6"
},
{
"label": "7",
"value": "7"
},
{
"label": "8",
"value": "8"
},
{
"label": "9",
"value": "9"
},
{
"label": "10",
"value": "10",
"selected": true
},
{
"label": "11",
"value": "11"
},
{
"label": "12",
"value": "12"
},
{
"label": "13",
"value": "13"
},
{
"label": "14",
"value": "14"
},
{
"label": "15",
"value": "15"
},
{
"label": "16",
"value": "16"
},
{
"label": "17",
"value": "17"
},
{
"label": "18",
"value": "18"
},
{
"label": "19",
"value": "19"
},
{
"label": "20",
"value": "20"
},
{
"label": "21",
"value": "21"
},
{
"label": "22",
"value": "22"
},
{
"label": "23",
"value": "23"
},
{
"label": "24",
"value": "24"
},
{
"label": "25",
"value": "25"
},
{
"label": "26",
"value": "26"
},
{
"label": "27",
"value": "27"
},
{
"label": "28",
"value": "28"
},
{
"label": "29",
"value": "29"
},
{
"label": "30",
"value": "30"
},
{
"label": "31",
"value": "31"
}
],
"years": [
{
"label": "2019",
"value": "2019",
"selected": true
},
{
"label": "2020",
"value": "2020"
},
{
"label": "2021",
"value": "2021"
}
],
"submitButtonText": "View",
"cancelButtonText": "Clear"
}
}
smallestBreakpoint = 400px
mediumBreakpoint = 700px
.date-filter
--backgroundImage url("data:image/svg+xml;charset=utf8,%3Csvg aria-hidden='true' class='down-toggle-icon' xmlns='http://www.w3.org/2000/svg' width='12' height='6' viewBox='0 0 12 6'%3E%3Cpath class='_mark down-toggle-icon__shape' fill='%23FF552E' fill-rule='evenodd' d='M12 0L6 6 0 0z'/%3E%3C/svg%3E")
--textColor greyDarkest
&--arch
--backgroundImage url("data:image/svg+xml;charset=utf8,%3Csvg aria-hidden='true' class='down-toggle-icon' xmlns='http://www.w3.org/2000/svg' width='12' height='6' viewBox='0 0 12 6'%3E%3Cpath class='_mark down-toggle-icon__shape' fill='%2E1D58A7' fill-rule='evenodd' d='M12 0L6 6 0 0z'/%3E%3C/svg%3E")
--textColor greyDarkest
&--art
--backgroundImage url("data:image/svg+xml;charset=utf8,%3Csvg aria-hidden='true' class='down-toggle-icon' xmlns='http://www.w3.org/2000/svg' width='12' height='6' viewBox='0 0 12 6'%3E%3Cpath class='_mark down-toggle-icon__shape' fill='%2E009FD4' fill-rule='evenodd' d='M12 0L6 6 0 0z'/%3E%3C/svg%3E")
--textColor greyDarkest
&--college
--backgroundImage url("data:image/svg+xml;charset=utf8,%3Csvg aria-hidden='true' class='down-toggle-icon' xmlns='http://www.w3.org/2000/svg' width='12' height='6' viewBox='0 0 12 6'%3E%3Cpath class='_mark down-toggle-icon__shape' fill='%23FF552E' fill-rule='evenodd' d='M12 0L6 6 0 0z'/%3E%3C/svg%3E")
--textColor charcoalLighter
&--dance
--backgroundImage url("data:image/svg+xml;charset=utf8,%3Csvg aria-hidden='true' class='down-toggle-icon' xmlns='http://www.w3.org/2000/svg' width='12' height='6' viewBox='0 0 12 6'%3E%3Cpath class='_mark down-toggle-icon__shape' fill='%2E009FD4' fill-rule='evenodd' d='M12 0L6 6 0 0z'/%3E%3C/svg%3E")
--textColor greyDarkest
&--durp
--backgroundImage url("data:image/svg+xml;charset=utf8,%3Csvg aria-hidden='true' class='down-toggle-icon' xmlns='http://www.w3.org/2000/svg' width='12' height='6' viewBox='0 0 12 6'%3E%3Cpath class='_mark down-toggle-icon__shape' fill='%23FF552E' fill-rule='evenodd' d='M12 0L6 6 0 0z'/%3E%3C/svg%3E")
--textColor greyDarkest
&--theatre
--backgroundImage url("data:image/svg+xml;charset=utf8,%3Csvg aria-hidden='true' class='down-toggle-icon' xmlns='http://www.w3.org/2000/svg' width='12' height='6' viewBox='0 0 12 6'%3E%3Cpath class='_mark down-toggle-icon__shape' fill='%23FF552E' fill-rule='evenodd' d='M12 0L6 6 0 0z'/%3E%3C/svg%3E")
--textColor greyDarkest
&--dark
--textColor white
align-items flex-end
display flex
flex-direction row
flex-wrap wrap
&__month
&__day
&__year
margin-bottom 8px
margin-right 18px
&__buttons
margin-top 24px
margin-bottom 8px
&__select-label
@extends $headline5
color var(--textColor)
display block
padding 0 10px 4px
&__select
appearance none
box-sizing border-box
background-color white
background-image var(--backgroundImage)
background-repeat no-repeat
background-position right 9px center
border 2px solid grey
border-radius 0
color greyDarkest
padding 10px 32px 10px 16px
width 33vw
+above(smallestBreakpoint)
width 100%
&--arch
border-color: greyDarkest
&--art
border-color: greyDarkest
&--college
border-color: cloudDarker
&--dance
border-color: greyDarkest
&--durp
border-color: greyDarkest
&--theatre
border-color: greyDarkest
&--month
width 75vw
+above(mediumBreakpoint)
width 100%
&__select-option
@extends $primaryParagraph
color greyDarkest
There are no notes for this item.