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.

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