kamilniemczycki/kamilcraft.com
1
0
Fork 0
Code Issues Pull Requests Projects Releases 1 Wiki Activity

Added support for icons in button

Browse Source
This commit is contained in:
Kamil Niemczycki 2021-08-25 00:08:09 +02:00
parent 962da10552
commit 32445d7f25
2 changed files with 15 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
src/components/BaseButton.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<button class="btn" :class="isReverse ? 'reverse' : ''"> <button class="btn" :class="isReverse ? 'reverse' : ''">
<i v-if="hasIcon" :class="classIcon"></i> <font-awesome-icon class="icon" if="hasIcon" :icon="icon"/>
<slot></slot> <span><slot></slot></span>
</button> </button>
</template> </template>
@ -10,7 +10,7 @@ export default {
name: 'BaseButton', name: 'BaseButton',
props: { props: {
hasIcon: Boolean, hasIcon: Boolean,
classIcon: String, icon: String,
isReverse: Boolean isReverse: Boolean
} }
} }
@ -21,11 +21,19 @@ $btn-color: black;
$hover-btn-color: white; $hover-btn-color: white;
.btn { .btn {
padding: 10px 15px; display: flex;
align-items: center;
padding: 8px 10px;
border: 1px solid #{$btn-color}; border: 1px solid #{$btn-color};
background-color: transparent; background-color: transparent;
color: $btn-color; color: $btn-color;
border-radius: 0; border-radius: 0;
.icon {
margin-right: 5px;
font-size: 1.5em;
}
&:hover { &:hover {
background-color: $btn-color; background-color: $btn-color;
color: $hover-btn-color; color: $hover-btn-color;

9
src/components/sections/About.vue
View File

@ -6,7 +6,9 @@
<h2 class="name">Kamil Niemczycki</h2> <h2 class="name">Kamil Niemczycki</h2>
<div class="tagline">Web Developer</div> <div class="tagline">Web Developer</div>
<p>I'm a software engineer specialised in frontend and backend development for complex scalable web apps. I write about software development on my blog. Want to know how I may help your project? Check out my project portfolio and online resume.</p> <p>I'm a software engineer specialised in frontend and backend development for complex scalable web apps. I write about software development on my blog. Want to know how I may help your project? Check out my project portfolio and online resume.</p>
<base-btn class-icon="my-class" has-icon>Wyświetl portfolio</base-btn> <div class="buttons">
<base-btn has-icon icon="portrait">Wyświetl portfolio</base-btn>
</div>
</div> </div>
<div id="grid-photo"> <div id="grid-photo">
<figure id="about-photo"> <figure id="about-photo">
@ -19,11 +21,6 @@
</template> </template>
<style lang="scss"> <style lang="scss">
.btn {
i.my-class:before {
content: 'XD ';
}
}
div.about { div.about {
padding: 20px 0; padding: 20px 0;
background-color: var(--gray-color) !important; background-color: var(--gray-color) !important;