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.

102 lines
2.8 KiB

  1. /*******************************
  2. Semantic Module: Sidebar
  3. Author: Jack Lukic
  4. Notes: First Commit March 25, 2013
  5. Sidebar Menu System
  6. *******************************/
  7. /*******************************
  8. Sidebar
  9. *******************************/
  10. .ui.sidebar {
  11. position: fixed;
  12. -webkit-transform: translateX(-275px);
  13. -moz-transform: translateX(-275px);
  14. -o-transform: translateX(-275px);
  15. -ms-transform: translateX(-275px);
  16. transform: translateX(-275px);
  17. width: 275px;
  18. height: 100%;
  19. -ms-overflow-y: auto;
  20. overflow-y: auto;
  21. top: 0px;
  22. left: 0px;
  23. z-index: 900;
  24. -webkit-transition: -webkit-transform 0.5s ease;
  25. -moz-transition: -moz-transform 0.5s ease;
  26. transition: transform 0.5s ease;
  27. }
  28. /*******************************
  29. Types
  30. *******************************/
  31. .ui.right.sidebar {
  32. left: auto;
  33. right: 0px;
  34. -webkit-transform: translateX(275px);
  35. -moz-transform: translateX(275px);
  36. -o-transform: translateX(275px);
  37. -ms-transform: translateX(275px);
  38. transform: translateX(275px);
  39. }
  40. .ui.top.sidebar {
  41. width: 100%;
  42. height: 40px;
  43. overflow: hidden;
  44. -webkit-transform: translateY(-40px);
  45. -moz-transform: translateY(-40px);
  46. -o-transform: translateY(-40px);
  47. -ms-transform: translateY(-40px);
  48. transform: translateY(-40px);
  49. }
  50. .ui.bottom.sidebar {
  51. width: 100%;
  52. height: 40px;
  53. overflow: hidden;
  54. top: auto;
  55. bottom: 0px;
  56. -webkit-transform: translateY(40px);
  57. -moz-transform: translateY(40px);
  58. -o-transform: translateY(40px);
  59. -ms-transform: translateY(40px);
  60. transform: translateY(40px);
  61. }
  62. /*******************************
  63. States
  64. *******************************/
  65. .ui.active.sidebar {
  66. -webkit-transform: translateX(0deg);
  67. -moz-transform: translateX(0deg);
  68. -o-transform: translateX(0deg);
  69. -ms-transform: translateX(0deg);
  70. transform: translateX(0deg);
  71. }
  72. .ui.active.top.sidebar,
  73. .ui.active.bottom.sidebar {
  74. -webkit-transform: translateY(0deg);
  75. -moz-transform: translateY(0deg);
  76. -o-transform: translateY(0deg);
  77. -ms-transform: translateY(0deg);
  78. transform: translateY(0deg);
  79. }
  80. /*******************************
  81. Variations
  82. *******************************/
  83. .ui.floating.sidebar {
  84. -webkit-box-shadow: 5px 0px 5px rgba(0, 0, 0, 0.2);
  85. -moz-box-shadow: 5px 0px 5px rgba(0, 0, 0, 0.2);
  86. box-shadow: 5px 0px 5px rgba(0, 0, 0, 0.2);
  87. }
  88. .ui.right.floating.sidebar {
  89. -webkit-box-shadow: -5px 0px 5px rgba(0, 0, 0, 0.2);
  90. -moz-box-shadow: -5px 0px 5px rgba(0, 0, 0, 0.2);
  91. box-shadow: -5px 0px 5px rgba(0, 0, 0, 0.2);
  92. }
  93. .ui.top.floating.sidebar {
  94. -webkit-box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.2);
  95. -moz-box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.2);
  96. box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.2);
  97. }
  98. .ui.bottom.floating.sidebar {
  99. -webkit-box-shadow: 0px -5px 5px rgba(0, 0, 0, 0.2);
  100. -moz-box-shadow: 0px -5px 5px rgba(0, 0, 0, 0.2);
  101. box-shadow: 0px -5px 5px rgba(0, 0, 0, 0.2);
  102. }