aboutsummaryrefslogtreecommitdiff
path: root/sass
diff options
context:
space:
mode:
authorVictor Häggqvist <[email protected]>2014-06-24 22:22:23 +0200
committerVictor Häggqvist <[email protected]>2014-06-24 22:22:23 +0200
commitcbcf177bdf0b04e2f3b55f82d1609593e7408920 (patch)
tree1b89bedb1daf83ea605c5288d2279041b92aa086 /sass
parent2cb7b2c6e7799f14273d2b4b928c57d4ae4a5aac (diff)
fluff
Diffstat (limited to 'sass')
-rw-r--r--sass/imagelightbox.scss214
1 files changed, 0 insertions, 214 deletions
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;
- }
-}