v-accordion
Version:
vAccordion - AngularJS multi-level accordion component
9 lines (8 loc) • 2.29 kB
CSS
/**
* vAccordion - AngularJS multi-level accordion component
* @version v1.6.0
* @link http://lukaszwatroba.github.io/v-accordion
* @author Łukasz Wątroba <l@lukaszwatroba.com>
* @license MIT License, http://www.opensource.org/licenses/MIT
*/
v-accordion,v-pane{display:block}v-pane.is-expanded>v-pane-content>div{display:visible}v-pane[disabled]>v-pane-header{opacity:.6;pointer-events:none}v-pane-header{display:block;position:relative;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;outline:0}v-pane-header:focus{outline:0}v-pane-header>div{display:block}v-pane-content{display:block;position:relative;overflow:hidden;max-height:0}v-pane-content>div{visibility:none}.vAccordion--default v-accordion{margin-top:20px;padding-left:20px}.vAccordion--default v-pane-content>div{padding-bottom:20px;opacity:0;-webkit-transform:translate3d(0,30px,0);transform:translate3d(0,30px,0);-webkit-transition:all .5s;transition:all .5s}.vAccordion--default v-pane{overflow:hidden}.vAccordion--default v-pane.is-expanded>v-pane-header{border-bottom-color:#2196F3}.vAccordion--default v-pane.is-expanded>v-pane-header::after{-webkit-transform:rotate(90deg);transform:rotate(90deg);opacity:0}.vAccordion--default v-pane.is-expanded>v-pane-header::before{-webkit-transform:rotate(0deg);transform:rotate(0deg)}.vAccordion--default v-pane.is-expanded>v-pane-content>div{opacity:1;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}.vAccordion--default v-pane[disabled] v-pane-header::after,.vAccordion--default v-pane[disabled] v-pane-header::before{display:none}.vAccordion--default v-pane-header{padding:5px 0;margin-bottom:20px;border-bottom:2px solid #D8D8D8;-webkit-transition:all .25s;transition:all .25s}.vAccordion--default v-pane-header::after,.vAccordion--default v-pane-header::before{content:'';display:block;position:absolute;top:50%;right:0;width:10px;height:1px;background-color:#2196F3;-webkit-transform-origin:50% 50%;transform-origin:50% 50%;will-change:transform;-webkit-transition:all .25s;transition:all .25s}.vAccordion--default v-pane-header::before{-webkit-transform:rotate(-90deg);transform:rotate(-90deg)}.vAccordion--default v-pane-header:focus,.vAccordion--default v-pane-header:hover{color:#2196F3}