`, and ``.
+$font-family-monospace: Menlo, Monaco, Consolas, "Courier New", monospace !default;
+$font-family-base: $font-family-sans-serif !default;
+
+$font-size-base: 14px !default;
+$font-size-large: ceil(($font-size-base * 1.25)) !default; // ~18px
+$font-size-small: ceil(($font-size-base * 0.85)) !default; // ~12px
+
+$font-size-h1: floor(($font-size-base * 2.6)) !default; // ~36px
+$font-size-h2: floor(($font-size-base * 2.15)) !default; // ~30px
+$font-size-h3: ceil(($font-size-base * 1.7)) !default; // ~24px
+$font-size-h4: ceil(($font-size-base * 1.25)) !default; // ~18px
+$font-size-h5: $font-size-base !default;
+$font-size-h6: ceil(($font-size-base * 0.85)) !default; // ~12px
+
+//** Unit-less `line-height` for use in components like buttons.
+$line-height-base: 1.428571429 !default; // 20/14
+//** Computed "line-height" (`font-size` * `line-height`) for use with `margin`, `padding`, etc.
+$line-height-computed: floor(($font-size-base * $line-height-base)) !default; // ~20px
+
+//** By default, this inherits from the ``.
+$headings-font-family: inherit !default;
+$headings-font-weight: 500 !default;
+$headings-line-height: 1.1 !default;
+$headings-color: inherit !default;
+
+
+//== Iconography
+//
+//## Specify custom location and filename of the included Glyphicons icon font. Useful for those including Bootstrap via Bower.
+
+//** Load fonts from this directory.
+
+// [converter] Asset helpers such as Sprockets and Node.js Mincer do not resolve relative paths
+$icon-font-path: if($bootstrap-sass-asset-helper, "bootstrap/", "../fonts/bootstrap/") !default;
+
+//** File name for all font files.
+$icon-font-name: "glyphicons-halflings-regular" !default;
+//** Element ID within SVG icon file.
+$icon-font-svg-id: "glyphicons_halflingsregular" !default;
+
+
+//== Components
+//
+//## Define common padding and border radius sizes and more. Values based on 14px text and 1.428 line-height (~20px to start).
+
+$padding-base-vertical: 6px !default;
+$padding-base-horizontal: 12px !default;
+
+$padding-large-vertical: 10px !default;
+$padding-large-horizontal: 16px !default;
+
+$padding-small-vertical: 5px !default;
+$padding-small-horizontal: 10px !default;
+
+$padding-xs-vertical: 1px !default;
+$padding-xs-horizontal: 5px !default;
+
+$line-height-large: 1.33 !default;
+$line-height-small: 1.5 !default;
+
+$border-radius-base: 4px !default;
+$border-radius-large: 6px !default;
+$border-radius-small: 3px !default;
+
+//** Global color for active items (e.g., navs or dropdowns).
+$component-active-color: #fff !default;
+//** Global background color for active items (e.g., navs or dropdowns).
+$component-active-bg: $brand-primary !default;
+
+//** Width of the `border` for generating carets that indicator dropdowns.
+$caret-width-base: 4px !default;
+//** Carets increase slightly in size for larger components.
+$caret-width-large: 5px !default;
+
+
+//== Tables
+//
+//## Customizes the `.table` component with basic values, each used across all table variations.
+
+//** Padding for ``s and ` `s.
+$table-cell-padding: 8px !default;
+//** Padding for cells in `.table-condensed`.
+$table-condensed-cell-padding: 5px !default;
+
+//** Default background color used for all tables.
+$table-bg: transparent !default;
+//** Background color used for `.table-striped`.
+$table-bg-accent: #f9f9f9 !default;
+//** Background color used for `.table-hover`.
+$table-bg-hover: #f5f5f5 !default;
+$table-bg-active: $table-bg-hover !default;
+
+//** Border color for table and cell borders.
+$table-border-color: #ddd !default;
+
+
+//== Buttons
+//
+//## For each of Bootstrap's buttons, define text, background and border color.
+
+$btn-font-weight: normal !default;
+
+$btn-default-color: #333 !default;
+$btn-default-bg: #fff !default;
+$btn-default-border: #ccc !default;
+
+$btn-primary-color: #fff !default;
+$btn-primary-bg: $brand-primary !default;
+$btn-primary-border: darken($btn-primary-bg, 5%) !default;
+
+$btn-success-color: #fff !default;
+$btn-success-bg: $brand-success !default;
+$btn-success-border: darken($btn-success-bg, 5%) !default;
+
+$btn-info-color: #fff !default;
+$btn-info-bg: $brand-info !default;
+$btn-info-border: darken($btn-info-bg, 5%) !default;
+
+$btn-warning-color: #fff !default;
+$btn-warning-bg: $brand-warning !default;
+$btn-warning-border: darken($btn-warning-bg, 5%) !default;
+
+$btn-danger-color: #fff !default;
+$btn-danger-bg: $brand-danger !default;
+$btn-danger-border: darken($btn-danger-bg, 5%) !default;
+
+$btn-link-disabled-color: $gray-light !default;
+
+
+//== Forms
+//
+//##
+
+//** ``
+// element gets special love because it's special, and that's a fact!
+// [converter] $parent hack
+@mixin input-size($parent, $input-height, $padding-vertical, $padding-horizontal, $font-size, $line-height, $border-radius) {
+ #{$parent} {
+ height: $input-height;
+ padding: $padding-vertical $padding-horizontal;
+ font-size: $font-size;
+ line-height: $line-height;
+ border-radius: $border-radius;
+ }
+
+ select#{$parent} {
+ height: $input-height;
+ line-height: $input-height;
+ }
+
+ textarea#{$parent},
+ select[multiple]#{$parent} {
+ height: auto;
+ }
+}
diff --git a/release/pui-v1.9.1/bootstrap-sass/bootstrap/mixins/_gradients.scss b/release/pui-v1.9.1/bootstrap-sass/bootstrap/mixins/_gradients.scss
new file mode 100644
index 000000000..a8939f5ae
--- /dev/null
+++ b/release/pui-v1.9.1/bootstrap-sass/bootstrap/mixins/_gradients.scss
@@ -0,0 +1,58 @@
+// Gradients
+
+
+
+// Horizontal gradient, from left to right
+//
+// Creates two color stops, start and end, by specifying a color and position for each color stop.
+// Color stops are not available in IE9 and below.
+@mixin gradient-horizontal($start-color: #555, $end-color: #333, $start-percent: 0%, $end-percent: 100%) {
+ background-image: -webkit-linear-gradient(left, $start-color $start-percent, $end-color $end-percent); // Safari 5.1-6, Chrome 10+
+ background-image: -o-linear-gradient(left, $start-color $start-percent, $end-color $end-percent); // Opera 12
+ background-image: linear-gradient(to right, $start-color $start-percent, $end-color $end-percent); // Standard, IE10, Firefox 16+, Opera 12.10+, Safari 7+, Chrome 26+
+ background-repeat: repeat-x;
+ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{ie-hex-str($start-color)}', endColorstr='#{ie-hex-str($end-color)}', GradientType=1); // IE9 and down
+}
+
+// Vertical gradient, from top to bottom
+//
+// Creates two color stops, start and end, by specifying a color and position for each color stop.
+// Color stops are not available in IE9 and below.
+@mixin gradient-vertical($start-color: #555, $end-color: #333, $start-percent: 0%, $end-percent: 100%) {
+ background-image: -webkit-linear-gradient(top, $start-color $start-percent, $end-color $end-percent); // Safari 5.1-6, Chrome 10+
+ background-image: -o-linear-gradient(top, $start-color $start-percent, $end-color $end-percent); // Opera 12
+ background-image: linear-gradient(to bottom, $start-color $start-percent, $end-color $end-percent); // Standard, IE10, Firefox 16+, Opera 12.10+, Safari 7+, Chrome 26+
+ background-repeat: repeat-x;
+ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{ie-hex-str($start-color)}', endColorstr='#{ie-hex-str($end-color)}', GradientType=0); // IE9 and down
+}
+
+@mixin gradient-directional($start-color: #555, $end-color: #333, $deg: 45deg) {
+ background-repeat: repeat-x;
+ background-image: -webkit-linear-gradient($deg, $start-color, $end-color); // Safari 5.1-6, Chrome 10+
+ background-image: -o-linear-gradient($deg, $start-color, $end-color); // Opera 12
+ background-image: linear-gradient($deg, $start-color, $end-color); // Standard, IE10, Firefox 16+, Opera 12.10+, Safari 7+, Chrome 26+
+}
+@mixin gradient-horizontal-three-colors($start-color: #00b3ee, $mid-color: #7a43b6, $color-stop: 50%, $end-color: #c3325f) {
+ background-image: -webkit-linear-gradient(left, $start-color, $mid-color $color-stop, $end-color);
+ background-image: -o-linear-gradient(left, $start-color, $mid-color $color-stop, $end-color);
+ background-image: linear-gradient(to right, $start-color, $mid-color $color-stop, $end-color);
+ background-repeat: no-repeat;
+ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{ie-hex-str($start-color)}', endColorstr='#{ie-hex-str($end-color)}', GradientType=1); // IE9 and down, gets no color-stop at all for proper fallback
+}
+@mixin gradient-vertical-three-colors($start-color: #00b3ee, $mid-color: #7a43b6, $color-stop: 50%, $end-color: #c3325f) {
+ background-image: -webkit-linear-gradient($start-color, $mid-color $color-stop, $end-color);
+ background-image: -o-linear-gradient($start-color, $mid-color $color-stop, $end-color);
+ background-image: linear-gradient($start-color, $mid-color $color-stop, $end-color);
+ background-repeat: no-repeat;
+ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{ie-hex-str($start-color)}', endColorstr='#{ie-hex-str($end-color)}', GradientType=0); // IE9 and down, gets no color-stop at all for proper fallback
+}
+@mixin gradient-radial($inner-color: #555, $outer-color: #333) {
+ background-image: -webkit-radial-gradient(circle, $inner-color, $outer-color);
+ background-image: radial-gradient(circle, $inner-color, $outer-color);
+ background-repeat: no-repeat;
+}
+@mixin gradient-striped($color: rgba(255,255,255,.15), $angle: 45deg) {
+ background-image: -webkit-linear-gradient($angle, $color 25%, transparent 25%, transparent 50%, $color 50%, $color 75%, transparent 75%, transparent);
+ background-image: -o-linear-gradient($angle, $color 25%, transparent 25%, transparent 50%, $color 50%, $color 75%, transparent 75%, transparent);
+ background-image: linear-gradient($angle, $color 25%, transparent 25%, transparent 50%, $color 50%, $color 75%, transparent 75%, transparent);
+}
diff --git a/release/pui-v1.9.1/bootstrap-sass/bootstrap/mixins/_grid-framework.scss b/release/pui-v1.9.1/bootstrap-sass/bootstrap/mixins/_grid-framework.scss
new file mode 100644
index 000000000..fb28cb47d
--- /dev/null
+++ b/release/pui-v1.9.1/bootstrap-sass/bootstrap/mixins/_grid-framework.scss
@@ -0,0 +1,81 @@
+// Framework grid generation
+//
+// Used only by Bootstrap to generate the correct number of grid classes given
+// any value of `$grid-columns`.
+
+// [converter] This is defined recursively in LESS, but Sass supports real loops
+@mixin make-grid-columns($i: 1, $list: ".col-xs-#{$i}, .col-sm-#{$i}, .col-md-#{$i}, .col-lg-#{$i}") {
+ @for $i from (1 + 1) through $grid-columns {
+ $list: "#{$list}, .col-xs-#{$i}, .col-sm-#{$i}, .col-md-#{$i}, .col-lg-#{$i}";
+ }
+ #{$list} {
+ position: relative;
+ // Prevent columns from collapsing when empty
+ min-height: 1px;
+ // Inner gutter via padding
+ padding-left: ($grid-gutter-width / 2);
+ padding-right: ($grid-gutter-width / 2);
+ }
+}
+
+
+// [converter] This is defined recursively in LESS, but Sass supports real loops
+@mixin float-grid-columns($class, $i: 1, $list: ".col-#{$class}-#{$i}") {
+ @for $i from (1 + 1) through $grid-columns {
+ $list: "#{$list}, .col-#{$class}-#{$i}";
+ }
+ #{$list} {
+ float: left;
+ }
+}
+
+
+@mixin calc-grid-column($index, $class, $type) {
+ @if ($type == width) and ($index > 0) {
+ .col-#{$class}-#{$index} {
+ width: percentage(($index / $grid-columns));
+ }
+ }
+ @if ($type == push) and ($index > 0) {
+ .col-#{$class}-push-#{$index} {
+ left: percentage(($index / $grid-columns));
+ }
+ }
+ @if ($type == push) and ($index == 0) {
+ .col-#{$class}-push-0 {
+ left: auto;
+ }
+ }
+ @if ($type == pull) and ($index > 0) {
+ .col-#{$class}-pull-#{$index} {
+ right: percentage(($index / $grid-columns));
+ }
+ }
+ @if ($type == pull) and ($index == 0) {
+ .col-#{$class}-pull-0 {
+ right: auto;
+ }
+ }
+ @if ($type == offset) {
+ .col-#{$class}-offset-#{$index} {
+ margin-left: percentage(($index / $grid-columns));
+ }
+ }
+}
+
+// [converter] This is defined recursively in LESS, but Sass supports real loops
+@mixin loop-grid-columns($columns, $class, $type) {
+ @for $i from 0 through $columns {
+ @include calc-grid-column($i, $class, $type);
+ }
+}
+
+
+// Create grid for specific class
+@mixin make-grid($class) {
+ @include float-grid-columns($class);
+ @include loop-grid-columns($grid-columns, $class, width);
+ @include loop-grid-columns($grid-columns, $class, pull);
+ @include loop-grid-columns($grid-columns, $class, push);
+ @include loop-grid-columns($grid-columns, $class, offset);
+}
diff --git a/release/pui-v1.9.1/bootstrap-sass/bootstrap/mixins/_grid.scss b/release/pui-v1.9.1/bootstrap-sass/bootstrap/mixins/_grid.scss
new file mode 100644
index 000000000..ae164338a
--- /dev/null
+++ b/release/pui-v1.9.1/bootstrap-sass/bootstrap/mixins/_grid.scss
@@ -0,0 +1,122 @@
+// Grid system
+//
+// Generate semantic grid columns with these mixins.
+
+// Centered container element
+@mixin container-fixed($gutter: $grid-gutter-width) {
+ margin-right: auto;
+ margin-left: auto;
+ padding-left: ($gutter / 2);
+ padding-right: ($gutter / 2);
+ @include clearfix;
+}
+
+// Creates a wrapper for a series of columns
+@mixin make-row($gutter: $grid-gutter-width) {
+ margin-left: ($gutter / -2);
+ margin-right: ($gutter / -2);
+ @include clearfix;
+}
+
+// Generate the extra small columns
+@mixin make-xs-column($columns, $gutter: $grid-gutter-width) {
+ position: relative;
+ float: left;
+ width: percentage(($columns / $grid-columns));
+ min-height: 1px;
+ padding-left: ($gutter / 2);
+ padding-right: ($gutter / 2);
+}
+@mixin make-xs-column-offset($columns) {
+ margin-left: percentage(($columns / $grid-columns));
+}
+@mixin make-xs-column-push($columns) {
+ left: percentage(($columns / $grid-columns));
+}
+@mixin make-xs-column-pull($columns) {
+ right: percentage(($columns / $grid-columns));
+}
+
+// Generate the small columns
+@mixin make-sm-column($columns, $gutter: $grid-gutter-width) {
+ position: relative;
+ min-height: 1px;
+ padding-left: ($gutter / 2);
+ padding-right: ($gutter / 2);
+
+ @media (min-width: $screen-sm-min) {
+ float: left;
+ width: percentage(($columns / $grid-columns));
+ }
+}
+@mixin make-sm-column-offset($columns) {
+ @media (min-width: $screen-sm-min) {
+ margin-left: percentage(($columns / $grid-columns));
+ }
+}
+@mixin make-sm-column-push($columns) {
+ @media (min-width: $screen-sm-min) {
+ left: percentage(($columns / $grid-columns));
+ }
+}
+@mixin make-sm-column-pull($columns) {
+ @media (min-width: $screen-sm-min) {
+ right: percentage(($columns / $grid-columns));
+ }
+}
+
+// Generate the medium columns
+@mixin make-md-column($columns, $gutter: $grid-gutter-width) {
+ position: relative;
+ min-height: 1px;
+ padding-left: ($gutter / 2);
+ padding-right: ($gutter / 2);
+
+ @media (min-width: $screen-md-min) {
+ float: left;
+ width: percentage(($columns / $grid-columns));
+ }
+}
+@mixin make-md-column-offset($columns) {
+ @media (min-width: $screen-md-min) {
+ margin-left: percentage(($columns / $grid-columns));
+ }
+}
+@mixin make-md-column-push($columns) {
+ @media (min-width: $screen-md-min) {
+ left: percentage(($columns / $grid-columns));
+ }
+}
+@mixin make-md-column-pull($columns) {
+ @media (min-width: $screen-md-min) {
+ right: percentage(($columns / $grid-columns));
+ }
+}
+
+// Generate the large columns
+@mixin make-lg-column($columns, $gutter: $grid-gutter-width) {
+ position: relative;
+ min-height: 1px;
+ padding-left: ($gutter / 2);
+ padding-right: ($gutter / 2);
+
+ @media (min-width: $screen-lg-min) {
+ float: left;
+ width: percentage(($columns / $grid-columns));
+ }
+}
+@mixin make-lg-column-offset($columns) {
+ @media (min-width: $screen-lg-min) {
+ margin-left: percentage(($columns / $grid-columns));
+ }
+}
+@mixin make-lg-column-push($columns) {
+ @media (min-width: $screen-lg-min) {
+ left: percentage(($columns / $grid-columns));
+ }
+}
+@mixin make-lg-column-pull($columns) {
+ @media (min-width: $screen-lg-min) {
+ right: percentage(($columns / $grid-columns));
+ }
+}
diff --git a/release/pui-v1.9.1/bootstrap-sass/bootstrap/mixins/_hide-text.scss b/release/pui-v1.9.1/bootstrap-sass/bootstrap/mixins/_hide-text.scss
new file mode 100644
index 000000000..45db63855
--- /dev/null
+++ b/release/pui-v1.9.1/bootstrap-sass/bootstrap/mixins/_hide-text.scss
@@ -0,0 +1,21 @@
+// CSS image replacement
+//
+// Heads up! v3 launched with with only `.hide-text()`, but per our pattern for
+// mixins being reused as classes with the same name, this doesn't hold up. As
+// of v3.0.1 we have added `.text-hide()` and deprecated `.hide-text()`.
+//
+// Source: https://github.com/h5bp/html5-boilerplate/commit/aa0396eae757
+
+// Deprecated as of v3.0.1 (will be removed in v4)
+@mixin hide-text() {
+ font: #{0/0} a;
+ color: transparent;
+ text-shadow: none;
+ background-color: transparent;
+ border: 0;
+}
+
+// New mixin to use as of v3.0.1
+@mixin text-hide() {
+ @include hide-text;
+}
diff --git a/release/pui-v1.9.1/bootstrap-sass/bootstrap/mixins/_image.scss b/release/pui-v1.9.1/bootstrap-sass/bootstrap/mixins/_image.scss
new file mode 100644
index 000000000..c8dcf5e9c
--- /dev/null
+++ b/release/pui-v1.9.1/bootstrap-sass/bootstrap/mixins/_image.scss
@@ -0,0 +1,33 @@
+// Image Mixins
+// - Responsive image
+// - Retina image
+
+
+// Responsive image
+//
+// Keep images from scaling beyond the width of their parents.
+@mixin img-responsive($display: block) {
+ display: $display;
+ max-width: 100%; // Part 1: Set a maximum relative to the parent
+ height: auto; // Part 2: Scale the height according to the width, otherwise you get stretching
+}
+
+
+// Retina image
+//
+// Short retina mixin for setting background-image and -size. Note that the
+// spelling of `min--moz-device-pixel-ratio` is intentional.
+@mixin img-retina($file-1x, $file-2x, $width-1x, $height-1x) {
+ background-image: url(if($bootstrap-sass-asset-helper, twbs-image-path("#{$file-1x}"), "#{$file-1x}"));
+
+ @media
+ only screen and (-webkit-min-device-pixel-ratio: 2),
+ only screen and ( min--moz-device-pixel-ratio: 2),
+ only screen and ( -o-min-device-pixel-ratio: 2/1),
+ only screen and ( min-device-pixel-ratio: 2),
+ only screen and ( min-resolution: 192dpi),
+ only screen and ( min-resolution: 2dppx) {
+ background-image: url(if($bootstrap-sass-asset-helper, twbs-image-path("#{$file-2x}"), "#{$file-2x}"));
+ background-size: $width-1x $height-1x;
+ }
+}
diff --git a/release/pui-v1.9.1/bootstrap-sass/bootstrap/mixins/_labels.scss b/release/pui-v1.9.1/bootstrap-sass/bootstrap/mixins/_labels.scss
new file mode 100644
index 000000000..eda6dfd29
--- /dev/null
+++ b/release/pui-v1.9.1/bootstrap-sass/bootstrap/mixins/_labels.scss
@@ -0,0 +1,12 @@
+// Labels
+
+@mixin label-variant($color) {
+ background-color: $color;
+
+ &[href] {
+ &:hover,
+ &:focus {
+ background-color: darken($color, 10%);
+ }
+ }
+}
diff --git a/release/pui-v1.9.1/bootstrap-sass/bootstrap/mixins/_list-group.scss b/release/pui-v1.9.1/bootstrap-sass/bootstrap/mixins/_list-group.scss
new file mode 100644
index 000000000..5f05e7ba2
--- /dev/null
+++ b/release/pui-v1.9.1/bootstrap-sass/bootstrap/mixins/_list-group.scss
@@ -0,0 +1,31 @@
+// List Groups
+
+@mixin list-group-item-variant($state, $background, $color) {
+ .list-group-item-#{$state} {
+ color: $color;
+ background-color: $background;
+
+ // [converter] extracted a& to a.list-group-item-#{$state}
+ }
+
+ a.list-group-item-#{$state} {
+ color: $color;
+
+ .list-group-item-heading {
+ color: inherit;
+ }
+
+ &:hover,
+ &:focus {
+ color: $color;
+ background-color: darken($background, 5%);
+ }
+ &.active,
+ &.active:hover,
+ &.active:focus {
+ color: #fff;
+ background-color: $color;
+ border-color: $color;
+ }
+ }
+}
diff --git a/release/pui-v1.9.1/bootstrap-sass/bootstrap/mixins/_nav-divider.scss b/release/pui-v1.9.1/bootstrap-sass/bootstrap/mixins/_nav-divider.scss
new file mode 100644
index 000000000..2e6da02a4
--- /dev/null
+++ b/release/pui-v1.9.1/bootstrap-sass/bootstrap/mixins/_nav-divider.scss
@@ -0,0 +1,10 @@
+// Horizontal dividers
+//
+// Dividers (basically an hr) within dropdowns and nav lists
+
+@mixin nav-divider($color: #e5e5e5) {
+ height: 1px;
+ margin: (($line-height-computed / 2) - 1) 0;
+ overflow: hidden;
+ background-color: $color;
+}
diff --git a/release/pui-v1.9.1/bootstrap-sass/bootstrap/mixins/_nav-vertical-align.scss b/release/pui-v1.9.1/bootstrap-sass/bootstrap/mixins/_nav-vertical-align.scss
new file mode 100644
index 000000000..c8fbf1a7d
--- /dev/null
+++ b/release/pui-v1.9.1/bootstrap-sass/bootstrap/mixins/_nav-vertical-align.scss
@@ -0,0 +1,9 @@
+// Navbar vertical align
+//
+// Vertically center elements in the navbar.
+// Example: an element has a height of 30px, so write out `.navbar-vertical-align(30px);` to calculate the appropriate top margin.
+
+@mixin navbar-vertical-align($element-height) {
+ margin-top: (($navbar-height - $element-height) / 2);
+ margin-bottom: (($navbar-height - $element-height) / 2);
+}
diff --git a/release/pui-v1.9.1/bootstrap-sass/bootstrap/mixins/_opacity.scss b/release/pui-v1.9.1/bootstrap-sass/bootstrap/mixins/_opacity.scss
new file mode 100644
index 000000000..df088adfe
--- /dev/null
+++ b/release/pui-v1.9.1/bootstrap-sass/bootstrap/mixins/_opacity.scss
@@ -0,0 +1,8 @@
+// Opacity
+
+@mixin opacity($opacity) {
+ opacity: $opacity;
+ // IE8 filter
+ $opacity-ie: ($opacity * 100);
+ filter: #{alpha(opacity=$opacity-ie)};
+}
diff --git a/release/pui-v1.9.1/bootstrap-sass/bootstrap/mixins/_pagination.scss b/release/pui-v1.9.1/bootstrap-sass/bootstrap/mixins/_pagination.scss
new file mode 100644
index 000000000..43fff6863
--- /dev/null
+++ b/release/pui-v1.9.1/bootstrap-sass/bootstrap/mixins/_pagination.scss
@@ -0,0 +1,23 @@
+// Pagination
+
+@mixin pagination-size($padding-vertical, $padding-horizontal, $font-size, $border-radius) {
+ > li {
+ > a,
+ > span {
+ padding: $padding-vertical $padding-horizontal;
+ font-size: $font-size;
+ }
+ &:first-child {
+ > a,
+ > span {
+ @include border-left-radius($border-radius);
+ }
+ }
+ &:last-child {
+ > a,
+ > span {
+ @include border-right-radius($border-radius);
+ }
+ }
+ }
+}
diff --git a/release/pui-v1.9.1/bootstrap-sass/bootstrap/mixins/_panels.scss b/release/pui-v1.9.1/bootstrap-sass/bootstrap/mixins/_panels.scss
new file mode 100644
index 000000000..3ff31ae51
--- /dev/null
+++ b/release/pui-v1.9.1/bootstrap-sass/bootstrap/mixins/_panels.scss
@@ -0,0 +1,24 @@
+// Panels
+
+@mixin panel-variant($border, $heading-text-color, $heading-bg-color, $heading-border) {
+ border-color: $border;
+
+ & > .panel-heading {
+ color: $heading-text-color;
+ background-color: $heading-bg-color;
+ border-color: $heading-border;
+
+ + .panel-collapse > .panel-body {
+ border-top-color: $border;
+ }
+ .badge {
+ color: $heading-bg-color;
+ background-color: $heading-text-color;
+ }
+ }
+ & > .panel-footer {
+ + .panel-collapse > .panel-body {
+ border-bottom-color: $border;
+ }
+ }
+}
diff --git a/release/pui-v1.9.1/bootstrap-sass/bootstrap/mixins/_progress-bar.scss b/release/pui-v1.9.1/bootstrap-sass/bootstrap/mixins/_progress-bar.scss
new file mode 100644
index 000000000..90a62afc2
--- /dev/null
+++ b/release/pui-v1.9.1/bootstrap-sass/bootstrap/mixins/_progress-bar.scss
@@ -0,0 +1,10 @@
+// Progress bars
+
+@mixin progress-bar-variant($color) {
+ background-color: $color;
+
+ // Deprecated parent class requirement as of v3.2.0
+ .progress-striped & {
+ @include gradient-striped;
+ }
+}
diff --git a/release/pui-v1.9.1/bootstrap-sass/bootstrap/mixins/_reset-filter.scss b/release/pui-v1.9.1/bootstrap-sass/bootstrap/mixins/_reset-filter.scss
new file mode 100644
index 000000000..bf7305120
--- /dev/null
+++ b/release/pui-v1.9.1/bootstrap-sass/bootstrap/mixins/_reset-filter.scss
@@ -0,0 +1,8 @@
+// Reset filters for IE
+//
+// When you need to remove a gradient background, do not forget to use this to reset
+// the IE filter for IE9 and below.
+
+@mixin reset-filter() {
+ filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
+}
diff --git a/release/pui-v1.9.1/bootstrap-sass/bootstrap/mixins/_resize.scss b/release/pui-v1.9.1/bootstrap-sass/bootstrap/mixins/_resize.scss
new file mode 100644
index 000000000..83fa63791
--- /dev/null
+++ b/release/pui-v1.9.1/bootstrap-sass/bootstrap/mixins/_resize.scss
@@ -0,0 +1,6 @@
+// Resize anything
+
+@mixin resizable($direction) {
+ resize: $direction; // Options: horizontal, vertical, both
+ overflow: auto; // Per CSS3 UI, `resize` only applies when `overflow` isn't `visible`
+}
diff --git a/release/pui-v1.9.1/bootstrap-sass/bootstrap/mixins/_responsive-visibility.scss b/release/pui-v1.9.1/bootstrap-sass/bootstrap/mixins/_responsive-visibility.scss
new file mode 100644
index 000000000..9867db013
--- /dev/null
+++ b/release/pui-v1.9.1/bootstrap-sass/bootstrap/mixins/_responsive-visibility.scss
@@ -0,0 +1,21 @@
+// Responsive utilities
+
+//
+// More easily include all the states for responsive-utilities.less.
+// [converter] $parent hack
+@mixin responsive-visibility($parent) {
+ #{$parent} {
+ display: block !important;
+ }
+ table#{$parent} { display: table; }
+ tr#{$parent} { display: table-row !important; }
+ th#{$parent},
+ td#{$parent} { display: table-cell !important; }
+}
+
+// [converter] $parent hack
+@mixin responsive-invisibility($parent) {
+ #{$parent} {
+ display: none !important;
+ }
+}
diff --git a/release/pui-v1.9.1/bootstrap-sass/bootstrap/mixins/_size.scss b/release/pui-v1.9.1/bootstrap-sass/bootstrap/mixins/_size.scss
new file mode 100644
index 000000000..abbe2463c
--- /dev/null
+++ b/release/pui-v1.9.1/bootstrap-sass/bootstrap/mixins/_size.scss
@@ -0,0 +1,10 @@
+// Sizing shortcuts
+
+@mixin size($width, $height) {
+ width: $width;
+ height: $height;
+}
+
+@mixin square($size) {
+ @include size($size, $size);
+}
diff --git a/release/pui-v1.9.1/bootstrap-sass/bootstrap/mixins/_tab-focus.scss b/release/pui-v1.9.1/bootstrap-sass/bootstrap/mixins/_tab-focus.scss
new file mode 100644
index 000000000..7df0ae7ca
--- /dev/null
+++ b/release/pui-v1.9.1/bootstrap-sass/bootstrap/mixins/_tab-focus.scss
@@ -0,0 +1,9 @@
+// WebKit-style focus
+
+@mixin tab-focus() {
+ // Default
+ outline: thin dotted;
+ // WebKit
+ outline: 5px auto -webkit-focus-ring-color;
+ outline-offset: -2px;
+}
diff --git a/release/pui-v1.9.1/bootstrap-sass/bootstrap/mixins/_table-row.scss b/release/pui-v1.9.1/bootstrap-sass/bootstrap/mixins/_table-row.scss
new file mode 100644
index 000000000..136795081
--- /dev/null
+++ b/release/pui-v1.9.1/bootstrap-sass/bootstrap/mixins/_table-row.scss
@@ -0,0 +1,28 @@
+// Tables
+
+@mixin table-row-variant($state, $background) {
+ // Exact selectors below required to override `.table-striped` and prevent
+ // inheritance to nested tables.
+ .table > thead > tr,
+ .table > tbody > tr,
+ .table > tfoot > tr {
+ > td.#{$state},
+ > th.#{$state},
+ &.#{$state} > td,
+ &.#{$state} > th {
+ background-color: $background;
+ }
+ }
+
+ // Hover states for `.table-hover`
+ // Note: this is not available for cells or rows within `thead` or `tfoot`.
+ .table-hover > tbody > tr {
+ > td.#{$state}:hover,
+ > th.#{$state}:hover,
+ &.#{$state}:hover > td,
+ &:hover > .#{$state},
+ &.#{$state}:hover > th {
+ background-color: darken($background, 5%);
+ }
+ }
+}
diff --git a/release/pui-v1.9.1/bootstrap-sass/bootstrap/mixins/_text-emphasis.scss b/release/pui-v1.9.1/bootstrap-sass/bootstrap/mixins/_text-emphasis.scss
new file mode 100644
index 000000000..1101e0366
--- /dev/null
+++ b/release/pui-v1.9.1/bootstrap-sass/bootstrap/mixins/_text-emphasis.scss
@@ -0,0 +1,11 @@
+// Typography
+
+// [converter] $parent hack
+@mixin text-emphasis-variant($parent, $color) {
+ #{$parent} {
+ color: $color;
+ }
+ a#{$parent}:hover {
+ color: darken($color, 10%);
+ }
+}
diff --git a/release/pui-v1.9.1/bootstrap-sass/bootstrap/mixins/_text-overflow.scss b/release/pui-v1.9.1/bootstrap-sass/bootstrap/mixins/_text-overflow.scss
new file mode 100644
index 000000000..1593b25ea
--- /dev/null
+++ b/release/pui-v1.9.1/bootstrap-sass/bootstrap/mixins/_text-overflow.scss
@@ -0,0 +1,8 @@
+// Text overflow
+// Requires inline-block or block for proper styling
+
+@mixin text-overflow() {
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+}
diff --git a/release/pui-v1.9.1/bootstrap-sass/bootstrap/mixins/_vendor-prefixes.scss b/release/pui-v1.9.1/bootstrap-sass/bootstrap/mixins/_vendor-prefixes.scss
new file mode 100644
index 000000000..a6b9ef4e5
--- /dev/null
+++ b/release/pui-v1.9.1/bootstrap-sass/bootstrap/mixins/_vendor-prefixes.scss
@@ -0,0 +1,222 @@
+// Vendor Prefixes
+//
+// All vendor mixins are deprecated as of v3.2.0 due to the introduction of
+// Autoprefixer in our Gruntfile. They will be removed in v4.
+
+// - Animations
+// - Backface visibility
+// - Box shadow
+// - Box sizing
+// - Content columns
+// - Hyphens
+// - Placeholder text
+// - Transformations
+// - Transitions
+// - User Select
+
+
+// Animations
+@mixin animation($animation) {
+ -webkit-animation: $animation;
+ -o-animation: $animation;
+ animation: $animation;
+}
+@mixin animation-name($name) {
+ -webkit-animation-name: $name;
+ animation-name: $name;
+}
+@mixin animation-duration($duration) {
+ -webkit-animation-duration: $duration;
+ animation-duration: $duration;
+}
+@mixin animation-timing-function($timing-function) {
+ -webkit-animation-timing-function: $timing-function;
+ animation-timing-function: $timing-function;
+}
+@mixin animation-delay($delay) {
+ -webkit-animation-delay: $delay;
+ animation-delay: $delay;
+}
+@mixin animation-iteration-count($iteration-count) {
+ -webkit-animation-iteration-count: $iteration-count;
+ animation-iteration-count: $iteration-count;
+}
+@mixin animation-direction($direction) {
+ -webkit-animation-direction: $direction;
+ animation-direction: $direction;
+}
+@mixin animation-fill-mode($fill-mode) {
+ -webkit-animation-fill-mode: $fill-mode;
+ animation-fill-mode: $fill-mode;
+}
+
+// Backface visibility
+// Prevent browsers from flickering when using CSS 3D transforms.
+// Default value is `visible`, but can be changed to `hidden`
+
+@mixin backface-visibility($visibility){
+ -webkit-backface-visibility: $visibility;
+ -moz-backface-visibility: $visibility;
+ backface-visibility: $visibility;
+}
+
+// Drop shadows
+//
+// Note: Deprecated `.box-shadow()` as of v3.1.0 since all of Bootstrap's
+// supported browsers that have box shadow capabilities now support it.
+
+@mixin box-shadow($shadow...) {
+ -webkit-box-shadow: $shadow; // iOS <4.3 & Android <4.1
+ box-shadow: $shadow;
+}
+
+// Box sizing
+@mixin box-sizing($boxmodel) {
+ -webkit-box-sizing: $boxmodel;
+ -moz-box-sizing: $boxmodel;
+ box-sizing: $boxmodel;
+}
+
+// CSS3 Content Columns
+@mixin content-columns($column-count, $column-gap: $grid-gutter-width) {
+ -webkit-column-count: $column-count;
+ -moz-column-count: $column-count;
+ column-count: $column-count;
+ -webkit-column-gap: $column-gap;
+ -moz-column-gap: $column-gap;
+ column-gap: $column-gap;
+}
+
+// Optional hyphenation
+@mixin hyphens($mode: auto) {
+ word-wrap: break-word;
+ -webkit-hyphens: $mode;
+ -moz-hyphens: $mode;
+ -ms-hyphens: $mode; // IE10+
+ -o-hyphens: $mode;
+ hyphens: $mode;
+}
+
+// Placeholder text
+@mixin placeholder($color: $input-color-placeholder) {
+ // Firefox
+ &::-moz-placeholder {
+ color: $color;
+ opacity: 1; // See https://github.com/twbs/bootstrap/pull/11526
+ }
+ &:-ms-input-placeholder { color: $color; } // Internet Explorer 10+
+ &::-webkit-input-placeholder { color: $color; } // Safari and Chrome
+}
+
+// Transformations
+@mixin scale($ratio...) {
+ -webkit-transform: scale($ratio);
+ -ms-transform: scale($ratio); // IE9 only
+ -o-transform: scale($ratio);
+ transform: scale($ratio);
+}
+
+@mixin scaleX($ratio) {
+ -webkit-transform: scaleX($ratio);
+ -ms-transform: scaleX($ratio); // IE9 only
+ -o-transform: scaleX($ratio);
+ transform: scaleX($ratio);
+}
+@mixin scaleY($ratio) {
+ -webkit-transform: scaleY($ratio);
+ -ms-transform: scaleY($ratio); // IE9 only
+ -o-transform: scaleY($ratio);
+ transform: scaleY($ratio);
+}
+@mixin skew($x, $y) {
+ -webkit-transform: skewX($x) skewY($y);
+ -ms-transform: skewX($x) skewY($y); // See https://github.com/twbs/bootstrap/issues/4885; IE9+
+ -o-transform: skewX($x) skewY($y);
+ transform: skewX($x) skewY($y);
+}
+@mixin translate($x, $y) {
+ -webkit-transform: translate($x, $y);
+ -ms-transform: translate($x, $y); // IE9 only
+ -o-transform: translate($x, $y);
+ transform: translate($x, $y);
+}
+@mixin translate3d($x, $y, $z) {
+ -webkit-transform: translate3d($x, $y, $z);
+ transform: translate3d($x, $y, $z);
+}
+@mixin rotate($degrees) {
+ -webkit-transform: rotate($degrees);
+ -ms-transform: rotate($degrees); // IE9 only
+ -o-transform: rotate($degrees);
+ transform: rotate($degrees);
+}
+@mixin rotateX($degrees) {
+ -webkit-transform: rotateX($degrees);
+ -ms-transform: rotateX($degrees); // IE9 only
+ -o-transform: rotateX($degrees);
+ transform: rotateX($degrees);
+}
+@mixin rotateY($degrees) {
+ -webkit-transform: rotateY($degrees);
+ -ms-transform: rotateY($degrees); // IE9 only
+ -o-transform: rotateY($degrees);
+ transform: rotateY($degrees);
+}
+@mixin perspective($perspective) {
+ -webkit-perspective: $perspective;
+ -moz-perspective: $perspective;
+ perspective: $perspective;
+}
+@mixin perspective-origin($perspective) {
+ -webkit-perspective-origin: $perspective;
+ -moz-perspective-origin: $perspective;
+ perspective-origin: $perspective;
+}
+@mixin transform-origin($origin) {
+ -webkit-transform-origin: $origin;
+ -moz-transform-origin: $origin;
+ -ms-transform-origin: $origin; // IE9 only
+ transform-origin: $origin;
+}
+
+
+// Transitions
+
+@mixin transition($transition...) {
+ -webkit-transition: $transition;
+ -o-transition: $transition;
+ transition: $transition;
+}
+@mixin transition-property($transition-property...) {
+ -webkit-transition-property: $transition-property;
+ transition-property: $transition-property;
+}
+@mixin transition-delay($transition-delay) {
+ -webkit-transition-delay: $transition-delay;
+ transition-delay: $transition-delay;
+}
+@mixin transition-duration($transition-duration...) {
+ -webkit-transition-duration: $transition-duration;
+ transition-duration: $transition-duration;
+}
+@mixin transition-timing-function($timing-function) {
+ -webkit-transition-timing-function: $timing-function;
+ transition-timing-function: $timing-function;
+}
+@mixin transition-transform($transition...) {
+ -webkit-transition: -webkit-transform $transition;
+ -moz-transition: -moz-transform $transition;
+ -o-transition: -o-transform $transition;
+ transition: transform $transition;
+}
+
+
+// User select
+// For selecting text on the page
+
+@mixin user-select($select) {
+ -webkit-user-select: $select;
+ -moz-user-select: $select;
+ -ms-user-select: $select; // IE10+
+ user-select: $select;
+}
diff --git a/release/pui-v1.9.1/by_product.html b/release/pui-v1.9.1/by_product.html
new file mode 100644
index 000000000..ec8204e00
--- /dev/null
+++ b/release/pui-v1.9.1/by_product.html
@@ -0,0 +1,1574 @@
+
+
+
+ a brand new styleguide: by Product
+
+
+
+
+
+Console
+
+
+
+Event List
+This is a special list-group, with styles per-event for colors and icons.
+
+
+ Deprecation warning
+
+
+ This component is deprecated.
+ To create this component, use a list group .
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
<ul class= "list-group event-list" >
+ <li class= "list-group-item started" >
+ <div class= "media" >
+ <div class= "media-left media-middle" >
+ <div class= "event-icon" ></div>
+ </div>
+ <div class= "media-body" >
+ <div class= "event-title" > started app</div>
+ <span class= "event-user" > user@example.com</span>
+ <span class= "event-timestamp" > 11/14/2014 at 03:05 PM UTC</span>
+ </div>
+ </div>
+ </li>
+ <li class= "list-group-item stopped" >
+ <div class= "media" >
+ <div class= "media-left media-middle" >
+ <div class= "event-icon" ></div>
+ </div>
+ <div class= "media-body" >
+ <div class= "event-title" > stopped app</div>
+ <span class= "event-user" > user@example.com</span>
+ <span class= "event-timestamp" > 11/14/2014 at 03:05 PM UTC</span>
+ </div>
+ </div>
+ </li>
+ <li class= "list-group-item updated" >
+ <div class= "media" >
+ <div class= "media-left media-middle" >
+ <div class= "event-icon" ></div>
+ </div>
+ <div class= "media-body" >
+ <div class= "event-title" > updated app</div>
+ <span class= "event-user" > user@example.com</span>
+ <span class= "event-timestamp" > 11/14/2014 at 03:05 PM UTC</span>
+ </div>
+ </div>
+ </li>
+ <li class= "list-group-item scaled" >
+ <div class= "media" >
+ <div class= "media-left media-middle" >
+ <div class= "event-icon" ></div>
+ </div>
+ <div class= "media-body" >
+ <div class= "event-title" > scaled app</div>
+ <span class= "event-user" > user@example.com</span>
+ <span class= "event-timestamp" > 11/14/2014 at 03:05 PM UTC</span>
+ </div>
+ </div>
+ </li>
+ <li class= "list-group-item crashed" >
+ <div class= "media" >
+ <div class= "media-left media-middle" >
+ <div class= "event-icon" ></div>
+ </div>
+ <div class= "media-body" >
+ <div class= "event-title" > app crashed</div>
+ <span class= "event-user" > user@example.com</span>
+ <span class= "event-timestamp" > 11/14/2014 at 03:05 PM UTC</span>
+ </div>
+ </div>
+ </li>
+ <li class= "list-group-item created" >
+ <div class= "media" >
+ <div class= "media-left media-middle" >
+ <div class= "event-icon" ></div>
+ </div>
+ <div class= "media-body" >
+ <div class= "event-title" > created app</div>
+ <span class= "event-user" > user@example.com</span>
+ <span class= "event-timestamp" > 11/14/2014 at 03:05 PM UTC</span>
+ </div>
+ </div>
+ </li>
+ <li class= "list-group-item renamed phn" >
+ <div class= "media" >
+ <div class= "media-left media-middle" >
+ <div class= "event-icon" ></div>
+ </div>
+ <div class= "media-body" >
+ <div class= "event-title" > renamed app</div>
+ <span class= "event-user" > user@example.com</span>
+ <span class= "event-timestamp" > 11/14/2014 at 03:05 PM UTC</span>
+ </div>
+ </div>
+ </li>
+</ul>
+
+
+ Copy
+
+
+
Panel Tile
+Tile panels extend the behavior of flex panels. They provide an animated footer on hover, at the bottom of a fixed-height panel.
+
+
+
+
<ul class= "list-cards list-card-1 list-cards-lg" >
+ <li>
+ <a class= "list-card-link panel panel-flex panel-tile bg-neutral-11" href= "http://www.google.com/" >
+ <div class= "panel-body list-card-wrapper" >
+ Hover to see secondary state.
+ </div>
+ <div class= "panel-footer" >
+ This is the footer
+ </div>
+ </a>
+ </li>
+</ul>
+
+
+ Copy
+
+
+
Traffic Lights
+Traffic lights are used to show the status of the application. "On" is used for active applications, "off" for inactive, and "loading" for when the status is still loading.
+
+
+ Deprecation warning
+
+
+ This component is deprecated.
+
+
+
+
+
+
+
+ On
+
+
+
+
+
+
+
+
+
+
+
+
<h3> On</h3>
+<ul class= "traffic-lights list-unstyled mvm" >
+ <li class= "green-light" >
+ <i class= "fa fa-circle" ></i>
+ 5
+ </li>
+ <li class= "gray-light" >
+ <i class= "fa fa-circle" ></i>
+ 1
+ </li>
+ <li class= "red-light" >
+ <i class= "fa fa-circle" ></i>
+ 8
+ </li>
+</ul>
+
+
+ Copy
+
+
+
+
+
+
+
+
+
+
+
+
<h3> Off</h3>
+<ul class= "traffic-lights list-unstyled mvm" >
+ <li class= "green-light off" >
+ <i class= "fa fa-circle" ></i>
+ </li>
+ <li class= "gray-light off" >
+ <i class= "fa fa-circle" ></i>
+ </li>
+ <li class= "red-light off" >
+ <i class= "fa fa-circle" ></i>
+ </li>
+</ul>
+
+
+ Copy
+
+
+
+
+
+
+
+
+
+
+
+
<h3> Loading</h3>
+<ul class= "traffic-lights list-unstyled mvm" >
+ <li class= "green-light off loading-green" >
+ <i class= "fa fa-circle" ></i>
+ </li>
+ <li class= "gray-light off loading-gray" >
+ <i class= "fa fa-circle" ></i>
+ </li>
+ <li class= "red-light off loading-red" >
+ <i class= "fa fa-circle" ></i>
+ </li>
+</ul>
+
+
+ Copy
+
+
+
+
+
+
+
Marketing
+
+
+
+Instance Scale
+The instance scale widget is an svg and an associated code block. Include the SVG
+and code in your page and the javascript and css will handle all of the behaviors.
+Add the class .selected-group to the .instance-column you would like to be
+highlighted on page load.
+
+
+ Deprecation warning
+
+
+ This component is deprecated.
+
+
+
+
+
+
+
+ Instances
+
+
+
+ 1
+
+
+
+
+
+ 4
+
+
+
+
+ 6
+
+
+
+
+ 8
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ $ cf scale my_app -i 1
+
+
+
+
+
+
+
<div class= "panel bg-neutral-11" >
+ <div class= "row" >
+ <div class= "col-md-12 col col-md-offset-6 col-sm-24 col-sm-offset-0" >
+ <svg class= "scale-svg" xmlns= "http://www.w3.org/2000/svg" xmlns:xlink= "http://www.w3.org/1999/xlink" version= "1.1" id= "Layer_1" x= "0px" y= "0px" viewBox= "0 0 531.415 353.659" preserveAspectRatio= "xMinYMin meet" enable-background= "new 0 0 531.415 353.659" xml:space= "preserve" >
+ <polygon fill= "url(#bg-gradient)" points= "8.33,299.979 70.081,247.747 143.06,235.539 186.568,180.328 240.571,149.701 288.082,110.127 351.705,84.419 432.399,75.015 527.396,4.019 527.396, 299.979 8.33,299.979" />
+ <polyline fill= "none" stroke= "#D4D9DA" stroke-width= "4.0103" stroke-miterlimit= "10" points= "8.33,299.979 70.081,247.747 143.06,235.539 186.568,180.328 240.571,149.701 288.082,110.127 351.705,84.419 432.399,75.015 527.396,4.019 " />
+ <ellipse fill= "#D4D9DA" cx= "8.33" cy= "299.979" rx= "4.019" ry= "4.039" />
+ <ellipse fill= "#D4D9DA" cx= "69.568" cy= "247.981" rx= "4.019" ry= "4.039" />
+ <ellipse fill= "#D4D9DA" cx= "142.987" cy= "234.989" rx= "4.019" ry= "4.039" />
+ <ellipse fill= "#D4D9DA" cx= "186.935" cy= "180.42" rx= "4.019" ry= "4.039" />
+ <ellipse fill= "#D4D9DA" cx= "240.633" cy= "149.178" rx= "4.019" ry= "4.039" />
+ <ellipse fill= "#D4D9DA" cx= "289.064" cy= "110.116" rx= "4.019" ry= "4.039" />
+ <ellipse fill= "#D4D9DA" cx= "351.213" cy= "84.598" rx= "4.019" ry= "4.039" />
+ <ellipse fill= "#D4D9DA" cx= "432.796" cy= "74.253" rx= "4.019" ry= "4.039" />
+ <circle fill= "#D4D9DA" cx= "527.396" cy= "4.019" r= "4.019" />
+
+ <text transform= "matrix(1 0 0 1 0 347.8439)" fill= "#8E8F8E" font-family= "'SourceSansPro'" font-size= "18" >
+ Instances
+ </text>
+ <g class= "instances-column selected-group" id= "instances-1" filter= "url(#desaturate-filter)" >
+ <rect x= "40" y= "0" height= "530" width= "130" opacity= "0" />
+ <text transform= "matrix(1 0 0 1 105.1135 347.8439)" fill= "#00A69E" font-family= "'SourceSansPro'" font-size= "18" >
+ 1
+ </text>
+ <path fill= "#00A69E" d= "M105.96 291.558l-25.831-5.199v10.625c0 0.43 0.483 0.813 1.208 0.958l24.221 4.836c0.396 0.079 0.828 0.079 1.224 0l24.221-4.836c0.724-0.145 1.208-0.528 1.208-0.958v-10.625L105.96 291.558z" />
+ <path fill= "#3F4950" d= "M80.129 279.625v7.354l25.454 5.123c0.249 0.05 0.505 0.05 0.754 0.001l25.872-5.124v-7.432l-25.875 5.125c-0.247 0.049-0.501 0.049-0.748 0L80.129 279.625z" />
+ <path fill= "#525D64" d= "M131.001 278.331l-24.22-4.836c-0.404-0.081-0.82-0.081-1.224 0l-24.22 4.836c-0.724 0.145-1.208 0.528-1.208 0.958v0.337l25.457 5.047c0.247 0.049 0.501 0.049 0.748 0l25.875-5.125v-0.259C132.209 278.859 131.726 278.475 131.001 278.331z" />
+ </g>
+
+ <g class= "instances-column" id= "instances-4" filter= "url(#desaturate-filter)" >
+ <rect x= "170" y= "0" height= "530" width= "120" opacity= "0" />
+ <text transform= "matrix(1 0 0 1 224.4272 347.8439)" fill= "#00A69E" font-family= "'SourceSansPro'" font-size= "18" >
+ 4
+ </text>
+ <path fill= "#00A69E" d= "M228.811 291.558l-25.831-5.199v10.625c0 0.43 0.483 0.813 1.208 0.958l24.221 4.836c0.396 0.079 0.828 0.079 1.224 0l24.221-4.836c0.724-0.145 1.208-0.528 1.208-0.958v-10.625L228.811 291.558z" />
+ <path fill= "#3F4950" d= "M202.98 279.625v7.354l25.454 5.123c0.249 0.05 0.505 0.05 0.754 0.001l25.872-5.124v-7.432l-25.875 5.125c-0.247 0.049-0.501 0.049-0.748 0L202.98 279.625z" />
+ <path fill= "#525D64" d= "M253.853 278.331l-24.22-4.836c-0.404-0.081-0.82-0.081-1.224 0l-24.22 4.836c-0.724 0.145-1.208 0.528-1.208 0.958v0.337l25.457 5.047c0.247 0.049 0.501 0.049 0.748 0l25.875-5.125v-0.259C255.06 278.859 254.577 278.475 253.853 278.331z" />
+ <path fill= "#00A69E" d= "M228.811 255.697l-25.831-5.199v10.625c0 0.43 0.483 0.813 1.208 0.958l24.221 4.836c0.396 0.079 0.828 0.079 1.224 0l24.221-4.836c0.724-0.145 1.208-0.528 1.208-0.958v-10.625L228.811 255.697z" />
+ <path fill= "#3F4950" d= "M202.98 243.765v7.354l25.454 5.123c0.249 0.05 0.505 0.05 0.754 0.001l25.872-5.124v-7.432l-25.875 5.125c-0.247 0.049-0.501 0.049-0.748 0L202.98 243.765z" />
+ <path fill= "#525D64" d= "M253.853 242.47l-24.22-4.836c-0.404-0.081-0.82-0.081-1.224 0l-24.22 4.836c-0.724 0.145-1.208 0.528-1.208 0.958v0.337l25.457 5.047c0.247 0.049 0.501 0.049 0.748 0l25.875-5.125v-0.259C255.06 242.999 254.577 242.615 253.853 242.47z" />
+ <path fill= "#00A69E" d= "M228.811 219.837l-25.831-5.199v10.625c0 0.43 0.483 0.813 1.208 0.958l24.221 4.836c0.396 0.079 0.828 0.079 1.224 0l24.221-4.836c0.724-0.145 1.208-0.528 1.208-0.958v-10.625L228.811 219.837z" />
+ <path fill= "#3F4950" d= "M202.98 207.905v7.354l25.454 5.123c0.249 0.05 0.505 0.05 0.754 0.001l25.872-5.124v-7.432l-25.875 5.125c-0.247 0.049-0.501 0.049-0.748 0L202.98 207.905z" />
+ <path fill= "#525D64" d= "M253.853 206.61l-24.22-4.836c-0.404-0.081-0.82-0.081-1.224 0l-24.22 4.836c-0.724 0.145-1.208 0.528-1.208 0.958v0.337l25.457 5.047c0.247 0.049 0.501 0.049 0.748 0l25.875-5.125v-0.259C255.06 207.138 254.577 206.755 253.853 206.61z" />
+ <path fill= "#00A69E" d= "M228.811 183.977l-25.831-5.199v10.625c0 0.43 0.483 0.813 1.208 0.958l24.221 4.836c0.396 0.079 0.828 0.079 1.224 0l24.221-4.836c0.724-0.145 1.208-0.528 1.208-0.958v-10.625L228.811 183.977z" />
+ <path fill= "#3F4950" d= "M202.98 172.044v7.354l25.454 5.123c0.249 0.05 0.505 0.05 0.754 0.001l25.872-5.124v-7.432l-25.875 5.125c-0.247 0.049-0.501 0.049-0.748 0L202.98 172.044z" />
+ <path fill= "#525D64" d= "M253.853 170.75l-24.22-4.836c-0.404-0.081-0.82-0.081-1.224 0l-24.22 4.836c-0.724 0.145-1.208 0.528-1.208 0.958v0.337l25.457 5.047c0.247 0.049 0.501 0.049 0.748 0l25.875-5.125v-0.259C255.06 171.278 254.577 170.894 253.853 170.75z" />
+
+ </g>
+ <g class= "instances-column" id= "instances-6" filter= "url(#desaturate-filter)" >
+ <rect x= "290" y= "0" height= "530" width= "130" opacity= "0" />
+ <text transform= "matrix(1 0 0 1 347.2788 347.8439)" fill= "#00A69E" font-family= "'SourceSansPro'" font-size= "18" >
+ 6
+ </text>
+ <path fill= "#00A69E" d= "M351.125 291.558l-25.831-5.199v10.625c0 0.43 0.483 0.813 1.208 0.958l24.221 4.836c0.396 0.079 0.828 0.079 1.224 0l24.221-4.836c0.724-0.145 1.208-0.528 1.208-0.958v-10.625L351.125 291.558z" />
+ <path fill= "#3F4950" d= "M325.294 279.625v7.354l25.454 5.123c0.249 0.05 0.505 0.05 0.754 0.001l25.872-5.124v-7.432l-25.875 5.125c-0.247 0.049-0.501 0.049-0.748 0L325.294 279.625z" />
+ <path fill= "#525D64" d= "M376.167 278.331l-24.22-4.836c-0.404-0.081-0.82-0.081-1.224 0l-24.22 4.836c-0.724 0.145-1.208 0.528-1.208 0.958v0.337l25.457 5.047c0.247 0.049 0.501 0.049 0.748 0l25.875-5.125v-0.259C377.374 278.859 376.891 278.475 376.167 278.331z" />
+ <path fill= "#00A69E" d= "M351.125 255.697l-25.831-5.199v10.625c0 0.43 0.483 0.813 1.208 0.958l24.221 4.836c0.396 0.079 0.828 0.079 1.224 0l24.221-4.836c0.724-0.145 1.208-0.528 1.208-0.958v-10.625L351.125 255.697z" />
+ <path fill= "#3F4950" d= "M325.294 243.765v7.354l25.454 5.123c0.249 0.05 0.505 0.05 0.754 0.001l25.872-5.124v-7.432l-25.875 5.125c-0.247 0.049-0.501 0.049-0.748 0L325.294 243.765z" />
+ <path fill= "#525D64" d= "M376.167 242.47l-24.22-4.836c-0.404-0.081-0.82-0.081-1.224 0l-24.22 4.836c-0.724 0.145-1.208 0.528-1.208 0.958v0.337l25.457 5.047c0.247 0.049 0.501 0.049 0.748 0l25.875-5.125v-0.259C377.374 242.999 376.891 242.615 376.167 242.47z" />
+ <path fill= "#00A69E" d= "M351.125 219.837l-25.831-5.199v10.625c0 0.43 0.483 0.813 1.208 0.958l24.221 4.836c0.396 0.079 0.828 0.079 1.224 0l24.221-4.836c0.724-0.145 1.208-0.528 1.208-0.958v-10.625L351.125 219.837z" />
+ <path fill= "#3F4950" d= "M325.294 207.905v7.354l25.454 5.123c0.249 0.05 0.505 0.05 0.754 0.001l25.872-5.124v-7.432l-25.875 5.125c-0.247 0.049-0.501 0.049-0.748 0L325.294 207.905z" />
+ <path fill= "#525D64" d= "M376.167 206.61l-24.22-4.836c-0.404-0.081-0.82-0.081-1.224 0l-24.22 4.836c-0.724 0.145-1.208 0.528-1.208 0.958v0.337l25.457 5.047c0.247 0.049 0.501 0.049 0.748 0l25.875-5.125v-0.259C377.374 207.138 376.891 206.755 376.167 206.61z" />
+ <path fill= "#00A69E" d= "M351.125 183.977l-25.831-5.199v10.625c0 0.43 0.483 0.813 1.208 0.958l24.221 4.836c0.396 0.079 0.828 0.079 1.224 0l24.221-4.836c0.724-0.145 1.208-0.528 1.208-0.958v-10.625L351.125 183.977z" />
+ <path fill= "#3F4950" d= "M325.294 172.044v7.354l25.454 5.123c0.249 0.05 0.505 0.05 0.754 0.001l25.872-5.124v-7.432l-25.875 5.125c-0.247 0.049-0.501 0.049-0.748 0L325.294 172.044z" />
+ <path fill= "#525D64" d= "M376.167 170.75l-24.22-4.836c-0.404-0.081-0.82-0.081-1.224 0l-24.22 4.836c-0.724 0.145-1.208 0.528-1.208 0.958v0.337l25.457 5.047c0.247 0.049 0.501 0.049 0.748 0l25.875-5.125v-0.259C377.374 171.278 376.891 170.894 376.167 170.75z" />
+ <path fill= "#00A69E" d= "M351.125 148.116l-25.831-5.199v10.625c0 0.43 0.483 0.813 1.208 0.958l24.221 4.836c0.396 0.079 0.828 0.079 1.224 0l24.221-4.836c0.724-0.145 1.208-0.528 1.208-0.958v-10.625L351.125 148.116z" />
+ <path fill= "#3F4950" d= "M325.294 136.184v7.354l25.454 5.123c0.249 0.05 0.505 0.05 0.754 0.001l25.872-5.124v-7.432l-25.875 5.125c-0.247 0.049-0.501 0.049-0.748 0L325.294 136.184z" />
+ <path fill= "#525D64" d= "M376.167 134.889l-24.22-4.836c-0.404-0.081-0.82-0.081-1.224 0l-24.22 4.836c-0.724 0.145-1.208 0.528-1.208 0.958v0.337l25.457 5.047c0.247 0.049 0.501 0.049 0.748 0l25.875-5.125v-0.259C377.374 135.417 376.891 135.034 376.167 134.889z" />
+ <path fill= "#00A69E" d= "M351.125 112.332l-25.831-5.199v10.625c0 0.43 0.483 0.813 1.208 0.958l24.221 4.836c0.396 0.079 0.828 0.079 1.224 0l24.221-4.836c0.724-0.145 1.208-0.528 1.208-0.958v-10.625L351.125 112.332z" />
+ <path fill= "#3F4950" d= "M325.294 100.399v7.354l25.454 5.123c0.249 0.05 0.505 0.05 0.754 0.001l25.872-5.124v-7.432l-25.875 5.125c-0.247 0.049-0.501 0.049-0.748 0L325.294 100.399z" />
+ <path fill= "#525D64" d= "M376.167 99.105l-24.22-4.836c-0.404-0.081-0.82-0.081-1.224 0l-24.22 4.836c-0.724 0.145-1.208 0.528-1.208 0.958v0.337l25.457 5.047c0.247 0.049 0.501 0.049 0.748 0l25.875-5.125v-0.259C377.374 99.633 376.891 99.249 376.167 99.105z" />
+ </g>
+ <g class= "instances-column another-class" id= "instances-8" filter= "url(#desaturate-filter)" >
+ <rect x= "420" y= "0" height= "530" width= "130" opacity= "0" />
+
+ <text transform= "matrix(1 0 0 1 470.1294 347.8439)" fill= "#00A69E" font-family= "'SourceSansPro'" font-size= "18" >
+ 8
+ </text>
+ <path fill= "#00A69E" d= "M474.514 291.558l-25.831-5.199v10.625c0 0.43 0.483 0.813 1.208 0.958l24.221 4.836c0.396 0.079 0.828 0.079 1.224 0l24.221-4.836c0.724-0.145 1.208-0.528 1.208-0.958v-10.625L474.514 291.558z" />
+ <path fill= "#3F4950" d= "M448.683 279.625v7.354l25.454 5.123c0.249 0.05 0.505 0.05 0.754 0.001l25.872-5.124v-7.432l-25.875 5.125c-0.247 0.049-0.501 0.049-0.748 0L448.683 279.625z" />
+ <path fill= "#525D64" d= "M499.555 278.331l-24.22-4.836c-0.404-0.081-0.82-0.081-1.224 0l-24.22 4.836c-0.724 0.145-1.208 0.528-1.208 0.958v0.337l25.457 5.047c0.247 0.049 0.501 0.049 0.748 0l25.875-5.125v-0.259C500.763 278.859 500.28 278.475 499.555 278.331z" />
+ <path fill= "#00A69E" d= "M474.514 255.697l-25.831-5.199v10.625c0 0.43 0.483 0.813 1.208 0.958l24.221 4.836c0.396 0.079 0.828 0.079 1.224 0l24.221-4.836c0.724-0.145 1.208-0.528 1.208-0.958v-10.625L474.514 255.697z" />
+ <path fill= "#3F4950" d= "M448.683 243.765v7.354l25.454 5.123c0.249 0.05 0.505 0.05 0.754 0.001l25.872-5.124v-7.432l-25.875 5.125c-0.247 0.049-0.501 0.049-0.748 0L448.683 243.765z" />
+ <path fill= "#525D64" d= "M499.555 242.47l-24.22-4.836c-0.404-0.081-0.82-0.081-1.224 0l-24.22 4.836c-0.724 0.145-1.208 0.528-1.208 0.958v0.337l25.457 5.047c0.247 0.049 0.501 0.049 0.748 0l25.875-5.125v-0.259C500.763 242.999 500.28 242.615 499.555 242.47z" />
+ <path fill= "#00A69E" d= "M474.514 219.837l-25.831-5.199v10.625c0 0.43 0.483 0.813 1.208 0.958l24.221 4.836c0.396 0.079 0.828 0.079 1.224 0l24.221-4.836c0.724-0.145 1.208-0.528 1.208-0.958v-10.625L474.514 219.837z" />
+ <path fill= "#3F4950" d= "M448.683 207.905v7.354l25.454 5.123c0.249 0.05 0.505 0.05 0.754 0.001l25.872-5.124v-7.432l-25.875 5.125c-0.247 0.049-0.501 0.049-0.748 0L448.683 207.905z" />
+ <path fill= "#525D64" d= "M499.555 206.61l-24.22-4.836c-0.404-0.081-0.82-0.081-1.224 0l-24.22 4.836c-0.724 0.145-1.208 0.528-1.208 0.958v0.337l25.457 5.047c0.247 0.049 0.501 0.049 0.748 0l25.875-5.125v-0.259C500.763 207.138 500.28 206.755 499.555 206.61z" />
+ <path fill= "#00A69E" d= "M474.514 183.977l-25.831-5.199v10.625c0 0.43 0.483 0.813 1.208 0.958l24.221 4.836c0.396 0.079 0.828 0.079 1.224 0l24.221-4.836c0.724-0.145 1.208-0.528 1.208-0.958v-10.625L474.514 183.977z" />
+ <path fill= "#3F4950" d= "M448.683 172.044v7.354l25.454 5.123c0.249 0.05 0.505 0.05 0.754 0.001l25.872-5.124v-7.432l-25.875 5.125c-0.247 0.049-0.501 0.049-0.748 0L448.683 172.044z" />
+ <path fill= "#525D64" d= "M499.555 170.75l-24.22-4.836c-0.404-0.081-0.82-0.081-1.224 0l-24.22 4.836c-0.724 0.145-1.208 0.528-1.208 0.958v0.337l25.457 5.047c0.247 0.049 0.501 0.049 0.748 0l25.875-5.125v-0.259C500.763 171.278 500.28 170.894 499.555 170.75z" />
+ <path fill= "#00A69E" d= "M474.514 148.116l-25.831-5.199v10.625c0 0.43 0.483 0.813 1.208 0.958l24.221 4.836c0.396 0.079 0.828 0.079 1.224 0l24.221-4.836c0.724-0.145 1.208-0.528 1.208-0.958v-10.625L474.514 148.116z" />
+ <path fill= "#3F4950" d= "M448.683 136.184v7.354l25.454 5.123c0.249 0.05 0.505 0.05 0.754 0.001l25.872-5.124v-7.432l-25.875 5.125c-0.247 0.049-0.501 0.049-0.748 0L448.683 136.184z" />
+ <path fill= "#525D64" d= "M499.555 134.889l-24.22-4.836c-0.404-0.081-0.82-0.081-1.224 0l-24.22 4.836c-0.724 0.145-1.208 0.528-1.208 0.958v0.337l25.457 5.047c0.247 0.049 0.501 0.049 0.748 0l25.875-5.125v-0.259C500.763 135.417 500.28 135.034 499.555 134.889z" />
+ <path fill= "#00A69E" d= "M474.514 112.332l-25.831-5.199v10.625c0 0.43 0.483 0.813 1.208 0.958l24.221 4.836c0.396 0.079 0.828 0.079 1.224 0l24.221-4.836c0.724-0.145 1.208-0.528 1.208-0.958v-10.625L474.514 112.332z" />
+ <path fill= "#3F4950" d= "M448.683 100.399v7.354l25.454 5.123c0.249 0.05 0.505 0.05 0.754 0.001l25.872-5.124v-7.432l-25.875 5.125c-0.247 0.049-0.501 0.049-0.748 0L448.683 100.399z" />
+ <path fill= "#525D64" d= "M499.555 99.105l-24.22-4.836c-0.404-0.081-0.82-0.081-1.224 0l-24.22 4.836c-0.724 0.145-1.208 0.528-1.208 0.958v0.337l25.457 5.047c0.247 0.049 0.501 0.049 0.748 0l25.875-5.125v-0.259C500.763 99.633 500.28 99.249 499.555 99.105z" />
+ <path fill= "#00A69E" d= "M474.514 76.395l-25.831-5.199v10.625c0 0.43 0.483 0.813 1.208 0.958l24.221 4.836c0.396 0.079 0.828 0.079 1.224 0l24.221-4.836c0.724-0.145 1.208-0.528 1.208-0.958V71.196L474.514 76.395z" />
+ <path fill= "#3F4950" d= "M448.683 64.463v7.354l25.454 5.123c0.249 0.05 0.505 0.05 0.754 0.001l25.872-5.124v-7.432l-25.875 5.125c-0.247 0.049-0.501 0.049-0.748 0L448.683 64.463z" />
+ <path fill= "#525D64" d= "M499.555 63.168l-24.22-4.836c-0.404-0.081-0.82-0.081-1.224 0l-24.22 4.836c-0.724 0.145-1.208 0.528-1.208 0.958v0.337l25.457 5.047c0.247 0.049 0.501 0.049 0.748 0l25.875-5.125v-0.259C500.763 63.696 500.28 63.313 499.555 63.168z" />
+ <path fill= "#00A69E" d= "M474.514 40.535l-25.831-5.199v10.625c0 0.43 0.483 0.813 1.208 0.958l24.221 4.836c0.396 0.079 0.828 0.079 1.224 0l24.221-4.836c0.724-0.145 1.208-0.528 1.208-0.958V35.336L474.514 40.535z" />
+ <path fill= "#3F4950" d= "M448.683 28.603v7.354l25.454 5.123c0.249 0.05 0.505 0.05 0.754 0.001l25.872-5.124v-7.432l-25.875 5.125c-0.247 0.049-0.501 0.049-0.748 0L448.683 28.603z" />
+ <path fill= "#525D64" d= "M499.555 27.308l-24.22-4.836c-0.404-0.081-0.82-0.081-1.224 0l-24.22 4.836c-0.724 0.145-1.208 0.528-1.208 0.958v0.337l25.457 5.047c0.247 0.049 0.501 0.049 0.748 0l25.875-5.125v-0.259C500.763 27.836 500.28 27.453 499.555 27.308z" />
+ </g>
+
+ <filter id= "desaturate-filter" >
+ <feColorMatrix in= "SourceGraphic"
+ type= "saturate"
+ values= "0" />
+ </filter>
+
+ <linearGradient id= "bg-gradient" x1= "0" x2= "1" y1= "0" y2= "1" >
+ <stop class= "instances-gradient-stop-1" offset= "0%" />
+ <stop class= "instances-gradient-stop-2" offset= "90%" />
+ </linearGradient>
+ </svg>
+ </div>
+ </div>
+</div>
+
+<div>
+<pre class= "language-bash scale-code" >
+<code>
+ $ cf scale my_app -i <span class= "instance-count" > 1</span>
+</code>
+</pre>
+</div>
+
+
+ Copy
+
+
+
+
+
+
a brand new styleguide: Elements
+
+
+
+
+
+Avatars
+
+
+Regular avatars are expected to by 100px by 100px.
+
+
+
+
+
<img alt= "..." class= "img-circle avatar" height= "100" src= "http://placehold.it/100x100" width= "100" >
+
+
+ Copy
+
+
+
Small Gravatar
+Allows you to show a gravatar with the proper default 'image' (icon).
To use in a view, simply call
= render 'shared/gravatar_small', email: 'some@email.com'
+
+
+
+
+
+
+
+
+
+
+
+
<div class= "gravatar gravatar-sm" >
+ <img src= "https://secure.gravatar.com/avatar/8b7970c372aabb936ca455127e04c959?s=20&d=blank" >
+ <i class= "fa fa-user" ></i>
+</div>
+<div class= "gravatar gravatar-sm" >
+ <img src= "https://s.gravatar.com/avatar/c99bd3ce00444f946027741d5a5cd9e9?s=20&d=blank" >
+ <i class= "fa fa-user" ></i>
+</div>
+
+
+ Copy
+
+
+
Small with Envelope
+Allows you to show a gravatar with an icon overlay.
To use in a view, simply call
= render 'shared/gravatar_small', email: 'some@email.com'
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
<div class= "gravatar gravatar-sm" >
+ <img src= "https://secure.gravatar.com/avatar/8b7970c372aabb936ca455127e04c959?s=20&d=blank" >
+ <i class= "fa fa-user" ></i>
+ <i class= "overlay fa fa-envelope" ></i>
+</div>
+<div class= "gravatar gravatar-sm mlxl" >
+ <img src= "https://s.gravatar.com/avatar/c99bd3ce00444f946027741d5a5cd9e9?s=20&d=blank" >
+ <i class= "fa fa-user" ></i>
+ <i class= "overlay fa fa-envelope" ></i>
+</div>
+<div class= "gravatar gravatar-sm mlxl" >
+ <img src= "https://secure.gravatar.com/avatar/8b7970c372aabb936ca455127e04c959?s=20&d=blank" >
+ <i class= "fa fa-user highlight" ></i>
+ <i class= "overlay fa fa-check" ></i>
+</div>
+<div class= "gravatar gravatar-sm mlxl" >
+ <img src= "https://s.gravatar.com/avatar/c99bd3ce00444f946027741d5a5cd9e9?s=20&d=blank" >
+ <i class= "fa fa-user" ></i>
+ <i class= "overlay fa fa-check" ></i>
+</div>
+
+
+ Copy
+
+
+
Large Gravatar
+Allows you to show a gravatar with the proper default 'image' (icon).
Large gravatar has a white background so it can be used on the edit profile form.
To use in a view, simply call
= render 'shared/gravatar_large', email: 'some@email.com'
+
+
+
+
+
+
+
+
+
+
+
+
<div class= "gravatar gravatar-lg" >
+ <img src= "https://secure.gravatar.com/avatar/8b7970c372aabb936ca455127e04c959?s=80&d=blank" >
+ <i class= "fa fa-user" ></i>
+</div>
+<div class= "gravatar gravatar-lg" >
+ <img src= "https://s.gravatar.com/avatar/c99bd3ce00444f946027741d5a5cd9e9?s=80&d=blank" >
+ <i class= "fa fa-user" ></i>
+</div>
+
+
+ Copy
+
+
+
Backgrounds
+
+
+Background color classes can be applied to any element. See colors for a list of background classes.
+Full Bleed
+This example uses an about us hero image by default, but you can change it to any image you would like.
+Keep in mind, blurry, treated images will look better when stretched to fit a particular content area.
+
+
+
Full bleed background image
+
+
+
+
+
+
<div class= 'pane bg-full-bleed' >
+ <div class= 'container' >
+ <h1 class= 'type-neutral-11 txt-c' > Full bleed background image</h1>
+ </div>
+</div>
+
+
+ Copy
+
+
+
To modify this component to use a custom image, use an inline background-image style like so:
+
+
+
Full bleed background image
+
+
+
+
+
+
<div class= 'pane bg-full-bleed' style= "background-image: url(styleguide/such-awesome.jpg)" >
+ <div class= 'container' >
+ <h1 class= 'type-neutral-11 txt-c' > Full bleed background image</h1>
+ </div>
+</div>
+
+
+ Copy
+
+
+
Overlays
+
+
+
+
+
+
+Button styles can be applied to any element. Typically you'll want to
+use either a <button> or an <a> element:
+
+
+
+
+
+ Button
+
+
+
+
+
<button class= "btn btn-primary" > Button</button>
+
+
+ Copy
+
+
+
+
+
+
+
+
+
+
+
+
<a class= "btn btn-primary" href= "http://trulia.com" > Link</a>
+
+
+ Copy
+
+
+
+
+
+
+
If your button is actually a link to another page, please use the
+<a> element, while if your button performs an action, such as submitting
+a form or triggering some javascript event, then use a <button> element.
+
+There is an additional modifier that will make the button take the
+full width of the container. It may be used with the any of the button
+size and style modifiers.
Create block level buttons - those that span the full width of a parent - by adding .btn-block.
+
Full width button
+
+
+
+
<button class= "btn btn-primary btn-block" > Full width button</button>
+
+
+ Copy
+
+
+
There are two sizes for buttons: Large and default. Simply apply the
+size modifier class for the desired size.
+
+
+
+
+
+ Large
+
+
+
+
+
<button class= "btn btn-primary btn-lg" > Large</button>
+
+
+ Copy
+
+
+
+
+
+
+ Default
+
+
+
+
+
+
<button class= "btn btn-primary" > Default</button>
+
+
+ Copy
+
+
+
+
+
+
+
+Button
+Disabled
+Class
+Description
+
+
+Default Default btn btn-defaultThis is what buttons look like, this is the go to button style.
+
+
+Default alternate Default alternate btn btn-default-altThis is what buttons look like, this is the go to button style (on white backgrounds).
+
+
+Primary Primary btn btn-primaryUse this button as the primary call to action
+
+
+Lowlight Lowlight btn btn-lowlightUse this button for other actions, like cancel/dismiss
+
+
+Delete Delete btn btn-dangerThis button is for delete actions, these actions should also have a confirmation dialog
+
+
+Highlight Highlight btn btn-highlightUse this button for other important actions, e.g. restarting apps
+
+
+Highlight alternate Highlight alternate btn btn-highlight-altUse this button for other important actions, e.g. marketing call to actions
+
+
+Colors
+
+
+Our color pallet is composed of several different colors. At any given point in captures the current
+evolution of our design and likely includes old and new colors. Whenever possible, evolve the old
+colors rather than adding new ones.
+
+
+ Sass variables should only be used in variables.css.scss.
+
+
+ They should never be used directly when building components, because it makes
+ it very hard to change the values later if you can't tell how they might have been used.
+ You should define your own variables that use these colors in variables.css.scss.
+
+
This example shows proper use of Sass variables.
+
+
$tabs-active-bg-color: $gray-2;
+
+
+
+
+
+
+
+ $gray-1
+ .bg-neutral-1
+ .type-neutral-1
+
+
+
+
+
+
+
+
+
+
+ $gray-2
+ .bg-neutral-2
+ .type-neutral-2
+
+
+
+
+
+
+
+
+
+ $gray-3
+ .bg-neutral-3
+ .type-neutral-3
+
+
+
+
+
+
+
+
+
+ $gray-4
+ .bg-neutral-4
+ .type-neutral-4
+
+
+
+
+
+
+
+
+
+ $gray-5
+ .bg-neutral-5
+ .type-neutral-5
+
+
+
+
+
+
+
+
+
+ $gray-6
+ .bg-neutral-6
+ .type-neutral-6
+
+
+
+
+
+
+
+
+
+ $gray-7
+ .bg-neutral-7
+ .type-neutral-7
+
+
+
+
+
+
+
+
+
+ $gray-8
+ .bg-neutral-8
+ .type-neutral-8
+
+
+
+
+
+
+
+
+
+ $gray-9
+ .bg-neutral-9
+ .type-neutral-9
+
+
+
+
+
+
+
+
+
+ $gray-10
+ .bg-neutral-10
+ .type-neutral-10
+
+
+
+
+
+
+
+
+
+ $gray-11
+ .bg-neutral-11
+ .type-neutral-11
+
+
+
+
+
+
+
+
+
+
+ $dark-1
+ .bg-dark-1
+ .type-dark-1
+
+
+
+
+
+
+
+
+
+ $dark-2
+ .bg-dark-2
+ .type-dark-2
+
+
+
+
+
+
+
+
+
+ $dark-3
+ .bg-dark-3
+ .type-dark-3
+
+
+
+
+
+
+
+
+
+
+ $brand-1
+ .bg-brand-1
+ .type-brand-1
+
+
+
+
+
+
+
+
+
+ $brand-2
+ .bg-brand-2
+ .type-brand-2
+
+
+
+
+
+
+
+
+
+ $brand-3
+ .bg-brand-3
+ .type-brand-3
+
+
+
+
+
+
+
+
+
+ $brand-4
+ .bg-brand-4
+ .type-brand-4
+
+
+
+
+
+
+
+
+
+ $brand-5
+ .bg-brand-5
+ .type-brand-5
+
+
+
+
+
+
+
+
+
+
+ $accent-1
+ .bg-accent-1
+ .type-accent-1
+
+
+
+
+
+
+
+
+
+ $accent-2
+ .bg-accent-2
+ .type-accent-2
+
+
+
+
+
+
+
+
+
+ $accent-3
+ .bg-accent-3
+ .type-accent-3
+
+
+
+
+
+
+
+
+
+ $accent-4
+ .bg-accent-4
+ .type-accent-4
+
+
+
+
+
+
+
+
+
+ $accent-5
+ .bg-accent-5
+ .type-accent-5
+
+
+
+
+
+
+
+
+
+
+ $error-1
+ .bg-error-1
+ .type-error-1
+
+
+
+
+
+
+
+
+
+ $error-2
+ .bg-error-2
+ .type-error-2
+
+
+
+
+
+
+
+
+
+ $error-3
+ .bg-error-3
+ .type-error-3
+
+
+
+
+
+
+
+
+
+ $error-4
+ .bg-error-4
+ .type-error-4
+
+
+
+
+
+
+
+
+
+
+ $warn-1
+ .bg-warn-1
+ .type-warn-1
+
+
+
+
+
+
+
+
+
+ $warn-2
+ .bg-warn-2
+ .type-warn-2
+
+
+
+
+
+
+
+
+
+ $warn-3
+ .bg-warn-3
+ .type-warn-3
+
+
+
+
+
+
+
+
+
+
+ $success-1
+ .bg-success-1
+ .type-success-1
+
+
+
+
+
+
+
+
+
+ $success-2
+ .bg-success-2
+ .type-success-2
+
+
+
+
+
Shadows & Glows
+
+
+Dividers
+Dividers draw horizontal lines between different content groupings.
+
+
+
+
<hr class= "divider-alternate-1" />
+<hr class= "divider-alternate-2" />
+<div class= "contrast-bar" >
+ <hr class= "divider-1" />
+ <hr class= "divider-2" />
+</div>
+
+
+ Copy
+
+
+
Embeds
+
+
+
+Responsive
+Allow browsers to determine video or slideshow dimensions based on the width of their containing block by creating an intrinsic ratio that will properly scale on any device.
Rules are directly applied to <iframe>, <embed>, and <object> elements; optionally use an explicit descendant class .embed-responsive-item when you want to match the styling for other attributes.
Pro-Tip! You don't need to include frameborder="0" in your <iframe>s as we override that for you.
+
+
+
+
<h1 class= "h2" > 16-by-9</h1>
+<div class= "row" >
+ <div class= "col-md-5" >
+ <div class= "embed-responsive embed-responsive-16by9" >
+ <iframe class= "embed-responsive-item" src= "//www.youtube.com/embed/JOCtdw9FG-s" ></iframe>
+ </div>
+ </div>
+ <div class= "col-md-7" >
+ <div class= "embed-responsive embed-responsive-16by9" >
+ <iframe class= "embed-responsive-item" src= "//www.youtube.com/embed/JOCtdw9FG-s" ></iframe>
+ </div>
+ </div>
+ <div class= "col-md-12" >
+ <div class= "embed-responsive embed-responsive-16by9" >
+ <iframe class= "embed-responsive-item" src= "//www.youtube.com/embed/JOCtdw9FG-s" ></iframe>
+ </div>
+ </div>
+</div>
+
+
+ Copy
+
+
+
+
+
+
+
<h1 class= "h2" > 4-by-3</h1>
+<div class= "row" >
+ <div class= "col-md-5" >
+ <div class= "embed-responsive embed-responsive-4by3" >
+ <iframe class= "embed-responsive-item" src= "//www.youtube.com/embed/Awf45u6zrP0" ></iframe>
+ </div>
+ </div>
+ <div class= "col-md-7" >
+ <div class= "embed-responsive embed-responsive-4by3" >
+ <iframe class= "embed-responsive-item" src= "//www.youtube.com/embed/Awf45u6zrP0" ></iframe>
+ </div>
+ </div>
+ <div class= "col-md-12" >
+ <div class= "embed-responsive embed-responsive-4by3" >
+ <iframe class= "embed-responsive-item" src= "//www.youtube.com/embed/Awf45u6zrP0" ></iframe>
+ </div>
+ </div>
+</div>
+
+
+ Copy
+
+
+
Iconography
+
+
+We use Font Awesome for scalable vector icons that can be customized - size, color, drop shadow,
+and anything that can be done with CSS. These icons will always match the font color.
Here are some commonly used icons:
+Button
+Class
+Description
+
+
+.fa.fa-plusRenders our plus icon
+
+
+.fa.fa-userRenders our person icon
+
+
+.fa.fa-sort-downRenders our triangle icon
+
+
+.fa.fa-cogRenders our gear icon
+
+
+.fa.fa-timesRenders our 'x' icon
+
+
+.fa.fa-checkRenders our check icon
+
+
+.fa.fa-chevron-rightRenders our right chevron icon
+
+
+.fa.fa-chevron-upRenders our down chevron icon
+
+
+.fa.fa-chevron-downRenders our down chevron icon
+
+
+.fa.fa-windowsRenders our Windows icon
+
+
+.fa.fa-appleRenders our Apple icon
+
+
+.fa.fa-linuxRenders our Linux icon
+
+
+.fa.fa-pencilRenders our edit icon
+
+
+.fa.fa-plus-circleRenders our second add icon
+
+
+.fa.fa-trash-oRenders our delete icon
+
+
+.fa.fa-squareRenders our square icon
+
+
+.fa.fa-repeatRenders our refresh/restart icon
+
+
+.fa.fa-playRenders our start icon
+
+
+.fa.fa-downloadRenders our download icon
+
+
+
+
+
+
<i class= "fa fa-download type-brand-3" ></i>
+
+
+ Copy
+
+
+
Iconography Sizing
+To vary the size of the icons, use the .fa-h1 through .fa-h6 classes, .fa-title, .fa-sm, or .fa-xs
+Don't use the typography size modifier classes (e.g. .title, .h1, .type-sm)
+
+
+
+
+
+ Add Stuff
+
+
+
+
+
<i class= "fa fa-plus fa-title" ></i>
+<span class= "title" > Add Stuff</span>
+
+
+ Copy
+
+
+
+
+
+
+ Add Stuff
+
+
+
+
+
<i class= "fa fa-plus fa-h1" ></i>
+<span class= "h1" > Add Stuff</span>
+
+
+ Copy
+
+
+
+
+
+
+ Add Stuff
+
+
+
+
+
<i class= "fa fa-plus fa-h2" ></i>
+<span class= "h2" > Add Stuff</span>
+
+
+ Copy
+
+
+
+
+
+
+ Add Stuff
+
+
+
+
+
<i class= "fa fa-plus fa-h3" ></i>
+<span class= "h3" > Add Stuff</span>
+
+
+ Copy
+
+
+
+
+
+
+ Add Stuff
+
+
+
+
+
<i class= "fa fa-plus fa-h4" ></i>
+<span class= "h4" > Add Stuff</span>
+
+
+ Copy
+
+
+
+
+
+
+ Add Stuff
+
+
+
+
+
<i class= "fa fa-plus fa-h5" ></i>
+<span class= "h5" > Add Stuff</span>
+
+
+ Copy
+
+
+
+
+
+
+ Add Stuff
+
+
+
+
+
<i class= "fa fa-plus fa-h6" ></i>
+<span class= "h6" > Add Stuff</span>
+
+
+ Copy
+
+
+
+
+
+
+ Add Stuff
+
+
+
+
+
<i class= "fa fa-plus" ></i>
+<span> Add Stuff</span>
+
+
+ Copy
+
+
+
+
+
+
+ Add Stuff
+
+
+
+
+
<i class= "fa fa-plus fa-sm" ></i>
+<span class= "text-sm" > Add Stuff</span>
+
+
+ Copy
+
+
+
+
+
+
+ Add Stuff
+
+
+
+
+
+
<i class= "fa fa-plus fa-xs" ></i>
+<span class= "text-xs" > Add Stuff</span>
+
+
+ Copy
+
+
+
+
+
+
+
Spinners
+Spinners are used to show that some action is in progress. Spinners come in two sizes: large and small.
+
+
+
+
+
+
+
+
+
+
+
<div class= "spinner-lg bkg-default-5 out" >
+ <i class= "fa fa-spin fa-cog mtxl" ></i>
+</div>
+
+
+ Copy
+
+
+
+
+
+
+
+
+
+
+
+
<div class= "spinner-sm bkg-default-5 out" >
+ <i class= "fa fa-spin fa-cog mtxl" ></i>
+</div>
+
+
+ Copy
+
+
+
+
+
+
+
Images
+
+
+
+Responsive
+Images can be made responsive-friendly via the addition of the .img-responsive class. This applies max-width: 100%; and height: auto; to the image so that it scales nicely to the parent element. See bootstrap 3 for further documentation of this feature.
+
+
+
+
<div class= "row" >
+ <div class= "col-md-5" >
+ <img alt= "Responsive image" class= "img-responsive" src= "styleguide/such-awesome.jpg" />
+ </div>
+ <div class= "col-md-7" >
+ <img alt= "Responsive image" class= "img-responsive" src= "styleguide/such-awesome.jpg" />
+ </div>
+ <div class= "col-md-12" >
+ <img alt= "Responsive image" class= "img-responsive" src= "styleguide/such-awesome.jpg" />
+ </div>
+</div>
+
+
+ Copy
+
+
+
Responsive SVG
+SVG can be made responsive-friendly via the addition of the .svg-responsive class on a
+wrapper div and the .svg-content class on the svg itself. You'll also need to to define
+the height to width ratio as an inline padding bottom style on the .svg-responsive element like so:
+
+
<div class="svg-responsive" style="padding-bottom: 78.31%">
+ <svg class="svg-content" viewBox="38 45 125 120" preserveAspectRatio="xMinYMin meet">
+ ...
+ </svg>
+</div>
+
+
The padding-bottom should equal the height divided by the width of your specific svg.
For more information about setting up your svg, read this article about svg coordinates systems by Sara Soueidan .
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Labels
+
+
+Labels are based on Bootstrap's labels.
+Here's an example of a label on its own.
+
+
+
+
+
+ new
+
+
+
+
+
+
<span class= "label label-primary" > new</span>
+
+
+ Copy
+
+
+
+
+
+
+
You can also place labels within HTML elements.
+It will be sized based on the element's font size and its font modifiers.
+
+
+
+
+
+
+
+
+
+
+
<p> I am a P.
+ <span class= "label label-primary" > new</span>
+</p>
+
+
+ Copy
+
+
+
+
+
+
+
I am an H3.
+ new
+
+
+
+
+
+
<h3> I am an H3.
+ <span class= "label label-primary" > new</span>
+</h3>
+
+
+ Copy
+
+
+
+
+
+
+
I am an H3 with an H5 modifier.
+ new
+
+
+
+
+
+
+
<h3 class= "h5" > I am an H3 with an H5 modifier.
+ <span class= "label label-primary" > new</span>
+</h3>
+
+
+ Copy
+
+
+
+
+
+
+
Removable Labels
+Removable labels are used as tags in an editable list. The user will either enter text or select content (i.e.: a dropdown item), and it will be styled as a removable label (most likely in a list). Developers who use these labels must implement the close functionality for when the user clicks the close button.
+
+
+
+
<span class= "label-removable" > Removable
+ <a class= "close-btn fa fa-close" ></a>
+</span>
+
+
+ Copy
+
+
+
Links
+Add the class link-text on any text links.
+This will make the link underlined on hover (except lowlight links).
+
+
+
+
<a class= "link-text" href= "http://bitly.com/11vCzUx" >
+ <i class= "fa fa-plus" ></i> Click me!
+</a>
+
+
+ Copy
+
+
+
There are four different kinds of links you can use to connect related content.
+In most cases (unless the designer specifically asks for another type of link)
+you should choose the default link.
+
+
+
+
Here's a <a class= "link-text link-lowlight" href= "http://bit.ly/1wO7Nhv" > less important link</a>
+
+
+ Copy
+
+
+
Lists
+
+
+This section contains different list styles.
+Breadcrumb
+The .list-breadcrumb can be used to provide additional page navigation.
Breadcrumbs use their own monospace font-family.
+
+
+
+
<ul class= "list-breadcrumb" >
+ <li>
+ <a href= "http://google.com" > Parent</a>
+ </li>
+ <li>
+ <a href= "http://google.com" > Child</a>
+ </li>
+ <li class= "current" >
+ <span> Current Page</span>
+ </li>
+</ul>
+
+
+ Copy
+
+
+
Cards
+As the browser width changes, list-cards fill in one after another. There are two card types, type-card-1 and
+type-card-2. For this example, we've set both of them to stack on mobile sized screens.
+
+
+
+
+
+
+
+
+
+
+
<ul class= "list-cards list-card-1 list-cards-xs" >
+ <li class= "bg-neutral-7" >
+ <p> list-card-1</p>
+ </li>
+</ul>
+
+
+ Copy
+
+
+
+
+
+
+
+
+
+
+
+
<ul class= "list-cards list-card-2 list-cards-xs" >
+ <li class= "bg-neutral-7" >
+ <p> list-card-2</p>
+ </li>
+</ul>
+
+
+ Copy
+
+
+
+
+
+
+
You can specify the breakpoint in which the cards stack by using the list-card-* classes. If the breakpoint is not
+specified, the cards fill 100% of the list-cards width.
+List Card Breakpoints
+Class Names
+
+
+extra-small
+.list-card-xs
+
+small
+.list-card-sm
+
+medium
+.list-card-md
+
+large
+.list-card-lg
+
+extra-large
+.list-card-xl
+
+
+
The cards list should only be used in fully liquid layouts, otherwise grids are a better choice.
+
This is an example of a card list with the list-cards-xs stack point applied.
+Resize the browser to see how cards stack on desktop sizes and expand on mobile sizes.
+
+
+ lorem ipsum 1
+
+
+ lorem ipsum 2
+
+
+ lorem ipsum 3
+
+
+ lorem ipsum 4
+
+
+ lorem ipsum 5
+
+
+ lorem ipsum 6
+
+
+ lorem ipsum 7
+
+
+ lorem ipsum 8
+
+
+
+
+
+
<ul class= "list-cards list-card-2 list-cards-xs" >
+ <li class= "bg-neutral-7" >
+ <p> lorem ipsum 1</p>
+ </li>
+ <li class= "bg-neutral-7" >
+ <p> lorem ipsum 2</p>
+ </li>
+ <li class= "bg-neutral-7" >
+ <p> lorem ipsum 3</p>
+ </li>
+ <li class= "bg-neutral-7" >
+ <p> lorem ipsum 4</p>
+ </li>
+ <li class= "bg-neutral-7" >
+ <p> lorem ipsum 5</p>
+ </li>
+ <li class= "bg-neutral-7" >
+ <p> lorem ipsum 6</p>
+ </li>
+ <li class= "bg-neutral-7" >
+ <p> lorem ipsum 7</p>
+ </li>
+ <li class= "bg-neutral-7" >
+ <p> lorem ipsum 8</p>
+ </li>
+</ul>
+
+
+ Copy
+
+
+
If you would like custom card dimensions, in your sass include the makeCard mixin, like so: @include makeCard(height, width, name);
+You can then access the class via .list-card-#{name}.
+Clickable List Cards
+If you want your list cards to function as links (i.e. be clickable),
+wrap all the inner content in a with class list-card-link.
+
+
+
+
<ul class= "list-cards list-card-1 list-cards-xs" >
+ <li class= "bg-neutral-7" >
+ <a class= "list-card-link" href= "http://bit.ly/1sEyvH5" >
+ <p> This entire list card is clickable!</p>
+ </a>
+ </li>
+ <li class= "bg-neutral-7" >
+ <a class= "list-card-link" href= "http://bit.ly/1sFaArX" >
+ <p> This entire list card is clickable as well!</p>
+ </a>
+ </li>
+</ul>
+
+
+ Copy
+
+
+
Checked
+Replaces the default bullet image with the font awesome checkmark.
+
+
+ feep
+
+
+ fop
+
+
+ meep
+
+
+
+
+
+
<ul class= "list-checked" >
+ <li>
+ feep
+ </li>
+ <li>
+ fop
+ </li>
+ <li>
+ meep
+ </li>
+</ul>
+
+
+ Copy
+
+
+
Group
+Use this list when you need simple gray borders between items
+
+
+ item 1
+
+
+ item 2
+
+
+ item 3
+
+
+
+
+
+
<ul class= "list-group" >
+ <li class= "list-group-item" >
+ item 1
+ </li>
+ <li class= "list-group-item" >
+ item 2
+ </li>
+ <li class= "list-group-item" >
+ item 3
+ </li>
+</ul>
+
+
+ Copy
+
+
+
Group lists are great for displaying lists of events
+Here's an example from Console:
+
+
+
+
<ul class= "list-group" >
+ <li class= "list-group-item pln" >
+ <div class= "media" >
+ <div class= "media-left media-middle phxxl" >
+ <i class= "fa-exclamation-circle type-error-3 fa h2 man" ></i>
+ </div>
+ <div class= "media-body pbn" >
+ <div class= "type-neutral-2 mbs" >
+ app crashed
+ </div>
+ <div class= "type-neutral-4 small" >
+ <span> user@example.com</span>
+ <span> 11/14/2014 at 4:00 PM UTC</span>
+ </div>
+ </div>
+ </div>
+ </li>
+
+ <li class= "list-group-item pln" >
+ <div class= "media" >
+ <div class= "media-left media-middle phxxl" >
+ <i class= "fa-stop type-neutral-5 fa h2 man" ></i>
+ </div>
+ <div class= "media-body pbn" >
+ <div class= "type-neutral-2 mbs" >
+ stopped app
+ </div>
+ <div class= "type-neutral-4 small" >
+ <span> user@example.com</span>
+ <span> 11/14/2014 at 3:00 PM UTC</span>
+ </div>
+ </div>
+ </div>
+ </li>
+
+ <li class= "list-group-item pln" >
+ <div class= "media" >
+ <div class= "media-left media-middle phxxl" >
+ <i class= "fa-play type-brand-3 fa h2 man" ></i>
+ </div>
+ <div class= "media-body pbn" >
+ <div class= "type-neutral-2 mbs" >
+ started app
+ </div>
+ <div class= "type-neutral-4 small" >
+ <span> user@example.com</span>
+ <span> 11/14/2014 at 2:00 PM UTC</span>
+ </div>
+ </div>
+ </div>
+ </li>
+</ul>
+
+
+ Copy
+
+
+
Group Inverse
+Use this list when you need simple gray borders between items on a dark background. It is very subtle.
+html_example
+<ul class="list-group-inverse">
+ <li class="list-group-item">
+ item 1
+ </li>
+ <li class="list-group-item">
+ item 2
+ </li>
+ <li class="list-group-item">
+ item 3
+ </li>
+</ul>
+
+Inline
+An inline list is one of the three methods for laying out content (including grids and the media block).
+
+
+ feep
+
+
+ fop
+
+
+ meep
+
+
+
+
+
+
<ul class= "list-inline" >
+ <li>
+ feep
+ </li>
+ <li>
+ fop
+ </li>
+ <li>
+ meep
+ </li>
+</ul>
+
+
+ Copy
+
+
+
You can use inline lists to lay out elements. Here's an example of a header next to a button:
+
+
+
+
<ul class= "list-inline lhxl" >
+ <li class= "txt-m" >
+ <h5 class= "em-alt em-max" > Bound Services</h5>
+ </li>
+ <li class= "txt-m" >
+ <a class= "btn btn-default" target= "_blank" > Add from Marketplace</a>
+ </li>
+</ul>
+
+
+ Copy
+
+
+
Inline Divider
+Places all list items on a single line with display: inline-block; and some light padding. The .list-inline-divider
+also adds a simple gray border (add .list-inline-divider-light to make the border white).
+
+
+
+
<ul class= "list-inline-divider" >
+ <li><a class= "type-em-1" href= "http://google.com" > Edit</a></li>
+ <li><a class= "type-em-1" href= "http://google.com" > Invite</a></li>
+</ul>
+
+
+ Copy
+
+
+
Here's the same example on a dark background:
+
+
+
+
<div class= "contrast-bar" >
+ <ul class= "list-inline-divider list-inline-divider-light" >
+ <li><a class= "type-em-1" href= "http://google.com" > Edit</a></li>
+ <li><a class= "type-em-1" href= "http://google.com" > Invite</a></li>
+ </ul>
+</div>
+
+
+ Copy
+
+
+
Ordered
+
+
+
+ feep
+
+
+ fop
+
+
+ meep
+
+
+
+
+
+
<ol>
+ <li>
+ feep
+ </li>
+ <li>
+ fop
+ </li>
+ <li>
+ meep
+ </li>
+</ol>
+
+
+ Copy
+
+
+
Steps
+Use this list when you need to show the steps in a flow.
+
+
+ Sign up Account
+
+
+ Create Organization
+
+
+ Do other things
+
+
+ And more things
+
+
+
+
+
+
<ol class= "list-steps" >
+ <li>
+ Sign up Account
+ </li>
+ <li class= "current" >
+ Create Organization
+ </li>
+ <li>
+ Do other things
+ </li>
+ <li>
+ And more things
+ </li>
+</ol>
+
+
+ Copy
+
+
+
Unordered
+
+
+
+ feep
+
+
+ fop
+
+
+ meep
+
+
+
+
+
+
<ul class= "list-unordered" >
+ <li>
+ feep
+ </li>
+ <li>
+ fop
+ </li>
+ <li>
+ meep
+ </li>
+</ul>
+
+
+ Copy
+
+
+
Unstyled
+Places all list items on a single line with display: inline-block; and some light padding. The .list-unstyled class can be applied to either a <ul> or and <ol>.
+
+
+ feep
+
+
+ fop
+
+
+ meep
+
+
+
+
+
+
<ul class= "list-unstyled" >
+ <li>
+ feep
+ </li>
+ <li>
+ fop
+ </li>
+ <li>
+ meep
+ </li>
+</ul>
+
+
+ Copy
+
+
+
Vertical Divider
+Use this list when you need larger gray borders between
+items. It should be used in concert with grid column
+sizes when you want the items to take a particular width.
We achieve equal height columns using the padding/margin hack,
+so we need an additional .height-enforcer element to get the
+right min-height.
+
+
+
+
<ul class= "list-vertical-divider" >
+ <li class= "col-md-8" >
+ <div class= "height-enforcer" >
+ item 1
+ </div>
+ </li>
+ <li class= "col-md-8" >
+ <div class= "height-enforcer" >
+ item 2
+ </div>
+ </li>
+ <li class= "col-md-8" >
+ <div class= "height-enforcer" style= "height: 200px" >
+ item 3, which is taller
+ </div>
+ </li>
+</ul>
+
+
+ Copy
+
+
+
+
+
+
+
<ul class= "list-vertical-divider-2" >
+ <li class= "col-md-8" >
+ <div class= "height-enforcer" >
+ item 1
+ </div>
+ </li>
+ <li class= "col-md-8" >
+ <div class= "height-enforcer" >
+ item 2
+ </div>
+ </li>
+ <li class= "col-md-8" >
+ <div class= "height-enforcer" style= "height: 200px" >
+ item 3, which is taller
+ </div>
+ </li>
+</ul>
+
+
+ Copy
+
+
+
List Spacing
+Most lists come with built in default spacing that should work for you. However, if you find yourself needing to modify the spacing, you should do that with list spacing classes rather than whitespace classes. A single class can be applied to the list and all direct children will be modified.
+The classes are constructed by specifying <type><location><size>.
+
+
+
+ Type:
+
+ llist
+ Space on the inside of each of the li direct children of the element
+
+
+ Location:
+
+ hhorizontal
+ Adds spacing to the left and right of the li.
+
+
+ vvertical
+ Adds spacing to the top and bottom of the li.
+
+
+ Size:
+
+ xlextra large
+ Adds 21 pixels of space
+
+
+ llarge
+ Adds 10 pixels of space
+
+
+ mmedium
+ Adds 7 pixels of space
+
+
+ ssmall
+ Adds 5 pixels of space
+
+
+ nnone
+ Sets any existing space to 0
+
+
+
+
+Vertical Spacing Options (n -> xl)
+
+
+
+
+
+
+
+
+
+
+
+
<ul class= "lvn" >
+ <li> feep</li>
+ <li> fop</li>
+ <li> meep</li>
+</ul>
+
+
+ Copy
+
+
+
+
+
+
+
+
+
+
+
+
<ul class= "lvs" >
+ <li> feep</li>
+ <li> fop</li>
+ <li> meep</li>
+</ul>
+
+
+ Copy
+
+
+
+
+
+
+
+
+
+
+
+
<ul class= "lvm" >
+ <li> feep</li>
+ <li> fop</li>
+ <li> meep</li>
+</ul>
+
+
+ Copy
+
+
+
+
+
+
+
+
+
+
+
+
<ul class= "lvl" >
+ <li> feep</li>
+ <li> fop</li>
+ <li> meep</li>
+</ul>
+
+
+ Copy
+
+
+
+
+
+
+
+
+
+
+
+
<ul class= "lvxl" >
+ <li> feep</li>
+ <li> fop</li>
+ <li> meep</li>
+</ul>
+
+
+ Copy
+
+
+
+
+
+
+
Horizontal Spacing Options (n -> xl)
+
+
+
+
+
+
+
+
+
+
+
+
<ul class= "list-inline lhn" >
+ <li> feep</li>
+ <li> fop</li>
+ <li> meep</li>
+</ul>
+
+
+ Copy
+
+
+
+
+
+
+
+
+
+
+
+
<ul class= "list-inline lhs" >
+ <li> feep</li>
+ <li> fop</li>
+ <li> meep</li>
+</ul>
+
+
+ Copy
+
+
+
+
+
+
+
+
+
+
+
+
<ul class= "list-inline lhm" >
+ <li> feep</li>
+ <li> fop</li>
+ <li> meep</li>
+</ul>
+
+
+ Copy
+
+
+
+
+
+
+
+
+
+
+
+
<ul class= "list-inline lhl" >
+ <li> feep</li>
+ <li> fop</li>
+ <li> meep</li>
+</ul>
+
+
+ Copy
+
+
+
+
+
+
+
+
+
+
+
+
<ul class= "list-inline lhxl" >
+ <li> feep</li>
+ <li> fop</li>
+ <li> meep</li>
+</ul>
+
+
+ Copy
+
+
+
+
+
+
+
Timeline
+A Timeline is a graphical representation of sequenced events. The Timeline list components are used to order list items by timestamp.
We achieve equal width columns for the time stamp by using a display table hack, so we need an additional inline style on the first list-timeline-date to specify the desired width.
+
+
+ 1 day ago
+
+ java buildpack (offline) (2.5)
+ a minor release
+
+
+
+ 1 day ago
+
+ java buildpack (offline) (2.5)
+ a minor release
+
+
+
+ 1 day ago
+
+ java buildpack (offline) (2.5)
+ a minor release
+
+
+
+
+
+
+
<ol class= "list-timeline" >
+ <li class= "list-timeline-item" >
+ <time datetime= "2014-07-04" class= "list-timeline-date" style= "width: 150px;" > 1 day ago</time>
+ <span class= "list-timeline-title" >
+ java buildpack (offline) (2.5)
+ <span class= "list-timeline-subtitle" > a minor release</span>
+ </span>
+ </li>
+ <li class= "list-timeline-item" >
+ <time datetime= "2014-07-04" class= "list-timeline-date" > 1 day ago</time>
+ <span class= "list-timeline-title" >
+ java buildpack (offline) (2.5)
+ <span class= "list-timeline-subtitle" > a minor release</span>
+ </span>
+ </li>
+ <li class= "list-timeline-item" >
+ <time datetime= "2014-07-04" class= "list-timeline-date" > 1 day ago</time>
+ <span class= "list-timeline-title" >
+ java buildpack (offline) (2.5)
+ <span class= "list-timeline-subtitle" > a minor release</span>
+ </span>
+ </li>
+</ol>
+
+
+ Copy
+
+
+
Ribbons
+
+
+Ribbons should be used to call out access, status, environment, etc.
+Banner
+You can use a banner ribbon to let the team know which environment they're
+working on.
+
+
+
+
<div class= "ribbon-banner" >
+ Acceptance
+</div>
+
+
+ Copy
+
+
+
Ribbon
+
+
+
+
+
+
+ British
+
For British eyes only
+
+
+
+
<div class= "inline-ribbon" > British</div>
+<span class= "mlm" > For British eyes only</span>
+
+
+ Copy
+
+
+
+
+
+
+ Pivotal
+
Wow this ribbon is so inline
+
+
+
+
+
<div class= "inline-ribbon ribbon-primary" > Pivotal</div>
+<span class= "mlm" > Wow this ribbon is so inline</span>
+
+
+ Copy
+
+
+
+
+
+
+
Typography
+
+
+Source Sans Pro is our font family.
+It can be used with the following modifiers to achieve a variety of effects.
+Sizes
+Set font sizes using headings and modifier classes.
+
+
+
+
+
+
h1.title 42px
+
+
+
+
+
<h1 class= "title" > h1.title 42px</h1>
+
+
+ Copy
+
+
+
+
+
+
+
h1 31px
+
+
+
+
+ Copy
+
+
+
+
+
+
+
h2 25px
+
+
+
+
+ Copy
+
+
+
+
+
+
+
h3 20px
+
+
+
+
+ Copy
+
+
+
+
+
+
+
h4 18px
+
+
+
+
+ Copy
+
+
+
+
+
+
+
h5 16px
+
+
+
+
+ Copy
+
+
+
+
+
+
+
h6 13px
+
+
+
+
+ Copy
+
+
+
+
+
+
+
+
+
+
+
+
<p> base font size 16px</p>
+
+
+ Copy
+
+
+
+
+
+
+
+
+
+
+
+
<p class= "type-sm" > small text 14px</p>
+
+
+ Copy
+
+
+
+
+
+
+
+
+
+
+
+
<p class= "type-xs" > extra small text 12px</p>
+
+
+ Copy
+
+
+
+
+
+
+
+
+ Separating code and visual semantics
+
+
+ Sometimes you may need to use a heading which has different visual and code semantics.
+ You can accomplish this by combining classes with elements
+ (classes take visual precedence over elements in this case).
+
+
+
+
+
+
+
+
I am a h1!
+
+
+
+
+
<h1 class= "h2" > I am a h1!</h1>
+
+
+ Copy
+
+
+
+
+
+
+
I am a h2!
+
+
+
+
+
+
<h2 class= "h1" > I am a h2!</h2>
+
+
+ Copy
+
+
+
+
+
+
+
If it's not a heading but you need similar visual treatment you can add just the class to any element.
+
+
+ Use headings when possible since they add semantic value.
+
+
+
+
+
+
+
+ Heading level 2 on a div
+
+
+
+
+
+
<div class= "h2" > Heading level 2 on a div</div>
+
+
+ Copy
+
+
+
+
+
+
+
Alignment
+See the alignment component for classes to use for text alignment.
+Colors
+You can apply color to any text with the color classes.
+
+
+
+
+
+
+
+
+
+
+
<p class= "type-brand-3" > I'm a brand color!</p>
+
+
+ Copy
+
+
+
+
+
+
+
Here's a table of all the color classes.
+
+
+ Type inverse
+ Type inverse
+ .type-inverse
+
+
+ Type neutral 1
+ Type neutral 1
+ .type-neutral-1
+
+
+ Type neutral 1
+ Type neutral 1
+ .type-neutral-1
+
+
+ Type neutral 2
+ Type neutral 2
+ .type-neutral-2
+
+
+ Type neutral 3
+ Type neutral 3
+ .type-neutral-3
+
+
+ Type neutral 4
+ Type neutral 4
+ .type-neutral-4
+
+
+ Type neutral 5
+ Type neutral 5
+ .type-neutral-5
+
+
+ Type neutral 6
+ Type neutral 6
+ .type-neutral-6
+
+
+ Type neutral 7
+ Type neutral 7
+ .type-neutral-7
+
+
+ Type neutral 8
+ Type neutral 8
+ .type-neutral-8
+
+
+ Type neutral 9
+ Type neutral 9
+ .type-neutral-9
+
+
+ Type neutral 10
+ Type neutral 10
+ .type-neutral-10
+
+
+ Type neutral 11
+ Type neutral 11
+ .type-neutral-11
+
+
+ Type dark 1
+ Type dark 1
+ .type-dark-1
+
+
+ Type dark 2
+ Type dark 2
+ .type-dark-2
+
+
+ Type dark 3
+ Type dark 3
+ .type-dark-3
+
+
+ Type accent 1
+ Type accent 1
+ .type-accent-1
+
+
+ Type accent 2
+ Type accent 2
+ .type-accent-2
+
+
+ Type accent 3
+ Type accent 3
+ .type-accent-3
+
+
+ Type accent 4
+ Type accent 4
+ .type-accent-4
+
+
+ Type accent 5
+ Type accent 5
+ .type-accent-5
+
+
+ Type brand 1
+ Type brand 1
+ .type-brand-1
+
+
+ Type brand 2
+ Type brand 2
+ .type-brand-2
+
+
+ Type brand 3
+ Type brand 3
+ .type-brand-3
+
+
+ Type brand 4
+ Type brand 4
+ .type-brand-4
+
+
+ Type brand 5
+ Type brand 5
+ .type-brand-5
+
+
+ Type error 1
+ Type error 1
+ .type-error-1
+
+
+ Type error 2
+ Type error 2
+ .type-error-2
+
+
+ Type error 3
+ Type error 3
+ .type-error-3
+
+
+ Type error 4
+ Type error 4
+ .type-error-4
+
+
+ Type success 1
+ Type success 1
+ .type-success-1
+
+
+ Type success 2
+ Type success 2
+ .type-success-2
+
+
+ Type warn 1
+ Type warn 1
+ .type-warn-1
+
+
+ Type warn 2
+ Type warn 2
+ .type-warn-2
+
+
+ Type warn 3
+ Type warn 3
+ .type-warn-3
+
+
+
+Emphasis Modifiers
+Type emphasis modifiers can be used on any type element.
+
+
+
+
+
+ Really Important
+
+ I mean reeeeeeeeeeeally
+
+
+
+
+
+
<h1 class= "em-high" > Really Important</h1>
+<p>
+ I mean <span class= "em-max" > reeeeeeeeeeeally</span>
+</p>
+
+
+ Copy
+
+
+
+
+
+
+
Here's a table of all the emphasis modifier classes.
+
+
+
+
+
+
Low emphasis
+
+
+
+
+
<h1 class= "em-low" > Low emphasis</h1>
+
+
+ Copy
+
+
+
+
+
+
+
Default emphasis
+
+
+
+
+
<h1 class= "em-default" > Default emphasis</h1>
+
+
+ Copy
+
+
+
+
+
+
+
High emphasis
+
+
+
+
+
<h1 class= "em-high" > High emphasis</h1>
+
+
+ Copy
+
+
+
+
+
+
+
Maximum emphasis
+
+
+
+
+
<h1 class= "em-max" > Maximum emphasis</h1>
+
+
+ Copy
+
+
+
+
+
+
+
Emphasis alternate
+
+
+
+
+
+
<h1 class= "em-alt" > Emphasis alternate</h1>
+
+
+ Copy
+
+
+
+
+
+
+
+
+
+
a brand new styleguide: Forms
+
+
+
+
+
+
+
+
+Individual form controls automatically receive some global styling.
+All textual <input>, <textarea>, and <select> elements with
+.form-control are set to width: 100%; by default.
+
+
+ Wrap labels and controls in .form-group for optimum spacing.
+
+
+
+
+
+
<form role= "form" >
+ <div class= "form-group" >
+ <label for= "exampleInputEmail1" > Email address</label>
+ <input type= "email" class= "form-control" id= "exampleInputEmail1" placeholder= "Enter email" >
+ </div>
+ <div class= "form-group" >
+ <label for= "exampleInputPassword1" > Password</label>
+ <input type= "password" class= "form-control" id= "exampleInputPassword1" placeholder= "Password" >
+ </div>
+ <div class= "checkbox" >
+ <label>
+ <input type= "checkbox" > Check me out
+ </label>
+ </div>
+ <button type= "submit" class= "btn btn-default" > Submit</button>
+</form>
+
+
+ Copy
+
+
+
Autoselect Text Inputs
+This form is used to show information that a user may wish to copy and paste somewhere.
+
+
+
+
<input class= "auto-select form-control" data-behavior= "AutoSelect" readonly= "readonly" value= "This should auto highlight" ></input>
+
+
+ Copy
+
+
+
Checkboxes are for selecting one or several options in a list while radios are for selecting one option from many.
+Default (stacked)
+
+
+
+
+
<form class= "styleguide-form" role= "form" >
+ <div class= "checkbox" >
+ <label>
+ <input type= "checkbox" >
+ Option one is this and that— be sure to include why it's great
+ </input>
+ </label>
+ </div>
+ <div class= "radio" >
+ <label>
+ <input id= "optionsRadios1" name= "optionsRadios" type= "radio" value= "option1" checked >
+ Option one is this and that— be sure to include why it's great
+ </input>
+ </label>
+ </div>
+ <div class= "radio" >
+ <label>
+ <input id= "optionsRadios2" name= "optionsRadios" type= "radio" value= "option2" >
+ Option two can be something else and selecting it will deselect option one
+ </input>
+ </label>
+ </div>
+</form>
+
+
+ Copy
+
+
+
Use .checkbox-inline or .radio-inline class to a series of checkboxes or radios for controls appear on the same line.
+
+
+
+
<form class= "styleguide-form" role= "form" >
+ <div class= "form-group" >
+ <label class= "checkbox-inline" >
+ <input id= "inlineCheckbox1" type= "checkbox" value= "option1" >
+ 1
+ </input>
+ </label>
+ <label class= "checkbox-inline" >
+ <input id= "inlineCheckbox2" type= "checkbox" value= "option2" >
+ 2
+ </input>
+ </label>
+ <label class= "checkbox-inline" >
+ <input id= "inlineCheckbox3" type= "checkbox" value= "option3" >
+ 3
+ </input>
+ </label>
+ </div>
+ <div class= "form-group" >
+ <label class= "radio-inline" >
+ <input id= "inlineradio1" type= "radio" value= "option1" >
+ 1
+ </input>
+ </label>
+ <label class= "radio-inline" >
+ <input id= "inlineradio2" type= "radio" value= "option2" >
+ 2
+ </input>
+ </label>
+ <label class= "radio-inline" >
+ <input id= "inlineradio3" type= "radio" value= "option3" >
+ 3
+ </input>
+ </label>
+ </div>
+</form>
+
+
+ Copy
+
+
+
Controls will occasionally need to be disabled.
+You can do that by adding the disabled attribute.
+Inputs, selects, checkboxes, fieldsets, buttons, and other form controls can all be disabled.
+
+
+
+
+
+
+
+
+
+
+
<input class= "form-control" type= "text" placeholder= "Disabled input here" disabled >
+
+
+ Copy
+
+
+
+
+
+
+
+ Option 1
+ Option 2
+
+
+
+
+
+
<select class= "form-control" disabled >
+ <option> Option 1</option>
+ <option> Option 2</option>
+</select>
+
+
+ Copy
+
+
+
+
+
+
+
+
+
+
+
+
+
<label>
+ <input type= "checkbox" disabled >
+ I'm disabled!
+</label>
+
+
+ Copy
+
+
+
+
+
+
+
+ Hi
+
+
+
+
+
+
+
<button class= "btn" disabled >
+ Hi
+</button>
+
+
+ Copy
+
+
+
+
+
+
+
Help Text
+Help text
+Block level help text for form controls.
+
+
+
+
+
<form class= "styleguide-form" role= "form" >
+ <input class= "form-control" type= "text" ></input>
+ <span class= "help-block" > A block of help text that breaks onto a new line and may extend beyond one line.</span>
+</form>
+
+
+ Copy
+
+
+
Add .form-inline to your <form> for left-aligned and inline-block controls.
+This only applies to forms within viewports that are at least 768px wide.
+
+
+ Always add labels to every input.
+
+
+ Screen readers will have trouble with your forms if you don't.
+ You can always hide the labels using the .sr-only class.
+
+
+
+
+
+
<form class= "styleguide-form form-inline" role= "form" >
+ <div class= "form-group" >
+ <label class= "sr-only" for= "exampleInputEmail2" > Email address</label>
+ <input class= "form-control" id= "exampleInputEmail2" placeholder= "Enter email" type= "email" ></input>
+ </div>
+ <div class= "form-group" >
+ <label class= "sr-only" for= "exampleInputPassword2" > Password</label>
+ <input class= "form-control" id= "exampleInputPassword2" placeholder= "Password" type= "password" ></input>
+ </div>
+ <div class= "checkbox" >
+ <label>
+ <input type= "checkbox" ></input>
+ Remember me
+ </label>
+ </div>
+ <button class= "btn btn-primary" type= "submit" > Sign in</button>
+</form>
+
+
+ Copy
+
+
+
Add .form-inline.inline-labels to your <form> for left-aligned and inline-block controls with labels inline with inputs.
+
+
+
+
<form class= "styleguide-form form-inline inline-labels" role= "form" >
+ <div class= "form-group" >
+ <label for= "exampleInputEmail2" > Write a thing</label>
+ <input class= "form-control" id= "exampleInputEmail2" placeholder= "Write a thing" type= "email" ></input>
+ </div>
+ <div class= "form-group" >
+ <label for= "exampleSelect" > Choose a thing</label>
+ <select class= "form-control" id= "exampleSelect" >
+ <option> thing</option>
+ </select>
+ </div>
+ <div class= "checkbox" >
+ <label>
+ <input type= "checkbox" ></input>
+ Remember me
+ </label>
+ </div>
+ <button class= "btn btn-primary" type= "submit" > Sign in</button>
+</form>
+
+
+ Copy
+
+
+
An input with the label top aligned (this is the default layout).
+
+
+
+
<form class= "styleguide-form" role= "form" >
+ <div class= "form-group" >
+ <label for= "exampleInputEmail1" >
+ <abbr title= "required" > *</abbr>
+ Email address
+ </label>
+ <input aria-required= "true" class= "form-control" id= "exampleInputEmail1" placeholder= "Enter email" required= "required" type= "email" ></input>
+ </div>
+</form>
+
+
+ Copy
+
+
+
Use Bootstrap's predefined grid classes to align labels and groups of form controls in a horizontal
+layout by adding .form-horizontal to the form. Doing so changes .form-groups to behave as grid rows, so no need for .row.
An input with the label left aligned
+
+
+
+
<form class= "styleguide-form form-horizontal" role= "form" >
+ <div class= "form-group" >
+ <div class= "col-md-6" >
+ <label class= "control-label" for= "exampleInputEmail1" >
+ <abbr title= "required" > *</abbr>
+ Email address
+ </label>
+ </div>
+ <div class= "col-md-18" >
+ <input aria-required= "true" class= "form-control" id= "exampleInputEmail1" placeholder= "Enter email" required= "required" type= "email" ></input>
+ </div>
+ </div>
+</form>
+
+
+ Copy
+
+
+
An input with the label right aligned (N.B., control-label class provides the right alignment):
+
+
+
+
<form class= "styleguide-form form-horizontal" role= "form" >
+ <div class= "form-group" >
+ <label class= "col-md-6 control-label" for= "exampleInputEmail1" >
+ <abbr title= "required" > *</abbr>
+ Email address
+ </label>
+ <div class= "col-md-18" >
+ <input aria-required= "true" class= "form-control" id= "exampleInputEmail1" placeholder= "Enter email" required= "required" type= "email" ></input>
+ </div>
+ </div>
+</form>
+
+
+ Copy
+
+
+
An unstyled inputs that doesn't have any of the default input styles
+
+
+
+
+
<form role= "form" >
+ <input class= "unstyled" placeholder= "This is a text input" ></input>
+</form>
+
+
+ Copy
+
+
+
Examples of standard form controls supported in an example form layout.
Inputs
+Most common form control, text-based input fields. Includes support for
+all HTML5 types: text, password, datetime, datetime-local,
+date, month, time, week, number, email, url, search,
+tel, and color.
+
+
+ Inputs will only be fully styled if their type is properly declared.
+
+
+
+
+
+
+
<form class= "styleguide-form" role= "form" >
+ <input class= "form-control" placeholder= "Text input" type= "text" ></input>
+</form>
+
+
+ Copy
+
+
+
Password field
+
+
+
+
+
<form class= "styleguide-form" role= "form" >
+ <input class= "form-control" placeholder= "Password" type= "password" ></input>
+</form>
+
+
+ Copy
+
+
+
Date
+
+
+
+
+
<form class= "styleguide-form" role= "form" >
+ <input class= "form-control" placeholder= "Date" type= "date" ></input>
+</form>
+
+
+ Copy
+
+
+
Number
+
+
+
+
+
<form class= "styleguide-form" role= "form" >
+ <input class= "form-control" placeholder= "Number" type= "number" ></input>
+</form>
+
+
+ Copy
+
+
+
With a min/max and default starting value
+
+
+
+
+
<form class= "styleguide-form" role= "form" >
+ <input class= "form-control" placeholder= "Number" type= "number" min= 0 max= 2 value= 1 ></input>
+</form>
+
+
+ Copy
+
+
+
With a different increment value
+
+
+
+
+
<form class= "styleguide-form" role= "form" >
+ <input class= "form-control" placeholder= "Number" type= "number" step= 5 ></input>
+</form>
+
+
+ Copy
+
+
+
Email
Use this with fields that require email addresses to pop up the correct keyboard on mobile
+
+
+
+
+
<form class= "styleguide-form" role= "form" >
+ <input class= "form-control" placeholder= "Email" type= "email" ></input>
+</form>
+
+
+ Copy
+
+
+
URL
Use this with fields that require urls to pop up the correct keyboard on mobile
+
+
+
+
+
<form class= "styleguide-form" role= "form" >
+ <input class= "form-control" placeholder= "URL" type= "url" ></input>
+</form>
+
+
+ Copy
+
+
+
Telephone
Use this with fields that require telephone numbers to pop up the dialpad on mobile
+
+
+
+
+
<form class= "styleguide-form" role= "form" >
+ <input class= "form-control" placeholder= "Telephone" type= "tel" ></input>
+</form>
+
+
+ Copy
+
+
+
Set heights using the form control classes .input-lg and .input-sm.
+Create larger or smaller form controls that match button sizes.
+
+
+
+
+
+
+
+
+
+
+
<input class= "form-control input-lg" placeholder= ".input-lg" type= "text" >
+
+
+ Copy
+
+
+
+
+
+
+
+
+
+
+
+
<input class= "form-control" placeholder= "Default Input" type= "text" >
+
+
+ Copy
+
+
+
+
+
+
+
+
+
+
+
+
<input class= "form-control input-sm" placeholder= ".input-sm" type= "text" >
+
+
+ Copy
+
+
+
+
+
+
+
Set widths using grid column classes like .col-lg-*.
+Wrap selects in grid columns, or any custom parent element, to easily enforce desired widths.
+
+
+
+
<form class= "styleguide-form" role= "form" >
+ <div class= "row" >
+ <div class= "col-md-4" >
+ <input class= "form-control" placeholder= ".col-xs-2" type= "text" ></input>
+ </div>
+ <div class= "col-md-6" >
+ <input class= "form-control" placeholder= ".col-xs-3" type= "text" ></input>
+ </div>
+ <div class= "col-md-8" >
+ <input class= "form-control" placeholder= ".col-xs-4" type= "text" ></input>
+ </div>
+ </div>
+</form>
+
+
+ Copy
+
+
+
Use this input when creating a search component.
+
+
+
+
<div class= "form-group form-group-search" >
+ <input class= "form-control" placeholder= "This is a searchbox" >
+ <i class= "fa fa-search" ></i>
+</div>
+
+
+ Copy
+
+
+
Add the readonly boolean attribute on an input to prevent user input and style the input as disabled.
+
+
+
+
<input class= "form-control" type= "text" placeholder= "Readonly input here..." readonly >
+
+
+ Copy
+
+
+
Selects are excellent to use because they will automatically
+behave as expected cross browser on different devices. Prefer
+them over a custom dropdown whenever possible.
+
+
+
+
+
<form class= "styleguide-form" role= "form" >
+ <select class= "form-control" >
+ <option> default option</option>
+ <option> an option</option>
+ <option> another option</option>
+ </select>
+</form>
+
+
+ Copy
+
+
+
Set heights using the form control classes .input-lg and .input-sm.
+Create larger or smaller form controls that match button sizes.
+
+
+
+
+
+
+ Option 1
+ Option 2
+
+
+
+
+
+
<select class= "form-control input-lg" >
+ <option> Option 1</option>
+ <option> Option 2</option>
+</select>
+
+
+ Copy
+
+
+
+
+
+
+
+ Option 1
+ Option 2
+
+
+
+
+
+
<select class= "form-control" Input " >
+ <option> Option 1</option>
+ <option> Option 2</option>
+</select>
+
+
+ Copy
+
+
+
+
+
+
+
+ Option 1
+ Option 2
+
+
+
+
+
+
+
<select class= "form-control input-sm" >
+ <option> Option 1</option>
+ <option> Option 2</option>
+</select>
+
+
+ Copy
+
+
+
+
+
+
+
Set widths using grid column classes like .col-lg-*.
+Wrap inputs in grid columns, or any custom parent element, to easily enforce desired widths.
+
+
+
+
<form class= "styleguide-form" role= "form" >
+ <div class= "row" >
+ <div class= "col-md-4" >
+ <input class= "form-control" placeholder= ".col-xs-2" type= "text" ></input>
+ </div>
+ <div class= "col-md-6" >
+ <input class= "form-control" placeholder= ".col-xs-3" type= "text" ></input>
+ </div>
+ <div class= "col-md-8" >
+ <input class= "form-control" placeholder= ".col-xs-4" type= "text" ></input>
+ </div>
+ </div>
+</form>
+
+
+ Copy
+
+
+
This is a fancy select!
+
+
+
+
<form class= "styleguide-form" role= "form" style= "width: 200px" >
+ <label for= "fancy-select" > Description</label>
+ <div class= "select-fancy" >
+ <select class= "form-control" >
+ <option> Fancy Option 1</option>
+ <option> Fancy Option 2</option>
+ </select>
+ </div>
+</form>
+
+
+ Copy
+
+
+
When you need to place plain text next to a form label within a form,
+use the .form-control-static class on a <p>.
Here's an example in a horizontal form:
+
+
+
+
<form class= "form-horizontal styleguide-form" role= "form" >
+ <div class= "form-group" >
+ <label class= "col-md-4 control-label" > Email</label>
+ <div class= "col-sm-10" >
+ <p class= "form-control-static" > email@example.com</p>
+ </div>
+ </div>
+ <div class= "form-group" >
+ <label class= "col-md-4 control-label" for= "inputPassword" > Password</label>
+ <div class= "col-sm-10" >
+ <input class= "form-control" id= "inputPassword" placeholder= "Password" type= "password" ></input>
+ </div>
+ </div>
+</form>
+
+
+ Copy
+
+
+
Here's an example in a vertical form:
+
+
+
+
<form class= "styleguide-form" role= "form" >
+ <div class= "form-group" >
+ <label class= "control-label" > Email</label>
+ <p class= "form-control-static" > someguy@test.com</p>
+ </div>
+ <div class= "form-group" >
+ <label class= "control-label" for= "name" > Name</label>
+ <input class= "form-control" id= "name" placeholder= "name" ></input>
+ </div>
+</form>
+
+
+ Copy
+
+
+
Text Areas
+Text areas are used for larger amounts of input.
+
+
+
+
<form class= "styleguide-form" role= "form" >
+ <div class= "form-group" >
+ <label for= "exampleTextAreaId" > Description</label>
+ <textarea class= "form-control" id= "exampleTextAreaId" rows= "3" ></textarea>
+ </div>
+</form>
+
+
+ Copy
+
+
+
A toggle switch is a horizontally styled checkbox which represents true with blue and false with gray.
+
+
+
+
<div class= "form-group" >
+ <input id= "toggleSwitch" class= "toggle-switch toggle-switch-lg" type= "checkbox" >
+ <label for= "toggleSwitch" > Toggle Switch</label>
+</div>
+
+
+ Copy
+
+
+
To show validation errors on a field, add .has-error to the field's form group.
+This class can be used for all types of inputs.
Error messages should use the classes .help-block.has-error.
+
+
+
+
+
+
+
+
+
+
+
<form class= "styleguide-form" role= "form" >
+ <div class= "form-group has-error" >
+ <label class= "control-label" for= "inputError" >
+ Input with error
+ </label>
+ <input id= "inputError" class= "form-control" type= "text" >
+ <span class= "help-block has-error" >
+ Error help text
+ </span>
+ </div>
+</form>
+
+
+ Copy
+
+
+
+
+
+
+
+
+
+
+
+
<form class= "styleguide-form" role= "form" >
+ <div class= "form-group has-error" >
+ <div class= "checkbox" >
+ <label class= "control-label" >
+ <input type= "checkbox" value= "" >
+ Checkbox which needs to be checked
+ </label>
+ <span class= "help-block has-error" >
+ Error help text
+ </span>
+ </div>
+ </div>
+</form>
+
+
+ Copy
+
+
+
+
+
+
+
If you're doing client-side validation and want to show successful validation of a field,
+add .has-success to the field's form group.
+
+
+ The .has-success class can only be used on inputs that have a text-box.
+
+
+
+
+
+
+
+
+
+
+
+
+
<form class= "styleguide-form" role= "form" >
+ <div class= "form-group has-success" >
+ <label class= "control-label" for= "inputSuccess" >
+ Input with success
+ </label>
+ <input id= "inputSuccess" class= "form-control" type= "text" >
+ </div>
+</form>
+
+
+ Copy
+
+
+
+
+
+
+
+
+
+
a brand new styleguide: Hiring
+
+
+
+
+
+Product Designer
+
+
+ The Pivotal Cloud Foundry team is looking for great Product Designers to join us in San Francisco and New York. Join a team of like-minded designers in the Bay Area or Manhattan that work at Pivotal. We pair together, critique work together and share ideas and process and methodology. We believe in working at a sustainable pace – you’ll typically work hard for 8 hours each day, but then you’re off work to relax, recharge, and refocus. We also stock beef jerky and vegan beef jerky if that's your thing.
+
+
+
+
+
You
+
You have a track record of helping conceive, define and execute user experiences across web and mobile products. Your portfolio will show that you've worked on a range of challenging projects across all steps of the design process: research, prototyping, and visual design.
+
+
+
What you will do
+
+ Maintain a user-centered approach in design perspective and practice
+ Collaborate to understand business requirements and develop or work with team members to develop solutions
+ Lead products from discovery and framework through iterative development and delivery
+ Rapidly iterate on design prototypes and working applications
+ Stay up-to-date on the current and best UI and visual design practices and trends
+ Evangelize new interface guidelines and design patterns
+ Thrive in a highly collaborative, fast-paced, agile environment
+ Play ping pong, eat a fully catered breakfast every morning with your coworkers
+ Occasionally eat a taco or two or six
+
+
+
+
+
+
+
Desired Skills + Exp.
+
+ Have strong opinions but hold them loosely
+ Possess excellent communication, presentation, and organizational skills with a strong work ethic
+ Have a portfolio of design work that is clear and professional
+ Be committed to lifelong design learning
+ Rapidly iterate on design prototypes and working applications
+ Have experience with or a curiosity of agile and lean philosophies
+ Be proficient in Creative Suite and/or Sketch or some equivalent
+ An understanding of how HTML / CSS / JS works
+
+
+
+
Nice to Have
+
+ Identity and branding experience
+ Some fancy Illustration skills
+ Ability to code your own prototypes
+ Experience with Data Visualization
+ Proven track record of leading user research projects
+ An understanding that Tobasco is basically vinegar so shouldn't be considered hot sauce
+
+
+
+
+
+
+
+
+
Join a team that believes in what they build.
+
Apply
+
+
+
+
+
+
+
a brand new styleguide: Intro
+ intro
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Ship Better UI, Faster
+
+
This is everything you need to get
+ started building UI at Pivotal
+
Try Pivotal UI
+
+
+
+
+
+
+
+
+
Add it to your app.
+
+ Unzip the release archive and move the resulting directory
+ into your project.
+
+ Link to the css file in your html template to include the
+ styles.
+
+ Add a script tag to your html template to use the
+ javascript.
+
+
+
+
+
+
+
<html>
+ <head>
+ <title>...</title>
+ <link rel="stylesheet" href="/path/to/release/pivotal-ui.css">
+ <script src="/path/to/release/pivotal-ui.js"></script>
+ </head>
+ <body>
+ <p class="type-brand-1">Hello, world!</p>
+ </body>
+</html>
+
+
+
+
+
+
+
How to Use this
+ Styleguide We have
+ organized Pivotal UI styleguide into a few useful sections.
+
+
+
+
+
+
+ Layout
+
+
Here you will find all of the styles
+ needed for page layout and organization. Some layout elements you can find here
+ are grids, media blocks, and panes.
+
+
+
+
+
+
+ Elements
+
+
A single node component. They
+ typically map to HTML elements are building blocks for large objects. Some
+ elements you can find here are buttons, icons, lists, and typography.
+
+
+
+
+
+
+ Objects
+
+
A multi node component. These are
+ ususally made of multiple elements that function together to create a more
+ complex component. Some objects you can find here are alerts, modals, tables,
+ and maps.
+
+
+
+
+
+
+
+
+ Utilities
+
+
Mixins that can modify many
+ different components. Some utilities you can find here are whitespace, color,
+ and type modifiers.
+
+
+
+
+
+
+ Forms
+
+
You can find all sorts of form
+ objects here.
+
+
+
+
+
+
+ Beta
+
+
These are experimental components
+ with unstable APIs. Don't use them on production apps. See our README for
+ details on how to use these components.
+
+
+
+
+
+
+
+
+
+
Best
+ Practices There are a few things you should know
+ before working with Pivotal UI.
+
+
+ Dont modify Pivotal UI stylesheets unless you are a
+ contributer. See the contribution docs for more info.
+
+ You won't have to write your own CSS. We provide
+ everything for you, even down to special classes for padding, margins, type
+ alignment, etc.
+
+ If there is something you need and Pivotal UI
+ doesn't have it, you can submit a feature request. To do so, please open an issue on
+ Github. Screenshots are very helpful! We'll then have a conversation about what you
+ are trying to achieve in your project and the best way to do that.
+
+
+
+
What's
+ Included Pivotal UI comes with everything you need
+ from grids, to fonts, and even JavaScript!
+
+
+ jQuery v2.1.1 (will not be included in the next major release)
+ LoDash v2.4.1 (will not be included in the next major release)
+ modernizr v2.8.3 (will not be included in the next major release)
+ Bootstrap v3.2 (JavaScript will not be included in the next major release)
+ Prism.js
+ Font Awesome v4.10
+ Normalize CSS v1.0.2
+ OOCSS
+ Source Sans Pro
+
+
+
+
+
+
+
+
+
Design
+ Resources
+
+
Our Component
+ Library is available in two formats.
+
+
This UI Kit contains all Pivotal
+ UI controls in vector format, FontAwesome that come with Pivotal UI and lots of bonus UI
+ elements that are perfect for mockuping control and admin panels.
+
+
+
+
+
+
+
+
+
a brand new styleguide: Intro
+ intro
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Ship Better UI, Faster
+
+
This is everything you need to get
+ started building UI at Pivotal
+
Try Pivotal UI
+
+
+
+
+
+
+
+
+
Add it to your app.
+
+ Unzip the release archive and move the resulting directory
+ into your project.
+
+ Link to the css file in your html template to include the
+ styles.
+
+ Add a script tag to your html template to use the
+ javascript.
+
+
+
+
+
+
+
<html>
+ <head>
+ <title>...</title>
+ <link rel="stylesheet" href="/path/to/release/pivotal-ui.css">
+ <script src="/path/to/release/pivotal-ui.js"></script>
+ </head>
+ <body>
+ <p class="type-brand-1">Hello, world!</p>
+ </body>
+</html>
+
+
+
+
+
+
+
How to Use this
+ Styleguide We have
+ organized Pivotal UI styleguide into a few useful sections.
+
+
+
+
+
+
+ Layout
+
+
Here you will find all of the styles
+ needed for page layout and organization. Some layout elements you can find here
+ are grids, media blocks, and panes.
+
+
+
+
+
+
+ Elements
+
+
A single node component. They
+ typically map to HTML elements are building blocks for large objects. Some
+ elements you can find here are buttons, icons, lists, and typography.
+
+
+
+
+
+
+ Objects
+
+
A multi node component. These are
+ ususally made of multiple elements that function together to create a more
+ complex component. Some objects you can find here are alerts, modals, tables,
+ and maps.
+
+
+
+
+
+
+
+
+ Utilities
+
+
Mixins that can modify many
+ different components. Some utilities you can find here are whitespace, color,
+ and type modifiers.
+
+
+
+
+
+
+ Forms
+
+
You can find all sorts of form
+ objects here.
+
+
+
+
+
+
+ Beta
+
+
These are experimental components
+ with unstable APIs. Don't use them on production apps. See our README for
+ details on how to use these components.
+
+
+
+
+
+
+
+
+
+
Best
+ Practices There are a few things you should know
+ before working with Pivotal UI.
+
+
+ Dont modify Pivotal UI stylesheets unless you are a
+ contributer. See the contribution docs for more info.
+
+ You won't have to write your own CSS. We provide
+ everything for you, even down to special classes for padding, margins, type
+ alignment, etc.
+
+ If there is something you need and Pivotal UI
+ doesn't have it, you can submit a feature request. To do so, please open an issue on
+ Github. Screenshots are very helpful! We'll then have a conversation about what you
+ are trying to achieve in your project and the best way to do that.
+
+
+
+
What's
+ Included Pivotal UI comes with everything you need
+ from grids, to fonts, and even JavaScript!
+
+
+ jQuery v2.1.1 (will not be included in the next major release)
+ LoDash v2.4.1 (will not be included in the next major release)
+ modernizr v2.8.3 (will not be included in the next major release)
+ Bootstrap v3.2 (JavaScript will not be included in the next major release)
+ Prism.js
+ Font Awesome v4.10
+ Normalize CSS v1.0.2
+ OOCSS
+ Source Sans Pro
+
+
+
+
+
+
+
+
+
Design
+ Resources
+
+
Our Component
+ Library is available in two formats.
+
+
This UI Kit contains all Pivotal
+ UI controls in vector format, FontAwesome that come with Pivotal UI and lots of bonus UI
+ elements that are perfect for mockuping control and admin panels.
+
+
+
+
+
+
+
+
+
a brand new styleguide: Layout
+
+
+
+
+
+Grids
+
+
+
+
+ Pivotal ui (via bootstrap) includes a responsive, mobile first fluid grid system that
+ appropriately scales up to 24 columns as the device or viewport size increases.
+ To work with the system, you need to treat mobile as your default
+ and build more complex layouts up from there.
+
+
+Introduction
+Grid systems are used for creating page layouts through a series of rows and columns that house your content.
+Here's how the bootstrap grid system works:
Rows must be placed within a .container for proper alignment and padding.
Use .row to create horizontal groups of columns.
Content should be placed within columns (e.g. .col-sm-11, .col-lg-6, etc.).
+Only columns may be immediate children of rows.
Columns are defined by two properties:
+the breakpoint at which they start acting like columns,
+and their relative width (on a scale of 24) beginning at this breakpoint.
+For example:
A column with the class .col-sm-11 will take up 100% of the container
+for devices with screen-width < 768px (the extra small breakpoint),
+and 11/24ths for devices ≥ 768px.
A column with the class .col-lg-6 will take up 100% of the container
+for devices with < 1200px,
+and 1/4th (6/24ths) for devices ≥ 1200px.
3 .col-md-8 columns would fill a row for devices ≥ 992px.
+They would each take up their own row on devices < 992px.
Use the .col-xs-* classes to use a grid on mobile.
Look to the examples for applying these principles to your code.
+
+We use the following media queries in our sass files to create the key breakpoints in our grid system.
+Name
+Size
+Variable Name
+
+
+mobile
+no media query since this is the default in bootstrap
+
+
+x-small
+480px
+$screen-xs-min
+
+small
+768px
+$screen-sm-min
+
+medium
+992px
+$screen-md-min
+
+large
+1200px
+$screen-lg-min
+
+x-large
+1800px
+$screen-xl-min
+
+Grid Sizes
+See how aspects of the bootstrap grid system work across multiple devices with a handy table.
+
+
+
+
+ extra small devices
+ phones (≤768px)
+
+
+ small devices
+ tablets (>768px)
+
+
+ medium devices
+ laptops (>992px)
+
+
+ large devices
+ desktops (>1200px)
+
+
+
+
+
+ grid behavior
+ horizontal at all times
+ collapsed to start, horizontal above breakpoints
+
+
+ container width
+ none (auto)
+ 750px
+ 970px
+ 1170px
+
+
+ class prefix
+ .col-xs-.col-sm-.col-md-.col-lg-
+
+ # of columns
+ 24
+
+
+ column width
+ auto
+ ~62px
+ ~81px
+ ~97px
+
+
+ gutter width
+ 30px (15px on each side of a column)
+
+
+ nestable
+ yes
+
+
+ offsets
+ yes
+
+
+ column ordering
+ yes
+
+
+
+
+Examples
+Using a single set of .col-md-* grid classes,
+you can create a basic grid system that starts out stacked on mobile devices and tablet devices
+(the extra small to small range) before becoming horizontal on desktop (medium) devices.
+Place grid columns in any .row.
+
+
The .grid-show class in the examples is for demo purposes. Don't use it IRL.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
<div class= "row grid-show" >
+ <div class= "col-md-2" ></div>
+ <div class= "col-md-2" ></div>
+ <div class= "col-md-2" ></div>
+ <div class= "col-md-2" ></div>
+ <div class= "col-md-2" ></div>
+ <div class= "col-md-2" ></div>
+ <div class= "col-md-2" ></div>
+ <div class= "col-md-2" ></div>
+ <div class= "col-md-2" ></div>
+ <div class= "col-md-2" ></div>
+ <div class= "col-md-2" ></div>
+ <div class= "col-md-2" ></div>
+</div>
+
+<div class= "row grid-show" >
+ <div class= "col-md-16" ></div>
+ <div class= "col-md-8" ></div>
+</div>
+
+<div class= "row grid-show" >
+ <div class= "col-md-8" ></div>
+ <div class= "col-md-8" ></div>
+ <div class= "col-md-8" ></div>
+</div>
+
+<div class= "row grid-show" >
+ <div class= "col-md-12" ></div>
+ <div class= "col-md-12" ></div>
+</div>
+
+
+ Copy
+
+
+
Example: Mobile and Desktop
+Don't want your columns to simply stack in smaller devices?
+Use the extra small and medium device grid classes by adding .col-xs-* .col-md-* to your columns.
+See the example below for a better idea of how it all works.
+
+
+
+
<!-- stack the columns on mobile by making one full-width and the other half-width -->
+<div class= "row grid-show" >
+ <div class= "col-xs-24 col-md-16" ></div>
+ <div class= "col-xs-12 col-md-8" ></div>
+</div>
+
+<!-- columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
+<div class= "row grid-show" >
+ <div class= "col-xs-12 col-md-8" ></div>
+ <div class= "col-xs-12 col-md-8" ></div>
+ <div class= "col-xs-12 col-md-8" ></div>
+</div>
+
+<!-- columns are always 50% wide, on mobile and desktop -->
+<div class= "row grid-show" >
+ <div class= "col-xs-12" ></div>
+ <div class= "col-xs-12" ></div>
+</div>
+
+
+ Copy
+
+
+
Example: Mobile, Tablet, Desktops
+Build on the previous example by creating even more dynamic and powerful layouts
+with tablet .col-sm-* classes.
+
+
+
+
<div class= "row grid-show" >
+ <div class= "col-xs-24 col-sm-12 col-md-16" ></div>
+ <div class= "col-xs-12 col-md-8" ></div>
+</div>
+<div class= "row grid-show" >
+ <div class= "col-xs-12 col-sm-8" ></div>
+ <div class= "col-xs-12 col-sm-8" ></div>
+ <!-- optional: clear the xs cols if their content doesn't match in height -->
+ <div class= "clearfix visible-xs-block" ></div>
+ <div class= "col-xs-12 col-sm-8" ></div>
+</div>
+
+
+ Copy
+
+
+
Example: Column Wrapping
+If more than 24 columns are placed within a single row, each group of extra columns will,
+as one unit, wrap onto a new line.
+
+
+
+
<div class= "row grid-show" >
+ <div class= "col-xs-12" ></div>
+ <div class= "col-xs-12" ></div>
+ <div class= "col-xs-10" ></div>
+ <div class= "col-xs-10" ></div>
+ <div class= "col-xs-5" ></div>
+ <div class= "col-xs-6" ></div>
+</div>
+
+
+ Copy
+
+
+
note In the second row, since 10 + 10 + 5 > 24,
+the 5-column-wide div gets wrapped onto a new line as one contiguous unit.
+Subsequent columns continue along the new line.
+Gutter Sizes
+You can change the size of a row's gutters with these classes.
+Class
+Padding between columns
+
+
+default
+20px
+
+
+.row-gutter-md10px
+
+
+.row-gutter-sm5px
+
+
Here's what the gutters look like in action.
+
+
+
+
+
+
+
+
+
+
+
<div class= "row grid-show" >
+ <div class= "col-md-12" grid-content= "Default gutter" ></div>
+ <div class= "col-md-12" grid-content= "Default gutter" ></div>
+</div>
+
+
+ Copy
+
+
+
+
+
+
+
+
+
+
+
+
<div class= "row row-gutter-md grid-show" >
+ <div class= "col-md-12" grid-content= "Medium gutter" ></div>
+ <div class= "col-md-12" grid-content= "Medium gutter" ></div>
+</div>
+
+
+ Copy
+
+
+
+
+
+
+
+
+
+
+
+
<div class= "row row-gutter-sm grid-show" >
+ <div class= "col-md-12" grid-content= "Small gutter" ></div>
+ <div class= "col-md-12" grid-content= "Small gutter" ></div>
+</div>
+
+
+ Copy
+
+
+
+
+
+
+
Responsive Column Resets
+With the four tiers of grids available you're bound to run into issues where,
+at certain breakpoints, your columns don't clear quite right as one is taller than the other.
+To fix that, use a combination of a .clearfix
+and our responsive utility classes .
+
+
+
+
<div class= "row grid-show" >
+ <div class= "col-xs-12 col-sm-6" grid-content= "this is a tall column" ></div>
+ <div class= "col-xs-12 col-sm-6" ></div>
+
+ <!-- add the extra clearfix for only the required viewport -->
+ <div class= "clearfix visible-xs-block" ></div>
+
+ <div class= "col-xs-12 col-sm-6" ></div>
+ <div class= "col-xs-12 col-sm-6" ></div>
+</div>
+
+
+ Copy
+
+
+
Offsetting Columns
+Move columns to the right using .col-md-offset-* classes.
+These classes increase the left margin of a column by * columns.
+For example, .col-md-offset-4 moves .col-md-4 over four columns.
+
+
+
+
<div class= "row grid-show" >
+ <div class= "col-md-8" ></div>
+ <div class= "col-md-8 col-md-offset-8" ></div>
+</div>
+<div class= "row grid-show" >
+ <div class= "col-md-6 col-md-offset-6" ></div>
+ <div class= "col-md-6 col-md-offset-6" ></div>
+</div>
+<div class= "row grid-show" >
+ <div class= "col-md-12 col-md-offset-6" ></div>
+</div>
+
+
+ Copy
+
+
+
Column Ordering
+Easily change the order of our built-in grid columns
+with .col-md-push-* and .col-md-pull-* modifier classes.
+This is useful if you want to change the order of columns at different screen sizes.
+
+
+
+
<div class= "row grid-show" >
+ <div class= "col-md-18 col-md-push-6" ></div>
+ <div class= "col-md-6 col-md-pull-18" ></div>
+</div>
+
+
+ Copy
+
+
+
Layout Lists
+Sometimes you might want to use lists to lay out elements on the page.
Inline lists and vertical divider lists
+are particularly useful when you don't know the width of the element you want to layout,
+or you want to vertically align it.
Use Card lists if you'd like to make a grid of vertically and horizontally aligned cards.
+
+
+
+The default media displays a media object (images, video, audio) to the left or right of a content block.
+
+
+
+
<div class= "media" >
+ <a class= "media-left" href= "#" >
+ <img alt= "..." class= "media-object" src= "http://placehold.it/64x64" />
+ </a>
+ <div class= "media-body" >
+ <h4 class= "media-heading" > Media heading</h4>
+ Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
+ </div>
+</div>
+
+<div class= "media" >
+ <div class= "media-body" >
+ <h4 class= "media-heading" > Media heading</h4>
+ Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
+ </div>
+ <a class= "media-right" href= "#" >
+ <img alt= "..." class= "media-object" src= "http://placehold.it/64x64" />
+ </a>
+</div>
+
+
+ Copy
+
+
+
Wrap the image in a fixed-size .image-container to make sure the image isn't
+larger than the container
+
+
+
+
<div class= "media" >
+ <a class= "media-left" href= "#" >
+ <div class= "image-container" style= "width: 100px; height: 50px;" >
+ <img alt= "..." class= "media-object" src= "http://placehold.it/64x64" />
+ </div>
+ </a>
+ <div class= "media-body" >
+ <h4 class= "media-heading" > Media heading</h4>
+ <p>
+ Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
+ </p>
+ </div>
+</div>
+
+
+ Copy
+
+
+
You can also nest media objects inside of each other (useful for comment threads or articles lists).
+
+
+
+
<div class= "media" >
+ <a class= "media-left" href= "#" target= "_blank" >
+ <img alt= "..." class= "media-object" src= "http://placehold.it/64x64" >
+ </a>
+ <div class= "media-body" >
+ <h4 class= "media-heading" > Media heading</h4>
+ <p> Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.</p>
+
+ <!-- Nested media object -->
+ <div class= "media" >
+ <a class= "media-left" href= "#" target= "_blank" >
+ <img alt= "..." class= "media-object" src= "http://placehold.it/64x64" >
+ </a>
+ <div class= "media-body" >
+ <h4 class= "media-heading" > Nested media heading</h4>
+ Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
+
+ <!-- Nested media object -->
+ <div class= "media" >
+ <a class= "media-left" href= "#" target= "_blank" >
+ <img alt= "..." class= "media-object" src= "http://placehold.it/64x64" >
+ </a>
+ <div class= "media-body" >
+ <h4 class= "media-heading" > Nested media heading</h4>
+ Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
+ </div>
+ </div>
+ </div>
+ </div>
+
+ <!-- Nested media object -->
+ <div class= "media" >
+ <a class= "media-left" href= "#" target= "_blank" >
+ <img alt= "..." class= "media-object" src= "http://placehold.it/64x64" >
+ </a>
+ <div class= "media-body" >
+ <h4 class= "media-heading" > Nested media heading</h4>
+ Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
+ </div>
+ </div>
+ </div>
+</div>
+
+
+ Copy
+
+
+
The images or other media can be aligned top, middle, or bottom. The default is top aligned.
+
+
+
+
<div class= "media" >
+ <a class= "media-left" href= "#" target= "_blank" >
+ <img alt= "..." class= "media-object" src= "http://placehold.it/40x40" >
+ </a>
+ <div class= "media-body" >
+ <h4 class= "media-heading" > Top aligned media</h4>
+ Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
+ </div>
+</div>
+
+<div class= "media" >
+ <a class= "media-left media-middle" href= "#" target= "_blank" >
+ <img alt= "..." class= "media-object" src= "http://placehold.it/40x40" >
+ </a>
+ <div class= "media-body" >
+ <h4 class= "media-heading" > Middle aligned media</h4>
+ Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
+ </div>
+</div>
+
+<div class= "media" >
+ <a class= "media-left media-bottom" href= "#" target= "_blank" >
+ <img alt= "..." class= "media-object" src= "http://placehold.it/40x40" >
+ </a>
+ <div class= "media-body" >
+ <h4 class= "media-heading" > Bottom aligned media</h4>
+ Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
+ </div>
+</div>
+
+
+ Copy
+
+
+
You can also make the media block stack with grid columns.
+Media objects switch from being stacked on top to being floated left of the media body as the screen size gets larger.
+For example, .media-stackable-xs is stacked on screen sizes from 0-480px and then left floated on larger screens.
+
+
+
+
<div class= "media media-stackable-xs" >
+ <a class= "media-left" href= "#" target= "_blank" >
+ <img alt= "..." class= "media-object" src= "http://placehold.it/100x100" >
+ </a>
+ <div class= "media-body" >
+ <p> Extra-small stackable</p>
+ </div>
+</div>
+
+<div class= "media media-stackable-sm" >
+ <a class= "media-left" href= "#" target= "_blank" >
+ <img alt= "..." class= "media-object" src= "http://placehold.it/100x100" >
+ </a>
+ <div class= "media-body" >
+ <p> Small stackable</p>
+ </div>
+</div>
+
+<div class= "media media-stackable-md" >
+ <a class= "media-left" href= "#" target= "_blank" >
+ <img alt= "..." class= "media-object" src= "http://placehold.it/100x100" >
+ </a>
+ <div class= "media-body" >
+ <p> Medium stackable</p>
+ </div>
+</div>
+
+<div class= "media media-stackable-lg" >
+ <a class= "media-left" href= "#" target= "_blank" >
+ <img alt= "..." class= "media-object" src= "http://placehold.it/100x100" >
+ </a>
+ <div class= "media-body" >
+ <p> Large stackable</p>
+ </div>
+</div>
+
+
+ Copy
+
+
+
Panes
+Panes are horizontal groupings of content that are usually used to
+span the full browser window width. It's going to look funny here,
+a better way to view it is on the panes page .
You can combine up to two background classes on the pane component.
+The one on the .pane element will span the full browser width. The
+one on the .container element will be constrained to the content width.
+
+
+
+
<div class= "pane bg-dark-1" >
+ <div class= "container bg-glow" >
+ <h1 class= "type-neutral-11" > This is a pane</h1>
+ </div>
+</div>
+
+
+ Copy
+
+
+
+
+
+
This is a pane
+
+
+
+
+
+
+
+
This is another pane
+
+
+
+
+
+
+
<div class= "pane pane-offset bg-dark-1" >
+ <div class= "container bg-glow" >
+ <h1 class= "type-neutral-11" > This is a pane</h1>
+ <div class= "pane-image" >
+ <img class= "img-responsive" src= "styleguide/console-laptop.png" alt= "A laptop showing Pivotal Web Services dashboard." />
+ </div>
+ </div>
+</div>
+<div class= "pane bg-cloud" >
+ <div class= "container" >
+ <h1> This is another pane</h1>
+ </div>
+</div>
+
+
+ Copy
+
+
+
Vertical Align
+The Aligner allows you to vertically align children to the top, center, or bottom.
+Its height is set by default to 230px.
This component doesn't do any horizontal alignment.
+You can use grids, or the text-alignment classes
+.txt-l, .txt-r, and .txt-c with this component.
+
+
+ This component is not supported in IE10 and below.
+ While the content will appear, it will not be vertically aligned.
+
+
+
+
+
+
<div class= "aligner txt-c" >
+ <a class= "aligner-item" href= "http://bitly.com/ZTHUDU" > Centered content</a>
+</div>
+
+
+ Copy
+
+
+
Override the default height by setting an inline style like so:
+
+
+
+
<div class= "aligner" style= "height: 200px;" >
+ <a class= "aligner-item aligner-item-top" href= "http://bit.ly/1wCDWdC" > On Top</a>
+ <a class= "aligner-item" href= "http://bitly.com/ZTHUDU" > Center</a>
+ <a class= "aligner-item aligner-item-bottom" href= "http://bit.ly/12TqYiL" > Bottom</a>
+</div>
+
+
+ Copy
+
+
+
Note: the background colors in the example are just for display in the styleguide.
+
+
+
a brand new styleguide: Objects
+
+
+
+
+
+Accordions
+
+
+These are frequently used in combination with our panel components. They have a header and body.
Accordions can be used with any background color class, add them to the header and body.
NOTE: The 'alligators' (the > in the HAML below) are structural --
+without them, the browser renders the whitespace on the anchor tags,
+and the images jump around by a few pixels when they're toggled.
Also see the select tabs for a toggle triggered by a select group.
+Basic
+Use this to expand and collapse content.
+
+
+
+
<a class= "collapsed" data-toggle= "collapse" href= "#simple-collapse-example" >
+ <div class= "when-collapsed" >
+ Expand me
+ </div>
+ <div class= "when-expanded" >
+ Collapse me
+ </div>
+</a>
+<div class= "collapse" id= "simple-collapse-example" >
+ Look at this content.
+</div>
+
+
+ Copy
+
+
+
Sizes
+
+
+
+ Deprecation warning
+
+
+ The large accordion is deprecated. All accordions should be the default size.
+
+
Default accordion size:
+
+
+
+
+
My fancy application
+
+
+
+
+
+ This content should hide and show when the trigger is clicked.
+
+
+
+
+
+
+
+
<div class= "panel" id= "accordion-1" >
+ <div class= "panel-heading-accordion bg-neutral-11 collapse-trigger collapsed" data-toggle= "collapse" data-parent= "#accordion-2" href= "#myCollapse-1" >
+ <div class= "row" >
+ <div class= "col-md-23" >
+ <h3 class= "h5 collapse-title type-em-1 type-primary-2" > My fancy application</h3>
+ </div>
+ </div>
+ </div>
+ <div class= "panel-collapse collapse" id= "myCollapse-1" >
+ <div class= "panel-body-accordion bg-neutral-11" >
+ This content should hide and show when the trigger is clicked.
+ </div>
+ </div>
+</div>
+
+
+ Copy
+
+
+
Large accordion size:
+
+
+
+
+
My fancy application
+
+
+
+
+
+ This content should hide and show when the trigger is clicked.
+
+
+
+
+
+
+
<div class= "panel" id= "accordion-2" >
+ <div class= "panel-heading-accordion-large bg-neutral-11 collapse-trigger collapsed" data-parent= "#accordion-2" data-toggle= "collapse" href= "#myCollapse-2" >
+ <div class= "row" >
+ <div class= "col-md-23" >
+ <h3 class= "h5 collapse-title type-em-1 type-primary-2" > My fancy application</h3>
+ </div>
+ </div>
+ </div>
+ <div class= "panel-collapse collapse" id= "myCollapse-2" >
+ <div class= "panel-body-accordion bg-neutral-11" >
+ This content should hide and show when the trigger is clicked.
+ </div>
+ </div>
+</div>
+
+
+ Copy
+
+
+
Styles
+Accordion with Divider:
This adds a divider between the accordion header and accordion body.
+
+
+
+
+ This content should hide and show when the trigger is clicked.
+
+
+
+
+
+
+
<div class= "panel" id= "accordion-5" >
+ <div class= "panel-heading-accordion bg-neutral-11 collapse-trigger collapsed" data-parent= "#accordion-3" data-toggle= "collapse" href= "#myCollapse-5" >
+ <div class= "row" >
+ <div class= "col-md-23" >
+ <a>
+ <div class= "when-collapsed-inline" >
+ <i class= "fa fa-caret-right collapse-icon" ></i>
+ </div>
+ <div class= "when-expanded-inline" >
+ <i class= "fa fa-caret-down collapse-icon" ></i>
+ </div>
+ </a>
+ <h3 class= "h5 collapse-title type-em-1 type-primary-2" > My fancy application</h3>
+ </div>
+ </div>
+ </div>
+ <div class= "panel-collapse collapse" id= "myCollapse-5" >
+ <div class= "panel-body-accordion-divider bg-neutral-11" >
+ This content should hide and show when the trigger is clicked.
+ </div>
+ </div>
+</div>
+
+
+ Copy
+
+
+
You can combine the accordion with any panel class to have a styled panel that opens and closes.
+With Icons
+Accordion with plus/minus icon:
+
+
+
+
+ This content should hide and show when the trigger is clicked.
+
+
+
+
+
+
+
<div class= "panel" id= "accordion-3" >
+ <div class= "panel-heading-accordion-large collapse-trigger collapsed" data-parent= "#accordion-2" data-toggle= "collapse" href= "#myCollapse-3" >
+ <div class= "row" >
+ <div class= "col-md-23" >
+ <a>
+ <div class= "when-collapsed-inline" >
+ <i class= "fa fa-plus-square collapse-icon" ></i>
+ </div>
+ <div class= "when-expanded-inline" >
+ <i class= "fa fa-minus-square collapse-icon" ></i>
+ </div>
+ </a>
+ <h3 class= "h5 collapse-title type-em-1 type-primary-2" > My fancy application</h3>
+ </div>
+ </div>
+ </div>
+ <div class= "panel-collapse collapse" id= "myCollapse-3" >
+ <div class= "panel-body-accordion bg-neutral-11" >
+ This content should hide and show when the trigger is clicked.
+ </div>
+ </div>
+</div>
+
+
+ Copy
+
+
+
Accordion with caret right/down icon:
+
+
+
+
+ This content should hide and show when the trigger is clicked.
+
+
+
+
+
+
+
<div class= "panel" id= "accordion-4" >
+ <div class= "panel-heading-accordion collapse-trigger collapsed" data-parent= "#accordion-3" data-toggle= "collapse" href= "#myCollapse-4" >
+ <div class= "row" >
+ <div class= "col-md-23" >
+ <a>
+ <div class= "when-collapsed-inline" >
+ <i class= "fa fa-caret-right collapse-icon" ></i>
+ </div>
+ <div class= "when-expanded-inline" >
+ <i class= "fa fa-caret-down collapse-icon" ></i>
+ </div>
+ </a>
+ <h3 class= "h5 collapse-title type-em-1 type-primary-2" > My fancy application</h3>
+ </div>
+ </div>
+ </div>
+ <div class= "panel-collapse collapse" id= "myCollapse-4" >
+ <div class= "panel-body-accordion bg-neutral-11" >
+ This content should hide and show when the trigger is clicked.
+ </div>
+ </div>
+</div>
+
+
+ Copy
+
+
+
Alerts
+
+
+Alerts are used to display flash messages to the user. When using alerts with simple one-line
+text, wrap the text in a <p> with .em-high.
+
+
+
+
<div class= "alert alert-success" >
+ <p class= "em-high" > Success</p>
+</div>
+
+
+ Copy
+
+
+
Alerts are also used to bring important notes to a user's attention. If the content of your alert
+is a little more complicated, we would recommend using headings coupled with the content.
+
+
You should know...
+
There are some things you should note. Just in case you didn't figure it out already.
+
+
+
+
+
+
<div class= "alert alert-info" >
+ <h5 class= "em-high mtn" > You should know...</h5>
+ <p> There are some things you should note. Just in case you didn't figure it out already.</p>
+ <ul>
+ <li> thing 1</li>
+ <li> thing 2</li>
+ </ul>
+</div>
+
+
+ Copy
+
+
+
If you want to include a link in your alert, use the class alert-link.
+
+
Important Link
+
+ It is very important that you
+ click here
+
+
+
+
+
+
<div class= "alert alert-warning" >
+ <h5 class= "em-high mtn" > Important Link</h5>
+ <p>
+ It is very important that you
+ <a class= "alert-link" href= "http://bit.ly/1vkXaYb" > click here</a>
+ </p>
+</div>
+
+
+ Copy
+
+
+
Alert Types
+Our 4 alert types are:
+
+
+
+
+
+
+
+
+
+
+
<div class= "alert alert-success" >
+ <div class= "media" >
+ <div class= "media-left" >
+ <i class= "fa fa-check-circle" ></i>
+ </div>
+ <div class= "media-body em-high" >
+ Everything is wonderful.
+ <a class= "alert-link" href= "http://bit.ly/QCMZM5" > Be happy.</a>
+ </div>
+ </div>
+</div>
+
+
+ Copy
+
+
+
+
+
+
+
+
+
+
+
+
<div class= "alert alert-info" >
+ <div class= "media" >
+ <div class= "media-left" >
+ <i class= "fa fa-info-circle" ></i>
+ </div>
+ <div class= "media-body em-high" >
+ Info for you.
+ <a class= "alert-link" href= "http://bit.ly/1DFns8H" > Tell me more.</a>
+ </div>
+ </div>
+</div>
+
+
+ Copy
+
+
+
+
+
+
+
+
+
+
+
+
<div class= "alert alert-warning" >
+ <div class= "media" >
+ <div class= "media-left" >
+ <i class= "fa fa-exclamation-triangle" ></i>
+ </div>
+ <div class= "media-body em-high" >
+ Warning: There is no parking on the dancefloor.
+ <a class= "alert-link" href= "http://bit.ly/1uM05DJ" > Be alert.</a>
+ </div>
+ </div>
+</div>
+
+
+ Copy
+
+
+
+
+
+
+
+
+
+
+
+
<div class= "alert alert-error" >
+ <div class= "media" >
+ <div class= "media-left" >
+ <i class= "fa fa-exclamation-triangle" ></i>
+ </div>
+ <div class= "media-body em-high" >
+ Something has gone horribly awry.
+ <a class= "alert-link" href= "http://bit.ly/1rooFJV" > You've made a huge mistake.</a>
+ </div>
+ </div>
+</div>
+
+
+ Copy
+
+
+
+
+
+
+
Dismissable Alerts
+By adding .alert-dismissable and a button, you can also make alerts dismissable.
+
+
+
+
Click the 'X' over there------>
+
+
+
+
+
+
<div class= "alert alert-success alert-dismissable" >
+ <button class= "close" data-dismiss= "alert" >
+ <i class= "fa fa-times" ></i>
+ </button>
+ <p class= "em-high" > Click the 'X' over there------> </p>
+</div>
+
+
+ Copy
+
+
+
If a full-width dissmissable alert is desired, but the content needs to be aligned with
+other content inside a container on the page (of a width 500px for this example), you might consider doing the following:
+
+
+
+
<div class= "pane bg-accent-5" >
+ <div class= "container pan" style= "width:500px" >
+ <div class= "alert alert-info mtn" >
+ <button class= "close" data-dismiss= "alert" >
+ <i class= "fa fa-times" ></i>
+ </button>
+ <div class= "media mtn" >
+ <div class= "media-left" >
+ <i class= "fa fa-info-circle" ></i>
+ </div>
+ <div class= "media-body em-high" >
+ 3 new files available for Pivotal CF.
+ <a class= "type-sm alert-link" href= "http://bit.ly/1DFns8H" > Mark all as viewed.</a>
+ </div>
+ </div>
+ </div>
+ </div>
+</div>
+
+
+ Copy
+
+
+
Back to Top
+You can use this component to scroll to the top of a page.
The button will be fixed to the bottom right hand corner of the page.
You can place the link anywhere in your markup, but best practices are either towards the top or bottom of your markup.
+
+
+
+
<a class= "back-to-top" href= "#" target= "_blank" style= "display: inline;" ></a>
+
+
+ Copy
+
+
+
Code
+
+
+This is your basic unstyled code sample:
+
class Foo
+ def bar
+ puts 'hi'
+ end
+end
+
+
+
+
<pre class= "pre-unstyled" ><code> class Foo
+ def bar
+ puts 'hi'
+ end
+end</code></pre>
+
+
+ Copy
+
+
+
Inline
+
+
This is an example of a paragraph with an inline code snippet within it.
+
+
+
+
<p> This is an example of a paragraph with <code> an inline code snippet</code> within it.</p>
+
+
+ Copy
+
+
+
Inline Dark
+
+
This is an example of a paragraph with a dark inline code snippet within it.
+
+
+
+
<p> This is an example of a paragraph with <code class= "inline-dark" > a dark inline code snippet</code> within it.</p>
+
+
+ Copy
+
+
+
Styled Code
+In order to show syntax-highlighted code, you will need to apply a language specific class to the code tag. For example, .language-ruby.
There are several languages already available (and others available from the Prismjs.com website), including:
Markup
+CSS
+C-like
+JavaScript
+Java
+PHP
+PHP
+CoffeeScript
+Sass
+Bash
+Python
+HTTP
+Ruby
+Go
+
+
class Foo
+ def bar
+ puts 'hi'
+ end
+end
+
+
+
+
<pre><code class= "language-ruby" > class Foo
+ def bar
+ puts 'hi'
+ end
+end</code></pre>
+
+
+ Copy
+
+
+
Make it scrollable
+
class Foo
+ def bar
+ puts 'hi'
+ end
+
+ def bar
+ puts 'hi'
+ end
+
+ def bar
+ puts 'hi'
+ end
+
+ def bar
+ puts 'hi'
+ end
+
+ def bar
+ puts 'hi'
+ end
+
+ def bar
+ puts 'hi'
+ end
+
+ def bar
+ puts 'hi'
+ end
+end
+
+
+
+
<pre class= "pre-scrollable" ><code class= "language-ruby" > class Foo
+ def bar
+ puts 'hi'
+ end
+
+ def bar
+ puts 'hi'
+ end
+
+ def bar
+ puts 'hi'
+ end
+
+ def bar
+ puts 'hi'
+ end
+
+ def bar
+ puts 'hi'
+ end
+
+ def bar
+ puts 'hi'
+ end
+
+ def bar
+ puts 'hi'
+ end
+end</code></pre>
+
+
+ Copy
+
+
+
Scrollable with too little content:
+
class Foo
+ def bar
+ puts 'hi'
+ end
+end
+
+
+
+
<pre class= "pre-scrollable" ><code class= "language-ruby" > class Foo
+ def bar
+ puts 'hi'
+ end
+end</code></pre>
+
+
+ Copy
+
+
+
If you would like a set a default height, please add it manually.
+Terminal Window
+Alternate CSS
+
+
class Foo
+ def bar
+ puts 'hi'
+ end
+end
+
+class Bar
+ def bar
+ puts 'hi'
+ end
+end
+
+class Baz
+ def bar
+ puts 'hi'
+ end
+end
+
+class Bop
+ def bar
+ puts 'hi'
+ end
+end
+
+
+
+
+
+
<div class= "terminal" >
+ <pre><code class= "language-ruby" > class Foo
+ def bar
+ puts 'hi'
+ end
+end
+
+class Bar
+ def bar
+ puts 'hi'
+ end
+end
+
+class Baz
+ def bar
+ puts 'hi'
+ end
+end
+
+class Bop
+ def bar
+ puts 'hi'
+ end
+end</code></pre>
+</div>
+
+
+ Copy
+
+
+
Dropdowns
+
+
+Dropdowns are menus that can be triggered by buttons.
This is the basic bootstrap dropdown.
+
+
+ Button Dropdown
+
+
+
+
+
+
+
<div class= "dropdown btn-group" >
+ <button id= "dropdown-button-1" class= "dropdown-toggle btn btn-primary" type= "button" data-toggle= "dropdown" aria-haspopup= "true" aria-expanded= "false" >
+ Button Dropdown
+ <span class= "caret" ></span>
+ </button>
+ <ul class= "dropdown-menu" role= "menu" aria-labelledby= "dropdown-button-1" >
+ <li role= "presentation" >
+ <a href= "http://www.google.com" role= "menuitem" > Google</a>
+ </li>
+ <li class= "divider mvn" ></li>
+ <li role= "presentation" >
+ <a href= "http://www.yahoo.com" role= "menuitem" > Yahoo</a>
+ </li>
+ <li class= "divider mvn" ></li>
+ </li><li role= "presentation" >
+ <a href= "http://www.aol.com" role= "menuitem" > Aol</a>
+ </li>
+ </ul>
+</div>
+
+
+ Copy
+
+
+
+
Dropdowns with dividers
+
+ If you want to add a divider between items in the dropdown,
+ add a `li.divider` between list items.
+
+
+
+
+ Link Dropdown
+
+
+
+
+
+
+
<div class= "dropdown btn-group" >
+ <button id= "drop3" data-toggle= "dropdown" class= "dropdown-toggle btn btn-link" type= "button" >
+ <span> Link Dropdown</span>
+ <span class= "caret" ></span>
+ </button>
+ <ul class= "dropdown-menu" role= "menu" aria-labelledby= "drop3" >
+ <li role= "presentation" >
+ <a role= "menuitem" tabindex= "-1" href= "https://twitter.com/fat" > Action</a>
+ </li>
+ <li role= "presentation" >
+ <a role= "menuitem" tabindex= "-1" href= "https://twitter.com/fat" > Another action</a>
+ </li>
+ <li role= "presentation" >
+ <a role= "menuitem" tabindex= "-1" href= "https://twitter.com/fat" > Something else here</a>
+ </li>
+ <li role= "presentation" >
+ <a role= "menuitem" tabindex= "-1" href= "https://twitter.com/fat" > Separated link</a>
+ </li>
+ </ul>
+</div>
+
+
+ Copy
+
+
+
+
No links as dropdowns
+
+ Instead of using an a tag as a dropdown,
+ use a button.btn.btn-link.
+
+
Here's a crazy-complex dropdown. Not for the faint of heart.
+
+
+ dropdown trigger
+
+
+
+
+
+
+
<div class= "dropdown btn-group" >
+ <button id= "dropdown-button-2" class= "dropdown-toggle btn btn-primary" type= "button" data-toggle= "dropdown" aria-haspopup= "true" aria-expanded= "false" >
+ dropdown trigger
+ <span class= "caret" ></span>
+ </button>
+ <ul class= "dropdown-menu" role= "menu" aria-labelledby= "dropdown-button-2" >
+ <li role= "presentation" >
+ <a href= "#" role= "menuitem" class= "pvl" >
+ <div class= "media" >
+ <div class= "media-left media-middle prxl" >
+ <i class= "fa fa-check type-neutral-2" ></i>
+ </div>
+ <div class= "media-body" style= "width: 400px;" >
+ <h4 class= "media-heading em-high type-neutral-3 mvn h5" > updates and alerts</h4>
+ <span class= "type-neutral-4" > receive all tacos and burritos.</span>
+ </div>
+ </div>
+ </a>
+ </li>
+ <li role= "presentation" >
+ <a href= "#" role= "menuitem" class= "pvl" >
+ <div class= "media" >
+ <div class= "media-left media-middle prxl" >
+ <i class= "fa fa-check type-neutral-2" style= "visibility: hidden" ></i>
+ </div>
+ <div class= "media-body" style= "width: 400px;" >
+ <h4 class= "media-heading em-high type-neutral-3 mvn h5" > alerts only</h4>
+ <span class= "type-neutral-4" > only receive tacos when burritos are issued for this product and files.</span>
+ </div>
+ </div>
+ </a>
+ </li>
+ <li role= "presentation" >
+ <a href= "#" role= "menuitem" class= "pvl" >
+ <div class= "media" >
+ <div class= "media-left media-middle prxl" >
+ <i class= "fa fa-check type-neutral-2" style= "visibility: hidden" ></i>
+ </div>
+ <div class= "media-body" style= "width: 400px;" >
+ <h4 class= "media-heading em-high type-neutral-3 mvn h5" > none</h4>
+ <span class= "type-neutral-4" > do not receive any mexican food.</span>
+ </div>
+ </div>
+ </a>
+ </li>
+ </ul>
+</div>
+
+
+ Copy
+
+
+
Notifications
+This is a notification dropdown with no notifications.
+
+
+
+
<div class= "dropdown btn-group" >
+ <a data-toggle= "dropdown" class= "dropdown-toggle btn btn-link" type= "button" >
+ <i class= "fa fa-bell type-neutral-6 h2 mvn mrm" ></i>
+ </a>
+ <ul class= "dropdown-menu" role= "menu" >
+ <li role= "presentation" >
+ <div class= "dropdown-notifications-none" >
+ <i class= "fa fa-bell type-neutral-6" ></i>
+ <p class= "type-neutral-4 em-alt mbn" > No notifications</p>
+ </div>
+ </li>
+ </ul>
+</div>
+
+
+ Copy
+
+
+
This is a notification dropdown with notifications.
+
+
+
+
<div class= "dropdown btn-group" >
+ <a data-toggle= "dropdown" class= "dropdown-toggle btn btn-link" type= "button" >
+ <i class= "fa fa-bell type-neutral-6 h2 mvn" ></i>
+ <span class= "dropdown-notifications-badge" > 2</span>
+ </a>
+ <ul class= "dropdown-menu dropdown-notifications-list" role= "menu" >
+ <li role= "presentation" >
+ <a role= "menuitem" href= "https://twitter.com/fat" >
+ <div class= "media man pan" >
+ <div class= "media-left media-middle" >
+ <h3 class= "label label-primary mrm" > New</h3>
+ </div>
+ <div class= "media-body media-middle" >
+ <h5 class= "media-heading mbn type-dark-1" > Notification</h5>
+ <p class= "type-sm type-neutral-5 mvn" > News for you</p>
+ </div>
+ </div>
+ </a>
+ </li>
+ <li role= "presentation" >
+ <a role= "menuitem" href= "https://twitter.com/fat" >
+ <div class= "media man pan" >
+ <div class= "media-left media-middle" >
+ <h3 class= "label label-primary mrm" > New</h3>
+ </div>
+ <div class= "media-body media-middle" >
+ <h5 class= "media-heading mbn type-dark-1" > Pivotal-CF</h5>
+ <p class= "type-sm type-neutral-5 mvn" > 1 New File Available</p>
+ </div>
+ </div>
+ </a>
+ </li>
+ </ul>
+</div>
+
+
+ Copy
+
+
+
This is a notification dropdown with alerts.
+
+
+
+
<div class= "dropdown btn-group" >
+ <a data-toggle= "dropdown" class= "dropdown-toggle btn btn-link" type= "button" >
+ <i class= "fa fa-bell type-neutral-6 h2 mvn" ></i>
+ <i class= "fa fa-exclamation-triangle h4 type-warn-2 dropdown-notifications-alert" ></i>
+ </a>
+ <ul class= "dropdown-menu dropdown-notifications-list" role= "menu" >
+ <li role= "presentation" >
+ <a role= "menuitem" href= "https://twitter.com/fat" >
+ <div class= "media man pan" >
+ <div class= "media-left media-middle" >
+ <i class= "fa fa-exclamation-triangle type-warn-2 h4 mrm" ></i>
+ </div>
+ <div class= "media-body media-middle" >
+ <h5 class= "media-heading mbn type-dark-1" > Product One</h5>
+ <p class= "type-sm type-neutral-5 mvn" > 1 alert</p>
+ </div>
+ </div>
+ </a>
+ </li>
+ <li role= "presentation" >
+ <a role= "menuitem" href= "https://twitter.com/fat" >
+ <div class= "media man pan" >
+ <div class= "media-left media-middle" >
+ <i class= "fa fa-exclamation-triangle type-warn-2 h4 mrm" ></i>
+ </div>
+ <div class= "media-body media-middle" >
+ <h5 class= "media-heading mbn type-dark-1" > Product Two</h5>
+ <p class= "type-sm type-neutral-5 mvn" > 2 alerts</p>
+ </div>
+ </div>
+ </a>
+ </li>
+ </ul>
+</div>
+
+
+ Copy
+
+
+
Hoverable
+This component is for showing hidden actions on hover.
+If you put this on an element then hovering on that parent element will show the hidden element.
List example:
This can be used with any kind of list but the list group style seems to fit this use case best.
+
+
+ List Item 1
+ Edit
+
+
+ List Item 2
+ Edit
+
+
+ List Item 3
+ Edit
+
+
+ Not hoverable
+
+
+
+
+
+
<ul class= "list-group" hoverable-group= "true" >
+ <li class= "list-group-item" hoverable= "true" >
+ List Item 1
+ <a class= "hovered" href= "#" > Edit</a>
+ </li>
+ <li class= "list-group-item" hoverable= "true" >
+ List Item 2
+ <a class= "hovered" href= "#" > Edit</a>
+ </li>
+ <li class= "list-group-item" hoverable= "true" >
+ List Item 3
+ <a class= "hovered" href= "#" > Edit</a>
+ </li>
+ <li class= "list-group-item" >
+ Not hoverable
+ </li>
+</ul>
+
+
+ Copy
+
+
+
Table example:
+
+
+ Name
+
+
+
+ Row 1
+ Delete
+
+
+
+
+ Row 2
+ Delete
+
+
+
+
+ Row 3
+ Delete
+
+
+
+
+ Not hoverable
+
+
+
+
+
+
+
<table hoverable-group= "true" >
+ <tr>
+ <th> Name</th>
+ </tr>
+ <tr hoverable= "true" >
+ <td>
+ Row 1
+ <a class= "hovered" href= "#" > Delete</a>
+ </td>
+ </tr>
+ <tr hoverable= "<%= true %>" >
+ <td>
+ Row 2
+ <a class= "hovered" href= "#" > Delete</a>
+ </td>
+ </tr>
+ <tr hoverable= "true" >
+ <td>
+ Row 3
+ <a class= "hovered" href= "#" > Delete</a>
+ </td>
+ </tr>
+ <tr>
+ <td>
+ Not hoverable
+ </td>
+ </tr>
+</table>
+
+
+ Copy
+
+
+
Maps
+Full width map with marker at Pivotal Labs SF location, and an optional informational overlay.
+
+
+
+
<script src= "http://maps.googleapis.com/maps/api/js?libraries=places" ></script>
+<div class= 'map-wrapper' >
+ <div class= 'pane' >
+ <div class= 'container pan' >
+ <div class= 'row' >
+ <div class= 'col-sm-6 col-md-8 col-sm-offset-1' >
+ <div class= 'map-overlay panel panel-basic bg-neutral-10 paxxl' >
+ <h3 class= "h2" > Location</h3>
+ <address class= 'h4 pvl' > Pivotal Software Inc.<br>
+ 875 Howard Street<br>
+ San Francisco, CA 94103
+ </address>
+ <p class= 'h4' > Support: <a href= 'mailto:support@run.pivotal.io' > support@run.pivotal.io</a></p>
+ <p class= 'h4' > Twitter: <a href= 'https://twitter.com/pivotalws' > @pivotalws</a></p>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div class= 'pane pane-map' >
+ <div id= 'labs-map' ></div>
+ </div>
+</div>
+
+
+ Copy
+
+
+
+
+
var maps = ( function () {
+ var self = this ;
+ var map ;
+
+ var mapOptions = {
+ placeId : "ChIJ9w1pfYiAhYAR45k8AD-TjhA" ,
+ center : new google . maps . LatLng ( 37.781787 , - 122.403911 ),
+ mapElementId : 'labs-map' ,
+ zoom : 18
+ };
+
+ var initialize = function () {
+ map = new google . maps . Map ( document . getElementById ( mapOptions . mapElementId ), {
+ center : mapOptions . center ,
+ zoom : mapOptions . zoom ,
+ disableDefaultUI : true
+ });
+
+ var request = {
+ placeId : mapOptions . placeId
+ };
+
+ var service = new google . maps . places . PlacesService ( map );
+ service . getDetails ( request , createMarker );
+ };
+
+ var createMarker = function ( place , status ) {
+ if ( status == google . maps . places . PlacesServiceStatus . OK ) {
+ new google . maps . Marker ({
+ map : map ,
+ position : place . geometry . location
+ });
+ }
+ };
+
+ self . initialize = initialize ;
+ return self ;
+})();
+
+google . maps . event . addDomListener ( window , 'load' , maps . initialize );
+
+
+ Copy
+
+
Modals
+Modals bring desired content to the foreground and de-emphasize the rest of the page.
+
+
+ Launch basic modal
+
+
+ Launch alternate modal
+
+
+
+
+
+
+
+
+
+
+
+ Deprecation warning
+
+
+ The alternate modal is deprecated.
+
+
Panels
+
+
+Panels are often used to group related content. They include box headers, footers, and can be combined with any backgrounds.
Panels are typically a combination of contours, backgrounds, and content including headers and footers. This section describes the contours.
+Alternate
+Alternate panels can be in a default, off, or danger state.
+
+
+
+
+
+
+
+
+
+
+
<div class= "panel panel-alt" >
+ <div class= "panel-body" >
+ Alternate Panel
+ </div>
+</div>
+
+
+ Copy
+
+
+
+
+
+
+
+
+ Danger alternate panel
+
+
+
+
+
+
<div class= "panel panel-alt panel-danger" >
+ <div class= "panel-body" >
+ Danger alternate panel
+ </div>
+</div>
+
+
+ Copy
+
+
+
+
+
+
+
+
+ Stopped alternate panel
+
+
+
+
+
+
<div class= "panel panel-alt panel-off" >
+ <div class= "panel-body" >
+ Stopped alternate panel
+ </div>
+</div>
+
+
+ Copy
+
+
+
+
+
+
+
+
+ Off alternate panel
+
+
+
+
+
+
<div class= "panel panel-alt panel-empty" >
+ <div class= "panel-body" >
+ Off alternate panel
+ </div>
+</div>
+
+
+ Copy
+
+
+
+
+
+
+
+
+ Editing alternate panel
+
+
+
+
+
+
+
<div class= "panel panel-alt panel-editing" >
+ <div class= "panel-body" >
+ Editing alternate panel
+ </div>
+</div>
+
+
+ Copy
+
+
+
+
+
+
+
Basic
+By default, all the .panel does is apply a basic shadow and padding to contain some content. You can have it with or without a title.
+
+
+
+
<div class= "panel panel-basic bg-neutral-11" >
+ <div class= "panel-header" >
+ <h5 class= "panel-title-alt" > Basic Title</h5>
+ </div>
+ <div class= "panel-body" >
+ Basic Panel
+ </div>
+</div>
+
+<div class= "panel panel-basic bg-neutral-11" >
+ <div class= "panel-body" >
+ Basic Panel
+ </div>
+</div>
+
+
+ Copy
+
+
+
Basic Alternate
+Basic alternate panels are panels with a border and shadow. You can have a panel-basic-alt with or without a title.
+
+
+
+
<div class= "panel panel-basic-alt" >
+ <div class= "panel-header" >
+ <h5 class= "panel-title-alt" > Basic Title Alt</h5>
+ </div>
+ <div class= "panel-body" >
+ Basic Panel
+ </div>
+</div>
+
+<div class= "panel panel-basic-alt" >
+ <div class= "panel-body" >
+ Basic Panel
+ </div>
+</div>
+
+
+ Copy
+
+
+
Card
+Using panels with card lists makes any .panel-body have a minimum "card" height.
+
+
+
+ Card Panel
+
+
+
+
+ Card Panel
+
+
+
+
+ Card Panel
+
+
+
+
+
+
+
<ul class= "list-cards list-cards-sm list-card-2" >
+ <li class= "panel panel-clickable-alt bg-neutral-11" >
+ <div class= "panel-body" >
+ Card Panel
+ </div>
+ </li>
+ <li class= "panel panel-clickable-alt bg-neutral-11" >
+ <div class= "panel-body" >
+ Card Panel
+ </div>
+ </li>
+ <li class= "panel panel-clickable-alt bg-neutral-11" >
+ <div class= "panel-body" >
+ Card Panel
+ </div>
+ </li>
+</ul>
+
+
+ Copy
+
+
+
Clickable
+These panels lighten on hover to indicate that they are clickable.
+Please use them when a click on the panel triggers an action.
+
+
+
+
+
+
+
+
+
+
+
<div class= "panel panel-clickable" >
+ <div class= "panel-body" >
+ Panel Clickable
+ </div>
+</div>
+
+
+ Copy
+
+
+
+
+
+
+
+
+ Panel Clickable Alt
+
+
+
+
+
+
+
<div class= "panel panel-clickable-alt" >
+ <div class= "panel-body" >
+ Panel Clickable Alt
+ </div>
+</div>
+
+
+ Copy
+
+
+
+
+
+
+
Sometimes you'll also want to adapt the way child elements look
+based on a hover on the parent element. There are a few
+helper classes for that.
+
+
+
+
+
+
+
+
+
+
+
<a class= "panel panel-clickable" >
+ <div class= "panel-body" >
+ <p class= "hover-target-1" >
+ hover-target-1 - default text color => link color
+ </p>
+ </div>
+</a>
+
+
+ Copy
+
+
+
+
+
+
+
+
+
+
+
+
<a class= "panel panel-clickable" >
+ <div class= "panel-body" >
+ <p class= "hover-target-2" >
+ hover-target-2 - light gray text => default text color
+ </p>
+ </div>
+</a>
+
+
+ Copy
+
+
+
+
+
+
+
+
+
+
+
+
<a class= "panel panel-clickable" >
+ <div class= "panel-body" >
+ <p class= "hover-target-3" >
+ hover-target-3 - $gray-9 background => white background
+ </p>
+ </div>
+</a>
+
+
+ Copy
+
+
+
+
+
+
+
Flex (Panel with Footer)
+Flex panels let us put a footer at the bottom of a fixed-height panel. Any panel can flex. In browsers that don't
+support flexbox, the footer will appear where it would naturally, likely right below the panel-body content.
By default, flex panels have no height. You must use an inline style to set the height.
+
+
+
+
<div class= "panel panel-flex bg-neutral-11" style= "height:200px" >
+ <div class= "panel-body" > Body Content</div>
+ <div class= "panel-footer" > Footer Content</div>
+</div>
+
+
+ Copy
+
+
+
+
+ Flex panels and list cards
+
+
+ Flex panels are often used with list cards
+ as a way to give list cards footers.
+ Add the class list-card-wrapper on any flex panels inside list cards.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
<ul class= "list-cards list-card-2 list-cards-sm" >
+ <li class= "panel panel-flex bg-neutral-11" >
+ <div class= "list-card-wrapper panel panel-flex" >
+ <div class= "panel-body" > Body Content</div>
+ <div class= "panel-footer" > Footer Content</div>
+ </div>
+ </li>
+
+ <li class= "panel panel-flex bg-neutral-11" >
+ <form>
+ <div class= "list-card-wrapper panel panel-flex" >
+ <div class= "panel-body" >
+ <p>
+ It even works if your <code> list-card-wrapper</code> is nested in a form
+ </p>
+ <div class= "form-group" >
+ <input class= "form-control" placeholder= "Email" >
+ </div>
+ </div>
+ <div class= "panel-footer" > Footer Content</div>
+ </div>
+ </form>
+ </li>
+
+ <li class= "panel panel-flex bg-neutral-11" >
+ <a class= "list-card-link" href= "http://wrd.cm/1e2A8uU" >
+ <div class= "list-card-wrapper panel panel-flex" >
+ <div class= "panel-body" > Or in a link!</div>
+ <div class= "panel-footer" > Footer Content</div>
+ </div>
+ </a>
+ </li>
+</ul>
+
+
+ Copy
+
+
+
Highlight
+This panel is used to highlight more important parts of the page.
+
+
+ Not Hoverable (use when the panel has no associated action, for instance if the action is disabled due to lack of permissions)
+
+
+
+
+
+
<div class= "panel panel-highlight" >
+ <div class= "panel-body" >
+ Not Hoverable (use when the panel has no associated action, for instance if the action is disabled due to lack of permissions)
+ </div>
+</div>
+
+
+ Copy
+
+
+
The scrollable panel sets a fixed height of 183px and scrolls any content that is larger. If you want a different size, set an inline style on the .panel-scrollable.
+
+
+
+
<div class= "panel panel-scrollable bg-neutral-11" >
+ <div class= "panel-body" >
+ <p> Lo-fi fixie aute irony skateboard, officia pug. VHS Kickstarter semiotics elit ad. XOXO fashion axe Neutra aesthetic nihil, before they sold out seitan photo booth bitters paleo ea. XOXO mustache consectetur jean shorts wolf banh mi, food truck aute odio Neutra polaroid artisan mlkshk. Chillwave aesthetic hashtag, 3 wolf moon Neutra umami DIY swag eu veniam. Blue Bottle fap kale chips veniam kogi, placeat yr Portland nesciunt sustainable iPhone. Single-origin coffee messenger bag locavore Schlitz, ea farm-to-table aliquip anim umami master cleanse. Delectus selfies placeat, tilde hoodie qui selvage consectetur cred master cleanse readymade pop-up assumenda nisi. Eu deep v brunch McSweeney's. Raw denim aliquip Banksy, proident cred banjo qui placeat Brooklyn fashion axe crucifix normcore aesthetic. Esse Pinterest organic anim American Apparel, wolf next level Tumblr laboris normcore pop-up dolore lo-fi put a bird on it trust fund. Laborum organic authentic Williamsburg plaid, Wes Anderson dolore sunt chia small batch synth Carles cliche tilde. Food truck ethical freegan velit, Kickstarter semiotics labore American Apparel biodiesel street art gentrify trust fund. Selfies Austin ex, organic art party authentic ullamco kitsch plaid placeat roof party cornhole deserunt aute.</p>
+ </div>
+</div>
+
+
+ Copy
+
+
+
Shadow
+Shadow panels add a bottom shadow to the panel.
+
+
+
+
+
+
+
+
+
+
+
<div class= "panel panel-shadow-1 bg-neutral-11" >
+ <div class= "panel-body" >
+ Shadow Panel
+ </div>
+</div>
+
+
+ Copy
+
+
+
+
+
+
+
+
+
+
+
+
<div class= "panel panel-shadow-2 bg-neutral-11" >
+ <div class= "panel-body" >
+ Shadow Panel
+ </div>
+</div>
+
+
+ Copy
+
+
+
+
+
+
+
+
+
+
+
+
<div class= "panel panel-shadow-3 bg-neutral-11" >
+ <div class= "panel-body" >
+ Shadow Panel
+ </div>
+</div>
+
+
+ Copy
+
+
+
+
+
+
+
+
+
+
+
+
<div class= "panel panel-shadow-4 bg-neutral-11" >
+ <div class= "panel-body" >
+ Shadow Panel
+ </div>
+</div>
+
+
+ Copy
+
+
+
+
+
+
+
Simple
+
+
+
+
+
<div class= "panel panel-simple bg-neutral-11" >
+ <div class= "panel-body" >
+ Simple Panel
+ </div>
+</div>
+
+
+ Copy
+
+
+
Progress Bars
+This section contains static progress bar styles.
+
+
+
+
+
+
+
+ 0 MB of 100 MB Used
+
+
+
+
+
<div class= "progress" >
+ <div aria-valuemax= "100" aria-valuemin= "0" aria-valuenow= "0" class= "progress-bar" role= "progressbar" style= "width: 0%;" >
+ <div class= "label" >
+ 0%
+ </div>
+ </div>
+</div>
+<p>
+ 0 MB of 100 MB Used
+</p>
+
+
+ Copy
+
+
+
+
+
+
+
+
+ 3 MB of 100 MB Used
+
+
+
+
+
<div class= "progress" >
+ <div aria-valuemax= "100" aria-valuemin= "0" aria-valuenow= "3" class= "progress-bar" role= "progressbar" style= "width: 3%;" >
+ <div class= "label" >
+ 3%
+ </div>
+ </div>
+</div>
+<p>
+ 3 MB of 100 MB Used
+</p>
+
+
+ Copy
+
+
+
+
+
+
+
+
+ 9 MB of 100 MB Used
+
+
+
+
+
<div class= "progress" >
+ <div aria-valuemax= "100" aria-valuemin= "0" aria-valuenow= "9" class= "progress-bar" role= "progressbar" style= "width: 9%;" >
+ <div class= "label" >
+ 9%
+ </div>
+ </div>
+</div>
+<p>
+ 9 MB of 100 MB Used
+</p>
+
+
+ Copy
+
+
+
+
+
+
+
+
+ 60 MB of 100 MB Used
+
+
+
+
+
<div class= "progress" >
+ <div aria-valuemax= "100" aria-valuemin= "0" aria-valuenow= "60" class= "progress-bar" role= "progressbar" style= "width: 60%;" >
+ <div class= "label" >
+ 60%
+ </div>
+ </div>
+</div>
+<p>
+ 60 MB of 100 MB Used
+</p>
+
+
+ Copy
+
+
+
+
+
+
+
+
+ 90 MB of 100 MB Used
+
+
+
+
+
+
<div class= "progress" >
+ <div aria-valuemax= "100" aria-valuemin= "0" aria-valuenow= "90" class= "progress-bar" role= "progressbar" style= "width: 90%;" >
+ <div class= "label" >
+ 90%
+ </div>
+ </div>
+</div>
+<p>
+ 90 MB of 100 MB Used
+</p>
+
+
+ Copy
+
+
+
+
+
+
+
Tabs
+
+
+You can activate a tab or pill navigation without writing any JavaScript by simply specifying data-toggle="tab" on an element.
+Highlight
+
+
+
+
+
+
Plan Features
+
+
Content 1
+
Content 2
+
Content 3
+
Content 4
+
+
+
+
+
+
+
+
<div class= "tab-highlight" >
+ <div class= "row" >
+ <div class= "col-md-8" >
+ <h1> Service Plans</h1>
+ <ul class= "nav nav-stacked" >
+ <li class= "active" >
+ <a data-toggle= "tab" href= "#home" >
+ <div class= "row" >
+ <div class= "col-md-10 tab-title" > Spark</div>
+ <div class= "col-md-14" > Free</div>
+ </div>
+ </a>
+ </li>
+ <li>
+ <a data-toggle= "tab" href= "#profile" >
+ <div class= "row" >
+ <div class= "col-md-10 tab-title" > Boost</div>
+ <div class= "col-md-14" > $10/month</div>
+ </div>
+ </a>
+ </li>
+ <li>
+ <a data-toggle= "tab" href= "#messages" >
+ <div class= "row" >
+ <div class= "col-md-10 tab-title" > Amp</div>
+ <div class= "col-md-14" > $50/month</div>
+ </div>
+ </a>
+ </li>
+ <li>
+ <a data-toggle= "tab" href= "#settings" >
+ <div class= "row" >
+ <div class= "col-md-10 tab-title" >
+ Shockingly long plan name is important to test
+ </div>
+ <div class= "col-md-14" > $1000/month</div>
+ </div>
+ </a>
+ </li>
+ </ul>
+ </div>
+ <div class= "col-md-16" >
+ <h1> Plan Features</h1>
+ <div class= "tab-content" >
+ <div class= "tab-pane fade in active" id= "home" > Content 1</div>
+ <div class= "tab-pane fade" id= "profile" > Content 2</div>
+ <div class= "tab-pane fade" id= "messages" > Content 3</div>
+ <div class= "tab-pane fade" id= "settings" > Content 4</div>
+ </div>
+ </div>
+ </div>
+</div>
+
+
+ Copy
+
+
+
Image
+You can use any 130px by 130px svg for the icon in the center of the tab. Please add the class icon to any parts of the svg which form part of the icon. You may also use an icon font for the icon.
+
+
+
+
Agility Content
+
Choice Content
+
Open Source
+
+
+
+
+
+
+
<div class= "tabs-images" >
+ <ul class= "list-inline nav-tabs-images" >
+ <li class= "active" >
+ <a data-toggle= "tab" href= "#agility" >
+ <span class= "sr-only" > Agility</span>
+ <svg class= "icon-svg" x= "0px" y= "0px" height= "130" width= "130" enable-background= "new 0 0 130 130" >
+ <g>
+ <path class= "icon" d= "M97.283,83.157H86.452c-2.555,3.305-5.781,6.066-9.478,8.067h20.31l4.489-3.945L97.283,83.157z" />
+ <path class= "icon" d= "M62.788,38.586c-14.513,0-26.319,11.807-26.319,26.319c0,5.429,1.66,10.473,4.489,14.667h11.012
+ c-4.499-3.327-7.434-8.654-7.434-14.667c0-10.064,8.188-18.252,18.252-18.252S81.04,54.84,81.04,64.905
+ c0,6.013-2.935,11.34-7.434,14.667c-3.032,2.242-6.766,3.585-10.818,3.585H43.853h-4.729H28.292l4.482,4.122l-4.482,3.945h20.311
+ h14.185c7.43,0,14.145-3.099,18.935-8.067c1.066-1.106,2.033-2.308,2.895-3.585c2.83-4.194,4.489-9.238,4.489-14.667
+ C89.107,50.393,77.301,38.586,62.788,38.586z" />
+ </g>
+ </svg>
+ </a>
+ </li>
+ <li>
+ <a data-toggle= "tab" href= "#choice" >
+ <span class= "sr-only" > Choice</span>
+ <svg class= "icon-svg" version= "1.1" x= "0px" y= "0px"
+ viewBox= "0 0 130 130" enable-background= "new 0 0 130 130" xml:space= "preserve" >
+ <g>
+ <g>
+ <path class= "icon" d= "M59.642,57.905c0,1.65-1.35,3-3,3h-18c-1.65,0-3-1.35-3-3v-18c0-1.65,1.35-3,3-3h18c1.65,0,3,1.35,3,3V57.905z" />
+ </g>
+ <g>
+ <path class= "icon" d= "M78.381,60.905c-1.65,0-3.675-1.169-4.5-2.598l-3.928-6.804c-0.825-1.429-0.825-3.767,0-5.196l3.928-6.804
+ c0.825-1.429,2.85-2.598,4.5-2.598h7.856c1.65,0,3.675,1.169,4.5,2.598l3.928,6.804c0.825,1.429,0.825,3.767,0,5.196l-3.928,6.804
+ c-0.825,1.429-2.85,2.598-4.5,2.598H78.381z" />
+ </g>
+ <circle class= "icon" cx= "82.309" cy= "79.905" r= "12" />
+ <g>
+ <path class= "icon" d= "M46.202,70.399c0.792-1.372,2.088-1.372,2.88,0l3.77,6.531c0.792,1.372,2.088,3.616,2.88,4.988l3.77,6.531
+ c0.792,1.372,0.144,2.494-1.44,2.494h-7.541c-1.584,0-4.175,0-5.759,0h-7.541c-1.584,0-2.232-1.122-1.44-2.494l3.77-6.531
+ c0.792-1.372,2.088-3.616,2.88-4.988L46.202,70.399z" />
+ </g>
+ </g>
+ </svg>
+ </a>
+ </li>
+ <li>
+ <a data-toggle= "tab" href= "#open-source" >
+ <span class= "sr-only" > Open Source</span>
+ <svg class= "icon-svg" version= "1.1" id= "Layer_1" x= "0px" y= "0px" viewBox= "0 0 130 130" enable-background= "new 0 0 130 130" >
+ <path class= "icon" d= "M95.22,65.454c0-16.583-13.441-30.025-30.024-30.025c-16.583,0-30.026,13.442-30.026,30.025
+ c0,12.68,7.861,23.525,18.973,27.926l7.596-19.192c-3.477-1.377-5.937-4.767-5.937-8.734c0-5.188,4.207-9.393,9.394-9.393
+ c5.188,0,9.395,4.206,9.395,9.393c0,3.966-2.463,7.357-5.937,8.734l7.594,19.192C87.362,88.979,95.22,78.134,95.22,65.454z" />
+ </svg>
+ </a>
+ </li>
+ </ul>
+ <div class= "tab-content txt-c" >
+ <div class= "tab-pane fade in active" id= "agility" > Agility Content</div>
+ <div class= "tab-pane fade" id= "choice" > Choice Content</div>
+ <div class= "tab-pane fade" id= "open-source" > Open Source</div>
+ </div>
+</div>
+
+
+ Copy
+
+
+
Responsive
+
+
+
+
+
+
+
+
+ meep
+
+ Content 1
+
+ foo
+
+ Content 2
+
+ foo
+
+ Content 3
+
+ foo
+
+ Content 4
+
+
+
+
+
+
+
+
<div class= "tab-responsive" >
+ <div class= "row" >
+ <div class= "col-sm-5" >
+ <ul class= "nav hidden-xs" >
+ <li class= "active" >
+ <a data-toggle= "tab" href= "#tab-responsive-1" > meep</a>
+ </li>
+ <li>
+ <a data-toggle= "tab" href= "#tab-responsive-2" > foo</a>
+ </li>
+ <li>
+ <a data-toggle= "tab" href= "#tab-responsive-3" > bar</a>
+ </li>
+ <li>
+ <a data-toggle= "tab" href= "#tab-responsive-4" > baz</a>
+ </li>
+ </ul>
+ </div>
+
+ <div class= "col-sm-19" >
+ <ul class= "tab-content" >
+ <li class= "active" >
+ <a class= "visible-xs-block" data-toggle= "tab" href= "#tab-responsive-1" > meep</a>
+ </li>
+ <li class= "tab-pane active fade in" id= "tab-responsive-1" > Content 1</li>
+ <li>
+ <a class= "visible-xs-block" data-toggle= "tab" href= "#tab-responsive-2" > foo</a>
+ </li>
+ <li class= "tab-pane fade" id= "tab-responsive-2" > Content 2</li>
+ <li>
+ <a class= "visible-xs-block" data-toggle= "tab" href= "#tab-responsive-3" > foo</a>
+ </li>
+ <li class= "tab-pane fade" id= "tab-responsive-3" > Content 3</li>
+ <li>
+ <a class= "visible-xs-block" data-toggle= "tab" href= "#tab-responsive-4" > foo</a>
+ </li>
+ <li class= "tab-pane fade" id= "tab-responsive-4" > Content 4</li>
+ </ul>
+ </div>
+ </div>
+</div>
+
+
+ Copy
+
+
+
Simple
+
+
+
+
+
+
Spaces Content
+
Domains Content
+
Members Content
+
+
+
+
+
+
<div class= "tab-simple" >
+ <div class= "tabs-action txt-r" >
+ <a> Some Action</a>
+ </div>
+ <ul class= "nav nav-tabs" >
+ <li class= "active" >
+ <a data-toggle= "tab" href= "#spaces" > Spaces</a>
+ </li>
+ <li>
+ <a data-toggle= "tab" href= "#domains" > Domains</a>
+ </li>
+ <li>
+ <a data-toggle= "tab" href= "#members" > Members</a>
+ </li>
+ </ul>
+ <div class= "tab-content" >
+ <div class= "tab-pane fade in active" id= "spaces" > Spaces Content</div>
+ <div class= "tab-pane fade" id= "domains" > Domains Content</div>
+ <div class= "tab-pane fade" id= "members" > Members Content</div>
+ </div>
+</div>
+
+
+ Copy
+
+
+
Simple Alt
+You do not need the .panel to wrap around .tab-simple-alt. We have it there to demonstrate the interaction on a neutral background.
+
+
+
+
+
Dashboard Content
+
Notifications Content
+
EULA Content
+
+
+
+
+
+
+
<div class= "panel paxl bg-neutral-9" >
+ <div class= "tab-simple-alt" >
+ <ul class= "nav nav-tabs" >
+ <li class= "active" >
+ <a data-toggle= "tab" href= "#dashboard" > Dashboard</a>
+ </li>
+ <li>
+ <a data-toggle= "tab" href= "#notifications" > Notifications</a>
+ </li>
+ <li>
+ <a data-toggle= "tab" href= "#eula" > EULA</a>
+ </li>
+ </ul>
+ <div class= "tab-content" >
+ <div class= "tab-pane fade in active" id= "dashboard" > Dashboard Content</div>
+ <div class= "tab-pane fade" id= "notifications" > Notifications Content</div>
+ <div class= "tab-pane fade" id= "eula" > EULA Content</div>
+ </div>
+ </div>
+</div>
+
+
+ Copy
+
+
+
Tables
+
+
+
+Class
+Description
+
+
+.tableBase table class, applies spacing and cross browser support. Unfortunately inherits some undesirable styles from bootstrap.
+
+
+.table-hoverAdds a light blue background color to table rows when the user hovers over them (use to indicate clickability)
+
+
+.table-stripedApplies zebra striping to a table.
+
+
+.table-lightLightens the table background.
+
+
+
+Table with borders where the contents of the table scroll but the header does not.
+The default height of the scrollable table is 183px. There are four other sizes provided
+which you can use by adding the following classes to the .table-scrollable element.
+Table Scrollable sizes
+Height
+
+
+default
+183px
+
+
+.table-scrollable-sm300px
+
+
+.table-scrollable-md600px
+
+
+.table-scrollable-lg900px
+
+
If you would like a custom size, please add an inline style to the .table-scrollable-body element.
Design Note: The table-scrollable is often paired with table-data and table-light as in our example.
+
+
+ You will need to specify the width of every column in both the thead and
+ the first row of the tbody. You can do this with inline width attributes.
+
+
+
+
+
+
<div class= "table-scrollable table-scrollable-sm" >
+ <div class= "table-scrollable-header" >
+ <table class= "table table-data table-light" >
+ <thead>
+ <tr>
+ <th width= "10%" > #</th>
+ <th width= "16%" > Status</th>
+ <th width= "12%" > CPU</th>
+ <th width= "16%" > Memory</th>
+ <th width= "16%" > Disk</th>
+ <th width= "30%" > Uptime</th>
+ </tr>
+ </thead>
+ </table>
+ </div>
+ <div class= "table-scrollable-body" >
+ <table class= "table table-data table-light" >
+ <tbody>
+ <tr>
+ <td width= "10%" > 0</td>
+ <td width= "16%" > Running</td>
+ <td width= "12%" > 0%</td>
+ <td width= "16%" > 4.16 MB</td>
+ <td width= "16%" > 6.75 MB</td>
+ <td width= "30%" > 27 min</td>
+ </tr>
+ <tr>
+ <td> 1</td>
+ <td> Running</td>
+ <td> 0%</td>
+ <td> 4.07 MB</td>
+ <td> 6.75 MB</td>
+ <td> 27 min</td>
+ </tr>
+ <tr>
+ <td> 2</td>
+ <td> Running</td>
+ <td> 0%</td>
+ <td> 4.07 MB</td>
+ <td> 6.75 MB</td>
+ <td> 25 min</td>
+ </tr>
+ <tr>
+ <td> 3</td>
+ <td> Running</td>
+ <td> 0%</td>
+ <td> 4.14 MB</td>
+ <td> 6.75 MB</td>
+ <td> 25 min</td>
+ </tr>
+ <tr>
+ <td> 4</td>
+ <td> Running</td>
+ <td> 0%</td>
+ <td> 4.08 MB</td>
+ <td> 6.75 MB</td>
+ <td> 25 min</td>
+ </tr>
+ <tr>
+ <td> 5</td>
+ <td> Running</td>
+ <td> 0%</td>
+ <td> 4.16 MB</td>
+ <td> 6.75 MB</td>
+ <td> 25 min</td>
+ </tr>
+ <tr>
+ <td> 6</td>
+ <td> Running</td>
+ <td> 0%</td>
+ <td> 4.07 MB</td>
+ <td> 6.75 MB</td>
+ <td> 25 min</td>
+ </tr>
+ <tr>
+ <td> 7</td>
+ <td> Running</td>
+ <td> 0%</td>
+ <td> 4.07 MB</td>
+ <td> 6.75 MB</td>
+ <td> 25 min</td>
+ </tr>
+ <tr>
+ <td> 8</td>
+ <td> Running</td>
+ <td> 0%</td>
+ <td> 4.03 MB</td>
+ <td> 6.75 MB</td>
+ <td> 25 min</td>
+ </tr>
+ <tr>
+ <td> 9</td>
+ <td> Running</td>
+ <td> 0%</td>
+ <td> 4.07 MB</td>
+ <td> 6.75 MB</td>
+ <td> 25 min</td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+</div>
+
+
+ Copy
+
+
+
Alignment
+See the alignment component for classes to use for table text alignment.
+Data
+This is a table used to display many rows of data (it is pretty much the default table). You can use grid column classes on th and td elements. See key-value table for example.
Design Note: The table-data is often paired with table-light as in our example.
+
+
+
+ Service Instance
+ Service Plan
+ Bound Apps
+
+
+
+
+ oracle-db-sct
+ Oracle DB
+ 12
+
+
+ oracle-db-sct
+ Oracle DB
+ 12
+
+
+ oracle-db-sct
+ Oracle DB
+ 12
+
+
+ oracle-db-sct
+ Oracle DB
+ 12
+
+
+
+
+
+
+
<table class= "table table-data table-light" >
+ <thead>
+ <tr>
+ <th> Service Instance</th>
+ <th> Service Plan</th>
+ <th> Bound Apps</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td> oracle-db-sct</td>
+ <td> Oracle DB</td>
+ <td> 12</td>
+ </tr>
+ <tr>
+ <td> oracle-db-sct</td>
+ <td> Oracle DB</td>
+ <td> 12</td>
+ </tr>
+ <tr>
+ <td> oracle-db-sct</td>
+ <td> Oracle DB</td>
+ <td> 12</td>
+ </tr>
+ <tr>
+ <td> oracle-db-sct</td>
+ <td> Oracle DB</td>
+ <td> 12</td>
+ </tr>
+ </tbody>
+</table>
+
+
+ Copy
+
+
+
Key-Value
+This table is used when the table headings are on the left. It looks better when you
+specify column widths for the th/tds.
+
+
+
+ Email
+ joe@example.com
+
+
+ Current Password
+ *******
+
+
+ First Name
+ Joe
+
+
+ Last Name
+ Bobs
+
+
+ Phone
+ 415-555-0000
+
+
+
+
+
+
+
<table class= "table table-key-value" >
+ <tbody>
+ <tr>
+ <th class= "col-md-8" > Email</th>
+ <td class= "col-md-16" > joe@example.com</td>
+ </tr>
+ <tr>
+ <th class= "col-md-8" > Current Password</th>
+ <td class= "col-md-16" > *******</td>
+ </tr>
+ <tr>
+ <th class= "col-md-8" > First Name</th>
+ <td class= "col-md-16" > Joe</td>
+ </tr>
+ <tr>
+ <th class= "col-md-8" > Last Name</th>
+ <td class= "col-md-16" > Bobs</td>
+ </tr>
+ <tr>
+ <th class= "col-md-8" > Phone</th>
+ <td class= "col-md-16" > 415-555-0000</td>
+ </tr>
+ </tbody>
+</table>
+
+
+ Copy
+
+
+
Tooltips are used to display extra information on hover. They can be used with any hoverable element.
The title attribute defines the text that appears on the tooltip.
+The data-placement attribute defines the tooltip's placement.
+If data-placement is not specified, the tooltip is placed on top by default.
+
+
+ Tooltips must be initialized with javascript: $(mySelector).tooltip();
+
+
+
+
+
+
<p>
+ Check out this
+ <a id= "link-with-tooltip-1" href= "#" data-toggle= "tooltip" data-placement= "left" title= "I should be on the left" >
+ tooltip on the left!
+ </a>
+</p>
+
+<p>
+ Check out this
+ <a id= "link-with-tooltip-2" href= "#" data-toggle= "tooltip" data-placement= "right" title= "I should be on the right" >
+ tooltip on the right!
+ </a>
+</p>
+
+<p>
+ <button id= "button-with-tooltip-1" class= "btn btn-default" data-toggle= "tooltip" data-placement= "top" title= "I should be on the top" >
+ Check out this tooltip on the top!
+ </button>
+</p>
+
+<p>
+ <button id= "button-with-tooltip-2" class= "btn btn-default" data-toggle= "tooltip" data-placement= "bottom" title= "I should be on the bottom" >
+ Check out this tooltip on the bottom!
+ </button>
+</p>
+
+
+ Copy
+
+
+
+
+
$ ( '#link-with-tooltip-1' ). tooltip ();
+$ ( '#link-with-tooltip-2' ). tooltip ();
+$ ( '#button-with-tooltip-1' ). tooltip ();
+$ ( '#button-with-tooltip-2' ). tooltip ();
+
+
+ Copy
+
+
+
+ If you want to use a tooltip on a disabled element, place the tooltip in a wrapper div with the class .button-with-tooltip-wrapper.
+
+
+
+
+ Disabled button
+
+
+
+
+
+
<div id= "disabled-button-with-tooltip" class= "button-with-tooltip-wrapper" data-toggle= "tooltip" data-placement= "right" title= "This button is totally disabled!" >
+ <button type= "button" class= "btn btn-default" disabled= true >
+ Disabled button
+ </button>
+</div>
+
+
+ Copy
+
+
+
+
+
$ ( '#disabled-button-with-tooltip' ). tooltip ();
+
+
+ Copy
+
+
+
+
+
)
+ * $clearfix-method sets default method
+ */
+
+// set default clearfix method to overflow
+$clearfix-method: overflow !default;
+// can be one of: overflow,facebook,micro,stubborn
+
+// create stub classes for each of the four clearfix methods
+
+@mixin clearfix-overflow {
+ overflow: hidden;
+ *overflow: visible;
+ zoom: 1;
+}
+
+@mixin clearfix-facebook {
+ display: table-cell;
+ vertical-align: top;
+ width: 10000px !important;
+ *display: block;
+ //<=IE7
+ *zoom: 1;
+ //<=IE7
+ *width: auto !important;
+ //<=IE7
+}
+
+@mixin clearfix-micro {
+ zoom: 1;
+ //@include has-layout;
+ &:before,
+ &:after {
+ content: " ";
+ display: table;
+ }
+ &:after {
+ clear: both;
+ }
+}
+
+@mixin clearfix-stubborn {
+ display: table-cell;
+ &:after {
+ clear: both;
+ display: block;
+ visibility: hidden;
+ overflow: hidden;
+ height: 0 !important;
+ line-height: 0;
+ font-size: xx-large;
+ content: "x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x";
+ }
+}
+
+// extends so the output will be smaller
+
+@mixin clearfix-me($method: $clearfix-method) {
+ @if $method == facebook {
+ @include clearfix-facebook;
+ } @else if $method == micro {
+ @include clearfix-micro;
+ } @else if $method == stubborn {
+ @include clearfix-stubborn;
+ } @else if $method == overflow {
+ @include clearfix-overflow;
+ } @else {
+ @warn "The clearfix method #{$method} is unkown";
+ @include clearfix-micro;
+ }
+}
diff --git a/release/pui-v1.9.1/oocss/_listWhitespace.scss b/release/pui-v1.9.1/oocss/_listWhitespace.scss
new file mode 100644
index 000000000..f6a430bb9
--- /dev/null
+++ b/release/pui-v1.9.1/oocss/_listWhitespace.scss
@@ -0,0 +1,87 @@
+/**
+* @name List
+* @desc Basic list with no bullets and no margins
+* @author
+* @tested
+* @requires
+*/
+
+$list-whitespace-keys: (l margin, a '', v -top -bottom, h -left -right);
+@function list-expand-whitespace-key($k) {
+ @each $pair in $list-whitespace-keys {
+ $short: nth($pair, 1);
+ $long: nth($pair, 2);
+ // v and h need to pass in 2 parameters
+ @if (length($pair) == 3) {
+ $long: (nth($pair, 2) nth($pair, 3))
+ }
+ @if $short == $k {
+ @return $long;
+ }
+ }
+ @warn "Couldn't expand #{$k}";
+ @return $k;
+}
+
+/*
+ * Define your own spacing classes for lists
+ *
+ * @param $units - specific spacing units you want to use. Must go from small to large
+ * e.g. @include ooListWhitespace((5px,10px,20px));
+ *
+ */
+
+@mixin ooListWhitespace($sizes: (5px, 10px, 20px)) {
+//for now assume this list is always ascending
+/* build list spacing exceptions */
+ $sizes: join(0, $sizes);
+ $size-names: ();
+ @if (length($sizes) == 1) {
+ $size-names: (n);
+ @warn "One spacing class isn't usually enough. Typically you should choose at least three.";
+ } @else if (length($sizes) == 2) {
+ $size-names: (n, s);
+ @warn "Two spacing classes isn't usually enough. Typically you should choose at least three.";
+ } @else if (length($sizes) == 3) {
+ $size-names: (n, s, m);
+ } @else if (length($sizes) == 4) {
+ $size-names: (n, s, m, l);
+ } @else if (length($sizes) == 5) {
+ $size-names: (n, s, m, l, xl);
+ } @else if (length($sizes) < 5){
+ $size-names: (n, xs, s, m, l, xl);
+ @warn "No more than five spacing classes are supported, typically you want to have three.";
+ }
+
+ $types: (l);
+ $locations: (v, h);
+ @each $location in $locations {
+ @each $size-name in $size-names {
+ @each $type in $types {
+ .#{$type}#{$location}#{$size-name} > li {
+ //get returned list of locations. Can't assign to variable as it turns into 1 item in the list, not multiple items
+ @each $whitespace-location in list-expand-whitespace-key($location) {
+ #{list-expand-whitespace-key($type)}#{$whitespace-location}: nth($sizes, index($size-names, $size-name)) !important;
+ }
+ }
+ }
+ }
+ }
+ ul[class*="lh"] > li:last-child{
+ margin-right: 0 !important;
+ }
+
+ ul[class*="lh"] > li{
+ margin-left: 0 !important;
+ }
+
+ ul[class*="lv"] > li:last-child{
+ margin-bottom: 0 !important;
+ }
+
+ ul[class*="lv"] > li{
+ margin-top: 0 !important;
+ }
+}
+
+
diff --git a/release/pui-v1.9.1/oocss/_whitespace.scss b/release/pui-v1.9.1/oocss/_whitespace.scss
new file mode 100644
index 000000000..3d72394be
--- /dev/null
+++ b/release/pui-v1.9.1/oocss/_whitespace.scss
@@ -0,0 +1,122 @@
+/**
+* @desc Create spacing classes and default spacing.
+* @name Whitespace
+* @author Fiona
+* @tested Safari, Chrome, Firefox, IE7-9
+* @requires _variables.scss
+*/
+
+$debugSpacing: false;
+
+/* ==========================================================================
+ Default spacing
+ ========================================================================== */
+
+%baseSpacing {
+ margin-top: $baseSpacing;
+ margin-bottom: $baseSpacing;
+}
+
+table {
+ h1, h2, h3, h4, h5, h6, p, ul, ol, dl, blockquote, .media, pre {
+ margin-top: 0;
+ margin-bottom: 0;
+ }
+}
+
+/* *
+ * debug default spacing
+ * set $debug-spacing to true to visualize spacing and positioning
+ */
+@if $debugSpacing {
+ h1, h2, h3, h4, h5, h6, ul, ol, dl, p, blockquote, .media, pre, .data {
+ outline: 1px solid aqua;
+ }
+ .media {
+ outline: 1px solid magenta;
+ }
+ :first-child {
+ outline: 1px solid yellow;
+ }
+ :last-child {
+ outline: 1px solid green;
+ }
+}
+
+/* ==========================================================================
+ Spacing helpers
+ ========================================================================== */
+
+/**
+ * Spacing helpers
+ * Should be used to modify the default spacing between objects (not between nodes of the same object)
+ * Please use judiciously. You want to be using defaults most of the time, these are exceptions!
+ *
+ *
+ * p,m padding,margin
+ * a,t,r,b,l,h,v all,top,right,bottom,left,horizontal,vertical
+ * s,m,l,n small(5px),medium(10px),large(20px),none(0px)
+ */
+
+$whitespace-keys: (p padding, m margin, a '', v -top -bottom, h -left -right, t -top, r -right, b -bottom, l -left);
+@function expand-whitespace-key($k) {
+ @each $pair in $whitespace-keys {
+ $short: nth($pair, 1);
+ $long: nth($pair, 2);
+ // v and h need to pass in 2 parameters
+ @if (length($pair) == 3) {
+ $long: (nth($pair, 2) nth($pair, 3))
+ }
+ @if $short == $k {
+ @return $long;
+ }
+ }
+ @warn "Couldn't expand #{$k}";
+ @return $k;
+}
+
+/*
+ * Can define your own spacing units, or calculate the units based on how many spacing sizes you want
+ *
+ * @param $units - specific spacing units you want to use. Must go from small to large
+ * e.g. @include whitespace((5px,10px,20px));
+ *
+ * @param $sizes - how many sizes you want. Calculate sizes based on line-height
+ * e.g. @include whitespace((), 4);
+ *
+ */
+@mixin whitespace($units: (), $sizes: 4) {
+ $tShirtSizes: (n,s,m,l,xl,xxl,xxxl,xxxxl);
+ $types: (p,m);
+ $locations: (a, v, h, t, r, b, l);
+ $fontHeight: ($baseFontSize/1px) * $baseLineHeight;
+//calculate font height
+
+//if user didn't define their own spacing units
+ @if length($units) == 0 {
+ @for $i from 1 through $sizes {
+ $unit: (round($fontHeight/$i))+px;
+ //calculate unit base on fraction of font height
+ $units: join($unit, $units);
+ }
+ }
+ $units: join(0, $units);
+
+// @debug $units;
+
+ @for $i from 1 through length($units) {
+
+ $tShirtSize: nth($tShirtSizes, $i);
+
+ @each $location in $locations {
+ @each $type in $types {
+ .#{$type}#{$location}#{$tShirtSize} {
+ @each $whitespace-location in expand-whitespace-key($location) {
+ #{expand-whitespace-key($type)}#{$whitespace-location}: nth($units, $i) !important;
+ }
+ }
+ }
+ }
+ }
+}
+
diff --git a/release/pui-v1.9.1/pane.html b/release/pui-v1.9.1/pane.html
new file mode 100644
index 000000000..79b5e7e89
--- /dev/null
+++ b/release/pui-v1.9.1/pane.html
@@ -0,0 +1,21 @@
+
+
+
+ a brand new styleguide: <%= title %>
+ h1.title 42px
+
+h1 31px
+
+h2 25px
+
+h3 20px
+
+h4 18px
+
+h5 16px
+
+h6 13px
+
+base font size 16px
+
+small text 14px
+
+extra small text 12px
+```
+
+
+
+ Separating code and visual semantics
+
+
+ Sometimes you may need to use a heading which has different visual and code semantics.
+ You can accomplish this by combining classes with elements
+ (classes take visual precedence over elements in this case).
+
+
I am a h1!
+
+ I am a h2!
+```
+
+If it's not a heading but you need similar visual treatment you can add just the class to any element.
+
+
+
+ Use headings when possible since they add semantic value.
+
+
Heading level 2 on a div
+```
+
+*/
+h1, .h1, h2, .h2, h3, .h3 {
+ margin-top: 20px;
+ margin-bottom: 10px; }
+
+h4, .h4, h5, .h5, h6, .h6 {
+ margin-top: 10px;
+ margin-bottom: 10px; }
+
+@media all and (max-width: 768px) {
+ h1, .h1, h2, .h2, h3, .h3 {
+ margin-top: 15px;
+ margin-bottom: 10px; }
+ h4, .h4, h5, .h5, h6, .h6 {
+ margin-top: 10px;
+ margin-bottom: 10px; } }
+
+h1, .h1 {
+ font-weight: 400; }
+
+h2, .h2 {
+ font-weight: 400; }
+
+h3, .h3 {
+ font-weight: 400; }
+
+h4, .h4 {
+ font-weight: 400; }
+
+h5, .h5 {
+ font-weight: 400; }
+
+h6, .h6 {
+ font-weight: 400; }
+
+small, .type-sm {
+ font-size: 14px; }
+
+.type-xs, .type-terms {
+ font-size: 12px; }
+
+.title {
+ font-size: 42px; }
+
+/*doc
+---
+title: Emphasis Modifiers
+name: type_modifiers
+parent: type
+---
+
+Type emphasis modifiers can be used on any type element.
+
+```html_example_table
+Really Important
+
+ I mean reeeeeeeeeeeally
+
+```
+
+Here's a table of all the emphasis modifier classes.
+
+```html_example_table
+Low emphasis
+
+Default emphasis
+
+High emphasis
+
+Maximum emphasis
+
+Emphasis alternate
+```
+
+*/
+.em-low {
+ font-weight: 200 !important; }
+
+.em-default {
+ font-weight: 400 !important; }
+
+.em-high {
+ font-weight: 600 !important; }
+
+.em-max {
+ font-weight: 900 !important; }
+
+.em-alt {
+ text-transform: uppercase !important; }
+
+/*doc
+---
+title: Colors
+name: type_colors
+parent: type
+---
+
+You can apply color to any text with the color classes.
+
+```html_example_table
+I'm a brand color!
+```
+
+Here's a table of all the color classes.
+
+
+
+ Type inverse
+ Type inverse
+ .type-inverse
+
+
+ Type neutral 1
+ Type neutral 1
+ .type-neutral-1
+
+
+ Type neutral 1
+ Type neutral 1
+ .type-neutral-1
+
+
+ Type neutral 2
+ Type neutral 2
+ .type-neutral-2
+
+
+ Type neutral 3
+ Type neutral 3
+ .type-neutral-3
+
+
+ Type neutral 4
+ Type neutral 4
+ .type-neutral-4
+
+
+ Type neutral 5
+ Type neutral 5
+ .type-neutral-5
+
+
+ Type neutral 6
+ Type neutral 6
+ .type-neutral-6
+
+
+ Type neutral 7
+ Type neutral 7
+ .type-neutral-7
+
+
+ Type neutral 8
+ Type neutral 8
+ .type-neutral-8
+
+
+ Type neutral 9
+ Type neutral 9
+ .type-neutral-9
+
+
+ Type neutral 10
+ Type neutral 10
+ .type-neutral-10
+
+
+ Type neutral 11
+ Type neutral 11
+ .type-neutral-11
+
+
+ Type dark 1
+ Type dark 1
+ .type-dark-1
+
+
+ Type dark 2
+ Type dark 2
+ .type-dark-2
+
+
+ Type dark 3
+ Type dark 3
+ .type-dark-3
+
+
+ Type accent 1
+ Type accent 1
+ .type-accent-1
+
+
+ Type accent 2
+ Type accent 2
+ .type-accent-2
+
+
+ Type accent 3
+ Type accent 3
+ .type-accent-3
+
+
+ Type accent 4
+ Type accent 4
+ .type-accent-4
+
+
+ Type accent 5
+ Type accent 5
+ .type-accent-5
+
+
+ Type brand 1
+ Type brand 1
+ .type-brand-1
+
+
+ Type brand 2
+ Type brand 2
+ .type-brand-2
+
+
+ Type brand 3
+ Type brand 3
+ .type-brand-3
+
+
+ Type brand 4
+ Type brand 4
+ .type-brand-4
+
+
+ Type brand 5
+ Type brand 5
+ .type-brand-5
+
+
+ Type error 1
+ Type error 1
+ .type-error-1
+
+
+ Type error 2
+ Type error 2
+ .type-error-2
+
+
+ Type error 3
+ Type error 3
+ .type-error-3
+
+
+ Type error 4
+ Type error 4
+ .type-error-4
+
+
+ Type success 1
+ Type success 1
+ .type-success-1
+
+
+ Type success 2
+ Type success 2
+ .type-success-2
+
+
+ Type warn 1
+ Type warn 1
+ .type-warn-1
+
+
+ Type warn 2
+ Type warn 2
+ .type-warn-2
+
+
+ Type warn 3
+ Type warn 3
+ .type-warn-3
+
+
+
+*/
+.type-neutral-1 {
+ color: #282828 !important; }
+
+.type-neutral-2 {
+ color: #424242 !important; }
+
+.type-neutral-3 {
+ color: #686868 !important; }
+
+.type-neutral-4 {
+ color: #8d8e8e !important; }
+
+.type-neutral-5 {
+ color: #b4b4b4 !important; }
+
+.type-neutral-6 {
+ color: #c3c5c7 !important; }
+
+.type-neutral-7 {
+ color: #d4d9d9 !important; }
+
+.type-neutral-8 {
+ color: #e0e4e5 !important; }
+
+.type-neutral-9 {
+ color: #ecefef !important; }
+
+.type-neutral-10 {
+ color: #F8F8F8 !important; }
+
+.type-neutral-11 {
+ color: white !important; }
+
+.type-dark-1 {
+ color: #243640 !important; }
+
+.type-dark-2 {
+ color: #3f484f !important; }
+
+.type-dark-3 {
+ color: #525c63 !important; }
+
+.type-brand-1 {
+ color: #025a53 !important; }
+
+.type-brand-2 {
+ color: #00776d !important; }
+
+.type-brand-3 {
+ color: #00a79d !important; }
+
+.type-brand-4 {
+ color: #92d0c0 !important; }
+
+.type-brand-5 {
+ color: #71ffda !important; }
+
+.type-accent-1 {
+ color: #1a739e !important; }
+
+.type-accent-2 {
+ color: #2185c5 !important; }
+
+.type-accent-3 {
+ color: #49a8d5 !important; }
+
+.type-accent-4 {
+ color: #a7c9e0 !important; }
+
+.type-accent-5 {
+ color: #c3f4ff !important; }
+
+.type-error-1 {
+ color: #b31612 !important; }
+
+.type-error-2 {
+ color: #eb3d46 !important; }
+
+.type-error-3 {
+ color: #ff434c !important; }
+
+.type-error-4 {
+ color: #febfc1 !important; }
+
+.type-warn-1 {
+ color: #B59033 !important; }
+
+.type-warn-2 {
+ color: #F1C148 !important; }
+
+.type-warn-3 {
+ color: #F9F3C3 !important; }
+
+.type-success-1 {
+ color: #165450 !important; }
+
+.type-success-2 {
+ color: #AFD79B !important; }
+
+.type-inverse {
+ color: #e0e4e5 !important; }
+
+a:hover.type-inverse {
+ color: #025a53 !important; }
+
+.error-color {
+ color: #ff434c !important; }
+
+/*doc
+---
+title: Typography
+name: type_react
+category:
+ - React Beta
+---
+We have three type systems. Which one you choose depends on your product.
+
+* Marketing sites should use the largest styles, for example `A Top Level Heading `
+* Most sites will use our default headings, for example `A Top Level Heading `
+* Rarely, sites will need a smaller type scale, for example `A Top Level Heading `
+
+*/
+/*doc
+---
+title: Default
+name: 01_type_default_react
+parent: type_react
+---
+
+```react_example_table
+h1 31px
+
+h2 25px
+
+h3 20px
+
+h4 18px
+
+h5 16px
+
+h6 13px
+```
+
+*/
+/*doc
+---
+title: Alternate
+name: 02_type_alt_react
+parent: type_react
+---
+
+
+```react_example_table
+This is an H1
+
+This is an H2
+
+This is an H3
+
+This is an H4
+
+This is an H5
+
+This is an H6
+```
+*/
+/*doc
+---
+title: Marketing
+name: 03_type_marketing_react
+parent: type_react
+---
+
+```react_example_table
+This is an h1
+
+This is an h2
+
+This is an h3
+
+This is an h4
+
+This is an h5
+
+This is an h6
+```
+
+*/
+/*doc
+---
+title: Custom
+name: 04_type_custom_react
+parent: type_react
+---
+
+Usually, you want to use the provided headings. If your mock doesn't exactly match, you should try the normal headings,
+and see if it still looks ok. If it doesn't (this should be rare!) you can use our custom type generator.
+
+You may want to wrap this in a custom reusable React component rather than calling it directly.
+
+```react_example
+This is a custom h1
+```
+
+*/
+/* ==========================================================================
+ Browser support
+ ========================================================================== */
+/* Typography
+ ========================================================================== */
+/* Grid
+ ========================================================================== */
+/* Code examples
+ ========================================================================== */
+/*doc
+---
+title: Alerts
+name: alert
+categories:
+ - Objects
+ - All
+---
+
+Alerts are used to display flash messages to the user. When using alerts with simple one-line
+text, wrap the text in a `` with `.em-high`.
+
+```html_example
+
+```
+
+Alerts are also used to bring important notes to a user's attention. If the content of your alert
+is a little more complicated, we would recommend using headings coupled with the content.
+
+```html_example
+
+
You should know...
+
There are some things you should note. Just in case you didn't figure it out already.
+
+
+
Important Link
+
+ It is very important that you
+ click here
+
+
+
+
+
Click the 'X' over there------>
+
success
+
+info
+
+warning
+
+error
+```
+
+*/
+/*doc
+---
+title: Dismissable
+name: alerts_dismissable_react
+parent: alerts_react
+---
+
+Add the `dismissable` property to add a close button to the alert.
+
+```react_example_table
+success
+```
+
+If you want a callback to be called when the close button is
+clicked, set the `dismissable` property to that callback.
+
+```jsx_example
+var callback = function() {
+ alert('Dismissed!');
+};
+```
+
+```react_example_table
+with callback
+```
+
+*/
+/*doc
+---
+title: Alerts with Icons
+name: alerts_icon_react
+parent: alerts_react
+---
+
+If you want an icon to be displayed, set the `withIcon` property.
+
+```react_example_table
+success
+
+info
+
+warning
+
+error
+```
+
+Here's a dismissable alert with an icon
+
+```react_example_table
+warning
+```
+*/
+/*doc
+---
+title: Alignment
+name: alignment
+categories:
+ - Utilities
+ - All
+---
+
+The following classes can be used to for horizontal alignment.
+
+```html_example_table
+
+ .txt-l
+
+
+
+ .txt-c
+
+
+
+ .txt-r
+
+```
+
+On `display: inline` and `display: table-cell` elements,
+the following classes can be used to for vertical alignment.
+
+```html_example
+
+
+
+ .txt-t
+
+
+ .txt-m
+
+
+ .txt-b
+
+
+ Distillery trust fund Neutra fingerstache plaid messenger bag.
+ Try-hard health goth PBR Helvetica hashtag. Try-hard narwhal letterpress,
+ crucifix selfies trust fund swag mustache quinoa chambray iPhone.
+
+
+
+```
+
+If you need to vertically align an element that does not fit into those display types,
+take a look at [vertical alignment][vertical_align].
+
+*/
+.txt-c, table .txt-c, table tr .txt-c, table tr td.txt-c {
+ text-align: center !important; }
+
+.txt-l, table .txt-l, table tr .txt-l, table tr td.txt-l {
+ text-align: left !important; }
+
+.txt-r, table .txt-r, table tr .txt-r, table tr td.txt-r {
+ text-align: right !important; }
+
+.txt-t, table .txt-t, table tr .txt-t, table tr td.txt-t, table tr th.txt-t {
+ vertical-align: top !important; }
+
+.txt-b, table .txt-b, table tr .txt-b, table tr td.txt-b, table tr th.txt-b {
+ vertical-align: bottom !important; }
+
+.txt-m, table .txt-m, table tr .txt-m, table tr td.txt-m, table tr th.txt-m {
+ vertical-align: middle !important; }
+
+/*doc
+---
+title: Alignment
+name: table_alignment
+parent: table
+---
+
+See the [alignment component][alignment] for classes to use for table text alignment.
+
+*/
+/* horizontal alignment */
+/* vertical alignment */
+
+/* ==========================================================================
+ Browser support
+ ========================================================================== */
+/* Typography
+ ========================================================================== */
+/* Grid
+ ========================================================================== */
+/* Code examples
+ ========================================================================== */
+/*doc
+---
+title: Avatars
+name: avatar
+categories:
+ - Elements
+ - All
+---
+
+Regular avatars are expected to by 100px by 100px.
+
+
+```html_example
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+There are four different kinds of links you can use to connect related content.
+In most cases (unless the designer specifically asks for another type of link)
+you should choose the default link.
+
+Link | Class | Description
+-------------------------------------------------------------------------------------------------------------- | ---------------------------- | -----------
+default link | `link-text` | Important links
+lowlight link | `link-text link-lowlight` | Less important links
+lowlight link alternate | `link-text link-lowlight-alt` | Less important links
+inverse link | `link-text link-inverse` | I go on a non-white background
+
+```html_example
+Here's a less important link
+```
+
+*/
+a {
+ -webkit-transition: all 300ms ease-out;
+ transition: all 300ms ease-out; }
+ a:hover, a:focus {
+ cursor: pointer;
+ text-decoration: none; }
+ a.link-text:not(.link-lowlight):hover {
+ text-decoration: underline; }
+
+.link-lowlight {
+ font-weight: 700;
+ color: #a7c9e0; }
+ .link-lowlight:hover {
+ color: #2185c5; }
+
+.link-lowlight-alt {
+ color: #8d8e8e; }
+ .link-lowlight-alt:hover {
+ color: #1a739e; }
+
+.link-inverse {
+ color: #49a8d5; }
+ .link-inverse:hover {
+ color: #a7c9e0; }
+
+/*pending
+---
+title: Gentle Scroll Links
+name: gentle-scroll
+categories:
+ - Utilities
+ - Objects
+ - All
+---
+
+If you want to gently scroll from one part of the page to another, you'll need to add
+a `data-behavior: GentleScroll` to the trigger element as well as an `href` for the
+id of the target it will scroll to.
+
+```html_example
+Scroll Trigger
+```
+
+It can scroll to anything, in this case, we'll use a text input.
+
+```html_example
+Add Stuff
+
+Add Stuff
+
+Add Stuff
+
+Add Stuff
+
+Add Stuff
+
+Add Stuff
+
+Add Stuff
+
+Add Stuff
+
+Add Stuff
+
+Add Stuff
+```
+*/
+.fa-h1 {
+ font-size: 31px !important;
+ line-height: 1.5; }
+
+.fa-h2 {
+ font-size: 25px !important;
+ line-height: 1.5; }
+
+.fa-h3 {
+ font-size: 20px !important;
+ line-height: 1.5; }
+
+.fa-h4 {
+ font-size: 18px !important;
+ line-height: 1.5; }
+
+.fa-h5 {
+ font-size: 16px !important;
+ line-height: 1.5; }
+
+.fa-h6 {
+ font-size: 13px !important;
+ line-height: 1.5; }
+
+.fa-title {
+ font-size: 42px !important; }
+
+.fa-sm {
+ font-size: 14px !important; }
+
+.fa-xs {
+ font-size: 12px !important; }
+
+.icon-control {
+ font-size: 22px; }
+
+/*doc
+---
+title: Iconography
+name: iconography_react
+categories:
+ - React Beta
+---
+
+We use [Font Awesome](http://fortawesome.github.io/Font-Awesome/icons/).
+Specify the icon by changing the name. The name is the font-awesome class sans the `fa-`.
+To spin the icon, add `spin` to the Icon.
+
+```react_example_table
+
+
+
Full bleed background image
+
+
+
+
Full bleed background image
+
+
` or an `` element:
+
+```html_example_table
+Button
+
+ Link
+```
+
+If your button is actually a link to another page, please use the
+`` element, while if your button performs an action, such as submitting
+a form or triggering some javascript event, then use a `` element.
+
+*/
+/*doc
+---
+title: Full Width
+name: button_full_width
+parent: button
+---
+
+There is an additional modifier that will make the button take the
+full width of the container. It may be used with the any of the button
+size and style modifiers.
+
+Create block level buttons - those that span the full width of a parent - by adding `.btn-block`.
+
+```html_example
+Full width button
+```
+
+*/
+.btn {
+ font-weight: 900;
+ padding: 5px 15px; }
+ .btn.disabled, .btn[disabled], fieldset[disabled] .btn {
+ cursor: not-allowed;
+ pointer-events: none;
+ box-shadow: 0 3px 0 #000000;
+ box-shadow: 0 3px 0 rgba(0, 0, 0, 0.14); }
+
+/*doc
+---
+title: Styles
+name: button_styles
+parent: button
+---
+
+Button | Disabled | Class | Description
+------------------------------------------------------------------ | -------------------------------------------------------------------------- | ----------------------- | -----------
+Default |Default | `btn btn-default` | This is what buttons look like, this is the go to button style.
+Default alternate |Default alternate | `btn btn-default-alt` | This is what buttons look like, this is the go to button style (on white backgrounds).
+Primary |Primary | `btn btn-primary` | Use this button as the primary call to action
+Lowlight |Lowlight | `btn btn-lowlight` | Use this button for other actions, like cancel/dismiss
+Delete |Delete | `btn btn-danger` | This button is for delete actions, these actions should also have a confirmation dialog
+Highlight |Highlight | `btn btn-highlight` | Use this button for other important actions, e.g. restarting apps
+Highlight alternate |Highlight alternate | `btn btn-highlight-alt` | Use this button for other important actions, e.g. marketing call to actions
+*/
+.btn-default {
+ color: #2185c5;
+ background-color: #FFFFFF;
+ background-color: rgba(255, 255, 255, 0.4);
+ border: none;
+ -webkit-transition: all 300ms ease-out;
+ transition: all 300ms ease-out; }
+ .btn-default:hover, .btn-default:focus, .btn-default:active, .btn-default.active {
+ color: #2185c5;
+ background-color: white;
+ outline: none;
+ border-color: none; }
+ .open .btn-default.dropdown-toggle {
+ color: #2185c5;
+ background-color: white; }
+ .btn-default:active, .btn-default.active {
+ background-image: none; }
+ .open .btn-default.dropdown-toggle {
+ background-image: none; }
+ .btn-default.disabled, .btn-default.disabled:hover, .btn-default.disabled:focus, .btn-default.disabled:active, .btn-default.disabled.active, .btn-default[disabled], .btn-default[disabled]:hover, .btn-default[disabled]:focus, .btn-default[disabled]:active, .btn-default[disabled].active, fieldset[disabled] .btn-default, fieldset[disabled] .btn-default:hover, fieldset[disabled] .btn-default:focus, fieldset[disabled] .btn-default:active, fieldset[disabled] .btn-default.active {
+ background-color: #ecefef;
+ color: #b4b4b4;
+ border-color: none; }
+
+.btn-default-alt {
+ color: #2185c5;
+ background-color: white;
+ border: 1px solid #000000;
+ border: 1px solid rgba(0, 0, 0, 0.15);
+ -webkit-transition: all 300ms ease-out;
+ transition: all 300ms ease-out;
+ box-shadow: 0 3px 0 #000000;
+ box-shadow: 0 3px 0 rgba(0, 0, 0, 0.07); }
+ .btn-default-alt:hover, .btn-default-alt:focus, .btn-default-alt:active, .btn-default-alt.active {
+ color: #2185c5;
+ background-color: white;
+ outline: none;
+ border-color: 1px solid #000000;
+ border-color: 1px solid rgba(0, 0, 0, 0.15); }
+ .open .btn-default-alt.dropdown-toggle {
+ color: #2185c5;
+ background-color: white; }
+ .btn-default-alt:active, .btn-default-alt.active {
+ background-image: none; }
+ .open .btn-default-alt.dropdown-toggle {
+ background-image: none; }
+ .btn-default-alt.disabled, .btn-default-alt.disabled:hover, .btn-default-alt.disabled:focus, .btn-default-alt.disabled:active, .btn-default-alt.disabled.active, .btn-default-alt[disabled], .btn-default-alt[disabled]:hover, .btn-default-alt[disabled]:focus, .btn-default-alt[disabled]:active, .btn-default-alt[disabled].active, fieldset[disabled] .btn-default-alt, fieldset[disabled] .btn-default-alt:hover, fieldset[disabled] .btn-default-alt:focus, fieldset[disabled] .btn-default-alt:active, fieldset[disabled] .btn-default-alt.active {
+ background-color: #ecefef;
+ color: #b4b4b4;
+ border-color: 1px solid #000000;
+ border-color: 1px solid rgba(0, 0, 0, 0.15); }
+ .btn-default-alt:hover, .btn-default-alt:focus, .btn-default-alt:active, .btn-default-alt.active {
+ box-shadow: 0 3px 0 #000000;
+ box-shadow: 0 3px 0 rgba(0, 0, 0, 0.14); }
+
+.btn-primary {
+ color: #2185c5;
+ background-color: white;
+ border: none;
+ -webkit-transition: all 300ms ease-out;
+ transition: all 300ms ease-out;
+ box-shadow: 0 3px 0 #000000;
+ box-shadow: 0 3px 0 rgba(0, 0, 0, 0.07); }
+ .btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active {
+ color: #2185c5;
+ background-color: white;
+ outline: none;
+ border-color: none; }
+ .open .btn-primary.dropdown-toggle {
+ color: #2185c5;
+ background-color: white; }
+ .btn-primary:active, .btn-primary.active {
+ background-image: none; }
+ .open .btn-primary.dropdown-toggle {
+ background-image: none; }
+ .btn-primary.disabled, .btn-primary.disabled:hover, .btn-primary.disabled:focus, .btn-primary.disabled:active, .btn-primary.disabled.active, .btn-primary[disabled], .btn-primary[disabled]:hover, .btn-primary[disabled]:focus, .btn-primary[disabled]:active, .btn-primary[disabled].active, fieldset[disabled] .btn-primary, fieldset[disabled] .btn-primary:hover, fieldset[disabled] .btn-primary:focus, fieldset[disabled] .btn-primary:active, fieldset[disabled] .btn-primary.active {
+ background-color: #ecefef;
+ color: #b4b4b4;
+ border-color: none; }
+ .btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active {
+ box-shadow: 0 3px 0 #000000;
+ box-shadow: 0 3px 0 rgba(0, 0, 0, 0.14); }
+
+.btn-highlight {
+ color: white;
+ background-color: #2185c5;
+ border: none;
+ -webkit-transition: all 300ms ease-out;
+ transition: all 300ms ease-out;
+ box-shadow: 0 3px 0 #000000;
+ box-shadow: 0 3px 0 rgba(0, 0, 0, 0.07); }
+ .btn-highlight:hover, .btn-highlight:focus, .btn-highlight:active, .btn-highlight.active {
+ color: white;
+ background-color: #1a739e;
+ outline: none;
+ border-color: none; }
+ .open .btn-highlight.dropdown-toggle {
+ color: white;
+ background-color: #1a739e; }
+ .btn-highlight:active, .btn-highlight.active {
+ background-image: none; }
+ .open .btn-highlight.dropdown-toggle {
+ background-image: none; }
+ .btn-highlight.disabled, .btn-highlight.disabled:hover, .btn-highlight.disabled:focus, .btn-highlight.disabled:active, .btn-highlight.disabled.active, .btn-highlight[disabled], .btn-highlight[disabled]:hover, .btn-highlight[disabled]:focus, .btn-highlight[disabled]:active, .btn-highlight[disabled].active, fieldset[disabled] .btn-highlight, fieldset[disabled] .btn-highlight:hover, fieldset[disabled] .btn-highlight:focus, fieldset[disabled] .btn-highlight:active, fieldset[disabled] .btn-highlight.active {
+ background-color: #ecefef;
+ color: #b4b4b4;
+ border-color: none; }
+ .btn-highlight:hover, .btn-highlight:focus, .btn-highlight:active, .btn-highlight.active {
+ box-shadow: 0 3px 0 #000000;
+ box-shadow: 0 3px 0 rgba(0, 0, 0, 0.14); }
+
+.btn-highlight-alt {
+ color: white;
+ background-color: #00a79d;
+ border: none;
+ -webkit-transition: all 300ms ease-out;
+ transition: all 300ms ease-out;
+ box-shadow: 0 3px 0 #000000;
+ box-shadow: 0 3px 0 rgba(0, 0, 0, 0.07); }
+ .btn-highlight-alt:hover, .btn-highlight-alt:focus, .btn-highlight-alt:active, .btn-highlight-alt.active {
+ color: white;
+ background-color: #00776d;
+ outline: none;
+ border-color: none; }
+ .open .btn-highlight-alt.dropdown-toggle {
+ color: white;
+ background-color: #00776d; }
+ .btn-highlight-alt:active, .btn-highlight-alt.active {
+ background-image: none; }
+ .open .btn-highlight-alt.dropdown-toggle {
+ background-image: none; }
+ .btn-highlight-alt.disabled, .btn-highlight-alt.disabled:hover, .btn-highlight-alt.disabled:focus, .btn-highlight-alt.disabled:active, .btn-highlight-alt.disabled.active, .btn-highlight-alt[disabled], .btn-highlight-alt[disabled]:hover, .btn-highlight-alt[disabled]:focus, .btn-highlight-alt[disabled]:active, .btn-highlight-alt[disabled].active, fieldset[disabled] .btn-highlight-alt, fieldset[disabled] .btn-highlight-alt:hover, fieldset[disabled] .btn-highlight-alt:focus, fieldset[disabled] .btn-highlight-alt:active, fieldset[disabled] .btn-highlight-alt.active {
+ background-color: #ecefef;
+ color: #b4b4b4;
+ border-color: none; }
+ .btn-highlight-alt:hover, .btn-highlight-alt:focus, .btn-highlight-alt:active, .btn-highlight-alt.active {
+ box-shadow: 0 3px 0 #000000;
+ box-shadow: 0 3px 0 rgba(0, 0, 0, 0.14); }
+
+.btn-lowlight {
+ color: #686868;
+ background-color: transparent;
+ border: none;
+ -webkit-transition: all 300ms ease-out;
+ transition: all 300ms ease-out; }
+ .btn-lowlight:hover, .btn-lowlight:focus, .btn-lowlight:active, .btn-lowlight.active {
+ color: #686868;
+ background-color: #FFFFFF;
+ background-color: rgba(255, 255, 255, 0.6);
+ outline: none;
+ border-color: none; }
+ .open .btn-lowlight.dropdown-toggle {
+ color: #686868;
+ background-color: #FFFFFF;
+ background-color: rgba(255, 255, 255, 0.6); }
+ .btn-lowlight:active, .btn-lowlight.active {
+ background-image: none; }
+ .open .btn-lowlight.dropdown-toggle {
+ background-image: none; }
+ .btn-lowlight.disabled, .btn-lowlight.disabled:hover, .btn-lowlight.disabled:focus, .btn-lowlight.disabled:active, .btn-lowlight.disabled.active, .btn-lowlight[disabled], .btn-lowlight[disabled]:hover, .btn-lowlight[disabled]:focus, .btn-lowlight[disabled]:active, .btn-lowlight[disabled].active, fieldset[disabled] .btn-lowlight, fieldset[disabled] .btn-lowlight:hover, fieldset[disabled] .btn-lowlight:focus, fieldset[disabled] .btn-lowlight:active, fieldset[disabled] .btn-lowlight.active {
+ background-color: #ecefef;
+ color: #b4b4b4;
+ border-color: none; }
+
+.btn-danger {
+ color: white;
+ background-color: #ff434c;
+ border: none;
+ -webkit-transition: all 300ms ease-out;
+ transition: all 300ms ease-out;
+ box-shadow: 0 3px 0 #000000;
+ box-shadow: 0 3px 0 rgba(0, 0, 0, 0.07); }
+ .btn-danger:hover, .btn-danger:focus, .btn-danger:active, .btn-danger.active {
+ color: white;
+ background-color: #eb3d46;
+ outline: none;
+ border-color: none; }
+ .open .btn-danger.dropdown-toggle {
+ color: white;
+ background-color: #eb3d46; }
+ .btn-danger:active, .btn-danger.active {
+ background-image: none; }
+ .open .btn-danger.dropdown-toggle {
+ background-image: none; }
+ .btn-danger.disabled, .btn-danger.disabled:hover, .btn-danger.disabled:focus, .btn-danger.disabled:active, .btn-danger.disabled.active, .btn-danger[disabled], .btn-danger[disabled]:hover, .btn-danger[disabled]:focus, .btn-danger[disabled]:active, .btn-danger[disabled].active, fieldset[disabled] .btn-danger, fieldset[disabled] .btn-danger:hover, fieldset[disabled] .btn-danger:focus, fieldset[disabled] .btn-danger:active, fieldset[disabled] .btn-danger.active {
+ background-color: #ecefef;
+ color: #b4b4b4;
+ border-color: none; }
+ .btn-danger:hover, .btn-danger:focus, .btn-danger:active, .btn-danger.active {
+ box-shadow: 0 3px 0 #000000;
+ box-shadow: 0 3px 0 rgba(0, 0, 0, 0.14); }
+
+/*doc
+---
+title: Sizes
+name: button_sizes
+parent: button
+---
+
+There are two sizes for buttons: Large and default. Simply apply the
+size modifier class for the desired size.
+
+```html_example_table
+Large
+
+Default
+```
+
+*/
+.btn-lg {
+ padding: 10px 26px;
+ font-size: 19px;
+ line-height: 1.33;
+ border-radius: 3px; }
+
+/*doc
+---
+title: Buttons
+name: button_react
+categories:
+ - React Beta
+---
+
+Buttons use the button tag by default. If you'd like a link rather than a button, simply add an `href` attribute.
+
+```react_example_table
+
+ Default
+
+```
+
+To make a button large, set the `large` property to true.
+
+```react_example_table
+
+ Big Button
+
+```
+
+To make a button full-width, set the `block` property to true.
+
+```react_example
+
+ Danger Zone
+
+```
+
+Specific button types.
+
+```react_example_table
+
+ Default
+
+
+
+ Default alternate
+
+
+
+ Primary
+
+
+
+ Lowlight
+
+
+
+ Danger
+
+
+
+ Highlight
+
+
+
+ Highlight alternate
+
+```
+
+The base button renderer. You won't really interact with this directly.
+
+```react_example_table
+
+ I'm a button
+
+```
+*/
+/* ==========================================================================
+ Browser support
+ ========================================================================== */
+/* Typography
+ ========================================================================== */
+/* Grid
+ ========================================================================== */
+/* Code examples
+ ========================================================================== */
+/*doc
+---
+title: Code
+name: code
+categories:
+ - Objects
+ - All
+---
+
+This is your basic unstyled code sample:
+
+```html_example
+class Foo
+ def bar
+ puts 'hi'
+ end
+endclass Foo
+ def bar
+ puts 'hi'
+ end
+endclass Foo
+ def bar
+ puts 'hi'
+ end
+
+ def bar
+ puts 'hi'
+ end
+
+ def bar
+ puts 'hi'
+ end
+
+ def bar
+ puts 'hi'
+ end
+
+ def bar
+ puts 'hi'
+ end
+
+ def bar
+ puts 'hi'
+ end
+
+ def bar
+ puts 'hi'
+ end
+endclass Foo
+ def bar
+ puts 'hi'
+ end
+endThis is an example of a paragraph with an inline code snippet within it.
+```
+
+*/
+/*doc
+---
+title: Inline Dark
+name: code_inline_dark
+parent: code
+---
+
+```html_example
+This is an example of a paragraph with a dark inline code snippet within it.
+```
+
+*/
+.inline-dark {
+ background-color: #243640;
+ border-radius: 3px;
+ color: #F1C148; }
+
+/*doc
+---
+title: Terminal Window
+name: code_terminal_window
+parent: code
+---
+
+Alternate CSS
+
+```html_example
+
+
class Foo
+ def bar
+ puts 'hi'
+ end
+end
+
+class Bar
+ def bar
+ puts 'hi'
+ end
+end
+
+class Baz
+ def bar
+ puts 'hi'
+ end
+end
+
+class Bop
+ def bar
+ puts 'hi'
+ end
+end
+
+
+ Expand me
+
+
+ Collapse me
+
+
+
+ Look at this content.
+
+```
+
+*/
+/*doc
+---
+title: Sizes
+name: accordion_sizes
+parent: accordion
+---
+
+
+
+ Deprecation warning
+
+
+ The large accordion is deprecated. All accordions should be the default size.
+
+
+
+
+
+
My fancy application
+
+
+
+
+
+ This content should hide and show when the trigger is clicked.
+
+
+
+
+
+
+
My fancy application
+
+
+
+
+
+ This content should hide and show when the trigger is clicked.
+
+
+
+
+
+
+ This content should hide and show when the trigger is clicked.
+
+
+
+
+
+
+ This content should hide and show when the trigger is clicked.
+
+
+
+
+
+
+ This content should hide and show when the trigger is clicked.
+
+
+
+ Panel 1 content
+ Panel 1 content
+ Panel 1 content
+ Panel 1 content
+ Panel 1 content
+ Panel 1 content
+ Panel 1 content
+ Panel 1 content
+ Panel 1 content
+ Panel 1 content
+
+```
+*/
+/*doc
+---
+title: Arrows
+name: arrow_collapse_react
+parent: collapse_react
+---
+
+This is a basic collapse with an arrow icon in the clickable region.
+
+```react_example
+
+ Content!
+ Content!
+ Content!
+ Content!
+ Content!
+
+```
+*/
+/*doc
+---
+title: Alt
+name: alt_collapse_react
+parent: collapse_react
+---
+
+This is a basic collapse with an +/- icon in the clickable region.
+
+```react_example
+
+ Content!
+ Content!
+ Content!
+ Content!
+ Content!
+
+```
+*/
+/*doc
+---
+title: Adding Dividers
+name: collapse_dividers_react
+parent: collapse_react
+---
+
+To add a divider between the clickable region and the expanded content region,
+simply set the `divider` property to be true.
+
+```react_example
+
+ Content!
+ Content!
+ Content!
+ Content!
+ Content!
+
+```
+*/
+
+/* ==========================================================================
+ Browser support
+ ========================================================================== */
+/* Typography
+ ========================================================================== */
+/* Grid
+ ========================================================================== */
+/* Code examples
+ ========================================================================== */
+/*doc
+---
+title: Colors
+name: color
+categories:
+ - Elements
+ - Utilities
+ - All
+---
+
+Our color pallet is composed of several different colors. At any given point in captures the current
+evolution of our design and likely includes old and new colors. Whenever possible, evolve the old
+colors rather than adding new ones.
+
+
+
+ Sass variables should only be used in variables.css.scss.
+
+
+ They should never be used directly when building components, because it makes
+ it very hard to change the values later if you can't tell how they might have been used.
+ You should define your own variables that use these colors in variables.css.scss.
+
+
+
+
+
+
+
+ $gray-1
+ .bg-neutral-1
+ .type-neutral-1
+
+
+
+
+
+
+
+
+
+
+ $gray-2
+ .bg-neutral-2
+ .type-neutral-2
+
+
+
+
+
+
+
+
+
+ $gray-3
+ .bg-neutral-3
+ .type-neutral-3
+
+
+
+
+
+
+
+
+
+ $gray-4
+ .bg-neutral-4
+ .type-neutral-4
+
+
+
+
+
+
+
+
+
+ $gray-5
+ .bg-neutral-5
+ .type-neutral-5
+
+
+
+
+
+
+
+
+
+ $gray-6
+ .bg-neutral-6
+ .type-neutral-6
+
+
+
+
+
+
+
+
+
+ $gray-7
+ .bg-neutral-7
+ .type-neutral-7
+
+
+
+
+
+
+
+
+
+ $gray-8
+ .bg-neutral-8
+ .type-neutral-8
+
+
+
+
+
+
+
+
+
+ $gray-9
+ .bg-neutral-9
+ .type-neutral-9
+
+
+
+
+
+
+
+
+
+ $gray-10
+ .bg-neutral-10
+ .type-neutral-10
+
+
+
+
+
+
+
+
+
+ $gray-11
+ .bg-neutral-11
+ .type-neutral-11
+
+
+
+
+
+
+
+
+
+
+ $dark-1
+ .bg-dark-1
+ .type-dark-1
+
+
+
+
+
+
+
+
+
+ $dark-2
+ .bg-dark-2
+ .type-dark-2
+
+
+
+
+
+
+
+
+
+ $dark-3
+ .bg-dark-3
+ .type-dark-3
+
+
+
+
+
+
+
+
+
+
+ $brand-1
+ .bg-brand-1
+ .type-brand-1
+
+
+
+
+
+
+
+
+
+ $brand-2
+ .bg-brand-2
+ .type-brand-2
+
+
+
+
+
+
+
+
+
+ $brand-3
+ .bg-brand-3
+ .type-brand-3
+
+
+
+
+
+
+
+
+
+ $brand-4
+ .bg-brand-4
+ .type-brand-4
+
+
+
+
+
+
+
+
+
+ $brand-5
+ .bg-brand-5
+ .type-brand-5
+
+
+
+
+
+
+
+
+
+
+ $accent-1
+ .bg-accent-1
+ .type-accent-1
+
+
+
+
+
+
+
+
+
+ $accent-2
+ .bg-accent-2
+ .type-accent-2
+
+
+
+
+
+
+
+
+
+ $accent-3
+ .bg-accent-3
+ .type-accent-3
+
+
+
+
+
+
+
+
+
+ $accent-4
+ .bg-accent-4
+ .type-accent-4
+
+
+
+
+
+
+
+
+
+ $accent-5
+ .bg-accent-5
+ .type-accent-5
+
+
+
+
+
+
+
+
+
+
+ $error-1
+ .bg-error-1
+ .type-error-1
+
+
+
+
+
+
+
+
+
+ $error-2
+ .bg-error-2
+ .type-error-2
+
+
+
+
+
+
+
+
+
+ $error-3
+ .bg-error-3
+ .type-error-3
+
+
+
+
+
+
+
+
+
+ $error-4
+ .bg-error-4
+ .type-error-4
+
+
+
+
+
+
+
+
+
+
+ $warn-1
+ .bg-warn-1
+ .type-warn-1
+
+
+
+
+
+
+
+
+
+ $warn-2
+ .bg-warn-2
+ .type-warn-2
+
+
+
+
+
+
+
+
+
+ $warn-3
+ .bg-warn-3
+ .type-warn-3
+
+
+
+
+
+
+
+
+
+
+ $success-1
+ .bg-success-1
+ .type-success-1
+
+
+
+
+
+
+
+
+
+ $success-2
+ .bg-success-2
+ .type-success-2
+
+
+
+
+
+
+
+
+
+ APP
+
+ App Name
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Deprecation warning
+
+
+ This component is deprecated.
+
+
+
+
+
+
+ Instances
+
+
+
+ 1
+
+
+
+
+
+ 4
+
+
+
+
+ 6
+
+
+
+
+ 8
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ $ cf scale my_app -i 1
+
+
+
+
+ I'm viewing...
+
Edit
+
+
+
}
+
+ I'm viewing...
+
Edit
+
+
+
+
+ Deprecation warning
+
+
+ This component is deprecated.
+
+
On
+
+
+
+
+
+
+
+
+
+Off
+
+
+Loading
+
+```
+
+*/
+@-webkit-keyframes loadingFade {
+ 0% {
+ opacity: 0.2; }
+
+ 50% {
+ opacity: 1; }
+
+ 100% {
+ opacity: 0.2; } }
+
+@keyframes loadingFade {
+ 0% {
+ opacity: 0.2; }
+
+ 50% {
+ opacity: 1; }
+
+ 100% {
+ opacity: 0.2; } }
+
+.traffic-lights {
+ margin: 0;
+ line-height: 1.3em; }
+ .traffic-lights i {
+ margin-right: 7px; }
+ .traffic-lights .fa {
+ font-size: 12px; }
+ .traffic-lights .off i {
+ opacity: 0.4; }
+ .traffic-lights .green-light i {
+ -webkit-transition: opacity 1500ms ease-out;
+ transition: opacity 1500ms ease-out;
+ color: #00a79d; }
+ .traffic-lights .gray-light i {
+ -webkit-transition: opacity 1500ms ease-out;
+ transition: opacity 1500ms ease-out;
+ color: #8d8e8e; }
+ .traffic-lights .red-light i {
+ -webkit-transition: opacity 1500ms ease-out;
+ transition: opacity 1500ms ease-out;
+ color: #ff434c; }
+ .traffic-lights .loading-red {
+ -webkit-animation: loadingFade 2s ease-in-out infinite;
+ animation: loadingFade 2s ease-in-out infinite; }
+ .traffic-lights .loading-green {
+ -webkit-animation: loadingFade 2s ease-in-out infinite;
+ animation: loadingFade 2s ease-in-out infinite; }
+ .traffic-lights .loading-gray {
+ -webkit-animation: loadingFade 2s ease-in-out 1s infinite;
+ animation: loadingFade 2s ease-in-out 1s infinite; }
+
+/*pending
+---
+title: No JavaScript
+name: no_js
+categories:
+ - Utilities
+ - All
+---
+### Javascript
+
+Try disabling js and rendering this page.
+
+```html_example
+Won't show if browser doesn't support JS.
+```
+
+*/
+.no-js .invisible-no-js {
+ visibility: hidden; }
+
+/*doc
+---
+title: Dividers
+name: divider
+categories:
+ - Elements
+ - All
+---
+
+Dividers draw horizontal lines between different content groupings.
+
+```html_example
+
+
+
+
+
+
+```
+*/
+/* ==========================================================================
+ Browser support
+ ========================================================================== */
+/* Typography
+ ========================================================================== */
+/* Grid
+ ========================================================================== */
+/* Code examples
+ ========================================================================== */
+/*doc
+---
+title: Dropdowns
+name: dropdown
+categories:
+ - Objects
+ - All
+---
+
+Dropdowns are menus that can be triggered by buttons.
+
+This is the basic bootstrap dropdown.
+
+```html_example
+
+
+ Button Dropdown
+
+
+
+```
+
+
+
Dropdowns with dividers
+
+ If you want to add a divider between items in the dropdown,
+ add a `li.divider` between list items.
+
+
+
+ Link Dropdown
+
+
+
+```
+
+
+
No links as dropdowns
+
+ Instead of using an a tag as a dropdown,
+ use a button.btn.btn-link.
+
+
+
+ dropdown trigger
+
+
+
+```
+
+*/
+/*doc
+---
+title: Dropdowns
+name: dropdown_react
+categories:
+ - React Beta
+---
+
+This is the basic bootstrap dropdown:
+
+```react_example_table
+
+ Booyeah
+ Adorable
+
+```
+
+Here are all the different dropdown styles:
+
+```react_example_table
+
+ Adorable
+
+
+
+ Adorable
+
+
+
+ Adorable
+
+
+
+ Adorable
+
+
+
+ Adorable
+
+
+
+ Adorable
+
+
+
+ Adorable
+
+```
+
+If you want to customize the dropdown button, you can add modifier classes to it
+using the `buttonClassName` property:
+
+```react_example
+
+ Booyeah
+ Adorable
+
+```
+
+*/
+.dropdown-menu {
+ box-shadow: 0 2px 2px #000000;
+ box-shadow: 0 2px 2px rgba(0, 0, 0, 0.15); }
+
+/*doc
+---
+title: Notifications
+name: dropdown_notification
+parent: dropdown
+---
+
+This is a notification dropdown with no notifications.
+
+```html_example
+
+```
+
+This is a notification dropdown with notifications.
+
+```html_example
+
+```
+
+This is a notification dropdown with alerts.
+
+```html_example
+
+
+```
+
+*/
+.dropdown-notifications-none {
+ width: 200px;
+ text-align: center;
+ padding: 20px; }
+ .dropdown-notifications-none .fa {
+ font-size: 42px;
+ padding-bottom: 7px; }
+
+.dropdown-notifications-badge {
+ position: absolute;
+ border-radius: 1000em;
+ background-color: #00a79d;
+ text-align: center;
+ color: white;
+ font-size: 0.75em;
+ padding: 0 4px;
+ height: 14px;
+ line-height: 14px;
+ top: 6px;
+ right: 9px; }
+
+.dropdown-notifications-alert {
+ position: absolute;
+ top: -6px;
+ right: 6px; }
+
+.dropdown-notifications .caret {
+ display: none; }
+
+.dropdown-notifications-list li a {
+ padding-bottom: 10px; }
+.dropdown-notifications-list li:last-child a {
+ padding-bottom: 0; }
+
+/*doc
+---
+title: Notifications
+name: notifications_react
+categories:
+ - React Beta
+---
+
+Here's an example if there are no notifications:
+
+```react_example_table
+New
+
+
+ Notification
+ Click for Cute Gif
+
+
+
+```
+*/
+/*doc
+---
+title: Alerts
+name: alert_notifications_react
+parent: notifications_react
+---
+
+Here's an example if there are no alerts:
+
+```react_example_table
+
+
+
+ WARNING
+ Click for Cute Gif
+
+
+
+```
+
+
+*/
+/* Transition mixins */
+/* Button Mixins */
+/*doc
+---
+title: Ellipsis
+name: ellipsis
+categories:
+ - Utilities
+ - All
+---
+
+The type `.type-ellipsis-1-line` adds ellipsis to text when there is too much. Combine it with `.col-md-*` classes to get the width you want.
+
+
+
+ Deprecation warning
+
+
+ The 2- and 3-line ellipsis are deprecated.
+
+
+ Lorem ipsum dolor sit amet, consectetur adipisicing 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. 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.
+
+
+
+ Lorem ipsum dolor sit amet, consectetur adipisicing 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. 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.
+
+
+
+ Lorem ipsum dolor sit amet, consectetur adipisicing 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. 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.
+
+```
+
+
+
+
+ Multi-line ellipsis only works on webkit.
+
+
4-by-3
+
+```
+
+*/
+/* ==========================================================================
+ Browser support
+ ========================================================================== */
+/* Typography
+ ========================================================================== */
+/* Grid
+ ========================================================================== */
+/* Code examples
+ ========================================================================== */
+/* Transition mixins */
+/* Button Mixins */
+/*doc
+---
+title: Introduction
+name: 00_form_introduction
+categories:
+ - Forms
+---
+
+Individual form controls automatically receive some global styling.
+All textual `
+
+ The .has-success class can only be used on inputs that have a text-box.
+
+
+ Option 1
+ Option 2
+
+
+
+
+
+
+ Hi
+
+```
+
+*/
+.form-control:focus {
+ box-shadow: none; }
+
+/*doc
+---
+title: Static Controls
+name: form_static_control
+categories:
+ - Forms
+ - All
+---
+
+When you need to place plain text next to a form label within a form,
+use the `.form-control-static` class on a ``.
+
+Here's an example in a horizontal form:
+
+```html_example
+
+```
+
+Here's an example in a vertical form:
+
+```html_example
+
+```
+
+*/
+.help-inline {
+ display: block;
+ text-align: left;
+ color: #febfc1;
+ padding: 5px 0 0 16px;
+ text-transform: capitalize; }
+
+.input-sm {
+ height: 27px;
+ padding: 2px 10px;
+ font-size: 14px;
+ line-height: 1.5;
+ border-radius: 3px; }
+
+select.input-sm {
+ height: 27px;
+ line-height: 27px; }
+
+textarea.input-sm, select[multiple].input-sm {
+ height: auto; }
+
+.input-lg {
+ height: 48px;
+ padding: 10px 26px;
+ font-size: 19px;
+ line-height: 1.33;
+ border-radius: 3px; }
+
+select.input-lg {
+ height: 48px;
+ line-height: 48px; }
+
+textarea.input-lg, select[multiple].input-lg {
+ height: auto; }
+
+p.form-control-static {
+ color: #686868; }
+
+/*doc
+---
+title: Autoselect Text Inputs
+name: form_autoselect_text_input
+categories:
+ - Forms
+ - All
+---
+
+This form is used to show information that a user may wish to copy and paste somewhere.
+
+```html_example
+
+ Toggle Switch
+
+```
+
+*/
+.toggle-switch {
+ position: absolute;
+ visibility: hidden; }
+ .toggle-switch + label {
+ position: relative;
+ display: block;
+ background-color: #d4d9d9;
+ -webkit-transition: background 0.4s;
+ transition: background 0.4s;
+ cursor: pointer;
+ outline: none;
+ text-indent: -99999px; }
+ .toggle-switch + label:after {
+ position: absolute;
+ top: 4px;
+ left: 4px;
+ bottom: 4px;
+ display: block;
+ background-color: white;
+ -webkit-transition: margin 0.4s, background 0.4s;
+ transition: margin 0.4s, background 0.4s;
+ content: ""; }
+ .toggle-switch:checked + label {
+ background-color: #2185c5; }
+ .toggle-switch[disabled] + label {
+ opacity: 0.5;
+ filter: alpha(opacity=50); }
+ .toggle-switch.toggle-switch-lg + label {
+ width: 80px;
+ height: 40px;
+ border-radius: 40px; }
+ .toggle-switch.toggle-switch-lg + label:after {
+ width: 30px;
+ border-radius: 15px; }
+ .toggle-switch.toggle-switch-lg:checked + label:after {
+ margin-left: 42px; }
+
+/*pending
+---
+title: Focus Inputs
+name: form_focus_input
+categories:
+ - Forms
+ - All
+---
+
+Add the focus-input directive to an element that should be focused if the focus-input expression changes such that it evalutes as true.
+
+```html_example
+Focus input 1
+Focus input 2
+{item} )
+ });
+
+ return (
+
+ )
+ }
+});
+```
+
+```react_example
+
+ You could click this radio button
+ This is also a radio button
+
+```
+
+In this case, the `name` attached to `RadioGroup` will be applied to all of Radio children.
+
+Additionally, special behaviors can be added to the `onChange` event handler
+exposed by radio groups. In this example, additional form controls are displayed
+when the user selects the third radio button.
+
+Similar to the `name` property, the `onChange` handlers is passed down to all child components.
+
+```jsx_example
+var MyComponent = React.createClass({
+ getInitialState: function() { return {selection: null}; },
+
+ change: function(value) {
+ this.setState({selection: value});
+ },
+
+ render: function() {
+ return (
+
+ );
+ }
+});
+```
+
+```react_example
+
+ Pivotal ui (via bootstrap) includes a responsive, mobile first fluid grid system that
+ appropriately scales up to 24 columns as the device or viewport size increases.
+ To work with the system, you need to treat mobile as your default
+ and build more complex layouts up from there.
+
+
+*/
+/*doc
+---
+title: Introduction
+name: 01_grid_intro
+parent: grid
+---
+
+Grid systems are used for creating page layouts through a series of rows and columns that house your content.
+Here's how the bootstrap grid system works:
+
+* Rows must be placed within a `.container` for proper alignment and padding.
+
+* Use `.row` to create horizontal groups of columns.
+
+* Content should be placed within columns (e.g. `.col-sm-11`, `.col-lg-6`, etc.).
+Only columns may be immediate children of rows.
+
+Columns are defined by two properties:
+the breakpoint at which they start acting like columns,
+and their relative width (on a scale of 24) beginning at this breakpoint.
+For example:
+
+* A column with the class `.col-sm-11` will take up 100% of the container
+for devices with screen-width < 768px (the extra small breakpoint),
+and 11/24ths for devices ≥ 768px.
+
+* A column with the class `.col-lg-6` will take up 100% of the container
+for devices with < 1200px,
+and 1/4th (6/24ths) for devices ≥ 1200px.
+
+* 3 `.col-md-8` columns would fill a row for devices ≥ 992px.
+They would each take up their own row on devices < 992px.
+
+* Use the `.col-xs-*` classes to use a grid on mobile.
+
+Look to the [examples][04_grid_examples] for applying these principles to your code.
+*/
+/*doc
+---
+title: Media Queries
+name: 02_grid_media_queries
+parent: grid
+---
+
+We use the following media queries in our sass files to create the key breakpoints in our grid system.
+
+Name | Size | Variable Name
+--------- | -------------- | ------------------
+mobile | | no media query since this is the default in bootstrap
+x-small | 480px | `$screen-xs-min`
+small | 768px | `$screen-sm-min`
+medium | 992px | `$screen-md-min`
+large | 1200px | `$screen-lg-min`
+x-large | 1800px | `$screen-xl-min`
+
+*/
+/*doc
+---
+title: Grid Sizes
+name: 03_grid_sizes
+parent: grid
+---
+
+See how aspects of the bootstrap grid system work across multiple devices with a handy table.
+
+
+
+
+
+ extra small devices
+ phones (≤768px)
+
+
+ small devices
+ tablets (>768px)
+
+
+ medium devices
+ laptops (>992px)
+
+
+ large devices
+ desktops (>1200px)
+
+
+
+
+
+ grid behavior
+ horizontal at all times
+ collapsed to start, horizontal above breakpoints
+
+
+ container width
+ none (auto)
+ 750px
+ 970px
+ 1170px
+
+
+ class prefix
+ .col-xs-.col-sm-.col-md-.col-lg-
+
+ # of columns
+ 24
+
+
+ column width
+ auto
+ ~62px
+ ~81px
+ ~97px
+
+
+ gutter width
+ 30px (15px on each side of a column)
+
+
+ nestable
+ yes
+
+
+ offsets
+ yes
+
+
+ column ordering
+ yes
+
+
+
+
+*/
+/*doc
+---
+title: Examples
+name: 04_grid_examples
+parent: grid
+---
+
+Using a single set of `.col-md-*` grid classes,
+you can create a basic grid system that starts out stacked on mobile devices and tablet devices
+(the extra small to small range) before becoming horizontal on desktop (medium) devices.
+Place grid columns in any `.row`.
+
+
+
The .grid-show class in the examples is for demo purposes. Don't use it IRL.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+*/
+/*doc
+---
+title: "Example: Mobile and Desktop"
+name: 04_a_grid_mobile_and_desktop_react
+parent: 04_grid_examples_react
+---
+
+Don't want your columns to simply stack in smaller devices?
+Use the extra small and medium device grid classes by adding `.col-xs-*` `.col-md-*` to your columns.
+See the example below for a better idea of how it all works.
+
+```react_example
+
+
+
+
+
+
+
+
+
+
+```
+
+*/
+/*doc
+---
+title: Gutter Sizes
+name: 04_grid_gutter_sizes_react
+parent: grid_react
+---
+
+```react_example
+
+
+
+
+
+
+
+
+
+
+```
+*/
+/*pending
+---
+title: Responsive
+name: grid_responsive
+parent: grid
+---
+
+Having trouble debugging grids? You can also set `$grids-debug: true` in the `grids.css.scss` file.
+This will allow you to visualize the changes taking place at different device widths.
+
+*/
+/* ==========================================================================
+ Browser support
+ ========================================================================== */
+/* Typography
+ ========================================================================== */
+/* Grid
+ ========================================================================== */
+/* Code examples
+ ========================================================================== */
+/*doc
+---
+title: Hoverable
+name: hoverable
+categories:
+ - Utilities
+ - Objects
+ - All
+---
+
+This component is for showing hidden actions on hover.
+If you put this on an element then hovering on that parent element will show the hidden element.
+
+List example:
+
+This can be used with any kind of list but the list group style seems to fit this use case best.
+
+```html_example
+
+
+ List Item 1
+ Edit
+
+
+ List Item 2
+ Edit
+
+
+ List Item 3
+ Edit
+
+
+ Not hoverable
+
+
+```
+
+Table example:
+
+```html_example
+
+
+ Name
+
+
+
+ Row 1
+ Delete
+
+
+
+
+ Row 2
+ Delete
+
+
+
+
+ Row 3
+ Delete
+
+
+
+
+ Not hoverable
+
+
+
+```
+
+*/
+[hoverable]:hover, [hoverable].clicked {
+ background-color: #ecefef; }
+ [hoverable]:hover .hovered, [hoverable].clicked .hovered {
+ visibility: visible; }
+
+[hoverable] .hovered {
+ visibility: hidden;
+ float: right; }
+
+/*doc
+---
+title: Images
+name: image
+categories:
+ - Elements
+ - All
+---
+*/
+/*doc
+---
+title: Responsive
+name: image_responsive
+parent: image
+---
+
+Images can be made responsive-friendly via the addition of the `.img-responsive` class. This applies `max-width: 100%;` and `height: auto;` to the image so that it scales nicely to the parent element. See bootstrap 3 for further documentation of this feature.
+
+```html_example
+
+```
+
+*/
+/*doc
+---
+title: Responsive SVG
+name: image_responsive_svg
+parent: image
+---
+
+SVG can be made responsive-friendly via the addition of the `.svg-responsive` class on a
+wrapper div and the `.svg-content` class on the svg itself. You'll also need to to define
+the height to width ratio as an inline padding bottom style on the `.svg-responsive` element like so:
+
+```
+
+
+ ...
+
+
+```
+
+The `padding-bottom` should equal the **height divided by the width** of your specific svg.
+
+For more information about setting up your svg, read this article about [svg coordinates systems by Sara Soueidan](http://sarasoueidan.com/blog/svg-coordinate-systems/).
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
new
+```
+
+You can also place labels within HTML elements.
+It will be sized based on the element's font size and its font modifiers.
+
+```html_example_table
+I am a P.
+ new
+
+
+I am an H3.
+ new
+
+
+I am an H3 with an H5 modifier.
+ new
+
+```
+*/
+.label {
+ padding: 0.2em 0.6em;
+ border-radius: 3px;
+ text-transform: uppercase; }
+
+/*doc
+---
+title: Removable Labels
+name: removable_label
+parent: label
+---
+
+Removable labels are used as tags in an editable list. The user will either enter text or select content (i.e.: a dropdown item), and it will be styled as a removable label (most likely in a list). Developers who use these labels must implement the close functionality for when the user clicks the close button.
+
+```html_example
+Removable
+
+```
+*/
+.label-removable {
+ padding: 4px 7px;
+ border-radius: 3px;
+ background-color: #00a79d;
+ color: white;
+ font-weight: 600; }
+ .label-removable .close-btn {
+ margin-left: 15px;
+ color: #FFFFFF;
+ color: rgba(255, 255, 255, 0.6); }
+ .label-removable .close-btn:hover {
+ color: white;
+ text-decoration: none; }
+
+/*doc
+---
+title: Labels
+name: label_react
+categories:
+ - React Beta
+---
+
+Labels are a straightforward implementation of the [Label][label] style.
+
+Labels can be used on their own:
+
+```react_example
+yeah
+```
+Labels used within an element which already has font modifier styles will use the parents' styling. For example:
+
+```react_example
+
+ Now the label is in a typography component yeah
+
+```
+*/
+/* ==========================================================================
+ Browser support
+ ========================================================================== */
+/* Typography
+ ========================================================================== */
+/* Grid
+ ========================================================================== */
+/* Code examples
+ ========================================================================== */
+.list-group, .list-group-inverse {
+ margin-bottom: 20px;
+ padding-left: 0; }
+
+.list-group-item {
+ position: relative;
+ display: block;
+ padding: 10px 15px;
+ margin-bottom: -1px;
+ background-color: transparent;
+ border: 1px solid #ddd; }
+ .list-group-item:first-child {
+ border-top-right-radius: 0;
+ border-top-left-radius: 0; }
+ .list-group-item:last-child {
+ margin-bottom: 0;
+ border-bottom-right-radius: 0;
+ border-bottom-left-radius: 0; }
+
+a.list-group-item {
+ color: #555; }
+ a.list-group-item .list-group-item-heading {
+ color: #333; }
+ a.list-group-item:hover, a.list-group-item:focus {
+ text-decoration: none;
+ color: #555;
+ background-color: #f5f5f5; }
+
+.list-group-item.disabled, .list-group-item.disabled:hover, .list-group-item.disabled:focus {
+ background-color: #eeeeee;
+ color: #999999;
+ cursor: false; }
+ .list-group-item.disabled .list-group-item-heading, .list-group-item.disabled:hover .list-group-item-heading, .list-group-item.disabled:focus .list-group-item-heading {
+ color: inherit; }
+ .list-group-item.disabled .list-group-item-text, .list-group-item.disabled:hover .list-group-item-text, .list-group-item.disabled:focus .list-group-item-text {
+ color: #999999; }
+.list-group-item.active, .list-group-item.active:hover, .list-group-item.active:focus {
+ z-index: 2;
+ color: #fff;
+ background-color: #1b92cb;
+ border-color: #1b92cb; }
+ .list-group-item.active .list-group-item-heading, .list-group-item.active .list-group-item-heading > small, .list-group-item.active .list-group-item-heading > .small, .list-group-item.active:hover .list-group-item-heading, .list-group-item.active:hover .list-group-item-heading > small, .list-group-item.active:hover .list-group-item-heading > .small, .list-group-item.active:focus .list-group-item-heading, .list-group-item.active:focus .list-group-item-heading > small, .list-group-item.active:focus .list-group-item-heading > .small {
+ color: inherit; }
+ .list-group-item.active .list-group-item-text, .list-group-item.active:hover .list-group-item-text, .list-group-item.active:focus .list-group-item-text {
+ color: #bce3f6; }
+
+.list-group-item-success {
+ color: #d4d9d9;
+ background-color: #686868; }
+
+a.list-group-item-success {
+ color: #d4d9d9; }
+ a.list-group-item-success .list-group-item-heading {
+ color: inherit; }
+ a.list-group-item-success:hover, a.list-group-item-success:focus {
+ color: #d4d9d9;
+ background-color: #5b5b5b; }
+ a.list-group-item-success.active, a.list-group-item-success.active:hover, a.list-group-item-success.active:focus {
+ color: #fff;
+ background-color: #d4d9d9;
+ border-color: #d4d9d9; }
+
+.list-group-item-info {
+ color: #8e8837;
+ background-color: #e2df80; }
+
+a.list-group-item-info {
+ color: #8e8837; }
+ a.list-group-item-info .list-group-item-heading {
+ color: inherit; }
+ a.list-group-item-info:hover, a.list-group-item-info:focus {
+ color: #8e8837;
+ background-color: #ddda6b; }
+ a.list-group-item-info.active, a.list-group-item-info.active:hover, a.list-group-item-info.active:focus {
+ color: #fff;
+ background-color: #8e8837;
+ border-color: #8e8837; }
+
+.list-group-item-warning {
+ color: #B59033;
+ background-color: #F9F3C3; }
+
+a.list-group-item-warning {
+ color: #B59033; }
+ a.list-group-item-warning .list-group-item-heading {
+ color: inherit; }
+ a.list-group-item-warning:hover, a.list-group-item-warning:focus {
+ color: #B59033;
+ background-color: #f7eeac; }
+ a.list-group-item-warning.active, a.list-group-item-warning.active:hover, a.list-group-item-warning.active:focus {
+ color: #fff;
+ background-color: #B59033;
+ border-color: #B59033; }
+
+.list-group-item-danger {
+ color: #ff434c;
+ background-color: #febfc1; }
+
+a.list-group-item-danger {
+ color: #ff434c; }
+ a.list-group-item-danger .list-group-item-heading {
+ color: inherit; }
+ a.list-group-item-danger:hover, a.list-group-item-danger:focus {
+ color: #ff434c;
+ background-color: #fea6a9; }
+ a.list-group-item-danger.active, a.list-group-item-danger.active:hover, a.list-group-item-danger.active:focus {
+ color: #fff;
+ background-color: #ff434c;
+ border-color: #ff434c; }
+
+.list-group-item-heading {
+ margin-top: 0;
+ margin-bottom: 5px; }
+
+.list-group-item-text {
+ margin-bottom: 0;
+ line-height: 1.3; }
+
+/*
+ * clearfix used project wide to clear floats and create a new formatting context
+ * usage @include clearfix-me()
+ * $clearfix-method sets default method
+ */
+/**
+* @name List
+* @desc Basic list with no bullets and no margins
+* @author
+* @tested
+* @requires
+*/
+/*
+ * Define your own spacing classes for lists
+ *
+ * @param $units - specific spacing units you want to use. Must go from small to large
+ * e.g. @include ooListWhitespace((5px,10px,20px));
+ *
+ */
+/* Transition mixins */
+/* Button Mixins */
+/*doc
+---
+title: Lists
+name: list
+categories:
+ - Elements
+ - All
+---
+
+This section contains different list styles.
+*/
+/*pending
+---
+title: JS Lists
+name: lists_js
+categories:
+ - Objects
+ - All
+---
+
+This section contains different list behaviors. See [lists][list] to see different list styles.
+*/
+/*doc
+---
+title: Inline
+name: list_inline
+parent: list
+---
+
+An inline list is one of the three methods for laying out content (including grids and the media block).
+
+```html_example
+
+
+ feep
+
+
+ fop
+
+
+ meep
+
+
+```
+
+You can use inline lists to lay out elements. Here's an example of a header next to a button:
+
+```html_example
+
+```
+
+*/
+.list-unstyled, .list-cards, .list-timeline {
+ padding-left: 0;
+ list-style: none; }
+
+.list-inline, .list-inline-divider, .list-breadcrumb, .list-vertical-divider, .list-vertical-divider-2, .list-steps {
+ padding-left: 0;
+ list-style: none;
+ margin-left: -5px; }
+ .list-inline > li, .list-inline-divider > li, .list-breadcrumb > li, .list-vertical-divider > li, .list-vertical-divider-2 > li, .list-steps > li {
+ display: inline-block;
+ padding-left: 5px;
+ padding-right: 5px; }
+
+.list-inline, .list-inline-divider, .list-breadcrumb, .list-vertical-divider, .list-vertical-divider-2, .list-steps {
+ font-size: 0; }
+ .list-inline > li, .list-inline-divider > li, .list-breadcrumb > li, .list-vertical-divider > li, .list-vertical-divider-2 > li, .list-steps > li {
+ font-size: 16px; }
+
+/*doc
+---
+title: Ordered
+name: list_ordered
+parent: list
+---
+
+
+```html_example
+
+
+ feep
+
+
+ fop
+
+
+ meep
+
+
+```
+
+*/
+/*doc
+---
+title: Unordered
+name: list_unordered
+parent: list
+---
+
+```html_example
+
+
+ feep
+
+
+ fop
+
+
+ meep
+
+
+```
+
+*/
+.list-unordered {
+ padding-left: 0; }
+ .list-unordered > li {
+ margin-left: 17px; }
+
+/*doc
+---
+title: Unstyled
+name: list_unstyled
+parent: list
+---
+
+Places all list items on a single line with `display: inline-block;` and some light padding. The `.list-unstyled` class can be applied to either a `` or and ``.
+
+```html_example
+
+
+ feep
+
+
+ fop
+
+
+ meep
+
+
+```
+
+*/
+/*doc
+---
+title: Inline Divider
+name: list_inline_divider
+parent: list
+---
+
+Places all list items on a single line with `display: inline-block;` and some light padding. The `.list-inline-divider`
+also adds a simple gray border (add `.list-inline-divider-light` to make the border white).
+
+```html_example
+
+```
+
+Here's the same example on a dark background:
+
+```html_example
+
+```
+
+*/
+.list-inline-divider > li {
+ line-height: 1em; }
+ .list-inline-divider > li:not(:first-child) {
+ border-left: 1px solid #b4b4b4; }
+
+.list-inline-divider-light > li {
+ line-height: 1em; }
+ .list-inline-divider-light > li:not(:first-child) {
+ border-left: 1px solid #c3c5c7; }
+
+/*doc
+---
+title: Breadcrumb
+name: list_breadcrumb
+parent: list
+---
+
+The `.list-breadcrumb` can be used to provide additional page navigation.
+
+Breadcrumbs use their own monospace font-family.
+
+```html_example
+
+```
+*/
+.list-breadcrumb {
+ margin-bottom: 0;
+ font-family: "Consolas", "Menlo", "Monaco", "Lucida Console", "Liberation Mono", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New", monospace, serif; }
+ .list-breadcrumb > li {
+ font-size: 0;
+ padding-left: 0;
+ padding-right: 0; }
+ .list-breadcrumb > li a, .list-breadcrumb > li.current span {
+ font-size: 14px;
+ display: inline-block;
+ max-width: 200px;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ vertical-align: middle; }
+ .list-breadcrumb > li.current span {
+ color: #9faaad; }
+ .list-breadcrumb > li:before {
+ font-size: 16px;
+ color: #9faaad;
+ content: ">";
+ vertical-align: middle;
+ padding-right: 5px;
+ padding-left: 5px; }
+ .list-breadcrumb > li:first-child:before {
+ content: ""; }
+
+/*doc
+---
+title: Group
+name: list_group
+parent: list
+---
+
+Use this list when you need simple gray borders between items
+
+```html_example
+
+
+ item 1
+
+
+ item 2
+
+
+ item 3
+
+
+```
+
+Group lists are great for displaying lists of events
+Here's an example from Console:
+
+```html_example
+
+```
+*/
+/*doc
+---
+title: Group Inverse
+name: list_group_inverse
+parent: list
+---
+Use this list when you need simple gray borders between items on a dark background. It is very subtle.
+```html_example
+
+
+ item 1
+
+
+ item 2
+
+
+ item 3
+
+
+```
+*/
+.list-group-inverse > li {
+ border-color: #282828; }
+
+/*pending
+---
+title: Addable
+name: list_addable
+parent: lists_js
+---
+
+New elements fade in
+
+```html_example
+
+
+ item 1
+
+
+ item 2
+
+
+ item 3
+
+
+
+Add an item
+```
+
+
+*/
+.list-group, .list-group-inverse, .list-group > li, .list-group-inverse > li {
+ border-width: 1px 0; }
+
+.list-group-item {
+ padding-right: 5px; }
+ .list-group-item.new {
+ -webkit-animation: new-list-group-item-grow .3s cubic-bezier(0.895, 0.03, 0.685, 0.22) forwards, new-list-group-item-fade .5s ease-in .15s forwards;
+ -moz-animation: new-list-group-item-grow .3s cubic-bezier(0.895, 0.03, 0.685, 0.22) forwards, new-list-group-item-fade .5s ease-in .15s forwards; }
+
+@-webkit-keyframes new-list-group-item-fade {
+ 0% {
+ opacity: 0; }
+
+ 100% {
+ opacity: 1; } }
+
+@-webkit-keyframes new-list-group-item-grow {
+ 0% {
+ max-height: 0;
+ padding-top: 0px;
+ padding-bottom: 0px; }
+
+ 100% {
+ max-height: 100px;
+ padding-top: 10px;
+ padding-bottom: 10px; } }
+
+@keyframes new-list-group-item-fade {
+ from {
+ opacity: 0; }
+
+ to {
+ opacity: 1; } }
+
+@keyframes new-list-group-item-grow {
+ from {
+ max-height: 0;
+ padding: 0px 15px; }
+
+ to {
+ max-height: 100px;
+ padding: 10px 15px; } }
+
+.list-notitle li:first-child {
+ border-top: 0; }
+.list-notitle li:last-child {
+ border-bottom: 0; }
+
+/*doc
+---
+title: Event List
+name: list_event
+parent: console
+---
+
+This is a special list-group, with styles per-event for colors and icons.
+
+
+
+ Deprecation warning
+
+
+ This component is deprecated.
+ To create this component, use a list group .
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+*/
+.event-list .list-group-item {
+ padding-left: 0;
+ padding-right: 0; }
+.event-list .media-left {
+ padding-left: 0;
+ padding-right: 0; }
+.event-list .event-title {
+ margin-bottom: 2px;
+ color: #424242; }
+.event-list .event-user, .event-list .event-timestamp {
+ color: #8d8e8e;
+ font-size: 13px; }
+.event-list .event-icon {
+ font-family: 'FontAwesome';
+ font-size: 22px;
+ width: 90px;
+ text-align: center; }
+.event-list .started .event-icon:after {
+ color: #00a79d;
+ content: '\f04b'; }
+.event-list .stopped .event-icon:after {
+ color: #b4b4b4;
+ content: '\f04d'; }
+.event-list .updated .event-icon:after {
+ color: #00a79d;
+ content: '\f01b'; }
+.event-list .scaled .event-icon:after {
+ color: #00a79d;
+ content: '\f0e4'; }
+.event-list .crashed .event-icon:after {
+ color: #ff434c;
+ content: '\f06a'; }
+.event-list .created .event-icon:after {
+ color: #00a79d;
+ content: '\f135'; }
+.event-list .renamed .event-icon:after {
+ color: #00a79d;
+ content: '\f040'; }
+
+/*doc
+---
+title: Vertical Divider
+name: list_vertical_divider
+parent: list
+---
+
+Use this list when you need larger gray borders between
+items. It should be used in concert with grid column
+sizes when you want the items to take a particular width.
+
+We achieve equal height columns using the padding/margin hack,
+so we need an additional `.height-enforcer` element to get the
+right min-height.
+
+```html_example
+
+```
+
+```html_example
+
+```
+
+*/
+.list-vertical-divider, .list-vertical-divider-2 {
+ zoom: 1;
+ overflow: hidden; }
+ .list-vertical-divider:before, .list-vertical-divider-2:before, .list-vertical-divider:after, .list-vertical-divider-2:after {
+ content: " ";
+ display: table; }
+ .list-vertical-divider:after, .list-vertical-divider-2:after {
+ clear: both; }
+ .list-vertical-divider > li, .list-vertical-divider-2 > li {
+ border-left: 2px solid #ecefef;
+ padding-bottom: 9000px;
+ margin-bottom: -9000px; }
+ .list-vertical-divider > li:first-child, .list-vertical-divider-2 > li:first-child {
+ border-left: none; }
+ .list-vertical-divider > li .height-enforcer, .list-vertical-divider-2 > li .height-enforcer {
+ min-height: 130px; }
+
+.list-vertical-divider-2 {
+ margin-bottom: 40px; }
+ .list-vertical-divider-2 > li {
+ border-left: 1px solid #e0e4e5;
+ padding-left: 30px;
+ padding-right: 30px; }
+ .list-vertical-divider-2 > li:first-child {
+ padding-left: 30px; }
+
+/*doc
+---
+title: Steps
+name: list_steps
+parent: list
+---
+
+Use this list when you need to show the steps in a flow.
+
+```html_example
+
+
+ Sign up Account
+
+
+ Create Organization
+
+
+ Do other things
+
+
+ And more things
+
+
+```
+
+*/
+.list-steps > li {
+ font-size: 14px;
+ text-transform: uppercase;
+ color: #b4b4b4;
+ margin-right: 45px;
+ padding-left: 0;
+ margin-bottom: 5px;
+ counter-increment: list-steps;
+ font-weight: 600; }
+ .list-steps > li:before {
+ content: counter(list-steps);
+ display: block;
+ padding: 0px 7px;
+ margin-right: 4px;
+ text-align: center;
+ color: #b4b4b4;
+ display: inline-block;
+ border: 2px solid #b4b4b4;
+ border-radius: 30px; }
+ .list-steps > li.current {
+ color: #F8F8F8;
+ font-weight: 900; }
+ .list-steps > li.current:before {
+ color: #F8F8F8;
+ border-color: #F8F8F8; }
+
+/*doc
+---
+title: Checked
+name: list_checked
+parent: list
+---
+
+Replaces the default bullet image with the font awesome checkmark.
+
+```html_example
+
+
+ feep
+
+
+ fop
+
+
+ meep
+
+
+```
+
+*/
+.list-checked {
+ list-style: none;
+ padding-left: 20px; }
+ .list-checked > li:before {
+ font-family: 'FontAwesome';
+ content: '\f00c';
+ margin: 0 5px 0 -15px;
+ color: #00776d; }
+
+/* build list spacing exceptions */
+.lvn > li {
+ margin-top: 0 !important;
+ margin-bottom: 0 !important; }
+
+.lvs > li {
+ margin-top: 5px !important;
+ margin-bottom: 5px !important; }
+
+.lvm > li {
+ margin-top: 7px !important;
+ margin-bottom: 7px !important; }
+
+.lvl > li {
+ margin-top: 10px !important;
+ margin-bottom: 10px !important; }
+
+.lvxl > li {
+ margin-top: 20px !important;
+ margin-bottom: 20px !important; }
+
+.lhn > li {
+ margin-left: 0 !important;
+ margin-right: 0 !important; }
+
+.lhs > li {
+ margin-left: 5px !important;
+ margin-right: 5px !important; }
+
+.lhm > li {
+ margin-left: 7px !important;
+ margin-right: 7px !important; }
+
+.lhl > li {
+ margin-left: 10px !important;
+ margin-right: 10px !important; }
+
+.lhxl > li {
+ margin-left: 20px !important;
+ margin-right: 20px !important; }
+
+ul[class*="lh"] > li:last-child {
+ margin-right: 0 !important; }
+
+ul[class*="lh"] > li {
+ margin-left: 0 !important; }
+
+ul[class*="lv"] > li:last-child {
+ margin-bottom: 0 !important; }
+
+ul[class*="lv"] > li {
+ margin-top: 0 !important; }
+
+/*doc
+---
+title: Cards
+name: list_cards
+parent: list
+---
+
+As the browser width changes, list-cards fill in one after another. There are two card types, `type-card-1` and
+`type-card-2`. For this example, we've set both of them to stack on mobile sized screens.
+
+```html_example_table
+
+
+
+```
+
+You can specify the breakpoint in which the cards stack by using the `list-card-*` classes. If the breakpoint is not
+specified, the cards fill 100% of the `list-cards` width.
+
+
+List Card Breakpoints | Class Names
+--------------------- | ---------------
+extra-small | `.list-card-xs`
+small | `.list-card-sm`
+medium | `.list-card-md`
+large | `.list-card-lg`
+extra-large | `.list-card-xl`
+
+
+
The cards list should only be used in fully liquid layouts, otherwise grids are a better choice.
+
+
+ lorem ipsum 1
+
+
+ lorem ipsum 2
+
+
+ lorem ipsum 3
+
+
+ lorem ipsum 4
+
+
+ lorem ipsum 5
+
+
+ lorem ipsum 6
+
+
+ lorem ipsum 7
+
+
+ lorem ipsum 8
+
+
+```
+If you would like custom card dimensions, in your sass include the makeCard mixin, like so: `@include makeCard(height, width, name);`
+You can then access the class via `.list-card-name`.
+
+Clickable List Cards
+
+If you want your list cards to function as links (i.e. be clickable),
+wrap all the inner content in `a` with class `list-card-link`.
+
+```html_example
+
+```
+*/
+.list-cards {
+ zoom: 1; }
+ .list-cards:before, .list-cards:after {
+ content: " ";
+ display: table; }
+ .list-cards:after {
+ clear: both; }
+ .list-cards > li {
+ margin-bottom: 20px; }
+
+@media (min-width: 480px) {
+ .list-card-1.list-cards-xs > li {
+ width: 435px;
+ float: left;
+ margin-right: 20px; } }
+@media (min-width: 768px) {
+ .list-card-1.list-cards-sm > li {
+ width: 435px;
+ float: left;
+ margin-right: 20px; } }
+@media (min-width: 992px) {
+ .list-card-1.list-cards-md > li {
+ width: 435px;
+ float: left;
+ margin-right: 20px; } }
+@media (min-width: 1200px) {
+ .list-card-1.list-cards-lg > li {
+ width: 435px;
+ float: left;
+ margin-right: 20px; } }
+@media (min-width: 1800px) {
+ .list-card-1.list-cards-xl > li {
+ width: 435px;
+ float: left;
+ margin-right: 20px; } }
+.list-card-1 > li {
+ min-height: 126px; }
+ .list-card-1 > li a.list-cards-link, .list-card-1 > li a.list-card-link {
+ display: block;
+ min-height: 126px; }
+ .list-card-1 > li .list-card-wrapper {
+ min-height: 126px; }
+
+@media (min-width: 480px) {
+ .list-card-2.list-cards-xs > li {
+ width: 284px;
+ float: left;
+ margin-right: 20px; } }
+@media (min-width: 768px) {
+ .list-card-2.list-cards-sm > li {
+ width: 284px;
+ float: left;
+ margin-right: 20px; } }
+@media (min-width: 992px) {
+ .list-card-2.list-cards-md > li {
+ width: 284px;
+ float: left;
+ margin-right: 20px; } }
+@media (min-width: 1200px) {
+ .list-card-2.list-cards-lg > li {
+ width: 284px;
+ float: left;
+ margin-right: 20px; } }
+@media (min-width: 1800px) {
+ .list-card-2.list-cards-xl > li {
+ width: 284px;
+ float: left;
+ margin-right: 20px; } }
+.list-card-2 > li {
+ min-height: 196px; }
+ .list-card-2 > li a.list-cards-link, .list-card-2 > li a.list-card-link {
+ display: block;
+ min-height: 196px; }
+ .list-card-2 > li .list-card-wrapper {
+ min-height: 196px; }
+
+/*doc
+---
+title: Layout Lists
+name: layout_lists
+categories:
+ - Layout
+ - All
+---
+
+Sometimes you might want to use lists to lay out elements on the page.
+
+[Inline lists][list_inline] and [vertical divider lists][list_vertical_divider]
+are particularly useful when you don't know the width of the element you want to layout,
+or you want to vertically align it.
+
+Use [Card lists][list_cards] if you'd like to make a grid of vertically and horizontally aligned cards.
+
+*/
+/*doc
+---
+title: Lists
+name: list_react
+categories:
+ - React Beta
+---
+*/
+/*doc
+---
+title: Addable
+name: list_addable_react
+parent: list_react
+---
+
+Here's an example of how you might write an addable list component. Transitions are added to each list item through `componentWillEnter`.
+If you wish to save the new item in your database, you should do so in the `change` function, before setting state.
+
+```jsx_example
+var ReactTransitionGroup = React.addons.TransitionGroup;
+
+var AddableListItem = React.createClass({
+ componentWillEnter: function(done) {
+ this.$el = $(this.getDOMNode());
+ this.$el.addClass("new-enter");
+ done();
+ },
+
+ render: function(){
+ return (
+ {this.props.children}
+ );
+ }
+});
+
+var AddableList = React.createClass({
+ getInitialState: function() {
+ return {
+ items: ['one','two','three']
+ };
+ },
+
+ change: function() {
+ var newItems = this.state.items.concat([prompt('Enter some text')]);
+ this.setState({items: newItems});
+ },
+
+ render: function() {
+ var items = _.map(this.state.items, function(item, key) {
+ return (
+
+ {item}
+
+ );
+ });
+ return (
+
+
+ {items}
+
+ Click to Add Item
+
+ );
+ }
+});
+```
+
+```react_example
+
+ Item 1 Item 2 Item 3
+```
+*/
+/*doc
+---
+title: Cards
+name: list_cards_react
+parent: list_react
+---
+=D
+*/
+/*doc
+---
+title: Checked
+name: list_checked_react
+parent: list_react
+---
+
+```react_example
+
+ Item 1
+ Item 2
+ Item 3
+
+```
+
+*/
+/*doc
+---
+title: Group
+name: list_group_react
+parent: list_react
+---
+
+```react_example
+
+ Item 1
+ Item 2
+ Item 3
+
+```
+*/
+/*doc
+---
+title: Group Inverse
+name: list_group_inverse_react
+parent: list_react
+---
+
+```react_example
+
+ Item 1
+ Item 2
+ Item 3
+
+```
+
+*/
+/*doc
+---
+title: Inline
+name: list_inline_react
+parent: list_react
+---
+
+```react_example_table
+
+ Item 1
+ Item 2
+ Item 3
+
+```
+*/
+/*doc
+---
+title: Inline Divider
+name: list_inline_divider_react
+parent: list_react
+---
+
+```react_example_table
+
+ Item 1
+ Item 2
+ Item 3
+
+```
+
+*/
+/*doc
+---
+title: Ordered
+name: list_ordered_react
+parent: list_react
+---
+
+```react_example_table
+
+ Item 1
+ Item 2
+ Item 3
+
+```
+
+```react_example_table
+
+ Item 1
+ Item 2
+ Item 3
+
+```
+*/
+/*doc
+---
+title: Steps
+name: list_steps_react
+parent: list_react
+---
+
+```react_example
+
+ Item 1
+ Item 2
+ Item 3
+
+```
+*/
+/*doc
+---
+title: Unordered
+name: list_unordered_react
+parent: list_react
+---
+
+```react_example_table
+
+ feep
+ fop
+ meep
+
+```
+*/
+/*doc
+---
+title: Unstyled
+name: list_unstyled_react
+parent: list_react
+---
+
+```react_example_table
+
+ Item 1
+ Item 2
+ Item 3
+
+```
+
+*/
+/*doc
+---
+title: Vertical Divider
+name: list_vertical_divider_react
+parent: list_react
+---
+
+*/
+/*doc
+---
+title: Configuring Spacing
+name: list_spacing_react
+parent: list_react
+---
+
+List Spacing can be changed setting the size of the spacing property.
+
+|Options|Values | Pixels
+|-------|-------------|-------
+|`n` |none |0px
+|`s` |small |5px
+|`m` |medium |7px
+|`l` |large |10px
+|`xl` |extra large |21px
+
+```react_example
+
+ Item 1
+ Item 2
+ Item 3
+
+```
+
+```react_example
+
+ Item 1
+ Item 2
+ Item 3
+
+```
+
+*/
+/*doc
+---
+title: Draggable
+name: list_draggable_react
+parent: list_react
+---
+
+Creates a draggable list.
+
+The property `onDrop` is a callback when a drop event has completed. Use this
+if you need to make an API call to update the order of some elements.
+
+```jsx_example
+var draggableListDropCallback = function(data) {
+ alert('New item indices order: ' + data);
+};
+```
+
+```react_example
+
+
+ Get me out of here!
+
+
+
+ LOL
+
+
+
+ Can't stop
+
+
+```
+*/
+.list-draggable {
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none; }
+ .list-draggable .draggable-grip {
+ display: inline-block;
+ color: #e0e4e5; }
+ .list-draggable > li {
+ width: 100%; }
+ .list-draggable > li .draggable-item-content {
+ padding: 10px 10px 10px 0;
+ background: white; }
+ .list-draggable > li.hover {
+ cursor: move; }
+ .list-draggable > li.hover .draggable-grip {
+ color: #8d8e8e; }
+ .list-draggable > li.grabbed {
+ background-color: #ecefef; }
+ .list-draggable > li.grabbed * {
+ visibility: hidden; }
+ .list-draggable > li.grabbed .draggable-grip {
+ visibility: hidden; }
+
+/*doc
+---
+title: Timeline
+name: time_line
+parent: list
+categories:
+ - Elements
+ - All
+---
+
+A Timeline is a graphical representation of sequenced events. The Timeline list components are used to order list items by timestamp.
+
+We achieve equal width columns for the time stamp by using a display table hack, so we need an additional inline style on the first `list-timeline-date` to specify the desired width.
+
+```html_example
+
+
+ 1 day ago
+
+ java buildpack (offline) (2.5)
+ a minor release
+
+
+
+ 1 day ago
+
+ java buildpack (offline) (2.5)
+ a minor release
+
+
+
+ 1 day ago
+
+ java buildpack (offline) (2.5)
+ a minor release
+
+
+
+```
+*/
+.list-timeline {
+ display: table;
+ width: 100%; }
+
+.list-timeline-item {
+ display: table-row; }
+
+.list-timeline-date {
+ font-size: 14px;
+ color: #b4b4b4;
+ display: table-cell;
+ vertical-align: middle;
+ text-align: right;
+ padding-right: 26px; }
+
+.list-timeline-subtitle {
+ font-size: 14px;
+ color: #b4b4b4;
+ font-weight: 400;
+ display: block; }
+
+.list-timeline-title {
+ font-size: 14px;
+ color: #424242;
+ font-weight: 600;
+ display: table-cell;
+ vertical-align: middle;
+ position: relative;
+ padding: 10px 0 10px 26px; }
+ .list-timeline-title:before {
+ content: "";
+ display: block;
+ position: absolute;
+ width: 1px;
+ background: #e0e4e5;
+ top: 0;
+ left: 0;
+ z-index: 1;
+ top: 0;
+ bottom: 0; }
+ .list-timeline-title:after {
+ height: 20px;
+ width: 20px;
+ display: block;
+ content: "";
+ border: 2px solid #d4d9d9;
+ border-radius: 1000px;
+ background: white;
+ box-shadow: 0 0 0 2px white;
+ position: absolute;
+ left: -9px;
+ top: 50%;
+ z-index: 2;
+ transform: translatey(-50%);
+ -moz-transform: translatey(-50%);
+ -ms-transform: translatey(-50%);
+ -o-transform: translatey(-50%);
+ -webkit-transform: translatey(-50%); }
+
+/* ==========================================================================
+ Browser support
+ ========================================================================== */
+/* Typography
+ ========================================================================== */
+/* Grid
+ ========================================================================== */
+/* Code examples
+ ========================================================================== */
+/*doc
+---
+title: Media
+name: media
+categories:
+ - Layout
+ - All
+---
+
+The default media displays a media object (images, video, audio) to the left or right of a content block.
+
+```html_example
+
+
+
+```
+
+Wrap the image in a fixed-size `.image-container` to make sure the image isn't
+larger than the container
+
+```html_example
+
+```
+
+You can also nest media objects inside of each other (useful for comment threads or articles lists).
+
+```html_example
+
+```
+
+*/
+/*doc
+---
+title: Alignment
+name: media_alignment
+parent: media
+---
+
+The images or other media can be aligned top, middle, or bottom. The default is top aligned.
+
+```html_example
+
+
+
+
+
+```
+
+*/
+/*doc
+---
+title: Stackable
+name: media_stackable
+parent: media
+---
+
+
+You can also make the media block stack with grid columns.
+Media objects switch from being stacked on top to being floated left of the media body as the screen size gets larger.
+For example, `.media-stackable-xs` is stacked on screen sizes from 0-480px and then left floated on larger screens.
+
+```html_example
+
+
+
+
+
+
+
+```
+
+*/
+@media (max-width: 480px) {
+ .media.media-stackable-xs > .pull-left, .media.media-stackable-xs .media-left {
+ display: block;
+ float: none;
+ clear: both;
+ margin: 0 auto 10px auto !important; }
+ .media.media-stackable-xs > .pull-left .media-object, .media.media-stackable-xs .media-left .media-object {
+ margin-left: auto;
+ margin-right: auto; } }
+@media (max-width: 768px) {
+ .media.media-stackable-sm > .pull-left, .media.media-stackable-sm .media-left {
+ display: block;
+ float: none;
+ clear: both;
+ margin: 0 auto 10px auto !important; }
+ .media.media-stackable-sm > .pull-left .media-object, .media.media-stackable-sm .media-left .media-object {
+ margin-left: auto;
+ margin-right: auto; } }
+@media (max-width: 992px) {
+ .media.media-stackable-md > .pull-left, .media.media-stackable-md .media-left {
+ display: block;
+ float: none;
+ clear: both;
+ margin: 0 auto 10px auto !important; }
+ .media.media-stackable-md > .pull-left .media-object, .media.media-stackable-md .media-left .media-object {
+ margin-left: auto;
+ margin-right: auto; } }
+@media (max-width: 1200px) {
+ .media.media-stackable-lg > .pull-left, .media.media-stackable-lg .media-left {
+ display: block;
+ float: none;
+ clear: both;
+ margin: 0 auto 10px auto !important; }
+ .media.media-stackable-lg > .pull-left .media-object, .media.media-stackable-lg .media-left .media-object {
+ margin-left: auto;
+ margin-right: auto; } }
+.media .media-body {
+ width: 1000000px; }
+
+/*doc
+---
+title: Media
+name: media_react
+category:
+ - React Beta
+---
+
+## General media object modifiers
+
+Media Modifiers | Options | Description
+------------------- | ---------------------------------------------- | --------------------------------------------------------------------------
+`bodyAlignment` | top (default), "middle", "bottom" | Vertical alignment of the body (used for large images with small content next to it, usually centered)
+`stackSize ` | "xsmall", "small", "medium", "large" | At what breakpoint should the media object stack
+
+The images or other media can be aligned top, middle, or bottom. The default is top aligned.
+
+The base button renderer. You won't really interact with this directly.
+
+```jsx_example
+var mediaBasicImage =
+ left media
+
+
+
+ right media
+
+
+
+ left and right media
+
+```
+
+*/
+/*doc
+---
+title: Alignment
+name: media_alignment_react
+parent: media_react
+---
+
+```jsx_example
+var mediaAlignmentImage =
+
+ top aligned image - 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. 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.
+
+
+
+ middle aligned image - 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. 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.
+
+
+
+ middle aligned and middle body (for short text and big images)
+
+
+
+ bottom aligned - This is rarely, if ever, used. 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. 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.
+
+
+```
+*/
+/*doc
+---
+title: Spacing
+name: media_spacing_react
+parent: media_react
+---
+
+
+Media spacing can be added to the left and right medias. If no spacing is defined, it defaults to large.
+
+```jsx_example
+var mediaSpacingImage =
+ default image spacing media
+
+
+
+ small image spacing media
+
+
+
+ medium image spacing media
+
+
+
+ large image spacing media
+
+
+
+ xlarge image spacing media
+
+```
+
+*/
+/* ==========================================================================
+ Browser support
+ ========================================================================== */
+/* Typography
+ ========================================================================== */
+/* Grid
+ ========================================================================== */
+/* Code examples
+ ========================================================================== */
+/* Transition mixins */
+/* Button Mixins */
+.modal-open {
+ overflow: hidden; }
+
+.modal {
+ display: none;
+ overflow: hidden;
+ position: fixed;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ z-index: 1050;
+ -webkit-overflow-scrolling: touch;
+ outline: 0; }
+ .modal.fade .modal-dialog, .modal.modal-fade-enter .modal-dialog, .modal.modal-fade-leave .modal-dialog {
+ -webkit-transform: translate(0, -25%);
+ -ms-transform: translate(0, -25%);
+ transform: translate(0, -25%);
+ -webkit-transition: -webkit-transform 0.3s ease-out;
+ transition: transform 0.3s ease-out; }
+ .modal.in .modal-dialog, .modal.modal-fade-enter-active .modal-dialog {
+ -webkit-transform: translate(0, 0);
+ -ms-transform: translate(0, 0);
+ transform: translate(0, 0); }
+
+.modal-open .modal {
+ overflow-x: hidden;
+ overflow-y: auto; }
+
+.modal-dialog {
+ position: relative;
+ width: auto;
+ margin: 10px; }
+
+.modal-content {
+ position: relative;
+ background-color: #ecefef;
+ border: 1px solid #999;
+ border: 1px solid #00776d;
+ border-radius: 6px;
+ box-shadow: 0 3px 9px #000000;
+ box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
+ background-clip: padding-box;
+ outline: 0; }
+
+.modal-backdrop {
+ position: absolute;
+ top: 0;
+ right: 0;
+ left: 0;
+ background-color: #243640; }
+ .modal-backdrop.fade, .modal-backdrop.modal-fade-enter, .modal-backdrop.modal-fade-leave {
+ opacity: 0;
+ filter: alpha(opacity=0); }
+ .modal-backdrop.in, .modal-backdrop.modal-fade-enter-active {
+ opacity: 0.8;
+ filter: alpha(opacity=80); }
+
+.modal-header {
+ padding: 15px;
+ border-bottom: 1px solid #e0e4e5;
+ min-height: 16.5px; }
+
+.modal-header .close {
+ margin-top: -2px; }
+
+.modal-title {
+ margin: 0;
+ line-height: 1.5; }
+
+.modal-body {
+ position: relative;
+ padding: 30px; }
+
+.modal-footer {
+ padding: 30px;
+ text-align: right;
+ border-top: 1px solid #e0e4e5; }
+ .modal-footer:before, .modal-footer:after {
+ content: " ";
+ display: table; }
+ .modal-footer:after {
+ clear: both; }
+ .modal-footer .btn + .btn {
+ margin-left: 5px;
+ margin-bottom: 0; }
+ .modal-footer .btn-group .btn + .btn {
+ margin-left: -1px; }
+ .modal-footer .btn-block + .btn-block {
+ margin-left: 0; }
+
+.modal-scrollbar-measure {
+ position: absolute;
+ top: -9999px;
+ width: 50px;
+ height: 50px;
+ overflow: scroll; }
+
+@media (min-width: 768px) {
+ .modal-dialog {
+ width: 600px;
+ margin: 30px auto; }
+ .modal-content {
+ box-shadow: 0 5px 15px #000000;
+ box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5); }
+ .modal-sm {
+ width: 300px; } }
+
+@media (min-width: 992px) {
+ .modal-lg {
+ width: 900px; } }
+
+.modal-fade-enter, .modal-fade-leave {
+ -webkit-transition: opacity .15s linear;
+ transition: opacity .15s linear;
+ opacity: 0; }
+
+.modal-fade-enter-active {
+ opacity: 1; }
+
+/*doc
+---
+title: Modals
+name: modal
+categories:
+ - Objects
+ - All
+---
+
+Modals bring desired content to the foreground and de-emphasize the rest of the page.
+
+
+
+ Launch basic modal
+
+
+ Launch alternate modal
+
+
+
+
+
+
+
+
+
+
+ Deprecation warning
+
+
+ The alternate modal is deprecated.
+
+
+
+ Opening and closing the modal with callbacks
+
+
+ Modals will be closed by default. To open the modal, add a ref
+ property to the modal (i.e. ref='myModal'). Trigger
+ this.refs.myModal.open(); to open the modal, and
+ this.refs.myModal.close(); to close the modal.
+
+
+ Open Modal
+
+ Text in a body
+
+ Close
+
+
+
+ )
+ }
+});
+
+```
+
+```react_example_table
+
+
+ Flex panels and list cards
+
+
+ Flex panels are often used with list cards
+ as a way to give list cards footers.
+ Add the class list-card-wrapper on any flex panels inside list cards.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+*/
+.panel-flex {
+ display: block;
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+ -webkit-flex-direction: column;
+ -ms-flex-direction: column;
+ flex-direction: column; }
+ .panel-flex .panel-body {
+ -webkit-box-flex: 1;
+ -webkit-flex: 1 0 auto;
+ -ms-flex: 1 0 auto;
+ flex: 1 0 auto;
+ -webkit-align-self: auto;
+ -ms-flex-item-align: auto;
+ align-self: auto; }
+ .panel-flex .panel-footer {
+ -webkit-box-flex: 0;
+ -webkit-flex: 0 0 auto;
+ -ms-flex: 0 0 auto;
+ flex: 0 0 auto;
+ -webkit-align-self: auto;
+ -ms-flex-item-align: auto;
+ align-self: auto; }
+
+/*doc
+---
+title: Panel Tile
+name: panel_tile
+parent: console
+---
+
+Tile panels extend the behavior of flex panels. They provide an animated footer on hover, at the bottom of a fixed-height panel.
+
+```html_example
+
+```
+
+*/
+.panel-tile {
+ border-bottom: 4px solid #000000;
+ border-bottom: 4px solid rgba(0, 0, 0, 0.07);
+ overflow: hidden;
+ color: #686868;
+ -webkit-transition: border 300ms ease-out;
+ transition: border 300ms ease-out;
+ /* Firefox 3.6 */
+ /* Safari 4? Chrome 6? */
+ background-clip: padding-box;
+ /* Firefox 4, Safari 5, Opera 10, IE 9 */ }
+ .panel-tile .panel-body {
+ -ms-flex: 1 0 auto;
+ padding: 29px 29px 0 29px;
+ -webkit-transition: padding-top 300ms ease-out, padding-bottom 300ms ease-out;
+ transition: padding-top 300ms ease-out, padding-bottom 300ms ease-out; }
+ .panel-tile .panel-footer {
+ color: #fff;
+ opacity: 0;
+ text-transform: uppercase;
+ text-align: center;
+ font-size: 12px;
+ border-top: none;
+ padding: 4px 15px;
+ background: transparent;
+ -webkit-transition: all 300ms ease-out;
+ transition: all 300ms ease-out; }
+ .panel-tile:hover, .panel-tile:focus {
+ -webkit-transition: all 300ms ease-out;
+ transition: all 300ms ease-out;
+ border-width: 1px;
+ box-shadow: none;
+ background-color: #F8F8F8;
+ color: #686868;
+ cursor: pointer;
+ outline: none; }
+ .panel-tile:hover .panel-body, .panel-tile:focus .panel-body {
+ padding-top: 18px;
+ padding-bottom: 11px; }
+ .panel-tile:hover .panel-footer, .panel-tile:focus .panel-footer {
+ opacity: 1;
+ background: #2185c5;
+ color: #F8F8F8;
+ font-weight: 900; }
+
+/*doc
+---
+title: Scrollable
+name: panel_scrollable
+parent: panel
+---
+
+The scrollable panel sets a fixed height of 183px and scrolls any content that is larger. If you want a different size, set an inline style on the `.panel-scrollable`.
+
+```html_example
+
+```
+
+*/
+.panel-scrollable {
+ max-height: 183px;
+ overflow-y: overlay;
+ overflow-x: hidden; }
+
+/*doc
+---
+title: Highlight
+name: panel_highlight
+parent: panel
+---
+
+This panel is used to highlight more important parts of the page.
+
+```html_example
+
+
+ Not Hoverable (use when the panel has no associated action, for instance if the action is disabled due to lack of permissions)
+
+
+
+ Danger alternate panel
+
+
+
+ Stopped alternate panel
+
+
+
+ Off alternate panel
+
+
+
+ Editing alternate panel
+
+
+
+
+ Card Panel
+
+
+
+
+ Card Panel
+
+
+
+
+ Card Panel
+
+
+
+```
+
+*/
+/*doc
+---
+title: Clickable
+name: panel_clickable
+parent: panel
+---
+
+These panels lighten on hover to indicate that they are clickable.
+Please use them when a click on the panel triggers an action.
+
+```html_example_table
+
+
+
+
+ Panel Clickable Alt
+
+
+
+
+ hover-target-1 - default text color => link color
+
+
+
+
+
+
+ hover-target-2 - light gray text => default text color
+
+
+
+
+
+
+ hover-target-3 - $gray-9 background => white background
+
+
+```
+
+*/
+.panel-clickable, .panel-clickable-alt {
+ display: block;
+ background-color: #ecefef;
+ cursor: pointer;
+ -webkit-transition: all 300ms ease-out;
+ transition: all 300ms ease-out; }
+ .panel-clickable .hover-target-1, .panel-clickable-alt .hover-target-1, .panel-clickable .hover-target-2, .panel-clickable-alt .hover-target-2, .panel-clickable .hover-target-3, .panel-clickable-alt .hover-target-3 {
+ -webkit-transition: all 300ms ease-out;
+ transition: all 300ms ease-out; }
+ .panel-clickable .hover-target-1, .panel-clickable-alt .hover-target-1 {
+ color: #686868; }
+ .panel-clickable .hover-target-2, .panel-clickable-alt .hover-target-2 {
+ color: #b4b4b4; }
+ .panel-clickable .hover-target-3, .panel-clickable-alt .hover-target-3 {
+ background-color: #F8F8F8; }
+ .panel-clickable:hover, .panel-clickable-alt:hover {
+ background-color: #F8F8F8; }
+ .panel-clickable:hover .hover-target-1, .panel-clickable-alt:hover .hover-target-1 {
+ color: #2185c5; }
+ .panel-clickable:hover .hover-target-2, .panel-clickable-alt:hover .hover-target-2 {
+ color: #686868; }
+ .panel-clickable:hover .hover-target-3, .panel-clickable-alt:hover .hover-target-3 {
+ background-color: white; }
+
+.panel-clickable-alt {
+ background-color: #F8F8F8; }
+ .panel-clickable-alt:hover {
+ background-color: white;
+ box-shadow: 0 4px 0 0 #000000;
+ box-shadow: 0 4px 0 0 rgba(0, 0, 0, 0.14); }
+
+/*doc
+---
+title: Panels
+name: panel_react
+categories:
+ - React Beta
+---
+
+Panel components are straightforward implementations of the [Panel][panel] styling. The `Panel` component itself
+is the base, and there are many different flavors of Panels which all construct a particularly styled `Panel`.
+
+See examples below.
+
+```react_example_table
+
+ Base Panel
+
+```
+*/
+/*doc
+---
+title: Scrolling
+name: panel_scroll_react
+parent: panel_react
+---
+
+A ScrollingPanel is created by using a `Panel` component and including a true value for the `scrollable`
+property. Alternatively, if this value is a number, it will become the height of the scrollable panel in pixels!
+
+```react_example_table
+
+ Scrollable Panel
+ Scrollable Panel
+ Scrollable Panel
+ Scrollable Panel
+ Scrollable Panel
+ Scrollable Panel
+
+
+
+ Scrollable Panel
+ Scrollable Panel
+ Scrollable Panel
+ Scrollable Panel
+ Scrollable Panel
+ Scrollable Panel
+ Scrollable Panel
+ Scrollable Panel
+
+```
+*/
+/*doc
+---
+title: Padding
+name: panel_padding_react
+parent: panel_react
+---
+
+Add a "padding" attribute (i.e. `pal`, `pbn`, etc.) to change the padding on the `panel-body`.
+
+```react_example_table
+
+ Base Panel
+
+```
+
+*/
+/*doc
+---
+title: Simple
+name: panel_simple_react
+parent: panel_react
+---
+
+```react_example_table
+
+ Simple Panel
+
+```
+*/
+/*doc
+---
+title: Basic
+name: panel_basic_react
+parent: panel_react
+---
+
+```react_example_table
+
+ Basic Panel
+
+
+
+ Basic Panel
+
+```
+*/
+/*doc
+---
+title: Basic Panel Alt
+name: panel_basic_alt_react
+parent: panel_react
+---
+
+```react_example_table
+
+ Basic Panel
+
+
+
+ Basic Panel
+
+```
+*/
+/*doc
+---
+title: Shadow
+name: panel_shadow_react
+parent: panel_react
+---
+
+`ShadowPanels` accept a `shadowLevel` property between 1 and 4 (darkest to lightest).
+If no `shadowLevel` is set, a default value of 3 is applied.
+
+```react_example_table
+Shadow Panel (Defaults to shadow level 3)
+
+Shadow Panel (level 1)
+
+Shadow Panel (level 2)
+
+Shadow Panel (level 3)
+
+Shadow Panel (level 4)
+```
+
+*/
+/*doc
+---
+title: Clickable
+name: panel_clickable_react
+parent: panel_react
+---
+
+```react_example_table
+Clickable Panel
+
+Clickable Panel (Alt)
+```
+*/
+/*doc
+---
+title: Highlight
+name: panel_highlight_react
+parent: panel_react
+---
+
+```react_example_table
+
+ Highlight Panel
+
+```
+*/
+/* ==========================================================================
+ Browser support
+ ========================================================================== */
+/* Typography
+ ========================================================================== */
+/* Grid
+ ========================================================================== */
+/* Code examples
+ ========================================================================== */
+/*doc
+---
+title: Panes
+name: pane
+categories:
+ - Layout
+ - All
+---
+
+Panes are horizontal groupings of content that are usually used to
+span the full browser window width. It's going to look funny here,
+a better way to view it is on the [panes page](/pane.html).
+
+You can combine up to two background classes on the pane component.
+The one on the `.pane` element will span the full browser width. The
+one on the `.container` element will be constrained to the content width.
+
+```html_example
+
+
+```
+
+```html_example
+
+
+
This is a pane
+
+
+
+
+
+
+
This is another pane
+
+
+ This is a pane
+
+```
+
+In the event that you need additional configuration applied to a Pane, you can use the
+`BasePane` component which accepts properties for `outerClass` and `innerClass`.
+
+These values are added to the class name of the `.pane` and the `.container` respectively.
+
+```react_example
+
+ This is a pane (configurable)
+
+```
+*/
+/* ==========================================================================
+ Browser support
+ ========================================================================== */
+/* Typography
+ ========================================================================== */
+/* Grid
+ ========================================================================== */
+/* Code examples
+ ========================================================================== */
+/*doc
+---
+title: Progress Bars
+name: progress_bar
+categories:
+ - Objects
+ - All
+---
+
+This section contains static progress bar styles.
+
+
+```html_example_table
+
+
+ 0 MB of 100 MB Used
+
+
+
+
+ 3 MB of 100 MB Used
+
+
+
+
+ 9 MB of 100 MB Used
+
+
+
+
+ 60 MB of 100 MB Used
+
+
+
+
+ 90 MB of 100 MB Used
+
+```
+*/
+.progress {
+ margin-bottom: 0;
+ border-radius: 0;
+ background-color: #000000;
+ background-color: rgba(0, 0, 0, 0.07);
+ box-shadow: none;
+ -webkit-box-shadow: none;
+ -moz-box-shadow: none; }
+
+.progress-bar {
+ background: #b4b4b4;
+ box-shadow: none;
+ -webkit-box-shadow: none;
+ -moz-box-shadow: none;
+ text-align: left; }
+ .progress-bar .label {
+ margin-left: 7px;
+ font-size: 14px;
+ font-weight: 900; }
+
+.progress-bar[aria-valuenow="1"], .progress-bar[aria-valuenow="2"] {
+ min-width: 3%; }
+
+.progress-bar[aria-valuenow="0"] {
+ color: #686868;
+ min-width: 3%;
+ background: transparent;
+ box-shadow: none; }
+
+.progress-bar[aria-valuenow^="9"]:not([aria-valuenow="9"]), .progress-bar[aria-valuenow="100"] {
+ background: #ff434c; }
+
+/*pending
+---
+title: Animated Progress Bar
+name: animated_progress_bar
+categories:
+ - Objects
+ - All
+---
+
+This is an animated progress bar. See [progress bar][progress_bar] to see the static version.
+
+
+Sometimes you will need to graphically display percent used (e.g. quota usage) or progress (e.g. profile completion).
+In the html, the width should be set to match the `aria-valuenow` if the progress bar isn't animated. If it is, it should be set to 0% initially.
+
+```html_example
+
+
+ 0 MB of 100 MB Used
+
+
+
+
+ 60 MB of 100 MB Used
+
+
+
+
+ 93 MB of 100 MB Used
+
+```
+*/
+.progress-bar-animated {
+ -webkit-transition: width 1s ease-in-out;
+ transition: width 2s ease-in-out; }
+
+/* ==========================================================================
+ Browser support
+ ========================================================================== */
+/* Typography
+ ========================================================================== */
+/* Grid
+ ========================================================================== */
+/* Code examples
+ ========================================================================== */
+/* Transition mixins */
+/* Button Mixins */
+.new-enter {
+ -webkit-animation: new-item-grow .3s cubic-bezier(0.895, 0.03, 0.685, 0.22) forwards, new-item-fade .5s ease-in .15s forwards;
+ -moz-animation: new-item-grow .3s cubic-bezier(0.895, 0.03, 0.685, 0.22) forwards, new-item-fade .5s ease-in .15s forwards; }
+
+.expander-enter {
+ -webkit-transition: max-height 0.75s ease;
+ transition: max-height 0.75s ease;
+ max-height: 0; }
+
+.expander-enter-active {
+ max-height: 500px; }
+
+.expander-leave {
+ -webkit-transition: max-height 0.75s ease;
+ transition: max-height 0.75s ease;
+ max-height: 500px; }
+
+.expander-leave-active {
+ max-height: 0; }
+
+@-webkit-keyframes new-item-fade {
+ 0% {
+ opacity: 0; }
+
+ 100% {
+ opacity: 1; } }
+
+@-webkit-keyframes new-item-grow {
+ 0% {
+ max-height: 0; }
+
+ 100% {
+ max-height: 100px; } }
+
+@keyframes new-item-fade {
+ from {
+ opacity: 0; }
+
+ to {
+ opacity: 1; } }
+
+@keyframes new-item-grow {
+ from {
+ max-height: 0; }
+
+ to {
+ max-height: 100px; } }
+
+/* ==========================================================================
+ Browser support
+ ========================================================================== */
+/* Typography
+ ========================================================================== */
+/* Grid
+ ========================================================================== */
+/* Code examples
+ ========================================================================== */
+/*doc
+---
+title: Ribbons
+name: ribbon
+categories:
+ - Elements
+ - All
+---
+
+Ribbons should be used to call out access, status, environment, etc.
+
+*/
+/*doc
+---
+title: Ribbon
+name: ribbon_inline
+parent: ribbon
+---
+
+```html_example_table
+British
+For British eyes only
+
+Pivotal
+Wow this ribbon is so inline
+```
+
+*/
+.inline-ribbon {
+ position: relative;
+ display: inline-block;
+ padding: 2px 10px;
+ margin-left: 22px;
+ margin-right: 22px;
+ color: white;
+ font-size: 12px;
+ font-weight: bold;
+ text-align: center;
+ text-transform: uppercase;
+ background-color: #b4b4b4; }
+ .inline-ribbon:before, .inline-ribbon:after {
+ content: "";
+ position: absolute;
+ display: block;
+ top: 0;
+ border-color: #b4b4b4;
+ border-width: 11px;
+ border-style: solid; }
+ .inline-ribbon:before {
+ border-left-color: transparent;
+ left: -22px; }
+ .inline-ribbon:after {
+ border-right-color: transparent;
+ right: -22px; }
+
+.ribbon-primary {
+ background-color: #00a79d; }
+ .ribbon-primary:before {
+ border-color: #00a79d;
+ border-left-color: transparent; }
+ .ribbon-primary:after {
+ border-color: #00a79d;
+ border-right-color: transparent; }
+
+/*doc
+---
+title: Banner
+name: ribbon_banner
+parent: ribbon
+---
+
+You can use a banner ribbon to let the team know which environment they're
+working on.
+
+```html_wrapped_example
+
+ Acceptance
+
+```
+
+*/
+.ribbon-banner {
+ position: fixed;
+ top: 20px;
+ left: 0;
+ padding: 4px 18px 4px 24px;
+ margin-left: 0;
+ margin-right: 32px;
+ color: white;
+ font-size: 16px;
+ font-weight: bold;
+ text-align: center;
+ text-transform: uppercase;
+ background-color: #b31612; }
+ .ribbon-banner:after {
+ content: "";
+ position: absolute;
+ display: block;
+ top: 0;
+ right: -32px;
+ border-style: solid;
+ border-width: 16px;
+ border-color: #b31612;
+ border-right-color: transparent; }
+
+/*doc
+---
+title: Ribbons
+name: ribbons_react
+categories:
+ - React Beta
+---
+
+`Ribbon` components are straightforward implementations of the [Ribbon][ribbon] styles.
+They should be used to call out access, status, environment, etc.
+
+
+```react_example_table
+ British
+
+ English-British
+```
+*/
+/*doc
+---
+title: Banners
+name: banner_ribbons_react
+parent: ribbons_react
+---
+
+```react_wrapped_example_table
+ British
+```
+
+*/
+/*doc
+---
+title: Spinners
+name: iconography_spinner
+parent: iconography
+---
+
+Spinners are used to show that some action is in progress. Spinners come in two sizes: large and small.
+
+```html_example_table
+
+
+
+
+
+```
+
+*/
+.spinner-lg {
+ margin-top: 64px;
+ text-align: center; }
+ .spinner-lg .fa-spin {
+ font-size: 48px;
+ opacity: 0.5; }
+
+.spinner-sm {
+ text-align: center;
+ min-height: 320px; }
+ .spinner-sm .fa-spin {
+ font-size: 28px; }
+ .spinner-sm.out {
+ opacity: 0.2; }
+
+/* ==========================================================================
+ Browser support
+ ========================================================================== */
+/* Typography
+ ========================================================================== */
+/* Grid
+ ========================================================================== */
+/* Code examples
+ ========================================================================== */
+/*doc
+---
+title: Tables
+name: table
+categories:
+ - Objects
+ - All
+---
+
+
+Class | Description
+--------------------- | -----------------
+`.table` | Base table class, applies spacing and cross browser support. Unfortunately inherits some undesirable styles from bootstrap.
+`.table-hover` | Adds a light blue background color to table rows when the user hovers over them (use to indicate clickability)
+`.table-striped` | Applies zebra striping to a table.
+`.table-light` | Lightens the table background.
+
+*/
+/*pending
+---
+title: JS Tables
+name: table_js
+categories:
+ - Objects
+ - All
+---
+
+This section contains different table behaviors. See [tables][table] to see different table styles.
+*/
+.table-hack .thead, .table-hack .tbody {
+ padding: 0 15px; }
+.table-hack .th {
+ padding: 8px 15px; }
+.table-hack .td {
+ padding: 20px 15px; }
+
+/*doc
+---
+title: Data
+name: table_data
+parent: table
+---
+
+This is a table used to display many rows of data (it is pretty much the default table). You can use grid column classes on th and td elements. See key-value table for example.
+
+Design Note: The `table-data` is often paired with `table-light` as in our example.
+
+```html_example
+
+
+
+ Service Instance
+ Service Plan
+ Bound Apps
+
+
+
+
+ oracle-db-sct
+ Oracle DB
+ 12
+
+
+ oracle-db-sct
+ Oracle DB
+ 12
+
+
+ oracle-db-sct
+ Oracle DB
+ 12
+
+
+ oracle-db-sct
+ Oracle DB
+ 12
+
+
+
+```
+
+*/
+.table-data {
+ border: none; }
+ .table-data tbody tr, .table-data tbody .tr, .table-data thead tr, .table-data thead .tr, .table-data .tbody tr, .table-data .tbody .tr, .table-data .thead tr, .table-data .thead .tr {
+ border-bottom: 1px solid #d4d9d9; }
+ .table-data tbody tr th, .table-data tbody tr .th, .table-data tbody .tr th, .table-data tbody .tr .th, .table-data thead tr th, .table-data thead tr .th, .table-data thead .tr th, .table-data thead .tr .th, .table-data .tbody tr th, .table-data .tbody tr .th, .table-data .tbody .tr th, .table-data .tbody .tr .th, .table-data .thead tr th, .table-data .thead tr .th, .table-data .thead .tr th, .table-data .thead .tr .th {
+ border-bottom: none;
+ border-color: #d4d9d9;
+ border-right: 1px solid #d4d9d9;
+ padding: 15px 10px;
+ font-size: 13px;
+ font-weight: 900;
+ letter-spacing: 0.3px;
+ background-color: #ecefef; }
+ .table-data tbody tr th:first-child, .table-data tbody tr .th:first-child, .table-data tbody .tr th:first-child, .table-data tbody .tr .th:first-child, .table-data thead tr th:first-child, .table-data thead tr .th:first-child, .table-data thead .tr th:first-child, .table-data thead .tr .th:first-child, .table-data .tbody tr th:first-child, .table-data .tbody tr .th:first-child, .table-data .tbody .tr th:first-child, .table-data .tbody .tr .th:first-child, .table-data .thead tr th:first-child, .table-data .thead tr .th:first-child, .table-data .thead .tr th:first-child, .table-data .thead .tr .th:first-child {
+ border-bottom: none; }
+ .table-data tbody tr th:last-child, .table-data tbody tr .th:last-child, .table-data tbody .tr th:last-child, .table-data tbody .tr .th:last-child, .table-data thead tr th:last-child, .table-data thead tr .th:last-child, .table-data thead .tr th:last-child, .table-data thead .tr .th:last-child, .table-data .tbody tr th:last-child, .table-data .tbody tr .th:last-child, .table-data .tbody .tr th:last-child, .table-data .tbody .tr .th:last-child, .table-data .thead tr th:last-child, .table-data .thead tr .th:last-child, .table-data .thead .tr th:last-child, .table-data .thead .tr .th:last-child {
+ border: none; }
+ .table-data tbody tr td, .table-data tbody tr .td, .table-data tbody .tr td, .table-data tbody .tr .td, .table-data thead tr td, .table-data thead tr .td, .table-data thead .tr td, .table-data thead .tr .td, .table-data .tbody tr td, .table-data .tbody tr .td, .table-data .tbody .tr td, .table-data .tbody .tr .td, .table-data .thead tr td, .table-data .thead tr .td, .table-data .thead .tr td, .table-data .thead .tr .td {
+ padding: 10px 10px;
+ border: none; }
+ .table-data tbody tr, .table-data tbody .tr, .table-data .tbody tr, .table-data .tbody .tr {
+ background-color: #ecefef; }
+ .table-data tbody tr:hover, .table-data tbody .tr:hover, .table-data .tbody tr:hover, .table-data .tbody .tr:hover {
+ -webkit-transition: background-color 300ms ease-out;
+ transition: background-color 300ms ease-out;
+ background-color: #F8F8F8; }
+ .table-data tbody tr:last-child, .table-data tbody .tr:last-child, .table-data .tbody tr:last-child, .table-data .tbody .tr:last-child {
+ border-bottom: 2px solid #000000;
+ border-bottom: 2px solid rgba(0, 0, 0, 0.07); }
+ .table-data > thead > tr, .table-data > .thead > .tr {
+ text-transform: uppercase; }
+ .table-data > thead > tr > th, .table-data > thead > tr > .th, .table-data > .thead > .tr > th, .table-data > .thead > .tr > .th {
+ color: #686868; }
+
+.table-light tbody tr, .table-light tbody .tr, .table-light thead tr, .table-light thead .tr, .table-light .tbody tr, .table-light .tbody .tr, .table-light .thead tr, .table-light .thead .tr {
+ background-color: #F8F8F8; }
+ .table-light tbody tr th, .table-light tbody tr .th, .table-light tbody tr td, .table-light tbody tr .td, .table-light tbody .tr th, .table-light tbody .tr .th, .table-light tbody .tr td, .table-light tbody .tr .td, .table-light thead tr th, .table-light thead tr .th, .table-light thead tr td, .table-light thead tr .td, .table-light thead .tr th, .table-light thead .tr .th, .table-light thead .tr td, .table-light thead .tr .td, .table-light .tbody tr th, .table-light .tbody tr .th, .table-light .tbody tr td, .table-light .tbody tr .td, .table-light .tbody .tr th, .table-light .tbody .tr .th, .table-light .tbody .tr td, .table-light .tbody .tr .td, .table-light .thead tr th, .table-light .thead tr .th, .table-light .thead tr td, .table-light .thead tr .td, .table-light .thead .tr th, .table-light .thead .tr .th, .table-light .thead .tr td, .table-light .thead .tr .td {
+ background-color: #F8F8F8; }
+ .table-light tbody tr td, .table-light tbody tr .td, .table-light tbody .tr td, .table-light tbody .tr .td, .table-light thead tr td, .table-light thead tr .td, .table-light thead .tr td, .table-light thead .tr .td, .table-light .tbody tr td, .table-light .tbody tr .td, .table-light .tbody .tr td, .table-light .tbody .tr .td, .table-light .thead tr td, .table-light .thead tr .td, .table-light .thead .tr td, .table-light .thead .tr .td {
+ border: none; }
+
+/*doc
+---
+title: Key-Value
+name: table_key_value
+parent: table
+---
+
+This table is used when the table headings are on the left. It looks better when you
+specify column widths for the th/tds.
+
+
+```html_example
+
+
+
+ Email
+ joe@example.com
+
+
+ Current Password
+ *******
+
+
+ First Name
+ Joe
+
+
+ Last Name
+ Bobs
+
+
+ Phone
+ 415-555-0000
+
+
+
+```
+
+*/
+.table-key-value {
+ table-layout: fixed; }
+ .table-key-value tbody tr th, .table-key-value tbody tr .th, .table-key-value tbody .tr th, .table-key-value tbody .tr .th, .table-key-value thead tr th, .table-key-value thead tr .th, .table-key-value thead .tr th, .table-key-value thead .tr .th, .table-key-value .tbody tr th, .table-key-value .tbody tr .th, .table-key-value .tbody .tr th, .table-key-value .tbody .tr .th, .table-key-value .thead tr th, .table-key-value .thead tr .th, .table-key-value .thead .tr th, .table-key-value .thead .tr .th {
+ border: none; }
+ .table-key-value tbody tr:last-child {
+ border: none; }
+ .table-key-value tbody tr th, .table-key-value tbody tr td {
+ padding: 0;
+ margin: 0; }
+ .table-key-value tbody tr th {
+ text-transform: uppercase;
+ font-weight: 800;
+ text-align: left;
+ color: #b4b4b4; }
+ .table-key-value tbody tr td {
+ text-align: left; }
+ .table-key-value tbody tr td:last-child {
+ border: none; }
+
+/*pending
+---
+title: Clickable
+name: table_clickable
+parent: table_js
+---
+
+Use this style of table when rows are clickable. It is possible to prevent a user from clicking on a row w/ a message by adding data-prevent-click and data-prevent-click-message to the row. (N.B.: This does not actually add any sort of permissions to the URL in question).
+We are making the assumption here that table-hover will *only* be used if the table is clickable, because we add a pointer.
+
+
+
+```html_example
+
+
+
+ Style
+ Clickability
+
+
+
+
+ Forbidden Links
+ High
+
+
+
+
+ Buttons
+ Medium
+
+
+
+
+ Typography
+ Low
+
+
+
+
+
+```
+
+*/
+.table-hover td {
+ cursor: pointer; }
+
+/*doc
+---
+title: Tables
+name: table_react
+categories:
+ - React Beta
+---
+*/
+/*doc
+---
+title: Sortable
+name: table_sortable_react
+parent: table_react
+---
+
+The `SortableTable` component is a robust component that offers a styled table with fully
+functioning sort.
+
+The `SortableTable` expects the following properties:
+
+
+Property | Type | Description
+----------| ---------------------------------| --------------------------------------------------------------------------
+`data` | Array of JS objects | The collection of data to be displayed
+`columns` | Array of column objects | Informs the table how to render columns as well as which columns should be sortable
+`classes` | Array of strings | A list of class names to be added to the table element
+
+
+The column objects should have the following structure:
+
+Property | Required? | Type | Description
+-----------| ----------|------------------------------| --------------------------------------------------------------------------
+`name` | **yes** | String | Name of the property on a data object (how to lookup the value for this column)
+`title` | **yes** | String | Name to display on the table header
+`sortable` | no | Boolean | Is this column sortable? Defaults to false
+`align` | no | 'center', 'left', or 'right' | How should text be aligned within this column? Defaults to left
+
+If a column is marked as being sortable, it will attempt to sort the values as strings.
+
+
+```js_example
+var sortTableCols = [
+ {
+ name: 'name',
+ title: 'Name',
+ sortable: true
+ },
+ {
+ name: 'instances',
+ title: 'Instances',
+ sortable: true,
+ align: 'center'
+ },
+ {
+ name: 'cpu',
+ title: 'CPU',
+ sortable: true,
+ align: 'right'
+ },
+ {
+ name: 'synergy',
+ title: 'Synergy',
+ align: 'left'
+ }
+]
+
+var sortTableData = [
+ {
+ instances: '1',
+ name: 'foo',
+ cpu: 'po',
+ synergy: 'qum',
+ ram: 'bee',
+ },
+ {
+ name: 'yee',
+ instances: 'di',
+ cpu: 'no',
+ synergy: 'aum'
+ },
+ {
+ name: 'zee',
+ instances: 'si',
+ cpu: 'mo',
+ synergy: 'wum'
+ },
+ {
+ name: 'jee',
+ instances: 'ui',
+ cpu: 'no',
+ synergy: 'mum'
+ }
+];
+```
+
+```react_example
+
+
+
+ Name
+ Total Apps
+ Running Apps
+ Stopped Apps
+ Down Apps
+ Service Instances
+ Quota
+
+
+
+
+ {{tableItem.name}}
+ {{tableItem.totalApps}}
+ {{tableItem.runningApps}}
+ {{tableItem.stoppedApps}}
+ {{tableItem.downApps}}
+ {{tableItem.serviceInstances}}
+ {{tableItem.quota}}
+
+
+
+```
+*/
+.table-sortable th.sorted-desc {
+ color: #243640; }
+ .table-sortable th.sorted-desc:after {
+ content: "\f0d7";
+ color: #243640; }
+.table-sortable .sortable, .table-sortable [sortable] {
+ cursor: pointer; }
+ .table-sortable .sortable:after, .table-sortable [sortable]:after {
+ margin-left: 4px;
+ content: "";
+ font-weight: 200;
+ font-family: FontAwesome; }
+ .table-sortable .sortable:hover, .table-sortable [sortable]:hover {
+ background-color: white;
+ -webkit-transition: background-color 300ms ease-out;
+ transition: background-color 300ms ease-out; }
+.table-sortable th.sorted-none:hover:after {
+ visibility: visible; }
+.table-sortable th.sorted-none:after {
+ content: "\f0dc";
+ color: #d4d9d9;
+ visibility: hidden; }
+.table-sortable th.sorted-asc {
+ color: #243640; }
+ .table-sortable th.sorted-asc:after {
+ content: "\f0d8";
+ color: #243640; }
+
+/*pending
+---
+title: Inline Addable
+name: table_inline_addable
+parent: table_js
+---
+
+```html_example
+
+
+
+ Add a Space
+
+
+
+
+
+
+ Name
+
+
+ Total Apps
+
+
+ Running Apps
+
+
+ Stopped Apps
+
+
+ Down Apps
+
+
+ Service Instance
+
+
+ Quota
+
+
+
+
+
+
+ Name
+
+
+
+
+
+
+
+
+
+
+
+
+ {{space.name}}
+
+ {{space.totalApps}}
+ {{space.runningApps}}
+ {{space.stoppedApps}}
+ {{space.downApps}}
+ {{space.serviceInstances}}
+ {{space.quota}}
+ Delete
+
+
+
+
+
+
+ Add a Space
+
+
+
+
+
+ Name
+ Total Apps
+ Running Apps
+ Stopped Apps
+ Down Apps
+ Service Instances
+ Quota
+
+
+
+
+
+ Name
+
+
+
+
+
+
+
+
+
+
+
+
+ {{space.name}}
+
+ {{space.totalApps}}
+ {{space.runningApps}}
+ {{space.stoppedApps}}
+ {{space.downApps}}
+ {{space.serviceInstances}}
+ {{space.quota}}
+
+
+
+
+
+ You will need to specify the width of every column in both the thead and
+ the first row of the tbody. You can do this with inline width attributes.
+
+
+
+
+
+
Plan Features
+
+
Content 1
+
Content 2
+
Content 3
+
Content 4
+
+
+
+
+
+
+
+
Spaces Content
+
Domains Content
+
Members Content
+
+
+
+
+
+
Dashboard Content
+
Notifications Content
+
EULA Content
+
+
+
+
+
+
+
+
+
+ meep
+
+ Content 1
+
+ foo
+
+ Content 2
+
+ foo
+
+ Content 3
+
+ foo
+
+ Content 4
+
+
+
+
+
+
+
Agility Content
+
Choice Content
+
Open Source
+
+
+ Wow!
+
+ Neat!
+ So much content.
+
+
+```
+
+*/
+/*doc
+---
+title: Alt
+name: 02_alt_tabs_react
+parent: tabs_react
+---
+
+```react_example
+
+ Wow!
+
+ Neat!
+ So much content.
+
+
+```
+*/
+/* ==========================================================================
+ Browser support
+ ========================================================================== */
+/* Typography
+ ========================================================================== */
+/* Grid
+ ========================================================================== */
+/* Code examples
+ ========================================================================== */
+/* Transition mixins */
+/* Button Mixins */
+.tooltip {
+ position: absolute;
+ z-index: 1030;
+ display: block;
+ visibility: visible;
+ font-family: 'Source Sans Pro', 'SourceSansPro', sans-serif;
+ font-size: 14px;
+ font-weight: normal;
+ line-height: 1.4;
+ opacity: 0;
+ filter: alpha(opacity=0); }
+ .tooltip.in {
+ opacity: 1;
+ filter: alpha(opacity=100); }
+ .tooltip.top {
+ margin-top: -3px;
+ padding: 5px 0; }
+ .tooltip.right {
+ margin-left: 3px;
+ padding: 0 5px; }
+ .tooltip.bottom {
+ margin-top: 3px;
+ padding: 5px 0; }
+ .tooltip.left {
+ margin-left: -3px;
+ padding: 0 5px; }
+
+.tooltip-inner {
+ max-width: 200px;
+ padding: 3px 8px;
+ color: #ecefef;
+ text-align: center;
+ text-decoration: none;
+ background-color: #424242;
+ border-radius: 4px; }
+
+.tooltip-arrow {
+ position: absolute;
+ width: 0;
+ height: 0;
+ border-color: transparent;
+ border-style: solid; }
+
+.tooltip.top .tooltip-arrow {
+ bottom: 0;
+ left: 50%;
+ margin-left: -5px;
+ border-width: 5px 5px 0;
+ border-top-color: #424242; }
+.tooltip.top-left .tooltip-arrow {
+ bottom: 0;
+ right: 5px;
+ margin-bottom: -5px;
+ border-width: 5px 5px 0;
+ border-top-color: #424242; }
+.tooltip.top-right .tooltip-arrow {
+ bottom: 0;
+ left: 5px;
+ margin-bottom: -5px;
+ border-width: 5px 5px 0;
+ border-top-color: #424242; }
+.tooltip.right .tooltip-arrow {
+ top: 50%;
+ left: 0;
+ margin-top: -5px;
+ border-width: 5px 5px 5px 0;
+ border-right-color: #424242; }
+.tooltip.left .tooltip-arrow {
+ top: 50%;
+ right: 0;
+ margin-top: -5px;
+ border-width: 5px 0 5px 5px;
+ border-left-color: #424242; }
+.tooltip.bottom .tooltip-arrow {
+ top: 0;
+ left: 50%;
+ margin-left: -5px;
+ border-width: 0 5px 5px;
+ border-bottom-color: #424242; }
+.tooltip.bottom-left .tooltip-arrow {
+ top: 0;
+ right: 5px;
+ margin-top: -5px;
+ border-width: 0 5px 5px;
+ border-bottom-color: #424242; }
+.tooltip.bottom-right .tooltip-arrow {
+ top: 0;
+ left: 5px;
+ margin-top: -5px;
+ border-width: 0 5px 5px;
+ border-bottom-color: #424242; }
+
+/*doc
+---
+title: Tooltip
+name: tooltip
+categories:
+ - Objects
+ - All
+---
+
+Tooltips are used to display extra information on hover. They can be used with any hoverable element.
+
+The `title` attribute defines the text that appears on the tooltip.
+The `data-placement` attribute defines the tooltip's placement.
+If `data-placement` is not specified, the tooltip is placed on top by default.
+
+
+
+ Tooltips must be initialized with javascript: $(mySelector).tooltip();
+
+
+ Check out this
+
+ tooltip on the left!
+
+
+
+
+ Check out this
+
+ tooltip on the right!
+
+
+
+
+
+ Check out this tooltip on the top!
+
+
+
+
+
+ Check out this tooltip on the bottom!
+
+
+```
+
+```js_example
+$('#link-with-tooltip-1').tooltip();
+$('#link-with-tooltip-2').tooltip();
+$('#button-with-tooltip-1').tooltip();
+$('#button-with-tooltip-2').tooltip();
+```
+
+
+
+ If you want to use a tooltip on a disabled element, place the tooltip in a wrapper div with the class .button-with-tooltip-wrapper.
+
+
+
+ Disabled button
+
+
+```
+
+```js_example
+$('#disabled-button-with-tooltip').tooltip();
+```
+
+*/
+.button-with-tooltip-wrapper {
+ display: inline-block; }
+
+/*doc
+---
+title: Tooltips
+name: tooltips_react
+categories:
+ - React Beta
+---
+
+Tooltips are used to display extra information on hover.
+To make an element show a tooltip, wrap it in an `OverlayTrigger`.
+If the `overlay` property passed into the `OverlayTrigger` will be displayed on hover,
+this is where the `Tooltip` can be used. The is currently a thin wrapper around
+React Bootstrap.
+
+Tooltips are placed using the `placement` property on `OverlayTrigger`, "left", "right", "bottom", "top".
+
+```react_example
+
+```
+*/
+/*doc
+---
+title: Vertical Align
+name: vertical_align
+categories:
+ - Layout
+ - All
+---
+
+The Aligner allows you to vertically align children to the top, center, or bottom.
+Its height is set by default to 230px.
+
+This component doesn't do any horizontal alignment.
+You can use grids, or the [text-alignment classes][alignment]
+`.txt-l`, `.txt-r`, and `.txt-c` with this component.
+
+
+
+ This component is not supported in IE10 and below.
+ While the content will appear, it will not be vertically aligned.
+
+
+ *
+ * p,m padding,margin
+ * a,t,r,b,l,h,v all,top,right,bottom,left,horizontal,vertical
+ * s,m,l,n small(5px),medium(10px),large(20px),none(0px)
+ */
+/*
+ * Can define your own spacing units, or calculate the units based on how many spacing sizes you want
+ *
+ * @param $units - specific spacing units you want to use. Must go from small to large
+ * e.g. @include whitespace((5px,10px,20px));
+ *
+ * @param $sizes - how many sizes you want. Calculate sizes based on line-height
+ * e.g. @include whitespace((), 4);
+ *
+ */
+/*doc
+---
+title: Whitespace
+name: whitespace
+categories:
+ - Utilities
+ - All
+---
+
+*/
+/*doc
+---
+title: Standard
+name: standard
+parent: whitespace
+---
+
+Should be used to modify the default spacing between objects (not between nodes of the same object)
+Please use judiciously. You want to be using defaults most of the time, these are exceptions!
+``
+
+Letter | Description
+-------------------------------- | ------------------------------------------------------------------
+p, m | padding, margin
+a, t, r, b, l, h, v | all, top, right, bottom, left, horizontal, vertical
+n, s, m, l, xl, xxl, xxxl, xxxxl | none(0px), small(5px), medium(7px), large(10px), extra large(20px), extra extra large (40px), extra extra extra large (120px), extra extra extra extra large (140px)
+
+
+```html_example
+A normal paragraph
+A paragraph with large padding
+```
+
+*/
+/*doc
+---
+title: List
+name: whitespace_list
+parent: whitespace
+---
+
+See [list spacing][list_whitespace].
+
+*/
+.pan {
+ padding: 0 !important; }
+
+.man {
+ margin: 0 !important; }
+
+.pvn {
+ padding-top: 0 !important;
+ padding-bottom: 0 !important; }
+
+.mvn {
+ margin-top: 0 !important;
+ margin-bottom: 0 !important; }
+
+.phn {
+ padding-left: 0 !important;
+ padding-right: 0 !important; }
+
+.mhn {
+ margin-left: 0 !important;
+ margin-right: 0 !important; }
+
+.ptn {
+ padding-top: 0 !important; }
+
+.mtn {
+ margin-top: 0 !important; }
+
+.prn {
+ padding-right: 0 !important; }
+
+.mrn {
+ margin-right: 0 !important; }
+
+.pbn {
+ padding-bottom: 0 !important; }
+
+.mbn {
+ margin-bottom: 0 !important; }
+
+.pln {
+ padding-left: 0 !important; }
+
+.mln {
+ margin-left: 0 !important; }
+
+.pas {
+ padding: 5px !important; }
+
+.mas {
+ margin: 5px !important; }
+
+.pvs {
+ padding-top: 5px !important;
+ padding-bottom: 5px !important; }
+
+.mvs {
+ margin-top: 5px !important;
+ margin-bottom: 5px !important; }
+
+.phs {
+ padding-left: 5px !important;
+ padding-right: 5px !important; }
+
+.mhs {
+ margin-left: 5px !important;
+ margin-right: 5px !important; }
+
+.pts {
+ padding-top: 5px !important; }
+
+.mts {
+ margin-top: 5px !important; }
+
+.prs {
+ padding-right: 5px !important; }
+
+.mrs {
+ margin-right: 5px !important; }
+
+.pbs {
+ padding-bottom: 5px !important; }
+
+.mbs {
+ margin-bottom: 5px !important; }
+
+.pls {
+ padding-left: 5px !important; }
+
+.mls {
+ margin-left: 5px !important; }
+
+.pam {
+ padding: 7px !important; }
+
+.mam {
+ margin: 7px !important; }
+
+.pvm {
+ padding-top: 7px !important;
+ padding-bottom: 7px !important; }
+
+.mvm {
+ margin-top: 7px !important;
+ margin-bottom: 7px !important; }
+
+.phm {
+ padding-left: 7px !important;
+ padding-right: 7px !important; }
+
+.mhm {
+ margin-left: 7px !important;
+ margin-right: 7px !important; }
+
+.ptm {
+ padding-top: 7px !important; }
+
+.mtm {
+ margin-top: 7px !important; }
+
+.prm {
+ padding-right: 7px !important; }
+
+.mrm {
+ margin-right: 7px !important; }
+
+.pbm {
+ padding-bottom: 7px !important; }
+
+.mbm {
+ margin-bottom: 7px !important; }
+
+.plm {
+ padding-left: 7px !important; }
+
+.mlm {
+ margin-left: 7px !important; }
+
+.pal {
+ padding: 10px !important; }
+
+.mal {
+ margin: 10px !important; }
+
+.pvl {
+ padding-top: 10px !important;
+ padding-bottom: 10px !important; }
+
+.mvl {
+ margin-top: 10px !important;
+ margin-bottom: 10px !important; }
+
+.phl {
+ padding-left: 10px !important;
+ padding-right: 10px !important; }
+
+.mhl {
+ margin-left: 10px !important;
+ margin-right: 10px !important; }
+
+.ptl {
+ padding-top: 10px !important; }
+
+.mtl {
+ margin-top: 10px !important; }
+
+.prl {
+ padding-right: 10px !important; }
+
+.mrl {
+ margin-right: 10px !important; }
+
+.pbl {
+ padding-bottom: 10px !important; }
+
+.mbl {
+ margin-bottom: 10px !important; }
+
+.pll {
+ padding-left: 10px !important; }
+
+.mll {
+ margin-left: 10px !important; }
+
+.paxl {
+ padding: 20px !important; }
+
+.maxl {
+ margin: 20px !important; }
+
+.pvxl {
+ padding-top: 20px !important;
+ padding-bottom: 20px !important; }
+
+.mvxl {
+ margin-top: 20px !important;
+ margin-bottom: 20px !important; }
+
+.phxl {
+ padding-left: 20px !important;
+ padding-right: 20px !important; }
+
+.mhxl {
+ margin-left: 20px !important;
+ margin-right: 20px !important; }
+
+.ptxl {
+ padding-top: 20px !important; }
+
+.mtxl {
+ margin-top: 20px !important; }
+
+.prxl {
+ padding-right: 20px !important; }
+
+.mrxl {
+ margin-right: 20px !important; }
+
+.pbxl {
+ padding-bottom: 20px !important; }
+
+.mbxl {
+ margin-bottom: 20px !important; }
+
+.plxl {
+ padding-left: 20px !important; }
+
+.mlxl {
+ margin-left: 20px !important; }
+
+.paxxl {
+ padding: 40px !important; }
+
+.maxxl {
+ margin: 40px !important; }
+
+.pvxxl {
+ padding-top: 40px !important;
+ padding-bottom: 40px !important; }
+
+.mvxxl {
+ margin-top: 40px !important;
+ margin-bottom: 40px !important; }
+
+.phxxl {
+ padding-left: 40px !important;
+ padding-right: 40px !important; }
+
+.mhxxl {
+ margin-left: 40px !important;
+ margin-right: 40px !important; }
+
+.ptxxl {
+ padding-top: 40px !important; }
+
+.mtxxl {
+ margin-top: 40px !important; }
+
+.prxxl {
+ padding-right: 40px !important; }
+
+.mrxxl {
+ margin-right: 40px !important; }
+
+.pbxxl {
+ padding-bottom: 40px !important; }
+
+.mbxxl {
+ margin-bottom: 40px !important; }
+
+.plxxl {
+ padding-left: 40px !important; }
+
+.mlxxl {
+ margin-left: 40px !important; }
+
+.paxxxl {
+ padding: 120px !important; }
+
+.maxxxl {
+ margin: 120px !important; }
+
+.pvxxxl {
+ padding-top: 120px !important;
+ padding-bottom: 120px !important; }
+
+.mvxxxl {
+ margin-top: 120px !important;
+ margin-bottom: 120px !important; }
+
+.phxxxl {
+ padding-left: 120px !important;
+ padding-right: 120px !important; }
+
+.mhxxxl {
+ margin-left: 120px !important;
+ margin-right: 120px !important; }
+
+.ptxxxl {
+ padding-top: 120px !important; }
+
+.mtxxxl {
+ margin-top: 120px !important; }
+
+.prxxxl {
+ padding-right: 120px !important; }
+
+.mrxxxl {
+ margin-right: 120px !important; }
+
+.pbxxxl {
+ padding-bottom: 120px !important; }
+
+.mbxxxl {
+ margin-bottom: 120px !important; }
+
+.plxxxl {
+ padding-left: 120px !important; }
+
+.mlxxxl {
+ margin-left: 120px !important; }
+
+.paxxxxl {
+ padding: 140px !important; }
+
+.maxxxxl {
+ margin: 140px !important; }
+
+.pvxxxxl {
+ padding-top: 140px !important;
+ padding-bottom: 140px !important; }
+
+.mvxxxxl {
+ margin-top: 140px !important;
+ margin-bottom: 140px !important; }
+
+.phxxxxl {
+ padding-left: 140px !important;
+ padding-right: 140px !important; }
+
+.mhxxxxl {
+ margin-left: 140px !important;
+ margin-right: 140px !important; }
+
+.ptxxxxl {
+ padding-top: 140px !important; }
+
+.mtxxxxl {
+ margin-top: 140px !important; }
+
+.prxxxxl {
+ padding-right: 140px !important; }
+
+.mrxxxxl {
+ margin-right: 140px !important; }
+
+.pbxxxxl {
+ padding-bottom: 140px !important; }
+
+.mbxxxxl {
+ margin-bottom: 140px !important; }
+
+.plxxxxl {
+ padding-left: 140px !important; }
+
+.mlxxxxl {
+ margin-left: 140px !important; }
+
+@media all and (max-width: 768px) {
+ .pan {
+ padding: 0 !important; }
+ .man {
+ margin: 0 !important; }
+ .pvn {
+ padding-top: 0 !important;
+ padding-bottom: 0 !important; }
+ .mvn {
+ margin-top: 0 !important;
+ margin-bottom: 0 !important; }
+ .phn {
+ padding-left: 0 !important;
+ padding-right: 0 !important; }
+ .mhn {
+ margin-left: 0 !important;
+ margin-right: 0 !important; }
+ .ptn {
+ padding-top: 0 !important; }
+ .mtn {
+ margin-top: 0 !important; }
+ .prn {
+ padding-right: 0 !important; }
+ .mrn {
+ margin-right: 0 !important; }
+ .pbn {
+ padding-bottom: 0 !important; }
+ .mbn {
+ margin-bottom: 0 !important; }
+ .pln {
+ padding-left: 0 !important; }
+ .mln {
+ margin-left: 0 !important; }
+ .pas {
+ padding: 5px !important; }
+ .mas {
+ margin: 5px !important; }
+ .pvs {
+ padding-top: 5px !important;
+ padding-bottom: 5px !important; }
+ .mvs {
+ margin-top: 5px !important;
+ margin-bottom: 5px !important; }
+ .phs {
+ padding-left: 5px !important;
+ padding-right: 5px !important; }
+ .mhs {
+ margin-left: 5px !important;
+ margin-right: 5px !important; }
+ .pts {
+ padding-top: 5px !important; }
+ .mts {
+ margin-top: 5px !important; }
+ .prs {
+ padding-right: 5px !important; }
+ .mrs {
+ margin-right: 5px !important; }
+ .pbs {
+ padding-bottom: 5px !important; }
+ .mbs {
+ margin-bottom: 5px !important; }
+ .pls {
+ padding-left: 5px !important; }
+ .mls {
+ margin-left: 5px !important; }
+ .pam {
+ padding: 7px !important; }
+ .mam {
+ margin: 7px !important; }
+ .pvm {
+ padding-top: 7px !important;
+ padding-bottom: 7px !important; }
+ .mvm {
+ margin-top: 7px !important;
+ margin-bottom: 7px !important; }
+ .phm {
+ padding-left: 7px !important;
+ padding-right: 7px !important; }
+ .mhm {
+ margin-left: 7px !important;
+ margin-right: 7px !important; }
+ .ptm {
+ padding-top: 7px !important; }
+ .mtm {
+ margin-top: 7px !important; }
+ .prm {
+ padding-right: 7px !important; }
+ .mrm {
+ margin-right: 7px !important; }
+ .pbm {
+ padding-bottom: 7px !important; }
+ .mbm {
+ margin-bottom: 7px !important; }
+ .plm {
+ padding-left: 7px !important; }
+ .mlm {
+ margin-left: 7px !important; }
+ .pal {
+ padding: 10px !important; }
+ .mal {
+ margin: 10px !important; }
+ .pvl {
+ padding-top: 10px !important;
+ padding-bottom: 10px !important; }
+ .mvl {
+ margin-top: 10px !important;
+ margin-bottom: 10px !important; }
+ .phl {
+ padding-left: 10px !important;
+ padding-right: 10px !important; }
+ .mhl {
+ margin-left: 10px !important;
+ margin-right: 10px !important; }
+ .ptl {
+ padding-top: 10px !important; }
+ .mtl {
+ margin-top: 10px !important; }
+ .prl {
+ padding-right: 10px !important; }
+ .mrl {
+ margin-right: 10px !important; }
+ .pbl {
+ padding-bottom: 10px !important; }
+ .mbl {
+ margin-bottom: 10px !important; }
+ .pll {
+ padding-left: 10px !important; }
+ .mll {
+ margin-left: 10px !important; }
+ .paxl {
+ padding: 15px !important; }
+ .maxl {
+ margin: 15px !important; }
+ .pvxl {
+ padding-top: 15px !important;
+ padding-bottom: 15px !important; }
+ .mvxl {
+ margin-top: 15px !important;
+ margin-bottom: 15px !important; }
+ .phxl {
+ padding-left: 15px !important;
+ padding-right: 15px !important; }
+ .mhxl {
+ margin-left: 15px !important;
+ margin-right: 15px !important; }
+ .ptxl {
+ padding-top: 15px !important; }
+ .mtxl {
+ margin-top: 15px !important; }
+ .prxl {
+ padding-right: 15px !important; }
+ .mrxl {
+ margin-right: 15px !important; }
+ .pbxl {
+ padding-bottom: 15px !important; }
+ .mbxl {
+ margin-bottom: 15px !important; }
+ .plxl {
+ padding-left: 15px !important; }
+ .mlxl {
+ margin-left: 15px !important; }
+ .paxxl {
+ padding: 20px !important; }
+ .maxxl {
+ margin: 20px !important; }
+ .pvxxl {
+ padding-top: 20px !important;
+ padding-bottom: 20px !important; }
+ .mvxxl {
+ margin-top: 20px !important;
+ margin-bottom: 20px !important; }
+ .phxxl {
+ padding-left: 20px !important;
+ padding-right: 20px !important; }
+ .mhxxl {
+ margin-left: 20px !important;
+ margin-right: 20px !important; }
+ .ptxxl {
+ padding-top: 20px !important; }
+ .mtxxl {
+ margin-top: 20px !important; }
+ .prxxl {
+ padding-right: 20px !important; }
+ .mrxxl {
+ margin-right: 20px !important; }
+ .pbxxl {
+ padding-bottom: 20px !important; }
+ .mbxxl {
+ margin-bottom: 20px !important; }
+ .plxxl {
+ padding-left: 20px !important; }
+ .mlxxl {
+ margin-left: 20px !important; }
+ .paxxxl {
+ padding: 30px !important; }
+ .maxxxl {
+ margin: 30px !important; }
+ .pvxxxl {
+ padding-top: 30px !important;
+ padding-bottom: 30px !important; }
+ .mvxxxl {
+ margin-top: 30px !important;
+ margin-bottom: 30px !important; }
+ .phxxxl {
+ padding-left: 30px !important;
+ padding-right: 30px !important; }
+ .mhxxxl {
+ margin-left: 30px !important;
+ margin-right: 30px !important; }
+ .ptxxxl {
+ padding-top: 30px !important; }
+ .mtxxxl {
+ margin-top: 30px !important; }
+ .prxxxl {
+ padding-right: 30px !important; }
+ .mrxxxl {
+ margin-right: 30px !important; }
+ .pbxxxl {
+ padding-bottom: 30px !important; }
+ .mbxxxl {
+ margin-bottom: 30px !important; }
+ .plxxxl {
+ padding-left: 30px !important; }
+ .mlxxxl {
+ margin-left: 30px !important; }
+ .paxxxxl {
+ padding: 30px !important; }
+ .maxxxxl {
+ margin: 30px !important; }
+ .pvxxxxl {
+ padding-top: 30px !important;
+ padding-bottom: 30px !important; }
+ .mvxxxxl {
+ margin-top: 30px !important;
+ margin-bottom: 30px !important; }
+ .phxxxxl {
+ padding-left: 30px !important;
+ padding-right: 30px !important; }
+ .mhxxxxl {
+ margin-left: 30px !important;
+ margin-right: 30px !important; }
+ .ptxxxxl {
+ padding-top: 30px !important; }
+ .mtxxxxl {
+ margin-top: 30px !important; }
+ .prxxxxl {
+ padding-right: 30px !important; }
+ .mrxxxxl {
+ margin-right: 30px !important; }
+ .pbxxxxl {
+ padding-bottom: 30px !important; }
+ .mbxxxxl {
+ margin-bottom: 30px !important; }
+ .plxxxxl {
+ padding-left: 30px !important; }
+ .mlxxxxl {
+ margin-left: 30px !important; } }
+
+/*doc
+---
+title: List Spacing
+name: list_whitespace
+parent: list
+---
+
+Most lists come with built in default spacing that should work for you. However, if you find yourself needing to modify the spacing, you should do that with list spacing classes rather than whitespace classes. A single class can be applied to the list and all direct children will be modified.
+The classes are constructed by specifying ``.
+
+
+
+
+
+
+ Type:
+
+ llist
+ Space on the inside of each of the li direct children of the element
+
+
+ Location:
+
+ hhorizontal
+ Adds spacing to the left and right of the li.
+
+
+ vvertical
+ Adds spacing to the top and bottom of the li.
+
+
+ Size:
+
+ xlextra large
+ Adds 21 pixels of space
+
+
+ llarge
+ Adds 10 pixels of space
+
+
+ mmedium
+ Adds 7 pixels of space
+
+
+ ssmall
+ Adds 5 pixels of space
+
+
+ nnone
+ Sets any existing space to 0
+
+
+
+
+### Vertical Spacing Options (`n` -> `xl`)
+
+```html_example_table
+
+
+
+
+
+
+
+
+
+```
+
+### Horizontal Spacing Options (`n` -> `xl`)
+
+
+```html_example_table
+
+
+
+
+
+
+
+
+
+```
+
+*/
\ No newline at end of file
diff --git a/release/pui-v1.9.1/pivotal-ui-react.js b/release/pui-v1.9.1/pivotal-ui-react.js
new file mode 100644
index 000000000..9adb3222f
--- /dev/null
+++ b/release/pui-v1.9.1/pivotal-ui-react.js
@@ -0,0 +1,59966 @@
+/******/ (function(modules) { // webpackBootstrap
+/******/ // The module cache
+/******/ var installedModules = {};
+/******/
+/******/ // The require function
+/******/ function __webpack_require__(moduleId) {
+/******/
+/******/ // Check if module is in cache
+/******/ if(installedModules[moduleId])
+/******/ return installedModules[moduleId].exports;
+/******/
+/******/ // Create a new module (and put it into the cache)
+/******/ var module = installedModules[moduleId] = {
+/******/ exports: {},
+/******/ id: moduleId,
+/******/ loaded: false
+/******/ };
+/******/
+/******/ // Execute the module function
+/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
+/******/
+/******/ // Flag the module as loaded
+/******/ module.loaded = true;
+/******/
+/******/ // Return the exports of the module
+/******/ return module.exports;
+/******/ }
+/******/
+/******/
+/******/ // expose the modules object (__webpack_modules__)
+/******/ __webpack_require__.m = modules;
+/******/
+/******/ // expose the module cache
+/******/ __webpack_require__.c = installedModules;
+/******/
+/******/ // __webpack_public_path__
+/******/ __webpack_require__.p = "";
+/******/
+/******/ // Load entry module and return exports
+/******/ return __webpack_require__(0);
+/******/ })
+/************************************************************************/
+/******/ ([
+/* 0 */
+/***/ function(module, exports, __webpack_require__) {
+
+ /* WEBPACK VAR INJECTION */(function(global) {'use strict';
+
+ global.$ = global.jQuery = __webpack_require__(1);
+ global._ = __webpack_require__(2);
+ __webpack_require__(4);
+ __webpack_require__(5);
+
+ __webpack_require__(6);
+
+ __webpack_require__(25)();
+ __webpack_require__(26);
+
+ global.React = __webpack_require__(31);
+
+ global.UI = __webpack_require__(204);
+ /* WEBPACK VAR INJECTION */}.call(exports, (function() { return this; }())))
+
+/***/ },
+/* 1 */
+/***/ function(module, exports, __webpack_require__) {
+
+ var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;/*!
+ * jQuery JavaScript Library v2.1.4
+ * http://jquery.com/
+ *
+ * Includes Sizzle.js
+ * http://sizzlejs.com/
+ *
+ * Copyright 2005, 2014 jQuery Foundation, Inc. and other contributors
+ * Released under the MIT license
+ * http://jquery.org/license
+ *
+ * Date: 2015-04-28T16:01Z
+ */
+
+ (function( global, factory ) {
+
+ if ( typeof module === "object" && typeof module.exports === "object" ) {
+ // For CommonJS and CommonJS-like environments where a proper `window`
+ // is present, execute the factory and get jQuery.
+ // For environments that do not have a `window` with a `document`
+ // (such as Node.js), expose a factory as module.exports.
+ // This accentuates the need for the creation of a real `window`.
+ // e.g. var jQuery = require("jquery")(window);
+ // See ticket #14549 for more info.
+ module.exports = global.document ?
+ factory( global, true ) :
+ function( w ) {
+ if ( !w.document ) {
+ throw new Error( "jQuery requires a window with a document" );
+ }
+ return factory( w );
+ };
+ } else {
+ factory( global );
+ }
+
+ // Pass this if window is not defined yet
+ }(typeof window !== "undefined" ? window : this, function( window, noGlobal ) {
+
+ // Support: Firefox 18+
+ // Can't be in strict mode, several libs including ASP.NET trace
+ // the stack via arguments.caller.callee and Firefox dies if
+ // you try to trace through "use strict" call chains. (#13335)
+ //
+
+ var arr = [];
+
+ var slice = arr.slice;
+
+ var concat = arr.concat;
+
+ var push = arr.push;
+
+ var indexOf = arr.indexOf;
+
+ var class2type = {};
+
+ var toString = class2type.toString;
+
+ var hasOwn = class2type.hasOwnProperty;
+
+ var support = {};
+
+
+
+ var
+ // Use the correct document accordingly with window argument (sandbox)
+ document = window.document,
+
+ version = "2.1.4",
+
+ // Define a local copy of jQuery
+ jQuery = function( selector, context ) {
+ // The jQuery object is actually just the init constructor 'enhanced'
+ // Need init if jQuery is called (just allow error to be thrown if not included)
+ return new jQuery.fn.init( selector, context );
+ },
+
+ // Support: Android<4.1
+ // Make sure we trim BOM and NBSP
+ rtrim = /^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g,
+
+ // Matches dashed string for camelizing
+ rmsPrefix = /^-ms-/,
+ rdashAlpha = /-([\da-z])/gi,
+
+ // Used by jQuery.camelCase as callback to replace()
+ fcamelCase = function( all, letter ) {
+ return letter.toUpperCase();
+ };
+
+ jQuery.fn = jQuery.prototype = {
+ // The current version of jQuery being used
+ jquery: version,
+
+ constructor: jQuery,
+
+ // Start with an empty selector
+ selector: "",
+
+ // The default length of a jQuery object is 0
+ length: 0,
+
+ toArray: function() {
+ return slice.call( this );
+ },
+
+ // Get the Nth element in the matched element set OR
+ // Get the whole matched element set as a clean array
+ get: function( num ) {
+ return num != null ?
+
+ // Return just the one element from the set
+ ( num < 0 ? this[ num + this.length ] : this[ num ] ) :
+
+ // Return all the elements in a clean array
+ slice.call( this );
+ },
+
+ // Take an array of elements and push it onto the stack
+ // (returning the new matched element set)
+ pushStack: function( elems ) {
+
+ // Build a new jQuery matched element set
+ var ret = jQuery.merge( this.constructor(), elems );
+
+ // Add the old object onto the stack (as a reference)
+ ret.prevObject = this;
+ ret.context = this.context;
+
+ // Return the newly-formed element set
+ return ret;
+ },
+
+ // Execute a callback for every element in the matched set.
+ // (You can seed the arguments with an array of args, but this is
+ // only used internally.)
+ each: function( callback, args ) {
+ return jQuery.each( this, callback, args );
+ },
+
+ map: function( callback ) {
+ return this.pushStack( jQuery.map(this, function( elem, i ) {
+ return callback.call( elem, i, elem );
+ }));
+ },
+
+ slice: function() {
+ return this.pushStack( slice.apply( this, arguments ) );
+ },
+
+ first: function() {
+ return this.eq( 0 );
+ },
+
+ last: function() {
+ return this.eq( -1 );
+ },
+
+ eq: function( i ) {
+ var len = this.length,
+ j = +i + ( i < 0 ? len : 0 );
+ return this.pushStack( j >= 0 && j < len ? [ this[j] ] : [] );
+ },
+
+ end: function() {
+ return this.prevObject || this.constructor(null);
+ },
+
+ // For internal use only.
+ // Behaves like an Array's method, not like a jQuery method.
+ push: push,
+ sort: arr.sort,
+ splice: arr.splice
+ };
+
+ jQuery.extend = jQuery.fn.extend = function() {
+ var options, name, src, copy, copyIsArray, clone,
+ target = arguments[0] || {},
+ i = 1,
+ length = arguments.length,
+ deep = false;
+
+ // Handle a deep copy situation
+ if ( typeof target === "boolean" ) {
+ deep = target;
+
+ // Skip the boolean and the target
+ target = arguments[ i ] || {};
+ i++;
+ }
+
+ // Handle case when target is a string or something (possible in deep copy)
+ if ( typeof target !== "object" && !jQuery.isFunction(target) ) {
+ target = {};
+ }
+
+ // Extend jQuery itself if only one argument is passed
+ if ( i === length ) {
+ target = this;
+ i--;
+ }
+
+ for ( ; i < length; i++ ) {
+ // Only deal with non-null/undefined values
+ if ( (options = arguments[ i ]) != null ) {
+ // Extend the base object
+ for ( name in options ) {
+ src = target[ name ];
+ copy = options[ name ];
+
+ // Prevent never-ending loop
+ if ( target === copy ) {
+ continue;
+ }
+
+ // Recurse if we're merging plain objects or arrays
+ if ( deep && copy && ( jQuery.isPlainObject(copy) || (copyIsArray = jQuery.isArray(copy)) ) ) {
+ if ( copyIsArray ) {
+ copyIsArray = false;
+ clone = src && jQuery.isArray(src) ? src : [];
+
+ } else {
+ clone = src && jQuery.isPlainObject(src) ? src : {};
+ }
+
+ // Never move original objects, clone them
+ target[ name ] = jQuery.extend( deep, clone, copy );
+
+ // Don't bring in undefined values
+ } else if ( copy !== undefined ) {
+ target[ name ] = copy;
+ }
+ }
+ }
+ }
+
+ // Return the modified object
+ return target;
+ };
+
+ jQuery.extend({
+ // Unique for each copy of jQuery on the page
+ expando: "jQuery" + ( version + Math.random() ).replace( /\D/g, "" ),
+
+ // Assume jQuery is ready without the ready module
+ isReady: true,
+
+ error: function( msg ) {
+ throw new Error( msg );
+ },
+
+ noop: function() {},
+
+ isFunction: function( obj ) {
+ return jQuery.type(obj) === "function";
+ },
+
+ isArray: Array.isArray,
+
+ isWindow: function( obj ) {
+ return obj != null && obj === obj.window;
+ },
+
+ isNumeric: function( obj ) {
+ // parseFloat NaNs numeric-cast false positives (null|true|false|"")
+ // ...but misinterprets leading-number strings, particularly hex literals ("0x...")
+ // subtraction forces infinities to NaN
+ // adding 1 corrects loss of precision from parseFloat (#15100)
+ return !jQuery.isArray( obj ) && (obj - parseFloat( obj ) + 1) >= 0;
+ },
+
+ isPlainObject: function( obj ) {
+ // Not plain objects:
+ // - Any object or value whose internal [[Class]] property is not "[object Object]"
+ // - DOM nodes
+ // - window
+ if ( jQuery.type( obj ) !== "object" || obj.nodeType || jQuery.isWindow( obj ) ) {
+ return false;
+ }
+
+ if ( obj.constructor &&
+ !hasOwn.call( obj.constructor.prototype, "isPrototypeOf" ) ) {
+ return false;
+ }
+
+ // If the function hasn't returned already, we're confident that
+ // |obj| is a plain object, created by {} or constructed with new Object
+ return true;
+ },
+
+ isEmptyObject: function( obj ) {
+ var name;
+ for ( name in obj ) {
+ return false;
+ }
+ return true;
+ },
+
+ type: function( obj ) {
+ if ( obj == null ) {
+ return obj + "";
+ }
+ // Support: Android<4.0, iOS<6 (functionish RegExp)
+ return typeof obj === "object" || typeof obj === "function" ?
+ class2type[ toString.call(obj) ] || "object" :
+ typeof obj;
+ },
+
+ // Evaluates a script in a global context
+ globalEval: function( code ) {
+ var script,
+ indirect = eval;
+
+ code = jQuery.trim( code );
+
+ if ( code ) {
+ // If the code includes a valid, prologue position
+ // strict mode pragma, execute code by injecting a
+ // script tag into the document.
+ if ( code.indexOf("use strict") === 1 ) {
+ script = document.createElement("script");
+ script.text = code;
+ document.head.appendChild( script ).parentNode.removeChild( script );
+ } else {
+ // Otherwise, avoid the DOM node creation, insertion
+ // and removal by using an indirect global eval
+ indirect( code );
+ }
+ }
+ },
+
+ // Convert dashed to camelCase; used by the css and data modules
+ // Support: IE9-11+
+ // Microsoft forgot to hump their vendor prefix (#9572)
+ camelCase: function( string ) {
+ return string.replace( rmsPrefix, "ms-" ).replace( rdashAlpha, fcamelCase );
+ },
+
+ nodeName: function( elem, name ) {
+ return elem.nodeName && elem.nodeName.toLowerCase() === name.toLowerCase();
+ },
+
+ // args is for internal usage only
+ each: function( obj, callback, args ) {
+ var value,
+ i = 0,
+ length = obj.length,
+ isArray = isArraylike( obj );
+
+ if ( args ) {
+ if ( isArray ) {
+ for ( ; i < length; i++ ) {
+ value = callback.apply( obj[ i ], args );
+
+ if ( value === false ) {
+ break;
+ }
+ }
+ } else {
+ for ( i in obj ) {
+ value = callback.apply( obj[ i ], args );
+
+ if ( value === false ) {
+ break;
+ }
+ }
+ }
+
+ // A special, fast, case for the most common use of each
+ } else {
+ if ( isArray ) {
+ for ( ; i < length; i++ ) {
+ value = callback.call( obj[ i ], i, obj[ i ] );
+
+ if ( value === false ) {
+ break;
+ }
+ }
+ } else {
+ for ( i in obj ) {
+ value = callback.call( obj[ i ], i, obj[ i ] );
+
+ if ( value === false ) {
+ break;
+ }
+ }
+ }
+ }
+
+ return obj;
+ },
+
+ // Support: Android<4.1
+ trim: function( text ) {
+ return text == null ?
+ "" :
+ ( text + "" ).replace( rtrim, "" );
+ },
+
+ // results is for internal usage only
+ makeArray: function( arr, results ) {
+ var ret = results || [];
+
+ if ( arr != null ) {
+ if ( isArraylike( Object(arr) ) ) {
+ jQuery.merge( ret,
+ typeof arr === "string" ?
+ [ arr ] : arr
+ );
+ } else {
+ push.call( ret, arr );
+ }
+ }
+
+ return ret;
+ },
+
+ inArray: function( elem, arr, i ) {
+ return arr == null ? -1 : indexOf.call( arr, elem, i );
+ },
+
+ merge: function( first, second ) {
+ var len = +second.length,
+ j = 0,
+ i = first.length;
+
+ for ( ; j < len; j++ ) {
+ first[ i++ ] = second[ j ];
+ }
+
+ first.length = i;
+
+ return first;
+ },
+
+ grep: function( elems, callback, invert ) {
+ var callbackInverse,
+ matches = [],
+ i = 0,
+ length = elems.length,
+ callbackExpect = !invert;
+
+ // Go through the array, only saving the items
+ // that pass the validator function
+ for ( ; i < length; i++ ) {
+ callbackInverse = !callback( elems[ i ], i );
+ if ( callbackInverse !== callbackExpect ) {
+ matches.push( elems[ i ] );
+ }
+ }
+
+ return matches;
+ },
+
+ // arg is for internal usage only
+ map: function( elems, callback, arg ) {
+ var value,
+ i = 0,
+ length = elems.length,
+ isArray = isArraylike( elems ),
+ ret = [];
+
+ // Go through the array, translating each of the items to their new values
+ if ( isArray ) {
+ for ( ; i < length; i++ ) {
+ value = callback( elems[ i ], i, arg );
+
+ if ( value != null ) {
+ ret.push( value );
+ }
+ }
+
+ // Go through every key on the object,
+ } else {
+ for ( i in elems ) {
+ value = callback( elems[ i ], i, arg );
+
+ if ( value != null ) {
+ ret.push( value );
+ }
+ }
+ }
+
+ // Flatten any nested arrays
+ return concat.apply( [], ret );
+ },
+
+ // A global GUID counter for objects
+ guid: 1,
+
+ // Bind a function to a context, optionally partially applying any
+ // arguments.
+ proxy: function( fn, context ) {
+ var tmp, args, proxy;
+
+ if ( typeof context === "string" ) {
+ tmp = fn[ context ];
+ context = fn;
+ fn = tmp;
+ }
+
+ // Quick check to determine if target is callable, in the spec
+ // this throws a TypeError, but we will just return undefined.
+ if ( !jQuery.isFunction( fn ) ) {
+ return undefined;
+ }
+
+ // Simulated bind
+ args = slice.call( arguments, 2 );
+ proxy = function() {
+ return fn.apply( context || this, args.concat( slice.call( arguments ) ) );
+ };
+
+ // Set the guid of unique handler to the same of original handler, so it can be removed
+ proxy.guid = fn.guid = fn.guid || jQuery.guid++;
+
+ return proxy;
+ },
+
+ now: Date.now,
+
+ // jQuery.support is not used in Core but other projects attach their
+ // properties to it so it needs to exist.
+ support: support
+ });
+
+ // Populate the class2type map
+ jQuery.each("Boolean Number String Function Array Date RegExp Object Error".split(" "), function(i, name) {
+ class2type[ "[object " + name + "]" ] = name.toLowerCase();
+ });
+
+ function isArraylike( obj ) {
+
+ // Support: iOS 8.2 (not reproducible in simulator)
+ // `in` check used to prevent JIT error (gh-2145)
+ // hasOwn isn't used here due to false negatives
+ // regarding Nodelist length in IE
+ var length = "length" in obj && obj.length,
+ type = jQuery.type( obj );
+
+ if ( type === "function" || jQuery.isWindow( obj ) ) {
+ return false;
+ }
+
+ if ( obj.nodeType === 1 && length ) {
+ return true;
+ }
+
+ return type === "array" || length === 0 ||
+ typeof length === "number" && length > 0 && ( length - 1 ) in obj;
+ }
+ var Sizzle =
+ /*!
+ * Sizzle CSS Selector Engine v2.2.0-pre
+ * http://sizzlejs.com/
+ *
+ * Copyright 2008, 2014 jQuery Foundation, Inc. and other contributors
+ * Released under the MIT license
+ * http://jquery.org/license
+ *
+ * Date: 2014-12-16
+ */
+ (function( window ) {
+
+ var i,
+ support,
+ Expr,
+ getText,
+ isXML,
+ tokenize,
+ compile,
+ select,
+ outermostContext,
+ sortInput,
+ hasDuplicate,
+
+ // Local document vars
+ setDocument,
+ document,
+ docElem,
+ documentIsHTML,
+ rbuggyQSA,
+ rbuggyMatches,
+ matches,
+ contains,
+
+ // Instance-specific data
+ expando = "sizzle" + 1 * new Date(),
+ preferredDoc = window.document,
+ dirruns = 0,
+ done = 0,
+ classCache = createCache(),
+ tokenCache = createCache(),
+ compilerCache = createCache(),
+ sortOrder = function( a, b ) {
+ if ( a === b ) {
+ hasDuplicate = true;
+ }
+ return 0;
+ },
+
+ // General-purpose constants
+ MAX_NEGATIVE = 1 << 31,
+
+ // Instance methods
+ hasOwn = ({}).hasOwnProperty,
+ arr = [],
+ pop = arr.pop,
+ push_native = arr.push,
+ push = arr.push,
+ slice = arr.slice,
+ // Use a stripped-down indexOf as it's faster than native
+ // http://jsperf.com/thor-indexof-vs-for/5
+ indexOf = function( list, elem ) {
+ var i = 0,
+ len = list.length;
+ for ( ; i < len; i++ ) {
+ if ( list[i] === elem ) {
+ return i;
+ }
+ }
+ return -1;
+ },
+
+ booleans = "checked|selected|async|autofocus|autoplay|controls|defer|disabled|hidden|ismap|loop|multiple|open|readonly|required|scoped",
+
+ // Regular expressions
+
+ // Whitespace characters http://www.w3.org/TR/css3-selectors/#whitespace
+ whitespace = "[\\x20\\t\\r\\n\\f]",
+ // http://www.w3.org/TR/css3-syntax/#characters
+ characterEncoding = "(?:\\\\.|[\\w-]|[^\\x00-\\xa0])+",
+
+ // Loosely modeled on CSS identifier characters
+ // An unquoted value should be a CSS identifier http://www.w3.org/TR/css3-selectors/#attribute-selectors
+ // Proper syntax: http://www.w3.org/TR/CSS21/syndata.html#value-def-identifier
+ identifier = characterEncoding.replace( "w", "w#" ),
+
+ // Attribute selectors: http://www.w3.org/TR/selectors/#attribute-selectors
+ attributes = "\\[" + whitespace + "*(" + characterEncoding + ")(?:" + whitespace +
+ // Operator (capture 2)
+ "*([*^$|!~]?=)" + whitespace +
+ // "Attribute values must be CSS identifiers [capture 5] or strings [capture 3 or capture 4]"
+ "*(?:'((?:\\\\.|[^\\\\'])*)'|\"((?:\\\\.|[^\\\\\"])*)\"|(" + identifier + "))|)" + whitespace +
+ "*\\]",
+
+ pseudos = ":(" + characterEncoding + ")(?:\\((" +
+ // To reduce the number of selectors needing tokenize in the preFilter, prefer arguments:
+ // 1. quoted (capture 3; capture 4 or capture 5)
+ "('((?:\\\\.|[^\\\\'])*)'|\"((?:\\\\.|[^\\\\\"])*)\")|" +
+ // 2. simple (capture 6)
+ "((?:\\\\.|[^\\\\()[\\]]|" + attributes + ")*)|" +
+ // 3. anything else (capture 2)
+ ".*" +
+ ")\\)|)",
+
+ // Leading and non-escaped trailing whitespace, capturing some non-whitespace characters preceding the latter
+ rwhitespace = new RegExp( whitespace + "+", "g" ),
+ rtrim = new RegExp( "^" + whitespace + "+|((?:^|[^\\\\])(?:\\\\.)*)" + whitespace + "+$", "g" ),
+
+ rcomma = new RegExp( "^" + whitespace + "*," + whitespace + "*" ),
+ rcombinators = new RegExp( "^" + whitespace + "*([>+~]|" + whitespace + ")" + whitespace + "*" ),
+
+ rattributeQuotes = new RegExp( "=" + whitespace + "*([^\\]'\"]*?)" + whitespace + "*\\]", "g" ),
+
+ rpseudo = new RegExp( pseudos ),
+ ridentifier = new RegExp( "^" + identifier + "$" ),
+
+ matchExpr = {
+ "ID": new RegExp( "^#(" + characterEncoding + ")" ),
+ "CLASS": new RegExp( "^\\.(" + characterEncoding + ")" ),
+ "TAG": new RegExp( "^(" + characterEncoding.replace( "w", "w*" ) + ")" ),
+ "ATTR": new RegExp( "^" + attributes ),
+ "PSEUDO": new RegExp( "^" + pseudos ),
+ "CHILD": new RegExp( "^:(only|first|last|nth|nth-last)-(child|of-type)(?:\\(" + whitespace +
+ "*(even|odd|(([+-]|)(\\d*)n|)" + whitespace + "*(?:([+-]|)" + whitespace +
+ "*(\\d+)|))" + whitespace + "*\\)|)", "i" ),
+ "bool": new RegExp( "^(?:" + booleans + ")$", "i" ),
+ // For use in libraries implementing .is()
+ // We use this for POS matching in `select`
+ "needsContext": new RegExp( "^" + whitespace + "*[>+~]|:(even|odd|eq|gt|lt|nth|first|last)(?:\\(" +
+ whitespace + "*((?:-\\d)?\\d*)" + whitespace + "*\\)|)(?=[^-]|$)", "i" )
+ },
+
+ rinputs = /^(?:input|select|textarea|button)$/i,
+ rheader = /^h\d$/i,
+
+ rnative = /^[^{]+\{\s*\[native \w/,
+
+ // Easily-parseable/retrievable ID or TAG or CLASS selectors
+ rquickExpr = /^(?:#([\w-]+)|(\w+)|\.([\w-]+))$/,
+
+ rsibling = /[+~]/,
+ rescape = /'|\\/g,
+
+ // CSS escapes http://www.w3.org/TR/CSS21/syndata.html#escaped-characters
+ runescape = new RegExp( "\\\\([\\da-f]{1,6}" + whitespace + "?|(" + whitespace + ")|.)", "ig" ),
+ funescape = function( _, escaped, escapedWhitespace ) {
+ var high = "0x" + escaped - 0x10000;
+ // NaN means non-codepoint
+ // Support: Firefox<24
+ // Workaround erroneous numeric interpretation of +"0x"
+ return high !== high || escapedWhitespace ?
+ escaped :
+ high < 0 ?
+ // BMP codepoint
+ String.fromCharCode( high + 0x10000 ) :
+ // Supplemental Plane codepoint (surrogate pair)
+ String.fromCharCode( high >> 10 | 0xD800, high & 0x3FF | 0xDC00 );
+ },
+
+ // Used for iframes
+ // See setDocument()
+ // Removing the function wrapper causes a "Permission Denied"
+ // error in IE
+ unloadHandler = function() {
+ setDocument();
+ };
+
+ // Optimize for push.apply( _, NodeList )
+ try {
+ push.apply(
+ (arr = slice.call( preferredDoc.childNodes )),
+ preferredDoc.childNodes
+ );
+ // Support: Android<4.0
+ // Detect silently failing push.apply
+ arr[ preferredDoc.childNodes.length ].nodeType;
+ } catch ( e ) {
+ push = { apply: arr.length ?
+
+ // Leverage slice if possible
+ function( target, els ) {
+ push_native.apply( target, slice.call(els) );
+ } :
+
+ // Support: IE<9
+ // Otherwise append directly
+ function( target, els ) {
+ var j = target.length,
+ i = 0;
+ // Can't trust NodeList.length
+ while ( (target[j++] = els[i++]) ) {}
+ target.length = j - 1;
+ }
+ };
+ }
+
+ function Sizzle( selector, context, results, seed ) {
+ var match, elem, m, nodeType,
+ // QSA vars
+ i, groups, old, nid, newContext, newSelector;
+
+ if ( ( context ? context.ownerDocument || context : preferredDoc ) !== document ) {
+ setDocument( context );
+ }
+
+ context = context || document;
+ results = results || [];
+ nodeType = context.nodeType;
+
+ if ( typeof selector !== "string" || !selector ||
+ nodeType !== 1 && nodeType !== 9 && nodeType !== 11 ) {
+
+ return results;
+ }
+
+ if ( !seed && documentIsHTML ) {
+
+ // Try to shortcut find operations when possible (e.g., not under DocumentFragment)
+ if ( nodeType !== 11 && (match = rquickExpr.exec( selector )) ) {
+ // Speed-up: Sizzle("#ID")
+ if ( (m = match[1]) ) {
+ if ( nodeType === 9 ) {
+ elem = context.getElementById( m );
+ // Check parentNode to catch when Blackberry 4.6 returns
+ // nodes that are no longer in the document (jQuery #6963)
+ if ( elem && elem.parentNode ) {
+ // Handle the case where IE, Opera, and Webkit return items
+ // by name instead of ID
+ if ( elem.id === m ) {
+ results.push( elem );
+ return results;
+ }
+ } else {
+ return results;
+ }
+ } else {
+ // Context is not a document
+ if ( context.ownerDocument && (elem = context.ownerDocument.getElementById( m )) &&
+ contains( context, elem ) && elem.id === m ) {
+ results.push( elem );
+ return results;
+ }
+ }
+
+ // Speed-up: Sizzle("TAG")
+ } else if ( match[2] ) {
+ push.apply( results, context.getElementsByTagName( selector ) );
+ return results;
+
+ // Speed-up: Sizzle(".CLASS")
+ } else if ( (m = match[3]) && support.getElementsByClassName ) {
+ push.apply( results, context.getElementsByClassName( m ) );
+ return results;
+ }
+ }
+
+ // QSA path
+ if ( support.qsa && (!rbuggyQSA || !rbuggyQSA.test( selector )) ) {
+ nid = old = expando;
+ newContext = context;
+ newSelector = nodeType !== 1 && selector;
+
+ // qSA works strangely on Element-rooted queries
+ // We can work around this by specifying an extra ID on the root
+ // and working up from there (Thanks to Andrew Dupont for the technique)
+ // IE 8 doesn't work on object elements
+ if ( nodeType === 1 && context.nodeName.toLowerCase() !== "object" ) {
+ groups = tokenize( selector );
+
+ if ( (old = context.getAttribute("id")) ) {
+ nid = old.replace( rescape, "\\$&" );
+ } else {
+ context.setAttribute( "id", nid );
+ }
+ nid = "[id='" + nid + "'] ";
+
+ i = groups.length;
+ while ( i-- ) {
+ groups[i] = nid + toSelector( groups[i] );
+ }
+ newContext = rsibling.test( selector ) && testContext( context.parentNode ) || context;
+ newSelector = groups.join(",");
+ }
+
+ if ( newSelector ) {
+ try {
+ push.apply( results,
+ newContext.querySelectorAll( newSelector )
+ );
+ return results;
+ } catch(qsaError) {
+ } finally {
+ if ( !old ) {
+ context.removeAttribute("id");
+ }
+ }
+ }
+ }
+ }
+
+ // All others
+ return select( selector.replace( rtrim, "$1" ), context, results, seed );
+ }
+
+ /**
+ * Create key-value caches of limited size
+ * @returns {Function(string, Object)} Returns the Object data after storing it on itself with
+ * property name the (space-suffixed) string and (if the cache is larger than Expr.cacheLength)
+ * deleting the oldest entry
+ */
+ function createCache() {
+ var keys = [];
+
+ function cache( key, value ) {
+ // Use (key + " ") to avoid collision with native prototype properties (see Issue #157)
+ if ( keys.push( key + " " ) > Expr.cacheLength ) {
+ // Only keep the most recent entries
+ delete cache[ keys.shift() ];
+ }
+ return (cache[ key + " " ] = value);
+ }
+ return cache;
+ }
+
+ /**
+ * Mark a function for special use by Sizzle
+ * @param {Function} fn The function to mark
+ */
+ function markFunction( fn ) {
+ fn[ expando ] = true;
+ return fn;
+ }
+
+ /**
+ * Support testing using an element
+ * @param {Function} fn Passed the created div and expects a boolean result
+ */
+ function assert( fn ) {
+ var div = document.createElement("div");
+
+ try {
+ return !!fn( div );
+ } catch (e) {
+ return false;
+ } finally {
+ // Remove from its parent by default
+ if ( div.parentNode ) {
+ div.parentNode.removeChild( div );
+ }
+ // release memory in IE
+ div = null;
+ }
+ }
+
+ /**
+ * Adds the same handler for all of the specified attrs
+ * @param {String} attrs Pipe-separated list of attributes
+ * @param {Function} handler The method that will be applied
+ */
+ function addHandle( attrs, handler ) {
+ var arr = attrs.split("|"),
+ i = attrs.length;
+
+ while ( i-- ) {
+ Expr.attrHandle[ arr[i] ] = handler;
+ }
+ }
+
+ /**
+ * Checks document order of two siblings
+ * @param {Element} a
+ * @param {Element} b
+ * @returns {Number} Returns less than 0 if a precedes b, greater than 0 if a follows b
+ */
+ function siblingCheck( a, b ) {
+ var cur = b && a,
+ diff = cur && a.nodeType === 1 && b.nodeType === 1 &&
+ ( ~b.sourceIndex || MAX_NEGATIVE ) -
+ ( ~a.sourceIndex || MAX_NEGATIVE );
+
+ // Use IE sourceIndex if available on both nodes
+ if ( diff ) {
+ return diff;
+ }
+
+ // Check if b follows a
+ if ( cur ) {
+ while ( (cur = cur.nextSibling) ) {
+ if ( cur === b ) {
+ return -1;
+ }
+ }
+ }
+
+ return a ? 1 : -1;
+ }
+
+ /**
+ * Returns a function to use in pseudos for input types
+ * @param {String} type
+ */
+ function createInputPseudo( type ) {
+ return function( elem ) {
+ var name = elem.nodeName.toLowerCase();
+ return name === "input" && elem.type === type;
+ };
+ }
+
+ /**
+ * Returns a function to use in pseudos for buttons
+ * @param {String} type
+ */
+ function createButtonPseudo( type ) {
+ return function( elem ) {
+ var name = elem.nodeName.toLowerCase();
+ return (name === "input" || name === "button") && elem.type === type;
+ };
+ }
+
+ /**
+ * Returns a function to use in pseudos for positionals
+ * @param {Function} fn
+ */
+ function createPositionalPseudo( fn ) {
+ return markFunction(function( argument ) {
+ argument = +argument;
+ return markFunction(function( seed, matches ) {
+ var j,
+ matchIndexes = fn( [], seed.length, argument ),
+ i = matchIndexes.length;
+
+ // Match elements found at the specified indexes
+ while ( i-- ) {
+ if ( seed[ (j = matchIndexes[i]) ] ) {
+ seed[j] = !(matches[j] = seed[j]);
+ }
+ }
+ });
+ });
+ }
+
+ /**
+ * Checks a node for validity as a Sizzle context
+ * @param {Element|Object=} context
+ * @returns {Element|Object|Boolean} The input node if acceptable, otherwise a falsy value
+ */
+ function testContext( context ) {
+ return context && typeof context.getElementsByTagName !== "undefined" && context;
+ }
+
+ // Expose support vars for convenience
+ support = Sizzle.support = {};
+
+ /**
+ * Detects XML nodes
+ * @param {Element|Object} elem An element or a document
+ * @returns {Boolean} True iff elem is a non-HTML XML node
+ */
+ isXML = Sizzle.isXML = function( elem ) {
+ // documentElement is verified for cases where it doesn't yet exist
+ // (such as loading iframes in IE - #4833)
+ var documentElement = elem && (elem.ownerDocument || elem).documentElement;
+ return documentElement ? documentElement.nodeName !== "HTML" : false;
+ };
+
+ /**
+ * Sets document-related variables once based on the current document
+ * @param {Element|Object} [doc] An element or document object to use to set the document
+ * @returns {Object} Returns the current document
+ */
+ setDocument = Sizzle.setDocument = function( node ) {
+ var hasCompare, parent,
+ doc = node ? node.ownerDocument || node : preferredDoc;
+
+ // If no document and documentElement is available, return
+ if ( doc === document || doc.nodeType !== 9 || !doc.documentElement ) {
+ return document;
+ }
+
+ // Set our document
+ document = doc;
+ docElem = doc.documentElement;
+ parent = doc.defaultView;
+
+ // Support: IE>8
+ // If iframe document is assigned to "document" variable and if iframe has been reloaded,
+ // IE will throw "permission denied" error when accessing "document" variable, see jQuery #13936
+ // IE6-8 do not support the defaultView property so parent will be undefined
+ if ( parent && parent !== parent.top ) {
+ // IE11 does not have attachEvent, so all must suffer
+ if ( parent.addEventListener ) {
+ parent.addEventListener( "unload", unloadHandler, false );
+ } else if ( parent.attachEvent ) {
+ parent.attachEvent( "onunload", unloadHandler );
+ }
+ }
+
+ /* Support tests
+ ---------------------------------------------------------------------- */
+ documentIsHTML = !isXML( doc );
+
+ /* Attributes
+ ---------------------------------------------------------------------- */
+
+ // Support: IE<8
+ // Verify that getAttribute really returns attributes and not properties
+ // (excepting IE8 booleans)
+ support.attributes = assert(function( div ) {
+ div.className = "i";
+ return !div.getAttribute("className");
+ });
+
+ /* getElement(s)By*
+ ---------------------------------------------------------------------- */
+
+ // Check if getElementsByTagName("*") returns only elements
+ support.getElementsByTagName = assert(function( div ) {
+ div.appendChild( doc.createComment("") );
+ return !div.getElementsByTagName("*").length;
+ });
+
+ // Support: IE<9
+ support.getElementsByClassName = rnative.test( doc.getElementsByClassName );
+
+ // Support: IE<10
+ // Check if getElementById returns elements by name
+ // The broken getElementById methods don't pick up programatically-set names,
+ // so use a roundabout getElementsByName test
+ support.getById = assert(function( div ) {
+ docElem.appendChild( div ).id = expando;
+ return !doc.getElementsByName || !doc.getElementsByName( expando ).length;
+ });
+
+ // ID find and filter
+ if ( support.getById ) {
+ Expr.find["ID"] = function( id, context ) {
+ if ( typeof context.getElementById !== "undefined" && documentIsHTML ) {
+ var m = context.getElementById( id );
+ // Check parentNode to catch when Blackberry 4.6 returns
+ // nodes that are no longer in the document #6963
+ return m && m.parentNode ? [ m ] : [];
+ }
+ };
+ Expr.filter["ID"] = function( id ) {
+ var attrId = id.replace( runescape, funescape );
+ return function( elem ) {
+ return elem.getAttribute("id") === attrId;
+ };
+ };
+ } else {
+ // Support: IE6/7
+ // getElementById is not reliable as a find shortcut
+ delete Expr.find["ID"];
+
+ Expr.filter["ID"] = function( id ) {
+ var attrId = id.replace( runescape, funescape );
+ return function( elem ) {
+ var node = typeof elem.getAttributeNode !== "undefined" && elem.getAttributeNode("id");
+ return node && node.value === attrId;
+ };
+ };
+ }
+
+ // Tag
+ Expr.find["TAG"] = support.getElementsByTagName ?
+ function( tag, context ) {
+ if ( typeof context.getElementsByTagName !== "undefined" ) {
+ return context.getElementsByTagName( tag );
+
+ // DocumentFragment nodes don't have gEBTN
+ } else if ( support.qsa ) {
+ return context.querySelectorAll( tag );
+ }
+ } :
+
+ function( tag, context ) {
+ var elem,
+ tmp = [],
+ i = 0,
+ // By happy coincidence, a (broken) gEBTN appears on DocumentFragment nodes too
+ results = context.getElementsByTagName( tag );
+
+ // Filter out possible comments
+ if ( tag === "*" ) {
+ while ( (elem = results[i++]) ) {
+ if ( elem.nodeType === 1 ) {
+ tmp.push( elem );
+ }
+ }
+
+ return tmp;
+ }
+ return results;
+ };
+
+ // Class
+ Expr.find["CLASS"] = support.getElementsByClassName && function( className, context ) {
+ if ( documentIsHTML ) {
+ return context.getElementsByClassName( className );
+ }
+ };
+
+ /* QSA/matchesSelector
+ ---------------------------------------------------------------------- */
+
+ // QSA and matchesSelector support
+
+ // matchesSelector(:active) reports false when true (IE9/Opera 11.5)
+ rbuggyMatches = [];
+
+ // qSa(:focus) reports false when true (Chrome 21)
+ // We allow this because of a bug in IE8/9 that throws an error
+ // whenever `document.activeElement` is accessed on an iframe
+ // So, we allow :focus to pass through QSA all the time to avoid the IE error
+ // See http://bugs.jquery.com/ticket/13378
+ rbuggyQSA = [];
+
+ if ( (support.qsa = rnative.test( doc.querySelectorAll )) ) {
+ // Build QSA regex
+ // Regex strategy adopted from Diego Perini
+ assert(function( div ) {
+ // Select is set to empty string on purpose
+ // This is to test IE's treatment of not explicitly
+ // setting a boolean content attribute,
+ // since its presence should be enough
+ // http://bugs.jquery.com/ticket/12359
+ docElem.appendChild( div ).innerHTML = "" +
+ " ";
+
+ // Support: IE8, Opera 11-12.16
+ // Nothing should be selected when empty strings follow ^= or $= or *=
+ // The test attribute must be unknown in Opera but "safe" for WinRT
+ // http://msdn.microsoft.com/en-us/library/ie/hh465388.aspx#attribute_section
+ if ( div.querySelectorAll("[msallowcapture^='']").length ) {
+ rbuggyQSA.push( "[*^$]=" + whitespace + "*(?:''|\"\")" );
+ }
+
+ // Support: IE8
+ // Boolean attributes and "value" are not treated correctly
+ if ( !div.querySelectorAll("[selected]").length ) {
+ rbuggyQSA.push( "\\[" + whitespace + "*(?:value|" + booleans + ")" );
+ }
+
+ // Support: Chrome<29, Android<4.2+, Safari<7.0+, iOS<7.0+, PhantomJS<1.9.7+
+ if ( !div.querySelectorAll( "[id~=" + expando + "-]" ).length ) {
+ rbuggyQSA.push("~=");
+ }
+
+ // Webkit/Opera - :checked should return selected option elements
+ // http://www.w3.org/TR/2011/REC-css3-selectors-20110929/#checked
+ // IE8 throws error here and will not see later tests
+ if ( !div.querySelectorAll(":checked").length ) {
+ rbuggyQSA.push(":checked");
+ }
+
+ // Support: Safari 8+, iOS 8+
+ // https://bugs.webkit.org/show_bug.cgi?id=136851
+ // In-page `selector#id sibing-combinator selector` fails
+ if ( !div.querySelectorAll( "a#" + expando + "+*" ).length ) {
+ rbuggyQSA.push(".#.+[+~]");
+ }
+ });
+
+ assert(function( div ) {
+ // Support: Windows 8 Native Apps
+ // The type and name attributes are restricted during .innerHTML assignment
+ var input = doc.createElement("input");
+ input.setAttribute( "type", "hidden" );
+ div.appendChild( input ).setAttribute( "name", "D" );
+
+ // Support: IE8
+ // Enforce case-sensitivity of name attribute
+ if ( div.querySelectorAll("[name=d]").length ) {
+ rbuggyQSA.push( "name" + whitespace + "*[*^$|!~]?=" );
+ }
+
+ // FF 3.5 - :enabled/:disabled and hidden elements (hidden elements are still enabled)
+ // IE8 throws error here and will not see later tests
+ if ( !div.querySelectorAll(":enabled").length ) {
+ rbuggyQSA.push( ":enabled", ":disabled" );
+ }
+
+ // Opera 10-11 does not throw on post-comma invalid pseudos
+ div.querySelectorAll("*,:x");
+ rbuggyQSA.push(",.*:");
+ });
+ }
+
+ if ( (support.matchesSelector = rnative.test( (matches = docElem.matches ||
+ docElem.webkitMatchesSelector ||
+ docElem.mozMatchesSelector ||
+ docElem.oMatchesSelector ||
+ docElem.msMatchesSelector) )) ) {
+
+ assert(function( div ) {
+ // Check to see if it's possible to do matchesSelector
+ // on a disconnected node (IE 9)
+ support.disconnectedMatch = matches.call( div, "div" );
+
+ // This should fail with an exception
+ // Gecko does not error, returns false instead
+ matches.call( div, "[s!='']:x" );
+ rbuggyMatches.push( "!=", pseudos );
+ });
+ }
+
+ rbuggyQSA = rbuggyQSA.length && new RegExp( rbuggyQSA.join("|") );
+ rbuggyMatches = rbuggyMatches.length && new RegExp( rbuggyMatches.join("|") );
+
+ /* Contains
+ ---------------------------------------------------------------------- */
+ hasCompare = rnative.test( docElem.compareDocumentPosition );
+
+ // Element contains another
+ // Purposefully does not implement inclusive descendent
+ // As in, an element does not contain itself
+ contains = hasCompare || rnative.test( docElem.contains ) ?
+ function( a, b ) {
+ var adown = a.nodeType === 9 ? a.documentElement : a,
+ bup = b && b.parentNode;
+ return a === bup || !!( bup && bup.nodeType === 1 && (
+ adown.contains ?
+ adown.contains( bup ) :
+ a.compareDocumentPosition && a.compareDocumentPosition( bup ) & 16
+ ));
+ } :
+ function( a, b ) {
+ if ( b ) {
+ while ( (b = b.parentNode) ) {
+ if ( b === a ) {
+ return true;
+ }
+ }
+ }
+ return false;
+ };
+
+ /* Sorting
+ ---------------------------------------------------------------------- */
+
+ // Document order sorting
+ sortOrder = hasCompare ?
+ function( a, b ) {
+
+ // Flag for duplicate removal
+ if ( a === b ) {
+ hasDuplicate = true;
+ return 0;
+ }
+
+ // Sort on method existence if only one input has compareDocumentPosition
+ var compare = !a.compareDocumentPosition - !b.compareDocumentPosition;
+ if ( compare ) {
+ return compare;
+ }
+
+ // Calculate position if both inputs belong to the same document
+ compare = ( a.ownerDocument || a ) === ( b.ownerDocument || b ) ?
+ a.compareDocumentPosition( b ) :
+
+ // Otherwise we know they are disconnected
+ 1;
+
+ // Disconnected nodes
+ if ( compare & 1 ||
+ (!support.sortDetached && b.compareDocumentPosition( a ) === compare) ) {
+
+ // Choose the first element that is related to our preferred document
+ if ( a === doc || a.ownerDocument === preferredDoc && contains(preferredDoc, a) ) {
+ return -1;
+ }
+ if ( b === doc || b.ownerDocument === preferredDoc && contains(preferredDoc, b) ) {
+ return 1;
+ }
+
+ // Maintain original order
+ return sortInput ?
+ ( indexOf( sortInput, a ) - indexOf( sortInput, b ) ) :
+ 0;
+ }
+
+ return compare & 4 ? -1 : 1;
+ } :
+ function( a, b ) {
+ // Exit early if the nodes are identical
+ if ( a === b ) {
+ hasDuplicate = true;
+ return 0;
+ }
+
+ var cur,
+ i = 0,
+ aup = a.parentNode,
+ bup = b.parentNode,
+ ap = [ a ],
+ bp = [ b ];
+
+ // Parentless nodes are either documents or disconnected
+ if ( !aup || !bup ) {
+ return a === doc ? -1 :
+ b === doc ? 1 :
+ aup ? -1 :
+ bup ? 1 :
+ sortInput ?
+ ( indexOf( sortInput, a ) - indexOf( sortInput, b ) ) :
+ 0;
+
+ // If the nodes are siblings, we can do a quick check
+ } else if ( aup === bup ) {
+ return siblingCheck( a, b );
+ }
+
+ // Otherwise we need full lists of their ancestors for comparison
+ cur = a;
+ while ( (cur = cur.parentNode) ) {
+ ap.unshift( cur );
+ }
+ cur = b;
+ while ( (cur = cur.parentNode) ) {
+ bp.unshift( cur );
+ }
+
+ // Walk down the tree looking for a discrepancy
+ while ( ap[i] === bp[i] ) {
+ i++;
+ }
+
+ return i ?
+ // Do a sibling check if the nodes have a common ancestor
+ siblingCheck( ap[i], bp[i] ) :
+
+ // Otherwise nodes in our document sort first
+ ap[i] === preferredDoc ? -1 :
+ bp[i] === preferredDoc ? 1 :
+ 0;
+ };
+
+ return doc;
+ };
+
+ Sizzle.matches = function( expr, elements ) {
+ return Sizzle( expr, null, null, elements );
+ };
+
+ Sizzle.matchesSelector = function( elem, expr ) {
+ // Set document vars if needed
+ if ( ( elem.ownerDocument || elem ) !== document ) {
+ setDocument( elem );
+ }
+
+ // Make sure that attribute selectors are quoted
+ expr = expr.replace( rattributeQuotes, "='$1']" );
+
+ if ( support.matchesSelector && documentIsHTML &&
+ ( !rbuggyMatches || !rbuggyMatches.test( expr ) ) &&
+ ( !rbuggyQSA || !rbuggyQSA.test( expr ) ) ) {
+
+ try {
+ var ret = matches.call( elem, expr );
+
+ // IE 9's matchesSelector returns false on disconnected nodes
+ if ( ret || support.disconnectedMatch ||
+ // As well, disconnected nodes are said to be in a document
+ // fragment in IE 9
+ elem.document && elem.document.nodeType !== 11 ) {
+ return ret;
+ }
+ } catch (e) {}
+ }
+
+ return Sizzle( expr, document, null, [ elem ] ).length > 0;
+ };
+
+ Sizzle.contains = function( context, elem ) {
+ // Set document vars if needed
+ if ( ( context.ownerDocument || context ) !== document ) {
+ setDocument( context );
+ }
+ return contains( context, elem );
+ };
+
+ Sizzle.attr = function( elem, name ) {
+ // Set document vars if needed
+ if ( ( elem.ownerDocument || elem ) !== document ) {
+ setDocument( elem );
+ }
+
+ var fn = Expr.attrHandle[ name.toLowerCase() ],
+ // Don't get fooled by Object.prototype properties (jQuery #13807)
+ val = fn && hasOwn.call( Expr.attrHandle, name.toLowerCase() ) ?
+ fn( elem, name, !documentIsHTML ) :
+ undefined;
+
+ return val !== undefined ?
+ val :
+ support.attributes || !documentIsHTML ?
+ elem.getAttribute( name ) :
+ (val = elem.getAttributeNode(name)) && val.specified ?
+ val.value :
+ null;
+ };
+
+ Sizzle.error = function( msg ) {
+ throw new Error( "Syntax error, unrecognized expression: " + msg );
+ };
+
+ /**
+ * Document sorting and removing duplicates
+ * @param {ArrayLike} results
+ */
+ Sizzle.uniqueSort = function( results ) {
+ var elem,
+ duplicates = [],
+ j = 0,
+ i = 0;
+
+ // Unless we *know* we can detect duplicates, assume their presence
+ hasDuplicate = !support.detectDuplicates;
+ sortInput = !support.sortStable && results.slice( 0 );
+ results.sort( sortOrder );
+
+ if ( hasDuplicate ) {
+ while ( (elem = results[i++]) ) {
+ if ( elem === results[ i ] ) {
+ j = duplicates.push( i );
+ }
+ }
+ while ( j-- ) {
+ results.splice( duplicates[ j ], 1 );
+ }
+ }
+
+ // Clear input after sorting to release objects
+ // See https://github.com/jquery/sizzle/pull/225
+ sortInput = null;
+
+ return results;
+ };
+
+ /**
+ * Utility function for retrieving the text value of an array of DOM nodes
+ * @param {Array|Element} elem
+ */
+ getText = Sizzle.getText = function( elem ) {
+ var node,
+ ret = "",
+ i = 0,
+ nodeType = elem.nodeType;
+
+ if ( !nodeType ) {
+ // If no nodeType, this is expected to be an array
+ while ( (node = elem[i++]) ) {
+ // Do not traverse comment nodes
+ ret += getText( node );
+ }
+ } else if ( nodeType === 1 || nodeType === 9 || nodeType === 11 ) {
+ // Use textContent for elements
+ // innerText usage removed for consistency of new lines (jQuery #11153)
+ if ( typeof elem.textContent === "string" ) {
+ return elem.textContent;
+ } else {
+ // Traverse its children
+ for ( elem = elem.firstChild; elem; elem = elem.nextSibling ) {
+ ret += getText( elem );
+ }
+ }
+ } else if ( nodeType === 3 || nodeType === 4 ) {
+ return elem.nodeValue;
+ }
+ // Do not include comment or processing instruction nodes
+
+ return ret;
+ };
+
+ Expr = Sizzle.selectors = {
+
+ // Can be adjusted by the user
+ cacheLength: 50,
+
+ createPseudo: markFunction,
+
+ match: matchExpr,
+
+ attrHandle: {},
+
+ find: {},
+
+ relative: {
+ ">": { dir: "parentNode", first: true },
+ " ": { dir: "parentNode" },
+ "+": { dir: "previousSibling", first: true },
+ "~": { dir: "previousSibling" }
+ },
+
+ preFilter: {
+ "ATTR": function( match ) {
+ match[1] = match[1].replace( runescape, funescape );
+
+ // Move the given value to match[3] whether quoted or unquoted
+ match[3] = ( match[3] || match[4] || match[5] || "" ).replace( runescape, funescape );
+
+ if ( match[2] === "~=" ) {
+ match[3] = " " + match[3] + " ";
+ }
+
+ return match.slice( 0, 4 );
+ },
+
+ "CHILD": function( match ) {
+ /* matches from matchExpr["CHILD"]
+ 1 type (only|nth|...)
+ 2 what (child|of-type)
+ 3 argument (even|odd|\d*|\d*n([+-]\d+)?|...)
+ 4 xn-component of xn+y argument ([+-]?\d*n|)
+ 5 sign of xn-component
+ 6 x of xn-component
+ 7 sign of y-component
+ 8 y of y-component
+ */
+ match[1] = match[1].toLowerCase();
+
+ if ( match[1].slice( 0, 3 ) === "nth" ) {
+ // nth-* requires argument
+ if ( !match[3] ) {
+ Sizzle.error( match[0] );
+ }
+
+ // numeric x and y parameters for Expr.filter.CHILD
+ // remember that false/true cast respectively to 0/1
+ match[4] = +( match[4] ? match[5] + (match[6] || 1) : 2 * ( match[3] === "even" || match[3] === "odd" ) );
+ match[5] = +( ( match[7] + match[8] ) || match[3] === "odd" );
+
+ // other types prohibit arguments
+ } else if ( match[3] ) {
+ Sizzle.error( match[0] );
+ }
+
+ return match;
+ },
+
+ "PSEUDO": function( match ) {
+ var excess,
+ unquoted = !match[6] && match[2];
+
+ if ( matchExpr["CHILD"].test( match[0] ) ) {
+ return null;
+ }
+
+ // Accept quoted arguments as-is
+ if ( match[3] ) {
+ match[2] = match[4] || match[5] || "";
+
+ // Strip excess characters from unquoted arguments
+ } else if ( unquoted && rpseudo.test( unquoted ) &&
+ // Get excess from tokenize (recursively)
+ (excess = tokenize( unquoted, true )) &&
+ // advance to the next closing parenthesis
+ (excess = unquoted.indexOf( ")", unquoted.length - excess ) - unquoted.length) ) {
+
+ // excess is a negative index
+ match[0] = match[0].slice( 0, excess );
+ match[2] = unquoted.slice( 0, excess );
+ }
+
+ // Return only captures needed by the pseudo filter method (type and argument)
+ return match.slice( 0, 3 );
+ }
+ },
+
+ filter: {
+
+ "TAG": function( nodeNameSelector ) {
+ var nodeName = nodeNameSelector.replace( runescape, funescape ).toLowerCase();
+ return nodeNameSelector === "*" ?
+ function() { return true; } :
+ function( elem ) {
+ return elem.nodeName && elem.nodeName.toLowerCase() === nodeName;
+ };
+ },
+
+ "CLASS": function( className ) {
+ var pattern = classCache[ className + " " ];
+
+ return pattern ||
+ (pattern = new RegExp( "(^|" + whitespace + ")" + className + "(" + whitespace + "|$)" )) &&
+ classCache( className, function( elem ) {
+ return pattern.test( typeof elem.className === "string" && elem.className || typeof elem.getAttribute !== "undefined" && elem.getAttribute("class") || "" );
+ });
+ },
+
+ "ATTR": function( name, operator, check ) {
+ return function( elem ) {
+ var result = Sizzle.attr( elem, name );
+
+ if ( result == null ) {
+ return operator === "!=";
+ }
+ if ( !operator ) {
+ return true;
+ }
+
+ result += "";
+
+ return operator === "=" ? result === check :
+ operator === "!=" ? result !== check :
+ operator === "^=" ? check && result.indexOf( check ) === 0 :
+ operator === "*=" ? check && result.indexOf( check ) > -1 :
+ operator === "$=" ? check && result.slice( -check.length ) === check :
+ operator === "~=" ? ( " " + result.replace( rwhitespace, " " ) + " " ).indexOf( check ) > -1 :
+ operator === "|=" ? result === check || result.slice( 0, check.length + 1 ) === check + "-" :
+ false;
+ };
+ },
+
+ "CHILD": function( type, what, argument, first, last ) {
+ var simple = type.slice( 0, 3 ) !== "nth",
+ forward = type.slice( -4 ) !== "last",
+ ofType = what === "of-type";
+
+ return first === 1 && last === 0 ?
+
+ // Shortcut for :nth-*(n)
+ function( elem ) {
+ return !!elem.parentNode;
+ } :
+
+ function( elem, context, xml ) {
+ var cache, outerCache, node, diff, nodeIndex, start,
+ dir = simple !== forward ? "nextSibling" : "previousSibling",
+ parent = elem.parentNode,
+ name = ofType && elem.nodeName.toLowerCase(),
+ useCache = !xml && !ofType;
+
+ if ( parent ) {
+
+ // :(first|last|only)-(child|of-type)
+ if ( simple ) {
+ while ( dir ) {
+ node = elem;
+ while ( (node = node[ dir ]) ) {
+ if ( ofType ? node.nodeName.toLowerCase() === name : node.nodeType === 1 ) {
+ return false;
+ }
+ }
+ // Reverse direction for :only-* (if we haven't yet done so)
+ start = dir = type === "only" && !start && "nextSibling";
+ }
+ return true;
+ }
+
+ start = [ forward ? parent.firstChild : parent.lastChild ];
+
+ // non-xml :nth-child(...) stores cache data on `parent`
+ if ( forward && useCache ) {
+ // Seek `elem` from a previously-cached index
+ outerCache = parent[ expando ] || (parent[ expando ] = {});
+ cache = outerCache[ type ] || [];
+ nodeIndex = cache[0] === dirruns && cache[1];
+ diff = cache[0] === dirruns && cache[2];
+ node = nodeIndex && parent.childNodes[ nodeIndex ];
+
+ while ( (node = ++nodeIndex && node && node[ dir ] ||
+
+ // Fallback to seeking `elem` from the start
+ (diff = nodeIndex = 0) || start.pop()) ) {
+
+ // When found, cache indexes on `parent` and break
+ if ( node.nodeType === 1 && ++diff && node === elem ) {
+ outerCache[ type ] = [ dirruns, nodeIndex, diff ];
+ break;
+ }
+ }
+
+ // Use previously-cached element index if available
+ } else if ( useCache && (cache = (elem[ expando ] || (elem[ expando ] = {}))[ type ]) && cache[0] === dirruns ) {
+ diff = cache[1];
+
+ // xml :nth-child(...) or :nth-last-child(...) or :nth(-last)?-of-type(...)
+ } else {
+ // Use the same loop as above to seek `elem` from the start
+ while ( (node = ++nodeIndex && node && node[ dir ] ||
+ (diff = nodeIndex = 0) || start.pop()) ) {
+
+ if ( ( ofType ? node.nodeName.toLowerCase() === name : node.nodeType === 1 ) && ++diff ) {
+ // Cache the index of each encountered element
+ if ( useCache ) {
+ (node[ expando ] || (node[ expando ] = {}))[ type ] = [ dirruns, diff ];
+ }
+
+ if ( node === elem ) {
+ break;
+ }
+ }
+ }
+ }
+
+ // Incorporate the offset, then check against cycle size
+ diff -= last;
+ return diff === first || ( diff % first === 0 && diff / first >= 0 );
+ }
+ };
+ },
+
+ "PSEUDO": function( pseudo, argument ) {
+ // pseudo-class names are case-insensitive
+ // http://www.w3.org/TR/selectors/#pseudo-classes
+ // Prioritize by case sensitivity in case custom pseudos are added with uppercase letters
+ // Remember that setFilters inherits from pseudos
+ var args,
+ fn = Expr.pseudos[ pseudo ] || Expr.setFilters[ pseudo.toLowerCase() ] ||
+ Sizzle.error( "unsupported pseudo: " + pseudo );
+
+ // The user may use createPseudo to indicate that
+ // arguments are needed to create the filter function
+ // just as Sizzle does
+ if ( fn[ expando ] ) {
+ return fn( argument );
+ }
+
+ // But maintain support for old signatures
+ if ( fn.length > 1 ) {
+ args = [ pseudo, pseudo, "", argument ];
+ return Expr.setFilters.hasOwnProperty( pseudo.toLowerCase() ) ?
+ markFunction(function( seed, matches ) {
+ var idx,
+ matched = fn( seed, argument ),
+ i = matched.length;
+ while ( i-- ) {
+ idx = indexOf( seed, matched[i] );
+ seed[ idx ] = !( matches[ idx ] = matched[i] );
+ }
+ }) :
+ function( elem ) {
+ return fn( elem, 0, args );
+ };
+ }
+
+ return fn;
+ }
+ },
+
+ pseudos: {
+ // Potentially complex pseudos
+ "not": markFunction(function( selector ) {
+ // Trim the selector passed to compile
+ // to avoid treating leading and trailing
+ // spaces as combinators
+ var input = [],
+ results = [],
+ matcher = compile( selector.replace( rtrim, "$1" ) );
+
+ return matcher[ expando ] ?
+ markFunction(function( seed, matches, context, xml ) {
+ var elem,
+ unmatched = matcher( seed, null, xml, [] ),
+ i = seed.length;
+
+ // Match elements unmatched by `matcher`
+ while ( i-- ) {
+ if ( (elem = unmatched[i]) ) {
+ seed[i] = !(matches[i] = elem);
+ }
+ }
+ }) :
+ function( elem, context, xml ) {
+ input[0] = elem;
+ matcher( input, null, xml, results );
+ // Don't keep the element (issue #299)
+ input[0] = null;
+ return !results.pop();
+ };
+ }),
+
+ "has": markFunction(function( selector ) {
+ return function( elem ) {
+ return Sizzle( selector, elem ).length > 0;
+ };
+ }),
+
+ "contains": markFunction(function( text ) {
+ text = text.replace( runescape, funescape );
+ return function( elem ) {
+ return ( elem.textContent || elem.innerText || getText( elem ) ).indexOf( text ) > -1;
+ };
+ }),
+
+ // "Whether an element is represented by a :lang() selector
+ // is based solely on the element's language value
+ // being equal to the identifier C,
+ // or beginning with the identifier C immediately followed by "-".
+ // The matching of C against the element's language value is performed case-insensitively.
+ // The identifier C does not have to be a valid language name."
+ // http://www.w3.org/TR/selectors/#lang-pseudo
+ "lang": markFunction( function( lang ) {
+ // lang value must be a valid identifier
+ if ( !ridentifier.test(lang || "") ) {
+ Sizzle.error( "unsupported lang: " + lang );
+ }
+ lang = lang.replace( runescape, funescape ).toLowerCase();
+ return function( elem ) {
+ var elemLang;
+ do {
+ if ( (elemLang = documentIsHTML ?
+ elem.lang :
+ elem.getAttribute("xml:lang") || elem.getAttribute("lang")) ) {
+
+ elemLang = elemLang.toLowerCase();
+ return elemLang === lang || elemLang.indexOf( lang + "-" ) === 0;
+ }
+ } while ( (elem = elem.parentNode) && elem.nodeType === 1 );
+ return false;
+ };
+ }),
+
+ // Miscellaneous
+ "target": function( elem ) {
+ var hash = window.location && window.location.hash;
+ return hash && hash.slice( 1 ) === elem.id;
+ },
+
+ "root": function( elem ) {
+ return elem === docElem;
+ },
+
+ "focus": function( elem ) {
+ return elem === document.activeElement && (!document.hasFocus || document.hasFocus()) && !!(elem.type || elem.href || ~elem.tabIndex);
+ },
+
+ // Boolean properties
+ "enabled": function( elem ) {
+ return elem.disabled === false;
+ },
+
+ "disabled": function( elem ) {
+ return elem.disabled === true;
+ },
+
+ "checked": function( elem ) {
+ // In CSS3, :checked should return both checked and selected elements
+ // http://www.w3.org/TR/2011/REC-css3-selectors-20110929/#checked
+ var nodeName = elem.nodeName.toLowerCase();
+ return (nodeName === "input" && !!elem.checked) || (nodeName === "option" && !!elem.selected);
+ },
+
+ "selected": function( elem ) {
+ // Accessing this property makes selected-by-default
+ // options in Safari work properly
+ if ( elem.parentNode ) {
+ elem.parentNode.selectedIndex;
+ }
+
+ return elem.selected === true;
+ },
+
+ // Contents
+ "empty": function( elem ) {
+ // http://www.w3.org/TR/selectors/#empty-pseudo
+ // :empty is negated by element (1) or content nodes (text: 3; cdata: 4; entity ref: 5),
+ // but not by others (comment: 8; processing instruction: 7; etc.)
+ // nodeType < 6 works because attributes (2) do not appear as children
+ for ( elem = elem.firstChild; elem; elem = elem.nextSibling ) {
+ if ( elem.nodeType < 6 ) {
+ return false;
+ }
+ }
+ return true;
+ },
+
+ "parent": function( elem ) {
+ return !Expr.pseudos["empty"]( elem );
+ },
+
+ // Element/input types
+ "header": function( elem ) {
+ return rheader.test( elem.nodeName );
+ },
+
+ "input": function( elem ) {
+ return rinputs.test( elem.nodeName );
+ },
+
+ "button": function( elem ) {
+ var name = elem.nodeName.toLowerCase();
+ return name === "input" && elem.type === "button" || name === "button";
+ },
+
+ "text": function( elem ) {
+ var attr;
+ return elem.nodeName.toLowerCase() === "input" &&
+ elem.type === "text" &&
+
+ // Support: IE<8
+ // New HTML5 attribute values (e.g., "search") appear with elem.type === "text"
+ ( (attr = elem.getAttribute("type")) == null || attr.toLowerCase() === "text" );
+ },
+
+ // Position-in-collection
+ "first": createPositionalPseudo(function() {
+ return [ 0 ];
+ }),
+
+ "last": createPositionalPseudo(function( matchIndexes, length ) {
+ return [ length - 1 ];
+ }),
+
+ "eq": createPositionalPseudo(function( matchIndexes, length, argument ) {
+ return [ argument < 0 ? argument + length : argument ];
+ }),
+
+ "even": createPositionalPseudo(function( matchIndexes, length ) {
+ var i = 0;
+ for ( ; i < length; i += 2 ) {
+ matchIndexes.push( i );
+ }
+ return matchIndexes;
+ }),
+
+ "odd": createPositionalPseudo(function( matchIndexes, length ) {
+ var i = 1;
+ for ( ; i < length; i += 2 ) {
+ matchIndexes.push( i );
+ }
+ return matchIndexes;
+ }),
+
+ "lt": createPositionalPseudo(function( matchIndexes, length, argument ) {
+ var i = argument < 0 ? argument + length : argument;
+ for ( ; --i >= 0; ) {
+ matchIndexes.push( i );
+ }
+ return matchIndexes;
+ }),
+
+ "gt": createPositionalPseudo(function( matchIndexes, length, argument ) {
+ var i = argument < 0 ? argument + length : argument;
+ for ( ; ++i < length; ) {
+ matchIndexes.push( i );
+ }
+ return matchIndexes;
+ })
+ }
+ };
+
+ Expr.pseudos["nth"] = Expr.pseudos["eq"];
+
+ // Add button/input type pseudos
+ for ( i in { radio: true, checkbox: true, file: true, password: true, image: true } ) {
+ Expr.pseudos[ i ] = createInputPseudo( i );
+ }
+ for ( i in { submit: true, reset: true } ) {
+ Expr.pseudos[ i ] = createButtonPseudo( i );
+ }
+
+ // Easy API for creating new setFilters
+ function setFilters() {}
+ setFilters.prototype = Expr.filters = Expr.pseudos;
+ Expr.setFilters = new setFilters();
+
+ tokenize = Sizzle.tokenize = function( selector, parseOnly ) {
+ var matched, match, tokens, type,
+ soFar, groups, preFilters,
+ cached = tokenCache[ selector + " " ];
+
+ if ( cached ) {
+ return parseOnly ? 0 : cached.slice( 0 );
+ }
+
+ soFar = selector;
+ groups = [];
+ preFilters = Expr.preFilter;
+
+ while ( soFar ) {
+
+ // Comma and first run
+ if ( !matched || (match = rcomma.exec( soFar )) ) {
+ if ( match ) {
+ // Don't consume trailing commas as valid
+ soFar = soFar.slice( match[0].length ) || soFar;
+ }
+ groups.push( (tokens = []) );
+ }
+
+ matched = false;
+
+ // Combinators
+ if ( (match = rcombinators.exec( soFar )) ) {
+ matched = match.shift();
+ tokens.push({
+ value: matched,
+ // Cast descendant combinators to space
+ type: match[0].replace( rtrim, " " )
+ });
+ soFar = soFar.slice( matched.length );
+ }
+
+ // Filters
+ for ( type in Expr.filter ) {
+ if ( (match = matchExpr[ type ].exec( soFar )) && (!preFilters[ type ] ||
+ (match = preFilters[ type ]( match ))) ) {
+ matched = match.shift();
+ tokens.push({
+ value: matched,
+ type: type,
+ matches: match
+ });
+ soFar = soFar.slice( matched.length );
+ }
+ }
+
+ if ( !matched ) {
+ break;
+ }
+ }
+
+ // Return the length of the invalid excess
+ // if we're just parsing
+ // Otherwise, throw an error or return tokens
+ return parseOnly ?
+ soFar.length :
+ soFar ?
+ Sizzle.error( selector ) :
+ // Cache the tokens
+ tokenCache( selector, groups ).slice( 0 );
+ };
+
+ function toSelector( tokens ) {
+ var i = 0,
+ len = tokens.length,
+ selector = "";
+ for ( ; i < len; i++ ) {
+ selector += tokens[i].value;
+ }
+ return selector;
+ }
+
+ function addCombinator( matcher, combinator, base ) {
+ var dir = combinator.dir,
+ checkNonElements = base && dir === "parentNode",
+ doneName = done++;
+
+ return combinator.first ?
+ // Check against closest ancestor/preceding element
+ function( elem, context, xml ) {
+ while ( (elem = elem[ dir ]) ) {
+ if ( elem.nodeType === 1 || checkNonElements ) {
+ return matcher( elem, context, xml );
+ }
+ }
+ } :
+
+ // Check against all ancestor/preceding elements
+ function( elem, context, xml ) {
+ var oldCache, outerCache,
+ newCache = [ dirruns, doneName ];
+
+ // We can't set arbitrary data on XML nodes, so they don't benefit from dir caching
+ if ( xml ) {
+ while ( (elem = elem[ dir ]) ) {
+ if ( elem.nodeType === 1 || checkNonElements ) {
+ if ( matcher( elem, context, xml ) ) {
+ return true;
+ }
+ }
+ }
+ } else {
+ while ( (elem = elem[ dir ]) ) {
+ if ( elem.nodeType === 1 || checkNonElements ) {
+ outerCache = elem[ expando ] || (elem[ expando ] = {});
+ if ( (oldCache = outerCache[ dir ]) &&
+ oldCache[ 0 ] === dirruns && oldCache[ 1 ] === doneName ) {
+
+ // Assign to newCache so results back-propagate to previous elements
+ return (newCache[ 2 ] = oldCache[ 2 ]);
+ } else {
+ // Reuse newcache so results back-propagate to previous elements
+ outerCache[ dir ] = newCache;
+
+ // A match means we're done; a fail means we have to keep checking
+ if ( (newCache[ 2 ] = matcher( elem, context, xml )) ) {
+ return true;
+ }
+ }
+ }
+ }
+ }
+ };
+ }
+
+ function elementMatcher( matchers ) {
+ return matchers.length > 1 ?
+ function( elem, context, xml ) {
+ var i = matchers.length;
+ while ( i-- ) {
+ if ( !matchers[i]( elem, context, xml ) ) {
+ return false;
+ }
+ }
+ return true;
+ } :
+ matchers[0];
+ }
+
+ function multipleContexts( selector, contexts, results ) {
+ var i = 0,
+ len = contexts.length;
+ for ( ; i < len; i++ ) {
+ Sizzle( selector, contexts[i], results );
+ }
+ return results;
+ }
+
+ function condense( unmatched, map, filter, context, xml ) {
+ var elem,
+ newUnmatched = [],
+ i = 0,
+ len = unmatched.length,
+ mapped = map != null;
+
+ for ( ; i < len; i++ ) {
+ if ( (elem = unmatched[i]) ) {
+ if ( !filter || filter( elem, context, xml ) ) {
+ newUnmatched.push( elem );
+ if ( mapped ) {
+ map.push( i );
+ }
+ }
+ }
+ }
+
+ return newUnmatched;
+ }
+
+ function setMatcher( preFilter, selector, matcher, postFilter, postFinder, postSelector ) {
+ if ( postFilter && !postFilter[ expando ] ) {
+ postFilter = setMatcher( postFilter );
+ }
+ if ( postFinder && !postFinder[ expando ] ) {
+ postFinder = setMatcher( postFinder, postSelector );
+ }
+ return markFunction(function( seed, results, context, xml ) {
+ var temp, i, elem,
+ preMap = [],
+ postMap = [],
+ preexisting = results.length,
+
+ // Get initial elements from seed or context
+ elems = seed || multipleContexts( selector || "*", context.nodeType ? [ context ] : context, [] ),
+
+ // Prefilter to get matcher input, preserving a map for seed-results synchronization
+ matcherIn = preFilter && ( seed || !selector ) ?
+ condense( elems, preMap, preFilter, context, xml ) :
+ elems,
+
+ matcherOut = matcher ?
+ // If we have a postFinder, or filtered seed, or non-seed postFilter or preexisting results,
+ postFinder || ( seed ? preFilter : preexisting || postFilter ) ?
+
+ // ...intermediate processing is necessary
+ [] :
+
+ // ...otherwise use results directly
+ results :
+ matcherIn;
+
+ // Find primary matches
+ if ( matcher ) {
+ matcher( matcherIn, matcherOut, context, xml );
+ }
+
+ // Apply postFilter
+ if ( postFilter ) {
+ temp = condense( matcherOut, postMap );
+ postFilter( temp, [], context, xml );
+
+ // Un-match failing elements by moving them back to matcherIn
+ i = temp.length;
+ while ( i-- ) {
+ if ( (elem = temp[i]) ) {
+ matcherOut[ postMap[i] ] = !(matcherIn[ postMap[i] ] = elem);
+ }
+ }
+ }
+
+ if ( seed ) {
+ if ( postFinder || preFilter ) {
+ if ( postFinder ) {
+ // Get the final matcherOut by condensing this intermediate into postFinder contexts
+ temp = [];
+ i = matcherOut.length;
+ while ( i-- ) {
+ if ( (elem = matcherOut[i]) ) {
+ // Restore matcherIn since elem is not yet a final match
+ temp.push( (matcherIn[i] = elem) );
+ }
+ }
+ postFinder( null, (matcherOut = []), temp, xml );
+ }
+
+ // Move matched elements from seed to results to keep them synchronized
+ i = matcherOut.length;
+ while ( i-- ) {
+ if ( (elem = matcherOut[i]) &&
+ (temp = postFinder ? indexOf( seed, elem ) : preMap[i]) > -1 ) {
+
+ seed[temp] = !(results[temp] = elem);
+ }
+ }
+ }
+
+ // Add elements to results, through postFinder if defined
+ } else {
+ matcherOut = condense(
+ matcherOut === results ?
+ matcherOut.splice( preexisting, matcherOut.length ) :
+ matcherOut
+ );
+ if ( postFinder ) {
+ postFinder( null, results, matcherOut, xml );
+ } else {
+ push.apply( results, matcherOut );
+ }
+ }
+ });
+ }
+
+ function matcherFromTokens( tokens ) {
+ var checkContext, matcher, j,
+ len = tokens.length,
+ leadingRelative = Expr.relative[ tokens[0].type ],
+ implicitRelative = leadingRelative || Expr.relative[" "],
+ i = leadingRelative ? 1 : 0,
+
+ // The foundational matcher ensures that elements are reachable from top-level context(s)
+ matchContext = addCombinator( function( elem ) {
+ return elem === checkContext;
+ }, implicitRelative, true ),
+ matchAnyContext = addCombinator( function( elem ) {
+ return indexOf( checkContext, elem ) > -1;
+ }, implicitRelative, true ),
+ matchers = [ function( elem, context, xml ) {
+ var ret = ( !leadingRelative && ( xml || context !== outermostContext ) ) || (
+ (checkContext = context).nodeType ?
+ matchContext( elem, context, xml ) :
+ matchAnyContext( elem, context, xml ) );
+ // Avoid hanging onto element (issue #299)
+ checkContext = null;
+ return ret;
+ } ];
+
+ for ( ; i < len; i++ ) {
+ if ( (matcher = Expr.relative[ tokens[i].type ]) ) {
+ matchers = [ addCombinator(elementMatcher( matchers ), matcher) ];
+ } else {
+ matcher = Expr.filter[ tokens[i].type ].apply( null, tokens[i].matches );
+
+ // Return special upon seeing a positional matcher
+ if ( matcher[ expando ] ) {
+ // Find the next relative operator (if any) for proper handling
+ j = ++i;
+ for ( ; j < len; j++ ) {
+ if ( Expr.relative[ tokens[j].type ] ) {
+ break;
+ }
+ }
+ return setMatcher(
+ i > 1 && elementMatcher( matchers ),
+ i > 1 && toSelector(
+ // If the preceding token was a descendant combinator, insert an implicit any-element `*`
+ tokens.slice( 0, i - 1 ).concat({ value: tokens[ i - 2 ].type === " " ? "*" : "" })
+ ).replace( rtrim, "$1" ),
+ matcher,
+ i < j && matcherFromTokens( tokens.slice( i, j ) ),
+ j < len && matcherFromTokens( (tokens = tokens.slice( j )) ),
+ j < len && toSelector( tokens )
+ );
+ }
+ matchers.push( matcher );
+ }
+ }
+
+ return elementMatcher( matchers );
+ }
+
+ function matcherFromGroupMatchers( elementMatchers, setMatchers ) {
+ var bySet = setMatchers.length > 0,
+ byElement = elementMatchers.length > 0,
+ superMatcher = function( seed, context, xml, results, outermost ) {
+ var elem, j, matcher,
+ matchedCount = 0,
+ i = "0",
+ unmatched = seed && [],
+ setMatched = [],
+ contextBackup = outermostContext,
+ // We must always have either seed elements or outermost context
+ elems = seed || byElement && Expr.find["TAG"]( "*", outermost ),
+ // Use integer dirruns iff this is the outermost matcher
+ dirrunsUnique = (dirruns += contextBackup == null ? 1 : Math.random() || 0.1),
+ len = elems.length;
+
+ if ( outermost ) {
+ outermostContext = context !== document && context;
+ }
+
+ // Add elements passing elementMatchers directly to results
+ // Keep `i` a string if there are no elements so `matchedCount` will be "00" below
+ // Support: IE<9, Safari
+ // Tolerate NodeList properties (IE: "length"; Safari: ) matching elements by id
+ for ( ; i !== len && (elem = elems[i]) != null; i++ ) {
+ if ( byElement && elem ) {
+ j = 0;
+ while ( (matcher = elementMatchers[j++]) ) {
+ if ( matcher( elem, context, xml ) ) {
+ results.push( elem );
+ break;
+ }
+ }
+ if ( outermost ) {
+ dirruns = dirrunsUnique;
+ }
+ }
+
+ // Track unmatched elements for set filters
+ if ( bySet ) {
+ // They will have gone through all possible matchers
+ if ( (elem = !matcher && elem) ) {
+ matchedCount--;
+ }
+
+ // Lengthen the array for every element, matched or not
+ if ( seed ) {
+ unmatched.push( elem );
+ }
+ }
+ }
+
+ // Apply set filters to unmatched elements
+ matchedCount += i;
+ if ( bySet && i !== matchedCount ) {
+ j = 0;
+ while ( (matcher = setMatchers[j++]) ) {
+ matcher( unmatched, setMatched, context, xml );
+ }
+
+ if ( seed ) {
+ // Reintegrate element matches to eliminate the need for sorting
+ if ( matchedCount > 0 ) {
+ while ( i-- ) {
+ if ( !(unmatched[i] || setMatched[i]) ) {
+ setMatched[i] = pop.call( results );
+ }
+ }
+ }
+
+ // Discard index placeholder values to get only actual matches
+ setMatched = condense( setMatched );
+ }
+
+ // Add matches to results
+ push.apply( results, setMatched );
+
+ // Seedless set matches succeeding multiple successful matchers stipulate sorting
+ if ( outermost && !seed && setMatched.length > 0 &&
+ ( matchedCount + setMatchers.length ) > 1 ) {
+
+ Sizzle.uniqueSort( results );
+ }
+ }
+
+ // Override manipulation of globals by nested matchers
+ if ( outermost ) {
+ dirruns = dirrunsUnique;
+ outermostContext = contextBackup;
+ }
+
+ return unmatched;
+ };
+
+ return bySet ?
+ markFunction( superMatcher ) :
+ superMatcher;
+ }
+
+ compile = Sizzle.compile = function( selector, match /* Internal Use Only */ ) {
+ var i,
+ setMatchers = [],
+ elementMatchers = [],
+ cached = compilerCache[ selector + " " ];
+
+ if ( !cached ) {
+ // Generate a function of recursive functions that can be used to check each element
+ if ( !match ) {
+ match = tokenize( selector );
+ }
+ i = match.length;
+ while ( i-- ) {
+ cached = matcherFromTokens( match[i] );
+ if ( cached[ expando ] ) {
+ setMatchers.push( cached );
+ } else {
+ elementMatchers.push( cached );
+ }
+ }
+
+ // Cache the compiled function
+ cached = compilerCache( selector, matcherFromGroupMatchers( elementMatchers, setMatchers ) );
+
+ // Save selector and tokenization
+ cached.selector = selector;
+ }
+ return cached;
+ };
+
+ /**
+ * A low-level selection function that works with Sizzle's compiled
+ * selector functions
+ * @param {String|Function} selector A selector or a pre-compiled
+ * selector function built with Sizzle.compile
+ * @param {Element} context
+ * @param {Array} [results]
+ * @param {Array} [seed] A set of elements to match against
+ */
+ select = Sizzle.select = function( selector, context, results, seed ) {
+ var i, tokens, token, type, find,
+ compiled = typeof selector === "function" && selector,
+ match = !seed && tokenize( (selector = compiled.selector || selector) );
+
+ results = results || [];
+
+ // Try to minimize operations if there is no seed and only one group
+ if ( match.length === 1 ) {
+
+ // Take a shortcut and set the context if the root selector is an ID
+ tokens = match[0] = match[0].slice( 0 );
+ if ( tokens.length > 2 && (token = tokens[0]).type === "ID" &&
+ support.getById && context.nodeType === 9 && documentIsHTML &&
+ Expr.relative[ tokens[1].type ] ) {
+
+ context = ( Expr.find["ID"]( token.matches[0].replace(runescape, funescape), context ) || [] )[0];
+ if ( !context ) {
+ return results;
+
+ // Precompiled matchers will still verify ancestry, so step up a level
+ } else if ( compiled ) {
+ context = context.parentNode;
+ }
+
+ selector = selector.slice( tokens.shift().value.length );
+ }
+
+ // Fetch a seed set for right-to-left matching
+ i = matchExpr["needsContext"].test( selector ) ? 0 : tokens.length;
+ while ( i-- ) {
+ token = tokens[i];
+
+ // Abort if we hit a combinator
+ if ( Expr.relative[ (type = token.type) ] ) {
+ break;
+ }
+ if ( (find = Expr.find[ type ]) ) {
+ // Search, expanding context for leading sibling combinators
+ if ( (seed = find(
+ token.matches[0].replace( runescape, funescape ),
+ rsibling.test( tokens[0].type ) && testContext( context.parentNode ) || context
+ )) ) {
+
+ // If seed is empty or no tokens remain, we can return early
+ tokens.splice( i, 1 );
+ selector = seed.length && toSelector( tokens );
+ if ( !selector ) {
+ push.apply( results, seed );
+ return results;
+ }
+
+ break;
+ }
+ }
+ }
+ }
+
+ // Compile and execute a filtering function if one is not provided
+ // Provide `match` to avoid retokenization if we modified the selector above
+ ( compiled || compile( selector, match ) )(
+ seed,
+ context,
+ !documentIsHTML,
+ results,
+ rsibling.test( selector ) && testContext( context.parentNode ) || context
+ );
+ return results;
+ };
+
+ // One-time assignments
+
+ // Sort stability
+ support.sortStable = expando.split("").sort( sortOrder ).join("") === expando;
+
+ // Support: Chrome 14-35+
+ // Always assume duplicates if they aren't passed to the comparison function
+ support.detectDuplicates = !!hasDuplicate;
+
+ // Initialize against the default document
+ setDocument();
+
+ // Support: Webkit<537.32 - Safari 6.0.3/Chrome 25 (fixed in Chrome 27)
+ // Detached nodes confoundingly follow *each other*
+ support.sortDetached = assert(function( div1 ) {
+ // Should return 1, but returns 4 (following)
+ return div1.compareDocumentPosition( document.createElement("div") ) & 1;
+ });
+
+ // Support: IE<8
+ // Prevent attribute/property "interpolation"
+ // http://msdn.microsoft.com/en-us/library/ms536429%28VS.85%29.aspx
+ if ( !assert(function( div ) {
+ div.innerHTML = " to avoid XSS via location.hash (#9521)
+ // Strict HTML recognition (#11290: must start with <)
+ rquickExpr = /^(?:\s*(<[\w\W]+>)[^>]*|#([\w-]*))$/,
+
+ init = jQuery.fn.init = function( selector, context ) {
+ var match, elem;
+
+ // HANDLE: $(""), $(null), $(undefined), $(false)
+ if ( !selector ) {
+ return this;
+ }
+
+ // Handle HTML strings
+ if ( typeof selector === "string" ) {
+ if ( selector[0] === "<" && selector[ selector.length - 1 ] === ">" && selector.length >= 3 ) {
+ // Assume that strings that start and end with <> are HTML and skip the regex check
+ match = [ null, selector, null ];
+
+ } else {
+ match = rquickExpr.exec( selector );
+ }
+
+ // Match html or make sure no context is specified for #id
+ if ( match && (match[1] || !context) ) {
+
+ // HANDLE: $(html) -> $(array)
+ if ( match[1] ) {
+ context = context instanceof jQuery ? context[0] : context;
+
+ // Option to run scripts is true for back-compat
+ // Intentionally let the error be thrown if parseHTML is not present
+ jQuery.merge( this, jQuery.parseHTML(
+ match[1],
+ context && context.nodeType ? context.ownerDocument || context : document,
+ true
+ ) );
+
+ // HANDLE: $(html, props)
+ if ( rsingleTag.test( match[1] ) && jQuery.isPlainObject( context ) ) {
+ for ( match in context ) {
+ // Properties of context are called as methods if possible
+ if ( jQuery.isFunction( this[ match ] ) ) {
+ this[ match ]( context[ match ] );
+
+ // ...and otherwise set as attributes
+ } else {
+ this.attr( match, context[ match ] );
+ }
+ }
+ }
+
+ return this;
+
+ // HANDLE: $(#id)
+ } else {
+ elem = document.getElementById( match[2] );
+
+ // Support: Blackberry 4.6
+ // gEBID returns nodes no longer in the document (#6963)
+ if ( elem && elem.parentNode ) {
+ // Inject the element directly into the jQuery object
+ this.length = 1;
+ this[0] = elem;
+ }
+
+ this.context = document;
+ this.selector = selector;
+ return this;
+ }
+
+ // HANDLE: $(expr, $(...))
+ } else if ( !context || context.jquery ) {
+ return ( context || rootjQuery ).find( selector );
+
+ // HANDLE: $(expr, context)
+ // (which is just equivalent to: $(context).find(expr)
+ } else {
+ return this.constructor( context ).find( selector );
+ }
+
+ // HANDLE: $(DOMElement)
+ } else if ( selector.nodeType ) {
+ this.context = this[0] = selector;
+ this.length = 1;
+ return this;
+
+ // HANDLE: $(function)
+ // Shortcut for document ready
+ } else if ( jQuery.isFunction( selector ) ) {
+ return typeof rootjQuery.ready !== "undefined" ?
+ rootjQuery.ready( selector ) :
+ // Execute immediately if ready is not present
+ selector( jQuery );
+ }
+
+ if ( selector.selector !== undefined ) {
+ this.selector = selector.selector;
+ this.context = selector.context;
+ }
+
+ return jQuery.makeArray( selector, this );
+ };
+
+ // Give the init function the jQuery prototype for later instantiation
+ init.prototype = jQuery.fn;
+
+ // Initialize central reference
+ rootjQuery = jQuery( document );
+
+
+ var rparentsprev = /^(?:parents|prev(?:Until|All))/,
+ // Methods guaranteed to produce a unique set when starting from a unique set
+ guaranteedUnique = {
+ children: true,
+ contents: true,
+ next: true,
+ prev: true
+ };
+
+ jQuery.extend({
+ dir: function( elem, dir, until ) {
+ var matched = [],
+ truncate = until !== undefined;
+
+ while ( (elem = elem[ dir ]) && elem.nodeType !== 9 ) {
+ if ( elem.nodeType === 1 ) {
+ if ( truncate && jQuery( elem ).is( until ) ) {
+ break;
+ }
+ matched.push( elem );
+ }
+ }
+ return matched;
+ },
+
+ sibling: function( n, elem ) {
+ var matched = [];
+
+ for ( ; n; n = n.nextSibling ) {
+ if ( n.nodeType === 1 && n !== elem ) {
+ matched.push( n );
+ }
+ }
+
+ return matched;
+ }
+ });
+
+ jQuery.fn.extend({
+ has: function( target ) {
+ var targets = jQuery( target, this ),
+ l = targets.length;
+
+ return this.filter(function() {
+ var i = 0;
+ for ( ; i < l; i++ ) {
+ if ( jQuery.contains( this, targets[i] ) ) {
+ return true;
+ }
+ }
+ });
+ },
+
+ closest: function( selectors, context ) {
+ var cur,
+ i = 0,
+ l = this.length,
+ matched = [],
+ pos = rneedsContext.test( selectors ) || typeof selectors !== "string" ?
+ jQuery( selectors, context || this.context ) :
+ 0;
+
+ for ( ; i < l; i++ ) {
+ for ( cur = this[i]; cur && cur !== context; cur = cur.parentNode ) {
+ // Always skip document fragments
+ if ( cur.nodeType < 11 && (pos ?
+ pos.index(cur) > -1 :
+
+ // Don't pass non-elements to Sizzle
+ cur.nodeType === 1 &&
+ jQuery.find.matchesSelector(cur, selectors)) ) {
+
+ matched.push( cur );
+ break;
+ }
+ }
+ }
+
+ return this.pushStack( matched.length > 1 ? jQuery.unique( matched ) : matched );
+ },
+
+ // Determine the position of an element within the set
+ index: function( elem ) {
+
+ // No argument, return index in parent
+ if ( !elem ) {
+ return ( this[ 0 ] && this[ 0 ].parentNode ) ? this.first().prevAll().length : -1;
+ }
+
+ // Index in selector
+ if ( typeof elem === "string" ) {
+ return indexOf.call( jQuery( elem ), this[ 0 ] );
+ }
+
+ // Locate the position of the desired element
+ return indexOf.call( this,
+
+ // If it receives a jQuery object, the first element is used
+ elem.jquery ? elem[ 0 ] : elem
+ );
+ },
+
+ add: function( selector, context ) {
+ return this.pushStack(
+ jQuery.unique(
+ jQuery.merge( this.get(), jQuery( selector, context ) )
+ )
+ );
+ },
+
+ addBack: function( selector ) {
+ return this.add( selector == null ?
+ this.prevObject : this.prevObject.filter(selector)
+ );
+ }
+ });
+
+ function sibling( cur, dir ) {
+ while ( (cur = cur[dir]) && cur.nodeType !== 1 ) {}
+ return cur;
+ }
+
+ jQuery.each({
+ parent: function( elem ) {
+ var parent = elem.parentNode;
+ return parent && parent.nodeType !== 11 ? parent : null;
+ },
+ parents: function( elem ) {
+ return jQuery.dir( elem, "parentNode" );
+ },
+ parentsUntil: function( elem, i, until ) {
+ return jQuery.dir( elem, "parentNode", until );
+ },
+ next: function( elem ) {
+ return sibling( elem, "nextSibling" );
+ },
+ prev: function( elem ) {
+ return sibling( elem, "previousSibling" );
+ },
+ nextAll: function( elem ) {
+ return jQuery.dir( elem, "nextSibling" );
+ },
+ prevAll: function( elem ) {
+ return jQuery.dir( elem, "previousSibling" );
+ },
+ nextUntil: function( elem, i, until ) {
+ return jQuery.dir( elem, "nextSibling", until );
+ },
+ prevUntil: function( elem, i, until ) {
+ return jQuery.dir( elem, "previousSibling", until );
+ },
+ siblings: function( elem ) {
+ return jQuery.sibling( ( elem.parentNode || {} ).firstChild, elem );
+ },
+ children: function( elem ) {
+ return jQuery.sibling( elem.firstChild );
+ },
+ contents: function( elem ) {
+ return elem.contentDocument || jQuery.merge( [], elem.childNodes );
+ }
+ }, function( name, fn ) {
+ jQuery.fn[ name ] = function( until, selector ) {
+ var matched = jQuery.map( this, fn, until );
+
+ if ( name.slice( -5 ) !== "Until" ) {
+ selector = until;
+ }
+
+ if ( selector && typeof selector === "string" ) {
+ matched = jQuery.filter( selector, matched );
+ }
+
+ if ( this.length > 1 ) {
+ // Remove duplicates
+ if ( !guaranteedUnique[ name ] ) {
+ jQuery.unique( matched );
+ }
+
+ // Reverse order for parents* and prev-derivatives
+ if ( rparentsprev.test( name ) ) {
+ matched.reverse();
+ }
+ }
+
+ return this.pushStack( matched );
+ };
+ });
+ var rnotwhite = (/\S+/g);
+
+
+
+ // String to Object options format cache
+ var optionsCache = {};
+
+ // Convert String-formatted options into Object-formatted ones and store in cache
+ function createOptions( options ) {
+ var object = optionsCache[ options ] = {};
+ jQuery.each( options.match( rnotwhite ) || [], function( _, flag ) {
+ object[ flag ] = true;
+ });
+ return object;
+ }
+
+ /*
+ * Create a callback list using the following parameters:
+ *
+ * options: an optional list of space-separated options that will change how
+ * the callback list behaves or a more traditional option object
+ *
+ * By default a callback list will act like an event callback list and can be
+ * "fired" multiple times.
+ *
+ * Possible options:
+ *
+ * once: will ensure the callback list can only be fired once (like a Deferred)
+ *
+ * memory: will keep track of previous values and will call any callback added
+ * after the list has been fired right away with the latest "memorized"
+ * values (like a Deferred)
+ *
+ * unique: will ensure a callback can only be added once (no duplicate in the list)
+ *
+ * stopOnFalse: interrupt callings when a callback returns false
+ *
+ */
+ jQuery.Callbacks = function( options ) {
+
+ // Convert options from String-formatted to Object-formatted if needed
+ // (we check in cache first)
+ options = typeof options === "string" ?
+ ( optionsCache[ options ] || createOptions( options ) ) :
+ jQuery.extend( {}, options );
+
+ var // Last fire value (for non-forgettable lists)
+ memory,
+ // Flag to know if list was already fired
+ fired,
+ // Flag to know if list is currently firing
+ firing,
+ // First callback to fire (used internally by add and fireWith)
+ firingStart,
+ // End of the loop when firing
+ firingLength,
+ // Index of currently firing callback (modified by remove if needed)
+ firingIndex,
+ // Actual callback list
+ list = [],
+ // Stack of fire calls for repeatable lists
+ stack = !options.once && [],
+ // Fire callbacks
+ fire = function( data ) {
+ memory = options.memory && data;
+ fired = true;
+ firingIndex = firingStart || 0;
+ firingStart = 0;
+ firingLength = list.length;
+ firing = true;
+ for ( ; list && firingIndex < firingLength; firingIndex++ ) {
+ if ( list[ firingIndex ].apply( data[ 0 ], data[ 1 ] ) === false && options.stopOnFalse ) {
+ memory = false; // To prevent further calls using add
+ break;
+ }
+ }
+ firing = false;
+ if ( list ) {
+ if ( stack ) {
+ if ( stack.length ) {
+ fire( stack.shift() );
+ }
+ } else if ( memory ) {
+ list = [];
+ } else {
+ self.disable();
+ }
+ }
+ },
+ // Actual Callbacks object
+ self = {
+ // Add a callback or a collection of callbacks to the list
+ add: function() {
+ if ( list ) {
+ // First, we save the current length
+ var start = list.length;
+ (function add( args ) {
+ jQuery.each( args, function( _, arg ) {
+ var type = jQuery.type( arg );
+ if ( type === "function" ) {
+ if ( !options.unique || !self.has( arg ) ) {
+ list.push( arg );
+ }
+ } else if ( arg && arg.length && type !== "string" ) {
+ // Inspect recursively
+ add( arg );
+ }
+ });
+ })( arguments );
+ // Do we need to add the callbacks to the
+ // current firing batch?
+ if ( firing ) {
+ firingLength = list.length;
+ // With memory, if we're not firing then
+ // we should call right away
+ } else if ( memory ) {
+ firingStart = start;
+ fire( memory );
+ }
+ }
+ return this;
+ },
+ // Remove a callback from the list
+ remove: function() {
+ if ( list ) {
+ jQuery.each( arguments, function( _, arg ) {
+ var index;
+ while ( ( index = jQuery.inArray( arg, list, index ) ) > -1 ) {
+ list.splice( index, 1 );
+ // Handle firing indexes
+ if ( firing ) {
+ if ( index <= firingLength ) {
+ firingLength--;
+ }
+ if ( index <= firingIndex ) {
+ firingIndex--;
+ }
+ }
+ }
+ });
+ }
+ return this;
+ },
+ // Check if a given callback is in the list.
+ // If no argument is given, return whether or not list has callbacks attached.
+ has: function( fn ) {
+ return fn ? jQuery.inArray( fn, list ) > -1 : !!( list && list.length );
+ },
+ // Remove all callbacks from the list
+ empty: function() {
+ list = [];
+ firingLength = 0;
+ return this;
+ },
+ // Have the list do nothing anymore
+ disable: function() {
+ list = stack = memory = undefined;
+ return this;
+ },
+ // Is it disabled?
+ disabled: function() {
+ return !list;
+ },
+ // Lock the list in its current state
+ lock: function() {
+ stack = undefined;
+ if ( !memory ) {
+ self.disable();
+ }
+ return this;
+ },
+ // Is it locked?
+ locked: function() {
+ return !stack;
+ },
+ // Call all callbacks with the given context and arguments
+ fireWith: function( context, args ) {
+ if ( list && ( !fired || stack ) ) {
+ args = args || [];
+ args = [ context, args.slice ? args.slice() : args ];
+ if ( firing ) {
+ stack.push( args );
+ } else {
+ fire( args );
+ }
+ }
+ return this;
+ },
+ // Call all the callbacks with the given arguments
+ fire: function() {
+ self.fireWith( this, arguments );
+ return this;
+ },
+ // To know if the callbacks have already been called at least once
+ fired: function() {
+ return !!fired;
+ }
+ };
+
+ return self;
+ };
+
+
+ jQuery.extend({
+
+ Deferred: function( func ) {
+ var tuples = [
+ // action, add listener, listener list, final state
+ [ "resolve", "done", jQuery.Callbacks("once memory"), "resolved" ],
+ [ "reject", "fail", jQuery.Callbacks("once memory"), "rejected" ],
+ [ "notify", "progress", jQuery.Callbacks("memory") ]
+ ],
+ state = "pending",
+ promise = {
+ state: function() {
+ return state;
+ },
+ always: function() {
+ deferred.done( arguments ).fail( arguments );
+ return this;
+ },
+ then: function( /* fnDone, fnFail, fnProgress */ ) {
+ var fns = arguments;
+ return jQuery.Deferred(function( newDefer ) {
+ jQuery.each( tuples, function( i, tuple ) {
+ var fn = jQuery.isFunction( fns[ i ] ) && fns[ i ];
+ // deferred[ done | fail | progress ] for forwarding actions to newDefer
+ deferred[ tuple[1] ](function() {
+ var returned = fn && fn.apply( this, arguments );
+ if ( returned && jQuery.isFunction( returned.promise ) ) {
+ returned.promise()
+ .done( newDefer.resolve )
+ .fail( newDefer.reject )
+ .progress( newDefer.notify );
+ } else {
+ newDefer[ tuple[ 0 ] + "With" ]( this === promise ? newDefer.promise() : this, fn ? [ returned ] : arguments );
+ }
+ });
+ });
+ fns = null;
+ }).promise();
+ },
+ // Get a promise for this deferred
+ // If obj is provided, the promise aspect is added to the object
+ promise: function( obj ) {
+ return obj != null ? jQuery.extend( obj, promise ) : promise;
+ }
+ },
+ deferred = {};
+
+ // Keep pipe for back-compat
+ promise.pipe = promise.then;
+
+ // Add list-specific methods
+ jQuery.each( tuples, function( i, tuple ) {
+ var list = tuple[ 2 ],
+ stateString = tuple[ 3 ];
+
+ // promise[ done | fail | progress ] = list.add
+ promise[ tuple[1] ] = list.add;
+
+ // Handle state
+ if ( stateString ) {
+ list.add(function() {
+ // state = [ resolved | rejected ]
+ state = stateString;
+
+ // [ reject_list | resolve_list ].disable; progress_list.lock
+ }, tuples[ i ^ 1 ][ 2 ].disable, tuples[ 2 ][ 2 ].lock );
+ }
+
+ // deferred[ resolve | reject | notify ]
+ deferred[ tuple[0] ] = function() {
+ deferred[ tuple[0] + "With" ]( this === deferred ? promise : this, arguments );
+ return this;
+ };
+ deferred[ tuple[0] + "With" ] = list.fireWith;
+ });
+
+ // Make the deferred a promise
+ promise.promise( deferred );
+
+ // Call given func if any
+ if ( func ) {
+ func.call( deferred, deferred );
+ }
+
+ // All done!
+ return deferred;
+ },
+
+ // Deferred helper
+ when: function( subordinate /* , ..., subordinateN */ ) {
+ var i = 0,
+ resolveValues = slice.call( arguments ),
+ length = resolveValues.length,
+
+ // the count of uncompleted subordinates
+ remaining = length !== 1 || ( subordinate && jQuery.isFunction( subordinate.promise ) ) ? length : 0,
+
+ // the master Deferred. If resolveValues consist of only a single Deferred, just use that.
+ deferred = remaining === 1 ? subordinate : jQuery.Deferred(),
+
+ // Update function for both resolve and progress values
+ updateFunc = function( i, contexts, values ) {
+ return function( value ) {
+ contexts[ i ] = this;
+ values[ i ] = arguments.length > 1 ? slice.call( arguments ) : value;
+ if ( values === progressValues ) {
+ deferred.notifyWith( contexts, values );
+ } else if ( !( --remaining ) ) {
+ deferred.resolveWith( contexts, values );
+ }
+ };
+ },
+
+ progressValues, progressContexts, resolveContexts;
+
+ // Add listeners to Deferred subordinates; treat others as resolved
+ if ( length > 1 ) {
+ progressValues = new Array( length );
+ progressContexts = new Array( length );
+ resolveContexts = new Array( length );
+ for ( ; i < length; i++ ) {
+ if ( resolveValues[ i ] && jQuery.isFunction( resolveValues[ i ].promise ) ) {
+ resolveValues[ i ].promise()
+ .done( updateFunc( i, resolveContexts, resolveValues ) )
+ .fail( deferred.reject )
+ .progress( updateFunc( i, progressContexts, progressValues ) );
+ } else {
+ --remaining;
+ }
+ }
+ }
+
+ // If we're not waiting on anything, resolve the master
+ if ( !remaining ) {
+ deferred.resolveWith( resolveContexts, resolveValues );
+ }
+
+ return deferred.promise();
+ }
+ });
+
+
+ // The deferred used on DOM ready
+ var readyList;
+
+ jQuery.fn.ready = function( fn ) {
+ // Add the callback
+ jQuery.ready.promise().done( fn );
+
+ return this;
+ };
+
+ jQuery.extend({
+ // Is the DOM ready to be used? Set to true once it occurs.
+ isReady: false,
+
+ // A counter to track how many items to wait for before
+ // the ready event fires. See #6781
+ readyWait: 1,
+
+ // Hold (or release) the ready event
+ holdReady: function( hold ) {
+ if ( hold ) {
+ jQuery.readyWait++;
+ } else {
+ jQuery.ready( true );
+ }
+ },
+
+ // Handle when the DOM is ready
+ ready: function( wait ) {
+
+ // Abort if there are pending holds or we're already ready
+ if ( wait === true ? --jQuery.readyWait : jQuery.isReady ) {
+ return;
+ }
+
+ // Remember that the DOM is ready
+ jQuery.isReady = true;
+
+ // If a normal DOM Ready event fired, decrement, and wait if need be
+ if ( wait !== true && --jQuery.readyWait > 0 ) {
+ return;
+ }
+
+ // If there are functions bound, to execute
+ readyList.resolveWith( document, [ jQuery ] );
+
+ // Trigger any bound ready events
+ if ( jQuery.fn.triggerHandler ) {
+ jQuery( document ).triggerHandler( "ready" );
+ jQuery( document ).off( "ready" );
+ }
+ }
+ });
+
+ /**
+ * The ready event handler and self cleanup method
+ */
+ function completed() {
+ document.removeEventListener( "DOMContentLoaded", completed, false );
+ window.removeEventListener( "load", completed, false );
+ jQuery.ready();
+ }
+
+ jQuery.ready.promise = function( obj ) {
+ if ( !readyList ) {
+
+ readyList = jQuery.Deferred();
+
+ // Catch cases where $(document).ready() is called after the browser event has already occurred.
+ // We once tried to use readyState "interactive" here, but it caused issues like the one
+ // discovered by ChrisS here: http://bugs.jquery.com/ticket/12282#comment:15
+ if ( document.readyState === "complete" ) {
+ // Handle it asynchronously to allow scripts the opportunity to delay ready
+ setTimeout( jQuery.ready );
+
+ } else {
+
+ // Use the handy event callback
+ document.addEventListener( "DOMContentLoaded", completed, false );
+
+ // A fallback to window.onload, that will always work
+ window.addEventListener( "load", completed, false );
+ }
+ }
+ return readyList.promise( obj );
+ };
+
+ // Kick off the DOM ready check even if the user does not
+ jQuery.ready.promise();
+
+
+
+
+ // Multifunctional method to get and set values of a collection
+ // The value/s can optionally be executed if it's a function
+ var access = jQuery.access = function( elems, fn, key, value, chainable, emptyGet, raw ) {
+ var i = 0,
+ len = elems.length,
+ bulk = key == null;
+
+ // Sets many values
+ if ( jQuery.type( key ) === "object" ) {
+ chainable = true;
+ for ( i in key ) {
+ jQuery.access( elems, fn, i, key[i], true, emptyGet, raw );
+ }
+
+ // Sets one value
+ } else if ( value !== undefined ) {
+ chainable = true;
+
+ if ( !jQuery.isFunction( value ) ) {
+ raw = true;
+ }
+
+ if ( bulk ) {
+ // Bulk operations run against the entire set
+ if ( raw ) {
+ fn.call( elems, value );
+ fn = null;
+
+ // ...except when executing function values
+ } else {
+ bulk = fn;
+ fn = function( elem, key, value ) {
+ return bulk.call( jQuery( elem ), value );
+ };
+ }
+ }
+
+ if ( fn ) {
+ for ( ; i < len; i++ ) {
+ fn( elems[i], key, raw ? value : value.call( elems[i], i, fn( elems[i], key ) ) );
+ }
+ }
+ }
+
+ return chainable ?
+ elems :
+
+ // Gets
+ bulk ?
+ fn.call( elems ) :
+ len ? fn( elems[0], key ) : emptyGet;
+ };
+
+
+ /**
+ * Determines whether an object can have data
+ */
+ jQuery.acceptData = function( owner ) {
+ // Accepts only:
+ // - Node
+ // - Node.ELEMENT_NODE
+ // - Node.DOCUMENT_NODE
+ // - Object
+ // - Any
+ /* jshint -W018 */
+ return owner.nodeType === 1 || owner.nodeType === 9 || !( +owner.nodeType );
+ };
+
+
+ function Data() {
+ // Support: Android<4,
+ // Old WebKit does not have Object.preventExtensions/freeze method,
+ // return new empty object instead with no [[set]] accessor
+ Object.defineProperty( this.cache = {}, 0, {
+ get: function() {
+ return {};
+ }
+ });
+
+ this.expando = jQuery.expando + Data.uid++;
+ }
+
+ Data.uid = 1;
+ Data.accepts = jQuery.acceptData;
+
+ Data.prototype = {
+ key: function( owner ) {
+ // We can accept data for non-element nodes in modern browsers,
+ // but we should not, see #8335.
+ // Always return the key for a frozen object.
+ if ( !Data.accepts( owner ) ) {
+ return 0;
+ }
+
+ var descriptor = {},
+ // Check if the owner object already has a cache key
+ unlock = owner[ this.expando ];
+
+ // If not, create one
+ if ( !unlock ) {
+ unlock = Data.uid++;
+
+ // Secure it in a non-enumerable, non-writable property
+ try {
+ descriptor[ this.expando ] = { value: unlock };
+ Object.defineProperties( owner, descriptor );
+
+ // Support: Android<4
+ // Fallback to a less secure definition
+ } catch ( e ) {
+ descriptor[ this.expando ] = unlock;
+ jQuery.extend( owner, descriptor );
+ }
+ }
+
+ // Ensure the cache object
+ if ( !this.cache[ unlock ] ) {
+ this.cache[ unlock ] = {};
+ }
+
+ return unlock;
+ },
+ set: function( owner, data, value ) {
+ var prop,
+ // There may be an unlock assigned to this node,
+ // if there is no entry for this "owner", create one inline
+ // and set the unlock as though an owner entry had always existed
+ unlock = this.key( owner ),
+ cache = this.cache[ unlock ];
+
+ // Handle: [ owner, key, value ] args
+ if ( typeof data === "string" ) {
+ cache[ data ] = value;
+
+ // Handle: [ owner, { properties } ] args
+ } else {
+ // Fresh assignments by object are shallow copied
+ if ( jQuery.isEmptyObject( cache ) ) {
+ jQuery.extend( this.cache[ unlock ], data );
+ // Otherwise, copy the properties one-by-one to the cache object
+ } else {
+ for ( prop in data ) {
+ cache[ prop ] = data[ prop ];
+ }
+ }
+ }
+ return cache;
+ },
+ get: function( owner, key ) {
+ // Either a valid cache is found, or will be created.
+ // New caches will be created and the unlock returned,
+ // allowing direct access to the newly created
+ // empty data object. A valid owner object must be provided.
+ var cache = this.cache[ this.key( owner ) ];
+
+ return key === undefined ?
+ cache : cache[ key ];
+ },
+ access: function( owner, key, value ) {
+ var stored;
+ // In cases where either:
+ //
+ // 1. No key was specified
+ // 2. A string key was specified, but no value provided
+ //
+ // Take the "read" path and allow the get method to determine
+ // which value to return, respectively either:
+ //
+ // 1. The entire cache object
+ // 2. The data stored at the key
+ //
+ if ( key === undefined ||
+ ((key && typeof key === "string") && value === undefined) ) {
+
+ stored = this.get( owner, key );
+
+ return stored !== undefined ?
+ stored : this.get( owner, jQuery.camelCase(key) );
+ }
+
+ // [*]When the key is not a string, or both a key and value
+ // are specified, set or extend (existing objects) with either:
+ //
+ // 1. An object of properties
+ // 2. A key and value
+ //
+ this.set( owner, key, value );
+
+ // Since the "set" path can have two possible entry points
+ // return the expected data based on which path was taken[*]
+ return value !== undefined ? value : key;
+ },
+ remove: function( owner, key ) {
+ var i, name, camel,
+ unlock = this.key( owner ),
+ cache = this.cache[ unlock ];
+
+ if ( key === undefined ) {
+ this.cache[ unlock ] = {};
+
+ } else {
+ // Support array or space separated string of keys
+ if ( jQuery.isArray( key ) ) {
+ // If "name" is an array of keys...
+ // When data is initially created, via ("key", "val") signature,
+ // keys will be converted to camelCase.
+ // Since there is no way to tell _how_ a key was added, remove
+ // both plain key and camelCase key. #12786
+ // This will only penalize the array argument path.
+ name = key.concat( key.map( jQuery.camelCase ) );
+ } else {
+ camel = jQuery.camelCase( key );
+ // Try the string as a key before any manipulation
+ if ( key in cache ) {
+ name = [ key, camel ];
+ } else {
+ // If a key with the spaces exists, use it.
+ // Otherwise, create an array by matching non-whitespace
+ name = camel;
+ name = name in cache ?
+ [ name ] : ( name.match( rnotwhite ) || [] );
+ }
+ }
+
+ i = name.length;
+ while ( i-- ) {
+ delete cache[ name[ i ] ];
+ }
+ }
+ },
+ hasData: function( owner ) {
+ return !jQuery.isEmptyObject(
+ this.cache[ owner[ this.expando ] ] || {}
+ );
+ },
+ discard: function( owner ) {
+ if ( owner[ this.expando ] ) {
+ delete this.cache[ owner[ this.expando ] ];
+ }
+ }
+ };
+ var data_priv = new Data();
+
+ var data_user = new Data();
+
+
+
+ // Implementation Summary
+ //
+ // 1. Enforce API surface and semantic compatibility with 1.9.x branch
+ // 2. Improve the module's maintainability by reducing the storage
+ // paths to a single mechanism.
+ // 3. Use the same single mechanism to support "private" and "user" data.
+ // 4. _Never_ expose "private" data to user code (TODO: Drop _data, _removeData)
+ // 5. Avoid exposing implementation details on user objects (eg. expando properties)
+ // 6. Provide a clear path for implementation upgrade to WeakMap in 2014
+
+ var rbrace = /^(?:\{[\w\W]*\}|\[[\w\W]*\])$/,
+ rmultiDash = /([A-Z])/g;
+
+ function dataAttr( elem, key, data ) {
+ var name;
+
+ // If nothing was found internally, try to fetch any
+ // data from the HTML5 data-* attribute
+ if ( data === undefined && elem.nodeType === 1 ) {
+ name = "data-" + key.replace( rmultiDash, "-$1" ).toLowerCase();
+ data = elem.getAttribute( name );
+
+ if ( typeof data === "string" ) {
+ try {
+ data = data === "true" ? true :
+ data === "false" ? false :
+ data === "null" ? null :
+ // Only convert to a number if it doesn't change the string
+ +data + "" === data ? +data :
+ rbrace.test( data ) ? jQuery.parseJSON( data ) :
+ data;
+ } catch( e ) {}
+
+ // Make sure we set the data so it isn't changed later
+ data_user.set( elem, key, data );
+ } else {
+ data = undefined;
+ }
+ }
+ return data;
+ }
+
+ jQuery.extend({
+ hasData: function( elem ) {
+ return data_user.hasData( elem ) || data_priv.hasData( elem );
+ },
+
+ data: function( elem, name, data ) {
+ return data_user.access( elem, name, data );
+ },
+
+ removeData: function( elem, name ) {
+ data_user.remove( elem, name );
+ },
+
+ // TODO: Now that all calls to _data and _removeData have been replaced
+ // with direct calls to data_priv methods, these can be deprecated.
+ _data: function( elem, name, data ) {
+ return data_priv.access( elem, name, data );
+ },
+
+ _removeData: function( elem, name ) {
+ data_priv.remove( elem, name );
+ }
+ });
+
+ jQuery.fn.extend({
+ data: function( key, value ) {
+ var i, name, data,
+ elem = this[ 0 ],
+ attrs = elem && elem.attributes;
+
+ // Gets all values
+ if ( key === undefined ) {
+ if ( this.length ) {
+ data = data_user.get( elem );
+
+ if ( elem.nodeType === 1 && !data_priv.get( elem, "hasDataAttrs" ) ) {
+ i = attrs.length;
+ while ( i-- ) {
+
+ // Support: IE11+
+ // The attrs elements can be null (#14894)
+ if ( attrs[ i ] ) {
+ name = attrs[ i ].name;
+ if ( name.indexOf( "data-" ) === 0 ) {
+ name = jQuery.camelCase( name.slice(5) );
+ dataAttr( elem, name, data[ name ] );
+ }
+ }
+ }
+ data_priv.set( elem, "hasDataAttrs", true );
+ }
+ }
+
+ return data;
+ }
+
+ // Sets multiple values
+ if ( typeof key === "object" ) {
+ return this.each(function() {
+ data_user.set( this, key );
+ });
+ }
+
+ return access( this, function( value ) {
+ var data,
+ camelKey = jQuery.camelCase( key );
+
+ // The calling jQuery object (element matches) is not empty
+ // (and therefore has an element appears at this[ 0 ]) and the
+ // `value` parameter was not undefined. An empty jQuery object
+ // will result in `undefined` for elem = this[ 0 ] which will
+ // throw an exception if an attempt to read a data cache is made.
+ if ( elem && value === undefined ) {
+ // Attempt to get data from the cache
+ // with the key as-is
+ data = data_user.get( elem, key );
+ if ( data !== undefined ) {
+ return data;
+ }
+
+ // Attempt to get data from the cache
+ // with the key camelized
+ data = data_user.get( elem, camelKey );
+ if ( data !== undefined ) {
+ return data;
+ }
+
+ // Attempt to "discover" the data in
+ // HTML5 custom data-* attrs
+ data = dataAttr( elem, camelKey, undefined );
+ if ( data !== undefined ) {
+ return data;
+ }
+
+ // We tried really hard, but the data doesn't exist.
+ return;
+ }
+
+ // Set the data...
+ this.each(function() {
+ // First, attempt to store a copy or reference of any
+ // data that might've been store with a camelCased key.
+ var data = data_user.get( this, camelKey );
+
+ // For HTML5 data-* attribute interop, we have to
+ // store property names with dashes in a camelCase form.
+ // This might not apply to all properties...*
+ data_user.set( this, camelKey, value );
+
+ // *... In the case of properties that might _actually_
+ // have dashes, we need to also store a copy of that
+ // unchanged property.
+ if ( key.indexOf("-") !== -1 && data !== undefined ) {
+ data_user.set( this, key, value );
+ }
+ });
+ }, null, value, arguments.length > 1, null, true );
+ },
+
+ removeData: function( key ) {
+ return this.each(function() {
+ data_user.remove( this, key );
+ });
+ }
+ });
+
+
+ jQuery.extend({
+ queue: function( elem, type, data ) {
+ var queue;
+
+ if ( elem ) {
+ type = ( type || "fx" ) + "queue";
+ queue = data_priv.get( elem, type );
+
+ // Speed up dequeue by getting out quickly if this is just a lookup
+ if ( data ) {
+ if ( !queue || jQuery.isArray( data ) ) {
+ queue = data_priv.access( elem, type, jQuery.makeArray(data) );
+ } else {
+ queue.push( data );
+ }
+ }
+ return queue || [];
+ }
+ },
+
+ dequeue: function( elem, type ) {
+ type = type || "fx";
+
+ var queue = jQuery.queue( elem, type ),
+ startLength = queue.length,
+ fn = queue.shift(),
+ hooks = jQuery._queueHooks( elem, type ),
+ next = function() {
+ jQuery.dequeue( elem, type );
+ };
+
+ // If the fx queue is dequeued, always remove the progress sentinel
+ if ( fn === "inprogress" ) {
+ fn = queue.shift();
+ startLength--;
+ }
+
+ if ( fn ) {
+
+ // Add a progress sentinel to prevent the fx queue from being
+ // automatically dequeued
+ if ( type === "fx" ) {
+ queue.unshift( "inprogress" );
+ }
+
+ // Clear up the last queue stop function
+ delete hooks.stop;
+ fn.call( elem, next, hooks );
+ }
+
+ if ( !startLength && hooks ) {
+ hooks.empty.fire();
+ }
+ },
+
+ // Not public - generate a queueHooks object, or return the current one
+ _queueHooks: function( elem, type ) {
+ var key = type + "queueHooks";
+ return data_priv.get( elem, key ) || data_priv.access( elem, key, {
+ empty: jQuery.Callbacks("once memory").add(function() {
+ data_priv.remove( elem, [ type + "queue", key ] );
+ })
+ });
+ }
+ });
+
+ jQuery.fn.extend({
+ queue: function( type, data ) {
+ var setter = 2;
+
+ if ( typeof type !== "string" ) {
+ data = type;
+ type = "fx";
+ setter--;
+ }
+
+ if ( arguments.length < setter ) {
+ return jQuery.queue( this[0], type );
+ }
+
+ return data === undefined ?
+ this :
+ this.each(function() {
+ var queue = jQuery.queue( this, type, data );
+
+ // Ensure a hooks for this queue
+ jQuery._queueHooks( this, type );
+
+ if ( type === "fx" && queue[0] !== "inprogress" ) {
+ jQuery.dequeue( this, type );
+ }
+ });
+ },
+ dequeue: function( type ) {
+ return this.each(function() {
+ jQuery.dequeue( this, type );
+ });
+ },
+ clearQueue: function( type ) {
+ return this.queue( type || "fx", [] );
+ },
+ // Get a promise resolved when queues of a certain type
+ // are emptied (fx is the type by default)
+ promise: function( type, obj ) {
+ var tmp,
+ count = 1,
+ defer = jQuery.Deferred(),
+ elements = this,
+ i = this.length,
+ resolve = function() {
+ if ( !( --count ) ) {
+ defer.resolveWith( elements, [ elements ] );
+ }
+ };
+
+ if ( typeof type !== "string" ) {
+ obj = type;
+ type = undefined;
+ }
+ type = type || "fx";
+
+ while ( i-- ) {
+ tmp = data_priv.get( elements[ i ], type + "queueHooks" );
+ if ( tmp && tmp.empty ) {
+ count++;
+ tmp.empty.add( resolve );
+ }
+ }
+ resolve();
+ return defer.promise( obj );
+ }
+ });
+ var pnum = (/[+-]?(?:\d*\.|)\d+(?:[eE][+-]?\d+|)/).source;
+
+ var cssExpand = [ "Top", "Right", "Bottom", "Left" ];
+
+ var isHidden = function( elem, el ) {
+ // isHidden might be called from jQuery#filter function;
+ // in that case, element will be second argument
+ elem = el || elem;
+ return jQuery.css( elem, "display" ) === "none" || !jQuery.contains( elem.ownerDocument, elem );
+ };
+
+ var rcheckableType = (/^(?:checkbox|radio)$/i);
+
+
+
+ (function() {
+ var fragment = document.createDocumentFragment(),
+ div = fragment.appendChild( document.createElement( "div" ) ),
+ input = document.createElement( "input" );
+
+ // Support: Safari<=5.1
+ // Check state lost if the name is set (#11217)
+ // Support: Windows Web Apps (WWA)
+ // `name` and `type` must use .setAttribute for WWA (#14901)
+ input.setAttribute( "type", "radio" );
+ input.setAttribute( "checked", "checked" );
+ input.setAttribute( "name", "t" );
+
+ div.appendChild( input );
+
+ // Support: Safari<=5.1, Android<4.2
+ // Older WebKit doesn't clone checked state correctly in fragments
+ support.checkClone = div.cloneNode( true ).cloneNode( true ).lastChild.checked;
+
+ // Support: IE<=11+
+ // Make sure textarea (and checkbox) defaultValue is properly cloned
+ div.innerHTML = "";
+ support.noCloneChecked = !!div.cloneNode( true ).lastChild.defaultValue;
+ })();
+ var strundefined = typeof undefined;
+
+
+
+ support.focusinBubbles = "onfocusin" in window;
+
+
+ var
+ rkeyEvent = /^key/,
+ rmouseEvent = /^(?:mouse|pointer|contextmenu)|click/,
+ rfocusMorph = /^(?:focusinfocus|focusoutblur)$/,
+ rtypenamespace = /^([^.]*)(?:\.(.+)|)$/;
+
+ function returnTrue() {
+ return true;
+ }
+
+ function returnFalse() {
+ return false;
+ }
+
+ function safeActiveElement() {
+ try {
+ return document.activeElement;
+ } catch ( err ) { }
+ }
+
+ /*
+ * Helper functions for managing events -- not part of the public interface.
+ * Props to Dean Edwards' addEvent library for many of the ideas.
+ */
+ jQuery.event = {
+
+ global: {},
+
+ add: function( elem, types, handler, data, selector ) {
+
+ var handleObjIn, eventHandle, tmp,
+ events, t, handleObj,
+ special, handlers, type, namespaces, origType,
+ elemData = data_priv.get( elem );
+
+ // Don't attach events to noData or text/comment nodes (but allow plain objects)
+ if ( !elemData ) {
+ return;
+ }
+
+ // Caller can pass in an object of custom data in lieu of the handler
+ if ( handler.handler ) {
+ handleObjIn = handler;
+ handler = handleObjIn.handler;
+ selector = handleObjIn.selector;
+ }
+
+ // Make sure that the handler has a unique ID, used to find/remove it later
+ if ( !handler.guid ) {
+ handler.guid = jQuery.guid++;
+ }
+
+ // Init the element's event structure and main handler, if this is the first
+ if ( !(events = elemData.events) ) {
+ events = elemData.events = {};
+ }
+ if ( !(eventHandle = elemData.handle) ) {
+ eventHandle = elemData.handle = function( e ) {
+ // Discard the second event of a jQuery.event.trigger() and
+ // when an event is called after a page has unloaded
+ return typeof jQuery !== strundefined && jQuery.event.triggered !== e.type ?
+ jQuery.event.dispatch.apply( elem, arguments ) : undefined;
+ };
+ }
+
+ // Handle multiple events separated by a space
+ types = ( types || "" ).match( rnotwhite ) || [ "" ];
+ t = types.length;
+ while ( t-- ) {
+ tmp = rtypenamespace.exec( types[t] ) || [];
+ type = origType = tmp[1];
+ namespaces = ( tmp[2] || "" ).split( "." ).sort();
+
+ // There *must* be a type, no attaching namespace-only handlers
+ if ( !type ) {
+ continue;
+ }
+
+ // If event changes its type, use the special event handlers for the changed type
+ special = jQuery.event.special[ type ] || {};
+
+ // If selector defined, determine special event api type, otherwise given type
+ type = ( selector ? special.delegateType : special.bindType ) || type;
+
+ // Update special based on newly reset type
+ special = jQuery.event.special[ type ] || {};
+
+ // handleObj is passed to all event handlers
+ handleObj = jQuery.extend({
+ type: type,
+ origType: origType,
+ data: data,
+ handler: handler,
+ guid: handler.guid,
+ selector: selector,
+ needsContext: selector && jQuery.expr.match.needsContext.test( selector ),
+ namespace: namespaces.join(".")
+ }, handleObjIn );
+
+ // Init the event handler queue if we're the first
+ if ( !(handlers = events[ type ]) ) {
+ handlers = events[ type ] = [];
+ handlers.delegateCount = 0;
+
+ // Only use addEventListener if the special events handler returns false
+ if ( !special.setup || special.setup.call( elem, data, namespaces, eventHandle ) === false ) {
+ if ( elem.addEventListener ) {
+ elem.addEventListener( type, eventHandle, false );
+ }
+ }
+ }
+
+ if ( special.add ) {
+ special.add.call( elem, handleObj );
+
+ if ( !handleObj.handler.guid ) {
+ handleObj.handler.guid = handler.guid;
+ }
+ }
+
+ // Add to the element's handler list, delegates in front
+ if ( selector ) {
+ handlers.splice( handlers.delegateCount++, 0, handleObj );
+ } else {
+ handlers.push( handleObj );
+ }
+
+ // Keep track of which events have ever been used, for event optimization
+ jQuery.event.global[ type ] = true;
+ }
+
+ },
+
+ // Detach an event or set of events from an element
+ remove: function( elem, types, handler, selector, mappedTypes ) {
+
+ var j, origCount, tmp,
+ events, t, handleObj,
+ special, handlers, type, namespaces, origType,
+ elemData = data_priv.hasData( elem ) && data_priv.get( elem );
+
+ if ( !elemData || !(events = elemData.events) ) {
+ return;
+ }
+
+ // Once for each type.namespace in types; type may be omitted
+ types = ( types || "" ).match( rnotwhite ) || [ "" ];
+ t = types.length;
+ while ( t-- ) {
+ tmp = rtypenamespace.exec( types[t] ) || [];
+ type = origType = tmp[1];
+ namespaces = ( tmp[2] || "" ).split( "." ).sort();
+
+ // Unbind all events (on this namespace, if provided) for the element
+ if ( !type ) {
+ for ( type in events ) {
+ jQuery.event.remove( elem, type + types[ t ], handler, selector, true );
+ }
+ continue;
+ }
+
+ special = jQuery.event.special[ type ] || {};
+ type = ( selector ? special.delegateType : special.bindType ) || type;
+ handlers = events[ type ] || [];
+ tmp = tmp[2] && new RegExp( "(^|\\.)" + namespaces.join("\\.(?:.*\\.|)") + "(\\.|$)" );
+
+ // Remove matching events
+ origCount = j = handlers.length;
+ while ( j-- ) {
+ handleObj = handlers[ j ];
+
+ if ( ( mappedTypes || origType === handleObj.origType ) &&
+ ( !handler || handler.guid === handleObj.guid ) &&
+ ( !tmp || tmp.test( handleObj.namespace ) ) &&
+ ( !selector || selector === handleObj.selector || selector === "**" && handleObj.selector ) ) {
+ handlers.splice( j, 1 );
+
+ if ( handleObj.selector ) {
+ handlers.delegateCount--;
+ }
+ if ( special.remove ) {
+ special.remove.call( elem, handleObj );
+ }
+ }
+ }
+
+ // Remove generic event handler if we removed something and no more handlers exist
+ // (avoids potential for endless recursion during removal of special event handlers)
+ if ( origCount && !handlers.length ) {
+ if ( !special.teardown || special.teardown.call( elem, namespaces, elemData.handle ) === false ) {
+ jQuery.removeEvent( elem, type, elemData.handle );
+ }
+
+ delete events[ type ];
+ }
+ }
+
+ // Remove the expando if it's no longer used
+ if ( jQuery.isEmptyObject( events ) ) {
+ delete elemData.handle;
+ data_priv.remove( elem, "events" );
+ }
+ },
+
+ trigger: function( event, data, elem, onlyHandlers ) {
+
+ var i, cur, tmp, bubbleType, ontype, handle, special,
+ eventPath = [ elem || document ],
+ type = hasOwn.call( event, "type" ) ? event.type : event,
+ namespaces = hasOwn.call( event, "namespace" ) ? event.namespace.split(".") : [];
+
+ cur = tmp = elem = elem || document;
+
+ // Don't do events on text and comment nodes
+ if ( elem.nodeType === 3 || elem.nodeType === 8 ) {
+ return;
+ }
+
+ // focus/blur morphs to focusin/out; ensure we're not firing them right now
+ if ( rfocusMorph.test( type + jQuery.event.triggered ) ) {
+ return;
+ }
+
+ if ( type.indexOf(".") >= 0 ) {
+ // Namespaced trigger; create a regexp to match event type in handle()
+ namespaces = type.split(".");
+ type = namespaces.shift();
+ namespaces.sort();
+ }
+ ontype = type.indexOf(":") < 0 && "on" + type;
+
+ // Caller can pass in a jQuery.Event object, Object, or just an event type string
+ event = event[ jQuery.expando ] ?
+ event :
+ new jQuery.Event( type, typeof event === "object" && event );
+
+ // Trigger bitmask: & 1 for native handlers; & 2 for jQuery (always true)
+ event.isTrigger = onlyHandlers ? 2 : 3;
+ event.namespace = namespaces.join(".");
+ event.namespace_re = event.namespace ?
+ new RegExp( "(^|\\.)" + namespaces.join("\\.(?:.*\\.|)") + "(\\.|$)" ) :
+ null;
+
+ // Clean up the event in case it is being reused
+ event.result = undefined;
+ if ( !event.target ) {
+ event.target = elem;
+ }
+
+ // Clone any incoming data and prepend the event, creating the handler arg list
+ data = data == null ?
+ [ event ] :
+ jQuery.makeArray( data, [ event ] );
+
+ // Allow special events to draw outside the lines
+ special = jQuery.event.special[ type ] || {};
+ if ( !onlyHandlers && special.trigger && special.trigger.apply( elem, data ) === false ) {
+ return;
+ }
+
+ // Determine event propagation path in advance, per W3C events spec (#9951)
+ // Bubble up to document, then to window; watch for a global ownerDocument var (#9724)
+ if ( !onlyHandlers && !special.noBubble && !jQuery.isWindow( elem ) ) {
+
+ bubbleType = special.delegateType || type;
+ if ( !rfocusMorph.test( bubbleType + type ) ) {
+ cur = cur.parentNode;
+ }
+ for ( ; cur; cur = cur.parentNode ) {
+ eventPath.push( cur );
+ tmp = cur;
+ }
+
+ // Only add window if we got to document (e.g., not plain obj or detached DOM)
+ if ( tmp === (elem.ownerDocument || document) ) {
+ eventPath.push( tmp.defaultView || tmp.parentWindow || window );
+ }
+ }
+
+ // Fire handlers on the event path
+ i = 0;
+ while ( (cur = eventPath[i++]) && !event.isPropagationStopped() ) {
+
+ event.type = i > 1 ?
+ bubbleType :
+ special.bindType || type;
+
+ // jQuery handler
+ handle = ( data_priv.get( cur, "events" ) || {} )[ event.type ] && data_priv.get( cur, "handle" );
+ if ( handle ) {
+ handle.apply( cur, data );
+ }
+
+ // Native handler
+ handle = ontype && cur[ ontype ];
+ if ( handle && handle.apply && jQuery.acceptData( cur ) ) {
+ event.result = handle.apply( cur, data );
+ if ( event.result === false ) {
+ event.preventDefault();
+ }
+ }
+ }
+ event.type = type;
+
+ // If nobody prevented the default action, do it now
+ if ( !onlyHandlers && !event.isDefaultPrevented() ) {
+
+ if ( (!special._default || special._default.apply( eventPath.pop(), data ) === false) &&
+ jQuery.acceptData( elem ) ) {
+
+ // Call a native DOM method on the target with the same name name as the event.
+ // Don't do default actions on window, that's where global variables be (#6170)
+ if ( ontype && jQuery.isFunction( elem[ type ] ) && !jQuery.isWindow( elem ) ) {
+
+ // Don't re-trigger an onFOO event when we call its FOO() method
+ tmp = elem[ ontype ];
+
+ if ( tmp ) {
+ elem[ ontype ] = null;
+ }
+
+ // Prevent re-triggering of the same event, since we already bubbled it above
+ jQuery.event.triggered = type;
+ elem[ type ]();
+ jQuery.event.triggered = undefined;
+
+ if ( tmp ) {
+ elem[ ontype ] = tmp;
+ }
+ }
+ }
+ }
+
+ return event.result;
+ },
+
+ dispatch: function( event ) {
+
+ // Make a writable jQuery.Event from the native event object
+ event = jQuery.event.fix( event );
+
+ var i, j, ret, matched, handleObj,
+ handlerQueue = [],
+ args = slice.call( arguments ),
+ handlers = ( data_priv.get( this, "events" ) || {} )[ event.type ] || [],
+ special = jQuery.event.special[ event.type ] || {};
+
+ // Use the fix-ed jQuery.Event rather than the (read-only) native event
+ args[0] = event;
+ event.delegateTarget = this;
+
+ // Call the preDispatch hook for the mapped type, and let it bail if desired
+ if ( special.preDispatch && special.preDispatch.call( this, event ) === false ) {
+ return;
+ }
+
+ // Determine handlers
+ handlerQueue = jQuery.event.handlers.call( this, event, handlers );
+
+ // Run delegates first; they may want to stop propagation beneath us
+ i = 0;
+ while ( (matched = handlerQueue[ i++ ]) && !event.isPropagationStopped() ) {
+ event.currentTarget = matched.elem;
+
+ j = 0;
+ while ( (handleObj = matched.handlers[ j++ ]) && !event.isImmediatePropagationStopped() ) {
+
+ // Triggered event must either 1) have no namespace, or 2) have namespace(s)
+ // a subset or equal to those in the bound event (both can have no namespace).
+ if ( !event.namespace_re || event.namespace_re.test( handleObj.namespace ) ) {
+
+ event.handleObj = handleObj;
+ event.data = handleObj.data;
+
+ ret = ( (jQuery.event.special[ handleObj.origType ] || {}).handle || handleObj.handler )
+ .apply( matched.elem, args );
+
+ if ( ret !== undefined ) {
+ if ( (event.result = ret) === false ) {
+ event.preventDefault();
+ event.stopPropagation();
+ }
+ }
+ }
+ }
+ }
+
+ // Call the postDispatch hook for the mapped type
+ if ( special.postDispatch ) {
+ special.postDispatch.call( this, event );
+ }
+
+ return event.result;
+ },
+
+ handlers: function( event, handlers ) {
+ var i, matches, sel, handleObj,
+ handlerQueue = [],
+ delegateCount = handlers.delegateCount,
+ cur = event.target;
+
+ // Find delegate handlers
+ // Black-hole SVG instance trees (#13180)
+ // Avoid non-left-click bubbling in Firefox (#3861)
+ if ( delegateCount && cur.nodeType && (!event.button || event.type !== "click") ) {
+
+ for ( ; cur !== this; cur = cur.parentNode || this ) {
+
+ // Don't process clicks on disabled elements (#6911, #8165, #11382, #11764)
+ if ( cur.disabled !== true || event.type !== "click" ) {
+ matches = [];
+ for ( i = 0; i < delegateCount; i++ ) {
+ handleObj = handlers[ i ];
+
+ // Don't conflict with Object.prototype properties (#13203)
+ sel = handleObj.selector + " ";
+
+ if ( matches[ sel ] === undefined ) {
+ matches[ sel ] = handleObj.needsContext ?
+ jQuery( sel, this ).index( cur ) >= 0 :
+ jQuery.find( sel, this, null, [ cur ] ).length;
+ }
+ if ( matches[ sel ] ) {
+ matches.push( handleObj );
+ }
+ }
+ if ( matches.length ) {
+ handlerQueue.push({ elem: cur, handlers: matches });
+ }
+ }
+ }
+ }
+
+ // Add the remaining (directly-bound) handlers
+ if ( delegateCount < handlers.length ) {
+ handlerQueue.push({ elem: this, handlers: handlers.slice( delegateCount ) });
+ }
+
+ return handlerQueue;
+ },
+
+ // Includes some event props shared by KeyEvent and MouseEvent
+ props: "altKey bubbles cancelable ctrlKey currentTarget eventPhase metaKey relatedTarget shiftKey target timeStamp view which".split(" "),
+
+ fixHooks: {},
+
+ keyHooks: {
+ props: "char charCode key keyCode".split(" "),
+ filter: function( event, original ) {
+
+ // Add which for key events
+ if ( event.which == null ) {
+ event.which = original.charCode != null ? original.charCode : original.keyCode;
+ }
+
+ return event;
+ }
+ },
+
+ mouseHooks: {
+ props: "button buttons clientX clientY offsetX offsetY pageX pageY screenX screenY toElement".split(" "),
+ filter: function( event, original ) {
+ var eventDoc, doc, body,
+ button = original.button;
+
+ // Calculate pageX/Y if missing and clientX/Y available
+ if ( event.pageX == null && original.clientX != null ) {
+ eventDoc = event.target.ownerDocument || document;
+ doc = eventDoc.documentElement;
+ body = eventDoc.body;
+
+ event.pageX = original.clientX + ( doc && doc.scrollLeft || body && body.scrollLeft || 0 ) - ( doc && doc.clientLeft || body && body.clientLeft || 0 );
+ event.pageY = original.clientY + ( doc && doc.scrollTop || body && body.scrollTop || 0 ) - ( doc && doc.clientTop || body && body.clientTop || 0 );
+ }
+
+ // Add which for click: 1 === left; 2 === middle; 3 === right
+ // Note: button is not normalized, so don't use it
+ if ( !event.which && button !== undefined ) {
+ event.which = ( button & 1 ? 1 : ( button & 2 ? 3 : ( button & 4 ? 2 : 0 ) ) );
+ }
+
+ return event;
+ }
+ },
+
+ fix: function( event ) {
+ if ( event[ jQuery.expando ] ) {
+ return event;
+ }
+
+ // Create a writable copy of the event object and normalize some properties
+ var i, prop, copy,
+ type = event.type,
+ originalEvent = event,
+ fixHook = this.fixHooks[ type ];
+
+ if ( !fixHook ) {
+ this.fixHooks[ type ] = fixHook =
+ rmouseEvent.test( type ) ? this.mouseHooks :
+ rkeyEvent.test( type ) ? this.keyHooks :
+ {};
+ }
+ copy = fixHook.props ? this.props.concat( fixHook.props ) : this.props;
+
+ event = new jQuery.Event( originalEvent );
+
+ i = copy.length;
+ while ( i-- ) {
+ prop = copy[ i ];
+ event[ prop ] = originalEvent[ prop ];
+ }
+
+ // Support: Cordova 2.5 (WebKit) (#13255)
+ // All events should have a target; Cordova deviceready doesn't
+ if ( !event.target ) {
+ event.target = document;
+ }
+
+ // Support: Safari 6.0+, Chrome<28
+ // Target should not be a text node (#504, #13143)
+ if ( event.target.nodeType === 3 ) {
+ event.target = event.target.parentNode;
+ }
+
+ return fixHook.filter ? fixHook.filter( event, originalEvent ) : event;
+ },
+
+ special: {
+ load: {
+ // Prevent triggered image.load events from bubbling to window.load
+ noBubble: true
+ },
+ focus: {
+ // Fire native event if possible so blur/focus sequence is correct
+ trigger: function() {
+ if ( this !== safeActiveElement() && this.focus ) {
+ this.focus();
+ return false;
+ }
+ },
+ delegateType: "focusin"
+ },
+ blur: {
+ trigger: function() {
+ if ( this === safeActiveElement() && this.blur ) {
+ this.blur();
+ return false;
+ }
+ },
+ delegateType: "focusout"
+ },
+ click: {
+ // For checkbox, fire native event so checked state will be right
+ trigger: function() {
+ if ( this.type === "checkbox" && this.click && jQuery.nodeName( this, "input" ) ) {
+ this.click();
+ return false;
+ }
+ },
+
+ // For cross-browser consistency, don't fire native .click() on links
+ _default: function( event ) {
+ return jQuery.nodeName( event.target, "a" );
+ }
+ },
+
+ beforeunload: {
+ postDispatch: function( event ) {
+
+ // Support: Firefox 20+
+ // Firefox doesn't alert if the returnValue field is not set.
+ if ( event.result !== undefined && event.originalEvent ) {
+ event.originalEvent.returnValue = event.result;
+ }
+ }
+ }
+ },
+
+ simulate: function( type, elem, event, bubble ) {
+ // Piggyback on a donor event to simulate a different one.
+ // Fake originalEvent to avoid donor's stopPropagation, but if the
+ // simulated event prevents default then we do the same on the donor.
+ var e = jQuery.extend(
+ new jQuery.Event(),
+ event,
+ {
+ type: type,
+ isSimulated: true,
+ originalEvent: {}
+ }
+ );
+ if ( bubble ) {
+ jQuery.event.trigger( e, null, elem );
+ } else {
+ jQuery.event.dispatch.call( elem, e );
+ }
+ if ( e.isDefaultPrevented() ) {
+ event.preventDefault();
+ }
+ }
+ };
+
+ jQuery.removeEvent = function( elem, type, handle ) {
+ if ( elem.removeEventListener ) {
+ elem.removeEventListener( type, handle, false );
+ }
+ };
+
+ jQuery.Event = function( src, props ) {
+ // Allow instantiation without the 'new' keyword
+ if ( !(this instanceof jQuery.Event) ) {
+ return new jQuery.Event( src, props );
+ }
+
+ // Event object
+ if ( src && src.type ) {
+ this.originalEvent = src;
+ this.type = src.type;
+
+ // Events bubbling up the document may have been marked as prevented
+ // by a handler lower down the tree; reflect the correct value.
+ this.isDefaultPrevented = src.defaultPrevented ||
+ src.defaultPrevented === undefined &&
+ // Support: Android<4.0
+ src.returnValue === false ?
+ returnTrue :
+ returnFalse;
+
+ // Event type
+ } else {
+ this.type = src;
+ }
+
+ // Put explicitly provided properties onto the event object
+ if ( props ) {
+ jQuery.extend( this, props );
+ }
+
+ // Create a timestamp if incoming event doesn't have one
+ this.timeStamp = src && src.timeStamp || jQuery.now();
+
+ // Mark it as fixed
+ this[ jQuery.expando ] = true;
+ };
+
+ // jQuery.Event is based on DOM3 Events as specified by the ECMAScript Language Binding
+ // http://www.w3.org/TR/2003/WD-DOM-Level-3-Events-20030331/ecma-script-binding.html
+ jQuery.Event.prototype = {
+ isDefaultPrevented: returnFalse,
+ isPropagationStopped: returnFalse,
+ isImmediatePropagationStopped: returnFalse,
+
+ preventDefault: function() {
+ var e = this.originalEvent;
+
+ this.isDefaultPrevented = returnTrue;
+
+ if ( e && e.preventDefault ) {
+ e.preventDefault();
+ }
+ },
+ stopPropagation: function() {
+ var e = this.originalEvent;
+
+ this.isPropagationStopped = returnTrue;
+
+ if ( e && e.stopPropagation ) {
+ e.stopPropagation();
+ }
+ },
+ stopImmediatePropagation: function() {
+ var e = this.originalEvent;
+
+ this.isImmediatePropagationStopped = returnTrue;
+
+ if ( e && e.stopImmediatePropagation ) {
+ e.stopImmediatePropagation();
+ }
+
+ this.stopPropagation();
+ }
+ };
+
+ // Create mouseenter/leave events using mouseover/out and event-time checks
+ // Support: Chrome 15+
+ jQuery.each({
+ mouseenter: "mouseover",
+ mouseleave: "mouseout",
+ pointerenter: "pointerover",
+ pointerleave: "pointerout"
+ }, function( orig, fix ) {
+ jQuery.event.special[ orig ] = {
+ delegateType: fix,
+ bindType: fix,
+
+ handle: function( event ) {
+ var ret,
+ target = this,
+ related = event.relatedTarget,
+ handleObj = event.handleObj;
+
+ // For mousenter/leave call the handler if related is outside the target.
+ // NB: No relatedTarget if the mouse left/entered the browser window
+ if ( !related || (related !== target && !jQuery.contains( target, related )) ) {
+ event.type = handleObj.origType;
+ ret = handleObj.handler.apply( this, arguments );
+ event.type = fix;
+ }
+ return ret;
+ }
+ };
+ });
+
+ // Support: Firefox, Chrome, Safari
+ // Create "bubbling" focus and blur events
+ if ( !support.focusinBubbles ) {
+ jQuery.each({ focus: "focusin", blur: "focusout" }, function( orig, fix ) {
+
+ // Attach a single capturing handler on the document while someone wants focusin/focusout
+ var handler = function( event ) {
+ jQuery.event.simulate( fix, event.target, jQuery.event.fix( event ), true );
+ };
+
+ jQuery.event.special[ fix ] = {
+ setup: function() {
+ var doc = this.ownerDocument || this,
+ attaches = data_priv.access( doc, fix );
+
+ if ( !attaches ) {
+ doc.addEventListener( orig, handler, true );
+ }
+ data_priv.access( doc, fix, ( attaches || 0 ) + 1 );
+ },
+ teardown: function() {
+ var doc = this.ownerDocument || this,
+ attaches = data_priv.access( doc, fix ) - 1;
+
+ if ( !attaches ) {
+ doc.removeEventListener( orig, handler, true );
+ data_priv.remove( doc, fix );
+
+ } else {
+ data_priv.access( doc, fix, attaches );
+ }
+ }
+ };
+ });
+ }
+
+ jQuery.fn.extend({
+
+ on: function( types, selector, data, fn, /*INTERNAL*/ one ) {
+ var origFn, type;
+
+ // Types can be a map of types/handlers
+ if ( typeof types === "object" ) {
+ // ( types-Object, selector, data )
+ if ( typeof selector !== "string" ) {
+ // ( types-Object, data )
+ data = data || selector;
+ selector = undefined;
+ }
+ for ( type in types ) {
+ this.on( type, selector, data, types[ type ], one );
+ }
+ return this;
+ }
+
+ if ( data == null && fn == null ) {
+ // ( types, fn )
+ fn = selector;
+ data = selector = undefined;
+ } else if ( fn == null ) {
+ if ( typeof selector === "string" ) {
+ // ( types, selector, fn )
+ fn = data;
+ data = undefined;
+ } else {
+ // ( types, data, fn )
+ fn = data;
+ data = selector;
+ selector = undefined;
+ }
+ }
+ if ( fn === false ) {
+ fn = returnFalse;
+ } else if ( !fn ) {
+ return this;
+ }
+
+ if ( one === 1 ) {
+ origFn = fn;
+ fn = function( event ) {
+ // Can use an empty set, since event contains the info
+ jQuery().off( event );
+ return origFn.apply( this, arguments );
+ };
+ // Use same guid so caller can remove using origFn
+ fn.guid = origFn.guid || ( origFn.guid = jQuery.guid++ );
+ }
+ return this.each( function() {
+ jQuery.event.add( this, types, fn, data, selector );
+ });
+ },
+ one: function( types, selector, data, fn ) {
+ return this.on( types, selector, data, fn, 1 );
+ },
+ off: function( types, selector, fn ) {
+ var handleObj, type;
+ if ( types && types.preventDefault && types.handleObj ) {
+ // ( event ) dispatched jQuery.Event
+ handleObj = types.handleObj;
+ jQuery( types.delegateTarget ).off(
+ handleObj.namespace ? handleObj.origType + "." + handleObj.namespace : handleObj.origType,
+ handleObj.selector,
+ handleObj.handler
+ );
+ return this;
+ }
+ if ( typeof types === "object" ) {
+ // ( types-object [, selector] )
+ for ( type in types ) {
+ this.off( type, selector, types[ type ] );
+ }
+ return this;
+ }
+ if ( selector === false || typeof selector === "function" ) {
+ // ( types [, fn] )
+ fn = selector;
+ selector = undefined;
+ }
+ if ( fn === false ) {
+ fn = returnFalse;
+ }
+ return this.each(function() {
+ jQuery.event.remove( this, types, fn, selector );
+ });
+ },
+
+ trigger: function( type, data ) {
+ return this.each(function() {
+ jQuery.event.trigger( type, data, this );
+ });
+ },
+ triggerHandler: function( type, data ) {
+ var elem = this[0];
+ if ( elem ) {
+ return jQuery.event.trigger( type, data, elem, true );
+ }
+ }
+ });
+
+
+ var
+ rxhtmlTag = /<(?!area|br|col|embed|hr|img|input|link|meta|param)(([\w:]+)[^>]*)\/>/gi,
+ rtagName = /<([\w:]+)/,
+ rhtml = /<|&#?\w+;/,
+ rnoInnerhtml = /<(?:script|style|link)/i,
+ // checked="checked" or checked
+ rchecked = /checked\s*(?:[^=]|=\s*.checked.)/i,
+ rscriptType = /^$|\/(?:java|ecma)script/i,
+ rscriptTypeMasked = /^true\/(.*)/,
+ rcleanScript = /^\s*\s*$/g,
+
+ // We have to close these tags to support XHTML (#13200)
+ wrapMap = {
+
+ // Support: IE9
+ option: [ 1, "", " " ],
+
+ thead: [ 1, "" ],
+ col: [ 2, "" ],
+ tr: [ 2, "" ],
+ td: [ 3, "" ],
+
+ _default: [ 0, "", "" ]
+ };
+
+ // Support: IE9
+ wrapMap.optgroup = wrapMap.option;
+
+ wrapMap.tbody = wrapMap.tfoot = wrapMap.colgroup = wrapMap.caption = wrapMap.thead;
+ wrapMap.th = wrapMap.td;
+
+ // Support: 1.x compatibility
+ // Manipulating tables requires a tbody
+ function manipulationTarget( elem, content ) {
+ return jQuery.nodeName( elem, "table" ) &&
+ jQuery.nodeName( content.nodeType !== 11 ? content : content.firstChild, "tr" ) ?
+
+ elem.getElementsByTagName("tbody")[0] ||
+ elem.appendChild( elem.ownerDocument.createElement("tbody") ) :
+ elem;
+ }
+
+ // Replace/restore the type attribute of script elements for safe DOM manipulation
+ function disableScript( elem ) {
+ elem.type = (elem.getAttribute("type") !== null) + "/" + elem.type;
+ return elem;
+ }
+ function restoreScript( elem ) {
+ var match = rscriptTypeMasked.exec( elem.type );
+
+ if ( match ) {
+ elem.type = match[ 1 ];
+ } else {
+ elem.removeAttribute("type");
+ }
+
+ return elem;
+ }
+
+ // Mark scripts as having already been evaluated
+ function setGlobalEval( elems, refElements ) {
+ var i = 0,
+ l = elems.length;
+
+ for ( ; i < l; i++ ) {
+ data_priv.set(
+ elems[ i ], "globalEval", !refElements || data_priv.get( refElements[ i ], "globalEval" )
+ );
+ }
+ }
+
+ function cloneCopyEvent( src, dest ) {
+ var i, l, type, pdataOld, pdataCur, udataOld, udataCur, events;
+
+ if ( dest.nodeType !== 1 ) {
+ return;
+ }
+
+ // 1. Copy private data: events, handlers, etc.
+ if ( data_priv.hasData( src ) ) {
+ pdataOld = data_priv.access( src );
+ pdataCur = data_priv.set( dest, pdataOld );
+ events = pdataOld.events;
+
+ if ( events ) {
+ delete pdataCur.handle;
+ pdataCur.events = {};
+
+ for ( type in events ) {
+ for ( i = 0, l = events[ type ].length; i < l; i++ ) {
+ jQuery.event.add( dest, type, events[ type ][ i ] );
+ }
+ }
+ }
+ }
+
+ // 2. Copy user data
+ if ( data_user.hasData( src ) ) {
+ udataOld = data_user.access( src );
+ udataCur = jQuery.extend( {}, udataOld );
+
+ data_user.set( dest, udataCur );
+ }
+ }
+
+ function getAll( context, tag ) {
+ var ret = context.getElementsByTagName ? context.getElementsByTagName( tag || "*" ) :
+ context.querySelectorAll ? context.querySelectorAll( tag || "*" ) :
+ [];
+
+ return tag === undefined || tag && jQuery.nodeName( context, tag ) ?
+ jQuery.merge( [ context ], ret ) :
+ ret;
+ }
+
+ // Fix IE bugs, see support tests
+ function fixInput( src, dest ) {
+ var nodeName = dest.nodeName.toLowerCase();
+
+ // Fails to persist the checked state of a cloned checkbox or radio button.
+ if ( nodeName === "input" && rcheckableType.test( src.type ) ) {
+ dest.checked = src.checked;
+
+ // Fails to return the selected option to the default selected state when cloning options
+ } else if ( nodeName === "input" || nodeName === "textarea" ) {
+ dest.defaultValue = src.defaultValue;
+ }
+ }
+
+ jQuery.extend({
+ clone: function( elem, dataAndEvents, deepDataAndEvents ) {
+ var i, l, srcElements, destElements,
+ clone = elem.cloneNode( true ),
+ inPage = jQuery.contains( elem.ownerDocument, elem );
+
+ // Fix IE cloning issues
+ if ( !support.noCloneChecked && ( elem.nodeType === 1 || elem.nodeType === 11 ) &&
+ !jQuery.isXMLDoc( elem ) ) {
+
+ // We eschew Sizzle here for performance reasons: http://jsperf.com/getall-vs-sizzle/2
+ destElements = getAll( clone );
+ srcElements = getAll( elem );
+
+ for ( i = 0, l = srcElements.length; i < l; i++ ) {
+ fixInput( srcElements[ i ], destElements[ i ] );
+ }
+ }
+
+ // Copy the events from the original to the clone
+ if ( dataAndEvents ) {
+ if ( deepDataAndEvents ) {
+ srcElements = srcElements || getAll( elem );
+ destElements = destElements || getAll( clone );
+
+ for ( i = 0, l = srcElements.length; i < l; i++ ) {
+ cloneCopyEvent( srcElements[ i ], destElements[ i ] );
+ }
+ } else {
+ cloneCopyEvent( elem, clone );
+ }
+ }
+
+ // Preserve script evaluation history
+ destElements = getAll( clone, "script" );
+ if ( destElements.length > 0 ) {
+ setGlobalEval( destElements, !inPage && getAll( elem, "script" ) );
+ }
+
+ // Return the cloned set
+ return clone;
+ },
+
+ buildFragment: function( elems, context, scripts, selection ) {
+ var elem, tmp, tag, wrap, contains, j,
+ fragment = context.createDocumentFragment(),
+ nodes = [],
+ i = 0,
+ l = elems.length;
+
+ for ( ; i < l; i++ ) {
+ elem = elems[ i ];
+
+ if ( elem || elem === 0 ) {
+
+ // Add nodes directly
+ if ( jQuery.type( elem ) === "object" ) {
+ // Support: QtWebKit, PhantomJS
+ // push.apply(_, arraylike) throws on ancient WebKit
+ jQuery.merge( nodes, elem.nodeType ? [ elem ] : elem );
+
+ // Convert non-html into a text node
+ } else if ( !rhtml.test( elem ) ) {
+ nodes.push( context.createTextNode( elem ) );
+
+ // Convert html into DOM nodes
+ } else {
+ tmp = tmp || fragment.appendChild( context.createElement("div") );
+
+ // Deserialize a standard representation
+ tag = ( rtagName.exec( elem ) || [ "", "" ] )[ 1 ].toLowerCase();
+ wrap = wrapMap[ tag ] || wrapMap._default;
+ tmp.innerHTML = wrap[ 1 ] + elem.replace( rxhtmlTag, "<$1>" ) + wrap[ 2 ];
+
+ // Descend through wrappers to the right content
+ j = wrap[ 0 ];
+ while ( j-- ) {
+ tmp = tmp.lastChild;
+ }
+
+ // Support: QtWebKit, PhantomJS
+ // push.apply(_, arraylike) throws on ancient WebKit
+ jQuery.merge( nodes, tmp.childNodes );
+
+ // Remember the top-level container
+ tmp = fragment.firstChild;
+
+ // Ensure the created nodes are orphaned (#12392)
+ tmp.textContent = "";
+ }
+ }
+ }
+
+ // Remove wrapper from fragment
+ fragment.textContent = "";
+
+ i = 0;
+ while ( (elem = nodes[ i++ ]) ) {
+
+ // #4087 - If origin and destination elements are the same, and this is
+ // that element, do not do anything
+ if ( selection && jQuery.inArray( elem, selection ) !== -1 ) {
+ continue;
+ }
+
+ contains = jQuery.contains( elem.ownerDocument, elem );
+
+ // Append to fragment
+ tmp = getAll( fragment.appendChild( elem ), "script" );
+
+ // Preserve script evaluation history
+ if ( contains ) {
+ setGlobalEval( tmp );
+ }
+
+ // Capture executables
+ if ( scripts ) {
+ j = 0;
+ while ( (elem = tmp[ j++ ]) ) {
+ if ( rscriptType.test( elem.type || "" ) ) {
+ scripts.push( elem );
+ }
+ }
+ }
+ }
+
+ return fragment;
+ },
+
+ cleanData: function( elems ) {
+ var data, elem, type, key,
+ special = jQuery.event.special,
+ i = 0;
+
+ for ( ; (elem = elems[ i ]) !== undefined; i++ ) {
+ if ( jQuery.acceptData( elem ) ) {
+ key = elem[ data_priv.expando ];
+
+ if ( key && (data = data_priv.cache[ key ]) ) {
+ if ( data.events ) {
+ for ( type in data.events ) {
+ if ( special[ type ] ) {
+ jQuery.event.remove( elem, type );
+
+ // This is a shortcut to avoid jQuery.event.remove's overhead
+ } else {
+ jQuery.removeEvent( elem, type, data.handle );
+ }
+ }
+ }
+ if ( data_priv.cache[ key ] ) {
+ // Discard any remaining `private` data
+ delete data_priv.cache[ key ];
+ }
+ }
+ }
+ // Discard any remaining `user` data
+ delete data_user.cache[ elem[ data_user.expando ] ];
+ }
+ }
+ });
+
+ jQuery.fn.extend({
+ text: function( value ) {
+ return access( this, function( value ) {
+ return value === undefined ?
+ jQuery.text( this ) :
+ this.empty().each(function() {
+ if ( this.nodeType === 1 || this.nodeType === 11 || this.nodeType === 9 ) {
+ this.textContent = value;
+ }
+ });
+ }, null, value, arguments.length );
+ },
+
+ append: function() {
+ return this.domManip( arguments, function( elem ) {
+ if ( this.nodeType === 1 || this.nodeType === 11 || this.nodeType === 9 ) {
+ var target = manipulationTarget( this, elem );
+ target.appendChild( elem );
+ }
+ });
+ },
+
+ prepend: function() {
+ return this.domManip( arguments, function( elem ) {
+ if ( this.nodeType === 1 || this.nodeType === 11 || this.nodeType === 9 ) {
+ var target = manipulationTarget( this, elem );
+ target.insertBefore( elem, target.firstChild );
+ }
+ });
+ },
+
+ before: function() {
+ return this.domManip( arguments, function( elem ) {
+ if ( this.parentNode ) {
+ this.parentNode.insertBefore( elem, this );
+ }
+ });
+ },
+
+ after: function() {
+ return this.domManip( arguments, function( elem ) {
+ if ( this.parentNode ) {
+ this.parentNode.insertBefore( elem, this.nextSibling );
+ }
+ });
+ },
+
+ remove: function( selector, keepData /* Internal Use Only */ ) {
+ var elem,
+ elems = selector ? jQuery.filter( selector, this ) : this,
+ i = 0;
+
+ for ( ; (elem = elems[i]) != null; i++ ) {
+ if ( !keepData && elem.nodeType === 1 ) {
+ jQuery.cleanData( getAll( elem ) );
+ }
+
+ if ( elem.parentNode ) {
+ if ( keepData && jQuery.contains( elem.ownerDocument, elem ) ) {
+ setGlobalEval( getAll( elem, "script" ) );
+ }
+ elem.parentNode.removeChild( elem );
+ }
+ }
+
+ return this;
+ },
+
+ empty: function() {
+ var elem,
+ i = 0;
+
+ for ( ; (elem = this[i]) != null; i++ ) {
+ if ( elem.nodeType === 1 ) {
+
+ // Prevent memory leaks
+ jQuery.cleanData( getAll( elem, false ) );
+
+ // Remove any remaining nodes
+ elem.textContent = "";
+ }
+ }
+
+ return this;
+ },
+
+ clone: function( dataAndEvents, deepDataAndEvents ) {
+ dataAndEvents = dataAndEvents == null ? false : dataAndEvents;
+ deepDataAndEvents = deepDataAndEvents == null ? dataAndEvents : deepDataAndEvents;
+
+ return this.map(function() {
+ return jQuery.clone( this, dataAndEvents, deepDataAndEvents );
+ });
+ },
+
+ html: function( value ) {
+ return access( this, function( value ) {
+ var elem = this[ 0 ] || {},
+ i = 0,
+ l = this.length;
+
+ if ( value === undefined && elem.nodeType === 1 ) {
+ return elem.innerHTML;
+ }
+
+ // See if we can take a shortcut and just use innerHTML
+ if ( typeof value === "string" && !rnoInnerhtml.test( value ) &&
+ !wrapMap[ ( rtagName.exec( value ) || [ "", "" ] )[ 1 ].toLowerCase() ] ) {
+
+ value = value.replace( rxhtmlTag, "<$1>" );
+
+ try {
+ for ( ; i < l; i++ ) {
+ elem = this[ i ] || {};
+
+ // Remove element nodes and prevent memory leaks
+ if ( elem.nodeType === 1 ) {
+ jQuery.cleanData( getAll( elem, false ) );
+ elem.innerHTML = value;
+ }
+ }
+
+ elem = 0;
+
+ // If using innerHTML throws an exception, use the fallback method
+ } catch( e ) {}
+ }
+
+ if ( elem ) {
+ this.empty().append( value );
+ }
+ }, null, value, arguments.length );
+ },
+
+ replaceWith: function() {
+ var arg = arguments[ 0 ];
+
+ // Make the changes, replacing each context element with the new content
+ this.domManip( arguments, function( elem ) {
+ arg = this.parentNode;
+
+ jQuery.cleanData( getAll( this ) );
+
+ if ( arg ) {
+ arg.replaceChild( elem, this );
+ }
+ });
+
+ // Force removal if there was no new content (e.g., from empty arguments)
+ return arg && (arg.length || arg.nodeType) ? this : this.remove();
+ },
+
+ detach: function( selector ) {
+ return this.remove( selector, true );
+ },
+
+ domManip: function( args, callback ) {
+
+ // Flatten any nested arrays
+ args = concat.apply( [], args );
+
+ var fragment, first, scripts, hasScripts, node, doc,
+ i = 0,
+ l = this.length,
+ set = this,
+ iNoClone = l - 1,
+ value = args[ 0 ],
+ isFunction = jQuery.isFunction( value );
+
+ // We can't cloneNode fragments that contain checked, in WebKit
+ if ( isFunction ||
+ ( l > 1 && typeof value === "string" &&
+ !support.checkClone && rchecked.test( value ) ) ) {
+ return this.each(function( index ) {
+ var self = set.eq( index );
+ if ( isFunction ) {
+ args[ 0 ] = value.call( this, index, self.html() );
+ }
+ self.domManip( args, callback );
+ });
+ }
+
+ if ( l ) {
+ fragment = jQuery.buildFragment( args, this[ 0 ].ownerDocument, false, this );
+ first = fragment.firstChild;
+
+ if ( fragment.childNodes.length === 1 ) {
+ fragment = first;
+ }
+
+ if ( first ) {
+ scripts = jQuery.map( getAll( fragment, "script" ), disableScript );
+ hasScripts = scripts.length;
+
+ // Use the original fragment for the last item instead of the first because it can end up
+ // being emptied incorrectly in certain situations (#8070).
+ for ( ; i < l; i++ ) {
+ node = fragment;
+
+ if ( i !== iNoClone ) {
+ node = jQuery.clone( node, true, true );
+
+ // Keep references to cloned scripts for later restoration
+ if ( hasScripts ) {
+ // Support: QtWebKit
+ // jQuery.merge because push.apply(_, arraylike) throws
+ jQuery.merge( scripts, getAll( node, "script" ) );
+ }
+ }
+
+ callback.call( this[ i ], node, i );
+ }
+
+ if ( hasScripts ) {
+ doc = scripts[ scripts.length - 1 ].ownerDocument;
+
+ // Reenable scripts
+ jQuery.map( scripts, restoreScript );
+
+ // Evaluate executable scripts on first document insertion
+ for ( i = 0; i < hasScripts; i++ ) {
+ node = scripts[ i ];
+ if ( rscriptType.test( node.type || "" ) &&
+ !data_priv.access( node, "globalEval" ) && jQuery.contains( doc, node ) ) {
+
+ if ( node.src ) {
+ // Optional AJAX dependency, but won't run scripts if not present
+ if ( jQuery._evalUrl ) {
+ jQuery._evalUrl( node.src );
+ }
+ } else {
+ jQuery.globalEval( node.textContent.replace( rcleanScript, "" ) );
+ }
+ }
+ }
+ }
+ }
+ }
+
+ return this;
+ }
+ });
+
+ jQuery.each({
+ appendTo: "append",
+ prependTo: "prepend",
+ insertBefore: "before",
+ insertAfter: "after",
+ replaceAll: "replaceWith"
+ }, function( name, original ) {
+ jQuery.fn[ name ] = function( selector ) {
+ var elems,
+ ret = [],
+ insert = jQuery( selector ),
+ last = insert.length - 1,
+ i = 0;
+
+ for ( ; i <= last; i++ ) {
+ elems = i === last ? this : this.clone( true );
+ jQuery( insert[ i ] )[ original ]( elems );
+
+ // Support: QtWebKit
+ // .get() because push.apply(_, arraylike) throws
+ push.apply( ret, elems.get() );
+ }
+
+ return this.pushStack( ret );
+ };
+ });
+
+
+ var iframe,
+ elemdisplay = {};
+
+ /**
+ * Retrieve the actual display of a element
+ * @param {String} name nodeName of the element
+ * @param {Object} doc Document object
+ */
+ // Called only from within defaultDisplay
+ function actualDisplay( name, doc ) {
+ var style,
+ elem = jQuery( doc.createElement( name ) ).appendTo( doc.body ),
+
+ // getDefaultComputedStyle might be reliably used only on attached element
+ display = window.getDefaultComputedStyle && ( style = window.getDefaultComputedStyle( elem[ 0 ] ) ) ?
+
+ // Use of this method is a temporary fix (more like optimization) until something better comes along,
+ // since it was removed from specification and supported only in FF
+ style.display : jQuery.css( elem[ 0 ], "display" );
+
+ // We don't have any data stored on the element,
+ // so use "detach" method as fast way to get rid of the element
+ elem.detach();
+
+ return display;
+ }
+
+ /**
+ * Try to determine the default display value of an element
+ * @param {String} nodeName
+ */
+ function defaultDisplay( nodeName ) {
+ var doc = document,
+ display = elemdisplay[ nodeName ];
+
+ if ( !display ) {
+ display = actualDisplay( nodeName, doc );
+
+ // If the simple way fails, read from inside an iframe
+ if ( display === "none" || !display ) {
+
+ // Use the already-created iframe if possible
+ iframe = (iframe || jQuery( "" )).appendTo( doc.documentElement );
+
+ // Always write a new HTML skeleton so Webkit and Firefox don't choke on reuse
+ doc = iframe[ 0 ].contentDocument;
+
+ // Support: IE
+ doc.write();
+ doc.close();
+
+ display = actualDisplay( nodeName, doc );
+ iframe.detach();
+ }
+
+ // Store the correct default display
+ elemdisplay[ nodeName ] = display;
+ }
+
+ return display;
+ }
+ var rmargin = (/^margin/);
+
+ var rnumnonpx = new RegExp( "^(" + pnum + ")(?!px)[a-z%]+$", "i" );
+
+ var getStyles = function( elem ) {
+ // Support: IE<=11+, Firefox<=30+ (#15098, #14150)
+ // IE throws on elements created in popups
+ // FF meanwhile throws on frame elements through "defaultView.getComputedStyle"
+ if ( elem.ownerDocument.defaultView.opener ) {
+ return elem.ownerDocument.defaultView.getComputedStyle( elem, null );
+ }
+
+ return window.getComputedStyle( elem, null );
+ };
+
+
+
+ function curCSS( elem, name, computed ) {
+ var width, minWidth, maxWidth, ret,
+ style = elem.style;
+
+ computed = computed || getStyles( elem );
+
+ // Support: IE9
+ // getPropertyValue is only needed for .css('filter') (#12537)
+ if ( computed ) {
+ ret = computed.getPropertyValue( name ) || computed[ name ];
+ }
+
+ if ( computed ) {
+
+ if ( ret === "" && !jQuery.contains( elem.ownerDocument, elem ) ) {
+ ret = jQuery.style( elem, name );
+ }
+
+ // Support: iOS < 6
+ // A tribute to the "awesome hack by Dean Edwards"
+ // iOS < 6 (at least) returns percentage for a larger set of values, but width seems to be reliably pixels
+ // this is against the CSSOM draft spec: http://dev.w3.org/csswg/cssom/#resolved-values
+ if ( rnumnonpx.test( ret ) && rmargin.test( name ) ) {
+
+ // Remember the original values
+ width = style.width;
+ minWidth = style.minWidth;
+ maxWidth = style.maxWidth;
+
+ // Put in the new values to get a computed value out
+ style.minWidth = style.maxWidth = style.width = ret;
+ ret = computed.width;
+
+ // Revert the changed values
+ style.width = width;
+ style.minWidth = minWidth;
+ style.maxWidth = maxWidth;
+ }
+ }
+
+ return ret !== undefined ?
+ // Support: IE
+ // IE returns zIndex value as an integer.
+ ret + "" :
+ ret;
+ }
+
+
+ function addGetHookIf( conditionFn, hookFn ) {
+ // Define the hook, we'll check on the first run if it's really needed.
+ return {
+ get: function() {
+ if ( conditionFn() ) {
+ // Hook not needed (or it's not possible to use it due
+ // to missing dependency), remove it.
+ delete this.get;
+ return;
+ }
+
+ // Hook needed; redefine it so that the support test is not executed again.
+ return (this.get = hookFn).apply( this, arguments );
+ }
+ };
+ }
+
+
+ (function() {
+ var pixelPositionVal, boxSizingReliableVal,
+ docElem = document.documentElement,
+ container = document.createElement( "div" ),
+ div = document.createElement( "div" );
+
+ if ( !div.style ) {
+ return;
+ }
+
+ // Support: IE9-11+
+ // Style of cloned element affects source element cloned (#8908)
+ div.style.backgroundClip = "content-box";
+ div.cloneNode( true ).style.backgroundClip = "";
+ support.clearCloneStyle = div.style.backgroundClip === "content-box";
+
+ container.style.cssText = "border:0;width:0;height:0;top:0;left:-9999px;margin-top:1px;" +
+ "position:absolute";
+ container.appendChild( div );
+
+ // Executing both pixelPosition & boxSizingReliable tests require only one layout
+ // so they're executed at the same time to save the second computation.
+ function computePixelPositionAndBoxSizingReliable() {
+ div.style.cssText =
+ // Support: Firefox<29, Android 2.3
+ // Vendor-prefix box-sizing
+ "-webkit-box-sizing:border-box;-moz-box-sizing:border-box;" +
+ "box-sizing:border-box;display:block;margin-top:1%;top:1%;" +
+ "border:1px;padding:1px;width:4px;position:absolute";
+ div.innerHTML = "";
+ docElem.appendChild( container );
+
+ var divStyle = window.getComputedStyle( div, null );
+ pixelPositionVal = divStyle.top !== "1%";
+ boxSizingReliableVal = divStyle.width === "4px";
+
+ docElem.removeChild( container );
+ }
+
+ // Support: node.js jsdom
+ // Don't assume that getComputedStyle is a property of the global object
+ if ( window.getComputedStyle ) {
+ jQuery.extend( support, {
+ pixelPosition: function() {
+
+ // This test is executed only once but we still do memoizing
+ // since we can use the boxSizingReliable pre-computing.
+ // No need to check if the test was already performed, though.
+ computePixelPositionAndBoxSizingReliable();
+ return pixelPositionVal;
+ },
+ boxSizingReliable: function() {
+ if ( boxSizingReliableVal == null ) {
+ computePixelPositionAndBoxSizingReliable();
+ }
+ return boxSizingReliableVal;
+ },
+ reliableMarginRight: function() {
+
+ // Support: Android 2.3
+ // Check if div with explicit width and no margin-right incorrectly
+ // gets computed margin-right based on width of container. (#3333)
+ // WebKit Bug 13343 - getComputedStyle returns wrong value for margin-right
+ // This support function is only executed once so no memoizing is needed.
+ var ret,
+ marginDiv = div.appendChild( document.createElement( "div" ) );
+
+ // Reset CSS: box-sizing; display; margin; border; padding
+ marginDiv.style.cssText = div.style.cssText =
+ // Support: Firefox<29, Android 2.3
+ // Vendor-prefix box-sizing
+ "-webkit-box-sizing:content-box;-moz-box-sizing:content-box;" +
+ "box-sizing:content-box;display:block;margin:0;border:0;padding:0";
+ marginDiv.style.marginRight = marginDiv.style.width = "0";
+ div.style.width = "1px";
+ docElem.appendChild( container );
+
+ ret = !parseFloat( window.getComputedStyle( marginDiv, null ).marginRight );
+
+ docElem.removeChild( container );
+ div.removeChild( marginDiv );
+
+ return ret;
+ }
+ });
+ }
+ })();
+
+
+ // A method for quickly swapping in/out CSS properties to get correct calculations.
+ jQuery.swap = function( elem, options, callback, args ) {
+ var ret, name,
+ old = {};
+
+ // Remember the old values, and insert the new ones
+ for ( name in options ) {
+ old[ name ] = elem.style[ name ];
+ elem.style[ name ] = options[ name ];
+ }
+
+ ret = callback.apply( elem, args || [] );
+
+ // Revert the old values
+ for ( name in options ) {
+ elem.style[ name ] = old[ name ];
+ }
+
+ return ret;
+ };
+
+
+ var
+ // Swappable if display is none or starts with table except "table", "table-cell", or "table-caption"
+ // See here for display values: https://developer.mozilla.org/en-US/docs/CSS/display
+ rdisplayswap = /^(none|table(?!-c[ea]).+)/,
+ rnumsplit = new RegExp( "^(" + pnum + ")(.*)$", "i" ),
+ rrelNum = new RegExp( "^([+-])=(" + pnum + ")", "i" ),
+
+ cssShow = { position: "absolute", visibility: "hidden", display: "block" },
+ cssNormalTransform = {
+ letterSpacing: "0",
+ fontWeight: "400"
+ },
+
+ cssPrefixes = [ "Webkit", "O", "Moz", "ms" ];
+
+ // Return a css property mapped to a potentially vendor prefixed property
+ function vendorPropName( style, name ) {
+
+ // Shortcut for names that are not vendor prefixed
+ if ( name in style ) {
+ return name;
+ }
+
+ // Check for vendor prefixed names
+ var capName = name[0].toUpperCase() + name.slice(1),
+ origName = name,
+ i = cssPrefixes.length;
+
+ while ( i-- ) {
+ name = cssPrefixes[ i ] + capName;
+ if ( name in style ) {
+ return name;
+ }
+ }
+
+ return origName;
+ }
+
+ function setPositiveNumber( elem, value, subtract ) {
+ var matches = rnumsplit.exec( value );
+ return matches ?
+ // Guard against undefined "subtract", e.g., when used as in cssHooks
+ Math.max( 0, matches[ 1 ] - ( subtract || 0 ) ) + ( matches[ 2 ] || "px" ) :
+ value;
+ }
+
+ function augmentWidthOrHeight( elem, name, extra, isBorderBox, styles ) {
+ var i = extra === ( isBorderBox ? "border" : "content" ) ?
+ // If we already have the right measurement, avoid augmentation
+ 4 :
+ // Otherwise initialize for horizontal or vertical properties
+ name === "width" ? 1 : 0,
+
+ val = 0;
+
+ for ( ; i < 4; i += 2 ) {
+ // Both box models exclude margin, so add it if we want it
+ if ( extra === "margin" ) {
+ val += jQuery.css( elem, extra + cssExpand[ i ], true, styles );
+ }
+
+ if ( isBorderBox ) {
+ // border-box includes padding, so remove it if we want content
+ if ( extra === "content" ) {
+ val -= jQuery.css( elem, "padding" + cssExpand[ i ], true, styles );
+ }
+
+ // At this point, extra isn't border nor margin, so remove border
+ if ( extra !== "margin" ) {
+ val -= jQuery.css( elem, "border" + cssExpand[ i ] + "Width", true, styles );
+ }
+ } else {
+ // At this point, extra isn't content, so add padding
+ val += jQuery.css( elem, "padding" + cssExpand[ i ], true, styles );
+
+ // At this point, extra isn't content nor padding, so add border
+ if ( extra !== "padding" ) {
+ val += jQuery.css( elem, "border" + cssExpand[ i ] + "Width", true, styles );
+ }
+ }
+ }
+
+ return val;
+ }
+
+ function getWidthOrHeight( elem, name, extra ) {
+
+ // Start with offset property, which is equivalent to the border-box value
+ var valueIsBorderBox = true,
+ val = name === "width" ? elem.offsetWidth : elem.offsetHeight,
+ styles = getStyles( elem ),
+ isBorderBox = jQuery.css( elem, "boxSizing", false, styles ) === "border-box";
+
+ // Some non-html elements return undefined for offsetWidth, so check for null/undefined
+ // svg - https://bugzilla.mozilla.org/show_bug.cgi?id=649285
+ // MathML - https://bugzilla.mozilla.org/show_bug.cgi?id=491668
+ if ( val <= 0 || val == null ) {
+ // Fall back to computed then uncomputed css if necessary
+ val = curCSS( elem, name, styles );
+ if ( val < 0 || val == null ) {
+ val = elem.style[ name ];
+ }
+
+ // Computed unit is not pixels. Stop here and return.
+ if ( rnumnonpx.test(val) ) {
+ return val;
+ }
+
+ // Check for style in case a browser which returns unreliable values
+ // for getComputedStyle silently falls back to the reliable elem.style
+ valueIsBorderBox = isBorderBox &&
+ ( support.boxSizingReliable() || val === elem.style[ name ] );
+
+ // Normalize "", auto, and prepare for extra
+ val = parseFloat( val ) || 0;
+ }
+
+ // Use the active box-sizing model to add/subtract irrelevant styles
+ return ( val +
+ augmentWidthOrHeight(
+ elem,
+ name,
+ extra || ( isBorderBox ? "border" : "content" ),
+ valueIsBorderBox,
+ styles
+ )
+ ) + "px";
+ }
+
+ function showHide( elements, show ) {
+ var display, elem, hidden,
+ values = [],
+ index = 0,
+ length = elements.length;
+
+ for ( ; index < length; index++ ) {
+ elem = elements[ index ];
+ if ( !elem.style ) {
+ continue;
+ }
+
+ values[ index ] = data_priv.get( elem, "olddisplay" );
+ display = elem.style.display;
+ if ( show ) {
+ // Reset the inline display of this element to learn if it is
+ // being hidden by cascaded rules or not
+ if ( !values[ index ] && display === "none" ) {
+ elem.style.display = "";
+ }
+
+ // Set elements which have been overridden with display: none
+ // in a stylesheet to whatever the default browser style is
+ // for such an element
+ if ( elem.style.display === "" && isHidden( elem ) ) {
+ values[ index ] = data_priv.access( elem, "olddisplay", defaultDisplay(elem.nodeName) );
+ }
+ } else {
+ hidden = isHidden( elem );
+
+ if ( display !== "none" || !hidden ) {
+ data_priv.set( elem, "olddisplay", hidden ? display : jQuery.css( elem, "display" ) );
+ }
+ }
+ }
+
+ // Set the display of most of the elements in a second loop
+ // to avoid the constant reflow
+ for ( index = 0; index < length; index++ ) {
+ elem = elements[ index ];
+ if ( !elem.style ) {
+ continue;
+ }
+ if ( !show || elem.style.display === "none" || elem.style.display === "" ) {
+ elem.style.display = show ? values[ index ] || "" : "none";
+ }
+ }
+
+ return elements;
+ }
+
+ jQuery.extend({
+
+ // Add in style property hooks for overriding the default
+ // behavior of getting and setting a style property
+ cssHooks: {
+ opacity: {
+ get: function( elem, computed ) {
+ if ( computed ) {
+
+ // We should always get a number back from opacity
+ var ret = curCSS( elem, "opacity" );
+ return ret === "" ? "1" : ret;
+ }
+ }
+ }
+ },
+
+ // Don't automatically add "px" to these possibly-unitless properties
+ cssNumber: {
+ "columnCount": true,
+ "fillOpacity": true,
+ "flexGrow": true,
+ "flexShrink": true,
+ "fontWeight": true,
+ "lineHeight": true,
+ "opacity": true,
+ "order": true,
+ "orphans": true,
+ "widows": true,
+ "zIndex": true,
+ "zoom": true
+ },
+
+ // Add in properties whose names you wish to fix before
+ // setting or getting the value
+ cssProps: {
+ "float": "cssFloat"
+ },
+
+ // Get and set the style property on a DOM Node
+ style: function( elem, name, value, extra ) {
+
+ // Don't set styles on text and comment nodes
+ if ( !elem || elem.nodeType === 3 || elem.nodeType === 8 || !elem.style ) {
+ return;
+ }
+
+ // Make sure that we're working with the right name
+ var ret, type, hooks,
+ origName = jQuery.camelCase( name ),
+ style = elem.style;
+
+ name = jQuery.cssProps[ origName ] || ( jQuery.cssProps[ origName ] = vendorPropName( style, origName ) );
+
+ // Gets hook for the prefixed version, then unprefixed version
+ hooks = jQuery.cssHooks[ name ] || jQuery.cssHooks[ origName ];
+
+ // Check if we're setting a value
+ if ( value !== undefined ) {
+ type = typeof value;
+
+ // Convert "+=" or "-=" to relative numbers (#7345)
+ if ( type === "string" && (ret = rrelNum.exec( value )) ) {
+ value = ( ret[1] + 1 ) * ret[2] + parseFloat( jQuery.css( elem, name ) );
+ // Fixes bug #9237
+ type = "number";
+ }
+
+ // Make sure that null and NaN values aren't set (#7116)
+ if ( value == null || value !== value ) {
+ return;
+ }
+
+ // If a number, add 'px' to the (except for certain CSS properties)
+ if ( type === "number" && !jQuery.cssNumber[ origName ] ) {
+ value += "px";
+ }
+
+ // Support: IE9-11+
+ // background-* props affect original clone's values
+ if ( !support.clearCloneStyle && value === "" && name.indexOf( "background" ) === 0 ) {
+ style[ name ] = "inherit";
+ }
+
+ // If a hook was provided, use that value, otherwise just set the specified value
+ if ( !hooks || !("set" in hooks) || (value = hooks.set( elem, value, extra )) !== undefined ) {
+ style[ name ] = value;
+ }
+
+ } else {
+ // If a hook was provided get the non-computed value from there
+ if ( hooks && "get" in hooks && (ret = hooks.get( elem, false, extra )) !== undefined ) {
+ return ret;
+ }
+
+ // Otherwise just get the value from the style object
+ return style[ name ];
+ }
+ },
+
+ css: function( elem, name, extra, styles ) {
+ var val, num, hooks,
+ origName = jQuery.camelCase( name );
+
+ // Make sure that we're working with the right name
+ name = jQuery.cssProps[ origName ] || ( jQuery.cssProps[ origName ] = vendorPropName( elem.style, origName ) );
+
+ // Try prefixed name followed by the unprefixed name
+ hooks = jQuery.cssHooks[ name ] || jQuery.cssHooks[ origName ];
+
+ // If a hook was provided get the computed value from there
+ if ( hooks && "get" in hooks ) {
+ val = hooks.get( elem, true, extra );
+ }
+
+ // Otherwise, if a way to get the computed value exists, use that
+ if ( val === undefined ) {
+ val = curCSS( elem, name, styles );
+ }
+
+ // Convert "normal" to computed value
+ if ( val === "normal" && name in cssNormalTransform ) {
+ val = cssNormalTransform[ name ];
+ }
+
+ // Make numeric if forced or a qualifier was provided and val looks numeric
+ if ( extra === "" || extra ) {
+ num = parseFloat( val );
+ return extra === true || jQuery.isNumeric( num ) ? num || 0 : val;
+ }
+ return val;
+ }
+ });
+
+ jQuery.each([ "height", "width" ], function( i, name ) {
+ jQuery.cssHooks[ name ] = {
+ get: function( elem, computed, extra ) {
+ if ( computed ) {
+
+ // Certain elements can have dimension info if we invisibly show them
+ // but it must have a current display style that would benefit
+ return rdisplayswap.test( jQuery.css( elem, "display" ) ) && elem.offsetWidth === 0 ?
+ jQuery.swap( elem, cssShow, function() {
+ return getWidthOrHeight( elem, name, extra );
+ }) :
+ getWidthOrHeight( elem, name, extra );
+ }
+ },
+
+ set: function( elem, value, extra ) {
+ var styles = extra && getStyles( elem );
+ return setPositiveNumber( elem, value, extra ?
+ augmentWidthOrHeight(
+ elem,
+ name,
+ extra,
+ jQuery.css( elem, "boxSizing", false, styles ) === "border-box",
+ styles
+ ) : 0
+ );
+ }
+ };
+ });
+
+ // Support: Android 2.3
+ jQuery.cssHooks.marginRight = addGetHookIf( support.reliableMarginRight,
+ function( elem, computed ) {
+ if ( computed ) {
+ return jQuery.swap( elem, { "display": "inline-block" },
+ curCSS, [ elem, "marginRight" ] );
+ }
+ }
+ );
+
+ // These hooks are used by animate to expand properties
+ jQuery.each({
+ margin: "",
+ padding: "",
+ border: "Width"
+ }, function( prefix, suffix ) {
+ jQuery.cssHooks[ prefix + suffix ] = {
+ expand: function( value ) {
+ var i = 0,
+ expanded = {},
+
+ // Assumes a single number if not a string
+ parts = typeof value === "string" ? value.split(" ") : [ value ];
+
+ for ( ; i < 4; i++ ) {
+ expanded[ prefix + cssExpand[ i ] + suffix ] =
+ parts[ i ] || parts[ i - 2 ] || parts[ 0 ];
+ }
+
+ return expanded;
+ }
+ };
+
+ if ( !rmargin.test( prefix ) ) {
+ jQuery.cssHooks[ prefix + suffix ].set = setPositiveNumber;
+ }
+ });
+
+ jQuery.fn.extend({
+ css: function( name, value ) {
+ return access( this, function( elem, name, value ) {
+ var styles, len,
+ map = {},
+ i = 0;
+
+ if ( jQuery.isArray( name ) ) {
+ styles = getStyles( elem );
+ len = name.length;
+
+ for ( ; i < len; i++ ) {
+ map[ name[ i ] ] = jQuery.css( elem, name[ i ], false, styles );
+ }
+
+ return map;
+ }
+
+ return value !== undefined ?
+ jQuery.style( elem, name, value ) :
+ jQuery.css( elem, name );
+ }, name, value, arguments.length > 1 );
+ },
+ show: function() {
+ return showHide( this, true );
+ },
+ hide: function() {
+ return showHide( this );
+ },
+ toggle: function( state ) {
+ if ( typeof state === "boolean" ) {
+ return state ? this.show() : this.hide();
+ }
+
+ return this.each(function() {
+ if ( isHidden( this ) ) {
+ jQuery( this ).show();
+ } else {
+ jQuery( this ).hide();
+ }
+ });
+ }
+ });
+
+
+ function Tween( elem, options, prop, end, easing ) {
+ return new Tween.prototype.init( elem, options, prop, end, easing );
+ }
+ jQuery.Tween = Tween;
+
+ Tween.prototype = {
+ constructor: Tween,
+ init: function( elem, options, prop, end, easing, unit ) {
+ this.elem = elem;
+ this.prop = prop;
+ this.easing = easing || "swing";
+ this.options = options;
+ this.start = this.now = this.cur();
+ this.end = end;
+ this.unit = unit || ( jQuery.cssNumber[ prop ] ? "" : "px" );
+ },
+ cur: function() {
+ var hooks = Tween.propHooks[ this.prop ];
+
+ return hooks && hooks.get ?
+ hooks.get( this ) :
+ Tween.propHooks._default.get( this );
+ },
+ run: function( percent ) {
+ var eased,
+ hooks = Tween.propHooks[ this.prop ];
+
+ if ( this.options.duration ) {
+ this.pos = eased = jQuery.easing[ this.easing ](
+ percent, this.options.duration * percent, 0, 1, this.options.duration
+ );
+ } else {
+ this.pos = eased = percent;
+ }
+ this.now = ( this.end - this.start ) * eased + this.start;
+
+ if ( this.options.step ) {
+ this.options.step.call( this.elem, this.now, this );
+ }
+
+ if ( hooks && hooks.set ) {
+ hooks.set( this );
+ } else {
+ Tween.propHooks._default.set( this );
+ }
+ return this;
+ }
+ };
+
+ Tween.prototype.init.prototype = Tween.prototype;
+
+ Tween.propHooks = {
+ _default: {
+ get: function( tween ) {
+ var result;
+
+ if ( tween.elem[ tween.prop ] != null &&
+ (!tween.elem.style || tween.elem.style[ tween.prop ] == null) ) {
+ return tween.elem[ tween.prop ];
+ }
+
+ // Passing an empty string as a 3rd parameter to .css will automatically
+ // attempt a parseFloat and fallback to a string if the parse fails.
+ // Simple values such as "10px" are parsed to Float;
+ // complex values such as "rotate(1rad)" are returned as-is.
+ result = jQuery.css( tween.elem, tween.prop, "" );
+ // Empty strings, null, undefined and "auto" are converted to 0.
+ return !result || result === "auto" ? 0 : result;
+ },
+ set: function( tween ) {
+ // Use step hook for back compat.
+ // Use cssHook if its there.
+ // Use .style if available and use plain properties where available.
+ if ( jQuery.fx.step[ tween.prop ] ) {
+ jQuery.fx.step[ tween.prop ]( tween );
+ } else if ( tween.elem.style && ( tween.elem.style[ jQuery.cssProps[ tween.prop ] ] != null || jQuery.cssHooks[ tween.prop ] ) ) {
+ jQuery.style( tween.elem, tween.prop, tween.now + tween.unit );
+ } else {
+ tween.elem[ tween.prop ] = tween.now;
+ }
+ }
+ }
+ };
+
+ // Support: IE9
+ // Panic based approach to setting things on disconnected nodes
+ Tween.propHooks.scrollTop = Tween.propHooks.scrollLeft = {
+ set: function( tween ) {
+ if ( tween.elem.nodeType && tween.elem.parentNode ) {
+ tween.elem[ tween.prop ] = tween.now;
+ }
+ }
+ };
+
+ jQuery.easing = {
+ linear: function( p ) {
+ return p;
+ },
+ swing: function( p ) {
+ return 0.5 - Math.cos( p * Math.PI ) / 2;
+ }
+ };
+
+ jQuery.fx = Tween.prototype.init;
+
+ // Back Compat <1.8 extension point
+ jQuery.fx.step = {};
+
+
+
+
+ var
+ fxNow, timerId,
+ rfxtypes = /^(?:toggle|show|hide)$/,
+ rfxnum = new RegExp( "^(?:([+-])=|)(" + pnum + ")([a-z%]*)$", "i" ),
+ rrun = /queueHooks$/,
+ animationPrefilters = [ defaultPrefilter ],
+ tweeners = {
+ "*": [ function( prop, value ) {
+ var tween = this.createTween( prop, value ),
+ target = tween.cur(),
+ parts = rfxnum.exec( value ),
+ unit = parts && parts[ 3 ] || ( jQuery.cssNumber[ prop ] ? "" : "px" ),
+
+ // Starting value computation is required for potential unit mismatches
+ start = ( jQuery.cssNumber[ prop ] || unit !== "px" && +target ) &&
+ rfxnum.exec( jQuery.css( tween.elem, prop ) ),
+ scale = 1,
+ maxIterations = 20;
+
+ if ( start && start[ 3 ] !== unit ) {
+ // Trust units reported by jQuery.css
+ unit = unit || start[ 3 ];
+
+ // Make sure we update the tween properties later on
+ parts = parts || [];
+
+ // Iteratively approximate from a nonzero starting point
+ start = +target || 1;
+
+ do {
+ // If previous iteration zeroed out, double until we get *something*.
+ // Use string for doubling so we don't accidentally see scale as unchanged below
+ scale = scale || ".5";
+
+ // Adjust and apply
+ start = start / scale;
+ jQuery.style( tween.elem, prop, start + unit );
+
+ // Update scale, tolerating zero or NaN from tween.cur(),
+ // break the loop if scale is unchanged or perfect, or if we've just had enough
+ } while ( scale !== (scale = tween.cur() / target) && scale !== 1 && --maxIterations );
+ }
+
+ // Update tween properties
+ if ( parts ) {
+ start = tween.start = +start || +target || 0;
+ tween.unit = unit;
+ // If a +=/-= token was provided, we're doing a relative animation
+ tween.end = parts[ 1 ] ?
+ start + ( parts[ 1 ] + 1 ) * parts[ 2 ] :
+ +parts[ 2 ];
+ }
+
+ return tween;
+ } ]
+ };
+
+ // Animations created synchronously will run synchronously
+ function createFxNow() {
+ setTimeout(function() {
+ fxNow = undefined;
+ });
+ return ( fxNow = jQuery.now() );
+ }
+
+ // Generate parameters to create a standard animation
+ function genFx( type, includeWidth ) {
+ var which,
+ i = 0,
+ attrs = { height: type };
+
+ // If we include width, step value is 1 to do all cssExpand values,
+ // otherwise step value is 2 to skip over Left and Right
+ includeWidth = includeWidth ? 1 : 0;
+ for ( ; i < 4 ; i += 2 - includeWidth ) {
+ which = cssExpand[ i ];
+ attrs[ "margin" + which ] = attrs[ "padding" + which ] = type;
+ }
+
+ if ( includeWidth ) {
+ attrs.opacity = attrs.width = type;
+ }
+
+ return attrs;
+ }
+
+ function createTween( value, prop, animation ) {
+ var tween,
+ collection = ( tweeners[ prop ] || [] ).concat( tweeners[ "*" ] ),
+ index = 0,
+ length = collection.length;
+ for ( ; index < length; index++ ) {
+ if ( (tween = collection[ index ].call( animation, prop, value )) ) {
+
+ // We're done with this property
+ return tween;
+ }
+ }
+ }
+
+ function defaultPrefilter( elem, props, opts ) {
+ /* jshint validthis: true */
+ var prop, value, toggle, tween, hooks, oldfire, display, checkDisplay,
+ anim = this,
+ orig = {},
+ style = elem.style,
+ hidden = elem.nodeType && isHidden( elem ),
+ dataShow = data_priv.get( elem, "fxshow" );
+
+ // Handle queue: false promises
+ if ( !opts.queue ) {
+ hooks = jQuery._queueHooks( elem, "fx" );
+ if ( hooks.unqueued == null ) {
+ hooks.unqueued = 0;
+ oldfire = hooks.empty.fire;
+ hooks.empty.fire = function() {
+ if ( !hooks.unqueued ) {
+ oldfire();
+ }
+ };
+ }
+ hooks.unqueued++;
+
+ anim.always(function() {
+ // Ensure the complete handler is called before this completes
+ anim.always(function() {
+ hooks.unqueued--;
+ if ( !jQuery.queue( elem, "fx" ).length ) {
+ hooks.empty.fire();
+ }
+ });
+ });
+ }
+
+ // Height/width overflow pass
+ if ( elem.nodeType === 1 && ( "height" in props || "width" in props ) ) {
+ // Make sure that nothing sneaks out
+ // Record all 3 overflow attributes because IE9-10 do not
+ // change the overflow attribute when overflowX and
+ // overflowY are set to the same value
+ opts.overflow = [ style.overflow, style.overflowX, style.overflowY ];
+
+ // Set display property to inline-block for height/width
+ // animations on inline elements that are having width/height animated
+ display = jQuery.css( elem, "display" );
+
+ // Test default display if display is currently "none"
+ checkDisplay = display === "none" ?
+ data_priv.get( elem, "olddisplay" ) || defaultDisplay( elem.nodeName ) : display;
+
+ if ( checkDisplay === "inline" && jQuery.css( elem, "float" ) === "none" ) {
+ style.display = "inline-block";
+ }
+ }
+
+ if ( opts.overflow ) {
+ style.overflow = "hidden";
+ anim.always(function() {
+ style.overflow = opts.overflow[ 0 ];
+ style.overflowX = opts.overflow[ 1 ];
+ style.overflowY = opts.overflow[ 2 ];
+ });
+ }
+
+ // show/hide pass
+ for ( prop in props ) {
+ value = props[ prop ];
+ if ( rfxtypes.exec( value ) ) {
+ delete props[ prop ];
+ toggle = toggle || value === "toggle";
+ if ( value === ( hidden ? "hide" : "show" ) ) {
+
+ // If there is dataShow left over from a stopped hide or show and we are going to proceed with show, we should pretend to be hidden
+ if ( value === "show" && dataShow && dataShow[ prop ] !== undefined ) {
+ hidden = true;
+ } else {
+ continue;
+ }
+ }
+ orig[ prop ] = dataShow && dataShow[ prop ] || jQuery.style( elem, prop );
+
+ // Any non-fx value stops us from restoring the original display value
+ } else {
+ display = undefined;
+ }
+ }
+
+ if ( !jQuery.isEmptyObject( orig ) ) {
+ if ( dataShow ) {
+ if ( "hidden" in dataShow ) {
+ hidden = dataShow.hidden;
+ }
+ } else {
+ dataShow = data_priv.access( elem, "fxshow", {} );
+ }
+
+ // Store state if its toggle - enables .stop().toggle() to "reverse"
+ if ( toggle ) {
+ dataShow.hidden = !hidden;
+ }
+ if ( hidden ) {
+ jQuery( elem ).show();
+ } else {
+ anim.done(function() {
+ jQuery( elem ).hide();
+ });
+ }
+ anim.done(function() {
+ var prop;
+
+ data_priv.remove( elem, "fxshow" );
+ for ( prop in orig ) {
+ jQuery.style( elem, prop, orig[ prop ] );
+ }
+ });
+ for ( prop in orig ) {
+ tween = createTween( hidden ? dataShow[ prop ] : 0, prop, anim );
+
+ if ( !( prop in dataShow ) ) {
+ dataShow[ prop ] = tween.start;
+ if ( hidden ) {
+ tween.end = tween.start;
+ tween.start = prop === "width" || prop === "height" ? 1 : 0;
+ }
+ }
+ }
+
+ // If this is a noop like .hide().hide(), restore an overwritten display value
+ } else if ( (display === "none" ? defaultDisplay( elem.nodeName ) : display) === "inline" ) {
+ style.display = display;
+ }
+ }
+
+ function propFilter( props, specialEasing ) {
+ var index, name, easing, value, hooks;
+
+ // camelCase, specialEasing and expand cssHook pass
+ for ( index in props ) {
+ name = jQuery.camelCase( index );
+ easing = specialEasing[ name ];
+ value = props[ index ];
+ if ( jQuery.isArray( value ) ) {
+ easing = value[ 1 ];
+ value = props[ index ] = value[ 0 ];
+ }
+
+ if ( index !== name ) {
+ props[ name ] = value;
+ delete props[ index ];
+ }
+
+ hooks = jQuery.cssHooks[ name ];
+ if ( hooks && "expand" in hooks ) {
+ value = hooks.expand( value );
+ delete props[ name ];
+
+ // Not quite $.extend, this won't overwrite existing keys.
+ // Reusing 'index' because we have the correct "name"
+ for ( index in value ) {
+ if ( !( index in props ) ) {
+ props[ index ] = value[ index ];
+ specialEasing[ index ] = easing;
+ }
+ }
+ } else {
+ specialEasing[ name ] = easing;
+ }
+ }
+ }
+
+ function Animation( elem, properties, options ) {
+ var result,
+ stopped,
+ index = 0,
+ length = animationPrefilters.length,
+ deferred = jQuery.Deferred().always( function() {
+ // Don't match elem in the :animated selector
+ delete tick.elem;
+ }),
+ tick = function() {
+ if ( stopped ) {
+ return false;
+ }
+ var currentTime = fxNow || createFxNow(),
+ remaining = Math.max( 0, animation.startTime + animation.duration - currentTime ),
+ // Support: Android 2.3
+ // Archaic crash bug won't allow us to use `1 - ( 0.5 || 0 )` (#12497)
+ temp = remaining / animation.duration || 0,
+ percent = 1 - temp,
+ index = 0,
+ length = animation.tweens.length;
+
+ for ( ; index < length ; index++ ) {
+ animation.tweens[ index ].run( percent );
+ }
+
+ deferred.notifyWith( elem, [ animation, percent, remaining ]);
+
+ if ( percent < 1 && length ) {
+ return remaining;
+ } else {
+ deferred.resolveWith( elem, [ animation ] );
+ return false;
+ }
+ },
+ animation = deferred.promise({
+ elem: elem,
+ props: jQuery.extend( {}, properties ),
+ opts: jQuery.extend( true, { specialEasing: {} }, options ),
+ originalProperties: properties,
+ originalOptions: options,
+ startTime: fxNow || createFxNow(),
+ duration: options.duration,
+ tweens: [],
+ createTween: function( prop, end ) {
+ var tween = jQuery.Tween( elem, animation.opts, prop, end,
+ animation.opts.specialEasing[ prop ] || animation.opts.easing );
+ animation.tweens.push( tween );
+ return tween;
+ },
+ stop: function( gotoEnd ) {
+ var index = 0,
+ // If we are going to the end, we want to run all the tweens
+ // otherwise we skip this part
+ length = gotoEnd ? animation.tweens.length : 0;
+ if ( stopped ) {
+ return this;
+ }
+ stopped = true;
+ for ( ; index < length ; index++ ) {
+ animation.tweens[ index ].run( 1 );
+ }
+
+ // Resolve when we played the last frame; otherwise, reject
+ if ( gotoEnd ) {
+ deferred.resolveWith( elem, [ animation, gotoEnd ] );
+ } else {
+ deferred.rejectWith( elem, [ animation, gotoEnd ] );
+ }
+ return this;
+ }
+ }),
+ props = animation.props;
+
+ propFilter( props, animation.opts.specialEasing );
+
+ for ( ; index < length ; index++ ) {
+ result = animationPrefilters[ index ].call( animation, elem, props, animation.opts );
+ if ( result ) {
+ return result;
+ }
+ }
+
+ jQuery.map( props, createTween, animation );
+
+ if ( jQuery.isFunction( animation.opts.start ) ) {
+ animation.opts.start.call( elem, animation );
+ }
+
+ jQuery.fx.timer(
+ jQuery.extend( tick, {
+ elem: elem,
+ anim: animation,
+ queue: animation.opts.queue
+ })
+ );
+
+ // attach callbacks from options
+ return animation.progress( animation.opts.progress )
+ .done( animation.opts.done, animation.opts.complete )
+ .fail( animation.opts.fail )
+ .always( animation.opts.always );
+ }
+
+ jQuery.Animation = jQuery.extend( Animation, {
+
+ tweener: function( props, callback ) {
+ if ( jQuery.isFunction( props ) ) {
+ callback = props;
+ props = [ "*" ];
+ } else {
+ props = props.split(" ");
+ }
+
+ var prop,
+ index = 0,
+ length = props.length;
+
+ for ( ; index < length ; index++ ) {
+ prop = props[ index ];
+ tweeners[ prop ] = tweeners[ prop ] || [];
+ tweeners[ prop ].unshift( callback );
+ }
+ },
+
+ prefilter: function( callback, prepend ) {
+ if ( prepend ) {
+ animationPrefilters.unshift( callback );
+ } else {
+ animationPrefilters.push( callback );
+ }
+ }
+ });
+
+ jQuery.speed = function( speed, easing, fn ) {
+ var opt = speed && typeof speed === "object" ? jQuery.extend( {}, speed ) : {
+ complete: fn || !fn && easing ||
+ jQuery.isFunction( speed ) && speed,
+ duration: speed,
+ easing: fn && easing || easing && !jQuery.isFunction( easing ) && easing
+ };
+
+ opt.duration = jQuery.fx.off ? 0 : typeof opt.duration === "number" ? opt.duration :
+ opt.duration in jQuery.fx.speeds ? jQuery.fx.speeds[ opt.duration ] : jQuery.fx.speeds._default;
+
+ // Normalize opt.queue - true/undefined/null -> "fx"
+ if ( opt.queue == null || opt.queue === true ) {
+ opt.queue = "fx";
+ }
+
+ // Queueing
+ opt.old = opt.complete;
+
+ opt.complete = function() {
+ if ( jQuery.isFunction( opt.old ) ) {
+ opt.old.call( this );
+ }
+
+ if ( opt.queue ) {
+ jQuery.dequeue( this, opt.queue );
+ }
+ };
+
+ return opt;
+ };
+
+ jQuery.fn.extend({
+ fadeTo: function( speed, to, easing, callback ) {
+
+ // Show any hidden elements after setting opacity to 0
+ return this.filter( isHidden ).css( "opacity", 0 ).show()
+
+ // Animate to the value specified
+ .end().animate({ opacity: to }, speed, easing, callback );
+ },
+ animate: function( prop, speed, easing, callback ) {
+ var empty = jQuery.isEmptyObject( prop ),
+ optall = jQuery.speed( speed, easing, callback ),
+ doAnimation = function() {
+ // Operate on a copy of prop so per-property easing won't be lost
+ var anim = Animation( this, jQuery.extend( {}, prop ), optall );
+
+ // Empty animations, or finishing resolves immediately
+ if ( empty || data_priv.get( this, "finish" ) ) {
+ anim.stop( true );
+ }
+ };
+ doAnimation.finish = doAnimation;
+
+ return empty || optall.queue === false ?
+ this.each( doAnimation ) :
+ this.queue( optall.queue, doAnimation );
+ },
+ stop: function( type, clearQueue, gotoEnd ) {
+ var stopQueue = function( hooks ) {
+ var stop = hooks.stop;
+ delete hooks.stop;
+ stop( gotoEnd );
+ };
+
+ if ( typeof type !== "string" ) {
+ gotoEnd = clearQueue;
+ clearQueue = type;
+ type = undefined;
+ }
+ if ( clearQueue && type !== false ) {
+ this.queue( type || "fx", [] );
+ }
+
+ return this.each(function() {
+ var dequeue = true,
+ index = type != null && type + "queueHooks",
+ timers = jQuery.timers,
+ data = data_priv.get( this );
+
+ if ( index ) {
+ if ( data[ index ] && data[ index ].stop ) {
+ stopQueue( data[ index ] );
+ }
+ } else {
+ for ( index in data ) {
+ if ( data[ index ] && data[ index ].stop && rrun.test( index ) ) {
+ stopQueue( data[ index ] );
+ }
+ }
+ }
+
+ for ( index = timers.length; index--; ) {
+ if ( timers[ index ].elem === this && (type == null || timers[ index ].queue === type) ) {
+ timers[ index ].anim.stop( gotoEnd );
+ dequeue = false;
+ timers.splice( index, 1 );
+ }
+ }
+
+ // Start the next in the queue if the last step wasn't forced.
+ // Timers currently will call their complete callbacks, which
+ // will dequeue but only if they were gotoEnd.
+ if ( dequeue || !gotoEnd ) {
+ jQuery.dequeue( this, type );
+ }
+ });
+ },
+ finish: function( type ) {
+ if ( type !== false ) {
+ type = type || "fx";
+ }
+ return this.each(function() {
+ var index,
+ data = data_priv.get( this ),
+ queue = data[ type + "queue" ],
+ hooks = data[ type + "queueHooks" ],
+ timers = jQuery.timers,
+ length = queue ? queue.length : 0;
+
+ // Enable finishing flag on private data
+ data.finish = true;
+
+ // Empty the queue first
+ jQuery.queue( this, type, [] );
+
+ if ( hooks && hooks.stop ) {
+ hooks.stop.call( this, true );
+ }
+
+ // Look for any active animations, and finish them
+ for ( index = timers.length; index--; ) {
+ if ( timers[ index ].elem === this && timers[ index ].queue === type ) {
+ timers[ index ].anim.stop( true );
+ timers.splice( index, 1 );
+ }
+ }
+
+ // Look for any animations in the old queue and finish them
+ for ( index = 0; index < length; index++ ) {
+ if ( queue[ index ] && queue[ index ].finish ) {
+ queue[ index ].finish.call( this );
+ }
+ }
+
+ // Turn off finishing flag
+ delete data.finish;
+ });
+ }
+ });
+
+ jQuery.each([ "toggle", "show", "hide" ], function( i, name ) {
+ var cssFn = jQuery.fn[ name ];
+ jQuery.fn[ name ] = function( speed, easing, callback ) {
+ return speed == null || typeof speed === "boolean" ?
+ cssFn.apply( this, arguments ) :
+ this.animate( genFx( name, true ), speed, easing, callback );
+ };
+ });
+
+ // Generate shortcuts for custom animations
+ jQuery.each({
+ slideDown: genFx("show"),
+ slideUp: genFx("hide"),
+ slideToggle: genFx("toggle"),
+ fadeIn: { opacity: "show" },
+ fadeOut: { opacity: "hide" },
+ fadeToggle: { opacity: "toggle" }
+ }, function( name, props ) {
+ jQuery.fn[ name ] = function( speed, easing, callback ) {
+ return this.animate( props, speed, easing, callback );
+ };
+ });
+
+ jQuery.timers = [];
+ jQuery.fx.tick = function() {
+ var timer,
+ i = 0,
+ timers = jQuery.timers;
+
+ fxNow = jQuery.now();
+
+ for ( ; i < timers.length; i++ ) {
+ timer = timers[ i ];
+ // Checks the timer has not already been removed
+ if ( !timer() && timers[ i ] === timer ) {
+ timers.splice( i--, 1 );
+ }
+ }
+
+ if ( !timers.length ) {
+ jQuery.fx.stop();
+ }
+ fxNow = undefined;
+ };
+
+ jQuery.fx.timer = function( timer ) {
+ jQuery.timers.push( timer );
+ if ( timer() ) {
+ jQuery.fx.start();
+ } else {
+ jQuery.timers.pop();
+ }
+ };
+
+ jQuery.fx.interval = 13;
+
+ jQuery.fx.start = function() {
+ if ( !timerId ) {
+ timerId = setInterval( jQuery.fx.tick, jQuery.fx.interval );
+ }
+ };
+
+ jQuery.fx.stop = function() {
+ clearInterval( timerId );
+ timerId = null;
+ };
+
+ jQuery.fx.speeds = {
+ slow: 600,
+ fast: 200,
+ // Default speed
+ _default: 400
+ };
+
+
+ // Based off of the plugin by Clint Helfers, with permission.
+ // http://blindsignals.com/index.php/2009/07/jquery-delay/
+ jQuery.fn.delay = function( time, type ) {
+ time = jQuery.fx ? jQuery.fx.speeds[ time ] || time : time;
+ type = type || "fx";
+
+ return this.queue( type, function( next, hooks ) {
+ var timeout = setTimeout( next, time );
+ hooks.stop = function() {
+ clearTimeout( timeout );
+ };
+ });
+ };
+
+
+ (function() {
+ var input = document.createElement( "input" ),
+ select = document.createElement( "select" ),
+ opt = select.appendChild( document.createElement( "option" ) );
+
+ input.type = "checkbox";
+
+ // Support: iOS<=5.1, Android<=4.2+
+ // Default value for a checkbox should be "on"
+ support.checkOn = input.value !== "";
+
+ // Support: IE<=11+
+ // Must access selectedIndex to make default options select
+ support.optSelected = opt.selected;
+
+ // Support: Android<=2.3
+ // Options inside disabled selects are incorrectly marked as disabled
+ select.disabled = true;
+ support.optDisabled = !opt.disabled;
+
+ // Support: IE<=11+
+ // An input loses its value after becoming a radio
+ input = document.createElement( "input" );
+ input.value = "t";
+ input.type = "radio";
+ support.radioValue = input.value === "t";
+ })();
+
+
+ var nodeHook, boolHook,
+ attrHandle = jQuery.expr.attrHandle;
+
+ jQuery.fn.extend({
+ attr: function( name, value ) {
+ return access( this, jQuery.attr, name, value, arguments.length > 1 );
+ },
+
+ removeAttr: function( name ) {
+ return this.each(function() {
+ jQuery.removeAttr( this, name );
+ });
+ }
+ });
+
+ jQuery.extend({
+ attr: function( elem, name, value ) {
+ var hooks, ret,
+ nType = elem.nodeType;
+
+ // don't get/set attributes on text, comment and attribute nodes
+ if ( !elem || nType === 3 || nType === 8 || nType === 2 ) {
+ return;
+ }
+
+ // Fallback to prop when attributes are not supported
+ if ( typeof elem.getAttribute === strundefined ) {
+ return jQuery.prop( elem, name, value );
+ }
+
+ // All attributes are lowercase
+ // Grab necessary hook if one is defined
+ if ( nType !== 1 || !jQuery.isXMLDoc( elem ) ) {
+ name = name.toLowerCase();
+ hooks = jQuery.attrHooks[ name ] ||
+ ( jQuery.expr.match.bool.test( name ) ? boolHook : nodeHook );
+ }
+
+ if ( value !== undefined ) {
+
+ if ( value === null ) {
+ jQuery.removeAttr( elem, name );
+
+ } else if ( hooks && "set" in hooks && (ret = hooks.set( elem, value, name )) !== undefined ) {
+ return ret;
+
+ } else {
+ elem.setAttribute( name, value + "" );
+ return value;
+ }
+
+ } else if ( hooks && "get" in hooks && (ret = hooks.get( elem, name )) !== null ) {
+ return ret;
+
+ } else {
+ ret = jQuery.find.attr( elem, name );
+
+ // Non-existent attributes return null, we normalize to undefined
+ return ret == null ?
+ undefined :
+ ret;
+ }
+ },
+
+ removeAttr: function( elem, value ) {
+ var name, propName,
+ i = 0,
+ attrNames = value && value.match( rnotwhite );
+
+ if ( attrNames && elem.nodeType === 1 ) {
+ while ( (name = attrNames[i++]) ) {
+ propName = jQuery.propFix[ name ] || name;
+
+ // Boolean attributes get special treatment (#10870)
+ if ( jQuery.expr.match.bool.test( name ) ) {
+ // Set corresponding property to false
+ elem[ propName ] = false;
+ }
+
+ elem.removeAttribute( name );
+ }
+ }
+ },
+
+ attrHooks: {
+ type: {
+ set: function( elem, value ) {
+ if ( !support.radioValue && value === "radio" &&
+ jQuery.nodeName( elem, "input" ) ) {
+ var val = elem.value;
+ elem.setAttribute( "type", value );
+ if ( val ) {
+ elem.value = val;
+ }
+ return value;
+ }
+ }
+ }
+ }
+ });
+
+ // Hooks for boolean attributes
+ boolHook = {
+ set: function( elem, value, name ) {
+ if ( value === false ) {
+ // Remove boolean attributes when set to false
+ jQuery.removeAttr( elem, name );
+ } else {
+ elem.setAttribute( name, name );
+ }
+ return name;
+ }
+ };
+ jQuery.each( jQuery.expr.match.bool.source.match( /\w+/g ), function( i, name ) {
+ var getter = attrHandle[ name ] || jQuery.find.attr;
+
+ attrHandle[ name ] = function( elem, name, isXML ) {
+ var ret, handle;
+ if ( !isXML ) {
+ // Avoid an infinite loop by temporarily removing this function from the getter
+ handle = attrHandle[ name ];
+ attrHandle[ name ] = ret;
+ ret = getter( elem, name, isXML ) != null ?
+ name.toLowerCase() :
+ null;
+ attrHandle[ name ] = handle;
+ }
+ return ret;
+ };
+ });
+
+
+
+
+ var rfocusable = /^(?:input|select|textarea|button)$/i;
+
+ jQuery.fn.extend({
+ prop: function( name, value ) {
+ return access( this, jQuery.prop, name, value, arguments.length > 1 );
+ },
+
+ removeProp: function( name ) {
+ return this.each(function() {
+ delete this[ jQuery.propFix[ name ] || name ];
+ });
+ }
+ });
+
+ jQuery.extend({
+ propFix: {
+ "for": "htmlFor",
+ "class": "className"
+ },
+
+ prop: function( elem, name, value ) {
+ var ret, hooks, notxml,
+ nType = elem.nodeType;
+
+ // Don't get/set properties on text, comment and attribute nodes
+ if ( !elem || nType === 3 || nType === 8 || nType === 2 ) {
+ return;
+ }
+
+ notxml = nType !== 1 || !jQuery.isXMLDoc( elem );
+
+ if ( notxml ) {
+ // Fix name and attach hooks
+ name = jQuery.propFix[ name ] || name;
+ hooks = jQuery.propHooks[ name ];
+ }
+
+ if ( value !== undefined ) {
+ return hooks && "set" in hooks && (ret = hooks.set( elem, value, name )) !== undefined ?
+ ret :
+ ( elem[ name ] = value );
+
+ } else {
+ return hooks && "get" in hooks && (ret = hooks.get( elem, name )) !== null ?
+ ret :
+ elem[ name ];
+ }
+ },
+
+ propHooks: {
+ tabIndex: {
+ get: function( elem ) {
+ return elem.hasAttribute( "tabindex" ) || rfocusable.test( elem.nodeName ) || elem.href ?
+ elem.tabIndex :
+ -1;
+ }
+ }
+ }
+ });
+
+ if ( !support.optSelected ) {
+ jQuery.propHooks.selected = {
+ get: function( elem ) {
+ var parent = elem.parentNode;
+ if ( parent && parent.parentNode ) {
+ parent.parentNode.selectedIndex;
+ }
+ return null;
+ }
+ };
+ }
+
+ jQuery.each([
+ "tabIndex",
+ "readOnly",
+ "maxLength",
+ "cellSpacing",
+ "cellPadding",
+ "rowSpan",
+ "colSpan",
+ "useMap",
+ "frameBorder",
+ "contentEditable"
+ ], function() {
+ jQuery.propFix[ this.toLowerCase() ] = this;
+ });
+
+
+
+
+ var rclass = /[\t\r\n\f]/g;
+
+ jQuery.fn.extend({
+ addClass: function( value ) {
+ var classes, elem, cur, clazz, j, finalValue,
+ proceed = typeof value === "string" && value,
+ i = 0,
+ len = this.length;
+
+ if ( jQuery.isFunction( value ) ) {
+ return this.each(function( j ) {
+ jQuery( this ).addClass( value.call( this, j, this.className ) );
+ });
+ }
+
+ if ( proceed ) {
+ // The disjunction here is for better compressibility (see removeClass)
+ classes = ( value || "" ).match( rnotwhite ) || [];
+
+ for ( ; i < len; i++ ) {
+ elem = this[ i ];
+ cur = elem.nodeType === 1 && ( elem.className ?
+ ( " " + elem.className + " " ).replace( rclass, " " ) :
+ " "
+ );
+
+ if ( cur ) {
+ j = 0;
+ while ( (clazz = classes[j++]) ) {
+ if ( cur.indexOf( " " + clazz + " " ) < 0 ) {
+ cur += clazz + " ";
+ }
+ }
+
+ // only assign if different to avoid unneeded rendering.
+ finalValue = jQuery.trim( cur );
+ if ( elem.className !== finalValue ) {
+ elem.className = finalValue;
+ }
+ }
+ }
+ }
+
+ return this;
+ },
+
+ removeClass: function( value ) {
+ var classes, elem, cur, clazz, j, finalValue,
+ proceed = arguments.length === 0 || typeof value === "string" && value,
+ i = 0,
+ len = this.length;
+
+ if ( jQuery.isFunction( value ) ) {
+ return this.each(function( j ) {
+ jQuery( this ).removeClass( value.call( this, j, this.className ) );
+ });
+ }
+ if ( proceed ) {
+ classes = ( value || "" ).match( rnotwhite ) || [];
+
+ for ( ; i < len; i++ ) {
+ elem = this[ i ];
+ // This expression is here for better compressibility (see addClass)
+ cur = elem.nodeType === 1 && ( elem.className ?
+ ( " " + elem.className + " " ).replace( rclass, " " ) :
+ ""
+ );
+
+ if ( cur ) {
+ j = 0;
+ while ( (clazz = classes[j++]) ) {
+ // Remove *all* instances
+ while ( cur.indexOf( " " + clazz + " " ) >= 0 ) {
+ cur = cur.replace( " " + clazz + " ", " " );
+ }
+ }
+
+ // Only assign if different to avoid unneeded rendering.
+ finalValue = value ? jQuery.trim( cur ) : "";
+ if ( elem.className !== finalValue ) {
+ elem.className = finalValue;
+ }
+ }
+ }
+ }
+
+ return this;
+ },
+
+ toggleClass: function( value, stateVal ) {
+ var type = typeof value;
+
+ if ( typeof stateVal === "boolean" && type === "string" ) {
+ return stateVal ? this.addClass( value ) : this.removeClass( value );
+ }
+
+ if ( jQuery.isFunction( value ) ) {
+ return this.each(function( i ) {
+ jQuery( this ).toggleClass( value.call(this, i, this.className, stateVal), stateVal );
+ });
+ }
+
+ return this.each(function() {
+ if ( type === "string" ) {
+ // Toggle individual class names
+ var className,
+ i = 0,
+ self = jQuery( this ),
+ classNames = value.match( rnotwhite ) || [];
+
+ while ( (className = classNames[ i++ ]) ) {
+ // Check each className given, space separated list
+ if ( self.hasClass( className ) ) {
+ self.removeClass( className );
+ } else {
+ self.addClass( className );
+ }
+ }
+
+ // Toggle whole class name
+ } else if ( type === strundefined || type === "boolean" ) {
+ if ( this.className ) {
+ // store className if set
+ data_priv.set( this, "__className__", this.className );
+ }
+
+ // If the element has a class name or if we're passed `false`,
+ // then remove the whole classname (if there was one, the above saved it).
+ // Otherwise bring back whatever was previously saved (if anything),
+ // falling back to the empty string if nothing was stored.
+ this.className = this.className || value === false ? "" : data_priv.get( this, "__className__" ) || "";
+ }
+ });
+ },
+
+ hasClass: function( selector ) {
+ var className = " " + selector + " ",
+ i = 0,
+ l = this.length;
+ for ( ; i < l; i++ ) {
+ if ( this[i].nodeType === 1 && (" " + this[i].className + " ").replace(rclass, " ").indexOf( className ) >= 0 ) {
+ return true;
+ }
+ }
+
+ return false;
+ }
+ });
+
+
+
+
+ var rreturn = /\r/g;
+
+ jQuery.fn.extend({
+ val: function( value ) {
+ var hooks, ret, isFunction,
+ elem = this[0];
+
+ if ( !arguments.length ) {
+ if ( elem ) {
+ hooks = jQuery.valHooks[ elem.type ] || jQuery.valHooks[ elem.nodeName.toLowerCase() ];
+
+ if ( hooks && "get" in hooks && (ret = hooks.get( elem, "value" )) !== undefined ) {
+ return ret;
+ }
+
+ ret = elem.value;
+
+ return typeof ret === "string" ?
+ // Handle most common string cases
+ ret.replace(rreturn, "") :
+ // Handle cases where value is null/undef or number
+ ret == null ? "" : ret;
+ }
+
+ return;
+ }
+
+ isFunction = jQuery.isFunction( value );
+
+ return this.each(function( i ) {
+ var val;
+
+ if ( this.nodeType !== 1 ) {
+ return;
+ }
+
+ if ( isFunction ) {
+ val = value.call( this, i, jQuery( this ).val() );
+ } else {
+ val = value;
+ }
+
+ // Treat null/undefined as ""; convert numbers to string
+ if ( val == null ) {
+ val = "";
+
+ } else if ( typeof val === "number" ) {
+ val += "";
+
+ } else if ( jQuery.isArray( val ) ) {
+ val = jQuery.map( val, function( value ) {
+ return value == null ? "" : value + "";
+ });
+ }
+
+ hooks = jQuery.valHooks[ this.type ] || jQuery.valHooks[ this.nodeName.toLowerCase() ];
+
+ // If set returns undefined, fall back to normal setting
+ if ( !hooks || !("set" in hooks) || hooks.set( this, val, "value" ) === undefined ) {
+ this.value = val;
+ }
+ });
+ }
+ });
+
+ jQuery.extend({
+ valHooks: {
+ option: {
+ get: function( elem ) {
+ var val = jQuery.find.attr( elem, "value" );
+ return val != null ?
+ val :
+ // Support: IE10-11+
+ // option.text throws exceptions (#14686, #14858)
+ jQuery.trim( jQuery.text( elem ) );
+ }
+ },
+ select: {
+ get: function( elem ) {
+ var value, option,
+ options = elem.options,
+ index = elem.selectedIndex,
+ one = elem.type === "select-one" || index < 0,
+ values = one ? null : [],
+ max = one ? index + 1 : options.length,
+ i = index < 0 ?
+ max :
+ one ? index : 0;
+
+ // Loop through all the selected options
+ for ( ; i < max; i++ ) {
+ option = options[ i ];
+
+ // IE6-9 doesn't update selected after form reset (#2551)
+ if ( ( option.selected || i === index ) &&
+ // Don't return options that are disabled or in a disabled optgroup
+ ( support.optDisabled ? !option.disabled : option.getAttribute( "disabled" ) === null ) &&
+ ( !option.parentNode.disabled || !jQuery.nodeName( option.parentNode, "optgroup" ) ) ) {
+
+ // Get the specific value for the option
+ value = jQuery( option ).val();
+
+ // We don't need an array for one selects
+ if ( one ) {
+ return value;
+ }
+
+ // Multi-Selects return an array
+ values.push( value );
+ }
+ }
+
+ return values;
+ },
+
+ set: function( elem, value ) {
+ var optionSet, option,
+ options = elem.options,
+ values = jQuery.makeArray( value ),
+ i = options.length;
+
+ while ( i-- ) {
+ option = options[ i ];
+ if ( (option.selected = jQuery.inArray( option.value, values ) >= 0) ) {
+ optionSet = true;
+ }
+ }
+
+ // Force browsers to behave consistently when non-matching value is set
+ if ( !optionSet ) {
+ elem.selectedIndex = -1;
+ }
+ return values;
+ }
+ }
+ }
+ });
+
+ // Radios and checkboxes getter/setter
+ jQuery.each([ "radio", "checkbox" ], function() {
+ jQuery.valHooks[ this ] = {
+ set: function( elem, value ) {
+ if ( jQuery.isArray( value ) ) {
+ return ( elem.checked = jQuery.inArray( jQuery(elem).val(), value ) >= 0 );
+ }
+ }
+ };
+ if ( !support.checkOn ) {
+ jQuery.valHooks[ this ].get = function( elem ) {
+ return elem.getAttribute("value") === null ? "on" : elem.value;
+ };
+ }
+ });
+
+
+
+
+ // Return jQuery for attributes-only inclusion
+
+
+ jQuery.each( ("blur focus focusin focusout load resize scroll unload click dblclick " +
+ "mousedown mouseup mousemove mouseover mouseout mouseenter mouseleave " +
+ "change select submit keydown keypress keyup error contextmenu").split(" "), function( i, name ) {
+
+ // Handle event binding
+ jQuery.fn[ name ] = function( data, fn ) {
+ return arguments.length > 0 ?
+ this.on( name, null, data, fn ) :
+ this.trigger( name );
+ };
+ });
+
+ jQuery.fn.extend({
+ hover: function( fnOver, fnOut ) {
+ return this.mouseenter( fnOver ).mouseleave( fnOut || fnOver );
+ },
+
+ bind: function( types, data, fn ) {
+ return this.on( types, null, data, fn );
+ },
+ unbind: function( types, fn ) {
+ return this.off( types, null, fn );
+ },
+
+ delegate: function( selector, types, data, fn ) {
+ return this.on( types, selector, data, fn );
+ },
+ undelegate: function( selector, types, fn ) {
+ // ( namespace ) or ( selector, types [, fn] )
+ return arguments.length === 1 ? this.off( selector, "**" ) : this.off( types, selector || "**", fn );
+ }
+ });
+
+
+ var nonce = jQuery.now();
+
+ var rquery = (/\?/);
+
+
+
+ // Support: Android 2.3
+ // Workaround failure to string-cast null input
+ jQuery.parseJSON = function( data ) {
+ return JSON.parse( data + "" );
+ };
+
+
+ // Cross-browser xml parsing
+ jQuery.parseXML = function( data ) {
+ var xml, tmp;
+ if ( !data || typeof data !== "string" ) {
+ return null;
+ }
+
+ // Support: IE9
+ try {
+ tmp = new DOMParser();
+ xml = tmp.parseFromString( data, "text/xml" );
+ } catch ( e ) {
+ xml = undefined;
+ }
+
+ if ( !xml || xml.getElementsByTagName( "parsererror" ).length ) {
+ jQuery.error( "Invalid XML: " + data );
+ }
+ return xml;
+ };
+
+
+ var
+ rhash = /#.*$/,
+ rts = /([?&])_=[^&]*/,
+ rheaders = /^(.*?):[ \t]*([^\r\n]*)$/mg,
+ // #7653, #8125, #8152: local protocol detection
+ rlocalProtocol = /^(?:about|app|app-storage|.+-extension|file|res|widget):$/,
+ rnoContent = /^(?:GET|HEAD)$/,
+ rprotocol = /^\/\//,
+ rurl = /^([\w.+-]+:)(?:\/\/(?:[^\/?#]*@|)([^\/?#:]*)(?::(\d+)|)|)/,
+
+ /* Prefilters
+ * 1) They are useful to introduce custom dataTypes (see ajax/jsonp.js for an example)
+ * 2) These are called:
+ * - BEFORE asking for a transport
+ * - AFTER param serialization (s.data is a string if s.processData is true)
+ * 3) key is the dataType
+ * 4) the catchall symbol "*" can be used
+ * 5) execution will start with transport dataType and THEN continue down to "*" if needed
+ */
+ prefilters = {},
+
+ /* Transports bindings
+ * 1) key is the dataType
+ * 2) the catchall symbol "*" can be used
+ * 3) selection will start with transport dataType and THEN go to "*" if needed
+ */
+ transports = {},
+
+ // Avoid comment-prolog char sequence (#10098); must appease lint and evade compression
+ allTypes = "*/".concat( "*" ),
+
+ // Document location
+ ajaxLocation = window.location.href,
+
+ // Segment location into parts
+ ajaxLocParts = rurl.exec( ajaxLocation.toLowerCase() ) || [];
+
+ // Base "constructor" for jQuery.ajaxPrefilter and jQuery.ajaxTransport
+ function addToPrefiltersOrTransports( structure ) {
+
+ // dataTypeExpression is optional and defaults to "*"
+ return function( dataTypeExpression, func ) {
+
+ if ( typeof dataTypeExpression !== "string" ) {
+ func = dataTypeExpression;
+ dataTypeExpression = "*";
+ }
+
+ var dataType,
+ i = 0,
+ dataTypes = dataTypeExpression.toLowerCase().match( rnotwhite ) || [];
+
+ if ( jQuery.isFunction( func ) ) {
+ // For each dataType in the dataTypeExpression
+ while ( (dataType = dataTypes[i++]) ) {
+ // Prepend if requested
+ if ( dataType[0] === "+" ) {
+ dataType = dataType.slice( 1 ) || "*";
+ (structure[ dataType ] = structure[ dataType ] || []).unshift( func );
+
+ // Otherwise append
+ } else {
+ (structure[ dataType ] = structure[ dataType ] || []).push( func );
+ }
+ }
+ }
+ };
+ }
+
+ // Base inspection function for prefilters and transports
+ function inspectPrefiltersOrTransports( structure, options, originalOptions, jqXHR ) {
+
+ var inspected = {},
+ seekingTransport = ( structure === transports );
+
+ function inspect( dataType ) {
+ var selected;
+ inspected[ dataType ] = true;
+ jQuery.each( structure[ dataType ] || [], function( _, prefilterOrFactory ) {
+ var dataTypeOrTransport = prefilterOrFactory( options, originalOptions, jqXHR );
+ if ( typeof dataTypeOrTransport === "string" && !seekingTransport && !inspected[ dataTypeOrTransport ] ) {
+ options.dataTypes.unshift( dataTypeOrTransport );
+ inspect( dataTypeOrTransport );
+ return false;
+ } else if ( seekingTransport ) {
+ return !( selected = dataTypeOrTransport );
+ }
+ });
+ return selected;
+ }
+
+ return inspect( options.dataTypes[ 0 ] ) || !inspected[ "*" ] && inspect( "*" );
+ }
+
+ // A special extend for ajax options
+ // that takes "flat" options (not to be deep extended)
+ // Fixes #9887
+ function ajaxExtend( target, src ) {
+ var key, deep,
+ flatOptions = jQuery.ajaxSettings.flatOptions || {};
+
+ for ( key in src ) {
+ if ( src[ key ] !== undefined ) {
+ ( flatOptions[ key ] ? target : ( deep || (deep = {}) ) )[ key ] = src[ key ];
+ }
+ }
+ if ( deep ) {
+ jQuery.extend( true, target, deep );
+ }
+
+ return target;
+ }
+
+ /* Handles responses to an ajax request:
+ * - finds the right dataType (mediates between content-type and expected dataType)
+ * - returns the corresponding response
+ */
+ function ajaxHandleResponses( s, jqXHR, responses ) {
+
+ var ct, type, finalDataType, firstDataType,
+ contents = s.contents,
+ dataTypes = s.dataTypes;
+
+ // Remove auto dataType and get content-type in the process
+ while ( dataTypes[ 0 ] === "*" ) {
+ dataTypes.shift();
+ if ( ct === undefined ) {
+ ct = s.mimeType || jqXHR.getResponseHeader("Content-Type");
+ }
+ }
+
+ // Check if we're dealing with a known content-type
+ if ( ct ) {
+ for ( type in contents ) {
+ if ( contents[ type ] && contents[ type ].test( ct ) ) {
+ dataTypes.unshift( type );
+ break;
+ }
+ }
+ }
+
+ // Check to see if we have a response for the expected dataType
+ if ( dataTypes[ 0 ] in responses ) {
+ finalDataType = dataTypes[ 0 ];
+ } else {
+ // Try convertible dataTypes
+ for ( type in responses ) {
+ if ( !dataTypes[ 0 ] || s.converters[ type + " " + dataTypes[0] ] ) {
+ finalDataType = type;
+ break;
+ }
+ if ( !firstDataType ) {
+ firstDataType = type;
+ }
+ }
+ // Or just use first one
+ finalDataType = finalDataType || firstDataType;
+ }
+
+ // If we found a dataType
+ // We add the dataType to the list if needed
+ // and return the corresponding response
+ if ( finalDataType ) {
+ if ( finalDataType !== dataTypes[ 0 ] ) {
+ dataTypes.unshift( finalDataType );
+ }
+ return responses[ finalDataType ];
+ }
+ }
+
+ /* Chain conversions given the request and the original response
+ * Also sets the responseXXX fields on the jqXHR instance
+ */
+ function ajaxConvert( s, response, jqXHR, isSuccess ) {
+ var conv2, current, conv, tmp, prev,
+ converters = {},
+ // Work with a copy of dataTypes in case we need to modify it for conversion
+ dataTypes = s.dataTypes.slice();
+
+ // Create converters map with lowercased keys
+ if ( dataTypes[ 1 ] ) {
+ for ( conv in s.converters ) {
+ converters[ conv.toLowerCase() ] = s.converters[ conv ];
+ }
+ }
+
+ current = dataTypes.shift();
+
+ // Convert to each sequential dataType
+ while ( current ) {
+
+ if ( s.responseFields[ current ] ) {
+ jqXHR[ s.responseFields[ current ] ] = response;
+ }
+
+ // Apply the dataFilter if provided
+ if ( !prev && isSuccess && s.dataFilter ) {
+ response = s.dataFilter( response, s.dataType );
+ }
+
+ prev = current;
+ current = dataTypes.shift();
+
+ if ( current ) {
+
+ // There's only work to do if current dataType is non-auto
+ if ( current === "*" ) {
+
+ current = prev;
+
+ // Convert response if prev dataType is non-auto and differs from current
+ } else if ( prev !== "*" && prev !== current ) {
+
+ // Seek a direct converter
+ conv = converters[ prev + " " + current ] || converters[ "* " + current ];
+
+ // If none found, seek a pair
+ if ( !conv ) {
+ for ( conv2 in converters ) {
+
+ // If conv2 outputs current
+ tmp = conv2.split( " " );
+ if ( tmp[ 1 ] === current ) {
+
+ // If prev can be converted to accepted input
+ conv = converters[ prev + " " + tmp[ 0 ] ] ||
+ converters[ "* " + tmp[ 0 ] ];
+ if ( conv ) {
+ // Condense equivalence converters
+ if ( conv === true ) {
+ conv = converters[ conv2 ];
+
+ // Otherwise, insert the intermediate dataType
+ } else if ( converters[ conv2 ] !== true ) {
+ current = tmp[ 0 ];
+ dataTypes.unshift( tmp[ 1 ] );
+ }
+ break;
+ }
+ }
+ }
+ }
+
+ // Apply converter (if not an equivalence)
+ if ( conv !== true ) {
+
+ // Unless errors are allowed to bubble, catch and return them
+ if ( conv && s[ "throws" ] ) {
+ response = conv( response );
+ } else {
+ try {
+ response = conv( response );
+ } catch ( e ) {
+ return { state: "parsererror", error: conv ? e : "No conversion from " + prev + " to " + current };
+ }
+ }
+ }
+ }
+ }
+ }
+
+ return { state: "success", data: response };
+ }
+
+ jQuery.extend({
+
+ // Counter for holding the number of active queries
+ active: 0,
+
+ // Last-Modified header cache for next request
+ lastModified: {},
+ etag: {},
+
+ ajaxSettings: {
+ url: ajaxLocation,
+ type: "GET",
+ isLocal: rlocalProtocol.test( ajaxLocParts[ 1 ] ),
+ global: true,
+ processData: true,
+ async: true,
+ contentType: "application/x-www-form-urlencoded; charset=UTF-8",
+ /*
+ timeout: 0,
+ data: null,
+ dataType: null,
+ username: null,
+ password: null,
+ cache: null,
+ throws: false,
+ traditional: false,
+ headers: {},
+ */
+
+ accepts: {
+ "*": allTypes,
+ text: "text/plain",
+ html: "text/html",
+ xml: "application/xml, text/xml",
+ json: "application/json, text/javascript"
+ },
+
+ contents: {
+ xml: /xml/,
+ html: /html/,
+ json: /json/
+ },
+
+ responseFields: {
+ xml: "responseXML",
+ text: "responseText",
+ json: "responseJSON"
+ },
+
+ // Data converters
+ // Keys separate source (or catchall "*") and destination types with a single space
+ converters: {
+
+ // Convert anything to text
+ "* text": String,
+
+ // Text to html (true = no transformation)
+ "text html": true,
+
+ // Evaluate text as a json expression
+ "text json": jQuery.parseJSON,
+
+ // Parse text as xml
+ "text xml": jQuery.parseXML
+ },
+
+ // For options that shouldn't be deep extended:
+ // you can add your own custom options here if
+ // and when you create one that shouldn't be
+ // deep extended (see ajaxExtend)
+ flatOptions: {
+ url: true,
+ context: true
+ }
+ },
+
+ // Creates a full fledged settings object into target
+ // with both ajaxSettings and settings fields.
+ // If target is omitted, writes into ajaxSettings.
+ ajaxSetup: function( target, settings ) {
+ return settings ?
+
+ // Building a settings object
+ ajaxExtend( ajaxExtend( target, jQuery.ajaxSettings ), settings ) :
+
+ // Extending ajaxSettings
+ ajaxExtend( jQuery.ajaxSettings, target );
+ },
+
+ ajaxPrefilter: addToPrefiltersOrTransports( prefilters ),
+ ajaxTransport: addToPrefiltersOrTransports( transports ),
+
+ // Main method
+ ajax: function( url, options ) {
+
+ // If url is an object, simulate pre-1.5 signature
+ if ( typeof url === "object" ) {
+ options = url;
+ url = undefined;
+ }
+
+ // Force options to be an object
+ options = options || {};
+
+ var transport,
+ // URL without anti-cache param
+ cacheURL,
+ // Response headers
+ responseHeadersString,
+ responseHeaders,
+ // timeout handle
+ timeoutTimer,
+ // Cross-domain detection vars
+ parts,
+ // To know if global events are to be dispatched
+ fireGlobals,
+ // Loop variable
+ i,
+ // Create the final options object
+ s = jQuery.ajaxSetup( {}, options ),
+ // Callbacks context
+ callbackContext = s.context || s,
+ // Context for global events is callbackContext if it is a DOM node or jQuery collection
+ globalEventContext = s.context && ( callbackContext.nodeType || callbackContext.jquery ) ?
+ jQuery( callbackContext ) :
+ jQuery.event,
+ // Deferreds
+ deferred = jQuery.Deferred(),
+ completeDeferred = jQuery.Callbacks("once memory"),
+ // Status-dependent callbacks
+ statusCode = s.statusCode || {},
+ // Headers (they are sent all at once)
+ requestHeaders = {},
+ requestHeadersNames = {},
+ // The jqXHR state
+ state = 0,
+ // Default abort message
+ strAbort = "canceled",
+ // Fake xhr
+ jqXHR = {
+ readyState: 0,
+
+ // Builds headers hashtable if needed
+ getResponseHeader: function( key ) {
+ var match;
+ if ( state === 2 ) {
+ if ( !responseHeaders ) {
+ responseHeaders = {};
+ while ( (match = rheaders.exec( responseHeadersString )) ) {
+ responseHeaders[ match[1].toLowerCase() ] = match[ 2 ];
+ }
+ }
+ match = responseHeaders[ key.toLowerCase() ];
+ }
+ return match == null ? null : match;
+ },
+
+ // Raw string
+ getAllResponseHeaders: function() {
+ return state === 2 ? responseHeadersString : null;
+ },
+
+ // Caches the header
+ setRequestHeader: function( name, value ) {
+ var lname = name.toLowerCase();
+ if ( !state ) {
+ name = requestHeadersNames[ lname ] = requestHeadersNames[ lname ] || name;
+ requestHeaders[ name ] = value;
+ }
+ return this;
+ },
+
+ // Overrides response content-type header
+ overrideMimeType: function( type ) {
+ if ( !state ) {
+ s.mimeType = type;
+ }
+ return this;
+ },
+
+ // Status-dependent callbacks
+ statusCode: function( map ) {
+ var code;
+ if ( map ) {
+ if ( state < 2 ) {
+ for ( code in map ) {
+ // Lazy-add the new callback in a way that preserves old ones
+ statusCode[ code ] = [ statusCode[ code ], map[ code ] ];
+ }
+ } else {
+ // Execute the appropriate callbacks
+ jqXHR.always( map[ jqXHR.status ] );
+ }
+ }
+ return this;
+ },
+
+ // Cancel the request
+ abort: function( statusText ) {
+ var finalText = statusText || strAbort;
+ if ( transport ) {
+ transport.abort( finalText );
+ }
+ done( 0, finalText );
+ return this;
+ }
+ };
+
+ // Attach deferreds
+ deferred.promise( jqXHR ).complete = completeDeferred.add;
+ jqXHR.success = jqXHR.done;
+ jqXHR.error = jqXHR.fail;
+
+ // Remove hash character (#7531: and string promotion)
+ // Add protocol if not provided (prefilters might expect it)
+ // Handle falsy url in the settings object (#10093: consistency with old signature)
+ // We also use the url parameter if available
+ s.url = ( ( url || s.url || ajaxLocation ) + "" ).replace( rhash, "" )
+ .replace( rprotocol, ajaxLocParts[ 1 ] + "//" );
+
+ // Alias method option to type as per ticket #12004
+ s.type = options.method || options.type || s.method || s.type;
+
+ // Extract dataTypes list
+ s.dataTypes = jQuery.trim( s.dataType || "*" ).toLowerCase().match( rnotwhite ) || [ "" ];
+
+ // A cross-domain request is in order when we have a protocol:host:port mismatch
+ if ( s.crossDomain == null ) {
+ parts = rurl.exec( s.url.toLowerCase() );
+ s.crossDomain = !!( parts &&
+ ( parts[ 1 ] !== ajaxLocParts[ 1 ] || parts[ 2 ] !== ajaxLocParts[ 2 ] ||
+ ( parts[ 3 ] || ( parts[ 1 ] === "http:" ? "80" : "443" ) ) !==
+ ( ajaxLocParts[ 3 ] || ( ajaxLocParts[ 1 ] === "http:" ? "80" : "443" ) ) )
+ );
+ }
+
+ // Convert data if not already a string
+ if ( s.data && s.processData && typeof s.data !== "string" ) {
+ s.data = jQuery.param( s.data, s.traditional );
+ }
+
+ // Apply prefilters
+ inspectPrefiltersOrTransports( prefilters, s, options, jqXHR );
+
+ // If request was aborted inside a prefilter, stop there
+ if ( state === 2 ) {
+ return jqXHR;
+ }
+
+ // We can fire global events as of now if asked to
+ // Don't fire events if jQuery.event is undefined in an AMD-usage scenario (#15118)
+ fireGlobals = jQuery.event && s.global;
+
+ // Watch for a new set of requests
+ if ( fireGlobals && jQuery.active++ === 0 ) {
+ jQuery.event.trigger("ajaxStart");
+ }
+
+ // Uppercase the type
+ s.type = s.type.toUpperCase();
+
+ // Determine if request has content
+ s.hasContent = !rnoContent.test( s.type );
+
+ // Save the URL in case we're toying with the If-Modified-Since
+ // and/or If-None-Match header later on
+ cacheURL = s.url;
+
+ // More options handling for requests with no content
+ if ( !s.hasContent ) {
+
+ // If data is available, append data to url
+ if ( s.data ) {
+ cacheURL = ( s.url += ( rquery.test( cacheURL ) ? "&" : "?" ) + s.data );
+ // #9682: remove data so that it's not used in an eventual retry
+ delete s.data;
+ }
+
+ // Add anti-cache in url if needed
+ if ( s.cache === false ) {
+ s.url = rts.test( cacheURL ) ?
+
+ // If there is already a '_' parameter, set its value
+ cacheURL.replace( rts, "$1_=" + nonce++ ) :
+
+ // Otherwise add one to the end
+ cacheURL + ( rquery.test( cacheURL ) ? "&" : "?" ) + "_=" + nonce++;
+ }
+ }
+
+ // Set the If-Modified-Since and/or If-None-Match header, if in ifModified mode.
+ if ( s.ifModified ) {
+ if ( jQuery.lastModified[ cacheURL ] ) {
+ jqXHR.setRequestHeader( "If-Modified-Since", jQuery.lastModified[ cacheURL ] );
+ }
+ if ( jQuery.etag[ cacheURL ] ) {
+ jqXHR.setRequestHeader( "If-None-Match", jQuery.etag[ cacheURL ] );
+ }
+ }
+
+ // Set the correct header, if data is being sent
+ if ( s.data && s.hasContent && s.contentType !== false || options.contentType ) {
+ jqXHR.setRequestHeader( "Content-Type", s.contentType );
+ }
+
+ // Set the Accepts header for the server, depending on the dataType
+ jqXHR.setRequestHeader(
+ "Accept",
+ s.dataTypes[ 0 ] && s.accepts[ s.dataTypes[0] ] ?
+ s.accepts[ s.dataTypes[0] ] + ( s.dataTypes[ 0 ] !== "*" ? ", " + allTypes + "; q=0.01" : "" ) :
+ s.accepts[ "*" ]
+ );
+
+ // Check for headers option
+ for ( i in s.headers ) {
+ jqXHR.setRequestHeader( i, s.headers[ i ] );
+ }
+
+ // Allow custom headers/mimetypes and early abort
+ if ( s.beforeSend && ( s.beforeSend.call( callbackContext, jqXHR, s ) === false || state === 2 ) ) {
+ // Abort if not done already and return
+ return jqXHR.abort();
+ }
+
+ // Aborting is no longer a cancellation
+ strAbort = "abort";
+
+ // Install callbacks on deferreds
+ for ( i in { success: 1, error: 1, complete: 1 } ) {
+ jqXHR[ i ]( s[ i ] );
+ }
+
+ // Get transport
+ transport = inspectPrefiltersOrTransports( transports, s, options, jqXHR );
+
+ // If no transport, we auto-abort
+ if ( !transport ) {
+ done( -1, "No Transport" );
+ } else {
+ jqXHR.readyState = 1;
+
+ // Send global event
+ if ( fireGlobals ) {
+ globalEventContext.trigger( "ajaxSend", [ jqXHR, s ] );
+ }
+ // Timeout
+ if ( s.async && s.timeout > 0 ) {
+ timeoutTimer = setTimeout(function() {
+ jqXHR.abort("timeout");
+ }, s.timeout );
+ }
+
+ try {
+ state = 1;
+ transport.send( requestHeaders, done );
+ } catch ( e ) {
+ // Propagate exception as error if not done
+ if ( state < 2 ) {
+ done( -1, e );
+ // Simply rethrow otherwise
+ } else {
+ throw e;
+ }
+ }
+ }
+
+ // Callback for when everything is done
+ function done( status, nativeStatusText, responses, headers ) {
+ var isSuccess, success, error, response, modified,
+ statusText = nativeStatusText;
+
+ // Called once
+ if ( state === 2 ) {
+ return;
+ }
+
+ // State is "done" now
+ state = 2;
+
+ // Clear timeout if it exists
+ if ( timeoutTimer ) {
+ clearTimeout( timeoutTimer );
+ }
+
+ // Dereference transport for early garbage collection
+ // (no matter how long the jqXHR object will be used)
+ transport = undefined;
+
+ // Cache response headers
+ responseHeadersString = headers || "";
+
+ // Set readyState
+ jqXHR.readyState = status > 0 ? 4 : 0;
+
+ // Determine if successful
+ isSuccess = status >= 200 && status < 300 || status === 304;
+
+ // Get response data
+ if ( responses ) {
+ response = ajaxHandleResponses( s, jqXHR, responses );
+ }
+
+ // Convert no matter what (that way responseXXX fields are always set)
+ response = ajaxConvert( s, response, jqXHR, isSuccess );
+
+ // If successful, handle type chaining
+ if ( isSuccess ) {
+
+ // Set the If-Modified-Since and/or If-None-Match header, if in ifModified mode.
+ if ( s.ifModified ) {
+ modified = jqXHR.getResponseHeader("Last-Modified");
+ if ( modified ) {
+ jQuery.lastModified[ cacheURL ] = modified;
+ }
+ modified = jqXHR.getResponseHeader("etag");
+ if ( modified ) {
+ jQuery.etag[ cacheURL ] = modified;
+ }
+ }
+
+ // if no content
+ if ( status === 204 || s.type === "HEAD" ) {
+ statusText = "nocontent";
+
+ // if not modified
+ } else if ( status === 304 ) {
+ statusText = "notmodified";
+
+ // If we have data, let's convert it
+ } else {
+ statusText = response.state;
+ success = response.data;
+ error = response.error;
+ isSuccess = !error;
+ }
+ } else {
+ // Extract error from statusText and normalize for non-aborts
+ error = statusText;
+ if ( status || !statusText ) {
+ statusText = "error";
+ if ( status < 0 ) {
+ status = 0;
+ }
+ }
+ }
+
+ // Set data for the fake xhr object
+ jqXHR.status = status;
+ jqXHR.statusText = ( nativeStatusText || statusText ) + "";
+
+ // Success/Error
+ if ( isSuccess ) {
+ deferred.resolveWith( callbackContext, [ success, statusText, jqXHR ] );
+ } else {
+ deferred.rejectWith( callbackContext, [ jqXHR, statusText, error ] );
+ }
+
+ // Status-dependent callbacks
+ jqXHR.statusCode( statusCode );
+ statusCode = undefined;
+
+ if ( fireGlobals ) {
+ globalEventContext.trigger( isSuccess ? "ajaxSuccess" : "ajaxError",
+ [ jqXHR, s, isSuccess ? success : error ] );
+ }
+
+ // Complete
+ completeDeferred.fireWith( callbackContext, [ jqXHR, statusText ] );
+
+ if ( fireGlobals ) {
+ globalEventContext.trigger( "ajaxComplete", [ jqXHR, s ] );
+ // Handle the global AJAX counter
+ if ( !( --jQuery.active ) ) {
+ jQuery.event.trigger("ajaxStop");
+ }
+ }
+ }
+
+ return jqXHR;
+ },
+
+ getJSON: function( url, data, callback ) {
+ return jQuery.get( url, data, callback, "json" );
+ },
+
+ getScript: function( url, callback ) {
+ return jQuery.get( url, undefined, callback, "script" );
+ }
+ });
+
+ jQuery.each( [ "get", "post" ], function( i, method ) {
+ jQuery[ method ] = function( url, data, callback, type ) {
+ // Shift arguments if data argument was omitted
+ if ( jQuery.isFunction( data ) ) {
+ type = type || callback;
+ callback = data;
+ data = undefined;
+ }
+
+ return jQuery.ajax({
+ url: url,
+ type: method,
+ dataType: type,
+ data: data,
+ success: callback
+ });
+ };
+ });
+
+
+ jQuery._evalUrl = function( url ) {
+ return jQuery.ajax({
+ url: url,
+ type: "GET",
+ dataType: "script",
+ async: false,
+ global: false,
+ "throws": true
+ });
+ };
+
+
+ jQuery.fn.extend({
+ wrapAll: function( html ) {
+ var wrap;
+
+ if ( jQuery.isFunction( html ) ) {
+ return this.each(function( i ) {
+ jQuery( this ).wrapAll( html.call(this, i) );
+ });
+ }
+
+ if ( this[ 0 ] ) {
+
+ // The elements to wrap the target around
+ wrap = jQuery( html, this[ 0 ].ownerDocument ).eq( 0 ).clone( true );
+
+ if ( this[ 0 ].parentNode ) {
+ wrap.insertBefore( this[ 0 ] );
+ }
+
+ wrap.map(function() {
+ var elem = this;
+
+ while ( elem.firstElementChild ) {
+ elem = elem.firstElementChild;
+ }
+
+ return elem;
+ }).append( this );
+ }
+
+ return this;
+ },
+
+ wrapInner: function( html ) {
+ if ( jQuery.isFunction( html ) ) {
+ return this.each(function( i ) {
+ jQuery( this ).wrapInner( html.call(this, i) );
+ });
+ }
+
+ return this.each(function() {
+ var self = jQuery( this ),
+ contents = self.contents();
+
+ if ( contents.length ) {
+ contents.wrapAll( html );
+
+ } else {
+ self.append( html );
+ }
+ });
+ },
+
+ wrap: function( html ) {
+ var isFunction = jQuery.isFunction( html );
+
+ return this.each(function( i ) {
+ jQuery( this ).wrapAll( isFunction ? html.call(this, i) : html );
+ });
+ },
+
+ unwrap: function() {
+ return this.parent().each(function() {
+ if ( !jQuery.nodeName( this, "body" ) ) {
+ jQuery( this ).replaceWith( this.childNodes );
+ }
+ }).end();
+ }
+ });
+
+
+ jQuery.expr.filters.hidden = function( elem ) {
+ // Support: Opera <= 12.12
+ // Opera reports offsetWidths and offsetHeights less than zero on some elements
+ return elem.offsetWidth <= 0 && elem.offsetHeight <= 0;
+ };
+ jQuery.expr.filters.visible = function( elem ) {
+ return !jQuery.expr.filters.hidden( elem );
+ };
+
+
+
+
+ var r20 = /%20/g,
+ rbracket = /\[\]$/,
+ rCRLF = /\r?\n/g,
+ rsubmitterTypes = /^(?:submit|button|image|reset|file)$/i,
+ rsubmittable = /^(?:input|select|textarea|keygen)/i;
+
+ function buildParams( prefix, obj, traditional, add ) {
+ var name;
+
+ if ( jQuery.isArray( obj ) ) {
+ // Serialize array item.
+ jQuery.each( obj, function( i, v ) {
+ if ( traditional || rbracket.test( prefix ) ) {
+ // Treat each array item as a scalar.
+ add( prefix, v );
+
+ } else {
+ // Item is non-scalar (array or object), encode its numeric index.
+ buildParams( prefix + "[" + ( typeof v === "object" ? i : "" ) + "]", v, traditional, add );
+ }
+ });
+
+ } else if ( !traditional && jQuery.type( obj ) === "object" ) {
+ // Serialize object item.
+ for ( name in obj ) {
+ buildParams( prefix + "[" + name + "]", obj[ name ], traditional, add );
+ }
+
+ } else {
+ // Serialize scalar item.
+ add( prefix, obj );
+ }
+ }
+
+ // Serialize an array of form elements or a set of
+ // key/values into a query string
+ jQuery.param = function( a, traditional ) {
+ var prefix,
+ s = [],
+ add = function( key, value ) {
+ // If value is a function, invoke it and return its value
+ value = jQuery.isFunction( value ) ? value() : ( value == null ? "" : value );
+ s[ s.length ] = encodeURIComponent( key ) + "=" + encodeURIComponent( value );
+ };
+
+ // Set traditional to true for jQuery <= 1.3.2 behavior.
+ if ( traditional === undefined ) {
+ traditional = jQuery.ajaxSettings && jQuery.ajaxSettings.traditional;
+ }
+
+ // If an array was passed in, assume that it is an array of form elements.
+ if ( jQuery.isArray( a ) || ( a.jquery && !jQuery.isPlainObject( a ) ) ) {
+ // Serialize the form elements
+ jQuery.each( a, function() {
+ add( this.name, this.value );
+ });
+
+ } else {
+ // If traditional, encode the "old" way (the way 1.3.2 or older
+ // did it), otherwise encode params recursively.
+ for ( prefix in a ) {
+ buildParams( prefix, a[ prefix ], traditional, add );
+ }
+ }
+
+ // Return the resulting serialization
+ return s.join( "&" ).replace( r20, "+" );
+ };
+
+ jQuery.fn.extend({
+ serialize: function() {
+ return jQuery.param( this.serializeArray() );
+ },
+ serializeArray: function() {
+ return this.map(function() {
+ // Can add propHook for "elements" to filter or add form elements
+ var elements = jQuery.prop( this, "elements" );
+ return elements ? jQuery.makeArray( elements ) : this;
+ })
+ .filter(function() {
+ var type = this.type;
+
+ // Use .is( ":disabled" ) so that fieldset[disabled] works
+ return this.name && !jQuery( this ).is( ":disabled" ) &&
+ rsubmittable.test( this.nodeName ) && !rsubmitterTypes.test( type ) &&
+ ( this.checked || !rcheckableType.test( type ) );
+ })
+ .map(function( i, elem ) {
+ var val = jQuery( this ).val();
+
+ return val == null ?
+ null :
+ jQuery.isArray( val ) ?
+ jQuery.map( val, function( val ) {
+ return { name: elem.name, value: val.replace( rCRLF, "\r\n" ) };
+ }) :
+ { name: elem.name, value: val.replace( rCRLF, "\r\n" ) };
+ }).get();
+ }
+ });
+
+
+ jQuery.ajaxSettings.xhr = function() {
+ try {
+ return new XMLHttpRequest();
+ } catch( e ) {}
+ };
+
+ var xhrId = 0,
+ xhrCallbacks = {},
+ xhrSuccessStatus = {
+ // file protocol always yields status code 0, assume 200
+ 0: 200,
+ // Support: IE9
+ // #1450: sometimes IE returns 1223 when it should be 204
+ 1223: 204
+ },
+ xhrSupported = jQuery.ajaxSettings.xhr();
+
+ // Support: IE9
+ // Open requests must be manually aborted on unload (#5280)
+ // See https://support.microsoft.com/kb/2856746 for more info
+ if ( window.attachEvent ) {
+ window.attachEvent( "onunload", function() {
+ for ( var key in xhrCallbacks ) {
+ xhrCallbacks[ key ]();
+ }
+ });
+ }
+
+ support.cors = !!xhrSupported && ( "withCredentials" in xhrSupported );
+ support.ajax = xhrSupported = !!xhrSupported;
+
+ jQuery.ajaxTransport(function( options ) {
+ var callback;
+
+ // Cross domain only allowed if supported through XMLHttpRequest
+ if ( support.cors || xhrSupported && !options.crossDomain ) {
+ return {
+ send: function( headers, complete ) {
+ var i,
+ xhr = options.xhr(),
+ id = ++xhrId;
+
+ xhr.open( options.type, options.url, options.async, options.username, options.password );
+
+ // Apply custom fields if provided
+ if ( options.xhrFields ) {
+ for ( i in options.xhrFields ) {
+ xhr[ i ] = options.xhrFields[ i ];
+ }
+ }
+
+ // Override mime type if needed
+ if ( options.mimeType && xhr.overrideMimeType ) {
+ xhr.overrideMimeType( options.mimeType );
+ }
+
+ // X-Requested-With header
+ // For cross-domain requests, seeing as conditions for a preflight are
+ // akin to a jigsaw puzzle, we simply never set it to be sure.
+ // (it can always be set on a per-request basis or even using ajaxSetup)
+ // For same-domain requests, won't change header if already provided.
+ if ( !options.crossDomain && !headers["X-Requested-With"] ) {
+ headers["X-Requested-With"] = "XMLHttpRequest";
+ }
+
+ // Set headers
+ for ( i in headers ) {
+ xhr.setRequestHeader( i, headers[ i ] );
+ }
+
+ // Callback
+ callback = function( type ) {
+ return function() {
+ if ( callback ) {
+ delete xhrCallbacks[ id ];
+ callback = xhr.onload = xhr.onerror = null;
+
+ if ( type === "abort" ) {
+ xhr.abort();
+ } else if ( type === "error" ) {
+ complete(
+ // file: protocol always yields status 0; see #8605, #14207
+ xhr.status,
+ xhr.statusText
+ );
+ } else {
+ complete(
+ xhrSuccessStatus[ xhr.status ] || xhr.status,
+ xhr.statusText,
+ // Support: IE9
+ // Accessing binary-data responseText throws an exception
+ // (#11426)
+ typeof xhr.responseText === "string" ? {
+ text: xhr.responseText
+ } : undefined,
+ xhr.getAllResponseHeaders()
+ );
+ }
+ }
+ };
+ };
+
+ // Listen to events
+ xhr.onload = callback();
+ xhr.onerror = callback("error");
+
+ // Create the abort callback
+ callback = xhrCallbacks[ id ] = callback("abort");
+
+ try {
+ // Do send the request (this may raise an exception)
+ xhr.send( options.hasContent && options.data || null );
+ } catch ( e ) {
+ // #14683: Only rethrow if this hasn't been notified as an error yet
+ if ( callback ) {
+ throw e;
+ }
+ }
+ },
+
+ abort: function() {
+ if ( callback ) {
+ callback();
+ }
+ }
+ };
+ }
+ });
+
+
+
+
+ // Install script dataType
+ jQuery.ajaxSetup({
+ accepts: {
+ script: "text/javascript, application/javascript, application/ecmascript, application/x-ecmascript"
+ },
+ contents: {
+ script: /(?:java|ecma)script/
+ },
+ converters: {
+ "text script": function( text ) {
+ jQuery.globalEval( text );
+ return text;
+ }
+ }
+ });
+
+ // Handle cache's special case and crossDomain
+ jQuery.ajaxPrefilter( "script", function( s ) {
+ if ( s.cache === undefined ) {
+ s.cache = false;
+ }
+ if ( s.crossDomain ) {
+ s.type = "GET";
+ }
+ });
+
+ // Bind script tag hack transport
+ jQuery.ajaxTransport( "script", function( s ) {
+ // This transport only deals with cross domain requests
+ if ( s.crossDomain ) {
+ var script, callback;
+ return {
+ send: function( _, complete ) {
+ script = jQuery("
+
+
+
+
+
+
+
+
+
+
+
+
+
+Alerts
+
+
+
+
+
+
+
+
+
+
+
+
+
+
<UI . SuccessAlert > success< /UI.SuccessAlert>
+
+
+ Copy
+
+
+
+
+
+
+
+
+
+
+
+
<UI . InfoAlert > info< /UI.InfoAlert>
+
+
+ Copy
+
+
+
+
+
+
+
+
+
+
+
+
<UI . WarningAlert > warning< /UI.WarningAlert>
+
+
+ Copy
+
+
+
+
+
+
+
+
+
+
+
+
<UI . ErrorAlert > error< /UI.ErrorAlert>
+
+
+ Copy
+
+
+
+
+
+
+
Dismissable
+Add the dismissable property to add a close button to the alert.
+
+
+
+
+
+
+
+
+
+
+
<UI . SuccessAlert dismissable > success< /UI.SuccessAlert>
+
+
+ Copy
+
+
+
+
+
+
+
If you want a callback to be called when the close button is
+clicked, set the dismissable property to that callback.
+
+
+
var callback = function() {
+ alert('Dismissed!');
+};
+
+
+ Copy
+
+
+
+
+
+
+
+
+
+
+
+
+
<UI . InfoAlert dismissable= {callback} > with callback< /UI.InfoAlert>
+
+
+ Copy
+
+
+
+
+
+
+
Alerts with Icons
+If you want an icon to be displayed, set the withIcon property.
+
+
+
+
+
+
+
+
+
+
+
<UI . SuccessAlert withIcon > success< /UI.SuccessAlert>
+
+
+ Copy
+
+
+
+
+
+
+
+
+
+
+
+
<UI . InfoAlert withIcon > info< /UI.InfoAlert>
+
+
+ Copy
+
+
+
+
+
+
+
+
+
+
+
+
<UI . WarningAlert withIcon > warning< /UI.WarningAlert>
+
+
+ Copy
+
+
+
+
+
+
+
+
+
+
+
+
<UI . ErrorAlert withIcon > error< /UI.ErrorAlert>
+
+
+ Copy
+
+
+
+
+
+
+
Here's a dismissable alert with an icon
+
+
+
+
+
+
+
+
+
+
+
<UI . WarningAlert dismissable withIcon > warning< /UI.WarningAlert>
+
+
+ Copy
+
+
+
+
+
+
+
Back to Top
+You can use this component to scroll to the top of a page.
The button will be fixed to the bottom right hand corner of the page.
You can place the link anywhere in your markup, but best practices are either towards the top or bottom of your markup.
+
+
+Buttons use the button tag by default. If you'd like a link rather than a button, simply add an href attribute.
+
+
+
+
+
+
+
+
+
+
+
<UI . DefaultButton href= "http://example.com" >
+ Default
+< /UI.DefaultButton>
+
+
+ Copy
+
+
+
+
+
+
+
To make a button large, set the large property to true.
+
+
+
+
+
+
+
+
+
+
+
<UI . HighlightButton large= {true} >
+ Big Button
+< /UI.HighlightButton>
+
+
+ Copy
+
+
+
+
+
+
+
To make a button full-width, set the block property to true.
+
+
+
+
<UI . DangerButton block= {true} href= "http://i.imgur.com/oq2qkUN.gif" >
+ Danger Zone
+< /UI.DangerButton>
+
+
+ Copy
+
+
+
Specific button types.
+
+
+
+
+
+
+
+
+
+
+
<UI . DefaultButton >
+ Default
+< /UI.DefaultButton>
+
+
+ Copy
+
+
+
+
+
+
+
+
+
+
+
+
<UI . DefaultAltButton >
+ Default alternate
+< /UI.DefaultAltButton>
+
+
+ Copy
+
+
+
+
+
+
+
+
+
+
+
+
<UI . PrimaryButton >
+ Primary
+< /UI.PrimaryButton>
+
+
+ Copy
+
+
+
+
+
+
+
+
+
+
+
+
<UI . LowlightButton >
+ Lowlight
+< /UI.LowlightButton>
+
+
+ Copy
+
+
+
+
+
+
+
+
+
+
+
+
<UI . DangerButton >
+ Danger
+< /UI.DangerButton>
+
+
+ Copy
+
+
+
+
+
+
+
+
+
+
+
+
<UI . HighlightButton >
+ Highlight
+< /UI.HighlightButton>
+
+
+ Copy
+
+
+
+
+
+
+
+
+
+
+
+
<UI . HighlightAltButton >
+ Highlight alternate
+< /UI.HighlightAltButton>
+
+
+ Copy
+
+
+
+
+
+
+
The base button renderer. You won't really interact with this directly.
+
+
+
+
+
+
+
+
+
+
+
<UI . UIButton >
+ I'm a button
+< /UI.UIButton>
+
+
+ Copy
+
+
+
+
+
+
+
Collapse
+
+
+Collapse components are implementations of the Accordion style. In
+all Collapse component variations, the header prop describes the text
+of the clickable region to toggle the expand/collapse states.
+Alt
+This is a basic collapse with an +/- icon in the clickable region.
+
+
+
+
<UI . AltCollapse header= "Without Arrows" >
+ <p> Content!</p>
+ <p> Content!</p>
+ <p> Content!</p>
+ <p> Content!</p>
+ <p> Content!</p>
+< /UI.AltCollapse>
+
+
+ Copy
+
+
+
Arrows
+This is a basic collapse with an arrow icon in the clickable region.
+
+
+
+
<UI . Collapse header= "With Arrows" >
+ <p> Content!</p>
+ <p> Content!</p>
+ <p> Content!</p>
+ <p> Content!</p>
+ <p> Content!</p>
+< /UI.Collapse>
+
+
+ Copy
+
+
+
Base
+This is a basic collapse with no additional styles.
+
+
+
+
<UI . BaseCollapse header= "Panel 1" >
+ <p> Panel 1 content</p>
+ <p> Panel 1 content</p>
+ <p> Panel 1 content</p>
+ <p> Panel 1 content</p>
+ <p> Panel 1 content</p>
+ <p> Panel 1 content</p>
+ <p> Panel 1 content</p>
+ <p> Panel 1 content</p>
+ <p> Panel 1 content</p>
+ <p> Panel 1 content</p>
+< /UI.BaseCollapse>
+
+
+ Copy
+
+
+
Adding Dividers
+To add a divider between the clickable region and the expanded content region,
+simply set the divider property to be true.
+
+
+
+
<UI . Collapse header= "With Divider" divider >
+ <p> Content!</p>
+ <p> Content!</p>
+ <p> Content!</p>
+ <p> Content!</p>
+ <p> Content!</p>
+< /UI.Collapse>
+
+
+ Copy
+
+
+
Dividers
+Dividers draw horizontal lines between different content groupings.
+
+
+
+
+
+
+
+
+
+
+ Copy
+
+
+
+
+
+
+
+
+
+
+
+
<UI . Divider size= "large" />
+
+
+ Copy
+
+
+
+
+
+
+
On a dark background, use these inverse dividers
+
+
+
+
+
+
+
+
+
+
+
<div className= 'contrast-bar' >
+ <UI . InverseDivider />
+</div>
+
+
+ Copy
+
+
+
+
+
+
+
+
+
+
+
+
<div className= 'contrast-bar' >
+ <UI . InverseDivider size= 'large' />
+</div>
+
+
+ Copy
+
+
+
+
+
+
+
Dropdowns
+This is the basic bootstrap dropdown:
+
+
+
+
+
+
+
+
+
+
+
<UI . Dropdown title= 'DropDown' >
+ <UI . DropdownItem href= "http://media.giphy.com/media/13py6c5BSnBkic/giphy.gif" > Booyeah< /UI.DropdownItem>
+ <UI . DropdownItem divider />
+ <UI . DropdownItem href= "http://media.giphy.com/media/TlK63EQERmiAVzMEgO4/giphy.gif" > Adorable< /UI.DropdownItem>
+< /UI.Dropdown>
+
+
+ Copy
+
+
+
+
+
+
+
Here are all the different dropdown styles:
+
+
+
+
+
+
+
+
+
+
+
<UI . LinkDropdown title= 'Link' >
+ <UI . DropdownItem href= "http://media.giphy.com/media/TlK63EQERmiAVzMEgO4/giphy.gif" > Adorable< /UI.DropdownItem>
+< /UI.LinkDropdown>
+
+
+ Copy
+
+
+
+
+
+
+
+
+
+
+
+
<UI . DefaultAltDropdown title= 'Default Alt' >
+ <UI . DropdownItem href= "http://media.giphy.com/media/TlK63EQERmiAVzMEgO4/giphy.gif" > Adorable< /UI.DropdownItem>
+< /UI.DefaultAltDropdown>
+
+
+ Copy
+
+
+
+
+
+
+
+
+
+
+
+
<UI . PrimaryDropdown title= 'Primary' >
+ <UI . DropdownItem href= "http://media.giphy.com/media/TlK63EQERmiAVzMEgO4/giphy.gif" > Adorable< /UI.DropdownItem>
+< /UI.PrimaryDropdown>
+
+
+ Copy
+
+
+
+
+
+
+
+
+
+
+
+
<UI . LowlightDropdown title= 'Lowlight' >
+ <UI . DropdownItem href= "http://media.giphy.com/media/TlK63EQERmiAVzMEgO4/giphy.gif" > Adorable< /UI.DropdownItem>
+< /UI.LowlightDropdown>
+
+
+ Copy
+
+
+
+
+
+
+
+
+
+
+
+
<UI . DangerDropdown title= 'Danger' >
+ <UI . DropdownItem href= "http://media.giphy.com/media/TlK63EQERmiAVzMEgO4/giphy.gif" > Adorable< /UI.DropdownItem>
+< /UI.DangerDropdown>
+
+
+ Copy
+
+
+
+
+
+
+
+
+
+
+
+
<UI . HighlightDropdown title= 'Highlight' >
+ <UI . DropdownItem href= "http://media.giphy.com/media/TlK63EQERmiAVzMEgO4/giphy.gif" > Adorable< /UI.DropdownItem>
+< /UI.HighlightDropdown>
+
+
+ Copy
+
+
+
+
+
+
+
+
+
+
+
+
<UI . HighlightAltDropdown title= 'Highlight Alt' >
+ <UI . DropdownItem href= "http://media.giphy.com/media/TlK63EQERmiAVzMEgO4/giphy.gif" > Adorable< /UI.DropdownItem>
+< /UI.HighlightAltDropdown>
+
+
+ Copy
+
+
+
+
+
+
+
If you want to customize the dropdown button, you can add modifier classes to it
+using the buttonClassName property:
+
+
+
+
<UI . Dropdown title= 'DropDown' buttonClassName= 'type-neutral-1 em-alt type-sm' >
+ <UI . DropdownItem href= "http://media.giphy.com/media/13py6c5BSnBkic/giphy.gif" > Booyeah< /UI.DropdownItem>
+ <UI . DropdownItem divider />
+ <UI . DropdownItem href= "http://media.giphy.com/media/TlK63EQERmiAVzMEgO4/giphy.gif" > Adorable< /UI.DropdownItem>
+< /UI.Dropdown>
+
+
+ Copy
+
+
+
Expander
+Expanders are collapsable content areas which are unlike their accordion counterparts in that they do not require a
+parent collapse and child content structure. This means you can trigger the expanding and collapsing content from somewhere
+else within the DOM.
The expander pattern requires two components -- the ExpanderContent and the ExpanderTrigger. You will need to implement a
+component which handles the communication between these two components so the Trigger knows which Content to toggle. This is done
+through the setTarget method exposed on the ExpanderTrigger.
See the example below for how to use these components in your own application.
+
+
+
var MoreInfo = React.createClass({
+ componentDidMount: function () {
+ this.refs.infoTrigger.setTarget(this.refs.infoContent);
+ },
+ render: function() {
+ return (
+ <main>
+ <UI . ExpanderContent ref= "infoContent" >
+ <p className= 'h1 bg-neutral-2 type-neutral-9' > Hamburgers</p>
+ < /UI.ExpanderContent>
+ <br/>
+ <UI . ExpanderTrigger ref= "infoTrigger" >
+ <button className= 'btn btn-highlight' > Toggle Content</button>
+ < /UI.ExpanderTrigger>
+ </main>
+ )
+ }
+});
+
+
+ Copy
+
+
Using React radio buttons in a form is fairly straightforward.
+
+
+
+
<UI . RadioGroup name= "field_name" >
+ <UI . Radio value= "firstValue" > You could click this radio button< /UI.Radio>
+ <UI . Radio value= "SecondValue" defaultChecked > This is also a radio button< /UI.Radio>
+ < /UI.RadioGroup>
+
+
+ Copy
+
+
+
In this case, the name attached to RadioGroup will be applied to all of Radio children.
Additionally, special behaviors can be added to the onChange event handler
+exposed by radio groups. In this example, additional form controls are displayed
+when the user selects the third radio button.
Similar to the name property, the onChange handlers is passed down to all child components.
+
+
+
var MyComponent = React.createClass({
+ getInitialState: function() { return {selection: null}; },
+
+ change: function(value) {
+ this.setState({selection: value});
+ },
+
+ render: function() {
+ return (
+ <form role= "form" className= "form-horizontal" >
+ <div className= "form-group" >
+ <UI . Col md= {3} >
+ <label> Options</label>
+ < /UI.Col>
+ <UI . Col md= {21} >
+ <UI . RadioGroup name= "stuff" onChange= {this.change} >
+ <UI . Radio value= "others" > Others< /UI.Radio>
+ <UI . Radio value= "others1" defaultChecked > More others< /UI.Radio>
+ <UI . Radio value= "special" > Click for more!< /UI.Radio>
+ < /UI.RadioGroup>
+ < /UI.Col>
+ </div>
+ {this.state.selection === 'special' && <div className= "form-group" >
+ <UI . Col md= {3} >
+ <label> Stuff that appears</label>
+ < /UI.Col>
+ <UI . Col md= {21} >
+ <label htmlFor= "exampleInputEmail1" > Email address</label>
+ <input type= "email" className= "form-control" id= "exampleInputEmail1" placeholder= "Enter email" />
+ < /UI.Col>
+ </div> }
+ </form>
+ );
+ }
+});
+
+
+ Copy
+
+
A SearchInput component can be used on its own as an input. It accepts standard
+text input properties (such as placeholder).
+
+
+
+
<UI . SearchInput placeholder= "Search..." />
+
+
+ Copy
+
+
+
To demonstrate how to use a SearchInput in a more complex example, let's say
+we want to filter a list based on the user's input. We can accomplish this
+by creating a stateful component which is composed of the SearchInput and the
+list to filter.
+
+
+
var FilteringSearchExample = React.createClass({
+ getInitialState: function () {
+ return {
+ filter: "",
+ items: ['Apple', 'Banana', 'Orange'] // Defaults in the event the server is down
+ }
+ },
+
+ componentDidMount: function () {
+ var self = this;
+
+ $.getJSON('http://pivotal-enchilada.cfapps.io/list', function (data) {
+ self.setState({ items: data });
+ });
+ },
+
+ updateFilter: function (event) {
+ this.setState({ filter: event.target.value });
+ },
+
+ render: function () {
+ var filterRegex = new RegExp(this.state.filter, "i");
+ var displayedItems = _.filter(this.state.items, function (item) {
+ return item.match(filterRegex);
+ });
+
+ var listItems = _.map(displayedItems, function (item) {
+ return (<li key= {item} > {item}</li> )
+ });
+
+ return (
+ <div>
+ <UI . SearchInput placeholder= 'Filter by...' onChange= {this.updateFilter}/ >
+ <ul>
+ {listItems}
+ </ul>
+ </div>
+ )
+ }
+});
+
+
+ Copy
+
+
+
+
+
+
<FilteringSearchExample />
+
+
+ Copy
+
+
+
Grids
+
+
+The react grids depend on React-Bootstrap . Check out their docs
+for advanced stuff like pushing, pulling, and offsets.
+Examples
+
+
+
+
+
<div>
+ <UI . Row className= "grid-show" >
+ <UI . Col md= {2} > < /UI.Col>
+ <UI . Col md= {2} > < /UI.Col>
+ <UI . Col md= {2} > < /UI.Col>
+ <UI . Col md= {2} > < /UI.Col>
+ <UI . Col md= {2} > < /UI.Col>
+ <UI . Col md= {2} > < /UI.Col>
+ <UI . Col md= {2} > < /UI.Col>
+ <UI . Col md= {2} > < /UI.Col>
+ <UI . Col md= {2} > < /UI.Col>
+ <UI . Col md= {2} > < /UI.Col>
+ <UI . Col md= {2} > < /UI.Col>
+ <UI . Col md= {2} > < /UI.Col>
+ < /UI.Row>
+
+ <UI . Row className= "grid-show" >
+ <UI . Col md= {16} > < /UI.Col>
+ <UI . Col md= {8} > < /UI.Col>
+ < /UI.Row>
+
+ <UI . Row className= "grid-show" >
+ <UI . Col md= {8} > < /UI.Col>
+ <UI . Col md= {8} > < /UI.Col>
+ <UI . Col md= {8} > < /UI.Col>
+ < /UI.Row>
+
+ <UI . Row className= "grid-show" >
+ <UI . Col md= {12} > < /UI.Col>
+ <UI . Col md= {12} > < /UI.Col>
+ < /UI.Row>
+</div>
+
+
+ Copy
+
+
+
Example: Mobile and Desktop
+Don't want your columns to simply stack in smaller devices?
+Use the extra small and medium device grid classes by adding .col-xs-* .col-md-* to your columns.
+See the example below for a better idea of how it all works.
+
+
+
+
<div>
+ <UI . Row className= "grid-show" >
+ <UI . Col xs= {24} md= {16} > < /UI.Col>
+ <UI . Col xs= {12} md= {8} > < /UI.Col>
+ < /UI.Row>
+
+ <UI . Row className= "grid-show" >
+ <UI . Col xs= {12} md= {8} > < /UI.Col>
+ <UI . Col xs= {12} md= {8} > < /UI.Col>
+ <UI . Col xs= {12} md= {8} > < /UI.Col>
+ < /UI.Row>
+
+ <UI . Row className= "grid-show" >
+ <UI . Col xs= {12} > < /UI.Col>
+ <UI . Col xs= {12} > < /UI.Col>
+ < /UI.Row>
+</div>
+
+
+ Copy
+
+
+
Gutter Sizes
+
+
+
+
+
<div>
+ <UI . Row className= "grid-show" >
+ <UI . Col md= {12} > < /UI.Col>
+ <UI . Col md= {12} > < /UI.Col>
+ < /UI.Row>
+
+ <UI . Row className= "grid-show" gutter= "md" >
+ <UI . Col md= {12} > < /UI.Col>
+ <UI . Col md= {12} > < /UI.Col>
+ < /UI.Row>
+
+ <UI . Row className= "grid-show" gutter= "sm" >
+ <UI . Col md= {12} > < /UI.Col>
+ <UI . Col md= {12} > < /UI.Col>
+ < /UI.Row>
+</div>
+
+
+ Copy
+
+
+
Iconography
+
+
+We use Font Awesome .
+Specify the icon by changing the name. The name is the font-awesome class sans the fa-.
+To spin the icon, add spin to the Icon.
+
+
+
+
+
+
+
+
+
+
+
<UI . Icon name= "plus" />
+
+
+ Copy
+
+
+
+
+
+
+
+
+
+
+
+
<UI . Icon spin name= "angellist" />
+
+
+ Copy
+
+
+
+
+
+
+
React Iconography Sizing
+Pass in any PUI typography size modifier in the size attribute.
+These are useful if you want your icon to match the size of a text element.
+
+
+
+
+
+
+
+
+
+
+
<UI . Icon name= "plus" size= "title" />
+
+
+ Copy
+
+
+
+
+
+
+
+
+
+
+
+
<UI . Icon name= "plus" size= "h1" />
+
+
+ Copy
+
+
+
+
+
+
+
+
+
+
+
+
<UI . Icon name= "plus" size= "h2" />
+
+
+ Copy
+
+
+
+
+
+
+
+
+
+
+
+
<UI . Icon name= "plus" size= "h3" />
+
+
+ Copy
+
+
+
+
+
+
+
+
+
+
+
+
<UI . Icon name= "plus" size= "h4" />
+
+
+ Copy
+
+
+
+
+
+
+
+
+
+
+
+
<UI . Icon name= "plus" size= "h5" />
+
+
+ Copy
+
+
+
+
+
+
+
+
+
+
+
+
<UI . Icon name= "plus" size= "h6" />
+
+
+ Copy
+
+
+
+
+
+
+
+
+
+
+
+
<UI . Icon name= "plus" size= "sm" />
+
+
+ Copy
+
+
+
+
+
+
+
+
+
+
+
+
<UI . Icon name= "plus" size= "xs" />
+
+
+ Copy
+
+
+
+
+
+
+
You can also pass in any FontAwesome size modifier as well.
+
+
+
+
+
+
+
+
+
+
+
<UI . Icon name= "plus" size= "lg" />
+
+
+ Copy
+
+
+
+
+
+
+
+
+
+
+
+
<UI . Icon name= "plus" size= "2x" />
+
+
+ Copy
+
+
+
+
+
+
+
+
+
+
+
+
<UI . Icon name= "plus" size= "3x" />
+
+
+ Copy
+
+
+
+
+
+
+
+
+
+
+
+
<UI . Icon name= "plus" size= "4x" />
+
+
+ Copy
+
+
+
+
+
+
+
+
+
+
+
+
<UI . Icon name= "plus" size= "5x" />
+
+
+ Copy
+
+
+
+
+
+
+
Images
+Images in react can be responsive and/or wrapped in a link.
+
+
+
+
<UI . Image src= "http://placehold.it/1000x100" responsive= {true} href= "http://google.com" />
+
+
+ Copy
+
+
+
Labels
+Labels are a straightforward implementation of the Label style.
Labels can be used on their own:
+
+
+
+
<UI . Label > yeah< /UI.Label>
+
+
+ Copy
+
+
+
Labels used within an element which already has font modifier styles will use the parents' styling. For example:
+
+
+
+
<UI . DefaultH3 >
+ Now the label is in a typography component <UI . Label > yeah< /UI.Label>
+< /UI.DefaultH3>
+
+
+ Copy
+
+
+
Lists
+
+
+
+Addable
+Here's an example of how you might write an addable list component. Transitions are added to each list item through componentWillEnter.
+If you wish to save the new item in your database, you should do so in the change function, before setting state.
+
+
+
var ReactTransitionGroup = React.addons.TransitionGroup;
+
+var AddableListItem = React.createClass({
+ componentWillEnter: function(done) {
+ this.$el = $(this.getDOMNode());
+ this.$el.addClass("new-enter");
+ done();
+ },
+
+ render: function(){
+ return (
+ <UI . ListItem {... this . props } > {this.props.children}< /UI.ListItem>
+ );
+ }
+});
+
+var AddableList = React.createClass({
+ getInitialState: function() {
+ return {
+ items: ['one','two','three']
+ };
+ },
+
+ change: function() {
+ var newItems = this.state.items.concat([prompt('Enter some text')]);
+ this.setState({items: newItems});
+ },
+
+ render: function() {
+ var items = _.map(this.state.items, function(item, key) {
+ return (
+ <AddableListItem key= {key+item} >
+ {item}
+ </AddableListItem>
+ );
+ });
+ return (
+ <div>
+ <ReactTransitionGroup component= {UI.StepList} transitionName= 'new' >
+ {items}
+ </ReactTransitionGroup>
+ <UI . HighlightButton onClick= {this.change} > Click to Add Item< /UI.HighlightButton>
+ </div>
+ );
+ }
+});
+
+
+ Copy
+
+
Breadcrumb
+
+
+
+
+
<UI . BreadcrumbList >
+ <UI . ListItem ><a href= "#" > Item 1</a> < /UI.ListItem>
+ <UI . ListItem ><a href= "#" > Item 2</a> < /UI.ListItem>
+ <UI . ListItem className= "current" ><span> Item 3</span> < /UI.ListItem>
+< /UI.BreadcrumbList>
+
+
+ Copy
+
+
+
Cards
+=D
+Checked
+
+
+
+
+
<UI . UnorderedList checked >
+ <UI . ListItem > Item 1< /UI.ListItem>
+ <UI . ListItem > Item 2< /UI.ListItem>
+ <UI . ListItem > Item 3< /UI.ListItem>
+< /UI.UnorderedList>
+
+
+ Copy
+
+
+
Draggable
+Creates a draggable list.
The property onDrop is a callback when a drop event has completed. Use this
+if you need to make an API call to update the order of some elements.
+
+
+
var draggableListDropCallback = function(data) {
+ alert('New item indices order: ' + data);
+};
+
+
+ Copy
+
+
+
+
+
+
<UI . DraggableList onDrop= {draggableListDropCallback} >
+ <UI . DraggableListItem >
+ Get me out of here!
+ < /UI.DraggableListItem>
+
+ <UI . DraggableListItem >
+ LOL
+ < /UI.DraggableListItem>
+
+ <UI . DraggableListItem >
+ Can't stop
+ < /UI.DraggableListItem>
+< /UI.DraggableList>
+
+
+ Copy
+
+
+
Group Inverse
+
+
+
+
+
<UI . GroupListInverse >
+ <UI . ListItem > Item 1< /UI.ListItem>
+ <UI . ListItem > Item 2< /UI.ListItem>
+ <UI . ListItem > Item 3< /UI.ListItem>
+< /UI.GroupListInverse>
+
+
+ Copy
+
+
+
Group
+
+
+
+
+
<UI . GroupList >
+ <UI . ListItem > Item 1< /UI.ListItem>
+ <UI . ListItem > Item 2< /UI.ListItem>
+ <UI . ListItem > Item 3< /UI.ListItem>
+< /UI.GroupList>
+
+
+ Copy
+
+
+
Inline Divider
+
+
+
+
+
+
+
+
+
+
+
+
<UI . InlineList divider >
+ <UI . ListItem > Item 1< /UI.ListItem>
+ <UI . ListItem > Item 2< /UI.ListItem>
+ <UI . ListItem > Item 3< /UI.ListItem>
+< /UI.InlineList>
+
+
+ Copy
+
+
+
+
+
+
+
Inline
+
+
+
+
+
+
+
+
+
+
+
+
<UI . InlineList >
+ <UI . ListItem > Item 1< /UI.ListItem>
+ <UI . ListItem > Item 2< /UI.ListItem>
+ <UI . ListItem > Item 3< /UI.ListItem>
+< /UI.InlineList>
+
+
+ Copy
+
+
+
+
+
+
+
Ordered
+
+
+
+
+
+
+
+
+
+
+
+
<UI . OrderedList >
+ <UI . ListItem > Item 1< /UI.ListItem>
+ <UI . ListItem > Item 2< /UI.ListItem>
+ <UI . ListItem > Item 3< /UI.ListItem>
+< /UI.OrderedList>
+
+
+ Copy
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
<UI . OrderedList unstyled >
+ <UI . ListItem > Item 1< /UI.ListItem>
+ <UI . ListItem > Item 2< /UI.ListItem>
+ <UI . ListItem > Item 3< /UI.ListItem>
+< /UI.OrderedList>
+
+
+ Copy
+
+
+
+
+
+
+
Configuring Spacing
+List Spacing can be changed setting the size of the spacing property.
+Options
+Values
+Pixels
+
+
+nnone
+0px
+
+
+ssmall
+5px
+
+
+mmedium
+7px
+
+
+llarge
+10px
+
+
+xlextra large
+21px
+
+
+
+
+
+
<UI . StepList spacing= "n" >
+ <UI . ListItem > Item 1< /UI.ListItem>
+ <UI . ListItem > Item 2< /UI.ListItem>
+ <UI . ListItem className= "current" > Item 3< /UI.ListItem>
+< /UI.StepList>
+
+
+ Copy
+
+
+
+
+
+
+
<UI . UnorderedList spacing= "xl" >
+ <UI . ListItem > Item 1< /UI.ListItem>
+ <UI . ListItem > Item 2< /UI.ListItem>
+ <UI . ListItem className= "current" > Item 3< /UI.ListItem>
+< /UI.UnorderedList>
+
+
+ Copy
+
+
+
Steps
+
+
+
+
+
<UI . StepList >
+ <UI . ListItem > Item 1< /UI.ListItem>
+ <UI . ListItem > Item 2< /UI.ListItem>
+ <UI . ListItem className= "current" > Item 3< /UI.ListItem>
+< /UI.StepList>
+
+
+ Copy
+
+
+
Unordered
+
+
+
+
+
+
+
+
+
+
+
+
<UI . UnorderedList >
+ <UI . ListItem > feep< /UI.ListItem>
+ <UI . ListItem > fop< /UI.ListItem>
+ <UI . ListItem > meep< /UI.ListItem>
+< /UI.UnorderedList>
+
+
+ Copy
+
+
+
+
+
+
+
Unstyled
+
+
+
+
+
+
+
+
+
+
+
+
<UI . UnorderedList unstyled >
+ <UI . ListItem > Item 1< /UI.ListItem>
+ <UI . ListItem > Item 2< /UI.ListItem>
+ <UI . ListItem > Item 3< /UI.ListItem>
+< /UI.UnorderedList>
+
+
+ Copy
+
+
+
+
+
+
+
Vertical Divider
+
+
+
+
+
+General media object modifiers
+
+Media Modifiers
+Options
+Description
+
+
+bodyAlignmenttop (default), "middle", "bottom"
+Vertical alignment of the body (used for large images with small content next to it, usually centered)
+
+
+stackSize"xsmall", "small", "medium", "large"
+At what breakpoint should the media object stack
+
+
The images or other media can be aligned top, middle, or bottom. The default is top aligned.
The base button renderer. You won't really interact with this directly.
+
+
+
var mediaBasicImage = <UI . Image src= 'http://placehold.it/50x50' /> ;
+var mediaBasicLinkedImage = <UI . Image src= 'http://placehold.it/50x50' href= "http://google.com" /> ;
+
+
+ Copy
+
+
+
+
+
+
+
+
+
+
+
+
+
<UI . Media
+ leftImage= {mediaBasicImage} >
+ left media
+< /UI.Media>
+
+
+ Copy
+
+
+
+
+
+
+
+
+
+
+
+
<UI . Media
+ rightImage= {mediaBasicLinkedImage}
+ vAlign= 'middle' >
+ right media
+< /UI.Media>
+
+
+ Copy
+
+
+
+
+
+
+
+
+
+
+
+
<UI . Media
+ leftImage= {mediaBasicImage}
+ rightImage= {mediaBasicImage}
+ vAlign= 'middle'
+ stackSize= 'medium' >
+ left and right media
+< /UI.Media>
+
+
+ Copy
+
+
+
+
+
+
+
+
+
var mediaAlignmentImage = <UI . Image href= 'http://www.google.com' src= 'http://placehold.it/50x50' /> ;
+
+
+ Copy
+
+
+
+
+
+
<div>
+ <UI . Media leftImage= {mediaAlignmentImage} >
+ top aligned image - 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. 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.
+ < /UI.Media>
+
+ <UI . Flag leftImage= {mediaAlignmentImage} >
+ middle aligned image - 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. 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.
+ < /UI.Flag>
+
+ <UI . Flag leftImage= {mediaAlignmentImage} >
+ middle aligned and middle body (for short text and big images)
+ < /UI.Flag>
+
+ <UI . Media
+ leftImage= {mediaAlignmentImage}
+ vAlign= 'bottom' >
+ bottom aligned - This is rarely, if ever, used. 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. 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.
+ < /UI.Media>
+</div>
+
+
+ Copy
+
+
+
Media spacing can be added to the left and right medias. If no spacing is defined, it defaults to large.
+
+
+
var mediaSpacingImage = <UI . Image href= 'http://www.google.com' src= 'http://placehold.it/50x50' /> ;
+
+
+ Copy
+
+
+
+
+
+
+
+
+
+
+
+
+
<UI . Media leftImage= {mediaSpacingImage} >
+ default image spacing media
+< /UI.Media>
+
+
+ Copy
+
+
+
+
+
+
+
+
+
+
+
+
<UI . Media
+ leftImage= {mediaSpacingImage}
+ leftMediaSpacing= 'small' >
+ small image spacing media
+< /UI.Media>
+
+
+ Copy
+
+
+
+
+
+
+
+
+
+
+
+
<UI . Media
+ leftImage= {mediaSpacingImage}
+ leftMediaSpacing= 'medium' >
+ medium image spacing media
+< /UI.Media>
+
+
+ Copy
+
+
+
+
+
+
+
+
+
+
+
+
<UI . Media
+ leftImage= {mediaSpacingImage}
+ leftMediaSpacing= 'large' >
+ large image spacing media
+< /UI.Media>
+
+
+ Copy
+
+
+
+
+
+
+
+
+
+
+
+
<UI . Media
+ leftImage= {mediaSpacingImage}
+ leftMediaSpacing= 'xlarge' >
+ xlarge image spacing media
+< /UI.Media>
+
+
+ Copy
+
+
+
+
+
+
+
Modals
+We provide 3 components that can be used to assemble modals:
UI.ModalUI.ModalBodyUI.ModalFooter
+
+ Opening and closing the modal with callbacks
+
+
+ Modals will be closed by default. To open the modal, add a ref
+ property to the modal (i.e. ref='myModal'). Trigger
+ this.refs.myModal.open(); to open the modal, and
+ this.refs.myModal.close(); to close the modal.
+
+
There are 4 ways to close the modal
Clicking the "x" button
+Clicking on the modal backdrop
+Clicking the esc key
+Doing any action that triggers this.refs.myModal.close.
+
+
+
var MyModal = React.createClass({
+ _openModal: function(){
+ this.refs.modal.open();
+ },
+
+ _closeModal: function() {
+ this.refs.modal.close();
+ },
+
+ render: function() {
+ return (
+ <div>
+ <UI . DefaultButton id= 'openButton' onClick= {this._openModal} > Open Modal< /UI.DefaultButton>
+ <UI . Modal title= 'What a Header!' ref= 'modal' >
+ <UI . ModalBody > Text in a body< /UI.ModalBody>
+ <UI . ModalFooter >
+ <UI . DefaultButton id= 'closeButton' onClick= {this._closeModal} > Close< /UI.DefaultButton>
+ < /UI.ModalFooter>
+ < /UI.Modal>
+ </div>
+ )
+ }
+});
+
+
+ Copy
+
+
+
+
+
+
+
+
+
+
+
+
+ Copy
+
+
+
+
+
+
+
Notifications
+
+
+Here's an example if there are no notifications:
+
+
+
+
+
+
+
+
+
+
+ Copy
+
+
+
+
+
+
+
Here's an example if there are notifications:
+
+
+
var newLabel = <UI . DefaultH3 ><UI . Label > New< /UI.Label>< /UI.DefaultH3>;
+
+
+ Copy
+
+
+
+
+
+
+
+
+
+
+
+
+
<UI . Notifications >
+ <UI . NotificationItem href= "http://media.giphy.com/media/Qvw9p4uX7IBy0/giphy.gif" >
+ <UI . Flag leftImage= {newLabel} >
+ <UI . DefaultH5 className= "media-heading mbn type-dark-1" > Notification< /UI.DefaultH5>
+ <p className= "type-sm type-neutral-5 mvn" > Click for Cute Gif</p>
+ < /UI.Flag>
+ < /UI.NotificationItem>
+< /UI.Notifications>
+
+
+ Copy
+
+
+
+
+
+
+
Alerts
+Here's an example if there are no alerts:
+
+
+
+
+
+
+
+
+
+
+
<UI . AlertNotifications />
+
+
+ Copy
+
+
+
+
+
+
+
Here's an example if there are alerts:
+
+
+
var alertImage = <UI . Icon name= "exclamation-triangle" className= "h4 type-warn-2 mrm" /> ;
+
+
+ Copy
+
+
+
+
+
+
+
+
+
+
+
+
+
<UI . AlertNotifications >
+ <UI . NotificationItem href= "http://media.giphy.com/media/Qvw9p4uX7IBy0/giphy.gif" >
+ <UI . Flag leftImage= {alertImage} >
+ <UI . DefaultH5 className= "media-heading mbn type-dark-1" > WARNING< /UI.DefaultH5>
+ <p className= "type-sm type-neutral-5 mvn" > Click for Cute Gif</p>
+ < /UI.Flag>
+ < /UI.NotificationItem>
+< /UI.AlertNotifications>
+
+
+ Copy
+
+
+
+
+
+
+
Panes
+The Pane component is a straightforward implementation of the Pane styling.
+Any className values passed through are passed to the underlying .pane.
+
+
+
+
<UI . Pane className= "bg-neutral-10" >
+ <UI . DefaultH1 > This is a pane< /UI.DefaultH1>
+< /UI.Pane>
+
+
+ Copy
+
+
+
In the event that you need additional configuration applied to a Pane, you can use the
+BasePane component which accepts properties for outerClass and innerClass.
These values are added to the class name of the .pane and the .container respectively.
+
+
+
+
<UI . BasePane outerClass= "bg-dark-1" innerClass= "bg-glow" >
+ <UI . DefaultH1 color= "type-neutral-9" > This is a pane (configurable)< /UI.DefaultH1>
+< /UI.BasePane>
+
+
+ Copy
+
+
+
Panels
+
+
+Panel components are straightforward implementations of the Panel styling. The Panel component itself
+is the base, and there are many different flavors of Panels which all construct a particularly styled Panel.
See examples below.
+
+
+
+
+
+
+
+
+
+
+
<UI . Panel className= "bg-neutral-8" >
+ <p> Base Panel</p>
+< /UI.Panel>
+
+
+ Copy
+
+
+
+
+
+
+
Basic Panel Alt
+
+
+
+
+
+
+
+
+
+
+
+
<UI . BasicPanelAlt >
+ Basic Panel
+< /UI.BasicPanelAlt>
+
+
+ Copy
+
+
+
+
+
+
+
+
+
+
+
+
<UI . BasicPanelAlt title= 'Basic Alt Title' >
+ Basic Panel
+< /UI.BasicPanelAlt>
+
+
+ Copy
+
+
+
+
+
+
+
Basic
+
+
+
+
+
+
+
+
+
+
+
+
<UI . BasicPanel >
+ Basic Panel
+< /UI.BasicPanel>
+
+
+ Copy
+
+
+
+
+
+
+
+
+
+
+
+
<UI . BasicPanel title= 'Basic Title' >
+ Basic Panel
+< /UI.BasicPanel>
+
+
+ Copy
+
+
+
+
+
+
+
Clickable
+
+
+
+
+
+
+
+
+
+
+
+
<UI . ClickablePanel > Clickable Panel< /UI.ClickablePanel>
+
+
+ Copy
+
+
+
+
+
+
+
+
+
+
+
+
<UI . ClickableAltPanel > Clickable Panel (Alt)< /UI.ClickableAltPanel>
+
+
+ Copy
+
+
+
+
+
+
+
Highlight
+
+
+
+
+
+
+
+
+
+
+
+
<UI . HighlightPanel >
+ Highlight Panel
+< /UI.HighlightPanel>
+
+
+ Copy
+
+
+
+
+
+
+
Padding
+Add a "padding" attribute (i.e. pal, pbn, etc.) to change the padding on the panel-body.
+
+
+
+
+
+
+
+
+
+
+
<UI . Panel className= "bg-neutral-8" padding= "paxxl" >
+ <p> Base Panel</p>
+< /UI.Panel>
+
+
+ Copy
+
+
+
+
+
+
+
A ScrollingPanel is created by using a Panel component and including a true value for the scrollable
+property. Alternatively, if this value is a number, it will become the height of the scrollable panel in pixels!
+
+
+
+
+
+
+
+
+
+
+
<UI . Panel className= "bg-neutral-8" scrollable= {100} >
+ <p> Scrollable Panel</p>
+ <p> Scrollable Panel</p>
+ <p> Scrollable Panel</p>
+ <p> Scrollable Panel</p>
+ <p> Scrollable Panel</p>
+ <p> Scrollable Panel</p>
+< /UI.Panel>
+
+
+ Copy
+
+
+
+
+
+
+
+
+
+
+
+
<UI . Panel className= "bg-neutral-8" scrollable= {true} >
+ <p> Scrollable Panel</p>
+ <p> Scrollable Panel</p>
+ <p> Scrollable Panel</p>
+ <p> Scrollable Panel</p>
+ <p> Scrollable Panel</p>
+ <p> Scrollable Panel</p>
+ <p> Scrollable Panel</p>
+ <p> Scrollable Panel</p>
+< /UI.Panel>
+
+
+ Copy
+
+
+
+
+
+
+
Shadow
+ShadowPanels accept a shadowLevel property between 1 and 4 (darkest to lightest).
+If no shadowLevel is set, a default value of 3 is applied.
+
+
+
+
+
+
+
+
+
+
+
<UI . ShadowPanel > Shadow Panel (Defaults to shadow level 3)< /UI.ShadowPanel>
+
+
+ Copy
+
+
+
+
+
+
+
+
+
+
+
+
<UI . ShadowPanel shadowLevel= {1} > Shadow Panel (level 1)< /UI.ShadowPanel>
+
+
+ Copy
+
+
+
+
+
+
+
+
+
+
+
+
<UI . ShadowPanel shadowLevel= {2} > Shadow Panel (level 2)< /UI.ShadowPanel>
+
+
+ Copy
+
+
+
+
+
+
+
+
+
+
+
+
<UI . ShadowPanel shadowLevel= {3} > Shadow Panel (level 3)< /UI.ShadowPanel>
+
+
+ Copy
+
+
+
+
+
+
+
+
+
+
+
+
<UI . ShadowPanel shadowLevel= {4} > Shadow Panel (level 4)< /UI.ShadowPanel>
+
+
+ Copy
+
+
+
+
+
+
+
Simple
+
+
+
+
+
+
+
+
+
+
+
+
<UI . SimplePanel >
+ Simple Panel
+< /UI.SimplePanel>
+
+
+ Copy
+
+
+
+
+
+
+
Pivnetacos
+
+
+
+ Deprecation warning
+
+
+ This component is deprecated.
+
+
Here is a basic example of how React components can be combined to create larger pieces.
+
+
+
var PivnetHomepage = React.createClass({
+ render: function () {
+ return (
+ <div className= "bg-dark-1 txt-c ptxl" >
+ <div className= "pvxxxl" >
+ <UI . DefaultH1 color= "type-neutral-9" className= "mbn" > Explore, download, and update Pivotal software and services< /UI.DefaultH1>
+ <UI . DefaultH2 color= "type-neutral-11" bold= "low" className= "mtn" > Software designed with the enterprise in mind< /UI.DefaultH2>
+ </div>
+
+ <UI . InverseDivider className= "mbn" />
+
+ <UI . Pane className= "bg-shadow-1" >
+ <div className= "row" >
+ <div className= "col-md-8 col-md-offset-8" >
+ <UI . HighlightAltButton className= "mtxxl" block= {true} large= {true} > Join< /UI.HighlightAltButton>
+ <p className= "type-sm type-neutral-6" > To download and evaluate all products and services</p>
+ </div>
+ </div>
+ < /UI.Pane>
+ </div>
+ );
+ }
+});
+
+
+ Copy
+
+
Portals
+The Portal components render DOM nodes elsewhere on the page. This is useful for things like
+modals, tooltips, and dropdowns, when you want to define the content near the trigger, but have
+it display at the bottom of the page (generally to solve z-index and overflow incompatibilities).
For example, modals can be rendered at the bottom of <body>, but the React component that creates
+the modal content (e.g. a <button>) does not have access to <body> directly.
+If a PortalDestination is put at the bottom of <body>, a PortalSource can then be used
+anywhere without knowing about <body>.
+
+
+
+
<div>
+ <section>
+ <span> Content will be transported from here:</span>
+ <UI . PortalSource name= "modal" > Transported content< /UI.PortalSource>
+ </section>
+ <section className= "mvxxl" > Unrelated content</section>
+ <section>
+ <span> To here:</span>
+ <UI . PortalDestination name= "modal" />
+ </section>
+</div>
+
+
+ Copy
+
+
+
Ribbons
+
+
+Ribbon components are straightforward implementations of the Ribbon styles.
+They should be used to call out access, status, environment, etc.
+
+
+
+
+
+
+
+
+
+
+
<UI . Ribbon > British < /UI.Ribbon>
+
+
+ Copy
+
+
+
+
+
+
+
+
+
+
+
+
<UI . PrimaryRibbon > English-British < /UI.PrimaryRibbon>
+
+
+ Copy
+
+
+
+
+
+
+
Banners
+
+
+
+
+
+
+
+
+
+
+
+
<UI . Banner > British < /UI.Banner>
+
+
+ Copy
+
+
+
+
+
+
+
Tables
+
+
+
+Sortable
+The SortableTable component is a robust component that offers a styled table with fully
+functioning sort.
The SortableTable expects the following properties:
+Property
+Type
+Description
+
+
+dataArray of JS objects
+The collection of data to be displayed
+
+
+columnsArray of column objects
+Informs the table how to render columns as well as which columns should be sortable
+
+
+classesArray of strings
+A list of class names to be added to the table element
+
+
The column objects should have the following structure:
+Property
+Required?
+Type
+Description
+
+
+nameyes String
+Name of the property on a data object (how to lookup the value for this column)
+
+
+titleyes String
+Name to display on the table header
+
+
+sortableno
+Boolean
+Is this column sortable? Defaults to false
+
+
+alignno
+'center', 'left', or 'right'
+How should text be aligned within this column? Defaults to left
+
+
If a column is marked as being sortable, it will attempt to sort the values as strings.
+
+
+
var sortTableCols = [
+ {
+ name : 'name' ,
+ title : 'Name' ,
+ sortable : true
+ },
+ {
+ name : 'instances' ,
+ title : 'Instances' ,
+ sortable : true ,
+ align : 'center'
+ },
+ {
+ name : 'cpu' ,
+ title : 'CPU' ,
+ sortable : true ,
+ align : 'right'
+ },
+ {
+ name : 'synergy' ,
+ title : 'Synergy' ,
+ align : 'left'
+ }
+]
+
+var sortTableData = [
+ {
+ instances : '1' ,
+ name : 'foo' ,
+ cpu : 'po' ,
+ synergy : 'qum' ,
+ ram : 'bee' ,
+ },
+ {
+ name : 'yee' ,
+ instances : 'di' ,
+ cpu : 'no' ,
+ synergy : 'aum'
+ },
+ {
+ name : 'zee' ,
+ instances : 'si' ,
+ cpu : 'mo' ,
+ synergy : 'wum'
+ },
+ {
+ name : 'jee' ,
+ instances : 'ui' ,
+ cpu : 'no' ,
+ synergy : 'mum'
+ }
+];
+
+
+ Copy
+
+
+
+
+
+
<UI . SortableTable
+ data= {sortTableData}
+ columns= {sortTableCols}
+ classes= {['table-data', ' table-light ']} />
+
+
+ Copy
+
+
+
Tabs
+
+
+Using Tab components in React consists of a parent element for the desired Tab type (for example,
+SimpleTabs or SimpleAltTabs). Each Tab is a child of this and has a tab property for the
+string value a Tab should display. Additionally, each Tab must define an eventKey property
+for uniquely identifying this tab to its parent component. When you want to indicate which
+tab should be selected by default, apply the defaultActiveKey prop to the parent.
For examples, see the various Tabs defined below.
+Simple
+
+
+
+
+
<UI . SimpleTabs defaultActiveKey= {1} >
+ <UI . Tab eventKey= {1} tab= "Tab 1" > Wow!< /UI.Tab>
+ <UI . Tab eventKey= {2} tab= "Tab 2" >
+ <h2> Neat!</h2>
+ <span> So much content.</span>
+ < /UI.Tab>
+< /UI.SimpleTabs>
+
+
+ Copy
+
+
+
Alt
+
+
+
+
+
<UI . SimpleAltTabs defaultActiveKey= {2} >
+ <UI . Tab eventKey= {1} tab= "Tab 1" > Wow!< /UI.Tab>
+ <UI . Tab eventKey= {2} tab= "Tab 2" >
+ <h2> Neat!</h2>
+ <span> So much content.</span>
+ < /UI.Tab>
+< /UI.SimpleAltTabs>
+
+
+ Copy
+
+
+
Tooltips are used to display extra information on hover.
+To make an element show a tooltip, wrap it in an OverlayTrigger.
+If the overlay property passed into the OverlayTrigger will be displayed on hover,
+this is where the Tooltip can be used. The is currently a thin wrapper around
+React Bootstrap.
Tooltips are placed using the placement property on OverlayTrigger, "left", "right", "bottom", "top".
+
+
+
+
<div>
+<p>
+ Check out this
+ <UI . OverlayTrigger placement= "left" overlay= {<UI.Tooltip > I should be on the left< /UI.Tooltip>}>
+ <a href= "#" > tooltip on the left</a>
+ < /UI.OverlayTrigger>
+</p>
+<p>
+ Check out this
+ <UI . OverlayTrigger placement= "right" overlay= {<UI.Tooltip > I should be on the right< /UI.Tooltip>}>
+ <a href= "#" > tooltip on the right</a>
+ < /UI.OverlayTrigger>
+</p>
+<p>
+ Check out this
+ <UI . OverlayTrigger placement= "top" overlay= {<UI.Tooltip > I should be on the top< /UI.Tooltip>}>
+ <a href= "#" > tooltip on the top</a>
+ < /UI.OverlayTrigger>
+</p>
+<p>
+ Check out this
+ <UI . OverlayTrigger placement= "bottom" overlay= {<UI.Tooltip > I should be on the bottom< /UI.Tooltip>}>
+ <a href= "#" > tooltip on the bottom</a>
+ < /UI.OverlayTrigger>
+</p>
+</div>
+
+
+ Copy
+
+
+
Typography
+
+
+We have three type systems. Which one you choose depends on your product.
Marketing sites should use the largest styles, for example <UI.MarketingH1>A Top Level Heading</UI.MarketingH1>
+Most sites will use our default headings, for example <UI.DefaultH1>A Top Level Heading</UI.DefaultH1>
+Rarely, sites will need a smaller type scale, for example <UI.AlternateH1>A Top Level Heading</UI.AlternateH1>
+Default
+
+
+
+
+
+
+
+
+
+
+
+
<UI . DefaultH1 > h1 31px< /UI.DefaultH1>
+
+
+ Copy
+
+
+
+
+
+
+
+
+
+
+
+
<UI . DefaultH2 > h2 25px< /UI.DefaultH2>
+
+
+ Copy
+
+
+
+
+
+
+
+
+
+
+
+
<UI . DefaultH3 > h3 20px< /UI.DefaultH3>
+
+
+ Copy
+
+
+
+
+
+
+
+
+
+
+
+
<UI . DefaultH4 > h4 18px< /UI.DefaultH4>
+
+
+ Copy
+
+
+
+
+
+
+
+
+
+
+
+
<UI . DefaultH5 > h5 16px< /UI.DefaultH5>
+
+
+ Copy
+
+
+
+
+
+
+
+
+
+
+
+
<UI . DefaultH6 > h6 13px< /UI.DefaultH6>
+
+
+ Copy
+
+
+
+
+
+
+
Alternate
+
+
+
+
+
+
+
+
+
+
+
+
<UI . AlternateH1 > This is an H1< /UI.AlternateH1>
+
+
+ Copy
+
+
+
+
+
+
+
+
+
+
+
+
<UI . AlternateH2 > This is an H2< /UI.AlternateH2>
+
+
+ Copy
+
+
+
+
+
+
+
+
+
+
+
+
<UI . AlternateH3 > This is an H3< /UI.AlternateH3>
+
+
+ Copy
+
+
+
+
+
+
+
+
+
+
+
+
<UI . AlternateH4 > This is an H4< /UI.AlternateH4>
+
+
+ Copy
+
+
+
+
+
+
+
+
+
+
+
+
<UI . AlternateH5 > This is an H5< /UI.AlternateH5>
+
+
+ Copy
+
+
+
+
+
+
+
+
+
+
+
+
<UI . AlternateH6 > This is an H6< /UI.AlternateH6>
+
+
+ Copy
+
+
+
+
+
+
+
Marketing
+
+
+
+
+
+
+
+
+
+
+
+
<UI . MarketingH1 > This is an h1< /UI.MarketingH1>
+
+
+ Copy
+
+
+
+
+
+
+
+
+
+
+
+
<UI . MarketingH2 > This is an h2< /UI.MarketingH2>
+
+
+ Copy
+
+
+
+
+
+
+
+
+
+
+
+
<UI . MarketingH3 > This is an h3< /UI.MarketingH3>
+
+
+ Copy
+
+
+
+
+
+
+
+
+
+
+
+
<UI . MarketingH4 > This is an h4< /UI.MarketingH4>
+
+
+ Copy
+
+
+
+
+
+
+
+
+
+
+
+
<UI . MarketingH5 > This is an h5< /UI.MarketingH5>
+
+
+ Copy
+
+
+
+
+
+
+
+
+
+
+
+
<UI . MarketingH6 > This is an h6< /UI.MarketingH6>
+
+
+ Copy
+
+
+
+
+
+
+
Custom
+Usually, you want to use the provided headings. If your mock doesn't exactly match, you should try the normal headings,
+and see if it still looks ok. If it doesn't (this should be rare!) you can use our custom type generator.
You may want to wrap this in a custom reusable React component rather than calling it directly.
+
+
+
+
<UI . Heading element= "h1" bold= "high" color= "type-brand-2" > This is a custom h1< /UI.Heading>
+
+
+ Copy
+
+
+
+
+
+
a brand new styleguide: Utilities
+
+
+
+
+
+Alignment
+The following classes can be used to for horizontal alignment.
+
+
+
+
+
+
+
+
+
+
+
<p class= "txt-l" >
+ <code> .txt-l</code>
+</p>
+
+
+ Copy
+
+
+
+
+
+
+
+
+
+
+
+
<p class= "txt-c" >
+ <code> .txt-c</code>
+</p>
+
+
+ Copy
+
+
+
+
+
+
+
+
+
+
+
+
<p class= "txt-r" >
+ <code> .txt-r</code>
+</p>
+
+
+ Copy
+
+
+
+
+
+
+
On display: inline and display: table-cell elements,
+the following classes can be used to for vertical alignment.
+
+
+
+ .txt-t
+
+
+ .txt-m
+
+
+ .txt-b
+
+
+ Distillery trust fund Neutra fingerstache plaid messenger bag.
+ Try-hard health goth PBR Helvetica hashtag. Try-hard narwhal letterpress,
+ crucifix selfies trust fund swag mustache quinoa chambray iPhone.
+
+
+
+
+
+
+
<table class= "table table-bordered" >
+ <tr>
+ <td class= "txt-t" width= "20%" >
+ <code> .txt-t</code>
+ </td>
+ <td class= "txt-m" width= "20%" >
+ <code> .txt-m</code>
+ </td>
+ <td class= "txt-b" width= "20%" >
+ <code> .txt-b</code>
+ </td>
+ <td width= "40%" >
+ Distillery trust fund Neutra fingerstache plaid messenger bag.
+ Try-hard health goth PBR Helvetica hashtag. Try-hard narwhal letterpress,
+ crucifix selfies trust fund swag mustache quinoa chambray iPhone.
+ </td>
+ </tr>
+</table>
+
+
+ Copy
+
+
+
If you need to vertically align an element that does not fit into those display types,
+take a look at vertical alignment .
+Colors
+
+
+Our color pallet is composed of several different colors. At any given point in captures the current
+evolution of our design and likely includes old and new colors. Whenever possible, evolve the old
+colors rather than adding new ones.
+
+
+ Sass variables should only be used in variables.css.scss.
+
+
+ They should never be used directly when building components, because it makes
+ it very hard to change the values later if you can't tell how they might have been used.
+ You should define your own variables that use these colors in variables.css.scss.
+
+
This example shows proper use of Sass variables.
+
+
$tabs-active-bg-color: $gray-2;
+
+
+
+
+
+
+
+ $gray-1
+ .bg-neutral-1
+ .type-neutral-1
+
+
+
+
+
+
+
+
+
+
+ $gray-2
+ .bg-neutral-2
+ .type-neutral-2
+
+
+
+
+
+
+
+
+
+ $gray-3
+ .bg-neutral-3
+ .type-neutral-3
+
+
+
+
+
+
+
+
+
+ $gray-4
+ .bg-neutral-4
+ .type-neutral-4
+
+
+
+
+
+
+
+
+
+ $gray-5
+ .bg-neutral-5
+ .type-neutral-5
+
+
+
+
+
+
+
+
+
+ $gray-6
+ .bg-neutral-6
+ .type-neutral-6
+
+
+
+
+
+
+
+
+
+ $gray-7
+ .bg-neutral-7
+ .type-neutral-7
+
+
+
+
+
+
+
+
+
+ $gray-8
+ .bg-neutral-8
+ .type-neutral-8
+
+
+
+
+
+
+
+
+
+ $gray-9
+ .bg-neutral-9
+ .type-neutral-9
+
+
+
+
+
+
+
+
+
+ $gray-10
+ .bg-neutral-10
+ .type-neutral-10
+
+
+
+
+
+
+
+
+
+ $gray-11
+ .bg-neutral-11
+ .type-neutral-11
+
+
+
+
+
+
+
+
+
+
+ $dark-1
+ .bg-dark-1
+ .type-dark-1
+
+
+
+
+
+
+
+
+
+ $dark-2
+ .bg-dark-2
+ .type-dark-2
+
+
+
+
+
+
+
+
+
+ $dark-3
+ .bg-dark-3
+ .type-dark-3
+
+
+
+
+
+
+
+
+
+
+ $brand-1
+ .bg-brand-1
+ .type-brand-1
+
+
+
+
+
+
+
+
+
+ $brand-2
+ .bg-brand-2
+ .type-brand-2
+
+
+
+
+
+
+
+
+
+ $brand-3
+ .bg-brand-3
+ .type-brand-3
+
+
+
+
+
+
+
+
+
+ $brand-4
+ .bg-brand-4
+ .type-brand-4
+
+
+
+
+
+
+
+
+
+ $brand-5
+ .bg-brand-5
+ .type-brand-5
+
+
+
+
+
+
+
+
+
+
+ $accent-1
+ .bg-accent-1
+ .type-accent-1
+
+
+
+
+
+
+
+
+
+ $accent-2
+ .bg-accent-2
+ .type-accent-2
+
+
+
+
+
+
+
+
+
+ $accent-3
+ .bg-accent-3
+ .type-accent-3
+
+
+
+
+
+
+
+
+
+ $accent-4
+ .bg-accent-4
+ .type-accent-4
+
+
+
+
+
+
+
+
+
+ $accent-5
+ .bg-accent-5
+ .type-accent-5
+
+
+
+
+
+
+
+
+
+
+ $error-1
+ .bg-error-1
+ .type-error-1
+
+
+
+
+
+
+
+
+
+ $error-2
+ .bg-error-2
+ .type-error-2
+
+
+
+
+
+
+
+
+
+ $error-3
+ .bg-error-3
+ .type-error-3
+
+
+
+
+
+
+
+
+
+ $error-4
+ .bg-error-4
+ .type-error-4
+
+
+
+
+
+
+
+
+
+
+ $warn-1
+ .bg-warn-1
+ .type-warn-1
+
+
+
+
+
+
+
+
+
+ $warn-2
+ .bg-warn-2
+ .type-warn-2
+
+
+
+
+
+
+
+
+
+ $warn-3
+ .bg-warn-3
+ .type-warn-3
+
+
+
+
+
+
+
+
+
+
+ $success-1
+ .bg-success-1
+ .type-success-1
+
+
+
+
+
+
+
+
+
+ $success-2
+ .bg-success-2
+ .type-success-2
+
+
+
+
+
Shadows & Glows
+
+
+Ellipsis
+The type .type-ellipsis-1-line adds ellipsis to text when there is too much. Combine it with .col-md-* classes to get the width you want.
+
+
+ Deprecation warning
+
+
+ The 2- and 3-line ellipsis are deprecated.
+
+
+
+
+
+
+
+
+ Lorem ipsum dolor sit amet, consectetur adipisicing 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. 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 class= "type-ellipsis-1-line" >
+ Lorem ipsum dolor sit amet, consectetur adipisicing 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. 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>
+
+
+ Copy
+
+
+
+
+
+
+
+ Lorem ipsum dolor sit amet, consectetur adipisicing 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. 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 class= "type-ellipsis-2-lines" >
+ Lorem ipsum dolor sit amet, consectetur adipisicing 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. 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>
+
+
+ Copy
+
+
+
+
+
+
+
+ Lorem ipsum dolor sit amet, consectetur adipisicing 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. 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 class= "type-ellipsis-3-lines" >
+ Lorem ipsum dolor sit amet, consectetur adipisicing 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. 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>
+
+
+ Copy
+
+
+
+
+
+
+
+
+ Multi-line ellipsis only works on webkit.
+
+
Hoverable
+This component is for showing hidden actions on hover.
+If you put this on an element then hovering on that parent element will show the hidden element.
List example:
This can be used with any kind of list but the list group style seems to fit this use case best.
+
+
+ List Item 1
+ Edit
+
+
+ List Item 2
+ Edit
+
+
+ List Item 3
+ Edit
+
+
+ Not hoverable
+
+
+
+
+
+
<ul class= "list-group" hoverable-group= "true" >
+ <li class= "list-group-item" hoverable= "true" >
+ List Item 1
+ <a class= "hovered" href= "#" > Edit</a>
+ </li>
+ <li class= "list-group-item" hoverable= "true" >
+ List Item 2
+ <a class= "hovered" href= "#" > Edit</a>
+ </li>
+ <li class= "list-group-item" hoverable= "true" >
+ List Item 3
+ <a class= "hovered" href= "#" > Edit</a>
+ </li>
+ <li class= "list-group-item" >
+ Not hoverable
+ </li>
+</ul>
+
+
+ Copy
+
+
+
Table example:
+
+
+ Name
+
+
+
+ Row 1
+ Delete
+
+
+
+
+ Row 2
+ Delete
+
+
+
+
+ Row 3
+ Delete
+
+
+
+
+ Not hoverable
+
+
+
+
+
+
+
<table hoverable-group= "true" >
+ <tr>
+ <th> Name</th>
+ </tr>
+ <tr hoverable= "true" >
+ <td>
+ Row 1
+ <a class= "hovered" href= "#" > Delete</a>
+ </td>
+ </tr>
+ <tr hoverable= "<%= true %>" >
+ <td>
+ Row 2
+ <a class= "hovered" href= "#" > Delete</a>
+ </td>
+ </tr>
+ <tr hoverable= "true" >
+ <td>
+ Row 3
+ <a class= "hovered" href= "#" > Delete</a>
+ </td>
+ </tr>
+ <tr>
+ <td>
+ Not hoverable
+ </td>
+ </tr>
+</table>
+
+
+ Copy
+
+
+
Print
+Similar to the regular responsive classes, use these for toggling content for print.
+
+
+
+ Classes
+ Browser
+ Print
+
+
+
+
+
+ .visible-print-block.visible-print-inline.visible-print-inline-block
+
+ Hidden
+ Visible
+
+
+ .hidden-printVisible
+ Hidden
+
+
+
+
+Responsive Utilities
+Use a single or combination of the available classes for toggling content across viewport breakpoints.
+
+
+
+
+ Extra small devices
+ Phones (<768px)
+
+
+ Small devices
+ Tablets (≥768px)
+
+
+ Medium devices
+ Desktops (≥992px)
+
+
+ Large devices
+ Desktops (≥1200px)
+
+
+
+
+
+ .visible-xs-*Visible
+ Hidden
+ Hidden
+ Hidden
+
+
+ .visible-sm-*Hidden
+ Visible
+ Hidden
+ Hidden
+
+
+ .visible-md-*Hidden
+ Hidden
+ Visible
+ Hidden
+
+
+ .visible-lg-*Hidden
+ Hidden
+ Hidden
+ Visible
+
+
+
+
+ .hidden-xsHidden
+ Visible
+ Visible
+ Visible
+
+
+ .hidden-smVisible
+ Hidden
+ Visible
+ Visible
+
+
+ .hidden-mdVisible
+ Visible
+ Hidden
+ Visible
+
+
+ .hidden-lgVisible
+ Visible
+ Visible
+ Hidden
+
+
+
+The .visible-*-* classes for each breakpoint come in three variations, one for each CSS display property value listed below.
+
+
+
+ Group of classes
+ CSS display
+
+
+
+
+ .visible-*-blockdisplay: block;
+
+ .visible-*-inlinedisplay: inline;
+
+ .visible-*-inline-blockdisplay: inline-block;
+
+
+So, for extra small (xs) screens for example, the available .visible-*-* classes are:
.visible-xs-block.visible-xs-inline.visible-xs-inline-blockWhitespace
+
+
+
+Standard
+Should be used to modify the default spacing between objects (not between nodes of the same object)
+Please use judiciously. You want to be using defaults most of the time, these are exceptions!
+<type><location><size>
+Letter
+Description
+
+
+p, m
+padding, margin
+
+
+a, t, r, b, l, h, v
+all, top, right, bottom, left, horizontal, vertical
+
+
+n, s, m, l, xl, xxl, xxxl, xxxxl
+none(0px), small(5px), medium(7px), large(10px), extra large(20px), extra extra large (40px), extra extra extra large (120px), extra extra extra extra large (140px)
+
+
+
A normal paragraph
+
A paragraph with large padding
+
+
+
+
<p> A normal paragraph</p>
+<p class= "pal" > A paragraph with large padding</p>
+
+
+ Copy
+
+
+
List
+See list spacing .
+
+
+
" + (usingActiveX ? '
' + " ";
+ flashBridge = tmpDiv.firstChild;
+ tmpDiv = null;
+ _unwrap(flashBridge).ZeroClipboard = ZeroClipboard;
+ container.replaceChild(flashBridge, divToBeReplaced);
+ _watchForSwfFallbackContent();
+ }
+ if (!flashBridge) {
+ flashBridge = _document[_globalConfig.swfObjectId];
+ if (flashBridge && (len = flashBridge.length)) {
+ flashBridge = flashBridge[len - 1];
+ }
+ if (!flashBridge && container) {
+ flashBridge = container.firstChild;
+ }
+ }
+ _flashState.bridge = flashBridge || null;
+ return flashBridge;
+ };
+ /**
+ * Destroy the SWF object.
+ * @private
+ */
+ var _unembedSwf = function() {
+ var flashBridge = _flashState.bridge;
+ if (flashBridge) {
+ var htmlBridge = _getHtmlBridge(flashBridge);
+ if (htmlBridge) {
+ if (_flashState.pluginType === "activex" && "readyState" in flashBridge) {
+ flashBridge.style.display = "none";
+ (function removeSwfFromIE() {
+ if (flashBridge.readyState === 4) {
+ for (var prop in flashBridge) {
+ if (typeof flashBridge[prop] === "function") {
+ flashBridge[prop] = null;
+ }
+ }
+ if (flashBridge.parentNode) {
+ flashBridge.parentNode.removeChild(flashBridge);
+ }
+ if (htmlBridge.parentNode) {
+ htmlBridge.parentNode.removeChild(htmlBridge);
+ }
+ } else {
+ _setTimeout(removeSwfFromIE, 10);
+ }
+ })();
+ } else {
+ if (flashBridge.parentNode) {
+ flashBridge.parentNode.removeChild(flashBridge);
+ }
+ if (htmlBridge.parentNode) {
+ htmlBridge.parentNode.removeChild(htmlBridge);
+ }
+ }
+ }
+ _clearTimeoutsAndPolling();
+ _flashState.ready = null;
+ _flashState.bridge = null;
+ _flashState.deactivated = null;
+ _zcSwfVersion = undefined;
+ }
+ };
+ /**
+ * Map the data format names of the "clipData" to Flash-friendly names.
+ *
+ * @returns A new transformed object.
+ * @private
+ */
+ var _mapClipDataToFlash = function(clipData) {
+ var newClipData = {}, formatMap = {};
+ if (!(typeof clipData === "object" && clipData)) {
+ return;
+ }
+ for (var dataFormat in clipData) {
+ if (dataFormat && _hasOwn.call(clipData, dataFormat) && typeof clipData[dataFormat] === "string" && clipData[dataFormat]) {
+ switch (dataFormat.toLowerCase()) {
+ case "text/plain":
+ case "text":
+ case "air:text":
+ case "flash:text":
+ newClipData.text = clipData[dataFormat];
+ formatMap.text = dataFormat;
+ break;
+
+ case "text/html":
+ case "html":
+ case "air:html":
+ case "flash:html":
+ newClipData.html = clipData[dataFormat];
+ formatMap.html = dataFormat;
+ break;
+
+ case "application/rtf":
+ case "text/rtf":
+ case "rtf":
+ case "richtext":
+ case "air:rtf":
+ case "flash:rtf":
+ newClipData.rtf = clipData[dataFormat];
+ formatMap.rtf = dataFormat;
+ break;
+
+ default:
+ break;
+ }
+ }
+ }
+ return {
+ data: newClipData,
+ formatMap: formatMap
+ };
+ };
+ /**
+ * Map the data format names from Flash-friendly names back to their original "clipData" names (via a format mapping).
+ *
+ * @returns A new transformed object.
+ * @private
+ */
+ var _mapClipResultsFromFlash = function(clipResults, formatMap) {
+ if (!(typeof clipResults === "object" && clipResults && typeof formatMap === "object" && formatMap)) {
+ return clipResults;
+ }
+ var newResults = {};
+ for (var prop in clipResults) {
+ if (_hasOwn.call(clipResults, prop)) {
+ if (prop === "errors") {
+ newResults[prop] = clipResults[prop] ? clipResults[prop].slice() : [];
+ for (var i = 0, len = newResults[prop].length; i < len; i++) {
+ newResults[prop][i].format = formatMap[newResults[prop][i].format];
+ }
+ } else if (prop !== "success" && prop !== "data") {
+ newResults[prop] = clipResults[prop];
+ } else {
+ newResults[prop] = {};
+ var tmpHash = clipResults[prop];
+ for (var dataFormat in tmpHash) {
+ if (dataFormat && _hasOwn.call(tmpHash, dataFormat) && _hasOwn.call(formatMap, dataFormat)) {
+ newResults[prop][formatMap[dataFormat]] = tmpHash[dataFormat];
+ }
+ }
+ }
+ }
+ }
+ return newResults;
+ };
+ /**
+ * Will look at a path, and will create a "?noCache={time}" or "&noCache={time}"
+ * query param string to return. Does NOT append that string to the original path.
+ * This is useful because ExternalInterface often breaks when a Flash SWF is cached.
+ *
+ * @returns The `noCache` query param with necessary "?"/"&" prefix.
+ * @private
+ */
+ var _cacheBust = function(path, options) {
+ var cacheBust = options == null || options && options.cacheBust === true;
+ if (cacheBust) {
+ return (path.indexOf("?") === -1 ? "?" : "&") + "noCache=" + _now();
+ } else {
+ return "";
+ }
+ };
+ /**
+ * Creates a query string for the FlashVars param.
+ * Does NOT include the cache-busting query param.
+ *
+ * @returns FlashVars query string
+ * @private
+ */
+ var _vars = function(options) {
+ var i, len, domain, domains, str = "", trustedOriginsExpanded = [];
+ if (options.trustedDomains) {
+ if (typeof options.trustedDomains === "string") {
+ domains = [ options.trustedDomains ];
+ } else if (typeof options.trustedDomains === "object" && "length" in options.trustedDomains) {
+ domains = options.trustedDomains;
+ }
+ }
+ if (domains && domains.length) {
+ for (i = 0, len = domains.length; i < len; i++) {
+ if (_hasOwn.call(domains, i) && domains[i] && typeof domains[i] === "string") {
+ domain = _extractDomain(domains[i]);
+ if (!domain) {
+ continue;
+ }
+ if (domain === "*") {
+ trustedOriginsExpanded.length = 0;
+ trustedOriginsExpanded.push(domain);
+ break;
+ }
+ trustedOriginsExpanded.push.apply(trustedOriginsExpanded, [ domain, "//" + domain, _window.location.protocol + "//" + domain ]);
+ }
+ }
+ }
+ if (trustedOriginsExpanded.length) {
+ str += "trustedOrigins=" + _encodeURIComponent(trustedOriginsExpanded.join(","));
+ }
+ if (options.forceEnhancedClipboard === true) {
+ str += (str ? "&" : "") + "forceEnhancedClipboard=true";
+ }
+ if (typeof options.swfObjectId === "string" && options.swfObjectId) {
+ str += (str ? "&" : "") + "swfObjectId=" + _encodeURIComponent(options.swfObjectId);
+ }
+ if (typeof options.jsVersion === "string" && options.jsVersion) {
+ str += (str ? "&" : "") + "jsVersion=" + _encodeURIComponent(options.jsVersion);
+ }
+ return str;
+ };
+ /**
+ * Extract the domain (e.g. "github.com") from an origin (e.g. "https://github.com") or
+ * URL (e.g. "https://github.com/zeroclipboard/zeroclipboard/").
+ *
+ * @returns the domain
+ * @private
+ */
+ var _extractDomain = function(originOrUrl) {
+ if (originOrUrl == null || originOrUrl === "") {
+ return null;
+ }
+ originOrUrl = originOrUrl.replace(/^\s+|\s+$/g, "");
+ if (originOrUrl === "") {
+ return null;
+ }
+ var protocolIndex = originOrUrl.indexOf("//");
+ originOrUrl = protocolIndex === -1 ? originOrUrl : originOrUrl.slice(protocolIndex + 2);
+ var pathIndex = originOrUrl.indexOf("/");
+ originOrUrl = pathIndex === -1 ? originOrUrl : protocolIndex === -1 || pathIndex === 0 ? null : originOrUrl.slice(0, pathIndex);
+ if (originOrUrl && originOrUrl.slice(-4).toLowerCase() === ".swf") {
+ return null;
+ }
+ return originOrUrl || null;
+ };
+ /**
+ * Set `allowScriptAccess` based on `trustedDomains` and `window.location.host` vs. `swfPath`.
+ *
+ * @returns The appropriate script access level.
+ * @private
+ */
+ var _determineScriptAccess = function() {
+ var _extractAllDomains = function(origins) {
+ var i, len, tmp, resultsArray = [];
+ if (typeof origins === "string") {
+ origins = [ origins ];
+ }
+ if (!(typeof origins === "object" && origins && typeof origins.length === "number")) {
+ return resultsArray;
+ }
+ for (i = 0, len = origins.length; i < len; i++) {
+ if (_hasOwn.call(origins, i) && (tmp = _extractDomain(origins[i]))) {
+ if (tmp === "*") {
+ resultsArray.length = 0;
+ resultsArray.push("*");
+ break;
+ }
+ if (resultsArray.indexOf(tmp) === -1) {
+ resultsArray.push(tmp);
+ }
+ }
+ }
+ return resultsArray;
+ };
+ return function(currentDomain, configOptions) {
+ var swfDomain = _extractDomain(configOptions.swfPath);
+ if (swfDomain === null) {
+ swfDomain = currentDomain;
+ }
+ var trustedDomains = _extractAllDomains(configOptions.trustedDomains);
+ var len = trustedDomains.length;
+ if (len > 0) {
+ if (len === 1 && trustedDomains[0] === "*") {
+ return "always";
+ }
+ if (trustedDomains.indexOf(currentDomain) !== -1) {
+ if (len === 1 && currentDomain === swfDomain) {
+ return "sameDomain";
+ }
+ return "always";
+ }
+ }
+ return "never";
+ };
+ }();
+ /**
+ * Get the currently active/focused DOM element.
+ *
+ * @returns the currently active/focused element, or `null`
+ * @private
+ */
+ var _safeActiveElement = function() {
+ try {
+ return _document.activeElement;
+ } catch (err) {
+ return null;
+ }
+ };
+ /**
+ * Add a class to an element, if it doesn't already have it.
+ *
+ * @returns The element, with its new class added.
+ * @private
+ */
+ var _addClass = function(element, value) {
+ var c, cl, className, classNames = [];
+ if (typeof value === "string" && value) {
+ classNames = value.split(/\s+/);
+ }
+ if (element && element.nodeType === 1 && classNames.length > 0) {
+ if (element.classList) {
+ for (c = 0, cl = classNames.length; c < cl; c++) {
+ element.classList.add(classNames[c]);
+ }
+ } else if (element.hasOwnProperty("className")) {
+ className = " " + element.className + " ";
+ for (c = 0, cl = classNames.length; c < cl; c++) {
+ if (className.indexOf(" " + classNames[c] + " ") === -1) {
+ className += classNames[c] + " ";
+ }
+ }
+ element.className = className.replace(/^\s+|\s+$/g, "");
+ }
+ }
+ return element;
+ };
+ /**
+ * Remove a class from an element, if it has it.
+ *
+ * @returns The element, with its class removed.
+ * @private
+ */
+ var _removeClass = function(element, value) {
+ var c, cl, className, classNames = [];
+ if (typeof value === "string" && value) {
+ classNames = value.split(/\s+/);
+ }
+ if (element && element.nodeType === 1 && classNames.length > 0) {
+ if (element.classList && element.classList.length > 0) {
+ for (c = 0, cl = classNames.length; c < cl; c++) {
+ element.classList.remove(classNames[c]);
+ }
+ } else if (element.className) {
+ className = (" " + element.className + " ").replace(/[\r\n\t]/g, " ");
+ for (c = 0, cl = classNames.length; c < cl; c++) {
+ className = className.replace(" " + classNames[c] + " ", " ");
+ }
+ element.className = className.replace(/^\s+|\s+$/g, "");
+ }
+ }
+ return element;
+ };
+ /**
+ * Attempt to interpret the element's CSS styling. If `prop` is `"cursor"`,
+ * then we assume that it should be a hand ("pointer") cursor if the element
+ * is an anchor element ("a" tag).
+ *
+ * @returns The computed style property.
+ * @private
+ */
+ var _getStyle = function(el, prop) {
+ var value = _getComputedStyle(el, null).getPropertyValue(prop);
+ if (prop === "cursor") {
+ if (!value || value === "auto") {
+ if (el.nodeName === "A") {
+ return "pointer";
+ }
+ }
+ }
+ return value;
+ };
+ /**
+ * Get the absolutely positioned coordinates of a DOM element.
+ *
+ * @returns Object containing the element's position, width, and height.
+ * @private
+ */
+ var _getElementPosition = function(el) {
+ var pos = {
+ left: 0,
+ top: 0,
+ width: 0,
+ height: 0
+ };
+ if (el.getBoundingClientRect) {
+ var elRect = el.getBoundingClientRect();
+ var pageXOffset = _window.pageXOffset;
+ var pageYOffset = _window.pageYOffset;
+ var leftBorderWidth = _document.documentElement.clientLeft || 0;
+ var topBorderWidth = _document.documentElement.clientTop || 0;
+ var leftBodyOffset = 0;
+ var topBodyOffset = 0;
+ if (_getStyle(_document.body, "position") === "relative") {
+ var bodyRect = _document.body.getBoundingClientRect();
+ var htmlRect = _document.documentElement.getBoundingClientRect();
+ leftBodyOffset = bodyRect.left - htmlRect.left || 0;
+ topBodyOffset = bodyRect.top - htmlRect.top || 0;
+ }
+ pos.left = elRect.left + pageXOffset - leftBorderWidth - leftBodyOffset;
+ pos.top = elRect.top + pageYOffset - topBorderWidth - topBodyOffset;
+ pos.width = "width" in elRect ? elRect.width : elRect.right - elRect.left;
+ pos.height = "height" in elRect ? elRect.height : elRect.bottom - elRect.top;
+ }
+ return pos;
+ };
+ /**
+ * Determine is an element is visible somewhere within the document (page).
+ *
+ * @returns Boolean
+ * @private
+ */
+ var _isElementVisible = function(el) {
+ if (!el) {
+ return false;
+ }
+ var styles = _getComputedStyle(el, null);
+ var hasCssHeight = _parseFloat(styles.height) > 0;
+ var hasCssWidth = _parseFloat(styles.width) > 0;
+ var hasCssTop = _parseFloat(styles.top) >= 0;
+ var hasCssLeft = _parseFloat(styles.left) >= 0;
+ var cssKnows = hasCssHeight && hasCssWidth && hasCssTop && hasCssLeft;
+ var rect = cssKnows ? null : _getElementPosition(el);
+ var isVisible = styles.display !== "none" && styles.visibility !== "collapse" && (cssKnows || !!rect && (hasCssHeight || rect.height > 0) && (hasCssWidth || rect.width > 0) && (hasCssTop || rect.top >= 0) && (hasCssLeft || rect.left >= 0));
+ return isVisible;
+ };
+ /**
+ * Clear all existing timeouts and interval polling delegates.
+ *
+ * @returns `undefined`
+ * @private
+ */
+ var _clearTimeoutsAndPolling = function() {
+ _clearTimeout(_flashCheckTimeout);
+ _flashCheckTimeout = 0;
+ _clearInterval(_swfFallbackCheckInterval);
+ _swfFallbackCheckInterval = 0;
+ };
+ /**
+ * Reposition the Flash object to cover the currently activated element.
+ *
+ * @returns `undefined`
+ * @private
+ */
+ var _reposition = function() {
+ var htmlBridge;
+ if (_currentElement && (htmlBridge = _getHtmlBridge(_flashState.bridge))) {
+ var pos = _getElementPosition(_currentElement);
+ _extend(htmlBridge.style, {
+ width: pos.width + "px",
+ height: pos.height + "px",
+ top: pos.top + "px",
+ left: pos.left + "px",
+ zIndex: "" + _getSafeZIndex(_globalConfig.zIndex)
+ });
+ }
+ };
+ /**
+ * Sends a signal to the Flash object to display the hand cursor if `true`.
+ *
+ * @returns `undefined`
+ * @private
+ */
+ var _setHandCursor = function(enabled) {
+ if (_flashState.ready === true) {
+ if (_flashState.bridge && typeof _flashState.bridge.setHandCursor === "function") {
+ _flashState.bridge.setHandCursor(enabled);
+ } else {
+ _flashState.ready = false;
+ }
+ }
+ };
+ /**
+ * Get a safe value for `zIndex`
+ *
+ * @returns an integer, or "auto"
+ * @private
+ */
+ var _getSafeZIndex = function(val) {
+ if (/^(?:auto|inherit)$/.test(val)) {
+ return val;
+ }
+ var zIndex;
+ if (typeof val === "number" && !_isNaN(val)) {
+ zIndex = val;
+ } else if (typeof val === "string") {
+ zIndex = _getSafeZIndex(_parseInt(val, 10));
+ }
+ return typeof zIndex === "number" ? zIndex : "auto";
+ };
+ /**
+ * Attempt to detect if ZeroClipboard is executing inside of a sandboxed iframe.
+ * If it is, Flash Player cannot be used, so ZeroClipboard is dead in the water.
+ *
+ * @see {@link http://lists.w3.org/Archives/Public/public-whatwg-archive/2014Dec/0002.html}
+ * @see {@link https://github.com/zeroclipboard/zeroclipboard/issues/511}
+ * @see {@link http://zeroclipboard.org/test-iframes.html}
+ *
+ * @returns `true` (is sandboxed), `false` (is not sandboxed), or `null` (uncertain)
+ * @private
+ */
+ var _detectSandbox = function(doNotReassessFlashSupport) {
+ var effectiveScriptOrigin, frame, frameError, previousState = _flashState.sandboxed, isSandboxed = null;
+ doNotReassessFlashSupport = doNotReassessFlashSupport === true;
+ if (_pageIsFramed === false) {
+ isSandboxed = false;
+ } else {
+ try {
+ frame = window.frameElement || null;
+ } catch (e) {
+ frameError = {
+ name: e.name,
+ message: e.message
+ };
+ }
+ if (frame && frame.nodeType === 1 && frame.nodeName === "IFRAME") {
+ try {
+ isSandboxed = frame.hasAttribute("sandbox");
+ } catch (e) {
+ isSandboxed = null;
+ }
+ } else {
+ try {
+ effectiveScriptOrigin = document.domain || null;
+ } catch (e) {
+ effectiveScriptOrigin = null;
+ }
+ if (effectiveScriptOrigin === null || frameError && frameError.name === "SecurityError" && /(^|[\s\(\[@])sandbox(es|ed|ing|[\s\.,!\)\]@]|$)/.test(frameError.message.toLowerCase())) {
+ isSandboxed = true;
+ }
+ }
+ }
+ _flashState.sandboxed = isSandboxed;
+ if (previousState !== isSandboxed && !doNotReassessFlashSupport) {
+ _detectFlashSupport(_ActiveXObject);
+ }
+ return isSandboxed;
+ };
+ /**
+ * Detect the Flash Player status, version, and plugin type.
+ *
+ * @see {@link https://code.google.com/p/doctype-mirror/wiki/ArticleDetectFlash#The_code}
+ * @see {@link http://stackoverflow.com/questions/12866060/detecting-pepper-ppapi-flash-with-javascript}
+ *
+ * @returns `undefined`
+ * @private
+ */
+ var _detectFlashSupport = function(ActiveXObject) {
+ var plugin, ax, mimeType, hasFlash = false, isActiveX = false, isPPAPI = false, flashVersion = "";
+ /**
+ * Derived from Apple's suggested sniffer.
+ * @param {String} desc e.g. "Shockwave Flash 7.0 r61"
+ * @returns {String} "7.0.61"
+ * @private
+ */
+ function parseFlashVersion(desc) {
+ var matches = desc.match(/[\d]+/g);
+ matches.length = 3;
+ return matches.join(".");
+ }
+ function isPepperFlash(flashPlayerFileName) {
+ return !!flashPlayerFileName && (flashPlayerFileName = flashPlayerFileName.toLowerCase()) && (/^(pepflashplayer\.dll|libpepflashplayer\.so|pepperflashplayer\.plugin)$/.test(flashPlayerFileName) || flashPlayerFileName.slice(-13) === "chrome.plugin");
+ }
+ function inspectPlugin(plugin) {
+ if (plugin) {
+ hasFlash = true;
+ if (plugin.version) {
+ flashVersion = parseFlashVersion(plugin.version);
+ }
+ if (!flashVersion && plugin.description) {
+ flashVersion = parseFlashVersion(plugin.description);
+ }
+ if (plugin.filename) {
+ isPPAPI = isPepperFlash(plugin.filename);
+ }
+ }
+ }
+ if (_navigator.plugins && _navigator.plugins.length) {
+ plugin = _navigator.plugins["Shockwave Flash"];
+ inspectPlugin(plugin);
+ if (_navigator.plugins["Shockwave Flash 2.0"]) {
+ hasFlash = true;
+ flashVersion = "2.0.0.11";
+ }
+ } else if (_navigator.mimeTypes && _navigator.mimeTypes.length) {
+ mimeType = _navigator.mimeTypes["application/x-shockwave-flash"];
+ plugin = mimeType && mimeType.enabledPlugin;
+ inspectPlugin(plugin);
+ } else if (typeof ActiveXObject !== "undefined") {
+ isActiveX = true;
+ try {
+ ax = new ActiveXObject("ShockwaveFlash.ShockwaveFlash.7");
+ hasFlash = true;
+ flashVersion = parseFlashVersion(ax.GetVariable("$version"));
+ } catch (e1) {
+ try {
+ ax = new ActiveXObject("ShockwaveFlash.ShockwaveFlash.6");
+ hasFlash = true;
+ flashVersion = "6.0.21";
+ } catch (e2) {
+ try {
+ ax = new ActiveXObject("ShockwaveFlash.ShockwaveFlash");
+ hasFlash = true;
+ flashVersion = parseFlashVersion(ax.GetVariable("$version"));
+ } catch (e3) {
+ isActiveX = false;
+ }
+ }
+ }
+ }
+ _flashState.disabled = hasFlash !== true;
+ _flashState.outdated = flashVersion && _parseFloat(flashVersion) < _parseFloat(_minimumFlashVersion);
+ _flashState.version = flashVersion || "0.0.0";
+ _flashState.pluginType = isPPAPI ? "pepper" : isActiveX ? "activex" : hasFlash ? "netscape" : "unknown";
+ };
+ /**
+ * Invoke the Flash detection algorithms immediately upon inclusion so we're not waiting later.
+ */
+ _detectFlashSupport(_ActiveXObject);
+ /**
+ * Always assess the `sandboxed` state of the page at important Flash-related moments.
+ */
+ _detectSandbox(true);
+ /**
+ * A shell constructor for `ZeroClipboard` client instances.
+ *
+ * @constructor
+ */
+ var ZeroClipboard = function() {
+ if (!(this instanceof ZeroClipboard)) {
+ return new ZeroClipboard();
+ }
+ if (typeof ZeroClipboard._createClient === "function") {
+ ZeroClipboard._createClient.apply(this, _args(arguments));
+ }
+ };
+ /**
+ * The ZeroClipboard library's version number.
+ *
+ * @static
+ * @readonly
+ * @property {string}
+ */
+ _defineProperty(ZeroClipboard, "version", {
+ value: "2.2.0",
+ writable: false,
+ configurable: true,
+ enumerable: true
+ });
+ /**
+ * Update or get a copy of the ZeroClipboard global configuration.
+ * Returns a copy of the current/updated configuration.
+ *
+ * @returns Object
+ * @static
+ */
+ ZeroClipboard.config = function() {
+ return _config.apply(this, _args(arguments));
+ };
+ /**
+ * Diagnostic method that describes the state of the browser, Flash Player, and ZeroClipboard.
+ *
+ * @returns Object
+ * @static
+ */
+ ZeroClipboard.state = function() {
+ return _state.apply(this, _args(arguments));
+ };
+ /**
+ * Check if Flash is unusable for any reason: disabled, outdated, deactivated, etc.
+ *
+ * @returns Boolean
+ * @static
+ */
+ ZeroClipboard.isFlashUnusable = function() {
+ return _isFlashUnusable.apply(this, _args(arguments));
+ };
+ /**
+ * Register an event listener.
+ *
+ * @returns `ZeroClipboard`
+ * @static
+ */
+ ZeroClipboard.on = function() {
+ return _on.apply(this, _args(arguments));
+ };
+ /**
+ * Unregister an event listener.
+ * If no `listener` function/object is provided, it will unregister all listeners for the provided `eventType`.
+ * If no `eventType` is provided, it will unregister all listeners for every event type.
+ *
+ * @returns `ZeroClipboard`
+ * @static
+ */
+ ZeroClipboard.off = function() {
+ return _off.apply(this, _args(arguments));
+ };
+ /**
+ * Retrieve event listeners for an `eventType`.
+ * If no `eventType` is provided, it will retrieve all listeners for every event type.
+ *
+ * @returns array of listeners for the `eventType`; if no `eventType`, then a map/hash object of listeners for all event types; or `null`
+ */
+ ZeroClipboard.handlers = function() {
+ return _listeners.apply(this, _args(arguments));
+ };
+ /**
+ * Event emission receiver from the Flash object, forwarding to any registered JavaScript event listeners.
+ *
+ * @returns For the "copy" event, returns the Flash-friendly "clipData" object; otherwise `undefined`.
+ * @static
+ */
+ ZeroClipboard.emit = function() {
+ return _emit.apply(this, _args(arguments));
+ };
+ /**
+ * Create and embed the Flash object.
+ *
+ * @returns The Flash object
+ * @static
+ */
+ ZeroClipboard.create = function() {
+ return _create.apply(this, _args(arguments));
+ };
+ /**
+ * Self-destruct and clean up everything, including the embedded Flash object.
+ *
+ * @returns `undefined`
+ * @static
+ */
+ ZeroClipboard.destroy = function() {
+ return _destroy.apply(this, _args(arguments));
+ };
+ /**
+ * Set the pending data for clipboard injection.
+ *
+ * @returns `undefined`
+ * @static
+ */
+ ZeroClipboard.setData = function() {
+ return _setData.apply(this, _args(arguments));
+ };
+ /**
+ * Clear the pending data for clipboard injection.
+ * If no `format` is provided, all pending data formats will be cleared.
+ *
+ * @returns `undefined`
+ * @static
+ */
+ ZeroClipboard.clearData = function() {
+ return _clearData.apply(this, _args(arguments));
+ };
+ /**
+ * Get a copy of the pending data for clipboard injection.
+ * If no `format` is provided, a copy of ALL pending data formats will be returned.
+ *
+ * @returns `String` or `Object`
+ * @static
+ */
+ ZeroClipboard.getData = function() {
+ return _getData.apply(this, _args(arguments));
+ };
+ /**
+ * Sets the current HTML object that the Flash object should overlay. This will put the global
+ * Flash object on top of the current element; depending on the setup, this may also set the
+ * pending clipboard text data as well as the Flash object's wrapping element's title attribute
+ * based on the underlying HTML element and ZeroClipboard configuration.
+ *
+ * @returns `undefined`
+ * @static
+ */
+ ZeroClipboard.focus = ZeroClipboard.activate = function() {
+ return _focus.apply(this, _args(arguments));
+ };
+ /**
+ * Un-overlays the Flash object. This will put the global Flash object off-screen; depending on
+ * the setup, this may also unset the Flash object's wrapping element's title attribute based on
+ * the underlying HTML element and ZeroClipboard configuration.
+ *
+ * @returns `undefined`
+ * @static
+ */
+ ZeroClipboard.blur = ZeroClipboard.deactivate = function() {
+ return _blur.apply(this, _args(arguments));
+ };
+ /**
+ * Returns the currently focused/"activated" HTML element that the Flash object is wrapping.
+ *
+ * @returns `HTMLElement` or `null`
+ * @static
+ */
+ ZeroClipboard.activeElement = function() {
+ return _activeElement.apply(this, _args(arguments));
+ };
+ /**
+ * Keep track of the ZeroClipboard client instance counter.
+ */
+ var _clientIdCounter = 0;
+ /**
+ * Keep track of the state of the client instances.
+ *
+ * Entry structure:
+ * _clientMeta[client.id] = {
+ * instance: client,
+ * elements: [],
+ * handlers: {}
+ * };
+ */
+ var _clientMeta = {};
+ /**
+ * Keep track of the ZeroClipboard clipped elements counter.
+ */
+ var _elementIdCounter = 0;
+ /**
+ * Keep track of the state of the clipped element relationships to clients.
+ *
+ * Entry structure:
+ * _elementMeta[element.zcClippingId] = [client1.id, client2.id];
+ */
+ var _elementMeta = {};
+ /**
+ * Keep track of the state of the mouse event handlers for clipped elements.
+ *
+ * Entry structure:
+ * _mouseHandlers[element.zcClippingId] = {
+ * mouseover: function(event) {},
+ * mouseout: function(event) {},
+ * mouseenter: function(event) {},
+ * mouseleave: function(event) {},
+ * mousemove: function(event) {}
+ * };
+ */
+ var _mouseHandlers = {};
+ /**
+ * Extending the ZeroClipboard configuration defaults for the Client module.
+ */
+ _extend(_globalConfig, {
+ autoActivate: true
+ });
+ /**
+ * The real constructor for `ZeroClipboard` client instances.
+ * @private
+ */
+ var _clientConstructor = function(elements) {
+ var client = this;
+ client.id = "" + _clientIdCounter++;
+ _clientMeta[client.id] = {
+ instance: client,
+ elements: [],
+ handlers: {}
+ };
+ if (elements) {
+ client.clip(elements);
+ }
+ ZeroClipboard.on("*", function(event) {
+ return client.emit(event);
+ });
+ ZeroClipboard.on("destroy", function() {
+ client.destroy();
+ });
+ ZeroClipboard.create();
+ };
+ /**
+ * The underlying implementation of `ZeroClipboard.Client.prototype.on`.
+ * @private
+ */
+ var _clientOn = function(eventType, listener) {
+ var i, len, events, added = {}, meta = _clientMeta[this.id], handlers = meta && meta.handlers;
+ if (!meta) {
+ throw new Error("Attempted to add new listener(s) to a destroyed ZeroClipboard client instance");
+ }
+ if (typeof eventType === "string" && eventType) {
+ events = eventType.toLowerCase().split(/\s+/);
+ } else if (typeof eventType === "object" && eventType && typeof listener === "undefined") {
+ for (i in eventType) {
+ if (_hasOwn.call(eventType, i) && typeof i === "string" && i && typeof eventType[i] === "function") {
+ this.on(i, eventType[i]);
+ }
+ }
+ }
+ if (events && events.length) {
+ for (i = 0, len = events.length; i < len; i++) {
+ eventType = events[i].replace(/^on/, "");
+ added[eventType] = true;
+ if (!handlers[eventType]) {
+ handlers[eventType] = [];
+ }
+ handlers[eventType].push(listener);
+ }
+ if (added.ready && _flashState.ready) {
+ this.emit({
+ type: "ready",
+ client: this
+ });
+ }
+ if (added.error) {
+ for (i = 0, len = _flashStateErrorNames.length; i < len; i++) {
+ if (_flashState[_flashStateErrorNames[i].replace(/^flash-/, "")]) {
+ this.emit({
+ type: "error",
+ name: _flashStateErrorNames[i],
+ client: this
+ });
+ break;
+ }
+ }
+ if (_zcSwfVersion !== undefined && ZeroClipboard.version !== _zcSwfVersion) {
+ this.emit({
+ type: "error",
+ name: "version-mismatch",
+ jsVersion: ZeroClipboard.version,
+ swfVersion: _zcSwfVersion
+ });
+ }
+ }
+ }
+ return this;
+ };
+ /**
+ * The underlying implementation of `ZeroClipboard.Client.prototype.off`.
+ * @private
+ */
+ var _clientOff = function(eventType, listener) {
+ var i, len, foundIndex, events, perEventHandlers, meta = _clientMeta[this.id], handlers = meta && meta.handlers;
+ if (!handlers) {
+ return this;
+ }
+ if (arguments.length === 0) {
+ events = _keys(handlers);
+ } else if (typeof eventType === "string" && eventType) {
+ events = eventType.split(/\s+/);
+ } else if (typeof eventType === "object" && eventType && typeof listener === "undefined") {
+ for (i in eventType) {
+ if (_hasOwn.call(eventType, i) && typeof i === "string" && i && typeof eventType[i] === "function") {
+ this.off(i, eventType[i]);
+ }
+ }
+ }
+ if (events && events.length) {
+ for (i = 0, len = events.length; i < len; i++) {
+ eventType = events[i].toLowerCase().replace(/^on/, "");
+ perEventHandlers = handlers[eventType];
+ if (perEventHandlers && perEventHandlers.length) {
+ if (listener) {
+ foundIndex = perEventHandlers.indexOf(listener);
+ while (foundIndex !== -1) {
+ perEventHandlers.splice(foundIndex, 1);
+ foundIndex = perEventHandlers.indexOf(listener, foundIndex);
+ }
+ } else {
+ perEventHandlers.length = 0;
+ }
+ }
+ }
+ }
+ return this;
+ };
+ /**
+ * The underlying implementation of `ZeroClipboard.Client.prototype.handlers`.
+ * @private
+ */
+ var _clientListeners = function(eventType) {
+ var copy = null, handlers = _clientMeta[this.id] && _clientMeta[this.id].handlers;
+ if (handlers) {
+ if (typeof eventType === "string" && eventType) {
+ copy = handlers[eventType] ? handlers[eventType].slice(0) : [];
+ } else {
+ copy = _deepCopy(handlers);
+ }
+ }
+ return copy;
+ };
+ /**
+ * The underlying implementation of `ZeroClipboard.Client.prototype.emit`.
+ * @private
+ */
+ var _clientEmit = function(event) {
+ if (_clientShouldEmit.call(this, event)) {
+ if (typeof event === "object" && event && typeof event.type === "string" && event.type) {
+ event = _extend({}, event);
+ }
+ var eventCopy = _extend({}, _createEvent(event), {
+ client: this
+ });
+ _clientDispatchCallbacks.call(this, eventCopy);
+ }
+ return this;
+ };
+ /**
+ * The underlying implementation of `ZeroClipboard.Client.prototype.clip`.
+ * @private
+ */
+ var _clientClip = function(elements) {
+ if (!_clientMeta[this.id]) {
+ throw new Error("Attempted to clip element(s) to a destroyed ZeroClipboard client instance");
+ }
+ elements = _prepClip(elements);
+ for (var i = 0; i < elements.length; i++) {
+ if (_hasOwn.call(elements, i) && elements[i] && elements[i].nodeType === 1) {
+ if (!elements[i].zcClippingId) {
+ elements[i].zcClippingId = "zcClippingId_" + _elementIdCounter++;
+ _elementMeta[elements[i].zcClippingId] = [ this.id ];
+ if (_globalConfig.autoActivate === true) {
+ _addMouseHandlers(elements[i]);
+ }
+ } else if (_elementMeta[elements[i].zcClippingId].indexOf(this.id) === -1) {
+ _elementMeta[elements[i].zcClippingId].push(this.id);
+ }
+ var clippedElements = _clientMeta[this.id] && _clientMeta[this.id].elements;
+ if (clippedElements.indexOf(elements[i]) === -1) {
+ clippedElements.push(elements[i]);
+ }
+ }
+ }
+ return this;
+ };
+ /**
+ * The underlying implementation of `ZeroClipboard.Client.prototype.unclip`.
+ * @private
+ */
+ var _clientUnclip = function(elements) {
+ var meta = _clientMeta[this.id];
+ if (!meta) {
+ return this;
+ }
+ var clippedElements = meta.elements;
+ var arrayIndex;
+ if (typeof elements === "undefined") {
+ elements = clippedElements.slice(0);
+ } else {
+ elements = _prepClip(elements);
+ }
+ for (var i = elements.length; i--; ) {
+ if (_hasOwn.call(elements, i) && elements[i] && elements[i].nodeType === 1) {
+ arrayIndex = 0;
+ while ((arrayIndex = clippedElements.indexOf(elements[i], arrayIndex)) !== -1) {
+ clippedElements.splice(arrayIndex, 1);
+ }
+ var clientIds = _elementMeta[elements[i].zcClippingId];
+ if (clientIds) {
+ arrayIndex = 0;
+ while ((arrayIndex = clientIds.indexOf(this.id, arrayIndex)) !== -1) {
+ clientIds.splice(arrayIndex, 1);
+ }
+ if (clientIds.length === 0) {
+ if (_globalConfig.autoActivate === true) {
+ _removeMouseHandlers(elements[i]);
+ }
+ delete elements[i].zcClippingId;
+ }
+ }
+ }
+ }
+ return this;
+ };
+ /**
+ * The underlying implementation of `ZeroClipboard.Client.prototype.elements`.
+ * @private
+ */
+ var _clientElements = function() {
+ var meta = _clientMeta[this.id];
+ return meta && meta.elements ? meta.elements.slice(0) : [];
+ };
+ /**
+ * The underlying implementation of `ZeroClipboard.Client.prototype.destroy`.
+ * @private
+ */
+ var _clientDestroy = function() {
+ if (!_clientMeta[this.id]) {
+ return;
+ }
+ this.unclip();
+ this.off();
+ delete _clientMeta[this.id];
+ };
+ /**
+ * Inspect an Event to see if the Client (`this`) should honor it for emission.
+ * @private
+ */
+ var _clientShouldEmit = function(event) {
+ if (!(event && event.type)) {
+ return false;
+ }
+ if (event.client && event.client !== this) {
+ return false;
+ }
+ var meta = _clientMeta[this.id];
+ var clippedEls = meta && meta.elements;
+ var hasClippedEls = !!clippedEls && clippedEls.length > 0;
+ var goodTarget = !event.target || hasClippedEls && clippedEls.indexOf(event.target) !== -1;
+ var goodRelTarget = event.relatedTarget && hasClippedEls && clippedEls.indexOf(event.relatedTarget) !== -1;
+ var goodClient = event.client && event.client === this;
+ if (!meta || !(goodTarget || goodRelTarget || goodClient)) {
+ return false;
+ }
+ return true;
+ };
+ /**
+ * Handle the actual dispatching of events to a client instance.
+ *
+ * @returns `undefined`
+ * @private
+ */
+ var _clientDispatchCallbacks = function(event) {
+ var meta = _clientMeta[this.id];
+ if (!(typeof event === "object" && event && event.type && meta)) {
+ return;
+ }
+ var async = _shouldPerformAsync(event);
+ var wildcardTypeHandlers = meta && meta.handlers["*"] || [];
+ var specificTypeHandlers = meta && meta.handlers[event.type] || [];
+ var handlers = wildcardTypeHandlers.concat(specificTypeHandlers);
+ if (handlers && handlers.length) {
+ var i, len, func, context, eventCopy, originalContext = this;
+ for (i = 0, len = handlers.length; i < len; i++) {
+ func = handlers[i];
+ context = originalContext;
+ if (typeof func === "string" && typeof _window[func] === "function") {
+ func = _window[func];
+ }
+ if (typeof func === "object" && func && typeof func.handleEvent === "function") {
+ context = func;
+ func = func.handleEvent;
+ }
+ if (typeof func === "function") {
+ eventCopy = _extend({}, event);
+ _dispatchCallback(func, context, [ eventCopy ], async);
+ }
+ }
+ }
+ };
+ /**
+ * Prepares the elements for clipping/unclipping.
+ *
+ * @returns An Array of elements.
+ * @private
+ */
+ var _prepClip = function(elements) {
+ if (typeof elements === "string") {
+ elements = [];
+ }
+ return typeof elements.length !== "number" ? [ elements ] : elements;
+ };
+ /**
+ * Add a `mouseover` handler function for a clipped element.
+ *
+ * @returns `undefined`
+ * @private
+ */
+ var _addMouseHandlers = function(element) {
+ if (!(element && element.nodeType === 1)) {
+ return;
+ }
+ var _suppressMouseEvents = function(event) {
+ if (!(event || (event = _window.event))) {
+ return;
+ }
+ if (event._source !== "js") {
+ event.stopImmediatePropagation();
+ event.preventDefault();
+ }
+ delete event._source;
+ };
+ var _elementMouseOver = function(event) {
+ if (!(event || (event = _window.event))) {
+ return;
+ }
+ _suppressMouseEvents(event);
+ ZeroClipboard.focus(element);
+ };
+ element.addEventListener("mouseover", _elementMouseOver, false);
+ element.addEventListener("mouseout", _suppressMouseEvents, false);
+ element.addEventListener("mouseenter", _suppressMouseEvents, false);
+ element.addEventListener("mouseleave", _suppressMouseEvents, false);
+ element.addEventListener("mousemove", _suppressMouseEvents, false);
+ _mouseHandlers[element.zcClippingId] = {
+ mouseover: _elementMouseOver,
+ mouseout: _suppressMouseEvents,
+ mouseenter: _suppressMouseEvents,
+ mouseleave: _suppressMouseEvents,
+ mousemove: _suppressMouseEvents
+ };
+ };
+ /**
+ * Remove a `mouseover` handler function for a clipped element.
+ *
+ * @returns `undefined`
+ * @private
+ */
+ var _removeMouseHandlers = function(element) {
+ if (!(element && element.nodeType === 1)) {
+ return;
+ }
+ var mouseHandlers = _mouseHandlers[element.zcClippingId];
+ if (!(typeof mouseHandlers === "object" && mouseHandlers)) {
+ return;
+ }
+ var key, val, mouseEvents = [ "move", "leave", "enter", "out", "over" ];
+ for (var i = 0, len = mouseEvents.length; i < len; i++) {
+ key = "mouse" + mouseEvents[i];
+ val = mouseHandlers[key];
+ if (typeof val === "function") {
+ element.removeEventListener(key, val, false);
+ }
+ }
+ delete _mouseHandlers[element.zcClippingId];
+ };
+ /**
+ * Creates a new ZeroClipboard client instance.
+ * Optionally, auto-`clip` an element or collection of elements.
+ *
+ * @constructor
+ */
+ ZeroClipboard._createClient = function() {
+ _clientConstructor.apply(this, _args(arguments));
+ };
+ /**
+ * Register an event listener to the client.
+ *
+ * @returns `this`
+ */
+ ZeroClipboard.prototype.on = function() {
+ return _clientOn.apply(this, _args(arguments));
+ };
+ /**
+ * Unregister an event handler from the client.
+ * If no `listener` function/object is provided, it will unregister all handlers for the provided `eventType`.
+ * If no `eventType` is provided, it will unregister all handlers for every event type.
+ *
+ * @returns `this`
+ */
+ ZeroClipboard.prototype.off = function() {
+ return _clientOff.apply(this, _args(arguments));
+ };
+ /**
+ * Retrieve event listeners for an `eventType` from the client.
+ * If no `eventType` is provided, it will retrieve all listeners for every event type.
+ *
+ * @returns array of listeners for the `eventType`; if no `eventType`, then a map/hash object of listeners for all event types; or `null`
+ */
+ ZeroClipboard.prototype.handlers = function() {
+ return _clientListeners.apply(this, _args(arguments));
+ };
+ /**
+ * Event emission receiver from the Flash object for this client's registered JavaScript event listeners.
+ *
+ * @returns For the "copy" event, returns the Flash-friendly "clipData" object; otherwise `undefined`.
+ */
+ ZeroClipboard.prototype.emit = function() {
+ return _clientEmit.apply(this, _args(arguments));
+ };
+ /**
+ * Register clipboard actions for new element(s) to the client.
+ *
+ * @returns `this`
+ */
+ ZeroClipboard.prototype.clip = function() {
+ return _clientClip.apply(this, _args(arguments));
+ };
+ /**
+ * Unregister the clipboard actions of previously registered element(s) on the page.
+ * If no elements are provided, ALL registered elements will be unregistered.
+ *
+ * @returns `this`
+ */
+ ZeroClipboard.prototype.unclip = function() {
+ return _clientUnclip.apply(this, _args(arguments));
+ };
+ /**
+ * Get all of the elements to which this client is clipped.
+ *
+ * @returns array of clipped elements
+ */
+ ZeroClipboard.prototype.elements = function() {
+ return _clientElements.apply(this, _args(arguments));
+ };
+ /**
+ * Self-destruct and clean up everything for a single client.
+ * This will NOT destroy the embedded Flash object.
+ *
+ * @returns `undefined`
+ */
+ ZeroClipboard.prototype.destroy = function() {
+ return _clientDestroy.apply(this, _args(arguments));
+ };
+ /**
+ * Stores the pending plain text to inject into the clipboard.
+ *
+ * @returns `this`
+ */
+ ZeroClipboard.prototype.setText = function(text) {
+ if (!_clientMeta[this.id]) {
+ throw new Error("Attempted to set pending clipboard data from a destroyed ZeroClipboard client instance");
+ }
+ ZeroClipboard.setData("text/plain", text);
+ return this;
+ };
+ /**
+ * Stores the pending HTML text to inject into the clipboard.
+ *
+ * @returns `this`
+ */
+ ZeroClipboard.prototype.setHtml = function(html) {
+ if (!_clientMeta[this.id]) {
+ throw new Error("Attempted to set pending clipboard data from a destroyed ZeroClipboard client instance");
+ }
+ ZeroClipboard.setData("text/html", html);
+ return this;
+ };
+ /**
+ * Stores the pending rich text (RTF) to inject into the clipboard.
+ *
+ * @returns `this`
+ */
+ ZeroClipboard.prototype.setRichText = function(richText) {
+ if (!_clientMeta[this.id]) {
+ throw new Error("Attempted to set pending clipboard data from a destroyed ZeroClipboard client instance");
+ }
+ ZeroClipboard.setData("application/rtf", richText);
+ return this;
+ };
+ /**
+ * Stores the pending data to inject into the clipboard.
+ *
+ * @returns `this`
+ */
+ ZeroClipboard.prototype.setData = function() {
+ if (!_clientMeta[this.id]) {
+ throw new Error("Attempted to set pending clipboard data from a destroyed ZeroClipboard client instance");
+ }
+ ZeroClipboard.setData.apply(this, _args(arguments));
+ return this;
+ };
+ /**
+ * Clears the pending data to inject into the clipboard.
+ * If no `format` is provided, all pending data formats will be cleared.
+ *
+ * @returns `this`
+ */
+ ZeroClipboard.prototype.clearData = function() {
+ if (!_clientMeta[this.id]) {
+ throw new Error("Attempted to clear pending clipboard data from a destroyed ZeroClipboard client instance");
+ }
+ ZeroClipboard.clearData.apply(this, _args(arguments));
+ return this;
+ };
+ /**
+ * Gets a copy of the pending data to inject into the clipboard.
+ * If no `format` is provided, a copy of ALL pending data formats will be returned.
+ *
+ * @returns `String` or `Object`
+ */
+ ZeroClipboard.prototype.getData = function() {
+ if (!_clientMeta[this.id]) {
+ throw new Error("Attempted to get pending clipboard data from a destroyed ZeroClipboard client instance");
+ }
+ return ZeroClipboard.getData.apply(this, _args(arguments));
+ };
+ if (typeof define === "function" && define.amd) {
+ define(function() {
+ return ZeroClipboard;
+ });
+ } else if (typeof module === "object" && module && typeof module.exports === "object" && module.exports) {
+ module.exports = ZeroClipboard;
+ } else {
+ window.ZeroClipboard = ZeroClipboard;
+ }
+})(function() {
+ return this || window;
+}());
\ No newline at end of file
diff --git a/release/pui-v1.9.1/zeroclipboard/ZeroClipboard.swf b/release/pui-v1.9.1/zeroclipboard/ZeroClipboard.swf
new file mode 100644
index 000000000..8bad6a3e3
Binary files /dev/null and b/release/pui-v1.9.1/zeroclipboard/ZeroClipboard.swf differ
diff --git a/src/pivotal-ui-react/alerts/package.json b/src/pivotal-ui-react/alerts/package.json
index 2edf70de2..a7841e872 100644
--- a/src/pivotal-ui-react/alerts/package.json
+++ b/src/pivotal-ui-react/alerts/package.json
@@ -1,11 +1,11 @@
{
- "version": "1.9.0",
+ "version": "1.9.1",
"description": "React components to display flash messages to the user",
"homepage": "http://styleguide.pivotal.io/react_beta.html#alerts_react",
"dependencies": {
"react-bootstrap": "0.23.3",
- "pui-css-alerts": "1.9.0",
- "pui-css-iconography": "1.9.0",
- "pui-react-media": "1.9.0"
+ "pui-css-alerts": "1.9.1",
+ "pui-css-iconography": "1.9.1",
+ "pui-react-media": "1.9.1"
}
}
\ No newline at end of file
diff --git a/src/pivotal-ui-react/back-to-top/package.json b/src/pivotal-ui-react/back-to-top/package.json
index 061176d81..b73b03666 100644
--- a/src/pivotal-ui-react/back-to-top/package.json
+++ b/src/pivotal-ui-react/back-to-top/package.json
@@ -1,9 +1,9 @@
{
- "version": "1.9.0",
+ "version": "1.9.1",
"description": "React Back to Top component",
"homepage": "http://styleguide.pivotal.io/react_beta.html#back_to_top",
"dependencies": {
- "pui-css-back-to-top": "1.9.0",
+ "pui-css-back-to-top": "1.9.1",
"pui-react-animation": "^0.0.5",
"lodash.throttle": "^3.0.2"
}
diff --git a/src/pivotal-ui-react/buttons/package.json b/src/pivotal-ui-react/buttons/package.json
index d7dd2bd6e..a6e502bf0 100644
--- a/src/pivotal-ui-react/buttons/package.json
+++ b/src/pivotal-ui-react/buttons/package.json
@@ -1,9 +1,9 @@
{
- "version": "1.9.0",
+ "version": "1.9.1",
"description": "A collection of React components providing styled buttons and links",
"homepage": "http://styleguide.pivotal.io/react_beta.html#button_react",
"dependencies": {
"classnames": "^1.2.0",
- "pui-css-buttons": "1.9.0"
+ "pui-css-buttons": "1.9.1"
}
}
\ No newline at end of file
diff --git a/src/pivotal-ui-react/collapse/package.json b/src/pivotal-ui-react/collapse/package.json
index e11d75eb4..5320c9d4b 100644
--- a/src/pivotal-ui-react/collapse/package.json
+++ b/src/pivotal-ui-react/collapse/package.json
@@ -1,12 +1,12 @@
{
- "version": "1.9.0",
+ "version": "1.9.1",
"description": "React components providing accordions for showing and hiding content",
"homepage": "http://styleguide.pivotal.io/react_beta.html#collapse_react",
"dependencies": {
"react-bootstrap": "0.23.3",
"classnames": "^1.2.0",
- "pui-css-collapse": "1.9.0",
- "pui-css-iconography": "1.9.0",
- "pui-css-dividers": "1.9.0"
+ "pui-css-collapse": "1.9.1",
+ "pui-css-iconography": "1.9.1",
+ "pui-css-dividers": "1.9.1"
}
}
\ No newline at end of file
diff --git a/src/pivotal-ui-react/dividers/package.json b/src/pivotal-ui-react/dividers/package.json
index fc2a6d4d9..98048c2a5 100644
--- a/src/pivotal-ui-react/dividers/package.json
+++ b/src/pivotal-ui-react/dividers/package.json
@@ -1,9 +1,9 @@
{
- "version": "1.9.0",
+ "version": "1.9.1",
"description": "React components providing horizontal rules for dividing content",
"homepage": "http://styleguide.pivotal.io/react_beta.html#divider_react",
"dependencies": {
"classnames": "^1.2.0",
- "pui-css-dividers": "1.9.0"
+ "pui-css-dividers": "1.9.1"
}
}
\ No newline at end of file
diff --git a/src/pivotal-ui-react/draggable-list/package.json b/src/pivotal-ui-react/draggable-list/package.json
index c9377fbaf..0834ea574 100644
--- a/src/pivotal-ui-react/draggable-list/package.json
+++ b/src/pivotal-ui-react/draggable-list/package.json
@@ -1,9 +1,9 @@
{
- "version": "1.9.0",
+ "version": "1.9.1",
"description": "A React component for showing a list of items that can be re-ordered by the user",
"homepage": "http://styleguide.pivotal.io/react_beta.html#list_draggable_react",
"dependencies": {
"classnames": "^1.2.0",
- "pui-css-lists": "1.9.0"
+ "pui-css-lists": "1.9.1"
}
}
\ No newline at end of file
diff --git a/src/pivotal-ui-react/dropdowns/package.json b/src/pivotal-ui-react/dropdowns/package.json
index ac5c43ce7..2385058b5 100644
--- a/src/pivotal-ui-react/dropdowns/package.json
+++ b/src/pivotal-ui-react/dropdowns/package.json
@@ -1,11 +1,11 @@
{
- "version": "1.9.0",
+ "version": "1.9.1",
"description": "A React dropdown component",
"homepage": "http://styleguide.pivotal.io/react_beta.html#dropdown_react",
"dependencies": {
"react-bootstrap": "0.23.3",
- "pui-css-dropdowns": "1.9.0",
- "pui-css-iconography": "1.9.0",
- "pui-css-buttons": "1.9.0"
+ "pui-css-dropdowns": "1.9.1",
+ "pui-css-iconography": "1.9.1",
+ "pui-css-buttons": "1.9.1"
}
}
\ No newline at end of file
diff --git a/src/pivotal-ui-react/expander/package.json b/src/pivotal-ui-react/expander/package.json
index ba9202818..a95c4c332 100644
--- a/src/pivotal-ui-react/expander/package.json
+++ b/src/pivotal-ui-react/expander/package.json
@@ -1,5 +1,5 @@
{
- "version": "1.9.0",
+ "version": "1.9.1",
"description": "A React component that provides an accordion for showing and hiding content where the toggle and the content can be in separate places",
"homepage": "http://styleguide.pivotal.io/react_beta.html#expander_react"
}
\ No newline at end of file
diff --git a/src/pivotal-ui-react/grids/package.json b/src/pivotal-ui-react/grids/package.json
index ef4c89d5b..23a2f85fa 100644
--- a/src/pivotal-ui-react/grids/package.json
+++ b/src/pivotal-ui-react/grids/package.json
@@ -1,9 +1,9 @@
{
- "version": "1.9.0",
+ "version": "1.9.1",
"description": "React components for laying-out content in a grid",
"homepage": "http://styleguide.pivotal.io/react_beta.html#grid_react",
"dependencies": {
- "pui-css-grids": "1.9.0",
+ "pui-css-grids": "1.9.1",
"classnames": "^1.2.0",
"react-bootstrap": "0.23.3"
}
diff --git a/src/pivotal-ui-react/iconography/package.json b/src/pivotal-ui-react/iconography/package.json
index f5e0a9b92..7cf29cfa1 100644
--- a/src/pivotal-ui-react/iconography/package.json
+++ b/src/pivotal-ui-react/iconography/package.json
@@ -1,10 +1,10 @@
{
- "version": "1.9.0",
+ "version": "1.9.1",
"description": "A React component for rendering Font Awesome icons",
"homepage": "http://styleguide.pivotal.io/react_beta.html#icon_react",
"dependencies": {
"react-fa": "^3.0.0",
- "pui-css-iconography": "1.9.0",
+ "pui-css-iconography": "1.9.1",
"object-assign": "^2.0.0"
}
}
\ No newline at end of file
diff --git a/src/pivotal-ui-react/images/package.json b/src/pivotal-ui-react/images/package.json
index 5b644be38..070ea47f0 100644
--- a/src/pivotal-ui-react/images/package.json
+++ b/src/pivotal-ui-react/images/package.json
@@ -1,9 +1,9 @@
{
- "version": "1.9.0",
+ "version": "1.9.1",
"description": "A React component for rendering responsive and linked images",
"homepage": "http://styleguide.pivotal.io/react_beta.html#image_react",
"dependencies": {
"classnames": "^1.2.0",
- "pui-css-images": "1.9.0"
+ "pui-css-images": "1.9.1"
}
}
\ No newline at end of file
diff --git a/src/pivotal-ui-react/labels/package.json b/src/pivotal-ui-react/labels/package.json
index 485ed041d..8fa0016d1 100644
--- a/src/pivotal-ui-react/labels/package.json
+++ b/src/pivotal-ui-react/labels/package.json
@@ -1,8 +1,8 @@
{
- "version": "1.9.0",
+ "version": "1.9.1",
"description": "A React component for showing a colored pill of text",
"homepage": "http://styleguide.pivotal.io/react_beta.html#label_react",
"dependencies": {
- "pui-css-labels": "1.9.0"
+ "pui-css-labels": "1.9.1"
}
}
\ No newline at end of file
diff --git a/src/pivotal-ui-react/lists/package.json b/src/pivotal-ui-react/lists/package.json
index ee7e72679..5dde0b1cf 100644
--- a/src/pivotal-ui-react/lists/package.json
+++ b/src/pivotal-ui-react/lists/package.json
@@ -1,9 +1,9 @@
{
- "version": "1.9.0",
+ "version": "1.9.1",
"description": "A collection of React components for rendering different kinds of lists",
"homepage": "http://styleguide.pivotal.io/react_beta.html#list_react",
"dependencies": {
- "pui-css-lists": "1.9.0",
+ "pui-css-lists": "1.9.1",
"classnames": "^1.2.0"
}
}
\ No newline at end of file
diff --git a/src/pivotal-ui-react/media/package.json b/src/pivotal-ui-react/media/package.json
index 8fffec00a..3ad86e5e9 100644
--- a/src/pivotal-ui-react/media/package.json
+++ b/src/pivotal-ui-react/media/package.json
@@ -1,9 +1,9 @@
{
- "version": "1.9.0",
+ "version": "1.9.1",
"description": "React components for laying out images/audio/video next to text content",
"homepage": "http://styleguide.pivotal.io/react_beta.html#media_react",
"dependencies": {
"classnames": "^1.2.0",
- "pui-css-media": "1.9.0"
+ "pui-css-media": "1.9.1"
}
}
\ No newline at end of file
diff --git a/src/pivotal-ui-react/modals/package.json b/src/pivotal-ui-react/modals/package.json
index 30c6313c3..4fd276d29 100644
--- a/src/pivotal-ui-react/modals/package.json
+++ b/src/pivotal-ui-react/modals/package.json
@@ -1,9 +1,9 @@
{
- "version": "1.9.0",
+ "version": "1.9.1",
"description": "React components for opening and closing modal windows",
"homepage": "http://styleguide.pivotal.io/react_beta.html#modal_react",
"dependencies": {
- "pui-css-modals": "1.9.0",
- "pui-react-typography": "1.9.0"
+ "pui-css-modals": "1.9.1",
+ "pui-react-typography": "1.9.1"
}
}
\ No newline at end of file
diff --git a/src/pivotal-ui-react/notifications/package.json b/src/pivotal-ui-react/notifications/package.json
index 678516eed..75c73e36e 100644
--- a/src/pivotal-ui-react/notifications/package.json
+++ b/src/pivotal-ui-react/notifications/package.json
@@ -1,9 +1,9 @@
{
- "version": "1.9.0",
+ "version": "1.9.1",
"description": "A React component for showing a dropdown of notification messages",
"homepage": "http://styleguide.pivotal.io/react_beta.html#notifications_react",
"dependencies": {
- "pui-react-dropdowns": "1.9.0",
- "pui-react-iconography": "1.9.0"
+ "pui-react-dropdowns": "1.9.1",
+ "pui-react-iconography": "1.9.1"
}
}
\ No newline at end of file
diff --git a/src/pivotal-ui-react/overlay-trigger/package.json b/src/pivotal-ui-react/overlay-trigger/package.json
index 1cfc6bc20..299c0c017 100644
--- a/src/pivotal-ui-react/overlay-trigger/package.json
+++ b/src/pivotal-ui-react/overlay-trigger/package.json
@@ -1,5 +1,5 @@
{
- "version": "1.9.0",
+ "version": "1.9.1",
"description": "A React component for displaying a tooltip or popover on user action",
"dependencies": {
"react-bootstrap": "0.23.3"
diff --git a/src/pivotal-ui-react/panels/package.json b/src/pivotal-ui-react/panels/package.json
index 4c2f35644..e3f9c757c 100644
--- a/src/pivotal-ui-react/panels/package.json
+++ b/src/pivotal-ui-react/panels/package.json
@@ -1,9 +1,9 @@
{
- "version": "1.9.0",
+ "version": "1.9.1",
"description": "React components that provide containers for related content",
"homepage": "http://styleguide.pivotal.io/react_beta.html#panel_react",
"dependencies": {
"classnames": "^1.2.0",
- "pui-css-panels": "1.9.0"
+ "pui-css-panels": "1.9.1"
}
}
\ No newline at end of file
diff --git a/src/pivotal-ui-react/panes/package.json b/src/pivotal-ui-react/panes/package.json
index e62b5eda8..fc5abca3b 100644
--- a/src/pivotal-ui-react/panes/package.json
+++ b/src/pivotal-ui-react/panes/package.json
@@ -1,9 +1,9 @@
{
- "version": "1.9.0",
+ "version": "1.9.1",
"description": "React components that provide large browser-filling containers for content",
"homepage": "http://styleguide.pivotal.io/react_beta.html#pane_react",
"dependencies": {
"classnames": "^1.2.0",
- "pui-css-panes": "1.9.0"
+ "pui-css-panes": "1.9.1"
}
}
\ No newline at end of file
diff --git a/src/pivotal-ui-react/portals/package.json b/src/pivotal-ui-react/portals/package.json
index 4dd8a4361..4ef1f3855 100644
--- a/src/pivotal-ui-react/portals/package.json
+++ b/src/pivotal-ui-react/portals/package.json
@@ -1,5 +1,5 @@
{
- "version": "1.9.0",
+ "version": "1.9.1",
"description": "React components that provide portals",
"homepage": "http://styleguide.pivotal.io/react_beta.html",
"dependencies": {
diff --git a/src/pivotal-ui-react/radio-group/package.json b/src/pivotal-ui-react/radio-group/package.json
index f6b436d3e..360958eb4 100644
--- a/src/pivotal-ui-react/radio-group/package.json
+++ b/src/pivotal-ui-react/radio-group/package.json
@@ -1,8 +1,8 @@
{
- "version": "1.9.0",
+ "version": "1.9.1",
"description": "A React component for managing groups of radio buttons",
"homepage": "http://styleguide.pivotal.io/react_beta.html#form_radio_input_react",
"dependencies": {
- "pui-css-forms": "1.9.0"
+ "pui-css-forms": "1.9.1"
}
}
\ No newline at end of file
diff --git a/src/pivotal-ui-react/radio/package.json b/src/pivotal-ui-react/radio/package.json
index fcbac99f5..9c60d0d24 100644
--- a/src/pivotal-ui-react/radio/package.json
+++ b/src/pivotal-ui-react/radio/package.json
@@ -1,8 +1,8 @@
{
- "version": "1.9.0",
+ "version": "1.9.1",
"description": "A React component that provides styled radio buttons",
"homepage": "http://styleguide.pivotal.io/react_beta.html#form_radio_input_react",
"dependencies": {
- "pui-css-forms": "1.9.0"
+ "pui-css-forms": "1.9.1"
}
}
\ No newline at end of file
diff --git a/src/pivotal-ui-react/ribbons/package.json b/src/pivotal-ui-react/ribbons/package.json
index 898fd92a7..d384999dd 100644
--- a/src/pivotal-ui-react/ribbons/package.json
+++ b/src/pivotal-ui-react/ribbons/package.json
@@ -1,8 +1,8 @@
{
- "version": "1.9.0",
+ "version": "1.9.1",
"description": "React components that provide informational text callouts",
"homepage": "http://styleguide.pivotal.io/react_beta.html#ribbons_react",
"dependencies": {
- "pui-css-ribbons": "1.9.0"
+ "pui-css-ribbons": "1.9.1"
}
}
\ No newline at end of file
diff --git a/src/pivotal-ui-react/search-input/package.json b/src/pivotal-ui-react/search-input/package.json
index 1531ffca7..686874953 100644
--- a/src/pivotal-ui-react/search-input/package.json
+++ b/src/pivotal-ui-react/search-input/package.json
@@ -1,10 +1,10 @@
{
- "version": "1.9.0",
+ "version": "1.9.1",
"description": "A React component that provides a styled text input for inputting search queries",
"homepage": "http://styleguide.pivotal.io/react_beta.html#form_search_input_react",
"dependencies": {
"classnames": "^1.2.0",
- "pui-css-forms": "1.9.0",
- "pui-css-iconography": "1.9.0"
+ "pui-css-forms": "1.9.1",
+ "pui-css-iconography": "1.9.1"
}
}
\ No newline at end of file
diff --git a/src/pivotal-ui-react/sortable-table/package.json b/src/pivotal-ui-react/sortable-table/package.json
index 17c81fb27..7bb462e38 100644
--- a/src/pivotal-ui-react/sortable-table/package.json
+++ b/src/pivotal-ui-react/sortable-table/package.json
@@ -1,11 +1,11 @@
{
- "version": "1.9.0",
+ "version": "1.9.1",
"description": "A React component that provides a table that can be sorted by column",
"homepage": "http://styleguide.pivotal.io/react_beta.html#table_sortable_react",
"dependencies": {
"classnames": "^1.2.0",
"lodash.sortby": "^3.1.1",
- "pui-css-iconography": "1.9.0",
- "pui-css-tables": "1.9.0"
+ "pui-css-iconography": "1.9.1",
+ "pui-css-tables": "1.9.1"
}
}
\ No newline at end of file
diff --git a/src/pivotal-ui-react/tabs/package.json b/src/pivotal-ui-react/tabs/package.json
index 17552504c..6aca55d52 100644
--- a/src/pivotal-ui-react/tabs/package.json
+++ b/src/pivotal-ui-react/tabs/package.json
@@ -1,9 +1,9 @@
{
- "version": "1.9.0",
+ "version": "1.9.1",
"description": "React components for tab-based content toggling",
"homepage": "http://styleguide.pivotal.io/react_beta.html#tabs_react",
"dependencies": {
"react-bootstrap": "0.23.3",
- "pui-css-tabs": "1.9.0"
+ "pui-css-tabs": "1.9.1"
}
}
\ No newline at end of file
diff --git a/src/pivotal-ui-react/tooltip/package.json b/src/pivotal-ui-react/tooltip/package.json
index a8bc773d0..4016b0ff1 100644
--- a/src/pivotal-ui-react/tooltip/package.json
+++ b/src/pivotal-ui-react/tooltip/package.json
@@ -1,9 +1,9 @@
{
- "version": "1.9.0",
+ "version": "1.9.1",
"description": "A React component that provides styled tooltips",
"homepage": "http://styleguide.pivotal.io/react_beta.html#tooltips_react",
"dependencies": {
"react-bootstrap": "0.23.3",
- "pui-css-tooltips": "1.9.0"
+ "pui-css-tooltips": "1.9.1"
}
}
\ No newline at end of file
diff --git a/src/pivotal-ui-react/typography/package.json b/src/pivotal-ui-react/typography/package.json
index 172cd8a3f..61461265c 100644
--- a/src/pivotal-ui-react/typography/package.json
+++ b/src/pivotal-ui-react/typography/package.json
@@ -1,8 +1,8 @@
{
- "version": "1.9.0",
+ "version": "1.9.1",
"description": "A collection of React components that provide standard typographical headers",
"homepage": "http://styleguide.pivotal.io/react_beta.html#type_react",
"dependencies": {
- "pui-css-typography": "1.9.0"
+ "pui-css-typography": "1.9.1"
}
}
\ No newline at end of file
diff --git a/src/pivotal-ui/components/alerts/package.json b/src/pivotal-ui/components/alerts/package.json
index 1947748c3..f28df4917 100644
--- a/src/pivotal-ui/components/alerts/package.json
+++ b/src/pivotal-ui/components/alerts/package.json
@@ -1,8 +1,8 @@
{
"homepage": "http://styleguide.pivotal.io/objects.html#alert",
"dependencies": {
- "pui-css-bootstrap": "1.9.0",
- "pui-css-typography": "1.9.0"
+ "pui-css-bootstrap": "1.9.1",
+ "pui-css-typography": "1.9.1"
},
- "version": "1.9.0"
+ "version": "1.9.1"
}
\ No newline at end of file
diff --git a/src/pivotal-ui/components/alignment/package.json b/src/pivotal-ui/components/alignment/package.json
index bab6ccaaa..a1fb22cae 100644
--- a/src/pivotal-ui/components/alignment/package.json
+++ b/src/pivotal-ui/components/alignment/package.json
@@ -1,5 +1,5 @@
{
"homepage": "http://styleguide.pivotal.io/utilities.html#alignment",
"dependencies": {},
- "version": "1.9.0"
+ "version": "1.9.1"
}
\ No newline at end of file
diff --git a/src/pivotal-ui/components/all/package.json b/src/pivotal-ui/components/all/package.json
index 0885df4f0..8ed6748d2 100644
--- a/src/pivotal-ui/components/all/package.json
+++ b/src/pivotal-ui/components/all/package.json
@@ -1,46 +1,46 @@
{
- "version": "1.9.0",
+ "version": "1.9.1",
"style": null,
"description": "A bundle of all the Pivotal UI CSS components",
"homepage": "http://styleguide.pivotal.io/",
"dependencies": {
- "pui-css-alerts": "1.9.0",
- "pui-css-alignment": "1.9.0",
- "pui-css-avatars": "1.9.0",
- "pui-css-back-to-top": "1.9.0",
- "pui-css-backgrounds": "1.9.0",
- "pui-css-bootstrap": "1.9.0",
- "pui-css-buttons": "1.9.0",
- "pui-css-code": "1.9.0",
- "pui-css-collapse": "1.9.0",
- "pui-css-colors": "1.9.0",
- "pui-css-deprecated": "1.9.0",
- "pui-css-dividers": "1.9.0",
- "pui-css-dropdowns": "1.9.0",
- "pui-css-ellipsis": "1.9.0",
- "pui-css-embeds": "1.9.0",
- "pui-css-forms": "1.9.0",
- "pui-css-google-maps": "1.9.0",
- "pui-css-grids": "1.9.0",
- "pui-css-hoverable": "1.9.0",
- "pui-css-iconography": "1.9.0",
- "pui-css-images": "1.9.0",
- "pui-css-labels": "1.9.0",
- "pui-css-links": "1.9.0",
- "pui-css-lists": "1.9.0",
- "pui-css-media": "1.9.0",
- "pui-css-modals": "1.9.0",
- "pui-css-panels": "1.9.0",
- "pui-css-panes": "1.9.0",
- "pui-css-progress-bars": "1.9.0",
- "pui-css-ribbons": "1.9.0",
- "pui-css-spinners": "1.9.0",
- "pui-css-tables": "1.9.0",
- "pui-css-tabs": "1.9.0",
- "pui-css-tooltips": "1.9.0",
- "pui-css-typography": "1.9.0",
+ "pui-css-alerts": "1.9.1",
+ "pui-css-alignment": "1.9.1",
+ "pui-css-avatars": "1.9.1",
+ "pui-css-back-to-top": "1.9.1",
+ "pui-css-backgrounds": "1.9.1",
+ "pui-css-bootstrap": "1.9.1",
+ "pui-css-buttons": "1.9.1",
+ "pui-css-code": "1.9.1",
+ "pui-css-collapse": "1.9.1",
+ "pui-css-colors": "1.9.1",
+ "pui-css-deprecated": "1.9.1",
+ "pui-css-dividers": "1.9.1",
+ "pui-css-dropdowns": "1.9.1",
+ "pui-css-ellipsis": "1.9.1",
+ "pui-css-embeds": "1.9.1",
+ "pui-css-forms": "1.9.1",
+ "pui-css-google-maps": "1.9.1",
+ "pui-css-grids": "1.9.1",
+ "pui-css-hoverable": "1.9.1",
+ "pui-css-iconography": "1.9.1",
+ "pui-css-images": "1.9.1",
+ "pui-css-labels": "1.9.1",
+ "pui-css-links": "1.9.1",
+ "pui-css-lists": "1.9.1",
+ "pui-css-media": "1.9.1",
+ "pui-css-modals": "1.9.1",
+ "pui-css-panels": "1.9.1",
+ "pui-css-panes": "1.9.1",
+ "pui-css-progress-bars": "1.9.1",
+ "pui-css-ribbons": "1.9.1",
+ "pui-css-spinners": "1.9.1",
+ "pui-css-tables": "1.9.1",
+ "pui-css-tabs": "1.9.1",
+ "pui-css-tooltips": "1.9.1",
+ "pui-css-typography": "1.9.1",
"pui-css-variables-and-mixins": "*",
- "pui-css-vertical-alignment": "1.9.0",
- "pui-css-whitespace": "1.9.0"
+ "pui-css-vertical-alignment": "1.9.1",
+ "pui-css-whitespace": "1.9.1"
}
}
\ No newline at end of file
diff --git a/src/pivotal-ui/components/avatars/package.json b/src/pivotal-ui/components/avatars/package.json
index fc5af5067..f5693404d 100644
--- a/src/pivotal-ui/components/avatars/package.json
+++ b/src/pivotal-ui/components/avatars/package.json
@@ -1,7 +1,7 @@
{
"homepage": "http://styleguide.pivotal.io/elements.html#avatar",
"dependencies": {
- "pui-css-bootstrap": "1.9.0"
+ "pui-css-bootstrap": "1.9.1"
},
- "version": "1.9.0"
+ "version": "1.9.1"
}
\ No newline at end of file
diff --git a/src/pivotal-ui/components/back-to-top/package.json b/src/pivotal-ui/components/back-to-top/package.json
index 1a6e7cc27..37b2b2c62 100644
--- a/src/pivotal-ui/components/back-to-top/package.json
+++ b/src/pivotal-ui/components/back-to-top/package.json
@@ -1,9 +1,9 @@
{
"homepage": "http://styleguide.pivotal.io/objects.html#back_to_top",
"dependencies": {
- "pui-css-bootstrap": "1.9.0",
- "pui-css-links": "1.9.0",
- "pui-css-iconography": "1.9.0"
+ "pui-css-bootstrap": "1.9.1",
+ "pui-css-links": "1.9.1",
+ "pui-css-iconography": "1.9.1"
},
- "version": "1.9.0"
+ "version": "1.9.1"
}
\ No newline at end of file
diff --git a/src/pivotal-ui/components/backgrounds/package.json b/src/pivotal-ui/components/backgrounds/package.json
index 8d4c52f56..729631c5b 100644
--- a/src/pivotal-ui/components/backgrounds/package.json
+++ b/src/pivotal-ui/components/backgrounds/package.json
@@ -1,5 +1,5 @@
{
"homepage": "http://styleguide.pivotal.io/elements.html#background",
"dependencies": {},
- "version": "1.9.0"
+ "version": "1.9.1"
}
\ No newline at end of file
diff --git a/src/pivotal-ui/components/bootstrap/package.json b/src/pivotal-ui/components/bootstrap/package.json
index 2e1991378..7ee8d67a4 100644
--- a/src/pivotal-ui/components/bootstrap/package.json
+++ b/src/pivotal-ui/components/bootstrap/package.json
@@ -1,5 +1,5 @@
{
- "version": "1.9.0",
+ "version": "1.9.1",
"description": "Custom build of Bootstrap for Pivotal UI",
"homepage": "http://styleguide.pivotal.io/"
}
\ No newline at end of file
diff --git a/src/pivotal-ui/components/buttons/package.json b/src/pivotal-ui/components/buttons/package.json
index 7907caded..9e7f7b594 100644
--- a/src/pivotal-ui/components/buttons/package.json
+++ b/src/pivotal-ui/components/buttons/package.json
@@ -1,8 +1,8 @@
{
"homepage": "http://styleguide.pivotal.io/elements.html#button",
"dependencies": {
- "pui-css-bootstrap": "1.9.0",
- "pui-css-typography": "1.9.0"
+ "pui-css-bootstrap": "1.9.1",
+ "pui-css-typography": "1.9.1"
},
- "version": "1.9.0"
+ "version": "1.9.1"
}
\ No newline at end of file
diff --git a/src/pivotal-ui/components/code/package.json b/src/pivotal-ui/components/code/package.json
index e859100a1..f41b31cc9 100644
--- a/src/pivotal-ui/components/code/package.json
+++ b/src/pivotal-ui/components/code/package.json
@@ -1,7 +1,7 @@
{
- "version": "1.9.0",
+ "version": "1.9.1",
"homepage": "http://styleguide.pivotal.io/objects.html#code",
"dependencies": {
- "pui-css-iconography": "1.9.0"
+ "pui-css-iconography": "1.9.1"
}
}
\ No newline at end of file
diff --git a/src/pivotal-ui/components/collapse/package.json b/src/pivotal-ui/components/collapse/package.json
index 9341bce54..4adde1027 100644
--- a/src/pivotal-ui/components/collapse/package.json
+++ b/src/pivotal-ui/components/collapse/package.json
@@ -1,7 +1,7 @@
{
"homepage": "http://styleguide.pivotal.io/section.html#collapse",
"dependencies": {
- "pui-css-bootstrap": "1.9.0"
+ "pui-css-bootstrap": "1.9.1"
},
- "version": "1.9.0"
+ "version": "1.9.1"
}
\ No newline at end of file
diff --git a/src/pivotal-ui/components/colors/package.json b/src/pivotal-ui/components/colors/package.json
index 5356d59c9..c64dd2a34 100644
--- a/src/pivotal-ui/components/colors/package.json
+++ b/src/pivotal-ui/components/colors/package.json
@@ -1,5 +1,5 @@
{
"homepage": "http://styleguide.pivotal.io/elements.html#color",
"dependencies": {},
- "version": "1.9.0"
+ "version": "1.9.1"
}
\ No newline at end of file
diff --git a/src/pivotal-ui/components/deprecated/package.json b/src/pivotal-ui/components/deprecated/package.json
index 61d61f1ae..00ffe8bc5 100644
--- a/src/pivotal-ui/components/deprecated/package.json
+++ b/src/pivotal-ui/components/deprecated/package.json
@@ -1,4 +1,4 @@
{
"dependencies": {},
- "version": "1.9.0"
+ "version": "1.9.1"
}
\ No newline at end of file
diff --git a/src/pivotal-ui/components/dividers/package.json b/src/pivotal-ui/components/dividers/package.json
index f2d902e1d..8e1eb59e3 100644
--- a/src/pivotal-ui/components/dividers/package.json
+++ b/src/pivotal-ui/components/dividers/package.json
@@ -1,5 +1,5 @@
{
"homepage": "http://styleguide.pivotal.io/elements.html#divider",
"dependencies": {},
- "version": "1.9.0"
+ "version": "1.9.1"
}
\ No newline at end of file
diff --git a/src/pivotal-ui/components/dropdowns/package.json b/src/pivotal-ui/components/dropdowns/package.json
index 1dc77ace4..fe71210d8 100644
--- a/src/pivotal-ui/components/dropdowns/package.json
+++ b/src/pivotal-ui/components/dropdowns/package.json
@@ -1,7 +1,7 @@
{
"homepage": "http://styleguide.pivotal.io/objects.html#dropdown",
"dependencies": {
- "pui-css-bootstrap": "1.9.0"
+ "pui-css-bootstrap": "1.9.1"
},
- "version": "1.9.0"
+ "version": "1.9.1"
}
\ No newline at end of file
diff --git a/src/pivotal-ui/components/ellipsis/package.json b/src/pivotal-ui/components/ellipsis/package.json
index 471bff2eb..6ec8767a6 100644
--- a/src/pivotal-ui/components/ellipsis/package.json
+++ b/src/pivotal-ui/components/ellipsis/package.json
@@ -1,5 +1,5 @@
{
"homepage": "http://styleguide.pivotal.io/utilities.html#ellipsis",
"dependencies": {},
- "version": "1.9.0"
+ "version": "1.9.1"
}
\ No newline at end of file
diff --git a/src/pivotal-ui/components/embeds/package.json b/src/pivotal-ui/components/embeds/package.json
index 3cc4f2f5e..ff4b52a84 100644
--- a/src/pivotal-ui/components/embeds/package.json
+++ b/src/pivotal-ui/components/embeds/package.json
@@ -1,7 +1,7 @@
{
"homepage": "http://styleguide.pivotal.io/elements.html#embed",
"dependencies": {
- "pui-css-bootstrap": "1.9.0"
+ "pui-css-bootstrap": "1.9.1"
},
- "version": "1.9.0"
+ "version": "1.9.1"
}
\ No newline at end of file
diff --git a/src/pivotal-ui/components/expander/package.json b/src/pivotal-ui/components/expander/package.json
index 13591dd6d..be43ef7ca 100644
--- a/src/pivotal-ui/components/expander/package.json
+++ b/src/pivotal-ui/components/expander/package.json
@@ -1,5 +1,5 @@
{
"homepage": "http://styleguide.pivotal.io/react_beta.html#expander_react",
"dependencies": {},
- "version": "1.9.0"
+ "version": "1.9.1"
}
\ No newline at end of file
diff --git a/src/pivotal-ui/components/forms/package.json b/src/pivotal-ui/components/forms/package.json
index 90545e857..de25a551c 100644
--- a/src/pivotal-ui/components/forms/package.json
+++ b/src/pivotal-ui/components/forms/package.json
@@ -1,7 +1,7 @@
{
"homepage": "http://styleguide.pivotal.io/forms.html",
"dependencies": {
- "pui-css-bootstrap": "1.9.0"
+ "pui-css-bootstrap": "1.9.1"
},
- "version": "1.9.0"
+ "version": "1.9.1"
}
\ No newline at end of file
diff --git a/src/pivotal-ui/components/google-maps/package.json b/src/pivotal-ui/components/google-maps/package.json
index f36ab3e30..7317e5d65 100644
--- a/src/pivotal-ui/components/google-maps/package.json
+++ b/src/pivotal-ui/components/google-maps/package.json
@@ -1,5 +1,5 @@
{
"homepage": "http://styleguide.pivotal.io/objects.html#map",
"dependencies": {},
- "version": "1.9.0"
+ "version": "1.9.1"
}
\ No newline at end of file
diff --git a/src/pivotal-ui/components/grids/package.json b/src/pivotal-ui/components/grids/package.json
index 5da53d8fd..597fd73b5 100644
--- a/src/pivotal-ui/components/grids/package.json
+++ b/src/pivotal-ui/components/grids/package.json
@@ -1,7 +1,7 @@
{
"homepage": "http://styleguide.pivotal.io/layout.html#grid",
"dependencies": {
- "pui-css-bootstrap": "1.9.0"
+ "pui-css-bootstrap": "1.9.1"
},
- "version": "1.9.0"
+ "version": "1.9.1"
}
\ No newline at end of file
diff --git a/src/pivotal-ui/components/health_indicators/package.json b/src/pivotal-ui/components/health_indicators/package.json
index 0e5d18b44..e049a80b9 100644
--- a/src/pivotal-ui/components/health_indicators/package.json
+++ b/src/pivotal-ui/components/health_indicators/package.json
@@ -1,5 +1,5 @@
{
"homepage": "http://styleguide.pivotal.io/section.html#health_indicators",
"dependencies": {},
- "version": "1.9.0"
+ "version": "1.9.1"
}
\ No newline at end of file
diff --git a/src/pivotal-ui/components/hiring/package.json b/src/pivotal-ui/components/hiring/package.json
index 6ea420a39..99f845319 100644
--- a/src/pivotal-ui/components/hiring/package.json
+++ b/src/pivotal-ui/components/hiring/package.json
@@ -1,5 +1,5 @@
{
"homepage": "http://styleguide.pivotal.io/hiring.html",
"dependencies": {},
- "version": "1.9.0"
+ "version": "1.9.1"
}
\ No newline at end of file
diff --git a/src/pivotal-ui/components/hoverable/package.json b/src/pivotal-ui/components/hoverable/package.json
index c6c6770ca..3978e43b8 100644
--- a/src/pivotal-ui/components/hoverable/package.json
+++ b/src/pivotal-ui/components/hoverable/package.json
@@ -1,5 +1,5 @@
{
"homepage": "http://styleguide.pivotal.io/objects.html#hoverable",
"dependencies": {},
- "version": "1.9.0"
+ "version": "1.9.1"
}
\ No newline at end of file
diff --git a/src/pivotal-ui/components/iconography/package.json b/src/pivotal-ui/components/iconography/package.json
index 5653ebe5c..20b5e178c 100644
--- a/src/pivotal-ui/components/iconography/package.json
+++ b/src/pivotal-ui/components/iconography/package.json
@@ -1,7 +1,7 @@
{
"homepage": "http://styleguide.pivotal.io/elements.html#iconography",
"dependencies": {
- "pui-css-typography": "1.9.0"
+ "pui-css-typography": "1.9.1"
},
- "version": "1.9.0"
+ "version": "1.9.1"
}
\ No newline at end of file
diff --git a/src/pivotal-ui/components/images/package.json b/src/pivotal-ui/components/images/package.json
index 3a3baee20..55f8da2c7 100644
--- a/src/pivotal-ui/components/images/package.json
+++ b/src/pivotal-ui/components/images/package.json
@@ -1,7 +1,7 @@
{
"homepage": "http://styleguide.pivotal.io/elements.html#image",
"dependencies": {
- "pui-css-bootstrap": "1.9.0"
+ "pui-css-bootstrap": "1.9.1"
},
- "version": "1.9.0"
+ "version": "1.9.1"
}
\ No newline at end of file
diff --git a/src/pivotal-ui/components/intro/package.json b/src/pivotal-ui/components/intro/package.json
index f314321dd..663c31843 100644
--- a/src/pivotal-ui/components/intro/package.json
+++ b/src/pivotal-ui/components/intro/package.json
@@ -1,5 +1,5 @@
{
"homepage": "http://styleguide.pivotal.io/section.html#intro",
"dependencies": {},
- "version": "1.9.0"
+ "version": "1.9.1"
}
\ No newline at end of file
diff --git a/src/pivotal-ui/components/labels/package.json b/src/pivotal-ui/components/labels/package.json
index 8695c6683..4866ceca3 100644
--- a/src/pivotal-ui/components/labels/package.json
+++ b/src/pivotal-ui/components/labels/package.json
@@ -1,7 +1,7 @@
{
"homepage": "http://styleguide.pivotal.io/elements.html#label",
"dependencies": {
- "pui-css-bootstrap": "1.9.0"
+ "pui-css-bootstrap": "1.9.1"
},
- "version": "1.9.0"
+ "version": "1.9.1"
}
\ No newline at end of file
diff --git a/src/pivotal-ui/components/links/package.json b/src/pivotal-ui/components/links/package.json
index 32c484af9..56fd306c9 100644
--- a/src/pivotal-ui/components/links/package.json
+++ b/src/pivotal-ui/components/links/package.json
@@ -1,7 +1,7 @@
{
"homepage": "http://styleguide.pivotal.io/elements.html#link",
"dependencies": {
- "pui-css-bootstrap": "1.9.0"
+ "pui-css-bootstrap": "1.9.1"
},
- "version": "1.9.0"
+ "version": "1.9.1"
}
\ No newline at end of file
diff --git a/src/pivotal-ui/components/lists/package.json b/src/pivotal-ui/components/lists/package.json
index ce0f719f3..e0db72725 100644
--- a/src/pivotal-ui/components/lists/package.json
+++ b/src/pivotal-ui/components/lists/package.json
@@ -1,9 +1,9 @@
{
"homepage": "http://styleguide.pivotal.io/elements.html#lists",
"dependencies": {
- "pui-css-bootstrap": "1.9.0",
- "pui-css-iconography": "1.9.0",
- "pui-css-typography": "1.9.0"
+ "pui-css-bootstrap": "1.9.1",
+ "pui-css-iconography": "1.9.1",
+ "pui-css-typography": "1.9.1"
},
- "version": "1.9.0"
+ "version": "1.9.1"
}
\ No newline at end of file
diff --git a/src/pivotal-ui/components/media/package.json b/src/pivotal-ui/components/media/package.json
index 7fa9b5aa5..a4618f67a 100644
--- a/src/pivotal-ui/components/media/package.json
+++ b/src/pivotal-ui/components/media/package.json
@@ -1,7 +1,7 @@
{
"homepage": "http://styleguide.pivotal.io/section.html#media",
"dependencies": {
- "pui-css-bootstrap": "1.9.0"
+ "pui-css-bootstrap": "1.9.1"
},
- "version": "1.9.0"
+ "version": "1.9.1"
}
\ No newline at end of file
diff --git a/src/pivotal-ui/components/modals/package.json b/src/pivotal-ui/components/modals/package.json
index 7a759be1e..d9b3352a3 100644
--- a/src/pivotal-ui/components/modals/package.json
+++ b/src/pivotal-ui/components/modals/package.json
@@ -1,7 +1,7 @@
{
- "version": "1.9.0",
+ "version": "1.9.1",
"homepage": "http://styleguide.pivotal.io/objects.html#modal",
"dependencies": {
- "pui-css-bootstrap": "1.9.0"
+ "pui-css-bootstrap": "1.9.1"
}
}
\ No newline at end of file
diff --git a/src/pivotal-ui/components/panels/package.json b/src/pivotal-ui/components/panels/package.json
index 2150e557f..d93fe2be0 100644
--- a/src/pivotal-ui/components/panels/package.json
+++ b/src/pivotal-ui/components/panels/package.json
@@ -1,7 +1,7 @@
{
"homepage": "http://styleguide.pivotal.io/objects.html#panel",
"dependencies": {
- "pui-css-bootstrap": "1.9.0"
+ "pui-css-bootstrap": "1.9.1"
},
- "version": "1.9.0"
+ "version": "1.9.1"
}
\ No newline at end of file
diff --git a/src/pivotal-ui/components/panes/package.json b/src/pivotal-ui/components/panes/package.json
index 8883ac8a3..585be2e01 100644
--- a/src/pivotal-ui/components/panes/package.json
+++ b/src/pivotal-ui/components/panes/package.json
@@ -1,7 +1,7 @@
{
"homepage": "http://styleguide.pivotal.io/layout.html#pane",
"dependencies": {
- "pui-css-bootstrap": "1.9.0"
+ "pui-css-bootstrap": "1.9.1"
},
- "version": "1.9.0"
+ "version": "1.9.1"
}
\ No newline at end of file
diff --git a/src/pivotal-ui/components/pivnet_homepage/package.json b/src/pivotal-ui/components/pivnet_homepage/package.json
index c58730aab..36f3724aa 100644
--- a/src/pivotal-ui/components/pivnet_homepage/package.json
+++ b/src/pivotal-ui/components/pivnet_homepage/package.json
@@ -1,5 +1,5 @@
{
"homepage": "http://styleguide.pivotal.io/section.html#pivnet_homepage",
"dependencies": {},
- "version": "1.9.0"
+ "version": "1.9.1"
}
\ No newline at end of file
diff --git a/src/pivotal-ui/components/portals/package.json b/src/pivotal-ui/components/portals/package.json
index ace14db1a..701de11aa 100644
--- a/src/pivotal-ui/components/portals/package.json
+++ b/src/pivotal-ui/components/portals/package.json
@@ -1,3 +1,3 @@
{
- "version": "1.9.0"
+ "version": "1.9.1"
}
\ No newline at end of file
diff --git a/src/pivotal-ui/components/product_specific/package.json b/src/pivotal-ui/components/product_specific/package.json
index 8cf9b5db5..ec611cc63 100644
--- a/src/pivotal-ui/components/product_specific/package.json
+++ b/src/pivotal-ui/components/product_specific/package.json
@@ -1,5 +1,5 @@
{
"homepage": "http://styleguide.pivotal.io/section.html#product_specific",
"dependencies": {},
- "version": "1.9.0"
+ "version": "1.9.1"
}
\ No newline at end of file
diff --git a/src/pivotal-ui/components/progress-bars/package.json b/src/pivotal-ui/components/progress-bars/package.json
index dd386ce62..465200796 100644
--- a/src/pivotal-ui/components/progress-bars/package.json
+++ b/src/pivotal-ui/components/progress-bars/package.json
@@ -1,7 +1,7 @@
{
"homepage": "http://styleguide.pivotal.io/objects.html#progress_bar",
"dependencies": {
- "pui-css-bootstrap": "1.9.0"
+ "pui-css-bootstrap": "1.9.1"
},
- "version": "1.9.0"
+ "version": "1.9.1"
}
\ No newline at end of file
diff --git a/src/pivotal-ui/components/react-animations/package.json b/src/pivotal-ui/components/react-animations/package.json
index 16fd36bc2..24fbd4756 100644
--- a/src/pivotal-ui/components/react-animations/package.json
+++ b/src/pivotal-ui/components/react-animations/package.json
@@ -1,5 +1,5 @@
{
"homepage": "http://styleguide.pivotal.io",
"dependencies": {},
- "version": "1.9.0"
+ "version": "1.9.1"
}
\ No newline at end of file
diff --git a/src/pivotal-ui/components/ribbons/package.json b/src/pivotal-ui/components/ribbons/package.json
index 9e98f7066..539e29728 100644
--- a/src/pivotal-ui/components/ribbons/package.json
+++ b/src/pivotal-ui/components/ribbons/package.json
@@ -1,5 +1,5 @@
{
"homepage": "http://styleguide.pivotal.io/elements.html#ribbon",
"dependencies": {},
- "version": "1.9.0"
+ "version": "1.9.1"
}
\ No newline at end of file
diff --git a/src/pivotal-ui/components/scales/package.json b/src/pivotal-ui/components/scales/package.json
index bab7e66b2..dfa055a06 100644
--- a/src/pivotal-ui/components/scales/package.json
+++ b/src/pivotal-ui/components/scales/package.json
@@ -1,5 +1,5 @@
{
"homepage": "http://styleguide.pivotal.io/section.html#scales",
"dependencies": {},
- "version": "1.9.0"
+ "version": "1.9.1"
}
\ No newline at end of file
diff --git a/src/pivotal-ui/components/spinners/package.json b/src/pivotal-ui/components/spinners/package.json
index 69caabc9e..b6ec80eb3 100644
--- a/src/pivotal-ui/components/spinners/package.json
+++ b/src/pivotal-ui/components/spinners/package.json
@@ -1,7 +1,7 @@
{
"homepage": "http://styleguide.pivotal.io/elements.html#iconography_spinner",
"dependencies": {
- "pui-css-iconography": "1.9.0"
+ "pui-css-iconography": "1.9.1"
},
- "version": "1.9.0"
+ "version": "1.9.1"
}
\ No newline at end of file
diff --git a/src/pivotal-ui/components/tables/package.json b/src/pivotal-ui/components/tables/package.json
index be99a93bd..41b05d084 100644
--- a/src/pivotal-ui/components/tables/package.json
+++ b/src/pivotal-ui/components/tables/package.json
@@ -1,7 +1,7 @@
{
"homepage": "http://styleguide.pivotal.io/objects.html#table",
"dependencies": {
- "pui-css-bootstrap": "1.9.0"
+ "pui-css-bootstrap": "1.9.1"
},
- "version": "1.9.0"
+ "version": "1.9.1"
}
\ No newline at end of file
diff --git a/src/pivotal-ui/components/tabs/package.json b/src/pivotal-ui/components/tabs/package.json
index 406505431..53786303f 100644
--- a/src/pivotal-ui/components/tabs/package.json
+++ b/src/pivotal-ui/components/tabs/package.json
@@ -1,7 +1,7 @@
{
"homepage": "http://styleguide.pivotal.io/objects.html#tab",
"dependencies": {
- "pui-css-bootstrap": "1.9.0"
+ "pui-css-bootstrap": "1.9.1"
},
- "version": "1.9.0"
+ "version": "1.9.1"
}
\ No newline at end of file
diff --git a/src/pivotal-ui/components/toggles/package.json b/src/pivotal-ui/components/toggles/package.json
index 6a657427a..5f35799d1 100644
--- a/src/pivotal-ui/components/toggles/package.json
+++ b/src/pivotal-ui/components/toggles/package.json
@@ -1,5 +1,5 @@
{
"homepage": "http://styleguide.pivotal.io/section.html#toggles",
"dependencies": {},
- "version": "1.9.0"
+ "version": "1.9.1"
}
\ No newline at end of file
diff --git a/src/pivotal-ui/components/tooltips/package.json b/src/pivotal-ui/components/tooltips/package.json
index 612b69d90..2469affae 100644
--- a/src/pivotal-ui/components/tooltips/package.json
+++ b/src/pivotal-ui/components/tooltips/package.json
@@ -1,7 +1,7 @@
{
"homepage": "http://styleguide.pivotal.io/objects.html#tooltip",
"dependencies": {
- "pui-css-typography": "1.9.0"
+ "pui-css-typography": "1.9.1"
},
- "version": "1.9.0"
+ "version": "1.9.1"
}
\ No newline at end of file
diff --git a/src/pivotal-ui/components/traffic_lights/package.json b/src/pivotal-ui/components/traffic_lights/package.json
index da0084ff8..833f46280 100644
--- a/src/pivotal-ui/components/traffic_lights/package.json
+++ b/src/pivotal-ui/components/traffic_lights/package.json
@@ -1,5 +1,5 @@
{
"homepage": "http://styleguide.pivotal.io/section.html#traffic_lights",
"dependencies": {},
- "version": "1.9.0"
+ "version": "1.9.1"
}
\ No newline at end of file
diff --git a/src/pivotal-ui/components/typography/package.json b/src/pivotal-ui/components/typography/package.json
index a03ad7511..8300035dc 100644
--- a/src/pivotal-ui/components/typography/package.json
+++ b/src/pivotal-ui/components/typography/package.json
@@ -1,7 +1,7 @@
{
"homepage": "http://styleguide.pivotal.io/elements.html#typography",
"dependencies": {
- "pui-css-bootstrap": "1.9.0"
+ "pui-css-bootstrap": "1.9.1"
},
- "version": "1.9.0"
+ "version": "1.9.1"
}
\ No newline at end of file
diff --git a/src/pivotal-ui/components/utils/package.json b/src/pivotal-ui/components/utils/package.json
index f5dc7d9d7..8d2934c3f 100644
--- a/src/pivotal-ui/components/utils/package.json
+++ b/src/pivotal-ui/components/utils/package.json
@@ -1,5 +1,5 @@
{
"homepage": "http://styleguide.pivotal.io/section.html#utils",
"dependencies": {},
- "version": "1.9.0"
+ "version": "1.9.1"
}
\ No newline at end of file
diff --git a/src/pivotal-ui/components/vertical-alignment/package.json b/src/pivotal-ui/components/vertical-alignment/package.json
index 687f6011c..eb28e3fe8 100644
--- a/src/pivotal-ui/components/vertical-alignment/package.json
+++ b/src/pivotal-ui/components/vertical-alignment/package.json
@@ -1,5 +1,5 @@
{
"homepage": "http://styleguide.pivotal.io/layout.html#vertical_align",
"dependencies": {},
- "version": "1.9.0"
+ "version": "1.9.1"
}
\ No newline at end of file
diff --git a/src/pivotal-ui/components/whitespace/package.json b/src/pivotal-ui/components/whitespace/package.json
index 2ede74b82..59b6785cf 100644
--- a/src/pivotal-ui/components/whitespace/package.json
+++ b/src/pivotal-ui/components/whitespace/package.json
@@ -1,5 +1,5 @@
{
"homepage": "http://styleguide.pivotal.io/all.html#list_whitespace",
"dependencies": {},
- "version": "1.9.0"
+ "version": "1.9.1"
}
\ No newline at end of file
+
+ 
+
+
+
+
+
+
+
+
+ 
+
+ 
+
+ 
+