Kamil Niemczycki
b481a3fcea
* Add new default style to project * Add new BaseButton component * Remove link to stylesheet in index.html * Add import for default style * Update styles and structure for project components
35 lines
603 B
Vue
35 lines
603 B
Vue
<template>
|
|
<button class="btn" :class="isReverse ? 'reverse' : ''">
|
|
<i v-if="hasIcon" :class="classIcon"></i>
|
|
<slot></slot>
|
|
</button>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'BaseButton',
|
|
props: {
|
|
hasIcon: Boolean,
|
|
classIcon: String,
|
|
isReverse: Boolean
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
$btn-color: black;
|
|
$hover-btn-color: white;
|
|
|
|
.btn {
|
|
padding: 10px 15px;
|
|
border: 1px solid #{$btn-color};
|
|
background-color: transparent;
|
|
color: $btn-color;
|
|
border-radius: 0;
|
|
&:hover {
|
|
background-color: $btn-color;
|
|
color: $hover-btn-color;
|
|
}
|
|
}
|
|
</style>
|