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.

134 lines
2.5 KiB

  1. /*
  2. * # Semantic Accordion
  3. * http://github.com/quirkyinc/semantic
  4. *
  5. *
  6. * Copyright 2013 Contributors
  7. * Released under the MIT license
  8. * http://opensource.org/licenses/MIT
  9. *
  10. * Released: April 17 2013
  11. */
  12. /*******************************
  13. Button
  14. *******************************/
  15. .ui.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. -moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
  24. box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
  25. }
  26. .ui.accordion .title {
  27. cursor: pointer;
  28. margin: 0em;
  29. padding: 0.75em 1em;
  30. color: rgba(0, 0, 0, 0.6);
  31. border-top: 1px solid rgba(0, 0, 0, 0.05);
  32. -webkit-transition:
  33. background-color 0.2s ease-out
  34. ;
  35. -moz-transition:
  36. background-color 0.2s ease-out
  37. ;
  38. -o-transition:
  39. background-color 0.2s ease-out
  40. ;
  41. -ms-transition:
  42. background-color 0.2s ease-out
  43. ;
  44. transition:
  45. background-color 0.2s ease-out
  46. ;
  47. }
  48. .ui.accordion .title:first-child {
  49. border-top: none;
  50. }
  51. /* Content */
  52. .ui.accordion .content {
  53. display: none;
  54. margin: 0em;
  55. padding: 1.3em 1em;
  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. -moz-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. States
  72. *******************************/
  73. /*--------------
  74. Hover
  75. ---------------*/
  76. .ui.accordion .title:hover,
  77. .ui.accordion .title.active {
  78. color: rgba(0, 0, 0, 0.8);
  79. }
  80. /*--------------
  81. Active
  82. ---------------*/
  83. .ui.accordion .title.active {
  84. background-color: rgba(0, 0, 0, 0.1);
  85. color: rgba(0, 0, 0, 0.8);
  86. }
  87. .ui.accordion .content.active {
  88. display: block;
  89. }
  90. /*******************************
  91. Variations
  92. *******************************/
  93. .ui.basic.accordion {
  94. background-color: transparent;
  95. -webkit-box-shadow: none;
  96. -moz-box-shadow: none;
  97. box-shadow: none;
  98. }
  99. .ui.basic.accordion .title {
  100. background-color: transparent;
  101. border-top: none;
  102. }
  103. .ui.basic.accordion .title,
  104. .ui.basic.accordion .content {
  105. padding-left: 0em;
  106. padding-right: 0em;
  107. }