110 lines
2.3 KiB
SCSS
110 lines
2.3 KiB
SCSS
// dropdown
|
|
.ct-header-account-dropdown {
|
|
width: 250px;
|
|
color: var(--theme-text-color);
|
|
margin-top: var(--sticky-state-dropdown-top-offset, var(--dropdown-top-offset, 15px));
|
|
padding-block: var(--menu-items-spacing, 10px);
|
|
box-shadow: var(--theme-box-shadow);
|
|
border-radius: var(--theme-border-radius, 2px);
|
|
background-color: var(--dropdown-background-color, var(--theme-palette-color-4));
|
|
|
|
--theme-link-initial-color: var(--theme-text-color);
|
|
--theme-icon-color: currentColor;
|
|
|
|
&[data-placement='left'] {
|
|
right: var(--theme-submenu-inline-offset, -20px);
|
|
}
|
|
|
|
&[data-placement='right'] {
|
|
left: var(--theme-submenu-inline-offset, -20px);
|
|
}
|
|
|
|
// drop-down bridge
|
|
&:before {
|
|
position: absolute;
|
|
content: '';
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: var(--sticky-state-dropdown-top-offset, var(--dropdown-top-offset, 15px));
|
|
transform: translateY(-100%);
|
|
}
|
|
|
|
|
|
// menu item
|
|
.menu-item {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.ct-menu-link {
|
|
padding: calc(var(--menu-items-spacing, 10px) / 2) var(--menu-items-spacing, 10px);
|
|
margin-inline: var(--menu-items-spacing, 10px);
|
|
border-radius: 4px;
|
|
}
|
|
|
|
&:hover > a {
|
|
color: var(--theme-link-hover-color);
|
|
}
|
|
|
|
&[class*="current-menu-"] > a {
|
|
color: var(--theme-link-active-color, var(--theme-link-hover-color));
|
|
}
|
|
}
|
|
|
|
&[data-dropdown*="boxed"] .menu-item {
|
|
|
|
&:hover > a {
|
|
background-color: var(--dropdown-items-background-hover-color);
|
|
}
|
|
|
|
&[class*="current-menu-"] > a {
|
|
background-color: var(--dropdown-items-background-active-color, var(--dropdown-items-background-hover-color));
|
|
}
|
|
}
|
|
|
|
|
|
// submenu
|
|
.sub-menu li {
|
|
|
|
&:first-child > .ct-menu-link {
|
|
margin-top: var(--menu-items-spacing, 10px);
|
|
}
|
|
|
|
&:last-child > .ct-menu-link {
|
|
margin-bottom: var(--menu-items-spacing, 10px);
|
|
}
|
|
}
|
|
|
|
> .menu-item > .sub-menu {
|
|
top: calc(var(--menu-items-spacing, 10px) * -1);
|
|
}
|
|
|
|
|
|
// user info layer
|
|
.ct-header-account-user-info {
|
|
|
|
.ct-menu-link {
|
|
gap: 13px;
|
|
padding: var(--menu-items-spacing, 10px);
|
|
}
|
|
|
|
.ct-media-container {
|
|
flex: 0 0 40px;
|
|
max-width: 40px;
|
|
border-radius: 100%;
|
|
}
|
|
|
|
span {
|
|
display: flex;
|
|
flex-direction: column;
|
|
word-break: break-word;
|
|
}
|
|
}
|
|
|
|
|
|
// divider layer
|
|
.ct-header-account-divider {
|
|
margin: 10px 0;
|
|
border-bottom: var(--theme-border);
|
|
}
|
|
} |