index.less 1.3 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859
  1. @import "../styles/mixins/index.less";
  2. @import "../styles/themes/index.less";
  3. .@{wux-prefix}-floating-panel {
  4. position: fixed;
  5. z-index: @z-index-floating-panel;
  6. bottom: 0;
  7. left: 0;
  8. width: 100vw;
  9. display: flex;
  10. flex-direction: column;
  11. touch-action: none;
  12. &::after {
  13. content: "";
  14. display: block;
  15. position: absolute;
  16. bottom: -100vh;
  17. height: 100vh;
  18. width: 100vw;
  19. background: @floating-panel-bg;
  20. }
  21. &__hd {
  22. flex: none;
  23. height: @floating-panel-hd-size;
  24. display: flex;
  25. justify-content: center;
  26. align-items: center;
  27. cursor: grab;
  28. user-select: none;
  29. background-color: @floating-panel-bg;
  30. border-top-left-radius: @floating-panel-hd-radius;
  31. border-top-right-radius: @floating-panel-hd-radius;
  32. }
  33. &__bar {
  34. height: 3px;
  35. width: 20px;
  36. border-radius: 10px;
  37. background: @floating-panel-bar-bg;
  38. }
  39. &__bd {
  40. flex: 1 1;
  41. overflow-y: scroll;
  42. background: @floating-panel-bg;
  43. }
  44. &__mask {
  45. display: block;
  46. width: 100%;
  47. height: 100vh;
  48. position: absolute;
  49. left: 0;
  50. top: -100vh;
  51. background: 0 0;
  52. }
  53. }