_HistogramRangeSlider.scss 2.02 KB
Newer Older
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105
@mixin histogramRangeSlider() {
  .esri-histogram-range-slider {
    display: flex;
    flex-direction: column;
    height: 100%;
    position: relative;
    width: 100%;

    .esri-slider .esri-slider__label {
      top: 24px;
      display: none;
    }

    .esri-slider__anchor--moving .esri-slider__label {
      display: inline;
    }

    .esri-slider {
      font-size: 12px;
    }

    .esri-slider__content {
      display: flex;
      flex-direction: column-reverse;
    }

    .esri-slider__max {
      bottom: 0;
      position: absolute;
      right: 0;
      text-align: right;

      .esri-slider__range-input {
        text-align: right;
      }
    }

    .esri-slider__min {
      bottom: 0;
      left: 0;
      position: absolute;
      text-align: left;

      .esri-slider__range-input {
        text-align: left;
      }
    }

    .esri-slider--horizontal {
      .esri-slider__max,
      .esri-slider__min {
        display: inline;
        min-width: 50%;
      }
    }

    .esri-histogram {
      display: flex;
      align-self: flex-end;
    }

    .esri-histogram__bar {
      touch-action: none;
    }

    .esri-slider__max {
      .esri-slider__range-input {
        float: right;
      }
    }
  }

  .esri-histogram-range-slider__slider-container {
    align-self: flex-end;
    margin-bottom: 24px;
    width: 100%;
  }

  .esri-histogram-range-slider__histogram-container {
    display: flex;
    flex-grow: 1;
    height: 100%;
    min-height: 0;
    width: 100%;
  }

  .esri-histogram-range-slider__range-type--less-than,
  .esri-histogram-range-slider__range-type--at-most {
    .esri-slider__segment-0 {
      background-color: #0079c1;
    }
  }
  .esri-histogram-range-slider__range-type--greater-than,
  .esri-histogram-range-slider__range-type--at-least,
  .esri-histogram-range-slider__range-type--between,
  .esri-histogram-range-slider__range-type--not-between {
    .esri-slider__segment-1 {
      background-color: #0079c1;
    }
  }
}

@if $include_HistogramRangeSlider == true {
  @include histogramRangeSlider();
}