framework7-without-localstorage
Version:
Full featured mobile HTML framework for building iOS & Android apps
71 lines (69 loc) • 2.55 kB
text/less
/* === Accordion === */
.list-block {
.accordion-item-toggle {
cursor: pointer;
.transition(300ms);
.item-inner {
padding-right: 42px;
background: no-repeat -webkit-calc(~"100% - 15px") center;
background: no-repeat calc(~"100% - 15px") center;
.encoded-svg-background("<svg viewBox='0 0 60 120' xmlns='http://www.w3.org/2000/svg'><path d='m60 61.5-38.25 38.25-9.75-9.75 29.25-28.5-29.25-28.5 9.75-9.75z' fill='#c7c7cc'/></svg>");
background-size: 10px 20px;
}
html:not(.watch-active-state) &:active, &.active-state {
.transition(0ms);
background-color: #d9d9d9;
> .item-inner {
.hairline-color(bottom, transparent);
}
}
}
.accordion-item-toggle, .accordion-item > .item-link {
.item-inner {
.transition(300ms);
&:after {
.transition(300ms);
}
-webkit-transition-property: background-color;
transition-property: background-color;
}
}
&:not(.media-list) .accordion-item-expanded:not(.media-item) .accordion-item-toggle .item-inner,
&:not(.media-list) .accordion-item-expanded:not(.media-item) > .item-link .item-inner,
&.media-list .accordion-item-expanded .accordion-item-toggle .item-title-row,
&.media-list .accordion-item-expanded > .item-link .item-title-row,
.accordion-item-expanded.media-item .accordion-item-toggle .item-title-row,
.accordion-item-expanded.media-item > .item-link .item-title-row,
{
.encoded-svg-background("<svg viewBox='0 0 60 120' xmlns='http://www.w3.org/2000/svg'><path d='m60 61.5-38.25 38.25-9.75-9.75 29.25-28.5-29.25-28.5 9.75-9.75z' transform='translate(115, 30) rotate(90)' fill='#c7c7cc'/></svg>");
background-size: 20px 20px;
}
.accordion-item-expanded {
.accordion-item-toggle .item-inner, > .item-link .item-inner {
.hairline-color(bottom, transparent);
}
}
.accordion-item {
.content-block, .list-block {
margin-top: 0;
margin-bottom: 0;
}
ul {
padding-left: 0;
}
}
}
.accordion-item-content {
position: relative;
overflow: hidden;
height: 0;
font-size: 14px;
.transition(300ms);
.transform(translate3d(0,0,0));
.accordion-item-expanded > &{
height: auto;
}
html.android-4 & {
.transform(none);
}
}