Commit a257e81a authored by Martin Leblanc's avatar Martin Leblanc Committed by Kevin Paxman
Browse files

adding css for the views pagination

parent d64f5e7a
......@@ -3664,6 +3664,7 @@ button {
margin-bottom: 0; }
.card__tags {
overflow: hidden;
width: 100%; }
.card__readmore {
......@@ -7163,22 +7164,17 @@ fieldset,
list-style-type: none;
margin: 0;
padding: 0;
clear: both;
margin: 1.5em 0;
padding: 0;
text-align: center; }
.pager__items li {
padding-left: 0; }
.pager__items li::before {
display: none; }
.pager__item {
display: inline-block;
line-height: 1;
font-family: Typ1451-Medium,-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Oxygen-Sans", Ubuntu, Cantarell, "Fira Sans", Droid Sans, sans-serif;
font-size: 0.88889rem;
line-height: 1.25;
margin: 0;
padding: 0;
text-align: center;
vertical-align: top; }
text-transform: uppercase; }
.pager__item:not([class*='pager__item--']) {
display: none; }
@media (min-width: 37.5em) {
......@@ -7186,22 +7182,23 @@ fieldset,
display: inline-block; } }
.pager__item--ellipsis, .pager__item--current.pager__item, .pager__link {
background-color: transparent;
background-color: #dfdfdf;
color: #000;
min-width: 2rem;
padding: 0.5em;
min-width: 1.5rem;
padding: 0.25rem 0.5rem;
transition: color 200ms cubic-bezier(0.0, 0, 0.2, 1), background-color 375ms cubic-bezier(0.0, 0, 0.2, 1); }
.pager__item--ellipsis:focus, .pager__item--current.pager__item:focus, .pager__link:focus {
outline: 1px dotted #4e4e4e; }
.pager__item--ellipsis {
background-color: transparent;
display: none; }
@media (min-width: 50em) {
.pager__item--ellipsis {
display: inline-block; } }
.pager__item--current.pager__item {
background-color: #000;
background-color: #757575;
color: #fff; }
.pager__link {
......@@ -7210,52 +7207,35 @@ fieldset,
.pager__link:visited {
color: #000; }
.pager__link:hover, .pager__link:focus {
background-color: #000;
background-color: #A2A2A2;
color: #fff; }
.pager__link:active {
background-color: #e4b429;
background-color: #757575;
color: #fff; }
.pager__link--previous,
.pager__link--next {
background-color: transparent;
background-color: #dfdfdf;
color: #000;
position: relative; }
.pager__link--previous:hover, .pager__link--previous:focus,
.pager__link--next:hover,
.pager__link--next:focus {
background-color: transparent;
background-color: #A2A2A2;
color: #000; }
.pager__link--previous:hover .pager__link-icon g, .pager__link--previous:focus .pager__link-icon g,
.pager__link--next:hover .pager__link-icon g,
.pager__link--next:focus .pager__link-icon g {
fill: #000; }
fill: #dfdfdf; }
.pager__link--previous:visited,
.pager__link--next:visited {
color: #000; }
.pager__item--previous {
margin-right: 2rem; }
.pager__item--previous .pager__link {
padding-left: 32px; }
margin-right: 1.5rem; }
.pager__item--next {
margin-left: 2rem; }
.pager__item--next .pager__link {
padding-right: 32px; }
.pager__link-icon {
left: 0;
position: absolute;
top: 50%;
transform: translateY(-48%);
width: 24px; }
.pager__link-icon g {
fill: #000; }
.pager__item--next .pager__link-icon {
left: auto;
right: 0;
transform: translateY(-48%) rotate(180deg); }
margin-left: 1.5rem; }
.uw-profiles .uw-profile {
padding-bottom: 1rem; }
......@@ -7806,7 +7786,7 @@ picture {
.skiplinks__link,
.skiplinks__link:visited,
.skiplinks__link:focus {
background-color: #4e4e4e;
background-color: #757575;
border: 2px solid #eee;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
......
This source diff could not be displayed because it is too large. You can view the blob instead.
......@@ -220,7 +220,7 @@ gesso:
generic:
background: "#A2A2A2"
background-darker: "#000"
background-dark: "#4e4e4e"
background-dark: "#757575"
background-light: "#eee"
background-lighter: "#fafafa"
border: "#A2A2A2"
......
......@@ -263,7 +263,7 @@ $gesso: (
generic: (
background: #A2A2A2,
background-darker: #000,
background-dark: #4e4e4e,
background-dark: #757575,
background-light: #eee,
background-lighter: #fafafa,
border: #A2A2A2,
......
......@@ -220,7 +220,7 @@ gesso:
generic:
background: grayscale.gray-4
background-darker: grayscale.black
background-dark: grayscale.gray-6
background-dark: grayscale.gray-5
background-light: grayscale.gray-2
background-lighter: grayscale.gray-1
border: grayscale.gray-4
......
......@@ -126,8 +126,10 @@ $card-padding: rem(gesso-spacing(sm)) !default;
// footer
.card__footer {
margin-top: auto;
padding: rem(gesso-spacing(md));
width: 100%;
> div {
margin-bottom: rem(gesso-spacing(sm));
&:last-child {
......@@ -136,7 +138,9 @@ $card-padding: rem(gesso-spacing(sm)) !default;
}
}
.card__tags{
overflow:hidden;
width: 100%;
}
.card__readmore {
text-align: right;
......
// @file
// Styles for Pager.
$pager-background-color: gesso-color(ui, generic, accent) !default;
$pager-background-color-hover: gesso-color(ui, generic, accent) !default;
$pager-background-color-active: gesso-color(ui, generic, accent-dark) !default;
$pager-font-size: rem(gesso-font-size(-1)) !default;
$pager-font-family: gesso-font-family(systemmedium) !default;
$pager-background-color: gesso-brand(org-default,uw-black,'lvl1') !default;
$pager-background-color-hover: gesso-color(ui, generic, background) !default;
$pager-background-color-active: gesso-color(ui, generic, background-dark) !default;
$pager-link-color: gesso-color(text, on-light) !default;
$pager-link-color-active: gesso-color(text, on-dark) !default;
$pager-link-focus-outline-color: gesso-color(ui, generic, border-dark) !default;
......@@ -11,20 +12,22 @@ $pager-ellipsis-bp: 800px !default;
$pager-bp: 600px !default;
.pager__items {
@include list-clean();
clear: both;
margin: em(gesso-spacing(md)) 0;
list-style-type: none;
margin: 0;
padding: 0;
text-align: center;
}
.pager__item {
display: inline-block;
line-height: 1;
margin: 0;
padding: 0;
font-family:$pager-font-family;
font-size: $pager-font-size;
line-height: 1.25;
margin: 0 ;
padding:0;
text-align: center;
vertical-align: top;
text-transform:uppercase;
&:not([class*='pager__item--']) {
display: none;
......@@ -36,10 +39,10 @@ $pager-bp: 600px !default;
}
%pager__link {
background-color: transparent;
background-color: $pager-background-color;
color: $pager-link-color;
min-width: rem(gesso-spacing(lg));
padding: em(gesso-spacing(xs));
min-width: rem(gesso-spacing(md));
padding: rem(gesso-spacing(xxs)) rem(gesso-spacing(xs));
transition: color gesso-duration(short) gesso-easing(ease-out),
background-color gesso-duration(standard) gesso-easing(ease-out);
......@@ -50,6 +53,7 @@ $pager-bp: 600px !default;
.pager__item--ellipsis {
@extend %pager__link;
background-color: transparent;
display: none;
@include breakpoint($pager-ellipsis-bp) {
......@@ -59,7 +63,7 @@ $pager-bp: 600px !default;
.pager__item--current.pager__item {
@extend %pager__link;
background-color: $pager-background-color;
background-color: $pager-background-color-active;
color: $pager-link-color-active;
}
......@@ -86,13 +90,13 @@ $pager-bp: 600px !default;
.pager__link--previous,
.pager__link--next {
background-color: transparent;
background-color: $pager-background-color;
color: $pager-link-color;
position: relative;
&:hover,
&:focus {
background-color: transparent;
background-color: $pager-background-color-hover;
color: $pager-link-color;
.pager__link-icon g {
fill: $pager-background-color;
......@@ -105,35 +109,35 @@ $pager-bp: 600px !default;
}
.pager__item--previous {
margin-right: rem(gesso-spacing(lg));
margin-right: rem(gesso-spacing(md));
.pager__link {
padding-left: 32px;
//padding-left: 32px;
}
}
.pager__item--next {
margin-left: rem(gesso-spacing(lg));
margin-left: rem(gesso-spacing(md));
.pager__link {
padding-right: 32px;
//padding-right: 32px;
}
}
.pager__link-icon {
left: 0;
position: absolute;
top: 50%;
transform: translateY(-48%);
width: 24px;
g {
fill: $pager-link-color;
}
.pager__item--next & {
left: auto;
right: 0;
transform: translateY(-48%) rotate(180deg);
}
}
//.pager__link-icon {
// left: 0;
// position: absolute;
// top: 50%;
// transform: translateY(-48%);
// width: 24px;
//
// g {
// fill: $pager-link-color;
// }
//
// .pager__item--next & {
// left: auto;
// right: 0;
// transform: translateY(-48%) rotate(180deg);
// }
//}
......@@ -9,7 +9,7 @@
<li class="pager__item pager__item--first">
<a class="pager__link pager__link--first" href="{{ items.first.href }}" title="{{ 'Go to first page'|t }}" {{ items.first.attributes|without('href', 'title') }}>
<span class="visually-hidden">{{ 'First page'|t }}</span>
<span aria-hidden="true">first</span>
<span aria-hidden="true">&#171; first</span>
</a>
</li>
{% endif %}
......@@ -18,12 +18,8 @@
{% if items.previous %}
<li class="pager__item pager__item--previous">
<a class="pager__link pager__link--previous" href="{{ items.previous.href }}" title="{{ 'Go to previous page'|t }}" rel="prev" {{ items.previous.attributes|without('href', 'title', 'rel') }}>
<svg class="pager__link-icon" viewbox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
<g><path d="M0 0h48v48H0z" fill="none"/><path d="M16 23h29v2H16zM16 16v16L3 24l13-8z"/></g>
</svg>
<span class="visually-hidden">{{ 'Previous page'|t }}</span>
<span aria-hidden="true">previous</span>
<span aria-hidden="true">&#8249; previous</span>
</a>
</li>
{% endif %}
......@@ -61,12 +57,8 @@
{% if items.next %}
<li class="pager__item pager__item--next">
<a class="pager__link pager__link--next" href="{{ items.next.href }}" title="{{ 'Go to next page'|t }}" rel="next" {{ items.next.attributes|without('href', 'title', 'rel') }}>
<svg class="pager__link-icon" viewbox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
<g><path d="M0 0h48v48H0z" fill="none"/><path d="M16 23h29v2H16zM16 16v16L3 24l13-8z"/></g>
</svg>
<span class="visually-hidden">{{ 'Next page'|t }}</span>
<span aria-hidden="true">next</span>
<span aria-hidden="true">next &#8250;</span>
</a>
</li>
{% endif %}
......@@ -76,7 +68,7 @@
<li class="pager__item pager__item--last">
<a class="pager__link pager__link--last" href="{{ items.last.href }}" title="{{ 'Go to last page'|t }}" {{ items.last.attributes|without('href', 'title') }}>
<span class="visually-hidden">{{ 'Last page'|t }}</span>
<span aria-hidden="true">last</span>
<span aria-hidden="true">last &#187;</span>
</a>
</li>
{% endif %}
......
......@@ -48,6 +48,12 @@ $sidebar-width: 18.75rem;
}
&-filters {
}
&-pager{
//grid-column:1/2;
//grid-row:3/4;
//margin: rem(gesso-spacing(md)) 0;
//width:100%;
}
&-content {
@include uw-flex-grid();
......@@ -83,6 +89,12 @@ $sidebar-width: 18.75rem;
grid-row:2/3;
width:100%;
}
.view-pager{
//grid-column:1/2;
//grid-row:3/4;
//margin: rem(gesso-spacing(md)) 0;
//width:100%;
}
.view-filters {
h2{
margin-top:0;
......
......@@ -55,7 +55,9 @@
{% endif %}
{% if pager %}
{{ pager }}
<div class="view-pager">
{{ pager }}
</div>
{% endif %}
{% if attachment_after %}
<div class="attachment attachment-after">
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment