Adjusted radio buttons do not always show. I have included the two javascript files from the library, the sequence of the two makes no difference.

In my case this relates to pieces of html (templates) that are added on the fly (via angular). When I start the single page application on a route that directly shows that template all goes well. When it is later shown, it fails.
I'll see if I can make an angular helper for this.

currently. there are two key-animate defined on checkbox. normal and checked.
the animation will show at page load.
if i put checkbox in tabs content of bootstrap.
the animation will play every time when i switch tabs.

On Firefox : the onClick event of buttons is fired two times. (First one from rippleJs and second one from the navigator)

This behavior can be annoying.

.navbar-form appears to need margin-top:16px instead of 8px as on demo page (desktop width).

This may only apply to the input elements ?

Tested on latest Chrome & Safari on OSX Yosemite.

Would love to see some example(s?) on how to style the file selection to best fit this theme. May involve JS.

Hi guys,

Why are checkboxes on line 850 in the compiled CSS set to display none?

It's causing my checkboxes to not display - unless I'm using the class in some way wrong?

compiled/material.css - line 850:

Thanks again,
Phil

I found this on the navbar but I assume it'd be the same for other ripply elements too. If you spam-click a link, the ripple overlay sometimes doesn't get removed so the element gets darker and darker. If you're not sure what I'm talking about, try it on one of the navbars on your demo page: http://fezvrasta.github.io/bootstrap-material-design/

I noticed that you use noUiSlider plugin to Implement your material slider component.
When I set "connect: true" of the slider's options, the range slider does not work.

I you have time, please try and have a look at it.
Thanks.

Don't really know what you are working on atm maybe a summary of what's to come in the readme.md would stop people from posting 'issues' you are already doing.

I believe icon-material-gamepad and icon-material-games are the same icon and icon-material-games is double in the demo.html.

Also icon-material-hangout2, icon-material-hangout don't seem to have a difference either.

When I try to minify it (both with uglifyjs or with google closures compiler) the script does not work anymore... Need to investigate about this problem.

For example, clicking a link in the navbar will show the ripple effect properly, except that it stops it from actually acting as a link - i.e. clicking a link does not make the page go anywhere.

It works fine in Chrome, however. No javascript errors in Firefox's console that I can see. I also removed the javascript:void(0) from the href but that made no difference.

I'd also like to note that this stops the dropdowns in the navbar from showing up. I haven't tested what happens if I try using a button.

The dropdown is disabled for no reason, as if run with hover, click check status to verify that the drop remains active.
review: class = [ .dropdown-toggle .withripple ] && data-toggle = [ dropdown ]

Hey!

I love your new theme for bootstrap. I would love if the colors were much lighter. Right now they are too bright compared to some other material themes (http://bootswatch.com/paper/).

Thanks!

Bootstrap's navbar has a height of 50px. In bootstrap-material-design, the height is increased to 60px. This means that the class .navbar-text needs additional margin to compensate for the larger navbar. Changing Bootstrap's default margin-top and margin-bottom of 15px to 20px will solve this issue.

After the change of size of the input fields the searchbox inside navbars has lost the vertical align, will fix it soon.

Hello again! After the previous issue https://github.com/FezVrasta/bootstrap-material-design/issues/24 has been fixed, I also found out that links with .btn class are not working. I tried to insert a "target" attribute but still the problem exists. If i remove the said class, it works just as it should.

There is currently official support for SASS in Twitter Bootstrap here https://github.com/twbs/bootstrap-sass. Would be nice if material design could support SASS too.

I have looked at the slider in Chrome, and the beautiful raised effect I saw does not happen in Firefox. No big issue, but thought I would report my findings.
Again, stunning work on this project.

Are you using it commercially on any project that you would like to share?

ripples.js was the first with "click and hold" support, now I see that Waves has added this feature as well, and seems to work better than ripples.js.

Maybe would be better drop ripples.js and start using waves?

What do you think?

Its possible to end up with a transparent background on the tab with a dropdown.

I'm using FF 32.0.3 on Windows 8.

1. Click the dropdown tab
2. Click again to close the dropdown
3. Move the mouse out

This leaves a transparent background for the tab:

the specs for checkboxes was updated, this is a good CSS only implementation of them.

http://jsfiddle.net/cavico/a7u9jwhn/1/

we should update our implementation.

See the appended image. If you click 10-20 times on a button pretty fast they get darker.

on Google Chrome Version 37.0.2062.124 m

When there is more than one element, the animation when one of the elements (except the very bottom one) is lost and it disappears without any animation.

If you click on the Dropdown in the very left nav and move your mouse out of the Dropdown anchor it will go transparent and you won't be able to read the text.

Firefox V32.

When I inspect the elements, <span class="ripple"></span> is already added next to the radio input. However, there's no ripple effect when the radio is clicked.

noUiSlider vertical support

White background, with black texts.
Esp when used as a topbar, a less screaming version is appreciated :-)

Can you add a reference to the original resource of the icon font?

Lists are probably going to be used a lot in material design. Might be handy to have an example ready that fits material design specification.

I'm still working on mine:

Trying to create something like this:

At the moment I use this mixin to generate every possible variation of a given element (buttons, wells, menus etc)

