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.

163 lines
3.3 KiB

10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
  1. /*
  2. * # Semantic - Accordion
  3. * http://github.com/jlukic/semantic-ui/
  4. *
  5. *
  6. * Copyright 2014 Contributor
  7. * Released under the MIT license
  8. * http://opensource.org/licenses/MIT
  9. *
  10. */
  11. /*******************************
  12. Theme
  13. *******************************/
  14. @type : 'module';
  15. @element : 'accordion';
  16. @import '../../semantic.config';
  17. /*******************************
  18. Accordion
  19. *******************************/
  20. .ui.accordion,
  21. .ui.accordion .accordion {
  22. max-width: 100%;
  23. font-size: @fontSize;
  24. }
  25. .ui.accordion .accordion {
  26. margin: @childAccordionMargin;
  27. padding: @childAccordionPadding;
  28. }
  29. .ui.accordion .title,
  30. .ui.accordion .accordion .title {
  31. cursor: pointer;
  32. font-family: @titleFont;
  33. font-size: @titleFontSize;
  34. padding: @titlePadding;
  35. color: @titleColor;
  36. }
  37. .ui.accordion .content,
  38. .ui.accordion .accordion .content {
  39. display: none;
  40. margin: @contentMargin;
  41. padding: @contentPadding;
  42. }
  43. .ui.accordion .content:last-child {
  44. padding-bottom: 0em;
  45. }
  46. /* Arrow */
  47. .ui.accordion .title .dropdown.icon,
  48. .ui.accordion .accordion .title .dropdown.icon {
  49. display: @iconDisplay;
  50. opacity: @iconOpacity;
  51. width: @iconWidth;
  52. height: @iconHeight;
  53. margin: @iconMargin;
  54. transition: @iconTransition;
  55. vertical-align: @iconVerticalAlign;
  56. }
  57. /*******************************
  58. Types
  59. *******************************/
  60. /*--------------
  61. Styled
  62. ---------------*/
  63. .ui.styled.accordion {
  64. width: @styledWidth;
  65. }
  66. .ui.styled.accordion,
  67. .ui.styled.accordion .accordion {
  68. border-radius: @styledBorderRadius;
  69. background: @styledBackground;
  70. box-shadow: @styledBoxShadow;
  71. }
  72. .ui.styled.accordion .title,
  73. .ui.styled.accordion .accordion .title {
  74. margin: @styledTitleMargin;
  75. padding: @styledTitlePadding;
  76. color: @styledTitleColor;
  77. border-top: @styledTitleBorder;
  78. transition: @styledTitleTransition;
  79. }
  80. .ui.styled.accordion .title:first-child,
  81. .ui.styled.accordion .accordion .title:first-child {
  82. border-top: none;
  83. }
  84. /* Content */
  85. .ui.styled.accordion .content,
  86. .ui.styled.accordion .accordion .content {
  87. margin: @styledContentMargin;
  88. padding: @styledContentPadding;
  89. }
  90. .ui.styled.accordion .accordion .content {
  91. padding: @styledChildContentMargin;
  92. padding: @styledChildContentPadding;
  93. }
  94. /* Active */
  95. .ui.styled.accordion .active.title {
  96. background: @styledActiveTitleBackground;
  97. }
  98. .ui.styled.accordion .accordion .active.title {
  99. background: @styledActiveChildTitleBackground;
  100. }
  101. /*******************************
  102. States
  103. *******************************/
  104. /*--------------
  105. Hover
  106. ---------------*/
  107. .ui.accordion .title:hover,
  108. .ui.accordion .active.title,
  109. .ui.accordion .accordion .title:hover,
  110. .ui.accordion .accordion .active.title {
  111. color: @titleHoverColor;
  112. }
  113. /*--------------
  114. Active
  115. ---------------*/
  116. .ui.accordion .active.content,
  117. .ui.accordion .accordion .active.content {
  118. display: block;
  119. }
  120. .ui.accordion .active.title,
  121. .ui.accordion .accordion .active.title {
  122. color: @selectedTextColor;
  123. }
  124. /*******************************
  125. Variations
  126. *******************************/
  127. /*--------------
  128. Fluid
  129. ---------------*/
  130. .ui.fluid.accordion,
  131. .ui.fluid.accordion .accordion {
  132. width: 100%;
  133. }
  134. .loadUIOverrides();