├── index.js
├── .deployment
├── src
    ├── scss
    │   ├── win
    │   │   ├── _main.scss
    │   │   ├── _resources.scss
    │   │   ├── mixins
    │   │   │   ├── _glyphs.scss
    │   │   │   ├── _triangle.scss
    │   │   │   ├── _animations.scss
    │   │   │   ├── _colors.scss
    │   │   │   └── _spacer.scss
    │   │   ├── _utilities.scss
    │   │   ├── _scaffolding.scss
    │   │   ├── _pager.scss
    │   │   ├── _grid.scss
    │   │   ├── _alerts.scss
    │   │   ├── _section.scss
    │   │   ├── _progress-bar.scss
    │   │   ├── _back-to-top.scss
    │   │   ├── _panels.scss
    │   │   ├── _progress-ring.scss
    │   │   ├── _doc.scss
    │   │   ├── _pagination.scss
    │   │   └── _rating.scss
    │   ├── override
    │   │   ├── _page.scss
    │   │   ├── mixins
    │   │   │   ├── _tab-focus.scss
    │   │   │   └── _buttons.scss
    │   │   ├── _labels.scss
    │   │   ├── _pagination.scss
    │   │   ├── _panels.scss
    │   │   ├── _grid.scss
    │   │   ├── _progress-bar.scss
    │   │   ├── _tooltip.scss
    │   │   ├── _breadcrumb.scss
    │   │   ├── _popover.scss
    │   │   ├── _tables.scss
    │   │   ├── _alerts.scss
    │   │   ├── _modal.scss
    │   │   ├── _scaffolding.scss
    │   │   ├── _jumbotron.scss
    │   │   ├── _navs.scss
    │   │   ├── _bootstrap.scss
    │   │   └── _bootstrap-optional.scss
    │   ├── winstrap.scss
    │   └── winstrap-optional.scss
    ├── fonts
    │   ├── selawk.eot
    │   ├── selawk.ttf
    │   ├── selawkb.eot
    │   ├── selawkb.ttf
    │   ├── selawkl.eot
    │   ├── selawkl.ttf
    │   ├── selawksb.eot
    │   ├── selawksb.ttf
    │   ├── selawksl.eot
    │   ├── selawksl.ttf
    │   ├── glyphs
    │   │   ├── winjs-symbols.eot
    │   │   ├── winjs-symbols.ttf
    │   │   └── winjs-symbols.woff
    │   └── LICENSE.txt
    ├── images
    │   ├── winstrap.png
    │   ├── example_dark.jpg
    │   ├── example_light.jpg
    │   ├── winstrap.svg
    │   └── winstrap_white.svg
    └── doc
    │   ├── partials
    │       ├── scripts.hbs
    │       ├── breadcrumb-guidance.md.hbs
    │       ├── table-guidance.md.hbs
    │       ├── table-with-borders-guidance.md.hbs
    │       ├── tabs-guidance.md.hbs
    │       ├── back-to-top-guidance.md.hbs
    │       ├── grid-small-gutter-guidance.md.hbs
    │       ├── lorem-ipsum.hbs
    │       ├── grid-guidance.md.hbs
    │       ├── back-to-top.hbs
    │       ├── progress-guidance.md.hbs
    │       ├── side-nav-small-about.md.hbs
    │       ├── page-header-guidance.md.hbs
    │       ├── progress-bar-guidance.md.hbs
    │       ├── side-nav-large-about.md.hbs
    │       ├── pagination-guidance.md.hbs
    │       ├── form
    │       │   ├── combo-guidance.md.hbs
    │       │   ├── text-input-guidance.md.hbs
    │       │   ├── form-elements-text.hbs
    │       │   ├── form-select.hbs
    │       │   ├── form-guidance.md.hbs
    │       │   └── form-elements.hbs
    │       ├── media-ratio-guidance.md.hbs
    │       ├── dialog-guidance.md.hbs
    │       ├── toggle-button-guidance.md.hbs
    │       ├── checkbox-toggle-button-guidance.md.hbs
    │       ├── radio-toggle-button-guidance.md.hbs
    │       ├── progress-ring-guidance.md.hbs
    │       ├── toggle-switch-guidance.md.hbs
    │       ├── flyout-closing-button-guidance.md.hbs
    │       ├── button-on-background-guidance.md.hbs
    │       ├── dropdown
    │       │   ├── dropdown-guidance.md.hbs
    │       │   ├── dropdown.hbs
    │       │   └── browser-select.hbs
    │       ├── flyout-guidance.md.hbs
    │       ├── tooltip-guidance.md.hbs
    │       ├── pagination-pager.hbs
    │       ├── side-nav-large-guidance.md.hbs
    │       ├── dismissible-flyout-guidance.md.hbs
    │       ├── jumbotron-guidance.md.hbs
    │       ├── spacer-sizes.hbs
    │       ├── button-guidance.md.hbs
    │       ├── side-nav-small-guidance.md.hbs
    │       ├── jumbotron-centered.hbs
    │       ├── side-nav-large.hbs
    │       ├── navbar-doc.hbs
    │       ├── pagination-base.hbs
    │       ├── navbar-guidance.md.hbs
    │       ├── breadcrumb.hbs
    │       ├── section.hbs
    │       ├── side-nav.js.hbs
    │       ├── type
    │       │   ├── captions.hbs
    │       │   ├── subheadings.hbs
    │       │   ├── headings.hbs
    │       │   ├── sizes.hbs
    │       │   ├── fonts.hbs
    │       │   └── paragraphs.hbs
    │       ├── jumbotron.hbs
    │       ├── glyphs.hbs
    │       ├── alert-stack.hbs
    │       ├── side-nav-small.hbs
    │       ├── jumbotron-doc.hbs
    │       ├── labels.hbs
    │       ├── dropdown-doc.hbs
    │       ├── back-to-top-doc.hbs
    │       ├── side-navigation.hbs
    │       ├── loader.hbs
    │       ├── tooltips.hbs
    │       ├── progress.hbs
    │       ├── putbox.hbs
    │       ├── page-header.hbs
    │       ├── pagination.hbs
    │       ├── grid-small-gutter.hbs
    │       ├── responsive-table.hbs
    │       └── toggle-switch.hbs
    │   ├── layout.hbs
    │   ├── index.hbs
    │   ├── data
    │       ├── side-nav-large.json
    │       └── side-nav-small.json
    │   ├── alerts.hbs
    │   ├── layouts
    │       └── default.hbs
    │   ├── colors.hbs
    │   ├── typography.hbs
    │   ├── components.hbs
    │   └── controls.hbs
├── dist
    ├── fonts
    │   ├── selawk.eot
    │   ├── selawk.ttf
    │   ├── selawkb.eot
    │   ├── selawkb.ttf
    │   ├── selawkl.eot
    │   ├── selawkl.ttf
    │   ├── selawksb.eot
    │   ├── selawksb.ttf
    │   ├── selawksl.eot
    │   ├── selawksl.ttf
    │   ├── glyphs
    │   │   ├── winjs-symbols.eot
    │   │   ├── winjs-symbols.ttf
    │   │   └── winjs-symbols.woff
    │   └── LICENSE.txt
    └── images
    │   ├── winstrap.png
    │   ├── example_dark.jpg
    │   ├── example_light.jpg
    │   ├── winstrap.svg
    │   └── winstrap_white.svg
├── bower.json
├── handlebars-helpers
    └── inArrayJson.js
├── package.json
├── README.md
├── LICENSE.md
├── .gitignore
└── deploy.cmd


/index.js:
--------------------------------------------------------------------------------
1 | module.exports = __dirname;
2 | 


--------------------------------------------------------------------------------
/.deployment:
--------------------------------------------------------------------------------
1 | [config]
2 | command = deploy.cmd


--------------------------------------------------------------------------------
/src/scss/win/_main.scss:
--------------------------------------------------------------------------------
1 | main {
2 |     padding: 0 0 10vh;
3 | }
4 | 


--------------------------------------------------------------------------------
/dist/fonts/selawk.eot:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/winjs/winstrap/HEAD/dist/fonts/selawk.eot


--------------------------------------------------------------------------------
/dist/fonts/selawk.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/winjs/winstrap/HEAD/dist/fonts/selawk.ttf


--------------------------------------------------------------------------------
/src/fonts/selawk.eot:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/winjs/winstrap/HEAD/src/fonts/selawk.eot


--------------------------------------------------------------------------------
/src/fonts/selawk.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/winjs/winstrap/HEAD/src/fonts/selawk.ttf


--------------------------------------------------------------------------------
/src/fonts/selawkb.eot:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/winjs/winstrap/HEAD/src/fonts/selawkb.eot


--------------------------------------------------------------------------------
/src/fonts/selawkb.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/winjs/winstrap/HEAD/src/fonts/selawkb.ttf


--------------------------------------------------------------------------------
/src/fonts/selawkl.eot:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/winjs/winstrap/HEAD/src/fonts/selawkl.eot


--------------------------------------------------------------------------------
/src/fonts/selawkl.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/winjs/winstrap/HEAD/src/fonts/selawkl.ttf


--------------------------------------------------------------------------------
/dist/fonts/selawkb.eot:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/winjs/winstrap/HEAD/dist/fonts/selawkb.eot


--------------------------------------------------------------------------------
/dist/fonts/selawkb.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/winjs/winstrap/HEAD/dist/fonts/selawkb.ttf


--------------------------------------------------------------------------------
/dist/fonts/selawkl.eot:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/winjs/winstrap/HEAD/dist/fonts/selawkl.eot


--------------------------------------------------------------------------------
/dist/fonts/selawkl.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/winjs/winstrap/HEAD/dist/fonts/selawkl.ttf


--------------------------------------------------------------------------------
/dist/fonts/selawksb.eot:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/winjs/winstrap/HEAD/dist/fonts/selawksb.eot


--------------------------------------------------------------------------------
/dist/fonts/selawksb.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/winjs/winstrap/HEAD/dist/fonts/selawksb.ttf


--------------------------------------------------------------------------------
/dist/fonts/selawksl.eot:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/winjs/winstrap/HEAD/dist/fonts/selawksl.eot


--------------------------------------------------------------------------------
/dist/fonts/selawksl.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/winjs/winstrap/HEAD/dist/fonts/selawksl.ttf


--------------------------------------------------------------------------------
/dist/images/winstrap.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/winjs/winstrap/HEAD/dist/images/winstrap.png


--------------------------------------------------------------------------------
/src/fonts/selawksb.eot:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/winjs/winstrap/HEAD/src/fonts/selawksb.eot


--------------------------------------------------------------------------------
/src/fonts/selawksb.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/winjs/winstrap/HEAD/src/fonts/selawksb.ttf


--------------------------------------------------------------------------------
/src/fonts/selawksl.eot:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/winjs/winstrap/HEAD/src/fonts/selawksl.eot


--------------------------------------------------------------------------------
/src/fonts/selawksl.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/winjs/winstrap/HEAD/src/fonts/selawksl.ttf


--------------------------------------------------------------------------------
/src/images/winstrap.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/winjs/winstrap/HEAD/src/images/winstrap.png


--------------------------------------------------------------------------------
/dist/images/example_dark.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/winjs/winstrap/HEAD/dist/images/example_dark.jpg


--------------------------------------------------------------------------------
/dist/images/example_light.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/winjs/winstrap/HEAD/dist/images/example_light.jpg


--------------------------------------------------------------------------------
/src/images/example_dark.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/winjs/winstrap/HEAD/src/images/example_dark.jpg


--------------------------------------------------------------------------------
/src/images/example_light.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/winjs/winstrap/HEAD/src/images/example_light.jpg


--------------------------------------------------------------------------------
/src/doc/partials/scripts.hbs:
--------------------------------------------------------------------------------
1 | <script src="js/vendor/bootstrap.min.js"></script>
2 | <script src="js/app.js"></script>


--------------------------------------------------------------------------------
/src/fonts/glyphs/winjs-symbols.eot:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/winjs/winstrap/HEAD/src/fonts/glyphs/winjs-symbols.eot


--------------------------------------------------------------------------------
/src/fonts/glyphs/winjs-symbols.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/winjs/winstrap/HEAD/src/fonts/glyphs/winjs-symbols.ttf


--------------------------------------------------------------------------------
/dist/fonts/glyphs/winjs-symbols.eot:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/winjs/winstrap/HEAD/dist/fonts/glyphs/winjs-symbols.eot


--------------------------------------------------------------------------------
/dist/fonts/glyphs/winjs-symbols.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/winjs/winstrap/HEAD/dist/fonts/glyphs/winjs-symbols.ttf


--------------------------------------------------------------------------------
/dist/fonts/glyphs/winjs-symbols.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/winjs/winstrap/HEAD/dist/fonts/glyphs/winjs-symbols.woff


--------------------------------------------------------------------------------
/src/fonts/glyphs/winjs-symbols.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/winjs/winstrap/HEAD/src/fonts/glyphs/winjs-symbols.woff


--------------------------------------------------------------------------------
/src/doc/partials/breadcrumb-guidance.md.hbs:
--------------------------------------------------------------------------------
1 | * To show a trailing separator, add an `<li />` as the last item in the `<ol>`.
2 | 


--------------------------------------------------------------------------------
/src/scss/override/_page.scss:
--------------------------------------------------------------------------------
1 | .page-header {
2 |     margin: 0;
3 |     padding: 0;
4 |     background: $color-dim-low;
5 | }
6 | 


--------------------------------------------------------------------------------
/src/scss/win/_resources.scss:
--------------------------------------------------------------------------------
1 | $font-path:         "../fonts" !default;
2 | $icon-font-path:    "#{$font-path}/glyphs" !default;
3 | 


--------------------------------------------------------------------------------
/src/doc/partials/table-guidance.md.hbs:
--------------------------------------------------------------------------------
1 | * The following theme classes can be applied to the `<table>` tag: `.theme-default` or `.theme-alt`.
2 | 


--------------------------------------------------------------------------------
/src/doc/partials/table-with-borders-guidance.md.hbs:
--------------------------------------------------------------------------------
1 | * The `.table-striped` class on the `<table>` tag will give you bottom borders on each row.


--------------------------------------------------------------------------------
/src/doc/partials/tabs-guidance.md.hbs:
--------------------------------------------------------------------------------
1 | * The following theme classes can be applied to the `<ul>` tag: `.theme-default` or `.theme-alt`.
2 | 


--------------------------------------------------------------------------------
/src/doc/partials/back-to-top-guidance.md.hbs:
--------------------------------------------------------------------------------
1 | * The following theme classes can be applied to the `<a>` tag: `.theme-default` or `.theme-alt`.
2 | 


--------------------------------------------------------------------------------
/src/doc/partials/grid-small-gutter-guidance.md.hbs:
--------------------------------------------------------------------------------
1 | * Add the optional class `.row-sm` to each `<div class="row">` in order to get small gutters.
2 | 


--------------------------------------------------------------------------------
/src/doc/partials/lorem-ipsum.hbs:
--------------------------------------------------------------------------------
1 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod nibh quam, posuere ultrices ligula molestie at.


--------------------------------------------------------------------------------
/src/doc/partials/grid-guidance.md.hbs:
--------------------------------------------------------------------------------
1 | * Add the optional class `.section-gallery` to each `<div class="row">` in order to add vertical spacing below the media elements.


--------------------------------------------------------------------------------
/src/doc/partials/back-to-top.hbs:
--------------------------------------------------------------------------------
1 | <a href="#top" class="back-to-top">
2 |     <i class="glyph glyph-up"></i>
3 |     <span class="sr-only">Back to top</span>
4 | </a>
5 | 


--------------------------------------------------------------------------------
/src/doc/partials/progress-guidance.md.hbs:
--------------------------------------------------------------------------------
1 | * The following theme classes can be applied to the `<div class="progress">` tag: `.theme-default`, `.theme-alt` or `.theme-dark`.


--------------------------------------------------------------------------------
/src/doc/partials/side-nav-small-about.md.hbs:
--------------------------------------------------------------------------------
1 | Small side nav is a two-level deep side navigation. Use in cases where site structure calls for nested, two-level architecture.


--------------------------------------------------------------------------------
/src/doc/partials/page-header-guidance.md.hbs:
--------------------------------------------------------------------------------
1 | * Add the `data-scroll="smooth"` attribute to the `<ul class="nav nav-pills">` tag and the JS code above to enable smooth scrolling.


--------------------------------------------------------------------------------
/src/doc/partials/progress-bar-guidance.md.hbs:
--------------------------------------------------------------------------------
1 | * To center the progress bar, the parent control should have `text-align` to `center`. E.g. `<div style="text-align: center">`.
2 | 


--------------------------------------------------------------------------------
/src/scss/override/mixins/_tab-focus.scss:
--------------------------------------------------------------------------------
1 | // Use our own mixin instead of Bootstrap
2 | @mixin tab-focus() {
3 |     outline: 1px dotted #999;
4 |     outline-offset: 1px;
5 | }
6 | 


--------------------------------------------------------------------------------
/src/doc/partials/side-nav-large-about.md.hbs:
--------------------------------------------------------------------------------
1 | Large side nav is a one-level deep side navigation with an optional label. Use in cases where site structure calls for flat, single-level architecture.


--------------------------------------------------------------------------------
/src/doc/partials/pagination-guidance.md.hbs:
--------------------------------------------------------------------------------
1 | * The following theme classes can be applied to the `<ul>` tag: `.theme-default` or `.theme-alt`.
2 | * Add a `.disabled` class to a `<li>` element to hide it.


--------------------------------------------------------------------------------
/src/doc/layout.hbs:
--------------------------------------------------------------------------------
 1 | {{> page-header }}
 2 | 
 3 | <div class="container">
 4 |     {{> grid }}
 5 |     <hr />
 6 |     {{> grid-small-gutter }}
 7 |     <hr />
 8 |     {{> spacer-doc }}
 9 | </div>
10 | 


--------------------------------------------------------------------------------
/src/doc/partials/form/combo-guidance.md.hbs:
--------------------------------------------------------------------------------
1 | * The following theme classes can be applied to the `<form>` tag: `.theme-default`, `.theme-alt`, `.theme-light` or `.theme-dark`.
2 | * The `disabled` attribute can be applied to the `<select>` tags above.


--------------------------------------------------------------------------------
/src/doc/partials/media-ratio-guidance.md.hbs:
--------------------------------------------------------------------------------
1 | * Here are the different classes used above (from left-to-right) to set the width-to-height ratio: `.ratio-movie`, `.ratio-1-1`, `.ratio-16-9` and `.ratio-2-1`. Apply these classes to the `<div class="media-img">` tag.
2 | 


--------------------------------------------------------------------------------
/src/doc/partials/dialog-guidance.md.hbs:
--------------------------------------------------------------------------------
1 | * The following theme classes can be applied to the `<div class="modal">` tag: `.theme-default` or `.theme-alt`.
2 | * Add the `.modal-center-vertical` class to the `<div class="modal">` tag in order to center the dialog vertically.


--------------------------------------------------------------------------------
/src/doc/partials/form/text-input-guidance.md.hbs:
--------------------------------------------------------------------------------
1 | * The following theme classes can be applied to the `<form>` or `<div class="form-group">` tags: `.theme-default`, `.theme-alt`, `.theme-light` or `.theme-dark`.
2 | * The `disabled` attribute can be applied to the `<input>` or `<textarea>` tags.


--------------------------------------------------------------------------------
/src/doc/partials/toggle-button-guidance.md.hbs:
--------------------------------------------------------------------------------
1 | * The following theme classes can be applied to the `<button>` tag: `.theme-default`, `.theme-alt`, `.theme-light` or `.theme-dark`.
2 | * Apply the  `.active` class to the `<button>` tag to pre-select the button.
3 | * The `disabled` attribute can be applied to the `<button>` tag.


--------------------------------------------------------------------------------
/src/doc/partials/checkbox-toggle-button-guidance.md.hbs:
--------------------------------------------------------------------------------
1 | * The following theme classes can be applied to the `<label>` tag: `.theme-default`, `.theme-alt`, `.theme-light` or `.theme-dark`.
2 | * Apply the `.active` class to the `<label>` tag to pre-select the button.
3 | * The `disabled` attribute can be applied to the `<label>` tag.


--------------------------------------------------------------------------------
/src/doc/partials/radio-toggle-button-guidance.md.hbs:
--------------------------------------------------------------------------------
1 | * The following theme classes can be applied to the `<label>` tag: `.theme-default`, `.theme-alt`, `.theme-light` or `.theme-dark`.
2 | * Apply the  `.active` class to the `<label>` tag to pre-select the button.
3 | * The `disabled` attribute can be applied to the `<label>` tag.


--------------------------------------------------------------------------------
/src/doc/partials/progress-ring-guidance.md.hbs:
--------------------------------------------------------------------------------
1 | * The default size is shown in the first example above. Add the `.progress-medium` class to the outer `<div class="progress-ring">` in order to get the medium-sized ring. Add the `.progress-large` class for the large-sized ring.
2 | {{#markdown}}
3 | {{> progress-bar-guidance.md}}
4 | {{/markdown}}


--------------------------------------------------------------------------------
/src/doc/partials/toggle-switch-guidance.md.hbs:
--------------------------------------------------------------------------------
1 | * The following theme classes can be applied to the `<button>` tag: `.theme-default`, `.theme-alt`, `.theme-light` or `.theme-dark`.
2 | * Apply the  `.active` class to the `<button>` tag to put the toggle switch in the On position.
3 | * The `disabled` attribute can be applied to the `<button>` tag.


--------------------------------------------------------------------------------
/src/scss/override/_labels.scss:
--------------------------------------------------------------------------------
 1 | .labels-list {
 2 |     display: inline;
 3 |     list-style: none;
 4 |     margin: 0 1em 0 0;
 5 |     padding: 0;
 6 | 
 7 |     li {
 8 |         margin: 0 .25em;
 9 |     }
10 | }
11 | 
12 | .label {
13 |     font-weight: normal;
14 |     font-family: $font-family-bold;
15 |     border-radius:0;
16 | }
17 | 


--------------------------------------------------------------------------------
/src/scss/win/mixins/_glyphs.scss:
--------------------------------------------------------------------------------
 1 | // Function to get glyph unicode value
 2 | @function glyph($name) {
 3 |     @return map-deep-get($glyphs, $name, unicode);
 4 | }
 5 | 
 6 | // Mixin to display a glyph
 7 | @mixin glyph($name) {
 8 |     & {
 9 |         font-family: "winjs-symbols";
10 |         content: glyph($name);
11 |     }
12 | }
13 | 


--------------------------------------------------------------------------------
/src/doc/partials/flyout-closing-button-guidance.md.hbs:
--------------------------------------------------------------------------------
1 | * To add a button that doesn't close the flyout when clicked, remove the `onclick="$("#btn-close").popover("hide");"` element from the JS below.
2 | * The `data-theme` attribute can be set to the following values: `theme-default`, `theme-alt`, `theme-light` or `theme-dark`. It is applied to the `<button>` tag.
3 | 


--------------------------------------------------------------------------------
/src/doc/partials/button-on-background-guidance.md.hbs:
--------------------------------------------------------------------------------
1 | * In addition to those options listed above for Push Buttons, the following theme classes can be applied to the `<a>`, `<button>`, or `<input>` tag: `.theme-default`, `.theme-alt`, `.theme-light` or `.theme-dark`.
2 | * Use the `.btn-block` class on the `<a>`, `<button>`, or `<input>` tags to make them full-width and stacked.
3 | 


--------------------------------------------------------------------------------
/src/doc/partials/dropdown/dropdown-guidance.md.hbs:
--------------------------------------------------------------------------------
1 | * The following theme classes can be applied to the `<div class="dropdown">` tag: `.theme-default`, `.theme-alt`, `.theme-light` or `.theme-dark`.
2 | * The `disabled` attribute can be applied to the `<button>` tag to disable the control or the `.disabled` class can be applied to an `<a>` tag to disable an item in the dropdown menu.
3 | 


--------------------------------------------------------------------------------
/src/doc/partials/flyout-guidance.md.hbs:
--------------------------------------------------------------------------------
1 | * The `data-theme` attribute can be set to the following values: `theme-default`, `theme-alt`, `theme-light` or `theme-dark`. It is applied to the `<button>` tag.
2 | * The `data-placement` attribute can be set to the values: `top`, `right`, `bottom` or `left` and governs the placement of the flyout with respect to the entry point. It is applied to the `<button>` tag. The default value is `right`.


--------------------------------------------------------------------------------
/src/doc/partials/tooltip-guidance.md.hbs:
--------------------------------------------------------------------------------
1 | * The following theme classes can be applied to the `<span data-toggle="tooltip">` tag: `.theme-default`, `.theme-alt`, `.theme-light` or `.theme-dark`.
2 | * The `data-placement` attribute can be set to the following values: `top`, `right`, `bottom` or `left` and governs the placement of the tooltip with respect to the entry point. It is applied to the `<span data-toggle="tooltip">` tag. The default value is `top`.


--------------------------------------------------------------------------------
/src/doc/partials/form/form-elements-text.hbs:
--------------------------------------------------------------------------------
 1 | <div class="form-group">
 2 |     <label>Text</label>
 3 |     <input type='text' class='form-control'/>
 4 | </div>
 5 | <div class="form-group">
 6 |     <label class="disabled">Text</label>
 7 |     <input type='text' class='form-control' value="Disabled value" disabled="disabled" />
 8 | </div>
 9 | <div class="form-group">
10 |     <label>Text Area</label>
11 |     <textarea class='form-control'></textarea>
12 | </div>
13 | 


--------------------------------------------------------------------------------
/src/scss/override/_pagination.scss:
--------------------------------------------------------------------------------
 1 | .pagination > li {
 2 |     margin: 0;
 3 |     
 4 |     > a, > span {
 5 |         min-width: 34px;
 6 |         margin: spacing(xxs, -7);
 7 |         padding: spacing(xxs, -8) spacing(xxxs) spacing(xxs, -7);
 8 |         text-align: center;
 9 |         &:focus {
10 |             background-color: rgba($color-black, .3);
11 |             border-color: transparent;
12 |             outline: none;
13 |         }
14 |     }
15 | }
16 | 


--------------------------------------------------------------------------------
/src/scss/win/_utilities.scss:
--------------------------------------------------------------------------------
 1 | .no-outline {
 2 |     &:focus,
 3 |     &:focus:active,
 4 |     &:active,
 5 |     &.focus,
 6 |     &.focus.active,
 7 |     &.active,
 8 |     &.active:focus {
 9 |         outline: none;
10 |     }
11 | }
12 | 
13 | .inline-block {
14 |     display: inline-block;
15 | }
16 | 
17 | @function map-deep-get($map, $keys...) {
18 |     $value: $map;
19 |     @each $key in $keys {
20 |         $value: map-get($value, $key);
21 |     }
22 |     @return $value;
23 | }
24 | 


--------------------------------------------------------------------------------
/bower.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "name": "Winstrap",
 3 |     "version": "0.5.12",
 4 |     "main": [
 5 |         "src/scss/winstrap.scss"
 6 |     ],
 7 |     "homepage": "https://github.com/winjs/winstrap",
 8 |     "ignore": [
 9 |         "bower_components",
10 |         "node_modules"
11 |     ],
12 |     "authors": "",
13 |     "description": "Bootstrap Theme for Microsoft design language",
14 |     "license": "MIT",
15 |     "dependencies": {
16 |         "bootstrap-sass": "3.3.7"
17 |     }
18 | }
19 | 


--------------------------------------------------------------------------------
/src/scss/override/_panels.scss:
--------------------------------------------------------------------------------
 1 | .panel {
 2 |     box-shadow: none;
 3 | 
 4 |     .pager {
 5 |         margin: 0;
 6 | 
 7 |         li > a {
 8 |             padding: 0;
 9 |         }
10 | 
11 |         i[class*="glyph-"] {
12 |             font-size: 1.7em;
13 |         }
14 |     }
15 | 
16 |     .nav-pills > .dropdown > a {
17 |         border-left: none;
18 |         margin: 0 25px;
19 |         padding: 0;
20 |         color: $color-type-primary;
21 |         background: none;
22 |     }
23 | }
24 | 


--------------------------------------------------------------------------------
/src/doc/partials/pagination-pager.hbs:
--------------------------------------------------------------------------------
 1 | <nav>
 2 |     <ul class="pager">
 3 |         <li class="pager-prev">
 4 |             <a href="#" aria-label="Previous">
 5 |                 <i aria-hidden="true" class="glyph glyph-chevron-left-2"></i>
 6 |             </a>
 7 |         </li>
 8 |         <li class="pager-next">
 9 |             <a href="#" aria-label="Next">
10 |                 <i aria-hidden="true" class="glyph glyph-chevron-right-2"></i>
11 |             </a>
12 |         </li>
13 |     </ul>
14 | </nav>
15 | 


--------------------------------------------------------------------------------
/src/scss/win/_scaffolding.scss:
--------------------------------------------------------------------------------
 1 | h1, h2, h3, h4, h5, h6, p {
 2 |     margin: 0;
 3 | }
 4 | 
 5 | pre {
 6 |     max-width: 100%;
 7 |     overflow-x: auto;
 8 |     overflow-y: hidden;
 9 |     border: none;
10 |     border-left: 5px solid $pre-border-color;
11 |     margin: spacing(xxs) 0 0;
12 |     @include type(t8);
13 | }
14 | 
15 | blockquote {
16 |     padding: spacing(xxxs, -4) 0 spacing(xxxs, -4) spacing(xs, -3);
17 |     margin: spacing(xs) 0 0;
18 |     @include type(t7, set-line-height, responsive);
19 | }
20 | 


--------------------------------------------------------------------------------
/src/scss/win/_pager.scss:
--------------------------------------------------------------------------------
 1 | .pager {
 2 |     @extend .pagination;
 3 |     .pager-prev {
 4 |         @extend .pagination-prev;
 5 |         > a, > span {
 6 |             &:after {
 7 |                 content: attr(aria-label);
 8 |             }
 9 |         }
10 |     }
11 |     .pager-next {
12 |         @extend .pagination-next;
13 |         > a, > span {
14 |             &:before {
15 |                 content: attr(aria-label);
16 |             }
17 |         }
18 |     }
19 |     li:first-child a {
20 |         margin-left: spacing(n, -10);
21 |     }
22 | }
23 | 


--------------------------------------------------------------------------------
/src/doc/partials/side-nav-large-guidance.md.hbs:
--------------------------------------------------------------------------------
1 | * Use `.active` on nav link to denote current page/state in navigation
2 | * If you have a solid dark color or black background, add `.theme-alt` at the same level as `.side-navigation` to get white navigation links.
3 | * `.side-navigation` begins as `display: none;` at `$vp1` and becomes visible at `$vp3`
4 | * `a.navigation-btn` is visible on `$vp1` and `$vp2` to enable toggling visibility of `.side-navigation`
5 | * Use your own JavaScript to show/hide navigation on `$vp1` and `$vp2`, though you can use ours below as a reference


--------------------------------------------------------------------------------
/src/doc/partials/dismissible-flyout-guidance.md.hbs:
--------------------------------------------------------------------------------
1 | * Dismissible flyouts also require use of the `<a>` tag, not the `<button>` tag, and must include the `role="button"` and `tabindex` attributes.
2 | * The `data-theme` attribute can be set to the following values: `theme-default`, `theme-alt`, `theme-light` or `theme-dark`. It is applied to the `<a>` tag.
3 | * The `data-placement` attribute can be set to the following values: `top`, `right`, `bottom` or `left` and governs the placement of the flyout with respect to the entry point. It is applied to the `<a>` tag. The default value is `right`.
4 | 


--------------------------------------------------------------------------------
/src/doc/index.hbs:
--------------------------------------------------------------------------------
 1 | <div class="page-header">
 2 |     <div class="container">
 3 |         <div class="row">
 4 |             <div class="col-xs-24 col-sm-16">
 5 |                 <h2><span class="color-type-primary">{{ name }}</span> <span class="color-type-secondary">{{ version }}</span></h2>
 6 |                 <div class="type-sh2">The Bootstrap theme for Microsoft design language</div>
 7 |             	<div class="m-t-xs m-b-md"><a href="https://github.com/winjs/winstrap" class="btn btn-primary">Winstrap on GitHub</a></div>
 8 |             </div>
 9 |         </div>
10 |     </div>
11 | </div>
12 | 


--------------------------------------------------------------------------------
/src/doc/data/side-nav-large.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "category": "Mountain Ranges",
 3 |     "pages": [{
 4 |         "label": "The Cascades",
 5 |         "href": "cascades"
 6 |     }, {
 7 |         "label": "The Olympic Mountains",
 8 |         "href": "olympic-mountains",
 9 |         "active": true
10 |     }, {
11 |         "label": "The Sierra Nevadas",
12 |         "href": "sierra-nevadas"
13 |     }, {
14 |         "label": "The Rocky Mountains",
15 |         "href": "rocky-mountains"
16 |     }, {
17 |         "label": "Appalachian Mountains",
18 |         "href": "appalachain-mountains"
19 |     }]
20 | }
21 | 


