QVXP Components

A library of copy and paste components for prototyping.

Building Blocks

Accordion

This is an accordion component.

EXAMPLE:

Inside content of accordion
Inside content of accordion

HTML:

<div class="accordion" id="accordion">
  <div class="accordion-group">
    <div class="accordion-blade">
      <div class="accordion-heading">
        <a class="accordion-toggle collapsed" data-parent="#accordion" href="#insideContent">
          <div class="row-fluid">
            <div class="span4 accordionLabel"><h2><i class="icon-arrow-rightImg"></i>Accordion Label</h2></div>
          </div>
        </a>
      </div>
      <div id="insideContent" class="accordion-body collapse">
        <div class="accordionContents">
          <div class="row-fluid">
            <div class="span4 accordionLabel" style="padding-left:15px">Inside content of accordion</div>
            <div class="span2"></div>
            <div class="span2"></div>
            <div class="span2"></div>
            <div class="span2"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Account Bar

This is an account bar component.

EXAMPLE:

HTML:

<div id="accountBar" class="navbar navbar-inverse accountBarTab">
  <div class="navbar-inner">
    <button type="button" class="closeBtn"></button>
    <div class="navbar-responsive-collapse in">
      <ul class="nav userInfo">
        <li><span class="userInfo-customerName"><small>Customer Name</small>MIGUEL TEST BAN</span></li>
        <li><span class="userInfo-financialRespParty"><small>Billing Name</small>MIGUEL TEST BAN</span></li>
        <li><span class="userInfo-account"><small>Account</small>834 412 798</span></li>
        <li><span class="userInfo-customerTenure"><small>Tenure</small>4y 4m 19d</span></li>
        <div class="nav pull-right" style="display: none"></div>
      </ul>
    </div>
  </div>
</div>


Buttons

Call to Action: Primary Button

This is a primary button component.

EXAMPLE:

HTML:

<button class="btn btn-primary">Your primary button name goes here.</button>

Call to Action: Secondary Button

This is a secondary button component.

EXAMPLE:

HTML:

<button class="btn btn-secondary">Your secondary button name goes here.</button>

Call to Action: Disabled Button

This is a disabled button component.

EXAMPLE:

HTML:

<button class="btn btn-primary disabled">Your disabled button name goes here.</button>

Tabular Button

This is a tabular button component.

EXAMPLE:

HTML:

<button class="btn btn-secondary tmo-tabular-btn">Your tabular button name goes here.</button>

Data Table

This is a data table component.

EXAMPLE:

Select to Upgrade Mobile Number Device Make / Model Trade In Estimate Offers

MIGUEL 1. TEST BAN

813-508-8154

 INVALID TAC INVALID TAC N/A

MIGUEL C. TEST BAN

813-679-6722

 INVALID TAC INVALID TAC N/A

MIGUEL B. TEST BAN

813-966-0700

 INVALID TAC INVALID TAC N/A

HTML:

<div class="span12 tmo-margin-left-0">
  <table cellpadding="0" cellspacing="0" border="0" class="table table-bordered tmo-table-v1 regularUpgradeTable" id="regularUpgradeEligibilityTable">
    <thead>
      <tr>
        <th class="center-align width15">Select to Upgrade</th>
        <th class="left-align width20">Mobile Number</th>
        <th class="left-align width30">Device Make / Model</th>
        <th class="left-align width20">Trade In Estimate</th>
        <th class="left-align width15">Offers</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td class="center-align">
          <label class="checkbox custom-label">
            <input type="checkbox" style="position:absolute; left:-9999px;"><span class="custom-check"></span>
          </label>
        </td>
        <td class="left-align">
          <p>MIGUEL 1. TEST BAN</p>
          <p>813-508-8154</p>
        </td>
        <td class="left-align"><span>INVALID TAC INVALID TAC</span></td>
        <td class="right-align"><span>N/A</span></td>
        <td class="left-align"></td>
      </tr>
      <tr>
        <td class="center-align">
          <label class="checkbox custom-label">
            <input type="checkbox" style="position:absolute; left:-9999px;"><span class="custom-check"></span>
          </label>
        </td>
        <td class="left-align">
          <p>MIGUEL C. TEST BAN</p>
          <p>813-679-6722</p>
        </td>
        <td class="left-align"><span>INVALID TAC INVALID TAC</span></td>
        <td class="right-align"><span>N/A</span></td>
        <td class="left-align"></td>
      </tr>
      <tr>
        <td class="center-align">
          <label class="checkbox custom-label">
            <input type="checkbox" style="position:absolute; left:-9999px;"><span class="custom-check"></span>
          </label>
        </td>
        <td class="left-align">
          <p>MIGUEL B. TEST BAN</p>
          <p>813-966-0700</p>
        </td>
        <td class="left-align"><span>INVALID TAC INVALID TAC</span></td>
        <td class="right-align"><span>N/A</span></td>
        <td class="left-align"></td>
      </tr>
    </tbody>
  </table>
