Made recommended changes

wet-boew · May 14, 2024 · 96931a0 · 96931a0
1 parent 39de39b
commit 96931a0
Show file tree

Hide file tree

Showing 6 changed files with 314 additions and 278 deletions.
diff --git a/site/pages/docs/ref/paginate/paginate-en.hbs b/site/pages/docs/ref/paginate/paginate-en.hbs
@@ -120,7 +120,7 @@
 			</tr>
 			<tr>
 				<td><code>buttonsUI</code></td>
-				<td>Sets the list of items to be created as buttons instead of anchor tags.</td>
+				<td>The pagination will use <code>&lt;button&gt;</code> tags instead of <code>&lt;a&gt;</code> tags.</td>
 				<td>Boolean</td>
 				<td><code>true</code></td>
 			</tr>

diff --git a/site/pages/docs/ref/paginate/paginate-fr.hbs b/site/pages/docs/ref/paginate/paginate-fr.hbs
@@ -129,7 +129,7 @@
 			</tr>
 			<tr>
 				<td><code>buttonsUI</code></td>
-				<td>Définit la liste des éléments à créer sous forme de boutons au lieu de balises d'ancrage.</td>
+				<td>La pagination utilisera des balises <code>&lt;button&gt;</code> au lieu de balises <code>&lt;a&gt;</code>.</td>
 				<td>Booléen</td>
 				<td><code>true</code></td>
 			</tr>

diff --git a/src/plugins/paginate/_base.scss b/src/plugins/paginate/_base.scss
@@ -1,3 +1,23 @@
+// Variables
+$blue: #2572b4;
+$button-border-radius: 4px;
+
+// Mixins
+@mixin active-hover-focus {
+	background-color: $blue;
+	border-color: $blue;
+	color: #fff;
+	cursor: default;
+	z-index: 3;
+}
+
+@mixin hover-focus {
+	background-color: #d4d6da;
+	border-color: #bbbfc5;
+	color: #335075;
+	z-index: 2;
+}
+
 .wb-paginate-pager {
 	text-align: center;
 
@@ -30,60 +50,72 @@
 		border-top-right-radius: 4px;
 	}
 
-	.pagination > li > button, .pagination > li > span {
-		background-color: #eaebed;
-		border: 1px solid #dcdee1;
-		color: #335075;
-		float: left;
-		line-height: 1.4375;
-		margin-left: -1px;
-		position: relative;
-		text-decoration: none;
-	}
-
-	.pagination > .active > button, .pagination > .active > button:focus, .pagination > .active > button:hover, .pagination > .active > span, .pagination > .active > span:focus, .pagination > .active > span:hover {
-		background-color: #2572b4;
-		border-color: #2572b4;
-		color: #fff;
-		cursor: default;
-		z-index: 3;
-	}
-
+	.pagination {
+		& > li {
+			&.active {
+				& > button {
+					cursor: default;
+					outline-offset: -2px;
+				}
+			}
+			& > button {
+				background-color: #eaebed;
+				border: 1px solid #dcdee1;
+				color: #335075;
+				cursor: pointer;
+				display: inline-block;
+				float: left;
+				line-height: 1.4375;
+				margin-bottom: .5em;
+				margin-left: -1px;
+				padding: 10px 16px;
+				position: relative;
+				text-decoration: none;
 
-	.pagination > li:first-child > button, .pagination > li:first-child > span {
-		border-bottom-left-radius: 4px;
-		border-top-left-radius: 4px;
-		margin-left: 0;
-	}
+				&:hover {
+					@include hover-focus;
+				}
+				&:focus {
+					@include hover-focus;
+				}
+			}
+			&.disabled {
+				& + li {
+					& > button {
+						border-bottom-left-radius: $button-border-radius;
+						border-top-left-radius: $button-border-radius;
+					}
+				}
+			}
 
-	.pagination > li:last-child > button, .pagination > li:last-child > span {
-		border-bottom-right-radius: 4px;
-		border-top-right-radius: 4px;
-	}
+			&:first-child {
+				& > button {
+					border-bottom-left-radius: $button-border-radius;
+					border-top-left-radius: $button-border-radius;
+					margin-left: 0;
+				}
+			}
 
-	.pagination > li > button:hover, .pagination > li > button:focus,
-	.pagination > li > span:hover,
-	.pagination > li > span:focus {
-		background-color: #d4d6da;
-		border-color: #bbbfc5;
-		color: #335075;
-		z-index: 2;
-	}
-
-	.pager > li > button, .pagination > li > button {
-		cursor: pointer;
-		display: inline-block;
-		margin-bottom: .5em;
-		padding: 10px 16px;
-	}
+			&:last-child {
+				& > button {
+					border-bottom-right-radius: $button-border-radius;
+					border-top-right-radius: $button-border-radius;
+				}
+			}
 
-	.pager > li.disabled + li > button, .pagination > li.disabled + li > button {
-		border-bottom-left-radius: 4px;
-		border-top-left-radius: 4px;
-	}
+		}
 
-	.pager > li.active > button, .pagination > li.active > button {
-		cursor: default;
+		& > .active {
+			& > button {
+				@include active-hover-focus;
+				&:focus {
+					@include active-hover-focus;
+				}
+				&:hover {
+					@include active-hover-focus;
+				}
+			}
+		}
 	}
 }