1.1.0: CSS variable styling

Styling has been refactored to be done entirely via CSS variables rather than via javascript.

Examples of the new CSS variables are:

#my-steps{
	/* The color to fill up, left-to-right, as steps are set to active */
	--progress-fill-color: #cf78d9;
	/* The default color of the unfilled section of line and steps after the active step */
	--progress-unfilled-color: purple;

	/* The width of each step icon */
	--step-width: 20px;
	/* The font size of the step number and label */
	--font-size: 12px;
	/* The border radius of the step icon */
	--step-border-radius: 25%;
	/* The thickness of the line/progress bar/borders */
	--line-thickness: 3px;

	/* The animation speed of the progress bar filling up */
	--animation-speed: 500ms;
	/* Display attribute of the step labels. Show: 'inline-block', hide: 'none' */
	--step-label-display: 'inline-block';
	/* The vertical margin of the labels, if shown */
	--step-label-spacing: 5px;
	/* The font weight to use on step labels */
	--step-label-font-weight: normal;

	/* The font color of the step icon that is currently active */
	--current-step-font-color: red;
	/* The font color of the current step label */
	--current-label-font-color: blue;
	/* The font weight of the current step label */
	--current-label-font-weight: bold;

	/* The font color of step labels that are before the current step */
	--previous-label-font-color: red;
	/* The font color of the step icons that are before the current step */
	--previous-step-font-color: pink;

	/* The fill-color for step icons that are after the current active step */
	--future-step-fill-color: orange;
	/* The font color of step labels that are after the current step */
	--future-label-font-color: green;

	/* The font color of step labels that are disabled */
	--disabled-label-font-color: maroon;
	/* The font color of the disabled steps */
	--disabled-step-font-color: red;
	/* The fill-color for disabled step icons */
	--disabled-step-fill-color: blue;
}

For playing with these values, I've also added Knobs to the demo page so that they can be tweaked interactively.

1.0.3: Further resize bugfixes

The automatic resizing of the control and labels was done 100% programmatically and had a few logic errors that caused the control to resize to a few different sizes until settling into a consistent one.

Now it should immediately resize to the final size on initialization. The math is now mostly handled by CSS.

Full Changelog: 1.0.2...1.0.3

1.0.2: Resize bugfix

• The resizing/recalculation of step labels now happens on initialization, and when the device's orientation is changed.
• The resize has now been smoothed to the default animation speed (can be changed
• Fixed bug causing extra padding on either side after a resize

1.0.0

Updated readme