Commit c3b1292c authored by m26lebla's avatar m26lebla

Merge branch '8.x-3.x-martin-presentation-layer-updates' into 8.x-3.x

parents d4cbb09e eb0dc9ca
This diff is collapsed.
......@@ -52,7 +52,7 @@ $button-font-size: gesso-font-size(1) !default;
letter-spacing: 0.055rem;
line-height: gesso-line-height(base);
max-width:18.125rem;
padding: rem(gesso-spacing(sm)) rem(gesso-spacing(md));
padding: rem(gesso-spacing(sm)) 2rem;
text-align: center;
text-decoration: none;
text-shadow:$button-text-shadow;
......@@ -120,7 +120,7 @@ $button-font-size: gesso-font-size(1) !default;
letter-spacing: 0.055rem;
line-height: gesso-line-height(base);
max-width:18.125rem;
padding: rem(gesso-spacing(sm)) rem(gesso-spacing(md));
padding: rem(gesso-spacing(sm)) 2rem;
text-align: center;
text-decoration: none;
text-shadow:$button-text-shadow;
......
......@@ -111,4 +111,360 @@
font-style: normal;
font-weight: normal;
src: url("/fonts/fdsu-rwd.eot"), url("/fonts/fdsu-rwd.eot?#iefix") format("embedded-opentype"), url("/fonts/fdsu-rwd.ttf") format("truetype"), url("/fonts/fdsu-rwd.woff") format("woff"), url("/fonts/fdsu-rwd.svg?#fdsu-rwd") format("svg");
}
$fdsu-vimeo: "\e901";
$fdsu-vimeo-box: "\e900";
$fdsu-add-to-calendar: "\2605";
$fdsu-envelope: "\e0eb";
$fdsu-bubble: "\e15f";
$fdsu-binoculars: "\e1b5";
$fdsu-search: "\e1b6";
$fdsu-search-2: "\e1b7";
$fdsu-search-shade: "\e1bb";
$fdsu-arrow-right: "\e3b5";
$fdsu-googleplus-box: "\e495";
$fdsu-github: "\e4ba";
$fdsu-github-box: "\e4bb";
$fdsu-yahoo: "\e4c4";
$fdsu-tux: "\e4c5";
$fdsu-apple: "\e4c6";
$fdsu-finder: "\e4c7";
$fdsu-android: "\e4c8";
$fdsu-windows: "\e4c9";
$fdsu-windows8: "\e4ca";
$fdsu-skype: "\e4cd";
$fdsu-html5: "\e4eb";
$fdsu-css3: "\e4ec";
$fdsu-chrome: "\e4ed";
$fdsu-firefox: "\e4ee";
$fdsu-ie: "\e4ef";
$fdsu-opera: "\e4f0";
$fdsu-safari: "\e4f1";
$fdsu-close: "\e902";
$fdsu-si-comm: "\e903";
$fdsu-info: "\e904";
$fdsu-info-2: "\e905";
$fdsu-chevron: "\e906";
$fdsu-ical: "\e907";
$fdsu-arrow: "\e908";
$fdsu-comment: "\e909";
$fdsu-share: "\e90a";
$fdsu-facebook: "\e90b";
$fdsu-facebook-box: "\e90c";
$fdsu-instagram-box: "\e90d";
$fdsu-instagram: "\e90e";
$fdsu-linkedin: "\e90f";
$fdsu-linkedin-box: "\e910";
$fdsu-twitter: "\e911";
$fdsu-twitter-box: "\e912";
$fdsu-youtube-box: "\e913";
$fdsu-youtube: "\e914";
$fdsu-calendar: "\e915";
$fdsu-cloud: "\e916";
$fdsu-rss-box: "\e917";
$fdsu-snapchat: "\e918";
$fdsu-si-comp: "\e921";
$fdsu-si-infrastructure: "\e927";
$fdsu-si-professionals: "\e928";
$fdsu-si-security: "\e929";
$fdsu-si-teach: "\e92a";
$fdsu-clock2: "\e94f";
$fdsu-spoon-knife: "\e9a3";
$fdsu-location: "\e930";
.fdsu-vimeo {
&::before{
content: $fdsu-vimeo;
}
}
.fdsu-vimeo-box {
&::before{
content: $fdsu-vimeo-box;
}
}
.fdsu-add-to-calendar {
&::before{
content: $fdsu-add-to-calendar;
}
}
.fdsu-envelope {
&::before{
content: $fdsu-envelope;
}
}
.fdsu-bubble {
&::before{
content: $fdsu-bubble;
}
}
.fdsu-binoculars {
&::before{
content: $fdsu-binoculars;
}
}
.fdsu-search {
&::before{
content: $fdsu-search;
}
}
.fdsu-search-2 {
&::before{
content: $fdsu-search-2;
}
}
.fdsu-search-shade {
&::before{
content: $fdsu-search-shade;
}
}
.fdsu-arrow-right {
&::before{
content: $fdsu-arrow-right;
}
}
.fdsu-googleplus-box {
&::before{
content: $fdsu-googleplus-box;
}
}
.fdsu-github {
&::before{
content: $fdsu-github;
}
}
.fdsu-github-box {
&::before{
content: $fdsu-github-box;
}
}
.fdsu-yahoo {
&::before{
content: $fdsu-yahoo;
}
}
.fdsu-tux {
&::before{
content: $fdsu-tux;
}
}
.fdsu-apple {
&::before{
content: $fdsu-apple;
}
}
.fdsu-finder {
&::before{
content: $fdsu-finder;
}
}
.fdsu-android {
&::before{
content: $fdsu-android;
}
}
.fdsu-windows {
&::before{
content: $fdsu-windows;
}
}
.fdsu-windows8 {
&::before{
content: $fdsu-windows8;
}
}
.fdsu-skype {
&::before{
content: $fdsu-skype;
}
}
.fdsu-html5 {
&::before{
content: $fdsu-html5;
}
}
.fdsu-css3 {
&::before{
content: $fdsu-css3;
}
}
.fdsu-chrome {
&::before{
content: $fdsu-chrome;
}
}
.fdsu-firefox {
&::before{
content: $fdsu-firefox;
}
}
.fdsu-ie {
&::before{
content: $fdsu-ie;
}
}
.fdsu-opera {
&::before{
content: $fdsu-opera;
}
}
.fdsu-safari {
&::before{
content: $fdsu-safari;
}
}
.fdsu-close {
&::before{
content: $fdsu-close;
}
}
.fdsu-si-comm {
&::before{
content: $fdsu-si-comm;
}
}
.fdsu-info {
&::before{
content: $fdsu-info;
}
}
.fdsu-info-2 {
&::before{
content: $fdsu-info-2;
}
}
.fdsu-chevron {
&::before{
content: $fdsu-chevron;
}
}
.fdsu-ical {
&::before{
content: $fdsu-ical;
}
}
.fdsu-arrow {
&::before{
content: $fdsu-arrow;
}
}
.fdsu-comment {
&::before{
content: $fdsu-comment;
}
}
.fdsu-share {
&::before{
content: $fdsu-share;
}
}
.fdsu-facebook {
&::before{
content: $fdsu-facebook;
}
}
.fdsu-facebook-box {
&::before{
content: $fdsu-facebook-box;
}
}
.fdsu-instagram-box {
&::before{
content: $fdsu-instagram-box;
}
}
.fdsu-instagram {
&::before{
content: $fdsu-instagram;
}
}
.fdsu-linkedin {
&::before{
content: $fdsu-linkedin;
}
}
.fdsu-linkedin-box {
&::before{
content: $fdsu-linkedin-box;
}
}
.fdsu-twitter {
&::before{
content: $fdsu-twitter;
}
}
.fdsu-twitter-box {
&::before{
content: $fdsu-twitter-box;
}
}
.fdsu-youtube-box {
&::before{
content: $fdsu-youtube-box;
}
}
.fdsu-youtube {
&::before{
content: $fdsu-youtube;
}
}
.fdsu-calendar {
&::before{
content: $fdsu-calendar;
}
}
.fdsu-cloud {
&::before{
content: $fdsu-cloud;
}
}
.fdsu-rss-box {
&::before{
content: $fdsu-rss-box;
}
}
.fdsu-snapchat {
&::before{
content: $fdsu-snapchat;
}
}
.fdsu-si-comp {
&::before{
content: $fdsu-si-comp;
}
}
.fdsu-si-infrastructure {
&::before{
content: $fdsu-si-infrastructure;
}
}
.fdsu-si-professionals {
&::before{
content: $fdsu-si-professionals;
}
}
.fdsu-si-security {
&::before{
content: $fdsu-si-security;
}
}
.fdsu-si-teach {
&::before{
content: $fdsu-si-teach;
}
}
.fdsu-clock2 {
&::before{
content: $fdsu-clock2;
}
}
.fdsu-spoon-knife {
&::before{
content: $fdsu-spoon-knife;
}
}
.fdsu-location {
&::before{
content: $fdsu-location;
}
}
\ No newline at end of file
<blockquote>
{{ text }}
{% if cite %}
<cite>
{{cite}}
</cite>
{% endif %}
</blockquote>
<blockquote class="uw-blockquote">
<div class="uw-blockquote__wrapper">
<div class="uw-blockquote__text">
{{ blockquote.text }}
</div>
<footer class="uw-blockquote__attribution">
<div class="uw-blockquote__attribution--wrapper">
<cite>
{{ blockquote.attribution }}
</cite>
</div>
</footer>
</div>
</blockquote>
\ No newline at end of file
---
text: |-
<p>A block quotation (also known as a long quotation or extract) is a quotation in a written document, that is set off from the main text as a paragraph, or block of text, and typically distinguished visually using indentation and a different typeface or smaller size quotation.</p>
cite: |-
Jane Doe <em>President and CEO</em>
blockquote:
text: '<p>This is some text from the yml file</p><p>This is some text from the yml file2. This is some text from the yml file. This is some text from the yml file. This is some text from the yml file</p><p>This is some text from the yml file3</p><p style="text-align: center">This is some text from the yml file4. This is some text from the yml file. This is some text from the yml file. This is some text from the yml file. This is some text from the yml file. This is some text from the yml file</p><p>This is some text from the yml file5</p>'
attribution: 'This is the attribution'
......@@ -63,11 +63,12 @@ input {
// input[type='url'] {}
// input[type='week'] {}
label {
label,
.label{
font-family: $form-label-font-family;
font-size: gesso-font-size(0);
font-size: gesso-font-size(2);
font-weight: gesso-font-weight(regular);
margin-bottom: rem(gesso-spacing(sm));
margin-bottom: rem(gesso-spacing(xs));
abbr {
display: inline;
font-size: gesso-font-size(1);
......
......@@ -76,4 +76,4 @@ social_media:
url: "https://www.linkedin.com/edu/school?id=10875"
social_media_placement: "global-site-footer"
modifier_classes: 'black'
territorial_text: '<p>The University of Waterloo acknowledges that our work is on the traditional territory of the Neutral, Anishinaabeg and Haudenosaunee peoples. Our institution is situated on the Haldimand Tract, the land promised to the Six Nations that includes six miles on each side of the Grand River. Our active work toward reconciliation takes place across our campuses through research, learning, teaching, and community building, and is centralized within our <a href="https://uwaterloo.ca/human-rights-equity-inclusion/about/indigenous-initiatives" >Indigenous Initiatives Office</a>.</p>'
\ No newline at end of file
territorial_text: '<p>The University of Waterloo acknowledges that much of our work takes place on the traditional territory of the Neutral, Anishinaabeg and Haudenosaunee peoples. Our main campus is situated on the Haldimand Tract, the land promised to the Six Nations that includes six miles on each side of the Grand River. Our active work toward reconciliation takes place across our campuses through research, learning, teaching, and community building, and is centralized within our <a href="https://uwaterloo.ca/human-rights-equity-inclusion/about/indigenous-initiatives" >Indigenous Initiatives Office</a>.</p>'
\ No newline at end of file
......@@ -12,6 +12,7 @@
.js-media-library-view,
.messages,
.message,
.contextual-region.profile,
form {
@include uw-contained-width;
padding: rem(gesso-spacing(sm));
......
// @file
// Styles for Breadcrumb trail.
$breadcrumb-background-color: gesso-color(ui, generic, accent-dark) !default;
$breadcrumb-divider-color: gesso-color(ui, generic, border-light) !default;
$breadcrumb-link-color: gesso-color(ui, generic, text-light) !default;
$breadcrumb-text-color: gesso-color(text, on-dark) !default;
$breadcrumb-divider-color: gesso-color(text ,primary) !default;
$breadcrumb-link-color: gesso-color(text, link) !default;
$breadcrumb-text-color: gesso-color(text, primary) !default;
.uw-site--breadcrumb{
line-height:1.25;
text-align:center;
@include breakpoint(gesso-breakpoint(md)) {
text-align: left;
}
}
.breadcrumb {
@include clearfix();
background-color: $breadcrumb-background-color;
color: $breadcrumb-text-color;
font-size: rem(gesso-font-size(0));
margin: rem(gesso-spacing(sm)) 0;
min-height: rem(gesso-spacing(lg));
padding-top: rem(gesso-spacing(sm));
font-family: gesso-font-family(systemmedium);
font-size: rem(gesso-font-size(-2));
}
.breadcrumb__title {
......@@ -25,40 +29,20 @@ $breadcrumb-text-color: gesso-color(text, on-dark) !default;
}
.breadcrumb__item {
margin-right: 0.75em;
display: inline;
margin: 0;
padding: 0;
&::after {
color: $breadcrumb-divider-color;
content: '/';
margin-left: 0.75em;
}
&:last-child::after {
content: '';
margin-left: 0;
}
}
.breadcrumb__list .breadcrumb__item {
@include breakpoint(max-width gesso-breakpoint(sm)) {
display: none;
&:nth-last-child(2) {
display: block;
&::after {
display: none;
}
&::before {
color: $breadcrumb-divider-color;
content: '<';
margin-right: 0.75em;
}
}
content: ' » ';
}
}
.breadcrumb__link {
@include link($breadcrumb-link-color, $breadcrumb-text-color);
text-decoration: none;
&:hover,
&:focus{
text-decoration:underline;
}
}
<nav aria-labelled="breadcrumb-label" class="breadcrumb {{ modifier_classes }}" role="navigation">
<div class="l-constrain">
<div class="uw-site--breadcrumb">
<nav aria-labelled="Breadcrumb" class="breadcrumb {{ modifier_classes }}" role="navigation">
<h2 class="breadcrumb__title visually-hidden" id="breadcrumb-label">{{ heading|default('You are here') }}</h2>
<ol class="breadcrumb__list">
{% for item in breadcrumb %}
<li class="breadcrumb__item">
{% if item.url %}
<a class="breadcrumb__link" href="{{ item.url }}">{{ item.text }}</a>
{% else %}
<span aria-current="page">
{{ item.text }}
</span>
{% endif %}
<a class="breadcrumb__link {% if loop.index0 > 0 %} active_trail {% endif %} " title="{{ item.link_title }}" href="{{ item.url }}">{{ item.text }}</a>
</li>
{% endfor %}
</ol>
</div>
</nav>
</div>
......@@ -4,12 +4,13 @@ heading: ''
breadcrumb:
-
url: '#'
text: 'Home'
text: 'About Waterloo'
link_title: 'this is link title'
-
url: '#'
text: 'Level 1'
text: 'Reports'
link_title: 'this is link title'
-
url: '#'
text: 'Level 2'
-
text: 'Current item'
text: 'Reports Level 2'
link_title: 'this is link title'
// @file
// Styles for Button.
.button {
.button,
button{
@include button();
margin: 0 0 rem(gesso-spacing(xs));
.layout-builder-form &,
.form-actions &
......@@ -102,6 +101,19 @@
}
}
// Css within pattern lab.
.pattern-lab-content .mobile-menu-button,
.pl-c-pattern__extra-toggle{
max-width:inherit;
width:auto;
}
.pl-c-pattern .pl-c-demo button,
.pl-c-pattern .pl-c-demo .button{
margin: 0 0 rem(gesso-spacing(xs));
}
//
//%button, .expandable h2:first-child div[role="button"] {
// @include appearance(none);
......
{% if is_demo %}
<div class="pl-c-demo">
{% endif %}
{% if is_button_tag %}
<button class="button {{ modifier_classes }}"{% if is_disabled %} disabled{% endif %}>{{ text }}</button>
{% else %}
......@@ -11,3 +14,7 @@
<br>
<button class="button {{ modifier_classes }}" disabled>Disabled {{ text }}</button>
{% endif %}
{% if is_demo %}
</div">
{% endif %}
\ No newline at end of file