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.

162 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
  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. 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. }
  56. /*******************************
  57. Types
  58. *******************************/
  59. /*--------------
  60. Styled
  61. ---------------*/
  62. .ui.styled.accordion {
  63. width: @styledWidth;
  64. }
  65. .ui.styled.accordion,
  66. .ui.styled.accordion .accordion {
  67. border-radius: @styledBorderRadius;
  68. background: @styledBackground;
  69. box-shadow: @styledBoxShadow;
  70. }
  71. .ui.styled.accordion .title,
  72. .ui.styled.accordion .accordion .title {
  73. margin: @styledTitleMargin;
  74. padding: @styledTitlePadding;
  75. color: @styledTitleColor;
  76. border-top: @styledTitleBorder;
  77. transition: @styledTitleTransition;
  78. }
  79. .ui.styled.accordion .title:first-child,
  80. .ui.styled.accordion .accordion .title:first-child {
  81. border-top: none;
  82. }
  83. /* Content */
  84. .ui.styled.accordion .content,
  85. .ui.styled.accordion .accordion .content {
  86. margin: @styledContentMargin;
  87. padding: @styledContentPadding;
  88. }
  89. .ui.styled.accordion .accordion .content {
  90. padding: @styledChildContentMargin;
  91. padding: @styledChildContentPadding;
  92. }
  93. /* Active */
  94. .ui.styled.accordion .active.title {
  95. background: @styledActiveTitleBackground;
  96. }
  97. .ui.styled.accordion .accordion .active.title {
  98. background: @styledActiveChildTitleBackground;
  99. }
  100. /*******************************
  101. States
  102. *******************************/
  103. /*--------------
  104. Hover
  105. ---------------*/
  106. .ui.accordion .title:hover,
  107. .ui.accordion .active.title,
  108. .ui.accordion .accordion .title:hover,
  109. .ui.accordion .accordion .active.title {
  110. color: @titleHoverColor;
  111. }
  112. /*--------------
  113. Active
  114. ---------------*/
  115. .ui.accordion .active.content,
  116. .ui.accordion .accordion .active.content {
  117. display: block;
  118. }
  119. .ui.accordion .active.title,
  120. .ui.accordion .accordion .active.title {
  121. color: @selectedTextColor;
  122. }
  123. /*******************************
  124. Variations
  125. *******************************/
  126. /*--------------
  127. Fluid
  128. ---------------*/
  129. .ui.fluid.accordion,
  130. .ui.fluid.accordion .accordion {
  131. width: 100%;
  132. }
  133. .loadUIOverrides();