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.

144 lines
3.6 KiB

10 years ago
  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: 1rem;
  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.6);
  30. border-top: 1px solid rgba(0, 0, 0, 0.05);
  31. -webkit-transition: background-color 0.2s ease-out;
  32. -moz-transition: background-color 0.2s ease-out;
  33. transition: background-color 0.2s ease-out;
  34. }
  35. .ui.accordion .title:first-child,
  36. .ui.accordion .accordion .title:first-child {
  37. border-top: none;
  38. }
  39. /* Content */
  40. .ui.accordion .content,
  41. .ui.accordion .accordion .content {
  42. display: none;
  43. margin: 0em;
  44. padding: 1.3em 1em;
  45. }
  46. /* Arrow */
  47. .ui.accordion .title .dropdown.icon,
  48. .ui.accordion .accordion .title .dropdown.icon {
  49. display: inline-block;
  50. float: none;
  51. margin: 0em 0.5em 0em 0em;
  52. -webkit-transition: -webkit-transform 0.2s ease, opacity 0.2s ease;
  53. -moz-transition: -moz-transform 0.2s ease, opacity 0.2s ease;
  54. transition: transform 0.2s ease,
  55. opacity 0.2s ease
  56. ;
  57. -webkit-transform: rotate(0deg);
  58. -moz-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. .ui.basic.accordion .accordion .content {
  98. padding: 0.5em 0em;
  99. }
  100. .ui.basic.accordion .active.title,
  101. .ui.basic.accordion .accordion .active.title {
  102. background-color: transparent;
  103. }
  104. /*******************************
  105. States
  106. *******************************/
  107. /*--------------
  108. Hover
  109. ---------------*/
  110. .ui.accordion .title:hover,
  111. .ui.accordion .active.title,
  112. .ui.accordion .accordion .title:hover,
  113. .ui.accordion .accordion .active.title {
  114. color: rgba(0, 0, 0, 0.8);
  115. }
  116. /*--------------
  117. Active
  118. ---------------*/
  119. .ui.accordion .active.title,
  120. .ui.accordion .accordion .active.title {
  121. background-color: rgba(0, 0, 0, 0.1);
  122. color: rgba(0, 0, 0, 0.8);
  123. }
  124. .ui.accordion .active.title .dropdown.icon,
  125. .ui.accordion .accordion .active.title .dropdown.icon {
  126. -webkit-transform: rotate(90deg);
  127. -moz-transform: rotate(90deg);
  128. -ms-transform: rotate(90deg);
  129. transform: rotate(90deg);
  130. }
  131. .ui.accordion .active.content,
  132. .ui.accordion .accordion .active.content {
  133. display: block;
  134. }
  135. /*******************************
  136. Variations
  137. *******************************/
  138. /*--------------
  139. Fluid
  140. ---------------*/
  141. .ui.fluid.accordion,
  142. .ui.fluid.accordion .accordion {
  143. width: 100%;
  144. }