fix: sticky-header-border-effect #4
3 changed files with 21 additions and 2 deletions
|
@ -2,6 +2,7 @@
|
||||||
--padding-default: 1rem;
|
--padding-default: 1rem;
|
||||||
--padding-small: 0.5rem;
|
--padding-small: 0.5rem;
|
||||||
--radius-default: 3px;
|
--radius-default: 3px;
|
||||||
|
--radius-border: 15px;
|
||||||
--transition-default: 150ms;
|
--transition-default: 150ms;
|
||||||
|
|
||||||
--color-success: #328104;
|
--color-success: #328104;
|
||||||
|
|
|
@ -63,4 +63,24 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
&:after, &:before {
|
||||||
|
content: '';
|
||||||
|
display: block;
|
||||||
|
position: absolute;
|
||||||
|
bottom: calc(-1 * var(--radius-border));
|
||||||
|
background: var(--color-blue-darkest);
|
||||||
|
width: var(--radius-border);
|
||||||
|
height: var(--radius-border);
|
||||||
|
}
|
||||||
|
|
||||||
|
&:after {
|
||||||
|
right: 0;
|
||||||
|
mask: radial-gradient(var(--radius-border) at 0 100%,#0000 98%,#000);
|
||||||
|
}
|
||||||
|
|
||||||
|
&:before {
|
||||||
|
left: 0;
|
||||||
|
mask: radial-gradient(var(--radius-border) at 100% 100%,#0000 98%,#000);
|
||||||
|
}
|
||||||
}
|
}
|
|
@ -46,8 +46,6 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.content {
|
.content {
|
||||||
border-top-left-radius: 15px;
|
|
||||||
border-top-right-radius: 15px;
|
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
background: var(--color-lightest);
|
background: var(--color-lightest);
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue