diff options
Diffstat (limited to 'sass/touch-imagelightbox.scss')
| -rw-r--r-- | sass/touch-imagelightbox.scss | 214 |
1 files changed, 214 insertions, 0 deletions
diff --git a/sass/touch-imagelightbox.scss b/sass/touch-imagelightbox.scss new file mode 100644 index 0000000..0ae16c0 --- /dev/null +++ b/sass/touch-imagelightbox.scss @@ -0,0 +1,214 @@ +@import 'compass/css3'; +@import 'variables'; + +@mixin touch-action($value) { + -ms-touch-action: $value; + touch-action: $value; +} + +html { + // killing 300ms touch delay in IE + @include touch-action(manipulation); +} + +#imagelightbox { + @include touch-action(none); + @include box-shadow(rgba(0, 0, 0, .75) 0 0 50px); + cursor: pointer; + position: fixed; + z-index: 10000; +} + +// Loading Indication +#imagelightbox-loading, +#imagelightbox-loading div { + @include border-radius(50%); +} + +#imagelightbox-loading { + @include 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; + + div { + -moz-animation: imagelightbox-loading .5s ease infinite; + -o-animation: imagelightbox-loading .5s ease infinite; + -webkit-animation: imagelightbox-loading .5s ease infinite; + animation: imagelightbox-loading .5s ease infinite; + + background-color: #fff; + height: 20px; + width: 20px; + } +} + +@-webkit-keyframes imagelightbox-loading { + 0% { opacity: .5; -webkit-transform: scale(.75); } + 50% { opacity: 1; -webkit-transform: scale(1); } + 100% { opacity: .5; -webkit-transform: scale(.75); } +} + +@-moz-keyframes imagelightbox-loading { + 0% { opacity: .5; -moz-transform: scale(.75); } + 50% { opacity: 1; -moz-transform: scale(1); } + 100% { opacity: .5; -moz-transform: scale(.75); } +} + +@-o-keyframes imagelightbox-loading { + 0% { opacity: .5; -o-transform: scale(.75); } + 50% { opacity: 1; -o-transform: scale(1); } + 100% { opacity: .5; -o-transform: scale(.75); } +} + +@keyframes imagelightbox-loading { + 0% { opacity: .5; transform: scale(.75); } + 50% { opacity: 1; transform: scale(1); } + 100% { opacity: .5; transform: scale(.75); } +} + +#imagelightbox-overlay { + background: #fff; + background: rgba(255, 255, 255, .9); + bottom: 0; + left: 0; + position: fixed; + right: 0; + top: 0; + z-index: 9998; +} + + +// Close button +#imagelightbox-close { + @include border-radius(50%); + + + background-color: #666; + height: $closebutton-size; + position: fixed; + right: $closebutton-size; + text-align: left; + text-indent: -9999px; + top: $closebutton-size; + -moz-transition: color .3s ease; + -ms-transition: color .3s ease; + -o-transition: color .3s ease; + -webkit-transition: color .3s ease; + 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 { + @include rotate(45deg); + } + + &:after { + @include rotate(-45deg); + } +} + +#imagelightbox-caption { + background-color: #666; + bottom: 0; + color: #fff; + left: 0; + padding: 10px; + position: fixed; + right: 0; + text-align: center; + z-index: 10001; +} + +// The nav bubbles +#imagelightbox-nav { + @include border-radius(20px); + @include translateX(-50%); + + background-color: #444; + background-color: rgba(0, 0, 0, .5); + bottom: 60px; // 60 + left: 50%; + padding: 5px 2px 1px; + position: fixed; + z-index: 10001; + + a { + @include border-radius(50%); + border: 1px solid #fff; + display: inline-block; + height: 20px; + margin: 0 5px; + width: 20px; + + .active { + background-color: #fff; + } + } +} + +#imagelightbox-loading, +#imagelightbox-overlay, +#imagelightbox-close, +#imagelightbox-caption, +#imagelightbox-nav { + -moz-animation: fade-in .25s linear; + -o-animation: fade-in .25s linear; + -webkit-animation: fade-in .25s linear; + animation: fade-in .25s linear; +} + +@-webkit-keyframes fade-in { + 0% { opacity: 0; } + 100% { opacity: 1; } +} + +@-moz-keyframes fade-in { + 0% { opacity: 0; } + 100% { opacity: 1; } +} + +@-o-keyframes fade-in { + 0% { opacity: 0; } + 100% { opacity: 1; } +} + +@keyframes fade-in { + 0% { opacity: 0; } + 100% { opacity: 1; } +} + +@media only screen and (max-width: 660px) { + #imagelightbox-close { + right: 20px; + top: 20px; + } + + #imagelightbox-nav { + bottom: 20px; + } +} |