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.

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