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

Standardized button component and implemented focus,active,hover styles

pull/11/head
Nikan Dalvand 2019-07-22 12:50:26 +04:30
parent c0fae49946
commit 1310b0b17e
2 changed files with 48 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,16 +1,19 @@
<template> <template>
<a href="#" role="button" class="btn" :class="className"><slot></slot></a> <a href="#" role="button" class="btn" :class="className">
<slot name="icon"></slot>
<slot></slot>
</a>
</template> </template>
<script> <script>
export default { export default {
data () { data () {
return { return {
className: `btn--` + this.type className: `btn--` + this.variant
} }
}, },
props: ['type'] props: ['variant']
} }
</script> </script>
@ -22,36 +25,57 @@ export default {
padding: .5rem 1rem padding: .5rem 1rem
text-transform: capitalize text-transform: capitalize
border-radius: .375rem border-radius: .375rem
transition: background-color 200ms
box-sizing: border-box
overflow: hidden
outline: unset
&--contained &--contained
background-color: #336cfb background-color: #336cfb
color: white color: white
font-weight: 600 font-weight: 600
align-self: flex-starts &:hover
background-color: lighten(#336cfb,5)
#btn__icon &:focus,&:active
background-color: darken(#336cfb,5)
svg
width: 14px width: 14px
height: 14px height: 14px
fill: white fill: white
transition: fill 200ms
&--flat &--flat
color: grey color: grey
transition: all .2s ease-in-out transition: all .2s ease-in-out
&:hover svg
fill: gray
&:hover
background-color: rgba(0,0,0,0.05)
&:focus,&:active
background-color: rgba(0,0,0,.15) background-color: rgba(0,0,0,.15)
&--raised &--raised
background-color: #336cfb background-color: #336cfb
color: white color: white
font-weight: 600 font-weight: 600
box-shadow: 0 .6rem .6rem rgba(#336cfb , .5) box-shadow: 0 .3rem .7rem rgba(#336cfb , .5)
&:hover
background-color: lighten(#336cfb,5)
&:focus,&:active
background-color: darken(#336cfb,5)
&--outlined &--outlined
background-color: white background-color: white
border: 1px solid #336cfb border: 1px solid #336cfb
transition: all 0.2s ease-in-out svg
fill: #336cfb
&:focus,&:active
background-color: darken(#336cfb,5)
color: white
svg
fill: white
&:hover &:hover
background-color: #336cfb background-color: #336cfb
color: white color: white
svg
fill: white
</style> </style>

22
src/renderer/layouts/DockableSidebar.vue
View File

@ -77,15 +77,17 @@
</MenuItem> </MenuItem>
</MenuGroup> </MenuGroup>
<Button type="contained"> <Button variant="contained" class="playlist-button">
<svg version="1.1" id="btn__icon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 286.376 286.376" style="enable-background:new 0 0 286.376 286.376;" xml:space="preserve"> <template v-slot:icon>
<g id="Add"> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 286.376 286.376" style="enable-background:new 0 0 286.376 286.376;" xml:space="preserve">
<path style="fill-rule:evenodd;clip-rule:evenodd;" d="M268.477,125.29H161.086V17.899c0-9.885-8.013-17.898-17.898-17.898 <g id="Add">
s-17.898,8.013-17.898,17.898v107.39H17.9c-9.885,0-17.9,8.013-17.9,17.898c0,9.885,8.015,17.898,17.9,17.898h107.39v107.39 <path style="fill-rule:evenodd;clip-rule:evenodd;" d="M268.477,125.29H161.086V17.899c0-9.885-8.013-17.898-17.898-17.898
c0,9.885,8.013,17.898,17.898,17.898s17.898-8.013,17.898-17.898v-107.39h107.391c9.885,0,17.898-8.014,17.898-17.898 s-17.898,8.013-17.898,17.898v107.39H17.9c-9.885,0-17.9,8.013-17.9,17.898c0,9.885,8.015,17.898,17.9,17.898h107.39v107.39
C286.376,133.303,278.362,125.29,268.477,125.29z"/> c0,9.885,8.013,17.898,17.898,17.898s17.898-8.013,17.898-17.898v-107.39h107.391c9.885,0,17.898-8.014,17.898-17.898
</g> C286.376,133.303,278.362,125.29,268.477,125.29z"/>
</svg> </g>
</svg>
</template>
Add new list Add new list
</Button> </Button>
<div class="grow"></div> <div class="grow"></div>
@ -174,6 +176,8 @@ section.sidebar
flex-direction: column flex-direction: column
overflow-y: auto overflow-y: auto
transition: width 300ms,transform 300ms,padding 500ms transition: width 300ms,transform 300ms,padding 500ms
.playlist-button
align-self: flex-start
.icon .icon
width: 18px width: 18px
height: auto height: auto