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.

230 lines
4.1 KiB

  1. /*
  2. * # Semantic - Sidebar
  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. Sidebar
  13. *******************************/
  14. body {
  15. -webkit-transition: margin 0.3s ease, -webkit-transform 0.3s ease;
  16. transition: margin 0.3s ease,
  17. transform 0.3s ease;
  18. }
  19. .ui.sidebar {
  20. position: fixed;
  21. margin: 0 !important;
  22. height: 100% !important;
  23. border-radius: !important 0px;
  24. -webkit-box-sizing: border-box;
  25. -moz-box-sizing: border-box;
  26. -ms-box-sizing: border-box;
  27. box-sizing: border-box;
  28. -ms-overflow-y: auto;
  29. overflow-y: auto;
  30. top: 0px;
  31. right: 0px;
  32. z-index: 999;
  33. -webkit-transition: margin-right 0.3s ease, margin-top 0.3s ease;
  34. transition: margin-right 0.3s ease, margin-top 0.3s ease;
  35. }
  36. /*-------------------
  37. Coupling
  38. --------------------*/
  39. body.pushed.scrolling.ui.dimmable {
  40. position: static;
  41. }
  42. /*******************************
  43. Types
  44. *******************************/
  45. /*-------------------
  46. Direction
  47. --------------------*/
  48. .ui.right.very.thin.sidebar,
  49. .ui.right.thin.sidebar,
  50. .ui.right.sidebar,
  51. .ui.right.wide.sidebar,
  52. .ui.right.very.wide.sidebar {
  53. right: 100%;
  54. margin: 0px !important;
  55. }
  56. .ui.top.sidebar {
  57. width: 100% !important;
  58. }
  59. .ui.bottom.sidebar {
  60. width: 100% !important;
  61. top: 100%;
  62. margin: 0px !important;
  63. }
  64. /*******************************
  65. States
  66. *******************************/
  67. .ui.active.sidebar {
  68. margin-right: 0px !important;
  69. }
  70. .ui.active.top.sidebar,
  71. .ui.active.bottom.sidebar {
  72. margin-top: 0px !important;
  73. }
  74. /*******************************
  75. Variations
  76. *******************************/
  77. /*-------------------
  78. Formatted
  79. --------------------*/
  80. .ui.styled.sidebar {
  81. padding: 1em 1.5em;
  82. background-color: #FFFFFF;
  83. -webkit-box-shadow: 1px 0px 0px rgba(0, 0, 0, 0.1);
  84. box-shadow: 1px 0px 0px rgba(0, 0, 0, 0.1);
  85. }
  86. .ui.styled.very.thin.sidebar {
  87. padding: 0.5em;
  88. }
  89. .ui.styled.thin.sidebar {
  90. padding: 1em;
  91. }
  92. /*-------------------
  93. Floating
  94. --------------------*/
  95. .ui.floating.sidebar {
  96. -webkit-box-shadow: 2px 0px 2px rgba(0, 0, 0, 0.2);
  97. box-shadow: 2px 0px 2px rgba(0, 0, 0, 0.2);
  98. }
  99. .ui.right.floating.sidebar {
  100. -webkit-box-shadow: -2px 0px 2px rgba(0, 0, 0, 0.2);
  101. box-shadow: -2px 0px 2px rgba(0, 0, 0, 0.2);
  102. }
  103. .ui.top.floating.sidebar {
  104. -webkit-box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.2);
  105. box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.2);
  106. }
  107. .ui.bottom.floating.sidebar {
  108. -webkit-box-shadow: 0px -4px 4px rgba(0, 0, 0, 0.2);
  109. box-shadow: 0px -4px 4px rgba(0, 0, 0, 0.2);
  110. }
  111. /*-------------------
  112. Width
  113. --------------------*/
  114. /* Very Thin */
  115. .ui.very.thin.sidebar {
  116. width: 60px !important;
  117. margin-right: -60px !important;
  118. }
  119. .ui.active.very.thin.sidebar {
  120. margin-right: 0px !important;
  121. }
  122. .ui.active.right.very.thin.sidebar {
  123. margin-right: -60px !important;
  124. }
  125. /* Thin */
  126. .ui.thin.sidebar {
  127. width: 200px !important;
  128. margin-right: -200px !important;
  129. }
  130. .ui.active.thin.sidebar {
  131. margin-right: 0px !important;
  132. }
  133. .ui.active.right.thin.sidebar {
  134. margin-right: -200px !important;
  135. }
  136. /* Standard */
  137. .ui.sidebar {
  138. width: 275px !important;
  139. margin-right: -275px !important;
  140. }
  141. .ui.active.sidebar {
  142. margin-right: 0px !important;
  143. }
  144. .ui.active.right.sidebar {
  145. margin-right: -275px !important;
  146. }
  147. /* Wide */
  148. .ui.wide.sidebar {
  149. width: 350px !important;
  150. margin-right: -350px !important;
  151. }
  152. .ui.active.wide.sidebar {
  153. margin-right: 0px !important;
  154. }
  155. .ui.active.right.wide.sidebar {
  156. margin-right: -350px !important;
  157. }
  158. /* Very Wide */
  159. .ui.very.wide.sidebar {
  160. width: 475px !important;
  161. margin-right: -475px !important;
  162. }
  163. .ui.active.very.wide.sidebar {
  164. margin-right: 0px !important;
  165. }
  166. .ui.active.right.very.wide.sidebar {
  167. margin-right: -475px !important;
  168. }
  169. /*-------------------
  170. Height
  171. --------------------*/
  172. /* Standard */
  173. .ui.top.sidebar {
  174. margin: -40px 0px 0px 0px !important;
  175. }
  176. .ui.top.sidebar,
  177. .ui.bottom.sidebar {
  178. height: 40px !important;
  179. }
  180. .ui.active.bottom.sidebar {
  181. margin-top: -40px !important;
  182. }