Skip to content

Instantly share code, notes, and snippets.

@noonworks
Created February 8, 2020 20:07
Show Gist options
  • Save noonworks/0472436bdcd340fe98202ee1316ce832 to your computer and use it in GitHub Desktop.
Save noonworks/0472436bdcd340fe98202ee1316ce832 to your computer and use it in GitHub Desktop.
<template>
<div :class="$style.wrapper" v-bind="$attrs">
<div :class="$style.container">
<slot />
</div>
</div>
</template>
<style module>
.wrapper {
box-sizing: border-box;
border-radius: 6px;
padding: 2px;
border: 1px solid var(--bg-darkest);
background-color: var(--bg-frame-gold);
box-shadow: 1px 1px 0 0 var(--bg-frame-gold-light) inset,
-1px -1px 0 0 var(--bg-frame-gold-dark) inset;
}
.container {
box-sizing: border-box;
width: 100%;
height: 100%;
border-radius: 4px;
border: 1px solid var(--bg-darkest);
box-shadow: 1px 1px 0 0 var(--bg-frame-gold-light),
-1px -1px 0 0 var(--bg-frame-gold-dark);
background-color: var(--bg-dark);
background: linear-gradient(
to bottom,
var(--bg-light) 0%,
var(--bg-dark) 30%,
var(--bg-dark) 100%
);
color: var(--fg-light);
}
.container h2 {
margin: 1em 0 0.75em 0;
padding: 0;
}
.container h3 {
margin: 0;
padding: 0;
margin-top: 1em;
margin-bottom: 0.5em;
}
.container hr {
border-width: 0px;
border-top: 1px solid var(--bg-darkest);
border-bottom: 2px solid var(--bg-lightest);
margin: 1em 0 0.5em 0;
}
</style>
<script lang="ts">
import { Vue, Component } from 'vue-property-decorator';
@Component
export default class FramedBox extends Vue {}
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment