I am brand new to MDL, and trying to figure out how to really use it beyond completely pre-composed examples.
I would like to modify the following code example that includes an expandable search field. I want the color of the input textbox to be a contrasting color when it is expanded, rather than the same color as the header (because it is less obvious that you can type something there).
<link rel="stylesheet" href="https://storage.googleapis.com/code.getmdl.io/1.0.6/material.cyan-indigo.min.css" />
<script src="https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
<header class="mdl-layout__header">
<div class="mdl-layout__header-row">
<span class="mdl-layout-title">Title</span>
<div class="mdl-layout-spacer"></div>
<nav class="mdl-navigation">
<a class="mdl-navigation__link" href="#">Home</a>
<a class="mdl-navigation__link" href="#">About</a>
<a class="mdl-navigation__link" href="#">Contact</a>
</nav>
<!-- start search form -->
<div class="mdl-textfield mdl-js-textfield mdl-textfield--expandable">
<label class="mdl-button mdl-js-button mdl-button--icon" for="search-expandable">
<i class="material-icons">search</i>
</label>
<div class="mdl-textfield__expandable-holder">
<input class="mdl-textfield__input" type="text" id="search-expandable" />
<label class="mdl-textfield__label" for="search-expandable">Search text</label>
</div>
</div>
<!-- end search form -->
</div>
</header>
</div>I tried replacing
<input class="mdl-textfield__input" type="text" id="search-expandable" />with
<input class="mdl-textfield__input--white" type="text" id="search-expandable" />but that made the textbox white even when it wasn't expanded, which looks funny.
My questions are:
How can I achieve changing only the color of the search box when it is expanded?
Using the BEM naming scheme, I just guessed that mdl-textfield__input--white was defined someplace, and apparently it is, because the box turned white. The naming scheme gives me a place to start guessing, but what is an easy way to find out what really is already defined vs what I need to define myself?
I figured out how to use the browser developer tools to go to css of a given class and unminify it, but once there, it is still hard to locate available options. Then I tried mdl-textfield__input--green (yuck), but it stayed white. And I couldn't actually locate via developer tools either the --white or the --green style definitions, so maybe neither exist.
Is mdl-textfield__input--white a good choice/style/name? The name is clear, but what if I changed the color scheme on the website to where white wouldn't be a good contrast?
1) Use custom CSS to modify the color. You will need to check active states and all, but it should be difficult to figure out with the Chrome DevTools. Just expand it, inspect the node, and see how to target it as it is expanded only.
2a) mdl-textfield--white certainly is not defined. I have no clue what is happening there, but it shouldn't work (unless you are not defining mdl-textfield as well, then I can understand why it turns white.)
2b) To find out what is defined for each component, simply visit the components documentation page. Or, you can always just pop open Chrome's Devtools, head over to "Sources" panel, open material.css (or .min.css) and then just search the code with a quick find using ctrl+f. If you aren't seeing it there getting found, it is never defined.
3) Please do not create custom classes that use mdl namespacing. This could collide with future additions. Create your own classes that you are responsible for. As far as naming them, that is entirely up to you which naming method you prefer. We chose BEM for MDL since it provides a legible structure for components provided by a third party.