diff --git a/CHANGELOG.md b/CHANGELOG.md index 164a98724..d94cf307a 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,49 @@ + +## 1.1.0 (2014-11-13) + + +#### Bug Fixes + +* **all:** remove form_introduction and form_basic ((2b5f1025)) +* **fancy number input:** Remove from styleguide ((64be1107), closes (#81949280)) +* **focus-inputs:** remove from styleguide ((ec4c0869), closes (#81955962)) +* **label:** increase padding on labels. ((99ead73f)) +* **links:** + * update link-lowlight style ((79ace832), closes (#82520306)) + * change hover state ((baf77c44)) + * remove superfluous link w/ icon example ((90cb6459), closes (#82491354)) +* **list:** list styles apply to direct child LIs ((bb7d796c)) +* **list-cards:** add missing documentation on `list-card-link` ((4943cc71), closes (#82608820)) +* **list-group:** background color is now transparent ((b2e8fce3)) +* **media-stackable:** improve documentation. ((1bdd3bcf)) +* **panel-clickable:** Update hover colors of clickable classes ((ce036ca4)) +* **panels:** + * close anchor on example ((73393cbe)) + * remove dead media query on panel alt ((7cc6a661)) +* **styleguide:** + * improve font rendering for h3 styles on IE9 and IE10 ((87f7eed1)) + * update comments ((1053935e)) + * text under color chips is readable in IE9 and 10 ((05350d04)) +* **table:** remove superfluous extension of `.row` ((0a4d8130), closes (#82484402)) +* **vertical alignment:** restore css which provided this functionality ((f3589e44)) + + +#### Features + +* **colors:** add bg-glow-5 color ((7b2af147)) +* **forms:** + * restyle form elements ((92f5cb4b)) + * add basic example to docs ((5874f182)) + * reorganize documentation ((1d74594a)) +* **label-tag:** labels now include a tag style used for editable tags ((26d7362c)) +* **list-cards:** create a `list-card-wrapper` class for flex panel components ((15713b1f)) +* **lists:** add useful example of inline lists for layout ((23925dae)) +* **removable-label:** changed styling on removable labels to make it more similar to labels ((6570837c)) +* **toggle-switch:** + * added disabled styling ((b153d57c)) + * added toggle switch style for checkboxes under forms category ((cb07f981)) +* **typography:** add h6 ((def0393c)) + ## 1.0.0 (2014-10-31) diff --git a/package.json b/package.json index 1c6b3eb2e..f52b6a04a 100644 --- a/package.json +++ b/package.json @@ -48,7 +48,7 @@ "yargs": "^1.3.2" }, "description": "***", - "version": "1.0.0", + "version": "1.1.0", "main": "Gruntfile.js", "dependencies": { "bootstrap-sass": "~3.2.0", diff --git a/release/1.1.0/404.html b/release/1.1.0/404.html new file mode 100644 index 000000000..dc5d3485c --- /dev/null +++ b/release/1.1.0/404.html @@ -0,0 +1 @@ +

Whoops! 404 :(

diff --git a/release/1.1.0/Staticfile b/release/1.1.0/Staticfile new file mode 100644 index 000000000..995c01649 --- /dev/null +++ b/release/1.1.0/Staticfile @@ -0,0 +1 @@ +# this is required for static file buildpack diff --git a/release/1.1.0/all.html b/release/1.1.0/all.html new file mode 100644 index 000000000..be0fdb534 --- /dev/null +++ b/release/1.1.0/all.html @@ -0,0 +1,6668 @@ + + + + a brand new styleguide: All + + + + + + + + + + + + +
+
+ +

Accordions

+ + +

These are frequently used in combination with our panel components. They have a header and body.

Accordions can be used with any background color class, add them to the header and body.

NOTE: The 'alligators' (the > in the HAML below) are structural -- +without them, the browser renders the whitespace on the anchor tags, +and the images jump around by a few pixels when they're toggled.

Also see the select tabs for a toggle triggered by a select group.

+

Basic

+

Use this to expand and collapse content.

+
+ Look at this content. +
+
%a.collapsed{data: {toggle: 'collapse'}, href: '#simple-collapse-example'}
+  .when-collapsed
+    Expand me
+  .when-expanded
+    Collapse me
+#simple-collapse-example.collapse
+  Look at this content.
+
+

Sizes

+ +

Default accordion size:

+ +
+
+ This content should hide and show when the trigger is clicked. +
+
+
+
#accordion-1.panel
+  .panel-heading-accordion.bg-neutral-11.collapse-trigger.collapsed{data: {toggle: 'collapse', parent: '#accordion-2'}, href: '#myCollapse-1'}
+    .row
+      .col-md-23
+        %h3.h5.collapse-title.type-em-1.type-primary-2> My fancy application
+  #myCollapse-1.panel-collapse.collapse
+    .panel-body-accordion.bg-neutral-11
+      This content should hide and show when the trigger is clicked.
+

Large accordion size:

+ +
+
+ This content should hide and show when the trigger is clicked. +
+
+
+
#accordion-2.panel
+  .panel-heading-accordion-large.bg-neutral-11.collapse-trigger.collapsed{data: {toggle: 'collapse', parent: '#accordion-2'}, href: '#myCollapse-2'}
+    .row
+      .col-md-23
+        %h3.h5.collapse-title.type-em-1.type-primary-2> My fancy application
+  #myCollapse-2.panel-collapse.collapse
+    .panel-body-accordion.bg-neutral-11
+      This content should hide and show when the trigger is clicked.
+
+

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. +
+
+
+
#accordion-5.panel
+  .panel-heading-accordion.bg-neutral-11.collapse-trigger.collapsed{data: {toggle: 'collapse', parent: '#accordion-3'}, href: '#myCollapse-5'}
+    .row
+      .col-md-23
+        %a
+          .when-collapsed-inline>
+            %i.fa.fa-caret-right.collapse-icon>
+          .when-expanded-inline>
+            %i.fa.fa-caret-down.collapse-icon>
+        %h3.h5.collapse-title.type-em-1.type-primary-2> My fancy application
+  #myCollapse-5.panel-collapse.collapse
+    .panel-body-accordion-divider.bg-neutral-11
+      This content should hide and show when the trigger is clicked.
+
+

Accordion with Shadow:

This adds a shadow to the accordion when it is both open and closed.

+ +
+
+ This content should hide and show when the trigger is clicked. +
+
+
+
#accordion-6.panel.panel-shadow
+  .panel-heading-accordion.bg-neutral-11.collapse-trigger.collapsed{data: {toggle: 'collapse', parent: '#accordion-3'}, href: '#myCollapse-6'}
+    .row
+      .col-md-23
+        %a
+          .when-collapsed-inline>
+            %i.fa.fa-caret-right.collapse-icon>
+          .when-expanded-inline>
+            %i.fa.fa-caret-down.collapse-icon>
+        %h3.h5.collapse-title.type-em-1.type-primary-2> My fancy application
+  #myCollapse-6.panel-collapse.collapse
+    .panel-body-accordion-divider.bg-neutral-11
+      This content should hide and show when the trigger is clicked.
+
+
+

With Icons

+

Accordion with plus/minus icon:

+ +
+
+ This content should hide and show when the trigger is clicked. +
+
+
+
#accordion-3.panel
+  .panel-heading-accordion-large.collapse-trigger.collapsed{data: {toggle: 'collapse', parent: '#accordion-2'}, href: '#myCollapse-3'}
+    .row
+      .col-md-23
+        %a
+          .when-collapsed-inline>
+            %i.fa.fa-plus-square.collapse-icon>
+          .when-expanded-inline>
+            %i.fa.fa-minus-square.collapse-icon>
+        %h3.h5.collapse-title.type-em-1.type-primary-2> My fancy application
+  #myCollapse-3.panel-collapse.collapse
+    .panel-body-accordion.bg-neutral-11
+      This content should hide and show when the trigger is clicked.
+

Accordion with caret right/down icon:

+ +
+
+ This content should hide and show when the trigger is clicked. +
+
+
+
#accordion-4.panel
+  .panel-heading-accordion.collapse-trigger.collapsed{data: {toggle: 'collapse', parent: '#accordion-3'}, href: '#myCollapse-4'}
+    .row
+      .col-md-23
+        %a
+          .when-collapsed-inline>
+            %i.fa.fa-caret-right.collapse-icon>
+          .when-expanded-inline>
+            %i.fa.fa-caret-down.collapse-icon>
+        %h3.h5.collapse-title.type-em-1.type-primary-2> My fancy application
+  #myCollapse-4.panel-collapse.collapse
+    .panel-body-accordion.bg-neutral-11
+      This content should hide and show when the trigger is clicked.
+
+
+

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.

+

Success

+
+
<div class="alert alert-success">
+  <p class="em-high">Success</p>
+</div>
+

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.

+
    +
  • thing 1
    • +
  • thing 2
    • +
+
+
<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>
+

By adding .alert-dismassable 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>
+
+

There are may use cases for alerts. Here is a list of our different alert types.

+ +
+
+ +
+
+ Everything is wonderful. + Be happy. +
+
+
<div class="alert alert-success alert-dismissable">
+  <button class="close" data-dismiss="alert">
+    <i class="fa fa-times"></i>
+  </button>
+  <div class="media">
+    <div class="media-left">
+      <i class="fa fa-check-circle"></i>
+    </div>
+    <div class="media-body em-high">
+      Everything is wonderful.
+      <a class="alert-link" href="http://bit.ly/QCMZM5">Be happy.</a>
+    </div>
+  </div>
+</div>
+ +
+
+ +
+
+ Info for you. + Tell me more. +
+
+
<div class="alert alert-info alert-dismissable">
+  <button class="close" data-dismiss="alert">
+    <i class="fa fa-times"></i>
+  </button>
+  <div class="media">
+    <div class="media-left">
+      <i class="fa fa-info-circle"></i>
+    </div>
+    <div class="media-body em-high">
+      Info for you.
+      <a class="alert-link" href="http://bit.ly/1DFns8H">Tell me more.</a>
+    </div>
+  </div>
+</div>
+ +
+
+ +
+
+ Warning: There is no parking on the dancefloor. + Be alert. +
+
+
<div class="alert alert-warning alert-dismissable">
+  <button class="close" data-dismiss="alert">
+    <i class="fa fa-times"></i>
+  </button>
+  <div class="media">
+    <div class="media-left">
+      <i class="fa fa-exclamation-triangle"></i>
+    </div>
+    <div class="media-body em-high">
+      Warning: There is no parking on the dancefloor.
+      <a class="alert-link" href="http://bit.ly/1uM05DJ">Be alert.</a>
+    </div>
+  </div>
+</div>
+ +
+
+ +
+
+ Something has gone horribly awry. + You've made a huge mistake. +
+
+
+
<div class="alert alert-error alert-dismissable">
+  <button class="close" data-dismiss="alert">
+    <i class="fa fa-times"></i>
+  </button>
+  <div class="media">
+    <div class="media-left">
+      <i class="fa fa-exclamation-triangle"></i>
+    </div>
+    <div class="media-body em-high">
+      Something has gone horribly awry.
+      <a class="alert-link" href="http://bit.ly/1rooFJV">You've made a huge mistake.</a>
+    </div>
+  </div>
+</div>
+
+

Alignment

+

The following classes can be used to for horizontal alignment.

+ .txt-l +

<p class="txt-l">
+  <code>.txt-l</code>
+</p>

+ .txt-c +

<p class="txt-c">
+  <code>.txt-c</code>
+</p>

+ .txt-r +

+
<p class="txt-r">
+  <code>.txt-r</code>
+</p>
+

On display: inline and display: table-cell elements, +the following classes can be used to for vertical alignment.

+ + + + + + +
+ .txt-t + + .txt-m + + .txt-b + + Distillery trust fund Neutra fingerstache plaid messenger bag. + Try-hard health goth PBR Helvetica hashtag. Try-hard narwhal letterpress, + crucifix selfies trust fund swag mustache quinoa chambray iPhone. +
+
<table class="table table-bordered">
+  <tr>
+    <td class="txt-t" width="20%">
+      <code>.txt-t</code>
+    </td>
+    <td class="txt-m" width="20%">
+      <code>.txt-m</code>
+    </td>
+    <td class="txt-b" width="20%">
+      <code>.txt-b</code>
+    </td>
+    <td width="40%">
+      Distillery trust fund Neutra fingerstache plaid messenger bag.
+      Try-hard health goth PBR Helvetica hashtag. Try-hard narwhal letterpress,
+      crucifix selfies trust fund swag mustache quinoa chambray iPhone.
+    </td>
+  </tr>
+</table>
+

If you need to vertically align an element that does not fit into those display types, +take a look at vertical alignment.

+

Avatars

+ + +

Regular avatars are expected to by 100px by 100px.

... +
%img{src: "http://placehold.it/100x100", alt: "...", class: "img-circle avatar", height: "100", width: "100"}
+
+
+

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'

+ + +
+
+ + +
+
.gravatar.gravatar-sm
+  %img{src:"https://secure.gravatar.com/avatar/8b7970c372aabb936ca455127e04c959?s=20&d=blank"}
+  %i.fa.fa-user
+.gravatar.gravatar-sm
+  %img{src:"https://s.gravatar.com/avatar/c99bd3ce00444f946027741d5a5cd9e9?s=20&d=blank"}
+  %i.fa.fa-user
+
+

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'

+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
.gravatar.gravatar-sm
+  %img{src:"https://secure.gravatar.com/avatar/8b7970c372aabb936ca455127e04c959?s=20&d=blank"}
+  %i.fa.fa-user
+  %i.overlay.fa.fa-envelope
+
+.gravatar.gravatar-sm.mlxl
+  %img{src:"https://s.gravatar.com/avatar/c99bd3ce00444f946027741d5a5cd9e9?s=20&d=blank"}
+  %i.fa.fa-user
+  %i.overlay.fa.fa-envelope
+
+.gravatar.gravatar-sm.mlxl
+  %img{src:"https://secure.gravatar.com/avatar/8b7970c372aabb936ca455127e04c959?s=20&d=blank"}
+  %i.fa.fa-user.highlight
+  %i.overlay.fa.fa-check
+
+.gravatar.gravatar-sm.mlxl
+  %img{src:"https://s.gravatar.com/avatar/c99bd3ce00444f946027741d5a5cd9e9?s=20&d=blank"}
+  %i.fa.fa-user
+  %i.overlay.fa.fa-check
+
+

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'

+ + +
+
+ + +
+
.gravatar.gravatar-lg
+  %img{src:"https://secure.gravatar.com/avatar/8b7970c372aabb936ca455127e04c959?s=80&d=blank"}
+  %i.fa.fa-user
+.gravatar.gravatar-lg
+  %img{src:"https://s.gravatar.com/avatar/c99bd3ce00444f946027741d5a5cd9e9?s=80&d=blank"}
+  %i.fa.fa-user
+
+

Back to Top

+

You can use this component to scroll to the top of a page. Leave off the .styleguide-component-wrapper div when using it in other contexts.

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.

+ +
+
.styleguide-component-wrapper
+  %a.back-to-top{:href => "#"}
+
+

Backgrounds

+ + +

Background color classes can be applied to any element. See colors for a list of background classes.

+

Full Bleed

+

This example uses an about us hero image by default, but you can change it to any image you would like. +Keep in mind, blurry, treated images will look better when stretched to fit a particular content area.

+
+

Full bleed background image

+
+
+
<div class='pane bg-full-bleed'>
+  <div class='container'>
+    <h1 class='type-neutral-11 txt-c'>Full bleed background image</h1>
+  </div>
+</div>
+

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(images/such-awesome.jpg)">
+  <div class='container'>
+    <h1 class='type-neutral-11 txt-c'>Full bleed background image</h1>
+  </div>
+</div>
+
+

Overlays

+ +
+
+
+
+
.bg-cloud
+
+
+
+
+
+
.bg-glow
+
+
+
+ +

Buttons

+ + +

Button styles can be applied to any element. Typically you'll want to +use either a <button> or an <a> element:

+
%button.btn.btn-primary Button
Link +
%a.btn.btn-primary{href: "http://trulia.com"} Link
+

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.

+

Full Width

+

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.

+
%button.btn.btn-primary.btn-block Full width button
+
+

Sizes

+

There are two sizes for buttons: Large and default. Simply apply the +size modifier class for the desired size.

<button class="btn btn-primary btn-lg">Large</button>
+
<button class="btn btn-primary">Default</button>
+
+

Styles

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ButtonDisabledClassDescription
btn btn-defaultThis is what buttons look like, this is the go to button style.
btn btn-default-altThis is what buttons look like, this is the go to button style (on white backgrounds).
btn btn-primaryUse this button as the primary call to action
btn btn-lowlightUse this button for other actions, like cancel/dismiss
btn btn-dangerThis button is for delete actions, these actions should also have a confirmation dialog
btn btn-highlightUse this button for other important actions, e.g. restarting apps
btn btn-highlight-altUse this button for other important actions, e.g. marketing call to actions
+

Code

+ + +

In order to show 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:

class Foo
  def bar
    puts 'hi'
  end
end
+
%pre
+  %code.language-ruby
+    :preserve
+      class Foo
+        def bar
+          puts 'hi'
+        end
+      end
+

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.pre-scrollable
+  %code.language-ruby
+    :preserve
+      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
+

Scrollable with too little content:

class Foo
  def bar
    puts 'hi'
  end
end
+
+%pre.pre-scrollable
+  %code.language-ruby
+    :preserve
+      class Foo
+        def bar
+          puts 'hi'
+        end
+      end
+
+

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>
+
+

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>
+
+

Terminal Window

+

+ 
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
+
+
.terminal
+  %pre
+    %code.language-ruby
+      :preserve
+        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
+
+

Colors

+ + +

Our color pallet is composed of several different colors. At any given point in captures the current +evolution of our design and likely includes old and new colors. Whenever possible, evolve the old +colors rather than adding new ones.

+
+
+ Sass variables should only be used in variables.css.scss. +
+

+ They should never be used directly when building components, because it makes + it very hard to change the values later if you can't tell how they might have been used. + You should define your own variables that use these colors in variables.css.scss. +

+
+

This example shows proper use of Sass variables.

$tabs-active-bg-color: $gray-2;
+
+
+
+
+
+
+
    +
  • $gray-1
    • +
  • .bg-neutral-1
    • +
  • .type-neutral-1
    • +
+
+
+
+ +
+
+
+
+
    +
  • $gray-2
    • +
  • .bg-neutral-2
    • +
  • .type-neutral-2
    • +
+
+
+
+
+
+
+
+
    +
  • $gray-3
    • +
  • .bg-neutral-3
    • +
  • .type-neutral-3
    • +
+
+
+
+
+
+
+
+
    +
  • $gray-4
    • +
  • .bg-neutral-4
    • +
  • .type-neutral-4
    • +
+
+
+
+
+
+
+
+
    +
  • $gray-5
    • +
  • .bg-neutral-5
    • +
  • .type-neutral-5
    • +
+
+
+
+
+
+
+
+
    +
  • $gray-6
    • +
  • .bg-neutral-6
    • +
  • .type-neutral-6
    • +
+
+
+
+
+
+
+
+
    +
  • $gray-7
    • +
  • .bg-neutral-7
    • +
  • .type-neutral-7
    • +
+
+
+
+
+
+
+
+
    +
  • $gray-8
    • +
  • .bg-neutral-8
    • +
  • .type-neutral-8
    • +
+
+
+
+
+
+
+
+
    +
  • $gray-9
    • +
  • .bg-neutral-9
    • +
  • .type-neutral-9
    • +
+
+
+
+
+
+
+
+
    +
  • $gray-10
    • +
  • .bg-neutral-10
    • +
  • .type-neutral-10
    • +
+
+
+
+
+
+
+
+
    +
  • $gray-11
    • +
  • .bg-neutral-11
    • +
  • .type-neutral-11
    • +
+
+
+
+
+ +
+
+
+
+
+
    +
  • $dark-1
    • +
  • .bg-dark-1
    • +
  • .type-dark-1
    • +
+
+
+
+
+
+
+
+
    +
  • $dark-2
    • +
  • .bg-dark-2
    • +
  • .type-dark-2
    • +
+
+
+
+
+
+
+
+
    +
  • $dark-3
    • +
  • .bg-dark-3
    • +
  • .type-dark-3
    • +
+
+
+
+
+ +
+
+
+
+
+
    +
  • $brand-1
    • +
  • .bg-brand-1
    • +
  • .type-brand-1
    • +
+
+
+
+
+
+
+
+
    +
  • $brand-2
    • +
  • .bg-brand-2
    • +
  • .type-brand-2
    • +
+
+
+
+
+
+
+
+
    +
  • $brand-3
    • +
  • .bg-brand-3
    • +
  • .type-brand-3
    • +
+
+
+
+
+
+
+
+
    +
  • $brand-4
    • +
  • .bg-brand-4
    • +
  • .type-brand-4
    • +
+
+
+
+
+
+
+
+
    +
  • $brand-5
    • +
  • .bg-brand-5
    • +
  • .type-brand-5
    • +
+
+
+
+
+ +
+
+
+
+
+
    +
  • $accent-5
    • +
  • .bg-accent-5
    • +
  • .type-accent-5
    • +
+
+
+
+
+
+
+
+
    +
  • $accent-2
    • +
  • .bg-accent-2
    • +
  • .type-accent-2
    • +
+
+
+
+
+
+
+
+
    +
  • $accent-3
    • +
  • .bg-accent-3
    • +
  • .type-accent-3
    • +
+
+
+
+
+
+
+
+
    +
  • $accent-4
    • +
  • .bg-accent-4
    • +
  • .type-accent-4
    • +
+
+
+
+
+
+
+
+
    +
  • $accent-5
    • +
  • .bg-accent-5
    • +
  • .type-accent-5
    • +
+
+
+
+
+ +
+
+
+
+
+
    +
  • $error-1
    • +
  • .bg-error-1
    • +
  • .type-error-1
    • +
+
+
+
+
+
+
+
+
    +
  • $error-2
    • +
  • .bg-error-2
    • +
  • .type-error-2
    • +
+
+
+
+
+
+
+
+
    +
  • $error-3
    • +
  • .bg-error-3
    • +
  • .type-error-3
    • +
+
+
+
+
+
+
+
+
    +
  • $error-4
    • +
  • .bg-error-4
    • +
  • .type-error-4
    • +
+
+
+
+
+ +
+
+
+
+
+
    +
  • $warn-1
    • +
  • .bg-warn-1
    • +
  • .type-warn-1
    • +
+
+
+
+
+
+
+
+
    +
  • $warn-2
    • +
  • .bg-warn-2
    • +
  • .type-warn-2
    • +
+
+
+
+
+
+
+
+
    +
  • $warn-3
    • +
  • .bg-warn-3
    • +
  • .type-warn-3
    • +
+
+
+
+
+ +
+
+
+
+
$green-1
+
+
+
+
+
+
$green-2
+
+
+
+ +

Shadows & Glows

+ +
+
+
+
+
+
+
$shadow-1
+
+
+
+
+
+
$shadow-2
+
+
+
+
+
+
$shadow-3
+
+
+
+
+
+
$shadow-4
+
+
+
+
+
+
$glow-1
+
+
+
+
+
+
$glow-2
+
+
+
+
+
+
$glow-3
+
+
+
+
+
+
$glow-4
+
+
+
+
+
+
$glow-5
+
+
+
+
+

+

Console

+ + + +

Traffic Lights

+

Traffic lights are used to show the status of the application. "On" is used for active applications, "off" for inactive, and "loading" for when the status is still loading.

On

+
    +
  • + + 5 +
    • +
  • + + 1 +
    • +
  • + + 8 +
    • +
+
%h3 On
+%ul.traffic-lights.list-unstyled.mvm
+  %li.green-light
+    %i.fa.fa-circle
+    5
+  %li.gray-light
+    %i.fa.fa-circle
+    1
+  %li.red-light
+    %i.fa.fa-circle
+    8

Off

+
    +
  • + +
    • +
  • + +
    • +
  • + +
    • +
+
%h3 Off
+%ul.traffic-lights.list-unstyled.mvm
+  %li.green-light.off
+    %i.fa.fa-circle
+  %li.gray-light.off
+    %i.fa.fa-circle
+  %li.red-light.off
+    %i.fa.fa-circle

Loading

+
    +
  • + +
    • +
  • + +
    • +
  • + +
    • +
+
%h3 Loading
+%ul.traffic-lights.list-unstyled.mvm
+  %li.green-light.off.loading-green
+    %i.fa.fa-circle
+  %li.gray-light.off.loading-gray
+    %i.fa.fa-circle
+  %li.red-light.off.loading-red
+    %i.fa.fa-circle
+

Dividers

+

Dividers draw horizontal lines between different content groupings.

+
+
+
+
+
+
+%hr.divider-alternate-1
+%hr.divider-alternate-2
+
+.contrast-bar
+  %hr.divider-1
+  %hr.divider-2
+
+
+

Ellipsis

+

The type .type-ellipsis-1-line adds ellipsis to text when there is too much. Combine it with .col-md-* classes to get the width you want.

+ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. +

+
%p.type-ellipsis-1-line
+  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

+ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. +

+
%p.type-ellipsis-2-lines
+  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

+ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. +

+
%p.type-ellipsis-3-lines
+  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+
+
+

+ Multi-line ellipsis only works on webkit. +

+
+ +

Embeds

+ + + +

Responsive

+

Allow browsers to determine video or slideshow dimensions based on the width of their containing block by creating an intrinsic ratio that will properly scale on any device.

Rules are directly applied to <iframe>, <embed>, and <object> elements; optionally use an explicit descendant class .embed-responsive-item when you want to match the styling for other attributes.

Pro-Tip! You don't need to include frameborder="0" in your <iframe>s as we override that for you.

16-by-9

+
+
+
+ +
+
+
+
+ +
+
+
+
+ +
+
+
+
<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>
+

4-by-3

+
+
+
+ +
+
+
+
+ +
+
+
+
+ +
+
+
+
<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>
+
+

Autoselect Text Inputs

+

This form is used to show information that a user may wish to copy and paste somewhere.

+
%input.auto-select.form-control{:value => "This should auto highlight", 'data-behavior' => 'AutoSelect', readonly: 'readonly'}
+
+

Checkboxes & Radios

+ + +

Checkboxes are for selecting one or several options in a list while radios are for selecting one option from many.

+

Default (stacked)

+
+
+ +
+
+ +
+
+ +
+
+
%form.styleguide-form{:role => "form"}
+  .checkbox
+    %label
+      %input{:type => "checkbox", :value => ""}
+        Option one is this and that&mdash;be sure to include why it's great
+  .radio
+    %label
+      %input#optionsRadios1{:checked => "", :name => "optionsRadios", :type => "radio", :value => "option1"}
+        Option one is this and that&mdash;be sure to include why it's great
+  .radio
+    %label
+      %input#optionsRadios2{:name => "optionsRadios", :type => "radio", :value => "option2"}
+        Option two can be something else and selecting it will deselect option one
+
+

Inline Checkboxes & Radios

+

Use .checkbox-inline or .radio-inline class to a series of checkboxes or radios for controls appear on the same line.

+
+ + + +
+
+ + + +
+
+
%form.styleguide-form{:role => "form"}
+  .form-group
+    %label.checkbox-inline
+      %input#inlineCheckbox1{:type => "checkbox", :value => "option1"}
+        1
+    %label.checkbox-inline
+      %input#inlineCheckbox2{:type => "checkbox", :value => "option2"}
+        2
+    %label.checkbox-inline
+      %input#inlineCheckbox3{:type => "checkbox", :value => "option3"}
+        3
+
+  .form-group
+    %label.radio-inline
+      %input#inlineradio1{:type => "radio", :value => "option1"}
+        1
+    %label.radio-inline
+      %input#inlineradio2{:type => "radio", :value => "option2"}
+        2
+    %label.radio-inline
+      %input#inlineradio3{:type => "radio", :value => "option3"}
+        3
+
+

Disabled Controls

+

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>
<select class="form-control" disabled>
+  <option>Option 1</option>
+  <option>Option 2</option>
+</select>
<label>
+  <input type="checkbox" disabled>
+  I'm disabled!
+</label>
+
<button class="btn" disabled>
+  Hi
+</button>
+
+

Help Text

+

Help text +Block level help text for form controls.

+ + A block of help text that breaks onto a new line and may extend beyond one line. +
+
%form.styleguide-form{:role => "form"}
+  %input.form-control{:type => "text"}
+  %span.help-block A block of help text that breaks onto a new line and may extend beyond one line.
+
+

Inline Forms

+ + +

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.styleguide-form.form-inline{:role => "form"}
+  .form-group
+    %label.sr-only{:for => "exampleInputEmail2"} Email address
+    %input#exampleInputEmail2.form-control{:placeholder => "Enter email", :type => "email"}
+  .form-group
+    %label.sr-only{:for => "exampleInputPassword2"} Password
+    %input#exampleInputPassword2.form-control{:placeholder => "Password", :type => "password"}
+  .checkbox
+    %label
+      %input{:type => "checkbox"}
+      Remember me
+  %button.btn.btn-primary{:type => "submit"} Sign in
+
+

Inline Forms with Labels

+

Add .form-inline.inline-labels to your <form> for left-aligned and inline-block controls with labels inline with inputs.

+
+ + +
+
+ + +
+
+ +
+ +
+
%form.styleguide-form.form-inline.inline-labels{:role => "form"}
+  .form-group
+    %label{:for => "exampleInputEmail2"} Write a thing
+    %input#exampleInputEmail2.form-control{:placeholder => "Write a thing", :type => "email"}
+  .form-group
+    %label{:for => "exampleSelect"} Choose a thing
+    %select#exampleSelect.form-control
+      %option thing
+  .checkbox
+    %label
+      %input{:type => "checkbox"}
+      Remember me
+  %button.btn.btn-primary{:type => "submit"} Sign in
+
+

Inputs & Labels

+ + +

An input with the label top aligned (this is the default layout).

+
+ + +
+
+
%form.styleguide-form{:role => "form"}
+  .form-group
+    %label{:for => "exampleInputEmail1"}
+      %abbr{:title => "required"} *
+      Email address
+    %input#exampleInputEmail1.form-control{:placeholder => "Enter email", :type => "email", :required => "required", 'aria-required' => "true"}
+

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.styleguide-form.form-horizontal{:role => "form"}
+  .form-group
+    .col-md-6
+      %label.control-label{:for => "exampleInputEmail1"}
+        %abbr{:title => "required"} *
+        Email address
+    .col-md-18
+      %input#exampleInputEmail1.form-control{:placeholder => "Enter email", :type => "email", :required => "required", 'aria-required' => "true"}
+

An input with the label right aligned (N.B., control-label class provides the right alignment):

+
+ +
+ +
+
+
+
%form.styleguide-form.form-horizontal{:role => "form"}
+  .form-group
+    %label.col-md-6.control-label{:for => "exampleInputEmail1"}
+      %abbr{:title => "required"} *
+      Email address
+    .col-md-18
+      %input#exampleInputEmail1.form-control{:placeholder => "Enter email", :type => "email", :required => "required", 'aria-required' => "true"}
+

An unstyled inputs that doesn't have any of the default input styles

+ +
+
%form{:role => "form"}
+  %input.unstyled{"placeholder" => "This is a text input"}
+
+

HTML5 Controls

+

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.styleguide-form{:role => "form"}
+  %input.form-control{:placeholder => "Text input", :type => "text"}
+

Password field

+ +
+
%form.styleguide-form{:role => "form"}
+  %input.form-control{:placeholder => "Password", :type => "password"}
+

Date

+ +
+
%form.styleguide-form{:role => "form"}
+  %input.form-control{:placeholder => "Date", :type => "date"}
+

Number

+ +
+
%form.styleguide-form{:role => "form"}
+  %input.form-control{:placeholder => "Number", :type => "number"}
+

With a min/max and default starting value

+ +
+
%form.styleguide-form{:role => "form"}
+  %input.form-control{:placeholder => "Number", :type => "number", min: 0, max: 2, value: 1}
+

With a different increment value

+ +
+
%form.styleguide-form{:role => "form"}
+  %input.form-control{:placeholder => "Number", :type => "number", step: 5}
+

Email

Use this with fields that require email addresses to pop up the correct keyboard on mobile

+ +
+
%form.styleguide-form{:role => "form"}
+  %input.form-control{:placeholder => "Email", :type => "email"}
+

URL

Use this with fields that require urls to pop up the correct keyboard on mobile

+ +
+
%form.styleguide-form{:role => "form"}
+  %input.form-control{:placeholder => "URL", :type => "url"}
+

Telephone

Use this with fields that require telephone numbers to pop up the dialpad on mobile

+ +
+
%form.styleguide-form{:role => "form"}
+  %input.form-control{:placeholder => "Telephone", :type => "tel"}
+
+

Sizing

+

Set heights using the form control classes .input-lg and .input-sm. +Create larger or smaller form controls that match button sizes.

<input class="form-control input-lg" placeholder=".input-lg" type="text">
<input class="form-control" placeholder="Default Input" type="text">
+
<input class="form-control input-sm" placeholder=".input-sm" type="text">
+

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.styleguide-form{:role => "form"}
+  .row
+    .col-md-4
+      %input.form-control{:placeholder => ".col-xs-2", :type => "text"}
+    .col-md-6
+      %input.form-control{:placeholder => ".col-xs-3", :type => "text"}
+    .col-md-8
+      %input.form-control{:placeholder => ".col-xs-4", :type => "text"}
+
+

Search Inputs

+

Use this input when creating a search component.

+ + +
+
<div class="form-group form-group-search">
+  <input class="form-control" placeholder="This is a searchbox">
+  <i class="fa fa-search"></i>
+</div>
+
+

Read-Only Inputs

+

Add the readonly boolean attribute on an input to prevent user input and style the input as disabled.

+
<input class="form-control" type="text" placeholder="Readonly input here..." readonly>
+
+

Selects

+ + +

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.styleguide-form{:role => "form"}
+  %select.form-control
+    %option default option
+    %option an option
+    %option another option
+
+

Sizing

+

Set heights using the form control classes .input-lg and .input-sm. +Create larger or smaller form controls that match button sizes.

<select class="form-control input-lg">
+  <option>Option 1</option>
+  <option>Option 2</option>
+</select>
<select class="form-control" Input">
+  <option>Option 1</option>
+  <option>Option 2</option>
+</select>
+
<select class="form-control input-sm">
+  <option>Option 1</option>
+  <option>Option 2</option>
+</select>
+

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.styleguide-form{:role => "form"}
+  .row
+    .col-md-4
+      %input.form-control{:placeholder => ".col-xs-2", :type => "text"}
+    .col-md-6
+      %input.form-control{:placeholder => ".col-xs-3", :type => "text"}
+    .col-md-8
+      %input.form-control{:placeholder => ".col-xs-4", :type => "text"}
+
+

Fancy Selects

+

This is a fancy select!

+ +
+ +
+
+
%form.styleguide-form{:role => "form", 'style' => 'width: 200px'}
+  %label{:for => "fancy-select"} Description
+  .select-fancy
+    %select.form-control
+      %option Fancy Option 1
+      %option Fancy Option 2
+
+

Static Controls

+

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:

+
+ +
+

email@example.com

+
+
+
+ +
+ +
+
+
+
%form.form-horizontal.styleguide-form{:role => "form"}
+  .form-group
+    %label.col-md-4.control-label Email
+    .col-sm-10
+      %p.form-control-static email@example.com
+  .form-group
+    %label.col-md-4.control-label{:for => "inputPassword"} Password
+    .col-sm-10
+      %input#inputPassword.form-control{:placeholder => "Password", :type => "password"}
+

Here's an example in a vertical form:

+
+ +

someguy@test.com

+
+
+ + +
+
+
%form.styleguide-form{:role => "form"}
+  .form-group
+    %label.control-label Email
+    %p.form-control-static someguy@test.com
+  .form-group
+    %label.control-label{:for => "name"} Name
+    %input#name.form-control{:placeholder => "name"}
+
+

Text Areas

+

Text areas are used for larger amounts of input.

+
+ + +
+
+
%form.styleguide-form{:role => "form"}
+  .form-group
+    %label{:for => "exampleTextAreaId"} Description
+    %textarea#exampleTextAreaId.form-control{:rows => "3"}
+
+

Toggle Switches

+

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>
+
+

Validations

+

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.

+
+ + + + Error help text + +
+
<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>
+
+
+ + + Error help text + +
+
+
+
<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>
+

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>
+
+

Grids

+ + + +

+ Pivotal ui (via bootstrap) includes a responsive, mobile first fluid grid system that + appropriately scales up to 24 columns as the device or viewport size increases. + To work with the system, you need to treat mobile as your default + and build more complex layouts up from there. +

+ +

Introduction

+

Grid systems are used for creating page layouts through a series of rows and columns that house your content. +Here's how the bootstrap grid system works:

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:

Look to the examples for applying these principles to your code.

+

Media Queries

+

We use the following media queries in our sass files to create the key breakpoints in our grid system.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameSizeVariable Name
mobileno media query since this is the default in bootstrap
x-small480px$screen-xs-min
small768px$screen-sm-min
medium992px$screen-md-min
large1200px$screen-lg-min
x-large1800px$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 behaviorhorizontal at all timescollapsed to start, horizontal above breakpoints
container widthnone (auto)750px970px1170px
class prefix.col-xs-.col-sm-.col-md-.col-lg-
# of columns24
column widthauto~62px~81px~97px
gutter width30px (15px on each side of a column)
nestableyes
offsetsyes
column orderingyes
+ +

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>
+
+

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>
+
+

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>
+
+

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>
+

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.

+ + + + + + + + + + + + + + + +
ClassPadding between columns
default20px
.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>
+
+
+
<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>
+
+
+
+
<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>
+
+

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>
+
+

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>
+
+

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>
+
+

Iconography

+ + +

We use Font Awesome for scalable vector icons that can be customized - size, color, drop shadow, +and anything that can be done with CSS. These icons will always match the font color.

Here are some commonly used icons:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ButtonClassDescription
.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.fa.fa-download.type-brand-3.title
+
+

Spinners

+

Spinners are used to show that some action is in progress. Spinners come in two sizes: large and small.

+ +
.spinner-lg.bkg-default-5.out
+  %i.fa.fa-spin.fa-cog.mtxl
+
+.spinner-sm.bkg-default-5.out
+  %i.fa.fa-spin.fa-cog.mtxl
+
+

Images

+ + + +

Responsive

+

Images can be made responsive-friendly via the addition of the .img-responsive class. This applies max-width: 100%; and height: auto; to the image so that it scales nicely to the parent element. See bootstrap 3 for further documentation of this feature.

+
+ Responsive image +
+
+ Responsive image +
+
+ Responsive image +
+
+
.row
+  .col-md-5
+    %img.img-responsive{:alt => "Responsive image", :src => "../images/such-awesome.jpg"}
+  .col-md-7
+    %img.img-responsive{:alt => "Responsive image", :src => "../images/such-awesome.jpg"}
+  .col-md-12
+    %img.img-responsive{:alt => "Responsive image", :src => "../images/such-awesome.jpg"}
+
+

Responsive SVG

+

SVG can be made responsive-friendly via the addition of the .svg-responsive class on a +wrapper div and the .svg-content class on the svg itself. You'll also need to to define +the height to width ratio as an inline padding bottom style on the .svg-responsive element like so:

<div class="svg-responsive" style="padding-bottom: 78.31%">
+  <svg class="svg-content" viewBox="38 45 125 120" preserveAspectRatio="xMinYMin meet">
+    ...
+  </svg>
+</div>
+

The padding-bottom should equal the height divided by the width of your specific svg.

For more information about setting up your svg, read this article about svg coordinates systems by Sara Soueidan.

+
+
+
+ + + + + + + + + + + + + + + + + +
+
+
+
+ + + + + + + + + + + + + + + + + +
+
+
+
+ + + + + + + + + + + + + + + + + +
+
+
+ +

Labels

+ + +

Labels are based on Bootstrap's labels. +Here's an example of a label on its own.

new +
<span class="label label-primary">new</span>
+

You can also place labels within HTML elements. +It will be sized based on the element's font size and its font modifiers.

I am a P. + new +

<p>I am a P.
+  <span class="label label-primary">new</span>
+</p>

I am an H3. + new +

<h3>I am an H3.
+  <span class="label label-primary">new</span>
+</h3>

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>
+
+

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.

Removable + + +
<span class="label-removable">Removable
+  <a class="close-btn fa fa-close"></a>
+</span>
+
+

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.

+

Links

+

There are five 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 with an icon + +
%a{href: "http://google.com"}
+  %i.fa.fa-plus
+  link with an icon
+
+ + + + + + + + + + + + + + + + + + + + + + + + +
LinkClassDescription
default linkThis is what buttons look like, this is the go to button style.
lowlight linklink-lowlightI'm afraid I can't let you do that, yet.
lowlight link alternatelink-lowlight-altLess important links
inverse linklink-inverseI go on a non-white background
+

Lists

+ + +

This section contains different list styles.

+

Breadcrumb

+

The .list-breadcrumb can be used to provide additional page navigation.

Breadcrumbs use their own monospace font-family.

+
%ul.list-breadcrumb
+  %li
+    %a{href: "http://google.com"}
+      Parent
+  %li
+    %a{href: "http://google.com"}
+      Child
+  %li.current
+    %span
+      Current Page
+
+

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.

    +
  • +

    list-card-1

    +
    • +
<ul class="list-cards list-card-1 list-cards-xs">
+  <li class="bg-neutral-7">
+    <p>list-card-1</p>
+  </li>
+</ul>
    +
  • +

    list-card-2

    +
    • +
+
<ul class="list-cards list-card-2 list-cards-xs">
+  <li class="bg-neutral-7">
+    <p>list-card-2</p>
+  </li>
+</ul>
+

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 BreakpointsClass 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>
+

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>
+
+

Checked

+

Replaces the default bullet image with the font awesome checkmark.

    +
  • + feep +
    • +
  • + fop +
    • +
  • + meep +
    • +
+
%ul.list-checked
+  %li
+    feep
+  %li
+    fop
+  %li
+    meep
+
+

Event

+

This is a special list-group, with styles per-event for colors and icons.

Note: If you need a list item that with an icon that isn't shown below, +take a look at icons, and let us know which one you want.

    +
  • +
    +
    +
    +
    +
    +
    started app
    +
    +
    +
    • +
  • +
    +
    +
    +
    +
    +
    stopped app
    +
    +
    +
    • +
  • +
    +
    +
    +
    +
    +
    updated app
    +
    +
    +
    • +
  • +
    +
    +
    +
    +
    +
    scaled app
    +
    +
    +
    • +
  • +
    +
    +
    +
    +
    +
    app crashed
    +
    +
    +
    • +
  • +
    +
    +
    +
    +
    +
    created app
    +
    +
    +
    • +
  • +
    +
    +
    +
    +
    +
    renamed app
    +
    +
    +
    • +
+
%ul.list-group.event-list
+  %li.list-group-item.started
+    .media
+      .pull-left
+        .event-icon
+      .media-body
+        .event-title started app
+  %li.list-group-item.stopped
+    .media
+      .pull-left
+        .event-icon
+      .media-body
+        .event-title stopped app
+  %li.list-group-item.updated
+    .media
+      .pull-left
+        .event-icon
+      .media-body
+        .event-title updated app
+  %li.list-group-item.scaled
+    .media
+      .pull-left
+        .event-icon
+      .media-body
+        .event-title scaled app
+  %li.list-group-item.crashed
+    .media
+      .pull-left
+        .event-icon
+      .media-body
+        .event-title app crashed
+  %li.list-group-item.created
+    .media
+      .pull-left
+        .event-icon
+      .media-body
+        .event-title created app
+  %li.list-group-item.renamed
+    .media
+      .pull-left
+        .event-icon
+      .media-body
+        .event-title renamed app
+
+

Group

+

Use this list when you need simple gray borders between items

    +
  • + item 1 +
    • +
  • + item 2 +
    • +
  • + item 3 +
    • +
+
%ul.list-group
+  %li.list-group-item
+    item 1
+  %li.list-group-item
+    item 2
+  %li.list-group-item
+    item 3
+
+

Inline

+

An inline list is one of the three methods for laying out content (including grids and the media block).

    +
  • + feep +
    • +
  • + fop +
    • +
  • + meep +
    • +
+
%ul.list-inline
+  %li
+    feep
+  %li
+    fop
+  %li
+    meep
+

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>
+
+

Inline Divider

+

Places all list items on a single line with display: inline-block; and some light padding. The .list-inline-divider +also adds a simple gray border (add .list-inline-divider-light to make the border white).

+
+ +
+
%ul.list-inline-divider
+  %li
+    %a.type-em-1{href: "http://google.com"}<
+      Edit
+  %li
+    %a.type-em-1{href: "http://google.com"}<
+      Invite
+
+.contrast-bar
+  %ul.list-inline-divider.list-inline-divider-light
+    %li
+      %a.type-em-1{href: "http://google.com"}<
+        Edit
+    %li
+      %a.type-em-1{href: "http://google.com"}<
+        Invite
+
+
+
+

Ordered

+
    +
  1. + feep +
    2. +
  2. + fop +
    3. +
  3. + meep +
    4. +
+
%ol
+  %li
+    feep
+  %li
+    fop
+  %li
+    meep
+
+

Steps

+

Use this list when you need to show the steps in a flow.

    +
  1. + Sign up Account +
    2. +
  2. + Create Organization +
    3. +
  3. + Do other things +
    4. +
  4. + And more things +
    5. +
+
%ol.list-steps
+  %li
+    Sign up Account
+  %li.current
+    Create Organization
+  %li
+    Do other things
+  %li
+    And more things
+
+
+

Unordered

+
    +
  • + feep +
    • +
  • + fop +
    • +
  • + meep +
    • +
+
%ul.list-unordered
+  %li
+    feep
+  %li
+    fop
+  %li
+    meep
+
+

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.list-unstyled
+  %li
+    feep
+  %li
+    fop
+  %li
+    meep
+
+

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.

    +
  • +
    + item 1 +
    +
    • +
  • +
    + item 2 +
    +
    • +
  • +
    + item 3, which is taller +
    +
    • +
+
%ul.list-vertical-divider
+  %li.col-md-8
+    .height-enforcer
+      item 1
+  %li.col-md-8
+    .height-enforcer
+      item 2
+  %li.col-md-8
+    .height-enforcer{style: 'height: 200px'}
+      item 3, which is taller
+
    +
  • +
    + item 1 +
    +
    • +
  • +
    + item 2 +
    +
    • +
  • +
    + item 3, which is taller +
    +
    • +
+
%ul.list-vertical-divider-2
+  %li.col-md-8
+    .height-enforcer
+      item 1
+  %li.col-md-8
+    .height-enforcer
+      item 2
+  %li.col-md-8
+    .height-enforcer{style: 'height: 200px'}
+      item 3, which is taller
+
+

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:
llistSpace on the inside of each of the li direct children of the element
Location:
hhorizontalAdds spacing to the left and right of the li.
vverticalAdds spacing to the top and bottom of the li.
Size:
xlextra largeAdds 21 pixels of space
llargeAdds 10 pixels of space
mmediumAdds 7 pixels of space
ssmallAdds 5 pixels of space
nnoneSets any existing space to 0
+ +

Vertical Spacing Options (n -> xl)

+
    +
  • + feep +
    • +
  • + fop +
    • +
  • + meep +
    • +
+
%ul.lvn
+  %li
+    feep
+  %li
+    fop
+  %li
+    meep
    +
  • + feep +
    • +
  • + fop +
    • +
  • + meep +
    • +
+
%ul.lvs
+  %li
+    feep
+  %li
+    fop
+  %li
+    meep
    +
  • + feep +
    • +
  • + fop +
    • +
  • + meep +
    • +
+
%ul.lvm
+  %li
+    feep
+  %li
+    fop
+  %li
+    meep
    +
  • + feep +
    • +
  • + fop +
    • +
  • + meep +
    • +
+
%ul.lvl
+  %li
+    feep
+  %li
+    fop
+  %li
+    meep
    +
  • + feep +
    • +
  • + fop +
    • +
  • + meep +
    • +
+
%ul.lvxl
+  %li
+    feep
+  %li
+    fop
+  %li
+    meep
+
+

Horizontal Spacing Options (n -> xl)

+
    +
  • + feep +
    • +
  • + fop +
    • +
  • + meep +
    • +
+
%ul.list-inline.lhn
+  %li
+    feep
+  %li
+    fop
+  %li
+    meep
    +
  • + feep +
    • +
  • + fop +
    • +
  • + meep +
    • +
+
%ul.list-inline.lhs
+  %li
+    feep
+  %li
+    fop
+  %li
+    meep
    +
  • + feep +
    • +
  • + fop +
    • +
  • + meep +
    • +
+
%ul.list-inline.lhm
+  %li
+    feep
+  %li
+    fop
+  %li
+    meep
    +
  • + feep +
    • +
  • + fop +
    • +
  • + meep +
    • +
+
%ul.list-inline.lhl
+  %li
+    feep
+  %li
+    fop
+  %li
+    meep
    +
  • + feep +
    • +
  • + fop +
    • +
  • + meep +
    • +
+
%ul.list-inline.lhxl
+  %li
+    feep
+  %li
+    fop
+  %li
+    meep
+
+

Maps

+

Full width map with marker at Pivotal Labs SF location, and an optional informational overlay.

+
+
+
+
+
+
+

Location

+
Pivotal Software Inc.
+ 875 Howard Street
+ San Francisco, CA 94103 +
+

Support: support@run.pivotal.io

+

Twitter: @pivotalws

+
+
+
+
+
+
+
+
+
+
<script src="http://maps.googleapis.com/maps/api/js?libraries=places"></script>
+<div class='map-wrapper'>
+  <div class='pane'>
+    <div class='container pan'>
+      <div class='row'>
+        <div class='col-sm-6 col-md-8 col-sm-offset-1'>
+          <div class='map-overlay panel panel-basic bg-neutral-10 paxxl'>
+            <h3 class="h2">Location</h3>
+            <address class='h4 pvl'>Pivotal Software Inc.<br>
+              875 Howard Street<br>
+              San Francisco, CA 94103
+            </address>
+            <p class='h4'>Support: <a href='mailto:support@run.pivotal.io'>support@run.pivotal.io</a></p>
+            <p class='h4'>Twitter: <a href='https://twitter.com/pivotalws'>@pivotalws</a></p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class='pane pane-map'>
+    <div id='labs-map'></div>
+  </div>
+</div>
+
var maps = (function() {
+  var self = this;
+  var map;
+
+  var mapOptions = {
+    placeId: "ChIJ9w1pfYiAhYAR45k8AD-TjhA",
+    center: new google.maps.LatLng(37.781787,-122.403911),
+    mapElementId: 'labs-map',
+    zoom: 18
+  };
+
+  var initialize = function() {
+    map = new google.maps.Map(document.getElementById(mapOptions.mapElementId), {
+      center: mapOptions.center,
+      zoom: mapOptions.zoom,
+      disableDefaultUI: true
+    });
+
+    var request = {
+      placeId: mapOptions.placeId
+    };
+
+    var service = new google.maps.places.PlacesService(map);
+    service.getDetails(request, createMarker);
+  };
+
+  var createMarker = function(place, status) {
+    if (status == google.maps.places.PlacesServiceStatus.OK) {
+      new google.maps.Marker({
+        map: map,
+        position: place.geometry.location
+      });
+    }
+  };
+
+  self.initialize = initialize;
+  return self;
+})();
+
+google.maps.event.addDomListener(window, 'load', maps.initialize);
+
+

Marketing

+ + + +

Instance Scale

+

The instance scale widget is an svg and an associated code block. Include the SVG +and code in your page and the javascript and css will handle all of the behaviors. +Add the class .selected-group to the .instance-column you would like to be +highlighted on page load.

+
+
+ + + + + + + + + + + + + + + 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>
+
+

Media

+ + +

The default media displays a media object (images, video, audio) to the left or right of a content block.

+ + ... + +
+

Media heading

+ 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. +
+
+
+
+

Media heading

+ 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. +
+ + ... + +
+
.media
+  %a.media-left{:href => "#"}
+    %img.media-object{:alt => "...", :src => "http://placehold.it/64x64"}
+  .media-body
+    %h4.media-heading Media heading
+    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.
+
+.media
+  .media-body
+    %h4.media-heading Media heading
+    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.
+  %a.media-right{:href => "#"}
+    %img.media-object{:alt => "...", :src => "http://placehold.it/64x64"}
+

Wrap the image in a fixed-size .image-container to make sure the image isn't +larger than the container

+ +
+ ... +
+ +
+

Media heading

+

+ 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. +

+
+
+
.media
+  %a.media-left{:href => "#"}
+    .image-container{style: "width: 100px; height: 50px;"}
+      %img.media-object{:alt => "...", :src => "http://placehold.it/64x64"}
+  .media-body
+    %h4.media-heading Media heading
+    %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.
+

You can also nest media objects inside of each other (useful for comment threads or articles lists).

+ + ... + +
+

Media heading

+

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 heading

+ 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 heading

+ 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 heading

+ 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. +
+
+
+
+
+.media
+  %a.media-left{:href => "#"}
+    %img.media-object{:alt => "...", :src => "http://placehold.it/64x64"}
+  .media-body
+    %h4.media-heading Media heading
+    %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.
+
+    / Nested media object
+    .media
+      %a.media-left{:href => "#"}
+        %img.media-object{:alt => "...", :src => "http://placehold.it/64x64"}
+      .media-body
+        %h4.media-heading Nested media heading
+        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
+        .media
+          %a.media-left{:href => "#"}
+            %img.media-object{:alt => "...", :src => "http://placehold.it/64x64"}
+          .media-body
+            %h4.media-heading Nested media heading
+            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
+    .media
+      %a.media-left{:href => "#"}
+        %img.media-object{:alt => "...", :src => "http://placehold.it/64x64"}
+      .media-body
+        %h4.media-heading Nested media heading
+        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.
+
+

Alignment

+

The images or other media can be aligned top, middle, or bottom. The default is top aligned.

+ + ... + +
+

Top aligned media

+ 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. +
+
+
+ + ... + +
+

Middle aligned media

+ 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. +
+
+
+ + ... + +
+

Bottom aligned media

+ 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. +
+
+
.media
+  %a.media-left{:href => "#"}
+    %img.media-object{:alt => "...", :src => "http://placehold.it/40x40"}
+  .media-body
+    %h4.media-heading Top aligned media
+    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.
+
+.media
+  %a.media-left.media-middle{:href => "#"}
+    %img.media-object{:alt => "...", :src => "http://placehold.it/40x40"}
+  .media-body
+    %h4.media-heading Middle aligned media
+    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.
+
+.media
+  %a.media-left.media-bottom{:href => "#"}
+    %img.media-object{:alt => "...", :src => "http://placehold.it/40x40"}
+  .media-body
+    %h4.media-heading Bottom aligned media
+    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.
+
+

Stackable

+

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.

+ + ... + +
+

Extra-small stackable

+
+
+
+ + ... + +
+

Small stackable

+
+
+
+ + ... + +
+

Medium stackable

+
+
+
+ + ... + +
+

Large stackable

+
+
+
.media.media-stackable-xs
+  %a.media-left{:href => "#"}
+    %img.media-object{:alt => "...", :src => "http://placehold.it/100x100"}
+  .media-body
+    %p Extra-small stackable
+
+.media.media-stackable-sm
+  %a.media-left{:href => "#"}
+    %img.media-object{:alt => "...", :src => "http://placehold.it/100x100"}
+  .media-body
+    %p Small stackable
+
+.media.media-stackable-md
+  %a.media-left{:href => "#"}
+    %img.media-object{:alt => "...", :src => "http://placehold.it/100x100"}
+  .media-body
+    %p Medium stackable
+
+.media.media-stackable-lg
+  %a.media-left{:href => "#"}
+    %img.media-object{:alt => "...", :src => "http://placehold.it/100x100"}
+  .media-body
+    %p Large stackable
+
+

Modals

+

Modals bring desired content to the foreground and de-emphasize the rest of the page.

+ +

+

+ + + + + + + + +

Panes

+

Panes are horizontal groupings of content that are usually used to +span the full browser window width. It's going to look funny here, +a better way to view it is on the panes page.

You can combine up to two background classes on the pane component. +The one on the .pane element will span the full browser width. The +one on the .container element will be constrained to the content width.

+
+

This is a pane

+
+
+ +
<div class="pane bg-dark-1">
+  <div class="container bg-glow">
+    <h1 class="type-neutral-11">This is a pane</h1>
+  </div>
+</div>
+
+
+
+

This is a pane

+
+ A laptop showing Pivotal Web Services dashboard. +
+
+
+
+
+

This is another pane

+
+
+ +
<div class="pane pane-offset bg-dark-1">
+  <div class="container bg-glow">
+    <h1 class="type-neutral-11">This is a pane</h1>
+    <div class="pane-image">
+      <img class="img-responsive" src="../images/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>
+
+
+

Panels

+ + +

Panels are often used to group related content. They include box headers, footers, and can be combined with any backgrounds.

Panels are typically a combination of contours, backgrounds, and content including headers and footers. This section describes the contours.

+

Alternate

+

Alternate panels can be in a default, off, or danger state.

+
+ Alternate Panel +
+
+
.panel.panel-alt
+  .panel-body
+    Alternate Panel
+
+ Danger alternate panel +
+
+
.panel.panel-alt.panel-danger
+  .panel-body
+    Danger alternate panel
+
+ Stopped alternate panel +
+
+
.panel.panel-alt.panel-off
+  .panel-body
+    Stopped alternate panel
+
+ Off alternate panel +
+
+
.panel.panel-alt.panel-empty
+  .panel-body
+    Off alternate panel
+
+ Editing alternate panel +
+
+
.panel.panel-alt.panel-editing
+  .panel-body
+    Editing alternate panel
+
+

Basic

+

Basic Panels are the new Simple Panels for G-Major

+
+ Basic Panel +
+
+
.panel.panel-basic.bg-neutral-11
+  .panel-body
+    Basic Panel
+
+

Card

+

Using panels with card lists makes any .panel-body have a minimum "card" height.

    +
  • +
    + Card Panel +
    +
    • +
  • +
    + Card Panel +
    +
    • +
  • +
    + Card Panel +
    +
    • +
+
%ul.list-cards.list-cards-sm.list-card-2
+  %li.panel.panel-clickable-alt.bg-neutral-11
+    .panel-body
+      Card Panel
+  %li.panel.panel-clickable-alt.bg-neutral-11
+    .panel-body
+      Card Panel
+  %li.panel.panel-clickable-alt.bg-neutral-11
+    .panel-body
+      Card Panel
+
+

Clickable

+

These panels lighten on hover to indicate that they are clickable. +Please use them when a click on the panel triggers an action.

+
+ Panel Clickable +
+
+
.panel.panel-clickable
+  .panel-body
+    Panel Clickable
+
+ Panel Clickable Alt +
+
+
.panel.panel-clickable-alt
+  .panel-body
+    Panel Clickable Alt
+

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.

+
+

+ hover-target-1 - default text color => link color +

+
+ +
%a.panel.panel-clickable
+  .panel-body
+    %p.hover-target-1
+      hover-target-1 - default text color => link color
+
+

+ hover-target-2 - light gray text => default text color +

+
+ +
%a.panel.panel-clickable
+  .panel-body
+    %p.hover-target-2
+      hover-target-2 - light gray text => default text color
+
+

+ hover-target-3 - $gray-9 background => white background +

+
+ +
%a.panel.panel-clickable
+  .panel-body
+    %p.hover-target-3
+      hover-target-3 - $gray-9 background => white background
+
+

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.

+
Body Content
+
Footer Content
+
+
<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>
+
+
+
+ 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>
+
+

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) +
+
+
.panel.panel-highlight
+  .panel-body
+    Not Hoverable (use when the panel has no associated action, for instance if the action is disabled due to lack of permissions)
+
+

Scrollable

+

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.

+
+

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.

+
+
+
.panel.panel-scrollable.bg-neutral-11
+  .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.
+
+

Shadow

+

Shadow panels add a bottom shadow to the panel.

+
+ Shadow Panel +
+
+
.panel.panel-shadow-1.bg-neutral-11
+  .panel-body
+    Shadow Panel
+
+ Shadow Panel +
+
+
.panel.panel-shadow-2.bg-neutral-11
+  .panel-body
+    Shadow Panel
+
+ Shadow Panel +
+
+
.panel.panel-shadow-3.bg-neutral-11
+  .panel-body
+    Shadow Panel
+
+ Shadow Panel +
+
+
.panel.panel-shadow-4.bg-neutral-11
+  .panel-body
+    Shadow Panel
+

Simple

+
+
+ Simple Panel +
+
+
.panel.panel-simple.bg-neutral-11
+  .panel-body
+    Simple 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-cards-link panel panel-flex panel-tile bg-neutral-11" href="http://www.google.com/">
+      <div class="panel-body">
+        Hover to see secondary state.
+      </div>
+      <div class="panel-footer">
+        This is the footer
+      </div>
+    </a>
+  </li>
+</ul>
+
+

Print

+

Similar to the regular responsive classes, use these for toggling content for print.

+ + + + + + + + + + + + + + + + + + + + +
ClassesBrowserPrint
+ .visible-print-block
+ .visible-print-inline
+ .visible-print-inline-block + 		Visible
.hidden-printVisible
+ +

Progress Bars

+

This section contains static progress bar styles.

+
+
+ 0% +
+
+
+

+ 0 MB of 100 MB Used +

+
+
+
+ 3% +
+
+
+

+ 3 MB of 100 MB Used +

+
+
+
+ 9% +
+
+
+

+ 9 MB of 100 MB Used +

+
+
+
+ 60% +
+
+
+

+ 60 MB of 100 MB Used +

+
+
+
+ 90% +
+
+
+

+ 90 MB of 100 MB Used +

+
.progress
+  .progress-bar{"aria-valuemax" => "100", "aria-valuemin" => "0", "aria-valuenow" => "0", :role => "progressbar", :style => "width: 0%;"}
+    .label
+      0%
+%p
+  0 MB of 100 MB Used
+
+.progress
+  .progress-bar{"aria-valuemax" => "100", "aria-valuemin" => "0", "aria-valuenow" => "3", :role => "progressbar", :style => "width: 3%;"}
+    .label
+      3%
+%p
+  3 MB of 100 MB Used
+
+.progress
+  .progress-bar{"aria-valuemax" => "100", "aria-valuemin" => "0", "aria-valuenow" => "9", :role => "progressbar", :style => "width: 9%;"}
+    .label
+      9%
+%p
+  9 MB of 100 MB Used
+
+.progress
+  .progress-bar{"aria-valuemax" => "100", "aria-valuemin" => "0", "aria-valuenow" => "60", :role => "progressbar", :style => "width: 60%;"}
+    .label
+      60%
+%p
+  60 MB of 100 MB Used
+
+.progress
+  .progress-bar{"aria-valuemax" => "100", "aria-valuemin" => "0", "aria-valuenow" => "90", :role => "progressbar", :style => "width: 90%;"}
+    .label
+      90%
+%p
+  90 MB of 100 MB Used
+
+

Responsive Utilities

+

Use a single or combination of the available classes for toggling content across viewport breakpoints.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ Extra small devices + Phones (<768px) + + Small devices + Tablets (≥768px) + + Medium devices + Desktops (≥992px) + + Large devices + Desktops (≥1200px) +
.visible-xs-*Visible
.visible-sm-*Visible
.visible-md-*Visible
.visible-lg-*Visible
.hidden-xsVisibleVisibleVisible
.hidden-smVisibleVisibleVisible
.hidden-mdVisibleVisibleVisible
.hidden-lgVisibleVisibleVisible
+

The .visible-*-* classes for each breakpoint come in three variations, one for each CSS display property value listed below.

+ + + + + + + + + + + + + + + + + + + + + +
Group of classesCSS display
.visible-*-blockdisplay: block;
.visible-*-inlinedisplay: inline;
.visible-*-inline-blockdisplay: inline-block;
+

So, for extra small (xs) screens for example, the available .visible-*-* classes are:

+

Ribbons

+ + +

Ribbons should be used to call out access, status, enironment, etc.

+

Banner

+

You can use a banner ribbon to let the team know which environment they're +working on. Leave off the .styleguide-component-wrapper div when using it +in other contexts.

+
+ Acceptance +
+
+
.styleguide-component-wrapper
+  .ribbon-banner
+    Acceptance
+
+

Colors

+
British
<div class="inline-ribbon">British</div>
Pivotal
+
<div class="inline-ribbon ribbon-primary">Pivotal</div>
+
+

Inline

+
+ British +
+For British eyes only +
<div class="inline-ribbon">
+  British
+</div>
+<span class="mlm">For British eyes only</span>
+
+

Tabs

+ + +

You can activate a tab or pill navigation without writing any JavaScript by simply specifying data-toggle="tab" on an element.

+

Highlight

+
+
+
+

Service Plans

+ +
+
+

Plan Features

+
+
Content 1
+
Content 2
+
Content 3
+
Content 4
+
+
+
+
+
.tab-highlight
+  .row
+    .col-md-8
+      %h1 Service Plans
+      %ul.nav.nav-stacked
+        %li.active
+          %a{"data-toggle" => "tab", :href => "#home"}
+            .row
+              .col-md-10.tab-title
+                Spark
+              .col-md-14
+                Free
+        %li
+          %a{"data-toggle" => "tab", :href => "#profile"}
+            .row
+              .col-md-10.tab-title
+                Boost
+              .col-md-14
+                $10/month
+        %li
+          %a{"data-toggle" => "tab", :href => "#messages"}
+            .row
+              .col-md-10.tab-title
+                Amp
+              .col-md-14
+                $50/month
+        %li
+          %a{"data-toggle" => "tab", :href => "#settings"}
+            .row
+              .col-md-10.tab-title
+                Shockingly long plan name is important to test
+              .col-md-14
+                $1000/month
+
+    .col-md-16
+      %h1 Plan Features
+      .tab-content
+        #home.tab-pane.fade.in.active Content 1
+        #profile.tab-pane.fade Content 2
+        #messages.tab-pane.fade Content 3
+        #settings.tab-pane.fade Content 4
+
+

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>
+
+
+

Responsive

+
+
+
+ +
+
+ +
+
+
+
.tab-responsive
+  .row
+    .col-sm-5
+      %ul.nav.hidden-xs
+        %li.active
+          %a{"data-toggle" => "tab", :href => "#tab-responsive-1"}
+            meep
+        %li
+          %a{"data-toggle" => "tab", :href => "#tab-responsive-2"}
+            foo
+        %li
+          %a{"data-toggle" => "tab", :href => "#tab-responsive-3"}
+            bar
+        %li
+          %a{"data-toggle" => "tab", :href => "#tab-responsive-4"}
+            baz
+
+    .col-sm-19
+      %ul.tab-content
+        %li.active
+          %a.visible-xs-block{"data-toggle" => "tab", :href => "#tab-responsive-1"}
+            meep
+        %li#tab-responsive-1.tab-pane.active.fade.in Content 1
+        %li
+          %a.visible-xs-block{"data-toggle" => "tab", :href => "#tab-responsive-2"}
+            foo
+        %li#tab-responsive-2.tab-pane.fade Content 2
+        %li
+          %a.visible-xs-block{"data-toggle" => "tab", :href => "#tab-responsive-3"}
+            foo
+        %li#tab-responsive-3.tab-pane.fade Content 3
+        %li
+          %a.visible-xs-block{"data-toggle" => "tab", :href => "#tab-responsive-4"}
+            foo
+        %li#tab-responsive-4.tab-pane.fade Content 4
+
+
+

Simple

+
+
+ Some Action +
+ +
+
Spaces Content
+
Domains Content
+
Members Content
+
+
+
.tab-simple
+  .tabs-action.txt-r
+    %a Some Action
+  %ul.nav.nav-tabs
+    %li.active
+      %a{"data-toggle" => "tab", :href => "#spaces"}Spaces
+    %li
+      %a{"data-toggle" => "tab", :href => "#domains"}Domains
+    %li
+      %a{"data-toggle" => "tab", :href => "#members"}Members
+
+
+  .tab-content
+    #spaces.tab-pane.fade.in.active Spaces Content
+    #domains.tab-pane.fade Domains Content
+    #members.tab-pane.fade Members Content
+
+
+

Simple Alt

+
+ +
+
Dashboard Content
+
Notifications Content
+
EULA Content
+
+
+
.tab-simple-alt
+  %ul.nav.nav-tabs
+    %li.active
+      %a{"data-toggle" => "tab", :href => "#dashboard"}Dashboard
+    %li
+      %a{"data-toggle" => "tab", :href => "#notifications"}Notifications
+    %li
+      %a{"data-toggle" => "tab", :href => "#eula"}EULA
+
+
+  .tab-content
+    #dashboard.tab-pane.fade.in.active Dashboard Content
+    #notifications.tab-pane.fade Notifications Content
+    #eula.tab-pane.fade EULA Content
+
+
+

Tables

+ + + + + + + + + + + + + + + + + + +
ClassDescription
.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.
+

Scrollable

+

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 sizesHeight
default183px
.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. +

+
+
+
+ + + + + + + + + + + +
#StatusCPUMemoryDiskUptime
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
0Running0%4.16 MB6.75 MB27 min
1Running0%4.07 MB6.75 MB27 min
2Running0%4.07 MB6.75 MB25 min
3Running0%4.14 MB6.75 MB25 min
4Running0%4.08 MB6.75 MB25 min
5Running0%4.16 MB6.75 MB25 min
6Running0%4.07 MB6.75 MB25 min
7Running0%4.07 MB6.75 MB25 min
8Running0%4.03 MB6.75 MB25 min
9Running0%4.07 MB6.75 MB25 min
+
+
+
<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>
+
+

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.table.table-data.table-light
+  %thead
+    %tr
+      %th
+        Service Instance
+      %th
+        Service Plan
+      %th
+        Bound Apps
+  %tbody
+    %tr
+      %td
+        oracle-db-sct
+      %td
+        Oracle DB
+      %td
+        12
+    %tr
+      %td
+        oracle-db-sct
+      %td
+        Oracle DB
+      %td
+        12
+    %tr
+      %td
+        oracle-db-sct
+      %td
+        Oracle DB
+      %td
+        12
+    %tr
+      %td
+        oracle-db-sct
+      %td
+        Oracle DB
+      %td
+        12
+
+

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.

+ + + + + + + + + + + + + + + + + + + + + + +
Emailjoe@example.com
Current Password*******
First NameJoe
Last NameBobs
Phone415-555-0000
+
+%table.table.table-key-value
+  %tbody
+    %tr
+      %th.col-md-8 Email
+      %td.col-md-16 joe@example.com
+    %tr
+      %th.col-md-8 Current Password
+      %td.col-md-16 *******
+    %tr
+      %th.col-md-8 First Name
+      %td.col-md-16 Joe
+    %tr
+      %th.col-md-8 Last Name
+      %td.col-md-16 Bobs
+    %tr
+      %th.col-md-8 Phone
+      %td.col-md-16 415-555-0000
+
+

Tooltip

+

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! + +

+ +

+ +

+ +

+ +

+
<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>
+
$('#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. +

+
+
+ +
+
<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>
+
$('#disabled-button-with-tooltip').tooltip();
+
+

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>

h1 31px

<h1>h1 31px</h1>

h2 25px

<h2>h2 25px</h2>

h3 20px

<h3>h3 20px</h3>

h4 18px

<h4>h4 18px</h4>
h5 16px
<h5>h5 16px</h5>
h6 13px
<h6>h6 13px</h6>

base font size 16px

<p>base font size 16px</p>

small text 14px

<p class="type-sm">small text 14px</p>

extra small text 12px

+
<p class="type-xs">extra small text 12px</p>
+
+
+
+ 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>

I am a h2!

+
  <h2 class="h1">I am a h2!</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
+
  <div class="h2">Heading level 2 on a div</div>
+
+

Alignment

+

See the alignment component for classes to use for text alignment.

+

Colors

+

You can apply color to any text with the color classes.

I'm a brand color!

+
<p class="type-brand-3">I'm a brand color!</p>
+

Here's a table of all the color classes.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Type inverse

Type inverse

 .type-inverse

Type neutral 1

Type neutral 1

 .type-neutral-1

Type neutral 1

Type neutral 1

 .type-neutral-1

Type neutral 2

Type neutral 2

 .type-neutral-2

Type neutral 3

Type neutral 3

 .type-neutral-3

Type neutral 4

Type neutral 4

 .type-neutral-4

Type neutral 5

Type neutral 5

 .type-neutral-5

Type neutral 6

Type neutral 6

 .type-neutral-6

Type neutral 7

Type neutral 7

 .type-neutral-7

Type neutral 8

Type neutral 8

 .type-neutral-8

Type neutral 9

Type neutral 9

 .type-neutral-9

Type neutral 10

Type neutral 10

 .type-neutral-10

Type neutral 11

Type neutral 11

 .type-neutral-11

Type dark 1

Type dark 1

 .type-dark-1

Type dark 2

Type dark 2

 .type-dark-2

Type dark 3

Type dark 3

 .type-dark-3

Type accent 1

Type accent 1

 .type-accent-1

Type accent 2

Type accent 2

 .type-accent-2

Type accent 3

Type accent 3

 .type-accent-3

Type accent 4

Type accent 4

 .type-accent-4

Type accent 5

Type accent 5

 .type-accent-5

Type brand 1

Type brand 1

 .type-brand-1

Type brand 2

Type brand 2

 .type-brand-2

Type brand 3

Type brand 3

 .type-brand-3

Type brand 4

Type brand 4

 .type-brand-4

Type brand 5

Type brand 5

 .type-brand-5

Type error 1

Type error 1

 .type-error-1

Type error 2

Type error 2

 .type-error-2

Type error 3

Type error 3

 .type-error-3

Type error 4

Type error 4

 .type-error-4

Type success 1

Type success 1

 .type-success-1

Type success 2

Type success 2

 .type-success-2

Type warn 1

Type warn 1

 .type-warn-1

Type warn 2

Type warn 2

 .type-warn-2

Type warn 3

Type warn 3

 .type-warn-3
+ +

Emphasis Modifiers

+

Type emphasis modifiers can be used on any type element.

Really Important

+

+ I mean reeeeeeeeeeeally +

+
<h1 class="em-high">Really Important</h1>
+<p>
+  I mean <span class="em-max">reeeeeeeeeeeally</span>
+</p>
+

Here's a table of all the emphasis modifier classes.

Low emphasis

<h1 class="em-low">Low emphasis</h1>

Default emphasis

<h1 class="em-default">Default emphasis</h1>

High emphasis

<h1 class="em-high">High emphasis</h1>

Maximum emphasis

<h1 class="em-max">Maximum emphasis</h1>

Emphasis alternate

+
<h1 class="em-alt">Emphasis alternate</h1>
+
+

Vertical Align

+

The Aligner allows you to vertically align children to the top, center, or bottom. +Its height is set by default to 230px.

This component doesn't do any horizontal alignment. +You can use grids, or the text-alignment classes +.txt-l, .txt-r, and .txt-c with this component.

+
+

+ This component is not supported in IE10 and below. + While the content will appear, it will not be vertically aligned. +

+
+
+ Centered content +
+
<div class="aligner txt-c">
+  <a class="aligner-item" href="http://bitly.com/ZTHUDU">Centered content</a>
+</div>
+

Override the default height by setting an inline style like so:

+ On Top + Center + Bottom +
+
<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>
+

Note: the background colors in the example are just for display in the styleguide.

+

Whitespace

+ + + +

Standard

+

Should be used to modify the default spacing between objects (not between nodes of the same object) +Please use judiciously. You want to be using defaults most of the time, these are exceptions! +<type><location><size>

+ + + + + + + + + + + + + + + +
LetterDescription
p, mpadding, margin
a, t, r, b, l, h, vall, top, right, bottom, left, horizontal, vertical
n, s, m, l, xl, xxl, xxxl, xxxxlnone(0px), small(5px), medium(7px), large(10px), extra large(20px), extra extra large (40px), extra extra extra large (120px), extra extra extra extra large (140px)

A normal paragraph

+

A paragraph with large padding

+
%p A normal paragraph
+%p.pal A paragraph with large padding
+
+

List

+

See list spacing.

+ + +
+ + diff --git a/release/1.1.0/by_product.html b/release/1.1.0/by_product.html new file mode 100644 index 000000000..842f0af3f --- /dev/null +++ b/release/1.1.0/by_product.html @@ -0,0 +1,980 @@ + + + + a brand new styleguide: by Product + + + + + + + + + + + + +
+
+ +

Console

+ + + +

Traffic Lights

+

Traffic lights are used to show the status of the application. "On" is used for active applications, "off" for inactive, and "loading" for when the status is still loading.

On

+
    +
  • + + 5 +
    • +
  • + + 1 +
    • +
  • + + 8 +
    • +
+
%h3 On
+%ul.traffic-lights.list-unstyled.mvm
+  %li.green-light
+    %i.fa.fa-circle
+    5
+  %li.gray-light
+    %i.fa.fa-circle
+    1
+  %li.red-light
+    %i.fa.fa-circle
+    8

Off

+
    +
  • + +
    • +
  • + +
    • +
  • + +
    • +
+
%h3 Off
+%ul.traffic-lights.list-unstyled.mvm
+  %li.green-light.off
+    %i.fa.fa-circle
+  %li.gray-light.off
+    %i.fa.fa-circle
+  %li.red-light.off
+    %i.fa.fa-circle

Loading

+
    +
  • + +
    • +
  • + +
    • +
  • + +
    • +
+
%h3 Loading
+%ul.traffic-lights.list-unstyled.mvm
+  %li.green-light.off.loading-green
+    %i.fa.fa-circle
+  %li.gray-light.off.loading-gray
+    %i.fa.fa-circle
+  %li.red-light.off.loading-red
+    %i.fa.fa-circle
+

Marketing

+ + + +

Instance Scale

+

The instance scale widget is an svg and an associated code block. Include the SVG +and code in your page and the javascript and css will handle all of the behaviors. +Add the class .selected-group to the .instance-column you would like to be +highlighted on page load.

+
+
+ + + + + + + + + + + + + + + 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>
+
+ + +
+ + diff --git a/release/1.1.0/elements.html b/release/1.1.0/elements.html new file mode 100644 index 000000000..71ba75ce0 --- /dev/null +++ b/release/1.1.0/elements.html @@ -0,0 +1,2821 @@ + + + + a brand new styleguide: Elements + + + + + + + + + + + + +
+
+ +

Avatars

+ + +

Regular avatars are expected to by 100px by 100px.

... +
%img{src: "http://placehold.it/100x100", alt: "...", class: "img-circle avatar", height: "100", width: "100"}
+
+
+

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'

+ + +
+
+ + +
+
.gravatar.gravatar-sm
+  %img{src:"https://secure.gravatar.com/avatar/8b7970c372aabb936ca455127e04c959?s=20&d=blank"}
+  %i.fa.fa-user
+.gravatar.gravatar-sm
+  %img{src:"https://s.gravatar.com/avatar/c99bd3ce00444f946027741d5a5cd9e9?s=20&d=blank"}
+  %i.fa.fa-user
+
+

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'

+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
.gravatar.gravatar-sm
+  %img{src:"https://secure.gravatar.com/avatar/8b7970c372aabb936ca455127e04c959?s=20&d=blank"}
+  %i.fa.fa-user
+  %i.overlay.fa.fa-envelope
+
+.gravatar.gravatar-sm.mlxl
+  %img{src:"https://s.gravatar.com/avatar/c99bd3ce00444f946027741d5a5cd9e9?s=20&d=blank"}
+  %i.fa.fa-user
+  %i.overlay.fa.fa-envelope
+
+.gravatar.gravatar-sm.mlxl
+  %img{src:"https://secure.gravatar.com/avatar/8b7970c372aabb936ca455127e04c959?s=20&d=blank"}
+  %i.fa.fa-user.highlight
+  %i.overlay.fa.fa-check
+
+.gravatar.gravatar-sm.mlxl
+  %img{src:"https://s.gravatar.com/avatar/c99bd3ce00444f946027741d5a5cd9e9?s=20&d=blank"}
+  %i.fa.fa-user
+  %i.overlay.fa.fa-check
+
+

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'

+ + +
+
+ + +
+
.gravatar.gravatar-lg
+  %img{src:"https://secure.gravatar.com/avatar/8b7970c372aabb936ca455127e04c959?s=80&d=blank"}
+  %i.fa.fa-user
+.gravatar.gravatar-lg
+  %img{src:"https://s.gravatar.com/avatar/c99bd3ce00444f946027741d5a5cd9e9?s=80&d=blank"}
+  %i.fa.fa-user
+
+

Backgrounds

+ + +

Background color classes can be applied to any element. See colors for a list of background classes.

+

Full Bleed

+

This example uses an about us hero image by default, but you can change it to any image you would like. +Keep in mind, blurry, treated images will look better when stretched to fit a particular content area.

+
+

Full bleed background image

+
+
+
<div class='pane bg-full-bleed'>
+  <div class='container'>
+    <h1 class='type-neutral-11 txt-c'>Full bleed background image</h1>
+  </div>
+</div>
+

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(images/such-awesome.jpg)">
+  <div class='container'>
+    <h1 class='type-neutral-11 txt-c'>Full bleed background image</h1>
+  </div>
+</div>
+
+

Overlays

+ +
+
+
+
+
.bg-cloud
+
+
+
+
+
+
.bg-glow
+
+
+
+ +

Buttons

+ + +

Button styles can be applied to any element. Typically you'll want to +use either a <button> or an <a> element:

+
%button.btn.btn-primary Button
Link +
%a.btn.btn-primary{href: "http://trulia.com"} Link
+

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.

+

Full Width

+

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.

+
%button.btn.btn-primary.btn-block Full width button
+
+

Sizes

+

There are two sizes for buttons: Large and default. Simply apply the +size modifier class for the desired size.

<button class="btn btn-primary btn-lg">Large</button>
+
<button class="btn btn-primary">Default</button>
+
+

Styles

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ButtonDisabledClassDescription
btn btn-defaultThis is what buttons look like, this is the go to button style.
btn btn-default-altThis is what buttons look like, this is the go to button style (on white backgrounds).
btn btn-primaryUse this button as the primary call to action
btn btn-lowlightUse this button for other actions, like cancel/dismiss
btn btn-dangerThis button is for delete actions, these actions should also have a confirmation dialog
btn btn-highlightUse this button for other important actions, e.g. restarting apps
btn btn-highlight-altUse this button for other important actions, e.g. marketing call to actions
+

Colors

+ + +

Our color pallet is composed of several different colors. At any given point in captures the current +evolution of our design and likely includes old and new colors. Whenever possible, evolve the old +colors rather than adding new ones.

+
+
+ Sass variables should only be used in variables.css.scss. +
+

+ They should never be used directly when building components, because it makes + it very hard to change the values later if you can't tell how they might have been used. + You should define your own variables that use these colors in variables.css.scss. +

+
+

This example shows proper use of Sass variables.

$tabs-active-bg-color: $gray-2;
+
+
+
+
+
+
+
    +
  • $gray-1
    • +
  • .bg-neutral-1
    • +
  • .type-neutral-1
    • +
+
+
+
+ +
+
+
+
+
    +
  • $gray-2
    • +
  • .bg-neutral-2
    • +
  • .type-neutral-2
    • +
+
+
+
+
+
+
+
+
    +
  • $gray-3
    • +
  • .bg-neutral-3
    • +
  • .type-neutral-3
    • +
+
+
+
+
+
+
+
+
    +
  • $gray-4
    • +
  • .bg-neutral-4
    • +
  • .type-neutral-4
    • +
+
+
+
+
+
+
+
+
    +
  • $gray-5
    • +
  • .bg-neutral-5
    • +
  • .type-neutral-5
    • +
+
+
+
+
+
+
+
+
    +
  • $gray-6
    • +
  • .bg-neutral-6
    • +
  • .type-neutral-6
    • +
+
+
+
+
+
+
+
+
    +
  • $gray-7
    • +
  • .bg-neutral-7
    • +
  • .type-neutral-7
    • +
+
+
+
+
+
+
+
+
    +
  • $gray-8
    • +
  • .bg-neutral-8
    • +
  • .type-neutral-8
    • +
+
+
+
+
+
+
+
+
    +
  • $gray-9
    • +
  • .bg-neutral-9
    • +
  • .type-neutral-9
    • +
+
+
+
+
+
+
+
+
    +
  • $gray-10
    • +
  • .bg-neutral-10
    • +
  • .type-neutral-10
    • +
+
+
+
+
+
+
+
+
    +
  • $gray-11
    • +
  • .bg-neutral-11
    • +
  • .type-neutral-11
    • +
+
+
+
+
+ +
+
+
+
+
+
    +
  • $dark-1
    • +
  • .bg-dark-1
    • +
  • .type-dark-1
    • +
+
+
+
+
+
+
+
+
    +
  • $dark-2
    • +
  • .bg-dark-2
    • +
  • .type-dark-2
    • +
+
+
+
+
+
+
+
+
    +
  • $dark-3
    • +
  • .bg-dark-3
    • +
  • .type-dark-3
    • +
+
+
+
+
+ +
+
+
+
+
+
    +
  • $brand-1
    • +
  • .bg-brand-1
    • +
  • .type-brand-1
    • +
+
+
+
+
+
+
+
+
    +
  • $brand-2
    • +
  • .bg-brand-2
    • +
  • .type-brand-2
    • +
+
+
+
+
+
+
+
+
    +
  • $brand-3
    • +
  • .bg-brand-3
    • +
  • .type-brand-3
    • +
+
+
+
+
+
+
+
+
    +
  • $brand-4
    • +
  • .bg-brand-4
    • +
  • .type-brand-4
    • +
+
+
+
+
+
+
+
+
    +
  • $brand-5
    • +
  • .bg-brand-5
    • +
  • .type-brand-5
    • +
+
+
+
+
+ +
+
+
+
+
+
    +
  • $accent-5
    • +
  • .bg-accent-5
    • +
  • .type-accent-5
    • +
+
+
+
+
+
+
+
+
    +
  • $accent-2
    • +
  • .bg-accent-2
    • +
  • .type-accent-2
    • +
+
+
+
+
+
+
+
+
    +
  • $accent-3
    • +
  • .bg-accent-3
    • +
  • .type-accent-3
    • +
+
+
+
+
+
+
+
+
    +
  • $accent-4
    • +
  • .bg-accent-4
    • +
  • .type-accent-4
    • +
+
+
+
+
+
+
+
+
    +
  • $accent-5
    • +
  • .bg-accent-5
    • +
  • .type-accent-5
    • +
+
+
+
+
+ +
+
+
+
+
+
    +
  • $error-1
    • +
  • .bg-error-1
    • +
  • .type-error-1
    • +
+
+
+
+
+
+
+
+
    +
  • $error-2
    • +
  • .bg-error-2
    • +
  • .type-error-2
    • +
+
+
+
+
+
+
+
+
    +
  • $error-3
    • +
  • .bg-error-3
    • +
  • .type-error-3
    • +
+
+
+
+
+
+
+
+
    +
  • $error-4
    • +
  • .bg-error-4
    • +
  • .type-error-4
    • +
+
+
+
+
+ +
+
+
+
+
+
    +
  • $warn-1
    • +
  • .bg-warn-1
    • +
  • .type-warn-1
    • +
+
+
+
+
+
+
+
+
    +
  • $warn-2
    • +
  • .bg-warn-2
    • +
  • .type-warn-2
    • +
+
+
+
+
+
+
+
+
    +
  • $warn-3
    • +
  • .bg-warn-3
    • +
  • .type-warn-3
    • +
+
+
+
+
+ +
+
+
+
+
$green-1
+
+
+
+
+
+
$green-2
+
+
+
+ +

Shadows & Glows

+ +
+
+
+
+
+
+
$shadow-1
+
+
+
+
+
+
$shadow-2
+
+
+
+
+
+
$shadow-3
+
+
+
+
+
+
$shadow-4
+
+
+
+
+
+
$glow-1
+
+
+
+
+
+
$glow-2
+
+
+
+
+
+
$glow-3
+
+
+
+
+
+
$glow-4
+
+
+
+
+
+
$glow-5
+
+
+
+
+

+

Dividers

+

Dividers draw horizontal lines between different content groupings.

+
+
+
+
+
+
+%hr.divider-alternate-1
+%hr.divider-alternate-2
+
+.contrast-bar
+  %hr.divider-1
+  %hr.divider-2
+
+
+

Embeds

+ + + +

Responsive

+

Allow browsers to determine video or slideshow dimensions based on the width of their containing block by creating an intrinsic ratio that will properly scale on any device.

Rules are directly applied to <iframe>, <embed>, and <object> elements; optionally use an explicit descendant class .embed-responsive-item when you want to match the styling for other attributes.

Pro-Tip! You don't need to include frameborder="0" in your <iframe>s as we override that for you.

16-by-9

+
+
+
+ +
+
+
+
+ +
+
+
+
+ +
+
+
+
<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>
+

4-by-3

+
+
+
+ +
+
+
+
+ +
+
+
+
+ +
+
+
+
<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>
+
+

Iconography

+ + +

We use Font Awesome for scalable vector icons that can be customized - size, color, drop shadow, +and anything that can be done with CSS. These icons will always match the font color.

Here are some commonly used icons:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ButtonClassDescription
.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.fa.fa-download.type-brand-3.title
+
+

Spinners

+

Spinners are used to show that some action is in progress. Spinners come in two sizes: large and small.

+ +
.spinner-lg.bkg-default-5.out
+  %i.fa.fa-spin.fa-cog.mtxl
+
+.spinner-sm.bkg-default-5.out
+  %i.fa.fa-spin.fa-cog.mtxl
+
+

Images

+ + + +

Responsive

+

Images can be made responsive-friendly via the addition of the .img-responsive class. This applies max-width: 100%; and height: auto; to the image so that it scales nicely to the parent element. See bootstrap 3 for further documentation of this feature.

+
+ Responsive image +
+
+ Responsive image +
+
+ Responsive image +
+
+
.row
+  .col-md-5
+    %img.img-responsive{:alt => "Responsive image", :src => "../images/such-awesome.jpg"}
+  .col-md-7
+    %img.img-responsive{:alt => "Responsive image", :src => "../images/such-awesome.jpg"}
+  .col-md-12
+    %img.img-responsive{:alt => "Responsive image", :src => "../images/such-awesome.jpg"}
+
+

Responsive SVG

+

SVG can be made responsive-friendly via the addition of the .svg-responsive class on a +wrapper div and the .svg-content class on the svg itself. You'll also need to to define +the height to width ratio as an inline padding bottom style on the .svg-responsive element like so:

<div class="svg-responsive" style="padding-bottom: 78.31%">
+  <svg class="svg-content" viewBox="38 45 125 120" preserveAspectRatio="xMinYMin meet">
+    ...
+  </svg>
+</div>
+

The padding-bottom should equal the height divided by the width of your specific svg.

For more information about setting up your svg, read this article about svg coordinates systems by Sara Soueidan.

+
+
+
+ + + + + + + + + + + + + + + + + +
+
+
+
+ + + + + + + + + + + + + + + + + +
+
+
+
+ + + + + + + + + + + + + + + + + +
+
+
+ +

Labels

+ + +

Labels are based on Bootstrap's labels. +Here's an example of a label on its own.

new +
<span class="label label-primary">new</span>
+

You can also place labels within HTML elements. +It will be sized based on the element's font size and its font modifiers.

I am a P. + new +

<p>I am a P.
+  <span class="label label-primary">new</span>
+</p>

I am an H3. + new +

<h3>I am an H3.
+  <span class="label label-primary">new</span>
+</h3>

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>
+
+

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.

Removable + + +
<span class="label-removable">Removable
+  <a class="close-btn fa fa-close"></a>
+</span>
+
+

Links

+

There are five 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 with an icon + +
%a{href: "http://google.com"}
+  %i.fa.fa-plus
+  link with an icon
+
+ + + + + + + + + + + + + + + + + + + + + + + + +
LinkClassDescription
default linkThis is what buttons look like, this is the go to button style.
lowlight linklink-lowlightI'm afraid I can't let you do that, yet.
lowlight link alternatelink-lowlight-altLess important links
inverse linklink-inverseI go on a non-white background
+

Lists

+ + +

This section contains different list styles.

+

Breadcrumb

+

The .list-breadcrumb can be used to provide additional page navigation.

Breadcrumbs use their own monospace font-family.

+
%ul.list-breadcrumb
+  %li
+    %a{href: "http://google.com"}
+      Parent
+  %li
+    %a{href: "http://google.com"}
+      Child
+  %li.current
+    %span
+      Current Page
+
+

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.

    +
  • +

    list-card-1

    +
    • +
<ul class="list-cards list-card-1 list-cards-xs">
+  <li class="bg-neutral-7">
+    <p>list-card-1</p>
+  </li>
+</ul>
    +
  • +

    list-card-2

    +
    • +
+
<ul class="list-cards list-card-2 list-cards-xs">
+  <li class="bg-neutral-7">
+    <p>list-card-2</p>
+  </li>
+</ul>
+

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 BreakpointsClass 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>
+

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>
+
+

Checked

+

Replaces the default bullet image with the font awesome checkmark.

    +
  • + feep +
    • +
  • + fop +
    • +
  • + meep +
    • +
+
%ul.list-checked
+  %li
+    feep
+  %li
+    fop
+  %li
+    meep
+
+

Event

+

This is a special list-group, with styles per-event for colors and icons.

Note: If you need a list item that with an icon that isn't shown below, +take a look at icons, and let us know which one you want.

    +
  • +
    +
    +
    +
    +
    +
    started app
    +
    +
    +
    • +
  • +
    +
    +
    +
    +
    +
    stopped app
    +
    +
    +
    • +
  • +
    +
    +
    +
    +
    +
    updated app
    +
    +
    +
    • +
  • +
    +
    +
    +
    +
    +
    scaled app
    +
    +
    +
    • +
  • +
    +
    +
    +
    +
    +
    app crashed
    +
    +
    +
    • +
  • +
    +
    +
    +
    +
    +
    created app
    +
    +
    +
    • +
  • +
    +
    +
    +
    +
    +
    renamed app
    +
    +
    +
    • +
+
%ul.list-group.event-list
+  %li.list-group-item.started
+    .media
+      .pull-left
+        .event-icon
+      .media-body
+        .event-title started app
+  %li.list-group-item.stopped
+    .media
+      .pull-left
+        .event-icon
+      .media-body
+        .event-title stopped app
+  %li.list-group-item.updated
+    .media
+      .pull-left
+        .event-icon
+      .media-body
+        .event-title updated app
+  %li.list-group-item.scaled
+    .media
+      .pull-left
+        .event-icon
+      .media-body
+        .event-title scaled app
+  %li.list-group-item.crashed
+    .media
+      .pull-left
+        .event-icon
+      .media-body
+        .event-title app crashed
+  %li.list-group-item.created
+    .media
+      .pull-left
+        .event-icon
+      .media-body
+        .event-title created app
+  %li.list-group-item.renamed
+    .media
+      .pull-left
+        .event-icon
+      .media-body
+        .event-title renamed app
+
+

Group

+

Use this list when you need simple gray borders between items

    +
  • + item 1 +
    • +
  • + item 2 +
    • +
  • + item 3 +
    • +
+
%ul.list-group
+  %li.list-group-item
+    item 1
+  %li.list-group-item
+    item 2
+  %li.list-group-item
+    item 3
+
+

Inline

+

An inline list is one of the three methods for laying out content (including grids and the media block).

    +
  • + feep +
    • +
  • + fop +
    • +
  • + meep +
    • +
+
%ul.list-inline
+  %li
+    feep
+  %li
+    fop
+  %li
+    meep
+

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>
+
+

Inline Divider

+

Places all list items on a single line with display: inline-block; and some light padding. The .list-inline-divider +also adds a simple gray border (add .list-inline-divider-light to make the border white).

+
+ +
+
%ul.list-inline-divider
+  %li
+    %a.type-em-1{href: "http://google.com"}<
+      Edit
+  %li
+    %a.type-em-1{href: "http://google.com"}<
+      Invite
+
+.contrast-bar
+  %ul.list-inline-divider.list-inline-divider-light
+    %li
+      %a.type-em-1{href: "http://google.com"}<
+        Edit
+    %li
+      %a.type-em-1{href: "http://google.com"}<
+        Invite
+
+
+
+

Ordered

+
    +
  1. + feep +
    2. +
  2. + fop +
    3. +
  3. + meep +
    4. +
+
%ol
+  %li
+    feep
+  %li
+    fop
+  %li
+    meep
+
+

Steps

+

Use this list when you need to show the steps in a flow.

    +
  1. + Sign up Account +
    2. +
  2. + Create Organization +
    3. +
  3. + Do other things +
    4. +
  4. + And more things +
    5. +
+
%ol.list-steps
+  %li
+    Sign up Account
+  %li.current
+    Create Organization
+  %li
+    Do other things
+  %li
+    And more things
+
+
+

Unordered

+
    +
  • + feep +
    • +
  • + fop +
    • +
  • + meep +
    • +
+
%ul.list-unordered
+  %li
+    feep
+  %li
+    fop
+  %li
+    meep
+
+

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.list-unstyled
+  %li
+    feep
+  %li
+    fop
+  %li
+    meep
+
+

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.

    +
  • +
    + item 1 +
    +
    • +
  • +
    + item 2 +
    +
    • +
  • +
    + item 3, which is taller +
    +
    • +
+
%ul.list-vertical-divider
+  %li.col-md-8
+    .height-enforcer
+      item 1
+  %li.col-md-8
+    .height-enforcer
+      item 2
+  %li.col-md-8
+    .height-enforcer{style: 'height: 200px'}
+      item 3, which is taller
+
    +
  • +
    + item 1 +
    +
    • +
  • +
    + item 2 +
    +
    • +
  • +
    + item 3, which is taller +
    +
    • +
+
%ul.list-vertical-divider-2
+  %li.col-md-8
+    .height-enforcer
+      item 1
+  %li.col-md-8
+    .height-enforcer
+      item 2
+  %li.col-md-8
+    .height-enforcer{style: 'height: 200px'}
+      item 3, which is taller
+
+

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:
llistSpace on the inside of each of the li direct children of the element
Location:
hhorizontalAdds spacing to the left and right of the li.
vverticalAdds spacing to the top and bottom of the li.
Size:
xlextra largeAdds 21 pixels of space
llargeAdds 10 pixels of space
mmediumAdds 7 pixels of space
ssmallAdds 5 pixels of space
nnoneSets any existing space to 0
+ +

Vertical Spacing Options (n -> xl)

+
    +
  • + feep +
    • +
  • + fop +
    • +
  • + meep +
    • +
+
%ul.lvn
+  %li
+    feep
+  %li
+    fop
+  %li
+    meep
    +
  • + feep +
    • +
  • + fop +
    • +
  • + meep +
    • +
+
%ul.lvs
+  %li
+    feep
+  %li
+    fop
+  %li
+    meep
    +
  • + feep +
    • +
  • + fop +
    • +
  • + meep +
    • +
+
%ul.lvm
+  %li
+    feep
+  %li
+    fop
+  %li
+    meep
    +
  • + feep +
    • +
  • + fop +
    • +
  • + meep +
    • +
+
%ul.lvl
+  %li
+    feep
+  %li
+    fop
+  %li
+    meep
    +
  • + feep +
    • +
  • + fop +
    • +
  • + meep +
    • +
+
%ul.lvxl
+  %li
+    feep
+  %li
+    fop
+  %li
+    meep
+
+

Horizontal Spacing Options (n -> xl)

+
    +
  • + feep +
    • +
  • + fop +
    • +
  • + meep +
    • +
+
%ul.list-inline.lhn
+  %li
+    feep
+  %li
+    fop
+  %li
+    meep
    +
  • + feep +
    • +
  • + fop +
    • +
  • + meep +
    • +
+
%ul.list-inline.lhs
+  %li
+    feep
+  %li
+    fop
+  %li
+    meep
    +
  • + feep +
    • +
  • + fop +
    • +
  • + meep +
    • +
+
%ul.list-inline.lhm
+  %li
+    feep
+  %li
+    fop
+  %li
+    meep
    +
  • + feep +
    • +
  • + fop +
    • +
  • + meep +
    • +
+
%ul.list-inline.lhl
+  %li
+    feep
+  %li
+    fop
+  %li
+    meep
    +
  • + feep +
    • +
  • + fop +
    • +
  • + meep +
    • +
+
%ul.list-inline.lhxl
+  %li
+    feep
+  %li
+    fop
+  %li
+    meep
+
+

Ribbons

+ + +

Ribbons should be used to call out access, status, enironment, etc.

+

Banner

+

You can use a banner ribbon to let the team know which environment they're +working on. Leave off the .styleguide-component-wrapper div when using it +in other contexts.

+
+ Acceptance +
+
+
.styleguide-component-wrapper
+  .ribbon-banner
+    Acceptance
+
+

Colors

+
British
<div class="inline-ribbon">British</div>
Pivotal
+
<div class="inline-ribbon ribbon-primary">Pivotal</div>
+
+

Inline

+
+ British +
+For British eyes only +
<div class="inline-ribbon">
+  British
+</div>
+<span class="mlm">For British eyes only</span>
+
+

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>

h1 31px

<h1>h1 31px</h1>

h2 25px

<h2>h2 25px</h2>

h3 20px

<h3>h3 20px</h3>

h4 18px

<h4>h4 18px</h4>
h5 16px
<h5>h5 16px</h5>
h6 13px
<h6>h6 13px</h6>

base font size 16px

<p>base font size 16px</p>

small text 14px

<p class="type-sm">small text 14px</p>

extra small text 12px

+
<p class="type-xs">extra small text 12px</p>
+
+
+
+ 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>

I am a h2!

+
  <h2 class="h1">I am a h2!</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
+
  <div class="h2">Heading level 2 on a div</div>
+
+

Alignment

+

See the alignment component for classes to use for text alignment.

+

Colors

+

You can apply color to any text with the color classes.

I'm a brand color!

+
<p class="type-brand-3">I'm a brand color!</p>
+

Here's a table of all the color classes.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Type inverse

Type inverse

 .type-inverse

Type neutral 1

Type neutral 1

 .type-neutral-1

Type neutral 1

Type neutral 1

 .type-neutral-1

Type neutral 2

Type neutral 2

 .type-neutral-2

Type neutral 3

Type neutral 3

 .type-neutral-3

Type neutral 4

Type neutral 4

 .type-neutral-4

Type neutral 5

Type neutral 5

 .type-neutral-5

Type neutral 6

Type neutral 6

 .type-neutral-6

Type neutral 7

Type neutral 7

 .type-neutral-7

Type neutral 8

Type neutral 8

 .type-neutral-8

Type neutral 9

Type neutral 9

 .type-neutral-9

Type neutral 10

Type neutral 10

 .type-neutral-10

Type neutral 11

Type neutral 11

 .type-neutral-11

Type dark 1

Type dark 1

 .type-dark-1

Type dark 2

Type dark 2

 .type-dark-2

Type dark 3

Type dark 3

 .type-dark-3

Type accent 1

Type accent 1

 .type-accent-1

Type accent 2

Type accent 2

 .type-accent-2

Type accent 3

Type accent 3

 .type-accent-3

Type accent 4

Type accent 4

 .type-accent-4

Type accent 5

Type accent 5

 .type-accent-5

Type brand 1

Type brand 1

 .type-brand-1

Type brand 2

Type brand 2

 .type-brand-2

Type brand 3

Type brand 3

 .type-brand-3

Type brand 4

Type brand 4

 .type-brand-4

Type brand 5

Type brand 5

 .type-brand-5

Type error 1

Type error 1

 .type-error-1

Type error 2

Type error 2

 .type-error-2

Type error 3

Type error 3

 .type-error-3

Type error 4

Type error 4

 .type-error-4

Type success 1

Type success 1

 .type-success-1

Type success 2

Type success 2

 .type-success-2

Type warn 1

Type warn 1

 .type-warn-1

Type warn 2

Type warn 2

 .type-warn-2

Type warn 3

Type warn 3

 .type-warn-3
+ +

Emphasis Modifiers

+

Type emphasis modifiers can be used on any type element.

Really Important

+

+ I mean reeeeeeeeeeeally +

+
<h1 class="em-high">Really Important</h1>
+<p>
+  I mean <span class="em-max">reeeeeeeeeeeally</span>
+</p>
+

Here's a table of all the emphasis modifier classes.

Low emphasis

<h1 class="em-low">Low emphasis</h1>

Default emphasis

<h1 class="em-default">Default emphasis</h1>

High emphasis

<h1 class="em-high">High emphasis</h1>

Maximum emphasis

<h1 class="em-max">Maximum emphasis</h1>

Emphasis alternate

+
<h1 class="em-alt">Emphasis alternate</h1>
+
+ + +
+ + diff --git a/release/1.1.0/fonts/FontAwesome.otf b/release/1.1.0/fonts/FontAwesome.otf new file mode 100644 index 000000000..81c9ad949 Binary files /dev/null and b/release/1.1.0/fonts/FontAwesome.otf differ diff --git a/release/1.1.0/fonts/fontawesome-webfont.eot b/release/1.1.0/fonts/fontawesome-webfont.eot new file mode 100644 index 000000000..84677bc0c Binary files /dev/null and b/release/1.1.0/fonts/fontawesome-webfont.eot differ diff --git a/release/1.1.0/fonts/fontawesome-webfont.svg b/release/1.1.0/fonts/fontawesome-webfont.svg new file mode 100644 index 000000000..a5c104455 --- /dev/null +++ b/release/1.1.0/fonts/fontawesome-webfont.svg @@ -0,0 +1,520 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/release/1.1.0/fonts/fontawesome-webfont.ttf b/release/1.1.0/fonts/fontawesome-webfont.ttf new file mode 100644 index 000000000..96a3639cd Binary files /dev/null and b/release/1.1.0/fonts/fontawesome-webfont.ttf differ diff --git a/release/1.1.0/fonts/fontawesome-webfont.woff b/release/1.1.0/fonts/fontawesome-webfont.woff new file mode 100644 index 000000000..628b6a52a Binary files /dev/null and b/release/1.1.0/fonts/fontawesome-webfont.woff differ diff --git a/release/1.1.0/fonts/sourcesanspro-black-webfont.eot b/release/1.1.0/fonts/sourcesanspro-black-webfont.eot new file mode 100755 index 000000000..4f93a618f Binary files /dev/null and b/release/1.1.0/fonts/sourcesanspro-black-webfont.eot differ diff --git a/release/1.1.0/fonts/sourcesanspro-black-webfont.svg b/release/1.1.0/fonts/sourcesanspro-black-webfont.svg new file mode 100755 index 000000000..8f9713e13 --- /dev/null +++ b/release/1.1.0/fonts/sourcesanspro-black-webfont.svg @@ -0,0 +1,245 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/release/1.1.0/fonts/sourcesanspro-black-webfont.ttf b/release/1.1.0/fonts/sourcesanspro-black-webfont.ttf new file mode 100755 index 000000000..55f6c3e2c Binary files /dev/null and b/release/1.1.0/fonts/sourcesanspro-black-webfont.ttf differ diff --git a/release/1.1.0/fonts/sourcesanspro-black-webfont.woff b/release/1.1.0/fonts/sourcesanspro-black-webfont.woff new file mode 100755 index 000000000..1b9c7b13f Binary files /dev/null and b/release/1.1.0/fonts/sourcesanspro-black-webfont.woff differ diff --git a/release/1.1.0/fonts/sourcesanspro-bold-webfont.eot b/release/1.1.0/fonts/sourcesanspro-bold-webfont.eot new file mode 100755 index 000000000..965facdc1 Binary files /dev/null and b/release/1.1.0/fonts/sourcesanspro-bold-webfont.eot differ diff --git a/release/1.1.0/fonts/sourcesanspro-bold-webfont.svg b/release/1.1.0/fonts/sourcesanspro-bold-webfont.svg new file mode 100755 index 000000000..d72afc7af --- /dev/null +++ b/release/1.1.0/fonts/sourcesanspro-bold-webfont.svg @@ -0,0 +1,245 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/release/1.1.0/fonts/sourcesanspro-bold-webfont.ttf b/release/1.1.0/fonts/sourcesanspro-bold-webfont.ttf new file mode 100755 index 000000000..9e2c21a70 Binary files /dev/null and b/release/1.1.0/fonts/sourcesanspro-bold-webfont.ttf differ diff --git a/release/1.1.0/fonts/sourcesanspro-bold-webfont.woff b/release/1.1.0/fonts/sourcesanspro-bold-webfont.woff new file mode 100755 index 000000000..11a950cbc Binary files /dev/null and b/release/1.1.0/fonts/sourcesanspro-bold-webfont.woff differ diff --git a/release/1.1.0/fonts/sourcesanspro-extralight-webfont.eot b/release/1.1.0/fonts/sourcesanspro-extralight-webfont.eot new file mode 100755 index 000000000..e735e7feb Binary files /dev/null and b/release/1.1.0/fonts/sourcesanspro-extralight-webfont.eot differ diff --git a/release/1.1.0/fonts/sourcesanspro-extralight-webfont.svg b/release/1.1.0/fonts/sourcesanspro-extralight-webfont.svg new file mode 100755 index 000000000..c46992f94 --- /dev/null +++ b/release/1.1.0/fonts/sourcesanspro-extralight-webfont.svg @@ -0,0 +1,245 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/release/1.1.0/fonts/sourcesanspro-extralight-webfont.ttf b/release/1.1.0/fonts/sourcesanspro-extralight-webfont.ttf new file mode 100755 index 000000000..dc7cde4cc Binary files /dev/null and b/release/1.1.0/fonts/sourcesanspro-extralight-webfont.ttf differ diff --git a/release/1.1.0/fonts/sourcesanspro-extralight-webfont.woff b/release/1.1.0/fonts/sourcesanspro-extralight-webfont.woff new file mode 100755 index 000000000..10e23ecaf Binary files /dev/null and b/release/1.1.0/fonts/sourcesanspro-extralight-webfont.woff differ diff --git a/release/1.1.0/fonts/sourcesanspro-it-webfont.eot b/release/1.1.0/fonts/sourcesanspro-it-webfont.eot new file mode 100755 index 000000000..a0f216693 Binary files /dev/null and b/release/1.1.0/fonts/sourcesanspro-it-webfont.eot differ diff --git a/release/1.1.0/fonts/sourcesanspro-it-webfont.svg b/release/1.1.0/fonts/sourcesanspro-it-webfont.svg new file mode 100755 index 000000000..e19c73c75 --- /dev/null +++ b/release/1.1.0/fonts/sourcesanspro-it-webfont.svg @@ -0,0 +1,245 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/release/1.1.0/fonts/sourcesanspro-it-webfont.ttf b/release/1.1.0/fonts/sourcesanspro-it-webfont.ttf new file mode 100755 index 000000000..cbe995fef Binary files /dev/null and b/release/1.1.0/fonts/sourcesanspro-it-webfont.ttf differ diff --git a/release/1.1.0/fonts/sourcesanspro-it-webfont.woff b/release/1.1.0/fonts/sourcesanspro-it-webfont.woff new file mode 100755 index 000000000..58372bfab Binary files /dev/null and b/release/1.1.0/fonts/sourcesanspro-it-webfont.woff differ diff --git a/release/1.1.0/fonts/sourcesanspro-light-webfont.eot b/release/1.1.0/fonts/sourcesanspro-light-webfont.eot new file mode 100755 index 000000000..3b605b7a9 Binary files /dev/null and b/release/1.1.0/fonts/sourcesanspro-light-webfont.eot differ diff --git a/release/1.1.0/fonts/sourcesanspro-light-webfont.svg b/release/1.1.0/fonts/sourcesanspro-light-webfont.svg new file mode 100755 index 000000000..3285644ca --- /dev/null +++ b/release/1.1.0/fonts/sourcesanspro-light-webfont.svg @@ -0,0 +1,245 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/release/1.1.0/fonts/sourcesanspro-light-webfont.ttf b/release/1.1.0/fonts/sourcesanspro-light-webfont.ttf new file mode 100755 index 000000000..4747dae4b Binary files /dev/null and b/release/1.1.0/fonts/sourcesanspro-light-webfont.ttf differ diff --git a/release/1.1.0/fonts/sourcesanspro-light-webfont.woff b/release/1.1.0/fonts/sourcesanspro-light-webfont.woff new file mode 100755 index 000000000..17b2a4693 Binary files /dev/null and b/release/1.1.0/fonts/sourcesanspro-light-webfont.woff differ diff --git a/release/1.1.0/fonts/sourcesanspro-regular-webfont.eot b/release/1.1.0/fonts/sourcesanspro-regular-webfont.eot new file mode 100755 index 000000000..aa04e6cdb Binary files /dev/null and b/release/1.1.0/fonts/sourcesanspro-regular-webfont.eot differ diff --git a/release/1.1.0/fonts/sourcesanspro-regular-webfont.svg b/release/1.1.0/fonts/sourcesanspro-regular-webfont.svg new file mode 100755 index 000000000..9d79def7b --- /dev/null +++ b/release/1.1.0/fonts/sourcesanspro-regular-webfont.svg @@ -0,0 +1,245 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/release/1.1.0/fonts/sourcesanspro-regular-webfont.ttf b/release/1.1.0/fonts/sourcesanspro-regular-webfont.ttf new file mode 100755 index 000000000..8c69e50fd Binary files /dev/null and b/release/1.1.0/fonts/sourcesanspro-regular-webfont.ttf differ diff --git a/release/1.1.0/fonts/sourcesanspro-regular-webfont.woff b/release/1.1.0/fonts/sourcesanspro-regular-webfont.woff new file mode 100755 index 000000000..0afce6cfb Binary files /dev/null and b/release/1.1.0/fonts/sourcesanspro-regular-webfont.woff differ diff --git a/release/1.1.0/fonts/sourcesanspro-semibold-webfont.eot b/release/1.1.0/fonts/sourcesanspro-semibold-webfont.eot new file mode 100755 index 000000000..f9df2a1f9 Binary files /dev/null and b/release/1.1.0/fonts/sourcesanspro-semibold-webfont.eot differ diff --git a/release/1.1.0/fonts/sourcesanspro-semibold-webfont.svg b/release/1.1.0/fonts/sourcesanspro-semibold-webfont.svg new file mode 100755 index 000000000..d41d2e621 --- /dev/null +++ b/release/1.1.0/fonts/sourcesanspro-semibold-webfont.svg @@ -0,0 +1,245 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/release/1.1.0/fonts/sourcesanspro-semibold-webfont.ttf b/release/1.1.0/fonts/sourcesanspro-semibold-webfont.ttf new file mode 100755 index 000000000..806046072 Binary files /dev/null and b/release/1.1.0/fonts/sourcesanspro-semibold-webfont.ttf differ diff --git a/release/1.1.0/fonts/sourcesanspro-semibold-webfont.woff b/release/1.1.0/fonts/sourcesanspro-semibold-webfont.woff new file mode 100755 index 000000000..d6b35fb6b Binary files /dev/null and b/release/1.1.0/fonts/sourcesanspro-semibold-webfont.woff differ diff --git a/release/1.1.0/forms.html b/release/1.1.0/forms.html new file mode 100644 index 000000000..25ab243d5 --- /dev/null +++ b/release/1.1.0/forms.html @@ -0,0 +1,1301 @@ + + + + a brand new styleguide: Forms + + + + + + + + + + + + +
+
+ +

Introduction

+ + +

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. +

+
+ +

Basic Forms

+
+
+ + +
+
+ + +
+
+ +
+ +
+
<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>
+
+

Autoselect Text Inputs

+

This form is used to show information that a user may wish to copy and paste somewhere.

+
%input.auto-select.form-control{:value => "This should auto highlight", 'data-behavior' => 'AutoSelect', readonly: 'readonly'}
+
+

Checkboxes & Radios

+ + +

Checkboxes are for selecting one or several options in a list while radios are for selecting one option from many.

+

Default (stacked)

+
+
+ +
+
+ +
+
+ +
+
+
%form.styleguide-form{:role => "form"}
+  .checkbox
+    %label
+      %input{:type => "checkbox", :value => ""}
+        Option one is this and that&mdash;be sure to include why it's great
+  .radio
+    %label
+      %input#optionsRadios1{:checked => "", :name => "optionsRadios", :type => "radio", :value => "option1"}
+        Option one is this and that&mdash;be sure to include why it's great
+  .radio
+    %label
+      %input#optionsRadios2{:name => "optionsRadios", :type => "radio", :value => "option2"}
+        Option two can be something else and selecting it will deselect option one
+
+

Inline Checkboxes & Radios

+

Use .checkbox-inline or .radio-inline class to a series of checkboxes or radios for controls appear on the same line.

+
+ + + +
+
+ + + +
+
+
%form.styleguide-form{:role => "form"}
+  .form-group
+    %label.checkbox-inline
+      %input#inlineCheckbox1{:type => "checkbox", :value => "option1"}
+        1
+    %label.checkbox-inline
+      %input#inlineCheckbox2{:type => "checkbox", :value => "option2"}
+        2
+    %label.checkbox-inline
+      %input#inlineCheckbox3{:type => "checkbox", :value => "option3"}
+        3
+
+  .form-group
+    %label.radio-inline
+      %input#inlineradio1{:type => "radio", :value => "option1"}
+        1
+    %label.radio-inline
+      %input#inlineradio2{:type => "radio", :value => "option2"}
+        2
+    %label.radio-inline
+      %input#inlineradio3{:type => "radio", :value => "option3"}
+        3
+
+

Disabled Controls

+

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>
<select class="form-control" disabled>
+  <option>Option 1</option>
+  <option>Option 2</option>
+</select>
<label>
+  <input type="checkbox" disabled>
+  I'm disabled!
+</label>
+
<button class="btn" disabled>
+  Hi
+</button>
+
+

Help Text

+

Help text +Block level help text for form controls.

+ + A block of help text that breaks onto a new line and may extend beyond one line. +
+
%form.styleguide-form{:role => "form"}
+  %input.form-control{:type => "text"}
+  %span.help-block A block of help text that breaks onto a new line and may extend beyond one line.
+
+

Inline Forms

+ + +

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.styleguide-form.form-inline{:role => "form"}
+  .form-group
+    %label.sr-only{:for => "exampleInputEmail2"} Email address
+    %input#exampleInputEmail2.form-control{:placeholder => "Enter email", :type => "email"}
+  .form-group
+    %label.sr-only{:for => "exampleInputPassword2"} Password
+    %input#exampleInputPassword2.form-control{:placeholder => "Password", :type => "password"}
+  .checkbox
+    %label
+      %input{:type => "checkbox"}
+      Remember me
+  %button.btn.btn-primary{:type => "submit"} Sign in
+
+

Inline Forms with Labels

+

Add .form-inline.inline-labels to your <form> for left-aligned and inline-block controls with labels inline with inputs.

+
+ + +
+
+ + +
+
+ +
+ +
+
%form.styleguide-form.form-inline.inline-labels{:role => "form"}
+  .form-group
+    %label{:for => "exampleInputEmail2"} Write a thing
+    %input#exampleInputEmail2.form-control{:placeholder => "Write a thing", :type => "email"}
+  .form-group
+    %label{:for => "exampleSelect"} Choose a thing
+    %select#exampleSelect.form-control
+      %option thing
+  .checkbox
+    %label
+      %input{:type => "checkbox"}
+      Remember me
+  %button.btn.btn-primary{:type => "submit"} Sign in
+
+

Inputs & Labels

+ + +

An input with the label top aligned (this is the default layout).

+
+ + +
+
+
%form.styleguide-form{:role => "form"}
+  .form-group
+    %label{:for => "exampleInputEmail1"}
+      %abbr{:title => "required"} *
+      Email address
+    %input#exampleInputEmail1.form-control{:placeholder => "Enter email", :type => "email", :required => "required", 'aria-required' => "true"}
+

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.styleguide-form.form-horizontal{:role => "form"}
+  .form-group
+    .col-md-6
+      %label.control-label{:for => "exampleInputEmail1"}
+        %abbr{:title => "required"} *
+        Email address
+    .col-md-18
+      %input#exampleInputEmail1.form-control{:placeholder => "Enter email", :type => "email", :required => "required", 'aria-required' => "true"}
+

An input with the label right aligned (N.B., control-label class provides the right alignment):

+
+ +
+ +
+
+
+
%form.styleguide-form.form-horizontal{:role => "form"}
+  .form-group
+    %label.col-md-6.control-label{:for => "exampleInputEmail1"}
+      %abbr{:title => "required"} *
+      Email address
+    .col-md-18
+      %input#exampleInputEmail1.form-control{:placeholder => "Enter email", :type => "email", :required => "required", 'aria-required' => "true"}
+

An unstyled inputs that doesn't have any of the default input styles

+ +
+
%form{:role => "form"}
+  %input.unstyled{"placeholder" => "This is a text input"}
+
+

HTML5 Controls

+

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.styleguide-form{:role => "form"}
+  %input.form-control{:placeholder => "Text input", :type => "text"}
+

Password field

+ +
+
%form.styleguide-form{:role => "form"}
+  %input.form-control{:placeholder => "Password", :type => "password"}
+

Date

+ +
+
%form.styleguide-form{:role => "form"}
+  %input.form-control{:placeholder => "Date", :type => "date"}
+

Number

+ +
+
%form.styleguide-form{:role => "form"}
+  %input.form-control{:placeholder => "Number", :type => "number"}
+

With a min/max and default starting value

+ +
+
%form.styleguide-form{:role => "form"}
+  %input.form-control{:placeholder => "Number", :type => "number", min: 0, max: 2, value: 1}
+

With a different increment value

+ +
+
%form.styleguide-form{:role => "form"}
+  %input.form-control{:placeholder => "Number", :type => "number", step: 5}
+

Email

Use this with fields that require email addresses to pop up the correct keyboard on mobile

+ +
+
%form.styleguide-form{:role => "form"}
+  %input.form-control{:placeholder => "Email", :type => "email"}
+

URL

Use this with fields that require urls to pop up the correct keyboard on mobile

+ +
+
%form.styleguide-form{:role => "form"}
+  %input.form-control{:placeholder => "URL", :type => "url"}
+

Telephone

Use this with fields that require telephone numbers to pop up the dialpad on mobile

+ +
+
%form.styleguide-form{:role => "form"}
+  %input.form-control{:placeholder => "Telephone", :type => "tel"}
+
+

Sizing

+

Set heights using the form control classes .input-lg and .input-sm. +Create larger or smaller form controls that match button sizes.

<input class="form-control input-lg" placeholder=".input-lg" type="text">
<input class="form-control" placeholder="Default Input" type="text">
+
<input class="form-control input-sm" placeholder=".input-sm" type="text">
+

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.styleguide-form{:role => "form"}
+  .row
+    .col-md-4
+      %input.form-control{:placeholder => ".col-xs-2", :type => "text"}
+    .col-md-6
+      %input.form-control{:placeholder => ".col-xs-3", :type => "text"}
+    .col-md-8
+      %input.form-control{:placeholder => ".col-xs-4", :type => "text"}
+
+

Search Inputs

+

Use this input when creating a search component.

+ + +
+
<div class="form-group form-group-search">
+  <input class="form-control" placeholder="This is a searchbox">
+  <i class="fa fa-search"></i>
+</div>
+
+

Read-Only Inputs

+

Add the readonly boolean attribute on an input to prevent user input and style the input as disabled.

+
<input class="form-control" type="text" placeholder="Readonly input here..." readonly>
+
+

Selects

+ + +

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.styleguide-form{:role => "form"}
+  %select.form-control
+    %option default option
+    %option an option
+    %option another option
+
+

Sizing

+

Set heights using the form control classes .input-lg and .input-sm. +Create larger or smaller form controls that match button sizes.

<select class="form-control input-lg">
+  <option>Option 1</option>
+  <option>Option 2</option>
+</select>
<select class="form-control" Input">
+  <option>Option 1</option>
+  <option>Option 2</option>
+</select>
+
<select class="form-control input-sm">
+  <option>Option 1</option>
+  <option>Option 2</option>
+</select>
+

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.styleguide-form{:role => "form"}
+  .row
+    .col-md-4
+      %input.form-control{:placeholder => ".col-xs-2", :type => "text"}
+    .col-md-6
+      %input.form-control{:placeholder => ".col-xs-3", :type => "text"}
+    .col-md-8
+      %input.form-control{:placeholder => ".col-xs-4", :type => "text"}
+
+

Fancy Selects

+

This is a fancy select!

+ +
+ +
+
+
%form.styleguide-form{:role => "form", 'style' => 'width: 200px'}
+  %label{:for => "fancy-select"} Description
+  .select-fancy
+    %select.form-control
+      %option Fancy Option 1
+      %option Fancy Option 2
+
+

Static Controls

+

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:

+
+ +
+

email@example.com

+
+
+
+ +
+ +
+
+
+
%form.form-horizontal.styleguide-form{:role => "form"}
+  .form-group
+    %label.col-md-4.control-label Email
+    .col-sm-10
+      %p.form-control-static email@example.com
+  .form-group
+    %label.col-md-4.control-label{:for => "inputPassword"} Password
+    .col-sm-10
+      %input#inputPassword.form-control{:placeholder => "Password", :type => "password"}
+

Here's an example in a vertical form:

+
+ +

someguy@test.com

+
+
+ + +
+
+
%form.styleguide-form{:role => "form"}
+  .form-group
+    %label.control-label Email
+    %p.form-control-static someguy@test.com
+  .form-group
+    %label.control-label{:for => "name"} Name
+    %input#name.form-control{:placeholder => "name"}
+
+

Text Areas

+

Text areas are used for larger amounts of input.

+
+ + +
+
+
%form.styleguide-form{:role => "form"}
+  .form-group
+    %label{:for => "exampleTextAreaId"} Description
+    %textarea#exampleTextAreaId.form-control{:rows => "3"}
+
+

Toggle Switches

+

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>
+
+

Validations

+

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.

+
+ + + + Error help text + +
+
<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>
+
+
+ + + Error help text + +
+
+
+
<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>
+

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>
+
+ + +
+ + diff --git a/release/1.1.0/images/aboutus-hero.jpg b/release/1.1.0/images/aboutus-hero.jpg new file mode 100644 index 000000000..6c647b276 Binary files /dev/null and b/release/1.1.0/images/aboutus-hero.jpg differ diff --git a/release/1.1.0/images/console-laptop.png b/release/1.1.0/images/console-laptop.png new file mode 100644 index 000000000..84ba20643 Binary files /dev/null and b/release/1.1.0/images/console-laptop.png differ diff --git a/release/1.1.0/images/favicon.ico b/release/1.1.0/images/favicon.ico new file mode 100644 index 000000000..aa9da6a12 Binary files /dev/null and b/release/1.1.0/images/favicon.ico differ diff --git a/release/1.1.0/images/gray-cloud.png b/release/1.1.0/images/gray-cloud.png new file mode 100644 index 000000000..30e1838fc Binary files /dev/null and b/release/1.1.0/images/gray-cloud.png differ diff --git a/release/1.1.0/images/logo-pcf.png b/release/1.1.0/images/logo-pcf.png new file mode 100644 index 000000000..8aa4c77c0 Binary files /dev/null and b/release/1.1.0/images/logo-pcf.png differ diff --git a/release/1.1.0/images/logo-pws.png b/release/1.1.0/images/logo-pws.png new file mode 100644 index 000000000..7bcec0855 Binary files /dev/null and b/release/1.1.0/images/logo-pws.png differ diff --git a/release/1.1.0/images/open-source-icon.png b/release/1.1.0/images/open-source-icon.png new file mode 100644 index 000000000..cbdaf485a Binary files /dev/null and b/release/1.1.0/images/open-source-icon.png differ diff --git a/release/1.1.0/images/p-logo.png b/release/1.1.0/images/p-logo.png new file mode 100644 index 000000000..22e8d84eb Binary files /dev/null and b/release/1.1.0/images/p-logo.png differ diff --git a/release/1.1.0/images/pivotal_footer_logo.png b/release/1.1.0/images/pivotal_footer_logo.png new file mode 100644 index 000000000..c25e309e8 Binary files /dev/null and b/release/1.1.0/images/pivotal_footer_logo.png differ diff --git a/release/1.1.0/images/pivotal_footer_logo@2x.png b/release/1.1.0/images/pivotal_footer_logo@2x.png new file mode 100644 index 000000000..57ae7233b Binary files /dev/null and b/release/1.1.0/images/pivotal_footer_logo@2x.png differ diff --git a/release/1.1.0/images/pui-logo@2x.png b/release/1.1.0/images/pui-logo@2x.png new file mode 100644 index 000000000..37c3e54e5 Binary files /dev/null and b/release/1.1.0/images/pui-logo@2x.png differ diff --git a/release/1.1.0/images/such-awesome.jpg b/release/1.1.0/images/such-awesome.jpg new file mode 100644 index 000000000..b034f775e Binary files /dev/null and b/release/1.1.0/images/such-awesome.jpg differ diff --git a/release/1.1.0/images/we-care-sprites.png b/release/1.1.0/images/we-care-sprites.png new file mode 100644 index 000000000..dbcabaae9 Binary files /dev/null and b/release/1.1.0/images/we-care-sprites.png differ diff --git a/release/1.1.0/index.html b/release/1.1.0/index.html new file mode 100644 index 000000000..3f98c227b --- /dev/null +++ b/release/1.1.0/index.html @@ -0,0 +1,730 @@ + + + + a brand new styleguide: Intro + + + + + + + + + + + + +
+
+ +

+ +
+
+

Pivotal UI

+

This is everything you need to get started building UI at Pivotal. Pivotal UI includes Pivotal styles as well as Bootstrap CSS, OOCSS, the FontAwesome icon font, and the Source Sans Pro Google Font in your project.

+
+
+

+
+
+

Download

+

Download the latest version of Pivotal UI and begin building!

+ Get Pivotal UI +

You will need to be part of the Pivotal CF Github organization to download Pivotal UI. If you do not have access, email ask+cf@pivotal.io.

+
+
+

What's included

+

Pivotal UI comes with everything you need from grids, to fonts, and even JavaScript!

+
    +
  • jQuery v2.1.1
    • +
  • modernizr v2.8.3
    • +
  • Bootstrap v3.2
    • +
  • Prism.js
    • +
  • Font Awesome v4.10
    • +
  • Normalize CSS v1.0.2
    • +
  • OOCSS
    • +
  • Source Sans Pro
    • +
+
+
+

+
+
+

Add it to your app

+
    +
  1. Unzip the release archive and move the resulting directory into your project.
    2. +
  2. Link to the css file in your html template to include the styles.
    3. +
  3. Add a script tag to your html template to use the javascript.
    4. +
+
+
+ 
<html>
+  <head>
+    <title>...</title>
+    <link rel="stylesheet" href="/path/to/release/pivotal-ui/pivotal-ui.css">
+    <script src="/path/to/release/pivotal-ui/pivotal-ui.js"></script>
+  </head>
+  <body>
+    <p class="type-brand-1">Hello, world!</p>
+  </body>
+</html>
+
+
+
+
+
+
+

Best practices

+

There are a few things you should know before working with Pivotal UI.

+
    +
  • Dont modify Pivotal UI stylesheets unless you are a contributer. See the contribution docs for more info.
    • +
  • You won't have to write your own CSS. We provide everything for you, even down to special classes for padding, margins, type alignment, etc.
    • +
  • If there is something you need and Pivotal UI doesn't have it, you can submit a feature request. To do so, please open an issue on Github. Screenshots are very helpful! We'll then have a conversation about what you are trying to achieve in your project and the best way to do that.
    • +
  • Have Fun!
    • +
+
+
+
+
+

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.
    • +
  • JavaScript - These components require Javascript. Some components you can find here are progress bars, modals, tabs, accordions, and tooltips.
    • +
  • by Product - Some components are built with a specific product in mind. You can find Console's app health indicators, and PWS Marketing graphics here.
    • +
+

By pulling components from each of these sections, you can quickly and easily scaffold pages for prototyping and production. Simply copy and paste applicable component code into your views and add any utility classes needed to make it perfect. +

+

+ + +
+ + diff --git a/release/1.1.0/intro.html b/release/1.1.0/intro.html new file mode 100644 index 000000000..3f98c227b --- /dev/null +++ b/release/1.1.0/intro.html @@ -0,0 +1,730 @@ + + + + a brand new styleguide: Intro + + + + + + + + + + + + +
+
+ +

+ +
+
+

Pivotal UI

+

This is everything you need to get started building UI at Pivotal. Pivotal UI includes Pivotal styles as well as Bootstrap CSS, OOCSS, the FontAwesome icon font, and the Source Sans Pro Google Font in your project.

+
+
+

+
+
+

Download

+

Download the latest version of Pivotal UI and begin building!

+ Get Pivotal UI +

You will need to be part of the Pivotal CF Github organization to download Pivotal UI. If you do not have access, email ask+cf@pivotal.io.

+
+
+

What's included

+

Pivotal UI comes with everything you need from grids, to fonts, and even JavaScript!

+
    +
  • jQuery v2.1.1
    • +
  • modernizr v2.8.3
    • +
  • Bootstrap v3.2
    • +
  • Prism.js
    • +
  • Font Awesome v4.10
    • +
  • Normalize CSS v1.0.2
    • +
  • OOCSS
    • +
  • Source Sans Pro
    • +
+
+
+

+
+
+

Add it to your app

+
    +
  1. Unzip the release archive and move the resulting directory into your project.
    2. +
  2. Link to the css file in your html template to include the styles.
    3. +
  3. Add a script tag to your html template to use the javascript.
    4. +
+
+
+ 
<html>
+  <head>
+    <title>...</title>
+    <link rel="stylesheet" href="/path/to/release/pivotal-ui/pivotal-ui.css">
+    <script src="/path/to/release/pivotal-ui/pivotal-ui.js"></script>
+  </head>
+  <body>
+    <p class="type-brand-1">Hello, world!</p>
+  </body>
+</html>
+
+
+
+
+
+
+

Best practices

+

There are a few things you should know before working with Pivotal UI.

+
    +
  • Dont modify Pivotal UI stylesheets unless you are a contributer. See the contribution docs for more info.
    • +
  • You won't have to write your own CSS. We provide everything for you, even down to special classes for padding, margins, type alignment, etc.
    • +
  • If there is something you need and Pivotal UI doesn't have it, you can submit a feature request. To do so, please open an issue on Github. Screenshots are very helpful! We'll then have a conversation about what you are trying to achieve in your project and the best way to do that.
    • +
  • Have Fun!
    • +
+
+
+
+
+

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.
    • +
  • JavaScript - These components require Javascript. Some components you can find here are progress bars, modals, tabs, accordions, and tooltips.
    • +
  • by Product - Some components are built with a specific product in mind. You can find Console's app health indicators, and PWS Marketing graphics here.
    • +
+

By pulling components from each of these sections, you can quickly and easily scaffold pages for prototyping and production. Simply copy and paste applicable component code into your views and add any utility classes needed to make it perfect. +

+

+ + +
+ + diff --git a/release/1.1.0/javascript.html b/release/1.1.0/javascript.html new file mode 100644 index 000000000..2586a3a98 --- /dev/null +++ b/release/1.1.0/javascript.html @@ -0,0 +1,1502 @@ + + + + a brand new styleguide: JavaScript + + + + + + + + + + + + +
+
+ +

Accordions

+ + +

These are frequently used in combination with our panel components. They have a header and body.

Accordions can be used with any background color class, add them to the header and body.

NOTE: The 'alligators' (the > in the HAML below) are structural -- +without them, the browser renders the whitespace on the anchor tags, +and the images jump around by a few pixels when they're toggled.

Also see the select tabs for a toggle triggered by a select group.

+

Basic

+

Use this to expand and collapse content.

+
+ Look at this content. +
+
%a.collapsed{data: {toggle: 'collapse'}, href: '#simple-collapse-example'}
+  .when-collapsed
+    Expand me
+  .when-expanded
+    Collapse me
+#simple-collapse-example.collapse
+  Look at this content.
+
+

Sizes

+ +

Default accordion size:

+ +
+
+ This content should hide and show when the trigger is clicked. +
+
+
+
#accordion-1.panel
+  .panel-heading-accordion.bg-neutral-11.collapse-trigger.collapsed{data: {toggle: 'collapse', parent: '#accordion-2'}, href: '#myCollapse-1'}
+    .row
+      .col-md-23
+        %h3.h5.collapse-title.type-em-1.type-primary-2> My fancy application
+  #myCollapse-1.panel-collapse.collapse
+    .panel-body-accordion.bg-neutral-11
+      This content should hide and show when the trigger is clicked.
+

Large accordion size:

+ +
+
+ This content should hide and show when the trigger is clicked. +
+
+
+
#accordion-2.panel
+  .panel-heading-accordion-large.bg-neutral-11.collapse-trigger.collapsed{data: {toggle: 'collapse', parent: '#accordion-2'}, href: '#myCollapse-2'}
+    .row
+      .col-md-23
+        %h3.h5.collapse-title.type-em-1.type-primary-2> My fancy application
+  #myCollapse-2.panel-collapse.collapse
+    .panel-body-accordion.bg-neutral-11
+      This content should hide and show when the trigger is clicked.
+
+

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. +
+
+
+
#accordion-5.panel
+  .panel-heading-accordion.bg-neutral-11.collapse-trigger.collapsed{data: {toggle: 'collapse', parent: '#accordion-3'}, href: '#myCollapse-5'}
+    .row
+      .col-md-23
+        %a
+          .when-collapsed-inline>
+            %i.fa.fa-caret-right.collapse-icon>
+          .when-expanded-inline>
+            %i.fa.fa-caret-down.collapse-icon>
+        %h3.h5.collapse-title.type-em-1.type-primary-2> My fancy application
+  #myCollapse-5.panel-collapse.collapse
+    .panel-body-accordion-divider.bg-neutral-11
+      This content should hide and show when the trigger is clicked.
+
+

Accordion with Shadow:

This adds a shadow to the accordion when it is both open and closed.

+ +
+
+ This content should hide and show when the trigger is clicked. +
+
+
+
#accordion-6.panel.panel-shadow
+  .panel-heading-accordion.bg-neutral-11.collapse-trigger.collapsed{data: {toggle: 'collapse', parent: '#accordion-3'}, href: '#myCollapse-6'}
+    .row
+      .col-md-23
+        %a
+          .when-collapsed-inline>
+            %i.fa.fa-caret-right.collapse-icon>
+          .when-expanded-inline>
+            %i.fa.fa-caret-down.collapse-icon>
+        %h3.h5.collapse-title.type-em-1.type-primary-2> My fancy application
+  #myCollapse-6.panel-collapse.collapse
+    .panel-body-accordion-divider.bg-neutral-11
+      This content should hide and show when the trigger is clicked.
+
+
+

With Icons

+

Accordion with plus/minus icon:

+ +
+
+ This content should hide and show when the trigger is clicked. +
+
+
+
#accordion-3.panel
+  .panel-heading-accordion-large.collapse-trigger.collapsed{data: {toggle: 'collapse', parent: '#accordion-2'}, href: '#myCollapse-3'}
+    .row
+      .col-md-23
+        %a
+          .when-collapsed-inline>
+            %i.fa.fa-plus-square.collapse-icon>
+          .when-expanded-inline>
+            %i.fa.fa-minus-square.collapse-icon>
+        %h3.h5.collapse-title.type-em-1.type-primary-2> My fancy application
+  #myCollapse-3.panel-collapse.collapse
+    .panel-body-accordion.bg-neutral-11
+      This content should hide and show when the trigger is clicked.
+

Accordion with caret right/down icon:

+ +
+
+ This content should hide and show when the trigger is clicked. +
+
+
+
#accordion-4.panel
+  .panel-heading-accordion.collapse-trigger.collapsed{data: {toggle: 'collapse', parent: '#accordion-3'}, href: '#myCollapse-4'}
+    .row
+      .col-md-23
+        %a
+          .when-collapsed-inline>
+            %i.fa.fa-caret-right.collapse-icon>
+          .when-expanded-inline>
+            %i.fa.fa-caret-down.collapse-icon>
+        %h3.h5.collapse-title.type-em-1.type-primary-2> My fancy application
+  #myCollapse-4.panel-collapse.collapse
+    .panel-body-accordion.bg-neutral-11
+      This content should hide and show when the trigger is clicked.
+
+
+

Maps

+

Full width map with marker at Pivotal Labs SF location, and an optional informational overlay.

+
+
+
+
+
+
+

Location

+
Pivotal Software Inc.
+ 875 Howard Street
+ San Francisco, CA 94103 +
+

Support: support@run.pivotal.io

+

Twitter: @pivotalws

+
+
+
+
+
+
+
+
+
+
<script src="http://maps.googleapis.com/maps/api/js?libraries=places"></script>
+<div class='map-wrapper'>
+  <div class='pane'>
+    <div class='container pan'>
+      <div class='row'>
+        <div class='col-sm-6 col-md-8 col-sm-offset-1'>
+          <div class='map-overlay panel panel-basic bg-neutral-10 paxxl'>
+            <h3 class="h2">Location</h3>
+            <address class='h4 pvl'>Pivotal Software Inc.<br>
+              875 Howard Street<br>
+              San Francisco, CA 94103
+            </address>
+            <p class='h4'>Support: <a href='mailto:support@run.pivotal.io'>support@run.pivotal.io</a></p>
+            <p class='h4'>Twitter: <a href='https://twitter.com/pivotalws'>@pivotalws</a></p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class='pane pane-map'>
+    <div id='labs-map'></div>
+  </div>
+</div>
+
var maps = (function() {
+  var self = this;
+  var map;
+
+  var mapOptions = {
+    placeId: "ChIJ9w1pfYiAhYAR45k8AD-TjhA",
+    center: new google.maps.LatLng(37.781787,-122.403911),
+    mapElementId: 'labs-map',
+    zoom: 18
+  };
+
+  var initialize = function() {
+    map = new google.maps.Map(document.getElementById(mapOptions.mapElementId), {
+      center: mapOptions.center,
+      zoom: mapOptions.zoom,
+      disableDefaultUI: true
+    });
+
+    var request = {
+      placeId: mapOptions.placeId
+    };
+
+    var service = new google.maps.places.PlacesService(map);
+    service.getDetails(request, createMarker);
+  };
+
+  var createMarker = function(place, status) {
+    if (status == google.maps.places.PlacesServiceStatus.OK) {
+      new google.maps.Marker({
+        map: map,
+        position: place.geometry.location
+      });
+    }
+  };
+
+  self.initialize = initialize;
+  return self;
+})();
+
+google.maps.event.addDomListener(window, 'load', maps.initialize);
+
+

Modals

+

Modals bring desired content to the foreground and de-emphasize the rest of the page.

+ +

+

+ + + + + + + + +

Tabs

+ + +

You can activate a tab or pill navigation without writing any JavaScript by simply specifying data-toggle="tab" on an element.

+

Highlight

+
+
+
+

Service Plans

+ +
+
+

Plan Features

+
+
Content 1
+
Content 2
+
Content 3
+
Content 4
+
+
+
+
+
.tab-highlight
+  .row
+    .col-md-8
+      %h1 Service Plans
+      %ul.nav.nav-stacked
+        %li.active
+          %a{"data-toggle" => "tab", :href => "#home"}
+            .row
+              .col-md-10.tab-title
+                Spark
+              .col-md-14
+                Free
+        %li
+          %a{"data-toggle" => "tab", :href => "#profile"}
+            .row
+              .col-md-10.tab-title
+                Boost
+              .col-md-14
+                $10/month
+        %li
+          %a{"data-toggle" => "tab", :href => "#messages"}
+            .row
+              .col-md-10.tab-title
+                Amp
+              .col-md-14
+                $50/month
+        %li
+          %a{"data-toggle" => "tab", :href => "#settings"}
+            .row
+              .col-md-10.tab-title
+                Shockingly long plan name is important to test
+              .col-md-14
+                $1000/month
+
+    .col-md-16
+      %h1 Plan Features
+      .tab-content
+        #home.tab-pane.fade.in.active Content 1
+        #profile.tab-pane.fade Content 2
+        #messages.tab-pane.fade Content 3
+        #settings.tab-pane.fade Content 4
+
+

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>
+
+
+

Responsive

+
+
+
+ +
+
+ +
+
+
+
.tab-responsive
+  .row
+    .col-sm-5
+      %ul.nav.hidden-xs
+        %li.active
+          %a{"data-toggle" => "tab", :href => "#tab-responsive-1"}
+            meep
+        %li
+          %a{"data-toggle" => "tab", :href => "#tab-responsive-2"}
+            foo
+        %li
+          %a{"data-toggle" => "tab", :href => "#tab-responsive-3"}
+            bar
+        %li
+          %a{"data-toggle" => "tab", :href => "#tab-responsive-4"}
+            baz
+
+    .col-sm-19
+      %ul.tab-content
+        %li.active
+          %a.visible-xs-block{"data-toggle" => "tab", :href => "#tab-responsive-1"}
+            meep
+        %li#tab-responsive-1.tab-pane.active.fade.in Content 1
+        %li
+          %a.visible-xs-block{"data-toggle" => "tab", :href => "#tab-responsive-2"}
+            foo
+        %li#tab-responsive-2.tab-pane.fade Content 2
+        %li
+          %a.visible-xs-block{"data-toggle" => "tab", :href => "#tab-responsive-3"}
+            foo
+        %li#tab-responsive-3.tab-pane.fade Content 3
+        %li
+          %a.visible-xs-block{"data-toggle" => "tab", :href => "#tab-responsive-4"}
+            foo
+        %li#tab-responsive-4.tab-pane.fade Content 4
+
+
+

Simple

+
+
+ Some Action +
+ +
+
Spaces Content
+
Domains Content
+
Members Content
+
+
+
.tab-simple
+  .tabs-action.txt-r
+    %a Some Action
+  %ul.nav.nav-tabs
+    %li.active
+      %a{"data-toggle" => "tab", :href => "#spaces"}Spaces
+    %li
+      %a{"data-toggle" => "tab", :href => "#domains"}Domains
+    %li
+      %a{"data-toggle" => "tab", :href => "#members"}Members
+
+
+  .tab-content
+    #spaces.tab-pane.fade.in.active Spaces Content
+    #domains.tab-pane.fade Domains Content
+    #members.tab-pane.fade Members Content
+
+
+

Simple Alt

+
+ +
+
Dashboard Content
+
Notifications Content
+
EULA Content
+
+
+
.tab-simple-alt
+  %ul.nav.nav-tabs
+    %li.active
+      %a{"data-toggle" => "tab", :href => "#dashboard"}Dashboard
+    %li
+      %a{"data-toggle" => "tab", :href => "#notifications"}Notifications
+    %li
+      %a{"data-toggle" => "tab", :href => "#eula"}EULA
+
+
+  .tab-content
+    #dashboard.tab-pane.fade.in.active Dashboard Content
+    #notifications.tab-pane.fade Notifications Content
+    #eula.tab-pane.fade EULA Content
+
+
+

Tooltip

+

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! + +

+ +

+ +

+ +

+ +

+
<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>
+
$('#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. +

+
+
+ +
+
<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>
+
$('#disabled-button-with-tooltip').tooltip();
+
+ + +
+ + diff --git a/release/1.1.0/layout.html b/release/1.1.0/layout.html new file mode 100644 index 000000000..e20de9f38 --- /dev/null +++ b/release/1.1.0/layout.html @@ -0,0 +1,1368 @@ + + + + a brand new styleguide: Layout + + + + + + + + + + + + +
+
+ +

Grids

+ + + +

+ Pivotal ui (via bootstrap) includes a responsive, mobile first fluid grid system that + appropriately scales up to 24 columns as the device or viewport size increases. + To work with the system, you need to treat mobile as your default + and build more complex layouts up from there. +

+ +

Introduction

+

Grid systems are used for creating page layouts through a series of rows and columns that house your content. +Here's how the bootstrap grid system works:

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:

Look to the examples for applying these principles to your code.

+

Media Queries

+

We use the following media queries in our sass files to create the key breakpoints in our grid system.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameSizeVariable Name
mobileno media query since this is the default in bootstrap
x-small480px$screen-xs-min
small768px$screen-sm-min
medium992px$screen-md-min
large1200px$screen-lg-min
x-large1800px$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 behaviorhorizontal at all timescollapsed to start, horizontal above breakpoints
container widthnone (auto)750px970px1170px
class prefix.col-xs-.col-sm-.col-md-.col-lg-
# of columns24
column widthauto~62px~81px~97px
gutter width30px (15px on each side of a column)
nestableyes
offsetsyes
column orderingyes
+ +

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>
+
+

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>
+
+

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>
+
+

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>
+

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.

+ + + + + + + + + + + + + + + +
ClassPadding between columns
default20px
.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>
+
+
+
<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>
+
+
+
+
<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>
+
+

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>
+
+

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>
+
+

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>
+
+

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.

+

Media

+ + +

The default media displays a media object (images, video, audio) to the left or right of a content block.

+ + ... + +
+

Media heading

+ 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. +
+
+
+
+

Media heading

+ 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. +
+ + ... + +
+
.media
+  %a.media-left{:href => "#"}
+    %img.media-object{:alt => "...", :src => "http://placehold.it/64x64"}
+  .media-body
+    %h4.media-heading Media heading
+    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.
+
+.media
+  .media-body
+    %h4.media-heading Media heading
+    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.
+  %a.media-right{:href => "#"}
+    %img.media-object{:alt => "...", :src => "http://placehold.it/64x64"}
+

Wrap the image in a fixed-size .image-container to make sure the image isn't +larger than the container

+ +
+ ... +
+ +
+

Media heading

+

+ 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. +

+
+
+
.media
+  %a.media-left{:href => "#"}
+    .image-container{style: "width: 100px; height: 50px;"}
+      %img.media-object{:alt => "...", :src => "http://placehold.it/64x64"}
+  .media-body
+    %h4.media-heading Media heading
+    %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.
+

You can also nest media objects inside of each other (useful for comment threads or articles lists).

+ + ... + +
+

Media heading

+

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 heading

+ 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 heading

+ 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 heading

+ 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. +
+
+
+
+
+.media
+  %a.media-left{:href => "#"}
+    %img.media-object{:alt => "...", :src => "http://placehold.it/64x64"}
+  .media-body
+    %h4.media-heading Media heading
+    %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.
+
+    / Nested media object
+    .media
+      %a.media-left{:href => "#"}
+        %img.media-object{:alt => "...", :src => "http://placehold.it/64x64"}
+      .media-body
+        %h4.media-heading Nested media heading
+        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
+        .media
+          %a.media-left{:href => "#"}
+            %img.media-object{:alt => "...", :src => "http://placehold.it/64x64"}
+          .media-body
+            %h4.media-heading Nested media heading
+            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
+    .media
+      %a.media-left{:href => "#"}
+        %img.media-object{:alt => "...", :src => "http://placehold.it/64x64"}
+      .media-body
+        %h4.media-heading Nested media heading
+        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.
+
+

Alignment

+

The images or other media can be aligned top, middle, or bottom. The default is top aligned.

+ + ... + +
+

Top aligned media

+ 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. +
+
+
+ + ... + +
+

Middle aligned media

+ 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. +
+
+
+ + ... + +
+

Bottom aligned media

+ 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. +
+
+
.media
+  %a.media-left{:href => "#"}
+    %img.media-object{:alt => "...", :src => "http://placehold.it/40x40"}
+  .media-body
+    %h4.media-heading Top aligned media
+    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.
+
+.media
+  %a.media-left.media-middle{:href => "#"}
+    %img.media-object{:alt => "...", :src => "http://placehold.it/40x40"}
+  .media-body
+    %h4.media-heading Middle aligned media
+    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.
+
+.media
+  %a.media-left.media-bottom{:href => "#"}
+    %img.media-object{:alt => "...", :src => "http://placehold.it/40x40"}
+  .media-body
+    %h4.media-heading Bottom aligned media
+    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.
+
+

Stackable

+

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.

+ + ... + +
+

Extra-small stackable

+
+
+
+ + ... + +
+

Small stackable

+
+
+
+ + ... + +
+

Medium stackable

+
+
+
+ + ... + +
+

Large stackable

+
+
+
.media.media-stackable-xs
+  %a.media-left{:href => "#"}
+    %img.media-object{:alt => "...", :src => "http://placehold.it/100x100"}
+  .media-body
+    %p Extra-small stackable
+
+.media.media-stackable-sm
+  %a.media-left{:href => "#"}
+    %img.media-object{:alt => "...", :src => "http://placehold.it/100x100"}
+  .media-body
+    %p Small stackable
+
+.media.media-stackable-md
+  %a.media-left{:href => "#"}
+    %img.media-object{:alt => "...", :src => "http://placehold.it/100x100"}
+  .media-body
+    %p Medium stackable
+
+.media.media-stackable-lg
+  %a.media-left{:href => "#"}
+    %img.media-object{:alt => "...", :src => "http://placehold.it/100x100"}
+  .media-body
+    %p Large stackable
+
+

Panes

+

Panes are horizontal groupings of content that are usually used to +span the full browser window width. It's going to look funny here, +a better way to view it is on the panes page.

You can combine up to two background classes on the pane component. +The one on the .pane element will span the full browser width. The +one on the .container element will be constrained to the content width.

+
+

This is a pane

+
+
+ +
<div class="pane bg-dark-1">
+  <div class="container bg-glow">
+    <h1 class="type-neutral-11">This is a pane</h1>
+  </div>
+</div>
+
+
+
+

This is a pane

+
+ A laptop showing Pivotal Web Services dashboard. +
+
+
+
+
+

This is another pane

+
+
+ +
<div class="pane pane-offset bg-dark-1">
+  <div class="container bg-glow">
+    <h1 class="type-neutral-11">This is a pane</h1>
+    <div class="pane-image">
+      <img class="img-responsive" src="../images/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>
+
+
+

Vertical Align

+

The Aligner allows you to vertically align children to the top, center, or bottom. +Its height is set by default to 230px.

This component doesn't do any horizontal alignment. +You can use grids, or the text-alignment classes +.txt-l, .txt-r, and .txt-c with this component.

+
+

+ This component is not supported in IE10 and below. + While the content will appear, it will not be vertically aligned. +

+
+
+ Centered content +
+
<div class="aligner txt-c">
+  <a class="aligner-item" href="http://bitly.com/ZTHUDU">Centered content</a>
+</div>
+

Override the default height by setting an inline style like so:

+ On Top + Center + Bottom +
+
<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>
+

Note: the background colors in the example are just for display in the styleguide.

+ + +
+ + diff --git a/release/1.1.0/nginx.conf b/release/1.1.0/nginx.conf new file mode 100644 index 000000000..6b384f373 --- /dev/null +++ b/release/1.1.0/nginx.conf @@ -0,0 +1,33 @@ +worker_processes 1; +daemon off; + +error_log <%= ENV["APP_ROOT"] %>/nginx/logs/error.log; +events { worker_connections 1024; } + +http { + 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; + tcp_nopush on; + keepalive_timeout 30; + + server { + listen <%= ENV["PORT"] %>; + server_name localhost; + + location ~ /\.ht { deny all; } + location / { + root <%= ENV["APP_ROOT"] %>/public; + index index.html index.htm Default.htm; + } + + error_page 404 /404.html; + location /404.html { + root <%= ENV["APP_ROOT"] %>/public; + internal; + } + } +} diff --git a/release/1.1.0/objects.html b/release/1.1.0/objects.html new file mode 100644 index 000000000..cc604f17c --- /dev/null +++ b/release/1.1.0/objects.html @@ -0,0 +1,2039 @@ + + + + a brand new styleguide: Objects + + + + + + + + + + + + +
+
+ +

Accordions

+ + +

These are frequently used in combination with our panel components. They have a header and body.

Accordions can be used with any background color class, add them to the header and body.

NOTE: The 'alligators' (the > in the HAML below) are structural -- +without them, the browser renders the whitespace on the anchor tags, +and the images jump around by a few pixels when they're toggled.

Also see the select tabs for a toggle triggered by a select group.

+

Basic

+

Use this to expand and collapse content.

+
+ Look at this content. +
+
%a.collapsed{data: {toggle: 'collapse'}, href: '#simple-collapse-example'}
+  .when-collapsed
+    Expand me
+  .when-expanded
+    Collapse me
+#simple-collapse-example.collapse
+  Look at this content.
+
+

Sizes

+ +

Default accordion size:

+ +
+
+ This content should hide and show when the trigger is clicked. +
+
+
+
#accordion-1.panel
+  .panel-heading-accordion.bg-neutral-11.collapse-trigger.collapsed{data: {toggle: 'collapse', parent: '#accordion-2'}, href: '#myCollapse-1'}
+    .row
+      .col-md-23
+        %h3.h5.collapse-title.type-em-1.type-primary-2> My fancy application
+  #myCollapse-1.panel-collapse.collapse
+    .panel-body-accordion.bg-neutral-11
+      This content should hide and show when the trigger is clicked.
+

Large accordion size:

+ +
+
+ This content should hide and show when the trigger is clicked. +
+
+
+
#accordion-2.panel
+  .panel-heading-accordion-large.bg-neutral-11.collapse-trigger.collapsed{data: {toggle: 'collapse', parent: '#accordion-2'}, href: '#myCollapse-2'}
+    .row
+      .col-md-23
+        %h3.h5.collapse-title.type-em-1.type-primary-2> My fancy application
+  #myCollapse-2.panel-collapse.collapse
+    .panel-body-accordion.bg-neutral-11
+      This content should hide and show when the trigger is clicked.
+
+

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. +
+
+
+
#accordion-5.panel
+  .panel-heading-accordion.bg-neutral-11.collapse-trigger.collapsed{data: {toggle: 'collapse', parent: '#accordion-3'}, href: '#myCollapse-5'}
+    .row
+      .col-md-23
+        %a
+          .when-collapsed-inline>
+            %i.fa.fa-caret-right.collapse-icon>
+          .when-expanded-inline>
+            %i.fa.fa-caret-down.collapse-icon>
+        %h3.h5.collapse-title.type-em-1.type-primary-2> My fancy application
+  #myCollapse-5.panel-collapse.collapse
+    .panel-body-accordion-divider.bg-neutral-11
+      This content should hide and show when the trigger is clicked.
+
+

Accordion with Shadow:

This adds a shadow to the accordion when it is both open and closed.

+ +
+
+ This content should hide and show when the trigger is clicked. +
+
+
+
#accordion-6.panel.panel-shadow
+  .panel-heading-accordion.bg-neutral-11.collapse-trigger.collapsed{data: {toggle: 'collapse', parent: '#accordion-3'}, href: '#myCollapse-6'}
+    .row
+      .col-md-23
+        %a
+          .when-collapsed-inline>
+            %i.fa.fa-caret-right.collapse-icon>
+          .when-expanded-inline>
+            %i.fa.fa-caret-down.collapse-icon>
+        %h3.h5.collapse-title.type-em-1.type-primary-2> My fancy application
+  #myCollapse-6.panel-collapse.collapse
+    .panel-body-accordion-divider.bg-neutral-11
+      This content should hide and show when the trigger is clicked.
+
+
+

With Icons

+

Accordion with plus/minus icon:

+ +
+
+ This content should hide and show when the trigger is clicked. +
+
+
+
#accordion-3.panel
+  .panel-heading-accordion-large.collapse-trigger.collapsed{data: {toggle: 'collapse', parent: '#accordion-2'}, href: '#myCollapse-3'}
+    .row
+      .col-md-23
+        %a
+          .when-collapsed-inline>
+            %i.fa.fa-plus-square.collapse-icon>
+          .when-expanded-inline>
+            %i.fa.fa-minus-square.collapse-icon>
+        %h3.h5.collapse-title.type-em-1.type-primary-2> My fancy application
+  #myCollapse-3.panel-collapse.collapse
+    .panel-body-accordion.bg-neutral-11
+      This content should hide and show when the trigger is clicked.
+

Accordion with caret right/down icon:

+ +
+
+ This content should hide and show when the trigger is clicked. +
+
+
+
#accordion-4.panel
+  .panel-heading-accordion.collapse-trigger.collapsed{data: {toggle: 'collapse', parent: '#accordion-3'}, href: '#myCollapse-4'}
+    .row
+      .col-md-23
+        %a
+          .when-collapsed-inline>
+            %i.fa.fa-caret-right.collapse-icon>
+          .when-expanded-inline>
+            %i.fa.fa-caret-down.collapse-icon>
+        %h3.h5.collapse-title.type-em-1.type-primary-2> My fancy application
+  #myCollapse-4.panel-collapse.collapse
+    .panel-body-accordion.bg-neutral-11
+      This content should hide and show when the trigger is clicked.
+
+
+

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.

+

Success

+
+
<div class="alert alert-success">
+  <p class="em-high">Success</p>
+</div>
+

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.

+
    +
  • thing 1
    • +
  • thing 2
    • +
+
+
<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>
+

By adding .alert-dismassable 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>
+
+

There are may use cases for alerts. Here is a list of our different alert types.

+ +
+
+ +
+
+ Everything is wonderful. + Be happy. +
+
+
<div class="alert alert-success alert-dismissable">
+  <button class="close" data-dismiss="alert">
+    <i class="fa fa-times"></i>
+  </button>
+  <div class="media">
+    <div class="media-left">
+      <i class="fa fa-check-circle"></i>
+    </div>
+    <div class="media-body em-high">
+      Everything is wonderful.
+      <a class="alert-link" href="http://bit.ly/QCMZM5">Be happy.</a>
+    </div>
+  </div>
+</div>
+ +
+
+ +
+
+ Info for you. + Tell me more. +
+
+
<div class="alert alert-info alert-dismissable">
+  <button class="close" data-dismiss="alert">
+    <i class="fa fa-times"></i>
+  </button>
+  <div class="media">
+    <div class="media-left">
+      <i class="fa fa-info-circle"></i>
+    </div>
+    <div class="media-body em-high">
+      Info for you.
+      <a class="alert-link" href="http://bit.ly/1DFns8H">Tell me more.</a>
+    </div>
+  </div>
+</div>
+ +
+
+ +
+
+ Warning: There is no parking on the dancefloor. + Be alert. +
+
+
<div class="alert alert-warning alert-dismissable">
+  <button class="close" data-dismiss="alert">
+    <i class="fa fa-times"></i>
+  </button>
+  <div class="media">
+    <div class="media-left">
+      <i class="fa fa-exclamation-triangle"></i>
+    </div>
+    <div class="media-body em-high">
+      Warning: There is no parking on the dancefloor.
+      <a class="alert-link" href="http://bit.ly/1uM05DJ">Be alert.</a>
+    </div>
+  </div>
+</div>
+ +
+
+ +
+
+ Something has gone horribly awry. + You've made a huge mistake. +
+
+
+
<div class="alert alert-error alert-dismissable">
+  <button class="close" data-dismiss="alert">
+    <i class="fa fa-times"></i>
+  </button>
+  <div class="media">
+    <div class="media-left">
+      <i class="fa fa-exclamation-triangle"></i>
+    </div>
+    <div class="media-body em-high">
+      Something has gone horribly awry.
+      <a class="alert-link" href="http://bit.ly/1rooFJV">You've made a huge mistake.</a>
+    </div>
+  </div>
+</div>
+
+

Back to Top

+

You can use this component to scroll to the top of a page. Leave off the .styleguide-component-wrapper div when using it in other contexts.

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.

+ +
+
.styleguide-component-wrapper
+  %a.back-to-top{:href => "#"}
+
+

Code

+ + +

In order to show 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:

class Foo
  def bar
    puts 'hi'
  end
end
+
%pre
+  %code.language-ruby
+    :preserve
+      class Foo
+        def bar
+          puts 'hi'
+        end
+      end
+

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.pre-scrollable
+  %code.language-ruby
+    :preserve
+      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
+

Scrollable with too little content:

class Foo
  def bar
    puts 'hi'
  end
end
+
+%pre.pre-scrollable
+  %code.language-ruby
+    :preserve
+      class Foo
+        def bar
+          puts 'hi'
+        end
+      end
+
+

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>
+
+

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>
+
+

Terminal Window

+

+ 
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
+
+
.terminal
+  %pre
+    %code.language-ruby
+      :preserve
+        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
+
+

Maps

+

Full width map with marker at Pivotal Labs SF location, and an optional informational overlay.

+
+
+
+
+
+
+

Location

+
Pivotal Software Inc.
+ 875 Howard Street
+ San Francisco, CA 94103 +
+

Support: support@run.pivotal.io

+

Twitter: @pivotalws

+
+
+
+
+
+
+
+
+
+
<script src="http://maps.googleapis.com/maps/api/js?libraries=places"></script>
+<div class='map-wrapper'>
+  <div class='pane'>
+    <div class='container pan'>
+      <div class='row'>
+        <div class='col-sm-6 col-md-8 col-sm-offset-1'>
+          <div class='map-overlay panel panel-basic bg-neutral-10 paxxl'>
+            <h3 class="h2">Location</h3>
+            <address class='h4 pvl'>Pivotal Software Inc.<br>
+              875 Howard Street<br>
+              San Francisco, CA 94103
+            </address>
+            <p class='h4'>Support: <a href='mailto:support@run.pivotal.io'>support@run.pivotal.io</a></p>
+            <p class='h4'>Twitter: <a href='https://twitter.com/pivotalws'>@pivotalws</a></p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class='pane pane-map'>
+    <div id='labs-map'></div>
+  </div>
+</div>
+
var maps = (function() {
+  var self = this;
+  var map;
+
+  var mapOptions = {
+    placeId: "ChIJ9w1pfYiAhYAR45k8AD-TjhA",
+    center: new google.maps.LatLng(37.781787,-122.403911),
+    mapElementId: 'labs-map',
+    zoom: 18
+  };
+
+  var initialize = function() {
+    map = new google.maps.Map(document.getElementById(mapOptions.mapElementId), {
+      center: mapOptions.center,
+      zoom: mapOptions.zoom,
+      disableDefaultUI: true
+    });
+
+    var request = {
+      placeId: mapOptions.placeId
+    };
+
+    var service = new google.maps.places.PlacesService(map);
+    service.getDetails(request, createMarker);
+  };
+
+  var createMarker = function(place, status) {
+    if (status == google.maps.places.PlacesServiceStatus.OK) {
+      new google.maps.Marker({
+        map: map,
+        position: place.geometry.location
+      });
+    }
+  };
+
+  self.initialize = initialize;
+  return self;
+})();
+
+google.maps.event.addDomListener(window, 'load', maps.initialize);
+
+

Panels

+ + +

Panels are often used to group related content. They include box headers, footers, and can be combined with any backgrounds.

Panels are typically a combination of contours, backgrounds, and content including headers and footers. This section describes the contours.

+

Alternate

+

Alternate panels can be in a default, off, or danger state.

+
+ Alternate Panel +
+
+
.panel.panel-alt
+  .panel-body
+    Alternate Panel
+
+ Danger alternate panel +
+
+
.panel.panel-alt.panel-danger
+  .panel-body
+    Danger alternate panel
+
+ Stopped alternate panel +
+
+
.panel.panel-alt.panel-off
+  .panel-body
+    Stopped alternate panel
+
+ Off alternate panel +
+
+
.panel.panel-alt.panel-empty
+  .panel-body
+    Off alternate panel
+
+ Editing alternate panel +
+
+
.panel.panel-alt.panel-editing
+  .panel-body
+    Editing alternate panel
+
+

Basic

+

Basic Panels are the new Simple Panels for G-Major

+
+ Basic Panel +
+
+
.panel.panel-basic.bg-neutral-11
+  .panel-body
+    Basic Panel
+
+

Card

+

Using panels with card lists makes any .panel-body have a minimum "card" height.

    +
  • +
    + Card Panel +
    +
    • +
  • +
    + Card Panel +
    +
    • +
  • +
    + Card Panel +
    +
    • +
+
%ul.list-cards.list-cards-sm.list-card-2
+  %li.panel.panel-clickable-alt.bg-neutral-11
+    .panel-body
+      Card Panel
+  %li.panel.panel-clickable-alt.bg-neutral-11
+    .panel-body
+      Card Panel
+  %li.panel.panel-clickable-alt.bg-neutral-11
+    .panel-body
+      Card Panel
+
+

Clickable

+

These panels lighten on hover to indicate that they are clickable. +Please use them when a click on the panel triggers an action.

+
+ Panel Clickable +
+
+
.panel.panel-clickable
+  .panel-body
+    Panel Clickable
+
+ Panel Clickable Alt +
+
+
.panel.panel-clickable-alt
+  .panel-body
+    Panel Clickable Alt
+

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.

+
+

+ hover-target-1 - default text color => link color +

+
+ +
%a.panel.panel-clickable
+  .panel-body
+    %p.hover-target-1
+      hover-target-1 - default text color => link color
+
+

+ hover-target-2 - light gray text => default text color +

+
+ +
%a.panel.panel-clickable
+  .panel-body
+    %p.hover-target-2
+      hover-target-2 - light gray text => default text color
+
+

+ hover-target-3 - $gray-9 background => white background +

+
+ +
%a.panel.panel-clickable
+  .panel-body
+    %p.hover-target-3
+      hover-target-3 - $gray-9 background => white background
+
+

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.

+
Body Content
+
Footer Content
+
+
<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>
+
+
+
+ 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>
+
+

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) +
+
+
.panel.panel-highlight
+  .panel-body
+    Not Hoverable (use when the panel has no associated action, for instance if the action is disabled due to lack of permissions)
+
+

Scrollable

+

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.

+
+

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.

+
+
+
.panel.panel-scrollable.bg-neutral-11
+  .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.
+
+

Shadow

+

Shadow panels add a bottom shadow to the panel.

+
+ Shadow Panel +
+
+
.panel.panel-shadow-1.bg-neutral-11
+  .panel-body
+    Shadow Panel
+
+ Shadow Panel +
+
+
.panel.panel-shadow-2.bg-neutral-11
+  .panel-body
+    Shadow Panel
+
+ Shadow Panel +
+
+
.panel.panel-shadow-3.bg-neutral-11
+  .panel-body
+    Shadow Panel
+
+ Shadow Panel +
+
+
.panel.panel-shadow-4.bg-neutral-11
+  .panel-body
+    Shadow Panel
+

Simple

+
+
+ Simple Panel +
+
+
.panel.panel-simple.bg-neutral-11
+  .panel-body
+    Simple 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-cards-link panel panel-flex panel-tile bg-neutral-11" href="http://www.google.com/">
+      <div class="panel-body">
+        Hover to see secondary state.
+      </div>
+      <div class="panel-footer">
+        This is the footer
+      </div>
+    </a>
+  </li>
+</ul>
+
+

Progress Bars

+

This section contains static progress bar styles.

+
+
+ 0% +
+
+
+

+ 0 MB of 100 MB Used +

+
+
+
+ 3% +
+
+
+

+ 3 MB of 100 MB Used +

+
+
+
+ 9% +
+
+
+

+ 9 MB of 100 MB Used +

+
+
+
+ 60% +
+
+
+

+ 60 MB of 100 MB Used +

+
+
+
+ 90% +
+
+
+

+ 90 MB of 100 MB Used +

+
.progress
+  .progress-bar{"aria-valuemax" => "100", "aria-valuemin" => "0", "aria-valuenow" => "0", :role => "progressbar", :style => "width: 0%;"}
+    .label
+      0%
+%p
+  0 MB of 100 MB Used
+
+.progress
+  .progress-bar{"aria-valuemax" => "100", "aria-valuemin" => "0", "aria-valuenow" => "3", :role => "progressbar", :style => "width: 3%;"}
+    .label
+      3%
+%p
+  3 MB of 100 MB Used
+
+.progress
+  .progress-bar{"aria-valuemax" => "100", "aria-valuemin" => "0", "aria-valuenow" => "9", :role => "progressbar", :style => "width: 9%;"}
+    .label
+      9%
+%p
+  9 MB of 100 MB Used
+
+.progress
+  .progress-bar{"aria-valuemax" => "100", "aria-valuemin" => "0", "aria-valuenow" => "60", :role => "progressbar", :style => "width: 60%;"}
+    .label
+      60%
+%p
+  60 MB of 100 MB Used
+
+.progress
+  .progress-bar{"aria-valuemax" => "100", "aria-valuemin" => "0", "aria-valuenow" => "90", :role => "progressbar", :style => "width: 90%;"}
+    .label
+      90%
+%p
+  90 MB of 100 MB Used
+
+

Tables

+ + + + + + + + + + + + + + + + + + +
ClassDescription
.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.
+

Scrollable

+

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 sizesHeight
default183px
.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. +

+
+
+
+ + + + + + + + + + + +
#StatusCPUMemoryDiskUptime
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
0Running0%4.16 MB6.75 MB27 min
1Running0%4.07 MB6.75 MB27 min
2Running0%4.07 MB6.75 MB25 min
3Running0%4.14 MB6.75 MB25 min
4Running0%4.08 MB6.75 MB25 min
5Running0%4.16 MB6.75 MB25 min
6Running0%4.07 MB6.75 MB25 min
7Running0%4.07 MB6.75 MB25 min
8Running0%4.03 MB6.75 MB25 min
9Running0%4.07 MB6.75 MB25 min
+
+
+
<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>
+
+

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.table.table-data.table-light
+  %thead
+    %tr
+      %th
+        Service Instance
+      %th
+        Service Plan
+      %th
+        Bound Apps
+  %tbody
+    %tr
+      %td
+        oracle-db-sct
+      %td
+        Oracle DB
+      %td
+        12
+    %tr
+      %td
+        oracle-db-sct
+      %td
+        Oracle DB
+      %td
+        12
+    %tr
+      %td
+        oracle-db-sct
+      %td
+        Oracle DB
+      %td
+        12
+    %tr
+      %td
+        oracle-db-sct
+      %td
+        Oracle DB
+      %td
+        12
+
+

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.

+ + + + + + + + + + + + + + + + + + + + + + +
Emailjoe@example.com
Current Password*******
First NameJoe
Last NameBobs
Phone415-555-0000
+
+%table.table.table-key-value
+  %tbody
+    %tr
+      %th.col-md-8 Email
+      %td.col-md-16 joe@example.com
+    %tr
+      %th.col-md-8 Current Password
+      %td.col-md-16 *******
+    %tr
+      %th.col-md-8 First Name
+      %td.col-md-16 Joe
+    %tr
+      %th.col-md-8 Last Name
+      %td.col-md-16 Bobs
+    %tr
+      %th.col-md-8 Phone
+      %td.col-md-16 415-555-0000
+
+ + +
+ + diff --git a/release/1.1.0/pane.html b/release/1.1.0/pane.html new file mode 100644 index 000000000..b98e45557 --- /dev/null +++ b/release/1.1.0/pane.html @@ -0,0 +1,21 @@ + + + + a brand new styleguide: <%= title %> + + + + + + + + + +
+
+

This is a pane

+
+
+ + + diff --git a/release/1.1.0/pivotal-ui/pivotal-ui.css b/release/1.1.0/pivotal-ui/pivotal-ui.css new file mode 100644 index 000000000..6a44b7964 --- /dev/null +++ b/release/1.1.0/pivotal-ui/pivotal-ui.css @@ -0,0 +1,20433 @@ +@charset "UTF-8"; +/* ========================================================================== + Browser support + ========================================================================== */ +/* Typography + ========================================================================== */ +/* Grid + ========================================================================== */ +/* Transition mixins */ +/* Button Mixins */ +@font-face { + font-family: 'SourceSansPro'; + src: url("../fonts/sourcesanspro-light-webfont.eot"); + src: url("../fonts/sourcesanspro-light-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/sourcesanspro-light-webfont.woff") format("woff"), url("../fonts/sourcesanspro-light-webfont.ttf") format("truetype"), url("../fonts/sourcesanspro-light-webfont.svg#sourcesanspro-light-webfont") format("svg"); + font-weight: 200; + font-style: normal; +} +@font-face { + font-family: 'SourceSansPro'; + src: url("../fonts/sourcesanspro-regular-webfont.eot"); + src: url("../fonts/sourcesanspro-regular-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/sourcesanspro-regular-webfont.woff") format("woff"), url("../fonts/sourcesanspro-regular-webfont.ttf") format("truetype"), url("../fonts/sourcesanspro-regular-webfont.svg#sourcesanspro-regular-webfont") format("svg"); + font-weight: 400; + font-style: normal; +} +@font-face { + font-family: 'SourceSansPro'; + src: url("../fonts/sourcesanspro-it-webfont.eot"); + src: url("../fonts/sourcesanspro-it-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/sourcesanspro-it-webfont.woff") format("woff"), url("../fonts/sourcesanspro-it-webfont.ttf") format("truetype"), url("../fonts/sourcesanspro-it-webfont.svg#sourcesanspro-it-webfont") format("svg"); + font-weight: 400; + font-style: italic; +} +@font-face { + font-family: 'SourceSansPro'; + src: url("../fonts/sourcesanspro-bold-webfont.eot"); + src: url("../fonts/sourcesanspro-bold-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/sourcesanspro-bold-webfont.woff") format("woff"), url("../fonts/sourcesanspro-bold-webfont.ttf") format("truetype"), url("../fonts/sourcesanspro-bold-webfont.svg#sourcesanspro-bold-webfont") format("svg"); + font-weight: 600; + font-style: normal; +} +@font-face { + font-family: 'SourceSansPro'; + src: url("../fonts/sourcesanspro-black-webfont.eot"); + src: url("../fonts/sourcesanspro-black-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/sourcesanspro-black-webfont.woff") format("woff"), url("../fonts/sourcesanspro-black-webfont.ttf") format("truetype"), url("../fonts/sourcesanspro-black-webfont.svg#sourcesanspro-black-webfont") format("svg"); + font-weight: 900; + font-style: normal; +} +/*! + * Font Awesome 4.2.0 by @davegandy - http://fontawesome.io - @fontawesome + * License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License) + */ +/* FONT PATH + * -------------------------- */ +@font-face { + font-family: 'FontAwesome'; + src: url("../fonts/fontawesome-webfont.eot?v=4.2.0"); + src: url("../fonts/fontawesome-webfont.eot?#iefix&v=4.2.0") format("embedded-opentype"), url("../fonts/fontawesome-webfont.woff?v=4.2.0") format("woff"), url("../fonts/fontawesome-webfont.ttf?v=4.2.0") format("truetype"), url("../fonts/fontawesome-webfont.svg?v=4.2.0#fontawesomeregular") format("svg"); + font-weight: normal; + font-style: normal; +} +/* line 4, ../../node_modules/font-awesome/scss/_core.scss */ +.fa, .back-to-top { + display: inline-block; + font: normal normal normal 14px/1 FontAwesome; + font-size: inherit; + text-rendering: auto; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +/* makes the font 33% larger relative to the icon container */ +/* line 5, ../../node_modules/font-awesome/scss/_larger.scss */ +.fa-lg { + font-size: 1.33333em; + line-height: 0.75em; + vertical-align: -15%; +} + +/* line 10, ../../node_modules/font-awesome/scss/_larger.scss */ +.fa-2x { + font-size: 2em; +} + +/* line 11, ../../node_modules/font-awesome/scss/_larger.scss */ +.fa-3x { + font-size: 3em; +} + +/* line 12, ../../node_modules/font-awesome/scss/_larger.scss */ +.fa-4x { + font-size: 4em; +} + +/* line 13, ../../node_modules/font-awesome/scss/_larger.scss */ +.fa-5x { + font-size: 5em; +} + +/* line 3, ../../node_modules/font-awesome/scss/_fixed-width.scss */ +.fa-fw { + width: 1.28571em; + text-align: center; +} + +/* line 4, ../../node_modules/font-awesome/scss/_list.scss */ +.fa-ul { + padding-left: 0; + margin-left: 2.14286em; + list-style-type: none; +} +/* line 8, ../../node_modules/font-awesome/scss/_list.scss */ +.fa-ul > li { + position: relative; +} + +/* line 10, ../../node_modules/font-awesome/scss/_list.scss */ +.fa-li { + position: absolute; + left: -2.14286em; + width: 2.14286em; + top: 0.14286em; + text-align: center; +} +/* line 16, ../../node_modules/font-awesome/scss/_list.scss */ +.fa-li.fa-lg { + left: -1.85714em; +} + +/* line 4, ../../node_modules/font-awesome/scss/_bordered-pulled.scss */ +.fa-border { + padding: .2em .25em .15em; + border: solid 0.08em #eee; + border-radius: .1em; +} + +/* line 10, ../../node_modules/font-awesome/scss/_bordered-pulled.scss */ +.pull-right { + float: right; +} + +/* line 11, ../../node_modules/font-awesome/scss/_bordered-pulled.scss */ +.pull-left { + float: left; +} + +/* line 14, ../../node_modules/font-awesome/scss/_bordered-pulled.scss */ +.fa.pull-left, .pull-left.back-to-top { + margin-right: .3em; +} +/* line 15, ../../node_modules/font-awesome/scss/_bordered-pulled.scss */ +.fa.pull-right, .pull-right.back-to-top { + margin-left: .3em; +} + +/* line 4, ../../node_modules/font-awesome/scss/_spinning.scss */ +.fa-spin { + -webkit-animation: fa-spin 2s infinite linear; + animation: fa-spin 2s infinite linear; +} + +@-webkit-keyframes fa-spin { + 0% { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } + 100% { + -webkit-transform: rotate(359deg); + transform: rotate(359deg); + } +} +@keyframes fa-spin { + 0% { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } + 100% { + -webkit-transform: rotate(359deg); + transform: rotate(359deg); + } +} +/* line 4, ../../node_modules/font-awesome/scss/_rotated-flipped.scss */ +.fa-rotate-90 { + filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1); + -webkit-transform: rotate(90deg); + -ms-transform: rotate(90deg); + transform: rotate(90deg); +} + +/* line 5, ../../node_modules/font-awesome/scss/_rotated-flipped.scss */ +.fa-rotate-180 { + filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2); + -webkit-transform: rotate(180deg); + -ms-transform: rotate(180deg); + transform: rotate(180deg); +} + +/* line 6, ../../node_modules/font-awesome/scss/_rotated-flipped.scss */ +.fa-rotate-270 { + filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); + -webkit-transform: rotate(270deg); + -ms-transform: rotate(270deg); + transform: rotate(270deg); +} + +/* line 8, ../../node_modules/font-awesome/scss/_rotated-flipped.scss */ +.fa-flip-horizontal { + filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0); + -webkit-transform: scale(-1, 1); + -ms-transform: scale(-1, 1); + transform: scale(-1, 1); +} + +/* line 9, ../../node_modules/font-awesome/scss/_rotated-flipped.scss */ +.fa-flip-vertical { + filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2); + -webkit-transform: scale(1, -1); + -ms-transform: scale(1, -1); + transform: scale(1, -1); +} + +/* line 14, ../../node_modules/font-awesome/scss/_rotated-flipped.scss */ +:root .fa-rotate-90, +:root .fa-rotate-180, +:root .fa-rotate-270, +:root .fa-flip-horizontal, +:root .fa-flip-vertical { + filter: none; +} + +/* line 4, ../../node_modules/font-awesome/scss/_stacked.scss */ +.fa-stack { + position: relative; + display: inline-block; + width: 2em; + height: 2em; + line-height: 2em; + vertical-align: middle; +} + +/* line 12, ../../node_modules/font-awesome/scss/_stacked.scss */ +.fa-stack-1x, .fa-stack-2x { + position: absolute; + left: 0; + width: 100%; + text-align: center; +} + +/* line 18, ../../node_modules/font-awesome/scss/_stacked.scss */ +.fa-stack-1x { + line-height: inherit; +} + +/* line 19, ../../node_modules/font-awesome/scss/_stacked.scss */ +.fa-stack-2x { + font-size: 2em; +} + +/* line 20, ../../node_modules/font-awesome/scss/_stacked.scss */ +.fa-inverse { + color: #fff; +} + +/* Font Awesome uses the Unicode Private Use Area (PUA) to ensure screen + readers do not read off random characters that represent icons */ +/* line 4, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-glass:before { + content: ""; +} + +/* line 5, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-music:before { + content: ""; +} + +/* line 6, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-search:before { + content: ""; +} + +/* line 7, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-envelope-o:before { + content: ""; +} + +/* line 8, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-heart:before { + content: ""; +} + +/* line 9, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-star:before { + content: ""; +} + +/* line 10, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-star-o:before { + content: ""; +} + +/* line 11, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-user:before { + content: ""; +} + +/* line 12, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-film:before { + content: ""; +} + +/* line 13, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-th-large:before { + content: ""; +} + +/* line 14, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-th:before { + content: ""; +} + +/* line 15, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-th-list:before { + content: ""; +} + +/* line 16, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-check:before { + content: ""; +} + +/* line 17, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-remove:before, +.fa-close:before, +.fa-times:before { + content: ""; +} + +/* line 20, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-search-plus:before { + content: ""; +} + +/* line 21, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-search-minus:before { + content: ""; +} + +/* line 22, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-power-off:before { + content: ""; +} + +/* line 23, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-signal:before { + content: ""; +} + +/* line 24, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-gear:before, +.fa-cog:before { + content: ""; +} + +/* line 26, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-trash-o:before { + content: ""; +} + +/* line 27, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-home:before { + content: ""; +} + +/* line 28, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-file-o:before { + content: ""; +} + +/* line 29, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-clock-o:before { + content: ""; +} + +/* line 30, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-road:before { + content: ""; +} + +/* line 31, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-download:before { + content: ""; +} + +/* line 32, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-arrow-circle-o-down:before { + content: ""; +} + +/* line 33, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-arrow-circle-o-up:before { + content: ""; +} + +/* line 34, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-inbox:before { + content: ""; +} + +/* line 35, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-play-circle-o:before { + content: ""; +} + +/* line 36, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-rotate-right:before, +.fa-repeat:before { + content: ""; +} + +/* line 38, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-refresh:before { + content: ""; +} + +/* line 39, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-list-alt:before { + content: ""; +} + +/* line 40, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-lock:before { + content: ""; +} + +/* line 41, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-flag:before { + content: ""; +} + +/* line 42, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-headphones:before { + content: ""; +} + +/* line 43, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-volume-off:before { + content: ""; +} + +/* line 44, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-volume-down:before { + content: ""; +} + +/* line 45, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-volume-up:before { + content: ""; +} + +/* line 46, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-qrcode:before { + content: ""; +} + +/* line 47, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-barcode:before { + content: ""; +} + +/* line 48, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-tag:before { + content: ""; +} + +/* line 49, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-tags:before { + content: ""; +} + +/* line 50, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-book:before { + content: ""; +} + +/* line 51, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-bookmark:before { + content: ""; +} + +/* line 52, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-print:before { + content: ""; +} + +/* line 53, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-camera:before { + content: ""; +} + +/* line 54, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-font:before { + content: ""; +} + +/* line 55, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-bold:before { + content: ""; +} + +/* line 56, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-italic:before { + content: ""; +} + +/* line 57, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-text-height:before { + content: ""; +} + +/* line 58, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-text-width:before { + content: ""; +} + +/* line 59, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-align-left:before { + content: ""; +} + +/* line 60, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-align-center:before { + content: ""; +} + +/* line 61, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-align-right:before { + content: ""; +} + +/* line 62, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-align-justify:before { + content: ""; +} + +/* line 63, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-list:before { + content: ""; +} + +/* line 64, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-dedent:before, +.fa-outdent:before { + content: ""; +} + +/* line 66, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-indent:before { + content: ""; +} + +/* line 67, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-video-camera:before { + content: ""; +} + +/* line 68, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-photo:before, +.fa-image:before, +.fa-picture-o:before { + content: ""; +} + +/* line 71, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-pencil:before { + content: ""; +} + +/* line 72, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-map-marker:before { + content: ""; +} + +/* line 73, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-adjust:before { + content: ""; +} + +/* line 74, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-tint:before { + content: ""; +} + +/* line 75, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-edit:before, +.fa-pencil-square-o:before { + content: ""; +} + +/* line 77, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-share-square-o:before { + content: ""; +} + +/* line 78, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-check-square-o:before { + content: ""; +} + +/* line 79, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-arrows:before { + content: ""; +} + +/* line 80, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-step-backward:before { + content: ""; +} + +/* line 81, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-fast-backward:before { + content: ""; +} + +/* line 82, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-backward:before { + content: ""; +} + +/* line 83, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-play:before { + content: ""; +} + +/* line 84, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-pause:before { + content: ""; +} + +/* line 85, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-stop:before { + content: ""; +} + +/* line 86, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-forward:before { + content: ""; +} + +/* line 87, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-fast-forward:before { + content: ""; +} + +/* line 88, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-step-forward:before { + content: ""; +} + +/* line 89, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-eject:before { + content: ""; +} + +/* line 90, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-chevron-left:before { + content: ""; +} + +/* line 91, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-chevron-right:before { + content: ""; +} + +/* line 92, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-plus-circle:before { + content: ""; +} + +/* line 93, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-minus-circle:before { + content: ""; +} + +/* line 94, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-times-circle:before { + content: ""; +} + +/* line 95, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-check-circle:before { + content: ""; +} + +/* line 96, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-question-circle:before { + content: ""; +} + +/* line 97, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-info-circle:before { + content: ""; +} + +/* line 98, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-crosshairs:before { + content: ""; +} + +/* line 99, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-times-circle-o:before { + content: ""; +} + +/* line 100, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-check-circle-o:before { + content: ""; +} + +/* line 101, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-ban:before { + content: ""; +} + +/* line 102, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-arrow-left:before { + content: ""; +} + +/* line 103, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-arrow-right:before { + content: ""; +} + +/* line 104, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-arrow-up:before, .back-to-top:before { + content: ""; +} + +/* line 105, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-arrow-down:before { + content: ""; +} + +/* line 106, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-mail-forward:before, +.fa-share:before { + content: ""; +} + +/* line 108, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-expand:before { + content: ""; +} + +/* line 109, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-compress:before { + content: ""; +} + +/* line 110, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-plus:before { + content: ""; +} + +/* line 111, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-minus:before { + content: ""; +} + +/* line 112, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-asterisk:before { + content: ""; +} + +/* line 113, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-exclamation-circle:before { + content: ""; +} + +/* line 114, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-gift:before { + content: ""; +} + +/* line 115, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-leaf:before { + content: ""; +} + +/* line 116, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-fire:before { + content: ""; +} + +/* line 117, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-eye:before { + content: ""; +} + +/* line 118, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-eye-slash:before { + content: ""; +} + +/* line 119, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-warning:before, +.fa-exclamation-triangle:before { + content: ""; +} + +/* line 121, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-plane:before { + content: ""; +} + +/* line 122, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-calendar:before { + content: ""; +} + +/* line 123, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-random:before { + content: ""; +} + +/* line 124, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-comment:before { + content: ""; +} + +/* line 125, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-magnet:before { + content: ""; +} + +/* line 126, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-chevron-up:before { + content: ""; +} + +/* line 127, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-chevron-down:before { + content: ""; +} + +/* line 128, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-retweet:before { + content: ""; +} + +/* line 129, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-shopping-cart:before { + content: ""; +} + +/* line 130, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-folder:before { + content: ""; +} + +/* line 131, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-folder-open:before { + content: ""; +} + +/* line 132, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-arrows-v:before { + content: ""; +} + +/* line 133, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-arrows-h:before { + content: ""; +} + +/* line 134, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-bar-chart-o:before, +.fa-bar-chart:before { + content: ""; +} + +/* line 136, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-twitter-square:before { + content: ""; +} + +/* line 137, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-facebook-square:before { + content: ""; +} + +/* line 138, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-camera-retro:before { + content: ""; +} + +/* line 139, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-key:before { + content: ""; +} + +/* line 140, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-gears:before, +.fa-cogs:before { + content: ""; +} + +/* line 142, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-comments:before { + content: ""; +} + +/* line 143, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-thumbs-o-up:before { + content: ""; +} + +/* line 144, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-thumbs-o-down:before { + content: ""; +} + +/* line 145, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-star-half:before { + content: ""; +} + +/* line 146, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-heart-o:before { + content: ""; +} + +/* line 147, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-sign-out:before { + content: ""; +} + +/* line 148, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-linkedin-square:before { + content: ""; +} + +/* line 149, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-thumb-tack:before { + content: ""; +} + +/* line 150, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-external-link:before { + content: ""; +} + +/* line 151, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-sign-in:before { + content: ""; +} + +/* line 152, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-trophy:before { + content: ""; +} + +/* line 153, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-github-square:before { + content: ""; +} + +/* line 154, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-upload:before { + content: ""; +} + +/* line 155, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-lemon-o:before { + content: ""; +} + +/* line 156, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-phone:before { + content: ""; +} + +/* line 157, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-square-o:before { + content: ""; +} + +/* line 158, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-bookmark-o:before { + content: ""; +} + +/* line 159, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-phone-square:before { + content: ""; +} + +/* line 160, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-twitter:before { + content: ""; +} + +/* line 161, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-facebook:before { + content: ""; +} + +/* line 162, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-github:before { + content: ""; +} + +/* line 163, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-unlock:before { + content: ""; +} + +/* line 164, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-credit-card:before { + content: ""; +} + +/* line 165, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-rss:before { + content: ""; +} + +/* line 166, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-hdd-o:before { + content: ""; +} + +/* line 167, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-bullhorn:before { + content: ""; +} + +/* line 168, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-bell:before { + content: ""; +} + +/* line 169, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-certificate:before { + content: ""; +} + +/* line 170, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-hand-o-right:before { + content: ""; +} + +/* line 171, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-hand-o-left:before { + content: ""; +} + +/* line 172, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-hand-o-up:before { + content: ""; +} + +/* line 173, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-hand-o-down:before { + content: ""; +} + +/* line 174, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-arrow-circle-left:before { + content: ""; +} + +/* line 175, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-arrow-circle-right:before { + content: ""; +} + +/* line 176, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-arrow-circle-up:before { + content: ""; +} + +/* line 177, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-arrow-circle-down:before { + content: ""; +} + +/* line 178, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-globe:before { + content: ""; +} + +/* line 179, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-wrench:before { + content: ""; +} + +/* line 180, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-tasks:before { + content: ""; +} + +/* line 181, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-filter:before { + content: ""; +} + +/* line 182, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-briefcase:before { + content: ""; +} + +/* line 183, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-arrows-alt:before { + content: ""; +} + +/* line 184, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-group:before, +.fa-users:before { + content: ""; +} + +/* line 186, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-chain:before, +.fa-link:before { + content: ""; +} + +/* line 188, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-cloud:before { + content: ""; +} + +/* line 189, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-flask:before { + content: ""; +} + +/* line 190, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-cut:before, +.fa-scissors:before { + content: ""; +} + +/* line 192, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-copy:before, +.fa-files-o:before { + content: ""; +} + +/* line 194, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-paperclip:before { + content: ""; +} + +/* line 195, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-save:before, +.fa-floppy-o:before { + content: ""; +} + +/* line 197, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-square:before { + content: ""; +} + +/* line 198, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-navicon:before, +.fa-reorder:before, +.fa-bars:before { + content: ""; +} + +/* line 201, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-list-ul:before { + content: ""; +} + +/* line 202, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-list-ol:before { + content: ""; +} + +/* line 203, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-strikethrough:before { + content: ""; +} + +/* line 204, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-underline:before { + content: ""; +} + +/* line 205, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-table:before { + content: ""; +} + +/* line 206, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-magic:before { + content: ""; +} + +/* line 207, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-truck:before { + content: ""; +} + +/* line 208, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-pinterest:before { + content: ""; +} + +/* line 209, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-pinterest-square:before { + content: ""; +} + +/* line 210, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-google-plus-square:before { + content: ""; +} + +/* line 211, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-google-plus:before { + content: ""; +} + +/* line 212, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-money:before { + content: ""; +} + +/* line 213, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-caret-down:before { + content: ""; +} + +/* line 214, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-caret-up:before { + content: ""; +} + +/* line 215, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-caret-left:before { + content: ""; +} + +/* line 216, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-caret-right:before { + content: ""; +} + +/* line 217, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-columns:before { + content: ""; +} + +/* line 218, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-unsorted:before, +.fa-sort:before { + content: ""; +} + +/* line 220, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-sort-down:before, +.fa-sort-desc:before { + content: ""; +} + +/* line 222, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-sort-up:before, +.fa-sort-asc:before { + content: ""; +} + +/* line 224, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-envelope:before { + content: ""; +} + +/* line 225, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-linkedin:before { + content: ""; +} + +/* line 226, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-rotate-left:before, +.fa-undo:before { + content: ""; +} + +/* line 228, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-legal:before, +.fa-gavel:before { + content: ""; +} + +/* line 230, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-dashboard:before, +.fa-tachometer:before { + content: ""; +} + +/* line 232, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-comment-o:before { + content: ""; +} + +/* line 233, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-comments-o:before { + content: ""; +} + +/* line 234, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-flash:before, +.fa-bolt:before { + content: ""; +} + +/* line 236, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-sitemap:before { + content: ""; +} + +/* line 237, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-umbrella:before { + content: ""; +} + +/* line 238, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-paste:before, +.fa-clipboard:before { + content: ""; +} + +/* line 240, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-lightbulb-o:before { + content: ""; +} + +/* line 241, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-exchange:before { + content: ""; +} + +/* line 242, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-cloud-download:before { + content: ""; +} + +/* line 243, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-cloud-upload:before { + content: ""; +} + +/* line 244, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-user-md:before { + content: ""; +} + +/* line 245, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-stethoscope:before { + content: ""; +} + +/* line 246, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-suitcase:before { + content: ""; +} + +/* line 247, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-bell-o:before { + content: ""; +} + +/* line 248, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-coffee:before { + content: ""; +} + +/* line 249, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-cutlery:before { + content: ""; +} + +/* line 250, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-file-text-o:before { + content: ""; +} + +/* line 251, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-building-o:before { + content: ""; +} + +/* line 252, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-hospital-o:before { + content: ""; +} + +/* line 253, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-ambulance:before { + content: ""; +} + +/* line 254, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-medkit:before { + content: ""; +} + +/* line 255, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-fighter-jet:before { + content: ""; +} + +/* line 256, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-beer:before { + content: ""; +} + +/* line 257, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-h-square:before { + content: ""; +} + +/* line 258, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-plus-square:before { + content: ""; +} + +/* line 259, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-angle-double-left:before { + content: ""; +} + +/* line 260, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-angle-double-right:before { + content: ""; +} + +/* line 261, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-angle-double-up:before { + content: ""; +} + +/* line 262, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-angle-double-down:before { + content: ""; +} + +/* line 263, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-angle-left:before { + content: ""; +} + +/* line 264, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-angle-right:before { + content: ""; +} + +/* line 265, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-angle-up:before { + content: ""; +} + +/* line 266, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-angle-down:before { + content: ""; +} + +/* line 267, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-desktop:before { + content: ""; +} + +/* line 268, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-laptop:before { + content: ""; +} + +/* line 269, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-tablet:before { + content: ""; +} + +/* line 270, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-mobile-phone:before, +.fa-mobile:before { + content: ""; +} + +/* line 272, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-circle-o:before { + content: ""; +} + +/* line 273, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-quote-left:before { + content: ""; +} + +/* line 274, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-quote-right:before { + content: ""; +} + +/* line 275, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-spinner:before { + content: ""; +} + +/* line 276, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-circle:before { + content: ""; +} + +/* line 277, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-mail-reply:before, +.fa-reply:before { + content: ""; +} + +/* line 279, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-github-alt:before { + content: ""; +} + +/* line 280, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-folder-o:before { + content: ""; +} + +/* line 281, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-folder-open-o:before { + content: ""; +} + +/* line 282, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-smile-o:before { + content: ""; +} + +/* line 283, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-frown-o:before { + content: ""; +} + +/* line 284, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-meh-o:before { + content: ""; +} + +/* line 285, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-gamepad:before { + content: ""; +} + +/* line 286, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-keyboard-o:before { + content: ""; +} + +/* line 287, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-flag-o:before { + content: ""; +} + +/* line 288, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-flag-checkered:before { + content: ""; +} + +/* line 289, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-terminal:before { + content: ""; +} + +/* line 290, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-code:before { + content: ""; +} + +/* line 291, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-mail-reply-all:before, +.fa-reply-all:before { + content: ""; +} + +/* line 293, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-star-half-empty:before, +.fa-star-half-full:before, +.fa-star-half-o:before { + content: ""; +} + +/* line 296, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-location-arrow:before { + content: ""; +} + +/* line 297, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-crop:before { + content: ""; +} + +/* line 298, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-code-fork:before { + content: ""; +} + +/* line 299, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-unlink:before, +.fa-chain-broken:before { + content: ""; +} + +/* line 301, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-question:before { + content: ""; +} + +/* line 302, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-info:before { + content: ""; +} + +/* line 303, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-exclamation:before { + content: ""; +} + +/* line 304, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-superscript:before { + content: ""; +} + +/* line 305, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-subscript:before { + content: ""; +} + +/* line 306, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-eraser:before { + content: ""; +} + +/* line 307, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-puzzle-piece:before { + content: ""; +} + +/* line 308, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-microphone:before { + content: ""; +} + +/* line 309, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-microphone-slash:before { + content: ""; +} + +/* line 310, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-shield:before { + content: ""; +} + +/* line 311, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-calendar-o:before { + content: ""; +} + +/* line 312, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-fire-extinguisher:before { + content: ""; +} + +/* line 313, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-rocket:before { + content: ""; +} + +/* line 314, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-maxcdn:before { + content: ""; +} + +/* line 315, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-chevron-circle-left:before { + content: ""; +} + +/* line 316, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-chevron-circle-right:before { + content: ""; +} + +/* line 317, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-chevron-circle-up:before { + content: ""; +} + +/* line 318, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-chevron-circle-down:before { + content: ""; +} + +/* line 319, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-html5:before { + content: ""; +} + +/* line 320, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-css3:before { + content: ""; +} + +/* line 321, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-anchor:before { + content: ""; +} + +/* line 322, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-unlock-alt:before { + content: ""; +} + +/* line 323, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-bullseye:before { + content: ""; +} + +/* line 324, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-ellipsis-h:before { + content: ""; +} + +/* line 325, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-ellipsis-v:before { + content: ""; +} + +/* line 326, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-rss-square:before { + content: ""; +} + +/* line 327, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-play-circle:before { + content: ""; +} + +/* line 328, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-ticket:before { + content: ""; +} + +/* line 329, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-minus-square:before { + content: ""; +} + +/* line 330, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-minus-square-o:before { + content: ""; +} + +/* line 331, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-level-up:before { + content: ""; +} + +/* line 332, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-level-down:before { + content: ""; +} + +/* line 333, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-check-square:before { + content: ""; +} + +/* line 334, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-pencil-square:before { + content: ""; +} + +/* line 335, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-external-link-square:before { + content: ""; +} + +/* line 336, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-share-square:before { + content: ""; +} + +/* line 337, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-compass:before { + content: ""; +} + +/* line 338, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-toggle-down:before, +.fa-caret-square-o-down:before { + content: ""; +} + +/* line 340, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-toggle-up:before, +.fa-caret-square-o-up:before { + content: ""; +} + +/* line 342, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-toggle-right:before, +.fa-caret-square-o-right:before { + content: ""; +} + +/* line 344, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-euro:before, +.fa-eur:before { + content: ""; +} + +/* line 346, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-gbp:before { + content: ""; +} + +/* line 347, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-dollar:before, +.fa-usd:before { + content: ""; +} + +/* line 349, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-rupee:before, +.fa-inr:before { + content: ""; +} + +/* line 351, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-cny:before, +.fa-rmb:before, +.fa-yen:before, +.fa-jpy:before { + content: ""; +} + +/* line 355, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-ruble:before, +.fa-rouble:before, +.fa-rub:before { + content: ""; +} + +/* line 358, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-won:before, +.fa-krw:before { + content: ""; +} + +/* line 360, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-bitcoin:before, +.fa-btc:before { + content: ""; +} + +/* line 362, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-file:before { + content: ""; +} + +/* line 363, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-file-text:before { + content: ""; +} + +/* line 364, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-sort-alpha-asc:before { + content: ""; +} + +/* line 365, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-sort-alpha-desc:before { + content: ""; +} + +/* line 366, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-sort-amount-asc:before { + content: ""; +} + +/* line 367, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-sort-amount-desc:before { + content: ""; +} + +/* line 368, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-sort-numeric-asc:before { + content: ""; +} + +/* line 369, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-sort-numeric-desc:before { + content: ""; +} + +/* line 370, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-thumbs-up:before { + content: ""; +} + +/* line 371, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-thumbs-down:before { + content: ""; +} + +/* line 372, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-youtube-square:before { + content: ""; +} + +/* line 373, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-youtube:before { + content: ""; +} + +/* line 374, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-xing:before { + content: ""; +} + +/* line 375, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-xing-square:before { + content: ""; +} + +/* line 376, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-youtube-play:before { + content: ""; +} + +/* line 377, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-dropbox:before { + content: ""; +} + +/* line 378, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-stack-overflow:before { + content: ""; +} + +/* line 379, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-instagram:before { + content: ""; +} + +/* line 380, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-flickr:before { + content: ""; +} + +/* line 381, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-adn:before { + content: ""; +} + +/* line 382, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-bitbucket:before { + content: ""; +} + +/* line 383, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-bitbucket-square:before { + content: ""; +} + +/* line 384, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-tumblr:before { + content: ""; +} + +/* line 385, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-tumblr-square:before { + content: ""; +} + +/* line 386, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-long-arrow-down:before { + content: ""; +} + +/* line 387, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-long-arrow-up:before { + content: ""; +} + +/* line 388, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-long-arrow-left:before { + content: ""; +} + +/* line 389, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-long-arrow-right:before { + content: ""; +} + +/* line 390, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-apple:before { + content: ""; +} + +/* line 391, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-windows:before { + content: ""; +} + +/* line 392, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-android:before { + content: ""; +} + +/* line 393, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-linux:before { + content: ""; +} + +/* line 394, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-dribbble:before { + content: ""; +} + +/* line 395, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-skype:before { + content: ""; +} + +/* line 396, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-foursquare:before { + content: ""; +} + +/* line 397, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-trello:before { + content: ""; +} + +/* line 398, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-female:before { + content: ""; +} + +/* line 399, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-male:before { + content: ""; +} + +/* line 400, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-gittip:before { + content: ""; +} + +/* line 401, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-sun-o:before { + content: ""; +} + +/* line 402, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-moon-o:before { + content: ""; +} + +/* line 403, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-archive:before { + content: ""; +} + +/* line 404, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-bug:before { + content: ""; +} + +/* line 405, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-vk:before { + content: ""; +} + +/* line 406, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-weibo:before { + content: ""; +} + +/* line 407, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-renren:before { + content: ""; +} + +/* line 408, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-pagelines:before { + content: ""; +} + +/* line 409, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-stack-exchange:before { + content: ""; +} + +/* line 410, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-arrow-circle-o-right:before { + content: ""; +} + +/* line 411, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-arrow-circle-o-left:before { + content: ""; +} + +/* line 412, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-toggle-left:before, +.fa-caret-square-o-left:before { + content: ""; +} + +/* line 414, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-dot-circle-o:before { + content: ""; +} + +/* line 415, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-wheelchair:before { + content: ""; +} + +/* line 416, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-vimeo-square:before { + content: ""; +} + +/* line 417, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-turkish-lira:before, +.fa-try:before { + content: ""; +} + +/* line 419, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-plus-square-o:before { + content: ""; +} + +/* line 420, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-space-shuttle:before { + content: ""; +} + +/* line 421, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-slack:before { + content: ""; +} + +/* line 422, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-envelope-square:before { + content: ""; +} + +/* line 423, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-wordpress:before { + content: ""; +} + +/* line 424, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-openid:before { + content: ""; +} + +/* line 425, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-institution:before, +.fa-bank:before, +.fa-university:before { + content: ""; +} + +/* line 428, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-mortar-board:before, +.fa-graduation-cap:before { + content: ""; +} + +/* line 430, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-yahoo:before { + content: ""; +} + +/* line 431, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-google:before { + content: ""; +} + +/* line 432, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-reddit:before { + content: ""; +} + +/* line 433, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-reddit-square:before { + content: ""; +} + +/* line 434, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-stumbleupon-circle:before { + content: ""; +} + +/* line 435, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-stumbleupon:before { + content: ""; +} + +/* line 436, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-delicious:before { + content: ""; +} + +/* line 437, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-digg:before { + content: ""; +} + +/* line 438, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-pied-piper:before { + content: ""; +} + +/* line 439, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-pied-piper-alt:before { + content: ""; +} + +/* line 440, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-drupal:before { + content: ""; +} + +/* line 441, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-joomla:before { + content: ""; +} + +/* line 442, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-language:before { + content: ""; +} + +/* line 443, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-fax:before { + content: ""; +} + +/* line 444, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-building:before { + content: ""; +} + +/* line 445, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-child:before { + content: ""; +} + +/* line 446, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-paw:before { + content: ""; +} + +/* line 447, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-spoon:before { + content: ""; +} + +/* line 448, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-cube:before { + content: ""; +} + +/* line 449, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-cubes:before { + content: ""; +} + +/* line 450, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-behance:before { + content: ""; +} + +/* line 451, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-behance-square:before { + content: ""; +} + +/* line 452, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-steam:before { + content: ""; +} + +/* line 453, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-steam-square:before { + content: ""; +} + +/* line 454, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-recycle:before { + content: ""; +} + +/* line 455, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-automobile:before, +.fa-car:before { + content: ""; +} + +/* line 457, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-cab:before, +.fa-taxi:before { + content: ""; +} + +/* line 459, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-tree:before { + content: ""; +} + +/* line 460, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-spotify:before { + content: ""; +} + +/* line 461, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-deviantart:before { + content: ""; +} + +/* line 462, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-soundcloud:before { + content: ""; +} + +/* line 463, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-database:before { + content: ""; +} + +/* line 464, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-file-pdf-o:before { + content: ""; +} + +/* line 465, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-file-word-o:before { + content: ""; +} + +/* line 466, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-file-excel-o:before { + content: ""; +} + +/* line 467, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-file-powerpoint-o:before { + content: ""; +} + +/* line 468, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-file-photo-o:before, +.fa-file-picture-o:before, +.fa-file-image-o:before { + content: ""; +} + +/* line 471, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-file-zip-o:before, +.fa-file-archive-o:before { + content: ""; +} + +/* line 473, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-file-sound-o:before, +.fa-file-audio-o:before { + content: ""; +} + +/* line 475, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-file-movie-o:before, +.fa-file-video-o:before { + content: ""; +} + +/* line 477, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-file-code-o:before { + content: ""; +} + +/* line 478, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-vine:before { + content: ""; +} + +/* line 479, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-codepen:before { + content: ""; +} + +/* line 480, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-jsfiddle:before { + content: ""; +} + +/* line 481, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-life-bouy:before, +.fa-life-buoy:before, +.fa-life-saver:before, +.fa-support:before, +.fa-life-ring:before { + content: ""; +} + +/* line 486, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-circle-o-notch:before { + content: ""; +} + +/* line 487, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-ra:before, +.fa-rebel:before { + content: ""; +} + +/* line 489, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-ge:before, +.fa-empire:before { + content: ""; +} + +/* line 491, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-git-square:before { + content: ""; +} + +/* line 492, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-git:before { + content: ""; +} + +/* line 493, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-hacker-news:before { + content: ""; +} + +/* line 494, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-tencent-weibo:before { + content: ""; +} + +/* line 495, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-qq:before { + content: ""; +} + +/* line 496, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-wechat:before, +.fa-weixin:before { + content: ""; +} + +/* line 498, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-send:before, +.fa-paper-plane:before { + content: ""; +} + +/* line 500, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-send-o:before, +.fa-paper-plane-o:before { + content: ""; +} + +/* line 502, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-history:before { + content: ""; +} + +/* line 503, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-circle-thin:before { + content: ""; +} + +/* line 504, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-header:before { + content: ""; +} + +/* line 505, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-paragraph:before { + content: ""; +} + +/* line 506, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-sliders:before { + content: ""; +} + +/* line 507, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-share-alt:before { + content: ""; +} + +/* line 508, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-share-alt-square:before { + content: ""; +} + +/* line 509, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-bomb:before { + content: ""; +} + +/* line 510, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-soccer-ball-o:before, +.fa-futbol-o:before { + content: ""; +} + +/* line 512, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-tty:before { + content: ""; +} + +/* line 513, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-binoculars:before { + content: ""; +} + +/* line 514, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-plug:before { + content: ""; +} + +/* line 515, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-slideshare:before { + content: ""; +} + +/* line 516, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-twitch:before { + content: ""; +} + +/* line 517, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-yelp:before { + content: ""; +} + +/* line 518, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-newspaper-o:before { + content: ""; +} + +/* line 519, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-wifi:before { + content: ""; +} + +/* line 520, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-calculator:before { + content: ""; +} + +/* line 521, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-paypal:before { + content: ""; +} + +/* line 522, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-google-wallet:before { + content: ""; +} + +/* line 523, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-cc-visa:before { + content: ""; +} + +/* line 524, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-cc-mastercard:before { + content: ""; +} + +/* line 525, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-cc-discover:before { + content: ""; +} + +/* line 526, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-cc-amex:before { + content: ""; +} + +/* line 527, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-cc-paypal:before { + content: ""; +} + +/* line 528, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-cc-stripe:before { + content: ""; +} + +/* line 529, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-bell-slash:before { + content: ""; +} + +/* line 530, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-bell-slash-o:before { + content: ""; +} + +/* line 531, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-trash:before { + content: ""; +} + +/* line 532, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-copyright:before { + content: ""; +} + +/* line 533, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-at:before { + content: ""; +} + +/* line 534, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-eyedropper:before { + content: ""; +} + +/* line 535, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-paint-brush:before { + content: ""; +} + +/* line 536, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-birthday-cake:before { + content: ""; +} + +/* line 537, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-area-chart:before { + content: ""; +} + +/* line 538, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-pie-chart:before { + content: ""; +} + +/* line 539, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-line-chart:before { + content: ""; +} + +/* line 540, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-lastfm:before { + content: ""; +} + +/* line 541, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-lastfm-square:before { + content: ""; +} + +/* line 542, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-toggle-off:before { + content: ""; +} + +/* line 543, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-toggle-on:before { + content: ""; +} + +/* line 544, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-bicycle:before { + content: ""; +} + +/* line 545, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-bus:before { + content: ""; +} + +/* line 546, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-ioxhost:before { + content: ""; +} + +/* line 547, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-angellist:before { + content: ""; +} + +/* line 548, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-cc:before { + content: ""; +} + +/* line 549, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-shekel:before, +.fa-sheqel:before, +.fa-ils:before { + content: ""; +} + +/* line 552, ../../node_modules/font-awesome/scss/_icons.scss */ +.fa-meanpath:before { + content: ""; +} + +/* Transition mixins */ +/* Button Mixins */ +/*! normalize.css v3.0.1 | MIT License | git.io/normalize */ +/* line 9, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_normalize.scss */ +html { + font-family: sans-serif; + -ms-text-size-adjust: 100%; + -webkit-text-size-adjust: 100%; +} + +/* line 19, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_normalize.scss */ +body { + margin: 0; +} + +/* line 32, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_normalize.scss */ +article, +aside, +details, +figcaption, +figure, +footer, +header, +hgroup, +main, +nav, +section, +summary { + display: block; +} + +/* line 52, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_normalize.scss */ +audio, +canvas, +progress, +video { + display: inline-block; + vertical-align: baseline; +} + +/* line 65, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_normalize.scss */ +audio:not([controls]) { + display: none; + height: 0; +} + +/* line 75, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_normalize.scss */ +[hidden], +template { + display: none; +} + +/* line 87, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_normalize.scss */ +a { + background: transparent; +} + +/* line 95, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_normalize.scss */ +a:active, +a:hover { + outline: 0; +} + +/* line 107, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_normalize.scss */ +abbr[title] { + border-bottom: 1px dotted; +} + +/* line 115, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_normalize.scss */ +b, +strong { + font-weight: bold; +} + +/* line 124, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_normalize.scss */ +dfn { + font-style: italic; +} + +/* line 133, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_normalize.scss */ +h1 { + font-size: 2em; + margin: 0.67em 0; +} + +/* line 142, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_normalize.scss */ +mark { + background: #ff0; + color: #000; +} + +/* line 151, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_normalize.scss */ +small { + font-size: 80%; +} + +/* line 159, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_normalize.scss */ +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} + +/* line 167, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_normalize.scss */ +sup { + top: -0.5em; +} + +/* line 171, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_normalize.scss */ +sub { + bottom: -0.25em; +} + +/* line 182, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_normalize.scss */ +img { + border: 0; +} + +/* line 190, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_normalize.scss */ +svg:not(:root) { + overflow: hidden; +} + +/* line 201, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_normalize.scss */ +figure { + margin: 1em 40px; +} + +/* line 209, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_normalize.scss */ +hr { + -moz-box-sizing: content-box; + box-sizing: content-box; + height: 0; +} + +/* line 219, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_normalize.scss */ +pre { + overflow: auto; +} + +/* line 227, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_normalize.scss */ +code, +kbd, +pre, +samp { + font-family: monospace, monospace; + font-size: 1em; +} + +/* line 250, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_normalize.scss */ +button, +input, +optgroup, +select, +textarea { + color: inherit; + font: inherit; + margin: 0; +} + +/* line 264, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_normalize.scss */ +button { + overflow: visible; +} + +/* line 275, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_normalize.scss */ +button, +select { + text-transform: none; +} + +/* line 288, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_normalize.scss */ +button, +html input[type="button"], +input[type="reset"], +input[type="submit"] { + -webkit-appearance: button; + cursor: pointer; +} + +/* line 300, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_normalize.scss */ +button[disabled], +html input[disabled] { + cursor: default; +} + +/* line 309, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_normalize.scss */ +button::-moz-focus-inner, +input::-moz-focus-inner { + border: 0; + padding: 0; +} + +/* line 320, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_normalize.scss */ +input { + line-height: normal; +} + +/* line 332, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_normalize.scss */ +input[type="checkbox"], +input[type="radio"] { + box-sizing: border-box; + padding: 0; +} + +/* line 344, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_normalize.scss */ +input[type="number"]::-webkit-inner-spin-button, +input[type="number"]::-webkit-outer-spin-button { + height: auto; +} + +/* line 355, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_normalize.scss */ +input[type="search"] { + -webkit-appearance: textfield; + -moz-box-sizing: content-box; + -webkit-box-sizing: content-box; + box-sizing: content-box; +} + +/* line 368, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_normalize.scss */ +input[type="search"]::-webkit-search-cancel-button, +input[type="search"]::-webkit-search-decoration { + -webkit-appearance: none; +} + +/* line 377, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_normalize.scss */ +fieldset { + border: 1px solid #c0c0c0; + margin: 0 2px; + padding: 0.35em 0.625em 0.75em; +} + +/* line 388, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_normalize.scss */ +legend { + border: 0; + padding: 0; +} + +/* line 397, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_normalize.scss */ +textarea { + overflow: auto; +} + +/* line 406, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_normalize.scss */ +optgroup { + font-weight: bold; +} + +/* line 417, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_normalize.scss */ +table { + border-collapse: collapse; + border-spacing: 0; +} + +/* line 422, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_normalize.scss */ +td, +th { + padding: 0; +} + +@media print { + /* line 8, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_print.scss */ + * { + text-shadow: none !important; + color: #000 !important; + background: transparent !important; + box-shadow: none !important; + } + + /* line 15, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_print.scss */ + a, + a:visited { + text-decoration: underline; + } + + /* line 20, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_print.scss */ + a[href]:after { + content: " (" attr(href) ")"; + } + + /* line 24, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_print.scss */ + abbr[title]:after { + content: " (" attr(title) ")"; + } + + /* line 29, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_print.scss */ + a[href^="javascript:"]:after, + a[href^="#"]:after { + content: ""; + } + + /* line 34, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_print.scss */ + pre, + blockquote { + border: 1px solid #999; + page-break-inside: avoid; + } + + /* line 40, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_print.scss */ + thead { + display: table-header-group; + } + + /* line 44, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_print.scss */ + tr, + img { + page-break-inside: avoid; + } + + /* line 49, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_print.scss */ + img { + max-width: 100% !important; + } + + /* line 53, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_print.scss */ + p, + h2, + h3 { + orphans: 3; + widows: 3; + } + + /* line 60, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_print.scss */ + h2, + h3 { + page-break-after: avoid; + } + + /* line 67, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_print.scss */ + select { + background: #fff !important; + } + + /* line 72, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_print.scss */ + .navbar { + display: none; + } + + /* line 76, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_print.scss */ + .table td, + .table th { + background-color: #fff !important; + } + + /* line 83, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_print.scss */ + .btn > .caret, + .dropup > .btn > .caret { + border-top-color: #000 !important; + } + + /* line 87, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_print.scss */ + .label { + border: 1px solid #000; + } + + /* line 91, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_print.scss */ + .table { + border-collapse: collapse !important; + } + + /* line 95, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_print.scss */ + .table-bordered th, + .table-bordered td { + border: 1px solid #ddd !important; + } +} +/* line 11, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_scaffolding.scss */ +* { + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; +} + +/* line 14, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_scaffolding.scss */ +*:before, +*:after { + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; +} + +/* line 22, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_scaffolding.scss */ +html { + font-size: 10px; + -webkit-tap-highlight-color: transparent; +} + +/* line 27, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_scaffolding.scss */ +body { + font-family: "Source Sans Pro", "SourceSansPro", sans-serif; + font-size: 16px; + line-height: 1.5; + color: #686868; + background-color: transparent; +} + +/* line 36, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_scaffolding.scss */ +input, +button, +select, +textarea { + font-family: inherit; + font-size: inherit; + line-height: inherit; +} + +/* line 48, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_scaffolding.scss */ +a { + color: #2185c5; + text-decoration: none; +} +/* line 52, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_scaffolding.scss */ +a:hover, a:focus { + color: #1a739e; + text-decoration: underline; +} +/* line 58, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_scaffolding.scss */ +a:focus { + outline: thin dotted; + outline: 5px auto -webkit-focus-ring-color; + outline-offset: -2px; +} + +/* line 69, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_scaffolding.scss */ +figure { + margin: 0; +} + +/* line 76, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_scaffolding.scss */ +img { + vertical-align: middle; +} + +/* line 81, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_scaffolding.scss */ +.img-responsive { + display: block; + width: 100% \9; + max-width: 100%; + height: auto; +} + +/* line 86, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_scaffolding.scss */ +.img-rounded { + border-radius: 6px; +} + +/* line 93, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_scaffolding.scss */ +.img-thumbnail { + padding: 4px; + line-height: 1.5; + background-color: transparent; + border: 1px solid #ddd; + border-radius: 4px; + -webkit-transition: all 0.2s ease-in-out; + -o-transition: all 0.2s ease-in-out; + transition: all 0.2s ease-in-out; + display: inline-block; + width: 100% \9; + max-width: 100%; + height: auto; +} + +/* line 106, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_scaffolding.scss */ +.img-circle { + border-radius: 50%; +} + +/* line 113, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_scaffolding.scss */ +hr { + margin-top: 24px; + margin-bottom: 24px; + border: 0; + border-top: 1px solid #eeeeee; +} + +/* line 125, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_scaffolding.scss */ +.sr-only { + position: absolute; + width: 1px; + height: 1px; + margin: -1px; + padding: 0; + overflow: hidden; + clip: rect(0, 0, 0, 0); + border: 0; +} + +/* line 141, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_scaffolding.scss */ +.sr-only-focusable:active, .sr-only-focusable:focus { + position: static; + width: auto; + height: auto; + margin: 0; + overflow: visible; + clip: auto; +} + +/* line 9, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_type.scss */ +h1, h2, h3, h4, h5, h6, +.h1, +.form-contenteditable input.form-control, .h2, .h3, .h4, .h5, .h6 { + font-weight: 400; + line-height: 1.5; +} +/* line 16, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_type.scss */ +h1 small, +h1 .small, h2 small, +h2 .small, h3 small, +h3 .small, h4 small, +h4 .small, h5 small, +h5 .small, h6 small, +h6 .small, +.h1 small, +.form-contenteditable input.form-control small, +.h1 .small, +.form-contenteditable input.form-control .small, .h2 small, +.h2 .small, .h3 small, +.h3 .small, .h4 small, +.h4 .small, .h5 small, +.h5 .small, .h6 small, +.h6 .small { + font-weight: normal; + line-height: 1; + color: #999999; +} + +/* line 24, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_type.scss */ +h1, .h1, .form-contenteditable input.form-control, +h2, .h2, +h3, .h3 { + margin-top: 24px; + margin-bottom: 12px; +} +/* line 30, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_type.scss */ +h1 small, +h1 .small, .h1 small, .form-contenteditable input.form-control small, +.h1 .small, +.form-contenteditable input.form-control .small, +h2 small, +h2 .small, .h2 small, +.h2 .small, +h3 small, +h3 .small, .h3 small, +.h3 .small { + font-size: 65%; +} + +/* line 35, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_type.scss */ +h4, .h4, +h5, .h5, +h6, .h6 { + margin-top: 12px; + margin-bottom: 12px; +} +/* line 41, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_type.scss */ +h4 small, +h4 .small, .h4 small, +.h4 .small, +h5 small, +h5 .small, .h5 small, +.h5 .small, +h6 small, +h6 .small, .h6 small, +.h6 .small { + font-size: 75%; +} + +/* line 47, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_type.scss */ +h1, .h1, .form-contenteditable input.form-control { + font-size: 31px; +} + +/* line 48, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_type.scss */ +h2, .h2 { + font-size: 25px; +} + +/* line 49, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_type.scss */ +h3, .h3 { + font-size: 20px; +} + +/* line 50, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_type.scss */ +h4, .h4 { + font-size: 18px; +} + +/* line 51, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_type.scss */ +h5, .h5 { + font-size: 16px; +} + +/* line 52, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_type.scss */ +h6, .h6 { + font-size: 13px; +} + +/* line 58, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_type.scss */ +p { + margin: 0 0 12px; +} + +/* line 62, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_type.scss */ +.lead { + margin-bottom: 24px; + font-size: 18px; + font-weight: 300; + line-height: 1.4; +} +@media (min-width: 768px) { + /* line 62, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_type.scss */ + .lead { + font-size: 24px; + } +} + +/* line 78, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_type.scss */ +small, +.small { + font-size: 87%; +} + +/* line 84, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_type.scss */ +cite { + font-style: normal; +} + +/* line 88, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_type.scss */ +mark, +.mark { + background-color: #F9F3C3; + padding: .2em; +} + +/* line 95, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_type.scss */ +.text-left { + text-align: left; +} + +/* line 96, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_type.scss */ +.text-right { + text-align: right; +} + +/* line 97, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_type.scss */ +.text-center { + text-align: center; +} + +/* line 98, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_type.scss */ +.text-justify { + text-align: justify; +} + +/* line 99, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_type.scss */ +.text-nowrap { + white-space: nowrap; +} + +/* line 102, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_type.scss */ +.text-lowercase { + text-transform: lowercase; +} + +/* line 103, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_type.scss */ +.text-uppercase { + text-transform: uppercase; +} + +/* line 104, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_type.scss */ +.text-capitalize { + text-transform: capitalize; +} + +/* line 107, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_type.scss */ +.text-muted { + color: #ecefef !important; +} + +/* line 5, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_text-emphasis.scss */ +.text-primary { + color: #1b92cb; +} + +/* line 8, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_text-emphasis.scss */ +a.text-primary:hover { + color: #15729e; +} + +/* line 5, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_text-emphasis.scss */ +.text-success { + color: #d4d9d9; +} + +/* line 8, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_text-emphasis.scss */ +a.text-success:hover { + color: #b9c1c1; +} + +/* line 5, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_text-emphasis.scss */ +.text-info { + color: #8e8837; +} + +/* line 8, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_text-emphasis.scss */ +a.text-info:hover { + color: #696529; +} + +/* line 5, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_text-emphasis.scss */ +.text-warning { + color: #B59033; +} + +/* line 8, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_text-emphasis.scss */ +a.text-warning:hover { + color: #8d7028; +} + +/* line 5, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_text-emphasis.scss */ +.text-danger { + color: #ff434c; +} + +/* line 8, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_text-emphasis.scss */ +a.text-danger:hover { + color: #ff101b; +} + +/* line 124, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_type.scss */ +.bg-primary { + color: #fff; +} + +/* line 5, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_background-variant.scss */ +.bg-primary { + background-color: #1b92cb; +} + +/* line 8, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_background-variant.scss */ +a.bg-primary:hover { + background-color: #15729e; +} + +/* line 5, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_background-variant.scss */ +.bg-success { + background-color: #686868; +} + +/* line 8, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_background-variant.scss */ +a.bg-success:hover { + background-color: #4e4e4e; +} + +/* line 5, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_background-variant.scss */ +.bg-info { + background-color: #e2df80; +} + +/* line 8, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_background-variant.scss */ +a.bg-info:hover { + background-color: #d9d556; +} + +/* line 5, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_background-variant.scss */ +.bg-warning { + background-color: #F9F3C3; +} + +/* line 8, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_background-variant.scss */ +a.bg-warning:hover { + background-color: #f4ea95; +} + +/* line 5, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_background-variant.scss */ +.bg-danger { + background-color: #febfc1; +} + +/* line 8, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_background-variant.scss */ +a.bg-danger:hover { + background-color: #fd8d90; +} + +/* line 143, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_type.scss */ +.page-header { + padding-bottom: 11px; + margin: 48px 0 24px; + border-bottom: 1px solid #eeeeee; +} + +/* line 154, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_type.scss */ +ul, +ol { + margin-top: 0; + margin-bottom: 12px; +} +/* line 158, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_type.scss */ +ul ul, +ul ol, +ol ul, +ol ol { + margin-bottom: 0; +} + +/* line 167, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_type.scss */ +.list-unstyled, .list-inline, .list-inline-divider, .list-vertical-divider, .list-vertical-divider-2, .list-breadcrumb, .list-steps, .list-cards, .tab-responsive .tab-content { + padding-left: 0; + list-style: none; +} + +/* line 173, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_type.scss */ +.list-inline, .list-inline-divider, .list-vertical-divider, .list-vertical-divider-2, .list-breadcrumb, .list-steps { + margin-left: -5px; +} +/* line 177, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_type.scss */ +.list-inline > li, .list-inline-divider > li, .list-vertical-divider > li, .list-vertical-divider-2 > li, .list-breadcrumb > li, .list-steps > li { + display: inline-block; + padding-left: 5px; + padding-right: 5px; +} + +/* line 185, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_type.scss */ +dl { + margin-top: 0; + margin-bottom: 24px; +} + +/* line 189, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_type.scss */ +dt, +dd { + line-height: 1.5; +} + +/* line 193, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_type.scss */ +dt { + font-weight: bold; +} + +/* line 196, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_type.scss */ +dd { + margin-left: 0; +} + +/* line 14, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_clearfix.scss */ +.dl-horizontal dd:before, .dl-horizontal dd:after { + content: " "; + display: table; +} +/* line 19, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_clearfix.scss */ +.dl-horizontal dd:after { + clear: both; +} +@media (min-width: 768px) { + /* line 211, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_type.scss */ + .dl-horizontal dt { + float: left; + width: 160px; + clear: left; + text-align: right; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } + /* line 218, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_type.scss */ + .dl-horizontal dd { + margin-left: 180px; + } +} + +/* line 229, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_type.scss */ +abbr[title], +abbr[data-original-title] { + cursor: help; + border-bottom: 1px dotted #999999; +} + +/* line 235, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_type.scss */ +.initialism { + font-size: 90%; + text-transform: uppercase; +} + +/* line 241, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_type.scss */ +blockquote { + padding: 12px 24px; + margin: 0 0 24px; + font-size: 20px; + border-left: 5px solid #eeeeee; +} +/* line 250, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_type.scss */ +blockquote p:last-child, +blockquote ul:last-child, +blockquote ol:last-child { + margin-bottom: 0; +} +/* line 257, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_type.scss */ +blockquote footer, +blockquote small, +blockquote .small { + display: block; + font-size: 80%; + line-height: 1.5; + color: #999999; +} +/* line 265, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_type.scss */ +blockquote footer:before, +blockquote small:before, +blockquote .small:before { + content: '\2014 \00A0'; +} + +/* line 274, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_type.scss */ +.blockquote-reverse, +blockquote.pull-right { + padding-right: 15px; + padding-left: 0; + border-right: 5px solid #eeeeee; + border-left: 0; + text-align: right; +} +/* line 286, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_type.scss */ +.blockquote-reverse footer:before, +.blockquote-reverse small:before, +.blockquote-reverse .small:before, +blockquote.pull-right footer:before, +blockquote.pull-right small:before, +blockquote.pull-right .small:before { + content: ''; +} +/* line 287, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_type.scss */ +.blockquote-reverse footer:after, +.blockquote-reverse small:after, +.blockquote-reverse .small:after, +blockquote.pull-right footer:after, +blockquote.pull-right small:after, +blockquote.pull-right .small:after { + content: '\00A0 \2014'; +} + +/* line 294, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_type.scss */ +blockquote:before, +blockquote:after { + content: ""; +} + +/* line 300, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_type.scss */ +address { + margin-bottom: 24px; + font-style: normal; + line-height: 1.5; +} + +/* line 7, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_code.scss */ +code, +kbd, +pre, +samp { + font-family: Menlo, Consolas, "Courier New", monospace; +} + +/* line 15, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_code.scss */ +code { + padding: 2px 4px; + font-size: 90%; + background-color: #F8F8F8; + border-radius: 4px; +} + +/* line 24, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_code.scss */ +kbd { + padding: 2px 4px; + font-size: 90%; + color: #fff; + background-color: #333; + border-radius: 3px; + box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.25); +} +/* line 32, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_code.scss */ +kbd kbd { + padding: 0; + font-size: 100%; + box-shadow: none; +} + +/* line 40, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_code.scss */ +pre { + display: block; + padding: 11.5px; + margin: 0 0 12px; + font-size: 15px; + line-height: 1.5; + word-break: break-all; + word-wrap: break-word; + color: #333333; + background-color: #f5f5f5; + border: 1px solid #ccc; + border-radius: 4px; +} +/* line 54, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_code.scss */ +pre code { + padding: 0; + font-size: inherit; + color: inherit; + white-space: pre-wrap; + background-color: transparent; + border-radius: 0; +} + +/* line 65, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_code.scss */ +.pre-scrollable { + max-height: 340px; + overflow-y: scroll; +} + +/* line 10, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_grid.scss */ +.container { + margin-right: auto; + margin-left: auto; + padding-left: 10px; + padding-right: 10px; +} +/* line 14, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_clearfix.scss */ +.container:before, .container:after { + content: " "; + display: table; +} +/* line 19, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_clearfix.scss */ +.container:after { + clear: both; +} +@media (min-width: 768px) { + /* line 10, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_grid.scss */ + .container { + width: 740px; + } +} +@media (min-width: 992px) { + /* line 10, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_grid.scss */ + .container { + width: 960px; + } +} +@media (min-width: 1200px) { + /* line 10, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_grid.scss */ + .container { + width: 1160px; + } +} + +/* line 30, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_grid.scss */ +.container-fluid { + margin-right: auto; + margin-left: auto; + padding-left: 10px; + padding-right: 10px; +} +/* line 14, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_clearfix.scss */ +.container-fluid:before, .container-fluid:after { + content: " "; + display: table; +} +/* line 19, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_clearfix.scss */ +.container-fluid:after { + clear: both; +} + +/* line 39, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_grid.scss */ +.row { + margin-left: -10px; + margin-right: -10px; +} +/* line 14, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_clearfix.scss */ +.row:before, .row:after { + content: " "; + display: table; +} +/* line 19, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_clearfix.scss */ +.row:after { + clear: both; +} + +/* line 11, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ +.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12, .col-xs-13, .col-sm-13, .col-md-13, .col-lg-13, .col-xs-14, .col-sm-14, .col-md-14, .col-lg-14, .col-xs-15, .col-sm-15, .col-md-15, .col-lg-15, .col-xs-16, .col-sm-16, .col-md-16, .col-lg-16, .col-xs-17, .col-sm-17, .col-md-17, .col-lg-17, .col-xs-18, .col-sm-18, .col-md-18, .col-lg-18, .col-xs-19, .col-sm-19, .col-md-19, .col-lg-19, .col-xs-20, .col-sm-20, .col-md-20, .col-lg-20, .col-xs-21, .col-sm-21, .col-md-21, .col-lg-21, .col-xs-22, .col-sm-22, .col-md-22, .col-lg-22, .col-xs-23, .col-sm-23, .col-md-23, .col-lg-23, .col-xs-24, .col-sm-24, .col-md-24, .col-lg-24 { + position: relative; + min-height: 1px; + padding-left: 10px; + padding-right: 10px; +} + +/* line 27, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ +.col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-13, .col-xs-14, .col-xs-15, .col-xs-16, .col-xs-17, .col-xs-18, .col-xs-19, .col-xs-20, .col-xs-21, .col-xs-22, .col-xs-23, .col-xs-24 { + float: left; +} + +/* line 35, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ +.col-xs-1 { + width: 4.16667%; +} + +/* line 35, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ +.col-xs-2 { + width: 8.33333%; +} + +/* line 35, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ +.col-xs-3 { + width: 12.5%; +} + +/* line 35, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ +.col-xs-4 { + width: 16.66667%; +} + +/* line 35, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ +.col-xs-5 { + width: 20.83333%; +} + +/* line 35, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ +.col-xs-6 { + width: 25%; +} + +/* line 35, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ +.col-xs-7 { + width: 29.16667%; +} + +/* line 35, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ +.col-xs-8 { + width: 33.33333%; +} + +/* line 35, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ +.col-xs-9 { + width: 37.5%; +} + +/* line 35, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ +.col-xs-10 { + width: 41.66667%; +} + +/* line 35, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ +.col-xs-11 { + width: 45.83333%; +} + +/* line 35, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ +.col-xs-12 { + width: 50%; +} + +/* line 35, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ +.col-xs-13 { + width: 54.16667%; +} + +/* line 35, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ +.col-xs-14 { + width: 58.33333%; +} + +/* line 35, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ +.col-xs-15 { + width: 62.5%; +} + +/* line 35, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ +.col-xs-16 { + width: 66.66667%; +} + +/* line 35, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ +.col-xs-17 { + width: 70.83333%; +} + +/* line 35, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ +.col-xs-18 { + width: 75%; +} + +/* line 35, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ +.col-xs-19 { + width: 79.16667%; +} + +/* line 35, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ +.col-xs-20 { + width: 83.33333%; +} + +/* line 35, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ +.col-xs-21 { + width: 87.5%; +} + +/* line 35, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ +.col-xs-22 { + width: 91.66667%; +} + +/* line 35, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ +.col-xs-23 { + width: 95.83333%; +} + +/* line 35, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ +.col-xs-24 { + width: 100%; +} + +/* line 55, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ +.col-xs-pull-0 { + right: auto; +} + +/* line 50, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ +.col-xs-pull-1 { + right: 4.16667%; +} + +/* line 50, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ +.col-xs-pull-2 { + right: 8.33333%; +} + +/* line 50, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ +.col-xs-pull-3 { + right: 12.5%; +} + +/* line 50, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ +.col-xs-pull-4 { + right: 16.66667%; +} + +/* line 50, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ +.col-xs-pull-5 { + right: 20.83333%; +} + +/* line 50, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ +.col-xs-pull-6 { + right: 25%; +} + +/* line 50, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ +.col-xs-pull-7 { + right: 29.16667%; +} + +/* line 50, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ +.col-xs-pull-8 { + right: 33.33333%; +} + +/* line 50, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ +.col-xs-pull-9 { + right: 37.5%; +} + +/* line 50, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ +.col-xs-pull-10 { + right: 41.66667%; +} + +/* line 50, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ +.col-xs-pull-11 { + right: 45.83333%; +} + +/* line 50, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ +.col-xs-pull-12 { + right: 50%; +} + +/* line 50, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ +.col-xs-pull-13 { + right: 54.16667%; +} + +/* line 50, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ +.col-xs-pull-14 { + right: 58.33333%; +} + +/* line 50, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ +.col-xs-pull-15 { + right: 62.5%; +} + +/* line 50, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ +.col-xs-pull-16 { + right: 66.66667%; +} + +/* line 50, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ +.col-xs-pull-17 { + right: 70.83333%; +} + +/* line 50, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ +.col-xs-pull-18 { + right: 75%; +} + +/* line 50, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ +.col-xs-pull-19 { + right: 79.16667%; +} + +/* line 50, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ +.col-xs-pull-20 { + right: 83.33333%; +} + +/* line 50, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ +.col-xs-pull-21 { + right: 87.5%; +} + +/* line 50, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ +.col-xs-pull-22 { + right: 91.66667%; +} + +/* line 50, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ +.col-xs-pull-23 { + right: 95.83333%; +} + +/* line 50, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ +.col-xs-pull-24 { + right: 100%; +} + +/* line 45, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ +.col-xs-push-0 { + left: auto; +} + +/* line 40, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ +.col-xs-push-1 { + left: 4.16667%; +} + +/* line 40, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ +.col-xs-push-2 { + left: 8.33333%; +} + +/* line 40, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ +.col-xs-push-3 { + left: 12.5%; +} + +/* line 40, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ +.col-xs-push-4 { + left: 16.66667%; +} + +/* line 40, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ +.col-xs-push-5 { + left: 20.83333%; +} + +/* line 40, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ +.col-xs-push-6 { + left: 25%; +} + +/* line 40, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ +.col-xs-push-7 { + left: 29.16667%; +} + +/* line 40, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ +.col-xs-push-8 { + left: 33.33333%; +} + +/* line 40, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ +.col-xs-push-9 { + left: 37.5%; +} + +/* line 40, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ +.col-xs-push-10 { + left: 41.66667%; +} + +/* line 40, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ +.col-xs-push-11 { + left: 45.83333%; +} + +/* line 40, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ +.col-xs-push-12 { + left: 50%; +} + +/* line 40, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ +.col-xs-push-13 { + left: 54.16667%; +} + +/* line 40, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ +.col-xs-push-14 { + left: 58.33333%; +} + +/* line 40, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ +.col-xs-push-15 { + left: 62.5%; +} + +/* line 40, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ +.col-xs-push-16 { + left: 66.66667%; +} + +/* line 40, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ +.col-xs-push-17 { + left: 70.83333%; +} + +/* line 40, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ +.col-xs-push-18 { + left: 75%; +} + +/* line 40, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ +.col-xs-push-19 { + left: 79.16667%; +} + +/* line 40, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ +.col-xs-push-20 { + left: 83.33333%; +} + +/* line 40, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ +.col-xs-push-21 { + left: 87.5%; +} + +/* line 40, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ +.col-xs-push-22 { + left: 91.66667%; +} + +/* line 40, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ +.col-xs-push-23 { + left: 95.83333%; +} + +/* line 40, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ +.col-xs-push-24 { + left: 100%; +} + +/* line 60, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ +.col-xs-offset-0 { + margin-left: 0%; +} + +/* line 60, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ +.col-xs-offset-1 { + margin-left: 4.16667%; +} + +/* line 60, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ +.col-xs-offset-2 { + margin-left: 8.33333%; +} + +/* line 60, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ +.col-xs-offset-3 { + margin-left: 12.5%; +} + +/* line 60, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ +.col-xs-offset-4 { + margin-left: 16.66667%; +} + +/* line 60, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ +.col-xs-offset-5 { + margin-left: 20.83333%; +} + +/* line 60, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ +.col-xs-offset-6 { + margin-left: 25%; +} + +/* line 60, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ +.col-xs-offset-7 { + margin-left: 29.16667%; +} + +/* line 60, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ +.col-xs-offset-8 { + margin-left: 33.33333%; +} + +/* line 60, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ +.col-xs-offset-9 { + margin-left: 37.5%; +} + +/* line 60, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ +.col-xs-offset-10 { + margin-left: 41.66667%; +} + +/* line 60, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ +.col-xs-offset-11 { + margin-left: 45.83333%; +} + +/* line 60, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ +.col-xs-offset-12 { + margin-left: 50%; +} + +/* line 60, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ +.col-xs-offset-13 { + margin-left: 54.16667%; +} + +/* line 60, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ +.col-xs-offset-14 { + margin-left: 58.33333%; +} + +/* line 60, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ +.col-xs-offset-15 { + margin-left: 62.5%; +} + +/* line 60, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ +.col-xs-offset-16 { + margin-left: 66.66667%; +} + +/* line 60, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ +.col-xs-offset-17 { + margin-left: 70.83333%; +} + +/* line 60, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ +.col-xs-offset-18 { + margin-left: 75%; +} + +/* line 60, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ +.col-xs-offset-19 { + margin-left: 79.16667%; +} + +/* line 60, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ +.col-xs-offset-20 { + margin-left: 83.33333%; +} + +/* line 60, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ +.col-xs-offset-21 { + margin-left: 87.5%; +} + +/* line 60, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ +.col-xs-offset-22 { + margin-left: 91.66667%; +} + +/* line 60, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ +.col-xs-offset-23 { + margin-left: 95.83333%; +} + +/* line 60, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ +.col-xs-offset-24 { + margin-left: 100%; +} + +@media (min-width: 768px) { + /* line 27, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-13, .col-sm-14, .col-sm-15, .col-sm-16, .col-sm-17, .col-sm-18, .col-sm-19, .col-sm-20, .col-sm-21, .col-sm-22, .col-sm-23, .col-sm-24 { + float: left; + } + + /* line 35, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-sm-1 { + width: 4.16667%; + } + + /* line 35, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-sm-2 { + width: 8.33333%; + } + + /* line 35, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-sm-3 { + width: 12.5%; + } + + /* line 35, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-sm-4 { + width: 16.66667%; + } + + /* line 35, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-sm-5 { + width: 20.83333%; + } + + /* line 35, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-sm-6 { + width: 25%; + } + + /* line 35, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-sm-7 { + width: 29.16667%; + } + + /* line 35, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-sm-8 { + width: 33.33333%; + } + + /* line 35, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-sm-9 { + width: 37.5%; + } + + /* line 35, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-sm-10 { + width: 41.66667%; + } + + /* line 35, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-sm-11 { + width: 45.83333%; + } + + /* line 35, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-sm-12 { + width: 50%; + } + + /* line 35, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-sm-13 { + width: 54.16667%; + } + + /* line 35, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-sm-14 { + width: 58.33333%; + } + + /* line 35, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-sm-15 { + width: 62.5%; + } + + /* line 35, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-sm-16 { + width: 66.66667%; + } + + /* line 35, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-sm-17 { + width: 70.83333%; + } + + /* line 35, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-sm-18 { + width: 75%; + } + + /* line 35, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-sm-19 { + width: 79.16667%; + } + + /* line 35, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-sm-20 { + width: 83.33333%; + } + + /* line 35, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-sm-21 { + width: 87.5%; + } + + /* line 35, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-sm-22 { + width: 91.66667%; + } + + /* line 35, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-sm-23 { + width: 95.83333%; + } + + /* line 35, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-sm-24 { + width: 100%; + } + + /* line 55, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-sm-pull-0 { + right: auto; + } + + /* line 50, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-sm-pull-1 { + right: 4.16667%; + } + + /* line 50, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-sm-pull-2 { + right: 8.33333%; + } + + /* line 50, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-sm-pull-3 { + right: 12.5%; + } + + /* line 50, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-sm-pull-4 { + right: 16.66667%; + } + + /* line 50, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-sm-pull-5 { + right: 20.83333%; + } + + /* line 50, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-sm-pull-6 { + right: 25%; + } + + /* line 50, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-sm-pull-7 { + right: 29.16667%; + } + + /* line 50, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-sm-pull-8 { + right: 33.33333%; + } + + /* line 50, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-sm-pull-9 { + right: 37.5%; + } + + /* line 50, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-sm-pull-10 { + right: 41.66667%; + } + + /* line 50, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-sm-pull-11 { + right: 45.83333%; + } + + /* line 50, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-sm-pull-12 { + right: 50%; + } + + /* line 50, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-sm-pull-13 { + right: 54.16667%; + } + + /* line 50, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-sm-pull-14 { + right: 58.33333%; + } + + /* line 50, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-sm-pull-15 { + right: 62.5%; + } + + /* line 50, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-sm-pull-16 { + right: 66.66667%; + } + + /* line 50, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-sm-pull-17 { + right: 70.83333%; + } + + /* line 50, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-sm-pull-18 { + right: 75%; + } + + /* line 50, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-sm-pull-19 { + right: 79.16667%; + } + + /* line 50, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-sm-pull-20 { + right: 83.33333%; + } + + /* line 50, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-sm-pull-21 { + right: 87.5%; + } + + /* line 50, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-sm-pull-22 { + right: 91.66667%; + } + + /* line 50, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-sm-pull-23 { + right: 95.83333%; + } + + /* line 50, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-sm-pull-24 { + right: 100%; + } + + /* line 45, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-sm-push-0 { + left: auto; + } + + /* line 40, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-sm-push-1 { + left: 4.16667%; + } + + /* line 40, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-sm-push-2 { + left: 8.33333%; + } + + /* line 40, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-sm-push-3 { + left: 12.5%; + } + + /* line 40, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-sm-push-4 { + left: 16.66667%; + } + + /* line 40, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-sm-push-5 { + left: 20.83333%; + } + + /* line 40, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-sm-push-6 { + left: 25%; + } + + /* line 40, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-sm-push-7 { + left: 29.16667%; + } + + /* line 40, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-sm-push-8 { + left: 33.33333%; + } + + /* line 40, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-sm-push-9 { + left: 37.5%; + } + + /* line 40, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-sm-push-10 { + left: 41.66667%; + } + + /* line 40, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-sm-push-11 { + left: 45.83333%; + } + + /* line 40, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-sm-push-12 { + left: 50%; + } + + /* line 40, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-sm-push-13 { + left: 54.16667%; + } + + /* line 40, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-sm-push-14 { + left: 58.33333%; + } + + /* line 40, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-sm-push-15 { + left: 62.5%; + } + + /* line 40, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-sm-push-16 { + left: 66.66667%; + } + + /* line 40, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-sm-push-17 { + left: 70.83333%; + } + + /* line 40, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-sm-push-18 { + left: 75%; + } + + /* line 40, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-sm-push-19 { + left: 79.16667%; + } + + /* line 40, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-sm-push-20 { + left: 83.33333%; + } + + /* line 40, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-sm-push-21 { + left: 87.5%; + } + + /* line 40, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-sm-push-22 { + left: 91.66667%; + } + + /* line 40, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-sm-push-23 { + left: 95.83333%; + } + + /* line 40, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-sm-push-24 { + left: 100%; + } + + /* line 60, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-sm-offset-0 { + margin-left: 0%; + } + + /* line 60, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-sm-offset-1 { + margin-left: 4.16667%; + } + + /* line 60, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-sm-offset-2 { + margin-left: 8.33333%; + } + + /* line 60, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-sm-offset-3 { + margin-left: 12.5%; + } + + /* line 60, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-sm-offset-4 { + margin-left: 16.66667%; + } + + /* line 60, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-sm-offset-5 { + margin-left: 20.83333%; + } + + /* line 60, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-sm-offset-6 { + margin-left: 25%; + } + + /* line 60, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-sm-offset-7 { + margin-left: 29.16667%; + } + + /* line 60, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-sm-offset-8 { + margin-left: 33.33333%; + } + + /* line 60, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-sm-offset-9 { + margin-left: 37.5%; + } + + /* line 60, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-sm-offset-10 { + margin-left: 41.66667%; + } + + /* line 60, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-sm-offset-11 { + margin-left: 45.83333%; + } + + /* line 60, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-sm-offset-12 { + margin-left: 50%; + } + + /* line 60, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-sm-offset-13 { + margin-left: 54.16667%; + } + + /* line 60, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-sm-offset-14 { + margin-left: 58.33333%; + } + + /* line 60, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-sm-offset-15 { + margin-left: 62.5%; + } + + /* line 60, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-sm-offset-16 { + margin-left: 66.66667%; + } + + /* line 60, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-sm-offset-17 { + margin-left: 70.83333%; + } + + /* line 60, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-sm-offset-18 { + margin-left: 75%; + } + + /* line 60, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-sm-offset-19 { + margin-left: 79.16667%; + } + + /* line 60, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-sm-offset-20 { + margin-left: 83.33333%; + } + + /* line 60, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-sm-offset-21 { + margin-left: 87.5%; + } + + /* line 60, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-sm-offset-22 { + margin-left: 91.66667%; + } + + /* line 60, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-sm-offset-23 { + margin-left: 95.83333%; + } + + /* line 60, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-sm-offset-24 { + margin-left: 100%; + } +} +@media (min-width: 992px) { + /* line 27, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-md-13, .col-md-14, .col-md-15, .col-md-16, .col-md-17, .col-md-18, .col-md-19, .col-md-20, .col-md-21, .col-md-22, .col-md-23, .col-md-24 { + float: left; + } + + /* line 35, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-md-1 { + width: 4.16667%; + } + + /* line 35, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-md-2 { + width: 8.33333%; + } + + /* line 35, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-md-3 { + width: 12.5%; + } + + /* line 35, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-md-4 { + width: 16.66667%; + } + + /* line 35, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-md-5 { + width: 20.83333%; + } + + /* line 35, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-md-6 { + width: 25%; + } + + /* line 35, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-md-7 { + width: 29.16667%; + } + + /* line 35, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-md-8 { + width: 33.33333%; + } + + /* line 35, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-md-9 { + width: 37.5%; + } + + /* line 35, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-md-10 { + width: 41.66667%; + } + + /* line 35, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-md-11 { + width: 45.83333%; + } + + /* line 35, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-md-12 { + width: 50%; + } + + /* line 35, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-md-13 { + width: 54.16667%; + } + + /* line 35, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-md-14 { + width: 58.33333%; + } + + /* line 35, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-md-15 { + width: 62.5%; + } + + /* line 35, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-md-16 { + width: 66.66667%; + } + + /* line 35, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-md-17 { + width: 70.83333%; + } + + /* line 35, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-md-18 { + width: 75%; + } + + /* line 35, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-md-19 { + width: 79.16667%; + } + + /* line 35, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-md-20 { + width: 83.33333%; + } + + /* line 35, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-md-21 { + width: 87.5%; + } + + /* line 35, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-md-22 { + width: 91.66667%; + } + + /* line 35, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-md-23 { + width: 95.83333%; + } + + /* line 35, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-md-24 { + width: 100%; + } + + /* line 55, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-md-pull-0 { + right: auto; + } + + /* line 50, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-md-pull-1 { + right: 4.16667%; + } + + /* line 50, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-md-pull-2 { + right: 8.33333%; + } + + /* line 50, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-md-pull-3 { + right: 12.5%; + } + + /* line 50, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-md-pull-4 { + right: 16.66667%; + } + + /* line 50, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-md-pull-5 { + right: 20.83333%; + } + + /* line 50, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-md-pull-6 { + right: 25%; + } + + /* line 50, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-md-pull-7 { + right: 29.16667%; + } + + /* line 50, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-md-pull-8 { + right: 33.33333%; + } + + /* line 50, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-md-pull-9 { + right: 37.5%; + } + + /* line 50, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-md-pull-10 { + right: 41.66667%; + } + + /* line 50, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-md-pull-11 { + right: 45.83333%; + } + + /* line 50, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-md-pull-12 { + right: 50%; + } + + /* line 50, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-md-pull-13 { + right: 54.16667%; + } + + /* line 50, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-md-pull-14 { + right: 58.33333%; + } + + /* line 50, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-md-pull-15 { + right: 62.5%; + } + + /* line 50, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-md-pull-16 { + right: 66.66667%; + } + + /* line 50, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-md-pull-17 { + right: 70.83333%; + } + + /* line 50, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-md-pull-18 { + right: 75%; + } + + /* line 50, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-md-pull-19 { + right: 79.16667%; + } + + /* line 50, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-md-pull-20 { + right: 83.33333%; + } + + /* line 50, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-md-pull-21 { + right: 87.5%; + } + + /* line 50, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-md-pull-22 { + right: 91.66667%; + } + + /* line 50, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-md-pull-23 { + right: 95.83333%; + } + + /* line 50, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-md-pull-24 { + right: 100%; + } + + /* line 45, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-md-push-0 { + left: auto; + } + + /* line 40, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-md-push-1 { + left: 4.16667%; + } + + /* line 40, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-md-push-2 { + left: 8.33333%; + } + + /* line 40, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-md-push-3 { + left: 12.5%; + } + + /* line 40, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-md-push-4 { + left: 16.66667%; + } + + /* line 40, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-md-push-5 { + left: 20.83333%; + } + + /* line 40, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-md-push-6 { + left: 25%; + } + + /* line 40, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-md-push-7 { + left: 29.16667%; + } + + /* line 40, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-md-push-8 { + left: 33.33333%; + } + + /* line 40, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-md-push-9 { + left: 37.5%; + } + + /* line 40, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-md-push-10 { + left: 41.66667%; + } + + /* line 40, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-md-push-11 { + left: 45.83333%; + } + + /* line 40, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-md-push-12 { + left: 50%; + } + + /* line 40, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-md-push-13 { + left: 54.16667%; + } + + /* line 40, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-md-push-14 { + left: 58.33333%; + } + + /* line 40, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-md-push-15 { + left: 62.5%; + } + + /* line 40, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-md-push-16 { + left: 66.66667%; + } + + /* line 40, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-md-push-17 { + left: 70.83333%; + } + + /* line 40, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-md-push-18 { + left: 75%; + } + + /* line 40, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-md-push-19 { + left: 79.16667%; + } + + /* line 40, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-md-push-20 { + left: 83.33333%; + } + + /* line 40, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-md-push-21 { + left: 87.5%; + } + + /* line 40, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-md-push-22 { + left: 91.66667%; + } + + /* line 40, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-md-push-23 { + left: 95.83333%; + } + + /* line 40, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-md-push-24 { + left: 100%; + } + + /* line 60, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-md-offset-0 { + margin-left: 0%; + } + + /* line 60, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-md-offset-1 { + margin-left: 4.16667%; + } + + /* line 60, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-md-offset-2 { + margin-left: 8.33333%; + } + + /* line 60, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-md-offset-3 { + margin-left: 12.5%; + } + + /* line 60, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-md-offset-4 { + margin-left: 16.66667%; + } + + /* line 60, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-md-offset-5 { + margin-left: 20.83333%; + } + + /* line 60, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-md-offset-6 { + margin-left: 25%; + } + + /* line 60, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-md-offset-7 { + margin-left: 29.16667%; + } + + /* line 60, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-md-offset-8 { + margin-left: 33.33333%; + } + + /* line 60, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-md-offset-9 { + margin-left: 37.5%; + } + + /* line 60, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-md-offset-10 { + margin-left: 41.66667%; + } + + /* line 60, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-md-offset-11 { + margin-left: 45.83333%; + } + + /* line 60, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-md-offset-12 { + margin-left: 50%; + } + + /* line 60, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-md-offset-13 { + margin-left: 54.16667%; + } + + /* line 60, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-md-offset-14 { + margin-left: 58.33333%; + } + + /* line 60, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-md-offset-15 { + margin-left: 62.5%; + } + + /* line 60, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-md-offset-16 { + margin-left: 66.66667%; + } + + /* line 60, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-md-offset-17 { + margin-left: 70.83333%; + } + + /* line 60, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-md-offset-18 { + margin-left: 75%; + } + + /* line 60, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-md-offset-19 { + margin-left: 79.16667%; + } + + /* line 60, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-md-offset-20 { + margin-left: 83.33333%; + } + + /* line 60, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-md-offset-21 { + margin-left: 87.5%; + } + + /* line 60, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-md-offset-22 { + margin-left: 91.66667%; + } + + /* line 60, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-md-offset-23 { + margin-left: 95.83333%; + } + + /* line 60, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-md-offset-24 { + margin-left: 100%; + } +} +@media (min-width: 1200px) { + /* line 27, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-13, .col-lg-14, .col-lg-15, .col-lg-16, .col-lg-17, .col-lg-18, .col-lg-19, .col-lg-20, .col-lg-21, .col-lg-22, .col-lg-23, .col-lg-24 { + float: left; + } + + /* line 35, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-lg-1 { + width: 4.16667%; + } + + /* line 35, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-lg-2 { + width: 8.33333%; + } + + /* line 35, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-lg-3 { + width: 12.5%; + } + + /* line 35, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-lg-4 { + width: 16.66667%; + } + + /* line 35, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-lg-5 { + width: 20.83333%; + } + + /* line 35, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-lg-6 { + width: 25%; + } + + /* line 35, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-lg-7 { + width: 29.16667%; + } + + /* line 35, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-lg-8 { + width: 33.33333%; + } + + /* line 35, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-lg-9 { + width: 37.5%; + } + + /* line 35, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-lg-10 { + width: 41.66667%; + } + + /* line 35, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-lg-11 { + width: 45.83333%; + } + + /* line 35, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-lg-12 { + width: 50%; + } + + /* line 35, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-lg-13 { + width: 54.16667%; + } + + /* line 35, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-lg-14 { + width: 58.33333%; + } + + /* line 35, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-lg-15 { + width: 62.5%; + } + + /* line 35, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-lg-16 { + width: 66.66667%; + } + + /* line 35, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-lg-17 { + width: 70.83333%; + } + + /* line 35, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-lg-18 { + width: 75%; + } + + /* line 35, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-lg-19 { + width: 79.16667%; + } + + /* line 35, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-lg-20 { + width: 83.33333%; + } + + /* line 35, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-lg-21 { + width: 87.5%; + } + + /* line 35, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-lg-22 { + width: 91.66667%; + } + + /* line 35, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-lg-23 { + width: 95.83333%; + } + + /* line 35, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-lg-24 { + width: 100%; + } + + /* line 55, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-lg-pull-0 { + right: auto; + } + + /* line 50, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-lg-pull-1 { + right: 4.16667%; + } + + /* line 50, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-lg-pull-2 { + right: 8.33333%; + } + + /* line 50, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-lg-pull-3 { + right: 12.5%; + } + + /* line 50, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-lg-pull-4 { + right: 16.66667%; + } + + /* line 50, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-lg-pull-5 { + right: 20.83333%; + } + + /* line 50, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-lg-pull-6 { + right: 25%; + } + + /* line 50, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-lg-pull-7 { + right: 29.16667%; + } + + /* line 50, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-lg-pull-8 { + right: 33.33333%; + } + + /* line 50, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-lg-pull-9 { + right: 37.5%; + } + + /* line 50, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-lg-pull-10 { + right: 41.66667%; + } + + /* line 50, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-lg-pull-11 { + right: 45.83333%; + } + + /* line 50, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-lg-pull-12 { + right: 50%; + } + + /* line 50, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-lg-pull-13 { + right: 54.16667%; + } + + /* line 50, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-lg-pull-14 { + right: 58.33333%; + } + + /* line 50, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-lg-pull-15 { + right: 62.5%; + } + + /* line 50, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-lg-pull-16 { + right: 66.66667%; + } + + /* line 50, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-lg-pull-17 { + right: 70.83333%; + } + + /* line 50, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-lg-pull-18 { + right: 75%; + } + + /* line 50, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-lg-pull-19 { + right: 79.16667%; + } + + /* line 50, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-lg-pull-20 { + right: 83.33333%; + } + + /* line 50, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-lg-pull-21 { + right: 87.5%; + } + + /* line 50, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-lg-pull-22 { + right: 91.66667%; + } + + /* line 50, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-lg-pull-23 { + right: 95.83333%; + } + + /* line 50, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-lg-pull-24 { + right: 100%; + } + + /* line 45, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-lg-push-0 { + left: auto; + } + + /* line 40, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-lg-push-1 { + left: 4.16667%; + } + + /* line 40, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-lg-push-2 { + left: 8.33333%; + } + + /* line 40, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-lg-push-3 { + left: 12.5%; + } + + /* line 40, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-lg-push-4 { + left: 16.66667%; + } + + /* line 40, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-lg-push-5 { + left: 20.83333%; + } + + /* line 40, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-lg-push-6 { + left: 25%; + } + + /* line 40, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-lg-push-7 { + left: 29.16667%; + } + + /* line 40, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-lg-push-8 { + left: 33.33333%; + } + + /* line 40, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-lg-push-9 { + left: 37.5%; + } + + /* line 40, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-lg-push-10 { + left: 41.66667%; + } + + /* line 40, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-lg-push-11 { + left: 45.83333%; + } + + /* line 40, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-lg-push-12 { + left: 50%; + } + + /* line 40, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-lg-push-13 { + left: 54.16667%; + } + + /* line 40, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-lg-push-14 { + left: 58.33333%; + } + + /* line 40, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-lg-push-15 { + left: 62.5%; + } + + /* line 40, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-lg-push-16 { + left: 66.66667%; + } + + /* line 40, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-lg-push-17 { + left: 70.83333%; + } + + /* line 40, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-lg-push-18 { + left: 75%; + } + + /* line 40, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-lg-push-19 { + left: 79.16667%; + } + + /* line 40, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-lg-push-20 { + left: 83.33333%; + } + + /* line 40, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-lg-push-21 { + left: 87.5%; + } + + /* line 40, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-lg-push-22 { + left: 91.66667%; + } + + /* line 40, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-lg-push-23 { + left: 95.83333%; + } + + /* line 40, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-lg-push-24 { + left: 100%; + } + + /* line 60, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-lg-offset-0 { + margin-left: 0%; + } + + /* line 60, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-lg-offset-1 { + margin-left: 4.16667%; + } + + /* line 60, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-lg-offset-2 { + margin-left: 8.33333%; + } + + /* line 60, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-lg-offset-3 { + margin-left: 12.5%; + } + + /* line 60, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-lg-offset-4 { + margin-left: 16.66667%; + } + + /* line 60, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-lg-offset-5 { + margin-left: 20.83333%; + } + + /* line 60, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-lg-offset-6 { + margin-left: 25%; + } + + /* line 60, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-lg-offset-7 { + margin-left: 29.16667%; + } + + /* line 60, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-lg-offset-8 { + margin-left: 33.33333%; + } + + /* line 60, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-lg-offset-9 { + margin-left: 37.5%; + } + + /* line 60, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-lg-offset-10 { + margin-left: 41.66667%; + } + + /* line 60, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-lg-offset-11 { + margin-left: 45.83333%; + } + + /* line 60, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-lg-offset-12 { + margin-left: 50%; + } + + /* line 60, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-lg-offset-13 { + margin-left: 54.16667%; + } + + /* line 60, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-lg-offset-14 { + margin-left: 58.33333%; + } + + /* line 60, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-lg-offset-15 { + margin-left: 62.5%; + } + + /* line 60, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-lg-offset-16 { + margin-left: 66.66667%; + } + + /* line 60, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-lg-offset-17 { + margin-left: 70.83333%; + } + + /* line 60, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-lg-offset-18 { + margin-left: 75%; + } + + /* line 60, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-lg-offset-19 { + margin-left: 79.16667%; + } + + /* line 60, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-lg-offset-20 { + margin-left: 83.33333%; + } + + /* line 60, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-lg-offset-21 { + margin-left: 87.5%; + } + + /* line 60, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-lg-offset-22 { + margin-left: 91.66667%; + } + + /* line 60, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-lg-offset-23 { + margin-left: 95.83333%; + } + + /* line 60, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-lg-offset-24 { + margin-left: 100%; + } +} +/* line 6, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_tables.scss */ +table { + background-color: transparent; +} + +/* line 9, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_tables.scss */ +th { + text-align: left; +} + +/* line 16, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_tables.scss */ +.table { + width: 100%; + max-width: 100%; + margin-bottom: 24px; +} +/* line 25, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_tables.scss */ +.table > thead > tr > th, +.table > thead > tr > td, +.table > tbody > tr > th, +.table > tbody > tr > td, +.table > tfoot > tr > th, +.table > tfoot > tr > td { + padding: 8px 14px; + line-height: 1.5; + vertical-align: top; + border-top: 1px solid #ddd; +} +/* line 35, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_tables.scss */ +.table > thead > tr > th { + vertical-align: bottom; + border-bottom: 2px solid #ddd; +} +/* line 44, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_tables.scss */ +.table > caption + thead > tr:first-child > th, +.table > caption + thead > tr:first-child > td, +.table > colgroup + thead > tr:first-child > th, +.table > colgroup + thead > tr:first-child > td, +.table > thead:first-child > tr:first-child > th, +.table > thead:first-child > tr:first-child > td { + border-top: 0; +} +/* line 51, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_tables.scss */ +.table > tbody + tbody { + border-top: 2px solid #ddd; +} +/* line 56, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_tables.scss */ +.table .table { + background-color: transparent; +} + +/* line 69, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_tables.scss */ +.table-condensed > thead > tr > th, +.table-condensed > thead > tr > td, +.table-condensed > tbody > tr > th, +.table-condensed > tbody > tr > td, +.table-condensed > tfoot > tr > th, +.table-condensed > tfoot > tr > td { + padding: 5px; +} + +/* line 82, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_tables.scss */ +.table-bordered { + border: 1px solid #ddd; +} +/* line 88, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_tables.scss */ +.table-bordered > thead > tr > th, +.table-bordered > thead > tr > td, +.table-bordered > tbody > tr > th, +.table-bordered > tbody > tr > td, +.table-bordered > tfoot > tr > th, +.table-bordered > tfoot > tr > td { + border: 1px solid #ddd; +} +/* line 95, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_tables.scss */ +.table-bordered > thead > tr > th, +.table-bordered > thead > tr > td { + border-bottom-width: 2px; +} + +/* line 109, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_tables.scss */ +.table-striped > tbody > tr:nth-child(odd) > td, +.table-striped > tbody > tr:nth-child(odd) > th { + background-color: #F8F8F8; +} + +/* line 123, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_tables.scss */ +.table-hover > tbody > tr:hover > td, +.table-hover > tbody > tr:hover > th { + background-color: transparent; +} + +/* line 135, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_tables.scss */ +table col[class*="col-"] { + position: static; + float: none; + display: table-column; +} + +/* line 143, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_tables.scss */ +table td[class*="col-"], +table th[class*="col-"] { + position: static; + float: none; + display: table-cell; +} + +/* line 9, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_table-row.scss */ +.table > thead > tr > td.active, +.table > thead > tr > th.active, .table > thead > tr.active > td, .table > thead > tr.active > th, +.table > tbody > tr > td.active, +.table > tbody > tr > th.active, +.table > tbody > tr.active > td, +.table > tbody > tr.active > th, +.table > tfoot > tr > td.active, +.table > tfoot > tr > th.active, +.table > tfoot > tr.active > td, +.table > tfoot > tr.active > th { + background-color: transparent; +} + +/* line 20, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_table-row.scss */ +.table-hover > tbody > tr > td.active:hover, +.table-hover > tbody > tr > th.active:hover, .table-hover > tbody > tr.active:hover > td, .table-hover > tbody > tr:hover > .active, .table-hover > tbody > tr.active:hover > th { + background-color: transparent; +} + +/* line 9, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_table-row.scss */ +.table > thead > tr > td.success, +.table > thead > tr > th.success, .table > thead > tr.success > td, .table > thead > tr.success > th, +.table > tbody > tr > td.success, +.table > tbody > tr > th.success, +.table > tbody > tr.success > td, +.table > tbody > tr.success > th, +.table > tfoot > tr > td.success, +.table > tfoot > tr > th.success, +.table > tfoot > tr.success > td, +.table > tfoot > tr.success > th { + background-color: #686868; +} + +/* line 20, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_table-row.scss */ +.table-hover > tbody > tr > td.success:hover, +.table-hover > tbody > tr > th.success:hover, .table-hover > tbody > tr.success:hover > td, .table-hover > tbody > tr:hover > .success, .table-hover > tbody > tr.success:hover > th { + background-color: #5b5b5b; +} + +/* line 9, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_table-row.scss */ +.table > thead > tr > td.info, +.table > thead > tr > th.info, .table > thead > tr.info > td, .table > thead > tr.info > th, +.table > tbody > tr > td.info, +.table > tbody > tr > th.info, +.table > tbody > tr.info > td, +.table > tbody > tr.info > th, +.table > tfoot > tr > td.info, +.table > tfoot > tr > th.info, +.table > tfoot > tr.info > td, +.table > tfoot > tr.info > th { + background-color: #e2df80; +} + +/* line 20, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_table-row.scss */ +.table-hover > tbody > tr > td.info:hover, +.table-hover > tbody > tr > th.info:hover, .table-hover > tbody > tr.info:hover > td, .table-hover > tbody > tr:hover > .info, .table-hover > tbody > tr.info:hover > th { + background-color: #ddda6b; +} + +/* line 9, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_table-row.scss */ +.table > thead > tr > td.warning, +.table > thead > tr > th.warning, .table > thead > tr.warning > td, .table > thead > tr.warning > th, +.table > tbody > tr > td.warning, +.table > tbody > tr > th.warning, +.table > tbody > tr.warning > td, +.table > tbody > tr.warning > th, +.table > tfoot > tr > td.warning, +.table > tfoot > tr > th.warning, +.table > tfoot > tr.warning > td, +.table > tfoot > tr.warning > th { + background-color: #F9F3C3; +} + +/* line 20, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_table-row.scss */ +.table-hover > tbody > tr > td.warning:hover, +.table-hover > tbody > tr > th.warning:hover, .table-hover > tbody > tr.warning:hover > td, .table-hover > tbody > tr:hover > .warning, .table-hover > tbody > tr.warning:hover > th { + background-color: #f7eeac; +} + +/* line 9, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_table-row.scss */ +.table > thead > tr > td.danger, +.table > thead > tr > th.danger, .table > thead > tr.danger > td, .table > thead > tr.danger > th, +.table > tbody > tr > td.danger, +.table > tbody > tr > th.danger, +.table > tbody > tr.danger > td, +.table > tbody > tr.danger > th, +.table > tfoot > tr > td.danger, +.table > tfoot > tr > th.danger, +.table > tfoot > tr.danger > td, +.table > tfoot > tr.danger > th { + background-color: #febfc1; +} + +/* line 20, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_table-row.scss */ +.table-hover > tbody > tr > td.danger:hover, +.table-hover > tbody > tr > th.danger:hover, .table-hover > tbody > tr.danger:hover > td, .table-hover > tbody > tr:hover > .danger, .table-hover > tbody > tr.danger:hover > th { + background-color: #fea6a9; +} + +@media screen and (max-width: 767px) { + /* line 171, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_tables.scss */ + .table-responsive { + width: 100%; + margin-bottom: 18px; + overflow-y: hidden; + overflow-x: auto; + -ms-overflow-style: -ms-autohiding-scrollbar; + border: 1px solid #ddd; + -webkit-overflow-scrolling: touch; + } + /* line 182, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_tables.scss */ + .table-responsive > .table { + margin-bottom: 0; + } + /* line 190, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_tables.scss */ + .table-responsive > .table > thead > tr > th, + .table-responsive > .table > thead > tr > td, + .table-responsive > .table > tbody > tr > th, + .table-responsive > .table > tbody > tr > td, + .table-responsive > .table > tfoot > tr > th, + .table-responsive > .table > tfoot > tr > td { + white-space: nowrap; + } + /* line 199, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_tables.scss */ + .table-responsive > .table-bordered { + border: 0; + } + /* line 207, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_tables.scss */ + .table-responsive > .table-bordered > thead > tr > th:first-child, + .table-responsive > .table-bordered > thead > tr > td:first-child, + .table-responsive > .table-bordered > tbody > tr > th:first-child, + .table-responsive > .table-bordered > tbody > tr > td:first-child, + .table-responsive > .table-bordered > tfoot > tr > th:first-child, + .table-responsive > .table-bordered > tfoot > tr > td:first-child { + border-left: 0; + } + /* line 211, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_tables.scss */ + .table-responsive > .table-bordered > thead > tr > th:last-child, + .table-responsive > .table-bordered > thead > tr > td:last-child, + .table-responsive > .table-bordered > tbody > tr > th:last-child, + .table-responsive > .table-bordered > tbody > tr > td:last-child, + .table-responsive > .table-bordered > tfoot > tr > th:last-child, + .table-responsive > .table-bordered > tfoot > tr > td:last-child { + border-right: 0; + } + /* line 224, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_tables.scss */ + .table-responsive > .table-bordered > tbody > tr:last-child > th, + .table-responsive > .table-bordered > tbody > tr:last-child > td, + .table-responsive > .table-bordered > tfoot > tr:last-child > th, + .table-responsive > .table-bordered > tfoot > tr:last-child > td { + border-bottom: 0; + } +} + +/* line 10, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_forms.scss */ +fieldset { + padding: 0; + margin: 0; + border: 0; + min-width: 0; +} + +/* line 20, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_forms.scss */ +legend { + display: block; + width: 100%; + padding: 0; + margin-bottom: 24px; + font-size: 24px; + line-height: inherit; + color: #333333; + border: 0; + border-bottom: 1px solid #e5e5e5; +} + +/* line 32, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_forms.scss */ +label { + display: inline-block; + max-width: 100%; + margin-bottom: 5px; + font-weight: bold; +} + +/* line 47, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_forms.scss */ +input[type="search"] { + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; +} + +/* line 52, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_forms.scss */ +input[type="radio"], +input[type="checkbox"] { + margin: 4px 0 0; + margin-top: 1px \9; + line-height: normal; +} + +/* line 60, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_forms.scss */ +input[type="file"] { + display: block; +} + +/* line 65, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_forms.scss */ +input[type="range"] { + display: block; + width: 100%; +} + +/* line 71, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_forms.scss */ +select[multiple], +select[size] { + height: auto; +} + +/* line 77, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_forms.scss */ +input[type="file"]:focus, +input[type="radio"]:focus, +input[type="checkbox"]:focus { + outline: thin dotted; + outline: 5px auto -webkit-focus-ring-color; + outline-offset: -2px; +} + +/* line 84, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_forms.scss */ +output { + display: block; + padding-top: 9px; + font-size: 16px; + line-height: 1.5; + color: #555555; +} + +/* line 115, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_forms.scss */ +.form-control { + display: block; + width: 100%; + height: 42px; + padding: 8px 20px; + font-size: 16px; + line-height: 1.5; + color: #555555; + background-color: #fff; + background-image: none; + border: 1px solid #ccc; + border-radius: 3px; + -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); + box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); + -webkit-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s; + -o-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s; + transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s; +} +/* line 53, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_forms.scss */ +.form-control:focus { + border-color: #49a8d5; + outline: 0; + -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(73, 168, 213, 0.6); + box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(73, 168, 213, 0.6); +} +/* line 102, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_vendor-prefixes.scss */ +.form-control::-moz-placeholder { + color: #b4b4b4; + opacity: 1; +} +/* line 104, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_vendor-prefixes.scss */ +.form-control:-ms-input-placeholder { + color: #b4b4b4; +} +/* line 105, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_vendor-prefixes.scss */ +.form-control::-webkit-input-placeholder { + color: #b4b4b4; +} +/* line 141, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_forms.scss */ +.form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control { + cursor: not-allowed; + background-color: #eeeeee; + opacity: 1; +} + +/* line 153, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_forms.scss */ +textarea.form-control { + height: auto; +} + +/* line 165, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_forms.scss */ +input[type="search"] { + -webkit-appearance: none; +} + +/* line 178, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_forms.scss */ +input[type="date"], +input[type="time"], +input[type="datetime-local"], +input[type="month"] { + line-height: 42px; + line-height: 1.5 \0; +} +/* line 186, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_forms.scss */ +input[type="date"].input-sm, .form-horizontal .form-group-sm input[type="date"].form-control, +input[type="time"].input-sm, +.form-horizontal .form-group-sm input[type="time"].form-control, +input[type="datetime-local"].input-sm, +.form-horizontal .form-group-sm input[type="datetime-local"].form-control, +input[type="month"].input-sm, +.form-horizontal .form-group-sm input[type="month"].form-control { + line-height: 27px; +} +/* line 189, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_forms.scss */ +input[type="date"].input-lg, .form-horizontal .form-group-lg input[type="date"].form-control, +input[type="time"].input-lg, +.form-horizontal .form-group-lg input[type="time"].form-control, +input[type="datetime-local"].input-lg, +.form-horizontal .form-group-lg input[type="datetime-local"].form-control, +input[type="month"].input-lg, +.form-horizontal .form-group-lg input[type="month"].form-control { + line-height: 48px; +} + +/* line 200, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_forms.scss */ +.form-group { + margin-bottom: 15px; +} + +/* line 209, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_forms.scss */ +.radio, +.checkbox { + position: relative; + display: block; + min-height: 24px; + margin-top: 10px; + margin-bottom: 10px; +} +/* line 217, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_forms.scss */ +.radio label, +.checkbox label { + padding-left: 20px; + margin-bottom: 0; + font-weight: normal; + cursor: pointer; +} + +/* line 224, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_forms.scss */ +.radio input[type="radio"], +.radio-inline input[type="radio"], +.checkbox input[type="checkbox"], +.checkbox-inline input[type="checkbox"] { + position: absolute; + margin-left: -20px; + margin-top: 4px \9; +} + +/* line 233, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_forms.scss */ +.radio + .radio, +.checkbox + .checkbox { + margin-top: -5px; +} + +/* line 239, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_forms.scss */ +.radio-inline, +.checkbox-inline { + display: inline-block; + padding-left: 20px; + margin-bottom: 0; + vertical-align: middle; + font-weight: normal; + cursor: pointer; +} + +/* line 248, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_forms.scss */ +.radio-inline + .radio-inline, +.checkbox-inline + .checkbox-inline { + margin-top: 0; + margin-left: 10px; +} + +/* line 260, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_forms.scss */ +input[type="radio"][disabled], input[type="radio"].disabled, fieldset[disabled] input[type="radio"], +input[type="checkbox"][disabled], +input[type="checkbox"].disabled, fieldset[disabled] +input[type="checkbox"] { + cursor: not-allowed; +} + +/* line 269, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_forms.scss */ +.radio-inline.disabled, fieldset[disabled] .radio-inline, +.checkbox-inline.disabled, fieldset[disabled] +.checkbox-inline { + cursor: not-allowed; +} + +/* line 279, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_forms.scss */ +.radio.disabled label, fieldset[disabled] .radio label, +.checkbox.disabled label, fieldset[disabled] +.checkbox label { + cursor: not-allowed; +} + +/* line 291, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_forms.scss */ +.form-control-static { + padding-top: 9px; + padding-bottom: 9px; + margin-bottom: 0; +} +/* line 298, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_forms.scss */ +.form-control-static.input-lg, .form-horizontal .form-group-lg .form-control-static.form-control, .form-control-static.input-sm, .form-horizontal .form-group-sm .form-control-static.form-control { + padding-left: 0; + padding-right: 0; +} + +/* line 67, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_forms.scss */ +.input-sm, .form-horizontal .form-group-sm .form-control { + height: 27px; + padding: 2px 10px; + font-size: 14px; + line-height: 1.5; + border-radius: 3px; +} + +/* line 75, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_forms.scss */ +select.input-sm, .form-horizontal .form-group-sm select.form-control { + height: 27px; + line-height: 27px; +} + +/* line 80, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_forms.scss */ +textarea.input-sm, .form-horizontal .form-group-sm textarea.form-control, +select[multiple].input-sm, +.form-horizontal .form-group-sm select[multiple].form-control { + height: auto; +} + +/* line 67, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_forms.scss */ +.input-lg, .form-horizontal .form-group-lg .form-control { + height: 48px; + padding: 10px 26px; + font-size: 20px; + line-height: 1.33; + border-radius: 6px; +} + +/* line 75, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_forms.scss */ +select.input-lg, .form-horizontal .form-group-lg select.form-control { + height: 48px; + line-height: 48px; +} + +/* line 80, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_forms.scss */ +textarea.input-lg, .form-horizontal .form-group-lg textarea.form-control, +select[multiple].input-lg, +.form-horizontal .form-group-lg select[multiple].form-control { + height: auto; +} + +/* line 320, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_forms.scss */ +.has-feedback { + position: relative; +} +/* line 325, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_forms.scss */ +.has-feedback .form-control { + padding-right: 52.5px; +} + +/* line 330, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_forms.scss */ +.form-control-feedback { + position: absolute; + top: 29px; + right: 0; + z-index: 2; + display: block; + width: 42px; + height: 42px; + line-height: 42px; + text-align: center; +} + +/* line 341, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_forms.scss */ +.input-lg + .form-control-feedback, .form-horizontal .form-group-lg .form-control + .form-control-feedback { + width: 48px; + height: 48px; + line-height: 48px; +} + +/* line 346, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_forms.scss */ +.input-sm + .form-control-feedback, .form-horizontal .form-group-sm .form-control + .form-control-feedback { + width: 27px; + height: 27px; + line-height: 27px; +} + +/* line 8, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_forms.scss */ +.has-success .help-block, +.has-success .control-label, +.has-success .radio, +.has-success .checkbox, +.has-success .radio-inline, +.has-success .checkbox-inline { + color: #d4d9d9; +} +/* line 17, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_forms.scss */ +.has-success .form-control { + border-color: #d4d9d9; + -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); + box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); +} +/* line 20, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_forms.scss */ +.has-success .form-control:focus { + border-color: #b9c1c1; + -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px white; + box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px white; +} +/* line 27, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_forms.scss */ +.has-success .input-group-addon { + color: #d4d9d9; + border-color: #d4d9d9; + background-color: #686868; +} +/* line 33, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_forms.scss */ +.has-success .form-control-feedback { + color: #d4d9d9; +} + +/* line 8, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_forms.scss */ +.has-warning .help-block, +.has-warning .control-label, +.has-warning .radio, +.has-warning .checkbox, +.has-warning .radio-inline, +.has-warning .checkbox-inline { + color: #B59033; +} +/* line 17, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_forms.scss */ +.has-warning .form-control { + border-color: #B59033; + -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); + box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); +} +/* line 20, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_forms.scss */ +.has-warning .form-control:focus { + border-color: #8d7028; + -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #d8bc76; + box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #d8bc76; +} +/* line 27, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_forms.scss */ +.has-warning .input-group-addon { + color: #B59033; + border-color: #B59033; + background-color: #F9F3C3; +} +/* line 33, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_forms.scss */ +.has-warning .form-control-feedback { + color: #B59033; +} + +/* line 8, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_forms.scss */ +.has-error .help-block, +.has-error .control-label, +.has-error .radio, +.has-error .checkbox, +.has-error .radio-inline, +.has-error .checkbox-inline { + color: #ff434c; +} +/* line 17, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_forms.scss */ +.has-error .form-control { + border-color: #ff434c; + -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); + box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); +} +/* line 20, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_forms.scss */ +.has-error .form-control:focus { + border-color: #ff101b; + -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #ffa9ad; + box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #ffa9ad; +} +/* line 27, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_forms.scss */ +.has-error .input-group-addon { + color: #ff434c; + border-color: #ff434c; + background-color: #febfc1; +} +/* line 33, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_forms.scss */ +.has-error .form-control-feedback { + color: #ff434c; +} + +/* line 365, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_forms.scss */ +.has-feedback label.sr-only ~ .form-control-feedback { + top: 0; +} + +/* line 375, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_forms.scss */ +.help-block { + display: block; + margin-top: 5px; + margin-bottom: 10px; + color: #a8a8a8; +} + +@media (min-width: 768px) { + /* line 400, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_forms.scss */ + .form-inline .form-group { + display: inline-block; + margin-bottom: 0; + vertical-align: middle; + } + /* line 407, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_forms.scss */ + .form-inline .form-control { + display: inline-block; + width: auto; + vertical-align: middle; + } + /* line 413, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_forms.scss */ + .form-inline .input-group { + display: inline-table; + vertical-align: middle; + } + /* line 417, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_forms.scss */ + .form-inline .input-group .input-group-addon, + .form-inline .input-group .input-group-btn, + .form-inline .input-group .form-control { + width: auto; + } + /* line 425, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_forms.scss */ + .form-inline .input-group > .form-control { + width: 100%; + } + /* line 429, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_forms.scss */ + .form-inline .control-label { + margin-bottom: 0; + vertical-align: middle; + } + /* line 437, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_forms.scss */ + .form-inline .radio, + .form-inline .checkbox { + display: inline-block; + margin-top: 0; + margin-bottom: 0; + vertical-align: middle; + } + /* line 444, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_forms.scss */ + .form-inline .radio label, + .form-inline .checkbox label { + padding-left: 0; + } + /* line 448, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_forms.scss */ + .form-inline .radio input[type="radio"], + .form-inline .checkbox input[type="checkbox"] { + position: relative; + margin-left: 0; + } + /* line 458, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_forms.scss */ + .form-inline .has-feedback .form-control-feedback { + top: 0; + } +} + +/* line 475, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_forms.scss */ +.form-horizontal .radio, +.form-horizontal .checkbox, +.form-horizontal .radio-inline, +.form-horizontal .checkbox-inline { + margin-top: 0; + margin-bottom: 0; + padding-top: 9px; +} +/* line 485, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_forms.scss */ +.form-horizontal .radio, +.form-horizontal .checkbox { + min-height: 33px; +} +/* line 491, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_forms.scss */ +.form-horizontal .form-group { + margin-left: -10px; + margin-right: -10px; +} +/* line 14, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_clearfix.scss */ +.form-horizontal .form-group:before, .form-horizontal .form-group:after { + content: " "; + display: table; +} +/* line 19, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_clearfix.scss */ +.form-horizontal .form-group:after { + clear: both; +} +@media (min-width: 768px) { + /* line 498, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_forms.scss */ + .form-horizontal .control-label { + text-align: right; + margin-bottom: 0; + padding-top: 9px; + } +} +/* line 509, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_forms.scss */ +.form-horizontal .has-feedback .form-control-feedback { + top: 0; + right: 10px; +} +@media (min-width: 768px) { + /* line 520, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_forms.scss */ + .form-horizontal .form-group-lg .control-label { + padding-top: 14.3px; + } +} +@media (min-width: 768px) { + /* line 530, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_forms.scss */ + .form-horizontal .form-group-sm .control-label { + padding-top: 3px; + } +} + +/* line 9, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_buttons.scss */ +.btn { + display: inline-block; + margin-bottom: 0; + font-weight: 600; + text-align: center; + vertical-align: middle; + cursor: pointer; + background-image: none; + border: 1px solid transparent; + white-space: nowrap; + padding: 8px 20px; + font-size: 16px; + line-height: 1.5; + border-radius: 4px; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} +/* line 25, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_buttons.scss */ +.btn:focus, .btn:active:focus, .btn.active:focus { + outline: thin dotted; + outline: 5px auto -webkit-focus-ring-color; + outline-offset: -2px; +} +/* line 30, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_buttons.scss */ +.btn:hover, .btn:focus { + color: #2185c5; + text-decoration: none; +} +/* line 36, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_buttons.scss */ +.btn:active, .btn.active { + outline: 0; + background-image: none; + -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); + box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); +} +/* line 43, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_buttons.scss */ +.btn.disabled, .btn[disabled], fieldset[disabled] .btn { + cursor: not-allowed; + pointer-events: none; + opacity: 0.65; + filter: alpha(opacity=65); + -webkit-box-shadow: none; + box-shadow: none; +} + +/* line 57, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_buttons.scss */ +.btn-default { + color: #2185c5; + background-color: rgba(255, 255, 255, 0.4); + border-color: transparent; +} +/* line 11, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_buttons.scss */ +.btn-default:hover, .btn-default:focus, .btn-default:active, .btn-default.active, .open > .btn-default.dropdown-toggle { + color: #2185c5; + background-color: rgba(230, 230, 230, 0.4); + border-color: transparent; +} +/* line 20, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_buttons.scss */ +.btn-default:active, .btn-default.active, .open > .btn-default.dropdown-toggle { + background-image: none; +} +/* line 28, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_buttons.scss */ +.btn-default.disabled, .btn-default.disabled:hover, .btn-default.disabled:focus, .btn-default.disabled:active, .btn-default.disabled.active, .btn-default[disabled], .btn-default[disabled]:hover, .btn-default[disabled]:focus, .btn-default[disabled]:active, .btn-default[disabled].active, fieldset[disabled] .btn-default, fieldset[disabled] .btn-default:hover, fieldset[disabled] .btn-default:focus, fieldset[disabled] .btn-default:active, fieldset[disabled] .btn-default.active { + background-color: rgba(255, 255, 255, 0.4); + border-color: transparent; +} +/* line 38, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_buttons.scss */ +.btn-default .badge { + color: rgba(255, 255, 255, 0.4); + background-color: #2185c5; +} + +/* line 60, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_buttons.scss */ +.btn-primary { + color: #2185c5; + background-color: white; + border-color: #49A8D5; +} +/* line 11, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_buttons.scss */ +.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active, .open > .btn-primary.dropdown-toggle { + color: #2185c5; + background-color: #e6e6e6; + border-color: #2a89b7; +} +/* line 20, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_buttons.scss */ +.btn-primary:active, .btn-primary.active, .open > .btn-primary.dropdown-toggle { + background-image: none; +} +/* line 28, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_buttons.scss */ +.btn-primary.disabled, .btn-primary.disabled:hover, .btn-primary.disabled:focus, .btn-primary.disabled:active, .btn-primary.disabled.active, .btn-primary[disabled], .btn-primary[disabled]:hover, .btn-primary[disabled]:focus, .btn-primary[disabled]:active, .btn-primary[disabled].active, fieldset[disabled] .btn-primary, fieldset[disabled] .btn-primary:hover, fieldset[disabled] .btn-primary:focus, fieldset[disabled] .btn-primary:active, fieldset[disabled] .btn-primary.active { + background-color: white; + border-color: #49A8D5; +} +/* line 38, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_buttons.scss */ +.btn-primary .badge { + color: white; + background-color: #2185c5; +} + +/* line 64, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_buttons.scss */ +.btn-success { + color: transparent; + background-color: transparent; + border-color: transparent; +} +/* line 11, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_buttons.scss */ +.btn-success:hover, .btn-success:focus, .btn-success:active, .btn-success.active, .open > .btn-success.dropdown-toggle { + color: transparent; + background-color: transparent; + border-color: transparent; +} +/* line 20, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_buttons.scss */ +.btn-success:active, .btn-success.active, .open > .btn-success.dropdown-toggle { + background-image: none; +} +/* line 28, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_buttons.scss */ +.btn-success.disabled, .btn-success.disabled:hover, .btn-success.disabled:focus, .btn-success.disabled:active, .btn-success.disabled.active, .btn-success[disabled], .btn-success[disabled]:hover, .btn-success[disabled]:focus, .btn-success[disabled]:active, .btn-success[disabled].active, fieldset[disabled] .btn-success, fieldset[disabled] .btn-success:hover, fieldset[disabled] .btn-success:focus, fieldset[disabled] .btn-success:active, fieldset[disabled] .btn-success.active { + background-color: transparent; + border-color: transparent; +} +/* line 38, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_buttons.scss */ +.btn-success .badge { + color: transparent; + background-color: transparent; +} + +/* line 68, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_buttons.scss */ +.btn-info { + color: transparent; + background-color: transparent; + border-color: transparent; +} +/* line 11, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_buttons.scss */ +.btn-info:hover, .btn-info:focus, .btn-info:active, .btn-info.active, .open > .btn-info.dropdown-toggle { + color: transparent; + background-color: transparent; + border-color: transparent; +} +/* line 20, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_buttons.scss */ +.btn-info:active, .btn-info.active, .open > .btn-info.dropdown-toggle { + background-image: none; +} +/* line 28, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_buttons.scss */ +.btn-info.disabled, .btn-info.disabled:hover, .btn-info.disabled:focus, .btn-info.disabled:active, .btn-info.disabled.active, .btn-info[disabled], .btn-info[disabled]:hover, .btn-info[disabled]:focus, .btn-info[disabled]:active, .btn-info[disabled].active, fieldset[disabled] .btn-info, fieldset[disabled] .btn-info:hover, fieldset[disabled] .btn-info:focus, fieldset[disabled] .btn-info:active, fieldset[disabled] .btn-info.active { + background-color: transparent; + border-color: transparent; +} +/* line 38, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_buttons.scss */ +.btn-info .badge { + color: transparent; + background-color: transparent; +} + +/* line 72, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_buttons.scss */ +.btn-warning { + color: transparent; + background-color: transparent; + border-color: transparent; +} +/* line 11, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_buttons.scss */ +.btn-warning:hover, .btn-warning:focus, .btn-warning:active, .btn-warning.active, .open > .btn-warning.dropdown-toggle { + color: transparent; + background-color: transparent; + border-color: transparent; +} +/* line 20, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_buttons.scss */ +.btn-warning:active, .btn-warning.active, .open > .btn-warning.dropdown-toggle { + background-image: none; +} +/* line 28, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_buttons.scss */ +.btn-warning.disabled, .btn-warning.disabled:hover, .btn-warning.disabled:focus, .btn-warning.disabled:active, .btn-warning.disabled.active, .btn-warning[disabled], .btn-warning[disabled]:hover, .btn-warning[disabled]:focus, .btn-warning[disabled]:active, .btn-warning[disabled].active, fieldset[disabled] .btn-warning, fieldset[disabled] .btn-warning:hover, fieldset[disabled] .btn-warning:focus, fieldset[disabled] .btn-warning:active, fieldset[disabled] .btn-warning.active { + background-color: transparent; + border-color: transparent; +} +/* line 38, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_buttons.scss */ +.btn-warning .badge { + color: transparent; + background-color: transparent; +} + +/* line 76, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_buttons.scss */ +.btn-danger { + color: white; + background-color: #ff434c; + border-color: #CA7070; +} +/* line 11, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_buttons.scss */ +.btn-danger:hover, .btn-danger:focus, .btn-danger:active, .btn-danger.active, .open > .btn-danger.dropdown-toggle { + color: white; + background-color: #ff101b; + border-color: #b84444; +} +/* line 20, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_buttons.scss */ +.btn-danger:active, .btn-danger.active, .open > .btn-danger.dropdown-toggle { + background-image: none; +} +/* line 28, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_buttons.scss */ +.btn-danger.disabled, .btn-danger.disabled:hover, .btn-danger.disabled:focus, .btn-danger.disabled:active, .btn-danger.disabled.active, .btn-danger[disabled], .btn-danger[disabled]:hover, .btn-danger[disabled]:focus, .btn-danger[disabled]:active, .btn-danger[disabled].active, fieldset[disabled] .btn-danger, fieldset[disabled] .btn-danger:hover, fieldset[disabled] .btn-danger:focus, fieldset[disabled] .btn-danger:active, fieldset[disabled] .btn-danger.active { + background-color: #ff434c; + border-color: #CA7070; +} +/* line 38, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_buttons.scss */ +.btn-danger .badge { + color: #ff434c; + background-color: white; +} + +/* line 85, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_buttons.scss */ +.btn-link { + color: #2185c5; + font-weight: normal; + cursor: pointer; + border-radius: 0; +} +/* line 91, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_buttons.scss */ +.btn-link, .btn-link:active, .btn-link[disabled], fieldset[disabled] .btn-link { + background-color: transparent; + -webkit-box-shadow: none; + box-shadow: none; +} +/* line 98, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_buttons.scss */ +.btn-link, .btn-link:hover, .btn-link:focus, .btn-link:active { + border-color: transparent; +} +/* line 104, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_buttons.scss */ +.btn-link:hover, .btn-link:focus { + color: #1a739e; + text-decoration: underline; + background-color: transparent; +} +/* line 112, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_buttons.scss */ +.btn-link[disabled]:hover, .btn-link[disabled]:focus, fieldset[disabled] .btn-link:hover, fieldset[disabled] .btn-link:focus { + color: #999999; + text-decoration: none; +} + +/* line 124, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_buttons.scss */ +.btn-lg, .btn-group-lg > .btn { + padding: 10px 26px; + font-size: 20px; + line-height: 1.33; + border-radius: 6px; +} + +/* line 128, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_buttons.scss */ +.btn-sm, .btn-group-sm > .btn { + padding: 2px 10px; + font-size: 14px; + line-height: 1.5; + border-radius: 3px; +} + +/* line 132, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_buttons.scss */ +.btn-xs, .btn-group-xs > .btn { + padding: 1px 5px; + font-size: 14px; + line-height: 1.5; + border-radius: 3px; +} + +/* line 140, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_buttons.scss */ +.btn-block { + display: block; + width: 100%; +} + +/* line 146, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_buttons.scss */ +.btn-block + .btn-block { + margin-top: 5px; +} + +/* line 154, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_buttons.scss */ +input[type="submit"].btn-block, +input[type="reset"].btn-block, +input[type="button"].btn-block { + width: 100%; +} + +/* line 10, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_component-animations.scss */ +.fade { + opacity: 0; + -webkit-transition: opacity 0.15s linear; + -o-transition: opacity 0.15s linear; + transition: opacity 0.15s linear; +} +/* line 13, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_component-animations.scss */ +.fade.in { + opacity: 1; +} + +/* line 18, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_component-animations.scss */ +.collapse { + display: none; +} +/* line 21, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_component-animations.scss */ +.collapse.in { + display: block; +} + +/* line 26, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_component-animations.scss */ +tr.collapse.in { + display: table-row; +} + +/* line 28, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_component-animations.scss */ +tbody.collapse.in { + display: table-row-group; +} + +/* line 30, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_component-animations.scss */ +.collapsing { + position: relative; + height: 0; + overflow: hidden; + -webkit-transition: height 0.35s ease; + -o-transition: height 0.35s ease; + transition: height 0.35s ease; +} + +/* line 7, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_dropdowns.scss */ +.caret { + display: inline-block; + width: 0; + height: 0; + margin-left: 2px; + vertical-align: middle; + border-top: 4px solid; + border-right: 4px solid transparent; + border-left: 4px solid transparent; +} + +/* line 19, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_dropdowns.scss */ +.dropdown { + position: relative; +} + +/* line 24, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_dropdowns.scss */ +.dropdown-toggle:focus { + outline: 0; +} + +/* line 29, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_dropdowns.scss */ +.dropdown-menu { + position: absolute; + top: 100%; + left: 0; + z-index: 1000; + display: none; + float: left; + min-width: 160px; + padding: 5px 0; + margin: 2px 0 0; + list-style: none; + font-size: 16px; + text-align: left; + background-color: #fff; + border: 1px solid #ccc; + border: 1px solid rgba(0, 0, 0, 0.15); + border-radius: 4px; + -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175); + box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175); + background-clip: padding-box; +} +/* line 52, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_dropdowns.scss */ +.dropdown-menu.pull-right { + right: 0; + left: auto; +} +/* line 58, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_dropdowns.scss */ +.dropdown-menu .divider { + height: 1px; + margin: 11px 0; + overflow: hidden; + background-color: #e5e5e5; +} +/* line 63, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_dropdowns.scss */ +.dropdown-menu > li > a { + display: block; + padding: 3px 20px; + clear: both; + font-weight: normal; + line-height: 1.5; + color: #333333; + white-space: nowrap; +} + +/* line 76, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_dropdowns.scss */ +.dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus { + text-decoration: none; + color: #262626; + background-color: #f5f5f5; +} + +/* line 86, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_dropdowns.scss */ +.dropdown-menu > .active > a, .dropdown-menu > .active > a:hover, .dropdown-menu > .active > a:focus { + color: #fff; + text-decoration: none; + outline: 0; + background-color: #1b92cb; +} + +/* line 101, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_dropdowns.scss */ +.dropdown-menu > .disabled > a, .dropdown-menu > .disabled > a:hover, .dropdown-menu > .disabled > a:focus { + color: #999999; +} + +/* line 109, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_dropdowns.scss */ +.dropdown-menu > .disabled > a:hover, .dropdown-menu > .disabled > a:focus { + text-decoration: none; + background-color: transparent; + background-image: none; + filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); + cursor: not-allowed; +} + +/* line 122, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_dropdowns.scss */ +.open > .dropdown-menu { + display: block; +} +/* line 127, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_dropdowns.scss */ +.open > a { + outline: 0; +} + +/* line 136, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_dropdowns.scss */ +.dropdown-menu-right { + left: auto; + right: 0; +} + +/* line 146, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_dropdowns.scss */ +.dropdown-menu-left { + left: 0; + right: auto; +} + +/* line 152, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_dropdowns.scss */ +.dropdown-header { + display: block; + padding: 3px 20px; + font-size: 14px; + line-height: 1.5; + color: #999999; + white-space: nowrap; +} + +/* line 162, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_dropdowns.scss */ +.dropdown-backdrop { + position: fixed; + left: 0; + right: 0; + bottom: 0; + top: 0; + z-index: 990; +} + +/* line 172, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_dropdowns.scss */ +.pull-right > .dropdown-menu { + right: 0; + left: auto; +} + +/* line 185, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_dropdowns.scss */ +.dropup .caret, +.navbar-fixed-bottom .dropdown .caret { + border-top: 0; + border-bottom: 4px solid; + content: ""; +} +/* line 191, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_dropdowns.scss */ +.dropup .dropdown-menu, +.navbar-fixed-bottom .dropdown .dropdown-menu { + top: auto; + bottom: 100%; + margin-bottom: 1px; +} + +@media (min-width: 768px) { + /* line 205, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_dropdowns.scss */ + .navbar-right .dropdown-menu { + right: 0; + left: auto; + } + /* line 210, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_dropdowns.scss */ + .navbar-right .dropdown-menu-left { + left: 0; + right: auto; + } +} +/* line 6, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_button-groups.scss */ +.btn-group, +.btn-group-vertical { + position: relative; + display: inline-block; + vertical-align: middle; +} +/* line 11, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_button-groups.scss */ +.btn-group > .btn, +.btn-group-vertical > .btn { + position: relative; + float: left; +} +/* line 15, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_button-groups.scss */ +.btn-group > .btn:hover, .btn-group > .btn:focus, .btn-group > .btn:active, .btn-group > .btn.active, +.btn-group-vertical > .btn:hover, +.btn-group-vertical > .btn:focus, +.btn-group-vertical > .btn:active, +.btn-group-vertical > .btn.active { + z-index: 2; +} +/* line 21, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_button-groups.scss */ +.btn-group > .btn:focus, +.btn-group-vertical > .btn:focus { + outline: 0; +} + +/* line 30, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_button-groups.scss */ +.btn-group .btn + .btn, +.btn-group .btn + .btn-group, +.btn-group .btn-group + .btn, +.btn-group .btn-group + .btn-group { + margin-left: -1px; +} + +/* line 39, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_button-groups.scss */ +.btn-toolbar { + margin-left: -5px; +} +/* line 14, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_clearfix.scss */ +.btn-toolbar:before, .btn-toolbar:after { + content: " "; + display: table; +} +/* line 19, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_clearfix.scss */ +.btn-toolbar:after { + clear: both; +} +/* line 43, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_button-groups.scss */ +.btn-toolbar .btn-group, +.btn-toolbar .input-group { + float: left; +} +/* line 47, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_button-groups.scss */ +.btn-toolbar > .btn, +.btn-toolbar > .btn-group, +.btn-toolbar > .input-group { + margin-left: 5px; +} + +/* line 54, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_button-groups.scss */ +.btn-group > .btn:not(:first-child):not(:last-child):not(.dropdown-toggle) { + border-radius: 0; +} + +/* line 59, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_button-groups.scss */ +.btn-group > .btn:first-child { + margin-left: 0; +} +/* line 61, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_button-groups.scss */ +.btn-group > .btn:first-child:not(:last-child):not(.dropdown-toggle) { + border-bottom-right-radius: 0; + border-top-right-radius: 0; +} + +/* line 66, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_button-groups.scss */ +.btn-group > .btn:last-child:not(:first-child), +.btn-group > .dropdown-toggle:not(:first-child) { + border-bottom-left-radius: 0; + border-top-left-radius: 0; +} + +/* line 72, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_button-groups.scss */ +.btn-group > .btn-group { + float: left; +} + +/* line 75, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_button-groups.scss */ +.btn-group > .btn-group:not(:first-child):not(:last-child) > .btn { + border-radius: 0; +} + +/* line 79, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_button-groups.scss */ +.btn-group > .btn-group:first-child > .btn:last-child, +.btn-group > .btn-group:first-child > .dropdown-toggle { + border-bottom-right-radius: 0; + border-top-right-radius: 0; +} + +/* line 84, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_button-groups.scss */ +.btn-group > .btn-group:last-child > .btn:first-child { + border-bottom-left-radius: 0; + border-top-left-radius: 0; +} + +/* line 89, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_button-groups.scss */ +.btn-group .dropdown-toggle:active, +.btn-group.open .dropdown-toggle { + outline: 0; +} + +/* line 108, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_button-groups.scss */ +.btn-group > .btn + .dropdown-toggle { + padding-left: 8px; + padding-right: 8px; +} + +/* line 112, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_button-groups.scss */ +.btn-group > .btn-lg + .dropdown-toggle, .btn-group-lg.btn-group > .btn + .dropdown-toggle { + padding-left: 12px; + padding-right: 12px; +} + +/* line 119, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_button-groups.scss */ +.btn-group.open .dropdown-toggle { + -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); + box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); +} +/* line 123, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_button-groups.scss */ +.btn-group.open .dropdown-toggle.btn-link { + -webkit-box-shadow: none; + box-shadow: none; +} + +/* line 130, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_button-groups.scss */ +.btn .caret { + margin-left: 0; +} + +/* line 134, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_button-groups.scss */ +.btn-lg .caret, .btn-group-lg > .btn .caret { + border-width: 5px 5px 0; + border-bottom-width: 0; +} + +/* line 139, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_button-groups.scss */ +.dropup .btn-lg .caret, .dropup .btn-group-lg > .btn .caret { + border-width: 0 5px 5px; +} + +/* line 148, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_button-groups.scss */ +.btn-group-vertical > .btn, +.btn-group-vertical > .btn-group, +.btn-group-vertical > .btn-group > .btn { + display: block; + float: none; + width: 100%; + max-width: 100%; +} +/* line 14, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_clearfix.scss */ +.btn-group-vertical > .btn-group:before, .btn-group-vertical > .btn-group:after { + content: " "; + display: table; +} +/* line 19, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_clearfix.scss */ +.btn-group-vertical > .btn-group:after { + clear: both; +} +/* line 160, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_button-groups.scss */ +.btn-group-vertical > .btn-group > .btn { + float: none; +} +/* line 165, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_button-groups.scss */ +.btn-group-vertical > .btn + .btn, +.btn-group-vertical > .btn + .btn-group, +.btn-group-vertical > .btn-group + .btn, +.btn-group-vertical > .btn-group + .btn-group { + margin-top: -1px; + margin-left: 0; +} + +/* line 175, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_button-groups.scss */ +.btn-group-vertical > .btn:not(:first-child):not(:last-child) { + border-radius: 0; +} +/* line 178, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_button-groups.scss */ +.btn-group-vertical > .btn:first-child:not(:last-child) { + border-top-right-radius: 4px; + border-bottom-right-radius: 0; + border-bottom-left-radius: 0; +} +/* line 182, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_button-groups.scss */ +.btn-group-vertical > .btn:last-child:not(:first-child) { + border-bottom-left-radius: 4px; + border-top-right-radius: 0; + border-top-left-radius: 0; +} + +/* line 187, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_button-groups.scss */ +.btn-group-vertical > .btn-group:not(:first-child):not(:last-child) > .btn { + border-radius: 0; +} + +/* line 191, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_button-groups.scss */ +.btn-group-vertical > .btn-group:first-child:not(:last-child) > .btn:last-child, +.btn-group-vertical > .btn-group:first-child:not(:last-child) > .dropdown-toggle { + border-bottom-right-radius: 0; + border-bottom-left-radius: 0; +} + +/* line 196, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_button-groups.scss */ +.btn-group-vertical > .btn-group:last-child:not(:first-child) > .btn:first-child { + border-top-right-radius: 0; + border-top-left-radius: 0; +} + +/* line 205, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_button-groups.scss */ +.btn-group-justified { + display: table; + width: 100%; + table-layout: fixed; + border-collapse: separate; +} +/* line 210, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_button-groups.scss */ +.btn-group-justified > .btn, +.btn-group-justified > .btn-group { + float: none; + display: table-cell; + width: 1%; +} +/* line 216, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_button-groups.scss */ +.btn-group-justified > .btn-group .btn { + width: 100%; +} +/* line 220, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_button-groups.scss */ +.btn-group-justified > .btn-group .dropdown-menu { + left: auto; +} + +/* line 235, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_button-groups.scss */ +[data-toggle="buttons"] > .btn > input[type="radio"], +[data-toggle="buttons"] > .btn > input[type="checkbox"] { + position: absolute; + z-index: -1; + opacity: 0; + filter: alpha(opacity=0); +} + +/* line 9, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_navs.scss */ +.nav { + margin-bottom: 0; + padding-left: 0; + list-style: none; +} +/* line 14, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_clearfix.scss */ +.nav:before, .nav:after { + content: " "; + display: table; +} +/* line 19, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_clearfix.scss */ +.nav:after { + clear: both; +} +/* line 15, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_navs.scss */ +.nav > li { + position: relative; + display: block; +} +/* line 19, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_navs.scss */ +.nav > li > a { + position: relative; + display: block; + padding: 5px 10px; +} +/* line 23, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_navs.scss */ +.nav > li > a:hover, .nav > li > a:focus { + text-decoration: none; + background-color: transparent; +} +/* line 31, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_navs.scss */ +.nav > li.disabled > a { + color: #999999; +} +/* line 34, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_navs.scss */ +.nav > li.disabled > a:hover, .nav > li.disabled > a:focus { + color: #999999; + text-decoration: none; + background-color: transparent; + cursor: not-allowed; +} +/* line 46, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_navs.scss */ +.nav .open > a, .nav .open > a:hover, .nav .open > a:focus { + background-color: transparent; + border-color: #2185c5; +} +/* line 59, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_navs.scss */ +.nav .nav-divider { + height: 1px; + margin: 11px 0; + overflow: hidden; + background-color: #e5e5e5; +} +/* line 66, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_navs.scss */ +.nav > li > a > img { + max-width: none; +} + +/* line 76, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_navs.scss */ +.nav-tabs { + border-bottom: 1px solid #ddd; +} +/* line 78, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_navs.scss */ +.nav-tabs > li { + float: left; + margin-bottom: -1px; +} +/* line 84, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_navs.scss */ +.nav-tabs > li > a { + margin-right: 2px; + line-height: 1.5; + border: 1px solid transparent; + border-radius: 4px 4px 0 0; +} +/* line 89, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_navs.scss */ +.nav-tabs > li > a:hover { + border-color: #eeeeee #eeeeee #ddd; +} +/* line 96, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_navs.scss */ +.nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus { + color: #00776d; + background-color: #ecefef; + border: 1px solid #00776d; + border-bottom-color: transparent; + cursor: default; +} + +/* line 118, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_navs.scss */ +.nav-pills > li { + float: left; +} +/* line 125, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_navs.scss */ +.nav-pills > li + li { + margin-left: 2px; +} + +/* line 144, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_navs.scss */ +.nav-stacked > li { + float: none; +} +/* line 146, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_navs.scss */ +.nav-stacked > li + li { + margin-top: 2px; + margin-left: 0; +} + +/* line 160, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_navs.scss */ +.nav-justified, .nav-tabs.nav-justified { + width: 100%; +} +/* line 163, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_navs.scss */ +.nav-justified > li, .nav-tabs.nav-justified > li { + float: none; +} +/* line 165, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_navs.scss */ +.nav-justified > li > a, .nav-tabs.nav-justified > li > a { + text-align: center; + margin-bottom: 5px; +} +/* line 171, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_navs.scss */ +.nav-justified > .dropdown .dropdown-menu { + top: auto; + left: auto; +} +@media (min-width: 768px) { + /* line 177, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_navs.scss */ + .nav-justified > li, .nav-tabs.nav-justified > li { + display: table-cell; + width: 1%; + } + /* line 180, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_navs.scss */ + .nav-justified > li > a, .nav-tabs.nav-justified > li > a { + margin-bottom: 0; + } +} + +/* line 190, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_navs.scss */ +.nav-tabs-justified, .nav-tabs.nav-justified { + border-bottom: 0; +} +/* line 193, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_navs.scss */ +.nav-tabs-justified > li > a, .nav-tabs.nav-justified > li > a { + margin-right: 0; + border-radius: 4px; +} +/* line 199, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_navs.scss */ +.nav-tabs-justified > .active > a, .nav-tabs.nav-justified > .active > a, +.nav-tabs-justified > .active > a:hover, +.nav-tabs.nav-justified > .active > a:hover, +.nav-tabs-justified > .active > a:focus, +.nav-tabs.nav-justified > .active > a:focus { + border: 1px solid #ddd; +} +@media (min-width: 768px) { + /* line 206, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_navs.scss */ + .nav-tabs-justified > li > a, .nav-tabs.nav-justified > li > a { + border-bottom: 1px solid #ddd; + border-radius: 4px 4px 0 0; + } + /* line 210, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_navs.scss */ + .nav-tabs-justified > .active > a, .nav-tabs.nav-justified > .active > a, + .nav-tabs-justified > .active > a:hover, + .nav-tabs.nav-justified > .active > a:hover, + .nav-tabs-justified > .active > a:focus, + .nav-tabs.nav-justified > .active > a:focus { + border-bottom-color: transparent; + } +} + +/* line 224, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_navs.scss */ +.tab-content > .tab-pane { + display: none; +} +/* line 227, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_navs.scss */ +.tab-content > .active { + display: block; +} + +/* line 237, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_navs.scss */ +.nav-tabs .dropdown-menu { + margin-top: -1px; + border-top-right-radius: 0; + border-top-left-radius: 0; +} + +/* line 5, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_labels.scss */ +.label { + display: inline; + padding: .2em .6em .3em; + font-size: 75%; + font-weight: bold; + line-height: 1; + color: white; + text-align: center; + white-space: nowrap; + vertical-align: baseline; + border-radius: .25em; +} +/* line 20, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_labels.scss */ +.label:empty { + display: none; +} +/* line 25, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_labels.scss */ +.btn .label { + position: relative; + top: -1px; +} + +/* line 33, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_labels.scss */ +a.label:hover, a.label:focus { + color: white; + text-decoration: none; + cursor: pointer; +} + +/* line 44, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_labels.scss */ +.label-default { + background-color: #999999; +} +/* line 7, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_labels.scss */ +.label-default[href]:hover, .label-default[href]:focus { + background-color: gray; +} + +/* line 48, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_labels.scss */ +.label-primary { + background-color: #00a79d; +} +/* line 7, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_labels.scss */ +.label-primary[href]:hover, .label-primary[href]:focus { + background-color: #00746d; +} + +/* line 52, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_labels.scss */ +.label-success { + background-color: #5cb85c; +} +/* line 7, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_labels.scss */ +.label-success[href]:hover, .label-success[href]:focus { + background-color: #449d44; +} + +/* line 56, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_labels.scss */ +.label-info { + background-color: #5bc0de; +} +/* line 7, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_labels.scss */ +.label-info[href]:hover, .label-info[href]:focus { + background-color: #31b0d5; +} + +/* line 60, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_labels.scss */ +.label-warning { + background-color: #f0ad4e; +} +/* line 7, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_labels.scss */ +.label-warning[href]:hover, .label-warning[href]:focus { + background-color: #ec971f; +} + +/* line 64, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_labels.scss */ +.label-danger { + background-color: #CA7070; +} +/* line 7, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_labels.scss */ +.label-danger[href]:hover, .label-danger[href]:focus { + background-color: #bc4b4b; +} + +/* line 9, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_alerts.scss */ +.alert { + padding: 15px; + margin-bottom: 24px; + border: 1px solid transparent; + border-radius: 0px; +} +/* line 16, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_alerts.scss */ +.alert h4 { + margin-top: 0; + color: inherit; +} +/* line 22, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_alerts.scss */ +.alert .alert-link { + font-weight: 600; +} +/* line 27, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_alerts.scss */ +.alert > p, +.alert > ul { + margin-bottom: 0; +} +/* line 31, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_alerts.scss */ +.alert > p + p { + margin-top: 5px; +} + +/* line 40, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_alerts.scss */ +.alert-dismissable, +.alert-dismissible { + padding-right: 35px; +} +/* line 45, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_alerts.scss */ +.alert-dismissable .close, +.alert-dismissible .close { + position: relative; + top: -2px; + right: -21px; + color: inherit; +} + +/* line 57, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_alerts.scss */ +.alert-success { + background-color: #AFD79B; + border-color: #165450; + color: #165450; +} +/* line 8, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_alerts.scss */ +.alert-success hr { + border-top-color: #11403d; +} +/* line 11, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_alerts.scss */ +.alert-success .alert-link { + color: #0b2c2a; +} + +/* line 60, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_alerts.scss */ +.alert-info { + background-color: #c3f4ff; + border-color: #8AC0C4; + color: #1a739e; +} +/* line 8, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_alerts.scss */ +.alert-info hr { + border-top-color: #79b7bb; +} +/* line 11, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_alerts.scss */ +.alert-info .alert-link { + color: #135372; +} + +/* line 63, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_alerts.scss */ +.alert-warning { + background-color: #F9F3C3; + border-color: #B59033; + color: #B59033; +} +/* line 8, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_alerts.scss */ +.alert-warning hr { + border-top-color: #a1802d; +} +/* line 11, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_alerts.scss */ +.alert-warning .alert-link { + color: #8d7028; +} + +/* line 66, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_alerts.scss */ +.alert-danger { + background-color: #febfc1; + border-color: #febfc1; + color: #b31612; +} +/* line 8, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_alerts.scss */ +.alert-danger hr { + border-top-color: #fea6a9; +} +/* line 11, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_alerts.scss */ +.alert-danger .alert-link { + color: #85100d; +} + +@-webkit-keyframes progress-bar-stripes { + from { + background-position: 40px 0; + } + to { + background-position: 0 0; + } +} +@keyframes progress-bar-stripes { + from { + background-position: 40px 0; + } + to { + background-position: 0 0; + } +} +/* line 27, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_progress-bars.scss */ +.progress { + overflow: hidden; + height: 24px; + margin-bottom: 24px; + background-color: #f5f5f5; + border-radius: 4px; + -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); + box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); +} + +/* line 37, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_progress-bars.scss */ +.progress-bar { + float: left; + width: 0%; + height: 100%; + font-size: 14px; + line-height: 24px; + color: #fff; + text-align: center; + background-color: #1b92cb; + -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15); + box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15); + -webkit-transition: width 0.6s ease; + -o-transition: width 0.6s ease; + transition: width 0.6s ease; +} + +/* line 55, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_progress-bars.scss */ +.progress-striped .progress-bar, +.progress-bar-striped { + background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0)); + background-size: 40px 40px; +} + +/* line 65, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_progress-bars.scss */ +.progress.active .progress-bar, +.progress-bar.active { + -webkit-animation: progress-bar-stripes 2s linear infinite; + -o-animation: progress-bar-stripes 2s linear infinite; + animation: progress-bar-stripes 2s linear infinite; +} + +/* line 72, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_progress-bars.scss */ +.progress-bar[aria-valuenow="1"], .progress-bar[aria-valuenow="2"] { + min-width: 30px; +} +/* line 77, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_progress-bars.scss */ +.progress-bar[aria-valuenow="0"] { + color: #999999; + min-width: 30px; + background-color: transparent; + background-image: none; + box-shadow: none; +} + +/* line 91, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_progress-bars.scss */ +.progress-bar-success { + background-color: #5cb85c; +} +/* line 7, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_progress-bar.scss */ +.progress-striped .progress-bar-success { + background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0)); +} + +/* line 95, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_progress-bars.scss */ +.progress-bar-info { + background-color: #5bc0de; +} +/* line 7, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_progress-bar.scss */ +.progress-striped .progress-bar-info { + background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0)); +} + +/* line 99, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_progress-bars.scss */ +.progress-bar-warning { + background-color: #f0ad4e; +} +/* line 7, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_progress-bar.scss */ +.progress-striped .progress-bar-warning { + background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0)); +} + +/* line 103, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_progress-bars.scss */ +.progress-bar-danger { + background-color: #CA7070; +} +/* line 7, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_progress-bar.scss */ +.progress-striped .progress-bar-danger { + background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0)); +} + +/* line 10, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_media.scss */ +.media, +.media-body { + overflow: hidden; + zoom: 1; +} + +/* line 17, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_media.scss */ +.media, +.media .media { + margin-top: 15px; +} + +/* line 21, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_media.scss */ +.media:first-child { + margin-top: 0; +} + +/* line 26, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_media.scss */ +.media-object { + display: block; +} + +/* line 31, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_media.scss */ +.media-heading { + margin: 0 0 5px; +} + +/* line 40, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_media.scss */ +.media > .pull-left { + margin-right: 10px; +} +/* line 43, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_media.scss */ +.media > .pull-right { + margin-left: 10px; +} + +/* line 53, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_media.scss */ +.media-list { + padding-left: 0; + list-style: none; +} + +/* line 10, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_list-group.scss */ +.list-group { + margin-bottom: 20px; + padding-left: 0; +} + +/* line 21, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_list-group.scss */ +.list-group-item { + position: relative; + display: block; + padding: 10px 15px; + margin-bottom: -1px; + background-color: transparent; + border: 1px solid #ddd; +} +/* line 31, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_list-group.scss */ +.list-group-item:first-child { + border-top-right-radius: 0; + border-top-left-radius: 0; +} +/* line 34, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_list-group.scss */ +.list-group-item:last-child { + margin-bottom: 0; + border-bottom-right-radius: 0; + border-bottom-left-radius: 0; +} +/* line 40, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_list-group.scss */ +.list-group-item > .badge { + float: right; +} +/* line 43, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_list-group.scss */ +.list-group-item > .badge + .badge { + margin-right: 5px; +} + +/* line 54, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_list-group.scss */ +a.list-group-item { + color: #555; +} +/* line 57, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_list-group.scss */ +a.list-group-item .list-group-item-heading { + color: #333; +} +/* line 62, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_list-group.scss */ +a.list-group-item:hover, a.list-group-item:focus { + text-decoration: none; + color: #555; + background-color: #f5f5f5; +} + +/* line 72, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_list-group.scss */ +.list-group-item.disabled, .list-group-item.disabled:hover, .list-group-item.disabled:focus { + background-color: #eeeeee; + color: #999999; +} +/* line 79, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_list-group.scss */ +.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; +} +/* line 82, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_list-group.scss */ +.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; +} +/* line 88, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_list-group.scss */ +.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; +} +/* line 97, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_list-group.scss */ +.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; +} +/* line 102, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_list-group.scss */ +.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; +} + +/* line 4, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_list-group.scss */ +.list-group-item-success { + color: #d4d9d9; + background-color: #686868; +} + +/* line 11, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_list-group.scss */ +a.list-group-item-success { + color: #d4d9d9; +} +/* line 14, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_list-group.scss */ +a.list-group-item-success .list-group-item-heading { + color: inherit; +} +/* line 18, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_list-group.scss */ +a.list-group-item-success:hover, a.list-group-item-success:focus { + color: #d4d9d9; + background-color: #5b5b5b; +} +/* line 23, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_list-group.scss */ +a.list-group-item-success.active, a.list-group-item-success.active:hover, a.list-group-item-success.active:focus { + color: #fff; + background-color: #d4d9d9; + border-color: #d4d9d9; +} + +/* line 4, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_list-group.scss */ +.list-group-item-info { + color: #8e8837; + background-color: #e2df80; +} + +/* line 11, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_list-group.scss */ +a.list-group-item-info { + color: #8e8837; +} +/* line 14, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_list-group.scss */ +a.list-group-item-info .list-group-item-heading { + color: inherit; +} +/* line 18, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_list-group.scss */ +a.list-group-item-info:hover, a.list-group-item-info:focus { + color: #8e8837; + background-color: #ddda6b; +} +/* line 23, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_list-group.scss */ +a.list-group-item-info.active, a.list-group-item-info.active:hover, a.list-group-item-info.active:focus { + color: #fff; + background-color: #8e8837; + border-color: #8e8837; +} + +/* line 4, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_list-group.scss */ +.list-group-item-warning { + color: #B59033; + background-color: #F9F3C3; +} + +/* line 11, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_list-group.scss */ +a.list-group-item-warning { + color: #B59033; +} +/* line 14, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_list-group.scss */ +a.list-group-item-warning .list-group-item-heading { + color: inherit; +} +/* line 18, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_list-group.scss */ +a.list-group-item-warning:hover, a.list-group-item-warning:focus { + color: #B59033; + background-color: #f7eeac; +} +/* line 23, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_list-group.scss */ +a.list-group-item-warning.active, a.list-group-item-warning.active:hover, a.list-group-item-warning.active:focus { + color: #fff; + background-color: #B59033; + border-color: #B59033; +} + +/* line 4, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_list-group.scss */ +.list-group-item-danger { + color: #ff434c; + background-color: #febfc1; +} + +/* line 11, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_list-group.scss */ +a.list-group-item-danger { + color: #ff434c; +} +/* line 14, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_list-group.scss */ +a.list-group-item-danger .list-group-item-heading { + color: inherit; +} +/* line 18, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_list-group.scss */ +a.list-group-item-danger:hover, a.list-group-item-danger:focus { + color: #ff434c; + background-color: #fea6a9; +} +/* line 23, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_list-group.scss */ +a.list-group-item-danger.active, a.list-group-item-danger.active:hover, a.list-group-item-danger.active:focus { + color: #fff; + background-color: #ff434c; + border-color: #ff434c; +} + +/* line 124, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_list-group.scss */ +.list-group-item-heading { + margin-top: 0; + margin-bottom: 5px; +} + +/* line 128, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_list-group.scss */ +.list-group-item-text { + margin-bottom: 0; + line-height: 1.3; +} + +/* line 7, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_panels.scss */ +.panel { + margin-bottom: 24px; + border: 1px solid transparent; + border-radius: 0; + -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05); + box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05); +} + +/* line 16, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_panels.scss */ +.panel-body { + padding: 15px; +} +/* line 14, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_clearfix.scss */ +.panel-body:before, .panel-body:after { + content: " "; + display: table; +} +/* line 19, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_clearfix.scss */ +.panel-body:after { + clear: both; +} + +/* line 22, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_panels.scss */ +.panel-heading { + padding: 10px 15px; + border-bottom: 1px solid transparent; + border-top-right-radius: -1; + border-top-left-radius: -1; +} +/* line 27, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_panels.scss */ +.panel-heading > .dropdown .dropdown-toggle { + color: inherit; +} + +/* line 33, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_panels.scss */ +.panel-title { + margin-top: 0; + margin-bottom: 0; + font-size: 18px; + color: inherit; +} +/* line 39, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_panels.scss */ +.panel-title > a { + color: inherit; +} + +/* line 45, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_panels.scss */ +.panel-footer { + padding: 10px 15px; + background-color: transparent; + border-top: 1px solid transparent; + border-bottom-right-radius: -1; + border-bottom-left-radius: -1; +} + +/* line 59, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_panels.scss */ +.panel > .list-group { + margin-bottom: 0; +} +/* line 62, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_panels.scss */ +.panel > .list-group .list-group-item { + border-width: 1px 0; + border-radius: 0; +} +/* line 69, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_panels.scss */ +.panel > .list-group:first-child .list-group-item:first-child { + border-top: 0; + border-top-right-radius: -1; + border-top-left-radius: -1; +} +/* line 76, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_panels.scss */ +.panel > .list-group:last-child .list-group-item:last-child { + border-bottom: 0; + border-bottom-right-radius: -1; + border-bottom-left-radius: -1; +} + +/* line 85, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_panels.scss */ +.panel-heading + .list-group .list-group-item:first-child { + border-top-width: 0; +} + +/* line 89, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_panels.scss */ +.list-group + .panel-footer { + border-top-width: 0; +} + +/* line 99, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_panels.scss */ +.panel > .table, +.panel > .table-responsive > .table, +.panel > .panel-collapse > .table { + margin-bottom: 0; +} +/* line 105, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_panels.scss */ +.panel > .table:first-child, +.panel > .table-responsive:first-child > .table:first-child { + border-top-right-radius: -1; + border-top-left-radius: -1; +} +/* line 112, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_panels.scss */ +.panel > .table:first-child > thead:first-child > tr:first-child td:first-child, +.panel > .table:first-child > thead:first-child > tr:first-child th:first-child, +.panel > .table:first-child > tbody:first-child > tr:first-child td:first-child, +.panel > .table:first-child > tbody:first-child > tr:first-child th:first-child, +.panel > .table-responsive:first-child > .table:first-child > thead:first-child > tr:first-child td:first-child, +.panel > .table-responsive:first-child > .table:first-child > thead:first-child > tr:first-child th:first-child, +.panel > .table-responsive:first-child > .table:first-child > tbody:first-child > tr:first-child td:first-child, +.panel > .table-responsive:first-child > .table:first-child > tbody:first-child > tr:first-child th:first-child { + border-top-left-radius: -1; +} +/* line 116, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_panels.scss */ +.panel > .table:first-child > thead:first-child > tr:first-child td:last-child, +.panel > .table:first-child > thead:first-child > tr:first-child th:last-child, +.panel > .table:first-child > tbody:first-child > tr:first-child td:last-child, +.panel > .table:first-child > tbody:first-child > tr:first-child th:last-child, +.panel > .table-responsive:first-child > .table:first-child > thead:first-child > tr:first-child td:last-child, +.panel > .table-responsive:first-child > .table:first-child > thead:first-child > tr:first-child th:last-child, +.panel > .table-responsive:first-child > .table:first-child > tbody:first-child > tr:first-child td:last-child, +.panel > .table-responsive:first-child > .table:first-child > tbody:first-child > tr:first-child th:last-child { + border-top-right-radius: -1; +} +/* line 124, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_panels.scss */ +.panel > .table:last-child, +.panel > .table-responsive:last-child > .table:last-child { + border-bottom-right-radius: -1; + border-bottom-left-radius: -1; +} +/* line 131, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_panels.scss */ +.panel > .table:last-child > tbody:last-child > tr:last-child td:first-child, +.panel > .table:last-child > tbody:last-child > tr:last-child th:first-child, +.panel > .table:last-child > tfoot:last-child > tr:last-child td:first-child, +.panel > .table:last-child > tfoot:last-child > tr:last-child th:first-child, +.panel > .table-responsive:last-child > .table:last-child > tbody:last-child > tr:last-child td:first-child, +.panel > .table-responsive:last-child > .table:last-child > tbody:last-child > tr:last-child th:first-child, +.panel > .table-responsive:last-child > .table:last-child > tfoot:last-child > tr:last-child td:first-child, +.panel > .table-responsive:last-child > .table:last-child > tfoot:last-child > tr:last-child th:first-child { + border-bottom-left-radius: -1; +} +/* line 135, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_panels.scss */ +.panel > .table:last-child > tbody:last-child > tr:last-child td:last-child, +.panel > .table:last-child > tbody:last-child > tr:last-child th:last-child, +.panel > .table:last-child > tfoot:last-child > tr:last-child td:last-child, +.panel > .table:last-child > tfoot:last-child > tr:last-child th:last-child, +.panel > .table-responsive:last-child > .table:last-child > tbody:last-child > tr:last-child td:last-child, +.panel > .table-responsive:last-child > .table:last-child > tbody:last-child > tr:last-child th:last-child, +.panel > .table-responsive:last-child > .table:last-child > tfoot:last-child > tr:last-child td:last-child, +.panel > .table-responsive:last-child > .table:last-child > tfoot:last-child > tr:last-child th:last-child { + border-bottom-right-radius: -1; +} +/* line 142, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_panels.scss */ +.panel > .panel-body + .table, +.panel > .panel-body + .table-responsive { + border-top: 1px solid #ddd; +} +/* line 146, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_panels.scss */ +.panel > .table > tbody:first-child > tr:first-child th, +.panel > .table > tbody:first-child > tr:first-child td { + border-top: 0; +} +/* line 150, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_panels.scss */ +.panel > .table-bordered, +.panel > .table-responsive > .table-bordered { + border: 0; +} +/* line 157, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_panels.scss */ +.panel > .table-bordered > thead > tr > th:first-child, +.panel > .table-bordered > thead > tr > td:first-child, +.panel > .table-bordered > tbody > tr > th:first-child, +.panel > .table-bordered > tbody > tr > td:first-child, +.panel > .table-bordered > tfoot > tr > th:first-child, +.panel > .table-bordered > tfoot > tr > td:first-child, +.panel > .table-responsive > .table-bordered > thead > tr > th:first-child, +.panel > .table-responsive > .table-bordered > thead > tr > td:first-child, +.panel > .table-responsive > .table-bordered > tbody > tr > th:first-child, +.panel > .table-responsive > .table-bordered > tbody > tr > td:first-child, +.panel > .table-responsive > .table-bordered > tfoot > tr > th:first-child, +.panel > .table-responsive > .table-bordered > tfoot > tr > td:first-child { + border-left: 0; +} +/* line 161, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_panels.scss */ +.panel > .table-bordered > thead > tr > th:last-child, +.panel > .table-bordered > thead > tr > td:last-child, +.panel > .table-bordered > tbody > tr > th:last-child, +.panel > .table-bordered > tbody > tr > td:last-child, +.panel > .table-bordered > tfoot > tr > th:last-child, +.panel > .table-bordered > tfoot > tr > td:last-child, +.panel > .table-responsive > .table-bordered > thead > tr > th:last-child, +.panel > .table-responsive > .table-bordered > thead > tr > td:last-child, +.panel > .table-responsive > .table-bordered > tbody > tr > th:last-child, +.panel > .table-responsive > .table-bordered > tbody > tr > td:last-child, +.panel > .table-responsive > .table-bordered > tfoot > tr > th:last-child, +.panel > .table-responsive > .table-bordered > tfoot > tr > td:last-child { + border-right: 0; +} +/* line 170, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_panels.scss */ +.panel > .table-bordered > thead > tr:first-child > td, +.panel > .table-bordered > thead > tr:first-child > th, +.panel > .table-bordered > tbody > tr:first-child > td, +.panel > .table-bordered > tbody > tr:first-child > th, +.panel > .table-responsive > .table-bordered > thead > tr:first-child > td, +.panel > .table-responsive > .table-bordered > thead > tr:first-child > th, +.panel > .table-responsive > .table-bordered > tbody > tr:first-child > td, +.panel > .table-responsive > .table-bordered > tbody > tr:first-child > th { + border-bottom: 0; +} +/* line 179, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_panels.scss */ +.panel > .table-bordered > tbody > tr:last-child > td, +.panel > .table-bordered > tbody > tr:last-child > th, +.panel > .table-bordered > tfoot > tr:last-child > td, +.panel > .table-bordered > tfoot > tr:last-child > th, +.panel > .table-responsive > .table-bordered > tbody > tr:last-child > td, +.panel > .table-responsive > .table-bordered > tbody > tr:last-child > th, +.panel > .table-responsive > .table-bordered > tfoot > tr:last-child > td, +.panel > .table-responsive > .table-bordered > tfoot > tr:last-child > th { + border-bottom: 0; +} +/* line 186, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_panels.scss */ +.panel > .table-responsive { + border: 0; + margin-bottom: 0; +} + +/* line 198, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_panels.scss */ +.panel-group { + margin-bottom: 24px; +} +/* line 202, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_panels.scss */ +.panel-group .panel { + margin-bottom: 0; + border-radius: 0; +} +/* line 205, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_panels.scss */ +.panel-group .panel + .panel { + margin-top: 5px; +} +/* line 210, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_panels.scss */ +.panel-group .panel-heading { + border-bottom: 0; +} +/* line 212, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_panels.scss */ +.panel-group .panel-heading + .panel-collapse > .panel-body { + border-top: 1px solid transparent; +} +/* line 216, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_panels.scss */ +.panel-group .panel-footer { + border-top: 0; +} +/* line 218, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_panels.scss */ +.panel-group .panel-footer + .panel-collapse .panel-body { + border-bottom: 1px solid transparent; +} + +/* line 226, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_panels.scss */ +.panel-default { + border-color: transparent; +} +/* line 6, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_panels.scss */ +.panel-default > .panel-heading { + color: #686868; + background-color: none; + border-color: transparent; +} +/* line 11, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_panels.scss */ +.panel-default > .panel-heading + .panel-collapse > .panel-body { + border-top-color: transparent; +} +/* line 14, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_panels.scss */ +.panel-default > .panel-heading .badge { + color: none; + background-color: #686868; +} +/* line 20, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_panels.scss */ +.panel-default > .panel-footer + .panel-collapse > .panel-body { + border-bottom-color: transparent; +} + +/* line 229, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_panels.scss */ +.panel-primary { + border-color: #1b92cb; +} +/* line 6, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_panels.scss */ +.panel-primary > .panel-heading { + color: #fff; + background-color: #1b92cb; + border-color: #1b92cb; +} +/* line 11, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_panels.scss */ +.panel-primary > .panel-heading + .panel-collapse > .panel-body { + border-top-color: #1b92cb; +} +/* line 14, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_panels.scss */ +.panel-primary > .panel-heading .badge { + color: #1b92cb; + background-color: #fff; +} +/* line 20, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_panels.scss */ +.panel-primary > .panel-footer + .panel-collapse > .panel-body { + border-bottom-color: #1b92cb; +} + +/* line 232, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_panels.scss */ +.panel-success { + border-color: #d4d9d9; +} +/* line 6, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_panels.scss */ +.panel-success > .panel-heading { + color: #d4d9d9; + background-color: #686868; + border-color: #d4d9d9; +} +/* line 11, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_panels.scss */ +.panel-success > .panel-heading + .panel-collapse > .panel-body { + border-top-color: #d4d9d9; +} +/* line 14, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_panels.scss */ +.panel-success > .panel-heading .badge { + color: #686868; + background-color: #d4d9d9; +} +/* line 20, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_panels.scss */ +.panel-success > .panel-footer + .panel-collapse > .panel-body { + border-bottom-color: #d4d9d9; +} + +/* line 235, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_panels.scss */ +.panel-info { + border-color: #c0b84d; +} +/* line 6, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_panels.scss */ +.panel-info > .panel-heading { + color: #8e8837; + background-color: #e2df80; + border-color: #c0b84d; +} +/* line 11, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_panels.scss */ +.panel-info > .panel-heading + .panel-collapse > .panel-body { + border-top-color: #c0b84d; +} +/* line 14, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_panels.scss */ +.panel-info > .panel-heading .badge { + color: #e2df80; + background-color: #8e8837; +} +/* line 20, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_panels.scss */ +.panel-info > .panel-footer + .panel-collapse > .panel-body { + border-bottom-color: #c0b84d; +} + +/* line 238, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_panels.scss */ +.panel-warning { + border-color: #B59033; +} +/* line 6, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_panels.scss */ +.panel-warning > .panel-heading { + color: #B59033; + background-color: #F9F3C3; + border-color: #B59033; +} +/* line 11, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_panels.scss */ +.panel-warning > .panel-heading + .panel-collapse > .panel-body { + border-top-color: #B59033; +} +/* line 14, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_panels.scss */ +.panel-warning > .panel-heading .badge { + color: #F9F3C3; + background-color: #B59033; +} +/* line 20, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_panels.scss */ +.panel-warning > .panel-footer + .panel-collapse > .panel-body { + border-bottom-color: #B59033; +} + +/* line 5, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_responsive-embed.scss */ +.embed-responsive { + position: relative; + display: block; + height: 0; + padding: 0; + overflow: hidden; +} +/* line 12, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_responsive-embed.scss */ +.embed-responsive .embed-responsive-item, +.embed-responsive iframe, +.embed-responsive embed, +.embed-responsive object { + position: absolute; + top: 0; + left: 0; + bottom: 0; + height: 100%; + width: 100%; + border: 0; +} +/* line 26, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_responsive-embed.scss */ +.embed-responsive.embed-responsive-16by9 { + padding-bottom: 56.25%; +} +/* line 31, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_responsive-embed.scss */ +.embed-responsive.embed-responsive-4by3 { + padding-bottom: 75%; +} + +/* line 6, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_close.scss */ +.close { + float: right; + font-size: 24px; + font-weight: bold; + line-height: 1; + color: #000; + text-shadow: 0 1px 0 #fff; + opacity: 0.2; + filter: alpha(opacity=20); +} +/* line 15, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_close.scss */ +.close:hover, .close:focus { + color: #000; + text-decoration: none; + cursor: pointer; + opacity: 0.5; + filter: alpha(opacity=50); +} + +/* line 29, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_close.scss */ +button.close { + padding: 0; + cursor: pointer; + background: transparent; + border: 0; + -webkit-appearance: none; +} + +/* line 11, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_modals.scss */ +.modal-open { + overflow: hidden; +} + +/* line 16, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_modals.scss */ +.modal { + display: none; + overflow: hidden; + position: fixed; + top: 0; + right: 0; + bottom: 0; + left: 0; + z-index: 1050; + -webkit-overflow-scrolling: touch; + outline: 0; +} +/* line 32, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_modals.scss */ +.modal.fade .modal-dialog { + -webkit-transform: translate3d(0, -25%, 0); + transform: translate3d(0, -25%, 0); + -webkit-transition: -webkit-transform 0.3s ease-out; + -moz-transition: -moz-transform 0.3s ease-out; + -o-transition: -o-transform 0.3s ease-out; + transition: transform 0.3s ease-out; +} +/* line 36, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_modals.scss */ +.modal.in .modal-dialog { + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); +} + +/* line 38, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_modals.scss */ +.modal-open .modal { + overflow-x: hidden; + overflow-y: auto; +} + +/* line 44, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_modals.scss */ +.modal-dialog { + position: relative; + width: auto; + margin: 10px; +} + +/* line 51, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_modals.scss */ +.modal-content { + position: relative; + background-color: #ecefef; + border: 1px solid #999; + border: 1px solid #00776d; + border-radius: 6px; + -webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5); + box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5); + background-clip: padding-box; + outline: 0; +} + +/* line 64, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_modals.scss */ +.modal-backdrop { + position: fixed; + top: 0; + right: 0; + bottom: 0; + left: 0; + z-index: 1040; + background-color: #243640; +} +/* line 73, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_modals.scss */ +.modal-backdrop.fade { + opacity: 0; + filter: alpha(opacity=0); +} +/* line 74, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_modals.scss */ +.modal-backdrop.in { + opacity: 0.8; + filter: alpha(opacity=80); +} + +/* line 79, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_modals.scss */ +.modal-header { + padding: 15px; + border-bottom: 1px solid #e0e4e5; + min-height: 16.5px; +} + +/* line 85, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_modals.scss */ +.modal-header .close { + margin-top: -2px; +} + +/* line 90, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_modals.scss */ +.modal-title { + margin: 0; + line-height: 1.5; +} + +/* line 97, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_modals.scss */ +.modal-body { + position: relative; + padding: 30px; +} + +/* line 103, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_modals.scss */ +.modal-footer { + padding: 30px; + text-align: right; + border-top: 1px solid #e0e4e5; +} +/* line 14, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_clearfix.scss */ +.modal-footer:before, .modal-footer:after { + content: " "; + display: table; +} +/* line 19, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_clearfix.scss */ +.modal-footer:after { + clear: both; +} +/* line 110, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_modals.scss */ +.modal-footer .btn + .btn { + margin-left: 5px; + margin-bottom: 0; +} +/* line 115, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_modals.scss */ +.modal-footer .btn-group .btn + .btn { + margin-left: -1px; +} +/* line 119, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_modals.scss */ +.modal-footer .btn-block + .btn-block { + margin-left: 0; +} + +/* line 125, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_modals.scss */ +.modal-scrollbar-measure { + position: absolute; + top: -9999px; + width: 50px; + height: 50px; + overflow: scroll; +} + +@media (min-width: 768px) { + /* line 136, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_modals.scss */ + .modal-dialog { + width: 600px; + margin: 30px auto; + } + + /* line 140, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_modals.scss */ + .modal-content { + -webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5); + box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5); + } + + /* line 145, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_modals.scss */ + .modal-sm { + width: 300px; + } +} +@media (min-width: 992px) { + /* line 149, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_modals.scss */ + .modal-lg { + width: 900px; + } +} +/* line 7, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_tooltip.scss */ +.tooltip { + position: absolute; + z-index: 1030; + display: block; + visibility: visible; + font-size: 14px; + line-height: 1.4; + opacity: 0; + filter: alpha(opacity=0); +} +/* line 16, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_tooltip.scss */ +.tooltip.in { + opacity: 0.9; + filter: alpha(opacity=90); +} +/* line 17, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_tooltip.scss */ +.tooltip.top { + margin-top: -3px; + padding: 5px 0; +} +/* line 18, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_tooltip.scss */ +.tooltip.right { + margin-left: 3px; + padding: 0 5px; +} +/* line 19, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_tooltip.scss */ +.tooltip.bottom { + margin-top: 3px; + padding: 5px 0; +} +/* line 20, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_tooltip.scss */ +.tooltip.left { + margin-left: -3px; + padding: 0 5px; +} + +/* line 24, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_tooltip.scss */ +.tooltip-inner { + max-width: 200px; + padding: 3px 8px; + color: #ecefef; + text-align: center; + text-decoration: none; + background-color: #424242; + border-radius: 4px; +} + +/* line 35, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_tooltip.scss */ +.tooltip-arrow { + position: absolute; + width: 0; + height: 0; + border-color: transparent; + border-style: solid; +} + +/* line 43, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_tooltip.scss */ +.tooltip.top .tooltip-arrow { + bottom: 0; + left: 50%; + margin-left: -5px; + border-width: 5px 5px 0; + border-top-color: #424242; +} +/* line 50, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_tooltip.scss */ +.tooltip.top-left .tooltip-arrow { + bottom: 0; + left: 5px; + border-width: 5px 5px 0; + border-top-color: #424242; +} +/* line 56, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_tooltip.scss */ +.tooltip.top-right .tooltip-arrow { + bottom: 0; + right: 5px; + border-width: 5px 5px 0; + border-top-color: #424242; +} +/* line 62, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_tooltip.scss */ +.tooltip.right .tooltip-arrow { + top: 50%; + left: 0; + margin-top: -5px; + border-width: 5px 5px 5px 0; + border-right-color: #424242; +} +/* line 69, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_tooltip.scss */ +.tooltip.left .tooltip-arrow { + top: 50%; + right: 0; + margin-top: -5px; + border-width: 5px 0 5px 5px; + border-left-color: #424242; +} +/* line 76, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_tooltip.scss */ +.tooltip.bottom .tooltip-arrow { + top: 0; + left: 50%; + margin-left: -5px; + border-width: 0 5px 5px; + border-bottom-color: #424242; +} +/* line 83, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_tooltip.scss */ +.tooltip.bottom-left .tooltip-arrow { + top: 0; + left: 5px; + border-width: 0 5px 5px; + border-bottom-color: #424242; +} +/* line 89, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_tooltip.scss */ +.tooltip.bottom-right .tooltip-arrow { + top: 0; + right: 5px; + border-width: 0 5px 5px; + border-bottom-color: #424242; +} + +/* line 14, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_clearfix.scss */ +.clearfix:before, .clearfix:after { + content: " "; + display: table; +} +/* line 19, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_clearfix.scss */ +.clearfix:after { + clear: both; +} + +/* line 12, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_utilities.scss */ +.center-block { + display: block; + margin-left: auto; + margin-right: auto; +} + +/* line 15, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_utilities.scss */ +.pull-right { + float: right !important; +} + +/* line 18, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_utilities.scss */ +.pull-left { + float: left !important; +} + +/* line 27, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_utilities.scss */ +.hide { + display: none !important; +} + +/* line 30, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_utilities.scss */ +.show { + display: block !important; +} + +/* line 33, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_utilities.scss */ +.invisible { + visibility: hidden; +} + +/* line 36, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_utilities.scss */ +.text-hide { + font: 0/0 a; + color: transparent; + text-shadow: none; + background-color: transparent; + border: 0; +} + +/* line 45, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_utilities.scss */ +.hidden { + display: none !important; + visibility: hidden !important; +} + +/* line 54, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_utilities.scss */ +.affix { + position: fixed; + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); +} + +@-ms-viewport { + width: device-width; +} +/* line 18, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_responsive-visibility.scss */ +.visible-xs, .visible-sm, .visible-md, .visible-lg { + display: none !important; +} + +/* line 31, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_responsive-utilities.scss */ +.visible-xs-block, +.visible-xs-inline, +.visible-xs-inline-block, +.visible-sm-block, +.visible-sm-inline, +.visible-sm-inline-block, +.visible-md-block, +.visible-md-inline, +.visible-md-inline-block, +.visible-lg-block, +.visible-lg-inline, +.visible-lg-inline-block { + display: none !important; +} + +@media (max-width: 767px) { + /* line 7, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_responsive-visibility.scss */ + .visible-xs { + display: block !important; + } + + /* line 10, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_responsive-visibility.scss */ + table.visible-xs { + display: table; + } + + /* line 11, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_responsive-visibility.scss */ + tr.visible-xs { + display: table-row !important; + } + + /* line 12, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_responsive-visibility.scss */ + th.visible-xs, + td.visible-xs { + display: table-cell !important; + } +} +@media (max-width: 767px) { + /* line 49, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_responsive-utilities.scss */ + .visible-xs-block { + display: block !important; + } +} + +@media (max-width: 767px) { + /* line 54, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_responsive-utilities.scss */ + .visible-xs-inline { + display: inline !important; + } +} + +@media (max-width: 767px) { + /* line 59, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_responsive-utilities.scss */ + .visible-xs-inline-block { + display: inline-block !important; + } +} + +@media (min-width: 768px) and (max-width: 991px) { + /* line 7, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_responsive-visibility.scss */ + .visible-sm { + display: block !important; + } + + /* line 10, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_responsive-visibility.scss */ + table.visible-sm { + display: table; + } + + /* line 11, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_responsive-visibility.scss */ + tr.visible-sm { + display: table-row !important; + } + + /* line 12, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_responsive-visibility.scss */ + th.visible-sm, + td.visible-sm { + display: table-cell !important; + } +} +@media (min-width: 768px) and (max-width: 991px) { + /* line 68, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_responsive-utilities.scss */ + .visible-sm-block { + display: block !important; + } +} + +@media (min-width: 768px) and (max-width: 991px) { + /* line 73, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_responsive-utilities.scss */ + .visible-sm-inline { + display: inline !important; + } +} + +@media (min-width: 768px) and (max-width: 991px) { + /* line 78, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_responsive-utilities.scss */ + .visible-sm-inline-block { + display: inline-block !important; + } +} + +@media (min-width: 992px) and (max-width: 1199px) { + /* line 7, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_responsive-visibility.scss */ + .visible-md { + display: block !important; + } + + /* line 10, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_responsive-visibility.scss */ + table.visible-md { + display: table; + } + + /* line 11, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_responsive-visibility.scss */ + tr.visible-md { + display: table-row !important; + } + + /* line 12, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_responsive-visibility.scss */ + th.visible-md, + td.visible-md { + display: table-cell !important; + } +} +@media (min-width: 992px) and (max-width: 1199px) { + /* line 87, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_responsive-utilities.scss */ + .visible-md-block { + display: block !important; + } +} + +@media (min-width: 992px) and (max-width: 1199px) { + /* line 92, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_responsive-utilities.scss */ + .visible-md-inline { + display: inline !important; + } +} + +@media (min-width: 992px) and (max-width: 1199px) { + /* line 97, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_responsive-utilities.scss */ + .visible-md-inline-block { + display: inline-block !important; + } +} + +@media (min-width: 1200px) { + /* line 7, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_responsive-visibility.scss */ + .visible-lg { + display: block !important; + } + + /* line 10, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_responsive-visibility.scss */ + table.visible-lg { + display: table; + } + + /* line 11, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_responsive-visibility.scss */ + tr.visible-lg { + display: table-row !important; + } + + /* line 12, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_responsive-visibility.scss */ + th.visible-lg, + td.visible-lg { + display: table-cell !important; + } +} +@media (min-width: 1200px) { + /* line 106, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_responsive-utilities.scss */ + .visible-lg-block { + display: block !important; + } +} + +@media (min-width: 1200px) { + /* line 111, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_responsive-utilities.scss */ + .visible-lg-inline { + display: inline !important; + } +} + +@media (min-width: 1200px) { + /* line 116, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_responsive-utilities.scss */ + .visible-lg-inline-block { + display: inline-block !important; + } +} + +@media (max-width: 767px) { + /* line 18, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_responsive-visibility.scss */ + .hidden-xs { + display: none !important; + } +} +@media (min-width: 768px) and (max-width: 991px) { + /* line 18, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_responsive-visibility.scss */ + .hidden-sm { + display: none !important; + } +} +@media (min-width: 992px) and (max-width: 1199px) { + /* line 18, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_responsive-visibility.scss */ + .hidden-md { + display: none !important; + } +} +@media (min-width: 1200px) { + /* line 18, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_responsive-visibility.scss */ + .hidden-lg { + display: none !important; + } +} +/* line 18, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_responsive-visibility.scss */ +.visible-print { + display: none !important; +} + +@media print { + /* line 7, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_responsive-visibility.scss */ + .visible-print { + display: block !important; + } + + /* line 10, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_responsive-visibility.scss */ + table.visible-print { + display: table; + } + + /* line 11, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_responsive-visibility.scss */ + tr.visible-print { + display: table-row !important; + } + + /* line 12, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_responsive-visibility.scss */ + th.visible-print, + td.visible-print { + display: table-cell !important; + } +} +/* line 150, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_responsive-utilities.scss */ +.visible-print-block { + display: none !important; +} +@media print { + /* line 150, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_responsive-utilities.scss */ + .visible-print-block { + display: block !important; + } +} + +/* line 157, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_responsive-utilities.scss */ +.visible-print-inline { + display: none !important; +} +@media print { + /* line 157, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_responsive-utilities.scss */ + .visible-print-inline { + display: inline !important; + } +} + +/* line 164, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_responsive-utilities.scss */ +.visible-print-inline-block { + display: none !important; +} +@media print { + /* line 164, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_responsive-utilities.scss */ + .visible-print-inline-block { + display: inline-block !important; + } +} + +@media print { + /* line 18, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_responsive-visibility.scss */ + .hidden-print { + display: none !important; + } +} +/* + * 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)); + * + */ +/** +* @desc Create spacing classes and default spacing. +* @name Whitespace +* @author Fiona +* @tested Safari, Chrome, Firefox, IE7-9 +* @requires _variables.scss +*/ +/* ========================================================================== + Default spacing + ========================================================================== */ +/* line 21, ../../src/oocss/whitespace/_whitespace.scss */ +table h1, table h2, table h3, table h4, table h5, table h6, table p, table ul, table ol, table dl, table blockquote, table .media, table pre { + margin-top: 0; + margin-bottom: 0; +} + +/* * + * debug default spacing + * set $debug-spacing to true to visualize spacing and positioning + */ +/* ========================================================================== + 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) + */ +/* + * 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); + * + */ +/*pending +--- +title: No JavaScript +name: no_js +categories: + - Utilities + - JavaScript + - All +--- +### Javascript + +Try disabling js and rendering this page. + +```haml_example +%h3.invisible-no-js Won't show if browser doesn't support JS. +``` + +*/ +/* line 21, ../../src/pivotal-ui/components/utils.scss */ +.no-js .invisible-no-js { + visibility: hidden; +} + +/* line 27, ../../src/pivotal-ui/components/utils.scss */ +[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak { + display: none !important; +} + +/*doc +--- +title: Responsive Utilities +name: responsive_utilities +categories: + - Utilities + - All +--- + +Use a single or combination of the available classes for toggling content across viewport breakpoints. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ Extra small devices + Phones (<768px) + + Small devices + Tablets (≥768px) + + Medium devices + Desktops (≥992px) + + Large devices + Desktops (≥1200px) +
.visible-xs-*Visible
.visible-sm-*Visible
.visible-md-*Visible
.visible-lg-*Visible
.hidden-xsVisibleVisibleVisible
.hidden-smVisibleVisibleVisible
.hidden-mdVisibleVisibleVisible
.hidden-lgVisibleVisibleVisible
+ + +The `.visible-*-*` classes for each breakpoint come in three variations, one for each CSS display property value listed below. + + + + + + + + + + + + + + + + + + + + + + +
Group of classesCSS display
.visible-*-blockdisplay: block;
.visible-*-inlinedisplay: inline;
.visible-*-inline-blockdisplay: inline-block;
+ +So, for extra small (`xs`) screens for example, the available `.visible-*-*` classes are: + +- `.visible-xs-block` +- `.visible-xs-inline` +- `.visible-xs-inline-block` + +*/ +/*doc +--- +title: Print +name: print +categories: + - Utilities + - All +--- + +Similar to the regular responsive classes, use these for toggling content for print. + + + + + + + + + + + + + + + + + + + + + +
ClassesBrowserPrint
+ .visible-print-block
+ .visible-print-inline
+ .visible-print-inline-block + 		Visible
.hidden-printVisible
+ + +*/ +/*doc +--- +title: Alignment +name: alignment +categories: + - Utilities + - All +--- + +The following classes can be used to for horizontal alignment. + +```html_example_table +

+ .txt-l +

+ +

+ .txt-c +

+ +

+ .txt-r +

+``` + +On `display: inline` and `display: table-cell` elements, +the following classes can be used to for vertical alignment. + +```html_example + + + + + + + +
+ .txt-t + + .txt-m + + .txt-b + + Distillery trust fund Neutra fingerstache plaid messenger bag. + Try-hard health goth PBR Helvetica hashtag. Try-hard narwhal letterpress, + crucifix selfies trust fund swag mustache quinoa chambray iPhone. +
+``` + +If you need to vertically align an element that does not fit into those display types, +take a look at [vertical alignment][vertical_align]. + +*/ +/* line 254, ../../src/pivotal-ui/components/utils.scss */ +.txt-c, table .txt-c, table tr .txt-c, table tr td.txt-c { + text-align: center; +} + +/* line 258, ../../src/pivotal-ui/components/utils.scss */ +.txt-l, table .txt-l, table tr .txt-l, table tr td.txt-l { + text-align: left; +} + +/* line 262, ../../src/pivotal-ui/components/utils.scss */ +.txt-r, table .txt-r, table tr .txt-r, table tr td.txt-r { + text-align: right; +} + +/* line 266, ../../src/pivotal-ui/components/utils.scss */ +.txt-t, table .txt-t, table tr .txt-t, table tr td.txt-t, table tr th.txt-t { + vertical-align: top; +} + +/* line 270, ../../src/pivotal-ui/components/utils.scss */ +.txt-b, table .txt-b, table tr .txt-b, table tr td.txt-b, table tr th.txt-b { + vertical-align: bottom; +} + +/* line 274, ../../src/pivotal-ui/components/utils.scss */ +.txt-m, table .txt-m, table tr .txt-m, table tr td.txt-m, table tr th.txt-m { + vertical-align: middle; +} + +/*doc +--- +title: Colors +name: color +categories: + - Elements + - Utilities + - All +--- + +Our color pallet is composed of several different colors. At any given point in captures the current +evolution of our design and likely includes old and new colors. Whenever possible, evolve the old +colors rather than adding new ones. + +
+
+ Sass variables should only be used in variables.css.scss. +
+

+ They should never be used directly when building components, because it makes + it very hard to change the values later if you can't tell how they might have been used. + You should define your own variables that use these colors in variables.css.scss. +

+
+ +This example shows proper use of Sass variables. + +``` +$tabs-active-bg-color: $gray-2; +``` + +
+
+
+
+
+
    +
  • $gray-1
    • +
  • .bg-neutral-1
    • +
  • .type-neutral-1
    • +
+
+
+
+ +
+
+
+
+
    +
  • $gray-2
    • +
  • .bg-neutral-2
    • +
  • .type-neutral-2
    • +
+
+
+
+
+
+
+
+
    +
  • $gray-3
    • +
  • .bg-neutral-3
    • +
  • .type-neutral-3
    • +
+
+
+
+
+
+
+
+
    +
  • $gray-4
    • +
  • .bg-neutral-4
    • +
  • .type-neutral-4
    • +
+
+
+
+
+
+
+
+
    +
  • $gray-5
    • +
  • .bg-neutral-5
    • +
  • .type-neutral-5
    • +
+
+
+
+
+
+
+
+
    +
  • $gray-6
    • +
  • .bg-neutral-6
    • +
  • .type-neutral-6
    • +
+
+
+
+
+
+
+
+
    +
  • $gray-7
    • +
  • .bg-neutral-7
    • +
  • .type-neutral-7
    • +
+
+
+
+
+
+
+
+
    +
  • $gray-8
    • +
  • .bg-neutral-8
    • +
  • .type-neutral-8
    • +
+
+
+
+
+
+
+
+
    +
  • $gray-9
    • +
  • .bg-neutral-9
    • +
  • .type-neutral-9
    • +
+
+
+
+
+
+
+
+
    +
  • $gray-10
    • +
  • .bg-neutral-10
    • +
  • .type-neutral-10
    • +
+
+
+
+
+
+
+
+
    +
  • $gray-11
    • +
  • .bg-neutral-11
    • +
  • .type-neutral-11
    • +
+
+
+
+
+
+
+
+
+
+
    +
  • $dark-1
    • +
  • .bg-dark-1
    • +
  • .type-dark-1
    • +
+
+
+
+
+
+
+
+
    +
  • $dark-2
    • +
  • .bg-dark-2
    • +
  • .type-dark-2
    • +
+
+
+
+
+
+
+
+
    +
  • $dark-3
    • +
  • .bg-dark-3
    • +
  • .type-dark-3
    • +
+
+
+
+
+
+
+
+
+
+
    +
  • $brand-1
    • +
  • .bg-brand-1
    • +
  • .type-brand-1
    • +
+
+
+
+
+
+
+
+
    +
  • $brand-2
    • +
  • .bg-brand-2
    • +
  • .type-brand-2
    • +
+
+
+
+
+
+
+
+
    +
  • $brand-3
    • +
  • .bg-brand-3
    • +
  • .type-brand-3
    • +
+
+
+
+
+
+
+
+
    +
  • $brand-4
    • +
  • .bg-brand-4
    • +
  • .type-brand-4
    • +
+
+
+
+
+
+
+
+
    +
  • $brand-5
    • +
  • .bg-brand-5
    • +
  • .type-brand-5
    • +
+
+
+
+
+
+
+
+
+
+
    +
  • $accent-5
    • +
  • .bg-accent-5
    • +
  • .type-accent-5
    • +
+
+
+
+
+
+
+
+
    +
  • $accent-2
    • +
  • .bg-accent-2
    • +
  • .type-accent-2
    • +
+
+
+
+
+
+
+
+
    +
  • $accent-3
    • +
  • .bg-accent-3
    • +
  • .type-accent-3
    • +
+
+
+
+
+
+
+
+
    +
  • $accent-4
    • +
  • .bg-accent-4
    • +
  • .type-accent-4
    • +
+
+
+
+
+
+
+
+
    +
  • $accent-5
    • +
  • .bg-accent-5
    • +
  • .type-accent-5
    • +
+
+
+
+
+
+
+
+
+
+
    +
  • $error-1
    • +
  • .bg-error-1
    • +
  • .type-error-1
    • +
+
+
+
+
+
+
+
+
    +
  • $error-2
    • +
  • .bg-error-2
    • +
  • .type-error-2
    • +
+
+
+
+
+
+
+
+
    +
  • $error-3
    • +
  • .bg-error-3
    • +
  • .type-error-3
    • +
+
+
+
+
+
+
+
+
    +
  • $error-4
    • +
  • .bg-error-4
    • +
  • .type-error-4
    • +
+
+
+
+
+ +
+
+
+
+
+
    +
  • $warn-1
    • +
  • .bg-warn-1
    • +
  • .type-warn-1
    • +
+
+
+
+
+
+
+
+
    +
  • $warn-2
    • +
  • .bg-warn-2
    • +
  • .type-warn-2
    • +
+
+
+
+
+
+
+
+
    +
  • $warn-3
    • +
  • .bg-warn-3
    • +
  • .type-warn-3
    • +
+
+
+
+
+ +
+
+
+
+
$green-1
+
+
+
+
+
+
$green-2
+
+
+
+ +*/ +/* line 436, ../../src/pivotal-ui/components/colors.scss */ +.bg-neutral-1 { + background-color: #282828; +} + +/* line 439, ../../src/pivotal-ui/components/colors.scss */ +.bg-neutral-2 { + background-color: #424242; +} + +/* line 442, ../../src/pivotal-ui/components/colors.scss */ +.bg-neutral-3 { + background-color: #686868; +} + +/* line 445, ../../src/pivotal-ui/components/colors.scss */ +.bg-neutral-4 { + background-color: #8d8e8e; +} + +/* line 448, ../../src/pivotal-ui/components/colors.scss */ +.bg-neutral-5 { + background-color: #b4b4b4; +} + +/* line 451, ../../src/pivotal-ui/components/colors.scss */ +.bg-neutral-6 { + background-color: #c3c5c7; +} + +/* line 454, ../../src/pivotal-ui/components/colors.scss */ +.bg-neutral-7 { + background-color: #d4d9d9; +} + +/* line 457, ../../src/pivotal-ui/components/colors.scss */ +.bg-neutral-8 { + background-color: #e0e4e5; +} + +/* line 460, ../../src/pivotal-ui/components/colors.scss */ +.bg-neutral-9 { + background-color: #ecefef; +} + +/* line 463, ../../src/pivotal-ui/components/colors.scss */ +.bg-neutral-10 { + background-color: #F8F8F8; +} + +/* line 466, ../../src/pivotal-ui/components/colors.scss */ +.bg-neutral-11 { + background-color: white; +} + +/* line 471, ../../src/pivotal-ui/components/colors.scss */ +.bg-brand-1 { + background-color: #025a53; +} + +/* line 475, ../../src/pivotal-ui/components/colors.scss */ +.bg-brand-2 { + background-color: #00776d; +} + +/* line 479, ../../src/pivotal-ui/components/colors.scss */ +.bg-brand-3 { + background-color: #00a79d; +} + +/* line 483, ../../src/pivotal-ui/components/colors.scss */ +.bg-brand-4 { + background-color: #92d0c0; +} + +/* line 487, ../../src/pivotal-ui/components/colors.scss */ +.bg-brand-5 { + background-color: #71ffda; +} + +/* line 493, ../../src/pivotal-ui/components/colors.scss */ +.bg-accent-1 { + background-color: #1a739e; +} + +/* line 497, ../../src/pivotal-ui/components/colors.scss */ +.bg-accent-2 { + background-color: #2185c5; +} + +/* line 501, ../../src/pivotal-ui/components/colors.scss */ +.bg-accent-3 { + background-color: #49a8d5; +} + +/* line 505, ../../src/pivotal-ui/components/colors.scss */ +.bg-accent-4 { + background-color: #a7c9e0; +} + +/* line 509, ../../src/pivotal-ui/components/colors.scss */ +.bg-accent-5 { + background-color: #c3f4ff; +} + +/* line 515, ../../src/pivotal-ui/components/colors.scss */ +.bg-dark-1 { + background-color: #243640; +} + +/* line 519, ../../src/pivotal-ui/components/colors.scss */ +.bg-dark-2 { + background-color: #3f484f; +} + +/* line 523, ../../src/pivotal-ui/components/colors.scss */ +.bg-dark-3 { + background-color: #525c63; +} + +/* line 528, ../../src/pivotal-ui/components/colors.scss */ +.bg-error-1 { + background-color: #b31612; +} + +/* line 532, ../../src/pivotal-ui/components/colors.scss */ +.bg-error-2 { + background-color: #eb3d46; +} + +/* line 536, ../../src/pivotal-ui/components/colors.scss */ +.bg-error-3 { + background-color: #ff434c; +} + +/* line 540, ../../src/pivotal-ui/components/colors.scss */ +.bg-error-4 { + background-color: #febfc1; +} + +/* line 545, ../../src/pivotal-ui/components/colors.scss */ +.bg-warn-1 { + background-color: #B59033; +} + +/* line 549, ../../src/pivotal-ui/components/colors.scss */ +.bg-warn-2 { + background-color: #F1C148; +} + +/* line 553, ../../src/pivotal-ui/components/colors.scss */ +.bg-warn-3 { + background-color: #F9F3C3; +} + +/* line 558, ../../src/pivotal-ui/components/colors.scss */ +.bg-success-1 { + background-color: #165450; +} + +/* line 562, ../../src/pivotal-ui/components/colors.scss */ +.bg-success-2 { + background-color: #AFD79B; +} + +/*doc +--- +title: Shadows & Glows +name: color_shadows_glows +parent: color +--- +
+
+
+
+
+
+
$shadow-1
+
+
+
+
+
+
$shadow-2
+
+
+
+
+
+
$shadow-3
+
+
+
+
+
+
$shadow-4
+
+
+
+
+
+
$glow-1
+
+
+
+
+
+
$glow-2
+
+
+
+
+
+
$glow-3
+
+
+
+
+
+
$glow-4
+
+
+
+
+
+
$glow-5
+
+
+
+
+
+*/ +/* line 637, ../../src/pivotal-ui/components/colors.scss */ +.bg-glow-1 { + background-color: rgba(255, 255, 255, 0.1); +} + +/* line 641, ../../src/pivotal-ui/components/colors.scss */ +.bg-glow-2 { + background-color: rgba(255, 255, 255, 0.2); +} + +/* line 645, ../../src/pivotal-ui/components/colors.scss */ +.bg-glow-3 { + background-color: rgba(255, 255, 255, 0.4); +} + +/* line 649, ../../src/pivotal-ui/components/colors.scss */ +.bg-glow-4 { + background-color: rgba(255, 255, 255, 0.6); +} + +/* line 653, ../../src/pivotal-ui/components/colors.scss */ +.bg-glow-5 { + background-color: white; +} + +/* line 657, ../../src/pivotal-ui/components/colors.scss */ +.bg-shadow-1 { + background-color: rgba(0, 0, 0, 0.3); +} + +/* line 661, ../../src/pivotal-ui/components/colors.scss */ +.bg-shadow-2 { + background-color: rgba(0, 0, 0, 0.14); +} + +/* line 665, ../../src/pivotal-ui/components/colors.scss */ +.bg-shadow-3 { + background-color: rgba(0, 0, 0, 0.07); +} + +/* line 669, ../../src/pivotal-ui/components/colors.scss */ +.bg-shadow-4 { + background-color: rgba(0, 0, 0, 0.035); +} + +/*doc +--- +title: Backgrounds +name: background +categories: + - Elements + - All +--- + +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
+
+
+
+
+
+
.bg-glow
+
+
+
+ +*/ +/* line 38, ../../src/pivotal-ui/components/backgrounds.scss */ +.bg-cloud { + background: #F8F8F8 url("../images/gray-cloud.png") no-repeat 50% 50%; +} + +/* line 42, ../../src/pivotal-ui/components/backgrounds.scss */ +.bg-glow { + 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

+
+
+ ``` +To modify this component to use a custom image, use an inline `background-image` style like so: + +```html_example +
+
+

Full bleed background image

+
+
+``` +*/ +/* line 75, ../../src/pivotal-ui/components/backgrounds.scss */ +.bg-full-bleed { + background-image: url(../images/aboutus-hero.jpg); + background-repeat: no-repeat; + background-position: center center; + -webkit-background-size: cover; + -moz-background-size: cover; + -o-background-size: cover; + background-size: cover; +} + +/*doc +--- +title: Whitespace +name: whitespace +categories: + - Utilities + - All +--- + +*/ +/*doc +--- +title: Standard +name: standard +parent: whitespace +--- + +Should be used to modify the default spacing between objects (not between nodes of the same object) +Please use judiciously. You want to be using defaults most of the time, these are exceptions! +`` + +Letter | Description +-------------------------------- | ------------------------------------------------------------------ +p, m | padding, margin +a, t, r, b, l, h, v | all, top, right, bottom, left, horizontal, vertical +n, s, m, l, xl, xxl, xxxl, xxxxl | none(0px), small(5px), medium(7px), large(10px), extra large(20px), extra extra large (40px), extra extra extra large (120px), extra extra extra extra large (140px) + + +```haml_example +%p A normal paragraph +%p.pal A paragraph with large padding +``` + + +*/ +/*doc +--- +title: List +name: whitespace_list +parent: whitespace +--- + +See [list spacing][list_whitespace]. + +*/ +/* line 113, ../../src/oocss/whitespace/_whitespace.scss */ +.pan { + padding: 0 !important; +} + +/* line 113, ../../src/oocss/whitespace/_whitespace.scss */ +.man { + margin: 0 !important; +} + +/* line 113, ../../src/oocss/whitespace/_whitespace.scss */ +.pvn { + padding-top: 0 !important; + padding-bottom: 0 !important; +} + +/* line 113, ../../src/oocss/whitespace/_whitespace.scss */ +.mvn { + margin-top: 0 !important; + margin-bottom: 0 !important; +} + +/* line 113, ../../src/oocss/whitespace/_whitespace.scss */ +.phn { + padding-left: 0 !important; + padding-right: 0 !important; +} + +/* line 113, ../../src/oocss/whitespace/_whitespace.scss */ +.mhn { + margin-left: 0 !important; + margin-right: 0 !important; +} + +/* line 113, ../../src/oocss/whitespace/_whitespace.scss */ +.ptn { + padding-top: 0 !important; +} + +/* line 113, ../../src/oocss/whitespace/_whitespace.scss */ +.mtn { + margin-top: 0 !important; +} + +/* line 113, ../../src/oocss/whitespace/_whitespace.scss */ +.prn { + padding-right: 0 !important; +} + +/* line 113, ../../src/oocss/whitespace/_whitespace.scss */ +.mrn { + margin-right: 0 !important; +} + +/* line 113, ../../src/oocss/whitespace/_whitespace.scss */ +.pbn { + padding-bottom: 0 !important; +} + +/* line 113, ../../src/oocss/whitespace/_whitespace.scss */ +.mbn { + margin-bottom: 0 !important; +} + +/* line 113, ../../src/oocss/whitespace/_whitespace.scss */ +.pln { + padding-left: 0 !important; +} + +/* line 113, ../../src/oocss/whitespace/_whitespace.scss */ +.mln { + margin-left: 0 !important; +} + +/* line 113, ../../src/oocss/whitespace/_whitespace.scss */ +.pas { + padding: 5px !important; +} + +/* line 113, ../../src/oocss/whitespace/_whitespace.scss */ +.mas { + margin: 5px !important; +} + +/* line 113, ../../src/oocss/whitespace/_whitespace.scss */ +.pvs { + padding-top: 5px !important; + padding-bottom: 5px !important; +} + +/* line 113, ../../src/oocss/whitespace/_whitespace.scss */ +.mvs { + margin-top: 5px !important; + margin-bottom: 5px !important; +} + +/* line 113, ../../src/oocss/whitespace/_whitespace.scss */ +.phs { + padding-left: 5px !important; + padding-right: 5px !important; +} + +/* line 113, ../../src/oocss/whitespace/_whitespace.scss */ +.mhs { + margin-left: 5px !important; + margin-right: 5px !important; +} + +/* line 113, ../../src/oocss/whitespace/_whitespace.scss */ +.pts { + padding-top: 5px !important; +} + +/* line 113, ../../src/oocss/whitespace/_whitespace.scss */ +.mts { + margin-top: 5px !important; +} + +/* line 113, ../../src/oocss/whitespace/_whitespace.scss */ +.prs { + padding-right: 5px !important; +} + +/* line 113, ../../src/oocss/whitespace/_whitespace.scss */ +.mrs { + margin-right: 5px !important; +} + +/* line 113, ../../src/oocss/whitespace/_whitespace.scss */ +.pbs { + padding-bottom: 5px !important; +} + +/* line 113, ../../src/oocss/whitespace/_whitespace.scss */ +.mbs { + margin-bottom: 5px !important; +} + +/* line 113, ../../src/oocss/whitespace/_whitespace.scss */ +.pls { + padding-left: 5px !important; +} + +/* line 113, ../../src/oocss/whitespace/_whitespace.scss */ +.mls { + margin-left: 5px !important; +} + +/* line 113, ../../src/oocss/whitespace/_whitespace.scss */ +.pam { + padding: 7px !important; +} + +/* line 113, ../../src/oocss/whitespace/_whitespace.scss */ +.mam { + margin: 7px !important; +} + +/* line 113, ../../src/oocss/whitespace/_whitespace.scss */ +.pvm { + padding-top: 7px !important; + padding-bottom: 7px !important; +} + +/* line 113, ../../src/oocss/whitespace/_whitespace.scss */ +.mvm { + margin-top: 7px !important; + margin-bottom: 7px !important; +} + +/* line 113, ../../src/oocss/whitespace/_whitespace.scss */ +.phm { + padding-left: 7px !important; + padding-right: 7px !important; +} + +/* line 113, ../../src/oocss/whitespace/_whitespace.scss */ +.mhm { + margin-left: 7px !important; + margin-right: 7px !important; +} + +/* line 113, ../../src/oocss/whitespace/_whitespace.scss */ +.ptm { + padding-top: 7px !important; +} + +/* line 113, ../../src/oocss/whitespace/_whitespace.scss */ +.mtm { + margin-top: 7px !important; +} + +/* line 113, ../../src/oocss/whitespace/_whitespace.scss */ +.prm { + padding-right: 7px !important; +} + +/* line 113, ../../src/oocss/whitespace/_whitespace.scss */ +.mrm, .traffic-lights i { + margin-right: 7px !important; +} + +/* line 113, ../../src/oocss/whitespace/_whitespace.scss */ +.pbm { + padding-bottom: 7px !important; +} + +/* line 113, ../../src/oocss/whitespace/_whitespace.scss */ +.mbm { + margin-bottom: 7px !important; +} + +/* line 113, ../../src/oocss/whitespace/_whitespace.scss */ +.plm { + padding-left: 7px !important; +} + +/* line 113, ../../src/oocss/whitespace/_whitespace.scss */ +.mlm { + margin-left: 7px !important; +} + +/* line 113, ../../src/oocss/whitespace/_whitespace.scss */ +.pal { + padding: 10px !important; +} + +/* line 113, ../../src/oocss/whitespace/_whitespace.scss */ +.mal { + margin: 10px !important; +} + +/* line 113, ../../src/oocss/whitespace/_whitespace.scss */ +.pvl { + padding-top: 10px !important; + padding-bottom: 10px !important; +} + +/* line 113, ../../src/oocss/whitespace/_whitespace.scss */ +.mvl { + margin-top: 10px !important; + margin-bottom: 10px !important; +} + +/* line 113, ../../src/oocss/whitespace/_whitespace.scss */ +.phl { + padding-left: 10px !important; + padding-right: 10px !important; +} + +/* line 113, ../../src/oocss/whitespace/_whitespace.scss */ +.mhl { + margin-left: 10px !important; + margin-right: 10px !important; +} + +/* line 113, ../../src/oocss/whitespace/_whitespace.scss */ +.ptl { + padding-top: 10px !important; +} + +/* line 113, ../../src/oocss/whitespace/_whitespace.scss */ +.mtl { + margin-top: 10px !important; +} + +/* line 113, ../../src/oocss/whitespace/_whitespace.scss */ +.prl { + padding-right: 10px !important; +} + +/* line 113, ../../src/oocss/whitespace/_whitespace.scss */ +.mrl { + margin-right: 10px !important; +} + +/* line 113, ../../src/oocss/whitespace/_whitespace.scss */ +.pbl { + padding-bottom: 10px !important; +} + +/* line 113, ../../src/oocss/whitespace/_whitespace.scss */ +.mbl { + margin-bottom: 10px !important; +} + +/* line 113, ../../src/oocss/whitespace/_whitespace.scss */ +.pll { + padding-left: 10px !important; +} + +/* line 113, ../../src/oocss/whitespace/_whitespace.scss */ +.mll { + margin-left: 10px !important; +} + +/* line 113, ../../src/oocss/whitespace/_whitespace.scss */ +.paxl { + padding: 20px !important; +} + +/* line 113, ../../src/oocss/whitespace/_whitespace.scss */ +.maxl { + margin: 20px !important; +} + +/* line 113, ../../src/oocss/whitespace/_whitespace.scss */ +.pvxl { + padding-top: 20px !important; + padding-bottom: 20px !important; +} + +/* line 113, ../../src/oocss/whitespace/_whitespace.scss */ +.mvxl { + margin-top: 20px !important; + margin-bottom: 20px !important; +} + +/* line 113, ../../src/oocss/whitespace/_whitespace.scss */ +.phxl { + padding-left: 20px !important; + padding-right: 20px !important; +} + +/* line 113, ../../src/oocss/whitespace/_whitespace.scss */ +.mhxl { + margin-left: 20px !important; + margin-right: 20px !important; +} + +/* line 113, ../../src/oocss/whitespace/_whitespace.scss */ +.ptxl { + padding-top: 20px !important; +} + +/* line 113, ../../src/oocss/whitespace/_whitespace.scss */ +.mtxl { + margin-top: 20px !important; +} + +/* line 113, ../../src/oocss/whitespace/_whitespace.scss */ +.prxl { + padding-right: 20px !important; +} + +/* line 113, ../../src/oocss/whitespace/_whitespace.scss */ +.mrxl { + margin-right: 20px !important; +} + +/* line 113, ../../src/oocss/whitespace/_whitespace.scss */ +.pbxl { + padding-bottom: 20px !important; +} + +/* line 113, ../../src/oocss/whitespace/_whitespace.scss */ +.mbxl { + margin-bottom: 20px !important; +} + +/* line 113, ../../src/oocss/whitespace/_whitespace.scss */ +.plxl { + padding-left: 20px !important; +} + +/* line 113, ../../src/oocss/whitespace/_whitespace.scss */ +.mlxl { + margin-left: 20px !important; +} + +/* line 113, ../../src/oocss/whitespace/_whitespace.scss */ +.paxxl { + padding: 40px !important; +} + +/* line 113, ../../src/oocss/whitespace/_whitespace.scss */ +.maxxl { + margin: 40px !important; +} + +/* line 113, ../../src/oocss/whitespace/_whitespace.scss */ +.pvxxl { + padding-top: 40px !important; + padding-bottom: 40px !important; +} + +/* line 113, ../../src/oocss/whitespace/_whitespace.scss */ +.mvxxl { + margin-top: 40px !important; + margin-bottom: 40px !important; +} + +/* line 113, ../../src/oocss/whitespace/_whitespace.scss */ +.phxxl { + padding-left: 40px !important; + padding-right: 40px !important; +} + +/* line 113, ../../src/oocss/whitespace/_whitespace.scss */ +.mhxxl { + margin-left: 40px !important; + margin-right: 40px !important; +} + +/* line 113, ../../src/oocss/whitespace/_whitespace.scss */ +.ptxxl { + padding-top: 40px !important; +} + +/* line 113, ../../src/oocss/whitespace/_whitespace.scss */ +.mtxxl { + margin-top: 40px !important; +} + +/* line 113, ../../src/oocss/whitespace/_whitespace.scss */ +.prxxl { + padding-right: 40px !important; +} + +/* line 113, ../../src/oocss/whitespace/_whitespace.scss */ +.mrxxl { + margin-right: 40px !important; +} + +/* line 113, ../../src/oocss/whitespace/_whitespace.scss */ +.pbxxl { + padding-bottom: 40px !important; +} + +/* line 113, ../../src/oocss/whitespace/_whitespace.scss */ +.mbxxl { + margin-bottom: 40px !important; +} + +/* line 113, ../../src/oocss/whitespace/_whitespace.scss */ +.plxxl { + padding-left: 40px !important; +} + +/* line 113, ../../src/oocss/whitespace/_whitespace.scss */ +.mlxxl { + margin-left: 40px !important; +} + +/* line 113, ../../src/oocss/whitespace/_whitespace.scss */ +.paxxxl { + padding: 120px !important; +} + +/* line 113, ../../src/oocss/whitespace/_whitespace.scss */ +.maxxxl { + margin: 120px !important; +} + +/* line 113, ../../src/oocss/whitespace/_whitespace.scss */ +.pvxxxl { + padding-top: 120px !important; + padding-bottom: 120px !important; +} + +/* line 113, ../../src/oocss/whitespace/_whitespace.scss */ +.mvxxxl { + margin-top: 120px !important; + margin-bottom: 120px !important; +} + +/* line 113, ../../src/oocss/whitespace/_whitespace.scss */ +.phxxxl { + padding-left: 120px !important; + padding-right: 120px !important; +} + +/* line 113, ../../src/oocss/whitespace/_whitespace.scss */ +.mhxxxl { + margin-left: 120px !important; + margin-right: 120px !important; +} + +/* line 113, ../../src/oocss/whitespace/_whitespace.scss */ +.ptxxxl { + padding-top: 120px !important; +} + +/* line 113, ../../src/oocss/whitespace/_whitespace.scss */ +.mtxxxl { + margin-top: 120px !important; +} + +/* line 113, ../../src/oocss/whitespace/_whitespace.scss */ +.prxxxl { + padding-right: 120px !important; +} + +/* line 113, ../../src/oocss/whitespace/_whitespace.scss */ +.mrxxxl { + margin-right: 120px !important; +} + +/* line 113, ../../src/oocss/whitespace/_whitespace.scss */ +.pbxxxl { + padding-bottom: 120px !important; +} + +/* line 113, ../../src/oocss/whitespace/_whitespace.scss */ +.mbxxxl { + margin-bottom: 120px !important; +} + +/* line 113, ../../src/oocss/whitespace/_whitespace.scss */ +.plxxxl { + padding-left: 120px !important; +} + +/* line 113, ../../src/oocss/whitespace/_whitespace.scss */ +.mlxxxl { + margin-left: 120px !important; +} + +/* line 113, ../../src/oocss/whitespace/_whitespace.scss */ +.paxxxxl { + padding: 140px !important; +} + +/* line 113, ../../src/oocss/whitespace/_whitespace.scss */ +.maxxxxl { + margin: 140px !important; +} + +/* line 113, ../../src/oocss/whitespace/_whitespace.scss */ +.pvxxxxl { + padding-top: 140px !important; + padding-bottom: 140px !important; +} + +/* line 113, ../../src/oocss/whitespace/_whitespace.scss */ +.mvxxxxl { + margin-top: 140px !important; + margin-bottom: 140px !important; +} + +/* line 113, ../../src/oocss/whitespace/_whitespace.scss */ +.phxxxxl { + padding-left: 140px !important; + padding-right: 140px !important; +} + +/* line 113, ../../src/oocss/whitespace/_whitespace.scss */ +.mhxxxxl { + margin-left: 140px !important; + margin-right: 140px !important; +} + +/* line 113, ../../src/oocss/whitespace/_whitespace.scss */ +.ptxxxxl { + padding-top: 140px !important; +} + +/* line 113, ../../src/oocss/whitespace/_whitespace.scss */ +.mtxxxxl { + margin-top: 140px !important; +} + +/* line 113, ../../src/oocss/whitespace/_whitespace.scss */ +.prxxxxl { + padding-right: 140px !important; +} + +/* line 113, ../../src/oocss/whitespace/_whitespace.scss */ +.mrxxxxl { + margin-right: 140px !important; +} + +/* line 113, ../../src/oocss/whitespace/_whitespace.scss */ +.pbxxxxl { + padding-bottom: 140px !important; +} + +/* line 113, ../../src/oocss/whitespace/_whitespace.scss */ +.mbxxxxl { + margin-bottom: 140px !important; +} + +/* line 113, ../../src/oocss/whitespace/_whitespace.scss */ +.plxxxxl { + padding-left: 140px !important; +} + +/* line 113, ../../src/oocss/whitespace/_whitespace.scss */ +.mlxxxxl { + margin-left: 140px !important; +} + +@media all and (max-width: 768px) { + /* line 113, ../../src/oocss/whitespace/_whitespace.scss */ + .pan { + padding: 0 !important; + } + + /* line 113, ../../src/oocss/whitespace/_whitespace.scss */ + .man { + margin: 0 !important; + } + + /* line 113, ../../src/oocss/whitespace/_whitespace.scss */ + .pvn { + padding-top: 0 !important; + padding-bottom: 0 !important; + } + + /* line 113, ../../src/oocss/whitespace/_whitespace.scss */ + .mvn { + margin-top: 0 !important; + margin-bottom: 0 !important; + } + + /* line 113, ../../src/oocss/whitespace/_whitespace.scss */ + .phn { + padding-left: 0 !important; + padding-right: 0 !important; + } + + /* line 113, ../../src/oocss/whitespace/_whitespace.scss */ + .mhn { + margin-left: 0 !important; + margin-right: 0 !important; + } + + /* line 113, ../../src/oocss/whitespace/_whitespace.scss */ + .ptn { + padding-top: 0 !important; + } + + /* line 113, ../../src/oocss/whitespace/_whitespace.scss */ + .mtn { + margin-top: 0 !important; + } + + /* line 113, ../../src/oocss/whitespace/_whitespace.scss */ + .prn { + padding-right: 0 !important; + } + + /* line 113, ../../src/oocss/whitespace/_whitespace.scss */ + .mrn { + margin-right: 0 !important; + } + + /* line 113, ../../src/oocss/whitespace/_whitespace.scss */ + .pbn { + padding-bottom: 0 !important; + } + + /* line 113, ../../src/oocss/whitespace/_whitespace.scss */ + .mbn { + margin-bottom: 0 !important; + } + + /* line 113, ../../src/oocss/whitespace/_whitespace.scss */ + .pln { + padding-left: 0 !important; + } + + /* line 113, ../../src/oocss/whitespace/_whitespace.scss */ + .mln { + margin-left: 0 !important; + } + + /* line 113, ../../src/oocss/whitespace/_whitespace.scss */ + .pas { + padding: 5px !important; + } + + /* line 113, ../../src/oocss/whitespace/_whitespace.scss */ + .mas { + margin: 5px !important; + } + + /* line 113, ../../src/oocss/whitespace/_whitespace.scss */ + .pvs { + padding-top: 5px !important; + padding-bottom: 5px !important; + } + + /* line 113, ../../src/oocss/whitespace/_whitespace.scss */ + .mvs { + margin-top: 5px !important; + margin-bottom: 5px !important; + } + + /* line 113, ../../src/oocss/whitespace/_whitespace.scss */ + .phs { + padding-left: 5px !important; + padding-right: 5px !important; + } + + /* line 113, ../../src/oocss/whitespace/_whitespace.scss */ + .mhs { + margin-left: 5px !important; + margin-right: 5px !important; + } + + /* line 113, ../../src/oocss/whitespace/_whitespace.scss */ + .pts { + padding-top: 5px !important; + } + + /* line 113, ../../src/oocss/whitespace/_whitespace.scss */ + .mts { + margin-top: 5px !important; + } + + /* line 113, ../../src/oocss/whitespace/_whitespace.scss */ + .prs { + padding-right: 5px !important; + } + + /* line 113, ../../src/oocss/whitespace/_whitespace.scss */ + .mrs { + margin-right: 5px !important; + } + + /* line 113, ../../src/oocss/whitespace/_whitespace.scss */ + .pbs { + padding-bottom: 5px !important; + } + + /* line 113, ../../src/oocss/whitespace/_whitespace.scss */ + .mbs { + margin-bottom: 5px !important; + } + + /* line 113, ../../src/oocss/whitespace/_whitespace.scss */ + .pls { + padding-left: 5px !important; + } + + /* line 113, ../../src/oocss/whitespace/_whitespace.scss */ + .mls { + margin-left: 5px !important; + } + + /* line 113, ../../src/oocss/whitespace/_whitespace.scss */ + .pam { + padding: 7px !important; + } + + /* line 113, ../../src/oocss/whitespace/_whitespace.scss */ + .mam { + margin: 7px !important; + } + + /* line 113, ../../src/oocss/whitespace/_whitespace.scss */ + .pvm { + padding-top: 7px !important; + padding-bottom: 7px !important; + } + + /* line 113, ../../src/oocss/whitespace/_whitespace.scss */ + .mvm { + margin-top: 7px !important; + margin-bottom: 7px !important; + } + + /* line 113, ../../src/oocss/whitespace/_whitespace.scss */ + .phm { + padding-left: 7px !important; + padding-right: 7px !important; + } + + /* line 113, ../../src/oocss/whitespace/_whitespace.scss */ + .mhm { + margin-left: 7px !important; + margin-right: 7px !important; + } + + /* line 113, ../../src/oocss/whitespace/_whitespace.scss */ + .ptm { + padding-top: 7px !important; + } + + /* line 113, ../../src/oocss/whitespace/_whitespace.scss */ + .mtm { + margin-top: 7px !important; + } + + /* line 113, ../../src/oocss/whitespace/_whitespace.scss */ + .prm { + padding-right: 7px !important; + } + + /* line 113, ../../src/oocss/whitespace/_whitespace.scss */ + .mrm, .traffic-lights i { + margin-right: 7px !important; + } + + /* line 113, ../../src/oocss/whitespace/_whitespace.scss */ + .pbm { + padding-bottom: 7px !important; + } + + /* line 113, ../../src/oocss/whitespace/_whitespace.scss */ + .mbm { + margin-bottom: 7px !important; + } + + /* line 113, ../../src/oocss/whitespace/_whitespace.scss */ + .plm { + padding-left: 7px !important; + } + + /* line 113, ../../src/oocss/whitespace/_whitespace.scss */ + .mlm { + margin-left: 7px !important; + } + + /* line 113, ../../src/oocss/whitespace/_whitespace.scss */ + .pal { + padding: 10px !important; + } + + /* line 113, ../../src/oocss/whitespace/_whitespace.scss */ + .mal { + margin: 10px !important; + } + + /* line 113, ../../src/oocss/whitespace/_whitespace.scss */ + .pvl { + padding-top: 10px !important; + padding-bottom: 10px !important; + } + + /* line 113, ../../src/oocss/whitespace/_whitespace.scss */ + .mvl { + margin-top: 10px !important; + margin-bottom: 10px !important; + } + + /* line 113, ../../src/oocss/whitespace/_whitespace.scss */ + .phl { + padding-left: 10px !important; + padding-right: 10px !important; + } + + /* line 113, ../../src/oocss/whitespace/_whitespace.scss */ + .mhl { + margin-left: 10px !important; + margin-right: 10px !important; + } + + /* line 113, ../../src/oocss/whitespace/_whitespace.scss */ + .ptl { + padding-top: 10px !important; + } + + /* line 113, ../../src/oocss/whitespace/_whitespace.scss */ + .mtl { + margin-top: 10px !important; + } + + /* line 113, ../../src/oocss/whitespace/_whitespace.scss */ + .prl { + padding-right: 10px !important; + } + + /* line 113, ../../src/oocss/whitespace/_whitespace.scss */ + .mrl { + margin-right: 10px !important; + } + + /* line 113, ../../src/oocss/whitespace/_whitespace.scss */ + .pbl { + padding-bottom: 10px !important; + } + + /* line 113, ../../src/oocss/whitespace/_whitespace.scss */ + .mbl { + margin-bottom: 10px !important; + } + + /* line 113, ../../src/oocss/whitespace/_whitespace.scss */ + .pll { + padding-left: 10px !important; + } + + /* line 113, ../../src/oocss/whitespace/_whitespace.scss */ + .mll { + margin-left: 10px !important; + } + + /* line 113, ../../src/oocss/whitespace/_whitespace.scss */ + .paxl { + padding: 15px !important; + } + + /* line 113, ../../src/oocss/whitespace/_whitespace.scss */ + .maxl { + margin: 15px !important; + } + + /* line 113, ../../src/oocss/whitespace/_whitespace.scss */ + .pvxl { + padding-top: 15px !important; + padding-bottom: 15px !important; + } + + /* line 113, ../../src/oocss/whitespace/_whitespace.scss */ + .mvxl { + margin-top: 15px !important; + margin-bottom: 15px !important; + } + + /* line 113, ../../src/oocss/whitespace/_whitespace.scss */ + .phxl { + padding-left: 15px !important; + padding-right: 15px !important; + } + + /* line 113, ../../src/oocss/whitespace/_whitespace.scss */ + .mhxl { + margin-left: 15px !important; + margin-right: 15px !important; + } + + /* line 113, ../../src/oocss/whitespace/_whitespace.scss */ + .ptxl { + padding-top: 15px !important; + } + + /* line 113, ../../src/oocss/whitespace/_whitespace.scss */ + .mtxl { + margin-top: 15px !important; + } + + /* line 113, ../../src/oocss/whitespace/_whitespace.scss */ + .prxl { + padding-right: 15px !important; + } + + /* line 113, ../../src/oocss/whitespace/_whitespace.scss */ + .mrxl { + margin-right: 15px !important; + } + + /* line 113, ../../src/oocss/whitespace/_whitespace.scss */ + .pbxl { + padding-bottom: 15px !important; + } + + /* line 113, ../../src/oocss/whitespace/_whitespace.scss */ + .mbxl { + margin-bottom: 15px !important; + } + + /* line 113, ../../src/oocss/whitespace/_whitespace.scss */ + .plxl { + padding-left: 15px !important; + } + + /* line 113, ../../src/oocss/whitespace/_whitespace.scss */ + .mlxl { + margin-left: 15px !important; + } + + /* line 113, ../../src/oocss/whitespace/_whitespace.scss */ + .paxxl { + padding: 20px !important; + } + + /* line 113, ../../src/oocss/whitespace/_whitespace.scss */ + .maxxl { + margin: 20px !important; + } + + /* line 113, ../../src/oocss/whitespace/_whitespace.scss */ + .pvxxl { + padding-top: 20px !important; + padding-bottom: 20px !important; + } + + /* line 113, ../../src/oocss/whitespace/_whitespace.scss */ + .mvxxl { + margin-top: 20px !important; + margin-bottom: 20px !important; + } + + /* line 113, ../../src/oocss/whitespace/_whitespace.scss */ + .phxxl { + padding-left: 20px !important; + padding-right: 20px !important; + } + + /* line 113, ../../src/oocss/whitespace/_whitespace.scss */ + .mhxxl { + margin-left: 20px !important; + margin-right: 20px !important; + } + + /* line 113, ../../src/oocss/whitespace/_whitespace.scss */ + .ptxxl { + padding-top: 20px !important; + } + + /* line 113, ../../src/oocss/whitespace/_whitespace.scss */ + .mtxxl { + margin-top: 20px !important; + } + + /* line 113, ../../src/oocss/whitespace/_whitespace.scss */ + .prxxl { + padding-right: 20px !important; + } + + /* line 113, ../../src/oocss/whitespace/_whitespace.scss */ + .mrxxl { + margin-right: 20px !important; + } + + /* line 113, ../../src/oocss/whitespace/_whitespace.scss */ + .pbxxl { + padding-bottom: 20px !important; + } + + /* line 113, ../../src/oocss/whitespace/_whitespace.scss */ + .mbxxl { + margin-bottom: 20px !important; + } + + /* line 113, ../../src/oocss/whitespace/_whitespace.scss */ + .plxxl { + padding-left: 20px !important; + } + + /* line 113, ../../src/oocss/whitespace/_whitespace.scss */ + .mlxxl { + margin-left: 20px !important; + } + + /* line 113, ../../src/oocss/whitespace/_whitespace.scss */ + .paxxxl { + padding: 30px !important; + } + + /* line 113, ../../src/oocss/whitespace/_whitespace.scss */ + .maxxxl { + margin: 30px !important; + } + + /* line 113, ../../src/oocss/whitespace/_whitespace.scss */ + .pvxxxl { + padding-top: 30px !important; + padding-bottom: 30px !important; + } + + /* line 113, ../../src/oocss/whitespace/_whitespace.scss */ + .mvxxxl { + margin-top: 30px !important; + margin-bottom: 30px !important; + } + + /* line 113, ../../src/oocss/whitespace/_whitespace.scss */ + .phxxxl { + padding-left: 30px !important; + padding-right: 30px !important; + } + + /* line 113, ../../src/oocss/whitespace/_whitespace.scss */ + .mhxxxl { + margin-left: 30px !important; + margin-right: 30px !important; + } + + /* line 113, ../../src/oocss/whitespace/_whitespace.scss */ + .ptxxxl { + padding-top: 30px !important; + } + + /* line 113, ../../src/oocss/whitespace/_whitespace.scss */ + .mtxxxl { + margin-top: 30px !important; + } + + /* line 113, ../../src/oocss/whitespace/_whitespace.scss */ + .prxxxl { + padding-right: 30px !important; + } + + /* line 113, ../../src/oocss/whitespace/_whitespace.scss */ + .mrxxxl { + margin-right: 30px !important; + } + + /* line 113, ../../src/oocss/whitespace/_whitespace.scss */ + .pbxxxl { + padding-bottom: 30px !important; + } + + /* line 113, ../../src/oocss/whitespace/_whitespace.scss */ + .mbxxxl { + margin-bottom: 30px !important; + } + + /* line 113, ../../src/oocss/whitespace/_whitespace.scss */ + .plxxxl { + padding-left: 30px !important; + } + + /* line 113, ../../src/oocss/whitespace/_whitespace.scss */ + .mlxxxl { + margin-left: 30px !important; + } + + /* line 113, ../../src/oocss/whitespace/_whitespace.scss */ + .paxxxxl { + padding: 30px !important; + } + + /* line 113, ../../src/oocss/whitespace/_whitespace.scss */ + .maxxxxl { + margin: 30px !important; + } + + /* line 113, ../../src/oocss/whitespace/_whitespace.scss */ + .pvxxxxl { + padding-top: 30px !important; + padding-bottom: 30px !important; + } + + /* line 113, ../../src/oocss/whitespace/_whitespace.scss */ + .mvxxxxl { + margin-top: 30px !important; + margin-bottom: 30px !important; + } + + /* line 113, ../../src/oocss/whitespace/_whitespace.scss */ + .phxxxxl { + padding-left: 30px !important; + padding-right: 30px !important; + } + + /* line 113, ../../src/oocss/whitespace/_whitespace.scss */ + .mhxxxxl { + margin-left: 30px !important; + margin-right: 30px !important; + } + + /* line 113, ../../src/oocss/whitespace/_whitespace.scss */ + .ptxxxxl { + padding-top: 30px !important; + } + + /* line 113, ../../src/oocss/whitespace/_whitespace.scss */ + .mtxxxxl { + margin-top: 30px !important; + } + + /* line 113, ../../src/oocss/whitespace/_whitespace.scss */ + .prxxxxl { + padding-right: 30px !important; + } + + /* line 113, ../../src/oocss/whitespace/_whitespace.scss */ + .mrxxxxl { + margin-right: 30px !important; + } + + /* line 113, ../../src/oocss/whitespace/_whitespace.scss */ + .pbxxxxl { + padding-bottom: 30px !important; + } + + /* line 113, ../../src/oocss/whitespace/_whitespace.scss */ + .mbxxxxl { + margin-bottom: 30px !important; + } + + /* line 113, ../../src/oocss/whitespace/_whitespace.scss */ + .plxxxxl { + padding-left: 30px !important; + } + + /* line 113, ../../src/oocss/whitespace/_whitespace.scss */ + .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:
llistSpace on the inside of each of the li direct children of the element
Location:
hhorizontalAdds spacing to the left and right of the li.
vverticalAdds spacing to the top and bottom of the li.
Size:
xlextra largeAdds 21 pixels of space
llargeAdds 10 pixels of space
mmediumAdds 7 pixels of space
ssmallAdds 5 pixels of space
nnoneSets any existing space to 0
+ +### Vertical Spacing Options (`n` -> `xl`) + +```haml_example_table +%ul.lvn + %li + feep + %li + fop + %li + meep + +%ul.lvs + %li + feep + %li + fop + %li + meep + +%ul.lvm + %li + feep + %li + fop + %li + meep + +%ul.lvl + %li + feep + %li + fop + %li + meep + +%ul.lvxl + %li + feep + %li + fop + %li + meep +``` + +### Horizontal Spacing Options (`n` -> `xl`) + + +```haml_example_table +%ul.list-inline.lhn + %li + feep + %li + fop + %li + meep + +%ul.list-inline.lhs + %li + feep + %li + fop + %li + meep + +%ul.list-inline.lhm + %li + feep + %li + fop + %li + meep + +%ul.list-inline.lhl + %li + feep + %li + fop + %li + meep + +%ul.list-inline.lhxl + %li + feep + %li + fop + %li + meep +``` + +*/ +/*doc +--- +title: Typography +name: type +categories: + - Elements + - All +--- + +Source Sans Pro is our font family. +It can be used with the following modifiers to achieve a variety of effects. +*/ +/* line 14, ../../src/pivotal-ui/components/typography.scss */ +* { + -webkit-font-smoothing: antialiased; +} + +/*doc +--- +title: Alignment +name: type_alignment +parent: type +--- + +See the [alignment component][alignment] for classes to use for text alignment. + +*/ +/*doc +--- +title: Sizes +name: 1_type_sizes +parent: type +--- + +Set font sizes using headings and modifier classes. + +```html_example_table +

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). +

+
+ + + +```html_example_table +

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. +

+
+ +```html_example_table +
Heading level 2 on a div
+``` + +*/ +/* line 96, ../../src/pivotal-ui/components/typography.scss */ +h1, .h1, .form-contenteditable input.form-control, h2, .h2, h3, .h3 { + margin-top: 20px; + margin-bottom: 10px; +} + +/* line 101, ../../src/pivotal-ui/components/typography.scss */ +h4, .h4, h5, .h5, h6, .h6 { + margin-top: 10px; + margin-bottom: 10px; +} + +@media all and (max-width: 768px) { + /* line 107, ../../src/pivotal-ui/components/typography.scss */ + h1, .h1, .form-contenteditable input.form-control, h2, .h2, h3, .h3 { + margin-top: 15px; + margin-bottom: 10px; + } + + /* line 112, ../../src/pivotal-ui/components/typography.scss */ + h4, .h4, h5, .h5, h6, .h6 { + margin-top: 10px; + margin-bottom: 10px; + } +} +/* line 120, ../../src/pivotal-ui/components/typography.scss */ +h1, .h1, .form-contenteditable input.form-control { + font-weight: 400; +} + +/* line 124, ../../src/pivotal-ui/components/typography.scss */ +h2, .h2 { + font-weight: 400; +} + +/* line 128, ../../src/pivotal-ui/components/typography.scss */ +h3, .h3 { + font-weight: 400; +} + +/* line 132, ../../src/pivotal-ui/components/typography.scss */ +h4, .h4 { + font-weight: 400; +} + +/* line 136, ../../src/pivotal-ui/components/typography.scss */ +h5, .h5 { + font-weight: 400; +} + +/* line 140, ../../src/pivotal-ui/components/typography.scss */ +h6, .h6 { + font-weight: 400; +} + +/* line 144, ../../src/pivotal-ui/components/typography.scss */ +small, +.type-sm { + font-size: 14px; +} + +/* line 147, ../../src/pivotal-ui/components/typography.scss */ +.type-xs, +.type-terms { + font-size: 12px; +} + +/* line 150, ../../src/pivotal-ui/components/typography.scss */ +.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

+``` + +*/ +/* line 186, ../../src/pivotal-ui/components/typography.scss */ +.em-low { + font-weight: 200 !important; +} + +/* line 187, ../../src/pivotal-ui/components/typography.scss */ +.em-default { + font-weight: 400 !important; +} + +/* line 188, ../../src/pivotal-ui/components/typography.scss */ +.em-high { + font-weight: 600 !important; +} + +/* line 189, ../../src/pivotal-ui/components/typography.scss */ +.em-max { + font-weight: 900 !important; +} + +/* line 190, ../../src/pivotal-ui/components/typography.scss */ +.em-alt { + text-transform: uppercase !important; +} + +/*doc +--- +title: Colors +name: type_colors +parent: type +--- + +You can apply color to any text with the color classes. + +```html_example_table +

I'm a brand color!

+``` + +Here's a table of all the color classes. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Type inverse

Type inverse

 .type-inverse

Type neutral 1

Type neutral 1

 .type-neutral-1

Type neutral 1

Type neutral 1

 .type-neutral-1

Type neutral 2

Type neutral 2

 .type-neutral-2

Type neutral 3

Type neutral 3

 .type-neutral-3

Type neutral 4

Type neutral 4

 .type-neutral-4

Type neutral 5

Type neutral 5

 .type-neutral-5

Type neutral 6

Type neutral 6

 .type-neutral-6

Type neutral 7

Type neutral 7

 .type-neutral-7

Type neutral 8

Type neutral 8

 .type-neutral-8

Type neutral 9

Type neutral 9

 .type-neutral-9

Type neutral 10

Type neutral 10

 .type-neutral-10

Type neutral 11

Type neutral 11

 .type-neutral-11

Type dark 1

Type dark 1

 .type-dark-1

Type dark 2

Type dark 2

 .type-dark-2

Type dark 3

Type dark 3

 .type-dark-3

Type accent 1

Type accent 1

 .type-accent-1

Type accent 2

Type accent 2

 .type-accent-2

Type accent 3

Type accent 3

 .type-accent-3

Type accent 4

Type accent 4

 .type-accent-4

Type accent 5

Type accent 5

 .type-accent-5

Type brand 1

Type brand 1

 .type-brand-1

Type brand 2

Type brand 2

 .type-brand-2

Type brand 3

Type brand 3

 .type-brand-3

Type brand 4

Type brand 4

 .type-brand-4

Type brand 5

Type brand 5

 .type-brand-5

Type error 1

Type error 1

 .type-error-1

Type error 2

Type error 2

 .type-error-2

Type error 3

Type error 3

 .type-error-3

Type error 4

Type error 4

 .type-error-4

Type success 1

Type success 1

 .type-success-1

Type success 2

Type success 2

 .type-success-2

Type warn 1

Type warn 1

 .type-warn-1

Type warn 2

Type warn 2

 .type-warn-2

Type warn 3

Type warn 3

 .type-warn-3
+ +*/ +/* line 389, ../../src/pivotal-ui/components/typography.scss */ +.type-neutral-1 { + color: #282828; +} + +/* line 390, ../../src/pivotal-ui/components/typography.scss */ +.type-neutral-2 { + color: #424242; +} + +/* line 391, ../../src/pivotal-ui/components/typography.scss */ +.type-neutral-3 { + color: #686868; +} + +/* line 392, ../../src/pivotal-ui/components/typography.scss */ +.type-neutral-4 { + color: #8d8e8e; +} + +/* line 393, ../../src/pivotal-ui/components/typography.scss */ +.type-neutral-5 { + color: #b4b4b4; +} + +/* line 394, ../../src/pivotal-ui/components/typography.scss */ +.type-neutral-6 { + color: #c3c5c7; +} + +/* line 395, ../../src/pivotal-ui/components/typography.scss */ +.type-neutral-7 { + color: #d4d9d9; +} + +/* line 396, ../../src/pivotal-ui/components/typography.scss */ +.type-neutral-8 { + color: #e0e4e5; +} + +/* line 397, ../../src/pivotal-ui/components/typography.scss */ +.type-neutral-9 { + color: #ecefef; +} + +/* line 398, ../../src/pivotal-ui/components/typography.scss */ +.type-neutral-10 { + color: #F8F8F8; +} + +/* line 399, ../../src/pivotal-ui/components/typography.scss */ +.type-neutral-11 { + color: white; +} + +/* line 403, ../../src/pivotal-ui/components/typography.scss */ +.type-dark-1 { + color: #243640; +} + +/* line 404, ../../src/pivotal-ui/components/typography.scss */ +.type-dark-2 { + color: #3f484f; +} + +/* line 405, ../../src/pivotal-ui/components/typography.scss */ +.type-dark-3 { + color: #525c63; +} + +/* line 409, ../../src/pivotal-ui/components/typography.scss */ +.type-brand-1 { + color: #025a53; +} + +/* line 410, ../../src/pivotal-ui/components/typography.scss */ +.type-brand-2 { + color: #00776d; +} + +/* line 411, ../../src/pivotal-ui/components/typography.scss */ +.type-brand-3 { + color: #00a79d; +} + +/* line 412, ../../src/pivotal-ui/components/typography.scss */ +.type-brand-4 { + color: #92d0c0; +} + +/* line 413, ../../src/pivotal-ui/components/typography.scss */ +.type-brand-5 { + color: #71ffda; +} + +/* line 417, ../../src/pivotal-ui/components/typography.scss */ +.type-accent-1 { + color: #1a739e; +} + +/* line 418, ../../src/pivotal-ui/components/typography.scss */ +.type-accent-2 { + color: #2185c5; +} + +/* line 419, ../../src/pivotal-ui/components/typography.scss */ +.type-accent-3 { + color: #49a8d5; +} + +/* line 420, ../../src/pivotal-ui/components/typography.scss */ +.type-accent-4 { + color: #a7c9e0; +} + +/* line 421, ../../src/pivotal-ui/components/typography.scss */ +.type-accent-5 { + color: #c3f4ff; +} + +/* line 425, ../../src/pivotal-ui/components/typography.scss */ +.type-error-1 { + color: #b31612; +} + +/* line 426, ../../src/pivotal-ui/components/typography.scss */ +.type-error-2 { + color: #eb3d46; +} + +/* line 427, ../../src/pivotal-ui/components/typography.scss */ +.type-error-3 { + color: #ff434c; +} + +/* line 428, ../../src/pivotal-ui/components/typography.scss */ +.type-error-4 { + color: #febfc1; +} + +/* line 432, ../../src/pivotal-ui/components/typography.scss */ +.type-warn-1 { + color: #B59033; +} + +/* line 433, ../../src/pivotal-ui/components/typography.scss */ +.type-warn-2 { + color: #F1C148; +} + +/* line 434, ../../src/pivotal-ui/components/typography.scss */ +.type-warn-3 { + color: #F9F3C3; +} + +/* line 438, ../../src/pivotal-ui/components/typography.scss */ +.type-success-1 { + color: #165450; +} + +/* line 439, ../../src/pivotal-ui/components/typography.scss */ +.type-success-2 { + color: #AFD79B; +} + +/* line 441, ../../src/pivotal-ui/components/typography.scss */ +.type-inverse { + color: #e0e4e5 !important; +} + +/* line 444, ../../src/pivotal-ui/components/typography.scss */ +a:hover.type-inverse { + color: #025a53 !important; +} + +/* line 448, ../../src/pivotal-ui/components/typography.scss */ +.error-color { + color: #ff434c !important; +} + +/*doc +--- +title: Iconography +name: iconography +categories: + - Elements + - All +--- + +We use [Font Awesome](http://fontawesome.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 +-------------------------------------------------- | ---------------------- | ----------- + | `.fa.fa-plus` | Renders our plus icon + | `.fa.fa-user` | Renders our person icon + | `.fa.fa-sort-down` | Renders our triangle icon + | `.fa.fa-cog` | Renders our gear icon + | `.fa.fa-times` | Renders our 'x' icon + | `.fa.fa-check` | Renders our check icon + | `.fa.fa-chevron-right` | Renders our right chevron icon + | `.fa.fa-chevron-up` | Renders our down chevron icon + | `.fa.fa-chevron-down` | Renders our down chevron icon + | `.fa.fa-windows` | Renders our Windows icon + | `.fa.fa-apple` | Renders our Apple icon + | `.fa.fa-linux` | Renders our Linux icon + | `.fa.fa-pencil` | Renders our edit icon + | `.fa.fa-plus-circle` | Renders our second add icon + | `.fa.fa-trash-o` | Renders our delete icon + | `.fa.fa-square` | Renders our square icon + | `.fa.fa-repeat` | Renders our refresh/restart icon + | `.fa.fa-play` | Renders our start icon + | `.fa.fa-download` | Renders our download icon + +```haml_example + +%i.fa.fa-download.type-brand-3.title +``` + +*/ +/* line 44, ../../src/pivotal-ui/components/iconography.scss */ +.icon-control { + font-size: 22px; +} + +/*doc +--- +title: Buttons +name: button +categories: + - Elements + - All +--- + +Button styles can be applied to any element. Typically you'll want to +use either a ` | | `btn btn-default` | This is what buttons look like, this is the go to button style. + | | `btn btn-default-alt` | This is what buttons look like, this is the go to button style (on white backgrounds). + | | `btn btn-primary` | Use this button as the primary call to action + | | `btn btn-lowlight` | Use this button for other actions, like cancel/dismiss + | | `btn btn-danger` | This button is for delete actions, these actions should also have a confirmation dialog + | | `btn btn-highlight` | Use this button for other important actions, e.g. restarting apps + | | `btn btn-highlight-alt` | Use this button for other important actions, e.g. marketing call to actions +*/ +/* line 76, ../../src/pivotal-ui/components/buttons.scss */ +.btn-default { + color: #2185c5; + background-color: rgba(255, 255, 255, 0.4); + border: none; + -webkit-transition: all 300ms ease-out; + -moz-transition: all 300ms ease-out; + transition: all 300ms ease-out; +} +/* line 24, ../../src/pivotal-ui/components/mixins.scss */ +.btn-default:hover, .btn-default:focus, .btn-default:active, .btn-default.active { + color: #2185c5; + background-color: white; + outline: none; +} +/* line 32, ../../src/pivotal-ui/components/mixins.scss */ +.open .btn-default.dropdown-toggle { + color: #2185c5; + background-color: white; +} +/* line 36, ../../src/pivotal-ui/components/mixins.scss */ +.btn-default:active, .btn-default.active { + background-image: none; +} +/* line 40, ../../src/pivotal-ui/components/mixins.scss */ +.open .btn-default.dropdown-toggle { + background-image: none; +} +/* line 46, ../../src/pivotal-ui/components/mixins.scss */ +.btn-default.disabled, .btn-default.disabled:hover, .btn-default.disabled:focus, .btn-default.disabled:active, .btn-default.disabled.active, .btn-default[disabled], .btn-default[disabled]:hover, .btn-default[disabled]:focus, .btn-default[disabled]:active, .btn-default[disabled].active, fieldset[disabled] .btn-default, fieldset[disabled] .btn-default:hover, fieldset[disabled] .btn-default:focus, fieldset[disabled] .btn-default:active, fieldset[disabled] .btn-default.active { + background-color: #ecefef; + color: #b4b4b4; +} + +/* line 80, ../../src/pivotal-ui/components/buttons.scss */ +.btn-default-alt { + color: #2185c5; + background-color: #F8F8F8; + border: none; + -webkit-transition: all 300ms ease-out; + -moz-transition: all 300ms ease-out; + transition: all 300ms ease-out; + box-shadow: 0 3px 0 rgba(0, 0, 0, 0.07); +} +/* line 24, ../../src/pivotal-ui/components/mixins.scss */ +.btn-default-alt:hover, .btn-default-alt:focus, .btn-default-alt:active, .btn-default-alt.active { + color: #2185c5; + background-color: #ecefef; + outline: none; +} +/* line 32, ../../src/pivotal-ui/components/mixins.scss */ +.open .btn-default-alt.dropdown-toggle { + color: #2185c5; + background-color: #ecefef; +} +/* line 36, ../../src/pivotal-ui/components/mixins.scss */ +.btn-default-alt:active, .btn-default-alt.active { + background-image: none; +} +/* line 40, ../../src/pivotal-ui/components/mixins.scss */ +.open .btn-default-alt.dropdown-toggle { + background-image: none; +} +/* line 46, ../../src/pivotal-ui/components/mixins.scss */ +.btn-default-alt.disabled, .btn-default-alt.disabled:hover, .btn-default-alt.disabled:focus, .btn-default-alt.disabled:active, .btn-default-alt.disabled.active, .btn-default-alt[disabled], .btn-default-alt[disabled]:hover, .btn-default-alt[disabled]:focus, .btn-default-alt[disabled]:active, .btn-default-alt[disabled].active, fieldset[disabled] .btn-default-alt, fieldset[disabled] .btn-default-alt:hover, fieldset[disabled] .btn-default-alt:focus, fieldset[disabled] .btn-default-alt:active, fieldset[disabled] .btn-default-alt.active { + background-color: #ecefef; + color: #b4b4b4; +} +/* line 59, ../../src/pivotal-ui/components/mixins.scss */ +.btn-default-alt:hover, .btn-default-alt:focus, .btn-default-alt:active, .btn-default-alt.active { + box-shadow: 0 3px 0 rgba(0, 0, 0, 0.14); +} + +/* line 85, ../../src/pivotal-ui/components/buttons.scss */ +.btn-primary { + color: #2185c5; + background-color: white; + border: none; + -webkit-transition: all 300ms ease-out; + -moz-transition: all 300ms ease-out; + transition: all 300ms ease-out; + box-shadow: 0 3px 0 rgba(0, 0, 0, 0.07); +} +/* line 24, ../../src/pivotal-ui/components/mixins.scss */ +.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active { + color: #2185c5; + background-color: white; + outline: none; +} +/* line 32, ../../src/pivotal-ui/components/mixins.scss */ +.open .btn-primary.dropdown-toggle { + color: #2185c5; + background-color: white; +} +/* line 36, ../../src/pivotal-ui/components/mixins.scss */ +.btn-primary:active, .btn-primary.active { + background-image: none; +} +/* line 40, ../../src/pivotal-ui/components/mixins.scss */ +.open .btn-primary.dropdown-toggle { + background-image: none; +} +/* line 46, ../../src/pivotal-ui/components/mixins.scss */ +.btn-primary.disabled, .btn-primary.disabled:hover, .btn-primary.disabled:focus, .btn-primary.disabled:active, .btn-primary.disabled.active, .btn-primary[disabled], .btn-primary[disabled]:hover, .btn-primary[disabled]:focus, .btn-primary[disabled]:active, .btn-primary[disabled].active, fieldset[disabled] .btn-primary, fieldset[disabled] .btn-primary:hover, fieldset[disabled] .btn-primary:focus, fieldset[disabled] .btn-primary:active, fieldset[disabled] .btn-primary.active { + background-color: #ecefef; + color: #b4b4b4; +} +/* line 59, ../../src/pivotal-ui/components/mixins.scss */ +.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active { + box-shadow: 0 3px 0 rgba(0, 0, 0, 0.14); +} + +/* line 90, ../../src/pivotal-ui/components/buttons.scss */ +.btn-highlight { + color: white; + background-color: #2185c5; + border: none; + -webkit-transition: all 300ms ease-out; + -moz-transition: all 300ms ease-out; + transition: all 300ms ease-out; + box-shadow: 0 3px 0 rgba(0, 0, 0, 0.07); +} +/* line 24, ../../src/pivotal-ui/components/mixins.scss */ +.btn-highlight:hover, .btn-highlight:focus, .btn-highlight:active, .btn-highlight.active { + color: white; + background-color: #1a739e; + outline: none; +} +/* line 32, ../../src/pivotal-ui/components/mixins.scss */ +.open .btn-highlight.dropdown-toggle { + color: white; + background-color: #1a739e; +} +/* line 36, ../../src/pivotal-ui/components/mixins.scss */ +.btn-highlight:active, .btn-highlight.active { + background-image: none; +} +/* line 40, ../../src/pivotal-ui/components/mixins.scss */ +.open .btn-highlight.dropdown-toggle { + background-image: none; +} +/* line 46, ../../src/pivotal-ui/components/mixins.scss */ +.btn-highlight.disabled, .btn-highlight.disabled:hover, .btn-highlight.disabled:focus, .btn-highlight.disabled:active, .btn-highlight.disabled.active, .btn-highlight[disabled], .btn-highlight[disabled]:hover, .btn-highlight[disabled]:focus, .btn-highlight[disabled]:active, .btn-highlight[disabled].active, fieldset[disabled] .btn-highlight, fieldset[disabled] .btn-highlight:hover, fieldset[disabled] .btn-highlight:focus, fieldset[disabled] .btn-highlight:active, fieldset[disabled] .btn-highlight.active { + background-color: #ecefef; + color: #b4b4b4; +} +/* line 59, ../../src/pivotal-ui/components/mixins.scss */ +.btn-highlight:hover, .btn-highlight:focus, .btn-highlight:active, .btn-highlight.active { + box-shadow: 0 3px 0 rgba(0, 0, 0, 0.14); +} + +/* line 95, ../../src/pivotal-ui/components/buttons.scss */ +.btn-highlight-alt { + color: white; + background-color: #00a79d; + border: none; + -webkit-transition: all 300ms ease-out; + -moz-transition: all 300ms ease-out; + transition: all 300ms ease-out; + box-shadow: 0 3px 0 rgba(0, 0, 0, 0.07); +} +/* line 24, ../../src/pivotal-ui/components/mixins.scss */ +.btn-highlight-alt:hover, .btn-highlight-alt:focus, .btn-highlight-alt:active, .btn-highlight-alt.active { + color: white; + background-color: #00776d; + outline: none; +} +/* line 32, ../../src/pivotal-ui/components/mixins.scss */ +.open .btn-highlight-alt.dropdown-toggle { + color: white; + background-color: #00776d; +} +/* line 36, ../../src/pivotal-ui/components/mixins.scss */ +.btn-highlight-alt:active, .btn-highlight-alt.active { + background-image: none; +} +/* line 40, ../../src/pivotal-ui/components/mixins.scss */ +.open .btn-highlight-alt.dropdown-toggle { + background-image: none; +} +/* line 46, ../../src/pivotal-ui/components/mixins.scss */ +.btn-highlight-alt.disabled, .btn-highlight-alt.disabled:hover, .btn-highlight-alt.disabled:focus, .btn-highlight-alt.disabled:active, .btn-highlight-alt.disabled.active, .btn-highlight-alt[disabled], .btn-highlight-alt[disabled]:hover, .btn-highlight-alt[disabled]:focus, .btn-highlight-alt[disabled]:active, .btn-highlight-alt[disabled].active, fieldset[disabled] .btn-highlight-alt, fieldset[disabled] .btn-highlight-alt:hover, fieldset[disabled] .btn-highlight-alt:focus, fieldset[disabled] .btn-highlight-alt:active, fieldset[disabled] .btn-highlight-alt.active { + background-color: #ecefef; + color: #b4b4b4; +} +/* line 59, ../../src/pivotal-ui/components/mixins.scss */ +.btn-highlight-alt:hover, .btn-highlight-alt:focus, .btn-highlight-alt:active, .btn-highlight-alt.active { + box-shadow: 0 3px 0 rgba(0, 0, 0, 0.14); +} + +/* line 100, ../../src/pivotal-ui/components/buttons.scss */ +.btn-lowlight { + color: #686868; + background-color: transparent; + border: none; + -webkit-transition: all 300ms ease-out; + -moz-transition: all 300ms ease-out; + transition: all 300ms ease-out; +} +/* line 24, ../../src/pivotal-ui/components/mixins.scss */ +.btn-lowlight:hover, .btn-lowlight:focus, .btn-lowlight:active, .btn-lowlight.active { + color: #686868; + background-color: rgba(255, 255, 255, 0.6); + outline: none; +} +/* line 32, ../../src/pivotal-ui/components/mixins.scss */ +.open .btn-lowlight.dropdown-toggle { + color: #686868; + background-color: rgba(255, 255, 255, 0.6); +} +/* line 36, ../../src/pivotal-ui/components/mixins.scss */ +.btn-lowlight:active, .btn-lowlight.active { + background-image: none; +} +/* line 40, ../../src/pivotal-ui/components/mixins.scss */ +.open .btn-lowlight.dropdown-toggle { + background-image: none; +} +/* line 46, ../../src/pivotal-ui/components/mixins.scss */ +.btn-lowlight.disabled, .btn-lowlight.disabled:hover, .btn-lowlight.disabled:focus, .btn-lowlight.disabled:active, .btn-lowlight.disabled.active, .btn-lowlight[disabled], .btn-lowlight[disabled]:hover, .btn-lowlight[disabled]:focus, .btn-lowlight[disabled]:active, .btn-lowlight[disabled].active, fieldset[disabled] .btn-lowlight, fieldset[disabled] .btn-lowlight:hover, fieldset[disabled] .btn-lowlight:focus, fieldset[disabled] .btn-lowlight:active, fieldset[disabled] .btn-lowlight.active { + background-color: #ecefef; + color: #b4b4b4; +} + +/* line 105, ../../src/pivotal-ui/components/buttons.scss */ +.btn-danger { + color: white; + background-color: #ff434c; + border: none; + -webkit-transition: all 300ms ease-out; + -moz-transition: all 300ms ease-out; + transition: all 300ms ease-out; + box-shadow: 0 3px 0 rgba(0, 0, 0, 0.07); +} +/* line 24, ../../src/pivotal-ui/components/mixins.scss */ +.btn-danger:hover, .btn-danger:focus, .btn-danger:active, .btn-danger.active { + color: white; + background-color: #eb3d46; + outline: none; +} +/* line 32, ../../src/pivotal-ui/components/mixins.scss */ +.open .btn-danger.dropdown-toggle { + color: white; + background-color: #eb3d46; +} +/* line 36, ../../src/pivotal-ui/components/mixins.scss */ +.btn-danger:active, .btn-danger.active { + background-image: none; +} +/* line 40, ../../src/pivotal-ui/components/mixins.scss */ +.open .btn-danger.dropdown-toggle { + background-image: none; +} +/* line 46, ../../src/pivotal-ui/components/mixins.scss */ +.btn-danger.disabled, .btn-danger.disabled:hover, .btn-danger.disabled:focus, .btn-danger.disabled:active, .btn-danger.disabled.active, .btn-danger[disabled], .btn-danger[disabled]:hover, .btn-danger[disabled]:focus, .btn-danger[disabled]:active, .btn-danger[disabled].active, fieldset[disabled] .btn-danger, fieldset[disabled] .btn-danger:hover, fieldset[disabled] .btn-danger:focus, fieldset[disabled] .btn-danger:active, fieldset[disabled] .btn-danger.active { + background-color: #ecefef; + color: #b4b4b4; +} +/* line 59, ../../src/pivotal-ui/components/mixins.scss */ +.btn-danger:hover, .btn-danger:focus, .btn-danger:active, .btn-danger.active { + box-shadow: 0 3px 0 rgba(0, 0, 0, 0.14); +} + +/*doc +--- +title: Sizes +name: button_sizes +parent: button +--- + +There are two sizes for buttons: Large and default. Simply apply the +size modifier class for the desired size. + +```html_example_table + + + +``` + +*/ +/* line 128, ../../src/pivotal-ui/components/buttons.scss */ +.btn-lg, .btn-group-lg > .btn { + padding: 10px 26px; + font-size: 19px; + line-height: 1.33; + border-radius: 3px; +} + +/*doc +--- +title: Links +name: link +categories: + - Elements + - All +--- + +There are five 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. + +```haml_example +%a{href: "http://google.com"} + %i.fa.fa-plus + link with an icon +``` + +Link | Class | Description +-------------------------------------------------------------------------------- | ------------------ | ----------- +default link | | This is what buttons look like, this is the go to button style. +lowlight link | `link-lowlight` | I'm afraid I can't let you do that, yet. +lowlight link alternate | `link-lowlight-alt` | Less important links +inverse link | `link-inverse` | I go on a non-white background + +*/ +/* line 27, ../../src/pivotal-ui/components/links.scss */ +a { + -webkit-transition: all 300ms ease-out; + -moz-transition: all 300ms ease-out; + transition: all 300ms ease-out; +} + +/* line 31, ../../src/pivotal-ui/components/links.scss */ +a:hover { + cursor: pointer; +} + +/* line 36, ../../src/pivotal-ui/components/links.scss */ +.link-lowlight { + font-weight: 700; + color: #a7c9e0; +} +/* line 39, ../../src/pivotal-ui/components/links.scss */ +.link-lowlight:hover { + color: #2185c5; + text-decoration: none; +} + +/* line 45, ../../src/pivotal-ui/components/links.scss */ +.link-lowlight-alt { + color: #8d8e8e; +} +/* line 47, ../../src/pivotal-ui/components/links.scss */ +.link-lowlight-alt:hover { + color: #1a739e; +} + +/* line 52, ../../src/pivotal-ui/components/links.scss */ +.link-inverse { + color: #49a8d5; +} +/* line 55, ../../src/pivotal-ui/components/links.scss */ +.link-inverse:hover { + color: #a7c9e0; +} + +/*pending +--- +title: Gentle Scroll Links +name: gentle-scroll +categories: + - Utilities + - JavaScript + - 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. + +```haml_example +%a.btn.btn-default{"data-behavior" => "GentleScroll", :href => "#scroll-target"} Scroll Trigger +``` +It can scroll to anything, in this case, we'll use a text input. + +```haml_example +%input#scroll-target.form-control{:type => "text", :placeholder => "Scroll target"} +``` +*/ +/*doc +--- +title: Grids +name: grid +categories: + - Layout + - All +--- + +

+ 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 behaviorhorizontal at all timescollapsed to start, horizontal above breakpoints
container widthnone (auto)750px970px1170px
class prefix.col-xs-.col-sm-.col-md-.col-lg-
# of columns24
column widthauto~62px~81px~97px
gutter width30px (15px on each side of a column)
nestableyes
offsetsyes
column orderingyes
+ +*/ +/*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.

+
+ +```html_example +
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+ +
+
+
+
+
+ +
+
+
+
+``` +*/ +/*doc +--- +title: "Example: Mobile and Desktop" +name: 04_a_grid_mobile_and_desktop +parent: 04_grid_examples +--- + +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. + +```html_example + +
+
+
+
+ + +
+
+
+
+
+ + +
+
+
+
+``` + +*/ +/*doc +--- +title: "Example: Mobile, Tablet, Desktops" +name: 04_b_grid_mobile_tablet_desktop +parent: 04_grid_examples +--- + +Build on the previous example by creating even more dynamic and powerful layouts +with tablet `.col-sm-*` classes. + +```html_example +
+
+
+
+
+
+
+ +
+
+
+``` + +*/ +/*doc +--- +title: "Example: Column Wrapping" +name: 04_c_grid_column_wrapping +parent: 04_grid_examples +--- + +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. + +```html_example +
+
+
+
+
+
+
+
+``` + +**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. + +*/ +/*doc +--- +title: Gutter Sizes +name: 04_grid_gutter_sizes +parent: grid +--- + +You can change the size of a row's gutters with these classes. + +Class | Padding between columns +---------------- | -------------------------- +default | 20px +`.row-gutter-md` | 10px +`.row-gutter-sm` | 5px + +Here's what the gutters look like in action. + +```html_example_table +
+
+
+
+ +
+
+
+
+ +
+
+
+
+``` +*/ +/* line 332, ../../src/pivotal-ui/components/grids.scss */ +.row-gutter-sm { + margin-left: -2px; + margin-right: -2px; +} +/* line 336, ../../src/pivotal-ui/components/grids.scss */ +.row-gutter-sm > [class^="col"] { + padding-left: 2px; + padding-right: 2px; +} + +/* line 342, ../../src/pivotal-ui/components/grids.scss */ +.row-gutter-md { + margin-left: -5px; + margin-right: -5px; +} +/* line 346, ../../src/pivotal-ui/components/grids.scss */ +.row-gutter-md > [class^="col"] { + padding-left: 5px; + padding-right: 5px; +} + +/*doc +--- +title: Responsive Column Resets +name: 08_grid_column_resets +parent: grid +--- + +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][responsive_utilities]. + +```html_example +
+
+
+ + +
+ +
+
+
+``` + +*/ +/*doc +--- +title: Offsetting Columns +name: 09_grid_offsetting +parent: grid +--- + +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. + +```html_example +
+
+
+
+
+
+
+
+
+
+
+``` + +*/ +/*doc +--- +title: Column Ordering +name: 10_grid_ordering +parent: grid +--- + +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. + +```html_example +
+
+
+
+``` + +*/ +@media (min-width: 1800px) { + /* line 27, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-13, .col-xl-14, .col-xl-15, .col-xl-16, .col-xl-17, .col-xl-18, .col-xl-19, .col-xl-20, .col-xl-21, .col-xl-22, .col-xl-23, .col-xl-24 { + float: left; + } + + /* line 35, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-xl-1 { + width: 4.16667%; + } + + /* line 35, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-xl-2 { + width: 8.33333%; + } + + /* line 35, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-xl-3 { + width: 12.5%; + } + + /* line 35, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-xl-4 { + width: 16.66667%; + } + + /* line 35, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-xl-5 { + width: 20.83333%; + } + + /* line 35, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-xl-6 { + width: 25%; + } + + /* line 35, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-xl-7 { + width: 29.16667%; + } + + /* line 35, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-xl-8 { + width: 33.33333%; + } + + /* line 35, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-xl-9 { + width: 37.5%; + } + + /* line 35, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-xl-10 { + width: 41.66667%; + } + + /* line 35, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-xl-11 { + width: 45.83333%; + } + + /* line 35, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-xl-12 { + width: 50%; + } + + /* line 35, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-xl-13 { + width: 54.16667%; + } + + /* line 35, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-xl-14 { + width: 58.33333%; + } + + /* line 35, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-xl-15 { + width: 62.5%; + } + + /* line 35, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-xl-16 { + width: 66.66667%; + } + + /* line 35, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-xl-17 { + width: 70.83333%; + } + + /* line 35, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-xl-18 { + width: 75%; + } + + /* line 35, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-xl-19 { + width: 79.16667%; + } + + /* line 35, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-xl-20 { + width: 83.33333%; + } + + /* line 35, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-xl-21 { + width: 87.5%; + } + + /* line 35, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-xl-22 { + width: 91.66667%; + } + + /* line 35, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-xl-23 { + width: 95.83333%; + } + + /* line 35, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-xl-24 { + width: 100%; + } + + /* line 55, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-xl-pull-0 { + right: auto; + } + + /* line 50, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-xl-pull-1 { + right: 4.16667%; + } + + /* line 50, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-xl-pull-2 { + right: 8.33333%; + } + + /* line 50, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-xl-pull-3 { + right: 12.5%; + } + + /* line 50, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-xl-pull-4 { + right: 16.66667%; + } + + /* line 50, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-xl-pull-5 { + right: 20.83333%; + } + + /* line 50, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-xl-pull-6 { + right: 25%; + } + + /* line 50, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-xl-pull-7 { + right: 29.16667%; + } + + /* line 50, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-xl-pull-8 { + right: 33.33333%; + } + + /* line 50, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-xl-pull-9 { + right: 37.5%; + } + + /* line 50, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-xl-pull-10 { + right: 41.66667%; + } + + /* line 50, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-xl-pull-11 { + right: 45.83333%; + } + + /* line 50, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-xl-pull-12 { + right: 50%; + } + + /* line 50, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-xl-pull-13 { + right: 54.16667%; + } + + /* line 50, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-xl-pull-14 { + right: 58.33333%; + } + + /* line 50, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-xl-pull-15 { + right: 62.5%; + } + + /* line 50, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-xl-pull-16 { + right: 66.66667%; + } + + /* line 50, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-xl-pull-17 { + right: 70.83333%; + } + + /* line 50, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-xl-pull-18 { + right: 75%; + } + + /* line 50, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-xl-pull-19 { + right: 79.16667%; + } + + /* line 50, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-xl-pull-20 { + right: 83.33333%; + } + + /* line 50, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-xl-pull-21 { + right: 87.5%; + } + + /* line 50, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-xl-pull-22 { + right: 91.66667%; + } + + /* line 50, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-xl-pull-23 { + right: 95.83333%; + } + + /* line 50, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-xl-pull-24 { + right: 100%; + } + + /* line 45, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-xl-push-0 { + left: auto; + } + + /* line 40, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-xl-push-1 { + left: 4.16667%; + } + + /* line 40, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-xl-push-2 { + left: 8.33333%; + } + + /* line 40, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-xl-push-3 { + left: 12.5%; + } + + /* line 40, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-xl-push-4 { + left: 16.66667%; + } + + /* line 40, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-xl-push-5 { + left: 20.83333%; + } + + /* line 40, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-xl-push-6 { + left: 25%; + } + + /* line 40, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-xl-push-7 { + left: 29.16667%; + } + + /* line 40, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-xl-push-8 { + left: 33.33333%; + } + + /* line 40, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-xl-push-9 { + left: 37.5%; + } + + /* line 40, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-xl-push-10 { + left: 41.66667%; + } + + /* line 40, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-xl-push-11 { + left: 45.83333%; + } + + /* line 40, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-xl-push-12 { + left: 50%; + } + + /* line 40, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-xl-push-13 { + left: 54.16667%; + } + + /* line 40, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-xl-push-14 { + left: 58.33333%; + } + + /* line 40, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-xl-push-15 { + left: 62.5%; + } + + /* line 40, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-xl-push-16 { + left: 66.66667%; + } + + /* line 40, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-xl-push-17 { + left: 70.83333%; + } + + /* line 40, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-xl-push-18 { + left: 75%; + } + + /* line 40, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-xl-push-19 { + left: 79.16667%; + } + + /* line 40, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-xl-push-20 { + left: 83.33333%; + } + + /* line 40, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-xl-push-21 { + left: 87.5%; + } + + /* line 40, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-xl-push-22 { + left: 91.66667%; + } + + /* line 40, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-xl-push-23 { + left: 95.83333%; + } + + /* line 40, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-xl-push-24 { + left: 100%; + } + + /* line 60, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-xl-offset-0 { + margin-left: 0%; + } + + /* line 60, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-xl-offset-1 { + margin-left: 4.16667%; + } + + /* line 60, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-xl-offset-2 { + margin-left: 8.33333%; + } + + /* line 60, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-xl-offset-3 { + margin-left: 12.5%; + } + + /* line 60, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-xl-offset-4 { + margin-left: 16.66667%; + } + + /* line 60, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-xl-offset-5 { + margin-left: 20.83333%; + } + + /* line 60, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-xl-offset-6 { + margin-left: 25%; + } + + /* line 60, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-xl-offset-7 { + margin-left: 29.16667%; + } + + /* line 60, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-xl-offset-8 { + margin-left: 33.33333%; + } + + /* line 60, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-xl-offset-9 { + margin-left: 37.5%; + } + + /* line 60, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-xl-offset-10 { + margin-left: 41.66667%; + } + + /* line 60, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-xl-offset-11 { + margin-left: 45.83333%; + } + + /* line 60, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-xl-offset-12 { + margin-left: 50%; + } + + /* line 60, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-xl-offset-13 { + margin-left: 54.16667%; + } + + /* line 60, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-xl-offset-14 { + margin-left: 58.33333%; + } + + /* line 60, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-xl-offset-15 { + margin-left: 62.5%; + } + + /* line 60, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-xl-offset-16 { + margin-left: 66.66667%; + } + + /* line 60, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-xl-offset-17 { + margin-left: 70.83333%; + } + + /* line 60, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-xl-offset-18 { + margin-left: 75%; + } + + /* line 60, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-xl-offset-19 { + margin-left: 79.16667%; + } + + /* line 60, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-xl-offset-20 { + margin-left: 83.33333%; + } + + /* line 60, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-xl-offset-21 { + margin-left: 87.5%; + } + + /* line 60, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-xl-offset-22 { + margin-left: 91.66667%; + } + + /* line 60, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-xl-offset-23 { + margin-left: 95.83333%; + } + + /* line 60, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework.scss */ + .col-xl-offset-24 { + margin-left: 100%; + } +} +/*pending +--- +title: Responsive +name: grid_responsive +parent: grid +--- + +Having trouble debugging grids? You can also set `$grids-debug: true` in the `grids.css.scss` file. +This will allow you to visualize the changes taking place at different device widths. + +*/ +/*doc +--- +title: Media +name: media +categories: + - Layout + - All +--- + +The default media displays a media object (images, video, audio) to the left or right of a content block. + +```haml_example +.media + %a.media-left{:href => "#"} + %img.media-object{:alt => "...", :src => "http://placehold.it/64x64"} + .media-body + %h4.media-heading Media heading + 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. + +.media + .media-body + %h4.media-heading Media heading + 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. + %a.media-right{:href => "#"} + %img.media-object{:alt => "...", :src => "http://placehold.it/64x64"} +``` + +Wrap the image in a fixed-size `.image-container` to make sure the image isn't +larger than the container + +```haml_example +.media + %a.media-left{:href => "#"} + .image-container{style: "width: 100px; height: 50px;"} + %img.media-object{:alt => "...", :src => "http://placehold.it/64x64"} + .media-body + %h4.media-heading Media heading + %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. +``` + +You can also nest media objects inside of each other (useful for comment threads or articles lists). + +```haml_example + +.media + %a.media-left{:href => "#"} + %img.media-object{:alt => "...", :src => "http://placehold.it/64x64"} + .media-body + %h4.media-heading Media heading + %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. + + / Nested media object + .media + %a.media-left{:href => "#"} + %img.media-object{:alt => "...", :src => "http://placehold.it/64x64"} + .media-body + %h4.media-heading Nested media heading + 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 + .media + %a.media-left{:href => "#"} + %img.media-object{:alt => "...", :src => "http://placehold.it/64x64"} + .media-body + %h4.media-heading Nested media heading + 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 + .media + %a.media-left{:href => "#"} + %img.media-object{:alt => "...", :src => "http://placehold.it/64x64"} + .media-body + %h4.media-heading Nested media heading + 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. +``` +*/ +/*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. + +```haml_example +.media + %a.media-left{:href => "#"} + %img.media-object{:alt => "...", :src => "http://placehold.it/40x40"} + .media-body + %h4.media-heading Top aligned media + 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. + +.media + %a.media-left.media-middle{:href => "#"} + %img.media-object{:alt => "...", :src => "http://placehold.it/40x40"} + .media-body + %h4.media-heading Middle aligned media + 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. + +.media + %a.media-left.media-bottom{:href => "#"} + %img.media-object{:alt => "...", :src => "http://placehold.it/40x40"} + .media-body + %h4.media-heading Bottom aligned media + 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. +``` +*/ +/*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. + +```haml_example +.media.media-stackable-xs + %a.media-left{:href => "#"} + %img.media-object{:alt => "...", :src => "http://placehold.it/100x100"} + .media-body + %p Extra-small stackable + +.media.media-stackable-sm + %a.media-left{:href => "#"} + %img.media-object{:alt => "...", :src => "http://placehold.it/100x100"} + .media-body + %p Small stackable + +.media.media-stackable-md + %a.media-left{:href => "#"} + %img.media-object{:alt => "...", :src => "http://placehold.it/100x100"} + .media-body + %p Medium stackable + +.media.media-stackable-lg + %a.media-left{:href => "#"} + %img.media-object{:alt => "...", :src => "http://placehold.it/100x100"} + .media-body + %p Large stackable +``` +*/ +@media (max-width: 480px) { + /* line 156, ../../src/pivotal-ui/components/media.scss */ + .media.media-stackable-xs > .pull-left, .media.media-stackable-xs .media-left { + display: block; + float: none; + clear: both; + margin: 0 auto 10px auto !important; + } + /* line 161, ../../src/pivotal-ui/components/media.scss */ + .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) { + /* line 156, ../../src/pivotal-ui/components/media.scss */ + .media.media-stackable-sm > .pull-left, .media.media-stackable-sm .media-left { + display: block; + float: none; + clear: both; + margin: 0 auto 10px auto !important; + } + /* line 161, ../../src/pivotal-ui/components/media.scss */ + .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) { + /* line 156, ../../src/pivotal-ui/components/media.scss */ + .media.media-stackable-md > .pull-left, .media.media-stackable-md .media-left { + display: block; + float: none; + clear: both; + margin: 0 auto 10px auto !important; + } + /* line 161, ../../src/pivotal-ui/components/media.scss */ + .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) { + /* line 156, ../../src/pivotal-ui/components/media.scss */ + .media.media-stackable-lg > .pull-left, .media.media-stackable-lg .media-left { + display: block; + float: none; + clear: both; + margin: 0 auto 10px auto !important; + } + /* line 161, ../../src/pivotal-ui/components/media.scss */ + .media.media-stackable-lg > .pull-left .media-object, .media.media-stackable-lg .media-left .media-object { + margin-left: auto; + margin-right: auto; + } +} + +/* To be removed when Bootstrap accepts PR #14801 and releases a new version */ +/* line 188, ../../src/pivotal-ui/components/media.scss */ +.media { + margin-top: 15px; +} +/* line 193, ../../src/pivotal-ui/components/media.scss */ +.media .media-right, +.media .pull-right { + padding-left: 10px; +} +/* line 199, ../../src/pivotal-ui/components/media.scss */ +.media .media-left, +.media .pull-left { + padding-right: 10px; +} +/* line 204, ../../src/pivotal-ui/components/media.scss */ +.media:first-child { + margin-top: 0; +} +/* line 208, ../../src/pivotal-ui/components/media.scss */ +.media .media-left, +.media .media-right, +.media .media-body { + display: table-cell; + vertical-align: top; +} +/* line 215, ../../src/pivotal-ui/components/media.scss */ +.media .media-middle { + vertical-align: middle; +} +/* line 219, ../../src/pivotal-ui/components/media.scss */ +.media .media-bottom { + vertical-align: bottom; +} + +/*doc +--- +title: Tables +name: table +categories: + - Objects + - All +--- + + +Class | Description +--------------------- | ----------------- +`.table` | Base table class, applies spacing and cross browser support. Unfortunately inherits some undesirable styles from bootstrap. +`.table-hover` | Adds a light blue background color to table rows when the user hovers over them (use to indicate clickability) +`.table-striped` | Applies zebra striping to a table. + +*/ +/*pending +--- +title: JS Tables +name: table_js +categories: + - JavaScript + - All +--- + +This section contains different table behaviors. See [tables][table] to see different table styles. +*/ +/* line 33, ../../src/pivotal-ui/components/tables.scss */ +.table-hack .thead, .table-hack .tbody { + padding: 0 15px; +} +/* line 36, ../../src/pivotal-ui/components/tables.scss */ +.table-hack .th { + padding: 8px 15px; +} +/* line 39, ../../src/pivotal-ui/components/tables.scss */ +.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. + +```haml_example + +%table.table.table-data.table-light + %thead + %tr + %th + Service Instance + %th + Service Plan + %th + Bound Apps + %tbody + %tr + %td + oracle-db-sct + %td + Oracle DB + %td + 12 + %tr + %td + oracle-db-sct + %td + Oracle DB + %td + 12 + %tr + %td + oracle-db-sct + %td + Oracle DB + %td + 12 + %tr + %td + oracle-db-sct + %td + Oracle DB + %td + 12 +``` + +*/ +/* line 104, ../../src/pivotal-ui/components/tables.scss */ +.table-data { + border: none; +} +/* line 107, ../../src/pivotal-ui/components/tables.scss */ +.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; +} +/* line 109, ../../src/pivotal-ui/components/tables.scss */ +.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; +} +/* line 117, ../../src/pivotal-ui/components/tables.scss */ +.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; +} +/* line 120, ../../src/pivotal-ui/components/tables.scss */ +.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; +} +/* line 125, ../../src/pivotal-ui/components/tables.scss */ +.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; +} +/* line 133, ../../src/pivotal-ui/components/tables.scss */ +.table-data tbody tr, .table-data tbody .tr, .table-data .tbody tr, .table-data .tbody .tr { + background-color: #ecefef; +} +/* line 135, ../../src/pivotal-ui/components/tables.scss */ +.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; + -moz-transition: background-color 300ms ease-out; + transition: background-color 300ms ease-out; + background-color: #F8F8F8; +} +/* line 141, ../../src/pivotal-ui/components/tables.scss */ +.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); +} +/* line 148, ../../src/pivotal-ui/components/tables.scss */ +.table-data > thead > tr, .table-data > .thead > .tr { + text-transform: uppercase; +} +/* line 152, ../../src/pivotal-ui/components/tables.scss */ +.table-data > thead > tr > th, .table-data > thead > tr > .th, .table-data > .thead > .tr > th, .table-data > .thead > .tr > .th { + color: #686868; +} +/* line 159, ../../src/pivotal-ui/components/tables.scss */ +.table-data.table-light tbody tr, .table-data.table-light tbody .tr, .table-data.table-light thead tr, .table-data.table-light thead .tr, .table-data.table-light .tbody tr, .table-data.table-light .tbody .tr, .table-data.table-light .thead tr, .table-data.table-light .thead .tr { + background-color: #F8F8F8; +} +/* line 161, ../../src/pivotal-ui/components/tables.scss */ +.table-data.table-light tbody tr th, .table-data.table-light tbody tr .th, .table-data.table-light tbody tr td, .table-data.table-light tbody tr .td, .table-data.table-light tbody .tr th, .table-data.table-light tbody .tr .th, .table-data.table-light tbody .tr td, .table-data.table-light tbody .tr .td, .table-data.table-light thead tr th, .table-data.table-light thead tr .th, .table-data.table-light thead tr td, .table-data.table-light thead tr .td, .table-data.table-light thead .tr th, .table-data.table-light thead .tr .th, .table-data.table-light thead .tr td, .table-data.table-light thead .tr .td, .table-data.table-light .tbody tr th, .table-data.table-light .tbody tr .th, .table-data.table-light .tbody tr td, .table-data.table-light .tbody tr .td, .table-data.table-light .tbody .tr th, .table-data.table-light .tbody .tr .th, .table-data.table-light .tbody .tr td, .table-data.table-light .tbody .tr .td, .table-data.table-light .thead tr th, .table-data.table-light .thead tr .th, .table-data.table-light .thead tr td, .table-data.table-light .thead tr .td, .table-data.table-light .thead .tr th, .table-data.table-light .thead .tr .th, .table-data.table-light .thead .tr td, .table-data.table-light .thead .tr .td { + background-color: #F8F8F8; +} +/* line 164, ../../src/pivotal-ui/components/tables.scss */ +.table-data.table-light tbody tr td, .table-data.table-light tbody tr .td, .table-data.table-light tbody .tr td, .table-data.table-light tbody .tr .td, .table-data.table-light thead tr td, .table-data.table-light thead tr .td, .table-data.table-light thead .tr td, .table-data.table-light thead .tr .td, .table-data.table-light .tbody tr td, .table-data.table-light .tbody tr .td, .table-data.table-light .tbody .tr td, .table-data.table-light .tbody .tr .td, .table-data.table-light .thead tr td, .table-data.table-light .thead tr .td, .table-data.table-light .thead .tr td, .table-data.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. + + +```haml_example + +%table.table.table-key-value + %tbody + %tr + %th.col-md-8 Email + %td.col-md-16 joe@example.com + %tr + %th.col-md-8 Current Password + %td.col-md-16 ******* + %tr + %th.col-md-8 First Name + %td.col-md-16 Joe + %tr + %th.col-md-8 Last Name + %td.col-md-16 Bobs + %tr + %th.col-md-8 Phone + %td.col-md-16 415-555-0000 +``` + +*/ +/* line 205, ../../src/pivotal-ui/components/tables.scss */ +.table-key-value { + table-layout: fixed; +} +/* line 209, ../../src/pivotal-ui/components/tables.scss */ +.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; +} +/* line 216, ../../src/pivotal-ui/components/tables.scss */ +.table-key-value tbody tr:last-child { + border: none; +} +/* line 219, ../../src/pivotal-ui/components/tables.scss */ +.table-key-value tbody tr th, .table-key-value tbody tr td { + padding: 0; + margin: 0; +} +/* line 223, ../../src/pivotal-ui/components/tables.scss */ +.table-key-value tbody tr th { + text-transform: uppercase; + font-weight: 800; + text-align: left; + color: #b4b4b4; +} +/* line 229, ../../src/pivotal-ui/components/tables.scss */ +.table-key-value tbody tr td { + text-align: left; +} +/* line 231, ../../src/pivotal-ui/components/tables.scss */ +.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. + + + +```haml_example + +%table.table.table-data.table-hover{:'data-behavior' => 'ClickableTable'} + %thead + %tr + %th + Style + %th{colspan: 2} + Clickability + %tbody + %tr{:'data-target-path' => '/styleguide#link', :'data-prevent-click' => 'true', :'data-prevent-click-message' => "YOU'VE ENTERED THE FORBIDDEN ZONE"} + %td + Forbidden Links + %td + High + %td.txt-m.txt-r + %i.fa.fa-chevron-right.type-primary-4 + %tr{:'data-target-path' => '/styleguide#button'} + %td + Buttons + %td + Medium + %td.txt-m.txt-r + %i.fa.fa-chevron-right.type-primary-4 + %tr{:'data-target-path' => '/styleguide#type'} + %td + Typography + %td + Low + %td.txt-m.txt-r + %i.fa.fa-chevron-right.type-primary-4 +``` + +*/ +/* line 287, ../../src/pivotal-ui/components/tables.scss */ +.table-hover td { + cursor: pointer; +} + +/*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 */ +/*pending +--- +title: Angular Sortable Table +name: table_angular_sortable +parent: table_js +--- + +USE: + +1. Add a sorter in your controller scope that has a reference to the collection you want to sort. +2. Add "sortable" to any header/element which should trigger a sort (if the sortable directive doesn't do what you want, write a new one or just use ng-click. Please don't add more behavior to the current sortable). + +```haml_example + +%table.table.table-data.table-sortable{"ng-controller" => "ExampleSpaceDataTableCtrl", "ng-cloak" => true} + %thead + %tr + %th.txt-m{"sortable" => "name"} Name + %th{sortable: 'totalApps'} Total Apps + %th{sortable: 'runningApps'} Running Apps + %th{sortable: 'stoppedApps'} Stopped Apps + %th{sortable: 'downApps'} Down Apps + %th.txt-m{sortable: 'serviceInstances'} Service Instances + %th.txt-m{sortable: 'quota'} Quota + %tbody + %tr{"ng-repeat" => "tableItem in tableItems"} + %td {{tableItem.name}} + %td {{tableItem.totalApps}} + %td {{tableItem.runningApps}} + %td {{tableItem.stoppedApps}} + %td {{tableItem.downApps}} + %td {{tableItem.serviceInstances}} + %td {{tableItem.quota}} +``` +*/ +/* line 367, ../../src/pivotal-ui/components/tables.scss */ +.table-sortable th.sorted-desc { + color: #243640; +} +/* line 369, ../../src/pivotal-ui/components/tables.scss */ +.table-sortable th.sorted-desc:after { + content: "\f0d7"; + color: #243640; +} +/* line 375, ../../src/pivotal-ui/components/tables.scss */ +.table-sortable [sortable] { + cursor: pointer; +} +/* line 377, ../../src/pivotal-ui/components/tables.scss */ +.table-sortable [sortable]:after { + margin-left: 4px; + content: ""; + font-weight: 200; + font-family: FontAwesome; +} +/* line 383, ../../src/pivotal-ui/components/tables.scss */ +.table-sortable [sortable]:hover { + background-color: white; + -webkit-transition: background-color 300ms ease-out; + -moz-transition: background-color 300ms ease-out; + transition: background-color 300ms ease-out; +} +/* line 392, ../../src/pivotal-ui/components/tables.scss */ +.table-sortable th.sorted-none:hover:after { + visibility: visible; +} +/* line 395, ../../src/pivotal-ui/components/tables.scss */ +.table-sortable th.sorted-none:after { + content: "\f0dc"; + color: #d4d9d9; + visibility: hidden; +} +/* line 402, ../../src/pivotal-ui/components/tables.scss */ +.table-sortable th.sorted-asc { + color: #243640; +} +/* line 404, ../../src/pivotal-ui/components/tables.scss */ +.table-sortable th.sorted-asc:after { + content: "\f0d8"; + color: #243640; +} + +/*pending +--- +title: Inline Addable +name: table_inline_addable +parent: table_js +--- + +```haml_example +%div{"ng-controller" => "StyleguideAddableTableCtrl", 'ng-class' => '{editing: spaceTable.editing}', 'ng-cloak' => 'true'} + %p.txt-r + %a.btn.btn-default.state-adding-trigger{'ng-click' => 'spaceTable.enterEditMode()', href: "javascript:void(0);", "ng-disabled" => "spaceTable.newModel.saving"} + Add a Space + %table.table.table-data.table-addable + %thead.thead-state-viewing + %tr + %th.txt-m.col-md-8 + Name + %th.txt-m + Total Apps + %th.txt-m + Running Apps + %th.txt-m + Stopped Apps + %th.txt-m + Down Apps + %th.txt-m + Service Instance + %th.txt-m + Quota + %th.txt-m + %thead.state-editing-show + %tr + %th.txt-m + Name + %tbody + %tr.state-editing-show + %td + %form.td-state-adding.form-inline{'ng-submit' => 'spaceTable.save()', 'name' => 'newSpaceForm'} + .form-group.mll + %input.form-control{'ng-model' => 'spaceTable.newModel.name', + 'name' => 'name', + type: 'text', + autofocus: 'autofocus', + 'invalid-invalid' => 'true', + required: 'true', + 'ng-minlength' => 3, + 'aria-describedby' => "space-name-error"} + .form-group + %button.btn.btn-default{'type' => 'submit', 'ng-disabled' => '!spaceTable.newModel.name'} Add + %a.btn.btn-default{'ng-click' => 'spaceTable.cancel()'} Cancel + + #space-name-error.error-container.pal{"ng-show" => "newSpaceForm.name.$dirty && newSpaceForm.name.$invalid", role: 'alert'} + %span.error{"ng-show" => "newSpaceForm.name.$error.required"} Space name is required. + %span.error{"ng-show" => "newSpaceForm.name.$error.minlength"} Space name is required to be at least 3 characters. + %span.error{"ng-show" => "newSpaceForm.name.$error.invalidInvalid"} Space name cannot be invalid, literally. + %div{'ng-repeat' => 'error in spaceTable.newModel.serverErrors'} + %span.error {{error}} + + %tr.inline-table-item{'ng-repeat' => "space in spaceTable.collection.items"} + %td.pls.type-ellipsis-1-line{'ng-class' => '{saveRequested: space.saving}'} + .fa.fa-check.fa-check-success.ng-hide{'ng-show' => 'space.freshlySaved'} + {{space.name}} + %td {{space.totalApps}} + %td {{space.runningApps}} + %td {{space.stoppedApps}} + %td {{space.downApps}} + %td {{space.serviceInstances}} + %td {{space.quota}} + %td{ "data-confirmation-modal" => 'Are you sure you want to delete this space?', + 'data-confirmation-action' => 'spaceTable.destroy(space)', + 'data-confirmation-header' => 'Delete Space', + 'data-dangerous-action' => "true"} Delete +``` +*/ +/* line 487, ../../src/pivotal-ui/components/tables.scss */ +.editing .state-adding-trigger { + visibility: hidden; +} +/* line 491, ../../src/pivotal-ui/components/tables.scss */ +.editing .table-addable .thead-state-viewing, +.editing .table-addable .td-state-viewing { + display: none; +} +/* line 496, ../../src/pivotal-ui/components/tables.scss */ +.editing .table-addable td { + display: none; +} +/* line 499, ../../src/pivotal-ui/components/tables.scss */ +.editing .table-addable td:first-child { + display: table-cell; +} +/* line 502, ../../src/pivotal-ui/components/tables.scss */ +.editing .table-addable thead.state-editing-show { + display: table-header-group; +} +/* line 505, ../../src/pivotal-ui/components/tables.scss */ +.editing .table-addable tr.state-editing-show { + display: table-row; +} + +/* line 511, ../../src/pivotal-ui/components/tables.scss */ +.table-addable { + table-layout: fixed; +} +/* line 514, ../../src/pivotal-ui/components/tables.scss */ +.table-addable .state-editing-show { + display: none; +} +/* line 518, ../../src/pivotal-ui/components/tables.scss */ +.table-addable .state-adding-item-show { + display: none; +} +/* line 522, ../../src/pivotal-ui/components/tables.scss */ +.table-addable .inline-table-item.ng-enter.ng-enter-active { + opacity: 1; +} +/* line 524, ../../src/pivotal-ui/components/tables.scss */ +.table-addable .inline-table-item.ng-enter.ng-enter-active .addedConfirmation { + display: table-cell; +} +/* line 530, ../../src/pivotal-ui/components/tables.scss */ +.table-addable .inline-table-item .addedConfirmation { + color: forestgreen; +} +/* line 535, ../../src/pivotal-ui/components/tables.scss */ +.table-addable .fa-check-success { + color: #00a79d; + font-size: 12px; + margin-right: 5px; + -webkit-transition: opacity 300ms ease-out; + -moz-transition: opacity 300ms ease-out; + transition: opacity 300ms ease-out; + opacity: 1; +} +/* line 547, ../../src/pivotal-ui/components/tables.scss */ +.table-addable .fa-check-success.ng-hide { + display: inline-block !important; + opacity: 0; +} +/* line 552, ../../src/pivotal-ui/components/tables.scss */ +.table-addable .saveRequested { + opacity: 0.3; +} +/* line 556, ../../src/pivotal-ui/components/tables.scss */ +.table-addable .deleteRequested { + -webkit-transition: all ease-out .2s; + transition: all ease-out .2s; + color: #b4b4b4; +} +/* line 562, ../../src/pivotal-ui/components/tables.scss */ +.table-addable .ng-leave { + -webkit-transition: all ease-out .5s; + transition: all ease-out .5s; +} +/* line 567, ../../src/pivotal-ui/components/tables.scss */ +.table-addable .ng-leave.ng-leave-active { + color: #ecefef; +} +/* line 571, ../../src/pivotal-ui/components/tables.scss */ +.table-addable .saved { + opacity: 1; + -webkit-transition: all 300ms ease-out; + -moz-transition: all 300ms ease-out; + transition: all 300ms ease-out; +} + +/*pending +--- +title: Kitchen Sink +name: table_kitchen_sink +parent: table_js +--- + +Example of composed behaviors that operate on the same table. + +```haml_example +%div{"ng-controller" => "StyleguideKitchenSinkTableCtrl", 'ng-class' => '{editing: spaceTable.editing}', 'ng-cloak' => 'true'} + %p.txt-r + %a.btn.btn-default.state-adding-trigger{'ng-click' => 'spaceTable.enterEditMode()', href: "javascript:void(0);", "ng-disabled" => "spaceTable.newModel.saving"} + Add a Space + %table.table.table-data.table-sortable.table-addable + %thead.thead-state-viewing + %tr + %th.txt-m{sortable: "name"} Name + %th{sortable: 'totalApps'} Total Apps + %th{sortable: 'runningApps'} Running Apps + %th{sortable: 'stoppedApps'} Stopped Apps + %th{sortable: 'downApps'} Down Apps + %th.txt-m{sortable: 'serviceInstances'} Service Instances + %th.txt-m{sortable: 'quota'} Quota + %thead.state-editing-show + %tr + %th.txt-m + Name + %tbody + %tr.state-editing-show + %td + %form.td-state-adding.form-inline{'ng-submit' => 'spaceTable.save()', 'name' => 'newSpaceForm'} + .form-group.mll + %input.form-control{'ng-model' => 'spaceTable.newModel.name', + 'name' => 'name', + type: 'text', + autofocus: 'autofocus', + 'invalid-invalid' => 'true', + required: 'true', + 'ng-minlength' => 3, + 'aria-describedby' => "space-name-error"} + .form-group + %button.btn.btn-default{'type' => 'submit', 'ng-disabled' => '!spaceTable.newModel.name'} Add + %a.btn.btn-default{'ng-click' => 'spaceTable.cancel()'} Cancel + + #space-name-error.error-container.pal{"ng-show" => "newSpaceForm.name.$dirty && newSpaceForm.name.$invalid", role: 'alert'} + %span.error{"ng-show" => "newSpaceForm.name.$error.required"} Space name is required. + %span.error{"ng-show" => "newSpaceForm.name.$error.minlength"} Space name is required to be at least 3 characters. + %span.error{"ng-show" => "newSpaceForm.name.$error.invalidInvalid"} Space name cannot be invalid, literally. + %div{'ng-repeat' => 'error in spaceTable.newModel.serverErrors'} + %span.error {{error}} + + %tr{"ng-repeat" => "space in spaceTable.collection.items"} + %td.pls.type-ellipsis-1-line{'ng-class' => '{saveRequested: space.saving}'} + .fa.fa-check.fa-check-success.ng-hide{'ng-show' => 'space.freshlySaved'} + {{space.name}} + %td {{space.totalApps}} + %td {{space.runningApps}} + %td {{space.stoppedApps}} + %td {{space.downApps}} + %td {{space.serviceInstances}} + %td {{space.quota}} +``` +*/ +/*doc +--- +title: Scrollable +name: scrollable_table +parent: table +--- + +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-sm` | 300px +`.table-scrollable-md` | 600px +`.table-scrollable-lg` | 900px + +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. +

+
+ +```html_example +
+
+ + + + + + + + + + + +
#StatusCPUMemoryDiskUptime
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
0Running0%4.16 MB6.75 MB27 min
1Running0%4.07 MB6.75 MB27 min
2Running0%4.07 MB6.75 MB25 min
3Running0%4.14 MB6.75 MB25 min
4Running0%4.08 MB6.75 MB25 min
5Running0%4.16 MB6.75 MB25 min
6Running0%4.07 MB6.75 MB25 min
7Running0%4.07 MB6.75 MB25 min
8Running0%4.03 MB6.75 MB25 min
9Running0%4.07 MB6.75 MB25 min
+
+
+``` +*/ +/* line 785, ../../src/pivotal-ui/components/tables.scss */ +.table-scrollable { + border: 1px solid #e0e4e5; +} +/* line 788, ../../src/pivotal-ui/components/tables.scss */ +.table-scrollable table { + table-layout: fixed; +} +/* line 790, ../../src/pivotal-ui/components/tables.scss */ +.table-scrollable table tr:last-child { + border-bottom: none; +} +/* line 795, ../../src/pivotal-ui/components/tables.scss */ +.table-scrollable .table { + margin: 0; +} +/* line 799, ../../src/pivotal-ui/components/tables.scss */ +.table-scrollable .table-scrollable-header { + border-bottom: 2px solid #e0e4e5; +} +/* line 803, ../../src/pivotal-ui/components/tables.scss */ +.table-scrollable .table-scrollable-body { + border-top: 3px solid #ecefef; + max-height: 183px; + overflow-y: auto; + overflow-x: hidden; +} +/* line 811, ../../src/pivotal-ui/components/tables.scss */ +.table-scrollable.table-scrollable-sm .table-scrollable-body { + max-height: 300px; +} +/* line 816, ../../src/pivotal-ui/components/tables.scss */ +.table-scrollable.table-scrollable-md .table-scrollable-body { + max-height: 600px; +} +/* line 821, ../../src/pivotal-ui/components/tables.scss */ +.table-scrollable.table-scrollable-lg .table-scrollable-body { + max-height: 900px; +} + +/*doc +--- +title: Panels +name: panel +categories: + - Objects + - All +--- + +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. + +*/ +/* line 16, ../../src/pivotal-ui/components/panels.scss */ +.panel { + box-shadow: none; +} +/* line 18, ../../src/pivotal-ui/components/panels.scss */ +.panel h1, .panel h2, .panel h3, .panel h4, .panel h5, .panel h6 { + margin: 0; +} + +/*doc +--- +title: Simple +name: panel_simple +parent: panel +--- + +```haml_example +.panel.panel-simple.bg-neutral-11 + .panel-body + Simple Panel +``` +*/ +/* line 38, ../../src/pivotal-ui/components/panels.scss */ +.panel-simple { + border: 1px solid #b4b4b4; +} + +/*doc +--- +title: Basic +name: panel_basic +parent: panel +--- + +Basic Panels are the new Simple Panels for G-Major + +```haml_example +.panel.panel-basic.bg-neutral-11 + .panel-body + Basic Panel +``` +*/ +/* line 58, ../../src/pivotal-ui/components/panels.scss */ +.panel-basic { + border-radius: 5px; + -moz-background-clip: padding; + /* Firefox 3.6 */ + -webkit-background-clip: padding; + /* 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); +} + +/*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 +
+
Body Content
+
Footer Content
+
+``` + +
+
+ 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. +

+
+ +```html_example + +``` +*/ +/* line 131, ../../src/pivotal-ui/components/panels.scss */ +.panel-flex { + display: block; + display: flex; + flex-direction: column; +} +/* line 136, ../../src/pivotal-ui/components/panels.scss */ +.panel-flex .panel-body { + flex: 1 0 auto; + align-self: auto; +} +/* line 141, ../../src/pivotal-ui/components/panels.scss */ +.panel-flex .panel-footer { + flex: 0 0 auto; + align-self: auto; +} + +/*doc +--- +title: 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 + +``` + +*/ +/* line 174, ../../src/pivotal-ui/components/panels.scss */ +.panel-tile { + border-bottom: 4px solid rgba(0, 0, 0, 0.07); + overflow: hidden; + color: #686868; + -webkit-transition: border 300ms ease-out; + -moz-transition: border 300ms ease-out; + transition: border 300ms ease-out; + -moz-background-clip: padding; + /* Firefox 3.6 */ + -webkit-background-clip: padding; + /* Safari 4? Chrome 6? */ + background-clip: padding-box; + /* Firefox 4, Safari 5, Opera 10, IE 9 */ +} +/* line 183, ../../src/pivotal-ui/components/panels.scss */ +.panel-tile .panel-body { + -ms-flex: 1 0 auto; + padding: 25px 20px 0 20px; + -webkit-transition: padding-top 300ms ease-out; + -moz-transition: padding-top 300ms ease-out; + transition: padding-top 300ms ease-out; +} +/* line 191, ../../src/pivotal-ui/components/panels.scss */ +.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; + -moz-transition: all 300ms ease-out; + transition: all 300ms ease-out; +} +/* line 203, ../../src/pivotal-ui/components/panels.scss */ +.panel-tile:hover, .panel-tile:focus { + -webkit-transition: all 300ms ease-out; + -moz-transition: all 300ms ease-out; + transition: all 300ms ease-out; + border-width: 1px; + background-color: #F8F8F8; + color: #686868; + cursor: pointer; + outline: none; +} +/* line 212, ../../src/pivotal-ui/components/panels.scss */ +.panel-tile:hover .panel-body, .panel-tile:focus .panel-body { + padding-top: 15px; +} +/* line 215, ../../src/pivotal-ui/components/panels.scss */ +.panel-tile:hover .panel-footer, .panel-tile:focus .panel-footer { + opacity: 1; + background: #2185c5; + color: #F8F8F8; + font-weight: 900; +} + +/*doc +--- +title: Scrollable +name: panel_scrollable +parent: panel +--- + +The scrollable panel sets a fixed height of 183px and scrolls any content that is larger. If you want a different size, set an inline style on the `.panel-scrollable`. + +```haml_example +.panel.panel-scrollable.bg-neutral-11 + .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. +``` +*/ +/* line 241, ../../src/pivotal-ui/components/panels.scss */ +.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. + +```haml_example +.panel.panel-highlight + .panel-body + Not Hoverable (use when the panel has no associated action, for instance if the action is disabled due to lack of permissions) +``` +*/ +/* line 263, ../../src/pivotal-ui/components/panels.scss */ +.panel-highlight, .panel-clickable-alt { + background-color: #F8F8F8; + border-radius: 10px; + box-shadow: 0 4px 0 0 rgba(0, 0, 0, 0.07); +} +/* line 268, ../../src/pivotal-ui/components/panels.scss */ +.panel-highlight.title-panel h1, .title-panel.panel-clickable-alt h1 { + overflow: hidden; + white-space: nowrap; + overflow: hidden; + -ms-text-overflow: ellipsis; + -o-text-overflow: ellipsis; + text-overflow: ellipsis; +} + +/*doc +--- +title: Alternate +name: panel_alt +parent: panel +--- + +Alternate panels can be in a default, off, or danger state. + +```haml_example_table +.panel.panel-alt + .panel-body + Alternate Panel + +.panel.panel-alt.panel-danger + .panel-body + Danger alternate panel + +.panel.panel-alt.panel-off + .panel-body + Stopped alternate panel + +.panel.panel-alt.panel-empty + .panel-body + Off alternate panel + +.panel.panel-alt.panel-editing + .panel-body + Editing alternate panel +``` +*/ +/* line 309, ../../src/pivotal-ui/components/panels.scss */ +.panel-alt.panel-editing { + background-color: #ecefef; +} +/* line 314, ../../src/pivotal-ui/components/panels.scss */ +.panel-alt.panel-empty { + background-color: rgba(0, 0, 0, 0.07); +} +/* line 317, ../../src/pivotal-ui/components/panels.scss */ +.panel-alt.panel-empty:hover { + -webkit-transition: all 300ms ease-out; + -moz-transition: all 300ms ease-out; + transition: all 300ms ease-out; + background-color: #ecefef; + border-bottom: 4px solid rgba(0, 0, 0, 0.14); +} +/* line 324, ../../src/pivotal-ui/components/panels.scss */ +.panel-alt .aligner { + min-height: 190px; +} +/* line 328, ../../src/pivotal-ui/components/panels.scss */ +.panel-alt .panel-basic { + min-height: 88px; +} +/* line 334, ../../src/pivotal-ui/components/panels.scss */ +.panel-alt.panel-danger, .panel-alt.panel-off { + position: relative; +} +/* line 336, ../../src/pivotal-ui/components/panels.scss */ +.panel-alt.panel-danger:before, .panel-alt.panel-off:before { + content: ""; + position: absolute; + top: 0%; + right: 0%; + width: 0px; + height: 0px; + border-left: 25px solid transparent; +} +/* line 352, ../../src/pivotal-ui/components/panels.scss */ +.panel-alt.panel-danger:before { + border-top: 25px solid #ff434c; +} +/* line 356, ../../src/pivotal-ui/components/panels.scss */ +.panel-alt.panel-off:before { + border-top: 25px solid #8d8e8e; +} + +/*doc +--- +title: Shadow +name: panel_shadow +parent: panel +--- + +Shadow panels add a bottom shadow to the panel. + +```haml_example_table +.panel.panel-shadow-1.bg-neutral-11 + .panel-body + Shadow Panel + +.panel.panel-shadow-2.bg-neutral-11 + .panel-body + Shadow Panel + +.panel.panel-shadow-3.bg-neutral-11 + .panel-body + Shadow Panel + +.panel.panel-shadow-4.bg-neutral-11 + .panel-body + Shadow Panel + +``` +*/ +/* line 389, ../../src/pivotal-ui/components/panels.scss */ +.panel-shadow, .panel-shadow-1, .panel-shadow-2, .panel-shadow-3, .panel-shadow-4 { + border: none; + -moz-background-clip: padding; + /* Firefox 3.6 */ + -webkit-background-clip: padding; + /* Safari 4? Chrome 6? */ + background-clip: padding-box; + /* Firefox 4, Safari 5, Opera 10, IE 9 */ +} + +/* line 394, ../../src/pivotal-ui/components/panels.scss */ +.panel-shadow-1 { + border-bottom: 4px solid rgba(0, 0, 0, 0.3); +} + +/* line 400, ../../src/pivotal-ui/components/panels.scss */ +.panel-shadow-2 { + border-bottom: 4px solid rgba(0, 0, 0, 0.14); +} + +/* line 404, ../../src/pivotal-ui/components/panels.scss */ +.panel-shadow-3 { + border-bottom: 4px solid rgba(0, 0, 0, 0.07); +} + +/* line 408, ../../src/pivotal-ui/components/panels.scss */ +.panel-shadow-4 { + border-bottom: 4px solid rgba(0, 0, 0, 0.035); +} + +/*doc +--- +title: Card +name: panel_card +parent: panel +--- + +Using panels with [card lists][list_cards] makes any `.panel-body` have a minimum "card" height. + +```haml_example +%ul.list-cards.list-cards-sm.list-card-2 + %li.panel.panel-clickable-alt.bg-neutral-11 + .panel-body + Card Panel + %li.panel.panel-clickable-alt.bg-neutral-11 + .panel-body + Card Panel + %li.panel.panel-clickable-alt.bg-neutral-11 + .panel-body + 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. + +```haml_example_table +.panel.panel-clickable + .panel-body + Panel Clickable + +.panel.panel-clickable-alt + .panel-body + Panel Clickable Alt +``` + +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. + + +```haml_example_table +%a.panel.panel-clickable + .panel-body + %p.hover-target-1 + hover-target-1 - default text color => link color + +%a.panel.panel-clickable + .panel-body + %p.hover-target-2 + hover-target-2 - light gray text => default text color + +%a.panel.panel-clickable + .panel-body + %p.hover-target-3 + hover-target-3 - $gray-9 background => white background +``` + +*/ +/* line 481, ../../src/pivotal-ui/components/panels.scss */ +.panel-clickable, .panel-clickable-alt { + display: block; + background-color: #ecefef; + cursor: pointer; + -webkit-transition: all 300ms ease-out; + -moz-transition: all 300ms ease-out; + transition: all 300ms ease-out; +} +/* line 487, ../../src/pivotal-ui/components/panels.scss */ +.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; + -moz-transition: all 300ms ease-out; + transition: all 300ms ease-out; +} +/* line 491, ../../src/pivotal-ui/components/panels.scss */ +.panel-clickable .hover-target-1, .panel-clickable-alt .hover-target-1 { + color: #686868; +} +/* line 495, ../../src/pivotal-ui/components/panels.scss */ +.panel-clickable .hover-target-2, .panel-clickable-alt .hover-target-2 { + color: #b4b4b4; +} +/* line 499, ../../src/pivotal-ui/components/panels.scss */ +.panel-clickable .hover-target-3, .panel-clickable-alt .hover-target-3 { + background-color: #F8F8F8; +} +/* line 503, ../../src/pivotal-ui/components/panels.scss */ +.panel-clickable:hover, .panel-clickable-alt:hover { + background-color: #F8F8F8; +} +/* line 506, ../../src/pivotal-ui/components/panels.scss */ +.panel-clickable:hover .hover-target-1, .panel-clickable-alt:hover .hover-target-1 { + color: #2185c5; +} +/* line 509, ../../src/pivotal-ui/components/panels.scss */ +.panel-clickable:hover .hover-target-2, .panel-clickable-alt:hover .hover-target-2 { + color: #686868; +} +/* line 512, ../../src/pivotal-ui/components/panels.scss */ +.panel-clickable:hover .hover-target-3, .panel-clickable-alt:hover .hover-target-3 { + background-color: white; +} + +/* line 518, ../../src/pivotal-ui/components/panels.scss */ +.panel-clickable-alt { + background-color: #F8F8F8; +} +/* line 523, ../../src/pivotal-ui/components/panels.scss */ +.panel-clickable-alt:hover { + background-color: white; + box-shadow: 0 4px 0 0 rgba(0, 0, 0, 0.14); +} + +/*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 +

+

Success

+
+``` + +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.

+
    +
  • thing 1
    • +
  • thing 2
    • +
+
+``` + +By adding `.alert-dismassable` and a button, you can also make alerts dismissable. + +```html_example +
+ +

Click the 'X' over there------>

+
+ +``` + +There are may use cases for alerts. Here is a list of our different alert types. + +```html_example_table +
+ +
+
+ +
+
+ Everything is wonderful. + Be happy. +
+
+
+ +
+ +
+
+ +
+
+ Info for you. + Tell me more. +
+
+
+ +
+ +
+
+ +
+
+ Warning: There is no parking on the dancefloor. + Be alert. +
+
+
+ +
+ +
+
+ +
+
+ Something has gone horribly awry. + You've made a huge mistake. +
+
+
+``` + +*/ +/* line 111, ../../src/pivotal-ui/components/alerts.scss */ +.alert { + border: none; + margin: 1.5em 0 0; +} +/* line 116, ../../src/pivotal-ui/components/alerts.scss */ +.alert a.alert-link:hover { + text-decoration: underline; +} +/* line 121, ../../src/pivotal-ui/components/alerts.scss */ +.alert .close { + text-decoration: none; + line-height: .7; + text-shadow: none; +} + +/* line 129, ../../src/pivotal-ui/components/alerts.scss */ +.alert-error { + background-color: #febfc1; + border-color: #febfc1; + color: #b31612; +} +/* line 8, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_alerts.scss */ +.alert-error hr { + border-top-color: #fea6a9; +} +/* line 11, ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_alerts.scss */ +.alert-error .alert-link { + color: #85100d; +} + +/*doc +--- +title: Dividers +name: divider +categories: + - Elements + - All +--- + +Dividers draw horizontal lines between different content groupings. + +```haml_example + +%hr.divider-alternate-1 +%hr.divider-alternate-2 + +.contrast-bar + %hr.divider-1 + %hr.divider-2 + +``` + +*/ +/* line 26, ../../src/pivotal-ui/components/dividers.scss */ +.divider-alternate-1 { + border: 1px solid rgba(0, 0, 0, 0.1); + border-width: 1px 0 0 0; +} + +/* line 31, ../../src/pivotal-ui/components/dividers.scss */ +.divider-alternate-2 { + border: 3px solid rgba(0, 0, 0, 0.1); + border-width: 3px 0 0 0; +} + +/* line 36, ../../src/pivotal-ui/components/dividers.scss */ +.divider-1 { + border: 1px solid rgba(255, 255, 255, 0.1); + border-width: 1px 0 0 0; +} + +/* line 41, ../../src/pivotal-ui/components/dividers.scss */ +.divider-2 { + border: 3px solid rgba(255, 255, 255, 0.1); + border-width: 3px 0 0 0; +} + +/* line 46, ../../src/pivotal-ui/components/dividers.scss */ +.divider-alternate-2, +.divider-2 { + margin: 4vw 0; +} + +/*doc +--- +title: Lists +name: list +categories: + - Elements + - All +--- + +This section contains different list styles. +*/ +/*pending +--- +title: JS Lists +name: lists_js +categories: + - JavaScript + - 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). + +```haml_example +%ul.list-inline + %li + feep + %li + fop + %li + meep +``` + +You can use inline lists to lay out elements. Here's an example of a header next to a button: + +```html_example + +``` + +*/ +/* line 60, ../../src/pivotal-ui/components/lists.scss */ +.list-inline, .list-inline-divider, .list-vertical-divider, .list-vertical-divider-2, .list-breadcrumb, .list-steps { + font-size: 0; +} +/* line 62, ../../src/pivotal-ui/components/lists.scss */ +.list-inline > li, .list-inline-divider > li, .list-vertical-divider > li, .list-vertical-divider-2 > li, .list-breadcrumb > li, .list-steps > li { + font-size: 16px; +} + +/*doc +--- +title: Ordered +name: list_ordered +parent: list +--- + + +```haml_example +%ol + %li + feep + %li + fop + %li + meep +``` +*/ +/*doc +--- +title: Unordered +name: list_unordered +parent: list +--- + +```haml_example +%ul.list-unordered + %li + feep + %li + fop + %li + meep +``` +*/ +/* line 104, ../../src/pivotal-ui/components/lists.scss */ +.list-unordered { + padding-left: 0; +} +/* line 106, ../../src/pivotal-ui/components/lists.scss */ +.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 `
      `. + +```haml_example +%ul.list-unstyled + %li + feep + %li + fop + %li + meep +``` +*/ +/*doc +--- +title: Inline Divider +name: list_inline_divider +parent: list +--- + +Places all list items on a single line with `display: inline-block;` and some light padding. The `.list-inline-divider` +also adds a simple gray border (add `.list-inline-divider-light` to make the border white). + +```haml_example +%ul.list-inline-divider + %li + %a.type-em-1{href: "http://google.com"}< + Edit + %li + %a.type-em-1{href: "http://google.com"}< + Invite + +.contrast-bar + %ul.list-inline-divider.list-inline-divider-light + %li + %a.type-em-1{href: "http://google.com"}< + Edit + %li + %a.type-em-1{href: "http://google.com"}< + Invite + + +``` +*/ +/* line 166, ../../src/pivotal-ui/components/lists.scss */ +.list-inline-divider > li:not(:first-child), .list-vertical-divider > li:not(:first-child), .list-vertical-divider-2 > li:not(:first-child) { + border-left: 1px solid #b4b4b4; + line-height: 1em; +} + +/* line 166, ../../src/pivotal-ui/components/lists.scss */ +.list-inline-divider-light > li:not(:first-child) { + border-left: 1px solid #c3c5c7; + line-height: 1em; +} + +/*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. + +```haml_example +%ul.list-breadcrumb + %li + %a{href: "http://google.com"} + Parent + %li + %a{href: "http://google.com"} + Child + %li.current + %span + Current Page +``` +*/ +/* line 207, ../../src/pivotal-ui/components/lists.scss */ +.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; +} +/* line 213, ../../src/pivotal-ui/components/lists.scss */ +.list-breadcrumb > li { + font-size: 0; + padding-left: 0; + padding-right: 0; +} +/* line 215, ../../src/pivotal-ui/components/lists.scss */ +.list-breadcrumb > li a, .list-breadcrumb > li.current span { + font-size: 14px; + display: inline-block; + max-width: 200px; + white-space: nowrap; + overflow: hidden; + -ms-text-overflow: ellipsis; + -o-text-overflow: ellipsis; + text-overflow: ellipsis; + vertical-align: middle; +} +/* line 223, ../../src/pivotal-ui/components/lists.scss */ +.list-breadcrumb > li.current span { + color: #9faaad; +} +/* line 229, ../../src/pivotal-ui/components/lists.scss */ +.list-breadcrumb > li:before { + font-size: 16px; + color: #9faaad; + content: ">"; + vertical-align: middle; + padding-right: 5px; + padding-left: 5px; +} +/* line 237, ../../src/pivotal-ui/components/lists.scss */ +.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 + +```haml_example +%ul.list-group + %li.list-group-item + item 1 + %li.list-group-item + item 2 + %li.list-group-item + item 3 +``` +*/ +/*pending +--- +title: Addable +name: list_addable +parent: lists_js +--- + +New elements fade in + +```haml_example +%ul.list-group#list-group-adding-demo + %li.list-group-item + item 1 + %li.list-group-item + item 2 + %li.list-group-item + item 3 + +Add an item +``` + + +*/ +/* line 288, ../../src/pivotal-ui/components/lists.scss */ +.list-group, .list-group > li { + border-width: 1px 0; +} + +/* line 293, ../../src/pivotal-ui/components/lists.scss */ +.list-group-item { + padding-right: 5px; +} +/* line 296, ../../src/pivotal-ui/components/lists.scss */ +.list-group-item.new { + -webkit-animation: new-list-group-item-grow 0.3s cubic-bezier(0.895, 0.03, 0.685, 0.22) forwards, new-list-group-item-fade 0.5s ease-in 0.15s forwards; + -moz-animation: new-list-group-item-grow 0.3s cubic-bezier(0.895, 0.03, 0.685, 0.22) forwards, new-list-group-item-fade 0.5s ease-in 0.15s forwards; +} + +@-webkit-keyframes new-list-group-item-fade { + 0% { + opacity: 0; + } + 100% { + opacity: 1; + } +} +@-webkit-keyframes new-list-group-item-grow { + 0% { + max-height: 0; + padding: 0px 15px; + } + 100% { + max-height: 100px; + padding: 10px 15px; + } +} +@keyframes new-list-group-item-fade { + from { + opacity: 0; + } + to { + opacity: 1; + } +} +@keyframes new-list-group-item-grow { + from { + max-height: 0; + padding: 0px 15px; + } + to { + max-height: 100px; + padding: 10px 15px; + } +} +/* line 343, ../../src/pivotal-ui/components/lists.scss */ +.list-notitle li:first-child { + border-top: 0; +} +/* line 346, ../../src/pivotal-ui/components/lists.scss */ +.list-notitle li:last-child { + border-bottom: 0; +} + +/*doc +--- +title: Event +name: list_event +parent: list +--- + +This is a special list-group, with styles per-event for colors and icons. + +Note: If you need a list item that with an icon that isn't shown below, +take a look at [icons][iconography], and let us know which one you want. + +```haml_example +%ul.list-group.event-list + %li.list-group-item.started + .media + .pull-left + .event-icon + .media-body + .event-title started app + %li.list-group-item.stopped + .media + .pull-left + .event-icon + .media-body + .event-title stopped app + %li.list-group-item.updated + .media + .pull-left + .event-icon + .media-body + .event-title updated app + %li.list-group-item.scaled + .media + .pull-left + .event-icon + .media-body + .event-title scaled app + %li.list-group-item.crashed + .media + .pull-left + .event-icon + .media-body + .event-title app crashed + %li.list-group-item.created + .media + .pull-left + .event-icon + .media-body + .event-title created app + %li.list-group-item.renamed + .media + .pull-left + .event-icon + .media-body + .event-title renamed app +``` +*/ +/* line 411, ../../src/pivotal-ui/components/lists.scss */ +.event-list .event-title { + font-weight: bold; + font-size: 14px; + margin-bottom: 2px; +} +/* line 417, ../../src/pivotal-ui/components/lists.scss */ +.event-list .event-user { + color: #b4b4b4; +} +/* line 421, ../../src/pivotal-ui/components/lists.scss */ +.event-list .event-icon { + font-family: 'FontAwesome'; + font-size: 17px; + width: 17px; +} +/* line 428, ../../src/pivotal-ui/components/lists.scss */ +.event-list .started .event-title { + color: #00a79d; +} +/* line 431, ../../src/pivotal-ui/components/lists.scss */ +.event-list .started .event-icon:after { + color: #00a79d; + content: '\f04b'; +} +/* line 437, ../../src/pivotal-ui/components/lists.scss */ +.event-list .stopped .event-title { + color: #b4b4b4; +} +/* line 441, ../../src/pivotal-ui/components/lists.scss */ +.event-list .stopped .event-icon:after { + color: #b4b4b4; + content: '\f04d'; +} +/* line 448, ../../src/pivotal-ui/components/lists.scss */ +.event-list .updated .event-title { + color: #00a79d; +} +/* line 452, ../../src/pivotal-ui/components/lists.scss */ +.event-list .updated .event-icon:after { + color: #00a79d; + content: '\f01b'; +} +/* line 458, ../../src/pivotal-ui/components/lists.scss */ +.event-list .scaled .event-title { + color: #00a79d; +} +/* line 462, ../../src/pivotal-ui/components/lists.scss */ +.event-list .scaled .event-icon:after { + color: #00a79d; + content: '\f0e4'; +} +/* line 469, ../../src/pivotal-ui/components/lists.scss */ +.event-list .crashed .event-title { + color: #ff434c; +} +/* line 473, ../../src/pivotal-ui/components/lists.scss */ +.event-list .crashed .event-icon:after { + color: #ff434c; + content: '\f06a'; +} +/* line 480, ../../src/pivotal-ui/components/lists.scss */ +.event-list .created .event-title { + color: #00a79d; +} +/* line 484, ../../src/pivotal-ui/components/lists.scss */ +.event-list .created .event-icon:after { + color: #00a79d; + content: '\f135'; +} +/* line 491, ../../src/pivotal-ui/components/lists.scss */ +.event-list .renamed .event-title { + color: #00a79d; +} +/* line 495, ../../src/pivotal-ui/components/lists.scss */ +.event-list .renamed .event-icon:after { + color: #00a79d; + content: '\f040'; +} + +/*doc +--- +title: Vertical Divider +name: list_vertical_divider +parent: list +--- + +Use this list when you need larger gray borders between +items. It should be used in concert with grid column +sizes when you want the items to take a particular width. + +We achieve equal height columns using the padding/margin hack, +so we need an additional `.height-enforcer` element to get the +right min-height. + +```haml_example +%ul.list-vertical-divider + %li.col-md-8 + .height-enforcer + item 1 + %li.col-md-8 + .height-enforcer + item 2 + %li.col-md-8 + .height-enforcer{style: 'height: 200px'} + item 3, which is taller +``` + +```haml_example +%ul.list-vertical-divider-2 + %li.col-md-8 + .height-enforcer + item 1 + %li.col-md-8 + .height-enforcer + item 2 + %li.col-md-8 + .height-enforcer{style: 'height: 200px'} + item 3, which is taller +``` +*/ +/* line 545, ../../src/pivotal-ui/components/lists.scss */ +.list-vertical-divider, .list-vertical-divider-2 { + zoom: 1; + overflow: hidden; +} +/* line 34, ../../src/oocss/utils/_clearfix-me.scss */ +.list-vertical-divider:before, .list-vertical-divider-2:before, .list-vertical-divider:after, .list-vertical-divider-2:after { + content: " "; + display: table; +} +/* line 39, ../../src/oocss/utils/_clearfix-me.scss */ +.list-vertical-divider:after, .list-vertical-divider-2:after { + clear: both; +} +/* line 551, ../../src/pivotal-ui/components/lists.scss */ +.list-vertical-divider > li, .list-vertical-divider-2 > li { + border-left: 2px solid #ecefef; + padding-bottom: 9000px; + margin-bottom: -9000px; +} +/* line 556, ../../src/pivotal-ui/components/lists.scss */ +.list-vertical-divider > li .height-enforcer, .list-vertical-divider-2 > li .height-enforcer { + min-height: 130px; +} + +/* line 562, ../../src/pivotal-ui/components/lists.scss */ +.list-vertical-divider-2 { + margin-bottom: 40px; +} +/* line 565, ../../src/pivotal-ui/components/lists.scss */ +.list-vertical-divider-2 > li { + border-left: 1px solid #e0e4e5; + padding-left: 30px; + padding-right: 30px; +} +/* line 570, ../../src/pivotal-ui/components/lists.scss */ +.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. + +```haml_example +%ol.list-steps + %li + Sign up Account + %li.current + Create Organization + %li + Do other things + %li + And more things + +``` +*/ +/* line 600, ../../src/pivotal-ui/components/lists.scss */ +.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; +} +/* line 609, ../../src/pivotal-ui/components/lists.scss */ +.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; +} +/* line 621, ../../src/pivotal-ui/components/lists.scss */ +.list-steps > li.current { + color: #F8F8F8; + font-weight: 900; +} +/* line 624, ../../src/pivotal-ui/components/lists.scss */ +.list-steps > li.current:before { + color: #F8F8F8; + border-color: #F8F8F8; +} + +/*doc +--- +title: Checked +name: list_checked +parent: list +--- + +Replaces the default bullet image with the font awesome checkmark. + +```haml_example +%ul.list-checked + %li + feep + %li + fop + %li + meep +``` +*/ +/* line 655, ../../src/pivotal-ui/components/lists.scss */ +.list-checked { + list-style: none; + padding-left: 20px; +} +/* line 659, ../../src/pivotal-ui/components/lists.scss */ +.list-checked > li:before { + font-family: 'FontAwesome'; + content: '\f00c'; + margin: 0 5px 0 -15px; + color: #00776d; +} + +/* build list spacing exceptions */ +/* line 61, ../../src/oocss/list/_listWhitespace.scss */ +.lvn > li { + margin-top: 0 !important; + margin-bottom: 0 !important; +} + +/* line 61, ../../src/oocss/list/_listWhitespace.scss */ +.lvs > li { + margin-top: 5px !important; + margin-bottom: 5px !important; +} + +/* line 61, ../../src/oocss/list/_listWhitespace.scss */ +.lvm > li { + margin-top: 7px !important; + margin-bottom: 7px !important; +} + +/* line 61, ../../src/oocss/list/_listWhitespace.scss */ +.lvl > li { + margin-top: 10px !important; + margin-bottom: 10px !important; +} + +/* line 61, ../../src/oocss/list/_listWhitespace.scss */ +.lvxl > li { + margin-top: 20px !important; + margin-bottom: 20px !important; +} + +/* line 61, ../../src/oocss/list/_listWhitespace.scss */ +.lhn > li { + margin-left: 0 !important; + margin-right: 0 !important; +} + +/* line 61, ../../src/oocss/list/_listWhitespace.scss */ +.lhs > li { + margin-left: 5px !important; + margin-right: 5px !important; +} + +/* line 61, ../../src/oocss/list/_listWhitespace.scss */ +.lhm > li { + margin-left: 7px !important; + margin-right: 7px !important; +} + +/* line 61, ../../src/oocss/list/_listWhitespace.scss */ +.lhl > li { + margin-left: 10px !important; + margin-right: 10px !important; +} + +/* line 61, ../../src/oocss/list/_listWhitespace.scss */ +.lhxl > li { + margin-left: 20px !important; + margin-right: 20px !important; +} + +/* line 70, ../../src/oocss/list/_listWhitespace.scss */ +ul[class*="lh"] > li:last-child { + margin-right: 0 !important; +} + +/* line 74, ../../src/oocss/list/_listWhitespace.scss */ +ul[class*="lh"] > li { + margin-left: 0 !important; +} + +/* line 78, ../../src/oocss/list/_listWhitespace.scss */ +ul[class*="lv"] > li:last-child { + margin-bottom: 0 !important; +} + +/* line 82, ../../src/oocss/list/_listWhitespace.scss */ +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 +
        +
      • +

        list-card-1

        +
        • +
      + +
        +
      • +

        list-card-2

        +
        • +
      +``` + +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. + +```html_example +
        +
      • +

        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 + +``` +*/ +/* line 768, ../../src/pivotal-ui/components/lists.scss */ +.list-cards { + zoom: 1; +} +/* line 34, ../../src/oocss/utils/_clearfix-me.scss */ +.list-cards:before, .list-cards:after { + content: " "; + display: table; +} +/* line 39, ../../src/oocss/utils/_clearfix-me.scss */ +.list-cards:after { + clear: both; +} +/* line 772, ../../src/pivotal-ui/components/lists.scss */ +.list-cards > li { + margin-bottom: 20px; +} + +@media (min-width: 480px) { + /* line 782, ../../src/pivotal-ui/components/lists.scss */ + .list-card-1.list-cards-xs > li { + width: 435px; + float: left; + margin-right: 20px; + } +} +@media (min-width: 768px) { + /* line 782, ../../src/pivotal-ui/components/lists.scss */ + .list-card-1.list-cards-sm > li { + width: 435px; + float: left; + margin-right: 20px; + } +} +@media (min-width: 992px) { + /* line 782, ../../src/pivotal-ui/components/lists.scss */ + .list-card-1.list-cards-md > li { + width: 435px; + float: left; + margin-right: 20px; + } +} +@media (min-width: 1200px) { + /* line 782, ../../src/pivotal-ui/components/lists.scss */ + .list-card-1.list-cards-lg > li { + width: 435px; + float: left; + margin-right: 20px; + } +} +@media (min-width: 1800px) { + /* line 782, ../../src/pivotal-ui/components/lists.scss */ + .list-card-1.list-cards-xl > li { + width: 435px; + float: left; + margin-right: 20px; + } +} +/* line 795, ../../src/pivotal-ui/components/lists.scss */ +.list-card-1 > li { + min-height: 116px; +} +/* line 798, ../../src/pivotal-ui/components/lists.scss */ +.list-card-1 > li a.list-cards-link, +.list-card-1 > li a.list-card-link { + display: block; + min-height: 116px; +} +/* line 804, ../../src/pivotal-ui/components/lists.scss */ +.list-card-1 > li .list-card-wrapper { + min-height: 116px; +} + +@media (min-width: 480px) { + /* line 782, ../../src/pivotal-ui/components/lists.scss */ + .list-card-2.list-cards-xs > li { + width: 284px; + float: left; + margin-right: 20px; + } +} +@media (min-width: 768px) { + /* line 782, ../../src/pivotal-ui/components/lists.scss */ + .list-card-2.list-cards-sm > li { + width: 284px; + float: left; + margin-right: 20px; + } +} +@media (min-width: 992px) { + /* line 782, ../../src/pivotal-ui/components/lists.scss */ + .list-card-2.list-cards-md > li { + width: 284px; + float: left; + margin-right: 20px; + } +} +@media (min-width: 1200px) { + /* line 782, ../../src/pivotal-ui/components/lists.scss */ + .list-card-2.list-cards-lg > li { + width: 284px; + float: left; + margin-right: 20px; + } +} +@media (min-width: 1800px) { + /* line 782, ../../src/pivotal-ui/components/lists.scss */ + .list-card-2.list-cards-xl > li { + width: 284px; + float: left; + margin-right: 20px; + } +} +/* line 795, ../../src/pivotal-ui/components/lists.scss */ +.list-card-2 > li { + min-height: 196px; +} +/* line 798, ../../src/pivotal-ui/components/lists.scss */ +.list-card-2 > li a.list-cards-link, +.list-card-2 > li a.list-card-link { + display: block; + min-height: 196px; +} +/* line 804, ../../src/pivotal-ui/components/lists.scss */ +.list-card-2 > li .list-card-wrapper { + min-height: 196px; +} + +/*doc +--- +title: Layout Lists +name: layout_lists +categories: + - Layout + - All +--- + +Sometimes you might want to use lists to lay out elements on the page. + +[Inline lists][list_inline] and [vertical divider lists][list_vertical_divider] +are particularly useful when you don't know the width of the element you want to layout, +or you want to vertically align it. + +Use [Card lists][list_cards] if you'd like to make a grid of vertically and horizontally aligned cards. + +*/ +/*doc +--- +title: Tabs +name: tab +categories: + - JavaScript + - All +--- + +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 +--- + +```haml_example +.tab-highlight + .row + .col-md-8 + %h1 Service Plans + %ul.nav.nav-stacked + %li.active + %a{"data-toggle" => "tab", :href => "#home"} + .row + .col-md-10.tab-title + Spark + .col-md-14 + Free + %li + %a{"data-toggle" => "tab", :href => "#profile"} + .row + .col-md-10.tab-title + Boost + .col-md-14 + $10/month + %li + %a{"data-toggle" => "tab", :href => "#messages"} + .row + .col-md-10.tab-title + Amp + .col-md-14 + $50/month + %li + %a{"data-toggle" => "tab", :href => "#settings"} + .row + .col-md-10.tab-title + Shockingly long plan name is important to test + .col-md-14 + $1000/month + + .col-md-16 + %h1 Plan Features + .tab-content + #home.tab-pane.fade.in.active Content 1 + #profile.tab-pane.fade Content 2 + #messages.tab-pane.fade Content 3 + #settings.tab-pane.fade Content 4 +``` + +*/ +/* line 68, ../../src/pivotal-ui/components/tabs.scss */ +.tab-highlight .nav > li { + position: relative; + overflow: hidden; +} +/* line 72, ../../src/pivotal-ui/components/tabs.scss */ +.tab-highlight .nav > li + li { + margin-top: -2px; +} +/* line 76, ../../src/pivotal-ui/components/tabs.scss */ +.tab-highlight .nav > li > a { + padding: 15px; + color: #2185c5; + background-color: #e0e4e5; + transition: background-color 150ms ease-out; +} +/* line 83, ../../src/pivotal-ui/components/tabs.scss */ +.tab-highlight .nav > li > a:hover { + z-index: 100; + background-color: #ecefef; +} +/* line 90, ../../src/pivotal-ui/components/tabs.scss */ +.tab-highlight .nav > li.active a { + z-index: 50; +} +/* line 94, ../../src/pivotal-ui/components/tabs.scss */ +.tab-highlight .nav > li.active > a, +.tab-highlight .nav > li.active > a:hover { + color: #686868; + background-color: #ecefef; + border-width: 0; + cursor: default; +} +/* line 103, ../../src/pivotal-ui/components/tabs.scss */ +.tab-highlight .nav .tab-title { + font-size: 16px; +} +/* line 110, ../../src/pivotal-ui/components/tabs.scss */ +.tab-highlight .tab-content { + border-top: 2px solid #ecefef; + padding: 0; + margin-left: -20px; +} + +/*doc +--- +title: Simple +name: tab_simple +parent: tab +--- + +```haml_example +.tab-simple + .tabs-action.txt-r + %a Some Action + %ul.nav.nav-tabs + %li.active + %a{"data-toggle" => "tab", :href => "#spaces"}Spaces + %li + %a{"data-toggle" => "tab", :href => "#domains"}Domains + %li + %a{"data-toggle" => "tab", :href => "#members"}Members + + + .tab-content + #spaces.tab-pane.fade.in.active Spaces Content + #domains.tab-pane.fade Domains Content + #members.tab-pane.fade Members Content + +``` +*/ +/* line 146, ../../src/pivotal-ui/components/tabs.scss */ +.tab-simple { + background-color: #e0e4e5; + position: relative; +} +/* line 150, ../../src/pivotal-ui/components/tabs.scss */ +.tab-simple .nav.nav-tabs { + border-bottom: 3px solid rgba(0, 0, 0, 0.07); + border-top: 1px solid #e0e4e5; + background-color: #ecefef; + -moz-background-clip: padding; + /* Firefox 3.6 */ + -webkit-background-clip: padding; + /* Safari 4? Chrome 6? */ + background-clip: padding-box; + /* Firefox 4, Safari 5, Opera 10, IE 9 */ +} +/* line 157, ../../src/pivotal-ui/components/tabs.scss */ +.tab-simple .nav > li { + border-right: 1px solid #e0e4e5; +} +/* line 159, ../../src/pivotal-ui/components/tabs.scss */ +.tab-simple .nav > li > a { + margin-right: 0; + border: 0; + border-radius: 0; + padding: 10px 19px 13px 19px; + color: #2185c5; + font-weight: 600; + font-size: 16px; +} +/* line 169, ../../src/pivotal-ui/components/tabs.scss */ +.tab-simple .nav > li > a:hover { + border: 0; +} +/* line 174, ../../src/pivotal-ui/components/tabs.scss */ +.tab-simple .nav > li:hover { + cursor: pointer; + -webkit-transition: all 300ms ease-out; + -moz-transition: all 300ms ease-out; + transition: all 300ms ease-out; +} +/* line 178, ../../src/pivotal-ui/components/tabs.scss */ +.tab-simple .nav > li:hover > a { + background-color: #F8F8F8; +} +/* line 183, ../../src/pivotal-ui/components/tabs.scss */ +.tab-simple .nav > li.active { + margin-bottom: -3px; + border-top: 3px solid rgba(0, 0, 0, 0.07); + background-color: #e0e4e5; + cursor: default; + border-right: 0; + -webkit-transition: all 0ms ease-out; + -moz-transition: all 0ms ease-out; + transition: all 0ms ease-out; +} +/* line 191, ../../src/pivotal-ui/components/tabs.scss */ +.tab-simple .nav > li.active > a { + margin: -3px 0 3px 0; + color: #243640; + background-color: transparent; +} +/* line 201, ../../src/pivotal-ui/components/tabs.scss */ +.tab-simple .tabs-action { + padding: 14px 16px; + position: absolute; + right: 0; +} + +/* line 208, ../../src/pivotal-ui/components/tabs.scss */ +.tab-content { + padding: 20px; +} + +/*doc +--- +title: Simple Alt +name: tab_simple_alt +parent: tab +--- + +```haml_example +.tab-simple-alt + %ul.nav.nav-tabs + %li.active + %a{"data-toggle" => "tab", :href => "#dashboard"}Dashboard + %li + %a{"data-toggle" => "tab", :href => "#notifications"}Notifications + %li + %a{"data-toggle" => "tab", :href => "#eula"}EULA + + + .tab-content + #dashboard.tab-pane.fade.in.active Dashboard Content + #notifications.tab-pane.fade Notifications Content + #eula.tab-pane.fade EULA Content + +``` +*/ +/* line 238, ../../src/pivotal-ui/components/tabs.scss */ +.tab-simple-alt { + position: relative; +} +/* line 240, ../../src/pivotal-ui/components/tabs.scss */ +.tab-simple-alt .nav { + border-bottom: none; +} +/* line 244, ../../src/pivotal-ui/components/tabs.scss */ +.tab-simple-alt .nav > li > a { + margin-right: 0; + border: 0; + border-radius: 0; + padding: 10px 19px 13px 19px; + color: #2185c5; + font-weight: 600; + font-size: 16px; +} +/* line 253, ../../src/pivotal-ui/components/tabs.scss */ +.tab-simple-alt .nav > li > a:hover { + border: 0; +} +/* line 257, ../../src/pivotal-ui/components/tabs.scss */ +.tab-simple-alt .nav > li:hover { + cursor: pointer; + -webkit-transition: all 300ms ease-out; + -moz-transition: all 300ms ease-out; + transition: all 300ms ease-out; +} +/* line 260, ../../src/pivotal-ui/components/tabs.scss */ +.tab-simple-alt .nav > li:hover > a { + background-color: #F8F8F8; +} +/* line 264, ../../src/pivotal-ui/components/tabs.scss */ +.tab-simple-alt .nav > li.active { + background-color: white; + cursor: default; + border-right: 0; + -webkit-transition: all 0ms ease-out; + -moz-transition: all 0ms ease-out; + transition: all 0ms ease-out; +} +/* line 269, ../../src/pivotal-ui/components/tabs.scss */ +.tab-simple-alt .nav > li.active > a { + color: #243640; + background-color: transparent; +} +/* line 275, ../../src/pivotal-ui/components/tabs.scss */ +.tab-simple-alt .tabs-action { + padding: 14px 16px; + position: absolute; + right: 0; +} +/* line 280, ../../src/pivotal-ui/components/tabs.scss */ +.tab-simple-alt .tab-content { + background-color: white; +} + +/*doc +--- +title: Responsive +name: tab_responsive +parent: tab +--- + +```haml_example +.tab-responsive + .row + .col-sm-5 + %ul.nav.hidden-xs + %li.active + %a{"data-toggle" => "tab", :href => "#tab-responsive-1"} + meep + %li + %a{"data-toggle" => "tab", :href => "#tab-responsive-2"} + foo + %li + %a{"data-toggle" => "tab", :href => "#tab-responsive-3"} + bar + %li + %a{"data-toggle" => "tab", :href => "#tab-responsive-4"} + baz + + .col-sm-19 + %ul.tab-content + %li.active + %a.visible-xs-block{"data-toggle" => "tab", :href => "#tab-responsive-1"} + meep + %li#tab-responsive-1.tab-pane.active.fade.in Content 1 + %li + %a.visible-xs-block{"data-toggle" => "tab", :href => "#tab-responsive-2"} + foo + %li#tab-responsive-2.tab-pane.fade Content 2 + %li + %a.visible-xs-block{"data-toggle" => "tab", :href => "#tab-responsive-3"} + foo + %li#tab-responsive-3.tab-pane.fade Content 3 + %li + %a.visible-xs-block{"data-toggle" => "tab", :href => "#tab-responsive-4"} + foo + %li#tab-responsive-4.tab-pane.fade Content 4 + +``` +*/ +/* line 337, ../../src/pivotal-ui/components/tabs.scss */ +.tab-responsive a[data-toggle="tab"] { + padding: 8px 10px; + color: #8d8e8e; + margin: 5px 0; + border-radius: 6px; + -webkit-transition: all 300ms ease-out; + -moz-transition: all 300ms ease-out; + transition: all 300ms ease-out; +} +/* line 345, ../../src/pivotal-ui/components/tabs.scss */ +.tab-responsive .active a[data-toggle="tab"], +.tab-responsive a[data-toggle="tab"]:hover, +.tab-responsive a[data-toggle="tab"]:focus { + background-color: #e0e4e5; + color: #00a79d; +} +@media (max-width: 768px) { + /* line 353, ../../src/pivotal-ui/components/tabs.scss */ + .tab-responsive a[data-toggle="tab"] { + background-color: #e0e4e5; + color: #00a79d; + } + /* line 358, ../../src/pivotal-ui/components/tabs.scss */ + .tab-responsive .tab-pane { + padding: 15px; + } +} + +/*doc +--- +title: Image +name: tab_image +parent: tab +--- + +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. + +```html_example +
      + +
      +
      Agility Content
      +
      Choice Content
      +
      Open Source
      +
      +
      + +``` +*/ +/* line 439, ../../src/pivotal-ui/components/tabs.scss */ +.tabs-images .nav-tabs-images { + text-align: center; +} +/* line 442, ../../src/pivotal-ui/components/tabs.scss */ +.tabs-images .nav-tabs-images li a[data-toggle=tab] { + display: inline-block; + width: 130px; + height: 130px; + margin: 0 30px; + box-shadow: 0 3px 0 rgba(0, 0, 0, 0.07); + background-color: #e0e4e5; + border-radius: 130px; + transition: all 300ms ease; + color: #b4b4b4; +} +/* line 59, ../../src/pivotal-ui/components/mixins.scss */ +.tabs-images .nav-tabs-images li a[data-toggle=tab]:hover, .tabs-images .nav-tabs-images li a[data-toggle=tab]:focus, .tabs-images .nav-tabs-images li a[data-toggle=tab]:active, .tabs-images .nav-tabs-images li a[data-toggle=tab].active { + box-shadow: 0 3px 0 rgba(0, 0, 0, 0.14); +} +/* line 454, ../../src/pivotal-ui/components/tabs.scss */ +.tabs-images .nav-tabs-images li a[data-toggle=tab] .icon-svg .icon { + fill: currentColor; +} +/* line 463, ../../src/pivotal-ui/components/tabs.scss */ +.tabs-images .nav-tabs-images li.active a, .tabs-images .nav-tabs-images li:hover a, .tabs-images .nav-tabs-images li:focus a, .tabs-images .nav-tabs-images li:active a { + background-color: #00a79d; + color: white; +} + +/*doc +--- +title: Ellipsis +name: ellipsis +categories: + - Utilities + - All +--- + +The type `.type-ellipsis-1-line` adds ellipsis to text when there is too much. Combine it with `.col-md-*` classes to get the width you want. + +```haml_example_table +%p.type-ellipsis-1-line + Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. + +%p.type-ellipsis-2-lines + Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. + +%p.type-ellipsis-3-lines + Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. +``` + + +
      +

      + Multi-line ellipsis only works on webkit. +

      +
      + +*/ +/* line 32, ../../src/pivotal-ui/components/ellipsis.scss */ +.type-ellipsis-1-line { + white-space: nowrap; + overflow: hidden; + -ms-text-overflow: ellipsis; + -o-text-overflow: ellipsis; + text-overflow: ellipsis; +} + +/* line 36, ../../src/pivotal-ui/components/ellipsis.scss */ +.type-ellipsis-2-lines, +.type-ellipsis-3-lines { + display: -webkit-box; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; + overflow: hidden; +} + +/* line 43, ../../src/pivotal-ui/components/ellipsis.scss */ +.type-ellipsis-3-lines { + -webkit-line-clamp: 3; +} + +/*doc +--- +title: Accordions +name: accordion +categories: + - Objects + - JavaScript + - All +--- + +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. + +```haml_example +%a.collapsed{data: {toggle: 'collapse'}, href: '#simple-collapse-example'} + .when-collapsed + Expand me + .when-expanded + Collapse me +#simple-collapse-example.collapse + Look at this content. +``` + +*/ +/*doc +--- +title: Sizes +name: accordion_sizes +parent: accordion +--- + +Default accordion size: + +```haml_example +#accordion-1.panel + .panel-heading-accordion.bg-neutral-11.collapse-trigger.collapsed{data: {toggle: 'collapse', parent: '#accordion-2'}, href: '#myCollapse-1'} + .row + .col-md-23 + %h3.h5.collapse-title.type-em-1.type-primary-2> My fancy application + #myCollapse-1.panel-collapse.collapse + .panel-body-accordion.bg-neutral-11 + This content should hide and show when the trigger is clicked. +``` + +Large accordion size: + +```haml_example +#accordion-2.panel + .panel-heading-accordion-large.bg-neutral-11.collapse-trigger.collapsed{data: {toggle: 'collapse', parent: '#accordion-2'}, href: '#myCollapse-2'} + .row + .col-md-23 + %h3.h5.collapse-title.type-em-1.type-primary-2> My fancy application + #myCollapse-2.panel-collapse.collapse + .panel-body-accordion.bg-neutral-11 + This content should hide and show when the trigger is clicked. +``` +*/ +/*doc +--- +title: With Icons +name: accordion_with_icons +parent: accordion +--- + +Accordion with plus/minus icon: + +```haml_example +#accordion-3.panel + .panel-heading-accordion-large.collapse-trigger.collapsed{data: {toggle: 'collapse', parent: '#accordion-2'}, href: '#myCollapse-3'} + .row + .col-md-23 + %a + .when-collapsed-inline> + %i.fa.fa-plus-square.collapse-icon> + .when-expanded-inline> + %i.fa.fa-minus-square.collapse-icon> + %h3.h5.collapse-title.type-em-1.type-primary-2> My fancy application + #myCollapse-3.panel-collapse.collapse + .panel-body-accordion.bg-neutral-11 + This content should hide and show when the trigger is clicked. +``` + +Accordion with caret right/down icon: + +```haml_example +#accordion-4.panel + .panel-heading-accordion.collapse-trigger.collapsed{data: {toggle: 'collapse', parent: '#accordion-3'}, href: '#myCollapse-4'} + .row + .col-md-23 + %a + .when-collapsed-inline> + %i.fa.fa-caret-right.collapse-icon> + .when-expanded-inline> + %i.fa.fa-caret-down.collapse-icon> + %h3.h5.collapse-title.type-em-1.type-primary-2> My fancy application + #myCollapse-4.panel-collapse.collapse + .panel-body-accordion.bg-neutral-11 + This content should hide and show when the trigger is clicked. + +``` +*/ +/*doc +--- +title: Styles +name: accordion_styles +parent: accordion +--- + +Accordion with Divider: + +This adds a divider between the accordion header and accordion body. + +```haml_example +#accordion-5.panel + .panel-heading-accordion.bg-neutral-11.collapse-trigger.collapsed{data: {toggle: 'collapse', parent: '#accordion-3'}, href: '#myCollapse-5'} + .row + .col-md-23 + %a + .when-collapsed-inline> + %i.fa.fa-caret-right.collapse-icon> + .when-expanded-inline> + %i.fa.fa-caret-down.collapse-icon> + %h3.h5.collapse-title.type-em-1.type-primary-2> My fancy application + #myCollapse-5.panel-collapse.collapse + .panel-body-accordion-divider.bg-neutral-11 + This content should hide and show when the trigger is clicked. + +``` + +Accordion with Shadow: + +This adds a shadow to the accordion when it is both open and closed. + +```haml_example +#accordion-6.panel.panel-shadow + .panel-heading-accordion.bg-neutral-11.collapse-trigger.collapsed{data: {toggle: 'collapse', parent: '#accordion-3'}, href: '#myCollapse-6'} + .row + .col-md-23 + %a + .when-collapsed-inline> + %i.fa.fa-caret-right.collapse-icon> + .when-expanded-inline> + %i.fa.fa-caret-down.collapse-icon> + %h3.h5.collapse-title.type-em-1.type-primary-2> My fancy application + #myCollapse-6.panel-collapse.collapse + .panel-body-accordion-divider.bg-neutral-11 + This content should hide and show when the trigger is clicked. + +``` + +*/ +/* line 176, ../../src/pivotal-ui/components/collapse.scss */ +[data-toggle=collapse] .when-collapsed { + display: none; +} +/* line 179, ../../src/pivotal-ui/components/collapse.scss */ +[data-toggle=collapse] .when-expanded { + display: block; +} +/* line 182, ../../src/pivotal-ui/components/collapse.scss */ +[data-toggle=collapse] .when-collapsed-inline { + display: none; +} +/* line 185, ../../src/pivotal-ui/components/collapse.scss */ +[data-toggle=collapse] .when-expanded-inline { + display: inline; +} +/* line 190, ../../src/pivotal-ui/components/collapse.scss */ +[data-toggle=collapse].collapsed .when-collapsed { + display: block; +} +/* line 193, ../../src/pivotal-ui/components/collapse.scss */ +[data-toggle=collapse].collapsed .when-expanded { + display: none; +} +/* line 196, ../../src/pivotal-ui/components/collapse.scss */ +[data-toggle=collapse].collapsed .when-collapsed-inline { + display: inline; +} +/* line 199, ../../src/pivotal-ui/components/collapse.scss */ +[data-toggle=collapse].collapsed .when-expanded-inline { + display: none; +} + +/* line 206, ../../src/pivotal-ui/components/collapse.scss */ +.collapse-trigger { + cursor: pointer; +} +/* line 209, ../../src/pivotal-ui/components/collapse.scss */ +.collapse-trigger .collapse-title { + display: inline-block; +} +/* line 213, ../../src/pivotal-ui/components/collapse.scss */ +.collapse-trigger .collapse-icon { + display: inline-block; + width: 15px; + color: #686868; + margin-right: 5px; +} + +/* line 221, ../../src/pivotal-ui/components/collapse.scss */ +.panel-heading-accordion, .panel-heading-accordion-large { + position: relative; + padding: 10px 20px; + margin-bottom: 0px; + cursor: pointer; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} + +/* line 232, ../../src/pivotal-ui/components/collapse.scss */ +.panel-body-accordion, .panel-body-accordion-divider { + margin: 0px; + padding: 30px 20px; +} + +/* line 237, ../../src/pivotal-ui/components/collapse.scss */ +.panel-heading-accordion-large { + padding: 25px 20px 25px 20px; +} + +/* line 242, ../../src/pivotal-ui/components/collapse.scss */ +.panel-body-accordion-divider { + border-top: 2px solid rgba(0, 0, 0, 0.07); +} + +/*doc +--- +title: Introduction +name: 00_form_introduction +categories: + - Forms +--- + +Individual form controls automatically receive some global styling. +All textual ``, `"; + support.noCloneChecked = !!div.cloneNode( true ).lastChild.defaultValue; +})(); +var strundefined = typeof undefined; + + + +support.focusinBubbles = "onfocusin" in window; + + +var + rkeyEvent = /^key/, + rmouseEvent = /^(?:mouse|pointer|contextmenu)|click/, + rfocusMorph = /^(?:focusinfocus|focusoutblur)$/, + rtypenamespace = /^([^.]*)(?:\.(.+)|)$/; + +function returnTrue() { + return true; +} + +function returnFalse() { + return false; +} + +function safeActiveElement() { + try { + return document.activeElement; + } catch ( err ) { } +} + +/* + * Helper functions for managing events -- not part of the public interface. + * Props to Dean Edwards' addEvent library for many of the ideas. + */ +jQuery.event = { + + global: {}, + + add: function( elem, types, handler, data, selector ) { + + var handleObjIn, eventHandle, tmp, + events, t, handleObj, + special, handlers, type, namespaces, origType, + elemData = data_priv.get( elem ); + + // Don't attach events to noData or text/comment nodes (but allow plain objects) + if ( !elemData ) { + return; + } + + // Caller can pass in an object of custom data in lieu of the handler + if ( handler.handler ) { + handleObjIn = handler; + handler = handleObjIn.handler; + selector = handleObjIn.selector; + } + + // Make sure that the handler has a unique ID, used to find/remove it later + if ( !handler.guid ) { + handler.guid = jQuery.guid++; + } + + // Init the element's event structure and main handler, if this is the first + if ( !(events = elemData.events) ) { + events = elemData.events = {}; + } + if ( !(eventHandle = elemData.handle) ) { + eventHandle = elemData.handle = function( e ) { + // Discard the second event of a jQuery.event.trigger() and + // when an event is called after a page has unloaded + return typeof jQuery !== strundefined && jQuery.event.triggered !== e.type ? + jQuery.event.dispatch.apply( elem, arguments ) : undefined; + }; + } + + // Handle multiple events separated by a space + types = ( types || "" ).match( rnotwhite ) || [ "" ]; + t = types.length; + while ( t-- ) { + tmp = rtypenamespace.exec( types[t] ) || []; + type = origType = tmp[1]; + namespaces = ( tmp[2] || "" ).split( "." ).sort(); + + // There *must* be a type, no attaching namespace-only handlers + if ( !type ) { + continue; + } + + // If event changes its type, use the special event handlers for the changed type + special = jQuery.event.special[ type ] || {}; + + // If selector defined, determine special event api type, otherwise given type + type = ( selector ? special.delegateType : special.bindType ) || type; + + // Update special based on newly reset type + special = jQuery.event.special[ type ] || {}; + + // handleObj is passed to all event handlers + handleObj = jQuery.extend({ + type: type, + origType: origType, + data: data, + handler: handler, + guid: handler.guid, + selector: selector, + needsContext: selector && jQuery.expr.match.needsContext.test( selector ), + namespace: namespaces.join(".") + }, handleObjIn ); + + // Init the event handler queue if we're the first + if ( !(handlers = events[ type ]) ) { + handlers = events[ type ] = []; + handlers.delegateCount = 0; + + // Only use addEventListener if the special events handler returns false + if ( !special.setup || special.setup.call( elem, data, namespaces, eventHandle ) === false ) { + if ( elem.addEventListener ) { + elem.addEventListener( type, eventHandle, false ); + } + } + } + + if ( special.add ) { + special.add.call( elem, handleObj ); + + if ( !handleObj.handler.guid ) { + handleObj.handler.guid = handler.guid; + } + } + + // Add to the element's handler list, delegates in front + if ( selector ) { + handlers.splice( handlers.delegateCount++, 0, handleObj ); + } else { + handlers.push( handleObj ); + } + + // Keep track of which events have ever been used, for event optimization + jQuery.event.global[ type ] = true; + } + + }, + + // Detach an event or set of events from an element + remove: function( elem, types, handler, selector, mappedTypes ) { + + var j, origCount, tmp, + events, t, handleObj, + special, handlers, type, namespaces, origType, + elemData = data_priv.hasData( elem ) && data_priv.get( elem ); + + if ( !elemData || !(events = elemData.events) ) { + return; + } + + // Once for each type.namespace in types; type may be omitted + types = ( types || "" ).match( rnotwhite ) || [ "" ]; + t = types.length; + while ( t-- ) { + tmp = rtypenamespace.exec( types[t] ) || []; + type = origType = tmp[1]; + namespaces = ( tmp[2] || "" ).split( "." ).sort(); + + // Unbind all events (on this namespace, if provided) for the element + if ( !type ) { + for ( type in events ) { + jQuery.event.remove( elem, type + types[ t ], handler, selector, true ); + } + continue; + } + + special = jQuery.event.special[ type ] || {}; + type = ( selector ? special.delegateType : special.bindType ) || type; + handlers = events[ type ] || []; + tmp = tmp[2] && new RegExp( "(^|\\.)" + namespaces.join("\\.(?:.*\\.|)") + "(\\.|$)" ); + + // Remove matching events + origCount = j = handlers.length; + while ( j-- ) { + handleObj = handlers[ j ]; + + if ( ( mappedTypes || origType === handleObj.origType ) && + ( !handler || handler.guid === handleObj.guid ) && + ( !tmp || tmp.test( handleObj.namespace ) ) && + ( !selector || selector === handleObj.selector || selector === "**" && handleObj.selector ) ) { + handlers.splice( j, 1 ); + + if ( handleObj.selector ) { + handlers.delegateCount--; + } + if ( special.remove ) { + special.remove.call( elem, handleObj ); + } + } + } + + // Remove generic event handler if we removed something and no more handlers exist + // (avoids potential for endless recursion during removal of special event handlers) + if ( origCount && !handlers.length ) { + if ( !special.teardown || special.teardown.call( elem, namespaces, elemData.handle ) === false ) { + jQuery.removeEvent( elem, type, elemData.handle ); + } + + delete events[ type ]; + } + } + + // Remove the expando if it's no longer used + if ( jQuery.isEmptyObject( events ) ) { + delete elemData.handle; + data_priv.remove( elem, "events" ); + } + }, + + trigger: function( event, data, elem, onlyHandlers ) { + + var i, cur, tmp, bubbleType, ontype, handle, special, + eventPath = [ elem || document ], + type = hasOwn.call( event, "type" ) ? event.type : event, + namespaces = hasOwn.call( event, "namespace" ) ? event.namespace.split(".") : []; + + cur = tmp = elem = elem || document; + + // Don't do events on text and comment nodes + if ( elem.nodeType === 3 || elem.nodeType === 8 ) { + return; + } + + // focus/blur morphs to focusin/out; ensure we're not firing them right now + if ( rfocusMorph.test( type + jQuery.event.triggered ) ) { + return; + } + + if ( type.indexOf(".") >= 0 ) { + // Namespaced trigger; create a regexp to match event type in handle() + namespaces = type.split("."); + type = namespaces.shift(); + namespaces.sort(); + } + ontype = type.indexOf(":") < 0 && "on" + type; + + // Caller can pass in a jQuery.Event object, Object, or just an event type string + event = event[ jQuery.expando ] ? + event : + new jQuery.Event( type, typeof event === "object" && event ); + + // Trigger bitmask: & 1 for native handlers; & 2 for jQuery (always true) + event.isTrigger = onlyHandlers ? 2 : 3; + event.namespace = namespaces.join("."); + event.namespace_re = event.namespace ? + new RegExp( "(^|\\.)" + namespaces.join("\\.(?:.*\\.|)") + "(\\.|$)" ) : + null; + + // Clean up the event in case it is being reused + event.result = undefined; + if ( !event.target ) { + event.target = elem; + } + + // Clone any incoming data and prepend the event, creating the handler arg list + data = data == null ? + [ event ] : + jQuery.makeArray( data, [ event ] ); + + // Allow special events to draw outside the lines + special = jQuery.event.special[ type ] || {}; + if ( !onlyHandlers && special.trigger && special.trigger.apply( elem, data ) === false ) { + return; + } + + // Determine event propagation path in advance, per W3C events spec (#9951) + // Bubble up to document, then to window; watch for a global ownerDocument var (#9724) + if ( !onlyHandlers && !special.noBubble && !jQuery.isWindow( elem ) ) { + + bubbleType = special.delegateType || type; + if ( !rfocusMorph.test( bubbleType + type ) ) { + cur = cur.parentNode; + } + for ( ; cur; cur = cur.parentNode ) { + eventPath.push( cur ); + tmp = cur; + } + + // Only add window if we got to document (e.g., not plain obj or detached DOM) + if ( tmp === (elem.ownerDocument || document) ) { + eventPath.push( tmp.defaultView || tmp.parentWindow || window ); + } + } + + // Fire handlers on the event path + i = 0; + while ( (cur = eventPath[i++]) && !event.isPropagationStopped() ) { + + event.type = i > 1 ? + bubbleType : + special.bindType || type; + + // jQuery handler + handle = ( data_priv.get( cur, "events" ) || {} )[ event.type ] && data_priv.get( cur, "handle" ); + if ( handle ) { + handle.apply( cur, data ); + } + + // Native handler + handle = ontype && cur[ ontype ]; + if ( handle && handle.apply && jQuery.acceptData( cur ) ) { + event.result = handle.apply( cur, data ); + if ( event.result === false ) { + event.preventDefault(); + } + } + } + event.type = type; + + // If nobody prevented the default action, do it now + if ( !onlyHandlers && !event.isDefaultPrevented() ) { + + if ( (!special._default || special._default.apply( eventPath.pop(), data ) === false) && + jQuery.acceptData( elem ) ) { + + // Call a native DOM method on the target with the same name name as the event. + // Don't do default actions on window, that's where global variables be (#6170) + if ( ontype && jQuery.isFunction( elem[ type ] ) && !jQuery.isWindow( elem ) ) { + + // Don't re-trigger an onFOO event when we call its FOO() method + tmp = elem[ ontype ]; + + if ( tmp ) { + elem[ ontype ] = null; + } + + // Prevent re-triggering of the same event, since we already bubbled it above + jQuery.event.triggered = type; + elem[ type ](); + jQuery.event.triggered = undefined; + + if ( tmp ) { + elem[ ontype ] = tmp; + } + } + } + } + + return event.result; + }, + + dispatch: function( event ) { + + // Make a writable jQuery.Event from the native event object + event = jQuery.event.fix( event ); + + var i, j, ret, matched, handleObj, + handlerQueue = [], + args = slice.call( arguments ), + handlers = ( data_priv.get( this, "events" ) || {} )[ event.type ] || [], + special = jQuery.event.special[ event.type ] || {}; + + // Use the fix-ed jQuery.Event rather than the (read-only) native event + args[0] = event; + event.delegateTarget = this; + + // Call the preDispatch hook for the mapped type, and let it bail if desired + if ( special.preDispatch && special.preDispatch.call( this, event ) === false ) { + return; + } + + // Determine handlers + handlerQueue = jQuery.event.handlers.call( this, event, handlers ); + + // Run delegates first; they may want to stop propagation beneath us + i = 0; + while ( (matched = handlerQueue[ i++ ]) && !event.isPropagationStopped() ) { + event.currentTarget = matched.elem; + + j = 0; + while ( (handleObj = matched.handlers[ j++ ]) && !event.isImmediatePropagationStopped() ) { + + // Triggered event must either 1) have no namespace, or + // 2) have namespace(s) a subset or equal to those in the bound event (both can have no namespace). + if ( !event.namespace_re || event.namespace_re.test( handleObj.namespace ) ) { + + event.handleObj = handleObj; + event.data = handleObj.data; + + ret = ( (jQuery.event.special[ handleObj.origType ] || {}).handle || handleObj.handler ) + .apply( matched.elem, args ); + + if ( ret !== undefined ) { + if ( (event.result = ret) === false ) { + event.preventDefault(); + event.stopPropagation(); + } + } + } + } + } + + // Call the postDispatch hook for the mapped type + if ( special.postDispatch ) { + special.postDispatch.call( this, event ); + } + + return event.result; + }, + + handlers: function( event, handlers ) { + var i, matches, sel, handleObj, + handlerQueue = [], + delegateCount = handlers.delegateCount, + cur = event.target; + + // Find delegate handlers + // Black-hole SVG instance trees (#13180) + // Avoid non-left-click bubbling in Firefox (#3861) + if ( delegateCount && cur.nodeType && (!event.button || event.type !== "click") ) { + + for ( ; cur !== this; cur = cur.parentNode || this ) { + + // Don't process clicks on disabled elements (#6911, #8165, #11382, #11764) + if ( cur.disabled !== true || event.type !== "click" ) { + matches = []; + for ( i = 0; i < delegateCount; i++ ) { + handleObj = handlers[ i ]; + + // Don't conflict with Object.prototype properties (#13203) + sel = handleObj.selector + " "; + + if ( matches[ sel ] === undefined ) { + matches[ sel ] = handleObj.needsContext ? + jQuery( sel, this ).index( cur ) >= 0 : + jQuery.find( sel, this, null, [ cur ] ).length; + } + if ( matches[ sel ] ) { + matches.push( handleObj ); + } + } + if ( matches.length ) { + handlerQueue.push({ elem: cur, handlers: matches }); + } + } + } + } + + // Add the remaining (directly-bound) handlers + if ( delegateCount < handlers.length ) { + handlerQueue.push({ elem: this, handlers: handlers.slice( delegateCount ) }); + } + + return handlerQueue; + }, + + // Includes some event props shared by KeyEvent and MouseEvent + props: "altKey bubbles cancelable ctrlKey currentTarget eventPhase metaKey relatedTarget shiftKey target timeStamp view which".split(" "), + + fixHooks: {}, + + keyHooks: { + props: "char charCode key keyCode".split(" "), + filter: function( event, original ) { + + // Add which for key events + if ( event.which == null ) { + event.which = original.charCode != null ? original.charCode : original.keyCode; + } + + return event; + } + }, + + mouseHooks: { + props: "button buttons clientX clientY offsetX offsetY pageX pageY screenX screenY toElement".split(" "), + filter: function( event, original ) { + var eventDoc, doc, body, + button = original.button; + + // Calculate pageX/Y if missing and clientX/Y available + if ( event.pageX == null && original.clientX != null ) { + eventDoc = event.target.ownerDocument || document; + doc = eventDoc.documentElement; + body = eventDoc.body; + + event.pageX = original.clientX + ( doc && doc.scrollLeft || body && body.scrollLeft || 0 ) - ( doc && doc.clientLeft || body && body.clientLeft || 0 ); + event.pageY = original.clientY + ( doc && doc.scrollTop || body && body.scrollTop || 0 ) - ( doc && doc.clientTop || body && body.clientTop || 0 ); + } + + // Add which for click: 1 === left; 2 === middle; 3 === right + // Note: button is not normalized, so don't use it + if ( !event.which && button !== undefined ) { + event.which = ( button & 1 ? 1 : ( button & 2 ? 3 : ( button & 4 ? 2 : 0 ) ) ); + } + + return event; + } + }, + + fix: function( event ) { + if ( event[ jQuery.expando ] ) { + return event; + } + + // Create a writable copy of the event object and normalize some properties + var i, prop, copy, + type = event.type, + originalEvent = event, + fixHook = this.fixHooks[ type ]; + + if ( !fixHook ) { + this.fixHooks[ type ] = fixHook = + rmouseEvent.test( type ) ? this.mouseHooks : + rkeyEvent.test( type ) ? this.keyHooks : + {}; + } + copy = fixHook.props ? this.props.concat( fixHook.props ) : this.props; + + event = new jQuery.Event( originalEvent ); + + i = copy.length; + while ( i-- ) { + prop = copy[ i ]; + event[ prop ] = originalEvent[ prop ]; + } + + // Support: Cordova 2.5 (WebKit) (#13255) + // All events should have a target; Cordova deviceready doesn't + if ( !event.target ) { + event.target = document; + } + + // Support: Safari 6.0+, Chrome < 28 + // Target should not be a text node (#504, #13143) + if ( event.target.nodeType === 3 ) { + event.target = event.target.parentNode; + } + + return fixHook.filter ? fixHook.filter( event, originalEvent ) : event; + }, + + special: { + load: { + // Prevent triggered image.load events from bubbling to window.load + noBubble: true + }, + focus: { + // Fire native event if possible so blur/focus sequence is correct + trigger: function() { + if ( this !== safeActiveElement() && this.focus ) { + this.focus(); + return false; + } + }, + delegateType: "focusin" + }, + blur: { + trigger: function() { + if ( this === safeActiveElement() && this.blur ) { + this.blur(); + return false; + } + }, + delegateType: "focusout" + }, + click: { + // For checkbox, fire native event so checked state will be right + trigger: function() { + if ( this.type === "checkbox" && this.click && jQuery.nodeName( this, "input" ) ) { + this.click(); + return false; + } + }, + + // For cross-browser consistency, don't fire native .click() on links + _default: function( event ) { + return jQuery.nodeName( event.target, "a" ); + } + }, + + beforeunload: { + postDispatch: function( event ) { + + // Support: Firefox 20+ + // Firefox doesn't alert if the returnValue field is not set. + if ( event.result !== undefined && event.originalEvent ) { + event.originalEvent.returnValue = event.result; + } + } + } + }, + + simulate: function( type, elem, event, bubble ) { + // Piggyback on a donor event to simulate a different one. + // Fake originalEvent to avoid donor's stopPropagation, but if the + // simulated event prevents default then we do the same on the donor. + var e = jQuery.extend( + new jQuery.Event(), + event, + { + type: type, + isSimulated: true, + originalEvent: {} + } + ); + if ( bubble ) { + jQuery.event.trigger( e, null, elem ); + } else { + jQuery.event.dispatch.call( elem, e ); + } + if ( e.isDefaultPrevented() ) { + event.preventDefault(); + } + } +}; + +jQuery.removeEvent = function( elem, type, handle ) { + if ( elem.removeEventListener ) { + elem.removeEventListener( type, handle, false ); + } +}; + +jQuery.Event = function( src, props ) { + // Allow instantiation without the 'new' keyword + if ( !(this instanceof jQuery.Event) ) { + return new jQuery.Event( src, props ); + } + + // Event object + if ( src && src.type ) { + this.originalEvent = src; + this.type = src.type; + + // Events bubbling up the document may have been marked as prevented + // by a handler lower down the tree; reflect the correct value. + this.isDefaultPrevented = src.defaultPrevented || + src.defaultPrevented === undefined && + // Support: Android < 4.0 + src.returnValue === false ? + returnTrue : + returnFalse; + + // Event type + } else { + this.type = src; + } + + // Put explicitly provided properties onto the event object + if ( props ) { + jQuery.extend( this, props ); + } + + // Create a timestamp if incoming event doesn't have one + this.timeStamp = src && src.timeStamp || jQuery.now(); + + // Mark it as fixed + this[ jQuery.expando ] = true; +}; + +// jQuery.Event is based on DOM3 Events as specified by the ECMAScript Language Binding +// http://www.w3.org/TR/2003/WD-DOM-Level-3-Events-20030331/ecma-script-binding.html +jQuery.Event.prototype = { + isDefaultPrevented: returnFalse, + isPropagationStopped: returnFalse, + isImmediatePropagationStopped: returnFalse, + + preventDefault: function() { + var e = this.originalEvent; + + this.isDefaultPrevented = returnTrue; + + if ( e && e.preventDefault ) { + e.preventDefault(); + } + }, + stopPropagation: function() { + var e = this.originalEvent; + + this.isPropagationStopped = returnTrue; + + if ( e && e.stopPropagation ) { + e.stopPropagation(); + } + }, + stopImmediatePropagation: function() { + var e = this.originalEvent; + + this.isImmediatePropagationStopped = returnTrue; + + if ( e && e.stopImmediatePropagation ) { + e.stopImmediatePropagation(); + } + + this.stopPropagation(); + } +}; + +// Create mouseenter/leave events using mouseover/out and event-time checks +// Support: Chrome 15+ +jQuery.each({ + mouseenter: "mouseover", + mouseleave: "mouseout", + pointerenter: "pointerover", + pointerleave: "pointerout" +}, function( orig, fix ) { + jQuery.event.special[ orig ] = { + delegateType: fix, + bindType: fix, + + handle: function( event ) { + var ret, + target = this, + related = event.relatedTarget, + handleObj = event.handleObj; + + // For mousenter/leave call the handler if related is outside the target. + // NB: No relatedTarget if the mouse left/entered the browser window + if ( !related || (related !== target && !jQuery.contains( target, related )) ) { + event.type = handleObj.origType; + ret = handleObj.handler.apply( this, arguments ); + event.type = fix; + } + return ret; + } + }; +}); + +// Create "bubbling" focus and blur events +// Support: Firefox, Chrome, Safari +if ( !support.focusinBubbles ) { + jQuery.each({ focus: "focusin", blur: "focusout" }, function( orig, fix ) { + + // Attach a single capturing handler on the document while someone wants focusin/focusout + var handler = function( event ) { + jQuery.event.simulate( fix, event.target, jQuery.event.fix( event ), true ); + }; + + jQuery.event.special[ fix ] = { + setup: function() { + var doc = this.ownerDocument || this, + attaches = data_priv.access( doc, fix ); + + if ( !attaches ) { + doc.addEventListener( orig, handler, true ); + } + data_priv.access( doc, fix, ( attaches || 0 ) + 1 ); + }, + teardown: function() { + var doc = this.ownerDocument || this, + attaches = data_priv.access( doc, fix ) - 1; + + if ( !attaches ) { + doc.removeEventListener( orig, handler, true ); + data_priv.remove( doc, fix ); + + } else { + data_priv.access( doc, fix, attaches ); + } + } + }; + }); +} + +jQuery.fn.extend({ + + on: function( types, selector, data, fn, /*INTERNAL*/ one ) { + var origFn, type; + + // Types can be a map of types/handlers + if ( typeof types === "object" ) { + // ( types-Object, selector, data ) + if ( typeof selector !== "string" ) { + // ( types-Object, data ) + data = data || selector; + selector = undefined; + } + for ( type in types ) { + this.on( type, selector, data, types[ type ], one ); + } + return this; + } + + if ( data == null && fn == null ) { + // ( types, fn ) + fn = selector; + data = selector = undefined; + } else if ( fn == null ) { + if ( typeof selector === "string" ) { + // ( types, selector, fn ) + fn = data; + data = undefined; + } else { + // ( types, data, fn ) + fn = data; + data = selector; + selector = undefined; + } + } + if ( fn === false ) { + fn = returnFalse; + } else if ( !fn ) { + return this; + } + + if ( one === 1 ) { + origFn = fn; + fn = function( event ) { + // Can use an empty set, since event contains the info + jQuery().off( event ); + return origFn.apply( this, arguments ); + }; + // Use same guid so caller can remove using origFn + fn.guid = origFn.guid || ( origFn.guid = jQuery.guid++ ); + } + return this.each( function() { + jQuery.event.add( this, types, fn, data, selector ); + }); + }, + one: function( types, selector, data, fn ) { + return this.on( types, selector, data, fn, 1 ); + }, + off: function( types, selector, fn ) { + var handleObj, type; + if ( types && types.preventDefault && types.handleObj ) { + // ( event ) dispatched jQuery.Event + handleObj = types.handleObj; + jQuery( types.delegateTarget ).off( + handleObj.namespace ? handleObj.origType + "." + handleObj.namespace : handleObj.origType, + handleObj.selector, + handleObj.handler + ); + return this; + } + if ( typeof types === "object" ) { + // ( types-object [, selector] ) + for ( type in types ) { + this.off( type, selector, types[ type ] ); + } + return this; + } + if ( selector === false || typeof selector === "function" ) { + // ( types [, fn] ) + fn = selector; + selector = undefined; + } + if ( fn === false ) { + fn = returnFalse; + } + return this.each(function() { + jQuery.event.remove( this, types, fn, selector ); + }); + }, + + trigger: function( type, data ) { + return this.each(function() { + jQuery.event.trigger( type, data, this ); + }); + }, + triggerHandler: function( type, data ) { + var elem = this[0]; + if ( elem ) { + return jQuery.event.trigger( type, data, elem, true ); + } + } +}); + + +var + rxhtmlTag = /<(?!area|br|col|embed|hr|img|input|link|meta|param)(([\w:]+)[^>]*)\/>/gi, + rtagName = /<([\w:]+)/, + rhtml = /<|&#?\w+;/, + rnoInnerhtml = /<(?:script|style|link)/i, + // checked="checked" or checked + rchecked = /checked\s*(?:[^=]|=\s*.checked.)/i, + rscriptType = /^$|\/(?:java|ecma)script/i, + rscriptTypeMasked = /^true\/(.*)/, + rcleanScript = /^\s*\s*$/g, + + // We have to close these tags to support XHTML (#13200) + wrapMap = { + + // Support: IE 9 + option: [ 1, "" ], + + thead: [ 1, "", "
      " ], + col: [ 2, "", "
      " ], + tr: [ 2, "", "
      " ], + td: [ 3, "", "
      " ], + + _default: [ 0, "", "" ] + }; + +// Support: IE 9 +wrapMap.optgroup = wrapMap.option; + +wrapMap.tbody = wrapMap.tfoot = wrapMap.colgroup = wrapMap.caption = wrapMap.thead; +wrapMap.th = wrapMap.td; + +// Support: 1.x compatibility +// Manipulating tables requires a tbody +function manipulationTarget( elem, content ) { + return jQuery.nodeName( elem, "table" ) && + jQuery.nodeName( content.nodeType !== 11 ? content : content.firstChild, "tr" ) ? + + elem.getElementsByTagName("tbody")[0] || + elem.appendChild( elem.ownerDocument.createElement("tbody") ) : + elem; +} + +// Replace/restore the type attribute of script elements for safe DOM manipulation +function disableScript( elem ) { + elem.type = (elem.getAttribute("type") !== null) + "/" + elem.type; + return elem; +} +function restoreScript( elem ) { + var match = rscriptTypeMasked.exec( elem.type ); + + if ( match ) { + elem.type = match[ 1 ]; + } else { + elem.removeAttribute("type"); + } + + return elem; +} + +// Mark scripts as having already been evaluated +function setGlobalEval( elems, refElements ) { + var i = 0, + l = elems.length; + + for ( ; i < l; i++ ) { + data_priv.set( + elems[ i ], "globalEval", !refElements || data_priv.get( refElements[ i ], "globalEval" ) + ); + } +} + +function cloneCopyEvent( src, dest ) { + var i, l, type, pdataOld, pdataCur, udataOld, udataCur, events; + + if ( dest.nodeType !== 1 ) { + return; + } + + // 1. Copy private data: events, handlers, etc. + if ( data_priv.hasData( src ) ) { + pdataOld = data_priv.access( src ); + pdataCur = data_priv.set( dest, pdataOld ); + events = pdataOld.events; + + if ( events ) { + delete pdataCur.handle; + pdataCur.events = {}; + + for ( type in events ) { + for ( i = 0, l = events[ type ].length; i < l; i++ ) { + jQuery.event.add( dest, type, events[ type ][ i ] ); + } + } + } + } + + // 2. Copy user data + if ( data_user.hasData( src ) ) { + udataOld = data_user.access( src ); + udataCur = jQuery.extend( {}, udataOld ); + + data_user.set( dest, udataCur ); + } +} + +function getAll( context, tag ) { + var ret = context.getElementsByTagName ? context.getElementsByTagName( tag || "*" ) : + context.querySelectorAll ? context.querySelectorAll( tag || "*" ) : + []; + + return tag === undefined || tag && jQuery.nodeName( context, tag ) ? + jQuery.merge( [ context ], ret ) : + ret; +} + +// Support: IE >= 9 +function fixInput( src, dest ) { + var nodeName = dest.nodeName.toLowerCase(); + + // Fails to persist the checked state of a cloned checkbox or radio button. + if ( nodeName === "input" && rcheckableType.test( src.type ) ) { + dest.checked = src.checked; + + // Fails to return the selected option to the default selected state when cloning options + } else if ( nodeName === "input" || nodeName === "textarea" ) { + dest.defaultValue = src.defaultValue; + } +} + +jQuery.extend({ + clone: function( elem, dataAndEvents, deepDataAndEvents ) { + var i, l, srcElements, destElements, + clone = elem.cloneNode( true ), + inPage = jQuery.contains( elem.ownerDocument, elem ); + + // Support: IE >= 9 + // Fix Cloning issues + if ( !support.noCloneChecked && ( elem.nodeType === 1 || elem.nodeType === 11 ) && + !jQuery.isXMLDoc( elem ) ) { + + // We eschew Sizzle here for performance reasons: http://jsperf.com/getall-vs-sizzle/2 + destElements = getAll( clone ); + srcElements = getAll( elem ); + + for ( i = 0, l = srcElements.length; i < l; i++ ) { + fixInput( srcElements[ i ], destElements[ i ] ); + } + } + + // Copy the events from the original to the clone + if ( dataAndEvents ) { + if ( deepDataAndEvents ) { + srcElements = srcElements || getAll( elem ); + destElements = destElements || getAll( clone ); + + for ( i = 0, l = srcElements.length; i < l; i++ ) { + cloneCopyEvent( srcElements[ i ], destElements[ i ] ); + } + } else { + cloneCopyEvent( elem, clone ); + } + } + + // Preserve script evaluation history + destElements = getAll( clone, "script" ); + if ( destElements.length > 0 ) { + setGlobalEval( destElements, !inPage && getAll( elem, "script" ) ); + } + + // Return the cloned set + return clone; + }, + + buildFragment: function( elems, context, scripts, selection ) { + var elem, tmp, tag, wrap, contains, j, + fragment = context.createDocumentFragment(), + nodes = [], + i = 0, + l = elems.length; + + for ( ; i < l; i++ ) { + elem = elems[ i ]; + + if ( elem || elem === 0 ) { + + // Add nodes directly + if ( jQuery.type( elem ) === "object" ) { + // Support: QtWebKit + // jQuery.merge because push.apply(_, arraylike) throws + jQuery.merge( nodes, elem.nodeType ? [ elem ] : elem ); + + // Convert non-html into a text node + } else if ( !rhtml.test( elem ) ) { + nodes.push( context.createTextNode( elem ) ); + + // Convert html into DOM nodes + } else { + tmp = tmp || fragment.appendChild( context.createElement("div") ); + + // Deserialize a standard representation + tag = ( rtagName.exec( elem ) || [ "", "" ] )[ 1 ].toLowerCase(); + wrap = wrapMap[ tag ] || wrapMap._default; + tmp.innerHTML = wrap[ 1 ] + elem.replace( rxhtmlTag, "<$1>" ) + wrap[ 2 ]; + + // Descend through wrappers to the right content + j = wrap[ 0 ]; + while ( j-- ) { + tmp = tmp.lastChild; + } + + // Support: QtWebKit + // jQuery.merge because push.apply(_, arraylike) throws + jQuery.merge( nodes, tmp.childNodes ); + + // Remember the top-level container + tmp = fragment.firstChild; + + // Fixes #12346 + // Support: Webkit, IE + tmp.textContent = ""; + } + } + } + + // Remove wrapper from fragment + fragment.textContent = ""; + + i = 0; + while ( (elem = nodes[ i++ ]) ) { + + // #4087 - If origin and destination elements are the same, and this is + // that element, do not do anything + if ( selection && jQuery.inArray( elem, selection ) !== -1 ) { + continue; + } + + contains = jQuery.contains( elem.ownerDocument, elem ); + + // Append to fragment + tmp = getAll( fragment.appendChild( elem ), "script" ); + + // Preserve script evaluation history + if ( contains ) { + setGlobalEval( tmp ); + } + + // Capture executables + if ( scripts ) { + j = 0; + while ( (elem = tmp[ j++ ]) ) { + if ( rscriptType.test( elem.type || "" ) ) { + scripts.push( elem ); + } + } + } + } + + return fragment; + }, + + cleanData: function( elems ) { + var data, elem, type, key, + special = jQuery.event.special, + i = 0; + + for ( ; (elem = elems[ i ]) !== undefined; i++ ) { + if ( jQuery.acceptData( elem ) ) { + key = elem[ data_priv.expando ]; + + if ( key && (data = data_priv.cache[ key ]) ) { + if ( data.events ) { + for ( type in data.events ) { + if ( special[ type ] ) { + jQuery.event.remove( elem, type ); + + // This is a shortcut to avoid jQuery.event.remove's overhead + } else { + jQuery.removeEvent( elem, type, data.handle ); + } + } + } + if ( data_priv.cache[ key ] ) { + // Discard any remaining `private` data + delete data_priv.cache[ key ]; + } + } + } + // Discard any remaining `user` data + delete data_user.cache[ elem[ data_user.expando ] ]; + } + } +}); + +jQuery.fn.extend({ + text: function( value ) { + return access( this, function( value ) { + return value === undefined ? + jQuery.text( this ) : + this.empty().each(function() { + if ( this.nodeType === 1 || this.nodeType === 11 || this.nodeType === 9 ) { + this.textContent = value; + } + }); + }, null, value, arguments.length ); + }, + + append: function() { + return this.domManip( arguments, function( elem ) { + if ( this.nodeType === 1 || this.nodeType === 11 || this.nodeType === 9 ) { + var target = manipulationTarget( this, elem ); + target.appendChild( elem ); + } + }); + }, + + prepend: function() { + return this.domManip( arguments, function( elem ) { + if ( this.nodeType === 1 || this.nodeType === 11 || this.nodeType === 9 ) { + var target = manipulationTarget( this, elem ); + target.insertBefore( elem, target.firstChild ); + } + }); + }, + + before: function() { + return this.domManip( arguments, function( elem ) { + if ( this.parentNode ) { + this.parentNode.insertBefore( elem, this ); + } + }); + }, + + after: function() { + return this.domManip( arguments, function( elem ) { + if ( this.parentNode ) { + this.parentNode.insertBefore( elem, this.nextSibling ); + } + }); + }, + + remove: function( selector, keepData /* Internal Use Only */ ) { + var elem, + elems = selector ? jQuery.filter( selector, this ) : this, + i = 0; + + for ( ; (elem = elems[i]) != null; i++ ) { + if ( !keepData && elem.nodeType === 1 ) { + jQuery.cleanData( getAll( elem ) ); + } + + if ( elem.parentNode ) { + if ( keepData && jQuery.contains( elem.ownerDocument, elem ) ) { + setGlobalEval( getAll( elem, "script" ) ); + } + elem.parentNode.removeChild( elem ); + } + } + + return this; + }, + + empty: function() { + var elem, + i = 0; + + for ( ; (elem = this[i]) != null; i++ ) { + if ( elem.nodeType === 1 ) { + + // Prevent memory leaks + jQuery.cleanData( getAll( elem, false ) ); + + // Remove any remaining nodes + elem.textContent = ""; + } + } + + return this; + }, + + clone: function( dataAndEvents, deepDataAndEvents ) { + dataAndEvents = dataAndEvents == null ? false : dataAndEvents; + deepDataAndEvents = deepDataAndEvents == null ? dataAndEvents : deepDataAndEvents; + + return this.map(function() { + return jQuery.clone( this, dataAndEvents, deepDataAndEvents ); + }); + }, + + html: function( value ) { + return access( this, function( value ) { + var elem = this[ 0 ] || {}, + i = 0, + l = this.length; + + if ( value === undefined && elem.nodeType === 1 ) { + return elem.innerHTML; + } + + // See if we can take a shortcut and just use innerHTML + if ( typeof value === "string" && !rnoInnerhtml.test( value ) && + !wrapMap[ ( rtagName.exec( value ) || [ "", "" ] )[ 1 ].toLowerCase() ] ) { + + value = value.replace( rxhtmlTag, "<$1>" ); + + try { + for ( ; i < l; i++ ) { + elem = this[ i ] || {}; + + // Remove element nodes and prevent memory leaks + if ( elem.nodeType === 1 ) { + jQuery.cleanData( getAll( elem, false ) ); + elem.innerHTML = value; + } + } + + elem = 0; + + // If using innerHTML throws an exception, use the fallback method + } catch( e ) {} + } + + if ( elem ) { + this.empty().append( value ); + } + }, null, value, arguments.length ); + }, + + replaceWith: function() { + var arg = arguments[ 0 ]; + + // Make the changes, replacing each context element with the new content + this.domManip( arguments, function( elem ) { + arg = this.parentNode; + + jQuery.cleanData( getAll( this ) ); + + if ( arg ) { + arg.replaceChild( elem, this ); + } + }); + + // Force removal if there was no new content (e.g., from empty arguments) + return arg && (arg.length || arg.nodeType) ? this : this.remove(); + }, + + detach: function( selector ) { + return this.remove( selector, true ); + }, + + domManip: function( args, callback ) { + + // Flatten any nested arrays + args = concat.apply( [], args ); + + var fragment, first, scripts, hasScripts, node, doc, + i = 0, + l = this.length, + set = this, + iNoClone = l - 1, + value = args[ 0 ], + isFunction = jQuery.isFunction( value ); + + // We can't cloneNode fragments that contain checked, in WebKit + if ( isFunction || + ( l > 1 && typeof value === "string" && + !support.checkClone && rchecked.test( value ) ) ) { + return this.each(function( index ) { + var self = set.eq( index ); + if ( isFunction ) { + args[ 0 ] = value.call( this, index, self.html() ); + } + self.domManip( args, callback ); + }); + } + + if ( l ) { + fragment = jQuery.buildFragment( args, this[ 0 ].ownerDocument, false, this ); + first = fragment.firstChild; + + if ( fragment.childNodes.length === 1 ) { + fragment = first; + } + + if ( first ) { + scripts = jQuery.map( getAll( fragment, "script" ), disableScript ); + hasScripts = scripts.length; + + // Use the original fragment for the last item instead of the first because it can end up + // being emptied incorrectly in certain situations (#8070). + for ( ; i < l; i++ ) { + node = fragment; + + if ( i !== iNoClone ) { + node = jQuery.clone( node, true, true ); + + // Keep references to cloned scripts for later restoration + if ( hasScripts ) { + // Support: QtWebKit + // jQuery.merge because push.apply(_, arraylike) throws + jQuery.merge( scripts, getAll( node, "script" ) ); + } + } + + callback.call( this[ i ], node, i ); + } + + if ( hasScripts ) { + doc = scripts[ scripts.length - 1 ].ownerDocument; + + // Reenable scripts + jQuery.map( scripts, restoreScript ); + + // Evaluate executable scripts on first document insertion + for ( i = 0; i < hasScripts; i++ ) { + node = scripts[ i ]; + if ( rscriptType.test( node.type || "" ) && + !data_priv.access( node, "globalEval" ) && jQuery.contains( doc, node ) ) { + + if ( node.src ) { + // Optional AJAX dependency, but won't run scripts if not present + if ( jQuery._evalUrl ) { + jQuery._evalUrl( node.src ); + } + } else { + jQuery.globalEval( node.textContent.replace( rcleanScript, "" ) ); + } + } + } + } + } + } + + return this; + } +}); + +jQuery.each({ + appendTo: "append", + prependTo: "prepend", + insertBefore: "before", + insertAfter: "after", + replaceAll: "replaceWith" +}, function( name, original ) { + jQuery.fn[ name ] = function( selector ) { + var elems, + ret = [], + insert = jQuery( selector ), + last = insert.length - 1, + i = 0; + + for ( ; i <= last; i++ ) { + elems = i === last ? this : this.clone( true ); + jQuery( insert[ i ] )[ original ]( elems ); + + // Support: QtWebKit + // .get() because push.apply(_, arraylike) throws + push.apply( ret, elems.get() ); + } + + return this.pushStack( ret ); + }; +}); + + +var iframe, + elemdisplay = {}; + +/** + * Retrieve the actual display of a element + * @param {String} name nodeName of the element + * @param {Object} doc Document object + */ +// Called only from within defaultDisplay +function actualDisplay( name, doc ) { + var style, + elem = jQuery( doc.createElement( name ) ).appendTo( doc.body ), + + // getDefaultComputedStyle might be reliably used only on attached element + display = window.getDefaultComputedStyle && ( style = window.getDefaultComputedStyle( elem[ 0 ] ) ) ? + + // Use of this method is a temporary fix (more like optmization) until something better comes along, + // since it was removed from specification and supported only in FF + style.display : jQuery.css( elem[ 0 ], "display" ); + + // We don't have any data stored on the element, + // so use "detach" method as fast way to get rid of the element + elem.detach(); + + return display; +} + +/** + * Try to determine the default display value of an element + * @param {String} nodeName + */ +function defaultDisplay( nodeName ) { + var doc = document, + display = elemdisplay[ nodeName ]; + + if ( !display ) { + display = actualDisplay( nodeName, doc ); + + // If the simple way fails, read from inside an iframe + if ( display === "none" || !display ) { + + // Use the already-created iframe if possible + iframe = (iframe || jQuery( "