awesome-cheatsheets/components/BaseDivider.vue

56 lines
1.1 KiB
Vue

<!-- *************************************************************************
TEMPLATE
************************************************************************* -->
<template lang="pug">
.c-base-divider
span.c-base-divider__category {{ category }}
hr.c-base-divider__line
</template>
<!-- *************************************************************************
SCRIPT
************************************************************************* -->
<script>
export default {
props: {
category: {
name: String,
required: true
}
}
};
</script>
<!-- *************************************************************************
STYLE
************************************************************************* -->
<style lang="scss">
$c: ".c-base-divider";
#{$c} {
display: flex;
align-items: center;
#{$c}__category {
margin-right: 20px;
color: $white;
text-align-last: left;
text-transform: uppercase;
font-weight: bold;
font-size: 18px;
}
#{$c}__line {
flex: 1;
display: block;
height: 1px;
border: 0;
border-top: 1px solid $oxford-blue;
}
}
</style>