text:
<!DOCTYPE html>

  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Tetra Ui | Elements</title>
  <meta name="description" content="Tetra UI: a smart, easy-to-use toolkit for creating rich interfaces in lightning speed!" />
  <link rel="icon" href="/tetra-ui/dist/img/tetra-ui/favicon.png" />
  <link rel="stylesheet" href="/tetra-ui/dist/css/tetra-ui-doc.css" title="ltr"/>

        Typography

              Headings

              Links

              Paragraphs

              Lists

              Panels

        Colors

              Palette

              Using Less

        Tables

              Basic examples

              Text rows

              Zebra rows

              hover rows

        Boxes

              Basic examples

              Aside boxes

              Editable boxes

              Flippable boxes

        Forms

              Basic examples

              Inline form

              Horizontal form

              States form

              Placeholders

              Extending form

              Custom radio & checkbox

              Custom select

        Buttons

              Basic examples

              Dropdown examples

              Flipswitch Buttons

              Toggle Buttons

        Navigation

              Nav menu

              Tabs

              Step Navigation

              Pagination

              Buttons

        Dialogs

              Tooltips

              Popovers

              Popins

        Icons

              Overview

              How to use

              Download

        Components

              Badges

              Labels

              Tags

              Alerts

              Cards

              Growl

              Share

              Highlights

              Progress Bar

      Tetra Ui on Github
      <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14"><path fill-rule="evenodd" clip-rule="evenodd" fill="#CBCBCB" d="M7 0c-3.86 0-7 3.14-7 7 0 3.859 3.14 7 7 7 3.859 0 7-3.141 7-7 0-3.86-3.141-7-7-7zm1.827 12.493l-.202-1.69c2.877-.344 3.09-2.49 2.477-4.529-.172-.573-.446-1.086-.452-1.725-.007-.833-.346-1.064-1.054-.655-.758.44-1.516.336-2.311.386l-.37.019-.356-.019c-.765-.05-1.494.054-2.224-.386-.68-.41-1.006-.178-1.013.655-.005.639-.269 1.152-.435 1.725-.589 2.039-.385 4.185 2.382 4.529l-.19 1.658c-2.251-.794-3.869-2.941-3.869-5.461 0-3.192 2.597-5.79 5.79-5.79 3.192 0 5.79 2.598 5.79 5.79 0 2.555-1.663 4.727-3.963 5.493z"/></svg>

            Elements

  RTL

      <input type="radio" checked="checked" name="mode"> Off

      <input type="radio" name="mode"> On

    Typography

      ⊙

          Headings

            ⊙

All HTML headings from h1 to h6 are available, and there is a special case for the page header with an optional subheading.

A set of alternate headings with borders is also available.

Using the .h1, .h2, .h3, .h4, .h5, .h6 classes activates an alternative typography.

Default

<h1>

A smart

<h2>

easy-to-use

<h3>

toolkit

<h4>

for creating

<h5>

rich interfaces

<h6>

in lightning speed!

<h2 class="h-sub">

in lightning speed!

Alternative

<h1 class="h-lead">

A smart

<h1 class="h1">

A smart

<h2 class="h2">

easy-to-use

<h3 class="h3">

toolkit

<h4 class="h4">

for creating

<h5 class="h5">

rich interfaces

<h6 class="h6">

in lightning speed!

Page Heading

Lorem ipsum dolor sit amet

    show code

    hide code

<h1>Lorem ipsum <span class="sub">dolor sit amet</span></h1>

    <button type="button" class="btn btn-default btn-large">
      copy code
    </button>

Subheading Divider

Sodales at enim

    show code

    hide code

<h3 class="subh-divider mbl">Sodales at enim</h3>

    <button type="button" class="btn btn-default btn-large">
      copy code
    </button>

          Links

            ⊙

From standard basic links to more specific links.

  Standard default links

  Links in titles or headers

  Links with text style

    show code

    hide code

<p>
  <a href="">Standard default links</a><br />
  <a class="lnk-title" href="">Links in titles or headers</a><br />
  <a class="lnk-text" href="">Links with text style</a>
</a>

    <button type="button" class="btn btn-default btn-large">
      copy code
    </button>

          Paragraphs

            ⊙

A bottom margin is applied to paragraphs elements p, this can be costomized with helpers.

To activate hyphenation, use a class="hyph" on the p tags or on a container. This is now supported by Firefox, IE10, and Safari
Paragraphs

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse rutrum laoreet dolor, vitae adipiscing quam commodo sed. Cras porta dictum sem quis aliquet. Aenean a neque sed dolor lacinia iaculis.

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.

    show code

    hide code

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse rutrum laoreet dolor, vitae adipiscing quam commodo sed. Cras porta dictum sem quis aliquet. Aenean a neque sed dolor lacinia iaculis.</p>

<p class="hyph">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</p>

    <button type="button" class="btn btn-default btn-large">
      copy code
    </button>

          Lists

            ⊙

Lorem ipsum dolor sit amet

Consectetur adipisicing elit

Sed do eiusmod tempor incididunt ut labore

Lorem ipsum dolor sit amet

Consectetur adipisicing elit

Sed do eiusmod tempor incididunt ut labore

Lorem ipsum dolor sit amet

Consectetur adipisicing elit

Sed do eiusmod tempor incididunt ut labore

    show code

    hide code

<ul class="link-list mbl">
  <li><a>Lorem ipsum dolor sit amet</a></li>
  <li><a>Consectetur adipisicing elit</a></li>
  <li><a>Sed do eiusmod tempor incididunt ut labore</a></li>
</ul>

<ul class="list-square mbl">
  <li>Lorem ipsum dolor sit amet</li>
  <li>Consectetur adipisicing elit</li>
  <li>Sed do eiusmod tempor incididunt ut labore</li>
</ul>

<ul class="list-disc">
  <li>Lorem ipsum dolor sit amet</li>
  <li>Consectetur adipisicing elit</li>
  <li>Sed do eiusmod tempor incididunt ut labore</li>
</ul>

    <button type="button" class="btn btn-default btn-large">
      copy code
    </button>

          Panels

            ⊙

A panel is a simple helpful CSS class that enables to easily outline sections of the page.

A Panel

Lorem ipsum dolor sit amet, consectetur adipiscing elit

Another Panel

Divider before

Divider after

Lorem ipsum dolor sit amet, consectetur adipiscing elit

    show code

    hide code

<div class="panel mbs">
  <h3 class="mbn">A Panel</h3>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit<p/>

<div class="panel">
  <h3 class="mbn">Another Panel</h3>
</div>
<div class="divider-before mbs">Divider before</div>
<div class="divider-after mbs">Divider after</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit<p/></div>

    <button type="button" class="btn btn-default btn-large">
      copy code
    </button>

    Colors

      ⊙

          Palette

            ⊙

Visual identity & branding colors

@orange1: #f07355;

@orange2: #f1532e;

@orange3: #f78d2d;

@orange4: #feae35;

@green1: #019875;

@green2: #0c9f9b;

@green3: #53c1af;

@green4: #c6e6d7;

@blue1: #006aa8;

@blue2: #007bc2;

@blue3: #42a2d6;

@blue4: #1f668c;

@blue5: #7dcde3;

@purple1: #471d63;

@purple2: #685985;

          Using Less

            ⊙

Tints & Shades

  tint(@blue2, 50%)

  tint(@blue2, 40%)

  tint(@blue2, 30%)

  tint(@blue2, 20%)

  tint(@blue2, 10%)

  shade(@blue2, 10%)

  shade(@blue2, 20%)

  shade(@blue2, 30%)

  shade(@blue2, 40%)

  shade(@blue2, 50%)

Grayscale

@black: #000000;

@grayDark: #4a494d;

@gray: #87868c;

@grayLight: #c5c3c7;

@grayLighter: #d9d8dd;

@white: #ffffff;

Base

@baseFontColor: #2a2a2a

@pageBg: #e8e9eb;

@linkColor: #42a2d6;

@linkColorHover: #2479a7;

@overlayBorder: #273038;

Panel

@panelBackground: #f5f7f9;

@panelBorder: #e4eaf0;

@panelBorderDarker: #b7c8d6;

@borderColor: #d1dce5;

Context

@highlightColor: #f4f2ca;

@errorText: #d54243;

@premiumColor: #feae35;

    Tables

      ⊙

          Basic examples

            ⊙

      Column header 1
      Column header 2
      Column header 3
      Column header 4
      Column header 5

      Data 1 1
      Data 1 2
      Data 1 3
      Data 1 4
      Data 1 5

      Data 2 1
      Data 2 2
      Data 2 3
      Data 2 4
      Data 2 5

      Data 3 1
      Data 3 2
      Data 3 3
      Data 3 4
      Data 3 5

    show code

    hide code

<table class="table"> ... </table>

    <button type="button" class="btn btn-default btn-large">
      copy code
    </button>

          Text rows

            ⊙

      Column header 1
      Column header 2
      Column header 3
      Column header 4
      Column header 5

      Data 1 1
      Data 1 2
      Data 1 3
      Data 1 4
      Data 1 5

      Data 2 1
      Data 2 2
      Data 2 3
      Data 2 4
      Data 2 5

      Data 3 1
      Data 3 2
      Data 3 3
      Data 3 4
      Data 3 5

    show code

    hide code

<table class="table table-text"> ... </table>

    <button type="button" class="btn btn-default btn-large">
      copy code
    </button>

          Zebra rows

            ⊙

      Column header 1
      Column header 2
      Column header 3
      Column header 4
      Column header 5

      Data 1 1
      Data 1 2
      Data 1 3
      Data 1 4
      Data 1 5

      Data 2 1
      Data 2 2
      Data 2 3
      Data 2 4
      Data 2 5

      Data 3 1
      Data 3 2
      Data 3 3
      Data 3 4
      Data 3 5

    show code

    hide code

<table class="table table-text zebra"> ... </table>

    <button type="button" class="btn btn-default btn-large">
      copy code
    </button>

          hover rows

            ⊙

      Column header 1
      Column header 2
      Column header 3
      Column header 4
      Column header 5

      Data 1 1
      Data 1 2
      Data 1 3
      Data 1 4
      Data 1 5

      Data 2 1
      Data 2 2
      Data 2 3
      Data 2 4
      Data 2 5

      Data 3 1
      Data 3 2
      Data 3 3
      Data 3 4
      Data 3 5

    show code

    hide code

<table class="table table-text table-hover"> ... </table>

    <button type="button" class="btn btn-default btn-large">
      copy code
    </button>

    Boxes

      ⊙

          Basic examples

            ⊙

        c
        Settings

      Box title

      Box content

        c
        Settings

      Box title with subtitle

      Box content

        c
        Settings

      Box title main

      Box content

      <button data-event="click" data-comp="alert" class="bx-close bootnode" type="button">
        ×
      </button>
      Box with close button

Box default

      Box content

Box empty

      Box content

          Aside boxes

            ⊙

Box aside

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

    show code

    hide code

<div class="bx">
  <div class="bx-aside">
    <h2 class="h-bx">Box aside</h2>
    <ul class="list-bx">
      <li>
        <dl>
          <dt><a href="">Lorem ipsum dolor sit amet</a></dt>
          <dd>Consectetur adipisicing elit</dd>
        </dl>
      </li>
      <li>
        <dl>
          <dt><a href="">Sed do eiusmod tempor incididunt</a></dt>
          <dd>Ut labore et dolore magna aliqua</dd>
        </dl>
      </li>
      <li>
        <dl>
          <dt><a href="">Ut enim ad minim veniam</a></dt>
          <dd>Quis nostrud exercitation</dd>
        </dl>
      </li>
    </ul>
  </div>
</div>

    <button type="button" class="btn btn-default btn-large">
      copy code
    </button>

          Editable boxes

            ⊙

