Fixing pager styles

This commit is contained in:
Eric Fleming
2019-02-19 21:54:03 -05:00
parent be54fd48bb
commit 5956ad9b57
6 changed files with 26 additions and 37 deletions

View File

@@ -5,7 +5,7 @@
<article class="esh-pager-wrapper row"> <article class="esh-pager-wrapper row">
<nav> <nav>
<div class="col-md-2 col-xs-12"> <div class="col-md-2 col-xs-12">
<a class="esh-pager-item-left esh-pager-item--navigable @Model.Previous" <a class="esh-pager-item-left esh-pager-item--navigable esh-pager-item @Model.Previous"
id="Previous" id="Previous"
asp-route-pageid="@(Model.ActualPage - 1)" asp-route-pageid="@(Model.ActualPage - 1)"
aria-label="Previous"> aria-label="Previous">
@@ -20,7 +20,7 @@
</div> </div>
<div class="col-md-2 col-xs-12"> <div class="col-md-2 col-xs-12">
<a class="esh-pager-item-right esh-pager-item--navigable @Model.Next" <a class="esh-pager-item-right esh-pager-item--navigable esh-pager-item @Model.Next"
id="Next" id="Next"
asp-route-pageid="@(Model.ActualPage + 1)" asp-route-pageid="@(Model.ActualPage + 1)"
aria-label="Next"> aria-label="Next">

View File

@@ -26,5 +26,9 @@
{ {
"outputFile": "wwwroot/css/_variables.css", "outputFile": "wwwroot/css/_variables.css",
"inputFile": "wwwroot/css/_variables.scss" "inputFile": "wwwroot/css/_variables.scss"
},
{
"outputFile": "wwwroot/css/shared/components/pager/pager.css",
"inputFile": "wwwroot/css/shared/components/pager/pager.scss"
} }
] ]

View File

@@ -1,35 +1,20 @@
.esh-pager-wrapper { .esh-pager-wrapper {
padding-top: 1rem; padding-top: 1rem;
text-align: center; text-align: center; }
}
.esh-pager-item { .esh-pager-item {
margin: 0 5vw; margin: 0 5vw; }
} .esh-pager-item.is-disabled {
opacity: .5;
.esh-pager-item.is-disabled { pointer-events: none; }
opacity: 0; .esh-pager-item--navigable {
pointer-events: none;
}
.esh-pager-item--navigable {
cursor: pointer; cursor: pointer;
display: inline-block; display: inline-block; }
} .esh-pager-item--navigable:hover {
color: #83D01B; }
.esh-pager-item--navigable:hover { @media screen and (max-width: 1280px) {
color: #83D01B;
}
@media screen and (max-width: 1280px) {
.esh-pager-item { .esh-pager-item {
font-size: 0.85rem; font-size: 0.85rem; } }
} @media screen and (max-width: 1024px) {
}
@media screen and (max-width: 1024px) {
.esh-pager-item { .esh-pager-item {
margin: 0 2.5vw; margin: 0 2.5vw; } }
}
}

View File

@@ -1 +1 @@
.esh-pager-wrapper{padding-top:1rem;text-align:center;}.esh-pager-item{margin:0 5vw;}.esh-pager-item.is-disabled{opacity:0;pointer-events:none;}.esh-pager-item--navigable{cursor:pointer;display:inline-block;}.esh-pager-item--navigable:hover{color:#83d01b;}@media screen and (max-width:1280px){.esh-pager-item{font-size:.85rem;}}@media screen and (max-width:1024px){.esh-pager-item{margin:0 2.5vw;}} .esh-pager-wrapper{padding-top:1rem;text-align:center;}.esh-pager-item{margin:0 5vw;}.esh-pager-item.is-disabled{opacity:.5;pointer-events:none;}.esh-pager-item--navigable{cursor:pointer;display:inline-block;}.esh-pager-item--navigable:hover{color:#83d01b;}@media screen and (max-width:1280px){.esh-pager-item{font-size:.85rem;}}@media screen and (max-width:1024px){.esh-pager-item{margin:0 2.5vw;}}

View File

@@ -12,7 +12,7 @@
margin: 0 $margin; margin: 0 $margin;
&.is-disabled { &.is-disabled {
opacity: 0; opacity: .5;
pointer-events: none; pointer-events: none;
} }