Style pagination buttons

mesosphere · Jan 28, 2016 · 3111090 · 3111090
1 parent a536467
commit 3111090
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 33 deletions.
diff --git a/src/css/components/pagination.less b/src/css/components/pagination.less
@@ -3,8 +3,7 @@
  * ==============
  */
 .pagination-unstyled {
-  margin-bottom: -9px;
-  margin-top: -6px;
+  margin: 0;
 }
 
 .item-numbers {
@@ -14,40 +13,21 @@
 
 .pagination > li:first-child > button {
   margin-left: 0;
-  border-top-left-radius: 4px;
-  border-bottom-left-radius: 4px;
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
 }
 
 .pagination > li:last-child > button {
   margin-right: 0;
-  border-top-right-radius: 4px;
-  border-bottom-right-radius: 4px;
-}
-
-.pagination > li > button {
-  color: @black-haze;
-  background-color: @shuttle-gray;
-  border: 1px solid @primary-bg-color;
-  line-height: 1.5;
-  padding: 5px 10px;
-}
-
-.pagination > li > button:hover,
-.pagination > li > button:focus {
-  color: @black-haze;
-  background-color: @oslo-gray;
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+  border-left: 0;
 }
 
 .pagination > .disabled > button,
 .pagination > .disabled > button:hover,
 .pagination > .disabled > button:focus {
-  color: @oslo-gray;
-  background-color: @abbey;
-}
-
-.pagination > .success > button,
-.pagination > .success > button:hover,
-.pagination > .success > button:focus {
-  color: @black-haze;
-  background-color: @mountain-meadow;
+  background-color: @btn-default-active-bg-color;
+  border-color: @btn-default-active-bg-color;
+  color: @btn-default-active-text-color;
 }
diff --git a/src/js/components/PagedNavComponent.jsx b/src/js/components/PagedNavComponent.jsx
@@ -103,23 +103,29 @@ var PagedNavComponent = React.createClass({
     var leftArrow =
       this.props.useArrows ?
         <li className={leftArrowsClassSet}>
-          <button onClick={this.handlePageChange.bind(this, currentPage - 1)}>
+          <button
+            className="btn btn-default btn-sm"
+            onClick={this.handlePageChange.bind(this, currentPage - 1)}>
             ‹
           </button>
         </li> :
         null;
     var leftEndArrow =
       this.props.useEndArrows ?
         <li className={leftArrowsClassSet}>
-          <button onClick={this.handlePageChange.bind(this, 0)}>
+          <button
+            className="btn btn-default btn-sm" 
+            onClick={this.handlePageChange.bind(this, 0)}>
             «
           </button>
         </li> :
         null;
     var rightArrow =
       this.props.useArrows ?
         <li className={rightArrowsClassSet}>
-          <button onClick={this.handlePageChange.bind(this, currentPage + 1)}>
+          <button 
+            className="btn btn-default btn-sm"
+            onClick={this.handlePageChange.bind(this, currentPage + 1)}>
             ›
           </button>
         </li> :
@@ -128,6 +134,7 @@ var PagedNavComponent = React.createClass({
       this.props.useEndArrows ?
         <li className={rightArrowsClassSet}>
           <button
+            className="btn btn-default btn-sm"
             onClick={this.handlePageChange.bind(this, noPages - 1)}>
             »
           </button>

diff --git a/src/js/components/TaskViewComponent.jsx b/src/js/components/TaskViewComponent.jsx
@@ -155,7 +155,7 @@ var TaskViewComponent = React.createClass({
           <div className="col-sm-6 base-bottom">
             {this.getButtons()}
           </div>
-          <div className="col-sm-6">
+          <div className="col-sm-6 base-bottom">
             {this.getPagedNav()}
           </div>
         </div>