aboutsummaryrefslogtreecommitdiff
path: root/src/components/still-image
diff options
context:
space:
mode:
authorHenry Jameson <me@hjkos.com>2018-04-07 21:58:29 +0300
committerHenry Jameson <me@hjkos.com>2018-04-07 21:58:29 +0300
commit65f82cf29438fc898cb7733f7bfc8a7868e6f4af (patch)
tree622bd922f9b03aca2ddd8e4cba52bb9d9c3c852d /src/components/still-image
parent529643d35acf10ce5d8793cd2d8309f5bd36d249 (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.vue82
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>