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.

97 lines
2.3 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: background-color 0.2s ease-out;
  33. -moz-transition: background-color 0.2s ease-out;
  34. -o-transition: background-color 0.2s ease-out;
  35. -ms-transition: background-color 0.2s ease-out;
  36. transition: background-color 0.2s ease-out;
  37. }
  38. .ui.accordion .title:first-child {
  39. border-top: none;
  40. }
  41. /* Content */
  42. .ui.accordion .content {
  43. display: none;
  44. margin: 0em;
  45. padding: 1.3em 1em;
  46. }
  47. /*--------------
  48. Loose Coupling
  49. ---------------*/
  50. .ui.basic.accordion.menu {
  51. background-color: #FFFFFF;
  52. -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
  53. -moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
  54. box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
  55. }
  56. .ui.basic.accordion.menu .title,
  57. .ui.basic.accordion.menu .content {
  58. padding: 0em;
  59. }
  60. /*******************************
  61. States
  62. *******************************/
  63. /*--------------
  64. Hover
  65. ---------------*/
  66. .ui.accordion .title:hover,
  67. .ui.accordion .title.active {
  68. color: rgba(0, 0, 0, 0.8);
  69. }
  70. /*--------------
  71. Active
  72. ---------------*/
  73. .ui.accordion .title.active {
  74. background-color: rgba(0, 0, 0, 0.1);
  75. color: rgba(0, 0, 0, 0.8);
  76. }
  77. .ui.accordion .content.active {
  78. display: block;
  79. }
  80. /*******************************
  81. Variations
  82. *******************************/
  83. .ui.basic.accordion {
  84. background-color: transparent;
  85. -webkit-box-shadow: none;
  86. -moz-box-shadow: none;
  87. box-shadow: none;
  88. }
  89. .ui.basic.accordion .title {
  90. background-color: transparent;
  91. border-top: none;
  92. }
  93. .ui.basic.accordion .title,
  94. .ui.basic.accordion .content {
  95. padding-left: 0em;
  96. padding-right: 0em;
  97. }