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 diff is collapsed.
This source diff could not be displayed because it is too large. You can view the blob instead.
...@@ -220,7 +220,7 @@ gesso: ...@@ -220,7 +220,7 @@ gesso:
generic: generic:
background: "#A2A2A2" background: "#A2A2A2"
background-darker: "#000" background-darker: "#000"
background-dark: "#4e4e4e" background-dark: "#757575"
background-light: "#eee" background-light: "#eee"
background-lighter: "#fafafa" background-lighter: "#fafafa"
border: "#A2A2A2" border: "#A2A2A2"
......
...@@ -11,7 +11,17 @@ $test-color-10: #00ff58; ...@@ -11,7 +11,17 @@ $test-color-10: #00ff58;
$test-color-11: #3e3d12; $test-color-11: #3e3d12;
$test-color-12: #f00; $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 { @mixin uw-contained-width {
margin-left: auto; margin-left: auto;
......
...@@ -263,7 +263,7 @@ $gesso: ( ...@@ -263,7 +263,7 @@ $gesso: (
generic: ( generic: (
background: #A2A2A2, background: #A2A2A2,
background-darker: #000, background-darker: #000,
background-dark: #4e4e4e, background-dark: #757575,
background-light: #eee, background-light: #eee,
background-lighter: #fafafa, background-lighter: #fafafa,
border: #A2A2A2, border: #A2A2A2,
......
...@@ -220,7 +220,7 @@ gesso: ...@@ -220,7 +220,7 @@ gesso:
generic: generic:
background: grayscale.gray-4 background: grayscale.gray-4
background-darker: grayscale.black background-darker: grayscale.black
background-dark: grayscale.gray-6 background-dark: grayscale.gray-5
background-light: grayscale.gray-2 background-light: grayscale.gray-2
background-lighter: grayscale.gray-1 background-lighter: grayscale.gray-1
border: grayscale.gray-4 border: grayscale.gray-4
......
...@@ -45,7 +45,7 @@ $card-padding: rem(gesso-spacing(sm)) !default; ...@@ -45,7 +45,7 @@ $card-padding: rem(gesso-spacing(sm)) !default;
} }
// top // top
.card__header{ .card__header{
//background: $test-color-2; @include uw-no-breakout();
color: $card-meta-color; color: $card-meta-color;
margin-bottom: rem(gesso-spacing(sm)); margin-bottom: rem(gesso-spacing(sm));
width: 100%; width: 100%;
...@@ -67,6 +67,7 @@ $card-padding: rem(gesso-spacing(sm)) !default; ...@@ -67,6 +67,7 @@ $card-padding: rem(gesso-spacing(sm)) !default;
} }
} }
.card__author{ .card__author{
@include uw-no-breakout();
font-family: gesso-font-family(systemmedium); font-family: gesso-font-family(systemmedium);
font-size: gesso-font-size(-1); font-size: gesso-font-size(-1);
a { a {
...@@ -125,9 +126,11 @@ $card-padding: rem(gesso-spacing(sm)) !default; ...@@ -125,9 +126,11 @@ $card-padding: rem(gesso-spacing(sm)) !default;
} }
// footer // footer
.card__footer { .card__footer {
@include uw-no-breakout();
margin-top: auto; margin-top: auto;
padding: rem(gesso-spacing(md)); padding: rem(gesso-spacing(md));
width: 100%; width: 100%;
> div { > div {
margin-bottom: rem(gesso-spacing(sm)); margin-bottom: rem(gesso-spacing(sm));
&:last-child { &:last-child {
...@@ -137,6 +140,7 @@ $card-padding: rem(gesso-spacing(sm)) !default; ...@@ -137,6 +140,7 @@ $card-padding: rem(gesso-spacing(sm)) !default;
} }
.card__tags{ .card__tags{
width: 100%; width: 100%;
} }
.card__readmore { .card__readmore {
text-align: right; text-align: right;
......
...@@ -65,19 +65,6 @@ ...@@ -65,19 +65,6 @@
.card__sub-title { .card__sub-title {
font-size: gesso-font-size(4); font-size: gesso-font-size(4);
} }
.card__date {
width: 100%;
@include large{
width: inherit;
}
.uw-date {
@include large{
width: inherit;
}
}
}
.card__author { .card__author {
padding: gesso-spacing(xs) gesso-spacing(md); padding: gesso-spacing(xs) gesso-spacing(md);
} }
...@@ -110,7 +97,6 @@ ...@@ -110,7 +97,6 @@
} }
.card__date { .card__date {
margin-top: -2.25rem; margin-top: -2.25rem;
max-width:27rem;
.uw-date { .uw-date {
} }
} }
......
...@@ -2,7 +2,9 @@ ...@@ -2,7 +2,9 @@
.details{ .details{
margin:0; margin:0;
&__summary{ &__summary{
//padding: $details-padding gesso-spacing(xl) $details-padding $details-padding; //padding: $details-padding gesso-spacing(xl) $details-padding $details-padding;
padding-right: rem(gesso-spacing(xl));
text-transform: inherit; text-transform: inherit;
white-space:normal; white-space:normal;
} }
...@@ -22,7 +24,6 @@ ...@@ -22,7 +24,6 @@
font-family:gesso-font-family(primary); font-family:gesso-font-family(primary);
font-size:rem(gesso-font-size(2)); font-size:rem(gesso-font-size(2));
font-weight:400; font-weight:400;
padding-right:1.5rem;
text-decoration:none; text-decoration:none;
text-transform: inherit; text-transform: inherit;
width:100%; width:100%;
......
...@@ -5,7 +5,6 @@ ...@@ -5,7 +5,6 @@
.node--type-uw-ct-event &, .node--type-uw-ct-event &,
.node--type-uw-ct-blog &, .node--type-uw-ct-blog &,
.node--type-uw-ct-news-item &{ .node--type-uw-ct-news-item &{
margin-left: -1rem;
width:auto; width:auto;
@include large { @include large {
margin-left:inherit; margin-left:inherit;
......
...@@ -43,6 +43,7 @@ $details-font-family: gesso-font-family(primary); ...@@ -43,6 +43,7 @@ $details-font-family: gesso-font-family(primary);
.seven-details__summary, .seven-details__summary,
.details__summary { .details__summary {
@include uw-no-breakout();
@include svg-background(mobile-arrow-down); @include svg-background(mobile-arrow-down);
background-color: $details-background-color; background-color: $details-background-color;
background-position: right 1rem center; // LTR background-position: right 1rem center; // LTR
...@@ -95,6 +96,7 @@ $details-font-family: gesso-font-family(primary); ...@@ -95,6 +96,7 @@ $details-font-family: gesso-font-family(primary);
} }
.details__content { .details__content {
@include uw-no-breakout();
background: $details-content-background-color; background: $details-content-background-color;
border: 1px solid $details-background-color; border: 1px solid $details-background-color;
border-top: 0; border-top: 0;
......
...@@ -4,6 +4,7 @@ ...@@ -4,6 +4,7 @@
margin-bottom:0; margin-bottom:0;
} }
.page-title { .page-title {
@include uw-no-breakout();
margin:0; margin:0;
padding:0; padding:0;
......
// @file // @file
// Styles for Pager. // Styles for Pager.
$pager-font-size: rem(gesso-font-size(-1)) !default;
$pager-background-color: gesso-color(ui, generic, accent) !default; $pager-font-family: gesso-font-family(systemmedium) !default;
$pager-background-color-hover: gesso-color(ui, generic, accent) !default; $pager-background-color: gesso-brand(org-default,uw-black,'lvl1') !default;
$pager-background-color-active: gesso-color(ui, generic, accent-dark) !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: gesso-color(text, on-light) !default;
$pager-link-color-active: gesso-color(text, on-dark) !default; $pager-link-color-active: gesso-color(text, on-dark) !default;
$pager-link-focus-outline-color: gesso-color(ui, generic, border-dark) !default; $pager-link-focus-outline-color: gesso-color(ui, generic, border-dark) !default;
...@@ -11,20 +12,22 @@ $pager-ellipsis-bp: 800px !default; ...@@ -11,20 +12,22 @@ $pager-ellipsis-bp: 800px !default;
$pager-bp: 600px !default; $pager-bp: 600px !default;
.pager__items { .pager__items {
@include list-clean(); list-style-type: none;
clear: both; margin: 0;
margin: em(gesso-spacing(md)) 0;
padding: 0; padding: 0;
text-align: center; text-align: center;
} }
.pager__item { .pager__item {
display: inline-block; display: inline-block;
line-height: 1; font-family:$pager-font-family;
margin: 0; font-size: $pager-font-size;
padding: 0; line-height: 1.25;
margin: 0 ;
padding:0;
text-align: center; text-align: center;
vertical-align: top; text-transform:uppercase;
&:not([class*='pager__item--']) { &:not([class*='pager__item--']) {
display: none; display: none;
...@@ -36,10 +39,10 @@ $pager-bp: 600px !default; ...@@ -36,10 +39,10 @@ $pager-bp: 600px !default;
} }
%pager__link { %pager__link {
background-color: transparent; background-color: $pager-background-color;
color: $pager-link-color; color: $pager-link-color;
min-width: rem(gesso-spacing(lg)); min-width: rem(gesso-spacing(md));
padding: em(gesso-spacing(xs)); padding: rem(gesso-spacing(xxs)) rem(gesso-spacing(xs));
transition: color gesso-duration(short) gesso-easing(ease-out), transition: color gesso-duration(short) gesso-easing(ease-out),
background-color gesso-duration(standard) gesso-easing(ease-out); background-color gesso-duration(standard) gesso-easing(ease-out);
...@@ -50,6 +53,7 @@ $pager-bp: 600px !default; ...@@ -50,6 +53,7 @@ $pager-bp: 600px !default;
.pager__item--ellipsis { .pager__item--ellipsis {
@extend %pager__link; @extend %pager__link;
background-color: transparent;
display: none; display: none;
@include breakpoint($pager-ellipsis-bp) { @include breakpoint($pager-ellipsis-bp) {
...@@ -59,7 +63,7 @@ $pager-bp: 600px !default; ...@@ -59,7 +63,7 @@ $pager-bp: 600px !default;
.pager__item--current.pager__item { .pager__item--current.pager__item {
@extend %pager__link; @extend %pager__link;
background-color: $pager-background-color; background-color: $pager-background-color-active;
color: $pager-link-color-active; color: $pager-link-color-active;
} }
...@@ -86,13 +90,13 @@ $pager-bp: 600px !default; ...@@ -86,13 +90,13 @@ $pager-bp: 600px !default;
.pager__link--previous, .pager__link--previous,
.pager__link--next { .pager__link--next {
background-color: transparent; background-color: $pager-background-color;
color: $pager-link-color; color: $pager-link-color;
position: relative; position: relative;
&:hover, &:hover,
&:focus { &:focus {
background-color: transparent; background-color: $pager-background-color-hover;
color: $pager-link-color; color: $pager-link-color;
.pager__link-icon g { .pager__link-icon g {
fill: $pager-background-color; fill: $pager-background-color;
...@@ -105,35 +109,35 @@ $pager-bp: 600px !default; ...@@ -105,35 +109,35 @@ $pager-bp: 600px !default;
} }
.pager__item--previous { .pager__item--previous {
margin-right: rem(gesso-spacing(lg)); margin-right: rem(gesso-spacing(md));
.pager__link { .pager__link {
padding-left: 32px; //padding-left: 32px;
} }
} }
.pager__item--next { .pager__item--next {
margin-left: rem(gesso-spacing(lg)); margin-left: rem(gesso-spacing(md));
.pager__link { .pager__link {
padding-right: 32px; //padding-right: 32px;
} }
} }
.pager__link-icon { //.pager__link-icon {
left: 0; // left: 0;
position: absolute; // position: absolute;
top: 50%; // top: 50%;
transform: translateY(-48%); // transform: translateY(-48%);
width: 24px; // width: 24px;
//
g { // g {
fill: $pager-link-color; // fill: $pager-link-color;
} // }
//
.pager__item--next & { // .pager__item--next & {
left: auto; // left: auto;
right: 0; // right: 0;
transform: translateY(-48%) rotate(180deg); // transform: translateY(-48%) rotate(180deg);
} // }
} //}
...@@ -9,7 +9,7 @@ ...@@ -9,7 +9,7 @@
<li class="pager__item pager__item--first"> <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') }}> <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 class="visually-hidden">{{ 'First page'|t }}</span>
<span aria-hidden="true">first</span> <span aria-hidden="true">&#171; first</span>
</a> </a>
</li> </li>
{% endif %} {% endif %}
...@@ -18,12 +18,8 @@ ...@@ -18,12 +18,8 @@
{% if items.previous %} {% if items.previous %}
<li class="pager__item pager__item--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') }}> <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 class="visually-hidden">{{ 'Previous page'|t }}</span>
<span aria-hidden="true">previous</span> <span aria-hidden="true">&#8249; previous</span>
</a> </a>
</li> </li>
{% endif %} {% endif %}
...@@ -61,12 +57,8 @@ ...@@ -61,12 +57,8 @@
{% if items.next %} {% if items.next %}
<li class="pager__item pager__item--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') }}> <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 class="visually-hidden">{{ 'Next page'|t }}</span>
<span aria-hidden="true">next</span> <span aria-hidden="true">next &#8250;</span>
</a> </a>
</li> </li>
{% endif %} {% endif %}
...@@ -76,7 +68,7 @@ ...@@ -76,7 +68,7 @@
<li class="pager__item pager__item--last"> <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') }}> <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 class="visually-hidden">{{ 'Last page'|t }}</span>
<span aria-hidden="true">last</span> <span aria-hidden="true">last &#187;</span>
</a> </a>
</li> </li>
{% endif %} {% endif %}
......
...@@ -48,6 +48,12 @@ $sidebar-width: 18.75rem; ...@@ -48,6 +48,12 @@ $sidebar-width: 18.75rem;
} }
&-filters { &-filters {
}
&-pager{
grid-column:1/2;
grid-row:3/4;
margin: rem(gesso-spacing(md)) 0;
width:100%;
} }
&-content { &-content {
@include uw-flex-grid(); @include uw-flex-grid();
...@@ -83,6 +89,12 @@ $sidebar-width: 18.75rem; ...@@ -83,6 +89,12 @@ $sidebar-width: 18.75rem;
grid-row:2/3; grid-row:2/3;
width:100%; width:100%;
} }
.view-pager{
grid-column:1/2;
grid-row:3/4;
margin: rem(gesso-spacing(md)) 0;
width:100%;
}
.view-filters { .view-filters {
h2{ h2{
margin-top:0; margin-top:0;
......
...@@ -55,7 +55,9 @@ ...@@ -55,7 +55,9 @@
{% endif %} {% endif %}
{% if pager %} {% if pager %}
{{ pager }} <div class="view-pager">
{{ pager }}
</div>
{% endif %} {% endif %}
{% if attachment_after %} {% if attachment_after %}
<div class="attachment 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