Skip to content

Instantly share code, notes, and snippets.

@philkeys
Created December 9, 2013 16:45
Show Gist options
  • Save philkeys/7875574 to your computer and use it in GitHub Desktop.
Save philkeys/7875574 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
// ----
// 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;
}
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