Skip to content
GitLab
Commit b4668018 authored by Chris Shantz's avatar Chris Shantz
Browse files

Merge branch '3.1.x' into prod/3.1.x

parents 58bd8792 393b1df8
Hide whitespace changes
Inline Side-by-side
.stylelintrc.yml
View file @ b4668018
......@@ -12,6 +12,7 @@ rules:
- 'inside-function'
max-nesting-depth: 10
selector-max-compound-selectors: 10
selector-max-id: 1
no-empty-first-line: true
order/order:
- - type: at-rule
......
source/_data/design-tokens.artifact.yml
View file @ b4668018
......@@ -67,13 +67,13 @@ gesso:
lvl2: "#ff63aa"
lvl3: "#df2498"
lvl4: "#c60078"
primary: "#c60078"
primary: "#df2498"
org-sci:
lvl1: "#b4d5ff"
lvl2: "#63a0ff"
lvl3: "#0073ce"
lvl4: "#0033be"
primary: "#0033be"
primary: "#0073ce"
org-school:
lvl1: "#ffa5aa"
lvl2: "#e41740"
......
source/_patterns/00-config/01-mixins/_mixins.svg-background.scss
View file @ b4668018
......@@ -5,6 +5,17 @@
background-image: url($image-location + $image-name + '.svg');
}
@mixin svg-background-color($image-color, $image-name, $image-location: '../source/images/icons/') {
background-color: $image-color;
-webkit-mask: url($image-location + $image-name + '.svg') no-repeat;
mask: url($image-location + $image-name + '.svg') no-repeat;
-webkit-mask-size: contain;
mask-size: contain;
}
@mixin svgz-background($image-name, $image-location: '../source/images/icons/') {
background-image: url($image-location + $image-name + '.svgz');
}
......
source/_patterns/00-config/config.design-tokens.yml
View file @ b4668018
......@@ -67,13 +67,13 @@ gesso:
lvl2: '#ff63aa'
lvl3: '#df2498'
lvl4: '#c60078'
primary: '#c60078'
primary: '#df2498'
org-sci:
lvl1: '#b4d5ff'
lvl2: '#63a0ff'
lvl3: '#0073ce'
lvl4: '#0033be'
primary: '#0033be'
primary: '#0073ce'
org-school:
lvl1: '#ffa5aa'
lvl2: '#e41740'
......
source/_patterns/02-base/02-html-elements/00-universal/_universal.scss
View file @ b4668018
......@@ -11,7 +11,7 @@
*,
*::before,
*::after {
box-sizing: inherit;
box-sizing:border-box;
}
@media print {
......
source/_patterns/03-layouts/site-footer/site-footer.twig
View file @ b4668018
......@@ -9,7 +9,7 @@
</div>
{% else %}
<div class="uw-site-footer__title">
<a href="{{ logo_link }}">
<a href="{{ home_link }}">
{{ site_name }}
</a>
</div>
......
source/_patterns/04-components/exp_col_block/_exp-col-block.scss 0 → 100644
View file @ b4668018
$faculties: 'org-default', 'neutral', 'org-ahs', 'org-art', 'org-eng', 'org-env', 'org-mat', 'org-sci', 'org-school', 'org-stp', 'org-cgc', 'org-stj', 'org-ren';
@each $faculty in $faculties {
// Wrapping the element with this class, <body>.
.#{$faculty} {
// If the UW branding group
@if $faculty == org-default {
.uw-exp-col{
&__button{
&[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');
}
&: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');
}
}
}
.uw-details{
.details__summary {
@include svg-background(mobile-arrow-down);
background-color:gesso-grayscale('gray-2');
h2, h3, h4, h5, h6 {
color: gesso-grayscale('gray-6');
}
&:hover,
&:focus{
@include svg-background(mobile-arrow-down-w);
background-color: gesso-grayscale('gray-6');
h2,h3,h4,h5,h6{
color:$uw-white;
}
}
}
&[open] {
> .details__summary{
@include svg-background(mobile-arrow-up);
background-color:gesso-grayscale('gray-2');
h2,h3,h4,h5,h6{
color:gesso-grayscale('gray-6');
}
&:focus{
@include svg-background(mobile-arrow-up-w);
background-color:gesso-grayscale('gray-6');
h2,h3,h4,h5,h6{
color:$uw-white;
}
}
&:hover{
@include svg-background(mobile-arrow-up-w);
background-color:gesso-grayscale('gray-6');
h2,h3,h4,h5,h6{
color:$uw-white;
}
}
}
}
}
}
} // Else run the loop on the faculties.
@else {
.uw-exp-col{
&__button{
&[data-type="expand-all"] {
background: gesso-brand($faculty, 'primary');
border-right: 1px solid $uw-white;
color:$uw-white;
}
&[data-type="collapse-all"] {
background: gesso-brand($faculty, 'primary');
color:$uw-white;
}
&:hover,
&:focus {
outline: none;
&[data-type="expand-all"] {
background-color:$uw-white;
color:gesso-brand($faculty, 'primary');
}
&[data-type="collapse-all"] {
background-color:$uw-white;
color:gesso-brand($faculty, 'primary');
}
}
}
.uw-details{
.details__summary {
background-image:inherit;
}
.details__summary {
background-color: gesso-brand($faculty, 'primary');
h2, h3, h4, h5, h6 {
color: $uw-white;
}
&::after{
@include svg-background-color($uw-white,mobile-arrow-down);
}
&:hover,
&:focus{
background-color:$uw-white;
&::after{
@include svg-background-color(gesso-brand($faculty, 'primary'),mobile-arrow-down);
}
h2, h3, h4, h5, h6 {
color: gesso-brand($faculty, 'primary');
}
}
}
}
.uw-details[open] {
.details__summary{
background-image:inherit;
}
> .details__summary{
background-color: gesso-brand($faculty, 'primary');
h2, h3, h4, h5, h6 {
color: $uw-white;
}
&::after{
@include svg-background-color($uw-white,mobile-arrow-up);
}
}
&:focus{
.details__summary{
background-image:inherit;
}
.details__summary{
background-color:$uw-white;
&::after{
@include svg-background-color(gesso-brand($faculty, 'primary'),mobile-arrow-down);
}
h2, h3, h4, h5, h6 {
color: gesso-brand($faculty, 'primary');
}
}
}
&:focus-within{
.details__summary{
background-image:inherit;
}
.details__summary{
background-color:$uw-white;
&::after{
@include svg-background-color(gesso-brand($faculty, 'primary') ,mobile-arrow-up);
}
h2, h3, h4, h5, h6 {
color: gesso-brand($faculty, 'primary');
}
}
}
&:hover{
.details__summary{
background-color:$uw-white;
&::after{
@include svg-background-color(gesso-brand($faculty, 'primary'),mobile-arrow-up);
}
h2, h3, h4, h5, h6 {
color: gesso-brand($faculty, 'primary');
}
}
}
}
}
}
}
}
.uw-exp-col{
-webkit-font-smoothing: antialiased;
font-weight:200;
&__operations {
list-style-type: none;
margin: 0;
padding: 1rem 0 0;
li {
display: inline-block;
}
}
&___group-info,
&__heading-selector,
&__heading-text{
display: inline-block;
}
&__heading-selector {
.form-select {
display: inline-block;
width: 82%;
}
}
&__group-info,
&__heading-text{
.ui-dialog &{
input[size="60"]{
display: inline-block;
}
}
}
&__table {
td {
vertical-align: top;
}
}
&__controls {
border: 1px solid gesso-grayscale(gray-2);
display: grid;
grid-template-columns: 50% 50%;
margin-bottom: rem(gesso-spacing(sm));
.no-js &{
display: none;
}
.no-js.js &,
.js &{
display: grid;
}
}
&__button {
font-size: rem(gesso-font-size(1));
font-weight: 400;
margin: 0;
max-width: inherit;
&--controls {
text-align: center;
}
}
.uw-details{
border:inherit;
margin-bottom:1rem;
margin-top:inherit;
.details__summary{
background-image:inherit;
border: 1px solid gesso-grayscale(gray-2);
padding:0;
position:relative;
text-shadow:inherit;
transition: background-color gesso-duration(short) gesso-easing(ease-in-out);
&::after{
//background-color:$test-color-4;
content:'';
display:block;
height:1rem;
position:absolute;
right:1rem;
top:calc(50% - 0.5rem);
width:1rem;
}
h2,h3,h4,h5,h6{
font-family: gesso-font-family(condensedbook);
// All headers currently set to same size
font-size: gesso-font-size(1);
font-weight: gesso-font-weight(regular);
letter-spacing: 0.055rem;
line-height: gesso-line-height(base);
margin:0;
padding:1rem 2.75rem 1rem 1rem;
text-transform:uppercase;
}
}
&[open]{
.details__summary::after{
//background-color:$test-color-8;
}
}
}
.details__content {
background-color:#fafafa;
padding: 1rem;
.layout{
padding:0;
}
.block{
margin-bottom: 1rem;
}
}
}
.uw-exp-col__group-info {
.form-type-entity-autocomplete {
display: inline-block;
width: 90%;
}
}
/* stylelint-disable selector-max-id, declaration-no-important */
#drupal-modal {
.uw-content-moderation {
display: none;
}
}
/* stylelint-enable selector-max-id, declaration-no-important */
.layout-builder{
&__section [data-expand-collapse-group],
&__section [data-expand-collapse-header] {
margin-top: 2.5rem !important;
position: relative;
&:first-of-type{
&::before {
background: #195C8F;
padding: 0.25rem 1rem;
top:-0.5rem;
}
}
}
&.layout__region{
outline: 2px dashed #195C8F;
}
}
source/_patterns/04-components/exp_col_block/exp-col-block.js 0 → 100644
View file @ b4668018
/**
* @file
*/
(function ($, Drupal) {
Drupal.behaviors.expcol = {
attach: function (context, settings) {
$(document).ready(function () {
$('.uw-exp-col').each(function () {
// The id selector for the exp/col.
var id_selector = '#' + $(this).attr('id');
// Open all the details for the clicked E/C.
$(id_selector + ' button[data-type="expand-all"]').click(function () {
$(id_selector + ' details').each(function () {
$(this).attr('open', 'TRUE');
});
});
// Close all the details for the clicked E/C.
$(id_selector + ' button[data-type="collapse-all"]').click(function () {
$(id_selector + ' details').each(function () {
$(this).removeAttr('open');
});
});
});
});
}
};
})(jQuery, Drupal);
source/_patterns/04-components/exp_col_block/exp_col_block.twig 0 → 100644
View file @ b4668018
{% if exp_col.items|length > 0 %}
<div id="{{ exp_col.uuid }}" class="uw-exp-col">
{% if exp_col.show_exp_col_all %}
<div class="uw-exp-col__controls">
<button class="uw-exp-col__button uw-exp-col__button--controls" data-type="expand-all">Expand All</button>
<button class="uw-exp-col__button uw-exp-col__button--controls" data-type="collapse-all">Collapse All</button>
</div>
{% endif %}
{% for ec in exp_col.items %}
<details class="uw-details">
<summary class="details__summary">
<{{ exp_col.heading_selector }}>{{ ec.heading_text }}</{{ exp_col.heading_selector }}>
</summary>
<div class="details__content">
{% for group in ec.groups %}
{{ group }}
{% endfor %}
</div>
</details>
{% endfor %}
</div>
{% endif %}
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