Finish making the border component look how it should
This commit is contained in:
parent
30664b3fb3
commit
7284b8fbd2
1 changed files with 27 additions and 0 deletions
|
|
@ -20,6 +20,33 @@
|
||||||
margin-top: var(--margin-top, var(--vertical-displacement));
|
margin-top: var(--margin-top, var(--vertical-displacement));
|
||||||
padding-top: var(--padding-top, var(--vertical-displacement));
|
padding-top: var(--padding-top, var(--vertical-displacement));
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
display: block;
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
top: -3px;
|
||||||
|
height: 5px;
|
||||||
|
left: 50%;
|
||||||
|
right: -3px;
|
||||||
|
background: var(--border-mask, var(--base-background));
|
||||||
|
}
|
||||||
|
&::after {
|
||||||
|
display: block;
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
width: 6px;
|
||||||
|
top: -3px;
|
||||||
|
right: -3px;
|
||||||
|
height: 30px;
|
||||||
|
background: rgb(0,0,0);
|
||||||
|
background: linear-gradient(
|
||||||
|
180deg,
|
||||||
|
var(--border-mask, var(--base-background)) 0%,
|
||||||
|
var(--border-mask, var(--base-background)) 50%,
|
||||||
|
rgba(0,255,255,0) 100%
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
.title {
|
.title {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: calc(-1 * var(--vertical-displacement));
|
top: calc(-1 * var(--vertical-displacement));
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue