_NavigationToggle.scss 2.12 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
$earmark_size: 6px !default;

@mixin navigationToggle() {
  .esri-navigation-toggle {
    display: flex;
    flex-flow: column nowrap;
    &:hover,
    &:focus {
      background-color: $background-color--hover;
      .esri-navigation-toggle__button {
        color: $interactive-font-color--hover;
      }
    }
  }

  .esri-navigation-toggle--horizontal {
    flex-flow: row nowrap;
    .esri-navigation-toggle__button--rotate {
      border-top: none;
      border-left: solid 1px $border-color;
    }
  }

  .esri-navigation-toggle__button {
    box-shadow: none;
    position: relative;
    background-color: transparent;
    &:before {
      @include earmarkStem();
      opacity: 0;
      border-width: 0 $earmark_size $earmark_size 0;
      border-color: transparent $interactive-font-color--hover transparent transparent;
    }
    &:hover,
    &:focus {
      background-color: transparent;
    }
  }

  .esri-navigation-toggle__button--rotate {
    border-top: solid 1px $border-color;
  }

  .esri-navigation-toggle__button--pan {
    margin-bottom: 0;
  }

  .esri-navigation-toggle__button--active {
    color: $interactive-font-color--hover;
    &:before {
      opacity: 1;
    }
  }

  .esri-navigation-toggle.esri-disabled {
    .esri-navigation-toggle__button {
      background-color: $background-color;
      color: $interactive-font-color--disabled;
      cursor: auto;
      &:before {
        opacity: 0;
      }
    }
  }

66
  [dir="rtl"] {
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
    .esri-navigation-toggle--horizontal {
      .esri-navigation-toggle__button--rotate {
        border-left: none;
        border-right: solid 1px $border-color;
      }
    }

    .esri-navigation-toggle__button {
      &:before {
        border-width: $earmark_size $earmark_size 0 0;
        border-color: $interactive-font-color--hover transparent transparent transparent;
        right: auto;
        left: 1px;
      }
    }
  }
}

@mixin earmarkStem() {
  position: absolute;
  top: 1px;
  right: 1px;
  z-index: 0;
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  transition: opacity 125ms ease-in-out;
}

@if $include_NavigationToggle == true {
  @include navigationToggle();
}