diff options
| author | Henry Jameson <me@hjkos.com> | 2018-04-07 21:58:29 +0300 |
|---|---|---|
| committer | Henry Jameson <me@hjkos.com> | 2018-04-07 21:58:29 +0300 |
| commit | 65f82cf29438fc898cb7733f7bfc8a7868e6f4af (patch) | |
| tree | 622bd922f9b03aca2ddd8e4cba52bb9d9c3c852d /src/components/still-image | |
| parent | 529643d35acf10ce5d8793cd2d8309f5bd36d249 (diff) | |
<select> styling (abeit somewhat not pretty code-wise), default colors for
default schemes.
Diffstat (limited to 'src/components/still-image')
| -rw-r--r-- | src/components/still-image/still-image.vue | 82 |
1 files changed, 42 insertions, 40 deletions
diff --git a/src/components/still-image/still-image.vue b/src/components/still-image/still-image.vue index 5695c554..5fefe714 100644 --- a/src/components/still-image/still-image.vue +++ b/src/components/still-image/still-image.vue @@ -10,53 +10,55 @@ <style lang="scss"> @import '../../_variables.scss'; .still-image { - position: relative; - line-height: 0; - overflow: hidden; + position: relative; + line-height: 0; + overflow: hidden; + width: 100%; + height: 100% - &:hover canvas { - display: none; - } + &:hover canvas { + display: none; + } + + img { + width: 100%; + height: 100% + } + &.animated { + &:hover::before, img { - width: 100%; - height: 100% + visibility: hidden; } - &.animated { - &:hover::before, - img { - visibility: hidden; - } - - &:hover img { - visibility: visible - } - - &::before { - content: 'gif'; - position: absolute; - line-height: 10px; - font-size: 10px; - top: 5px; - left: 5px; - background: rgba(127,127,127,.5); - color: #FFF; - display: block; - padding: 2px 4px; - border-radius: 3px; - z-index: 2; - } + &:hover img { + visibility: visible } - canvas { - position: absolute; - top: 0; - bottom: 0; - left: 0; - right: 0; - width: 100%; - height: 100%; + &::before { + content: 'gif'; + position: absolute; + line-height: 10px; + font-size: 10px; + top: 5px; + left: 5px; + background: rgba(127,127,127,.5); + color: #FFF; + display: block; + padding: 2px 4px; + border-radius: 3px; + z-index: 2; } + } + + canvas { + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + width: 100%; + height: 100%; + } } </style> |
