From d75853d5aa549d130ef397b4d578b6d2c928481b Mon Sep 17 00:00:00 2001
From: IvanBisultanov <IvanBisutlanov@gmail.com>
Date: Tue, 29 Dec 2015 18:32:35 +0300
Subject: [PATCH 1/2] update material theme

---
 demo/demo.css          |  17 ++-
 demo/index.html        | 229 ++++++++++++++++++++---------------------
 dist/material.css      | 138 +++++++++++++++++++++++++
 index.html             |  12 ---
 src/css/demo.scss      |  17 +++
 src/css/material.scss  | 154 ++++++++++++++++++++++++++-
 src/css/variables.scss |   5 +-
 7 files changed, 436 insertions(+), 136 deletions(-)

diff --git a/demo/demo.css b/demo/demo.css
index 78558f5..846df99 100644
--- a/demo/demo.css
+++ b/demo/demo.css
@@ -20,7 +20,8 @@ h1 {
   padding-left: 15px; }
 
 .b-change-theme {
-  padding: 20px; }
+  padding: 20px;
+  margin-bottom: 20px; }
   .b-change-theme__link {
     font-size: 16px;
     line-height: 20px;
@@ -107,3 +108,17 @@ th.sortable {
     top: 0;
     bottom: 6px;
     margin: auto 0; }
+
+.col-wrap {
+  font-size: 0;
+  padding: 25px 0; }
+  .col-wrap .col2 {
+    vertical-align: top;
+    display: inline-block;
+    width: 50%;
+    padding: 0 15px; }
+  .col-wrap .col3 {
+    vertical-align: top;
+    display: inline-block;
+    width: 33.33%;
+    padding: 0 15px; }
diff --git a/demo/index.html b/demo/index.html
index b0fc361..36716cf 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -11,140 +11,130 @@
     <div class="container">
         <h1>Angular Data Grid</h1>
         <div class="b-change-theme">
-            <span class="b-change-theme__link _active">Material Design</span>
             <a href="../index.html" class="b-change-theme__link">Bootstrap</a>
+            <span class="b-change-theme__link _active">Material Design</span>
         </div>
-        <div class="row">
-            <div class="col-xs-12">
-                <div class="col-md-3">
+        <div>
+            <div class="col-wrap">
+                <div class="col3">
                     <div class="form-group">
-                        <input type="text" class="form-control order-search-box"
-                               placeholder="Search By Order #"
+                        <input type="text"
+                               id="sort"
+                               class="form-control order-search-box"
                                ng-change="gridActions.filter()"
                                ng-model="code"
                                filter-by="code"
                                filter-type="text">
+                        <label for="sort" class="input-label">Search By Order #</label>
                     </div>
                 </div>
-                <div class="col-md-9 buttons-right">
-                    <div class="form-inline margin-bottom-small">
-                        <div class="form-group">
-                            <label class="control-label">From: </label>
-
-                            <div class="input-group datepicker">
-                                <input type="text"
-                                       id="dateFrom"
-                                       class="form-control"
-                                       is-open="dateFromOpened"
-                                       ng-click="dateFromOpened = true"
-                                       datepicker-popup="shortDate"
-                                       filter-by="placed"
-                                       filter-type="dateFrom"
-                                       ng-model="dateFrom"
-                                       ng-blur="gridActions.filter()"
-                                       ng-focus="gridActions.filter()"
-                                       max-date="dateTo"
-                                       show-weeks="false"
-                                       close-text="Close"
-                                       placeholder="MM/DD/YY"/>
-                            <span class="input-group-btn">
-                            <label for="dateFrom" class="btn btn-default form-control">
-                                <i class="fa fa-calendar"></i></label>
-                            </span>
-                            </div>
-                        </div>
-                        <div class="form-group">
-                            <label class="control-label">To: </label>
-
-                            <div class="input-group datepicker">
-                                <input type="text"
-                                       id="dateTo"
-                                       class="form-control"
-                                       is-open="dateToOpened"
-                                       ng-click="dateToOpened = true"
-                                       min-date="dateFrom"
-                                       datepicker-popup="shortDate"
-                                       filter-by="placed"
-                                       filter-type="dateTo"
-                                       ng-model="dateTo"
-                                       ng-blur="gridActions.filter()"
-                                       ng-focus="gridActions.filter()"
-                                       show-weeks="false"
-                                       close-text="Close"
-                                       placeholder="MM/DD/YY"/>
-                                <span class="input-group-btn">
-                                <label for="dateTo" class="btn btn-default form-control">
-                                    <i class="fa fa-calendar"></i></label>
-                                </span>
-                            </div>
+                <div class="col3">
+                    <div class="form-group">
+                        <div class="input-group datepicker">
+                            <input type="text"
+                                   id="dateFrom"
+                                   class="form-control"
+                                   is-open="dateFromOpened"
+                                   ng-click="dateFromOpened = true"
+                                   datepicker-popup="shortDate"
+                                   filter-by="placed"
+                                   filter-type="dateFrom"
+                                   ng-model="dateFrom"
+                                   ng-blur="gridActions.filter()"
+                                   ng-focus="gridActions.filter()"
+                                   max-date="dateTo"
+                                   show-weeks="false"
+                                   close-text="Close"/>
+                            <label for="dateFrom" class="input-label">From</label>
                         </div>
                     </div>
                     <div ng-show="dateTo || dateFrom" class="buttons-right">
                         <a href="" ng-click="dateTo = ''; dateFrom = ''; reloadGrid();">Clear Dates</a>
                     </div>
                 </div>
-                <div grid-data id='test' grid-options="gridOptions" grid-actions="gridActions">
-                    <div class="row margin-bottom-big">
-                        <strong class="col-md-12">
-                            found : {{filtered.length}} items
-                        </strong>
-
+                <div class="col3">
+                    <div class="form-group">
+                        <div class="input-group datepicker">
+                            <input type="text"
+                                   id="dateTo"
+                                   class="form-control"
+                                   is-open="dateToOpened"
+                                   ng-click="dateToOpened = true"
+                                   min-date="dateFrom"
+                                   datepicker-popup="shortDate"
+                                   filter-by="placed"
+                                   filter-type="dateTo"
+                                   ng-model="dateTo"
+                                   ng-blur="gridActions.filter()"
+                                   ng-focus="gridActions.filter()"
+                                   show-weeks="false"
+                                   close-text="Close"/>
+                            <label for="dateTo" class="input-label">To</label>
+                        </div>
                     </div>
-                    <pagination max-size="5"
-                                boundary-links="true"
-                                class="pagination-sm"
-                                ng-if="paginationOptions.totalItems  > paginationOptions.itemsPerPage"
-                                total-items="paginationOptions.totalItems"
-                                ng-model="paginationOptions.currentPage"
-                                ng-change="reloadGrid()"
-                                items-per-page="paginationOptions.itemsPerPage"></pagination>
-                    <table class="table table-hover table-leo table-condensed table-bordered table-striped">
-                        <thead>
-                        <tr>
-                            <th sortable="code" class="sortable">
-                                Order #
-                            </th>
-                            <th sortable="placed" class="sortable">
-                                Date Placed
-                            </th>
-                            <th sortable="purchaseOrderNumber" class="sortable">
-                                Purchase Order #
-                            </th>
-                            <th class="st-sort-disable th-dropdown">
-                                <select class="form-control width-15"
-                                        filter-by="statusDisplay"
-                                        filter-type="select"
-                                        ng-model="status"
-                                        ng-change="filter()">
-                                    <option value="">All Statuses</option>
-                                </select>
-                            </th>
-                            <th sortable='total.value' class="sortable">
-                                Total
-                            </th>
-                            <th class="st-sort-disable">
-                            </th>
-                        </tr>
-                        </thead>
-                        <tbody>
-                        <tr grid-item>
-                            <td>
-                                <a href="{{globalData.contextPath + '/my-account/order/' + item.code}}"
-                                   ng-bind="item.id"></a>
-                            </td>
-                            <td ng-bind="item.placed | date:'MM/dd/yyyy'"></td>
-                            <td ng-bind="item.purchaseOrderNumber"></td>
-                            <td ng-bind="item.statusDisplay"></td>
-                            <td ng-bind="item.total.formattedValue"></td>
-                            <td>
-                                <a class="btn btn-secondary btn-sm"
-                                   href="{{globalData.contextPath + '/my-account/order/' + item.code}}">View
-                                    Order</a>
-                            </td>
-                        </tr>
-                        </tbody>
-                    </table>
-                    <div class="row">
+                </div>
+            </div>
+            <div grid-data id='test' grid-options="gridOptions" grid-actions="gridActions">
+                <div>
+                    <strong>
+                        found : {{filtered.length}} items
+                    </strong>
+                </div>
+                <pagination max-size="5"
+                            boundary-links="true"
+                            class="pagination-sm"
+                            ng-if="paginationOptions.totalItems  > paginationOptions.itemsPerPage"
+                            total-items="paginationOptions.totalItems"
+                            ng-model="paginationOptions.currentPage"
+                            ng-change="reloadGrid()"
+                            items-per-page="paginationOptions.itemsPerPage"></pagination>
+                <table class="table table-hover table-leo table-condensed table-bordered table-striped">
+                    <thead>
+                    <tr>
+                        <th sortable="code" class="sortable">
+                            Order #
+                        </th>
+                        <th sortable="placed" class="sortable">
+                            Date Placed
+                        </th>
+                        <th sortable="purchaseOrderNumber" class="sortable">
+                            Purchase Order #
+                        </th>
+                        <th class="st-sort-disable th-dropdown">
+                            <select class="form-control width-15"
+                                    filter-by="statusDisplay"
+                                    filter-type="select"
+                                    ng-model="status"
+                                    ng-change="filter()">
+                                <option value="">All Statuses</option>
+                            </select>
+                        </th>
+                        <th sortable='total.value' class="sortable">
+                            Total
+                        </th>
+                        <th class="st-sort-disable">
+                        </th>
+                    </tr>
+                    </thead>
+                    <tbody>
+                    <tr grid-item>
+                        <td>
+                            <a ng-bind="item.code"></a>
+                        </td>
+                        <td ng-bind="item.placed | date:'MM/dd/yyyy'"></td>
+                        <td ng-bind="item.purchaseOrderNumber"></td>
+                        <td ng-bind="item.statusDisplay"></td>
+                        <td ng-bind="item.total.formattedValue"></td>
+                        <td>
+                            <a class="btn btn-secondary btn-sm"
+                               href="{{globalData.contextPath + '/my-account/order/' + item.code}}">View
+                                Order</a>
+                        </td>
+                    </tr>
+                    </tbody>
+                </table>
+                <div class="col-wrap">
+                    <div class="col2">
                         <pagination max-size="5"
                                     boundary-links="true"
                                     class="pagination-sm"
@@ -153,6 +143,8 @@ <h1>Angular Data Grid</h1>
                                     ng-model="paginationOptions.currentPage"
                                     ng-change="reloadGrid()"
                                     items-per-page="paginationOptions.itemsPerPage"></pagination>
+                    </div>
+                    <div class="col2">
                         <div grid-item-per-page="10, 25, 50, 75" class="pagination-sm"></div>
                     </div>
                 </div>
@@ -160,6 +152,7 @@ <h1>Angular Data Grid</h1>
         </div>
     </div>
 </div>
+</div>
 </body>
 
 <!--<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>-->
diff --git a/dist/material.css b/dist/material.css
index 823b576..b84d354 100644
--- a/dist/material.css
+++ b/dist/material.css
@@ -1,6 +1,8 @@
 table {
   border-collapse: collapse;
   border-spacing: 0;
+  width: 100%;
+  font-size: 16px;
   margin: 8px;
   box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 2px 1px -1px rgba(0, 0, 0, 0.12); }
 
@@ -93,3 +95,139 @@ th.sortable {
 
 .items-per-page a {
   cursor: pointer; }
+
+.pagination-prev a {
+  font-size: 0;
+  width: 30px;
+  position: relative; }
+  .pagination-prev a:before {
+    left: 0;
+    top: 0;
+    bottom: 0;
+    right: 0;
+    margin: auto;
+    position: absolute;
+    display: block;
+    width: 10px;
+    height: 10px;
+    content: '';
+    transform-origin: center;
+    border-left: 2px solid #333;
+    border-bottom: 2px solid #333;
+    transform: rotate(45deg); }
+
+.pagination-next a {
+  font-size: 0;
+  width: 30px;
+  position: relative; }
+  .pagination-next a:before {
+    left: 0;
+    top: 0;
+    bottom: 0;
+    right: 0;
+    margin: auto;
+    position: absolute;
+    display: block;
+    width: 10px;
+    height: 10px;
+    content: '';
+    transform-origin: center;
+    border-left: 2px solid #333;
+    border-bottom: 2px solid #333;
+    transform: rotate(-135deg); }
+
+.pagination-first a {
+  font-size: 0;
+  width: 30px;
+  position: relative; }
+  .pagination-first a:before {
+    left: 0;
+    top: 0;
+    bottom: 0;
+    right: 0;
+    margin: auto;
+    position: absolute;
+    display: block;
+    width: 10px;
+    height: 10px;
+    content: '';
+    transform-origin: center;
+    border-left: 2px solid #333;
+    border-bottom: 2px solid #333;
+    transform: rotate(45deg); }
+  .pagination-first a:after {
+    left: 4px;
+    width: 2px;
+    height: 14px;
+    content: '';
+    top: 0;
+    bottom: 0;
+    position: absolute;
+    margin: auto 0;
+    background: #333; }
+
+.pagination-last a {
+  font-size: 0;
+  width: 30px;
+  position: relative; }
+  .pagination-last a:before {
+    left: 0;
+    top: 0;
+    bottom: 0;
+    right: 0;
+    margin: auto;
+    position: absolute;
+    display: block;
+    width: 10px;
+    height: 10px;
+    content: '';
+    transform-origin: center;
+    border-left: 2px solid #333;
+    border-bottom: 2px solid #333;
+    transform: rotate(-135deg); }
+  .pagination-last a:after {
+    right: 4px;
+    width: 2px;
+    height: 14px;
+    content: '';
+    top: 0;
+    bottom: 0;
+    position: absolute;
+    margin: auto 0;
+    background: #333; }
+
+.form-group {
+  position: relative; }
+
+input:not([type]), input[type=text], input[type=password], input[type=email], input[type=url], input[type=time], input[type=date], input[type=datetime-local], input[type=tel], input[type=number], input[type=search], textarea.materialize-textarea {
+  background-color: transparent;
+  border: none;
+  border-bottom: 1px solid #444;
+  border-radius: 0;
+  outline: none;
+  height: 3rem;
+  width: 100%;
+  font-size: 1rem;
+  margin: 0 0 15px 0;
+  padding: 0;
+  box-shadow: none;
+  box-sizing: content-box;
+  transition: all .2s; }
+  input:not([type]):focus, input[type=text]:focus, input[type=password]:focus, input[type=email]:focus, input[type=url]:focus, input[type=time]:focus, input[type=date]:focus, input[type=datetime-local]:focus, input[type=tel]:focus, input[type=number]:focus, input[type=search]:focus, textarea.materialize-textarea:focus {
+    border-bottom: 1px solid #106cc8;
+    box-shadow: 0 1px 0 0 #106cc8; }
+    input:not([type]):focus ~ .input-label, input[type=text]:focus ~ .input-label, input[type=password]:focus ~ .input-label, input[type=email]:focus ~ .input-label, input[type=url]:focus ~ .input-label, input[type=time]:focus ~ .input-label, input[type=date]:focus ~ .input-label, input[type=datetime-local]:focus ~ .input-label, input[type=tel]:focus ~ .input-label, input[type=number]:focus ~ .input-label, input[type=search]:focus ~ .input-label, textarea.materialize-textarea:focus ~ .input-label {
+      -webkit-transform: translateY(-140%) scale(1);
+      transform: translateY(-140%) scale(1);
+      color: #106cc8; }
+
+.input-label {
+  color: #444;
+  position: absolute;
+  top: 0.8rem;
+  left: 0;
+  font-size: 1rem;
+  cursor: text;
+  transition: all .2s;
+  transform: scale(1.25);
+  transform-origin: left bottom; }
diff --git a/index.html b/index.html
index 1ad4606..f16c8d0 100644
--- a/index.html
+++ b/index.html
@@ -128,18 +128,6 @@ <h1>Angular Data Grid</h1>
                         </tr>
                         </thead>
                         <tbody>
-                        <!--<tr grid-item>-->
-                            <!--<td>-->
-                                <!--<a ng-bind="item.code"></a>-->
-                            <!--</td>-->
-                            <!--<td ng-bind="item.placed | date:'MM/dd/yyyy'"></td>-->
-                            <!--<td ng-bind="item.purchaseOrderNumber"></td>-->
-                            <!--<td ng-bind="item.statusDisplay"></td>-->
-                            <!--<td ng-bind="item.total.formattedValue"></td>-->
-                            <!--<td>-->
-                                <!--View Order-->
-                            <!--</td>-->
-                        <!--</tr>-->
                         <tr grid-item>
                             <td>
                                 <a ng-bind="item.code"></a>
diff --git a/src/css/demo.scss b/src/css/demo.scss
index 05c77cc..1b60d93 100644
--- a/src/css/demo.scss
+++ b/src/css/demo.scss
@@ -21,6 +21,7 @@ h1 {
 }
 .b-change-theme {
   padding: 20px;
+  margin-bottom: 20px;
   &__link {
     font-size: 16px;
     line-height: 20px;
@@ -123,4 +124,20 @@ th.sortable {
       margin: auto 0;
     }
   }
+}
+.col-wrap {
+  font-size: 0;
+  padding: 25px 0;
+  .col2 {
+    vertical-align: top;
+    display: inline-block;
+    width: 50%;
+    padding: 0 15px;
+  }
+  .col3 {
+    vertical-align: top;
+    display: inline-block;
+    width: 33.33%;
+    padding: 0 15px;
+  }
 }
\ No newline at end of file
diff --git a/src/css/material.scss b/src/css/material.scss
index b68987d..fa69a9a 100644
--- a/src/css/material.scss
+++ b/src/css/material.scss
@@ -3,6 +3,8 @@ table {
   border-collapse: collapse;
   border-spacing: 0;
 
+  width: 100%;
+  font-size: 16px;
   margin: 8px;
   box-shadow: 0 1px 3px 0 rgba(0,0,0,.2),0 1px 1px 0 rgba(0,0,0,.14),0 2px 1px -1px rgba(0,0,0,.12);
 }
@@ -52,7 +54,7 @@ table {
 .pagination-page {
   transition: background .1s ease-out, color .1s ease-out;
   &.active {
-    background: $activeBg;
+    background: $activeColor;
     a {
       color: $activeText;
     }
@@ -61,7 +63,7 @@ table {
 .pagination {
   transition: background .1s ease-out, color .1s ease-out;
   .active {
-    background: $activeBg;
+    background: $activeColor;
     a {
       color: $activeText;
     }
@@ -107,7 +109,7 @@ th.sortable {
 
 .items-per-page {
   .active {
-    background: $activeBg;
+    background: $activeColor;
     a {
       color: $activeText;
     }
@@ -115,4 +117,150 @@ th.sortable {
   a {
     cursor: pointer;
   }
+}
+
+.pagination-prev a {
+  font-size: 0;
+  width: 30px;
+  position: relative;
+  &:before {
+    left: 0;
+    top: 0;
+    bottom: 0;
+    right: 0;
+    margin: auto;
+    position: absolute;
+    display: block;
+    width: 10px;
+    height: 10px;
+    content: '';
+    transform-origin:center;
+    border-left: 2px solid $iconsColor;
+    border-bottom: 2px solid $iconsColor;
+    transform: rotate(45deg);
+  }
+}
+.pagination-next a {
+  font-size: 0;
+  width: 30px;
+  position: relative;
+  &:before {
+    left: 0;
+    top: 0;
+    bottom: 0;
+    right: 0;
+    margin: auto;
+    position: absolute;
+    display: block;
+    width: 10px;
+    height: 10px;
+    content: '';
+    transform-origin:center;
+    border-left: 2px solid $iconsColor;
+    border-bottom: 2px solid $iconsColor;
+    transform: rotate(-135deg);
+  }
+}
+.pagination-first a {
+  font-size: 0;
+  width: 30px;
+  position: relative;
+  &:before {
+    left: 0;
+    top: 0;
+    bottom: 0;
+    right: 0;
+    margin: auto;
+    position: absolute;
+    display: block;
+    width: 10px;
+    height: 10px;
+    content: '';
+    transform-origin:center;
+    border-left: 2px solid $iconsColor;
+    border-bottom: 2px solid $iconsColor;
+    transform: rotate(45deg);
+  }
+  &:after {
+    left: 4px;
+    width: 2px;
+    height: 14px;
+    content: '';
+    top: 0;
+    bottom: 0;
+    position: absolute;
+    margin: auto 0;
+    background: $iconsColor;
+  }
+}
+.pagination-last a {
+  font-size: 0;
+  width: 30px;
+  position: relative;
+  &:before {
+    left: 0;
+    top: 0;
+    bottom: 0;
+    right: 0;
+    margin: auto;
+    position: absolute;
+    display: block;
+    width: 10px;
+    height: 10px;
+    content: '';
+    transform-origin:center;
+    border-left: 2px solid $iconsColor;
+    border-bottom: 2px solid $iconsColor;
+    transform: rotate(-135deg);
+  }
+  &:after {
+    right: 4px;
+    width: 2px;
+    height: 14px;
+    content: '';
+    top: 0;
+    bottom: 0;
+    position: absolute;
+    margin: auto 0;
+    background: $iconsColor;
+  }
+}
+
+.form-group {
+  position: relative;
+}
+input:not([type]), input[type=text], input[type=password], input[type=email], input[type=url], input[type=time], input[type=date], input[type=datetime-local], input[type=tel], input[type=number], input[type=search], textarea.materialize-textarea {
+  background-color: transparent;
+  border: none;
+  border-bottom: 1px solid $textColor;
+  border-radius: 0;
+  outline: none;
+  height: 3rem;
+  width: 100%;
+  font-size: 1rem;
+  margin: 0 0 15px 0;
+  padding: 0;
+  box-shadow: none;
+  box-sizing: content-box;
+  transition: all .2s;
+  &:focus {
+    border-bottom: 1px solid $activeColor;
+    box-shadow: 0 1px 0 0 $activeColor;
+    &~.input-label{
+      -webkit-transform: translateY(-140%) scale(1);
+      transform: translateY(-140%) scale(1);
+      color: $activeColor;
+    }
+  }
+}
+.input-label {
+  color: $textColor;
+  position: absolute;
+  top: 0.8rem;
+  left: 0;
+  font-size: 1rem;
+  cursor: text;
+  transition: all .2s;
+  transform: scale(1.25);
+  transform-origin: left bottom;
 }
\ No newline at end of file
diff --git a/src/css/variables.scss b/src/css/variables.scss
index 0ed9536..6217f6b 100644
--- a/src/css/variables.scss
+++ b/src/css/variables.scss
@@ -1,3 +1,4 @@
-$activeBg: rgb(16,108,200);
+$activeColor: rgb(16,108,200);
 $activeText: #fff;
-$textColor: #444;
\ No newline at end of file
+$textColor: #444;
+$iconsColor: #333;
\ No newline at end of file

From 5f2f9600426a1ca8770c6fa6d728b352d6e130d8 Mon Sep 17 00:00:00 2001
From: IvanBisultanov <IvanBisutlanov@gmail.com>
Date: Wed, 30 Dec 2015 13:08:47 +0300
Subject: [PATCH 2/2] add Angular Material

---
 demo/demo.css          |  67 +++-------
 demo/demoApp.js        |   4 +-
 demo/index.html        | 140 +++++++++++----------
 dist/material.css      | 242 +++++++++---------------------------
 index.html             |   7 +-
 src/css/demo.scss      |  78 +++++-------
 src/css/material.scss  | 269 ++++++++++-------------------------------
 src/css/variables.scss |   8 +-
 8 files changed, 250 insertions(+), 565 deletions(-)

diff --git a/demo/demo.css b/demo/demo.css
index 846df99..d72570b 100644
--- a/demo/demo.css
+++ b/demo/demo.css
@@ -1,6 +1,9 @@
 *, *:before, *:after {
   box-sizing: border-box; }
 
+:focus {
+  outline: none; }
+
 body {
   font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; }
 
@@ -62,63 +65,33 @@ h1 {
 th.sortable {
   line-height: 24px;
   position: relative; }
-  th.sortable.sort-descent:before {
+  th.sortable.sort-descent:before, th.sortable.sort-descent:after, th.sortable.sort-ascent:before, th.sortable.sort-ascent:after {
     content: '';
     position: absolute;
+    margin: auto 0; }
+  th.sortable.sort-descent:before, th.sortable.sort-ascent:before {
     left: 12px;
     width: 2px;
     background: #333;
-    height: 12px;
-    top: 0;
-    bottom: 0;
-    margin: auto 0; }
-  th.sortable.sort-descent:after {
-    content: '';
-    position: absolute;
+    height: 12px; }
+  th.sortable.sort-descent:after, th.sortable.sort-ascent:after {
     left: 9px;
     border-top: 2px solid #333;
     border-left: 2px solid #333;
     transform-origin: center;
-    transform: rotate(-135deg);
     height: 8px;
-    width: 8px;
-    top: 6px;
-    bottom: 0;
-    margin: auto 0; }
+    width: 8px; }
+  th.sortable.sort-descent:before, th.sortable.sort-descent:after {
+    bottom: 0; }
+  th.sortable.sort-descent:before {
+    top: 0; }
+  th.sortable.sort-descent:after {
+    transform: rotate(-135deg);
+    top: 6px; }
+  th.sortable.sort-ascent:before, th.sortable.sort-ascent:after {
+    top: 0; }
   th.sortable.sort-ascent:before {
-    content: '';
-    position: absolute;
-    left: 12px;
-    width: 2px;
-    background: #333;
-    height: 12px;
-    top: 0;
-    bottom: 0;
-    margin: auto 0; }
+    bottom: 0; }
   th.sortable.sort-ascent:after {
-    content: '';
-    position: absolute;
-    left: 9px;
-    border-top: 2px solid #333;
-    border-left: 2px solid #333;
-    transform-origin: center;
     transform: rotate(45deg);
-    height: 8px;
-    width: 8px;
-    top: 0;
-    bottom: 6px;
-    margin: auto 0; }
-
-.col-wrap {
-  font-size: 0;
-  padding: 25px 0; }
-  .col-wrap .col2 {
-    vertical-align: top;
-    display: inline-block;
-    width: 50%;
-    padding: 0 15px; }
-  .col-wrap .col3 {
-    vertical-align: top;
-    display: inline-block;
-    width: 33.33%;
-    padding: 0 15px; }
+    bottom: 6px; }
diff --git a/demo/demoApp.js b/demo/demoApp.js
index 0328a1b..5122559 100644
--- a/demo/demoApp.js
+++ b/demo/demoApp.js
@@ -1,4 +1,5 @@
-angular.module('myApp', ['dataGrid', 'pagination'])
+angular
+    .module('myApp', ['dataGrid', 'pagination', 'ngMaterial'])
     .controller('myAppController', ['$scope', 'myAppFactory', function ($scope, myAppFactory) {
 
         $scope.gridOptions = {
@@ -10,7 +11,6 @@ angular.module('myApp', ['dataGrid', 'pagination'])
     .factory('myAppFactory', function () {
         return {
             getData: function () {
-                //return $http.get(root + '/posts', {});
                 return [{
                     "total": {
                         "currencyIso": "USD",
diff --git a/demo/index.html b/demo/index.html
index 36716cf..d3b2211 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -3,6 +3,7 @@
 <head lang="en">
     <meta charset="UTF-8">
     <title>Flat JSON format for data tables</title>
+    <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">
     <link rel="stylesheet" href="demo.css">
     <link rel="stylesheet" href="../dist/material.css">
 </head>
@@ -15,64 +16,51 @@ <h1>Angular Data Grid</h1>
             <span class="b-change-theme__link _active">Material Design</span>
         </div>
         <div>
-            <div class="col-wrap">
-                <div class="col3">
-                    <div class="form-group">
-                        <input type="text"
-                               id="sort"
-                               class="form-control order-search-box"
-                               ng-change="gridActions.filter()"
-                               ng-model="code"
-                               filter-by="code"
-                               filter-type="text">
-                        <label for="sort" class="input-label">Search By Order #</label>
-                    </div>
-                </div>
-                <div class="col3">
-                    <div class="form-group">
-                        <div class="input-group datepicker">
-                            <input type="text"
-                                   id="dateFrom"
-                                   class="form-control"
-                                   is-open="dateFromOpened"
-                                   ng-click="dateFromOpened = true"
-                                   datepicker-popup="shortDate"
-                                   filter-by="placed"
-                                   filter-type="dateFrom"
-                                   ng-model="dateFrom"
-                                   ng-blur="gridActions.filter()"
-                                   ng-focus="gridActions.filter()"
-                                   max-date="dateTo"
-                                   show-weeks="false"
-                                   close-text="Close"/>
-                            <label for="dateFrom" class="input-label">From</label>
-                        </div>
-                    </div>
-                    <div ng-show="dateTo || dateFrom" class="buttons-right">
-                        <a href="" ng-click="dateTo = ''; dateFrom = ''; reloadGrid();">Clear Dates</a>
-                    </div>
-                </div>
-                <div class="col3">
-                    <div class="form-group">
-                        <div class="input-group datepicker">
-                            <input type="text"
-                                   id="dateTo"
-                                   class="form-control"
-                                   is-open="dateToOpened"
-                                   ng-click="dateToOpened = true"
-                                   min-date="dateFrom"
-                                   datepicker-popup="shortDate"
-                                   filter-by="placed"
-                                   filter-type="dateTo"
-                                   ng-model="dateTo"
-                                   ng-blur="gridActions.filter()"
-                                   ng-focus="gridActions.filter()"
-                                   show-weeks="false"
-                                   close-text="Close"/>
-                            <label for="dateTo" class="input-label">To</label>
-                        </div>
-                    </div>
-                </div>
+            <div layout-gt-sm="row" class="layout-gt-sm-row">
+                <md-input-container class="md-block flex-gt-sm md-input-has-value" flex-gt-sm="">
+                    <label for="order">Search By Order #</label>
+                    <input ng-model="code"
+                           class="md-input"
+                           ng-change="gridActions.filter()"
+                           id="order"
+                           filter-by="code"
+                           filter-type="text"
+                           aria-invalid="false">
+                </md-input-container>
+                <md-input-container class="md-block flex-gt-sm md-input-has-value" flex-gt-sm="">
+                    <label for="dateFrom">From</label>
+                    <input ng-model="dateFrom"
+                           datepicker-popup="shortDate"
+                           is-open="dateFromOpened"
+                           ng-click="dateFromOpened = true"
+                           class="md-input"
+                           filter-by="placed"
+                           filter-type="dateFrom"
+                           ng-model="dateFrom"
+                           id="dateFrom"
+                           ng-blur="gridActions.filter()"
+                           ng-focus="gridActions.filter()"
+                           max-date="dateTo"
+                           show-weeks="false"
+                           close-text="Close">
+                </md-input-container>
+                <md-input-container class="md-block flex-gt-sm md-input-has-value" flex-gt-sm="">
+                    <label for="dateTo">To</label>
+                    <input type="text"
+                           id="dateTo"
+                           class="md-input"
+                           is-open="dateToOpened"
+                           ng-click="dateToOpened = true"
+                           min-date="dateFrom"
+                           datepicker-popup="shortDate"
+                           filter-by="placed"
+                           filter-type="dateTo"
+                           ng-model="dateTo"
+                           ng-blur="gridActions.filter()"
+                           ng-focus="gridActions.filter()"
+                           show-weeks="false"
+                           close-text="Close"/>
+                </md-input-container>
             </div>
             <div grid-data id='test' grid-options="gridOptions" grid-actions="gridActions">
                 <div>
@@ -101,13 +89,20 @@ <h1>Angular Data Grid</h1>
                             Purchase Order #
                         </th>
                         <th class="st-sort-disable th-dropdown">
-                            <select class="form-control width-15"
-                                    filter-by="statusDisplay"
-                                    filter-type="select"
-                                    ng-model="status"
-                                    ng-change="filter()">
-                                <option value="">All Statuses</option>
-                            </select>
+
+                            <md-input-container>
+                                <label>State</label>
+                                <md-select filter-by="statusDisplay"
+                                           filter-type="select"
+                                           ng-model="status"
+                                           ng-change="filter()">
+                                    <md-option value="">All Statuses</md-option>
+                                    <md-option ng-repeat="option in statusOptions track by option.value"
+                                               value="{{option.value}}">
+                                        {{option.text}}
+                                    </md-option>
+                                </md-select>
+                            </md-input-container>
                         </th>
                         <th sortable='total.value' class="sortable">
                             Total
@@ -133,8 +128,8 @@ <h1>Angular Data Grid</h1>
                     </tr>
                     </tbody>
                 </table>
-                <div class="col-wrap">
-                    <div class="col2">
+                <div layout-gt-sm="row" class="layout-gt-sm-row">
+                    <md-input-container class="md-block flex-gt-sm" flex-gt-sm="">
                         <pagination max-size="5"
                                     boundary-links="true"
                                     class="pagination-sm"
@@ -143,10 +138,10 @@ <h1>Angular Data Grid</h1>
                                     ng-model="paginationOptions.currentPage"
                                     ng-change="reloadGrid()"
                                     items-per-page="paginationOptions.itemsPerPage"></pagination>
-                    </div>
-                    <div class="col2">
+                    </md-input-container>
+                    <md-input-container class="md-block flex-gt-sm" flex-gt-sm="">
                         <div grid-item-per-page="10, 25, 50, 75" class="pagination-sm"></div>
-                    </div>
+                    </md-input-container>
                 </div>
             </div>
         </div>
@@ -155,8 +150,11 @@ <h1>Angular Data Grid</h1>
 </div>
 </body>
 
-<!--<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>-->
 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
+<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
+<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
+<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
+<script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>
 <script src="../dist/pagination.min.js"></script>
 <script src="../dist/dataGrid.min.js"></script>
 <script src="demoApp.js"></script>
diff --git a/dist/material.css b/dist/material.css
index b84d354..3e7484c 100644
--- a/dist/material.css
+++ b/dist/material.css
@@ -6,88 +6,36 @@ table {
   margin: 8px;
   box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 2px 1px -1px rgba(0, 0, 0, 0.12); }
 
-:focus {
-  outline: none; }
-
-.pagination {
-  display: inline-block;
-  box-sizing: border-box; }
-
-.pagination > li {
-  display: inline-block;
-  vertical-align: middle;
-  width: auto;
-  height: 30px;
-  position: relative;
-  border-radius: 2px;
-  box-sizing: border-box; }
-
-.pagination a {
-  color: #444;
-  font-size: 16px;
-  padding: 0 10px;
-  line-height: 30px;
-  display: inline-block;
-  text-decoration: none;
-  box-sizing: border-box; }
-  .pagination a .md-ripple-container {
-    border-radius: 2px; }
-
-.pagination-none-svg svg {
-  display: none !important; }
-
-.pagination-none-svg .pagination-prev a,
-.pagination-none-svg .pagination-next a,
-.pagination-none-svg .pagination-first a,
-.pagination-none-svg .pagination-last a {
-  width: 30px;
-  text-align: center;
-  line-height: 24px; }
-
-.pagination-page {
-  transition: background .1s ease-out, color .1s ease-out; }
-  .pagination-page.active {
-    background: #106cc8; }
-    .pagination-page.active a {
-      color: #fff; }
-
 .pagination {
   transition: background .1s ease-out, color .1s ease-out; }
+  .pagination > li {
+    display: inline-block;
+    vertical-align: middle;
+    height: 30px;
+    position: relative;
+    border-radius: 2px; }
+  .pagination a {
+    color: #444;
+    font-size: 16px;
+    padding: 0 10px;
+    line-height: 30px;
+    display: inline-block;
+    text-decoration: none; }
   .pagination .active {
     background: #106cc8; }
     .pagination .active a {
       color: #fff; }
-
-.table td {
+  .pagination-page {
+    transition: background .1s ease-out, color .1s ease-out; }
+    .pagination-page.active {
+      background: #106cc8; }
+      .pagination-page.active a {
+        color: #fff; }
+
+.table td, .table th {
   border-top: 1px rgba(0, 0, 0, 0.12) solid;
   padding: 12px 24px; }
 
-.table th {
-  padding: 12px 24px;
-  border-top: 1px rgba(0, 0, 0, 0.12) solid; }
-
-th.sortable {
-  line-height: 24px;
-  padding-right: 31px; }
-  th.sortable svg {
-    height: 18px;
-    width: 18px;
-    margin: 0 4px;
-    transition: fill .25s,-webkit-transform .25s;
-    transition: fill .25s,transform .25s;
-    vertical-align: middle;
-    display: none !important; }
-  th.sortable.sort-descent {
-    padding-right: 0; }
-    th.sortable.sort-descent svg {
-      display: inline-block !important; }
-  th.sortable.sort-ascent {
-    padding-right: 0; }
-    th.sortable.sort-ascent svg {
-      display: inline-block !important;
-      -webkit-transform: rotate(180deg);
-      transform: rotate(180deg); }
-
 .items-per-page .active {
   background: #106cc8; }
   .items-per-page .active a {
@@ -96,138 +44,56 @@ th.sortable {
 .items-per-page a {
   cursor: pointer; }
 
-.pagination-prev a {
+.pagination-prev a,
+.pagination-next a,
+.pagination-first a,
+.pagination-last a {
   font-size: 0;
   width: 30px;
   position: relative; }
-  .pagination-prev a:before {
+  .pagination-prev a:before,
+  .pagination-next a:before,
+  .pagination-first a:before,
+  .pagination-last a:before {
     left: 0;
     top: 0;
     bottom: 0;
     right: 0;
     margin: auto;
     position: absolute;
-    display: block;
-    width: 10px;
-    height: 10px;
     content: '';
-    transform-origin: center;
-    border-left: 2px solid #333;
-    border-bottom: 2px solid #333;
-    transform: rotate(45deg); }
-
-.pagination-next a {
-  font-size: 0;
-  width: 30px;
-  position: relative; }
-  .pagination-next a:before {
-    left: 0;
-    top: 0;
-    bottom: 0;
-    right: 0;
-    margin: auto;
-    position: absolute;
     display: block;
     width: 10px;
     height: 10px;
-    content: '';
     transform-origin: center;
     border-left: 2px solid #333;
-    border-bottom: 2px solid #333;
-    transform: rotate(-135deg); }
+    border-bottom: 2px solid #333; }
 
-.pagination-first a {
-  font-size: 0;
-  width: 30px;
-  position: relative; }
-  .pagination-first a:before {
-    left: 0;
-    top: 0;
-    bottom: 0;
-    right: 0;
-    margin: auto;
-    position: absolute;
-    display: block;
-    width: 10px;
-    height: 10px;
-    content: '';
-    transform-origin: center;
-    border-left: 2px solid #333;
-    border-bottom: 2px solid #333;
-    transform: rotate(45deg); }
-  .pagination-first a:after {
-    left: 4px;
-    width: 2px;
-    height: 14px;
-    content: '';
-    top: 0;
-    bottom: 0;
-    position: absolute;
-    margin: auto 0;
-    background: #333; }
+.pagination-first a:after,
+.pagination-last a:after {
+  content: '';
+  top: 0;
+  bottom: 0;
+  position: absolute;
+  margin: auto 0;
+  width: 2px;
+  height: 14px;
+  background: #333; }
 
-.pagination-last a {
-  font-size: 0;
-  width: 30px;
-  position: relative; }
-  .pagination-last a:before {
-    left: 0;
-    top: 0;
-    bottom: 0;
-    right: 0;
-    margin: auto;
-    position: absolute;
-    display: block;
-    width: 10px;
-    height: 10px;
-    content: '';
-    transform-origin: center;
-    border-left: 2px solid #333;
-    border-bottom: 2px solid #333;
-    transform: rotate(-135deg); }
-  .pagination-last a:after {
-    right: 4px;
-    width: 2px;
-    height: 14px;
-    content: '';
-    top: 0;
-    bottom: 0;
-    position: absolute;
-    margin: auto 0;
-    background: #333; }
+.pagination-prev a:before {
+  transform: rotate(45deg); }
 
-.form-group {
-  position: relative; }
+.pagination-next a:before {
+  transform: rotate(-135deg); }
 
-input:not([type]), input[type=text], input[type=password], input[type=email], input[type=url], input[type=time], input[type=date], input[type=datetime-local], input[type=tel], input[type=number], input[type=search], textarea.materialize-textarea {
-  background-color: transparent;
-  border: none;
-  border-bottom: 1px solid #444;
-  border-radius: 0;
-  outline: none;
-  height: 3rem;
-  width: 100%;
-  font-size: 1rem;
-  margin: 0 0 15px 0;
-  padding: 0;
-  box-shadow: none;
-  box-sizing: content-box;
-  transition: all .2s; }
-  input:not([type]):focus, input[type=text]:focus, input[type=password]:focus, input[type=email]:focus, input[type=url]:focus, input[type=time]:focus, input[type=date]:focus, input[type=datetime-local]:focus, input[type=tel]:focus, input[type=number]:focus, input[type=search]:focus, textarea.materialize-textarea:focus {
-    border-bottom: 1px solid #106cc8;
-    box-shadow: 0 1px 0 0 #106cc8; }
-    input:not([type]):focus ~ .input-label, input[type=text]:focus ~ .input-label, input[type=password]:focus ~ .input-label, input[type=email]:focus ~ .input-label, input[type=url]:focus ~ .input-label, input[type=time]:focus ~ .input-label, input[type=date]:focus ~ .input-label, input[type=datetime-local]:focus ~ .input-label, input[type=tel]:focus ~ .input-label, input[type=number]:focus ~ .input-label, input[type=search]:focus ~ .input-label, textarea.materialize-textarea:focus ~ .input-label {
-      -webkit-transform: translateY(-140%) scale(1);
-      transform: translateY(-140%) scale(1);
-      color: #106cc8; }
+.pagination-first a:before {
+  transform: rotate(45deg); }
 
-.input-label {
-  color: #444;
-  position: absolute;
-  top: 0.8rem;
-  left: 0;
-  font-size: 1rem;
-  cursor: text;
-  transition: all .2s;
-  transform: scale(1.25);
-  transform-origin: left bottom; }
+.pagination-first a:after {
+  left: 4px; }
+
+.pagination-last a:before {
+  transform: rotate(-135deg); }
+
+.pagination-last a:after {
+  right: 4px; }
diff --git a/index.html b/index.html
index f16c8d0..6f1283e 100644
--- a/index.html
+++ b/index.html
@@ -118,6 +118,8 @@ <h1>Angular Data Grid</h1>
                                         ng-model="status"
                                         ng-change="filter()">
                                     <option value="">All Statuses</option>
+                                    <option ng-repeat="option in statusOptions track by option.value"
+                                            value="{{option.value}}">{{option.text}}</option>
                                 </select>
                             </th>
                             <th sortable='total.value' class="sortable">
@@ -166,8 +168,11 @@ <h1>Angular Data Grid</h1>
 </div>
 </body>
 
-<!--<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>-->
 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
+<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
+<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
+<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
+<script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>
 <script src="dist/pagination.min.js"></script>
 <script src="dist/dataGrid.min.js"></script>
 <script src="demo/demoApp.js"></script>
diff --git a/src/css/demo.scss b/src/css/demo.scss
index 1b60d93..961b684 100644
--- a/src/css/demo.scss
+++ b/src/css/demo.scss
@@ -1,6 +1,10 @@
+@import 'variables';
 *, *:before, *:after {
   box-sizing: border-box;
 }
+:focus {
+  outline: none;
+}
 body {
   font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
 }
@@ -57,6 +61,7 @@ h1 {
     }
   }
 }
+
 .table {
   td {
     padding: 12px 24px !important;
@@ -70,74 +75,53 @@ h1 {
 th.sortable {
   line-height: 24px;
   position: relative;
-  &.sort-descent {
-    &:before {
+  &.sort-descent,
+  &.sort-ascent {
+    &:before,
+    &:after {
       content: '';
       position: absolute;
+      margin: auto 0;
+    }
+    &:before {
       left: 12px;
       width: 2px;
-      background: #333;
+      background: $backgroundIcons;
       height: 12px;
-      top: 0;
-      bottom: 0;
-      margin: auto 0;
     }
     &:after {
-      content: '';
-      position: absolute;
       left: 9px;
-      border-top: 2px solid #333;
-      border-left: 2px solid #333;
+      border-top: 2px solid $backgroundIcons;
+      border-left: 2px solid $backgroundIcons;
       transform-origin:center;
-      transform: rotate(-135deg);
       height: 8px;
       width: 8px;
-      top: 6px;
+    }
+  }
+  &.sort-descent {
+    &:before,
+    &:after {
       bottom: 0;
-      margin: auto 0;
+    }
+    &:before {
+      top: 0;
+    }
+    &:after {
+      transform: rotate(-135deg);
+      top: 6px;
     }
   }
   &.sort-ascent {
-    &:before {
-      content: '';
-      position: absolute;
-      left: 12px;
-      width: 2px;
-      background: #333;
-      height: 12px;
+    &:before,
+    &:after {
       top: 0;
+    }
+    &:before {
       bottom: 0;
-      margin: auto 0;
     }
     &:after {
-      content: '';
-      position: absolute;
-      left: 9px;
-      border-top: 2px solid #333;
-      border-left: 2px solid #333;
-      transform-origin:center;
       transform: rotate(45deg);
-      height: 8px;
-      width: 8px;
-      top: 0;
       bottom: 6px;
-      margin: auto 0;
     }
   }
-}
-.col-wrap {
-  font-size: 0;
-  padding: 25px 0;
-  .col2 {
-    vertical-align: top;
-    display: inline-block;
-    width: 50%;
-    padding: 0 15px;
-  }
-  .col3 {
-    vertical-align: top;
-    display: inline-block;
-    width: 33.33%;
-    padding: 0 15px;
-  }
 }
\ No newline at end of file
diff --git a/src/css/material.scss b/src/css/material.scss
index fa69a9a..49c4557 100644
--- a/src/css/material.scss
+++ b/src/css/material.scss
@@ -2,116 +2,55 @@
 table {
   border-collapse: collapse;
   border-spacing: 0;
-
   width: 100%;
   font-size: 16px;
   margin: 8px;
   box-shadow: 0 1px 3px 0 rgba(0,0,0,.2),0 1px 1px 0 rgba(0,0,0,.14),0 2px 1px -1px rgba(0,0,0,.12);
 }
-:focus {
-  outline: none;
-}
 .pagination {
-  display: inline-block;
-  box-sizing: border-box;
-}
-.pagination > li{
-  display: inline-block;
-  vertical-align: middle;
-  width: auto;
-  height: 30px;
-  position: relative;
-  border-radius: 2px;
-  box-sizing: border-box;
-}
-.pagination a {
-  color: $textColor;
-  font-size: 16px;
-  padding: 0 10px;
-  line-height: 30px;
-  display: inline-block;
-  text-decoration: none;
-  box-sizing: border-box;
-  .md-ripple-container {
+  transition: background .1s ease-out, color .1s ease-out;
+  & > li{
+    display: inline-block;
+    vertical-align: middle;
+    height: 30px;
+    position: relative;
     border-radius: 2px;
   }
-}
-.pagination-none-svg {
-  svg {
-    display: none !important;
-  }
-  .pagination-prev,
-  .pagination-next,
-  .pagination-first,
-  .pagination-last {
-    a {
-      width: 30px;
-      text-align: center;
-      line-height: 24px;
-    }
+  a {
+    color: $foregroundDefault;
+    font-size: 16px;
+    padding: 0 10px;
+    line-height: 30px;
+    display: inline-block;
+    text-decoration: none;
   }
-}
-.pagination-page {
-  transition: background .1s ease-out, color .1s ease-out;
-  &.active {
-    background: $activeColor;
+  .active {
+    background: $backgroundActive;
     a {
-      color: $activeText;
+      color: $foregroundActive;
     }
   }
-}
-.pagination {
-  transition: background .1s ease-out, color .1s ease-out;
-  .active {
-    background: $activeColor;
-    a {
-      color: $activeText;
+  &-page {
+    transition: background .1s ease-out, color .1s ease-out;
+    &.active {
+      background: $backgroundActive;
+      a {
+        color: $foregroundActive;
+      }
     }
   }
 }
 .table {
-  td {
+  td, th {
     border-top: 1px rgba(0,0,0,.12) solid;
     padding: 12px 24px;
   }
-  th {
-    padding: 12px 24px;
-    border-top: 1px rgba(0,0,0,.12) solid;
-  }
-}
-th.sortable {
-  line-height: 24px;
-  svg {
-    height: 18px;
-    width: 18px;
-    margin: 0 4px;
-    transition: fill .25s,-webkit-transform .25s;
-    transition: fill .25s,transform .25s;
-    vertical-align: middle;
-    display: none !important;
-  }
-  padding-right: 31px;
-  &.sort-descent {
-    padding-right: 0;
-    svg {
-      display: inline-block !important;
-    }
-  }
-  &.sort-ascent {
-    padding-right: 0;
-    svg {
-      display: inline-block !important;
-      -webkit-transform: rotate(180deg);
-      transform: rotate(180deg);
-    }
-  }
 }
-
 .items-per-page {
   .active {
-    background: $activeColor;
+    background: $backgroundActive;
     a {
-      color: $activeText;
+      color: $foregroundActive;
     }
   }
   a {
@@ -119,148 +58,68 @@ th.sortable {
   }
 }
 
-.pagination-prev a {
-  font-size: 0;
-  width: 30px;
-  position: relative;
-  &:before {
-    left: 0;
+.pagination-prev,
+.pagination-next,
+.pagination-first,
+.pagination-last {
+  a {
+    font-size: 0;
+    width: 30px;
+    position: relative;
+    &:before {
+      left: 0;
+      top: 0;
+      bottom: 0;
+      right: 0;
+      margin: auto;
+      position: absolute;
+      content: '';
+      display: block;
+      width: 10px;
+      height: 10px;
+      transform-origin:center;
+      border-left: 2px solid $backgroundIcons;
+      border-bottom: 2px solid $backgroundIcons;
+    }
+  }
+}
+.pagination-first,
+.pagination-last {
+  a:after {
+    content: '';
     top: 0;
     bottom: 0;
-    right: 0;
-    margin: auto;
     position: absolute;
-    display: block;
-    width: 10px;
-    height: 10px;
-    content: '';
-    transform-origin:center;
-    border-left: 2px solid $iconsColor;
-    border-bottom: 2px solid $iconsColor;
+    margin: auto 0;
+    width: 2px;
+    height: 14px;
+    background: $backgroundIcons;
+  }
+}
+
+.pagination-prev a {
+  &:before {
     transform: rotate(45deg);
   }
 }
 .pagination-next a {
-  font-size: 0;
-  width: 30px;
-  position: relative;
   &:before {
-    left: 0;
-    top: 0;
-    bottom: 0;
-    right: 0;
-    margin: auto;
-    position: absolute;
-    display: block;
-    width: 10px;
-    height: 10px;
-    content: '';
-    transform-origin:center;
-    border-left: 2px solid $iconsColor;
-    border-bottom: 2px solid $iconsColor;
     transform: rotate(-135deg);
   }
 }
 .pagination-first a {
-  font-size: 0;
-  width: 30px;
-  position: relative;
   &:before {
-    left: 0;
-    top: 0;
-    bottom: 0;
-    right: 0;
-    margin: auto;
-    position: absolute;
-    display: block;
-    width: 10px;
-    height: 10px;
-    content: '';
-    transform-origin:center;
-    border-left: 2px solid $iconsColor;
-    border-bottom: 2px solid $iconsColor;
     transform: rotate(45deg);
   }
   &:after {
     left: 4px;
-    width: 2px;
-    height: 14px;
-    content: '';
-    top: 0;
-    bottom: 0;
-    position: absolute;
-    margin: auto 0;
-    background: $iconsColor;
   }
 }
 .pagination-last a {
-  font-size: 0;
-  width: 30px;
-  position: relative;
   &:before {
-    left: 0;
-    top: 0;
-    bottom: 0;
-    right: 0;
-    margin: auto;
-    position: absolute;
-    display: block;
-    width: 10px;
-    height: 10px;
-    content: '';
-    transform-origin:center;
-    border-left: 2px solid $iconsColor;
-    border-bottom: 2px solid $iconsColor;
     transform: rotate(-135deg);
   }
   &:after {
     right: 4px;
-    width: 2px;
-    height: 14px;
-    content: '';
-    top: 0;
-    bottom: 0;
-    position: absolute;
-    margin: auto 0;
-    background: $iconsColor;
-  }
-}
-
-.form-group {
-  position: relative;
-}
-input:not([type]), input[type=text], input[type=password], input[type=email], input[type=url], input[type=time], input[type=date], input[type=datetime-local], input[type=tel], input[type=number], input[type=search], textarea.materialize-textarea {
-  background-color: transparent;
-  border: none;
-  border-bottom: 1px solid $textColor;
-  border-radius: 0;
-  outline: none;
-  height: 3rem;
-  width: 100%;
-  font-size: 1rem;
-  margin: 0 0 15px 0;
-  padding: 0;
-  box-shadow: none;
-  box-sizing: content-box;
-  transition: all .2s;
-  &:focus {
-    border-bottom: 1px solid $activeColor;
-    box-shadow: 0 1px 0 0 $activeColor;
-    &~.input-label{
-      -webkit-transform: translateY(-140%) scale(1);
-      transform: translateY(-140%) scale(1);
-      color: $activeColor;
-    }
   }
-}
-.input-label {
-  color: $textColor;
-  position: absolute;
-  top: 0.8rem;
-  left: 0;
-  font-size: 1rem;
-  cursor: text;
-  transition: all .2s;
-  transform: scale(1.25);
-  transform-origin: left bottom;
 }
\ No newline at end of file
diff --git a/src/css/variables.scss b/src/css/variables.scss
index 6217f6b..40d2f45 100644
--- a/src/css/variables.scss
+++ b/src/css/variables.scss
@@ -1,4 +1,4 @@
-$activeColor: rgb(16,108,200);
-$activeText: #fff;
-$textColor: #444;
-$iconsColor: #333;
\ No newline at end of file
+$backgroundActive: rgb(16,108,200);
+$foregroundActive: #fff;
+$foregroundDefault: #444;
+$backgroundIcons: #333;
\ No newline at end of file