Skip to content
This repository has been archived by the owner on Feb 23, 2023. It is now read-only.

Commit

Permalink
Change all animations to CSS transitions; bugfixes + code tweaks
Browse files Browse the repository at this point in the history
  • Loading branch information
@fancyapps
fancyapps committed Jun 8, 2017
1 parent a764aea commit 3607c55
Show file tree
Hide file tree
Showing 10 changed files with 809 additions and 1,075 deletions.
253 changes: 118 additions & 135 deletions dist/jquery.fancybox.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,16 +19,20 @@
width: 100%;
height: 100%;
z-index: 99993;
-webkit-tap-highlight-color: transparent;
-webkit-backface-visibility: hidden;
backface-visibility: hidden; }
backface-visibility: hidden;
-webkit-transform: translateZ(0);
transform: translateZ(0); }

/* Make sure that the first one is on the top */
.fancybox-container ~ .fancybox-container {
z-index: 99992; }

.fancybox-outer,
.fancybox-inner,
.fancybox-bg {
.fancybox-bg,
.fancybox-stage {
position: absolute;
top: 0;
right: 0;
Expand All @@ -41,22 +45,19 @@

.fancybox-bg {
background: #1e1e1e;
opacity: 0.87;
opacity: 0;
transition-duration: inherit;
transition-property: opacity;
transition-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1); }

.fancybox-is-hidden .fancybox-bg,
.fancybox-is-closing .fancybox-bg {
opacity: 0;
transition-timing-function: cubic-bezier(0.47, 0, 0.74, 0.71); }

.fancybox-is-open .fancybox-bg {
opacity: 0.87;
transition-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1); }

.fancybox-infobar,
.fancybox-toolbar,
.fancybox-caption-wrap {
position: absolute;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
direction: ltr;
z-index: 99997;
opacity: 0;
Expand Down Expand Up @@ -101,17 +102,8 @@
.fancybox-stage {
overflow: hidden;
direction: ltr;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
padding: 0;
margin: 0;
z-index: 99994;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-tap-highlight-color: transparent; }
-webkit-transform: translate3d(0, 0, 0); }

.fancybox-slide {
position: absolute;
Expand All @@ -129,7 +121,13 @@
z-index: 99994;
-webkit-overflow-scrolling: touch;
display: none;
transition-duration: inherit; }
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
transition-property: opacity, -webkit-transform;
transition-property: transform, opacity;
transition-property: transform, opacity, -webkit-transform;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d; }

.fancybox-slide::before {
content: '';
Expand All @@ -154,6 +152,10 @@
.fancybox-slide--video iframe {
background: #000; }

.fancybox-slide--map .fancybox-content,
.fancybox-slide--map iframe {
background: #E5E3DF; }

.fancybox-slide--next {
z-index: 99995; }

Expand Down Expand Up @@ -226,7 +228,8 @@
height: 80%;
max-width: calc(100% - 100px);
max-height: calc(100% - 88px);
overflow: visible; }
overflow: visible;
background: #fff; }

.fancybox-iframe {
display: block;
Expand Down Expand Up @@ -350,7 +353,7 @@

.fancybox-button[disabled] {
cursor: default;
pinter-events: none; }
pointer-events: none; }

.fancybox-infobar__body, .fancybox-button {
background: rgba(30, 30, 30, 0.6); }
Expand Down Expand Up @@ -438,7 +441,6 @@
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
pointer-events: none;
transition: opacity .25s; }

.fancybox-arrow::after {
Expand All @@ -456,21 +458,18 @@
.fancybox-arrow--right {
right: 0; }

.fancybox-arrow--right::after {
left: 0; }

.fancybox-arrow--left {
left: 0;
-webkit-transform: scaleX(-1);
-ms-transform: scaleX(-1);
transform: scaleX(-1); }

.fancybox-arrow--right::after,
.fancybox-arrow--left::after {
left: 0; }

.fancybox-show-nav .fancybox-arrow {
opacity: 0.6;
pointer-events: all; }
opacity: 0.6; }

.fancybox-show-nav .fancybox-arrow[disabled] {
opacity: 0.3; }
Expand Down Expand Up @@ -508,11 +507,7 @@
-webkit-transform: rotate(359deg);
transform: rotate(359deg); } }

/*
Transition effects
*/
/* Transition effects */
.fancybox-animated {
transition-timing-function: cubic-bezier(0, 0, 0.25, 1); }

Expand Down Expand Up @@ -648,110 +643,98 @@
border-width: 0 2px 0 2px; }

