Update

Improvements.
cara-tm · Aug 16, 2017 · e712730 · e712730
1 parent b5788b1
commit e712730
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 14 deletions.
diff --git a/css/modal-box.css b/css/modal-box.css
@@ -340,7 +340,7 @@ body .modal-dialog {
 	padding: 5px 20px 50px 20px
 }
 
-.modal-dialog .inner-dialog.modal-message {width: 100%;padding: 5px 20px}
+.modal-dialog .inner-dialog.modal-message {width: 90%;padding: 5px 10% 5px 20px}
 
 /**
  * Prevent headings resizing
@@ -357,7 +357,8 @@ body .modal-dialog {
 .modal-dialog .inner-dialog p {
 	color: #212121;
 	font-size: 85%;
-	line-height: 1.5
+	line-height: 1.5;
+    hyphens: auto
 }
 
 :-webkit-any(.modal-dialog) p {font-size: 85%}
@@ -379,8 +380,7 @@ strong[class$="-sign"] {
 	vertical-align: middle;
 	text-align: center;
 	color: #fff;
-	font: normal normal normal 22px/28px Arial, sans-serif;
-	border-radius: 50%
+	font: normal normal normal 22px/28px Arial, sans-serif
 }
 
 /**

diff --git a/css/modal-box.min.css b/css/modal-box.min.css
diff --git a/demo.html b/demo.html
@@ -351,7 +351,10 @@
 	padding: 5px 20px 50px 20px
 }
 
-.modal-dialog .inner-dialog.modal-message {width: 100%;padding: 5px 20px}
+.modal-dialog .inner-dialog.modal-message {
+    width: 90%;
+    padding: 5px 10% 5px 20px
+}
 
 /**
  * Prevent headings resizing
@@ -368,7 +371,8 @@
 .modal-dialog .inner-dialog p {
 	color: #212121;
 	font-size: 85%;
-	line-height: 1.5
+	line-height: 1.5;
+    hyphens: auto
 }
 
 :-webkit-any(.modal-dialog) p {font-size: 85%}
@@ -380,9 +384,11 @@
 /**
  * Styling the signs for the Modal Message Box
  */
-strong[class$="-sign"] {
-    display: -moz-inline-box;
+span[class$="-sign"] {
+
+
 	display: inline-table;
+    display: inline-block;
     /* 2px less due to padding */
 	width: 24px;
 	height: 28px;
@@ -391,9 +397,12 @@
 	vertical-align: middle;
 	text-align: center;
 	color: #fff;
-	font: normal normal normal 22px/28px Arial, sans-serif;
-	border-radius: 50%
+	font: normal normal normal 22px/28px Arial, sans-serif
 }
+
+    span[class$="-sign"] strong {
+        display: -moz-inline-box;
+    }
 
 /**
  * here is the error sign color
@@ -556,7 +565,15 @@
 
 .wrapper {width: 100%}
 
-.wrapper p {padding: 10px 2% 0;font-size: 20px; line-height: 1.5}
+.wrapper p {
+    padding: 10px 2% 0;
+    font-size: 20px;
+    line-height: 1.5
+}
+
+.modal-dialog .inner-dialog h2{font-family: 'Noto Sans'}
+
+.modal-dialog .inner-dialog p{font-family: 'Open Sans'}
 
 p.first-line {float: left;clear: both;width: 96%}
 
@@ -595,7 +612,7 @@
 (function() {
 	var wf = document.createElement('script');
 	wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
-	 '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
+	 '://ajax.googleapis.com/ajax/libs/webfont/1.6/webfont.js';
 	wf.type = 'text/javascript';
 	wf.async = 'true';
 	var s = document.getElementsByTagName('script')[0];
@@ -660,7 +677,7 @@ <h2>Modal Box</h2>
 		<div class="inner-dialog modal-message">
 
 			<h2>Message Box</h2>
-			<p><strong class="info-sign">ℹ</strong> <strong class="warning-sign">⚠</strong> <strong class="success-sign">✔</strong> <strong class="error-sign">✕</strong>This is a sample modal message box suitable for infos.</p>
+            <p><span class="info-sign"><strong>ℹ</strong></span> <span class="warning-sign"><strong>⚠</strong></span> <span class="success-sign"><strong>✔</strong></span> <span class="error-sign"><strong>✕</strong></span>This is a sample modal message box suitable for infos. ✌</p>
 
 		</div> <!-- /inner-dialog -->