_View.scss 4.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194
  1. .esri-view {
  2. display: flex;
  3. margin: 0;
  4. padding: 0;
  5. .esri-view-user-storage {
  6. overflow: hidden;
  7. }
  8. .esri-view-root {
  9. position: relative;
  10. flex: 1 1 100%;
  11. border: none;
  12. padding: 0;
  13. margin: 0;
  14. -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  15. -webkit-tap-highlight-color: transparent;
  16. }
  17. .esri-view-surface {
  18. position: absolute;
  19. border: none;
  20. padding: 0;
  21. margin: 0;
  22. left: 0;
  23. top: 0;
  24. width: 100%;
  25. height: 100%;
  26. overflow: hidden;
  27. user-select: none;
  28. /*
  29. * TODO
  30. * Layers should probably manage this on their own
  31. */
  32. direction: ltr;
  33. &--touch {
  34. &-none {
  35. touch-action: none;
  36. }
  37. &-pan {
  38. touch-action: pan-x pan-y;
  39. }
  40. }
  41. }
  42. .esri-view-surface--inset-outline {
  43. outline: 0;
  44. }
  45. .esri-view-surface--inset-outline:focus::after {
  46. content: "";
  47. box-sizing: border-box;
  48. position: absolute;
  49. z-index: 999;
  50. top: 0;
  51. left: 0;
  52. height: 100%;
  53. width: 100%;
  54. outline: auto 2px Highlight;
  55. outline: auto 5px -webkit-focus-ring-color;
  56. outline-offset: -3px;
  57. pointer-events: none;
  58. overflow: hidden;
  59. }
  60. .esri-view-surface[data-interacting="true"] {
  61. cursor: move;
  62. cursor: grabbing;
  63. cursor: -moz-grabbing;
  64. cursor: -webkit-grabbing;
  65. }
  66. /*
  67. * CSS2 cursors:
  68. * auto, inherit, crosshair, default, help, move, pointer , progress, text, wait,
  69. * e-resize, ne-resize, nw-resize, n-resize, se-resize, sw-resize, s-resize, w-resize
  70. *
  71. * CSS3 cursors:
  72. * vertical-text, no-drop, not-allowed,
  73. * ew-resize, ns-resize, nesw-resize, nwse-resize, col-resize, row-resize, all-scroll
  74. *
  75. * CSS3 with limited support:
  76. * - cursor: none (not IE, Safari, Opera)
  77. * - cursor: context-menu (not Firefox, Chrome)
  78. * - cursor: cell (not Safari)
  79. * - cursor: alias (not Safari)
  80. * - cursor: copy (not Safari)
  81. *
  82. * Browser specific:
  83. * - cursor: -webkit-grab; cursor: -moz-grab;
  84. * - cursor: -webkit-grabbing; cursor: -moz-grabbing;
  85. * - cursor: -webkit-zoom-in; cursor: -moz-zoom-in;
  86. * - cursor: -webkit-zoom-out; cursor: -moz-zoom-out;
  87. *
  88. * Supported cursors:
  89. * default, crosshair, help, move, pointer, progress, grab, grabbing
  90. */
  91. .esri-view-surface[data-cursor="copy"] {
  92. cursor: copy;
  93. }
  94. .esri-view-surface[data-cursor="crosshair"] {
  95. cursor: crosshair;
  96. }
  97. .esri-view-surface[data-cursor="help"] {
  98. cursor: help;
  99. }
  100. .esri-view-surface[data-cursor="move"] {
  101. cursor: move;
  102. }
  103. .esri-view-surface[data-cursor="pointer"] {
  104. cursor: pointer;
  105. }
  106. .esri-view-surface[data-cursor="progress"] {
  107. cursor: progress;
  108. }
  109. .esri-view-surface[data-cursor="grab"] {
  110. cursor: move;
  111. cursor: grab;
  112. cursor: -moz-grab;
  113. cursor: -webkit-grab;
  114. }
  115. .esri-view-surface[data-cursor="grabbing"] {
  116. cursor: move;
  117. cursor: grabbing;
  118. cursor: -moz-grabbing;
  119. cursor: -webkit-grabbing;
  120. }
  121. .esri-view-surface[data-cursor="n-resize"] {
  122. cursor: n-resize;
  123. }
  124. .esri-view-surface[data-cursor="e-resize"] {
  125. cursor: e-resize;
  126. }
  127. .esri-view-surface[data-cursor="s-resize"] {
  128. cursor: s-resize;
  129. }
  130. .esri-view-surface[data-cursor="w-resize"] {
  131. cursor: w-resize;
  132. }
  133. .esri-view-surface[data-cursor="ne-resize"] {
  134. cursor: ne-resize;
  135. }
  136. .esri-view-surface[data-cursor="nw-resize"] {
  137. cursor: nw-resize;
  138. }
  139. .esri-view-surface[data-cursor="se-resize"] {
  140. cursor: se-resize;
  141. }
  142. .esri-view-surface[data-cursor="sw-resize"] {
  143. cursor: sw-resize;
  144. }
  145. .esri-view-surface[data-cursor="ew-resize"] {
  146. cursor: ew-resize;
  147. }
  148. .esri-view-surface[data-cursor="ns-resize"] {
  149. cursor: ns-resize;
  150. }
  151. .esri-view-surface[data-cursor="nesw-resize"] {
  152. cursor: nesw-resize;
  153. }
  154. .esri-view-surface[data-cursor="nwse-resize"] {
  155. cursor: nwse-resize;
  156. }
  157. .esri-display-object,
  158. .esri-bitmap {
  159. position: absolute;
  160. border: none;
  161. margin: 0;
  162. padding: 0; // @dris0000 @juan6600
  163. // Keep these prefixes?
  164. -webkit-user-drag: none;
  165. -webkit-user-select: none;
  166. }
  167. .esri-bitmap {
  168. max-width: none;
  169. transform-origin: top left;
  170. }
  171. }