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.

124 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: -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. States
  82. *******************************/
  83. /*--------------
  84. Hover
  85. ---------------*/
  86. .ui.accordion .title:hover,
  87. .ui.accordion .active.title {
  88. color: rgba(0, 0, 0, 0.8);
  89. }
  90. /*--------------
  91. Active
  92. ---------------*/
  93. .ui.accordion .active.title {
  94. background-color: rgba(0, 0, 0, 0.1);
  95. color: rgba(0, 0, 0, 0.8);
  96. }
  97. .ui.accordion .active.title .dropdown.icon {
  98. -webkit-transform: rotate(90deg);
  99. -moz-transform: rotate(90deg);
  100. -o-transform: rotate(90deg);
  101. -ms-transform: rotate(90deg);
  102. transform: rotate(90deg);
  103. }
  104. .ui.accordion .active.content {
  105. display: block;
  106. }
  107. /*******************************
  108. Variations
  109. *******************************/
  110. .ui.basic.accordion {
  111. background-color: transparent;
  112. -webkit-box-shadow: none;
  113. -moz-box-shadow: none;
  114. box-shadow: none;
  115. }
  116. .ui.basic.accordion .title {
  117. background-color: transparent;
  118. border-top: none;
  119. }
  120. .ui.basic.accordion .title,
  121. .ui.basic.accordion .content {
  122. padding-left: 0em;
  123. padding-right: 0em;
  124. }