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

fix(design): use dark compose button halo on dark themes (#714)

Browse source 
Also only show the halo when we're actually scrolled down, because the
point is to make it more visible against arbitrary content.
This commit is contained in:
Nolan Lawson 2018-12-02 14:25:40 -08:00 committed by GitHub
parent 36d90d34e5
commit 26b84c435a
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 7 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
routes/_components/compose/ComposeButton.html
View file

@ -1,4 +1,4 @@
<div class="compose-box-button-halo"> <div class="compose-box-button-halo {sticky ? 'compose-box-button-halo-sticky' : ''}">
<button class="primary compose-box-button" <button class="primary compose-box-button"
{disabled} {disabled}
aria-label={sticky ? 'Compose' : 'Toot!'} aria-label={sticky ? 'Compose' : 'Toot!'}
@ -25,9 +25,11 @@
.compose-box-button-halo { .compose-box-button-halo {
border-radius: 2px; border-radius: 2px;
margin: 5px 15px 15px 5px; margin: 5px 15px 15px 5px;
background: var(--compose-button-halo);
pointer-events: auto; pointer-events: auto;
} }
.compose-box-button-halo-sticky {
background-color: var(--compose-button-halo);
}
.compose-box-button { .compose-box-button {
grid-area: button; grid-area: button;
justify-self: right; justify-self: right;
@ -71,4 +73,4 @@
disabled: ({ $postingStatus, overLimit }) => $postingStatus || overLimit disabled: ({ $postingStatus, overLimit }) => $postingStatus || overLimit
} }
} }
</script> </script>

4
scss/themes/_dark.scss
View file

@ -24,9 +24,9 @@
--muted-modal-focus: #{#999}; --muted-modal-focus: #{#999};
--muted-modal-hover: #{rgba(255, 255, 255, 0.2)}; --muted-modal-hover: #{rgba(255, 255, 255, 0.2)};
--compose-button-halo: #{rgba(255, 255, 255, 0.1)}; --compose-button-halo: #{rgba(0, 0, 0, 0.1)};
--compose-autosuggest-item-hover: #{lighten($main-bg-color, 10%)}; --compose-autosuggest-item-hover: #{lighten($main-bg-color, 10%)};
--compose-autosuggest-item-active: #{lighten($main-bg-color, 15%)}; --compose-autosuggest-item-active: #{lighten($main-bg-color, 15%)};
--compose-autosuggest-outline: #{lighten($border-color, 20%)}; --compose-autosuggest-outline: #{lighten($border-color, 20%)};
} }