123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118 |
- /**
- * vAccordion - AngularJS multi-level accordion component
- * @version v1.2.1
- * @link http://lukaszwatroba.github.io/v-accordion
- * @author Łukasz Wątroba <l@lukaszwatroba.com>
- * @license MIT License, http://www.opensource.org/licenses/MIT
- */
- /***************************************
- vAccordion
- ***************************************/
- /**
- * Example HTML:
- *
- <v-accordion class="vAccordion--default">
- <v-pane>
- <v-pane-header id="pane-header" aria-controls="pane-content">
- [content]
- </v-pane-header>
- <v-pane-content id="pane-content" aria-labelledby="pane-header">
- [content]
- </v-pane-content>
- </v-pane>
- </v-accordion>
- */
- /* Base styles
- ***************************************/
- v-accordion {
- display: block; }
- v-pane {
- display: block; }
- v-pane.is-expanded > v-pane-content > div {
- visibility: visible; }
- 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: none; }
- v-pane-header:focus {
- outline: none; }
- v-pane-header > div {
- display: block; }
- v-pane-content {
- display: block;
- position: relative;
- overflow: hidden;
- max-height: 0px; }
- v-pane-content > div {
- visibility: none; }
- /* Theme: default
- ***************************************/
- .vAccordion--default v-accordion {
- margin-top: 20px;
- padding-left: 20px; }
- .vAccordion--default v-pane {
- -webkit-transition: -webkit-transform 0.5s;
- transition: transform 0.5s; }
- .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);
- -ms-transform: rotate(90deg);
- transform: rotate(90deg);
- opacity: 0; }
- .vAccordion--default v-pane.is-expanded > v-pane-header::before {
- -webkit-transform: rotate(0deg);
- -ms-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.is-expanded-add > v-pane-content, .vAccordion--default v-pane.is-expanded-remove > v-pane-content {
- -webkit-transition: max-height 0.5s;
- transition: max-height 0.5s; }
- .vAccordion--default v-pane-header {
- padding: 5px 0;
- margin-bottom: 20px;
- border-bottom: 2px solid #D8D8D8;
- -webkit-transition: color 0.25s, border-color 0.5s;
- transition: color 0.25s, border-color 0.5s; }
- .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%;
- -ms-transform-origin: 50% 50%;
- transform-origin: 50% 50%;
- -webkit-transition: all 0.25s;
- transition: all 0.25s; }
- .vAccordion--default v-pane-header::before {
- -webkit-transform: rotate(-90deg);
- -ms-transform: rotate(-90deg);
- transform: rotate(-90deg); }
- .vAccordion--default v-pane-header:hover, .vAccordion--default v-pane-header:focus {
- color: #2196F3; }
- .vAccordion--default v-pane-content > div {
- padding-bottom: 20px;
- will-change: transform, opacity;
- opacity: 0;
- -webkit-transform: translate3d(0, 30px, 0);
- transform: translate3d(0, 30px, 0);
- -webkit-transition: -webkit-transform 0.5s, opacity 0.5s;
- transition: transform 0.5s, opacity 0.5s; }
|