Skip to content
GitLab
Commit a257e81a authored by Martin Leblanc's avatar Martin Leblanc Committed by Kevin Paxman
Browse files

adding css for the views pagination

parent d64f5e7a
Hide whitespace changes
Inline Side-by-side
css/styles.css
View file @ a257e81a
......@@ -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;
......
css/styles.min.css
View file @ a257e81a
This source diff could not be displayed because it is too large. You can view the blob instead.
source/_data/design-tokens.artifact.yml
View file @ a257e81a
......@@ -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"
......
source/_patterns/00-config/_design-tokens.artifact.scss
View file @ a257e81a
......@@ -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,
......
source/_patterns/00-config/config.design-tokens.yml
View file @ a257e81a
......@@ -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
......
source/_patterns/04-components/card/_card.scss
View file @ a257e81a
......@@ -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;
......
source/_patterns/04-components/pager/_pager.scss
View file @ a257e81a
// @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);
// }
//}
source/_patterns/04-components/pager/pager.twig
View file @ a257e81a
......@@ -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 %}
......
source/_patterns/04-components/view/_view.scss
View file @ a257e81a
......@@ -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;
......
source/_patterns/04-components/view/views-view/views-view.twig
View file @ a257e81a
......@@ -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