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.

132 lines
3.1 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. Button
  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: transform 0.2s ease,
  52. opacity 0.2s ease
  53. ;
  54. -moz-transition: transform 0.2s ease,
  55. opacity 0.2s ease
  56. ;
  57. -o-transition: transform 0.2s ease,
  58. opacity 0.2s ease
  59. ;
  60. -ms-transition: transform 0.2s ease,
  61. opacity 0.2s ease
  62. ;
  63. transition: transform 0.2s ease,
  64. opacity 0.2s ease
  65. ;
  66. -webkit-transform: rotate(0deg);
  67. -moz-transform: rotate(0deg);
  68. -o-transform: rotate(0deg);
  69. -ms-transform: rotate(0deg);
  70. transform: rotate(0deg);
  71. }
  72. .ui.accordion .title .dropdown.icon:before {
  73. content: '\f0da';
  74. }
  75. /*--------------
  76. Loose Coupling
  77. ---------------*/
  78. .ui.basic.accordion.menu {
  79. background-color: #FFFFFF;
  80. -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
  81. -moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
  82. box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
  83. }
  84. .ui.basic.accordion.menu .title,
  85. .ui.basic.accordion.menu .content {
  86. padding: 0em;
  87. }
  88. /*******************************
  89. States
  90. *******************************/
  91. /*--------------
  92. Hover
  93. ---------------*/
  94. .ui.accordion .title:hover,
  95. .ui.accordion .active.title {
  96. color: rgba(0, 0, 0, 0.8);
  97. }
  98. /*--------------
  99. Active
  100. ---------------*/
  101. .ui.accordion .active.title {
  102. background-color: rgba(0, 0, 0, 0.1);
  103. color: rgba(0, 0, 0, 0.8);
  104. }
  105. .ui.accordion .active.title .dropdown.icon {
  106. -webkit-transform: rotate(90deg);
  107. -moz-transform: rotate(90deg);
  108. -o-transform: rotate(90deg);
  109. -ms-transform: rotate(90deg);
  110. transform: rotate(90deg);
  111. }
  112. .ui.accordion .active.content {
  113. display: block;
  114. }
  115. /*******************************
  116. Variations
  117. *******************************/
  118. .ui.basic.accordion {
  119. background-color: transparent;
  120. -webkit-box-shadow: none;
  121. -moz-box-shadow: none;
  122. box-shadow: none;
  123. }
  124. .ui.basic.accordion .title {
  125. background-color: transparent;
  126. border-top: none;
  127. }
  128. .ui.basic.accordion .title,
  129. .ui.basic.accordion .content {
  130. padding-left: 0em;
  131. padding-right: 0em;
  132. }