_ButtonMenu.scss 2.8 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 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129
@mixin buttonMenu() {
  .esri-button-menu {
    width: $button-width;
    height: $button-height;

    .esri-button-menu__button {
      align-items: center;
      background-color: transparent;
      border: none;
      color: $interactive-font-color;
      display: flex;
      font-size: $icon-size;
      height: $button-height;
      justify-content: center;
      text-align: center;
      transition: background-color 125ms ease-in-out;
      width: $button-width;

      &:disabled {
        cursor: default;
        color: $interactive-font-color--disabled;
      }

      &:hover,
      &:focus {
        background-color: $background-color--hover;
        color: $interactive-font-color--hover;
        cursor: pointer;
      }

      &.esri-button-menu__button--selected,
      &.esri-button-menu__button--selected:hover {
        background: $background-color--inverse;
        color: $interactive-font-color--inverse;
      }
    }

    .esri-button-menu__content-wrapper {
      position: relative;
      display: inline-block;
    }
  }

  .esri-button-menu__content {
    border-radius: $border-radius;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.33);
    background-color: $background-color;
    max-height: 250px;
    min-width: 200px;
    overflow: auto;
    z-index: 1;

    .esri-button-menu__item-wrapper,
    .esri-button-menu__embedded-content-wrapper {
      list-style: none;
      margin: 0;
      padding: 0;
    }
  }

  .esri-button-menu__item {
    display: block;
    padding: 0;

    .esri-button-menu__item-label {
      align-items: center;
      color: $font-color;
      cursor: pointer;
      display: flex;
      font-family: $font-family;
      font-weight: $font-weight;
      font-size: $font-size;
      justify-content: flex-start;
      margin: 0;
      padding: $cap-spacing $side-spacing;
      position: relative;
      text-decoration: none;

      .esri-button-menu__item-label-content {
        padding: 0 $side-spacing--half;
        width: auto;
      }

      &:hover {
        background-color: $background-color--hover;
        color: $interactive-font-color--hover;
      }
    }

    .esri-button-menu__icon {
      color: $button-color;
    }

    .esri-button-menu__checkbox {
      position: absolute;
      opacity: 0;

      &:checked {
        & ~ .esri-button-menu__embedded-content-wrapper {
          display: block;
        }
      }
    }

    .esri-button-menu__embedded-content-wrapper {
      display: none;

      .esri-button-menu__checkbox {
        &:checked {
          & ~ .esri-button-menu__item-label {
            .esri-button-menu__icon {
              display: block;
            }
          }
        }
      }
    }
  }

  .esri-button-menu__item--selectable {
    .esri-button-menu__icon {
      display: none;
    }
  }
}

@if $include_ButtonMenu == true {
  @include buttonMenu();
}