Box title main

              y
              Modify

              ×
              Remove

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.

    show code

    hide code

<div class="bx">
  <h2 class="h-bx h-bx-main">Box title main</h2>
  <div class="bx-editable">
    <ul class="bx-edit-btn">
      <li>
        <a class="bx-edit">
          <i class="vicon">y</i>
          <span>Modify</span>
        </a>
      </li>
      <li>
        <a class="bx-edit bx-edit-rm">
          <i class="vicon">×</i>
          <span>Remove</span>
        </a>
      </li>
    </ul>
    <p>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.</p>
  </div>
</div>

    <button type="button" class="btn btn-default btn-large">
      copy code
    </button>

          Flippable boxes

            ⊙

      <button data-comp="flipbox" data-event="click" class="h-bx-link bx-flip-turn tooltip tooltip-left bootnode">
        c
        Settings
      </button>
      Box title

      Content on the front side

      <button data-comp="flipbox" data-event="click" class="h-bx-link bx-flip-turn tooltip tooltip-left bootnode">
        ×
        Close
      </button>
      Box settings

      Content on the back side content on the back side content on the back side content on the back side content on the back side content on the back side content on the back side.

    show code

    hide code

<div class="bx-flip">
  <div class="bx bx-flip-front">
    <h2 class="h-bx">
    <button data-comp="flipbox" data-event="click" class="h-bx-link bx-flip-turn tooltip tooltip-left bootnode">
      <i class="vicon">c</i>
      <span class="tooltip-content">Settings</span>
    </button>
    Box title
    </h2>
    Content on the front side
  </div>
  <div class="bx bx-flip-back">
    <h2 class="h-bx">
    <button data-comp="flipbox" data-event="click" class="h-bx-link bx-flip-turn tooltip tooltip-left bootnode">
      <i class="vicon">×</i>
      <span class="tooltip-content">Close</span>
    </button>
    Box settings
    </h2>
    Content on the back side content on the back side content on the back side content on the back side content on the back side content on the back side content on the back side.
  </div>
</div>

    <button type="button" class="btn btn-default btn-large">
      copy code
    </button>

    Forms

      ⊙

          Basic examples

            ⊙

Vertical: .core-form

Inline: .core-form .form-inline

Horizontal:  .core-form .form-horizontal

The default form is vertical aligned. All textual input, textarea, and select elements with .core-form are set to width: 100%; by default.

Add the .core-form class to the form element.

<form class="core-form">
  <fieldset>

      Text input

        <input type="text" id="input01" class="input-xlarge">

In addition to freeform text, any HTML5 text-based input appears like so.

      Checkbox

          <input type="checkbox" value="option1" id="optionsCheckbox">
          Option one

      Select list

        <select id="select01">
          <option>something</option>
          <option>2</option>
          <option>3</option>
          <option>4</option>
          <option>5</option>
        </select>

      Textarea

        <textarea rows="3" id="textarea" class="input-xlarge"></textarea>

      <button class="btn btn-primary" type="submit">Save changes</button>
      <button class="btn btn-default">Cancel</button>

  </fieldset>
</form>

    show code

    hide code

<form class="core-form">
  <fieldset>
    <div class="control-group">
      <label for="input01" class="control-label">Text input</label>
      <div class="controls">
        <input type="text" id="input01" class="input-xlarge">
        <p class="help-block">In addition to freeform text, any HTML5 text-based input appears like so.</p>
      </div>
    </div>
    <div class="control-group">
      <label for="optionsCheckbox" class="control-label">Checkbox</label>
      <div class="controls">
        <label class="checkbox">
          <input type="checkbox" value="option1" id="optionsCheckbox">
          Option one is this and that - be sure to include why it's great
        </label>
      </div>
    </div>
    <div class="control-group">
      <label for="select01" class="control-label">Select list</label>
      <div class="controls">
        <select id="select01">
          <option>something</option>
          <option>2</option>
          <option>3</option>
          <option>4</option>
          <option>5</option>
        </select>
      </div>
    </div>
    <div class="control-group">
      <label for="textarea" class="control-label">Textarea</label>
      <div class="controls">
        <textarea rows="3" id="textarea" class="input-xlarge"></textarea>
      </div>
    </div>
    <div class="form-actions ptm">
      <button class="btn btn-primary" type="submit">Save changes</button>
      <button class="btn btn-default">Cancel</button>
    </div>
  </fieldset>
</form>

    <button type="button" class="btn btn-default btn-large">
      copy code
    </button>

          Inline form

            ⊙

To set the form inline, add the .form-inline class to the .core-form element.

Inputs are inline-block with .form-inline.

<form class="core-form form-inline">
  <input type="text" placeholder="Email" class="input-small">
  <input type="password" placeholder="Password" class="input-small">

    <input type="checkbox"> Remember me

  <button class="btn btn-default" type="submit">Sign in</button>
</form>

    show code

    hide code

<form class="core-form well form-inline">
  <input type="text" placeholder="Email" class="input-small">
  <input type="password" placeholder="Password" class="input-small">
  <label class="checkbox">
    <input type="checkbox"> Remember me
  </label>
  <button class="btn btn-default" type="submit">Sign in</button>
</form>

    <button type="button" class="btn btn-default btn-large">
      copy code
    </button>

          Horizontal form

            ⊙

Tot set the form horizontal, add the .form-horizontal class to the .core-form element.

Inputs are inline-block with .form-horizontal.

<form class="core-form form-horizontal">
  <fieldset>

      Text input

        <input type="text" id="input01" class="input-xlarge">

In addition to freeform text, any HTML5 text-based input appears like so.

      Checkbox

          <input type="checkbox" value="option1" id="optionsCheckbox">
          Option one

      Select list

        <select id="select01">
          <option>something</option>
          <option>2</option>
          <option>3</option>
          <option>4</option>
          <option>5</option>
        </select>

      Textarea

        <textarea rows="3" id="textarea" class="input-xlarge"></textarea>

      <button class="btn btn-primary" type="submit">Save changes</button>
      <button class="btn btn-default">Cancel</button>

  </fieldset>
</form>

    show code

    hide code

<form class="core-form form-horizontal">
  ...
</form>

    <button type="button" class="btn btn-default btn-large">
      copy code
    </button>

          States form

            ⊙

Special styles are applied on top of focused and disabled states, when the browser supports it.

It also includes validation styles for errors, warnings, and success. To use, add the error class to the surrounding .control-group.

<form class="core-form form-horizontal">
    <fieldset>

        Focused input

          <input type="text" value="This is focused…" id="focusedInput" class="input-xlarge focused">

        Uneditable input

          Some value here

        Disabled input

          <input type="text" disabled="disabled" placeholder="Disabled input here…" id="disabledInput" class="input-xlarge disabled">

        Disabled checkbox

            <input type="checkbox" disabled="disabled" value="option1" id="optionsCheckbox2">
            This is a disabled checkbox

        Completely disabled

            <input type="checkbox" disabled="disabled" value="option1" id="optionsCheckbox3">
            This is a disabled checkbox

Contextual help in disabled state

        Input with error

          <input type="text" id="inputError">
          Please correct the error

        Input with success

          <input type="text" id="inputSuccess">
          v

        Select with success

          <select id="selectError">
            <option>1</option>
            <option>2</option>
            <option>3</option>
            <option>4</option>
            <option>5</option>
          </select>
          v

        <button class="btn btn-primary" type="submit">Save changes</button>
        <button class="btn btn-default">Cancel</button>

    </fieldset>
  </form>

          Placeholders

            ⊙

Using the class error on the control-group mbl makes the field helper visible, otherwise it is hidden by default.

<form class="core-form mbxl">

    <button data-event="click" data-comp="alert" class="bx-alert-close bootnode" type="button">
      ×
    </button>
    ;

The following fields are marked as errors

        <input type="text" class="input-large mbn">
        Error on text input (default left)
        Please type a valid email address

        <input type="password" class="input-large mbn">
        Error on password input (default left)
        Please type a valid password

        <input type="text" class="input-large mbn">
        Text input
        Error in flow

</form>

    show code

    hide code

<form class="core-form mbxl">
  <div class="bx-alert bx-alert-error-form mbl">
    <button data-event="click" data-comp="alert" class="bx-alert-close bootnode" type="button">
      <i class="vicon">×</i>
    </button>
    <i class="vicon bx-alert-icon">;</i>
    <div class="bx-alert-content">
      <p class="mvn">The following fields are marked as errors</p>
    </div>
  </div>

  <div class="control-group mbl error">
    <div class="controls">
      <span class="placeholding field-helper field-helper-right">
        <input type="text" class="input-large mbn">
        <label class="placeholder">Error on text input (default left)</label>
        <span class="error-inline">Please type a valid email address</span>
      </span>
    </div>
  </div>

  <div class="control-group mbl error">
    <div class="controls">
      <span class="placeholding field-helper field-helper-right">
        <input type="password" class="input-large mbn">
        <label class="placeholder">Error on password input (default left)</label>
        <span class="error-inline">Please type a valid password</span>
      </span>
    </div>
  </div>

  <div class="control-group mbl error">
    <div class="controls">
      <span class="placeholding field-helper field-helper-flow">
        <input type="text" class="input-large mbn">
        <label class="placeholder">Text input</label>
        <span class="error-inline">Error in flow</span>
      </span>
    </div>
  </div>

</form>

    <button type="button" class="btn btn-default btn-large">
      copy code
    </button>

          Extending form

            ⊙

To add help text for your form inputs, include inline help text with <span class="help-inline"> or a help text block with <p class="help-block"> after the input element.

<form class="core-form form-horizontal">
    <fieldset>

        Alternate sizes

          <input type="text" placeholder=".input-mini" class="input-mini">
          <input type="text" placeholder=".input-small" class="input-small">
          <input type="text" placeholder=".input-medium" class="input-medium">

You may also use static classes that don't map to the grid, adapt to the responsive CSS styles, or account for varying types of controls (e.g., <input> vs. <select>).

        Alternate sizes

            <select class="input-small">
              <option>.input-small</option>
            </select>

            <select class="input-medium">
              <option>.input-medium</option>
            </select>

            <select class="input-large">
              <option>.input-large</option>
            </select>

            <select class="input-xlarge">
              <option>.input-xlarge</option>
            </select>

            <select class="input-xxlarge">
              <option>.input-xxlarge</option>
            </select>

        Full width

          <input type="text" placeholder=".input-fullwidth" class="input-fullwidth">

        Append with button

            <input type="text" size="16" id="append-btn-default" class="span2"><button type="button" class="btn btn-default">Go!</button>

        Primary button

            <input type="text" size="16" id="append-btn-primary" class="span2"><button type="button" class="btn btn-primary">Go!</button>

        Tertiary button

            <input type="text" size="16" id="append-btn-tertiary" class="span2"><button type="button" class="btn btn-tertiary">Go!</button>

        Default button with error

            <input type="text" size="16" id="append-btn-default-error" class="span2"><button type="button" class="btn btn-default">Go!</button>

        Primary button with error

            <input type="text" size="16" id="append-btn-primary-error" class="span2"><button type="button" class="btn btn-primary">Go!</button>

        Tertiary button with error

            <input type="text" size="16" id="append-btn-tertiary-error" class="span2"><button type="button" class="btn btn-tertiary">Go!</button>

        Inline checkboxes

            <input type="checkbox" value="option1" id="inlineCheckbox1"> 1

            <input type="checkbox" value="option2" id="inlineCheckbox2"> 2

            <input type="checkbox" value="option3" id="inlineCheckbox3"> 3

        Checkboxes

            <input type="checkbox" value="option1" name="optionsCheckboxList1">
            Option one is this and that - be sure to include why it's great

            <input type="checkbox" value="option2" name="optionsCheckboxList2">
            Option two can also be checked and included in form results

            <input type="checkbox" value="option3" name="optionsCheckboxList3">
            Option three can - yes, you guessed it - also be checked and included in form results

