sidebar.css 2.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121
  1. .ui-sidebar {
  2. position: fixed;
  3. padding: .5em 1em;
  4. -webkit-transition: transform .3s;
  5. transition: transform .3s;
  6. }
  7. .ui-sidebar-left {
  8. top: 0;
  9. left: 0;
  10. width: 20em;
  11. height: 100%;
  12. -webkit-transform: translateX(-100%);
  13. -ms-transform: translateX(-100%);
  14. transform: translateX(-100%);
  15. }
  16. .ui-sidebar-right {
  17. top: 0;
  18. right: 0;
  19. width: 20em;
  20. height: 100%;
  21. -webkit-transform: translateX(100%);
  22. -ms-transform: translateX(100%);
  23. transform: translateX(100%);
  24. }
  25. .ui-sidebar-top {
  26. top: 0;
  27. left: 0;
  28. width: 100%;
  29. height: 10em;
  30. -webkit-transform: translateY(-100%);
  31. -ms-transform: translateY(-100%);
  32. transform: translateY(-100%);
  33. }
  34. .ui-sidebar-bottom {
  35. bottom: 0;
  36. left: 0;
  37. width: 100%;
  38. height: 10em;
  39. -webkit-transform: translateY(100%);
  40. -ms-transform: translateY(100%);
  41. transform: translateY(100%);
  42. }
  43. .ui-sidebar-full {
  44. width: 100%;
  45. height: 100%;
  46. left: 0;
  47. -webkit-transition: transform 0s;
  48. transition: transform 0s;
  49. }
  50. .ui-sidebar-left.ui-sidebar-active,
  51. .ui-sidebar-right.ui-sidebar-active {
  52. -webkit-transform: translateX(0);
  53. -ms-transform: translateX(0);
  54. transform: translateX(0)
  55. }
  56. .ui-sidebar-left.ui-sidebar-sm,
  57. .ui-sidebar-right.ui-sidebar-sm {
  58. width: 20em;
  59. }
  60. .ui-sidebar-left.ui-sidebar-md,
  61. .ui-sidebar-right.ui-sidebar-md {
  62. width: 40em;
  63. }
  64. .ui-sidebar-left.ui-sidebar-lg,
  65. .ui-sidebar-right.ui-sidebar-lg {
  66. width: 60em;
  67. }
  68. .ui-sidebar-top.ui-sidebar-active,
  69. .ui-sidebar-bottom.ui-sidebar-active {
  70. -webkit-transform: translateY(0);
  71. -ms-transform: translateY(0);
  72. transform: translateY(0)
  73. }
  74. .ui-sidebar-top.ui-sidebar-sm,
  75. .ui-sidebar-bottom.ui-sidebar-sm {
  76. height: 10em;
  77. }
  78. .ui-sidebar-top.ui-sidebar-md,
  79. .ui-sidebar-bottom.ui-sidebar-md {
  80. height: 20em;
  81. }
  82. .ui-sidebar-top.ui-sidebar-lg,
  83. .ui-sidebar-bottom.ui-sidebar-lg {
  84. height: 30em;
  85. }
  86. .ui-sidebar-mask {
  87. position: fixed;
  88. width: 100%;
  89. height: 100%;
  90. }
  91. .ui-sidebar-close {
  92. float: right;
  93. }
  94. .ui-sidebar-close {
  95. cursor: pointer;
  96. }
  97. @media screen and (max-width: 64em) {
  98. .ui-sidebar-left.ui-sidebar-lg,
  99. .ui-sidebar-left.ui-sidebar-md,
  100. .ui-sidebar-right.ui-sidebar-lg,
  101. .ui-sidebar-right.ui-sidebar-md {
  102. width: 20em;
  103. }
  104. }