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.

150 lines
2.8 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:
  16. margin 0.3s ease,
  17. -webkit-transform 0.3s ease
  18. ;
  19. -moz-transition:
  20. margin 0.3s ease,
  21. -moz-transform 0.3s ease
  22. ;
  23. -o-transition:
  24. margin 0.3s ease,
  25. transform 0.3s ease
  26. ;
  27. -ms-transition:
  28. margin 0.3s ease,
  29. transform 0.3s ease
  30. ;
  31. transition:
  32. margin 0.3s ease,
  33. transform 0.3s ease
  34. ;
  35. }
  36. .ui.sidebar {
  37. position: fixed;
  38. margin: 0 !important;
  39. width: 275px !important;
  40. height: 100% !important;
  41. -webkit-border-radius: 0px !important;
  42. -moz-border-radius: 0px !important;
  43. border-radius: 0px !important;
  44. -ms-overflow-y: auto;
  45. overflow-y: auto;
  46. top: 0px;
  47. left: 0px;
  48. z-index: 999;
  49. -webkit-transition:
  50. margin-left 0.3s ease,
  51. margin-top 0.3s ease
  52. ;
  53. -moz-transition:
  54. margin-left 0.3s ease,
  55. margin-top 0.3s ease
  56. ;
  57. -o-transition:
  58. margin-left 0.3s ease,
  59. margin-top 0.3s ease
  60. ;
  61. -ms-transition:
  62. margin-left 0.3s ease,
  63. margin-top 0.3s ease
  64. ;
  65. transition:
  66. margin-left 0.3s ease,
  67. margin-top 0.3s ease
  68. ;
  69. }
  70. /*******************************
  71. Types
  72. *******************************/
  73. .ui.sidebar {
  74. margin-left: -275px !important;
  75. }
  76. .ui.right.sidebar {
  77. left: 100%;
  78. margin: 0px !important;
  79. }
  80. .ui.top.sidebar {
  81. margin: -40px 0px 0px 0px !important;
  82. width: 100% !important;
  83. height: 40px !important;
  84. }
  85. .ui.bottom.sidebar {
  86. width: 100% !important;
  87. height: 40px !important;
  88. top: 100%;
  89. margin: 0px !important;
  90. }
  91. /*******************************
  92. States
  93. *******************************/
  94. .ui.active.sidebar {
  95. margin-left: 0px !important;
  96. }
  97. .ui.active.right.sidebar {
  98. margin-left: -275px !important;
  99. }
  100. .ui.active.top.sidebar {
  101. margin-top: 0px !important;
  102. }
  103. .ui.active.bottom.sidebar {
  104. margin-top: -40px !important;
  105. }
  106. /*******************************
  107. Variations
  108. *******************************/
  109. .ui.floating.sidebar {
  110. -webkit-box-shadow: 3px 0px 3px rgba(0, 0, 0, 0.2);
  111. -moz-box-shadow: 3px 0px 3px rgba(0, 0, 0, 0.2);
  112. box-shadow: 3px 0px 3px rgba(0, 0, 0, 0.2);
  113. }
  114. .ui.right.floating.sidebar {
  115. -webkit-box-shadow: -3px 0px 3px rgba(0, 0, 0, 0.2);
  116. -moz-box-shadow: -3px 0px 3px rgba(0, 0, 0, 0.2);
  117. box-shadow: -3px 0px 3px rgba(0, 0, 0, 0.2);
  118. }
  119. .ui.top.floating.sidebar {
  120. -webkit-box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.2);
  121. -moz-box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.2);
  122. box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.2);
  123. }
  124. .ui.bottom.floating.sidebar {
  125. -webkit-box-shadow: 0px -5px 5px rgba(0, 0, 0, 0.2);
  126. -moz-box-shadow: 0px -5px 5px rgba(0, 0, 0, 0.2);
  127. box-shadow: 0px -5px 5px rgba(0, 0, 0, 0.2);
  128. }