Note: Labels surround all the options for much larger click areas and a more usable form.

        Radio buttons

            <input type="radio" checked="checked" value="option1" id="optionsRadios1" name="optionsRadios">
            Option one is this and that - be sure to include why it's great

            <input type="radio" value="option2" id="optionsRadios2" name="optionsRadios">
            Option two can is something else and selecting it will deselect option one

        <button class="btn btn-primary" type="submit">Save changes</button>
        <button class="btn btn-default">Cancel</button>

    </fieldset>
  </form>

          Custom radio & checkbox

            ⊙

Only works in modern browsers, falls back to standard radio buttons in legacy browsers.
These custom radio buttons are pure CSS3, no JavaScript required.

<form class="core-form form-horizontal">

    Horizontal radio buttons

        <input type="radio" checked="checked" name="customRadioButtons1">

        Option one

        <input type="radio" name="customRadioButtons1">

        Option two

    Vertical radio buttons

        <input type="radio" checked="checked" name="customRadioButtons2">

        Option one

        <input type="radio" name="customRadioButtons2">

        Option two

    Horizontal checkboxes

        <input type="checkbox" checked="checked">

        Option one

        <input type="checkbox">

        Option two

    Vertical checkboxes

        <input type="checkbox" checked="checked">

        Option one

        <input type="checkbox">

        Option two

</form>

    show code

    hide code

<form class="core-form form-horizontal">
  <div class="control-group">
    <label class="control-label">Horizontal radio buttons</label>
    <div class="controls">
      <label class="radio inline custom-radio mrl">
        <input type="radio" checked="checked" name="customRadioButtons1">
        <span class="custom-radio-element"></span>
        Option one
      </label>
      <label class="radio inline custom-radio mrl">
        <input type="radio" name="customRadioButtons1">
        <span class="custom-radio-element"></span>
        Option two
      </label>
    </div>
  </div>

  <div class="control-group">
    <label class="control-label">Vertical radio buttons</label>
    <div class="controls">
      <label class="radio custom-radio">
        <input type="radio" checked="checked" name="customRadioButtons2">
        <span class="custom-radio-element"></span>
        Option one
      </label>
      <label class="radio custom-radio">
        <input type="radio" name="customRadioButtons2">
        <span class="custom-radio-element"></span>
        Option two
      </label>
    </div>
  </div>

  <div class="control-group">
    <label class="control-label">Horizontal checkboxes</label>
    <div class="controls">
      <label class="checkbox inline custom-checkbox mrl">
        <input type="checkbox" checked="checked">
        <span class="custom-checkbox-element"></span>
        Option one
      </label>
      <label class="checkbox inline custom-checkbox mrl">
        <input type="checkbox">
        <span class="custom-checkbox-element"></span>
        Option two
      </label>
    </div>
  </div>

  <div class="control-group">
    <label class="control-label">Vertical checkboxes</label>
    <div class="controls">
      <label class="checkbox custom-checkbox">
        <input type="checkbox" checked="checked">
        <span class="custom-checkbox-element"></span>
        Option one
      </label>
      <label class="checkbox custom-checkbox">
        <input type="checkbox">
        <span class="custom-checkbox-element"></span>
        Option two
      </label>
    </div>
  </div>
</form>

    <button type="button" class="btn btn-default btn-large">
      copy code
    </button>

          Custom select

            ⊙

Displaying a custom select element while keeping the native drop down menu.

<form class="core-form form-horizontal">

    Custom select

        <select>
          <option selected="selected" disabled="disabled">Choose…</option>
          <option value="1">Lorem ipsum dolor sit amet</option>
          <option value="2">Consectetur adipisicing elit</option>
          <option value="3">Sed do eiusmod tempor incididunt ut labore</option>
          <option value="4">Et dolore magna aliqua</option>
          <option value="5">Ut enim ad minim veniam</option>
        </select>

        Choose…
        ▾

    Custom select appended

        <input type="text">
          Choose…
          ▾

          <select>
            <option selected="selected" disabled="disabled">Choose…</option>
            <option value="1">Lorem ipsum dolor sit amet</option>
            <option value="2">Consectetur adipisicing elit</option>
            <option value="3">Sed do eiusmod tempor incididunt ut labore</option>
            <option value="4">Et dolore magna aliqua</option>
            <option value="5">Ut enim ad minim veniam</option>
          </select>

</form>

    show code

    hide code

<form class="core-form form-horizontal">
  <div class="control-group">
    <label class="control-label">Custom select</label>
    <div class="controls">

      <span class="custom-select input-large">
        <select>
          <option selected="selected" disabled="disabled">Choose…</option>
          <option value="1">Lorem ipsum dolor sit amet</option>
          <option value="2">Consectetur adipisicing elit</option>
          <option value="3">Sed do eiusmod tempor incididunt ut labore</option>
          <option value="4">Et dolore magna aliqua</option>
          <option value="5">Ut enim ad minim veniam</option>
        </select>

        <label>Choose…</label>
        <i class="vicon">▾</i>
      </span>

    </div>
  </div>

  <div class="control-group">
    <label class="control-label">Custom select appended</label>
    <div class="controls">
      <div class="input-append">
        <input type="text"><span class="custom-select input-medium">
          <label>Choose…</label>
          <i class="vicon">▾</i>

          <select>
            <option selected="selected" disabled="disabled">Choose…</option>
            <option value="1">Lorem ipsum dolor sit amet</option>
            <option value="2">Consectetur adipisicing elit</option>
            <option value="3">Sed do eiusmod tempor incididunt ut labore</option>
            <option value="4">Et dolore magna aliqua</option>
            <option value="5">Ut enim ad minim veniam</option>
          </select>
        </span>
      </div>
    </div>
  </div>
</form>

    <button type="button" class="btn btn-default btn-large">
      copy code
    </button>

    Buttons

      ⊙

          Basic examples

            ⊙

Default buttons

    Small
    Default
    before
    after
    Loading
    Disable
    Large
    Lead Button
    Fat Button

Alternate Default buttons

    Small
    Default
    before
    after
    Loading
    Disable
    Large
    Lead Button
    Fat Button

    show code

    hide code

<!-- Add btn-small to the btn class. -->
<a class="btn btn-default btn-small">
  Small
</a>
<!-- The default btn. -->
<a class="btn btn-default mbs mrl">
  Default
</a>
<!-- Add classname 'btn-icon-before' to prepend the icon -->
<a class="btn btn-default mbs mrl">
  <span class="vicon vicon-plus btn-icon-before"></span>
  preprend icon
</a>
<!-- Add classname 'btn-icon-after' to append the icon -->
<a class="btn btn-default mbs mrl">
  append icon
  <span class="vicon vicon-plus btn-icon-after"></span>
</a>
<!-- Add <span> inside the btn-loading to preserve the width of the button -->
<a class="btn btn-default btn-loading">
  <span>Loading</span>
</a>
<!-- Add btn-disabled to the btn class. -->
<a class="btn btn-default btn-disabled">
  Disable
</a>
<!-- Add btn-large to the btn class. -->
<a class="btn btn-default btn-large">
  Large
</a>
<!-- Add btn-lead to the btn class. -->
<a class="btn btn-default btn-lead">
  Lead Button
</a>

<!-- Alternative Buttons -->
<!-- Add suffic alt to the button class for alternative buttons -->
<a class="btn btn-default-alt btn-small">
  Small
</a>
<!-- The default btn. -->
<a class="btn btn-default-alt mbs mrl">
  Default
</a>
<!-- Add classname 'btn-icon-before' to prepend the icon -->
<a class="btn btn-default-alt mbs mrl">
  <span class="vicon vicon-plus btn-icon-before"></span>
  preprend icon
</a>
<!-- Add classname 'btn-icon-after' to append the icon -->
<a class="btn btn-default-alt mbs mrl">
  append icon
  <span class="vicon vicon-plus btn-icon-after"></span>
</a>
<!-- Add <span> inside the btn-loading to preserve the width of the button -->
<a class="btn btn-default-alt btn-loading">
  <span>Loading</span>
</a>
<!-- Add btn-disabled to the btn class. -->
<a class="btn btn-default-alt btn-disabled">
  Disable
</a>
<!-- Add btn-large to the btn class. -->
<a class="btn btn-default-alt btn-large">
  Large
</a>
<!-- Add btn-lead to the btn class. -->
<a class="btn btn-default-alt btn-lead">
  Lead Button
</a>

    <button type="button" class="btn btn-default btn-large">
      copy code
    </button>

Primary buttons

    Small
    Default
    before
    after
    Loading
    Disable
    Large
    Lead Button
    Fat Button

Alternate Primary buttons

    Small
    Default
    before
    after
    Loading
    Disable
    Large
    Lead Button
    Fat Button

    show code

    hide code

<!-- Add btn-small to the btn class. -->
<a class="btn btn-primary btn-small">
  Small
</a>
<!-- The primary btn. -->
<a class="btn btn-primary mbs mrl">
  primary
</a>
<!-- Add classname 'btn-icon-before' to prepend the icon -->
<a class="btn btn-primary mbs mrl">
  <span class="vicon vicon-plus btn-icon-before"></span>
  preprend icon
</a>
<!-- Add classname 'btn-icon-after' to append the icon -->
<a class="btn btn-primary mbs mrl">
  append icon
  <span class="vicon vicon-plus btn-icon-after"></span>
</a>
<!-- Add <span> inside the btn-loading to preserve the width of the button -->
<a class="btn btn-primary btn-loading">
  <span>Loading</span>
</a>
<!-- Add btn-disabled to the btn class. -->
<a class="btn btn-primary btn-disabled">
  Disable
</a>
<!-- Add btn-large to the btn class. -->
<a class="btn btn-primary btn-large">
  Large
</a>
<!-- Add btn-lead to the btn class. -->
<a class="btn btn-primary btn-lead">
  Lead Button
</a>

<!-- Alternative Buttons -->
<!-- Add suffic alt to the button class for alternative buttons -->
a class="btn btn-default-alt btn-small">
  Small
</a>
<!-- The default btn. -->
<a class="btn btn-default-alt mbs mrl">
  Default
</a>
<!-- Add classname 'btn-icon-before' to prepend the icon -->
<a class="btn btn-default-alt mbs mrl">
  <span class="vicon vicon-plus btn-icon-before"></span>
  preprend icon
</a>
<!-- Add classname 'btn-icon-after' to append the icon -->
<a class="btn btn-default-alt mbs mrl">
  append icon
  <span class="vicon vicon-plus btn-icon-after"></span>
</a>
<!-- Add <span> inside the btn-loading to preserve the width of the button -->
<a class="btn btn-default-alt btn-loading">
  <span>Loading</span>
</a>
<!-- Add btn-disabled to the btn class. -->
<a class="btn btn-default-alt btn-disabled">
  Disable
</a>
<!-- Add btn-large to the btn class. -->
<a class="btn btn-default-alt btn-large">
  Large
</a>
<!-- Add btn-lead to the btn class. -->
<a class="btn btn-default-alt btn-lead">
  Lead Button
</a>

    <button type="button" class="btn btn-default btn-large">
      copy code
    </button>

Secondary buttons

    Small
    Default
    before
    after
    Loading
    Disable
    Large
    Lead Button
    Fat Button

Alternate Secondary buttons

    Small
    Default
    before
    after
    Loading
    Disable
    Large
    Lead Button
    Fat Button

    show code

    hide code

<!-- Add btn-small to the btn class. -->
<a class="btn btn-secondary btn-small">
  Small
</a>
<!-- The secondary btn. -->
<a class="btn btn-secondary mbs mrl">
  secondary
