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.

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