Update style

EggerickxGillian · Feb 14, 2014 · 9ea299d · 9ea299d
1 parent 2fd55d3
commit 9ea299d
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 28 deletions.
diff --git a/demo/index.html b/demo/index.html
@@ -9,16 +9,14 @@
 <html class="no-js"> <!--<![endif]-->
 <head>
 	<meta charset="utf-8">
-	<meta http-equiv="X-UA-Compatible" content="IE=edge">
-	<title></title>
-	<meta name="description" content="">
+	<title>Remodal example</title>
+	<meta name="description" content="Remodal example">
 	<meta name="viewport" content="width=device-width, initial-scale=1">
 
 	<link rel="stylesheet" href="../src/jquery.remodal.css">
 </head>
 <body>
 <div class="remodal-bg">
-    <!-- Add your site or application content here -->
     <a href="#modal">Click</a>
     <br><br>
 
@@ -42,19 +40,19 @@ <h1>Remodal</h1>
 <script src="../src/jquery.remodal.js"></script>
 <script>
     $(document).on('open', '.remodal', function () {
-        alert('open');
+        console.log('open');
     });
 
     $(document).on('opened', '.remodal', function () {
-        alert('opened');
+        console.log('opened');
     });
 
     $(document).on('close', '.remodal', function () {
-        alert('close');
+        console.log('close');
     });
 
     $(document).on('closed', '.remodal', function () {
-        alert('closed');
+        console.log('closed');
     });
 
     $(document).on('confirm', '.remodal', function () {

diff --git a/dist/jquery.remodal.css b/dist/jquery.remodal.css
@@ -99,7 +99,7 @@ body.remodal_active .remodal-overlay {
 
     width: 100%;
     min-height: 100%;
-	padding: 30px;
+	padding: 35px;
 	-webkit-box-sizing: border-box;
 	-moz-box-sizing: border-box;
 	box-sizing: border-box;
@@ -109,6 +109,8 @@ body.remodal_active .remodal-overlay {
 	background: #f4f4f4;
 	background-clip: padding-box;
     color: #182a3c;
+    -webkit-box-shadow: 0px 0px 8px #171a24;
+    box-shadow: 0px 0px 8px #171a24;
 
     -webkit-transform: scale(0.95);
 	-moz-transform: scale(0.95);
@@ -133,15 +135,17 @@ body.remodal_active .remodal {
 /* Remodal window close button(begin) */
 .remodal-close {
 	position: absolute;
-	top: 0px;
-	left: 0px;
+	top: 5px;
+	left: 5px;
 
-	width: 35px;
-	height: 35px;
+	width: 28px;
+	height: 28px;
 
 	text-decoration: none;
 
-    background: #3e5368;
+    -webkit-border-radius: 50%;
+    border-radius: 50%;
+    border: 2px solid #3e5368;
     -webkit-transition: background 0.2s linear;
     -moz-transition: background 0.2s linear;
     -o-transition: background 0.2s linear;
@@ -150,15 +154,15 @@ body.remodal_active .remodal {
 
 .remodal-close:after {
     display: block;
-	font-size: 30px;
+	font-size: 28px;
     font-family: Arial, 'Helvetica CY', 'Nimbus Sans L', sans-serif !important;
 
 	content: "×";
-    line-height: 33px;
+    line-height: 28px;
     cursor: pointer;
     text-decoration: none;
 
-    color: #f4f4f4;
+    color: #3e5368;
 
     -webkit-transition: all 0.2s linear;
     -moz-transition: all 0.2s linear;
@@ -167,7 +171,7 @@ body.remodal_active .remodal {
 }
 
 .remodal-close:hover, .remodal-close:active {
-    background: #2a3f54;
+    background: #3e5368;
 }
 .remodal-close:hover.remodal-close:after, .remodal-close:active.remodal-close:after {
     color: #f4f4f4;
@@ -225,5 +229,8 @@ body.remodal_active .remodal {
         max-width: 700px;
         margin: 20px auto;
         min-height: 0;
+
+        -webkit-border-radius: 6px;
+        border-radius: 6px;
     }
 }
diff --git a/src/jquery.remodal.css b/src/jquery.remodal.css
@@ -99,7 +99,7 @@ body.remodal_active .remodal-overlay {
 
     width: 100%;
     min-height: 100%;
-	padding: 30px;
+	padding: 35px;
 	-webkit-box-sizing: border-box;
 	-moz-box-sizing: border-box;
 	box-sizing: border-box;
@@ -109,6 +109,8 @@ body.remodal_active .remodal-overlay {
 	background: #f4f4f4;
 	background-clip: padding-box;
     color: #182a3c;
+    -webkit-box-shadow: 0px 0px 8px #171a24;
+    box-shadow: 0px 0px 8px #171a24;
 
     -webkit-transform: scale(0.95);
 	-moz-transform: scale(0.95);
@@ -133,15 +135,17 @@ body.remodal_active .remodal {
 /* Remodal window close button(begin) */
 .remodal-close {
 	position: absolute;
-	top: 0px;
-	left: 0px;
+	top: 5px;
+	left: 5px;
 
-	width: 35px;
-	height: 35px;
+	width: 28px;
+	height: 28px;
 
 	text-decoration: none;
 
-    background: #3e5368;
+    -webkit-border-radius: 50%;
+    border-radius: 50%;
+    border: 2px solid #3e5368;
     -webkit-transition: background 0.2s linear;
     -moz-transition: background 0.2s linear;
     -o-transition: background 0.2s linear;
@@ -150,15 +154,15 @@ body.remodal_active .remodal {
 
 .remodal-close:after {
     display: block;
-	font-size: 30px;
+	font-size: 28px;
     font-family: Arial, 'Helvetica CY', 'Nimbus Sans L', sans-serif !important;
 
 	content: "×";
-    line-height: 33px;
+    line-height: 28px;
     cursor: pointer;
     text-decoration: none;
 
-    color: #f4f4f4;
+    color: #3e5368;
 
     -webkit-transition: all 0.2s linear;
     -moz-transition: all 0.2s linear;
@@ -167,7 +171,7 @@ body.remodal_active .remodal {
 }
 
 .remodal-close:hover, .remodal-close:active {
-    background: #2a3f54;
+    background: #3e5368;
 }
 .remodal-close:hover.remodal-close:after, .remodal-close:active.remodal-close:after {
     color: #f4f4f4;
@@ -225,5 +229,8 @@ body.remodal_active .remodal {
         max-width: 700px;
         margin: 20px auto;
         min-height: 0;
+
+        -webkit-border-radius: 6px;
+        border-radius: 6px;
     }
 }