</div>

Data Table Filter Drawers

This is a data table header with filter drawer components.

EXAMPLE:

Mobile Number /
Device Description		 Pickup Store ID
Date Placed /
Order Number		 Status
Type

HTML:

<table class="table table-bordered tmo-scrollable-table" id="table-multiselect">
  <thead>
    <tr>
      <th style="width: 337.5px;">Mobile Number /<br> Device Description</th>
      <th style="width: 168.75px;"><span class="pull-left">Pickup Store ID</span>
        <div class="dropdown filter-dropdown pull-right filter-store" data-label="pickupStoreId">
          <i data-toggle="dropdown" class="dropdown-toggle icon-filter pull-right"></i>
          <ul class="dropdown-menu" role="menu" aria-labelledby="drop"><li><a role="menuitem" href="javascript:void(0)">All</a></li></ul>
        </div>
      </th>
      <th style="width: 281.25px;">Date Placed /<br> Order Number<a class="tmo-icon-sort-arrow-up pull-right sort-by-date"></a></th>
      <th style="width: 112.5px;"><span class="pull-left">Status</span>
        <div class="dropdown filter-dropdown pull-right filter-status" data-label="statusDesc"><i data-toggle="dropdown" class="dropdown-toggle icon-filter pull-right"></i>
          <ul class="dropdown-menu" role="menu" aria-labelledby="drop"><li><a role="menuitem" href="javascript:void(0)">All</a></li></ul>
        </div>
      </th>
      <th style="width: 225px;"><span class="pull-left">Type</span>
        <div class="dropdown filter-dropdown pull-right filter-type" data-label="orderTypeVersion"><i data-toggle="dropdown" class="dropdown-toggle icon-filter pull-right"></i>
          <ul class="dropdown-menu" role="menu" aria-labelledby="drop"><li><a role="menuitem" href="javascript:void(0)">All</a></li></ul>
        </div>
      </th>
    </tr>
  </thead>
</table>

Information Block

This is an information block component.

EXAMPLE:

Status

Primary Account Holder

Mobile Number:
XXX-XXX-XXXX

Line Status:
Active

HTML:

<div class="tmo-info-block">
  <h2>Status</h2>
  <h3>Primary Account Holder</h3>
  <p>Mobile Number:<br/>XXX-XXX-XXXX</p>
  <p>Line Status:<br/>Active</p>
</div>

Selectors

Date Picker

This is a calendar drop down component to select a date.

EXAMPLE:

HTML:

<input type="text" class="input-medium datepicker tmo-input-text" />

<script type="text/javascript">
  $('.datepicker').datepicker()
  $("#ui-datepicker-div").addClass("tmo-ui-datepicker");
</script>

Checkbox

This is a checkbox component.

EXAMPLE:

HTML:

<label class="checkbox custom-label" onClick="">
  <input type="checkbox" style="position:absolute; left:-9999px;"><span class="custom-check"></span>
</label>


Radio Button

This is a radio button component.

EXAMPLE:

HTML:

<label class="radio custom-label" onclick="">
  <input type="radio" style="position: absolute; left: -9999px;">
  <span class="custom-radio checked"></span>
</label>

Product Selection Button: Primary

This is a primary product selection button component.

EXAMPLE:

HTML:

<button class="btn btn-primary primaryProductSelectionBtn" type="button">
  <span class="content-left method">2.5GB Data w/ Hotspot</span>
  <span class="price">$10.00</span>
</button>

Product Selection Button: Secondary

This is a secondary product selection button component.

EXAMPLE:

HTML:

<button class="btn btn-sec primaryProductSelectionBtn" type="button">
  <span class="content-left method">2.5GB Data w/ Hotspot</span>
  <span class="price">$10.00</span>
</button>

Slider

This is a slider component.

EXAMPLE:

14 Days
90 Days
6 Months

HTML:

<div class="row-fluid">
  <div class="slider slider-horizontal">
    <div class="slider-label">
      <div class="mini-cell start">14 Days</div>
      <div class="mini-cell mid">90 Days</div>
      <div class="mini-cell end">6 Months</div>
    </div>
  </div>
</div>
<div class="row-fluid">
  <input type="range" min="1" value="1" max="3" step="1">
</div>

Custom CSS:

