uni-drawer.wxss 1.2 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758
  1. .content.data-v-558f1882 {
  2. display: flex;
  3. flex-direction: column;
  4. box-sizing: border-box;
  5. width: 100vw;
  6. height: 100vh;
  7. }
  8. .uni-drawer.data-v-558f1882 {
  9. display: block;
  10. position: fixed;
  11. top: 0;
  12. left: 0;
  13. right: 0;
  14. bottom: 0;
  15. overflow: hidden;
  16. z-index: 999;
  17. }
  18. .uni-drawer__content.data-v-558f1882 {
  19. display: block;
  20. position: absolute;
  21. top: 0;
  22. width: 220px;
  23. bottom: 0;
  24. background-color: #ffffff;
  25. transition: -webkit-transform 0.3s ease;
  26. transition: transform 0.3s ease;
  27. transition: transform 0.3s ease, -webkit-transform 0.3s ease;
  28. }
  29. .uni-drawer--left.data-v-558f1882 {
  30. left: 0;
  31. -webkit-transform: translateX(-100%);
  32. transform: translateX(-100%);
  33. }
  34. .uni-drawer--right.data-v-558f1882 {
  35. right: 0;
  36. -webkit-transform: translateX(100%);
  37. transform: translateX(100%);
  38. }
  39. .uni-drawer__content--visible.data-v-558f1882 {
  40. -webkit-transform: translateX(0px);
  41. transform: translateX(0px);
  42. }
  43. .uni-drawer__mask.data-v-558f1882 {
  44. display: block;
  45. opacity: 0;
  46. position: absolute;
  47. top: 0;
  48. left: 0;
  49. bottom: 0;
  50. right: 0;
  51. background-color: rgba(0, 0, 0, 0.4);
  52. transition: opacity 0.3s;
  53. }
  54. .uni-drawer__mask--visible.data-v-558f1882 {
  55. display: block;
  56. opacity: 1;
  57. }