</a>
<!-- Add classname 'btn-icon-before' to prepend the icon -->
<a class="btn btn-secondary mbs mrl">
  <span class="vicon vicon-plus btn-icon-before"></span>
  preprend icon
</a>
<!-- Add classname 'btn-icon-after' to append the icon -->
<a class="btn btn-secondary mbs mrl">
  append icon
  <span class="vicon vicon-plus btn-icon-after"></span>
</a>
<!-- Add <span> inside the btn-loading to preserve the width of the button -->
<a class="btn btn-secondary btn-loading">
  <span>Loading</span>
</a>
<!-- Add btn-disabled to the btn class. -->
<a class="btn btn-secondary btn-disabled">
  Disable
</a>
<!-- Add btn-large to the btn class. -->
<a class="btn btn-secondary btn-large">
  Large
</a>
<!-- Add btn-lead to the btn class. -->
<a class="btn btn-secondary btn-lead">
  Lead Button
</a>

<!-- Alternative Buttons -->
<!-- Add suffic alt to the button class for alternative buttons -->
<a class="btn btn-default-alt btn-small">
  Small
</a>
<!-- The default btn. -->
<a class="btn btn-secondary-alt mbs mrl">
  Default
</a>
<!-- Add classname 'btn-icon-before' to prepend the icon -->
<a class="btn btn-secondary-alt mbs mrl">
  <span class="vicon vicon-plus btn-icon-before"></span>
  preprend icon
</a>
<!-- Add classname 'btn-icon-after' to append the icon -->
<a class="btn btn-secondary-alt mbs mrl">
  append icon
  <span class="vicon vicon-plus btn-icon-after"></span>
</a>
<!-- Add <span> inside the btn-loading to preserve the width of the button -->
<a class="btn btn-secondary-alt btn-loading">
  <span>Loading</span>
</a>
<!-- Add btn-disabled to the btn class. -->
<a class="btn btn-secondary-alt btn-disabled">
  Disable
</a>
<!-- Add btn-large to the btn class. -->
<a class="btn btn-secondary-alt btn-large">
  Large
</a>
<!-- Add btn-lead to the btn class. -->
<a class="btn btn-secondary-alt btn-lead">
  Lead Button
</a>

    <button type="button" class="btn btn-default btn-large">
      copy code
    </button>

Tertiary buttons

    Small
    Default
    before
    after
    Loading
    Disable
    Large
    Lead Button
    Fat Button

Alternate Tertiary buttons

    Small
    Default
    before
    after
    Loading
    Disable
    Large
    Lead Button
    Fat Button

    show code

    hide code

<!-- Add btn-small to the btn class. -->
<a class="btn btn-tertiary btn-small">
  Small
</a>
<!-- The tertiary btn. -->
<a class="btn btn-tertiary">
  tertiary
</a>
<!-- Add classname 'btn-icon-before' to prepend the icon -->
<a class="btn btn-tertiary mbs mrl">
  <span class="vicon vicon-plus btn-icon-before"></span>
  preprend icon
</a>
<!-- Add classname 'btn-icon-after' to append the icon -->
<a class="btn btn-tertiary mbs mrl">
  append icon
  <span class="vicon vicon-plus btn-icon-after"></span>
</a>
<!-- Add <span> inside the btn-loading to preserve the width of the button -->
<a class="btn btn-tertiary btn-loading">
  <span>Loading</span>
</a>
<!-- Add btn-disabled to the btn class. -->
<a class="btn btn-tertiary btn-disabled">
  Disable
</a>
<!-- Add btn-large to the btn class. -->
<a class="btn btn-tertiary btn-large">
  Large
</a>
<!-- Add btn-lead to the btn class. -->
<a class="btn btn-tertiary btn-lead">
  Lead Button
</a>

<!-- Alternative Buttons -->
<!-- Add suffic alt to the button class for alternative buttons -->
<a class="btn btn-tertiary-alt btn-small">
  Small
</a>
<!-- The default btn. -->
<a class="btn btn-tertiary-alt mbs mrl">
  Default
</a>
<!-- Add classname 'btn-icon-before' to prepend the icon -->
<a class="btn btn-tertiary-alt mbs mrl">
  <span class="vicon vicon-plus btn-icon-before"></span>
  preprend icon
</a>
<!-- Add classname 'btn-icon-after' to append the icon -->
<a class="btn btn-tertiary-alt mbs mrl">
  append icon
  <span class="vicon vicon-plus btn-icon-after"></span>
</a>
<!-- Add <span> inside the btn-loading to preserve the width of the button -->
<a class="btn btn-tertiary-alt btn-loading">
  <span>Loading</span>
</a>
<!-- Add btn-disabled to the btn class. -->
<a class="btn btn-tertiary-alt btn-disabled">
  Disable
</a>
<!-- Add btn-large to the btn class. -->
<a class="btn btn-tertiary-alt btn-large">
  Large
</a>
<!-- Add btn-lead to the btn class. -->
<a class="btn btn-tertiary-alt btn-lead">
  Lead Button
</a>

    <button type="button" class="btn btn-default btn-large">
      copy code
    </button>

White buttons (useful on dark background)

    Small
    Default
    before
    after
    Loading
    Disable
    Large
    Lead Button
    Fat Button

    show code

    hide code

<!-- Add suffic alt to the button class for alternative buttons -->
<a class="btn btn-white btn-small">
  Small
</a>
<!-- The default btn. -->
<a class="btn btn-white mbs mrl">
  Default
</a>
<!-- Add classname 'btn-icon-before' to prepend the icon -->
<a class="btn btn-white mbs mrl">
  <span class="vicon vicon-plus btn-icon-before"></span>
  preprend icon
</a>
<!-- Add classname 'btn-icon-after' to append the icon -->
<a class="btn btn-white mbs mrl">
  append icon
  <span class="vicon vicon-plus btn-icon-after"></span>
</a>
<!-- Add <span> inside the btn-loading to preserve the width of the button -->
<a class="btn btn-white btn-loading">
  <span>Loading</span>
</a>
<!-- Add btn-disabled to the btn class. -->
<a class="btn btn-white btn-disabled">
  Disable
</a>
<!-- Add btn-large to the btn class. -->
<a class="btn btn-white btn-large">
  Large
</a>
<!-- Add btn-lead to the btn class. -->
<a class="btn btn-white btn-lead">
  Lead Button
</a>

Icons buttons

Alternative Style

    show code

    hide code

<a class="btn btn-icon btn-primary mrs"><span class="vicon vicon-add"></span></a>
<a class="btn btn-icon btn-default mrs"><span class="vicon vicon-plus"></span></a>
<a class="btn btn-icon btn-default btn-disabled mrs"><span class="vicon vicon-plus"></span></a>
<a class="btn btn-icon btn-secondary mrs"><span class="vicon vicon-remove"></span></a>
<a class="btn btn-icon btn-tertiary mrs"><span class="vicon vicon-star"></span></a>

    <button type="button" class="btn btn-default btn-large">
      copy code
    </button>

Link button

<button class="btn-link">link example</button>

    show code

    hide code

<button class="btn-link">link example</button>

    <button type="button" class="btn btn-default btn-large">
      copy code
    </button>

          Dropdown examples

            ⊙

To show dropdown items, add the additional .open class to the .dd dropdown class

default

       button default

dd item list

      button default

dd item list

dd item list

       button large

dd item list

      button large

dd item list

dd item list

       button lead

dd item list

      button lead

dd item list

dd item list

       open

dd item list

      pull-right

dd item list

dd item list

       pull-top

dd item list

      pull-right & pull-top

dd item list

primary

       button primary

dd item list

      button primary

dd item list

dd item list

       button large

dd item list

      button large

dd item list

dd item list

       button lead

dd item list

      button lead

dd item list

dd item list

       open

dd item list

      pull-right

dd item list

dd item list

       pull-top

dd item list

      pull-right & pull-top

dd item list

secondary

       button secondary

dd item list

      button secondary

dd item list

dd item list

       button large

dd item list

      button large

dd item list

dd item list

       button lead

dd item list

      button lead

dd item list

dd item list

       open

dd item list

      pull-right

dd item list

dd item list

       pull-top

dd item list

      pull-right & pull-top

dd item list

tertiary

       button tertiary

dd item list

      button tertiary

dd item list

dd item list

       button large

dd item list

      button large

dd item list

dd item list

       button lead

dd item list

      button lead

dd item list

dd item list

       open

dd item list

      pull-right

dd item list

dd item list

       pull-top

dd item list

      pull-right & pull-top

dd item list

    show code

    hide code

    <div class="dd mrs open">
       <a class="dd-btn btn btn-default">default <span class="vicon vicon-down-alt"></span></a>
       <ul class="dd-menu">
           <li class="dd-item"><a href="">dd item list</a></li>
       </ul>
    </div>

    <div class="dispib mrs">
      <a class="btn btn-default">default</a>
      <div class="dd pull-right open">
        <a class="dd-btn btn btn-default btn-append"><span class="vicon vicon-down-alt"></span></a>
         <ul class="dd-menu">
             <li class="dd-item"><a href="">dd item list</a></li>
             <li class="dd-item"><a href="">dd item list</a></li>
         </ul>
      </div>
    </div>

    <div class="dd mrs open pull-top">
       <a class="dd-btn btn btn-default btn-large">default large and top <span class="vicon vicon-up-alt"></span></a>
       <ul class="dd-menu">
           <li class="dd-item"><a href="">dd item list</a></li>
       </ul>
    </div>

    <div class="dispib">
      <a class="btn btn-default btn-large">default large and top-right</a>
      <div class="dd pull-right open pull-top">
        <a class="dd-btn btn btn-default btn-large btn-append"><span class="vicon vicon-up-alt"></span></a>
         <ul class="dd-menu">
             <li class="dd-item"><a href="">dd item list</a></li>
         </ul>
      </div>
    </div>

    <button type="button" class="btn btn-default btn-large">
      copy code
    </button>

          Flipswitch Buttons

            ⊙

When yes is selected, the container has a .flipswitch-yes class and the "yes" radio button is checked.

    <input type="radio" name="flipswitch-sample-1"> No

    <input type="radio" checked="checked" name="flipswitch-sample-1"> Yes

    show code

    hide code

<div id="flipswitch-sample-1" class="flipswitch flipswitch-yes">
  <label class="flipswitch-lbl-no">
    <input type="radio" name="flipswitch-sample-1"> No
  </label>

  <span class="flipswitch-sliders">
    <span class="flipswitch-outer">
      <span class="flipswitch-inner">
        <span class="flipswitch-btn-yes"><span class="flipswitch-icon vicon vicon-checkmark"></span></span>
        <span class="flipswitch-btn-no"><span class="flipswitch-icon vicon vicon-remove"></span></span>
      </span>
    </span>
    <span class="flipswitch-slider"></span>
  </span>

  <label class="flipswitch-lbl-yes">
    <input type="radio" checked="checked" name="flipswitch-sample-1"> Yes
  </label>
</div>

    <button type="button" class="btn btn-default btn-large">
      copy code
    </button>

When no is selected, the container has a .flipswitch-no class and the "no" radio button is checked.

    <input type="radio" name="flipswitch-sample-2"> No

    <input type="radio" checked="checked" name="flipswitch-sample-2"> Yes

    show code

    hide code

<div id="flipswitch-sample-2" class="flipswitch flipswitch-no">
  <label class="flipswitch-lbl-no">
    <input type="radio" name="flipswitch-sample-2"> No
  </label>

  <span class="flipswitch-sliders">
    <span class="flipswitch-outer">
      <span class="flipswitch-inner">
        <span class="flipswitch-btn-yes"><span class="flipswitch-icon vicon vicon-checkmark"></span></span>
        <span class="flipswitch-btn-no"><span class="flipswitch-icon vicon vicon-remove"></span></span>
      </span>
    </span>
    <span class="flipswitch-slider"></span>
  </span>

  <label class="flipswitch-lbl-yes">
    <input type="radio" checked="checked" name="flipswitch-sample-2"> Yes
  </label>