.variations(@extra, @property, @default) {
    // Bootstrap shades
    &@{extra}, &-default@{extra} {
        @{property}: @default;
    }
    &-primary@{extra} {
        @{property}: @primary;
    }
    &-success@{extra} {
        @{property}: @success;
    }
    &-info@{extra} {
        @{property}: @info;
    }
    &-warning@{extra} {
        @{property}: @warning;
    }
    &-danger@{extra} {
        @{property}: @danger;
    }
    // Material shades
    &-material-red@{extra} {
        @{property}: @red;
    }
    &-material-pink@{extra} {
        @{property}: @pink;
    }
    &-material-purple@{extra} {
        @{property}: @purple;
    }
    &-material-deeppurple@{extra} {
        @{property}: @deeppurple;
    }
    &-material-indigo@{extra} {
        @{property}: @indigo;
    }
    &-material-lightblue@{extra} {
        @{property}: @lightblue;
    }
    &-material-cyan@{extra} {
        @{property}: @cyan;
    }
    &-material-teal@{extra} {
        @{property}: @teal;
    }
    &-material-lightgreen@{extra} {
        @{property}: @lightgreen;
    }
    &-material-lime@{extra} {
        @{property}: @lime;
    }
    &-material-lightyellow@{extra} {
        @{property}: @lightyellow;
    }
    &-material-orange@{extra} {
        @{property}: @orange;
    }
    &-material-deeporange@{extra} {
        @{property}: @deeporange;
    }
    &-material-grey@{extra} {
        @{property}: @grey;
    }
    &-material-bluegrey@{extra} {
        @{property}: @bluegrey;
    }
    &-material-brown@{extra} {
        @{property}: @brown;
    }
    &-material-lightgrey@{extra} {
        @{property}: @lightgrey;
    }
}

The problem is that, using this code generates not-optimized CSS, I would like to find a better way (mixin?) to generate an unique, optimized, rule for every given element.

So, instead of have:

.checkbox-primary input[type=checkbox]:checked ~ .ripple {
  background-color: #4285f4;
}

.btn-primary {
  background-color: #4285f4;
}

.well-primary {
  background-color: #4285f4;
}

etc...

have:

.checkbox-primary input[type=checkbox]:checked ~ .ripple, .btn-primary, .well-primary {
  background-color: #4285f4;
}

This is just a reminder for me I think... but would be nice if someone could help me.

A template index.html file alongwith all the required files in separate folders.

I am working on this right now. And will send you a pull request soon.

Hello! I'm trying this on iPhone 4s but then I saw that the check on the checkbox is tilted by some degrees. Also I found out that I cannot show a modal or cannot redirect from another page once I click a link or a button. I tried using it in Chrome and Safari.

I have a working angular app using bootstrap. I'm currently applying the bootstrap-material-design.
Now for the following fragment the radio buttons (circles) are not shown, only the indented text.

<div class="modal-body">
    <div class="radio">
        <label>
            <input type="radio" ng-model="custom.format" value="A">
            Choose A
        </label>
    </div>
    <div class="radio">
        <label>
            <input type="radio" ng-model="custom.format" value="B">
            Or B
        </label>
    </div>
</div>

I could not find (yet) something in the examples or code to give a me a hint what needs fixing.
The example on http://fezvrasta.github.io/bootstrap-material-design/ is working ok.

Css (via less):

@import 'bootstrap';
@import 'material';
@import (inline) 'icons-material-design.css';

I believe the ripples.js does not work properly in firefox as I cannot get it to ripple on any of the elements that do work with chrome.

When clicking on the popovers in chrome they stay open instantly. However when clicking in Firefox I have to click the second time for them to stay open.

Awesome repo, I have just found it today via a weekly enews I get.

With elements like nav bar items and buttons the ripple effect occurs on mousedown. This appears to be consistent with official material design examples.

Checkboxes and radio buttons have no ripple effect on mousedown, with a brief ripple instead triggering on mouseup. This doesn't line up with expected ripple behaviour, or with the material demos available here https://www.polymer-project.org/components/paper-elements/demo.html#paper-radio-button

trying to use an input like this :
<input ... autofocus>

=> I don't get the focus when the page is loaded (using safari and chrome)

To improve accessibility...

1. make checkbox "opacity: 0" instead of "display: none"
2. add "focus effect" on checkboxes

I've broken something when I've added support for nested wells and now the sm and lg classes does not work. need to fix it.

Please, push the tags so we can add it to rails-assets.org 💃

Cheers

WHY that crazy big buttons??? padding: 8px 30px; please remove this from btn... is very big and crash design :/ margin: 10px 1px; and margin too....

Any plans to start with the details? Some animations like this action button perhaps?

the square appears for a millisecond after the transition is finished. It happens only sometimes, probably it's something related to the rendering engine of the browser and micro lags.

Hi,

Can we get this amazing theme on some sort of CDN such as cdnjs or jsdelivr?

Thank you!

I've managed to make my own Floating action button with some fiddling might be nice to have it ready for use in the theme?

custom Floating action css:

  .share-wrapper {
        position: fixed;
        bottom: 15px;
        margin-left: -15px;
    }

    .share-dropdown-wrapper:hover {
        background: none;
    }

    .icon-material-share {
        border-radius: 100px;
        width: 62px;
        padding-left: 10px;
    }

    .share-ripple {
        border-radius: 100px;
    }

HTML:

<div class="share-wrapper col-xs-1 col-xs-push-10">
   <a href="javascript:void(0)" style="background: none">
     <i class="icon icon-material-share btn btn-info btn-raised withripple" style="color: #03a9f4; background: rgba(255, 255, 255, 0.90); font-size: 30px; padding-left: 16px; padding-top: 14px; height: 60px;">
       <div class="share-ripple ripple-wrapper"></div>
       </i>
    </a>  
</div> 

It's not the most elegant way though.

Maybe, it will be useful to add extra media queries for navbar to make it a little bit smaller in some cases.

Google did it on the site with official guidelines (just try to resize window): http://www.google.com/design/spec/style/typography.html

It will help to use bootstrap-material-design project on mobile devices.

Hi,
on Chrome/Firefox, both last version, there is a "square" which appears during the transition when I focus on an input.