data.coop/pinafore
8
0
Fork 0
Code Issues 1 Pull requests Packages Projects Releases Wiki Activity

fix: fix pressed color on media dialog buttons (#931)

Browse source
This commit is contained in:
Nolan Lawson 2019-02-03 11:10:52 -08:00 committed by GitHub
parent 5e082e5f5f
commit 9231e66612
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 14 additions and 28 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

40
src/routes/_components/IconButton.html
View file

@ -55,19 +55,20 @@
fill: var(--action-button-fill-color-hover);
}
.icon-button.not-pressable:active .icon-button-svg {
.icon-button.not-pressable:active .icon-button-svg,
.icon-button.same-pressed:active .icon-button-svg {
fill: var(--action-button-fill-color-active);
}
.icon-button.pressed .icon-button-svg {
.icon-button.pressed.not-same-pressed .icon-button-svg {
fill: var(--action-button-fill-color-pressed);
}
.icon-button.pressed:hover .icon-button-svg {
.icon-button.pressed.not-same-pressed:hover .icon-button-svg {
fill: var(--action-button-fill-color-pressed-hover);
}
.icon-button.pressed:active .icon-button-svg {
.icon-button.pressed.not-same-pressed:active .icon-button-svg {
fill: var(--action-button-fill-color-pressed-active);
}
@ -83,38 +84,23 @@
fill: var(--action-button-deemphasized-fill-color-hover);
}
.icon-button.muted-style.not-pressable:active .icon-button-svg {
.icon-button.muted-style.not-pressable:active .icon-button-svg,
.icon-button.muted-style.same-pressed:active .icon-button-svg {
fill: var(--action-button-deemphasized-fill-color-active);
}
.icon-button.muted-style.pressed .icon-button-svg {
.icon-button.muted-style.pressed.not-same-pressed .icon-button-svg {
fill: var(--action-button-deemphasized-fill-color-pressed);
}
.icon-button.muted-style.pressed:hover .icon-button-svg {
.icon-button.muted-style.pressed.not-same-pressed:hover .icon-button-svg {
fill: var(--action-button-deemphasized-fill-color-pressed-hover);
}
.icon-button.muted-style.pressed:active .icon-button-svg {
.icon-button.muted-style.pressed.not-same-pressed:active .icon-button-svg {
fill: var(--action-button-deemphasized-fill-color-pressed-active);
}
/*
* disable the separate press color (noPressColor)
*/
.icon-button.pressed.no-press-color .icon-button-svg {
fill: var(--action-button-fill-color);
}
.icon-button.pressed.no-press-color:hover .icon-button-svg {
fill: var(--action-button-fill-color-hover);
}
.icon-button.pressed.no-press-color:active .icon-button-svg {
fill: var(--action-button-fill-color-active);
}
</style>
<script>
import { classname } from '../_utils/classname'
@ -131,18 +117,18 @@
pressed: false,
className: void 0,
delegateKey: void 0,
noPressColor: false
sameColorWhenPressed: false
}),
store: () => store,
computed: {
computedClass: ({ pressable, pressed, big, muted, noPressColor, className }) => {
computedClass: ({ pressable, pressed, big, muted, sameColorWhenPressed, className }) => {
return classname(
'icon-button',
!pressable && 'not-pressable',
pressed && 'pressed',
big && 'big-icon',
muted && 'muted-style',
noPressColor && 'no-press-color',
sameColorWhenPressed ? 'same-pressed' : 'not-same-pressed',
className
)
}

2
src/routes/_components/dialog/components/MediaDialog.html
View file

@ -33,7 +33,7 @@
label="Show {nth(i)} media"
pressed={i === scrolledItem}
href={i === scrolledItem ? '#fa-circle' : '#fa-circle-o'}
noPressColor={true}
sameColorWhenPressed={true}
on:click="onClick(i)"
/>
{/each}