`, 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] If $bootstrap-sass-asset-helper if used, provide path relative to the assets load path.
+// [converter] This is because some asset helpers, such as Sprockets, do not work with file-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.3333333 !default; // extra decimals for Win 8.1 Chrome
+$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;
+
+// Allows for customizing button radius independently from global border radius
+$btn-border-radius-base: $border-radius-base !default;
+$btn-border-radius-large: $border-radius-large !default;
+$btn-border-radius-small: $border-radius-small !default;
+
+
+//== Forms
+//
+//##
+
+//** ``s in some browsers, due to the limited stylability of ``s in CSS.
+$input-border-radius: $border-radius-base !default;
+//** Large `.form-control` border radius
+$input-border-radius-large: $border-radius-large !default;
+//** Small `.form-control` border radius
+$input-border-radius-small: $border-radius-small !default;
+
+//** Border color for inputs on focus
+$input-border-focus: #66afe9 !default;
+
+//** Placeholder text color
+$input-color-placeholder: #999 !default;
+
+//** Default `.form-control` height
+$input-height-base: ($line-height-computed + ($padding-base-vertical * 2) + 2) !default;
+//** Large `.form-control` height
+$input-height-large: (ceil($font-size-large * $line-height-large) + ($padding-large-vertical * 2) + 2) !default;
+//** Small `.form-control` height
+$input-height-small: (floor($font-size-small * $line-height-small) + ($padding-small-vertical * 2) + 2) !default;
+
+//** `.form-group` margin
+$form-group-margin-bottom: 15px !default;
+
+$legend-color: $gray-dark !default;
+$legend-border-color: #e5e5e5 !default;
+
+//** Background color for textual input addons
+$input-group-addon-bg: $gray-lighter !default;
+//** Border color for textual input addons
+$input-group-addon-border-color: $input-border !default;
+
+//** Disabled cursor for form controls and buttons.
+$cursor-disabled: not-allowed !default;
+
+
+//== Dropdowns
+//
+//## Dropdown menu container and contents.
+
+//** Background for the dropdown menu.
+$dropdown-bg: #fff !default;
+//** Dropdown menu `border-color`.
+$dropdown-border: rgba(0,0,0,.15) !default;
+//** Dropdown menu `border-color` **for IE8**.
+$dropdown-fallback-border: #ccc !default;
+//** Divider color for between dropdown items.
+$dropdown-divider-bg: #e5e5e5 !default;
+
+//** Dropdown link text color.
+$dropdown-link-color: $gray-dark !default;
+//** Hover color for dropdown links.
+$dropdown-link-hover-color: darken($gray-dark, 5%) !default;
+//** Hover background for dropdown links.
+$dropdown-link-hover-bg: #f5f5f5 !default;
+
+//** Active dropdown menu item text color.
+$dropdown-link-active-color: $component-active-color !default;
+//** Active dropdown menu item background color.
+$dropdown-link-active-bg: $component-active-bg !default;
+
+//** Disabled dropdown menu item background color.
+$dropdown-link-disabled-color: $gray-light !default;
+
+//** Text color for headers within dropdown menus.
+$dropdown-header-color: $gray-light !default;
+
+//** Deprecated `$dropdown-caret-color` as of v3.1.0
+$dropdown-caret-color: #000 !default;
+
+
+//-- Z-index master list
+//
+// Warning: Avoid customizing these values. They're used for a bird's eye view
+// of components dependent on the z-axis and are designed to all work together.
+//
+// Note: These variables are not generated into the Customizer.
+
+$zindex-navbar: 1000 !default;
+$zindex-dropdown: 1000 !default;
+$zindex-popover: 1060 !default;
+$zindex-tooltip: 1070 !default;
+$zindex-navbar-fixed: 1030 !default;
+$zindex-modal-background: 1040 !default;
+$zindex-modal: 1050 !default;
+
+
+//== Media queries breakpoints
+//
+//## Define the breakpoints at which your layout will change, adapting to different screen sizes.
+
+// Extra small screen / phone
+//** Deprecated `$screen-xs` as of v3.0.1
+$screen-xs: 480px !default;
+//** Deprecated `$screen-xs-min` as of v3.2.0
+$screen-xs-min: $screen-xs !default;
+//** Deprecated `$screen-phone` as of v3.0.1
+$screen-phone: $screen-xs-min !default;
+
+// Small screen / tablet
+//** Deprecated `$screen-sm` as of v3.0.1
+$screen-sm: 768px !default;
+$screen-sm-min: $screen-sm !default;
+//** Deprecated `$screen-tablet` as of v3.0.1
+$screen-tablet: $screen-sm-min !default;
+
+// Medium screen / desktop
+//** Deprecated `$screen-md` as of v3.0.1
+$screen-md: 992px !default;
+$screen-md-min: $screen-md !default;
+//** Deprecated `$screen-desktop` as of v3.0.1
+$screen-desktop: $screen-md-min !default;
+
+// Large screen / wide desktop
+//** Deprecated `$screen-lg` as of v3.0.1
+$screen-lg: 1200px !default;
+$screen-lg-min: $screen-lg !default;
+//** Deprecated `$screen-lg-desktop` as of v3.0.1
+$screen-lg-desktop: $screen-lg-min !default;
+
+// So media queries don't overlap when required, provide a maximum
+$screen-xs-max: ($screen-sm-min - 1) !default;
+$screen-sm-max: ($screen-md-min - 1) !default;
+$screen-md-max: ($screen-lg-min - 1) !default;
+
+
+//== Grid system
+//
+//## Define your custom responsive grid.
+
+//** Number of columns in the grid.
+$grid-columns: 12 !default;
+//** Padding between columns. Gets divided in half for the left and right.
+$grid-gutter-width: 30px !default;
+// Navbar collapse
+//** Point at which the navbar becomes uncollapsed.
+$grid-float-breakpoint: $screen-sm-min !default;
+//** Point at which the navbar begins collapsing.
+$grid-float-breakpoint-max: ($grid-float-breakpoint - 1) !default;
+
+
+//== Container sizes
+//
+//## Define the maximum width of `.container` for different screen sizes.
+
+// Small screen / tablet
+$container-tablet: (720px + $grid-gutter-width) !default;
+//** For `$screen-sm-min` and up.
+$container-sm: $container-tablet !default;
+
+// Medium screen / desktop
+$container-desktop: (940px + $grid-gutter-width) !default;
+//** For `$screen-md-min` and up.
+$container-md: $container-desktop !default;
+
+// Large screen / wide desktop
+$container-large-desktop: (1140px + $grid-gutter-width) !default;
+//** For `$screen-lg-min` and up.
+$container-lg: $container-large-desktop !default;
+
+
+//== Navbar
+//
+//##
+
+// Basics of a navbar
+$navbar-height: 50px !default;
+$navbar-margin-bottom: $line-height-computed !default;
+$navbar-border-radius: $border-radius-base !default;
+$navbar-padding-horizontal: floor(($grid-gutter-width / 2)) !default;
+$navbar-padding-vertical: (($navbar-height - $line-height-computed) / 2) !default;
+$navbar-collapse-max-height: 340px !default;
+
+$navbar-default-color: #777 !default;
+$navbar-default-bg: #f8f8f8 !default;
+$navbar-default-border: darken($navbar-default-bg, 6.5%) !default;
+
+// Navbar links
+$navbar-default-link-color: #777 !default;
+$navbar-default-link-hover-color: #333 !default;
+$navbar-default-link-hover-bg: transparent !default;
+$navbar-default-link-active-color: #555 !default;
+$navbar-default-link-active-bg: darken($navbar-default-bg, 6.5%) !default;
+$navbar-default-link-disabled-color: #ccc !default;
+$navbar-default-link-disabled-bg: transparent !default;
+
+// Navbar brand label
+$navbar-default-brand-color: $navbar-default-link-color !default;
+$navbar-default-brand-hover-color: darken($navbar-default-brand-color, 10%) !default;
+$navbar-default-brand-hover-bg: transparent !default;
+
+// Navbar toggle
+$navbar-default-toggle-hover-bg: #ddd !default;
+$navbar-default-toggle-icon-bar-bg: #888 !default;
+$navbar-default-toggle-border-color: #ddd !default;
+
+
+//=== Inverted navbar
+// Reset inverted navbar basics
+$navbar-inverse-color: lighten($gray-light, 15%) !default;
+$navbar-inverse-bg: #222 !default;
+$navbar-inverse-border: darken($navbar-inverse-bg, 10%) !default;
+
+// Inverted navbar links
+$navbar-inverse-link-color: lighten($gray-light, 15%) !default;
+$navbar-inverse-link-hover-color: #fff !default;
+$navbar-inverse-link-hover-bg: transparent !default;
+$navbar-inverse-link-active-color: $navbar-inverse-link-hover-color !default;
+$navbar-inverse-link-active-bg: darken($navbar-inverse-bg, 10%) !default;
+$navbar-inverse-link-disabled-color: #444 !default;
+$navbar-inverse-link-disabled-bg: transparent !default;
+
+// Inverted navbar brand label
+$navbar-inverse-brand-color: $navbar-inverse-link-color !default;
+$navbar-inverse-brand-hover-color: #fff !default;
+$navbar-inverse-brand-hover-bg: transparent !default;
+
+// Inverted navbar toggle
+$navbar-inverse-toggle-hover-bg: #333 !default;
+$navbar-inverse-toggle-icon-bar-bg: #fff !default;
+$navbar-inverse-toggle-border-color: #333 !default;
+
+
+//== Navs
+//
+//##
+
+//=== Shared nav styles
+$nav-link-padding: 10px 15px !default;
+$nav-link-hover-bg: $gray-lighter !default;
+
+$nav-disabled-link-color: $gray-light !default;
+$nav-disabled-link-hover-color: $gray-light !default;
+
+//== Tabs
+$nav-tabs-border-color: #ddd !default;
+
+$nav-tabs-link-hover-border-color: $gray-lighter !default;
+
+$nav-tabs-active-link-hover-bg: $body-bg !default;
+$nav-tabs-active-link-hover-color: $gray !default;
+$nav-tabs-active-link-hover-border-color: #ddd !default;
+
+$nav-tabs-justified-link-border-color: #ddd !default;
+$nav-tabs-justified-active-link-border-color: $body-bg !default;
+
+//== Pills
+$nav-pills-border-radius: $border-radius-base !default;
+$nav-pills-active-link-hover-bg: $component-active-bg !default;
+$nav-pills-active-link-hover-color: $component-active-color !default;
+
+
+//== Pagination
+//
+//##
+
+$pagination-color: $link-color !default;
+$pagination-bg: #fff !default;
+$pagination-border: #ddd !default;
+
+$pagination-hover-color: $link-hover-color !default;
+$pagination-hover-bg: $gray-lighter !default;
+$pagination-hover-border: #ddd !default;
+
+$pagination-active-color: #fff !default;
+$pagination-active-bg: $brand-primary !default;
+$pagination-active-border: $brand-primary !default;
+
+$pagination-disabled-color: $gray-light !default;
+$pagination-disabled-bg: #fff !default;
+$pagination-disabled-border: #ddd !default;
+
+
+//== Pager
+//
+//##
+
+$pager-bg: $pagination-bg !default;
+$pager-border: $pagination-border !default;
+$pager-border-radius: 15px !default;
+
+$pager-hover-bg: $pagination-hover-bg !default;
+
+$pager-active-bg: $pagination-active-bg !default;
+$pager-active-color: $pagination-active-color !default;
+
+$pager-disabled-color: $pagination-disabled-color !default;
+
+
+//== Jumbotron
+//
+//##
+
+$jumbotron-padding: 30px !default;
+$jumbotron-color: inherit !default;
+$jumbotron-bg: $gray-lighter !default;
+$jumbotron-heading-color: inherit !default;
+$jumbotron-font-size: ceil(($font-size-base * 1.5)) !default;
+$jumbotron-heading-font-size: ceil(($font-size-base * 4.5)) !default;
+
+
+//== Form states and alerts
+//
+//## Define colors for form feedback states and, by default, alerts.
+
+$state-success-text: #3c763d !default;
+$state-success-bg: #dff0d8 !default;
+$state-success-border: darken(adjust-hue($state-success-bg, -10), 5%) !default;
+
+$state-info-text: #31708f !default;
+$state-info-bg: #d9edf7 !default;
+$state-info-border: darken(adjust-hue($state-info-bg, -10), 7%) !default;
+
+$state-warning-text: #8a6d3b !default;
+$state-warning-bg: #fcf8e3 !default;
+$state-warning-border: darken(adjust-hue($state-warning-bg, -10), 5%) !default;
+
+$state-danger-text: #a94442 !default;
+$state-danger-bg: #f2dede !default;
+$state-danger-border: darken(adjust-hue($state-danger-bg, -10), 5%) !default;
+
+
+//== Tooltips
+//
+//##
+
+//** Tooltip max width
+$tooltip-max-width: 200px !default;
+//** Tooltip text color
+$tooltip-color: #fff !default;
+//** Tooltip background color
+$tooltip-bg: #000 !default;
+$tooltip-opacity: .9 !default;
+
+//** Tooltip arrow width
+$tooltip-arrow-width: 5px !default;
+//** Tooltip arrow color
+$tooltip-arrow-color: $tooltip-bg !default;
+
+
+//== Popovers
+//
+//##
+
+//** Popover body background color
+$popover-bg: #fff !default;
+//** Popover maximum width
+$popover-max-width: 276px !default;
+//** Popover border color
+$popover-border-color: rgba(0,0,0,.2) !default;
+//** Popover fallback border color
+$popover-fallback-border-color: #ccc !default;
+
+//** Popover title background color
+$popover-title-bg: darken($popover-bg, 3%) !default;
+
+//** Popover arrow width
+$popover-arrow-width: 10px !default;
+//** Popover arrow color
+$popover-arrow-color: $popover-bg !default;
+
+//** Popover outer arrow width
+$popover-arrow-outer-width: ($popover-arrow-width + 1) !default;
+//** Popover outer arrow color
+$popover-arrow-outer-color: fade_in($popover-border-color, 0.05) !default;
+//** Popover outer arrow fallback color
+$popover-arrow-outer-fallback-color: darken($popover-fallback-border-color, 20%) !default;
+
+
+//== Labels
+//
+//##
+
+//** Default label background color
+$label-default-bg: $gray-light !default;
+//** Primary label background color
+$label-primary-bg: $brand-primary !default;
+//** Success label background color
+$label-success-bg: $brand-success !default;
+//** Info label background color
+$label-info-bg: $brand-info !default;
+//** Warning label background color
+$label-warning-bg: $brand-warning !default;
+//** Danger label background color
+$label-danger-bg: $brand-danger !default;
+
+//** Default label text color
+$label-color: #fff !default;
+//** Default text color of a linked label
+$label-link-hover-color: #fff !default;
+
+
+//== Modals
+//
+//##
+
+//** Padding applied to the modal body
+$modal-inner-padding: 15px !default;
+
+//** Padding applied to the modal title
+$modal-title-padding: 15px !default;
+//** Modal title line-height
+$modal-title-line-height: $line-height-base !default;
+
+//** Background color of modal content area
+$modal-content-bg: #fff !default;
+//** Modal content border color
+$modal-content-border-color: rgba(0,0,0,.2) !default;
+//** Modal content border color **for IE8**
+$modal-content-fallback-border-color: #999 !default;
+
+//** Modal backdrop background color
+$modal-backdrop-bg: #000 !default;
+//** Modal backdrop opacity
+$modal-backdrop-opacity: .5 !default;
+//** Modal header border color
+$modal-header-border-color: #e5e5e5 !default;
+//** Modal footer border color
+$modal-footer-border-color: $modal-header-border-color !default;
+
+$modal-lg: 900px !default;
+$modal-md: 600px !default;
+$modal-sm: 300px !default;
+
+
+//== Alerts
+//
+//## Define alert colors, border radius, and padding.
+
+$alert-padding: 15px !default;
+$alert-border-radius: $border-radius-base !default;
+$alert-link-font-weight: bold !default;
+
+$alert-success-bg: $state-success-bg !default;
+$alert-success-text: $state-success-text !default;
+$alert-success-border: $state-success-border !default;
+
+$alert-info-bg: $state-info-bg !default;
+$alert-info-text: $state-info-text !default;
+$alert-info-border: $state-info-border !default;
+
+$alert-warning-bg: $state-warning-bg !default;
+$alert-warning-text: $state-warning-text !default;
+$alert-warning-border: $state-warning-border !default;
+
+$alert-danger-bg: $state-danger-bg !default;
+$alert-danger-text: $state-danger-text !default;
+$alert-danger-border: $state-danger-border !default;
+
+
+//== Progress bars
+//
+//##
+
+//** Background color of the whole progress component
+$progress-bg: #f5f5f5 !default;
+//** Progress bar text color
+$progress-bar-color: #fff !default;
+//** Variable for setting rounded corners on progress bar.
+$progress-border-radius: $border-radius-base !default;
+
+//** Default progress bar color
+$progress-bar-bg: $brand-primary !default;
+//** Success progress bar color
+$progress-bar-success-bg: $brand-success !default;
+//** Warning progress bar color
+$progress-bar-warning-bg: $brand-warning !default;
+//** Danger progress bar color
+$progress-bar-danger-bg: $brand-danger !default;
+//** Info progress bar color
+$progress-bar-info-bg: $brand-info !default;
+
+
+//== List group
+//
+//##
+
+//** Background color on `.list-group-item`
+$list-group-bg: #fff !default;
+//** `.list-group-item` border color
+$list-group-border: #ddd !default;
+//** List group border radius
+$list-group-border-radius: $border-radius-base !default;
+
+//** Background color of single list items on hover
+$list-group-hover-bg: #f5f5f5 !default;
+//** Text color of active list items
+$list-group-active-color: $component-active-color !default;
+//** Background color of active list items
+$list-group-active-bg: $component-active-bg !default;
+//** Border color of active list elements
+$list-group-active-border: $list-group-active-bg !default;
+//** Text color for content within active list items
+$list-group-active-text-color: lighten($list-group-active-bg, 40%) !default;
+
+//** Text color of disabled list items
+$list-group-disabled-color: $gray-light !default;
+//** Background color of disabled list items
+$list-group-disabled-bg: $gray-lighter !default;
+//** Text color for content within disabled list items
+$list-group-disabled-text-color: $list-group-disabled-color !default;
+
+$list-group-link-color: #555 !default;
+$list-group-link-hover-color: $list-group-link-color !default;
+$list-group-link-heading-color: #333 !default;
+
+
+//== Panels
+//
+//##
+
+$panel-bg: #fff !default;
+$panel-body-padding: 15px !default;
+$panel-heading-padding: 10px 15px !default;
+$panel-footer-padding: $panel-heading-padding !default;
+$panel-border-radius: $border-radius-base !default;
+
+//** Border color for elements within panels
+$panel-inner-border: #ddd !default;
+$panel-footer-bg: #f5f5f5 !default;
+
+$panel-default-text: $gray-dark !default;
+$panel-default-border: #ddd !default;
+$panel-default-heading-bg: #f5f5f5 !default;
+
+$panel-primary-text: #fff !default;
+$panel-primary-border: $brand-primary !default;
+$panel-primary-heading-bg: $brand-primary !default;
+
+$panel-success-text: $state-success-text !default;
+$panel-success-border: $state-success-border !default;
+$panel-success-heading-bg: $state-success-bg !default;
+
+$panel-info-text: $state-info-text !default;
+$panel-info-border: $state-info-border !default;
+$panel-info-heading-bg: $state-info-bg !default;
+
+$panel-warning-text: $state-warning-text !default;
+$panel-warning-border: $state-warning-border !default;
+$panel-warning-heading-bg: $state-warning-bg !default;
+
+$panel-danger-text: $state-danger-text !default;
+$panel-danger-border: $state-danger-border !default;
+$panel-danger-heading-bg: $state-danger-bg !default;
+
+
+//== Thumbnails
+//
+//##
+
+//** Padding around the thumbnail image
+$thumbnail-padding: 4px !default;
+//** Thumbnail background color
+$thumbnail-bg: $body-bg !default;
+//** Thumbnail border color
+$thumbnail-border: #ddd !default;
+//** Thumbnail border radius
+$thumbnail-border-radius: $border-radius-base !default;
+
+//** Custom text color for thumbnail captions
+$thumbnail-caption-color: $text-color !default;
+//** Padding around the thumbnail caption
+$thumbnail-caption-padding: 9px !default;
+
+
+//== Wells
+//
+//##
+
+$well-bg: #f5f5f5 !default;
+$well-border: darken($well-bg, 7%) !default;
+
+
+//== Badges
+//
+//##
+
+$badge-color: #fff !default;
+//** Linked badge text color on hover
+$badge-link-hover-color: #fff !default;
+$badge-bg: $gray-light !default;
+
+//** Badge text color in active nav link
+$badge-active-color: $link-color !default;
+//** Badge background color in active nav link
+$badge-active-bg: #fff !default;
+
+$badge-font-weight: bold !default;
+$badge-line-height: 1 !default;
+$badge-border-radius: 10px !default;
+
+
+//== Breadcrumbs
+//
+//##
+
+$breadcrumb-padding-vertical: 8px !default;
+$breadcrumb-padding-horizontal: 15px !default;
+//** Breadcrumb background color
+$breadcrumb-bg: #f5f5f5 !default;
+//** Breadcrumb text color
+$breadcrumb-color: #ccc !default;
+//** Text color of current page in the breadcrumb
+$breadcrumb-active-color: $gray-light !default;
+//** Textual separator for between breadcrumb elements
+$breadcrumb-separator: "/" !default;
+
+
+//== Carousel
+//
+//##
+
+$carousel-text-shadow: 0 1px 2px rgba(0,0,0,.6) !default;
+
+$carousel-control-color: #fff !default;
+$carousel-control-width: 15% !default;
+$carousel-control-opacity: .5 !default;
+$carousel-control-font-size: 20px !default;
+
+$carousel-indicator-active-bg: #fff !default;
+$carousel-indicator-border-color: #fff !default;
+
+$carousel-caption-color: #fff !default;
+
+
+//== Close
+//
+//##
+
+$close-font-weight: bold !default;
+$close-color: #000 !default;
+$close-text-shadow: 0 1px 0 #fff !default;
+
+
+//== Code
+//
+//##
+
+$code-color: #c7254e !default;
+$code-bg: #f9f2f4 !default;
+
+$kbd-color: #fff !default;
+$kbd-bg: #333 !default;
+
+$pre-bg: #f5f5f5 !default;
+$pre-color: $gray-dark !default;
+$pre-border-color: #ccc !default;
+$pre-scrollable-max-height: 340px !default;
+
+
+//== Type
+//
+//##
+
+//** Horizontal offset for forms and lists.
+$component-offset-horizontal: 180px !default;
+//** Text muted color
+$text-muted: $gray-light !default;
+//** Abbreviations and acronyms border color
+$abbr-border-color: $gray-light !default;
+//** Headings small color
+$headings-small-color: $gray-light !default;
+//** Blockquote small color
+$blockquote-small-color: $gray-light !default;
+//** Blockquote font size
+$blockquote-font-size: ($font-size-base * 1.25) !default;
+//** Blockquote border color
+$blockquote-border-color: $gray-lighter !default;
+//** Page header border color
+$page-header-border-color: $gray-lighter !default;
+//** Width of horizontal description list titles
+$dl-horizontal-offset: $component-offset-horizontal !default;
+//** Horizontal line color.
+$hr-border: $gray-lighter !default;
diff --git a/release/pui-v2.0.0-alpha.5/bootstrap-sass/bootstrap/_wells.scss b/release/pui-v2.0.0-alpha.5/bootstrap-sass/bootstrap/_wells.scss
new file mode 100644
index 000000000..b8657118a
--- /dev/null
+++ b/release/pui-v2.0.0-alpha.5/bootstrap-sass/bootstrap/_wells.scss
@@ -0,0 +1,29 @@
+//
+// Wells
+// --------------------------------------------------
+
+
+// Base class
+.well {
+ min-height: 20px;
+ padding: 19px;
+ margin-bottom: 20px;
+ background-color: $well-bg;
+ border: 1px solid $well-border;
+ border-radius: $border-radius-base;
+ @include box-shadow(inset 0 1px 1px rgba(0,0,0,.05));
+ blockquote {
+ border-color: #ddd;
+ border-color: rgba(0,0,0,.15);
+ }
+}
+
+// Sizes
+.well-lg {
+ padding: 24px;
+ border-radius: $border-radius-large;
+}
+.well-sm {
+ padding: 9px;
+ border-radius: $border-radius-small;
+}
diff --git a/release/pui-v2.0.0-alpha.5/bootstrap-sass/bootstrap/mixins/_alerts.scss b/release/pui-v2.0.0-alpha.5/bootstrap-sass/bootstrap/mixins/_alerts.scss
new file mode 100644
index 000000000..3faf0b5a5
--- /dev/null
+++ b/release/pui-v2.0.0-alpha.5/bootstrap-sass/bootstrap/mixins/_alerts.scss
@@ -0,0 +1,14 @@
+// Alerts
+
+@mixin alert-variant($background, $border, $text-color) {
+ background-color: $background;
+ border-color: $border;
+ color: $text-color;
+
+ hr {
+ border-top-color: darken($border, 5%);
+ }
+ .alert-link {
+ color: darken($text-color, 10%);
+ }
+}
diff --git a/release/pui-v2.0.0-alpha.5/bootstrap-sass/bootstrap/mixins/_background-variant.scss b/release/pui-v2.0.0-alpha.5/bootstrap-sass/bootstrap/mixins/_background-variant.scss
new file mode 100644
index 000000000..4c7769e13
--- /dev/null
+++ b/release/pui-v2.0.0-alpha.5/bootstrap-sass/bootstrap/mixins/_background-variant.scss
@@ -0,0 +1,12 @@
+// Contextual backgrounds
+
+// [converter] $parent hack
+@mixin bg-variant($parent, $color) {
+ #{$parent} {
+ background-color: $color;
+ }
+ a#{$parent}:hover,
+ a#{$parent}:focus {
+ background-color: darken($color, 10%);
+ }
+}
diff --git a/release/pui-v2.0.0-alpha.5/bootstrap-sass/bootstrap/mixins/_border-radius.scss b/release/pui-v2.0.0-alpha.5/bootstrap-sass/bootstrap/mixins/_border-radius.scss
new file mode 100644
index 000000000..ce1949987
--- /dev/null
+++ b/release/pui-v2.0.0-alpha.5/bootstrap-sass/bootstrap/mixins/_border-radius.scss
@@ -0,0 +1,18 @@
+// Single side border-radius
+
+@mixin border-top-radius($radius) {
+ border-top-right-radius: $radius;
+ border-top-left-radius: $radius;
+}
+@mixin border-right-radius($radius) {
+ border-bottom-right-radius: $radius;
+ border-top-right-radius: $radius;
+}
+@mixin border-bottom-radius($radius) {
+ border-bottom-right-radius: $radius;
+ border-bottom-left-radius: $radius;
+}
+@mixin border-left-radius($radius) {
+ border-bottom-left-radius: $radius;
+ border-top-left-radius: $radius;
+}
diff --git a/release/pui-v2.0.0-alpha.5/bootstrap-sass/bootstrap/mixins/_buttons.scss b/release/pui-v2.0.0-alpha.5/bootstrap-sass/bootstrap/mixins/_buttons.scss
new file mode 100644
index 000000000..ad3118731
--- /dev/null
+++ b/release/pui-v2.0.0-alpha.5/bootstrap-sass/bootstrap/mixins/_buttons.scss
@@ -0,0 +1,68 @@
+// Button variants
+//
+// Easily pump out default styles, as well as :hover, :focus, :active,
+// and disabled options for all buttons
+
+@mixin button-variant($color, $background, $border) {
+ color: $color;
+ background-color: $background;
+ border-color: $border;
+
+ &:focus,
+ &.focus {
+ color: $color;
+ background-color: darken($background, 10%);
+ border-color: darken($border, 25%);
+ }
+ &:hover {
+ color: $color;
+ background-color: darken($background, 10%);
+ border-color: darken($border, 12%);
+ }
+ &:active,
+ &.active,
+ .open > &.dropdown-toggle {
+ color: $color;
+ background-color: darken($background, 10%);
+ border-color: darken($border, 12%);
+
+ &:hover,
+ &:focus,
+ &.focus {
+ color: $color;
+ background-color: darken($background, 17%);
+ border-color: darken($border, 25%);
+ }
+ }
+ &:active,
+ &.active,
+ .open > &.dropdown-toggle {
+ background-image: none;
+ }
+ &.disabled,
+ &[disabled],
+ fieldset[disabled] & {
+ &,
+ &:hover,
+ &:focus,
+ &.focus,
+ &:active,
+ &.active {
+ background-color: $background;
+ border-color: $border;
+ }
+ }
+
+ .badge {
+ color: $background;
+ background-color: $color;
+ }
+}
+
+// Button sizes
+@mixin button-size($padding-vertical, $padding-horizontal, $font-size, $line-height, $border-radius) {
+ padding: $padding-vertical $padding-horizontal;
+ font-size: $font-size;
+ line-height: $line-height;
+ border-radius: $border-radius;
+}
diff --git a/release/pui-v2.0.0-alpha.5/bootstrap-sass/bootstrap/mixins/_center-block.scss b/release/pui-v2.0.0-alpha.5/bootstrap-sass/bootstrap/mixins/_center-block.scss
new file mode 100644
index 000000000..e06fb5e27
--- /dev/null
+++ b/release/pui-v2.0.0-alpha.5/bootstrap-sass/bootstrap/mixins/_center-block.scss
@@ -0,0 +1,7 @@
+// Center-align a block level element
+
+@mixin center-block() {
+ display: block;
+ margin-left: auto;
+ margin-right: auto;
+}
diff --git a/release/pui-v2.0.0-alpha.5/bootstrap-sass/bootstrap/mixins/_clearfix.scss b/release/pui-v2.0.0-alpha.5/bootstrap-sass/bootstrap/mixins/_clearfix.scss
new file mode 100644
index 000000000..dc3e2ab42
--- /dev/null
+++ b/release/pui-v2.0.0-alpha.5/bootstrap-sass/bootstrap/mixins/_clearfix.scss
@@ -0,0 +1,22 @@
+// Clearfix
+//
+// For modern browsers
+// 1. The space content is one way to avoid an Opera bug when the
+// contenteditable attribute is included anywhere else in the document.
+// Otherwise it causes space to appear at the top and bottom of elements
+// that are clearfixed.
+// 2. The use of `table` rather than `block` is only necessary if using
+// `:before` to contain the top-margins of child elements.
+//
+// Source: http://nicolasgallagher.com/micro-clearfix-hack/
+
+@mixin clearfix() {
+ &:before,
+ &:after {
+ content: " "; // 1
+ display: table; // 2
+ }
+ &:after {
+ clear: both;
+ }
+}
diff --git a/release/pui-v2.0.0-alpha.5/bootstrap-sass/bootstrap/mixins/_forms.scss b/release/pui-v2.0.0-alpha.5/bootstrap-sass/bootstrap/mixins/_forms.scss
new file mode 100644
index 000000000..277aa5f8e
--- /dev/null
+++ b/release/pui-v2.0.0-alpha.5/bootstrap-sass/bootstrap/mixins/_forms.scss
@@ -0,0 +1,88 @@
+// Form validation states
+//
+// Used in forms.less to generate the form validation CSS for warnings, errors,
+// and successes.
+
+@mixin form-control-validation($text-color: #555, $border-color: #ccc, $background-color: #f5f5f5) {
+ // Color the label and help text
+ .help-block,
+ .control-label,
+ .radio,
+ .checkbox,
+ .radio-inline,
+ .checkbox-inline,
+ &.radio label,
+ &.checkbox label,
+ &.radio-inline label,
+ &.checkbox-inline label {
+ color: $text-color;
+ }
+ // Set the border and box shadow on specific inputs to match
+ .form-control {
+ border-color: $border-color;
+ @include box-shadow(inset 0 1px 1px rgba(0,0,0,.075)); // Redeclare so transitions work
+ &:focus {
+ border-color: darken($border-color, 10%);
+ $shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 6px lighten($border-color, 20%);
+ @include box-shadow($shadow);
+ }
+ }
+ // Set validation states also for addons
+ .input-group-addon {
+ color: $text-color;
+ border-color: $border-color;
+ background-color: $background-color;
+ }
+ // Optional feedback icon
+ .form-control-feedback {
+ color: $text-color;
+ }
+}
+
+
+// Form control focus state
+//
+// Generate a customized focus state and for any input with the specified color,
+// which defaults to the `$input-border-focus` variable.
+//
+// We highly encourage you to not customize the default value, but instead use
+// this to tweak colors on an as-needed basis. This aesthetic change is based on
+// WebKit's default styles, but applicable to a wider range of browsers. Its
+// usability and accessibility should be taken into account with any change.
+//
+// Example usage: change the default blue border and shadow to white for better
+// contrast against a dark gray background.
+@mixin form-control-focus($color: $input-border-focus) {
+ $color-rgba: rgba(red($color), green($color), blue($color), .6);
+ &:focus {
+ border-color: $color;
+ outline: 0;
+ @include box-shadow(inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px $color-rgba);
+ }
+}
+
+// Form control sizing
+//
+// Relative text size, padding, and border-radii changes for form controls. For
+// horizontal sizing, wrap controls in the predefined grid classes. ``
+// 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-v2.0.0-alpha.5/bootstrap-sass/bootstrap/mixins/_gradients.scss b/release/pui-v2.0.0-alpha.5/bootstrap-sass/bootstrap/mixins/_gradients.scss
new file mode 100644
index 000000000..a8939f5ae
--- /dev/null
+++ b/release/pui-v2.0.0-alpha.5/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-v2.0.0-alpha.5/bootstrap-sass/bootstrap/mixins/_grid-framework.scss b/release/pui-v2.0.0-alpha.5/bootstrap-sass/bootstrap/mixins/_grid-framework.scss
new file mode 100644
index 000000000..16d038c04
--- /dev/null
+++ b/release/pui-v2.0.0-alpha.5/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: ceil(($grid-gutter-width / 2));
+ padding-right: floor(($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-v2.0.0-alpha.5/bootstrap-sass/bootstrap/mixins/_grid.scss b/release/pui-v2.0.0-alpha.5/bootstrap-sass/bootstrap/mixins/_grid.scss
new file mode 100644
index 000000000..0820258c6
--- /dev/null
+++ b/release/pui-v2.0.0-alpha.5/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: ceil(($gutter / -2));
+ margin-right: floor(($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-v2.0.0-alpha.5/bootstrap-sass/bootstrap/mixins/_hide-text.scss b/release/pui-v2.0.0-alpha.5/bootstrap-sass/bootstrap/mixins/_hide-text.scss
new file mode 100644
index 000000000..cd17cba63
--- /dev/null
+++ b/release/pui-v2.0.0-alpha.5/bootstrap-sass/bootstrap/mixins/_hide-text.scss
@@ -0,0 +1,21 @@
+// CSS image replacement
+//
+// Heads up! v3 launched 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-v2.0.0-alpha.5/bootstrap-sass/bootstrap/mixins/_image.scss b/release/pui-v2.0.0-alpha.5/bootstrap-sass/bootstrap/mixins/_image.scss
new file mode 100644
index 000000000..c8dcf5e9c
--- /dev/null
+++ b/release/pui-v2.0.0-alpha.5/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-v2.0.0-alpha.5/bootstrap-sass/bootstrap/mixins/_labels.scss b/release/pui-v2.0.0-alpha.5/bootstrap-sass/bootstrap/mixins/_labels.scss
new file mode 100644
index 000000000..eda6dfd29
--- /dev/null
+++ b/release/pui-v2.0.0-alpha.5/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-v2.0.0-alpha.5/bootstrap-sass/bootstrap/mixins/_list-group.scss b/release/pui-v2.0.0-alpha.5/bootstrap-sass/bootstrap/mixins/_list-group.scss
new file mode 100644
index 000000000..c478eeb31
--- /dev/null
+++ b/release/pui-v2.0.0-alpha.5/bootstrap-sass/bootstrap/mixins/_list-group.scss
@@ -0,0 +1,32 @@
+// List Groups
+
+@mixin list-group-item-variant($state, $background, $color) {
+ .list-group-item-#{$state} {
+ color: $color;
+ background-color: $background;
+
+ // [converter] extracted a&, button& to a.list-group-item-#{$state}, button.list-group-item-#{$state}
+ }
+
+ a.list-group-item-#{$state},
+ button.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-v2.0.0-alpha.5/bootstrap-sass/bootstrap/mixins/_nav-divider.scss b/release/pui-v2.0.0-alpha.5/bootstrap-sass/bootstrap/mixins/_nav-divider.scss
new file mode 100644
index 000000000..2e6da02a4
--- /dev/null
+++ b/release/pui-v2.0.0-alpha.5/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-v2.0.0-alpha.5/bootstrap-sass/bootstrap/mixins/_nav-vertical-align.scss b/release/pui-v2.0.0-alpha.5/bootstrap-sass/bootstrap/mixins/_nav-vertical-align.scss
new file mode 100644
index 000000000..c8fbf1a7d
--- /dev/null
+++ b/release/pui-v2.0.0-alpha.5/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-v2.0.0-alpha.5/bootstrap-sass/bootstrap/mixins/_opacity.scss b/release/pui-v2.0.0-alpha.5/bootstrap-sass/bootstrap/mixins/_opacity.scss
new file mode 100644
index 000000000..88e9a576a
--- /dev/null
+++ b/release/pui-v2.0.0-alpha.5/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-v2.0.0-alpha.5/bootstrap-sass/bootstrap/mixins/_pagination.scss b/release/pui-v2.0.0-alpha.5/bootstrap-sass/bootstrap/mixins/_pagination.scss
new file mode 100644
index 000000000..d4a5404fc
--- /dev/null
+++ b/release/pui-v2.0.0-alpha.5/bootstrap-sass/bootstrap/mixins/_pagination.scss
@@ -0,0 +1,24 @@
+// Pagination
+
+@mixin pagination-size($padding-vertical, $padding-horizontal, $font-size, $line-height, $border-radius) {
+ > li {
+ > a,
+ > span {
+ padding: $padding-vertical $padding-horizontal;
+ font-size: $font-size;
+ line-height: $line-height;
+ }
+ &: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-v2.0.0-alpha.5/bootstrap-sass/bootstrap/mixins/_panels.scss b/release/pui-v2.0.0-alpha.5/bootstrap-sass/bootstrap/mixins/_panels.scss
new file mode 100644
index 000000000..3ff31ae51
--- /dev/null
+++ b/release/pui-v2.0.0-alpha.5/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-v2.0.0-alpha.5/bootstrap-sass/bootstrap/mixins/_progress-bar.scss b/release/pui-v2.0.0-alpha.5/bootstrap-sass/bootstrap/mixins/_progress-bar.scss
new file mode 100644
index 000000000..90a62afc2
--- /dev/null
+++ b/release/pui-v2.0.0-alpha.5/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-v2.0.0-alpha.5/bootstrap-sass/bootstrap/mixins/_reset-filter.scss b/release/pui-v2.0.0-alpha.5/bootstrap-sass/bootstrap/mixins/_reset-filter.scss
new file mode 100644
index 000000000..bf7305120
--- /dev/null
+++ b/release/pui-v2.0.0-alpha.5/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-v2.0.0-alpha.5/bootstrap-sass/bootstrap/mixins/_reset-text.scss b/release/pui-v2.0.0-alpha.5/bootstrap-sass/bootstrap/mixins/_reset-text.scss
new file mode 100644
index 000000000..c9c28417f
--- /dev/null
+++ b/release/pui-v2.0.0-alpha.5/bootstrap-sass/bootstrap/mixins/_reset-text.scss
@@ -0,0 +1,18 @@
+@mixin reset-text() {
+ font-family: $font-family-base;
+ // We deliberately do NOT reset font-size.
+ font-style: normal;
+ font-weight: normal;
+ letter-spacing: normal;
+ line-break: auto;
+ line-height: $line-height-base;
+ text-align: left; // Fallback for where `start` is not supported
+ text-align: start;
+ text-decoration: none;
+ text-shadow: none;
+ text-transform: none;
+ white-space: normal;
+ word-break: normal;
+ word-spacing: normal;
+ word-wrap: normal;
+}
diff --git a/release/pui-v2.0.0-alpha.5/bootstrap-sass/bootstrap/mixins/_resize.scss b/release/pui-v2.0.0-alpha.5/bootstrap-sass/bootstrap/mixins/_resize.scss
new file mode 100644
index 000000000..83fa63791
--- /dev/null
+++ b/release/pui-v2.0.0-alpha.5/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-v2.0.0-alpha.5/bootstrap-sass/bootstrap/mixins/_responsive-visibility.scss b/release/pui-v2.0.0-alpha.5/bootstrap-sass/bootstrap/mixins/_responsive-visibility.scss
new file mode 100644
index 000000000..cbdf77723
--- /dev/null
+++ b/release/pui-v2.0.0-alpha.5/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 !important; }
+ 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-v2.0.0-alpha.5/bootstrap-sass/bootstrap/mixins/_size.scss b/release/pui-v2.0.0-alpha.5/bootstrap-sass/bootstrap/mixins/_size.scss
new file mode 100644
index 000000000..abbe2463c
--- /dev/null
+++ b/release/pui-v2.0.0-alpha.5/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-v2.0.0-alpha.5/bootstrap-sass/bootstrap/mixins/_tab-focus.scss b/release/pui-v2.0.0-alpha.5/bootstrap-sass/bootstrap/mixins/_tab-focus.scss
new file mode 100644
index 000000000..7df0ae7ca
--- /dev/null
+++ b/release/pui-v2.0.0-alpha.5/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-v2.0.0-alpha.5/bootstrap-sass/bootstrap/mixins/_table-row.scss b/release/pui-v2.0.0-alpha.5/bootstrap-sass/bootstrap/mixins/_table-row.scss
new file mode 100644
index 000000000..136795081
--- /dev/null
+++ b/release/pui-v2.0.0-alpha.5/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-v2.0.0-alpha.5/bootstrap-sass/bootstrap/mixins/_text-emphasis.scss b/release/pui-v2.0.0-alpha.5/bootstrap-sass/bootstrap/mixins/_text-emphasis.scss
new file mode 100644
index 000000000..3b446c415
--- /dev/null
+++ b/release/pui-v2.0.0-alpha.5/bootstrap-sass/bootstrap/mixins/_text-emphasis.scss
@@ -0,0 +1,12 @@
+// Typography
+
+// [converter] $parent hack
+@mixin text-emphasis-variant($parent, $color) {
+ #{$parent} {
+ color: $color;
+ }
+ a#{$parent}:hover,
+ a#{$parent}:focus {
+ color: darken($color, 10%);
+ }
+}
diff --git a/release/pui-v2.0.0-alpha.5/bootstrap-sass/bootstrap/mixins/_text-overflow.scss b/release/pui-v2.0.0-alpha.5/bootstrap-sass/bootstrap/mixins/_text-overflow.scss
new file mode 100644
index 000000000..1593b25ea
--- /dev/null
+++ b/release/pui-v2.0.0-alpha.5/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-v2.0.0-alpha.5/bootstrap-sass/bootstrap/mixins/_vendor-prefixes.scss b/release/pui-v2.0.0-alpha.5/bootstrap-sass/bootstrap/mixins/_vendor-prefixes.scss
new file mode 100644
index 000000000..df4c1ec87
--- /dev/null
+++ b/release/pui-v2.0.0-alpha.5/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; // Override Firefox's unusual default opacity; 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-v2.0.0-alpha.5/elements.html b/release/pui-v2.0.0-alpha.5/elements.html
new file mode 100644
index 000000000..518c7663b
--- /dev/null
+++ b/release/pui-v2.0.0-alpha.5/elements.html
@@ -0,0 +1,4198 @@
+
+
+
+ a brand new styleguide: Elements
+
+
+
+
+
+
+
+
+Avatars
+
+
+
+
+npm install pui-css-avatars --save
+
+
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 alt= "anonymous gravatar" src= "https://secure.gravatar.com/avatar/8b7970c372aabb936ca455127e04c959?s=20&d=blank" >
+ <i class= "fa fa-user" ></i>
+</div>
+<div class= "gravatar gravatar-sm" >
+ <img alt= "nicole and some people" 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 alt= "anonymous gravatar" 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 alt= "nicole and some people" 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 alt= "anonymous gravatar" 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 alt= "nicole and some people" 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 alt= "anonymous gravatar" src= "https://secure.gravatar.com/avatar/8b7970c372aabb936ca455127e04c959?s=80&d=blank" >
+ <i class= "fa fa-user" ></i>
+</div>
+<div class= "gravatar gravatar-lg" >
+ <img alt= "nicole and some people" src= "https://s.gravatar.com/avatar/c99bd3ce00444f946027741d5a5cd9e9?s=80&d=blank" >
+ <i class= "fa fa-user" ></i>
+</div>
+
+
+ Copy
+
+
+
Backgrounds
+
+
+
+
+npm install pui-css-backgrounds --save
+
+
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
+
+
+
+
+
+
+
+
+npm install pui-css-buttons --save
+
+
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-default" > Button</button>
+
+
+ Copy
+
+
+
+
+
+
+
+
+
+
+
+
<a class= "btn btn-default" aria-label= "Trulia homepage" 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-default 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-default btn-lg" > Large</button>
+
+
+ Copy
+
+
+
+
+
+
+ Default
+
+
+
+
+
+
<button class= "btn btn-default" > 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).
+
+
+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
+
+
+
+
+
+npm install pui-css-button-group --save
+
+
Button groups wrap a series of buttons.
+
+ Left
+ Middle
+ Right
+
+
+
+
+
<div class= "btn-group btn-group-lg" role= "group" aria-label= "..." >
+ <button type= "button" class= "btn btn-default" > Left</button>
+ <button type= "button" class= "btn btn-default" > Middle</button>
+ <button type= "button" class= "btn btn-default" > Right</button>
+</div>
+
+
+ Copy
+
+
+
Dividers
+
+
+npm install pui-css-dividers --save
+
+
Dividers draw horizontal lines between different content groupings.
+
+
+
+
<hr class= "divider-alternate-1" />
+<hr class= "divider-alternate-2" />
+
+
+ Copy
+
+
+
+
+
+
+
<hr class= "divider-1" />
+<hr class= "divider-2" />
+
+
+ Copy
+
+
+
Embeds
+
+
+
+Responsive
+
+
+npm install pui-css-embeds --save
+
+
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
+
+
+
+
+npm install pui-css-iconography --save
+
+
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-8" ></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
+
+
+npm install pui-css-spinners --save
+
+
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
+
+
+npm install pui-css-images --save
+
+
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
+
+
+
+
+npm install pui-css-labels --save
+
+
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" aria-label= "Remove label" ></a>
+</span>
+
+
+ Copy
+
+
+
Links
+
+
+npm install pui-css-links --save
+
+
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.
+Link
+Class
+Description
+
+
+default link link-textImportant links
+
+
+lowlight link link-text link-lowlightLess important links
+
+
+inverse link link-text link-inverseI go on a non-white background
+
+
+
+
+
+
Here's a <a class= "link-text link-lowlight" href= "http://bit.ly/1wO7Nhv" > less important link</a>
+
+
+ Copy
+
+
+
Lists
+
+
+
+
+npm install pui-css-lists --save
+
+
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
+
+
+
The "event list" from AppsManager can be built with a group list:
+
+
+
+
<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-4 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-8 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.
+
+
+ item 1
+
+
+ item 2
+
+
+ item 3
+
+
+
+
+
+
<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>
+
+
+ Copy
+
+
+
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.
+
+
+
+
<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 an example on a dark background (add .list-inline-divider-light to make the border white):
+
+
+
+
<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>
+
+
+ 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
+
+
+
+
+npm install pui-css-ribbons --save
+
+
Ribbons should be used to call out access, status, environment, etc.
+
+
+
+
+
+ British
+
For British eyes only
+
+
+
+
<div class= "ribbon" > British</div>
+<span class= "mlm" > For British eyes only</span>
+
+
+ Copy
+
+
+
+
+
+
+ Pivotal
+
Wow this ribbon is so inline
+
+
+
+
+
<div class= "ribbon ribbon-primary" > Pivotal</div>
+<span class= "mlm" > Wow this ribbon is so inline</span>
+
+
+ Copy
+
+
+
+
+
+
+
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
+
+
+
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-8" > 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 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 dark 4
+ Type dark 4
+ .type-dark-4
+
+
+ Type dark 5
+ Type dark 5
+ .type-dark-5
+
+
+ Type dark 6
+ Type dark 6
+ .type-dark-6
+
+
+ Type dark 7
+ Type dark 7
+ .type-dark-7
+
+
+ Type dark 8
+ Type dark 8
+ .type-dark-8
+
+
+ Type dark 9
+ Type dark 9
+ .type-dark-9
+
+
+ Type dark 10
+ Type dark 10
+ .type-dark-10
+
+
+ Type dark 11
+ Type dark 11
+ .type-dark-11
+
+
+ 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 accent 6
+ Type accent 6
+ .type-accent-6
+
+
+ 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 brand 6
+ Type brand 6
+ .type-brand-6
+
+
+ Type brand 7
+ Type brand 7
+ .type-brand-7
+
+
+ Type brand 8
+ Type brand 8
+ .type-brand-8
+
+
+ Type brand 9
+ Type brand 9
+ .type-brand-9
+
+
+ Type brand 10
+ Type brand 10
+ .type-brand-10
+
+
+ Type brand 11
+ Type brand 11
+ .type-brand-11
+
+
+ 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 error 5
+ Type error 5
+ .type-error-5
+
+
+ Type error 6
+ Type error 6
+ .type-error-6
+
+
+ Type success 1
+ Type success 1
+ .type-success-1
+
+
+ Type success 2
+ Type success 2
+ .type-success-2
+
+
+ Type success 3
+ Type success 3
+ .type-success-3
+
+
+ Type success 4
+ Type success 4
+ .type-success-4
+
+
+ Type success 5
+ Type success 5
+ .type-success-5
+
+
+ Type success 6
+ Type success 6
+ .type-success-6
+
+
+ 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 warn 4
+ Type warn 4
+ .type-warn-4
+
+
+ Type warn 5
+ Type warn 5
+ .type-warn-5
+
+
+ Type warn 6
+ Type warn 6
+ .type-warn-6
+
+
+
+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
+
+
+
+
+
+
+
Multiline Headings
+Headings are spaced so their line height and padding are consistent on one or many lines.
+
+
+
+
+
+
One line heading
+
+
+
+
+
<h1> One line heading</h1>
+
+
+ Copy
+
+
+
+
+
+
+
I am a
+
+
+
+
+
+
<h1> I am a <br/> multiline heading</h1>
+
+
+ Copy
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/release/pui-v2.0.0-alpha.5/faq.html b/release/pui-v2.0.0-alpha.5/faq.html
new file mode 100644
index 000000000..035b90108
--- /dev/null
+++ b/release/pui-v2.0.0-alpha.5/faq.html
@@ -0,0 +1,1135 @@
+
+
+
+ a brand new styleguide: FAQ
+
+
+
+
+
+
+
+
+How do I customize my components?
+You should use modifier classes to change the spacing between a component and its siblings, or a component and its
+ children. Modifier classes can also be used to change simple attributes such as background color or text color. But, if
+ you start making more in-depth modifications, this is the time to subclass your component. For example: 'simple',
+ 'basic', and 'shadow' are all types of panels. They do more than just change colors or spacing, so it makes sense to
+ make them a separate component. It also makes them easier to work with, because you can achieve the new look and feel
+ by just adding one class name to the outer wrapper.
Caveat: Using lots of modifier classes is really tempting because you don't have to write your own CSS, but it can
+ quickly get messy as someone attempting to reuse the component would need to get all the classes right on the
+ different dom nodes in order to match your style. It also means that there is no longer a way to globally change the
+ styles, as there isn't a class name 'hook' into that component.
TLDR; Use modifier classes only for simple overrides. For anything more complicated, make a sub-component.
+Using modifier classes
+
+
+
+
+
+
+
+
+
+
+
+
<Panel title= "Base Panel" id= "myBasePanel" >
+ <p> Base contents</p>
+</Panel>
+
+
+ Copy
+
+
+
+
+
+
+
+
+
+
+
+
<Panel title= "Panel with modifier classes" className= "paxxl bg-brand-11" innerClassName= "type-neutral-11 bg-brand-10" >
+ <p> Panel contents</p>
+</Panel>
+
+
+ Copy
+
+
+
+
+
+
+
Using custom classes
+
+
+
+
+
+
<style>
+ .my-special-panel {
+ border-radius : 10px ;
+ overflow : hidden ;
+ }
+
+ .my-special-panel .panel-header * {
+ background : #D9F0FF ;
+ color : #229BE6 ;
+ }
+</style>
+
+
+ Copy
+
+
+
+
+
+
+
<Panel className= "my-special-panel" title= "Base Panel" >
+ <p> Base contents</p>
+</Panel>
+
+
+ Copy
+
+
+
Unless otherwise specified, when passing in className, id, and style on a component, these
+props are placed on the outermost div of the rendered component.
+How do I pass custom styles to a component?
+This is not recommended. We'd suggest you try to customize your component using modifier or custom classes .
If you're sure you want to do this...
+
+
+
+
<Panel title= "Base Panel" style= { { fontFamily: ' fantasy ', textTransform: ' uppercase '} } >
+ <p> Base contents</p>
+</Panel>
+
+
+ Copy
+
+
+
+
+
+
+
+
diff --git a/release/pui-v2.0.0-alpha.5/font-awesome/fontawesome-webfont.eot b/release/pui-v2.0.0-alpha.5/font-awesome/fontawesome-webfont.eot
new file mode 100644
index 000000000..a30335d74
Binary files /dev/null and b/release/pui-v2.0.0-alpha.5/font-awesome/fontawesome-webfont.eot differ
diff --git a/release/pui-v2.0.0-alpha.5/font-awesome/fontawesome-webfont.svg b/release/pui-v2.0.0-alpha.5/font-awesome/fontawesome-webfont.svg
new file mode 100644
index 000000000..6fd19abcb
--- /dev/null
+++ b/release/pui-v2.0.0-alpha.5/font-awesome/fontawesome-webfont.svg
@@ -0,0 +1,640 @@
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/release/pui-v2.0.0-alpha.5/font-awesome/fontawesome-webfont.ttf b/release/pui-v2.0.0-alpha.5/font-awesome/fontawesome-webfont.ttf
new file mode 100644
index 000000000..d7994e130
Binary files /dev/null and b/release/pui-v2.0.0-alpha.5/font-awesome/fontawesome-webfont.ttf differ
diff --git a/release/pui-v2.0.0-alpha.5/font-awesome/fontawesome-webfont.woff b/release/pui-v2.0.0-alpha.5/font-awesome/fontawesome-webfont.woff
new file mode 100644
index 000000000..6fd4ede0f
Binary files /dev/null and b/release/pui-v2.0.0-alpha.5/font-awesome/fontawesome-webfont.woff differ
diff --git a/release/pui-v2.0.0-alpha.5/font-awesome/fontawesome-webfont.woff2 b/release/pui-v2.0.0-alpha.5/font-awesome/fontawesome-webfont.woff2
new file mode 100644
index 000000000..5560193cc
Binary files /dev/null and b/release/pui-v2.0.0-alpha.5/font-awesome/fontawesome-webfont.woff2 differ
diff --git a/release/pui-v2.0.0-alpha.5/forms.html b/release/pui-v2.0.0-alpha.5/forms.html
new file mode 100644
index 000000000..5bbb84079
--- /dev/null
+++ b/release/pui-v2.0.0-alpha.5/forms.html
@@ -0,0 +1,2287 @@
+
+
+
+ a brand new styleguide: Forms
+
+
+
+
+
+
+
+
+
+
+
+
+
+npm install pui-css-forms --save
+
+
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.
+
+
+
+
<label for= "readonlyautoselect" ></label>
+<input class= "auto-select form-control" id= "readonlyautoselect" 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" >
+ <label for= "demohelp" />
+ <input class= "form-control" id= "demohelp" 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= "exampleInputEmail5" > Email address</label>
+ <input class= "form-control" id= "exampleInputEmail5" 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-default" 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= "exampleInputEmail6" > Write a thing</label>
+ <input class= "form-control" id= "exampleInputEmail6" 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-default" 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= "exampleInputEmail7" >
+ <abbr title= "required" > *</abbr>
+ Email address
+ </label>
+ <input aria-required= "true" class= "form-control" id= "exampleInputEmail7" 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= "exampleInputEmail3" >
+ <abbr title= "required" > *</abbr>
+ Email address
+ </label>
+ </div>
+ <div class= "col-md-18" >
+ <input aria-required= "true" class= "form-control" id= "exampleInputEmail3" 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= "exampleInputEmail4" >
+ <abbr title= "required" > *</abbr>
+ Email address
+ </label>
+ <div class= "col-md-18" >
+ <input aria-required= "true" class= "form-control" id= "exampleInputEmail4" placeholder= "Enter email" required= "required" type= "email" ></input>
+ </div>
+ </div>
+</form>
+
+
+ Copy
+
+
+
An unstyled input that doesn't have any of the default input styles
+
+
+
+
+
<form role= "form" >
+ <label for= "unstyledInput" > Text Input</label>
+ <input class= "unstyled" id= "unstyledInput" 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" >
+ <label for= "html5TextInput" > Text Input</label>
+ <input class= "form-control" id= "html5TextInput" placeholder= "Text input" type= "text" ></input>
+</form>
+
+
+ Copy
+
+
+
Password field
+
+
+
+
+
<form class= "styleguide-form" role= "form" >
+ <label for= "html5PasswordInput" > Password Input</label>
+ <input class= "form-control" id= "html5PasswordInput" placeholder= "Password" type= "password" ></input>
+</form>
+
+
+ Copy
+
+
+
Date
+
+
+
+
+
<form class= "styleguide-form" role= "form" >
+ <label for= "html5DateInput" > Date Input</label>
+ <input class= "form-control" id= "html5DateInput" placeholder= "Date" type= "date" ></input>
+</form>
+
+
+ Copy
+
+
+
Number
+
+
+
+
+
<form class= "styleguide-form" role= "form" >
+ <label for= "html5NumberInput" > Number Input</label>
+ <input class= "form-control" id= "html5NumberInput" placeholder= "Number" type= "number" ></input>
+</form>
+
+
+ Copy
+
+
+
With a min/max and default starting value
+
+
+
+
+
<form class= "styleguide-form" role= "form" >
+ <label for= "html5MinMaxInput" > Min/Max Input</label>
+ <input class= "form-control" id= "html5MinMaxInput" placeholder= "Number" type= "number" min= 0 max= 2 value= 1 ></input>
+</form>
+
+
+ Copy
+
+
+
With a different increment value
+
+
+
+
+
<form class= "styleguide-form" role= "form" >
+ <label for= "html5StepInput" > Step Input</label>
+ <input class= "form-control" id= "html5StepInput" 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" >
+ <label for= "html5EmailInput" > Email Input</label>
+ <input class= "form-control" id= "html5EmailInput" 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" >
+ <label for= "html5URLInput" > URL Input</label>
+ <input class= "form-control" id= "html5URLInput" 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" >
+ <label for= "html5PhoneInput" > Phone Input</label>
+ <input class= "form-control" id= "html5PhoneInput" 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.
+
+
+
+
+
+ Large Input
+
+
+
+
+
+
<label for= "LargeInput" > Large Input</label>
+<input class= "form-control input-lg" id= "LargeInput" placeholder= ".input-lg" type= "text" >
+
+
+ Copy
+
+
+
+
+
+
+ Default Input
+
+
+
+
+
+
<label for= "DefaultInput" > Default Input</label>
+<input class= "form-control" id= "DefaultInput" placeholder= "Default Input" type= "text" >
+
+
+ Copy
+
+
+
+
+
+
+ Small Input
+
+
+
+
+
+
<label for= "SmallInput" > Small Input</label>
+<input class= "form-control input-sm" id= "SmallInput" 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" >
+ <label for= "Small2WidthInput" > Small 2 Width Input</label>
+ <input class= "form-control" id= "Small2WidthInput" placeholder= ".col-xs-2" type= "text" ></input>
+ </div>
+ <div class= "col-md-6" >
+ <label for= "Small3WidthInput" > Small 3 Width Input</label>
+ <input class= "form-control" id= "Small3WidthInput" placeholder= ".col-xs-3" type= "text" ></input>
+ </div>
+ <div class= "col-md-8" >
+ <label for= "Small4WidthInput" > Small 4 Width Input</label>
+ <input class= "form-control" id= "Small4WidthInput" placeholder= ".col-xs-4" type= "text" ></input>
+ </div>
+ </div>
+</form>
+
+
+ Copy
+
+
+
Use this input when creating a search component.
+
+
+
+
<label for= "searchInput" > Search</label>
+<div class= "form-group form-group-search" >
+ <input class= "form-control" id= "searchInput" 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.
+
ReadOnly
+
+
+
+
<label for= "ReadOnlyInput" > ReadOnly</label>
+<input class= "form-control" type= "text" id= "ReadOnlyInput" 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" >
+ <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" >
+ <label for= "Small2WidthInput2" > Small 2 Width Input</label>
+ <input class= "form-control" id= "Small2WidthInput2" placeholder= ".col-xs-2" type= "text" ></input>
+ </div>
+ <div class= "col-md-6" >
+ <label for= "Small3WidthInput2" > Small 3 Width Input</label>
+ <input class= "form-control" id= "Small3WidthInput2" placeholder= ".col-xs-3" type= "text" ></input>
+ </div>
+ <div class= "col-md-8" >
+ <label for= "Small4WidthInput2" > Small 4 Width Input</label>
+ <input class= "form-control" id= "Small4WidthInput2" 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
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/release/pui-v2.0.0-alpha.5/hiring.html b/release/pui-v2.0.0-alpha.5/hiring.html
new file mode 100644
index 000000000..1649246cf
--- /dev/null
+++ b/release/pui-v2.0.0-alpha.5/hiring.html
@@ -0,0 +1,1024 @@
+
+
+
+ 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 Tabasco is basically vinegar so shouldn't be considered hot sauce
+
+
+
+
+
+
+
+
+
Join a team that believes in what they build.
+
Apply
+
+
+
+
+
+
+
+
+
diff --git a/release/pui-v2.0.0-alpha.5/index.html b/release/pui-v2.0.0-alpha.5/index.html
new file mode 100644
index 000000000..b50ba6a83
--- /dev/null
+++ b/release/pui-v2.0.0-alpha.5/index.html
@@ -0,0 +1,1608 @@
+
+
+
+ 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-3">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.
+
+
+
+
+
+
+ React
+
+
These are React components. 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.
+
+
+ Don't modify Pivotal UI stylesheets unless you are a
+ contributor. 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)
+ 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 Sketch.
+
+
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.
+
+
+
+
+
+
+
+
+
+
+
diff --git a/release/pui-v2.0.0-alpha.5/intro.html b/release/pui-v2.0.0-alpha.5/intro.html
new file mode 100644
index 000000000..b50ba6a83
--- /dev/null
+++ b/release/pui-v2.0.0-alpha.5/intro.html
@@ -0,0 +1,1608 @@
+
+
+
+ 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-3">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.
+
+
+
+
+
+
+ React
+
+
These are React components. 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.
+
+
+ Don't modify Pivotal UI stylesheets unless you are a
+ contributor. 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)
+ 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 Sketch.
+
+
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.
+
+
+
+
+
+
+
+
+
+
+
diff --git a/release/pui-v2.0.0-alpha.5/layout.html b/release/pui-v2.0.0-alpha.5/layout.html
new file mode 100644
index 000000000..edc8643c8
--- /dev/null
+++ b/release/pui-v2.0.0-alpha.5/layout.html
@@ -0,0 +1,1959 @@
+
+
+
+ a brand new styleguide: Layout
+
+
+
+
+
+
+
+
+Grids
+
+
+
+
+npm install pui-css-grids --save
+
+
+
+ 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.
+
+
+
+
+
+npm install pui-css-media --save
+
+
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= "demo placeholder for media" 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= "demo placeholder for media" 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= "demo placeholder for media" 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= "demo placeholder for media" 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= "demo placeholder for media" 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= "demo placeholder for media" 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= "demo placeholder for media" 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= "demo placeholder for media" 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= "demo placeholder for media" 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= "demo placeholder for media" 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= "demo placeholder for media" 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= "demo placeholder for media" 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= "demo placeholder for media" 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= "demo placeholder for media" class= "media-object" src= "http://placehold.it/100x100" >
+ </a>
+ <div class= "media-body" >
+ <p> Large stackable</p>
+ </div>
+</div>
+
+
+ Copy
+
+
+
Panes
+
+
+npm install pui-css-panes --save
+
+
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-2" >
+ <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-2" >
+ <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
+
+
+npm install pui-css-vertical-alignment --save
+
+
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.
+
+
+
+
+
diff --git a/release/pui-v2.0.0-alpha.5/nginx.conf b/release/pui-v2.0.0-alpha.5/nginx.conf
new file mode 100644
index 000000000..18968986e
--- /dev/null
+++ b/release/pui-v2.0.0-alpha.5/nginx.conf
@@ -0,0 +1,50 @@
+worker_processes 1;
+daemon off;
+
+error_log <%= ENV["APP_ROOT"] %>/nginx/logs/error.log;
+events { worker_connections 1024; }
+
+http {
+ charset UTF-8;
+ log_format cloudfoundry '$http_x_forwarded_for - $http_referer - [$time_local] "$request" $status $body_bytes_sent';
+ access_log <%= ENV["APP_ROOT"] %>/nginx/logs/access.log cloudfoundry;
+ default_type application/octet-stream;
+ include mime.types;
+ sendfile on;
+ gzip on;
+ gzip_disable "msie6";
+
+ gzip_comp_level 6;
+ gzip_min_length 1100;
+ gzip_buffers 16 8k;
+ gzip_proxied any;
+ gzip_types
+ text/plain
+ text/css
+ text/js
+ text/xml
+ text/javascript
+ application/javascript
+ application/x-javascript
+ application/json
+ application/xml
+ application/xml+rss;
+ keepalive_timeout 30;
+
+ server {
+ listen <%= ENV["PORT"] %>;
+ server_name localhost;
+
+ location / {
+ root <%= ENV["APP_ROOT"] %>/public;
+ index index.html index.htm Default.htm;
+ <% if File.exists?(File.join(ENV["APP_ROOT"], "nginx/conf/.enable_directory_index")) %>
+ autoindex on;
+ <% end %>
+ <% if File.exists?(auth_file = File.join(ENV["APP_ROOT"], "nginx/conf/.htpasswd")) %>
+ auth_basic "Restricted"; #For Basic Auth
+ auth_basic_user_file <%= auth_file %>; #For Basic Auth
+ <% end %>
+ }
+ }
+}
diff --git a/release/pui-v2.0.0-alpha.5/objects.html b/release/pui-v2.0.0-alpha.5/objects.html
new file mode 100644
index 000000000..251023d99
--- /dev/null
+++ b/release/pui-v2.0.0-alpha.5/objects.html
@@ -0,0 +1,4988 @@
+
+
+
+ a brand new styleguide: Objects
+
+
+
+
+
+
+
+
+Accordions
+
+
+
+
+npm install pui-css-collapse --save
+
+
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
+
+
+
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 aria-label= "trigger accordion" >
+ <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 collapse-trigger collapsed" data-parent= "#accordion-2" data-toggle= "collapse" href= "#myCollapse-3" >
+ <div class= "row" >
+ <div class= "col-md-23" >
+ <a aria-label= "trigger accordion" >
+ <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 aria-label= "trigger accordion" >
+ <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" aria-label= "demo link to a funny gif" > click here</a>
+ </p>
+</div>
+
+
+ Copy
+
+
+
Alert Types
+Our 4 alert types are:
+
+
+
+
+
+
+
+
+
+
+
<div class= "alert alert-success" >
+ <div class= "media mtn" >
+ <div class= "media-left" >
+ <i class= "fa alert-icon 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 mtn" >
+ <div class= "media-left" >
+ <i class= "fa alert-icon 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 mtn" >
+ <div class= "media-left" >
+ <i class= "fa alert-icon 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 mtn" >
+ <div class= "media-left" >
+ <i class= "fa alert-icon 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-6" >
+ <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 alert-icon 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
+
+
+npm install pui-css-back-to-top --save
+
+
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= "#top" style= "display: inline;" aria-label= "Back to top" ></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
+
+
+
+ Special installation instructions
+
+
+ Our code is styled using PrismJS .
+ You will need some additional setup to get it to work:
+
+
+
+
+ Install pui-prismjs. This package provides the code parsing magic.
+
+
+
+
+
+
+
+ Include `pui-prismjs` in your main javascript file:
+
+
+ require("pui-prismjs");
+
+
+
+
+
+ Install a PrismJs theme. This makes the code look pretty.
+
+
+
+
+ The two light and dark Pivotal themes are:
+
+ prismjs-okaidia-themeprismjs-default-theme
+
+
+
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
+
+
+
+ Special installation instructions
+
+
+ You will need to follow the PrismJS installation instructions in
+ the styled code section.
+
+
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
+
+
+
+
+npm install pui-css-dropdowns --save
+
+
Dropdowns are menus that can be triggered by buttons.
This is the basic bootstrap dropdown.
+
+
+ Button Dropdown
+
+
+
+
+
+
+
<div class= "dropdown" >
+ <button id= "dropdown-button-1" class= "dropdown-toggle btn btn-default-alt" 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" >
+ <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
+
+
+
+
Alignment
+
+ By default, a dropdown menu is automatically positioned 100% from the top and along the left side of its parent.
+ Add .dropdown-menu-right to a .dropdown-menu to right align the dropdown menu
+
+
+
+
+ Button Dropdown
+
+
+
+
+
+
+
<div class= "dropdown" >
+ <button id= "dropdown-button-1" class= "dropdown-toggle btn btn-default-alt" type= "button" data-toggle= "dropdown" aria-haspopup= "true" aria-expanded= "false" >
+ Button Dropdown
+ <span class= "caret" ></span>
+ </button>
+ <ul class= "dropdown-menu dropdown-menu-right" 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
+
+
+
+
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-default-alt" 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-notifications btn-group" >
+ <button data-toggle= "dropdown" class= "dropdown-toggle btn btn-link" type= "button" >
+ <div class= "dropdown-notifications-title" >
+ <i class= "fa fa-bell" ></i>
+ </div>
+ </button>
+ <ul class= "dropdown-menu" role= "menu" >
+ <li role= "presentation" >
+ <div class= "dropdown-notifications-none" >
+ <i class= "fa fa-bell" ></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-notifications btn-group" >
+ <button data-toggle= "dropdown" class= "dropdown-toggle btn btn-link" type= "button" >
+ <div class= "dropdown-notifications-title" >
+ <i class= "fa fa-bell" ></i>
+ <span class= "dropdown-notifications-badge" > 2</span>
+ </div>
+ </button>
+ <ul class= "dropdown-menu" role= "menu" >
+ <li role= "presentation" >
+ <a role= "menuitem" href= "https://twitter.com/fat" >
+ <div class= "media" >
+ <div class= "media-left media-middle" >
+ <h3 class= "mvn" >
+ <span class= "label label-primary" > New</span>
+ </h3>
+ </div>
+ <div class= "media-body media-middle" >
+ <h5 class= "media-heading mbn type-dark-2" > 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" >
+ <div class= "media-left media-middle" >
+ <h3 class= "mvn" >
+ <span class= "label label-primary" > New</span>
+ </h3>
+ </div>
+ <div class= "media-body media-middle" >
+ <h5 class= "media-heading mbn type-dark-2" > Pivotal-CF</h5>
+ <p class= "type-sm type-neutral-5 mvn" > 1 New File Available</p>
+ </div>
+ </div>
+ </a>
+ </li>
+ </ul>
+</div>
+
+
+ Copy
+
+
+
Here's an example modifiying the size and the color of the bell
+
+
+
+
<div class= "dropdown-notifications btn-group" >
+ <button data-toggle= "dropdown" class= "dropdown-toggle btn btn-link" type= "button" >
+ <div class= "dropdown-notifications-title h1" >
+ <i class= "fa fa-bell type-neutral-2" ></i>
+ <span class= "dropdown-notifications-badge" > 42</span>
+ </div>
+ </button>
+ <ul class= "dropdown-menu" role= "menu" >
+ <li role= "presentation" >
+ <a role= "menuitem" href= "https://twitter.com/fat" > Item 1</a>
+ </li>
+ <li role= "presentation" >
+ <a role= "menuitem" href= "https://twitter.com/fat" > ...</a>
+ </li>
+ <li role= "presentation" >
+ <a role= "menuitem" href= "https://twitter.com/fat" > Item 42</a>
+ </li>
+ </ul>
+</div>
+
+
+ Copy
+
+
+
This is a notification dropdown with alerts.
+
+
+
+
<div class= "dropdown-notifications btn-group" >
+ <button data-toggle= "dropdown" class= "dropdown-toggle btn btn-link" type= "button" >
+ <div class= "dropdown-notifications-title" >
+ <i class= "fa fa-bell" ></i>
+ <i class= "fa fa-exclamation-triangle dropdown-notifications-alert" ></i>
+ </div>
+ </button>
+ <ul class= "dropdown-menu" role= "menu" >
+ <li role= "presentation" >
+ <a role= "menuitem" href= "https://twitter.com/fat" >
+ <div class= "media" >
+ <div class= "media-left media-middle" >
+ <i class= "fa fa-exclamation-triangle type-warn-3 mrm" ></i>
+ </div>
+ <div class= "media-body media-middle" >
+ <h5 class= "media-heading mbn type-dark-2" > Warning</h5>
+ <p class= "type-sm type-neutral-5 mvn" > News for you</p>
+ </div>
+ </div>
+ </a>
+ </li>
+ </ul>
+</div>
+
+
+ Copy
+
+
+
Hoverable
+
+
+npm install pui-css-hoverable --save
+
+
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
+
+
+
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.
+
+
+
+
+
+ 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
+
+
+
Maps
+
+
+npm install pui-css-google-maps --save
+
+
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 class= 'labs-map' id= 'my-google-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 ),
+ mapElementClass : 'labs-map' ,
+ mapElementId : 'my-google-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
+
+
+npm install pui-css-modals --save
+
+
Modals bring desired content to the foreground and de-emphasize the rest of the page.
+
+
+ Launch modal
+
+
+
+
+
+
+
+
+ Here is some interesting text in the modal body.
+
+
+
+
+
+
+
+
+
<!-- Button trigger modal -->
+<button class= "btn btn-default" data-toggle= "modal" data-target= "#myModal" >
+ Launch modal
+</button>
+
+<!-- Modal Basic -->
+<div class= "modal fade modal-basic" id= "myModal" tabindex= "-1" role= "dialog" aria-labelledby= "myModalLabel" >
+ <div class= "modal-dialog" >
+ <div class= "modal-content" >
+ <div class= "modal-header" >
+ <button type= "button" class= "close" data-dismiss= "modal" ><span aria-hidden= "true" > × </span><span class= "sr-only" > Close</span></button>
+ <h4 class= "modal-title" id= "myModalLabel" > Modal title</h4>
+ </div>
+ <div class= "modal-body" >
+ Here is some interesting text in the modal body.
+ </div>
+ <div class= "modal-footer" >
+ <button type= "button" class= "btn btn-lowlight" data-dismiss= "modal" > Close</button>
+ <button type= "button" class= "btn btn-default" > Save changes</button>
+ </div>
+ </div>
+ </div>
+</div>
+
+
+ Copy
+
+
+
Panels
+
+
+
+
+npm install pui-css-panels --save
+
+
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
+
+
+
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
+
+
+
Progress Bars
+
+
+npm install pui-css-progress-bars --save
+
+
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
+
+
+
+
+npm install pui-css-tabs --save
+
+
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
+
+
+
+
+npm install pui-css-tables --save
+
+
+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
+
+
+
+
+npm install pui-css-tooltips --save
+
+
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
+
+
Traffic Lights
+
+
+npm install pui-css-traffic-lights --save
+
+
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.
+
+
+
+
+
+ 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
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/release/pui-v2.0.0-alpha.5/oocss/_clearfix-me.scss b/release/pui-v2.0.0-alpha.5/oocss/_clearfix-me.scss
new file mode 100644
index 000000000..d24884819
--- /dev/null
+++ b/release/pui-v2.0.0-alpha.5/oocss/_clearfix-me.scss
@@ -0,0 +1,73 @@
+/*
+ * clearfix used project wide to clear floats and create a new formatting context
+ * usage @include clearfix-me()
+ * $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-v2.0.0-alpha.5/oocss/_listWhitespace.scss b/release/pui-v2.0.0-alpha.5/oocss/_listWhitespace.scss
new file mode 100644
index 000000000..f6a430bb9
--- /dev/null
+++ b/release/pui-v2.0.0-alpha.5/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-v2.0.0-alpha.5/oocss/_whitespace.scss b/release/pui-v2.0.0-alpha.5/oocss/_whitespace.scss
new file mode 100644
index 000000000..3d72394be
--- /dev/null
+++ b/release/pui-v2.0.0-alpha.5/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-v2.0.0-alpha.5/pane.html b/release/pui-v2.0.0-alpha.5/pane.html
new file mode 100644
index 000000000..1ef202feb
--- /dev/null
+++ b/release/pui-v2.0.0-alpha.5/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, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
+ padding-top: 0.107em;
+ padding-bottom: 0.107em; }
+
+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 {
+ font-weight: 400; }
+
+h2 {
+ font-weight: 400; }
+
+h3 {
+ font-weight: 400; }
+
+h4 {
+ font-weight: 400; }
+
+h5 {
+ font-weight: 400; }
+
+h6 {
+ font-weight: 400; }
+
+.h1 {
+ font-size: 31px !important;
+ font-weight: 400 !important; }
+
+.h2 {
+ font-size: 25px !important;
+ font-weight: 400 !important; }
+
+.h3 {
+ font-size: 20px !important;
+ font-weight: 400 !important; }
+
+.h4 {
+ font-size: 18px !important;
+ font-weight: 400 !important; }
+
+.h5 {
+ font-size: 16px !important;
+ font-weight: 400 !important; }
+
+.h6 {
+ font-size: 13px !important;
+ font-weight: 400 !important; }
+
+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 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 dark 4
+ Type dark 4
+ .type-dark-4
+
+
+ Type dark 5
+ Type dark 5
+ .type-dark-5
+
+
+ Type dark 6
+ Type dark 6
+ .type-dark-6
+
+
+ Type dark 7
+ Type dark 7
+ .type-dark-7
+
+
+ Type dark 8
+ Type dark 8
+ .type-dark-8
+
+
+ Type dark 9
+ Type dark 9
+ .type-dark-9
+
+
+ Type dark 10
+ Type dark 10
+ .type-dark-10
+
+
+ Type dark 11
+ Type dark 11
+ .type-dark-11
+
+
+ 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 accent 6
+ Type accent 6
+ .type-accent-6
+
+
+ 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 brand 6
+ Type brand 6
+ .type-brand-6
+
+
+ Type brand 7
+ Type brand 7
+ .type-brand-7
+
+
+ Type brand 8
+ Type brand 8
+ .type-brand-8
+
+
+ Type brand 9
+ Type brand 9
+ .type-brand-9
+
+
+ Type brand 10
+ Type brand 10
+ .type-brand-10
+
+
+ Type brand 11
+ Type brand 11
+ .type-brand-11
+
+
+ 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 error 5
+ Type error 5
+ .type-error-5
+
+
+ Type error 6
+ Type error 6
+ .type-error-6
+
+
+ Type success 1
+ Type success 1
+ .type-success-1
+
+
+ Type success 2
+ Type success 2
+ .type-success-2
+
+
+ Type success 3
+ Type success 3
+ .type-success-3
+
+
+ Type success 4
+ Type success 4
+ .type-success-4
+
+
+ Type success 5
+ Type success 5
+ .type-success-5
+
+
+ Type success 6
+ Type success 6
+ .type-success-6
+
+
+ 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 warn 4
+ Type warn 4
+ .type-warn-4
+
+
+ Type warn 5
+ Type warn 5
+ .type-warn-5
+
+
+ Type warn 6
+ Type warn 6
+ .type-warn-6
+
+
+
+*/
+.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: #232B2F !important; }
+
+.type-dark-2 {
+ color: #243641 !important; }
+
+.type-dark-3 {
+ color: #3D4A51 !important; }
+
+.type-dark-4 {
+ color: #4F6069 !important; }
+
+.type-dark-5 {
+ color: #607580 !important; }
+
+.type-dark-6 {
+ color: #788E9A !important; }
+
+.type-dark-7 {
+ color: #A2B1B9 !important; }
+
+.type-dark-8 {
+ color: #C5CED3 !important; }
+
+.type-dark-9 {
+ color: #DFE5E8 !important; }
+
+.type-dark-10 {
+ color: #EAEDEF !important; }
+
+.type-dark-11 {
+ color: #F5F6F7 !important; }
+
+.type-brand-1 {
+ color: #083330 !important; }
+
+.type-brand-2 {
+ color: #0B4D48 !important; }
+
+.type-brand-3 {
+ color: #025A53 !important; }
+
+.type-brand-4 {
+ color: #0F6660 !important; }
+
+.type-brand-5 {
+ color: #00776D !important; }
+
+.type-brand-6 {
+ color: #138078 !important; }
+
+.type-brand-7 {
+ color: #179990 !important; }
+
+.type-brand-8 {
+ color: #00A79D !important; }
+
+.type-brand-9 {
+ color: #1BB3A8 !important; }
+
+.type-brand-10 {
+ color: #1FCCC0 !important; }
+
+.type-brand-11 {
+ color: #D9FFFC !important; }
+
+.type-accent-1 {
+ color: #135680 !important; }
+
+.type-accent-2 {
+ color: #176799 !important; }
+
+.type-accent-3 {
+ color: #1B78B3 !important; }
+
+.type-accent-4 {
+ color: #1F8ACC !important; }
+
+.type-accent-5 {
+ color: #229BE6 !important; }
+
+.type-accent-6 {
+ color: #D9F0FF !important; }
+
+.type-error-1 {
+ color: #801319 !important; }
+
+.type-error-2 {
+ color: #99171D !important; }
+
+.type-error-3 {
+ color: #B31B22 !important; }
+
+.type-error-4 {
+ color: #CC1F27 !important; }
+
+.type-error-5 {
+ color: #F2242F !important; }
+
+.type-error-6 {
+ color: #FFD9DB !important; }
+
+.type-warn-1 {
+ color: #806613 !important; }
+
+.type-warn-2 {
+ color: #997B17 !important; }
+
+.type-warn-3 {
+ color: #B38F1B !important; }
+
+.type-warn-4 {
+ color: #CCA41F !important; }
+
+.type-warn-5 {
+ color: #E6B822 !important; }
+
+.type-warn-6 {
+ color: #FFF6D9 !important; }
+
+.type-success-1 {
+ color: #4D8013 !important; }
+
+.type-success-2 {
+ color: #5C9917 !important; }
+
+.type-success-3 {
+ color: #6CB31B !important; }
+
+.type-success-4 {
+ color: #7BCC1F !important; }
+
+.type-success-5 {
+ color: #8AE622 !important; }
+
+.type-success-6 {
+ color: #EDFFD9 !important; }
+
+.type-inverse {
+ color: #e0e4e5 !important; }
+
+a:hover.type-inverse {
+ color: #025A53 !important; }
+
+.error-color {
+ color: #CC1F27 !important; }
+
+/*doc
+---
+title: Multiline Headings
+name: type_mutliline
+parent: type
+---
+
+Headings are spaced so their line height and padding are consistent on one or many lines.
+
+```html_example_table
+One line heading
+
+I am a
+```
+
+*/
+/* ==========================================================================
+ 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------>
+
+
+
+
+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
+
+
+
+ This long text is used to expand the height of this
+ table so that we can demonstrate our verticle alignment classes
+ to the right.
+
+
+ .txt-t
+
+
+ .txt-m
+
+
+ .txt-b
+
+
+
+```
+
+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
+ ========================================================================== */
+/* Transition mixins */
+/* Button Mixins */
+/*doc
+---
+title: Introduction
+name: 00_form_introduction
+categories:
+ - Forms
+---
+
+
+
+
+npm install pui-css-forms --save
+
+
+
+
+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
+
+```
+
+*/
+/*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-block {
+ color: #686868; }
+
+.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;
+ color: #282828;
+ -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: #176799; }
+ .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
+
+
+npm install pui-react-autocomplete --save
+
+
+
+Require the subcomponent:
+
+```
+var Autocomplete = require('pui-react-autocomplete');
+```
+
+```jsx_example
+var AutocompleteExample = React.createClass({
+ onInitializeItems: function(callback) {
+ callback(['foo', 'food', 'bar']);
+ },
+ onPick: function(item) {
+ alert('You selected ' + item.value);
+ },
+ render: function() {
+ return (
+
+ );
+ }
+})
+
+```
+
+```react_example_table
+
+
+npm install pui-css-avatars --save
+
+
+
+Regular avatars are expected to by 100px by 100px.
+
+
+```html_example
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+npm install pui-css-links --save
+
+
+
+
+Add the class `link-text` on any text links.
+This will make the link underlined on hover (except lowlight links).
+
+```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
+inverse link | `link-text link-inverse` | I go on a non-white background
+
+```html_example
+Here's a less important link
+```
+
+*/
+a {
+ color: #1B78B3;
+ -webkit-transition: all 300ms ease-out;
+ transition: all 300ms ease-out; }
+ a:hover, a:focus {
+ cursor: pointer;
+ text-decoration: none;
+ color: #1f8ace; }
+ a:active, a.active {
+ color: #176698; }
+ a.link-text {
+ font-weight: 600; }
+
+.link-lowlight {
+ font-weight: 600;
+ color: #607580; }
+ .link-lowlight:hover, .link-lowlight:focus {
+ color: #6d8591; }
+ .link-lowlight:active, .link-lowlight.active {
+ color: #53656f; }
+
+.link-inverse {
+ color: #229BE6; }
+ .link-inverse:hover, .link-inverse:focus {
+ color: #3da7e9; }
+ .link-inverse:active, .link-inverse.active {
+ color: #188bd2; }
+
+/*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
+
+
+npm install pui-css-iconography --save
+
+
+
+
+We use [Font Awesome](http://fortawesome.github.io/Font-Awesome/icons/) 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
+-------------------------------------------------- | ---------------------- | -----------
+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.286; }
+
+.fa-h2 {
+ font-size: 25px !important;
+ line-height: 1.286; }
+
+.fa-h3 {
+ font-size: 20px !important;
+ line-height: 1.286; }
+
+.fa-h4 {
+ font-size: 18px !important;
+ line-height: 1.286; }
+
+.fa-h5 {
+ font-size: 16px !important;
+ line-height: 1.286; }
+
+.fa-h6 {
+ font-size: 13px !important;
+ line-height: 1.286; }
+
+.fa-title {
+ font-size: 42px !important; }
+
+.fa-sm {
+ font-size: 14px !important; }
+
+.fa-xs {
+ font-size: 12px !important; }
+
+.icon-control {
+ font-size: 22px; }
+
+/* ==========================================================================
+ Browser support
+ ========================================================================== */
+/* Typography
+ ========================================================================== */
+/* Grid
+ ========================================================================== */
+/* Code examples
+ ========================================================================== */
+/*doc
+---
+title: Back to Top
+name: back_to_top
+categories:
+ - Objects
+ - All
+---
+
+
+
+npm install pui-css-back-to-top --save
+
+
+
+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.
+
+```html_wrapped_example
+
+
+npm install pui-css-backgrounds --save
+
+
+
+
+Background color classes can be applied to any element. See [colors][color] for a list of background classes.
+
+*/
+/*doc
+---
+title: Overlays
+name: background_overlays
+parent: background
+---
+
+
+
+*/
+.bg-cloud {
+ background: #F8F8F8 asset-url('pui-css-backgrounds/gray-cloud.png') no-repeat 50% 50%; }
+
+.bg-glow {
+ background: -webkit-radial-gradient(ellipse at 50% bottom, #4b6475 0%, #243640 60%);
+ background: radial-gradient(ellipse at 50% bottom, #4b6475 0%, #243640 60%); }
+
+/*doc
+---
+title: Full Bleed
+name: background_full_bleed
+parent: background
+---
+
+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.
+
+```html_example
+
+
+
Full bleed background image
+
+
+
+
Full bleed background image
+
+
+
+npm install pui-css-buttons --save
+
+
+
+Button styles can be applied to any element. Typically you'll want to
+use either a `` 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: 600;
+ padding: 5px 15px; }
+ .btn.disabled, .btn[disabled], fieldset[disabled] .btn {
+ cursor: not-allowed;
+ pointer-events: none; }
+
+/*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).
+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: #1B78B3;
+ background-color: white;
+ border: 1px solid #d4d9d9;
+ outline: none;
+ -webkit-transition: all 300ms ease-out;
+ transition: all 300ms ease-out; }
+ .btn-default:hover, .btn-default:focus {
+ color: #1e87c9;
+ background-color: white;
+ outline: none; }
+ .btn-group .btn-default:active, .btn-group .btn-default.active {
+ color: #18699d;
+ background-color: #f0f0f0;
+ box-shadow: none;
+ outline: none; }
+ .open .btn-default.dropdown-toggle {
+ color: #18699d;
+ background-color: #f0f0f0;
+ box-shadow: none; }
+ .open .btn-default.dropdown-toggle:hover, .open .btn-default.dropdown-toggle:focus {
+ color: #18699d;
+ background-color: #f0f0f0; }
+ .btn-default:active, .btn-default.active {
+ color: #18699d;
+ background-color: #f0f0f0;
+ box-shadow: none;
+ outline: 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 {
+ opacity: 0.5; }
+
+.btn-default-alt {
+ color: #1B78B3;
+ background-color: white;
+ border: 1px solid #d4d9d9;
+ outline: none;
+ -webkit-transition: all 300ms ease-out;
+ transition: all 300ms ease-out;
+ box-shadow: 0 2px 0 rgba(211, 217, 217, 0.5); }
+ .btn-default-alt:hover, .btn-default-alt:focus {
+ color: #1e87c9;
+ background-color: white;
+ outline: none; }
+ .btn-group .btn-default-alt:active, .btn-group .btn-default-alt.active {
+ color: #18699d;
+ background-color: #f0f0f0;
+ box-shadow: none;
+ outline: none; }
+ .open .btn-default-alt.dropdown-toggle {
+ color: #18699d;
+ background-color: #f0f0f0;
+ box-shadow: none; }
+ .open .btn-default-alt.dropdown-toggle:hover, .open .btn-default-alt.dropdown-toggle:focus {
+ color: #18699d;
+ background-color: #f0f0f0; }
+ .btn-default-alt:active, .btn-default-alt.active {
+ color: #18699d;
+ background-color: #f0f0f0;
+ box-shadow: none;
+ outline: 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 {
+ opacity: 0.5; }
+ .btn-default-alt:hover, .btn-default-alt:focus, .btn-default-alt.disabled, .btn-default-alt[disabled], fieldset[disabled] .btn-default-alt {
+ box-shadow: 0 2px 0 rgba(211, 217, 217, 0.5); }
+ .btn-default-alt:focus {
+ box-shadow: 0 2px 0 rgba(211, 217, 217, 0.5); }
+ .btn-default-alt:active, .btn-default-alt.active {
+ box-shadow: none; }
+ .btn-default-alt:hover, .btn-default-alt:focus {
+ border-color: #b4b4b4; }
+
+.btn-link {
+ color: #1B78B3;
+ background-color: transparent;
+ outline: none;
+ -webkit-transition: all 300ms ease-out;
+ transition: all 300ms ease-out; }
+ .btn-link:hover, .btn-link:focus {
+ color: #1e87c9;
+ background-color: rgba(15, 15, 15, 0);
+ outline: none; }
+ .btn-group .btn-link:active, .btn-group .btn-link.active {
+ color: #18699d;
+ background-color: transparent;
+ box-shadow: none;
+ outline: none; }
+ .open .btn-link.dropdown-toggle {
+ color: #18699d;
+ background-color: transparent;
+ box-shadow: none; }
+ .open .btn-link.dropdown-toggle:hover, .open .btn-link.dropdown-toggle:focus {
+ color: #18699d;
+ background-color: transparent; }
+ .btn-link:active, .btn-link.active {
+ color: #18699d;
+ background-color: transparent;
+ box-shadow: none;
+ outline: none; }
+ .btn-link.disabled, .btn-link.disabled:hover, .btn-link.disabled:focus, .btn-link.disabled:active, .btn-link.disabled.active, .btn-link[disabled], .btn-link[disabled]:hover, .btn-link[disabled]:focus, .btn-link[disabled]:active, .btn-link[disabled].active, fieldset[disabled] .btn-link, fieldset[disabled] .btn-link:hover, fieldset[disabled] .btn-link:focus, fieldset[disabled] .btn-link:active, fieldset[disabled] .btn-link.active {
+ opacity: 0.5; }
+
+.btn-lowlight {
+ color: #607580;
+ background-color: #FFFFFF;
+ background-color: rgba(255, 255, 255, 0.6);
+ outline: none;
+ -webkit-transition: all 300ms ease-out;
+ transition: all 300ms ease-out; }
+ .btn-lowlight:hover, .btn-lowlight:focus {
+ color: #6b828f;
+ background-color: #FFFFFF;
+ background-color: rgba(255, 255, 255, 0.6);
+ outline: none; }
+ .btn-group .btn-lowlight:active, .btn-group .btn-lowlight.active {
+ color: #556871;
+ background-color: #F0F0F0;
+ background-color: rgba(240, 240, 240, 0.6);
+ box-shadow: none;
+ outline: none; }
+ .open .btn-lowlight.dropdown-toggle {
+ color: #556871;
+ background-color: #F0F0F0;
+ background-color: rgba(240, 240, 240, 0.6);
+ box-shadow: none; }
+ .open .btn-lowlight.dropdown-toggle:hover, .open .btn-lowlight.dropdown-toggle:focus {
+ color: #556871;
+ background-color: #F0F0F0;
+ background-color: rgba(240, 240, 240, 0.6); }
+ .btn-lowlight:active, .btn-lowlight.active {
+ color: #556871;
+ background-color: #F0F0F0;
+ background-color: rgba(240, 240, 240, 0.6);
+ box-shadow: none;
+ outline: 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 {
+ opacity: 0.5; }
+
+.btn-danger {
+ color: white;
+ background-color: #CC1F27;
+ outline: none;
+ -webkit-transition: all 300ms ease-out;
+ transition: all 300ms ease-out;
+ box-shadow: 0 2px 0 rgba(211, 217, 217, 0.5); }
+ .btn-danger:hover, .btn-danger:focus {
+ color: white;
+ background-color: #df2b33;
+ outline: none; }
+ .btn-group .btn-danger:active, .btn-group .btn-danger.active {
+ color: #f2f2f2;
+ background-color: #b11b22;
+ box-shadow: none;
+ outline: none; }
+ .open .btn-danger.dropdown-toggle {
+ color: #f2f2f2;
+ background-color: #b11b22;
+ box-shadow: none; }
+ .open .btn-danger.dropdown-toggle:hover, .open .btn-danger.dropdown-toggle:focus {
+ color: #f2f2f2;
+ background-color: #b11b22; }
+ .btn-danger:active, .btn-danger.active {
+ color: #f2f2f2;
+ background-color: #b11b22;
+ box-shadow: none;
+ outline: 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 {
+ color: #FFD9DB;
+ opacity: 0.5; }
+ .btn-danger:hover, .btn-danger:focus, .btn-danger.disabled, .btn-danger[disabled], fieldset[disabled] .btn-danger {
+ box-shadow: 0 2px 0 rgba(211, 217, 217, 0.5); }
+ .btn-danger:focus {
+ box-shadow: 0 2px 0 rgba(211, 217, 217, 0.5); }
+ .btn-danger:active, .btn-danger.active {
+ box-shadow: none; }
+
+.btn-highlight {
+ color: white;
+ background-color: #1B78B3;
+ outline: none;
+ -webkit-transition: all 300ms ease-out;
+ transition: all 300ms ease-out;
+ box-shadow: 0 2px 0 rgba(211, 217, 217, 0.5); }
+ .btn-highlight:hover, .btn-highlight:focus {
+ color: white;
+ background-color: #1f8ace;
+ outline: none; }
+ .btn-group .btn-highlight:active, .btn-group .btn-highlight.active {
+ color: #f2f2f2;
+ background-color: #176698;
+ box-shadow: none;
+ outline: none; }
+ .open .btn-highlight.dropdown-toggle {
+ color: #f2f2f2;
+ background-color: #176698;
+ box-shadow: none; }
+ .open .btn-highlight.dropdown-toggle:hover, .open .btn-highlight.dropdown-toggle:focus {
+ color: #f2f2f2;
+ background-color: #176698; }
+ .btn-highlight:active, .btn-highlight.active {
+ color: #f2f2f2;
+ background-color: #176698;
+ box-shadow: none;
+ outline: 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 {
+ color: #D9F0FF;
+ opacity: 0.5; }
+ .btn-highlight:hover, .btn-highlight:focus, .btn-highlight.disabled, .btn-highlight[disabled], fieldset[disabled] .btn-highlight {
+ box-shadow: 0 2px 0 rgba(211, 217, 217, 0.5); }
+ .btn-highlight:focus {
+ box-shadow: 0 2px 0 rgba(211, 217, 217, 0.5); }
+ .btn-highlight:active, .btn-highlight.active {
+ box-shadow: none; }
+
+.btn-highlight-alt {
+ color: white;
+ background-color: #138078;
+ outline: none;
+ -webkit-transition: all 300ms ease-out;
+ transition: all 300ms ease-out;
+ box-shadow: 0 2px 0 rgba(211, 217, 217, 0.5); }
+ .btn-highlight-alt:hover, .btn-highlight-alt:focus {
+ color: white;
+ background-color: #179b91;
+ outline: none; }
+ .btn-group .btn-highlight-alt:active, .btn-group .btn-highlight-alt.active {
+ color: #f2f2f2;
+ background-color: #0f655f;
+ box-shadow: none;
+ outline: none; }
+ .open .btn-highlight-alt.dropdown-toggle {
+ color: #f2f2f2;
+ background-color: #0f655f;
+ box-shadow: none; }
+ .open .btn-highlight-alt.dropdown-toggle:hover, .open .btn-highlight-alt.dropdown-toggle:focus {
+ color: #f2f2f2;
+ background-color: #0f655f; }
+ .btn-highlight-alt:active, .btn-highlight-alt.active {
+ color: #f2f2f2;
+ background-color: #0f655f;
+ box-shadow: none;
+ outline: 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 {
+ color: #D9FFFC;
+ opacity: 0.5; }
+ .btn-highlight-alt:hover, .btn-highlight-alt:focus, .btn-highlight-alt.disabled, .btn-highlight-alt[disabled], fieldset[disabled] .btn-highlight-alt {
+ box-shadow: 0 2px 0 rgba(211, 217, 217, 0.5); }
+ .btn-highlight-alt:focus {
+ box-shadow: 0 2px 0 rgba(211, 217, 217, 0.5); }
+ .btn-highlight-alt:active, .btn-highlight-alt.active {
+ box-shadow: none; }
+
+/*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; }
+
+/* ==========================================================================
+ Browser support
+ ========================================================================== */
+/* Typography
+ ========================================================================== */
+/* Grid
+ ========================================================================== */
+/* Code examples
+ ========================================================================== */
+/*doc
+---
+title: Button Group
+name: button-group
+categories:
+ - Elements
+ - All
+---
+
+
+
+npm install pui-css-button-group --save
+
+
+
+Button groups wrap a series of buttons.
+
+```html_example
+
+ Left
+ Middle
+ Right
+
+```
+*/
+.btn-group .btn.active, .btn-group .btn:active {
+ color: white;
+ background-color: #1B78B3; }
+
+/* ==========================================================================
+ 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
+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: #243641;
+ border-radius: 3px;
+ color: #B38F1B; }
+
+/*doc
+---
+title: Styled Code
+name: code_styled
+parent: code
+---
+
+
+
+ Special installation instructions
+
+
+ Our code is styled using PrismJS .
+ You will need some additional setup to get it to work:
+
+
+
+
+ Install pui-prismjs. This package provides the code parsing magic.
+
+
+
+
+
+
+
+ Include `pui-prismjs` in your main javascript file:
+
+
+ require("pui-prismjs");
+
+
+
+
+
+ Install a PrismJs theme. This makes the code look pretty.
+
+
+
+
+ The two light and dark Pivotal themes are:
+
+ prismjs-okaidia-themeprismjs-default-theme
+
+
+
class 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
+end
+
+ Special installation instructions
+
+
+ You will need to follow the PrismJS installation instructions in
+ the styled code section.
+
+
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
+
+
+npm install pui-css-colors --save
+
+
+
+
+
+Our color pallet is composed of several different colors. At any given point it 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.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+npm install pui-css-collapse --save
+
+
+
+
+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.
+
+
+*/
+/*doc
+---
+title: Basic
+name: accordion_basic
+parent: accordion
+---
+
+Use this to expand and collapse content.
+
+```html_example
+
+
+ Expand me
+
+
+ Collapse me
+
+
+
+ Look at this content.
+
+```
+
+*/
+/*doc
+---
+title: With Icons
+name: accordion_with_icons
+parent: accordion
+---
+
+Accordion with plus/minus icon:
+
+```html_example
+
+
+
+
+ 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.
+
+
+
+
+npm install pui-css-app-status --save
+
+
+
+
+```html_example
+
+
+
+
+
+ APP
+
+ App Name
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Instances
+
+
+
+ 1
+
+
+
+
+
+ 4
+
+
+
+
+ 6
+
+
+
+
+ 8
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ $ cf scale my_app -i 1
+
+
+
+
+ I'm viewing...
+
Edit
+
+
+
}
+
+ I'm viewing...
+
Edit
+
+
+
Won't show if browser doesn't support JS.
+```
+
+*/
+.no-js .invisible-no-js {
+ visibility: hidden; }
+
+/*doc
+---
+title: Dividers
+name: divider
+categories:
+ - Elements
+ - All
+---
+
+
+
+npm install pui-css-dividers --save
+
+
+
+
+Dividers draw horizontal lines between different content groupings.
+
+```html_example
+
+
+npm install pui-css-dropdowns --save
+
+
+
+
+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
+
+
+
+```
+
+
+
Alignment
+
+ By default, a dropdown menu is automatically positioned 100% from the top and along the left side of its parent.
+ Add .dropdown-menu-right to a .dropdown-menu to right align the dropdown menu
+
+
+
+ Button Dropdown
+
+
+
+```
+
+
+
No links as dropdowns
+
+ Instead of using an a tag as a dropdown,
+ use a button.btn.btn-link.
+
+
+
+ dropdown trigger
+
+
+
+```
+
+*/
+.dropdown {
+ display: inline-block; }
+
+.dropdown-menu {
+ box-shadow: 0 2px 0 rgba(211, 217, 217, 0.5);
+ background-color: white;
+ border: 1px solid #d4d9d9;
+ padding: 0 0; }
+ .dropdown-menu > li > a {
+ color: #607580;
+ font-weight: 600; }
+ .dropdown-menu > li > a:hover {
+ color: #607580;
+ background-color: #f0f0f0; }
+ .dropdown-menu.dropdown-border > li > a {
+ padding-top: 7px;
+ padding-bottom: 7px;
+ border-bottom: 1px solid #ecefef; }
+
+/*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
+
+```
+
+Here's an example modifiying the size and the color of the bell
+
+```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;
+ color: #c3c5c7; }
+
+.dropdown-notifications .caret {
+ display: none; }
+.dropdown-notifications.open .btn-link.dropdown-toggle {
+ color: #c3c5c7;
+ box-shadow: none; }
+.dropdown-notifications .btn-link:active, .dropdown-notifications .btn-link.active {
+ color: #c3c5c7;
+ background-color: transparent; }
+.dropdown-notifications .dropdown-toggle {
+ color: #c3c5c7;
+ font-size: 25px; }
+ .dropdown-notifications .dropdown-toggle .dropdown-notifications-title {
+ margin: 0;
+ position: relative; }
+ .dropdown-notifications .dropdown-toggle .dropdown-notifications-badge {
+ border-radius: 1000em;
+ background-color: #00A79D;
+ color: white;
+ text-align: center;
+ font-weight: 900;
+ padding: 0.25em;
+ line-height: 0.75em;
+ min-width: 1.25em; }
+ .dropdown-notifications .dropdown-toggle .dropdown-notifications-alert {
+ color: #B38F1B; }
+ .dropdown-notifications .dropdown-toggle .dropdown-notifications-alert, .dropdown-notifications .dropdown-toggle .dropdown-notifications-badge {
+ position: absolute;
+ font-size: 0.75em;
+ top: -0.2em;
+ left: 0.75em;
+ right: auto; }
+.dropdown-notifications .dropdown-menu > li > a {
+ padding-bottom: 10px; }
+.dropdown-notifications .dropdown-menu > li:last-child > a {
+ padding-bottom: 0; }
+
+/* Transition mixins */
+/* Button Mixins */
+/*doc
+---
+title: Ellipsis
+name: ellipsis
+categories:
+ - Utilities
+ - All
+---
+
+
+
+
+npm install pui-css-ellipsis --save
+
+
+
+
+The type `.type-ellipsis` adds ellipsis to text when there is too much. Combine it with `.col-md-*` classes to get the width you want.
+
+```html_example_table
+
+ 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.
+
+```
+
+*/
+.type-ellipsis {
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap; }
+
+/*doc
+---
+title: Embeds
+name: embed
+categories:
+ - Elements
+ - All
+---
+*/
+/*doc
+---
+title: Responsive
+name: embed_responsive
+parent: embed
+---
+
+
+
+
+npm install pui-css-embeds --save
+
+
+
+
+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 `
+
+
+
+
+
+```
+
+```html_example
+4-by-3
+
+```
+
+*/
+/* ==========================================================================
+ Browser support
+ ========================================================================== */
+/* Typography
+ ========================================================================== */
+/* Grid
+ ========================================================================== */
+/* Code examples
+ ========================================================================== */
+/*doc
+---
+title: Maps
+name: map
+categories:
+ - Objects
+ - All
+---
+
+
+
+
+npm install pui-css-google-maps --save
+
+
+
+
+Full width map with marker at Pivotal Labs SF location, and an optional informational overlay.
+
+```html_example
+
+
+```
+
+```js_example
+var maps = (function() {
+ var self = this;
+ var map;
+
+ var mapOptions = {
+ placeId: "ChIJ9w1pfYiAhYAR45k8AD-TjhA",
+ center: new google.maps.LatLng(37.781787,-122.403911),
+ mapElementClass: 'labs-map',
+ mapElementId: 'my-google-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);
+```
+*/
+.map-wrapper {
+ position: relative; }
+
+.pane-map {
+ height: 450px;
+ position: relative; }
+
+.map-overlay {
+ position: absolute;
+ top: 70px;
+ z-index: 99; }
+
+@media (max-width: 768px) {
+ .map-overlay {
+ top: 0;
+ position: relative; } }
+
+.labs-map {
+ height: 100%; }
+
+/* ==========================================================================
+ Browser support
+ ========================================================================== */
+/* Typography
+ ========================================================================== */
+/* Grid
+ ========================================================================== */
+/* Code examples
+ ========================================================================== */
+/*doc
+---
+title: Grids
+name: grid
+categories:
+ - Layout
+ - All
+---
+
+
+
+
+npm install pui-css-grids --save
+
+
+
+
+
+
+
+ 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.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+npm install pui-css-hoverable --save
+
+
+
+
+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
+---
+
+
+
+
+npm install pui-css-images --save
+
+
+
+
+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/).
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+npm install pui-css-labels --save
+
+
+
+
+Labels are based on Bootstrap's labels.
+Here's an example of a label on its own.
+
+```html_example_table
+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; }
+
+/* ==========================================================================
+ Browser support
+ ========================================================================== */
+/* Typography
+ ========================================================================== */
+/* Grid
+ ========================================================================== */
+/* Code examples
+ ========================================================================== */
+/*doc
+---
+title: Media
+name: media
+categories:
+ - Layout
+ - All
+---
+
+
+
+npm install pui-css-media --save
+
+
+
+
+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 {
+ margin-top: 15px; }
+ .media:first-child {
+ margin-top: 0; }
+
+.media-right, .media > .pull-right {
+ padding-left: 10px; }
+
+.media-left, .media > .pull-left {
+ padding-right: 10px; }
+
+.media-left, .media-right, .media-body {
+ display: table-cell;
+ vertical-align: top; }
+
+.media-middle {
+ vertical-align: middle; }
+
+.media-bottom {
+ vertical-align: bottom; }
+
+.media-heading {
+ margin-top: 0;
+ margin-bottom: 5px; }
+
+.media-list {
+ padding-left: 0;
+ list-style: none; }
+
+@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; }
+
+/* ==========================================================================
+ 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 rgba(0, 0, 0, 0.5);
+ background-clip: padding-box;
+ outline: 0; }
+
+.modal-backdrop {
+ position: fixed;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ z-index: 1040;
+ background-color: #243641; }
+ .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 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; }
+
+.modal-backdrop.in.modal-backdrop-fade-enter, .modal-backdrop.modal-backdrop-fade-enter.modal-fade-enter-active, .modal-backdrop.in.modal-backdrop-fade-leave, .modal-backdrop.modal-backdrop-fade-leave.modal-fade-enter-active {
+ -webkit-transition: opacity .15s linear;
+ transition: opacity .15s linear;
+ opacity: 0; }
+.modal-backdrop.in.modal-backdrop-fade-enter-active, .modal-backdrop.modal-backdrop-fade-enter-active.modal-fade-enter-active {
+ opacity: 0.8; }
+
+/*doc
+---
+title: Modals
+name: modal
+categories:
+ - Objects
+ - All
+---
+
+
+
+npm install pui-css-modals --save
+
+
+
+Modals bring desired content to the foreground and de-emphasize the rest of the page.
+
+```html_example
+
+
+ Launch modal
+
+
+
+
+
+
+
+
+ Here is some interesting text in the modal body.
+
+
+
+
+
+
+npm install pui-css-panels --save
+
+
+
+
+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.
+
+*/
+.panel {
+ box-shadow: none; }
+ .panel h1, .panel h2, .panel h3, .panel h4, .panel h5, .panel h6 {
+ margin: 0; }
+
+.panel-title {
+ font-size: inherit; }
+
+/*doc
+---
+title: Simple
+name: panel_simple
+parent: panel
+---
+
+```html_example
+
+```
+
+*/
+.panel-simple {
+ border: 1px solid #b4b4b4; }
+
+/*doc
+---
+title: Basic
+name: panel_basic
+parent: panel
+---
+
+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.
+
+```html_example
+
+
+
+```
+
+*/
+.panel-basic {
+ border-radius: 5px;
+ /* Firefox 3.6 */
+ /* Safari 4? Chrome 6? */
+ background-clip: padding-box;
+ /* Firefox 4, Safari 5, Opera 10, IE 9 */
+ border-bottom: 2px solid rgba(0, 0, 0, 0.07); }
+
+.panel-title-alt {
+ padding: 15px;
+ border-bottom: 3px solid rgba(0, 0, 0, 0.1);
+ font-weight: 600;
+ color: #243641; }
+
+/*doc
+---
+title: Basic Alternate
+name: panel_basic_alt
+parent: panel
+---
+
+Basic alternate panels are panels with a border and shadow. You can have a panel-basic-alt with or without a title.
+
+```html_example
+
+
+
+```
+
+*/
+.panel-basic-alt {
+ border: 1px solid #000000;
+ border: 1px solid rgba(0, 0, 0, 0.1);
+ border-radius: 5px;
+ /* Firefox 3.6 */
+ /* Safari 4? Chrome 6? */
+ background-clip: padding-box;
+ /* Firefox 4, Safari 5, Opera 10, IE 9 */
+ border-bottom: 2px solid rgba(0, 0, 0, 0.1);
+ background-color: white; }
+
+/*doc
+---
+title: Flex (Panel with Footer)
+name: panel_flex
+parent: panel
+---
+
+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.
+
+```html_example
+
+```
+
+
+
+ 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: panel
+---
+
+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 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: #1B78B3;
+ 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: #1B78B3; }
+ .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 rgba(0, 0, 0, 0.14); }
+
+/* ==========================================================================
+ Browser support
+ ========================================================================== */
+/* Typography
+ ========================================================================== */
+/* Grid
+ ========================================================================== */
+/* Code examples
+ ========================================================================== */
+/*doc
+---
+title: Panes
+name: pane
+categories:
+ - Layout
+ - All
+---
+
+
+
+npm install pui-css-panes --save
+
+
+
+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
+
+
+
+npm install pui-css-progress-bars --save
+
+
+
+
+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: #B31B22; }
+
+/*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
+ ========================================================================== */
+/*doc
+---
+title: Ribbons
+name: ribbon
+categories:
+ - Elements
+ - All
+---
+
+
+
+npm install pui-css-ribbons --save
+
+
+
+Ribbons should be used to call out access, status, environment, etc.
+
+```html_example_table
+British
+For British eyes only
+
+Pivotal
+Wow this ribbon is so 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; }
+ .ribbon:before, .ribbon:after {
+ content: "";
+ position: absolute;
+ display: block;
+ top: 0;
+ border-color: #b4b4b4;
+ border-width: 11px;
+ border-style: solid; }
+ .ribbon:before {
+ border-left-color: transparent;
+ left: -22px; }
+ .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: #99171D; }
+ .ribbon-banner:after {
+ content: "";
+ position: absolute;
+ display: block;
+ top: 0;
+ right: -32px;
+ border-style: solid;
+ border-width: 16px;
+ border-color: #99171D;
+ border-right-color: transparent; }
+
+/*doc
+---
+title: Spinners
+name: iconography_spinner
+parent: iconography
+---
+
+
+
+npm install pui-css-spinners --save
+
+
+
+
+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
+ ========================================================================== */
+/* Transition mixins */
+/* Button Mixins */
+/*doc
+---
+title: Tables
+name: table
+categories:
+ - Objects
+ - All
+---
+
+
+
+npm install pui-css-tables --save
+
+
+
+
+
+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 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; }
+
+.table-sortable th.sorted-desc {
+ color: #232B2F; }
+ .table-sortable th.sorted-desc:after {
+ content: "\f0d7";
+ color: #232B2F; }
+.table-sortable .sortable, .table-sortable [sortable] {
+ -webkit-touch-callout: none;
+ -webkit-user-select: none;
+ -khtml-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+ 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: #232B2F; }
+ .table-sortable th.sorted-asc:after {
+ content: "\f0d8";
+ color: #232B2F; }
+
+/*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.
+
+
+
+npm install pui-css-tabs --save
+
+
+
+
+You can activate a tab or pill navigation without writing any JavaScript by simply specifying `data-toggle="tab"` on an element.
+
+*/
+/*doc
+---
+title: Highlight
+name: tab_highlight
+parent: tab
+---
+
+```html_example
+
+
+
+
+
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
+
+
+
+npm install pui-css-tooltips --save
+
+
+
+
+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; }
+
+.overlay-trigger {
+ color: #1B78B3;
+ -webkit-transition: all 300ms ease-out;
+ transition: all 300ms ease-out; }
+ .overlay-trigger:hover, .overlay-trigger:focus {
+ cursor: pointer;
+ text-decoration: none;
+ color: #1f8ace; }
+ .overlay-trigger:active, .overlay-trigger.active {
+ color: #176698; }
+
+/* ==========================================================================
+ 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, button.list-group-item {
+ color: #555; }
+ a.list-group-item .list-group-item-heading, button.list-group-item .list-group-item-heading {
+ color: #333; }
+ a.list-group-item:hover, a.list-group-item:focus, button.list-group-item:hover, button.list-group-item:focus {
+ text-decoration: none;
+ color: #555;
+ background-color: #f5f5f5; }
+
+button.list-group-item {
+ width: 100%;
+ text-align: left; }
+
+.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, button.list-group-item-success {
+ color: #d4d9d9; }
+ a.list-group-item-success .list-group-item-heading, button.list-group-item-success .list-group-item-heading {
+ color: inherit; }
+ a.list-group-item-success:hover, a.list-group-item-success:focus, button.list-group-item-success:hover, button.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, button.list-group-item-success.active, button.list-group-item-success.active:hover, button.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, button.list-group-item-info {
+ color: #8e8837; }
+ a.list-group-item-info .list-group-item-heading, button.list-group-item-info .list-group-item-heading {
+ color: inherit; }
+ a.list-group-item-info:hover, a.list-group-item-info:focus, button.list-group-item-info:hover, button.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, button.list-group-item-info.active, button.list-group-item-info.active:hover, button.list-group-item-info.active:focus {
+ color: #fff;
+ background-color: #8e8837;
+ border-color: #8e8837; }
+
+.list-group-item-warning {
+ color: #806613;
+ background-color: #FFF6D9; }
+
+a.list-group-item-warning, button.list-group-item-warning {
+ color: #806613; }
+ a.list-group-item-warning .list-group-item-heading, button.list-group-item-warning .list-group-item-heading {
+ color: inherit; }
+ a.list-group-item-warning:hover, a.list-group-item-warning:focus, button.list-group-item-warning:hover, button.list-group-item-warning:focus {
+ color: #806613;
+ background-color: #fff0c0; }
+ a.list-group-item-warning.active, a.list-group-item-warning.active:hover, a.list-group-item-warning.active:focus, button.list-group-item-warning.active, button.list-group-item-warning.active:hover, button.list-group-item-warning.active:focus {
+ color: #fff;
+ background-color: #806613;
+ border-color: #806613; }
+
+.list-group-item-danger {
+ color: #CC1F27;
+ background-color: #FFD9DB; }
+
+a.list-group-item-danger, button.list-group-item-danger {
+ color: #CC1F27; }
+ a.list-group-item-danger .list-group-item-heading, button.list-group-item-danger .list-group-item-heading {
+ color: inherit; }
+ a.list-group-item-danger:hover, a.list-group-item-danger:focus, button.list-group-item-danger:hover, button.list-group-item-danger:focus {
+ color: #CC1F27;
+ background-color: #ffc0c3; }
+ a.list-group-item-danger.active, a.list-group-item-danger.active:hover, a.list-group-item-danger.active:focus, button.list-group-item-danger.active, button.list-group-item-danger.active:hover, button.list-group-item-danger.active:focus {
+ color: #fff;
+ background-color: #CC1F27;
+ border-color: #CC1F27; }
+
+.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
+---
+
+
+
+npm install pui-css-lists --save
+
+
+
+
+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.
+
+```html_example
+
+```
+
+Here's an example on a dark background (add `.list-inline-divider-light` to make the border white):
+
+```html_inverse_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
+
+
+```
+
+The "event list" from AppsManager can be built with a group list:
+
+```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; }
+
+.list-group, .list-group-inverse, .list-group > li, .list-group-inverse > li {
+ border-width: 1px 0; }
+
+.list-group-item {
+ padding-right: 5px; }
+
+.list-notitle li:first-child {
+ border-top: 0; }
+.list-notitle li:last-child {
+ border-bottom: 0; }
+
+/*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: #00A79D;
+ font-weight: 900; }
+ .list-steps > li.current:before {
+ color: #00A79D;
+ border-color: #00A79D; }
+
+/*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: #0B4D48; }
+
+/* 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.
+
+*/
+.list-stream-new-items-btn-wrapper {
+ overflow: hidden; }
+
+.list-stream-new-items-btn {
+ font-weight: 600;
+ background-color: #F8F8F8;
+ color: #3D4A51;
+ width: 100%;
+ height: 45px;
+ padding: 0;
+ border-radius: 0;
+ border-top: 1px solid #ddd;
+ box-shadow: 0px -1px rgba(0, 0, 0, 0.035); }
+ .list-stream-new-items-btn:hover {
+ background-color: #c5c5c5;
+ color: #3D4A51; }
+
+.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: Traffic Lights
+name: traffic-lights
+categories:
+ - Objects
+ - All
+---
+
+
+
+npm install pui-css-traffic-lights --save
+
+
+
+
+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.
+
+```html_example_table
+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: #CC1F27; }
+ .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; }
+
+/*doc
+---
+title: Vertical Align
+name: vertical_align
+categories:
+ - Layout
+ - All
+---
+
+
+
+npm install pui-css-vertical-alignment --save
+
+
+
+
+
+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
+---
+
+
+
+npm install pui-css-whitespace --save
+
+
+
+*/
+/*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-v2.0.0-alpha.5/pivotal-ui-react.js b/release/pui-v2.0.0-alpha.5/pivotal-ui-react.js
new file mode 100644
index 000000000..5e53331b5
--- /dev/null
+++ b/release/pui-v2.0.0-alpha.5/pivotal-ui-react.js
@@ -0,0 +1,75423 @@
+/******/ (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';
+
+ var _interopRequireDefault = __webpack_require__(1)['default'];
+
+ var _componentsJs = __webpack_require__(2);
+
+ var _componentsJs2 = _interopRequireDefault(_componentsJs);
+
+ global.$ = global.jQuery = __webpack_require__(319);
+ global._ = __webpack_require__(553);
+ __webpack_require__(555);
+
+ __webpack_require__(556);
+
+ __webpack_require__(575)();
+ __webpack_require__(576);
+
+ global.React = __webpack_require__(298);
+
+ _.each(_componentsJs2['default'], function (value, key) {
+ global[key] = value;
+ });
+ /* WEBPACK VAR INJECTION */}.call(exports, (function() { return this; }())))
+
+/***/ },
+/* 1 */
+/***/ function(module, exports) {
+
+ "use strict";
+
+ exports["default"] = function (obj) {
+ return obj && obj.__esModule ? obj : {
+ "default": obj
+ };
+ };
+
+ exports.__esModule = true;
+
+/***/ },
+/* 2 */
+/***/ function(module, exports, __webpack_require__) {
+
+ 'use strict';
+
+ var _extends = __webpack_require__(3)['default'];
+
+ var _interopRequireDefault = __webpack_require__(1)['default'];
+
+ var _puiReactSelectFancy = __webpack_require__(17);
+
+ var _puiReactSelectFancy2 = _interopRequireDefault(_puiReactSelectFancy);
+
+ var _puiReactAutocomplete = __webpack_require__(177);
+
+ var _puiReactAutocomplete2 = _interopRequireDefault(_puiReactAutocomplete);
+
+ module.exports = _extends({
+ DefaultH1: __webpack_require__(295).DefaultH1,
+ DefaultH2: __webpack_require__(295).DefaultH2,
+ DefaultH3: __webpack_require__(295).DefaultH3,
+ DefaultH4: __webpack_require__(295).DefaultH4,
+ DefaultH5: __webpack_require__(295).DefaultH5,
+ DefaultH6: __webpack_require__(295).DefaultH6,
+
+ AlternateH1: __webpack_require__(295).AlternateH1,
+ AlternateH2: __webpack_require__(295).AlternateH2,
+ AlternateH3: __webpack_require__(295).AlternateH3,
+ AlternateH4: __webpack_require__(295).AlternateH4,
+ AlternateH5: __webpack_require__(295).AlternateH5,
+ AlternateH6: __webpack_require__(295).AlternateH6,
+
+ MarketingH1: __webpack_require__(295).MarketingH1,
+ MarketingH2: __webpack_require__(295).MarketingH2,
+ MarketingH3: __webpack_require__(295).MarketingH3,
+ MarketingH4: __webpack_require__(295).MarketingH4,
+ MarketingH5: __webpack_require__(295).MarketingH5,
+ MarketingH6: __webpack_require__(295).MarketingH6,
+
+ Heading: __webpack_require__(295).Heading,
+
+ BasePane: __webpack_require__(296).BasePane,
+ Pane: __webpack_require__(296).Pane,
+
+ UIButton: __webpack_require__(297).UIButton,
+ DefaultButton: __webpack_require__(297).DefaultButton,
+ DefaultAltButton: __webpack_require__(297).DefaultAltButton,
+ LowlightButton: __webpack_require__(297).LowlightButton,
+ DangerButton: __webpack_require__(297).DangerButton,
+ HighlightButton: __webpack_require__(297).HighlightButton,
+ HighlightAltButton: __webpack_require__(297).HighlightAltButton,
+
+ SearchInput: __webpack_require__(315).SearchInput,
+
+ Divider: __webpack_require__(316).Divider,
+ InverseDivider: __webpack_require__(316).InverseDivider,
+
+ Row: __webpack_require__(317).Row,
+ Col: __webpack_require__(317).Col,
+
+ Media: __webpack_require__(329).Media,
+ Flag: __webpack_require__(329).Flag,
+
+ Radio: __webpack_require__(330).Radio,
+ RadioGroup: __webpack_require__(331).RadioGroup,
+
+ Panel: __webpack_require__(332).Panel,
+ SimplePanel: __webpack_require__(332).SimplePanel,
+ ClickablePanel: __webpack_require__(332).ClickablePanel,
+ ClickableAltPanel: __webpack_require__(332).ClickableAltPanel,
+ BasicPanel: __webpack_require__(332).BasicPanel,
+ BasicPanelAlt: __webpack_require__(332).BasicPanelAlt,
+ ShadowPanel: __webpack_require__(332).ShadowPanel,
+ HighlightPanel: __webpack_require__(332).HighlightPanel,
+
+ Image: __webpack_require__(333).Image,
+
+ Icon: __webpack_require__(334).Icon,
+
+ Modal: __webpack_require__(344).Modal,
+ ModalBody: __webpack_require__(344).ModalBody,
+ ModalFooter: __webpack_require__(344).ModalFooter,
+
+ Ribbon: __webpack_require__(346).Ribbon,
+ PrimaryRibbon: __webpack_require__(346).PrimaryRibbon,
+ Banner: __webpack_require__(346).Banner,
+
+ Tab: __webpack_require__(347).Tab,
+ SimpleTabs: __webpack_require__(347).SimpleTabs,
+ SimpleAltTabs: __webpack_require__(347).SimpleAltTabs,
+ LeftTabs: __webpack_require__(347).LeftTabs,
+
+ UnorderedList: __webpack_require__(387).UnorderedList,
+ OrderedList: __webpack_require__(387).OrderedList,
+ InlineList: __webpack_require__(387).InlineList,
+ GroupList: __webpack_require__(387).GroupList,
+ GroupListInverse: __webpack_require__(387).GroupListInverse,
+ StepList: __webpack_require__(387).StepList,
+ BreadcrumbList: __webpack_require__(387).BreadcrumbList,
+ ListItem: __webpack_require__(387).ListItem,
+ DraggableList: __webpack_require__(388).DraggableList,
+ DraggableListItem: __webpack_require__(388).DraggableListItem,
+
+ Dropdown: __webpack_require__(393).Dropdown,
+ DropdownItem: __webpack_require__(393).DropdownItem,
+ LinkDropdown: __webpack_require__(393).LinkDropdown,
+ DefaultAltDropdown: __webpack_require__(393).DefaultAltDropdown,
+ DangerDropdown: __webpack_require__(393).DangerDropdown,
+ HighlightAltDropdown: __webpack_require__(393).HighlightAltDropdown,
+ HighlightDropdown: __webpack_require__(393).HighlightDropdown,
+ LowlightDropdown: __webpack_require__(393).LowlightDropdown,
+
+ Notifications: __webpack_require__(479).Notifications,
+ AlertNotifications: __webpack_require__(479).AlertNotifications,
+ NotificationItem: __webpack_require__(479).NotificationItem,
+
+ Label: __webpack_require__(480).Label,
+ BaseCollapse: __webpack_require__(481).BaseCollapse,
+ Collapse: __webpack_require__(481).Collapse,
+ AltCollapse: __webpack_require__(481).AltCollapse,
+
+ ExpanderContent: __webpack_require__(482).ExpanderContent,
+ ExpanderTrigger: __webpack_require__(482).ExpanderTrigger,
+
+ SuccessAlert: __webpack_require__(483).SuccessAlert,
+ InfoAlert: __webpack_require__(483).InfoAlert,
+ WarningAlert: __webpack_require__(483).WarningAlert,
+ ErrorAlert: __webpack_require__(483).ErrorAlert,
+
+ OverlayTrigger: __webpack_require__(485).OverlayTrigger,
+ Tooltip: __webpack_require__(499).Tooltip,
+
+ BackToTop: __webpack_require__(501).BackToTop,
+
+ PortalSource: __webpack_require__(521).PortalSource,
+ PortalDestination: __webpack_require__(521).PortalDestination,
+ StreamList: __webpack_require__(523).StreamList,
+ StreamListItem: __webpack_require__(523).StreamListItem,
+ SortableTable: __webpack_require__(524).SortableTable,
+ TableHeader: __webpack_require__(524).TableHeader,
+ TableCell: __webpack_require__(524).TableCell,
+ TableRow: __webpack_require__(524).TableRow
+ }, _puiReactAutocomplete2['default'], _puiReactSelectFancy2['default']);
+
+/***/ },
+/* 3 */
+/***/ function(module, exports, __webpack_require__) {
+
+ "use strict";
+
+ var _Object$assign = __webpack_require__(4)["default"];
+
+ exports["default"] = _Object$assign || function (target) {
+ for (var i = 1; i < arguments.length; i++) {
+ var source = arguments[i];
+
+ for (var key in source) {
+ if (Object.prototype.hasOwnProperty.call(source, key)) {
+ target[key] = source[key];
+ }
+ }
+ }
+
+ return target;
+ };
+
+ exports.__esModule = true;
+
+/***/ },
+/* 4 */
+/***/ function(module, exports, __webpack_require__) {
+
+ module.exports = { "default": __webpack_require__(5), __esModule: true };
+
+/***/ },
+/* 5 */
+/***/ function(module, exports, __webpack_require__) {
+
+ __webpack_require__(6);
+ module.exports = __webpack_require__(9).Object.assign;
+
+/***/ },
+/* 6 */
+/***/ function(module, exports, __webpack_require__) {
+
+ // 19.1.3.1 Object.assign(target, source)
+ var $def = __webpack_require__(7);
+ $def($def.S, 'Object', {assign: __webpack_require__(10)});
+
+/***/ },
+/* 7 */
+/***/ function(module, exports, __webpack_require__) {
+
+ var global = __webpack_require__(8)
+ , core = __webpack_require__(9)
+ , PROTOTYPE = 'prototype';
+ var ctx = function(fn, that){
+ return function(){
+ return fn.apply(that, arguments);
+ };
+ };
+ var $def = function(type, name, source){
+ var key, own, out, exp
+ , isGlobal = type & $def.G
+ , isProto = type & $def.P
+ , target = isGlobal ? global : type & $def.S
+ ? global[name] : (global[name] || {})[PROTOTYPE]
+ , exports = isGlobal ? core : core[name] || (core[name] = {});
+ if(isGlobal)source = name;
+ for(key in source){
+ // contains in native
+ own = !(type & $def.F) && target && key in target;
+ if(own && key in exports)continue;
+ // export native or passed
+ out = own ? target[key] : source[key];
+ // prevent global pollution for namespaces
+ if(isGlobal && typeof target[key] != 'function')exp = source[key];
+ // bind timers to global for call from export context
+ else if(type & $def.B && own)exp = ctx(out, global);
+ // wrap global constructors for prevent change them in library
+ else if(type & $def.W && target[key] == out)!function(C){
+ exp = function(param){
+ return this instanceof C ? new C(param) : C(param);
+ };
+ exp[PROTOTYPE] = C[PROTOTYPE];
+ }(out);
+ else exp = isProto && typeof out == 'function' ? ctx(Function.call, out) : out;
+ // export
+ exports[key] = exp;
+ if(isProto)(exports[PROTOTYPE] || (exports[PROTOTYPE] = {}))[key] = out;
+ }
+ };
+ // type bitmap
+ $def.F = 1; // forced
+ $def.G = 2; // global
+ $def.S = 4; // static
+ $def.P = 8; // proto
+ $def.B = 16; // bind
+ $def.W = 32; // wrap
+ module.exports = $def;
+
+/***/ },
+/* 8 */
+/***/ function(module, exports) {
+
+ // https://github.com/zloirock/core-js/issues/86#issuecomment-115759028
+ var UNDEFINED = 'undefined';
+ var global = module.exports = typeof window != UNDEFINED && window.Math == Math
+ ? window : typeof self != UNDEFINED && self.Math == Math ? self : Function('return this')();
+ if(typeof __g == 'number')__g = global; // eslint-disable-line no-undef
+
+/***/ },
+/* 9 */
+/***/ function(module, exports) {
+
+ var core = module.exports = {};
+ if(typeof __e == 'number')__e = core; // eslint-disable-line no-undef
+
+/***/ },
+/* 10 */
+/***/ function(module, exports, __webpack_require__) {
+
+ // 19.1.2.1 Object.assign(target, source, ...)
+ var toObject = __webpack_require__(11)
+ , IObject = __webpack_require__(13)
+ , enumKeys = __webpack_require__(15);
+ /* eslint-disable no-unused-vars */
+ module.exports = Object.assign || function assign(target, source){
+ /* eslint-enable no-unused-vars */
+ var T = toObject(target)
+ , l = arguments.length
+ , i = 1;
+ while(l > i){
+ var S = IObject(arguments[i++])
+ , keys = enumKeys(S)
+ , length = keys.length
+ , j = 0
+ , key;
+ while(length > j)T[key = keys[j++]] = S[key];
+ }
+ return T;
+ };
+
+/***/ },
+/* 11 */
+/***/ function(module, exports, __webpack_require__) {
+
+ // 7.1.13 ToObject(argument)
+ var defined = __webpack_require__(12);
+ module.exports = function(it){
+ return Object(defined(it));
+ };
+
+/***/ },
+/* 12 */
+/***/ function(module, exports) {
+
+ // 7.2.1 RequireObjectCoercible(argument)
+ module.exports = function(it){
+ if(it == undefined)throw TypeError("Can't call method on " + it);
+ return it;
+ };
+
+/***/ },
+/* 13 */
+/***/ function(module, exports, __webpack_require__) {
+
+ // indexed object, fallback for non-array-like ES3 strings
+ var cof = __webpack_require__(14);
+ module.exports = 0 in Object('z') ? Object : function(it){
+ return cof(it) == 'String' ? it.split('') : Object(it);
+ };
+
+/***/ },
+/* 14 */
+/***/ function(module, exports) {
+
+ var toString = {}.toString;
+
+ module.exports = function(it){
+ return toString.call(it).slice(8, -1);
+ };
+
+/***/ },
+/* 15 */
+/***/ function(module, exports, __webpack_require__) {
+
+ // all enumerable object keys, includes symbols
+ var $ = __webpack_require__(16);
+ module.exports = function(it){
+ var keys = $.getKeys(it)
+ , getSymbols = $.getSymbols;
+ if(getSymbols){
+ var symbols = getSymbols(it)
+ , isEnum = $.isEnum
+ , i = 0
+ , key;
+ while(symbols.length > i)if(isEnum.call(it, key = symbols[i++]))keys.push(key);
+ }
+ return keys;
+ };
+
+/***/ },
+/* 16 */
+/***/ function(module, exports) {
+
+ var $Object = Object;
+ module.exports = {
+ create: $Object.create,
+ getProto: $Object.getPrototypeOf,
+ isEnum: {}.propertyIsEnumerable,
+ getDesc: $Object.getOwnPropertyDescriptor,
+ setDesc: $Object.defineProperty,
+ setDescs: $Object.defineProperties,
+ getKeys: $Object.keys,
+ getNames: $Object.getOwnPropertyNames,
+ getSymbols: $Object.getOwnPropertySymbols,
+ each: [].forEach
+ };
+
+/***/ },
+/* 17 */
+/***/ function(module, exports, __webpack_require__) {
+
+ 'use strict';
+
+ var _objectWithoutProperties = __webpack_require__(18)['default'];
+
+ var _extends = __webpack_require__(3)['default'];
+
+ var _interopRequireDefault = __webpack_require__(1)['default'];
+
+ var _classnames = __webpack_require__(19);
+
+ var _classnames2 = _interopRequireDefault(_classnames);
+
+ var _puiReactHelpers = __webpack_require__(20);
+
+ var _react = __webpack_require__(21);
+
+ var _react2 = _interopRequireDefault(_react);
+
+ /**
+ * @component SelectFancy
+ * @description A select with a fancy style
+ *
+ * @property disabled {Boolean} Whether to disable the select.
+ *
+ * @example ```js
+ * var SelectFancy = require('pui-react-select-fancy').SelectFancy;
+ * var MyComponent = React.createClass({
+ * render() {
+ * return (
+ *
+ * Fancy Option 1
+ * Fancy Option 2
+ *
+ * }
+ * });
+ * ```
+ *
+ * @see [Pivotal UI React](http://styleguide.pivotal.io/react.html#form_select_fancy)
+ * @see [Pivotal UI CSS](http://styleguide.pivotal.io/forms.html#02_form_fancy_select)
+ */
+
+ var types = _react2['default'].PropTypes;
+
+ var SelectFancy = _react2['default'].createClass({
+ displayName: 'SelectFancy',
+
+ propTypes: {
+ disabled: types.bool
+ },
+
+ render: function render() {
+ var disabled = this.props.disabled;
+
+ var _mergeProps = _puiReactHelpers.mergeProps(this.props, { className: _classnames2['default']('select-fancy', { disabled: disabled }) });
+
+ var className = _mergeProps.className;
+ var style = _mergeProps.style;
+
+ var props = _objectWithoutProperties(_mergeProps, ['className', 'style']);
+
+ return _react2['default'].createElement(
+ 'div',
+ { className: className, style: style },
+ _react2['default'].createElement('select', _extends({}, props, { className: 'form-control' }))
+ );
+ }
+ });
+
+ module.exports = { SelectFancy: SelectFancy };
+
+/***/ },
+/* 18 */
+/***/ function(module, exports) {
+
+ "use strict";
+
+ exports["default"] = function (obj, keys) {
+ var target = {};
+
+ for (var i in obj) {
+ if (keys.indexOf(i) >= 0) continue;
+ if (!Object.prototype.hasOwnProperty.call(obj, i)) continue;
+ target[i] = obj[i];
+ }
+
+ return target;
+ };
+
+ exports.__esModule = true;
+
+/***/ },
+/* 19 */
+/***/ function(module, exports, __webpack_require__) {
+
+ var __WEBPACK_AMD_DEFINE_RESULT__;/*!
+ Copyright (c) 2015 Jed Watson.
+ Licensed under the MIT License (MIT), see
+ http://jedwatson.github.io/classnames
+ */
+
+ (function () {
+ 'use strict';
+
+ function classNames () {
+
+ var classes = '';
+
+ for (var i = 0; i < arguments.length; i++) {
+ var arg = arguments[i];
+ if (!arg) continue;
+
+ var argType = typeof arg;
+
+ if ('string' === argType || 'number' === argType) {
+ classes += ' ' + arg;
+
+ } else if (Array.isArray(arg)) {
+ classes += ' ' + classNames.apply(null, arg);
+
+ } else if ('object' === argType) {
+ for (var key in arg) {
+ if (arg.hasOwnProperty(key) && arg[key]) {
+ classes += ' ' + key;
+ }
+ }
+ }
+ }
+
+ return classes.substr(1);
+ }
+
+ if (typeof module !== 'undefined' && module.exports) {
+ module.exports = classNames;
+ } else if (true){
+ // AMD. Register as an anonymous module.
+ !(__WEBPACK_AMD_DEFINE_RESULT__ = function () {
+ return classNames;
+ }.call(exports, __webpack_require__, exports, module), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__));
+ } else {
+ window.classNames = classNames;
+ }
+
+ }());
+
+
+/***/ },
+/* 20 */
+/***/ function(module, exports, __webpack_require__) {
+
+ 'use strict';
+
+ var _extends = __webpack_require__(3)['default'];
+
+ var _objectWithoutProperties = __webpack_require__(18)['default'];
+
+ var _interopRequireDefault = __webpack_require__(1)['default'];
+
+ exports.__esModule = true;
+ exports.mergeProps = mergeProps;
+
+ var _classnames = __webpack_require__(19);
+
+ var _classnames2 = _interopRequireDefault(_classnames);
+
+ /**
+ * @component mergeProps
+ * @description A helper function that merges default props and provided props
+ *
+ * @param reactInstanceProps properties passed into the component. Typically
+ * `this.props`
+ *
+ * @param defaultProps default values for the react component
+ *
+ * @return a merged hash of props, giving precedence to the `reactInstanceProps`.
+ * If `className` is defined by both sets of props, the resultant `className`
+ * will be a combination of the two.
+ * If `style` is defined by both, the resultant `style` hash will be a merge of
+ * the two style hashes, with precedence given to `reactInstanceProps`'s style.
+ *
+ * @example ```js
+ * var {mergeProps} = require('pui-react-helpers');
+ *
+ * var Ribbon = React.createClass({
+ * render() {
+ * var {children, ...others} = this.props;
+ * var props = mergeProps(others, {className: 'ribbon', style: {height: '50px', color: 'blue'}, id: 'default-ribbon-id'});
+ * return {children}
;
+ * }
+ * });
+ *
+ * React.render({children}
;
+ * }
+ *
+ * @param {object} newContext New context to merge into the existing context
+ * @param {function} scopedCallback Callback to run with the new context
+ * @return {ReactComponent|array}
+ */
+ withContext: function(newContext, scopedCallback) {
+ if ("production" !== process.env.NODE_ENV) {
+ ("production" !== process.env.NODE_ENV ? warning(
+ didWarn,
+ 'withContext is deprecated and will be removed in a future version. ' +
+ 'Use a wrapper component with getChildContext instead.'
+ ) : null);
+
+ didWarn = true;
+ }
+
+ var result;
+ var previousContext = ReactContext.current;
+ ReactContext.current = assign({}, previousContext, newContext);
+ try {
+ result = scopedCallback();
+ } finally {
+ ReactContext.current = previousContext;
+ }
+ return result;
+ }
+
+ };
+
+ module.exports = ReactContext;
+
+ /* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(23)))
+
+/***/ },
+/* 33 */
+/***/ function(module, exports) {
+
+ /**
+ * Copyright 2014-2015, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ *
+ * @providesModule Object.assign
+ */
+
+ // https://people.mozilla.org/~jorendorff/es6-draft.html#sec-object.assign
+
+ 'use strict';
+
+ function assign(target, sources) {
+ if (target == null) {
+ throw new TypeError('Object.assign target cannot be null or undefined');
+ }
+
+ var to = Object(target);
+ var hasOwnProperty = Object.prototype.hasOwnProperty;
+
+ for (var nextIndex = 1; nextIndex < arguments.length; nextIndex++) {
+ var nextSource = arguments[nextIndex];
+ if (nextSource == null) {
+ continue;
+ }
+
+ var from = Object(nextSource);
+
+ // We don't currently support accessors nor proxies. Therefore this
+ // copy cannot throw. If we ever supported this then we must handle
+ // exceptions and side-effects. We don't support symbols so they won't
+ // be transferred.
+
+ for (var key in from) {
+ if (hasOwnProperty.call(from, key)) {
+ to[key] = from[key];
+ }
+ }
+ }
+
+ return to;
+ }
+
+ module.exports = assign;
+
+
+/***/ },
+/* 34 */
+/***/ function(module, exports, __webpack_require__) {
+
+ /* WEBPACK VAR INJECTION */(function(process) {/**
+ * Copyright 2013-2015, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ *
+ * @providesModule emptyObject
+ */
+
+ "use strict";
+
+ var emptyObject = {};
+
+ if ("production" !== process.env.NODE_ENV) {
+ Object.freeze(emptyObject);
+ }
+
+ module.exports = emptyObject;
+
+ /* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(23)))
+
+/***/ },
+/* 35 */
+/***/ function(module, exports, __webpack_require__) {
+
+ /* WEBPACK VAR INJECTION */(function(process) {/**
+ * Copyright 2014-2015, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ *
+ * @providesModule warning
+ */
+
+ "use strict";
+
+ var emptyFunction = __webpack_require__(36);
+
+ /**
+ * Similar to invariant but only logs a warning if the condition is not met.
+ * This can be used to log issues in development environments in critical
+ * paths. Removing the logging code for production environments will keep the
+ * same logic and follow the same code paths.
+ */
+
+ var warning = emptyFunction;
+
+ if ("production" !== process.env.NODE_ENV) {
+ warning = function(condition, format ) {for (var args=[],$__0=2,$__1=arguments.length;$__0<$__1;$__0++) args.push(arguments[$__0]);
+ if (format === undefined) {
+ throw new Error(
+ '`warning(condition, format, ...args)` requires a warning ' +
+ 'message argument'
+ );
+ }
+
+ if (format.length < 10 || /^[s\W]*$/.test(format)) {
+ throw new Error(
+ 'The warning format should be able to uniquely identify this ' +
+ 'warning. Please, use a more descriptive format than: ' + format
+ );
+ }
+
+ if (format.indexOf('Failed Composite propType: ') === 0) {
+ return; // Ignore CompositeComponent proptype check.
+ }
+
+ if (!condition) {
+ var argIndex = 0;
+ var message = 'Warning: ' + format.replace(/%s/g, function() {return args[argIndex++];});
+ console.warn(message);
+ try {
+ // --- Welcome to debugging React ---
+ // This error was thrown as a convenience so that you can use this stack
+ // to find the callsite that caused this warning to fire.
+ throw new Error(message);
+ } catch(x) {}
+ }
+ };
+ }
+
+ module.exports = warning;
+
+ /* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(23)))
+
+/***/ },
+/* 36 */
+/***/ function(module, exports) {
+
+ /**
+ * Copyright 2013-2015, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ *
+ * @providesModule emptyFunction
+ */
+
+ function makeEmptyFunction(arg) {
+ return function() {
+ return arg;
+ };
+ }
+
+ /**
+ * This function accepts and discards inputs; it has no side effects. This is
+ * primarily useful idiomatically for overridable function endpoints which
+ * always need to be callable, since JS lacks a null-call idiom ala Cocoa.
+ */
+ function emptyFunction() {}
+
+ emptyFunction.thatReturns = makeEmptyFunction;
+ emptyFunction.thatReturnsFalse = makeEmptyFunction(false);
+ emptyFunction.thatReturnsTrue = makeEmptyFunction(true);
+ emptyFunction.thatReturnsNull = makeEmptyFunction(null);
+ emptyFunction.thatReturnsThis = function() { return this; };
+ emptyFunction.thatReturnsArgument = function(arg) { return arg; };
+
+ module.exports = emptyFunction;
+
+
+/***/ },
+/* 37 */
+/***/ function(module, exports) {
+
+ /**
+ * Copyright 2013-2015, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ *
+ * @providesModule ReactCurrentOwner
+ */
+
+ 'use strict';
+
+ /**
+ * Keeps track of the current owner.
+ *
+ * The current owner is the component who should own any components that are
+ * currently being constructed.
+ *
+ * The depth indicate how many composite components are above this render level.
+ */
+ var ReactCurrentOwner = {
+
+ /**
+ * @internal
+ * @type {ReactComponent}
+ */
+ current: null
+
+ };
+
+ module.exports = ReactCurrentOwner;
+
+
+/***/ },
+/* 38 */
+/***/ function(module, exports, __webpack_require__) {
+
+ /* WEBPACK VAR INJECTION */(function(process) {/**
+ * Copyright 2013-2015, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ *
+ * @providesModule traverseAllChildren
+ */
+
+ 'use strict';
+
+ var ReactElement = __webpack_require__(31);
+ var ReactFragment = __webpack_require__(30);
+ var ReactInstanceHandles = __webpack_require__(39);
+
+ var getIteratorFn = __webpack_require__(41);
+ var invariant = __webpack_require__(27);
+ var warning = __webpack_require__(35);
+
+ var SEPARATOR = ReactInstanceHandles.SEPARATOR;
+ var SUBSEPARATOR = ':';
+
+ /**
+ * TODO: Test that a single child and an array with one item have the same key
+ * pattern.
+ */
+
+ var userProvidedKeyEscaperLookup = {
+ '=': '=0',
+ '.': '=1',
+ ':': '=2'
+ };
+
+ var userProvidedKeyEscapeRegex = /[=.:]/g;
+
+ var didWarnAboutMaps = false;
+
+ function userProvidedKeyEscaper(match) {
+ return userProvidedKeyEscaperLookup[match];
+ }
+
+ /**
+ * Generate a key string that identifies a component within a set.
+ *
+ * @param {*} component A component that could contain a manual key.
+ * @param {number} index Index that is used if a manual key is not provided.
+ * @return {string}
+ */
+ function getComponentKey(component, index) {
+ if (component && component.key != null) {
+ // Explicit key
+ return wrapUserProvidedKey(component.key);
+ }
+ // Implicit key determined by the index in the set
+ return index.toString(36);
+ }
+
+ /**
+ * Escape a component key so that it is safe to use in a reactid.
+ *
+ * @param {*} key Component key to be escaped.
+ * @return {string} An escaped string.
+ */
+ function escapeUserProvidedKey(text) {
+ return ('' + text).replace(
+ userProvidedKeyEscapeRegex,
+ userProvidedKeyEscaper
+ );
+ }
+
+ /**
+ * Wrap a `key` value explicitly provided by the user to distinguish it from
+ * implicitly-generated keys generated by a component's index in its parent.
+ *
+ * @param {string} key Value of a user-provided `key` attribute
+ * @return {string}
+ */
+ function wrapUserProvidedKey(key) {
+ return '$' + escapeUserProvidedKey(key);
+ }
+
+ /**
+ * @param {?*} children Children tree container.
+ * @param {!string} nameSoFar Name of the key path so far.
+ * @param {!number} indexSoFar Number of children encountered until this point.
+ * @param {!function} callback Callback to invoke with each child found.
+ * @param {?*} traverseContext Used to pass information throughout the traversal
+ * process.
+ * @return {!number} The number of children in this subtree.
+ */
+ function traverseAllChildrenImpl(
+ children,
+ nameSoFar,
+ indexSoFar,
+ callback,
+ traverseContext
+ ) {
+ var type = typeof children;
+
+ if (type === 'undefined' || type === 'boolean') {
+ // All of the above are perceived as null.
+ children = null;
+ }
+
+ if (children === null ||
+ type === 'string' ||
+ type === 'number' ||
+ ReactElement.isValidElement(children)) {
+ callback(
+ traverseContext,
+ children,
+ // If it's the only child, treat the name as if it was wrapped in an array
+ // so that it's consistent if the number of children grows.
+ nameSoFar === '' ? SEPARATOR + getComponentKey(children, 0) : nameSoFar,
+ indexSoFar
+ );
+ return 1;
+ }
+
+ var child, nextName, nextIndex;
+ var subtreeCount = 0; // Count of children found in the current subtree.
+
+ if (Array.isArray(children)) {
+ for (var i = 0; i < children.length; i++) {
+ child = children[i];
+ nextName = (
+ (nameSoFar !== '' ? nameSoFar + SUBSEPARATOR : SEPARATOR) +
+ getComponentKey(child, i)
+ );
+ nextIndex = indexSoFar + subtreeCount;
+ subtreeCount += traverseAllChildrenImpl(
+ child,
+ nextName,
+ nextIndex,
+ callback,
+ traverseContext
+ );
+ }
+ } else {
+ var iteratorFn = getIteratorFn(children);
+ if (iteratorFn) {
+ var iterator = iteratorFn.call(children);
+ var step;
+ if (iteratorFn !== children.entries) {
+ var ii = 0;
+ while (!(step = iterator.next()).done) {
+ child = step.value;
+ nextName = (
+ (nameSoFar !== '' ? nameSoFar + SUBSEPARATOR : SEPARATOR) +
+ getComponentKey(child, ii++)
+ );
+ nextIndex = indexSoFar + subtreeCount;
+ subtreeCount += traverseAllChildrenImpl(
+ child,
+ nextName,
+ nextIndex,
+ callback,
+ traverseContext
+ );
+ }
+ } else {
+ if ("production" !== process.env.NODE_ENV) {
+ ("production" !== process.env.NODE_ENV ? warning(
+ didWarnAboutMaps,
+ 'Using Maps as children is not yet fully supported. It is an ' +
+ 'experimental feature that might be removed. Convert it to a ' +
+ 'sequence / iterable of keyed ReactElements instead.'
+ ) : null);
+ didWarnAboutMaps = true;
+ }
+ // Iterator will provide entry [k,v] tuples rather than values.
+ while (!(step = iterator.next()).done) {
+ var entry = step.value;
+ if (entry) {
+ child = entry[1];
+ nextName = (
+ (nameSoFar !== '' ? nameSoFar + SUBSEPARATOR : SEPARATOR) +
+ wrapUserProvidedKey(entry[0]) + SUBSEPARATOR +
+ getComponentKey(child, 0)
+ );
+ nextIndex = indexSoFar + subtreeCount;
+ subtreeCount += traverseAllChildrenImpl(
+ child,
+ nextName,
+ nextIndex,
+ callback,
+ traverseContext
+ );
+ }
+ }
+ }
+ } else if (type === 'object') {
+ ("production" !== process.env.NODE_ENV ? invariant(
+ children.nodeType !== 1,
+ 'traverseAllChildren(...): Encountered an invalid child; DOM ' +
+ 'elements are not valid children of React components.'
+ ) : invariant(children.nodeType !== 1));
+ var fragment = ReactFragment.extract(children);
+ for (var key in fragment) {
+ if (fragment.hasOwnProperty(key)) {
+ child = fragment[key];
+ nextName = (
+ (nameSoFar !== '' ? nameSoFar + SUBSEPARATOR : SEPARATOR) +
+ wrapUserProvidedKey(key) + SUBSEPARATOR +
+ getComponentKey(child, 0)
+ );
+ nextIndex = indexSoFar + subtreeCount;
+ subtreeCount += traverseAllChildrenImpl(
+ child,
+ nextName,
+ nextIndex,
+ callback,
+ traverseContext
+ );
+ }
+ }
+ }
+ }
+
+ return subtreeCount;
+ }
+
+ /**
+ * Traverses children that are typically specified as `props.children`, but
+ * might also be specified through attributes:
+ *
+ * - `traverseAllChildren(this.props.children, ...)`
+ * - `traverseAllChildren(this.props.leftPanelChildren, ...)`
+ *
+ * The `traverseContext` is an optional argument that is passed through the
+ * entire traversal. It can be used to store accumulations or anything else that
+ * the callback might find relevant.
+ *
+ * @param {?*} children Children tree object.
+ * @param {!function} callback To invoke upon traversing each child.
+ * @param {?*} traverseContext Context for traversal.
+ * @return {!number} The number of children in this subtree.
+ */
+ function traverseAllChildren(children, callback, traverseContext) {
+ if (children == null) {
+ return 0;
+ }
+
+ return traverseAllChildrenImpl(children, '', 0, callback, traverseContext);
+ }
+
+ module.exports = traverseAllChildren;
+
+ /* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(23)))
+
+/***/ },
+/* 39 */
+/***/ function(module, exports, __webpack_require__) {
+
+ /* WEBPACK VAR INJECTION */(function(process) {/**
+ * Copyright 2013-2015, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ *
+ * @providesModule ReactInstanceHandles
+ * @typechecks static-only
+ */
+
+ 'use strict';
+
+ var ReactRootIndex = __webpack_require__(40);
+
+ var invariant = __webpack_require__(27);
+
+ var SEPARATOR = '.';
+ var SEPARATOR_LENGTH = SEPARATOR.length;
+
+ /**
+ * Maximum depth of traversals before we consider the possibility of a bad ID.
+ */
+ var MAX_TREE_DEPTH = 100;
+
+ /**
+ * Creates a DOM ID prefix to use when mounting React components.
+ *
+ * @param {number} index A unique integer
+ * @return {string} React root ID.
+ * @internal
+ */
+ function getReactRootIDString(index) {
+ return SEPARATOR + index.toString(36);
+ }
+
+ /**
+ * Checks if a character in the supplied ID is a separator or the end.
+ *
+ * @param {string} id A React DOM ID.
+ * @param {number} index Index of the character to check.
+ * @return {boolean} True if the character is a separator or end of the ID.
+ * @private
+ */
+ function isBoundary(id, index) {
+ return id.charAt(index) === SEPARATOR || index === id.length;
+ }
+
+ /**
+ * Checks if the supplied string is a valid React DOM ID.
+ *
+ * @param {string} id A React DOM ID, maybe.
+ * @return {boolean} True if the string is a valid React DOM ID.
+ * @private
+ */
+ function isValidID(id) {
+ return id === '' || (
+ id.charAt(0) === SEPARATOR && id.charAt(id.length - 1) !== SEPARATOR
+ );
+ }
+
+ /**
+ * Checks if the first ID is an ancestor of or equal to the second ID.
+ *
+ * @param {string} ancestorID
+ * @param {string} descendantID
+ * @return {boolean} True if `ancestorID` is an ancestor of `descendantID`.
+ * @internal
+ */
+ function isAncestorIDOf(ancestorID, descendantID) {
+ return (
+ descendantID.indexOf(ancestorID) === 0 &&
+ isBoundary(descendantID, ancestorID.length)
+ );
+ }
+
+ /**
+ * Gets the parent ID of the supplied React DOM ID, `id`.
+ *
+ * @param {string} id ID of a component.
+ * @return {string} ID of the parent, or an empty string.
+ * @private
+ */
+ function getParentID(id) {
+ return id ? id.substr(0, id.lastIndexOf(SEPARATOR)) : '';
+ }
+
+ /**
+ * Gets the next DOM ID on the tree path from the supplied `ancestorID` to the
+ * supplied `destinationID`. If they are equal, the ID is returned.
+ *
+ * @param {string} ancestorID ID of an ancestor node of `destinationID`.
+ * @param {string} destinationID ID of the destination node.
+ * @return {string} Next ID on the path from `ancestorID` to `destinationID`.
+ * @private
+ */
+ function getNextDescendantID(ancestorID, destinationID) {
+ ("production" !== process.env.NODE_ENV ? invariant(
+ isValidID(ancestorID) && isValidID(destinationID),
+ 'getNextDescendantID(%s, %s): Received an invalid React DOM ID.',
+ ancestorID,
+ destinationID
+ ) : invariant(isValidID(ancestorID) && isValidID(destinationID)));
+ ("production" !== process.env.NODE_ENV ? invariant(
+ isAncestorIDOf(ancestorID, destinationID),
+ 'getNextDescendantID(...): React has made an invalid assumption about ' +
+ 'the DOM hierarchy. Expected `%s` to be an ancestor of `%s`.',
+ ancestorID,
+ destinationID
+ ) : invariant(isAncestorIDOf(ancestorID, destinationID)));
+ if (ancestorID === destinationID) {
+ return ancestorID;
+ }
+ // Skip over the ancestor and the immediate separator. Traverse until we hit
+ // another separator or we reach the end of `destinationID`.
+ var start = ancestorID.length + SEPARATOR_LENGTH;
+ var i;
+ for (i = start; i < destinationID.length; i++) {
+ if (isBoundary(destinationID, i)) {
+ break;
+ }
+ }
+ return destinationID.substr(0, i);
+ }
+
+ /**
+ * Gets the nearest common ancestor ID of two IDs.
+ *
+ * Using this ID scheme, the nearest common ancestor ID is the longest common
+ * prefix of the two IDs that immediately preceded a "marker" in both strings.
+ *
+ * @param {string} oneID
+ * @param {string} twoID
+ * @return {string} Nearest common ancestor ID, or the empty string if none.
+ * @private
+ */
+ function getFirstCommonAncestorID(oneID, twoID) {
+ var minLength = Math.min(oneID.length, twoID.length);
+ if (minLength === 0) {
+ return '';
+ }
+ var lastCommonMarkerIndex = 0;
+ // Use `<=` to traverse until the "EOL" of the shorter string.
+ for (var i = 0; i <= minLength; i++) {
+ if (isBoundary(oneID, i) && isBoundary(twoID, i)) {
+ lastCommonMarkerIndex = i;
+ } else if (oneID.charAt(i) !== twoID.charAt(i)) {
+ break;
+ }
+ }
+ var longestCommonID = oneID.substr(0, lastCommonMarkerIndex);
+ ("production" !== process.env.NODE_ENV ? invariant(
+ isValidID(longestCommonID),
+ 'getFirstCommonAncestorID(%s, %s): Expected a valid React DOM ID: %s',
+ oneID,
+ twoID,
+ longestCommonID
+ ) : invariant(isValidID(longestCommonID)));
+ return longestCommonID;
+ }
+
+ /**
+ * Traverses the parent path between two IDs (either up or down). The IDs must
+ * not be the same, and there must exist a parent path between them. If the
+ * callback returns `false`, traversal is stopped.
+ *
+ * @param {?string} start ID at which to start traversal.
+ * @param {?string} stop ID at which to end traversal.
+ * @param {function} cb Callback to invoke each ID with.
+ * @param {?boolean} skipFirst Whether or not to skip the first node.
+ * @param {?boolean} skipLast Whether or not to skip the last node.
+ * @private
+ */
+ function traverseParentPath(start, stop, cb, arg, skipFirst, skipLast) {
+ start = start || '';
+ stop = stop || '';
+ ("production" !== process.env.NODE_ENV ? invariant(
+ start !== stop,
+ 'traverseParentPath(...): Cannot traverse from and to the same ID, `%s`.',
+ start
+ ) : invariant(start !== stop));
+ var traverseUp = isAncestorIDOf(stop, start);
+ ("production" !== process.env.NODE_ENV ? invariant(
+ traverseUp || isAncestorIDOf(start, stop),
+ 'traverseParentPath(%s, %s, ...): Cannot traverse from two IDs that do ' +
+ 'not have a parent path.',
+ start,
+ stop
+ ) : invariant(traverseUp || isAncestorIDOf(start, stop)));
+ // Traverse from `start` to `stop` one depth at a time.
+ var depth = 0;
+ var traverse = traverseUp ? getParentID : getNextDescendantID;
+ for (var id = start; /* until break */; id = traverse(id, stop)) {
+ var ret;
+ if ((!skipFirst || id !== start) && (!skipLast || id !== stop)) {
+ ret = cb(id, traverseUp, arg);
+ }
+ if (ret === false || id === stop) {
+ // Only break //after// visiting `stop`.
+ break;
+ }
+ ("production" !== process.env.NODE_ENV ? invariant(
+ depth++ < MAX_TREE_DEPTH,
+ 'traverseParentPath(%s, %s, ...): Detected an infinite loop while ' +
+ 'traversing the React DOM ID tree. This may be due to malformed IDs: %s',
+ start, stop
+ ) : invariant(depth++ < MAX_TREE_DEPTH));
+ }
+ }
+
+ /**
+ * Manages the IDs assigned to DOM representations of React components. This
+ * uses a specific scheme in order to traverse the DOM efficiently (e.g. in
+ * order to simulate events).
+ *
+ * @internal
+ */
+ var ReactInstanceHandles = {
+
+ /**
+ * Constructs a React root ID
+ * @return {string} A React root ID.
+ */
+ createReactRootID: function() {
+ return getReactRootIDString(ReactRootIndex.createReactRootIndex());
+ },
+
+ /**
+ * Constructs a React ID by joining a root ID with a name.
+ *
+ * @param {string} rootID Root ID of a parent component.
+ * @param {string} name A component's name (as flattened children).
+ * @return {string} A React ID.
+ * @internal
+ */
+ createReactID: function(rootID, name) {
+ return rootID + name;
+ },
+
+ /**
+ * Gets the DOM ID of the React component that is the root of the tree that
+ * contains the React component with the supplied DOM ID.
+ *
+ * @param {string} id DOM ID of a React component.
+ * @return {?string} DOM ID of the React component that is the root.
+ * @internal
+ */
+ getReactRootIDFromNodeID: function(id) {
+ if (id && id.charAt(0) === SEPARATOR && id.length > 1) {
+ var index = id.indexOf(SEPARATOR, 1);
+ return index > -1 ? id.substr(0, index) : id;
+ }
+ return null;
+ },
+
+ /**
+ * Traverses the ID hierarchy and invokes the supplied `cb` on any IDs that
+ * should would receive a `mouseEnter` or `mouseLeave` event.
+ *
+ * NOTE: Does not invoke the callback on the nearest common ancestor because
+ * nothing "entered" or "left" that element.
+ *
+ * @param {string} leaveID ID being left.
+ * @param {string} enterID ID being entered.
+ * @param {function} cb Callback to invoke on each entered/left ID.
+ * @param {*} upArg Argument to invoke the callback with on left IDs.
+ * @param {*} downArg Argument to invoke the callback with on entered IDs.
+ * @internal
+ */
+ traverseEnterLeave: function(leaveID, enterID, cb, upArg, downArg) {
+ var ancestorID = getFirstCommonAncestorID(leaveID, enterID);
+ if (ancestorID !== leaveID) {
+ traverseParentPath(leaveID, ancestorID, cb, upArg, false, true);
+ }
+ if (ancestorID !== enterID) {
+ traverseParentPath(ancestorID, enterID, cb, downArg, true, false);
+ }
+ },
+
+ /**
+ * Simulates the traversal of a two-phase, capture/bubble event dispatch.
+ *
+ * NOTE: This traversal happens on IDs without touching the DOM.
+ *
+ * @param {string} targetID ID of the target node.
+ * @param {function} cb Callback to invoke.
+ * @param {*} arg Argument to invoke the callback with.
+ * @internal
+ */
+ traverseTwoPhase: function(targetID, cb, arg) {
+ if (targetID) {
+ traverseParentPath('', targetID, cb, arg, true, false);
+ traverseParentPath(targetID, '', cb, arg, false, true);
+ }
+ },
+
+ /**
+ * Traverse a node ID, calling the supplied `cb` for each ancestor ID. For
+ * example, passing `.0.$row-0.1` would result in `cb` getting called
+ * with `.0`, `.0.$row-0`, and `.0.$row-0.1`.
+ *
+ * NOTE: This traversal happens on IDs without touching the DOM.
+ *
+ * @param {string} targetID ID of the target node.
+ * @param {function} cb Callback to invoke.
+ * @param {*} arg Argument to invoke the callback with.
+ * @internal
+ */
+ traverseAncestors: function(targetID, cb, arg) {
+ traverseParentPath('', targetID, cb, arg, true, false);
+ },
+
+ /**
+ * Exposed for unit testing.
+ * @private
+ */
+ _getFirstCommonAncestorID: getFirstCommonAncestorID,
+
+ /**
+ * Exposed for unit testing.
+ * @private
+ */
+ _getNextDescendantID: getNextDescendantID,
+
+ isAncestorIDOf: isAncestorIDOf,
+
+ SEPARATOR: SEPARATOR
+
+ };
+
+ module.exports = ReactInstanceHandles;
+
+ /* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(23)))
+
+/***/ },
+/* 40 */
+/***/ function(module, exports) {
+
+ /**
+ * Copyright 2013-2015, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ *
+ * @providesModule ReactRootIndex
+ * @typechecks
+ */
+
+ 'use strict';
+
+ var ReactRootIndexInjection = {
+ /**
+ * @param {function} _createReactRootIndex
+ */
+ injectCreateReactRootIndex: function(_createReactRootIndex) {
+ ReactRootIndex.createReactRootIndex = _createReactRootIndex;
+ }
+ };
+
+ var ReactRootIndex = {
+ createReactRootIndex: null,
+ injection: ReactRootIndexInjection
+ };
+
+ module.exports = ReactRootIndex;
+
+
+/***/ },
+/* 41 */
+/***/ function(module, exports) {
+
+ /**
+ * Copyright 2013-2015, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ *
+ * @providesModule getIteratorFn
+ * @typechecks static-only
+ */
+
+ 'use strict';
+
+ /* global Symbol */
+ var ITERATOR_SYMBOL = typeof Symbol === 'function' && Symbol.iterator;
+ var FAUX_ITERATOR_SYMBOL = '@@iterator'; // Before Symbol spec.
+
+ /**
+ * Returns the iterator method function contained on the iterable object.
+ *
+ * Be sure to invoke the function with the iterable as context:
+ *
+ * var iteratorFn = getIteratorFn(myIterable);
+ * if (iteratorFn) {
+ * var iterator = iteratorFn.call(myIterable);
+ * ...
+ * }
+ *
+ * @param {?object} maybeIterable
+ * @return {?function}
+ */
+ function getIteratorFn(maybeIterable) {
+ var iteratorFn = maybeIterable && (
+ (ITERATOR_SYMBOL && maybeIterable[ITERATOR_SYMBOL] || maybeIterable[FAUX_ITERATOR_SYMBOL])
+ );
+ if (typeof iteratorFn === 'function') {
+ return iteratorFn;
+ }
+ }
+
+ module.exports = getIteratorFn;
+
+
+/***/ },
+/* 42 */
+/***/ function(module, exports, __webpack_require__) {
+
+ /* WEBPACK VAR INJECTION */(function(process) {/**
+ * Copyright 2013-2015, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ *
+ * @providesModule ReactComponent
+ */
+
+ 'use strict';
+
+ var ReactUpdateQueue = __webpack_require__(43);
+
+ var invariant = __webpack_require__(27);
+ var warning = __webpack_require__(35);
+
+ /**
+ * Base class helpers for the updating state of a component.
+ */
+ function ReactComponent(props, context) {
+ this.props = props;
+ this.context = context;
+ }
+
+ /**
+ * Sets a subset of the state. Always use this to mutate
+ * state. You should treat `this.state` as immutable.
+ *
+ * There is no guarantee that `this.state` will be immediately updated, so
+ * accessing `this.state` after calling this method may return the old value.
+ *
+ * There is no guarantee that calls to `setState` will run synchronously,
+ * as they may eventually be batched together. You can provide an optional
+ * callback that will be executed when the call to setState is actually
+ * completed.
+ *
+ * When a function is provided to setState, it will be called at some point in
+ * the future (not synchronously). It will be called with the up to date
+ * component arguments (state, props, context). These values can be different
+ * from this.* because your function may be called after receiveProps but before
+ * shouldComponentUpdate, and this new state, props, and context will not yet be
+ * assigned to this.
+ *
+ * @param {object|function} partialState Next partial state or function to
+ * produce next partial state to be merged with current state.
+ * @param {?function} callback Called after state is updated.
+ * @final
+ * @protected
+ */
+ ReactComponent.prototype.setState = function(partialState, callback) {
+ ("production" !== process.env.NODE_ENV ? invariant(
+ typeof partialState === 'object' ||
+ typeof partialState === 'function' ||
+ partialState == null,
+ 'setState(...): takes an object of state variables to update or a ' +
+ 'function which returns an object of state variables.'
+ ) : invariant(typeof partialState === 'object' ||
+ typeof partialState === 'function' ||
+ partialState == null));
+ if ("production" !== process.env.NODE_ENV) {
+ ("production" !== process.env.NODE_ENV ? warning(
+ partialState != null,
+ 'setState(...): You passed an undefined or null state object; ' +
+ 'instead, use forceUpdate().'
+ ) : null);
+ }
+ ReactUpdateQueue.enqueueSetState(this, partialState);
+ if (callback) {
+ ReactUpdateQueue.enqueueCallback(this, callback);
+ }
+ };
+
+ /**
+ * Forces an update. This should only be invoked when it is known with
+ * certainty that we are **not** in a DOM transaction.
+ *
+ * You may want to call this when you know that some deeper aspect of the
+ * component's state has changed but `setState` was not called.
+ *
+ * This will not invoke `shouldComponentUpdate`, but it will invoke
+ * `componentWillUpdate` and `componentDidUpdate`.
+ *
+ * @param {?function} callback Called after update is complete.
+ * @final
+ * @protected
+ */
+ ReactComponent.prototype.forceUpdate = function(callback) {
+ ReactUpdateQueue.enqueueForceUpdate(this);
+ if (callback) {
+ ReactUpdateQueue.enqueueCallback(this, callback);
+ }
+ };
+
+ /**
+ * Deprecated APIs. These APIs used to exist on classic React classes but since
+ * we would like to deprecate them, we're not going to move them over to this
+ * modern base class. Instead, we define a getter that warns if it's accessed.
+ */
+ if ("production" !== process.env.NODE_ENV) {
+ var deprecatedAPIs = {
+ getDOMNode: [
+ 'getDOMNode',
+ 'Use React.findDOMNode(component) instead.'
+ ],
+ isMounted: [
+ 'isMounted',
+ 'Instead, make sure to clean up subscriptions and pending requests in ' +
+ 'componentWillUnmount to prevent memory leaks.'
+ ],
+ replaceProps: [
+ 'replaceProps',
+ 'Instead, call React.render again at the top level.'
+ ],
+ replaceState: [
+ 'replaceState',
+ 'Refactor your code to use setState instead (see ' +
+ 'https://github.com/facebook/react/issues/3236).'
+ ],
+ setProps: [
+ 'setProps',
+ 'Instead, call React.render again at the top level.'
+ ]
+ };
+ var defineDeprecationWarning = function(methodName, info) {
+ try {
+ Object.defineProperty(ReactComponent.prototype, methodName, {
+ get: function() {
+ ("production" !== process.env.NODE_ENV ? warning(
+ false,
+ '%s(...) is deprecated in plain JavaScript React classes. %s',
+ info[0],
+ info[1]
+ ) : null);
+ return undefined;
+ }
+ });
+ } catch (x) {
+ // IE will fail on defineProperty (es5-shim/sham too)
+ }
+ };
+ for (var fnName in deprecatedAPIs) {
+ if (deprecatedAPIs.hasOwnProperty(fnName)) {
+ defineDeprecationWarning(fnName, deprecatedAPIs[fnName]);
+ }
+ }
+ }
+
+ module.exports = ReactComponent;
+
+ /* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(23)))
+
+/***/ },
+/* 43 */
+/***/ function(module, exports, __webpack_require__) {
+
+ /* WEBPACK VAR INJECTION */(function(process) {/**
+ * Copyright 2015, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ *
+ * @providesModule ReactUpdateQueue
+ */
+
+ 'use strict';
+
+ var ReactLifeCycle = __webpack_require__(44);
+ var ReactCurrentOwner = __webpack_require__(37);
+ var ReactElement = __webpack_require__(31);
+ var ReactInstanceMap = __webpack_require__(45);
+ var ReactUpdates = __webpack_require__(46);
+
+ var assign = __webpack_require__(33);
+ var invariant = __webpack_require__(27);
+ var warning = __webpack_require__(35);
+
+ function enqueueUpdate(internalInstance) {
+ if (internalInstance !== ReactLifeCycle.currentlyMountingInstance) {
+ // If we're in a componentWillMount handler, don't enqueue a rerender
+ // because ReactUpdates assumes we're in a browser context (which is
+ // wrong for server rendering) and we're about to do a render anyway.
+ // See bug in #1740.
+ ReactUpdates.enqueueUpdate(internalInstance);
+ }
+ }
+
+ function getInternalInstanceReadyForUpdate(publicInstance, callerName) {
+ ("production" !== process.env.NODE_ENV ? invariant(
+ ReactCurrentOwner.current == null,
+ '%s(...): Cannot update during an existing state transition ' +
+ '(such as within `render`). Render methods should be a pure function ' +
+ 'of props and state.',
+ callerName
+ ) : invariant(ReactCurrentOwner.current == null));
+
+ var internalInstance = ReactInstanceMap.get(publicInstance);
+ if (!internalInstance) {
+ if ("production" !== process.env.NODE_ENV) {
+ // Only warn when we have a callerName. Otherwise we should be silent.
+ // We're probably calling from enqueueCallback. We don't want to warn
+ // there because we already warned for the corresponding lifecycle method.
+ ("production" !== process.env.NODE_ENV ? warning(
+ !callerName,
+ '%s(...): Can only update a mounted or mounting component. ' +
+ 'This usually means you called %s() on an unmounted ' +
+ 'component. This is a no-op.',
+ callerName,
+ callerName
+ ) : null);
+ }
+ return null;
+ }
+
+ if (internalInstance === ReactLifeCycle.currentlyUnmountingInstance) {
+ return null;
+ }
+
+ return internalInstance;
+ }
+
+ /**
+ * ReactUpdateQueue allows for state updates to be scheduled into a later
+ * reconciliation step.
+ */
+ var ReactUpdateQueue = {
+
+ /**
+ * Enqueue a callback that will be executed after all the pending updates
+ * have processed.
+ *
+ * @param {ReactClass} publicInstance The instance to use as `this` context.
+ * @param {?function} callback Called after state is updated.
+ * @internal
+ */
+ enqueueCallback: function(publicInstance, callback) {
+ ("production" !== process.env.NODE_ENV ? invariant(
+ typeof callback === 'function',
+ 'enqueueCallback(...): You called `setProps`, `replaceProps`, ' +
+ '`setState`, `replaceState`, or `forceUpdate` with a callback that ' +
+ 'isn\'t callable.'
+ ) : invariant(typeof callback === 'function'));
+ var internalInstance = getInternalInstanceReadyForUpdate(publicInstance);
+
+ // Previously we would throw an error if we didn't have an internal
+ // instance. Since we want to make it a no-op instead, we mirror the same
+ // behavior we have in other enqueue* methods.
+ // We also need to ignore callbacks in componentWillMount. See
+ // enqueueUpdates.
+ if (!internalInstance ||
+ internalInstance === ReactLifeCycle.currentlyMountingInstance) {
+ return null;
+ }
+
+ if (internalInstance._pendingCallbacks) {
+ internalInstance._pendingCallbacks.push(callback);
+ } else {
+ internalInstance._pendingCallbacks = [callback];
+ }
+ // TODO: The callback here is ignored when setState is called from
+ // componentWillMount. Either fix it or disallow doing so completely in
+ // favor of getInitialState. Alternatively, we can disallow
+ // componentWillMount during server-side rendering.
+ enqueueUpdate(internalInstance);
+ },
+
+ enqueueCallbackInternal: function(internalInstance, callback) {
+ ("production" !== process.env.NODE_ENV ? invariant(
+ typeof callback === 'function',
+ 'enqueueCallback(...): You called `setProps`, `replaceProps`, ' +
+ '`setState`, `replaceState`, or `forceUpdate` with a callback that ' +
+ 'isn\'t callable.'
+ ) : invariant(typeof callback === 'function'));
+ if (internalInstance._pendingCallbacks) {
+ internalInstance._pendingCallbacks.push(callback);
+ } else {
+ internalInstance._pendingCallbacks = [callback];
+ }
+ enqueueUpdate(internalInstance);
+ },
+
+ /**
+ * Forces an update. This should only be invoked when it is known with
+ * certainty that we are **not** in a DOM transaction.
+ *
+ * You may want to call this when you know that some deeper aspect of the
+ * component's state has changed but `setState` was not called.
+ *
+ * This will not invoke `shouldUpdateComponent`, but it will invoke
+ * `componentWillUpdate` and `componentDidUpdate`.
+ *
+ * @param {ReactClass} publicInstance The instance that should rerender.
+ * @internal
+ */
+ enqueueForceUpdate: function(publicInstance) {
+ var internalInstance = getInternalInstanceReadyForUpdate(
+ publicInstance,
+ 'forceUpdate'
+ );
+
+ if (!internalInstance) {
+ return;
+ }
+
+ internalInstance._pendingForceUpdate = true;
+
+ enqueueUpdate(internalInstance);
+ },
+
+ /**
+ * Replaces all of the state. Always use this or `setState` to mutate state.
+ * You should treat `this.state` as immutable.
+ *
+ * There is no guarantee that `this.state` will be immediately updated, so
+ * accessing `this.state` after calling this method may return the old value.
+ *
+ * @param {ReactClass} publicInstance The instance that should rerender.
+ * @param {object} completeState Next state.
+ * @internal
+ */
+ enqueueReplaceState: function(publicInstance, completeState) {
+ var internalInstance = getInternalInstanceReadyForUpdate(
+ publicInstance,
+ 'replaceState'
+ );
+
+ if (!internalInstance) {
+ return;
+ }
+
+ internalInstance._pendingStateQueue = [completeState];
+ internalInstance._pendingReplaceState = true;
+
+ enqueueUpdate(internalInstance);
+ },
+
+ /**
+ * Sets a subset of the state. This only exists because _pendingState is
+ * internal. This provides a merging strategy that is not available to deep
+ * properties which is confusing. TODO: Expose pendingState or don't use it
+ * during the merge.
+ *
+ * @param {ReactClass} publicInstance The instance that should rerender.
+ * @param {object} partialState Next partial state to be merged with state.
+ * @internal
+ */
+ enqueueSetState: function(publicInstance, partialState) {
+ var internalInstance = getInternalInstanceReadyForUpdate(
+ publicInstance,
+ 'setState'
+ );
+
+ if (!internalInstance) {
+ return;
+ }
+
+ var queue =
+ internalInstance._pendingStateQueue ||
+ (internalInstance._pendingStateQueue = []);
+ queue.push(partialState);
+
+ enqueueUpdate(internalInstance);
+ },
+
+ /**
+ * Sets a subset of the props.
+ *
+ * @param {ReactClass} publicInstance The instance that should rerender.
+ * @param {object} partialProps Subset of the next props.
+ * @internal
+ */
+ enqueueSetProps: function(publicInstance, partialProps) {
+ var internalInstance = getInternalInstanceReadyForUpdate(
+ publicInstance,
+ 'setProps'
+ );
+
+ if (!internalInstance) {
+ return;
+ }
+
+ ("production" !== process.env.NODE_ENV ? invariant(
+ internalInstance._isTopLevel,
+ 'setProps(...): You called `setProps` on a ' +
+ 'component with a parent. This is an anti-pattern since props will ' +
+ 'get reactively updated when rendered. Instead, change the owner\'s ' +
+ '`render` method to pass the correct value as props to the component ' +
+ 'where it is created.'
+ ) : invariant(internalInstance._isTopLevel));
+
+ // Merge with the pending element if it exists, otherwise with existing
+ // element props.
+ var element = internalInstance._pendingElement ||
+ internalInstance._currentElement;
+ var props = assign({}, element.props, partialProps);
+ internalInstance._pendingElement = ReactElement.cloneAndReplaceProps(
+ element,
+ props
+ );
+
+ enqueueUpdate(internalInstance);
+ },
+
+ /**
+ * Replaces all of the props.
+ *
+ * @param {ReactClass} publicInstance The instance that should rerender.
+ * @param {object} props New props.
+ * @internal
+ */
+ enqueueReplaceProps: function(publicInstance, props) {
+ var internalInstance = getInternalInstanceReadyForUpdate(
+ publicInstance,
+ 'replaceProps'
+ );
+
+ if (!internalInstance) {
+ return;
+ }
+
+ ("production" !== process.env.NODE_ENV ? invariant(
+ internalInstance._isTopLevel,
+ 'replaceProps(...): You called `replaceProps` on a ' +
+ 'component with a parent. This is an anti-pattern since props will ' +
+ 'get reactively updated when rendered. Instead, change the owner\'s ' +
+ '`render` method to pass the correct value as props to the component ' +
+ 'where it is created.'
+ ) : invariant(internalInstance._isTopLevel));
+
+ // Merge with the pending element if it exists, otherwise with existing
+ // element props.
+ var element = internalInstance._pendingElement ||
+ internalInstance._currentElement;
+ internalInstance._pendingElement = ReactElement.cloneAndReplaceProps(
+ element,
+ props
+ );
+
+ enqueueUpdate(internalInstance);
+ },
+
+ enqueueElementInternal: function(internalInstance, newElement) {
+ internalInstance._pendingElement = newElement;
+ enqueueUpdate(internalInstance);
+ }
+
+ };
+
+ module.exports = ReactUpdateQueue;
+
+ /* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(23)))
+
+/***/ },
+/* 44 */
+/***/ function(module, exports) {
+
+ /**
+ * Copyright 2015, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ *
+ * @providesModule ReactLifeCycle
+ */
+
+ 'use strict';
+
+ /**
+ * This module manages the bookkeeping when a component is in the process
+ * of being mounted or being unmounted. This is used as a way to enforce
+ * invariants (or warnings) when it is not recommended to call
+ * setState/forceUpdate.
+ *
+ * currentlyMountingInstance: During the construction phase, it is not possible
+ * to trigger an update since the instance is not fully mounted yet. However, we
+ * currently allow this as a convenience for mutating the initial state.
+ *
+ * currentlyUnmountingInstance: During the unmounting phase, the instance is
+ * still mounted and can therefore schedule an update. However, this is not
+ * recommended and probably an error since it's about to be unmounted.
+ * Therefore we still want to trigger in an error for that case.
+ */
+
+ var ReactLifeCycle = {
+ currentlyMountingInstance: null,
+ currentlyUnmountingInstance: null
+ };
+
+ module.exports = ReactLifeCycle;
+
+
+/***/ },
+/* 45 */
+/***/ function(module, exports) {
+
+ /**
+ * Copyright 2013-2015, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ *
+ * @providesModule ReactInstanceMap
+ */
+
+ 'use strict';
+
+ /**
+ * `ReactInstanceMap` maintains a mapping from a public facing stateful
+ * instance (key) and the internal representation (value). This allows public
+ * methods to accept the user facing instance as an argument and map them back
+ * to internal methods.
+ */
+
+ // TODO: Replace this with ES6: var ReactInstanceMap = new Map();
+ var ReactInstanceMap = {
+
+ /**
+ * This API should be called `delete` but we'd have to make sure to always
+ * transform these to strings for IE support. When this transform is fully
+ * supported we can rename it.
+ */
+ remove: function(key) {
+ key._reactInternalInstance = undefined;
+ },
+
+ get: function(key) {
+ return key._reactInternalInstance;
+ },
+
+ has: function(key) {
+ return key._reactInternalInstance !== undefined;
+ },
+
+ set: function(key, value) {
+ key._reactInternalInstance = value;
+ }
+
+ };
+
+ module.exports = ReactInstanceMap;
+
+
+/***/ },
+/* 46 */
+/***/ function(module, exports, __webpack_require__) {
+
+ /* WEBPACK VAR INJECTION */(function(process) {/**
+ * Copyright 2013-2015, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ *
+ * @providesModule ReactUpdates
+ */
+
+ 'use strict';
+
+ var CallbackQueue = __webpack_require__(47);
+ var PooledClass = __webpack_require__(29);
+ var ReactCurrentOwner = __webpack_require__(37);
+ var ReactPerf = __webpack_require__(48);
+ var ReactReconciler = __webpack_require__(49);
+ var Transaction = __webpack_require__(56);
+
+ var assign = __webpack_require__(33);
+ var invariant = __webpack_require__(27);
+ var warning = __webpack_require__(35);
+
+ var dirtyComponents = [];
+ var asapCallbackQueue = CallbackQueue.getPooled();
+ var asapEnqueued = false;
+
+ var batchingStrategy = null;
+
+ function ensureInjected() {
+ ("production" !== process.env.NODE_ENV ? invariant(
+ ReactUpdates.ReactReconcileTransaction && batchingStrategy,
+ 'ReactUpdates: must inject a reconcile transaction class and batching ' +
+ 'strategy'
+ ) : invariant(ReactUpdates.ReactReconcileTransaction && batchingStrategy));
+ }
+
+ var NESTED_UPDATES = {
+ initialize: function() {
+ this.dirtyComponentsLength = dirtyComponents.length;
+ },
+ close: function() {
+ if (this.dirtyComponentsLength !== dirtyComponents.length) {
+ // Additional updates were enqueued by componentDidUpdate handlers or
+ // similar; before our own UPDATE_QUEUEING wrapper closes, we want to run
+ // these new updates so that if A's componentDidUpdate calls setState on
+ // B, B will update before the callback A's updater provided when calling
+ // setState.
+ dirtyComponents.splice(0, this.dirtyComponentsLength);
+ flushBatchedUpdates();
+ } else {
+ dirtyComponents.length = 0;
+ }
+ }
+ };
+
+ var UPDATE_QUEUEING = {
+ initialize: function() {
+ this.callbackQueue.reset();
+ },
+ close: function() {
+ this.callbackQueue.notifyAll();
+ }
+ };
+
+ var TRANSACTION_WRAPPERS = [NESTED_UPDATES, UPDATE_QUEUEING];
+
+ function ReactUpdatesFlushTransaction() {
+ this.reinitializeTransaction();
+ this.dirtyComponentsLength = null;
+ this.callbackQueue = CallbackQueue.getPooled();
+ this.reconcileTransaction =
+ ReactUpdates.ReactReconcileTransaction.getPooled();
+ }
+
+ assign(
+ ReactUpdatesFlushTransaction.prototype,
+ Transaction.Mixin, {
+ getTransactionWrappers: function() {
+ return TRANSACTION_WRAPPERS;
+ },
+
+ destructor: function() {
+ this.dirtyComponentsLength = null;
+ CallbackQueue.release(this.callbackQueue);
+ this.callbackQueue = null;
+ ReactUpdates.ReactReconcileTransaction.release(this.reconcileTransaction);
+ this.reconcileTransaction = null;
+ },
+
+ perform: function(method, scope, a) {
+ // Essentially calls `this.reconcileTransaction.perform(method, scope, a)`
+ // with this transaction's wrappers around it.
+ return Transaction.Mixin.perform.call(
+ this,
+ this.reconcileTransaction.perform,
+ this.reconcileTransaction,
+ method,
+ scope,
+ a
+ );
+ }
+ });
+
+ PooledClass.addPoolingTo(ReactUpdatesFlushTransaction);
+
+ function batchedUpdates(callback, a, b, c, d) {
+ ensureInjected();
+ batchingStrategy.batchedUpdates(callback, a, b, c, d);
+ }
+
+ /**
+ * Array comparator for ReactComponents by mount ordering.
+ *
+ * @param {ReactComponent} c1 first component you're comparing
+ * @param {ReactComponent} c2 second component you're comparing
+ * @return {number} Return value usable by Array.prototype.sort().
+ */
+ function mountOrderComparator(c1, c2) {
+ return c1._mountOrder - c2._mountOrder;
+ }
+
+ function runBatchedUpdates(transaction) {
+ var len = transaction.dirtyComponentsLength;
+ ("production" !== process.env.NODE_ENV ? invariant(
+ len === dirtyComponents.length,
+ 'Expected flush transaction\'s stored dirty-components length (%s) to ' +
+ 'match dirty-components array length (%s).',
+ len,
+ dirtyComponents.length
+ ) : invariant(len === dirtyComponents.length));
+
+ // Since reconciling a component higher in the owner hierarchy usually (not
+ // always -- see shouldComponentUpdate()) will reconcile children, reconcile
+ // them before their children by sorting the array.
+ dirtyComponents.sort(mountOrderComparator);
+
+ for (var i = 0; i < len; i++) {
+ // If a component is unmounted before pending changes apply, it will still
+ // be here, but we assume that it has cleared its _pendingCallbacks and
+ // that performUpdateIfNecessary is a noop.
+ var component = dirtyComponents[i];
+
+ // If performUpdateIfNecessary happens to enqueue any new updates, we
+ // shouldn't execute the callbacks until the next render happens, so
+ // stash the callbacks first
+ var callbacks = component._pendingCallbacks;
+ component._pendingCallbacks = null;
+
+ ReactReconciler.performUpdateIfNecessary(
+ component,
+ transaction.reconcileTransaction
+ );
+
+ if (callbacks) {
+ for (var j = 0; j < callbacks.length; j++) {
+ transaction.callbackQueue.enqueue(
+ callbacks[j],
+ component.getPublicInstance()
+ );
+ }
+ }
+ }
+ }
+
+ var flushBatchedUpdates = function() {
+ // ReactUpdatesFlushTransaction's wrappers will clear the dirtyComponents
+ // array and perform any updates enqueued by mount-ready handlers (i.e.,
+ // componentDidUpdate) but we need to check here too in order to catch
+ // updates enqueued by setState callbacks and asap calls.
+ while (dirtyComponents.length || asapEnqueued) {
+ if (dirtyComponents.length) {
+ var transaction = ReactUpdatesFlushTransaction.getPooled();
+ transaction.perform(runBatchedUpdates, null, transaction);
+ ReactUpdatesFlushTransaction.release(transaction);
+ }
+
+ if (asapEnqueued) {
+ asapEnqueued = false;
+ var queue = asapCallbackQueue;
+ asapCallbackQueue = CallbackQueue.getPooled();
+ queue.notifyAll();
+ CallbackQueue.release(queue);
+ }
+ }
+ };
+ flushBatchedUpdates = ReactPerf.measure(
+ 'ReactUpdates',
+ 'flushBatchedUpdates',
+ flushBatchedUpdates
+ );
+
+ /**
+ * Mark a component as needing a rerender, adding an optional callback to a
+ * list of functions which will be executed once the rerender occurs.
+ */
+ function enqueueUpdate(component) {
+ ensureInjected();
+
+ // Various parts of our code (such as ReactCompositeComponent's
+ // _renderValidatedComponent) assume that calls to render aren't nested;
+ // verify that that's the case. (This is called by each top-level update
+ // function, like setProps, setState, forceUpdate, etc.; creation and
+ // destruction of top-level components is guarded in ReactMount.)
+ ("production" !== process.env.NODE_ENV ? warning(
+ ReactCurrentOwner.current == null,
+ 'enqueueUpdate(): Render methods should be a pure function of props ' +
+ 'and state; triggering nested component updates from render is not ' +
+ 'allowed. If necessary, trigger nested updates in ' +
+ 'componentDidUpdate.'
+ ) : null);
+
+ if (!batchingStrategy.isBatchingUpdates) {
+ batchingStrategy.batchedUpdates(enqueueUpdate, component);
+ return;
+ }
+
+ dirtyComponents.push(component);
+ }
+
+ /**
+ * Enqueue a callback to be run at the end of the current batching cycle. Throws
+ * if no updates are currently being performed.
+ */
+ function asap(callback, context) {
+ ("production" !== process.env.NODE_ENV ? invariant(
+ batchingStrategy.isBatchingUpdates,
+ 'ReactUpdates.asap: Can\'t enqueue an asap callback in a context where' +
+ 'updates are not being batched.'
+ ) : invariant(batchingStrategy.isBatchingUpdates));
+ asapCallbackQueue.enqueue(callback, context);
+ asapEnqueued = true;
+ }
+
+ var ReactUpdatesInjection = {
+ injectReconcileTransaction: function(ReconcileTransaction) {
+ ("production" !== process.env.NODE_ENV ? invariant(
+ ReconcileTransaction,
+ 'ReactUpdates: must provide a reconcile transaction class'
+ ) : invariant(ReconcileTransaction));
+ ReactUpdates.ReactReconcileTransaction = ReconcileTransaction;
+ },
+
+ injectBatchingStrategy: function(_batchingStrategy) {
+ ("production" !== process.env.NODE_ENV ? invariant(
+ _batchingStrategy,
+ 'ReactUpdates: must provide a batching strategy'
+ ) : invariant(_batchingStrategy));
+ ("production" !== process.env.NODE_ENV ? invariant(
+ typeof _batchingStrategy.batchedUpdates === 'function',
+ 'ReactUpdates: must provide a batchedUpdates() function'
+ ) : invariant(typeof _batchingStrategy.batchedUpdates === 'function'));
+ ("production" !== process.env.NODE_ENV ? invariant(
+ typeof _batchingStrategy.isBatchingUpdates === 'boolean',
+ 'ReactUpdates: must provide an isBatchingUpdates boolean attribute'
+ ) : invariant(typeof _batchingStrategy.isBatchingUpdates === 'boolean'));
+ batchingStrategy = _batchingStrategy;
+ }
+ };
+
+ var ReactUpdates = {
+ /**
+ * React references `ReactReconcileTransaction` using this property in order
+ * to allow dependency injection.
+ *
+ * @internal
+ */
+ ReactReconcileTransaction: null,
+
+ batchedUpdates: batchedUpdates,
+ enqueueUpdate: enqueueUpdate,
+ flushBatchedUpdates: flushBatchedUpdates,
+ injection: ReactUpdatesInjection,
+ asap: asap
+ };
+
+ module.exports = ReactUpdates;
+
+ /* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(23)))
+
+/***/ },
+/* 47 */
+/***/ function(module, exports, __webpack_require__) {
+
+ /* WEBPACK VAR INJECTION */(function(process) {/**
+ * Copyright 2013-2015, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ *
+ * @providesModule CallbackQueue
+ */
+
+ 'use strict';
+
+ var PooledClass = __webpack_require__(29);
+
+ var assign = __webpack_require__(33);
+ var invariant = __webpack_require__(27);
+
+ /**
+ * A specialized pseudo-event module to help keep track of components waiting to
+ * be notified when their DOM representations are available for use.
+ *
+ * This implements `PooledClass`, so you should never need to instantiate this.
+ * Instead, use `CallbackQueue.getPooled()`.
+ *
+ * @class ReactMountReady
+ * @implements PooledClass
+ * @internal
+ */
+ function CallbackQueue() {
+ this._callbacks = null;
+ this._contexts = null;
+ }
+
+ assign(CallbackQueue.prototype, {
+
+ /**
+ * Enqueues a callback to be invoked when `notifyAll` is invoked.
+ *
+ * @param {function} callback Invoked when `notifyAll` is invoked.
+ * @param {?object} context Context to call `callback` with.
+ * @internal
+ */
+ enqueue: function(callback, context) {
+ this._callbacks = this._callbacks || [];
+ this._contexts = this._contexts || [];
+ this._callbacks.push(callback);
+ this._contexts.push(context);
+ },
+
+ /**
+ * Invokes all enqueued callbacks and clears the queue. This is invoked after
+ * the DOM representation of a component has been created or updated.
+ *
+ * @internal
+ */
+ notifyAll: function() {
+ var callbacks = this._callbacks;
+ var contexts = this._contexts;
+ if (callbacks) {
+ ("production" !== process.env.NODE_ENV ? invariant(
+ callbacks.length === contexts.length,
+ 'Mismatched list of contexts in callback queue'
+ ) : invariant(callbacks.length === contexts.length));
+ this._callbacks = null;
+ this._contexts = null;
+ for (var i = 0, l = callbacks.length; i < l; i++) {
+ callbacks[i].call(contexts[i]);
+ }
+ callbacks.length = 0;
+ contexts.length = 0;
+ }
+ },
+
+ /**
+ * Resets the internal queue.
+ *
+ * @internal
+ */
+ reset: function() {
+ this._callbacks = null;
+ this._contexts = null;
+ },
+
+ /**
+ * `PooledClass` looks for this.
+ */
+ destructor: function() {
+ this.reset();
+ }
+
+ });
+
+ PooledClass.addPoolingTo(CallbackQueue);
+
+ module.exports = CallbackQueue;
+
+ /* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(23)))
+
+/***/ },
+/* 48 */
+/***/ function(module, exports, __webpack_require__) {
+
+ /* WEBPACK VAR INJECTION */(function(process) {/**
+ * Copyright 2013-2015, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ *
+ * @providesModule ReactPerf
+ * @typechecks static-only
+ */
+
+ 'use strict';
+
+ /**
+ * ReactPerf is a general AOP system designed to measure performance. This
+ * module only has the hooks: see ReactDefaultPerf for the analysis tool.
+ */
+ var ReactPerf = {
+ /**
+ * Boolean to enable/disable measurement. Set to false by default to prevent
+ * accidental logging and perf loss.
+ */
+ enableMeasure: false,
+
+ /**
+ * Holds onto the measure function in use. By default, don't measure
+ * anything, but we'll override this if we inject a measure function.
+ */
+ storedMeasure: _noMeasure,
+
+ /**
+ * @param {object} object
+ * @param {string} objectName
+ * @param {object} methodNames
+ */
+ measureMethods: function(object, objectName, methodNames) {
+ if ("production" !== process.env.NODE_ENV) {
+ for (var key in methodNames) {
+ if (!methodNames.hasOwnProperty(key)) {
+ continue;
+ }
+ object[key] = ReactPerf.measure(
+ objectName,
+ methodNames[key],
+ object[key]
+ );
+ }
+ }
+ },
+
+ /**
+ * Use this to wrap methods you want to measure. Zero overhead in production.
+ *
+ * @param {string} objName
+ * @param {string} fnName
+ * @param {function} func
+ * @return {function}
+ */
+ measure: function(objName, fnName, func) {
+ if ("production" !== process.env.NODE_ENV) {
+ var measuredFunc = null;
+ var wrapper = function() {
+ if (ReactPerf.enableMeasure) {
+ if (!measuredFunc) {
+ measuredFunc = ReactPerf.storedMeasure(objName, fnName, func);
+ }
+ return measuredFunc.apply(this, arguments);
+ }
+ return func.apply(this, arguments);
+ };
+ wrapper.displayName = objName + '_' + fnName;
+ return wrapper;
+ }
+ return func;
+ },
+
+ injection: {
+ /**
+ * @param {function} measure
+ */
+ injectMeasure: function(measure) {
+ ReactPerf.storedMeasure = measure;
+ }
+ }
+ };
+
+ /**
+ * Simply passes through the measured function, without measuring it.
+ *
+ * @param {string} objName
+ * @param {string} fnName
+ * @param {function} func
+ * @return {function}
+ */
+ function _noMeasure(objName, fnName, func) {
+ return func;
+ }
+
+ module.exports = ReactPerf;
+
+ /* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(23)))
+
+/***/ },
+/* 49 */
+/***/ function(module, exports, __webpack_require__) {
+
+ /* WEBPACK VAR INJECTION */(function(process) {/**
+ * Copyright 2013-2015, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ *
+ * @providesModule ReactReconciler
+ */
+
+ 'use strict';
+
+ var ReactRef = __webpack_require__(50);
+ var ReactElementValidator = __webpack_require__(52);
+
+ /**
+ * Helper to call ReactRef.attachRefs with this composite component, split out
+ * to avoid allocations in the transaction mount-ready queue.
+ */
+ function attachRefs() {
+ ReactRef.attachRefs(this, this._currentElement);
+ }
+
+ var ReactReconciler = {
+
+ /**
+ * Initializes the component, renders markup, and registers event listeners.
+ *
+ * @param {ReactComponent} internalInstance
+ * @param {string} rootID DOM ID of the root node.
+ * @param {ReactReconcileTransaction|ReactServerRenderingTransaction} transaction
+ * @return {?string} Rendered markup to be inserted into the DOM.
+ * @final
+ * @internal
+ */
+ mountComponent: function(internalInstance, rootID, transaction, context) {
+ var markup = internalInstance.mountComponent(rootID, transaction, context);
+ if ("production" !== process.env.NODE_ENV) {
+ ReactElementValidator.checkAndWarnForMutatedProps(
+ internalInstance._currentElement
+ );
+ }
+ transaction.getReactMountReady().enqueue(attachRefs, internalInstance);
+ return markup;
+ },
+
+ /**
+ * Releases any resources allocated by `mountComponent`.
+ *
+ * @final
+ * @internal
+ */
+ unmountComponent: function(internalInstance) {
+ ReactRef.detachRefs(internalInstance, internalInstance._currentElement);
+ internalInstance.unmountComponent();
+ },
+
+ /**
+ * Update a component using a new element.
+ *
+ * @param {ReactComponent} internalInstance
+ * @param {ReactElement} nextElement
+ * @param {ReactReconcileTransaction} transaction
+ * @param {object} context
+ * @internal
+ */
+ receiveComponent: function(
+ internalInstance, nextElement, transaction, context
+ ) {
+ var prevElement = internalInstance._currentElement;
+
+ if (nextElement === prevElement && nextElement._owner != null) {
+ // Since elements are immutable after the owner is rendered,
+ // we can do a cheap identity compare here to determine if this is a
+ // superfluous reconcile. It's possible for state to be mutable but such
+ // change should trigger an update of the owner which would recreate
+ // the element. We explicitly check for the existence of an owner since
+ // it's possible for an element created outside a composite to be
+ // deeply mutated and reused.
+ return;
+ }
+
+ if ("production" !== process.env.NODE_ENV) {
+ ReactElementValidator.checkAndWarnForMutatedProps(nextElement);
+ }
+
+ var refsChanged = ReactRef.shouldUpdateRefs(
+ prevElement,
+ nextElement
+ );
+
+ if (refsChanged) {
+ ReactRef.detachRefs(internalInstance, prevElement);
+ }
+
+ internalInstance.receiveComponent(nextElement, transaction, context);
+
+ if (refsChanged) {
+ transaction.getReactMountReady().enqueue(attachRefs, internalInstance);
+ }
+ },
+
+ /**
+ * Flush any dirty changes in a component.
+ *
+ * @param {ReactComponent} internalInstance
+ * @param {ReactReconcileTransaction} transaction
+ * @internal
+ */
+ performUpdateIfNecessary: function(
+ internalInstance,
+ transaction
+ ) {
+ internalInstance.performUpdateIfNecessary(transaction);
+ }
+
+ };
+
+ module.exports = ReactReconciler;
+
+ /* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(23)))
+
+/***/ },
+/* 50 */
+/***/ function(module, exports, __webpack_require__) {
+
+ /**
+ * Copyright 2013-2015, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ *
+ * @providesModule ReactRef
+ */
+
+ 'use strict';
+
+ var ReactOwner = __webpack_require__(51);
+
+ var ReactRef = {};
+
+ function attachRef(ref, component, owner) {
+ if (typeof ref === 'function') {
+ ref(component.getPublicInstance());
+ } else {
+ // Legacy ref
+ ReactOwner.addComponentAsRefTo(component, ref, owner);
+ }
+ }
+
+ function detachRef(ref, component, owner) {
+ if (typeof ref === 'function') {
+ ref(null);
+ } else {
+ // Legacy ref
+ ReactOwner.removeComponentAsRefFrom(component, ref, owner);
+ }
+ }
+
+ ReactRef.attachRefs = function(instance, element) {
+ var ref = element.ref;
+ if (ref != null) {
+ attachRef(ref, instance, element._owner);
+ }
+ };
+
+ ReactRef.shouldUpdateRefs = function(prevElement, nextElement) {
+ // If either the owner or a `ref` has changed, make sure the newest owner
+ // has stored a reference to `this`, and the previous owner (if different)
+ // has forgotten the reference to `this`. We use the element instead
+ // of the public this.props because the post processing cannot determine
+ // a ref. The ref conceptually lives on the element.
+
+ // TODO: Should this even be possible? The owner cannot change because
+ // it's forbidden by shouldUpdateReactComponent. The ref can change
+ // if you swap the keys of but not the refs. Reconsider where this check
+ // is made. It probably belongs where the key checking and
+ // instantiateReactComponent is done.
+
+ return (
+ nextElement._owner !== prevElement._owner ||
+ nextElement.ref !== prevElement.ref
+ );
+ };
+
+ ReactRef.detachRefs = function(instance, element) {
+ var ref = element.ref;
+ if (ref != null) {
+ detachRef(ref, instance, element._owner);
+ }
+ };
+
+ module.exports = ReactRef;
+
+
+/***/ },
+/* 51 */
+/***/ function(module, exports, __webpack_require__) {
+
+ /* WEBPACK VAR INJECTION */(function(process) {/**
+ * Copyright 2013-2015, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ *
+ * @providesModule ReactOwner
+ */
+
+ 'use strict';
+
+ var invariant = __webpack_require__(27);
+
+ /**
+ * ReactOwners are capable of storing references to owned components.
+ *
+ * All components are capable of //being// referenced by owner components, but
+ * only ReactOwner components are capable of //referencing// owned components.
+ * The named reference is known as a "ref".
+ *
+ * Refs are available when mounted and updated during reconciliation.
+ *
+ * var MyComponent = React.createClass({
+ * render: function() {
+ * return (
+ *
+ *
+ * );
+ * },
+ * handleClick: function() {
+ * this.refs.custom.handleClick();
+ * },
+ * componentDidMount: function() {
+ * this.refs.custom.initialize();
+ * }
+ * });
+ *
+ * Refs should rarely be used. When refs are used, they should only be done to
+ * control data that is not handled by React's data flow.
+ *
+ * @class ReactOwner
+ */
+ var ReactOwner = {
+
+ /**
+ * @param {?object} object
+ * @return {boolean} True if `object` is a valid owner.
+ * @final
+ */
+ isValidOwner: function(object) {
+ return !!(
+ (object &&
+ typeof object.attachRef === 'function' && typeof object.detachRef === 'function')
+ );
+ },
+
+ /**
+ * Adds a component by ref to an owner component.
+ *
+ * @param {ReactComponent} component Component to reference.
+ * @param {string} ref Name by which to refer to the component.
+ * @param {ReactOwner} owner Component on which to record the ref.
+ * @final
+ * @internal
+ */
+ addComponentAsRefTo: function(component, ref, owner) {
+ ("production" !== process.env.NODE_ENV ? invariant(
+ ReactOwner.isValidOwner(owner),
+ 'addComponentAsRefTo(...): Only a ReactOwner can have refs. This ' +
+ 'usually means that you\'re trying to add a ref to a component that ' +
+ 'doesn\'t have an owner (that is, was not created inside of another ' +
+ 'component\'s `render` method). Try rendering this component inside of ' +
+ 'a new top-level component which will hold the ref.'
+ ) : invariant(ReactOwner.isValidOwner(owner)));
+ owner.attachRef(ref, component);
+ },
+
+ /**
+ * Removes a component by ref from an owner component.
+ *
+ * @param {ReactComponent} component Component to dereference.
+ * @param {string} ref Name of the ref to remove.
+ * @param {ReactOwner} owner Component on which the ref is recorded.
+ * @final
+ * @internal
+ */
+ removeComponentAsRefFrom: function(component, ref, owner) {
+ ("production" !== process.env.NODE_ENV ? invariant(
+ ReactOwner.isValidOwner(owner),
+ 'removeComponentAsRefFrom(...): Only a ReactOwner can have refs. This ' +
+ 'usually means that you\'re trying to remove a ref to a component that ' +
+ 'doesn\'t have an owner (that is, was not created inside of another ' +
+ 'component\'s `render` method). Try rendering this component inside of ' +
+ 'a new top-level component which will hold the ref.'
+ ) : invariant(ReactOwner.isValidOwner(owner)));
+ // Check that `component` is still the current ref because we do not want to
+ // detach the ref if another component stole it.
+ if (owner.getPublicInstance().refs[ref] === component.getPublicInstance()) {
+ owner.detachRef(ref);
+ }
+ }
+
+ };
+
+ module.exports = ReactOwner;
+
+ /* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(23)))
+
+/***/ },
+/* 52 */
+/***/ function(module, exports, __webpack_require__) {
+
+ /* WEBPACK VAR INJECTION */(function(process) {/**
+ * Copyright 2014-2015, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ *
+ * @providesModule ReactElementValidator
+ */
+
+ /**
+ * ReactElementValidator provides a wrapper around a element factory
+ * which validates the props passed to the element. This is intended to be
+ * used only in DEV and could be replaced by a static type checker for languages
+ * that support it.
+ */
+
+ 'use strict';
+
+ var ReactElement = __webpack_require__(31);
+ var ReactFragment = __webpack_require__(30);
+ var ReactPropTypeLocations = __webpack_require__(53);
+ var ReactPropTypeLocationNames = __webpack_require__(54);
+ var ReactCurrentOwner = __webpack_require__(37);
+ var ReactNativeComponent = __webpack_require__(55);
+
+ var getIteratorFn = __webpack_require__(41);
+ var invariant = __webpack_require__(27);
+ var warning = __webpack_require__(35);
+
+ function getDeclarationErrorAddendum() {
+ if (ReactCurrentOwner.current) {
+ var name = ReactCurrentOwner.current.getName();
+ if (name) {
+ return ' Check the render method of `' + name + '`.';
+ }
+ }
+ return '';
+ }
+
+ /**
+ * Warn if there's no key explicitly set on dynamic arrays of children or
+ * object keys are not valid. This allows us to keep track of children between
+ * updates.
+ */
+ var ownerHasKeyUseWarning = {};
+
+ var loggedTypeFailures = {};
+
+ var NUMERIC_PROPERTY_REGEX = /^\d+$/;
+
+ /**
+ * Gets the instance's name for use in warnings.
+ *
+ * @internal
+ * @return {?string} Display name or undefined
+ */
+ function getName(instance) {
+ var publicInstance = instance && instance.getPublicInstance();
+ if (!publicInstance) {
+ return undefined;
+ }
+ var constructor = publicInstance.constructor;
+ if (!constructor) {
+ return undefined;
+ }
+ return constructor.displayName || constructor.name || undefined;
+ }
+
+ /**
+ * Gets the current owner's displayName for use in warnings.
+ *
+ * @internal
+ * @return {?string} Display name or undefined
+ */
+ function getCurrentOwnerDisplayName() {
+ var current = ReactCurrentOwner.current;
+ return (
+ current && getName(current) || undefined
+ );
+ }
+
+ /**
+ * Warn if the element doesn't have an explicit key assigned to it.
+ * This element is in an array. The array could grow and shrink or be
+ * reordered. All children that haven't already been validated are required to
+ * have a "key" property assigned to it.
+ *
+ * @internal
+ * @param {ReactElement} element Element that requires a key.
+ * @param {*} parentType element's parent's type.
+ */
+ function validateExplicitKey(element, parentType) {
+ if (element._store.validated || element.key != null) {
+ return;
+ }
+ element._store.validated = true;
+
+ warnAndMonitorForKeyUse(
+ 'Each child in an array or iterator should have a unique "key" prop.',
+ element,
+ parentType
+ );
+ }
+
+ /**
+ * Warn if the key is being defined as an object property but has an incorrect
+ * value.
+ *
+ * @internal
+ * @param {string} name Property name of the key.
+ * @param {ReactElement} element Component that requires a key.
+ * @param {*} parentType element's parent's type.
+ */
+ function validatePropertyKey(name, element, parentType) {
+ if (!NUMERIC_PROPERTY_REGEX.test(name)) {
+ return;
+ }
+ warnAndMonitorForKeyUse(
+ 'Child objects should have non-numeric keys so ordering is preserved.',
+ element,
+ parentType
+ );
+ }
+
+ /**
+ * Shared warning and monitoring code for the key warnings.
+ *
+ * @internal
+ * @param {string} message The base warning that gets output.
+ * @param {ReactElement} element Component that requires a key.
+ * @param {*} parentType element's parent's type.
+ */
+ function warnAndMonitorForKeyUse(message, element, parentType) {
+ var ownerName = getCurrentOwnerDisplayName();
+ var parentName = typeof parentType === 'string' ?
+ parentType : parentType.displayName || parentType.name;
+
+ var useName = ownerName || parentName;
+ var memoizer = ownerHasKeyUseWarning[message] || (
+ (ownerHasKeyUseWarning[message] = {})
+ );
+ if (memoizer.hasOwnProperty(useName)) {
+ return;
+ }
+ memoizer[useName] = true;
+
+ var parentOrOwnerAddendum =
+ ownerName ? (" Check the render method of " + ownerName + ".") :
+ parentName ? (" Check the React.render call using <" + parentName + ">.") :
+ '';
+
+ // Usually the current owner is the offender, but if it accepts children as a
+ // property, it may be the creator of the child that's responsible for
+ // assigning it a key.
+ var childOwnerAddendum = '';
+ if (element &&
+ element._owner &&
+ element._owner !== ReactCurrentOwner.current) {
+ // Name of the component that originally created this child.
+ var childOwnerName = getName(element._owner);
+
+ childOwnerAddendum = (" It was passed a child from " + childOwnerName + ".");
+ }
+
+ ("production" !== process.env.NODE_ENV ? warning(
+ false,
+ message + '%s%s See https://fb.me/react-warning-keys for more information.',
+ parentOrOwnerAddendum,
+ childOwnerAddendum
+ ) : null);
+ }
+
+ /**
+ * Ensure that every element either is passed in a static location, in an
+ * array with an explicit keys property defined, or in an object literal
+ * with valid key property.
+ *
+ * @internal
+ * @param {ReactNode} node Statically passed child of any type.
+ * @param {*} parentType node's parent's type.
+ */
+ function validateChildKeys(node, parentType) {
+ if (Array.isArray(node)) {
+ for (var i = 0; i < node.length; i++) {
+ var child = node[i];
+ if (ReactElement.isValidElement(child)) {
+ validateExplicitKey(child, parentType);
+ }
+ }
+ } else if (ReactElement.isValidElement(node)) {
+ // This element was passed in a valid location.
+ node._store.validated = true;
+ } else if (node) {
+ var iteratorFn = getIteratorFn(node);
+ // Entry iterators provide implicit keys.
+ if (iteratorFn) {
+ if (iteratorFn !== node.entries) {
+ var iterator = iteratorFn.call(node);
+ var step;
+ while (!(step = iterator.next()).done) {
+ if (ReactElement.isValidElement(step.value)) {
+ validateExplicitKey(step.value, parentType);
+ }
+ }
+ }
+ } else if (typeof node === 'object') {
+ var fragment = ReactFragment.extractIfFragment(node);
+ for (var key in fragment) {
+ if (fragment.hasOwnProperty(key)) {
+ validatePropertyKey(key, fragment[key], parentType);
+ }
+ }
+ }
+ }
+ }
+
+ /**
+ * Assert that the props are valid
+ *
+ * @param {string} componentName Name of the component for error messages.
+ * @param {object} propTypes Map of prop name to a ReactPropType
+ * @param {object} props
+ * @param {string} location e.g. "prop", "context", "child context"
+ * @private
+ */
+ function checkPropTypes(componentName, propTypes, props, location) {
+ for (var propName in propTypes) {
+ if (propTypes.hasOwnProperty(propName)) {
+ var error;
+ // Prop type validation may throw. In case they do, we don't want to
+ // fail the render phase where it didn't fail before. So we log it.
+ // After these have been cleaned up, we'll let them throw.
+ try {
+ // This is intentionally an invariant that gets caught. It's the same
+ // behavior as without this statement except with a better message.
+ ("production" !== process.env.NODE_ENV ? invariant(
+ typeof propTypes[propName] === 'function',
+ '%s: %s type `%s` is invalid; it must be a function, usually from ' +
+ 'React.PropTypes.',
+ componentName || 'React class',
+ ReactPropTypeLocationNames[location],
+ propName
+ ) : invariant(typeof propTypes[propName] === 'function'));
+ error = propTypes[propName](props, propName, componentName, location);
+ } catch (ex) {
+ error = ex;
+ }
+ if (error instanceof Error && !(error.message in loggedTypeFailures)) {
+ // Only monitor this failure once because there tends to be a lot of the
+ // same error.
+ loggedTypeFailures[error.message] = true;
+
+ var addendum = getDeclarationErrorAddendum(this);
+ ("production" !== process.env.NODE_ENV ? warning(false, 'Failed propType: %s%s', error.message, addendum) : null);
+ }
+ }
+ }
+ }
+
+ var warnedPropsMutations = {};
+
+ /**
+ * Warn about mutating props when setting `propName` on `element`.
+ *
+ * @param {string} propName The string key within props that was set
+ * @param {ReactElement} element
+ */
+ function warnForPropsMutation(propName, element) {
+ var type = element.type;
+ var elementName = typeof type === 'string' ? type : type.displayName;
+ var ownerName = element._owner ?
+ element._owner.getPublicInstance().constructor.displayName : null;
+
+ var warningKey = propName + '|' + elementName + '|' + ownerName;
+ if (warnedPropsMutations.hasOwnProperty(warningKey)) {
+ return;
+ }
+ warnedPropsMutations[warningKey] = true;
+
+ var elementInfo = '';
+ if (elementName) {
+ elementInfo = ' <' + elementName + ' />';
+ }
+ var ownerInfo = '';
+ if (ownerName) {
+ ownerInfo = ' The element was created by ' + ownerName + '.';
+ }
+
+ ("production" !== process.env.NODE_ENV ? warning(
+ false,
+ 'Don\'t set .props.%s of the React component%s. Instead, specify the ' +
+ 'correct value when initially creating the element or use ' +
+ 'React.cloneElement to make a new element with updated props.%s',
+ propName,
+ elementInfo,
+ ownerInfo
+ ) : null);
+ }
+
+ // Inline Object.is polyfill
+ function is(a, b) {
+ if (a !== a) {
+ // NaN
+ return b !== b;
+ }
+ if (a === 0 && b === 0) {
+ // +-0
+ return 1 / a === 1 / b;
+ }
+ return a === b;
+ }
+
+ /**
+ * Given an element, check if its props have been mutated since element
+ * creation (or the last call to this function). In particular, check if any
+ * new props have been added, which we can't directly catch by defining warning
+ * properties on the props object.
+ *
+ * @param {ReactElement} element
+ */
+ function checkAndWarnForMutatedProps(element) {
+ if (!element._store) {
+ // Element was created using `new ReactElement` directly or with
+ // `ReactElement.createElement`; skip mutation checking
+ return;
+ }
+
+ var originalProps = element._store.originalProps;
+ var props = element.props;
+
+ for (var propName in props) {
+ if (props.hasOwnProperty(propName)) {
+ if (!originalProps.hasOwnProperty(propName) ||
+ !is(originalProps[propName], props[propName])) {
+ warnForPropsMutation(propName, element);
+
+ // Copy over the new value so that the two props objects match again
+ originalProps[propName] = props[propName];
+ }
+ }
+ }
+ }
+
+ /**
+ * Given an element, validate that its props follow the propTypes definition,
+ * provided by the type.
+ *
+ * @param {ReactElement} element
+ */
+ function validatePropTypes(element) {
+ if (element.type == null) {
+ // This has already warned. Don't throw.
+ return;
+ }
+ // Extract the component class from the element. Converts string types
+ // to a composite class which may have propTypes.
+ // TODO: Validating a string's propTypes is not decoupled from the
+ // rendering target which is problematic.
+ var componentClass = ReactNativeComponent.getComponentClassForElement(
+ element
+ );
+ var name = componentClass.displayName || componentClass.name;
+ if (componentClass.propTypes) {
+ checkPropTypes(
+ name,
+ componentClass.propTypes,
+ element.props,
+ ReactPropTypeLocations.prop
+ );
+ }
+ if (typeof componentClass.getDefaultProps === 'function') {
+ ("production" !== process.env.NODE_ENV ? warning(
+ componentClass.getDefaultProps.isReactClassApproved,
+ 'getDefaultProps is only used on classic React.createClass ' +
+ 'definitions. Use a static property named `defaultProps` instead.'
+ ) : null);
+ }
+ }
+
+ var ReactElementValidator = {
+
+ checkAndWarnForMutatedProps: checkAndWarnForMutatedProps,
+
+ createElement: function(type, props, children) {
+ // We warn in this case but don't throw. We expect the element creation to
+ // succeed and there will likely be errors in render.
+ ("production" !== process.env.NODE_ENV ? warning(
+ type != null,
+ 'React.createElement: type should not be null or undefined. It should ' +
+ 'be a string (for DOM elements) or a ReactClass (for composite ' +
+ 'components).'
+ ) : null);
+
+ var element = ReactElement.createElement.apply(this, arguments);
+
+ // The result can be nullish if a mock or a custom function is used.
+ // TODO: Drop this when these are no longer allowed as the type argument.
+ if (element == null) {
+ return element;
+ }
+
+ for (var i = 2; i < arguments.length; i++) {
+ validateChildKeys(arguments[i], type);
+ }
+
+ validatePropTypes(element);
+
+ return element;
+ },
+
+ createFactory: function(type) {
+ var validatedFactory = ReactElementValidator.createElement.bind(
+ null,
+ type
+ );
+ // Legacy hook TODO: Warn if this is accessed
+ validatedFactory.type = type;
+
+ if ("production" !== process.env.NODE_ENV) {
+ try {
+ Object.defineProperty(
+ validatedFactory,
+ 'type',
+ {
+ enumerable: false,
+ get: function() {
+ ("production" !== process.env.NODE_ENV ? warning(
+ false,
+ 'Factory.type is deprecated. Access the class directly ' +
+ 'before passing it to createFactory.'
+ ) : null);
+ Object.defineProperty(this, 'type', {
+ value: type
+ });
+ return type;
+ }
+ }
+ );
+ } catch (x) {
+ // IE will fail on defineProperty (es5-shim/sham too)
+ }
+ }
+
+
+ return validatedFactory;
+ },
+
+ cloneElement: function(element, props, children) {
+ var newElement = ReactElement.cloneElement.apply(this, arguments);
+ for (var i = 2; i < arguments.length; i++) {
+ validateChildKeys(arguments[i], newElement.type);
+ }
+ validatePropTypes(newElement);
+ return newElement;
+ }
+
+ };
+
+ module.exports = ReactElementValidator;
+
+ /* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(23)))
+
+/***/ },
+/* 53 */
+/***/ function(module, exports, __webpack_require__) {
+
+ /**
+ * Copyright 2013-2015, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ *
+ * @providesModule ReactPropTypeLocations
+ */
+
+ 'use strict';
+
+ var keyMirror = __webpack_require__(26);
+
+ var ReactPropTypeLocations = keyMirror({
+ prop: null,
+ context: null,
+ childContext: null
+ });
+
+ module.exports = ReactPropTypeLocations;
+
+
+/***/ },
+/* 54 */
+/***/ function(module, exports, __webpack_require__) {
+
+ /* WEBPACK VAR INJECTION */(function(process) {/**
+ * Copyright 2013-2015, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ *
+ * @providesModule ReactPropTypeLocationNames
+ */
+
+ 'use strict';
+
+ var ReactPropTypeLocationNames = {};
+
+ if ("production" !== process.env.NODE_ENV) {
+ ReactPropTypeLocationNames = {
+ prop: 'prop',
+ context: 'context',
+ childContext: 'child context'
+ };
+ }
+
+ module.exports = ReactPropTypeLocationNames;
+
+ /* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(23)))
+
+/***/ },
+/* 55 */
+/***/ function(module, exports, __webpack_require__) {
+
+ /* WEBPACK VAR INJECTION */(function(process) {/**
+ * Copyright 2014-2015, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ *
+ * @providesModule ReactNativeComponent
+ */
+
+ 'use strict';
+
+ var assign = __webpack_require__(33);
+ var invariant = __webpack_require__(27);
+
+ var autoGenerateWrapperClass = null;
+ var genericComponentClass = null;
+ // This registry keeps track of wrapper classes around native tags
+ var tagToComponentClass = {};
+ var textComponentClass = null;
+
+ var ReactNativeComponentInjection = {
+ // This accepts a class that receives the tag string. This is a catch all
+ // that can render any kind of tag.
+ injectGenericComponentClass: function(componentClass) {
+ genericComponentClass = componentClass;
+ },
+ // This accepts a text component class that takes the text string to be
+ // rendered as props.
+ injectTextComponentClass: function(componentClass) {
+ textComponentClass = componentClass;
+ },
+ // This accepts a keyed object with classes as values. Each key represents a
+ // tag. That particular tag will use this class instead of the generic one.
+ injectComponentClasses: function(componentClasses) {
+ assign(tagToComponentClass, componentClasses);
+ },
+ // Temporary hack since we expect DOM refs to behave like composites,
+ // for this release.
+ injectAutoWrapper: function(wrapperFactory) {
+ autoGenerateWrapperClass = wrapperFactory;
+ }
+ };
+
+ /**
+ * Get a composite component wrapper class for a specific tag.
+ *
+ * @param {ReactElement} element The tag for which to get the class.
+ * @return {function} The React class constructor function.
+ */
+ function getComponentClassForElement(element) {
+ if (typeof element.type === 'function') {
+ return element.type;
+ }
+ var tag = element.type;
+ var componentClass = tagToComponentClass[tag];
+ if (componentClass == null) {
+ tagToComponentClass[tag] = componentClass = autoGenerateWrapperClass(tag);
+ }
+ return componentClass;
+ }
+
+ /**
+ * Get a native internal component class for a specific tag.
+ *
+ * @param {ReactElement} element The element to create.
+ * @return {function} The internal class constructor function.
+ */
+ function createInternalComponent(element) {
+ ("production" !== process.env.NODE_ENV ? invariant(
+ genericComponentClass,
+ 'There is no registered component for the tag %s',
+ element.type
+ ) : invariant(genericComponentClass));
+ return new genericComponentClass(element.type, element.props);
+ }
+
+ /**
+ * @param {ReactText} text
+ * @return {ReactComponent}
+ */
+ function createInstanceForText(text) {
+ return new textComponentClass(text);
+ }
+
+ /**
+ * @param {ReactComponent} component
+ * @return {boolean}
+ */
+ function isTextComponent(component) {
+ return component instanceof textComponentClass;
+ }
+
+ var ReactNativeComponent = {
+ getComponentClassForElement: getComponentClassForElement,
+ createInternalComponent: createInternalComponent,
+ createInstanceForText: createInstanceForText,
+ isTextComponent: isTextComponent,
+ injection: ReactNativeComponentInjection
+ };
+
+ module.exports = ReactNativeComponent;
+
+ /* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(23)))
+
+/***/ },
+/* 56 */
+/***/ function(module, exports, __webpack_require__) {
+
+ /* WEBPACK VAR INJECTION */(function(process) {/**
+ * Copyright 2013-2015, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ *
+ * @providesModule Transaction
+ */
+
+ 'use strict';
+
+ var invariant = __webpack_require__(27);
+
+ /**
+ * `Transaction` creates a black box that is able to wrap any method such that
+ * certain invariants are maintained before and after the method is invoked
+ * (Even if an exception is thrown while invoking the wrapped method). Whoever
+ * instantiates a transaction can provide enforcers of the invariants at
+ * creation time. The `Transaction` class itself will supply one additional
+ * automatic invariant for you - the invariant that any transaction instance
+ * should not be run while it is already being run. You would typically create a
+ * single instance of a `Transaction` for reuse multiple times, that potentially
+ * is used to wrap several different methods. Wrappers are extremely simple -
+ * they only require implementing two methods.
+ *
+ *
+ * wrappers (injected at creation time)
+ * + +
+ * | |
+ * +-----------------|--------|--------------+
+ * | v | |
+ * | +---------------+ | |
+ * | +--| wrapper1 |---|----+ |
+ * | | +---------------+ v | |
+ * | | +-------------+ | |
+ * | | +----| wrapper2 |--------+ |
+ * | | | +-------------+ | | |
+ * | | | | | |
+ * | v v v v | wrapper
+ * | +---+ +---+ +---------+ +---+ +---+ | invariants
+ * perform(anyMethod) | | | | | | | | | | | | maintained
+ * +----------------->|-|---|-|---|-->|anyMethod|---|---|-|---|-|-------->
+ * | | | | | | | | | | | |
+ * | | | | | | | | | | | |
+ * | | | | | | | | | | | |
+ * | +---+ +---+ +---------+ +---+ +---+ |
+ * | initialize close |
+ * +-----------------------------------------+
+ *
+ *
+ * Use cases:
+ * - Preserving the input selection ranges before/after reconciliation.
+ * Restoring selection even in the event of an unexpected error.
+ * - Deactivating events while rearranging the DOM, preventing blurs/focuses,
+ * while guaranteeing that afterwards, the event system is reactivated.
+ * - Flushing a queue of collected DOM mutations to the main UI thread after a
+ * reconciliation takes place in a worker thread.
+ * - Invoking any collected `componentDidUpdate` callbacks after rendering new
+ * content.
+ * - (Future use case): Wrapping particular flushes of the `ReactWorker` queue
+ * to preserve the `scrollTop` (an automatic scroll aware DOM).
+ * - (Future use case): Layout calculations before and after DOM updates.
+ *
+ * Transactional plugin API:
+ * - A module that has an `initialize` method that returns any precomputation.
+ * - and a `close` method that accepts the precomputation. `close` is invoked
+ * when the wrapped process is completed, or has failed.
+ *
+ * @param {Array} transactionWrapper Wrapper modules
+ * that implement `initialize` and `close`.
+ * @return {Transaction} Single transaction for reuse in thread.
+ *
+ * @class Transaction
+ */
+ var Mixin = {
+ /**
+ * Sets up this instance so that it is prepared for collecting metrics. Does
+ * so such that this setup method may be used on an instance that is already
+ * initialized, in a way that does not consume additional memory upon reuse.
+ * That can be useful if you decide to make your subclass of this mixin a
+ * "PooledClass".
+ */
+ reinitializeTransaction: function() {
+ this.transactionWrappers = this.getTransactionWrappers();
+ if (!this.wrapperInitData) {
+ this.wrapperInitData = [];
+ } else {
+ this.wrapperInitData.length = 0;
+ }
+ this._isInTransaction = false;
+ },
+
+ _isInTransaction: false,
+
+ /**
+ * @abstract
+ * @return {Array} Array of transaction wrappers.
+ */
+ getTransactionWrappers: null,
+
+ isInTransaction: function() {
+ return !!this._isInTransaction;
+ },
+
+ /**
+ * Executes the function within a safety window. Use this for the top level
+ * methods that result in large amounts of computation/mutations that would
+ * need to be safety checked.
+ *
+ * @param {function} method Member of scope to call.
+ * @param {Object} scope Scope to invoke from.
+ * @param {Object?=} args... Arguments to pass to the method (optional).
+ * Helps prevent need to bind in many cases.
+ * @return Return value from `method`.
+ */
+ perform: function(method, scope, a, b, c, d, e, f) {
+ ("production" !== process.env.NODE_ENV ? invariant(
+ !this.isInTransaction(),
+ 'Transaction.perform(...): Cannot initialize a transaction when there ' +
+ 'is already an outstanding transaction.'
+ ) : invariant(!this.isInTransaction()));
+ var errorThrown;
+ var ret;
+ try {
+ this._isInTransaction = true;
+ // Catching errors makes debugging more difficult, so we start with
+ // errorThrown set to true before setting it to false after calling
+ // close -- if it's still set to true in the finally block, it means
+ // one of these calls threw.
+ errorThrown = true;
+ this.initializeAll(0);
+ ret = method.call(scope, a, b, c, d, e, f);
+ errorThrown = false;
+ } finally {
+ try {
+ if (errorThrown) {
+ // If `method` throws, prefer to show that stack trace over any thrown
+ // by invoking `closeAll`.
+ try {
+ this.closeAll(0);
+ } catch (err) {
+ }
+ } else {
+ // Since `method` didn't throw, we don't want to silence the exception
+ // here.
+ this.closeAll(0);
+ }
+ } finally {
+ this._isInTransaction = false;
+ }
+ }
+ return ret;
+ },
+
+ initializeAll: function(startIndex) {
+ var transactionWrappers = this.transactionWrappers;
+ for (var i = startIndex; i < transactionWrappers.length; i++) {
+ var wrapper = transactionWrappers[i];
+ try {
+ // Catching errors makes debugging more difficult, so we start with the
+ // OBSERVED_ERROR state before overwriting it with the real return value
+ // of initialize -- if it's still set to OBSERVED_ERROR in the finally
+ // block, it means wrapper.initialize threw.
+ this.wrapperInitData[i] = Transaction.OBSERVED_ERROR;
+ this.wrapperInitData[i] = wrapper.initialize ?
+ wrapper.initialize.call(this) :
+ null;
+ } finally {
+ if (this.wrapperInitData[i] === Transaction.OBSERVED_ERROR) {
+ // The initializer for wrapper i threw an error; initialize the
+ // remaining wrappers but silence any exceptions from them to ensure
+ // that the first error is the one to bubble up.
+ try {
+ this.initializeAll(i + 1);
+ } catch (err) {
+ }
+ }
+ }
+ }
+ },
+
+ /**
+ * Invokes each of `this.transactionWrappers.close[i]` functions, passing into
+ * them the respective return values of `this.transactionWrappers.init[i]`
+ * (`close`rs that correspond to initializers that failed will not be
+ * invoked).
+ */
+ closeAll: function(startIndex) {
+ ("production" !== process.env.NODE_ENV ? invariant(
+ this.isInTransaction(),
+ 'Transaction.closeAll(): Cannot close transaction when none are open.'
+ ) : invariant(this.isInTransaction()));
+ var transactionWrappers = this.transactionWrappers;
+ for (var i = startIndex; i < transactionWrappers.length; i++) {
+ var wrapper = transactionWrappers[i];
+ var initData = this.wrapperInitData[i];
+ var errorThrown;
+ try {
+ // Catching errors makes debugging more difficult, so we start with
+ // errorThrown set to true before setting it to false after calling
+ // close -- if it's still set to true in the finally block, it means
+ // wrapper.close threw.
+ errorThrown = true;
+ if (initData !== Transaction.OBSERVED_ERROR && wrapper.close) {
+ wrapper.close.call(this, initData);
+ }
+ errorThrown = false;
+ } finally {
+ if (errorThrown) {
+ // The closer for wrapper i threw an error; close the remaining
+ // wrappers but silence any exceptions from them to ensure that the
+ // first error is the one to bubble up.
+ try {
+ this.closeAll(i + 1);
+ } catch (e) {
+ }
+ }
+ }
+ }
+ this.wrapperInitData.length = 0;
+ }
+ };
+
+ var Transaction = {
+
+ Mixin: Mixin,
+
+ /**
+ * Token to look for to determine if an error occured.
+ */
+ OBSERVED_ERROR: {}
+
+ };
+
+ module.exports = Transaction;
+
+ /* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(23)))
+
+/***/ },
+/* 57 */
+/***/ function(module, exports, __webpack_require__) {
+
+ /* WEBPACK VAR INJECTION */(function(process) {/**
+ * Copyright 2013-2015, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ *
+ * @providesModule ReactClass
+ */
+
+ 'use strict';
+
+ var ReactComponent = __webpack_require__(42);
+ var ReactCurrentOwner = __webpack_require__(37);
+ var ReactElement = __webpack_require__(31);
+ var ReactErrorUtils = __webpack_require__(58);
+ var ReactInstanceMap = __webpack_require__(45);
+ var ReactLifeCycle = __webpack_require__(44);
+ var ReactPropTypeLocations = __webpack_require__(53);
+ var ReactPropTypeLocationNames = __webpack_require__(54);
+ var ReactUpdateQueue = __webpack_require__(43);
+
+ var assign = __webpack_require__(33);
+ var invariant = __webpack_require__(27);
+ var keyMirror = __webpack_require__(26);
+ var keyOf = __webpack_require__(59);
+ var warning = __webpack_require__(35);
+
+ var MIXINS_KEY = keyOf({mixins: null});
+
+ /**
+ * Policies that describe methods in `ReactClassInterface`.
+ */
+ var SpecPolicy = keyMirror({
+ /**
+ * These methods may be defined only once by the class specification or mixin.
+ */
+ DEFINE_ONCE: null,
+ /**
+ * These methods may be defined by both the class specification and mixins.
+ * Subsequent definitions will be chained. These methods must return void.
+ */
+ DEFINE_MANY: null,
+ /**
+ * These methods are overriding the base class.
+ */
+ OVERRIDE_BASE: null,
+ /**
+ * These methods are similar to DEFINE_MANY, except we assume they return
+ * objects. We try to merge the keys of the return values of all the mixed in
+ * functions. If there is a key conflict we throw.
+ */
+ DEFINE_MANY_MERGED: null
+ });
+
+
+ var injectedMixins = [];
+
+ /**
+ * Composite components are higher-level components that compose other composite
+ * or native components.
+ *
+ * To create a new type of `ReactClass`, pass a specification of
+ * your new class to `React.createClass`. The only requirement of your class
+ * specification is that you implement a `render` method.
+ *
+ * var MyComponent = React.createClass({
+ * render: function() {
+ * return Hello World
;
+ * }
+ * });
+ *
+ * The class specification supports a specific protocol of methods that have
+ * special meaning (e.g. `render`). See `ReactClassInterface` for
+ * more the comprehensive protocol. Any other properties and methods in the
+ * class specification will available on the prototype.
+ *
+ * @interface ReactClassInterface
+ * @internal
+ */
+ var ReactClassInterface = {
+
+ /**
+ * An array of Mixin objects to include when defining your component.
+ *
+ * @type {array}
+ * @optional
+ */
+ mixins: SpecPolicy.DEFINE_MANY,
+
+ /**
+ * An object containing properties and methods that should be defined on
+ * the component's constructor instead of its prototype (static methods).
+ *
+ * @type {object}
+ * @optional
+ */
+ statics: SpecPolicy.DEFINE_MANY,
+
+ /**
+ * Definition of prop types for this component.
+ *
+ * @type {object}
+ * @optional
+ */
+ propTypes: SpecPolicy.DEFINE_MANY,
+
+ /**
+ * Definition of context types for this component.
+ *
+ * @type {object}
+ * @optional
+ */
+ contextTypes: SpecPolicy.DEFINE_MANY,
+
+ /**
+ * Definition of context types this component sets for its children.
+ *
+ * @type {object}
+ * @optional
+ */
+ childContextTypes: SpecPolicy.DEFINE_MANY,
+
+ // ==== Definition methods ====
+
+ /**
+ * Invoked when the component is mounted. Values in the mapping will be set on
+ * `this.props` if that prop is not specified (i.e. using an `in` check).
+ *
+ * This method is invoked before `getInitialState` and therefore cannot rely
+ * on `this.state` or use `this.setState`.
+ *
+ * @return {object}
+ * @optional
+ */
+ getDefaultProps: SpecPolicy.DEFINE_MANY_MERGED,
+
+ /**
+ * Invoked once before the component is mounted. The return value will be used
+ * as the initial value of `this.state`.
+ *
+ * getInitialState: function() {
+ * return {
+ * isOn: false,
+ * fooBaz: new BazFoo()
+ * }
+ * }
+ *
+ * @return {object}
+ * @optional
+ */
+ getInitialState: SpecPolicy.DEFINE_MANY_MERGED,
+
+ /**
+ * @return {object}
+ * @optional
+ */
+ getChildContext: SpecPolicy.DEFINE_MANY_MERGED,
+
+ /**
+ * Uses props from `this.props` and state from `this.state` to render the
+ * structure of the component.
+ *
+ * No guarantees are made about when or how often this method is invoked, so
+ * it must not have side effects.
+ *
+ * render: function() {
+ * var name = this.props.name;
+ * return Hello, {name}!
;
+ * }
+ *
+ * @return {ReactComponent}
+ * @nosideeffects
+ * @required
+ */
+ render: SpecPolicy.DEFINE_ONCE,
+
+
+
+ // ==== Delegate methods ====
+
+ /**
+ * Invoked when the component is initially created and about to be mounted.
+ * This may have side effects, but any external subscriptions or data created
+ * by this method must be cleaned up in `componentWillUnmount`.
+ *
+ * @optional
+ */
+ componentWillMount: SpecPolicy.DEFINE_MANY,
+
+ /**
+ * Invoked when the component has been mounted and has a DOM representation.
+ * However, there is no guarantee that the DOM node is in the document.
+ *
+ * Use this as an opportunity to operate on the DOM when the component has
+ * been mounted (initialized and rendered) for the first time.
+ *
+ * @param {DOMElement} rootNode DOM element representing the component.
+ * @optional
+ */
+ componentDidMount: SpecPolicy.DEFINE_MANY,
+
+ /**
+ * Invoked before the component receives new props.
+ *
+ * Use this as an opportunity to react to a prop transition by updating the
+ * state using `this.setState`. Current props are accessed via `this.props`.
+ *
+ * componentWillReceiveProps: function(nextProps, nextContext) {
+ * this.setState({
+ * likesIncreasing: nextProps.likeCount > this.props.likeCount
+ * });
+ * }
+ *
+ * NOTE: There is no equivalent `componentWillReceiveState`. An incoming prop
+ * transition may cause a state change, but the opposite is not true. If you
+ * need it, you are probably looking for `componentWillUpdate`.
+ *
+ * @param {object} nextProps
+ * @optional
+ */
+ componentWillReceiveProps: SpecPolicy.DEFINE_MANY,
+
+ /**
+ * Invoked while deciding if the component should be updated as a result of
+ * receiving new props, state and/or context.
+ *
+ * Use this as an opportunity to `return false` when you're certain that the
+ * transition to the new props/state/context will not require a component
+ * update.
+ *
+ * shouldComponentUpdate: function(nextProps, nextState, nextContext) {
+ * return !equal(nextProps, this.props) ||
+ * !equal(nextState, this.state) ||
+ * !equal(nextContext, this.context);
+ * }
+ *
+ * @param {object} nextProps
+ * @param {?object} nextState
+ * @param {?object} nextContext
+ * @return {boolean} True if the component should update.
+ * @optional
+ */
+ shouldComponentUpdate: SpecPolicy.DEFINE_ONCE,
+
+ /**
+ * Invoked when the component is about to update due to a transition from
+ * `this.props`, `this.state` and `this.context` to `nextProps`, `nextState`
+ * and `nextContext`.
+ *
+ * Use this as an opportunity to perform preparation before an update occurs.
+ *
+ * NOTE: You **cannot** use `this.setState()` in this method.
+ *
+ * @param {object} nextProps
+ * @param {?object} nextState
+ * @param {?object} nextContext
+ * @param {ReactReconcileTransaction} transaction
+ * @optional
+ */
+ componentWillUpdate: SpecPolicy.DEFINE_MANY,
+
+ /**
+ * Invoked when the component's DOM representation has been updated.
+ *
+ * Use this as an opportunity to operate on the DOM when the component has
+ * been updated.
+ *
+ * @param {object} prevProps
+ * @param {?object} prevState
+ * @param {?object} prevContext
+ * @param {DOMElement} rootNode DOM element representing the component.
+ * @optional
+ */
+ componentDidUpdate: SpecPolicy.DEFINE_MANY,
+
+ /**
+ * Invoked when the component is about to be removed from its parent and have
+ * its DOM representation destroyed.
+ *
+ * Use this as an opportunity to deallocate any external resources.
+ *
+ * NOTE: There is no `componentDidUnmount` since your component will have been
+ * destroyed by that point.
+ *
+ * @optional
+ */
+ componentWillUnmount: SpecPolicy.DEFINE_MANY,
+
+
+
+ // ==== Advanced methods ====
+
+ /**
+ * Updates the component's currently mounted DOM representation.
+ *
+ * By default, this implements React's rendering and reconciliation algorithm.
+ * Sophisticated clients may wish to override this.
+ *
+ * @param {ReactReconcileTransaction} transaction
+ * @internal
+ * @overridable
+ */
+ updateComponent: SpecPolicy.OVERRIDE_BASE
+
+ };
+
+ /**
+ * Mapping from class specification keys to special processing functions.
+ *
+ * Although these are declared like instance properties in the specification
+ * when defining classes using `React.createClass`, they are actually static
+ * and are accessible on the constructor instead of the prototype. Despite
+ * being static, they must be defined outside of the "statics" key under
+ * which all other static methods are defined.
+ */
+ var RESERVED_SPEC_KEYS = {
+ displayName: function(Constructor, displayName) {
+ Constructor.displayName = displayName;
+ },
+ mixins: function(Constructor, mixins) {
+ if (mixins) {
+ for (var i = 0; i < mixins.length; i++) {
+ mixSpecIntoComponent(Constructor, mixins[i]);
+ }
+ }
+ },
+ childContextTypes: function(Constructor, childContextTypes) {
+ if ("production" !== process.env.NODE_ENV) {
+ validateTypeDef(
+ Constructor,
+ childContextTypes,
+ ReactPropTypeLocations.childContext
+ );
+ }
+ Constructor.childContextTypes = assign(
+ {},
+ Constructor.childContextTypes,
+ childContextTypes
+ );
+ },
+ contextTypes: function(Constructor, contextTypes) {
+ if ("production" !== process.env.NODE_ENV) {
+ validateTypeDef(
+ Constructor,
+ contextTypes,
+ ReactPropTypeLocations.context
+ );
+ }
+ Constructor.contextTypes = assign(
+ {},
+ Constructor.contextTypes,
+ contextTypes
+ );
+ },
+ /**
+ * Special case getDefaultProps which should move into statics but requires
+ * automatic merging.
+ */
+ getDefaultProps: function(Constructor, getDefaultProps) {
+ if (Constructor.getDefaultProps) {
+ Constructor.getDefaultProps = createMergedResultFunction(
+ Constructor.getDefaultProps,
+ getDefaultProps
+ );
+ } else {
+ Constructor.getDefaultProps = getDefaultProps;
+ }
+ },
+ propTypes: function(Constructor, propTypes) {
+ if ("production" !== process.env.NODE_ENV) {
+ validateTypeDef(
+ Constructor,
+ propTypes,
+ ReactPropTypeLocations.prop
+ );
+ }
+ Constructor.propTypes = assign(
+ {},
+ Constructor.propTypes,
+ propTypes
+ );
+ },
+ statics: function(Constructor, statics) {
+ mixStaticSpecIntoComponent(Constructor, statics);
+ }
+ };
+
+ function validateTypeDef(Constructor, typeDef, location) {
+ for (var propName in typeDef) {
+ if (typeDef.hasOwnProperty(propName)) {
+ // use a warning instead of an invariant so components
+ // don't show up in prod but not in __DEV__
+ ("production" !== process.env.NODE_ENV ? warning(
+ typeof typeDef[propName] === 'function',
+ '%s: %s type `%s` is invalid; it must be a function, usually from ' +
+ 'React.PropTypes.',
+ Constructor.displayName || 'ReactClass',
+ ReactPropTypeLocationNames[location],
+ propName
+ ) : null);
+ }
+ }
+ }
+
+ function validateMethodOverride(proto, name) {
+ var specPolicy = ReactClassInterface.hasOwnProperty(name) ?
+ ReactClassInterface[name] :
+ null;
+
+ // Disallow overriding of base class methods unless explicitly allowed.
+ if (ReactClassMixin.hasOwnProperty(name)) {
+ ("production" !== process.env.NODE_ENV ? invariant(
+ specPolicy === SpecPolicy.OVERRIDE_BASE,
+ 'ReactClassInterface: You are attempting to override ' +
+ '`%s` from your class specification. Ensure that your method names ' +
+ 'do not overlap with React methods.',
+ name
+ ) : invariant(specPolicy === SpecPolicy.OVERRIDE_BASE));
+ }
+
+ // Disallow defining methods more than once unless explicitly allowed.
+ if (proto.hasOwnProperty(name)) {
+ ("production" !== process.env.NODE_ENV ? invariant(
+ specPolicy === SpecPolicy.DEFINE_MANY ||
+ specPolicy === SpecPolicy.DEFINE_MANY_MERGED,
+ 'ReactClassInterface: You are attempting to define ' +
+ '`%s` on your component more than once. This conflict may be due ' +
+ 'to a mixin.',
+ name
+ ) : invariant(specPolicy === SpecPolicy.DEFINE_MANY ||
+ specPolicy === SpecPolicy.DEFINE_MANY_MERGED));
+ }
+ }
+
+ /**
+ * Mixin helper which handles policy validation and reserved
+ * specification keys when building React classses.
+ */
+ function mixSpecIntoComponent(Constructor, spec) {
+ if (!spec) {
+ return;
+ }
+
+ ("production" !== process.env.NODE_ENV ? invariant(
+ typeof spec !== 'function',
+ 'ReactClass: You\'re attempting to ' +
+ 'use a component class as a mixin. Instead, just use a regular object.'
+ ) : invariant(typeof spec !== 'function'));
+ ("production" !== process.env.NODE_ENV ? invariant(
+ !ReactElement.isValidElement(spec),
+ 'ReactClass: You\'re attempting to ' +
+ 'use a component as a mixin. Instead, just use a regular object.'
+ ) : invariant(!ReactElement.isValidElement(spec)));
+
+ var proto = Constructor.prototype;
+
+ // By handling mixins before any other properties, we ensure the same
+ // chaining order is applied to methods with DEFINE_MANY policy, whether
+ // mixins are listed before or after these methods in the spec.
+ if (spec.hasOwnProperty(MIXINS_KEY)) {
+ RESERVED_SPEC_KEYS.mixins(Constructor, spec.mixins);
+ }
+
+ for (var name in spec) {
+ if (!spec.hasOwnProperty(name)) {
+ continue;
+ }
+
+ if (name === MIXINS_KEY) {
+ // We have already handled mixins in a special case above
+ continue;
+ }
+
+ var property = spec[name];
+ validateMethodOverride(proto, name);
+
+ if (RESERVED_SPEC_KEYS.hasOwnProperty(name)) {
+ RESERVED_SPEC_KEYS[name](Constructor, property);
+ } else {
+ // Setup methods on prototype:
+ // The following member methods should not be automatically bound:
+ // 1. Expected ReactClass methods (in the "interface").
+ // 2. Overridden methods (that were mixed in).
+ var isReactClassMethod =
+ ReactClassInterface.hasOwnProperty(name);
+ var isAlreadyDefined = proto.hasOwnProperty(name);
+ var markedDontBind = property && property.__reactDontBind;
+ var isFunction = typeof property === 'function';
+ var shouldAutoBind =
+ isFunction &&
+ !isReactClassMethod &&
+ !isAlreadyDefined &&
+ !markedDontBind;
+
+ if (shouldAutoBind) {
+ if (!proto.__reactAutoBindMap) {
+ proto.__reactAutoBindMap = {};
+ }
+ proto.__reactAutoBindMap[name] = property;
+ proto[name] = property;
+ } else {
+ if (isAlreadyDefined) {
+ var specPolicy = ReactClassInterface[name];
+
+ // These cases should already be caught by validateMethodOverride
+ ("production" !== process.env.NODE_ENV ? invariant(
+ isReactClassMethod && (
+ (specPolicy === SpecPolicy.DEFINE_MANY_MERGED || specPolicy === SpecPolicy.DEFINE_MANY)
+ ),
+ 'ReactClass: Unexpected spec policy %s for key %s ' +
+ 'when mixing in component specs.',
+ specPolicy,
+ name
+ ) : invariant(isReactClassMethod && (
+ (specPolicy === SpecPolicy.DEFINE_MANY_MERGED || specPolicy === SpecPolicy.DEFINE_MANY)
+ )));
+
+ // For methods which are defined more than once, call the existing
+ // methods before calling the new property, merging if appropriate.
+ if (specPolicy === SpecPolicy.DEFINE_MANY_MERGED) {
+ proto[name] = createMergedResultFunction(proto[name], property);
+ } else if (specPolicy === SpecPolicy.DEFINE_MANY) {
+ proto[name] = createChainedFunction(proto[name], property);
+ }
+ } else {
+ proto[name] = property;
+ if ("production" !== process.env.NODE_ENV) {
+ // Add verbose displayName to the function, which helps when looking
+ // at profiling tools.
+ if (typeof property === 'function' && spec.displayName) {
+ proto[name].displayName = spec.displayName + '_' + name;
+ }
+ }
+ }
+ }
+ }
+ }
+ }
+
+ function mixStaticSpecIntoComponent(Constructor, statics) {
+ if (!statics) {
+ return;
+ }
+ for (var name in statics) {
+ var property = statics[name];
+ if (!statics.hasOwnProperty(name)) {
+ continue;
+ }
+
+ var isReserved = name in RESERVED_SPEC_KEYS;
+ ("production" !== process.env.NODE_ENV ? invariant(
+ !isReserved,
+ 'ReactClass: You are attempting to define a reserved ' +
+ 'property, `%s`, that shouldn\'t be on the "statics" key. Define it ' +
+ 'as an instance property instead; it will still be accessible on the ' +
+ 'constructor.',
+ name
+ ) : invariant(!isReserved));
+
+ var isInherited = name in Constructor;
+ ("production" !== process.env.NODE_ENV ? invariant(
+ !isInherited,
+ 'ReactClass: You are attempting to define ' +
+ '`%s` on your component more than once. This conflict may be ' +
+ 'due to a mixin.',
+ name
+ ) : invariant(!isInherited));
+ Constructor[name] = property;
+ }
+ }
+
+ /**
+ * Merge two objects, but throw if both contain the same key.
+ *
+ * @param {object} one The first object, which is mutated.
+ * @param {object} two The second object
+ * @return {object} one after it has been mutated to contain everything in two.
+ */
+ function mergeIntoWithNoDuplicateKeys(one, two) {
+ ("production" !== process.env.NODE_ENV ? invariant(
+ one && two && typeof one === 'object' && typeof two === 'object',
+ 'mergeIntoWithNoDuplicateKeys(): Cannot merge non-objects.'
+ ) : invariant(one && two && typeof one === 'object' && typeof two === 'object'));
+
+ for (var key in two) {
+ if (two.hasOwnProperty(key)) {
+ ("production" !== process.env.NODE_ENV ? invariant(
+ one[key] === undefined,
+ 'mergeIntoWithNoDuplicateKeys(): ' +
+ 'Tried to merge two objects with the same key: `%s`. This conflict ' +
+ 'may be due to a mixin; in particular, this may be caused by two ' +
+ 'getInitialState() or getDefaultProps() methods returning objects ' +
+ 'with clashing keys.',
+ key
+ ) : invariant(one[key] === undefined));
+ one[key] = two[key];
+ }
+ }
+ return one;
+ }
+
+ /**
+ * Creates a function that invokes two functions and merges their return values.
+ *
+ * @param {function} one Function to invoke first.
+ * @param {function} two Function to invoke second.
+ * @return {function} Function that invokes the two argument functions.
+ * @private
+ */
+ function createMergedResultFunction(one, two) {
+ return function mergedResult() {
+ var a = one.apply(this, arguments);
+ var b = two.apply(this, arguments);
+ if (a == null) {
+ return b;
+ } else if (b == null) {
+ return a;
+ }
+ var c = {};
+ mergeIntoWithNoDuplicateKeys(c, a);
+ mergeIntoWithNoDuplicateKeys(c, b);
+ return c;
+ };
+ }
+
+ /**
+ * Creates a function that invokes two functions and ignores their return vales.
+ *
+ * @param {function} one Function to invoke first.
+ * @param {function} two Function to invoke second.
+ * @return {function} Function that invokes the two argument functions.
+ * @private
+ */
+ function createChainedFunction(one, two) {
+ return function chainedFunction() {
+ one.apply(this, arguments);
+ two.apply(this, arguments);
+ };
+ }
+
+ /**
+ * Binds a method to the component.
+ *
+ * @param {object} component Component whose method is going to be bound.
+ * @param {function} method Method to be bound.
+ * @return {function} The bound method.
+ */
+ function bindAutoBindMethod(component, method) {
+ var boundMethod = method.bind(component);
+ if ("production" !== process.env.NODE_ENV) {
+ boundMethod.__reactBoundContext = component;
+ boundMethod.__reactBoundMethod = method;
+ boundMethod.__reactBoundArguments = null;
+ var componentName = component.constructor.displayName;
+ var _bind = boundMethod.bind;
+ /* eslint-disable block-scoped-var, no-undef */
+ boundMethod.bind = function(newThis ) {for (var args=[],$__0=1,$__1=arguments.length;$__0<$__1;$__0++) args.push(arguments[$__0]);
+ // User is trying to bind() an autobound method; we effectively will
+ // ignore the value of "this" that the user is trying to use, so
+ // let's warn.
+ if (newThis !== component && newThis !== null) {
+ ("production" !== process.env.NODE_ENV ? warning(
+ false,
+ 'bind(): React component methods may only be bound to the ' +
+ 'component instance. See %s',
+ componentName
+ ) : null);
+ } else if (!args.length) {
+ ("production" !== process.env.NODE_ENV ? warning(
+ false,
+ 'bind(): You are binding a component method to the component. ' +
+ 'React does this for you automatically in a high-performance ' +
+ 'way, so you can safely remove this call. See %s',
+ componentName
+ ) : null);
+ return boundMethod;
+ }
+ var reboundMethod = _bind.apply(boundMethod, arguments);
+ reboundMethod.__reactBoundContext = component;
+ reboundMethod.__reactBoundMethod = method;
+ reboundMethod.__reactBoundArguments = args;
+ return reboundMethod;
+ /* eslint-enable */
+ };
+ }
+ return boundMethod;
+ }
+
+ /**
+ * Binds all auto-bound methods in a component.
+ *
+ * @param {object} component Component whose method is going to be bound.
+ */
+ function bindAutoBindMethods(component) {
+ for (var autoBindKey in component.__reactAutoBindMap) {
+ if (component.__reactAutoBindMap.hasOwnProperty(autoBindKey)) {
+ var method = component.__reactAutoBindMap[autoBindKey];
+ component[autoBindKey] = bindAutoBindMethod(
+ component,
+ ReactErrorUtils.guard(
+ method,
+ component.constructor.displayName + '.' + autoBindKey
+ )
+ );
+ }
+ }
+ }
+
+ var typeDeprecationDescriptor = {
+ enumerable: false,
+ get: function() {
+ var displayName = this.displayName || this.name || 'Component';
+ ("production" !== process.env.NODE_ENV ? warning(
+ false,
+ '%s.type is deprecated. Use %s directly to access the class.',
+ displayName,
+ displayName
+ ) : null);
+ Object.defineProperty(this, 'type', {
+ value: this
+ });
+ return this;
+ }
+ };
+
+ /**
+ * Add more to the ReactClass base class. These are all legacy features and
+ * therefore not already part of the modern ReactComponent.
+ */
+ var ReactClassMixin = {
+
+ /**
+ * TODO: This will be deprecated because state should always keep a consistent
+ * type signature and the only use case for this, is to avoid that.
+ */
+ replaceState: function(newState, callback) {
+ ReactUpdateQueue.enqueueReplaceState(this, newState);
+ if (callback) {
+ ReactUpdateQueue.enqueueCallback(this, callback);
+ }
+ },
+
+ /**
+ * Checks whether or not this composite component is mounted.
+ * @return {boolean} True if mounted, false otherwise.
+ * @protected
+ * @final
+ */
+ isMounted: function() {
+ if ("production" !== process.env.NODE_ENV) {
+ var owner = ReactCurrentOwner.current;
+ if (owner !== null) {
+ ("production" !== process.env.NODE_ENV ? warning(
+ owner._warnedAboutRefsInRender,
+ '%s is accessing isMounted inside its render() function. ' +
+ 'render() should be a pure function of props and state. It should ' +
+ 'never access something that requires stale data from the previous ' +
+ 'render, such as refs. Move this logic to componentDidMount and ' +
+ 'componentDidUpdate instead.',
+ owner.getName() || 'A component'
+ ) : null);
+ owner._warnedAboutRefsInRender = true;
+ }
+ }
+ var internalInstance = ReactInstanceMap.get(this);
+ return (
+ internalInstance &&
+ internalInstance !== ReactLifeCycle.currentlyMountingInstance
+ );
+ },
+
+ /**
+ * Sets a subset of the props.
+ *
+ * @param {object} partialProps Subset of the next props.
+ * @param {?function} callback Called after props are updated.
+ * @final
+ * @public
+ * @deprecated
+ */
+ setProps: function(partialProps, callback) {
+ ReactUpdateQueue.enqueueSetProps(this, partialProps);
+ if (callback) {
+ ReactUpdateQueue.enqueueCallback(this, callback);
+ }
+ },
+
+ /**
+ * Replace all the props.
+ *
+ * @param {object} newProps Subset of the next props.
+ * @param {?function} callback Called after props are updated.
+ * @final
+ * @public
+ * @deprecated
+ */
+ replaceProps: function(newProps, callback) {
+ ReactUpdateQueue.enqueueReplaceProps(this, newProps);
+ if (callback) {
+ ReactUpdateQueue.enqueueCallback(this, callback);
+ }
+ }
+ };
+
+ var ReactClassComponent = function() {};
+ assign(
+ ReactClassComponent.prototype,
+ ReactComponent.prototype,
+ ReactClassMixin
+ );
+
+ /**
+ * Module for creating composite components.
+ *
+ * @class ReactClass
+ */
+ var ReactClass = {
+
+ /**
+ * Creates a composite component class given a class specification.
+ *
+ * @param {object} spec Class specification (which must define `render`).
+ * @return {function} Component constructor function.
+ * @public
+ */
+ createClass: function(spec) {
+ var Constructor = function(props, context) {
+ // This constructor is overridden by mocks. The argument is used
+ // by mocks to assert on what gets mounted.
+
+ if ("production" !== process.env.NODE_ENV) {
+ ("production" !== process.env.NODE_ENV ? warning(
+ this instanceof Constructor,
+ 'Something is calling a React component directly. Use a factory or ' +
+ 'JSX instead. See: https://fb.me/react-legacyfactory'
+ ) : null);
+ }
+
+ // Wire up auto-binding
+ if (this.__reactAutoBindMap) {
+ bindAutoBindMethods(this);
+ }
+
+ this.props = props;
+ this.context = context;
+ this.state = null;
+
+ // ReactClasses doesn't have constructors. Instead, they use the
+ // getInitialState and componentWillMount methods for initialization.
+
+ var initialState = this.getInitialState ? this.getInitialState() : null;
+ if ("production" !== process.env.NODE_ENV) {
+ // We allow auto-mocks to proceed as if they're returning null.
+ if (typeof initialState === 'undefined' &&
+ this.getInitialState._isMockFunction) {
+ // This is probably bad practice. Consider warning here and
+ // deprecating this convenience.
+ initialState = null;
+ }
+ }
+ ("production" !== process.env.NODE_ENV ? invariant(
+ typeof initialState === 'object' && !Array.isArray(initialState),
+ '%s.getInitialState(): must return an object or null',
+ Constructor.displayName || 'ReactCompositeComponent'
+ ) : invariant(typeof initialState === 'object' && !Array.isArray(initialState)));
+
+ this.state = initialState;
+ };
+ Constructor.prototype = new ReactClassComponent();
+ Constructor.prototype.constructor = Constructor;
+
+ injectedMixins.forEach(
+ mixSpecIntoComponent.bind(null, Constructor)
+ );
+
+ mixSpecIntoComponent(Constructor, spec);
+
+ // Initialize the defaultProps property after all mixins have been merged
+ if (Constructor.getDefaultProps) {
+ Constructor.defaultProps = Constructor.getDefaultProps();
+ }
+
+ if ("production" !== process.env.NODE_ENV) {
+ // This is a tag to indicate that the use of these method names is ok,
+ // since it's used with createClass. If it's not, then it's likely a
+ // mistake so we'll warn you to use the static property, property
+ // initializer or constructor respectively.
+ if (Constructor.getDefaultProps) {
+ Constructor.getDefaultProps.isReactClassApproved = {};
+ }
+ if (Constructor.prototype.getInitialState) {
+ Constructor.prototype.getInitialState.isReactClassApproved = {};
+ }
+ }
+
+ ("production" !== process.env.NODE_ENV ? invariant(
+ Constructor.prototype.render,
+ 'createClass(...): Class specification must implement a `render` method.'
+ ) : invariant(Constructor.prototype.render));
+
+ if ("production" !== process.env.NODE_ENV) {
+ ("production" !== process.env.NODE_ENV ? warning(
+ !Constructor.prototype.componentShouldUpdate,
+ '%s has a method called ' +
+ 'componentShouldUpdate(). Did you mean shouldComponentUpdate()? ' +
+ 'The name is phrased as a question because the function is ' +
+ 'expected to return a value.',
+ spec.displayName || 'A component'
+ ) : null);
+ }
+
+ // Reduce time spent doing lookups by setting these on the prototype.
+ for (var methodName in ReactClassInterface) {
+ if (!Constructor.prototype[methodName]) {
+ Constructor.prototype[methodName] = null;
+ }
+ }
+
+ // Legacy hook
+ Constructor.type = Constructor;
+ if ("production" !== process.env.NODE_ENV) {
+ try {
+ Object.defineProperty(Constructor, 'type', typeDeprecationDescriptor);
+ } catch (x) {
+ // IE will fail on defineProperty (es5-shim/sham too)
+ }
+ }
+
+ return Constructor;
+ },
+
+ injection: {
+ injectMixin: function(mixin) {
+ injectedMixins.push(mixin);
+ }
+ }
+
+ };
+
+ module.exports = ReactClass;
+
+ /* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(23)))
+
+/***/ },
+/* 58 */
+/***/ function(module, exports) {
+
+ /**
+ * Copyright 2013-2015, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ *
+ * @providesModule ReactErrorUtils
+ * @typechecks
+ */
+
+ "use strict";
+
+ var ReactErrorUtils = {
+ /**
+ * Creates a guarded version of a function. This is supposed to make debugging
+ * of event handlers easier. To aid debugging with the browser's debugger,
+ * this currently simply returns the original function.
+ *
+ * @param {function} func Function to be executed
+ * @param {string} name The name of the guard
+ * @return {function}
+ */
+ guard: function(func, name) {
+ return func;
+ }
+ };
+
+ module.exports = ReactErrorUtils;
+
+
+/***/ },
+/* 59 */
+/***/ function(module, exports) {
+
+ /**
+ * Copyright 2013-2015, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ *
+ * @providesModule keyOf
+ */
+
+ /**
+ * Allows extraction of a minified key. Let's the build system minify keys
+ * without loosing the ability to dynamically use key strings as values
+ * themselves. Pass in an object with a single key/val pair and it will return
+ * you the string key of that single record. Suppose you want to grab the
+ * value for a key 'className' inside of an object. Key/val minification may
+ * have aliased that key to be 'xa12'. keyOf({className: null}) will return
+ * 'xa12' in that case. Resolve keys you want to use once at startup time, then
+ * reuse those resolutions.
+ */
+ var keyOf = function(oneKeyObj) {
+ var key;
+ for (key in oneKeyObj) {
+ if (!oneKeyObj.hasOwnProperty(key)) {
+ continue;
+ }
+ return key;
+ }
+ return null;
+ };
+
+
+ module.exports = keyOf;
+
+
+/***/ },
+/* 60 */
+/***/ function(module, exports, __webpack_require__) {
+
+ /* WEBPACK VAR INJECTION */(function(process) {/**
+ * Copyright 2013-2015, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ *
+ * @providesModule ReactDOM
+ * @typechecks static-only
+ */
+
+ 'use strict';
+
+ var ReactElement = __webpack_require__(31);
+ var ReactElementValidator = __webpack_require__(52);
+
+ var mapObject = __webpack_require__(61);
+
+ /**
+ * Create a factory that creates HTML tag elements.
+ *
+ * @param {string} tag Tag name (e.g. `div`).
+ * @private
+ */
+ function createDOMFactory(tag) {
+ if ("production" !== process.env.NODE_ENV) {
+ return ReactElementValidator.createFactory(tag);
+ }
+ return ReactElement.createFactory(tag);
+ }
+
+ /**
+ * Creates a mapping from supported HTML tags to `ReactDOMComponent` classes.
+ * This is also accessible via `React.DOM`.
+ *
+ * @public
+ */
+ var ReactDOM = mapObject({
+ a: 'a',
+ abbr: 'abbr',
+ address: 'address',
+ area: 'area',
+ article: 'article',
+ aside: 'aside',
+ audio: 'audio',
+ b: 'b',
+ base: 'base',
+ bdi: 'bdi',
+ bdo: 'bdo',
+ big: 'big',
+ blockquote: 'blockquote',
+ body: 'body',
+ br: 'br',
+ button: 'button',
+ canvas: 'canvas',
+ caption: 'caption',
+ cite: 'cite',
+ code: 'code',
+ col: 'col',
+ colgroup: 'colgroup',
+ data: 'data',
+ datalist: 'datalist',
+ dd: 'dd',
+ del: 'del',
+ details: 'details',
+ dfn: 'dfn',
+ dialog: 'dialog',
+ div: 'div',
+ dl: 'dl',
+ dt: 'dt',
+ em: 'em',
+ embed: 'embed',
+ fieldset: 'fieldset',
+ figcaption: 'figcaption',
+ figure: 'figure',
+ footer: 'footer',
+ form: 'form',
+ h1: 'h1',
+ h2: 'h2',
+ h3: 'h3',
+ h4: 'h4',
+ h5: 'h5',
+ h6: 'h6',
+ head: 'head',
+ header: 'header',
+ hr: 'hr',
+ html: 'html',
+ i: 'i',
+ iframe: 'iframe',
+ img: 'img',
+ input: 'input',
+ ins: 'ins',
+ kbd: 'kbd',
+ keygen: 'keygen',
+ label: 'label',
+ legend: 'legend',
+ li: 'li',
+ link: 'link',
+ main: 'main',
+ map: 'map',
+ mark: 'mark',
+ menu: 'menu',
+ menuitem: 'menuitem',
+ meta: 'meta',
+ meter: 'meter',
+ nav: 'nav',
+ noscript: 'noscript',
+ object: 'object',
+ ol: 'ol',
+ optgroup: 'optgroup',
+ option: 'option',
+ output: 'output',
+ p: 'p',
+ param: 'param',
+ picture: 'picture',
+ pre: 'pre',
+ progress: 'progress',
+ q: 'q',
+ rp: 'rp',
+ rt: 'rt',
+ ruby: 'ruby',
+ s: 's',
+ samp: 'samp',
+ script: 'script',
+ section: 'section',
+ select: 'select',
+ small: 'small',
+ source: 'source',
+ span: 'span',
+ strong: 'strong',
+ style: 'style',
+ sub: 'sub',
+ summary: 'summary',
+ sup: 'sup',
+ table: 'table',
+ tbody: 'tbody',
+ td: 'td',
+ textarea: 'textarea',
+ tfoot: 'tfoot',
+ th: 'th',
+ thead: 'thead',
+ time: 'time',
+ title: 'title',
+ tr: 'tr',
+ track: 'track',
+ u: 'u',
+ ul: 'ul',
+ 'var': 'var',
+ video: 'video',
+ wbr: 'wbr',
+
+ // SVG
+ circle: 'circle',
+ clipPath: 'clipPath',
+ defs: 'defs',
+ ellipse: 'ellipse',
+ g: 'g',
+ line: 'line',
+ linearGradient: 'linearGradient',
+ mask: 'mask',
+ path: 'path',
+ pattern: 'pattern',
+ polygon: 'polygon',
+ polyline: 'polyline',
+ radialGradient: 'radialGradient',
+ rect: 'rect',
+ stop: 'stop',
+ svg: 'svg',
+ text: 'text',
+ tspan: 'tspan'
+
+ }, createDOMFactory);
+
+ module.exports = ReactDOM;
+
+ /* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(23)))
+
+/***/ },
+/* 61 */
+/***/ function(module, exports) {
+
+ /**
+ * Copyright 2013-2015, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ *
+ * @providesModule mapObject
+ */
+
+ 'use strict';
+
+ var hasOwnProperty = Object.prototype.hasOwnProperty;
+
+ /**
+ * Executes the provided `callback` once for each enumerable own property in the
+ * object and constructs a new object from the results. The `callback` is
+ * invoked with three arguments:
+ *
+ * - the property value
+ * - the property name
+ * - the object being traversed
+ *
+ * Properties that are added after the call to `mapObject` will not be visited
+ * by `callback`. If the values of existing properties are changed, the value
+ * passed to `callback` will be the value at the time `mapObject` visits them.
+ * Properties that are deleted before being visited are not visited.
+ *
+ * @grep function objectMap()
+ * @grep function objMap()
+ *
+ * @param {?object} object
+ * @param {function} callback
+ * @param {*} context
+ * @return {?object}
+ */
+ function mapObject(object, callback, context) {
+ if (!object) {
+ return null;
+ }
+ var result = {};
+ for (var name in object) {
+ if (hasOwnProperty.call(object, name)) {
+ result[name] = callback.call(context, object[name], name, object);
+ }
+ }
+ return result;
+ }
+
+ module.exports = mapObject;
+
+
+/***/ },
+/* 62 */
+/***/ function(module, exports, __webpack_require__) {
+
+ /**
+ * Copyright 2013-2015, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ *
+ * @providesModule ReactDOMTextComponent
+ * @typechecks static-only
+ */
+
+ 'use strict';
+
+ var DOMPropertyOperations = __webpack_require__(63);
+ var ReactComponentBrowserEnvironment =
+ __webpack_require__(67);
+ var ReactDOMComponent = __webpack_require__(107);
+
+ var assign = __webpack_require__(33);
+ var escapeTextContentForBrowser = __webpack_require__(66);
+
+ /**
+ * Text nodes violate a couple assumptions that React makes about components:
+ *
+ * - When mounting text into the DOM, adjacent text nodes are merged.
+ * - Text nodes cannot be assigned a React root ID.
+ *
+ * This component is used to wrap strings in elements so that they can undergo
+ * the same reconciliation that is applied to elements.
+ *
+ * TODO: Investigate representing React components in the DOM with text nodes.
+ *
+ * @class ReactDOMTextComponent
+ * @extends ReactComponent
+ * @internal
+ */
+ var ReactDOMTextComponent = function(props) {
+ // This constructor and its argument is currently used by mocks.
+ };
+
+ assign(ReactDOMTextComponent.prototype, {
+
+ /**
+ * @param {ReactText} text
+ * @internal
+ */
+ construct: function(text) {
+ // TODO: This is really a ReactText (ReactNode), not a ReactElement
+ this._currentElement = text;
+ this._stringText = '' + text;
+
+ // Properties
+ this._rootNodeID = null;
+ this._mountIndex = 0;
+ },
+
+ /**
+ * Creates the markup for this text node. This node is not intended to have
+ * any features besides containing text content.
+ *
+ * @param {string} rootID DOM ID of the root node.
+ * @param {ReactReconcileTransaction|ReactServerRenderingTransaction} transaction
+ * @return {string} Markup for this text node.
+ * @internal
+ */
+ mountComponent: function(rootID, transaction, context) {
+ this._rootNodeID = rootID;
+ var escapedText = escapeTextContentForBrowser(this._stringText);
+
+ if (transaction.renderToStaticMarkup) {
+ // Normally we'd wrap this in a `span` for the reasons stated above, but
+ // since this is a situation where React won't take over (static pages),
+ // we can simply return the text as it is.
+ return escapedText;
+ }
+
+ return (
+ '' +
+ escapedText +
+ ' '
+ );
+ },
+
+ /**
+ * Updates this component by updating the text content.
+ *
+ * @param {ReactText} nextText The next text content
+ * @param {ReactReconcileTransaction} transaction
+ * @internal
+ */
+ receiveComponent: function(nextText, transaction) {
+ if (nextText !== this._currentElement) {
+ this._currentElement = nextText;
+ var nextStringText = '' + nextText;
+ if (nextStringText !== this._stringText) {
+ // TODO: Save this as pending props and use performUpdateIfNecessary
+ // and/or updateComponent to do the actual update for consistency with
+ // other component types?
+ this._stringText = nextStringText;
+ ReactDOMComponent.BackendIDOperations.updateTextContentByID(
+ this._rootNodeID,
+ nextStringText
+ );
+ }
+ }
+ },
+
+ unmountComponent: function() {
+ ReactComponentBrowserEnvironment.unmountIDFromEnvironment(this._rootNodeID);
+ }
+
+ });
+
+ module.exports = ReactDOMTextComponent;
+
+
+/***/ },
+/* 63 */
+/***/ function(module, exports, __webpack_require__) {
+
+ /* WEBPACK VAR INJECTION */(function(process) {/**
+ * Copyright 2013-2015, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ *
+ * @providesModule DOMPropertyOperations
+ * @typechecks static-only
+ */
+
+ 'use strict';
+
+ var DOMProperty = __webpack_require__(64);
+
+ var quoteAttributeValueForBrowser = __webpack_require__(65);
+ var warning = __webpack_require__(35);
+
+ function shouldIgnoreValue(name, value) {
+ return value == null ||
+ (DOMProperty.hasBooleanValue[name] && !value) ||
+ (DOMProperty.hasNumericValue[name] && isNaN(value)) ||
+ (DOMProperty.hasPositiveNumericValue[name] && (value < 1)) ||
+ (DOMProperty.hasOverloadedBooleanValue[name] && value === false);
+ }
+
+ if ("production" !== process.env.NODE_ENV) {
+ var reactProps = {
+ children: true,
+ dangerouslySetInnerHTML: true,
+ key: true,
+ ref: true
+ };
+ var warnedProperties = {};
+
+ var warnUnknownProperty = function(name) {
+ if (reactProps.hasOwnProperty(name) && reactProps[name] ||
+ warnedProperties.hasOwnProperty(name) && warnedProperties[name]) {
+ return;
+ }
+
+ warnedProperties[name] = true;
+ var lowerCasedName = name.toLowerCase();
+
+ // data-* attributes should be lowercase; suggest the lowercase version
+ var standardName = (
+ DOMProperty.isCustomAttribute(lowerCasedName) ?
+ lowerCasedName :
+ DOMProperty.getPossibleStandardName.hasOwnProperty(lowerCasedName) ?
+ DOMProperty.getPossibleStandardName[lowerCasedName] :
+ null
+ );
+
+ // For now, only warn when we have a suggested correction. This prevents
+ // logging too much when using transferPropsTo.
+ ("production" !== process.env.NODE_ENV ? warning(
+ standardName == null,
+ 'Unknown DOM property %s. Did you mean %s?',
+ name,
+ standardName
+ ) : null);
+
+ };
+ }
+
+ /**
+ * Operations for dealing with DOM properties.
+ */
+ var DOMPropertyOperations = {
+
+ /**
+ * Creates markup for the ID property.
+ *
+ * @param {string} id Unescaped ID.
+ * @return {string} Markup string.
+ */
+ createMarkupForID: function(id) {
+ return DOMProperty.ID_ATTRIBUTE_NAME + '=' +
+ quoteAttributeValueForBrowser(id);
+ },
+
+ /**
+ * Creates markup for a property.
+ *
+ * @param {string} name
+ * @param {*} value
+ * @return {?string} Markup string, or null if the property was invalid.
+ */
+ createMarkupForProperty: function(name, value) {
+ if (DOMProperty.isStandardName.hasOwnProperty(name) &&
+ DOMProperty.isStandardName[name]) {
+ if (shouldIgnoreValue(name, value)) {
+ return '';
+ }
+ var attributeName = DOMProperty.getAttributeName[name];
+ if (DOMProperty.hasBooleanValue[name] ||
+ (DOMProperty.hasOverloadedBooleanValue[name] && value === true)) {
+ return attributeName;
+ }
+ return attributeName + '=' + quoteAttributeValueForBrowser(value);
+ } else if (DOMProperty.isCustomAttribute(name)) {
+ if (value == null) {
+ return '';
+ }
+ return name + '=' + quoteAttributeValueForBrowser(value);
+ } else if ("production" !== process.env.NODE_ENV) {
+ warnUnknownProperty(name);
+ }
+ return null;
+ },
+
+ /**
+ * Sets the value for a property on a node.
+ *
+ * @param {DOMElement} node
+ * @param {string} name
+ * @param {*} value
+ */
+ setValueForProperty: function(node, name, value) {
+ if (DOMProperty.isStandardName.hasOwnProperty(name) &&
+ DOMProperty.isStandardName[name]) {
+ var mutationMethod = DOMProperty.getMutationMethod[name];
+ if (mutationMethod) {
+ mutationMethod(node, value);
+ } else if (shouldIgnoreValue(name, value)) {
+ this.deleteValueForProperty(node, name);
+ } else if (DOMProperty.mustUseAttribute[name]) {
+ // `setAttribute` with objects becomes only `[object]` in IE8/9,
+ // ('' + value) makes it output the correct toString()-value.
+ node.setAttribute(DOMProperty.getAttributeName[name], '' + value);
+ } else {
+ var propName = DOMProperty.getPropertyName[name];
+ // Must explicitly cast values for HAS_SIDE_EFFECTS-properties to the
+ // property type before comparing; only `value` does and is string.
+ if (!DOMProperty.hasSideEffects[name] ||
+ ('' + node[propName]) !== ('' + value)) {
+ // Contrary to `setAttribute`, object properties are properly
+ // `toString`ed by IE8/9.
+ node[propName] = value;
+ }
+ }
+ } else if (DOMProperty.isCustomAttribute(name)) {
+ if (value == null) {
+ node.removeAttribute(name);
+ } else {
+ node.setAttribute(name, '' + value);
+ }
+ } else if ("production" !== process.env.NODE_ENV) {
+ warnUnknownProperty(name);
+ }
+ },
+
+ /**
+ * Deletes the value for a property on a node.
+ *
+ * @param {DOMElement} node
+ * @param {string} name
+ */
+ deleteValueForProperty: function(node, name) {
+ if (DOMProperty.isStandardName.hasOwnProperty(name) &&
+ DOMProperty.isStandardName[name]) {
+ var mutationMethod = DOMProperty.getMutationMethod[name];
+ if (mutationMethod) {
+ mutationMethod(node, undefined);
+ } else if (DOMProperty.mustUseAttribute[name]) {
+ node.removeAttribute(DOMProperty.getAttributeName[name]);
+ } else {
+ var propName = DOMProperty.getPropertyName[name];
+ var defaultValue = DOMProperty.getDefaultValueForProperty(
+ node.nodeName,
+ propName
+ );
+ if (!DOMProperty.hasSideEffects[name] ||
+ ('' + node[propName]) !== defaultValue) {
+ node[propName] = defaultValue;
+ }
+ }
+ } else if (DOMProperty.isCustomAttribute(name)) {
+ node.removeAttribute(name);
+ } else if ("production" !== process.env.NODE_ENV) {
+ warnUnknownProperty(name);
+ }
+ }
+
+ };
+
+ module.exports = DOMPropertyOperations;
+
+ /* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(23)))
+
+/***/ },
+/* 64 */
+/***/ function(module, exports, __webpack_require__) {
+
+ /* WEBPACK VAR INJECTION */(function(process) {/**
+ * Copyright 2013-2015, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ *
+ * @providesModule DOMProperty
+ * @typechecks static-only
+ */
+
+ /*jslint bitwise: true */
+
+ 'use strict';
+
+ var invariant = __webpack_require__(27);
+
+ function checkMask(value, bitmask) {
+ return (value & bitmask) === bitmask;
+ }
+
+ var DOMPropertyInjection = {
+ /**
+ * Mapping from normalized, camelcased property names to a configuration that
+ * specifies how the associated DOM property should be accessed or rendered.
+ */
+ MUST_USE_ATTRIBUTE: 0x1,
+ MUST_USE_PROPERTY: 0x2,
+ HAS_SIDE_EFFECTS: 0x4,
+ HAS_BOOLEAN_VALUE: 0x8,
+ HAS_NUMERIC_VALUE: 0x10,
+ HAS_POSITIVE_NUMERIC_VALUE: 0x20 | 0x10,
+ HAS_OVERLOADED_BOOLEAN_VALUE: 0x40,
+
+ /**
+ * Inject some specialized knowledge about the DOM. This takes a config object
+ * with the following properties:
+ *
+ * isCustomAttribute: function that given an attribute name will return true
+ * if it can be inserted into the DOM verbatim. Useful for data-* or aria-*
+ * attributes where it's impossible to enumerate all of the possible
+ * attribute names,
+ *
+ * Properties: object mapping DOM property name to one of the
+ * DOMPropertyInjection constants or null. If your attribute isn't in here,
+ * it won't get written to the DOM.
+ *
+ * DOMAttributeNames: object mapping React attribute name to the DOM
+ * attribute name. Attribute names not specified use the **lowercase**
+ * normalized name.
+ *
+ * DOMPropertyNames: similar to DOMAttributeNames but for DOM properties.
+ * Property names not specified use the normalized name.
+ *
+ * DOMMutationMethods: Properties that require special mutation methods. If
+ * `value` is undefined, the mutation method should unset the property.
+ *
+ * @param {object} domPropertyConfig the config as described above.
+ */
+ injectDOMPropertyConfig: function(domPropertyConfig) {
+ var Properties = domPropertyConfig.Properties || {};
+ var DOMAttributeNames = domPropertyConfig.DOMAttributeNames || {};
+ var DOMPropertyNames = domPropertyConfig.DOMPropertyNames || {};
+ var DOMMutationMethods = domPropertyConfig.DOMMutationMethods || {};
+
+ if (domPropertyConfig.isCustomAttribute) {
+ DOMProperty._isCustomAttributeFunctions.push(
+ domPropertyConfig.isCustomAttribute
+ );
+ }
+
+ for (var propName in Properties) {
+ ("production" !== process.env.NODE_ENV ? invariant(
+ !DOMProperty.isStandardName.hasOwnProperty(propName),
+ 'injectDOMPropertyConfig(...): You\'re trying to inject DOM property ' +
+ '\'%s\' which has already been injected. You may be accidentally ' +
+ 'injecting the same DOM property config twice, or you may be ' +
+ 'injecting two configs that have conflicting property names.',
+ propName
+ ) : invariant(!DOMProperty.isStandardName.hasOwnProperty(propName)));
+
+ DOMProperty.isStandardName[propName] = true;
+
+ var lowerCased = propName.toLowerCase();
+ DOMProperty.getPossibleStandardName[lowerCased] = propName;
+
+ if (DOMAttributeNames.hasOwnProperty(propName)) {
+ var attributeName = DOMAttributeNames[propName];
+ DOMProperty.getPossibleStandardName[attributeName] = propName;
+ DOMProperty.getAttributeName[propName] = attributeName;
+ } else {
+ DOMProperty.getAttributeName[propName] = lowerCased;
+ }
+
+ DOMProperty.getPropertyName[propName] =
+ DOMPropertyNames.hasOwnProperty(propName) ?
+ DOMPropertyNames[propName] :
+ propName;
+
+ if (DOMMutationMethods.hasOwnProperty(propName)) {
+ DOMProperty.getMutationMethod[propName] = DOMMutationMethods[propName];
+ } else {
+ DOMProperty.getMutationMethod[propName] = null;
+ }
+
+ var propConfig = Properties[propName];
+ DOMProperty.mustUseAttribute[propName] =
+ checkMask(propConfig, DOMPropertyInjection.MUST_USE_ATTRIBUTE);
+ DOMProperty.mustUseProperty[propName] =
+ checkMask(propConfig, DOMPropertyInjection.MUST_USE_PROPERTY);
+ DOMProperty.hasSideEffects[propName] =
+ checkMask(propConfig, DOMPropertyInjection.HAS_SIDE_EFFECTS);
+ DOMProperty.hasBooleanValue[propName] =
+ checkMask(propConfig, DOMPropertyInjection.HAS_BOOLEAN_VALUE);
+ DOMProperty.hasNumericValue[propName] =
+ checkMask(propConfig, DOMPropertyInjection.HAS_NUMERIC_VALUE);
+ DOMProperty.hasPositiveNumericValue[propName] =
+ checkMask(propConfig, DOMPropertyInjection.HAS_POSITIVE_NUMERIC_VALUE);
+ DOMProperty.hasOverloadedBooleanValue[propName] =
+ checkMask(propConfig, DOMPropertyInjection.HAS_OVERLOADED_BOOLEAN_VALUE);
+
+ ("production" !== process.env.NODE_ENV ? invariant(
+ !DOMProperty.mustUseAttribute[propName] ||
+ !DOMProperty.mustUseProperty[propName],
+ 'DOMProperty: Cannot require using both attribute and property: %s',
+ propName
+ ) : invariant(!DOMProperty.mustUseAttribute[propName] ||
+ !DOMProperty.mustUseProperty[propName]));
+ ("production" !== process.env.NODE_ENV ? invariant(
+ DOMProperty.mustUseProperty[propName] ||
+ !DOMProperty.hasSideEffects[propName],
+ 'DOMProperty: Properties that have side effects must use property: %s',
+ propName
+ ) : invariant(DOMProperty.mustUseProperty[propName] ||
+ !DOMProperty.hasSideEffects[propName]));
+ ("production" !== process.env.NODE_ENV ? invariant(
+ !!DOMProperty.hasBooleanValue[propName] +
+ !!DOMProperty.hasNumericValue[propName] +
+ !!DOMProperty.hasOverloadedBooleanValue[propName] <= 1,
+ 'DOMProperty: Value can be one of boolean, overloaded boolean, or ' +
+ 'numeric value, but not a combination: %s',
+ propName
+ ) : invariant(!!DOMProperty.hasBooleanValue[propName] +
+ !!DOMProperty.hasNumericValue[propName] +
+ !!DOMProperty.hasOverloadedBooleanValue[propName] <= 1));
+ }
+ }
+ };
+ var defaultValueCache = {};
+
+ /**
+ * DOMProperty exports lookup objects that can be used like functions:
+ *
+ * > DOMProperty.isValid['id']
+ * true
+ * > DOMProperty.isValid['foobar']
+ * undefined
+ *
+ * Although this may be confusing, it performs better in general.
+ *
+ * @see http://jsperf.com/key-exists
+ * @see http://jsperf.com/key-missing
+ */
+ var DOMProperty = {
+
+ ID_ATTRIBUTE_NAME: 'data-reactid',
+
+ /**
+ * Checks whether a property name is a standard property.
+ * @type {Object}
+ */
+ isStandardName: {},
+
+ /**
+ * Mapping from lowercase property names to the properly cased version, used
+ * to warn in the case of missing properties.
+ * @type {Object}
+ */
+ getPossibleStandardName: {},
+
+ /**
+ * Mapping from normalized names to attribute names that differ. Attribute
+ * names are used when rendering markup or with `*Attribute()`.
+ * @type {Object}
+ */
+ getAttributeName: {},
+
+ /**
+ * Mapping from normalized names to properties on DOM node instances.
+ * (This includes properties that mutate due to external factors.)
+ * @type {Object}
+ */
+ getPropertyName: {},
+
+ /**
+ * Mapping from normalized names to mutation methods. This will only exist if
+ * mutation cannot be set simply by the property or `setAttribute()`.
+ * @type {Object}
+ */
+ getMutationMethod: {},
+
+ /**
+ * Whether the property must be accessed and mutated as an object property.
+ * @type {Object}
+ */
+ mustUseAttribute: {},
+
+ /**
+ * Whether the property must be accessed and mutated using `*Attribute()`.
+ * (This includes anything that fails ` in `.)
+ * @type {Object}
+ */
+ mustUseProperty: {},
+
+ /**
+ * Whether or not setting a value causes side effects such as triggering
+ * resources to be loaded or text selection changes. We must ensure that
+ * the value is only set if it has changed.
+ * @type {Object}
+ */
+ hasSideEffects: {},
+
+ /**
+ * Whether the property should be removed when set to a falsey value.
+ * @type {Object}
+ */
+ hasBooleanValue: {},
+
+ /**
+ * Whether the property must be numeric or parse as a
+ * numeric and should be removed when set to a falsey value.
+ * @type {Object}
+ */
+ hasNumericValue: {},
+
+ /**
+ * Whether the property must be positive numeric or parse as a positive
+ * numeric and should be removed when set to a falsey value.
+ * @type {Object}
+ */
+ hasPositiveNumericValue: {},
+
+ /**
+ * Whether the property can be used as a flag as well as with a value. Removed
+ * when strictly equal to false; present without a value when strictly equal
+ * to true; present with a value otherwise.
+ * @type {Object}
+ */
+ hasOverloadedBooleanValue: {},
+
+ /**
+ * All of the isCustomAttribute() functions that have been injected.
+ */
+ _isCustomAttributeFunctions: [],
+
+ /**
+ * Checks whether a property name is a custom attribute.
+ * @method
+ */
+ isCustomAttribute: function(attributeName) {
+ for (var i = 0; i < DOMProperty._isCustomAttributeFunctions.length; i++) {
+ var isCustomAttributeFn = DOMProperty._isCustomAttributeFunctions[i];
+ if (isCustomAttributeFn(attributeName)) {
+ return true;
+ }
+ }
+ return false;
+ },
+
+ /**
+ * Returns the default property value for a DOM property (i.e., not an
+ * attribute). Most default values are '' or false, but not all. Worse yet,
+ * some (in particular, `type`) vary depending on the type of element.
+ *
+ * TODO: Is it better to grab all the possible properties when creating an
+ * element to avoid having to create the same element twice?
+ */
+ getDefaultValueForProperty: function(nodeName, prop) {
+ var nodeDefaults = defaultValueCache[nodeName];
+ var testElement;
+ if (!nodeDefaults) {
+ defaultValueCache[nodeName] = nodeDefaults = {};
+ }
+ if (!(prop in nodeDefaults)) {
+ testElement = document.createElement(nodeName);
+ nodeDefaults[prop] = testElement[prop];
+ }
+ return nodeDefaults[prop];
+ },
+
+ injection: DOMPropertyInjection
+ };
+
+ module.exports = DOMProperty;
+
+ /* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(23)))
+
+/***/ },
+/* 65 */
+/***/ function(module, exports, __webpack_require__) {
+
+ /**
+ * Copyright 2013-2015, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ *
+ * @providesModule quoteAttributeValueForBrowser
+ */
+
+ 'use strict';
+
+ var escapeTextContentForBrowser = __webpack_require__(66);
+
+ /**
+ * Escapes attribute value to prevent scripting attacks.
+ *
+ * @param {*} value Value to escape.
+ * @return {string} An escaped string.
+ */
+ function quoteAttributeValueForBrowser(value) {
+ return '"' + escapeTextContentForBrowser(value) + '"';
+ }
+
+ module.exports = quoteAttributeValueForBrowser;
+
+
+/***/ },
+/* 66 */
+/***/ function(module, exports) {
+
+ /**
+ * Copyright 2013-2015, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ *
+ * @providesModule escapeTextContentForBrowser
+ */
+
+ 'use strict';
+
+ var ESCAPE_LOOKUP = {
+ '&': '&',
+ '>': '>',
+ '<': '<',
+ '"': '"',
+ '\'': '''
+ };
+
+ var ESCAPE_REGEX = /[&><"']/g;
+
+ function escaper(match) {
+ return ESCAPE_LOOKUP[match];
+ }
+
+ /**
+ * Escapes text to prevent scripting attacks.
+ *
+ * @param {*} text Text value to escape.
+ * @return {string} An escaped string.
+ */
+ function escapeTextContentForBrowser(text) {
+ return ('' + text).replace(ESCAPE_REGEX, escaper);
+ }
+
+ module.exports = escapeTextContentForBrowser;
+
+
+/***/ },
+/* 67 */
+/***/ function(module, exports, __webpack_require__) {
+
+ /**
+ * Copyright 2013-2015, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ *
+ * @providesModule ReactComponentBrowserEnvironment
+ */
+
+ /*jslint evil: true */
+
+ 'use strict';
+
+ var ReactDOMIDOperations = __webpack_require__(68);
+ var ReactMount = __webpack_require__(87);
+
+ /**
+ * Abstracts away all functionality of the reconciler that requires knowledge of
+ * the browser context. TODO: These callers should be refactored to avoid the
+ * need for this injection.
+ */
+ var ReactComponentBrowserEnvironment = {
+
+ processChildrenUpdates:
+ ReactDOMIDOperations.dangerouslyProcessChildrenUpdates,
+
+ replaceNodeWithMarkupByID:
+ ReactDOMIDOperations.dangerouslyReplaceNodeWithMarkupByID,
+
+ /**
+ * If a particular environment requires that some resources be cleaned up,
+ * specify this in the injected Mixin. In the DOM, we would likely want to
+ * purge any cached node ID lookups.
+ *
+ * @private
+ */
+ unmountIDFromEnvironment: function(rootNodeID) {
+ ReactMount.purgeID(rootNodeID);
+ }
+
+ };
+
+ module.exports = ReactComponentBrowserEnvironment;
+
+
+/***/ },
+/* 68 */
+/***/ function(module, exports, __webpack_require__) {
+
+ /* WEBPACK VAR INJECTION */(function(process) {/**
+ * Copyright 2013-2015, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ *
+ * @providesModule ReactDOMIDOperations
+ * @typechecks static-only
+ */
+
+ /*jslint evil: true */
+
+ 'use strict';
+
+ var CSSPropertyOperations = __webpack_require__(69);
+ var DOMChildrenOperations = __webpack_require__(78);
+ var DOMPropertyOperations = __webpack_require__(63);
+ var ReactMount = __webpack_require__(87);
+ var ReactPerf = __webpack_require__(48);
+
+ var invariant = __webpack_require__(27);
+ var setInnerHTML = __webpack_require__(86);
+
+ /**
+ * Errors for properties that should not be updated with `updatePropertyById()`.
+ *
+ * @type {object}
+ * @private
+ */
+ var INVALID_PROPERTY_ERRORS = {
+ dangerouslySetInnerHTML:
+ '`dangerouslySetInnerHTML` must be set using `updateInnerHTMLByID()`.',
+ style: '`style` must be set using `updateStylesByID()`.'
+ };
+
+ /**
+ * Operations used to process updates to DOM nodes. This is made injectable via
+ * `ReactDOMComponent.BackendIDOperations`.
+ */
+ var ReactDOMIDOperations = {
+
+ /**
+ * Updates a DOM node with new property values. This should only be used to
+ * update DOM properties in `DOMProperty`.
+ *
+ * @param {string} id ID of the node to update.
+ * @param {string} name A valid property name, see `DOMProperty`.
+ * @param {*} value New value of the property.
+ * @internal
+ */
+ updatePropertyByID: function(id, name, value) {
+ var node = ReactMount.getNode(id);
+ ("production" !== process.env.NODE_ENV ? invariant(
+ !INVALID_PROPERTY_ERRORS.hasOwnProperty(name),
+ 'updatePropertyByID(...): %s',
+ INVALID_PROPERTY_ERRORS[name]
+ ) : invariant(!INVALID_PROPERTY_ERRORS.hasOwnProperty(name)));
+
+ // If we're updating to null or undefined, we should remove the property
+ // from the DOM node instead of inadvertantly setting to a string. This
+ // brings us in line with the same behavior we have on initial render.
+ if (value != null) {
+ DOMPropertyOperations.setValueForProperty(node, name, value);
+ } else {
+ DOMPropertyOperations.deleteValueForProperty(node, name);
+ }
+ },
+
+ /**
+ * Updates a DOM node to remove a property. This should only be used to remove
+ * DOM properties in `DOMProperty`.
+ *
+ * @param {string} id ID of the node to update.
+ * @param {string} name A property name to remove, see `DOMProperty`.
+ * @internal
+ */
+ deletePropertyByID: function(id, name, value) {
+ var node = ReactMount.getNode(id);
+ ("production" !== process.env.NODE_ENV ? invariant(
+ !INVALID_PROPERTY_ERRORS.hasOwnProperty(name),
+ 'updatePropertyByID(...): %s',
+ INVALID_PROPERTY_ERRORS[name]
+ ) : invariant(!INVALID_PROPERTY_ERRORS.hasOwnProperty(name)));
+ DOMPropertyOperations.deleteValueForProperty(node, name, value);
+ },
+
+ /**
+ * Updates a DOM node with new style values. If a value is specified as '',
+ * the corresponding style property will be unset.
+ *
+ * @param {string} id ID of the node to update.
+ * @param {object} styles Mapping from styles to values.
+ * @internal
+ */
+ updateStylesByID: function(id, styles) {
+ var node = ReactMount.getNode(id);
+ CSSPropertyOperations.setValueForStyles(node, styles);
+ },
+
+ /**
+ * Updates a DOM node's innerHTML.
+ *
+ * @param {string} id ID of the node to update.
+ * @param {string} html An HTML string.
+ * @internal
+ */
+ updateInnerHTMLByID: function(id, html) {
+ var node = ReactMount.getNode(id);
+ setInnerHTML(node, html);
+ },
+
+ /**
+ * Updates a DOM node's text content set by `props.content`.
+ *
+ * @param {string} id ID of the node to update.
+ * @param {string} content Text content.
+ * @internal
+ */
+ updateTextContentByID: function(id, content) {
+ var node = ReactMount.getNode(id);
+ DOMChildrenOperations.updateTextContent(node, content);
+ },
+
+ /**
+ * Replaces a DOM node that exists in the document with markup.
+ *
+ * @param {string} id ID of child to be replaced.
+ * @param {string} markup Dangerous markup to inject in place of child.
+ * @internal
+ * @see {Danger.dangerouslyReplaceNodeWithMarkup}
+ */
+ dangerouslyReplaceNodeWithMarkupByID: function(id, markup) {
+ var node = ReactMount.getNode(id);
+ DOMChildrenOperations.dangerouslyReplaceNodeWithMarkup(node, markup);
+ },
+
+ /**
+ * Updates a component's children by processing a series of updates.
+ *
+ * @param {array} updates List of update configurations.
+ * @param {array} markup List of markup strings.
+ * @internal
+ */
+ dangerouslyProcessChildrenUpdates: function(updates, markup) {
+ for (var i = 0; i < updates.length; i++) {
+ updates[i].parentNode = ReactMount.getNode(updates[i].parentID);
+ }
+ DOMChildrenOperations.processUpdates(updates, markup);
+ }
+ };
+
+ ReactPerf.measureMethods(ReactDOMIDOperations, 'ReactDOMIDOperations', {
+ updatePropertyByID: 'updatePropertyByID',
+ deletePropertyByID: 'deletePropertyByID',
+ updateStylesByID: 'updateStylesByID',
+ updateInnerHTMLByID: 'updateInnerHTMLByID',
+ updateTextContentByID: 'updateTextContentByID',
+ dangerouslyReplaceNodeWithMarkupByID: 'dangerouslyReplaceNodeWithMarkupByID',
+ dangerouslyProcessChildrenUpdates: 'dangerouslyProcessChildrenUpdates'
+ });
+
+ module.exports = ReactDOMIDOperations;
+
+ /* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(23)))
+
+/***/ },
+/* 69 */
+/***/ function(module, exports, __webpack_require__) {
+
+ /* WEBPACK VAR INJECTION */(function(process) {/**
+ * Copyright 2013-2015, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ *
+ * @providesModule CSSPropertyOperations
+ * @typechecks static-only
+ */
+
+ 'use strict';
+
+ var CSSProperty = __webpack_require__(70);
+ var ExecutionEnvironment = __webpack_require__(71);
+
+ var camelizeStyleName = __webpack_require__(72);
+ var dangerousStyleValue = __webpack_require__(74);
+ var hyphenateStyleName = __webpack_require__(75);
+ var memoizeStringOnly = __webpack_require__(77);
+ var warning = __webpack_require__(35);
+
+ var processStyleName = memoizeStringOnly(function(styleName) {
+ return hyphenateStyleName(styleName);
+ });
+
+ var styleFloatAccessor = 'cssFloat';
+ if (ExecutionEnvironment.canUseDOM) {
+ // IE8 only supports accessing cssFloat (standard) as styleFloat
+ if (document.documentElement.style.cssFloat === undefined) {
+ styleFloatAccessor = 'styleFloat';
+ }
+ }
+
+ if ("production" !== process.env.NODE_ENV) {
+ // 'msTransform' is correct, but the other prefixes should be capitalized
+ var badVendoredStyleNamePattern = /^(?:webkit|moz|o)[A-Z]/;
+
+ // style values shouldn't contain a semicolon
+ var badStyleValueWithSemicolonPattern = /;\s*$/;
+
+ var warnedStyleNames = {};
+ var warnedStyleValues = {};
+
+ var warnHyphenatedStyleName = function(name) {
+ if (warnedStyleNames.hasOwnProperty(name) && warnedStyleNames[name]) {
+ return;
+ }
+
+ warnedStyleNames[name] = true;
+ ("production" !== process.env.NODE_ENV ? warning(
+ false,
+ 'Unsupported style property %s. Did you mean %s?',
+ name,
+ camelizeStyleName(name)
+ ) : null);
+ };
+
+ var warnBadVendoredStyleName = function(name) {
+ if (warnedStyleNames.hasOwnProperty(name) && warnedStyleNames[name]) {
+ return;
+ }
+
+ warnedStyleNames[name] = true;
+ ("production" !== process.env.NODE_ENV ? warning(
+ false,
+ 'Unsupported vendor-prefixed style property %s. Did you mean %s?',
+ name,
+ name.charAt(0).toUpperCase() + name.slice(1)
+ ) : null);
+ };
+
+ var warnStyleValueWithSemicolon = function(name, value) {
+ if (warnedStyleValues.hasOwnProperty(value) && warnedStyleValues[value]) {
+ return;
+ }
+
+ warnedStyleValues[value] = true;
+ ("production" !== process.env.NODE_ENV ? warning(
+ false,
+ 'Style property values shouldn\'t contain a semicolon. ' +
+ 'Try "%s: %s" instead.',
+ name,
+ value.replace(badStyleValueWithSemicolonPattern, '')
+ ) : null);
+ };
+
+ /**
+ * @param {string} name
+ * @param {*} value
+ */
+ var warnValidStyle = function(name, value) {
+ if (name.indexOf('-') > -1) {
+ warnHyphenatedStyleName(name);
+ } else if (badVendoredStyleNamePattern.test(name)) {
+ warnBadVendoredStyleName(name);
+ } else if (badStyleValueWithSemicolonPattern.test(value)) {
+ warnStyleValueWithSemicolon(name, value);
+ }
+ };
+ }
+
+ /**
+ * Operations for dealing with CSS properties.
+ */
+ var CSSPropertyOperations = {
+
+ /**
+ * Serializes a mapping of style properties for use as inline styles:
+ *
+ * > createMarkupForStyles({width: '200px', height: 0})
+ * "width:200px;height:0;"
+ *
+ * Undefined values are ignored so that declarative programming is easier.
+ * The result should be HTML-escaped before insertion into the DOM.
+ *
+ * @param {object} styles
+ * @return {?string}
+ */
+ createMarkupForStyles: function(styles) {
+ var serialized = '';
+ for (var styleName in styles) {
+ if (!styles.hasOwnProperty(styleName)) {
+ continue;
+ }
+ var styleValue = styles[styleName];
+ if ("production" !== process.env.NODE_ENV) {
+ warnValidStyle(styleName, styleValue);
+ }
+ if (styleValue != null) {
+ serialized += processStyleName(styleName) + ':';
+ serialized += dangerousStyleValue(styleName, styleValue) + ';';
+ }
+ }
+ return serialized || null;
+ },
+
+ /**
+ * Sets the value for multiple styles on a node. If a value is specified as
+ * '' (empty string), the corresponding style property will be unset.
+ *
+ * @param {DOMElement} node
+ * @param {object} styles
+ */
+ setValueForStyles: function(node, styles) {
+ var style = node.style;
+ for (var styleName in styles) {
+ if (!styles.hasOwnProperty(styleName)) {
+ continue;
+ }
+ if ("production" !== process.env.NODE_ENV) {
+ warnValidStyle(styleName, styles[styleName]);
+ }
+ var styleValue = dangerousStyleValue(styleName, styles[styleName]);
+ if (styleName === 'float') {
+ styleName = styleFloatAccessor;
+ }
+ if (styleValue) {
+ style[styleName] = styleValue;
+ } else {
+ var expansion = CSSProperty.shorthandPropertyExpansions[styleName];
+ if (expansion) {
+ // Shorthand property that IE8 won't like unsetting, so unset each
+ // component to placate it
+ for (var individualStyleName in expansion) {
+ style[individualStyleName] = '';
+ }
+ } else {
+ style[styleName] = '';
+ }
+ }
+ }
+ }
+
+ };
+
+ module.exports = CSSPropertyOperations;
+
+ /* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(23)))
+
+/***/ },
+/* 70 */
+/***/ function(module, exports) {
+
+ /**
+ * Copyright 2013-2015, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ *
+ * @providesModule CSSProperty
+ */
+
+ 'use strict';
+
+ /**
+ * CSS properties which accept numbers but are not in units of "px".
+ */
+ var isUnitlessNumber = {
+ boxFlex: true,
+ boxFlexGroup: true,
+ columnCount: true,
+ flex: true,
+ flexGrow: true,
+ flexPositive: true,
+ flexShrink: true,
+ flexNegative: true,
+ fontWeight: true,
+ lineClamp: true,
+ lineHeight: true,
+ opacity: true,
+ order: true,
+ orphans: true,
+ widows: true,
+ zIndex: true,
+ zoom: true,
+
+ // SVG-related properties
+ fillOpacity: true,
+ strokeDashoffset: true,
+ strokeOpacity: true,
+ strokeWidth: true
+ };
+
+ /**
+ * @param {string} prefix vendor-specific prefix, eg: Webkit
+ * @param {string} key style name, eg: transitionDuration
+ * @return {string} style name prefixed with `prefix`, properly camelCased, eg:
+ * WebkitTransitionDuration
+ */
+ function prefixKey(prefix, key) {
+ return prefix + key.charAt(0).toUpperCase() + key.substring(1);
+ }
+
+ /**
+ * Support style names that may come passed in prefixed by adding permutations
+ * of vendor prefixes.
+ */
+ var prefixes = ['Webkit', 'ms', 'Moz', 'O'];
+
+ // Using Object.keys here, or else the vanilla for-in loop makes IE8 go into an
+ // infinite loop, because it iterates over the newly added props too.
+ Object.keys(isUnitlessNumber).forEach(function(prop) {
+ prefixes.forEach(function(prefix) {
+ isUnitlessNumber[prefixKey(prefix, prop)] = isUnitlessNumber[prop];
+ });
+ });
+
+ /**
+ * Most style properties can be unset by doing .style[prop] = '' but IE8
+ * doesn't like doing that with shorthand properties so for the properties that
+ * IE8 breaks on, which are listed here, we instead unset each of the
+ * individual properties. See http://bugs.jquery.com/ticket/12385.
+ * The 4-value 'clock' properties like margin, padding, border-width seem to
+ * behave without any problems. Curiously, list-style works too without any
+ * special prodding.
+ */
+ var shorthandPropertyExpansions = {
+ background: {
+ backgroundImage: true,
+ backgroundPosition: true,
+ backgroundRepeat: true,
+ backgroundColor: true
+ },
+ border: {
+ borderWidth: true,
+ borderStyle: true,
+ borderColor: true
+ },
+ borderBottom: {
+ borderBottomWidth: true,
+ borderBottomStyle: true,
+ borderBottomColor: true
+ },
+ borderLeft: {
+ borderLeftWidth: true,
+ borderLeftStyle: true,
+ borderLeftColor: true
+ },
+ borderRight: {
+ borderRightWidth: true,
+ borderRightStyle: true,
+ borderRightColor: true
+ },
+ borderTop: {
+ borderTopWidth: true,
+ borderTopStyle: true,
+ borderTopColor: true
+ },
+ font: {
+ fontStyle: true,
+ fontVariant: true,
+ fontWeight: true,
+ fontSize: true,
+ lineHeight: true,
+ fontFamily: true
+ }
+ };
+
+ var CSSProperty = {
+ isUnitlessNumber: isUnitlessNumber,
+ shorthandPropertyExpansions: shorthandPropertyExpansions
+ };
+
+ module.exports = CSSProperty;
+
+
+/***/ },
+/* 71 */
+/***/ function(module, exports) {
+
+ /**
+ * Copyright 2013-2015, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ *
+ * @providesModule ExecutionEnvironment
+ */
+
+ /*jslint evil: true */
+
+ "use strict";
+
+ var canUseDOM = !!(
+ (typeof window !== 'undefined' &&
+ window.document && window.document.createElement)
+ );
+
+ /**
+ * Simple, lightweight module assisting with the detection and context of
+ * Worker. Helps avoid circular dependencies and allows code to reason about
+ * whether or not they are in a Worker, even if they never include the main
+ * `ReactWorker` dependency.
+ */
+ var ExecutionEnvironment = {
+
+ canUseDOM: canUseDOM,
+
+ canUseWorkers: typeof Worker !== 'undefined',
+
+ canUseEventListeners:
+ canUseDOM && !!(window.addEventListener || window.attachEvent),
+
+ canUseViewport: canUseDOM && !!window.screen,
+
+ isInWorker: !canUseDOM // For now, this is true - might change in the future.
+
+ };
+
+ module.exports = ExecutionEnvironment;
+
+
+/***/ },
+/* 72 */
+/***/ function(module, exports, __webpack_require__) {
+
+ /**
+ * Copyright 2014-2015, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ *
+ * @providesModule camelizeStyleName
+ * @typechecks
+ */
+
+ "use strict";
+
+ var camelize = __webpack_require__(73);
+
+ var msPattern = /^-ms-/;
+
+ /**
+ * Camelcases a hyphenated CSS property name, for example:
+ *
+ * > camelizeStyleName('background-color')
+ * < "backgroundColor"
+ * > camelizeStyleName('-moz-transition')
+ * < "MozTransition"
+ * > camelizeStyleName('-ms-transition')
+ * < "msTransition"
+ *
+ * As Andi Smith suggests
+ * (http://www.andismith.com/blog/2012/02/modernizr-prefixed/), an `-ms` prefix
+ * is converted to lowercase `ms`.
+ *
+ * @param {string} string
+ * @return {string}
+ */
+ function camelizeStyleName(string) {
+ return camelize(string.replace(msPattern, 'ms-'));
+ }
+
+ module.exports = camelizeStyleName;
+
+
+/***/ },
+/* 73 */
+/***/ function(module, exports) {
+
+ /**
+ * Copyright 2013-2015, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ *
+ * @providesModule camelize
+ * @typechecks
+ */
+
+ var _hyphenPattern = /-(.)/g;
+
+ /**
+ * Camelcases a hyphenated string, for example:
+ *
+ * > camelize('background-color')
+ * < "backgroundColor"
+ *
+ * @param {string} string
+ * @return {string}
+ */
+ function camelize(string) {
+ return string.replace(_hyphenPattern, function(_, character) {
+ return character.toUpperCase();
+ });
+ }
+
+ module.exports = camelize;
+
+
+/***/ },
+/* 74 */
+/***/ function(module, exports, __webpack_require__) {
+
+ /**
+ * Copyright 2013-2015, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ *
+ * @providesModule dangerousStyleValue
+ * @typechecks static-only
+ */
+
+ 'use strict';
+
+ var CSSProperty = __webpack_require__(70);
+
+ var isUnitlessNumber = CSSProperty.isUnitlessNumber;
+
+ /**
+ * Convert a value into the proper css writable value. The style name `name`
+ * should be logical (no hyphens), as specified
+ * in `CSSProperty.isUnitlessNumber`.
+ *
+ * @param {string} name CSS property name such as `topMargin`.
+ * @param {*} value CSS property value such as `10px`.
+ * @return {string} Normalized style value with dimensions applied.
+ */
+ function dangerousStyleValue(name, value) {
+ // Note that we've removed escapeTextForBrowser() calls here since the
+ // whole string will be escaped when the attribute is injected into
+ // the markup. If you provide unsafe user data here they can inject
+ // arbitrary CSS which may be problematic (I couldn't repro this):
+ // https://www.owasp.org/index.php/XSS_Filter_Evasion_Cheat_Sheet
+ // http://www.thespanner.co.uk/2007/11/26/ultimate-xss-css-injection/
+ // This is not an XSS hole but instead a potential CSS injection issue
+ // which has lead to a greater discussion about how we're going to
+ // trust URLs moving forward. See #2115901
+
+ var isEmpty = value == null || typeof value === 'boolean' || value === '';
+ if (isEmpty) {
+ return '';
+ }
+
+ var isNonNumeric = isNaN(value);
+ if (isNonNumeric || value === 0 ||
+ isUnitlessNumber.hasOwnProperty(name) && isUnitlessNumber[name]) {
+ return '' + value; // cast to string
+ }
+
+ if (typeof value === 'string') {
+ value = value.trim();
+ }
+ return value + 'px';
+ }
+
+ module.exports = dangerousStyleValue;
+
+
+/***/ },
+/* 75 */
+/***/ function(module, exports, __webpack_require__) {
+
+ /**
+ * Copyright 2013-2015, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ *
+ * @providesModule hyphenateStyleName
+ * @typechecks
+ */
+
+ "use strict";
+
+ var hyphenate = __webpack_require__(76);
+
+ var msPattern = /^ms-/;
+
+ /**
+ * Hyphenates a camelcased CSS property name, for example:
+ *
+ * > hyphenateStyleName('backgroundColor')
+ * < "background-color"
+ * > hyphenateStyleName('MozTransition')
+ * < "-moz-transition"
+ * > hyphenateStyleName('msTransition')
+ * < "-ms-transition"
+ *
+ * As Modernizr suggests (http://modernizr.com/docs/#prefixed), an `ms` prefix
+ * is converted to `-ms-`.
+ *
+ * @param {string} string
+ * @return {string}
+ */
+ function hyphenateStyleName(string) {
+ return hyphenate(string).replace(msPattern, '-ms-');
+ }
+
+ module.exports = hyphenateStyleName;
+
+
+/***/ },
+/* 76 */
+/***/ function(module, exports) {
+
+ /**
+ * Copyright 2013-2015, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ *
+ * @providesModule hyphenate
+ * @typechecks
+ */
+
+ var _uppercasePattern = /([A-Z])/g;
+
+ /**
+ * Hyphenates a camelcased string, for example:
+ *
+ * > hyphenate('backgroundColor')
+ * < "background-color"
+ *
+ * For CSS style names, use `hyphenateStyleName` instead which works properly
+ * with all vendor prefixes, including `ms`.
+ *
+ * @param {string} string
+ * @return {string}
+ */
+ function hyphenate(string) {
+ return string.replace(_uppercasePattern, '-$1').toLowerCase();
+ }
+
+ module.exports = hyphenate;
+
+
+/***/ },
+/* 77 */
+/***/ function(module, exports) {
+
+ /**
+ * Copyright 2013-2015, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ *
+ * @providesModule memoizeStringOnly
+ * @typechecks static-only
+ */
+
+ 'use strict';
+
+ /**
+ * Memoizes the return value of a function that accepts one string argument.
+ *
+ * @param {function} callback
+ * @return {function}
+ */
+ function memoizeStringOnly(callback) {
+ var cache = {};
+ return function(string) {
+ if (!cache.hasOwnProperty(string)) {
+ cache[string] = callback.call(this, string);
+ }
+ return cache[string];
+ };
+ }
+
+ module.exports = memoizeStringOnly;
+
+
+/***/ },
+/* 78 */
+/***/ function(module, exports, __webpack_require__) {
+
+ /* WEBPACK VAR INJECTION */(function(process) {/**
+ * Copyright 2013-2015, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ *
+ * @providesModule DOMChildrenOperations
+ * @typechecks static-only
+ */
+
+ 'use strict';
+
+ var Danger = __webpack_require__(79);
+ var ReactMultiChildUpdateTypes = __webpack_require__(84);
+
+ var setTextContent = __webpack_require__(85);
+ var invariant = __webpack_require__(27);
+
+ /**
+ * Inserts `childNode` as a child of `parentNode` at the `index`.
+ *
+ * @param {DOMElement} parentNode Parent node in which to insert.
+ * @param {DOMElement} childNode Child node to insert.
+ * @param {number} index Index at which to insert the child.
+ * @internal
+ */
+ function insertChildAt(parentNode, childNode, index) {
+ // By exploiting arrays returning `undefined` for an undefined index, we can
+ // rely exclusively on `insertBefore(node, null)` instead of also using
+ // `appendChild(node)`. However, using `undefined` is not allowed by all
+ // browsers so we must replace it with `null`.
+ parentNode.insertBefore(
+ childNode,
+ parentNode.childNodes[index] || null
+ );
+ }
+
+ /**
+ * Operations for updating with DOM children.
+ */
+ var DOMChildrenOperations = {
+
+ dangerouslyReplaceNodeWithMarkup: Danger.dangerouslyReplaceNodeWithMarkup,
+
+ updateTextContent: setTextContent,
+
+ /**
+ * Updates a component's children by processing a series of updates. The
+ * update configurations are each expected to have a `parentNode` property.
+ *
+ * @param {array} updates List of update configurations.
+ * @param {array} markupList List of markup strings.
+ * @internal
+ */
+ processUpdates: function(updates, markupList) {
+ var update;
+ // Mapping from parent IDs to initial child orderings.
+ var initialChildren = null;
+ // List of children that will be moved or removed.
+ var updatedChildren = null;
+
+ for (var i = 0; i < updates.length; i++) {
+ update = updates[i];
+ if (update.type === ReactMultiChildUpdateTypes.MOVE_EXISTING ||
+ update.type === ReactMultiChildUpdateTypes.REMOVE_NODE) {
+ var updatedIndex = update.fromIndex;
+ var updatedChild = update.parentNode.childNodes[updatedIndex];
+ var parentID = update.parentID;
+
+ ("production" !== process.env.NODE_ENV ? invariant(
+ updatedChild,
+ 'processUpdates(): Unable to find child %s of element. This ' +
+ 'probably means the DOM was unexpectedly mutated (e.g., by the ' +
+ 'browser), usually due to forgetting a when using tables, ' +
+ 'nesting tags like 
+
+
+
+
+
+
+
+
+
+
+
+ 
+
+ 
+
+ 
+