</div>

    <button type="button" class="btn btn-default btn-large">
      copy code
    </button>

          Toggle Buttons

            ⊙

The toggle button maps a Tetra.js component to a native hidden checkbox.

When active, the container has a btn-toggle-checked class and the hidden checkbox is checked.

When inactive, the btn-toggle-checked class is removed and the hidden checkbox is unchecked.

  <input type="checkbox">
  v
  Toggle button (default off)

  <input type="checkbox" checked="checked">
  v
  Toggle button (default on)

    show code

    hide code

<label id="btn-toggle-sample-1" class="btn-toggle mrs">
  <input type="checkbox">
  <span class="btn-toggle-check"><i class="vicon">v</i></span>
  Toggle button (default off)
</label>

<label id="btn-toggle-sample-2" class="btn-toggle btn-toggle-checked mrs">
  <input type="checkbox" checked="checked">
  <span class="btn-toggle-check"><i class="vicon">v</i></span>
  Toggle button (default on)
</label>

    <button type="button" class="btn btn-default btn-large">
      copy code
    </button>

  <input type="checkbox">
  v
  Alternative style

  <input type="checkbox" checked="checked">
  v
  Alternative style

    show code

    hide code

<label id="btn-toggle-sample-3" class="btn-toggle btn-toggle-alt mrs">
  <input type="checkbox">
  <span class="btn-toggle-check"><i class="vicon">v</i></span>
  Alternative style
</label>

<label id="btn-toggle-sample-4" class="btn-toggle btn-toggle-checked btn-toggle-alt">
  <input type="checkbox" checked="checked">
  <span class="btn-toggle-check"><i class="vicon">v</i></span>
  Alternative style
</label>

    <button type="button" class="btn btn-default btn-large">
      copy code
    </button>

    Navigation

      ⊙

          Nav menu

            ⊙

Home

Profile

Messages

Contacts

Other

          Tabs

            ⊙

Primary tab

Home

Profile

Messages

Contacts

Other

link

    show code

    hide code

<ul class="nav nav-tabs">
  <li class="active"><a href="#">Home</a></li>
  <li><a href="#">Profile</a></li>
  <li><a href="#">Messages</a></li>
  <li><a href="#">Contacts</a></li>
  <li><a href="#">Other</a></li>
  <li class="side-links"><a href="#">link</a></li>
</ul>

    <button type="button" class="btn btn-default btn-large">
      copy code
    </button>

Secondary tab

Home

Profile

Messages

Contacts

Other

c

    show code

    hide code

<ul class="nav nav-tabs-secondary">
  <li class="active"><a href="#">Home</a></li>
  <li><a href="#">Profile</a></li>
  <li><a href="#">Messages</a></li>
  <li><a href="#">Contacts</a></li>
  <li><a href="#">Other</a></li>
  <li class="side-links"><a href="#"><i class="vicon">c</i></a></li>
</ul>

    <button type="button" class="btn btn-default btn-large">
      copy code
    </button>

          Step Navigation

            ⊙

      v
      Sed do eiusmod tempor incididunt

      v
      Et dolore magna

      3
      Ut labore et dolore magna

    4
    Nostrud exercitation

    show code

    hide code

<dl class="gr nav-steps mbl">
  <dd class="gu gu-1of1">
  <ol class="gr">
    <li class="gu gu-1of4 gu-m-1of1 nav-steps-done">
    <a href="">
      <b class="nav-steps-item"><i class="vicon">v</i></b>
      <span class="nav-steps-text">Sed do eiusmod tempor incididunt</span>
    </a>
    </li>
    <li class="gu gu-1of4 gu-m-1of1 nav-steps-done">
    <a href="">
      <b class="nav-steps-item"><i class="vicon">v</i></b>
      <span class="nav-steps-text">Et dolore magna</span>
    </a>
    </li>
    <li class="gu gu-1of4 gu-m-1of1">
    <a href="">
      <b class="nav-steps-item">3</b>
      <span class="nav-steps-text">Ut labore et dolore magna</span>
    </a>
    </li>
    <li class="gu gu-last nav-steps-todo">
    <b class="nav-steps-item">4</b>
    <span class="nav-steps-text">Nostrud exercitation</span>
    </li>
  </ol>
  </dd>
</dl>

    <button type="button" class="btn btn-default btn-large">
      copy code
    </button>

          Pagination

            ⊙

The standard and backward compatible way.

‹ Previous

1

2

3

…

9

10

Next ›

    show code

    hide code

<ul class="paginator">
  <li class="disabled"><a class="btn btn-pagination" href=""><i class="vicon btn-icon-before">‹</i> Previous</a></li>
  <li><a href="">1</a></li>
  <li class="active"><a href="">2</a></li>
  <li><a href="">3</a></li>
  <li class="ellipsis"><span>…</span></li>
  <li><a href="">9</a></li>
  <li><a href="">10</a></li>
  <li><a class="btn btn-pagination" href="">Next <i class="vicon btn-icon-after">›</i></a></li>
</ul>

    <button type="button" class="btn btn-default btn-large">
      copy code
    </button>

          Buttons

            ⊙

  ‹
  Previous

  Next ›

    show code

    hide code

<a class="btn btn-pagination" href="">
  <i class="vicon btn-icon-before">‹</i>
  Previous
</a>
<a href="" class="btn btn-pagination">
  Next <i class="vicon btn-icon-after">›</i>
</a>

    <button type="button" class="btn btn-default btn-large">
      copy code
    </button>

    Dialogs

      ⊙

          Tooltips

            ⊙

Roll over the links to show the tooltips.

Available classes are : .tooltip-top, .tooltip-top-right, .tooltip-right, .tooltip-left, .tooltip-bottom.

    Tooltip on top left (default)

      Tooltip on top left

    Tooltip on top right

      Tooltip on top right

    Tooltip on right

      I'm on right

    Tooltip on left

      I'm on top right

    Tooltip on bottom left

      I'm on bottom left

    show code

    hide code

<a class="tooltip tooltip-top btn btn-default btn-large">
  Tooltip on top left
  <span class="tooltip-content">
    Tooltip on top left
  </span>
</a>
<a class="tooltip tooltip-top-right btn btn-default btn-large">
  Tooltip on top right
  <span class="tooltip-content">
    Tooltip on top right
  </span>
</a>
<a class="tooltip tooltip-right btn btn-default btn-large">
  Tooltip on right
  <span class="tooltip-content">
    I'm on right
  </span>
</a>
<a class="tooltip tooltip-left btn btn-default btn-large">
  Tooltip on left
  <span class="tooltip-content">
    I'm on top right
  </span>
</a>
<a class="tooltip tooltip-bottom btn btn-default btn-large">
  Tooltip on bottom left
  <span class="tooltip-content">
    I'm on bottom left
  </span>
</a>

    <button type="button" class="btn btn-default btn-large">
      copy code
    </button>

          Popovers

            ⊙

Popovers are a kind of extended tooltips: more content to display, optionally a header, optionally a footer, what else.

        Popover on top (default)

          Header

            Loremipsumdolorsitametconsecteturadipiscingelitpraesentbibendumullamcorper lectus dictum blandit.

          Footer

        Popover on bottom

          Header

            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent bibendum ullamcorper lectus dictum blandit.

        Popover on top left

            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent bibendum ullamcorper lectus dictum blandit.

          Footer

        Popover on bottom left

            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent bibendum ullamcorper lectus dictum blandit.

        Extra large

            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent bibendum ullamcorper lectus dictum blandit.

        Large

            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent bibendum ullamcorper lectus dictum blandit.

        Medium

            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent bibendum ullamcorper lectus dictum blandit.

        Small (default)

            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent bibendum ullamcorper lectus dictum blandit.

          Popins

            ⊙

Popins, or modal dialogs, or pop-up windows now are a common user experience design pattern. Here are some samples and the code to launch a popin.

Add the .popin-edit class to the .popin container to activate the edit mode.

        ×
        Close

Popin with default style

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.

        Submit

      Alternate link

        <button class="bootnode close" data-popin="close" data-event="click" data-comp="popin">
          ×
          Close
        </button>

Popin with edit style

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.

        Alternate link

          Submit

    show code

    hide code

<div class="popin-container mbl"><div class="gr">
  <div class="popin gu-2of3 gu-m-1of1">

    <div class="popin-header">
      <a class="bootnode close" data-popin="close" data-event="click" data-comp="popin">
        <i class="vicon">×</i>
        <span>Close</span>
      </a>
      <h2 class="h2">Popin with default style</h2>
    </div>
    <div class="popin-body">
      <p class="mbn">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>
    </div>
    <div class="popin-footer tac-m">
      <a class="bootnode btn btn-primary btn-large" data-target="/tetra-ui/doc/xhr/popin-edit.html" data-fake-app="fake" data-event="click" data-view="fakeApp/fakeApp">
        Submit
      </a>
      <a class="fr fno-m mts" href="">Alternate link</a>
    </div>
  </div>

  </div>
</div>

    <button type="button" class="btn btn-default btn-large">
      copy code
    </button>

    Icons

      ⊙

          Overview

            ⊙

The base font acts as a parallel solution to the global image sprite. The icon font really shines on mobile and HiDPI devices where it reveals all of its vector awesomeness

            .vicon
 .vicon-message

            .vicon
 .vicon-visit

            .vicon
 .vicon-search

            .vicon
 .vicon-settings

            .vicon
 .vicon-viadeo

            .vicon
 .vicon-tianji

            .vicon
 .vicon-twitter

            .vicon
 .vicon-bubbles

            .vicon
 .vicon-add

            .vicon
 .vicon-plus

            .vicon
 .vicon-plus-alt

            .vicon
 .vicon-remove

            .vicon
 .vicon-star

            .vicon
 .vicon-reload

            .vicon
 .vicon-speech

            .vicon
 .vicon-facebook

            .vicon
 .vicon-date

            .vicon
 .vicon-googleplus

            .vicon
 .vicon-phone

            .vicon
 .vicon-checkmark

            .vicon
 .vicon-download

            .vicon
 .vicon-network

            .vicon
 .vicon-edit

            .vicon
 .vicon-like

            .vicon
 .vicon-left-alt

            .vicon
 .vicon-right-alt

            .vicon
 .vicon-prev

            .vicon
 .vicon-next

            .vicon
 .vicon-first

            .vicon
 .vicon-last

            .vicon
 .vicon-down

            .vicon
 .vicon-up

            .vicon
 .vicon-up-alt

            .vicon
 .vicon-down-alt

            .vicon
 .vicon-location

            .vicon
 .vicon-select

            .vicon
 .vicon-bubble

            .vicon
 .vicon-export

            .vicon
 .vicon-degree

            .vicon
 .vicon-degree-ok

            .vicon
 .vicon-photo

            .vicon
 .vicon-tag

            .vicon
 .vicon-experience

            .vicon
 .vicon-recommand

            .vicon
 .vicon-article

            .vicon
 .vicon-profile

            .vicon
 .vicon-company

            .vicon
 .vicon-offer

            .vicon
 .vicon-group

            .vicon
 .vicon-school

            .vicon
 .vicon-book

            .vicon
 .vicon-question

            .vicon
 .vicon-blog

            .vicon
 .vicon-request-ok

            .vicon
 .vicon-share

            .vicon
 .vicon-archive

            .vicon
 .vicon-information

            .vicon
 .vicon-warning

            .vicon
 .vicon-upload

            .vicon
 .vicon-graph

            .vicon
 .vicon-bulb

            .vicon
 .vicon-search-plus

            .vicon
 .vicon-euro

            .vicon
 .vicon-save

            .vicon
 .vicon-tie

            .vicon
 .vicon-saved

            .vicon
 .vicon-bell

            .vicon
 .vicon-contract

            .vicon
 .vicon-print

            .vicon
 .vicon-time

            .vicon
 .vicon-catalog

            .vicon
 .vicon-tools

            .vicon
 .vicon-target

            .vicon
 .vicon-visibility

            .vicon
 .vicon-stream

            .vicon
 .vicon-data

            .vicon
 .vicon-notification

            .vicon
 .vicon-notification-alt

            .vicon
 .vicon-media

            .vicon
 .vicon-trust

            .vicon
 .vicon-key

            .vicon
 .vicon-money

            .vicon
 .vicon-infinity

            .vicon
 .vicon-day-1

            .vicon
 .vicon-day-2

            .vicon
 .vicon-day-3

            .vicon
 .vicon-day-4

            .vicon
 .vicon-day-5

            .vicon
 .vicon-day-6

            .vicon
 .vicon-day-7

            .vicon
 .vicon-day-8

            .vicon
 .vicon-day-9

            .vicon
 .vicon-day-10

            .vicon
 .vicon-day-11

            .vicon
 .vicon-day-12

            .vicon
 .vicon-day-13

            .vicon
 .vicon-day-14

            .vicon
 .vicon-day-15

            .vicon
 .vicon-day-16

            .vicon
 .vicon-day-17

            .vicon
 .vicon-day-18

            .vicon
 .vicon-day-19

            .vicon
 .vicon-day-20

            .vicon
 .vicon-day-21

            .vicon
 .vicon-day-22

            .vicon
 .vicon-day-23

            .vicon
 .vicon-day-24

            .vicon
 .vicon-day-25

            .vicon
 .vicon-day-26

            .vicon
 .vicon-day-27

            .vicon
 .vicon-day-28

            .vicon
 .vicon-day-29

            .vicon
 .vicon-day-30

            .vicon
 .vicon-day-31

    show code

    hide code

 <span class="vicon vicon-message"></span>

    <button type="button" class="btn btn-default btn-large">
      copy code
    </button>

          How to use

            ⊙

