<div class="o-datepicker-filter" data-param-name="">
<button class="o-datepicker-filter__toggle js-mini-cal-toggle" type="button">
<span class="u-sr-only">Select </span>Date
<span class="o-datepicker-filter__icon" aria-hidden="true"><svg width="12" height="7" viewBox="0 0 12 7" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M11 1L6 6L1 1" class="u-ct-stroke" />
</svg>
</span>
</button>
<div class="o-datepicker-filter__mini-cal mini-cal" data-date-name=""></div>
</div>
<div class="o-datepicker-filter" data-param-name="{{ paramName }}">
<button class="o-datepicker-filter__toggle js-mini-cal-toggle" type="button">
<span class="u-sr-only">Select </span>{{ title }}
<span class="o-datepicker-filter__icon" aria-hidden="true">{% include '03-icons/down-carrat-small' %}</span>
</button>
<div
{% if calID %} id="{{ calID }}"{% endif %}
class="o-datepicker-filter__mini-cal mini-cal"
data-date-name="{{ paramName }}"
{% if labelName %} data-label="{{ labelName }}"{% endif %}
{% if calPairTo %} data-pair-to="{{ calPairTo }}"{% endif %}
></div>
</div>
{
"pageColorTheme": "teal",
"title": "Date"
}
.o-datepicker-filter {
position: relative;
}
.o-datepicker-filter__toggle {
@include filterStyles;
}
.o-datepicker-filter__icon {
@include filterIconStyles;
.o-datepicker-filter__toggle.is-active & {
transform: rotate(180deg);
}
}
.o-datepicker-filter__mini-cal {
visibility: hidden;
opacity: 0;
transform: translate3d(0, 1.6rem, 0);
transition: all 0.24s ease-in-out, visibility 0.24s linear;
position: absolute;
top: 100%;
left: 0;
z-index: 9;
@include break($xs) {
min-width: 30rem;
}
&.is-active {
visibility: visible;
opacity: 1;
transform: translate3d(0, 0, 0);
}
}
No notes defined.