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 @@ ...@@ -4,6 +4,7 @@
@use '../../01-core' as *; @use '../../01-core' as *;
:where(details) { :where(details) {
font-family: var(--font-primary);
&.uw-details, &.uw-details,
&.seven-details{ &.seven-details{
@include uw-no-breakout(); @include uw-no-breakout();
...@@ -62,7 +63,7 @@ ...@@ -62,7 +63,7 @@
display:block; display:block;
font-family: var(--font-book); font-family: var(--font-book);
font-size: var(--font-size-00); font-size: var(--font-size-00);
font-weight: var(--font-weight-3300); font-weight: var(--font-weight-300);
margin: 0; margin: 0;
line-height: 1.25; line-height: 1.25;
outline: 0; outline: 0;
...@@ -97,6 +98,7 @@ ...@@ -97,6 +98,7 @@
background: var(--uw-white); background: var(--uw-white);
border: var(--size-xs) solid var(--gray-2); border: var(--size-xs) solid var(--gray-2);
border-top: 0; border-top: 0;
font-family:inherit;
padding: var(--size-2); padding: var(--size-2);
> :last-child { > :last-child {
......
src/patterns/02-base/typography/typography.twig
+ 1
− 0
View file @ bdf86033
...@@ -476,3 +476,4 @@ ...@@ -476,3 +476,4 @@
</article> </article>
</div> </div>
</section>
src/patterns/04-components/_index.scss
+ 1
− 1
View file @ bdf86033
...@@ -14,7 +14,7 @@ ...@@ -14,7 +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 '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/card/_card.scss
+ 3
− 1
View file @ bdf86033
...@@ -154,7 +154,9 @@ $card-padding: var(--size-2) !default; ...@@ -154,7 +154,9 @@ $card-padding: var(--size-2) !default;
.card__content { .card__content {
margin-bottom: var(--size-3); margin-bottom: var(--size-3);
width: 100%; width: 100%;
.card__node--expand-collapse-group &{
margin-bottom: 0;
}
&:empty { &:empty {
margin-bottom: 0; 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 @@ ...@@ -2,7 +2,7 @@
@each $faculty, $colour in $faculties_colours { @each $faculty, $colour in $faculties_colours {
// Wrapping the element with this class, <body>. // Wrapping the element with this class, <body>.
.#{$faculty} { .#{$faculty} {
// If the UW branding group // If the UW branding group
...@@ -34,20 +34,27 @@ ...@@ -34,20 +34,27 @@
} }
} }
} }
.uw-details{ .uw-details{
.details__summary { .details__summary {
@include svg-background(mobile-arrow-down); @include svg-background(mobile-arrow-down);
background-color: var(--gray-2); background-color: var(--gray-2);
h2, h3, h4, h5, h6 { h2,
color: var(--gray-6); h3,
} h4,
h5,
h6 {
color: var(--gray-6);
}
&:hover, &:hover,
&:focus { &:focus {
@include svg-background(mobile-arrow-down-w); @include svg-background(mobile-arrow-down-w);
background-color: var(--gray-6); background-color: var(--gray-6);
h2,h3,h4,h5,h6 { h2,
color: var(--uw-white); h3,
h4,
h5,
h6 {
color: var(--uw-white);
} }
} }
} }
...@@ -56,14 +63,21 @@ ...@@ -56,14 +63,21 @@
> .details__summary { > .details__summary {
@include svg-background(mobile-arrow-up); @include svg-background(mobile-arrow-up);
background-color: var(--gray-2); background-color: var(--gray-2);
h2,h3,h4,h5,h6 { h2,
h3,
h4,
h5,
h6 {
color: var(--gray-6); color: var(--gray-6);
} }
&:focus { &:focus {
@include svg-background(mobile-arrow-up-w); @include svg-background(mobile-arrow-up-w);
background-color: var(--gray-6); background-color: var(--gray-6);
h2,h3,h4,h5,h6 { h2,
h3,
h4,
h5,
h6 {
color: var(--uw-white); color: var(--uw-white);
} }
} }
...@@ -71,7 +85,11 @@ ...@@ -71,7 +85,11 @@
&:hover { &:hover {
@include svg-background(mobile-arrow-up-w); @include svg-background(mobile-arrow-up-w);
background-color: var(--gray-6); background-color: var(--gray-6);
h2,h3,h4,h5,h6{ h2,
h3,
h4,
h5,
h6{
color: var(--uw-white); color: var(--uw-white);
} }
} }
...@@ -79,15 +97,15 @@ ...@@ -79,15 +97,15 @@
} }
} }
} }
}
} // Else run the loop on the faculties. // Else run the loop on the faculties.
@else { @else {
.uw-exp-col{ .uw-exp-col{
&__button{ &__button{
&[data-type="expand-all"] { &[data-type="expand-all"] {
background: var(--#{$colour}-primary); background: var(--#{$colour}-primary);
border-right: var(--size-xs) solid var(--uw-white); border-right: var(--size-xs) solid var(--uw-white);
color:var(--uw-white); color: var(--uw-white);
} }
&[data-type="collapse-all"] { &[data-type="collapse-all"] {
...@@ -98,27 +116,25 @@ ...@@ -98,27 +116,25 @@
&:hover, &:hover,
&:focus { &:focus {
outline: none; outline: none;
&[data-type="expand-all"] { &[data-type="expand-all"] {
background-color: var(--uw-white); background-color: var(--uw-white);
color: var(--#{$colour}-primary); color: var(--#{$colour}-primary);
} }
&[data-type="collapse-all"] { &[data-type="collapse-all"] {
background-color: var(--uw-white); background-color: var(--uw-white);
color: var(--#{$colour}-primary); color: var(--#{$colour}-primary);
} }
} }
} }
.uw-details{ .uw-details{
.details__summary {
background-image: inherit;
}
.details__summary { .details__summary {
background-color: var(--#{$colour}-primary); background-color: var(--#{$colour}-primary);
background-image: inherit;
h2, h3, h4, h5, h6 { h2,
h3,
h4,
h5,
h6 {
color: var(--uw-white); color: var(--uw-white);
} }
...@@ -132,7 +148,11 @@ ...@@ -132,7 +148,11 @@
&::after{ &::after{
@include svg-background-color(var(--#{$colour}-primary), mobile-arrow-down); @include svg-background-color(var(--#{$colour}-primary), mobile-arrow-down);
} }
h2, h3, h4, h5, h6 { h2,
h3,
h4,
h5,
h6 {
color: var(--#{$colour}-primary); color: var(--#{$colour}-primary);
} }
} }
...@@ -140,15 +160,16 @@ ...@@ -140,15 +160,16 @@
} }
.uw-details[open] { .uw-details[open] {
.details__summary { .details__summary {
background-image: inherit; background-image: inherit;
} }
> .details__summary { > .details__summary {
background-color: var(--#{$colour}-primary); background-color: var(--#{$colour}-primary);
h2,
h2, h3, h4, h5, h6 { h3,
h4,
h5,
h6 {
color: var(--uw-white); color: var(--uw-white);
} }
...@@ -158,49 +179,49 @@ ...@@ -158,49 +179,49 @@
} }
&:focus { &:focus {
.details__summary {
background-image: inherit;
}
.details__summary { .details__summary {
background-color: var(--uw-white); background-color: var(--uw-white);
background-image: inherit;
&::after { &::after {
@include svg-background-color(var(--#{$colour}-primary), mobile-arrow-down); @include svg-background-color(var(--#{$colour}-primary), mobile-arrow-down);
} }
h2,
h2, h3, h4, h5, h6 { h3,
h4,
h5,
h6 {
color: var(--#{$colour}-primary); color: var(--#{$colour}-primary);
} }
} }
} }
&:focus-within { &:focus-within {
.details__summary {
background-image:inherit;
}
.details__summary { .details__summary {
background-color: var(--uw-white); background-color: var(--uw-white);
background-image: inherit;
&::after { &::after {
@include svg-background-color(var(--#{$colour}-primary) ,mobile-arrow-up); @include svg-background-color(var(--#{$colour}-primary) ,mobile-arrow-up);
} }
h2,
h2, h3, h4, h5, h6 { h3,
h4,
h5,
h6 {
color: var(--#{$colour}-primary); color: var(--#{$colour}-primary);
} }
} }
} }
&:hover { &:hover {
.details__summary { .details__summary {
background-color: var(--uw-white); background-color: var(--uw-white);
&::after { &::after {
@include svg-background-color(var(--#{$colour}-primary), mobile-arrow-up); @include svg-background-color(var(--#{$colour}-primary), mobile-arrow-up);
} }
h2,
h2, h3, h4, h5, h6 { h3,
h4,
h5,
h6 {
color: var(--#{$colour}-primary); color: var(--#{$colour}-primary);
} }
} }
...@@ -210,33 +231,27 @@ ...@@ -210,33 +231,27 @@
} }
} }
} }
.uw-exp-col { .uw-exp-col {
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
&__operations { &__operations {
list-style-type: none; list-style-type: none;
margin: 0; margin: 0;
padding: var(--size-2) 0 0; padding: var(--size-2) 0 0;
li { li {
display: inline-block; display: inline-block;
} }
} }
&___group-info, &___group-info,
&__heading-selector, &__heading-selector,
&__heading-text { &__heading-text {
display: inline-block; display: inline-block;
} }
&__heading-selector { &__heading-selector {
.form-select { .form-select {
display: inline-block; display: inline-block;
width: 82%; width: 82%;
} }
} }
&__group-info, &__group-info,
&__heading-text { &__heading-text {
.ui-dialog & { .ui-dialog & {
...@@ -253,11 +268,10 @@ ...@@ -253,11 +268,10 @@
} }
&__controls { &__controls {
border: 1px solid var(--gray-2); border: var(--size-xs) solid var(--gray-2);
display: grid; display: grid;
grid-template-columns: 50% 50%; grid-template-columns: 50% 50%;
margin-bottom: var(--size-sm); margin-bottom: var(--size-2);
.no-js & { .no-js & {
display: none; display: none;
} }
...@@ -273,7 +287,6 @@ ...@@ -273,7 +287,6 @@
font-weight: 400; font-weight: 400;
margin: 0; margin: 0;
max-width: inherit; max-width: inherit;
&--controls { &--controls {
text-align: center; text-align: center;
} }
...@@ -281,9 +294,9 @@ ...@@ -281,9 +294,9 @@
.uw-details { .uw-details {
border: inherit; border: inherit;
font-family: inherit !important;
margin-bottom: var(--size-2); margin-bottom: var(--size-2);
margin-top: inherit; margin-top: inherit;
.details__summary { .details__summary {
background-image: inherit; background-image: inherit;
border: var(--size-xs) solid var(--gray-2); border: var(--size-xs) solid var(--gray-2);
...@@ -291,18 +304,20 @@ ...@@ -291,18 +304,20 @@
position: relative; position: relative;
text-shadow: inherit; text-shadow: inherit;
transition: background-color 0.2s ease-in-out; transition: background-color 0.2s ease-in-out;
&::after { &::after {
content: ''; content: '';
display: block; display: block;
height: var(--size-2); height: var(--size-2);
position: absolute; position: absolute;
right: var(--size-2); right: var(--size-2);
top:calc(50% - 0.5rem); top: calc(50% - 0.5rem);
width: var(--size-2); width: var(--size-2);
} }
h2,
h2,h3,h4,h5,h6 { h3,
h4,
h5,
h6 {
font-family: var(--font-condensedbook); font-family: var(--font-condensedbook);
// All headers currently set to same size // All headers currently set to same size
font-size: var(--font-size-1); font-size: var(--font-size-1);
...@@ -318,18 +333,14 @@ ...@@ -318,18 +333,14 @@
.details__content { .details__content {
background-color: var(--gray-1); background-color: var(--gray-1);
padding: var(--size-2); padding: var(--size-2);
.layout { .layout {
padding: 0; padding: 0;
} }
.block { .block {
margin-bottom: var(--size-2); margin-bottom: var(--size-2);
} }
} }
} }
.uw-exp-col__group-info { .uw-exp-col__group-info {
.form-type-entity-autocomplete { .form-type-entity-autocomplete {
display: inline-block; display: inline-block;
...@@ -344,7 +355,6 @@ ...@@ -344,7 +355,6 @@
} }
} }
/* stylelint-enable selector-max-id, declaration-no-important */ /* stylelint-enable selector-max-id, declaration-no-important */
.layout-builder{ .layout-builder{
&__section [data-expand-collapse-group], &__section [data-expand-collapse-group],
&__section [data-expand-collapse-header] { &__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; ...@@ -594,6 +594,7 @@ $menu-horizontal-drop-bg: #f7f7f7;
} }
} }
} }
/* stylelint-disable-next-line function-url-quotes */
@-moz-document url-prefix() { @-moz-document url-prefix() {
.uw-horizontal-nav--menu .menu .submenu-active .menu__subnav .menu__item.sub-1{ .uw-horizontal-nav--menu .menu .submenu-active .menu__subnav .menu__item.sub-1{
display: inline-grid !important; 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