This is the simple tag to display an icon, where c is the character (icon) you want to display. Then you can use your own styles on top of this.

    show code

    hide code

<i class="vicon">
  c
</i>

    <button type="button" class="btn btn-default btn-large">
      copy code
    </button>

          Download

            ⊙

  For desktop use you can download and install the OpenType font file:

  Download Viadeoicons

    Components

      ⊙

          Badges

            ⊙

Badges are used as notification indicators (new messages, new requests).

Primary badge

    show code

    hide code

<span class="ui-badge">123</span>

    <button type="button" class="btn btn-default btn-large">
      copy code
    </button>

Secondary badge

    show code

    hide code

<span class="ui-badge ui-badge-alt">123</span>/span>

    <button type="button" class="btn btn-default btn-large">
      copy code
    </button>

          Labels

            ⊙

Labels are essentially used for clickable keywords.

  Lorem

  Ipsum
  ×

    show code

    hide code

<span class="ui-label mbn">
  <a href="">Lorem</a>
</span>
<span class="ui-label mbn">
  <a href="">Ipsum</a>
  <a href=""><i class="vicon">&times;</i></a>
</span>

    <button type="button" class="btn btn-default btn-large">
      copy code
    </button>

  lorem ipsum

    show code

    hide code

<span class="ui-label ui-label-premium">
  <a href="">lorem ipsum</a>
</span>

    <button type="button" class="btn btn-default btn-large">
      copy code
    </button>

          Tags

            ⊙

Tags are not clickable, they only have a remove button.

Consectetur ×
Sed do ×

    show code

    hide code

<span class="ui-tag">
  Consectetur
  <a class="remove" href="">
    <i class="vicon">×</i>
  </a>
</span>

    <button type="button" class="btn btn-default btn-large">
      copy code
    </button>

          Alerts

            ⊙

Alerts have an optional close button and icon.

Several kinds of alert: info, success, error, form-error, notification, premium

  <button data-event="click" data-comp="alert" class="bx-alert-close">
    ×
  </button>

  :

DEFAULT Message...

  <button data-event="click" data-comp="alert" class="bx-alert-close">
    ×
  </button>

  v

OK Message...

  <button data-event="click" data-comp="alert" class="bx-alert-close">
    ×
  </button>

  :

WARNING Message...

  <button data-event="click" data-comp="alert" class="bx-alert-close">
    ×
  </button>

  :

ERROR Message...

  <button data-event="click" data-comp="alert" class="bx-alert-close">
    ×
  </button>

  :

ERROR-FORM Message...

  <button data-event="click" data-comp="alert" class="bx-alert-close">
    ×
  </button>

  M

NOTIFICATION Message...

  <button data-event="click" data-comp="alert" class="bx-alert-close">
    ×
  </button>

  *

PREMIUM Message...

    show code

    hide code

<div class="bx-alert bx-alert-ok mbs">
  <button data-event="click" data-comp="alert" class="bx-alert-close bootnode">
    <i class="vicon">×</i>
  </button>

  <i class="vicon bx-alert-icon">:</i>

  <div class="bx-alert-content">
    <p class="mbn">Success message...</p>
  </div>
</div>

    <button type="button" class="btn btn-default btn-large">
      copy code
    </button>

          Cards

            ⊙

This is not really a component but rather a style guide to make your own card components using the right typography, colors, alignments. Feel free to use it as a skeleton!

        Firstname Lastname
        *

Job, Company

City, Country |
        Industry

Since 2011:

Job, Company

From 2008 to 2011:

Job, Company

      Other information
      Button

    show code

    hide code

<div class="rc-card rc-card-l">
  <div class="rc-card-header">
  <h2 class="name">
    <a href="">Firstname Lastname</a>
    <i class="vicon">*</i>
  </h2>
  </div>
  <div class="rc-card-content rc rcss">
  <a href="" class="avatar img-left">
    <img src="…/avatar-m-107x145.png">
  </a>
  <div class="bd">
    <h3 class="job">Job, Company</h3>
    <h4 class="where">City, Country |
    Industry
    </h4>
    <dl class="previously">
    <dt>Since 2011:</dt>
    <dd>Job, Company</dd>
    <dt>From 2008 to 2011:</dt>
    <dd>Job, Company</dd>
    </dl>
  </div>
  </div>
  <div class="rc-card-footer">
  <span class="fl mtxs">Other information</span>
  <a class="btn btn-primary fr">Button</a>
  </div>
</div>

    <button type="button" class="btn btn-default btn-large">
      copy code
    </button>

Firstname Lastname

Job, Company

City, Country | Industry

Since 2011:

Job, Company

From 2008 to 2011:

Job, Company

    show code

    hide code

<div class="rc-card rc-card-m">
  <div class="rc-card-header rc rcss">
  <a href="" class="avatar img-left">
    <img src="…/avatar-m-60x60.png">
  </a>
  <div class="bd">
    <h2 class="name">
    <a href="">Firstname Lastname</a>
    </h2>
    <h3 class="job">Job, Company</h3>
  </div>
  </div>
  <div class="rc-card-content">
  <h4 class="where">City, Country |
    Industry
  </h4>
  <dl class="previously">
    <dt>Since 2011:</dt>
    <dd>Job, Company</dd>
    <dt>From 2008 to 2011:</dt>
    <dd>Job, Company</dd>
  </dl>
  </div>
</div>

    <button type="button" class="btn btn-default btn-large">
      copy code
    </button>

          Growl

            ⊙

Growl is a live notification, usualy fixed on top of the page.

Several kinds of growl: info, success, error, notification, premium

    <button class="growl-close">
      ×
    </button>
    :

    info growl with dismiss

    :

    info growl

    v

    success growl

    :

    error growl

    M

    notification growl

    *

    premium growl

    show code

    hide code

<div class="growl growl-type-info growl-position-center mbs growl-active">
  <button class="growl-close">
    <i class="vicon">×</i>
  </button>
  <i class="vicon growl-icon">:</i>
  <div class="growl-content">
  info growl with dismiss
  </div>
</div>

    <button type="button" class="btn btn-default btn-large">
      copy code
    </button>

          Share

            ⊙

Share this page

          Facebook

          Google+

          Twitter

          Viadeo

    show code

    hide code

<dl class="share-links">
  <dt>Share this page</dt>
  <dd>
    <ul>
      <li>
        <a class="facebook tooltip">
          <span class="vicon vicon-facebook"></span>
          <span class="tooltip-content">Facebook</span>
        </a>
      </li>
      <li>
        <a class="google tooltip">
          <span class="vicon vicon-googleplus"></span>
          <span class="tooltip-content">Google+</span>
        </a>
      </li>
      <li>
        <a class="twitter tooltip" title="Twitter">
          <span class="vicon vicon-twitter"></span>
          <span class="tooltip-content">Twitter</span>
        </a>
      </li>
      <li>
        <a class="viadeo tooltip" title="Viadeo">
          <span class="vicon vicon-viadeo"></span>
          <span class="tooltip-content">Viadeo</span>
        </a>
      </li>
    </ul>
  </dd>
</dl>

    <button type="button" class="btn btn-default btn-large">
      copy code
    </button>

          Highlights

            ⊙

          Progress Bar

            ⊙

To change how much the progress bar is filled, you need to modify the width of the element with the classname .pb-fill

    show code

    hide code

<div class="progressbar">
  <div class="pb-mask">
    <div class="pb-fill" style="width:33%"></div>
  </div>
</div>

    <button type="button" class="btn btn-default btn-large">
      copy code
    </button>

    show code

    hide code

<div class="progressbar pb-large">
  <div class="pb-mask">
    <div class="pb-fill" style="width:33%"></div>
  </div>
</div>

    <button type="button" class="btn btn-default btn-large">
      copy code
    </button>

©2014 APVO CORP.


text:
namespace llvm {
namespace orc {

template <typename ExternalLookupFtorT, typename DylibLookupFtorT>
class LambdaResolver : public RuntimeDyld::SymbolResolver {
public:

  LambdaResolver(ExternalLookupFtorT ExternalLookupFtor,
                 DylibLookupFtorT DylibLookupFtor)
      : ExternalLookupFtor(ExternalLookupFtor),
        DylibLookupFtor(DylibLookupFtor) {}

  RuntimeDyld::SymbolInfo findSymbol(const std::string &Name) final {
    return ExternalLookupFtor(Name);
  }

  RuntimeDyld::SymbolInfo
  findSymbolInLogicalDylib(const std::string &Name) final {
    return DylibLookupFtor(Name);
  }

private:
  ExternalLookupFtorT ExternalLookupFtor;
  DylibLookupFtorT DylibLookupFtor;
};

template <typename ExternalLookupFtorT,
          typename DylibLookupFtorT>
std::unique_ptr<LambdaResolver<ExternalLookupFtorT, DylibLookupFtorT>>
createLambdaResolver(ExternalLookupFtorT ExternalLookupFtor,
                     DylibLookupFtorT DylibLookupFtor) {
  typedef LambdaResolver<ExternalLookupFtorT, DylibLookupFtorT> LR;
  return make_unique<LR>(std::move(ExternalLookupFtor),
                         std::move(DylibLookupFtor));
}

} // End namespace orc.
} // End namespace llvm.

#endif // LLVM_EXECUTIONENGINE_ORC_LAMBDARESOLVER_H

redpajama_set_name: RedPajamaGithub


text:
package nl.nn.adapterframework.core;

import java.util.Map;
/**
 * Defines listening behaviour of pulling receivers.
 * Pulling receivers are receivers that poll for a message, as opposed to pushing receivers
 * that are 'message driven'
 *
 * @author  Gerrit van Brakel
 * @version $Id$
 */
