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

Added different sizes to iconbutton and adjusted the baseline of it

pull/29/head
Nikan Dalvand 2019-07-28 13:22:10 +04:30
parent a7922beca2
commit ade50bfc85
3 changed files with 46 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -7,6 +7,7 @@
<script>
export default {
name: 'Button',
data () {
return {
className: `button--` + this.variant

54
src/renderer/components/IconButton.vue
View File

@ -1,5 +1,6 @@
<template>
<a href="#" role="button" class="icon-button" :class="className">
<slot name="icon"></slot>
<slot></slot>
</a>
</template>
@ -20,44 +21,59 @@ export default {
<style lang="sass" scoped>
.icon-button
font-size: .9rem
display: flex
justify-content: center
align-items: center
width: 38px
height: 38px
text-decoration: none
padding: .5rem 1rem
text-transform: capitalize
border-radius: .375rem
border-radius: 100%
transition: background-color 200ms
box-sizing: border-box
outline: unset
color: grey
transition: all .2s ease-in-out
&.large
width: 48px
height: 48px
svg
width: 32px
height: 32px
&.small
width: 32px
height: 32px
svg
width: 14px
height: 14px
svg
width: 24px
height: 24px
transition: fill 200ms
fill: gray
&:hover
background-color: rgba(0,0,0,0.05)
&:focus,&:active
background-color: rgba(0,0,0,.15)
&--contained
background-color: #0076F9
color: white
font-weight: 600
svg
fill: white
&: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)
svg
fill: white
&:hover
background-color: lighten(#0076F9,5)
&:focus,&:active

11
src/renderer/layouts/PlayerBar.vue
View File

@ -14,7 +14,16 @@
<p class="remainingTime">{{duration}}</p>
</div>
<div class="control-buttons">
<IconButton variant="outlined">
<IconButton >
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M11 18V6l-8.5 6 8.5 6zm.5-6l8.5 6V6l-8.5 6z"/><path d="M0 0h24v24H0z" fill="none"/></svg>
</IconButton>
<IconButton variant="contained">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M11 18V6l-8.5 6 8.5 6zm.5-6l8.5 6V6l-8.5 6z"/><path d="M0 0h24v24H0z" fill="none"/></svg>
</IconButton>
<IconButton variant="raised large">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M11 18V6l-8.5 6 8.5 6zm.5-6l8.5 6V6l-8.5 6z"/><path d="M0 0h24v24H0z" fill="none"/></svg>
</IconButton>
<IconButton variant="outlined small">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M11 18V6l-8.5 6 8.5 6zm.5-6l8.5 6V6l-8.5 6z"/><path d="M0 0h24v24H0z" fill="none"/></svg>
</IconButton>
<div class="play-pause-button" @click="togglePlay">