Skip to content

Commit

Permalink
Bugfix z-index for spinner to low, added sass files
Browse files Browse the repository at this point in the history
  • Loading branch information
root committed Oct 15, 2015
1 parent 7e3b3d5 commit bf2f985
Show file tree
Hide file tree
Showing 4 changed files with 252 additions and 2 deletions.
67 changes: 67 additions & 0 deletions demo/demo.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,67 @@
html, body {
font-family: 'Slabo 27px', serif;
padding: 0;
margin: 0;
background: #ffffff;
}

* {
box-sizing: border-box;
}

a {
color: #4ab19a;
}

.clear {
clear: both;
float: none;
width: 100%;
}

.container {
max-width: 1170px;
width: 100%;
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;

.gallery {
a {
img {
float: left;
width: 20%;
height: auto;
border: 2px solid #fff;
-webkit-transition: -webkit-transform .15s ease;
-moz-transition: -moz-transform .15s ease;
-o-transition: -o-transform .15s ease;
-ms-transition: -ms-transform .15s ease;
transition: transform .15s ease;
position:relative;
}

&:hover {
img {
-webkit-transform: scale(1.05);
-moz-transform: scale(1.05);
-o-transform: scale(1.05);
-ms-transform: scale(1.05);
transform: scale(1.05);
z-index: 5;
}
}

&.big {
img {
width: 40%;
}
}
}
}
}

.align-center {
text-align: center;
}
2 changes: 1 addition & 1 deletion dist/simplelightbox.css
Original file line number Diff line number Diff line change
Expand Up @@ -115,7 +115,7 @@
position: fixed;
top: 50%;
width: 40px;
z-index: 1000;
z-index: 1007;
-webkit-animation: pulsate 1s ease-out infinite;
-moz-animation: pulsate 1s ease-out infinite;
-ms-animation: pulsate 1s ease-out infinite;
Expand Down
2 changes: 1 addition & 1 deletion dist/simplelightbox.min.css

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

183 changes: 183 additions & 0 deletions dist/simplelightbox.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,183 @@
.sl-overlay {
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
background: #fff;
opacity: 0.7;
display: none;
z-index: 1006;
}
.sl-wrapper {
z-index: 1000;
button {
border: 0 none;
background: transparent;
font-size: 24px;
padding: 0;
cursor: pointer;
&:hover {
opacity: 0.7;
}
}

.sl-close {
display: none;
position: fixed;
right: 30px;
top: 30px;
z-index: 1015;
}

.sl-counter {
display: none;
position: fixed;
top: 30px;
left: 30px;
z-index: 1015;
}

.sl-navigation {
width: 100%;
display: none;
button {
position: fixed;
top: 50%;
margin-top: - 10px;
height: 30px;
width: 30px;
line-height: 30px;
text-algin: center;
display: block;
z-index: 1015;
&.sl-next {
right: 40px;
}

&.sl-prev {
left: 40px;
}
}
}

.sl-image {
position: fixed;
-ms-touch-action: none;
touch-action: none;
z-index: 10000;
img {
margin: 0;
padding: 0;
display: block;
}
.sl-caption {
display: none;
padding: 10px;
color: #fff;
background: #000;
opacity: 0.8;
position: absolute;
bottom: 0;
left: 0;
right: 0;
}

.sl-download {
display: none;
position: absolute;
bottom: 5px;
right: 5px;
color: #fff;
z-index: 1005;
}
}
}

.sl-spinner {
display: none;
border: 5px solid #333;
border-radius: 40px;
height: 40px;
left: 50%;
margin: -20px 0 0 -20px;
opacity: 0;
position: fixed;
top: 50%;
width: 40px;
z-index: 1007;
-webkit-animation: pulsate 1s ease-out infinite;
-moz-animation: pulsate 1s ease-out infinite;
-ms-animation: pulsate 1s ease-out infinite;
-o-animation: pulsate 1s ease-out infinite;
animation: pulsate 1s ease-out infinite;
}

@-webkit-keyframes pulsate{
0% {
transform: scale(.1);
opacity: 0.0;
}
50% {
opacity: 1;
}
100% {
transform: scale(1.2);
opacity: 0;
}
}
@keyframes pulsate {
0% {
transform: scale(.1);
opacity: 0.0;
}
50% {
opacity: 1;
}
100% {
transform: scale(1.2);
opacity: 0;
}
}

@-moz-keyframes pulsate{
0% {
transform: scale(.1);
opacity: 0.0;
}
50% {
opacity: 1;
}
100% {
transform: scale(1.2);
opacity: 0;
}
}

@-o-keyframes pulsate{
0% {
transform: scale(.1);
opacity: 0.0;
}
50% {
opacity: 1;
}
100% {
transform: scale(1.2);
opacity: 0;
}
}

@-ms-keyframes pulsate{
0% {
transform: scale(.1);
opacity: 0.0;
}
50% {
opacity: 1;
}
100% {
transform: scale(1.2);
opacity: 0;
}
}

0 comments on commit bf2f985

Please sign in to comment.