--------------------------------------------------------------------------------
/handlebars-helpers/inArrayJson.js:
--------------------------------------------------------------------------------
 1 | //
 2 | // {{#inArrayJson}} handlebars helper
 3 | // {{#inArrayJson [{"foo":"bar"}] "bar"}} //true
 4 | // {{#inArrayJson [{"foo":"bar"}] "foo"}} //true
 5 | // {{#inArrayJson [{"foo":"bar"}] "boo"}} //false
 6 | 
 7 | module.exports.register = function(Handlebars, options) {
 8 |     options = options || {};
 9 |     Handlebars.registerHelper('inArrayJson', function(arr, attr, options) {
10 |         if (JSON.stringify(arr).indexOf(attr) > 0) {
11 |             return options.fn(this);
12 |         } else {
13 |             return options.inverse(this);
14 |         }
15 |     });
16 | };


--------------------------------------------------------------------------------
/src/doc/partials/dropdown/dropdown.hbs:
--------------------------------------------------------------------------------
 1 | <div class="dropdown{{#if theme}} {{ theme }}{{/if}}">
 2 |     <button {{#if id}}id="{{id}}" {{/if}}class="btn btn-dropdown dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" role="button" aria-expanded="false">
 3 |         Dropdown sample
 4 |         <span class="caret"></span>
 5 |     </button>
 6 |     <ul class="dropdown-menu" role="menu" aria-labelledby="dropdown-example">
 7 |         <li><a href="#">Item 1</a></li>
 8 |         <li><a href="#">Item 2</a></li>
 9 |         <li><a href="#" class="disabled">Disabled</a></li>
10 |     </ul>
11 | </div>


--------------------------------------------------------------------------------
/src/doc/partials/jumbotron-guidance.md.hbs:
--------------------------------------------------------------------------------
1 | * Do not put `.jumbotron` inside `.container` or `.container-fluid`. Instead, close the container before adding Jumbotron to the page, then follow it by opening a new container afterward if necessary.
2 | * You can use the `.jumbotron` and `.hero` classes interchangably. Microsoft sites call this component _Hero_ which is why the class is offered here.
3 | * Add theme classes `.theme-default`, `.theme-light`, `.theme-dark`, and `.theme-alt` at the `.jumbotron` level.
4 | * Each theme class has default background-colors because Bootsrap explicitly sets background color for `.jumbotron`.


--------------------------------------------------------------------------------
/src/doc/partials/form/form-select.hbs:
--------------------------------------------------------------------------------
 1 | <div class="form-group">
 2 |     <div class="combobox">
 3 |         <select class="form-control">
 4 |             <option>Lorem</option>
 5 |             <option>ipsum</option>
 6 |             <option>dolor</option>
 7 |             <option>sit</option>
 8 |             <option>amet</option>
 9 |         </select>
10 |     </div>
11 | </div>
12 | <div class="form-group">
13 |     <select multiple class="form-control">
14 |         <option>Lorem</option>
15 |         <option>ipsum</option>
16 |         <option>dolor</option>
17 |         <option>sit</option>
18 |         <option>amet</option>
19 |     </select>
20 | </div>
21 | 


--------------------------------------------------------------------------------
/src/doc/partials/spacer-sizes.hbs:
--------------------------------------------------------------------------------
 1 | <ul>
 2 |     <li><code>xxl</code>{{#if showPixelValues }} 84px{{/if}}</li>
 3 |     <li><code>xl</code>{{#if showPixelValues }} 72px{{/if}}</li>
 4 |     <li><code>lg</code>{{#if showPixelValues }} 64px{{/if}}</li>
 5 |     <li><code>md</code>{{#if showPixelValues }} 48px{{/if}}</li>
 6 |     <li><code>sm</code>{{#if showPixelValues }} 36px{{/if}}</li>
 7 |     <li><code>xs</code>{{#if showPixelValues }} 24px{{/if}}</li>
 8 |     <li><code>xxs</code>{{#if showPixelValues }} 12px{{/if}}</li>
 9 |     <li><code>xxxs</code>{{#if showPixelValues }} 8px{{/if}}</li>
10 |     <li><code>n</code>{{#if showPixelValues }} 0px{{/if}}</li>
11 | </ul>
12 | 


--------------------------------------------------------------------------------
/src/doc/partials/button-guidance.md.hbs:
--------------------------------------------------------------------------------
1 | * All buttons should be wrapped in a `<div class="btn-group">` in order to receive their proper vertical and horizontal spacing.
2 | * Use the `.btn-` classes on the `<a>`, `<button>`, or `<input>` tags.
3 | * `.btn-primary` indicates the primary action.
4 | * `.btn-secondary` indicates the default action.
5 | * `.btn-link` is used when the user needs a lighter-weight appearance.
6 | * `.btn-success`, `.btn-info`, `.btn-warning`, and `.btn-danger` are optional classes that come from Bootstrap.
7 | * The `disabled` attribute can be applied to the `<a>`, `<button>`, or `<input>` tags.
8 | * The `.active` class can be applied to the `<a>` tag to pre-select a button.


--------------------------------------------------------------------------------
/src/scss/win/_grid.scss:
--------------------------------------------------------------------------------
 1 | // Extend the Bootstrap grid with a small gutter option
 2 | $grid-gutter-width-sm: $grid-gutter-width / 5;
 3 | 
 4 | .row.row-sm {
 5 |     margin-left: (-.5 * $grid-gutter-width-sm);
 6 |     margin-right: (-.5 * $grid-gutter-width-sm);
 7 | 
 8 |     $i: 1;
 9 |     $list: ".col-xs-#{$i}, .col-sm-#{$i}, .col-md-#{$i}, .col-lg-#{$i}, .col-xl-#{$i}";
10 | 
11 |     @for $i from (1 + 1) through $grid-columns {
12 |         $list: "#{$list}, .col-xs-#{$i}, .col-sm-#{$i}, .col-md-#{$i}, .col-lg-#{$i}, .col-xl-#{$i}";
13 |     }
14 | 
15 |     #{$list} {
16 |         padding-left:  ($grid-gutter-width-sm / 2);
17 |         padding-right: ($grid-gutter-width-sm / 2);
18 |     }
19 | }
20 | 


--------------------------------------------------------------------------------
/src/doc/partials/side-nav-small-guidance.md.hbs:
--------------------------------------------------------------------------------
1 | * Use `.active` on `li.side-nav-c2` and it's child `a` nav link to denote current selected category and link
2 | * If you have a solid dark color or black background, add `.theme-alt` at the same level as `.side-navigation` to get white navigation links
3 | * Add `.panel` to `li.side-nav-c2` for full accordion operation
4 | * `.side-navigation` begins as `display: none;` at `$vp1` and becomes visible at `$vp3`
5 | * `a.navigation-btn` is visible on `$vp1` and `$vp2` to enable toggling visibility of `.side-navigation`
6 | * Use your own JavaScript to show/hide navigation on `$vp1` and `$vp2`, though you can use the example from `.side-navigation-large` above as a reference
7 | 


--------------------------------------------------------------------------------
/src/doc/partials/jumbotron-centered.hbs:
--------------------------------------------------------------------------------
 1 | <div class="jumbotron theme-dark">
 2 |     <div class="container">
 3 |         <div class="row">
 4 |             <div class="col-md-24 text-center">
 5 |                 <h3>This is a centered Heading 3</h3>
 6 |                 <div class="type-sh3">
 7 |                     And this is it's Subheading 3
 8 |                 </div>
 9 |                 <div class="col-md-12 col-md-offset-6">
10 |                     <div class="type-p3">You can create any Hero configuration with the combination of default settings and standard text/spacer classes. Take a look at the marukup to see it in action.</div>
11 |                 </div>
12 |             </div>
13 |         </div>
14 |     </div>
15 | </div>
16 | 


--------------------------------------------------------------------------------
/src/doc/partials/side-nav-large.hbs:
--------------------------------------------------------------------------------
 1 | {{#with side-nav-large}}
 2 | <a class="btn btn-lightweight no-outline navigation-btn">{{category}}</a>
 3 | <nav role="navigation" id="sidenav" class="nav side-navigation side-navigation-large theme-default">
 4 |     <div class="navigation-label">{{category}}</div>
 5 |     <button type="button" class="close" data-dismiss="side-navigation" aria-label="close">
 6 |         <i class="glyph glyph-cancel"></i>
 7 |     </button>
 8 |     <ul>
 9 |         {{#each pages}}
10 |         {{!-- using dumb links, but you can easily pass in data via JSON or some other method --}}
11 |         <li><a href="#"{{#if active}} class="active"{{/if}}>{{label}}</a></li>
12 |         {{/each}}
13 |     </ul>
14 | </nav>
15 | {{/with}}


--------------------------------------------------------------------------------
/src/doc/alerts.hbs:
--------------------------------------------------------------------------------
 1 | {{> alert-stack }}
 2 | 
 3 | <div class="page-header">
 4 |     <div class="container">
 5 |         <div class="row">
 6 |             <div class="col-xs-24">
 7 |                 <h1>Alerts</h1>
 8 | 
 9 |                 <ul class="nav nav-pills" data-scroll="smooth">
10 |                     <li role="presentation">
11 |                         <a href="#stack">Alert stack</a>
12 |                     </li>
13 |                     <li role="presentation">
14 |                         <a href="#inline">Inline alerts</a>
15 |                     </li>
16 |                 </ul>
17 |             </div>
18 |         </div>
19 |     </div>
20 | </div>
21 | 
22 | <div class="container">
23 | 
24 |     {{> alerts }}
25 | 
26 | </div>
27 | 


--------------------------------------------------------------------------------
/src/scss/win/_alerts.scss:
--------------------------------------------------------------------------------
 1 | // Stacked alerts on top of the screen
 2 | .alert-stack {
 3 |     // Added by Bootstrap Affix when scrolling
 4 |     &.affix {
 5 |         top: 0; // position is fixed
 6 |         width: 100%;
 7 |         z-index: 1000;
 8 |     }
 9 | 
10 |     .alert {
11 |         margin: 0 0 1px 0;
12 |         padding-right: ($grid-gutter-width / 2); // space for the close glyph
13 |         border-top: none;
14 |         border-right: none;
15 |         border-left: none;
16 | 
17 |         p {
18 |             @include type(t8);
19 |             margin-bottom: 0;
20 |             padding-top: 4px;
21 |         }
22 |     }
23 | 
24 |     //
25 |     // Color
26 |     //
27 | 
28 |     // ensure background is not transparent
29 |     background-color: $color-white;
30 | 
31 | }
32 | 


--------------------------------------------------------------------------------
/src/scss/win/mixins/_triangle.scss:
--------------------------------------------------------------------------------
 1 | @mixin triangle($dir, $base-width, $length, $color) {
 2 |     width: 0; height: 0;
 3 |     border: ($base-width / 2) solid transparent;
 4 | 
 5 |     @if $dir == top {
 6 | 
 7 |         border-top: none;
 8 |         border-bottom-width: $length;
 9 |         border-bottom-color: $color;
10 | 
11 |     } @else if $dir == right {
12 | 
13 |         border-right: none;
14 |         border-left-width: $length;
15 |         border-left-color: $color;
16 | 
17 |     } @else if $dir == bottom {
18 | 
19 |         border-top-width: $length;
20 |         border-bottom: none;
21 |         border-top-color: $color;
22 | 
23 |     } @else if $dir == left {
24 | 
25 |         border-right-width: $length;
26 |         border-left: none;
27 |         border-right-color: $color;
28 | 
29 |     }
30 | }
31 | 


--------------------------------------------------------------------------------
/src/doc/partials/form/form-guidance.md.hbs:
--------------------------------------------------------------------------------
1 | * Wrap labels and controls in `<div class="form-group">` for optimum spacing.
2 | * The following theme classes can be applied to the `<form>` or `<div class="form-group">` tags: `.theme-default`, `.theme-alt` or `.theme-dark`. Note: if `<button>` is inside `<form>` or `.form-group`, it does not automatically inherit the theme class.
3 | See documentation on [Buttons](./controls.html#buttons) for applying theme classes.
4 | * The `disabled` attribute can be applied to the `<input>` tags for all the form controls above.
5 | * To get an indeterminate checkbox, apply the `.checkbox-indeterminate` class to the `<input type="checkbox">` tag along with the required JavaScript.
6 | * The `checked` attribute is placed within the input tag of either checkbox or radio to indicate the it is pre-selected.
7 | 


--------------------------------------------------------------------------------
/src/doc/layouts/default.hbs:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <!-- This is the generated HTML file of the demo page -->
 5 |     <meta charset="utf-8" />
 6 | 
 7 |     <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
 8 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 9 | 
10 |     <title>{{ name }}</title>
11 | 
12 |     <link rel="stylesheet" href="css/winstrap.min.css?{{ version }}" />
13 |     <script src="js/vendor/jquery.min.js"></script>
14 |     <!--[if lt IE 9]>
15 |         <script src="js/vendor/html5shiv.min.js"></script>
16 |         <script src="js/vendor/respond.min.js"></script>
17 |     <![endif]-->
18 | </head>
19 | 
20 | <body>
21 |     {{> navbar }}
22 |     {{> changelog }}
23 | 
24 |     {{> body }}
25 | 
26 |     {{> back-to-top }}
27 | 
28 |     {{> scripts }}
29 | </body>
30 | </html>
31 | 


--------------------------------------------------------------------------------
/src/doc/colors.hbs:
--------------------------------------------------------------------------------
 1 | <div class="page-header">
 2 |     <div class="container">
 3 |         <div class="row">
 4 |             <div class="col-xs-24">
 5 |                 <h1>Colors</h1>
 6 | 
 7 |                 <ul class="nav nav-pills" data-scroll="smooth">
 8 |                     <li role="presentation">
 9 |                         <a href="#bootstrap-colors">Bootstrap colors</a>
10 |                     </li>
11 |                     <li role="presentation">
12 |                         <a href="#mdl-colors">MDL colors</a>
13 |                     </li>
14 |                     <li role="presentation">
15 |                         <a href="#mdl-alt-colors">MDL alt colors</a>
16 |                     </li>
17 |                 </ul>
18 |             </div>
19 |         </div>
20 |     </div>
21 | </div>
22 | 
23 | <div class="container">
24 |     {{> colors }}
25 | </div>
26 | 


--------------------------------------------------------------------------------
/src/doc/partials/navbar-doc.hbs:
--------------------------------------------------------------------------------
 1 | <div class="row">
 2 |     <div class="col-xs-24">
 3 |         <section class="section" id="buttons">
 4 |             <header class="section-header ">
 5 |                 <h1 class="section-title ">
 6 |                     <a name="navs">Navbar</a>
 7 |                 </h1>
 8 |             </header>
 9 |             {{> navbar-example }}
10 |             {{#markdown}}
11 | ```xml
12 | {{> navbar-example }}
13 | ```
14 |             {{/markdown}}
15 |             <div class="row">
16 |                 <div class="col-md-24">
17 |                     <div class="guidance guidance-usage m-t-xs">
18 |                         {{#markdown}}
19 | {{> navbar-guidance.md}}
20 |                         {{/markdown}}
21 |                     </div>
22 |                 </div>
23 |         </div>
24 |         </section>
25 |     </div>
26 | </div>


--------------------------------------------------------------------------------
/src/scss/override/_grid.scss:
--------------------------------------------------------------------------------
 1 | //
 2 | // Grid system
 3 | // --------------------------------------------------
 4 | 
 5 | 
 6 | // Container widths
 7 | //
 8 | // Set the container width and max-width, and override it for fixed navbars in media queries.
 9 | 
10 | .container {
11 |     width: 90%;
12 |     
13 |     @media (min-width: $screen-xs-min) and (max-width: $screen-xs-max) {
14 |         @include spacer(margin, horizontal, xxs);
15 |     }
16 |     
17 |     @media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) {
18 |         @include spacer(margin, horizontal, xs);
19 |     }
20 |     
21 |     @media (min-width: $screen-xl-min) {
22 |         max-width: $container-xl;
23 |     }
24 | }
25 | 
26 | // Extra Large grid
27 | //
28 | // Columns, offsets, pushes, and pulls for the large desktop device range.
29 | 
30 | @media (min-width: $screen-xl-min) {
31 |   @include make-grid(xl);
32 | }
33 | 


--------------------------------------------------------------------------------
/src/scss/override/_progress-bar.scss:
--------------------------------------------------------------------------------
 1 | .progress {
 2 |     box-shadow: none;
 3 |     height: 4px;
 4 |     background-color: $color-neutral-low;
 5 |     margin-bottom: 0; // Might need to look at this for vertical-spacing
 6 | 
 7 |     .progress-bar {
 8 |         @include transition(width 2s ease-in-out);
 9 |         
10 |         &:not(.progress-bar-success):not(.progress-bar-info):not(.progress-bar-warning):not(.progress-bar-danger) {
11 |             background-color: $color-accent;
12 |         }
13 |     }
14 | 
15 |     &.theme-alt,
16 |     &.theme-on-img-dark {
17 |         background-color: $color-neutral-low-alt;
18 | 
19 |         .progress-bar {
20 |             background-color: $color-accent;
21 |         }
22 |     }
23 |     &.theme-on-color,
24 |     &.theme-dark {
25 |         background-color: $color-neutral-low-alt;
26 | 
27 |         .progress-bar {
28 |             background-color: $color-vivid-high-alt;
29 |         }
30 |     }
31 | }
32 | 


--------------------------------------------------------------------------------
/src/scss/win/mixins/_animations.scss:
--------------------------------------------------------------------------------
 1 | // Cross-browser transition
 2 | @mixin transition($transitions...) {
 3 |     -webkit-transition: $transitions;
 4 |     transition: $transitions;
 5 | }
 6 | 
 7 | // Cross-browser keyframes animation
 8 | @mixin keyframes($animation-name) {
 9 |     @-webkit-keyframes #{$animation-name} {
10 |         @content;
11 |     }
12 |   
13 |     @keyframes #{$animation-name} {
14 |         @content;
15 |     }
16 | }
17 | 
18 | // Cross-browser animation
19 | @mixin animation($animation-values...) {
20 |     -webkit-animation: $animation-values;
21 |     animation: $animation-values;
22 | }
23 | 
24 | @mixin animation-delay($animation-values...) {
25 |     -webkit-animation-delay: $animation-values;
26 |     animation-delay: $animation-values;
27 | }
28 | 
29 | @mixin animation-timing-function($animation-values...) {
30 |     -webkit-animation-timing-function: $animation-values;
31 |     animation-timing-function: $animation-values;
32 | }
33 | 


--------------------------------------------------------------------------------
/src/scss/win/mixins/_colors.scss:
--------------------------------------------------------------------------------
 1 | // Return a lighter color
 2 | // 0% is the same color, 100% is white
 3 | @function tint($color, $percent, $alpha: 1) {
 4 |   @return rgba(mix(white, $color, $percent), $alpha);
 5 | }
 6 | 
 7 | // Return a darker color
 8 | // 0% is the same color, 100% is black
 9 | @function shade($color, $percent, $alpha: 1) {
10 |   @return rgba(mix(black, $color, $percent), $alpha);
11 | }
12 | 
13 | // Return an intensity of white
14 | // 0% is black, 100% is white
15 | @function white($intensity: 100%, $alpha: 1) {
16 |   @return rgba(tint(black, $intensity), $alpha);
17 | }
18 | 
19 | // Return an intensity of black
20 | // 0% is black, 100% is black
21 | @function black($intensity: 100%, $alpha: 1) {
22 |   @return rgba(shade(white, $intensity), $alpha);
23 | }
24 | 
25 | // Return a tint of gray
26 | // 0% is black, 100% is white
27 | @function gray($intensity: 50%, $alpha: 1) {
28 |   @return rgba(mix(white, black, $intensity), $alpha);
29 | }
30 | 
31 | 


--------------------------------------------------------------------------------
/src/doc/partials/pagination-base.hbs:
--------------------------------------------------------------------------------
 1 | <nav>
 2 |     <ul class="pagination">        
 3 |         <li class="pagination-prev">
 4 |             <a href="#" aria-label="Previous">
 5 |                 <i aria-hidden="true" class="glyph glyph-chevron-left-2"></i>
 6 |             </a>
 7 |         </li>
 8 | 
 9 |         <li><a href="#">1</a></li>
10 | 
11 |         <li class="pagination-ellipsis"><span>&hellip;</span></li>
12 | 
13 |         <li><a href="#">5</a></li>
14 |         <li><a href="#">6</a></li>
15 | 
16 |         <li class="active"><a href="#">7</a></li>
17 | 
18 |         <li><a href="#">8</a></li>
19 |         <li><a href="#">9</a></li>
20 | 
21 |         <li class="pagination-ellipsis"><span>&hellip;</span></li>
22 | 
23 |         <li><a href="#">15</a></li>
24 | 
25 |         <li class="pagination-next">
26 |             <a href="#" aria-label="Next">
27 |                 <i aria-hidden="true" class="glyph glyph-chevron-right-2"></i>
28 |             </a>
29 |         </li>
30 |     </ul>
31 | </nav>
32 | 


--------------------------------------------------------------------------------
/src/scss/win/_section.scss:
--------------------------------------------------------------------------------
 1 | // Section
 2 | .section {
 3 |     margin-bottom: 1.5em;
 4 | }
 5 | 
 6 | .section-header {
 7 |     position: relative;
 8 |     margin-bottom: 1.5em;
 9 | 
10 |     .section-title {
11 |         @include type(t2);
12 |         margin-bottom: 0;
13 |         color: $headings-color;
14 | 
15 |         a {
16 |             color: inherit;
17 | 
18 |             &:hover,
19 |             &:focus {
20 |                 text-decoration: none;
21 |                 color: $brand-primary;
22 |             }
23 |         }
24 |     }
25 | }
26 | 
27 | .section-header-aside {
28 |     position: absolute;
29 |     top: .25em;
30 |     right: ($grid-gutter-width / 2);
31 | }
32 | 
33 | .section-header-more {
34 |     margin-left: .5em;
35 | 
36 |     &.btn-link {
37 |         padding-right: 0;
38 |     }
39 | }
40 | 
41 | .section-body {
42 |     margin-bottom: 1.5em;
43 | }
44 | 
45 | .section-gallery {
46 |     .media {
47 |         margin-bottom: 2 * ($grid-gutter-width / 2);
48 |     }
49 | }
50 | 


--------------------------------------------------------------------------------
/src/doc/partials/navbar-guidance.md.hbs:
--------------------------------------------------------------------------------
1 | * The Winstrap navbar supports all of the options from the Bootstrap navbar.
2 | * Align nav links, forms, buttons, or text, using the `.navbar-left` or `.navbar-right` utility classes.
3 | * To use global and local navigation bars together (as seen above and on Microsoft web sites) use the standard bootstrap markup, wrapping `.container` or `.container-fluid` in `.navbar-global` or `.navbar-local`.
4 | * When using a single navigation bar, `.navigation-global` will give you a 48px navbar and `.navigation-local` will give you a 72px navbar.
5 | * Using `.compressed` with `.navbar-nav` will create extra space at `$vp4` if you have too many/too long nav items. If your nav still doesn't fit when using `.compressed` then consider using less nav items or renaming long nav items.
6 | * Themes require `.navbar-global` and `.navbar-local` and are applied as siblings (ex: `.navbar-global.theme-default`)
7 | * `.theme-dark` works with `$color-accent` and applies all the right interactive states accordingly.


--------------------------------------------------------------------------------
/src/scss/override/mixins/_buttons.scss:
--------------------------------------------------------------------------------
 1 | //Override bootstrap mixins for button variants
 2 | @mixin button-variant($color, $background, $border) {
 3 |   color: $color;
 4 |   background-color: $background;
 5 |   border-color: $border;
 6 | 
 7 |   &:hover,
 8 |   &:focus,
 9 |   &.focus,
10 |   .open > &.dropdown-toggle {
11 |     color: $color;
12 |     background-color: $background;
13 |     border-color: $color-neutral-high;
14 |   }
15 | 
16 |   //Active and disabled states for all buttons is the same
17 |   &:active,
18 |   &.active,
19 |   .open > &.dropdown-toggle {
20 |     background-image: none;
21 |     color: $color;
22 |     background-color: darken($background, 10%);
23 |     border-color: transparent;
24 |   }
25 | 
26 |   &.disabled,
27 |   &[disabled],
28 |   fieldset[disabled] & {
29 |     &,
30 |     &:hover,
31 |     &:focus,
32 |     &.focus,
33 |     &:active,
34 |     &.active {
35 |       color: $color-type-secondary;
36 |       background-color: $color-neutral-mid;
37 |       border-color: transparent;
38 |     }
39 |   }
40 | }
41 | 


--------------------------------------------------------------------------------
/src/scss/override/_tooltip.scss:
--------------------------------------------------------------------------------
 1 | .tooltip {
 2 |     @include type(t8);
 3 | 
 4 |     .tooltip-inner {
 5 |         min-width: 104px;
 6 |         padding: spacing(xxxs, -1) spacing(xxxs) spacing(xxxs);
 7 |         border-style: solid;
 8 |         border-width: 1px;
 9 |         text-align: left;
10 |     }
11 | 
12 |     .tooltip-arrow {
13 |         display: none;
14 |     }
15 | 
16 |     //
17 |     // Colors
18 |     //
19 | 
20 |     // Default theme and on light surface
21 |     &,
22 |     .theme-default + & {
23 |         .tooltip-inner {
24 |             border-color: $color-neutral-mid;
25 |             background-color: $color-bg-light-vivid-mid;
26 |             color: $color-type-primary;
27 |         }
28 |     }
29 | 
30 |     // Alt theme and on dark surface
31 |     .theme-alt + &,
32 |     .theme-on-color + &,
33 |     .theme-on-img-dark + &,
34 |     .theme-dark + & {
35 |         .tooltip-inner {
36 |             border-color: $color-neutral-mid-alt;
37 |             background-color: $color-bg-dark-vivid-mid;
38 |             color: $color-type-primary-alt;
39 |         }
40 |     }
41 | }
42 | 


--------------------------------------------------------------------------------
/src/doc/partials/breadcrumb.hbs:
--------------------------------------------------------------------------------
 1 | <section class="section" id="breadcrumb">
 2 |     <header class="section-header row">
 3 |         <h1 class="section-title col-xs-24">
 4 |             <a href="#breadcrumb">Breadcrumb</a>
 5 |         </h1>
 6 |     </header>
 7 | 
 8 |     <div class="row">
 9 |         <div class="col-xs-24">
10 |             <ol class="breadcrumb">
11 |                 <li><a href="#">Parent page</a></li>
12 |                 <li><a href="#">Child page</a></li>
13 |                 <li><a href="#">Section</a></li>
14 |                 <li class="active">Current</li>          
15 |             </ol>
16 | 
17 |             {{#markdown}}
18 | ```xml
19 | <ol class="breadcrumb">
20 |     <li><a href="#">Parent page</a></li>
21 |     <li><a href="#">Child page</a></li>
22 |     <li><a href="#">Section</a></li>
23 |     <li class="active">Current</li>
24 | </ol>
25 | ```
26 |             {{/markdown}}
27 |         </div>
28 | 
29 |         <div class="col-md-24">
30 |             <div class="guidance guidance-usage m-t-xs">
31 |                 {{#markdown}}
32 | {{> breadcrumb-guidance.md}}
33 |                 {{/markdown}}
34 |             </div>
35 |         </div>
36 |     </div>
37 | </section>
38 | 


--------------------------------------------------------------------------------
/src/scss/override/_breadcrumb.scss:
--------------------------------------------------------------------------------
 1 | .breadcrumb {
 2 |   margin: spacing(xs, -4) 0 spacing(xs, +1);
 3 |   @include type(t8);
 4 | 
 5 |   a {
 6 |     text-decoration: none;
 7 | 
 8 |     &:hover {
 9 |       text-decoration: underline;
10 |     }
11 |   }
12 |   
13 |   li {
14 |       margin: 0;
15 |   }
16 | 
17 |   > li + li:before {
18 |     content: '\005c';
19 |     display: inline-block;
20 |     padding: 0 spacing(xxxs) 0 spacing(xxxs, -4);
21 |     vertical-align: baseline;
22 |   }
23 | 
24 |   &,
25 |   &.theme-default,
26 |   &.theme-light {
27 | 
28 |     a {
29 |       &,
30 |       &:hover {
31 |         color: $color-accent-vivid-high;
32 |       }
33 |     }
34 | 
35 |     > li + li:before {
36 |       color: $color-vivid-low;
37 |     }
38 | 
39 |     &,
40 |     > li.active {
41 |       color: $color-type-primary;
42 |     }
43 |   }
44 | 
45 |   &.theme-alt,
46 |   &.theme-dark {
47 | 
48 |     a {
49 |       &,
50 |       &:hover {
51 |         color: $color-vivid-high-alt;
52 |       }
53 |     }
54 | 
55 |     > li + li:before {
56 |       color: $color-vivid-low-alt;
57 |     }
58 | 
59 |     &,
60 |     > li.active {
61 |       color: $color-type-secondary-alt;
62 |     }
63 |   }
64 | }
65 | 


--------------------------------------------------------------------------------
/src/doc/partials/section.hbs:
--------------------------------------------------------------------------------
 1 | <section class="section" id="section">
 2 |     <header class="section-header row">
 3 |         <h1 class="section-title col-xs-24">
 4 |             <a href="#section">Section</a>
 5 |         </h1>
 6 | 
 7 |         <div class="section-header-aside">
 8 |             <a href="#" class="btn btn-link section-header-more">More</a>
 9 |         </div>
10 |     </header>
11 | 
12 |     <div class="row">
13 |         <div class="col-xs-24">
14 |             <p>This is the generic structure to display a section with a header and view all link.</p>
15 | 
16 |             {{#markdown}}
17 | ```xml
18 | <section class="section">
19 |     <header class="section-header row">
20 |         <h2 class="section-title col-xs-24">
21 |             <a href="#">This is a header</a>
22 |         </h2>
23 | 
24 |         <div class="section-header-aside">
25 |             <a href="#" class="btn btn-link section-header-more">More</a>
26 |         </div>
27 |     </header>
28 | 
29 |     <div class="row">
30 |         <div class="col-xs-24">
31 |             <!-- Content of the section -->
32 |         </div>
33 |     </div>
34 | </section>
35 | ```
36 |             {{/markdown}}
37 |         </div>
38 |     </div>
39 | </section>
40 | 


--------------------------------------------------------------------------------
/src/doc/partials/side-nav.js.hbs:
--------------------------------------------------------------------------------
 1 | if ($('.side-navigation').length) {
 2 |     var closeBtn = $('.close');
 3 |     var sideAffix = $('.side-navigation-affix');
 4 |     var sideBtn = $('a.navigation-btn');
 5 |     var sideNav = $('.side-navigation-large');
 6 |     var sideSection = $('.navigation-section');
 7 |     var sideTopSpacing = 48;
 8 | 
 9 |     if ($('.side-navigation-small').length) {
10 |         sideNav = $('.side-navigation-small');
11 |     }
12 | 
13 |     var topOffset = sideSection.offset().top - sideTopSpacing;
14 |     var bottomOffset = $('body').height() - sideSection.offset().top - sideSection.height();
15 | 
16 |     sideAffix.affix({
17 |         offset: {
18 |             top: topOffset,
19 |             bottom: bottomOffset
20 |         }
21 |     });
22 | 
23 |     sideAffix.width(sideNav.parent().width());
24 | 
25 |     sideBtn.on('click', function(){
26 |         sideNav.css("display", "block");
27 |         sideSection.css("display", "none");
28 |         sideBtn.css("display", "none");
29 |         $('body').css("overflow", "hidden");
30 |     });
31 |     closeBtn.on('click', function(){
32 |         sideNav.css("display", "");
33 |         sideSection.css("display", "");
34 |         sideBtn.css("display", "inline-block");
35 |         $('body').css("overflow", "");
36 |     });
37 | }


--------------------------------------------------------------------------------
/src/doc/partials/type/captions.hbs:
--------------------------------------------------------------------------------
 1 | <div class="row" id="captions">
 2 |     <div class="col-xs-24">
 3 |         <div class="row">
 4 |             <div class="col-xs-24">
 5 |                 <h2>Captions</h2>
 6 |                 <p>Like other Winstrap type controls, captions can be applied using the type classes or the Sass mixin. Captions applied using the mixin are not responsive by default. Pass the <code>responsive</code> argument to make them responsive.</p>
 7 |             </div>
 8 |         </div>
 9 | 
10 |         <div class="row m-t-sm">
11 |             <div class="col-md-12">
12 |                 <p class="type-c1">Caption 1</p>
13 |                 <p class="type-c2">Caption 2</p>
14 |             </div>
15 | 
16 |             <div class="col-md-12">
17 |                 <div class="row">
18 |                     <div class="col-sm-24">
19 |                         {{#markdown}}
20 | ```xml
21 | <p class="type-c1">Caption 1</p>
22 | 
23 | <p class="type-c2">Caption 2</p>
24 | ```
25 |                         {{/markdown}}
26 |                     </div>
27 | 
28 |                     <div class="col-sm-24">
29 |                         {{#markdown}}
30 | ```scss
31 | .selector {
32 |     @include type-control(c[1-2], [responsive]);
33 | }
34 | ```
35 |                         {{/markdown}}
36 |                     </div>
37 |                 </div>
38 |             </div>
39 |         </div>
40 |     </div>
41 | </div>
42 | 


--------------------------------------------------------------------------------
/src/scss/override/_popover.scss:
--------------------------------------------------------------------------------
 1 | //
 2 | // Static resources
 3 | //
 4 | $popover-position: spacing(xxxs);
 5 | 
 6 | .popover {
 7 |     padding: 0;
 8 |     @include box-shadow(none);
 9 |     @include type(t7, set-line-height);
10 | 
11 |     &.top       { margin-top: -$popover-position; }
12 |     &.right     { margin-left: $popover-position; }
13 |     &.bottom    { margin-top: $popover-position; }
14 |     &.left      { margin-left: -$popover-position; }
15 | 
16 |     .arrow,
17 |     .popover-title {
18 |         display: none;
19 |     }
20 | 
21 |     .popover-content {
22 |         min-width: 128px;
23 |         padding: spacing(xxs, -2) spacing(xxs) spacing(xxs);
24 | 
25 |         .btn {
26 |             margin: spacing(xxs, 5) 0 spacing(xxs);
27 |             float: right;
28 |         }
29 |     }
30 | 
31 |     //
32 |     // Colors
33 |     //
34 | 
35 |     // Default theme and on light surface
36 |     &,
37 |     &.theme-default,
38 |     &.theme-light {
39 |         color: $color-type-primary;
40 |         background-color: $color-bg-light-vivid-mid;
41 |         border-color: $color-neutral-mid;
42 |     }
43 | 
44 |     // Alt theme and on dark surface
45 |     &.theme-alt,
46 |     &.theme-dark,
47 |     &.theme-on-color,
48 |     &.theme-on-img-dark {
49 |         color: $color-type-primary-alt;
50 |         background-color: $color-bg-dark-vivid-mid;
51 |         border-color: $color-neutral-mid-alt;
52 |     }
53 | }
54 | 


--------------------------------------------------------------------------------
/src/doc/partials/jumbotron.hbs:
--------------------------------------------------------------------------------
 1 | <div class="jumbotron theme-light">
 2 |     <div class="container">
 3 |         <div class="row">
 4 |             <div class="col-md-12 col-md-push-12 text-center">
 5 |                 <img class="img-responsive visible-xs-inline-block visible-sm-inline-block visible-md-inline-block visible-lg-inline-block visible-xl-inline-block" alt="" src="http://dri2.img.digitalrivercontent.net/Storefront/Site/msusa/images/promo/Xbox/en-US-Xbox-Mod-F-360-Console-Holiday15-mobile.png" data-source-index="2">
 6 |             </div>
 7 |             <div class="col-md-12 col-md-pull-12">
 8 |                 <div class="type-h3">
 9 |                     Xbox for Christmas
10 |                 </div>
11 |                 <div class="type-sh3">
12 |                     Make the holidays special with Xbox
13 |                 </div>
14 |                 <p>Espresso served best with whole milk. Dripper aromatic sugar beans steamed breve half and half. Pumpkin spice and kopi-luwak seasonal, mug, java lungo mazagran ristretto and body espresso. Macchiato doppio pumpkin spice sit strong bar shop lungo trifecta.</p>
15 |                 <div class="btn-group">
16 |                     <button class="btn btn-primary" href="#">Buy Xbox</button>
17 |                     <button class="btn btn-secondary" href="#">Read more</button>
18 |                 </div>
19 |             </div>
20 |         </div>
21 |     </div>
22 | </div>
23 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "winstrap",
 3 |   "description": "Winstrap is the official Bootstrap theme for Microsoft design language.",
 4 |   "repository": {
 5 |     "type": "git",
 6 |     "url": "git+https://github.com/winjs/winstrap.git"
 7 |   },
 8 |   "version": "0.5.13",
 9 |   "author": "Microsoft",
10 |   "contributors": [
11 |     "Frederic Perrin",
12 |     "Mathias Wendlinger",
13 |     "Romain Hottlet",
14 |     "Andy Seres",
15 |     "Rachel Nizhnikova",
16 |     "Miles Grover",
17 |     "Joe Day",
18 |     "Martin Lijanto"
19 |   ],
20 |   "homepage": "http://winstrap.azurewebsites.net",
21 |   "dependencies": {
22 |     "bootstrap-sass": "3.3.7",
23 |     "jquery": "^3.1.1"
24 |   },
25 |   "devDependencies": {
26 |     "grunt": "^1.0.1",
27 |     "grunt-assemble": "^0.5.0",
28 |     "grunt-bump": "^0.8.0",
29 |     "grunt-contrib-clean": "^1.0.0",
30 |     "grunt-contrib-connect": "^1.0.2",
31 |     "grunt-contrib-copy": "^1.0.0",
32 |     "grunt-contrib-cssmin": "^1.0.2",
33 |     "grunt-contrib-jshint": "^1.1.0",
34 |     "grunt-contrib-watch": "^1.0.0",
35 |     "grunt-file-exists": "^0.1.4",
36 |     "grunt-notify": "^0.4.5",
37 |     "grunt-sass": "^2.0.0",
38 |     "jshint-stylish": "^2.2.1"
39 |   },
40 |   "bugs": {
41 |     "url": "https://github.com/winjs/winstrap/issues"
42 |   },
43 |   "main": "index.js",
44 |   "keywords": [
45 |     "microsoft",
46 |     "windows",
47 |     "bootstrap",
48 |     "theme"
49 |   ],
50 |   "license": "MIT"
51 | }
52 | 


--------------------------------------------------------------------------------
/src/scss/win/_progress-bar.scss:
--------------------------------------------------------------------------------
 1 | .progress-bar {
 2 |   position: relative;
 3 |   width: 180px;
 4 |   float: inherit;
 5 |   display: inline-block;
 6 | 
 7 |   .progress-circle {
 8 |     position: absolute;
 9 |     top: 0;
10 |     left: 0;
11 |     width: 4px;
12 |     height: 4px;
13 |     opacity: 0;
14 |     @include animation(progress-bar-animation 3s infinite);
15 | 
16 |     &:after {
17 |       content: "\2022";
18 |       position: absolute;
19 |       font-size: 10px;
20 |       color: $color-accent;
21 |     }
22 | 
23 |     &:nth-child(2) { @include animation-delay(200ms); }
24 |     &:nth-child(3) { @include animation-delay(400ms); }
25 |     &:nth-child(4) { @include animation-delay(600ms); }
26 |     &:nth-child(5) { @include animation-delay(800ms); }
27 |   }
28 | 
29 |   &.progress-medium {
30 |     width: 296px;
31 |   }
32 | 
33 |   &.progress-large {
34 |     width: 100%;
35 |   }
36 | }
37 | 
38 | 
39 | @include keyframes(progress-bar-animation) {
40 |   0% {
41 |     @include translate(0px, 0px);
42 |     @include animation-timing-function(ease-in);
43 |     opacity: 0;
44 |   }
45 | 
46 |   30% {
47 |     @include translate(60px, 0px);
48 |     @include animation-timing-function(linear);
49 |     opacity: 1;
50 |   }
51 | 
52 |   70% {
53 |     @include translate(120px, 0px);
54 |     @include animation-timing-function(ease-out);
55 |     opacity: 1;
56 |   }
57 | 
58 |   100% {
59 |     @include translate(180px, 0px);
60 |     opacity: 0;
61 |   }
62 | }
63 | 


--------------------------------------------------------------------------------
/src/scss/win/_back-to-top.scss:
--------------------------------------------------------------------------------
 1 | //
 2 | // Static resources
 3 | //
 4 | $backtotop-button-size:  48px;
 5 | 
 6 | .back-to-top {
 7 |     visibility: hidden;
 8 |     width: $backtotop-button-size;
 9 |     height: $backtotop-button-size;
10 |     padding: spacing(xxs, -2) spacing(xxs) spacing(xxs);
11 |     opacity: 0;
12 |     @include translate(0, ($backtotop-button-size / 2));
13 |     @include transition(opacity .3s, transform .3s, -webkit-transform .3s);
14 | 
15 |     // Added by Bootstrap Affix when scrolling
16 |     &.affix {
17 |         visibility: visible;
18 |         opacity: 1;
19 |         z-index: $zindex-navbar-fixed; // same level as a fixed nav bar
20 |         right: spacing(xs);
21 |         bottom: spacing(xxs);
22 |         @include translate(0, 0);
23 |     }
24 | 
25 |     [class*="glyph-"] {
26 |         font-size: ($backtotop-button-size / 2);
27 |     }
28 | 
29 |     //
30 |     // Colors
31 |     //
32 |     &,
33 |     &:focus {
34 |         color: $color-vivid-low;
35 |         background: $color-dim-mid;
36 |     }
37 | 
38 |     &:hover {
39 |         color: $color-vivid-high;
40 |         background: $color-neutral-mid;
41 |     }
42 | 
43 |     // On dark surface
44 |     &.theme-alt {
45 |         &,
46 |         &:focus {
47 |             color: $color-vivid-low-alt;
48 |             background: $color-dim-mid-alt;
49 |         }
50 | 
51 |         &:hover {
52 |             color: $color-vivid-high-alt;
53 |             background: $color-neutral-mid-alt;
54 |         }
55 |     }
56 | }
57 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Winstrap
 2 | ##### The official Bootstrap theme for Windows
 3 | 
 4 | http://winstrap.azurewebsites.net/
 5 | 
 6 | ## Development
 7 | 
 8 | ### Install Node.js
 9 | 
10 | http://nodejs.org/download/
11 | 
12 | Make sure Node.js is available in your path.
13 | 
14 | ### Install Grunt and Bower
15 | 
16 | ```
17 | npm install -g grunt-cli
18 | npm install -g bower
19 | ```
20 | 
21 | ### Clone the repo
22 | 
23 | ```
24 | git clone https://github.com/winjs/winstrap.git
25 | ```
26 | 
27 | You should have a `winstrap` folder.
28 | 
29 | ### Installing npm packages
30 | 
31 | To install the required `npm` packages:
32 | 
33 | ```
34 | cd winstrap
35 | npm install
36 | ```
37 | 
38 | ## Building Winstrap
39 | 
40 | Just run:
41 | 
42 | ```
43 | grunt
44 | ```
45 | 
46 | This will compile the generated files into the `dist` folder.
47 | 
48 | ### Launching a local server
49 | 
50 | Just run this task to display the demo pages in your browser:
51 | 
52 | ```
53 | grunt server
54 | ```
55 | 
56 | Launch this URL in your brower: http://localhost:9001/
57 | 
58 | The changes you make to the Sass files `*.scss` or source documentation files `*.hbs` will be automatically recompiled. Just refresh your browser window.
59 | 
60 | - - -
61 | 
62 | This project has adopted the [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/). For more information see the [Code of Conduct FAQ](https://opensource.microsoft.com/codeofconduct/faq/) or contact [opencode@microsoft.com](mailto:opencode@microsoft.com) with any additional questions or comments.


--------------------------------------------------------------------------------
/src/doc/partials/glyphs.hbs:
--------------------------------------------------------------------------------
 1 | <section class="section" id="glyphs">
 2 |     <header class="section-header row">
 3 |         <h1 class="section-title col-xs-24">
 4 |             <a href="#glyphs">Glyphs</a>
 5 |         </h1>
 6 |     </header>
 7 | 
 8 |     <div class="row">
 9 |         <div class="col-xs-24">
10 |             <p>There are 259 free and open source glyphs included in Winstrap. Here are the available glyphs with their respective names. To display a glyph, add the <code>glyph</code> base class and the individual <code>glyph-*</code> class.</p>
11 | 
12 |             {{#markdown}}
13 | ```xml
14 | <span class="glyph glyph-[glyph-name]" aria-hidden="true"></span>
15 | ```
16 |             {{/markdown}}
17 | 
18 |             <p>Glyphs can also be displayed using the <code>glyph</code> Sass mixin:</p>
19 | 
20 |             {{#markdown}}
21 | ```scss
22 | .selector {
23 |     &::before {
24 |         @include glyph( [glyph-name] );
25 |     }
26 | }
27 | ```
28 |             {{/markdown}}
29 | 
30 |             <p>If you only need to get a glyph's unicode value, you can use the Sass function:</p>
31 | 
32 |             {{#markdown}}
33 | ```scss
34 | .selector {
35 |     font-family: "winjs-symbols";
36 | 
37 |     &::before {
38 |         content: glyph( [glyph-name] );
39 |     }
40 | }
41 | ```
42 |             {{/markdown}}
43 |         </div>
44 | 
45 |         {{#each glyphs.names}}
46 |         <div class="col-xs-6">
47 |             <p><span class="glyph glyph-{{name}}"></span></p>
48 |             <p><code>{{name}}</code></p>
49 |         </div>
50 |         {{/each}}
51 | 
52 |     </div>
53 | </section>
54 | 


--------------------------------------------------------------------------------
/src/doc/typography.hbs:
--------------------------------------------------------------------------------
 1 | <div class="page-header">
 2 |     <div class="container">
 3 |         <div class="row">
 4 |             <div class="col-xs-24">
 5 |                 <h1>Typography</h1>
 6 |                 <ul class="nav nav-pills" data-scroll="smooth">
 7 |                     <li role="presentation">
 8 |                         <a href="#fonts">Fonts</a>
 9 |                     </li>
10 |                     <li role="presentation">
11 |                         <a href="#sizes">Sizes</a>
12 |                     </li>
13 |                     <li role="presentation">
14 |                         <a href="#headings">Headings</a>
15 |                     </li>
16 |                     <li role="presentation">
17 |                         <a href="#subheadings">Subheadings</a>
18 |                     </li>
19 |                     <li role="presentation">
20 |                         <a href="#paragraphs">Paragraphs</a>
21 |                     </li>
22 |                     <li role="presentation">
23 |                         <a href="#captions">Captions</a>
24 |                     </li>
25 |                     <li role="presentation">
26 |                         <a href="#glyphs">Glyphs</a>
27 |                     </li>
28 |                 </ul>
29 |             </div>
30 |         </div>
31 |     </div>
32 | </div>
33 | 
34 | <div class="container">
35 |     {{> fonts }}
36 |     <hr />
37 |     {{> sizes }}
38 |     <hr />
39 |     {{> headings }}
40 |     <hr />
41 |     {{> subheadings }}
42 |     <hr />
43 |     {{> paragraphs }}
44 |     <hr />
45 |     {{> captions }}
46 |     <hr />
47 |     {{> glyphs }}
48 | </div>
49 | 


--------------------------------------------------------------------------------
/src/doc/partials/alert-stack.hbs:
--------------------------------------------------------------------------------
 1 | <div class="alert-stack">
 2 | 
 3 |     <div class="alert alert-warning alert-dismissible fade in" role="alert">
 4 |         <button type="button" class="close" data-dismiss="alert" aria-label="Close">
 5 |             <span aria-hidden="true"><i class="glyph glyph-cancel"></i></span>
 6 |         </button>
 7 | 
 8 |         <div class="container">
 9 |             <div class="row">
10 |                 <div class="col-md-20">
11 |                     <p>Alert example. If your playback didn’t start, it’s likely because you don’t have the Video app installed. Alert example. If your playback didn’t start, it’s likely because you don’t have the Video app installed.</p>
12 |                 </div>
13 |                 <div class="col-md-4">
14 |                     <p>
15 |                         <a href="#" class="pull-right hidden-xs hidden-sm">Click here</a>
16 |                         <a href="#" class="visible-xs-inline visible-sm-inline hidden-md">Click here</a>
17 |                     </p>
18 |                 </div>
19 |             </div>
20 |         </div>
21 |     </div>
22 | 
23 |     <div class="alert alert-warning alert-dismissible fade in" role="alert">
24 |         <button type="button" class="close" data-dismiss="alert" aria-label="Close">
25 |             <span aria-hidden="true"><i class="glyph glyph-cancel"></i></span>
26 |         </button>
27 | 
28 |         <div class="container">
29 |             <div class="row">
30 |                 <div class="col-xs-24">
31 |                     <p>Another stacked alert example.</p>
32 |                 </div>
33 |             </div>
34 |         </div>
35 |     </div>
36 | 
37 | </div>
38 | 


--------------------------------------------------------------------------------
/src/scss/override/_tables.scss:
--------------------------------------------------------------------------------
 1 | //override default bootstrap padding on table elements
 2 | .table > thead > tr > th, .table > thead > tr > td, .table > tbody > tr > th, .table > tbody > tr > td, .table > tfoot > tr > th, .table > tfoot > tr > td {
 3 |   padding: spacing(xxs, -2) spacing(xxs);
 4 | }
 5 | 
 6 | .table {
 7 | 
 8 |   tr th {
 9 |     @include type(t7);
10 |     color: $color-type-secondary;
11 |   }
12 | 
13 |   thead {
14 | 
15 |     tr th {
16 |       @include type(t9);
17 |       color: $color-type-secondary;
18 |       border-bottom: 1px solid $color-neutral-low;
19 |       padding-bottom: spacing(xxs, +1);
20 |     }
21 | 
22 |   }
23 | 
24 |   //Default Striped table
25 |   &.table-striped {
26 |     > tbody {
27 |       tr td, tr th {
28 |         border-bottom: 1px solid $color-dim-mid;
29 |       }
30 |       > tr:nth-of-type(odd) {
31 |         background: transparent;
32 |       }
33 |     }
34 |   }
35 | 
36 | 
37 |   //Alt theme
38 |   &.theme-alt {
39 |     background: $color-bg-dark-vivid-low;
40 |     color: $color-type-primary-alt;
41 | 
42 |     tr th {
43 |       color: $color-type-secondary-alt;
44 |     }
45 | 
46 |     thead {
47 |       tr th {
48 |         border-bottom: 1px solid $color-neutral-low-alt;
49 |       }
50 |     }
51 | 
52 |     &.table-striped {
53 |       > tbody {
54 |         tr td, tr th {
55 |           border-bottom: 1px solid $color-dim-mid-alt;
56 |         }
57 |       }
58 |     }
59 |   }
60 | 
61 | }
62 | 
63 | .table-responsive {
64 |   padding-bottom: spacing(xxs, +5);
65 | }
66 | //Add margin bottom for IE scrollbar
67 | @media (min-width: $screen-md-min) {
68 | 
69 |   .table-responsive {
70 |     padding-bottom: 0;
71 |   }
72 | 
73 | }
74 | 


--------------------------------------------------------------------------------
/src/doc/partials/side-nav-small.hbs:
--------------------------------------------------------------------------------
 1 | {{#with side-nav-small}}
 2 | {{#each sections}}
 3 | {{#inArrayJson pages 'active'}}
 4 | <a class="btn btn-lightweight no-outline navigation-btn">{{category}}</a>
 5 | {{/inArrayJson}}
 6 | {{/each}}
 7 | <ul role="navigation" id="sidenav-small" class="nav side-navigation side-navigation-small theme-default">
 8 |     <button type="button" class="close" data-dismiss="side-navigation" aria-label="close">
 9 |         <i class="glyph glyph-cancel"></i>
10 |     </button>
11 | 
12 |     {{#each sections}}
13 |     {{!-- a few notes about how the following lines function:
14 |     1. inArrayJson checks to see if a string exists in the stringified version of an array of JSON
15 |     2. pages is the list of c3 pages in the each section, (not the assemble.io build-time variable pages). Checking to see if basename (i.e., current page we're assembling) is in the array of pages under the current c2 section, then we want to draw their side-nav as expanded.
16 |     3. 'active' is merely a boolean value in the page object in side-nav-small.json
17 |     --}}
18 |     <li class="{{#inArrayJson pages 'active'}}active {{/inArrayJson}}side-nav-c2">
19 |         <a data-toggle="collapse" data-parent="#sidenav-small" href="#{{id}}" aria-expanded="{{#inArrayJson pages 'active'}}true{{else}}false{{/inArrayJson}}" aria-controls="#{{id}}">{{category}}</a>
20 |         <ul class="nav collapse{{#inArrayJson pages 'active'}} in{{/inArrayJson}}" id="{{id}}">
21 |             {{#each pages}}
22 |             {{!-- using dumb links, but you can easily pass in data via JSON or some other method --}}
23 |             <li><a href="#sidenav-small"{{#if active}} class="active"{{/if}}>{{label}}</a></li>
24 |             {{/each}}
25 |         </ul>
26 |     </li>
27 |     {{/each}}
28 | </ul>
29 | {{/with}}
30 | 


--------------------------------------------------------------------------------
/src/doc/partials/jumbotron-doc.hbs:
--------------------------------------------------------------------------------
 1 | <div class="container">
 2 |     <section class="section" id="jumbotron">
 3 |         <header class="section-header row">
 4 |             <h1 class="section-title col-xs-24">
 5 |                 <a href="#jumbotron">Jumbotron</a>
 6 |             </h1>
 7 |         </header>
 8 |         <div class="row">
 9 |             <div class="col-md-18">
10 |                 <p>Also known as <i>Hero</i>, Jumbotron is a lightweight container for different types of content meant to be emphasized at the top of a page. Heros and Jumbotrons jump outside the grid to allow full-bleed, edge to edge display.</p>
11 |                 <p>Jumbotron has basic defaults designed to be flexibile for different types of content. Use defaults with combinations of text and spacer classes to achieve specific designs (see centered example below).</p>
12 |             </div>
13 |     </section>
14 | </div>
15 | 
16 | <!-- Since Jumbotron is outside the grid... -->
17 | {{> jumbotron }}
18 | 
19 | <div class="container m-v-xs">
20 |     <div class="row">
21 |         <div class="col-xs-24">
22 |             {{#markdown}}
23 | ```xml
24 | {{> jumbotron }}
25 | ```
26 |             {{/markdown}}
27 |         </div>
28 |     </div>
29 | </div>
30 | 
31 | <!-- Since Jumbotron is outside the grid... -->
32 | {{> jumbotron-centered }}
33 | 
34 | <div class="container m-t-xs">
35 |     <div class="row">
36 |         <div class="col-xs-24">
37 |             {{#markdown}}
38 | ```xml
39 | {{> jumbotron-centered }}
40 | ```
41 |             {{/markdown}}
42 |         </div>
43 |         <div class="col-md-24">
44 |             <div class="guidance guidance-usage m-t-xs">
45 |                 {{#markdown}}
46 | {{> jumbotron-guidance.md}}
47 |                 {{/markdown}}
48 |             </div>
49 |         </div>
50 |     </div>
51 | </div>


--------------------------------------------------------------------------------
/src/scss/override/_alerts.scss:
--------------------------------------------------------------------------------
 1 | //
 2 | // Static Resources
 3 | //
 4 | $alert-glyph-base: 48px;
 5 | 
 6 | // Override
 7 | .alert {
 8 |     position: relative;
 9 |     border: none;
10 |     padding: spacing(xxs) spacing(xxs) spacing(xxs) spacing(xs, -4);
11 |     min-height: $alert-glyph-base;
12 | 
13 |     &.alert-dismissible {
14 |         padding-right: spacing(md);
15 |     }
16 | 
17 |     .alert-title {
18 |         @include type(t6, set-line-height);
19 |         margin-bottom: spacing(xxs, -7);
20 |         margin-top: spacing(xxs, -11);
21 |     }
22 | 
23 |     p {
24 |         @include type(t8, set-line-height);
25 |         margin: 0;
26 |         padding: spacing(xxs, -8) 0 0;
27 |     }
28 | 
29 |     .close {
30 |         position: absolute;
31 |         top: 0;
32 |         right: 0;
33 |         z-index: 1;
34 |         line-height: 1;
35 |         opacity: 1;
36 |         height: $alert-glyph-base;
37 |         width: $alert-glyph-base;
38 | 
39 |         span {
40 |             font-size: 16px;
41 |             top: -5px;
42 |             position: relative;
43 |         }
44 |     }
45 | 
46 |     &.with-glyph {
47 |         padding-left: spacing(md)
48 |     }
49 | 
50 |     .alert-glyph {
51 |         position: absolute;
52 |         top: spacing(xxs);
53 |         left: spacing(xxs);
54 |         width: $alert-glyph-base / 2;
55 |         height: $alert-glyph-base /2;
56 |         font-size: $alert-glyph-base / 2;
57 |     }
58 | 
59 |     // Color
60 |     color: $color-type-primary;
61 | 
62 |     &.alert-info {
63 |         background-color: $color-bg-light-vivid-mid;
64 |         color: $color-type-primary;
65 |     }
66 | 
67 |     &.alert-warning {
68 |         background-color: rgba($color-lightyellow, .4);
69 |     }
70 | 
71 |     &.alert-danger {
72 |         background-color: rgba($color-alert, .3);
73 |     }
74 | }
75 | 


--------------------------------------------------------------------------------
/src/doc/partials/labels.hbs:
--------------------------------------------------------------------------------
 1 | <section class="section" id="labels">
 2 |     <header class="section-header row">
 3 |         <h1 class="section-title col-xs-24">
 4 |             <a href="#labels">Labels</a>
 5 |         </h1>
 6 |     </header>
 7 | 
 8 |     <div class="row">
 9 |         <div class="col-xs-24">
10 |             <p>Labels inside headings</p>
11 |                     <h1>This is h1 <span class="label label-default">Default</span></h1>
12 |                     <h2>This is h2 <span class="label label-primary">Primary</span></h2>
13 |                     <h3>This is h3 <span class="label label-success">Success</span></h3>
14 |                     <h4>This is h4 <span class="label label-info">Info</span></h4>
15 |                     <h5>This is h5 <span class="label label-warning">Warning</span></h5>
16 |                     <h6>This is h6 <span class="label label-danger">Danger</span></h6>
17 |             <p>
18 |                 Labels inside a line of text
19 |                     <span class="label label-default">Default</span>
20 |                     <span class="label label-primary">Primary</span>
21 |                     <span class="label label-success">Success</span>
22 |                     <span class="label label-info">Info</span>
23 |                     <span class="label label-warning">Warning</span>
24 |                     <span class="label label-danger">Danger</span>
25 |             </p>
26 | 
27 |             {{#markdown}}
28 | ```xml
29 | <span class="label label-default">Default</span>
30 | <span class="label label-primary">Primary</span>
31 | <span class="label label-success">Success</span>
32 | <span class="label label-info">Info</span>
33 | <span class="label label-warning">Warning</span>
34 | <span class="label label-danger">Danger</span>
35 | ```
36 |             {{/markdown}}
37 | 
38 |         </div>
39 |     </div>
40 | </section>
41 | 


--------------------------------------------------------------------------------
/src/scss/win/mixins/_spacer.scss:
--------------------------------------------------------------------------------
 1 | // Spacer function
 2 | @function spacing($size, $shim: 0) {
 3 |     @return (map-get($spacer-sizes, $size) + $shim);
 4 | }
 5 | 
 6 | // Spacer mixin
 7 | @mixin spacer($prop: margin, $direction: vertical, $size: xxs) {
 8 | 
 9 |     @if $direction == vertical {
10 |         #{$prop}-top:           spacing($size) !important;
11 |         #{$prop}-bottom:        spacing($size) !important;
12 | 
13 |     } @else if $direction == horizontal {
14 |         #{$prop}-left:          spacing($size) !important;
15 |         #{$prop}-right:         spacing($size) !important;
16 | 
17 |     } @else if $direction == all {
18 |         #{$prop}:               spacing($size) !important;
19 | 
20 |     } @else {
21 |         #{$prop}-#{$direction}: spacing($size) !important;
22 |     }
23 | }
24 | 
25 | // Spacer classes
26 | @each $size, $value in $spacer-sizes {
27 |     // Margins
28 |     .m-v-#{$size}   { @include spacer(margin, vertical, $size); }
29 |     .m-h-#{$size}   { @include spacer(margin, horizontal, $size); }
30 |     .m-t-#{$size}   { @include spacer(margin, top, $size); }
31 |     .m-r-#{$size}   { @include spacer(margin, right, $size); }
32 |     .m-b-#{$size}   { @include spacer(margin, bottom, $size); }
33 |     .m-l-#{$size}   { @include spacer(margin, left, $size); }
34 |     .m-#{$size}     { @include spacer(margin, all, $size); }
35 | 
36 |     // Paddings
37 |     .p-v-#{$size}   { @include spacer(padding, vertical, $size); }
38 |     .p-h-#{$size}   { @include spacer(padding, horizontal, $size); }
39 |     .p-t-#{$size}   { @include spacer(padding, top, $size); }
40 |     .p-r-#{$size}   { @include spacer(padding, right, $size); }
41 |     .p-b-#{$size}   { @include spacer(padding, bottom, $size); }
42 |     .p-l-#{$size}   { @include spacer(padding, left, $size); }
43 |     .p-#{$size}     { @include spacer(padding, all, $size); }
44 | }
45 | 


--------------------------------------------------------------------------------
/src/doc/partials/dropdown-doc.hbs:
--------------------------------------------------------------------------------
 1 | <section class="section row" id="dropdown">
 2 |     <header class="section-header">
 3 |         <h1 class="section-title col-xs-24">
 4 |             <a href="#dropdown">Dropdown</a>
 5 |         </h1>
 6 |     </header>
 7 |     <div class="col-xs-24">
 8 |         <p>
 9 |             This is a simple dropdown menu with links inside. The dropdown code has specific accessibility settings.
10 |         </p>
11 | 
12 |         <h4>Default</h4>
13 |         <div class="btn-group">
14 |             {{> dropdown id="dropdown-1" }}
15 |         </div>
16 |     </div>
17 |     <div class="col-xs-24 col-sm-12 col-md-6">
18 |         <h4>On color</h4>
19 |         <div class="color-blue p-v-xxs p-h-xxs">
20 |             {{> dropdown id="dropdown-2" theme="theme-on-color" }}
21 |         </div>
22 |     </div>
23 |     <div class="col-xs-24 col-sm-12 col-md-6">
24 |         <h4>Alt-theme</h4>
25 |         <div class="color-black p-v-xxs p-h-xxs">
26 |             {{> dropdown id="dropdown-3" theme="theme-alt" }}
27 |         </div>
28 |     </div>
29 |     <div class="col-xs-24 col-sm-12 col-md-6">
30 |         <h4>On light image</h4>
31 |         <div class="example-light-image-bg p-v-xxs p-h-xxs">
32 |             {{> dropdown id="dropdown-4" theme="theme-light" }}
33 |         </div>
34 |     </div>
35 |     <div class="col-xs-24 col-sm-12 col-md-6">
36 |         <h4>On dark image</h4>
37 |         <div class="example-dark-image-bg p-v-xxs p-h-xxs">
38 |             {{> dropdown id="dropdown-5" theme="theme-dark" }}
39 |         </div>
40 |     </div>
41 |     <div class="col-xs-24">
42 |         {{#markdown}}
43 | ```xml
44 | {{> dropdown id="example-dropdown" }}
45 | ```
46 |         {{/markdown}}
47 |     </div>
48 |     <div class="col-md-24">
49 |         <div class="guidance guidance-usage m-t-xs">
50 |             {{#markdown}}
51 | {{> dropdown-guidance.md}}
52 |             {{/markdown}}
53 |         </div>
54 |     </div>
55 | </section>
56 | 


--------------------------------------------------------------------------------
/src/doc/partials/dropdown/browser-select.hbs:
--------------------------------------------------------------------------------
 1 | <select class="form-control">
 2 |     <optgroup label="A">
 3 |       <option>Alabama</option>
 4 |       <option>Alaska</option>
 5 |       <option>Arizona</option>
 6 |       <option>Arkansas</option>
 7 |     </optgroup>
 8 |     <optgroup label="C">
 9 |       <option>California</option>
10 |       <option>Colorado</option>
11 |       <option>Connecticut</option>
12 |     </optgroup>
13 |     <optgroup label="D" disabled="">
14 |         <option>Delaware</option>
15 |     </optgroup>
16 |   <option>Florida</option>
17 |   <option>Georgia</option>
18 |   <option>Hawaii</option>
19 |   <option>Idaho</option>
20 |   <option>Illinois</option>
21 |   <option>Indiana</option>
22 |   <option>Iowa</option>
23 |   <option>Kansas</option>
24 |   <option>Kentucky</option>
25 |   <option>Louisiana</option>
26 |   <option>Maine</option>
27 |   <option>Maryland</option>
28 |   <option>Massachusetts</option>
29 |   <option>Michigan</option>
30 |   <option>Minnesota</option>
31 |   <option>Mississippi</option>
32 |   <option>Missouri</option>
33 |   <option>Montana</option>
34 |   <option>Nebraska</option>
35 |   <option>Nevada</option>
36 |   <option>New Hampshire</option>
37 |   <option>New Jersey</option>
38 |   <option>New Mexico</option>
39 |   <option>New York</option>
40 |   <option>North Carolina</option>
41 |   <option>North Dakota</option>
42 |   <option>Ohio</option>
43 |   <option>Oklahoma</option>
44 |   <option>Oregon</option>
45 |   <option>Pennsylvania</option>
46 |   <option>Rhode Island</option>
47 |   <option>South Carolina</option>
48 |   <option>South Dakota</option>
49 |   <option>Tennessee</option>
50 |   <option>Texas</option>
51 |   <option>Utah</option>
52 |   <option>Vermont</option>
53 |   <option>Virginia</option>
54 |   <option>Washington</option>
55 |   <option>West Virginia</option>
56 |   <option>Wisconsin</option>
57 |   <option>Wyoming</option>
58 | </select>


--------------------------------------------------------------------------------
/src/doc/partials/back-to-top-doc.hbs:
--------------------------------------------------------------------------------
 1 | <section class="section" id="back-to-top">
 2 |     <header class="section-header row">
 3 |         <h1 class="section-title col-xs-24">
 4 |             <a href="#back-to-top">Back to top</a>
 5 |         </h1>
 6 |     </header>
 7 | 
 8 |     <div class="row">
 9 |         <div class="col-md-12">
10 |             <p>
11 |                 This link uses <a href="http://getbootstrap.com/javascript/#affix">Bootstrap's affix</a> and should be a direct child of the body of the HTML document. It should be near the end.
12 |             </p>
13 | 
14 |             {{#markdown}}
15 | ```xml
16 | {{> back-to-top showOptions=true }}
17 | ```
18 |             {{/markdown}}
19 | 
20 |             <div class="guidance guidance-usage m-t-xs">
21 |                 {{#markdown}}
22 | {{> back-to-top-guidance.md}}
23 |                 {{/markdown}}
24 |             </div>
25 |         </div>
26 | 
27 |         <div class="col-md-12">
28 |             <p>
29 |                 This component must be initialized with JavaScript.
30 |                 It is displayed when the user has scrolled two times to viewport height.
31 |             </p>
32 | 
33 |             {{#markdown}}
34 | ```javascript
35 | $(function () {
36 |     var backToTop = $('.back-to-top'),
37 |         threshold = 2 * $(window).height();
38 | 
39 |     // Displayed when we've scrolled 2x the viewport height
40 |     if (backToTop.length === 0 ||
41 |         $(document).height() < threshold) {
42 |         return;
43 |     }
44 | 
45 |     backToTop.affix({
46 |         offset: {
47 |             top: threshold
48 |         }
49 |     });
50 | 
51 |     // Smooth scroll to top
52 |     backToTop.click(function () {
53 |         $('html, body').animate({ scrollTop: 0 }, {
54 |             duration: 750,
55 |             easing: 'swing'
56 |         });
57 | 
58 |         return false; // prevent default href
59 |     });
60 | });
61 | ```
62 |             {{/markdown}}
63 |         </div>
64 |     </div>
65 | </section>
66 | 


--------------------------------------------------------------------------------
/src/doc/partials/type/subheadings.hbs:
--------------------------------------------------------------------------------
 1 | <div class="row" id="subheadings">
 2 |     <div class="col-xs-24">
 3 |         <div class="row">
 4 |             <div class="col-xs-24">
 5 |                 <h2>Subheadings</h2>
 6 |                 <p>There are six Winstrap subheading controls. We recommend pairing  <code>type-h1</code> with <code>type-sh1</code>, <code>type-h2</code> with <code>type-sh2</code>, etc.</p>
 7 |                 <p>You can also apply subheadings using the Sass mixin. Subheadings applied using the mixin are not responsive by default. Pass the <code>responsive</code> argument to make them responsive.</p>
 8 |             </div>
 9 |         </div>
10 | 
11 |         <div class="row m-t-sm">
12 |             <div class="col-md-12">
13 |                 <div class="type-sh1">Subheading 1</div>
14 |                 <div class="type-sh2">Subheading 2</div>
15 |                 <div class="type-sh3">Subheading 3</div>
16 |                 <div class="type-sh4">Subheading 4</div>
17 |                 <div class="type-sh5">Subheading 5</div>
18 |                 <div class="type-sh6">Subheading 6</div>
19 |             </div>
20 | 
21 |             <div class="col-md-12">
22 |                 <div class="row">
23 |                     <div class="col-sm-24">
24 |                         {{#markdown}}
25 | ```xml
26 | <div class="type-sh1">Subheading 1</div>
27 | 
28 | <div class="type-sh2">Subheading 2</div>
29 | 
30 | <div class="type-sh3">Subheading 3</div>
31 | 
32 | <div class="type-sh4">Subheading 4</div>
33 | 
34 | <div class="type-sh5">Subheading 5</div>
35 | 
36 | <div class="type-sh6">Subheading 6</div>
37 | ```
38 |                         {{/markdown}}
39 |                     </div>
40 | 
41 |                     <div class="col-sm-24">
42 |                         {{#markdown}}
43 | ```scss
44 | .selector {
45 |     @include type-control(sh[1-6], [responsive]);
46 | }
47 | ```
48 |                         {{/markdown}}
49 |                     </div>
50 |                 </div>
51 |             </div>
52 |         </div>
53 |     </div>
54 | </div>
55 | 


--------------------------------------------------------------------------------
/src/scss/winstrap.scss:
--------------------------------------------------------------------------------
 1 | /*!
 2 |  * Bootstrap v3.3.7 (http://getbootstrap.com)
 3 |  * Copyright 2011-2016 Twitter, Inc.
 4 |  * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 5 |  */
 6 | @charset "UTF-8";
 7 | 
 8 | // Settings
 9 | @import "win/resources";
10 | @import "win/colors";
11 | @import "win/variables";
12 | @import "override/variables";
13 | 
14 | // New mixins and mixins that completely replace
15 | // bootstrap mixins
16 | @import "win/mixins/colors";
17 | @import "win/mixins/animations";
18 | @import "win/mixins/triangle";
19 | @import "win/mixins/spacer";
20 | @import "win/mixins/glyphs";
21 | @import "override/mixins/tab-focus";
22 | 
23 | // Base
24 | @import "win/grid";
25 | @import "override/bootstrap";
26 | @import "win/glyphs";
27 | @import "win/utilities";
28 | @import "win/type";
29 | 
30 | // Mixins that override bootstrap mixins
31 | @import "override/mixins/buttons";
32 | 
33 | // Overridden components
34 | @import "override/grid";
35 | @import "override/scaffolding";
36 | @import "override/alerts";
37 | @import "override/breadcrumb";
38 | @import "override/buttons";
39 | @import "override/dropdown";
40 | @import "override/forms";
41 | @import "override/jumbotron";
42 | @import "override/labels";
43 | @import "override/modal";
44 | @import "override/navbar";
45 | @import "override/navs";
46 | @import "override/pagination";
47 | @import "override/panels";
48 | @import "override/popover";
49 | @import "override/progress-bar";
50 | @import "override/tables";
51 | @import "override/tooltip";
52 | 
53 | // New components
54 | @import "win/scaffolding";
55 | @import "win/alerts";
56 | @import "win/back-to-top";
57 | @import "win/buttons";
58 | @import "win/lists";
59 | @import "win/media";
60 | @import "win/pager";
61 | @import "win/pagination";
62 | @import "win/panels";
63 | @import "win/progress-bar";
64 | @import "win/progress-ring";
65 | @import "win/rating";
66 | @import "win/section";
67 | @import "win/side-navigation";
68 | 
69 | // Layout
70 | @import "win/main";
71 | @import "override/page";
72 | 
73 | // Pages
74 | @import "win/doc";
75 | 


--------------------------------------------------------------------------------
/src/doc/partials/type/headings.hbs:
--------------------------------------------------------------------------------
 1 | <div class="row" id="headings">
 2 |     <div class="col-xs-24">
 3 |         <div class="row">
 4 |             <div class="col-xs-24">
 5 |                 <h2>Headings</h2>
 6 |                 <p>Winstrap headings are responsive. By default, <code>&lt;h1&gt;</code> to <code>&lt;h6&gt;</code> are mapped to Winstrap heading controls.</p>
 7 |                 <p>You can also apply headings using the Sass mixin. Headings applied using the mixin are not responsive by default. Pass the <code>responsive</code> argument to make them responsive.</p>
 8 |             </div>
 9 |         </div>
10 | 
11 |         <div class="row m-t-sm">
12 |             <div class="col-md-12">
13 |                 <h1>Heading 1</h1>
14 |                 <h2>Heading 2</h2>
15 |                 <h3>Heading 3</h3>
16 |                 <h4>Heading 4</h4>
17 |                 <h5>Heading 5</h5>
18 |                 <h6>Heading 6</h6>
19 |             </div>
20 | 
21 |             <div class="col-md-12">
22 |                 <div class="row">
23 |                     <div class="col-sm-24">
24 |                         {{#markdown}}
25 | ```xml
26 | <h1>Heading 1</h1>
27 | <div class="h1">...</div>
28 | <div class="type-h1">...</div>
29 | 
30 | <h2>Heading 2</h2>
31 | <div class="h2">...</div>
32 | <div class="type-h2">...</div>
33 | 
34 | <h2>Heading 3</h2>
35 | <div class="h3">...</div>
36 | <div class="type-h3">...</div>
37 | 
38 | <h2>Heading 4</h2>
39 | <div class="h4">...</div>
40 | <div class="type-h4">...</div>
41 | 
42 | <h2>Heading 5</h2>
43 | <div class="h5">...</div>
44 | <div class="type-h5">...</div>
45 | 
46 | <h2>Heading 6</h2>
47 | <div class="h6">...</div>
48 | <div class="type-h6">...</div>
49 | ```
50 |                         {{/markdown}}
51 |                     </div>
52 | 
53 |                     <div class="col-sm-24">
54 |                         {{#markdown}}
55 | ```scss
56 | .selector {
57 |     @include type-control(h[1-6], [responsive]);
58 | }
59 | ```
60 |                         {{/markdown}}
61 |                     </div>
62 |                 </div>
63 |             </div>
64 |         </div>
65 |     </div>
66 | </div>
67 | 


--------------------------------------------------------------------------------
/src/scss/win/_panels.scss:
--------------------------------------------------------------------------------
 1 | .panel-clean {
 2 |     border: none;
 3 | 
 4 |     .panel-heading,
 5 |     .panel-footer {
 6 |         @include clearfix();
 7 |         padding: 15px 20px;
 8 |         background: $color-dim-mid;
 9 | 
10 |         p {
11 |             margin-bottom: 0;
12 |         }
13 |     }
14 | 
15 |     .panel-heading + .panel-heading {
16 |         padding-top: 0;
17 |         padding-bottom: 10px;
18 |     }
19 | 
20 |     .panel-body {
21 |         padding: 25px 0 0;
22 |     }
23 | 
24 |     .panel-footer {
25 |         border: none;
26 |     }
27 | 
28 |     .nav-pills > li > a {
29 |         padding: 0 1em;
30 |         border-left: 1px solid $color-vivid-mid;
31 |         color: $color-type-primary;
32 |         background: none;
33 | 
34 |         &:hover {
35 |             color: $brand-primary;
36 |             background: none;
37 |             text-decoration: underline;
38 |         }
39 |     }
40 | 
41 |     .nav-pills > li:first-child > a {
42 |         padding-left: 0;
43 |         border-left: none;
44 |     }
45 | 
46 |     .nav-pills > li.active > a {
47 |         color: $brand-primary;
48 |         text-decoration: none;
49 |         cursor: default;
50 |     }
51 | }
52 | 
53 | .panel-line {
54 |     margin: 0 0 15px 0;
55 |     border: none;
56 |     border-top: 1px solid $color-neutral-mid;
57 | 
58 |     .panel-heading,
59 |     .panel-footer {
60 |         padding: 20px 0;
61 |         background: none;
62 |     }
63 | 
64 |     .panel-body {
65 |         padding: 0;
66 |     }
67 | 
68 |     .panel-footer {
69 |         .glyph-flag,
70 |         .glyph-completed {
71 |             font-size: 1.2em;
72 |         }
73 |     }
74 | 
75 |     .list-inline {
76 |         display: inline;
77 | 
78 |         li {
79 |             padding: 0 0 0 3em;
80 | 
81 |             &.active {
82 |                 a {
83 |                     color: $color-type-secondary;
84 |                 }
85 |             }
86 | 
87 |             .glyph-completed {
88 |                 color: $color-type-primary;
89 |             }
90 |         }
91 | 
92 | 
93 |     }
94 | 
95 |     .rating-inline {
96 |         margin-right: 1em;
97 |     }
98 | }
99 | 


--------------------------------------------------------------------------------
/src/doc/data/side-nav-small.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "sections": [{
 3 |         "category": "Father John Misty",
 4 |         "id": "father-john-misty",
 5 |         "pages":[{
 6 |             "label": "Fear Fun",
 7 |             "href": "fear-fun"
 8 |         }, {
 9 |             "label": "I Love You Honeybear",
10 |             "href": "i-love-you-honeybear",
11 |             "active": true
12 |         }]
13 |     }, {
14 |         "category": "The National",
15 |         "id": "the-national",
16 |         "pages":[{
17 |             "label": "The National",
18 |             "href": "the-national"
19 |         }, {
20 |             "label": "Songs for Dirty Lovers",
21 |             "href": "songs-for-dirty-lovers"
22 |         }, {
23 |             "label": "Alligator",
24 |             "href": "alligator"
25 |         }, {
26 |             "label": "Boxer",
27 |             "href": "boxer"
28 |         }, {
29 |             "label": "High Violet",
30 |             "href": "high-violet"
31 |         }, {
32 |             "label": "Trouble Will Find Me",
33 |             "href": "trouble-will-find-me"
34 |         }]
35 |     }, {
36 |         "category": "The Strokes",
37 |         "id": "the-strokes",
38 |         "pages":[{
39 |             "label": "Is this it?",
40 |             "href": "is-this-it"
41 |         }, {
42 |             "label": "Room on Fire",
43 |             "href": "room-on-fire"
44 |         }, {
45 |             "label": "First Impressions of Earth",
46 |             "href": "first-impressions-of-earth"
47 |         }, {
48 |             "label": "Angels",
49 |             "href": "angels"
50 |         }, {
51 |             "label": "Comedown Machine",
52 |             "href": "comedown-machine"
53 |         }]
54 |     }, {
55 |         "category": "Glass Animals",
56 |         "id": "glass-animals",
57 |         "pages":[{
58 |             "label": "Zaba",
59 |             "href": "zaba"
60 |         }]
61 |     }, {
62 |         "category": "Imagine Dragons",
63 |         "id": "imagine-dragons",
64 |         "pages":[{
65 |             "label": "Night Vision",
66 |             "href": "night-vision"
67 |         }, {
68 |             "label": "Smoke + Mirrors",
69 |             "href": "smoke-mirrors"
70 |         }]
71 |     }]
72 | }
73 | 


--------------------------------------------------------------------------------
/src/scss/override/_modal.scss:
--------------------------------------------------------------------------------
 1 | .modal-content {
 2 |     margin-top: 20px;
 3 |     padding: spacing(xs, -4) spacing(xs) spacing(xs, -4);
 4 |     box-shadow: none;
 5 | 
 6 |     .modal-header {
 7 |         padding: 0;
 8 | 
 9 |         .modal-title {
10 |             @include type(t5);
11 |         }
12 | 
13 |         .close {
14 |             display: none;
15 |         }
16 |     }
17 | 
18 |     .modal-body {
19 |         padding: 0;
20 |         margin: spacing(xxxs) 0 0;
21 |         @include type(t7);
22 |     }
23 | 
24 |     .modal-footer {
25 |         padding: 0;
26 |         margin: spacing(sm, -8) 0 0;
27 | 
28 |         .btn {
29 |             width: 100%;
30 |             margin: spacing(xxs, -8) 0 0 -5px;
31 |         }
32 | 
33 |         @media (min-width: $screen-sm-min) {
34 |             .btn {
35 |                 max-width: 50%; // IE8
36 |                 max-width: calc(50% - 2px); // IE9+ (compensate button margins)
37 | 
38 |                 & + .btn {
39 |                     margin-left: 0;
40 |                 }
41 |             }
42 |         }
43 |     }
44 | }
45 | 
46 | // Center modal vertically
47 | .modal-center-vertical {
48 |     text-align: center;
49 | 
50 |     &:before {
51 |         display: inline-block;
52 |         height: 100%;
53 |         vertical-align: middle;
54 | 
55 |         // The modal is vertically centered on medium devices and up
56 |         @media (min-width: $screen-sm-min) {
57 |             content: "";
58 |         }
59 |     }
60 | 
61 |     .modal-dialog {
62 |         display: inline-block;
63 |         vertical-align: middle;
64 |         text-align: left;
65 |     }
66 | }
67 | 
68 | 
69 | //
70 | // Colors
71 | //
72 | .modal-backdrop {
73 |     background-color: transparent;
74 | }
75 | 
76 | .modal {
77 |     background-color: $color-vivid-low-alt;
78 | 
79 |     .modal-content {
80 |         background-color: $color-bg-light-vivid-mid;
81 |         border-color: $color-accent-vivid-high;
82 |         color: $color-type-primary;
83 |     }
84 | 
85 |     &.theme-alt {
86 |         background-color: $color-vivid-low;
87 | 
88 |         .modal-content {
89 |             background-color: $color-bg-dark-vivid-low;
90 |             color: $color-type-primary-alt;
91 |         }
92 |     }
93 | }
94 | 


--------------------------------------------------------------------------------
/src/doc/partials/side-navigation.hbs:
--------------------------------------------------------------------------------
 1 | <div class="row">
 2 |     <div class="col-xs-24">
 3 |         <section class="section" id="side-nav">
 4 |             <header class="section-header ">
 5 |                 <h1 class="section-title ">
 6 |                     <a name="navs">Side navigation</a>
 7 |                 </h1>
 8 |             </header>
 9 | 
10 |             <section class="section">
11 |                 <h3>Large side navigation</h3>
12 |                 <p>
13 |                     {{> side-nav-large-about.md }}
14 |                 </p>
15 |                 <div class="row m-t-md">
16 |                     <div class="col-md-6">
17 |                         {{> side-nav-large }}
18 |                     </div>
19 |                     <div class="col-xs-24 col-md-18 navigation-section">
20 |                         {{#markdown}}
21 | ```xml
22 | {{> side-nav-large }}
23 | ```
24 |                         {{/markdown}}
25 |                         <div class="guidance guidance-usage m-t-xs">
26 |                             {{#markdown}}
27 | {{> side-nav-large-guidance.md}}
28 |                             {{/markdown}}
29 |                         </div>
30 |                         {{#markdown}}
31 | ```javascript
32 | {{> side-nav.js }}
33 | ```
34 |                         {{/markdown}}
35 |                     </div>
36 |                 </div>
37 |             </section>
38 | 
39 |             <section class="section">
40 |                 <h3>Small side navigation</h3>
41 |                 <p>
42 |                     {{> side-nav-small-about.md }}
43 |                 </p>
44 |                 <div class="row m-t-md">
45 |                     <div class="col-md-6">
46 |                         {{> side-nav-small }}
47 |                     </div>
48 |                     <div class="col-xs-24 col-md-18">
49 |                         {{#markdown}}
50 | ```xml
51 | {{> side-nav-small }}
52 | ```
53 |                         {{/markdown}}
54 |                         <div class="guidance guidance-usage m-t-xs">
55 |                             {{#markdown}}
56 | {{> side-nav-small-guidance.md}}
57 |                             {{/markdown}}
58 |                         </div>
59 |                     </div>
60 |                 </div>
61 |             </section>
62 |         </section>
63 |     </div>
64 | </div>


--------------------------------------------------------------------------------
/src/scss/win/_progress-ring.scss:
--------------------------------------------------------------------------------
  1 | .progress-ring {
  2 |   position: relative;
  3 |   width: 20px;
  4 |   height: 20px;
  5 |   text-align: left;
  6 |   display: inline-block;
  7 | 
  8 |   .progress-circle {
  9 |     position: absolute;
 10 |     top: 0;
 11 |     left: 0;
 12 |     width: 20px;
 13 |     height: 20px;
 14 |     opacity: 0;
 15 |     @include rotate(225deg);
 16 |     @include animation(progress-ring-animation 5s infinite);
 17 | 
 18 |     &:after {
 19 |       content: "\2022";
 20 |       position: absolute;
 21 |       font-size: 10px;
 22 |       color: $color-accent;
 23 |     }
 24 | 
 25 |     &:nth-child(2) { @include animation-delay(300ms); }
 26 |     &:nth-child(3) { @include animation-delay(600ms); }
 27 |     &:nth-child(4) { @include animation-delay(900ms); }
 28 |     &:nth-child(5) { @include animation-delay(1200ms); }
 29 |   }
 30 | 
 31 |   &.progress-medium {
 32 |     width: 40px;
 33 |     height: 40px;
 34 |   }
 35 | 
 36 |   &.progress-large {
 37 |     width: 60px;
 38 |     height: 60px;
 39 |   }
 40 | 
 41 |   &.progress-medium .progress-circle {
 42 |     width: 40px;
 43 |     height: 40px;
 44 |     &:after {
 45 |       font-size: 16px;
 46 |     }
 47 |   }
 48 | 
 49 |   &.progress-large .progress-circle {
 50 |     width: 60px;
 51 |     height: 60px;
 52 |     &:after {
 53 |       font-size: 20px;
 54 |     }
 55 |   }
 56 | }
 57 | 
 58 | 
 59 | @include keyframes(progress-ring-animation) {
 60 |   0% {
 61 |     @include rotate(225deg);
 62 |     opacity: 1;
 63 |     @include animation-timing-function(ease-out);
 64 |   }
 65 | 
 66 |   7% {
 67 |     @include rotate(345deg);
 68 |     @include animation-timing-function(linear);
 69 |   }
 70 | 
 71 |   30% {
 72 |     @include rotate(455deg);
 73 |     @include animation-timing-function(ease-in-out);
 74 |   }
 75 | 
 76 |   39% {
 77 |     @include rotate(690deg);
 78 |     @include animation-timing-function(linear);
 79 |   }
 80 | 
 81 |   70% {
 82 |     @include rotate(815deg);
 83 |     opacity: 1;
 84 |     @include animation-timing-function(ease-out);
 85 |   }
 86 | 
 87 |   75% {
 88 |     @include rotate(945deg);
 89 |     @include animation-timing-function(ease-out);
 90 |   }
 91 | 
 92 |   76% {
 93 |     @include rotate(945deg);
 94 |     opacity: 0;
 95 |   }
 96 | 
 97 |   100% {
 98 |     @include rotate(945deg);
 99 |     opacity: 0;
100 |   }
101 | }
102 | 


--------------------------------------------------------------------------------
/src/scss/override/_scaffolding.scss:
--------------------------------------------------------------------------------
  1 | // Override Bootstrap Link syles
  2 | a {
  3 |     &:hover {
  4 |         text-decoration: underline;
  5 |     }
  6 | 
  7 |     &:active {
  8 |         text-decoration: none;
  9 |     }
 10 | 
 11 |     &:focus {
 12 |         @include tab-focus;
 13 |     }
 14 | 
 15 |     //
 16 |     // Colors
 17 |     //
 18 | 
 19 |     &,
 20 |     &.theme-default {
 21 |         &:active {
 22 |             // $color-type-accent with overlay of $color-dim-mid
 23 |             color: mix($color-type-accent, $color-black, 90%);
 24 |         }
 25 |     }
 26 | 
 27 |     &.theme-alt {
 28 |         &:active {
 29 |             // $color-type-accent with overlay of $color-dim-high-alt
 30 |             color: mix($color-type-accent, $color-white, 85%);
 31 |         }
 32 |     }
 33 | 
 34 |     &.theme-light {
 35 |         color: $color-vivid-high;
 36 |         text-decoration: underline;
 37 | 
 38 |         &:hover {
 39 |             color: $color-vivid-mid;
 40 |         }
 41 | 
 42 |         &:active {
 43 |             color: $color-vivid-low;
 44 |         }
 45 |     }
 46 | 
 47 |     &.theme-dark {
 48 |         color: $color-vivid-high-alt;
 49 |         text-decoration: underline;
 50 | 
 51 |         &:hover {
 52 |             color: $color-vivid-mid-alt;
 53 |         }
 54 | 
 55 |         &:active {
 56 |             color: $color-vivid-low-alt;
 57 |         }
 58 |     }
 59 | }
 60 | 
 61 | hr {
 62 |     margin-top: spacing(sm);
 63 |     margin-bottom: 0;
 64 |     @media (min-width: $screen-sm) {
 65 |         margin-top: spacing(md);
 66 |     }
 67 | 
 68 |     //
 69 |     // Colors
 70 |     //
 71 | 
 72 |     // Default colors
 73 |     &,
 74 |     &.theme-default {
 75 |         border-color: $color-neutral-low;
 76 |     }
 77 | 
 78 |     // Alt theme
 79 |     &.theme-alt {
 80 |         border-color:  $color-neutral-low-alt;
 81 |     }
 82 | 
 83 |     // On light image
 84 |     &.theme-light {
 85 |         border-color: $color-vivid-high;
 86 |     }
 87 | 
 88 |     // On dark image or any color
 89 |     &.theme-dark,
 90 |     &.theme-on-color {
 91 |         border-color: $color-vivid-high-alt;
 92 |     }
 93 | }
 94 | 
 95 | ul li,
 96 | ol li,
 97 | dl dd,
 98 | dl dt {
 99 |         margin: spacing(xxs) 0;
100 | }
101 | 
102 | ul {
103 |     padding-left: spacing(xs, -4);
104 | }
105 | 
106 | ol {
107 |     padding-left: spacing(xs);
108 | }
109 | 


--------------------------------------------------------------------------------
/src/scss/win/_doc.scss:
--------------------------------------------------------------------------------
  1 | #glyphs {
  2 |     span[class*="glyph-"] {
  3 |         font-size: 2em;
  4 |     }
  5 | }
  6 | 
  7 | .color {
  8 |     height: 0;
  9 |     padding-bottom: 39px;
 10 |     margin: spacing(xxs) 0 0;
 11 | }
 12 | 
 13 | .line {
 14 |     border-width: 4px;
 15 |     border-style: solid;
 16 |     padding-bottom: 29px;
 17 | }
 18 | 
 19 | code {
 20 |     .tag {
 21 |         color: #008080;
 22 | 
 23 |         .title {
 24 |             color: #800000;
 25 |         }
 26 |     }
 27 | 
 28 |     .value, .string {
 29 |         color: #0451A5;
 30 |     }
 31 | 
 32 |     .attribute {
 33 |         color: red;
 34 |     }
 35 | 
 36 |     .comment {
 37 |         color: #008000;
 38 |         font-style: italic;
 39 |     }
 40 | 
 41 |     .number {
 42 |         color: #09885A;
 43 |     }
 44 | }
 45 | 
 46 | .caption-style-example {
 47 |     font-size: 6.67vh;
 48 |     background: rgba(black, .5) !important;
 49 |     color: white;
 50 | }
 51 | 
 52 | //make it possible to see alt colors in docs
 53 | #alt-colors > .col-sm-6 {
 54 |     background-color: $color-type-primary;
 55 | }
 56 | 
 57 | 
 58 | .nav a, .section-title a {
 59 |     text-decoration: none;
 60 | }
 61 | 
 62 | .example-dark-image-bg {
 63 |     background-image: url('../images/example_dark.jpg');
 64 |     background-position: top left;
 65 |     background-size: cover;
 66 | }
 67 | 
 68 | .example-light-image-bg {
 69 |     background-image: url('../images/example_light.jpg');
 70 |     background-position: top right;
 71 |     background-size: cover;
 72 | }
 73 | 
 74 | .guidance {
 75 |     border-left: 5px solid;
 76 |     
 77 |     ul {
 78 |         padding-left: spacing(md, -8);
 79 |     }
 80 | 
 81 |     &.guidance-example:before {
 82 |         position: absolute;
 83 |         top: spacing(xxs, -2);
 84 |         left: spacing(xxs, +1);
 85 |     }
 86 | 
 87 |     // Deal with repetitive content here instead of in the markup
 88 |     // so if these ever change it's really easy to update
 89 |     &.guidance-usage:before
 90 | 	{
 91 |         content: "Options";
 92 |         padding-left: spacing(xs, -3);
 93 |         @include type(t7, set-line-height, responsive);
 94 |         font-weight: 500;
 95 |         font-family: $font-family-semibold;
 96 |     }
 97 | 
 98 |     
 99 |     
100 | 
101 |     //
102 |     // Colors
103 |     //
104 |     &.guidance-usage {
105 |         border-color: $color-dim-mid;
106 |     }
107 | 
108 | }
109 | 


--------------------------------------------------------------------------------
/src/doc/components.hbs:
--------------------------------------------------------------------------------
 1 | <div class="page-header">
 2 |     <div class="container">
 3 |         <div class="row">
 4 |             <div class="col-xs-24">
 5 |                 <h1>Components</h1>
 6 | 
 7 |                 <ul class="nav nav-pills" data-scroll="smooth">
 8 |                     <li role="presentation">
 9 |                         <a href="#breadcrumb">Breadcrumb</a>
10 |                     </li>
11 |                     <li role="presentation">
12 |                         <a href="#back-to-top">Back to top</a>
13 |                     </li>
14 |                     <li role="presentation">
15 |                         <a href="#rating">Rating</a>
16 |                     </li>
17 |                     <li role="presentation">
18 |                         <a href="#labels">Labels</a>
19 |                     </li>
20 |                     <li role="presentation">
21 |                         <a href="#media">Media</a>
22 |                     </li>
23 |                     <li role="presentation">
24 |                         <a href="#tables">Tables</a>
25 |                     </li>
26 |                     <li role="presentation">
27 |                         <a href="#responsive-table">Responsive table</a>
28 |                     </li>
29 |                     <li role="presentation">
30 |                         <a href="#list-items">List items</a>
31 |                     </li>
32 |                     <li role="presentation">
33 |                         <a href="#entity-list">Entity list</a>
34 |                     </li>
35 |                     <li role="presentation">
36 |                         <a href="#pagination">Pagination</a>
37 |                     </li>
38 |                     <li role="presentation">
39 |                         <a href="#jumbotron">Jumbotron</a>
40 |                     </li>
41 |                 </ul>
42 |             </div>
43 |         </div>
44 |     </div>
45 | </div>
46 | 
47 | <div class="container">
48 |     {{> breadcrumb }}
49 |     <hr />
50 |     {{> back-to-top-doc }}
51 |     <hr />
52 |     {{> rating }}
53 |     <hr />
54 |     {{> labels }}
55 |     <hr />
56 |     {{> media }}
57 |     <hr />
58 |     {{> tables }}
59 |     <hr />
60 |     {{> responsive-table }}
61 |     <hr />
62 |     {{> list-items }}
63 |     <hr />
64 |     {{> entity-list }}
65 |     <hr />
66 |     {{> pagination }}
67 |     <hr />
68 | </div>
69 | <!-- Since Jumbotron is outside the grid... -->
70 | {{> jumbotron-doc }}
71 | 


--------------------------------------------------------------------------------
/LICENSE.md:
--------------------------------------------------------------------------------
 1 | Copyright © 2015 Microsoft Corporation
 2 | 
 3 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the Software), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 4 | 
 5 | This project incorporates material from the projects listed below (Third Party IP). The original copyright notice and the license under which Microsoft received such Third Party IP, are set forth below. Microsoft reserves all other rights not expressly granted under this agreement, whether by implication, estoppel or otherwise.
 6 | 
 7 | Bootstrap
 8 | Copyright (c) 2011-2015 Twitter, Inc
 9 | 
10 | MIT License
11 | 
12 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the Software), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
13 | 


--------------------------------------------------------------------------------
/src/doc/partials/form/form-elements.hbs:
--------------------------------------------------------------------------------
 1 | <div class="form-group">
 2 |     <label for="exampleInputEmail1">Email address</label>
 3 |     <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
 4 | </div>
 5 | 
 6 | <div class="form-group">
 7 |     <label for="exampleInputPassword1">Password</label>
 8 |     <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
 9 | </div>
10 | 
11 | <div class="form-group">
12 |     <label for="exampleInputFile">File input</label>
13 |     <input type="file" id="exampleInputFile">
14 |     <p class="help-block">Example block-level help text here.</p>
15 | </div>
16 | 
17 | <div class="form-group">
18 |     <p class="form-group-label">Checkbox</p>
19 |     <div class="checkbox">
20 |         <label>
21 |             <input type="checkbox"></input>
22 |             <span>Rest</span>
23 |         </label>
24 |     </div>
25 | 
26 |     <div class="checkbox">
27 |         <label>
28 |             <input type="checkbox" checked></input>
29 |             <span>Checked</span>
30 |         </label>
31 |     </div>
32 | 
33 |     <div class="checkbox">
34 |         <label>
35 |             <input type="checkbox" disabled="true"></input>
36 |             <span>Disabled</span>
37 |         </label>
38 |     </div>
39 | 
40 |     <div class="checkbox">
41 |         {{#if snippet}}
42 |         <label>
43 |             <input type="checkbox" id="foo"></input>
44 |             <span>Indeterminate</span>
45 |         </label>
46 |         <script type="text/javascript">
47 |             (function () {
48 |                 $("#foo").prop("indeterminate", true);
49 |             })();
50 |         </script>
51 |         {{else}}
52 |         <label>
53 |             <input type="checkbox" class="checkbox-indeterminate"></input>
54 |             <span>Indeterminate</span>
55 |         </label>
56 |         {{/if}}
57 |     </div>
58 | </div>
59 | 
60 | <div class="form-group">
61 |     <p class="form-group-label">Radio buttons</p>
62 |     <div class="radio">
63 |         <label>
64 |             <input type="radio" name='radio1'>
65 |             <span>Radio</span>
66 |         </label>
67 |     </div>
68 |     <div class="radio">
69 |         <label>
70 |             <input type="radio" name='radio1' checked="checked">
71 |             <span>Checked</span>
72 |         </label>
73 |     </div>
74 |     <div class="radio">
75 |         <label>
76 |             <input type="radio" name='radio1' disabled="true">
77 |             <span>Disabled</span>
78 |         </label>
79 |     </div>
80 | </div>
81 | 


--------------------------------------------------------------------------------
/src/doc/partials/type/sizes.hbs:
--------------------------------------------------------------------------------
 1 | <div class="row" id="sizes">
 2 |     <div class="col-xs-24">
 3 |         <div class="row">
 4 |             <div class="col-xs-24">
 5 |                 <h2>Sizes</h2>
 6 |                 <p>There are nine type sizes in Winstrap. T1 is the largest, and T9 is the smallest. Winstrap type sizes are responsive.</p>
 7 |             </div>
 8 | 
 9 |             <div class="col-xs-24 col-md-12 m-t-xxs">
10 |                 <div class="type-t1 inline-block">T1</div>
11 |                 <div class="type-t2 inline-block m-l-xs">T2</div>
12 |                 <div class="type-t3 inline-block m-l-xs">T3</div>
13 |                 <div class="type-t4 inline-block m-l-xs">T4</div>
14 |                 <div class="type-t5 inline-block m-l-xs">T5</div>
15 |                 <div class="type-t6 inline-block m-l-xs">T6</div>
16 |                 <div class="type-t7 inline-block m-l-xs">T7</div>
17 |                 <div class="type-t8 inline-block m-l-xs">T8</div>
18 |                 <div class="type-t9 inline-block m-l-xs">T9</div>
19 |             </div>
20 |         </div>
21 | 
22 |         <div class="row">
23 |             <div class="col-sm-24">
24 |                 <h3>Type classes</h3>
25 |                 <p>All Bootstrap classes are available. You may also use Winstrap type classes if you would like to more explicitly be connected to Microsoft design language. Responsive font-size, font-weight, and line-height are set by these classes. The Winstrap type classes are <code>type-*</code>.</p>
26 | 
27 |                 {{#markdown}}
28 | ```xml
29 | <div class="type-t1">T1</div>
30 | 
31 | <div class="type-t2">T2</div>
32 | 
33 | <div class="type-t3">T3</div>
34 | 
35 | <div class="type-t4">T4</div>
36 | 
37 | <div class="type-t5">T5</div>
38 | 
39 | <div class="type-t6">T6</div>
40 | 
41 | <div class="type-t7">T7</div>
42 | 
43 | <div class="type-t8">T8</div>
44 | 
45 | <div class="type-t9">T9</div>
46 | ```
47 |                 {{/markdown}}
48 |             </div>
49 | 
50 |             <div class="col-sm-24">
51 |                 <h3>Type mixins</h3>
52 |                 <p>By default, line-height is not set by the mixins below. If you want to apply the MDL line-height, you can pass the <code>set-line-height</code> argument. You can also pass the <code>responsive</code> argument to make the text responsive.</p>
53 | 
54 |                 {{#markdown}}
55 | ```scss
56 | .selector {
57 |     @include type(t[1-9], [set-line-height] [responsive]);
58 | }
59 | ```
60 |                 {{/markdown}}
61 |             </div>
62 |         </div>
63 |     </div>
64 | </div>
65 | 


--------------------------------------------------------------------------------
/src/scss/win/_pagination.scss:
--------------------------------------------------------------------------------
 1 | .pagination {
 2 |     @include clearfix();
 3 | 
 4 |     li.pagination-ellipsis {
 5 |         > span {
 6 |             background: none;
 7 |             margin: spacing(xxs, -7) 0;
 8 |             padding: spacing(xxs, -8) 0 spacing(xxs, -7);
 9 |             min-width: 18px;
10 |         }
11 |     }
12 | 
13 |     li.pagination-prev,
14 |     li.pagination-next {
15 |         i[class*="glyph-"] {
16 |             margin: 0 spacing(xxs, -10);
17 |             font-size: .813em;
18 |             vertical-align: -.1em;
19 |         }
20 |         &.disabled {
21 |             display: none;
22 |         }
23 |     }
24 |     li.pagination-prev {
25 |         > a, > span {
26 |             padding: spacing(xxs, -7) spacing(xxs, -2) spacing(xxs, -7) spacing(xxs, -6);
27 |             margin-left: spacing(n, -6);
28 |         }
29 |     }
30 |     li.pagination-next {
31 |         > a, > span {
32 |             padding: spacing(xxs, -7) spacing(xxs, -6) spacing(xxs, -7) spacing(xxs, -2);
33 |         }
34 |     }
35 | 
36 |     //
37 |     // Colors
38 |     //
39 | 
40 |     // Default colors
41 |     li.pagination-prev,
42 |     li.pagination-next {
43 |         > a, > span {
44 |             background: none;
45 |             border-color: transparent;
46 |             &:hover {
47 |                 background-color: $color-dim-mid;
48 |             }
49 |             &:focus {
50 |                 background-color: $color-neutral-mid;
51 |             }
52 |         }
53 |     }
54 | 
55 |     // Alt theme
56 |     &.theme-alt {
57 |         > li {
58 |             > a, > span {
59 |                 color: $color-type-primary-alt;
60 |                 &:hover {
61 |                     background-color: $color-dim-mid-alt;
62 |                 }
63 |                 &:focus {
64 |                     background-color: $color-neutral-mid-alt;
65 |                 }
66 |             }
67 |         }
68 |         > .active > a,
69 |         > .active > span {
70 |             &:hover,
71 |             &:focus {
72 |               color: $color-type-primary-alt;
73 |               background-color: $pagination-active-bg;
74 |             }
75 |         }
76 |     }
77 | }
78 | 
79 | @media (min-width: $screen-sm) {
80 |     .pagination-prev {
81 |         > a, > span {
82 |             &:after {
83 |                 content: attr(aria-label);
84 |             }
85 |         }
86 |     }
87 | 
88 |     .pagination-next {
89 |         > a, > span {
90 |             &:before {
91 |                 content: attr(aria-label);
92 |             }
93 |         }
94 |     }
95 | }
96 | 


--------------------------------------------------------------------------------
/src/scss/winstrap-optional.scss:
--------------------------------------------------------------------------------
 1 | /*!
 2 |  * Bootstrap v3.3.7 (http://getbootstrap.com)
 3 |  * Copyright 2011-2016 Twitter, Inc.
 4 |  * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 5 |  */
 6 | @charset "UTF-8";
 7 | 
 8 | // Settings
 9 | @import "win/resources";
10 | @import "win/colors";
11 | @import "win/variables";
12 | @import "override/variables";
13 | 
14 | // New mixins and mixins that completely replace
15 | // bootstrap mixins
16 | @import "win/mixins/colors";
17 | @import "win/mixins/animations";
18 | @import "win/mixins/triangle";
19 | @import "win/mixins/spacer";
20 | @import "win/mixins/glyphs";
21 | @import "override/mixins/tab-focus";
22 | 
23 | // Base
24 | @import "win/grid";
25 | 
26 | //optional bootstrap configuration without grid as example.
27 | /* when a project includes winstrap, it might want to pick and choose what parts of bootstrap
28 | to include instead of the default set of bootstrap components winstrap selects automatically.
29 | This demonstrates how to do this for a project that happens to override the bootstrap grid in
30 | order to substitute it with another grid. instead of @import "winstrap/src/scss/winstrap", use
31 | @import "winstrap/src/scss/winstrap-optional" in your project's scss */
32 | @import "override/bootstrap-optional";
33 | @import "win/glyphs";
34 | @import "win/utilities";
35 | @import "win/type";
36 | 
37 | // Mixins that override bootstrap mixins
38 | @import "override/mixins/buttons";
39 | 
40 | // Overridden components
41 | @import "override/grid";
42 | @import "override/scaffolding";
43 | @import "override/alerts";
44 | @import "override/breadcrumb";
45 | @import "override/buttons";
46 | @import "override/dropdown";
47 | @import "override/forms";
48 | @import "override/jumbotron";
49 | @import "override/labels";
50 | @import "override/modal";
51 | @import "override/navbar";
52 | @import "override/navs";
53 | @import "override/pagination";
54 | @import "override/panels";
55 | @import "override/popover";
56 | @import "override/progress-bar";
57 | @import "override/tables";
58 | @import "override/tooltip";
59 | 
60 | // New components
61 | @import "win/scaffolding";
62 | @import "win/alerts";
63 | @import "win/back-to-top";
64 | @import "win/buttons";
65 | @import "win/lists";
66 | @import "win/media";
67 | @import "win/pager";
68 | @import "win/pagination";
69 | @import "win/panels";
70 | @import "win/progress-bar";
71 | @import "win/progress-ring";
72 | @import "win/rating";
73 | @import "win/section";
74 | @import "win/side-navigation";
75 | 
76 | // Layout
77 | @import "win/main";
78 | @import "override/page";
79 | 
80 | // Pages
81 | @import "win/doc";
82 | 


--------------------------------------------------------------------------------
/src/doc/controls.hbs:
--------------------------------------------------------------------------------
 1 | <div class="page-header">
 2 |     <div class="container">
 3 |         <div class="row">
 4 |             <div class="col-xs-24">
 5 |                 <h1>Controls</h1>
 6 |                 <ul class="nav nav-pills" data-scroll="smooth">
 7 |                     <li role="presentation">
 8 |                         <a href="#buttons">Buttons</a>
 9 |                     </li>
10 |                     <li role="presentation">
11 |                         <a href="#toggle-switch">Toggle Switch</a>
12 |                     </li>
13 |                     <li role="presentation">
14 |                         <a href="#forms">Forms</a>
15 |                     </li>
16 |                     <li role="presentation">
17 |                         <a href="#putbox">Put box</a>
18 |                     </li>
19 |                     <li role="presentation">
20 |                         <a href="#progress">Progress</a>
21 |                     </li>
22 |                     <li role="presentation">
23 |                         <a href="#loader">Loader</a>
24 |                     </li>
25 |                     <li role="presentation">
26 |                         <a href="#dropdown">Dropdown</a>
27 |                     </li>
28 |                     <li role="presentation">
29 |                         <a href="#tooltips">Tooltips</a>
30 |                     </li>
31 |                     <li role="presentation">
32 |                         <a href="#flyouts">Flyouts</a>
33 |                     </li>
34 |                     <li role="presentation">
35 |                         <a href="#dialogs">Dialogs</a>
36 |                     </li>
37 |                     <li role="presentation">
38 |                         <a href="#tabs">Tabs</a>
39 |                     </li>
40 |                     <li role="presentation">
41 |                         <a href="#navs">Navbar</a>
42 |                     </li>
43 |                     <li role="presentation">
44 |                         <a href="#side-nav">Side Navigation</a>
45 |                     </li>
46 |                 </ul>
47 |             </div>
48 |         </div>
49 |     </div>
50 | </div>
51 | <div class="container">
52 |     {{> buttons }}
53 |     <hr />
54 |     {{> toggle-switch }}
55 |     <hr />
56 |     {{> forms }}
57 |     <hr />
58 |     {{> putbox }}
59 |     <hr />
60 |     {{> progress }}
61 |     <hr />
62 |     {{> loader }}
63 |     <hr />
64 |     {{> dropdown-doc }}
65 |     <hr />
66 |     {{> tooltips }}
67 |     <hr />
68 |     {{> flyouts }}
69 |     <hr />
70 |     {{> dialogs }}
71 |     <hr />
72 |     {{> tabs }}
73 |     <hr />
74 |     {{> navbar-doc }}
75 |     <hr />
76 |     {{> side-navigation }}
77 | </div>
78 | 


--------------------------------------------------------------------------------
/src/doc/partials/type/fonts.hbs:
--------------------------------------------------------------------------------
 1 | <div class="row" id="fonts">
 2 |     <div class="col-xs-24">
 3 |         <div class="row">
 4 |             <div class="col-xs-24">
 5 |                 <h2>Fonts</h2>
 6 |                 <p>The main typeface is Segoe UI. Selawik is an open source text font that can be used as a fallback to Segoe UI.</p>
 7 |             </div>
 8 | 
 9 |             <div class="col-xs-24 col-md-12">
10 |                 <h4>Segoe UI</h4>
11 |                 <hr />
12 |                 <h2>Lorem Ipsum</h2>
13 |                 <div class="type-sh2">Dolor sit amet</div>
14 |                 <p>Consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
15 |                 <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
16 |                 <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio.</p>
17 |             </div>
18 | 
19 |             <div class="col-xs-24 col-md-12">
20 |                 <h4>Selawik</h4>
21 |                 <hr />
22 |                 <h2 style="font-family: 'Selawik Light'">Lorem Ipsum</h2>
23 |                 <div class="type-sh2" style="font-family: 'Selawik Semilight'">Dolor sit amet</div>
24 |                 <p style="font-family: 'Selawik'">Consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
25 |                 <p style="font-family: 'Selawik'">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
26 |                 <p style="font-family: 'Selawik'">At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio.</p>
27 |             </div>
28 |         </div>
29 |     </div>
30 | </div>
31 | 


--------------------------------------------------------------------------------
/src/doc/partials/loader.hbs:
--------------------------------------------------------------------------------
 1 | <section class="section" id="loader">
 2 |   <header class="section-header row">
 3 |     <h1 class="section-title col-xs-24">
 4 |       <a href="#loader">Indeterminate Progress</a>
 5 |     </h1>
 6 |   </header>
 7 | 
 8 |   <div class="row">
 9 |     <div class="col-xs-24" >
10 | 
11 |       <h3>Progress Ring</h3>
12 | 
13 |       <p>
14 |         <div class="progress-ring">
15 |           <div class="progress-circle"></div>
16 |           <div class="progress-circle"></div>
17 |           <div class="progress-circle"></div>
18 |           <div class="progress-circle"></div>
19 |           <div class="progress-circle"></div>
20 |         </div>
21 | 
22 |         <div class="progress-ring progress-medium">
23 |           <div class="progress-circle"></div>
24 |           <div class="progress-circle"></div>
25 |           <div class="progress-circle"></div>
26 |           <div class="progress-circle"></div>
27 |           <div class="progress-circle"></div>
28 |         </div>
29 | 
30 |         <div class="progress-ring progress-large">
31 |           <div class="progress-circle"></div>
32 |           <div class="progress-circle"></div>
33 |           <div class="progress-circle"></div>
34 |           <div class="progress-circle"></div>
35 |           <div class="progress-circle"></div>
36 |         </div>
37 |       </p>
38 | 
39 |       {{#markdown}}
40 | ```xml
41 | <div class="progress-ring">
42 |   <div class="progress-circle"></div>
43 |   <div class="progress-circle"></div>
44 |   <div class="progress-circle"></div>
45 |   <div class="progress-circle"></div>
46 |   <div class="progress-circle"></div>
47 | </div>
48 | ```
49 |       {{/markdown}}
50 |     </div>
51 | 
52 |     <div class="col-md-24 m-b-sm">
53 |       <div class="guidance guidance-usage m-t-xs">
54 |         {{#markdown}}
55 | {{> progress-ring-guidance.md}}
56 |         {{/markdown}}
57 |       </div>
58 |     </div>
59 | 
60 |     <h3>Progress Bar</h3>
61 | 
62 |     <p>
63 |       <div class="progress-bar">
64 |         <div class="progress-circle"></div>
65 |         <div class="progress-circle"></div>
66 |         <div class="progress-circle"></div>
67 |         <div class="progress-circle"></div>
68 |         <div class="progress-circle"></div>
69 |       </div>
70 |     </p>
71 | 
72 |     {{#markdown}}
73 | ```xml
74 | <div class="progress-bar">
75 |   <div class="progress-circle"></div>
76 |   <div class="progress-circle"></div>
77 |   <div class="progress-circle"></div>
78 |   <div class="progress-circle"></div>
79 |   <div class="progress-circle"></div>
80 | </div>
81 | ```
82 |     {{/markdown}}
83 | 
84 |     <div class="col-md-24 m-b-sm">
85 |       <div class="guidance guidance-usage m-t-xs">
86 |         {{#markdown}}
87 | {{> progress-bar-guidance.md}}
88 |         {{/markdown}}
89 |       </div>
90 |     </div>
91 |   
92 |   </div>
93 | 
94 | </section>
95 | 


--------------------------------------------------------------------------------
/src/doc/partials/tooltips.hbs:
--------------------------------------------------------------------------------
 1 | <section class="section" id="tooltips">
 2 |     <header class="section-header row">
 3 |         <h1 class="section-title col-xs-24">
 4 |             <a href="#tooltips">Tooltips</a>
 5 |         </h1>
 6 |     </header>
 7 | 
 8 |     <div class="row">
 9 |         <div class="col-xs-24" style="margin-bottom: 1em;">
10 |             <p>
11 |                 This is <a href="javascript:void(0)" data-toggle="tooltip" title="Tooltip content">a simple tooltip</a> on top (default).
12 |                 On the <a href="javascript:void(0)" data-toggle="tooltip" data-placement="left" title="Tooltip content">left</a>.
13 |                 On the <a href="javascript:void(0)" data-toggle="tooltip" data-placement="bottom" title="Tooltip content">bottom</a>.
14 |                 On the <a href="javascript:void(0)" data-toggle="tooltip" data-placement="right" title="Tooltip content">right</a>.
15 |             </p>
16 |         </div>
17 | 
18 |         <div class="col-xs-24" style="margin-bottom: 2em;">
19 |             <p>You can also place them on buttons.</p>
20 |             <button class="btn btn-primary" data-toggle="tooltip" data-placement="left" title="Tooltip content">Tooltip left</button>
21 |             <button class="btn btn-primary" data-toggle="tooltip" data-placement="top" title="Tooltip content">Tooltip top</button>
22 |             <button class="btn btn-primary" data-toggle="tooltip" data-placement="bottom" title="Tooltip content">Tooltip bottom</button>
23 |             <button class="btn btn-primary" data-toggle="tooltip" data-placement="right" title="Tooltip content">Tooltip right</button>
24 |         </div>
25 | 
26 |         <div class="col-xs-24" style="margin-bottom: 2em;">
27 |             <p>Tooltips are also available in alt color.</p>
28 |             <button class="btn btn-primary theme-alt" data-toggle="tooltip" data-placement="right" title="Tooltip content">Tooltip in alt color</button>
29 |         </div>
30 | 
31 |         <div class="col-md-24" style="margin-bottom: 1em">
32 |             <p>To enable the tooltip on the HTML:</p>
33 | 
34 |             {{#markdown}}
35 | ```xml
36 | <span data-toggle="tooltip" title="Tooltip content">
37 |     Has a tooltip
38 | </span>
39 | ```
40 |             {{/markdown}}
41 |         </div>
42 |         <div class="col-md-24">
43 |         <div class="guidance guidance-usage m-t-xs">
44 |             {{#markdown}}
45 | {{> tooltip-guidance.md}}
46 |             {{/markdown}}
47 |         </div>
48 |     </div>
49 | 
50 |         <div class="col-md-24">
51 |             <p>And the required JavaScript initialization:</p>
52 | 
53 |             {{#markdown}}
54 | ```javascript
55 | $(function () {
56 |     $('[data-toggle="tooltip"]').tooltip({
57 |         template: '<div class="tooltip" role="tooltip"><div class="tooltip-inner"></div></div>'
58 |     });
59 | });
60 | ```
61 |             {{/markdown}}
62 |         </div>
63 |     </div>
64 | </section>
65 | 


--------------------------------------------------------------------------------
/src/doc/partials/type/paragraphs.hbs:
--------------------------------------------------------------------------------
 1 | <div class="row" id="paragraphs">
 2 |     <div class="col-xs-24">
 3 |         <div class="row">
 4 |             <div class="col-xs-24">
 5 |                 <h2>Paragraphs</h2>
 6 |                 <p>There are four paragraph controls in Winstrap. <code>&lt;p&gt;</code> is mapped to <code>type-p3</code>.</p>
 7 |                 <p>You can also apply paragraphs using the Sass mixin. Paragraphs applied using the mixin are not responsive by default. Pass the <code>responsive</code> argument to make them responsive.</p>
 8 |             </div>
 9 |         </div>
10 | 
11 |         <div class="row m-t-sm">
12 |             <div class="col-md-12">
13 |                 <p class="type-p1">Paragraph 1</p>
14 |                 <p class="type-p1">
15 |                     Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
16 |                 </p>
17 |                 <p class="type-p2">Paragraph 2</p>
18 |                 <p class="type-p2">
19 |                     Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
20 |                 </p>
21 |                 <p>Paragraph 3</p>
22 |                 <p>
23 |                     Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
24 |                 </p>
25 |                 <p class="type-p4">Paragraph 4</p>
26 |                 <p class="type-p4">
27 |                     Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
28 |                 </p>
29 |             </div>
30 | 
31 |             <div class="col-md-12">
32 |                 <div class="row">
33 |                     <div class="col-sm-24">
34 |                         {{#markdown}}
35 | ```xml
36 | <p class="type-p1">Paragraph 1</p>
37 | 
38 | <p class="type-p2">Paragraph 2</p>
39 | 
40 | <p>Paragraph 3</p>
41 | <p class="type-p3">...</p>
42 | 
43 | <p class="type-p4">Paragraph 4</p>
44 | ```
45 |                         {{/markdown}}
46 |                     </div>
47 | 
48 |                     <div class="col-sm-24">
49 |                         {{#markdown}}
50 | ```scss
51 | .selector {
52 |     @include type-control(p[1-4], [responsive]);
53 | }
54 | ```
55 |                         {{/markdown}}
56 |                     </div>
57 |                 </div>
58 |             </div>
59 |         </div>
60 |     </div>
61 | </div>
62 | 


--------------------------------------------------------------------------------
/src/scss/override/_jumbotron.scss:
--------------------------------------------------------------------------------
  1 | .hero {
  2 |     @extend .jumbotron;
  3 | }
  4 | 
  5 | .jumbotron {
  6 |     padding: spacing(xxs) 0;
  7 |     margin-bottom: initial;
  8 |     
  9 |     .container {
 10 |         max-width: $container-xl;
 11 |     }
 12 |     
 13 |     h1,
 14 |     .h1 {
 15 |         @include type(t1);
 16 |     }
 17 |     
 18 |     p {
 19 |         margin-bottom: initial;
 20 |         @include type-control(p3);
 21 |     }
 22 |     
 23 |     .container &,
 24 |     .container-fluid & {
 25 |         border-radius: 0; // no rounded corners
 26 |     }
 27 |     
 28 |     @media screen and (min-width: $screen-sm-min) {
 29 |         padding: spacing(xs) 0;
 30 |     }
 31 |     @media screen and (min-width: $screen-md-min) {
 32 |         padding: spacing(md) 0;
 33 |     }
 34 |     @media screen and (min-width: $screen-lg-min) {
 35 |         padding: spacing(lg, -4) 0;
 36 |     }
 37 |     
 38 |     //
 39 |     // Colors
 40 |     //
 41 |     
 42 |     // Ordinarily, we do not add background color to color themes, but because Bootstrap applies a background color to .jumbotron, we have do here as well.
 43 |     &,
 44 |     &.theme-default {
 45 |         color: $color-type-primary;
 46 |         background-color: $color-dim-mid;
 47 |         > hr {
 48 |             border-top-color: darken($jumbotron-bg, 10%);
 49 |         }
 50 |     }
 51 |     
 52 |     &.theme-light {
 53 |         color: $color-type-primary;
 54 |         background-color: $color-dim-mid;
 55 |         
 56 |         .btn.btn-primary {
 57 |             @extend .btn.btn-primary.theme-light;
 58 |         }
 59 |         
 60 |         .btn.btn-secondary {
 61 |             @extend .btn.btn-secondary.theme-light;
 62 |         }
 63 |         
 64 |         .btn.btn-lightweight,
 65 |         .btn.btn-link {
 66 |             @extend .btn-lightweight.theme-light;
 67 |         }
 68 |         
 69 |     }
 70 |     
 71 |     &.theme-dark {
 72 |         color: $color-type-primary-alt;
 73 |         background-color: $color-accent;
 74 |         
 75 |         .btn.btn-primary {
 76 |             @extend .btn.btn-primary.theme-dark;
 77 |         }
 78 |         
 79 |         .btn.btn-secondary {
 80 |             @extend .btn.btn-secondary.theme-dark;
 81 |         }
 82 |         
 83 |         .btn.btn-lightweight,
 84 |         .btn.btn-link {
 85 |             @extend .btn-lightweight.theme-dark;
 86 |         }
 87 |         
 88 |     }
 89 |     
 90 |     &.theme-alt {
 91 |         color: $color-type-primary-alt;
 92 |         background-color: $color-vivid-high;
 93 |         
 94 |         .btn.btn-primary {
 95 |             @extend .btn.btn-primary.theme-alt;
 96 |         }
 97 |         
 98 |         .btn.btn-secondary {
 99 |             @extend .btn.btn-secondary.theme-alt;
100 |         }
101 |         
102 |         .btn.btn-lightweight,
103 |         .btn.btn-link {
104 |             @extend .btn-lightweight.theme-alt;
105 |         }
106 |     }
107 | }
108 | 


--------------------------------------------------------------------------------
/src/doc/partials/progress.hbs:
--------------------------------------------------------------------------------
 1 | <section class="section" id="progress">
 2 |     <header class="section-header row">
 3 |         <h1 class="section-title col-xs-24">
 4 |             <a href="#progress">Progress</a>
 5 |         </h1>
 6 |     </header>
 7 | 
 8 | {{!--   <div class="row">
 9 | <div class="col-xs-24">
10 |     <h2>Inside a button</h2>
11 | </div>
12 | 
13 | <div class="col-md-5">
14 | 
15 |     <button type="button" class="btn btn-primary btn-progress btn-lg">
16 |         <span class="btn-progress-bar" role="progressbar" aria-valuenow="83" aria-valuemin="0" aria-valuemax="100" style="width: 83%;"></span>
17 |         <span class="btn-progress-label">Resume (83%)</span>
18 |     </button>
19 | 
20 | </div>
21 | 
22 | <div class="col-md-18 col-md-offset-1">
23 |     {{#markdown}}
24 | ```xml
25 | <button type="button" class="btn btn-primary btn-progress btn-lg">
26 |     <span class="btn-progress-bar" role="progressbar"
27 |     aria-valuenow="83" aria-valuemin="0" aria-valuemax="100"
28 |     style="width: 83%;"></span>
29 |     <span class="btn-progress-label">Resume (83%)</span>
30 | </button>
31 | ```
32 |     {{/markdown}}
33 | </div>
34 | </div>
35 | --}}
36 | 
37 | <div class="row">
38 |     <div class="col-xs-24">
39 |         <h3>Determinate progress bar</h3>
40 |     </div>
41 | 
42 |     <div class="col-xs-24">
43 |         <div style="padding:20px;">
44 |             <div class="col-xs-24">
45 |                 <div class="progress">
46 |                     <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
47 |                         <span class="sr-only">60% Complete</span>
48 |                     </div>
49 |                 </div>
50 |             </div>
51 |         </div>
52 | 
53 |         <div style="padding:20px; background-color:#000;">
54 |             <div class="col-xs-24">
55 |                 <div class="progress theme-alt">
56 |                     <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
57 |                         <span class="sr-only">60% Complete</span>
58 |                     </div>
59 |                 </div>
60 |             </div>
61 |         </div>
62 | 
63 |         <div style="padding:20px; background-color:#0078D7;">
64 |             <div class="col-xs-24">
65 |                 <div class="progress theme-dark">
66 |                     <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
67 |                         <span class="sr-only">60% Complete</span>
68 |                     </div>
69 |                 </div>
70 |             </div>
71 |         </div>
72 | </div>
73 | 
74 |     <div class="col-md-24">
75 |         {{#markdown}}
76 | ```xml
77 | <div class="progress">
78 |     <div class="progress-bar" role="progressbar"
79 |     aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
80 |     style="width: 60%;">
81 |         <span class="sr-only">60%</span>
82 |     </div>
83 | </div>
84 | ```
85 |         {{/markdown}}
86 |     </div>
87 |     <div class="col-md-24">
88 |         <div class="guidance guidance-usage m-t-xs">
89 |             {{#markdown}}
90 | {{> progress-guidance.md}}
91 |             {{/markdown}}
92 |         </div>
93 |     </div>
94 | </div>
95 | </section>
96 | 


--------------------------------------------------------------------------------
/dist/images/winstrap.svg:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="utf-8"?>
 2 | <!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
 3 | <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 4 | 	 viewBox="0 0 600 200" style="enable-background:new 0 0 600 200;" xml:space="preserve">
 5 | <style type="text/css">
 6 | 	.st0{fill:#3076BC;}
 7 | 	.st1{opacity:0.6;}
 8 | </style>
 9 | <path class="st0" d="M467,18.4v156.7L590.7,199l4.5-198L467,18.4z M551,125h-1.5l-16.1,26.1l-21.4,2.2l16.2-28.3H513V95h38V125z
10 | 	 M551,88h-38V46.7l38,4.4V88z"/>
11 | <g class="st1">
12 | 	<path d="M108,46.7l-22.7,80.5H74.2L57.7,68.4c-0.7-2.5-1.1-5.2-1.3-8.2h-0.2c-0.2,2.8-0.7,5.5-1.5,8.1l-16.7,59H27L3.5,46.7h10.4
13 | 		L31,108.5c0.7,2.6,1.2,5.3,1.3,8.1h0.3c0.2-2,0.8-4.7,1.7-8.1l17.8-61.8h9l17.1,62.2c0.6,2.1,1,4.6,1.3,7.5h0.2
14 | 		c0.1-1.9,0.7-4.5,1.5-7.8l16.5-62H108z"/>
15 | 	<path d="M120.6,55.1c-1.6,0-3.1-0.6-4.2-1.7c-1.2-1.1-1.7-2.5-1.7-4.3s0.6-3.2,1.7-4.3c1.2-1.1,2.6-1.7,4.2-1.7
16 | 		c1.7,0,3.1,0.6,4.3,1.7c1.2,1.1,1.8,2.6,1.8,4.3c0,1.6-0.6,3.1-1.8,4.2C123.7,54.5,122.3,55.1,120.6,55.1z M125.1,127.2h-9.2V69.7
17 | 		h9.2V127.2z"/>
18 | 	<path d="M188.6,127.2h-9.2V94.4c0-12.2-4.5-18.3-13.4-18.3c-4.6,0-8.4,1.7-11.4,5.2c-3,3.5-4.5,7.8-4.5,13.1v32.8h-9.2V69.7h9.2
19 | 		v9.5h0.2c4.3-7.3,10.6-10.9,18.9-10.9c6.3,0,11.1,2,14.4,6.1c3.3,4.1,5,9.9,5,17.6V127.2z"/>
20 | 	<path d="M199.6,125.1v-9.9c5,3.7,10.5,5.6,16.6,5.6c8.1,0,12.1-2.7,12.1-8.1c0-1.5-0.3-2.8-1-3.9c-0.7-1.1-1.6-2-2.8-2.8
21 | 		c-1.2-0.8-2.6-1.6-4.2-2.2c-1.6-0.7-3.3-1.3-5.1-2c-2.5-1-4.8-2-6.7-3.1c-1.9-1-3.5-2.2-4.8-3.5c-1.3-1.3-2.3-2.8-2.9-4.4
22 | 		c-0.7-1.6-1-3.6-1-5.8c0-2.7,0.6-5.1,1.9-7.2c1.2-2.1,2.9-3.8,4.9-5.2c2.1-1.4,4.4-2.5,7-3.2c2.6-0.7,5.4-1.1,8.2-1.1
23 | 		c5,0,9.4,0.9,13.4,2.6v9.3c-4.2-2.8-9.1-4.2-14.6-4.2c-1.7,0-3.3,0.2-4.7,0.6c-1.4,0.4-2.6,0.9-3.6,1.7c-1,0.7-1.8,1.6-2.3,2.6
24 | 		c-0.5,1-0.8,2.1-0.8,3.3c0,1.5,0.3,2.8,0.8,3.8c0.5,1,1.3,1.9,2.4,2.7c1,0.8,2.3,1.5,3.8,2.1c1.5,0.6,3.2,1.3,5.1,2.1
25 | 		c2.5,1,4.8,2,6.9,3c2,1,3.7,2.2,5.2,3.5c1.4,1.3,2.5,2.8,3.3,4.5c0.8,1.7,1.2,3.7,1.2,6c0,2.8-0.6,5.3-1.9,7.4
26 | 		c-1.3,2.1-2.9,3.8-5,5.2c-2.1,1.4-4.5,2.4-7.2,3.1c-2.7,0.7-5.6,1-8.6,1C209.1,128.6,203.9,127.4,199.6,125.1z"/>
27 | 	<path d="M275.7,126.7c-2.2,1.2-5,1.8-8.6,1.8c-10.1,0-15.1-5.6-15.1-16.8v-34h-9.9v-7.9h9.9v-14l9.2-3v17h14.5v7.9h-14.5V110
28 | 		c0,3.9,0.7,6.6,2,8.3c1.3,1.6,3.5,2.5,6.5,2.5c2.3,0,4.3-0.6,6-1.9V126.7z"/>
29 | 	<path d="M315.1,79c-1.6-1.2-3.9-1.9-7-1.9c-3.9,0-7.2,1.9-9.9,5.6c-2.6,3.7-4,8.8-4,15.2v29.3h-9.2V69.7h9.2v11.9h0.2
30 | 		c1.3-4,3.3-7.2,6-9.5c2.7-2.3,5.7-3.4,9-3.4c2.4,0,4.2,0.3,5.5,0.8V79z"/>
31 | 	<path d="M363.4,127.2h-9.2v-9H354c-4,6.9-9.9,10.3-17.7,10.3c-5.7,0-10.2-1.5-13.5-4.5c-3.2-3-4.9-7.1-4.9-12.1
32 | 		c0-10.7,6.3-17,19-18.8l17.2-2.4c0-9.8-4-14.7-11.9-14.7c-6.9,0-13.2,2.4-18.8,7.1v-9.4c5.7-3.6,12.2-5.4,19.5-5.4
33 | 		c13.5,0,20.3,7.2,20.3,21.5V127.2z M354.2,98.1l-13.9,1.9c-4.3,0.6-7.5,1.7-9.7,3.2c-2.2,1.5-3.3,4.2-3.3,8.1c0,2.8,1,5.1,3,6.9
34 | 		c2,1.8,4.7,2.7,8,2.7c4.6,0,8.3-1.6,11.3-4.8s4.5-7.3,4.5-12.2V98.1z"/>
35 | 	<path d="M387.3,118.9h-0.2v34.8h-9.2v-84h9.2v10.1h0.2c4.5-7.6,11.2-11.5,19.9-11.5c7.4,0,13.2,2.6,17.4,7.7
36 | 		c4.2,5.1,6.2,12,6.2,20.7c0,9.6-2.3,17.3-7,23.1c-4.7,5.8-11.1,8.7-19.2,8.7C397.1,128.6,391.4,125.4,387.3,118.9z M387.1,95.7v8
37 | 		c0,4.8,1.5,8.8,4.6,12.1s7,5,11.8,5c5.6,0,10-2.1,13.1-6.4c3.2-4.3,4.7-10.2,4.7-17.8c0-6.4-1.5-11.4-4.4-15.1c-3-3.6-7-5.4-12-5.4
38 | 		c-5.4,0-9.7,1.9-12.9,5.6C388.7,85.4,387.1,90.1,387.1,95.7z"/>
39 | </g>
40 | </svg>
41 | 


--------------------------------------------------------------------------------
/src/images/winstrap.svg:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="utf-8"?>
 2 | <!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
 3 | <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 4 | 	 viewBox="0 0 600 200" style="enable-background:new 0 0 600 200;" xml:space="preserve">
 5 | <style type="text/css">
 6 | 	.st0{fill:#3076BC;}
 7 | 	.st1{opacity:0.6;}
 8 | </style>
 9 | <path class="st0" d="M467,18.4v156.7L590.7,199l4.5-198L467,18.4z M551,125h-1.5l-16.1,26.1l-21.4,2.2l16.2-28.3H513V95h38V125z
10 | 	 M551,88h-38V46.7l38,4.4V88z"/>
11 | <g class="st1">
12 | 	<path d="M108,46.7l-22.7,80.5H74.2L57.7,68.4c-0.7-2.5-1.1-5.2-1.3-8.2h-0.2c-0.2,2.8-0.7,5.5-1.5,8.1l-16.7,59H27L3.5,46.7h10.4
13 | 		L31,108.5c0.7,2.6,1.2,5.3,1.3,8.1h0.3c0.2-2,0.8-4.7,1.7-8.1l17.8-61.8h9l17.1,62.2c0.6,2.1,1,4.6,1.3,7.5h0.2
14 | 		c0.1-1.9,0.7-4.5,1.5-7.8l16.5-62H108z"/>
15 | 	<path d="M120.6,55.1c-1.6,0-3.1-0.6-4.2-1.7c-1.2-1.1-1.7-2.5-1.7-4.3s0.6-3.2,1.7-4.3c1.2-1.1,2.6-1.7,4.2-1.7
16 | 		c1.7,0,3.1,0.6,4.3,1.7c1.2,1.1,1.8,2.6,1.8,4.3c0,1.6-0.6,3.1-1.8,4.2C123.7,54.5,122.3,55.1,120.6,55.1z M125.1,127.2h-9.2V69.7
17 | 		h9.2V127.2z"/>
18 | 	<path d="M188.6,127.2h-9.2V94.4c0-12.2-4.5-18.3-13.4-18.3c-4.6,0-8.4,1.7-11.4,5.2c-3,3.5-4.5,7.8-4.5,13.1v32.8h-9.2V69.7h9.2
19 | 		v9.5h0.2c4.3-7.3,10.6-10.9,18.9-10.9c6.3,0,11.1,2,14.4,6.1c3.3,4.1,5,9.9,5,17.6V127.2z"/>
20 | 	<path d="M199.6,125.1v-9.9c5,3.7,10.5,5.6,16.6,5.6c8.1,0,12.1-2.7,12.1-8.1c0-1.5-0.3-2.8-1-3.9c-0.7-1.1-1.6-2-2.8-2.8
21 | 		c-1.2-0.8-2.6-1.6-4.2-2.2c-1.6-0.7-3.3-1.3-5.1-2c-2.5-1-4.8-2-6.7-3.1c-1.9-1-3.5-2.2-4.8-3.5c-1.3-1.3-2.3-2.8-2.9-4.4
22 | 		c-0.7-1.6-1-3.6-1-5.8c0-2.7,0.6-5.1,1.9-7.2c1.2-2.1,2.9-3.8,4.9-5.2c2.1-1.4,4.4-2.5,7-3.2c2.6-0.7,5.4-1.1,8.2-1.1
23 | 		c5,0,9.4,0.9,13.4,2.6v9.3c-4.2-2.8-9.1-4.2-14.6-4.2c-1.7,0-3.3,0.2-4.7,0.6c-1.4,0.4-2.6,0.9-3.6,1.7c-1,0.7-1.8,1.6-2.3,2.6
24 | 		c-0.5,1-0.8,2.1-0.8,3.3c0,1.5,0.3,2.8,0.8,3.8c0.5,1,1.3,1.9,2.4,2.7c1,0.8,2.3,1.5,3.8,2.1c1.5,0.6,3.2,1.3,5.1,2.1
25 | 		c2.5,1,4.8,2,6.9,3c2,1,3.7,2.2,5.2,3.5c1.4,1.3,2.5,2.8,3.3,4.5c0.8,1.7,1.2,3.7,1.2,6c0,2.8-0.6,5.3-1.9,7.4
26 | 		c-1.3,2.1-2.9,3.8-5,5.2c-2.1,1.4-4.5,2.4-7.2,3.1c-2.7,0.7-5.6,1-8.6,1C209.1,128.6,203.9,127.4,199.6,125.1z"/>
27 | 	<path d="M275.7,126.7c-2.2,1.2-5,1.8-8.6,1.8c-10.1,0-15.1-5.6-15.1-16.8v-34h-9.9v-7.9h9.9v-14l9.2-3v17h14.5v7.9h-14.5V110
28 | 		c0,3.9,0.7,6.6,2,8.3c1.3,1.6,3.5,2.5,6.5,2.5c2.3,0,4.3-0.6,6-1.9V126.7z"/>
29 | 	<path d="M315.1,79c-1.6-1.2-3.9-1.9-7-1.9c-3.9,0-7.2,1.9-9.9,5.6c-2.6,3.7-4,8.8-4,15.2v29.3h-9.2V69.7h9.2v11.9h0.2
30 | 		c1.3-4,3.3-7.2,6-9.5c2.7-2.3,5.7-3.4,9-3.4c2.4,0,4.2,0.3,5.5,0.8V79z"/>
31 | 	<path d="M363.4,127.2h-9.2v-9H354c-4,6.9-9.9,10.3-17.7,10.3c-5.7,0-10.2-1.5-13.5-4.5c-3.2-3-4.9-7.1-4.9-12.1
32 | 		c0-10.7,6.3-17,19-18.8l17.2-2.4c0-9.8-4-14.7-11.9-14.7c-6.9,0-13.2,2.4-18.8,7.1v-9.4c5.7-3.6,12.2-5.4,19.5-5.4
33 | 		c13.5,0,20.3,7.2,20.3,21.5V127.2z M354.2,98.1l-13.9,1.9c-4.3,0.6-7.5,1.7-9.7,3.2c-2.2,1.5-3.3,4.2-3.3,8.1c0,2.8,1,5.1,3,6.9
34 | 		c2,1.8,4.7,2.7,8,2.7c4.6,0,8.3-1.6,11.3-4.8s4.5-7.3,4.5-12.2V98.1z"/>
35 | 	<path d="M387.3,118.9h-0.2v34.8h-9.2v-84h9.2v10.1h0.2c4.5-7.6,11.2-11.5,19.9-11.5c7.4,0,13.2,2.6,17.4,7.7
36 | 		c4.2,5.1,6.2,12,6.2,20.7c0,9.6-2.3,17.3-7,23.1c-4.7,5.8-11.1,8.7-19.2,8.7C397.1,128.6,391.4,125.4,387.3,118.9z M387.1,95.7v8
37 | 		c0,4.8,1.5,8.8,4.6,12.1s7,5,11.8,5c5.6,0,10-2.1,13.1-6.4c3.2-4.3,4.7-10.2,4.7-17.8c0-6.4-1.5-11.4-4.4-15.1c-3-3.6-7-5.4-12-5.4
38 | 		c-5.4,0-9.7,1.9-12.9,5.6C388.7,85.4,387.1,90.1,387.1,95.7z"/>
39 | </g>
40 | </svg>
41 | 


--------------------------------------------------------------------------------
/dist/images/winstrap_white.svg:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="utf-8"?>
 2 | <!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
 3 | <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 4 | 	 viewBox="0 0 600 200" style="enable-background:new 0 0 600 200;" xml:space="preserve">
 5 | <style type="text/css">
 6 | 	.st0{fill:#FFFFFF;}
 7 | </style>
 8 | <path class="st0" d="M467,18.4v156.7L590.7,199l4.5-198L467,18.4z M551,125h-1.5l-16.1,26.1l-21.4,2.2l16.2-28.3H513V95h38V125z
 9 | 	 M551,88h-38V46.7l38,4.4V88z"/>
10 | <g>
11 | 	<path class="st0" d="M108,46.7l-22.7,80.5H74.2L57.7,68.4c-0.7-2.5-1.1-5.2-1.3-8.2h-0.2c-0.2,2.8-0.7,5.5-1.5,8.1l-16.7,59H27
12 | 		L3.5,46.7h10.4L31,108.5c0.7,2.6,1.2,5.3,1.3,8.1h0.3c0.2-2,0.8-4.7,1.7-8.1l17.8-61.8h9l17.1,62.2c0.6,2.1,1,4.6,1.3,7.5h0.2
13 | 		c0.1-1.9,0.7-4.5,1.5-7.8l16.5-62H108z"/>
14 | 	<path class="st0" d="M120.6,55.1c-1.6,0-3.1-0.6-4.2-1.7c-1.2-1.1-1.7-2.5-1.7-4.3s0.6-3.2,1.7-4.3c1.2-1.1,2.6-1.7,4.2-1.7
15 | 		c1.7,0,3.1,0.6,4.3,1.7c1.2,1.1,1.8,2.6,1.8,4.3c0,1.6-0.6,3.1-1.8,4.2C123.7,54.5,122.3,55.1,120.6,55.1z M125.1,127.2h-9.2V69.7
16 | 		h9.2V127.2z"/>
17 | 	<path class="st0" d="M188.6,127.2h-9.2V94.4c0-12.2-4.5-18.3-13.4-18.3c-4.6,0-8.4,1.7-11.4,5.2c-3,3.5-4.5,7.8-4.5,13.1v32.8h-9.2
18 | 		V69.7h9.2v9.5h0.2c4.3-7.3,10.6-10.9,18.9-10.9c6.3,0,11.1,2,14.4,6.1c3.3,4.1,5,9.9,5,17.6V127.2z"/>
19 | 	<path class="st0" d="M199.6,125.1v-9.9c5,3.7,10.5,5.6,16.6,5.6c8.1,0,12.1-2.7,12.1-8.1c0-1.5-0.3-2.8-1-3.9
20 | 		c-0.7-1.1-1.6-2-2.8-2.8c-1.2-0.8-2.6-1.6-4.2-2.2c-1.6-0.7-3.3-1.3-5.1-2c-2.5-1-4.8-2-6.7-3.1c-1.9-1-3.5-2.2-4.8-3.5
21 | 		c-1.3-1.3-2.3-2.8-2.9-4.4c-0.7-1.6-1-3.6-1-5.8c0-2.7,0.6-5.1,1.9-7.2c1.2-2.1,2.9-3.8,4.9-5.2c2.1-1.4,4.4-2.5,7-3.2
22 | 		c2.6-0.7,5.4-1.1,8.2-1.1c5,0,9.4,0.9,13.4,2.6v9.3c-4.2-2.8-9.1-4.2-14.6-4.2c-1.7,0-3.3,0.2-4.7,0.6c-1.4,0.4-2.6,0.9-3.6,1.7
23 | 		c-1,0.7-1.8,1.6-2.3,2.6c-0.5,1-0.8,2.1-0.8,3.3c0,1.5,0.3,2.8,0.8,3.8c0.5,1,1.3,1.9,2.4,2.7c1,0.8,2.3,1.5,3.8,2.1
24 | 		c1.5,0.6,3.2,1.3,5.1,2.1c2.5,1,4.8,2,6.9,3c2,1,3.7,2.2,5.2,3.5c1.4,1.3,2.5,2.8,3.3,4.5c0.8,1.7,1.2,3.7,1.2,6
25 | 		c0,2.8-0.6,5.3-1.9,7.4c-1.3,2.1-2.9,3.8-5,5.2c-2.1,1.4-4.5,2.4-7.2,3.1c-2.7,0.7-5.6,1-8.6,1
26 | 		C209.1,128.6,203.9,127.4,199.6,125.1z"/>
27 | 	<path class="st0" d="M275.7,126.7c-2.2,1.2-5,1.8-8.6,1.8c-10.1,0-15.1-5.6-15.1-16.8v-34h-9.9v-7.9h9.9v-14l9.2-3v17h14.5v7.9
28 | 		h-14.5V110c0,3.9,0.7,6.6,2,8.3c1.3,1.6,3.5,2.5,6.5,2.5c2.3,0,4.3-0.6,6-1.9V126.7z"/>
29 | 	<path class="st0" d="M315.1,79c-1.6-1.2-3.9-1.9-7-1.9c-3.9,0-7.2,1.9-9.9,5.6c-2.6,3.7-4,8.8-4,15.2v29.3h-9.2V69.7h9.2v11.9h0.2
30 | 		c1.3-4,3.3-7.2,6-9.5c2.7-2.3,5.7-3.4,9-3.4c2.4,0,4.2,0.3,5.5,0.8V79z"/>
31 | 	<path class="st0" d="M363.4,127.2h-9.2v-9H354c-4,6.9-9.9,10.3-17.7,10.3c-5.7,0-10.2-1.5-13.5-4.5c-3.2-3-4.9-7.1-4.9-12.1
32 | 		c0-10.7,6.3-17,19-18.8l17.2-2.4c0-9.8-4-14.7-11.9-14.7c-6.9,0-13.2,2.4-18.8,7.1v-9.4c5.7-3.6,12.2-5.4,19.5-5.4
33 | 		c13.5,0,20.3,7.2,20.3,21.5V127.2z M354.2,98.1l-13.9,1.9c-4.3,0.6-7.5,1.7-9.7,3.2c-2.2,1.5-3.3,4.2-3.3,8.1c0,2.8,1,5.1,3,6.9
34 | 		c2,1.8,4.7,2.7,8,2.7c4.6,0,8.3-1.6,11.3-4.8s4.5-7.3,4.5-12.2V98.1z"/>
35 | 	<path class="st0" d="M387.3,118.9h-0.2v34.8h-9.2v-84h9.2v10.1h0.2c4.5-7.6,11.2-11.5,19.9-11.5c7.4,0,13.2,2.6,17.4,7.7
36 | 		c4.2,5.1,6.2,12,6.2,20.7c0,9.6-2.3,17.3-7,23.1c-4.7,5.8-11.1,8.7-19.2,8.7C397.1,128.6,391.4,125.4,387.3,118.9z M387.1,95.7v8
37 | 		c0,4.8,1.5,8.8,4.6,12.1s7,5,11.8,5c5.6,0,10-2.1,13.1-6.4c3.2-4.3,4.7-10.2,4.7-17.8c0-6.4-1.5-11.4-4.4-15.1c-3-3.6-7-5.4-12-5.4
38 | 		c-5.4,0-9.7,1.9-12.9,5.6C388.7,85.4,387.1,90.1,387.1,95.7z"/>
39 | </g>
40 | </svg>
41 | 


--------------------------------------------------------------------------------
/src/images/winstrap_white.svg:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="utf-8"?>
 2 | <!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
 3 | <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 4 | 	 viewBox="0 0 600 200" style="enable-background:new 0 0 600 200;" xml:space="preserve">
 5 | <style type="text/css">
 6 | 	.st0{fill:#FFFFFF;}
 7 | </style>
 8 | <path class="st0" d="M467,18.4v156.7L590.7,199l4.5-198L467,18.4z M551,125h-1.5l-16.1,26.1l-21.4,2.2l16.2-28.3H513V95h38V125z
 9 | 	 M551,88h-38V46.7l38,4.4V88z"/>
10 | <g>
11 | 	<path class="st0" d="M108,46.7l-22.7,80.5H74.2L57.7,68.4c-0.7-2.5-1.1-5.2-1.3-8.2h-0.2c-0.2,2.8-0.7,5.5-1.5,8.1l-16.7,59H27
12 | 		L3.5,46.7h10.4L31,108.5c0.7,2.6,1.2,5.3,1.3,8.1h0.3c0.2-2,0.8-4.7,1.7-8.1l17.8-61.8h9l17.1,62.2c0.6,2.1,1,4.6,1.3,7.5h0.2
13 | 		c0.1-1.9,0.7-4.5,1.5-7.8l16.5-62H108z"/>
14 | 	<path class="st0" d="M120.6,55.1c-1.6,0-3.1-0.6-4.2-1.7c-1.2-1.1-1.7-2.5-1.7-4.3s0.6-3.2,1.7-4.3c1.2-1.1,2.6-1.7,4.2-1.7
15 | 		c1.7,0,3.1,0.6,4.3,1.7c1.2,1.1,1.8,2.6,1.8,4.3c0,1.6-0.6,3.1-1.8,4.2C123.7,54.5,122.3,55.1,120.6,55.1z M125.1,127.2h-9.2V69.7
16 | 		h9.2V127.2z"/>
17 | 	<path class="st0" d="M188.6,127.2h-9.2V94.4c0-12.2-4.5-18.3-13.4-18.3c-4.6,0-8.4,1.7-11.4,5.2c-3,3.5-4.5,7.8-4.5,13.1v32.8h-9.2
18 | 		V69.7h9.2v9.5h0.2c4.3-7.3,10.6-10.9,18.9-10.9c6.3,0,11.1,2,14.4,6.1c3.3,4.1,5,9.9,5,17.6V127.2z"/>
19 | 	<path class="st0" d="M199.6,125.1v-9.9c5,3.7,10.5,5.6,16.6,5.6c8.1,0,12.1-2.7,12.1-8.1c0-1.5-0.3-2.8-1-3.9
20 | 		c-0.7-1.1-1.6-2-2.8-2.8c-1.2-0.8-2.6-1.6-4.2-2.2c-1.6-0.7-3.3-1.3-5.1-2c-2.5-1-4.8-2-6.7-3.1c-1.9-1-3.5-2.2-4.8-3.5
21 | 		c-1.3-1.3-2.3-2.8-2.9-4.4c-0.7-1.6-1-3.6-1-5.8c0-2.7,0.6-5.1,1.9-7.2c1.2-2.1,2.9-3.8,4.9-5.2c2.1-1.4,4.4-2.5,7-3.2
22 | 		c2.6-0.7,5.4-1.1,8.2-1.1c5,0,9.4,0.9,13.4,2.6v9.3c-4.2-2.8-9.1-4.2-14.6-4.2c-1.7,0-3.3,0.2-4.7,0.6c-1.4,0.4-2.6,0.9-3.6,1.7
23 | 		c-1,0.7-1.8,1.6-2.3,2.6c-0.5,1-0.8,2.1-0.8,3.3c0,1.5,0.3,2.8,0.8,3.8c0.5,1,1.3,1.9,2.4,2.7c1,0.8,2.3,1.5,3.8,2.1
24 | 		c1.5,0.6,3.2,1.3,5.1,2.1c2.5,1,4.8,2,6.9,3c2,1,3.7,2.2,5.2,3.5c1.4,1.3,2.5,2.8,3.3,4.5c0.8,1.7,1.2,3.7,1.2,6
25 | 		c0,2.8-0.6,5.3-1.9,7.4c-1.3,2.1-2.9,3.8-5,5.2c-2.1,1.4-4.5,2.4-7.2,3.1c-2.7,0.7-5.6,1-8.6,1
26 | 		C209.1,128.6,203.9,127.4,199.6,125.1z"/>
27 | 	<path class="st0" d="M275.7,126.7c-2.2,1.2-5,1.8-8.6,1.8c-10.1,0-15.1-5.6-15.1-16.8v-34h-9.9v-7.9h9.9v-14l9.2-3v17h14.5v7.9
28 | 		h-14.5V110c0,3.9,0.7,6.6,2,8.3c1.3,1.6,3.5,2.5,6.5,2.5c2.3,0,4.3-0.6,6-1.9V126.7z"/>
29 | 	<path class="st0" d="M315.1,79c-1.6-1.2-3.9-1.9-7-1.9c-3.9,0-7.2,1.9-9.9,5.6c-2.6,3.7-4,8.8-4,15.2v29.3h-9.2V69.7h9.2v11.9h0.2
30 | 		c1.3-4,3.3-7.2,6-9.5c2.7-2.3,5.7-3.4,9-3.4c2.4,0,4.2,0.3,5.5,0.8V79z"/>
31 | 	<path class="st0" d="M363.4,127.2h-9.2v-9H354c-4,6.9-9.9,10.3-17.7,10.3c-5.7,0-10.2-1.5-13.5-4.5c-3.2-3-4.9-7.1-4.9-12.1
32 | 		c0-10.7,6.3-17,19-18.8l17.2-2.4c0-9.8-4-14.7-11.9-14.7c-6.9,0-13.2,2.4-18.8,7.1v-9.4c5.7-3.6,12.2-5.4,19.5-5.4
33 | 		c13.5,0,20.3,7.2,20.3,21.5V127.2z M354.2,98.1l-13.9,1.9c-4.3,0.6-7.5,1.7-9.7,3.2c-2.2,1.5-3.3,4.2-3.3,8.1c0,2.8,1,5.1,3,6.9
34 | 		c2,1.8,4.7,2.7,8,2.7c4.6,0,8.3-1.6,11.3-4.8s4.5-7.3,4.5-12.2V98.1z"/>
35 | 	<path class="st0" d="M387.3,118.9h-0.2v34.8h-9.2v-84h9.2v10.1h0.2c4.5-7.6,11.2-11.5,19.9-11.5c7.4,0,13.2,2.6,17.4,7.7
36 | 		c4.2,5.1,6.2,12,6.2,20.7c0,9.6-2.3,17.3-7,23.1c-4.7,5.8-11.1,8.7-19.2,8.7C397.1,128.6,391.4,125.4,387.3,118.9z M387.1,95.7v8
37 | 		c0,4.8,1.5,8.8,4.6,12.1s7,5,11.8,5c5.6,0,10-2.1,13.1-6.4c3.2-4.3,4.7-10.2,4.7-17.8c0-6.4-1.5-11.4-4.4-15.1c-3-3.6-7-5.4-12-5.4
38 | 		c-5.4,0-9.7,1.9-12.9,5.6C388.7,85.4,387.1,90.1,387.1,95.7z"/>
39 | </g>
40 | </svg>
41 | 


--------------------------------------------------------------------------------
/src/doc/partials/putbox.hbs:
--------------------------------------------------------------------------------
  1 | <section class="section" id="putbox">
  2 |     <header class="section-header row">
  3 |         <h1 class="section-title col-xs-24">
  4 |             <a href="#putbox">Put Box</a>
  5 |         </h1>
  6 |     </header>
  7 |     <div class="row">
  8 |         <div class="col-md-12">
  9 | 			<h4 class="section-title">Default</h4>
 10 | 			<div class="m-t-xxxs p-t-xxxs p-b-xs">
 11 | 				<div class="putbox">
 12 | 					<div class="putbox-icon">
 13 | 						<span class="glyph glyph-clock"></span>
 14 | 					</div>
 15 | 					<div class="putbox-content">
 16 | 						<div class="content-title">Time format:</div>
 17 | 						<form class="content-form">
 18 | 							<input type="text" class="form-control" value="H:i"/>
 19 | 						</form>
 20 | 					</div>
 21 | 				</div>
 22 | 				<div class="putbox">
 23 | 					<div class="putbox-icon">
 24 | 						<span class="glyph glyph-picture"></span>
 25 | 					</div>
 26 | 					<div class="putbox-content">
 27 | 						<div class="content-title">New photos will save to:</div>
 28 | 						<form class="content-form">
 29 | 							<div class="combobox">
 30 | 								<select class="form-control">
 31 | 									<option>This PC (C:)</option>
 32 | 									<option>Local Disk (D:)</option>
 33 | 								</select>
 34 | 							</div>
 35 | 						</form>
 36 | 						<a href="#" class="btn btn-link btn-block">Advanced options</a>
 37 | 					</div>
 38 | 				</div>
 39 | 			</div>
 40 | 		</div>
 41 | 		<div class="col-md-12">
 42 | 			<h4 class="section-title">Alt</h4>
 43 | 			<div class="m-t-xxxs p-t-xxxs p-b-xs p-l-xs color-bg-dark-vivid-high">
 44 | 				<div class="putbox theme-alt">
 45 | 					<div class="putbox-icon">
 46 | 						<span class="glyph glyph-clock"></span>
 47 | 					</div>
 48 | 					<div class="putbox-content">
 49 | 						<div class="content-title">Time format:</div>
 50 | 						<form class="content-form theme-alt">
 51 | 							<input type="text" class="form-control" value="H:i"/>
 52 | 						</form>
 53 | 					</div>
 54 | 				</div>
 55 | 				<div class="putbox theme-alt">
 56 | 					<div class="putbox-icon">
 57 | 						<span class="glyph glyph-picture"></span>
 58 | 					</div>
 59 | 					<div class="putbox-content">
 60 | 						<div class="content-title">New photos will save to:</div>
 61 | 						<form class="content-form theme-alt">
 62 | 							<div class="combobox">
 63 | 								<select class="form-control">
 64 | 									<option>This PC (C:)</option>
 65 | 									<option>Local Disk (D:)</option>
 66 | 								</select>
 67 | 							</div>
 68 | 						</form>
 69 | 						<a href="#" class="btn btn-link btn-block">Advanced options</a>
 70 | 					</div>
 71 | 				</div>
 72 | 			</div>
 73 | 		</div>
 74 |     </div>
 75 | 	<div class="row">
 76 | 		<div class="col-xs-24">
 77 | 			{{#markdown}}
 78 | ```xml
 79 | 	<div class="putbox">
 80 | 	<div class="putbox-icon">
 81 | 		<span class="glyph glyph-clock"></span>
 82 | 	</div>
 83 | 	<div class="putbox-content">
 84 | 		<div class="content-title">Time format:</div>
 85 | 		<form class="content-form">
 86 | 			<input type="text" class="form-control" value="H:i"/>
 87 | 		</form>
 88 | 	</div>
 89 | </div>
 90 | <div class="putbox">
 91 | 	<div class="putbox-icon">
 92 | 		<span class="glyph glyph-picture"></span>
 93 | 	</div>
 94 | 	<div class="putbox-content">
 95 | 		<div class="content-title">New photos will save to:</div>
 96 | 		<form class="content-form">
 97 | 			<div class="combobox">
 98 | 				<select class="form-control">
 99 | 					<option>This PC (C:)</option>
100 | 					<option>Local Disk (D:)</option>
101 | 				</select>
102 | 			</div>
103 | 		</form>
104 | 		<a href="#" class="btn btn-link btn-block">Advanced options</a>
105 | 	</div>
106 | </div>
107 | ```
108 |         	{{/markdown}}
109 | 		</div>
110 | 	</div>
111 | </section>
112 | 


--------------------------------------------------------------------------------
/src/doc/partials/page-header.hbs:
--------------------------------------------------------------------------------
  1 | <div class="page-header" id="page-header">
  2 |     <div class="container">
  3 |         <div class="row">
  4 |             <div class="col-xs-24">
  5 |                 <h1>Layout</h1>
  6 | 
  7 |                 <ul class="nav nav-pills" data-scroll="smooth">
  8 |                     <li role="presentation">
  9 |                         <a href="#page-header">Page header</a>
 10 |                     </li>
 11 |                     <li role="presentation">
 12 |                         <a href="#grid">Grid</a>
 13 |                     </li>
 14 |                     <li role="presentation">
 15 |                         <a href="#grid-small-gutters">Small gutters</a>
 16 |                     </li>
 17 |                     <li role="presentation">
 18 |                         <a href="#spacers">Spacers</a>
 19 |                     </li>
 20 |                 </ul>
 21 |             </div>
 22 |         </div>
 23 |     </div>
 24 | </div>
 25 | 
 26 | <div class="container">
 27 | 
 28 |     <section class="section">
 29 |         <header class="section-header row">
 30 |             <h1 class="section-title col-xs-24">
 31 |                 <a href="#page-header">Page header</a>
 32 |             </h1>
 33 |         </header>
 34 | 
 35 |         <div class="row">
 36 |             <div class="col-md-12">
 37 |                 <p>
 38 |                     The basic structure:
 39 |                 </p>
 40 | 
 41 |                 {{#markdown}}
 42 | ```xml
 43 | <div class="page-header">
 44 |     <div class="container">
 45 |         <div class="row">
 46 |             <div class="col-xs-24">
 47 |                 <h1>This is a page header</h1>
 48 |                 <p>With some content</p>
 49 | 
 50 |                 <ul class="nav nav-pills">
 51 |                     <li role="presentation" class="active">
 52 |                         <a href="#nav-item-1">Nav item 1</a>
 53 |                     </li>
 54 |                     <li role="presentation">
 55 |                         <a href="#nav-item-2">Nav item 2</a>
 56 |                     </li>
 57 |                     <li role="presentation">
 58 |                         <a href="#nav-item-3">Nav item 3</a>
 59 |                     </li>
 60 |                 </ul>
 61 |             </div>
 62 |         </div>
 63 |     </div>
 64 | </div>
 65 | ```
 66 |                 {{/markdown}}
 67 |             </div>
 68 | 
 69 |             <div class="col-md-12">
 70 |                 <p>
 71 |                     The JavaScript code to enable smooth scrolling:
 72 |                 </p>
 73 | 
 74 |                 {{#markdown}}
 75 | ```javascript
 76 | $(function () {
 77 |     $('[data-scroll="smooth"] a[href*=#]:not([href=#])').click(function () {
 78 |         if (location.pathname.replace(/^\//, '') === this.pathname.replace(/^\//, '') &&
 79 |             location.hostname === this.hostname) {
 80 | 
 81 |             var target = $(this.hash);
 82 |             target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
 83 | 
 84 |             if (target.length) {
 85 |                 $('html, body').animate({
 86 |                     scrollTop: target.offset().top
 87 |                 }, 1500);
 88 | 
 89 |                 return false; // prevent default href
 90 |             }
 91 |         }
 92 |     });
 93 | });
 94 | ```
 95 |                 {{/markdown}}
 96 |             </div>
 97 |         </div>
 98 | 
 99 |         <div class="row">
100 |             <div class="col-md-24">
101 |                 <div class="guidance guidance-usage m-t-xs">
102 |                     {{#markdown}}
103 | {{> page-header-guidance.md}}
104 |                     {{/markdown}}
105 |                 </div>
106 |             </div>
107 |         </div>
108 | 
109 |     </section>
110 |     <hr/>
111 | 
112 | </div>
113 | 


--------------------------------------------------------------------------------
/src/scss/override/_navs.scss:
--------------------------------------------------------------------------------
  1 | //
  2 | // Static resources
  3 | //
  4 | $pivot-horizontal-padding:                                                      12px;
  5 | $pivot-hover-color:                                                             rgba($color-type-primary, 0.8);
  6 | $pivot-hover-color-alt:                                                         rgba($color-type-primary-alt, 0.8);
  7 | 
  8 | //
  9 | // Navbar
 10 | //
 11 | .navbar {
 12 |     .nav {
 13 |         li {
 14 |             margin: 0;
 15 |         }
 16 |         
 17 |         // Open dropdowns
 18 |         .open > a {
 19 |             &,
 20 |             &:hover,
 21 |             &:focus {
 22 |                 border: none;
 23 |             }
 24 |         }
 25 |     }
 26 | }
 27 | 
 28 | // Need to get real specific to override Bootstrap here, hence descendant child selectors
 29 | // Without this .side-navigation gets ugly backgrounds on hover & focus
 30 | .nav > li {
 31 |     > a:hover,
 32 |     > a:focus {
 33 |         background-color: transparent;
 34 |     }
 35 | }
 36 | 
 37 | //
 38 | // Nav pills
 39 | //
 40 | .page-header .nav-pills {
 41 |     margin: spacing(xs) 0;
 42 |     
 43 |     li {
 44 |         margin: 0;
 45 |     }
 46 | 
 47 |     > li > a {
 48 |         margin: 0 spacing(xs) 0 0;
 49 |         padding: spacing(xxs) 0;
 50 |         color: $color-type-primary;
 51 | 
 52 |         &:hover {
 53 |             color: $brand-primary;
 54 |             text-decoration: underline;
 55 |             background: none;
 56 |         }
 57 |     }
 58 | 
 59 |     > li.active > a,
 60 |     > li.active > a:hover,
 61 |     > li.active > a:focus {
 62 |         background: none;
 63 |         color: $brand-primary;
 64 |         text-decoration: none;
 65 |     }
 66 | }
 67 | 
 68 | //
 69 | // Tabs
 70 | // MDL: Pivot control
 71 | //
 72 | .nav-tabs {
 73 |     border-bottom: 0;
 74 |     margin-left: -($pivot-horizontal-padding); // Offsetting padding on the individual tabs
 75 |     margin-right: -($pivot-horizontal-padding); // Offsetting padding on the individual tabs
 76 | 
 77 |     > li {
 78 |         margin: 0;
 79 | 
 80 |         // Main tabs
 81 |         // Resetting most of the Bootstrap styles
 82 |         > a {
 83 |             @include type(t4);
 84 |             border: 0;
 85 |             border-radius: 0;
 86 |             margin: 0;
 87 |             padding-left: $pivot-horizontal-padding;
 88 |             padding-right: $pivot-horizontal-padding;
 89 | 
 90 |             &:hover,
 91 |             &:focus {
 92 |                 border: 0;
 93 |                 background: transparent;
 94 |             }
 95 |         }
 96 |         // Active tab
 97 |         &.active > a {
 98 |             &,
 99 |             &:hover,
100 |             &:focus {
101 |                 border: 0;
102 |                 background: transparent;
103 |             }
104 |         }
105 | 
106 |     }
107 | 
108 |     // Default colors
109 |     > li > a {
110 |         color: $color-type-secondary;
111 | 
112 |         &:hover,
113 |         &:focus {
114 |             color: $pivot-hover-color;
115 |         }
116 |     }
117 |     > li.active > a {
118 |         color: $color-type-primary;
119 | 
120 |         &:hover,
121 |         &:focus {
122 |             color: $pivot-hover-color;
123 |         }
124 |     }
125 | 
126 |     // Alt colors
127 |     &.theme-alt {
128 |         > li > a {
129 |             color: $color-type-secondary-alt;
130 | 
131 |             &:hover,
132 |             &:focus {
133 |                 color: $pivot-hover-color-alt;
134 |             }
135 |         }
136 |         > li.active > a {
137 |             color: $color-type-primary-alt;
138 | 
139 |             &:hover,
140 |             &:focus {
141 |                 color: $pivot-hover-color-alt;
142 |             }
143 |         }
144 |     }
145 | }
146 | 


--------------------------------------------------------------------------------
/src/doc/partials/pagination.hbs:
--------------------------------------------------------------------------------
  1 | <section class="section" id="pagination">
  2 |     <header class="section-header row">
  3 |         <h1 class="section-title col-xs-24">
  4 |             <a href="#pagination">Pagination</a>
  5 |         </h1>
  6 |     </header>
  7 | 
  8 |     <div class="row">
  9 |         <div class="col-xs-24">
 10 |             <h4>Default</h4>
 11 |             {{> pagination-base }}
 12 | 
 13 |             <h4>Alt</h4>
 14 |             <div class="color-black">
 15 |                 <nav>
 16 |                     <ul class="pagination theme-alt">
 17 |                         <!-- Add a disabled class to a li element to hide it -->
 18 |                         <li class="pagination-prev">
 19 |                             <a href="#" aria-label="Previous">
 20 |                                 <i aria-hidden="true" class="glyph glyph-chevron-left-2"></i>
 21 |                             </a>
 22 |                         </li>
 23 | 
 24 |                         <li><a href="#">1</a></li>
 25 | 
 26 |                         <li class="pagination-ellipsis"><span>&hellip;</span></li>
 27 | 
 28 |                         <li><a href="#">5</a></li>
 29 |                         <li><a href="#">6</a></li>
 30 | 
 31 |                         <li class="active"><a href="#">7</a></li>
 32 | 
 33 |                         <li><a href="#">8</a></li>
 34 |                         <li><a href="#">9</a></li>
 35 | 
 36 |                         <li class="pagination-ellipsis"><span>&hellip;</span></li>
 37 | 
 38 |                         <li><a href="#">15</a></li>
 39 | 
 40 |                         <li class="pagination-next">
 41 |                             <a href="#" aria-label="Next">
 42 |                                 <i aria-hidden="true" class="glyph glyph-chevron-right-2"></i>
 43 |                             </a>
 44 |                         </li>
 45 |                     </ul>
 46 |                 </nav>
 47 |             </div>
 48 | 
 49 |             {{#markdown}}
 50 | ```xml
 51 | {{> pagination-base }}
 52 | ```
 53 |             {{/markdown}}
 54 |         </div>
 55 |     </div>
 56 |     <div class="row">
 57 |         <div class="col-md-24">
 58 |             <div class="guidance guidance-usage m-t-xs">
 59 |                 {{#markdown}}
 60 | {{> pagination-guidance.md}}
 61 |                 {{/markdown}}
 62 |             </div>
 63 |         </div>
 64 |     </div>
 65 |     
 66 |     <hr />
 67 |     <div class="row">
 68 |         <div class="col-xs-24">
 69 |             <h2>Pager</h2>
 70 |             <h4>Default</h4>
 71 |             {{> pagination-pager }}
 72 | 
 73 |             <h4>Alt</h4>
 74 |             <div class="color-black">
 75 |                 <nav>
 76 |                     <ul class="pager theme-alt">
 77 |                         <li class="pager-prev">
 78 |                             <a href="#" aria-label="Previous">
 79 |                                 <i aria-hidden="true" class="glyph glyph-chevron-left-2"></i>
 80 |                             </a>
 81 |                         </li>
 82 |                         <li class="pager-next">
 83 |                             <a href="#" aria-label="Next">
 84 |                                 <i aria-hidden="true" class="glyph glyph-chevron-right-2"></i>
 85 |                             </a>
 86 |                         </li>
 87 |                     </ul>
 88 |                 </nav>
 89 |             </div>
 90 | 
 91 |             {{#markdown}}
 92 | ```xml
 93 | {{> pagination-pager }}
 94 | ```
 95 |             {{/markdown}}
 96 |         </div>
 97 |     </div>
 98 |     <div class="row">
 99 |         <div class="col-md-24">
100 |             <div class="guidance guidance-usage m-t-xs">
101 |                 {{#markdown}}
102 | {{> pagination-guidance.md}}
103 |                 {{/markdown}}
104 |             </div>
105 |         </div>
106 |     </div>
107 | 
108 | 
109 | </section>
110 | 


--------------------------------------------------------------------------------
/src/doc/partials/grid-small-gutter.hbs:
--------------------------------------------------------------------------------
  1 | <section class="section" id="grid-small-gutters">
  2 |     <header class="section-header row">
  3 |         <h1 class="section-title col-xs-24">
  4 |             <a href="#grid-small-gutters">Grid with small gutters</a>
  5 |         </h1>
  6 |     </header>
  7 | 
  8 |     <div class="row row-sm section-gallery">
  9 | 
 10 |         <div class="col-md-6">
 11 | 
 12 |             <figure class="media">
 13 |                 <div class="media-img ratio-2-1">
 14 |                     <a href="">
 15 |                         <img src="http://lorempixel.com/400/200/nature" alt="" />
 16 |                     </a>
 17 |                 </div>
 18 | 
 19 |                 <figcaption class="media-caption">
 20 |                     <h4 class="media-header">
 21 |                         <a href="">Header</a>
 22 |                     </h4>
 23 |                     <div class="media-subheader">
 24 |                         <a href="">Subheader</a>
 25 |                     </div>
 26 |                 </figcaption>
 27 |             </figure>
 28 | 
 29 |         </div>
 30 | 
 31 |         <div class="col-md-6">
 32 | 
 33 |             <figure class="media">
 34 |                 <div class="media-img ratio-2-1">
 35 |                     <a href="">
 36 |                         <img src="http://lorempixel.com/400/200/nature" alt="" />
 37 |                     </a>
 38 |                 </div>
 39 | 
 40 |                 <figcaption class="media-caption">
 41 |                     <h4 class="media-header">
 42 |                         <a href="">Header</a>
 43 |                     </h4>
 44 |                     <div class="media-subheader">
 45 |                         <a href="">Subheader</a>
 46 |                     </div>
 47 |                 </figcaption>
 48 |             </figure>
 49 | 
 50 |         </div>
 51 | 
 52 |         <div class="col-md-6">
 53 | 
 54 |             <figure class="media">
 55 |                 <div class="media-img ratio-2-1">
 56 |                     <a href="">
 57 |                         <img src="http://lorempixel.com/400/200/nature" alt="" />
 58 |                     </a>
 59 |                 </div>
 60 | 
 61 |                 <figcaption class="media-caption">
 62 |                     <h4 class="media-header">
 63 |                         <a href="">Header</a>
 64 |                     </h4>
 65 |                     <div class="media-subheader">
 66 |                         <a href="">Subheader</a>
 67 |                     </div>
 68 |                 </figcaption>
 69 |             </figure>
 70 | 
 71 |         </div>
 72 | 
 73 |         <div class="col-md-6">
 74 | 
 75 |             <figure class="media">
 76 |                 <div class="media-img ratio-2-1">
 77 |                     <a href="">
 78 |                         <img src="http://lorempixel.com/400/200/nature" alt="" />
 79 |                     </a>
 80 |                 </div>
 81 | 
 82 |                 <figcaption class="media-caption">
 83 |                     <h4 class="media-header">
 84 |                         <a href="">Header</a>
 85 |                     </h4>
 86 |                     <div class="media-subheader">
 87 |                         <a href="">Subheader</a>
 88 |                     </div>
 89 |                 </figcaption>
 90 |             </figure>
 91 | 
 92 |         </div>
 93 |     </div>
 94 | 
 95 |     <div class="row">
 96 |         <div class="col-xs-24">
 97 |             {{#markdown}}
 98 | ```xml
 99 | <div class="container">
100 |     <div class="row row-sm">
101 |         <div class="col-md-6">
102 |             …
103 |         </div>
104 |     </div>
105 | </div>
106 | ```
107 |             {{/markdown}}
108 |         </div>
109 | 
110 |         <div class="col-md-24">
111 |             <div class="guidance guidance-usage m-t-xs">
112 |                 {{#markdown}}
113 | {{> grid-small-gutter-guidance.md}}
114 |                 {{/markdown}}
115 |             </div>
116 |         </div>
117 | 
118 |     </div>
119 | </section>
120 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
  1 | ## Ignore Visual Studio temporary files, build results, and
  2 | ## files generated by popular Visual Studio add-ons.
  3 | 
  4 | ## Added for OneUI project
  5 | 
  6 | /www/
  7 | 
  8 | [Nn]ode_modules/*
  9 | [Bb]ower_components/*
 10 | 
 11 | # User-specific files
 12 | *.suo
 13 | *.user
 14 | *.sln.docstates
 15 | *.sublime-workspace
 16 | *.sublime-project
 17 | .DS_Store
 18 | .idea
 19 | 
 20 | .jshintrc
 21 | 
 22 | # Build results
 23 | [Dd]ebug/
 24 | [Dd]ebugPublic/
 25 | [Rr]elease/
 26 | x64/
 27 | build/
 28 | bld/
 29 | [Bb]in/
 30 | [Oo]bj/
 31 | 
 32 | # Roslyn cache directories
 33 | *.ide/
 34 | 
 35 | # MSTest test Results
 36 | [Tt]est[Rr]esult*/
 37 | [Bb]uild[Ll]og.*
 38 | 
 39 | #NUNIT
 40 | *.VisualState.xml
 41 | TestResult.xml
 42 | 
 43 | # Build Results of an ATL Project
 44 | [Dd]ebugPS/
 45 | [Rr]eleasePS/
 46 | dlldata.c
 47 | 
 48 | *_i.c
 49 | *_p.c
 50 | *_i.h
 51 | *.ilk
 52 | *.meta
 53 | *.obj
 54 | *.pch
 55 | *.pdb
 56 | *.pgc
 57 | *.pgd
 58 | *.rsp
 59 | *.sbr
 60 | *.tlb
 61 | *.tli
 62 | *.tlh
 63 | *.tmp
 64 | *.tmp_proj
 65 | *.log
 66 | *.vspscc
 67 | *.vssscc
 68 | .builds
 69 | *.pidb
 70 | *.svclog
 71 | *.scc
 72 | 
 73 | # Chutzpah Test files
 74 | _Chutzpah*
 75 | 
 76 | # Visual C++ cache files
 77 | ipch/
 78 | *.aps
 79 | *.ncb
 80 | *.opensdf
 81 | *.sdf
 82 | *.cachefile
 83 | 
 84 | # Visual Studio profiler
 85 | *.psess
 86 | *.vsp
 87 | *.vspx
 88 | 
 89 | # TFS 2012 Local Workspace
 90 | $tf/
 91 | 
 92 | # Guidance Automation Toolkit
 93 | *.gpState
 94 | 
 95 | # ReSharper is a .NET coding add-in
 96 | _ReSharper*/
 97 | *.[Rr]e[Ss]harper
 98 | *.DotSettings.user
 99 | 
100 | # JustCode is a .NET coding addin-in
101 | .JustCode
102 | 
103 | # TeamCity is a build add-in
104 | _TeamCity*
105 | 
106 | # DotCover is a Code Coverage Tool
107 | *.dotCover
108 | 
109 | # NCrunch
110 | _NCrunch_*
111 | .*crunch*.local.xml
112 | 
113 | # MightyMoose
114 | *.mm.*
115 | AutoTest.Net/
116 | 
117 | # Web workbench (sass)
118 | .sass-cache/
119 | 
120 | # Installshield output folder
121 | [Ee]xpress/
122 | 
123 | # DocProject is a documentation generator add-in
124 | DocProject/buildhelp/
125 | DocProject/Help/*.HxT
126 | DocProject/Help/*.HxC
127 | DocProject/Help/*.hhc
128 | DocProject/Help/*.hhk
129 | DocProject/Help/*.hhp
130 | DocProject/Help/Html2
131 | DocProject/Help/html
132 | 
133 | # Click-Once directory
134 | publish/
135 | 
136 | # Publish Web Output
137 | *.[Pp]ublish.xml
138 | *.azurePubxml
139 | ## TODO: Comment the next line if you want to checkin your
140 | ## web deploy settings but do note that will include unencrypted
141 | ## passwords
142 | #*.pubxml
143 | 
144 | # NuGet Packages Directory
145 | packages/*
146 | ## TODO: If the tool you use requires repositories.config
147 | ## uncomment the next line
148 | #!packages/repositories.config
149 | 
150 | # Enable "build/" folder in the NuGet Packages folder since
151 | # NuGet packages use it for MSBuild targets.
152 | # This line needs to be after the ignore of the build folder
153 | # (and the packages folder if the line above has been uncommented)
154 | !packages/build/
155 | 
156 | # Windows Azure Build Output
157 | csx/
158 | *.build.csdef
159 | 
160 | # Windows Store app package directory
161 | AppPackages/
162 | 
163 | # Others
164 | sql/
165 | *.Cache
166 | ClientBin/
167 | [Ss]tyle[Cc]op.*
168 | ~$*
169 | *~
170 | *.dbmdl
171 | *.dbproj.schemaview
172 | *.pfx
173 | *.publishsettings
174 | node_modules/
175 | 
176 | # RIA/Silverlight projects
177 | Generated_Code/
178 | 
179 | # Backup & report files from converting an old project file
180 | # to a newer Visual Studio version. Backup files are not needed,
181 | # because we have git ;-)
182 | _UpgradeReport_Files/
183 | Backup*/
184 | UpgradeLog*.XML
185 | UpgradeLog*.htm
186 | 
187 | # SQL Server files
188 | *.mdf
189 | *.ldf
190 | 
191 | # Business Intelligence projects
192 | *.rdl.data
193 | *.bim.layout
194 | *.bim_*.settings
195 | 
196 | # Microsoft Fakes
197 | FakesAssemblies/
198 | 
199 | # LightSwitch generated files
200 | GeneratedArtifacts/
201 | _Pvt_Extensions/
202 | ModelManifest.xml


--------------------------------------------------------------------------------
/src/scss/win/_rating.scss:
--------------------------------------------------------------------------------
  1 | // Rating component with stars
  2 | .rating {
  3 |     .rating-label {
  4 |         @include type(t4);
  5 |         line-height: 44px;
  6 |         margin-bottom: 1px;
  7 |         vertical-align: bottom;
  8 | 
  9 |         &.rating-label-left {
 10 |             display: inline-block;
 11 |             margin-right: 16px;
 12 |         }
 13 | 
 14 |         &.rating-label-right {
 15 |             display: inline-block;
 16 |         }
 17 |     }
 18 | 
 19 |     .rating-stars {
 20 |         position: relative;
 21 |         display: inline-block;
 22 |         font-size: 24px;
 23 |         line-height: 1;
 24 |         margin-left: -10px;
 25 | 
 26 |         ul {
 27 |             list-style: none;
 28 |             margin: 0;
 29 |             padding: 0;
 30 |             white-space: nowrap;
 31 | 
 32 |             li {
 33 |                 display: inline-block;
 34 |                 padding: 6px 10px 10px;
 35 |                 margin: 0;
 36 |             }
 37 |         }
 38 | 
 39 |         .rating-stars-value {
 40 |             position: absolute;
 41 |             top: 0;
 42 |             left: 0;
 43 |             overflow: hidden;
 44 |         }
 45 | 
 46 |         .rating-stars-input {
 47 |             position: absolute;
 48 |             top: 0;
 49 |             left: 0;
 50 | 
 51 |             .rating-btn {
 52 |                 padding: 6px 10px 10px;
 53 |                 border: none;
 54 |                 line-height: 1;
 55 |                 background: none;
 56 | 
 57 |                 .glyph-star {
 58 |                     visibility: hidden;
 59 |                 }
 60 | 
 61 |                 &.active .glyph-star {
 62 |                     visibility: visible;
 63 |                 }
 64 |             }
 65 |         }
 66 |     }
 67 | 
 68 |     &.rating-small {
 69 |         .rating-label {
 70 |             @include type(t8);
 71 |             line-height: 16px;
 72 | 
 73 |             &.rating-label-left {
 74 |                 margin-right: 5px;
 75 |             }
 76 | 
 77 |             &.rating-label-right {
 78 |                 margin-left: 3px;
 79 |             }
 80 |         }
 81 | 
 82 |         .rating-stars {
 83 |             font-size: 12px;
 84 |             margin-left: -2px;
 85 | 
 86 |             ul {
 87 |                 li {
 88 |                     padding: 0px 2px 2px;
 89 |                 }
 90 |             }
 91 | 
 92 |             .rating-stars-input {
 93 |                 .rating-btn {
 94 |                     padding: 0px 2px 2px;
 95 |                 }
 96 |             }
 97 |         }
 98 |     }
 99 | 
100 |     // Default colors
101 |     .rating-stars {
102 |         .glyph-star {
103 |             color: $color-neutral-low;
104 |         }
105 |     }
106 | 
107 |     .rating-stars-value {
108 |         .glyph-star {
109 |             color: $color-vivid-high;
110 |         }
111 | 
112 |         &.rating-stars-value-user {
113 |             .glyph-star {
114 |                 color: $color-accent;
115 |             }
116 |         }
117 |     }
118 | 
119 |     .rating-btn.active {
120 |         .glyph-star {
121 |             color: $color-vivid-mid;
122 |         }
123 |     }
124 | 
125 |     .rating-label {
126 |         color: $color-type-primary;
127 |     }
128 | 
129 |     // Alt colors
130 |     &.color-alt {
131 |         .rating-stars {
132 |             .glyph-star {
133 |                 color: $color-neutral-low-alt;
134 |             }
135 |         }
136 | 
137 |         .rating-stars-value {
138 |             .glyph-star {
139 |                 color: $color-vivid-high-alt;
140 |             }
141 | 
142 |             &.rating-stars-value-user {
143 |                 .glyph-star {
144 |                     color: $color-accent;
145 |                 }
146 |             }
147 |         }
148 | 
149 |         .rating-btn.active {
150 |             .glyph-star {
151 |                 color: $color-vivid-mid-alt;
152 |             }
153 |         }
154 | 
155 |         .rating-label {
156 |             color: $color-type-primary-alt;
157 |         }
158 |     }
159 | }
160 | 


--------------------------------------------------------------------------------
/src/doc/partials/responsive-table.hbs:
--------------------------------------------------------------------------------
  1 | <section class="section" id="responsive-table">
  2 |     <header class="section-header row">
  3 |         <h1 class="section-title col-xs-24">
  4 |             <a href="#responsive-table">Responsive Table</a>
  5 |         </h1>
  6 |     </header>
  7 | 
  8 |     <div class="row">
  9 |         <div class="col-xs-24">
 10 |             <p>
 11 |                 Instead of using a table this component uses a list, the grid and columns to layout its items.
 12 |             </p>
 13 | 
 14 |             <ol class="list-items">
 15 |                 <li class="list-items-row">
 16 |                     <div class="row">
 17 |                         <div class="col-md-2">
 18 |                             <strong>1</strong>
 19 |                         </div>
 20 |                         <div class="col-md-6">
 21 |                             <a>Link</a>
 22 |                         </div>
 23 |                         <div class="col-md-4">
 24 |                             Text
 25 |                         </div>
 26 |                         <div class="col-md-4">
 27 |                             Text
 28 |                         </div>
 29 |                         <div class="col-md-4">
 30 |                             Text
 31 |                         </div>
 32 |                         <div class="col-md-4 text-right">
 33 |                             <a>Link</a>
 34 |                         </div>
 35 |                     </div>
 36 |                 </li>
 37 | 
 38 |                 <li class="list-items-row">
 39 |                     <div class="row">
 40 |                         <div class="col-md-2">
 41 |                             <strong>2</strong>
 42 |                         </div>
 43 |                         <div class="col-md-6">
 44 |                             <a>Link</a>
 45 |                         </div>
 46 |                         <div class="col-md-4">
 47 |                             Text
 48 |                         </div>
 49 |                         <div class="col-md-4">
 50 |                             Text
 51 |                         </div>
 52 |                         <div class="col-md-4">
 53 |                             Text
 54 |                         </div>
 55 |                         <div class="col-md-4 text-right">
 56 |                             <a>Link</a>
 57 |                         </div>
 58 |                     </div>
 59 |                 </li>
 60 | 
 61 |                 <li class="list-items-row">
 62 |                     <div class="row">
 63 |                         <div class="col-md-2">
 64 |                             <strong>3</strong>
 65 |                         </div>
 66 |                         <div class="col-md-6">
 67 |                             <a>Link</a>
 68 |                         </div>
 69 |                         <div class="col-md-4">
 70 |                             Text
 71 |                         </div>
 72 |                         <div class="col-md-4">
 73 |                             Text
 74 |                         </div>
 75 |                         <div class="col-md-4">
 76 |                             Text
 77 |                         </div>
 78 |                         <div class="col-md-4 text-right">
 79 |                             <a>Link</a>
 80 |                         </div>
 81 |                     </div>
 82 |                 </li>
 83 |             </ol>
 84 | 
 85 |             {{#markdown}}
 86 | ```xml
 87 | <ol class="list-items">
 88 |     <li class="list-items-row">
 89 |         <div class="row">
 90 |             <div class="col-md-2">  <!-- if you want more than one column at a narrow viewport-->
 91 |                 <strong>1</strong>    <!-- adjust the grid settings appropriately-->
 92 |             </div>
 93 |             <div class="s-col-6-24">
 94 |                 <a>Link</a>
 95 |             </div>
 96 |             <div class="col-md-4">
 97 |                 Text
 98 |             </div>
 99 |             <div class="col-md-4">
100 |                 Text
101 |             </div>
102 |             <div class="col-md-4">
103 |                 Text
104 |             </div>
105 |             <div class="col-md-4">
106 |                 <a>Link</a>
107 |             </div>
108 |         </div>
109 |     </li>
110 | </ol>
111 | ```
112 |             {{/markdown}}
113 |         </div>
114 |     </div>
115 | </section>
116 | 


--------------------------------------------------------------------------------
/deploy.cmd:
--------------------------------------------------------------------------------
  1 | @if "%SCM_TRACE_LEVEL%" NEQ "4" @echo off
  2 | 
  3 | :: ----------------------
  4 | :: KUDU Deployment Script
  5 | :: Version: 0.1.13
  6 | :: ----------------------
  7 | 
  8 | :: Prerequisites
  9 | :: -------------
 10 | 
 11 | :: Verify node.js installed
 12 | where node 2>nul >nul
 13 | IF %ERRORLEVEL% NEQ 0 (
 14 |   echo Missing node.js executable, please install node.js, if already installed make sure it can be reached from current environment.
 15 |   goto error
 16 | )
 17 | 
 18 | :: Setup
 19 | :: -----
 20 | 
 21 | setlocal enabledelayedexpansion
 22 | 
 23 | SET ARTIFACTS=%~dp0%..\artifacts
 24 | 
 25 | IF NOT DEFINED DEPLOYMENT_SOURCE (
 26 |   SET DEPLOYMENT_SOURCE=%~dp0%.
 27 | )
 28 | 
 29 | IF NOT DEFINED DEPLOYMENT_TARGET (
 30 |   SET DEPLOYMENT_TARGET=%ARTIFACTS%\wwwroot
 31 | )
 32 | 
 33 | IF NOT DEFINED NEXT_MANIFEST_PATH (
 34 |   SET NEXT_MANIFEST_PATH=%ARTIFACTS%\manifest
 35 | 
 36 |   IF NOT DEFINED PREVIOUS_MANIFEST_PATH (
 37 |     SET PREVIOUS_MANIFEST_PATH=%ARTIFACTS%\manifest
 38 |   )
 39 | )
 40 | 
 41 | IF NOT DEFINED KUDU_SYNC_CMD (
 42 |   :: Install kudu sync
 43 |   echo Installing Kudu Sync
 44 |   call npm install kudusync -g --silent
 45 |   IF !ERRORLEVEL! NEQ 0 goto error
 46 | 
 47 |   :: Locally just running "kuduSync" would also work
 48 |   SET KUDU_SYNC_CMD=%appdata%\npm\kuduSync.cmd
 49 | )
 50 | goto Deployment
 51 | 
 52 | :: Utility Functions
 53 | :: -----------------
 54 | 
 55 | :SelectNodeVersion
 56 | 
 57 | IF DEFINED KUDU_SELECT_NODE_VERSION_CMD (
 58 |   :: The following are done only on Windows Azure Websites environment
 59 |   call %KUDU_SELECT_NODE_VERSION_CMD% "%DEPLOYMENT_SOURCE%" "%DEPLOYMENT_TARGET%" "%DEPLOYMENT_TEMP%"
 60 |   IF !ERRORLEVEL! NEQ 0 goto error
 61 | 
 62 |   IF EXIST "%DEPLOYMENT_TEMP%\__nodeVersion.tmp" (
 63 |     SET /p NODE_EXE=<"%DEPLOYMENT_TEMP%\__nodeVersion.tmp"
 64 |     IF !ERRORLEVEL! NEQ 0 goto error
 65 |   )
 66 |   
 67 |   IF EXIST "%DEPLOYMENT_TEMP%\__npmVersion.tmp" (
 68 |     SET /p NPM_JS_PATH=<"%DEPLOYMENT_TEMP%\__npmVersion.tmp"
 69 |     IF !ERRORLEVEL! NEQ 0 goto error
 70 |   )
 71 | 
 72 |   IF NOT DEFINED NODE_EXE (
 73 |     SET NODE_EXE=node
 74 |   )
 75 | 
 76 |   SET NPM_CMD="!NODE_EXE!" "!NPM_JS_PATH!"
 77 | ) ELSE (
 78 |   SET NPM_CMD=npm
 79 |   SET NODE_EXE=node
 80 | )
 81 | 
 82 | goto :EOF
 83 | 
 84 | ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
 85 | :: Deployment
 86 | :: ----------
 87 | 
 88 | :Deployment
 89 | echo Handling node.js deployment.
 90 | 
 91 | :: 1. Select node version
 92 | call :SelectNodeVersion
 93 | 
 94 | :: 2. Install npm packages
 95 | IF EXIST "%DEPLOYMENT_SOURCE%\package.json" (
 96 |   echo found DEPLOYMENT_SOURCE:  %DEPLOYMENT_SOURCE%\package.json
 97 |   pushd "%DEPLOYMENT_SOURCE%"
 98 |   echo installing: %NPM_CMD%
 99 |   call :ExecuteCmd !NPM_CMD! install
100 | 
101 | :: 2a. grunt me up
102 |   echo make sure grunt is available.
103 |   echo executing %NPM_CMD% install grunt-cli --silent
104 |   call :ExecuteCmd !NPM_CMD! install grunt-cli --silent
105 |   
106 |   echo starting grunt. check out.txt file for any output from grunt.
107 |   call :ExecuteCmd .\node_modules\.bin\grunt.cmd >> out.txt
108 |   echo grunt completed
109 |     
110 |   IF !ERRORLEVEL! NEQ 0 goto error
111 |   popd
112 | )
113 | 
114 | 
115 | :: 3. KuduSync
116 | IF /I "%IN_PLACE_DEPLOYMENT%" NEQ "1" (
117 |   call :ExecuteCmd "%KUDU_SYNC_CMD%" -v 50 -f "%DEPLOYMENT_SOURCE%\www" -t "%DEPLOYMENT_TARGET%" -n "%NEXT_MANIFEST_PATH%" -p "%PREVIOUS_MANIFEST_PATH%" -i ".git;.hg;.deployment;deploy.cmd"
118 |   IF !ERRORLEVEL! NEQ 0 goto error
119 | )
120 | 
121 | ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
122 | 
123 | :: Post deployment stub
124 | IF DEFINED POST_DEPLOYMENT_ACTION call "%POST_DEPLOYMENT_ACTION%"
125 | IF !ERRORLEVEL! NEQ 0 goto error
126 | 
127 | goto end
128 | 
129 | :: Execute command routine that will echo out when error
130 | :ExecuteCmd
131 | setlocal
132 | set _CMD_=%*
133 | call %_CMD_%
134 | if "%ERRORLEVEL%" NEQ "0" echo Failed exitCode=%ERRORLEVEL%, command=%_CMD_%
135 | exit /b %ERRORLEVEL%
136 | 
137 | :error
138 | endlocal
139 | echo An error has occurred during web site deployment.
140 | call :exitSetErrorLevel
141 | call :exitFromFunction 2>nul
142 | 
143 | :exitSetErrorLevel
144 | exit /b 1
145 | 
146 | :exitFromFunction
147 | ()
148 | 
149 | :end
150 | endlocal
151 | echo Finished successfully.


--------------------------------------------------------------------------------
/dist/fonts/LICENSE.txt:
--------------------------------------------------------------------------------
 1 | Copyright 2015, Microsoft Corporation (www.microsoft.com), with Reserved Font Name Selawik.  All Rights Reserved.  Selawik is a trademark of Microsoft Corporation in the United States and/or other countries.
 2 | 
 3 | This Font Software is licensed under the SIL Open Font License, Version 1.1.
 4 | This license is copied below, and is also available with a FAQ at:
 5 | http://scripts.sil.org/OFL
 6 | 
 7 | -----------------------------------------------------------
 8 | SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
 9 | -----------------------------------------------------------
10 | PREAMBLE
11 | The goals of the Open Font License (OFL) are to stimulate worldwide
12 | development of collaborative font projects, to support the font creation
13 | efforts of academic and linguistic communities, and to provide a free and
14 | open framework in which fonts may be shared and improved in partnership
15 | with others.
16 | 
17 | The OFL allows the licensed fonts to be used, studied, modified and
18 | redistributed freely as long as they are not sold by themselves. The
19 | fonts, including any derivative works, can be bundled, embedded, 
20 | redistributed and/or sold with any software provided that any reserved
21 | names are not used by derivative works. The fonts and derivatives,
22 | however, cannot be released under any other type of license. The
23 | requirement for fonts to remain under this license does not apply
24 | to any document created using the fonts or their derivatives.
25 | 
26 | DEFINITIONS
27 | "Font Software" refers to the set of files released by the Copyright
28 | Holder(s) under this license and clearly marked as such. This may
29 | include source files, build scripts and documentation.
30 | 
31 | "Reserved Font Name" refers to any names specified as such after the
32 | copyright statement(s).
33 | 
34 | "Original Version" refers to the collection of Font Software components as
35 | distributed by the Copyright Holder(s).
36 | 
37 | "Modified Version" refers to any derivative made by adding to, deleting,
38 | or substituting -- in part or in whole -- any of the components of the
39 | Original Version, by changing formats or by porting the Font Software to a
40 | new environment.
41 | 
42 | "Author" refers to any designer, engineer, programmer, technical
43 | writer or other person who contributed to the Font Software.
44 | 
45 | PERMISSION & CONDITIONS
46 | Permission is hereby granted, free of charge, to any person obtaining
47 | a copy of the Font Software, to use, study, copy, merge, embed, modify,
48 | redistribute, and sell modified and unmodified copies of the Font
49 | Software, subject to the following conditions:
50 | 
51 | 1) Neither the Font Software nor any of its individual components,
52 | in Original or Modified Versions, may be sold by itself.
53 | 
54 | 2) Original or Modified Versions of the Font Software may be bundled,
55 | redistributed and/or sold with any software, provided that each copy
56 | contains the above copyright notice and this license. These can be
57 | included either as stand-alone text files, human-readable headers or
58 | in the appropriate machine-readable metadata fields within text or
59 | binary files as long as those fields can be easily viewed by the user.
60 | 
61 | 3) No Modified Version of the Font Software may use the Reserved Font
62 | Name(s) unless explicit written permission is granted by the corresponding
63 | Copyright Holder. This restriction only applies to the primary font name as
64 | presented to the users.
65 | 
66 | 4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
67 | Software shall not be used to promote, endorse or advertise any
68 | Modified Version, except to acknowledge the contribution(s) of the
69 | Copyright Holder(s) and the Author(s) or with their explicit written
70 | permission.
71 | 
72 | 5) The Font Software, modified or unmodified, in part or in whole,
73 | must be distributed entirely under this license, and must not be
74 | distributed under any other license. The requirement for fonts to
75 | remain under this license does not apply to any document created
76 | using the Font Software.
77 | 
78 | TERMINATION
79 | This license becomes null and void if any of the above conditions are
80 | not met.
81 | 
82 | DISCLAIMER
83 | THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
84 | EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
85 | MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
86 | OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
87 | COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
88 | INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
89 | DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
90 | FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
91 | OTHER DEALINGS IN THE FONT SOFTWARE.
92 | 


--------------------------------------------------------------------------------
/src/fonts/LICENSE.txt:
--------------------------------------------------------------------------------
 1 | Copyright 2015, Microsoft Corporation (www.microsoft.com), with Reserved Font Name Selawik.  All Rights Reserved.  Selawik is a trademark of Microsoft Corporation in the United States and/or other countries.
 2 | 
 3 | This Font Software is licensed under the SIL Open Font License, Version 1.1.
 4 | This license is copied below, and is also available with a FAQ at:
 5 | http://scripts.sil.org/OFL
 6 | 
 7 | -----------------------------------------------------------
 8 | SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
 9 | -----------------------------------------------------------
10 | PREAMBLE
11 | The goals of the Open Font License (OFL) are to stimulate worldwide
12 | development of collaborative font projects, to support the font creation
13 | efforts of academic and linguistic communities, and to provide a free and
14 | open framework in which fonts may be shared and improved in partnership
15 | with others.
16 | 
17 | The OFL allows the licensed fonts to be used, studied, modified and
18 | redistributed freely as long as they are not sold by themselves. The
19 | fonts, including any derivative works, can be bundled, embedded, 
20 | redistributed and/or sold with any software provided that any reserved
21 | names are not used by derivative works. The fonts and derivatives,
22 | however, cannot be released under any other type of license. The
23 | requirement for fonts to remain under this license does not apply
24 | to any document created using the fonts or their derivatives.
25 | 
26 | DEFINITIONS
27 | "Font Software" refers to the set of files released by the Copyright
28 | Holder(s) under this license and clearly marked as such. This may
29 | include source files, build scripts and documentation.
30 | 
31 | "Reserved Font Name" refers to any names specified as such after the
32 | copyright statement(s).
33 | 
34 | "Original Version" refers to the collection of Font Software components as
35 | distributed by the Copyright Holder(s).
36 | 
37 | "Modified Version" refers to any derivative made by adding to, deleting,
38 | or substituting -- in part or in whole -- any of the components of the
39 | Original Version, by changing formats or by porting the Font Software to a
40 | new environment.
41 | 
42 | "Author" refers to any designer, engineer, programmer, technical
43 | writer or other person who contributed to the Font Software.
44 | 
45 | PERMISSION & CONDITIONS
46 | Permission is hereby granted, free of charge, to any person obtaining
47 | a copy of the Font Software, to use, study, copy, merge, embed, modify,
48 | redistribute, and sell modified and unmodified copies of the Font
49 | Software, subject to the following conditions:
50 | 
51 | 1) Neither the Font Software nor any of its individual components,
52 | in Original or Modified Versions, may be sold by itself.
53 | 
54 | 2) Original or Modified Versions of the Font Software may be bundled,
55 | redistributed and/or sold with any software, provided that each copy
56 | contains the above copyright notice and this license. These can be
57 | included either as stand-alone text files, human-readable headers or
58 | in the appropriate machine-readable metadata fields within text or
59 | binary files as long as those fields can be easily viewed by the user.
60 | 
61 | 3) No Modified Version of the Font Software may use the Reserved Font
62 | Name(s) unless explicit written permission is granted by the corresponding
63 | Copyright Holder. This restriction only applies to the primary font name as
64 | presented to the users.
65 | 
66 | 4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
67 | Software shall not be used to promote, endorse or advertise any
68 | Modified Version, except to acknowledge the contribution(s) of the
69 | Copyright Holder(s) and the Author(s) or with their explicit written
70 | permission.
71 | 
72 | 5) The Font Software, modified or unmodified, in part or in whole,
73 | must be distributed entirely under this license, and must not be
74 | distributed under any other license. The requirement for fonts to
75 | remain under this license does not apply to any document created
76 | using the Font Software.
77 | 
78 | TERMINATION
79 | This license becomes null and void if any of the above conditions are
80 | not met.
81 | 
82 | DISCLAIMER
83 | THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
84 | EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
85 | MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
86 | OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
87 | COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
88 | INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
89 | DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
90 | FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
91 | OTHER DEALINGS IN THE FONT SOFTWARE.
92 | 


--------------------------------------------------------------------------------
/src/scss/override/_bootstrap.scss:
--------------------------------------------------------------------------------
 1 | // Variables
 2 | @import "bootstrap-sass/assets/stylesheets/bootstrap/variables";
 3 | // Mixins: Utilities
 4 | @import "bootstrap-sass/assets/stylesheets/bootstrap/mixins/hide-text";
 5 | @import "bootstrap-sass/assets/stylesheets/bootstrap/mixins/opacity";
 6 | @import "bootstrap-sass/assets/stylesheets/bootstrap/mixins/image";
 7 | @import "bootstrap-sass/assets/stylesheets/bootstrap/mixins/labels";
 8 | @import "bootstrap-sass/assets/stylesheets/bootstrap/mixins/reset-filter";
 9 | @import "bootstrap-sass/assets/stylesheets/bootstrap/mixins/reset-text";
10 | @import "bootstrap-sass/assets/stylesheets/bootstrap/mixins/resize";
11 | @import "bootstrap-sass/assets/stylesheets/bootstrap/mixins/responsive-visibility";
12 | @import "bootstrap-sass/assets/stylesheets/bootstrap/mixins/size";
13 | // @import "bootstrap-sass/assets/stylesheets/bootstrap/mixins/tab-focus";
14 | @import "bootstrap-sass/assets/stylesheets/bootstrap/mixins/text-emphasis";
15 | @import "bootstrap-sass/assets/stylesheets/bootstrap/mixins/text-overflow";
16 | @import "bootstrap-sass/assets/stylesheets/bootstrap/mixins/vendor-prefixes";
17 | // Mixins: Components
18 | @import "bootstrap-sass/assets/stylesheets/bootstrap/mixins/alerts";
19 | @import "bootstrap-sass/assets/stylesheets/bootstrap/mixins/buttons";
20 | @import "bootstrap-sass/assets/stylesheets/bootstrap/mixins/panels";
21 | @import "bootstrap-sass/assets/stylesheets/bootstrap/mixins/pagination";
22 | @import "bootstrap-sass/assets/stylesheets/bootstrap/mixins/list-group";
23 | @import "bootstrap-sass/assets/stylesheets/bootstrap/mixins/nav-divider";
24 | @import "bootstrap-sass/assets/stylesheets/bootstrap/mixins/forms";
25 | @import "bootstrap-sass/assets/stylesheets/bootstrap/mixins/progress-bar";
26 | @import "bootstrap-sass/assets/stylesheets/bootstrap/mixins/table-row";
27 | // Mixins: Skins
28 | @import "bootstrap-sass/assets/stylesheets/bootstrap/mixins/background-variant";
29 | @import "bootstrap-sass/assets/stylesheets/bootstrap/mixins/border-radius";
30 | @import "bootstrap-sass/assets/stylesheets/bootstrap/mixins/gradients";
31 | // Mixins: Layout
32 | @import "bootstrap-sass/assets/stylesheets/bootstrap/mixins/clearfix";
33 | @import "bootstrap-sass/assets/stylesheets/bootstrap/mixins/center-block";
34 | @import "bootstrap-sass/assets/stylesheets/bootstrap/mixins/nav-vertical-align";
35 | @import "bootstrap-sass/assets/stylesheets/bootstrap/mixins/grid-framework";
36 | @import "bootstrap-sass/assets/stylesheets/bootstrap/mixins/grid";
37 | // Reset and dependencies
38 | @import "bootstrap-sass/assets/stylesheets/bootstrap/normalize";
39 | @import "bootstrap-sass/assets/stylesheets/bootstrap/print";
40 | // @import "bootstrap-sass/assets/stylesheets/bootstrap/glyphicons";
41 | // Core CSS
42 | @import "bootstrap-sass/assets/stylesheets/bootstrap/scaffolding";
43 | @import "bootstrap-sass/assets/stylesheets/bootstrap/type";
44 | @import "bootstrap-sass/assets/stylesheets/bootstrap/code";
45 | @import "bootstrap-sass/assets/stylesheets/bootstrap/grid";
46 | @import "bootstrap-sass/assets/stylesheets/bootstrap/tables";
47 | @import "bootstrap-sass/assets/stylesheets/bootstrap/forms";
48 | @import "bootstrap-sass/assets/stylesheets/bootstrap/buttons";
49 | // Components
50 | @import "bootstrap-sass/assets/stylesheets/bootstrap/component-animations";
51 | @import "bootstrap-sass/assets/stylesheets/bootstrap/dropdowns";
52 | @import "bootstrap-sass/assets/stylesheets/bootstrap/button-groups";
53 | @import "bootstrap-sass/assets/stylesheets/bootstrap/input-groups";
54 | @import "bootstrap-sass/assets/stylesheets/bootstrap/navs";
55 | @import "bootstrap-sass/assets/stylesheets/bootstrap/navbar";
56 | @import "bootstrap-sass/assets/stylesheets/bootstrap/breadcrumbs";
57 | @import "bootstrap-sass/assets/stylesheets/bootstrap/pagination";
58 | @import "bootstrap-sass/assets/stylesheets/bootstrap/pager";
59 | @import "bootstrap-sass/assets/stylesheets/bootstrap/labels";
60 | @import "bootstrap-sass/assets/stylesheets/bootstrap/badges";
61 | @import "bootstrap-sass/assets/stylesheets/bootstrap/jumbotron";
62 | // @import "bootstrap-sass/assets/stylesheets/bootstrap/thumbnails";
63 | @import "bootstrap-sass/assets/stylesheets/bootstrap/alerts";
64 | @import "bootstrap-sass/assets/stylesheets/bootstrap/progress-bars";
65 | // @import "bootstrap-sass/assets/stylesheets/bootstrap/media";
66 | @import "bootstrap-sass/assets/stylesheets/bootstrap/list-group";
67 | @import "bootstrap-sass/assets/stylesheets/bootstrap/panels";
68 | @import "bootstrap-sass/assets/stylesheets/bootstrap/responsive-embed";
69 | @import "bootstrap-sass/assets/stylesheets/bootstrap/wells";
70 | @import "bootstrap-sass/assets/stylesheets/bootstrap/close";
71 | // Components w/ JavaScript
72 | @import "bootstrap-sass/assets/stylesheets/bootstrap/modals";
73 | @import "bootstrap-sass/assets/stylesheets/bootstrap/tooltip";
74 | @import "bootstrap-sass/assets/stylesheets/bootstrap/popovers";
75 | @import "bootstrap-sass/assets/stylesheets/bootstrap/carousel";
76 | // Utility classes
77 | @import "bootstrap-sass/assets/stylesheets/bootstrap/utilities";
78 | @import "bootstrap-sass/assets/stylesheets/bootstrap/responsive-utilities";


--------------------------------------------------------------------------------
/src/scss/override/_bootstrap-optional.scss:
--------------------------------------------------------------------------------
 1 | // Variables
 2 | @import "bootstrap-sass/assets/stylesheets/bootstrap/variables";
 3 | // Mixins: Utilities
 4 | @import "bootstrap-sass/assets/stylesheets/bootstrap/mixins/hide-text";
 5 | @import "bootstrap-sass/assets/stylesheets/bootstrap/mixins/opacity";
 6 | @import "bootstrap-sass/assets/stylesheets/bootstrap/mixins/image";
 7 | @import "bootstrap-sass/assets/stylesheets/bootstrap/mixins/labels";
 8 | @import "bootstrap-sass/assets/stylesheets/bootstrap/mixins/reset-filter";
 9 | @import "bootstrap-sass/assets/stylesheets/bootstrap/mixins/reset-text";
10 | @import "bootstrap-sass/assets/stylesheets/bootstrap/mixins/resize";
11 | @import "bootstrap-sass/assets/stylesheets/bootstrap/mixins/responsive-visibility";
12 | @import "bootstrap-sass/assets/stylesheets/bootstrap/mixins/size";
13 | // @import "bootstrap-sass/assets/stylesheets/bootstrap/mixins/tab-focus";
14 | @import "bootstrap-sass/assets/stylesheets/bootstrap/mixins/text-emphasis";
15 | @import "bootstrap-sass/assets/stylesheets/bootstrap/mixins/text-overflow";
16 | @import "bootstrap-sass/assets/stylesheets/bootstrap/mixins/vendor-prefixes";
17 | // Mixins: Components
18 | @import "bootstrap-sass/assets/stylesheets/bootstrap/mixins/alerts";
19 | @import "bootstrap-sass/assets/stylesheets/bootstrap/mixins/buttons";
20 | @import "bootstrap-sass/assets/stylesheets/bootstrap/mixins/panels";
21 | @import "bootstrap-sass/assets/stylesheets/bootstrap/mixins/pagination";
22 | @import "bootstrap-sass/assets/stylesheets/bootstrap/mixins/list-group";
23 | @import "bootstrap-sass/assets/stylesheets/bootstrap/mixins/nav-divider";
24 | @import "bootstrap-sass/assets/stylesheets/bootstrap/mixins/forms";
25 | @import "bootstrap-sass/assets/stylesheets/bootstrap/mixins/progress-bar";
26 | @import "bootstrap-sass/assets/stylesheets/bootstrap/mixins/table-row";
27 | // Mixins: Skins
28 | @import "bootstrap-sass/assets/stylesheets/bootstrap/mixins/background-variant";
29 | @import "bootstrap-sass/assets/stylesheets/bootstrap/mixins/border-radius";
30 | @import "bootstrap-sass/assets/stylesheets/bootstrap/mixins/gradients";
31 | // Mixins: Layout
32 | @import "bootstrap-sass/assets/stylesheets/bootstrap/mixins/clearfix";
33 | @import "bootstrap-sass/assets/stylesheets/bootstrap/mixins/center-block";
34 | @import "bootstrap-sass/assets/stylesheets/bootstrap/mixins/nav-vertical-align";
35 | @import "bootstrap-sass/assets/stylesheets/bootstrap/mixins/grid-framework";
36 | @import "bootstrap-sass/assets/stylesheets/bootstrap/mixins/grid";
37 | // Reset and dependencies
38 | @import "bootstrap-sass/assets/stylesheets/bootstrap/normalize";
39 | @import "bootstrap-sass/assets/stylesheets/bootstrap/print";
40 | // @import "bootstrap-sass/assets/stylesheets/bootstrap/glyphicons";
41 | // Core CSS
42 | @import "bootstrap-sass/assets/stylesheets/bootstrap/scaffolding";
43 | @import "bootstrap-sass/assets/stylesheets/bootstrap/type";
44 | @import "bootstrap-sass/assets/stylesheets/bootstrap/code";
45 | // @import "bootstrap-sass/assets/stylesheets/bootstrap/grid";
46 | @import "bootstrap-sass/assets/stylesheets/bootstrap/tables";
47 | @import "bootstrap-sass/assets/stylesheets/bootstrap/forms";
48 | @import "bootstrap-sass/assets/stylesheets/bootstrap/buttons";
49 | // Components
50 | @import "bootstrap-sass/assets/stylesheets/bootstrap/component-animations";
51 | @import "bootstrap-sass/assets/stylesheets/bootstrap/dropdowns";
52 | @import "bootstrap-sass/assets/stylesheets/bootstrap/button-groups";
53 | @import "bootstrap-sass/assets/stylesheets/bootstrap/input-groups";
54 | @import "bootstrap-sass/assets/stylesheets/bootstrap/navs";
55 | @import "bootstrap-sass/assets/stylesheets/bootstrap/navbar";
56 | @import "bootstrap-sass/assets/stylesheets/bootstrap/breadcrumbs";
57 | @import "bootstrap-sass/assets/stylesheets/bootstrap/pagination";
58 | @import "bootstrap-sass/assets/stylesheets/bootstrap/pager";
59 | @import "bootstrap-sass/assets/stylesheets/bootstrap/labels";
60 | @import "bootstrap-sass/assets/stylesheets/bootstrap/badges";
61 | @import "bootstrap-sass/assets/stylesheets/bootstrap/jumbotron";
62 | // @import "bootstrap-sass/assets/stylesheets/bootstrap/thumbnails";
63 | @import "bootstrap-sass/assets/stylesheets/bootstrap/alerts";
64 | @import "bootstrap-sass/assets/stylesheets/bootstrap/progress-bars";
65 | // @import "bootstrap-sass/assets/stylesheets/bootstrap/media";
66 | @import "bootstrap-sass/assets/stylesheets/bootstrap/list-group";
67 | @import "bootstrap-sass/assets/stylesheets/bootstrap/panels";
68 | @import "bootstrap-sass/assets/stylesheets/bootstrap/responsive-embed";
69 | @import "bootstrap-sass/assets/stylesheets/bootstrap/wells";
70 | @import "bootstrap-sass/assets/stylesheets/bootstrap/close";
71 | // Components w/ JavaScript
72 | @import "bootstrap-sass/assets/stylesheets/bootstrap/modals";
73 | @import "bootstrap-sass/assets/stylesheets/bootstrap/tooltip";
74 | @import "bootstrap-sass/assets/stylesheets/bootstrap/popovers";
75 | // @import "bootstrap-sass/assets/stylesheets/bootstrap/carousel";
76 | // Utility classes
77 | @import "bootstrap-sass/assets/stylesheets/bootstrap/utilities";
78 | @import "bootstrap-sass/assets/stylesheets/bootstrap/responsive-utilities";


--------------------------------------------------------------------------------
/src/doc/partials/toggle-switch.hbs:
--------------------------------------------------------------------------------
  1 | <div class="row">
  2 |     <div class="col-xs-24">
  3 |         <section class="section" id="toggle-switch">
  4 |             <header class="section-header ">
  5 |                 <h1 class="section-title ">
  6 |                     <a href="#toggle-switch">Toggle Switch</a>
  7 |                 </h1>
  8 |             </header>
  9 | 
 10 |             <div class="row">
 11 |                 <div class="col-md-24">
 12 | 
 13 |                     <!-- On light background -->
 14 |                     <h4>Default</h4>
 15 |                     <div style="padding: 0 2em 2em; margin-bottom: 0.5em;">
 16 |                         <div class="btn-group">
 17 |                             <button type="button" data-toggle="button" class="btn btn-toggle-switch" autocomplete="off" aria-pressed="false">
 18 |                                 <span class="stateLabel stateLabel-on">On</span>
 19 |                                 <span class="stateLabel stateLabel-off">Off</span>
 20 |                             </button>
 21 |                         </div>
 22 |                     </div>
 23 |                 </div>
 24 |             </div>
 25 | 
 26 |             <div class="row">
 27 |                 <!-- On dark background -->
 28 |                 <div class="col-md-6">
 29 |                     <h4>Alt</h4>
 30 |                     <div class="color-black" style="padding: 0 2em 2em; margin-bottom: 0.5em;">
 31 |                         <div class="btn-group">
 32 |                             <button type="button" data-toggle="button" class="btn btn-toggle-switch theme-alt" autocomplete="off" aria-pressed="false">
 33 |                                 <span class="stateLabel stateLabel-on">On</span>
 34 |                                 <span class="stateLabel stateLabel-off">Off</span>
 35 |                             </button>
 36 |                         </div>
 37 |                     </div>
 38 |                 </div>
 39 | 
 40 |                 <!-- On colored background -->
 41 |                 <div class="col-md-6">
 42 |                     <h4>On solid color</h4>
 43 |                     <div class="color-fill-accent-vivid-high" style="padding: 0 2em 2em; margin-bottom: 0.5em;">
 44 |                         <div class="btn-group">
 45 |                             <button type="button" data-toggle="button" class="btn btn-toggle-switch theme-dark" autocomplete="off" aria-pressed="false">
 46 |                                 <span class="stateLabel stateLabel-on">On</span>
 47 |                                 <span class="stateLabel stateLabel-off">Off</span>
 48 |                             </button>
 49 |                         </div>
 50 |                     </div>
 51 |                 </div>
 52 | 
 53 |                 <!-- On light image -->
 54 |                 <div class="col-md-6">
 55 |                     <h4>On light image</h4>
 56 |                     <div class="example-light-image-bg" style="padding: 0 2em 2em; margin-bottom: 0.5em; background-position: center;">
 57 |                         <div class="btn-group">
 58 |                             <button type="button" data-toggle="button" class="btn btn-toggle-switch theme-light" autocomplete="off" aria-pressed="false">
 59 |                                 <span class="stateLabel stateLabel-on">On</span>
 60 |                                 <span class="stateLabel stateLabel-off">Off</span>
 61 |                             </button>
 62 |                         </div>
 63 |                     </div>
 64 |                 </div>
 65 | 
 66 |                 <!-- On dark image -->
 67 |                 <div class="col-md-6">
 68 |                     <h4>On dark image</h4>
 69 |                     <div class="example-dark-image-bg" style="padding: 0 2em 2em; margin-bottom: 0.5em;">
 70 |                         <div class="btn-group">
 71 |                             <button type="button" data-toggle="button" class="btn btn-toggle-switch theme-dark" autocomplete="off" aria-pressed="false">
 72 |                                 <span class="stateLabel stateLabel-on">On</span>
 73 |                                 <span class="stateLabel stateLabel-off">Off</span>
 74 |                             </button>
 75 |                         </div>
 76 |                     </div>
 77 |                 </div>
 78 |             </div>
 79 | 
 80 |             <div class="row">
 81 |                 <div class="col-md-24">
 82 |                     {{#markdown}}
 83 | ```xml
 84 | <div class="btn-group">
 85 |     <button type="button" data-toggle="button" class="btn btn-toggle-switch" autocomplete="off" aria-pressed="false">
 86 |         <span class="stateLabel stateLabel-on">On</span>
 87 |         <span class="stateLabel stateLabel-off">Off</span>
 88 |     </button>
 89 | </div>
 90 | ```
 91 |                     {{/markdown}}
 92 |                 </div>
 93 | 
 94 |                 <div class="col-md-24">
 95 |                     <div class="guidance guidance-usage m-t-xs">
 96 |                         {{#markdown}}
 97 | {{> toggle-switch-guidance.md}}
 98 |                         {{/markdown}}
 99 |                     </div>
100 |                 </div>
101 | 
102 |             </div>
103 |         </section>
104 |     </div>
105 | </div>
106 | 


--------------------------------------------------------------------------------