Merge branch 'master' of https://github.com/CodyHouse/faq-template

Conflicts: js/main.js
codyhouse · Oct 11, 2014 · f4334ce · f4334ce
2 parents c2d4bae + 7b945dd
commit f4334ce
Show file tree

Hide file tree

Showing 3 changed files with 102 additions and 0 deletions.
diff --git a/css/style.css b/css/style.css
@@ -266,6 +266,62 @@ header h1 {
   }
 }
 
+.cd-close-panel {
+  position: fixed;
+  top: 5px;
+  right: -100%;
+  display: block;
+  height: 40px;
+  width: 40px;
+  overflow: hidden;
+  text-indent: 100%;
+  white-space: nowrap;
+  z-index: 2;
+  /* Force Hardware Acceleration in WebKit */
+  -webkit-transform: translateZ(0);
+  -moz-transform: translateZ(0);
+  -ms-transform: translateZ(0);
+  -o-transform: translateZ(0);
+  transform: translateZ(0);
+  -webkit-backface-visibility: hidden;
+  backface-visibility: hidden;
+  -webkit-transition: right 0.4s;
+  -moz-transition: right 0.4s;
+  transition: right 0.4s;
+}
+.cd-close-panel::before, .cd-close-panel::after {
+  /* close icon in CSS */
+  position: absolute;
+  top: 16px;
+  left: 12px;
+  display: inline-block;
+  height: 3px;
+  width: 18px;
+  background: #6c7d8e;
+}
+.cd-close-panel::before {
+  -webkit-transform: rotate(45deg);
+  -moz-transform: rotate(45deg);
+  -ms-transform: rotate(45deg);
+  -o-transform: rotate(45deg);
+  transform: rotate(45deg);
+}
+.cd-close-panel::after {
+  -webkit-transform: rotate(-45deg);
+  -moz-transform: rotate(-45deg);
+  -ms-transform: rotate(-45deg);
+  -o-transform: rotate(-45deg);
+  transform: rotate(-45deg);
+}
+.cd-close-panel.move-left {
+  right: 2%;
+}
+@media only screen and (min-width: 768px) {
+  .cd-close-panel {
+    display: none;
+  }
+}
+
 .cd-faq-group {
   /* hide group not selected */
   display: none;

diff --git a/index.html b/index.html
@@ -233,6 +233,7 @@ <h1>FAQ Template</h1>
 			</li>
 		</ul> <!-- cd-faq-group -->
 	</div> <!-- cd-faq-items -->
+	<a href="#0" class="cd-close-panel">Close</a>
 </section> <!-- cd-faq -->
 <script src="js/jquery-2.1.1.js"></script>
 <script src="js/jquery.mobile.custom.min.js"></script>

diff --git a/scss/style.scss b/scss/style.scss
@@ -259,6 +259,51 @@ header {
 	}
 }
 
+.cd-close-panel {
+	position: fixed;
+	top: 5px;
+	right: -100%;
+	display: block;
+	height: 40px;
+	width: 40px;
+	overflow: hidden;
+	text-indent: 100%;
+	white-space: nowrap;
+	z-index: 2;
+	/* Force Hardware Acceleration in WebKit */
+	@include transform(translateZ(0));
+	-webkit-backface-visibility: hidden;
+	backface-visibility: hidden;
+	@include transition(right .4s);
+
+	&::before, &::after {
+		/* close icon in CSS */
+		position: absolute;
+		top: 16px;
+		left: 12px;
+		display: inline-block;
+		height: 3px;
+		width: 18px;
+		background: $color-4;
+	}
+
+	&::before {
+		@include transform(rotate(45deg));
+	}
+
+	&::after {
+		@include transform(rotate(-45deg));
+	}
+
+	&.move-left {
+		right: 2%;
+	}
+
+	@include MQ(M) {
+		display: none;
+	}
+}
+
 .cd-faq-group {
 	/* hide group not selected */
 	display: none;