public interface IPullingListener extends IListener {
	public static final String version = "$RCSfile: IPullingListener.java,v $ $Revision: 1.10 $ $Date: 2011-11-30 13:51:55 $";

	/**
	 * Prepares a thread for receiving messages.
	 * Called once for each thread that will listen for messages.
	 * @return the threadContext for this thread. The threadContext is a Map in which
	 * thread-specific data can be stored.
	 */
	Map openThread() throws ListenerException;

	/**
	 * Finalizes a message receiving thread.
	 * Called once for each thread that listens for messages, just before
	 * {@link #close()} is called.
	 */
	void closeThread(Map threadContext) throws ListenerException;

	/**
	 * Retrieves messages from queue or other channel, but does no processing on it.
	 * Multiple objects may try to call this method at the same time, from different threads.
	 * Implementations of this method should therefore be thread-safe, or synchronized.
	 *
Any thread-specific properties should be stored in and retrieved from the threadContext.
	 */
	Object getRawMessage(Map threadContext) throws ListenerException;

}


text:
module CsrMatrix
    module Exceptions
        # Occurs when user enters a null matrix for processing.
        class NullMatrixException < StandardError; end

        # Occurs when a sparse matrix operation occurs wherein its dimensions result in the operation being unavailable.
        class MatrixDimException < StandardError; end

        # Occurs when the matrix builder expects a specific type; and is provided the wrong type to generate the sparse matrix.
        class MatrixTypeException < StandardError; end

        # Occurs when the system divides by 0; standard arithmetic error.
        class DivideByZeroException < StandardError; end

        # Occurs when index queried is out of range of the matrix.
        class IndexOutOfRangeException < StandardError; end

        # Occurs when the sparse matrix is used in processing against a null / nil value.
        class ArgumentNullException < StandardError; end

        # Occurs anytime an invariant is violated.
        class InvariantError < StandardError; end

        # Occurs when the return values is incorrect or post conditions are not met.
        class ContractReturnError < StandardError; end

        #
        class InputOverflowError < StandardError; end

        #
        class MatrixValueOverflowError < StandardError; end

        # Occurs when a bad input (generally within specific bounds) is entered.
        class BadInputException < StandardError; end

    end # exceptions
end # csrmatrix


text:
<?php namespace Analogue\ORM\Relationships;

use Analogue\ORM\System\Query;
use Analogue\ORM\System\Mapper;
use Analogue\ORM\System\Manager;
use Analogue\ORM\EntityCollection;
use Illuminate\Database\Query\Expression;

class HasManyThrough extends Relationship {

	/**
	 * The distance parent Entity instance.
	 *
	 * @var \Analogue\ORM\Entity
	 */
	protected $farParent;

	/**
	 * The far parent map instance
	 *
	 * @var \Analogue\ORM\EntityMap
	 */
	protected $farParentMap;

	/**
	 * The near key on the relationship.
	 *
	 * @var string
	 */
	protected $firstKey;

	/**
	 * The far key on the relationship.
	 *
	 * @var string
	 */
	protected $secondKey;

	/**
	 * Create a new has many relationship instance.
	 *
	 * @param  \Analogue\ORM\System\Query  $query
	 * @param  Mappable  $parent
	 * @param  string  $firstKey
	 * @param  string  $secondKey
	 * @return void
	 */
	public function __construct(Mapper $mapper, $farParent, $parentMap, $firstKey, $secondKey)
	{
		$this->firstKey = $firstKey;
		$this->secondKey = $secondKey;
		$this->farParent = $farParent;

		$this->farParentMap = $this->relatedMapper->getManager()->mapper($farParent)->getEntityMap();

		$parentInstance = $this->relatedMapper->getManager()->mapper($parentMap->getClass())->newInstance();

		parent::__construct($mapper, $parentInstance);
	}

	public function attachTo($related)
	{
		// N/A
	}

	public function detachFrom($related)
	{
		// N/A
	}

	/**
	 * Set the base constraints on the relation query.
	 *
	 * @return void
	 */
	public function addConstraints()
	{
		$parentTable = $this->parentMap->getTable();

		$this->setJoin();

		if (static::$constraints)
		{
			$farParentKeyName = $this->farParentMap->getKeyName();

			$this->query->where($parentTable.'.'.$this->firstKey,
				'=', $this->farParent->getEntityAttribute($farParentKeyName));
		}
	}

	/**
	 * Add the constraints for a relationship count query.
	 *
	 * @param  \Analogue\ORM\Query  $query
	 * @param  \Analogue\ORM\Query  $parent
	 * @return \Analogue\ORM\Query
	 */
	public function getRelationCountQuery(Query $query, Query $parent)
	{
		$parentTable = $this->parentMap->getTable();

		$this->setJoin($query);

		$query->select(new Expression('count(*)'));

		$key = $this->wrap($parentTable.'.'.$this->firstKey);

		return $query->where($this->getHasCompareKey(), '=', new Expression($key));
	}

	/**
	 * Set the join clause on the query.
	 *
	 * @param  \Analogue\ORM\Query|null  $query
	 * @return void
	 */
	protected function setJoin(Query $query = null)
	{
		$query = $query ?: $this->query;

		$foreignKey = $this->relatedMap->getTable().'.'.$this->secondKey;

		$query->join($this->parentMap->getTable(), $this->getQualifiedParentKeyName(), '=', $foreignKey);
	}

	/**
	 * Set the constraints for an eager load of the relation.
	 *
	 * @param  array  $entities
	 * @return void
	 */
	public function addEagerConstraints(array $entities)
	{
		$table = $this->parentMap->getTable();

		$this->query->whereIn($table.'.'.$this->firstKey, $this->getKeys($entities));
	}

	/**
	 * Initialize the relation on a set of entities.
	 *
	 * @param  array   $entities
	 * @param  string  $relation
	 * @return array
	 */
	public function initRelation(array $entities, $relation)
	{
		foreach ($entities as $entity)
		{
			$entity->setEntityAttribute($relation, $this->relatedMap->newCollection());
		}

		return $entities;
	}

	/**
	 * Match the eagerly loaded results to their parents.
	 *
	 * @param  array   $entities
	 * @param  \Analogue\ORM\EntityCollection  $results
	 * @param  string  $relation
	 * @return array
	 */
	public function match(array $entities, EntityCollection $results, $relation)
	{
		$dictionary = $this->buildDictionary($results);

		$relatedKey = $this->relatedMap->getKeyName();

		$cache = $this->parentMapper->getEntityCache();

		// Once we have the dictionary we can simply spin through the parent entities to
		// link them up with their children using the keyed dictionary to make the
		// matching very convenient and easy work. Then we'll just return them.
		foreach ($entities as $entity)
		{
			$key = $entity->getEntityAttribute($relatedKey);

			if (isset($dictionary[$key]))
			{
				$value = $this->relatedMap->newCollection($dictionary[$key]);

				$entity->setEntityAttribute($relation, $value);

				$cache->cacheLoadedRelationResult($entity, $relation, $value, $this);
			}
		}

		return $entities;
	}

	/*
	 * Build model dictionary keyed by the relation's foreign key.
	 *
	 * @param  \Analogue\ORM\EntityCollection  $results
	 * @return array
	 */
	protected function buildDictionary(EntityCollection $results)
	{
		$dictionary = array();

		$foreign = $this->firstKey;

		// First we will create a dictionary of entities keyed by the foreign key of the
		// relationship as this will allow us to quickly access all of the related
		// entities without having to do nested looping which will be quite slow.
		foreach ($results as $result)
		{
			$dictionary[$result->{$foreign}][] = $result;
		}

		return $dictionary;
	}

	/**
	 * Get the results of the relationship.
	 *
	 * @return mixed
	 */
	public function getResults($relation)
	{
		$results = $this->query->get();

		$this->cacheRelation($results, $relation);

		return $results;
	}

	/**
	 * Execute the query as a "select" statement.
	 *
	 * @param  array  $columns
	 * @return \Analogue\ORM\EntityCollection
	 */
	public function get($columns = array('*'))
	{
		// First we'll add the proper select columns onto the query so it is run with
		// the proper columns. Then, we will get the results and hydrate out pivot
		// entities with the result of those columns as a separate model relation.
		$select = $this->getSelectColumns($columns);

		$entities = $this->query->addSelect($select)->getEntities();

		// If we actually found entities we will also eager load any relationships that
		// have been specified as needing to be eager loaded. This will solve the
		// n + 1 query problem for the developer and also increase performance.
		if (count($entities) > 0)
		{
			$entities = $this->query->eagerLoadRelations($entities);
		}

		return $this->relatedMap->newCollection($entities);
	}

	/**
	 * Set the select clause for the relation query.
	 *
	 * @param  array  $columns
	 * @return \Analogue\ORM\Relationships\BelongsToMany
	 */
	protected function getSelectColumns(array $columns = array('*'))
	{
		if ($columns == array('*'))
		{
			$columns = array($this->relatedMap->getTable().'.*');
		}

		return array_merge($columns, array($this->parentMap->getTable().'.'.$this->firstKey));
	}

	/**
	 * Get a paginator for the "select" statement.
	 *
	 * @param  int    $perPage
	 * @param  array  $columns
	 * @return \Illuminate\Pagination\Paginator
	 */
	public function paginate($perPage = null, $columns = array('*'))
	{
		$this->query->addSelect($this->getSelectColumns($columns));

		$pager = $this->query->paginate($perPage, $columns);

		return $pager;
	}

	/**
	 * Get the key name of the parent model.
	 *
	 * @return string
	 */
	protected function getQualifiedParentKeyName()
	{
		return $this->parentMap->getQualifiedKeyName();
	}

	/**
	 * Get the key for comparing against the parent key in "has" query.
	 *
	 * @return string
	 */
	public function getHasCompareKey()
	{
		return $this->farParentMap->getQualifiedKeyName();
	}

}


text:
#include <linux/uaccess.h>
#include <linux/kernel.h>
#include <linux/types.h>
#include <linux/errno.h>
#include <linux/gfp.h>
#include <linux/cpu.h>
#include <asm/ctl_reg.h>
#include <asm/io.h>

/*
 * This function writes to kernel memory bypassing DAT and possible
 * write protection. It copies one to four bytes from src to dst
 * using the stura instruction.
 * Returns the number of bytes copied or -EFAULT.
 */
static long probe_kernel_write_odd(void *dst, const void *src, size_t size)
{
	unsigned long count, aligned;
	int offset, mask;
	int rc = -EFAULT;

	aligned = (unsigned long) dst & ~3UL;
	offset = (unsigned long) dst & 3;
	count = min_t(unsigned long, 4 - offset, size);
	mask = (0xf << (4 - count)) & 0xf;
	mask >>= offset;
	asm volatile(
		"	bras	1,0f\n"
		"	icm	0,0,0(%3)\n"
		"0:	l	0,0(%1)\n"
		"	lra	%1,0(%1)\n"
		"1:	ex	%2,0(1)\n"
		"2:	stura	0,%1\n"
		"	la	%0,0\n"
		"3:\n"
		EX_TABLE(0b,3b) EX_TABLE(1b,3b) EX_TABLE(2b,3b)
		: "+d" (rc), "+a" (aligned)
		: "a" (mask), "a" (src) : "cc", "memory", "0", "1");
	return rc ? rc : count;
}

long probe_kernel_write(void *dst, const void *src, size_t size)
{
	long copied = 0;

	while (size) {
		copied = probe_kernel_write_odd(dst, src, size);
		if (copied < 0)
			break;
		dst += copied;
		src += copied;
		size -= copied;
	}
	return copied < 0 ? -EFAULT : 0;
}

