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.

141 lines
3.4 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. width: 600px;
  16. max-width: 100%;
  17. overflow: hidden;
  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. -moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
  23. box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
  24. }
  25. .ui.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. -o-transition: background-color 0.2s ease-out;
  34. -ms-transition: background-color 0.2s ease-out;
  35. transition: background-color 0.2s ease-out;
  36. }
  37. .ui.accordion .title:first-child {
  38. border-top: none;
  39. }
  40. /* Content */
  41. .ui.accordion .content {
  42. display: none;
  43. margin: 0em;
  44. padding: 1.3em 1em;
  45. }
  46. /* Arrow */
  47. .ui.accordion .title .dropdown.icon {
  48. display: inline-block;
  49. float: none;
  50. margin: 0em 0.5em 0em 0em;
  51. -webkit-transition: -webkit-transform 0.2s ease, opacity 0.2s ease;
  52. -moz-transition: -moz-transform 0.2s ease, opacity 0.2s ease;
  53. -o-transition: -o-transform 0.2s ease, opacity 0.2s ease;
  54. -ms-transition: -ms-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. -o-transform: rotate(0deg);
  61. -ms-transform: rotate(0deg);
  62. transform: rotate(0deg);
  63. }
  64. .ui.accordion .title .dropdown.icon:before {
  65. content: '\f0da';
  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. -moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
  74. box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
  75. }
  76. .ui.basic.accordion.menu .title,
  77. .ui.basic.accordion.menu .content {
  78. padding: 0em;
  79. }
  80. /*******************************
  81. Types
  82. *******************************/
  83. /*--------------
  84. Basic
  85. ---------------*/
  86. .ui.basic.accordion {
  87. background-color: transparent;
  88. -webkit-box-shadow: none;
  89. -moz-box-shadow: none;
  90. box-shadow: none;
  91. }
  92. .ui.basic.accordion .title,
  93. .ui.basic.accordion .title {
  94. background-color: transparent;
  95. border-top: none;
  96. padding-left: 0em;
  97. padding-right: 0em;
  98. }
  99. .ui.basic.accordion .content {
  100. padding-left: 0em;
  101. padding-right: 0em;
  102. }
  103. .ui.basic.accordion .active.title {
  104. background-color: transparent;
  105. }
  106. /*******************************
  107. States
  108. *******************************/
  109. /*--------------
  110. Hover
  111. ---------------*/
  112. .ui.accordion .title:hover,
  113. .ui.accordion .active.title {
  114. color: rgba(0, 0, 0, 0.8);
  115. }
  116. /*--------------
  117. Active
  118. ---------------*/
  119. .ui.accordion .active.title {
  120. background-color: rgba(0, 0, 0, 0.1);
  121. color: rgba(0, 0, 0, 0.8);
  122. }
  123. .ui.accordion .active.title .dropdown.icon {
  124. -webkit-transform: rotate(90deg);
  125. -moz-transform: rotate(90deg);
  126. -o-transform: rotate(90deg);
  127. -ms-transform: rotate(90deg);
  128. transform: rotate(90deg);
  129. }
  130. .ui.accordion .active.content {
  131. display: block;
  132. }
  133. /*******************************
  134. Variations
  135. *******************************/
  136. /*--------------
  137. Fluid
  138. ---------------*/
  139. .ui.fluid.accordion {
  140. width: 100%;
  141. }