basic styling of paging-buttons

uComponents · May 10, 2017 · 3c0ffbe · 3c0ffbe
1 parent 0f1432e
commit 3c0ffbe
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 3 deletions.
diff --git a/source/nuPickers/Shared/PagedListPicker/PagedListPickerEditor.css b/source/nuPickers/Shared/PagedListPicker/PagedListPickerEditor.css
@@ -1,13 +1,41 @@
 
 /* pull styling up from the .selectable ul in to this new wrapper*/
 .paged-list-picker .selectable-and-pager {
-
     width:48%;
     float: left;
-
 }
 
 /* reset .selectable to fill wrapper */
 .paged-list-picker .selectable {
     width:100%;
+}
+
+
+.paged-list-picker .paging-buttons {
+    margin: 20px 0;
+    text-align: center;
+    list-style: none;
+}
+
+.paged-list-picker .paging-buttons li {
+    display: inline;
+    line-height: 20px;
+}
+
+.paged-list-picker .paging-buttons li a {
+    display: inline-block;
+    padding: 0 10px;
+    background-color: #fff;
+    border: 1px solid #ddd;
+    border-radius: 15px;
+}
+
+.paged-list-picker .paging-buttons li a:hover,
+.paged-list-picker .paging-buttons li a:focus {
+    text-decoration:none;
+}
+
+.paged-list-picker .paging-buttons li a:hover,
+.paged-list-picker .paging-buttons li.active a {
+     background-color:#f5f5f5;
 }
diff --git a/source/nuPickers/Shared/PagedListPicker/PagedListPickerEditor.html b/source/nuPickers/Shared/PagedListPicker/PagedListPickerEditor.html
@@ -11,7 +11,7 @@
         <div class="selectable-and-pager">
             <ng-include src="'/App_Plugins/nuPickers/Shared/ListPicker/ListPickerSelectablePartial.html'" />
 
-            <ul class="pager">
+            <ul class="paging-buttons">
                 <li ng-repeat="page in pages" ng-class="{active:page == currentPage}">
                     <a prevent-default href="#" ng-click="changePage(page)">{{page}}</a>
                 </li>