From d9bce95eaf0a661dfd8ba5c6a5538bdd8606e253 Mon Sep 17 00:00:00 2001
From: Alexander Ebert <ebert@woltlab.com>
Date: Fri, 26 Feb 2016 16:47:09 +0100
Subject: [PATCH] Basic responsive style for dialogs

---
 wcfsetup/install/files/style/ui/dialog.scss | 49 ++++++++++++++-------
 1 file changed, 34 insertions(+), 15 deletions(-)

diff --git a/wcfsetup/install/files/style/ui/dialog.scss b/wcfsetup/install/files/style/ui/dialog.scss
index 7fd26cc8d8..061bc88cf4 100644
--- a/wcfsetup/install/files/style/ui/dialog.scss
+++ b/wcfsetup/install/files/style/ui/dialog.scss
@@ -3,7 +3,6 @@
 	bottom: 0;
 	left: 0;
 	opacity: 0;
-	padding: 100px 0;
 	position: fixed;
 	right: 0;
 	top: 0;
@@ -12,6 +11,10 @@
 	will-change: opacity;
 	z-index: 399;
 	
+	@include large-screen-only {
+		padding: 100px 0;
+	}
+	
 	&[aria-hidden=false] {
 		opacity: 1;
 		transition-delay: 0s;
@@ -42,26 +45,36 @@
 }
 
 .dialogContainer {
-	animation: wcfDialogOut .3s;
-	animation-fill-mode: forwards;
-	box-shadow: 0 1px 15px 0 rgba(0, 0, 0, .3);
-	left: 50%;
-	max-height: 80%;
-	max-width: 80%;
-	min-width: 400px;
-	position: absolute;
-	transform: translateX(-50%);
 	z-index: 200;
 	
-	&[aria-hidden=false] {
-		animation: wcfDialog .3s;
+	@include small-screen-only {
+		left: 0 !important;
+		position: fixed;
+		right: 0 !important;
+		top: 0 !important;
+	}
+	
+	@include large-screen-only {
+		animation: wcfDialogOut .3s;
 		animation-fill-mode: forwards;
+		box-shadow: 0 1px 15px 0 rgba(0, 0, 0, .3);
+		left: 50%;
+		max-height: 80%;
+		max-width: 80%;
+		min-width: 400px;
+		position: absolute;
+		transform: translateX(-50%);
 		
-		& ~ .dialogContainer[aria-hidden=false] {
-			z-index: 50;
+		&[aria-hidden=false] {
+			animation: wcfDialog .3s;
+			animation-fill-mode: forwards;
 		}
 	}
 	
+	&[aria-hidden=false]  ~ .dialogContainer[aria-hidden=false] {
+		z-index: 50;
+	}
+	
 	> header {
 		background-color: $wcfHeaderBackground;
 		color: $wcfHeaderText;
@@ -102,7 +115,13 @@
 		overflow: auto;
 		
 		&:not(.dialogContentNoPadding) {
-			padding: 30px 20px 0 20px;
+			@include small-screen-only {
+				padding: 10px;
+			}
+			
+			@include large-screen-only {
+				padding: 30px 20px 0 20px;
+			}
 			
 			&::after {
 				content: "";
-- 
2.20.1