.layout-padding > md-expansion-panel-group { padding: 0; } /* --- Expansion Panel --- */ md-expansion-panel { display: block; position: relative; outline: none; margin-top: 0; margin-bottom: 0; padding: 0; box-shadow: 0 -1px 0 #e5e5e5, 0 0 2px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.24); } md-expansion-panel.md-open { margin-top: 16px; margin-bottom: 16px; } md-expansion-panel.md-open:first-of-type { margin-top: 0; } md-expansion-panel.md-close { overflow: hidden; } md-expansion-panel:not(.md-no-animation).md-open { -webkit-transition: margin-top 0.12s cubic-bezier(0.25, 0.8, 0.25, 1), margin-bottom 0.12s cubic-bezier(0.25, 0.8, 0.25, 1); transition: margin-top 0.12s cubic-bezier(0.25, 0.8, 0.25, 1), margin-bottom 0.12s cubic-bezier(0.25, 0.8, 0.25, 1); } md-expansion-panel:not(.md-no-animation).md-close { -webkit-transition: margin-top 0.08s cubic-bezier(0.25, 0.8, 0.25, 1), margin-bottom 0.08s cubic-bezier(0.25, 0.8, 0.25, 1); transition: margin-top 0.08s cubic-bezier(0.25, 0.8, 0.25, 1), margin-bottom 0.08s cubic-bezier(0.25, 0.8, 0.25, 1); } md-expansion-panel-collapsed .md-title, md-expansion-panel-header .md-title { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; font-size: 16px; font-weight: 600; min-width: 80px; max-width: 184px; overflow: hidden; text-overflow: ellipsis; text-align: left; white-space: nowrap; } md-expansion-panel-collapsed .md-summary, md-expansion-panel-header .md-summary { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; font-size: 13px; overflow: hidden; text-overflow: ellipsis; text-align: left; white-space: nowrap; } /* --- Expansion Panel Collapsed ---- */ md-expansion-panel md-expansion-panel-collapsed { display: -webkit-box; display: -ms-flexbox; display: flex; min-height: 48px; line-height: 48px; padding: 0 24px; opacity: 1; z-index: 2; box-sizing: border-box; } md-expansion-panel md-expansion-panel-collapsed.md-absolute { position: absolute; } md-expansion-panel md-expansion-panel-collapsed.md-hide { opacity: 0; } md-expansion-panel:not(.md-no-animation) md-expansion-panel-collapsed.md-show { -webkit-transition: opacity 0.03s linear; transition: opacity 0.03s linear; } md-expansion-panel:not(.md-no-animation) md-expansion-panel-collapsed.md-hide { -webkit-transition: opacity 0.1s cubic-bezier(0.25, 0.8, 0.25, 1); transition: opacity 0.1s cubic-bezier(0.25, 0.8, 0.25, 1); } /* --- Expansion Panel Expanded --- */ md-expansion-panel md-expansion-panel-expanded { display: none; min-height: 48px; } md-expansion-panel md-expansion-panel-expanded.md-show, md-expansion-panel md-expansion-panel-expanded.md-hide { display: block; } md-expansion-panel md-expansion-panel-expanded.md-scroll-y { overflow-y: auto; } md-expansion-panel md-expansion-panel-expanded.md-overflow { overflow: hidden; } md-expansion-panel md-expansion-panel-expanded md-expansion-panel-content { display: block; padding: 16px 24px; } md-expansion-panel:not(.md-no-animation) md-expansion-panel-expanded.md-show { -webkit-transition: max-height 0.12s cubic-bezier(0.25, 0.8, 0.25, 1), opacity 0.12s cubic-bezier(0.25, 0.8, 0.25, 1); transition: max-height 0.12s cubic-bezier(0.25, 0.8, 0.25, 1), opacity 0.12s cubic-bezier(0.25, 0.8, 0.25, 1); } md-expansion-panel:not(.md-no-animation) md-expansion-panel-expanded.md-hide { -webkit-transition: max-height 0.06s cubic-bezier(0.25, 0.8, 0.25, 1), opacity 0.06s cubic-bezier(0.25, 0.8, 0.25, 1); transition: max-height 0.06s cubic-bezier(0.25, 0.8, 0.25, 1), opacity 0.06s cubic-bezier(0.25, 0.8, 0.25, 1); } /* --- Expansion Panel Header --- */ md-expansion-panel-header { display: block; position: relative; outline: none; } md-expansion-panel-header .md-expansion-panel-header-container { display: -webkit-box; display: -ms-flexbox; display: flex; min-height: 48px; line-height: 48px; padding: 0 24px; box-sizing: border-box; border-bottom: 1px solid; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } md-expansion-panel-header.md-stick .md-expansion-panel-header-container { position: fixed; z-index: 2; -webkit-animation: panelBodyHeaderStickyHoverIn 0.3s ease-out both; animation: panelBodyHeaderStickyHoverIn 0.3s ease-out both; } md-expansion-panel-header.md-no-stick .md-expansion-panel-header-container { -webkit-animation: panelBodyHeaderStickyHoverOut 0.3s ease-out both; animation: panelBodyHeaderStickyHoverOut 0.3s ease-out both; } /* --- Expansion Panel Footer --- */ md-expansion-panel-footer { display: block; position: relative; } md-expansion-panel-footer.md-show, md-expansion-panel-footer.md-hide { display: block; } md-expansion-panel-footer .md-expansion-panel-footer-container { display: -webkit-box; display: -ms-flexbox; display: flex; min-height: 48px; line-height: 48px; padding: 0 24px; border-top: 1px solid; box-sizing: border-box; } md-expansion-panel-footer.md-stick .md-expansion-panel-footer-container { position: fixed; z-index: 2; } /* --- expand icon --- */ md-expansion-panel:not(.md-no-animation) .md-expansion-panel-icon { -webkit-transition: -webkit-transform 0.6s cubic-bezier(0.25, 0.8, 0.25, 1); transition: -webkit-transform 0.6s cubic-bezier(0.25, 0.8, 0.25, 1); transition: transform 0.6s cubic-bezier(0.25, 0.8, 0.25, 1); transition: transform 0.6s cubic-bezier(0.25, 0.8, 0.25, 1), -webkit-transform 0.6s cubic-bezier(0.25, 0.8, 0.25, 1); } md-expansion-panel .md-expansion-panel-icon { -webkit-transform: rotate(90deg); transform: rotate(90deg); } md-expansion-panel .md-expansion-panel-icon:first-child { margin-right: 18px; } md-expansion-panel.md-open > md-expansion-panel-expanded > md-expansion-panel-header .md-expansion-panel-header-container .md-expansion-panel-icon { -webkit-transform: rotate(-90deg); transform: rotate(-90deg); } md-expansion-panel.md-open > md-expansion-panel.md-open > md-expansion-panel-collapsed .md-expansion-panel-icon { -webkit-transform: rotate(-90deg); transform: rotate(-90deg); } @-webkit-keyframes panelBodyHeaderStickyHoverIn { 0% { box-shadow: 0 0 0 0 transparent; } 100% { box-shadow: 0px 2px 4px 0 rgba(0, 0, 0, 0.16); } } @keyframes panelBodyHeaderStickyHoverIn { 0% { box-shadow: 0 0 0 0 transparent; } 100% { box-shadow: 0px 2px 4px 0 rgba(0, 0, 0, 0.16); } } @-webkit-keyframes panelBodyHeaderStickyHoverOut { 0% { box-shadow: 0px 2px 4px 0 rgba(0, 0, 0, 0.16); } 100% { box-shadow: 0 0 0 0 transparent; } } @keyframes panelBodyHeaderStickyHoverOut { 0% { box-shadow: 0px 2px 4px 0 rgba(0, 0, 0, 0.16); } 100% { box-shadow: 0 0 0 0 transparent; } }