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.

155 lines
2.9 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. .ui.accordion .accordion {
  16. width: 600px;
  17. max-width: 100%;
  18. overflow: hidden;
  19. font-size: 1rem;
  20. border-radius: 0.3125em;
  21. background-color: #FFFFFF;
  22. -webkit-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. transition: background-color 0.2s ease-out;
  33. }
  34. .ui.accordion .title:first-child {
  35. border-top: none;
  36. }
  37. /* Content */
  38. .ui.accordion .content {
  39. display: none;
  40. margin: 0em;
  41. padding: 1.3em 1em;
  42. }
  43. /* Arrow */
  44. .ui.accordion .title .dropdown.icon {
  45. display: inline-block;
  46. float: none;
  47. margin: 0em 0.5em 0em 0em;
  48. -webkit-transition: -webkit-transform 0.2s ease, opacity 0.2s ease;
  49. transition: transform 0.2s ease,
  50. opacity 0.2s ease;
  51. -webkit-transform: rotate(0deg);
  52. -ms-transform: rotate(0deg);
  53. transform: rotate(0deg);
  54. }
  55. .ui.accordion .title .dropdown.icon:before {
  56. content: '\f0da';
  57. }
  58. /*--------------
  59. Loose Coupling
  60. ---------------*/
  61. .ui.basic.accordion.menu {
  62. background-color: #FFFFFF;
  63. -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
  64. box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
  65. }
  66. .ui.basic.accordion.menu .title,
  67. .ui.basic.accordion.menu .content {
  68. padding: 0em;
  69. }
  70. /*******************************
  71. Types
  72. *******************************/
  73. /*--------------
  74. Basic
  75. ---------------*/
  76. .ui.basic.accordion {
  77. background-color: transparent;
  78. -webkit-box-shadow: none;
  79. box-shadow: none;
  80. }
  81. .ui.basic.accordion .title,
  82. .ui.basic.accordion .title {
  83. background-color: transparent;
  84. border-top: none;
  85. padding-left: 0em;
  86. padding-right: 0em;
  87. }
  88. .ui.basic.accordion .content {
  89. padding: 0.5em 0em;
  90. }
  91. .ui.basic.accordion .active.title {
  92. background-color: transparent;
  93. }
  94. /*******************************
  95. States
  96. *******************************/
  97. /*--------------
  98. Hover
  99. ---------------*/
  100. .ui.accordion .title:hover,
  101. .ui.accordion .active.title {
  102. color: rgba(0, 0, 0, 0.8);
  103. }
  104. /*--------------
  105. Active
  106. ---------------*/
  107. .ui.accordion .active.title {
  108. background-color: rgba(0, 0, 0, 0.1);
  109. color: rgba(0, 0, 0, 0.8);
  110. }
  111. .ui.accordion .active.title .dropdown.icon {
  112. -webkit-transform: rotate(90deg);
  113. -ms-transform: rotate(90deg);
  114. transform: rotate(90deg);
  115. }
  116. .ui.accordion .active.content {
  117. display: block;
  118. }
  119. /*******************************
  120. Variations
  121. *******************************/
  122. /*--------------
  123. Fluid
  124. ---------------*/
  125. .ui.fluid.accordion,
  126. .ui.fluid.accordion .accordion {
  127. width: 100%;
  128. }