Decorator Front End Documentation

Tables: Simple media table including on-hover table styles

Example:

Product Name	Quantity	Actions
Nike T-shirt	16	Edit Delete
Jack & Jones T-shirt	26	Edit Delete
Prada Jacket	18	Edit Delete


/*---------- STANDALONE STYLE -----------*/

.table {
    background-color: transparent;
    border-collapse: collapse;
    border-spacing: 0;
    max-width: 100%;
    width: 100%;
    font-family: Arial;
}

.table thead th, .table thead td{
    border-top: none;
}

.table thead th{
    font-size: 12px;
    color: #444;
}

.table th, .table td {
    padding: 8px;
    line-height: 15px;
    text-align: left;
    vertical-align: top;
    border-top: 1px solid #ddd;
    font-size: 13px;
}

.table-actions a{
    font-size: 13px;
    color: #444;
    float: left;
    margin-right: 8px;
}

.table-actions a:hover{
    color: #EE4D3B;
    text-decoration: underline;
}

/*---------- MEDIA TABLE EDITS INCLUDED HOVER TABLE EDITS----------*/

/* media table extra */
.media-table td {
    vertical-align: middle;
}

.media-table th, .media-table td{
    line-height: 15px !important;
}

/* hover table extra */
.hover-table thead tr{
    background: transparent !important;
}

.hover-table tr:hover{
    background: #f6f6f6;
}

Tables: Basic table styles

Example:

#	Product Name	Quantity	Actions
1	I Phone	2354	Edit Delete
2	Galaxy S3	2365	Edit Delete
3	HTC	1587	Edit Delete


/*---------- STANDALONE STYLE -----------*/

.table {
    background-color: transparent;
    border-collapse: collapse;
    border-spacing: 0;
    max-width: 100%;
    width: 100%;
    font-family: Arial;
}

.table thead th, .table thead td{
    border-top: none;
}

.table thead th{
    font-size: 12px;
    color: #444;
}

.table th, .table td {
    padding: 8px;
    line-height: 25px;
    text-align: left;
    vertical-align: top;
    border-top: 1px solid #ddd;
    font-size: 13px;
}

.table-actions a{
    font-size: 13px;
    color: #444;
    float: left;
    margin-right: 8px;
}

.table-actions a:hover{
    color: #EE4D3B;
    text-decoration: underline;
}

Tables: Striped table style. To create a striped table just add "striped-table" to your table class

Example:

#	Product Name	Quantity	Actions
1	I Phone	2354	Edit Delete
2	Galaxy S3	2365	Edit Delete
3	HTC	1587	Edit Delete


/*---------- STANDALONE STYLE -----------*/


.table {
    background-color: transparent;
    border-collapse: collapse;
    border-spacing: 0;
    max-width: 100%;
    width: 100%;
    font-family: Arial;
}

.table thead th, .table thead td{
    border-top: none;
}

.table thead th{
    font-size: 12px;
    color: #444;
}

.table th, .table td {
    padding: 8px;
    line-height: 25px;
    text-align: left;
    vertical-align: top;
    border-top: 1px solid #ddd;
    font-size: 13px;
}

.table-actions a{
    font-size: 13px;
    color: #444;
    float: left;
    margin-right: 8px;
}

.table-actions a:hover{
    color: #EE4D3B;
    text-decoration: underline;
}

/* striped table extra */
.stripped-table tr:nth-child(odd) > td{
    background: #f6f6f6;
}

Tables: Bordered table using extra "center-table" class to align(center) elements

Example:

#	Product Name	Quantity	Actions
1	I Phone	2354	Edit Delete
2	Galaxy S3	2365	Edit Delete
3	HTC	1587	Edit Delete


/*---------- STANDALONE STYLE -----------*/

.table {
    background-color: transparent;
    border-collapse: collapse;
    border-spacing: 0;
    max-width: 100%;
    width: 100%;
    font-family: Arial;
}

.table thead th, .table thead td{
    border-top: none;
}

.table thead th{
    font-size: 12px;
    color: #444;
}

.table th, .table td {
    padding: 8px;
    line-height: 25px;
    text-align: left;
    vertical-align: top;
    border-top: 1px solid #ddd;
    font-size: 13px;
}

.table-actions a{
    font-size: 13px;
    color: #444;
    float: left;
    margin-right: 8px;
}

.table-actions a:hover{
    color: #EE4D3B;
    text-decoration: underline;
}

/* bordered table extra */
.bordered-table td, .bordered-table th{
    border: 1px solid #ddd;
}

.bordered-table th, .bordered-table td{
    border-top: 1px solid #ddd !important;
}

/* text align center extra edit if you want to center everything in table */
.center-table thead th, .center-table thead td, .center-table td{
    text-align: center;
}

/* extra table action edits */
.center-table .table-actions a{
    text-align: center;
    float: none;
}

Tables: Bordered table using extra: Icons and "center-table" class to align(center) elements

Example:

#	Player	Country	Actions
1	Edin Dzeko
2	Lionel Messi
3	Zlatan Ibrahimovic


