@c8y/style/styles/_app-switcher.less

Styles for Cumulocity IoT applications

.app-switcher-dropdown {
  position: static;
  
  @media (min-width: @screen-sm-min) {
    position: relative;
  }
  @media(max-width: @screen-sm-min){
    &.open {
      .main-header-button.c8y-dropdown.dropdown-toggle{
        box-shadow: none!important;
      }
    }
  }
}

.app-switcher,
.app-switcher-sagcloud {
  display: flex;
  flex-flow: row wrap;
  margin: 0;
  padding: @margin-8;
  background-color: @component-background-default;
  cursor: pointer;
  .appLink {
    flex: 0 1 33.3333%;
    margin: @margin-4 0;
    padding: calc(@margin-8 + @margin-4) @margin-8 @margin-8;
    min-width: 30%;
    border: 1px solid transparent;
    border-radius: 2px;
    color: @navlink-color-default;
    text-align: center;
    font-size: 12px;
    transition: transform 0.25s ease-in-out, box-shadow 0.25s ease-in-out;
    &:hover {
      box-shadow: inset 0 0 0 1px @brand-primary, inset 0 0 0 2px @component-background-default;
      text-decoration: none;
    }
    &.active {
      box-shadow: inset 0 0 0 2px @brand-primary;
      text-decoration: none;
    }
    &:focus {
      outline: 2px solid @component-color-focus;
      outline-offset: -2px;
      border-radius: @component-border-radius-focus!important;
      box-shadow: none;
      text-decoration: none;
    }
    > span {
      display: block;
      font-size: 12px;
      line-height: 1.2;
    }
    .c8y-app-icon {
      display: block;
      width: auto;
    }
    .c8y-icon {
      margin-bottom: 6px;
      font-size: 36px;
    }
  }
}

.app-switcher-sagcloud {
  box-shadow: inset 0 -1px 0 fade(@black, 5%);
}

.dropdown-menu.app-switcher-dropdown-menu {
  transform-origin: center top;
  left: 50%!important;
  overflow-y: auto;
  margin-left: -160px !important;
  max-height: calc(~'95vh - @{header-bar-height}');
  width: 320px;

  @media (min-width: 560px) and(max-width:@screen-sm-min) {
    margin-left: -72px !important;
    width: 340px;
  }
  @media (min-width: @screen-sm-min) {
    margin-left: -255px !important;
    width: 340px;
  }
}