|
|
| (17 intermediate revisions by 2 users not shown) |
| Line 1: |
Line 1: |
| − | {{#tag:html|
| + | <noinclude> |
| − | <style> | + | {{widget:Extensions-in-open-csp}} |
| − | | + | </noinclude><includeonly> |
| − | .wrapper {
| + | <!--{if (isset($type) && $type != "")}--> |
| − | margin: 0 auto;
| + | <!--{if ($type==='extension')}--><img src="/images/ocsp/extension.svg" style="width: 25px; margin-right:5px;" /><!--{/if}--> |
| − | padding: 40px;
| + | <!--{if ($type==='skin')}--><img src="/images/ocsp/skin.svg" style="width: 25px; margin-right:5px;" /><!--{/if}--> |
| − | max-width: 800px;
| + | <!--{if ($type==='ws')}--><img src="/images/ocsp/ws-extension.svg" style="width: 25px; margin-right:5px;" /><!--{/if}--> |
| − | }
| + | <!--{else}--><img src="/images/ocsp/extension.svg" style="width: 25px; margin-right:5px;" /><!--{/if}--> |
| − | | + | </includeonly> |
| − | .table {
| |
| − | margin: 0 0 40px 0;
| |
| − | width: 100%;
| |
| − | box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
| |
| − | display: table;
| |
| − | }
| |
| − | @media screen and (max-width: 580px) {
| |
| − | .table {
| |
| − | display: block;
| |
| − | }
| |
| − | }
| |
| − | | |
| − | .row {
| |
| − | display: table-row;
| |
| − | background: #f6f6f6;
| |
| − | } | |
| − | .row:nth-of-type(odd) {
| |
| − | background: #e9e9e9;
| |
| − | } | |
| − | .row.header {
| |
| − | font-weight: 900;
| |
| − | color: #ffffff;
| |
| − | background: #ea6153;
| |
| − | }
| |
| − | .row.green {
| |
| − | background: #27ae60;
| |
| − | }
| |
| − | .row.blue {
| |
| − | background: #2980b9;
| |
| − | }
| |
| − | @media screen and (max-width: 580px) {
| |
| − | .row {
| |
| − | padding: 14px 0 7px;
| |
| − | display: block;
| |
| − | }
| |
| − | .row.header {
| |
| − | padding: 0;
| |
| − | height: 6px;
| |
| − | }
| |
| − | .row.header .cell {
| |
| − | display: none;
| |
| − | }
| |
| − | .row .cell {
| |
| − | margin-bottom: 10px;
| |
| − | }
| |
| − | .row .cell:before {
| |
| − | margin-bottom: 3px;
| |
| − | content: attr(data-title);
| |
| − | min-width: 98px;
| |
| − | font-size: 10px;
| |
| − | line-height: 10px;
| |
| − | font-weight: bold;
| |
| − | text-transform: uppercase;
| |
| − | color: #969696;
| |
| − | display: block;
| |
| − | }
| |
| − | }
| |
| − | | |
| − | .cell {
| |
| − | padding: 6px 12px;
| |
| − | display: table-cell;
| |
| − | }
| |
| − | @media screen and (max-width: 580px) {
| |
| − | .cell {
| |
| − | padding: 2px 16px;
| |
| − | display: block;
| |
| − | }
| |
| − | }
| |
| − | </style>
| |
| − | }}
| |
| − | | |
| − | <div class="wrapper">
| |
| − |
| |
| − | <div class="table">
| |
| − |
| |
| − | <div class="row header">
| |
| − | <div class="cell">
| |
| − | Name
| |
| − | </div>
| |
| − | <div class="cell">
| |
| − | Age
| |
| − | </div>
| |
| − | <div class="cell">
| |
| − | Occupation
| |
| − | </div>
| |
| − | <div class="cell">
| |
| − | Location
| |
| − | </div>
| |
| − | </div>
| |
| − |
| |
| − | <div class="row">
| |
| − | <div class="cell" data-title="Name">
| |
| − | Luke Peters
| |
| − | </div>
| |
| − | <div class="cell" data-title="Age">
| |
| − | 25
| |
| − | </div>
| |
| − | <div class="cell" data-title="Occupation">
| |
| − | Freelance Web Developer
| |
| − | </div>
| |
| − | <div class="cell" data-title="Location">
| |
| − | Brookline, MA
| |
| − | </div>
| |
| − | </div>
| |
| − |
| |
| − | <div class="row">
| |
| − | <div class="cell" data-title="Name">
| |
| − | Joseph Smith
| |
| − | </div>
| |
| − | <div class="cell" data-title="Age">
| |
| − | 27
| |
| − | </div>
| |
| − | <div class="cell" data-title="Occupation">
| |
| − | Project Manager
| |
| − | </div>
| |
| − | <div class="cell" data-title="Location">
| |
| − | Somerville, MA
| |
| − | </div>
| |
| − | </div>
| |
| − |
| |
| − | <div class="row">
| |
| − | <div class="cell" data-title="Name">
| |
| − | Maxwell Johnson
| |
| − | </div>
| |
| − | <div class="cell" data-title="Age">
| |
| − | 26
| |
| − | </div>
| |
| − | <div class="cell" data-title="Occupation">
| |
| − | UX Architect & Designer
| |
| − | </div>
| |
| − | <div class="cell" data-title="Location">
| |
| − | Arlington, MA
| |
| − | </div>
| |
| − | </div>
| |
| − |
| |
| − | <div class="row">
| |
| − | <div class="cell" data-title="Name">
| |
| − | Harry Harrison
| |
| − | </div>
| |
| − | <div class="cell" data-title="Age">
| |
| − | 25
| |
| − | </div>
| |
| − | <div class="cell" data-title="Occupation">
| |
| − | Front-End Developer
| |
| − | </div>
| |
| − | <div class="cell" data-title="Location">
| |
| − | Boston, MA
| |
| − | </div>
| |
| − | </div>
| |
| − |
| |
| − | </div>
| |
| − |
| |
| − | <div class="table">
| |
| − |
| |
| − | <div class="row header green">
| |
| − | <div class="cell">
| |
| − | Product
| |
| − | </div>
| |
| − | <div class="cell">
| |
| − | Unit Price
| |
| − | </div>
| |
| − | <div class="cell">
| |
| − | Quantity
| |
| − | </div>
| |
| − | <div class="cell">
| |
| − | Date Sold
| |
| − | </div>
| |
| − | <div class="cell">
| |
| − | Status
| |
| − | </div>
| |
| − | </div>
| |
| − |
| |
| − | <div class="row">
| |
| − | <div class="cell" data-title="Product">
| |
| − | Solid oak work table
| |
| − | </div>
| |
| − | <div class="cell" data-title="Unit Price">
| |
| − | $800
| |
| − | </div>
| |
| − | <div class="cell" data-title="Quantity">
| |
| − | 10
| |
| − | </div>
| |
| − | <div class="cell" data-title="Date Sold">
| |
| − | 03/15/2014
| |
| − | </div>
| |
| − | <div class="cell" data-title="Status">
| |
| − | Waiting for Pickup
| |
| − | </div>
| |
| − | </div>
| |
| − |
| |
| − | <div class="row">
| |
| − | <div class="cell" data-title="Product">
| |
| − | Leather iPhone wallet
| |
| − | </div>
| |
| − | <div class="cell" data-title="Unit Price">
| |
| − | $45
| |
| − | </div>
| |
| − | <div class="cell" data-title="Quantity">
| |
| − | 120
| |
| − | </div>
| |
| − | <div class="cell" data-title="Date Sold">
| |
| − | 02/28/2014
| |
| − | </div>
| |
| − | <div class="cell" data-title="Status">
| |
| − | In Transit
| |
| − | </div>
| |
| − | </div>
| |
| − |
| |
| − | <div class="row">
| |
| − | <div class="cell" data-title="Product">
| |
| − | 27" Apple Thunderbolt displays
| |
| − | </div>
| |
| − | <div class="cell" data-title="Unit Price">
| |
| − | $1000
| |
| − | </div>
| |
| − | <div class="cell" data-title="Quantity">
| |
| − | 25
| |
| − | </div>
| |
| − | <div class="cell" data-title="Date Sold">
| |
| − | 02/10/2014
| |
| − | </div>
| |
| − | <div class="cell" data-title="Status">
| |
| − | Delivered
| |
| − | </div>
| |
| − | </div>
| |
| − |
| |
| − | <div class="row">
| |
| − | <div class="cell" data-title="Product">
| |
| − | Bose studio headphones
| |
| − | </div>
| |
| − | <div class="cell" data-title="Unit Price">
| |
| − | $60
| |
| − | </div>
| |
| − | <div class="cell" data-title="Quantity">
| |
| − | 90
| |
| − | </div>
| |
| − | <div class="cell" data-title="Date Sold">
| |
| − | 01/14/2014
| |
| − | </div>
| |
| − | <div class="cell" data-title="Status">
| |
| − | Delivered
| |
| − | </div>
| |
| − | </div>
| |
| − |
| |
| − | </div>
| |
| − |
| |
| − | <div class="table">
| |
| − |
| |
| − | <div class="row header blue">
| |
| − | <div class="cell">
| |
| − | Username
| |
| − | </div>
| |
| − | <div class="cell">
| |
| − | Email
| |
| − | </div>
| |
| − | <div class="cell">
| |
| − | Password
| |
| − | </div>
| |
| − | <div class="cell">
| |
| − | Active
| |
| − | </div>
| |
| − | </div>
| |
| − |
| |
| − | <div class="row">
| |
| − | <div class="cell" data-title="Username">
| |
| − | ninjalug
| |
| − | </div>
| |
| − | <div class="cell" data-title="Email">
| |
| − | misterninja@hotmail.com
| |
| − | </div>
| |
| − | <div class="cell" data-title="Password">
| |
| − | ************
| |
| − | </div>
| |
| − | <div class="cell" data-title="Active">
| |
| − | Yes
| |
| − | </div>
| |
| − | </div>
| |
| − |
| |
| − | <div class="row">
| |
| − | <div class="cell" data-title="Username">
| |
| − | jsmith41
| |
| − | </div>
| |
| − | <div class="cell" data-title="Email">
| |
| − | joseph.smith@gmail.com
| |
| − | </div>
| |
| − | <div class="cell" data-title="Password">
| |
| − | ************
| |
| − | </div>
| |
| − | <div class="cell" data-title="Active">
| |
| − | No
| |
| − | </div>
| |
| − | </div>
| |
| − |
| |
| − | <div class="row">
| |
| − | <div class="cell" data-title="Username">
| |
| − | 1337hax0r15
| |
| − | </div>
| |
| − | <div class="cell" data-title="Email">
| |
| − | hackerdude1000@aol.com
| |
| − | </div>
| |
| − | <div class="cell" data-title="Password">
| |
| − | ************
| |
| − | </div>
| |
| − | <div class="cell" data-title="Active">
| |
| − | Yes
| |
| − | </div>
| |
| − | </div>
| |
| − |
| |
| − | <div class="row">
| |
| − | <div class="cell" data-title="Username">
| |
| − | hairyharry19
| |
| − | </div>
| |
| − | <div class="cell" data-title="Email">
| |
| − | harryharry@gmail.com
| |
| − | </div>
| |
| − | <div class="cell" data-title="Password">
| |
| − | ************
| |
| − | </div>
| |
| − | <div class="cell" data-title="Active">
| |
| − | Yes
| |
| − | </div>
| |
| − | </div>
| |
| − |
| |
| − | </div>
| |
| − |
| |
| − | </div> | |
