Fix Issues:

- #18
- #17
- #11
- #5

Author: alexandru-paduraru

README.md

@@ -1,4 +1,6 @@
-# [Material Kit - Free Bootstrap UI Kit](http://www.creative-tim.com/product/material-kit)
+# [Material Kit - Free Bootstrap UI Kit](http://demos.creative-tim.com/material-kit/index.html)
+
+![alt text](http://s3.amazonaws.com/creativetim_bucket/products/38/original/opt_mk_thumbnail.jpg "Material Kit Free")
 
 Material Kit is a Free Bootstrap UI Kit with a fresh, new design inspired by Google's material design. You asked for it, so we built it. It's a great pleasure to introduce to you the material concepts in an easy to use and beautiful set of components. Along with the restyling of the Bootstrap elements, you will find three fully-coded example pages, to help you design your next project.
 
@@ -11,14 +13,13 @@ Material Kit is based on the Github Repo from Fez (http://fezvrasta.github.io/bo
 ## Links:
 
 + [Live Preview](http://demos.creative-tim.com/material-kit/index.html)
-+ [Rails Gem](https://github.com/UiReady/material_kit/)
-+ Material Kit PRO - coming soon (from $39)
++ [Material Kit PRO](http://demos.creative-tim.com/material-kit-pro/presentation.html)
 
 ## Quick start
 
 Quick start options:
 
-- [Download from Github](https://github.com/timcreative/material-kit/releases/tag/v1.0).
+- [Download from Github](https://github.com/timcreative/material-kit/releases/tag/v1.0.1).
 - [Download from Creative Tim](http://www.creative-tim.com/product/material-kit).
 - Clone the repo: `git clone https://github.com/timcreative/material-kit.git`.
 

assets/css/demo.css

@@ -236,7 +236,12 @@
         width: 960px;
     }
 }
-
+@media (max-width: 991px){
+    .fixed-section.affix{
+        position: relative;
+        margin-bottom: 100px;
+    }
+}
 @media (max-width: 768px){
     .btn, .btn-morphing{
         margin-bottom: 10px;

assets/css/material-kit.css

@@ -616,8 +616,9 @@ fieldset[disabled] .form-group.is-focused .checkbox label {
 .checkbox .checkbox-material {
   vertical-align: middle;
   position: relative;
-  top: 3px;
+  top: 1px;
   padding-right: 5px;
+  display: inline-block;
 }
 .checkbox .checkbox-material:before {
   display: block;
@@ -631,6 +632,7 @@ fieldset[disabled] .form-group.is-focused .checkbox label {
   z-index: 1;
   opacity: 0;
   margin: 0;
+  top: 0;
   transform: scale3d(2.3, 2.3, 1);
 }
 .checkbox .checkbox-material .check {
@@ -2055,20 +2057,6 @@ legend {
 .dropdown-menu {
   border: 0;
   box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
-  -webkit-transition: all 150ms linear;
-  -moz-transition: all 150ms linear;
-  -o-transition: all 150ms linear;
-  -ms-transition: all 150ms linear;
-  transition: all 150ms linear;
-  margin-top: -20px;
-  opacity: 0;
-  visibility: hidden;
-  display: block;
-}
-.open .dropdown-menu {
-  opacity: 1;
-  visibility: visible;
-  margin-top: 1px;
 }
 .dropdown-menu .divider {
   background-color: rgba(0, 0, 0, 0.12);
@@ -2100,6 +2088,24 @@ legend {
   margin: 5px 0;
 }
 
+@media (min-width: 992px) {
+  .dropdown .dropdown-menu {
+    -webkit-transition: all 150ms linear;
+    -moz-transition: all 150ms linear;
+    -o-transition: all 150ms linear;
+    -ms-transition: all 150ms linear;
+    transition: all 150ms linear;
+    margin-top: -20px;
+    opacity: 0;
+    visibility: hidden;
+    display: block;
+  }
+  .dropdown.open .dropdown-menu {
+    opacity: 1;
+    visibility: visible;
+    margin-top: 1px;
+  }
+}
 .alert {
   border: 0;
   border-radius: 0;

assets/sass/material-kit/_checkboxes.scss

@@ -25,22 +25,24 @@
   .checkbox-material {
     vertical-align: middle;
     position: relative;
-    top: 3px;
+    top: 1px;
     padding-right: 5px;
+    display: inline-block;
 
     &:before {
-      display: block;
-      position: absolute;
-      left: 0;
-      content: "";
-      background-color: rgba(0,0,0,.84);
-      height: $mdb-checkbox-size;
-      width: $mdb-checkbox-size;
-      border-radius: 100%;
-      z-index: 1;
-      opacity: 0;
-      margin: 0;
-      transform: scale3d(2.3, 2.3, 1);
+        display: block;
+        position: absolute;
+        left: 0;
+        content: "";
+        background-color: rgba(0,0,0,.84);
+        height: $mdb-checkbox-size;
+        width: $mdb-checkbox-size;
+        border-radius: 100%;
+        z-index: 1;
+        opacity: 0;
+        margin: 0;
+        top: 0;
+        transform: scale3d(2.3, 2.3, 1);
     }
 
     .check {

assets/sass/material-kit/_dropdown.scss

@@ -2,18 +2,6 @@
     border: 0;
     box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
 
-    @include transition($fast-transition-time, $transition-linear);
-    margin-top: -20px;
-    opacity: 0;
-    visibility: hidden;
-    display: block;
-
-    .open &{
-        opacity: 1;
-        visibility: visible;
-        margin-top: 1px;
-    }
-
     .divider {
         background-color: rgba(0, 0, 0, .12);
     }
@@ -47,3 +35,24 @@
         margin: 5px 0;
     }
 }
+
+@media (min-width: $screen-md-min){
+    .dropdown{
+        .dropdown-menu{
+            @include transition($fast-transition-time, $transition-linear);
+            margin-top: -20px;
+            opacity: 0;
+            visibility: hidden;
+            display: block;
+        }
+
+        &.open{
+            .dropdown-menu{
+                opacity: 1;
+                visibility: visible;
+                margin-top: 1px;
+            }
+        }
+    }
+
+}

components-documentation.html

@@ -867,7 +867,7 @@ <h2>Navbar </h2>
 		    </div><!--  end navbar -->
 
             <p class="space-top">
-                Besides all this customisation, we have an extra navbar. <code>.navbar-transparent</code> is a special class that you can to use if you want the navbar to be transparent and then turn to color after scrolling 260px using the class <code>.navbar-color-on-scroll</code>. We recommend that the part of your page that has the transparent navbar contains something non-cluttered, like an image. If you want to see a nice example in details, check <a href="navbar-transparent.html">this page</a> out.
+                Besides all this customisation, we have an extra navbar. <code>.navbar-transparent</code> is a special class that you can to use if you want the navbar to be transparent and then turn to color after scrolling 260px using the class <code>.navbar-color-on-scroll</code>. We recommend that the part of your page that has the transparent navbar contains something non-cluttered, like an image. If you want to see a nice example in details, check <a href="examples/profile-page.html" target="_blank">the Profile Page</a>.
             </p>
 
 	    </div>