/* Thumbs */
.fancybox-button--thumbs span {
font-size: 23px; }

.fancybox-button--thumbs::before {
width: 3px;
height: 3px;
top: calc(50% - 2px);
left: calc(50% - 2px);
box-shadow: 0 -4px 0, -4px -4px 0, 4px -4px 0, 0 0 0 32px inset, -4px 0 0, 4px 0 0, 0 4px 0, -4px 4px 0, 4px 4px 0; }

.fancybox-thumbs {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: auto;
width: 220px;
margin: 0;
padding: 5px 5px 0 0;
background: #fff;
z-index: 99996;
word-break: normal;
-webkit-tap-highlight-color: transparent;
-webkit-overflow-scrolling: touch;
-ms-overflow-style: -ms-autohiding-scrollbar;
box-sizing: border-box;
z-index: 99995;
display: none; }

.fancybox-show-thumbs .fancybox-thumbs {
display: block; }

.fancybox-show-thumbs .fancybox-inner {
right: 220px; }

.fancybox-thumbs > ul {
list-style: none;
position: absolute;
position: relative;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow-x: hidden;
overflow-y: auto;
font-size: 0; }

.fancybox-thumbs > ul > li {
float: left;
overflow: hidden;
max-width: 50%;
padding: 0;
margin: 0;
width: 105px;
height: 75px;
position: relative;
cursor: pointer;
outline: none;
border: 5px solid transparent;
border-top-width: 0;
border-right-width: 0;
-webkit-tap-highlight-color: transparent;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
box-sizing: border-box; }

li.fancybox-thumbs-loading {
background: rgba(0, 0, 0, 0.1); }

.fancybox-thumbs > ul > li > img {
position: absolute;
top: 0;
left: 0;
min-width: 100%;
min-height: 100%;
max-width: none;
max-height: none;
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none; }

.fancybox-thumbs > ul > li:before {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
border-radius: 2px;
border: 4px solid #4ea7f9;
z-index: 99991;
opacity: 0;
transition: all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94); }

.fancybox-thumbs > ul > li.fancybox-thumbs-active:before {
opacity: 1; }
.fancybox-button--thumbs {
display: none; }

/* Styling for Small-Screen Devices */
@media all and (max-width: 800px) {
@media all and (min-width: 800px) {
.fancybox-button--thumbs {
display: inline-block; }
.fancybox-button--thumbs span {
font-size: 23px; }
.fancybox-button--thumbs::before {
width: 3px;
height: 3px;
top: calc(50% - 2px);
left: calc(50% - 2px);
box-shadow: 0 -4px 0, -4px -4px 0, 4px -4px 0, 0 0 0 32px inset, -4px 0 0, 4px 0 0, 0 4px 0, -4px 4px 0, 4px 4px 0; }
.fancybox-thumbs {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: auto;
width: 220px;
margin: 0;
padding: 5px 5px 0 0;
background: #fff;
word-break: normal;
-webkit-tap-highlight-color: transparent;
-webkit-overflow-scrolling: touch;
-ms-overflow-style: -ms-autohiding-scrollbar;
box-sizing: border-box;
z-index: 99995; }
.fancybox-show-thumbs .fancybox-thumbs {
display: none; }
display: block; }
.fancybox-show-thumbs .fancybox-inner {
right: 0; }
.fancybox-toolbar .fancybox-button--thumbs {
display: none; } }
right: 220px; }
.fancybox-thumbs > ul {
list-style: none;
position: absolute;
position: relative;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow-x: hidden;
overflow-y: auto;
font-size: 0; }
.fancybox-thumbs > ul > li {
float: left;
overflow: hidden;
max-width: 50%;
padding: 0;
margin: 0;
width: 105px;
height: 75px;
position: relative;
cursor: pointer;
outline: none;
border: 5px solid transparent;
border-top-width: 0;
border-right-width: 0;
-webkit-tap-highlight-color: transparent;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
box-sizing: border-box; }
li.fancybox-thumbs-loading {
background: rgba(0, 0, 0, 0.1); }
.fancybox-thumbs > ul > li > img {
position: absolute;
top: 0;
left: 0;
min-width: 100%;
min-height: 100%;
max-width: none;
max-height: none;
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none; }
.fancybox-thumbs > ul > li:before {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
border-radius: 2px;
border: 4px solid #4ea7f9;
z-index: 99991;
opacity: 0;
transition: all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
.fancybox-thumbs > ul > li.fancybox-thumbs-active:before {
opacity: 1; } }
Loading

0 comments on commit 3607c55

Please sign in to comment.