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.

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