v-accordion.css 3.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118
  1. /**
  2. * vAccordion - AngularJS multi-level accordion component
  3. * @version v1.2.1
  4. * @link http://lukaszwatroba.github.io/v-accordion
  5. * @author Łukasz Wątroba <l@lukaszwatroba.com>
  6. * @license MIT License, http://www.opensource.org/licenses/MIT
  7. */
  8. /***************************************
  9. vAccordion
  10. ***************************************/
  11. /**
  12. * Example HTML:
  13. *
  14. <v-accordion class="vAccordion--default">
  15. <v-pane>
  16. <v-pane-header id="pane-header" aria-controls="pane-content">
  17. [content]
  18. </v-pane-header>
  19. <v-pane-content id="pane-content" aria-labelledby="pane-header">
  20. [content]
  21. </v-pane-content>
  22. </v-pane>
  23. </v-accordion>
  24. */
  25. /* Base styles
  26. ***************************************/
  27. v-accordion {
  28. display: block; }
  29. v-pane {
  30. display: block; }
  31. v-pane.is-expanded > v-pane-content > div {
  32. visibility: visible; }
  33. v-pane-header {
  34. display: block;
  35. position: relative;
  36. cursor: pointer;
  37. -webkit-user-select: none;
  38. -moz-user-select: none;
  39. -ms-user-select: none;
  40. user-select: none;
  41. outline: none; }
  42. v-pane-header:focus {
  43. outline: none; }
  44. v-pane-header > div {
  45. display: block; }
  46. v-pane-content {
  47. display: block;
  48. position: relative;
  49. overflow: hidden;
  50. max-height: 0px; }
  51. v-pane-content > div {
  52. visibility: none; }
  53. /* Theme: default
  54. ***************************************/
  55. .vAccordion--default v-accordion {
  56. margin-top: 20px;
  57. padding-left: 20px; }
  58. .vAccordion--default v-pane {
  59. -webkit-transition: -webkit-transform 0.5s;
  60. transition: transform 0.5s; }
  61. .vAccordion--default v-pane.is-expanded > v-pane-header {
  62. border-bottom-color: #2196F3; }
  63. .vAccordion--default v-pane.is-expanded > v-pane-header::after {
  64. -webkit-transform: rotate(90deg);
  65. -ms-transform: rotate(90deg);
  66. transform: rotate(90deg);
  67. opacity: 0; }
  68. .vAccordion--default v-pane.is-expanded > v-pane-header::before {
  69. -webkit-transform: rotate(0deg);
  70. -ms-transform: rotate(0deg);
  71. transform: rotate(0deg); }
  72. .vAccordion--default v-pane.is-expanded > v-pane-content > div {
  73. opacity: 1;
  74. -webkit-transform: translate3d(0, 0, 0);
  75. transform: translate3d(0, 0, 0); }
  76. .vAccordion--default v-pane.is-expanded-add > v-pane-content, .vAccordion--default v-pane.is-expanded-remove > v-pane-content {
  77. -webkit-transition: max-height 0.5s;
  78. transition: max-height 0.5s; }
  79. .vAccordion--default v-pane-header {
  80. padding: 5px 0;
  81. margin-bottom: 20px;
  82. border-bottom: 2px solid #D8D8D8;
  83. -webkit-transition: color 0.25s, border-color 0.5s;
  84. transition: color 0.25s, border-color 0.5s; }
  85. .vAccordion--default v-pane-header::after, .vAccordion--default v-pane-header::before {
  86. content: '';
  87. display: block;
  88. position: absolute;
  89. top: 50%;
  90. right: 0;
  91. width: 10px;
  92. height: 1px;
  93. background-color: #2196F3;
  94. -webkit-transform-origin: 50% 50%;
  95. -ms-transform-origin: 50% 50%;
  96. transform-origin: 50% 50%;
  97. -webkit-transition: all 0.25s;
  98. transition: all 0.25s; }
  99. .vAccordion--default v-pane-header::before {
  100. -webkit-transform: rotate(-90deg);
  101. -ms-transform: rotate(-90deg);
  102. transform: rotate(-90deg); }
  103. .vAccordion--default v-pane-header:hover, .vAccordion--default v-pane-header:focus {
  104. color: #2196F3; }
  105. .vAccordion--default v-pane-content > div {
  106. padding-bottom: 20px;
  107. will-change: transform, opacity;
  108. opacity: 0;
  109. -webkit-transform: translate3d(0, 30px, 0);
  110. transform: translate3d(0, 30px, 0);
  111. -webkit-transition: -webkit-transform 0.5s, opacity 0.5s;
  112. transition: transform 0.5s, opacity 0.5s; }