diff options
author | Victor Häggqvist <[email protected]> | 2016-01-14 22:54:43 +0100 |
---|---|---|
committer | Victor Häggqvist <[email protected]> | 2016-01-14 22:54:43 +0100 |
commit | 382401d527314b270e1c67b4f88cd3bfbca81d46 (patch) | |
tree | 77c4831118fc9fd2d19e044ce5ffb60b8533163f /style/plugins | |
parent | dd52fd3f463c254cf54309db848aa88899caeaa0 (diff) |
create plugin architecture
Diffstat (limited to 'style/plugins')
-rw-r--r-- | style/plugins/activity-indicator.scss | 50 | ||||
-rw-r--r-- | style/plugins/closebutton.scss | 54 | ||||
-rw-r--r-- | style/plugins/overlay.scss | 17 |
3 files changed, 121 insertions, 0 deletions
diff --git a/style/plugins/activity-indicator.scss b/style/plugins/activity-indicator.scss new file mode 100644 index 0000000..d5df8c0 --- /dev/null +++ b/style/plugins/activity-indicator.scss @@ -0,0 +1,50 @@ +$loadingbox-size: 20px; + +#imagelightbox-loading, +#imagelightbox-loading div { + border-radius: 50%; +} + +#imagelightbox-loading { + box-shadow: rgba(0, 0, 0, .75) 0 0 $loadingbox-size*2; + + background: #444; // Fallback + background: rgba(0, 0, 0, .5); + height: $loadingbox-size; + left: 50%; + margin: -20px 0 0 -20px; + padding: 10px; + position: fixed; + top: 50%; + width: $loadingbox-size; + z-index: 10003; + animation: fade-in .25s linear; + + div { + animation: imagelightbox-loading .5s ease infinite; + + background-color: #fff; + height: 20px; + width: 20px; + } +} + +@keyframes imagelightbox-loading { + 0% { + opacity: .5; + transform: scale(.75); + } + 50% { + opacity: 1; + transform: scale(1); + } + 100% { + opacity: .5; + transform: scale(.75); + } +} + +@keyframes fade-in { + 0% { opacity: 0; } + 100% { opacity: 1; } +} diff --git a/style/plugins/closebutton.scss b/style/plugins/closebutton.scss new file mode 100644 index 0000000..68b813b --- /dev/null +++ b/style/plugins/closebutton.scss @@ -0,0 +1,54 @@ +$closebutton-size: 40px; + +#imagelightbox-close { + border-radius: 50%; + + background-color: #666; + height: $closebutton-size; + position: fixed; + right: $closebutton-size; + text-align: left; + text-indent: -9999px; + top: $closebutton-size; + transition: color .3s ease; + width: $closebutton-size; + z-index: 10002; + + &:hover { + background-color: #111; + } + + &:before, + &:after { + background-color: #fff; + bottom: 20%; + content: ''; + left: 50%; + margin-left: -1px; + position: absolute; + top: 20%; + width: 2px; + } + + &:before { + rotate: 45deg; + } + + &:after { + rotate: -45deg; + } + + animation: fade-in .25s linear; +} + +@keyframes fade-in { + 0% { opacity: 0; } + 100% { opacity: 1; } +} + +@media only screen and (max-width: 660px) { + #imagelightbox-close { + right: 20px; + top: 20px; + } +} diff --git a/style/plugins/overlay.scss b/style/plugins/overlay.scss new file mode 100644 index 0000000..edbc05a --- /dev/null +++ b/style/plugins/overlay.scss @@ -0,0 +1,17 @@ + +#imagelightbox-overlay { + background: #fff; + background: rgba(255, 255, 255, .9); + bottom: 0; + left: 0; + position: fixed; + right: 0; + top: 0; + z-index: 9998; + animation: fade-in .25s linear; +} + +@keyframes fade-in { + 0% { opacity: 0; } + 100% { opacity: 1; } +} |