.esri-view { display: flex; margin: 0; padding: 0; .esri-view-user-storage { overflow: hidden; } .esri-view-root { position: relative; flex: 1 1 100%; margin: 0; padding: 0; border: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-tap-highlight-color: transparent; } .esri-view-surface { position: absolute; top: 0; left: 0; width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden; /* * TODO * Layers should probably manage this on their own */ direction: ltr; border: none; user-select: none; &--touch { &-none { touch-action: none; } &-pan { touch-action: pan-x pan-y; } } } .esri-view-surface--inset-outline { outline: 0; } .esri-view-surface--inset-outline:focus::after { position: absolute; top: 0; left: 0; z-index: 999; box-sizing: border-box; width: 100%; height: 100%; overflow: hidden; outline: auto 2px Highlight; outline: auto 5px -webkit-focus-ring-color; outline-offset: -3px; content: ''; pointer-events: none; } .esri-view-surface[data-interacting='true'] { cursor: move; cursor: grabbing; cursor: -moz-grabbing; cursor: -webkit-grabbing; } /* * CSS2 cursors: * auto, inherit, crosshair, default, help, move, pointer , progress, text, wait, * e-resize, ne-resize, nw-resize, n-resize, se-resize, sw-resize, s-resize, w-resize * * CSS3 cursors: * vertical-text, no-drop, not-allowed, * ew-resize, ns-resize, nesw-resize, nwse-resize, col-resize, row-resize, all-scroll * * CSS3 with limited support: * - cursor: none (not IE, Safari, Opera) * - cursor: context-menu (not Firefox, Chrome) * - cursor: cell (not Safari) * - cursor: alias (not Safari) * - cursor: copy (not Safari) * * Browser specific: * - cursor: -webkit-grab; cursor: -moz-grab; * - cursor: -webkit-grabbing; cursor: -moz-grabbing; * - cursor: -webkit-zoom-in; cursor: -moz-zoom-in; * - cursor: -webkit-zoom-out; cursor: -moz-zoom-out; * * Supported cursors: * default, crosshair, help, move, pointer, progress, grab, grabbing */ .esri-view-surface[data-cursor='copy'] { cursor: copy; } .esri-view-surface[data-cursor='crosshair'] { cursor: crosshair; } .esri-view-surface[data-cursor='help'] { cursor: help; } .esri-view-surface[data-cursor='move'] { cursor: move; } .esri-view-surface[data-cursor='pointer'] { cursor: pointer; } .esri-view-surface[data-cursor='progress'] { cursor: progress; } .esri-view-surface[data-cursor='grab'] { cursor: move; cursor: grab; cursor: -moz-grab; cursor: -webkit-grab; } .esri-view-surface[data-cursor='grabbing'] { cursor: move; cursor: grabbing; cursor: -moz-grabbing; cursor: -webkit-grabbing; } .esri-view-surface[data-cursor='n-resize'] { cursor: n-resize; } .esri-view-surface[data-cursor='e-resize'] { cursor: e-resize; } .esri-view-surface[data-cursor='s-resize'] { cursor: s-resize; } .esri-view-surface[data-cursor='w-resize'] { cursor: w-resize; } .esri-view-surface[data-cursor='ne-resize'] { cursor: ne-resize; } .esri-view-surface[data-cursor='nw-resize'] { cursor: nw-resize; } .esri-view-surface[data-cursor='se-resize'] { cursor: se-resize; } .esri-view-surface[data-cursor='sw-resize'] { cursor: sw-resize; } .esri-view-surface[data-cursor='ew-resize'] { cursor: ew-resize; } .esri-view-surface[data-cursor='ns-resize'] { cursor: ns-resize; } .esri-view-surface[data-cursor='nesw-resize'] { cursor: nesw-resize; } .esri-view-surface[data-cursor='nwse-resize'] { cursor: nwse-resize; } .esri-display-object, .esri-bitmap { position: absolute; margin: 0; padding: 0; // @dris0000 @juan6600 border: none; -webkit-user-select: none; // Keep these prefixes? -webkit-user-drag: none; } .esri-bitmap { max-width: none; transform-origin: top left; } }