Browse Source

Fixing pager styles

main
Eric Fleming 7 years ago
parent
commit
5956ad9b57
  1. 4
      src/Web/Pages/Shared/_pagination.cshtml
  2. 4
      src/Web/compilerconfig.json
  3. 31
      src/Web/wwwroot/css/shared/components/pager/pager.css
  4. 2
      src/Web/wwwroot/css/shared/components/pager/pager.min.css
  5. 2
      src/Web/wwwroot/css/shared/components/pager/pager.scss

4
src/Web/Pages/Shared/_pagination.cshtml

@ -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">

4
src/Web/compilerconfig.json

@ -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"
} }
] ]

31
src/Web/wwwroot/css/shared/components/pager/pager.css

@ -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 { .esh-pager-item.is-disabled {
opacity: 0; opacity: .5;
pointer-events: none; pointer-events: none; }
}
.esh-pager-item--navigable { .esh-pager-item--navigable {
cursor: pointer; cursor: pointer;
display: inline-block; display: inline-block; }
}
.esh-pager-item--navigable:hover { .esh-pager-item--navigable:hover {
color: #83D01B; color: #83D01B; }
}
@media screen and (max-width: 1280px) { @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; } }
}
}

2
src/Web/wwwroot/css/shared/components/pager/pager.min.css

@ -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;}}

2
src/Web/wwwroot/css/shared/components/pager/pager.scss

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

Loading…
Cancel
Save