Created
December 9, 2013 16:45
-
-
Save philkeys/7875574 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
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
// ---- | |
// Sass (v3.3.0.rc.1) | |
// Compass (v0.13.alpha.10) | |
// ---- | |
$modal-border-color: #ddd; | |
$modal-max-width: 650px; | |
$modal-mobile-header: #27aae2; | |
$modal-layer: 999; // Set high z-index to appear above all other content | |
// Prevent overflow on HTML element | |
html { | |
overflow-y: scroll; | |
} | |
.has-overlay { | |
overflow: hidden; | |
> body { | |
height: 100%; | |
overflow-y: scroll; | |
} | |
} | |
%modal { | |
// Hide initially | |
-webkit-transform: translate(0, 100%); | |
-moz-transform: translate(0, 100%); | |
-o-transform: translate(0, 100%); | |
-ms-transform: translate(0, 100%); | |
transform: translate(0, 100%); | |
-webkit-transform: translate3d(0, 100%, 0); // iOS | |
transform: translate3d(0, 100%, 0); | |
// Maintain a fixed position | |
position: fixed; | |
top: 0; | |
left: 0; | |
right: 0; | |
bottom: 0; | |
z-index: $modal-layer; | |
opacity: 0; | |
color: #222; | |
line-height: 1.3; | |
// Show modal when requested | |
&:target { | |
-webkit-transform: translate(0, 0); | |
-moz-transform: translate(0, 0); | |
-o-transform: translate(0, 0); | |
-ms-transform: translate(0, 0); | |
transform: translate(0, 0); | |
opacity: 1; | |
} | |
// Internet Explorer 8 | |
display: none\9; | |
&.is-active { | |
display: block\9; | |
} | |
// Overwrite IE8 hack for IE9 and IE10 | |
&:target { | |
display: block\9; | |
} | |
// Content Area | |
.modal-inner { | |
position: absolute; | |
top: 50px; | |
left: 50%; | |
z-index: 20; | |
margin-left: ($modal-max-width / 2) * -1; | |
width: $modal-max-width; | |
overflow-x: hidden; | |
-webkit-overflow-scrolling: touch; // Native style momentum scrolling | |
border-radius: 2px; | |
background: #fff; | |
-webkit-box-shadow: 0 0 30px rgba(0,0,0,0.6); | |
box-shadow: 0 0 30px rgba(0,0,0,0.6); | |
> img, | |
> video, | |
> iframe { | |
width: 100%; | |
height: auto; | |
min-height: 300px; | |
} | |
> img { | |
width: auto; | |
max-width: 100%; | |
} | |
} | |
// Header | |
header { | |
border-bottom: 1px solid $modal-border-color; | |
padding: 0 1.2em; | |
> h2 { | |
margin: 0.5em 0; | |
} | |
} | |
// Content | |
.modal-content { | |
max-height: 400px; | |
max-height: 70vh; | |
border-bottom: 1px solid $modal-border-color; | |
padding: 15px 1.2em; | |
overflow-x: hidden; | |
overflow-y: auto; | |
> * { | |
max-width: 100%; | |
} | |
} | |
// Footer | |
footer { | |
border-top: 1px solid lighten($modal-border-color, 20); | |
padding: 0 1.2em 18px; | |
background: #f0f0f0; | |
border-radius: 2px; | |
} | |
// A close button | |
.modal-close { | |
display: block; | |
text-indent: -100px; | |
overflow: hidden; | |
// Background as close | |
&:before { | |
content: ''; | |
position: absolute; | |
top: 0; | |
left: 0; | |
right: 0; | |
bottom: 0; | |
z-index: 10; | |
// Background for overlay – Data URI because of IE8 not supporting rgba | |
background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAEElEQVR42gEFAPr/AAAAAMwA0QDNTiUx4gAAAABJRU5ErkJggg=='); | |
} | |
// Actual close button on modal | |
&:after { | |
content: '\00d7'; | |
position: absolute; | |
top: 25px; | |
left: 50%; | |
z-index: 20; | |
margin-left: ($modal-max-width / 2) - 40; | |
background: #fff; | |
border-radius: 2px; | |
padding: 2px 8px; | |
font-size: 1.2em; | |
text-decoration: none; | |
text-indent: 0; | |
} | |
} | |
// When screen isn't as wide as the modal anymore | |
@media screen and (max-width: $modal-max-width + 40) { | |
.modal-inner { | |
width: auto; | |
left: 20px; | |
right: 20px; | |
margin-left: 0; | |
} | |
.modal-close { | |
left: auto; | |
right: 33px; | |
margin-left: 0; | |
&:after { | |
margin-left: 40%; | |
} | |
} | |
} | |
// For small screens adjust the modal | |
@media screen and (max-width: 30em) { | |
-webkit-transform: translate(0, 400px); // Use px to work around Android 2.3 bug | |
-webkit-transform: translate3d(0, 100%, 0); // And overwrite px if 3D transforms are supported | |
transform: translate3d(0, 100%, 0); | |
-webkit-transition: -webkit-transform .25s ease-in-out, opacity 1ms .25s; | |
-moz-transition: -moz-transform .25s ease-in-out, opacity 1ms .25s; | |
-o-transition: -o-transform .25s ease-in-out, opacity 1ms .25s; | |
-ms-transition: -ms-transform .25s ease-in-out, opacity 1ms .25s; | |
transition: transform .25s ease-in-out, opacity 1ms .25s; | |
display: block; | |
height: 100%; | |
bottom: auto; | |
&:target { | |
-webkit-transition: -webkit-transform .25s ease-in-out; | |
-moz-transition: -moz-transform .25s ease-in-out; | |
-o-transition: -o-transform .25s ease-in-out; | |
-ms-transition: -ms-transform .25s ease-in-out; | |
transition: transform .25s ease-in-out; | |
} | |
&:before { | |
background-color: $modal-mobile-header; | |
background-image: -webkit-gradient(linear, left top, left bottom, from($modal-mobile-header), to(darken($modal-mobile-header, 5%))); | |
background-image: -webkit-linear-gradient(top, $modal-mobile-header, darken($modal-mobile-header, 5%)); | |
background-image: -moz-linear-gradient(top, $modal-mobile-header, darken($modal-mobile-header, 5%)); | |
background-image: -o-linear-gradient(top, $modal-mobile-header, darken($modal-mobile-header, 5%)); | |
background-image: linear-gradient(to bottom, $modal-mobile-header, darken($modal-mobile-header, 5%)); | |
content: ''; | |
position: fixed; | |
top: 0; | |
left: 0; | |
right: 0; | |
z-index: 30; | |
height: 3em; | |
-webkit-box-shadow: 0 0 5px rgba(0,0,0,0.6); | |
box-shadow: 0 0 5px rgba(0,0,0,0.6); | |
} | |
.modal-inner { | |
-webkit-box-sizing: border-box; | |
-moz-box-sizing: border-box; | |
box-sizing: border-box; | |
top: 0; | |
left: 0; | |
right: 0; | |
padding-top: 3em; | |
height: 100%; | |
overflow: scroll; | |
-webkit-box-shadow: none; | |
box-shadow: none; | |
} | |
.modal-content { | |
max-height: none; | |
} | |
.modal-close { | |
right: auto; | |
text-decoration: none; | |
&:before { | |
display: none; | |
} | |
&:after { | |
content: attr(data-close); | |
top: 0.4em; | |
left: 1em; | |
z-index: 40; | |
margin-left: 0; | |
font-size: 1em; | |
padding: 0.5em 1em; | |
} | |
} | |
} | |
// For small heights | |
@media screen and (max-height: 46em) and (min-width: 30em) { | |
.modal-content { | |
max-height: 340px; | |
max-height: 50vh; | |
} | |
} | |
@media screen and (max-height: 36em) and (min-width: 30em) { | |
.modal-content { | |
max-height: 265px; | |
max-height: 40vh; | |
} | |
} | |
} | |
// Fade in the modal | |
%modal-fade { | |
@media screen and (min-width: 30em) { | |
-webkit-transition: opacity 0.4s; | |
-o-transition: opacity 0.4s; | |
transition: opacity 0.4s; | |
} | |
@extend %modal; | |
} | |
.semantic-content { | |
@extend %modal-fade; | |
} |
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
html { | |
overflow-y: scroll; | |
} | |
.has-overlay { | |
overflow: hidden; | |
} | |
.has-overlay > body { | |
height: 100%; | |
overflow-y: scroll; | |
} | |
.semantic-content { | |
-webkit-transform: translate(0, 100%); | |
-moz-transform: translate(0, 100%); | |
-o-transform: translate(0, 100%); | |
-ms-transform: translate(0, 100%); | |
transform: translate(0, 100%); | |
-webkit-transform: translate3d(0, 100%, 0); | |
transform: translate3d(0, 100%, 0); | |
position: fixed; | |
top: 0; | |
left: 0; | |
right: 0; | |
bottom: 0; | |
z-index: 999; | |
opacity: 0; | |
color: #222; | |
line-height: 1.3; | |
display: none\9; | |
} | |
.semantic-content:target { | |
-webkit-transform: translate(0, 0); | |
-moz-transform: translate(0, 0); | |
-o-transform: translate(0, 0); | |
-ms-transform: translate(0, 0); | |
transform: translate(0, 0); | |
opacity: 1; | |
} | |
.is-active.semantic-content { | |
display: block\9; | |
} | |
.semantic-content:target { | |
display: block\9; | |
} | |
.semantic-content .modal-inner { | |
position: absolute; | |
top: 50px; | |
left: 50%; | |
z-index: 20; | |
margin-left: -325px; | |
width: 650px; | |
overflow-x: hidden; | |
-webkit-overflow-scrolling: touch; | |
border-radius: 2px; | |
background: #fff; | |
-webkit-box-shadow: 0 0 30px rgba(0, 0, 0, 0.6); | |
box-shadow: 0 0 30px rgba(0, 0, 0, 0.6); | |
} | |
.semantic-content .modal-inner > img, | |
.semantic-content .modal-inner > video, | |
.semantic-content .modal-inner > iframe { | |
width: 100%; | |
height: auto; | |
min-height: 300px; | |
} | |
.semantic-content .modal-inner > img { | |
width: auto; | |
max-width: 100%; | |
} | |
.semantic-content header { | |
border-bottom: 1px solid #dddddd; | |
padding: 0 1.2em; | |
} | |
.semantic-content header > h2 { | |
margin: 0.5em 0; | |
} | |
.semantic-content .modal-content { | |
max-height: 400px; | |
max-height: 70vh; | |
border-bottom: 1px solid #dddddd; | |
padding: 15px 1.2em; | |
overflow-x: hidden; | |
overflow-y: auto; | |
} | |
.semantic-content .modal-content > * { | |
max-width: 100%; | |
} | |
.semantic-content footer { | |
border-top: 1px solid white; | |
padding: 0 1.2em 18px; | |
background: #f0f0f0; | |
border-radius: 2px; | |
} | |
.semantic-content .modal-close { | |
display: block; | |
text-indent: -100px; | |
overflow: hidden; | |
} | |
.semantic-content .modal-close:before { | |
content: ''; | |
position: absolute; | |
top: 0; | |
left: 0; | |
right: 0; | |
bottom: 0; | |
z-index: 10; | |
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAEElEQVR42gEFAPr/AAAAAMwA0QDNTiUx4gAAAABJRU5ErkJggg=="); | |
} | |
.semantic-content .modal-close:after { | |
content: '\00d7'; | |
position: absolute; | |
top: 25px; | |
left: 50%; | |
z-index: 20; | |
margin-left: 285px; | |
background: #fff; | |
border-radius: 2px; | |
padding: 2px 8px; | |
font-size: 1.2em; | |
text-decoration: none; | |
text-indent: 0; | |
} | |
@media screen and (max-width: 690px) { | |
.semantic-content .modal-inner { | |
width: auto; | |
left: 20px; | |
right: 20px; | |
margin-left: 0; | |
} | |
.semantic-content .modal-close { | |
left: auto; | |
right: 33px; | |
margin-left: 0; | |
} | |
.semantic-content .modal-close:after { | |
margin-left: 40%; | |
} | |
} | |
@media screen and (max-width: 30em) { | |
.semantic-content { | |
-webkit-transform: translate(0, 400px); | |
-webkit-transform: translate3d(0, 100%, 0); | |
transform: translate3d(0, 100%, 0); | |
-webkit-transition: -webkit-transform .25s ease-in-out, opacity 1ms .25s; | |
-moz-transition: -moz-transform .25s ease-in-out, opacity 1ms .25s; | |
-o-transition: -o-transform .25s ease-in-out, opacity 1ms .25s; | |
-ms-transition: -ms-transform .25s ease-in-out, opacity 1ms .25s; | |
transition: transform .25s ease-in-out, opacity 1ms .25s; | |
display: block; | |
height: 100%; | |
bottom: auto; | |
} | |
.semantic-content:target { | |
-webkit-transition: -webkit-transform .25s ease-in-out; | |
-moz-transition: -moz-transform .25s ease-in-out; | |
-o-transition: -o-transform .25s ease-in-out; | |
-ms-transition: -ms-transform .25s ease-in-out; | |
transition: transform .25s ease-in-out; | |
} | |
.semantic-content:before { | |
background-color: #27aae2; | |
background-image: -webkit-gradient(linear, left top, left bottom, from(#27aae2), to(#1c9cd3)); | |
background-image: -webkit-linear-gradient(top, #27aae2, #1c9cd3); | |
background-image: -moz-linear-gradient(top, #27aae2, #1c9cd3); | |
background-image: -o-linear-gradient(top, #27aae2, #1c9cd3); | |
background-image: linear-gradient(to bottom, #27aae2, #1c9cd3); | |
content: ''; | |
position: fixed; | |
top: 0; | |
left: 0; | |
right: 0; | |
z-index: 30; | |
height: 3em; | |
-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.6); | |
box-shadow: 0 0 5px rgba(0, 0, 0, 0.6); | |
} | |
.semantic-content .modal-inner { | |
-webkit-box-sizing: border-box; | |
-moz-box-sizing: border-box; | |
box-sizing: border-box; | |
top: 0; | |
left: 0; | |
right: 0; | |
padding-top: 3em; | |
height: 100%; | |
overflow: scroll; | |
-webkit-box-shadow: none; | |
box-shadow: none; | |
} | |
.semantic-content .modal-content { | |
max-height: none; | |
} | |
.semantic-content .modal-close { | |
right: auto; | |
text-decoration: none; | |
} | |
.semantic-content .modal-close:before { | |
display: none; | |
} | |
.semantic-content .modal-close:after { | |
content: attr(data-close); | |
top: 0.4em; | |
left: 1em; | |
z-index: 40; | |
margin-left: 0; | |
font-size: 1em; | |
padding: 0.5em 1em; | |
} | |
} | |
@media screen and (max-height: 46em) and (min-width: 30em) { | |
.semantic-content .modal-content { | |
max-height: 340px; | |
max-height: 50vh; | |
} | |
} | |
@media screen and (max-height: 36em) and (min-width: 30em) { | |
.semantic-content .modal-content { | |
max-height: 265px; | |
max-height: 40vh; | |
} | |
} | |
@media screen and (min-width: 30em) { | |
.semantic-content { | |
-webkit-transition: opacity 0.4s; | |
-o-transition: opacity 0.4s; | |
transition: opacity 0.4s; | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment