_applicationmenu-new.scss

// Uplift Application Menu
//================================================== //

@import '../accordion/accordion-mixins';

.application-menu {
  background-color: $new-appmenu-main-bg-color;

  .searchfield-wrapper {
    background-color: $new-acc-expanded-bg-color;
    border-radius: $new-acc-border-radius;
    margin: 0 $ids-number-spacing-base;
    width: calc(100% - calc(#{$ids-number-spacing-base} * 2));

    > svg.icon:not(.close) {
      top: 13px;
    }

    .searchfield {
      height: 40px;

      &::placeholder {
        color: $new-appmenu-searchfield-placeholder-color;
        opacity: 1;
      }

      &::-webkit-input-placeholder {
        color: $new-appmenu-searchfield-placeholder-color;
        opacity: 1;
      }

      &::-moz-placeholder {
        color: $new-appmenu-searchfield-placeholder-color;
        opacity: 1;
      }

      &:-ms-input-placeholder {
        color: $new-appmenu-searchfield-placeholder-color;
        opacity: 1;
      }
    }

    > .icon {
      top: 13px;
    }

    &:first-child {
      margin-top: 10px;
    }

    button.close {
      height: 24px;
      right: 9px;
      top: 8px;
      & > svg.close.icon {
        top: 0px;
      }
    }
  }

  .application-menu-header,
  .application-menu-footer {
    padding: 10px 0;

    button {
      .icon {
        color: $new-acc-header-text-color;
      }

      &:hover {
        background-color: $new-appmenu-hover-bg-color;
      }
    }
  }

  .accordion-static-panel {
    .btn-menu {
      span {
        max-width: 150px;
      }

      svg {
        margin-top: -10px;
      }
    }
  }

  .application-menu-header {
    .icon.avatar {
      left: 29px;
      top: 0;
    }

    .name-xl {
      font-size: $ids-size-font-md;
      font-weight: $ids-number-font-weight-bold;
      padding-left: 29px;
      padding-top: calc(#{$ids-number-spacing-base} * 2);
    }

    button.application-menu-switcher-trigger {
      margin: 0 8px;
      max-width: 72%;

      > * {
        vertical-align: middle;
      }

      > span {
        padding-top: 0;
      }
    }
  }

  .application-menu-toolbar {
    .toolbar-section {
      display: flex;
      justify-content: center;
    }
  }

  .application-menu-switcher-panel {
    background-color: $new-appmenu-footer-bg-color;

    .accordion.panel.inverse {
      background-color: $new-appmenu-footer-bg-color;

      .accordion-header {
        border-radius: $new-acc-border-radius;

        &.is-selected {
          background-color: $new-appmenu-selected-bg-color;
        }
      }

      .accordion-header:hover {
        background-color: $new-appmenu-hover-bg-color;
      }
    }
  }

  .application-menu-header {
    background-color: $new-appmenu-header-bg-color;
  }

  .application-menu-footer {
    background-color: $new-appmenu-footer-bg-color;
  }

  // NOTE: panelled accordion is used inside of the app menu,
  // so all internal accordion styles have to override this rule.
  .accordion.panel.inverse {
    background-color: transparent;
    padding: calc(#{$ids-number-spacing-base} * 1);
    width: auto;

    .accordion-header {
      @include transition(border-color 300ms $cubic-ease, padding 300ms $cubic-ease, margin 300ms $cubic-ease);

      border-bottom-color: transparent;
      border-radius: $new-acc-border-radius;
      color: $new-acc-header-text-color;
      height: auto;

      .btn,
      .btn-expander {
        color: inherit;
        top: auto;

        &:focus:not(.hide-focus) {
          border-color: $new-appmenu-selected-border-color;
          box-shadow: none;
        }
      }

      .icon {
        color: inherit;
        top: auto;

        &.plus-minus {
          &::before,
          &::after {
            background-color: $new-acc-header-text-color;
          }
        }
      }

      &:hover {
        background-color: $new-appmenu-hover-bg-color;
        color: $new-acc-header-selected-text-color;
      }

      &.is-focused:not(.hide-focus) {
        border-color: $new-appmenu-selected-border-color;
        box-shadow: none;
      }

      &.is-selected {
        background-color: $new-appmenu-selected-bg-color;
        color: $new-acc-header-selected-text-color;

        .icon.plus-minus {
          &::before,
          &::after {
            background-color: $new-acc-header-selected-text-color;
          }
        }
      }
    }

    // Top level rules
    > .accordion-header {
      > a {
        padding-bottom: 7px;
        padding-top: 9px;
      }

      &.is-selected {
        border-bottom-color: transparent;

        &:hover {
          border-bottom-color: transparent;
        }

        &.is-focused {
          border-bottom-color: $new-appmenu-selected-border-color;
        }

        > a > span {
          font-weight: $ids-number-font-weight-bold;
        }
      }

      &.is-expanded {
        background-color: $new-acc-expanded-bg-color;
        border-radius: 0;
        margin: 10px -10px 0;
        padding: 10px;
        position: relative;

        &:not(.is-focused),
        &:not(.is-selected) {
          border-bottom-color: transparent;
        }

        // Shared pseudo-element for hovering/focusing/selecting this particular level
        &:hover,
        &.is-focused,
        &.is-selected {
          > a {
            // allows the text inside the pseudo to be placed in front.
            position: relative;
          }

          &::before {
            border: 1px solid transparent;
            border-radius: $new-acc-border-radius;
            content: ' ';
            display: block;
            height: calc(100% - 22px);
            position: absolute;
            width: calc(100% - 20px);
          }

          z-index: 0;
        }

        &.is-focused {
          background-color: $new-acc-expanded-bg-color;
          border-color: transparent;

          &::before {
            border-color: $new-appmenu-selected-border-color;
          }
        }

        &.is-selected {
          background-color: $new-acc-expanded-bg-color;
          border-bottom-color: transparent;
          border-top-color: transparent;

          &::before {
            background-color: $new-appmenu-selected-bg-color;
            border-color: $new-appmenu-selected-bg-color;
          }
        }

        &:hover {
          background-color: $new-acc-expanded-bg-color;

          &::before {
            background-color: $new-appmenu-hover-bg-color;
            border-color: $new-appmenu-hover-bg-color;
          }
        }

        + .accordion-pane:not(.all-children-filtered) {
          background-color: $new-acc-expanded-bg-color;

          .accordion-header {
            border-radius: $new-acc-border-radius;

            &:not(.is-selected):not(.is-focused) {
              border-color: transparent;
            }
          }

          .accordion-pane {
            background: transparent;
          }
        }
      }

      + .accordion-header {
        margin-top: 4px;
      }

      .accordion-pane {
        background-color: transparent;
      }

      &.filtered {
        + .accordion-pane {
          background-color: $new-acc-expanded-bg-color;
        }
      }
    }

    > .accordion-pane {
      padding: 0;
      position: relative;

      &.is-expanded {
        margin: 0 -10px;
        padding: 0 10px 10px;
      }
    }

    // Visible accordion panes force a border to show up on the next
    // accordion header for visual separation
    .accordion-pane {
      background-color: transparent;

      .accordion-header {
        border-bottom-color: transparent;
        color: $new-acc-subheader-text-color;

        a {
          font-size: 14px;
          padding-bottom: 7px;
          padding-top: 11px;
        }

        .btn,
        .btn-expander {
          height: 25px;
          width: 25px;

          .icon.plus-minus {
            &::before,
            &::after {
              left: 4px;
              top: 11px;
              width: 15px;
            }
          }
        }

        .icon.plus-minus {
          &::before,
          &::after {
            background-color: $new-acc-subheader-text-color;
          }
        }

        &:hover {
          color: $new-acc-header-selected-text-color;

          .icon.plus-minus {
            &::before,
            &::after {
              background-color: $new-acc-header-selected-text-color;
            }
          }
        }

        &.is-selected {
          color: $new-acc-header-selected-text-color;

          > a > span {
            font-weight: $ids-number-font-weight-bold;
          }

          .icon.plus-minus {
            &::before,
            &::after {
              background-color: $new-acc-header-selected-text-color;
            }
          }
        }

        &.list-item {
          &::before {
            color: inherit;
            font-size: 0.4rem;
            padding-right: 13px;
            padding-top: 7px;
          }
        }

        &:not(.has-chevron) {
          .icon.chevron {
            left: -5px;
            width: 13px;
          }
        }
      }

      &.is-expanded {
        + .accordion-header:not(.is-focused):not(.is-selected),
        + .accordion-content {
          border-top-color: transparent;
        }
      }
    }

    // Round the borders of 2nd-level accordion headers in some special cases
    > .accordion-pane {
      + .accordion-header {
        margin-top: 4px;
      }
    }

    // Change some letter spacing on lower-level icon app menus
    &.has-icons {
      .accordion-pane {
        .accordion-header {
          > a {
            letter-spacing: 0.2px;
          }

          &.is-selected {
            > a {
              letter-spacing: 0;
            }
          }
        }
      }
    }
  }
}

html.is-firefox {

  // Reset the Searchfield Wrapper height on Firefox
  .application-menu {
    .searchfield-wrapper {
      height: auto;

      > .icon {
        top: 14px;
      }
    }
  }

  // Reset this from the Classic theme (not needed in New theme)
  &.is-mac {
    .application-menu {
      .application-menu-switcher-trigger {
        padding-top: 0;

        > span {
          padding-top: 0;
        }
      }
    }
  }
}

// RTL Styles
html[dir='rtl'] {
  .application-menu {
    background-color: $new-appmenu-main-bg-color;

    .application-menu-header {
      .application-menu-switcher-trigger {
        float: left;
      }

      .icon.avatar {
        left: 0;
        right: 29px;
      }

      .name-xl {
        padding-left: 0;
        padding-right: 29px;
      }
    }

    .searchfield-wrapper {
      .icon:not(.close) {
        right: 8px;
      }
    }

    .accordion.panel.inverse {
      .accordion-pane {
        .accordion-header {
          &:not(.has-chevron) {
            .icon.chevron {
              left: auto;
              right: -5px;
            }
          }

          &.list-item {
            &::before {
              font-size: 1.2rem;
              padding-left: 8px;
              padding-right: 28px;
            }
          }
        }
      }
    }
  }

  &.android {
    .application-menu {
      .accordion.panel.inverse {
        .accordion-pane {
          .accordion-header {
            &.list-item {
              &::before {
                font-size: 0.6rem;
              }
            }
          }
        }
      }
    }
  }
}

// Application Menu's Accordion alignment rules
//================================================== //

.application-menu {

  // Level 1 Pane
  .accordion-pane {
    @include left-align-cascade-styles-pane(21px, 46px, 21px);

    // Level 2 Header
    .accordion-header {
      @include left-align-cascade-styles-header(20px, 18px, 49px, 29px);
    }

    // Level 2 Pane
    .accordion-pane {
      @include left-align-cascade-styles-pane(47px, 72px, 47px);

      // Level 3 Header
      .accordion-header {
        @include left-align-cascade-styles-header(40px, 44px, 72px, 55px);
      }

      // Level 3 Pane
      .accordion-pane {
        @include left-align-cascade-styles-pane(73px, 97px, 73px);

        // Level 4 Header
        .accordion-header {
          @include left-align-cascade-styles-header(59px, 69px, 97px, 80px);
        }

        // Level 4 Pane
        .accordion-pane {
          @include left-align-cascade-styles-pane(98px, 122px, 98px);

          // Level 5 Header
          .accordion-header {
            @include left-align-cascade-styles-header(78px, 94px, 122px, 105px);
          }

          // Level 5 Pane
          .accordion-pane {
            @include left-align-cascade-styles-pane(122px, 150px, 122px);

            // Level 6 Header
            .accordion-header {
              @include left-align-cascade-styles-header(122px, 122px, 150px, 133px);

              &.no-icon {
                > a {
                  padding-left: 150px;
                }
              }
            }

            // Level 6 Pane
            .accordion-pane {
              @include left-align-cascade-styles-pane(127px, 177px, 151px);
            }
          }
        }
      }
    }
  }

  .accordion.has-icons {
    .accordion-header {
      > a {
        padding-left: 54px;
      }

      > .icon + a {
        padding-left: 0;
      }
    }

    // Level 1 Pane
    .accordion-pane {
      @include left-align-cascade-styles-pane(55px, 56px, 56px);

      .accordion-header {
        @include left-align-cascade-styles-header(54px, 30px, 78px, 41px);
      }

      // Level 2 Pane
      .accordion-pane {
        @include left-align-cascade-styles-pane(59px, 76px, 60px);

        // Level 3 Header
        .accordion-header {
          @include left-align-cascade-styles-header(59px, 50px, 102px, 61px);
        }

        // Level 3 Pane
        .accordion-pane {
          @include left-align-cascade-styles-pane(79px, 95px, 76px);

          // Level 4 Header
          .accordion-header {
            @include left-align-cascade-styles-header(59px, 68px, 127px, 80px);
          }

          // Level 4 Pane
          .accordion-pane {
            @include left-align-cascade-styles-pane(98px, 114px, 128px);

            // Level 5 Header
            .accordion-header {
              @include left-align-cascade-styles-header(78px, 87px, 152px, 99px);
            }

            // Level 5 Pane
            .accordion-pane {
              @include left-align-cascade-styles-pane(115px, 133px, 153px);

              // Level 6 Header
              .accordion-header {
                @include left-align-cascade-styles-header(122px, 106px, 180px, 118px);

                &.no-icon {
                  > a {
                    padding-left: 114px;
                  }
                }
              }

              // Level 6 Pane
              .accordion-pane {
                @include left-align-cascade-styles-pane(135px, 182px, 122px);
              }
            }
          }
        }
      }
    }
  }
}

html[dir='rtl'] {
  .application-menu {

    // Level 1 Pane
    .accordion-pane {
      @include right-align-cascade-styles-pane(21px, 46px, 21px);

      // Level 2 Header
      .accordion-header {
        @include right-align-cascade-styles-header(20px, 18px, 49px, 26px);
      }

      // Level 2 Pane
      .accordion-pane {
        @include right-align-cascade-styles-pane(47px, 72px, 47px);

        // Level 3 Header
        .accordion-header {
          @include right-align-cascade-styles-header(40px, 44px, 72px, 52px);
        }

        // Level 3 Pane
        .accordion-pane {
          @include right-align-cascade-styles-pane(73px, 97px, 73px);

          // Level 4 Header
          .accordion-header {
            @include right-align-cascade-styles-header(59px, 69px, 97px, 77px);
          }

          // Level 4 Pane
          .accordion-pane {
            @include right-align-cascade-styles-pane(98px, 122px, 98px);

            // Level 5 Header
            .accordion-header {
              @include right-align-cascade-styles-header(78px, 94px, 122px, 102px);
            }

            // Level 5 Pane
            .accordion-pane {
              @include right-align-cascade-styles-pane(122px, 152px, 122px);

              // Level 6 Header
              .accordion-header {
                @include right-align-cascade-styles-header(122px, 122px, 152px, 130px);

                &.no-icon {
                  > a {
                    padding-right: 152px;
                  }
                }
              }

              // Level 6 Pane
              .accordion-pane {
                @include right-align-cascade-styles-pane(127px, 177px, 151px);
              }
            }
          }
        }
      }
    }

    .accordion.has-icons {
      .accordion-header {
        > a {
          padding-right: 54px;
        }

        > .icon + a {
          padding-right: 0;
        }
      }

      // Level 1 Pane
      .accordion-pane {
        @include right-align-cascade-styles-pane(55px, 78px, 56px);

        .accordion-header {
          @include right-align-cascade-styles-header(54px, 50px, 78px, 58px);
        }

        // Level 2 Pane
        .accordion-pane {
          @include right-align-cascade-styles-pane(55px, 102px, 78px);

          // Level 3 Header
          .accordion-header {
            @include right-align-cascade-styles-header(59px, 74px, 102px, 82px);
          }

          // Level 3 Pane
          .accordion-pane {
            @include right-align-cascade-styles-pane(79px, 127px, 102px);

            // Level 4 Header
            .accordion-header {
              @include right-align-cascade-styles-header(59px, 99px, 127px, 107px);
            }

            // Level 4 Pane
            .accordion-pane {
              @include right-align-cascade-styles-pane(104px, 152px, 128px);

              // Level 5 Header
              .accordion-header {
                @include right-align-cascade-styles-header(78px, 124px, 152px, 132px);
              }

              // Level 5 Pane
              .accordion-pane {
                @include right-align-cascade-styles-pane(130px, 150px, 153px);

                // Level 6 Header
                .accordion-header {
                  @include right-align-cascade-styles-header(122px, 152px, 180px, 160px);

                  &.no-icon {
                    > a {
                      padding-right: 182px;
                    }
                  }
                }

                // Level 6 Pane
                .accordion-pane {
                  @include right-align-cascade-styles-pane(158px, 182px, 122px);
                }
              }
            }
          }
        }
      }
    }
  }
}

.is-safari {
  .application-menu {
    .accordion-static-panel {
      .btn-menu {
        svg {
          margin-top: -2px;
        }
      }
    }
  }
}