Mirrors/koel
2
0
Fork 0
mirror of https://github.com/koel/koel synced 2025-02-17 13:58:28 +00:00
Code Issues Projects Releases Packages Wiki Activity

fix: menu diagonal problem

Browse source
This commit is contained in:
Phan An 2022-12-30 10:35:15 +01:00
parent c24cc1c3ed
commit 3a9f6989e9
No known key found for this signature in database
GPG key ID: A81E4477F0BB6FDC
1 changed files with 42 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

55
resources/assets/sass/partials/_shared.scss
View file

@ -185,7 +185,7 @@ label {
}
}
.form-row+.form-row {
.form-row + .form-row {
margin-top: 1.125rem;
position: relative;
}
@ -195,7 +195,7 @@ label {
place-content: space-between;
gap: 1rem;
>* {
> * {
flex: 1;
}
}
@ -309,6 +309,18 @@ menu {
@include context-menu();
position: fixed;
@keyframes subMenuHoverHelp {
0% {
height: 500%;
}
99% {
height: 500%;
}
100% {
height: 0;
}
}
li {
list-style: none;
position: relative;
@ -328,16 +340,33 @@ menu {
}
&.has-sub {
padding-right: 24px;
padding-right: 30px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 30 30' shape-rendering='geometricPrecision' text-rendering='geometricPrecision'%3E%3Cpolygon points='-2.303673 -19.980561 12.696327 5.999439 -17.303673 5.999439 -2.303673 -19.980561' transform='matrix(0 1-1 0 5.999439 17.303673)' fill='%23fff' stroke-width='0'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 8px center;
background-size: 10px;
&:after {
position: absolute;
right: 12px;
top: 4px;
content: "‎▶";
font-size: .9rem;
width: 16px;
text-align: right;
&:hover {
&::before, &::after {
content: '';
display: block;
position: absolute;
right: 0;
width: 75%;
z-index: 2;
animation: subMenuHoverHelp 1.5s;
}
&::before {
clip-path: polygon(100% 0, 0% 100%, 100% 100%);
bottom: 100%;
}
&::after {
clip-path: polygon(100% 0, 0 0, 100% 100%);
top: 100%;
}
}
}
}
@ -366,12 +395,12 @@ menu {
.fade-top.fade-bottom {
-webkit-mask: linear-gradient(to bottom, transparent, black var(--fade-size)) top,
linear-gradient(to top, transparent, black var(--fade-size)) bottom;
linear-gradient(to top, transparent, black var(--fade-size)) bottom;
-webkit-mask-size: 100% 51%;
-webkit-mask-repeat: no-repeat;
mask: linear-gradient(to bottom, transparent, black var(--fade-size)) top,
linear-gradient(to top, transparent, black var(--fade-size)) bottom;
linear-gradient(to top, transparent, black var(--fade-size)) bottom;
mask-size: 100% 51%;
mask-repeat: no-repeat;
}