diff --git a/css/styles.css b/css/styles.css index 840a61eb1b1f876cbae355d7f3dfa8c7d4e8c7d3..13db3a5a70a22ccd60cd775370ea222eeb0ebe1a 100644 --- a/css/styles.css +++ b/css/styles.css @@ -1,3 +1,4 @@ +@charset "UTF-8"; /** * Breakpoint Configuration * @see https://github.com/Team-Sass/breakpoint/wiki @@ -483,6 +484,183 @@ 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::before { + content: "î¤"; } + +.fdsu-vimeo-box::before { + content: ""; } + +.fdsu-add-to-calendar::before { + content: "★"; } + +.fdsu-envelope::before { + content: ""; } + +.fdsu-bubble::before { + content: "î…Ÿ"; } + +.fdsu-binoculars::before { + content: ""; } + +.fdsu-search::before { + content: ""; } + +.fdsu-search-2::before { + content: ""; } + +.fdsu-search-shade::before { + content: ""; } + +.fdsu-arrow-right::before { + content: ""; } + +.fdsu-googleplus-box::before { + content: "î’•"; } + +.fdsu-github::before { + content: "î’º"; } + +.fdsu-github-box::before { + content: "î’»"; } + +.fdsu-yahoo::before { + content: "î“„"; } + +.fdsu-tux::before { + content: "î“…"; } + +.fdsu-apple::before { + content: ""; } + +.fdsu-finder::before { + content: ""; } + +.fdsu-android::before { + content: ""; } + +.fdsu-windows::before { + content: ""; } + +.fdsu-windows8::before { + content: "î“Š"; } + +.fdsu-skype::before { + content: "î“"; } + +.fdsu-html5::before { + content: "î“«"; } + +.fdsu-css3::before { + content: ""; } + +.fdsu-chrome::before { + content: "î“"; } + +.fdsu-firefox::before { + content: "î“®"; } + +.fdsu-ie::before { + content: ""; } + +.fdsu-opera::before { + content: "î“°"; } + +.fdsu-safari::before { + content: ""; } + +.fdsu-close::before { + content: ""; } + +.fdsu-si-comm::before { + content: ""; } + +.fdsu-info::before { + content: ""; } + +.fdsu-info-2::before { + content: ""; } + +.fdsu-chevron::before { + content: ""; } + +.fdsu-ical::before { + content: ""; } + +.fdsu-arrow::before { + content: ""; } + +.fdsu-comment::before { + content: ""; } + +.fdsu-share::before { + content: ""; } + +.fdsu-facebook::before { + content: ""; } + +.fdsu-facebook-box::before { + content: ""; } + +.fdsu-instagram-box::before { + content: "î¤"; } + +.fdsu-instagram::before { + content: ""; } + +.fdsu-linkedin::before { + content: "î¤"; } + +.fdsu-linkedin-box::before { + content: "î¤"; } + +.fdsu-twitter::before { + content: ""; } + +.fdsu-twitter-box::before { + content: ""; } + +.fdsu-youtube-box::before { + content: ""; } + +.fdsu-youtube::before { + content: ""; } + +.fdsu-calendar::before { + content: ""; } + +.fdsu-cloud::before { + content: ""; } + +.fdsu-rss-box::before { + content: ""; } + +.fdsu-snapchat::before { + content: ""; } + +.fdsu-si-comp::before { + content: ""; } + +.fdsu-si-infrastructure::before { + content: ""; } + +.fdsu-si-professionals::before { + content: ""; } + +.fdsu-si-security::before { + content: ""; } + +.fdsu-si-teach::before { + content: ""; } + +.fdsu-clock2::before { + content: "î¥"; } + +.fdsu-spoon-knife::before { + content: ""; } + +.fdsu-location::before { + content: ""; } + article, aside, details, @@ -989,12 +1167,14 @@ fieldset { input { line-height: normal; } -label { +label, +.label { font-family: "BureauGrotCond Book", impact, "avenir next condensed heavy", "Droid Sans", sans-serif; - font-size: 16px; + font-size: 20.256px; font-weight: 400; - margin-bottom: 1rem; } - label abbr { + margin-bottom: 0.5rem; } + label abbr, + .label abbr { display: inline; font-size: 18px; } @@ -1193,7 +1373,7 @@ svg:not(:root) { letter-spacing: 0.055rem; line-height: 1.45; max-width: 18.125rem; - padding: 1rem 1.5rem; + padding: 1rem 2rem; text-align: center; text-decoration: none; text-shadow: none; @@ -1718,163 +1898,6 @@ svg:not(:root) { padding: 0; width: 100%; } -.layout--uwfivecol { - display: grid; } - .layout--uwfivecol.even-split { - grid-template-columns: 20% 20% 20% 20% 20%; } - .layout--uwfivecol.larger-left { - grid-template-columns: 40% 15% 15% 15% 15%; } - .layout--uwfivecol.larger-second { - grid-template-columns: 15% 40% 15% 15% 15%; } - .layout--uwfivecol.larger-third { - grid-template-columns: 15% 15% 40% 15% 15%; } - .layout--uwfivecol.larger-fourth { - grid-template-columns: 15% 15% 15% 40% 15%; } - .layout--uwfivecol.larger-right { - grid-template-columns: 15% 15% 15% 15% 40%; } - .layout--uwfivecol.legacy-23-19-19-19-20 { - grid-template-columns: 23% 19% 19% 19% 20%; } - .layout--uwfivecol .layout__region--first { - grid-column: 1 / 2; } - .layout--uwfivecol .layout__region--second { - grid-column: 2 / 3; } - .layout--uwfivecol .layout__region--third { - grid-column: 3 / 4; } - .layout--uwfivecol .layout__region--fourth { - grid-column: 4 / 5; } - .layout--uwfivecol .layout__region--fifth { - grid-column: 5 / 6; } - -.layout--uwfourcol { - display: grid; } - .layout--uwfourcol .layout__region--first { - grid-column: 1 / 2; } - .layout--uwfourcol .layout__region--second { - grid-column: 2 / 3; } - .layout--uwfourcol .layout__region--third { - grid-column: 3 / 4; } - .layout--uwfourcol .layout__region--fourth { - grid-column: 4 / 5; } - -.layout--uwfourcol.even-split { - grid-template-columns: 25% 25% 25% 25%; } - -.layout--uwfourcol.larger-left { - grid-template-columns: 50% 16.67% 16.67% 16.66%; } - -.layout--uwfourcol.larger-second { - grid-template-columns: 16.67% 50% 16.67% 16.66%; } - -.layout--uwfourcol.larger-third { - grid-template-columns: 16.67% 16.67% 50% 16.66%; } - -.layout--uwfourcol.larger-right { - grid-template-columns: 16.67% 16.67% 16.66% 50%; } - -.layout--uwfourcol.legacy-23-27-27-23 { - grid-template-columns: 23% 27% 27% 23%; } - -.layout--invertedlleft { - display: grid; } - .layout--invertedlleft.even-split { - grid-template-columns: 50% 25% 25%; } - .layout--invertedlleft.larger-left { - grid-template-columns: 50% 33.5% 16.5%; } - .layout--invertedlleft.larger-right { - grid-template-columns: 50% 16.5% 33.5%; } - .layout--invertedlleft .layout__region--first { - grid-column: 1 / 2; - grid-row: 1 / 3; } - .layout--invertedlleft .layout__region--second { - grid-column: 2 / 3; - grid-row: 1 / 2; } - .layout--invertedlleft .layout__region--third { - grid-column: 3 / 4; - grid-row: 1 / 2; } - .layout--invertedlleft .layout__region--fourth { - grid-column: 2 / 4; - grid-row: 2 / 3; } - -.layout--invertedlright { - display: grid; } - .layout--invertedlright.even-split { - grid-template-columns: 25% 25% 50%; } - .layout--invertedlright.larger-left { - grid-template-columns: 33.5% 16.5% 50%; } - .layout--invertedlright.larger-right { - grid-template-columns: 16.5% 33.5% 50%; } - .layout--invertedlright .layout__region--first { - grid-column: 1 / 2; - grid-row: 1 / 2; } - .layout--invertedlright .layout__region--first { - grid-column: 2 / 3; - grid-row: 1 / 2; } - .layout--invertedlright .layout__region--third { - grid-column: 1 / 3; - grid-row: 2 / 3; } - .layout--invertedlright .layout__region--fourth { - grid-column: 3 / 4; - grid-row: 1 / 3; } - -.layout--uwfourcol { - display: grid; - grid-template-columns: 100%; } - .layout--uwfourcol .layout__region--first { - grid-column: 1 / 2; } - -.layout--uwthreecol { - display: grid; } - .layout--uwthreecol .layout__region--first { - grid-column: 1 / 2; } - .layout--uwthreecol .layout__region--second { - grid-column: 2 / 3; } - .layout--uwthreecol .layout__region--third { - grid-column: 3 / 4; } - -.layout--uwthreecol.even-split { - grid-template-columns: 33% 34% 33%; } - -.layout--uwthreecol.larger-left { - grid-template-columns: 50% 25% 25%; } - -.layout--uwthreecol.larger-middle { - grid-template-columns: 25% 50% 25%; } - -.layout--uwthreecol.larger-right { - grid-template-columns: 25% 25% 50%; } - -.layout--uwthreecol.legacy-38-38-24 { - grid-template-columns: 38% 38% 24%; } - -.layout--uwthreecol.legacy-24-38-38 { - grid-template-columns: 24% 38% 38%; } - -.layout.uw-contained-width { - margin-left: auto; - margin-right: auto; - max-width: 63.1875rem; - padding: 0 16px; } - @media (min-width: 80rem) { - .layout.uw-contained-width { - padding-left: 0; - padding-right: 0; } } - -.layout--uwtwocol { - display: grid; } - .layout--uwtwocol .layout__region--first { - grid-column: 1 / 2; } - .layout--uwtwocol .layout__region--second { - grid-column: 2 / 3; } - -.layout--uwtwocol.larger-left { - grid-template-columns: 67% 33%; } - -.layout--uwtwocol.larger-right { - grid-template-columns: 33% 67%; } - -.layout--uwtwocol.even-split { - grid-template-columns: 50% 50%; } - .l-media { display: flex; flex-direction: column; } @@ -2044,6 +2067,7 @@ svg:not(:root) { .js-media-library-view, .messages, .message, +.contextual-region.profile, form { margin-left: auto; margin-right: auto; @@ -2060,6 +2084,7 @@ form { .js-media-library-view, .messages, .message, + .contextual-region.profile, form { padding-left: 0; padding-right: 0; } } @@ -2073,6 +2098,7 @@ form { .js-media-library-view, .messages, .message, + .contextual-region.profile, form { padding: 1rem 0; } } @@ -2176,13 +2202,17 @@ ul.toolbar-menu { font-weight: normal; text-align: left; } +.uw-site--breadcrumb { + line-height: 1.25; + text-align: center; } + @media (min-width: 48.0625em) { + .uw-site--breadcrumb { + text-align: left; } } + .breadcrumb { - background-color: #112E51; - color: #fff; - font-size: 1rem; - margin: 1rem 0; - min-height: 2.5rem; - padding-top: 1rem; } + color: #000; + font-family: Typ1451-Medium,-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Oxygen-Sans", Ubuntu, Cantarell, "Fira Sans", Droid Sans, sans-serif; + font-size: 0.79rem; } .breadcrumb::after { clear: both; content: ""; @@ -2198,40 +2228,29 @@ ul.toolbar-menu { display: inline; } .breadcrumb__item { - margin-right: 0.75em; } + display: inline; + margin: 0; + padding: 0; } .breadcrumb__item::after { - color: #eee; - content: '/'; - margin-left: 0.75em; } - .breadcrumb__item:last-child::after { - content: ''; - margin-left: 0; } - -@media (max-width: 40.0625em) { - .breadcrumb__list .breadcrumb__item { - display: none; } - .breadcrumb__list .breadcrumb__item:nth-last-child(2) { - display: block; } - .breadcrumb__list .breadcrumb__item:nth-last-child(2)::after { - display: none; } - .breadcrumb__list .breadcrumb__item:nth-last-child(2)::before { - color: #eee; - content: '<'; - margin-right: 0.75em; } } + color: #000; + content: ' » '; } .breadcrumb__link { - color: #A2A2A2; + color: #4e4e4e; text-decoration: underline; text-decoration: none; } .breadcrumb__link:visited { - color: #A2A2A2; } + color: #4e4e4e; } .breadcrumb__link:hover, .breadcrumb__link:focus { - color: #fff; + color: #000; text-decoration: none; } .breadcrumb__link:active { - color: #fff; } + color: #000; } + .breadcrumb__link:hover, .breadcrumb__link:focus { + text-decoration: underline; } -.button { +.button, +button { background-color: #757575; background-image: none; border: 0; @@ -2247,7 +2266,7 @@ ul.toolbar-menu { letter-spacing: 0.055rem; line-height: 1.45; max-width: 18.125rem; - padding: 1rem 1.5rem; + padding: 1rem 2rem; text-align: center; text-decoration: none; text-shadow: none; @@ -2255,11 +2274,13 @@ ul.toolbar-menu { transition: background 200ms cubic-bezier(0.4, 0, 1, 1); vertical-align: top; white-space: normal; - width: 100%; - margin: 0 0 0.5rem; } - .button:visited { + width: 100%; } + .button:visited, + button:visited { color: #fff; } - .button:hover, .button:focus { + .button:hover, .button:focus, + button:hover, + button:focus { background-color: #eee; background-image: none; border: 0; @@ -2267,19 +2288,24 @@ ul.toolbar-menu { color: #4e4e4e; outline: none !important; text-decoration: none; } - .button:active { + .button:active, + button:active { background-color: #757575; background-image: none; color: #fff; outline: none !important; } - .button[disabled] { + .button[disabled], + button[disabled] { background-color: #eee; background-image: none; color: #A2A2A2; cursor: default; pointer-events: none; } .layout-builder-form .button, - .form-actions .button { + .form-actions .button, .layout-builder-form + button, + .form-actions + button { font-size: 0.79rem; height: 2.5rem; line-height: 2.75; @@ -2287,11 +2313,19 @@ ul.toolbar-menu { padding: 0.25rem 0.25rem; } .layout-builder-form .button:hover, .layout-builder-form .button:focus, .form-actions .button:hover, - .form-actions .button:focus { + .form-actions .button:focus, .layout-builder-form + button:hover, .layout-builder-form + button:focus, + .form-actions + button:hover, + .form-actions + button:focus { padding: 0.25rem 0.25rem; } - .ui-dialog-buttonset.form-actions .button { + .ui-dialog-buttonset.form-actions .button, .ui-dialog-buttonset.form-actions + button { max-width: 10rem; } - .user-login-form .form-actions .button { + .user-login-form .form-actions .button, .user-login-form .form-actions + button { background-color: #757575; background-image: none; border: 0; @@ -2307,7 +2341,7 @@ ul.toolbar-menu { letter-spacing: 0.055rem; line-height: 1.45; max-width: 18.125rem; - padding: 1rem 1.5rem; + padding: 1rem 2rem; text-align: center; text-decoration: none; text-shadow: none; @@ -2316,9 +2350,12 @@ ul.toolbar-menu { vertical-align: top; white-space: normal; width: 100%; } - .user-login-form .form-actions .button:visited { + .user-login-form .form-actions .button:visited, .user-login-form .form-actions + button:visited { color: #fff; } - .user-login-form .form-actions .button:hover, .user-login-form .form-actions .button:focus { + .user-login-form .form-actions .button:hover, .user-login-form .form-actions .button:focus, .user-login-form .form-actions + button:hover, .user-login-form .form-actions + button:focus { background-color: #eee; background-image: none; border: 0; @@ -2326,12 +2363,14 @@ ul.toolbar-menu { color: #4e4e4e; outline: none !important; text-decoration: none; } - .user-login-form .form-actions .button:active { + .user-login-form .form-actions .button:active, .user-login-form .form-actions + button:active { background-color: #757575; background-image: none; color: #fff; outline: none !important; } - .user-login-form .form-actions .button[disabled] { + .user-login-form .form-actions .button[disabled], .user-login-form .form-actions + button[disabled] { background-color: #eee; background-image: none; color: #A2A2A2; @@ -2388,98 +2427,134 @@ ul.toolbar-menu { background-color: #ef6114; color: #fff; } +.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 0.5rem; } + .uw-cta .neutral .uw-cta__text--big { color: #787878; } -.uw-cta__aside.neutral:hover { +.uw-cta__aside.neutral a:hover, .uw-cta__aside.neutral a:focus { background-color: #787878; } - .uw-cta__aside.neutral:hover .uw-cta__text--big { + .uw-cta__aside.neutral a:hover .uw-cta__text--big, .uw-cta__aside.neutral a:focus .uw-cta__text--big { color: #fff; } .uw-cta .org-default .uw-cta__text--big { color: #fdd54f; } -.uw-cta__aside.org-default:hover { +.uw-cta__aside.org-default a:hover, .uw-cta__aside.org-default a:focus { background-color: #fdd54f; } - .uw-cta__aside.org-default:hover .uw-cta__text--big, - .uw-cta__aside.org-default:hover .uw-cta__text--small, - .uw-cta__aside.org-default:hover .uw-cta__text--medium { + .uw-cta__aside.org-default a:hover .uw-cta__text--big, + .uw-cta__aside.org-default a:hover .uw-cta__text--small, + .uw-cta__aside.org-default a:hover .uw-cta__text--medium, .uw-cta__aside.org-default a:focus .uw-cta__text--big, + .uw-cta__aside.org-default a:focus .uw-cta__text--small, + .uw-cta__aside.org-default a:focus .uw-cta__text--medium { color: #000; } .uw-cta .org-ahs .uw-cta__text--big { color: #97dfef; } -.uw-cta__aside.org-ahs:hover { +.uw-cta__aside.org-ahs a:hover, .uw-cta__aside.org-ahs a:focus { background-color: #97dfef; } - .uw-cta__aside.org-ahs:hover .uw-cta__text--big, - .uw-cta__aside.org-ahs:hover .uw-cta__text--small, - .uw-cta__aside.org-ahs:hover .uw-cta__text--medium { + .uw-cta__aside.org-ahs a:hover .uw-cta__text--big, + .uw-cta__aside.org-ahs a:hover .uw-cta__text--small, + .uw-cta__aside.org-ahs a:hover .uw-cta__text--medium, .uw-cta__aside.org-ahs a:focus .uw-cta__text--big, + .uw-cta__aside.org-ahs a:focus .uw-cta__text--small, + .uw-cta__aside.org-ahs a:focus .uw-cta__text--medium { color: #005963; } .uw-cta .org-art .uw-cta__text--big { color: #ffd5a5; } -.uw-cta__aside.org-art:hover { +.uw-cta__aside.org-art a:hover, .uw-cta__aside.org-art a:focus { background-color: #ffd5a5; } - .uw-cta__aside.org-art:hover .uw-cta__text--big, - .uw-cta__aside.org-art:hover .uw-cta__text--small, - .uw-cta__aside.org-art:hover .uw-cta__text--medium { + .uw-cta__aside.org-art a:hover .uw-cta__text--big, + .uw-cta__aside.org-art a:hover .uw-cta__text--small, + .uw-cta__aside.org-art a:hover .uw-cta__text--medium, .uw-cta__aside.org-art a:focus .uw-cta__text--big, + .uw-cta__aside.org-art a:focus .uw-cta__text--small, + .uw-cta__aside.org-art a:focus .uw-cta__text--medium { color: #d93f00; } .uw-cta .org-eng .uw-cta__text--big { color: #d0b4ef; } -.uw-cta__aside.org-eng:hover { +.uw-cta__aside.org-eng a:hover, .uw-cta__aside.org-eng a:focus { background-color: #d0b4ef; } - .uw-cta__aside.org-eng:hover .uw-cta__text--big, - .uw-cta__aside.org-eng:hover .uw-cta__text--small, - .uw-cta__aside.org-eng:hover .uw-cta__text--medium { + .uw-cta__aside.org-eng a:hover .uw-cta__text--big, + .uw-cta__aside.org-eng a:hover .uw-cta__text--small, + .uw-cta__aside.org-eng a:hover .uw-cta__text--medium, .uw-cta__aside.org-eng a:focus .uw-cta__text--big, + .uw-cta__aside.org-eng a:focus .uw-cta__text--small, + .uw-cta__aside.org-eng a:focus .uw-cta__text--medium { color: #57058b; } .uw-cta .org-env .uw-cta__text--big { color: #daf582; } -.uw-cta__aside.org-env:hover { +.uw-cta__aside.org-env a:hover, .uw-cta__aside.org-env a:focus { background-color: #daf582; } - .uw-cta__aside.org-env:hover .uw-cta__text--big, - .uw-cta__aside.org-env:hover .uw-cta__text--small, - .uw-cta__aside.org-env:hover .uw-cta__text--medium { + .uw-cta__aside.org-env a:hover .uw-cta__text--big, + .uw-cta__aside.org-env a:hover .uw-cta__text--small, + .uw-cta__aside.org-env a:hover .uw-cta__text--medium, .uw-cta__aside.org-env a:focus .uw-cta__text--big, + .uw-cta__aside.org-env a:focus .uw-cta__text--small, + .uw-cta__aside.org-env a:focus .uw-cta__text--medium { color: #607000; } .uw-cta .org-mat .uw-cta__text--big { color: #ffbeef; } -.uw-cta__aside.org-mat:hover { +.uw-cta__aside.org-mat a:hover, .uw-cta__aside.org-mat a:focus { background-color: #ffbeef; } - .uw-cta__aside.org-mat:hover .uw-cta__text--big, - .uw-cta__aside.org-mat:hover .uw-cta__text--small, - .uw-cta__aside.org-mat:hover .uw-cta__text--medium { + .uw-cta__aside.org-mat a:hover .uw-cta__text--big, + .uw-cta__aside.org-mat a:hover .uw-cta__text--small, + .uw-cta__aside.org-mat a:hover .uw-cta__text--medium, .uw-cta__aside.org-mat a:focus .uw-cta__text--big, + .uw-cta__aside.org-mat a:focus .uw-cta__text--small, + .uw-cta__aside.org-mat a:focus .uw-cta__text--medium { color: #c60078; } .uw-cta .org-sci .uw-cta__text--big { color: #b4d5ff; } -.uw-cta__aside.org-sci:hover { +.uw-cta__aside.org-sci a:hover, .uw-cta__aside.org-sci a:focus { background-color: #b4d5ff; } - .uw-cta__aside.org-sci:hover .uw-cta__text--big, - .uw-cta__aside.org-sci:hover .uw-cta__text--small, - .uw-cta__aside.org-sci:hover .uw-cta__text--medium { + .uw-cta__aside.org-sci a:hover .uw-cta__text--big, + .uw-cta__aside.org-sci a:hover .uw-cta__text--small, + .uw-cta__aside.org-sci a:hover .uw-cta__text--medium, .uw-cta__aside.org-sci a:focus .uw-cta__text--big, + .uw-cta__aside.org-sci a:focus .uw-cta__text--small, + .uw-cta__aside.org-sci a:focus .uw-cta__text--medium { color: #0033be; } .uw-cta .org-school .uw-cta__text--big { color: #ffa5aa; } -.uw-cta__aside.org-school:hover { +.uw-cta__aside.org-school a:hover, .uw-cta__aside.org-school a:focus { background-color: #ffa5aa; } - .uw-cta__aside.org-school:hover .uw-cta__text--big, - .uw-cta__aside.org-school:hover .uw-cta__text--small, - .uw-cta__aside.org-school:hover .uw-cta__text--medium { + .uw-cta__aside.org-school a:hover .uw-cta__text--big, + .uw-cta__aside.org-school a:hover .uw-cta__text--small, + .uw-cta__aside.org-school a:hover .uw-cta__text--medium, .uw-cta__aside.org-school a:focus .uw-cta__text--big, + .uw-cta__aside.org-school a:focus .uw-cta__text--small, + .uw-cta__aside.org-school a:focus .uw-cta__text--medium { color: #80001f; } +.uw-cta__center-wrapper { + align-items: center; + display: flex; + -ms-flex-align: center; + flex-direction: row; + flex-wrap: wrap; + justify-content: center; + margin-left: auto; + margin-right: auto; + width: 100%; } + .uw-cta { clear: both; height: 100%; - padding: 1rem; + padding: 1.5rem; width: 100%; } .uw-cta.uw-contained-width { margin-left: auto; @@ -2493,58 +2568,114 @@ ul.toolbar-menu { padding-right: 0; } } .uw-cta .uw-cta__aside { background-color: #000; - flex: 1 0 30%; - margin: 0 1rem 0 0; } + flex: 1 0 100%; } + @media (min-width: 40.06rem) { + .uw-cta .uw-cta__aside { + flex: 1 0 50%; } } + @media (min-width: 40.06rem) { + .uw-cta .uw-cta__aside { + flex: 1 0 30%; } } .uw-cta .uw-cta__aside:last-child { margin: 0; } .uw-cta__link { border: 0; + bottom: 0; display: block; font-family: "BureauGrotCond Book", impact, "avenir next condensed heavy", "Droid Sans", sans-serif; + height: 100%; + left: 0; + min-height: 6.25rem; padding: 0; + position: relative; + right: 0; text-decoration: none; + top: 0; width: 100%; } .uw-cta__link:hover { text-decoration: none; } .uw-cta__text { - font-family: "BureauGrotCond Book", impact, "avenir next condensed heavy", "Droid Sans", sans-serif; } + font-family: "BureauGrotCond Book", impact, "avenir next condensed heavy", "Droid Sans", sans-serif; + text-align: center; } .uw-cta__text--big { font-size: 1.424rem; letter-spacing: 0.05rem; line-height: 1.2; - padding: 0 0.25rem 0.313rem; } + padding: 0 0.25rem 0.313rem 0.25rem; } .uw-cta__text--medium { color: #fff; font-size: 1rem; - letter-spacing: 0.05rem; line-height: 1.2; - padding: 0 0.25rem 0.313rem; + padding: 0 0.25rem 0.25rem 0.25rem; text-transform: uppercase; } .uw-cta__text--small { color: #fff; font-family: Typ1451-Medium,-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Oxygen-Sans", Ubuntu, Cantarell, "Fira Sans", Droid Sans, sans-serif; font-size: 0.79rem; - letter-spacing: 0.02rem; line-height: 1; - padding: 0 0.15rem 0.313rem; + padding: 0 0.25rem 0.25rem 0.25rem; text-transform: uppercase; } -.uw-cta__center-wrapper { - align-items: center; - display: flex; - -ms-flex-align: center; - flex-direction: row; - flex-wrap: wrap; - justify-content: center; - margin-left: auto; - margin-right: auto; - text-align: center; - width: 100%; } +.call-to-action-theme-neutral { + border: 1px solid #fff; + display: table-cell; + margin: 1px; + vertical-align: middle; } + +.call-to-action-theme-org-default { + border: 1px solid #fff; + display: table-cell; + margin: 1px; + vertical-align: middle; } + +.call-to-action-theme-org-ahs { + border: 1px solid #fff; + display: table-cell; + margin: 1px; + vertical-align: middle; } + +.call-to-action-theme-org-art { + border: 1px solid #fff; + display: table-cell; + margin: 1px; + vertical-align: middle; } + +.call-to-action-theme-org-eng { + border: 1px solid #fff; + display: table-cell; + margin: 1px; + vertical-align: middle; } + +.call-to-action-theme-org-env { + border: 1px solid #fff; + display: table-cell; + margin: 1px; + vertical-align: middle; } + +.call-to-action-theme-org-mat { + border: 1px solid #fff; + display: table-cell; + margin: 1px; + vertical-align: middle; } + +.call-to-action-theme-org-sci { + border: 1px solid #fff; + display: table-cell; + margin: 1px; + vertical-align: middle; } + +.call-to-action-theme-org-school { + border: 1px solid #fff; + display: table-cell; + margin: 1px; + vertical-align: middle; } .uw-cta__wrapper { - padding: 1rem 0; } + display: table; + float: left; + height: 6.25rem; + width: 100%; } .uw-caption .caption { background: #eee; @@ -2838,53 +2969,89 @@ details.details { .details__description > :last-child { margin-bottom: 0; } -.uw-expand-collapse__item { - display: block; - width: 100%; } - -.uw-expand-collapse__controls { - display: grid; - grid-template-columns: 50% 50%; } - -.uw-expand-collapse__button { - background-color: #fafafa; - color: #eee; - font-family: "BureauGrotCond Book", impact, "avenir next condensed heavy", "Droid Sans", sans-serif; - font-size: 1.125rem; - padding: 0.75rem; - position: relative; - text-align: left; - text-transform: uppercase; - width: 100%; } - .uw-expand-collapse__button:hover { - background-color: #eee; - color: #fafafa; } - .uw-expand-collapse__button--controls { - text-align: center; } - .uw-expand-collapse__button--title:hover::after { - border: solid #fafafa; - border-width: 0 3px 3px 0; } - .uw-expand-collapse__button--title::after { - border: solid #eee; - border-width: 0 3px 3px 0; - content: ''; - display: inline-block; - padding: 3px; - position: absolute; - right: 5%; - top: 40%; - -webkit-transform: rotate(45deg); - transform: rotate(45deg); - transform-origin: 50% 50%; - z-index: 2; } - .uw-expand-collapse__button--title.uw-expanded::after { - -webkit-transform: rotate(-135deg); - transform: rotate(-135deg); } - -.uw-expand-collapse__text { - display: none; - font-size: 1rem; - padding: 1rem 2rem; } +.uw-expand-collapse { + -webkit-font-smoothing: antialiased; + font-weight: 200; } + .uw-expand-collapse__item { + display: block; + margin: 0 0 1rem 0; + width: 100%; } + .uw-expand-collapse__item h2 { + margin: 0; } + .uw-expand-collapse__controls { + display: grid; + grid-template-columns: 50% 50%; + margin-bottom: 1rem; } + .uw-expand-collapse__button { + background: #eee; + font-size: 1.125rem; + font-weight: 400; + margin: 0; + max-width: inherit; } + .uw-expand-collapse__button:hover, .uw-expand-collapse__button:focus { + outline: none; } + .uw-expand-collapse__button:hover[data-type="expand-all"], .uw-expand-collapse__button:focus[data-type="expand-all"] { + background: #4e4e4e; + color: #eee; } + .uw-expand-collapse__button:hover[data-type="collapse-all"], .uw-expand-collapse__button:focus[data-type="collapse-all"] { + background: #4e4e4e; + color: #eee; } + .uw-expand-collapse__button--controls { + text-align: center; } + .uw-expand-collapse__button[data-type="expand-all"] { + background: #eee; + border-right: 1px solid #A2A2A2; + color: #4e4e4e; } + .uw-expand-collapse__button[data-type="collapse-all"] { + background: #eee; + color: #4e4e4e; } + .uw-expand-collapse__button--title { + color: #4e4e4e; + display: table; + font-size: 1.125rem; + font-weight: 400; + height: auto; + line-height: 1.25; + margin: 0; + max-width: inherit; + min-height: 3.563rem; + padding: 0.75rem 3rem 0.75rem 0.75rem; + position: relative; + table-layout: fixed; + text-align: left; + -webkit-user-select: text; + -moz-user-select: text; + -ms-user-select: text; + user-select: text; + white-space: normal; + width: 100%; } + .uw-expand-collapse__button--title::after { + content: '\e906'; + display: block; + font-family: fdsu-rwd; + font-size: 0.79rem; + position: absolute; + right: 5%; + text-align: center; + text-rendering: auto; + top: 40%; + transform: scale(1, 1) rotate(90deg); + transform-origin: 50% 50%; + transition-delay: 0s; + transition-duration: 0.2s; + transition-property: transform; + transition-timing-function: linear; + z-index: 2; } + .uw-expand-collapse__button--title.uw-expanded::after { + transform: scale(1, -1) rotate(90deg); } + .uw-expand-collapse__button--title:hover, .uw-expand-collapse__button--title:focus { + background: #4e4e4e; + color: #eee; + outline: none; } + .uw-expand-collapse__text { + display: none; + font-size: 1rem; + padding: 1rem; } .uw-facebook { padding: 1rem 0; @@ -3742,7 +3909,7 @@ fieldset, width: 100%; } .uw-mailman__label { display: block; - margin-bottom: .35rem; } + margin-bottom: 0.5rem; } .uw-mailman__label--email { font-family: "BureauGrotCond Book", impact, "avenir next condensed heavy", "Droid Sans", sans-serif; font-size: 1.424rem; @@ -3750,6 +3917,11 @@ fieldset, .uw-mailman__servername { text-align: center; } +.uw-mailmain__email .uw-input--submit { + font-size: 1rem; + font-weight: 400; + max-width: 8.5rem; } + .menu { list-style-type: none; margin: 0; @@ -5030,7 +5202,7 @@ html:not(.js) .uw-tabcontent[role="tabpanel"][hidden] { text-align: center; } .uw-territorial p { color: #fff; - font-family: Typ1451-Regular; + font-family: Typ1451-Medium,-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Oxygen-Sans", Ubuntu, Cantarell, "Fira Sans", Droid Sans, sans-serif; font-size: 0.79rem; font-weight: 200; letter-spacing: 0.5px; @@ -5062,6 +5234,36 @@ html:not(.js) .uw-tabcontent[role="tabpanel"][hidden] { margin-right: auto; text-align: center; } +.views-element-container { + margin-left: auto; + margin-right: auto; + max-width: 63.1875rem; + padding: 0 16px; + padding: 1rem; } + @media (min-width: 80rem) { + .views-element-container { + padding-left: 0; + padding-right: 0; } } + @media (min-width: 80rem) { + .views-element-container { + padding: 1rem 0; } } + +.view-content { + display: inline-flex; + flex-flow: row wrap; } + +.view.view-taxonomy-term .views-row, .view.view-uw-view-blogs .views-row, .view.view-uw-view-events .views-row, .view.view-uw-view-news-items .views-row { + align-items: flex-start; + margin: 1rem; + width: 100%; } + @media (min-width: 40.06rem) { + .view.view-taxonomy-term .views-row, .view.view-uw-view-blogs .views-row, .view.view-uw-view-events .views-row, .view.view-uw-view-news-items .views-row { + flex-grow: 1; + width: 45%; } } + @media (min-width: 63.1875rem) { + .view.view-taxonomy-term .views-row, .view.view-uw-view-blogs .views-row, .view.view-uw-view-events .views-row, .view.view-uw-view-news-items .views-row { + width: 30%; } } + .view__filters { margin-bottom: 1rem; } diff --git a/source/_patterns/00-config/01-mixins/_mixins.button.scss b/source/_patterns/00-config/01-mixins/_mixins.button.scss index eb438378a2f3994cf15564b75bfea54b271a833f..fbdda9eb0385940f4d12080cf8e5b404f90c56ab 100644 --- a/source/_patterns/00-config/01-mixins/_mixins.button.scss +++ b/source/_patterns/00-config/01-mixins/_mixins.button.scss @@ -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; diff --git a/source/_patterns/02-base/00-fonts/_fonts.scss b/source/_patterns/02-base/00-fonts/_fonts.scss index 65f55062ef1403217b91705593e7b8eb69a8461d..f266a7477c2c8c307c69d719789059daa824c94e 100644 --- a/source/_patterns/02-base/00-fonts/_fonts.scss +++ b/source/_patterns/02-base/00-fonts/_fonts.scss @@ -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 diff --git a/source/_patterns/02-base/02-html-elements/16-blockquote/blockquote.twig b/source/_patterns/02-base/02-html-elements/16-blockquote/blockquote.twig index 5329f0104b4e0e2539ee8a24654b48db6fe629ac..b3e8c6c84049ac1be908e38024af5bf7367ed8ea 100644 --- a/source/_patterns/02-base/02-html-elements/16-blockquote/blockquote.twig +++ b/source/_patterns/02-base/02-html-elements/16-blockquote/blockquote.twig @@ -1,8 +1,14 @@ -<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 diff --git a/source/_patterns/02-base/02-html-elements/16-blockquote/blockquote.yml b/source/_patterns/02-base/02-html-elements/16-blockquote/blockquote.yml index 1a2d235c83f16239a50d2f5da7aeb30e40fcd74a..533270537ceaae76c2e17a876cd8de425ab3ab91 100644 --- a/source/_patterns/02-base/02-html-elements/16-blockquote/blockquote.yml +++ b/source/_patterns/02-base/02-html-elements/16-blockquote/blockquote.yml @@ -1,5 +1,3 @@ ---- -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' diff --git a/source/_patterns/02-base/02-html-elements/25-forms/_forms.scss b/source/_patterns/02-base/02-html-elements/25-forms/_forms.scss index 7c040f45dd1097f8579962d41060ce8036a564b4..a0f0c63782c630852e35fa568cea3898ba3633bd 100644 --- a/source/_patterns/02-base/02-html-elements/25-forms/_forms.scss +++ b/source/_patterns/02-base/02-html-elements/25-forms/_forms.scss @@ -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); diff --git a/source/_patterns/03-layouts/footer/footer.yml b/source/_patterns/03-layouts/footer/footer.yml index 0befe2644b65ef6b147337c00da4fc1322a11b6d..34f936bd2ffebc995fd01dbaea57d2507181ec32 100644 --- a/source/_patterns/03-layouts/footer/footer.yml +++ b/source/_patterns/03-layouts/footer/footer.yml @@ -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 diff --git a/source/_patterns/04-components/00-cms-styles/layout-builder/_layout-builder.scss b/source/_patterns/04-components/00-cms-styles/layout-builder/_layout-builder.scss index 201cd58850ff209791751b86621f424e3143d9fb..1fe8717c34b7dffb9125bdd5ef621b8a82d76058 100644 --- a/source/_patterns/04-components/00-cms-styles/layout-builder/_layout-builder.scss +++ b/source/_patterns/04-components/00-cms-styles/layout-builder/_layout-builder.scss @@ -12,6 +12,7 @@ .js-media-library-view, .messages, .message, +.contextual-region.profile, form { @include uw-contained-width; padding: rem(gesso-spacing(sm)); diff --git a/source/_patterns/04-components/breadcrumb/_breadcrumb.scss b/source/_patterns/04-components/breadcrumb/_breadcrumb.scss index 6b64683fb323e9310d8b4ca622166b732869b75e..f34920d86978d076bd7c18f27393f54b67601759 100644 --- a/source/_patterns/04-components/breadcrumb/_breadcrumb.scss +++ b/source/_patterns/04-components/breadcrumb/_breadcrumb.scss @@ -1,19 +1,23 @@ // @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; + } } diff --git a/source/_patterns/04-components/breadcrumb/breadcrumb.twig b/source/_patterns/04-components/breadcrumb/breadcrumb.twig index ecf66fd0fd9896f4faa318b116f15230afdeb426..6292fef466428c7eb03db692e75379481afd9702 100644 --- a/source/_patterns/04-components/breadcrumb/breadcrumb.twig +++ b/source/_patterns/04-components/breadcrumb/breadcrumb.twig @@ -1,18 +1,12 @@ -<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> diff --git a/source/_patterns/04-components/breadcrumb/breadcrumb.yml b/source/_patterns/04-components/breadcrumb/breadcrumb.yml index 9a632feafe1dbada7c9bcddc2054c3782bd0c82c..8a556dc675c2eefb642e5ca8d1aa2d46cf28eaeb 100644 --- a/source/_patterns/04-components/breadcrumb/breadcrumb.yml +++ b/source/_patterns/04-components/breadcrumb/breadcrumb.yml @@ -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' diff --git a/source/_patterns/04-components/button/_button.scss b/source/_patterns/04-components/button/_button.scss index 07af35781db3a7dd84848e4e66d337f58cc0b77b..cdbf64b3afd5e713a399ce0a3b26d0f56389b5a4 100644 --- a/source/_patterns/04-components/button/_button.scss +++ b/source/_patterns/04-components/button/_button.scss @@ -1,9 +1,8 @@ // @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); diff --git a/source/_patterns/04-components/button/button.twig b/source/_patterns/04-components/button/button.twig index 195125e23646c4a316bb8a825baeb6947e03c674..8ee9b5bf3d7baf1695243f55ac8d466ebc94ad6d 100644 --- a/source/_patterns/04-components/button/button.twig +++ b/source/_patterns/04-components/button/button.twig @@ -1,3 +1,6 @@ +{% 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 diff --git a/source/_patterns/04-components/call-to-action/_call-to-action.scss b/source/_patterns/04-components/call-to-action/_call-to-action.scss index 80395a73b7a270b8613549b288ebfe8b668aa546..8b5c8c101849b1d7b7a971eaa9aea56cfec0fbd4 100644 --- a/source/_patterns/04-components/call-to-action/_call-to-action.scss +++ b/source/_patterns/04-components/call-to-action/_call-to-action.scss @@ -16,43 +16,55 @@ $faculties: 'neutral', 'org-default', 'org-ahs', 'org-art', 'org-eng', 'org-env' } } } - &__aside.#{$faculty} { - &:hover { - @if $faculty == org-default { - background-color: $uw-gold; - - .uw-cta__text--big, - .uw-cta__text--small, - .uw-cta__text--medium { - color: $uw-black; + a{ + &:hover, + &:focus{ + @if $faculty == org-default { + background-color: $uw-gold; + + .uw-cta__text--big, + .uw-cta__text--small, + .uw-cta__text--medium { + color: $uw-black; + } } - } - @else if $faculty == neutral { - background-color: $uw-grey; + @else if $faculty == neutral { + background-color: $uw-grey; - .uw-cta__text--big { - color: $uw-white; + .uw-cta__text--big { + color: $uw-white; + } } - } - @else { - background-color: gesso-brand($faculty, 'lvl1'); - - .uw-cta__text--big, - .uw-cta__text--small, - .uw-cta__text--medium { - color: gesso-brand($faculty, 'lvl4'); + @else { + background-color: gesso-brand($faculty, 'lvl1'); + + .uw-cta__text--big, + .uw-cta__text--small, + .uw-cta__text--medium { + color: gesso-brand($faculty, 'lvl4'); + } } } } } } } - +.uw-cta__center-wrapper { + align-items: center; + display: flex; + -ms-flex-align: center; + flex-direction: row; + flex-wrap: wrap; + justify-content: center; + margin-left: auto; + margin-right: auto; + width: 100%; +} .uw-cta { clear: both; height: 100%; - padding: 1rem; + padding: rem(gesso-spacing(md)); width: 100%; &.uw-contained-width { @@ -62,23 +74,36 @@ $faculties: 'neutral', 'org-default', 'org-ahs', 'org-art', 'org-eng', 'org-env' .uw-cta__aside { background-color: $uw-black; - flex: 1 0 30%; - margin: 0 1rem 0 0; + flex: 1 0 100%; + @include small{ + flex: 1 0 50%; + } + @include small{ + flex: 1 0 30%; + } } .uw-cta__aside:last-child { margin: 0; } } - .uw-cta__link { border: 0; + bottom:0; display: block; font-family:gesso-font-family(condensedbook); + height:100%; + left:0; + min-height:6.25rem; padding: 0; + position:relative; + right:0; text-decoration: none; + top:0; width: 100%; + + &:hover { text-decoration: none; } @@ -86,20 +111,19 @@ $faculties: 'neutral', 'org-default', 'org-ahs', 'org-art', 'org-eng', 'org-env' .uw-cta__text { font-family:gesso-font-family(condensedbook); - + text-align: center; &--big { font-size:rem(gesso-font-size(3)); letter-spacing: 0.05rem; line-height: 1.2; - padding: 0 0.25rem 0.313rem; + padding: 0 rem(gesso-spacing(xxs)) 0.313rem rem(gesso-spacing(xxs)); } &--medium { color: $uw-white; font-size:rem(gesso-font-size(0)); - letter-spacing: 0.05rem; line-height: 1.2; - padding: 0 0.25rem 0.313rem; + padding: 0 rem(gesso-spacing(xxs)) rem(gesso-spacing(xxs)) rem(gesso-spacing(xxs)); text-transform: uppercase; } @@ -107,26 +131,22 @@ $faculties: 'neutral', 'org-default', 'org-ahs', 'org-art', 'org-eng', 'org-env' color: $uw-white; font-family:gesso-font-family(systemmedium); font-size:rem(gesso-font-size(-2)); - letter-spacing: 0.02rem; line-height: 1; - padding: 0 0.15rem 0.313rem; + padding: 0 rem(gesso-spacing(xxs)) rem(gesso-spacing(xxs)) rem(gesso-spacing(xxs)); text-transform: uppercase; } } - -.uw-cta__center-wrapper { - align-items: center; - display: flex; - -ms-flex-align: center; - flex-direction: row; - flex-wrap: wrap; - justify-content: center; - margin-left: auto; - margin-right: auto; - text-align: center; - width: 100%; +@each $faculty in $faculties { + .call-to-action-theme-#{$faculty}{ + border: 1px solid #fff; + display: table-cell; + margin: 1px; + vertical-align: middle; + } } - .uw-cta__wrapper { - padding: 1rem 0; + display: table; + float: left; + height: 6.25rem; + width: 100%; } diff --git a/source/_patterns/04-components/call-to-action/call-to-action.twig b/source/_patterns/04-components/call-to-action/call-to-action.twig index fbb3a0e988c0d5e6c5a0a5bfa533f9ea60381c8a..c7003a4b53afc5322cfe43570527d87fe9692fc5 100644 --- a/source/_patterns/04-components/call-to-action/call-to-action.twig +++ b/source/_patterns/04-components/call-to-action/call-to-action.twig @@ -10,9 +10,13 @@ {% endif %} <div class="uw-cta__wrapper"> + <div class="call-to-action-theme-{{ cta.theme }}"> {% for detail in cta.details %} + <div class="uw-cta__text uw-cta__text--{{ detail.type }}">{{ detail.text }}</div> + {% endfor %} + </div> </div> {% if cta.link %} diff --git a/source/_patterns/04-components/call-to-action/call-to-action.yml b/source/_patterns/04-components/call-to-action/call-to-action.yml index 15b5a663d016a512cf91b4890fb81ceb05d39266..f3382c8315aa9036cb982ab8f220dcc7409459d1 100644 --- a/source/_patterns/04-components/call-to-action/call-to-action.yml +++ b/source/_patterns/04-components/call-to-action/call-to-action.yml @@ -3,26 +3,43 @@ ctas: link: '#' details: - - text: 'BT#1' - type: 'big' - - - text: 'MT#1' - type: 'medium' - - - text: 'ST#1' + text: 'Small Text Here ' type: 'small' + + - text: 'UW WIDE MESSAGE' + type: 'big' theme: 'org-default' - link: '#' details: - - text: 'BT#2' - type: 'big' - - text: 'ST#2' + - text: 'Faculty of' type: 'small' + + - text: 'Applied Health Sciences' + type: 'big' theme: 'org-ahs' - link: '#' details: - - text: 'BT#3' + - text: 'Faculty of' + type: 'medium' + + - text: 'Engineering' type: 'big' theme: 'org-eng' + - link: '#' + details: + - text: 'Faculty of' + type: 'medium' + + - text: 'Environment' + type: 'big' + theme: 'org-env' + - link: '#' + details: + - text: 'Faculty of' + type: 'small' + + - text: 'Science' + type: 'big' + theme: 'org-sci' diff --git a/source/_patterns/04-components/expand-collapse/_expand-collapse.scss b/source/_patterns/04-components/expand-collapse/_expand-collapse.scss index e7a985d2a5e4a21d3bed85e0d71f66daab0b72f5..e0166dae331e823ce301f2ee39e68248abbab5d8 100644 --- a/source/_patterns/04-components/expand-collapse/_expand-collapse.scss +++ b/source/_patterns/04-components/expand-collapse/_expand-collapse.scss @@ -1,69 +1,110 @@ .uw-expand-collapse { + -webkit-font-smoothing: antialiased; + font-weight:200; + + &__item { display: block; + margin:0 0 rem(gesso-spacing(sm)) 0 ; width: 100%; + h2{ + margin: 0; + } } &__controls { display: grid; grid-template-columns: 50% 50%; + margin-bottom: rem(gesso-spacing(sm)); } &__button { - background-color: gesso-grayscale('gray-1'); - color: gesso-grayscale('gray-2'); - font-family:gesso-font-family(condensedbook); - font-size:rem(gesso-font-size(1)); - padding: 0.75rem; - position: relative; - text-align: left; - text-transform: uppercase; - width: 100%; + background: gesso-grayscale('gray-2'); + font-size: rem(gesso-font-size(1)); + font-weight: 400; + margin: 0; + max-width: inherit; - &:hover { - background-color: gesso-grayscale('gray-2'); - color: gesso-grayscale('gray-1'); - } + &:hover, + &:focus{ + outline: none; + &[data-type="expand-all"]{ + background: gesso-grayscale('gray-6'); + color: gesso-grayscale('gray-2'); + } + &[data-type="collapse-all"]{ + background: gesso-grayscale('gray-6'); + color: gesso-grayscale('gray-2'); + } + } &--controls { text-align: center; } - &--title { - &:hover { - &::after { - border: solid gesso-grayscale('gray-1'); - border-width: 0 3px 3px 0; - } - } + &[data-type="expand-all"]{ + background: gesso-grayscale('gray-2'); + border-right: 1px solid gesso-grayscale('gray-4'); + color: gesso-grayscale('gray-6'); + } + + &[data-type="collapse-all"]{ + background: gesso-grayscale('gray-2'); + color: gesso-grayscale('gray-6'); + } + &--title { + color: gesso-grayscale('gray-6'); + display: table; + font-size: rem(gesso-font-size(1)); + font-weight:400; + height: auto; + line-height:1.25; + margin: 0; + max-width: inherit; + min-height: 3.563rem; + padding: 0.75rem 3rem 0.75rem 0.75rem; + position:relative; + table-layout: fixed; + text-align: left; + user-select: text; + white-space: normal; + width: 100%; &::after { - border: solid gesso-grayscale('gray-2'); - border-width: 0 3px 3px 0; - content: ''; - display: inline-block; - padding: 3px; + content:'\e906'; + display: block; + font-family: gesso-font-family(iconfont); + font-size: rem(gesso-font-size(-2)); position: absolute; right: 5%; + text-align: center; + text-rendering: auto; top: 40%; - -webkit-transform: rotate(45deg); - transform: rotate(45deg); + transform: scale(1, 1) rotate(90deg); transform-origin: 50% 50%; + transition-delay:0s; + transition-duration:0.2s; + transition-property:transform; + transition-timing-function:linear; z-index: 2; } - &.uw-expanded { &::after { - -webkit-transform: rotate(-135deg); - transform: rotate(-135deg); + transform: scale(1, -1) rotate(90deg); } } + &:hover, + &:focus { + background: gesso-grayscale('gray-6'); + color: gesso-grayscale('gray-2'); + outline: none; + } } } &__text { display: none; font-size:rem(gesso-font-size(0)); - padding: 1rem 2rem; + padding: rem(gesso-spacing(sm)); } } diff --git a/source/_patterns/04-components/expand-collapse/expand-collapse.yml b/source/_patterns/04-components/expand-collapse/expand-collapse.yml index fa841d15cc5f0807d707e7b1f44f805b208a20e1..3cc347d9de3dcb0033c3f1815f0ea90ad6461411 100644 --- a/source/_patterns/04-components/expand-collapse/expand-collapse.yml +++ b/source/_patterns/04-components/expand-collapse/expand-collapse.yml @@ -1,11 +1,11 @@ id: '444-23245as3-424' ecs: - - title: 'Title #1' - text: 'Text #1' + title: 'This is the title for #1 i am going to make it long enough to break a line to demonstrate the wrapping of the title' + text: 'Text #1 Morbi pellentesque ipsum eu diam dapibus, a blandit mauris varius. Cras ultrices dolor eu lacinia mollis. Etiam eget tempus elit. Duis sed tellus sapien. Curabitur eu tincidunt sem. Integer venenatis eros quis massa aliquet imperdiet. Maecenas nunc felis, posuere sit amet neque et, dapibus mollis felis. Donec ut turpis ullamcorper mauris egestas imperdiet. Suspendisse vel ligula et arcu sodales convallis id in quam. Maecenas volutpat finibus nisi non laoreet. Nulla eleifend finibus mi sit amet congue. Ut aliquet in est et suscipit.' - - title: 'Title #2' - text: 'Text #2' + title: 'This is the title for #2' + text: 'Text #2 Morbi pellentesque ipsum eu diam dapibus, a blandit mauris varius. Cras ultrices dolor eu lacinia mollis. Etiam eget tempus elit. Duis sed tellus sapien. Curabitur eu tincidunt sem. Integer venenatis eros quis massa aliquet imperdiet. Maecenas nunc felis, posuere sit amet neque et, dapibus mollis felis. Donec ut turpis ullamcorper mauris egestas imperdiet. Suspendisse vel ligula et arcu sodales convallis id in quam. Maecenas volutpat finibus nisi non laoreet. Nulla eleifend finibus mi sit amet congue. Ut aliquet in est et suscipit.' - - title: 'Title #3' - text: 'Text #3' + title: 'This is the title for #3' + text: 'Text #3 Morbi pellentesque ipsum eu diam dapibus, a blandit mauris varius. Cras ultrices dolor eu lacinia mollis. Etiam eget tempus elit. Duis sed tellus sapien. Curabitur eu tincidunt sem. Integer venenatis eros quis massa aliquet imperdiet. Maecenas nunc felis, posuere sit amet neque et, dapibus mollis felis. Donec ut turpis ullamcorper mauris egestas imperdiet. Suspendisse vel ligula et arcu sodales convallis id in quam. Maecenas volutpat finibus nisi non laoreet. Nulla eleifend finibus mi sit amet congue. Ut aliquet in est et suscipit.' diff --git a/source/_patterns/04-components/form-item/_form-item.scss b/source/_patterns/04-components/form-item/_form-item.scss index 47697dc58b0ae540016211cf9a07b278e30c97c5..38c86d3c62310db2306cb550e30d7d9539f2ada6 100644 --- a/source/_patterns/04-components/form-item/_form-item.scss +++ b/source/_patterns/04-components/form-item/_form-item.scss @@ -13,7 +13,6 @@ $form-text-size: gesso-base-font-size() !default; margin: 0 0 rem(gesso-spacing(sm)); } - .form-item__label { display: block; diff --git a/source/_patterns/04-components/mailman-subscription/_mailman-subscription.scss b/source/_patterns/04-components/mailman-subscription/_mailman-subscription.scss index 5ef31da07125954612ad774e7d5110de4313b498..d6d66ee39db813d001c1f5083ba6cb498429c20a 100644 --- a/source/_patterns/04-components/mailman-subscription/_mailman-subscription.scss +++ b/source/_patterns/04-components/mailman-subscription/_mailman-subscription.scss @@ -1,10 +1,10 @@ .uw-mailman { - padding: 1rem 0; + padding: rem(gesso-spacing(sm)) 0; width: 100%; &__label { display: block; - margin-bottom: .35rem; + margin-bottom: rem(gesso-spacing(xs)); &--email { font-family: gesso-font-family(condensedbook); @@ -17,3 +17,10 @@ text-align: center; } } +.uw-mailmain__email{ + .uw-input--submit{ + font-size:rem(gesso-font-size(0)); + font-weight: gesso-font-weight(regular); + max-width:8.5rem; + } +} \ No newline at end of file diff --git a/source/_patterns/04-components/territorial-statement/_territorial-statement.scss b/source/_patterns/04-components/territorial-statement/_territorial-statement.scss index 43281743b515a3803365d83b610c2332abab86c2..89f36a65bd4bced0d70a5fde4e868f8bdb642ab1 100644 --- a/source/_patterns/04-components/territorial-statement/_territorial-statement.scss +++ b/source/_patterns/04-components/territorial-statement/_territorial-statement.scss @@ -8,7 +8,7 @@ text-align:center; p{ color:gesso-brand(org-default,uw-white,lvl1); - font-family: Typ1451-Regular; + font-family: gesso-font-family(systemmedium); font-size: rem(gesso-font-size(-2)); font-weight:200; letter-spacing:0.5px; diff --git a/source/_patterns/04-components/view/_view.scss b/source/_patterns/04-components/view/_view.scss index 278eb39be117a8d68be582beb51ff6f3c0f53241..a1a60d747fbb90a51d810caefd28394ecd422d6a 100644 --- a/source/_patterns/04-components/view/_view.scss +++ b/source/_patterns/04-components/view/_view.scss @@ -1,8 +1,57 @@ // @file // Styles for a view. -// .view {} +// Align the views container to the max width contain-width function. +.views-element-container{ + @include uw-contained-width; + padding: rem(gesso-spacing(sm)); + @include xl { + padding:rem(gesso-spacing(sm)) 0; + } +} +// set the layout for the Views container when being used with Blog, news, events +// to match flexbox in multi list usage. +.view{ + // View content container. + &-content{ + display:inline-flex; + flex-flow: row wrap; + } + // View container for taxonomy terms. + &.view-taxonomy-term, + //View container for blog landing page. + &.view-uw-view-blogs, + // View container for events landing page. + &.view-uw-view-events, + // View container for newslanding page. + &.view-uw-view-news-items{ + + // Universal row for views + .views-row{ + align-items:flex-start; + margin: rem(gesso-spacing(sm)); + width:100%; + @include small{ + flex-grow: 1; + width: 45%; + } + @include large{ + width: 30%; + } + } + } +} +.view-filters{ + // Universal filter form used on events, blog and news. + .views-exposed-form{ + + } +} +// Previous code . .view__filters { margin-bottom: rem(gesso-spacing(sm)); } + + +