Fix dialog sizes

This commit is contained in:
Ray Schamp 2015-08-11 12:18:58 -04:00
parent 5ba04659e7
commit 5347ecd089
5 changed files with 19 additions and 50 deletions

View file

@ -741,7 +741,9 @@ picture {
transition: opacity 0.25s ease;
border-radius: 5px;
padding: 1.5em;
position: relative; }
position: relative;
display: table;
margin: auto; }
.modal .modal-inner a.cta {
color: white;
display: inline-block;
@ -772,8 +774,7 @@ dialog {
dialog section {
background-color: #3f5975;
color: #fff;
/* Kill margin collapse */
padding: 1px; }
padding: 0.75em; }
dialog section:last-child {
background-color: #fff;
padding: 0.75em;
@ -1016,31 +1017,12 @@ body > section {
body #home {
display: block; }
.modal.n-children-1 dialog {
width: 100%; }
.modal.n-children-1 .modal-inner {
max-width: 25%;
margin-left: auto;
margin-right: auto; }
.modal.n-children-1 .modal-inner::after {
clear: both;
content: "";
display: table; }
.modal.n-children-2 dialog {
.modal dialog {
width: 25em;
float: left;
display: block;
margin-right: 2.53165%;
width: 48.73418%; }
.modal.n-children-2 dialog:last-child {
margin-right: 0; }
.modal.n-children-2 .modal-inner {
max-width: 50%;
margin-left: auto;
margin-right: 12px; }
.modal dialog:last-child {
margin-right: auto; }
.modal.n-children-2 .modal-inner::after {
clear: both;
content: "";
display: table; }
.extension-file section:first-child {
/* Add a border equal to the number of featured extensions - 1 */

File diff suppressed because one or more lines are too long

View file

@ -29,8 +29,7 @@ dialog {
section {
background-color: $alt-background-color;
color: $alt-font-color;
/* Kill margin collapse */
padding: 1px;
padding: 2 * $vertical-base;
}
section:last-child {

View file

@ -89,6 +89,8 @@
border-radius: $base-border-radius;
padding: $modal-padding / 2;
position: relative;
display: table;
margin: auto;
a.cta {
color: white;

View file

@ -61,27 +61,13 @@ body {
}
}
.modal dialog {
width: 25em;
float: left;
margin-right: $gutter;
.modal {
&.n-children-1 {
dialog {
width: 100%;
}
.modal-inner {
@include outer-container(25%);
}
}
&.n-children-2 {
dialog {
@include span-columns(3 of 6);
}
.modal-inner {
@include outer-container(50%);
}
&:last-child {
margin-right: auto;
}
}