rayelliott
/
marc-leopold
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

box shadow on thumbs-list

This commit is contained in:
ManjaroOne666 2019-02-13 13:03:25 +00:00
parent aa8eec20cb
commit 622e25ec4a
2 changed files with 10 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
TODO.md
View File

@ -1,7 +1,9 @@
## TODO ## TODO
* Galleries - thumbs on desktop - way to make them stand out aginst the image * Galleries - thumbs on desktop - way to make them stand out aginst the image
* Home - text needs to stand out more on light background areas * Home - tagline text needs to stand out more on light background areas
- shadow-deco maybe? - shadow-deco maybe?
* General - titles - shadow looks untidy before title transitions in
- make part of transition?
* General - sort things by sort_order * General - sort things by sort_order
* mailer * mailer
* remove testing/dev mode or whatever its called from axios in nuxt.config.js * remove testing/dev mode or whatever its called from axios in nuxt.config.js

8
components/GalleryThumbs.vue
View File

@ -2,7 +2,7 @@
<div> <div>
<div class="gallery-thumbs__spacer"></div> <div class="gallery-thumbs__spacer"></div>
<ul ref="galleryThumbsList" <ul ref="galleryThumbsList"
class="gallery-thumbs__list"> class="gallery-thumbs__list list-shadow">
<li v-for="(gallery, galleryIndex) in galleries" <li v-for="(gallery, galleryIndex) in galleries"
:key="galleryIndex" :key="galleryIndex"
:class="{ 'is-active': activeRow === galleryIndex }" :class="{ 'is-active': activeRow === galleryIndex }"
@ -383,6 +383,12 @@ export default {
transition: opacity .3s; // TEMP transition: opacity .3s; // TEMP
} }
.list-shadow {
$color: $color__neutral-100;
box-shadow: 0 -3px 33px -9px $color, 0 0 8px -3px $color;
background-color: rgba($color, .7);
}
.gallery-thumbs__row-container { .gallery-thumbs__row-container {
position: absolute; position: absolute;
width: 100%; width: 100%;