_Swipe.scss 2.62 KB
Newer Older
1 2 3 4 5 6 7 8
@mixin swipe() {
  $divider-color: $background-color !default;
  $divider-size: 4px !default;

  .esri-swipe {
    position: absolute;
    margin: 0;
    background: transparent;
杨思琦's avatar
杨思琦 committed
9 10 11 12
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
13 14 15 16 17 18 19 20 21 22
    user-select: none;
  }

  .esri-swipe,
  .esri-ui .esri-swipe {
    pointer-events: none;
  }

  .esri-swipe__container {
    position: absolute;
杨思琦's avatar
杨思琦 committed
23
    z-index: 1;
24
    margin: 0;
杨思琦's avatar
杨思琦 committed
25
    outline: 0;
26
    border: 0;
杨思琦's avatar
杨思琦 committed
27
    padding: 0;
28
    overflow: hidden; // needed to hide tracers in iOS
杨思琦's avatar
杨思琦 committed
29 30
    pointer-events: auto;
    touch-action: none; // needed for touch actions to work correctly
31 32 33 34 35
  }

  .esri-swipe--horizontal .esri-swipe__container {
    margin-left: -$button-width--half;
    cursor: col-resize;
杨思琦's avatar
杨思琦 committed
36
    height: 100%;
37 38 39 40 41
  }

  .esri-swipe--vertical .esri-swipe__container {
    margin-top: -$button-height--half;
    cursor: row-resize;
杨思琦's avatar
杨思琦 committed
42
    width: 100%;
43 44 45 46
  }

  .esri-swipe--disabled .esri-swipe__container {
    cursor: default;
杨思琦's avatar
杨思琦 committed
47
    pointer-events: none;
48 49 50 51 52 53 54 55
  }

  .esri-swipe__divider {
    position: absolute;
    background-color: $divider-color;
  }

  .esri-swipe--horizontal .esri-swipe__divider {
杨思琦's avatar
杨思琦 committed
56 57 58
    top: 0;
    left: $button-width--half;
    margin-left: -#{$divider-size * 0.5};
59
    border-right: 1px solid rgba($interactive-font-color, 0.5);
杨思琦's avatar
杨思琦 committed
60
    border-left: 1px solid rgba($interactive-font-color, 0.5);
61 62 63 64 65
    width: $divider-size;
    height: 100%;
  }

  .esri-swipe--vertical .esri-swipe__divider {
杨思琦's avatar
杨思琦 committed
66 67 68
    top: $button-height--half;
    left: 0;
    margin-top: -#{$divider-size * 0.5};
69 70 71 72 73 74 75 76
    border-top: 1px solid rgba($interactive-font-color, 0.5);
    border-bottom: 1px solid rgba($interactive-font-color, 0.5);
    width: 100%;
    height: $divider-size;
  }

  .esri-swipe__handle {
    display: flex;
杨思琦's avatar
杨思琦 committed
77
    position: relative;
78 79 80 81 82
    align-items: center;
    justify-content: center;
    border: 1px solid rgba($interactive-font-color, 0.5);
    border-radius: $border-radius;
    background-color: $divider-color;
杨思琦's avatar
杨思琦 committed
83 84 85
    width: $button-width;
    height: $button-height;

86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102
    &--hidden {
      visibility: hidden;
    }
  }

  .esri-swipe__handle-icon {
    position: relative;
    z-index: 2;
  }

  .esri-swipe--horizontal .esri-swipe__handle {
    top: calc(50% - #{$button-height--half});
  }

  .esri-swipe--vertical .esri-swipe__handle {
    left: calc(50% - #{$button-height--half});
  }
杨思琦's avatar
杨思琦 committed
103 104 105 106 107 108 109 110 111 112

  .esri-swipe__container:focus .esri-swipe__handle,
  .esri-swipe__container:focus .esri-swipe__divider {
    outline: inset 2px Highlight;
    outline: inset 2px -webkit-focus-ring-color;
  }

  .esri-swipe__container:focus .esri-swipe__handle {
    outline-offset: -3px;
  }
113 114 115 116 117
}

@if $include_Swipe == true {
  @include swipe();
}