Skip to content
Snippets Groups Projects
Commit bdf86033 authored by Martin Leblanc's avatar Martin Leblanc Committed by Eric Bremner
Browse files

ISTWCMS-5717: additional css for expand collapse , rename of scss file to match folder

parent d31234a3
No related branches found
No related tags found
1 merge request!24Feature/istwcms 5717 ebremner exp col
Hide whitespace changes
Inline Side-by-side
Showing
with 83 additions and 67 deletions
src/patterns/01-core/elements/_details.scss
+ 3
− 1
View file @ bdf86033
......@@ -4,6 +4,7 @@
@use '../../01-core' as *;
:where(details) {
font-family: var(--font-primary);
&.uw-details,
&.seven-details{
@include uw-no-breakout();
......@@ -62,7 +63,7 @@
display:block;
font-family: var(--font-book);
font-size: var(--font-size-00);
font-weight: var(--font-weight-3300);
font-weight: var(--font-weight-300);
margin: 0;
line-height: 1.25;
outline: 0;
......@@ -97,6 +98,7 @@
background: var(--uw-white);
border: var(--size-xs) solid var(--gray-2);
border-top: 0;
font-family:inherit;
padding: var(--size-2);
> :last-child {
......
src/patterns/02-base/typography/typography.twig
+ 1
− 0
View file @ bdf86033
......@@ -476,3 +476,4 @@
</article>
</div>
</section>
src/patterns/04-components/_index.scss
+ 1
− 1
View file @ bdf86033
......@@ -14,7 +14,7 @@
@forward 'content-grid-list/content-grid-list';
@forward 'copy-text/copy-text';
@forward 'date/date';
@forward 'exp_col_block/exp-col-block';
@forward 'exp_col_block/exp_col_block';
@forward 'filters/filters';
@forward 'icon/icon';
@forward 'icon/icon--button/icon--button';
......
src/patterns/04-components/card/_card.scss
+ 3
− 1
View file @ bdf86033
......@@ -154,7 +154,9 @@ $card-padding: var(--size-2) !default;
.card__content {
margin-bottom: var(--size-3);
width: 100%;
.card__node--expand-collapse-group &{
margin-bottom: 0;
}
&:empty {
margin-bottom: 0;
}
......
src/patterns/04-components/exp_col_block/_exp-col-block.scss → src/patterns/04-components/exp_col_block/_exp_col_block.scss
+ 74
− 64
View file @ bdf86033
......@@ -2,7 +2,7 @@
@each $faculty, $colour in $faculties_colours {
// Wrapping the element with this class, <body>.
// Wrapping the element with this class, <body>.
.#{$faculty} {
// If the UW branding group
......@@ -34,20 +34,27 @@
}
}
}
.uw-details{
.details__summary {
@include svg-background(mobile-arrow-down);
background-color: var(--gray-2);
h2, h3, h4, h5, h6 {
color: var(--gray-6);
}
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);
h2,
h3,
h4,
h5,
h6 {
color: var(--uw-white);
}
}
}
......@@ -56,14 +63,21 @@
> .details__summary {
@include svg-background(mobile-arrow-up);
background-color: var(--gray-2);
h2,h3,h4,h5,h6 {
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 {
h2,
h3,
h4,
h5,
h6 {
color: var(--uw-white);
}
}
......@@ -71,7 +85,11 @@
&:hover {
@include svg-background(mobile-arrow-up-w);
background-color: var(--gray-6);
h2,h3,h4,h5,h6{
h2,
h3,
h4,
h5,
h6{
color: var(--uw-white);
}
}
......@@ -79,15 +97,15 @@
}
}
}
} // Else run the loop on the faculties.
}
// 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);
color: var(--uw-white);
}
&[data-type="collapse-all"] {
......@@ -98,27 +116,25 @@
&: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 {
background-image: inherit;
h2,
h3,
h4,
h5,
h6 {
color: var(--uw-white);
}
......@@ -132,7 +148,11 @@
&::after{
@include svg-background-color(var(--#{$colour}-primary), mobile-arrow-down);
}
h2, h3, h4, h5, h6 {
h2,
h3,
h4,
h5,
h6 {
color: var(--#{$colour}-primary);
}
}
......@@ -140,15 +160,16 @@
}
.uw-details[open] {
.details__summary {
background-image: inherit;
}
> .details__summary {
background-color: var(--#{$colour}-primary);
h2, h3, h4, h5, h6 {
h2,
h3,
h4,
h5,
h6 {
color: var(--uw-white);
}
......@@ -158,49 +179,49 @@
}
&:focus {
.details__summary {
background-image: inherit;
}
.details__summary {
background-color: var(--uw-white);
background-image: inherit;
&::after {
@include svg-background-color(var(--#{$colour}-primary), mobile-arrow-down);
}
h2, h3, h4, h5, h6 {
h2,
h3,
h4,
h5,
h6 {
color: var(--#{$colour}-primary);
}
}
}
&:focus-within {
.details__summary {
background-image:inherit;
}
.details__summary {
background-color: var(--uw-white);
background-image: inherit;
&::after {
@include svg-background-color(var(--#{$colour}-primary) ,mobile-arrow-up);
}
h2, h3, h4, h5, h6 {
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 {
h2,
h3,
h4,
h5,
h6 {
color: var(--#{$colour}-primary);
}
}
......@@ -210,33 +231,27 @@
}
}
}
.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 & {
......@@ -253,11 +268,10 @@
}
&__controls {
border: 1px solid var(--gray-2);
border: var(--size-xs) solid var(--gray-2);
display: grid;
grid-template-columns: 50% 50%;
margin-bottom: var(--size-sm);
margin-bottom: var(--size-2);
.no-js & {
display: none;
}
......@@ -273,7 +287,6 @@
font-weight: 400;
margin: 0;
max-width: inherit;
&--controls {
text-align: center;
}
......@@ -281,9 +294,9 @@
.uw-details {
border: inherit;
font-family: inherit !important;
margin-bottom: var(--size-2);
margin-top: inherit;
.details__summary {
background-image: inherit;
border: var(--size-xs) solid var(--gray-2);
......@@ -291,18 +304,20 @@
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);
top: calc(50% - 0.5rem);
width: var(--size-2);
}
h2,h3,h4,h5,h6 {
h2,
h3,
h4,
h5,
h6 {
font-family: var(--font-condensedbook);
// All headers currently set to same size
font-size: var(--font-size-1);
......@@ -318,18 +333,14 @@
.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;
......@@ -344,7 +355,6 @@
}
}
/* stylelint-enable selector-max-id, declaration-no-important */
.layout-builder{
&__section [data-expand-collapse-group],
&__section [data-expand-collapse-header] {
......
src/patterns/04-components/menu/menu--horizontal/_menu--horizontal.scss
+ 1
− 0
View file @ bdf86033
......@@ -594,6 +594,7 @@ $menu-horizontal-drop-bg: #f7f7f7;
}
}
}
/* stylelint-disable-next-line function-url-quotes */
@-moz-document url-prefix() {
.uw-horizontal-nav--menu .menu .submenu-active .menu__subnav .menu__item.sub-1{
display: inline-grid !important;
......
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