A set of Polymer and Sass mixins for styling native progress elements in D2L applications.
For further information on this and other Brightspace UI components, see the docs at ui.developers.brightspace.com.
d2l-progress can be installed from Bower:
bower install d2l-progress
Progress styles can be applied using either Polymer or Sass mixins. Which one you use depends on your technology stack and comfort with each, however since Sass compiles to native CSS it's more performant.
Import the main d2l-progress.scss file into your application's Sass. Then call the d2l-progress() mixin to define the styles of your progress element:
@import 'bower_components/d2l-progress/d2l-progress.scss';
progress.my-progress {
@include d2l-progress();
}Include the webcomponents.js "lite" polyfill (for browsers that don't natively support web components), import d2l-progress.html, and consume the required mixins in a custom style block:
<head>
<script src="https://s.brightspace.com/lib/webcomponentsjs/0.7.21/webcomponents-lite.min.js"></script>
<link rel="import" href="../d2l-progress/d2l-progress.html">
<custom-style>
<style is="custom-style">
progress.d2l-progress {
@apply --d2l-progress;
}
/* etc. */
</style>
</custom-style>
</head>See the Best Practices & Style Guide for information on naming conventions, plus information about the EditorConfig rules used in this repo.