primer/css
1
1
Fork 0
mirror of https://github.com/primer/css.git synced 2024-12-01 12:42:32 +03:00
Code Issues Projects Releases Wiki Activity
c8edf4a1b3
css/modules/primer-progress-bar
History
Emily Brick c8edf4a1b3 removed scss in place of utilities and flex
2018-10-11 11:49:41 -04:00
..
lib removed scss in place of utilities and flex 2018-10-11 11:49:41 -04:00
index.scss add progress bar module 2018-10-01 11:31:42 -07:00
LICENSE add progress bar module 2018-10-01 11:31:42 -07:00
package.json add progress bar module 2018-10-01 11:31:42 -07:00
README.md removed scss in place of utilities and flex 2018-10-11 11:49:41 -04:00
stories.js progress bar first pass with flex 2018-10-10 18:57:00 -04:00

README.md

Primer / Progress Bar

npm version Build Status

TODO: fill in this description later

This repository is a module of the full primer repository.

Install

This repository is distributed with npm. After installing npm, you can install primer-progress-bar with this command.

$ npm install --save primer-progress-bar

Usage

The source files included are written in Sass (SCSS) You can simply point your sass include-path at your node_modules directory and import it like this.

@import "primer-progress-bar/index.scss";

You can also import specific portions of the module by importing those partials from the /lib/ folder. Make sure you import any requirements along with the modules.

Build

For a compiled CSS version of this module, an npm script is included that will output a css version to build/build.css The built css file is also included in the npm package:

$ npm run build

Default Progress Bar

<div class="progress-bar my-4">
  <div class="progress" style="width: 50%">
  </div>
</div>

<span class="flex-progress-bar d-flex bg-gray rounded-1 overflow-hidden">
  <span class="height-full bg-green" style="width:50%"></span>
  <span class="height-full bg-purple" style="width:25%"></span>
  <span class="height-full bg-red" style="width:5%"></span>
</span>

Small Progress Bar

<div class="progress-bar progress-bar-small my-4">
  <div class="progress" style="width:50%"></div>
</div>

<span class="flex-progress-bar-small d-flex bg-gray rounded-1 overflow-hidden">
  <span class="height-full bg-green" style="width:50%"></span>
  <span class="height-full bg-purple" style="width:25%"></span>
  <span class="height-full bg-red" style="width:5%"></span>
</span>

Progress Bar With Tooltip

<div class="tooltipped tooltipped-n mt-3" aria-label="78 done / 6 in progress / 2 to do">
  <div class="progress-bar my-4">
    <div class="progress" style="width: 50%">
    </div>
  </div>
</div>

<div class="tooltipped tooltipped-n mt-3" aria-label="78 done / 6 in progress / 2 to do">
  <span class="flex-progress-bar d-flex bg-gray rounded-1 overflow-hidden">
    <span class="flex-progress to-do height-full bg-green" style="width: 50%"></span>
  </span>
</div>

WIP Reverse Progress

<div class="reverse-progress-container">
  <div style="width:50%" class="reverse-progress-bar" ></div>
</div>

WIP Progress Bar Inline

<div class="progress-bar-inline">
  <span class="progress-bar">
    <span class="progress" style="width:50%"> </span>
  </span>
</div>

WIP Progress Gradient [Test]

<div class="flex-progress-bar--gradient d-flex bg-gray rounded-1 overflow-hidden"></div>

License

MIT © GitHub