106 lines
1.7 KiB
Vue
106 lines
1.7 KiB
Vue
|
<template>
|
||
|
|
<a
|
||
|
|
class="button"
|
||
|
|
:class="[
|
||
|
|
{
|
||
|
|
'is-outline': isOutline,
|
||
|
|
'reverse-colors': reverseColors,
|
||
|
|
'extra-border': extraBorder,
|
||
|
|
'is-narrow': narrow
|
||
|
|
},
|
||
|
|
color
|
||
|
|
]"
|
||
|
|
:href="url"
|
||
|
|
:target="blank ? '_blank' : ''"
|
||
|
|
>
|
||
|
|
<slot></slot>
|
||
|
|
</a>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
name: 'Button',
|
||
|
|
props: {
|
||
|
|
url: String,
|
||
|
|
isOutline: Boolean,
|
||
|
|
reverseColors: Boolean,
|
||
|
|
extraBorder: Boolean,
|
||
|
|
color: String,
|
||
|
|
narrow: Boolean,
|
||
|
|
blank: Boolean
|
||
|
|
}
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
@import 'new-dashboard/styles/variables';
|
||
|
|
|
||
|
|
.button {
|
||
|
|
display: inline-flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
padding: 10px 16px;
|
||
|
|
border-radius: 4px;
|
||
|
|
background: $button__bg-color;
|
||
|
|
color: $button__color;
|
||
|
|
font: 600 12px/16px $title__font-family;
|
||
|
|
letter-spacing: 0;
|
||
|
|
cursor: pointer;
|
||
|
|
|
||
|
|
&:hover {
|
||
|
|
background-color: $button__bg-color--hover;
|
||
|
|
}
|
||
|
|
|
||
|
|
&.is-narrow {
|
||
|
|
padding: 6px 16px;
|
||
|
|
}
|
||
|
|
|
||
|
|
&.red {
|
||
|
|
background-color: $red--600;
|
||
|
|
}
|
||
|
|
|
||
|
|
&.green {
|
||
|
|
background-color: $green--400;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.reverse-colors {
|
||
|
|
background: $button__color;
|
||
|
|
color: $button__bg-color;
|
||
|
|
|
||
|
|
&:hover {
|
||
|
|
background-color: darken($button__color, 2);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.is-outline {
|
||
|
|
border: 1px solid $button-outline__border-color;
|
||
|
|
padding: 9px 16px;
|
||
|
|
background: transparent;
|
||
|
|
color: $button-outline__color;
|
||
|
|
|
||
|
|
&.extra-border {
|
||
|
|
border-width: 2px;
|
||
|
|
}
|
||
|
|
|
||
|
|
&:hover,
|
||
|
|
&:focus {
|
||
|
|
background-color: rgba($black, 0.02);
|
||
|
|
}
|
||
|
|
|
||
|
|
&.navy-blue {
|
||
|
|
border-color: $navy-blue;
|
||
|
|
background-color: transparent;
|
||
|
|
color: $navy-blue;
|
||
|
|
}
|
||
|
|
|
||
|
|
&.noBorder {
|
||
|
|
border: none;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.noCursor {
|
||
|
|
cursor: initial;
|
||
|
|
}
|
||
|
|
</style>
|