/*---------- STANDALONE STYLE -----------*/

/* IMPORTANT IF YOU USE IT AS STAND ALONE COMPONENT
------------------------------------------------------
To be able to use icons, you need to add
icons-decorator.css right below your main decorator.css
Also do not make any changes in the main style file's
such as decorator.css and icons-decroator.css!!!
------------------------------------------------------
*/

.table {
    background-color: transparent;
    border-collapse: collapse;
    border-spacing: 0;
    max-width: 100%;
    width: 100%;
    font-family: Arial;
}

.table thead th, .table thead td{
    border-top: none;
}

.table thead th{
    font-size: 12px;
    color: #444;
}

.table th, .table td {
    padding: 8px;
    line-height: 25px;
    text-align: left;
    vertical-align: top;
    border-top: 1px solid #ddd;
    font-size: 13px;
}

.table-actions a{
    font-size: 13px;
    color: #444;
    float: left;
    margin-right: 8px;
}

.table-actions a:hover{
    color: #EE4D3B;
    text-decoration: underline;
}

/* bordered table extra */
.bordered-table td, .bordered-table th{
    border: 1px solid #ddd;
}

.bordered-table th, .bordered-table td{
    border-top: 1px solid #ddd !important;
}

/* text align center extra edit if you want to center everything in table */
.center-table thead th, .center-table thead td, .center-table td{
    text-align: center;
}

/* extra table action edits */
.center-table .table-actions a{
    text-align: center;
    float: none;
}

/* extra action edits */

.table-actions a i {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
    filter: alpha(opacity=70);
    -moz-opacity: 0.7;
    -khtml-opacity: 0.7;
    opacity: 0.7;
}

.table-actions a:hover > i {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
    filter: alpha(opacity=100);
    -moz-opacity: 1.0;
    -khtml-opacity: 1.0;
    opacity: 1.0;
}

Tables: Contextual classes table:

Example:

#	Table Row (tr) Class	Actions
1	Active	Edit Delete
2	Success	Edit Delete
3	Warning	Edit Delete
4	Danger	Edit Delete
5	Info	Edit Delete


/*---------- STANDALONE STYLE -----------*/

.table {
    background-color: transparent;
    border-collapse: collapse;
    border-spacing: 0;
    max-width: 100%;
    width: 100%;
    font-family: Arial;
}

.table thead th, .table thead td{
    border-top: none;
}

.table thead th{
    font-size: 12px;
    color: #444;
}

.table th, .table td {
    padding: 8px;
    line-height: 25px;
    text-align: left;
    vertical-align: top;
    border-top: 1px solid #ddd;
    font-size: 13px;
}

.table-actions a{
    font-size: 13px;
    color: #444;
    float: left;
    margin-right: 8px;
}

.table-actions a:hover{
    color: #EE4D3B;
    text-decoration: underline;
}

/* text align center extra edit if you want to center everything in table */
.center-table thead th, .center-table thead td, .center-table td{
    text-align: center;
}
.center-table .table-actions a{
    float: none !important;
    text-decoration: none;
}
.center-table .table-actions a:hover{
    text-decoration: underline;
}
/* --------- EXTRA CONTEXTUAL CLASSES --------*/

.table .active{
    background-color: #f6f6f6;
    color: #444;
}

.table .success{
    background-color: #52AD52;
}

.table .warning{
    background-color: #F3AB44;
}
.table .danger{
    background-color: #EE4D3B;
}
.table .info{
    background-color: #00AFF0;
}

.table .success td, .table .warning td, .table .danger td, .table .info td{
    border-top: none;
    border-bottom: none;
}

.table .success, .table .success a, .table .warning, .table .warning a,
.table .danger, .table .danger a, .table .info, .table .info a{
    color: #fff;
}

.table .success td a:hover, .table .warning td a:hover,
.table .danger td a:hover, .table .info td a:hover{
    color: #fff;
}

/* colors used in this example */

.success{
    background-color: #52AD52 !important;
    color: #fff !important;
}

.warning{
    background-color: #F3AB44 !important;
    color: #fff !important;
}

.danger{
    background-color: #EE4D3B !important;
    color: #fff !important;
}

.info{
    background-color: #00AFF0 !important;
    color: #fff !important;
}

Tables: Shopping cart table example. This table can be used for all sorts of things. For example analytics or stats.

Example:

Electronics Toys	Books Jewelry	Clothing	More info	Empty Cart
Product	Price	Quantity	Total	Action
I Phone	$234.55		$234.55
Knitted Lambs	$9.89		$9.89
Wool Felt Journal	$22.36		$22.36
Herkimer Diamonds	$235.48		$235.48
Toddler Aline Maxi Skirt	$17.30		$17.30
Total:	$536.88	5	$536.88	Checkout


/*---------- STANDALONE STYLE -----------*/