.mini-cell.start, .mini-cell.mid, .mini-cell.end {
  width: 32%;
  display: inline-block;
}
.start {
  text-align: left;
}
.mid {
  text-align: center;
}
.end {
  text-align: right;
}
.slider.slider-horizontal {
  height: 20px;
}
.slider-label {
  width: 250px;
}
input[type=range] {
  -webkit-appearance: none;
  width: 210px;
  margin-left: 20px;
  margin-top: 10px
}
input[type=range]::-webkit-slider-runnable-track {
  width: 250px;
  height: 3px;
  background: #ddd;
  border: none;
  border-radius: 3px;
}
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  border: none;
  height: 16px;
  width: 16px;
  border-radius: 50%;
  background: #e20074;
  margin-top: -4px;
}
input[type=range]:focus {
  outline: none;
}
input[type=range]:hover {
  cursor: pointer;
}
input[type=range]:focus::-webkit-slider-runnable-track {
  background: #ccc;
}
input[type=range]::-moz-range-track {
  width: 250px;
  height: 3px;
  background: #ddd;
  border: none;
  border-radius: 3px;
}
input[type=range]::-moz-range-thumb {
  border: none;
  height: 16px;
  width: 16px;
  border-radius: 50%;
  background: #e20074;
}
input[type=range]:-moz-focusring{
  outline: 1px solid white;
  outline-offset: -1px;
}
input[type=range]::-ms-track {
  width: 250px;
  height: 3px;
}
input[type=range]::-ms-fill-lower {
  background: #777;
  border-radius: 10px;
}
input[type=range]::-ms-fill-upper {
  background: #ddd;
  border-radius: 10px;
}
input[type=range]::-ms-thumb {
  border: none;
  height: 16px;
  width: 16px;
  border-radius: 50%;
  background: #e20074;
}
input[type=range]:focus::-ms-fill-lower {
  background: #888;
}
input[type=range]:focus::-ms-fill-upper {
  background: #ccc;
}

Toggle

This is a toggle component. (Interaction code - under construction)

EXAMPLE:

HTML:

<label class="toggle">
  <p class="pull-left">Off</p>
  <div class="toggle_control pull-left toggleHeadOff" onClick=""></div>
  <p>On</p>
</label>

Custom CSS:

.toggle_control {
  margin-left: 5px;
  margin-right: 5px;
  width: 40px;
  height: 20px;
  display: block;
  border: 2px solid #CCCCCC;
  border-radius: 20px;
  background-color: #CCCCCC;
}
.toggle_control:after {
  content: "";
  width: 20px;
  height: 20px;
  display: block;
  background-color: #FFFFFF;
  border-radius: 50%;
  -webkit-box-shadow: 1px 1px 1px 1px rgba(0,0,0,0.2);
  -moz-box-shadow: 1px 1px 1px 1px rgba(0,0,0,0.2);
  box-shadow: 1px 1px 1px 1px rgba(0,0,0,0.2);
}
.toggle_control.checked {
  border: 2px solid #008CA7;
  background-color: #008CA7;	
}
.toggle_control.checked:after {
  margin-left: 20px;
}

Text Fields

Text Field: Default

This is a default text field component.

EXAMPLE:

HTML:

<input type="text" placeholder="Enter text here." class="form-control tmo-input-medium tmo-clearable alpha-numeric" maxlength="25">

Text Area: Default

This is a default text area component.

EXAMPLE:

HTML:

<form>
  <textarea class="form-control tmo-input-medium alpha-numeric" placeholder="Enter text here." rows="10" cols="30"></textarea>
</form>

Tooltip

This is a tooltip component.

EXAMPLE:

Tooltip label

HTML:

<div class="row-fluid">
  <p>Tooltip label <span id="ttipIcon" class="tmo-icon-tooltip"></span>
    <div class="tooltip fade bottom in hidden" style="left: 5.38rem;">
      <div class="tooltip-arrow"></div>
      <div class="tooltip-inner">
        <p>Content inside tooltip.</p>
      </div>
    </div>
  </p>
</div>

Custom CSS:

#ttipIcon:hover {
  cursor: pointer;
}

Message Windows

Information Message Modal

This is an information message modal component.

EXAMPLE:

Information Message Modal

The content for the information message modal goes here.


HTML:

<div class="modal hide fade tmo-message-window tmo-information comfirmation-class in" aria-hidden="true" style="display: none;">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true" data-close="#systemError"></button>
    <h1><i class="tmo-icon-window-status"></i>  Information Message Modal</h1>
  </div>
  <div class="modal-body">
    <p>The content for the information message modal goes here.</p>
  </div>
  <div class="modal-footer">
    <button class="btn btn-primary" data-dismiss="modal">Close</button>
  </div>
