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.

136 lines
3.3 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 0em 0em 0.5em;
  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. background-color: transparent;
  94. border-top: none;
  95. }
  96. .ui.basic.accordion .title,
  97. .ui.basic.accordion .content {
  98. padding-right: 0em;
  99. padding-left: 0em;
  100. }
  101. /*******************************
  102. States
  103. *******************************/
  104. /*--------------
  105. Hover
  106. ---------------*/
  107. .ui.accordion .title:hover,
  108. .ui.accordion .active.title {
  109. color: rgba(0, 0, 0, 0.8);
  110. }
  111. /*--------------
  112. Active
  113. ---------------*/
  114. .ui.accordion .active.title {
  115. background-color: rgba(0, 0, 0, 0.1);
  116. color: rgba(0, 0, 0, 0.8);
  117. }
  118. .ui.accordion .active.title .dropdown.icon {
  119. -webkit-transform: rotate(90deg);
  120. -moz-transform: rotate(90deg);
  121. -o-transform: rotate(90deg);
  122. -ms-transform: rotate(90deg);
  123. transform: rotate(90deg);
  124. }
  125. .ui.accordion .active.content {
  126. display: block;
  127. }
  128. /*******************************
  129. Variations
  130. *******************************/
  131. /*--------------
  132. Fluid
  133. ---------------*/
  134. .ui.fluid.accordion {
  135. width: 100%;
  136. }