Update

New version 1.5 preparation. Changes: * Contextual label for input within the 'Messages Box' template; * Global visibility correction of the 'Close' button.
cara-tm · Sep 8, 2017 · 6517c40 · 6517c40
1 parent 5b37804
commit 6517c40
Show file tree

Hide file tree

Showing 5 changed files with 34 additions and 14 deletions.
diff --git a/css/flaterial.css b/css/flaterial.css
@@ -4,7 +4,7 @@
  * @link:      https://github.com/cara-tm/modal_box/
  * @colors:	   https://www.materialpalette.com
  * @date:      26/08/2017
- * @revision : 04/09/2017
+ * @revision : 08/09/2017
  */
 
 /**

diff --git a/css/message-box.css b/css/message-box.css
@@ -4,7 +4,7 @@
  * @link:      https://github.com/cara-tm/modal_box/
  * @colors:    https://www.materialpalette.com
  * @date:	   04/09/2017
- * @revision : 07/09/2017
+ * @revision : 08/09/2017
  */
 
 /**
@@ -333,8 +333,8 @@ html span[class*='-sign']
 	display: inline-block;
 
 	width: 93.29%;
-	height: 2.5em;
-	margin: .5em 2.91% 0 0;
+	height: 2.2em;
+	margin: .25em 2.91% 0 0;
 	padding: .1em .5% 0;
 	background: #fff;
 	color: #565867;
@@ -369,6 +369,17 @@ input::-moz-focus-inner {
 	pointer-events: none
 }
 
+/**
+ * Changes the suffix label depending of the context
+ */
+.footer-modal label span:after {
+	content: '…'
+}
+
+.footer-modal input:focus + span:after {
+	content: ':';
+}
+
 /**
  * Keeps input as this in all cases
  */
@@ -432,7 +443,12 @@ input::-moz-focus-inner {
 
 }
 
-.modal-dialog .hidden {display: none}
+.modal-dialog .hidden {
+	position: absolute;
+	left: -9999px;
+	width: 1px;
+	height: 1px
+}
 
 /**
  * The modal box footer's links

diff --git a/css/modal-box.css b/css/modal-box.css
@@ -1,5 +1,9 @@
 @charset "UTF-8";
-/*! CSS Modal Box by cara-tm.com - MIT license - https://github.com/cara-tm/modal_box */
+/*! 
+ * CSS Modal Box by cara-tm.com - MIT license - https://github.com/cara-tm/modal_box 
+ * @date     05/08/2017
+ * @revision 08/09/2017
+*/
 
 html {
 	-ms-text-size-adjust: 100%;
@@ -200,7 +204,7 @@ Removed due to uggly support in some webkit old browsers
 .modal-dialog .close {
 	display: block;
 	position: absolute;
-	z-index: 10000;
+	z-index: 90000;
 	top: .35em;
 	right: .4em;
 	width: 1.435em;
@@ -213,7 +217,7 @@ Removed due to uggly support in some webkit old browsers
 	text-align: center;
 	text-decoration: none;
 	color: #fff;
-	line-height: 1.45;
+	line-height: 1.435;
 	/* Only sans-serif font preserves vertical alignement */
 	font-family: Arial, sans-serif;
 	cursor: pointer;
@@ -331,7 +335,6 @@ Removed due to uggly support in some webkit old browsers
  * Changes modal message boxes aspect
  */
 .modal-dialog .modal.modal-message {
-	padding-top: 1em;
 	border: 1px solid #eee;
 
 	-webkit-border-radius: 6px 6px 0 0;
@@ -343,6 +346,7 @@ Removed due to uggly support in some webkit old browsers
 .modal-dialog .modal.modal-message .inner-dialog {
 	overflow: hidden;
 	margin: 0 0 .5em;
+	padding-top:1em;
 	border: 0
 }
 

diff --git a/css/modal-box.min.css b/css/modal-box.min.css
diff --git a/message-box.html b/message-box.html
@@ -131,7 +131,7 @@
 </head>
 <body>
 
-<div tabindex="0" role="dialog" aria-labelled-by="openModal" aria-haspopup="true" class="modal-dialog dialog" id="openModal">
+<div tabindex="2" role="dialog" aria-labelled-by="openModal" aria-haspopup="true" class="modal-dialog dialog" id="openModal">
 
 	<div class="modal">
 
@@ -179,8 +179,8 @@ <h2>Modal Box</h2>
 
 		<div class="footer-modal no__select">
 			<form action="#openModal" method="get" class="message-box">
-				<label for="message"><input type="text" value="" required placeholder="Send a message&hellip;" autofocus id="message" /><span>Send a message&hellip;</span></label>
-			<input type="submit" value="Ok" class="hidden" />
+				<label for="message"><input type="text" value="" tabindex="1" required placeholder="Send a message&hellip;" id="message" /><span>Send a message</span></label>
+			<input type="submit" value="Ok" tabindex="-1" class="hidden" />
 			</form>
 		</div>
 	</div> <!-- /modal -->
@@ -192,7 +192,7 @@ <h2>Modal Box</h2>
 
 	<p class="first-line">
 		<a href="#open" class="button">A simple link</a>
-		<a href="#openModal" class="button" id="link1">Open Modal Box</a>
+		<a href="?#openModal" class="button" id="link1">Open Modal Box</a>
 	</p>
 
 	<p>This is a sample modal box that can be created using the powers of CSS3.</p>