Last active
March 9, 2018 10:09
-
-
Save imyeonn/4efaaee5db31701031d83702829e84ff to your computer and use it in GitHub Desktop.
sass
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.mfp-bg | |
top: 0 | |
left: 0 | |
width: 100% | |
height: 100% | |
z-index: 1042 | |
overflow: hidden | |
position: fixed | |
background: #0b0b0b | |
opacity: 0.8 | |
.mfp-wrap | |
top: 0 | |
left: 0 | |
width: 100% | |
height: 100% | |
z-index: 1043 | |
position: fixed | |
outline: none | |
-webkit-backface-visibility: hidden | |
.mfp-container | |
text-align: center | |
position: absolute | |
width: 100% | |
height: 100% | |
left: 0 | |
top: 0 | |
padding: 0 8px | |
box-sizing: border-box | |
&:before | |
content: "" | |
display: inline-block | |
height: 100% | |
vertical-align: middle | |
.mfp-align-top > .mfp-container | |
&:before | |
display: none | |
.mfp-content | |
position: relative | |
display: inline-block | |
vertical-align: middle | |
margin: 0 auto | |
text-align: left | |
z-index: 1045 | |
.mfp-inline-holder > .mfp-content, | |
.mfp-ajax-holder > .mfp-content | |
width: 100% | |
cursor: auto | |
.mfp-ajax-cur | |
cursor: progress | |
.mfp-zoom-out-cur, | |
.mfp-zoom-out-cur > .mfp-image-holder > .mfp-close | |
cursor: -moz-zoom-out | |
cursor: -webkit-zoom-out | |
cursor: zoom-out | |
.mfp-zoom | |
cursor: pointer | |
cursor: -webkit-zoom-in | |
cursor: -moz-zoom-in | |
cursor: zoom-in | |
.mfp-auto-cursor > .mfp-content | |
cursor: auto | |
.mfp-close, | |
.mfp-arrow, | |
.mfp-preloader, | |
.mfp-counter | |
-webkit-user-select: none | |
-moz-user-select: none | |
user-select: none | |
.mfp-loading.mfp-figure | |
display: none | |
.mfp-hide | |
display: none | |
.mfp-preloader | |
color: #CCC | |
position: absolute | |
top: 50% | |
width: auto | |
text-align: center | |
margin-top: -0.8em | |
left: 8px | |
right: 8px | |
z-index: 1044 | |
> a | |
color: #CCC | |
&:hover | |
color: #FFF | |
.mfp-s-ready > .mfp-preloader | |
display: none | |
.mfp-s-error > .mfp-content | |
display: none | |
button.mfp-close, | |
button.mfp-arrow | |
overflow: visible | |
cursor: pointer | |
background: transparent | |
border: 0 | |
-webkit-appearance: none | |
display: block | |
outline: none | |
padding: 0 | |
z-index: 1046 | |
box-shadow: none | |
touch-action: manipulation | |
button::-moz-focus-inner | |
padding: 0 | |
border: 0 | |
.mfp-close | |
width: 44px | |
height: 44px | |
line-height: 44px | |
position: absolute | |
right: 0 | |
top: 0 | |
text-decoration: none | |
text-align: center | |
opacity: 0.65 | |
padding: 0 0 18px 10px | |
color: #FFF | |
font-style: normal | |
font-size: 28px | |
font-family: Arial, Baskerville, monospace | |
&:hover | |
opacity: 1 | |
&:active | |
top: 1px | |
.mfp-close-btn-in > .mfp-close | |
color: #333 | |
.mfp-image-holder > .mfp-close, | |
.mfp-iframe-holder > .mfp-close | |
color: #FFF | |
right: -6px | |
text-align: right | |
padding-right: 6px | |
width: 100% | |
.mfp-counter | |
position: absolute | |
top: 0 | |
right: 0 | |
color: #CCC | |
font-size: 12px | |
line-height: 18px | |
white-space: nowrap | |
.mfp-arrow | |
position: absolute | |
opacity: 0.65 | |
margin: 0 | |
top: 50% | |
margin-top: -55px | |
padding: 0 | |
width: 90px | |
height: 110px | |
-webkit-tap-highlight-color: transparent | |
&:active | |
margin-top: -54px | |
&:hover | |
opacity: 1 | |
&:before, | |
&:after | |
content: '' | |
display: block | |
width: 0 | |
height: 0 | |
position: absolute | |
left: 0 | |
top: 0 | |
margin-top: 35px | |
margin-left: 35px | |
border: medium inset transparent | |
&:after | |
border-top-width: 13px | |
border-bottom-width: 13px | |
top: 8px | |
&:before | |
border-top-width: 21px | |
border-bottom-width: 21px | |
opacity: 0.7 | |
.mfp-arrow-left | |
left: 0 | |
&:after | |
border-right: 17px solid #FFF | |
margin-left: 31px | |
&:before | |
margin-left: 25px | |
border-right: 27px solid #3F3F3F | |
.mfp-arrow-right | |
right: 0 | |
&:after | |
border-left: 17px solid #FFF | |
margin-left: 39px | |
&:before | |
border-left: 27px solid #3F3F3F | |
.mfp-iframe-holder | |
padding-top: 40px | |
padding-bottom: 40px | |
> .mfp-content | |
line-height: 0 | |
width: 100% | |
max-width: 900px | |
> .mfp-close | |
top: -40px | |
.mfp-iframe-scaler | |
width: 100% | |
height: 0 | |
overflow: hidden | |
padding-top: 56.25% | |
> iframe | |
position: absolute | |
display: block | |
top: 0 | |
left: 0 | |
width: 100% | |
height: 100% | |
box-shadow: 0 0 8px rgba(0, 0, 0, 0.6) | |
background: #000 | |
.mfp-img | |
width: auto | |
max-width: 90% | |
height: auto | |
display: block | |
line-height: 0 | |
box-sizing: border-box | |
padding: 40px 0 40px | |
margin: 0 auto | |
background: #fff | |
// /* The shadow behind the image */ | |
.mfp-figure | |
line-height: 0 | |
&:after | |
content: '' | |
position: absolute | |
left: 0 | |
top: 40px | |
bottom: 40px | |
display: block | |
right: 0 | |
width: auto | |
height: auto | |
z-index: -1 | |
box-shadow: 0 0 8px rgba(0, 0, 0, 0.6) | |
background: #444 | |
> small | |
color: #BDBDBD | |
display: block | |
font-size: 12px | |
line-height: 14px | |
> figure | |
margin: 0 | |
.mfp-bottom-bar | |
margin-top: -36px | |
position: absolute | |
top: 100% | |
left: 0 | |
width: 100% | |
cursor: auto | |
.mfp-title | |
text-align: left | |
line-height: 18px | |
color: #F3F3F3 | |
word-wrap: break-word | |
padding-right: 36px | |
.mfp-image-holder > .mfp-content | |
max-width: 100% | |
.mfp-gallery > .mfp-image-holder > .mfp-figure | |
cursor: pointer |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment