axthebaldi / mdl-stepper Goto Github PK

View Code? Open in Web Editor NEW

1.0 1.0 1.0 2.53 MB

A library that implements to the Material Design Lite a polyfill of stepper component specified by Material Design.

Home Page: https://axthebaldi.github.io/mdl-stepper

License: MIT License

JavaScript 47.60% HTML 42.47% SCSS 9.93%

mdl-stepper's People

Contributors

Stargazers

Watchers

Forkers

evvnt

mdl-stepper's Issues

Horizontal type support

Horizontal steppers are ideal when the contents of one step depend on an earlier step.

Type of steppers spec

Step numbers aren't showing for me

Here's what my stepper looks like:

Where are the pretty step numbers in circles to the left of the step title text? What am I doing wrong? Here's my HTML:

<html>
  <head>
    <!-- Material Design -->
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
    <script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>
    <!-- Stepper CSS minified -->
    <link rel="stylesheet" href="./mdl-stepper-master/stepper.min.css">
    <!-- Stepper Javascript minified -->
    <script defer src="./mdl-stepper-master/stepper.min.js"></script>
  </head>
  <body>
    <ul class="mdl-stepper">
      <li class="mdl-step">
        <span class="mdl-step__label">
          <span class="mdl-step__title">
            <span class="mdl-step__title-text">Step 1</span>
          </span>
        </span>
      </li>
      <li class="mdl-step">
        <span class="mdl-step__label">
          <span class="mdl-step__title">
            <span class="mdl-step__title-text">Step 2</span>
          </span>
        </span>
      </li>
    </ul>
  </body>
</html>```

Demo link doesn't appear in the navigation for your documentation

This was confusing for beginners like myself:

http://ahlechandre.github.io/mdl-stepper

Horizontal stepper IE issue

When pressing the continue button in the horizontal stepper the steps label alignment seems to go messy in IE11 (see attached)

.
Please advise.
Thanks,

Dynamic height for vertical stepper

Vertical steppers are constrained to 320px. It would be very useful if they were instead allowed a dynamic height.

IE 11 getIndicatorContentCompleted_ tries to add multiple classes at once

The code in getIndicatorContentCompleted_ works in other browsers, however IE11 and probably older IE versions as well do not support classList.add() with multiple parameters. Instead you must call classList.add() once for each class being added.

Bad:
completed.classList.add('material-icons',this.CssClasses_.STEP_LABEL_INDICATOR_CONTENT);

Good:
completed.classList.add('material-icons'); completed.classList.add(this.CssClasses_.STEP_LABEL_INDICATOR_CONTENT);

Here's a Mircosoft ticket for reference:
https://connect.microsoft.com/IE/Feedback/Details/920755/

Horizontal label scrolls outside of user view region (Google Chrome)

Horizontal steps uses overflow: hidden to hide the scrollbars. Now step label scrolling outsite of users view on Google Chrome when text box inside content changes.

I really don't know if it's a plataform feature or bug.

Chromium issue: https://bugs.chromium.org/p/chromium/issues/detail?id=116655

Screenshots of the behavior in major browsers above.

Google chrome before change input text.

Google chrome after change input text.

Microsoft Edge after change input text.

Firefox after change input text.

Browsers info

Google Chrome: 52.0.2743.33 beta-m (64-bit)
Microsoft Edge: 25.10586.0.0
Firefox: 46.0.1

Horizontal steps don't align correctly after continue is clicked

A small optical issue:

If "CONTINUE" is clicked, Step 2 "Edit file" and 3 "Finish" will be moved down from top by 1 px.

In stepper.css at @media only screen and (min-width: 841px)
I removed align-items: baseline; and it was fixed.

is correct add a button in label?

Hi,

I want to add "añadir" button but I don't know if is correct and possible.

if somebody can help me, thank you.

MDL-Stepper not working with IE10 and Safari 8

Hi,

I have use mdl-stepper on website : https://sim-usa.mobi/activation/.
It works fine with chrome, firefox, Edge..

But with IE 10 and Safari 8, Stepper not appears.

Can you help me ?

Using mdl-stepper together with zodiase:mdl in meteor

Great work on this component! It looks really good.

I would like to use the stepper in a meteor application which already uses the zodiase:mdl package (see https://github.com/Zodiase/meteor-mdl). So, what I've tried is to add the stepper js to my meteor application, hoping that it will be able to use the componentHandler from zodiase:mdl.

However, when trying to do so, I get an error in the browser saying that componentHandler is not defined (the error comes from line 881 in stepper.js where it tries to register the component).

My guess is that the application is trying to load the stepper.js files before the componentHandler from zodiase:mdl is defined. Do you happen to know if there's any workaround that can make this work?

Thanks

Not working when used along with UI router

I am trying to use mdl-stepper, when I add the stepper in the index.html page its working fine. Please find the plunker link below

https://plnkr.co/edit/m7EGqw?p=preview

But when I do the same thing inside a separate html and use ui-router, its not working.
https://plnkr.co/edit/ixMI8FKbhyTgL5sYieVa?p=preview

Angular2 rc.6 implementation

Hi,

Is it possible to make it work with Angular2 rc.6?

Regards,

Step label indicator error: Cannot read property 'querySelector' of null

model.labelIndicator = model.label.querySelector('.' + this.CssClasses_.STEP_LABEL_INDICATOR);
inside stepper.js

This is the error:
stepper.js:281 : Uncaught TypeError: Cannot read property 'querySelector' of null

Not working when used inside an $mdDialog

HI,

I am trying to use the stepper inside an mdDialog. The stepper is getting displayed successfully, but when I click on the continue button, its keep on loading its not opening the next step. Please find the plunker link below.

https://plnkr.co/edit/ixMI8FKbhyTgL5sYieVa?p=preview

Click on the test button to open the mdDialog

Missing source map

Hi,

When I open Chrome console I get this:
Failed to parse SourceMap **/lib/mdl-stepper/stepper.css.min.map

At the end of stepper.css.min file there is: /*# sourceMappingURL=stepper.css.min.map */
I think it should be removed if source map is not included with build.

Regards,

MDL Stepper v2

Regarding the topics that people have issues (#25, #21, #9, and #2) about integration, I was reflecting about the future of this project and here are some points:

Why MDL-Stepper doesn't works with some frameworks/libraries?

The project, essentially, was designed to provide the component that you, the developer using Material Design Lite (MDL), expect the library to provide "natively". Below my quote on MDL repository:

As discussed at #1748 issue, the stepper is a component that is present in the Material Design specification and MDL has not support yet.

While the Material Design Lite team works in other parts of the library, I decided to create my own component.

[...] You can consider this as a polyfill to be used while the MDL do not include that. Maybe it can be useful and help other people to build their web apps.

Dependency

Currently our component should be implemented together Google library. The MDL Stepper depends of the component handler from Material Design Lite to register and upgrade it. Besides that, the Stepper makes reuse of components available on MDL as buttons and loading spinner (on steppers with feedback).

The component v2.x.x

I'm idealizing (no date set for now) a new major version. To become real we need to develop our own way to register and upgrade dynamically the component, implement the buttons and loading spinner components.

In this version we will keep independence and ability to integrate the component with any library or framework as Material Design Lite, Angular, Polymer, React or without them.

Stepper reset

Hi,

I'm using the stepper in a dialog, which I have to use more than once. Is there a way to reset the state of the stepper?

Thanks

MaterialStepper instance is not available for selector: .mdl-stepper#ipet-stepper.

Hi I really need some help getting this to work.

I have followed all the steps yet I keep getting this error
MaterialStepper instance is not available for selector: .mdl-stepper#ipet-stepper.
I am using mdl version 1.3.0

Here is my code


<script type="text/javascript">
 var uid = '{$smarty.session.ipet_user}';
 
	function stylesheet(url) {
            var s = document.createElement('link');
            s.rel = 'stylesheet';
            s.async = false;
            s.href = url;
            var x = document.getElementsByTagName('head')[0];
            x.appendChild(s);
        }
		
		function script(url) {
            var s = document.createElement('script');
            s.type = 'text/javascript';
            s.async = true;
            s.src = url;
            var x = document.getElementsByTagName('head')[0];
            x.appendChild(s);
        }
		
		
		 (function () {
				stylesheet('https://opensource.keycdn.com/fontawesome/4.7.0/font-awesome.min.css');
                stylesheet('https://fonts.googleapis.com/css?family=Roboto');
				stylesheet('https://fonts.googleapis.com/icon?family=Material+Icons');
				stylesheet('./templates/main/user-theme/tpl-files/material.act.css');
                stylesheet('plugins/dropzone/dropzone.css');
				stylesheet('plugins/stepper/stepper.min.css');
				stylesheet('./templates/main/user-theme/tpl-files/style.css');
                stylesheet('./templates/main/style/newprofile.css');
				stylesheet('plugins/getmdlselect/getmdl-select.min.css');		
				

				script('https://code.getmdl.io/1.3.0/material.min.js');
				script('https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js');
				script('https://apis.google.com/js/api:client.js');
				script('https://maps.googleapis.com/maps/api/js?libraries=places&key=AIzaSyBk99v0F4qkmvxifqOD48YktK-QO-3kopI');
				script('./templates/main/user-theme/javascript/google.js');
				script('plugins/getmdlselect/getmdl-select.min.js');
				script('./templates/main/user-theme/javascript/facebook.js');
                script('./templates/main/user-theme/javascript/newprofile.js');
				script('./templates/main/javascript/zipcode.js');
				script('plugins/stepper/stepper.js');
	
			 				
	     })();
 </script>


<section class="mdl-stepper mdl-cell mdl-cell--12-col">

    <div class="mdl-grid">
      <div class="mdl-cell mdl-cell--12-col">
       <!-- markup -->
		<ul class="mdl-stepper mdl-stepper--linear mdl-stepper--horizontal" id="ipet-stepper">
		  <li class="mdl-step mdl-step--editable">
			<span class="mdl-step__label">
			<span class="mdl-step__title">
				<span class="mdl-step__title-text">Your Information</span>
				<span class="mdl-step__title-message">Edit this step later</span>
			</span>
				<span class="mdl-step__label-indicator"><span class="mdl-step__label-indicator-content">1</span>
			</span>
			</span>
			<div class="mdl-step__content">
			</div>
			<div class="mdl-step__actions">
			  <button class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--colored mdl-button--raised" data-stepper-next>
					Continue
				  </button>
			  <button class="mdl-button mdl-js-button mdl-js-ripple-effect" data-stepper-cancel>
					Cancel
				  </button>
			</div>
		  </li>
		  <li class="mdl-step">
			<span class="mdl-step__label">
			<span class="mdl-step__title">
				<span class="mdl-step__title-text">Your Pets</span>
			</span>
				<span class="mdl-step__label-indicator"><span class="mdl-step__label-indicator-content">2</span>
			</span>
			</span>
			<div class="mdl-step__content"></div>
			<div class="mdl-step__actions">
			  <button class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--colored mdl-button--raised" data-stepper-next>
					Continue
				  </button>
			  <button class="mdl-button mdl-js-button mdl-js-ripple-effect" data-stepper-cancel>
					Cancel
				  </button>
			</div>
		  </li>
		  <li class="mdl-step">
			<span class="mdl-step__label">
			<span class="mdl-step__title">
				<span class="mdl-step__title-text">Emergency Contacts</span>
				<span class="mdl-step__title-message">Who should we contact if your pet goes missing?</span>
			</span>
				<span class="mdl-step__label-indicator"><span class="mdl-step__label-indicator-content">3</span>
			</span>
			</span>
			<div class="mdl-step__content"></div>
			<div class="mdl-step__actions">
			  <button class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--colored mdl-button--raised" data-stepper-next>
					Continue
				  </button>
			  <button class="mdl-button mdl-js-button mdl-js-ripple-effect" data-stepper-cancel>
					Cancel
				  </button>
			</div>
		  </li>
		</ul>

      </div>
    </div>

  </section>
<script>
 (function () {
                window.addEventListener('load', function () {
                    var selector = '.mdl-stepper#ipet-stepper';
                    // Select stepper container element      
                    var stepperElement = document.querySelector(selector);
                    var Stepper;
                    var steps;

                    if (!stepperElement) return;

                    // Get the MaterialStepper instance of element to control it.          
                    Stepper = stepperElement.MaterialStepper;

                    if (!Stepper) {
                        console.error('MaterialStepper instance is not available for selector: ' + selector + '.');
                        return;
                    }
                    steps = stepperElement.querySelectorAll('.mdl-step');

                    for (var i = 0; i < steps.length; i++) {
                        // When user clicks on [data-stepper-next] button of step.          
                        steps[i].addEventListener('onstepnext', function (e) {
                            // {element}.MaterialStepper.next() change the s```````tate of current step to "completed" 
                            // and move one step forward.        
                            Stepper.next();              
                        });
                        // When user clicks on [data-stepper-skip] button of step.          
                        steps[i].addEventListener('onstepskip', function (e) {
                            Stepper.skip();              
                        });
                    }

                    // When all steps are completed this event is dispatched.          
                    stepperElement.addEventListener('onsteppercomplete', function (e) {
                        var toast = document.querySelector('.mdl-js-snackbar');

                        if (!toast){
                            console.log("No Toast element available")
                            return;
                        } 

                        toast.MaterialSnackbar.showSnackbar({
                            message: 'Completed Use Case',
                            timeout: 4000,
                            actionText: 'Ok'
                        });
                    });
             })
 })();
 </script>

Alternative labels type

Alternative label placement

Alternative label placement with an optional step

Reference: Type of steppers.

Add events for click on step label

When using an editable stepper, I want to invoke form fields validation on leaving the current step. For now, I can handle it using events: onstepnext and onstepback. Please add a similar event on clicking the step label at the top, where I would be able to cancel moving to another step depending on my condition.

(typeof stepperElement.MaterialStepper) undefined

@ahlechandre

I am integrating mdl-stepper with meteor and dynamically adding the stepper.
var stepperElement = document.querySelector('.mdl-stepper'); console.log(typeof stepperElement.MaterialStepper); // undefined componentHandler.upgradeAllRegistered(); console.log(typeof stepperElement.MaterialStepper); // object
In the last step i am getting undefined instead of object

All libraries are loaded, working fine in html but the issue is there in meteor.

MaterialStepper instance is not available after upgrading to MDL 1.2.1

I upgraded my site to use MDL v1.2.1 and the stepper is no longer initializing properly. I can see the content of my steps in the dom explorer but not on the screen. I tested in IE11 and Chrome both have the same result. It fails when trying to reference MaterialStepper.
Here's my initialization code:
`
// Select stepper container element
var stepperElements = element.getElementsByClassName('mdl-stepper');
var Stepper;
var steps;

        if (!stepperElements[0]) return;
        componentHandler.upgradeElement(stepperElements[0]);
        // Get the MaterialStepper instance of element to control it.
        Stepper = stepperElements[0].MaterialStepper;

        if (!Stepper) {
            if (console) { console.error('MaterialStepper instance is not available.'); };
            return;
        }`

Dynamic content height of the horizontal stepper

Current implementation limits content height to min-height: 576px;. How can I make mdl-step__content stretch to a full height?

Non Linear

In Non Linear Back button is not working(Its not showing the previous screen)

MaterialStepper.updateTitleMessage_ method is duplicating the title message node

MaterialStepper.prototype.updateTitleMessage_ = function (step, text) {
  var titleMessage = step.label_title_message; // Is not updated dinamically.

  if (!titleMessage) {
    titleMessage = document.createElement('span');
    titleMessage.classList.add(this.CssClasses_.STEP_TITLE_MESSAGE);
    step.label_title.appendChild(titleMessage);
  }
  titleMessage.textContent = text;
};

The step property label_title_message is defined at the init of instance. So, the step will always create a new element for title message if it does not have an element manually defined.

To solve replace line 643 by:

// var titleMessage = step.label_title_message;
var titleMessage = step.container.querySelector('.' + this.CssClasses_.STEP_TITLE_MESSAGE);

Bower

Please provide a build for bower.

Ability to align actions

Could there be a way to align the action buttons ourselves? My use case is to put a "Next" button in the center.

When dispatch onstepnext event is preventing default of button

No needs to prevent default of button "continue" ([data-step-next]) when dispatch the event onstepnext. This prevents that any button to have the submit effect and may does not allow the use of stepper with forms.

Remove unnecessary 793 line to solve this. I recommend (when working with form + stepper) that set the "continue"s buttons with type=button attribute to moves forward and type=submit to the normal submit effect (e.g. fire the onsubmit event of form).

Q: Does it support Material Design Lite themes?

Does mdl-stepper support Material Design Lite themes?

If yes, how it is applied to component?

If no, is there another way to change colour scheme of stepper circles and actions?

CustomEvent error on IE 11

Hi ahlechandre !!

First, thanks for this nice implementation of MDL stepper.
Second, we are experiencing an error in IE that prevent us from using it...

SCRIPT445: Object doesn't support this action
This error occurred as soon as you define CustomEvents.

I did some search and one workaround for IE >= 9 compatibility would be to use document.createEvent() and CustomEvent::initCustomEvent()

Here are the sources:
sindresorhus/devtools-detect#9
http://stackoverflow.com/questions/19345392/why-arent-my-parameters-getting-passed-through-to-a-dispatched-event/19345563#19345563

Would you plan doing this fix shortly ?

Regards,
Yannick Richard

Cross-browser styles

Connector line

Google Chrome 49.0.2623.47 beta-m (64-bit)

Firefox 43.0.4

Microsoft Edge 25.10586.0.0

Make anything marked with data-stepper-next go to next by default.

It seems odd why this isn't the default behaviour. I think it should be the same for data-stepper-cancel and other actions as well. Or is there a way to make this the default behaviour?

Stepper wont step

I am getting frustrated as I copied and pasted the code you use on http://ahlechandre.github.io/mdl-stepper/

and when I try and Step (press continue) it does not want to move, in-fact it does NOTHING.

