Clean up modal styles

- consistent default 60px padding
- smaller close "x"
- less spacing in login modal
- clean up media queries
- remove some unused styles

r2/r2/public/static/css/components/close.less

@@ -1,18 +1,11 @@
 .c-close {
-    height: 18px;
-    width: 18px;
-    .hdpi-bg-image(@1x: data-uri('../close_x.png'); @2x: data-uri('../close_x_2x.png'));
-    float: right;
+  display: block;
+  width: 12px;
+  height: 12px;
+  .hdpi-bg-image(@1x: data-uri('../close_x.png'); @2x: data-uri('../close_x_2x.png'));
+  background-size: 100% 100%;
 
-    &:hover {
-        .hdpi-bg-image(@1x: data-uri('../close_x_hover.png'); @2x: data-uri('../close_x_hover_2x.png'));
-    }
-
-    button& {
-        padding: 0;
-        cursor: pointer;
-        background: transparent;
-        border: 0;
-        -webkit-appearance: none;
-    }
+  &:hover {
+    .hdpi-bg-image(@1x: data-uri('../close_x_hover.png'); @2x: data-uri('../close_x_hover_2x.png'));
+  }
 }

r2/r2/public/static/css/components/modal.less

@@ -45,6 +45,11 @@
     position: relative;
     width: auto;
     margin: 10px;
+
+    @media (min-width: @screen-sm-min) {
+        width: @modal-md;
+        margin: 30px auto;
+    }
 }
 
 // Actual modal
@@ -52,12 +57,15 @@
     position: relative;
     background-color: @modal-content-bg;
     border-radius: @modal-border-radius;
-    border: 1px solid @modal-content-fallback-border-color; //old browsers fallback (ie8 etc)
     border: 1px solid @modal-content-border-color;
     .box-shadow(3px 3px 13px rgba(0,0,0,0.35));
     background-clip: padding-box;
     // Remove focus outline from opened modal
     outline: 0;
+
+    @media (min-width: @screen-sm-min) {
+        .box-shadow(0 5px 15px rgba(0,0,0,.5));
+    }
 }
 
 // Modal background
@@ -77,20 +85,15 @@
 // Modal header
 // Top section of the modal w/ title and dismiss
 .modal-header {
-    padding: @modal-title-padding;
-    border-bottom: 1px solid @modal-header-border-color;
-    min-height: (@modal-title-padding + @modal-title-line-height);
-}
-// Close icon
-.modal-header .close {
-    margin-top: -2px;
+    position: absolute;
+    top: 12px;
+    right: 12px;
 }
 
 // Title text
 .modal-title {
     color: @modal-title-color;
     display: block;
-    line-height: @modal-title-line-height;
 
     h1&,
     h2&,
@@ -113,47 +116,15 @@
 // Modal body
 // Where all modal content resides (sibling of .modal-header and .modal-footer)
 .modal-body {
-    position: relative;
-
-    &:last-child {
-        // default padding + header height + header border
-        padding-bottom: (@modal-inner-padding-vertical +
-                       ((@modal-title-padding * 3) + @modal-title-line-height) +
-                         1px);
-    }
-}
-
-.modal-body,
-.modal-footer {
-    padding: @modal-inner-padding-vertical @modal-inner-padding-sm-horizontal;
-
-    @media (min-width: @screen-sm-min) {
-        padding-left: @modal-inner-padding-md-horizontal;
-        padding-right: @modal-inner-padding-md-horizontal;
-    }
+    padding: @modal-padding;
 }
 
 // Footer (for actions)
 .modal-footer {
-    background: #E9F0F7;
+    background: @modal-footer-bg;
     border-bottom-left-radius: @modal-border-radius;
     border-bottom-right-radius: @modal-border-radius;
     border-top: 1px solid @modal-footer-border-color;
-    &:extend(.clearfix all); // clear it in case folks use .pull-* classes on buttons
-
-    // Properly space out buttons
-    .btn + .btn {
-        margin-left: 5px;
-        margin-bottom: 0; // account for input[type="submit"] which gets the bottom margin like all other inputs
-    }
-    // but override that for button groups
-    .btn-group .btn + .btn {
-        margin-left: -1px;
-    }
-    // and override it for block buttons as well
-    .btn-block + .btn-block {
-        margin-left: 0;
-    }
 }
 
 // Measure scrollbar width for padding body during modal show/hide
@@ -164,31 +135,3 @@
     height: 50px;
     overflow: scroll;
 }