static int __memcpy_real(void *dest, void *src, size_t count)
{
	register unsigned long _dest asm("2") = (unsigned long) dest;
	register unsigned long _len1 asm("3") = (unsigned long) count;
	register unsigned long _src  asm("4") = (unsigned long) src;
	register unsigned long _len2 asm("5") = (unsigned long) count;
	int rc = -EFAULT;

	asm volatile (
		"0:	mvcle	%1,%2,0x0\n"
		"1:	jo	0b\n"
		"	lhi	%0,0x0\n"
		"2:\n"
		EX_TABLE(1b,2b)
		: "+d" (rc), "+d" (_dest), "+d" (_src), "+d" (_len1),
		  "+d" (_len2), "=m" (*((long *) dest))
		: "m" (*((long *) src))
		: "cc", "memory");
	return rc;
}

/*
 * Copy memory in real mode (kernel to kernel)
 */
int memcpy_real(void *dest, void *src, size_t count)
{
	unsigned long flags;
	int rc;

	if (!count)
		return 0;
	local_irq_save(flags);
	__arch_local_irq_stnsm(0xfbUL);
	rc = __memcpy_real(dest, src, count);
	local_irq_restore(flags);
	return rc;
}

/*
 * Copy memory in absolute mode (kernel to kernel)
 */
void memcpy_absolute(void *dest, void *src, size_t count)
{
	unsigned long cr0, flags, prefix;

	flags = arch_local_irq_save();
	__ctl_store(cr0, 0, 0);
	__ctl_clear_bit(0, 28); /* disable lowcore protection */
	prefix = store_prefix();
	if (prefix) {
		local_mcck_disable();
		set_prefix(0);
		memcpy(dest, src, count);
		set_prefix(prefix);
		local_mcck_enable();
	} else {
		memcpy(dest, src, count);
	}
	__ctl_load(cr0, 0, 0);
	arch_local_irq_restore(flags);
}

/*
 * Copy memory from kernel (real) to user (virtual)
 */
int copy_to_user_real(void __user *dest, void *src, size_t count)
{
	int offs = 0, size, rc;
	char *buf;

	buf = (char *) __get_free_page(GFP_KERNEL);
	if (!buf)
		return -ENOMEM;
	rc = -EFAULT;
	while (offs < count) {
		size = min(PAGE_SIZE, count - offs);
		if (memcpy_real(buf, src + offs, size))
			goto out;
		if (copy_to_user(dest + offs, buf, size))
			goto out;
		offs += size;
	}
	rc = 0;
out:
	free_page((unsigned long) buf);
	return rc;
}

/*
 * Copy memory from user (virtual) to kernel (real)
 */
int copy_from_user_real(void *dest, void __user *src, size_t count)
{
	int offs = 0, size, rc;
	char *buf;

	buf = (char *) __get_free_page(GFP_KERNEL);
	if (!buf)
		return -ENOMEM;
	rc = -EFAULT;
	while (offs < count) {
		size = min(PAGE_SIZE, count - offs);
		if (copy_from_user(buf, src + offs, size))
			goto out;
		if (memcpy_real(dest + offs, buf, size))
			goto out;
		offs += size;
	}
	rc = 0;
out:
	free_page((unsigned long) buf);
	return rc;
}

/*
 * Check if physical address is within prefix or zero page
 */
static int is_swapped(unsigned long addr)
{
	unsigned long lc;
	int cpu;

	if (addr < sizeof(struct _lowcore))
		return 1;
	for_each_online_cpu(cpu) {
		lc = (unsigned long) lowcore_ptr[cpu];
		if (addr > lc + sizeof(struct _lowcore) - 1 || addr < lc)
			continue;
		return 1;
	}
	return 0;
}

/*
 * Convert a physical pointer for /dev/mem access
 *
 * For swapped prefix pages a new buffer is returned that contains a copy of
 * the absolute memory. The buffer size is maximum one page large.
 */
void *xlate_dev_mem_ptr(unsigned long addr)
{
	void *bounce = (void *) addr;
	unsigned long size;

	get_online_cpus();
	preempt_disable();
	if (is_swapped(addr)) {
		size = PAGE_SIZE - (addr & ~PAGE_MASK);
		bounce = (void *) __get_free_page(GFP_ATOMIC);
		if (bounce)
			memcpy_absolute(bounce, (void *) addr, size);
	}
	preempt_enable();
	put_online_cpus();
	return bounce;
}

/*
 * Free converted buffer for /dev/mem access (if necessary)
 */
void unxlate_dev_mem_ptr(unsigned long addr, void *buf)
{
	if ((void *) addr != buf)
		free_page((unsigned long) buf);
}


text:
import { Component, OnInit } from '@angular/core';
import { Northwind } from '../shared/northwind';

@Component({
  selector: 'app-grid-top-level-options',
  templateUrl: './grid-top-level-options.component.html',
  styleUrls: ['./grid-top-level-options.component.css']
})
export class GridTopLevelOptionsComponent {

  public cols: Array<any>;
  public id: string;
  public data: any;
  public w: string;
  public h: string;
  public pKey: string;

  constructor() {
    this.data = Northwind.getData();

    this.id = 'grid1';
    this.w = '100%';
    this.h = '400px';
    this.pKey = 'ProductID';

    this.cols = [
      { key: 'ProductID', headerText: 'Product ID', width: '50px', dataType: 'number' },
      { key: 'ProductName', headerText: 'Name', width: '250px', dataType: 'string' },
      { key: 'QuantityPerUnit', headerText: 'Quantity per unit', width: '250px', dataType: 'string' },
      { key: 'UnitPrice', headerText: 'Unit Price', width: '100px', dataType: 'number' }
    ];
  }

}


text:
ACCEPTED

#### According to
Index Fungorum

#### Published in
Monogr. Biol. Soc. Pakistan 5: 63 (1969)

#### Original name
Microdiplodia nannorrhopis S. Ahmad

### Remarks
null


text:
extern "C" {
#endif

extern void patch_programmer(void);

#ifdef  __cplusplus
}
#endif // __cplusplus

//#endif
#endif // __PATCHP_ROGRAMMER_H__


text:
jasmine.DEFAULT_TIMEOUT_INTERVAL = 1000;

var _ = require("lodash");
var Rx = require('../../dist/cjs/Rx.KitchenSink');

global.rxTestScheduler = null;
global.cold;
global.hot;
global.expectObservable;

global.hot = function () {
  if (!global.rxTestScheduler) {
    throw 'tried to use hot() in async test';
  }
  return global.rxTestScheduler.createHotObservable.apply(global.rxTestScheduler, arguments);
};

global.cold = function () {
  if (!global.rxTestScheduler) {
    throw 'tried to use cold() in async test';
  }
  return global.rxTestScheduler.createColdObservable.apply(global.rxTestScheduler, arguments);
};

global.expectObservable = function () {
  if (!global.rxTestScheduler) {
    throw 'tried to use expectObservable() in async test';
  }
  return global.rxTestScheduler.expect.apply(global.rxTestScheduler, arguments);
};

var glit = global.it;

global.it = function (description, cb, timeout) {
  if (cb.length === 0) {
    glit(description, function () {
      global.rxTestScheduler = new Rx.TestScheduler(assertDeepEqual);
      cb();
      global.rxTestScheduler.flush();
    });
  } else {
    glit.apply(this, arguments);
  }
};

beforeEach(function () {
  jasmine.addMatchers({
    toDeepEqual: function(util, customEqualityTesters) {
      return {
        compare: function(actual, expected) {
          var result = { pass: _.isEqual(actual, expected) };

          if (!result.pass && Array.isArray(actual) && Array.isArray(expected)) {
            result.message = 'Expected \n';
            actual.forEach(function(x) {
              result.message += JSON.stringify(x) + '\n';
            });
            result.message += '\nto deep equal \n';
            expected.forEach(function(x) {
              result.message += JSON.stringify(x) + '\n';
            });
          }

          return result;
        }
      };
    }
  });
});

afterEach(function () {
  global.rxTestScheduler = null;
});

function assertDeepEqual(actual, expected) {
  expect(actual).toDeepEqual(expected);
}

(function (){
  var objectTypes = {
      'boolean': false,
      'function': true,
      'object': true,
      'number': false,
      'string': false,
      'undefined': false
  };

  Object.defineProperty(Error.prototype, 'toJSON', {
      value: function () {
          var alt = {};

          Object.getOwnPropertyNames(this).forEach(function (key) {
            if (key !== 'stack') {
              alt[key] = this[key];
            }
          }, this);
          return alt;
      },
      configurable: true
  });

  var _root = (objectTypes[typeof self] && self) || (objectTypes[typeof window] && window);

  var freeExports = objectTypes[typeof exports] && exports && !exports.nodeType && exports;
  var freeModule = objectTypes[typeof module] && module && !module.nodeType && module;
  var freeGlobal = objectTypes[typeof global] && global;

  if (freeGlobal && (freeGlobal.global === freeGlobal || freeGlobal.window === freeGlobal)) {
      _root = freeGlobal;
  }

  global.__root__ = _root;
}());

global.lowerCaseO = function lowerCaseO() {
  var values = [].slice.apply(arguments);

  var o = {
    subscribe: function(observer) {
      values.forEach(function(v) {
        observer.next(v);
      });
      observer.complete();
    }
  };

  o[Symbol.observable] = function (){
    return this;
  }

  return o;
}


text:
package org.apache.avro.io;

import java.io.IOException;
import java.nio.ByteBuffer;

import org.apache.avro.util.Utf8;

/**
 * An abstract {@link Encoder} for Avro's binary encoding.
 *

 * To construct and configure instances, use {@link EncoderFactory}
 *
 * @see EncoderFactory
 * @see BufferedBinaryEncoder
 * @see DirectBinaryEncoder
 * @see BlockingBinaryEncoder
 * @see Encoder
 * @see Decoder
 */
public abstract class BinaryEncoder extends Encoder {

  @Override
  public void writeNull() throws IOException {}

  @Override
  public void writeString(Utf8 utf8) throws IOException {
    this.writeBytes(utf8.getBytes(), 0, utf8.getByteLength());
  }

  @Override
  public void writeString(String string) throws IOException {
    if (0 == string.length()) {
      writeZero();
      return;
    }
    byte[] bytes = string.getBytes("UTF-8");
    writeInt(bytes.length);
    writeFixed(bytes, 0, bytes.length);
  }

  @Override
  public void writeBytes(ByteBuffer bytes) throws IOException {
    int len = bytes.limit() - bytes.position();
    if (0 == len) {
      writeZero();
    } else {
      writeInt(len);
      writeFixed(bytes);
    }
  }

  @Override
  public void writeBytes(byte[] bytes, int start, int len) throws IOException {
    if (0 == len) {
      writeZero();
      return;
    }
    this.writeInt(len);
    this.writeFixed(bytes, start, len);
  }

  @Override
  public void writeEnum(int e) throws IOException {
    this.writeInt(e);
  }

  @Override
  public void writeArrayStart() throws IOException {}

  @Override
  public void setItemCount(long itemCount) throws IOException {
    if (itemCount > 0) {
      this.writeLong(itemCount);
    }
  }

  @Override
  public void startItem() throws IOException {}

  @Override
  public void writeArrayEnd() throws IOException {
    writeZero();
  }

  @Override
  public void writeMapStart() throws IOException {}

  @Override
  public void writeMapEnd() throws IOException {
    writeZero();
  }

  @Override
  public void writeIndex(int unionIndex) throws IOException {
    writeInt(unionIndex);
  }

  /** Write a zero byte to the underlying output. **/
  protected abstract void writeZero() throws IOException;

  /**
   * Returns the number of bytes currently buffered by this encoder. If this
   * Encoder does not buffer, this will always return zero.
   *

   * Call {@link #flush()} to empty the buffer to the underlying output.
   */
  public abstract int bytesBuffered();

}