cssAudio - ActiveCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - Activehtmlicon-personicon-teamoctocatspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              <html>

<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css'>

<body>
  <div class="container">
    <div class="row">
      <div class="col-xs-12">
        <i class="icon-spinner5 loading"></i> <span>Saving&hellip;</span>
        <i class="icon-spinner5 loading"></i> <span>Loading&hellip;</span>
      </div>
      <div class="col-xs-12">
        This is the structure for a checkbox:
        <input type="checkbox" id="check" checked />
        <label for="check"><span></span>Example</label>
        <!-- 
        Input must come before its label. Label needs "for" attribute. Input needs matching ID. Label needs an empty child span.
        -->
        <input type="checkbox" id="requiredExample" checked />
        <label for="requiredExample"><span class="alert-input"></span>This is a required column example.</label>
      </div>
      <div class="col-xs-12">
        This is the structure for a radio:
        <input type="radio" name="set1" id="radio1" checked />
        <label for="radio1"><span></span>Example 1</label>
        <input type="radio" name="set1" id="radio2" />
        <label for="radio2"><span></span>Example 2</label>
        <!-- 
        Input must come before its label. Label needs "for" attribute. Input needs matching ID. Label needs an empty child span.
        -->
      </div>
      <div class="col-xs-12">
        Icons:
        <i class="icon-pencil2 edit-txt"></i>
        <i class="icon-checkmark edit-txt"></i>
        <i class="icon-table2 edit-txt"></i>
        <i class="icon-truck"></i>
        <i class="icon-coin"></i>
        <i class="icon-undo"></i>
        <i class="icon-file4"></i>
        <i class="icon-truck partialIcon"></i>
        <i class="icon-coin partialIcon"></i>
        <i class="icon-forward"></i>
      </div>
    </div>
    <div class="row">
      <div class="col-xs-12">
        Sprite:
        <span class="ui-gradient"></span>
        <span class="ui-pagFirst"></span>
        <span class="ui-pagPrev"></span>
        <span class="ui-pagNext"></span>
        <span class="ui-pagLast"></span>
        <span class="ui-cursorAdjust"></span>
        <span class="ui-cursorPicker"></span>
        <span class="ui-cursorMove"></span>
        <span class="ui-gridSelectDescend"></span>
        <span class="ui-gridSelectAscend"></span>
      </div>
    </div>
    <div class="row">
      <div class="col-xs-6">
        Alerts:
        <div class="approve-notify neut-border">
          <p>
            <i class="icon-happy"></i> You are so awesome! Wow!
          </p>
        </div>
        <div class="alert-notify neut-border">
          <p>
            <i class="icon-sad"></i> You are not! Go away!
          </p>
        </div>
        <div class="info-notify neut-border">
          <p>
            <i class="icon-neutral"></i> You are okay. I don't care either way.
          </p>
        </div>
      </div>
      <div class="col-xs-6">
        Pop ups:
        <div class="pop-contain">
          <i class="icon-minus pop-close"></i>
          <div class="alert-notify neut-border">
            <p><i class="icon-sad"></i> Order Export Error</p>
          </div>
          <p>Please mark all/partial orders from grid to export.</p>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-xs-4">
        <div class="order-border">
          <p class="order-txt">Order Elements</p>
          <input type="submit" class="order-btn bttn" />
          <span class="order-bg">Text on a background</span>
          <table class="order">
            <tr>
              <th>Order Table Header</th>
            </tr>
            <tr>
              <td>
                This is a dummy table with the class "order"
              </td>
            </tr>
          </table>
        </div>
      </div>
      <div class="col-xs-4">
        <div class="neut-border">
          <p class="neut-txt">Neutral Elements</p>
          <input type="submit" class="neut-btn bttn" />
          <span class="neut-bg">Text on a background</span>
          <table class="neut">
            <tr>
              <th>Neutral Table Header</th>
            </tr>
            <tr>
              <td>
                This is a dummy table with the class "neut"
              </td>
            </tr>
          </table>
        </div>
      </div>
      <div class="col-xs-4">
        <div class="messages-border">
          <p class="messages-txt">Messages Elements</p>
          <input type="submit" class="messages-btn bttn" />
          <span class="messages-bg">Text on a background</span>
          <table class="messages">
            <tr>
              <th>Messages Table Header</th>
            </tr>
            <tr>
              <td>
                This is a dummy table with the class "messages"
              </td>
            </tr>
          </table>
        </div>
      </div>
      <div class="col-xs-4">
        <div class="edit-border">
          <p class="edit-txt">Edit Elements</p>
          <input type="submit" class="edit-btn bttn" />
          <span class="edit-bg">Text on a background</span>
          <table class="edit">
            <tr>
              <th>Edit Table Header</th>
            </tr>
            <tr>
              <td>
                This is a dummy table with the class "edit"
              </td>
            </tr>
          </table>
        </div>
      </div>
      <div class="col-xs-4">
        <div class="alert-border">
          <p class="alert-txt">Alert Elements</p>
          <input type="submit" class="alert-btn bttn" />
          <span class="alert-bg">Text on a background</span>
          <input type="checkbox" id="alertExample" checked />
          <label for="alertExample"><span class="alert-input"></span>Example</label>
          <table class="alert">
            <tr>
              <th>Alert Table Header</th>
            </tr>
            <tr>
              <td>
                This is a dummy table with the class "alert"
              </td>
            </tr>
          </table>
        </div>
      </div>
      <div class="col-xs-4">
        <div class="approve-border">
          <p class="approve-txt">Approve Elements</p>
          <input type="submit" class="approve-btn bttn" />
          <span class="approve-bg">Text on a background</span>
          <input type="checkbox" id="approveExample" checked />
          <label for="approveExample"><span class="approve-input"></span>Example</label>
          <table class="approve">
            <tr>
              <th>Approve Table Header</th>
            </tr>
            <tr>
              <td>
                This is a dummy table with the class "approve"
              </td>
            </tr>
          </table>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-xs-12">
        <ul class="functionRow">
          <li>
            <a class="bttn neut-btn tooltip-bttn" data-toggle="description" data-placement="right" title="This is a desc of the key.">Hot Key Item One</a>
            <input type="text" placeholder="Hot Key Item One" />
            <div class="validate">This is not valid.</div>
          </li>
          <li>
            <a class="bttn neut-btn tooltip-bttn" data-toggle="description" data-placement="right" title="This is a desc of the key.">Hot Key Item One</a>
            <input type="text" placeholder="Hot Key Item One" />
          </li>
          <li>
            <a class="bttn neut-btn tooltip-bttn" data-toggle="description" data-placement="right" title="This is a desc of the key.">Hot Key Item Two</a>
            <div class="inputGroup">
              <input type="text" placeholder="Hot Key Item Two" class="barInput" />
              <input type="submit" value="Go" class="barInput bttn neut-btn">
            </div>
          </li>
          <li><a class="bttn neut-btn tooltip-bttn" data-toggle="description" data-placement="right" title="This is a desc of the key.">Hot Key Item Three</a>
            <select name="hkitem3" form="hkitem3">
              <option value="opt1">Option 1</option>
              <option value="opt2">Option 2</option>
              <option value="opt3">Option 3</option>
            </select>
          </li>
        </ul>
      </div>
    </div>
    <div class="row">
      <div class="col-xs-12">
        <input type="checkbox" value="show" id="desc">
        <label for="desc"><span></span>Show Descriptions</label>
      </div>
    </div>
    <div class="row">
      <div class="col-xs-12">
        <div class="filter">
          <div class="col-xs-2">
            Custom Filter:
            <i class="icon-plus approveIcon"></i>
            <i class="icon-minus removeIcon"></i>
          </div>
          <div class="col-xs-10">
            <input placeholder="Display Name">
            <input placeholder="Action Id">
            <select name="cfitem1" form="cfitem1" id="cfitem1">
              <option disabled selected value="default">Choose Action</option>
              <option value="opt1">Change</option>
              <option value="opt2">Add</option>
              <option value="opt3">Remove</option>
            </select>
            <div id="cfitem2" style="display: none;">
              current values of
              <select name="cfitem2" form="cfitem2">
                <option disabled selected value="default">Grid Item</option>
                <option value="opt1">Customer Email</option>
                <option value="opt2">Batch Number</option>
                <option value="opt3">CSR Agent</option>
              </select>
            </div>
            <div id="cfitem3" style="display: none;">
              to
              <input type="text" placeholder="Changes depending on options">
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-xs-12">
        <table class="order">
          <thead>
            <tr>
              <th colspan="3">
                <div class="inputGroup">
                  <select name="otaction" form="otaction">
                    <option disabled selected>Action</option>
                    <option value="opt1">Update Status</option>
                    <option value="opt2">Put on Hold</option>
                    <option value="opt3">Update CSR Agent</option>
                  </select>
                  <input type="submit" value="Update Selected" class="bttn order-btn">
                </div>
              </th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <th>Batch Number
                <br>
                <input type="text">
              </th>
              <th>Grand Total
                <br>
                <input type="text">
              </th>
              <th>Payment Method
                <br>
                <select name="payMeth" form="payMeth">
                  <option disabled selected></option>
                  <option value="opt1">Cash</option>
                  <option value="opt2">Credit</option>
                  <option value="opt3">Paypal</option>
                </select>
              </th>
            </tr>
            <tr>
              <td>12345</td>
              <td>$11.99</td>
              <td>Credit</td>
            </tr>
            <tr class="selected">
              <td>12345</td>
              <td>$11.99</td>
              <td>Credit</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
    <div class="row">
      <div class="col-xs-12">
        <table class="order edit">
          <thead>
            <tr>
              <th colspan="3">
                This table is in edit mode. All it needs is a class of "Edit" when in edit mode. Inputs and selects should appear dimmed and should not be functional.
                <div class="inputGroup">
                  <select name="otaction" form="otaction">
                    <option disabled selected>Action</option>
                    <option value="opt1">Update Status</option>
                    <option value="opt2">Put on Hold</option>
                    <option value="opt3">Update CSR Agent</option>
                  </select>
                  <input type="submit" value="Update Selected" class="bttn order-btn">
                </div>
              </th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <th>Batch Number
                <br>
                <input type="text">
              </th>
              <th>Grand Total
                <br>
                <input type="text">
              </th>
              <th>Payment Method
                <br>
                <select name="payMeth" form="payMeth">
                  <option disabled selected></option>
                  <option value="opt1">Cash</option>
                  <option value="opt2">Credit</option>
                  <option value="opt3">Paypal</option>
                </select>
              </th>
            </tr>
            <tr>
              <td>12345</td>
              <td>$11.99</td>
              <td>Credit</td>
            </tr>
            <tr class="selected">
              <td>12345</td>
              <td>$11.99</td>
              <td>Credit</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
    <div class="row">
      <div class="col-xs-12">
        <input type="checkbox" value="compact" id="compact">
        <label for="compact"><span></span>Compact Mode</label>
      </div>
    </div>
  </div>