</div>

Confirmation Message Modal

This is a confirmation message modal component.

EXAMPLE:

Confirmation Message Modal

The content for the confirmation message modal goes here.


HTML:

<div class="modal hide fade tmo-message-window tmo-confirmation comfirmation-class in" aria-hidden="true" style="display: none;">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true" data-close="#systemError"></button>
    <h1><i class="tmo-icon-window-status"></i>  Confirmation Message Modal</h1>
  </div>
  <div class="modal-body">
    <p>The content for the confirmation message modal goes here.</p>
  </div>
  <div class="modal-footer">
    <button class="btn btn-primary" data-dismiss="modal">Close</button>
  </div>
</div>

Warning Message Modal

This is a warning message modal component.

EXAMPLE:

Warning Message Modal

The content for the warning message modal goes here.


HTML:

<div class="modal hide fade tmo-message-window tmo-warning comfirmation-class in" aria-hidden="true" style="display: none;">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true" data-close="#systemError"></button>
    <h1><i class="tmo-icon-window-status"></i>  Warning Message Modal</h1>
  </div>
  <div class="modal-body">
    <p>The content for the warning message modal goes here.</p>
  </div>
  <div class="modal-footer">
    <button class="btn pull-left" data-dismiss="modal">Cancel</button>
    <button class="btn btn-primary" data-dismiss="modal">Continue</button>
  </div>
</div>

User Error Message Modal

This is a user error message modal component.

EXAMPLE:

User Error Message Modal

The content for the user error message modal goes here.


HTML:

<div class="modal hide fade tmo-message-window tmo-user-error error-class in" aria-hidden="true" style="display: none;">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true" data-close="#systemError"></button>
    <h1><i class="tmo-icon-window-status"></i>  User Error Message Modal</h1>
  </div>
  <div class="modal-body">
    <p>The content for the user error message modal goes here.</p>
  </div>
  <div class="modal-footer">
    <button class="btn btn-primary" data-dismiss="modal">Close</button>
  </div>
</div>

System Error Message Modal

This is a system error message modal component.

EXAMPLE:

System Error Message Modal

The content for the system error message modal goes here.


HTML:

<div class="modal hide fade tmo-message-window tmo-system-error error-class in" aria-hidden="true" style="display: none;">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true" data-close="#systemError"></button>
    <h1><i class="tmo-icon-window-status"></i>  System Error Message Modal</h1>
  </div>
  <div class="modal-body">
    <p>The content for the system error message modal goes here.</p>
  </div>
  <div class="modal-footer">
    <button class="btn btn-primary" data-dismiss="modal">Close</button>
  </div>
</div>

Style

Notification Messages

Information Message

This is an information message component.

EXAMPLE:

Information message goes here.

HTML:

<div class="span12 tmo-margin-left-5">
  <i class="tmo-icon-info"></i>
  <span>Information message goes here.</span>
</div>

Confirmation Message

This is a confirmation message component.

EXAMPLE:

Confirmation message goes here.

HTML:

<div class="span12 tmo-margin-left-5">
  <i class="tmo-icon-success"></i>
  <span>Confirmation message goes here.</span>
</div>

Warning Message

This is a warning message component.

EXAMPLE:

Warning message goes here.

HTML:

<div class="span12 tmo-margin-left-5">
  <i class="tmo-icon-warning"></i>
  <span>Warning message goes here.</span>
</div>

User Error Message

This is a user error message component.

EXAMPLE:

User Error message goes here.

HTML:

<div class="span12 tmo-margin-left-5 red">
  <i class="tmo-icon-error"></i>
  <span>Use error message goes here.</span>
</div>

System Error Message

This is a system error message component.

EXAMPLE:

System Error message goes here.

HTML:

<div class="span12 tmo-margin-left-5 red">
  <i class="tmo-icon-system-error"></i>
  <span>System error message goes here.</span>
</div>

Typography

Header 1

This is a header 1 component.

EXAMPLE:

Header 1

HTML:

<h1>Your header 1 goes here.</h1>

Header 2

This is a header 2 component.

EXAMPLE:

Header 2

HTML:

<h2>Your header 2 goes here.</h2>

Header 3

This is a header 3 component.

EXAMPLE:

Header 3

HTML:

<h3>Your header 3 goes here.</h3>

Body Text

This is a body text component.

EXAMPLE:

Lorem ipsum dolor sit amet, cosectetur adipiscing elit...

HTML:

<p>Your body text goes here.</p>