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.

148 lines
3.7 KiB

10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
  1. /*
  2. * # Semantic - Accordion
  3. * http://github.com/jlukic/semantic-ui/
  4. *
  5. *
  6. * Copyright 2014 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 .content > .content,
  42. .ui.accordion .accordion .content {
  43. display: none;
  44. margin: 0em;
  45. padding: 1.3em 1em;
  46. }
  47. /* Arrow */
  48. .ui.accordion .title .dropdown.icon,
  49. .ui.accordion .accordion .title .dropdown.icon {
  50. display: inline-block;
  51. float: none;
  52. margin: 0em 0.5em 0em 0em;
  53. -webkit-transition: -webkit-transform 0.2s ease, opacity 0.2s ease;
  54. -moz-transition: -moz-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. -moz-transform: rotate(0deg);
  60. -ms-transform: rotate(0deg);
  61. transform: rotate(0deg);
  62. }
  63. .ui.accordion .title .dropdown.icon:before,
  64. .ui.accordion .accordion .title .dropdown.icon:before {
  65. content: '\f0da' /*rtl:'\f0d9'*/;
  66. }
  67. /*--------------
  68. Loose Coupling
  69. ---------------*/
  70. .ui.basic.accordion.menu {
  71. background-color: #FFFFFF;
  72. -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
  73. box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
  74. }
  75. .ui.basic.accordion.menu .title,
  76. .ui.basic.accordion.menu .content {
  77. padding: 0em;
  78. }
  79. .ui.accordion.menu .content {
  80. display: none;
  81. }
  82. /*******************************
  83. Types
  84. *******************************/
  85. /*--------------
  86. Basic
  87. ---------------*/
  88. .ui.basic.accordion {
  89. background-color: transparent;
  90. -webkit-box-shadow: none;
  91. box-shadow: none;
  92. }
  93. .ui.basic.accordion .title,
  94. .ui.basic.accordion .accordion .title {
  95. background-color: transparent;
  96. border-top: none;
  97. padding-left: 0em;
  98. padding-right: 0em;
  99. }
  100. .ui.basic.accordion .content,
  101. .ui.basic.accordion .accordion .content {
  102. padding: 0.5em 0em;
  103. }
  104. .ui.basic.accordion .active.title,
  105. .ui.basic.accordion .accordion .active.title {
  106. background-color: transparent;
  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. .ui.accordion .accordion .active.title {
  125. background-color: rgba(0, 0, 0, 0.1);
  126. color: rgba(0, 0, 0, 0.8);
  127. }
  128. .ui.accordion .active.title .dropdown.icon,
  129. .ui.accordion .accordion .active.title .dropdown.icon {
  130. -webkit-transform: rotate(90deg);
  131. -moz-transform: rotate(90deg);
  132. -ms-transform: rotate(90deg);
  133. transform: rotate(90deg);
  134. }
  135. .ui.accordion .active.content,
  136. .ui.accordion .accordion .active.content {
  137. display: block;
  138. }
  139. /*******************************
  140. Variations
  141. *******************************/
  142. /*--------------
  143. Fluid
  144. ---------------*/
  145. .ui.fluid.accordion,
  146. .ui.fluid.accordion .accordion {
  147. width: 100%;
  148. }