FloatPanel.less 1.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869
  1. // FloatPanel
  2. .@{prefix}-floatpanel {
  3. position: absolute;
  4. .box-shadow(@floatpanel-box-shadow);
  5. }
  6. .@{prefix}-floatpanel.@{prefix}-fixed {
  7. position: fixed;
  8. }
  9. // Popover panel
  10. .@{prefix}-floatpanel .@{prefix}-arrow,
  11. .@{prefix}-floatpanel .@{prefix}-arrow:after {
  12. position: absolute;
  13. display: block;
  14. width: 0;
  15. height: 0;
  16. border-color: transparent;
  17. border-style: solid;
  18. }
  19. .@{prefix}-floatpanel .@{prefix}-arrow {
  20. border-width: @popover-arrow-outer-width;
  21. }
  22. .@{prefix}-floatpanel .@{prefix}-arrow:after {
  23. border-width: @popover-arrow-width;
  24. content: "";
  25. }
  26. .@{prefix}-floatpanel.@{prefix}-popover {
  27. .reset-gradient();
  28. .border-radius(6px);
  29. .box-shadow(@floatpanel-box-shadow);
  30. top: 0;
  31. left: 0;
  32. background: @popover-bg;
  33. border: 1px solid @panel-border;
  34. border: 1px solid @popover-arrow-outer;
  35. &.@{prefix}-bottom {
  36. margin-top: @popover-arrow-width;
  37. *margin-top: 0;
  38. & > .@{prefix}-arrow {
  39. left: 50%;
  40. margin-left: -@popover-arrow-outer-width;
  41. border-top-width: 0;
  42. border-bottom-color: @panel-border;
  43. border-bottom-color: @popover-arrow-outer;
  44. top: -@popover-arrow-outer-width;
  45. &:after {
  46. top: 1px;
  47. margin-left: -@popover-arrow-width;
  48. border-top-width: 0;
  49. border-bottom-color: @popover-arrow;
  50. }
  51. }
  52. &.@{prefix}-start { margin-left: -22px; }
  53. &.@{prefix}-start > .@{prefix}-arrow { left: 20px; }
  54. &.@{prefix}-end { margin-left: 22px; }
  55. &.@{prefix}-end > .@{prefix}-arrow { right: 10px; left: auto; }
  56. }
  57. }