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.

168 lines
3.6 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
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. float: @iconFloat;
  51. opacity: @iconOpacity;
  52. width: @iconWidth;
  53. height: @iconHeight;
  54. margin: @iconMargin;
  55. transition: @iconTransition;
  56. vertical-align: @iconVerticalAlign;
  57. }
  58. /*******************************
  59. Types
  60. *******************************/
  61. /*--------------
  62. Styled
  63. ---------------*/
  64. .ui.styled.accordion {
  65. width: @styledWidth;
  66. }
  67. .ui.styled.accordion,
  68. .ui.styled.accordion .accordion {
  69. border-radius: @styledBorderRadius;
  70. background: @styledBackground;
  71. box-shadow: @styledBoxShadow;
  72. }
  73. .ui.styled.accordion .title,
  74. .ui.styled.accordion .accordion .title {
  75. margin: @styledTitleMargin;
  76. padding: @styledTitlePadding;
  77. color: @styledTitleColor;
  78. font-weight: @styledTitleFontWeight;
  79. border-top: @styledTitleBorder;
  80. transition: @styledTitleTransition;
  81. }
  82. .ui.styled.accordion .title:first-child,
  83. .ui.styled.accordion .accordion .title:first-child {
  84. border-top: none;
  85. }
  86. /* Content */
  87. .ui.styled.accordion .content,
  88. .ui.styled.accordion .accordion .content {
  89. margin: @styledContentMargin;
  90. padding: @styledContentPadding;
  91. }
  92. .ui.styled.accordion .accordion .content {
  93. padding: @styledChildContentMargin;
  94. padding: @styledChildContentPadding;
  95. }
  96. /* Hover */
  97. .ui.styled.accordion .title:hover,
  98. .ui.styled.accordion .active.title,
  99. .ui.styled.accordion .accordion .title:hover,
  100. .ui.styled.accordion .accordion .active.title {
  101. background: @styledTitleHoverBackground;
  102. color: @styledTitleHoverColor;
  103. }
  104. .ui.styled.accordion .accordion .title:hover,
  105. .ui.styled.accordion .accordion .active.title {
  106. background: @styledHoverChildTitleBackground;
  107. color: @styledHoverChildTitleColor;
  108. }
  109. /* Active */
  110. .ui.styled.accordion .active.title {
  111. background: @styledActiveTitleBackground;
  112. color: @styledActiveTitleColor;
  113. }
  114. .ui.styled.accordion .accordion .active.title {
  115. background: @styledActiveChildTitleBackground;
  116. color: @styledActiveChildTitleColor;
  117. }
  118. /*******************************
  119. States
  120. *******************************/
  121. /*--------------
  122. Active
  123. ---------------*/
  124. .ui.accordion .active.content,
  125. .ui.accordion .accordion .active.content {
  126. display: block;
  127. }
  128. /*******************************
  129. Variations
  130. *******************************/
  131. /*--------------
  132. Fluid
  133. ---------------*/
  134. .ui.fluid.accordion,
  135. .ui.fluid.accordion .accordion {
  136. width: 100%;
  137. }
  138. .loadUIOverrides();