subMenuOption.scss

TLDR

This file is a SCSS (Sass) file that defines the styling for sub-menu options in a menu.

Classes

SubMenuOption

This class defines the styling for a sub-menu option within a menu. It includes the following properties:

• position: Sets the position of the sub-menu option to relative.
• .SubMenu: Represents the sub-menu that appears when the sub-menu option is hovered. It includes the following styling properties:
  • min-width: Sets the minimum width of the sub-menu to 180px.
  • background-color: Sets the background color of the sub-menu to the CSS variable value of --center-channel-bg-rgb.
  • color: Sets the text color of the sub-menu to the CSS variable value of --center-channel-color-rgb.
  • margin: Sets the margin of the sub-menu to 0 with !important.
  • border-radius: Sets the border radius of the sub-menu to a CSS variable value of --default-rad.
  • box-shadow: Sets the box shadow of the sub-menu to a CSS variable value of --elevation-4.
  • left: Sets the left edge of the sub-menu to 100%.
  • .top, .bottom, .left, .left-bottom: Represents different positions for the sub-menu. The sub-menu will be positioned based on the corresponding class, e.g., .top will set the sub-menu to be at the bottom.
• @media screen and (max-width: 430px): Applies the following styles to the sub-menu when the screen width is less than or equal to 430px:
  • background-color: Sets the background color of the sub-menu to a transparent version of the CSS variable value of --center-channel-color-rgb.

@import '../../styles/z-index';

.Menu .menu-options .SubMenuOption {
    &.menu-option {
        padding-right: 16px;
    }
}

.SubMenuOption {
    position: relative;

    .SubMenu {
        @include z-index(sub-menu-option-sub-menu);
        position: absolute;
        min-width: 180px;
        background-color: rgb(var(--center-channel-bg-rgb));
        color: rgb(var(--center-channel-color-rgb));
        margin: 0 !important;

        border-radius: var(--default-rad);
        box-shadow: var(--elevation-4);
        left: 100%;

        &.top {
            bottom: 0;
        }

        &.bottom {
            top: 0;
        }

        &.left {
            left: -100%;
            right: 100%;
        }

        &.left-bottom {
            left: -100%;
            right: 100%;
            top: 0;
        }
    }

    @media screen and (max-width: 430px) {
        .SubMenu {
            background-color: rgba(var(--center-channel-color-rgb), 0.8) !important;
        }
    }
}