nikan
/
jukebox
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Refactored button and created icon button

pull/29/head
Nikan Dalvand 2019-07-28 13:00:51 +04:30
parent 64b3c0aca8
commit 538d04bc2c
2 changed files with 85 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/renderer/components/Button.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<a href="#" role="button" class="btn" :class="className"> <a href="#" role="button" class="button" :class="className">
<slot name="icon"></slot> <slot name="icon"></slot>
<slot></slot> <slot></slot>
</a> </a>
@ -9,7 +9,7 @@
export default { export default {
data () { data () {
return { return {
className: `btn--` + this.variant className: `button--` + this.variant
} }
}, },
@ -19,7 +19,7 @@ export default {
</script> </script>
<style lang="sass" scoped> <style lang="sass" scoped>
.btn .button
font-size: .9rem font-size: .9rem
text-decoration: none text-decoration: none
padding: .5rem 1rem padding: .5rem 1rem

82
src/renderer/components/IconButton.vue Normal file
View File

@ -0,0 +1,82 @@
<template>
<a href="#" role="button" class="icon-button" :class="className">
<slot></slot>
</a>
</template>
<script>
export default {
name: 'IconButton',
data () {
return {
className: `icon-button--` + this.variant
}
},
props: ['variant']
}
</script>
<style lang="sass" scoped>
.icon-button
font-size: .9rem
text-decoration: none
padding: .5rem 1rem
text-transform: capitalize
border-radius: .375rem
transition: background-color 200ms
box-sizing: border-box
outline: unset
&--contained
background-color: #0076F9
color: white
font-weight: 600
&:hover
background-color: lighten(#0076F9,5)
&:focus,&:active
background-color: darken(#0076F9,5)
svg
width: 14px
height: 14px
fill: white
transition: fill 200ms
&--flat
color: grey
transition: all .2s ease-in-out
svg
fill: gray
&:hover
background-color: rgba(0,0,0,0.05)
&:focus,&:active
background-color: rgba(0,0,0,.15)
&--raised
background-color: #0076F9
color: white
font-weight: 600
box-shadow: 0 .3rem .7rem rgba(#0076F9 , .5)
&:hover
background-color: lighten(#0076F9,5)
&:focus,&:active
background-color: darken(#0076F9,5)
&--outlined
background-color: white
color: #0076F9
border: 1px solid #0076F9
svg
fill: #0076F9
&:focus,&:active
background-color: darken(#0076F9,5)
color: white
svg
fill: white
&:hover
background-color: #0076F9
color: white
svg
fill: white
</style>