You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

150 lines
3.6 KiB

  1. /*
  2. * # Semantic - Accordion
  3. * http://github.com/jlukic/semantic-ui/
  4. *
  5. *
  6. * Copyright 2013 Contributors
  7. * Released under the MIT license
  8. * http://opensource.org/licenses/MIT
  9. *
  10. */
  11. /*******************************
  12. Accordion
  13. *******************************/
  14. .ui.accordion,
  15. .ui.accordion .accordion {
  16. width: 600px;
  17. max-width: 100%;
  18. font-size: 1em;
  19. border-radius: 0.3125em;
  20. background-color: #FFFFFF;
  21. -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
  22. box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
  23. }
  24. .ui.accordion .title,
  25. .ui.accordion .accordion .title {
  26. cursor: pointer;
  27. margin: 0em;
  28. padding: 0.75em 1em;
  29. color: rgba(0, 0, 0, 0.8);
  30. border-top: 1px solid rgba(0, 0, 0, 0.05);
  31. -webkit-transition: background-color 0.2s ease-out;
  32. transition: background-color 0.2s ease-out;
  33. }
  34. .ui.accordion .title:first-child,
  35. .ui.accordion .accordion .title:first-child {
  36. border-top: none;
  37. }
  38. /* Content */
  39. .ui.accordion .content,
  40. .ui.accordion .accordion .content {
  41. display: none;
  42. margin: 0em;
  43. padding: 1.3em 1em;
  44. }
  45. .ui.accordion .accordion .content {
  46. padding: 0.8em 1em;
  47. }
  48. /* Arrow */
  49. .ui.accordion .title .dropdown.icon,
  50. .ui.accordion .accordion .title .dropdown.icon {
  51. display: inline-block;
  52. float: none;
  53. margin: 0em 0.5em 0em 0em;
  54. -webkit-transition: -webkit-transform 0.2s ease, opacity 0.2s ease;
  55. transition: transform 0.2s ease,
  56. opacity 0.2s ease
  57. ;
  58. -webkit-transform: rotate(0deg);
  59. -ms-transform: rotate(0deg);
  60. transform: rotate(0deg);
  61. }
  62. .ui.accordion .title .dropdown.icon:before,
  63. .ui.accordion .accordion .title .dropdown.icon:before {
  64. content: '\f0da' /*rtl:'\f0d9'*/;
  65. }
  66. /*--------------
  67. Loose Coupling
  68. ---------------*/
  69. .ui.basic.accordion.menu {
  70. background-color: #FFFFFF;
  71. -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
  72. box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
  73. }
  74. .ui.basic.accordion.menu .title,
  75. .ui.basic.accordion.menu .content {
  76. padding: 0em;
  77. }
  78. /*******************************
  79. Types
  80. *******************************/
  81. /*--------------
  82. Basic
  83. ---------------*/
  84. .ui.basic.accordion {
  85. background-color: transparent;
  86. -webkit-box-shadow: none;
  87. box-shadow: none;
  88. }
  89. .ui.basic.accordion .title,
  90. .ui.basic.accordion .accordion .title {
  91. background-color: transparent;
  92. border-top: none;
  93. padding-left: 0em;
  94. padding-right: 0em;
  95. }
  96. .ui.basic.accordion .content {
  97. padding: 0.5em 0em;
  98. }
  99. .ui.basic.accordion .active.title,
  100. .ui.basic.accordion .accordion .active.title {
  101. background-color: transparent;
  102. }
  103. .ui.basic.accordion .accordion {
  104. -webkit-box-shadow: none;
  105. box-shadow: none;
  106. padding: 1em 0.5em;
  107. }
  108. /*******************************
  109. States
  110. *******************************/
  111. /*--------------
  112. Hover
  113. ---------------*/
  114. .ui.accordion .title:hover,
  115. .ui.accordion .active.title,
  116. .ui.accordion .accordion .title:hover,
  117. .ui.accordion .accordion .active.title {
  118. color: rgba(0, 0, 0, 0.8);
  119. }
  120. /*--------------
  121. Active
  122. ---------------*/
  123. .ui.accordion .active.title {
  124. background-color: rgba(0, 0, 0, 0.1);
  125. color: rgba(0, 0, 0, 0.8);
  126. }
  127. .ui.accordion .accordion .active.title {
  128. background-color: rgba(0, 0, 0, 0.05);
  129. color: rgba(0, 0, 0, 0.8);
  130. }
  131. .ui.accordion .active.title .dropdown.icon,
  132. .ui.accordion .accordion .active.title .dropdown.icon {
  133. -webkit-transform: rotate(90deg);
  134. -ms-transform: rotate(90deg);
  135. transform: rotate(90deg);
  136. }
  137. .ui.accordion .active.content,
  138. .ui.accordion .accordion .active.content {
  139. display: block;
  140. }
  141. /*******************************
  142. Variations
  143. *******************************/
  144. /*--------------
  145. Fluid
  146. ---------------*/
  147. .ui.fluid.accordion,
  148. .ui.fluid.accordion .accordion {
  149. width: 100%;
  150. }