Update

'Message box' template: * prevents the header's images to be grabbed by users; * Updates the 'Readme' file with helper classes.
cara-tm · Sep 7, 2017 · 5b37804 · 5b37804
1 parent fc50694
commit 5b37804
Show file tree

Hide file tree

Showing 3 changed files with 62 additions and 42 deletions.
diff --git a/README.md b/README.md
@@ -54,6 +54,16 @@ A red colored example, well commented, is available for your customization conve
 
 An independant `demo.html` file with full styles is available for integration example ([File: `demo.html`](https://github.com/cara-tm/modal_box/blob/master/demo.html)).
 
+### Helpers for customization
+
+This package is distributed with some class helpers:
+
+* `push__left`: to place the close button and/or the footer's links to the left;
+* `push__center`: to center the footer's links;
+* `push__block`: to display all the footer's links empiled without the scroll bar (the footer adapts it's height accordingly).
+
+See the templates for how tos integration.
+
 ## Custom template sample
 
 Remove all the code between `<style>` and `</style>` from the `demo.html` page, then add before the final `</head>` tag:

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 : 04/09/2017
+ * @revision : 07/09/2017
  */
 
 /**
@@ -17,7 +17,7 @@
 
 	height: 100%;
 
-	opacity: 0;
+	opacity: 0
 }
 
 /**
@@ -27,7 +27,7 @@
 {
 	visibility: visible;
 
-	opacity: 1;
+	opacity: 1
 }
 
 .modal-dialog:target
@@ -38,7 +38,7 @@
 	/* Use of zero prefix with decimal values for older webkit browsers */ 
 	-webkit-animation: fade-in-pulse .3s forwards cubic-bezier(0.8, 0.02, 0.45, 0.91);
 			animation: none;
-			animation: fade-in-pulse-08 .3s forwards cubic-bezier(.8,.02,.45,.91);
+			animation: fade-in-pulse-08 .3s forwards cubic-bezier(.8,.02,.45,.91)
 }
 
 /* 
@@ -52,17 +52,17 @@
 		-webkit-transform: scale(0.8);
 		        transform: scale(0.8);
 
-		opacity: 0;
+		opacity: 0
 	}
 	50%
 	{
-		opacity: 1;
+		opacity: 1
 	}
 	100%,
 	70%
 	{
 		-webkit-transform: scale(1);
-		        transform: scale(1);
+		        transform: scale(1)
 	}
 }
 
@@ -72,16 +72,16 @@
 	{
 		transform: scale(.8);
 
-		opacity: 0;
+		opacity: 0
 	}
 	50%
 	{
-		opacity: 1;
+		opacity: 1
 	}
 	100%,
 	70%
 	{
-		transform: scale(1);
+		transform: scale(1)
 	}
 }
 
@@ -95,15 +95,15 @@
  */
 .modal-dialog .modal-message
 {
-	border: 1px solid #eee;
+	border: 1px solid #eee
 }
 
 /**
  * Color for the main text content
  */
 .modal-dialog .inner-modal
 {
-	color: #212121;
+	color: #212121
 }
 
 /**
@@ -112,7 +112,7 @@
 .modal-dialog .close
 {
 	background: #eee;
-	color: #757575;
+	color: #757575
 }
 
 /**
@@ -129,7 +129,7 @@
 		 -o-box-shadow: none;
 	 -khtml-box-shadow: none;
 		-ms-box-shadow: none;
-			box-shadow: none;
+			box-shadow: none
 }
 
 /**
@@ -175,12 +175,22 @@ html .header-modal h1
 }
 
 .profile-outer figure {
+	position: relative;
 	display: table-cell;
 	float: left;
 	width: 20%;
 	margin: 0
 }
 
+.profile-outer figure span {
+	position: absolute;
+	z-index: 5;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 68px
+}
+
 .header-modal .modal-profile {
 	display: block;
 	width: 68px;
@@ -203,7 +213,7 @@ html .header-modal h1
 .header-modal strong
 {
 	vertical-align: baseline;
-	font-family: 'Segoe UI Symbol', 'Cambria Math', 'Apple Symbols';
+	font-family: 'Segoe UI Symbol', 'Cambria Math', 'Apple Symbols'
 }
 
 
@@ -214,7 +224,7 @@ html .header-modal h1
 	-webkit-box-shadow: none;
 	   -moz-box-shadow: none;
 	 -khtml-box-shadow: none;
-			box-shadow: none;
+			box-shadow: none
 }
 
 
@@ -228,19 +238,19 @@ html .header-modal h1
 		padding-bottom: 1em
 	}
 	.header-modal .modal-profile {
-		margin: 1em 0 0;
+		margin: 1em 0 0
 	}
 	.header-modal svg
 	{
 		width: 32px;
 		height: 32px;
 		margin-top: -.1em;
 
-		vertical-align: baseline;
+		vertical-align: baseline
 	}
 	.mob-hide
 	{
-		display: none!important;
+		display: none !important
 	}
 
 }
@@ -255,21 +265,21 @@ html .header-modal h1
 
 	border-width: 1px;
 	background: #fff;
-	color: #212121;
+	color: #212121
 }
 
 .modal-dialog .inner-dialog p,
 .modal-dialog .inner-dialog ul
 {
-	color: #757575;
+	color: #757575
 }
 
 /**
  * No border for the inner message: there are yet
  */
 .modal-dialog .modal-message .inner-dialog
 {
-	border: none;
+	border: none
 }
 
 /**
@@ -282,7 +292,7 @@ html span[class*='-sign']
 	height: 1em;
 
 	-webkit-border-radius: 50%;
-			border-radius: 50%;
+			border-radius: 50%
 }
 
 /**
@@ -307,12 +317,12 @@ html span[class*='-sign']
 
 	-webkit-box-shadow: none;
 	   -moz-box-shadow: none;
-			box-shadow: none;
+			box-shadow: none
 }
 
 .footer-modal label {
 	display: block;
-	position: relative;
+	position: relative
 
 }
 
@@ -328,7 +338,7 @@ html span[class*='-sign']
 	padding: .1em .5% 0;
 	background: #fff;
 	color: #565867;
-	line-height: 1.5;
+	line-height: normal !important;
 	resize: none;
 	border: none
 }
@@ -381,7 +391,6 @@ input::-moz-focus-inner {
 
 				.footer-modal input[type="text"] {margin: .1em 2.91% 0 0}
 				.footer-modal label span {
-					/* display: none */
 					top: .8em;
 					margin-left: .08em
 				}
