suzanne.soy/racket
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

simpler modal width solution

Browse Source
This commit is contained in:
Sam Tobin-Hochstadt 2013-08-20 19:46:13 -04:00 committed by Matthew Flatt
parent c620ccd80c
commit fb617d9438
2 changed files with 7 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
new-racket-web/css/gumby.css
View File

@ -1857,9 +1857,9 @@ body .video.twitch, body .video.youtube.show_controls { padding-top: 30px; }
.drawer.active { height: auto; max-height: 800px; -webkit-transition-duration: 0.5s; -moz-transition-duration: 0.5s; -o-transition-duration: 0.5s; transition-duration: 0.5s; }
.modal { width: 100%; height: 100%; position: fixed; top: 0; left: 0; z-index: -999999; display: none; background: black; background: rgba(0, 0, 0, 0.8); }
.modal > .content { min-width: 50%; max-width: 85%; min-height: 50%; max-height: 95%; position: relative; top: 5%; margin: 0 auto; padding-top: 10px; padding-bottom: 10px; background: white; z-index: 2; overflow: auto; }
@media only screen and (max-width: 768px) { .modal > .content { width: 90%; min-height: 80%; max-height: 95%; top: 10%; } }
@media only screen and (max-width: 767px) { .modal > .content { width: 92.5%; min-height: 92.5%; max-height: 95; top: 3.75%; } }
.modal > .content { position: relative; top: 5%; max-width: 60em; margin: 0 auto; padding-top: 10px; padding-bottom: 10px; background: white; z-index: 2; overflow: auto; }
@media only screen and (max-width: 768px) { .modal > .content { max-width: 95%; min-height: 80%; max-height: 95%; top: 10%; } }
@media only screen and (max-width: 767px) { .modal > .content { max-width: 95%; min-height: 92.5%; max-height: 95%; top: 3.75%; } }
.modal > .content > .close { position: absolute; top: 10px; right: 10px; cursor: pointer; }
.modal, .modal > .content { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); opacity: 0; -webkit-transition-duration: 0.1s; -moz-transition-duration: 0.1s; -o-transition-duration: 0.1s; transition-duration: 0.1s; }
.modal.active { display: block; z-index: 999999; }

11
new-racket-web/sass/ui/_toggles.scss
View File

@ -28,12 +28,9 @@
background: rgb(0, 0, 0);
background: $modal-overlay-color;
> .content {
min-width: 50%;
max-width: 85%;
min-height: 50%;
max-height: 95%;
position: relative;
top: 5%;
max-width: 60em;
margin: 0 auto;
padding-top: 10px;
padding-bottom: 10px;
@ -41,15 +38,15 @@
z-index: 2;
overflow: auto;
@include respond(portrait-tablets) {
width: 90%;
max-width: 95%;
min-height: 80%;
max-height: 95%;
top: 10%;
}
@include respond(all-phones) {
width: 92.5%;
max-width: 95%;
min-height: 92.5%;
max-height: 95;
max-height: 95%;
top: 3.75%;
}
> .close {