Fix(Menu): Fix submenu style exception
Fix submenu style exception. Optimize menu stylesheet
This commit is contained in:
@@ -27,6 +27,7 @@
|
|||||||
font-size: constants.$SIZE_ICON_SM;
|
font-size: constants.$SIZE_ICON_SM;
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
|
||||||
span {
|
span {
|
||||||
transform: rotateZ(180deg);
|
transform: rotateZ(180deg);
|
||||||
transition: all .3s;
|
transition: all .3s;
|
||||||
@@ -61,9 +62,10 @@
|
|||||||
ul {
|
ul {
|
||||||
> li, > div > li {
|
> li, > div > li {
|
||||||
padding: 2px 14px;
|
padding: 2px 14px;
|
||||||
|
|
||||||
&.item {
|
&.item {
|
||||||
position: relative;
|
position: relative;
|
||||||
font-size: 1.4em;
|
font-size: 1rem;
|
||||||
|
|
||||||
> .menu-bt {
|
> .menu-bt {
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
@@ -96,6 +98,9 @@
|
|||||||
.text {
|
.text {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
padding-left: 8px;
|
padding-left: 8px;
|
||||||
|
width: 0;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
}
|
}
|
||||||
|
|
||||||
&.active {
|
&.active {
|
||||||
@@ -113,7 +118,7 @@
|
|||||||
.submenu {
|
.submenu {
|
||||||
visibility: hidden;
|
visibility: hidden;
|
||||||
position: fixed;
|
position: fixed;
|
||||||
padding-left: 20px;
|
padding-left: 10px;
|
||||||
z-index: 10000;
|
z-index: 10000;
|
||||||
animation: 0.1s ease forwards;
|
animation: 0.1s ease forwards;
|
||||||
@include mixins.unique-keyframes {
|
@include mixins.unique-keyframes {
|
||||||
@@ -134,11 +139,13 @@
|
|||||||
padding: 10px 10px;
|
padding: 10px 10px;
|
||||||
background-color: constants.$origin-color;
|
background-color: constants.$origin-color;
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
|
box-shadow: 2px 2px 10px 0 rgba(0,0,0,0.1);
|
||||||
|
|
||||||
.item {
|
.item {
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
padding: 0;
|
||||||
|
|
||||||
a {
|
a {
|
||||||
display: block;
|
display: block;
|
||||||
@@ -278,6 +285,7 @@
|
|||||||
transition: all .3s;
|
transition: all .3s;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.text {
|
.text {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
@@ -299,6 +307,7 @@
|
|||||||
|
|
||||||
.footer {
|
.footer {
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
.text {
|
.text {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
@@ -318,6 +327,7 @@
|
|||||||
|
|
||||||
.icon-exit {
|
.icon-exit {
|
||||||
padding: 4px 8px;
|
padding: 4px 8px;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
background-color: constants.$background-color;
|
background-color: constants.$background-color;
|
||||||
|
|||||||
@@ -42,9 +42,9 @@ const Item = (props: ItemProps) => {
|
|||||||
isPending ? 'pending' : isActive ? 'active' : ''
|
isPending ? 'pending' : isActive ? 'active' : ''
|
||||||
}
|
}
|
||||||
>
|
>
|
||||||
|
{props.icon && (
|
||||||
<div className={'icon-box'}>
|
<div className={'icon-box'}>
|
||||||
{props.icon &&
|
{typeof props.icon === 'string' ? (
|
||||||
(typeof props.icon === 'string' ? (
|
|
||||||
<img
|
<img
|
||||||
className={'icon'}
|
className={'icon'}
|
||||||
src={`data:image/svg+xml;base64,${props.icon}`}
|
src={`data:image/svg+xml;base64,${props.icon}`}
|
||||||
@@ -52,8 +52,9 @@ const Item = (props: ItemProps) => {
|
|||||||
/>
|
/>
|
||||||
) : (
|
) : (
|
||||||
<Icon className={'icon'} component={props.icon} />
|
<Icon className={'icon'} component={props.icon} />
|
||||||
))}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
)}
|
||||||
<span className={'text'}>{props.text}</span>
|
<span className={'text'}>{props.text}</span>
|
||||||
<div className={'extend'}>{props.extend}</div>
|
<div className={'extend'}>{props.extend}</div>
|
||||||
</NavLink>
|
</NavLink>
|
||||||
|
|||||||
@@ -191,7 +191,7 @@ const StoreCard = ({
|
|||||||
<>
|
<>
|
||||||
<Draggable
|
<Draggable
|
||||||
id={`${author.username}:${toolId}:${ver}`}
|
id={`${author.username}:${toolId}:${ver}`}
|
||||||
data={{ icon, toolName, toolId, authorUsername: author.username, ver: 'latest' }}
|
data={{ icon, toolName, toolId, authorUsername: author.username, ver: '' }}
|
||||||
>
|
>
|
||||||
<Card
|
<Card
|
||||||
data-component={'component-store-card'}
|
data-component={'component-store-card'}
|
||||||
|
|||||||
Reference in New Issue
Block a user