index.less 1.3 KB

12345678910111213141516171819202122232425262728293031323334353637383940
  1. @import "../styles/mixins/index.less";
  2. @import "../styles/themes/index.less";
  3. .@{wux-prefix}-safe-area {
  4. --safe-area-inset-top: @safe-area-inset-top;
  5. --safe-area-inset-bottom: @safe-area-inset-bottom;
  6. --safe-area-multiple: @safe-area-multiple;
  7. display: block;
  8. width: 100%;
  9. box-sizing: border-box;
  10. &--position-top {
  11. padding-top: calc(~"var(--safe-area-inset-top) * var(--safe-area-multiple)");
  12. }
  13. &--position-top&--supports {
  14. @supports (padding-top: constant(safe-area-inset-top)) {
  15. padding-top: calc(~"constant(safe-area-inset-top) * var(--safe-area-multiple)");
  16. }
  17. @supports (padding-top: env(safe-area-inset-top)) {
  18. padding-top: calc(~"env(safe-area-inset-top) * var(--safe-area-multiple)");
  19. }
  20. }
  21. &--position-bottom {
  22. padding-bottom: calc(~"var(--safe-area-inset-bottom) * var(--safe-area-multiple)");
  23. }
  24. &--position-bottom&--supports {
  25. @supports (padding-bottom: constant(safe-area-inset-bottom)) {
  26. padding-bottom: calc(~"constant(safe-area-inset-bottom) * var(--safe-area-multiple)");
  27. }
  28. @supports (padding-bottom: env(safe-area-inset-bottom)) {
  29. padding-bottom: calc(~"env(safe-area-inset-bottom) * var(--safe-area-multiple)");
  30. }
  31. }
  32. }