From cbcf177bdf0b04e2f3b55f82d1609593e7408920 Mon Sep 17 00:00:00 2001 From: Victor Häggqvist Date: Tue, 24 Jun 2014 22:22:23 +0200 Subject: fluff --- sass/imagelightbox.scss | 214 ------------------------------------------------ 1 file changed, 214 deletions(-) delete mode 100644 sass/imagelightbox.scss (limited to 'sass') diff --git a/sass/imagelightbox.scss b/sass/imagelightbox.scss deleted file mode 100644 index 0ae16c0..0000000 --- a/sass/imagelightbox.scss +++ /dev/null @@ -1,214 +0,0 @@ -@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; - } -} -- cgit v1.2.3