From e074ed75df6777e280d8882fa58d642f05c40c4e Mon Sep 17 00:00:00 2001 From: Axelut Date: Tue, 21 Jun 2016 19:03:38 +0300 Subject: [PATCH] Fix Issues: - #18 - #17 - #11 - #5 --- README.md | 9 +++--- assets/css/demo.css | 7 ++++- assets/css/material-kit.css | 36 +++++++++++++---------- assets/sass/material-kit/_checkboxes.scss | 28 ++++++++++-------- assets/sass/material-kit/_dropdown.scss | 33 +++++++++++++-------- components-documentation.html | 2 +- 6 files changed, 69 insertions(+), 46 deletions(-) diff --git a/README.md b/README.md index e2d56cbf..c7e46f51 100644 --- a/README.md +++ b/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`. diff --git a/assets/css/demo.css b/assets/css/demo.css index 8e924472..3105fd8e 100644 --- a/assets/css/demo.css +++ b/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; diff --git a/assets/css/material-kit.css b/assets/css/material-kit.css index 213ab7ef..46a0a046 100644 --- a/assets/css/material-kit.css +++ b/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; diff --git a/assets/sass/material-kit/_checkboxes.scss b/assets/sass/material-kit/_checkboxes.scss index e5f15d4e..8dafa4bd 100755 --- a/assets/sass/material-kit/_checkboxes.scss +++ b/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 { diff --git a/assets/sass/material-kit/_dropdown.scss b/assets/sass/material-kit/_dropdown.scss index c64c6b57..19e1a9b4 100644 --- a/assets/sass/material-kit/_dropdown.scss +++ b/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; + } + } + } + +} diff --git a/components-documentation.html b/components-documentation.html index d7b76b31..85961a27 100644 --- a/components-documentation.html +++ b/components-documentation.html @@ -867,7 +867,7 @@

Navbar

- Besides all this customisation, we have an extra navbar. .navbar-transparent 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 .navbar-color-on-scroll. 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 this page out. + Besides all this customisation, we have an extra navbar. .navbar-transparent 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 .navbar-color-on-scroll. 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 the Profile Page.