Commit 74142a50 authored by Kevin Paxman's avatar Kevin Paxman
Browse files

Merge branch 'feature/ISTWCMS-4619-m26lebla-theme-pager' into '3.0.x'

Feature istwcms 4619 m26lebla theme pager

See merge request !85
parents d64f5e7a 4cb51599
This source diff could not be displayed because it is too large. You can view the blob instead.
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"
......
......@@ -11,7 +11,17 @@ $test-color-10: #00ff58;
$test-color-11: #3e3d12;
$test-color-12: #f00;
@mixin uw-no-breakout {
//-ms-hyphens: auto;
//-moz-hyphens: auto;
//-webkit-hyphens: auto;
//hyphens: auto;
overflow-wrap: break-word;
-ms-word-break: break-all;
word-break: break-all;
word-break: break-word;
word-wrap: break-word;
}
@mixin uw-contained-width {
margin-left: auto;
......
......@@ -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
......
......@@ -45,7 +45,7 @@ $card-padding: rem(gesso-spacing(sm)) !default;
}
// top
.card__header{
//background: $test-color-2;
@include uw-no-breakout();
color: $card-meta-color;
margin-bottom: rem(gesso-spacing(sm));
width: 100%;
......@@ -67,6 +67,7 @@ $card-padding: rem(gesso-spacing(sm)) !default;
}
}
.card__author{
@include uw-no-breakout();
font-family: gesso-font-family(systemmedium);
font-size: gesso-font-size(-1);
a {
......@@ -125,9 +126,11 @@ $card-padding: rem(gesso-spacing(sm)) !default;
}
// footer
.card__footer {
@include uw-no-breakout();
margin-top: auto;
padding: rem(gesso-spacing(md));
width: 100%;
> div {
margin-bottom: rem(gesso-spacing(sm));
&:last-child {
......@@ -137,6 +140,7 @@ $card-padding: rem(gesso-spacing(sm)) !default;
}
.card__tags{
width: 100%;
}
.card__readmore {
text-align: right;
......
......@@ -65,19 +65,6 @@
.card__sub-title {
font-size: gesso-font-size(4);
}
.card__date {
width: 100%;
@include large{
width: inherit;
}
.uw-date {
@include large{
width: inherit;
}
}
}
.card__author {
padding: gesso-spacing(xs) gesso-spacing(md);
}
......@@ -110,7 +97,6 @@
}
.card__date {
margin-top: -2.25rem;
max-width:27rem;
.uw-date {
}
}
......
......@@ -2,7 +2,9 @@
.details{
margin:0;
&__summary{
//padding: $details-padding gesso-spacing(xl) $details-padding $details-padding;
padding-right: rem(gesso-spacing(xl));
text-transform: inherit;
white-space:normal;
}
......@@ -22,7 +24,6 @@
font-family:gesso-font-family(primary);
font-size:rem(gesso-font-size(2));
font-weight:400;
padding-right:1.5rem;
text-decoration:none;
text-transform: inherit;
width:100%;
......
......@@ -5,7 +5,6 @@
.node--type-uw-ct-event &,
.node--type-uw-ct-blog &,
.node--type-uw-ct-news-item &{
margin-left: -1rem;
width:auto;
@include large {
margin-left:inherit;
......
......@@ -43,6 +43,7 @@ $details-font-family: gesso-font-family(primary);
.seven-details__summary,
.details__summary {
@include uw-no-breakout();
@include svg-background(mobile-arrow-down);
background-color: $details-background-color;
background-position: right 1rem center; // LTR
......@@ -95,6 +96,7 @@ $details-font-family: gesso-font-family(primary);
}
.details__content {
@include uw-no-breakout();
background: $details-content-background-color;
border: 1px solid $details-background-color;
border-top: 0;
......
......@@ -4,6 +4,7 @@
margin-bottom:0;
}
.page-title {
@include uw-no-breakout();
margin:0;
padding:0;
......
// @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