table[EX]

action-header-table   

Header table with action button (selection all, multiple action etc)

Action

Modify contract

Modification request

This is a modification request on vehicle contract :

Jaguar F Space (84576 GFT 38)

Jaguar F Space (84576 GFT 38)

Jaguar F Space (84576 GFT 38)

Jaguar F Space (84576 GFT 38)

Jaguar F Space (84576 GFT 38)

Jaguar F Space (84576 GFT 38)

Jaguar F Space (84576 GFT 38)

Jaguar F Space (84576 GFT 38)

Jaguar F Space (84576 GFT 38)

Jaguar F Space (84576 GFT 38)

Jaguar F Space (84576 GFT 38)

Jaguar F Space (84576 GFT 38)

Jaguar F Space (84576 GFT 38)

Jaguar F Space (84576 GFT 38)

Jaguar F Space (84576 GFT 38)

Jaguar F Space (84576 GFT 38)

Jaguar F Space (84576 GFT 38)

Send request
  • View cart
  • Reset
2 items
Copy
Edit
<!-- components/table/action-header-table.php --> <div class="card no-padding"> <div class="table-header-action"> <div class="select-all-container"> <div class="input-checkbox-container"> <input type="checkbox" id="selectall"> <label class="checkbox-label" for="selectall"></label> </div> </div> <div class="custom-select-container header-action-select"> <div class="custom-select"> <span class="custom-select-label">Action</span> </div> <div class="select-options-container"> <span class="close icon-cross"></span> <div class="popin-content"> <div class="popin-header"> <h2 class="popin-title">Modify contract</h2> </div> <div class="inner-content"> <h3 class="popin-sub-title">Modification request</h3> <p class="desc">This is a modification request on vehicle contract :</p> <div class="list-info"> <p>Jaguar F Space (84576 GFT 38)</p> <p>Jaguar F Space (84576 GFT 38)</p> <p>Jaguar F Space (84576 GFT 38)</p> <p>Jaguar F Space (84576 GFT 38)</p> <p>Jaguar F Space (84576 GFT 38)</p> <p>Jaguar F Space (84576 GFT 38)</p> <p>Jaguar F Space (84576 GFT 38)</p> <p>Jaguar F Space (84576 GFT 38)</p> <p>Jaguar F Space (84576 GFT 38)</p> <p>Jaguar F Space (84576 GFT 38)</p> <p>Jaguar F Space (84576 GFT 38)</p> <p>Jaguar F Space (84576 GFT 38)</p> <p>Jaguar F Space (84576 GFT 38)</p> <p>Jaguar F Space (84576 GFT 38)</p> <p>Jaguar F Space (84576 GFT 38)</p> <p>Jaguar F Space (84576 GFT 38)</p> <p>Jaguar F Space (84576 GFT 38)</p> </div> <form action=""> <textarea name="message" id="message" rows="10" placeholder="Add comment"></textarea> </form> <div class="button-icon submit-popin"> <span class="icon-container"> <img src="images/icons/icon-mail.png" alt=""> </span> <span class="button-icon-label">Send request</span> </div> </div> </div> </div> </div> <div class="cart-section-table-header"> <div class="cart-container"> <span class="icon-cart notif-on"></span> <div class="cart-options-container"> <ul class="sub-section"> <li class="option">View cart</li> </ul> <ul class="sub-section"> <li class="option">Reset</li> </ul> </div> </div> <span class="cart-count">2 items</span> </div> </div> </div>
Copy
Copy
Edit
/* scss/table/_action-header-table.scss */ .table-header-action { position: relative; background-color: #ffffff; padding: 30px 45px 30px 0; line-height: 16px; .select-all-container { display: inline-block; vertical-align: middle; width: 80px; height: 20px; padding-left: 30px; text-align: center; } .custom-select-container { display: inline-block; vertical-align: middle; margin-left: -4px; &.header-action-select { .select-options-container { right: inherit; left: 0; white-space: nowrap; } } } .cart-section-table-header { position: absolute; top: 34px; right: 30px; .cart-container { display: inline-block; vertical-align: middle; .cart-options-container { position: absolute; right: 0; top: 23px; z-index: 999; background-color: $theme-white-background-color; -webkit-box-shadow: 0px 5px 20px 0px rgba(0,0,0,0.1); -moz-box-shadow: 0px 5px 20px 0px rgba(0,0,0,0.1); box-shadow: 0px 5px 20px 0px rgba(0,0,0,0.1); font-family: $font-family; font-weight: $font-weight-bold; font-size: 13px; color: $theme-color-text-main; text-align: left; min-width: 200px; visibility: hidden; opacity: 0; -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -ms-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease; &.opened { visibility: visible; opacity: 1; -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -ms-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease; } .sub-section { border-bottom: 1px solid $theme-color-grey-light; .option { position: relative; list-style-type: none; line-height: 50px; white-space: nowrap; padding: 0 30px; cursor: pointer; .sub-list { list-style-type: none; padding-left: 10px; margin-top: -9px; margin-bottom: 10px; li { line-height: 28px; } .option-label { font-weight: $font-weight-medium; } } &.disabled { .option-label { color: $theme-color-text-light; } } &:hover { background-color: $theme-color-hover-line; } &.active { background-color: $theme-color-active-line; &::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background-color: $theme-color-main; } } } } } } .icon-cart { position: relative; background-image: url('../images/icons/icon-wallet-grey.png'); width: 23px; height: 13px; display: block; background-size: cover; cursor: pointer; &.notif-on::after { content: ""; position: absolute; right: -3px; top: -4px; display: block; width: 6px; height: 6px; border-radius: 50%; background-color: $theme-color-notification; } } .cart-count { display: inline-block; vertical-align: middle; font-family: $font-family; font-weight: $font-weight-medium; color: $theme-color-text-main; font-size: 13px; margin-left: 10px; } } }

table-line   

table line

Aiden Day BREMANY Volvo XCD4ZFAFS542498 124595318

36 month

120 000 Km

87 065 Km

Over 30%

3000 / 30%

Aiden Day BREMANY Volvo XCD4ZFAFS542498 124595318

36 month

120 000 Km

87 065 Km

Lorem Ipsum
Copy
Edit
<!-- components/table/table-line.php --> <table class="table" cellpadding="0" cellspacing="0"> <tr> <td class="selection-cell"> <div class="input-checkbox-container"> <input type="checkbox" id="selectline1"> <label class="checkbox-label" for="selectline1"></label> </div> </td> <td> Aiden Day </td> <td> BREMANY </td> <td> Volvo XCD4ZFAFS542498 </td> <td> 124595318 </td> <td> <p><span class="value">36</span> <span class="label">month</span></p> <p><span class="value">120 000</span> <span class="label">Km</span></p> </td> <td> <span class="icon-left"><img src="images/icons/icon-horloge.png" alt=""></span> <p><span class="value">87 065</span> <span class="label">Km</span></p> </td> <td> <div class="thbnail rating-over-30"> Over 30% </div> </td> <td> <div class="mileage-diff"> <p><span class="current-value">3000</span> / <span class="percentage-diff">30%</span></p> <div class="diff-gauge"> <div class="value-gauge" style="width: 30%;"></div> </div> </div> </td> </tr> <tr class="active"> <td class="selection-cell"> <div class="input-checkbox-container"> <input type="checkbox" id="selectline2"> <label class="checkbox-label" for="selectline2"></label> </div> </td> <td> Aiden Day </td> <td> BREMANY </td> <td> Volvo XCD4ZFAFS542498 </td> <td> 124595318 </td> <td> <p><span class="value">36</span> <span class="label">month</span></p> <p><span class="value">120 000</span> <span class="label">Km</span></p> </td> <td> <span class="icon-left"><img src="images/icons/icon-horloge.png" alt=""></span> <p><span class="value">87 065</span> <span class="label">Km</span></p> </td> <td> Lorem </td> <td> Ipsum </td> </tr> </table>
Copy
Copy
Edit
/* scss/table/_table-line.scss */ .table, .table-fixed { tr { background-color: #ffffff; &.active, &.active:hover { background-color: $theme-color-active-line; } &:hover { background-color: $theme-color-hover-line; } td { height: 80px; border-bottom: 1px solid $theme-color-grey-light; padding: 0 30px 0 0; font-family: $font-family; font-weight: $font-weight-regular; font-size: 13px; color: $theme-color-text-main; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; &.selection-cell { width: 80px; padding: 0; text-align: center; .input-checkbox-container { height: 20px; padding-left: 30px; } } .icon-left { float: left; margin-right: 10px; img { display: inline; width: 18px; } } p { line-height: 20px; .value { color: $theme-color-text-main; } .label { color: $theme-color-text-light; } } .mileage-diff { p { margin-bottom: 8px; margin-top: -11px; font-size: 13px; font-weight: $font-weight-regular; } .diff-gauge { position: relative; display: block; width: 100px; height: 2px; background-color: $theme-gauge-background; .value-gauge { position: absolute; left: 0; top: 0; height: 100%; background-color: $theme-gauge-value; } } } } } } .sticky-cells-container .table-fixed { tr { td { overflow: visible; } } }

header-table   

Table's header

Driver Entity Vehicule Registration Contract Last mileage
Copy
Edit
<!-- components/table/header-table.php --> <table class="table" cellpadding="0" cellspacing="0"> <thead> <tr> <th class="empty-checkbox-hcell"></th> <th> Driver </th> <th> Entity </th> <th> Vehicule </th> <th> Registration </th> <th> Contract </th> <th> Last mileage </th> </tr> </thead> </table>
Copy
Copy
Edit
/* scss/table/_header-table.scss */ .table { font-family: $font-family; font-weight: $font-weight-medium; width: 100%; table-layout: fixed; overflow-x: scroll; tr { th { font-weight: $font-weight-bold; font-size: 13px; color: $theme-color-text-light; text-align: left; background-color: $theme-color-grey-extra-light; height: 85px; border-top: 1px solid $theme-color-grey-light; border-bottom: 1px solid $theme-color-grey-light; &.empty-checkbox-hcell { width: 80px; } .small { display: block; font-size: 11px; font-weight: $font-weight-medium; } } } }