</body>


</html>
            
          
!
            
              $color-order:#ec6546;
$color-messages: #13f4de;
$color-edit:#a068de;

$color-neut:#333;
$color-ltneut:#f4f4f4;
$color-dkneut:#222;

$color-alert:#ff130f; 
$color-approve:#32cd32; 
$color-info: #ffa112;

$font-base:12px;

@mixin border($border-width:3px, $border-style:solid, $border-color:$color-ltneut){
  border:$border-width $border-style $border-color;
}

//**********************/
//* Bootstrap changes  */
//**********************/
.row{
  margin:.25*($font-base);
}
.container{
  width:1300px
}
.tooltip-inner{
  width:8*($font-base);
}

a + .tooltip.right > .tooltip-inner {background-color: $color-dkneut;}
a + .tooltip.right > .tooltip-arrow{border-right-color: $color-dkneut;}

.tooltip.in{
  opacity:1;
}

.alert{
  margin:0;
}
//**********************/
//*    Custom Code     */
//**********************/

// animation

@-moz-keyframes rotate { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes rotate { 100% { -webkit-transform: rotate(360deg); } }
@keyframes rotate { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }


body{
  background:$color-neut;
  text-shadow:0 1px 1px rgba(0,0,0,.6);
  color:$color-ltneut;
  height:100%;
  font-size:$font-base;
}
p{
  font-size:1.25*$font-base;
  margin:.25*$font-base 0;
}
ul{
  margin:10px 0;
  padding:0;
}

li{
  display:inline-block;
  margin:0 .25*($font-base);
  position:relative;
  font-size:$font-base;
  font-family: 'Open Sans', sans-serif;
  &:first-child{
    margin-left:0;
  }
}

a{
  position:relative;
  z-index:1;
  display:block;
  cursor:pointer;
  &.bttn{
    color:$color-ltneut;
  }
  &:hover{
    text-decoration:none;
  }
}
i{
  font-size:1.5*$font-base;
  vertical-align:middle;
  &.loading{
    -webkit-animation: rotate 1s linear infinite;
    -moz-animation: rotate 1s linear infinite;
    animation: rotate 1s linear infinite;
    position:absolute;
    + span{ margin-left:2em;}
  }
}
.bttn{
    border-radius:.25*($font-base);
    transition:background .2s;
    padding: 0 .5*($font-base);
    color:$color-ltneut;
  }


input, select{
  box-shadow:inset 0 .25*($font-base) $color-dkneut;
  border:none;
  border-radius:0;
  height:1.75*($font-base);
  line-height: normal;
  padding:.25*($font-base);
  text-shadow:none;
  color:$color-neut;
  vertical-align:middle;
  display:inline-block;
}
select{
  padding:0 $font-base 0 0;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: url(//www.compandsave.com/v/mp/smb-test/assets/select.svg) 96% / 9% no-repeat #fff;
}
/*target Internet Explorer 9 and Internet Explorer 10:*/
@media screen and (min-width:0\0) { 
    select {
        background:#fff;
        padding: 0;
    }
}

input::-webkit-input-placeholder {
  color: lighten($color-neut, 20%);
}
input::-moz-placeholder {
  color: lighten($color-neut, 20%);
}
input:-moz-placeholder {   /* Older versions of Firefox */
  color: lighten($color-neut, 20%);
}
input:-ms-input-placeholder { 
  color: lighten($color-neut, 20%);
}

input:focus,
select:focus{
  outline:none;
  background-color:darken($color-ltneut,20%);
}

label, label span, input[type=checkbox], input[type=radio]{
  display:inline-block;
  vertical-align:middle;
  font-weight:normal;
}

input[type=checkbox], input[type=radio]{
  opacity:0;
  width:0;
  position:absolute;
  + label span{
    position:relative;
    background:#fff;
    border:none;
    width:1.25*($font-base);
    height:1.25*($font-base);
    margin-right:.25*($font-base);
    display:inline-block;
   }
}
input[type=checkbox],
input[type=radio]{
  &:checked{
    + label span:before{
      display:block;
      position:absolute;
      color:$color-neut;
      text-shadow:none;
      top:-.1*$font-base;
      left:.1*$font-base;
    }
  }
}

input[type=checkbox]{
  &:checked{
    + label span:before{
      font-family:'smb-icon';
      content:"\e700";
    }
  }
}

input[type=radio]{
  + label span {
      border-radius:50%;
    }
  &:checked{
    + label span:before{
      background:$color-neut;
      border-radius:50%;
      content:"";
      width:50%;
      height:50%;
      top:25%;
      left:25%;
    }
  }
}

.validate{
    background:$color-alert;
    left:100%;
    width:100%;
    position:absolute;
    top:calc(100% + 3px);
    z-index:1;
    opacity:0;
    transition: .3s width, .3s opacity;
}

li.active{
  .validate{
    &.adviceShow{
      opacity:1;
    }
  }
}

li.active input,
li.active select{
  opacity:1;
  z-index:2;
  width:100%;
  background-color:$color-ltneut;
  &.barInput{
    width:75%;
  }
}
li.active input[type="submit"]{
  left:75%;
  width:25%;
}
.functionRow{ 
    input, select{
    position:absolute;
    opacity:0;
    width:0;
    top:1.5*($font-base);
    left:0;
    transition:.3s width, .3s opacity;
    }
}

.filter{
  background:$color-dkneut;
  padding:.5*($font-base);
  margin:.5*($font-base) 0;
  &:after{ 
    content:"";
    display:table;
    clear:both;}
  input, select{
    box-shadow:inset 0 3.5px darken($color-dkneut,20%);
    margin: 0 .25*($font-base);
    border:1px solid lighten($color-neut,10%)
  }
}

.inputGroup{
  input, select{
    margin-left:0;
    margin-right:0;
  }
}

.removeIcon, .approveIcon, .pop-close{
  border-radius:50%;
  margin:.15*($font-base);
  padding:.3*($font-base);
  font-size:.75*($font-base);
  color:$color-dkneut;
  text-shadow:none;
  cursor:pointer;
}

.removeIcon{background:$color-alert;&:hover{background:darken($color-alert,10%);}}
.approveIcon{background:$color-approve;&:hover{background:darken($color-approve,10%);}}

.partialIcon{
  opacity:0.4;
}

table{
  font-size:.9*($font-base);
  width:100%;
  border:2px solid $color-dkneut;
  td, th{
    padding:.75*($font-base);
    border:1px solid lighten($color-neut,10%);
  }
  tr:hover, tr.selected{
    background:$color-dkneut;
    td{
      box-shadow:inset 0 2px 0 darken($color-dkneut,5%);
      border-color:darken($color-dkneut,2%);
    }
  }
  &.compact{
    font-size:.8*($font-base);
    td,th{
      padding:.25*($font-base);
    }
    .bttn{
      padding: 0 .25*($font-base);
    }
  }
}

//******************/
//*     Pop Up     */
//******************/
.pop-contain{
  padding:.5*$font-base;
  background:lighten($color-neut,20%);
  box-shadow:0 3px 0 $color-dkneut;
  position:relative;
  .pop-close{
    font-size:$font-base;
    position:absolute;
    background:#fff;
    right:-$font-base;
    top:-$font-base;
  }
}

//******************/
//*     Sprite     */
//******************/
[class^="ui-"], [class*=" ui-"] {
  display:inline-block;
  vertical-align:middle;
  background-image:url('//www.compandsave.com/v/mp/smb-test/assets/smb-ui.png');
  background-repeat:no-repeat;
}
.ui-gradient{
  background-position: -6px -177px;
	width: 25px;
	height: 23px;
}
.ui-pagPrev{
  background-position: -12px 0;
	width: 16px;
	height: 18px;
}
.ui-pagFirst{
  background-position: -8px -22px;
	width: 24px;
	height: 18px;
}
.ui-pagNext{
  background-position: -12px -44px;
	width: 16px;
	height: 18px;
}
.ui-pagLast{
  background-position: -8px -65px;
	width: 24px;
	height: 18px;
}
.ui-cursorAdjust{
  background-position: 0 -87px;
	width: 38px;
	height: 22px;
}
.ui-cursorPicker{
  background-position: -7px -112px;
	width: 26px;
	height: 27px;
}
.ui-cursorMove{
  background-position: -5px -142px;
	width: 30px;
	height: 32px;
}
.ui-gridSelectDescend{
  background-position: -10px -206px;
	width: 17px;
	height: 13px;
}
.ui-gridSelectAscend{
  background-position: -11px -225px;
	width: 16px;
	height: 13px;
}
//******************/
//* Color classes  */
//******************/
  //* Neutral  */
.neut-bg, table.neut th{ 
  background:rgba($color-dkneut,.2);}
.neut-btn{ 
  background:$color-dkneut;
  box-shadow:0 3px 0 darken($color-dkneut, 30%);
  &:hover, &:focus, .active & {
    background:darken($color-dkneut,10%);
  }
}
.neut-border{ 
  @include border($border-color:$color-dkneut);
  padding:.25*$font-base;
}
.neut-txt{ color:$color-dkneut;text-shadow:none; }
  //* Order  */
.order-bg, table.order th{ 
  background:rgba($color-order,.2);}
.order-btn{ 
  background:$color-order;
  box-shadow:0 3px 0 darken($color-order,30%);
  &:hover, &:focus, .active & {
    background:darken($color-order,10%);
  }
}
.order-border{ 
  @include border($border-color:$color-order);
  padding:.25*$font-base;
}
.order-txt{ color:$color-order; }
 //* Edit  */
.edit-bg, table.edit th{ 
  background:rgba($color-edit,.2);
  input, select{
    opacity:.3;
  }
}

.edit-btn{ 
  background:$color-edit;
  box-shadow:0 3px 0 darken($color-edit,30%);
  &:hover, &:focus, .active & {
    background:darken($color-edit,10%);
  }
}
.edit-border{ 
  @include border($border-color:$color-edit);
  padding:.25*$font-base;
}
.edit-txt{ color:$color-edit; }
  //* Messages  */
.messages-bg, table.messages th{ 
  background:rgba($color-messages,.2);}
.messages-btn{ 
  background:$color-messages;
  box-shadow:0 3px 0 darken($color-messages,30%);
  &:hover, &:focus, .active &{
    background:darken($color-messages,10%);
  }
}
.messages-border{ 
  @include border($border-color:$color-messages);
  padding:.25*$font-base;
}
.messages-txt{ color:$color-messages; }

  //* Alert  */
.alert-bg, table.alert th{ 
  background:rgba($color-alert,.2);}
.alert-btn{ 
  background:$color-alert;
  box-shadow:0 3px 0 darken($color-alert,30%);
  &:hover, &:focus, .active &{
    background:darken($color-alert,10%);
  }
}
.alert-border{ 
  @include border($border-color:$color-alert);
  padding:.25*$font-base;
}
.alert-txt{ color:$color-alert; }
.alert-input{background-color:$color-alert !important;}
.alert-notify{background-color:$color-alert; padding:.5*$font-base;box-shadow:0 .25*$font-base 0 $color-dkneut;margin:0 0 .5*$font-base 0;
  p, i{
    line-height:1;
    font-size:1.5*$font-base;
    vertical-align:middle;
  }
}

  //* Approve  */
.approve-bg, table.approve th{ 
  background:rgba($color-approve,.2);}
.approve-btn{ 
  background:$color-approve;
  box-shadow:0 3px 0 darken($color-approve,30%);
  &:hover, &:focus, .active &{
    background:darken($color-approve,10%);
  }
}
.approve-border{ 
  @include border($border-color:$color-approve);
  padding:.25*$font-base;
}
.approve-txt{ color:$color-approve; }
.approve-input{background-color:$color-approve !important;}
.approve-notify{background-color:$color-approve; padding:.5*$font-base; box-shadow: 0 .25*$font-base 0 $color-dkneut;margin:0 0 .5*$font-base 0;
  p, i{
    line-height:1;
    font-size:1.5*$font-base;
    vertical-align:middle;
  }
}

.info-notify{background-color:$color-info; padding:.5*$font-base; box-shadow: 0 .25*$font-base 0 $color-dkneut;margin:0 0 .5*$font-base 0;
  p, i{
    line-height:1;
    font-size:1.5*$font-base;
    vertical-align:middle;
  }
}
            
          
!
            
              /** Bootstrap Tooltip**/
$( document ).ready(function() {
  //if "Show Descriptions" is checked, run the tooltip function
 $('#desc').click(function() {
   if($('#desc').is(":checked")) {
     //alert("clicked");
     $('[data-toggle="description"]').tooltip();
   } else {
       // if it is not checked, disable the function
       $('[data-toggle="description"]').tooltip('disable');
     }
   });
});

/** Hide normal title attribute **/
$(function(){

    $('a').hover(function(e){

        $(this).attr('data-title', $(this).attr('title'));
        $(this).removeAttr('title');

    },
    function(e){

        $(this).attr('title', $(this).attr('data-title'));

    });

});

/** Hover slides out input **/

$("li").click(function(e) {
   e.stopPropagation();
  //make sure active class is removed from all other elements
   $('.active').removeClass('active');
  //show input
   $(this).toggleClass("active");
  //removes tooltip
   $('.tooltip').css("display","none");
  // puts cursor in input
   $(this).find("input[type='text']").focus();
  
  $(this).find("input[type='text']").keypress(function(){
  $(".validate").addClass("adviceShow");
  });

   $(this).find("select").focus();
});

$("body").click(function(e) {
   $('.active').removeClass('active');
});

/* Toggle Compact Mode */
$('#compact').click(function(){
  	 $('table').toggleClass('compact');
 		if($('table').hasClass('compact')){
     		$(this).removeClass('compact');
  	}
});

/* Custom Action Choices */
document.getElementById('cfitem1').addEventListener('change', function () {
    var style = this.value != 'default' ? 'inline-block' : 'none';
    document.getElementById('cfitem2').style.display = style;
});

document.getElementById('cfitem2').addEventListener('change', function () {
    var style = this.value != 'default' ? 'inline-block' : 'none';
    document.getElementById('cfitem3').style.display = style;
});

            
          
!
999px
Close

Asset uploading is a PRO feature.

As a PRO member, you can drag-and-drop upload files here to use as resources. Images, Libraries, JSON data... anything you want. You can even edit them anytime, like any other code on CodePen.

Go PRO

Loading ..................

Console