mirror of
https://github.com/mdbootstrap/mdb-ui-kit.git
synced 2024-11-10 19:57:13 +03:00
fix #437
This commit is contained in:
parent
353ccd65b4
commit
07e92f54c1
|
@ -32,7 +32,7 @@ Simple pagination inspired by Rdio, great for apps and search results. The large
|
|||
<ul class="pagination">
|
||||
<li class="page-item">
|
||||
<a class="page-link" href="#" aria-label="Previous">
|
||||
<span aria-hidden="true">«</span>
|
||||
<span aria-hidden="true" class="material-icons">chevron_left</span>
|
||||
<span class="sr-only">Previous</span>
|
||||
</a>
|
||||
</li>
|
||||
|
@ -43,7 +43,7 @@ Simple pagination inspired by Rdio, great for apps and search results. The large
|
|||
<li class="page-item"><a class="page-link" href="#">5</a></li>
|
||||
<li class="page-item">
|
||||
<a class="page-link" href="#" aria-label="Next">
|
||||
<span aria-hidden="true">»</span>
|
||||
<span aria-hidden="true" class="material-icons">chevron_right</span>
|
||||
<span class="sr-only">Next</span>
|
||||
</a>
|
||||
</li>
|
||||
|
@ -72,7 +72,7 @@ The `.disabled` class uses `pointer-events: none` to try to disable the link fun
|
|||
<ul class="pagination">
|
||||
<li class="page-item disabled">
|
||||
<a class="page-link" href="#" tabindex="-1" aria-label="Previous">
|
||||
<span aria-hidden="true">«</span>
|
||||
<span aria-hidden="true" class="material-icons">chevron_left</span>
|
||||
<span class="sr-only">Previous</span>
|
||||
</a>
|
||||
</li>
|
||||
|
@ -85,7 +85,7 @@ The `.disabled` class uses `pointer-events: none` to try to disable the link fun
|
|||
<li class="page-item"><a class="page-link" href="#">5</a></li>
|
||||
<li class="page-item">
|
||||
<a class="page-link" href="#" aria-label="Next">
|
||||
<span aria-hidden="true">»</span>
|
||||
<span aria-hidden="true" class="material-icons">chevron_right</span>
|
||||
<span class="sr-only">Next</span>
|
||||
</a>
|
||||
</li>
|
||||
|
@ -100,7 +100,7 @@ You can optionally swap out active or disabled anchors for `<span>`, or omit the
|
|||
<ul class="pagination">
|
||||
<li class="page-item disabled">
|
||||
<span class="page-link" aria-label="Previous">
|
||||
<span aria-hidden="true">«</span>
|
||||
<span aria-hidden="true" class="material-icons">chevron_left</span>
|
||||
<span class="sr-only">Previous</span>
|
||||
</span>
|
||||
</li>
|
||||
|
@ -119,7 +119,7 @@ Fancy larger or smaller pagination? Add `.pagination-lg` or `.pagination-sm` for
|
|||
<ul class="pagination pagination-lg">
|
||||
<li class="page-item">
|
||||
<a class="page-link" href="#" aria-label="Previous">
|
||||
<span aria-hidden="true">«</span>
|
||||
<span aria-hidden="true" class="material-icons">chevron_left</span>
|
||||
<span class="sr-only">Previous</span>
|
||||
</a>
|
||||
</li>
|
||||
|
@ -128,7 +128,7 @@ Fancy larger or smaller pagination? Add `.pagination-lg` or `.pagination-sm` for
|
|||
<li class="page-item"><a class="page-link" href="#">3</a></li>
|
||||
<li class="page-item">
|
||||
<a class="page-link" href="#" aria-label="Next">
|
||||
<span aria-hidden="true">»</span>
|
||||
<span aria-hidden="true" class="material-icons">chevron_right</span>
|
||||
<span class="sr-only">Next</span>
|
||||
</a>
|
||||
</li>
|
||||
|
@ -141,7 +141,7 @@ Fancy larger or smaller pagination? Add `.pagination-lg` or `.pagination-sm` for
|
|||
<ul class="pagination pagination-sm">
|
||||
<li class="page-item">
|
||||
<a class="page-link" href="#" aria-label="Previous">
|
||||
<span aria-hidden="true">«</span>
|
||||
<span aria-hidden="true" class="material-icons">chevron_left</span>
|
||||
<span class="sr-only">Previous</span>
|
||||
</a>
|
||||
</li>
|
||||
|
@ -150,7 +150,7 @@ Fancy larger or smaller pagination? Add `.pagination-lg` or `.pagination-sm` for
|
|||
<li class="page-item"><a class="page-link" href="#">3</a></li>
|
||||
<li class="page-item">
|
||||
<a class="page-link" href="#" aria-label="Next">
|
||||
<span aria-hidden="true">»</span>
|
||||
<span aria-hidden="true" class="material-icons">chevron_right</span>
|
||||
<span class="sr-only">Next</span>
|
||||
</a>
|
||||
</li>
|
||||
|
|
|
@ -19,6 +19,8 @@ const copyProcessor = (content, srcpath) => { // https://regex101.com/r/cZ7aO8/2
|
|||
return content
|
||||
.replace(/(---[\s\S]+?---)([\s\S]+)/mg, referenceDocNotice) // insert docs reference
|
||||
.replace(/Fancy display heading/, 'Fancy heading') // remove sample text 'display' as this is a particular MD style and is confusing
|
||||
.replace(/aria-hidden="true"\>«\</g, 'aria-hidden="true" class="material-icons">chevron_left<') // replace « symbol in pagination with icon
|
||||
.replace(/aria-hidden="true"\>»\</g, 'aria-hidden="true" class="material-icons">chevron_right<') // replace » symbol in pagination with icon
|
||||
}
|
||||
|
||||
const preset = Preset.baseline({
|
||||
|
|
|
@ -19,6 +19,7 @@
|
|||
@import "navbar";
|
||||
@import "alerts";
|
||||
@import "progress";
|
||||
@import "pagination";
|
||||
@import "type";
|
||||
@import "popover";
|
||||
@import "cards";
|
||||
|
|
52
scss/_pagination.scss
Normal file
52
scss/_pagination.scss
Normal file
|
@ -0,0 +1,52 @@
|
|||
.page-item {
|
||||
&:first-child .page-link {
|
||||
@include border-left-radius(4em);
|
||||
}
|
||||
&:last-child .page-link {
|
||||
@include border-right-radius(4em);
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
&:first-child,
|
||||
&:last-child {
|
||||
.page-link {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding-right: 0;
|
||||
padding-left: 0;
|
||||
> .material-icons {
|
||||
font-size: 1.5em;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.page-link {
|
||||
min-width: 2.6em;
|
||||
margin-right: 0.5em;
|
||||
text-align: center;
|
||||
border-radius: 4em;
|
||||
|
||||
@include hover-focus {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Sizing
|
||||
//
|
||||
|
||||
.pagination-lg {
|
||||
.page-link {
|
||||
min-width: 2.8em;
|
||||
}
|
||||
@include pagination-size($pagination-padding-y-lg, $pagination-padding-x-lg, $font-size-lg, $line-height-lg, 4em);
|
||||
}
|
||||
|
||||
.pagination-sm {
|
||||
.page-link {
|
||||
min-width: 2.2em;
|
||||
}
|
||||
@include pagination-size($pagination-padding-y-sm, $pagination-padding-x-sm, $font-size-sm, $line-height-sm, 4em);
|
||||
}
|
|
@ -31,6 +31,7 @@ $bmd-label-color-inner-focus: $gray !default; // e.g. radio label or text-muted
|
|||
@import "variables/bootstrap/forms";
|
||||
@import "variables/bootstrap/list-group";
|
||||
@import "variables/bootstrap/nav";
|
||||
@import "variables/bootstrap/pagination";
|
||||
@import "variables/bootstrap/state";
|
||||
@import "variables/bootstrap/type";
|
||||
@import "variables/bootstrap/modals";
|
||||
|
|
6
scss/variables/bootstrap/_pagination.scss
Normal file
6
scss/variables/bootstrap/_pagination.scss
Normal file
|
@ -0,0 +1,6 @@
|
|||
$pagination-border-width: 0;
|
||||
$pagination-bg: transparent;
|
||||
$pagination-disabled-bg: transparent;
|
||||
|
||||
$pagination-padding-x-lg: 0;
|
||||
$pagination-padding-x-sm: 0;
|
Loading…
Reference in New Issue
Block a user