@c8y/style/styles/components/navigation-and-layout/action-bars/_app-switcher.less

Styles for Cumulocity IoT applications

/**
 * App Switcher - Application switcher dropdown component
 *
 * Note: Uses @size-* tokens for spacing throughout.
 *
 * Intentionally hardcoded values:
 * - Component-specific dimensions (320px, 340px): Dropdown menu widths
 * - Off-token spacing (6px): Icon margin-bottom not in token system
 * - Negative positioning (-72px, -160px, -255px): Dropdown centering offsets
 * - Typography sizes (12px, 36px): Font sizes for labels and icons
 * - Percentages (30%, 33.3333%, 50%, 95vh): Layout and flex values
 * - Border widths (1px, 2px): Standard borders and outlines
 * - Border radius (2px): Standard border radius
 * - Negative offsets (-2px): Fine-tuning
 * - Line-height (1.2): Unitless ratio
 * - Transition duration (0.25s): Animation timing
 * - Box-shadow values: Inset border effects
 * - RGBA values: Transparency
 * - Calc expressions: Complex computed values
 */

.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;
      }
    }
  }
}

.app-switcher,
.app-switcher-sagcloud {
  display: flex;
  flex-flow: row wrap;
  margin: 0;
  padding: @size-8;
  background-color: @component-background-default;
  cursor: pointer;
  .appLink {
    flex: 0 1 33.3333%;
    margin: @size-4 0;
    padding: calc(@size-8 + @size-4) @size-8 @size-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 rgba(@black, (5 / 100));
}

.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;
  }
}