/* IMPORTANT IF YOU USE IT AS STAND ALONE COMPONENT
------------------------------------------------------
To be able to use icons, you need to add
icons-decorator.css right below your main decorator.css
Also do not make any changes in the main style file's
such as decorator.css and icons-decroator.css!!!
------------------------------------------------------
*/

.table {
    background-color: transparent;
    border-collapse: collapse;
    border-spacing: 0;
    max-width: 100%;
    width: 100%;
    font-family: Arial;
}

.table thead th, .table thead td{
    border-top: none;
}

.table thead th{
    font-size: 12px;
    color: #444;
}

.table th, .table td {
    padding: 8px;
    line-height: 25px;
    text-align: left;
    vertical-align: top;
    border-top: 1px solid #ddd;
    font-size: 13px;
}

.table-actions a{
    font-size: 13px;
    color: #444;
    float: left;
    margin-right: 8px;
}

.table-actions a:hover{
    color: #EE4D3B;
    text-decoration: underline;
}

/* center text in td and th */

center-td, .center-th{
    text-align: center !important;
}

.center-td a{
    float: none !important;
}

.bold {
    font-weight: bold;
}

/* -------------EXTRAS CART TABLE---------------*/

.cart-table thead{
    background: #EEEEEE;
    border-left: 6px solid #EEEEEE;
    border-right: 6px solid #EEEEEE;
}

.cart-categories{
   border-bottom: 1px solid #d6d6d6;
}

.cart-categories th {
    padding: 12px 8px;
    line-height: 15px;
}

.cart-table tbody tr:first-child > td{
    border-top: none !important;
}

/* 
color palette edits used in this table.. 
*/
.cart-table .color-palette{
    padding: 0;
    margin: 0;
}
.cart-table .color-palette li{
    border: none !important;
    line-height: 15px;
    margin-right: 10px;
    padding: 1px;
    margin: 2px;
}

.cart-table .color-palette li:hover{
    top: 0 !important;
}

.cart-table .color-palette span{
    margin-right: 4px;
}

/*
Depending on your needs you can change the border width.
In our case we've set border-left to 6px using
class "bleft"(border-left). You can also use "bright"(border-right)
*/

.cart-table .bleft{
    border-left: 6px solid;
}

/* 
Border colors used in this table. You can use any other 
desirable border color or you can use any of our basic
color-palette colors by adding a color-pallette border class
*/

.border-blue-sky {
    border-color: #00AFF0 !important;
}

/* 
There is no such color as "green-sky" 
We've used two skype colors so sky in our case
stands as short for skype :) 
*/

.border-green-sky {
    border-color: #75AB00 !important;
}

.border-yellow {
    border-color: #F3AB44 !important;
}

.border-redish {
    border-color: #EE4D3B !important;
}

.border-pink {
    border-color: #D9254C !important;
}

.cart-table .table-actions{
    text-align: center;
}
.cart-table .table-actions a{
    font-size: 12px;
    text-decoration: underline;
}

.cart-table .table-price{
    font-weight: bold;
    color: #555555;
    font-size: 12px;
}

.table-actions .btn{
    color: #FFFFFF;
    background: #00857E;
    text-decoration: none !important;
    padding: 3px 6px;
}

.table-actions .btn:hover{
    color: #FFFFFF;
}

.cart-table .empty-cart{
    color: #EE4D3B;
    float: none;
    line-height: 21px;
}

.cart-table .empty-cart:hover{
    color: #333;
}

/* basic decorator input */

input {
    display: inline-block;
    height: 20px;
    padding: 6px;
    margin: 0;
    font-size: 13px;
    line-height: 20px;
    color: #555555;
    vertical-align: middle;
    border: 1px solid #ccc;
    float: left;
}

/* table input extra edits */

.cart-table td input {
    width: 20px;
    padding: 2px 6px;
}

.center-td input{
    margin: 0 auto;
    display: block;
    float: none;
}
.center-td, .center-th {
    text-align: center !important;
}
/* color palette used in this table as top row cart-categories */

.color-palette {
    position: relative;
    list-style: none;
}

.color-palette li{
    float: left;
}

.color-palette li #cp {
    display: block;
    float: left;
    height: 14px;
    width: 14px;
}

.cart-table .color-palette span {
    margin-right: 4px;
}

.blue-sky{ background-color: #00AFF0 !important; color: #fff !important;}
.green-sky{ background-color: #75AB00 !important; color: #fff !important;}
.yellow { background-color: #F3AB44 !important; color: #fff !important;}
.redish{ background-color: #EE4D3B !important; color: #fff !important;}
.pink{ background-color: #D9254C !important; color: #fff !important; }
.gray-blue-light{ background-color: #4A5961 !important; color: #fff !important;}

/* extra action edits */

.table-actions a i {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
    filter: alpha(opacity=70);
    -moz-opacity: 0.7;
    -khtml-opacity: 0.7;
    opacity: 0.7;
}

.table-actions a:hover > i {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
    filter: alpha(opacity=100);
    -moz-opacity: 1.0;
    -khtml-opacity: 1.0;
    opacity: 1.0;
}