framework7/components/accordion/accordion.css

Full featured mobile HTML framework for building iOS & Android apps

:root{--f7-accordion-chevron-icon-down:'chevron_down';--f7-accordion-chevron-icon-up:'chevron_up'}.accordion-item-toggle{cursor:pointer}.list.accordion-list .accordion-item-toggle{transition-duration:.3s;position:relative;overflow:hidden}.list.accordion-list .accordion-item-toggle.active-state{transition-duration:.3s;background-color:var(--f7-list-link-pressed-bg-color)}.list.accordion-list .accordion-item-toggle.active-state>.item-inner:after{background-color:transparent}.list.accordion-list .accordion-item-toggle .item-inner{transition-duration:.3s;transition-property:background-color}.list.accordion-list .accordion-item-toggle .item-inner:after{transition-duration:.3s}.list.accordion-list .accordion-item-toggle .ripple-wave{z-index:0}.accordion-item .item-link .item-inner:after{transition-duration:.3s}.accordion-item .block,.accordion-item .list{margin-top:0;margin-bottom:0}.accordion-item .block>h1:first-child,.accordion-item .block>h2:first-child,.accordion-item .block>h3:first-child,.accordion-item .block>h4:first-child,.accordion-item .block>p:first-child{margin-top:10px}.accordion-item .block>h1:last-child,.accordion-item .block>h2:last-child,.accordion-item .block>h3:last-child,.accordion-item .block>h4:last-child,.accordion-item .block>p:last-child{margin-bottom:10px}.accordion-item-opened .accordion-item-toggle .item-inner:after,.accordion-item-opened>.item-link .item-inner:after{background-color:transparent}.list li.accordion-item ul{padding-left:0}.accordion-item-content{position:relative;overflow:hidden;height:0;font-size:14px;transition-duration:.3s}.accordion-item-opened>.accordion-item-content{height:auto}html.device-android-4 .accordion-item-content{transform:none}.list .accordion-item-toggle .item-inner:before{font-family:framework7-core-icons;font-weight:400;font-style:normal;line-height:1;letter-spacing:normal;text-transform:none;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale;font-feature-settings:'liga';text-align:center;display:block;width:100%;height:100%;font-size:20px;position:absolute;top:50%;font-size:var(--f7-list-chevron-icon-font-size);color:var(--f7-list-chevron-icon-color);pointer-events:none;right:calc(var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-right))}.list:not(.accordion-opposite) .accordion-item-toggle .item-inner{padding-right:calc(var(--f7-list-chevron-icon-area) + var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-right))}.accordion-opposite .accordion-item-toggle .item-inner,.accordion-opposite .accordion-item-toggle.item-link .item-inner,.accordion-opposite .accordion-item>.item-link>.item-content>.item-inner,.accordion-opposite .accordion-item>.item-link>.item-inner{padding-right:calc(var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-right))}.accordion-opposite .accordion-item>.item-link>.item-title-row{padding-right:0}.accordion-opposite .accordion-item-toggle .item-inner:before,.accordion-opposite .accordion-item-toggle.item-link .item-inner:before,.accordion-opposite .accordion-item>.item-link .item-title-row:before,.accordion-opposite .accordion-item>.item-link>.item-content>.item-inner:before,.accordion-opposite .accordion-item>.item-link>.item-inner:before{display:none}.accordion-opposite .accordion-item-toggle.item-content,.accordion-opposite .accordion-item-toggle>.item-content,.accordion-opposite .accordion-item>.item-content,.accordion-opposite .accordion-item>.item-link>.item-content,.accordion-opposite.links-list .accordion-item>a{position:relative;padding-left:calc(var(--f7-list-chevron-icon-area) + var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-left))}.accordion-opposite .accordion-item-toggle.item-content:before,.accordion-opposite .accordion-item-toggle>.item-content:before,.accordion-opposite .accordion-item>.item-content:before,.accordion-opposite .accordion-item>.item-link>.item-content:before,.accordion-opposite.links-list .accordion-item>a:before{font-family:framework7-core-icons;font-weight:400;font-style:normal;line-height:1;letter-spacing:normal;text-transform:none;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale;font-feature-settings:'liga';text-align:center;display:block;width:100%;height:100%;font-size:20px;position:absolute;top:50%;font-size:var(--f7-list-chevron-icon-font-size);color:var(--f7-list-chevron-icon-color);pointer-events:none;content:var(--f7-accordion-chevron-icon-down);width:14px;height:8px;margin-top:-4px;line-height:8px;transform:translateX(-50%);left:calc((var(--f7-list-chevron-icon-area) + var(--f7-list-item-padding-horizontal))/ 2 + var(--f7-safe-area-left))}.list .accordion-item-toggle.active-state{background-color:var(--f7-list-link-pressed-bg-color)}.accordion-item.media-item .accordion-item-toggle .item-title-row:before,.accordion-item.media-item>.item-link .item-title-row:before,.links-list .accordion-item>a:before,.list .accordion-item-toggle .item-inner:before,.list:not(.media-list) .accordion-item:not(.media-item) .accordion-item-toggle .item-inner:before,.list:not(.media-list) .accordion-item:not(.media-item)>.item-link .item-inner:before,.media-list .accordion-item .accordion-item-toggle .item-title-row:before,.media-list .accordion-item>.item-link .item-title-row:before{content:var(--f7-accordion-chevron-icon-down);width:14px;height:8px;margin-top:-4px;line-height:8px}.accordion-item-opened.media-item .accordion-item-toggle .item-title-row:before,.accordion-item-opened.media-item>.item-link .item-title-row:before,.accordion-opposite .accordion-item-opened .accordion-item-toggle.item-content:before,.accordion-opposite .accordion-item-opened .accordion-item-toggle>.item-content:before,.accordion-opposite .accordion-item-opened>.item-content:before,.accordion-opposite .accordion-item-opened>.item-link>.item-content:before,.accordion-opposite .links-list .accordion-item-opened>a:before,.links-list .accordion-item-opened>a:before,.list .accordion-item-toggle.accordion-item-opened .item-inner:before,.list:not(.media-list) .accordion-item-opened:not(.media-item) .accordion-item-toggle .item-inner:before,.list:not(.media-list) .accordion-item-opened:not(.media-item)>.item-link .item-inner:before,.media-list .accordion-item-opened .accordion-item-toggle .item-title-row:before,.media-list .accordion-item-opened>.item-link .item-title-row:before{content:var(--f7-accordion-chevron-icon-up);width:14px;height:8px;margin-top:-4px;line-height:8px}