_Ui.scss 2.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149
  1. .esri-ui {
  2. position: absolute;
  3. left: 0;
  4. top: 0;
  5. bottom: 0;
  6. right: 0;
  7. box-sizing: border-box;
  8. pointer-events: none;
  9. overflow: hidden;
  10. font-size: $font-size;
  11. z-index: 0; // creates root stacking context
  12. .esri-component {
  13. pointer-events: auto;
  14. }
  15. /* attribution's position is a special case */
  16. .esri-attribution {
  17. position: absolute;
  18. bottom: 0;
  19. left: 0;
  20. right: 0;
  21. }
  22. }
  23. .esri-ui-corner {
  24. position: absolute;
  25. display: flex;
  26. }
  27. .esri-ui-inner-container {
  28. position: absolute;
  29. left: 0;
  30. top: 0;
  31. bottom: 0;
  32. right: 0;
  33. }
  34. .esri-ui-manual-container {
  35. & > .esri-component {
  36. position: absolute;
  37. }
  38. /* swipe needs to be placed behind all UI components */
  39. .esri-swipe {
  40. z-index: -1;
  41. }
  42. }
  43. // Top Corners
  44. .esri-ui-top-left,
  45. .esri-ui-top-right {
  46. flex-flow: column;
  47. }
  48. .esri-ui-top-left {
  49. align-items: flex-start;
  50. }
  51. .esri-ui-top-right {
  52. align-items: flex-end;
  53. }
  54. // Bottom Corners
  55. .esri-ui-bottom-left,
  56. .esri-ui-bottom-right {
  57. flex-flow: row;
  58. align-items: flex-end;
  59. }
  60. .esri-ui-bottom-right {
  61. flex-flow: row-reverse;
  62. }
  63. .esri-ui-top-left {
  64. top: 0;
  65. left: 0;
  66. }
  67. .esri-ui-top-right {
  68. top: 0;
  69. right: 0;
  70. }
  71. .esri-ui-top-right .esri-component,
  72. .esri-ui-top-left .esri-component {
  73. margin-bottom: $view-ui-spacing;
  74. }
  75. .esri-ui-bottom-left {
  76. bottom: 0;
  77. left: 0;
  78. .esri-component {
  79. margin-right: $view-ui-spacing;
  80. }
  81. }
  82. .esri-ui-bottom-right {
  83. bottom: 0;
  84. right: 0;
  85. .esri-component {
  86. margin-left: $view-ui-spacing;
  87. }
  88. }
  89. [dir="rtl"] {
  90. .esri-ui-top-left {
  91. align-items: flex-end;
  92. }
  93. .esri-ui-top-right {
  94. align-items: flex-start;
  95. }
  96. .esri-ui-bottom-left {
  97. flex-direction: row-reverse;
  98. }
  99. .esri-ui-bottom-right {
  100. flex-direction: row;
  101. }
  102. }
  103. /* ZoomBox */
  104. .esri-zoom-box__container {
  105. position: relative;
  106. height: 100%;
  107. width: 100%;
  108. }
  109. .esri-zoom-box__overlay {
  110. cursor: crosshair;
  111. width: 100%;
  112. height: 100%;
  113. position: absolute;
  114. top: 0;
  115. left: 0;
  116. }
  117. .esri-zoom-box__overlay-background {
  118. fill: rgba(0, 0, 0, 0.1);
  119. }
  120. .esri-zoom-box__outline {
  121. fill: transparent;
  122. stroke: dodgerblue;
  123. stroke-dasharray: 1, 1;
  124. stroke-width: 2px;
  125. }