Skip to content
Snippets Groups Projects
Commit 40d4b921 authored by Eric Bremner's avatar Eric Bremner
Browse files

ISTWCMS-5717: adding exp/col

parent 398c5f69
No related branches found
No related tags found
1 merge request!24Feature/istwcms 5717 ebremner exp col
Hide whitespace changes
Inline Side-by-side
src/patterns/04-components/_index.scss
+ 1
− 0
View file @ 40d4b921
...@@ -14,6 +14,7 @@ ...@@ -14,6 +14,7 @@
@forward 'content-grid-list/content-grid-list'; @forward 'content-grid-list/content-grid-list';
@forward 'copy-text/copy-text'; @forward 'copy-text/copy-text';
@forward 'date/date'; @forward 'date/date';
@forward 'exp_col_block/exp-col-block';
@forward 'filters/filters'; @forward 'filters/filters';
@forward 'icon/icon'; @forward 'icon/icon';
@forward 'icon/icon--button/icon--button'; @forward 'icon/icon--button/icon--button';
......
src/patterns/04-components/exp_col_block/_exp-col-block.scss 0 → 100644
+ 365
− 0
View file @ 40d4b921
@use '../../01-core' as *;
@each $faculty, $colour in $faculties_colours {
// 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: var(--gray-2);
border-right: var(--size-xs) solid var(--gray-4);
color: var(--gray-6);
}
&[data-type="collapse-all"] {
background: var(--gray-2);
color: var(--gray-6);
}
&:hover,
&:focus {
outline: none;
&[data-type="expand-all"] {
background: var(--gray-6);
color: var(--gray-2);
}
&[data-type="collapse-all"] {
background: var(--gray-6);
color: var(--gray-2);
}
}
}
.uw-details{
.details__summary {
@include svg-background(mobile-arrow-down);
background-color: var(--gray-2);
h2, h3, h4, h5, h6 {
color: var(--gray-6);
}
&:hover,
&:focus {
@include svg-background(mobile-arrow-down-w);
background-color: var(--gray-6);
h2,h3,h4,h5,h6 {
color: var(--uw-white);
}
}
}
&[open] {
> .details__summary {
@include svg-background(mobile-arrow-up);
background-color: var(--gray-2);
h2,h3,h4,h5,h6 {
color: var(--gray-6);
}
&:focus {
@include svg-background(mobile-arrow-up-w);
background-color: var(--gray-6);
h2,h3,h4,h5,h6 {
color: var(--uw-white);
}
}
&:hover {
@include svg-background(mobile-arrow-up-w);
background-color: var(--gray-6);
h2,h3,h4,h5,h6{
color: var(--uw-white);
}
}
}
}
}
}
} // Else run the loop on the faculties.
@else {
.uw-exp-col{
&__button{
&[data-type="expand-all"] {
background: var(--#{$colour}-primary);
border-right: var(--size-xs) solid var(--uw-white);
color:var(--uw-white);
}
&[data-type="collapse-all"] {
background: var(--#{$colour}-primary);
color: var(--uw-white);
}
&:hover,
&:focus {
outline: none;
&[data-type="expand-all"] {
background-color: var(--uw-white);
color: var(--#{$colour}-primary);
}
&[data-type="collapse-all"] {
background-color: var(--uw-white);
color: var(--#{$colour}-primary);
}
}
}
.uw-details{
.details__summary {
background-image: inherit;
}
.details__summary {
background-color: var(--#{$colour}-primary);
h2, h3, h4, h5, h6 {
color: var(--uw-white);
}
&::after {
@include svg-background-color(var(--uw-white), mobile-arrow-down);
}
&:hover,
&:focus {
background-color: var(--uw-white);
&::after{
@include svg-background-color(var(--#{$colour}-primary), mobile-arrow-down);
}
h2, h3, h4, h5, h6 {
color: var(--#{$colour}-primary);
}
}
}
}
.uw-details[open] {
.details__summary {
background-image: inherit;
}
> .details__summary {
background-color: var(--#{$colour}-primary);
h2, h3, h4, h5, h6 {
color: var(--uw-white);
}
&::after {
@include svg-background-color(var(--uw-white), mobile-arrow-up);
}
}
&:focus {
.details__summary {
background-image: inherit;
}
.details__summary {
background-color: var(--uw-white);
&::after {
@include svg-background-color(var(--#{$colour}-primary), mobile-arrow-down);
}
h2, h3, h4, h5, h6 {
color: var(--#{$colour}-primary);
}
}
}
&:focus-within {
.details__summary {
background-image:inherit;
}
.details__summary {
background-color: var(--uw-white);
&::after {
@include svg-background-color(var(--#{$colour}-primary) ,mobile-arrow-up);
}
h2, h3, h4, h5, h6 {
color: var(--#{$colour}-primary);
}
}
}
&:hover {
.details__summary {
background-color: var(--uw-white);
&::after {
@include svg-background-color(var(--#{$colour}-primary), mobile-arrow-up);
}
h2, h3, h4, h5, h6 {
color: var(--#{$colour}-primary);
}
}
}
}
}
}
}
}
.uw-exp-col {
-webkit-font-smoothing: antialiased;
&__operations {
list-style-type: none;
margin: 0;
padding: var(--size-2) 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 var(--gray-2);
display: grid;
grid-template-columns: 50% 50%;
margin-bottom: var(--size-sm);
.no-js & {
display: none;
}
.no-js.js &,
.js & {
display: grid;
}
}
&__button {
font-size: var(--font-size-1);
font-weight: 400;
margin: 0;
max-width: inherit;
&--controls {
text-align: center;
}
}
.uw-details {
border: inherit;
margin-bottom: var(--size-2);
margin-top: inherit;
.details__summary {
background-image: inherit;
border: var(--size-xs) solid var(--gray-2);
padding: 0;
position: relative;
text-shadow: inherit;
transition: background-color 0.2s ease-in-out;
&::after {
content: '';
display: block;
height: var(--size-2);
position: absolute;
right: var(--size-2);
top:calc(50% - 0.5rem);
width: var(--size-2);
}
h2,h3,h4,h5,h6 {
font-family: var(--font-condensedbook);
// All headers currently set to same size
font-size: var(--font-size-1);
font-weight: var(--font-weight-400);
letter-spacing: var(--font-letterspacing-2);
line-height: var(--font-lineheight-4);
margin: 0;
padding: var(--size-2) 2.75rem var(--size-2) var(--size-2);
text-transform: uppercase;
}
}
}
.details__content {
background-color: var(--gray-1);
padding: var(--size-2);
.layout {
padding: 0;
}
.block {
margin-bottom: var(--size-2);
}
}
}
.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: var(--size-5) !important;
position: relative;
&:first-of-type {
&::before {
background: #195c8f;
padding: var(--size-05) var(--size-2);
top: -0.5rem;
}
}
}
&.layout__region{
outline: var(--size-sm) dashed #195c8f;
}
}
src/patterns/04-components/exp_col_block/exp-col-block.js 0 → 100644
+ 33
− 0
View file @ 40d4b921
/**
* @file
*/
(function ($, Drupal) {
'use strict';
Drupal.behaviors.expcol = {
attach: function () {
$(document).ready(function () {
$('.uw-exp-col').each(function () {
// The id selector for the exp/col.
var idSelector = '#' + $(this).attr('id');
// Open all the details for the clicked E/C.
$(idSelector + ' button[data-type="expand-all"]').click(function () {
$(idSelector + ' details').each(function () {
$(this).attr('open', 'TRUE');
});
});
// Close all the details for the clicked E/C.
$(idSelector + ' button[data-type="collapse-all"]').click(function () {
$(idSelector + ' details').each(function () {
$(this).removeAttr('open');
});
});
});
});
}
};
})(jQuery, Drupal);
src/patterns/04-components/exp_col_block/exp_col_block.twig 0 → 100644
+ 21
− 0
View file @ 40d4b921
{% 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">
{{ ec.content }}
</div>
</details>
{% endfor %}
</div>
{% endif %}
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