please help I am using Smarty-PHP and putting the javascript and CSS in the header area of the site - jQuery I am using I have that at the bottom

 {literal}
  <link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
  <!-- style -->
  <style>
    @-webkit-keyframes FadeIn {
    0% {
      opacity: 0; }
    100% {
      opacity: 100; } }
  @-moz-keyframes FadeIn {
    0% {
      opacity: 0; }
    100% {
      opacity: 100; } }
  @-o-keyframes FadeIn {
    0% {
      opacity: 0; }
    100% {
      opacity: 100; } }
  @keyframes FadeIn {
    0% {
      opacity: 0; }
    100% {
      opacity: 100; } }
  @-webkit-keyframes FadeInFromBottom {
    0% {
      height: 0;
      padding-top: 84px;
      background-color: white;
      color: white; }
    25% {
      color: white; } }
  @-moz-keyframes FadeInFromBottom {
    0% {
      height: 0;
      padding-top: 84px;
      background-color: white;
      color: white; }
    25% {
      color: white; } }
  @-o-keyframes FadeInFromBottom {
    0% {
      height: 0;
      padding-top: 84px;
      background-color: white;
      color: white; }
    25% {
      color: white; } }
  @keyframes FadeInFromBottom {
    0% {
      height: 0;
      padding-top: 84px;
      background-color: white;
      color: white; }
    25% {
      color: white; } }
  /* STEPPER */
  .mdl-stepper {
    position: relative;
    font-family: "Roboto", sans-serif;
    background-color: white;
    display: block;
    box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
    padding: 24px 0;
    max-width: 720px;
    width: 100%;
    border-radius: 2px; }
    .mdl-stepper > li {
      list-style: none; }

  /* STEPPER ON SMALL SCREENS */
  @media only screen and (max-width: 375px) {
    .mdl-stepper {
      width: 100vw; }

    .mdl-grid .mdl-cell .mdl-stepper {
      margin-left: -16px; } }
  /* STEP */
  .mdl-step {
    position: relative; }
    .mdl-step:not(:last-child) {
      margin-bottom: 24px; }
      .mdl-step:not(:last-child).is-active {
        margin-bottom: 36px; }
      .mdl-step:not(:last-child) .mdl-step__label-indicator:after {
        content: '';
        position: absolute;
        top: 12px;
        left: 0;
        width: 1px;
        min-height: 40px;
        background-color: rgba(0, 0, 0, 0.1);
        margin: 32px 4px 0 37px; }
    .mdl-step .mdl-step-error-message {
      display: none; }
    .mdl-step > * {
      -webkit-animation: FadeIn 0.5s ease-in-out;
      -moz-animation: FadeIn 0.5s ease-in-out;
      -ms-animation: FadeIn 0.5s ease-in-out;
      animation: FadeIn 0.5s ease-in-out; }

  /* STEP ACTIVE */
  .mdl-step.is-active .mdl-step__title {
    font-weight: bold; }
  .mdl-step.is-active .mdl-step__content {
    display: block; }
  .mdl-step.is-active .mdl-step__label-indicator {
    background-color: #2196F3;
    color: white; }
  .mdl-step.is-active:not(:last-child) .mdl-step__label-indicator:after {
    height: 442px; }
  .mdl-step.is-active .mdl-step__actions {
    -webkit-display: flex;
    -moz-display: flex;
    -ms-display: flex;
    display: flex;
    justify-content: flex-start; }
    .mdl-step.is-active .mdl-step__actions [data-stepper-next] {
      order: 1;
      margin-right: 8px; }
    .mdl-step.is-active .mdl-step__actions [data-stepper-cancel] {
      order: 2; }
    .mdl-step.is-active .mdl-step__actions [data-stepper-skip] {
      order: 3;
      margin-left: auto; }
    .mdl-step.is-active .mdl-step__actions [data-stepper-back] {
      order: 4;
      margin-left: auto; }

  /* STEP MOD COMPLETED */
  .mdl-step--completed .mdl-step__label-indicator {
    background-color: #2196F3; }

  /* STEP MOD ERROR */
  .mdl-step--error .mdl-step__title {
    color: #F44336; }
  .mdl-step--error .mdl-step-error-message {
    display: block;
    color: #F44336;
    font-weight: normal; }
  .mdl-step--error .mdl-step__label-indicator {
    background-color: #F44336 !important;
    font-weight: bold; }

  /* STEP MOD OPTIONAL */
  /* STEP MOD TRANSIENT */
  .mdl-step--transient .mdl-step__content {
    overflow: hidden !important; }

  /* STEP LABEL */
  .mdl-stepper:not(.mdl-stepper--horizontal) .mdl-step__label:hover, .mdl-stepper:not(.mdl-stepper--horizontal) .mdl-step__label:active, .mdl-stepper:not(.mdl-stepper--horizontal) .mdl-step__label:focus {
    background-color: rgba(0, 0, 0, 0.06); }

  .mdl-step__label {
    position: relative;
    -webkit-display: flex;
    -moz-display: flex;
    -ms-display: flex;
    display: flex;
    cursor: pointer;
    margin-bottom: 8px;
    padding: 8px 24px 24px 24px;
    align-items: center; }

  /* STEP LABEL MOD WITH SUBLABEL */
  .mdl-step__label--with-sublabel {
    align-items: baseline; }

  /* STEP TITLE */
  .mdl-step__title {
    -webkit-display: flex;
    -moz-display: flex;
    -ms-display: flex;
    display: flex;
    flex-flow: column nowrap;
    order: 2;
    width: 100%; }

  /* STEP TITLE MESSAGE */
  .mdl-step__title-message {
    position: absolute;
    font-size: 12px;
    opacity: .7;
    font-weight: 400;
    top: 28px; }

  /* STEP LABEL INDICATOR */
  .mdl-step__label-indicator {
    -webkit-display: flex;
    -moz-display: flex;
    -ms-display: flex;
    display: flex;
    order: 1;
    background-color: rgba(0, 0, 0, 0.3);
    border-radius: 100%;
    color: white;
    margin-right: 12px;
    margin-bottom: auto; }
    .mdl-step__label-indicator > :first-child {
      -webkit-display: flex;
      -moz-display: flex;
      -ms-display: flex;
      display: flex;
      font-size: 15px;
      width: 28px;
      height: 28px;
      align-items: center;
      justify-content: center; }

  /* STEP CONTENT */
  .mdl-step__content {
    display: none;
    height: 320px;
    width: inherit;
    overflow: auto;
    margin-left: 64px;
    margin-right: 24px; }

  /* STEP ACTIONS */
  .mdl-step__actions {
    display: none;
    padding-top: 16px;
    height: 48px;
    margin-left: 64px;
    margin-right: 24px; }
    .mdl-step__actions [data-stepper-next].mdl-button--raised.mdl-button--colored {
      background-color: #2196F3;
      box-shadow: none; }

  /* STEP TRANSIENT */
  .mdl-step__transient {
    position: absolute;
    top: 68px;
    left: 64px;
    z-index: 2;
    -webkit-display: flex;
    -moz-display: flex;
    -ms-display: flex;
    display: flex;
    width: calc(100% - 88px);
    height: 320px;
    transition: 0.3s all ease-in-out; }

  /* STEP TRANSIENT OVERLAY */
  .mdl-step__transient-overlay {
    content: '';
    position: absolute;
    z-index: 3;
    width: 100%;
    height: 100%;
    top: 0;
    background-color: rgba(255, 255, 255, 0.8); }

  /* STEP TRANSIENT LOADER */
  .mdl-step__transient-loader {
    z-index: 4;
    margin: auto; }

  /* STEPPER MOD HORIZONTAL */
  @media only screen and (min-width: 841px) {
    .mdl-stepper--horizontal {
      -webkit-display: flex;
      -moz-display: flex;
      -ms-display: flex;
      display: flex;
      flex-direction: row;
      align-items: baseline;
      max-width: 840px;
      padding: 0;
      min-height: 576px;
      /* HORIZONTAL STEP */
      /* HORIZONTAL STEP LABEL */
      /* HORIZONTAL STEP CONTENT */
      /* HORIZONTAL STEP ACTIONS */
      /* STEPPER MOD HORIZONTAL + MOD LINEAR */ }
      .mdl-stepper--horizontal:before {
        content: '';
        background-color: transparent;
        width: 100%;
        min-height: 84px;
        box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12);
        position: absolute;
        top: 0;
        left: 0; }
      .mdl-stepper--horizontal > .mdl-step {
        position: static;
        -webkit-display: flex;
        -moz-display: flex;
        -ms-display: flex;
        display: flex;
        justify-content: center;
        align-items: initial;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        max-height: 84px;
        overflow: hidden;
        /* STEP MOD COMPLETED */ }
        .mdl-stepper--horizontal > .mdl-step.is-active.mdl-step--transient:before {
          content: attr(data-step-transient-message);
          -webkit-animation: FadeInFromBottom 0.3s cubic-bezier(0, 0, 0, 0.99);
          -moz-animation: FadeInFromBottom 0.3s cubic-bezier(0, 0, 0, 0.99);
          -ms-animation: FadeInFromBottom 0.3s cubic-bezier(0, 0, 0, 0.99);
          animation: FadeInFromBottom 0.3s cubic-bezier(0, 0, 0, 0.99);
          position: absolute;
          padding-left: 24px;
          display: flex;
          font-size: 16px;
          justify-content: flex-start;
          align-items: center;
          width: calc(100% - 24px);
          height: 84px;
          background-color: white;
          top: 0;
          left: 0;
          z-index: 9; }
        .mdl-stepper--horizontal > .mdl-step .mdl-step__transient {
          top: 0;
          left: 0;
          width: 100%;
          height: 100%; }
        .mdl-stepper--horizontal > .mdl-step:not(:first-child):not(:last-child) {
          margin: auto auto; }
        .mdl-stepper--horizontal > .mdl-step:not(:last-child) {
          flex: 1; }
        .mdl-stepper--horizontal > .mdl-step:not(:last-child):after {
          content: '';
          position: relative;
          flex: 1;
          top: 42px;
          width: 168px;
          margin-left: -12px;
          height: 1px;
          background-color: rgba(0, 0, 0, 0.1); }
        .mdl-stepper--horizontal > .mdl-step.mdl-step--completed .mdl-step__title > .mdl-step__title-text {
          font-weight: bold; }
        .mdl-stepper--horizontal > .mdl-step:not(:last-child) > .mdl-step__label > .mdl-step__label-indicator:after {
          display: none; }
      .mdl-stepper--horizontal .mdl-step__label {
        top: -48px;
        flex: initial;
        margin: 0;
        padding: 24px;
        min-height: 132px;
        transition: 0.025s border-radius linear; }
        .mdl-stepper--horizontal .mdl-step__label:hover {
          background-color: rgba(0, 0, 0, 0.06); }
        .mdl-stepper--horizontal .mdl-step__label:active {
          padding: 12px;
          margin: 12px;
          border-radius: 100%; }
        .mdl-stepper--horizontal .mdl-step__label > .mdl-step__title {
          width: initial; }
        .mdl-stepper--horizontal .mdl-step__label > .mdl-step__title > * {
          max-width: 120px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis; }
        .mdl-stepper--horizontal .mdl-step__label > .mdl-step__title > .mdl-step__title-message {
          position: relative;
          top: 0;
          line-height: 14px; }
        .mdl-stepper--horizontal .mdl-step__label > .mdl-step__label-indicator {
          margin-top: auto; }
      .mdl-stepper--horizontal .mdl-step > .mdl-step__content {
        position: absolute;
        top: 84px;
        left: 0;
        width: calc(100% - 48px);
        height: calc(100% - 192px);
        margin: 24px; }
      .mdl-stepper--horizontal .mdl-step > .mdl-step__actions {
        position: absolute;
        top: calc(100% - 84px);
        left: 0;
        margin: 0;
        padding: 24px;
        width: calc(100% - 48px); }
        .mdl-stepper--horizontal .mdl-step > .mdl-step__actions [data-stepper-next] {
          order: 4;
          margin-left: 8px;
          margin-right: 0;
          color: #2196F3;
          background-color: transparent; }
        .mdl-stepper--horizontal .mdl-step > .mdl-step__actions [data-stepper-cancel] {
          order: 3;
          margin-left: auto; }
        .mdl-stepper--horizontal .mdl-step > .mdl-step__actions [data-stepper-skip] {
          order: 2;
          margin-left: auto; }
        .mdl-stepper--horizontal .mdl-step > .mdl-step__actions [data-stepper-back] {
          order: 1;
          margin-left: 0;
          margin-right: auto; }
      .mdl-stepper--horizontal.mdl-stepper--linear > .mdl-step:not(.mdl-step--completed):not(.is-active) .mdl-step__title > .mdl-step__title-text {
        opacity: .5; } }
  </style>
  {/literal}
  <!-- markup -->
  <div class="mdl-cell mdl-cell--12-col" id="stepper-non-linear">
                <h1 class="stepper-subtitle">Non-linear stepper</h1>
                <p class="stepper-guideline-quote">Non-linear steppers allow users to enter a multi-step flow at any point.</p>

                <div class="stepper-snippet" id="snippet-stepper-nonlinear"><!-- markup -->
  <ul class="mdl-stepper" id="demo-stepper-nonlinear" data-upgraded=",MaterialStepper">
    <li class="mdl-step is-active">
      <span class="mdl-step__label">
                <span class="mdl-step__title">
                  <span class="mdl-step__title-text">Title of step 1</span>
      </span>
      <span class="mdl-step__label-indicator"><span class="mdl-step__label-indicator-content">1</span></span></span>
      <div class="mdl-step__content">
      </div>
      <div class="mdl-step__actions">
        <button class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--colored mdl-button--raised" data-stepper-next>
        Continue
      </button>
        <button class="mdl-button mdl-js-button mdl-js-ripple-effect" data-stepper-cancel="" data-upgraded=",MaterialButton,MaterialRipple">
              Cancel
            <span class="mdl-button__ripple-container"><span class="mdl-ripple"></span></span></button>
        <button class="mdl-button mdl-js-button mdl-js-ripple-effect" data-stepper-back="" disabled="" data-upgraded=",MaterialButton,MaterialRipple">
              Back
            <span class="mdl-button__ripple-container"><span class="mdl-ripple"></span></span></button>
      </div>
    </li>
    <li class="mdl-step">
      <span class="mdl-step__label">
            <span class="mdl-step__title">
              <span class="mdl-step__title-text">Title longer than it should be</span>
      </span>
      <span class="mdl-step__label-indicator"><span class="mdl-step__label-indicator-content">2</span></span></span>
      <div class="mdl-step__content"></div>
      <div class="mdl-step__actions">
        <button class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--colored mdl-button--raised" data-stepper-next data-upgraded=",MaterialButton,MaterialRipple">
              Continue
            <span class="mdl-button__ripple-container"><span class="mdl-ripple"></span></span></button>
        <button class="mdl-button mdl-js-button mdl-js-ripple-effect" data-stepper-cancel="" data-upgraded=",MaterialButton,MaterialRipple">
              Cancel
            <span class="mdl-button__ripple-container"><span class="mdl-ripple"></span></span></button>
        <button class="mdl-button mdl-js-button mdl-js-ripple-effect" data-stepper-back="" data-upgraded=",MaterialButton,MaterialRipple">
              Back
            <span class="mdl-button__ripple-container"><span class="mdl-ripple"></span></span></button>
      </div>
    </li>
    <li class="mdl-step">
      <span class="mdl-step__label">
            <span class="mdl-step__title">
              <span class="mdl-step__title-text">Title of step 3</span>
      </span>
      <span class="mdl-step__label-indicator"><span class="mdl-step__label-indicator-content">3</span></span></span>
      <div class="mdl-step__content"></div>
      <div class="mdl-step__actions">
        <button class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--colored mdl-button--raised" data-stepper-next="" data-upgraded=",MaterialButton,MaterialRipple">
              Continue
            <span class="mdl-button__ripple-container"><span class="mdl-ripple"></span></span></button>
        <button class="mdl-button mdl-js-button mdl-js-ripple-effect" data-stepper-cancel="" data-upgraded=",MaterialButton,MaterialRipple">
              Cancel
            <span class="mdl-button__ripple-container"><span class="mdl-ripple"></span></span></button>
            <button class="mdl-button mdl-js-button mdl-js-ripple-effect" data-stepper-back="" data-upgraded=",MaterialButton,MaterialRipple">
              Back
            <span class="mdl-button__ripple-container"><span class="mdl-ripple"></span></span></button>
      </div>
    </li>
  </ul>
{literal}
  <!-- script -->
  <script>
    (function () {
      // Select stepper container element
      var stepperElement = document.querySelector("ul.mdl-stepper");
      var Stepper;
      var steps;

      if (!stepperElement) return;

      // Get the MaterialStepper instance of element to control it.
      Stepper = stepperElement.MaterialStepper;

      if (!Stepper) {
        console.error('MaterialStepper instance is not available for selector: ' + selector + '.');
        return;
      }
      steps = stepperElement.querySelectorAll('.mdl-step');

      for (var i = 0; i < steps.length; i++) {
        // When user clicks on [data-stepper-next] button of step.
        steps[i].addEventListener('onstepnext', function (e) {
          // {element}.MaterialStepper.next() change the state of current step to "completed"
          // and move one step forward.
          Stepper.next();
        });
        // When user clicks on [data-stepper-back] button of step.
        steps[i].addEventListener('onstepback', function (e) {
          Stepper.back();
        });
      }


    })();

  </script>
{/literal}
</div>

  </div>

angular material version

Hello, this is just a feature request:
You done a great work by implementing steppers to MD and i love it. But it seems that it’s not suitable to angular material 1 or 2. So i want to know if there is a way to use your steppers with Angular Material?

Thank you!

Horizontal connector line on the horizontal stepper doesn't display in IE 11

I'm not sure if this is an issue on other IE versions.

For E11
https://github.com/ahlechandre/mdl-stepper/blob/master/src/stepper/_stepper.scss#L419
Usage of :after breaks IE, so when this doesn't render the connector line, the title text is centered instead of being left aligned.

The title text is centered because:
https://github.com/ahlechandre/mdl-stepper/blob/master/src/stepper/_stepper.scss#L373
Replacing "center" with "flex-start" or "space-between" would make the text in IE left align like the other browsers, regardless of the absence of the connector line.

Publish as a NPM package

I would love to use it as a NPM package by providing a package.json.

NPM (as a developer)