Updated homepage and docs / dist

andrew-waters · Jun 21, 2015 · da7341b · da7341b
1 parent 68251a9
commit da7341b
Show file tree

Hide file tree

Showing 5 changed files with 126 additions and 23 deletions.
diff --git a/dist/material-bootstrap.css b/dist/material-bootstrap.css
@@ -5638,6 +5638,47 @@ button.close {
 @media print {
   .hidden-print {
     display: none !important; } }
+.alert {
+  border-radius: 0; }
+  .alert.rounded {
+    border-radius: 5px; }
+
+.alert-success {
+  background-color: #66BB6A;
+  border-color: #66BB6A;
+  color: #FFF; }
+  .alert-success hr {
+    border-top-color: #54b359; }
+  .alert-success .alert-link {
+    color: #e6e6e6; }
+
+.alert-info {
+  background-color: #29B6F6;
+  border-color: #29B6F6;
+  color: #FFF; }
+  .alert-info hr {
+    border-top-color: #11aef5; }
+  .alert-info .alert-link {
+    color: #e6e6e6; }
+
+.alert-warning {
+  background-color: #FFE082;
+  border-color: #FFE082;
+  color: #333333; }
+  .alert-warning hr {
+    border-top-color: #ffda68; }
+  .alert-warning .alert-link {
+    color: #1a1a1a; }
+
+.alert-danger {
+  background-color: #EF5350;
+  border-color: #EF5350;
+  color: #FFF; }
+  .alert-danger hr {
+    border-top-color: #ed3c39; }
+  .alert-danger .alert-link {
+    color: #e6e6e6; }
+
 .morph-trigger {
   z-index: 1; }
 
@@ -5944,6 +5985,20 @@ pre {
     float: right;
     width: 50%; }
 
+.body-feature {
+  margin-right: -15px;
+  padding: 30px;
+  width: 100%; }
+  @media (max-width: 768px) {
+    .body-feature {
+      padding: 15px; } }
+  @media (max-width: 992px) {
+    .body-feature {
+      padding: 30px; } }
+  @media (max-width: 1200px) {
+    .body-feature {
+      padding: 30px; } }
+
 .panel {
   border-radius: 2px; }
 
@@ -8910,13 +8965,14 @@ body.has-status-bar .navigation-drawer-toggle {
  *	Navigation Drawer Showing (browser > 1200px width)
  *
  */
-body.navigation-drawer-showing .content-container > .container {
+body.navigation-drawer-showing .content-container > .container, body.navigation-drawer-showing .content-container > .body-feature {
   width: calc(100% - 280px);
   margin-left: 280px;
   -webkit-transition: width 0.4s ease-in-out;
   -o-transition: width 0.4s ease-in-out;
   transition: width 0.4s ease-in-out; }
-body.navigation-drawer-showing.no-transition .content-container > .container {
+body.navigation-drawer-showing.no-transition .content-container > .container
+body.navigation-drawer-showing.no-transition .content-container > .body-feature {
   -webkit-transition: none;
   -o-transition: none;
   transition: none; }

diff --git a/dist/material-bootstrap.min.css b/dist/material-bootstrap.min.css
diff --git a/docs/assets/css/material-bootstrap.min.css b/docs/assets/css/material-bootstrap.min.css
diff --git a/docs/index.html b/docs/index.html
@@ -7,38 +7,83 @@
 
 	<div class="col-xs-12">
 
-		<a href="https://travis-ci.org/band-x-media/SASS-Material-Design-for-Bootstrap" target="_blank">
+		<a class="pull-right" href="https://travis-ci.org/band-x-media/SASS-Material-Design-for-Bootstrap" target="_blank">
 			<img src="https://travis-ci.org/band-x-media/SASS-Material-Design-for-Bootstrap.svg?branch=master" />
 		</a>
 
+		<a class="btn btn-inverted" href="https://github.com/band-x-media/SASS-Material-Design-for-Bootstrap" target="_blank">
+			<i class="icon icon-lg fa fa-github"></i>
+		</a>
+
 		<div class="breather-lg"></div>
 
-		<p class="lead"><strong>Material Design</strong> is a set of design principles that Google developed in 2014.</p>
-		<p class="lead"><strong>Bootstrap</strong> is one of the most popular CSS / JS Frameworks on the web.</p>
-		<p class="lead"><strong>Material Design for Bootstrap</strong> joins the two.</p>
+	</div>
+
+	<div class="col-md-4">
+		<p class="lead text-center"><strong>Material Design</strong><br />is a set of design principles that Google developed in 2014.</p>
+	</div>
+
+	<div class="col-md-4">
+		<p class="lead text-center"><strong>Bootstrap</strong><br /> is one of the most popular CSS frameworks on the web.</p>
+	</div>
+
+	<div class="col-md-4">
+		<p class="lead text-center"><strong>Material Design for Bootstrap</strong><br /> joins the two.</p>
+	</div>
+
+	<div class="col-xs-12">
 
 		<div class="breather-lg"></div>
 
-		<p>We use the power of Bootstrap and adapt it to Material Design principles.</p>
-		<p>Furthermore, Material Design introduced some new UI elements which this library brings to Boostrap.</p>
-		<p>Some things are the same, some are better and some are new.</p>
+		<div class="alert alert-warning text-center">
+			This is an early version of the docs - and some of the implementations - which may be liable to breaking changes<br />
+			If you would like to help document or add features, please contribute via <a href="https://github.com/band-x-media/SASS-Material-Design-for-Bootstrap" target="_blank">Github</a>
+		</div>
+
+	</div>
+
+	<div class="col-xs-12">
 
 		<div class="breather-lg"></div>
 
-		<hr />
+		<p class="lead text-center">We use the power of Bootstrap and adapt it to Material Design principles.</p>
+		<p class="lead text-center">Material Design introduced some new UI elements which this library brings to Bootstrap.</p>
+
+	</div>
+
+</div>
+
+<div class="breather-lg"></div>
+
+<div class="col-xs-12 body-feature bg-green bg-50">
+
+	<div class="container">
+
+		<div class="row">
+
+			<div class="col-md-6">
+
+				<h3>Quick Start</h3>
+
+				<p>Including this library in your project is as simple as replacing the original Bootstrap files with these ones:</p>
+
+				<pre class="bg-green bg-100">&lt;link href=&quot;https://cdn.rawgit.com/band-x-media/SASS-Material-Design-for-Bootstrap/master/dist/material-bootstrap.min.css&quot; rel=&quot;stylesheet&quot;&gt;
+			&lt;script type=&quot;text/javascript&quot; src=&quot;https://cdn.rawgit.com/band-x-media/SASS-Material-Design-for-Bootstrap/master/dist/material-bootstrap.min.js&quot;&gt;&lt;/script&gt;</pre>
+
+				<div class="breather-lg"></div>
+
+			</div>
 
-		<h3>Quick Start</h3>
-		<p>Including this library in your project is as simple as replacing the original Bootstrap files with these ones:</p>
+			<div class="col-md-6">
 
-		<pre>&lt;link href=&quot;https://cdn.rawgit.com/band-x-media/SASS-Material-Design-for-Bootstrap/master/dist/material-bootstrap.min.css&quot; rel=&quot;stylesheet&quot;&gt;
-&lt;script type=&quot;text/javascript&quot; src=&quot;https://cdn.rawgit.com/band-x-media/SASS-Material-Design-for-Bootstrap/master/dist/material-bootstrap.min.js&quot;&gt;&lt;/script&gt;</pre>
+				<h3>Contributing</h3>
+				<p>Pull requests are welcome, but not guaranteed. Please make any requests on <a href="https://github.com/band-x-media/SASS-Material-Design-for-Bootstrap" target="_blank">Github</a>.</p>
+				<p>It would be very helpful at this stage to have some assistance with documenting the features.</p>
 
-		<hr />
+			</div>
 
-		<h3>Contributing</h3>
-		<p>Pull requests are welcome, but not guaranteed. Please make any requests on <a href="https://github.com/band-x-media/SASS-Material-Design-for-Bootstrap" target="_blank">Github</a>.</p>
-		<p>It would be very helpful at this stage to have some assistance with documenting the features.</p>
+		</div>
 
 	</div>
 
-</div>
+</div>
diff --git a/src/stylesheets/layout/_navigation-drawer.scss b/src/stylesheets/layout/_navigation-drawer.scss
@@ -252,15 +252,17 @@ body.has-status-bar .navigation-drawer-toggle {
  */
 body.navigation-drawer-showing {
 
-	& .content-container > .container {
+	& .content-container > .container,
+	& .content-container > .body-feature {
 
 		width: calc(100% - 280px);
 		margin-left: 280px;
 		@include transition(width 0.4s ease-in-out);
 
 	}
 
-	&.no-transition .content-container > .container {
+	&.no-transition .content-container > .container
+	&.no-transition .content-container > .body-feature {
 		@include transition(none);
 	}