@@ -414,17 +423,14 @@ input::-moz-focus-inner {
 
 }
 
-
 /**
- * The active state
+ * Just for IE10/11 because it sucks
  */
-/*
-input:focus + span,
-	input:valid + span {
-		top:-.7em;
-		color: #bbb
+@media all and (-ms-high-contrast:none) {
+
+	.footer-modal label span {display:none}
+
 }
-*/
 
 .modal-dialog .hidden {display: none}
 
@@ -441,7 +447,7 @@ input:focus + span,
 	-ms-touch-action: manipulation;
 	touch-action: manipulation;
 
-	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+	-webkit-tap-highlight-color: rgba(0, 0, 0, 0)
 }
 
 /**
@@ -453,7 +459,7 @@ input:focus + span,
 	background: #eee;
 	background: rgba(38, 166, 154, 0.2) /* Base color: #00897b */;
 
-	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+	-webkit-tap-highlight-color: rgba(0, 0, 0, 0)
 }
 
 .ripple
@@ -463,7 +469,7 @@ input:focus + span,
 	overflow: hidden;
 
 	transform: translate3d(0, 0, 0);
-	will-change: transform;
+	will-change: transform
 }
 
 .ripple:after
@@ -491,12 +497,12 @@ input:focus + span,
 	background-image: -webkit-radial-gradient(circle, #26a69a 10%, transparent 10.01%);
 	background-image:		  radial-gradient(circle, #26a69a 10%, transparent 10.01%);
 	background-repeat: no-repeat;
-	background-position: 50%;
+	background-position: 50%
 }
 
 .ripple:hover
 {
-	background: none;
+	background: none
 }
 
 .ripple:hover:after
@@ -507,5 +513,5 @@ position: absolute;
 	-webkit-transform: scale(0, 0);
 			transform: scale(0, 0);
 
-	opacity: .2;
+	opacity: .2
 }
diff --git a/message-box.html b/message-box.html
@@ -142,13 +142,17 @@
 			<h1>Hi</h1>
 			<div class="profile-outer">
 			<figure class="txt-center">
-				<img src="http://randomuser.me/api/portraits/women/49.jpg" alt="Amelia Andrews" class="modal-profile" /><figcaption>Amelia</figcaption>
+				<span></span>
+				<img src="http://randomuser.me/api/portraits/women/49.jpg" alt="Amelia Andrews" class="modal-profile" />
+				<figcaption>Amelia</figcaption>
 			</figure>
 			<figure class="txt-center">
+				<span></span>
 				<img src="http://randomuser.me/api/portraits/men/41.jpg" alt="John Long" class="modal-profile" />
 				<figcaption>John</figcaption>
 			</figure>
 			<figure class="txt-center">
+				<span></span>
 				<img src="http://randomuser.me/api/portraits/women/12.jpg" alt="Cathy Hansen" class="modal-profile" />
 				<figcaption>Cathy</figcaption>
 			</figure>