BinarySandia04
3e0cdf8cc4
All checks were successful
Build and Deploy Nuxt / build (push) Successful in 12s
64 lines
1009 B
Vue
64 lines
1009 B
Vue
<template>
|
|
<div class="card">
|
|
|
|
<span class="corner tl"></span>
|
|
<span class="corner tr"></span>
|
|
<span class="corner bl"></span>
|
|
<span class="corner br"></span>
|
|
|
|
<slot />
|
|
</div>
|
|
</template>
|
|
|
|
<style lang="scss" scoped>
|
|
$separation: 2px;
|
|
|
|
.card{
|
|
position: relative;
|
|
margin: 15px;
|
|
background: var(--color-background-fore);
|
|
padding: 8px 24px;
|
|
color: white;
|
|
border: 1px solid var(--color-border-color);
|
|
}
|
|
|
|
.corner{
|
|
position: absolute;
|
|
width: 22px;
|
|
height: 22px;
|
|
border-color: #cfcfcf;
|
|
}
|
|
|
|
/* Top Left */
|
|
.tl{
|
|
top: -$separation;
|
|
left: -$separation;
|
|
border-top:2px solid;
|
|
border-left:2px solid;
|
|
}
|
|
|
|
/* Top Right */
|
|
.tr{
|
|
top: -$separation;
|
|
right: -$separation;
|
|
border-top:2px solid;
|
|
border-right:2px solid;
|
|
}
|
|
|
|
/* Bottom Left */
|
|
.bl{
|
|
bottom: -$separation;
|
|
left: -$separation;
|
|
border-bottom:2px solid;
|
|
border-left:2px solid;
|
|
}
|
|
|
|
/* Bottom Right */
|
|
.br{
|
|
bottom: -$separation;
|
|
right: -$separation;
|
|
border-bottom:2px solid;
|
|
border-right:2px solid;
|
|
}
|
|
</style>
|