mdbootstrap / mdb-ui-kit Goto Github PK
View Code? Open in Web Editor NEWBootstrap 5 & Material Design UI KIT
Home Page: https://mdbootstrap.com/docs/standard/
License: Other
Bootstrap 5 & Material Design UI KIT
Home Page: https://mdbootstrap.com/docs/standard/
License: Other
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.
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.
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.
noUiSlider vertical support
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.
After the change of size of the input fields the searchbox inside navbars has lost the vertical align, will fix it soon.
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.
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/
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!
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.
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?
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?
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.
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.
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.
.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.
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.
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.
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.
White background, with black texts.
Esp when used as a topbar, a less screaming version is appreciated :-)
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.
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.
trying to use an input like this :
<input ... autofocus>
=> I don't get the focus when the page is loaded (using safari and chrome)
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
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.
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.
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?
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.
Can you add a reference to the original resource of the icon font?
To improve accessibility...
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
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.
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.
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.
Please, push the tags so we can add it to rails-assets.org ๐
Cheers
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.
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.
Would love to see some example(s?) on how to style the file selection to best fit this theme. May involve JS.
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.
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.
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.
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';
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 ]
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.