-
-// Scale up the modal
-@media (min-width: @screen-sm-min) {
-    // Automatically set modal's width for larger viewports
-    .modal-dialog {
-        width: @modal-md;
-        margin: 30px auto;
-
-        // Modal sizes
-        &.modal-dialog-sm { width: @modal-sm; }
-
-        @media (min-width: @screen-md-min) {
-            &.modal-dialog-lg {
-                width: @modal-lg;
-
-                .modal-body,
-                .modal-footer {
-                    padding-left: @modal-inner-padding-lg-horizontal;
-                    padding-right: @modal-inner-padding-lg-horizontal;
-                }
-            }
-        }
-    }
-
-    .modal-content {
-        .box-shadow(0 5px 15px rgba(0,0,0,.5));
-    }
-}

r2/r2/public/static/css/components/variables.less

@@ -57,20 +57,15 @@
 // Modal
 @zindex-modal: 9999;
 @modal-border-radius: 5px;
-@modal-inner-padding-vertical: 15px;
-@modal-inner-padding-sm-horizontal: 30px;
-@modal-inner-padding-md-horizontal: 62px;
-@modal-inner-padding-lg-horizontal: 105px;
+@modal-padding: 60px;
 @modal-title-color: #4270a2;
-@modal-title-padding: 15px;
 @modal-title-line-height: 1.618;
 @modal-content-bg: #f8fbfd;
 @modal-content-border-color: rgba(0,0,0,.2);
-@modal-content-fallback-border-color: #999;
 @modal-backdrop-bg: #000;
 @modal-backdrop-opacity: .5;
-@modal-header-border-color: @modal-content-bg;
 @modal-footer-border-color: #e9eef1;
+@modal-footer-bg: #e9f0f7;
 @modal-lg: 758px;
 @modal-md: 728px;
 @modal-sm: 300px;

r2/r2/public/static/css/reddit.less

@@ -3007,10 +3007,6 @@ li.searchfacet {
 .login-page {
     #login {
         margin-right: 300px;
-
-        .modal-title {
-            margin-top: 0;
-        }
     }
 
     @media (max-width: @screen-sm-min) {
@@ -3024,34 +3020,14 @@ li.searchfacet {
     }
 }
 
-.login-modal {
-    .modal-body {
-        @media (min-width: @screen-sm-min) {
-            // horizontal padding - (header height + body padding + borders)
-            margin: (@modal-inner-padding-md-horizontal - 
-                    (@modal-inner-padding-vertical +
-                        ((@modal-title-padding * 3) + @modal-title-line-height)) +
-                        2) 0;
-        }
-
-        @media (min-width: @screen-md-min) {
-            // horizontal padding - (header height + body padding + borders)
-            margin: (@modal-inner-padding-lg-horizontal - 
-                    (@modal-inner-padding-vertical +
-                        ((@modal-title-padding * 3) + @modal-title-line-height)) +
-                        2) 0;
-        }
-    }
-}
-
 #cover-msg {
     line-height: normal;
-    margin: 0 0 40px;
+    margin: 0 0 50px;
 }
 
 #login {
     .modal-title {
-        margin: 25px 0;
+        margin: 0 0 25px;
     }
 
     .c-alert {
@@ -10560,30 +10536,21 @@ body.banned.deleted div#header {
 }
 
 .embed-modal {
-  .modal-header {
-    position: absolute;
-    top: 12px;
-    right: 12px;
-    min-height: 0;
-    border-bottom: none;
-    padding: 0;
-
-    .c-close {
-      float: none;
-      display: block;
-      width: 12px;
-      height: 12px;
-      background-size: 100% 100%;
-    }
+  .modal-body,
+  .modal-footer {
+    padding: 40px;
   }
 
   .modal-body {
-    position: static;
-    padding: 35px 60px 10px;
+    padding-bottom: 10px;
+
+    .c-checkbox {
+      margin: 8px 0;
+    }
   }
 
   .modal-footer {
-    padding: 25px 60px 40px;
+    padding-top: 20px;
 
     .c-form-control {
       margin-top: 10px;
@@ -10592,7 +10559,6 @@ body.banned.deleted div#header {
 
   .modal-title {
     margin: 0;
-    line-height: normal;
   }
 
   #embed-preview {